/* Metronome (js/metronome.js) */
.metro{display:grid;gap:18px;padding:22px;border-radius:28px;border:1px solid var(--glass-b);background:radial-gradient(70% 60% at 50% 0%,rgba(0,224,255,.10),transparent 70%),var(--glass)}
.mt-dots{--n:4;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:8px}
.mt-dot{position:relative;aspect-ratio:1;max-height:76px;border-radius:50%;border:2px solid var(--glass-b2);background:transparent;color:var(--plat-3);font:inherit;font-weight:800;font-size:15px;cursor:pointer;display:grid;place-items:center;justify-self:center;width:100%;max-width:76px;transition:transform .08s,background .08s,box-shadow .12s}
.mt-dot.lv3{border-color:var(--cyan);color:var(--cyan)}
.mt-dot.lv2{border-color:#4F8CFF;color:#8FB4FF}
.mt-dot.lv0{border-style:dashed;opacity:.4}
.mt-dot.gs::before{content:"";position:absolute;left:-7px;top:20%;bottom:20%;width:2px;border-radius:2px;background:var(--gtr-a)}
.mt-dot.now{transform:scale(1.08);background:var(--plat);color:#0B0C0F;box-shadow:0 0 24px rgba(255,255,255,.35)}
.mt-dot.lv3.now{background:var(--cyan);box-shadow:0 0 30px rgba(0,224,255,.6)}
.mt-dot.lv2.now{background:#4F8CFF;color:#fff}
.mt-dot.lv0.now{background:transparent;color:var(--plat-3);box-shadow:none}
.mt-hint{margin:-8px 0 0;text-align:center}
.mt-tempo{display:flex;align-items:center;justify-content:center;gap:18px}
.mt-step{width:56px;height:56px;border-radius:50%;border:1px solid var(--glass-b2);background:var(--glass);color:var(--plat);font-size:28px;font-weight:600;cursor:pointer;flex:none}
.mt-step:active{transform:scale(.94)}
.mt-bpm{display:flex;flex-direction:column;align-items:center;min-width:150px}
.mt-bpm output{font-size:clamp(64px,18vw,88px);font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.mt-bpm span{font-size:13px;color:var(--plat-3);text-align:center}
.mt-bpm .mt-term{color:var(--cyan);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:12px;margin-top:4px}
#mt-range,.mt-vol input{width:100%;accent-color:var(--cyan)}
.mt-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;align-items:center}
.mt-go{justify-self:center;min-width:220px;min-height:60px;font-size:20px}
.metro.playing .mt-go{background:linear-gradient(135deg,#FF6B5A,#FFB547);color:#120c08}
.mt-set{display:grid;gap:10px;padding-top:6px;border-top:1px solid var(--line)}
.mt-lbl{margin:8px 0 0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--plat-3)}
.mt-sigs{display:flex;flex-wrap:wrap;gap:8px}
.mt-sig{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:52px;min-height:58px;padding:6px 10px;border-radius:14px;border:1px solid var(--glass-b2);background:var(--glass);color:var(--plat);font:inherit;cursor:pointer;line-height:1}
.mt-sig b{font-size:18px;font-weight:800}
.mt-sig i{display:block;width:18px;height:2px;background:currentColor;opacity:.6;margin:3px 0}
.mt-sig[aria-pressed="true"]{border-color:var(--cyan);background:rgba(0,224,255,.14);color:var(--cyan)}
.mt-grp{min-height:44px;font-weight:800;font-size:16px}
.mt-custom summary{cursor:pointer;font-weight:700;color:var(--plat-2);padding:6px 0}
.mt-custom input,.mt-custom select{width:72px;margin-left:6px}
.mt-slash{font-size:22px;color:var(--plat-3)}
.mt-vol{display:flex;align-items:center;gap:12px;margin-top:6px}
.mt-note{text-align:center;margin:0}
@media (max-width:420px){.metro{padding:16px;border-radius:22px}.mt-tempo{gap:10px}.mt-step{width:50px;height:50px}}