:root{--paper:#f1efe8;--paper2:#e9e7dd;--ink:#0a0b0a;--dim:#6c6e62;--line:rgba(22,23,15,.16);--line2:rgba(22,23,15,.28);--signal:#19e07c;--signal-d:#0c8f50;--violet:#6a3cf0;
/* the rest of the front-page palette. Violet is the BOOTH's colour — reasoning, the drawer, the
   thinking cursor — kept distinct from signal green, which means audio: live, saved, on air. */
--paper3:#e2dfd2;--card:#f7f5ee;--ink2:#1c1e1b;--dim2:#8e9084;--line3:rgba(22,23,15,.40);
--violet-d:#4a26b8;--violet-ink:#1b0b52;--signal-ink:#05351d;
--grotesk:"Cabinet Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;--mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace}
*{box-sizing:border-box}
html{overflow-x:clip;max-width:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Helvetica Neue",Arial,system-ui,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased;padding-bottom:78px;overflow-x:clip;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:920px;margin:0 auto;padding:0 22px}
header.top{border-bottom:1px solid var(--line);position:sticky;top:0;background:color-mix(in srgb,var(--paper) 86%,transparent);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);z-index:5;transition:background .25s ease,backdrop-filter .25s ease}
/* Over the field the menu is TRANSPARENT — the rings run right through it, as in the prototype.
   The fill and blur come back the moment the page scrolls, because a sticky menu over scrolling
   content needs them to stay legible; the class is set by the field script on the home page only. */
header.top.over-field{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.topin{display:flex;align-items:center;justify-content:space-between;height:60px}
.wm{font-family:var(--grotesk);font-weight:800;letter-spacing:-.02em;font-size:19px;position:relative;display:inline-block}
.wm .sl{color:var(--signal-d)}
.wm:hover{animation:wmglitch .34s steps(2,end) 1}
@keyframes wmglitch{0%{text-shadow:1px 0 var(--signal),-1px 0 #ff3a1f;transform:translate(0)}20%{text-shadow:-2px 0 var(--signal),2px 0 #6a3cf0;transform:translate(1px,-1px)}40%{text-shadow:2px 0 #ff3a1f,-2px 0 var(--signal);transform:translate(-1px,1px)}60%{text-shadow:-1px 0 #6a3cf0,1px 0 var(--signal);transform:translate(1px,0)}80%{text-shadow:1px 0 var(--signal),-1px 0 #ff3a1f;transform:translate(-1px,0)}100%{text-shadow:none;transform:translate(0)}}
.pv-fav{flex:none;align-self:center;background:none;border:0;color:var(--line2);font-size:18px;line-height:1;cursor:pointer;padding:4px 6px;margin-left:2px;transition:color .14s ease,transform .14s ease}
.pv-fav::before{content:'\2661'}
.pv-fav:hover{color:var(--signal-d);transform:scale(1.14)}
.pv-fav.on{color:var(--signal-d)}
.pv-fav.on::before{content:'\2665'}
.pv-fav.pulse{animation:favpulse .42s ease}
@keyframes favpulse{0%{transform:scale(1)}40%{transform:scale(1.4)}100%{transform:scale(1)}}
.topnav{display:flex;align-items:center;gap:18px;position:relative}
.landing-navlinks{display:none}
.srch{position:relative}
.srch-btn{background:none;border:1px solid var(--line);border-radius:999px;width:30px;height:30px;line-height:1;font-size:15px;color:var(--dim);cursor:pointer;transition:color .14s,border-color .14s}
.srch-btn:hover,.srch.open .srch-btn{color:var(--signal-d);border-color:var(--signal-d)}
.srch-pop{position:absolute;right:0;top:40px;width:min(360px,calc(100vw - 44px));background:var(--paper);border:1px solid var(--line2);border-radius:12px;box-shadow:0 18px 48px -18px rgba(0,0,0,.35);padding:8px;z-index:40}
.srch-pop input{width:100%;border:1px solid var(--line);border-radius:8px;background:var(--paper2);color:var(--ink);font:inherit;font-size:14px;padding:9px 12px;outline:none}
.srch-pop input:focus{border-color:var(--signal-d)}
.srch-dd{max-height:min(58vh,420px);overflow-y:auto;margin-top:6px}
.srch-h{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase;padding:8px 8px 3px}
.srch-it{display:block;padding:7px 8px;border-radius:8px;cursor:pointer}
.srch-it b{font-weight:700}
.srch-it .s{display:block;font-size:12px;color:var(--dim)}
.srch-it:hover,.srch-it.sel{background:color-mix(in srgb,var(--signal) 14%,transparent)}
.srch-vibe{border-top:1px solid var(--line);margin-top:6px;padding-top:9px;color:var(--signal-d);font-weight:600}
.srch-none{padding:10px 8px;color:var(--dim);font-size:13px}
@media(max-width:560px){.srch-pop{position:fixed;left:12px;right:12px;top:64px;width:auto}}
.navlinks{display:flex;align-items:center;gap:18px}
.navlinks a{font-family:var(--mono);font-size:12.5px;color:var(--dim)}
.navlinks a:hover{color:var(--ink)}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:4px;width:36px;height:32px;padding:0 9px;border:1px solid var(--line2);border-radius:9px;background:var(--paper);cursor:pointer}
.nav-toggle span{display:block;height:1.6px;background:var(--ink);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.nav-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
.nav-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}
.topnav a.live{color:var(--ink);display:inline-flex;align-items:center;gap:6px}
.live .eq{display:none;align-items:flex-end;gap:2px;height:11px}
.live.playing .eq{display:inline-flex}
.live.playing .dot{display:none}
.live .eq i{width:2.5px;height:100%;background:var(--signal);border-radius:1px;transform-origin:bottom;animation:eqbar .9s ease-in-out infinite}
.live .eq i:nth-child(1){animation-delay:-.20s}
.live .eq i:nth-child(2){animation-delay:-.55s}
.live .eq i:nth-child(3){animation-delay:0s}
@keyframes eqbar{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
/* Collapse the legacy navigation before its destinations crowd the header. */
@media(max-width:760px){
  .nav-toggle{display:inline-flex}
  .navlinks{position:absolute;top:calc(100% + 9px);right:0;flex-direction:column;align-items:stretch;gap:2px;min-width:200px;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:0 18px 44px rgba(20,22,15,.20);display:none;z-index:60}
  .topnav.open .navlinks{display:flex}
  .navlinks a{font-size:14.5px;padding:11px 13px;border-radius:9px;color:var(--ink)}
  .navlinks a:hover,.navlinks a:active{background:rgba(22,23,15,.05)}
  .navlinks a.acct{color:var(--signal-d);border-top:1px solid var(--line);margin-top:4px;padding-top:13px;border-radius:0 0 9px 9px}
}
.live{font-family:var(--mono);font-size:12px;border:1px solid var(--line2);border-radius:999px;padding:7px 14px;display:inline-flex;gap:7px;align-items:center}
.live .dot{width:7px;height:7px;border-radius:50%;background:var(--signal);box-shadow:0 0 8px var(--signal)}
.crumb{font-family:var(--mono);font-size:12px;color:var(--dim);margin:26px 0 6px}
.crumb a:hover{color:var(--signal-d)}
h1{font-family:var(--grotesk);font-size:clamp(30px,5.4vw,52px);font-weight:800;letter-spacing:-.025em;line-height:1.02;margin:6px 0 4px}
.hero{display:grid;grid-template-columns:200px 1fr;gap:26px;align-items:start;margin:8px 0 30px}
.art{width:200px;height:200px;border-radius:14px;overflow:hidden;background:var(--paper2);border:1px solid var(--line);position:relative}
.art img{width:100%;height:100%;object-fit:cover;display:block}
.sig{width:100%;height:100%;display:block}
.noart{display:flex;align-items:center;justify-content:center;height:100%;color:var(--dim);font-size:42px}
.score{display:inline-flex;flex-direction:column;align-items:center;border:1px solid var(--line2);border-radius:12px;padding:10px 16px;margin-bottom:14px}
.score b{font-family:var(--grotesk);font-size:34px;font-weight:800;letter-spacing:-.02em;color:var(--signal-d);line-height:1}
.score span{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--dim);margin-top:5px;text-transform:uppercase}
.vitals{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 16px}
.v{font-family:var(--mono);font-size:11px;color:var(--dim);border:1px solid var(--line);border-radius:8px;padding:6px 10px}
.v b{color:var(--ink)}
.v.k b{color:var(--signal-d)}
a.v{transition:border-color .14s ease,color .14s ease}
a.v:hover{border-color:var(--signal);color:var(--signal-d)}
.v.live{border-color:color-mix(in srgb,var(--signal) 50%,transparent)}
.v.live b{color:var(--signal-d)}
audio{width:100%;margin:6px 0 4px;height:38px}
.cap{font-family:var(--mono);font-size:11px;color:var(--dim)}
.review{font-size:17px;line-height:1.7;margin:14px 0}
.review p{margin:0 0 14px}
.byline{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal-d);margin-bottom:6px}
h2.sec{font-size:13px;font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);border-top:1px solid var(--line);padding-top:22px;margin:34px 0 14px}
.list{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.row .t{flex:1;min-width:0}
.row .t .tt{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .t .ta{font-size:13px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .t .tt:hover{color:var(--signal-d)}
.row .meta{font-family:var(--mono);font-size:11px;color:var(--dim);white-space:nowrap}
.row .sc{font-family:var(--mono);font-weight:700;color:var(--signal-d);width:34px;text-align:right}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 18px}
.chip{font-family:var(--mono);font-size:12px;border:1px solid var(--line2);border-radius:999px;padding:6px 13px}
.out-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.out-links .chip:hover{border-color:var(--signal);color:var(--signal-d)}
.chip:hover{border-color:var(--signal);color:var(--signal-d)}
.lede{font-size:17px;color:var(--dim);max-width:60ch;margin:6px 0 8px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:0 30px}
@media(max-width:680px){.hero{grid-template-columns:1fr}.art{width:140px;height:140px}.grid{grid-template-columns:1fr}}
footer{border-top:1px solid var(--line);margin-top:46px;padding:26px 0 50px;font-family:var(--mono);font-size:12px;color:var(--dim);text-align:center}
footer a{color:var(--signal-d)}
.engage{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:20px 0 6px}
.eng{font-family:'Helvetica Neue',Arial,sans-serif;font-size:13.5px;font-weight:600;cursor:pointer;background:var(--paper);color:var(--ink);border:1px solid var(--line2);border-radius:999px;padding:8px 15px;display:inline-flex;gap:7px;align-items:center;transition:all .14s ease}
.eng:hover{transform:translateY(-1px);border-color:var(--ink)}
.eng.on{border-color:var(--signal);color:var(--signal-d);background:color-mix(in srgb,var(--signal) 9%,var(--paper))}
.eng .ico{font-size:15px;line-height:1}
.eng b{font-weight:700}
.rx{display:inline-flex;gap:7px}
.rxb{padding:8px 12px}
.rxb i{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--dim)}
.rxb.on i{color:var(--signal-d)}
.dg-list{display:flex;flex-direction:column}
.dg{display:block;padding:18px 0;border-bottom:1px solid var(--line)}
.dg .d{font-family:var(--mono);font-size:12px;color:var(--signal-d);letter-spacing:.06em}
.dg h3{font-family:var(--grotesk);margin:6px 0 4px;font-size:21px;font-weight:750;letter-spacing:-.01em}
.dg p{margin:0;color:var(--dim);font-size:15px}
.dgi{padding:14px 0;border-bottom:1px solid var(--line)}
.dgi .h{display:flex;gap:12px;align-items:baseline}
.dgi .sc{font-family:var(--mono);font-weight:700;color:var(--signal-d)}
.dgi .tt{font-weight:650}.dgi .tt:hover{color:var(--signal-d)}
.dgi .ta{color:var(--dim);font-size:13px}
.dgi .rsn{color:var(--dim);font-size:14px;margin:6px 0 0;line-height:1.55}
.pvhero{display:flex;gap:14px;align-items:center;margin:6px 0 4px}
.pvrow{display:flex;gap:13px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line)}
.pv-play{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--line2);background:var(--paper);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;margin-top:2px;transition:all .14s ease}
.pvhero .pv-play{width:46px;height:46px}
.pv-play:hover{border-color:var(--signal);color:var(--signal-d);transform:scale(1.05)}
.pv-play.off{opacity:.28;cursor:default}
.playing .pv-play{border-color:var(--signal);color:var(--signal-d);background:color-mix(in srgb,var(--signal) 12%,var(--paper))}
.pv-art{flex:none;width:50px;height:50px;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--paper2);padding:0;cursor:pointer;position:relative;margin-top:1px}
.pv-art img,.pv-art .pv-noart{width:100%;height:100%;object-fit:cover;display:block}
.pv-art .pv-noart{display:flex;align-items:center;justify-content:center}
.pv-art .pv-noart svg{width:100%;height:100%}
.pv-art .pv-ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(10,11,10,.36);opacity:0;transition:opacity .14s ease}
.pv-art:hover .pv-ov,.playing .pv-art .pv-ov{opacity:1}
.pv-art.off{cursor:default}
.pvrow.can:hover .pv-art{border-color:var(--line2)}
.playing .pv-art{border-color:var(--signal);box-shadow:0 0 0 2px color-mix(in srgb,var(--signal) 30%,transparent)}
.playing .pv-art .pv-ov{background:rgba(10,11,10,.3);color:var(--signal)}
.pv-main{flex:1;min-width:0}
.pv-h{display:flex;align-items:baseline;gap:10px;min-width:0}
.pv-h .tt{font-weight:650;min-width:0;overflow-wrap:anywhere}.pv-h .tt:hover{color:var(--signal-d)}
.pv-h .sc{font-family:var(--mono);font-weight:700;color:var(--signal-d);font-size:13px}
.pv-a{font-size:13.5px;color:var(--dim)}.pv-a a{color:var(--ink)}.pv-a a:hover{color:var(--signal-d)}
.pv-chips{font-family:var(--mono);font-size:11px;color:var(--dim);margin-top:4px}
.pv-chips b.k,.pv-chips a.k{color:var(--signal-d);font-weight:700}.pv-chips a:hover{color:var(--signal-d)}
.pv-chips .mixtag{display:inline-block;padding:1px 6px;border:1px solid var(--signal-d);border-radius:999px;color:var(--signal-d);font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:10px}
.pv-wave{display:none;margin-top:9px}
.pvhero .pv-wave{flex:1;display:block;margin:0}
.playing .pv-wave{display:block}
/* member track-page hero: the WHOLE track waveform + real duration + the Ninja's mix-in/out points,
   with a live needle when this record is the one playing in the mix */
