@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap";:root{--primary-bg: #0D1117;--surface-bg: rgba(22, 27, 34, .65);--subtle-bg: rgba(33, 38, 45, .5);--interactive-bg: rgba(13, 17, 23, .5);--primary-text: #e6edf3;--secondary-text: #a1aab4;--muted-text: #768390;--accent-primary: #00f5d4;--accent-primary-rgb: 0, 245, 212;--accent-secondary: #ffa726;--accent-success: #2ea043;--accent-warning: #ff9800;--accent-danger: #f85149;--border-color: rgba(255, 255, 255, .1);--border-strong: rgba(255, 255, 255, .2);--border-focus-glow: rgba(0, 245, 212, .5);--border-radius-sm: 10px;--border-radius-md: 8px;--border-radius-lg: 12px;--border-radius-xl: 16px;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: .85rem;--spacing-lg: 1.25rem;--spacing-xl: 1.75rem;--transition-fast: .15s ease-in-out;--transition-medium: .3s ease-in-out;--shadow-glass: 0 8px 32px rgba(0, 0, 0, .3);--graph-curve-primary: #00f5d4;--graph-curve-secondary: #ffa726;--graph-point-primary: #ffffff;--graph-point-active: #ffa726;--font-family-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}[data-theme=light]{--primary-bg: #E2E8F0;--surface-bg: #FFFFFF;--subtle-bg: #FFFFFF;--interactive-bg: #F8FAFC;--primary-text: #1E293B;--secondary-text: #475569;--muted-text: #64748B;--accent-primary: #4F46E5;--accent-primary-rgb: 79, 70, 229;--accent-secondary: #f97316;--border-color: #E2E8F0;--border-strong: #CBD5E1;--border-focus-glow: rgba(79, 70, 229, .5);--shadow-glass: 0 4px 12px rgba(0, 0, 0, .08);--graph-curve-primary: #4F46E5;--graph-curve-secondary: #f97316;--graph-point-primary: var(--secondary-text);--graph-point-active: #4F46E5}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth}body{font-family:var(--font-family-primary);background:var(--primary-bg);color:var(--primary-text);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}.app-container{max-width:1600px;width:100%;margin:0 auto;display:flex;flex-direction:column;min-height:100vh}.app-header{flex-shrink:0;display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md);border-bottom:1px solid var(--border-color);background-color:var(--surface-bg)}.main-content{flex:1;display:flex;flex-direction:column;gap:var(--spacing-lg);padding:var(--spacing-lg) var(--spacing-md);min-height:0}.app-footer{flex-shrink:0;padding:var(--spacing-lg) var(--spacing-md);display:grid;grid-template-columns:1fr;gap:var(--spacing-lg);place-items:center;border-top:1px solid var(--border-color);background-color:var(--surface-bg);border-radius:var(--border-radius-xl) var(--border-radius-xl) 0 0;box-shadow:var(--shadow-glass)}.controls-panel{position:relative;flex-shrink:0;padding:var(--spacing-sm);transition:opacity var(--transition-medium),filter var(--transition-medium);border-radius:var(--border-radius-xl);border:1px solid var(--border-color);background-color:var(--surface-bg);box-shadow:var(--shadow-glass);will-change:opacity,filter}.controls-panel:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-color:#161b22d9;border-radius:inherit;opacity:0;pointer-events:none;transition:opacity var(--transition-medium);z-index:10}[data-theme=light] .controls-panel:before{background-color:#f1f5f9d9}.controls-panel.disabled{pointer-events:none}.controls-panel.disabled:before{opacity:1}.graph-container{flex:1;min-height:500px;max-height:50vh;position:relative;border-radius:var(--border-radius-xl);overflow:hidden;border:1px solid var(--border-color);background:var(--subtle-bg);cursor:crosshair}.graph-canvas-stack{position:absolute;top:0;left:0;width:100%;height:100%}.graph-canvas-stack canvas{position:absolute;top:0;left:0;width:100%!important;height:100%!important}#graph-curve-canvas{pointer-events:none}.graph-indicator{position:absolute;display:none;pointer-events:none;will-change:transform}#graph-indicator-line{left:0;width:1.5px;background-color:var(--graph-point-active);background-image:linear-gradient(var(--graph-point-active) 50%,transparent 50%);background-size:1.5px 10px;background-repeat:repeat-y}#graph-active-point{width:10px;height:10px;background-color:var(--graph-point-active);border-radius:50%;margin:-5px 0 0 -5px}.app-title{font-size:clamp(1.5rem,4vw + 1rem,2.2rem);font-weight:800;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0}.header-controls{display:flex;align-items:center;gap:var(--spacing-sm)}.language-btn,.theme-btn,#info-btn{background:var(--subtle-bg);border:1px solid var(--border-color);border-radius:var(--border-radius-md);padding:var(--spacing-sm);color:var(--primary-text);cursor:pointer;transition:var(--transition-medium);font-size:1.1rem;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs)}.language-btn:hover,.theme-btn:hover,#info-btn:hover{border-color:var(--border-strong);background-color:var(--interactive-bg)}.language-text{font-size:.85rem;font-weight:600}.controls-panel::-webkit-scrollbar{width:8px}.controls-panel::-webkit-scrollbar-track{background:transparent}.controls-panel::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:var(--border-radius-lg);border:2px solid transparent;background-clip:content-box}.controls-panel::-webkit-scrollbar-thumb:hover{background:var(--accent-primary)}.control-section{padding:var(--spacing-md);border-top:1px solid var(--border-color)}.control-section:first-child{border-top:none}.control-group{margin-bottom:var(--spacing-lg)}.control-label{display:block;font-weight:600;color:var(--accent-primary);margin-bottom:var(--spacing-sm);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}.control-input,.control-select{width:100%;padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--border-color);border-radius:var(--border-radius-md);background-color:var(--interactive-bg);color:var(--primary-text);font-family:var(--font-family-primary);font-size:.95rem;font-weight:500;transition:all var(--transition-fast);outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.control-input:focus,.control-select:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--border-focus-glow)}.control-select{padding-right:2.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23a1aab4' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708 .708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;background-size:auto}.control-select option{background-color:var(--primary-bg);color:var(--primary-text)}.control-grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-md)}@media (min-width: 480px){.control-grid{grid-template-columns:1fr 1fr}}.custom-only{display:none}.custom-tempo-controls{display:flex;flex-direction:column;gap:var(--spacing-sm)}.tempo-point{display:flex;align-items:center;gap:var(--spacing-sm)}.tempo-point-remove{background:none;border:none;color:var(--muted-text);font-size:1.5rem;cursor:pointer;transition:color var(--transition-fast)}.tempo-point-remove:hover:not(:disabled){color:var(--accent-danger)}.tempo-point-remove:disabled{opacity:.3;cursor:not-allowed}.volume-display,.swing-display,.accent-level-display{display:inline-block;font-weight:600;color:var(--accent-primary);min-width:40px;font-size:.85rem;text-align:right}.control-range{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;background:var(--interactive-bg);border-radius:var(--border-radius-sm);outline:none}.control-range::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:22px;height:22px;background:var(--accent-primary);cursor:pointer;border-radius:50%;border:4px solid var(--surface-bg);transition:transform var(--transition-fast)}.control-range:hover::-webkit-slider-thumb{transform:scale(1.1)}.control-range::-moz-range-thumb{width:22px;height:22px;background:var(--accent-primary);cursor:pointer;border-radius:50%;border:4px solid var(--surface-bg)}.range-container{display:flex;align-items:center;gap:var(--spacing-sm)}.checkbox-controls{display:flex;flex-direction:column;gap:var(--spacing-md);margin-top:var(--spacing-lg)}.checkbox-label{display:inline-flex;min-height:44px;align-items:center;cursor:pointer;gap:var(--spacing-md);padding:var(--spacing-sm) 0}.checkbox-input{display:none}.checkbox-custom{width:24px;height:24px;background:var(--interactive-bg);border:1px solid var(--border-color);border-radius:var(--border-radius-md);position:relative;transition:var(--transition-fast);flex-shrink:0}.checkbox-custom:after{content:"";position:absolute;display:none;left:8px;top:4px;width:5px;height:10px;border:solid var(--primary-bg);border-width:0 3px 3px 0;transform:rotate(45deg)}.checkbox-input:checked+.checkbox-custom{background:var(--accent-primary);border-color:var(--accent-primary)}.checkbox-input:checked+.checkbox-custom:after{display:block}.checkbox-text{font-weight:500;-webkit-user-select:none;user-select:none;font-size:.95rem}.accent-pattern-container{display:flex;flex-direction:column;gap:var(--spacing-md)}.accent-buttons{display:flex;flex-wrap:wrap;gap:var(--spacing-sm)}.accent-btn{background:var(--interactive-bg);border:1px solid var(--border-color);color:var(--secondary-text);border-radius:var(--border-radius-md);padding:var(--spacing-sm);min-width:40px;cursor:pointer;transition:all var(--transition-fast);display:none;align-items:center;justify-content:center}.accent-btn.accented{background:var(--accent-primary);color:#000;font-weight:700;border-color:var(--accent-primary)}.accent-btn.strong-beat-default{border-style:dashed}.accent-btn:hover{border-color:var(--border-strong)}.accent-controls{display:flex;flex-direction:column;gap:var(--spacing-lg)}.time-signature-info{background:var(--subtle-bg);padding:var(--spacing-md);border-radius:var(--border-radius-md);margin-top:var(--spacing-lg);border-left:3px solid var(--accent-secondary)}.time-signature-header{font-weight:700;font-size:1.05rem;padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--border-color);margin-bottom:var(--spacing-sm)}.time-signature-details{display:flex;flex-direction:column;gap:var(--spacing-xs)}.time-signature-detail{display:flex;justify-content:space-between;align-items:baseline;font-size:.9rem}.time-signature-detail .detail-label{color:var(--muted-text)}.time-signature-detail .detail-value{color:var(--primary-text);font-weight:600}.swing-controls{border-top:1px solid var(--border-color);padding-top:var(--spacing-lg);margin-top:var(--spacing-lg)}.swing-info{margin-top:var(--spacing-sm);color:var(--muted-text);text-align:center;font-size:.8rem;line-height:1.4}.program-description{background:var(--subtle-bg);border:1px solid var(--border-color);border-left:4px solid var(--accent-primary);border-radius:var(--border-radius-md);padding:var(--spacing-md);color:var(--secondary-text);line-height:1.5;font-size:.9rem;margin-top:var(--spacing-lg)}.program-description strong{color:var(--accent-primary)}.graph-tooltip{position:absolute;background-color:var(--surface-bg);color:var(--primary-text);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius-md);font-size:.9rem;pointer-events:none;z-index:10;opacity:0;transform:translateY(10px);transition:opacity var(--transition-fast),transform var(--transition-fast);border:1px solid var(--border-color);box-shadow:var(--shadow-glass)}.graph-tooltip.show{opacity:1;transform:translateY(0)}.graph-tooltip .tooltip-bpm{font-weight:600;color:var(--accent-primary)}.graph-tooltip .tooltip-step{font-size:.85em;color:var(--secondary-text)}.graph-tooltip .tooltip-hint{font-size:.75em;color:var(--secondary-text);opacity:.9;margin-top:4px}.metronome-display{width:150px;height:150px;position:relative;flex-shrink:0}.metronome-circle{width:100%;height:100%;border-radius:50%;background:var(--interactive-bg);border:2px solid var(--border-color);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.current-tempo .tempo-value{font-size:2.8rem;font-weight:800;color:var(--accent-primary);line-height:1}.current-tempo .tempo-unit{font-size:1rem;font-weight:600;color:var(--secondary-text)}.step-info{font-size:1rem;font-weight:500;color:var(--secondary-text);margin-top:var(--spacing-xs);min-height:1.2em}.cockpit-center{width:100%;display:flex;flex-direction:column;gap:var(--spacing-lg);align-items:center;min-width:0}.status-panel{width:100%;padding-top:var(--spacing-sm)}.progress-bar{width:100%;height:25px;background:var(--interactive-bg);border-radius:var(--border-radius-sm);overflow:hidden;margin-bottom:var(--spacing-sm)}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary));width:0%;transition:width var(--transition-medium);border-radius:var(--border-radius-sm)}.progress-text{font-size:.9rem;color:var(--secondary-text);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.beat-indicators{display:flex;flex-direction:row;gap:var(--spacing-md);width:100%;padding-bottom:var(--spacing-sm);flex-wrap:wrap;justify-content:center;min-height:52px}.beat-group{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs)}.beat-group-label{font-size:.7rem;color:var(--muted-text);white-space:nowrap}.beat-group-indicators{display:flex;gap:var(--spacing-sm);width:100%;justify-content:center}.beat-indicator{flex:1 1 0;aspect-ratio:1 / 1;min-width:32px;max-width:50px;border-radius:50%;background:var(--interactive-bg);transition:all var(--transition-fast);border:2px solid transparent;box-shadow:inset 0 1px 3px #0000004d}.beat-indicator.active.strong{background:var(--accent-primary);transform:scale(1.1);box-shadow:0 0 15px rgba(var(--accent-primary-rgb),.7);border-color:#fff}.beat-indicator.active.weak{background:var(--accent-secondary);transform:scale(1.05)}.beat-indicator.active.subdivision{background:var(--secondary-text);transform:scale(.9)}.playback-controls{display:grid;gap:var(--spacing-md);width:100%;max-width:360px}.primary-actions,.secondary-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md)}.control-btn{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-sm);border:1px solid var(--border-color);border-radius:var(--border-radius-lg);font-size:.9rem;font-weight:700;cursor:pointer;transition:all var(--transition-fast);text-transform:uppercase;min-height:48px;background:var(--subtle-bg);color:var(--primary-text)}.control-btn .btn-icon{font-size:1.1rem}.control-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-glass);border-color:var(--border-strong)}.control-btn.primary{background:var(--accent-primary);color:#000;border-color:transparent}.control-btn.secondary{background:var(--accent-danger);color:#fff;border-color:transparent}.control-btn.tertiary{background:var(--accent-secondary);color:#000;border-color:transparent}.control-btn.quaternary{background:var(--interactive-bg)}.control-btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important;background:var(--interactive-bg)!important;color:var(--muted-text)!important;border-color:var(--border-color)!important;box-shadow:none!important}@media (min-width: 641px){.main-content{display:grid;grid-template-columns:minmax(280px,1fr) 2fr;flex-direction:row}.graph-container{max-height:70vh}.app-footer{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"display center controls";align-items:center;gap:var(--spacing-md);place-items:initial}.metronome-display{grid-area:display;justify-self:start}.cockpit-center{grid-area:center;min-width:0}.playback-controls{grid-area:controls;justify-self:end;display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-sm)}.primary-actions,.secondary-actions{display:contents}}@media (min-width: 1024px){.app-container{display:grid;grid-template-rows:auto 1fr auto;height:100vh;padding:0 var(--spacing-md)}.app-header,.app-footer{padding-left:var(--spacing-lg);padding-right:var(--spacing-lg)}.app-footer{margin-bottom:var(--spacing-lg);padding-top:var(--spacing-md);padding-bottom:var(--spacing-md)}main.main-content{display:flex;padding:var(--spacing-lg) 0;overflow:hidden;height:100%;min-height:initial;gap:var(--spacing-lg)}.controls-panel{flex:0 0 420px;overflow-y:auto;padding-right:var(--spacing-lg)}.graph-container{flex:1;min-height:0;max-height:none}.metronome-display{width:110px;height:110px}.current-tempo .tempo-value{font-size:2.2rem}.current-tempo .tempo-unit{font-size:.9rem}.beat-indicators{min-height:auto}.beat-group-indicators{gap:var(--spacing-xs)}.beat-indicator{min-width:24px;max-width:36px}.playback-controls{align-self:center;display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-sm)}.primary-actions,.secondary-actions{display:contents}.secondary-actions .control-btn span:not(.btn-icon){display:inline}}button:focus-visible,input:focus-visible,select:focus-visible,.checkbox-label:focus-within .checkbox-custom{outline:3px solid var(--accent-secondary);outline-offset:2px}.advanced-controls-toggle{margin:var(--spacing-md) var(--spacing-md) 0}.advanced-controls-toggle button{width:100%}.advanced-hidden{display:none}.loading-screen,.dialog-modal,.info-modal,.visual-flash-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999}.loading-screen{background:var(--primary-bg);display:flex;align-items:center;justify-content:center;flex-direction:column;transition:opacity .4s ease}.loading-screen.hidden{opacity:0;pointer-events:none}.loading-spinner{width:50px;height:50px;border:3px solid var(--border-color);border-top:3px solid var(--accent-primary);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:var(--spacing-md)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.dialog-modal,.info-modal{background:rgba(0,0,0,.7);opacity:0;pointer-events:none;transition:opacity var(--transition-medium);display:flex;align-items:center;justify-content:center;padding:var(--spacing-md)}.dialog-modal.show,.info-modal.show{opacity:1;pointer-events:all}.dialog-content,.info-modal-content-wrapper{background:var(--surface-bg);border:1px solid var(--border-color);border-radius:var(--border-radius-xl);transform:scale(.95);transition:transform var(--transition-medium);position:relative;max-width:95vw;box-shadow:var(--shadow-glass)}.dialog-modal.show .dialog-content,.info-modal.show .info-modal-content-wrapper{transform:scale(1)}.dialog-content{max-width:420px;width:100%;padding:var(--spacing-lg)}.info-modal-content-wrapper{max-width:800px;width:100%;max-height:90vh;display:flex;flex-direction:column}.dialog-header,.info-modal-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-color);padding-bottom:var(--spacing-md);flex-shrink:0}.dialog-header{margin-bottom:var(--spacing-md)}.info-modal-header{padding:var(--spacing-lg)}#dialog-title{font-size:1.4rem;font-weight:700}.info-modal-header h2{color:var(--accent-primary);font-size:1.5rem;font-weight:700}.dialog-message{color:var(--secondary-text);margin-bottom:var(--spacing-lg);line-height:1.6;font-size:1rem}.dialog-close,.info-modal-close{background:var(--subtle-bg);color:var(--primary-text);border:1px solid var(--border-color);border-radius:50%;cursor:pointer;transition:all var(--transition-fast);font-size:1.5rem;width:38px;height:38px;min-width:38px;min-height:38px;display:flex;align-items:center;justify-content:center;line-height:1}.dialog-close:hover,.info-modal-close:hover{transform:scale(1.1) rotate(90deg);background-color:var(--interactive-bg)}.dialog-modal.is-error #dialog-title{color:var(--accent-danger)}.dialog-modal.is-error .dialog-close:hover{background:var(--accent-danger);color:#fff}.dialog-modal.is-success #dialog-title{color:var(--accent-success)}.dialog-modal.is-success .dialog-close:hover{background:var(--accent-success);color:#fff}.info-modal-body{padding:var(--spacing-xl);overflow-y:auto;color:var(--secondary-text)}.info-modal-body h3{font-size:1.25rem;color:var(--primary-text);border-bottom:2px solid var(--accent-secondary);padding-bottom:var(--spacing-sm);margin-top:var(--spacing-xl);margin-bottom:var(--spacing-md)}.info-modal-body h3:first-child{margin-top:0}.info-modal-body p,.info-modal-body ul{margin-bottom:var(--spacing-lg);line-height:1.7}.info-modal-body ul{list-style-position:inside;padding-left:var(--spacing-sm)}.info-modal-body li{margin-bottom:var(--spacing-sm)}.info-modal-body strong{color:var(--primary-text);font-weight:600}.program-detail{background:var(--subtle-bg);padding:var(--spacing-lg);border-radius:var(--border-radius-lg);margin-bottom:var(--spacing-lg);border-left:4px solid var(--accent-primary)}.program-detail h4{font-size:1.1rem;color:var(--accent-primary);margin:0 0 var(--spacing-sm) 0}.program-detail p{margin:0;font-size:.95rem;color:var(--secondary-text)}.visual-flash-overlay{pointer-events:none;opacity:0}.visual-flash-overlay.strong{background:radial-gradient(circle,var(--accent-primary) 0%,transparent 70%)}.visual-flash-overlay.weak{background:radial-gradient(circle,var(--accent-secondary) 0%,transparent 70%)}