/* The case is decorative. Every transport, dial and seek control is native input. */
body{background:var(--bg)}.terminal{width:min(1260px,100%);margin:auto;padding:30px 34px 36px}.actionbar{background:transparent;border-bottom:1px solid var(--line);padding:0 0 18px;margin-bottom:30px}.wordmark{font-size:20px;letter-spacing:-1px}.session-id{letter-spacing:1px;font-size:9px}.welcome{display:none}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--muted)}.welcome h1,.unlock-card h1{font-size:clamp(38px,6vw,70px);letter-spacing:-4px;font-weight:500;margin:12px 0}.welcome p{color:var(--muted);margin-bottom:32px}.is-empty .welcome{display:block}.is-empty .project-bar,.is-empty .workspace,.is-empty .share-panel,.is-empty .analysis-panel{display:none}.is-empty .intake{margin:35px 0 90px}.is-empty .dropzone{min-height:220px;justify-content:center;flex-direction:column;gap:20px;border-radius:4px;background:#f3f3ee}.is-empty .dropzone>span:first-child{font-size:18px}.dropzone{border-radius:4px}.project-bar{margin-bottom:24px}.workspace{grid-template-columns:minmax(270px, .85fr) minmax(480px,1.4fr);gap:28px}.playlist-panel{border-color:var(--line);border-radius:3px}.hardware{--case:#e9eadf;--ink:#35402f;--accent:#f4d39a;color:var(--ink);border:2px solid #f7f8ec;border-radius:25px;padding:0 23px 19px;background:linear-gradient(135deg,#f9f9ef 0%,var(--case) 55%,#cecec2);box-shadow:inset 0 -4px 5px #8e94875c,inset 0 2px 2px white,0 16px 22px -15px #24291f80,0 3px 5px #71776860;position:relative;min-width:0}.deck-top{display:flex;justify-content:space-between;align-items:center;padding:15px 0 14px;border-bottom:1px solid #b3b6a4;box-shadow:0 1px #fff9;margin-bottom:17px;letter-spacing:1.5px}.deck-top strong{font-family:inherit;font-size:23px;letter-spacing:-1px}.deck-top>span{font-size:8px}.power-led{display:inline-block;width:5px;height:5px;border-radius:50%;background:#d4aa6c;box-shadow:inset 0 1px 2px #765b39;margin-right:7px}.hardware[data-playing=true] .power-led{background:#f8d99e;box-shadow:0 0 6px #ffdf97}.deck-face{display:grid;grid-template-columns:minmax(0,1fr) 22%;gap:24px}.lcd{background:repeating-linear-gradient(0deg,transparent 0 2px,#fff1 3px 3.3px),radial-gradient(ellipse at 35% 60%,#25382e,#101b17);border:4px solid #b3baaa;border-radius:13px;box-shadow:inset 0 3px 12px #000d,0 1px 1px white;color:#f3dba7;padding:15px 16px;min-height:155px;position:relative;overflow:hidden}.lcd .muted{color:#b9b08d}.lcd .now-playing{min-height:42px;display:flex;flex-direction:column;gap:2px;max-width:100%}.lcd h1{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;letter-spacing:-.5px;margin:2px 0}.lcd #track-source{font-size:9px}.lcd .time-display{gap:8px;position:relative;margin:12px 0 0}.lcd #elapsed{font-size:39px;letter-spacing:-2px;text-shadow:0 0 5px #ffe4aa55;font-variant-numeric:tabular-nums}.lcd .time-display>.muted{font-size:10px}.lcd .tape{width:68px;flex-basis:68px;color:#d6c18a;opacity:.8}.lcd .tape-shell,.lcd .tape-hub{fill:#1c2a22}.lcd .tape-reel{fill:#4b5140}.lcd .tape-reel path{stroke:#d6c18a}.deck-art{width:47px;height:47px;object-fit:cover;position:absolute;right:12px;top:12px;opacity:.8;filter:sepia(.6);border:1px solid #c5be9570}.lcd:has(.deck-art:not([hidden])) .now-playing{padding-right:47px}.speaker{margin:4px 0 7px;border-radius:9px;background:repeating-linear-gradient(0deg,#7c8273 0 1px,#f3f4e8 1px 3px,#c2c6b8 3px 4px);box-shadow:inset 0 2px 3px #52594850}.hardware .waveform{height:36px;margin:12px 2px 8px;border-color:#c2c6b8}.hardware .waveform-unplayed{fill:#b4b9a7}.hardware #waveform-played{fill:#59654e}.hardware .waveform-status{background:var(--case);color:#69715f}.hardware #waveform-cursor{stroke:#ad8342;stroke-width:2}.deck-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 20px}.dial{width:91px;height:91px;flex:none;border-radius:50%;background:radial-gradient(circle,#e1e6d7 0 47%,#aeb8a4 49%,#fafcf1 51% 61%,transparent 62%),repeating-conic-gradient(#87937e 0 1.8deg,#f8fbef 1.8deg 6deg);border:4px solid #b8beaf;box-shadow:0 3px 5px #6b725959,inset 0 0 0 3px #f2f6e9;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.dial>span{font-size:7px;letter-spacing:1px}.dial output{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}.dial input{position:absolute;width:69px;bottom:6px;accent-color:#c49650;height:7px;cursor:ew-resize}.hardware .transport{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:10px 8px;flex:1;max-width:265px}.hardware button:not(.track-name),.hardware select{color:#35402f;background:linear-gradient(#fcfdf4,#dde1d3);border:1px solid #aab5a0;border-radius:6px;box-shadow:inset 0 1px 1px white,0 2px 3px #65725640;min-height:29px}.hardware button:hover:not(:disabled){background:#f9e4bd;color:#35402f}.hardware button:active:not(:disabled){box-shadow:inset 0 2px 3px #65725650;transform:translateY(1px)}.hardware .transport #play-pause{grid-column:2;grid-row:1/3;align-self:center;min-height:42px;border-radius:50%;color:#303e28;background:linear-gradient(#ffedce,#f0ce94);border:1px solid #a4916e;font-size:19px;box-shadow:inset 0 2px 1px #fff9,0 3px 4px #69715750}.hardware #previous{grid-column:1;grid-row:1}.hardware #next{grid-column:3;grid-row:1}.hardware #mute{grid-column:1;grid-row:2;margin:0;font-size:8px}.hardware #repeat{grid-column:3;grid-row:2;font-size:8px}.deck-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #bdc1b2;box-shadow:0 -1px #ffffffe0;padding-top:10px;gap:10px;font-size:7px;letter-spacing:1px}.deck-bottom label{white-space:nowrap}.hardware select{font-size:9px;min-height:22px}.hardware .track-actions{border-color:#bfc4b4;font-size:9px}.hardware .track-message,.hardware .fine,.hardware .muted{color:#707967}.hardware .lcd .muted{color:#b9b08d}.hardware .song-versions{border-color:#bfc4b4}.hardware[data-style=cassette]{--case:#3e4850;--ink:#e6e4ce;background:linear-gradient(135deg,#687079,#353d45);border-color:#79828a;border-radius:12px;color:#e6e4ce;box-shadow:inset 0 -5px 0 #232930,0 14px 22px -12px #0009}.hardware[data-style=cassette] .deck-face{grid-template-columns:1fr}.hardware[data-style=cassette] .speaker{display:none}.hardware[data-style=cassette] .lcd{border-color:#20282d;background:repeating-linear-gradient(0deg,transparent 0 2px,#fff1 3px 3.3px),#adbaa0;color:#203225;box-shadow:inset 0 2px 12px #24362988}.hardware[data-style=cassette] .lcd .muted{color:#42533d}.hardware[data-style=cassette] .tape{width:110px;flex-basis:110px}.hardware[data-style=cassette] .deck-top{border-color:#222c32}.hardware[data-style=cassette] .muted,.hardware[data-style=cassette] .fine{color:#c5cdbf}.hardware[data-style=cd]{--case:#e1e7e9;background:linear-gradient(145deg,#fafcfd,#c6cdd1);border-color:#edf1f2;border-radius:60px 60px 35px 35px}.hardware[data-style=cd] .speaker{border-radius:50%;aspect-ratio:1;align-self:center;background:radial-gradient(circle,#d5dce0 0 10%,#4a5357 11% 14%,#e3e9e9 15% 25%,transparent 26%),conic-gradient(#8198a5,#e8d4c4,#cde1df,#9696ae,#d6e5db,#8198a5);box-shadow:0 0 0 6px #adb6ba,inset 0 0 0 10px #eaf0f388;animation:disc-turn 5s linear infinite;animation-play-state:paused}.hardware[data-style=cd][data-playing=true] .speaker{animation-play-state:running}.hardware[data-style=cd] .lcd{border-color:#adb8bd;background:linear-gradient(#112d33,#233d41);color:#c9e7df}.share-panel{border-top:1px solid var(--line);margin-top:32px;padding-top:18px}.section-heading{display:flex;gap:15px;justify-content:space-between;font-size:10px}.section-heading h2{font-size:12px}.share-form{display:flex;align-items:end;gap:18px;flex-wrap:wrap}.share-form>label:first-child{font-size:10px;flex:1;min-width:200px}.share-form input[type=password]{display:block;width:100%;margin-top:6px;min-height:35px}.share-form button{min-height:35px}.analytics-switch{font-size:10px;margin-bottom:9px}.share-url{display:flex;gap:8px;align-items:center;margin-top:16px}.share-url input{flex:1;min-width:0;padding:9px}.share-extras{display:flex;gap:15px;align-items:center;font-size:10px;flex-wrap:wrap}.share-extras button{font-size:10px}.text-button{background:none;padding:0;min-height:0;text-decoration:underline;font-size:inherit}#insights{margin-top:18px;border-top:1px solid var(--soft)}#insights .evidence-table th:first-child{width:auto}.report-scroll{overflow:auto}.listening-session{border-top:1px dashed var(--line);margin-top:12px;padding-top:6px}.listening-session p{font-size:10px;color:var(--muted);overflow-wrap:anywhere}.listener .terminal{max-width:930px}.listener .hardware{padding:0 32px 22px}.listener .deck-top{padding-top:21px}.listener .deck-face{gap:42px;grid-template-columns:minmax(0,1fr) 23%}.listener .lcd{min-height:188px;padding:20px 23px}.listener .lcd #elapsed{font-size:54px}.listener .lcd h1{font-size:18px}.listener .lcd .now-playing{min-height:63px}.listener .dial{width:118px;height:118px}.listener .dial input{width:90px;bottom:9px}.listener .dial output{font-size:16px}.listener .deck-controls{gap:20px}.listener .transport{max-width:360px;gap:15px}.listener .transport #play-pause{min-height:55px}.listener .deck-art{width:65px;height:65px;right:18px;top:19px}.listener .lcd:has(.deck-art:not([hidden])) .now-playing{padding-right:65px}.listen-heading{display:flex;justify-content:space-between;align-items:center;margin:5px 0 24px;gap:18px}.listen-heading h1{font-size:24px;letter-spacing:-1px;margin:7px 0;overflow-wrap:anywhere}.listen-heading p{font-size:12px}.listen-heading>span{white-space:nowrap;font-size:10px}.listening-tracks{margin:30px 0 20px}.listener-track{display:grid;width:100%;grid-template-columns:30px 1fr 55px;gap:15px;text-align:left;align-items:center;padding:13px 12px;border-top:1px solid var(--line);background:none;font-size:12px;white-space:normal}.listener-track span:nth-child(2){overflow-wrap:anywhere}.listener-track span:last-child{text-align:right;font-size:10px}.listener-track.selected{background:#d6d9ce}.analytics-choice{padding:16px;border:1px solid var(--line);margin-top:20px}.analytics-choice strong{font-size:11px}.analytics-choice p{font-size:11px;line-height:1.7;color:var(--muted);margin:8px 0 14px}.choice-buttons{display:flex;gap:12px}.choice-buttons button{flex:1;white-space:normal}.listener-preferences{display:flex;justify-content:space-between;margin-top:18px;font-size:10px;align-items:center}.listener-preferences button{font-size:10px}.listener-footer{border-top:1px solid var(--line);margin-top:34px;padding-top:15px;display:flex;gap:16px;font-size:10px;color:var(--muted);flex-wrap:wrap}.listener-footer span{margin-left:auto}.unlock-card{max-width:580px;margin:90px auto 130px}.unlock-card h1{font-size:46px;letter-spacing:-2px}.unlock-card form{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:30px}.unlock-card label{grid-column:1/-1;font-size:11px}.unlock-card input{min-height:42px}.unlock-card .error{font-size:11px;margin-top:12px}:root.dark body{background:var(--bg)}:root.dark .dropzone{background:var(--surface)}@keyframes disc-turn{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.hardware[data-style=cd] .speaker{animation:none}}@media(max-width:1000px){.workspace{grid-template-columns:1fr}.workspace .hardware{grid-row:1;max-width:720px;width:100%;justify-self:center}}@media(max-width:600px){.terminal{padding:20px 16px}.actionbar{gap:10px}.actionbar .session-id{font-size:8px;max-width:100px}.welcome h1{letter-spacing:-2px}.is-empty .intake{margin-bottom:60px}.is-empty .dropzone>span:first-child{font-size:14px}.hardware,.listener .hardware{padding:0 15px 15px;border-radius:22px}.deck-face,.listener .deck-face{grid-template-columns:minmax(0,1fr) 17%;gap:12px}.lcd,.listener .lcd{min-height:150px;padding:13px 12px}.lcd #elapsed,.listener .lcd #elapsed{font-size:34px}.lcd h1,.listener .lcd h1{font-size:12px}.listener .lcd .now-playing{min-height:43px}.lcd .tape{display:none}.deck-art,.listener .deck-art{width:37px;height:37px;top:12px;right:10px}.lcd:has(.deck-art:not([hidden])) .now-playing,.listener .lcd:has(.deck-art:not([hidden])) .now-playing{padding-right:34px}.dial,.listener .dial{width:74px;height:74px;border-width:3px}.dial input,.listener .dial input{width:54px;bottom:4px}.dial output,.listener .dial output{font-size:11px}.dial>span{font-size:6px}.deck-controls,.listener .deck-controls{gap:8px;margin:14px 0 18px}.hardware .transport,.listener .transport{gap:8px 6px}.hardware .transport #play-pause,.listener .transport #play-pause{min-height:36px;min-width:34px}.hardware button:not(.track-name){padding:3px 6px;font-size:10px}.hardware #mute,.hardware #repeat{font-size:7px;padding:2px 3px}.deck-bottom{font-size:6px;letter-spacing:.5px}.deck-top strong{font-size:21px}.deck-top>span{font-size:7px}.listener .deck-top{padding-top:16px}.listener-track{gap:10px}.section-heading{display:block}.share-form{gap:10px}.share-form>label:first-child{flex-basis:100%}.share-form>button{flex:1}.share-url{flex-wrap:wrap}.share-url input{width:100%;flex-basis:100%}.listen-heading h1{font-size:20px}.unlock-card{margin:70px auto}.unlock-card h1{font-size:35px}.unlock-card form{grid-template-columns:1fr}.choice-buttons{flex-direction:column}.listener-footer span{margin-left:0;width:100%}}

.hardware .dial{color:#35402f}
@media(max-width:600px){.hardware[data-style=cassette] .tape{display:block;width:78px;flex-basis:78px}}

/* Rotary controls share the native range's focus and keyboard behavior. */
.hardware .dial{touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;--knob-angle:0deg}
.hardware .dial::after{content:"";position:absolute;inset:12%;border-radius:50%;background:linear-gradient(#bc9053,#d5ad70) center top / 4px 13% no-repeat;transform:rotate(var(--knob-angle));pointer-events:none}
.hardware .dial input,.listener .hardware .dial input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}
.hardware .dial:focus-within{outline:2px solid #987540;outline-offset:4px}
.hardware .dial output{font-weight:500}
.listener .terminal{max-width:850px}
.listener .actionbar{align-items:center}
.listener .actionbar #copy-tape{margin-left:auto;font-size:10px}
.mobile-brand,.mobile-tape-heading,.copy-tape-icon{display:none}
@media(max-width:600px){
  .listener .actionbar{gap:7px;padding-bottom:10px;margin-bottom:18px;min-height:44px}
  .listener .wordmark{font-size:11px;letter-spacing:-.3px;flex:none}
  .listener .desktop-brand{display:none}
  .listener .mobile-brand{display:inline}
  .listener .mobile-tape-heading:not([hidden]){display:flex;align-items:center;gap:6px;min-width:0;flex:1;font-size:10px;white-space:nowrap}
  .listener .mobile-tape-heading h1{font-size:10px;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .listener #mobile-album-artist{min-width:0;overflow:hidden;text-overflow:ellipsis;flex-shrink:1.2}
  .listener .actionbar:has(.mobile-tape-heading:not([hidden]))~#listening-room .listen-heading{display:none}
  .listener .actionbar #copy-tape{display:grid;place-items:center;flex:none;width:32px;min-height:44px;margin-block:-10px}
  .listener .copy-tape-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .listener .copy-tape-icon{display:block;width:15px;height:15px}
  .listener .skeleton-heading{display:none}
}
.listener .listen-heading{margin:0 0 24px}
.listener .listen-heading h1{font-weight:500;margin:0 0 6px}
.listener .deck-top strong{font-size:15px;letter-spacing:-.4px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.listener .deck-top .power-led{flex:none;margin-left:15px}
.listener .lcd h1{white-space:normal;overflow-wrap:anywhere;text-transform:none;line-height:1.3;font-weight:500}
.listener .lcd #track-source{font-size:11px}
.listener .hardware .track-actions{justify-content:flex-end;margin:0;padding:0;border:0;min-height:0}
.listener .hardware .track-actions:has(#download-audio:not([hidden])){padding-top:14px}
.listener .hardware .track-message:empty{display:none}
.listener .hardware .deck-bottom{font-size:10px}
.listener-share-actions{display:flex;align-items:center;flex-wrap:wrap;gap:4px 20px;min-width:0}
.listener .hardware .listener-share-actions button{background:none;border:0;box-shadow:none;font-size:9px;padding:0;min-height:24px;text-decoration:none}
.listener .analytics-choice{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;padding:12px 0;border:0;border-top:1px solid var(--line);font-size:10px}
.listener .choice-buttons{display:flex;flex-direction:row;gap:8px;margin-left:auto}
.listener .choice-buttons button{flex:none;font-size:10px;padding:5px 10px}
.analytics-details{font-size:10px}
.analytics-details[open]{flex-basis:100%}
.listener .analytics-details p{margin:8px 0 0;max-width:65ch}
.listener .listener-preferences{margin-top:10px;color:var(--muted)}
.listen-loading{padding:80px 0;color:var(--muted);font-size:12px}
@media(max-width:600px){.listener .terminal{padding:22px 18px}.listener .deck-face{grid-template-columns:1fr}.listener .speaker{display:none}.listener .lcd #track-source{font-size:10px}.listener .deck-top strong{font-size:13px}.listener .listen-heading{gap:12px}.listener .listen-heading h1{font-size:20px}.listener .analytics-choice>span{flex-basis:100%}.listener .choice-buttons{margin-left:0}.listener .listener-track{font-size:11px;grid-template-columns:22px 1fr 42px}}

/* Artwork occupies the speaker recess when supplied by the uploader. */
.hardware .speaker{position:relative;overflow:hidden}
.hardware .speaker .deck-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:none;opacity:1;border:0}
.hardware .speaker:has(.deck-art:not([hidden])){background:#d1d5c6;border-radius:8px;box-shadow:inset 0 0 0 1px #5b665044;animation:none}
.hardware .transport #play-pause{display:grid;place-items:center;font-size:0!important;line-height:1;padding:0;min-height:56px}
.hardware .transport #play-pause::before{content:"";display:block;width:0;height:0;border-top:12px solid transparent;border-bottom:12px solid transparent;border-left:19px solid currentColor;transform:translateX(2px)}
.hardware .transport #play-pause[data-active=true]::before{width:18px;height:24px;border:0;border-left:6px solid currentColor;border-right:6px solid currentColor;transform:none}
.listener .transport #play-pause{min-height:66px}
.listener-track{grid-template-columns:30px minmax(0,1fr) 54px 45px}
.listener-track .row-state{font-size:9px;color:var(--muted);text-align:right}
.listener-track .row-control{font-size:12px;font-variant-numeric:tabular-nums}
.listener-track.playing{box-shadow:inset 3px 0 #667153;background:#d5dacb}
.listener-track.playing .row-state{color:#35492f}
@media(max-width:600px){.listener .deck-face:has(.speaker .deck-art:not([hidden])){grid-template-columns:minmax(0,1fr) 26%;gap:10px}.listener .speaker:has(.deck-art:not([hidden])){display:block;align-self:center;aspect-ratio:1}.listener .transport #play-pause{min-height:48px}.listener-track{grid-template-columns:24px minmax(0,1fr) 38px!important}.listener-track .row-state{display:none}.hardware .transport #play-pause::before{border-top-width:10px;border-bottom-width:10px;border-left-width:16px}.hardware .transport #play-pause[data-active=true]::before{width:16px;height:20px;border-width:0 5px}}
.hardware .transport #play-pause{position:relative}
.hardware .transport #play-pause::before{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) translateX(2px)}
.hardware .transport #play-pause[data-active=true]::before{box-sizing:border-box;transform:translate(-50%,-50%)}
.listener-stash{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px 18px;margin-top:16px;font-size:11px}
.listener-track .row-control svg{display:block;width:16px;height:16px}
.listener-stash button{font-size:inherit;color:var(--muted)}
.listener-stash select{font:inherit;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:3px;padding:6px 8px;max-width:100%}
#stash-items .library-tape{display:flex;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
#stash-items .library-tape>div{flex:1;min-width:0;overflow-wrap:anywhere}
#stash-items .fine{display:block;margin:5px 0 0}
#stash-items button{font-size:11px}

/* Album art is rendered once as a small, two-tone LCD bitmap. */
.lcd-art{display:none;image-rendering:pixelated;aspect-ratio:1;pointer-events:none}
.hardware[data-style=deck] .deck-face,.listener .hardware[data-style=deck] .deck-face{grid-template-columns:minmax(0,1fr);gap:0}
.hardware[data-style=deck] .speaker,.hardware[data-style=deck] .deck-art{display:none}
.hardware[data-style=deck] .lcd{min-height:148px}
.listener .hardware[data-style=deck] .lcd{min-height:156px;padding:18px 22px}
.hardware[data-style=deck] .lcd .now-playing,.hardware[data-style=deck] .lcd:has(.deck-art:not([hidden])) .now-playing{min-height:42px;padding:0}
.hardware[data-style=deck] .lcd.has-lcd-art{display:grid;grid-template-columns:minmax(0,1fr) minmax(80px,32%);column-gap:20px;align-items:center}
.hardware[data-style=deck] .lcd.has-lcd-art .now-playing{grid-column:1;grid-row:1;align-self:end}
.hardware[data-style=deck] .lcd.has-lcd-art .time-display{grid-column:1;grid-row:2;align-self:start}
.hardware[data-style=deck] .lcd.has-lcd-art .tape{display:none}
.hardware[data-style=deck] .lcd-art:not([hidden]){display:block;grid-column:2;grid-row:1/3;width:100%;max-width:176px;justify-self:end;opacity:.94;box-shadow:0 0 12px #ecd39d0d}
.listener-row{display:grid;grid-template-columns:minmax(0,1fr) 38px;align-items:stretch;border-top:1px solid var(--line);--track-progress:0%}
.listener-row.has-versions{grid-template-columns:minmax(0,1fr) minmax(65px,125px) 38px}
.song-version-choice{align-self:center;min-width:0;max-width:100%;margin:6px 0;font-size:12px;padding:5px;background:transparent;border:1px solid var(--line)}
@media(max-width:600px){.listener-row.has-versions{grid-template-columns:minmax(0,1fr) 74px 32px}.song-version-choice{font-size:16px;padding:3px;min-height:38px}}
.listener-row .listener-track{border-top:0;background:transparent;box-shadow:none}
.listener-row.selected{background:linear-gradient(to right,#c9d1bc var(--track-progress),transparent var(--track-progress));box-shadow:inset 3px 0 #899277}
.listener-row.playing{box-shadow:inset 3px 0 #667153}
.row-copy{display:grid;place-items:center;align-self:stretch;background:none;color:var(--muted);padding:0;min-width:34px}
.row-copy:hover,.row-copy:focus-visible{background:#c8cdbd;color:var(--text)}
:root.dark .listener-row.selected{background:linear-gradient(to right,#35422f var(--track-progress),transparent var(--track-progress))}
:root.dark .row-copy:hover,:root.dark .row-copy:focus-visible{background:#35422f}
@media(max-width:600px){.listener .hardware[data-style=deck] .lcd{padding:14px 12px;min-height:140px}.hardware[data-style=deck] .lcd.has-lcd-art{grid-template-columns:minmax(0,1fr) 32%;column-gap:12px}.hardware[data-style=deck] .lcd.has-lcd-art #elapsed{font-size:30px}.listener-row{grid-template-columns:minmax(0,1fr) 32px}.row-copy{min-width:32px}.listener-row .listener-track{padding-inline:8px;gap:8px}}
.hardware[data-style=deck] .lcd{font-family:"Geist Pixel Circle","Geist Mono",monospace}
.hardware[data-style=deck] .lcd h1,.listener .hardware[data-style=deck] .lcd h1{font-weight:400}
.hardware[data-style=deck] .lcd #elapsed{font-style:normal;font-weight:400;letter-spacing:.025em;line-height:1}
.listen-loading{position:relative;padding:0!important;margin:0 0 24px;min-height:0!important}
.loading-player{width:min(100%,900px);margin:0 auto 12px;color:var(--muted)}
.loading-player svg{display:none;width:100%;height:auto;max-height:min(60vh,calc(100vh - 250px));max-height:min(60dvh,calc(100dvh - 250px));stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.loading-player svg *{vector-effect:non-scaling-stroke}
.listen-loading[data-loading-style=deck] .loading-deck,.listen-loading[data-loading-style=cd] .loading-cd,.listen-loading[data-loading-style=cassette] .loading-cassette{display:block}
.loading-part{opacity:.35;transform-box:fill-box;transform-origin:center;animation:player-assemble 950ms cubic-bezier(.2,.7,.3,1) both}
.loading-face{animation-delay:100ms}.loading-wave{animation-delay:180ms}.loading-controls{animation-delay:260ms}
.loading-wave-bars{opacity:.45}
.listen-loading-caption{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:10px;font-size:11px;color:var(--muted)}
.listen-loading-caption i{width:5px;height:5px;border-radius:50%;background:currentColor;animation:loading-light 2s ease-in-out infinite}
@keyframes player-assemble{from{opacity:0;transform:translateY(7px) scale(.99)}to{opacity:.35;transform:none}}
@keyframes loading-light{0%,100%{opacity:.3}50%{opacity:.75}}
@media(max-width:600px){.loading-player{margin-top:8px}.listen-loading-caption{font-size:10px;margin-top:12px}}
@media(prefers-reduced-motion:reduce){.loading-part,.listen-loading-caption i{animation:none}.loading-part{opacity:.35}}
.listener-feedback{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);font-size:11px}
.listener-feedback summary{color:var(--muted);cursor:pointer}
.listener-feedback form{display:grid;gap:10px;max-width:600px;margin-top:22px}
.listener-feedback input,.listener-feedback textarea{width:100%;font:inherit;padding:10px;background:var(--surface);color:var(--fg);border:1px solid var(--line)}
.listener-feedback button{justify-self:start}
.waveform-notes{display:flex;justify-content:flex-end;margin-top:3px}
.hardware .waveform-notes button{background:none;border:0;box-shadow:none;font-size:9px;padding:2px 0;color:var(--muted);min-height:24px}
#comment-alias{min-height:1.6em;margin:0;color:var(--fg)}
#comment-panel-home{margin-top:28px;padding:18px 0;border-top:1px solid var(--line)}
.open-comments{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:11px 16px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--fg);font:inherit;font-size:12px;text-align:left;box-shadow:0 2px 0 var(--soft)}
.open-comments svg{width:20px;height:20px;flex:none}
.open-comments .comment-button-arrow{margin-left:8px;color:var(--muted)}
.open-comments:hover{background:var(--soft)}
.open-comments:active{box-shadow:none;transform:translateY(1px)}
@media(max-width:600px){.open-comments{width:100%;font-size:13px}.open-comments .comment-button-arrow{margin-left:auto}}
.comment-compose{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);font-size:11px}
.comment-compose h3{font-size:13px;font-weight:500;margin:0 0 14px}
.comment-compose form{display:grid;gap:10px}
.comment-compose textarea{width:100%;font:inherit;padding:10px;background:var(--surface);color:var(--fg);border:1px solid var(--line)}
.comment-compose button{justify-self:start}
.feedback-public{display:inline-flex;align-items:center;gap:8px;font-size:11px;margin-right:20px}
.feedback-public input{margin:0}
.comment-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:18px 0 12px}
.comments-list{max-height:min(55svh,420px);overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.comment-note{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;padding:16px 4px;border-bottom:1px solid var(--line)}
.comment-note .comment-time{align-self:start;justify-self:start;padding:0;background:none;text-decoration:underline;font-variant-numeric:tabular-nums}
.comment-note p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.65}
.comment-note .comment-author{display:block;font-size:9px;color:var(--muted);margin-bottom:5px}
#more-comments{margin-top:16px}
.tape-visits{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:24px;color:var(--muted);font-size:9px}
.tape-visits output{font-family:"Geist Pixel Circle","Geist Mono",monospace;font-size:11px;letter-spacing:2px;line-height:1;padding:6px 5px 6px 7px;color:#e5e4d6;background:#272923;border:1px solid #8a8e80;border-radius:2px;box-shadow:inset 0 1px 3px #0006;font-variant-numeric:tabular-nums}
.waveform,.waveform #seek{touch-action:none;user-select:none;-webkit-user-select:none}
.site-page.dark .dropzone{background:var(--surface)}
.site-page.dark .listener-row.selected{background:linear-gradient(to right,#35422f var(--track-progress),transparent var(--track-progress))}
.site-page.dark .row-copy:hover,.site-page.dark .row-copy:focus-visible{background:#35422f}
.listener .actionbar #copy-tape{display:flex;align-items:center;justify-content:center;gap:4px;width:auto;min-height:44px;text-decoration:none;flex:none}
.listener .copy-tape-icon{display:block;width:14px;height:14px}
.listener .copy-tape-label{position:static;width:auto;height:auto;margin:0;padding:0;clip:auto;overflow:visible;font-size:9px;white-space:nowrap}

.hardware .dial[data-dragging=true]{cursor:grabbing}
.hardware .dial[data-device-volume=true]{cursor:pointer}