:root{
  --bg:#0f0e0d;--bg2:#171513;--ink:#f2ece4;--ink2:#b5aca1;--ink3:#7d756c;
  --line:rgba(255,240,220,.09);--accent:#d08a52;--accent2:#f0b27a;
  --plinth1:#2a2724;--plinth2:#191715;
  --r:14px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--bg);background-image:radial-gradient(120% 80% at 30% -10%,#2a2019 0%,rgba(15,14,13,0) 60%);color:var(--ink);font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation}
button:focus-visible,[tabindex]:focus-visible,input:focus-visible{outline:2px solid var(--accent2);outline-offset:3px}
svg{display:block}
[hidden]{display:none!important}
.noscript{padding:24px;text-align:center}

.app{max-width:1360px;margin:0 auto;padding:0 16px calc(24px + env(safe-area-inset-bottom));padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
.top{display:flex;align-items:center;justify-content:space-between;height:60px;padding-top:env(safe-area-inset-top);box-sizing:content-box}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:650;letter-spacing:.02em;font-size:18px}
.brand svg{width:28px;height:28px;color:var(--accent)}
.chip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--line);color:var(--ink2);font-size:13px;background:rgba(255,255,255,.02);transition:color .2s,border-color .2s,background .2s}
.chip svg{width:18px;height:18px}
.chip[aria-pressed="true"]{color:var(--accent2);border-color:rgba(208,138,82,.45);background:rgba(208,138,82,.08)}

.stage{display:grid;gap:20px;grid-template-columns:1fr;grid-template-areas:"deck" "now" "crate"}
@media (min-width:980px){
  .stage{grid-template-columns:minmax(0,1fr) 380px;grid-template-areas:"deck now" "crate crate";align-items:start;gap:28px}
}
.deck-wrap{grid-area:deck;width:100%;max-width:calc((100vh - 96px) * 1000 / 760);max-width:calc((100dvh - 96px) * 1000 / 760);min-width:min(100%,320px);justify-self:center}
.now{grid-area:now}
.crate-wrap{grid-area:crate}

