/* ══════════════ PURROUETTE — $PURROUETTE ══════════════
   Wet asphalt, a broken sign, and one cat who cannot catch his own tail.
   Everything here is lit rather than drawn: no borders doing the heavy
   work, no drop shadows — light, glass, and reflections in the puddle.
   ═══════════════════════════════════════════════════════════════════ */
@property --p{syntax:"<number>";inherits:false;initial-value:0}
@property --sweep{syntax:"<percentage>";inherits:false;initial-value:0%}

:root{
  --void:#0A0508;
  --night:#12070C;
  --night-2:#1B0B12;
  --neon:#FF2E55;
  --neon-2:#FF6B4A;
  --neon-l:#FFB6C1;
  --ginger:#F8A03A;
  --ice:#7DD8FF;
  --text:#FFF1EC;
  --muted:#B2909A;
  --dim:#7C626A;
  --line:rgba(255,170,185,.13);
  --line-2:rgba(255,170,185,.3);
  --glass:rgba(255,235,235,.045);
  --glow-s:0 0 6px rgba(255,46,85,.85),0 0 18px rgba(255,46,85,.5);
  --glow-m:0 0 8px rgba(255,46,85,.9),0 0 26px rgba(255,46,85,.55),0 0 70px rgba(255,46,85,.25);
  --max:1180px;
  --ease:cubic-bezier(.22,.68,.24,1);
  --out:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-gutter:stable;
  -webkit-tap-highlight-color:transparent;overflow-x:clip;background:var(--void)}
body{margin:0;background:transparent;color:var(--text);
  font-family:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16.5px;line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:Unbounded,"Space Grotesk",sans-serif;font-weight:800;margin:0;
  line-height:1.06;letter-spacing:-.02em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
[id]{scroll-margin-top:96px}
.hot{color:var(--neon)}
::selection{background:var(--neon);color:#1A0007}
[aria-disabled="true"]{cursor:default;opacity:.55}
:focus-visible{outline:2px solid var(--neon-l);outline-offset:3px;border-radius:8px}
:focus:not(:focus-visible){outline:none}
.skip{position:absolute;left:-9999px;z-index:400;padding:12px 20px;background:var(--neon);
  color:#1A0007;font-weight:700;border-radius:0 0 10px 0}
.skip:focus{left:0;top:0}

/* ───────── the street ───────── */
.world{position:fixed;inset:0;z-index:-3;overflow:hidden;pointer-events:none;background:var(--void)}
.sky{position:absolute;inset:0;
  background:
    radial-gradient(120vw 70vh at 50% -14%,rgba(255,46,85,.20),transparent 62%),
    radial-gradient(70vw 60vh at 88% 24%,rgba(125,216,255,.07),transparent 66%),
    radial-gradient(90vw 70vh at 8% 84%,rgba(248,160,58,.08),transparent 64%),
    linear-gradient(180deg,#150810 0%,#0B0509 46%,#08040A 100%)}

/* three sodium lamps down the far pavement, swaying out of sync */
.lamp{position:absolute;width:34vmax;height:34vmax;border-radius:50%;filter:blur(90px);
  will-change:transform}
.l1{left:-8vw;top:6vh;background:radial-gradient(circle,rgba(255,46,85,.30),transparent 66%);
  animation:sway 17s var(--ease) infinite alternate}
.l2{right:-6vw;top:34vh;background:radial-gradient(circle,rgba(255,107,74,.22),transparent 64%);
  animation:sway 23s 1.4s var(--ease) infinite alternate-reverse}
.l3{left:38vw;bottom:-14vh;background:radial-gradient(circle,rgba(125,216,255,.14),transparent 66%);
  animation:sway 29s .8s var(--ease) infinite alternate}
@keyframes sway{to{transform:translate3d(4vw,-3vh,0) scale(1.16)}}

#rain{position:absolute;inset:0;width:100%;height:100%}

/* the wet road: light smeared vertically, the way it is on soaked tarmac */
.wet{position:absolute;left:0;right:0;bottom:0;height:52vh;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,rgba(255,46,85,.05) 0 2px,transparent 2px 34px),
    linear-gradient(180deg,transparent,rgba(255,46,85,.05) 55%,rgba(125,216,255,.04));
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 65%);
  mask-image:linear-gradient(180deg,transparent,#000 65%);
  animation:smear 9s var(--ease) infinite alternate}
@keyframes smear{to{transform:translateY(-8px) scaleY(1.05);opacity:.75}}

.grain{position:absolute;inset:-6%;opacity:.22;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  animation:grainShift 620ms steps(3) infinite}
@keyframes grainShift{0%{transform:translate(0,0)}33%{transform:translate(-2%,1.5%)}
  66%{transform:translate(1.5%,-2%)}100%{transform:translate(0,0)}}

/* the cursor carries its own light down the street */
.pool{position:fixed;top:0;left:0;width:620px;height:620px;margin:-310px 0 0 -310px;z-index:-1;
  pointer-events:none;opacity:0;transition:opacity .8s ease;will-change:transform;
  background:radial-gradient(circle,rgba(255,46,85,.16),rgba(255,107,74,.06) 38%,transparent 66%)}
body.lit .pool{opacity:1}

.rail{position:fixed;top:0;left:0;right:0;height:2px;z-index:120;background:rgba(255,255,255,.05)}
.rail span{display:block;height:100%;width:0;background:var(--neon);box-shadow:var(--glow-s)}

/* ───────── the flicker: a tube that never quite committed ───────── */
[data-flicker]{animation:flicker 7s steps(1,end) infinite}
@keyframes flicker{
  0%,2%,4%,8%,74%,76%,100%{opacity:1;text-shadow:0 0 8px rgba(255,46,85,.7),0 0 28px rgba(255,46,85,.45)}
  3%,7%{opacity:.35;text-shadow:none}
  75%{opacity:.5;text-shadow:none}
}
@media (prefers-reduced-motion:reduce){[data-flicker]{animation:none}}

/* ───────── the lift: sections come up out of the dark ───────── */
[data-lift]{opacity:var(--p);translate:0 calc((1 - var(--p)) * 34px);
  transition:opacity .9s var(--out),translate .9s var(--out)}
@supports (animation-timeline:view()){
  html.js [data-lift]{animation:liftKf linear both;animation-timeline:view();
    animation-range:entry 4% cover 24%}
  @keyframes liftKf{to{--p:1}}
}
html:not(.js) [data-lift]{--p:1}
@media (prefers-reduced-motion:reduce){
  [data-lift]{--p:1 !important;animation:none !important;transition:none}
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ───────── nav ───────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;gap:24px;
  padding:14px max(18px,calc((100vw - var(--max))/2));
  padding-left:max(18px,calc((100vw - var(--max))/2),env(safe-area-inset-left));
  padding-right:max(18px,calc((100vw - var(--max))/2),env(safe-area-inset-right));
  transition:padding .45s var(--ease),background .45s var(--ease),box-shadow .45s var(--ease)}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-2),transparent);
  opacity:0;transition:opacity .45s}
.nav.stuck{padding-top:9px;padding-bottom:9px;background:rgba(10,5,8,.72);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}
.nav.stuck::after{opacity:1}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand-mark{width:40px;height:40px;border-radius:50%;overflow:hidden;position:relative;
  box-shadow:0 0 0 1px var(--line-2),0 0 18px rgba(255,46,85,.35);
  transition:box-shadow .5s var(--ease)}
.brand-mark img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--out)}
.brand:hover .brand-mark{box-shadow:0 0 0 1px var(--neon),0 0 30px rgba(255,46,85,.7)}
.brand:hover .brand-mark img{transform:rotate(360deg) scale(1.08)}
.brand-name{font-family:Unbounded,sans-serif;font-weight:800;font-size:15px;letter-spacing:.16em;
  color:var(--text)}
