/* A printed sleeve and an olive-gold pressing, with real record proportions. */
.record-stage {
  position:relative; width:min(476px,88vw,57dvh); aspect-ratio:1.64;
  flex-shrink:0; isolation:isolate; filter:drop-shadow(0 15px 13px #15393625);
}
.record-stage .vinyl {
  position:absolute; right:0; top:2.2%; width:59%; height:auto; aspect-ratio:1;
  z-index:1; border-radius:50%; border:1px solid #f4edb9a8;
  background:
    radial-gradient(circle,#9b9f4c18 0 20%,transparent 20.5% 23%,#69743716 24%,transparent 25% 43%,#f7edb51c 44%,transparent 45%),
    repeating-radial-gradient(circle,transparent 0 1.1px,#434b291c 1.25px 1.55px,#f7edbd21 1.7px 1.95px,transparent 2.1px 2.8px),
    conic-gradient(from 23deg,#adb34bcc,#d5d688dc 13%,#aab154cf 28%,#c0c568d9 40%,#e0db97db 53%,#afb958d4 68%,#b7bd61dc 84%,#adb34bcc);
  box-shadow:inset 0 0 0 1px #fbf2ce70,inset 0 0 0 3px #626b332c,inset 0 0 0 5px #e4deb735,inset 0 0 10px #58673722,2px 3px 2px #32432925,7px 10px 15px #193d3924;
  animation-duration:34s;
}
.record-stage .vinyl:before {
  inset:1.4%; background:conic-gradient(from 10deg,transparent 0deg,#fff9df24 28deg,transparent 57deg,transparent 170deg,#fff4cf29 198deg,transparent 229deg,transparent 360deg);
  box-shadow:inset 0 0 0 1px #fdf6d453; pointer-events:none;
}
.record-stage .vinyl:after {
  content:''; position:absolute; inset:7%; border-radius:50%; border:1px solid #e4e0ae30;
  box-shadow:0 0 0 1px #5b693315,inset 0 0 0 1px #f1eabb1f; pointer-events:none;
}
.record-stage .record-label {
  width:31%; height:31%; background:radial-gradient(circle at 35% 25%,#e5dfbc,#cfc9a4);
  border:1px solid #7377508f; box-shadow:0 0 0 3px #8b98435c,inset 0 0 0 2px #f1e8ce3d;
  color:#3f4635; overflow:hidden; z-index:2;
}
.record-stage .record-label .label-fallback {
  visibility:visible; display:flex; flex-direction:column; align-items:center;
  justify-content:flex-start; padding:13% 9% 7%; gap:0; text-align:center;
}
.record-stage .record-label #disc-title {
  font:italic 700 clamp(7px,1.15vw,13px)/1.15 Arial,Helvetica,sans-serif;
  letter-spacing:-.4px; max-width:100%; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden; text-wrap:balance; margin:0 0 7%;
}
.record-stage .record-label span {font-size:clamp(3px,.45vw,5px);line-height:1.1;letter-spacing:.6px;margin:0;padding:0}
.record-stage .record-label small {font-size:clamp(3px,.45vw,5px);line-height:1.1;letter-spacing:.4px;position:absolute;bottom:16%;margin:0}
.record-stage .record-label:after {
  width:5%;height:5%;left:47.5%;top:47.5%;background:#35504a;
  box-shadow:0 0 0 1px #f6eed0b3,0 0 0 3px #96966438,inset 0 1px 2px #122c36;z-index:3;
}
.album-sleeve {
  position:absolute;left:0;top:0;width:61%;height:100%;z-index:3;background:#e7e6da;
  overflow:hidden;border-radius:1px;transform:rotate(-1.1deg);transform-origin:45% 80%;
  box-shadow:1px 1px 0 #f3efdf,2px 2px 0 #c3c0ac,3px 3px 0 #777e664f,5px 4px 5px #19382f35,11px 12px 19px #173a3a2e;
}
.album-sleeve:after {
  content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(100deg,#fffdf41f,transparent 3%,transparent 96%,#1c2c2917);
  box-shadow:inset 0 0 0 1px #fff8df2e,inset 2px 0 2px #fffce612;
}
.album-sleeve #artwork {position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;border-radius:0;z-index:1;image-rendering:auto;display:block}
.album-sleeve #artwork[hidden] {display:none}
.sleeve-placeholder {
  height:100%;padding:10%;display:flex;flex-direction:column;justify-content:space-between;
  color:#365347;background:linear-gradient(140deg,#e8e7d6 0 46%,#d1d8bd 46% 70%,#aeba9a 70%);text-align:left;
}
.sleeve-placeholder>span {font-weight:800;font-size:clamp(10px,1.4vw,17px);letter-spacing:-.8px}
.sleeve-placeholder>b {font-size:clamp(45px,8vw,95px);line-height:1;letter-spacing:-7px;font-weight:800}
.sleeve-placeholder>small {font-size:clamp(5px,.6vw,7px);line-height:1.5;letter-spacing:.4px}
.record-stage.has-art .sleeve-placeholder {visibility:hidden}
/* Small tactile controls keep the record as the focal point. */
.listening {width:min(300px,82vw)}
#track-name {font-size:16px;font-weight:700;letter-spacing:-.35px}
#track-artist {margin-top:5px;letter-spacing:.05px}
.transport {gap:22px;margin-top:9px}
.transport button {width:42px;height:42px}
.transport #play {width:46px;height:46px;border-color:#fffbeab8;background:#faf7df17;box-shadow:inset 0 0 0 3px #fffbe80c,0 2px 8px #173c4029}
.transport #play:hover {background:#faf7df30}
.focus .modes button {transition:opacity .18s,border-color .18s}
.focus #clock {font-weight:700}
@media(max-width:600px){
  .record-stage{width:min(360px,86vw,56dvh)}
  .record-stage .record-label #disc-title{font-size:8px}
  .record-stage .record-label span,.record-stage .record-label small{font-size:3px;letter-spacing:.3px}
  .sleeve-placeholder>span{font-size:12px}.sleeve-placeholder>b{font-size:62px}.sleeve-placeholder>small{font-size:6px}
  #track-name{font-size:15px}.transport{margin-top:6px}
}
@media(max-height:700px) and (max-width:600px){
  .record-stage{width:min(330px,86vw,44dvh)}
  .transport #play{width:40px;height:40px}.transport button{height:36px}.transport{margin-top:3px}
}
@media(max-height:620px) and (min-width:601px){
  .record-stage{grid-row:1/3;grid-column:1;width:min(390px,49vw,85dvh)}
  .record-stage .vinyl{grid-row:auto}.centerpiece{max-width:840px;column-gap:36px}
}
@media(prefers-reduced-motion:reduce){.record-stage .vinyl{animation:none}.transport button,.focus .modes button{transition:none}}
/* The open, generously spaced listening layout from the reference. */
@media(min-width:1100px) and (min-height:780px){
  .centerpiece{gap:22px;padding:85px 24px 86px}
  .record-stage{width:min(620px,58dvh,80vw)}
  .listening{width:min(480px,70vw)}
  #track-name{font-size:20px;max-width:440px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25}
  #track-artist{font-size:13px;max-width:430px;margin-top:6px}
  .transport{gap:34px;margin-top:14px}
  .transport #play{width:58px;height:58px}.transport button{width:44px;height:44px}
  .transport #play svg{width:26px;height:26px}
  .playback-line{font-size:10px;margin-top:11px;gap:13px}
  .focus #clock{font-size:52px;margin:8px 0}
  .focus .modes{gap:22px}.focus .modes button{font-size:12px}
  .focus .actions{font-size:12px}.focus .actions #toggle{padding:10px 22px;min-width:145px}
}
/* A collection of sleeves beside a working record deck. */
body::after{background:radial-gradient(ellipse at 50% 44%,#0c162b45,#08101f85 85%)}
.centerpiece{gap:15px}
.record-stage{width:min(780px,91vw,78dvh);aspect-ratio:2.05;background:linear-gradient(135deg,#e4e4db,#c8cec4);border:1px solid #f9f9eb99;border-radius:22px;filter:none;box-shadow:0 22px 70px #08132165,inset 0 1px 1px #ffffffd9;isolation:isolate;color:#34413d}
.deck-caption{position:absolute;left:5%;top:6%;font-size:8px;letter-spacing:1.4px;font-weight:600;color:#6d7870}
.deck-caption>span{margin-left:15px;color:#8d9587}
.turntable{position:absolute;left:51%;top:10%;width:43%;height:79%;background:linear-gradient(120deg,#afb9a6,#c2c8b9 45%,#aab6a0);border:1px solid #95a18c;box-shadow:0 2px 4px #36432a33,inset 0 0 0 3px #e6ead747,inset 0 0 8px #5f6b4a22;z-index:1}
.platter{position:absolute;left:8%;top:8%;width:78%;aspect-ratio:1;border-radius:50%;background:repeating-conic-gradient(#c8cebf 0deg 1deg,#25282b 1deg 3deg);box-shadow:0 1px 3px #25302b66}
.platter:before{content:'';position:absolute;inset:5%;border-radius:50%;background:radial-gradient(circle,#a6b2a1 0 1%,#23272c 1.5% 100%);box-shadow:0 0 0 2px #313635}
.tonearm{position:absolute;z-index:7;right:6%;top:9%;width:14%;height:73%;transform-origin:50% 9%;transform:rotate(-9deg);transition:transform 1s .45s cubic-bezier(.22,.61,.36,1)}
.tonearm:before{content:'';position:absolute;left:5%;top:0;width:90%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#c6cdc0 0 25%,#303536 27% 52%,#6f7a70 55% 65%,transparent 68%)}
.tonearm i{position:absolute;top:9%;left:40%;width:15%;height:80%;background:linear-gradient(90deg,#7f8985,#e6e7db 45%,#7d8880);transform:rotate(9deg);transform-origin:top;box-shadow:1px 1px 1px #26342b66}
.tonearm i:after{content:'';position:absolute;bottom:-5%;left:-80%;width:260%;height:14%;border-radius:2px;background:#353c3b;box-shadow:0 2px 0 #d5d7c7}
.loaded:not(.loading-record) .tonearm{transform:rotate(19deg)}
.deck-switch{position:absolute;left:5%;bottom:5%;font-size:5px;padding:5px 4px;border:1px solid #6a796b;box-shadow:inset 0 0 0 1px #d7ddcf;color:#354337}
.deck-speed{position:absolute;left:7%;bottom:21%;font-size:5px;line-height:1.5;color:#66705f}
.deck-led{position:absolute;bottom:10%;left:27%;width:3px;height:3px;border-radius:50%;background:#82916d;box-shadow:0 0 0 1px #6c785f}
.spinning .deck-led{background:#e0b879;box-shadow:0 0 6px #f1b970}
.deck-slider{position:absolute;right:5%;bottom:6%;height:26%;width:4%;background:linear-gradient(90deg,#a8b29e,#d3d9c9);border:1px solid #84927d}
.deck-slider:before{content:'';position:absolute;inset:6px 45%;background:#667260}.deck-slider:after{content:'';position:absolute;left:-20%;top:35%;width:140%;height:5px;background:#e6e9db;box-shadow:0 1px 2px #475b3e}
.record-carriage{position:absolute;left:54.45%;top:16.3%;width:33.5%;aspect-ratio:1;z-index:5;visibility:hidden;pointer-events:none;filter:drop-shadow(0 1px 2px #34432940)}
.loaded .record-carriage{visibility:visible}
.loading-record .record-carriage{animation:slide-record-out 1.18s both}
.record-stage.loading-record .record-carriage .vinyl{animation-play-state:paused}
@keyframes slide-record-out{
  0%{left:8%;top:20%;transform:scale(.72) rotate(-14deg);z-index:2;opacity:0;animation-timing-function:cubic-bezier(.18,.85,.3,1)}
  13%{opacity:1;z-index:2}
  43%{left:32%;top:20%;transform:scale(.9) rotate(-7deg);z-index:2;animation-timing-function:cubic-bezier(.35,0,.24,1)}
  44%{z-index:5}
  78%{left:55.5%;top:12%;transform:scale(1.025) rotate(4deg);animation-timing-function:ease-out}
  100%{left:54.45%;top:16.3%;transform:scale(1) rotate(0);z-index:5;opacity:1}
}
.record-stage .record-carriage .vinyl{position:absolute;inset:0;width:100%;height:100%;margin:0;animation-duration:12s}
.record-stage .album-sleeve{left:12%;top:22%;width:28%;height:auto;aspect-ratio:1;z-index:4;transform:rotate(-3deg);transition:transform .6s,filter .6s;box-shadow:0 1px 0 #faf7e5,0 3px 0 #969c8959,3px 7px 12px #35463138}
.record-stage .album-sleeve{pointer-events:none}
#deck-play{position:absolute;left:51%;top:10%;width:43%;height:79%;z-index:8;border-radius:2px}
#deck-play:focus-visible{outline:2px solid #5a6f4e;outline-offset:4px}
.crate-caption{position:absolute;bottom:8%;left:6%;font-size:7px;letter-spacing:.55px;color:#69766a}
.deck-brand{position:absolute;right:6%;bottom:3%;font-size:19px;font-weight:800;letter-spacing:-1px;color:#697a65}
.deck-brand small{font-size:5px;font-weight:400;letter-spacing:1px;vertical-align:middle;margin-left:10px}
#record-crate{display:flex;gap:8px;width:max-content;max-width:min(100%,560px);flex-shrink:0;overflow-x:auto;padding:4px 4px 8px;scrollbar-width:thin;scrollbar-color:#fffbea70 transparent}
#record-crate[hidden]{display:none}
.crate-record{position:relative;flex:0 0 48px;aspect-ratio:1;padding:2px;overflow:hidden;background:#b7c1ae;border:2px solid transparent;opacity:.72;text-align:left;color:#344733}
.crate-record img{width:100%;height:100%;object-fit:cover;display:block}
.crate-record>span{display:block;padding:3px;font-size:8px;overflow-wrap:anywhere}
.crate-record:hover,.crate-record:focus-visible,.crate-record[aria-pressed=true]{opacity:1}
.crate-record:focus-visible{outline-offset:1px}
.crate-record[aria-pressed=true]{border-color:#fff4c7;background:#fff4c7}
.crate-record[aria-pressed=true]::after{content:'';position:absolute;right:3px;bottom:3px;width:7px;height:7px;background:#fff4c7;border:1px solid #354337}
@media(min-width:1100px) and (min-height:780px){.centerpiece{gap:20px}.record-stage{width:min(860px,88vw,84dvh)}.deck-caption{font-size:9px}.crate-caption{font-size:8px}}
@media(max-width:600px){.record-stage{width:92vw;aspect-ratio:1.75;border-radius:13px}.deck-caption{font-size:5px;letter-spacing:.7px}.deck-caption>span{margin-left:8px}.crate-caption{font-size:5px}.deck-brand{font-size:14px}.deck-brand small{font-size:3px;margin-left:5px}.deck-switch{font-size:3px;padding:3px 2px}.deck-speed{font-size:3px}.crate-record{border-width:2px}.record-stage .record-label #disc-title{font-size:6px}.record-stage .record-label span,.record-stage .record-label small{font-size:2px}.centerpiece{gap:20px}}
@media(max-height:700px) and (min-width:601px){.record-stage{width:min(700px,88vw,69dvh)}.centerpiece{gap:10px}}
@media(prefers-reduced-motion:reduce){.record-carriage,.tonearm,.album-sleeve,.crate-record{transition:none!important}}

.topbar,.centerpiece,.bottom-bar{letter-spacing:.035em}
.topbar button,.centerpiece button,.bottom-bar button{letter-spacing:inherit}
.topbar .logo{letter-spacing:-.02em}
#track-name,.focus #clock,.record-stage .record-label #disc-title{letter-spacing:.015em}
.topbar *, .centerpiece *, .bottom-bar *{text-shadow:none!important;box-shadow:none!important}
.record-stage,.record-carriage,.transport svg,.record-stage .album-sleeve{filter:none}
#seek::-webkit-slider-runnable-track,#seek::-webkit-slider-thumb{box-shadow:none}
#seek::-moz-range-track,#seek::-moz-range-progress,#seek::-moz-range-thumb{box-shadow:none}
.record-stage .record-carriage .vinyl{
  --pressing:var(--record-hue,0);
  --ink:var(--record-saturation,0%);
  --tone:var(--record-lightness,36%);
  background:
    conic-gradient(from 23deg,hsl(var(--pressing) var(--ink) var(--tone)),hsl(var(--pressing) var(--ink) calc(var(--tone) + 17%)) 16%,hsl(var(--pressing) var(--ink) calc(var(--tone) + 2%)) 31%,hsl(var(--pressing) var(--ink) calc(var(--tone) + 12%)) 51%,hsl(var(--pressing) var(--ink) calc(var(--tone) - 5%)) 72%,hsl(var(--pressing) var(--ink) var(--tone)));
}
.centerpiece:has(#record-crate:not([hidden])){gap:10px}
@media(min-width:601px) and (min-height:621px){
  .centerpiece:has(#record-crate:not([hidden])) .record-stage{width:min(800px,88vw,71dvh)}
}
@media(max-height:620px) and (min-width:601px){
  #record-crate{grid-column:1/-1;grid-row:3}
}
@media(max-width:600px) and (max-height:690px){
  .centerpiece:has(#record-crate:not([hidden])) .record-stage{width:min(92vw,53dvh)}
  .crate-record{flex-basis:40px}
}