:root{--bg:#010803;--panel:#04130a;--panel-2:#071d0f;--line:#10381c;--text:#d4ffdd;--muted:#5f9d6d;--accent:#3dff7a;--accent-2:#b8ffcc;--hit:#3dff7a;--miss:#ff4fd8;--on-accent:#021006;--tile:64px;--ease:cubic-bezier(.2, .8, .2, 1);--font-mono:"JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:var(--font-mono);background:var(--bg);color:var(--text)}body:after{content:"";z-index:100;pointer-events:none;background:repeating-linear-gradient(#0000 0 2px,#00000029 2px 3px),radial-gradient(#0000 58%,#0000008c 100%);position:fixed;inset:0}*{box-sizing:border-box}html,body,#app{height:100%;margin:0}body{overflow:hidden}button,input,select{font:inherit;color:inherit}a{color:var(--accent)}kbd,.mono{font-family:var(--font-mono)}kbd{border:1px solid var(--line);background:var(--panel-2);border-bottom-width:2px;border-radius:6px;padding:.1em .45em;font-size:.85em}.screen{flex-direction:column;height:100%;display:flex}.home{padding:3rem 1.5rem 4rem;overflow-y:auto}.home-inner{gap:2rem;width:min(980px,100%);margin:0 auto;display:grid}.brand h1{letter-spacing:-.03em;background:linear-gradient(90deg, var(--accent), var(--accent-2));color:#0000;-webkit-background-clip:text;background-clip:text;margin:0;font-size:clamp(2.2rem,5vw,3.4rem)}.brand p{color:var(--muted);margin:.4rem 0 0;font-size:1.1rem}.how{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;display:grid}.how div{background:var(--panel);border:1px solid var(--line);color:var(--muted);border-radius:14px;padding:1rem 1.1rem;line-height:1.45}.how strong{color:var(--text);margin-bottom:.25rem;display:block}.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1.25rem 1.4rem}.card h2{color:var(--muted);letter-spacing:.04em;text-transform:uppercase;margin:0 0 1rem;font-size:1rem;font-weight:600}.settings{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.1rem 1.6rem;display:grid}.field{gap:.45rem;min-width:0;display:grid}.field select,.field input[type=text]{width:100%;min-width:0}.field>span{color:var(--muted);font-size:.85rem}.field input[type=text],.field select{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:.6rem .75rem}.field input[type=range]{accent-color:var(--accent)}.segmented{flex-wrap:wrap;gap:.35rem;display:flex}.segmented button{background:var(--panel-2);border:1px solid var(--line);cursor:pointer;border-radius:999px;padding:.4rem .85rem;font-size:.9rem}.segmented button[aria-pressed=true]{background:color-mix(in srgb, var(--accent) 18%, var(--panel-2));border-color:var(--accent)}.hint{color:var(--muted);font-size:.8rem}.actions{flex-wrap:wrap;align-items:center;gap:.8rem;display:flex}.btn{border:1px solid var(--line);background:var(--panel-2);cursor:pointer;border-radius:12px;padding:.8rem 1.3rem;font-weight:600}.btn:hover{border-color:var(--muted)}.btn.primary{background:linear-gradient(90deg, var(--accent), var(--accent-2));color:var(--on-accent);border:none}.recommendation table{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%}.recommendation td,.recommendation th{text-align:left;border-bottom:1px solid var(--line);padding:.35rem .5rem}.recommendation tr.best td{color:var(--accent);font-weight:600}.hud{grid-template-columns:1fr auto 1fr;align-items:center;gap:1.5rem;padding:1rem 1.6rem .6rem;display:grid}.hud .rate{font-variant-numeric:tabular-nums}.hud .rate b{letter-spacing:-.02em;font-size:2.6rem}.hud .rate span{color:var(--muted);margin-left:.4rem}.hud .clock{font-variant-numeric:tabular-nums;text-align:center;font-size:1.6rem}.hud .counts{font-variant-numeric:tabular-nums;color:var(--muted);justify-self:end;gap:1.2rem;display:flex}.hud .counts .ok{color:var(--hit)}.hud .counts .ko{color:var(--miss)}.timebar{background:var(--line);border-radius:2px;height:3px;margin:0 1.6rem;overflow:hidden}.timebar div{background:linear-gradient(90deg, var(--accent), var(--accent-2));transform-origin:0;height:100%}.stage{flex:1;position:relative;overflow:hidden}.stage-footer{color:var(--muted);justify-content:space-between;padding:.6rem 1.6rem 1rem;font-size:.85rem;display:flex}.countdown{color:var(--accent);pointer-events:none;z-index:5;place-items:center;font-size:9rem;font-weight:700;display:grid;position:absolute;inset:0}.countdown small{color:var(--muted);text-align:center;font-size:1rem;font-weight:400;display:block}.track{position:absolute;inset:0}.tile{width:var(--tile);height:var(--tile);margin:calc(var(--tile) / -2) 0 0 calc(var(--tile) / -2);background:var(--panel-2);border:1px solid var(--line);font-size:calc(var(--tile) * .5);color:var(--accent);text-shadow:0 0 14px color-mix(in srgb, var(--accent) 70%, transparent);transition:transform 90ms var(--ease), opacity .12s linear, background-color .12s linear;will-change:transform, opacity;border-radius:14px;place-items:center;font-weight:650;display:grid;position:absolute;top:0;left:0}.tile.current{background:color-mix(in srgb, var(--accent) 22%, var(--panel-2));border-color:var(--accent);color:var(--accent-2);text-shadow:0 0 18px var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent), 0 0 32px color-mix(in srgb, var(--accent) 35%, transparent)}.tile.hit{border-color:color-mix(in srgb, var(--hit) 60%, transparent);color:var(--hit)}.tile.miss{border-color:var(--miss);color:var(--miss);text-shadow:none;background:color-mix(in srgb, var(--miss) 14%, var(--panel-2))}.space-bar{width:1.7em;height:.3em;filter:drop-shadow(0 0 .18em color-mix(in srgb, var(--accent) 70%, transparent));border:.075em solid;border-top:none;border-radius:0 0 .06em .06em;margin-top:.28em;display:block}.lane-key .space-bar,.kb-key .space-bar{filter:none;border-width:.12em;width:62%}.miss .space-bar,.flash-miss .space-bar{filter:none}.tile.miss:after,.kb-key.flash-miss:after,.cell.flash-miss:after{content:"✗";color:var(--miss);font-size:.75rem;font-weight:700;line-height:1;position:absolute;top:.15em;right:.3em}.kb-key.flash-miss:after,.cell.flash-miss:after{color:var(--on-accent)}.track[data-presentation=highway] .tile:not(.hit,.miss):before{content:"";width:46%;height:calc(var(--tile) * 1.3);background:linear-gradient(to top, color-mix(in srgb, var(--accent) 30%, transparent), transparent);filter:blur(3px);pointer-events:none;border-radius:999px 999px 0 0;position:absolute;bottom:100%;left:50%;translate:-50%}.tile .pressed{color:var(--miss);white-space:nowrap;font-size:.32em;position:absolute;bottom:-1.5em}.tile.shake{animation:.16s linear shake}@keyframes shake{25%{translate:-5px}75%{translate:5px}}.lane-keys{pointer-events:none;position:absolute;left:0;right:0}.lane-key{width:calc(var(--tile) * .62);height:calc(var(--tile) * .62);margin-left:calc(var(--tile) * -.31);border:1px solid var(--line);color:var(--muted);background:var(--panel);border-radius:8px;place-items:center;font-size:.8rem;transition:background-color 90ms linear;display:grid;position:absolute}.lane-key.lit{background:color-mix(in srgb, var(--accent) 30%, var(--panel));color:var(--text);border-color:var(--accent)}.hitline{background:linear-gradient(90deg, transparent, var(--accent), transparent);opacity:.6;height:2px;position:absolute;left:4%;right:4%}.hand-label{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-size:.8rem;position:absolute;bottom:.5rem;transform:translate(-50%)}.litkb{place-items:center;display:grid;position:absolute;inset:0}.litkb-board{position:relative}.kb-key{border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:10px;place-items:center;font-weight:600;display:grid;position:absolute}.kb-key.off{opacity:.25}.kb-key.lit-0{background:var(--accent);border-color:var(--accent);color:var(--on-accent);box-shadow:0 0 36px color-mix(in srgb, var(--accent) 60%, transparent)}.kb-key.next{background:color-mix(in srgb, var(--accent) var(--glow,20%), var(--panel));border-color:color-mix(in srgb, var(--accent) var(--glow,20%), var(--line));color:var(--text)}.kb-key.next.bright{color:var(--on-accent)}.kb-key.flash-miss{background:var(--miss);color:var(--on-accent)}.gridwrap{touch-action:none;-webkit-user-select:none;user-select:none;cursor:crosshair;place-items:center;display:grid;position:absolute;inset:0}.grid{border:1px solid var(--line);border-radius:14px;gap:0;display:grid;overflow:hidden}.cell{border:1px solid color-mix(in srgb, var(--line) 60%, transparent);color:#0000;place-items:center;font-size:.9rem;transition:background-color 60ms linear;display:grid;position:relative}.cell.lit-0{background:var(--accent)}.cell.next{background:color-mix(in srgb, var(--accent) var(--glow,20%), transparent)}.cell.flash-miss{background:var(--miss)}.results{padding:3rem 1.5rem;overflow-y:auto}.results-inner{gap:1.5rem;width:min(900px,100%);margin:0 auto;display:grid}.score{text-align:center}.score .kind{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-size:.85rem}.score .big{letter-spacing:-.04em;background:linear-gradient(90deg, var(--accent), var(--accent-2));color:#0000;-webkit-background-clip:text;background-clip:text;margin:.5rem 0;font-size:clamp(4rem,12vw,7rem);font-weight:750;line-height:1}.score .formula{color:var(--muted)}.stats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.8rem;display:grid}.stat{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:.9rem 1rem}.stat span{color:var(--muted);font-size:.8rem;display:block}.stat b{font-variant-numeric:tabular-nums;font-size:1.5rem}canvas.chart{background:var(--panel);border:1px solid var(--line);border-radius:14px;width:100%;height:180px}