.audio-player{width:min(820px,calc(100% - 40px));padding:24px;border:1px solid rgba(16,38,59,.12);border-radius:18px;background:var(--surface);box-shadow:0 18px 60px rgba(16,38,59,.1);display:grid;gap:18px}.audio-wave{position:relative;width:100%;aspect-ratio:16/5;min-height:150px;border:0;border-radius:13px;overflow:hidden;background:var(--ink);padding:0;cursor:crosshair}.audio-wave-base,.audio-wave-progress{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat}.audio-wave-base{opacity:.38;filter:saturate(.65)}.audio-wave-progress{width:0;right:auto;opacity:1;border-right:2px solid #fff}.audio-wave-progress:after{content:'';position:absolute;right:-5px;top:0;width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.3)}.audio-wave-time{position:absolute;left:12px;bottom:10px;padding:5px 7px;border-radius:7px;background:rgba(7,20,31,.72);color:#fff;font:600 9px 'IBM Plex Mono',monospace;backdrop-filter:blur(6px)}.audio-controls{display:grid;grid-template-columns:auto auto auto minmax(120px,1fr) auto;align-items:center;gap:10px}.audio-control{width:42px;height:42px;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--blueprint);display:grid;place-items:center;font-size:11px;font-weight:600}.audio-control:hover{border-color:var(--copper);color:var(--copper)}.audio-play{width:50px;height:50px;border:0;border-radius:15px;background:var(--ink);color:#fff;font-size:18px}.audio-play:hover{background:var(--blueprint);color:#fff}.audio-timeline{display:grid;gap:6px;min-width:0}.audio-timeline input{width:100%;accent-color:var(--copper)}.audio-times{display:flex;justify-content:space-between;color:var(--tertiary);font:600 9px 'IBM Plex Mono',monospace}.audio-volume{display:flex;align-items:center;gap:7px}.audio-volume input{width:78px;accent-color:var(--copper)}
@media(max-width:700px){.audio-player{width:calc(100% - 20px);padding:12px;gap:13px}.audio-wave{aspect-ratio:4/3;min-height:180px}.audio-controls{grid-template-columns:auto auto auto 1fr}.audio-timeline{grid-column:1/-1;grid-row:2}.audio-volume{display:none}.audio-play{width:48px;height:48px}.audio-control{width:42px;height:42px}}