.brand-name.small{font-size:14px;opacity:.9}
.nav-links{display:flex;gap:4px;margin-left:auto}
.nav-links a{position:relative;padding:7px 12px;font-size:13px;font-weight:500;letter-spacing:.05em;
  color:var(--muted);transition:color .3s}
.nav-links a::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:1px;
  background:var(--neon);box-shadow:var(--glow-s);transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--out)}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-cta{display:flex;align-items:center;gap:8px}

.ico{display:grid;place-items:center;width:35px;height:35px;border-radius:9px;cursor:pointer;
  color:var(--muted);background:var(--glass);border:1px solid var(--line);
  transition:color .3s,border-color .3s,box-shadow .4s,transform .4s var(--out)}
.ico img{width:15px;height:15px;opacity:.7;transition:opacity .3s;
  filter:brightness(0) invert(1)}
.ico svg{width:17px;height:17px}
.ico:hover{color:var(--text);border-color:var(--line-2);transform:translateY(-2px);
  box-shadow:0 0 20px rgba(255,46,85,.28)}
.ico:hover img{opacity:1}
.ico[data-sound="on"]{color:var(--neon);border-color:rgba(255,46,85,.5);
  box-shadow:0 0 18px rgba(255,46,85,.3)}
.ico .on-wave{opacity:0;transition:opacity .25s}
.ico .off-x{opacity:1;transition:opacity .25s}
.ico[data-sound="on"] .on-wave{opacity:1}
.ico[data-sound="on"] .off-x{opacity:0}
.ico.nudge{animation:nudge 1.2s var(--ease) 2}
@keyframes nudge{0%,100%{transform:none}30%{transform:translateY(-5px)}60%{transform:translateY(0)}}