.pvhero.mh .pv-wave{display:block}
.mh-cv{display:block;width:100%;height:72px}
.pvhero.mh.playing .mh-cv,.pvhero.mh:hover .mh-cv{cursor:pointer}
.mh-time{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:11px;color:var(--dim);margin-top:3px}
.mh-time .mh-tag{color:var(--signal-d);letter-spacing:.06em;text-transform:uppercase;font-size:10px}
.wv{width:100%;height:30px;display:block}
.wv rect{fill:rgba(22,23,15,.20)}
.playing .wv rect{fill:var(--signal-d)}
.wv-pos{stroke:var(--ink);stroke-width:.5}
.pv-t{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--dim);margin-top:4px}
.pv-t .frag{color:var(--signal-d)}
.fd-note{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:var(--dim)}
/* the airing reason: the booth talking, so it reads as a quiet aside against the ruled edge —
   visibly not the same voice as .fd-note, which is the written review of the record itself */
.fd-why{margin:7px 0 0;padding-left:10px;border-left:2px solid color-mix(in srgb,var(--violet) 45%,transparent);
  font-size:12.5px;line-height:1.42;color:var(--ink2)}
.feedlist .pvrow{padding:16px 0}
.fy-all{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--signal-d);border-bottom:1px solid var(--line2)}
.fy-all:hover{color:var(--ink)}
.picks{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin:2px 0 8px}
.pvtile{display:flex;flex-direction:column;min-width:0}
.pvtile .pv-art{width:100%;height:auto;aspect-ratio:1;border-radius:12px;margin:0 0 8px}
.pvtile .pick-tt{font-weight:650;font-size:13.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pvtile .pick-tt:hover{color:var(--signal-d)}
.pvtile .pick-a{font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pvtile .pick-a:hover{color:var(--signal-d)}
.pick-sc{position:absolute;top:8px;right:8px;z-index:2;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--paper);background:rgba(10,11,10,.62);border-radius:7px;padding:2px 6px}
@media(max-width:680px){.picks{grid-template-columns:repeat(3,1fr)}}
.favgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:6px}
.favcard{position:relative}
.favcard .pick-tt{white-space:normal;line-height:1.25}
.favcard .favcard-chips{font-family:var(--mono);font-size:11px;color:var(--dim);margin-top:5px}
.favcard .favcard-chips a{color:var(--dim)}.favcard .favcard-chips a:hover{color:var(--signal-d)}
.favcard .favcard-chips a.k{color:var(--signal-d);font-weight:700}
.favcard .pv-wave{margin-top:8px}
.favcard .favcard-when{font-family:var(--mono);font-size:10.5px;color:var(--dim);margin-top:7px}
@media(max-width:920px){.favgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.favgrid{grid-template-columns:1fr 1fr}}
.dgday{display:flex;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.dgday-covers{flex:none;display:grid;grid-template-columns:repeat(3,27px);grid-auto-rows:27px;gap:3px;width:87px}
.dgday-covers img{width:27px;height:27px;border-radius:5px;object-fit:cover;display:block;background:var(--paper2)}
.dgday-no{grid-column:1/4;width:87px;height:57px;border-radius:7px;overflow:hidden;display:block}
.dgday-no svg{width:100%;height:100%}
.dgday-m{min-width:0}
.dgday-m .d{font-family:var(--mono);font-size:12px;color:var(--signal-d);letter-spacing:.06em}
.dgday-m h3{font-family:var(--grotesk);margin:5px 0 4px;font-size:20px;font-weight:750;letter-spacing:-.01em}
.dgday:hover h3{color:var(--signal-d)}
.dgday-m p{margin:0 0 7px;color:var(--dim);font-size:14px;line-height:1.5}
.dgday-g{display:flex;gap:6px;flex-wrap:wrap}
.gchip{font-family:var(--mono);font-size:10.5px;color:var(--dim);border:1px solid var(--line);border-radius:6px;padding:2px 7px}
/* home — light/paper "live stage" hero (full-bleed within the constrained main) + sections */
/* The stage reaches UP behind the sticky header (60px + its 1px rule) and pads the space back,
   so the contour field runs behind the menu exactly as it does in the prototype — the header is
   translucent with a backdrop blur, so the rings read through it. The .stage element exists only
   on the home page, so this rule needs no body class to scope it. */
.stage{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-top:-61px;padding-top:61px;
  background:linear-gradient(180deg,var(--paper2),var(--paper) 70%);isolation:isolate;overflow:hidden}
/* THE FIELD — a polar contour map behind the whole stage: for each ring, radius = base + Σ sines
   around the circle. It breathes on the bar, and grows a SECOND centre during a transition so the
   two records' rings visibly interfere. Purely decorative, so it sits at z-index 0, takes no
   pointer events, and is removed outright under prefers-reduced-motion. */
/* The field DISSOLVES at the bottom of the stage instead of being cut by a rule. A hard bottom edge
   turned the last block into a band between two full-width lines; masked, the rings thin out into
   the page and the stage has no edge to clash with. The vignette fades to the page's own paper —
   it used to fade to the darker paper2, which is what made the foot of the stage read greyer than
   both the booth above it and the sections below. */
#stageField{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 100%);mask-image:linear-gradient(to bottom,#000 72%,transparent 100%)}
.stage-vign{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 110% at 30% 32%,transparent 38%,color-mix(in srgb,var(--paper) 60%,transparent) 100%)}
.stage > *:not(#stageField):not(.stage-vign){position:relative;z-index:2}
.stage-in{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:34px;align-items:start;padding:44px 22px 30px}
/* the record itself, at scale — the cover is the play control */
.stage-viz{width:240px;height:240px;flex:none;position:relative;border-radius:14px;overflow:hidden;background:var(--paper3);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 26px 56px -26px rgba(13,15,36,.55)}
.stage-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.stage-sc{top:12px;right:12px;font-size:12.5px;padding:3px 8px;border-radius:8px}
.stage-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
@media(max-width:920px){.stage-in{grid-template-columns:1fr;gap:24px}.stage-viz{width:180px;height:180px}}
@media(max-width:680px){.stage-in{padding:24px 18px 22px}}   /* every stage alike on a phone, too */
/* THE DECK: the record pulled out of its sleeve. The sleeve (square, the artwork) stays as the
   record's identity; the disc in front carries the artwork as its label and turns only while the
   visitor is actually listening — is-playing on the live stage, is-live without is-paused on /mix.
   Paused keeps its angle. The sheen sits still over the turning disc. Reduced motion: no turn. */
.stage-viz.deck{--d:220px;--dx:80px;--dy:10px;width:300px;height:240px;border-radius:0;overflow:visible;background:none;box-shadow:none}
.deck .sleeve{position:absolute;left:0;top:0;width:220px;height:220px;border-radius:12px;overflow:hidden;background:var(--paper3);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 26px 56px -26px rgba(13,15,36,.55)}
.deck .sleeve img{width:100%;height:100%;object-fit:cover;display:block}
.deck .sleeve img[hidden]{display:none}
.deck .disc{position:absolute;left:var(--dx);top:var(--dy);width:var(--d);height:var(--d);border-radius:50%;
  background:radial-gradient(circle,#0a0b0a 0 34%,transparent 34.5%),repeating-radial-gradient(circle at center,#151614 0 1.4px,#0a0b0a 1.4px 3.6px);
  box-shadow:0 22px 44px -18px rgba(10,11,10,.75),0 0 0 1px rgba(255,255,255,.05) inset;
  animation:dn-spin 6s linear infinite;animation-play-state:paused;will-change:transform}
.deck .disc .label{position:absolute;inset:31%;border-radius:50%;overflow:hidden;background:var(--paper3);box-shadow:0 0 0 1px rgba(255,255,255,.14),0 0 0 6px #0a0b0a}
.deck .disc .label img{position:static;width:100%;height:100%;object-fit:cover;display:block}
.deck .disc .label img[hidden]{display:none}
.deck .disc .spindle{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--paper);box-shadow:0 0 0 1.5px rgba(10,11,10,.9)}
.deck .disc.swap .label{animation:dn-label-in .7s cubic-bezier(.2,.7,.2,1)}
.deck .sheen{position:absolute;left:var(--dx);top:var(--dy);width:var(--d);height:var(--d);border-radius:50%;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,0) 42%,rgba(255,255,255,0) 58%,rgba(255,255,255,.05))}
.deck .orb-play,.deck .mx-play{left:calc(var(--dx) + var(--d) / 2);top:calc(var(--dy) + var(--d) / 2)}
.deck .stage-sc{left:auto;right:auto;top:8px;left:8px}
.stage.is-playing .deck .disc,.mixstage.is-live:not(.is-paused) .deck .disc{animation-play-state:running}
@keyframes dn-spin{to{transform:rotate(360deg)}}
@keyframes dn-label-in{0%{transform:scale(1.08);opacity:.2}100%{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.deck .disc{animation:none}}
/* below 920 the stage is one column, so the deck has the width to itself: it stays whole (the sleeve
   was being hidden behind the disc on a phone while the row beside it sat empty); on a phone it is
   the same deck a size down — sleeve and disc 200, the disc pulled out to the right as ever */
@media(max-width:680px){.stage-viz.deck{--d:200px;--dx:72px;--dy:9px;width:272px;height:218px}.deck .sleeve{width:200px;height:200px}.deck .orb-play,.deck .mx-play{width:92px;height:92px}}
.orb-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:108px;height:108px;border-radius:50%;background:rgba(8,9,18,.4);border:1px solid rgba(255,255,255,.28);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;cursor:pointer;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:all .16s ease}
.orb-play:hover{background:rgba(8,9,18,.6);border-color:var(--signal);transform:translate(-50%,-50%) scale(1.04)}
.orb-play.on{border-color:var(--signal)}
.orb-play .orb-play-i svg{width:18px;height:22px;fill:#fff;display:block}
.orb-play .orb-play-t{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:rgba(255,255,255,.9)}
@media(max-width:680px){.stage-viz{width:160px;height:160px}.orb-play{width:88px;height:88px}}
/* which show is on: the Ninja's call, when he made it, and why */
/* inline flow, not flex: the line is a sentence with its own spaces ("Slow Sunday — slow music for a
   slow morning · next: Ibiza Rewind, 13:13"). As a flex row its text runs became anonymous items
   with their spaces stripped, so it read "Slow Sunday— slow…·next:". */
.showline{font-family:var(--mono);font-size:11.5px;color:var(--dim);margin:0 0 16px;display:block;line-height:1.7}
.showline b{font-weight:500;color:var(--ink)}
.showline .sep{opacity:.4;margin:0 2px}
.showline .tag{color:var(--dim)}
/* the transport belongs to the record it controls, not to a strip further down the page */
.stage-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0 0}

