body,html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}@keyframes pulseExpand{0%{height:0;opacity:1;width:0}to{height:100px;opacity:0;width:100px}}@keyframes tapGlow{0%{box-shadow:0 8px 32px #0000001a}50%{box-shadow:0 8px 32px #37415166}to{box-shadow:0 8px 32px #0000001a}}.tap-button-active{animation:tapGlow .3s ease-in-out}.song-structure-overlay{-webkit-overflow-scrolling:touch;align-items:center;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background-color:#0000;bottom:0;display:flex;justify-content:center;left:0;opacity:0;overscroll-behavior:contain;position:fixed;right:0;top:0;transition:opacity .3s ease-in-out;z-index:10000}.song-structure-overlay.open{opacity:1}.song-structure-editor{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:var(--modal-bg);border:none;border-radius:20px;box-shadow:0 25px 50px #0000004d;color:#ffffffe6;display:flex;flex-direction:column;max-height:85vh;opacity:0;overflow:hidden;padding:24px;transform:translateY(100px);transition:all .3s ease-in-out;width:min(880px,95vw)}.song-structure-editor.open{opacity:1;transform:translateY(0)}.song-structure-editor input[type=number]::-webkit-inner-spin-button,.song-structure-editor input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.song-structure-editor input[type=number]{-moz-appearance:textfield}@keyframes input-flash-bg{0%{background:var(--button-hover-bg)}to{background:#00000026}}.song-structure-editor .flash{animation:input-flash-bg .5s ease-out}[data-theme=light] .song-structure-editor{--text-secondary:#fffffff2}[data-theme=light] .song-structure-editor .add-bar-button,[data-theme=light] .song-structure-editor .save-button{background:#10b98180!important;color:#fffffff2!important}[data-theme=light] .song-structure-editor .add-bar-button:hover:not(:disabled),[data-theme=light] .song-structure-editor .save-button:hover:not(:disabled){background:#10b981b3!important;color:#fff!important}[data-theme=light] .song-structure-editor .add-bar-button:disabled,[data-theme=light] .song-structure-editor .save-button:disabled{background:#6b728066!important;color:#fff9!important}[data-theme=light] .song-structure-editor .import-export-button{background:#9ca3af80!important;color:#fffffff2!important}[data-theme=light] .song-structure-editor .import-export-button:hover{background:#9ca3afb3!important;color:#fff!important}[data-theme=light] .song-structure-editor .tooltip{color:#fffffff2!important}@media (min-width:771px){.mobile-apply-button{display:none!important}.song-structure-editor .button-row{display:flex!important}}@media (max-width:770px){.song-structure-overlay{align-items:stretch!important;padding:0!important}.song-structure-editor{border-radius:0!important;display:flex!important;flex-direction:column!important;height:100vh!important;margin:0!important;max-height:100vh!important;overflow:hidden!important;padding:20px!important;width:100vw!important}.song-structure-editor .modal-content{flex:1 1!important;overflow-y:auto!important;padding-right:8px!important}.mobile-apply-button{display:block!important}.song-structure-editor .button-row{display:none!important}}@media (max-width:768px){.song-structure-overlay{align-items:stretch!important;padding:0!important}.song-structure-editor{border-radius:0!important;display:flex!important;flex-direction:column!important;height:100vh!important;margin:0!important;max-height:100vh!important;overflow:hidden!important;padding:20px!important;width:100vw!important}.song-structure-editor .modal-content{flex:1 1!important;overflow-y:auto!important;padding-right:8px!important}.mobile-apply-button{display:block!important}.song-structure-editor .button-row{display:none!important}.song-structure-editor .bar-row{display:flex!important;flex-direction:column!important;gap:12px!important;padding:16px!important}.song-structure-editor .bar-section{align-items:flex-start!important;display:flex!important;flex-direction:column!important;gap:8px!important}.song-structure-editor .bar-section .section-header{font-size:14px!important;font-weight:600!important;margin-bottom:4px!important}.song-structure-editor .bar-section .input-row{align-items:center!important;display:flex!important;gap:8px!important;width:100%!important}.song-structure-editor input[type=number]{font-size:16px!important;min-width:60px!important;padding:12px!important;text-align:center!important}.song-structure-editor .time-sig-input{font-size:18px!important;height:50px!important;width:50px!important}.song-structure-editor .delete-button{align-self:flex-end!important;height:44px!important;margin-top:8px!important;width:44px!important}.song-structure-editor .add-bar-button,.song-structure-editor .save-button{font-size:16px!important;margin-top:8px!important;min-height:48px!important;padding:16px 24px!important;width:100%!important}.song-structure-editor .button-row{display:flex!important;flex-direction:column!important;gap:12px!important;padding:16px!important}.song-structure-editor .button-row button,.song-structure-editor .button-row>div{width:100%!important}}@media (max-width:480px){.song-structure-overlay{align-items:stretch!important;padding:0!important}.song-structure-editor{border-radius:0!important;display:flex!important;flex-direction:column!important;height:100vh!important;margin:0!important;max-height:100vh!important;overflow:hidden!important;padding:16px!important;width:100vw!important}.song-structure-editor .modal-content{flex:1 1!important;overflow-y:auto!important;padding-right:8px!important}.mobile-apply-button{display:block!important}.song-structure-editor .button-row{display:none!important}.song-structure-editor .bar-row{padding:12px!important}.song-structure-editor input[type=number]{font-size:14px!important;padding:10px!important}.song-structure-editor .time-sig-input{font-size:16px!important;height:44px!important;width:44px!important}}:root{--bg-primary:#111c28;--bg-secondary:#112435;--bg-flash:#434a58;--bg-flash-secondary:#434a58;--bg-flash-tertiary:#2c3b47;--text-primary:#fff;--text-secondary:#fffc;--text-muted:#ffffff80;--border-color:#fff3;--border-color-strong:#ffffff4d;--button-bg:#ffffff1a;--button-hover-bg:#fff3;--button-hover-color:#fff;--input-bg:#ffffff1a;--input-border:#ffffff4d;--slider-track:#fffc;--slider-thumb:#ffffff4d;--slider-thumb-hover:#fff;--overlay-bg:#ffffff0d;--overlay-border:#ffffff1a;--circular-button-bg:#ffffff0d;--dial-border:#ffffff4d;--beat-dot-active:#fff;--beat-dot-inactive:#495979bf;--toggle-bg:#ffffff0d;--toggle-border:#ffffff1a;--dropdown-bg:#ffffff1a;--dropdown-border:#ffffff4d;--control-button-bg:#ffffff1a;--control-button-border:#ffffff4d;--icon-color:#fffc;--logo-filter:drop-shadow(0 2px 4px #0000004d);--kbd-bg:#ffffff26;--modal-bg:#222a37bf}[data-theme=light]{--bg-primary:#f5f5f5;--bg-secondary:#e8f4fd;--bg-flash:#5b5b5b;--bg-flash-secondary:#393939;--bg-flash-tertiary:#212121;--text-primary:#000;--text-secondary:#000c;--text-muted:#00000080;--border-color:#0003;--border-color-strong:#0000004d;--button-bg:#80808033;--button-hover-bg:#5f5f5f4d;--button-hover-color:#000;--input-bg:#8080801a;--input-border:#0000004d;--slider-track:#000c;--slider-thumb:#0000004d;--slider-thumb-hover:#000;--overlay-bg:#0000001a;--circular-button-bg:#0000001a;--dial-border:#0000004d;--beat-dot-active:#000c;--beat-dot-inactive:#0003;--toggle-bg:#80808033;--toggle-border:#0000004d;--dropdown-bg:#80808033;--dropdown-border:#0006;--control-button-bg:#80808033;--control-button-border:#0006;--icon-color:#000c;--logo-filter:drop-shadow(0 2px 4px #0000001a);--kbd-bg:rgba(0,0,0,.207);--modal-bg:#151a22bf}.App{text-align:center}.polytrome-logo{left:20px;position:fixed;top:25px;transition:all .3s ease;z-index:20}@media (max-width:768px){.polytrome-logo.scroll-hidden{opacity:0!important;pointer-events:none!important;transform:translateX(-50%) translateY(-100px)!important}}.polytrome-logo img{filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));filter:var(--logo-filter);height:auto;transition:all .3s ease;width:180px}@media (max-width:768px){.polytrome-logo{left:50%;position:fixed;top:25px;transform:translateX(-50%)}}.metronome-container.zen-mode .polytrome-logo{opacity:0;pointer-events:none;transition:opacity .6s ease-in-out}.metronome-container{align-items:center;background:linear-gradient(135deg,#111c28,#111c28 50%,#112435);background:linear-gradient(135deg,var(--bg-primary) 0,var(--bg-primary) 50%,var(--bg-secondary) 100%);color:#fff;color:var(--text-primary);display:flex;flex-direction:column;justify-content:center;min-height:100vh;overflow-x:hidden;overflow-y:visible;padding:20px;position:relative;transition:background 1s cubic-bezier(.4,0,.2,1)}.metronome-container.screen-flash{background:linear-gradient(135deg,#434a58,#434a58 50%,#2c3b47);background:linear-gradient(135deg,var(--bg-flash) 0,var(--bg-flash-secondary) 50%,var(--bg-flash-tertiary) 100%)}.beats-loading-container{margin-bottom:20px;opacity:0;position:relative;transition:all 1s cubic-bezier(.4,0,.2,1);z-index:10}.beats-loading-container.beats-visible{opacity:1;transform:scale(1)}.ui-container{align-items:center;display:flex;flex-direction:column;opacity:0;transition:all 1s cubic-bezier(.4,0,.2,1);width:100%;z-index:5}.ui-container.ui-visible{opacity:1;top:20vh}.metronome-container.zen-mode:before{background:#0000004d;bottom:0;content:"";left:0;opacity:1;pointer-events:none;right:0;top:0;transition:opacity 1s cubic-bezier(.4,0,.2,1);z-index:1}[data-theme=light] .metronome-container.zen-mode:before{opacity:0!important}.metronome-container:before{background:#0000004d;bottom:0;content:"";left:0;opacity:0;pointer-events:none;position:absolute;right:0;top:0;transition:opacity 1s cubic-bezier(.4,0,.2,1);z-index:1}.beats-loading-container.beats-normal-zen-hidden,.beats-zen-container{opacity:0;transition:opacity .6s ease-in-out}.beats-zen-container{left:50vw;pointer-events:none;position:fixed;top:50vh;transform:translate(-50%,-50%) scale(1.5);z-index:15}@media (max-width:768px){.beats-zen-container{transform:translate(-50%,-50%) scale(1.2)}}@media (max-width:480px){.beats-zen-container{transform:translate(-50%,-50%) scale(.8)}}@media (max-width:320px){.beats-zen-container{transform:translate(-50%,-50%) scale(.6)}}.beats-zen-container.beats-zen-visible{opacity:1;pointer-events:auto}.metronome-container.zen-mode .ui-container{opacity:0!important;pointer-events:none;top:60vh!important;transition:opacity .6s ease-in-out}.ui-fade-in{opacity:0;transition:opacity 1.25s ease-in-out}.ui-fade-in.fade-in{opacity:1}.top-right-buttons{display:flex;gap:10px;opacity:0;position:fixed;right:20px;top:20px;transition:opacity 1s cubic-bezier(.4,0,.2,1),transform .3s ease;z-index:1000}.metronome-container.ui-loaded .top-right-buttons{opacity:1}.metronome-container.zen-mode .top-right-buttons{opacity:0!important;pointer-events:none!important}.top-buttons-toggle{align-items:center;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#ffffff1a;background:var(--button-bg);border:0 solid #fff3;border:0 solid var(--border-color);border-radius:50%;color:#fff;color:var(--text-primary);cursor:pointer;display:none;font-size:20px;height:48px;justify-content:center;position:relative;transition:all .3s ease;width:48px;z-index:1001}.top-buttons-toggle:hover{background:#fff3;background:var(--button-hover-bg);transform:scale(1.05)}.toggle-icon{align-items:center;display:flex;justify-content:center;line-height:1;transition:transform .3s ease}.toggle-icon.expanded{transform:rotate(90deg)}.top-buttons-wrapper{align-items:center;display:flex;gap:10px;transition:all .3s ease}@media (max-width:1024px){.top-right-buttons{align-items:flex-end;flex-direction:column}.top-buttons-toggle{display:flex!important}.top-buttons-wrapper{align-items:flex-end;flex-direction:column;gap:8px;max-height:0;opacity:0;overflow:hidden;pointer-events:none;transition:max-height .3s ease,opacity .3s ease}.top-buttons-wrapper.expanded{max-height:500px;opacity:1;pointer-events:auto}}@media (max-width:768px){.top-buttons-toggle{font-size:16px;height:40px;width:40px}.top-right-buttons.scroll-hidden{opacity:0!important;pointer-events:none!important;transform:translateY(-100px)!important}}.color-mode-toggle-btn,.donation-button,.info-button,.keyboard-shortcuts-btn,.reset-button{flex-shrink:0;font-size:20px;height:48px;width:48px}@media (max-width:768px){.color-mode-toggle-btn,.donation-button,.info-button,.keyboard-shortcuts-btn,.reset-button{flex-shrink:0;font-size:16px;height:40px;width:40px}.keyboard-shortcuts-btn{display:none}}@media (max-width:480px){.top-right-buttons{right:15px;top:15px}.top-buttons-toggle{font-size:14px!important;height:36px!important;width:36px!important}.color-mode-toggle-btn,.donation-button,.info-button,.reset-button{font-size:14px;height:36px;width:36px}}.bpm-dial{-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);border-radius:50%;height:280px;position:relative;width:280px}.bpm-dial,.bpm-dial-container{align-items:center;display:flex;justify-content:center}.bpm-dial-container{gap:20px;max-width:100%;width:416px}.bpm-dial-text{align-items:center;color:#fff;color:var(--text-primary);display:flex;flex-direction:column;font-size:48px;font-weight:600;height:100%;justify-content:center;position:relative;text-align:center}.bpm-dial-label,.bpm-dial-text{-webkit-user-select:none;user-select:none}.bpm-dial-label{color:#fffc;color:var(--text-secondary);font-size:18px;left:50%;position:absolute;top:60%;transform:translateX(-50%)}.bpm-number,.time-signature .time-signature-text span{transition:opacity .2s ease}.bpm-input{font-family:inherit}.bpm-input::selection{background:#fff3;background:var(--button-hover-bg)}.time-signature-input{font-family:inherit}.time-signature-input::selection{background:#fff3;background:var(--button-hover-bg)}.time-signature-container{max-width:100%;width:308px}.time-signature .time-signature-dial{height:180px;width:180px}.time-signature .time-signature-text{font-size:36px}.time-signature .time-signature-label{font-size:12px}.time-signature .time-signature-input{font-size:36px;width:60px}.subdivisions .subdivision-dial{height:120px;width:120px}.subdivisions .subdivision-text{font-size:30px}.subdivisions .subdivision-label{font-size:12px}.subdivisions .control-button,.time-signature .control-button{font-size:18px;height:40px;width:40px}@media (max-width:768px){.bpm-dial{height:140px;width:140px}.bpm-dial-text{align-items:center;display:flex;flex-direction:column;font-size:24px;height:100%;justify-content:center}.bpm-dial-label{font-size:14px;top:60%}.bpm-number{font-size:24px}.bpm-input{font-size:24px!important;width:90px!important}.bpm-dial-container{gap:20px;width:260px}.time-signature-container{width:316px}.time-signature .time-signature-dial{height:128px!important;width:128px!important}.time-signature .time-signature-text{font-size:24px!important;line-height:.8!important}.time-signature .time-signature-text[style*="top: 35%"]{top:38%!important}.time-signature .time-signature-text[style*="top: 60%"]{top:62%!important}.time-signature .time-signature-label{font-size:10px!important}.time-signature .time-signature-input{font-size:24px!important;width:45px!important}.subdivisions .subdivision-dial{height:90px!important;width:90px!important}.subdivisions .subdivision-text{font-size:18px!important}.subdivisions .subdivision-label{font-size:9px!important}.bpm-dial button[style*="height: 48px"],.bpm-dial button[style*="width: 48px"],.bpm-dial-container button,.subdivisions .control-button,.time-signature .control-button,.time-signature button[style*="height: 44px"],.time-signature button[style*="width: 44px"]{font-size:14px!important;height:40px!important;width:40px!important}}@media (max-width:480px){.bpm-dial{height:170px;width:170px}.bpm-dial-text{align-items:center;display:flex;flex-direction:column;font-size:20px;height:100%;justify-content:center}.bpm-dial-label{font-size:12px;top:60%}.bpm-number{font-size:20px}.bpm-input{font-size:20px!important;width:75px!important}.bpm-dial-container{gap:15px;width:226px}.time-signature-container{width:286px}.time-signature .time-signature-dial{height:120px!important;width:120px!important}.time-signature .time-signature-text{font-size:20px!important;line-height:.7!important}.time-signature .time-signature-text[style*="top: 35%"]{top:38%!important}.time-signature .time-signature-text[style*="top: 60%"]{top:60%!important}.time-signature .time-signature-label{font-size:9px!important}.time-signature .time-signature-input{font-size:20px!important;width:38px!important}.subdivisions .subdivision-dial{height:80px!important;width:80px!important}.subdivisions .subdivision-text{font-size:16px!important}.subdivisions .subdivision-label{font-size:8px!important}.bpm-dial button[style*="height: 48px"],.bpm-dial button[style*="width: 48px"],.bpm-dial-container button,.subdivisions .control-button,.time-signature .control-button,.time-signature button[style*="height: 44px"],.time-signature button[style*="width: 44px"]{font-size:13px!important;height:38px!important;width:38px!important}}@media (max-width:769px){.keyboard-shortcuts-btn{display:none!important}}@media (max-width:360px){.bpm-dial{height:100px;width:100px}.polytrome-logo img{width:120px}.polytrome-logo{top:12px}.bpm-dial-text{align-items:center;display:flex;flex-direction:column;font-size:18px;height:100%;justify-content:center}.bpm-dial-label{font-size:11px;top:60%}.bpm-dial-container{gap:13px;width:194px}.time-signature-container{gap:14px;width:256px}.time-signature .time-signature-dial{height:92px!important;width:92px!important}.time-signature .time-signature-text{font-size:18px!important;line-height:.6!important}.time-signature .time-signature-text[style*="top: 35%"]{top:42%!important}.time-signature .time-signature-text[style*="top: 60%"]{top:68%!important}.time-signature .time-signature-label{font-size:8px!important}.time-signature .time-signature-input{font-size:18px!important;width:35px!important}.subdivisions .subdivision-dial{height:70px!important;width:70px!important}.subdivisions .subdivision-text{font-size:14px!important}.subdivisions .subdivision-label{font-size:7px!important}.bpm-dial button[style*="height: 48px"],.bpm-dial button[style*="width: 48px"],.bpm-dial-container button,.subdivisions .control-button,.time-signature .control-button{font-size:12px!important;height:36px!important;width:36px!important}.audio-settings-container,.bpm-slider-container{max-width:240px!important}.beats-loading-container{display:flex;justify-content:center;width:100%}.audio-expand-button{flex-shrink:0!important;height:28px!important;padding:0!important;width:28px!important}}@media (max-width:768px){:focus{-webkit-tap-highlight-color:transparent!important;outline:none!important}.metronome-container{justify-content:flex-start;min-height:100vh;overflow-y:auto;padding:10vh 15px 15px}.beats-loading-container{left:auto;margin-top:30px;position:relative}.beats-loading-container,.metronome-container.ui-loaded .beats-loading-container{margin-bottom:20px;top:auto;transform:none}.ui-container{left:auto;margin-top:20px;max-width:100%;position:relative;top:auto;transform:none;width:100%}.ui-container.ui-visible{opacity:1;top:auto}}@media (max-width:480px){.bpm-dial{height:120px;width:120px}.polytrome-logo img{width:140px}.polytrome-logo{top:22px}.metronome-container{padding:8vh 10px 10px}.beats-loading-container{margin-bottom:0;margin-top:50px}.ui-container{gap:15px;margin-top:0}.metronome-container{gap:0!important}.bar-sphere-container.visible{margin-bottom:15px}.custom-song-structure-row{gap:30px}.audio-settings-expanded.visible{max-height:180px}.bpm-slider-container.visible{max-height:90px}}@media (max-height:600px){.metronome-container{min-height:100vh;padding-bottom:40px}.ui-container{margin-bottom:20px}}.bar-sphere-container{margin-bottom:0;max-height:0;opacity:0;overflow:visible;pointer-events:none;transition:all .7s cubic-bezier(.4,0,.2,1)}.bar-sphere-container.visible{margin-bottom:20px;max-height:200px;opacity:1;pointer-events:auto}.bar-sphere{opacity:0;transform:scale(.8);transition:all .3s cubic-bezier(.4,0,.2,1)}.bar-sphere-container.visible .bar-sphere{opacity:1;transform:scale(1)}@media (max-width:768px){.bar-sphere-container.visible{margin-bottom:15px;max-height:180px}.bar-sphere{height:140px!important;width:140px!important}.bar-sphere-numbers,.bar-sphere-numbers span,.bar-sphere-text{font-size:24px!important}.bar-sphere-text>div[style*="font-size: 12"]{font-size:11px!important}.bar-sphere-container button{height:40px!important;width:40px!important}.bar-sphere-reset-wrapper button{height:32px!important;width:32px!important}.bar-sphere-reset-wrapper{top:10%!important}.bar-sphere-input{font-size:24px!important;width:32px!important}.bar-sphere-container>div{gap:20px!important}.bar-sphere-container button svg{height:12px!important;width:12px!important}.bar-sphere-reset-wrapper svg{height:18px!important;width:18px!important}}@media (max-width:480px){.bar-sphere-container.visible{margin-bottom:10px;max-height:160px}.bar-sphere{height:120px!important;width:120px!important}.bar-sphere-numbers,.bar-sphere-numbers span,.bar-sphere-text{font-size:20px!important}.bar-sphere-text>div[style*="font-size: 12"]{font-size:10px!important}.bar-sphere-container button{height:38px!important;width:38px!important}.bar-sphere-reset-wrapper button{height:30px!important;width:30px!important}.bar-sphere-reset-wrapper{top:5%!important}.bar-sphere-input{font-size:20px!important;width:28px!important}.bar-sphere-container>div{gap:15px!important}.bar-sphere-container button svg{height:11px!important;width:11px!important}.bar-sphere-reset-wrapper svg{height:16px!important;width:16px!important}}@media (max-width:360px){.bar-sphere-container.visible{margin-bottom:8px;max-height:140px}.bar-sphere{height:100px!important;width:100px!important}.bar-sphere-numbers,.bar-sphere-numbers span,.bar-sphere-text{font-size:18px!important}.bar-sphere-text>div[style*="font-size: 12"]{font-size:9px!important}.bar-sphere-container button{height:36px!important;width:36px!important}.bar-sphere-reset-wrapper button{height:28px!important;width:28px!important}.bar-sphere-reset-wrapper{top:7%!important}.bar-sphere-input{font-size:18px!important;width:24px!important}.bar-sphere-container>div{gap:13px!important}.bar-sphere-container button svg{height:10px!important;width:10px!important}.bar-sphere-reset-wrapper svg{height:15px!important;width:15px!important}}.subdivisions-sphere-container{margin-bottom:0;max-height:0;opacity:0;overflow:visible;pointer-events:none;position:relative;transition:all .7s cubic-bezier(.4,0,.2,1);z-index:1}.subdivisions-sphere-container.visible{margin-bottom:20px;max-height:200px;opacity:1;pointer-events:auto}.subdivisions-sphere{opacity:0;transform:scale(.8);transition:all .3s cubic-bezier(.4,0,.2,1)}.subdivisions-sphere-container.visible .subdivisions-sphere{opacity:1;transform:scale(1)}@media (max-width:768px){.subdivisions-sphere-container.visible{margin-bottom:15px;max-height:180px}.subdivisions-sphere{height:140px!important;width:140px!important}.subdivisions-sphere-text,.subdivisions-sphere-text>div[style*="font-size: 30"]{font-size:24px!important}.subdivisions-sphere-text>div[style*="font-size: 12"]{font-size:11px!important}.subdivisions-sphere-container button{height:40px!important;width:40px!important}.subdivisions-sphere-container button svg{height:12px!important;width:12px!important}}@media (max-width:480px){.subdivisions-sphere-container.visible{margin-bottom:10px;max-height:160px}.subdivisions-sphere{height:120px!important;width:120px!important}.subdivisions-sphere-text,.subdivisions-sphere-text>div[style*="font-size: 30"]{font-size:20px!important}.subdivisions-sphere-text>div[style*="font-size: 12"]{font-size:10px!important}.subdivisions-sphere-container button{height:38px!important;width:38px!important}.subdivisions-sphere-container>div{gap:15px!important}.subdivisions-sphere-container button svg{height:11px!important;width:11px!important}}@media (max-width:360px){.subdivisions-sphere-container.visible{margin-bottom:8px;max-height:140px}.subdivisions-sphere{height:100px!important;width:100px!important}.subdivisions-sphere-text,.subdivisions-sphere-text>div[style*="font-size: 30"]{font-size:18px!important}.subdivisions-sphere-text>div[style*="font-size: 12"]{font-size:9px!important}.subdivisions-sphere-container button{height:36px!important;width:36px!important}.subdivisions-sphere-container>div{gap:13px!important}.subdivisions-sphere-container button svg{height:10px!important;width:10px!important}}.custom-song-structure-toggle-container{display:inline-flex;max-width:300px;opacity:1;overflow:visible;transition:all .5s cubic-bezier(.4,0,.2,1)}.custom-song-structure-toggle-container.fade-out{display:none;margin:0;max-width:0;opacity:0;overflow:hidden;padding:0;pointer-events:none;width:0}.subdivisions-toggle-container{display:inline-flex;max-width:300px;opacity:1;overflow:visible;transition:all .5s cubic-bezier(.4,0,.2,1)}.subdivisions-toggle-container.fade-out{display:none;margin:0;max-width:0;opacity:0;overflow:hidden;padding:0;pointer-events:none;width:0}.progressive-tempo-toggle-container{display:inline-flex;max-width:300px;opacity:1;overflow:visible;transition:all .5s cubic-bezier(.4,0,.2,1)}.progressive-tempo-toggle-container.fade-out{display:none;margin:0;max-width:0;opacity:0;overflow:hidden;padding:0;pointer-events:none;width:0}.edit-button-container{display:none}.edit-button-container.visible{display:inline-flex;overflow:visible}.loop-toggle-container{display:none}.loop-toggle-container.visible{display:inline-flex;overflow:visible}.countin-toggle-container{display:none}.countin-toggle-container.visible{display:inline-flex;overflow:visible}.progressive-tempo-reset-toggle-container{display:none}.progressive-tempo-reset-toggle-container.visible{display:inline-flex;overflow:visible}.countin-toggle-container .toggle-switch span,.loop-toggle-container .toggle-switch span{white-space:nowrap}.custom-song-structure-row{align-items:center;display:flex;gap:30px;justify-content:center}.control-buttons-container,.custom-song-structure-row{animation:customSongRowFadeIn .3s cubic-bezier(.4,0,.2,1)}@media (max-width:1024px){.control-buttons-container{-webkit-backdrop-filter:blur(20px)!important;backdrop-filter:blur(20px)!important;background:#111c28f2!important;border-top:1px solid #ffffff1a!important;bottom:0!important;box-shadow:0 -4px 20px #0003!important;justify-content:center!important;left:0!important;margin:0!important;padding:15px 20px!important;position:fixed!important;right:0!important;z-index:100!important}[data-theme=light] .control-buttons-container{background:#f5f5f5f2!important}.control-buttons-container button{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;font-size:14px!important;min-width:75px!important;padding:12px 20px!important;width:auto!important}.control-buttons-container>button:first-child[style*="5, 150, 105"]{background:#059669!important}.control-buttons-container>button:first-child[style*="5, 150, 105"]:hover{background:#059669d9!important}.control-buttons-container>button:first-child[style*="220, 38, 38"]{background:#dc2626!important}.control-buttons-container>button:first-child[style*="220, 38, 38"]:hover{background:#dc2626d9!important}.control-buttons-container>button:nth-child(2)[style*="220, 38, 38"]{background:#dc2626!important}.control-buttons-container>button:nth-child(2)[style*="220, 38, 38"]:hover{background:#dc2626d9!important}.control-buttons-container>button:nth-child(2):not([style*="220, 38, 38"]){background:#112435!important;background:var(--bg-secondary)!important}.control-buttons-container>button:nth-child(2):not([style*="220, 38, 38"]):hover{background:#fff3!important;background:var(--button-hover-bg)!important}.control-buttons-container .tap-button-wrapper button{background:#112435!important;background:var(--bg-secondary)!important}.control-buttons-container .tap-button-wrapper button.tap-button-active,.control-buttons-container .tap-button-wrapper button:hover,.control-buttons-container .tap-button-wrapper button[style*=button-hover-bg]{background:#fff3!important;background:var(--button-hover-bg)!important}.ui-container{padding-bottom:120px!important}}@media (max-width:480px){.control-buttons-container{gap:15px!important;padding:10px 15px!important}.control-buttons-container button{font-size:13px!important;min-width:85px!important;padding:10px 16px!important}.ui-container{padding-bottom:100px!important}}.audio-settings-expanded{margin:0;max-height:0;opacity:0;overflow:visible;padding:0;pointer-events:none;position:relative;transition:max-height .5s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1),padding .4s cubic-bezier(.4,0,.2,1);z-index:10}.audio-settings-expanded.visible{margin:0;max-height:200px;opacity:1;padding:10px 0 0;pointer-events:auto}.audio-expand-button{transform-style:preserve-3d;will-change:transform}.bpm-slider-container{margin:0;max-height:0;opacity:0;overflow:visible;padding:0;pointer-events:none;position:relative;transition:max-height .5s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1),margin .5s cubic-bezier(.4,0,.2,1),padding .5s cubic-bezier(.4,0,.2,1);z-index:10}.audio-settings-container{overflow:visible!important}.bpm-slider-container.visible{max-height:100px;opacity:1;padding-bottom:10px;padding-top:20px;pointer-events:auto}.bpm-button-wrapper{margin:0;max-width:0;opacity:0;overflow:visible;pointer-events:none;transition:max-width .4s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1),margin .4s cubic-bezier(.4,0,.2,1)}.bpm-button-wrapper.visible{max-width:60px;opacity:1;pointer-events:auto}.time-signature-buttons{margin:0;max-width:0;opacity:0;overflow:visible;pointer-events:none;transition:max-width .4s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1),margin .4s cubic-bezier(.4,0,.2,1)}.time-signature-buttons.visible{max-width:60px;opacity:1;pointer-events:auto}.tap-button-wrapper{display:none}.tap-button-wrapper.visible{display:block}@media (max-width:1024px){.toast-container{align-items:center!important;bottom:70px!important;left:16px!important;right:16px!important}}@media (max-width:768px){.toast-container{bottom:70px!important}.toast{max-width:calc(100vw - 32px)!important;min-width:300px!important;padding:15px!important}}@media (max-width:480px){.toast-container{bottom:70px!important}.toast{font-size:14px!important;max-width:calc(100vw - 32px)!important;min-width:280px!important;padding:14px!important}}@media (max-width:768px){.metronome-container .ui-container>div:nth-last-child(2) button{min-height:44px;min-width:44px}.ui-container>div{margin-bottom:0}.metronome-container input[type=range]::-webkit-slider-thumb{height:22px;width:22px}.metronome-container input[type=range]::-moz-range-thumb{height:22px;width:22px}.metronome-container button,.metronome-container input,.metronome-container label{cursor:pointer}.metronome-container a,.metronome-container button,.metronome-container input,.metronome-container select{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}.metronome-container a:focus,.metronome-container button:focus,.metronome-container circle:focus,.metronome-container input:focus,.metronome-container select:focus,.metronome-container svg circle:focus,.metronome-container svg:focus{-webkit-tap-highlight-color:transparent!important;outline:none!important}.audio-settings-container,.bpm-slider-container{max-width:300px!important}.beats-loading-container svg{transform:scale(.75)}.audio-expand-button{flex-shrink:0!important;height:28px!important;padding:0!important;width:28px!important}}@media (max-width:480px){.metronome-container{padding:3vh 8px 8px}.metronome-container>div,.ui-container{gap:12px}.audio-settings-container,.bpm-slider-container{max-width:340px!important}.beats-loading-container{display:flex;justify-content:center;width:100%}.audio-expand-button{flex-shrink:0!important;height:28px!important;padding:0!important;width:28px!important}}@media (max-width:768px) and (orientation:landscape){.metronome-container{padding:5vh 10px 10px}.beats-loading-container{margin-bottom:10px}.ui-container{gap:10px;margin-top:10px}.bar-sphere-container.visible{margin-bottom:10px}.custom-song-structure-row{gap:20px}.audio-settings-expanded.visible{max-height:160px}.bpm-slider-container.visible{max-height:80px}.metronome-container>div{margin-bottom:10px}}@media (hover:none) and (pointer:coarse){.metronome-container button:hover{transform:none!important}.metronome-container input[type=range]{-webkit-tap-highlight-color:transparent}.metronome-container a,.metronome-container button,.metronome-container input,.metronome-container select{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}.metronome-container a:focus,.metronome-container button:focus,.metronome-container circle:focus,.metronome-container input:focus,.metronome-container select:focus,.metronome-container svg:focus,.song-structure-editor button:focus,.song-structure-editor input:focus,.song-structure-editor select:focus,.song-structure-overlay button:focus,.song-structure-overlay input:focus,.song-structure-overlay select:focus{-webkit-tap-highlight-color:transparent!important;outline:none!important}}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.metronome-container{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}@media (max-height:500px){.metronome-container{min-height:500px;padding-bottom:20px}.beats-loading-container{margin-bottom:10px}.ui-container{gap:8px;margin-top:10px}.metronome-container>div{margin-bottom:8px}.bpm-dial{transform:scale(.8)}}.metronome-container{-webkit-overflow-scrolling:touch}.about-page{background:#111c28;background:var(--bg-primary);box-sizing:border-box;color:#fff;color:var(--text-primary);display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;min-height:100vh;padding:20px 0 0}.about-container{flex:1 1;margin:0 auto;max-width:1200px;padding:20px}.back-button-container{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin:40px 0;text-align:center}.back-button{align-items:center;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#ffffff1a;background:var(--button-bg);border:none;border-radius:12px;box-shadow:0 2px 8px #0000000d;color:#fffc;color:var(--text-secondary);display:inline-flex;font-size:16px;font-weight:500;gap:8px;overflow:hidden;padding:16px 24px;position:relative;text-decoration:none;transition:background .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease}.back-button:hover{background:#fff3;background:var(--button-hover-bg);box-shadow:0 4px 12px #00000026;color:#fff;color:var(--button-hover-color);transform:translateY(-2px)}.back-button:active{transform:translateY(-2px) scale(.95)}.kofi-button{background:#fff!important;color:#111c28!important}.kofi-button:active,.kofi-button:hover{transition:background .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease!important}.kofi-button:hover{background:#f0f0f0!important;box-shadow:0 4px 16px #ffffff4d!important;color:#111c28!important}.kofi-button:active{transform:translateY(-2px) scale(.95)!important}[data-theme=light] .kofi-button{background:#111c28!important;color:#fff!important}[data-theme=light] .kofi-button:hover{background:#1a2a3a!important;box-shadow:0 4px 16px #0000004d!important;color:#fff!important}.kofi-logo{height:20px;object-fit:contain;width:20px}.button-ripple{animation:buttonRippleExpand .6s ease-out forwards;border-radius:50%;pointer-events:none;position:absolute;transform:translate(-50%,-50%);z-index:1}.back-button:not(.kofi-button) .button-ripple{background:#fff3;background:var(--button-hover-bg)}.kofi-button .button-ripple{background:#00000026}[data-theme=light] .kofi-button .button-ripple{background:#fff3}.whats-new-button{cursor:pointer!important;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif!important;font-size:16px!important;font-weight:500!important}.toggle-switch button:focus{box-shadow:none!important;outline:none!important}.toggle-switch button:focus-visible{box-shadow:none!important;outline:none!important}.control-buttons-container button:focus{box-shadow:none!important;outline:none!important}.control-buttons-container button:focus-visible{box-shadow:none!important;outline:none!important}button[style*=backdrop-filter]:focus,button[style*=backdropFilter]:focus{box-shadow:none!important;outline:none!important}button[style*=backdrop-filter]:focus-visible,button[style*=backdropFilter]:focus-visible{box-shadow:none!important;outline:none!important}.control-button:focus{box-shadow:none!important;outline:none!important}.control-button:focus-visible{box-shadow:none!important;outline:none!important}@keyframes buttonRippleExpand{0%{height:0;opacity:.8;width:0}to{height:300px;opacity:0;width:300px}}.about-content h1{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#fff,#fffc);background:linear-gradient(135deg,var(--text-primary),var(--text-secondary));-webkit-background-clip:text;background-clip:text;font-size:2.5rem;margin-bottom:2rem;text-align:center}.about-logo{display:block;height:48px;margin:0 auto 2rem}.fade-in-up{opacity:0;transform:translateY(16px);transition:opacity 1s cubic-bezier(.4,0,.2,1),transform 1s cubic-bezier(.4,0,.2,1)}.fade-in-up.visible{opacity:1;transform:translateY(0)}.about-section{background:#0000;border:none;border-radius:0;margin-bottom:.5rem;padding-top:1rem}.about-section h2{color:#fff;color:var(--text-primary);font-size:1.5rem;margin-bottom:1rem;padding-bottom:0}.about-section ol,.about-section ul{line-height:1.7}.about-section li{margin-bottom:.5rem}.about-section kbd{background:#ffffff1a;background:var(--button-bg);border:none;border-radius:4px;box-shadow:0 1px 2px #0000001a;color:#fff;color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:.9em;padding:2px 6px}.about-footer{margin-bottom:20px;margin-top:auto;padding:20px 0;text-align:center}.about-footer p{color:#fffc;color:var(--text-secondary);font-size:14px;font-weight:700;margin:0}@keyframes about-heart-beat{0%{transform:scale(1)}20%{transform:scale(1.15)}40%{transform:scale(1)}60%{transform:scale(1.08)}to{transform:scale(1)}}@keyframes customSongRowFadeIn{0%{opacity:0}to{opacity:1}}.about-heart{animation:about-heart-beat 1s ease-in-out infinite;display:inline-block}@media (max-width:1024px){.keyboard-shortcut-text{display:none}kbd{display:none!important}[style*="display: flex"] kbd+span{margin-left:0}}@media (max-width:768px){.about-page{padding:10px}.about-content h1{font-size:2rem}.about-section{padding:1rem}}@media (max-width:770px){.prompt-modal-card{margin:0 16px!important;width:calc(100vw - 32px)!important}}body.modal-open{height:100%!important;left:0!important;overflow:hidden!important;position:fixed!important;right:0!important;top:0!important;width:100%!important}
/*# sourceMappingURL=main.ff4af06d.css.map*/