/* ───────── buttons: lit tubes, not blocks ───────── */
.neon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:11px 20px;border-radius:100px;font-weight:600;font-size:13.5px;letter-spacing:.04em;
  color:#22000A;background:var(--neon);white-space:nowrap;overflow:hidden;cursor:pointer;
  box-shadow:0 0 18px rgba(255,46,85,.5),0 0 46px rgba(255,46,85,.22),inset 0 1px 0 rgba(255,255,255,.4);
  transition:box-shadow .45s var(--ease),transform .45s var(--out),background .3s}
.neon-btn img{filter:brightness(0)}
.neon-btn.big{padding:15px 30px;font-size:15px}
.neon-btn::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);
  translate:-140% 0;transition:translate .8s var(--ease)}
.neon-btn:hover{transform:translateY(-3px);background:#FF4468;
  box-shadow:0 0 26px rgba(255,46,85,.8),0 0 80px rgba(255,46,85,.4),inset 0 1px 0 rgba(255,255,255,.5)}
.neon-btn:hover::after{translate:140% 0}
.neon-btn:active{transform:translateY(-1px)}

/* the wire button draws its own outline on approach */
.wire-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:11px 20px;border-radius:100px;font-weight:600;font-size:13.5px;letter-spacing:.04em;
  color:var(--text);background:transparent;white-space:nowrap;cursor:pointer;
  border:1px solid var(--line-2);transition:color .3s,border-color .4s,box-shadow .45s,transform .45s var(--out)}
.wire-btn.big{padding:15px 30px;font-size:15px}
.wire-btn:hover{color:var(--neon-l);border-color:var(--neon);transform:translateY(-3px);
  box-shadow:0 0 20px rgba(255,46,85,.35),inset 0 0 20px rgba(255,46,85,.1)}
.thin{margin-left:auto;font-family:"Space Mono",monospace;font-size:11.5px;color:var(--muted);
  padding:5px 10px;border-radius:7px;transition:color .3s,background .3s}
.thin:hover{color:var(--neon-l);background:rgba(255,46,85,.1)}

/* ───────── layout ───────── */
.wrap{max-width:var(--max);margin:0 auto;padding:104px max(18px,4vw)}
.wrap.tight{padding-top:18px;padding-bottom:18px}
.head{max-width:640px;margin-bottom:46px}
.tag{display:inline-block;font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--neon);margin-bottom:16px;opacity:.9}
.head h2{font-size:clamp(30px,4.6vw,50px);margin-bottom:14px}
.head p{color:var(--muted);font-size:16.5px}
/* headings warm up a letter at a time, the way a strip light does */
.head h2 .lt{display:inline-block;white-space:pre;opacity:0;translate:0 12px;filter:blur(7px)}
.head h2.lit .lt{animation:ltOn .55s var(--out) forwards;animation-delay:calc(var(--i) * 24ms)}
@keyframes ltOn{to{opacity:1;translate:0 0;filter:blur(0)}}

/* ───────── hero ───────── */
/* minmax(0,1fr), not the implicit max-content column: otherwise the widest
   child (the headline) sets the track and everything else inherits its
   overflow, including a 44-character contract address that cannot ellipsis */
.hero{max-width:1080px;margin:0 auto;padding:132px max(18px,5vw) 40px;text-align:center;
  display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:0}
.over{font-family:"Space Mono",monospace;font-size:11.5px;letter-spacing:.32em;color:var(--muted);
  margin-bottom:26px}
.hero h1{font-size:clamp(27px,6.6vw,78px);font-weight:900;letter-spacing:-.03em;
  max-width:100%;overflow-wrap:break-word}
.hero h1 .ln{display:block}
.hero h1 .ln.hot{color:var(--neon)}

/* the shot, standing in its own puddle */
.shot{position:relative;margin:8px 0 6px;width:min(430px,78vw);isolation:isolate}
.halo{position:absolute;left:50%;top:46%;width:150%;aspect-ratio:1;translate:-50% -50%;z-index:-1;
  border-radius:50%;filter:blur(48px);
  background:radial-gradient(circle,rgba(255,46,85,.5),rgba(255,107,74,.18) 44%,transparent 68%);
  animation:halo 5.5s var(--ease) infinite alternate}
@keyframes halo{to{transform:scale(1.12);opacity:.72}}
.star{width:100%;height:auto;position:relative;z-index:2;
  filter:drop-shadow(0 0 26px rgba(255,46,85,.45));
  animation:hover 6.5s var(--ease) infinite alternate}
