:root{--void:#0c0f14;--floor:#11151c;--glass:#1f2530b8;--hair:#ffffff14;--text:#e6ebf2;--text-2:#a3adbc;--text-3:#7d889a;--lamp:#eaf2ff;--accent:#78aeff;--font:"Instrument Sans Variable", "Instrument Sans", system-ui, sans-serif;--gutter:clamp(16px, 5vw, 64px);--measure:34rem;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--void);color:var(--text);font:400 17px/1.55 var(--font);-webkit-font-smoothing:antialiased;margin:0;font-stretch:100%}a{color:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}code{font:inherit;color:var(--text);font-weight:600}h1,h2,h3{letter-spacing:-.015em;text-wrap:balance;margin:0;font-weight:700;font-stretch:75%;line-height:1}h2{font-size:clamp(34px,5vw,56px)}h3{font-size:26px}p{text-wrap:pretty;margin:0}.top{z-index:10;padding:14px var(--gutter);-webkit-backdrop-filter:blur(16px)saturate(1.3);backdrop-filter:blur(16px)saturate(1.3);border-bottom:1px solid var(--hair);background:#0c0f14b8;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.brand{align-items:center;gap:10px;font-weight:650;font-stretch:90%;text-decoration:none;display:flex}.brand-mark{width:28px;height:28px;color:var(--lamp);background:linear-gradient(#2a3140,#1a1f29);border-radius:8px;place-items:center;display:grid;box-shadow:inset 0 1px #ffffff29,0 0 0 1px #00000080}.btn{background:var(--lamp);color:#0e1116;white-space:nowrap;border-radius:999px;justify-content:center;align-items:center;min-height:48px;padding:0 24px;font-size:16px;font-weight:650;text-decoration:none;transition:transform .15s,box-shadow .15s;display:inline-flex;box-shadow:0 0 0 1px #fff3,0 10px 30px -10px #aacdff73}.btn:hover{transform:translateY(-1px);box-shadow:0 0 0 1px #ffffff4d,0 14px 36px -10px #aacdff99}.btn:active{transform:translateY(0)}.btn-small{min-height:38px;padding:0 18px;font-size:14px}.btn-quiet{color:var(--text);box-shadow:inset 0 0 0 1px var(--hair), inset 0 1px 0 #ffffff0f;background:0 0}.btn-quiet:hover{background:#ffffff0d;box-shadow:inset 0 0 0 1px #ffffff29}main>section{padding:clamp(64px, 8.5vw, 116px) var(--gutter);max-width:1280px;margin:0 auto}.section-lede{max-width:var(--measure);color:var(--text-2);margin-top:20px}.hero{gap:clamp(48px,7vw,88px);display:grid;padding-top:clamp(56px,9vw,120px)!important}.hero h1{letter-spacing:-.03em;max-width:11ch;font-size:clamp(56px,10.5vw,148px);font-stretch:75%;line-height:.9}.lede{max-width:var(--measure);color:var(--text-2);margin-top:28px;font-size:clamp(17px,1.6vw,20px)}.actions{flex-wrap:wrap;gap:12px;margin-top:36px;display:flex}.grid-figure{background:var(--glass);border-radius:18px;margin:0;padding:clamp(14px,2vw,22px);box-shadow:0 0 0 1px #0000008c,inset 0 1px #ffffff14,0 40px 100px -40px #000000e6}.grid{gap:clamp(4px,.6vw,7px);display:grid}.grid-row{grid-template-columns:9.5rem repeat(var(--steps), 1fr);align-items:center;gap:clamp(2px,.35vw,5px);display:grid}.grid-label{color:var(--text-3);white-space:nowrap;text-overflow:ellipsis;padding-right:10px;font-size:13px;font-stretch:90%;overflow:hidden}.cell{aspect-ratio:3/4;background:#ffffff0e;border-radius:5px;position:relative;box-shadow:inset 0 1px #ffffff0a}.cell.beat{margin-left:clamp(2px,.4vw,6px)}.cell.bar2:not(.on){background:#ffffff09}.cell.on{background:var(--c);box-shadow:0 0 18px -4px var(--c), inset 0 1px 0 #ffffff59}.cell.on[style*=--len]:after{content:"";width:calc((var(--len) - 1) * 100% + (var(--len) - 1) * clamp(2px, .35vw, 5px) + 30%);background:var(--c);opacity:.55;border-radius:3px;position:absolute;top:38%;bottom:38%;left:60%}.cell.now:not(.on){background:#ffffff1f}.cell.hit{animation:.32s ease-out hit}@keyframes hit{0%{filter:brightness(1.7);transform:scale(1.12)}}.grid-figure figcaption{color:var(--text-3);justify-content:space-between;gap:16px;margin-top:16px;padding-left:2px;font-size:14px;display:flex}.bpm b{color:var(--text);font-variant-numeric:tabular-nums;font-weight:650}.player{box-shadow:0 0 0 1px #0009, 0 0 0 1px var(--hair), 0 50px 120px -40px #000000f2;background:#000;border-radius:18px;margin-top:40px;position:relative;overflow:hidden}.player video{aspect-ratio:16/9;background:#000;width:100%;display:block}.play{color:#0e1116;min-height:64px;font:650 18px/1 var(--font);white-space:nowrap;cursor:pointer;background:#eaf2fff0;border:0;border-radius:999px;align-items:center;gap:14px;padding:0 30px 0 26px;transition:scale .15s;display:inline-flex;position:absolute;top:50%;left:50%;translate:-50% -50%;box-shadow:0 0 0 1px #ffffff40,0 20px 60px -16px #000c}.play:hover{scale:1.04}.play[hidden]{display:none}.window-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,6vw,96px);margin:48px 0 0;display:grid}.window-list>div{border-top:1px solid var(--hair);padding:28px 0}.window-list dt{align-items:center;gap:14px;font-size:22px;font-weight:650;font-stretch:85%;display:flex}.window-list dd{max-width:var(--measure);color:var(--text-2);margin:10px 0 0}kbd{min-width:40px;height:30px;color:var(--text);font:650 14px/1 var(--font);background:linear-gradient(#2a3140,#1c222c);border-radius:7px;place-items:center;padding:0 8px;display:inline-grid;box-shadow:inset 0 1px #ffffff24,0 2px #0009}.steps{counter-reset:step;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);margin:48px 0 0;padding:0;list-style:none;display:grid}.steps li{counter-increment:step}.steps li:before{content:counter(step);color:var(--text-3);margin-bottom:18px;font-size:64px;font-weight:700;font-stretch:75%;line-height:1;display:block}.steps p{color:var(--text-2);margin-top:12px}.free{text-align:center}.free h2{letter-spacing:-.03em;font-size:clamp(44px,7.5vw,104px)}.free p{max-width:var(--measure);color:var(--text-2);margin:24px auto 36px}.foot{padding:32px var(--gutter) 48px;border-top:1px solid var(--hair);color:var(--text-3);flex-wrap:wrap;justify-content:space-between;gap:12px 32px;font-size:14px;display:flex}.foot a{color:var(--text-2);text-underline-offset:3px}@media (width<=760px){.grid-row{grid-template-columns:repeat(16,1fr)}.grid-label,.cell.bar2{display:none}.window-list,.steps{grid-template-columns:minmax(0,1fr)}.actions .btn{flex:1}.play{min-height:52px;padding:0 22px 0 20px;font-size:15px}.grid-figure figcaption{font-size:13px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}section[id]{scroll-margin-top:72px}