:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#ece9e0;--text-bright:#f0eee6;--text-muted:#a4aa9e;--tuning-green:#75df95;--tuning-red:#ff7878;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background:#11120f;font-family:DM Sans,SF Pro Display,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0}button,input,select{color:inherit;cursor:pointer;font:inherit}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline-offset:3px;outline:2px solid #bedc73}.app-shell{width:100%;max-width:980px;height:100dvh;padding:max(21px, env(safe-area-inset-top)) 21px max(21px, env(safe-area-inset-bottom));--text-muted:#909489;--tuning-green:#a9c995;background:#11120f;margin:0 auto}.metronome-stage{grid-template-rows:auto minmax(0,1fr) auto;justify-items:center;gap:13px;height:100%;min-height:0;display:grid}.music-back{color:#a4aa9e;border:0;border-radius:999px;justify-self:start;padding:8px 0;font:11px DM Mono,monospace;text-decoration:none}.music-back:hover{color:#e1efbd;background:#29331d}.metronome-dial-area{contain:strict;place-items:center;width:100%;height:100%;min-height:0;display:grid;container-type:size}.metronome-dial{aspect-ratio:1;background:0 0;border:0;border-radius:50%;width:min(100cqw,94cqh,560px);position:relative;container-type:inline-size}.tempo-value{flex-direction:column;align-items:center;gap:1.6cqw;display:flex;position:absolute;top:26.4%;left:50%;transform:translate(-50%)}.tempo-value input{appearance:textfield;text-align:center;letter-spacing:-.055em;color:#edece4;background:0 0;border:0;width:3.5ch;min-width:0;padding:0 .055em 0 0;font:400 17cqw/1.05 SF Pro Display,Helvetica Neue,sans-serif}.tempo-value input::-webkit-inner-spin-button{appearance:none;margin:0}.tempo-value input::-webkit-outer-spin-button{appearance:none;margin:0}.tempo-value span{color:#91968a;letter-spacing:.18em;font:10px/1.6 SFMono-Regular,monospace}.beat-track{pointer-events:none;border:1px solid #49503f;border-radius:50%;position:absolute;inset:8%}.beat-progress{opacity:0;pointer-events:none;z-index:1;position:absolute;inset:0}.beat-progress span{aspect-ratio:1;background:#ecf4d6;border-radius:50%;width:2.6%;position:absolute;top:8%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 12px #c8db9940}.metronome-dial.is-playing .beat-progress{will-change:transform}.beat-progress,.beat-bloom,.bloom-core,.bloom-glow{transition-property:none}.beat-bloom{--hit:0;--spread:1;pointer-events:none;z-index:2;position:absolute;inset:0}.bloom-core,.bloom-glow{aspect-ratio:1;opacity:var(--hit);border-radius:50%;position:absolute;top:8%;left:50%}.bloom-core{width:3.2%;transform:translate(-50%, -50%) scale(calc(1 + var(--hit) * 1.618));background:#78ed9f;box-shadow:0 0 13px #76ef9a50}.bloom-glow{width:16.18%;transform:translate(-50%, -50%) scale(calc(.618 + var(--spread)));background:radial-gradient(circle,#76ef9a45,#76ef9a12 45%,#0000 72%)}.beat-dot{aspect-ratio:1;background:#11120f;border:1px solid #626e52;border-radius:50%;width:2.4%;position:absolute;transform:translate(-50%,-50%)}.beat-dot.accent{border-color:#a6b38e;width:3.2%}.beat-dot.active{box-shadow:none;background:#b3cb99;border-color:#b3cb99}.play-button{aspect-ratio:1;color:#b8d3a3;background:#262e21;border:0;border-radius:50%;place-items:center;width:16.18%;padding:0;display:grid;position:absolute;top:61.8%;left:50%;transform:translate(-50%,-50%)}.play-button svg{fill:currentColor;width:34%}.play-button:hover,.play-button.playing{color:#c2dda9;background:#2a3424}.metronome-controls{gap:13px;width:min(100%,420px);display:grid}.tempo-adjust{color:var(--text-muted);align-items:center;gap:13px;font:10px SFMono-Regular,monospace;display:flex}.tempo-slider{accent-color:#b1c99b;appearance:none;background:#32362d;border:0;border-radius:10px;width:100%;min-width:0;height:3px;margin:0}.tempo-actions{justify-content:center;align-items:center;gap:13px;display:flex}.tap-button{touch-action:manipulation;-webkit-user-select:none;user-select:none;color:#b2bfa0;background:0 0;border:1px solid #3c4532;border-radius:999px;min-height:36px;padding:8px 21px;font:11px SFMono-Regular,monospace}.tap-button:hover{background:#222a1b;border-color:#bedc73}.tap-status{min-width:9ch;color:var(--text-muted);font:10px DM Mono,monospace}.meter-controls{text-align:center;gap:8px;display:grid}.control-label{color:var(--text-muted);font:9px DM Mono,monospace}.beat-options{grid-template-columns:repeat(12,minmax(0,1fr));gap:2px;display:grid}.beat-options button{min-width:0;height:30px;color:var(--text-muted);background:0 0;border:0;border-radius:8px;padding:0;font:11px DM Mono,monospace}.beat-options button:hover,.beat-options button.selected{color:#c2d9a9;background:#293322}.output-panel{flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 8px;min-width:0;display:flex}.output-picker{min-width:0;max-width:100%;color:var(--text-muted);align-items:center;gap:8px;font:10px DM Mono,monospace;display:flex}.output-picker select{width:135px;min-width:0;max-width:100%;height:28px;color:var(--text-muted);text-overflow:ellipsis;background:0 0;border:0;padding:0 4px;font:10px DM Mono,monospace}.output-picker select:disabled{cursor:default;opacity:.7}.choose-output{color:#c8d99b;background:0 0;border:0;min-height:28px;padding:0 4px;font:10px DM Mono,monospace}.output-message{color:var(--tuning-red);text-align:center;overflow-wrap:anywhere;flex-basis:100%;margin:0;font:10px/1.4 DM Mono,monospace}.tempo-slider::-webkit-slider-thumb{appearance:none;background:#d2dfbf;border:0;border-radius:50%;width:17px;height:17px;box-shadow:0 0 0 5px #d2dfbf08}.tap-status,.control-label{color:#909489;font:10px SFMono-Regular,monospace}.output-picker,.output-picker select{font:10px SFMono-Regular,monospace}@media (orientation:landscape) and (height<=540px){.metronome-stage{grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1.618fr) minmax(200px,1fr)}.metronome-dial-area{grid-area:1/1/3}.music-back{grid-area:1/2}.metronome-controls{grid-area:2/2;align-self:center}}@media (prefers-reduced-motion:reduce){.bloom-glow{display:none}.bloom-core{transform:translate(-50%,-50%)}*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}@media (width<=350px){.app-shell{padding-left:13px;padding-right:13px}.beat-options{gap:0}}@media (height<=600px){.app-shell{padding-top:8px;padding-bottom:8px}.metronome-stage,.metronome-controls{gap:8px}}
