/* ∞ crate page */
.crate-hero{padding:clamp(24px,4vw,48px) 0 8px}
.crate-hero h1{font-size:clamp(2.4rem,7vw,4.6rem);line-height:1;margin:.1em 0 .25em}
.crate-ui{padding-bottom:clamp(40px,6vw,72px)}
.crate-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px 14px;align-items:end;background:var(--card);border:2px solid #05020a;box-shadow:5px 5px 0 #05020a;border-radius:18px;padding:16px}
.crate-filters label{display:block;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.crate-filters input[type=search],.crate-filters select{width:100%;min-height:44px;background:#0b0512;color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font:inherit}
.cf-toggles{display:flex;flex-direction:column;gap:6px}
.crate-filters .tgl{display:flex;gap:8px;align-items:center;text-transform:none;letter-spacing:0;font-size:.95rem;color:var(--ink);min-height:24px;cursor:pointer}
.tgl input{width:20px;height:20px;accent-color:var(--purple-2)}
.crate-count{margin:14px 2px 0;color:var(--muted);font-size:.95rem}
.dig{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(18px,3vw,40px);margin-top:18px;align-items:start}
@media (max-width:979px){.dig{grid-template-columns:1fr}}
/* crate */
.crate{position:relative;height:calc(min(300px,64vw) + 205px);perspective:1100px;perspective-origin:50% 10%;outline:none;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none;cursor:grab;border-radius:18px;
  background:radial-gradient(ellipse at 50% 0%,rgba(164,94,229,.25),transparent 65%)}
.crate:active{cursor:grabbing}
.crate:focus-visible{box-shadow:0 0 0 3px var(--gold)}
.stack{position:absolute;left:50%;bottom:78px;width:min(300px,64vw);aspect-ratio:1;transform:translateX(-50%);transform-style:preserve-3d}
.rec{position:absolute;inset:0;transform-origin:50% 100%;transform-style:preserve-3d;transition:transform .36s cubic-bezier(.2,.8,.2,1),opacity .3s;will-change:transform,opacity;backface-visibility:hidden}
.rec-sleeve{position:absolute;inset:0;border-radius:4px;overflow:hidden;background:#1d1030;box-shadow:0 -2px 0 rgba(255,255,255,.08) inset,0 18px 28px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.06)}
.rec-sleeve::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.2),transparent 30%,transparent 72%,rgba(0,0,0,.3)),linear-gradient(0deg,rgba(0,0,0,.22),transparent 18%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 0 14px rgba(0,0,0,.35)}
.rec::before{content:"";position:absolute;left:1px;right:1px;top:0;height:5px;transform-origin:50% 0;transform:rotateX(-90deg);background:linear-gradient(90deg,#3a2a4c,#6b5a80 50%,#3a2a4c);border-radius:1px}
.rec-sleeve img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.rec-blank{display:grid;place-items:center;height:100%;padding:16px;text-align:center;font-family:var(--script);color:var(--gold);background:repeating-radial-gradient(circle,#140a1f 0 2px,#1d1030 2px 4px)}
.rec-tab{position:absolute;left:8px;right:8px;top:-1.6em;font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted);opacity:0;transition:opacity .2s}
.rec:not(.is-front) .rec-tab{opacity:.85}
.rec.is-front .rec-sleeve{box-shadow:0 0 0 2px var(--gold),0 24px 40px rgba(0,0,0,.6)}
.rec.is-front{cursor:pointer}
.rec.is-front::after{content:"";position:absolute;top:6%;right:-14%;width:88%;aspect-ratio:1;border-radius:50%;z-index:-1;transform:translateZ(-2px);
  background:radial-gradient(circle,#0a0610 0 1.6%,#7b2fbf 1.8% 15%,#0a0610 15.5% 16%,transparent 16.5%),conic-gradient(from 25deg,transparent 0 6%,rgba(255,255,255,.2) 9%,transparent 14% 50%,rgba(255,255,255,.16) 58%,transparent 64%),var(--groove,repeating-radial-gradient(circle,#0b0710 0 1px,#17111f 1px 2px));background-size:100% 100%;box-shadow:0 0 0 1px #000,0 0 14px rgba(0,0,0,.6);transition:right .35s}
.crate:hover .rec.is-front::after,.crate:focus-visible .rec.is-front::after{right:-22%}
.sticker{position:absolute;top:8px;right:8px;background:var(--funk);color:#1a0b24;font:800 .7rem/1 system-ui,sans-serif;padding:5px 7px;border-radius:999px;transform:rotate(8deg)}
.sticker.rare{background:var(--gold)}
.crate::before{content:"";position:absolute;left:50%;bottom:62px;width:min(350px,80vw);height:calc(min(300px,64vw) + 40px);transform:translateX(-50%);border-radius:8px 8px 0 0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,10,31,0),rgba(10,5,16,.7)),repeating-linear-gradient(90deg,#3d2814 0 44px,#33210f 44px 46px);opacity:.55;box-shadow:inset 0 30px 40px rgba(0,0,0,.5)}
.crate-box{position:absolute;left:50%;bottom:0;width:min(370px,84vw);height:120px;transform:translateX(-50%);border-radius:6px 6px 12px 12px;z-index:200;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 30%),repeating-linear-gradient(90deg,#5a3b1d 0 46px,#4b3018 46px 48px),#5a3b1d;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.18),inset 0 -10px 18px rgba(0,0,0,.35),0 14px 26px rgba(0,0,0,.5);display:grid;place-items:center}
.crate-box::before{content:"";position:absolute;top:22px;left:50%;width:70px;height:16px;transform:translateX(-50%);border-radius:10px;background:#1a0f08;box-shadow:inset 0 3px 6px #000}
.crate-box span{margin-top:38px;font:800 .78rem/1 system-ui,sans-serif;letter-spacing:.32em;color:rgba(244,238,252,.55);text-shadow:0 1px 0 #000}
.crate-empty{position:absolute;inset:auto 0 50%;text-align:center;color:var(--muted)}
.crate-now{min-height:3em;margin:10px 4px 6px;color:var(--ink);font-size:.98rem}
.crate-btns{display:flex;flex-wrap:wrap;gap:10px}
.crate-btns .btn{min-height:44px}
.dig-btn{background:var(--purple);color:#fff}
/* turntable: 3D deck (CSS 3D + DPR-scaled canvas grooves; no WebGL) */
.tt{--spin:1.8s;--prog:0;--rx:0deg;--ry:0deg;--sa:28deg;position:relative;aspect-ratio:1.28;border-radius:16px;padding:6%;overflow:hidden;
  transform:perspective(1600px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s cubic-bezier(.2,.8,.2,1);
  background:radial-gradient(ellipse 80% 60% at calc(30% + var(--nx,0) * 20%) calc(20% + var(--ny,0) * 20%),rgba(255,255,255,.09),transparent 60%),repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px),linear-gradient(145deg,#2c2436,#151119 55%,#0c0910);
  border:2px solid #05020a;box-shadow:6px 6px 0 #05020a,inset 0 1px 0 rgba(255,255,255,.16),inset 0 -2px 0 rgba(0,0,0,.6),inset 0 0 0 6px rgba(0,0,0,.18)}
.tt::before{content:"";position:absolute;inset:3px;border-radius:13px;border:1px solid rgba(255,255,255,.05);pointer-events:none}
.sleeve{position:absolute;left:4%;top:9%;width:36%;aspect-ratio:1;z-index:3;transition:transform .7s cubic-bezier(.3,.7,.2,1),opacity .5s;transform:translate3d(-130%,0,0) rotate(-6deg);opacity:0;border-radius:3px;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 14px 26px rgba(0,0,0,.65),0 3px 6px rgba(0,0,0,.5)}
.sleeve img{width:100%;height:100%;object-fit:cover;display:block}
.sleeve::after{content:"";position:absolute;inset:0;background:linear-gradient(118deg,rgba(255,255,255,.22),transparent 32%,transparent 70%,rgba(0,0,0,.28)),radial-gradient(circle at 50% 50%,transparent 60%,rgba(0,0,0,.12));pointer-events:none}
.tt.has-record .sleeve{animation:sleeve-in 1.4s cubic-bezier(.3,.7,.2,1) forwards}
@keyframes sleeve-in{0%{transform:translate3d(-130%,0,0) rotate(-6deg);opacity:0}30%{transform:translate3d(0,0,0) rotate(-3deg);opacity:1}100%{transform:translate3d(-46%,-4%,0) rotate(-9deg);opacity:.95}}
.platter-well{position:absolute;left:11%;top:7%;width:64%;aspect-ratio:1;border-radius:50%;background:#07050a;box-shadow:inset 0 4px 10px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.08)}
.platter{position:absolute;left:12%;top:8%;width:62%;aspect-ratio:1;border-radius:50%;z-index:1}
.spin{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,#8d8d95,#d9d9df,#6f6f78,#cfcfd6,#7a7a83,#dcdce2,#8d8d95);box-shadow:0 0 22px 2px rgba(0,0,0,.65),inset 0 0 0 2px #3a3a42;will-change:transform}
.spin::before{content:"";position:absolute;inset:-1px;border-radius:50%;background:repeating-conic-gradient(from 0deg,#26262c 0 1.6deg,#b9b9c1 1.6deg 2.4deg,#26262c 2.4deg 3.6deg);
  -webkit-mask:radial-gradient(circle,transparent 0 46.6%,#000 46.9% 47.9%,transparent 48.2% 48.6%,#000 48.9% 50%);mask:radial-gradient(circle,transparent 0 46.6%,#000 46.9% 47.9%,transparent 48.2% 48.6%,#000 48.9% 50%)}
.tt.is-playing .spin::before{filter:drop-shadow(0 0 2px rgba(255,59,59,.55))}
.platter .mat{position:absolute;inset:3%;border-radius:50%;background:repeating-radial-gradient(circle,rgba(255,255,255,.025) 0 1px,transparent 1px 3px),radial-gradient(circle,#2a2430,#141118 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.platter .mat::after{content:"FRESH";position:absolute;left:50%;top:22%;transform:translateX(-50%);font:900 clamp(.6rem,2vw,1rem)/1 system-ui,sans-serif;letter-spacing:.4em;color:rgba(164,94,229,.35)}
.vinyl{position:absolute;inset:3.5%;border-radius:50%;opacity:0;transform:translate3d(-60%,0,0) scale(.96);background:#0b0a0e;
  box-shadow:0 0 0 1px #000,0 0 0 2.5px #1d1a22,0 0 0 3px #000,0 0 16px 3px rgba(0,0,0,.7)}
.vinyl .grooves{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;display:block}
.tt.has-record .vinyl{animation:vinyl-in 1.2s .35s cubic-bezier(.3,.7,.2,1) forwards}
@keyframes vinyl-in{0%{transform:translate3d(-60%,0,0) scale(.96);opacity:0}25%{opacity:1}100%{transform:none;opacity:1}}
.label{position:absolute;inset:32.5%;border-radius:50%;overflow:hidden;background:radial-gradient(circle,#8e3fd6,#6a24a8 70%,#4d1880);
  box-shadow:0 0 0 1px rgba(0,0,0,.7),0 0 6px 1px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.12)}
.label img{position:absolute;inset:17%;width:66%;height:66%;object-fit:cover;border-radius:50%;display:block;box-shadow:0 0 0 1px rgba(0,0,0,.45)}
.label::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,transparent 62%,rgba(0,0,0,.28) 100%)}
.label-ring{position:absolute;inset:0;width:100%;height:100%;fill:rgba(255,236,170,.82);font:800 7.2px/1 system-ui,sans-serif;letter-spacing:.06em}
.sheen{position:absolute;inset:3.5%;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .6s;mix-blend-mode:screen;
  background:conic-gradient(from var(--sa),transparent 0deg,rgba(255,255,255,.04) 14deg,rgba(255,255,255,.3) 24deg,rgba(214,190,255,.1) 32deg,rgba(255,224,170,.06) 38deg,transparent 52deg,transparent 180deg,rgba(255,255,255,.04) 194deg,rgba(255,255,255,.24) 204deg,rgba(190,214,255,.08) 212deg,transparent 232deg),
    radial-gradient(circle at calc(38% - var(--nx,0) * 15%) calc(32% - var(--ny,0) * 15%),rgba(255,255,255,.08),transparent 45%);
  -webkit-mask:radial-gradient(circle,transparent 0 35.5%,#000 36.5% 98%,transparent 99.5%);mask:radial-gradient(circle,transparent 0 35.5%,#000 36.5% 98%,transparent 99.5%)}
.vedge{position:absolute;inset:3.5%;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .6s;box-shadow:inset 1.5px 1.5px 0 rgba(255,255,255,.22),inset -1px -1.5px 0 rgba(0,0,0,.7)}
.tt.has-record .sheen,.tt.has-record .vedge{opacity:1;transition-delay:1.3s}
.tt.is-playing .spin{animation:spin var(--spin) linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.spindle{position:absolute;left:50%;top:50%;width:3.2%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 35% 30%,#fff,#b9b9c0 40%,#55555c);box-shadow:0 1px 2px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.4);z-index:2}
.strobe{position:absolute;left:8%;bottom:9%;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#7a2a36,#3a0d15);box-shadow:inset 0 0 2px #000,0 0 0 3px #1a1520,0 0 0 4px #000}
.tt.is-playing .strobe{background:radial-gradient(circle at 35% 30%,#ffb3b3,#ff3b3b 50%);box-shadow:0 0 0 3px #1a1520,0 0 0 4px #000,0 0 12px 4px rgba(255,59,59,.6)}
.arm{position:absolute;right:7%;top:6%;width:22%;height:72%;transform-origin:72% 9%;transform:rotate(-24deg);transition:transform .9s cubic-bezier(.4,.1,.2,1),filter .6s;z-index:4;pointer-events:none;filter:drop-shadow(10px 16px 6px rgba(0,0,0,.55))}
.tt.is-playing .arm{transform:rotate(calc(5deg + var(--prog) * 20deg));filter:drop-shadow(4px 6px 3px rgba(0,0,0,.6))}
.arm-base{position:absolute;right:8%;top:0;width:42%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 50%,#2a2a30 0 22%,transparent 23%),conic-gradient(from 20deg,#9a9aa2,#f2f2f6,#77777f,#e6e6ea,#8a8a92,#f2f2f6,#9a9aa2);box-shadow:0 0 0 2px #1a1a1f,inset 0 0 0 3px rgba(0,0,0,.25)}
.arm-weight{position:absolute;right:20%;top:-9%;width:18%;height:11%;border-radius:4px;background:linear-gradient(90deg,#3a3a40,#bdbdc4 45%,#55555c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.5);transform:rotate(18deg);transform-origin:50% 160%}
.arm-rod{position:absolute;right:27%;top:9%;width:5%;height:80%;border-radius:4px;background:linear-gradient(90deg,#7a7a82,#ffffff 40%,#c9c9cf 55%,#6a6a72);transform-origin:50% 0;transform:rotate(18deg)}
.arm-head{position:absolute;left:24%;bottom:6%;width:20%;height:14%;border-radius:3px 3px 5px 5px;background:linear-gradient(90deg,#1a1a1f,#3a3a42 50%,#0d0d10);border-top:2px solid var(--gold);transform:rotate(18deg);box-shadow:inset 0 -3px 0 #000}
.arm-head::after{content:"";position:absolute;right:-38%;top:12%;width:40%;height:10%;border-radius:2px;background:linear-gradient(#e6e6ea,#8a8a92)}
.tt-start{min-width:72px;min-height:44px;border-radius:8px;border:2px solid #05020a;background:linear-gradient(#3a3240,#211b27);color:var(--ink);font:800 .85rem system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;box-shadow:0 3px 0 #05020a}
.tt-start[aria-pressed=true]{background:linear-gradient(var(--purple-2),var(--purple));color:#fff}
.tt-start:disabled{opacity:.45;cursor:not-allowed}
.rpm{display:flex;border:2px solid #05020a;border-radius:8px;overflow:hidden}
.rpm button{min-width:44px;min-height:44px;background:#211b27;color:var(--muted);border:0;font:700 .85rem system-ui,sans-serif;cursor:pointer}
.rpm button[aria-pressed=true]{background:var(--gold);color:#1a0b24}
.tt-start:focus-visible,.rpm button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.knob{--a:0deg;position:relative;width:62px;height:62px;border-radius:50%;cursor:ns-resize;touch-action:none;outline:none}
.knob::before{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from -136deg,rgba(244,238,252,.6) 0 2deg,transparent 2deg 27deg);
  -webkit-mask:radial-gradient(circle,transparent 0 80%,#000 81%),conic-gradient(from -137deg,#000 0 274deg,transparent 274deg);-webkit-mask-composite:source-in;mask:radial-gradient(circle,transparent 0 80%,#000 81%),conic-gradient(from -137deg,#000 0 274deg,transparent 274deg);mask-composite:intersect}
.knob .cap{position:absolute;inset:14%;border-radius:50%;transform:rotate(var(--a));transition:transform .06s linear;
  background:radial-gradient(circle at 40% 32%,rgba(255,255,255,.35),transparent 42%),repeating-conic-gradient(#2d2833 0 6deg,#1b171f 6deg 12deg);box-shadow:0 4px 8px rgba(0,0,0,.7),0 0 0 2px #05020a,inset 0 0 0 3px rgba(0,0,0,.4)}
.knob .cap::after{content:"";position:absolute;left:calc(50% - 2px);top:6%;width:4px;height:34%;border-radius:2px;background:var(--gold);box-shadow:0 0 6px rgba(242,193,78,.6)}
.knob.is-kill .cap::after{background:#ff3b3b;box-shadow:0 0 8px rgba(255,59,59,.8)}
.knob:focus-visible{box-shadow:0 0 0 3px var(--gold)}
.mixer.is-bypass .needle-bar[hidden]{display:none}
.needle-bar{display:flex;gap:10px;align-items:center;margin-top:12px}
.needle-bar input{flex:1;accent-color:var(--purple-2);min-height:24px}
.needle-bar span{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.9rem;min-width:7.5em;text-align:right}
.tt-info{margin-top:14px}
.tt-title{font-size:clamp(1.3rem,2.6vw,1.8rem);margin:.1em 0 .2em;line-height:1.15}
.tt-meta{color:var(--muted);margin:0 0 6px}
.tt-status{min-height:1.5em;color:var(--gold);font-size:.95rem;margin:6px 0 10px}
.tt-links{display:flex;flex-wrap:wrap;gap:10px}
.tt-links .btn{min-height:44px}
.tt-player iframe{width:100%;border:0;border-radius:12px;margin-top:14px;background:#05020a}
.tt-player iframe.is-video{aspect-ratio:16/9;height:auto}
/* grid mode (reduced motion or opt-in) */
.crate-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:22px}
.crate-grid-mode .crate,.crate-grid-mode .crate-now,.crate-grid-mode .crate-btns #cprev,.crate-grid-mode .crate-btns #cnext,.crate-grid-mode .crate-btns #cpull{display:none}
.crate-grid-mode .dig{grid-template-columns:1fr}
.crate-grid-mode .tt-zone{max-width:620px}
.gcard{display:flex;flex-direction:column;gap:4px;text-align:left;background:var(--card);border:2px solid #05020a;box-shadow:4px 4px 0 #05020a;border-radius:12px;padding:8px;color:var(--ink);font:inherit;cursor:pointer}
.gcard img,.gcard .rec-blank{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;display:block}
.gcard .gt{font-weight:700;font-size:.9rem;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gcard .gm{color:var(--muted);font-size:.8rem}
.gcard.is-rare{border-color:var(--gold)}
.gcard:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.tt{transform:none!important}.rec,.sleeve,.arm,.tt,.knob .cap{transition:none!important}.tt.has-record .sleeve{animation:none!important;transform:translate3d(-46%,-4%,0) rotate(-9deg);opacity:.92}.tt.has-record .vinyl{animation:none!important;transform:none;opacity:1}.tt.is-playing .spin{animation:none!important}}
@media (max-width:600px){.tt{aspect-ratio:1.02}.platter{top:5%;left:7%;width:70%}.arm{height:66%}}

/* layout: crate | deck | rotary mixer on wide screens; mixer stacks under the deck below 1200px */
@media (min-width:1200px){.dig{grid-template-columns:minmax(0,.95fr) minmax(0,1.1fr) 300px}.mx-zone{position:sticky;top:84px}}
@media (min-width:980px) and (max-width:1199px){.mx-zone{grid-column:1 / -1}.rotary{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:4px 18px;align-items:start}.rt-head,.mx-note{grid-column:1 / -1}}
.crate-grid-mode .dig{grid-template-columns:1fr}
.crate-grid-mode .mx-zone{max-width:620px}
/* deck tabs */
.deck-tabs{display:flex;gap:8px;margin-bottom:10px}
.deck-tabs button{flex:1;min-height:44px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:6px 12px;border-radius:10px;border:2px solid #05020a;background:#1b1522;color:var(--muted);font:800 .85rem/1.1 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;box-shadow:3px 3px 0 #05020a}
.deck-tabs .dt{font-weight:500;letter-spacing:0;text-transform:none;font-size:.78rem;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deck-tabs button[aria-selected=true]{background:linear-gradient(var(--purple-2),var(--purple));color:#fff}
.deck-tabs button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.tt::after{content:attr(data-deck);position:absolute;left:5%;top:5%;font:900 .8rem/1 system-ui,sans-serif;letter-spacing:.2em;color:rgba(244,238,252,.35);z-index:0}
.tt.no-anim.has-record .sleeve{animation:none;transform:translate3d(-46%,-4%,0) rotate(-9deg);opacity:.95}
.tt.no-anim.has-record .vinyl{animation:none;transform:none;opacity:1}
.tt.no-anim.has-record .sheen,.tt.no-anim.has-record .vedge{transition-delay:0s}
/* needles / cartridges */
.arm-cart{position:absolute;left:12%;right:12%;bottom:-38%;height:46%;border-radius:2px 2px 4px 4px;background:var(--cart,#111);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.arm-stylus{position:absolute;left:46%;bottom:-62%;width:8%;height:26%;border-radius:0 0 2px 2px;background:var(--styl,#d9d9de)}
.tt{--head:#1a1a1f;--accent:var(--gold);--cart:#141418;--styl:#e0e0e6}
.tt[data-needle=hifi]{--head:#c9c9cf;--accent:#8fd3ff;--cart:#e8e8ec;--styl:#8fd3ff}
.tt[data-needle=scratch]{--head:#0b0b0d;--accent:#ff3b3b;--cart:#ff3b3b;--styl:#fff}
.tt[data-needle=vintage]{--head:#5a1f8f;--accent:#f4e3b5;--cart:#f4e3b5;--styl:#c9a227}
.arm-head{background:linear-gradient(90deg,color-mix(in srgb,var(--head) 70%,#000),var(--head) 50%,color-mix(in srgb,var(--head) 60%,#000));border-top-color:var(--accent)}
.tt.needle-swap .arm-head{animation:needle-swap .55s cubic-bezier(.3,.7,.2,1)}
@keyframes needle-swap{0%{transform:rotate(18deg) translateY(0);opacity:1}40%{transform:rotate(18deg) translateY(30%);opacity:0}60%{transform:rotate(18deg) translateY(30%);opacity:0}100%{transform:rotate(18deg) translateY(0);opacity:1}}
.needles{margin:12px 0 0;padding:10px 12px 8px;border:2px solid #05020a;border-radius:14px;background:#17121d;box-shadow:4px 4px 0 #05020a;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.needles legend{float:left;width:100%;margin:0 0 4px;padding:0;font:800 .78rem/1 system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:8px}
.ndl{position:relative;display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 12px 4px 8px;border-radius:10px;border:1px solid var(--line);background:#0e0a13;cursor:pointer;font-weight:700;font-size:.9rem}
.ndl input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.ndl:has(input:checked){border-color:var(--gold);background:#241a2e;box-shadow:inset 0 0 0 1px var(--gold)}
.ndl:has(input:focus-visible){outline:3px solid var(--gold);outline-offset:2px}
.ndl-v{width:22px;height:26px;position:relative;border-radius:3px 3px 5px 5px;background:linear-gradient(var(--h,#1a1a1f) 0 40%,var(--c,#141418) 40%);border-top:2px solid var(--a,var(--gold))}
.ndl-v::after{content:"";position:absolute;left:9px;bottom:-5px;width:4px;height:6px;background:var(--s,#ddd);border-radius:0 0 2px 2px}
.ndl-hifi .ndl-v{--h:#c9c9cf;--c:#e8e8ec;--a:#8fd3ff;--s:#8fd3ff}.ndl-scratch .ndl-v{--h:#0b0b0d;--c:#ff3b3b;--a:#ff3b3b;--s:#fff}.ndl-vintage .ndl-v{--h:#5a1f8f;--c:#f4e3b5;--a:#f4e3b5;--s:#c9a227}
.needle-now{flex-basis:100%;margin:2px 0 0;color:var(--muted);font-size:.84rem}
.tip{position:relative;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#2a2233;color:var(--ink);font:700 .75rem/1 Georgia,serif;letter-spacing:0;text-transform:none;cursor:help}
.tip-box{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-30%);width:min(280px,70vw);padding:10px 12px;border-radius:10px;background:#05020a;color:var(--ink);font:500 .82rem/1.4 system-ui,sans-serif;letter-spacing:0;text-transform:none;box-shadow:0 8px 20px rgba(0,0,0,.6);opacity:0;visibility:hidden;transition:opacity .15s;z-index:20}
.tip:hover .tip-box,.tip:focus .tip-box,.tip:focus-within .tip-box{opacity:1;visibility:visible}
.tip:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
/* rotary mixer (vintage rack rotary look: brushed aluminium, big knobs) */
.rotary{position:relative;border-radius:10px;border:2px solid #05020a;padding:12px 16px 14px;color:#1a1520;box-shadow:6px 6px 0 #05020a,inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 0 rgba(0,0,0,.25);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,rgba(0,0,0,.035) 1px 2px,transparent 2px 3px),linear-gradient(180deg,#d8d8dd,#b9b9c0 45%,#a7a7af)}
.rt-head{display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(0,0,0,.25);box-shadow:0 1px 0 rgba(255,255,255,.5);padding-bottom:8px;margin-bottom:10px}
.rt-screw{width:12px;height:12px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 30%,#fff,#8a8a92);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);position:relative}
.rt-screw::after{content:"";position:absolute;left:2px;right:2px;top:5px;height:2px;background:#55555c;transform:rotate(35deg)}
.rt-brand{margin:0;font:900 1rem/1 system-ui,sans-serif;letter-spacing:.12em;color:#3b1466}
.rt-model{margin-left:auto;font:700 .66rem/1.1 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#4a4450;text-align:right}
.rt-chans{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rt-ch{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px 10px;border-radius:8px;background:rgba(0,0,0,.06);box-shadow:inset 0 1px 2px rgba(0,0,0,.25),0 1px 0 rgba(255,255,255,.5);min-width:0}
.rt-cn{margin:0;font:900 1.3rem/1 system-ui,sans-serif;color:#2a2230}
.rt-tt{margin:0;max-width:100%;font-size:.78rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#2a2230}
.rt-st{margin:0;font-size:.7rem;color:#4a4450;text-align:center;min-height:2.2em;line-height:1.1}
.rt-ch.is-live .rt-cn{color:#7b2fbf;text-shadow:0 0 8px rgba(123,47,191,.45)}
.rt-ch.is-embed .rt-st{color:#7a4a00}
.rt-kv{display:flex;align-items:center;gap:8px}
.rotary .knob::before{background:repeating-conic-gradient(from -136deg,rgba(30,24,36,.75) 0 2deg,transparent 2deg 27deg)}
.knob.big{width:84px;height:84px}.knob.mid{width:72px;height:72px}
.rotary .knob .cap{background:radial-gradient(circle at 50% 50%,#d9d9de 0 22%,#9a9aa2 23% 26%,transparent 27%),radial-gradient(circle at 40% 30%,rgba(255,255,255,.28),transparent 45%),repeating-conic-gradient(#26222b 0 5deg,#121015 5deg 10deg)}
.rotary .knob .cap::after{top:4%;height:22%;background:#f4f4f8;box-shadow:none}
.knob.master .cap::after{background:#f2c14e}
.rotary .knob.is-kill .cap::after{background:#ff3b3b}
.cue{min-width:64px;min-height:44px;border-radius:6px;border:2px solid #2a2230;background:linear-gradient(#efeff2,#c9c9cf);color:#2a2230;font:900 .78rem/1 system-ui,sans-serif;letter-spacing:.14em;cursor:pointer;box-shadow:0 2px 0 #2a2230}
.cue[aria-pressed=true]{background:linear-gradient(#ffd36b,#f2a93b);box-shadow:0 0 10px rgba(242,169,59,.7),0 2px 0 #2a2230}
.cue:focus-visible{outline:3px solid #7b2fbf;outline-offset:2px}
.rt-row{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid rgba(0,0,0,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.rt-iso{margin-top:12px;padding:10px;border-radius:8px;background:#1b1620;box-shadow:inset 0 2px 6px rgba(0,0,0,.6)}
.rt-sub{margin:0 0 8px;font:800 .74rem/1 system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.rt-sub small{color:var(--muted);letter-spacing:.08em;margin-left:.5em}
.rt-iso .knobs{display:flex;justify-content:space-around;gap:10px}
.kn{display:flex;flex-direction:column;align-items:center;gap:6px}
.kl{font:800 .68rem/1 system-ui,sans-serif;letter-spacing:.14em;color:#2a2230;white-space:nowrap}
.rt-iso .kl{color:var(--ink)}
.rotary .knob:focus-visible{box-shadow:0 0 0 3px #7b2fbf}
.meter{display:flex;flex-direction:column-reverse;gap:3px;padding:4px;border-radius:6px;background:#07050a;box-shadow:inset 0 1px 3px #000}
.meter i{display:block;width:14px;height:4px;border-radius:1px;background:#2a2230}
.meter i.on{background:#7dff8a}.meter i.on:nth-child(n+7){background:var(--gold)}.meter i.on:nth-child(n+9){background:#ff4d4d}
.rt-kv .meter i.on:nth-child(n+6){background:var(--gold)}.rt-kv .meter i.on:nth-child(n+8){background:#ff4d4d}
.mx-note{margin:10px 0 0;color:#3a3440;font-size:.78rem;line-height:1.4}
@media (prefers-reduced-motion:reduce){.tt.needle-swap .arm-head{animation:none}}
.rt-ch.is-bypass .rt-st{color:#7a4a00;font-weight:700}
/* ===== v18: no pull-to-refresh / overscroll reloads while digging ===== */
html,body{overscroll-behavior-y:none}
.crate{touch-action:none;overscroll-behavior:contain}
.knob,.needle-bar input{touch-action:none}
/* ===== v18 redesign: crate first, one big deck with an obvious Play, mixer in a drawer ===== */
.crate-filters{display:flex;flex-direction:column;gap:10px;padding:14px 16px}
.cf-search label{font-size:.78rem}
.cf-more summary{list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:#0b0512;color:var(--ink);font-weight:700;cursor:pointer}
.cf-more summary::-webkit-details-marker{display:none}
.cf-more summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.cf-more[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.cf-more summary:focus-visible,.mx-drawer summary:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.cf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px 14px;align-items:end;margin-top:12px}
.crate-filters .tgl{min-height:44px}
@media (min-width:980px){.crate-filters{display:grid;grid-template-columns:minmax(220px,1fr) auto;align-items:end;column-gap:16px}.cf-more{grid-column:1 / -1;order:3}.cf-more[open]{margin-top:-4px}}
.crate-count{margin:12px 2px 0;font-size:.9rem}
/* crate buttons: one big Pull, flips either side, random dig underneath */
.crate-btns{display:grid;grid-template-columns:56px 1fr 56px;gap:10px}
.crate-btns .btn{min-height:56px;font-size:1.05rem}
.cb-flip{padding:0;font-size:1.1rem}
.cb-pull{box-shadow:4px 4px 0 #05020a}
.cb-dig{grid-column:1 / -1;min-height:48px!important;background:#241634;border:1px solid var(--line);box-shadow:none;font-size:.98rem!important}
.crate-now{min-height:2.6em;margin:10px 2px 8px;font-size:.95rem}
/* transport: big Play right under the platter */
.transport{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin-top:12px}
.tt-start{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:132px;min-height:56px;padding:0 22px;border-radius:999px;border:2px solid #05020a;
  background:linear-gradient(135deg,var(--gold),#ffd77a);color:#1a0b24;font:900 1.05rem/1 system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;box-shadow:4px 4px 0 #05020a;cursor:pointer}
.tt-start .ts-ic{width:0;height:0;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent currentColor}
.tt-start[aria-pressed=true]{background:linear-gradient(135deg,var(--purple),var(--purple-2));color:#fff}
.tt-start[aria-pressed=true] .ts-ic{width:14px;height:14px;border:0;background:currentColor;border-radius:2px}
.tt-start:disabled{opacity:.5;box-shadow:none}
.tt-start:not(:disabled):hover{transform:translateY(-1px)}
.transport .needle-bar{margin:0;min-width:0}
.transport .needle-bar span{min-width:0;font-size:.82rem}
.transport .needle-bar[hidden]{display:none}
.transport .rpm{grid-column:3}
.transport .rpm button{min-width:48px;min-height:48px}
.tt-status{margin:8px 2px 4px;font-size:.92rem}
.tt-status:empty{display:none}
.embed-cue{display:flex;gap:8px;align-items:center;margin:10px 0 0;padding:10px 14px;border-radius:12px;background:linear-gradient(90deg,rgba(242,184,75,.18),rgba(123,47,191,.18));border:1px solid rgba(242,184,75,.55);color:var(--ink);font-weight:600;font-size:.95rem}
.embed-cue span{color:var(--gold)}
.tt-player iframe{margin-top:10px}
.tt-info{margin-top:12px}
.tt-info .eyebrow{margin-bottom:2px}
/* needles: compact chips */
.needles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:16px}
.needles legend{grid-column:1 / -1}
.ndl{flex-direction:column;justify-content:center;gap:6px;min-height:72px;padding:8px 4px;text-align:center;font-size:.85rem}
.needle-now{grid-column:1 / -1}
/* mixer drawer */
.mx-drawer>summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:56px;padding:0 18px;border-radius:14px;border:2px solid #05020a;background:linear-gradient(135deg,#2a1640,#3b1466);color:var(--ink);box-shadow:4px 4px 0 #05020a;cursor:pointer}
.mx-drawer>summary::-webkit-details-marker{display:none}
.mxs-t{font:900 1.1rem/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.mxs-s{font-size:.8rem;color:var(--muted);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mxs-led{width:10px;height:10px;border-radius:50%;background:#2a2230;box-shadow:inset 0 0 0 1px #000}
.mxs-led.on{background:#7dff8a;box-shadow:0 0 8px #7dff8a}
.mx-drawer>summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.mx-drawer[open]>summary::after{transform:rotate(-135deg)}
.mx-drawer[open]>summary{margin-bottom:12px}
.mx-zone{margin-top:6px}
@media (min-width:1200px){.mx-drawer>summary{min-height:48px}.mxs-s{display:none}}
/* phones */
@media (max-width:979px){
  .crate-hero .lede{font-size:.98rem}
  .dig{gap:22px}
  .tt-zone{padding-top:4px;border-top:1px solid var(--line)}
  .mx-zone{border-top:1px solid var(--line);padding-top:18px}
  .rotary{padding:12px}
}
@media (max-width:420px){
  .transport{grid-template-columns:1fr auto}
  .transport .tt-start{grid-column:1;min-width:0;width:100%}
  .transport .rpm{grid-column:2;grid-row:1}
  .transport .needle-bar{grid-column:1 / -1;grid-row:2}
  .ndl{font-size:.8rem}
}
@media (max-width:979px){.dig{grid-template-columns:minmax(0,1fr)}}
.cf-grid{grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
.cf-grid>div,.cf-grid select{min-width:0}
.crate-btns .cb-dig{background:#241634;border:1px solid var(--line);color:var(--ink);box-shadow:none}
.crate-btns .cb-dig:hover{background:#2f1d45}
.tt-zone,.mx-zone,.crate-zone{min-width:0}
#ttzone,#tt-player-A,#tt-player-B{scroll-margin-top:84px}
.transport .needle-bar span{min-width:4.6em}