@keyframes hover{to{transform:translateY(-14px) rotate(-1.2deg)}}
/* the reflection: flipped, blurred, and never quite still */
.mirror{position:absolute;left:0;right:0;top:97%;z-index:1;pointer-events:none;opacity:.34;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 58%);
  mask-image:linear-gradient(180deg,#000,transparent 58%)}
.mirror img{width:100%;height:auto;transform:scaleY(-1);filter:blur(3px) saturate(1.3);
  animation:ripple 7s var(--ease) infinite alternate}
@keyframes ripple{
  0%{transform:scaleY(-1) skewX(0deg) scaleX(1)}
  50%{transform:scaleY(-1) skewX(1.6deg) scaleX(1.02)}
  100%{transform:scaleY(-1) skewX(-1.4deg) scaleX(.99)}}

.pin{position:absolute;z-index:3;font-family:"Space Mono",monospace;font-size:11px;
  letter-spacing:.08em;color:var(--neon-l);white-space:nowrap;padding:5px 11px;border-radius:100px;
  background:rgba(20,8,14,.75);border:1px solid var(--line-2);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px)}
.pin::before{content:"";position:absolute;top:50%;width:26px;height:1px;background:var(--line-2)}
.pin-a{top:16%;right:-38%;animation:pinDrift 8s var(--ease) infinite alternate}
.pin-a::before{left:-26px}
.pin-b{bottom:20%;left:-36%;animation:pinDrift 10s 1s var(--ease) infinite alternate-reverse}
.pin-b::before{right:-26px}
@keyframes pinDrift{to{transform:translate(0,-10px)}}

.hero .lede{max-width:56ch;color:var(--muted);font-size:17px;margin:36px 0 30px}
.hero .lede b{color:var(--text);font-weight:600}
.acts{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

.ca{display:inline-flex;align-items:center;gap:10px;margin-top:30px;padding:8px 8px 8px 8px;
  border-radius:100px;cursor:pointer;max-width:100%;
  font-family:"Space Mono",monospace;font-size:12px;color:var(--muted);
  background:var(--glass);border:1px solid var(--line);
  transition:border-color .4s,color .3s,box-shadow .4s}
.ca:hover{border-color:var(--neon);color:var(--text);box-shadow:0 0 22px rgba(255,46,85,.25)}
.ca-k{font-size:10px;letter-spacing:.18em;color:#22000A;background:var(--neon);
  padding:3px 9px;border-radius:100px;font-weight:700}
.ca-v{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca svg{width:15px;height:15px;flex-shrink:0;margin-right:10px;opacity:.55}
.ca:hover svg{opacity:1;color:var(--neon)}

.live{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:22px;
  font-family:"Space Mono",monospace;font-size:12px;color:var(--dim)}
.beat{width:7px;height:7px;border-radius:50%;background:var(--neon);flex-shrink:0;
  box-shadow:0 0 10px var(--neon);animation:beat 1.7s var(--ease) infinite}
@keyframes beat{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.55);opacity:.4}}
.live b{color:var(--text);font-size:15px}
.live.on{gap:22px;padding:11px 20px;border-radius:100px;background:var(--glass);
  border:1px solid var(--line);width:fit-content;max-width:100%}
.live.stale{opacity:.55}
.li{display:flex;align-items:center;gap:8px}
.li i{font-style:normal;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.li b{color:var(--text)}
.li b.up{color:#3BE0A0}
.li b.down{color:var(--neon)}

/* ───────── neon tube marquee ───────── */
.tube{position:relative;overflow:hidden;padding:16px 0;
  border-block:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,46,85,.07),transparent 60%)}
.tube::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--void),transparent 14%,transparent 86%,var(--void))}
.tube-run{display:flex;align-items:center;gap:26px;width:max-content;
  animation:run 34s linear infinite;will-change:transform}
.tube:hover .tube-run{animation-play-state:paused}
@keyframes run{to{transform:translateX(-50%)}}
.tube-run span{font-family:Unbounded,sans-serif;font-weight:700;font-size:16px;letter-spacing:.1em;
  text-transform:uppercase;color:transparent;-webkit-text-stroke:1px rgba(255,182,193,.42)}
.tube-run span:nth-child(4n+1){color:var(--neon);-webkit-text-stroke:0;
  text-shadow:0 0 10px rgba(255,46,85,.7),0 0 30px rgba(255,46,85,.4)}
.tube-run i{width:5px;height:5px;border-radius:50%;background:var(--neon);flex-shrink:0;
  box-shadow:0 0 8px var(--neon)}

/* ───────── origin beats ───────── */
.beats{max-width:var(--max);margin:0 auto;padding:104px max(18px,4vw)}
/* NB: not `.beat` — that class is the pulsing live dot, and sharing the name
   handed these articles a 7px width and stacked all three on top of each other */
.turn{position:relative;display:grid;grid-template-columns:minmax(90px,14%) 1fr;gap:34px;
  align-items:start;padding:36px 0}
