.metronome { max-width:720px; padding-block:36px 56px; }
.controls { display:grid; grid-template-columns:1fr 1fr; gap:16px 24px; }
.controls label { display:block; font-weight:600; margin-bottom:8px; }
.controls input[type=number], .controls select { width:100%; min-height:48px; border:1px solid var(--border); border-radius:8px; padding:10px 12px; font:inherit; background:var(--paper); color:var(--ink); }
#tempo-help, #tempo-error { font-size:.85rem; margin:8px 0 0; }
#tempo-help, #metronome-status { color:var(--muted); }
#tempo-error { color:#a12b20; }
.controls .sound-option { display:flex; align-items:center; gap:10px; min-height:44px; grid-column:1 / -1; }
.sound-option input { width:20px; height:20px; }
.visual { text-align:center; border-block:1px solid var(--border); margin-block:16px 24px; padding:24px; }
#clicker { display:inline-flex; align-items:center; justify-content:center; width:96px; height:96px; border:2px solid var(--ink); border-radius:50%; font-size:2.5rem; font-variant-numeric:tabular-nums; }
#clicker.is-active { background:var(--ink); color:var(--paper); }
#beat-dots { display:flex; justify-content:center; gap:12px; margin:18px 0 8px; }
#beat-dots span { width:12px; height:12px; border:1px solid var(--ink); border-radius:50%; }
#beat-dots .is-active { background:var(--ink); }
.visual p { margin:0; color:var(--muted); font-size:.85rem; }
#toggle { min-width:120px; }
#metronome-status { margin:14px 0 24px; }
.metronome details { border-top:1px solid var(--border); padding-top:16px; }
.metronome summary { cursor:pointer; padding-block:8px; margin-bottom:16px; }
@media(max-width:420px) { .controls { grid-template-columns:1fr; } }