.is-playing .play-glyph { width:9px; height:11px; margin:0; border:0; background:linear-gradient(to right,currentColor 0 3px,transparent 3px 6px,currentColor 6px); }
.play-toggle[data-waiting="true"] { position:relative; }
.play-toggle[data-waiting="true"][data-count-in="false"]::after,.v2-local-play[data-waiting="true"]::after { content:""; position:absolute; inset:4px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:v2-playback-wait 1s linear infinite; }
.play-toggle[data-waiting="true"]::before { content:""; position:absolute; inset:0; border-radius:50%; background:conic-gradient(#b77a18 calc(var(--playback-load,0) * 1turn),transparent 0); mask:radial-gradient(transparent 65%,#000 66%); }
.play-toggle[data-waiting="true"] .play-glyph { opacity:.45; }
.dock-player .mute-toggle[aria-pressed="true"] { background:#fff3dc; color:#9b6310; border-radius:20px; }
@keyframes v2-playback-wait { to { transform:rotate(360deg); } }
.play-toggle.v2-count-pulse { animation:v2-count-pulse .28s ease-out; }
.play-toggle[data-count-in="true"]::before { background:transparent; border:2px solid currentColor; mask:none; }
.play-toggle[data-count-in="true"][data-accent="true"]::before { border-color:#b77a18; }
@keyframes v2-count-pulse { from { box-shadow:0 0 0 6px #638d7340; } to { box-shadow:0 0 0 0 #638d7300; } }
.play-toggle[data-count-in="true"] .play-glyph { visibility:hidden; }
.v2-count-label { position:absolute; inset:0; display:grid; place-items:center; font:600 17px/1 Arial,sans-serif; }
.v2-preparation-note { position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); width:max-content; font:10px/1.3 Arial,sans-serif; color:#63806b; }
.v2-count-label[hidden],.v2-preparation-note[hidden] { display:none; }
@media(prefers-reduced-motion:reduce){.play-toggle.v2-count-pulse{animation:none}}
@media(prefers-reduced-motion:reduce){.play-toggle[data-waiting="true"]::after,.v2-local-play[data-waiting="true"]::after{animation:none}}
.tempo-trigger > * { pointer-events:none; }
.tempo-panel { position:fixed; z-index:60; inset:auto; width:292px; margin:0; padding:19px 20px 16px; border:1px solid #c8d3cc; border-radius:14px; background:#fffefa; color:#294d42; box-shadow:0 18px 48px #173c302b; }
.tempo-panel[hidden] { display:none; }
.tempo-panel header { display:flex; justify-content:space-between; align-items:center; }
.tempo-panel header strong { font:700 18px/1.2 "Songti SC","STSong",serif; }
.tempo-panel header span { color:#88958d; font-size:11px; letter-spacing:1px; }
.tempo-adjust { display:grid; grid-template-columns:44px 1fr 44px; align-items:center; gap:10px; margin:16px 0 10px; }
.tempo-adjust>button { min-width:44px; min-height:44px; padding:0; border:1px solid #d6dfd7; border-radius:10px; background:#f3f5ee; color:#365a4c; font-size:22px; touch-action:none; }
.tempo-adjust output { font-size:34px; font-weight:600; text-align:center; font-variant-numeric:tabular-nums; }
.tempo-adjust .tempo-edit { border-color:transparent; background:transparent; font-size:34px; font-weight:600; font-variant-numeric:tabular-nums; }
.tempo-adjust input[type="number"] { width:100%; min-width:0; height:44px; padding:0 3px; border:1px solid #b8cabb; border-radius:8px; background:transparent; color:#294d42; font-size:29px; text-align:center; }
.tempo-adjust [hidden] { display:none; }
.tempo-scale { position:relative; padding-bottom:22px; }
.tempo-scale input { position:relative; z-index:1; display:block; appearance:none; width:100%; height:40px; margin:0; padding:0; border:0; background:transparent; cursor:ew-resize; touch-action:none; }
.tempo-scale input::-webkit-slider-runnable-track { height:3px; border-radius:2px; background:linear-gradient(to right,#638d73 var(--tempo-fill),#d8ded3 var(--tempo-fill)); }
.tempo-scale input::-webkit-slider-thumb { appearance:none; width:18px; height:18px; margin-top:-7.5px; border:3px solid #fffefa; border-radius:50%; background:#36634f; box-shadow:0 0 0 1px #a5bba8,0 2px 5px #31534120; }
.tempo-scale input::-moz-range-track { height:3px; background:#d8ded3; }
.tempo-scale input::-moz-range-thumb { width:13px; height:13px; border:3px solid #fffefa; border-radius:50%; background:#36634f; }
.tempo-scale input:focus-visible { outline:2px solid #a8bbac; outline-offset:3px; border-radius:5px; }
.tempo-ticks { position:absolute; top:33px; left:9px; right:9px; height:24px; }
.tempo-ticks i { position:absolute; width:1px; height:4px; background:#c5cfbf; }
.tempo-ticks i.major { height:7px; background:#98ac94; }
.tempo-ticks span { position:absolute; top:9px; left:0; transform:translateX(-50%); color:#84917e; font:10px/1.2 Arial,sans-serif; }
.tempo-dragging .tempo-trigger { background:#f6efdf; border-color:#cbb57e; box-shadow:inset 0 -2px #b78a40; }
.tempo-dragging[data-detent="1"] .tempo-trigger { box-shadow:inset 0 -3px #b78a40; }
.tempo-panel [data-tempo="reset"],.tempo-panel [data-tempo="close"] { min-height:44px; border:0; background:transparent; color:#365a4c; }
.tempo-panel p { margin:7px 0 0; color:#83917e; font-size:11px; text-align:center; }
@media(max-width:720px){.tempo-panel{max-width:calc(100vw - 24px)}}
.metronome-number { display:inline-grid; place-items:center; flex:none; width:24px; height:26px; font:600 20px/1 Arial,sans-serif; font-variant-numeric:tabular-nums; color:var(--muted); transform-origin:center; }
[data-beat-active="true"] .metronome-number { color:var(--material-green); animation-duration:var(--beat-seconds,.4s); animation-timing-function:ease-out; }
[data-beat-strength="2"] { --beat-number-scale:1.45; --beat-number-glow:var(--material-green); }
[data-beat-strength="1"] { --beat-number-scale:1.28; --beat-number-glow:transparent; }
[data-beat-strength="0"] { --beat-number-scale:1.12; --beat-number-glow:transparent; }
[data-beat-phase="a"] .metronome-number { animation-name:v2-beat-number-a; }
[data-beat-phase="b"] .metronome-number { animation-name:v2-beat-number-b; }
@keyframes v2-beat-number-a { 0% { transform:scale(1); } 12% { transform:scale(var(--beat-number-scale)); text-shadow:0 0 6px var(--beat-number-glow); } 65%,100% { transform:scale(1); text-shadow:none; } }
@keyframes v2-beat-number-b { 0% { transform:scale(1); } 12% { transform:scale(var(--beat-number-scale)); text-shadow:0 0 6px var(--beat-number-glow); } 65%,100% { transform:scale(1); text-shadow:none; } }
@media(prefers-reduced-motion:reduce){
  [data-v2-metronome] .metronome-number { animation:none; transform:none; }
}
:root[data-reduced-motion=true] [data-v2-metronome] .metronome-number { animation:none; transform:none; }