.turn-n{font-family:Unbounded,sans-serif;font-weight:900;font-size:clamp(38px,6vw,74px);
  line-height:.85;color:transparent;-webkit-text-stroke:1px rgba(255,182,193,.3);
  transition:color .6s var(--ease),-webkit-text-stroke-color .6s}
.turn:hover .turn-n{color:var(--neon);-webkit-text-stroke-color:transparent;
  text-shadow:0 0 14px rgba(255,46,85,.6),0 0 44px rgba(255,46,85,.35)}
.turn-txt h3{font-size:clamp(21px,2.6vw,29px);margin-bottom:10px}
.turn-txt p{color:var(--muted);max-width:60ch}
/* the hairline under each turn draws itself in on approach */
.turn-rule{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)}
.turn-rule::after{content:"";position:absolute;inset:0;background:var(--neon);
  box-shadow:var(--glow-s);transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--out)}
.turn:hover .turn-rule::after{transform:scaleX(1)}

/* ───────── the street plate ───────── */
.street{position:relative;overflow:hidden;isolation:isolate}
/* the box is far wider than the 3:2 source, so cover crops vertically only:
   the Y here is what decides whether you get his face or his knees */
.street img{width:100%;height:clamp(220px,26vw,420px);object-fit:cover;object-position:50% 14%;
  transform:scale(1.04);transition:transform 1.4s var(--ease)}
.street:hover img{transform:scale(1.09)}
.street-fade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,var(--void),transparent 22%,transparent 62%,var(--void)),
    radial-gradient(90% 70% at 50% 50%,transparent 40%,rgba(10,5,8,.65))}
/* the broken sign above the door */
.sign{position:absolute;top:clamp(26px,6vw,64px);right:clamp(18px,6vw,72px);z-index:2;
  display:grid;justify-items:center;gap:2px;padding:12px 22px;border-radius:6px;
  border:1px solid rgba(255,46,85,.55);background:rgba(20,4,10,.4);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  box-shadow:0 0 26px rgba(255,46,85,.35),inset 0 0 22px rgba(255,46,85,.18)}
.sign span{font-family:Unbounded,sans-serif;font-weight:800;font-size:clamp(17px,2.6vw,26px);
  letter-spacing:.22em;color:var(--neon);
  text-shadow:0 0 10px rgba(255,46,85,.9),0 0 34px rgba(255,46,85,.5)}
.sign i{font-style:normal;font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--neon-l);opacity:.75}
.street-cap{position:absolute;left:clamp(18px,5vw,48px);bottom:clamp(20px,4vw,44px);z-index:2;
  display:flex;align-items:center;gap:10px;font-family:"Space Mono",monospace;font-size:11px;
  letter-spacing:.16em;color:var(--muted)}

/* ───────── setlist ───────── */
.list{border-top:1px solid var(--line)}
.row{border-bottom:1px solid var(--line);transition:background .4s var(--ease)}
.row summary{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:18px;
  padding:20px 8px;cursor:pointer;list-style:none;position:relative}
.row summary::-webkit-details-marker{display:none}
.row-n{font-family:"Space Mono",monospace;font-size:12px;color:var(--dim)}
.row-t{font-family:Unbounded,sans-serif;font-weight:700;font-size:clamp(16px,2.1vw,21px);
  letter-spacing:-.01em;transition:color .3s,transform .5s var(--out)}
.row-x{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);padding:4px 10px;border-radius:100px;border:1px solid var(--line)}
.row.hit .row-x{color:var(--neon);border-color:rgba(255,46,85,.5);
  box-shadow:0 0 14px rgba(255,46,85,.28)}
.row:hover{background:linear-gradient(90deg,rgba(255,46,85,.08),transparent 70%)}
.row:hover .row-t{color:var(--neon-l);transform:translateX(8px)}
.row[open] .row-t{color:var(--neon)}
.row p{padding:0 8px 22px 74px;color:var(--muted);max-width:70ch;font-size:15.5px;
  animation:openLine .5s var(--out)}
@keyframes openLine{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}

/* ───────── the dance floor ───────── */
.deck{border-radius:20px;overflow:hidden;background:linear-gradient(180deg,#180A11,#0D0509);
  border:1px solid var(--line);box-shadow:0 40px 90px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05)}
.deck.flash{animation:deckFlash .76s var(--out)}
@keyframes deckFlash{
  0%{border-color:var(--neon);box-shadow:0 0 0 1px var(--neon),0 0 120px rgba(255,46,85,.65),
    inset 0 0 90px rgba(255,46,85,.35)}
  100%{border-color:var(--line);box-shadow:0 40px 90px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05)}}
.deck-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 20px;
  border-bottom:1px solid var(--line);background:rgba(255,46,85,.05)}
