[data-metronome-tool]{--metronome-bpm-input-height: 5.5rem;color-scheme:light;background:radial-gradient(circle at 14% 4%,rgba(17,24,39,.045),transparent 28rem),linear-gradient(180deg,#fbfcfd,#f6f7f8);box-shadow:0 24px 70px #0f172a14}[data-metronome-tool] .metronome-header{background:linear-gradient(135deg,#fffffff5,#f8fafceb),repeating-linear-gradient(90deg,rgba(15,23,42,.035) 0 1px,transparent 1px 3.25rem)}[data-metronome-tool] .metronome-console{position:relative;background:linear-gradient(135deg,#11182709,#4b55630b),#fff}[data-metronome-tool] .metronome-console:before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(15,23,42,.025) 0 1px,transparent 1px 3.5rem);opacity:.65}[data-metronome-tool] .metronome-bpm-panel,[data-metronome-tool] .metronome-volume-panel,[data-metronome-tool] .metronome-panel,[data-metronome-tool] .metronome-stage{border-color:#94a3b88c;background:#ffffffeb;box-shadow:0 12px 34px #0f172a0f}[data-metronome-tool] .metronome-settings-grid{display:block;columns:1;column-gap:1rem}[data-metronome-tool] .metronome-settings-grid>.metronome-panel{display:inline-block;width:100%;margin-bottom:1rem;break-inside:avoid}@media(min-width:1024px){[data-metronome-tool] .metronome-settings-grid{columns:2}}[data-metronome-tool] .metronome-bpm-panel{position:relative;z-index:1;padding:1rem;background:linear-gradient(135deg,#fffffff5,#f3f4f6c7);border:1px solid rgba(148,163,184,.5)}[data-metronome-tool] .metronome-stage{position:relative;background:linear-gradient(180deg,#f8fafcf2,#fffffff5),repeating-linear-gradient(90deg,rgba(15,23,42,.035) 0 1px,transparent 1px 4rem)}[data-metronome-tool] .metronome-stage:before{content:"";position:absolute;inset:0;border-top:3px solid rgba(17,24,39,.9);pointer-events:none}[data-metronome-tool] .metronome-transport,[data-metronome-tool] .metronome-volume-panel{position:relative;z-index:1}[data-metronome-tool] .metronome-small-button,[data-metronome-tool] .metronome-choice-button{min-height:2.75rem;border:1px solid rgba(148,163,184,.62);background:#ffffffdb;color:#1f2937;font-weight:600;box-shadow:0 1px #ffffffe6 inset;transition:border-color .12s ease,background-color .12s ease,color .12s ease,transform .12s ease}[data-metronome-tool] .metronome-small-button:hover,[data-metronome-tool] .metronome-choice-button:hover{border-color:#111827;background:#f3f4f6;transform:translateY(-1px)}[data-metronome-tool] .metronome-choice-button.is-active{border-color:#111827;background:linear-gradient(180deg,#1f2937,#111827);color:#fff;box-shadow:0 8px 18px #1118272e}[data-metronome-tool] .metronome-choice-button .choice-subtitle{display:block;margin-top:.1rem;font-size:.72rem;font-weight:500;color:currentColor;opacity:.78}[data-metronome-tool] .metronome-range{accent-color:#111827}[data-metronome-tool] .metronome-bpm-input{height:var(--metronome-bpm-input-height);border-color:#0f172a1f;background:linear-gradient(180deg,#fffffffa,#f8fafcfa);box-shadow:inset 0 -1px #0f172a0a,0 10px 24px #0f172a0e}[data-metronome-tool] .metronome-play-button{min-height:var(--metronome-bpm-input-height);background:linear-gradient(180deg,#111827,#030712);border-color:#030712;box-shadow:0 18px 32px #0f172a38}[data-metronome-tool] .metronome-play-button:hover{background:linear-gradient(180deg,#1f2937,#111827)}[data-metronome-tool] .metronome-play-button[aria-pressed=true]{background:linear-gradient(180deg,#4b5563,#111827);border-color:#111827;box-shadow:0 18px 32px #11182747}[data-metronome-tool] .metronome-play-button[aria-pressed=true]:hover{background:linear-gradient(180deg,#6b7280,#111827)}[data-metronome-tool] .metronome-transport [data-role=tap-button]{min-height:var(--metronome-bpm-input-height);background:linear-gradient(180deg,#fff,#f3f4f6);box-shadow:0 14px 28px #11182714}[data-metronome-tool] .metronome-transport [data-role=tap-button]:hover{background:linear-gradient(180deg,#fff,#e5e7eb)}[data-metronome-tool] .metronome-mute-button{background:#ffffffeb;box-shadow:0 8px 18px #0f172a0f}[data-metronome-tool] .metronome-transport [data-role=tap-button],[data-metronome-tool] .metronome-mute-button,[data-metronome-tool] .metronome-play-button{transition:background-color .12s ease,border-color .12s ease,box-shadow .12s ease,transform .12s ease}[data-metronome-tool] .metronome-transport [data-role=tap-button]:hover,[data-metronome-tool] .metronome-mute-button:hover,[data-metronome-tool] .metronome-play-button:hover{transform:translateY(-1px)}[data-metronome-tool] .metronome-transport [data-role=tap-button]:active,[data-metronome-tool] .metronome-mute-button:active,[data-metronome-tool] .metronome-play-button:active{transform:translateY(0)}[data-metronome-tool] .metronome-disclosure>summary::-webkit-details-marker{display:none}[data-metronome-tool] .metronome-disclosure>summary{outline:none}[data-metronome-tool] .metronome-disclosure>summary:focus-visible{box-shadow:0 0 0 2px #d1d5db}[data-metronome-tool] .metronome-disclosure-icon{transition:transform .12s ease}[data-metronome-tool] .metronome-disclosure[open] .metronome-disclosure-icon{transform:rotate(45deg)}[data-metronome-tool] .metronome-beat-grid{display:grid;grid-template-columns:repeat(var(--metronome-beats, 4),minmax(0,1fr));gap:.75rem}[data-metronome-tool] .metronome-beat{min-height:8.4rem;border:1px solid rgba(148,163,184,.65);background:linear-gradient(180deg,#fffffffa,#f8fafcf5);padding:1rem .65rem;text-align:center;box-shadow:inset 0 1px #ffffffdb,0 14px 28px #0f172a12;transition:border-color 80ms ease,background-color 80ms ease,transform 80ms ease,box-shadow 80ms ease}[data-metronome-tool] .metronome-beat.is-current{border-color:#111827;background:linear-gradient(180deg,#f3f4f6f5,#fffffffa);transform:translateY(-2px);box-shadow:inset 0 0 0 2px #111827,0 18px 34px #11182729}[data-metronome-tool] .metronome-beat.is-accent{border-color:#111827;border-width:2px;background:#fff}[data-metronome-tool] .metronome-beat.is-secondary-accent{border-color:#4b5563;background:#f9fafb}[data-metronome-tool] .metronome-beat.is-weak{border-color:#9ca3af;background:#f9fafb}[data-metronome-tool] .metronome-beat.is-muted-beat{border-color:#cbd5e1;background:#f8fafc;color:#64748b;opacity:.82}[data-metronome-tool] .beat-number{display:inline-flex;width:2.6rem;height:2.6rem;align-items:center;justify-content:center;border:1px solid rgba(148,163,184,.7);background:#fff;color:#111827;font-weight:800;box-shadow:0 8px 16px #0f172a14}[data-metronome-tool] .metronome-beat.is-current .beat-number,[data-metronome-tool] .metronome-beat.is-accent .beat-number{border-color:#111827;background:#111827;color:#fff}[data-metronome-tool] .metronome-beat.is-secondary-accent .beat-number{border-color:#4b5563;background:#4b5563;color:#fff}[data-metronome-tool] .metronome-beat.is-muted-beat .beat-number{border-color:#94a3b8;background:#e2e8f0;color:#475569}[data-metronome-tool] .subdivision-dots{margin-top:.85rem;display:flex;min-height:1rem;justify-content:center;gap:.35rem}[data-metronome-tool] .subdivision-dot{width:.58rem;height:.58rem;border:1px solid #9ca3af;background:#fff;box-shadow:0 1px 3px #0f172a14}[data-metronome-tool] .subdivision-dot.is-active{border-color:#111827;background:#111827}[data-metronome-tool] .subdivision-dot.is-main{width:.7rem;height:.7rem}[data-metronome-tool] .beat-accent-label{margin-top:.5rem;display:block;min-height:1.25rem;font-size:.72rem;font-weight:700;color:#4b5563}[data-metronome-tool] .metronome-accent-editor{display:grid;grid-template-columns:repeat(auto-fit,minmax(5.25rem,1fr));gap:.5rem}[data-metronome-tool] .accent-step-button{min-height:4.25rem;border:1px solid #d1d5db;background:#fff;padding:.55rem .45rem;text-align:center;font-weight:700;color:#1f2937;transition:border-color .12s ease,background-color .12s ease,color .12s ease}[data-metronome-tool] .accent-step-button:hover{border-color:#111827;background:#f3f4f6}[data-metronome-tool] .accent-step-button[data-accent-state=strong]{border-color:#111827;border-width:2px;background:#fff;color:#111827}[data-metronome-tool] .accent-step-button[data-accent-state=normal]{border-color:#4b5563;background:#f3f4f6;color:#111827}[data-metronome-tool] .accent-step-button[data-accent-state=weak]{border-color:#9ca3af;background:#f9fafb;color:#4b5563}[data-metronome-tool] .accent-step-button[data-accent-state=mute]{border-color:#cbd5e1;background:#f8fafc;color:#64748b}[data-metronome-tool] .accent-state-label{display:block;margin-top:.25rem;font-size:.72rem;font-weight:600}@media(max-width:640px){[data-metronome-tool]{--metronome-bpm-input-height: 4.5rem}[data-metronome-tool] .metronome-beat-grid{grid-template-columns:repeat(auto-fit,minmax(4.75rem,1fr))}[data-metronome-tool] .metronome-beat{min-height:6rem;padding:.6rem .45rem}[data-metronome-tool] .beat-number{width:2rem;height:2rem}[data-metronome-tool] .metronome-bpm-panel{padding:.75rem}[data-metronome-tool] .metronome-stage:before{border-top-width:2px}[data-metronome-tool] .subdivision-dots{margin-top:.55rem}[data-metronome-tool] .metronome-choice-button{min-height:2.5rem}}@keyframes metronomePulse{0%{box-shadow:inset 0 0 0 2px #111827,0 0 #11182733,0 18px 34px #11182729}to{box-shadow:inset 0 0 0 2px #111827,0 0 0 12px #11182700,0 18px 34px #11182729}}[data-metronome-tool] .metronome-beat.is-current{animation:metronomePulse .76s ease-out}@media(prefers-reduced-motion:reduce){[data-metronome-tool] *{transition-duration:.01ms!important;animation-duration:.01ms!important}[data-metronome-tool] .metronome-beat.is-current{transform:none;animation:none}}