/* groove guru — one stylesheet, no build */
:root{
  --bg:#0b0b0b;--s1:#131313;--s2:#191919;--s0:#0e0e0e;--line:#2a2a2a;--line2:#3d3d3d;
  --mag:#f2f0ea;--lime:#f2f0ea;--cyan:#9d9a93;--uv:#3b3935;--amber:#ff4a2b;--sig:#ff4a2b;
  --ink:#f2f0ea;--mut:#a19e97;
  --bpm:124;--beat:calc(60s / var(--bpm));
  --f:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --m:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --w:1240px;--ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg);scroll-behavior:smooth;scroll-padding-top:80px;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--f);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:var(--cyan);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--lime)}
svg{display:block}
h1,h2,h3,p,figure,dl,dd{margin:0}
h1,h2,h3{font-weight:700;letter-spacing:-.035em;line-height:1;text-wrap:balance}
p{text-wrap:pretty}
b,strong{font-weight:600}
::selection{background:var(--mag);color:var(--bg)}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:0}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-80px;z-index:100;background:var(--lime);color:var(--bg);padding:12px 18px;border-radius:0;font:600 15px var(--f);text-decoration:none}
.skip:focus{top:14px;color:var(--bg)}
.wrap{max-width:var(--w);margin-inline:auto;padding-inline:clamp(20px,4.5vw,48px)}
.mono{font-family:var(--m)}
.mut{color:var(--mut)}
html:not(.js) [data-js]{display:none!important}

/* ── header ───────────────────────── */
.top{position:sticky;top:0;z-index:50;background:rgba(11,11,11,0.74);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);border-bottom:1px solid var(--line)}
.top__in{display:flex;align-items:center;gap:20px;height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:700;font-size:17px;letter-spacing:-.02em}
.brand:hover{color:var(--ink)}
.brand svg{width:30px;height:30px;color:var(--mag);filter:drop-shadow(0 0 8px rgba(242,240,234,0.248))}
.brand .spin{animation-duration:calc(var(--beat)*8)}
.nav{display:none;gap:2px;margin-left:auto}
.nav a{color:var(--mut);text-decoration:none;font:500 13px var(--m);padding:10px 12px;border-radius:0;transition:color .2s,background .2s}
.nav a span{color:var(--line2);margin-right:4px}
.nav a:hover{color:var(--ink);background:var(--s1)}
.top .btn{margin-left:auto}
@media (min-width:980px){.nav{display:flex}.top .btn{margin-left:8px}}

/* ── buttons / chips ──────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 24px;border-radius:0;border:1px solid transparent;font:600 16px/1 var(--f);letter-spacing:-.01em;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s,border-color .2s,box-shadow .25s,transform .12s}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--mag);color:var(--bg);box-shadow:none}
.btn--primary:hover{background:var(--lime);color:var(--bg);box-shadow:none}
.btn--ghost{background:rgba(19,19,19,0.6);border-color:var(--line2);color:var(--ink)}
.btn--ghost:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:none}
.btn--sm{height:44px;padding:0 18px;font-size:14px}
.btn--lg{height:62px;padding:0 32px;font-size:18px}
.btn .arr{font-family:var(--m);transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}
.chip{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border:1px solid var(--line);border-radius:0;font:500 12px/1 var(--m);color:var(--mut);letter-spacing:.02em;white-space:nowrap;text-decoration:none;background:rgba(12,8,21,.6)}
a.chip:hover{color:var(--ink);border-color:var(--line2)}
.chip--lime{color:var(--lime);border-color:rgba(242,240,234,0.18);box-shadow:none}
.chip--cyan{color:var(--cyan);border-color:rgba(157,154,147,0.18);box-shadow:none}
.chip--mag,.chip--demo{color:var(--mag);border-color:rgba(242,240,234,0.203);box-shadow:none}
.chip--amber{color:var(--amber);border-color:rgba(255,74,43,0.45);box-shadow:none}
.st{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.beacon{position:relative;display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--cyan);flex:none;animation:beacon calc(var(--beat)*2) ease-out infinite}
@keyframes beacon{0%{box-shadow:none}70%{box-shadow:none}100%{box-shadow:none}}

/* ── type ─────────────────────────── */
.kicker{display:inline-flex;align-items:center;gap:12px;font:500 13px/1 var(--m);letter-spacing:.06em;color:var(--lime);padding:9px 14px 9px 12px;border:1px solid rgba(242,240,234,0.126);border-radius:0;background:rgba(242,240,234,0.023)}
.h-hero{font-size:clamp(50px,8.4vw,120px);line-height:.9;letter-spacing:-.055em;margin-top:28px;max-width:12ch}
.h-hero em{font-style:normal;color:var(--mag);text-shadow:0 0 40px rgba(242,240,234,0.248)}
.eyebrow{display:flex;align-items:center;gap:12px;font:500 13px/1 var(--m);letter-spacing:.08em;color:var(--lime)}
.eyebrow::before{content:"";width:9px;height:9px;background:currentColor;box-shadow:none}
.eyebrow b{color:var(--mut);font-weight:500}
.h2{font-size:clamp(38px,5.6vw,76px);letter-spacing:-.045em;line-height:.95}
.h3{font-size:clamp(22px,2.2vw,28px);letter-spacing:-.03em;line-height:1.1}
.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--mut);max-width:60ch}
.lead strong{color:var(--ink);font-weight:500}
.fine{font:400 13px/1.65 var(--m);color:var(--mut)}
.fine strong{color:var(--ink);font-weight:500}