.play{display:inline-flex;align-items:center;gap:10px;padding:9px 20px 9px 16px;border-radius:100px;
  cursor:pointer;font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:13.5px;
  color:var(--text);background:var(--glass);border:1px solid var(--line-2);
  transition:color .3s,border-color .3s,box-shadow .4s,transform .4s var(--out)}
.play:hover{transform:translateY(-2px);border-color:var(--neon);box-shadow:0 0 22px rgba(255,46,85,.3)}
.play-ico{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;
  border-color:transparent transparent transparent var(--neon);transition:.25s}
.play[aria-pressed="true"]{color:var(--neon);border-color:rgba(255,46,85,.55);
  box-shadow:0 0 22px rgba(255,46,85,.35)}
.play[aria-pressed="true"] .play-ico{width:10px;height:12px;border:0;background:var(--neon);
  clip-path:polygon(0 0,34% 0,34% 100%,0 100%,0 0,66% 0,100% 0,100% 100%,66% 100%,66% 0)}
.bpm{display:flex;align-items:baseline;gap:8px;font-family:"Space Mono",monospace;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.bpm b{font-family:Unbounded,sans-serif;font-size:19px;color:var(--text);letter-spacing:0}
.deck-msg{font-family:"Space Mono",monospace;font-size:12px;color:var(--ginger);flex:1;min-width:180px}
.drop{margin-left:auto;padding:9px 20px;border-radius:100px;cursor:pointer;font-weight:600;
  font-size:13px;letter-spacing:.03em;color:#22000A;background:var(--neon);border:0;
  box-shadow:0 0 16px rgba(255,46,85,.5);animation:dropPulse 2.8s var(--ease) infinite;
  transition:transform .4s var(--out)}
.drop:hover{transform:translateY(-2px)}
@keyframes dropPulse{0%,100%{box-shadow:0 0 16px rgba(255,46,85,.45)}
  50%{box-shadow:0 0 34px rgba(255,46,85,.85),0 0 70px rgba(255,46,85,.35)}}

.deck-stage{position:relative;height:240px;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(70% 120% at 50% 12%,rgba(255,46,85,.14),transparent 66%)}
.deck-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;
  pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,46,85,.07) 0 2px,transparent 2px 26px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000);
  mask-image:linear-gradient(180deg,transparent,#000)}
.ring{position:absolute;top:50%;left:50%;width:190px;height:190px;translate:-50% -58%;
  border-radius:50%;border:1px solid rgba(255,46,85,.35);pointer-events:none;
  transition:transform .12s var(--ease),opacity .3s;opacity:.5}
.ring.pop{animation:ringPop .42s var(--out)}
@keyframes ringPop{0%{transform:scale(.86);opacity:1;border-color:var(--neon);
    box-shadow:0 0 30px rgba(255,46,85,.7)}
  100%{transform:scale(1.5);opacity:0;border-color:rgba(255,46,85,.2)}}
.dancer{position:relative;z-index:2;width:150px;height:150px;border-radius:50%;
  margin-bottom:22px;object-fit:cover;
  filter:drop-shadow(0 0 18px rgba(255,46,85,.45));
  transition:transform .09s var(--ease)}
.dancer.hit{transform:translateY(-12px) scale(1.07)}
.dancer.turn{animation:turn .8s var(--out)}
@keyframes turn{to{rotate:360deg}}
.dancer-mirror{position:absolute;top:50%;left:50%;translate:-50% 30%;width:150px;z-index:1;
  opacity:.3;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 62%);
  mask-image:linear-gradient(180deg,#000,transparent 62%)}
.dancer-mirror img{width:150px;height:150px;border-radius:50%;object-fit:cover;
  transform:scaleY(-1);filter:blur(2px)}
.deck-plate{position:absolute;left:18px;bottom:14px;font-family:"Space Mono",monospace;font-size:9.5px;
  letter-spacing:.22em;color:var(--dim)}

.seq{display:grid;gap:8px;padding:20px;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);background:rgba(0,0,0,.25)}
.lane{display:grid;grid-template-columns:62px 1fr;align-items:center;gap:12px}
.lane-k{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.16em;color:var(--dim)}
.pads{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:5px}
.pad{position:relative;height:34px;border-radius:6px;cursor:pointer;padding:0;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  transition:background .18s,border-color .18s,box-shadow .25s,transform .18s var(--out)}
.pad:nth-child(4n+1){background:rgba(255,255,255,.07)}
.pad:hover{transform:translateY(-2px);border-color:var(--line-2)}
.pad.on{background:var(--tint,var(--neon));border-color:transparent;
  box-shadow:0 0 12px var(--tint-g,rgba(255,46,85,.6))}
.pad.now{outline:1px solid rgba(255,255,255,.55);outline-offset:1px}
.pad.on.now{box-shadow:0 0 22px var(--tint-g,rgba(255,46,85,.9)),0 0 50px var(--tint-g,rgba(255,46,85,.4));
  transform:translateY(-3px) scaleY(1.12)}
.lane[data-v="clap"] .pad{--tint:var(--ginger);--tint-g:rgba(248,160,58,.65)}
.lane[data-v="tail"] .pad{--tint:var(--ice);--tint-g:rgba(125,216,255,.6)}

.groove{display:flex;align-items:center;gap:14px;padding:14px 20px;
  font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);border-bottom:1px solid var(--line)}
