:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--fg:#1c1917;--bg:#fff;--muted:#78716c;--accent:#16a34a;--current:#2563eb;--wrong:#dc2626;--line:color-mix(in srgb, var(--fg) 15%, transparent)}*{box-sizing:border-box}html{scrollbar-gutter:stable}body{color:var(--fg);background:var(--bg);margin:0;font:16px/1.6 system-ui,sans-serif}.bar{z-index:1;padding:.75rem max(1rem, env(safe-area-inset-left));background:var(--bg);border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:.75rem;display:flex;position:sticky;top:0}.bar select,.bar button{font:inherit;color:inherit;border:1px solid var(--line);background:0 0;border-radius:.4rem;min-height:2.5rem}.bar select{max-width:100%;padding:0 .6rem}.zoom{align-items:center;gap:.4rem;display:flex}.zoom button{width:2.5rem;font-size:1.2rem;line-height:1}.zoom output{text-align:center;min-width:2.5rem;color:var(--muted);font-variant-numeric:tabular-nums}.bar>#restart{padding:0 .9rem}.progress{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.9rem}.feedback{font-weight:600}.feedback.wrong{color:var(--wrong)}.feedback.good{color:var(--accent)}.end{align-items:center;gap:.75rem;margin-left:auto;font-size:.9rem;display:flex}.midi.ok{color:var(--accent)}.midi.bad{color:var(--wrong)}.debug{color:var(--muted)}.status{color:var(--muted);min-height:1.6em;margin:.5rem 1rem 0;font-size:.9rem}.score{overflow-x:hidden}.score svg{width:100%;height:auto;display:block}g.note.current,g.note.current *{fill:var(--current);color:var(--current)}g.note.hit,g.note.hit *{fill:var(--accent);color:var(--accent)}g.note.wrong,g.note.wrong *{fill:var(--wrong);color:var(--wrong)}