:root{--bg: #F4F6F8;--surface: #FFFFFF;--ink: #1A1F26;--ink-muted: #5A6472;--line: #D9DEE5;--accent: #2E7D6F;--on-accent: #FFFFFF;--ok: #2E7D32;--warn: #B26A00;--bad: #B3261E;--focus: #0B63CE;--font-ui: "Noto Sans JP", system-ui, sans-serif}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-ui)}main{background:var(--surface);border:1px solid var(--line);padding:2rem}.metronome{width:2rem;height:2rem;border-radius:50%;background:var(--line)}.metronome.active{background:var(--accent)}.note-board{display:flex;gap:.25rem;margin:1rem 0}.note{color:var(--ink-muted)}.note.lit{color:var(--ok)}.note.late{color:var(--warn);transform:translateY(.5rem)}