/* ── the SAVE control ───────────────────────────────────────────────────────
   One control, one line: the count is a LABEL on the button, not a caption floating under it —
   a number with nothing holding it reads as loose text in the row. */
.stage-save{position:relative;height:46px;border-radius:999px;border:1px solid var(--line2);
  background:color-mix(in srgb,var(--card) 85%,transparent);cursor:pointer;display:inline-flex;align-items:center;gap:9px;
  padding:0 17px 0 15px;transition:transform .16s ease,border-color .2s ease,background .2s ease;font-family:var(--grotesk);color:var(--ink)}
.stage-save:hover{transform:translateY(-1px);border-color:var(--line3)}
.stage-save svg{width:19px;height:19px;overflow:visible;flex:0 0 19px}
.stage-save path{fill:none;stroke:var(--ink);stroke-width:1.7;transition:fill .22s ease,stroke .22s ease}
.stage-save .n{font-family:var(--mono);font-size:12px;color:var(--dim);transition:color .2s ease}
.stage-save.on{border-color:color-mix(in srgb,var(--signal-d) 55%,transparent);background:color-mix(in srgb,var(--signal) 18%,var(--card))}
.stage-save.on path{fill:var(--signal-d);stroke:var(--signal-d);animation:thump .42s cubic-bezier(.2,1.6,.4,1)}
.stage-save.on .n{color:var(--signal-ink)}
@keyframes thump{0%{transform:scale(1)}38%{transform:scale(1.28)}100%{transform:scale(1)}}
.stage-save .ring{position:absolute;left:8px;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:50%;
  border:1.5px solid var(--signal-d);opacity:0;pointer-events:none}
.stage-save.on .ring{animation:burst .58s ease-out}
@keyframes burst{0%{opacity:.85;transform:scale(.55)}100%{opacity:0;transform:scale(1.5)}}
.stage-share{height:46px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--ink);
  font-family:var(--mono);font-size:12.5px;padding:0 20px;cursor:pointer;transition:border-color .2s ease,transform .16s ease}
.stage-share:hover{border-color:var(--line3);transform:translateY(-1px)}

/* ── the HISTORY button: the last few sleeves, stacked, as the affordance ── */
.hbtn{font-family:var(--mono);font-size:11.5px;display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line2);
  border-radius:999px;padding:7px 13px 7px 9px;background:color-mix(in srgb,var(--card) 85%,transparent);cursor:pointer;color:var(--ink)}
.hbtn:hover{border-color:var(--line3)}
.hbtn .stack{display:flex;align-items:center}
.hbtn .stack i{width:18px;height:18px;border-radius:4px;display:block;margin-left:-7px;box-shadow:0 0 0 1.5px var(--card);
  background-size:cover;background-position:center;background-color:var(--paper3)}
.hbtn .stack i:first-child{margin-left:0}
.hbtn .n{color:var(--dim)}

/* ── ORIENTATION — "first time here?" ──
   A block, not a strip. It used to be an 18px-tall row wedged between the booth's bottom rule
   and the stage's bottom rule with its own rule on top — three lines in forty pixels, which is
   what made it clash with everything around it. Now: no rule of its own (the booth's closes the
   booth), generous air above and below, and the same column as the booth. It sits on the field
   like everything else in the stage. */
/* An OBJECT on the field, not a band across it. Between the booth's bottom rule and the stage's
   bottom rule the orientation was a full-bleed strip in its own slightly-darker tone, with the
   button pushed to the far edge of a 1080px row — 700px from the sentence it belonged to. Now it
   is a contained card in the booth's translucent language, and the action sits directly under
   the line it acts on. The stage no longer has a bottom rule; the field dissolves instead. */
.intro-wrap{max-width:1080px;margin:0 auto;padding:40px 22px 36px}
.intro{border:1px solid var(--line2);border-radius:18px;padding:28px 30px 30px;
  background:color-mix(in srgb,var(--card) 74%,transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 22px 48px -30px rgba(22,23,15,.28)}
.intro-row{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.intro-row .lead{min-width:0}
.intro .q{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--violet-d);margin-bottom:12px}
.intro-row p{margin:0;font-size:clamp(20px,2.3vw,30px);letter-spacing:-.025em;color:var(--ink);line-height:1.22;font-weight:500;max-width:30ch}
.intro .ibtn{margin:20px 0 0;font-family:var(--mono);font-size:11.5px;border:1px solid var(--line2);border-radius:999px;
  padding:10px 17px;color:var(--ink);white-space:nowrap;background:color-mix(in srgb,var(--card) 70%,transparent);
  cursor:pointer;transition:border-color .16s ease,transform .16s ease,background .16s ease;display:inline-flex;align-items:center;gap:7px}
.intro .ibtn:hover{border-color:var(--line3);transform:translateY(-1px)}
.intro .ibtn[aria-expanded="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.intro .ibtn .ibtn-c{display:inline-block;transition:transform .2s ease}
.intro .ibtn[aria-expanded="true"] .ibtn-c{transform:rotate(180deg)}
/* the explanation, revealed in place: three translucent cards over the field, in the booth's
   evidence-card language, then the closing line */
.how{padding-top:26px;margin-top:26px;border-top:1px solid var(--line);animation:howin .28s ease both}
@keyframes howin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.how-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.how-step{border:1px solid var(--line2);border-radius:14px;padding:20px 20px 18px;
  background:color-mix(in srgb,var(--card) 80%,transparent);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.how-n{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--violet-d);margin-bottom:12px}
.how-step h4{font-family:var(--grotesk);margin:0 0 7px;font-size:18px;font-weight:750;letter-spacing:-.015em}
.how-step p{margin:0;color:var(--dim);font-size:14px;line-height:1.55}
.how-step p b{color:var(--ink);font-weight:700}
.how-step p a{color:var(--signal-d);border-bottom:1px solid var(--line2)}
.how-step p a:hover{border-color:var(--signal)}
.how-close{margin:22px 0 0;font-size:15.5px;line-height:1.5;color:var(--ink2);max-width:72ch;letter-spacing:-.012em}
@media(max-width:820px){.how-grid{grid-template-columns:1fr}}
@media(max-width:680px){.intro-wrap{padding:26px 16px 24px}.intro{padding:22px 20px 24px;border-radius:14px}}
/* visitor vs member, toggled by the class the auth check sets on <body>. Scoped to .intro so the
   names cannot silently hide anything else that happens to use them. */
.intro.for-member{display:none}
body.dn-member .intro.for-new{display:none}
body.dn-member .intro.for-member{display:flex}

/* ── THE BOOTH: what the Ninja is doing right now, and the evidence for it ── */
/* TRANSLUCENT, so the contour field keeps running behind it. An opaque fill here stopped the
   animation dead at the booth's top edge and made the lower half of the stage look like a
   different page. The blur keeps the waveforms legible over the moving rings. */
.booth{position:relative;width:100vw;margin-left:calc(50% - 50vw);border-top:1px solid var(--line2);border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,color-mix(in srgb,var(--violet) 8%,color-mix(in srgb,var(--card) 82%,transparent)),
    color-mix(in srgb,var(--card) 82%,transparent) 70%);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.booth-in{max-width:1080px;margin:0 auto;padding:0 22px 28px}
.booth-h{display:flex;align-items:center;gap:11px;padding:11px 0;flex-wrap:wrap;border-bottom:1px solid color-mix(in srgb,var(--signal-d) 16%,transparent)}
.booth-h .who{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--signal-d);display:flex;align-items:center;gap:8px}
.booth-h .bead{width:7px;height:7px;border-radius:50%;background:var(--signal);animation:lbpulse 2.4s ease-in-out infinite}
.booth-st{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line2);
  border-radius:999px;padding:3px 10px;color:var(--dim);background:color-mix(in srgb,var(--card) 70%,transparent)}
.booth-st.hot{color:var(--signal-d);border-color:color-mix(in srgb,var(--signal-d) 45%,transparent);background:color-mix(in srgb,var(--signal) 16%,var(--card))}
.booth-clock{font-family:var(--mono);font-size:11px;color:var(--dim);margin-left:auto}

/* the two-lane timeline. Waveforms are the REAL analysed envelope (/api/peaks) — when a record has
   none the lane renders flat and unlabelled rather than inventing a shape. */
/* Room for the tag and the marker pills above lane 1 and the tags above lane 2. The tags sit
   22px above their lane (clear of the dotted markers, which reach 5px above it), so the top
   padding has to hold a tag AND the marker pills, with air above them — 22px put "on air" and
   "mix-out" hard against the booth header's rule. The gutter between lanes is the same generous
   30px+ for the same reason: the crossfade label used to hang BELOW lane 1 at the height of
   lane 2's tag, so the two collided whenever the blend sat near the start of the lane. */
