:root{font-family:ui-sans-serif,system-ui,sans-serif;color:#e7edf3;background:#101824;font-synthesis:none;--lime:#b5ef87;--cyan:#72d8ff;--orange:#ffb46e;--muted:#9cabbc;--line:#d9e8f226}*{box-sizing:border-box}body{margin:0;overflow:hidden}canvas{position:fixed;inset:0;display:block}button,input{font:inherit}button{min-height:45px;border:1px solid var(--line);background:#233248;color:#e7edf3;border-radius:5px;padding:12px 17px;cursor:pointer;transition:transform .15s,background .15s}button:hover{background:#334963;transform:translateY(-2px)}button:active{transform:translateY(1px)}button:focus-visible,input:focus-visible{outline:3px solid var(--lime);outline-offset:4px}button.primary{background:var(--lime);color:#19252d;border-color:var(--lime);font-weight:700}.menu{position:fixed;inset:0;display:flex;align-items:center;padding:5vw;background:linear-gradient(90deg,#101824f5,#101824d6 36%,transparent 85%);overflow:auto}.panel{width:min(500px,100%);max-height:94svh;overflow:auto}.eyebrow{font:11px/1.6 ui-monospace,Menlo,monospace;text-transform:uppercase;letter-spacing:.15em;color:var(--lime);margin-bottom:25px}.graphic{font:italic 800 44px system-ui;color:var(--lime);letter-spacing:-.2em;margin-bottom:30px}h1{font-size:clamp(40px,6.4vw,80px);line-height:.88;letter-spacing:-.07em;font-weight:850;font-style:italic;margin:0 0 27px}h1 span{color:var(--lime)}h2{font-size:43px;line-height:1;letter-spacing:-.05em;margin:0 0 22px;font-weight:800}p{font-size:15px;line-height:1.75;color:#b0bdca;max-width:430px}.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:25px}.foot{font:11px/1.8 ui-monospace,Menlo,monospace;color:var(--muted);margin-top:25px}.track-grid{display:grid;gap:8px}.track-choice{display:grid;grid-template-columns:35px 1fr auto;align-items:center;gap:10px;padding:14px;text-align:left}.track-choice i{font:italic 22px system-ui;color:var(--lime)}.track-choice b{display:block;font-size:16px}.track-choice small{display:block;color:var(--muted);font-size:11px;line-height:1.6;margin-top:4px}.track-choice span{font:12px ui-monospace,Menlo,monospace;color:var(--lime)}.setting{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px}.setting input[type=range]{width:130px;accent-color:var(--lime)}input[type=text]{width:100%;background:#1c2b3d;border:1px solid var(--line);padding:12px;color:#e7edf3;border-radius:5px}.keys{display:grid;grid-template-columns:120px 1fr;gap:14px;font-size:13px;color:var(--muted)}kbd{background:#22364b;color:var(--cyan);padding:5px 7px;border-radius:3px;font:12px ui-monospace,Menlo,monospace}.hud-top{position:fixed;top:24px;left:28px;right:28px;display:flex;justify-content:space-between;gap:10px;pointer-events:none}.hud-name{font:10px ui-monospace,Menlo,monospace;letter-spacing:.15em;color:var(--lime);text-transform:uppercase}.hud-track{font-weight:750;font-size:22px;letter-spacing:-.02em;margin-top:7px}.time{font-size:38px;font-weight:750;font-variant-numeric:tabular-nums;letter-spacing:-.045em;margin-top:8px;line-height:1}.hud-top .right{text-align:right;padding-right:95px}.best{font:11px ui-monospace,Menlo,monospace;color:var(--muted);margin-top:10px}.pause-button{position:fixed;right:28px;top:24px;z-index:3;min-height:43px;padding:9px 14px;font-size:12px;background:#1e3142df}.hud-bottom{position:fixed;left:28px;right:28px;bottom:25px;display:flex;justify-content:space-between;align-items:flex-end;gap:15px;pointer-events:none}.surface{font:11px ui-monospace,Menlo,monospace;letter-spacing:.1em;margin-bottom:7px}.next-surface{font-size:14px;font-weight:600}.tiny{font:10px/1.7 ui-monospace,Menlo,monospace;color:var(--muted)}.bar{width:160px;height:4px;margin-top:13px;background:#233448}.bar i{height:100%;display:block;background:var(--lime)}.toast{position:fixed;top:22%;left:50%;transform:translate(-50%);text-align:center;max-width:80vw;color:var(--lime);font-size:14px;font-weight:650;text-shadow:0 2px 12px #000}.medal{font-size:60px;font-weight:850;color:var(--lime);letter-spacing:-.06em;margin-bottom:14px}.result-row{border-top:1px solid var(--line);padding:12px 0;display:flex;justify-content:space-between;gap:15px;font-size:13px;color:var(--muted)}.result-row b{color:#e7edf3}.mode{display:flex;gap:8px;margin:18px 0}.mode button{flex:1;text-align:center;font-size:13px}.mode .selected{border-color:var(--lime);color:var(--lime)}#touch{display:none;position:fixed;bottom:80px;left:18px;right:18px;justify-content:space-between;align-items:flex-end;pointer-events:none;z-index:3}.pad{display:grid;grid-template-columns:repeat(3,45px);gap:4px}.pad button,.touch-actions button{pointer-events:auto;touch-action:none;padding:9px;min-width:45px;min-height:45px;background:#20374bbb;backdrop-filter:blur(8px);text-align:center}.pad button:nth-child(1){grid-column:2}.pad button:nth-child(2){grid-column:1;grid-row:2}.pad button:nth-child(3){grid-column:2;grid-row:2}.pad button:nth-child(4){grid-column:3;grid-row:2}.touch-actions{display:flex;flex-direction:column;gap:6px}.touch-actions button{font-size:11px;min-width:70px}@media(pointer:coarse){#touch.playing{display:flex}}@media(max-width:650px){.menu{padding:25px;background:#101824db}.panel{max-height:90svh}h1{font-size:clamp(36px,11.8vw,58px)}.hud-top{top:16px;left:18px;right:18px}.hud-track{font-size:18px}.hud-top .right{padding-right:83px}.time{font-size:30px}.pause-button{top:16px;right:18px;padding:9px 12px}.hud-bottom{left:18px;right:18px;bottom:15px}.next-surface{font-size:12px;max-width:235px}.bar{width:120px}.hud-bottom .stats{display:none}.toast{font-size:12px}.graphic{margin-bottom:23px}.eyebrow{margin-bottom:20px}h2{font-size:36px}.track-choice{grid-template-columns:25px 1fr auto;padding:12px}.track-choice small{font-size:10px}.keys{grid-template-columns:110px 1fr}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}