/* ---------- deck ---------- */
.deck{position:relative;width:100%;aspect-ratio:1000/760;container-type:inline-size;border-radius:3.2cqw;
  background:
    radial-gradient(90% 70% at 25% 10%,rgba(255,235,210,.07),rgba(0,0,0,0) 60%),
    linear-gradient(160deg,var(--plinth1),var(--plinth2));
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 -2px 0 rgba(0,0,0,.5) inset,0 30px 60px -20px rgba(0,0,0,.8),0 10px 20px rgba(0,0,0,.4);
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;contain:layout paint;overflow:hidden}
.deck::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.deck-static{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

.platter{position:absolute;left:7%;top:6.5789%;width:66%;aspect-ratio:1;border-radius:50%;will-change:transform;
  background:
    radial-gradient(circle,rgba(0,0,0,0) 89.5%,rgba(0,0,0,.55) 90%,rgba(0,0,0,0) 91.5%),
    repeating-conic-gradient(from 0deg,#cfcac2 0 1.25deg,#57534d 1.25deg 2.5deg);
  box-shadow:0 0 0 .3cqw #0c0b0a,0 1.6cqw 3cqw rgba(0,0,0,.6)}
.platter::after{content:"";position:absolute;inset:4.3%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#3a3733,#1b1a18 70%)}
.mat{position:absolute;inset:5.2%;border-radius:50%;z-index:1;
  background:repeating-radial-gradient(circle,#1d1c1a 0 .55cqw,#141312 .55cqw 1.1cqw);
  box-shadow:inset 0 0 0 .25cqw rgba(255,255,255,.03)}
.strobe-lamp{position:absolute;left:4.2%;top:71.2%;width:3.2%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ffcf9b,#d06a2a 55%,#5a2a10);box-shadow:0 0 2.2cqw rgba(255,140,60,.55);opacity:.25;transition:opacity .4s}
.deck.powered .strobe-lamp{opacity:1}

.record-holder{position:absolute;left:10%;top:10.526%;width:60%;aspect-ratio:1;border-radius:50%;touch-action:none;cursor:grab;
  box-shadow:0 .8cqw 2cqw rgba(0,0,0,.55)}
.record-holder.grab{cursor:grabbing}
.record{display:block;width:100%;height:100%;border-radius:50%;will-change:transform}
.sheen{position:absolute;left:10%;top:10.526%;width:60%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:
    conic-gradient(from 0deg,rgba(255,255,255,0) 0deg,rgba(255,255,255,.10) 28deg,rgba(255,255,255,0) 60deg,rgba(255,255,255,0) 180deg,rgba(255,255,255,.07) 212deg,rgba(255,255,255,0) 244deg,rgba(255,255,255,0) 360deg);
  -webkit-mask:radial-gradient(circle,transparent 33%,#000 34.5%,#000 98%,transparent 99%);mask:radial-gradient(circle,transparent 33%,#000 34.5%,#000 98%,transparent 99%)}
.spindle{position:absolute;left:39.3%;top:49.079%;width:1.4%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#a19c95 45%,#3a3835);box-shadow:0 .2cqw .4cqw rgba(0,0,0,.6);pointer-events:none}

.arm{position:absolute;left:81%;top:2.6316%;width:8%;height:89.4737%;transform-origin:50% 16.176%;will-change:transform;pointer-events:none;z-index:3}
.arm-svg{width:100%;height:100%;overflow:visible}
.arm-body{pointer-events:visiblePainted}
.arm-hit{pointer-events:stroke;cursor:grab;touch-action:none}
.arm.drag .arm-hit{cursor:grabbing}
.arm-shadow{transform:translate(9px,12px)}

.deck-btn{position:absolute;z-index:4;display:grid;place-items:center;font-size:1.25cqw;letter-spacing:.12em;font-weight:650;color:#cfc7bc}
.start{left:4.8%;top:85%;width:8.4%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 30%,#4a4642,#23211f 70%);box-shadow:0 .5cqw 0 #0c0b0a,0 .8cqw 1.4cqw rgba(0,0,0,.6),inset 0 .15cqw 0 rgba(255,255,255,.12);transition:transform .08s,box-shadow .08s}
.start span{line-height:1.3;text-align:center}
.start:active{transform:translateY(.4cqw);box-shadow:0 .1cqw 0 #0c0b0a,0 .3cqw .6cqw rgba(0,0,0,.6),inset 0 .15cqw 0 rgba(255,255,255,.1)}
.led{position:absolute;left:15.2%;top:86%;width:.9%;aspect-ratio:1;border-radius:50%;background:#3a2014;z-index:4;transition:background .3s,box-shadow .3s}
.deck.powered .led{background:#ff8a3c;box-shadow:0 0 1cqw #ff8a3c}
.rpm{left:17%;top:88.6%;width:5.4%;height:4.2%;border-radius:.7cqw;background:linear-gradient(#3b3835,#242220);box-shadow:0 .3cqw 0 #0c0b0a,inset 0 .1cqw 0 rgba(255,255,255,.1);font-size:1.3cqw}
.rpm45{left:23.2%}
.rpm[aria-pressed="true"]{color:var(--accent2);box-shadow:0 .15cqw 0 #0c0b0a,inset 0 .1cqw 0 rgba(255,255,255,.06),0 0 1.2cqw rgba(208,138,82,.25);transform:translateY(.15cqw)}
.cue{left:91.6%;top:27.4%;width:5%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 30%,#45413d,#1f1d1b 70%);box-shadow:0 .3cqw 0 #0c0b0a,0 .5cqw 1cqw rgba(0,0,0,.5)}
.cue span{width:34%;height:34%;border-left:.35cqw solid #cfc7bc;border-top:.35cqw solid #cfc7bc;transform:translateY(25%) rotate(45deg);transition:transform .25s}
.cue.down span{transform:translateY(-25%) rotate(225deg)}
.pitch{position:absolute;z-index:4;left:95%;top:52.6%;width:2%;height:39.6%;border-radius:1cqw;background:linear-gradient(90deg,#0b0a09,#1c1a18);box-shadow:inset 0 .2cqw .4cqw rgba(0,0,0,.8),0 .1cqw 0 rgba(255,255,255,.06);touch-action:none;cursor:ns-resize}
.pitch-knob{position:absolute;left:50%;top:50%;width:260%;height:6.5%;transform:translate(-50%,-50%);border-radius:.5cqw;background:linear-gradient(#6c6862,#2f2d2a);box-shadow:0 .4cqw .8cqw rgba(0,0,0,.6),inset 0 .1cqw 0 rgba(255,255,255,.2);pointer-events:none}
.pitch-knob::after{content:"";position:absolute;left:12%;right:12%;top:46%;height:8%;background:var(--accent)}

.deck-hint{position:absolute;left:10%;top:10.526%;width:60%;aspect-ratio:1;display:grid;place-items:center;text-align:center;padding:12%;font-size:2.2cqw;color:var(--ink3);pointer-events:none;padding-top:30%;transition:opacity .3s}

/* ---------- now playing ---------- */
.now{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));border:1px solid var(--line);border-radius:var(--r);padding:16px}
.now-meta{display:flex;gap:14px;align-items:center;min-height:64px}
.now-cover{width:64px;height:64px;border-radius:6px;object-fit:cover;flex:none;background:#222;box-shadow:0 6px 16px rgba(0,0,0,.5)}
.now-text{min-width:0}
.now-title{font-size:18px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.now-sub{color:var(--ink2);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seek{display:flex;align-items:center;gap:10px;margin-top:14px}
.time{font-variant-numeric:tabular-nums;font-size:12px;color:var(--ink3);min-width:36px}
.time:last-child{text-align:right}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:28px;background:transparent;margin:0;--p:0%}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--accent) var(--p),rgba(255,255,255,.14) var(--p))}
input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--accent) var(--p),rgba(255,255,255,.14) var(--p))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--ink);margin-top:-5px;box-shadow:0 1px 4px rgba(0,0,0,.6)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:var(--ink)}
input[type=range]:disabled{opacity:.4}
.transport{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:6px}
.tbtn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--ink);transition:background .15s,transform .1s}
.tbtn svg{width:22px;height:22px;fill:currentColor}
.tbtn:hover{background:rgba(255,255,255,.06)}
.tbtn:active{transform:scale(.94)}
.tbtn.play{width:56px;height:56px;background:var(--ink);color:#141210;position:relative}
.tbtn.play:hover{background:#fff}
.tbtn.play svg{width:26px;height:26px}
.i-pause{display:none}
.playing .i-pause{display:block}.playing .i-play{display:none}
.spin{position:absolute;inset:-4px;border-radius:50%;border:2px solid transparent;border-top-color:var(--accent);opacity:0;transition:opacity .2s}
.buffering .spin{opacity:1;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.vol{display:none;align-items:center;gap:6px;color:var(--ink2);margin-left:8px;width:130px}
.vol svg{width:20px;height:20px;fill:currentColor;flex:none}
@media (hover:hover) and (pointer:fine){.vol{display:flex}}

.tracks{list-style:none;margin:14px 0 0;padding:10px 0 0;border-top:1px solid var(--line);max-height:46vh;overflow:auto;overscroll-behavior:contain}
.tracks:empty{display:none}
.tracks li button{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;width:100%;text-align:left;padding:9px 8px;border-radius:8px;color:var(--ink2);transition:background .15s,color .15s}
.tracks li button:hover{background:rgba(255,255,255,.05);color:var(--ink)}
.tracks .n{color:var(--ink3);font-variant-numeric:tabular-nums;font-size:13px}
.tracks .tt{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tracks .d{font-size:12px;color:var(--ink3);font-variant-numeric:tabular-nums}
.tracks li.on button{color:var(--accent2);background:rgba(208,138,82,.08)}
.tracks li.on .n{color:var(--accent2)}

/* ---------- crate ---------- */
.crate-h{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin:6px 0 12px}
.crate{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(132px,38vw,184px);gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:6px 2px 18px;scrollbar-width:thin;scrollbar-color:#3a3530 transparent}
@media (min-width:980px){.crate{grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));overflow:visible}}
.sleeve{scroll-snap-align:start;text-align:left;display:block;min-width:0}
.sleeve-art{position:relative;aspect-ratio:1;border-radius:4px}
.sleeve-art::before{content:"";position:absolute;top:3%;bottom:3%;right:-2%;width:94%;border-radius:50%;
  background:radial-gradient(circle,#c9a27c 0 15%,#0d0c0b 15.5% 16%,#111 16.5%,#1a1918 60%,#0c0b0a 70%,#151413 98%,transparent 99%);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);box-shadow:0 4px 10px rgba(0,0,0,.5)}
.sleeve-art img{position:relative;display:block;width:100%;height:100%;object-fit:cover;border-radius:4px;background:#1e1b18;box-shadow:0 10px 24px -8px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.05) inset}
@media (hover:hover){.sleeve:hover .sleeve-art::before{transform:translateX(22%)}}
.sleeve.on .sleeve-art img{opacity:.35}
.sleeve.on .sleeve-art::before{opacity:0}
.sleeve-t{margin-top:10px;font-weight:600;font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sleeve-a{font-size:13px;color:var(--ink3);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.empty{color:var(--ink3);padding:20px;border:1px dashed var(--line);border-radius:var(--r);line-height:1.6}
.empty code{color:var(--ink2)}

@media (max-width:979px){
  .deck-wrap{margin:0 -4px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}