.tl{position:relative;padding:34px 0 8px}
.tl-lane{position:relative;height:62px}
.tl-lane + .tl-lane{margin-top:34px}
.tl-lane canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.tl-tag{position:absolute;left:0;top:-22px;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.tl-tag a{color:var(--ink)}.tl-tag a:hover{color:var(--signal-d)}
.tl-tag.r{left:auto;right:0;text-align:right}
#tlPrevTag:not([hidden])~.tl-tag.r,#tlPrevTag:not([hidden]){max-width:48%}
.tl-mk{position:absolute;top:-5px;bottom:-5px;width:1px;z-index:3;pointer-events:none}
.tl-mk.head{background:var(--signal-d);width:2px;box-shadow:0 0 0 3px color-mix(in srgb,var(--signal) 16%,transparent)}
.tl-mk.out{background:repeating-linear-gradient(180deg,var(--signal-d) 0 4px,transparent 4px 8px)}
.tl-mk.in{background:repeating-linear-gradient(180deg,var(--dim) 0 4px,transparent 4px 8px)}
.tl-mk span{position:absolute;top:-15px;transform:translateX(-50%);white-space:nowrap;font-family:var(--mono);font-size:9px;
  letter-spacing:.12em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:var(--card);border:1px solid var(--line2);color:var(--dim)}
.tl-mk.out span{left:auto;right:-4px;transform:none;color:var(--signal-d);border-color:color-mix(in srgb,var(--signal-d) 40%,transparent);background:color-mix(in srgb,var(--signal) 14%,var(--card))}
.tl-togo{position:absolute;top:0;bottom:0;z-index:1;border-radius:4px;pointer-events:none;
  background:linear-gradient(90deg,color-mix(in srgb,var(--signal) 4%,transparent),color-mix(in srgb,var(--signal) 15%,transparent))}
/* anchored to the band's LEFT edge, beside the playhead. Right-anchored it sat on top of the
   crossfade label, which is centred in a region that ends at the very same mix-out point. */
.tl-togo b{position:absolute;top:50%;left:8px;transform:translateY(-50%);font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--signal-d);background:color-mix(in srgb,var(--card) 90%,transparent);padding:3px 8px;
  border-radius:999px;border:1px solid color-mix(in srgb,var(--signal-d) 30%,transparent);font-weight:500}
.tl-xf{position:absolute;top:-5px;bottom:-5px;z-index:2;pointer-events:none;border-left:1px solid color-mix(in srgb,var(--signal-d) 42%,transparent);
  border-right:1px solid color-mix(in srgb,var(--signal-d) 42%,transparent);background:color-mix(in srgb,var(--signal) 9%,transparent);--p:0%}
.tl-xf::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--p);background:color-mix(in srgb,var(--signal) 22%,transparent);transition:width .25s linear}
.tl-xf.run{border-color:color-mix(in srgb,var(--signal-d) 70%,transparent)}
/* INSIDE the region, not below it — the gutter belongs to the next lane's tag */
.tl-xf b{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;font-family:var(--mono);font-size:9px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--signal-d);font-weight:500;
  background:color-mix(in srgb,var(--card) 88%,transparent);padding:2px 7px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--signal-d) 26%,transparent)}
/* the evidence row: the measured facts behind the move, each one a link you can go and check */
.booth-ev{display:flex;gap:8px;flex-wrap:wrap;padding:16px 0 20px}
.booth-ev .e{font-family:var(--mono);font-size:11px;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line2);border-radius:8px;padding:6px 10px;background:color-mix(in srgb,var(--card) 78%,transparent);color:var(--dim)}
.booth-ev .e b{font-weight:500;color:var(--dim);letter-spacing:.1em;text-transform:uppercase;font-size:9.5px}
.booth-ev .e a{color:var(--ink)}.booth-ev .e a:hover{color:var(--signal-d)}
.booth-ev .e .ar{color:var(--signal-d)}
.booth-ev .e.hold{border-color:color-mix(in srgb,var(--signal-d) 38%,transparent);background:color-mix(in srgb,var(--signal) 12%,var(--card));color:var(--signal-d)}
@media(max-width:680px){.tl-lane{height:48px}.booth-clock{margin-left:0;width:100%}}
.stage-kick{font-family:var(--mono);font-size:12px;letter-spacing:.15em;color:var(--signal-d);display:flex;align-items:center;gap:8px;margin-bottom:14px}
.stage-kick .dot{width:8px;height:8px;border-radius:50%;background:var(--signal);box-shadow:0 0 10px var(--signal);animation:lbpulse 2.4s ease-in-out infinite}
.stage-now{font-family:var(--grotesk);font-size:clamp(34px,6.2vw,62px);font-weight:800;letter-spacing:-.03em;line-height:1.02;margin:0 0 8px;color:var(--ink);overflow-wrap:anywhere;word-break:break-word;max-width:100%;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.stage-now a{color:inherit;cursor:pointer}.stage-now a:hover{color:var(--signal-d)}
.stage-byrow{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
/* a container of per-artist links — each name is its own destination, never one link over all of them */
.stage-by{font-size:18px;color:var(--dim);margin:0}
.stage-by a{color:var(--dim)}.stage-by a:hover{color:var(--ink)}
/* THE REASONING — the booth talking, so it is VIOLET and set at headline scale. Green is reserved
   for audio (live, on air, saved); violet is reserved for thinking. Keeping the two apart is what
   lets someone tell at a glance whether a thing is a sound or a decision. */
.stage-reasonwrap{padding:4px 0 0;margin-top:2px}
.stage-reason-k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--violet-d);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.stage-reason-k::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--violet);animation:lbpulse 2.4s ease-in-out infinite}
.stage-reason-box{position:relative;padding-bottom:4px}
.stage-reason,.stage-reason-ghost{font-size:clamp(19px,2.1vw,27px);line-height:1.28;letter-spacing:-.02em;max-width:74ch}
.stage-reason .lit{color:var(--violet-d);font-weight:700}
.stage-reason-ghost{visibility:hidden;min-height:1.4em}
/* reserve the typing-cursor's width in the (invisible) sizing ghost too, so the box always reserves
   the SAME height as the visible line+cursor — otherwise a near-full last line wraps an extra line
   only in the visible copy and overflows into the panel below. */
.stage-reason-ghost::after{content:"▌";margin-left:1px}
.stage-reason-box .stage-reason{position:absolute;inset:0;color:var(--ink)}
.stage.typing .stage-reason::after{content:"▌";color:var(--violet);margin-left:1px;animation:lbcar 1.05s step-end infinite}
.stage-vitals{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;min-height:30px}
.stage-vitals a,.stage-vitals span{font-family:var(--mono);font-size:11px;color:var(--dim);border:1px solid var(--line2);border-radius:8px;padding:6px 10px;transition:all .14s ease}
.stage-vitals a:hover{border-color:var(--signal);color:var(--signal-d)}
.stage-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.stage-play{display:inline-flex;align-items:center;gap:9px;font-family:var(--grotesk);font-weight:700;font-size:16px;background:var(--signal);color:var(--ink);border:0;border-radius:999px;padding:13px 28px;cursor:pointer;transition:transform .14s ease,box-shadow .14s ease;box-shadow:0 6px 22px color-mix(in srgb,var(--signal) 45%,transparent)}
.stage-play .sp-i{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--signal);flex:none}
.stage-play .sp-i svg{margin-left:1px}
.stage-play:hover{transform:translateY(-1px);box-shadow:0 9px 28px color-mix(in srgb,var(--signal) 55%,transparent)}
.stage-mix{font-family:var(--mono);font-size:12px;color:var(--dim);margin:8px 0 16px}
.stage-mix b{color:var(--signal-d)}
/* the steer bar, in the booth's voice: one rounded field with a violet prompt caret and a round
   send key — you are addressing the thing that is reasoning above it, not filling in a form */
.stage-steer{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:nowrap}
.stage-steer .sf{flex:1;min-width:180px;display:flex;align-items:center;gap:10px;border:1px solid var(--line2);
  border-radius:999px;background:var(--card);padding:11px 16px;transition:border-color .16s ease}
.stage-steer .sf:focus-within{border-color:color-mix(in srgb,var(--violet) 46%,transparent)}
.stage-steer .sf .pr{font-family:var(--mono);font-size:12px;color:var(--violet-d);flex:none}
.stage-steer input{flex:1;min-width:0;border:0;background:transparent;outline:0;font-family:var(--grotesk);font-size:14.5px;color:var(--ink)}
.stage-steer input::placeholder{color:var(--dim2)}
.stage-steer button{width:38px;height:38px;flex:0 0 38px;border-radius:50%;border:1px solid var(--line3);background:var(--ink);
  color:var(--paper);display:grid;place-items:center;font-size:14px;cursor:pointer;transition:transform .16s ease}
.stage-steer button:hover{transform:translateY(-1px)}
.steer-ok{font-family:var(--mono);font-size:11px;color:var(--signal-d);flex:0 0 auto}
.steer-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.schip{font-family:var(--mono);font-size:11px;color:var(--violet-ink);border:1px dashed color-mix(in srgb,var(--violet) 34%,transparent);
  background:color-mix(in srgb,var(--violet) 7%,var(--card));border-radius:999px;padding:6px 12px;cursor:pointer;transition:all .14s ease}
.schip:hover{border-style:solid;border-color:color-mix(in srgb,var(--violet) 55%,transparent);color:var(--violet-d)}
/* the "Steer the Ninja" eyebrow that used to sit above this is gone: the field's own placeholder
   ("Tell the Ninja where to take it…") already says it, and said it better. */
.steer-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
/* THE ROOM IS STEERING — the listeners' pull on the booth, in the booth's language: a translucent
   card, a violet kicker with the thinking bead, violet meters. It used to be a green-barred block
   under a hairline, which was the old page's reading of it; steers are decisions the room is
   making, so they read in the colour of decisions, beside the reasoning they act on. */
.steer-room{margin-top:22px;max-width:560px;border:1px solid color-mix(in srgb,var(--violet) 26%,transparent);border-radius:14px;
  padding:16px 18px 14px;background:color-mix(in srgb,var(--violet) 5%,color-mix(in srgb,var(--card) 80%,transparent));
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.steer-room .sr-h{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--violet-d);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.steer-room .sr-h::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--violet);animation:lbpulse 2.4s ease-in-out infinite}
.steer-room .sr-h span{color:var(--violet-d);font-weight:700}
.sr-bars{display:flex;flex-direction:column;gap:10px}
.sr-row{display:grid;grid-template-columns:1fr auto;gap:5px 10px;align-items:center}
.sr-lab{font-size:14.5px;font-weight:650;color:var(--ink);letter-spacing:-.01em}
.sr-lab .sr-from{font-family:var(--mono);font-size:10.5px;color:var(--dim);font-weight:400;margin-left:8px}
.sr-pct{font-family:var(--mono);font-size:11.5px;color:var(--violet-d);font-weight:700;justify-self:end}
.sr-track{grid-column:1/-1;height:5px;border-radius:4px;background:color-mix(in srgb,var(--violet) 12%,transparent);overflow:hidden}
.sr-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--violet-d),var(--violet));transition:width .6s cubic-bezier(.2,.7,.2,1)}
.sr-row.lead .sr-fill{box-shadow:0 0 10px color-mix(in srgb,var(--violet) 55%,transparent)}
.schip{font-family:var(--mono);font-size:11.5px;background:transparent;border:1px solid var(--line);border-radius:999px;padding:6px 12px;color:var(--dim);cursor:pointer;transition:all .14s ease}
.schip:hover{border-color:var(--signal);color:var(--signal-d)}
/* the kicker row: "now playing", and the chart rank when there is one */
.stage-status{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.stage-status .kick{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);display:inline-flex;align-items:center}
.stage-status .chip.k{font-family:var(--mono);font-size:11px;color:var(--signal-ink);border:1px solid color-mix(in srgb,var(--signal-d) 35%,transparent);
  background:color-mix(in srgb,var(--signal) 16%,var(--card));border-radius:999px;padding:4px 10px}
