/* Checkpoint 2A: functional metronome skin; RC1.5.7 Web Audio engine remains untouched. */
.stage .beatrow .beat-dot{width:24px;height:24px;border:2px solid #adc9bb;border-radius:50%;background:transparent;display:inline-block;transition:background .08s,border-color .08s,transform .08s;flex:none}
.stage .beatrow .beat-dot.active{background:var(--aqua);border-color:var(--aqua);transform:scale(1.08)}
.stage .beatrow .beat-dot.accent.active{background:#edc18e;border-color:#edc18e}
.stage .meter-hint-live{color:#bed5c6;font-size:12px;line-height:1.45;margin-top:6px;text-align:center}
.stage .primary-btn.playing{background:#edc5b0!important;color:#3b201a!important}
.stage .primary-btn.playing:hover{background:#f4d5c3!important}
.stage .status-banner{display:none;margin:13px 0 0;padding:12px 14px;background:#412b27;color:#fff0e8;border-left:3px solid #e7ad87;font-size:13px;line-height:1.45}
.stage .status-banner.visible{display:block}
.side .setting-hint{display:block;color:var(--muted);font-size:11px;line-height:1.45;margin-top:5px}
.side .field label output{float:right;font-weight:750;color:var(--accent)}
.side .field input[type=range]{width:100%;min-height:38px;accent-color:var(--accent)}
.side .related-mode{padding-top:17px;margin-top:10px;border-top:1px solid var(--hair);font-size:14px}
.side .related-mode a{color:var(--accent);font-weight:750;text-decoration:none}
.side .related-mode a:hover{text-decoration:underline}
.learn-more{margin:0 auto 34px;color:var(--ink);font-size:14px}
.learn-more summary{display:list-item;list-style-position:inside;cursor:pointer;border-top:1px solid var(--hair);padding:17px 0;font-weight:750}
.learn-inner{border-top:1px solid var(--hair);padding:14px 0;color:var(--muted);line-height:1.6}
.learn-inner h2{font:400 24px Georgia,serif;color:var(--ink);margin-bottom:9px}
.learn-inner ul{padding-left:22px}
.learn-inner p,.learn-inner li{margin:8px 0}
.stage #metro-toggle{min-height:55px}
.stage #tap-tempo-btn{min-height:48px}
.stage .bpm-adjust button{min-width:52px;min-height:52px}
.stage .beatrow{min-height:33px}
.stage #meter-hint{min-height:17px}
@media(max-width:720px){.side .field select{min-height:46px}.stage .meter-hint-live{font-size:11px}.learn-more{margin-bottom:18px}}
@media(prefers-reduced-motion:reduce){.stage .beatrow .beat-dot{transition:none}}