.bpm-display { text-align: center; margin: 8px 0 4px; }
.bpm-display span { font-family: var(--serif); font-size: 3.2rem; font-weight: 700; color: var(--primary); }
.bpm-display small { display: block; color: var(--muted); letter-spacing: 0.1em; }
input[type="range"] { width: 100%; accent-color: var(--primary); }
.beat-dots { display: flex; gap: 10px; justify-content: center; margin: 16px 0; }
.beat-dots .dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--border); transition: transform 0.05s, background 0.05s;
}
.beat-dots .dot.on { background: var(--primary); transform: scale(1.4); }
.beat-dots .dot.accent.on { background: #f59e0b; }