.stage-status .chip.k:hover{border-color:var(--signal-d)}
.booth-room{font-family:var(--mono);font-size:11px;color:var(--dim)}
/* a DJ mix with no analysed waveform: the lanes and the evidence stand down for the mix itself */
.booth.mixmode .tl,.booth.mixmode .booth-ev{display:none}
.booth-mix{padding:20px 0 22px;border-bottom:1px solid color-mix(in srgb,var(--signal-d) 16%,transparent)}
.booth-mix .bm-k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--signal-d)}
.booth-mix .bm-t{font-family:var(--grotesk);font-size:24px;font-weight:800;letter-spacing:-.015em;line-height:1.15;margin-top:8px}
.booth-mix .bm-t a{color:var(--ink)}.booth-mix .bm-t a:hover{color:var(--signal-d)}
.booth-mix .bm-by{font-size:15px;margin-top:4px}.booth-mix .bm-by a{color:var(--ink);border-bottom:1px solid var(--line2)}
.booth-mix .bm-m{font-family:var(--mono);font-size:11px;color:var(--dim);margin-top:10px}
.booth-room:empty{display:none}
.stage-status .st-dot{width:7px;height:7px;border-radius:50%;background:var(--signal);box-shadow:0 0 8px var(--signal);display:inline-block;vertical-align:middle;margin-right:8px;animation:lbpulse 2.4s ease-in-out infinite}
.stage-status .st-sep{color:var(--signal-d);margin:0 3px}
.home-live{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;margin-top:16px;align-items:start}
.hl-head{display:flex;flex-direction:column;gap:3px;padding-bottom:12px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.hl-eye{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--signal-d)}
.hl-sub{font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.02em}
.hl-next .liverow{padding:6px 0;align-items:flex-start}
.hl-next .lr-a{white-space:normal}
.mempeek .pvrow,.mempeek .liverow{border-bottom:1px solid var(--line)}
.mempeek .pvrow:last-child{border-bottom:0}
.mem-open{margin-top:14px;width:100%;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink);background:transparent;border:1px solid var(--line2);border-radius:10px;padding:11px 14px;cursor:pointer;transition:all .15s ease;display:flex;align-items:center;justify-content:center;gap:8px}
.mem-open:hover{border-color:var(--signal);color:var(--signal-d);background:color-mix(in srgb,var(--signal) 5%,transparent)}
.mem-open span{color:var(--signal-d)}
.pv-when{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--signal-d);margin-top:6px}
.mem-in{animation:memin .5s cubic-bezier(.2,.7,.2,1)}
@keyframes memin{0%{opacity:0;transform:translateY(-10px)}100%{opacity:1;transform:translateY(0)}}
/* memory slide-out drawer */
.memdrawer{position:fixed;top:0;right:0;height:100dvh;width:min(440px,92vw);background:var(--paper);border-left:1px solid var(--line2);box-shadow:-24px 0 60px rgba(10,11,10,.18);z-index:60;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .34s cubic-bezier(.4,0,.1,1);visibility:hidden}
.memdrawer.open{transform:translateX(0);visibility:visible}
.memdrawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 22px 16px;border-bottom:1px solid var(--line)}
.memdrawer-head .hl-eye{display:block}.memdrawer-head .hl-sub{display:block;margin-top:3px}
.memdrawer-x{background:none;border:0;font-size:18px;line-height:1;color:var(--dim);cursor:pointer;padding:4px}
.memdrawer-x:hover{color:var(--ink)}
.memdrawer-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:0 22px 40px}
.memdrawer-body::-webkit-scrollbar{width:7px}
.memdrawer-body::-webkit-scrollbar-thumb{background:var(--line2);border-radius:4px}
.memdrawer-back{position:fixed;inset:0;background:rgba(10,11,10,.34);z-index:59;opacity:0;transition:opacity .3s ease}
.memdrawer-back.show{opacity:1}
@media(max-width:680px){.memdrawer{width:100vw}}
.liverow{display:flex;gap:13px;align-items:flex-start;padding:11px 0}
.lr-art{flex:none;width:52px;height:52px;border-radius:10px;background:var(--paper2) center/cover no-repeat;border:1px solid var(--line);display:block;transition:border-color .14s ease}
.liverow:hover .lr-art{border-color:var(--signal)}
.lr-main{min-width:0;flex:1}
.lr-t{font-weight:650;font-size:15px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.lr-t:hover{color:var(--signal-d)}
.lr-a{font-family:var(--mono);font-size:11.5px;color:var(--dim);margin-top:4px;line-height:1.55}
.lr-a a{color:var(--dim)}.lr-a a:hover{color:var(--signal-d)}
.lr-r{color:var(--ink);font-size:13.5px;line-height:1.5;margin-top:7px}
.upnext .lr-r{min-height:1.4em}
.upnext .lr-r:after{content:'▌';color:var(--signal-d);margin-left:1px;animation:lbpulse 1s steps(2,end) infinite}
.lr-when{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--signal-d);margin-top:6px;text-transform:uppercase}
.upnext .lr-art{width:62px;height:62px}
.upnext .lr-t{font-family:var(--grotesk);font-size:19px;font-weight:750;letter-spacing:-.01em}
.trail .liverow{padding:8px 0;border-bottom:1px solid var(--line)}
.trail .lr-art{width:40px;height:40px;border-radius:8px}
.trail .lr-t{font-size:14px}
.trail .lr-r{display:none}
.live-empty{font-family:var(--mono);font-size:12px;color:var(--dim);padding:16px 0;opacity:.75}
.acct{cursor:pointer}
.home-outro{border-top:1px solid var(--line);margin-top:34px;padding:40px 0 10px;text-align:center}
.outro-h{font-family:var(--grotesk);font-size:clamp(26px,4.4vw,40px);font-weight:800;letter-spacing:-.025em;margin:0 0 8px}
.outro-p{color:var(--dim);font-size:16px;margin:0 0 22px}
.outro-cta{margin-bottom:20px}
.outro-news{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.outro-news input{font-family:var(--mono);font-size:13px;background:var(--paper);border:1px solid var(--line2);border-radius:999px;padding:11px 16px;min-width:240px;color:var(--ink);outline:none}
.outro-news input:focus{border-color:var(--signal)}
.outro-news button{font-family:var(--mono);font-size:12.5px;font-weight:700;background:var(--signal);color:var(--ink);border:0;border-radius:999px;padding:11px 18px;cursor:pointer;transition:box-shadow .14s ease}
.outro-news button:hover{box-shadow:0 6px 20px color-mix(in srgb,var(--signal) 45%,transparent)}
.outro-social{display:flex;gap:18px;justify-content:center;font-family:var(--mono);font-size:12px}
.outro-social a{color:var(--dim);border-bottom:1px solid var(--line2)}
.outro-social a:hover{color:var(--signal-d);border-color:var(--signal)}
@media(max-width:680px){.home-live{grid-template-columns:1fr;gap:30px}.stage-status{font-size:9.5px}}
@media(max-width:680px){.stage-in{grid-template-columns:1fr;padding:28px 18px 36px;gap:22px;justify-items:start}}
.sec-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:22px;margin:34px 0 14px}
/* one spacing at this join, not two: the stage's foot and this heading's head used to add up to 120px */
.after-stage .sec-row{border-top:0;padding-top:0;margin-top:34px}
.sec-row .sec{border-top:0;padding-top:0;margin:0}
.sec-more{font-family:var(--mono);font-size:12px;color:var(--signal-d);white-space:nowrap}
.sec-more:hover{color:var(--ink)}
.fy-wrap{position:relative;min-height:230px}
.fy-wrap .picks,.fy-wrap .list{filter:blur(8px);opacity:.5;pointer-events:none;user-select:none;transition:filter .35s ease,opacity .35s ease}
.fy-wrap.authed .picks,.fy-wrap.authed .list{filter:none;opacity:1;pointer-events:auto;user-select:auto}
.home-browse .browse-hint{font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--dim)}
.home-browse .browse-hint b{color:var(--signal-d)}
.browse{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:6px}
.browse-g{border:1px solid var(--line);border-radius:14px;padding:16px 16px 18px;background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 2%,var(--paper)),var(--paper));transition:border-color .15s ease}
.browse-g:hover{border-color:var(--line2)}
.browse-k{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin:0 0 13px}
.browse-k .bk-i{font-size:10px;color:var(--signal-d);letter-spacing:.05em}
.browse-k .bk-c{margin-left:auto;color:var(--dim);font-size:10px;letter-spacing:.02em;background:color-mix(in srgb,var(--ink) 5%,transparent);border-radius:6px;padding:2px 7px}
.fchips{display:flex;flex-wrap:wrap;gap:7px}
.fch{display:inline-flex;align-items:baseline;gap:6px;font-family:var(--mono);font-size:12px;border:1px solid var(--line);border-radius:8px;padding:6px 10px;color:var(--ink);background:var(--paper);transition:border-color .13s ease,background .13s ease,color .13s ease}
.fch:hover{border-color:var(--signal);color:var(--signal-d);background:color-mix(in srgb,var(--signal) 7%,var(--paper))}
.fch .fch-s{font-size:9px;letter-spacing:.08em;color:var(--dim);text-transform:uppercase}
.fch:hover .fch-s{color:var(--signal-d)}
.fch .fch-n{font-size:9.5px;color:var(--dim);font-variant-numeric:tabular-nums}
@media(max-width:680px){.abouts{grid-template-columns:1fr}.browse{grid-template-columns:1fr}}
.pvmore{height:30px;display:flex;align-items:center;justify-content:center}
.pvmore::after{content:'';width:18px;height:18px;border:2px solid var(--line2);border-top-color:var(--signal-d);border-radius:50%;animation:pvspin .7s linear infinite}
@keyframes pvspin{to{transform:rotate(360deg)}}
.lm{display:none;position:fixed;inset:0;background:rgba(10,11,10,.55);z-index:50;align-items:center;justify-content:center;padding:22px}
.lm.show{display:flex}
.lm-card{background:var(--paper);border:1px solid var(--line2);border-radius:18px;max-width:380px;width:100%;padding:30px 26px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.3)}
.lm-wm{font-family:var(--grotesk);font-weight:800;letter-spacing:-.02em;font-size:18px;margin-bottom:18px}.lm-wm .sl{color:var(--signal-d)}
.lm-k{font-family:var(--grotesk);font-size:23px;font-weight:800;letter-spacing:-.02em}
.lm-t{color:var(--dim);font-size:14.5px;line-height:1.55;margin:8px 0 20px}
.sm-what{font-family:var(--mono);color:var(--signal-d);font-size:14px;font-weight:600;margin:10px 0 2px;word-break:break-word}
.lm-btn{display:block;width:100%;font-family:'Helvetica Neue',Arial,sans-serif;font-size:15px;font-weight:650;cursor:pointer;border:1px solid var(--line2);border-radius:999px;padding:12px;margin-bottom:10px;background:var(--paper);color:var(--ink);transition:all .14s ease}
.lm-btn:hover{border-color:var(--ink);transform:translateY(-1px)}
.lm-x{background:none;border:0;color:var(--dim);font-size:13px;cursor:pointer;margin-top:4px}
.livebar{position:fixed;left:0;right:0;bottom:0;z-index:40;padding-bottom:env(safe-area-inset-bottom,0);background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:saturate(1.3) blur(14px);border-top:1px solid var(--line);box-shadow:0 -10px 34px rgba(22,23,15,.07)}
.lb-in{max-width:920px;margin:0 auto;padding:9px 22px;display:flex;align-items:center;gap:13px}
.lb-play{flex:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line2);background:var(--paper);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .14s ease}
.lb-play:hover{border-color:var(--signal);color:var(--signal-d);transform:scale(1.04)}
.livebar.playing .lb-play{border-color:var(--signal);color:var(--signal-d);background:color-mix(in srgb,var(--signal) 12%,var(--paper))}
.lb-live{flex:none;display:flex;align-items:center;gap:7px}
.lb-dot{width:7px;height:7px;border-radius:50%;background:var(--signal);box-shadow:0 0 8px var(--signal);animation:lbpulse 2.4s ease-in-out infinite}
@keyframes lbpulse{0%,100%{opacity:1}50%{opacity:.4}}
.lb-eq{display:none;align-items:flex-end;gap:2px;height:15px}
.livebar.playing .lb-eq{display:flex}
.livebar.playing .lb-dot{display:none}
.lb-eq i{width:3px;background:var(--signal-d);border-radius:1px;height:5px;animation:lbeq .9s ease-in-out infinite}
.lb-eq i:nth-child(2){animation-delay:.18s}.lb-eq i:nth-child(3){animation-delay:.36s}.lb-eq i:nth-child(4){animation-delay:.54s}
@keyframes lbeq{0%,100%{height:4px}50%{height:15px}}
.lb-mid{flex:1;min-width:0}
.lb-now{display:flex;align-items:baseline;gap:7px;font-size:14px;min-width:0}
.lb-now .lb-tt{font-weight:650;cursor:pointer;min-width:0;flex:0 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lb-now .lb-tt:hover{color:var(--signal-d)}
.lb-now .lb-a{color:var(--dim);flex:none;max-width:42%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lb-now .lb-a a{color:var(--dim)}.lb-now .lb-a a:hover{color:var(--signal-d)}
.lb-reason{font-family:var(--mono);font-size:10.5px;color:var(--dim);white-space:nowrap;overflow:hidden;margin-top:1px}
.livebar.typing .lb-reason::after{content:"▌";color:var(--signal-d);margin-left:1px;animation:lbcar 1.05s step-end infinite}
@keyframes lbcar{50%{opacity:0}}
/* newsletter opt-in: floating one-tap prompt + favourites-page toggle */
.nl-toast{position:fixed;left:50%;bottom:84px;transform:translate(-50%,16px);z-index:60;width:min(440px,calc(100vw - 28px));background:var(--paper);border:1px solid var(--line2);border-radius:16px;box-shadow:0 14px 40px rgba(20,22,15,.22);padding:16px 18px;opacity:0;transition:opacity .28s ease,transform .28s ease;pointer-events:none}
.nl-toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.nl-t-txt{font-size:14px;line-height:1.5;color:var(--ink)}.nl-t-txt b{font-weight:700}
.nl-t-act{display:flex;gap:10px;align-items:center;margin-top:13px}
.nl-yes{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink);background:var(--signal);border:none;border-radius:999px;padding:9px 18px;cursor:pointer;transition:filter .14s ease}.nl-yes:hover{filter:brightness(1.05)}
.nl-no{font-family:var(--mono);font-size:12px;color:var(--dim);background:none;border:none;cursor:pointer;padding:9px 6px}.nl-no:hover{color:var(--ink)}
.nl-ok{font-family:var(--mono);font-size:12px;color:var(--signal-d)}
.nlbox{margin:14px 0 22px}
.nl-row{display:flex;align-items:center;gap:16px;justify-content:space-between;border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--paper)}
.nl-copy{display:flex;flex-direction:column;gap:3px;min-width:0}.nl-copy b{font-size:14px;font-weight:700;color:var(--ink)}.nl-copy span{font-size:13px;color:var(--dim);line-height:1.45}
.nl-switch{flex:none;width:46px;height:28px;border-radius:999px;border:1px solid var(--line2);background:var(--paper2);position:relative;cursor:pointer;transition:background .16s ease,border-color .16s ease}
.nl-switch.on{background:var(--signal);border-color:var(--signal)}
.nl-knob{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(20,22,15,.3);transition:transform .16s ease}
.nl-switch.on .nl-knob{transform:translateX(18px)}
/* your-mix deck — the FOCUS PLAYER + BOOTH hybrid: a centered hero with one primary action,
   the Ninja's reasoning as his own bubble, one composer for all steering. */