/* ── hero ─────────────────────────── */
.hero{position:relative;isolation:isolate;padding:clamp(56px,9vw,120px) 0 clamp(24px,4vw,56px);overflow:clip}
.hero__glow{position:absolute;z-index:-1;border-radius:50%;pointer-events:none;will-change:transform}
.hero__glow--a{width:min(1200px,160vw);aspect-ratio:1;left:50%;margin-left:calc(min(1200px,160vw) / -2);top:30%;background:radial-gradient(closest-side,rgba(242,240,234,0.144),rgba(70,68,64,0.132) 48%,transparent 74%)}
.hero__glow--b{width:min(760px,110vw);aspect-ratio:1;right:-14%;top:-18%;background:radial-gradient(closest-side,rgba(157,154,147,0.077),transparent 70%)}
.hero__glow--c{width:min(620px,100vw);aspect-ratio:1;left:-16%;top:6%;background:radial-gradient(closest-side,rgba(70,68,64,0.168),transparent 70%)}
.hero__grid{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(42,42,42,0.45) 1px,transparent 1px),linear-gradient(90deg,rgba(42,42,42,0.45) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000,transparent 75%);opacity:.5}
.hero__cols{display:grid;gap:28px;margin-top:clamp(28px,4vw,48px)}
.hero__sub{font-size:clamp(21px,2.3vw,30px);font-weight:500;line-height:1.2;letter-spacing:-.02em;max-width:20ch}
.hero__sub span{color:var(--mut)}
.lede{color:var(--mut);font-size:clamp(16px,1.35vw,18.5px);line-height:1.62;max-width:58ch}
.lede strong{color:var(--ink);font-weight:500}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero .fine{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
@media (min-width:920px){.hero__cols{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px}}
.scene-wrap{position:relative;margin-top:clamp(36px,6vw,72px)}
.scene{width:100%;height:auto;overflow:visible}
.scene__tag{position:absolute;font:500 11px/1 var(--m);color:var(--mut);letter-spacing:.06em;display:flex;gap:8px;align-items:center}
.scene__tag--l{left:0;top:0}.scene__tag--r{right:0;top:0}
@media (max-width:640px){.scene__tag{display:none}}

/* scene internals */
.spin{animation:spin calc(var(--beat)*4) linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sc-ring{fill:none;stroke:var(--line);stroke-width:1}
.sc-ring--hot{stroke:rgba(242,240,234,0.158);stroke-dasharray:2 6}
.tick{stroke:var(--line);stroke-width:4;stroke-linecap:round;animation:tick calc(var(--beat)*4) linear infinite;animation-delay:calc(var(--beat) / 4 * var(--i))}
.tick--down{stroke-width:6;stroke:var(--line2)}
@keyframes tick{0%,3%{stroke:var(--lime)}14%,100%{stroke:var(--line)}}
.wire-bg{fill:none;stroke:var(--line);stroke-width:2}
.wire-fx{fill:none;stroke-width:1.6;stroke-dasharray:3 11;stroke-linecap:round;animation:dash calc(var(--beat)*2) linear infinite}
@keyframes dash{to{stroke-dashoffset:-56}}
.mx{fill:var(--s1);stroke:var(--line2);stroke-width:1.2}
.trk{stroke:var(--s0);stroke-width:7;stroke-linecap:round}
.trk-o{stroke:var(--line2);stroke-width:1}
.knob{fill:var(--s0);stroke:var(--line2);stroke-width:1.2}
.knob-i{stroke:var(--mut);stroke-width:1.6;stroke-linecap:round}
.fthumb{fill:var(--ink)}
.fthumb--a{animation:fa calc(var(--beat)*16) ease-in-out infinite}
.fthumb--b{animation:fb calc(var(--beat)*16) ease-in-out infinite}
@keyframes fa{0%,100%{transform:translateY(0)}50%{transform:translateY(34px)}}
@keyframes fb{0%,100%{transform:translateY(34px)}50%{transform:translateY(0)}}
.xthumb{fill:var(--ink);animation:xf calc(var(--beat)*16) ease-in-out infinite}
@keyframes xf{0%,100%{transform:translateX(0)}50%{transform:translateX(52px)}}
.lamp{fill:var(--line)}
.lamp--on{fill:var(--cyan);filter:drop-shadow(0 0 4px var(--cyan))}
.lamp--b{animation:lamp calc(var(--beat)*16) steps(1) infinite}
@keyframes lamp{0%{fill:var(--line)}25%{fill:var(--cyan)}100%{fill:var(--cyan)}}
.meter{fill:var(--lime);animation:meter var(--beat) ease-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes meter{0%{transform:scaleY(1)}60%{transform:scaleY(.45)}100%{transform:scaleY(.3)}}
.dev{fill:var(--s1);stroke:var(--cyan);stroke-width:1.5}
.devline{stroke:var(--line2);stroke-width:1}
.devpad{fill:var(--line2)}
.devpad--l{fill:var(--lime);animation:blink calc(var(--beat)*2) steps(1) infinite}
.devpad--m{fill:var(--mag)}
@keyframes blink{50%{opacity:.25}}
.courier{fill:var(--lime);animation:courier calc(var(--beat)*4) cubic-bezier(.45,0,.55,1) infinite}
.courier--c{fill:var(--cyan)}
@keyframes courier{0%{offset-distance:0%;opacity:0}8%{opacity:1}92%{opacity:1}100%{offset-distance:100%;opacity:0}}
@supports not (offset-path:path("M0 0")){.courier{display:none}}
.badge{animation:float calc(var(--beat)*8) ease-in-out infinite}
@keyframes float{50%{transform:translateY(-9px)}}
.hex{fill:var(--s1);stroke:var(--mag);stroke-width:2.5;filter:drop-shadow(0 0 7px rgba(242,240,234,0.383))}
.hex-o{fill:none;stroke:rgba(242,240,234,0.158);stroke-width:1;stroke-dasharray:3 5}
.eye{fill:none;stroke:var(--mag);stroke-width:2.5;stroke-linejoin:round}
.pupil{fill:var(--lime);animation:look calc(var(--beat)*8) ease-in-out infinite}
@keyframes look{0%,40%{transform:translateX(0)}50%,65%{transform:translateX(-4px)}75%,90%{transform:translateX(4px)}100%{transform:translateX(0)}}
.sc-lbl{font:500 13px var(--m);fill:var(--mut);letter-spacing:.02em}
.sc-lbl--hot{fill:var(--ink)}
.sc-lbl--lime{fill:var(--lime)}
@media (max-width:640px){.sc-lbl{display:none}}

/* ── sections ─────────────────────── */
.section{position:relative;isolation:isolate;padding-block:clamp(80px,11vw,160px)}
.section--rule{border-top:1px solid var(--line)}
.section__head{position:relative;display:grid;gap:20px;margin-bottom:clamp(40px,5.5vw,72px);max-width:860px}
.section__head::before{content:"";position:absolute;z-index:-1;left:-240px;top:-240px;width:680px;height:680px;border-radius:50%;background:radial-gradient(closest-side,var(--glow,rgba(70,68,64,0.156)),transparent);pointer-events:none}
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js [data-reveal].is-in{opacity:1;transform:none}
.js [data-reveal="2"]{transition-delay:.08s}.js [data-reveal="3"]{transition-delay:.16s}.js [data-reveal="4"]{transition-delay:.24s}
.card{position:relative;background:linear-gradient(180deg,var(--s1),var(--s0));border:1px solid var(--line);border-radius:0;padding:clamp(18px,2.4vw,28px)}
.card__bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:18px}
.card__label{font:500 12px/1 var(--m);letter-spacing:.06em;color:var(--mut)}
.card__live{margin-left:auto;display:inline-flex;gap:8px;align-items:center;font:500 12px/1 var(--m);color:var(--cyan)}
.card__cap{margin-top:16px;color:var(--mut);font-size:15px;line-height:1.55}

/* ── 01 window / mirror ───────────── */
.window{border:1px solid var(--line2);border-radius:0;background:var(--s1);overflow:hidden;box-shadow:none}
.window__bar{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line);background:#101010;font:500 13px var(--m);color:var(--mut)}
.window__dots{display:flex;gap:6px}
.window__dots i{width:10px;height:10px;border-radius:50%;background:var(--line2)}
.window__title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.window__title b{color:var(--ink);font-weight:500}
.mirror{display:grid;gap:14px;padding:clamp(14px,2.6vw,28px);grid-template-columns:minmax(0,1fr)}
@media (min-width:860px){.mirror{grid-template-columns:minmax(0,1fr) 200px minmax(0,1fr)}}
.deck{background:var(--s2);border:1px solid var(--line);border-radius:0;padding:18px;display:grid;gap:16px;align-content:start}
.deck__top{display:flex;justify-content:space-between;align-items:center;gap:10px;font:500 12px var(--m);color:var(--mut)}
.deck__id{display:flex;gap:8px;align-items:center}
.deck__id b{color:var(--ink);font-weight:500}
.deck__read{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.deck__bpm{font:500 clamp(26px,3vw,34px)/1 var(--m);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.deck__bpm small{font-size:12px;color:var(--mut);letter-spacing:0;margin-left:4px}
.bpm-b{display:none;color:var(--lime);text-shadow:0 0 18px rgba(242,240,234,0.225)}
.is-on>.bpm-a{display:none}.is-on>.bpm-b{display:inline}
.deck__body{display:grid;grid-template-columns:clamp(100px,11vw,132px) minmax(0,1fr);gap:16px;align-items:center}
.platter{width:100%;height:auto;aspect-ratio:1;color:var(--mag)}
.platter--cyan{color:var(--cyan)}
.platter .spin{transform-origin:100px 100px}
.platter[data-m] .spin{animation-play-state:paused}
.platter.is-on .spin{animation-play-state:running}
.pads{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pad{--c:var(--lime);appearance:none;-webkit-appearance:none;display:grid;place-items:center;min-height:48px;padding:0 10px;border-radius:0;border:1px solid var(--line);background:var(--s0);color:var(--mut);font:500 12px/1.1 var(--m);letter-spacing:.06em;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform .08s,box-shadow .18s,background .18s,color .18s,border-color .18s}
button.pad:hover{border-color:var(--line2);color:var(--ink)}
button.pad:active{transform:scale(.94)}
.pad.is-on,.pad[aria-pressed="true"]{color:var(--c);border-color:var(--c);background:color-mix(in oklab,var(--c) 16%,var(--s0));box-shadow:none}
.mirror .pad.is-on{animation:press .32s var(--ease)}
@keyframes press{35%{transform:scale(.88)}}
.pad--cue{--c:var(--cyan)}.pad--sync{--c:var(--lime)}.pad--master{--c:var(--mag)}.pad--play{--c:var(--lime)}
.m-chip{opacity:.28;transition:opacity .4s}
.m-chip.is-on{opacity:1}
.mixer{background:var(--s2);border:1px solid var(--line);border-radius:0;padding:18px;display:grid;gap:16px;align-content:space-between}
.mixer__lbl{font:500 11px var(--m);color:var(--mut);letter-spacing:.08em;text-align:center}
.mixer__chs{display:flex;justify-content:space-around;gap:10px}
.ch{display:grid;justify-items:center;gap:10px;font:500 11px var(--m);color:var(--mut)}
.lampx{width:12px;height:12px;border-radius:50%;background:var(--line);transition:background .25s,box-shadow .25s}
.lampx.is-on{background:var(--cyan);box-shadow:none}
.vf{position:relative;width:8px;height:118px;border-radius:0;background:var(--s0);border:1px solid var(--line2)}
.vf i{position:absolute;left:50%;width:32px;height:14px;margin-left:-16px;border-radius:0;background:var(--ink);bottom:6%;transition:bottom 1.4s var(--ease);box-shadow:none}
.vf.is-on i{bottom:74%}
.xfader{position:relative;height:10px;border-radius:0;background:var(--s0);border:1px solid var(--line2);margin:12px 6px}
.xfader i{position:absolute;top:50%;left:10%;width:18px;height:32px;margin:-16px 0 0 -9px;border-radius:0;background:var(--ink);box-shadow:none;transition:left 2.6s cubic-bezier(.45,0,.2,1)}
.xfader.is-on i{left:64%}
.mirror__cap{grid-column:1/-1;display:flex;gap:14px;align-items:baseline;border-top:1px solid var(--line);padding-top:18px;min-height:3.4em;font:500 clamp(14px,1.5vw,17px)/1.5 var(--m);color:var(--ink)}
.mirror__cap .who{color:var(--mag);flex:none}
.caret::after{content:"";display:inline-block;width:.55em;height:1.1em;margin-left:3px;vertical-align:-.18em;background:var(--mag);animation:blink 1s steps(1) infinite}
.floor-notes{display:grid;gap:14px;margin-top:22px}
@media (min-width:760px){.floor-notes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.note{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border:1px solid var(--line);border-radius:0;background:rgba(19,19,19,0.5)}
.note p{font-size:15px;color:var(--mut);line-height:1.5}
.note b{display:block;color:var(--ink);font-weight:600;font-size:16px;margin-bottom:2px}
.note .chip{flex:none}

/* ── 02 zero path ─────────────────── */
.path{position:relative;margin-bottom:28px}
.path__spine{position:absolute;left:calc(100% / 12);top:22px;height:8px;width:calc(100% * 5 / 6);margin-top:-4px;overflow:visible}
.spine-bg{stroke:var(--line2);stroke-width:2;stroke-dasharray:6 8;animation:dash calc(var(--beat)*4) linear infinite}
.spine-done{stroke:var(--lime);stroke-width:2.5;filter:drop-shadow(0 0 4px var(--lime));transition:all .6s var(--ease)}
.path__list{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.path__node{display:grid;justify-items:center;gap:10px;padding-bottom:4px;text-decoration:none;color:var(--mut);font:500 12px/1.3 var(--m);text-align:center;border-radius:0}
.path__node:hover{color:var(--ink)}
.path__dot{position:relative;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line2);background:var(--bg);font:500 13px var(--m);color:var(--mut);transition:all .3s var(--ease)}
.path__dot svg{display:none;width:20px;height:20px}
.path__node.is-done .path__dot{border-color:var(--lime);color:var(--lime);background:color-mix(in oklab,var(--lime) 10%,var(--bg))}
.path__node.is-done .path__dot span{display:none}
.path__node.is-done .path__dot svg{display:block}
.path__node.is-active .path__dot{border-color:var(--mag);color:var(--ink);background:color-mix(in oklab,var(--mag) 22%,var(--bg));box-shadow:none}
.path__node.is-active{color:var(--ink)}
.path__node.is-locked{opacity:.5}
@media (max-width:700px){.path__label{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
.zero__stage{display:grid;gap:18px}
.js .zero__stage{align-items:start}
@media (min-width:980px){.js .zero__stage{grid-template-columns:300px minmax(0,1fr)}}
.minideck{position:relative;overflow:hidden;background:var(--s1);border:1px solid var(--line);border-radius:0;padding:20px;display:grid;gap:16px}
.minideck::before{content:"";position:absolute;inset:-40% -40% auto;height:80%;background:radial-gradient(closest-side,rgba(242,240,234,0.099),transparent);pointer-events:none}
.minideck__top{position:relative;display:flex;justify-content:space-between;align-items:center;gap:8px}
.minideck__pl{position:relative;display:grid;place-items:center}
.minideck .platter{max-width:200px;filter:drop-shadow(0 0 24px rgba(242,240,234,0.113))}
.minideck .spin{animation-play-state:paused}
.minideck.is-running .spin{animation-play-state:running}
.readout{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.readout div{border:1px solid var(--line);border-radius:0;padding:10px 12px;background:var(--s0)}
.readout dt{font:500 10.5px var(--m);color:var(--mut);letter-spacing:.06em}
.readout dd{margin-top:4px;font:500 19px/1 var(--m);font-variant-numeric:tabular-nums}
.metro{position:relative;display:flex;gap:12px;justify-content:center}
.metro i{width:14px;height:14px;border-radius:50%;border:1px solid var(--line2);background:var(--s0);transition:background .06s,box-shadow .06s}
.metro i.is-on{background:var(--cyan);border-color:var(--cyan);box-shadow:none}
.metro i:first-child.is-on{background:var(--lime);border-color:var(--lime);box-shadow:none}
.minideck .pad{position:relative;width:100%}
@media (max-width:979px){.minideck{grid-template-columns:110px minmax(0,1fr);align-items:center}.minideck__top,.minideck .pad,.minideck .fine{grid-column:1/-1}.minideck__pl{grid-row:span 2}}
.lesson{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.lesson__step{position:relative;background:linear-gradient(180deg,var(--s1),var(--s0));border:1px solid var(--line);border-radius:0;padding:clamp(20px,3vw,34px);display:grid;gap:20px;align-content:start}
.js .lesson__step{min-height:460px}
.js .lesson__step.is-active{animation:stepIn .45s var(--ease)}
@keyframes stepIn{from{opacity:0;transform:translateY(10px)}}
.lesson__step[hidden]{display:none}
.lesson__head{display:flex;gap:16px;align-items:center}
.lesson__icon{width:52px;height:52px;flex:none;border-radius:0;display:grid;place-items:center;border:1px solid var(--line2);color:var(--cyan);background:var(--s0)}
.lesson__icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.is-active .lesson__icon{color:var(--lime);border-color:rgba(242,240,234,0.203);box-shadow:none}
.is-active .lesson__icon svg{animation:iconBeat var(--beat) ease-out infinite}
@keyframes iconBeat{0%{transform:scale(1.14)}60%,100%{transform:scale(1)}}
.lesson__n{font:500 12px var(--m);color:var(--mut);letter-spacing:.06em}
.lesson__copy{color:var(--mut);font-size:17px;max-width:62ch}
.lesson__copy strong{color:var(--ink);font-weight:500}
.lesson__status{display:flex;gap:10px;align-items:flex-start;font:500 14px/1.5 var(--m);color:var(--mut);min-height:3em;padding:14px 16px;border:1px dashed var(--line2);border-radius:0}
.lesson__status::before{content:"coach ›";color:var(--mag);flex:none}
.lesson__status[data-state="good"]{color:var(--lime);border-style:solid;border-color:rgba(242,240,234,0.18);background:rgba(242,240,234,0.023)}
.lesson__status[data-state="warn"]{color:var(--amber);border-style:solid;border-color:rgba(255,74,43,0.4);background:rgba(255,74,43,0.05)}
.lesson__nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:4px}
.demo-row{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center}
.seq{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
@media (min-width:760px){.seq{grid-template-columns:repeat(16,minmax(0,1fr))}}
.seq .pad{min-height:56px;padding:0;font-size:11px}
.seq .pad.is-beat{border-color:var(--line2)}
.seq .pad.is-head{box-shadow:none;color:var(--ink)}
.seq .pad.is-head[aria-pressed="true"]{background:var(--lime);color:var(--bg);box-shadow:none}
.counter{font:500 clamp(54px,8vw,88px)/1 var(--m);letter-spacing:-.06em;font-variant-numeric:tabular-nums;min-width:3.3ch;transition:color .08s,text-shadow .08s}
.counter.is-one{color:var(--lime);text-shadow:0 0 28px rgba(242,240,234,0.27)}
.counter--sm{font-size:clamp(40px,5vw,56px);text-align:center}
.pad--xl{min-height:92px;min-width:136px;font-size:15px;border-radius:0}
.pad--wide{min-height:52px;padding:0 20px;font-size:13px}
.hint{font:400 13px/1.5 var(--m);color:var(--mut)}
.seg{display:inline-flex;gap:4px;padding:4px;margin:0;border:1px solid var(--line2);border-radius:0;min-width:0}
.seg legend{padding:0}
.seg label{position:relative;display:block}
.seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.seg span{display:grid;place-items:center;min-width:64px;height:40px;padding:0 12px;border-radius:0;font:500 13px var(--m);color:var(--mut);transition:all .2s}
.seg input:checked+span{background:var(--mag);color:var(--bg)}
.seg input:focus-visible+span{outline:2px solid var(--lime);outline-offset:2px}
.grid32{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.cell{height:38px;border-radius:0;border:1px solid var(--line);background:var(--s0);transition:background .12s}
.cell.is-down{border-color:rgba(242,240,234,0.315);box-shadow:none}
.cell.is-past{background:rgba(70,68,64,0.18)}
.cell.is-head{background:var(--cyan);border-color:var(--cyan);box-shadow:none}
.cell.is-down.is-head{background:var(--mag);border-color:var(--mag);box-shadow:none}
.blend{display:grid;gap:18px;align-items:center}
@media (min-width:760px){.blend{grid-template-columns:minmax(0,1fr) 200px}}
.blend__pick{display:grid;gap:10px}
.blend__pick div{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border:1px solid var(--line);border-radius:0;font:500 13px var(--m);color:var(--mut)}
.blend__pick b{font:600 22px var(--m);color:var(--ink)}
.mixrow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:14px;align-items:center}
.deckmini{border:1px solid var(--line);border-radius:0;padding:12px 14px;font:500 12px/1.45 var(--m);color:var(--mut);transition:all .3s}
.deckmini b{display:block;font-weight:500;color:inherit;font-size:13px}
.deckmini--a{border-color:rgba(157,154,147,0.225);color:var(--cyan);box-shadow:none}
.deckmini--b.is-on{border-color:rgba(242,240,234,0.27);color:var(--mag);box-shadow:none}
.fader{display:grid;gap:8px;flex:1 1 240px;min-width:0;font:500 12px var(--m);color:var(--mut)}
.fader span{display:flex;justify-content:space-between}
.fader input{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;margin:0;cursor:pointer}
.fader input::-webkit-slider-runnable-track{height:8px;border-radius:0;background:linear-gradient(90deg,var(--cyan),var(--uv) 50%,var(--mag))}
.fader input::-moz-range-track{height:8px;border-radius:0;background:linear-gradient(90deg,var(--cyan),var(--uv) 50%,var(--mag))}
.fader input::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:40px;margin-top:-16px;border-radius:0;background:var(--ink);border:0;box-shadow:none}
.fader input::-moz-range-thumb{width:24px;height:40px;border-radius:0;background:var(--ink);border:0;box-shadow:none}
.fader input:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
.lesson__cta{display:grid;gap:18px;padding:clamp(20px,3vw,32px);border-radius:0;border:1px solid rgba(242,240,234,0.158);background:radial-gradient(120% 140% at 0% 0%,rgba(242,240,234,0.072),transparent 60%),var(--s0)}
.lesson__cta .actions{margin-top:0}
.gear{display:flex;flex-wrap:wrap;gap:8px}

/* ── 03 coach ─────────────────────── */
.coach{display:grid;gap:16px}
@media (min-width:900px){.coach{grid-template-columns:repeat(2,minmax(0,1fr))}.coach__wave{grid-column:1/-1}}
.wave{width:100%;height:auto;border-radius:0;background:var(--s0)}
.w-grid{stroke:rgba(242,240,234,0.063);stroke-width:1}
.w-grid--down{stroke:rgba(242,240,234,0.171)}
.w-a{fill:rgba(157,154,147,0.279)}
.w-b{fill:rgba(242,240,234,0.261);mix-blend-mode:screen}
.wave__b{animation:realign calc(var(--beat)*16) ease-in-out infinite}
@keyframes realign{0%,58%{transform:translateX(11px)}70%,97%{transform:translateX(0)}100%{transform:translateX(11px)}}
.wave__flag{fill:var(--amber);opacity:0;animation:flag calc(var(--beat)*16) linear infinite}
@keyframes flag{0%,57%{opacity:0}59%{opacity:.5}63%{opacity:.14}66%{opacity:.4}80%{opacity:.1}100%{opacity:0}}
.wave__note{font:500 14px var(--m);fill:var(--amber);opacity:0;animation:note calc(var(--beat)*16) linear infinite}
@keyframes note{0%,58%{opacity:0}61%,88%{opacity:1}96%,100%{opacity:0}}
.wave__head{stroke:var(--ink);stroke-width:2;filter:drop-shadow(0 0 6px var(--ink));animation:head calc(var(--beat)*16) linear infinite}
@keyframes head{from{transform:translateX(0)}to{transform:translateX(1200px)}}
.coach__line{display:flex;gap:12px;margin-top:18px;font:500 clamp(14px,1.5vw,17px)/1.5 var(--m);color:var(--ink)}
.coach__line .who{color:var(--mag);flex:none}
.pc{fill:var(--s0);stroke:var(--line);stroke-width:1;animation:pc calc(var(--beat)*32) linear infinite;animation-delay:calc(var(--beat) * var(--i))}
.pc--down{stroke:rgba(242,240,234,0.315)}
@keyframes pc{0%{fill:var(--cyan)}2.5%{fill:rgba(70,68,64,0.33)}100%{fill:rgba(70,68,64,0.072)}}
.pc--down{animation-name:pcd}
@keyframes pcd{0%{fill:var(--mag);filter:drop-shadow(0 0 6px var(--mag))}3%{fill:rgba(242,240,234,0.203);filter:none}100%{fill:rgba(242,240,234,0.045)}}
.ph-lbl{font:500 11px var(--m);fill:var(--mut)}
.eq{width:100%;height:auto}
.eq-grid{stroke:var(--line);stroke-width:1}
.eq-lp,.eq-hp{fill:none;stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 5px currentColor)}
.eq-lp{stroke:var(--cyan);color:var(--cyan);animation:xa calc(var(--beat)*8) ease-in-out infinite alternate}
.eq-hp{stroke:var(--mag);color:var(--mag);animation:xa calc(var(--beat)*8) ease-in-out infinite alternate-reverse}
.eq-lpf{fill:rgba(157,154,147,0.054);animation:xa calc(var(--beat)*8) ease-in-out infinite alternate}
.eq-hpf{fill:rgba(242,240,234,0.054);animation:xa calc(var(--beat)*8) ease-in-out infinite alternate-reverse}
@keyframes xa{0%,25%{opacity:1}75%,100%{opacity:0}}
.eq-lbl{font:500 11px var(--m);fill:var(--mut)}
.voice{display:grid;gap:16px;margin-top:16px}
@media (min-width:860px){.voice{grid-template-columns:repeat(3,minmax(0,1fr))}}
.voice .card{display:grid;gap:12px;align-content:start}
.voice__ic{width:48px;height:48px;border-radius:0;display:grid;place-items:center;border:1px solid var(--line2);color:var(--lime);background:var(--s0)}
.voice__ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.voice p{color:var(--mut);font-size:15.5px;line-height:1.55}
.voice q{display:block;color:var(--ink);font:500 14px/1.5 var(--m);quotes:"“" "”"}

/* ── 04 keys ──────────────────────── */
.keys{display:grid;gap:clamp(28px,5vw,64px);align-items:center}
@media (min-width:940px){.keys{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.keys__wheel{position:relative}
.keys__wheel::before{content:"";position:absolute;inset:6%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(70,68,64,0.21),rgba(242,240,234,0.036) 60%,transparent)}
.wheel{width:100%;max-width:580px;height:auto;margin-inline:auto;overflow:visible;-webkit-tap-highlight-color:transparent}
.wheel__ring{fill:none;stroke:var(--line);stroke-width:1}
.wheel__dial{animation:spin 120s linear infinite}
.wheel:hover .wheel__dial,.wheel:focus-within .wheel__dial{animation-play-state:paused}
.wheel__dial line{stroke:var(--line2);stroke-width:1}
.wheel__dial .maj{stroke:var(--mut);stroke-width:1.5}
.wheel__node{cursor:pointer;outline:none}
.wheel__node circle{fill:var(--s1);stroke:var(--line2);stroke-width:1.5;transition:fill .2s,stroke .2s}
.wheel__node text{font:500 13px var(--m);fill:var(--mut);text-anchor:middle;pointer-events:none;transition:fill .2s}
.wheel__node:hover circle{stroke:var(--cyan);stroke-width:2.5}
.wheel__node:focus-visible circle{stroke:var(--lime);stroke-width:3.5}
.wheel__node.is-sel circle{fill:var(--mag);stroke:var(--mag);filter:drop-shadow(0 0 10px var(--mag))}
.wheel__node.is-sel text{fill:var(--bg);font-weight:700}
.wheel__node.is-compat circle{fill:rgba(242,240,234,0.063);stroke:var(--lime);filter:drop-shadow(0 0 6px rgba(242,240,234,0.338))}
.wheel__node.is-compat text{fill:var(--lime)}
.wheel__node.is-in circle{fill:var(--lime);stroke:var(--lime);animation:lpulse .7s 2}
.wheel__node.is-in text{fill:var(--bg);font-weight:700}
@keyframes lpulse{50%{filter:drop-shadow(0 0 16px var(--lime))}}
.wheel__node.is-clash circle{fill:rgba(255,74,43,0.16);stroke:var(--amber);stroke-width:2.5}
.wheel__node.is-clash text{fill:var(--amber)}
.wheel__chord{fill:none;stroke:var(--lime);stroke-width:2.5;stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(242,240,234,0.36));stroke-dasharray:460;stroke-dashoffset:460;animation:draw .55s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.wheel__clash{fill:none;stroke:var(--amber);stroke-width:2.5;stroke-dasharray:9 9;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(255,74,43,0.7))}
.wheel.is-shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.wheel__center{font:700 34px var(--f);fill:var(--ink);text-anchor:middle;letter-spacing:-.03em}
.wheel__sub{font:500 12px var(--m);fill:var(--mut);text-anchor:middle}
.wheel__ringlbl{font:500 10px var(--m);fill:var(--line2);letter-spacing:.2em}
.keys__side{display:grid;gap:20px}
.readout-card{display:grid;gap:10px}
.keys__big{display:flex;align-items:baseline;gap:14px;font-size:22px;color:var(--mut)}
.keys__big b{font:700 clamp(48px,6vw,72px)/1 var(--f);letter-spacing:-.04em;color:var(--mag);text-shadow:0 0 30px rgba(242,240,234,0.225)}
.keys__list{display:flex;flex-wrap:wrap;gap:8px}
.legend{list-style:none;margin:0;padding:0;display:grid;gap:12px;font:500 13px/1.4 var(--m);color:var(--mut)}
.legend li{display:flex;gap:12px;align-items:center}
.legend i{width:14px;height:14px;border-radius:50%;flex:none}
.keys__side .lead{font-size:16px}

/* ── 05 wire ──────────────────────── */
.lan-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.lan{width:100%;min-width:720px;height:auto}
.lan .n rect.box{fill:var(--s1);stroke:var(--line2);stroke-width:1.5}
.n-t{font:600 17px var(--f);fill:var(--ink)}
.n-s{font:400 12px var(--m);fill:var(--mut)}
.n-ring{fill:none;stroke:var(--mag);stroke-width:2}
.n-ring2{fill:none;stroke:var(--line2);stroke-width:1}
.n-dot{fill:var(--mag)}
.n-trk{stroke:var(--line2);stroke-width:4;stroke-linecap:round}
.n-th{fill:var(--ink)}
.n-port{fill:var(--s0);stroke:var(--line2)}
.n-port--on{fill:var(--lime);stroke:none;animation:blink var(--beat) steps(1) infinite}
.lan .wire-bg{stroke-width:3}
.wire{fill:none;stroke-width:3;stroke-dasharray:6 18;stroke-linecap:round;animation:wire calc(var(--beat)*2) linear infinite}
@keyframes wire{to{stroke-dashoffset:-48}}
.wire--c{stroke:var(--cyan)}.wire--l{stroke:var(--lime)}.wire--m{stroke:var(--mag);animation-delay:calc(var(--beat) * -.5)}
.lan .lbl{font:500 13px var(--m);fill:var(--mut)}
.lan .lbl--c{fill:var(--cyan)}.lan .lbl--l{fill:var(--lime)}.lan .lbl--m{fill:var(--mag)}
.sniff{fill:rgba(157,154,147,0.036);stroke:rgba(157,154,147,0.225)}
.sniff-t{font:500 13px var(--m);fill:var(--cyan)}
.sniff-d{fill:var(--cyan);animation:blink calc(var(--beat)*2) steps(1) infinite}
.scr{fill:var(--s0);stroke:var(--line2)}
.ports-wrap{overflow-x:auto;margin-top:16px;border:1px solid var(--line);border-radius:0;background:var(--s0)}
.ports{width:100%;min-width:560px;border-collapse:collapse;font-size:15px}
.ports th{font:500 12px var(--m);color:var(--mut);letter-spacing:.06em;text-align:left;padding:16px 20px;font-weight:500}
.ports td{padding:18px 20px;border-top:1px solid var(--line);vertical-align:top;color:var(--mut);line-height:1.5}
.ports td:first-child{font:500 15px var(--m);white-space:nowrap}
.ports td b{color:var(--ink);font-weight:500}
.wire__fine{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}

/* ── 06 get in ────────────────────── */
.getin{display:grid;gap:18px}
@media (min-width:960px){.getin{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.install{background:#0c0c0c;border:1px solid var(--line2);border-radius:0;overflow:hidden;box-shadow:none}
.install__bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px 12px 18px;border-bottom:1px solid var(--line);font:500 12px var(--m);color:var(--mut)}
.install pre{margin:0;padding:22px;font:400 14px/2 var(--m);overflow-x:auto;color:var(--ink)}
.install .pr{color:var(--mag);user-select:none}
.install .cm{color:var(--mut)}
.install .fl{color:var(--cyan)}
.copy{appearance:none;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line2);background:transparent;color:var(--mut);font:500 12px var(--m);border-radius:0;height:36px;padding:0 16px;cursor:pointer;transition:all .2s}
.copy:hover{color:var(--lime);border-color:var(--lime)}
.copy.is-copied{color:var(--bg);background:var(--lime);border-color:var(--lime)}
.getin__cta{display:grid;gap:22px;align-content:start;padding:clamp(22px,3vw,34px);border:1px solid var(--line);border-radius:0;background:radial-gradient(120% 100% at 100% 0%,rgba(70,68,64,0.15),transparent 60%),var(--s1)}
.getin__cta .actions{margin-top:0}
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.plans div{border:1px solid var(--line);border-radius:0;padding:16px 18px;background:var(--s0)}
.plans dt{font:500 12px var(--m);color:var(--lime);letter-spacing:.06em}
.plans dd{margin-top:8px;font-size:22px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.plans dd small{display:block;font:400 12px var(--m);color:var(--mut);letter-spacing:0;margin-top:6px}
.companion{grid-column:1/-1;display:grid;gap:16px;align-items:center;padding:clamp(20px,3vw,28px);border:1px dashed var(--line2);border-radius:0}
@media (min-width:760px){.companion{grid-template-columns:auto minmax(0,1fr) auto}}
.companion h3{font-size:20px;letter-spacing:-.02em}
.companion p{color:var(--mut);font-size:15.5px;margin-top:4px;max-width:70ch}
.companion__ic{display:flex;gap:8px;align-items:flex-end;color:var(--cyan)}
.companion__ic svg{fill:none;stroke:currentColor;stroke-width:1.6}
.marquee{position:relative;border-block:1px solid var(--line);overflow:hidden;padding-block:clamp(20px,3vw,30px);margin-top:clamp(64px,9vw,120px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee__track{display:flex;width:max-content;animation:marquee calc(var(--beat)*32) linear infinite}
.marquee__group{display:flex;align-items:center;gap:clamp(24px,4vw,56px);padding-right:clamp(24px,4vw,56px);font:500 clamp(22px,3.6vw,48px)/1 var(--m);letter-spacing:-.03em;white-space:nowrap}
.marquee__group .d{font-size:.5em}
.marquee__group .d:nth-of-type(4n+1){color:var(--mag)}.marquee__group .d:nth-of-type(4n+2){color:var(--lime)}.marquee__group .d:nth-of-type(4n+3){color:var(--cyan)}.marquee__group .d:nth-of-type(4n){color:var(--uv)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ── footer ───────────────────────── */
.foot{position:relative;padding-bottom:40px;overflow:hidden}
.crowd{display:block;width:100%;height:auto;color:var(--uv);-webkit-mask-image:linear-gradient(transparent,#000 70%);mask-image:linear-gradient(transparent,#000 70%)}
.fig{opacity:.2;transform-box:fill-box;transform-origin:50% 100%;animation:sway calc(var(--beat)*2) ease-in-out infinite alternate;animation-delay:calc(var(--beat) * var(--i) * -.3)}
.fig--b{opacity:.1}
.fig path{stroke:currentColor;stroke-width:5;stroke-linecap:round;fill:currentColor}
@keyframes sway{from{transform:rotate(-3deg) translateY(1px)}to{transform:rotate(3deg) translateY(-2px)}}
.foot__row{display:flex;flex-wrap:wrap;gap:20px 32px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:28px}
.foot__tag{font:500 13px var(--m);color:var(--mut)}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.foot .fine{margin-top:20px}

/* ── reduced motion ───────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-reveal]{opacity:1;transform:none}
  .courier{offset-distance:50%}
  .wave__b{transform:none}
  .wave__flag{opacity:.14}
  .wave__note{opacity:1}
  .wave__head{transform:translateX(1188px)}
  .pc{fill:rgba(70,68,64,0.18)}.pc--down{fill:rgba(242,240,234,0.135)}
  .eq-hp,.eq-hpf{opacity:0}
  .wheel__chord{stroke-dashoffset:0}
  .marquee__track{transform:none}
}

/* ── concrete skin ───────────────── */
body{font-size:16.5px}
body::after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

.hex,.brand svg,.minideck .platter,.wheel__node circle,.wheel__chord,.wheel__clash,.wave__head,.eq-lp,.eq-hp,.spine-done,.lamp--on,.pc--down,.tick,.hex-o{filter:none!important}
::selection{background:var(--ink);color:var(--bg)}
.top{background:rgba(11,11,11,.9);border-bottom:1px solid var(--line2)}
.brand{font-weight:700;letter-spacing:-.03em}
.nav a{border-radius:0}
.nav a:hover{background:var(--ink);color:var(--bg)}
.nav a:hover span{color:var(--bg)}
.btn{font:500 14px/1 var(--m);letter-spacing:.02em;height:50px;padding:0 22px}
.btn--primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn--primary:hover{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost{background:transparent;border-color:var(--line2);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);color:var(--ink);background:transparent}
.btn--lg{height:58px;font-size:15px}
.chip{border-radius:0;background:transparent;text-transform:none}
.chip--lime,.chip--mag,.chip--demo{color:var(--ink);border-color:var(--ink)}
.chip--cyan{color:var(--mut);border-color:var(--line2)}
.chip--amber{color:var(--sig);border-color:var(--sig)}
.beacon{background:var(--sig);animation:blink calc(var(--beat)*2) steps(1) infinite}
.kicker{border:0;background:none;padding:0;color:var(--mut);letter-spacing:.14em;text-transform:uppercase;font-size:11.5px}
.h-hero{font-size:clamp(58px,10.5vw,164px);line-height:.84;letter-spacing:-.065em;max-width:11ch}
.h-hero em{color:var(--mut)}
.h2{font-size:clamp(40px,6.4vw,92px);line-height:.88;letter-spacing:-.055em}
.eyebrow{color:var(--ink);letter-spacing:.14em;text-transform:uppercase;font-size:11.5px}
.eyebrow::before{width:28px;height:1px;background:var(--ink)}
.lead{color:var(--mut)}
.hero__glow{display:none}
.hero__grid{opacity:.35;background-size:120px 120px}
.hero__sub span{color:var(--mut)}
.section--rule{border-top:1px solid var(--line2)}
.section__head::before{display:none}
.spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line2);border-left:1px solid var(--line2);margin-top:clamp(28px,4vw,48px)}
@media (min-width:860px){.spec{grid-template-columns:repeat(5,minmax(0,1fr))}}
.spec div{padding:16px 18px;border-right:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.spec dt{font:500 10.5px var(--m);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.spec dd{margin-top:8px;font:500 15px/1.3 var(--m);color:var(--ink)}
.card,.window,.install,.lesson__step,.minideck,.getin__cta,.note,.ports-wrap,.companion{background:var(--s1);border-color:var(--line2)}
.getin__cta,.lesson__cta{background:var(--s0)}
.lesson__cta{border-color:var(--line2)}
.deck,.mixer{background:var(--s0)}
.minideck::before,.keys__wheel::before{display:none}
.pad.is-on,.pad[aria-pressed="true"]{color:var(--bg);background:var(--ink);border-color:var(--ink);box-shadow:none}
.seq .pad.is-head{box-shadow:inset 0 -3px 0 var(--sig)}
.seq .pad.is-head[aria-pressed="true"]{background:var(--ink);color:var(--bg);box-shadow:inset 0 -3px 0 var(--sig)}
.path__dot{border-radius:0}
.path__node.is-active .path__dot{background:var(--ink);color:var(--bg);border-color:var(--ink);box-shadow:0 0 0 4px var(--bg),0 0 0 5px var(--ink)}
.path__node.is-done .path__dot{background:var(--bg);color:var(--ink);border-color:var(--ink)}
.spine-done{stroke:var(--ink)}
.lesson__status{border-radius:0}
.lesson__status::before{color:var(--ink)}
.lesson__status[data-state="good"]{color:var(--bg);background:var(--ink);border-color:var(--ink)}
.lesson__status[data-state="good"]::before{color:var(--bg)}
.lesson__status[data-state="warn"]{color:var(--sig);border-color:var(--sig);background:repeating-linear-gradient(-45deg,rgba(255,74,43,.08) 0 6px,transparent 6px 12px)}
.lesson__icon,.voice__ic{border-radius:0;color:var(--ink)}
.is-active .lesson__icon{border-color:var(--ink)}
.counter.is-one{color:var(--ink);background:var(--ink);color:var(--bg);padding:0 .08em}
.cell{border-radius:0}
.cell.is-down{border-color:var(--ink);box-shadow:none}
.cell.is-past{background:#2a2a2a}
.cell.is-head{background:var(--mut);border-color:var(--mut)}
.cell.is-down.is-head{background:var(--ink);border-color:var(--ink)}
.metro i{border-radius:0}
.metro i.is-on{background:var(--mut);border-color:var(--mut)}
.metro i:first-child.is-on{background:var(--ink);border-color:var(--ink)}
.seg input:checked+span{background:var(--ink);color:var(--bg)}
.lampx{border-radius:0}.lampx.is-on{background:var(--sig)}
.lamp--on{fill:var(--sig)}
@keyframes lamp{0%{fill:#2a2a2a}25%,100%{fill:#ff4a2b}}
.mirror__cap .who,.coach__line .who{color:var(--sig)}
.caret::after{background:var(--ink)}
.deckmini--a{border-color:var(--ink);color:var(--ink)}
.deckmini--b.is-on{border-color:var(--ink);color:var(--bg);background:var(--ink)}
.fader input::-webkit-slider-runnable-track{background:var(--line2);height:2px}
.fader input::-moz-range-track{background:var(--line2);height:2px}
.fader input::-webkit-slider-thumb{border-radius:0;margin-top:-19px;background:var(--ink)}
.fader input::-moz-range-thumb{border-radius:0;background:var(--ink)}
.w-grid{stroke:rgba(242,240,234,.08)}.w-grid--down{stroke:rgba(242,240,234,.28)}
.w-a{fill:rgba(242,240,234,.72)}
.w-b{fill:none;stroke:#f2f0ea;stroke-width:1.2;mix-blend-mode:normal;opacity:.9}
.wave{border-radius:0;background:#0e0e0e}
.wave__flag{fill:var(--sig)}.wave__note{fill:var(--sig)}
.pc{stroke:#2a2a2a}
@keyframes pc{0%{fill:#f2f0ea}3%{fill:#5a5854}100%{fill:#161616}}
@keyframes pcd{0%{fill:#f2f0ea}3%{fill:#8a8780}100%{fill:#1e1e1e}}
.pc--down{stroke:#f2f0ea}
.eq-lp{stroke:var(--ink)}.eq-hp{stroke:var(--mut);stroke-dasharray:5 5}
.eq-lpf{fill:rgba(242,240,234,.07)}.eq-hpf{fill:rgba(157,154,147,.06)}
.hex{fill:#0b0b0b;stroke:var(--ink);stroke-width:1.5}.eye{stroke:var(--ink);stroke-width:2}.pupil{fill:var(--sig)}
.courier{fill:var(--ink)}.courier--c{fill:var(--mut)}
.tick{stroke:#232323}.tick--down{stroke:#3d3d3d}
@keyframes tick{0%,3%{stroke:#f2f0ea}14%,100%{stroke:#232323}}
.meter{fill:var(--ink)}
.devpad--m{fill:#9d9a93}
.sc-lbl--lime{fill:var(--ink)}
.wheel__node circle{fill:#0e0e0e;stroke:#3d3d3d}
.wheel__node.is-sel circle{fill:var(--ink);stroke:var(--ink)}
.wheel__node.is-compat circle{fill:transparent;stroke:var(--ink);stroke-width:2}
.wheel__node.is-compat text{fill:var(--ink)}
.wheel__node.is-in circle{fill:var(--ink);stroke:var(--ink)}
.wheel__node.is-clash circle{fill:rgba(255,74,43,.12);stroke:var(--sig)}
.wheel__node.is-clash text{fill:var(--sig)}
.wheel__chord{stroke:var(--ink);stroke-width:1.5}
.wheel__clash{stroke:var(--sig);stroke-width:2}
.keys__big b{color:var(--ink)}
.readout div,.plans div,.blend__pick div,.deckmini{border-radius:0}
.plans dt{color:var(--mut);text-transform:uppercase;letter-spacing:.14em;font-size:10.5px}
.ports th{text-transform:uppercase;letter-spacing:.14em;font-size:10.5px}
.install .pr{color:var(--mut)}.install .fl{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.copy{border-radius:0}.copy:hover{color:var(--bg);background:var(--ink);border-color:var(--ink)}
.copy.is-copied{background:var(--ink);color:var(--bg)}
.wire--c{stroke:var(--mut)}.wire--l{stroke:var(--ink)}.wire--m{stroke:var(--sig)}
.lan .lbl--c{fill:var(--mut)}.lan .lbl--l{fill:var(--ink)}.lan .lbl--m{fill:var(--sig)}
.n-ring{stroke:var(--ink)}.n-dot{fill:var(--sig)}.n-port--on{fill:var(--ink)}
.sniff{fill:transparent;stroke:var(--ink)}.sniff-t{fill:var(--ink)}.sniff-d{fill:var(--sig)}
.marquee{border-color:var(--line2);-webkit-mask-image:none;mask-image:none;background:var(--ink);color:var(--bg)}
.marquee__group{font-weight:500;text-transform:uppercase;letter-spacing:-.02em}
.marquee__group .d,.marquee__group .d:nth-of-type(n){color:var(--bg);font-size:.4em}
.crowd{color:#f2f0ea}.fig{opacity:.07}.fig--b{opacity:.04}
.companion{border-style:solid}
.companion__ic{color:var(--mut)}
@media (prefers-reduced-motion:reduce){body::after{animation:none}}

/* ── v3 · cast concrete + hardware ── */
:root{--d:"Big Shoulders Display","Instrument Sans",sans-serif;--stencil:"Big Shoulders Stencil Display","Big Shoulders Display",sans-serif;--wall:rgba(13,13,12,.9)}
body{background-color:#0d0d0c;background-image:linear-gradient(var(--wall),var(--wall)),url("concrete.jpg");background-size:auto,768px 768px}
.hero{background-image:radial-gradient(ellipse 62% 58% at 50% -4%,rgba(13,13,12,.34),rgba(13,13,12,.78) 55%,rgba(13,13,12,.92) 80%),url("concrete.jpg");background-size:auto,768px 768px;background-position:center top}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:180px;z-index:-1;background:linear-gradient(transparent,rgba(8,8,7,.7));pointer-events:none}
.hero__grid{display:none}
.section{background-image:radial-gradient(ellipse 55% 42% at 18% 0%,rgba(13,13,12,.62),rgba(13,13,12,.9) 70%),url("concrete.jpg");background-size:auto,768px 768px}
.section--rule{border-top:1px solid #050505;box-shadow:inset 0 1px 0 rgba(255,250,240,.05)}
.section .wrap{position:relative}
.secnum{position:absolute;right:clamp(20px,4.5vw,48px);top:-.08em;z-index:-1;font:900 clamp(140px,24vw,340px)/.8 var(--stencil);letter-spacing:-.02em;color:rgba(242,240,234,.075);mix-blend-mode:screen;text-shadow:0 0 2px rgba(242,240,234,.05),0 0 18px rgba(242,240,234,.03);pointer-events:none;user-select:none}
.cast{background-image:linear-gradient(170deg,rgba(242,240,234,.72),rgba(242,240,234,.42) 60%,rgba(242,240,234,.3)),url("concrete.jpg");background-size:auto,520px 520px;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 -1px 0 rgba(255,252,245,.16)) drop-shadow(0 2px 0 rgba(0,0,0,.85)) drop-shadow(0 22px 26px rgba(0,0,0,.55))}
.h-hero,.h2,.h3,.brand,.companion h3,.keys__big b,.plans dd,.wheel__center{font-family:var(--d)}
.h-hero{font-weight:800;font-size:clamp(74px,13.2vw,212px);line-height:.87;letter-spacing:-.018em;max-width:10ch;margin-top:32px}
.h-hero em{display:block;background-image:linear-gradient(170deg,rgba(242,240,234,.34),rgba(242,240,234,.16)),url("concrete.jpg");background-size:auto,520px 520px;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.h2{font-weight:800;font-size:clamp(52px,7.8vw,124px);line-height:.84;letter-spacing:-.012em;max-width:13ch}
.h3{font-weight:700;font-size:clamp(26px,2.6vw,34px);letter-spacing:0;line-height:1}
.brand{font-weight:800;font-size:22px;letter-spacing:.005em}
.hero__sub{font-family:var(--d);font-weight:600;font-size:clamp(28px,3vw,40px);line-height:1.02;letter-spacing:0;max-width:16ch}
.keys__big b{font-weight:800;font-size:clamp(64px,8vw,104px)}
.plans dd{font-weight:800;font-size:34px;letter-spacing:0}
.wheel__center{font-weight:800;font-size:40px}
.marquee__group{font-family:var(--d);font-weight:800;font-size:clamp(34px,5.4vw,76px);letter-spacing:.005em}
.eyebrow,.kicker{font-size:11px;letter-spacing:.2em}
.eyebrow b{color:var(--mut)}
/* slabs */
.card,.lesson__step,.minideck,.getin__cta,.note,.ports-wrap,.companion{background-color:#121211;background-image:linear-gradient(rgba(16,16,15,.84),rgba(16,16,15,.93)),url("concrete.jpg");background-size:auto,768px 768px;border:1px solid #060606;box-shadow:inset 0 1px 0 rgba(255,250,240,.06),inset 0 -1px 0 rgba(0,0,0,.5),0 1px 0 rgba(255,250,240,.03),0 34px 60px -34px rgba(0,0,0,.9)}
.lesson__cta{background:linear-gradient(180deg,#141413,#0d0d0c);border:1px solid #060606;box-shadow:inset 0 1px 0 rgba(255,250,240,.05)}
/* hardware: anodised aluminium, rubber, backlight */
.window{background:linear-gradient(180deg,#1b1b1a,#111110);border:1px solid #040404;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 2px 0 #050505,0 60px 90px -40px rgba(0,0,0,.95)}
.window__bar{background:linear-gradient(180deg,#232322,#171716);border-bottom:1px solid #050505;box-shadow:inset 0 -1px 0 rgba(255,255,255,.03)}
.window__dots i{border-radius:50%;background:#0a0a0a;box-shadow:inset 0 1px 1px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.06)}
.deck,.mixer{background:repeating-linear-gradient(90deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px),linear-gradient(180deg,#191918,#0f0f0e);border:1px solid #050505;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.03)}
.pad{background:linear-gradient(180deg,#1f1f1e,#131312);border:1px solid #050505;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 2px 0 #040404,0 3px 6px rgba(0,0,0,.5);color:#8d8a83;border-radius:3px}
button.pad:hover{color:var(--ink);border-color:#050505}
button.pad:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 0 0 #040404}
.pad.is-on,.pad[aria-pressed="true"]{background:linear-gradient(180deg,#fbf9f4,#dcd9d1);color:#0b0b0b;border-color:#050505;box-shadow:inset 0 1px 0 #fff,0 2px 0 #040404,0 0 22px rgba(242,240,234,.22)}
.seq .pad.is-head{box-shadow:inset 0 -3px 0 var(--sig),inset 0 1px 0 rgba(255,255,255,.07),0 2px 0 #040404}
.seq .pad.is-head[aria-pressed="true"]{background:linear-gradient(180deg,#fff,#e6e3dc);box-shadow:inset 0 -3px 0 var(--sig),0 2px 0 #040404,0 0 26px rgba(242,240,234,.35)}
.lampx{border-radius:50%;background:#1a0c0a;box-shadow:inset 0 1px 2px rgba(0,0,0,.9)}
.lampx.is-on{background:radial-gradient(circle at 40% 35%,#ffb3a4,#ff4a2b 55%,#b0240f);box-shadow:0 0 12px rgba(255,74,43,.7)}
.vf,.xfader{background:#050505;border:1px solid #000;box-shadow:inset 0 1px 2px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.05)}
.vf i,.xfader i{background:linear-gradient(180deg,#f4f2ed,#bdbab3);box-shadow:inset 0 1px 0 #fff,0 3px 5px rgba(0,0,0,.7);border-radius:2px}
.vf i::after,.xfader i::after{content:"";position:absolute;left:15%;right:15%;top:50%;height:1px;background:#0b0b0b}
.xfader i::after{left:50%;right:auto;width:1px;top:15%;bottom:15%;height:auto}
.readout div,.spec div{background:#080808;box-shadow:inset 0 1px 3px rgba(0,0,0,.8),0 1px 0 rgba(255,250,240,.04)}
.readout dd,.deck__bpm,.counter{color:#f2f0ea;text-shadow:0 0 12px rgba(242,240,234,.18)}
.counter.is-one{background:none;color:#fff;text-shadow:0 0 22px rgba(255,255,255,.5)}
.metro i{border-radius:50%;background:#0a0a0a;box-shadow:inset 0 1px 2px #000}
.metro i.is-on{background:radial-gradient(circle at 40% 35%,#fff,#c9c6bf);box-shadow:0 0 12px rgba(242,240,234,.5)}
.metro i:first-child.is-on{background:radial-gradient(circle at 40% 35%,#ffb3a4,#ff4a2b 60%);box-shadow:0 0 12px rgba(255,74,43,.7)}
.spec{border:1px solid #050505;background:#050505;gap:1px;border-left:0}
.spec div{border:0}
.install{background:#070707;border:1px solid #000;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 40px 70px -40px rgba(0,0,0,.95)}
.install pre{text-shadow:0 0 8px rgba(242,240,234,.2)}
.install__bar{background:linear-gradient(180deg,#191918,#111110);border-bottom:1px solid #000}
.wave{background:#070707;box-shadow:inset 0 1px 4px rgba(0,0,0,.9)}
.lan-wrap{background:#0b0b0a;box-shadow:inset 0 1px 4px rgba(0,0,0,.8)}
/* keys: physical buttons */
.btn{border-radius:2px;font:500 13.5px/1 var(--m);letter-spacing:.04em}
.btn--primary{background:linear-gradient(180deg,#f7f5f0,#d8d5cd);color:#0b0b0b;border:1px solid #050505;box-shadow:inset 0 1px 0 #fff,0 2px 0 #6f6c66,0 3px 0 #050505,0 14px 22px -10px rgba(0,0,0,.9)}
.btn--primary:hover{background:linear-gradient(180deg,#fff,#e6e3dc);color:#0b0b0b;border-color:#050505}
.btn--primary:active{transform:translateY(2px);box-shadow:inset 0 1px 0 #fff,0 0 0 #6f6c66,0 1px 0 #050505}
.btn--ghost{background:linear-gradient(180deg,#1e1e1d,#141413);border:1px solid #050505;color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 2px 0 #050505,0 12px 20px -12px rgba(0,0,0,.9)}
.btn--ghost:hover{background:linear-gradient(180deg,#262625,#181817);border-color:#050505;color:#fff}
.btn--ghost:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.chip{border-color:#3a3936}
.top{background:rgba(12,12,11,.86);border-bottom:1px solid #050505;box-shadow:0 1px 0 rgba(255,250,240,.04)}
.marquee{background-color:#dcd9d1;background-image:linear-gradient(rgba(236,233,226,.78),rgba(222,219,211,.82)),url("concrete.jpg");background-size:auto,768px 768px;border-color:#050505;color:#0b0b0b}
.marquee__group span:not(.d){color:#0b0b0b;opacity:.9;mix-blend-mode:multiply}
.lesson__status[data-state="good"]{background:linear-gradient(180deg,#f7f5f0,#dcd9d1);color:#0b0b0b}
.foot{background:linear-gradient(transparent,rgba(5,5,5,.6))}