:root{color-scheme:dark;--ink:#f4eee8;--muted:#aaa09e;--signal:#ff826b;--line:#ffffff25;background:#0c0a0d;color:var(--ink);font:16px/1.4 "Instrument Sans",system-ui,sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:radial-gradient(ellipse 60% 600px at 28% 340px,#341d2b 0%,transparent 95%)}
main{width:min(100% - 44px,1200px);margin:auto}
header{display:grid;grid-template-columns:1fr auto;align-items:end;padding:32px 0 20px;border-bottom:1px solid var(--line)}
header span,.time,header a{font:600 .72rem/1.4 "IBM Plex Mono",monospace;letter-spacing:.12em}
header span{grid-column:1/-1;color:var(--signal)}
h1{font:500 clamp(3.5rem,9vw,7.2rem)/.92 "Instrument Serif",Georgia,serif;letter-spacing:-.07em;margin:.14em 0 0}
header a{color:var(--ink);text-decoration:none;padding-bottom:.35rem}
.stage{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:clamp(24px,7vw,104px);padding:clamp(30px,5vw,64px) clamp(0px,3vw,40px)}
.deck{min-width:0;padding:clamp(14px,3vw,29px);border-radius:18px;border:1px solid #66565e;background:linear-gradient(148deg,#42373d,#231d24 31%,#141217 82%);box-shadow:inset 0 1px #ffffff25,0 20px 45px #000a,0 4px 0 #080709}
.cd-deck{width:min(100%,280px);margin:0 auto 22px;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:#0b090c;box-shadow:inset 0 3px 12px #000,0 1px #ffffff38;border:1px solid #070608;padding:4%}
.disc{position:relative;width:100%;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:conic-gradient(#e6e1ee,#87a6a6,#d0a6cb,#fcdfbf,#a3a1c7,#e6e1ee);box-shadow:0 0 0 1px #ffffff75,0 4px 9px #000;animation:spin 1.8s linear infinite paused}
.disc-print{width:86%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#2b2431}
.disc-print img{width:100%;height:100%;object-fit:cover}
.spindle-hole{position:absolute;inset:45%;border-radius:50%;background:#171419;box-shadow:0 0 0 4px #e5d5de8a,0 0 0 8px #dcc5e44c}
.playing .disc{animation-play-state:running}
@keyframes spin{to{transform:rotate(360deg)}}
.console{padding:14px;border-radius:9px;background:#100d12;border:1px solid #4c3e47;box-shadow:inset 0 2px 10px #0008}
h2{font-size:clamp(1.1rem,3vw,1.7rem);letter-spacing:-.035em;margin:0 0 10px}
.scope{position:relative;height:58px;border:1px solid #4e343e;border-radius:4px;background:repeating-linear-gradient(90deg,transparent 0 15px,#ff826b12 15px 16px),repeating-linear-gradient(0deg,#1b1119 0 12px,#3b222e 12px 13px)}
.scope canvas{display:block;width:100%;height:100%}
.scope input{position:absolute;inset:auto 0 0;width:100%;margin:0;height:18px;accent-color:var(--signal);cursor:pointer}
.transport{display:flex;gap:13px;align-items:center;padding-top:10px}
.transport button{width:44px;height:44px;display:grid;place-items:center;border-radius:7px;border:1px solid #695059;background:linear-gradient(#33242e,#1c161e);color:var(--ink);cursor:pointer}
.transport button:disabled{opacity:.45;cursor:default}
#play{background:var(--signal);color:#211117;border-color:#ffac9a;font-size:1.1rem}
#mute{margin-left:auto}#mute svg{width:20px}
#mute[aria-pressed=false] .muted,#mute[aria-pressed=true] .sound{display:none}
.time{color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.03em}
#status{color:var(--signal);margin:8px 0 0;font-size:.86rem}
#status:empty{display:none}
.library{border-top:1px solid var(--line);padding:22px 0 44px}
ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,175px),1fr));list-style:none;gap:16px;padding:0;margin:15px 0 0}
.mix{display:grid;align-content:start;gap:9px;width:100%;height:100%;padding:8px 8px 12px;border:1px solid var(--line);border-radius:8px;background:#19141b;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.mix img,.mix .empty-cover{width:100%;aspect-ratio:1;border-radius:4px;background:#28202b;object-fit:contain}
.mix:hover,.mix[aria-current=true]{border-color:var(--signal)}
.mix[aria-current=true]{background:#311f28}
:focus-visible{outline:2px solid var(--signal);outline-offset:4px}
@media(max-width:630px){main{width:calc(100% - 28px)}.stage{grid-template-columns:1fr;gap:21px}.cd-deck{width:min(70%,210px)}ul{grid-template-columns:repeat(2,minmax(0,1fr))}header a{font-size:.62rem}}
@media(prefers-reduced-motion:reduce){.playing .disc{animation-play-state:paused}}


:root{--ink:#f2f1ee;--muted:#b5b3ae;--signal:#e5d9b9;--line:#ffffff26;background:#111}
body{background:none}
header{padding:25px 0 19px}
header span{color:var(--muted)}
h1{font:650 clamp(2.8rem,6vw,5rem)/1 system-ui,sans-serif;letter-spacing:-.075em}
.stage{padding-block:clamp(32px,5vw,62px)}
.deck,.console{background:none;border-color:transparent;box-shadow:none}
.cd-deck{background:#0d0d0d;border-color:#333;box-shadow:none}
.disc{background:conic-gradient(#d4d4d4,#858585,#bbb,#ededed,#858585,#d4d4d4);box-shadow:none}
.scope{border:0;background:none;border-bottom:1px solid var(--line);border-radius:0}
.scope canvas{height:calc(100% - 19px)}
.transport button,#play{background:none;color:var(--ink);border:1px solid var(--line);border-radius:50%}
.mix,.mix[aria-current=true]{background:none;border:0;padding:0 0 10px;border-radius:0}
.mix img,.mix .empty-cover{border-radius:0}
.mix:hover,.mix[aria-current=true]{box-shadow:inset 0 -1px var(--signal)}

.stage{display:block}
.deck{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(22px,7vw,100px);padding-inline:0}
.cd-deck{position:relative;isolation:isolate;margin:16px auto;padding:0;background:none;border-color:transparent}
.cd-deck:before{content:"";position:absolute;inset:-13px;z-index:-1;border-radius:50% 50% 46% 46%;background:linear-gradient(145deg,#454748,#222425 50%,#171818);border:1px solid #707273;box-shadow:0 5px 0 #0a0a0a,0 14px 24px #0007}
.cd-deck:after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid #dce6e280;background:linear-gradient(128deg,#e7f5ff33,transparent 27% 72%,#dfebf327);box-shadow:inset 0 0 0 4px #d7ebeb24;pointer-events:none}
.cd-deck .disc{width:92%;border:1px solid #848687}
#playing-label{color:var(--muted);margin:0 0 9px;font:600 .7rem/1.4 monospace;letter-spacing:.13em}
@media(max-width:630px){.deck{grid-template-columns:1fr}.console{padding-inline:0}}
.cd-deck{padding:4%}
.cd-deck .disc{width:100%}
.hinge,.latch{position:absolute;left:50%;transform:translateX(-50%);z-index:1;background:#343637;border:1px solid #787d7e}
.hinge{top:-9px;width:22%;height:11px;border-radius:4px}
.latch{bottom:-7px;width:13%;height:8px;border-radius:3px}

/* Clear acrylic plates, with the disc suspended between them. */
.cd-deck::before{
 inset:-14px;border-radius:8px;border:1px solid #a9bac274;
 background:linear-gradient(155deg,#e6f6ff20 0%,#839aa314 23%,#11151732 59%,#b8d8e21a 100%);
 box-shadow:inset 0 2px 0 #f6ffff52,inset 2px 0 #f6ffff26,inset -3px -3px #9dc1cb38,3px 4px 0 #40505683,5px 6px 0 #1d272b,9px 18px 26px #0009;
}
.cd-deck::after{
 inset:-12px;border-radius:7px;border:0;
 background:linear-gradient(139deg,#e6faff35 0%,#d8eeff0c 25%,transparent 26% 73%,#e2f8ff12 74%,transparent 90%);
 box-shadow:inset 0 0 0 1px #e2faff26;
}
.hinge,.latch{
 width:9px;height:9px;transform:none;border-radius:50%;border:1px solid #a8afb0;
 background:linear-gradient(135deg,transparent 43%,#25292a 45% 55%,transparent 57%),conic-gradient(#687075,#b9c4c9,#3a4043,#b6c0c4,#687075);
 box-shadow:1px 2px 3px #000c;
}
.hinge{top:-5px;left:-5px}
.latch{bottom:-5px;left:auto;right:-5px}
.disc{box-shadow:0 2px 2px #d0e9ed50,0 7px 13px #000b}
.spindle-hole{background:conic-gradient(#92999b,#292d30,#c1c7c8,#656d71,#92999b);box-shadow:0 0 0 2px #111b,0 0 0 5px #c4d6db86,0 0 0 8px #d8ebef33}

.stage{padding:22px 0}
.deck{display:block;padding:0}
.room{position:relative;aspect-ratio:3/2;background:#25170e url('/listening-room-v3.webp') center/cover no-repeat}
#wall-art{position:absolute;left:38.6%;top:9.7%;width:23.05%;height:34.8%;object-fit:contain;background:#222;filter:brightness(.82) saturate(.9)}
.room .cd-deck{position:absolute;left:56%;bottom:25.3%;width:21.5%;max-width:none;margin:0;padding:1%;border:0}
.room .cd-deck::before{inset:-5%;border-radius:3%;background:linear-gradient(132deg,#f6d8ad22,transparent 60%,#d8b29330);box-shadow:inset 1px 1px #ffe4c371,3px 3px #3a2b20,4px 6px 12px #140900b5}
.room .cd-deck::after{inset:-4%;border-radius:3%;background:linear-gradient(142deg,#fff2cb2b,transparent 28% 75%,#e5b47e23)}
.room .hinge,.room .latch{width:3.3%;height:3.3%}
.room .hinge{top:-2%;left:-2%}
.room .latch{bottom:-2%;right:-2%}
.console{width:min(100%,760px);margin:12px auto 0;padding:10px 0}
.side-art{position:absolute;top:15%;width:13%;aspect-ratio:1;object-fit:contain;background:#222;border:clamp(2px,.4vw,6px) solid #191613;box-shadow:0 1px #b29b7850,3px 7px 10px #120600a0;filter:brightness(.72) saturate(.88)}
.side-left{left:22%}.side-right{right:22%}

/* Artwork is aligned to the photographed frames and the printed area of the CD. */
#wall-art{left:37.05%;top:5.25%;width:25.8%;height:38.4%;background:#77716c;filter:brightness(.88)}
.side-art{top:13.35%;width:17.1%;height:27.25%;border:0;box-shadow:none;background:#77716c;filter:brightness(.82)}
.side-left{left:11.05%}.side-right{right:10.95%}
.room .cd-deck{left:42.25%;top:60.55%;bottom:auto;width:15.5%;padding:0;aspect-ratio:238/240}
.room .cd-deck::before,.room .cd-deck::after,.room .hinge,.room .latch,.room .spindle-hole{display:none}
.room .disc{width:100%;height:100%;aspect-ratio:auto;border:0;box-shadow:none;background:none}
.room .disc-print{width:88%;height:88%;background:none;mask-image:radial-gradient(circle,transparent 0 18%,#000 18.8%)}
.room .disc-print img{filter:brightness(.82) saturate(.9)}

.room .cd-deck{left:39%;top:16.65%;width:21.9%;aspect-ratio:337/340}
.room .disc-print{mask-image:radial-gradient(circle,transparent 0 29%,#000 30%)}
.room .library{position:absolute;left:18%;right:18%;bottom:6%;padding:0;border:1px solid #8b7766;border-bottom:6px solid #463429;background:#141211;box-shadow:0 6px 12px #000a}
.room .library ul{display:flex;gap:5px;overflow-x:auto;margin:0;padding:5px;scrollbar-color:#8b7766 #24201c}
.room .library li{flex:0 0 clamp(55px,8vw,110px)}
.room .mix{height:100%;font-size:clamp(.62rem,1vw,.78rem);padding:3px;gap:4px}
.room .mix:focus-visible{outline-offset:-2px}
#volume{width:clamp(64px,15vw,145px);margin-left:auto;accent-color:var(--signal)}
#mute{margin-left:0}
@media(max-width:630px){.room .library{position:relative;left:auto;right:auto;bottom:auto;margin-top:66.666%;width:100%;box-shadow:none}.room{display:flow-root;aspect-ratio:auto;background-size:100% auto;background-position:top}.room .cd-deck{top:0;margin-top:11.1%}}