.metronome{max-width:640px;margin:auto;text-align:center;padding:40px}.bpm-label{font-size:13px;color:#777}.bpm-controls{display:flex;align-items:center;justify-content:center;gap:24px;margin:15px 0}.bpm-controls input{font:400 64px Arial,sans-serif;width:170px;border:0;text-align:center;color:#303a32;background:white}.bpm-controls input::-webkit-inner-spin-button{appearance:none}.bpm-controls button{border-radius:50%;width:44px;height:44px;padding:0;font-size:24px}#slider{width:100%;max-width:350px;accent-color:#526b57;margin:15px 0 28px}.met-settings{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:25px;font-size:14px}.met-settings label{display:flex;align-items:center;gap:9px}.met-settings select{font:inherit;padding:8px;border:1px solid #ccc;background:white}.met-settings input{accent-color:#526b57}.beats{display:flex;justify-content:center;gap:18px;margin:28px 0 35px}.beat-dot{width:36px;height:36px;border-radius:50%;border:1px solid #ccc;display:grid;place-items:center;color:#777;font-size:13px;transition:background 60ms}.beat-dot.active{background:#87998a;color:white;border-color:#87998a}.beat-dot.first.active{background:#303a32;border-color:#303a32}.instructions{max-width:640px;margin:50px auto 0;line-height:1.8;font-size:14px;color:#666}.instructions h2{color:#333}.instructions a{border-bottom:1px solid #aaa}.metronome .hint{margin:18px 0 0}@media(max-width:600px){.metronome{padding:28px 14px}.beats{gap:12px}.beat-dot{width:32px;height:32px}.bpm-controls{gap:14px}}