.metronome-stage{display:flex;flex-direction:column;align-items:center;gap:var(--qet-space-4)}.metronome-tempo{display:flex;align-items:center;justify-content:center;gap:var(--qet-space-4);margin-top:var(--qet-space-3)}.metronome-bpm{display:flex;flex-direction:column;align-items:center;margin:0;min-width:9rem}.metronome-bpm-value{font-family:var(--qet-font-display);font-size:clamp(3.5rem,12vw,6rem);font-weight:var(--qet-weight-semibold);font-variant-numeric:tabular-nums;line-height:1}.metronome-bpm-unit{font-family:var(--qet-font-mono);font-size:var(--qet-text-xs);letter-spacing:var(--qet-tracking-label);text-transform:uppercase;color:var(--qet-on-surface-muted)}.metronome-step{width:3rem;height:3rem;border:0;border-radius:var(--qet-radius-pill);background:var(--qet-surface-container);color:var(--qet-on-surface);font-size:var(--qet-text-xl);cursor:pointer;transition:background var(--qet-transition-fast)}.metronome-step:hover:not(:disabled){background:var(--qet-surface-container-high)}.metronome-step:disabled{opacity:.35;cursor:default}.metronome-range{width:min(100%,28rem)}.metronome-beats{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--qet-space-2);margin:var(--qet-space-2) 0;padding:0;list-style:none}.metronome-beat{position:relative;display:grid;place-items:center;width:2.75rem;height:2.75rem;border:2px solid var(--qet-outline-variant);border-radius:var(--qet-radius-pill);background:var(--qet-surface-container-lowest);color:var(--qet-on-surface-muted);font-variant-numeric:tabular-nums;font-weight:var(--qet-weight-semibold);cursor:pointer}.metronome-beat[data-accent]{border-color:var(--qet-primary);color:var(--qet-primary)}.metronome-beat[data-current]{border-color:var(--qet-on-surface);background:var(--qet-on-surface);color:var(--qet-surface-container-lowest)}.metronome-beat[data-current][data-accent]{border-color:var(--qet-primary);background:var(--qet-primary);color:var(--qet-on-primary)}.metronome-beat-number{position:relative}.metronome-pulse{display:none}@media (prefers-reduced-motion: no-preference){.metronome-pulse{display:block;position:absolute;inset:-2px;border-radius:inherit;animation:metronome-pulse .22s var(--qet-ease) forwards}}@keyframes metronome-pulse{0%{box-shadow:0 0 color-mix(in srgb,var(--qet-primary) 45%,transparent)}to{box-shadow:0 0 0 10px transparent}}.metronome-controls{justify-content:center}.metronome-start{min-width:9rem}.metronome-shortcuts{margin:0;font-size:var(--qet-text-xs);text-align:center}@media (hover: none){.metronome-shortcuts{display:none}}