.deckwrap{max-width:1060px}

/* the full-bleed signal field sits BEHIND the whole hero; everything floats above it */

/* the double-tap SAVE burst */

@keyframes dkheart{12%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}30%{transform:translate(-50%,-50%) scale(.96)}44%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}100%{opacity:0;transform:translate(-50%,-62%) scale(1)}}

.dk-pill{font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;color:var(--signal-d);border:1px solid var(--line);border-radius:999px;padding:4px 10px;transition:border-color .14s,color .14s;white-space:nowrap}
.dk-pill:hover{border-color:var(--signal);color:var(--ink)}

/* THE BOOTH (legacy deck card) — the Ninja's reasoning as his own message bubble */

/* the next record's reasoning now lives in Up next */

/* transport — voice · PLAY · skip · ··· , centered under the artwork */

.dk-btn{font-family:var(--mono);font-size:13px;border:1px solid var(--line2);background:var(--paper);color:var(--ink);border-radius:999px;padding:11px 18px;cursor:pointer;transition:all .14s;display:inline-flex;align-items:center;gap:7px}
.dk-btn:hover{border-color:var(--signal)}
.dk-play{background:var(--signal);border-color:var(--signal);font-weight:700;min-width:172px;justify-content:center;font-size:14px;padding:13px 22px;box-shadow:0 8px 22px rgba(25,224,124,.3)}
.dk-play:hover{box-shadow:0 10px 26px rgba(25,224,124,.38)}
.dk-rnd{flex:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--dim);font-size:15px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .14s;padding:0}
.dk-rnd:hover{color:var(--ink);border-color:var(--signal)}
.dk-voice.on{color:var(--signal-d);border-color:var(--signal)}
.dk-air{display:none}
   /* only meaningful inside the native shell */

/* the engage bar (Save · Follow · reactions · Share) is secondary — hairline-separated, lighter */

/* THE COMPOSER — one place to talk to the Ninja; nudge (fades) vs hold (stays) is one switch */

/* our display:flex outranks the UA's [hidden] rule — restate it, or the nudge/hold switch
   hides nothing and both rows render at once (the "still looks messy" bug) */

.dk-chip{flex:none;font-family:var(--mono);font-size:11.5px;color:var(--signal-d);background:var(--paper);border:1px solid var(--line2);border-radius:999px;padding:7px 14px;cursor:pointer;transition:all .14s;white-space:nowrap}
.dk-chip:hover{border-color:var(--signal);color:var(--ink);transform:translateY(-1px)}
/* lane chips are the stronger move (an immediate switch) — signal-tinted, a touch bolder */

/* THE BOOTH LINE — one chat input between you and the Ninja; everything is language */

/* THE SESSION — the membership as one conversation: picks, whys, steers, memory */