.groove-track{flex:1;height:4px;border-radius:100px;background:rgba(255,255,255,.07);overflow:hidden}
.groove-fill{display:block;height:100%;width:0;border-radius:100px;
  background:linear-gradient(90deg,var(--ice),var(--ginger) 46%,var(--neon));
  box-shadow:0 0 12px rgba(255,46,85,.5);transition:width .5s var(--out)}
.groove b{color:var(--text);font-size:13px;min-width:46px;text-align:right;letter-spacing:0}

.overheard{position:relative;display:flex;align-items:center;gap:14px;padding:16px 20px}
.oh-n{font-family:Unbounded,sans-serif;font-weight:800;font-size:13px;color:var(--neon);flex-shrink:0}
.overheard p{font-family:"Space Mono",monospace;font-size:12.5px;color:var(--muted);flex:1}
.oh-bar{position:absolute;left:0;bottom:0;height:1px;width:100%;background:rgba(255,255,255,.05)}
.oh-bar span{display:block;height:100%;width:0;background:var(--neon);box-shadow:var(--glow-s)}

/* ───────── stat chips ───────── */
.chips{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.chips li{display:grid;gap:4px;padding:22px 20px;border-radius:14px;background:var(--glass);
  border:1px solid var(--line);transition:border-color .4s,box-shadow .5s,transform .5s var(--out)}
.chips li:hover{transform:translateY(-4px);border-color:rgba(255,46,85,.45);
  box-shadow:0 0 30px rgba(255,46,85,.18)}
.chips b{font-family:Unbounded,sans-serif;font-weight:800;font-size:22px}
.chips span{font-size:13px;color:var(--dim)}

/* ───────── chart ───────── */
.glass{border-radius:18px;overflow:hidden;background:rgba(255,255,255,.03);
  border:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.glass-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px;
  border-bottom:1px solid var(--line)}
.glass-t{font-family:"Space Mono",monospace;font-size:12.5px;letter-spacing:.1em;color:var(--text)}
.glass-stats{display:flex;gap:18px;flex-wrap:wrap;font-family:"Space Mono",monospace;font-size:11.5px}
.glass-stats span{display:flex;gap:7px;align-items:center}
.glass-stats i{font-style:normal;color:var(--dim);text-transform:uppercase;letter-spacing:.1em}
.glass-stats b{color:var(--text)}
.glass-body{position:relative;height:min(68vh,600px);min-height:400px;background:rgba(0,0,0,.3)}
.glass-body iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.glass-empty{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;
  text-align:center;padding:30px}
.glass-empty h3{font-size:25px}
.glass-empty p{color:var(--muted);max-width:44ch;font-size:15px}
@media (max-width:640px){.glass-body{height:72vh;min-height:360px}}

/* ───────── how to buy: a walk down the street ───────── */
.path{list-style:none;margin:0;padding:0;position:relative}
.path::before{content:"";position:absolute;left:19px;top:12px;bottom:12px;width:1px;
  background:linear-gradient(180deg,transparent,var(--line-2) 12%,var(--line-2) 88%,transparent)}
.path li{position:relative;display:grid;grid-template-columns:40px 34px 1fr;align-items:start;
  gap:20px;padding:26px 0}
.path-n{position:relative;z-index:1;display:grid;place-items:center;width:40px;height:40px;
  border-radius:50%;font-family:"Space Mono",monospace;font-size:11.5px;color:var(--muted);
  background:var(--void);border:1px solid var(--line-2);
  transition:color .3s,border-color .4s,box-shadow .5s}
.path li:hover .path-n{color:var(--neon);border-color:var(--neon);
  box-shadow:0 0 20px rgba(255,46,85,.45)}
.path li>img{width:26px;height:26px;margin-top:8px;opacity:.75;filter:brightness(0) invert(1);
  transition:opacity .3s,transform .5s var(--out)}
.path li>img.round{border-radius:50%;filter:none;opacity:1}
.path li:hover>img{opacity:1;transform:scale(1.12)}
.path h3{font-size:19px;margin-bottom:6px}
.path p{color:var(--muted);font-size:15.5px;max-width:60ch}

/* ───────── spec sheet ───────── */
.sheet{display:grid;grid-template-columns:1fr .82fr;gap:56px;align-items:center}
.sheet-copy h2{font-size:clamp(28px,4.2vw,44px);margin-bottom:14px}
.sheet-copy p{color:var(--muted);margin-bottom:24px}
.sheet-links{display:flex;flex-wrap:wrap;gap:10px}
.sheet-list{margin:0;padding:0}
.sheet-list>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:13px 4px;border-bottom:1px solid var(--line);transition:padding-left .4s var(--ease),background .3s}
.sheet-list>div:hover{padding-left:14px;background:linear-gradient(90deg,rgba(255,46,85,.08),transparent)}
.sheet-list dt{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim)}
.sheet-list dd{margin:0;font-family:Unbounded,sans-serif;font-weight:700;font-size:15px}

