/* metronome.css : scoped to #metronome */
#metronome .metro-display { transition: background-color .08s ease-out; }
#metronome .metro-display.hit { background: #3f3a36; }
#metronome .metro-display.hit-accent { background: #f5f5f4; color: #0c0a09; }
#metronome .metro-display.hit-accent .soft { color: #44403c; }
#metronome .metro-bpm { margin: 4px 0; }
#metronome .metro-lights { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 14px 0 4px; }
#metronome .metro-light { width: 44px; height: 44px; border: 0; background: transparent; padding: 0; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 50%; }
#metronome .metro-light span { display: block; border-radius: 50%; transition: transform .06s; }
#metronome .lv-accent span { width: 26px; height: 26px; background: #57534e; box-shadow: inset 0 0 0 2px #d6d3d1; }
#metronome .lv-normal span { width: 18px; height: 18px; background: #57534e; }
#metronome .lv-mute span { width: 18px; height: 18px; background: transparent; box-shadow: inset 0 0 0 2px #57534e; }
#metronome .metro-light.now.lv-accent span { background: #a8c8e8; box-shadow: 0 0 0 4px rgba(168, 200, 232, .35); transform: scale(1.12); }
#metronome .metro-light.now.lv-normal span { background: #f5f5f4; transform: scale(1.15); }
#metronome .metro-light.now.lv-mute span { box-shadow: inset 0 0 0 2px #a8a29e; }
#metronome .metro-light:focus-visible { outline: 2px solid #f5f5f4; }
#metronome .metro-status { min-height: 1.6em; }
#metronome .metro-tempo { flex-wrap: nowrap; margin-top: 14px; }
#metronome .metro-tempo input[type="range"] { flex: 1; min-width: 0; height: 44px; }
#metronome .metro-step { width: 56px; padding: 0; font-size: 24px; flex: none; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
#metronome .metro-main .metro-start { min-width: 140px; }
#metronome .metro-num { width: 84px; }
#metronome .metro-small { width: 72px; }
#metronome [data-tap] { touch-action: manipulation; user-select: none; -webkit-user-select: none; }
#metronome .metro-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
#metronome .metro-grid .chips { margin: 6px 0 10px; }
#metronome .metro-grid .row + .row, #metronome .metro-grid .row { margin-top: 0; }
#metronome .metro-trainer { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--strong); }
@media (max-width: 860px) { #metronome .metro-grid { grid-template-columns: 1fr; gap: 10px; } }
@media (prefers-reduced-motion: reduce) { #metronome .metro-light span, #metronome .metro-display { transition: none; } }