:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:#fbfbfa;--fg:#1b1b1a;--muted:#6b6b68;--line:#d8d8d4;--ok:#1f7a44;--bad:#b3261e;--accent:#2f4f8f}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#16171a;--fg:#ececea;--muted:#9b9b98;--line:#33353a;--ok:#4ac47e;--bad:#ef6a62;--accent:#8fb0f0}}*{box-sizing:border-box}body{background:var(--bg);color:var(--fg);margin:0;font:16px/1.5 system-ui,-apple-system,Segoe UI,sans-serif}.app{gap:1.5rem;max-width:42rem;margin:0 auto;padding:2rem 1.25rem 4rem;display:grid}h1{letter-spacing:-.01em;margin:0;font-size:1.35rem}.setup,.stats{border:1px solid var(--line);border-radius:10px;padding:1rem}.status{color:var(--muted);flex-wrap:wrap;gap:1.25rem;margin:0 0 .9rem;padding:0;font-size:.9rem;list-style:none;display:flex}.badge{color:var(--fg);font-weight:600}.badge[data-state=error]{color:var(--bad)}.badge[data-state=ready]{color:var(--ok)}.controls{align-items:center;gap:.6rem;display:flex}select,button{font:inherit;border:1px solid var(--line);background:var(--bg);color:var(--fg);border-radius:8px;padding:.45rem .8rem}button{background:var(--accent);border-color:var(--accent);color:#fff;cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}.option{color:var(--muted);align-items:center;gap:.4rem;margin-top:.75rem;font-size:.9rem;display:flex}.stage{justify-items:center;gap:.75rem;min-height:15rem;display:grid}.prompt{margin:0;font-size:1.4rem;font-weight:600}.staff{width:100%;overflow-x:auto}.staff svg{margin:0 auto;display:block}.note-name{letter-spacing:.02em;min-height:1.2em;margin:0;font-size:1.6rem;font-weight:700}.feedback{min-height:1.5em;margin:0;font-size:1.2rem;font-weight:600}.feedback[data-state=correct]{color:var(--ok)}.feedback[data-state=incorrect]{color:var(--bad)}.stats{color:var(--muted);flex-wrap:wrap;gap:1.5rem;font-size:.9rem;display:flex}.stats p{margin:0}.detector{color:var(--muted);margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem}@media (prefers-color-scheme:dark){.staff svg{filter:invert()}}