/* ───────── finale ───────── */
.finale{max-width:820px;margin:60px auto 90px;padding:0 max(18px,4vw);text-align:center;
  display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:20px}
.finale h2,.finale p{max-width:100%;overflow-wrap:break-word}
.finale h2{font-size:clamp(30px,5.6vw,58px);font-weight:900;letter-spacing:-.03em}
.finale p{color:var(--muted);max-width:52ch}

/* ───────── footer ───────── */
.foot{max-width:var(--max);margin:0 auto;padding:36px max(18px,4vw) 44px;display:grid;gap:18px;
  border-top:1px solid var(--line)}
.foot-top{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px;color:var(--dim)}
.foot-links a{transition:color .3s}
.foot-links a:hover{color:var(--neon)}
.fine{font-size:11.5px;line-height:1.75;color:var(--dim);max-width:92ch}
.fine.dim{opacity:.6;font-family:"Space Mono",monospace}

/* ───────── toast / hint / ripple ───────── */
.toast{position:fixed;left:50%;bottom:26px;translate:-50% 0;z-index:400;padding:13px 24px;
  border-radius:100px;background:rgba(20,8,14,.92);color:var(--text);font-size:14px;font-weight:600;
  border:1px solid rgba(255,46,85,.5);box-shadow:0 0 34px rgba(255,46,85,.3);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;pointer-events:none;transition:opacity .35s,translate .5s var(--out)}
.toast.show{opacity:1;translate:-50% -10px}
.hint{position:fixed;top:66px;right:20px;z-index:400;padding:9px 15px;border-radius:100px;
  background:rgba(20,8,14,.92);border:1px solid rgba(255,46,85,.5);color:var(--neon-l);
  font-family:"Space Mono",monospace;font-size:12px;opacity:0;translate:0 -8px;
  transition:opacity .35s,translate .35s var(--out)}
.hint.show{opacity:1;translate:0 0}
.spark{position:fixed;width:7px;height:7px;border-radius:50%;z-index:390;pointer-events:none}
/* a drop landing where you clicked */
.rip{position:fixed;border-radius:50%;pointer-events:none;z-index:389;
  border:1px solid rgba(255,46,85,.55)}

/* ───────── responsive ───────── */
@media (max-width:960px){
  .nav-links{display:none}
  .sheet{grid-template-columns:1fr;gap:34px}
  .chips{grid-template-columns:repeat(2,1fr)}
  .pin-a{right:-8%}.pin-b{left:-6%}
  .turn{grid-template-columns:70px 1fr;gap:20px}
}
@media (max-width:640px){
  body{font-size:15.5px}
  .wrap,.beats{padding:74px max(16px,4vw)}
  .hero{padding-top:118px}
  .pin{display:none}
  .nav{gap:10px}
  .nav-cta{gap:6px}
  .nav-cta .ico:not(#soundBtn){display:none}
  .brand-name{font-size:12px;letter-spacing:.1em}
  .brand{gap:8px}
  .nav .neon-btn{padding:8px 13px;font-size:11px;gap:0}
  .nav .neon-btn img{display:none}
  .lane{grid-template-columns:46px 1fr;gap:8px}
  .lane-k{font-size:8.5px;letter-spacing:.1em}
  .pads{gap:3px}
  .pad{height:28px;border-radius:5px}
  .deck-stage{height:190px}
  .dancer,.dancer-mirror,.dancer-mirror img{width:108px;height:108px}
  .ring{width:140px;height:140px}
  .drop{margin-left:0;width:100%}
  .deck-msg{order:4;min-width:0}
  .row summary{grid-template-columns:34px 1fr;gap:12px;padding:16px 4px}
  .row-x{grid-column:2;justify-self:start;margin-top:6px}
  .row p{padding-left:46px}
  .path li{grid-template-columns:34px 1fr;gap:14px}
  .path li>img{display:none}
  .path::before{left:16px}
  .path-n{width:34px;height:34px}
}