:root{--text-muted: rgba(255, 255, 255, .25);--font-mono: "JetBrains Mono", "Fira Code", "SF Mono", monospace;--font-sans: "Inter", "SF Pro", -apple-system, sans-serif;--max-width: 440px;--radius-sm: calc(6em / 17);--radius-md: calc(10em / 17);--radius-lg: calc(16em / 17);--radius-xl: calc(24em / 17)}.theme-ember{--bg-color: #0a0a0a;--bg-gradient: radial-gradient(ellipse at 50% 30%, #1a1208 0%, #0d0d0d 55%, #0a0a0a 100%);--accent-color: #FF8C42;--text-main: #ffffff;--text-main-inverted: #000000;--text-dim: rgba(255, 255, 255, .4);--border-color: rgba(255, 255, 255, .1);--surface: rgba(255, 255, 255, .05);--surface-raised: rgba(255, 255, 255, .08);--glow: rgba(255, 140, 66, .45);--glow-soft: rgba(255, 107, 43, .15);--border-accent: rgba(255, 140, 66, .3);--beat-normal-bg: rgba(255, 255, 255, .06);--beat-normal-border: rgba(255, 255, 255, .12);--beat-stroke-bg: rgba(255, 140, 66, .18);--beat-stroke-border: var(--accent-color);--beat-mute-bg: rgba(255, 255, 255, .03);--beat-mute-border: rgba(255, 255, 255, .06);--text-muted: rgba(255, 255, 255, .25);--dropdown-bg: rgba(15, 10, 5, .96)}.theme-dark{--bg-color: #0a0a0a;--bg-gradient: radial-gradient(circle at center, #1a1a1a 0%, #0a0a0a 100%);--accent-color: #ffffff;--text-main: #ffffff;--text-main-inverted: #000000;--text-dim: rgba(255, 255, 255, .4);--border-color: rgba(255, 255, 255, .1);--surface: rgba(255, 255, 255, .05);--surface-raised: rgba(255, 255, 255, .09);--glow: rgba(255, 255, 255, .3);--glow-soft: rgba(255, 255, 255, .12);--border-accent: rgba(255, 255, 255, .25);--beat-normal-bg: rgba(255, 255, 255, .06);--beat-normal-border: rgba(255, 255, 255, .12);--beat-stroke-bg: rgba(255, 255, 255, .15);--beat-stroke-border: var(--accent-color);--beat-mute-bg: rgba(255, 255, 255, .02);--beat-mute-border: rgba(255, 255, 255, .05);--text-muted: rgba(255, 255, 255, .22);--dropdown-bg: rgba(8, 8, 8, .97)}.theme-green{--bg-color: #051105;--bg-gradient: radial-gradient(circle at center, #0a1a0a 0%, #051105 100%);--accent-color: #13ec13;--text-main: #ffffff;--text-main-inverted: #000000;--text-dim: rgba(255, 255, 255, .4);--border-color: rgba(255, 255, 255, .1);--surface: rgba(255, 255, 255, .05);--surface-raised: rgba(255, 255, 255, .08);--glow: rgba(19, 236, 19, .4);--glow-soft: rgba(19, 236, 19, .15);--border-accent: rgba(19, 236, 19, .3);--beat-normal-bg: rgba(255, 255, 255, .06);--beat-normal-border: rgba(255, 255, 255, .12);--beat-stroke-bg: rgba(19, 236, 19, .15);--beat-stroke-border: var(--accent-color);--beat-mute-bg: rgba(255, 255, 255, .03);--beat-mute-border: rgba(255, 255, 255, .06);--text-muted: rgba(255, 255, 255, .25);--dropdown-bg: rgba(3, 9, 3, .97)}.theme-white{--bg-color: #ffffff;--bg-gradient: #ffffff;--accent-color: #1d1d1f;--text-main: #1d1d1f;--text-main-inverted: #ffffff;--text-dim: #8b95a5;--border-color: rgba(0, 0, 0, .06);--surface: #ffffff;--surface-raised: #fafbfc;--glow: rgba(0, 0, 0, .06);--glow-soft: rgba(0, 0, 0, .02);--border-accent: rgba(0, 0, 0, .12);--beat-normal-bg: #ffffff;--beat-normal-border: rgba(0, 0, 0, .08);--beat-stroke-bg: rgba(29, 29, 31, .06);--beat-stroke-border: var(--accent-color);--beat-mute-bg: #fafbfc;--beat-mute-border: rgba(0, 0, 0, .04);--text-muted: rgba(0, 0, 0, .2);--dropdown-bg: rgba(255, 255, 255, .98)}.theme-white .bpm-panel,.theme-white .pulse-ring,.theme-white #beat-buttons button,.theme-white .fake-dropdown ul{backdrop-filter:none;-webkit-backdrop-filter:none}.theme-white .bpm-panel{box-shadow:0 calc(2em / 17) calc(16em / 17) #0000000a}.theme-white .fake-dropdown ul{box-shadow:0 calc(4em / 17) calc(24em / 17) #00000014}.theme-white #metronome-wrapper{background:#fff}.theme-white input[type=range].volume,.theme-white-blue input[type=range].volume{background:#00000014}.theme-white input[type=range]#tempo-range,.theme-white-blue input[type=range]#tempo-range{background:linear-gradient(to right,var(--accent-color) 0%,var(--accent-color) calc((var(--val, 60) - 20) / 280 * 100%),rgba(0,0,0,.08) calc((var(--val, 60) - 20) / 280 * 100%))}.theme-white-blue{--bg-color: #f5f5f7;--bg-gradient: linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%);--accent-color: #007aff;--text-main: #1d1d1f;--text-main-inverted: #ffffff;--text-dim: rgba(0, 0, 0, .4);--border-color: rgba(0, 0, 0, .1);--surface: rgba(0, 0, 0, .03);--surface-raised: rgba(0, 122, 255, .06);--glow: rgba(0, 122, 255, .3);--glow-soft: rgba(0, 122, 255, .12);--border-accent: rgba(0, 122, 255, .3);--beat-normal-bg: rgba(0, 0, 0, .04);--beat-normal-border: rgba(0, 0, 0, .12);--beat-stroke-bg: rgba(0, 122, 255, .12);--beat-stroke-border: var(--accent-color);--beat-mute-bg: rgba(0, 0, 0, .02);--beat-mute-border: rgba(0, 0, 0, .06);--text-muted: rgba(0, 0, 0, .25);--dropdown-bg: rgba(245, 245, 247, .97)}.theme-gold{--bg-color: #0c0b05;--bg-gradient: radial-gradient(circle at center, #1a180a 0%, #0c0b05 100%);--accent-color: #ffd700;--text-main: #ffffff;--text-main-inverted: #000000;--text-dim: rgba(255, 255, 255, .4);--border-color: rgba(255, 255, 255, .1);--surface: rgba(255, 255, 255, .05);--surface-raised: rgba(255, 255, 255, .08);--glow: rgba(255, 215, 0, .5);--glow-soft: rgba(255, 215, 0, .18);--border-accent: rgba(255, 215, 0, .3);--beat-normal-bg: rgba(255, 255, 255, .06);--beat-normal-border: rgba(255, 255, 255, .12);--beat-stroke-bg: rgba(255, 215, 0, .16);--beat-stroke-border: var(--accent-color);--beat-mute-bg: rgba(255, 255, 255, .03);--beat-mute-border: rgba(255, 255, 255, .06);--text-muted: rgba(255, 255, 255, .25);--dropdown-bg: rgba(9, 7, 3, .97)}.theme-purple{--bg-color: #0f0514;--bg-gradient: radial-gradient(circle at center, #1a0a24 0%, #0f0514 100%);--accent-color: #d400ff;--text-main: #ffffff;--text-main-inverted: #000000;--text-dim: rgba(255, 255, 255, .4);--border-color: rgba(255, 255, 255, .1);--surface: rgba(255, 255, 255, .05);--surface-raised: rgba(255, 255, 255, .08);--glow: rgba(212, 0, 255, .5);--glow-soft: rgba(212, 0, 255, .18);--border-accent: rgba(212, 0, 255, .3);--beat-normal-bg: rgba(255, 255, 255, .06);--beat-normal-border: rgba(255, 255, 255, .12);--beat-stroke-bg: rgba(212, 0, 255, .15);--beat-stroke-border: var(--accent-color);--beat-mute-bg: rgba(255, 255, 255, .03);--beat-mute-border: rgba(255, 255, 255, .06);--text-muted: rgba(255, 255, 255, .25);--dropdown-bg: rgba(10, 3, 15, .97)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.container:has(#metronome-wrapper){padding:0}body{font-family:var(--font-sans);background-color:var(--bg-color);overscroll-behavior-x:none}#metronome-wrapper{width:100%;font-size:4.4444444444444444vw;min-height:100dvh;display:flex;flex-direction:column;align-items:center;background:var(--bg-gradient);background-color:var(--bg-color);color:var(--text-main);font-family:var(--font-sans);box-shadow:inset 0 0 calc(120em / 17) var(--glow-soft)}#metronome-wrapper button{font-size:1em}.metronome-header{width:100%;max-width:var(--max-width);display:flex;align-items:center;justify-content:left;gap:calc(10em / 17);padding:calc(28em / 17) calc(24em / 17) calc(20em / 17);position:relative}h1#metronome-page-title{font-family:unset;font-size:calc(19em / 17);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);text-align:center;margin:0}.header-led{width:calc(7em / 17);height:calc(7em / 17);border-radius:50%;background:var(--text-muted);transition:background .2s,box-shadow .2s;flex-shrink:0}#metronome-wrapper.is-playing .header-led{background:var(--accent-color);box-shadow:0 0 calc(8em / 17) var(--glow),0 0 calc(16em / 17) var(--glow);animation:led-pulse .8s ease-in-out infinite}@keyframes led-pulse{0%,to{opacity:1}50%{opacity:.5}}#metronome-body{width:100%;max-width:500px;padding:0 calc(24em / 17) calc(32em / 17);display:flex;flex-direction:column;align-items:center;gap:0;flex:1}.bpm-panel{width:100%;background:var(--surface);border:1px solid var(--border-accent);border-radius:var(--radius-xl);padding:calc(20em / 17) calc(16em / 17) calc(18em / 17);display:flex;flex-direction:column;align-items:center;gap:calc(6em / 17);backdrop-filter:blur(calc(12em / 17));-webkit-backdrop-filter:blur(calc(12em / 17));box-shadow:0 0 calc(30em / 17) var(--glow-soft),inset 0 1px #ffffff14;margin-bottom:calc(20em / 17)}.bpm-label{font-family:var(--font-mono);font-size:calc(32em / 17);font-weight:500;color:var(--accent-color);letter-spacing:0;line-height:1;align-self:center;margin-right:calc(-2em / 17);text-shadow:0 0 calc(12em / 17) var(--glow-soft);-webkit-user-select:none;user-select:none}.bpm-controls{display:flex;align-items:center;justify-content:center;gap:calc(8em / 17)}.bpm-display{font-family:var(--font-mono);font-size:calc(72em / 17);font-weight:700;width:3.2ch;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--accent-color);text-shadow:0 0 calc(1em / 17) var(--glow),0 0 calc(5em / 17) var(--glow-soft);background:transparent;border:none;outline:none;line-height:1;-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield;cursor:text;border-radius:calc(4em / 17);transition:box-shadow .15s ease,background .15s ease}.bpm-display:focus,.bpm-display:focus-visible{outline:none;background:var(--surface-raised);box-shadow:0 0 0 1px var(--border-accent),0 0 calc(16em / 17) var(--glow-soft)}.bpm-display::-webkit-inner-spin-button,.bpm-display::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}.tempo-btn{width:calc(44em / 17);height:calc(44em / 17);border-radius:50%;border:1px solid var(--border-accent);background:var(--surface-raised);color:var(--accent-color);cursor:pointer;position:relative;overflow:hidden;transition:border-color .15s,box-shadow .15s,background .15s;flex-shrink:0}.tempo-btn:hover{border-color:var(--accent-color);box-shadow:0 0 calc(12em / 17) var(--glow-soft);background:var(--beat-stroke-bg)}.tempo-btn:active{box-shadow:0 0 calc(18em / 17) var(--glow);background:var(--surface-raised)}.tempo-btn--increase:before,.tempo-btn--increase:after{content:"";position:absolute;background:var(--accent-color);border-radius:calc(2em / 17);top:50%;left:50%;transform:translate(-50%,-50%)}.tempo-btn--increase:before{width:calc(14em / 17);height:2px}.tempo-btn--increase:after{width:2px;height:calc(14em / 17)}.tempo-btn--decrease:before{content:"";position:absolute;background:var(--accent-color);border-radius:calc(2em / 17);width:calc(14em / 17);height:2px;top:50%;left:50%;transform:translate(-50%,-50%)}.tempo-wrap{width:100%;margin-bottom:calc(24em / 17)}input[type=range]#tempo-range{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:calc(6em / 17);border-radius:calc(3em / 17);background:linear-gradient(to right,var(--accent-color) 0%,var(--accent-color) calc((var(--val, 60) - 20) / 280 * 100%),rgba(255,255,255,.1) calc((var(--val, 60) - 20) / 280 * 100%));outline:none;cursor:pointer;touch-action:pan-y;overscroll-behavior-x:contain}input[type=range]#tempo-range::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:calc(18em / 17);height:calc(18em / 17);border-radius:50%;background:var(--accent-color);box-shadow:0 0 calc(10em / 17) var(--glow),0 0 calc(20em / 17) var(--glow-soft);cursor:pointer;border:2px solid rgba(255,255,255,.2);transition:box-shadow .15s}input[type=range]#tempo-range::-webkit-slider-thumb:hover{box-shadow:0 0 calc(16em / 17) var(--glow),0 0 calc(28em / 17) var(--glow)}input[type=range]#tempo-range::-moz-range-thumb{width:calc(18em / 17);height:calc(18em / 17);border-radius:50%;background:var(--accent-color);box-shadow:0 0 calc(10em / 17) var(--glow);cursor:pointer;border:2px solid rgba(255,255,255,.2)}.play-button-wrap{position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:1.375em;padding:1.25em}.play-button{position:relative;z-index:2;width:4.5em;height:4.5em;border-radius:50%;border:2px solid var(--accent-color);background:var(--surface);cursor:pointer;box-shadow:0 0 1.25em var(--glow-soft),inset 0 0 .75em #ffffff0a;animation:play-btn-pulse 2s ease-in-out infinite;transition:border-color .2s,box-shadow .2s,background .2s}@keyframes play-btn-pulse{0%,to{box-shadow:0 0 calc(18em / 17) var(--glow-soft)}50%{box-shadow:0 0 calc(28em / 17) var(--glow),0 0 calc(42em / 17) var(--glow-soft)}}.play-button:hover{box-shadow:0 0 calc(28em / 17) var(--glow),0 0 calc(48em / 17) var(--glow-soft)}.play-icon{position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);width:0;height:0;border-top:calc(12em / 17) solid transparent;border-bottom:calc(12em / 17) solid transparent;border-left:calc(18em / 17) solid var(--accent-color);display:block;transition:opacity .15s}.stop-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(18em / 17);height:calc(18em / 17);display:none;opacity:0;transition:opacity .15s}.stop-icon:before,.stop-icon:after{content:"";position:absolute;top:0;width:calc(6em / 17);height:calc(18em / 17);background:var(--accent-color);border-radius:calc(2em / 17)}.stop-icon:before{left:calc(1em / 17)}.stop-icon:after{right:calc(1em / 17)}.play-button.now-playing{border-color:var(--accent-color);background:var(--glow-soft);animation:none;box-shadow:0 0 calc(24em / 17) var(--glow),0 0 calc(48em / 17) var(--glow-soft)}.play-button.now-playing .play-icon{display:none}.play-button.now-playing .stop-icon{display:block;opacity:1}.pulse-ring{position:absolute;z-index:1;top:50%;left:50%;width:calc(72em / 17);height:calc(72em / 17);transform:translate(-50%,-50%);border-radius:50%;pointer-events:none}.pulse-ring.pulse{animation:ring-expand .6s ease-out forwards}@keyframes ring-expand{0%{transform:translate(-50%,-50%) scale(1);opacity:.8;box-shadow:0 0 0 calc(3em / 17) var(--accent-color)}to{transform:translate(-50%,-50%) scale(2.2);opacity:0;box-shadow:0 0 0 1px var(--accent-color)}}#metronome-wrapper.mode-pendulum .pulse-ring{display:none}.sweep-bar{display:none;position:fixed;top:0;bottom:0;width:calc(4em / 17);background:linear-gradient(to bottom,transparent 0%,var(--accent-color) 15%,var(--accent-color) 85%,transparent 100%);box-shadow:0 0 calc(20em / 17) var(--glow);opacity:0;pointer-events:none;z-index:0;will-change:left,opacity}#metronome-wrapper.mode-pendulum .sweep-bar{display:block}.sweep-bar--ltr{left:0}.sweep-bar--rtl{left:calc(100vw - (4em / 17))}@keyframes sweep-ltr{0%{left:0;opacity:.85}85%{left:calc(100vw - (4em / 17));opacity:.85}to{left:calc(100vw - (4em / 17));opacity:0}}@keyframes sweep-rtl{0%{left:calc(100vw - (4em / 17));opacity:.85}85%{left:0;opacity:.85}to{left:0;opacity:0}}.volume-wrap{display:flex;align-items:center;justify-content:center;gap:calc(10em / 17);width:100%;margin-bottom:calc(28em / 17)}.volume-icon{width:calc(18em / 17);height:calc(18em / 17);fill:var(--text-dim);flex-shrink:0;transition:fill .2s}.volume-icon--loud,.volume-icon--mute{display:none}.volume-wrap.loud .volume-icon:not(.volume-icon--loud):not(.volume-icon--mute){display:none}.volume-wrap.loud .volume-icon--loud{display:block;fill:var(--accent-color)}.volume-wrap.mute .volume-icon:not(.volume-icon--mute){display:none}.volume-wrap.mute .volume-icon--mute{display:block;fill:var(--text-muted)}input[type=range].volume{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:52%;height:calc(4em / 17);border-radius:calc(2em / 17);background:#ffffff1f;outline:none;cursor:pointer;transition:opacity .2s}input[type=range].volume:hover{opacity:1}input[type=range].volume::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:calc(14em / 17);height:calc(14em / 17);border-radius:50%;background:var(--text-dim);box-shadow:0 0 calc(6em / 17) #fff3;cursor:pointer;transition:background .15s,box-shadow .15s}.volume-wrap.loud input[type=range].volume::-webkit-slider-thumb{background:var(--accent-color);box-shadow:0 0 calc(8em / 17) var(--glow-soft)}input[type=range].volume::-moz-range-thumb{width:calc(14em / 17);height:calc(14em / 17);border-radius:50%;background:var(--text-dim);border:none;cursor:pointer}#beat-wrap{width:100%;border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:calc(16em / 17);background:var(--surface);backdrop-filter:blur(calc(8em / 17));-webkit-backdrop-filter:blur(calc(8em / 17));box-shadow:inset 0 1px #ffffff0f}#beat-wrap legend{display:none}.time-sig-row{display:flex;align-items:flex-end;gap:calc(8em / 17);margin-bottom:calc(14em / 17);justify-content:center}.fake-dropdown{position:relative;display:inline-block}.fake-dropdown:before{content:attr(title);display:block;font-size:calc(10.4em / 17);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:calc(4em / 17);white-space:nowrap}.fake-dropdown+.fake-dropdown{margin-left:0}.fake-dropdown span{position:relative;display:flex;align-items:center;justify-content:center;padding:0 calc(26em / 17) 0 calc(10em / 17);height:calc(40em / 17);min-width:calc(56em / 17);border:1px solid var(--border-color);border-radius:var(--radius-sm);background:#ffffff0a;color:var(--text-main);font-family:var(--font-mono);font-size:calc(14.4em / 17);font-weight:500;cursor:pointer;transition:border-color .15s,box-shadow .15s}#division-value,#division-list div[role=button]{color:var(--accent-color)}#division-value svg,#division-list svg{display:block;width:calc(46em / 17);height:2em;overflow:visible}#division-list div[role=button]{padding:0 calc(10em / 17);min-width:calc(54em / 17);justify-content:center}.fake-dropdown:hover span{border-color:var(--border-accent);box-shadow:0 0 calc(8em / 17) var(--glow-soft)}.fake-dropdown span:after{position:absolute;top:50%;right:0;transform:translateY(-50%);width:calc(24em / 17);height:calc(24em / 17);content:"";display:block;background-color:var(--accent-color);opacity:.7;-webkit-mask:no-repeat center url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m16.843 10.211c.108-.141.157-.3.157-.456 0-.389-.306-.755-.749-.755h-8.501c-.445 0-.75.367-.75.755 0 .157.05.316.159.457 1.203 1.554 3.252 4.199 4.258 5.498.142.184.36.29.592.29.23 0 .449-.107.591-.291 1.002-1.299 3.044-3.945 4.243-5.498z'/%3E%3C/svg%3E");mask:no-repeat center url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m16.843 10.211c.108-.141.157-.3.157-.456 0-.389-.306-.755-.749-.755h-8.501c-.445 0-.75.367-.75.755 0 .157.05.316.159.457 1.203 1.554 3.252 4.199 4.258 5.498.142.184.36.29.592.29.23 0 .449-.107.591-.291 1.002-1.299 3.044-3.945 4.243-5.498z'/%3E%3C/svg%3E");-webkit-mask-size:100%;mask-size:100%}.fake-dropdown ul{display:none;position:absolute;left:0;top:calc(100% + 2px);list-style:none;margin:0;padding:calc(4em / 17);min-width:100%;border:1px solid var(--border-accent);border-radius:var(--radius-md);background:var(--dropdown-bg);backdrop-filter:blur(calc(16em / 17));-webkit-backdrop-filter:blur(calc(16em / 17));box-shadow:0 calc(8em / 17) calc(32em / 17) #0009,0 0 calc(16em / 17) var(--glow-soft);max-height:calc(180em / 17);overflow-y:auto;overflow-x:hidden;z-index:100;animation:dropdown-appear .15s ease-out}@keyframes dropdown-appear{0%{opacity:0;transform:translateY(calc(-6em / 17))}to{opacity:1;transform:translateY(0)}}.fake-dropdown ul::-webkit-scrollbar{width:calc(4em / 17)}.fake-dropdown ul::-webkit-scrollbar-track{background:transparent}.fake-dropdown ul::-webkit-scrollbar-thumb{background:var(--border-accent);border-radius:calc(2em / 17)}.fake-dropdown ul div{width:100%;font-family:var(--font-mono);font-size:calc(14em / 17);font-weight:500;color:var(--text-dim);text-align:center;border:none;padding:calc(7em / 17) calc(10em / 17);border-radius:var(--radius-sm);background:transparent no-repeat;background-size:contain;background-position:left calc(6em / 17) center;cursor:pointer;transition:color .1s,background .1s}.fake-dropdown ul div:hover{background-color:var(--beat-stroke-bg);color:var(--accent-color)}.fake-dropdown.show ul{display:block}.fake-dropdown select{display:none}.fake-dropdown.has-image span,.fake-dropdown.has-image div{padding-left:calc(26em / 17)}.fake-dropdown.has-image.hide-text span,.fake-dropdown.has-image.hide-text div{text-indent:-200vw;padding-left:calc(14em / 17);min-width:calc(52em / 17)}#beat-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(6em / 17)}#beat-buttons button:first-child:last-child{display:none}#beat-buttons button{border:1px solid var(--beat-normal-border);border-radius:var(--radius-sm);background:var(--beat-normal-bg);color:var(--text-dim);font-family:var(--font-mono);font-size:calc(12em / 17);font-weight:600;cursor:pointer;overflow:hidden;transition:border-color .1s,background .1s,color .1s,box-shadow .1s;letter-spacing:.05em;aspect-ratio:2.3 / 1}#beat-buttons button:hover{border-color:var(--border-accent);background:var(--beat-normal-bg);color:var(--text-main)}#beat-buttons button.stroke{border-color:var(--accent-color);background:var(--beat-stroke-bg);color:var(--accent-color);font-weight:700;box-shadow:0 0 0 1px var(--accent-color),0 0 calc(10em / 17) var(--glow-soft),inset 0 0 calc(6em / 17) var(--glow-soft)}#beat-buttons button.mute{border-color:var(--beat-mute-border);background:var(--beat-mute-bg);color:var(--text-muted)}#beat-buttons button.tick{animation:beat-tick .45s ease-out forwards}@keyframes beat-tick{0%{transform:scale(1.08);box-shadow:0 0 0 calc(2em / 17) var(--accent-color),0 0 calc(18em / 17) var(--glow),inset 0 0 calc(10em / 17) var(--glow)}to{transform:scale(1);box-shadow:0 0 0 0 transparent,0 0 0 transparent,inset 0 0 0 transparent}}#beat-buttons button.stroke.tick{animation:beat-tick-stroke .5s ease-out forwards}@keyframes beat-tick-stroke{0%{transform:scale(1.13);box-shadow:0 0 0 calc(3em / 17) var(--accent-color),0 0 calc(26em / 17) var(--glow),inset 0 0 calc(14em / 17) var(--glow)}to{transform:scale(1);box-shadow:0 0 0 1px var(--accent-color),0 0 calc(10em / 17) var(--glow-soft),inset 0 0 calc(6em / 17) var(--glow-soft)}}#metronome-body .play-button>div{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:50%;z-index:-1;animation:play-pulse-fadeout .6s ease-out forwards}@keyframes play-pulse-fadeout{0%{box-shadow:0 0 0 calc(4em / 17) var(--accent-color),0 0 calc(24em / 17) var(--glow);opacity:1;transform:scale(1)}to{box-shadow:0 0 0 calc(12em / 17) transparent;opacity:0;transform:scale(1.5)}}.metronome-header{position:relative}.sound-toggle{margin-left:auto;background:var(--surface);border:1px solid var(--border-color);border-radius:50%;color:var(--text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;width:calc(36em / 17);height:calc(36em / 17);transition:color .2s,border-color .2s;z-index:200;position:relative}.sound-toggle:hover{color:var(--text-main);border-color:var(--accent-color)}.sound-popup{position:absolute;right:0;top:calc(58em / 17);background:var(--dropdown-bg, rgba(20, 16, 10, .95));border:1px solid var(--border-accent);border-radius:calc(10em / 17);padding:calc(6em / 17);display:none;flex-direction:column;gap:calc(2em / 17);backdrop-filter:blur(calc(16em / 17));-webkit-backdrop-filter:blur(calc(16em / 17));box-shadow:0 calc(8em / 17) calc(32em / 17) #0009,0 0 calc(16em / 17) var(--glow-soft);z-index:300;min-width:calc(160em / 17);animation:dropdown-appear .15s ease-out}.sound-popup.active{display:flex}.sound-opt{background:transparent;border:1px solid transparent;border-radius:calc(6em / 17);color:var(--text-main);text-align:left;padding:calc(8em / 17) calc(12em / 17);cursor:pointer;font-family:inherit;font-size:calc(13em / 17);display:flex;align-items:center;justify-content:space-between;gap:calc(8em / 17);transition:background .12s,color .12s}.sound-opt:hover{background:var(--glow-soft);color:var(--accent-color)}.sound-opt.active{background:var(--glow-soft);color:var(--accent-color);border-color:var(--accent-color);font-weight:600}.sound-credit-icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:calc(22em / 17);height:calc(22em / 17);border-radius:50%;border:1px solid var(--border-color);background:transparent;color:var(--text-dim);font-size:calc(12em / 17);font-family:serif;padding:0;cursor:pointer;text-decoration:none;transition:color .15s,border-color .15s}.sound-credit-icon:hover{color:var(--accent-color);border-color:var(--accent-color)}.sound-opt-row{display:flex;align-items:center;gap:calc(4em / 17)}.sound-opt-row .sound-opt{flex:1}.sound-credit-popover{position:fixed;top:0;right:0;bottom:0;left:0;margin:auto;width:fit-content;height:fit-content;background:#14100af7;border:1px solid var(--border-accent, rgba(255, 140, 66, .3));border-radius:12px;padding:16px 20px;color:#fff;font-size:14px;line-height:1.6;max-width:280px;box-shadow:0 8px 32px #0009;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.sound-credit-popover::backdrop{background:#00000059}.sound-credit-popover p{margin:0 0 10px;color:#ffffffb3}.sound-credit-popover a{color:var(--accent-color, #FF8C42);text-decoration:none;font-weight:500}.sound-credit-popover a:hover{text-decoration:underline}.mode-toggle{background:var(--surface);border:1px solid var(--border-color);border-radius:50%;color:var(--text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;width:calc(36em / 17);height:calc(36em / 17);transition:color .2s,border-color .2s;z-index:200}.mode-toggle:hover{color:var(--text-main);border-color:var(--accent-color)}.mode-icon{display:none}#metronome-wrapper.mode-ring .mode-icon--ring,#metronome-wrapper.mode-pendulum .mode-icon--pendulum{display:block}.theme-toggle{background:var(--surface);border:1px solid var(--border-color);border-radius:50%;color:var(--text-dim);font-size:calc(14em / 17);font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;width:calc(36em / 17);height:calc(36em / 17);transition:color .2s,border-color .2s;z-index:200}.theme-toggle:hover{color:var(--text-main);border-color:var(--accent-color)}.theme-popup{position:absolute;top:calc(58em / 17);right:calc(10em / 17);background:#fff;padding:calc(10em / 17);border-radius:calc(50em / 17);display:none;gap:calc(12em / 17);box-shadow:0 calc(12em / 17) calc(36em / 17) #00000073;animation:theme-slide-down .2s ease-out;z-index:300}.theme-popup.active{display:flex}@keyframes theme-slide-down{0%{opacity:0;transform:translateY(calc(-8em / 17))}to{opacity:1;transform:translateY(0)}}.theme-opt{width:calc(38em / 17);height:calc(38em / 17);border-radius:50%;cursor:pointer;border:2px solid #e0e0e0;flex-shrink:0;transition:transform .15s}.theme-opt:hover{transform:scale(1.15)}.theme-opt.active{border-color:#000}.theme-white .fake-dropdown ul div,.theme-white-blue .fake-dropdown ul div{color:var(--text-dim)}.theme-white .fake-dropdown ul div:hover,.theme-white-blue .fake-dropdown ul div:hover{color:var(--accent-color)}@media (min-width: 440px){#metronome-wrapper{font-size:19px}}.tempo-btn:focus-visible,.play-button:focus-visible,.theme-toggle:focus-visible,input[type=range]:focus-visible,.fake-dropdown:focus-visible,#beat-buttons button:focus-visible{outline:none;box-shadow:0 0 0 2px var(--accent-color),0 0 calc(12em / 17) var(--glow-soft)}@media (prefers-reduced-motion: reduce){.header-led,.play-button{animation:none!important}}