.feed{display:flex;flex-direction:column;gap:13px;margin:0 0 40px}
.smsg{max-width:680px;border-radius:16px;padding:13px 17px;font-size:14px;line-height:1.52;overflow-wrap:break-word}
.smsg.wide{align-self:stretch;max-width:none}
.sninja{align-self:flex-start;background:color-mix(in srgb,var(--signal) 3%,var(--paper));border:1px solid var(--line);border-top-left-radius:5px}
.swho{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--signal-d);font-weight:700;margin-bottom:5px;text-transform:uppercase}
.swho em{font-style:normal;color:var(--dim);font-weight:400;letter-spacing:.04em;text-transform:none}
.syou{align-self:flex-end;background:var(--ink);color:var(--paper);border-bottom-right-radius:5px;font-size:13.5px;font-family:var(--mono)}
.sstamp{align-self:center;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--dim);margin:2px 0}
.tw{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--line2);border-radius:15px;background:var(--paper);padding:12px 15px;margin-top:10px}
.tw+.tw{margin-top:8px}
.tw.next{border:1.5px solid color-mix(in srgb,var(--signal) 45%,var(--line2));background:color-mix(in srgb,var(--signal) 5%,var(--paper))}
.tw.next .sart{width:104px;height:104px;border-radius:14px}
.tw.next .smeta>b{font-size:17px}
.tw.dim{opacity:.82}
.tw.dim .sart{width:60px;height:60px}
.sart{flex:none;width:80px;height:80px;border-radius:12px;background:#0a0b0a center/cover no-repeat;border:1px solid var(--line);box-shadow:0 8px 18px -10px rgba(20,22,15,.4);display:block}
.runN{flex:none;font-family:var(--mono);font-size:10px;font-weight:700;color:var(--dim);width:18px;padding-top:4px}
.smeta{flex:1;min-width:0}
.smeta>b{display:block;font-size:15.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.smeta>b a{color:var(--ink)}.smeta>b a:hover{color:var(--signal-d)}
.smeta>.by{display:block;font-size:12px;color:var(--dim);margin-top:1px}
.smeta>.by a{color:var(--dim)}.smeta>.by a:hover{color:var(--signal-d)}
.twpills{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.twpills .dk-pill{font-size:10px;padding:3px 9px}
.twpills .st{font-family:var(--mono);font-size:10px;color:var(--dim);padding:3px 2px;white-space:nowrap}
.smeta q{display:block;quotes:none;font-size:12.5px;font-style:italic;color:var(--ink);opacity:.85;margin-top:6px;line-height:1.45}
.why{font-family:var(--mono);font-size:11px;color:var(--signal-d);margin-top:7px;line-height:1.45}
.why::before{content:'↳  '}
.sctl{flex:none;display:flex;gap:6px;margin-top:3px}
.cbtn{width:30px;height:30px;border-radius:9px;border:1px solid var(--line2);background:var(--paper);color:var(--dim);cursor:pointer;font-size:13px;line-height:1}
.cbtn:hover{border-color:var(--signal);color:var(--ink)}
.cbtn.on{color:var(--signal-d);border-color:var(--signal);background:rgba(25,224,124,.12)}
@media(max-width:680px){.tw{gap:12px}.sart{width:64px;height:64px}.tw.next .sart{width:84px;height:84px}.smsg{max-width:92%}}

.dk-more{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;text-transform:none;color:var(--dim);background:none;border:0;cursor:pointer;padding:0}
.dk-more:hover{color:var(--signal-d)}
.dq-list{display:flex;flex-direction:column;gap:4px}
.dq-row{display:flex;align-items:center;gap:11px;border-radius:11px;padding:7px 8px;transition:background .14s}
.dq-row:hover{background:rgba(22,23,15,.04)}
.dq-art{flex:none;width:42px;height:42px;border-radius:8px;background:#0a0b0a center/cover no-repeat;border:1px solid var(--line);display:block}
.dq-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.dq-t{font-size:14px;font-weight:650;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dq-t:hover{color:var(--signal-d)}
.dq-a{font-size:11.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dq-a a{color:var(--dim)}.dq-a a:hover{color:var(--signal-d)}
.dq-ctl{flex:none;display:flex;gap:4px;opacity:.55;transition:opacity .14s}
.dq-row:hover .dq-ctl{opacity:1}
.dq-b{width:28px;height:28px;border:1px solid var(--line2);background:var(--paper);border-radius:8px;color:var(--dim);cursor:pointer;font-size:12px;line-height:1}
.dq-b:hover{border-color:var(--signal);color:var(--ink)}
.dq-add{color:var(--signal-d);font-size:15px}
.dq-favb{color:var(--dim);font-size:14px}
.dq-favb:hover{color:var(--signal-d);border-color:var(--signal)}
.dq-favb.on{color:var(--signal-d);border-color:var(--signal);background:rgba(25,224,124,.1)}
.dq-row:hover .dq-favb,.dq-favb.on{opacity:1}
.dq-empty{font-size:13px;color:var(--dim);padding:10px 2px}

@media(max-width:680px){.dk-play{min-width:150px}}
.lb-mix{flex:none;font-family:var(--mono);font-size:11px;color:var(--dim);white-space:nowrap}
.lb-mix b{color:var(--signal-d)}
.lb-full{flex:none;font-family:var(--mono);font-size:11px;color:var(--signal-d);white-space:nowrap;border:1px solid var(--line2);border-radius:999px;padding:6px 12px;transition:all .14s ease}
.lb-full:hover{border-color:var(--signal)}
.lb-clip{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--line2);background:none;color:var(--signal-d);font-size:13px;cursor:pointer;transition:all .14s ease}
.lb-clip:hover{border-color:var(--signal);background:color-mix(in srgb,var(--signal) 10%,transparent)}
/* ---- /mix in the stage language ------------------------------------------------------ */
.mx-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:108px;height:108px;border-radius:50%;background:rgba(8,9,18,.4);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease;color:#fff}
.mx-play:hover{background:rgba(8,9,18,.6);border-color:var(--signal);transform:translate(-50%,-50%) scale(1.04)}
.mx-play .orb-play-i svg{width:18px;height:22px;fill:#fff;display:block}
.mx-play .orb-play-t{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:rgba(255,255,255,.9);max-width:90px;text-align:center;line-height:1.3}
.mixstage.is-live .mx-play{border-color:var(--signal)}
.mixstage.is-live:not(.is-paused) .mx-play{opacity:0}
.mixstage.is-live:not(.is-paused) .stage-viz:hover .mx-play{opacity:1}
.mixstage .stage-viz.deck{background:none}
.mixstage .stage-viz.deck:not(.has-cover) .sleeve{background:linear-gradient(135deg,var(--paper3),var(--paper2))}
@media(max-width:680px){.mx-play{width:88px;height:88px}}
.mx-transport{display:inline-flex;gap:8px;align-items:center;margin-left:2px}
.stage-actions .engage.dk-share,.stage-actions #engage.dk-share{display:inline-flex;margin:0;gap:0}
.mx-transport .dk-rnd{width:40px;height:40px}
.mx-engage{margin-top:12px}
.mx-engage .engage{margin:0}
.mx-engage:empty{display:none}
.steer-lanes{display:contents}
.steer-lanes .dk-chip{font-family:var(--mono);font-size:11.5px;border:1px solid color-mix(in srgb,var(--signal-d) 40%,transparent);color:var(--signal-ink);background:color-mix(in srgb,var(--signal) 8%,transparent);border-radius:999px;padding:6px 12px;cursor:pointer}
.steer-lanes .dk-chip:hover{border-color:var(--signal-d)}
.steer-lanes .dk-chip.on{background:color-mix(in srgb,var(--signal) 22%,var(--card));border-color:var(--signal-d)}
.stage-status .kick .st-dot{background:var(--signal)}
.mixstage.is-paused .stage-status .kick .st-dot{background:var(--dim2);box-shadow:none}
.sec-more.dk-more{background:none;border:0;cursor:pointer;padding:0;font-family:var(--mono);font-size:12px;letter-spacing:0;text-transform:none;color:var(--signal-d);line-height:inherit}
.sec-more.dk-more:hover{color:var(--ink)}
/* THE SESSION — the Ninja's own messages are THINKING, so they wear violet like the reasoning */
.sninja{background:color-mix(in srgb,var(--violet) 4%,var(--paper));border-color:color-mix(in srgb,var(--violet) 18%,var(--line))}
.swho{color:var(--violet-d)}
.why{color:var(--violet-d)}
.tw.next{border-color:color-mix(in srgb,var(--signal) 45%,var(--line2));background:color-mix(in srgb,var(--signal) 5%,var(--paper))}
/* ---- content pages in the stage language ------------------------------------------------ */
.cstage .stage-in{padding-bottom:26px}   /* same top padding and alignment as the live stages: the deck sits at one y on every page */
/* a hub's sigil fills the stage's column; a record's deck is the stage's deck, turning while the
   record plays here (preview or the member's full play — the hero carries .playing either way) */
.cstage .stage-viz{width:260px;height:260px}
.cstage .stage-viz.deck{width:300px;height:240px}
/* the deck's play control is the live stages' (108px): it must cover the whole label, or a rim of
   artwork shows past the blurred disc of the button — the 84px control was the square sleeve's */
.cstage .stage-viz.deck .mx-play,.cstage-hero.pvhero .stage-viz.deck .pv-play{width:108px;height:108px}

.cstage-hero.playing .deck .disc{animation-play-state:running}
.cstage .stage-viz>svg,.cstage .stage-viz .noart{position:absolute;inset:0;width:100%;height:100%}
.cstage .stage-now{font-size:clamp(30px,5vw,52px)}
.cstage .stage-status .kick .st-dot.off{background:var(--dim2);box-shadow:none}
.stage-lede{font-size:17px;line-height:1.5;color:var(--dim);max-width:62ch;margin:0 0 14px}
.stage-lede b{color:var(--ink);font-weight:600}
.stage-lede a{color:var(--ink);border-bottom:1px solid var(--line2)}.stage-lede a:hover{color:var(--signal-d);border-color:var(--signal)}
.cstage .stage-vitals{margin-bottom:14px;min-height:0}
.cstage .showline{margin-bottom:14px}
.cstage .showline a{color:var(--dim);border-bottom:1px solid var(--line2)}.cstage .showline a:hover{color:var(--signal-d);border-color:var(--signal)}
.cstage .stage-actions{margin-top:6px}
.cstage .mx-engage{margin-top:12px}
.cstage .engage{margin:0;gap:8px}
.cstage .eng{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.02em;padding:9px 13px;background:transparent;border-color:var(--line2)}
.cstage .eng b{font-weight:600}
.cstage .eng:hover{border-color:var(--line3);transform:translateY(-1px)}
.cstage .eng.on{border-color:color-mix(in srgb,var(--signal-d) 55%,transparent);background:color-mix(in srgb,var(--signal) 14%,var(--card));color:var(--signal-ink)}
.cstage .rxb{padding:9px 11px}
.cstage .mx-play{width:84px;height:84px;color:#fff;flex-direction:row;gap:0}
.cstage .mx-play svg{width:18px;height:22px;fill:#fff;display:block}
.cstage .pvhero.playing .mx-play{border-color:var(--signal)}
.cstage-hero.pvhero{display:block;margin:0;gap:0}
.cstage-hero.pvhero .pv-play{width:84px;height:84px}
.dk-btn.stage-mix{font-family:var(--mono);font-size:12px;letter-spacing:.04em;height:46px;border-radius:999px;padding:0 20px;font-weight:700}
.dk-btn.stage-q{font-family:var(--mono);font-size:11.5px;height:46px;border-radius:999px;padding:0 16px}
/* the record lane: the booth's lane, holding this one record */
.cbooth{border-bottom:0}
.cbooth .booth-in{padding-bottom:18px}
.rec-tl{padding:14px 0 4px}
.rec-lane{height:62px}
.rec-lane .pv-wave{display:block;position:absolute;inset:0;margin:0}
.rec-lane .pv-wave>svg,.rec-lane .pv-wave .wv{width:100%;height:100%;display:block}
.rec-lane .pv-wave rect{fill:rgba(10,11,10,.22)}
.rec-lane .wv-pos{stroke:var(--signal-d);stroke-width:.6}
.rec-lane .pv-t{position:absolute;left:0;right:0;top:100%;margin-top:5px}
.cbooth .rec-tl{padding-bottom:6px}
.rec-lane .mh-cv{height:62px}
.rec-lane .mh-time{display:none}   /* the booth clock over the lane is the length's one home */
/* the Ninja's words beneath the stage — violet key, prose */
.cstage-reason{position:relative;z-index:2}
.cstage-reason .booth-in{padding:22px 22px 30px}
.cstage-reason .review{font-size:17px;line-height:1.65;margin:0;max-width:72ch}
.cstage-reason .review p{margin:0 0 12px}
.cstage-reason .review p:last-child{margin-bottom:0}
.cstage-reason .stage-reason-k{margin-bottom:12px}
.after-stage .sec-row:first-child{margin-top:30px}
.after-stage .chips{margin:0 0 18px}
.after-stage .chips:last-child{margin-bottom:40px}
@media(max-width:920px){.cstage .stage-viz{width:180px;height:180px}}
@media(max-width:680px){.cstage .stage-viz.deck{width:272px;height:218px}.cstage .stage-viz.deck .mx-play,.cstage-hero.pvhero .stage-viz.deck .pv-play{width:92px;height:92px}}
@media(max-width:680px){.cstage .stage-viz{width:160px;height:160px}.cstage .mx-play,.cstage-hero.pvhero .pv-play{width:72px;height:72px}}
/* ---- the charts ---------------------------------------------------------------------------- */
.ch-tabs{margin:28px 0 6px}
.ch-tabs .chip.on{background:var(--signal);border-color:var(--signal);color:#0b0c07;font-weight:600}
.ch-movers{margin:0 0 6px}
.fch.ch-fch .fch-n{font-family:var(--mono);font-size:10.5px;color:var(--signal-d);font-weight:700;margin-right:8px}
.ch-list{margin-top:4px}
.ch-row{display:flex;gap:14px;align-items:flex-start}
.ch-rank{flex:none;width:46px;text-align:right;padding-top:14px;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.ch-rank b{font-family:var(--mono);font-weight:800;font-size:20px;line-height:1;color:var(--dim);letter-spacing:-.02em}
.ch-row.top10 .ch-rank b{color:var(--ink)}
.ch-row.top3 .ch-rank b{color:var(--signal-d);font-size:24px}
.ch-mv{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.04em}
.ch-mv.up{color:var(--signal-d)}
.ch-mv.dn{color:var(--faint)}
.ch-mv.held{color:var(--faint);font-weight:400}
.ch-mv.new{color:var(--violet-d);text-transform:uppercase;letter-spacing:.12em;font-size:9px}
.ch-rec{flex:1;min-width:0}
@media(max-width:680px){.ch-rank{width:36px}.ch-rank b{font-size:17px}.ch-row.top3 .ch-rank b{font-size:20px}}
/* the Ninja's thread on the front page — the session's shapes, for everyone */
.feed.thread{gap:18px;margin:0 0 8px}
.thread-beat{display:flex;flex-direction:column;gap:8px}
.thread-beat .tw{margin-top:0;padding:12px 14px;gap:14px;align-items:center;border:1px solid var(--line2);border-radius:15px;background:var(--paper);max-width:680px}
.thread-beat .tw.pvrow{border-bottom:1px solid var(--line2)}
.thread-beat .sart-b{flex:none;width:72px;height:72px;border-radius:12px;overflow:hidden;position:relative;border:1px solid var(--line);background:#0a0b0a;padding:0;cursor:pointer}
.thread-beat .sart-b img{width:100%;height:100%;object-fit:cover;display:block}
.thread-beat .sart-b .pv-ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(8,9,18,.28);opacity:0;transition:opacity .15s}
.thread-beat .tw:hover .sart-b .pv-ov,.thread-beat .tw.playing .sart-b .pv-ov{opacity:1}
.thread-beat .smeta>b{font-size:16px}
.thread-beat .smeta>.by{display:block;font-size:13px;color:var(--dim);margin-top:1px}
.thread-beat .smeta>.by a{color:var(--dim)}.thread-beat .smeta>.by a:hover{color:var(--signal-d)}
.thread-beat .pv-chips{margin-top:5px}
.thread-beat .pv-when{font-family:var(--mono);font-size:10.5px;color:var(--dim);margin-top:5px}
.thread-beat .pv-fav{flex:none}
/* ---- THE THREAD / THE SESSION as a set log ---------------------------------------------------
   Not chat bubbles. A spine runs down the left; every entry sits on a node — violet for the Ninja
   thinking, ink for you, green for a record that sounded, hollow green for one that is cued. The
   record is a row (sleeve · title · artists · chips), the reasoning is prose under its key line,
   and between records the measured move (key · tempo · energy) in the booth's own evidence chips.
   Green is audio, violet is thinking — the same two colours, the same shapes, as the stage. */
.feed{position:relative;padding-left:30px;gap:0;margin:0 0 32px}
.feed::before{content:"";position:absolute;left:9px;top:8px;bottom:12px;width:1px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--violet) 55%,transparent) 0,var(--line2) 72px,var(--line2) calc(100% - 60px),transparent)}
.feed>*{position:relative}
.smsg{align-self:stretch;max-width:none;border:0;background:transparent;border-radius:0;padding:0 0 14px;font-size:15.5px;line-height:1.5;color:var(--ink)}
.smsg::before{content:"";position:absolute;left:-25px;top:8px;width:9px;height:9px;border-radius:50%;background:var(--violet);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--violet) 16%,transparent),0 0 0 6px var(--paper)}
.sninja{background:transparent;border:0;border-radius:0;max-width:66ch}
.swho{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--violet-d);font-weight:600;margin-bottom:6px;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.swho em{font-style:normal;color:var(--dim);font-weight:400;letter-spacing:.06em;text-transform:none}
.syou{align-self:stretch;background:transparent;color:var(--ink);font-family:var(--grotesk);font-size:15.5px;border-radius:0;max-width:66ch}
.syou::before{background:var(--ink);box-shadow:0 0 0 6px var(--paper)}
.syou .swho{color:var(--dim)}
.sstamp{align-self:flex-start;margin:6px 0 14px;padding-left:0}
.sstamp::before{content:"";position:absolute;left:-23px;top:6px;width:5px;height:5px;border-radius:50%;background:var(--line3)}
.feed .tw{position:relative;margin:0 0 18px;padding:12px 14px;gap:14px;align-items:center;border:1px solid var(--line2);border-radius:14px;background:var(--card);max-width:680px}
.feed .tw+.tw{margin-top:0}
.feed .tw::before{content:"";position:absolute;left:-25px;top:50%;width:9px;height:9px;margin-top:-5px;border-radius:50%;background:var(--signal-d);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--signal) 18%,transparent),0 0 0 6px var(--paper)}
.feed .tw.next{border-color:color-mix(in srgb,var(--signal-d) 45%,var(--line2));background:color-mix(in srgb,var(--signal) 4%,var(--card))}
.feed .tw.next::before{background:var(--paper);border:1.5px solid var(--signal-d);width:8px;height:8px}
.feed .tw.dim{opacity:1}
.feed .tw.dim::before{background:var(--dim2);box-shadow:0 0 0 6px var(--paper)}
.feed .sart{width:64px;height:64px;border-radius:10px}
.feed .tw.next .sart{width:88px;height:88px;border-radius:12px}
.feed .smeta>b{font-size:15.5px}
.feed .tw.next .smeta>b{font-size:17px}
.feed .why{color:var(--violet-d)}
.feed .twpills .st{color:var(--signal-d)}
/* the thread on the front page: beats, and the move between records */
.feed.thread{gap:0;margin:0 0 8px}
.thread-beat{display:flex;flex-direction:column;gap:0;padding-bottom:6px}
.thread-beat .tw{margin:0 0 12px}
.thread-beat .sart-b{flex:none;width:64px;height:64px;border-radius:10px;overflow:hidden;position:relative;border:1px solid var(--line);background:#0a0b0a;padding:0;cursor:pointer}
.thread-move{padding:0 0 22px;gap:6px}
.thread-move .mv-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);align-self:center;margin-right:4px}
.thread-move .e{font-size:10.5px;padding:5px 9px}
.thread-beat:last-child .thread-move{display:none}
@media(max-width:680px){.feed{padding-left:24px}.feed::before{left:7px}.smsg::before,.feed .tw::before{left:-21px}.sstamp::before{left:-19px}.feed .sart,.thread-beat .sart-b{width:56px;height:56px}}
/* ---- the memory drawer as a log --------------------------------------------------------------- */
/* the day rule sticks flush to the drawer head: full-bleed across the body's side padding and no
   outer margin (a margin on a sticky box leaves a slot above it that the rows scroll through) */
.lg-day{position:sticky;top:0;z-index:2;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);background:var(--paper);margin:0 -22px;padding:16px 22px 8px;border-bottom:1px solid var(--line);box-shadow:0 8px 12px -10px rgba(10,11,10,.18)}
.pvrow.lg,.dq-row.lg{display:grid;grid-template-columns:44px 42px minmax(0,1fr) 28px;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);border-radius:0}
.dq-row.lg{padding:8px 0}
.dq-row.lg:hover{background:transparent}
.lg .pv-art,.lg .dq-art{width:42px;height:42px;border-radius:8px}
.lg-t{font-family:var(--mono);font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.lg-m{min-width:0}
.lg-tt{display:block;font-size:14px;font-weight:650;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg-tt:hover{color:var(--signal-d)}
.lg-a{font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.lg-a a{color:var(--dim)}.lg-a a:hover{color:var(--signal-d)}
.lg .pv-chips{font-size:10.5px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg .pv-fav,.lg .dq-ctl{justify-self:end}
.memdrawer .lg .pv-wave{display:none}
@media(max-width:480px){.pvrow.lg,.dq-row.lg{grid-template-columns:40px 38px minmax(0,1fr) 28px}}
/* ---- the footer player in the stage language ------------------------------------------------ */
/* iOS Safari: a fixed, backdrop-blurred bar that also animates transform must sit on its OWN
   composited layer from the first frame — otherwise WebKit can leave it in the page layer during
   momentum scroll and it rides with the content until the scroll settles. translate3d at rest (not
   "none") keeps the layer alive between dock/undock; backface-visibility pins it. */
.livebar{padding-top:0;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);will-change:transform;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .42s cubic-bezier(.4,0,.2,1)}
.livebar.docked{-webkit-transform:translate3d(0,calc(100% + 2px),0);transform:translate3d(0,calc(100% + 2px),0);pointer-events:none}
.lb-nx{text-transform:none;letter-spacing:.02em;color:var(--ink)}.lb-nx a{color:var(--ink)}.lb-nx a:hover{color:var(--signal-d)}
@media(max-width:680px){.lb-nx{display:none}}
.lb-lane{display:block;width:100%;height:16px;margin:0}
.lb-in{padding:8px 22px 10px;gap:12px}
.lb-cov{flex:none;width:40px;height:40px;border-radius:8px;overflow:hidden;position:relative;background:#0a0b0a;border:1px solid var(--line);display:block}
.lb-cov img{width:100%;height:100%;object-fit:cover;display:block}
.lb-cov .lb-live{position:absolute;left:4px;bottom:4px;gap:4px;padding:2px 4px;border-radius:6px;background:rgba(8,9,18,.55)}
.lb-cov .lb-dot{box-shadow:0 0 6px var(--signal)}
.lb-cov .lb-eq{height:10px}.lb-cov .lb-eq i{width:2px;background:var(--signal)}
.lb-now{font-size:14.5px}
.lb-reason{font-family:var(--grotesk);font-size:12.5px;color:var(--dim);margin-top:2px}
.lb-reason:not(:empty)::before{content:"◣ ";font-family:var(--mono);font-size:10px;color:var(--violet-d)}
.livebar.typing .lb-reason::after{content:"▌";color:var(--violet);margin-left:1px;animation:lbcar 1.05s step-end infinite}
.lb-mix{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line2);border-radius:8px;padding:6px 10px}
.lb-mix:empty{display:none}
.lb-vol{flex:none;display:flex;align-items:center;gap:6px}
.lb-vol[hidden]{display:none}
.lb-mute{width:30px;height:30px;border:0;background:none;color:var(--dim);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;border-radius:50%}
.lb-mute:hover{color:var(--signal-d)}
.lb-vol input{width:84px;accent-color:var(--signal-d);cursor:pointer}
@media(max-width:680px){.lb-vol{display:none}}
.lb-mix b{color:var(--ink);font-weight:600}
.lb-mix.hot{color:var(--signal-d);border-color:color-mix(in srgb,var(--signal-d) 45%,transparent);background:color-mix(in srgb,var(--signal) 14%,var(--paper))}
.lb-mix .lb-mixx{text-transform:none;letter-spacing:.02em}
.stage-share{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--signal-d);background:none;border:1px solid var(--line2);border-radius:999px;padding:7px 13px;cursor:pointer;transition:all .14s ease}
.stage-share:hover{border-color:var(--signal);background:color-mix(in srgb,var(--signal) 10%,transparent)}
@media(max-width:680px){.lb-reason{display:none}.lb-full{display:none}.lb-mixx{display:none}.lb-mix{font-size:9.5px;padding:5px 7px}.lb-in{padding:8px 14px 8px;gap:9px}.lb-clip{display:none}.lb-tt{flex:1 1 auto}.lb-a{max-width:34%}.lb-cov{width:36px;height:36px}}
body::before{content:'';position:fixed;top:0;left:0;height:2px;width:0;background:var(--signal);z-index:60;opacity:0;transition:width .3s ease,opacity .25s ease;pointer-events:none}
body.dn-nav::before{width:78%;opacity:1}
/* ---- the schedule: the week, a day at a time ---------------------------------------------------- */
.sch-day{margin:26px 0 6px}
.sch-list{border-top:1px solid var(--line)}
.sch-row{display:grid;grid-template-columns:118px minmax(0,1fr);gap:16px;align-items:baseline;padding:13px 2px;border-bottom:1px solid var(--line)}
.sch-t{font-family:var(--mono);font-size:12.5px;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.sch-name b{font-family:var(--grotesk);font-size:17px;font-weight:800;letter-spacing:-.01em}
.sch-name b a{border-bottom:1px solid var(--line2)}.sch-name b a:hover{color:var(--signal-d);border-color:var(--signal)}
.sch-tag{color:var(--dim);font-size:14px}
.sch-tag a,.showline .tag a{color:inherit;border-bottom:1px solid var(--line2)}.sch-tag a:hover,.showline .tag a:hover{color:var(--signal-d);border-color:var(--signal)}
.sch-row.signal .sch-name b{font-weight:600;color:var(--dim)}
.sch-row.signal{padding:8px 2px}
.sch-row.flag .sch-name b::after{content:"flagship";font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--signal-d);border:1px solid color-mix(in srgb,var(--signal-d) 45%,transparent);border-radius:999px;padding:2px 7px;margin-left:9px;vertical-align:3px}
.sch-row.mix .sch-name b::after{content:"DJ mix";font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--signal-d);border:1px solid color-mix(in srgb,var(--signal-d) 45%,transparent);border-radius:999px;padding:2px 7px;margin-left:9px;vertical-align:3px}
.sch-note{display:block;margin-top:5px;color:var(--violet-d);font-size:13.5px}
.sch-note::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--violet);margin-right:7px;vertical-align:1px}
.sch-row.now{background:color-mix(in srgb,var(--signal) 7%,var(--paper))}
.sch-row.now .sch-t::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--signal);margin-right:7px;box-shadow:0 0 0 3px color-mix(in srgb,var(--signal) 25%,transparent)}
.sch-row.past{opacity:.45}
.sch-tz{font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.04em}

@media(max-width:680px){.sch-row{grid-template-columns:92px minmax(0,1fr);gap:10px}.sch-name b{font-size:15.5px}}