:root{--bg:#f4f5f7;--surface:#fff;--text:#1d2330;--muted:#5d6676;--border:#d5d9e0;--accent:#3a6ff0;--accent-text:#fff;--error:#c43d3d;--paper:#fff;--cursor:#e04f2e;--right-hand:#2f7de1;--left-hand:#2ea05a;--hit:#2ea05a47;--missed:#d6454552;--loop:#ffc10729;--key-white:#fff;--key-black:#22252b;--key-border:#b9bec8;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root{--bg:#15181e;--surface:#20242c;--text:#e8eaef;--muted:#a1a8b5;--border:#353b46;--accent:#5b8cff;--error:#ff7a7a;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--text);flex-direction:column;font:15px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;display:flex}.topbar{background:var(--surface);border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:8px 16px;padding:10px 16px;display:flex}.brand{letter-spacing:-.01em;margin:0;font-size:20px;font-weight:700}.file-actions,.input-actions{align-items:center;gap:8px 14px;display:flex}.check{cursor:pointer;white-space:nowrap;align-items:center;gap:6px;display:inline-flex}.check[hidden]{display:none}.check input{width:16px;height:16px;accent-color:var(--accent);margin:0}.button.connected{border-color:var(--left-hand);color:var(--left-hand)}.status{color:var(--muted);text-align:right;text-overflow:ellipsis;white-space:nowrap;flex:200px;margin:0;overflow:hidden}.status.error{color:var(--error)}.button{border:1px solid var(--border);background:var(--surface);min-height:36px;color:var(--text);font:inherit;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:8px;justify-content:center;align-items:center;padding:0 14px;display:inline-flex}.button:hover{border-color:var(--accent)}.button:focus-visible,.segmented input:focus-visible+span,input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.button.accent{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}.button.icon{width:40px;padding:0;font-size:16px}.button.small{width:30px;min-height:28px;padding:0}.controls{background:var(--surface);border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:10px 24px;padding:10px 16px;display:flex}.controls[hidden]{display:none}.group{align-items:center;gap:8px;display:flex}.time,output{font-variant-numeric:tabular-nums;color:var(--muted);min-width:44px}input[type=range]{width:140px;accent-color:var(--accent)}.bar-input{border:1px solid var(--border);background:var(--surface);width:56px;min-height:32px;color:var(--text);font:inherit;border-radius:6px;padding:0 6px}.score{text-align:right;font-variant-numeric:tabular-nums;flex:220px;margin:0}.score .waiting{color:var(--accent);font-weight:600}.segmented{border:1px solid var(--border);border-radius:8px;gap:0;display:inline-flex;overflow:hidden}.segmented label{cursor:pointer}.segmented input{opacity:0;pointer-events:none;position:absolute}.segmented span{padding:7px 12px;display:block}.segmented label+label span{border-left:1px solid var(--border)}.segmented input:checked+span{background:var(--accent);color:var(--accent-text)}.stage{flex-direction:column;flex:1;gap:10px;min-height:0;padding:12px 16px;display:flex}.sheet-frame{background:var(--paper);border-radius:8px;flex:1;min-height:180px;position:relative;overflow:hidden;box-shadow:0 1px 3px #00000026}.sheet-frame[hidden]{display:none}#sheet{position:absolute;inset:0}.sheet{cursor:pointer;overflow:hidden}.sheet-strip{will-change:transform;position:absolute;left:0}.sheet-strip svg{display:block}.sheet-loop{background:var(--loop);pointer-events:none;position:absolute;top:-100vh;bottom:-100vh}.sheet-loop[hidden]{display:none}.sheet-marks{pointer-events:none;position:absolute;inset:0}.mark{border-radius:4px;position:absolute}.mark.hit{background:var(--hit)}.mark.missed{background:var(--missed)}.sheet-cursor{background:var(--cursor);pointer-events:none;will-change:transform;border-radius:1px;width:2px;position:absolute;top:4px;bottom:4px;left:-1px}.sheet g.note.hl-right{fill:var(--right-hand);color:var(--right-hand)}.sheet g.note.hl-left{fill:var(--left-hand);color:var(--left-hand)}.sheet g.note.hl-other{fill:#888;color:#888}.sheet g.note.hl-faint{fill-opacity:.45;stroke-opacity:.45}.zoom{gap:4px;display:flex;position:absolute;top:6px;right:6px}.zoom .button{color:#1d2330;background:#ffffffe6;border-color:#d5d9e0}.keyboard-frame{flex:none}.keyboard-frame[hidden]{display:none}.keyboard{touch-action:none;-webkit-user-select:none;user-select:none;height:110px;position:relative}.key{color:#6b7280;cursor:pointer;justify-content:center;align-items:flex-end;padding-bottom:4px;font-size:10px;display:flex;position:absolute;top:0}.key.white{background:var(--key-white);border:1px solid var(--key-border);border-radius:0 0 5px 5px;height:100%}.key.black{z-index:1;background:var(--key-black);border-radius:0 0 4px 4px;height:62%}.key.on-right{background:var(--right-hand)}.key.on-left{background:var(--left-hand)}.key.on-other{background:#8a8f99}.key.white.faint.on-right{background:color-mix(in srgb, var(--right-hand) 35%, var(--key-white))}.key.white.faint.on-left{background:color-mix(in srgb, var(--left-hand) 35%, var(--key-white))}.key.black.faint.on-right{background:color-mix(in srgb, var(--right-hand) 45%, var(--key-black))}.key.black.faint.on-left{background:color-mix(in srgb, var(--left-hand) 45%, var(--key-black))}.key.expected{box-shadow:inset 0 -6px 0 0 var(--accent);animation:.9s ease-in-out infinite alternate expected-pulse}@keyframes expected-pulse{0%{filter:brightness()}to{filter:brightness(1.35)}}@media (prefers-reduced-motion:reduce){.key.expected{animation:none}}.key.pressed{filter:brightness(.82);transform:translateY(1px)}.key.white.pressed:not([class*=on-]){background:#dfe3ea}.key.wrong{background:var(--error)!important}.keys-hint{color:var(--muted);text-align:center;margin:6px 0 0;font-size:12px}kbd{border:1px solid var(--border);border-radius:4px;padding:0 4px;font:11px/1.5 ui-monospace,monospace}.empty{text-align:center;max-width:420px;color:var(--muted);margin:auto;padding:24px}.empty[hidden]{display:none}.empty .hint{font-size:13px}@media (max-width:600px){.keyboard{height:90px}.keys-hint{display:none}.score{text-align:left}.status{text-align:left;flex-basis:100%}.controls{gap:10px 16px}input[type=range]{width:110px}.segmented span{padding:7px 9px}}