/* Metronome */
.metro-layout { grid-template-areas: "meter" "mcontrols" "notes"; }
.metro-controls { grid-area: mcontrols; display: grid; gap: 14px; }
.bpm { display: flex; align-items: baseline; gap: 8px; font-weight: 600; font-size: clamp(64px, 19vw, 108px); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.bpm small { font-size: 15px; font-weight: 600; letter-spacing: .02em; color: var(--face-muted); }
.card.playing .state { color: var(--good); }
.beats { display: flex; justify-content: center; gap: 10px; min-height: 14px; }
.beats i { width: 10px; height: 10px; border-radius: 50%; background: var(--face-line); transition: background-color .08s linear, transform .12s var(--ease-out); }
.beats i.accent { width: 14px; height: 14px; margin-top: -2px; }
.beats i.on { background: var(--ink); transform: scale(1.15); }
.beats i.accent.on { background: var(--good); }
.tempo-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.step { width: 48px; height: 48px; padding: 0; font-size: 22px; font-weight: 500; line-height: 1; }
input[type="range"] { width: 100%; accent-color: var(--brand); height: 28px; margin: 0; cursor: pointer; }
.meter-pick { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.meter-pick button { border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 10px 0; font-weight: 600; font-size: 16px; transition: border-color .15s var(--ease-out), background-color .15s var(--ease-out), transform .12s var(--ease-out); }
.meter-pick button:hover { border-color: var(--brand); }
.meter-pick button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.meter-pick button:active, .step:active { transform: scale(.97); }
.keys { margin: 0; text-align: center; font-size: 13px; color: var(--muted); }
@media (hover: none) { .keys { display: none; } }
@media (min-width: 900px) { .bpm { font-size: 124px; } }