:root{--primary-teal:#00a0a0;--primary-teal-dark:#008585;--primary-teal-light:#b3e0e0;--primary-teal-ultra-light:#e6f5f5;--secondary-gold:#f8d38d;--secondary-gold-dark:#eabf70;--secondary-gold-light:#fae0ad;--secondary-gold-ultra-light:#fff8e6;--neutral-bg:#f5f5f5;--neutral-bg-alt:#f9f9f9;--neutral-border:#e0e0e0;--neutral-border-light:#eee;--text-primary:#333;--text-secondary:#666;--text-tertiary:#999;--text-light:#fff;--beat-muted:#e8e8e8;--beat-normal:var(--secondary-gold-light);--beat-accent:var(--secondary-gold);--beat-first:var(--primary-teal);--beat-inner:#fae0ad;--beat-outer:#f8d38d;--success:#00a0a0;--warning:#f8d38d;--error:#e67b73;--info:#73b5e6;--highlight:#00b3b3;--overlay-bg:#000000b3;--modal-shadow:0 4px 20px #0003;--training-tip-bg:var(--secondary-gold-ultra-light);--training-overview-bg:var(--primary-teal-ultra-light);--shadow-sm:0 1px 2px #0000000d;--shadow-md:0 4px 6px #0000001a;--shadow-lg:0 10px 15px #0000001a;--transition-fast:150ms ease;--transition-normal:300ms ease;--transition-slow:500ms ease;--border-radius-sm:4px;--border-radius-md:8px;--border-radius-lg:12px;--border-width:1px;--border-width-thick:2px}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-tertiary{color:var(--text-tertiary)}.text-light{color:var(--text-light)}.text-teal{color:var(--primary-teal)}.text-teal-dark{color:var(--primary-teal-dark)}.text-gold{color:var(--secondary-gold)}.bg-teal{background-color:var(--primary-teal)}.bg-teal-dark{background-color:var(--primary-teal-dark)}.bg-teal-light{background-color:var(--primary-teal-light)}.bg-teal-ultra-light{background-color:var(--primary-teal-ultra-light)}.bg-gold{background-color:var(--secondary-gold)}.bg-gold-dark{background-color:var(--secondary-gold-dark)}.bg-gold-light{background-color:var(--secondary-gold-light)}.bg-gold-ultra-light{background-color:var(--secondary-gold-ultra-light)}.bg-neutral{background-color:var(--neutral-bg)}.bg-neutral-alt{background-color:var(--neutral-bg-alt)}.border-neutral{border-color:var(--neutral-border)}.border-neutral-light{border-color:var(--neutral-border-light)}.border-teal{border-color:var(--primary-teal)}.border-gold{border-color:var(--secondary-gold)}.beat-muted{background-color:var(--beat-muted)}.beat-normal{background-color:var(--beat-normal)}.beat-accent{background-color:var(--beat-accent)}.beat-first{background-color:var(--beat-first)}.beat-inner{background-color:var(--beat-inner)}.beat-outer{background-color:var(--beat-outer)}.text-success{color:var(--success)}.text-warning{color:var(--warning)}.text-error{color:var(--error)}.text-info{color:var(--info)}.bg-success{background-color:var(--success)}.bg-warning{background-color:var(--warning)}.bg-error{background-color:var(--error)}.bg-info{background-color:var(--info)}.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}.rounded-sm{border-radius:var(--border-radius-sm)}.rounded-md{border-radius:var(--border-radius-md)}.rounded-lg{border-radius:var(--border-radius-lg)}.transition-fast{transition:all var(--transition-fast)}.transition-normal{transition:all var(--transition-normal)}.transition-slow{transition:all var(--transition-slow)}.card{background-color:var(--neutral-bg-alt);border-radius:var(--border-radius-md);box-shadow:var(--shadow-sm)}.card-hover{transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.card-hover:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.btn-base{border:none;border-radius:var(--border-radius-md);cursor:pointer;padding:8px 16px;transition:all var(--transition-fast)}.btn-primary{background-color:var(--primary-teal);color:var(--text-light)}.btn-primary:hover{background-color:var(--primary-teal-dark)}.btn-secondary{background-color:var(--secondary-gold);color:var(--text-primary)}.btn-secondary:hover{background-color:var(--secondary-gold-dark)}.btn-outline{background-color:initial;border:var(--border-width) solid var(--primary-teal);color:var(--primary-teal)}.btn-outline:hover{background-color:var(--primary-teal-ultra-light)}@font-face{font-family:Lato;font-style:normal;font-weight:400;src:url(/static/media/Lato-Regular.9d883d540ee2b4de8024.ttf) format("truetype")}@font-face{font-family:Lato;font-style:normal;font-weight:700;src:url(/static/media/Lato-Bold.636be8de934918e38ed9.ttf) format("truetype")}@font-face{font-family:Lato-Bold;font-style:normal;font-weight:400;src:url(/static/media/Lato-Bold.636be8de934918e38ed9.ttf) format("truetype")}@font-face{font-family:Lato;font-style:normal;font-weight:100;src:url(/static/media/Lato-Thin.5a60dde25d817751d590.ttf) format("truetype")}body{background-color:var(--neutral-bg);color:var(--text-primary);font-family:Lato,sans-serif;margin:0;padding:0}#root{align-items:center;display:flex;flex-direction:column;min-height:100vh}a{color:var(--primary-teal);text-decoration:none}.app-container{background-color:var(--neutral-bg);box-sizing:border-box;color:var(--text-primary);font-family:Lato,sans-serif;max-width:100vw;min-height:100vh;overflow-x:hidden;padding:20px;text-align:center}.metronome-container{height:calc(100vw - 40px);max-height:300px;max-width:300px;width:calc(100vw - 40px)}@media (min-width:600px) and (max-width:1024px){.metronome-container{max-height:400px;max-width:400px}}.metronome-circle{display:block;height:100%;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:100%}.beat-icon,.metronome-circle{object-fit:contain}.subdivision-button{transition:filter .15s ease}.subdivision-button.active{filter:none}.sliders-container{align-items:center;display:flex;flex-direction:column;gap:20px;margin-top:10px}.slider-item{text-align:center}input[type=range]{accent-color:var(--primary-teal);display:block;margin:0 auto}.tempo-slider{display:block}.tempo-buttons{display:none}.tap-tempo-button{background:var(--primary-teal);border-radius:5px;color:var(--text-light);font-size:18px;padding:12px 20px}.info-button{background:#0000;border:none;cursor:pointer;left:10px;padding:0;position:fixed;text-decoration:none;top:10px;z-index:100}.info-button img{height:30px;object-fit:contain;width:30px}@media (max-width:600px){.info-button{display:none}.tempo-slider{display:block}.tempo-buttons{align-items:center;display:flex;gap:10px;justify-content:center}.slider-item input[type=range]{height:40px;width:100%}}@media (min-width:601px) and (max-width:1024px){.info-button,.tempo-slider{display:block}.tempo-buttons{align-items:center;display:flex;gap:15px;justify-content:center}.slider-item input[type=range]{height:30px;width:100%}}@media (min-width:601px) and (max-width:1024px) and (orientation:landscape){.info-button{font-size:1.1em}.browser-only-elements,.info-button{display:block}}button{font-family:Lato,sans-serif}@media (min-width:600px) and (max-width:1024px){.slider-item input[type=range]{width:100%}}.info-overlay{align-items:center;background:#00000080;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:1000}.info-modal{background:var(--text-light);border-radius:8px;max-width:400px;padding:20px;text-align:left}.info-modal h2{margin-top:0}.info-modal ul{list-style:none;padding-left:0}.info-modal li{margin-bottom:8px}.info-close-button{background:#0000;border:none;color:var(--primary-teal);cursor:pointer;font-size:1.2rem;font-weight:700;position:absolute;right:10px;top:10px}.play-pause-button-overlay,button[aria-label="Toggle play/pause"]{background:#0000!important;border:none!important;box-shadow:none!important;outline:none!important}button[aria-label="Tap Tempo"]{background:#0000!important;border:none!important;outline:none!important;transition:transform .2s ease}button[aria-label="Tap Tempo"]:active{transform:scale(.95)}@media (max-width:600px){.subdivision-button{height:32px!important;margin:0 2px!important;width:32px!important}.app-container{padding:15px 10px}.app-container>div>button{font-size:14px!important;padding:8px 12px!important}.control-container{display:flex;flex-wrap:wrap;justify-content:center}}.mode-selector{flex-wrap:wrap;gap:10px;margin-bottom:20px}.mode-button{background-color:var(--beat-muted);border:none;border-radius:8px;box-shadow:0 1px 3px #0000001a;color:#666;cursor:pointer;font-family:Lato,sans-serif;font-size:15px;padding:10px 16px;transition:all .2s ease}.mode-button:hover{background-color:var(--secondary-gold);box-shadow:0 3px 6px #0000001a;color:var(--text-light);transform:translateY(-1px)}.mode-button-active{background-color:var(--primary-teal);box-shadow:0 2px 4px #00a0a04d;color:#fff}.mode-button-active:hover{background-color:#008e8e;color:#fff}@media (max-width:600px){.mode-selector{gap:6px}.mode-button{flex-basis:calc(50% - 6px);flex-grow:1;flex-shrink:0;font-size:14px;max-width:calc(50% - 6px);padding:8px 12px;text-align:center}}.play-pause-button{padding:0;position:relative;transform:none!important;z-index:10}.play-pause-icon{filter:drop-shadow(0 1px 2px rgba(0,0,0,.1));height:36px;transition:all .2s ease;width:36px}.play-pause-button:hover .play-pause-icon{filter:drop-shadow(0 2px 4px rgba(0,160,160,.3));transform:scale(1.15)}.play-pause-button:active .play-pause-icon{transform:scale(1.05)}.metronome-container .play-pause-button{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)!important}.metronome-container .play-pause-button[data-mode=analog]{left:50%;position:absolute;top:85%;transform:translate(-50%,-50%)!important}.style-guide-container{background-color:var(--neutral-bg);margin:0 auto;max-width:1200px;padding:20px}.style-guide-header-controls{display:flex;justify-content:flex-start;margin-bottom:30px}.style-guide-header-controls button{background-color:var(--primary-teal);border:none;border-radius:8px;color:#fff;cursor:pointer;font-family:Lato,sans-serif;padding:10px 20px;transition:background-color .15s ease}.style-guide-header-controls button:hover{background-color:var(--primary-teal-dark)}.header{padding:20px;text-align:center}.header-logo{height:auto;max-width:100%;width:250px}.footer{padding:20px;text-align:center}.separator{border:0;border-top:1px solid var(--primary-teal-light);margin-bottom:20px}.footer-content{align-items:center;display:flex;flex-wrap:wrap;justify-content:space-between}.footer-left{text-align:left}.footer-right{margin-left:auto}.footer-buttons{align-items:center;display:flex;gap:12px}@media (max-width:600px){.footer-content{flex-direction:column;gap:1rem}.footer-left,.footer-right{text-align:center;width:100%}.support-button{font-size:15px;margin:0 auto;padding:10px 20px}}.support-button{align-items:center;background-color:var(--primary-teal);border:none;border-radius:20px;box-shadow:0 2px 8px #0000001a;color:var(--text-light);cursor:pointer;display:flex;font-family:Lato,sans-serif;font-size:15px;font-weight:700;gap:8px;overflow:hidden;padding:10px 18px;position:relative;transition:all .2s ease}.support-button:before{background:linear-gradient(90deg,#fff0,#fff3 50%,#fff0);content:"";height:120%;left:-10%;position:absolute;top:-10%;transform:translateX(-100%) skewX(-15deg);transition:all .6s ease;width:120%}.support-button:hover{background-color:var(--secondary-gold-dark);box-shadow:0 4px 12px #00000026;transform:translateY(-2px)}.support-button:hover:before{transform:translateX(100%) skewX(-15deg)}.support-button:active{box-shadow:0 2px 4px #0000001a;transform:scale(.98) translateY(0)}.support-button:disabled{background-color:var(--neutral-border);box-shadow:none;cursor:not-allowed;opacity:.8;transform:none!important}.support-button:disabled .heart-icon{animation:none;color:var(--text-secondary);text-shadow:none}.support-button.loading{background-color:var(--secondary-gold-light);color:var(--text-secondary);overflow:hidden;position:relative}.support-button.loading:after{animation:loading-shimmer 1.5s infinite;background:linear-gradient(90deg,#0000,#fff6,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;width:100%}.support-button.loading:before{animation:none;content:""}.loading-dots{position:relative}.loading-dots:after{animation:loading-dots 1.5s infinite;content:".";position:absolute}@keyframes loading-dots{0%{content:"."}33%{content:".."}66%{content:"..."}to{content:"."}}.support-button .heart-icon{animation:heartbeat 2s cubic-bezier(.215,.61,.355,1) infinite;color:#f36;display:inline-block;font-size:18px;position:relative;text-shadow:0 1px 2px #0000001a;will-change:transform}@keyframes heartbeat{0%,to{transform:scale(1)}15%{transform:scale(1.3)}30%{transform:scale(1)}}.support-button:hover .heart-icon{animation-duration:1.5s;text-shadow:0 0 8px #f369}.support-page{color:var(--text-primary);font-family:Lato,sans-serif;line-height:1.6;margin:0 auto;max-width:700px;padding:30px 25px}.minimalist-heading{color:var(--primary-teal);font-size:20px;font-weight:400;letter-spacing:.5px;margin-bottom:40px;padding-bottom:8px;position:relative;text-align:center;text-transform:uppercase}.minimalist-heading:after{background-color:var(--secondary-gold-light);bottom:0;content:"";height:1px;left:50%;position:absolute;transform:translateX(-50%);width:30px}.support-message{line-height:1.7;margin-bottom:40px;margin-left:auto;margin-right:auto;max-width:580px;padding:0;position:relative;text-align:center}.support-message p{font-size:16px;margin-bottom:20px;position:relative}.support-message p:last-child{margin-bottom:0}.support-message strong{color:var(--primary-teal);font-weight:500}.support-options{align-items:center;display:flex;flex-direction:column;margin:35px 0;width:100%}.support-button-large{align-items:center;background-color:var(--primary-teal);border:none;border-radius:4px;box-shadow:none;color:var(--text-light);cursor:pointer;display:flex;font-family:Lato,sans-serif;font-size:16px;font-weight:500;gap:10px;letter-spacing:.5px;margin:0 auto;overflow:hidden;padding:14px 30px;position:relative;transition:all .2s ease}.support-button-large:hover{background-color:var(--primary-teal-dark);transform:translateY(-1px)}.support-button-large:active{transform:translateY(0)}.support-button-large .heart-icon{color:var(--text-light);font-size:18px}.support-button-large:disabled{background-color:var(--neutral-border);box-shadow:none;cursor:not-allowed;opacity:.8;transform:none!important}.support-button-large:disabled:before{display:none}.support-button-large:disabled .heart-icon{animation:none;color:var(--text-secondary);text-shadow:none}.support-button-large.loading{background-color:var(--neutral-border-light);color:var(--text-secondary);overflow:hidden;position:relative}.support-button-large.loading:after{animation:loading-shimmer 1.5s infinite;background:linear-gradient(90deg,#0000,#fff3,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;width:100%}@keyframes loading-shimmer{0%{transform:translateX(0)}to{transform:translateX(200%)}}.support-info{margin:50px auto 40px;max-width:580px;padding:0;position:relative}.support-info h2{color:var(--primary-teal);font-size:16px;font-weight:400;letter-spacing:.5px;margin-bottom:20px;text-align:center;text-transform:uppercase}.support-info ul{display:flex;flex-wrap:wrap;gap:15px;justify-content:center;list-style-type:none;margin-top:25px;padding:0}.support-info li{background-color:var(--neutral-bg);border-radius:4px;flex-basis:calc(50% - 10px);flex-grow:0;flex-shrink:0;font-size:14px;padding:8px 15px;position:relative;text-align:center;transition:all .2s ease}.support-info li:hover{color:var(--primary-teal)}.support-features-coming{margin:40px auto;max-width:580px;padding:0;position:relative}.support-features-coming h3{color:var(--primary-teal);font-size:16px;font-weight:400;letter-spacing:.5px;margin:0 0 20px;text-align:center;text-transform:uppercase}.feature-cards{display:flex;flex-wrap:wrap;gap:15px;justify-content:center;margin-top:20px}.feature-card{background-color:var(--neutral-bg);border-radius:4px;border-top:2px solid #0000;flex-basis:calc(33.333% - 10px);flex-grow:0;flex-shrink:0;padding:20px;text-align:center;transition:all .2s ease}.feature-card:hover{border-top-color:var(--primary-teal-light)}.feature-icon{color:var(--primary-teal);display:inline-block;font-size:24px;margin-bottom:10px}.feature-card h4{color:var(--primary-teal);font-size:14px;font-weight:500;margin:8px 0}.feature-card p{color:var(--text-secondary);font-size:13px;line-height:1.4;margin:0}.support-thanks{border-top:1px solid var(--neutral-border-light);color:var(--text-secondary);font-size:14px;font-style:italic;line-height:1.5;margin-left:auto;margin-right:auto;margin-top:50px;max-width:500px;padding:30px 0 0;position:relative;text-align:center}@media (max-width:600px){.support-page{padding:15px 12px}.minimalist-heading{font-size:16px;margin-bottom:25px}.support-button-large{font-size:15px;justify-content:center;padding:12px 20px;width:100%}.support-message p{font-size:15px}.support-info{margin:40px 0 30px}.support-info h2{font-size:14px;margin-bottom:15px}.support-info ul{gap:10px}.support-info li{flex:0 0 100%;font-size:13px;padding:8px 10px}.support-features-coming{margin:30px 0}.support-features-coming h3{font-size:14px;margin-bottom:15px}.feature-cards{gap:10px}.feature-card{flex:0 0 100%;margin-bottom:5px;padding:15px}.feature-icon{font-size:20px}.feature-card h4{font-size:14px;margin:6px 0}.feature-card p{font-size:12px}.support-thanks{font-size:13px;margin-top:40px;padding-top:25px}.menu-content .support-page{padding:0}}.training-active-container{background-color:var(--text-light);border:1px solid var(--neutral-border);border-radius:10px;box-shadow:0 4px 12px #00000014;color:var(--text-primary);font-family:Lato,sans-serif;margin:20px auto;max-width:350px;padding:16px;text-align:left;transition:all .3s ease}.training-active-header{align-items:center;border-bottom:1px solid var(--neutral-border-light);display:flex;margin-bottom:14px;padding-bottom:10px}.training-active-indicator{background-color:var(--primary-teal);border-radius:50%;height:12px;margin-right:10px;width:12px}.training-active-title{color:var(--primary-teal);font-size:16px;font-weight:700;margin:0}.training-active-section{border-bottom:1px solid var(--neutral-border-light);margin-bottom:16px;padding-bottom:16px}.training-active-section:last-of-type{border-bottom:none}.training-active-section-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:10px}.training-active-section-title{color:var(--text-primary);font-size:14px;font-weight:700}.training-active-section-type{background-color:var(--primary-teal-ultra-light);border:1px solid #00a0a033;border-radius:20px;color:var(--primary-teal);font-size:13px;font-weight:500;padding:4px 12px}.training-active-section-type.clickable{cursor:pointer;overflow:hidden;position:relative;transition:all .2s ease}.training-active-section-type.clickable:hover{background-color:var(--primary-teal-light);box-shadow:0 2px 5px #00a0a033;color:#fff;transform:translateY(-1px)}.training-active-section-type.clickable:active{transform:translateY(0)}.training-active-section-type.clickable:after{background:radial-gradient(circle,#ffffff4d 0,#fff0 70%);content:"";height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .2s ease;width:100%}.training-active-section-type.clickable:hover:after{opacity:1}.training-active-status-box{align-items:center;background-color:var(--neutral-bg-alt);border-radius:8px;display:flex;margin-top:10px;padding:12px;transition:all .3s ease}.training-active-status-box.silent{background-color:#ffeaea;border-left:4px solid var(--error)}.training-active-status-box.playing,.training-active-status-box.training{background-color:var(--primary-teal-ultra-light);border-left:4px solid var(--primary-teal)}.training-active-status-box.speed{background-color:var(--secondary-gold-ultra-light);border-left:4px solid var(--secondary-gold)}.counter-text.current-phase{font-weight:700;margin-top:4px}.editable-param{background-color:#00a0a014;border:1px solid #00a0a033;border-radius:6px;color:var(--primary-teal);cursor:pointer;display:inline-block;font-weight:500;margin:2px;padding:3px 8px;position:relative;transition:all .2s ease}.editable-param:active,.editable-param:hover{background-color:#00a0a026;border-color:var(--primary-teal-light);box-shadow:0 1px 3px #00a0a033;color:var(--primary-teal-dark)}.editable-param:after{content:"✏️";font-size:10px;position:absolute;right:-3px;top:-5px;transition:opacity .2s ease}@media (min-width:1025px){.editable-param:after{opacity:0}.editable-param:hover:after{opacity:1}}@media (min-width:769px) and (max-width:1024px){.editable-param{margin:2px;padding:3px 8px}.editable-param:after{font-size:12px;opacity:.6;right:-4px;top:-6px}.editable-param:hover:after{opacity:1}.parameter-edit-buttons{display:flex}.parameter-edit-hint{display:block}}@media (max-width:768px){.editable-param{display:block;margin:3px 2px 8px;padding:4px 10px}.editable-param:after{opacity:1;right:8px;top:50%;transform:translateY(-50%)}.counter-text{display:flex;flex-direction:column}}.parameter-edit{background-color:#00a0a00f;border-left:3px solid var(--primary-teal);border-radius:8px;box-shadow:0 2px 6px #00a0a01a;display:flex;flex-direction:column;margin:8px 0;padding:12px}.parameter-edit-header{border-bottom:1px solid #00a0a01a;color:var(--primary-teal);font-size:14px;font-weight:700;margin-bottom:8px;padding-bottom:6px}.parameter-edit-controls{align-items:center;display:flex}.parameter-edit input{border:1px solid var(--primary-teal-light);border-radius:6px;box-shadow:0 2px 4px #00a0a01a;color:var(--primary-teal-dark);font-size:15px;font-weight:500;margin-right:10px;padding:8px 12px;text-align:center;width:60px}.parameter-edit input:focus{border-color:var(--primary-teal);box-shadow:0 0 0 2px #00a0a026;outline:none}.parameter-edit span{color:var(--text-secondary);font-size:13px;font-weight:500}.parameter-edit-hint{color:var(--text-secondary);display:none;font-size:11px;font-style:italic;margin-top:8px;opacity:.8;text-align:center}.parameter-edit-buttons{display:flex;gap:10px;margin-top:12px}.parameter-edit-button{border:none;border-radius:6px;box-shadow:0 2px 4px #0000001a;cursor:pointer;flex:1 1;font-size:13px;font-weight:700;padding:6px 14px;transition:all .2s ease}.parameter-edit-save{background-color:var(--primary-teal);color:#fff}.parameter-edit-save:active,.parameter-edit-save:hover{background-color:var(--primary-teal-dark);box-shadow:0 3px 6px #00a0a033;transform:translateY(-1px)}.parameter-edit-cancel{background-color:var(--neutral-bg);border:1px solid #0000001a;color:var(--text-secondary)}.parameter-edit-cancel:active,.parameter-edit-cancel:hover{background-color:var(--beat-muted);transform:translateY(-1px)}@media (min-width:1025px){.parameter-edit-hint{display:block}.parameter-edit-buttons{display:none}}.status-icon{align-items:center;display:flex;font-size:20px;justify-content:center;margin-right:14px;min-width:24px}.status-info{flex:1 1}.status-label{color:var(--text-primary);display:block;font-size:14px;font-weight:500;margin-bottom:6px}.progress-container{background-color:#00000014;border-radius:4px;height:8px;margin-bottom:6px;overflow:hidden;position:relative}.progress-bar{background-color:var(--primary-teal);height:100%;transition:width .3s ease-out}.silent .progress-bar{background-color:var(--error)}.playing .progress-bar{background-color:var(--primary-teal)}.speed .progress-bar{background-color:var(--secondary-gold-dark)}.counter-text{color:var(--text-secondary);font-size:13px;font-weight:500}.training-active-tip{align-items:flex-start;background-color:var(--training-tip-bg);border-left:3px solid var(--secondary-gold);border-radius:8px;display:flex;font-size:13px;margin-top:8px;padding:12px}.tip-icon{font-size:16px}.tip-text{color:var(--text-secondary);line-height:1.4}.tip-title{color:var(--text-primary);display:block;font-weight:700;margin-bottom:4px}.keyboard-hint{background-color:var(--neutral-bg);border-radius:4px;color:var(--text-tertiary);font-size:12px;margin-top:12px;padding:6px;text-align:center}.keyboard-hint kbd{background-color:var(--text-light);border:1px solid var(--neutral-border);border-radius:3px;box-shadow:0 1px 1px #0003;font-family:monospace;margin:0 3px;padding:2px 5px}.beat-indicator{background-color:var(--beat-muted);border-radius:50%;display:inline-block;height:8px;margin:0 2px;width:8px}.beat-indicator.active{background-color:var(--primary-teal)}.silent .beat-indicator.active{background-color:var(--error)}.playing .beat-indicator.active{background-color:var(--primary-teal)}.speed .beat-indicator.active{background-color:var(--secondary-gold-dark)}.beat-indicators{display:flex;flex-wrap:wrap;justify-content:flex-start;margin-top:6px}@media (min-width:769px) and (max-width:1024px){.training-active-container{margin:20px auto;max-width:400px;padding:16px}.training-active-section-type{padding:4px 12px}.parameter-edit{padding:10px}.parameter-edit-header{font-size:14px}.parameter-edit input{font-size:15px;padding:7px 10px;width:70px}.parameter-edit-button{font-size:13px;padding:6px 12px}}@media (max-width:768px){.training-active-container{margin:15px auto;max-width:330px;padding:14px}.training-active-title{font-size:15px}.training-active-section-title{font-size:13px}.training-active-section-type{font-size:12px;padding:5px 10px}.status-label{font-size:13px;margin-bottom:10px}.counter-text,.training-active-tip{font-size:12px}.keyboard-hint{display:none}.parameter-edit{padding:12px}.parameter-edit-header{font-size:14px;margin-bottom:10px}.parameter-edit-controls{margin-bottom:8px}.parameter-edit input{border-radius:6px;font-size:16px;padding:8px 12px;width:80px}.parameter-edit-button{border-radius:6px;font-size:14px;padding:8px 12px}}.accelerate-button-container{margin:15px auto;width:100%;z-index:10}.accelerate-button,.accelerate-button-container{display:flex;justify-content:center;position:relative}.accelerate-button{align-items:center;background-color:var(--secondary-gold);border:none;border-radius:6px;box-shadow:0 2px 4px #0000001a;color:var(--text-light);cursor:pointer;font-size:15px;font-weight:700;letter-spacing:.5px;min-width:120px;padding:10px 18px;transition:all .2s ease}.accelerate-button:hover{background-color:var(--beat-outer);box-shadow:0 3px 6px #00000026;transform:translateY(-1px)}.accelerate-button:active{box-shadow:0 1px 3px #0000001a;transform:translateY(1px)}.accelerate-button .icon{margin-right:6px}.grid-metronome-container .accelerate-button-container,.metronome-container .accelerate-button-container,.multi-circle-container .accelerate-button-container,.polyrhythm-container .accelerate-button-container{margin:15px auto}@media (max-width:600px){.accelerate-button{font-size:14px;min-width:110px;padding:8px 15px}}.metronome-container{margin:0 auto;position:relative}.beat-icon{transition:all .15s ease}.tap-button{background:#0000;border:none;cursor:pointer;margin-top:20px;outline:none}@keyframes pulse-beat{0%{transform:scale(1)}40%{transform:scale(1.25) rotate(2deg)}to{transform:scale(1)}}.line-connection{background:var(--primary-teal);box-shadow:0 0 3px #00a0a099;height:1px;pointer-events:none;position:absolute;transform-origin:center center;transition:all .15s ease}.beat-icon{z-index:1}.circles-container{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;margin-top:20px;position:relative;width:100%}.metronome-circle{border:2px solid #0000;border-radius:50%;box-sizing:border-box;cursor:pointer;margin:15px;overflow:visible;position:relative;transition:box-shadow .3s ease,border .3s ease}.metronome-circle-inactive{border:2px dashed var(--neutral-border)}.metronome-circle-active{border:2px solid #0000;box-shadow:0 0 0 3px var(--primary-teal),0 0 10px #00a0a099}.metronome-circle-playing{animation:circle-pulse 2s ease-in-out infinite;border:2px solid #0000!important;box-shadow:0 0 0 3px var(--primary-teal),0 0 15px #00a0a0cc!important}.metronome-circle-silent{border:2px solid #0000;box-shadow:0 0 0 3px var(--error),0 0 10px #ff572299}.beat-icon{cursor:pointer;height:24px;position:absolute;transition:all .2s ease-in-out;width:24px}.beat-icon.transitioning{animation:pulse 1s infinite}.beat-icon-active{filter:drop-shadow(0 0 5px rgba(255,255,255,.7))!important}.remove-circle-button{background-color:var(--error);border-radius:50%;box-shadow:0 0 5px #0000004d;color:var(--text-light);font-size:20px;font-weight:700;height:30px;position:absolute;right:-15px;top:-15px;width:30px;z-index:10}.add-circle-button,.remove-circle-button{align-items:center;cursor:pointer;display:flex;justify-content:center}.add-circle-button{margin:15px;position:relative;transition:all .15s ease}.plus-button{align-items:center;background-color:var(--primary-teal);border-radius:50%;box-shadow:0 0 8px #00a0a080;color:var(--text-light);display:flex;font-size:36px;font-weight:700;height:60px;justify-content:center;width:60px}.training-status{background-color:var(--neutral-bg-alt);border:1px solid var(--neutral-border);border-radius:5px;margin:10px auto;max-width:300px;padding:8px}.training-status h4{color:var(--primary-teal);margin:0 0 8px}.silent-label{color:var(--error);font-weight:700}.play-pause-button{background:#0000;border:none;cursor:pointer;outline:none;padding:10px;transition:all .2s ease}.play-pause-icon{height:40px;object-fit:contain;width:40px}.tap-tempo-button{background:#0000;border:none;cursor:pointer;margin-top:20px;outline:none;padding:10px}.tap-icon{height:35px;object-fit:contain;transition:all .15s ease}.controls-section{margin-top:20px}.section-title{margin-bottom:10px}.slider-item{margin:0 auto;max-width:300px;width:100%}.tempo-slider{margin-bottom:15px}.slider-item label{display:block;margin-bottom:5px}.slider-item input[type=range]{display:block;margin:5px auto;width:100%}@keyframes circle-pulse{0%{box-shadow:0 0 0 3px var(--primary-teal),0 0 8px #00a0a099}50%{box-shadow:0 0 0 4px var(--primary-teal),0 0 15px #00a0a0cc}to{box-shadow:0 0 0 3px var(--primary-teal),0 0 8px #00a0a099}}@keyframes fade-pulse{0%{opacity:.8}50%{opacity:1}to{opacity:.8}}@media (max-width:768px){.add-circle-button,.metronome-circle{margin:15px 0}.beat-icon{height:20px;width:20px}.plus-button{font-size:28px;height:50px;width:50px}}.playing-indicator{animation:fade-pulse 1.5s infinite;background-color:var(--primary-teal);border-radius:12px;box-shadow:0 2px 4px #0000001a;font-size:11px;left:50%;padding:3px 12px;top:-30px;transform:translateX(-50%);z-index:10}.circle-number,.playing-indicator{color:var(--text-light);font-weight:700;position:absolute}.circle-number{align-items:center;background-color:#0009;border-radius:50%;display:flex;font-size:14px;height:24px;justify-content:center;left:10px;top:10px;width:24px;z-index:5}.sliders-container{background-color:var(--neutral-bg);margin:0 auto;max-width:300px;width:100%}.sliders-container label{background-color:var(--neutral-bg);border-radius:5px;color:var(--text-primary);display:block;font-family:Lato,sans-serif;margin-bottom:15px;padding:10px 0;text-align:center;width:100%}.sliders-container input[type=range]{-webkit-appearance:none;appearance:none;background:var(--neutral-bg);border-radius:5px;display:block;height:10px;margin:10px 0 5px;outline:none;transition:background .2s;width:100%}.sliders-container input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--primary-teal);border:none;border-radius:50%;box-shadow:0 0 2px #0003;cursor:pointer;height:20px;-webkit-transition:background .2s,transform .1s;transition:background .2s,transform .1s;width:20px}.sliders-container input[type=range]::-moz-range-thumb{background:var(--primary-teal);border:none;border-radius:50%;box-shadow:0 0 2px #0003;cursor:pointer;height:20px;-moz-transition:background .2s,transform .1s;transition:background .2s,transform .1s;width:20px}.sliders-container input[type=range]:hover{background:var(--neutral-border)}.sliders-container input[type=range]:hover::-webkit-slider-thumb{background:var(--primary-teal-dark);transform:scale(1.1)}.sliders-container input[type=range]:hover::-moz-range-thumb{background:var(--primary-teal-dark);transform:scale(1.1)}.sliders-container input[type=range]:active::-webkit-slider-thumb{background:var(--primary-teal-dark);transform:scale(1.15)}.sliders-container input[type=range]:active::-moz-range-thumb{background:var(--primary-teal-dark);transform:scale(1.15)}.swing-slider,.tempo-slider,.volume-slider{background:var(--neutral-bg)}.disabled-swing-label{color:var(--text-tertiary)!important;font-style:italic}.swing-slider.disabled{background:var(--neutral-bg);cursor:not-allowed;opacity:.7}.swing-slider.disabled::-webkit-slider-thumb{background:var(--text-tertiary);cursor:not-allowed;transform:none!important}.swing-slider.disabled::-moz-range-thumb{background:var(--text-tertiary);cursor:not-allowed;transform:none!important}.swing-slider.disabled:active::-webkit-slider-thumb,.swing-slider.disabled:hover::-webkit-slider-thumb{background:var(--text-tertiary);transform:none!important}.swing-slider.disabled:active::-moz-range-thumb,.swing-slider.disabled:hover::-moz-range-thumb{background:var(--text-tertiary);transform:none!important}.editable-label{border-radius:4px;cursor:text;display:inline-block;padding:2px 4px;pointer-events:auto;position:relative;transition:all .2s;z-index:10}.editable-label:hover{background-color:#008b8b1a;border-radius:4px;cursor:text}.editable-input{-webkit-appearance:none;appearance:none;background-color:initial!important;background:#0000!important;border:1px solid var(--primary-teal);border-radius:4px;box-shadow:none;color:var(--text-primary);padding:2px 4px}.editable-input:focus{box-shadow:0 0 0 2px #008b8b4d}.disabled-label .editable-label{cursor:default}.disabled-label .editable-label:hover{background-color:initial}@media (max-width:768px){.sliders-container{width:90%}.sliders-container label{font-size:14px;margin-bottom:10px}.sliders-container input[type=range]{height:8px}.sliders-container input[type=range]::-webkit-slider-thumb{height:18px;width:18px}.sliders-container input[type=range]::-moz-range-thumb{height:18px;width:18px}.editable-input{font-size:14px;width:50px!important}}.note-selector-container{display:flex;gap:20px;justify-content:center;margin:10px 0}.note-selector-button{align-items:center;background-color:initial;border:none;border-radius:8px;cursor:pointer;display:flex;height:56px;justify-content:center;padding:8px;transition:all .2s ease;width:56px}.note-selector-button:hover{background-color:#00a0a01a}.note-icon{height:40px;transition:transform .2s ease;width:40px}.note-icon.active{filter:drop-shadow(0 0 5px rgba(255,215,0,.7));transform:scale(1.1)}@media (max-width:768px){.note-icon{height:40px;width:40px}.note-icon.active{filter:drop-shadow(0 0 5px rgba(255,215,0,.7));transform:scale(1.15)}.note-selector-button{background-color:#f8d38d1a;border:1px solid #f8d38d4d;height:64px;padding:12px;width:64px}.note-selector-button:active{background-color:#f8d38d33}.note-selector-container{gap:25px;margin:15px 0}}.subdivision-container{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 auto;max-width:100%;padding:5px}.subdivision-button{margin:0 3px;object-fit:contain}.editable-slider{margin-bottom:20px;position:relative;width:100%}.slider-label{background-color:#f5f5f5;background-color:var(--neutral-bg,#f5f5f5);border-radius:5px;color:#333;color:var(--text-primary,#333);cursor:text;display:block;font-family:Lato,sans-serif;padding:10px 0;text-align:center;transition:all .2s;width:100%}.slider-label:hover{background-color:#e8e8e8;background-color:var(--neutral-hover,#e8e8e8)}.editable-input{background-color:#f5f5f5;background-color:var(--neutral-bg,#f5f5f5);border:2px solid #00a0a0;border:2px solid var(--primary-teal,#00a0a0);border-radius:5px;color:#333;color:var(--text-primary,#333);display:block;font-family:Lato,sans-serif;font-size:inherit;outline:none;padding:10px 0;text-align:center;width:100%}.editable-input:focus{background-color:#fff;background-color:var(--neutral-bg-light,#fff);box-shadow:0 0 0 2px #00a0a04d}.grid-square{transform-origin:center center;transition:all .18s ease-out;will-change:transform,box-shadow}.grid-square-playing{box-shadow:0 2px 4px #f5c26d33;transform:scale(1.03)}.grid-square-first-beat.grid-square-playing{box-shadow:0 2px 6px #f5c26d40;transform:scale(1.04)}.grid-square-accent.grid-square-playing{box-shadow:0 2px 5px #f5c26d38;transform:scale(1.035)}.grid-square-normal.grid-square-playing{box-shadow:0 1px 3px #f5c26d2e;transform:scale(1.025)}.grid-square-first-beat{background-color:#f5bc5e!important}.grid-square-accent{background-color:#f8c978!important}.grid-square-normal{background-color:var(--secondary-gold-light)!important}.grid-square{border-radius:4px}.grid-square-active:not(.grid-square-playing){box-shadow:inset 0 0 0 1px #f5c26d4d}.polyrhythm-container{align-items:center;display:flex;justify-content:center;margin:0 auto 20px;position:relative;width:100%}.polyrhythm-circles{margin:0 auto;position:relative}.inner-circle,.outer-circle{border:2px dashed #ccc;border-radius:50%;box-sizing:border-box;position:absolute;transition:all .3s ease}.inner-circle.active,.outer-circle.active{border:2px solid #0000;box-shadow:0 0 0 3px var(--primary-teal),0 0 10px #00a0a099}.beat-dot{backface-visibility:hidden;-webkit-backface-visibility:hidden;background-color:var(--beat-inner);border-radius:50%;box-shadow:0 0 8px #0003;cursor:default;height:20px;position:absolute;transform:translate(-50%,-50%);transition:all .15s ease-out,left .3s ease,top .3s ease,background-color .3s ease;width:20px;will-change:transform}.beat-dot.active{box-shadow:0 0 8px #f8d38d99;transform:translate(-50%,-50%) scale(1.25)}.beat-dot.first-beat{background-color:var(--primary-teal)}.beat-dot.inner-beat{background-color:var(--beat-inner)}.beat-dot.outer-beat{background-color:var(--beat-outer)}.beat-dot.inner-beat.accent-beat{background-color:#f5d69c;box-shadow:0 0 8px #f5d69c99}.beat-dot.outer-beat.accent-beat{background-color:#f5bb57;box-shadow:0 0 8px #f5bb5799}.beat-dot.muted{background-color:var(--beat-muted);opacity:.7}.transitioning{opacity:.7!important}.beat-dot.transitioning{transition:all .3s ease,left .3s ease,top .3s ease,background-color .3s ease}.polyrhythm-controls{display:flex;flex-direction:column;gap:15px;margin:0 auto 20px;max-width:600px}.polyrhythm-config{text-align:center}.circle-header{align-items:center;display:flex;flex-direction:column;margin-bottom:12px;position:relative}.circle-badge{border-radius:16px;box-shadow:0 2px 4px #0000001a;color:#fff;display:inline-block;font-size:14px;font-weight:500;letter-spacing:.5px;margin-bottom:4px;padding:4px 12px;text-transform:uppercase}.inner-badge{background:var(--beat-inner);background:linear-gradient(135deg,var(--beat-inner) 0,var(--beat-outer) 100%)}.outer-badge{background:var(--beat-outer);background:linear-gradient(135deg,#f5bb57,#f0a82c)}.circle-beat-count{color:#555;font-size:15px;font-weight:500;margin-top:2px}.polyrhythm-button{background-color:#fff;border:1px solid #ccc;border-radius:50%;cursor:pointer;font-weight:700;height:35px;transition:all .25s ease;width:35px}.polyrhythm-button:hover{background-color:var(--neutral-bg);transform:translateY(-1px)}.polyrhythm-button.active{background-color:var(--primary-teal);border-color:var(--primary-teal);color:#fff;transform:scale(1.05)}.polyrhythm-button:disabled{cursor:not-allowed;opacity:.6}.side-controls{align-items:center;display:flex;flex-direction:column;justify-content:center;margin:0 auto 20px;text-align:center;width:100%}.polyrhythm-ratio{margin-bottom:15px;text-align:center;width:100%}.ratio-value{color:var(--primary-teal);font-weight:700;transition:all .3s ease}.switch-circles-button{align-items:center;background:var(--primary-teal);border-radius:4px;box-shadow:0 2px 5px #0000001a;color:#fff;display:flex;justify-content:center;margin:0 auto;padding:8px 12px;transition:all .2s ease}.switch-circles-button span{margin-right:8px}.switch-circles-button:hover{background-color:var(--primary-teal-dark)!important;box-shadow:0 4px 8px #00000026;transform:translateY(-1px)}.switch-circles-button:active{box-shadow:0 1px 3px #0000001a;transform:translateY(1px)}.switch-circles-button:disabled{box-shadow:none;opacity:.6;transform:none}.polyrhythm-legend{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin:20px auto}.legend-item{align-items:center;color:#666;display:flex;font-size:13px;transition:opacity .3s ease}.legend-color{border-radius:50%;height:14px;margin-right:6px;width:14px}.legend-color.inner-beat{background-color:var(--beat-inner)}.legend-color.outer-beat{background-color:var(--beat-outer)}.legend-color.first-beat{background-color:var(--primary-teal)}.play-pause-button{transition:opacity .2s ease}.play-pause-button:disabled{cursor:not-allowed;opacity:.6}.play-pause-icon{transition:transform .2s ease}.play-pause-button:active .play-pause-icon{transform:scale(.95)}.silent-mode{border-color:#ccc!important}.silent-beat{filter:grayscale(70%)}.inner-circle.silent-mode,.outer-circle.silent-mode{animation:none;border-color:#ccc!important;border-style:dashed!important}@media (max-width:768px){.polyrhythm-controls{flex-direction:column}.polyrhythm-config{width:100%}.polyrhythm-button{font-size:14px;height:30px;width:30px}.polyrhythm-legend{align-items:center;flex-direction:column;gap:10px}.side-controls,.sliders-container{max-width:320px}}@media (min-width:769px){.polyrhythm-controls{flex-direction:row;justify-content:space-around}.polyrhythm-config{flex:1 1;max-width:280px}}@media (prefers-reduced-motion:reduce){.beat-dot{transition:none!important}.inner-circle,.outer-circle,.polyrhythm-button,.slider-container input[type=range],.switch-circles-button{transition:opacity .2s ease!important}}.beat-sync-line-container{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:10}.beat-sync-line{stroke-dasharray:4,4;stroke-linecap:round;animation:dashAnimation 1s linear infinite}@keyframes dashAnimation{to{stroke-dashoffset:-8}}.beat-sync-endpoint{transform-origin:center;transition:r .2s ease,fill .2s ease}.beat-sync-endpoint.active{animation:pulseCircle .3s ease-out}@keyframes pulseCircle{0%{r:3.5}50%{r:6}to{r:3.5}}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.polyrhythm-buttons{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 auto;max-width:220px}.subdivision-button-container{align-items:center;cursor:pointer;display:flex;justify-content:center;transition:all .15s ease}.subdivision-button{cursor:pointer;height:36px;transition:transform .15s ease,filter .15s ease;width:36px}.subdivision-button-container:hover:not(.disabled) .subdivision-button:not(.active){filter:brightness(1.05);transform:scale(1.05)}.subdivision-button-container.active .subdivision-button{filter:drop-shadow(0 0 5px rgba(0,160,160,.5));transform:scale(1.1)}.subdivision-button-container:active:not(.disabled) .subdivision-button{transform:scale(.95)}.subdivision-button-container.disabled{cursor:not-allowed;opacity:.6}.switch-circles-button{background:#0000;border:none;cursor:pointer;display:block;margin:10px auto;outline:none;padding:10px;transition:transform .2s ease}.switch-circles-button img{height:35px;object-fit:contain;transition:all .15s ease}.switch-circles-button:hover:not(:disabled) img{filter:brightness(0) invert(1);transform:scale(1.1)}.switch-circles-button:active:not(:disabled) img{transform:scale(.95)}.switch-circles-button:disabled{cursor:not-allowed;opacity:.5}.polyrhythm-ratio{background-color:#f5f5f5cc;border:1px solid #00a0a026;border-radius:12px;box-shadow:0 2px 8px #0000000f;display:inline-block;margin:15px auto 20px;min-width:140px;padding:12px 20px;position:relative}.ratio-label{color:#666;font-size:13px;font-weight:500;letter-spacing:.5px;margin-bottom:6px;text-align:center;text-transform:uppercase}.ratio-display{align-items:center;display:flex;gap:6px;justify-content:center}.ratio-number{color:#444;font-size:28px;font-weight:600;line-height:1;min-width:30px;text-align:center}.inner-number{color:var(--beat-inner)}.inner-number,.outer-number{text-shadow:0 1px 2px #0000001a}.outer-number{color:var(--beat-outer)}.ratio-divider{color:#888;font-size:24px;line-height:1;margin:0 2px}@media (max-width:600px){.polyrhythm-buttons{gap:6px;max-width:200px}.polyrhythm-button{font-size:15px;height:38px;width:38px}.switch-circles-button{font-size:14px;padding:6px 12px}}.beat-indicator-line{filter:drop-shadow(0 0 3px rgba(0,160,160,.6));transition:stroke .2s ease}.beat-indicator-dot{filter:drop-shadow(0 0 2px rgba(0,160,160,.4));transition:fill .2s ease}.polyrhythm-container svg{backface-visibility:hidden;transform:translateZ(0);will-change:transform}.beat-visualization-container{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:100}:root{--transition-standard:all 0.2s cubic-bezier(0.25,0.1,0.25,1);--button-shadow:0 2px 5px #0000001a}.menu-overlay{align-items:center;background:var(--overlay-bg);display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:1000}.menu-modal{animation:menuModalFadeIn .3s ease-out;background:var(--neutral-bg-alt);border-radius:12px;box-shadow:var(--modal-shadow);max-height:85vh;max-width:550px;overflow-y:auto;padding:25px;position:relative;width:90%}@keyframes menuModalFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.menu-close-button{align-items:center;background-color:var(--primary-teal);border:none;border-radius:50%;box-shadow:0 3px 6px #0003;color:#fff;cursor:pointer;display:flex;font-size:1.5rem;height:40px;justify-content:center;line-height:1;padding:0;position:fixed;right:10px;top:10px;transition:all .2s ease;width:40px;z-index:2500}.menu-close-button:hover{background-color:var(--primary-teal-dark);box-shadow:0 4px 8px #0000004d;transform:scale(1.05)}.menu-close-button:focus{outline:2px solid var(--primary-teal-light);outline-offset:2px}.menu-tab{align-items:center;display:flex;flex-direction:column;font-size:16px;font-weight:500;padding:15px 10px}.menu-tab .tab-label{margin-bottom:2px}.menu-tab.active{font-weight:600}.training-indicator{background-color:var(--secondary-gold);border-radius:50%;height:8px;position:absolute;right:25%;top:8px;width:8px}.menu-content{max-height:calc(85vh - 120px);overflow-y:auto}.menu-content::-webkit-scrollbar{width:8px}.menu-content::-webkit-scrollbar-track{background:var(--neutral-bg);border-radius:10px}.menu-content::-webkit-scrollbar-thumb{background-color:var(--neutral-border);border-radius:10px}.menu-content::-webkit-scrollbar-thumb:hover{background-color:var(--text-tertiary)}@media (max-width:768px){.menu-modal{padding:20px 15px;width:95%}.menu-tab{font-size:14px;padding:12px 5px}}@media (max-width:600px){.menu-modal{animation:menuModalFadeIn .3s ease-out;border-radius:0;height:100%;max-height:none;padding:20px 15px 80px;width:100%}.menu-content{max-height:calc(100vh - 120px)}.menu-tabs{background:#fff;border-bottom:none;border-top:1px solid var(--neutral-border);bottom:0;left:0;margin-bottom:0;padding:8px 0;position:fixed;width:100%;z-index:10}.menu-tab{font-size:11px;padding:8px 3px}.menu-tab .tab-icon{display:block;margin:0 auto 3px}.menu-tab.active:after{bottom:auto;top:-1px}}.settings-save-button,.training-save-button{background:var(--primary-teal);border:none;border-radius:8px;color:#fff;cursor:pointer;display:block;font-weight:600;margin:20px auto 0;min-width:140px;padding:12px 25px;transition:all .2s ease;transition:var(--transition-standard)}.settings-save-button:hover,.training-save-button:hover{background:var(--primary-teal-dark);transform:scale(1.05)}.quick-access-buttons{display:none}.sound-sets-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}.sound-set-option{align-items:center;background-color:var(--neutral-bg);border-radius:6px;cursor:pointer;display:flex;padding:8px 12px;transition:all .2s ease}.sound-set-option:hover{background-color:var(--neutral-border-light)}.sound-set-option input{margin-right:10px}.sound-set-divider{background-color:var(--neutral-border);height:1px;margin:10px 0}.settings-description{color:var(--text-secondary);font-size:14px;margin-bottom:15px}.sound-preview-buttons{display:inline-flex;flex-wrap:wrap;gap:10px;margin-bottom:15px}.preview-button{border:none;border-radius:6px;cursor:pointer;font-weight:500;padding:10px 15px;transition:all .2s ease}.preview-button:hover:not(:disabled){transform:translateY(-2px)}.preview-button:disabled{cursor:not-allowed;opacity:.5}.first-beat{background-color:var(--beat-first);color:#fff}.accent-beat{background-color:var(--beat-accent);color:var(--text-primary)}.normal-beat{background-color:var(--beat-normal);color:var(--text-primary)}.preview-pattern-button{background-color:var(--primary-teal-light);border:1px solid var(--primary-teal);border-radius:6px;color:var(--primary-teal-dark);cursor:pointer;display:block;font-weight:500;margin-top:10px;padding:10px;transition:all .2s ease;width:100%}.preview-pattern-button:hover:not(:disabled){background-color:var(--primary-teal-light);transform:translateY(-2px)}.preview-button.playing{box-shadow:inset 0 2px 5px #0003;transform:scale(.95)}.preview-pattern-button.playing{background-color:var(--primary-teal-dark);box-shadow:inset 0 2px 5px #0003;color:#fff;transform:scale(.98)}.menu-button{align-items:center;background-color:var(--primary-teal);border:none;border-radius:50%;box-shadow:0 2px 5px #0000001a;box-shadow:var(--button-shadow);cursor:pointer;display:flex;height:40px;justify-content:center;position:fixed;right:10px;top:10px;transition:all .2s ease;transition:var(--transition-standard);width:40px;z-index:100}.menu-button.active{background-color:var(--primary-teal-dark);transform:rotate(180deg)}.menu-button svg{color:#fff;height:22px;width:22px}.menu-button:hover{background-color:var(--primary-teal-dark);transform:scale(1.05)}.menu-button img{color:#fff;height:24px;width:24px}.menu-close-button{height:32px;width:32px;z-index:100}@media (max-width:600px){.menu-close-button{background-color:var(--primary-teal);box-shadow:0 3px 6px #0003;font-size:1.6rem;height:40px;right:10px;top:10px;width:40px}.menu-modal h2{margin-right:30px}}@media (max-width:350px){.menu-close-button{background-color:var(--primary-teal);box-shadow:0 2px 8px #0000004d;position:fixed;right:5px;top:5px;z-index:2500}}.menu-tabs{border-bottom:1px solid var(--neutral-border);display:flex;margin-bottom:20px;position:relative}.menu-tab{background:#0000;border:none;color:var(--text-secondary);cursor:pointer;flex:1 1;font-size:15px;font-weight:600;padding:12px 5px;position:relative;transition:all .2s ease}.menu-tab.support-tab{color:var(--primary-teal);position:relative}.menu-tab.support-tab .tab-icon{animation:pulse 2s infinite;color:var(--primary-teal)}.menu-tab.active,.menu-tab:hover{color:var(--primary-teal)}.menu-tab.active:after{background:var(--primary-teal);border-radius:3px 3px 0 0;bottom:-1px;content:"";height:3px;left:0;position:absolute;width:100%}.menu-content{padding:10px 5px}.info-content h2{color:var(--primary-teal);margin-bottom:20px;margin-top:0}.info-content h3{color:var(--primary-teal-dark);margin:20px 0 10px}.info-content ul{list-style-type:none;padding-left:0}.info-content li{line-height:1.4;margin-bottom:8px}.shortcut-list{grid-gap:10px;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.shortcut-list li{align-items:center;display:flex}.key{background:var(--neutral-border);display:inline-block;margin-right:8px;min-width:18px;padding:2px 6px;text-align:center}.beat-types{gap:15px;margin-top:10px}.beat-type{margin-right:15px}.beat-indicator{height:16px;margin-right:6px;width:16px}.beat-indicator.muted{background-color:var(--beat-muted)}.beat-indicator.normal{background-color:var(--beat-normal)}.beat-indicator.accent{background-color:var(--beat-accent)}.beat-indicator.first{background-color:var(--beat-first)}.about-section{border-top:1px solid var(--neutral-border-light);margin-top:25px;padding-top:15px}.version-info{color:var(--text-tertiary);font-size:12px;margin-top:10px}.training-content h2{color:var(--primary-teal);margin-bottom:20px;margin-top:0}.training-subtabs{border-bottom:1px solid var(--neutral-border-light);display:flex;margin-bottom:15px}.training-subtab{background:#0000;border:none;color:var(--text-secondary);cursor:pointer;font-size:14px;padding:8px 15px;position:relative;transition:all .2s ease}.training-subtab.active,.training-subtab:hover{color:var(--primary-teal)}.training-subtab.active{font-weight:600}.training-subtab.active:after{background:var(--primary-teal);bottom:-1px;content:"";height:2px;left:0;position:absolute;width:100%}.training-section{display:none}.training-section.active{display:block}.training-overview{background-color:var(--training-overview-bg);border-left:4px solid var(--primary-teal);border-radius:0 4px 4px 0;margin-bottom:20px;padding:12px 15px}.training-overview p{color:var(--text-primary);font-size:14px;line-height:1.5;margin:0}.training-control{margin-bottom:15px}.training-select-label{align-items:center;color:var(--text-primary);display:flex;font-weight:700}.training-select{background-color:#fff;border:1px solid var(--neutral-border);border-radius:4px;flex:1 1;font-size:14px;margin-left:10px;padding:8px 10px}.training-options{background-color:var(--neutral-bg-alt);border:1px solid var(--neutral-border-light);border-radius:8px;margin-top:15px;padding:15px}.training-explanation{color:var(--text-secondary);font-size:14px;line-height:1.4;margin-bottom:15px}.training-input-label{display:flex;flex-direction:column;margin-bottom:15px}.training-input-label span:first-child{color:var(--text-primary);font-weight:700;margin-bottom:5px}.training-input{border:1px solid var(--neutral-border);border-radius:4px;font-size:14px;max-width:150px;padding:8px 10px;width:100%}.training-slider{-webkit-appearance:none;background:var(--neutral-border);border-radius:4px;height:8px;margin:10px 0;outline:none;width:100%}.training-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--primary-teal);border-radius:50%;cursor:pointer;height:20px;-webkit-transition:all .2s ease;transition:all .2s ease;width:20px}.training-slider::-webkit-slider-thumb:hover{background:var(--primary-teal-dark);transform:scale(1.1)}.slider-value{color:var(--primary-teal);font-weight:700;margin-bottom:5px}.input-description{color:var(--text-tertiary);font-size:12px;font-style:italic;margin-top:5px}.training-tip{align-items:flex-start;background-color:var(--training-tip-bg);border-left:4px solid var(--secondary-gold);border-radius:0 4px 4px 0;display:flex;margin:15px 0;padding:12px 15px}.tip-icon{font-size:18px;margin-right:10px}.tip-content{font-size:13px;line-height:1.4}.training-save-button{background:var(--primary-teal);border:none;border-radius:5px;color:var(--text-light);cursor:pointer;display:block;font-size:16px;font-weight:700;margin:20px auto 0;min-width:150px;padding:12px 25px;transition:all .2s ease}.training-save-button:hover{background:var(--primary-teal-dark);box-shadow:0 0 10px #00a0a066;transform:scale(1.05)}.settings-content h2{color:var(--primary-teal);margin-bottom:20px;margin-top:0}.settings-subtabs{border-bottom:1px solid var(--neutral-border-light);display:flex;margin-bottom:15px}.settings-subtab{background:#0000;border:none;color:var(--text-secondary);cursor:pointer;font-size:14px;padding:8px 15px;position:relative;transition:all .2s ease}.settings-subtab.active,.settings-subtab:hover{color:var(--primary-teal)}.settings-subtab.active{font-weight:600}.settings-subtab.active:after{background:var(--primary-teal);bottom:-1px;content:"";height:2px;left:0;position:absolute;width:100%}.settings-section{display:none}.settings-section.active{display:block}.settings-group{border-bottom:1px solid var(--neutral-border-light);margin-bottom:20px;padding-bottom:20px}.settings-group:last-child{border-bottom:none;margin-bottom:0}.settings-group h3{color:var(--primary-teal-dark);font-size:16px;margin:0 0 15px}.settings-row{margin-bottom:15px}.settings-row:last-child{margin-bottom:0}.settings-row label{display:flex;flex-direction:column}.settings-row label>span{font-weight:500;margin-bottom:5px}.settings-input,.settings-select{border:1px solid var(--neutral-border);border-radius:4px;font-size:14px;margin:auto;max-width:200px;padding:8px 12px}.settings-value{color:var(--text-secondary);padding:8px 0}.settings-checkbox-label{align-items:center;display:flex!important;flex-direction:row!important}.settings-checkbox{margin-right:10px}.settings-slider{-webkit-appearance:none;background:var(--neutral-border);border-radius:4px;height:8px;margin:10px 0;max-width:300px;outline:none;width:100%}.settings-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--primary-teal);border-radius:50%;cursor:pointer;height:20px;-webkit-transition:all .2s ease;transition:all .2s ease;width:20px}.settings-save-button{background:var(--primary-teal);border:none;border-radius:5px;color:var(--text-light);cursor:pointer;display:block;font-size:16px;font-weight:700;margin:20px auto 0;min-width:150px;padding:12px 25px;transition:all .2s ease}.settings-save-button:hover{background:var(--primary-teal-dark);box-shadow:0 0 10px #00a0a066;transform:scale(1.05)}@media (max-width:480px){.menu-modal{animation:menuModalFadeIn .3s ease-out;padding:20px 15px;width:95%}.menu-tab{font-size:14px;padding:10px 5px}.shortcut-list{grid-template-columns:1fr}.settings-input,.settings-select{max-width:100%}.settings-subtab,.training-subtab{font-size:13px;padding:8px 10px}}.style-guide-tab{align-items:center;display:flex;flex-direction:column;padding:20px;text-align:center}.style-guide-tab h2{color:var(--primary-teal);margin-bottom:15px}.style-guide-tab p{color:var(--text-secondary);margin-bottom:20px}.style-guide-open-button{background-color:var(--primary-teal);border:none;border-radius:8px;color:#fff;cursor:pointer;font-family:Lato,sans-serif;font-size:16px;padding:12px 24px;transition:background-color .15s ease}.style-guide-open-button:hover{background-color:var(--primary-teal-dark)}.mode-selector-container{margin:15px 0 25px}.mode-selector,.mode-selector-container{display:flex;justify-content:center;width:100%}.mode-selector{border-radius:12px;gap:15px;max-width:600px;padding:15px 10px}.mode-option{align-items:center;border-radius:8px;cursor:pointer;display:flex;flex-direction:column;min-width:70px;padding:10px;position:relative;transition:all .2s ease}.mode-option:hover{transform:translateY(-2px)}.mode-option.active{border:1px solid #ffd182}.mode-icon-container{align-items:center;display:flex;height:60px;justify-content:center;margin-bottom:5px;position:relative;width:60px}.mode-icon{height:40px;transition:transform .2s ease;width:40px}.active-indicator{border-radius:8px;height:100%;left:0;position:absolute;top:0;width:100%;z-index:-1}.mode-name{color:#333;font-size:13px;transition:color .2s ease}.mode-option.active .mode-name{color:var(--primary-teal);font-weight:500}.mode-option.active .mode-icon{transform:scale(1.1)}.mode-tooltip{animation:fadeIn .2s forwards;background-color:#00a0a0e6;border-radius:6px;box-shadow:0 2px 8px #0003;color:#fff;font-size:12px;margin-top:10px;max-width:200px;opacity:0;padding:8px 12px;pointer-events:none;top:100%;white-space:nowrap;width:max-content;z-index:100}.mode-tooltip,.mode-tooltip:before{left:50%;position:absolute;transform:translateX(-50%)}.mode-tooltip:before{border:5px solid;border-color:#0000 #0000 #00a0a0e6;bottom:100%;content:""}@keyframes pulse{0%{box-shadow:0 0 0 0 #00a0a066}70%{box-shadow:0 0 0 6px #00a0a000}to{box-shadow:0 0 0 0 #00a0a000}}@media (max-width:600px){.mode-selector{gap:10px;padding:10px}.mode-option{min-width:65px;padding:8px}.mode-icon{height:40px;width:40px}.mode-name{font-size:12px}}@media (max-width:480px){.mode-selector{gap:8px;padding:8px}.mode-option{min-width:55px;padding:6px}.mode-icon-container{height:55px;width:55px}.mode-icon{height:42px;width:42px}.mode-name{font-size:12px;font-weight:500}.mode-tooltip{font-size:12px;max-width:180px;padding:8px 12px}}.more-icon{align-items:center;color:var(--primary-teal);display:flex;font-size:20px;font-weight:700;height:35px;justify-content:center;width:35px}@media (max-width:350px){.mode-selector{gap:4px;padding:5px}.mode-option{min-width:50px;padding:5px}.mode-icon-container{height:50px;width:50px}.mode-icon{height:40px;width:40px}.mode-name{font-size:11px;font-weight:500}}.help-button{align-items:center;background-color:var(--primary-teal);border:none;border-radius:50%;bottom:10px;box-shadow:0 2px 5px #0000001a;box-shadow:var(--button-shadow,0 2px 5px #0000001a);color:#fff;cursor:pointer;display:flex;font-size:24px;font-weight:700;height:40px;justify-content:center;left:10px;position:fixed;transition:all .2s ease;transition:var(--transition-standard,all .2s ease);width:40px;z-index:100}.help-button:hover{background-color:var(--primary-teal-dark);transform:scale(1.05)}@media (max-width:600px){.help-button{height:36px;width:36px}.help-button svg{height:20px;width:20px}}.info-modal-overlay{align-items:center;animation:fadeIn .3s ease;background-color:#0009;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.info-modal{animation:slideUp .3s ease;background-color:var(--neutral-bg);border:1px solid var(--neutral-border);border-radius:12px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;max-height:85vh;max-width:800px;overflow:hidden;position:relative;width:90%}.info-modal-actions{padding:8px;position:absolute;right:0;top:0;z-index:2000}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.info-modal-close{align-items:center;background-color:var(--primary-teal);border:none;border-radius:50%;box-shadow:0 3px 6px #0003;color:#fff;cursor:pointer;display:flex;font-size:1.5rem;font-weight:700;height:40px;justify-content:center;line-height:1;padding:0;position:fixed;right:10px;top:10px;transition:all .2s ease;width:40px;z-index:2500}.info-modal-close:hover{background-color:var(--primary-teal-dark);box-shadow:0 4px 8px #0000004d;transform:scale(1.05)}.info-modal-close:focus{outline:2px solid var(--primary-teal-light);outline-offset:2px}@media (max-width:350px){.info-modal-close{background-color:var(--primary-teal);box-shadow:0 2px 8px #0000004d;right:5px;top:5px}}.info-modal-header{background-color:var(--neutral-bg);padding:1.5rem 1.5rem 0;position:sticky;top:0;z-index:100}.info-modal-header h1{color:var(--primary-teal);font-size:1.6rem;font-weight:700;margin:0 0 1rem;text-align:center}.info-modal-tabs{background-color:var(--neutral-bg-light);border-bottom:1px solid var(--neutral-border-light);display:flex;position:relative;z-index:1}.info-modal-tab{background:#0000;border:none;color:var(--text-secondary);cursor:pointer;flex:1 1;font-family:Lato,sans-serif;font-size:.95rem;font-weight:500;padding:1rem;position:relative;transition:all .2s ease}.info-modal-tab:hover{background-color:var(--primary-teal-ultra-light);color:var(--primary-teal)}.info-modal-tab.active{color:var(--primary-teal);font-weight:600}.info-modal-tab.active:after{background-color:var(--primary-teal);bottom:-1px;content:"";height:2px;left:0;position:absolute;width:100%}.info-modal-content{flex:1 1;overflow-y:auto;padding:0}.info-modal-panel{animation:fadeIn .3s ease;display:none;padding:0 1.5rem 1.5rem}.info-modal-panel.active{display:block}.info-modal-panel h2{border-bottom:1px solid var(--primary-teal-light);color:var(--primary-teal);font-size:1.3rem;font-weight:600;margin:1.5rem 0 1rem;padding-bottom:.5rem}.info-modal-panel h3{color:var(--secondary-gold-dark);font-size:1.2rem;font-weight:600;margin:1.2rem 0 .7rem}.info-modal-panel p{font-size:1rem;line-height:1.6;margin:0 0 1rem}.info-section-list{margin:.8rem 0;padding-left:1.5rem}.info-section-list li{font-size:1rem;line-height:1.5;margin-bottom:.7rem}.info-steps{margin:1.5rem 0}.info-step{align-items:flex-start;display:flex;margin-bottom:1.5rem}.step-number{align-items:center;background:var(--primary-teal);border-radius:50%;box-shadow:0 2px 4px #0000001a;color:#fff;display:flex;flex-shrink:0;font-weight:700;height:2rem;justify-content:center;margin-right:1rem;width:2rem}.info-step h3{color:var(--secondary-gold-dark);font-size:1.1rem;font-weight:600;margin:0 0 .4rem}.info-step p{color:var(--text-secondary);font-size:.95rem;margin:0}.info-tip{align-items:flex-start;background:var(--primary-teal-ultra-light);border-left:3px solid var(--primary-teal);border-radius:6px;display:flex;margin-top:1.5rem;padding:1rem 1.2rem}.info-tip-icon{font-size:1.2rem;margin-right:.8rem}.info-tip p{font-size:.95rem;margin:0}.info-grid{grid-gap:1.2rem;display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin-top:1.5rem}.shortcuts-list{grid-gap:.8rem;display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));list-style-type:none;margin:1.5rem 0;padding-left:0}.shortcuts-list li{align-items:center;display:flex;font-size:.95rem}.key{align-items:center;background:var(--neutral-bg-light);border:1px solid var(--neutral-border);border-radius:4px;display:inline-flex;font-family:monospace;font-size:.9rem;font-weight:700;justify-content:center;margin-right:.8rem;min-width:1.2rem;padding:.2rem .5rem}.beat-types{display:flex;flex-wrap:wrap;gap:1.2rem;margin:1rem 0 2rem}.beat-type{align-items:center;display:flex;margin-right:1rem}.beat-indicator{border-radius:3px;height:1rem;margin-right:.5rem;width:1rem}.beat-indicator.muted{background-color:#e0e0e0;background-color:var(--beat-muted,#e0e0e0);border:1px solid #ddd}.beat-indicator.normal{background-color:#a0a0a0;background-color:var(--beat-normal,#a0a0a0);border:1px solid #ddd}.beat-indicator.accent{background-color:#fc4;background-color:var(--beat-accent,#fc4);border:1px solid #ddd}.beat-indicator.first{background-color:#f64;background-color:var(--beat-first,#f64);border:1px solid #ddd}.version-info{color:var(--text-secondary);font-size:.85rem;margin-top:2rem;text-align:center}.version-info a{color:var(--primary-teal);text-decoration:none}.version-info a:hover{text-decoration:underline}.info-feature{border-radius:6px;padding:1.2rem;transition:transform .2s ease,box-shadow .2s ease}.info-feature:hover{border-bottom-color:var(--primary-teal);box-shadow:0 3px 8px #00000014;transform:translateY(-2px)}.info-feature h3{color:var(--secondary-gold-dark);font-size:1.1rem;font-weight:600;margin:0 0 .6rem}.info-feature p{color:var(--text-secondary);font-size:.95rem;line-height:1.5;margin:0}@media (max-width:768px){.info-modal{max-height:90vh;width:95%}.info-modal-panel{padding:1.2rem}.info-modal-tab{font-size:.9rem;padding:.8rem .5rem}.info-modal-panel h2{font-size:1.3rem}.info-modal-panel h3{font-size:1.1rem}.info-feature{padding:1rem}.info-grid{grid-template-columns:1fr}}@media (max-width:480px){.info-modal{border-radius:0;height:100%;max-height:100%;width:100%}.info-modal-panel{padding:1rem}.info-modal-panel h2{font-size:1.2rem}.info-section-block{padding:1rem}.step-number{height:1.8rem;width:1.8rem}}
/*# sourceMappingURL=main.d67c3151.css.map*/