/* Metronome: a wooden pyramid metronome on a piano lid. Walnut page tones, ivory beat lights; the first beat glows brass. */
:root { --page: #f3efe9; --card: #ffffff; --ink: #1e1914; --soft: #5f574c; --line: #d9d1c4; --field: #ece6dc; --act: #5b3a1e; --on-act: #ffffff; --stop: #b3261e; --brass: #c9952b; --wide: 520px; color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page: #14110e; --card: #1e1a15; --ink: #f1ebe2; --soft: #aba191; --line: #3a3229; --field: #14110e; --act: #e3b98a; --on-act: #2a1606; --stop: #ff8a80; color-scheme: dark; }
}
.dial { text-align: center; justify-items: center; gap: 12px; }
.bpm b { font-size: clamp(72px, 24vw, 120px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; display: block; }
.beats { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; min-height: 26px; }
.beats i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); transition: background .05s; }
.beats i.first { border-color: var(--brass); }
.beats i.on { background: var(--ink); border-color: var(--ink); } .beats i.first.on { background: var(--brass); border-color: var(--brass); }
.nudge { justify-content: center; } .nudge .quiet { min-width: 54px; padding: 0 10px; } #go { min-width: 120px; }
#bpm { width: 100%; accent-color: var(--act); min-height: 44px; }