:root{--piano-bg: #ffffff;--piano-surface: #f8fafc;--piano-surface-hover: #f1f5f9;--piano-border: #e2e8f0;--piano-border-strong: #cbd5e1;--piano-text: #1e293b;--piano-text-secondary: #64748b;--piano-text-muted: #94a3b8;--piano-primary: #7c3aed;--piano-primary-hover: #6d28d9;--piano-primary-light: rgba(124, 58, 237, .08);--piano-primary-muted: rgba(124, 58, 237, .2);--piano-success: #10b981;--piano-success-light: #dcfce7;--piano-success-text: #16a34a;--piano-warning: #f59e0b;--piano-warning-light: #fefce8;--piano-danger: #ef4444;--piano-danger-light: #fef2f2;--piano-info: #3b82f6;--sp-0: 0px;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 20px;--sp-6: 24px;--sp-8: 32px;--sp-10: 40px;--sp-12: 48px;--text-xs: .6875rem;--text-sm: .75rem;--text-base: .8125rem;--text-md: .875rem;--text-lg: 1rem;--text-xl: 1.125rem;--weight-regular: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 12px;--radius-full: 9999px;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .05);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);--shadow-md: 0 2px 8px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .06);--shadow-xl: 0 20px 48px rgba(0, 0, 0, .16);--transition-fast: .1s ease;--transition-normal: .15s ease;--transition-slow: .2s ease;--theme-primary: var(--piano-primary);--theme-primary-hover: var(--piano-primary-hover);--theme-accent: var(--piano-info);--theme-bg: var(--piano-bg);--theme-surface: #ffffff;--theme-surface-elevated: var(--piano-surface);--theme-text: var(--piano-text);--theme-text-secondary: var(--piano-text-secondary);--theme-text-muted: var(--piano-text-muted);--theme-border: var(--piano-border);--theme-border-strong: var(--piano-border-strong);--theme-focus-ring: 0 0 0 2px rgba(124, 58, 237, .14);--theme-shadow-sm: var(--shadow-sm);--theme-shadow-lg: var(--shadow-lg);--theme-radius-sm: var(--radius-md);--theme-radius-md: var(--radius-lg);--theme-radius-lg: var(--radius-xl);--control-height-compact: 32px;--control-height-comfortable: 38px;--control-height-touch: 44px;--control-height: var(--control-height-comfortable);--control-radius: var(--theme-radius-sm);--radius: var(--radius-lg)}body{display:block!important;align-items:stretch!important;justify-content:stretch!important;background:var(--piano-bg)!important;background-image:none!important;min-height:100vh;margin:0;overflow-x:hidden;font-family:Roboto,system-ui,sans-serif;color:var(--piano-text)}#root{width:100%;min-width:100%;max-width:100%;min-height:100vh;display:flex;flex-direction:column}.piano-app{display:flex;flex-direction:column;height:100vh;min-height:100vh;background:var(--piano-bg);color:var(--piano-text);font-family:Roboto,system-ui,sans-serif}@supports (height: 100dvh){.piano-app{height:100dvh;min-height:100dvh}}.piano-header{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-5);border-bottom:1px solid var(--piano-border);background:var(--piano-surface);flex-shrink:0}.piano-header h1{font-size:var(--text-xl);font-weight:var(--weight-semibold);margin:0;white-space:nowrap}.piano-header-load-actions{display:inline-flex;align-items:center;gap:var(--sp-2)}.piano-header-icon-btn{width:34px;height:34px;border-radius:var(--radius-md);border:1px solid var(--piano-border);background:#fff;color:var(--piano-text-secondary);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color var(--transition-fast),color var(--transition-fast),background var(--transition-fast)}.piano-header-icon-btn:hover{border-color:var(--piano-primary);color:var(--piano-primary);background:color-mix(in srgb,var(--piano-primary) 8%,white)}.piano-header-icon-btn .material-symbols-outlined{font-size:18px;line-height:1}.header-spacer{flex:1}.header-midi{display:flex;align-items:center;gap:var(--sp-2);flex-shrink:0}.piano-layout{display:flex;flex:1;overflow:hidden}.main-content{flex:1;overflow-y:auto;display:flex;flex-direction:column}.sidebar{width:360px;min-width:360px;max-width:360px;border-left:1px solid var(--piano-border);background:var(--piano-surface);overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column}.score-container{flex:1;padding:var(--sp-4);overflow-x:auto;position:relative}.score-display{min-height:200px;overflow:hidden}.btn{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border:1px solid var(--piano-border);border-radius:var(--radius-lg);background:var(--piano-surface);color:var(--piano-text);font-family:inherit;font-size:var(--text-md);font-weight:var(--weight-medium);cursor:pointer;transition:all var(--transition-normal)}.btn:hover{background:var(--piano-surface-hover)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.active,.btn.btn-primary{background:var(--piano-primary);color:#fff;border-color:var(--piano-primary)}.btn-small{padding:var(--sp-1) var(--sp-2);font-size:var(--text-base)}.btn-primary{background:var(--piano-primary);color:#fff;border-color:var(--piano-primary)}.btn-primary:hover{background:var(--piano-primary-hover)}.btn-link{background:none;border:none;color:var(--piano-primary);font-size:var(--text-sm);cursor:pointer;text-decoration:underline;font-family:inherit;padding:0}.muted{opacity:.5}.metronome-btn{display:flex;align-items:center;justify-content:center;gap:4px;min-width:36px;height:36px;padding:0 8px;border:1px solid var(--piano-border);border-radius:var(--radius-lg);background:var(--piano-surface);color:var(--piano-text-secondary);cursor:pointer;transition:all var(--transition-normal);flex-shrink:0}.metronome-btn:hover{background:var(--piano-surface-hover);color:var(--piano-text)}.metronome-btn.active{background:var(--piano-primary);color:#fff;border-color:var(--piano-primary)}.metronome-btn .material-symbols-outlined{font-size:20px}.metronome-btn .metronome-on-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.02em}.zoom-controls{display:flex;align-items:center;gap:2px;flex-shrink:0}.zoom-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--piano-border);border-radius:var(--radius-lg);background:var(--piano-surface);color:var(--piano-text);cursor:pointer;padding:0;transition:background var(--transition-normal)}.zoom-btn:hover:not(:disabled){background:var(--piano-surface-hover)}.zoom-btn:disabled{opacity:.4;cursor:not-allowed}.zoom-btn .material-symbols-outlined{font-size:16px}.zoom-level{font-size:var(--text-base);font-weight:var(--weight-medium);color:var(--piano-text-secondary);min-width:var(--sp-10);text-align:center}.zoom-level-btn{background:none;border:1px solid transparent;border-radius:var(--radius-sm);font-size:var(--text-base);font-weight:var(--weight-medium);color:var(--piano-text-secondary);min-width:var(--sp-10);text-align:center;cursor:pointer;padding:2px var(--sp-1)}.zoom-level-btn:hover:not(:disabled){background:var(--piano-surface-hover);border-color:var(--piano-border)}.zoom-level-btn:disabled{cursor:default}.toolbar-spacer{flex:1}.selection-info{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) var(--sp-3);background:var(--piano-primary-light);border:1px solid var(--piano-primary-muted);border-radius:var(--radius-lg);font-size:var(--text-base);color:var(--piano-primary);font-weight:var(--weight-medium)}.zoom-selection-info{margin-left:var(--sp-2);max-width:min(52vw,520px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clear-selection-btn,.selection-jump-btn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:none;background:transparent;color:var(--piano-primary);cursor:pointer;padding:0;border-radius:var(--radius-full);transition:background var(--transition-normal)}.selection-jump-btn:hover{background:#7c3aed26}.selection-jump-btn .material-symbols-outlined{font-size:13px}.clear-selection-btn:hover{background:#7c3aed26}.clear-selection-btn .material-symbols-outlined{font-size:14px}@media(max-width:980px){.np-toolbar-center{order:10;width:100%;justify-content:flex-start;min-width:0}.np-active-section-banner{max-width:100%;overflow:hidden;text-overflow:ellipsis}.zoom-selection-info{max-width:min(46vw,360px)}}.empty-score{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--sp-12) var(--sp-5);color:var(--piano-text-secondary)}.sidebar-playback{padding:var(--sp-4);border-bottom:1px solid var(--piano-border)}.sb-section-title{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--piano-text-secondary);text-transform:uppercase;letter-spacing:.05em}.sb-section-toggle{display:flex;align-items:center;gap:2px;background:none;border:none;cursor:pointer;padding:0;margin-bottom:var(--sp-2);width:100%}.sb-section-toggle:hover .sb-section-title{color:var(--piano-text)}.sb-toggle-arrow{font-size:18px;color:var(--piano-text-secondary);transition:transform var(--transition-normal)}.sb-mode-buttons{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-3)}.sb-mode-btn{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);flex:1;padding:var(--sp-3) var(--sp-1) var(--sp-2);border:1px solid var(--piano-border);border-radius:var(--radius-lg);background:#fff;color:var(--piano-text-secondary);cursor:pointer;transition:all var(--transition-normal);font-family:inherit}.sb-mode-btn.practice-primary{background:var(--piano-primary);color:#fff;border-color:var(--piano-primary);font-weight:var(--weight-semibold)}.sb-mode-btn.practice-primary:hover:not(:disabled){background:var(--piano-primary-hover);border-color:var(--piano-primary-hover);color:#fff}.sb-mode-btn.practice-primary .material-symbols-outlined{font-variation-settings:"FILL" 1}.sb-mode-btn:hover:not(:disabled){border-color:var(--piano-primary);color:var(--piano-primary)}.sb-mode-btn:disabled{opacity:.4;cursor:not-allowed}.sb-mode-btn .material-symbols-outlined{font-size:22px}.sb-mode-label{font-size:var(--text-xs);font-weight:var(--weight-medium)}.sb-mode-btn.active.practice{background:var(--piano-primary);color:#fff;border-color:var(--piano-primary)}.sb-mode-btn.active.free-practice{background:var(--piano-success);color:#fff;border-color:var(--piano-success)}.sb-mode-btn.active.play{background:var(--piano-info);color:#fff;border-color:var(--piano-info)}.sb-play-row{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3)}.sb-icon-row{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3)}.sb-tempo{display:flex;align-items:center;gap:var(--sp-2);flex:1;flex-wrap:wrap}.sb-label{display:inline-flex;align-items:center;min-height:38px;font-size:var(--text-sm);color:var(--piano-text-secondary);font-weight:var(--weight-medium);white-space:nowrap}.sb-tempo-input{width:60px;padding:var(--sp-1) var(--sp-2);border:1px solid var(--piano-border);border-radius:var(--radius-sm);font-family:inherit;font-size:var(--text-md);text-align:center}.sb-tempo-input:disabled{opacity:.5;background:var(--piano-surface)}.sb-tempo-adj{padding:0 var(--sp-2);font-size:var(--text-sm);font-weight:var(--weight-bold);min-width:36px;height:36px;text-align:center;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--piano-border);border-radius:var(--radius-md);background:#fff}.sb-tempo-adj:hover:not(:disabled){border-color:var(--piano-primary);color:var(--piano-primary)}.sb-tempo-adj:disabled{opacity:.3}.sb-shared-bpm-input{flex:0 1 min(100%,236px);width:min(100%,236px);min-width:164px;--bpm-stepper-min-width: 5.2rem;--bpm-value-padding: 0 .24rem 0 .4rem;--bpm-shell-height: 38px;--bpm-shell-radius: 12px;--bpm-bg: white;--bpm-border: var(--piano-border-strong);--bpm-text: var(--piano-text);--bpm-muted: var(--piano-text-secondary);--bpm-focus: var(--piano-primary);--bpm-dropdown-bg: white;--bpm-dropdown-border: var(--piano-border);--bpm-dropdown-header-bg: var(--piano-surface);--bpm-dropdown-header-border: var(--piano-border);--bpm-dropdown-hover-bg: color-mix(in srgb, var(--piano-primary) 10%, white);--bpm-dropdown-active-bg: color-mix(in srgb, var(--piano-primary) 16%, white);--bpm-dropdown-active-text: var(--piano-primary)}.sb-shared-bpm-input .shared-bpm-shell{width:100%}.sb-shared-bpm-input .shared-bpm-inline-action{color:var(--piano-text-secondary)}.sb-shared-bpm-input .shared-bpm-inline-action:hover:not(:disabled){color:var(--piano-primary)}.sb-shared-bpm-input .sb-tempo-reset-btn{width:28px;min-width:28px;flex:0 0 28px;box-sizing:border-box;margin:0;padding:0;border-left:0;border-radius:0;color:color-mix(in srgb,var(--piano-text-secondary) 80%,var(--piano-text-muted));transition:background-color var(--transition-fast),color var(--transition-fast),opacity var(--transition-fast)}.sb-shared-bpm-input .sb-tempo-reset-btn .material-symbols-outlined{font-size:18px;line-height:1}.sb-shared-bpm-input .sb-tempo-reset-btn:hover:not(:disabled){color:var(--piano-primary);background:color-mix(in srgb,var(--piano-primary) 10%,transparent)}.sb-shared-bpm-input .sb-tempo-reset-btn:disabled{opacity:.5;color:var(--piano-text-muted)}.sb-shared-bpm-input .shared-bpm-trailing-actions{width:32px;min-width:32px;justify-content:center;padding:0;gap:0}.piano-bpm-slider{--app-slider-track: var(--piano-primary);--app-slider-rail: color-mix(in srgb, var(--piano-border) 75%, transparent);--app-slider-mark: color-mix(in srgb, var(--piano-border) 80%, transparent)}.piano-bpm-dropdown .shared-bpm-presets-label{color:var(--piano-text-secondary);font-weight:var(--weight-semibold);letter-spacing:.04em}.piano-bpm-dropdown .shared-bpm-preset-chip{border-color:color-mix(in srgb,var(--piano-border) 80%,transparent);background:color-mix(in srgb,#ffffff 95%,var(--piano-surface));color:var(--piano-text);font-weight:var(--weight-semibold)}.piano-bpm-dropdown .shared-bpm-preset-chip:hover{border-color:color-mix(in srgb,var(--piano-primary) 42%,var(--piano-border));background:color-mix(in srgb,var(--piano-primary) 10%,#ffffff);color:var(--piano-primary)}.piano-bpm-dropdown .shared-bpm-preset-chip.active{border-color:var(--piano-primary);background:color-mix(in srgb,var(--piano-primary) 14%,#ffffff);color:var(--piano-primary);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--piano-primary) 26%,transparent)}.sb-tempo-override-notice{width:100%;flex-basis:100%;display:inline-flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-top:var(--sp-1);font-size:var(--text-xs);color:var(--piano-text-secondary)}.sb-tempo-save-btn{border:1px solid var(--piano-border);background:#fff;color:var(--piano-primary);border-radius:var(--radius-sm);padding:2px 8px;font-size:var(--text-xs);font-weight:var(--weight-semibold);cursor:pointer}.sb-tempo-save-btn:hover{border-color:var(--piano-primary)}.sb-row{margin-bottom:var(--sp-3)}.sb-full{width:100%}.sound-select{padding:var(--sp-2) var(--sp-2);border:1px solid var(--piano-border);border-radius:var(--radius-sm);font-family:inherit;font-size:var(--text-base);background:#fff}.sound-select:disabled{opacity:.5;background:var(--piano-surface)}.sb-tracks{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-3)}.track-control{display:flex;align-items:center;gap:var(--sp-2)}.track-control.muted{opacity:.5}.track-label{font-size:var(--text-sm);color:var(--piano-text-secondary);min-width:var(--sp-10)}.volume-slider{flex:1;--app-slider-track: var(--piano-primary);--app-slider-rail: var(--piano-border)}.volume-slider.disabled-slider{opacity:.3;pointer-events:none}.loading-bar{height:3px;background:var(--piano-border);border-radius:2px;margin-bottom:var(--sp-3);overflow:hidden}.loading-fill{height:100%;background:var(--piano-primary);transition:width .3s}.sb-counting-in{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-3);background:var(--piano-warning-light);border-radius:var(--radius-lg);font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--piano-warning)}.sb-counting-icon{font-size:18px!important;animation:pulse-icon .6s ease-in-out infinite}@keyframes pulse-icon{0%,to{opacity:1}50%{opacity:.4}}.sb-live-stats{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-3);background:var(--piano-primary-light);border-radius:var(--radius-lg)}.sb-live-label{font-size:var(--text-base);font-weight:var(--weight-medium);color:var(--piano-text-secondary)}.sb-live-accuracy{font-size:var(--text-md);font-weight:var(--weight-bold);color:var(--piano-primary)}.sb-settings-dropdown{width:340px;background:#fff;border:1px solid var(--piano-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--sp-3) 0;animation:settings-in .12s ease-out}@keyframes settings-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.sb-settings-section{padding:var(--sp-2) var(--sp-4)}.sb-settings-divider{height:1px;background:var(--piano-border);margin:var(--sp-1) 0}.sb-settings-row{display:flex;align-items:center;gap:var(--sp-2);min-height:var(--sp-8)}.sb-settings-row .btn-small{padding:var(--sp-1);flex-shrink:0}.sb-settings-label{font-size:var(--text-base);color:var(--piano-text-secondary);font-weight:var(--weight-medium);white-space:nowrap;min-width:90px}.sb-settings-row .volume-slider{flex:1}.sb-options-section{padding-top:var(--sp-3);border-top:1px solid var(--piano-border)}.sb-checkbox{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--text-base);color:var(--piano-text-secondary);cursor:pointer}.sb-checkbox input{margin:0}.sb-hand-selection{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-2)}.sb-systems-grid{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-2)}.sb-system-row{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:var(--sp-2);min-height:28px}.sb-system-row.sb-system-header{min-height:20px;margin-bottom:2px}.sb-col-header{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--piano-text-secondary);text-transform:uppercase;letter-spacing:.04em;text-align:center;min-width:46px}.sb-system-label{display:flex;align-items:center;gap:var(--sp-1);font-size:var(--text-base);font-weight:var(--weight-medium);color:var(--piano-text)}.sb-help-icon{font-size:14px!important;color:var(--piano-text-secondary);cursor:help;opacity:.6}.sb-help-icon:hover{opacity:1;color:var(--piano-primary)}.sb-toggle-label{display:flex;align-items:center;justify-content:center;gap:var(--sp-1);font-size:var(--text-sm);color:var(--piano-text-secondary);cursor:pointer;white-space:nowrap;min-width:46px}.sb-toggle-label input{margin:0}.sb-toggle-label input:disabled+span{opacity:.4}.note-input{border-bottom:1px solid var(--piano-border);padding:var(--sp-2) var(--sp-4)}.input-toolbar{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;width:100%}.ni-icon-btn{width:34px;height:34px;min-width:34px;padding:0;gap:0;justify-content:center}.ni-icon-btn .material-symbols-outlined{font-size:18px}.np-sections-menu-wrap{position:relative}.np-sections-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:1200;min-width:270px;max-width:360px;background:#fff;border:1px solid var(--piano-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:2px;padding:var(--sp-1)}.np-sections-empty{padding:var(--sp-2);color:var(--piano-text-secondary);font-size:var(--text-sm);line-height:1.35}.np-sections-item{border:0;background:transparent;display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:var(--sp-2) var(--sp-2);border-radius:var(--radius-sm);text-align:left;cursor:pointer}.np-sections-item:hover{background:var(--piano-surface-hover)}.np-sections-item.active{background:var(--piano-primary-light)}.np-sections-item-name{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--piano-text)}.np-sections-item-range{font-size:11px;color:var(--piano-text-secondary)}.np-toolbar-center{display:flex;justify-content:center;min-width:240px}.np-active-section-banner{display:inline-flex;align-items:center;gap:var(--sp-2);padding:4px var(--sp-2);border-radius:var(--radius-md);border:1px solid var(--piano-primary-muted);background:color-mix(in srgb,var(--piano-primary-light) 80%,#fff);color:var(--piano-primary);font-size:var(--text-sm);white-space:nowrap}.np-full-score-btn{border:1px solid color-mix(in srgb,var(--piano-primary) 28%,white);background:#fff;color:var(--piano-primary);border-radius:999px;padding:2px 9px;font-family:inherit;font-size:11px;font-weight:var(--weight-semibold);line-height:1.25;cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast)}.np-full-score-btn:hover{background:color-mix(in srgb,var(--piano-primary) 9%,white);border-color:color-mix(in srgb,var(--piano-primary) 42%,white)}.np-full-score-btn:focus-visible{outline:2px solid color-mix(in srgb,var(--piano-primary) 38%,transparent);outline-offset:1px}.np-save-toast{position:fixed;top:112px;right:18px;z-index:1400;pointer-events:none;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:var(--weight-semibold);line-height:1;box-shadow:var(--shadow-md);border:1px solid transparent;animation:np-save-toast-in var(--transition-fast) ease-out}.np-save-toast.saved{background:#ecfdf3;color:#166534;border-color:#86efac}.np-save-toast.exists{background:#fffbeb;color:#92400e;border-color:#fcd34d}@keyframes np-save-toast-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.np-save-toast{top:126px;right:12px;font-size:11px;padding:6px 10px}}.toolbar-hint{font-size:var(--text-base);color:var(--piano-text-secondary);font-style:italic}.duration-selector{display:flex;gap:2px;background:#e9ecf1;border-radius:var(--radius-md);padding:2px}.dur-btn{display:flex;align-items:center;justify-content:center;min-width:var(--sp-8);height:30px;padding:0 var(--sp-2);border:none;border-radius:var(--radius-sm);background:none;font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--piano-text-secondary);cursor:pointer;transition:all var(--transition-fast);font-family:inherit}.dur-btn:hover{color:var(--piano-text)}.dur-btn:disabled{opacity:.4;cursor:not-allowed}.dur-btn.active{background:#fff;color:var(--piano-primary);box-shadow:var(--shadow-xs)}.note-symbol{font-family:Noto Music,serif;font-size:1.3rem;line-height:1;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:inline-block;color:transparent;transition:color 0s}.fonts-loaded .note-symbol{color:inherit}.dotted-btn{font-size:var(--text-lg);font-weight:var(--weight-bold);min-width:28px}.dot-indicator{font-size:1.4rem;font-weight:900;line-height:.5}.edit-actions{display:flex;gap:var(--sp-1)}.abc-input-section{margin-top:var(--sp-2);display:flex;flex-direction:column;gap:var(--sp-1)}.abc-textarea{width:100%;padding:var(--sp-2);border:1px solid var(--piano-border);border-radius:var(--radius-lg);font-family:Courier New,monospace;font-size:var(--text-md);resize:vertical;box-sizing:border-box}.abc-hint{font-size:var(--text-sm);color:var(--piano-text-secondary);line-height:1.5}.abc-hint a{color:var(--piano-primary);text-decoration:none}.abc-hint a:hover{text-decoration:underline}.exercises-panel{background:var(--piano-surface);padding:var(--sp-1) var(--sp-4) var(--sp-3)}.ex-body{display:flex;flex-direction:column;gap:var(--sp-3);padding-bottom:var(--sp-1)}.ex-body.ex-compact{flex-direction:column!important;gap:var(--sp-3)}.ex-row{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}.ex-row-compact{display:flex;align-items:flex-end;gap:var(--sp-4);flex-wrap:wrap}.ex-pill-group{display:flex;align-items:center;gap:var(--sp-1)}.ex-pill{padding:var(--sp-2) var(--sp-3);border:1px solid var(--piano-border);border-radius:var(--radius-md);background:#fff;font-family:inherit;font-size:var(--text-base);font-weight:var(--weight-medium);color:var(--piano-text-secondary);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.ex-pill:hover{border-color:var(--piano-primary);color:var(--piano-primary)}.ex-pill.active{background:var(--piano-primary);color:#fff;border-color:var(--piano-primary)}.ex-toggle-group{display:flex;border:1px solid var(--piano-border);border-radius:var(--radius-md);overflow:hidden}.ex-toggle{padding:var(--sp-2) var(--sp-4);border:none;background:#fff;font-family:inherit;font-size:var(--text-base);font-weight:var(--weight-medium);color:var(--piano-text-secondary);cursor:pointer;transition:all var(--transition-fast)}.ex-toggle+.ex-toggle{border-left:1px solid var(--piano-border)}.ex-toggle:hover{color:var(--piano-primary)}.ex-toggle.active{background:var(--piano-primary);color:#fff}.ex-toggle-cycle{display:flex;align-items:center;gap:var(--sp-1);padding:var(--sp-2) var(--sp-3);border:1px solid var(--piano-border);border-radius:var(--radius-md);background:#fff;font-family:inherit;font-size:var(--text-base);font-weight:var(--weight-medium);color:var(--piano-text);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;height:34px}.ex-toggle-cycle:hover{border-color:var(--piano-primary);color:var(--piano-primary)}.ex-compact-field{display:flex;flex-direction:column;gap:var(--sp-1);position:relative}.ex-compact-label{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--piano-text-secondary);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}.ex-input-group{display:flex;align-items:stretch;border:1px solid var(--piano-border);border-radius:var(--radius-md);overflow:hidden;transition:border-color var(--transition-fast);background:#fff}.ex-input-group:hover,.ex-input-group:focus-within{border-color:var(--piano-primary)}.ex-input-group>.ex-dropdown-btn,.ex-input-group>.ex-toggle-cycle{border:none;border-radius:0}.ex-input-group>.ex-dropdown-btn:hover,.ex-input-group>.ex-dropdown-btn.open{border-color:transparent;background:var(--piano-surface-hover)}.ex-addon-btn{display:flex;align-items:center;justify-content:center;width:30px;border:none;border-left:1px solid var(--piano-border);background:var(--piano-surface);color:var(--piano-text-secondary);cursor:pointer;transition:all var(--transition-fast);padding:0;flex-shrink:0}.ex-addon-btn:hover{color:var(--piano-primary);background:var(--piano-surface-hover)}.ex-dropdown-btn{display:flex;align-items:center;gap:2px;padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);border:1px solid var(--piano-border);border-radius:var(--radius-md);background:#fff;font-family:inherit;font-size:var(--text-base);font-weight:var(--weight-medium);color:var(--piano-text);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;min-width:0;height:34px}.ex-dropdown-btn:hover,.ex-dropdown-btn.open{border-color:var(--piano-primary);color:var(--piano-primary)}.ex-dropdown-text{overflow:hidden;text-overflow:ellipsis}.ex-dropdown-arrow{font-size:18px!important;flex-shrink:0}.ex-key-btn{min-width:44px;justify-content:center;padding:var(--sp-2) var(--sp-1)}.ex-dropdown-wide{min-width:140px}.ex-dropdown-menu{position:absolute;top:100%;left:0;z-index:100;min-width:100%;max-height:280px;overflow-y:auto;background:#fff;border:1px solid var(--piano-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--sp-1);margin-top:2px}.ex-dropdown-menu-wide{min-width:240px}.ex-dropdown-item{display:flex;flex-direction:column;align-items:flex-start;width:100%;padding:var(--sp-2) var(--sp-3);border:none;background:none;border-radius:var(--radius-sm);font-family:inherit;font-size:var(--text-base);font-weight:var(--weight-medium);color:var(--piano-text);cursor:pointer;text-align:left;transition:background var(--transition-fast)}.ex-dropdown-item:hover{background:var(--piano-surface)}.ex-dropdown-item.active{background:var(--piano-primary-light);color:var(--piano-primary);font-weight:var(--weight-semibold)}.ex-dropdown-item-desc{font-size:var(--text-sm);font-weight:var(--weight-regular);color:var(--piano-text-secondary);margin-top:1px}.ex-dropdown-item.active .ex-dropdown-item-desc{color:var(--piano-primary);opacity:.7}.ex-key-menu{display:flex;flex-wrap:wrap;gap:2px;min-width:200px;max-width:260px}.ex-key-menu .ex-dropdown-item{flex-direction:row;justify-content:center;min-width:36px;max-width:var(--sp-12);padding:var(--sp-2) var(--sp-2);text-align:center}.ex-stepper{display:flex;align-items:stretch;border:1px solid var(--piano-border);border-radius:var(--radius-md);overflow:hidden;background:#fff;height:34px;transition:border-color var(--transition-fast)}.ex-stepper:hover,.ex-stepper:focus-within{border-color:var(--piano-primary)}.ex-stepper-value{display:flex;align-items:center;justify-content:center;min-width:32px;padding:0 var(--sp-2);font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--piano-text);-webkit-user-select:none;-moz-user-select:none;user-select:none}.ex-stepper-input{width:48px;border:none;background:none;font-family:inherit;font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--piano-text);text-align:center;outline:none;padding:0 var(--sp-1)}.ex-stepper-input:disabled{opacity:.5;background:var(--piano-surface)}.ex-stepper-arrows{display:flex;flex-direction:column;border-left:1px solid var(--piano-border);width:24px;flex-shrink:0}.ex-stepper-arrow{display:flex;align-items:center;justify-content:center;flex:1 1 50%;border:none;background:var(--piano-surface);color:var(--piano-text-secondary);cursor:pointer;padding:0;transition:all var(--transition-fast);line-height:1;overflow:hidden}.ex-stepper-arrow .material-symbols-outlined{font-size:16px;line-height:1}.ex-stepper-arrow:hover:not(:disabled){color:var(--piano-primary);background:var(--piano-surface-hover)}.ex-stepper-arrow:disabled{opacity:.25;cursor:default}.ex-stepper-arrow+.ex-stepper-arrow{border-top:1px solid var(--piano-border)}.ex-key-arrows{border-left:1px solid var(--piano-border)}.sb-bpm-stepper{height:36px}.sb-bpm-stepper .ex-stepper-input{width:52px;font-size:var(--text-base)}.content-tabs{display:flex;gap:0;border-bottom:1px solid var(--piano-border);margin-bottom:var(--sp-2)}.content-tab{display:flex;align-items:center;justify-content:center;gap:var(--sp-1);flex:1;padding:var(--sp-2) var(--sp-4);border:none;background:none;font-size:var(--text-md);font-weight:var(--weight-medium);color:var(--piano-text-secondary);cursor:pointer;border-bottom:2px solid transparent;transition:color var(--transition-normal),border-color var(--transition-normal)}.content-tab:hover{color:var(--piano-text)}.content-tab.active{color:var(--piano-primary);border-bottom-color:var(--piano-primary)}.content-tab-arrow{font-size:16px;transition:transform var(--transition-slow)}.content-tab.active .content-tab-arrow{transform:rotate(180deg)}.midi-dot{width:var(--sp-2);height:var(--sp-2);border-radius:var(--radius-full);background:var(--piano-border-strong);flex-shrink:0}.midi-dot.connected{background:var(--piano-success)}.midi-label{font-size:var(--text-base);color:var(--piano-text-secondary);white-space:nowrap}.midi-active-notes{display:flex;flex-wrap:nowrap;gap:var(--sp-1);min-height:var(--sp-5)}.midi-note-badge{padding:1px var(--sp-1);border-radius:var(--radius-sm);background:var(--piano-primary-light);color:var(--piano-primary);font-size:var(--text-xs);font-weight:var(--weight-medium);white-space:nowrap}.piano-keyboard{border-top:1px solid var(--piano-border);padding:var(--sp-4);background:var(--piano-surface)}.keyboard-toolbar{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-2);flex-wrap:wrap}.rest-btn{display:inline-flex;align-items:center;gap:var(--sp-1)}.keyboard-hint{font-size:var(--text-sm);color:var(--piano-text-secondary);font-style:italic}.white-key.bass-range{border-bottom:2px solid var(--piano-text-muted)}.keyboard-container{display:flex;gap:0;overflow-x:auto}.octave-group{display:flex;position:relative;flex-shrink:0}.white-key{width:36px;height:120px;border:1px solid #d1d5db;border-radius:0 0 var(--radius-sm) var(--radius-sm);background:#fff;cursor:pointer;position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:center;padding-bottom:var(--sp-2);transition:background .08s}.white-key:hover{background:#f3f4f6}.white-key.active{background:var(--piano-primary)}.key-label{font-size:.6rem;color:var(--piano-text-secondary);-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}.black-key{width:24px;height:76px;background:var(--piano-text);border:1px solid #0f172a;border-radius:0 0 3px 3px;cursor:pointer;position:absolute;z-index:2;top:0;transform:translate(-50%);transition:background .08s;padding:0;display:flex;align-items:flex-end;justify-content:center}.black-key:hover{background:#334155}.black-key.active{background:var(--piano-primary)}.black-key-label{font-size:.5rem;color:#ffffffb3;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;position:absolute;bottom:var(--sp-1);left:50%;transform:translate(-50%);white-space:nowrap}.practice-dashboard{padding:var(--sp-4);border-bottom:1px solid var(--piano-border)}.dashboard-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-3)}.dashboard-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2);margin-bottom:var(--sp-3)}.stat{text-align:center}.stat-value{display:block;font-size:var(--text-xl);font-weight:var(--weight-bold);color:var(--piano-primary)}.stat-label{font-size:var(--text-xs);color:var(--piano-text-secondary);text-transform:uppercase;letter-spacing:.03em}.dashboard-runs{display:flex;flex-direction:column;gap:2px}.run-accordion{border-radius:var(--radius-md);border:1px solid transparent;transition:border-color var(--transition-normal)}.run-accordion.open{border-color:var(--piano-primary);background:var(--piano-primary-light)}.run-row{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) var(--sp-2);border-radius:var(--radius-sm);cursor:pointer;transition:background var(--transition-fast)}.run-row:hover{background:#00000008}.run-row.viewing{background:transparent}.run-detail{padding:var(--sp-1) var(--sp-2) var(--sp-2);border-top:1px solid rgba(124,58,237,.15)}.run-idx{font-size:var(--text-sm);color:var(--piano-text-secondary);min-width:var(--sp-6)}.run-pct{font-size:var(--text-sm);font-weight:var(--weight-semibold);min-width:30px;text-align:right}.timing-bar{flex:1;height:var(--sp-2);background:var(--piano-border);border-radius:var(--sp-1);overflow:hidden;display:flex}.timing-seg{height:100%;transition:width .3s}.timing-seg.perfect{background:var(--piano-success)}.timing-seg.early{background:var(--piano-info)}.timing-seg.late{background:var(--piano-danger)}.timing-seg.wrong-pitch{background:#f59e0b}.timing-seg.missed{background:var(--piano-text-muted)}.timing-breakdown{margin-bottom:var(--sp-3);padding:var(--sp-2);background:#00000005;border-radius:var(--radius-md)}.breakdown-label{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--piano-text-secondary);text-transform:uppercase;letter-spacing:.03em;margin-bottom:var(--sp-2)}.breakdown-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-1) var(--sp-3);margin-bottom:var(--sp-2)}.breakdown-item{display:flex;align-items:center;gap:var(--sp-1);font-size:var(--text-sm);color:var(--piano-text)}.breakdown-dot{width:var(--sp-2);height:var(--sp-2);border-radius:var(--radius-full);flex-shrink:0}.no-results{font-size:var(--text-sm);color:var(--piano-text-secondary);margin:var(--sp-1) 0}.score-error{text-align:center;padding:var(--sp-10) var(--sp-5);color:var(--piano-danger)}.import-modal{background:var(--piano-bg);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);width:90%;max-width:520px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;animation:slideUp var(--transition-slow)}.import-modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--piano-border)}.import-modal-header h2,.import-modal-title{margin:0;font-size:var(--text-xl);font-weight:var(--weight-semibold)}.import-modal-close{background:none;border:none;cursor:pointer;padding:var(--sp-1);border-radius:var(--radius-full);color:var(--piano-text-secondary);display:flex;align-items:center}.import-modal-close:hover{background:var(--piano-primary-light);color:var(--piano-primary)}.import-modal-body{padding:var(--sp-5);flex:1;overflow-y:auto}.import-modal-footer{display:flex;justify-content:flex-end;gap:var(--sp-2);padding:var(--sp-3) var(--sp-5);border-top:1px solid var(--piano-border)}.import-cancel-btn{padding:var(--sp-2) var(--sp-4);border:1px solid var(--piano-border);background:var(--piano-bg);border-radius:var(--radius-lg);cursor:pointer;font-size:var(--text-md);color:var(--piano-text-secondary)}.import-cancel-btn:hover{background:var(--piano-surface)}.import-load-btn{padding:var(--sp-2) var(--sp-5);border:none;background:var(--piano-primary);color:#fff;border-radius:var(--radius-lg);cursor:pointer;font-size:var(--text-md);font-weight:var(--weight-semibold)}.import-load-btn:disabled{opacity:.4;cursor:not-allowed}.import-load-btn:not(:disabled):hover{filter:brightness(1.1)}.import-drop-zone{border:2px dashed var(--piano-border);border-radius:var(--radius-xl);padding:var(--sp-10) var(--sp-5);text-align:center;cursor:pointer;transition:all var(--transition-normal)}.import-drop-zone:hover,.import-drop-zone.drag-over{border-color:var(--piano-primary);background:var(--piano-primary-light)}.import-drop-icon{font-size:var(--sp-12);color:var(--piano-text-secondary);display:block;margin-bottom:var(--sp-3)}.import-drop-zone:hover .import-drop-icon,.import-drop-zone.drag-over .import-drop-icon{color:var(--piano-primary)}.import-drop-text{margin:0 0 var(--sp-2);font-size:var(--text-lg);color:var(--piano-text)}.import-drop-formats{margin:0;font-size:var(--text-base);color:var(--piano-text-secondary)}.import-progress{display:flex;flex-direction:column;align-items:center;gap:var(--sp-4);padding:var(--sp-10) var(--sp-5)}.import-spinner{width:36px;height:36px;border:3px solid var(--piano-border);border-top-color:var(--piano-primary);border-radius:var(--radius-full);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.import-error{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);padding:var(--sp-5);text-align:center}.import-error>.material-symbols-outlined{font-size:var(--sp-10);color:var(--piano-danger)}.import-error p{margin:0;color:var(--piano-text-secondary);font-size:var(--text-md)}.import-retry-btn{padding:var(--sp-2) var(--sp-4);border:1px solid var(--piano-border);background:var(--piano-bg);border-radius:var(--radius-lg);cursor:pointer;font-size:var(--text-md);color:var(--piano-primary)}.import-retry-btn:hover{background:var(--piano-primary-light)}.import-preview h3{margin:0 0 var(--sp-4);font-size:var(--text-lg);font-weight:var(--weight-semibold)}.import-preview-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:var(--sp-3)}.import-detail{display:flex;flex-direction:column;align-items:center;padding:var(--sp-3);background:var(--piano-surface);border-radius:var(--radius-lg)}.import-detail-label{font-size:var(--text-sm);color:var(--piano-text-secondary);text-transform:uppercase;letter-spacing:.04em;margin-bottom:var(--sp-1)}.import-detail-value{font-size:var(--text-xl);font-weight:var(--weight-semibold);color:var(--piano-text)}.import-media-section{margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--piano-border)}.import-media-label{font-size:var(--text-base);color:var(--piano-text-secondary);margin:0 0 var(--sp-2)}.import-media-btn{display:flex;align-items:center;gap:var(--sp-1);padding:var(--sp-2) var(--sp-3);border:1px dashed var(--piano-border);border-radius:var(--radius-md);background:none;font-size:var(--text-base);color:var(--piano-text-secondary);cursor:pointer}.import-media-btn:hover{border-color:var(--piano-primary);color:var(--piano-primary)}.import-media-info{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--text-base);color:var(--piano-text)}.import-media-remove{background:none;border:none;color:var(--piano-text-muted);cursor:pointer;padding:2px}.import-media-remove:hover{color:var(--piano-danger)}.drop-overlay{position:fixed;inset:0;z-index:9998;background:#7c3aed1f;border:3px dashed var(--piano-primary);display:flex;align-items:center;justify-content:center;pointer-events:none;animation:fadeIn var(--transition-normal)}.drop-overlay-content{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);background:var(--piano-bg);padding:var(--sp-8) var(--sp-12);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg)}.drop-overlay-content .material-symbols-outlined{font-size:var(--sp-12);color:var(--piano-primary)}.drop-overlay-content p{margin:0;font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--piano-text)}.drop-overlay-hint{font-size:var(--text-sm)!important;font-weight:var(--weight-normal)!important;color:var(--piano-text-secondary)!important;max-width:300px;text-align:center}.section-splitter{margin-top:var(--sp-3);padding:var(--sp-3);background:var(--piano-surface);border-radius:var(--radius-lg);border:1px solid var(--piano-border)}.section-splitter-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-2)}.section-splitter-header h3{margin:0;font-size:var(--text-md);font-weight:var(--weight-semibold)}.section-timeline{display:flex;align-items:center;gap:var(--sp-1);margin-bottom:var(--sp-3);padding:var(--sp-1) 0}.section-measure-bar{flex:1;height:var(--sp-6);background:var(--piano-border);border-radius:3px;position:relative;cursor:pointer;transition:background var(--transition-normal);display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);color:var(--piano-text-secondary)}.section-measure-bar.in-range{background:var(--piano-primary-muted)}.section-measure-bar.in-range:hover{background:#7c3aed66}.section-add-row{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3)}.section-range-input{width:56px;padding:var(--sp-1) var(--sp-2);border:1px solid var(--piano-border);border-radius:var(--radius-sm);font-size:var(--text-md);text-align:center}.section-name-input{flex:1;padding:var(--sp-1) var(--sp-2);border:1px solid var(--piano-border);border-radius:var(--radius-sm);font-size:var(--text-md)}.section-add-btn{padding:var(--sp-1) var(--sp-3);border:none;background:var(--piano-primary);color:#fff;border-radius:var(--radius-sm);cursor:pointer;font-size:var(--text-base);font-weight:var(--weight-semibold);white-space:nowrap}.section-add-btn:hover{filter:brightness(1.1)}.section-list{display:flex;flex-direction:column;gap:var(--sp-1)}.section-item{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-2);border-radius:var(--radius-sm);cursor:pointer;transition:background var(--transition-fast);font-size:var(--text-md)}.section-item:hover{background:var(--piano-primary-light)}.section-item.active{background:var(--piano-primary);color:#fff}.section-item-name{flex:1;font-weight:var(--weight-medium)}.section-item-range{font-size:var(--text-sm);opacity:.7}.section-item-remove{background:none;border:none;cursor:pointer;padding:2px;border-radius:var(--radius-full);display:flex;opacity:.5;color:inherit}.section-item-remove:hover{opacity:1;background:#0000001a}.sb-drum-section{padding:var(--sp-2) 0;border-top:1px solid var(--piano-border)}.sb-drum-toggle{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--text-md);font-weight:var(--weight-medium);cursor:pointer;padding:2px 0}.sb-drum-toggle input[type=checkbox]{accent-color:var(--piano-primary)}.sb-drum-volume{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) 0 2px}.sb-drum-volume .sb-slider{flex:1}.sb-drum-section .drum-accompaniment{margin-top:0}.sb-drum-section .vexflow-mini-container{max-width:100%;overflow:hidden;margin-top:calc(-1 * var(--sp-2))}.sb-drum-section .drum-presets{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-bottom:var(--sp-2)}.sb-drum-section .preset-btn{font-size:var(--text-sm);padding:var(--sp-1) var(--sp-2);border:1px solid var(--piano-border);border-radius:var(--radius-sm);background:var(--piano-surface);cursor:pointer;transition:all var(--transition-fast)}.sb-drum-section .preset-btn.active{background:var(--piano-primary);color:#fff;border-color:var(--piano-primary)}.sb-drum-section .preset-btn.preset-btn-icon{width:30px;min-width:30px;height:30px;min-height:30px;padding:0;display:inline-flex;align-items:center;justify-content:center}.sb-drum-section .drum-pattern-input input{width:100%;font-size:var(--text-base);padding:var(--sp-1) var(--sp-2);border:1px solid var(--piano-border);border-radius:var(--radius-sm);font-family:Roboto Mono,monospace;margin-bottom:var(--sp-2)}.sb-drum-section .drum-edit-link{font-size:var(--text-sm);display:flex;align-items:center;gap:var(--sp-1);color:var(--piano-text-secondary);background:none;border:none;cursor:pointer;padding:2px 0}.sb-drum-section .drum-edit-link:hover{color:var(--piano-primary)}.sb-drum-section .measure-indicator{display:flex;gap:var(--sp-1);margin-bottom:var(--sp-1)}.sb-drum-section .measure-dot{width:var(--sp-2);height:var(--sp-2);border-radius:var(--radius-full);background:var(--piano-border)}.sb-drum-section .measure-dot.active{background:var(--piano-primary)}.sb-drum-section .drum-display-error{font-size:var(--text-sm);color:var(--piano-text-secondary);padding:var(--sp-2) 0}.sb-drum-section .error-detail{font-size:var(--text-sm);color:var(--piano-danger)}.practice-sections{padding:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-2)}.ps-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-2)}.ps-title{font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--piano-text-secondary);text-transform:uppercase;letter-spacing:.03em}.ps-list{display:flex;flex-direction:column;gap:2px;margin-bottom:var(--sp-2)}.ps-item{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) var(--sp-2);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--text-base);transition:background var(--transition-fast)}.ps-item:hover{background:var(--piano-primary-light)}.ps-item.active{background:var(--piano-primary);color:#fff}.ps-item-name{flex:1;font-weight:var(--weight-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ps-item-range{font-size:var(--text-sm);opacity:.7;white-space:nowrap}.ps-item-remove{background:none;border:none;cursor:pointer;padding:2px;border-radius:var(--radius-full);display:flex;opacity:.5;color:inherit;flex-shrink:0}.ps-item-remove:hover{opacity:1;background:#0000001a}.ps-save-btn{display:flex;align-items:center;gap:var(--sp-1);font-size:var(--text-base);margin-top:var(--sp-1)}.library{display:flex;flex-direction:column;gap:var(--sp-2)}.library-search{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border:1px solid var(--piano-border);border-radius:var(--radius-md);background:var(--piano-surface)}.library-search-input{border:none;background:none;outline:none;font-size:var(--text-md);flex:1;color:var(--piano-text)}.library-list{display:flex;flex-direction:column;gap:var(--sp-1)}.library-card{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-3);border:1px solid var(--piano-border);border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast)}.library-card:hover{background:var(--piano-surface);border-color:var(--piano-primary)}.library-card-main{flex:1;min-width:0}.library-card-title{font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--piano-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.library-card-meta{font-size:var(--text-sm);color:var(--piano-text-secondary);margin-top:2px}.library-card-right{display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-1);flex-shrink:0}.library-card-date{font-size:var(--text-sm);color:var(--piano-text-secondary)}.library-card-delete{background:none;border:none;color:var(--piano-text-muted);cursor:pointer;padding:2px;border-radius:var(--radius-sm);opacity:0;transition:opacity var(--transition-fast)}.library-card:hover .library-card-delete{opacity:1}.library-card-delete:hover{color:var(--piano-danger);background:var(--piano-danger-light)}.library-empty{display:flex;flex-direction:column;align-items:center;padding:var(--sp-8) var(--sp-4);color:var(--piano-text-secondary);text-align:center}.library-empty p{margin:var(--sp-1) 0}.library-empty-hint{font-size:var(--text-base)}.analytics{display:flex;flex-direction:column;gap:var(--sp-4)}.analytics-empty{display:flex;flex-direction:column;align-items:center;padding:var(--sp-8) var(--sp-4);color:var(--piano-text-secondary);text-align:center}.analytics-empty p{margin:var(--sp-1) 0}.analytics-empty-hint{font-size:var(--text-base)}.analytics-period-tabs{display:flex;gap:var(--sp-1)}.analytics-period-btn{flex:1;padding:var(--sp-2) var(--sp-3);border:1px solid var(--piano-border);border-radius:var(--radius-md);background:#fff;font-size:var(--text-base);cursor:pointer;transition:all var(--transition-fast)}.analytics-period-btn.active{background:var(--piano-primary);color:#fff;border-color:var(--piano-primary)}.analytics-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}.analytics-stat{background:var(--piano-surface);border:1px solid var(--piano-border);border-radius:var(--radius-lg);padding:var(--sp-3);text-align:center}.analytics-stat-value{font-size:1.4rem;font-weight:var(--weight-bold);color:var(--piano-primary)}.analytics-stat-label{font-size:var(--text-sm);color:var(--piano-text-secondary);margin-top:2px}.analytics-section{background:var(--piano-surface);border:1px solid var(--piano-border);border-radius:var(--radius-lg);padding:var(--sp-3)}.analytics-section-title{font-size:var(--text-md);font-weight:var(--weight-semibold);margin:0 0 var(--sp-2);color:var(--piano-text)}.analytics-timing-row{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-1)}.analytics-timing-label{width:50px;font-size:var(--text-sm);color:var(--piano-text-secondary)}.analytics-timing-bar{flex:1;height:var(--sp-2);background:var(--piano-border);border-radius:var(--radius-sm);overflow:hidden}.analytics-timing-fill{height:100%;border-radius:var(--radius-sm);transition:width .3s}.analytics-timing-pct{width:var(--sp-8);text-align:right;font-size:var(--text-sm);color:var(--piano-text-secondary)}.analytics-key-grid{display:flex;flex-wrap:wrap;gap:var(--sp-1)}.analytics-key-cell{padding:var(--sp-2) var(--sp-2);border-radius:var(--radius-sm);text-align:center;min-width:var(--sp-10)}.analytics-key-name{font-size:var(--text-sm);font-weight:var(--weight-semibold)}.analytics-key-acc{font-size:var(--text-xs);color:var(--piano-text-secondary)}.analytics-recs{display:flex;flex-direction:column;gap:var(--sp-2)}.analytics-rec{display:flex;align-items:flex-start;gap:var(--sp-2);font-size:var(--text-base);color:var(--piano-text);line-height:1.4}.analytics-sessions{display:flex;flex-direction:column;gap:var(--sp-1)}.analytics-session-row{padding:var(--sp-2) 0;border-bottom:1px solid var(--piano-border)}.analytics-session-row:last-child{border-bottom:none}.analytics-session-title{font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--piano-text)}.analytics-session-meta{font-size:var(--text-sm);color:var(--piano-text-secondary)}.analytics-sidebar-link{display:flex;align-items:center;gap:var(--sp-2);margin:var(--sp-3) var(--sp-4) var(--sp-4);padding:var(--sp-3) var(--sp-4);background:none;border:1px solid var(--piano-border);border-radius:var(--radius-md);color:var(--piano-text-secondary);font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-normal);width:calc(100% - var(--sp-4) * 2);justify-content:center}.analytics-sidebar-link:hover{background:var(--piano-surface-hover);color:var(--piano-primary);border-color:var(--piano-primary-muted)}.analytics-modal-overlay{position:fixed;inset:0;z-index:1000;background:#00000073;display:flex;align-items:center;justify-content:center;animation:fadeIn var(--transition-normal)}.analytics-modal{background:#fff;border-radius:var(--radius-xl);width:min(92vw,720px);max-height:88vh;display:flex;flex-direction:column;box-shadow:var(--shadow-xl);animation:slideUp var(--transition-slow)}.analytics-modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-5) var(--sp-6) var(--sp-3);border-bottom:1px solid var(--piano-border)}.analytics-modal-header h2{margin:0;font-size:var(--text-xl);font-weight:var(--weight-bold);color:var(--piano-text)}.analytics-modal-close{background:none;border:none;padding:var(--sp-1);cursor:pointer;color:var(--piano-text-secondary);border-radius:var(--radius-md);transition:all var(--transition-fast)}.analytics-modal-close:hover{background:var(--piano-surface-hover);color:var(--piano-text)}.analytics-modal-body{padding:var(--sp-5) var(--sp-6) var(--sp-6);overflow-y:auto;flex:1}.analytics-modal-body .analytics-stats-grid{grid-template-columns:repeat(4,1fr)}.analytics-modal-body .analytics-period-btn{font-size:var(--text-md);padding:var(--sp-2) var(--sp-4)}.analytics-modal-body .analytics-stat-value{font-size:1.6rem}.vp-section{margin-bottom:var(--sp-3);padding:0 var(--sp-4)}.vp-header{display:flex;align-items:center;gap:var(--sp-2);width:100%;padding:var(--sp-2) 0;background:none;border:none;border-bottom:1px solid var(--piano-border);cursor:pointer;text-align:left;font-family:inherit}.vp-header-arrow{font-size:18px;color:var(--piano-text-secondary);transition:transform var(--transition-normal);flex-shrink:0}.vp-header-icon{font-size:16px!important;color:var(--piano-text-secondary);flex-shrink:0}.vp-header-name{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--piano-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.vp-header-badge{display:inline-flex;align-items:center;gap:4px;font-size:var(--text-xs);color:var(--piano-text-secondary);white-space:nowrap}.vp-header-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}.vp-spin{width:10px;height:10px;border:2px solid var(--piano-border);border-top-color:var(--piano-primary);border-radius:50%;animation:vp-rotate .7s linear infinite;display:inline-block}@keyframes vp-rotate{to{transform:rotate(360deg)}}.vp-icon-btn{background:none;border:none;cursor:pointer;color:var(--piano-text-secondary);padding:var(--sp-1);border-radius:var(--radius-sm);display:flex;align-items:center;transition:color var(--transition-fast),background var(--transition-fast)}.vp-icon-btn .material-symbols-outlined{font-size:16px}.vp-icon-btn:hover{color:var(--piano-primary);background:var(--piano-surface-hover)}.vp-icon-btn--danger:hover{color:var(--piano-danger)}.vp-video{width:100%;max-width:100%;height:auto;max-height:200px;background:#000;-o-object-fit:contain;object-fit:contain;border-radius:var(--radius-sm);margin:var(--sp-2) 0;display:block}.vp-body{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-2) 0}.vp-analyzing{display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-1);padding:var(--sp-3) 0}.vp-analyzing-text{font-size:var(--text-xs);color:var(--piano-text-secondary)}.vp-analyzing-track{width:100%;height:3px;background:var(--piano-border);border-radius:2px;overflow:hidden}.vp-analyzing-fill{height:100%;width:30%;background:var(--piano-primary);border-radius:2px;animation:vp-slide 1.4s ease-in-out infinite}@keyframes vp-slide{0%{transform:translate(-100%)}to{transform:translate(430%)}}.vp-error{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--text-sm);color:var(--piano-danger)}.vp-error .material-symbols-outlined{font-size:14px}.vp-info-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-1);font-size:var(--text-xs);color:var(--piano-text);padding:var(--sp-1) 0}.vp-info-item{display:inline-flex;align-items:baseline;gap:3px;font-weight:var(--weight-medium)}.vp-info-label{color:var(--piano-text-secondary);font-weight:400}.vp-info-sep{width:1px;height:12px;background:var(--piano-border);flex-shrink:0;margin:0 2px}.vp-info-item--tag{color:var(--piano-warning);font-style:italic;font-weight:400}.vp-info-item--live{color:var(--piano-primary)}.vp-suggestion{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) var(--sp-2);background:var(--piano-warning-light);border-radius:var(--radius-sm);font-size:var(--text-xs);color:var(--piano-text)}.vp-suggestion .material-symbols-outlined{font-size:14px;color:var(--piano-warning)}.vp-suggestion-apply{background:var(--piano-warning);color:#fff;border:none;padding:2px var(--sp-2);border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:var(--weight-semibold);font-family:inherit;cursor:pointer;white-space:nowrap;transition:background var(--transition-fast);margin-left:auto}.vp-suggestion-apply:hover{background:#d97706}.vp-controls-row{display:flex;align-items:center;gap:var(--sp-2)}.vp-toggle-btn{display:inline-flex;align-items:center;gap:var(--sp-1);padding:var(--sp-1) var(--sp-2);border-radius:var(--radius-sm);border:1px solid var(--piano-border);background:transparent;color:var(--piano-text-secondary);font-size:var(--text-xs);font-weight:var(--weight-medium);font-family:inherit;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast)}.vp-toggle-btn .material-symbols-outlined{font-size:14px}.vp-toggle-btn:hover{background:var(--piano-surface-alt);border-color:var(--piano-text-secondary)}.vp-toggle-btn--on{background:var(--piano-primary);color:#fff;border-color:var(--piano-primary)}.vp-toggle-btn--on:hover{background:var(--piano-primary-hover);border-color:var(--piano-primary-hover)}.vp-hint{font-size:var(--text-xs);color:var(--piano-warning);font-style:italic}.vp-text-btn{display:inline-flex;align-items:center;gap:var(--sp-1);padding:var(--sp-1) var(--sp-2);background:none;border:1px dashed var(--piano-border);border-radius:var(--radius-sm);color:var(--piano-primary);font-size:var(--text-xs);font-weight:var(--weight-medium);font-family:inherit;cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast)}.vp-text-btn .material-symbols-outlined{font-size:14px}.vp-text-btn:hover{background:var(--piano-primary-light);border-color:var(--piano-primary)}.vp-tap-row{display:flex;align-items:center;gap:var(--sp-2);flex:1}.vp-tap-pulse{width:8px;height:8px;border-radius:50%;background:var(--piano-primary);animation:vp-pulse 1s ease-in-out infinite;flex-shrink:0}@keyframes vp-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.3)}}.vp-tap-msg{font-size:var(--text-xs);color:var(--piano-text);flex:1}.vp-unit{font-size:var(--text-sm);color:var(--piano-text-secondary)}.video-player-section{display:contents}.now-practicing{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-5);background:var(--piano-primary-light);border-bottom:1px solid rgba(124,58,237,.12);border-radius:0;margin:0;min-height:var(--sp-8)}.np-label{font-size:var(--text-xs);font-weight:var(--weight-semibold);text-transform:uppercase;letter-spacing:.05em;color:var(--piano-primary);white-space:nowrap;opacity:.7}.np-main{display:flex;align-items:center;gap:var(--sp-2);flex:1;min-width:0}.np-icon{font-size:16px!important;color:var(--piano-primary);flex-shrink:0}.np-title{font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--piano-text);white-space:nowrap;overflow:hidden}.np-title-fixed{width:180px;min-width:180px;text-overflow:ellipsis;max-width:200px}.np-meta{display:flex;align-items:center;gap:var(--sp-1);flex-wrap:wrap}.np-tag{font-size:.78rem;font-weight:var(--weight-medium);color:var(--piano-text-secondary);background:#ffffffb3;padding:3px var(--sp-2);min-height:28px;display:inline-flex;align-items:center;border-radius:var(--radius-sm);white-space:nowrap}.np-tag.vocal{color:var(--piano-success-text);background:var(--piano-success-light)}.np-tag.chords{color:#d97706;background:var(--piano-warning-light)}.np-chord-prog{display:inline-flex;align-items:center;gap:2px;margin-left:var(--sp-1);padding:1px var(--sp-2);background:#f8f4ff;border-radius:var(--radius-sm)}.np-chord{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--piano-primary);white-space:nowrap}.np-chord+.np-chord:before{content:"–";margin:0 2px;color:var(--piano-text-secondary);font-weight:var(--weight-regular)}.np-selection{display:flex;align-items:center;gap:var(--sp-1);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--piano-primary);background:#fff;padding:2px var(--sp-2);border-radius:var(--radius-sm);white-space:nowrap;flex-shrink:0}.np-clear-sel{display:flex;align-items:center;background:none;border:none;color:var(--piano-text-secondary);cursor:pointer;padding:0}.np-clear-sel:hover{color:var(--piano-primary)}.np-edit-btn{display:flex;align-items:center;background:none;border:none;color:var(--piano-text-secondary);cursor:pointer;padding:2px;border-radius:var(--radius-sm);transition:opacity var(--transition-normal);flex-shrink:0;opacity:0}.now-practicing:hover .np-edit-btn{opacity:1}.np-edit-btn:hover{color:var(--piano-primary)}.np-editing{flex-direction:column;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3)}.np-edit-row{display:flex;align-items:center;gap:var(--sp-2)}.np-edit-label{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--piano-text-secondary);min-width:var(--sp-8)}.np-edit-input{padding:var(--sp-1) var(--sp-2);border:1px solid var(--piano-border);border-radius:var(--radius-sm);font-family:inherit;font-size:var(--text-base);color:var(--piano-text);outline:none;transition:border-color var(--transition-fast)}.np-edit-input:focus{border-color:var(--piano-primary)}.np-edit-title{flex:1}.np-edit-bpm{width:64px}.np-edit-select{padding:var(--sp-1) var(--sp-2);border:1px solid var(--piano-border);border-radius:var(--radius-sm);font-family:inherit;font-size:var(--text-base);color:var(--piano-text);background:#fff;cursor:pointer;outline:none}.np-edit-select:focus{border-color:var(--piano-primary)}.np-edit-actions{display:flex;gap:var(--sp-2);justify-content:flex-end}.np-edit-save,.np-edit-cancel{padding:var(--sp-1) var(--sp-3);border-radius:var(--radius-sm);font-family:inherit;font-size:var(--text-sm);font-weight:var(--weight-medium);cursor:pointer;border:1px solid var(--piano-border);transition:all var(--transition-fast)}.np-edit-save{background:var(--piano-primary);color:#fff;border-color:var(--piano-primary)}.np-edit-save:hover{opacity:.9}.np-edit-cancel{background:#fff;color:var(--piano-text-secondary)}.np-edit-cancel:hover{border-color:var(--piano-primary);color:var(--piano-primary)}.np-empty{justify-content:center;gap:var(--sp-3)}.np-empty-text{font-size:var(--text-base);color:var(--piano-text-secondary);font-weight:var(--weight-medium)}.np-switch-btn{display:inline-flex;align-items:center;gap:var(--sp-1);padding:var(--sp-1) var(--sp-3);border:1px solid var(--piano-primary);border-radius:var(--radius-md);background:#fff;font-family:inherit;font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--piano-primary);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;flex-shrink:0}.np-switch-btn:hover{background:var(--piano-primary);color:#fff}.np-switch-btn-icon{min-height:30px}.np-actions{display:flex;align-items:center;gap:var(--sp-2);margin-left:auto;flex-shrink:0}.np-edit-btn-visible{opacity:1!important}.np-tag-interactive{cursor:pointer;display:inline-flex;align-items:center;gap:4px;border:1px solid transparent;transition:all var(--transition-fast)}.np-tag-interactive:hover{border-color:var(--piano-primary);color:var(--piano-primary);background:#fff}.np-tag-icon{font-size:13px!important;opacity:.5}.np-tag-interactive:hover .np-tag-icon{opacity:1}.np-chord-more{opacity:.5;font-style:italic;font-weight:var(--weight-regular)}.np-popover{position:fixed;z-index:10001;background:#fff;border:1px solid var(--piano-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--sp-3);font-family:Roboto,system-ui,sans-serif;color:var(--piano-text);animation:np-popover-in var(--transition-fast)}.np-pop-section{margin-bottom:0;min-width:min(760px,calc(100vw - 52px))}.np-pop-section-sm,.np-pop-section-lg{min-width:min(760px,calc(100vw - 52px))}.np-pop-section .ep-group-label{margin-bottom:var(--sp-3);color:var(--piano-text-secondary)}.np-chord-template-inline-menu.shared-chord-progression-inline-content{background:transparent;border:0;box-shadow:none;width:100%}.np-chord-template-inline-menu .shared-chord-progression-inline-list{padding:0;gap:var(--sp-2)}@keyframes np-popover-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.np-pop-keys{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--sp-2)}.np-popover .shared-chord-style-inline-list{padding:0}.np-pop-key{min-width:0;min-height:2.3rem;padding:var(--sp-2) var(--sp-3);border:1px solid var(--piano-border);border-radius:var(--radius-md);background:#fff;font-family:inherit;font-size:var(--text-base);font-weight:var(--weight-medium);color:var(--piano-text);cursor:pointer;text-align:center;transition:all var(--transition-fast)}.np-pop-key:hover{border-color:var(--piano-primary);color:var(--piano-primary)}.np-pop-key.active{background:var(--piano-primary);color:#fff;border-color:var(--piano-primary)}.np-pop-form{display:grid;gap:var(--sp-2);min-width:260px}.np-pop-label{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--piano-text-secondary)}.np-pop-select,.np-pop-input{width:100%;border:1px solid var(--piano-border);border-radius:var(--radius-md);padding:var(--sp-2) var(--sp-3);font-family:inherit;font-size:var(--text-sm);color:var(--piano-text);background:#fff}.np-pop-select:focus,.np-pop-input:focus{outline:none;border-color:var(--piano-primary);box-shadow:0 0 0 2px #3b82f626}.np-pop-error{margin:0;font-size:var(--text-xs);color:#b91c1c;font-weight:var(--weight-semibold)}.np-pop-warning{margin:0;font-size:var(--text-xs);color:#b45309;font-weight:var(--weight-semibold)}.np-pop-apply{border:1px solid var(--piano-primary);border-radius:var(--radius-md);background:var(--piano-primary);color:#fff;font-size:var(--text-sm);font-weight:var(--weight-semibold);padding:var(--sp-2) var(--sp-3);cursor:pointer}.np-pop-apply:hover{filter:brightness(.95)}@keyframes ep-fade-in{0%{opacity:0}to{opacity:1}}.ep-panel{--ep-control-height: var(--control-height);--ep-control-height-lg: var(--control-height);--ep-control-radius: var(--control-radius);--ep-control-font-size: var(--text-base);width:min(720px,calc(100vw - 32px));max-width:none;max-height:85vh;background:#fff;border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);overflow:hidden;animation:ep-slide-up .2s ease;display:flex;flex-direction:column}.MuiDialog-paper.ep-panel{width:min(720px,calc(100vw - 32px));max-width:none;max-height:85vh;border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);overflow:hidden;font-family:Roboto,system-ui,sans-serif;color:var(--piano-text)}.ep-panel-inline{width:min(680px,calc(100vw - 32px));max-height:min(78vh,700px)}.piano-load-popover{border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);overflow:hidden;font-family:Roboto,system-ui,sans-serif;color:var(--piano-text)}@keyframes ep-slide-up{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.ep-header{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-4) var(--sp-6);border-bottom:1px solid var(--piano-border)}.ep-title{font-size:var(--text-xl);font-weight:var(--weight-bold);color:var(--piano-text);margin:0}.ep-close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:none;border-radius:var(--radius-full);color:var(--piano-text-secondary);cursor:pointer;transition:background var(--transition-fast)}.ep-close:hover{background:var(--piano-surface);color:var(--piano-text)}.ep-sections{display:flex;border-bottom:1px solid var(--piano-border);padding:0 var(--sp-6)}.ep-section-btn{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);border:none;background:none;font-family:inherit;font-size:var(--text-md);font-weight:var(--weight-medium);color:var(--piano-text-secondary);cursor:pointer;border-bottom:2px solid transparent;transition:color var(--transition-normal),border-color var(--transition-normal)}.ep-section-btn:hover{color:var(--piano-text)}.ep-section-btn.active{color:var(--piano-primary);border-bottom-color:var(--piano-primary)}.ep-body{padding:var(--sp-4) var(--sp-5);overflow-y:auto;flex:1;min-height:0}.ep-group,.ep-group-sm{margin-bottom:var(--sp-3)}.ep-group-label{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--text-xs);font-weight:var(--weight-semibold);text-transform:uppercase;letter-spacing:.05em;color:var(--piano-text-secondary);margin-bottom:var(--sp-2)}.ep-label-dice{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--piano-text-secondary);cursor:pointer;padding:0;opacity:.5;transition:all var(--transition-fast)}.ep-label-dice:hover{opacity:1;color:var(--piano-primary);background:var(--piano-primary-light)}.ep-chip-row{display:flex;flex-wrap:wrap;gap:var(--sp-1);align-items:center}.ep-chip-col{flex-direction:column;align-items:flex-start}.ep-chip{display:inline-flex;align-items:center;gap:var(--sp-1);padding:var(--sp-2) var(--sp-3);border:1px solid var(--piano-border);border-radius:var(--ep-control-radius);background:#fff;font-family:inherit;font-size:var(--ep-control-font-size);font-weight:var(--weight-medium);color:var(--piano-text-secondary);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;min-height:var(--ep-control-height)}.ep-chip:hover{border-color:var(--piano-primary);color:var(--piano-primary)}.ep-chip.active{background:var(--piano-primary);color:#fff;border-color:var(--piano-primary)}.ep-chip-num{min-width:36px;justify-content:center}.ep-chip-desc{font-size:var(--text-xs);font-weight:var(--weight-regular);color:var(--piano-text-muted);margin-left:var(--sp-1)}.ep-chip.active .ep-chip-desc{color:#ffffffb3}.ep-key-grid{display:flex;flex-wrap:wrap;gap:var(--sp-1);align-items:center}.ep-key-btn{min-width:40px;min-height:var(--ep-control-height);padding:0 var(--sp-2);border:1px solid var(--piano-border);border-radius:var(--ep-control-radius);background:#fff;font-family:inherit;font-size:var(--text-md);font-weight:var(--weight-medium);color:var(--piano-text);cursor:pointer;text-align:center;transition:all var(--transition-fast)}.ep-key-btn:hover{border-color:var(--piano-primary);color:var(--piano-primary)}.ep-key-btn.active{background:var(--piano-primary);color:#fff;border-color:var(--piano-primary)}.ep-dice{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--piano-border);border-radius:var(--radius-md);background:#fff;color:var(--piano-text-secondary);cursor:pointer;transition:all var(--transition-fast);flex-shrink:0}.ep-dice:hover{border-color:var(--piano-primary);color:var(--piano-primary);background:var(--piano-primary-light)}.ep-row-3{display:flex;gap:var(--sp-3);flex-wrap:wrap}.ep-progressions{--ep-prog-control-height: var(--ep-control-height);--ep-prog-control-radius: var(--ep-control-radius);--ep-prog-control-font-size: var(--ep-control-font-size);--ep-prog-control-border: var(--piano-border)}.ep-progressions .ep-custom-prog-input{min-height:var(--ep-prog-control-height);border-radius:var(--ep-prog-control-radius);border-color:var(--ep-prog-control-border);font-size:var(--ep-prog-control-font-size);font-weight:var(--weight-semibold);line-height:1.25;padding:0 .9rem}.ep-progressions .shared-chord-progression-text.ep-custom-prog-input{min-height:var(--ep-prog-control-height)}.ep-progressions .shared-chord-style-trigger.ep-custom-prog-input{min-height:var(--ep-prog-control-height);display:inline-flex;align-items:center;justify-content:space-between}.ep-progressions .shared-chord-style-trigger.ep-custom-prog-input .shared-chord-style-trigger-label{font-size:var(--ep-prog-control-font-size);font-weight:var(--weight-semibold)}.ep-progressions .shared-chord-style-trigger.ep-custom-prog-input .material-symbols-outlined{font-size:1.2rem;line-height:1;color:var(--piano-text-secondary)}.ep-progressions .ep-chip,.ep-progressions .ep-key-btn{min-height:var(--ep-control-height)}.ep-prog-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-1)}.ep-custom-prog-input{width:100%;min-height:var(--ep-control-height);padding:0 var(--sp-3);border:1px solid var(--piano-border);border-radius:var(--ep-control-radius);font-family:inherit;font-size:var(--ep-control-font-size);color:var(--piano-text);background:#fff}.ep-custom-prog-input:focus{outline:none;border-color:var(--piano-primary);box-shadow:0 0 0 2px #3b82f626}.ep-custom-prog-error{margin:0;font-size:var(--text-xs);color:#b91c1c;font-weight:var(--weight-semibold)}.ep-custom-prog-warning{margin:0;font-size:var(--text-xs);color:#b45309;font-weight:var(--weight-semibold)}.ep-prog-item{display:flex;flex-direction:column;align-items:flex-start;padding:var(--sp-1) var(--sp-2);border:1px solid var(--piano-border);border-radius:var(--radius-md);background:#fff;cursor:pointer;transition:all var(--transition-fast);text-align:left;font-family:inherit}.ep-prog-item:hover{border-color:var(--piano-primary)}.ep-prog-item.active{background:var(--piano-primary-light);border-color:var(--piano-primary)}.ep-prog-name{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--piano-text);line-height:1.3}.ep-prog-item.active .ep-prog-name{color:var(--piano-primary)}.ep-prog-desc{font-size:11px;color:var(--piano-text-secondary);line-height:1.2}.ep-style-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--sp-1);align-items:stretch}.np-chord-style-inline-menu.shared-chord-style-inline-content{background:transparent;border:0;box-shadow:none}.ep-style-item{display:flex;flex-direction:column;align-items:flex-start;padding:var(--sp-1) var(--sp-2);border:1px solid var(--piano-border);border-radius:var(--radius-md);background:#fff;cursor:pointer;transition:all var(--transition-fast);text-align:left;font-family:inherit}.ep-style-item:hover{border-color:var(--piano-primary)}.ep-style-item.active{background:var(--piano-primary-light);border-color:var(--piano-primary)}.ep-style-name,.ep-style-item .shared-chord-style-name{font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--piano-text);line-height:1.22}.ep-style-item.active .ep-style-name,.ep-style-item.active .shared-chord-style-name{color:var(--piano-primary)}.ep-style-desc,.ep-style-item .shared-chord-style-description{font-size:11px;color:var(--piano-text-secondary);line-height:1.28}.ep-footer{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-3) var(--sp-6);border-top:1px solid var(--piano-border);background:var(--piano-surface);position:sticky;bottom:0}.ep-footer-auto{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--piano-text-secondary);white-space:nowrap}.ep-footer-preview{display:flex;align-items:center;gap:var(--sp-2);flex:1;min-width:0}.ep-footer-text{font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--piano-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ep-randomize-all{display:inline-flex;align-items:center;gap:var(--sp-1);min-height:var(--ep-control-height);padding:0 var(--sp-3);border:1px solid var(--piano-border);border-radius:var(--ep-control-radius);background:#fff;color:var(--piano-text-secondary);font-family:inherit;font-size:var(--text-sm);font-weight:var(--weight-medium);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;flex-shrink:0}.ep-randomize-all:hover{border-color:var(--piano-primary);color:var(--piano-primary);background:var(--piano-primary-light)}.ep-go-btn{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--ep-control-height-lg);padding:0 var(--sp-6);border:none;border-radius:var(--ep-control-radius);background:var(--piano-primary);color:#fff;font-family:inherit;font-size:var(--text-md);font-weight:var(--weight-semibold);cursor:pointer;transition:background var(--transition-fast);white-space:nowrap;flex-shrink:0}.ep-go-btn:hover{background:var(--piano-primary-hover)}.ep-songs-header{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4)}.ep-songs-search{display:flex;align-items:center;gap:var(--sp-2);flex:1;padding:var(--sp-2) var(--sp-3);border:1px solid var(--piano-border);border-radius:var(--radius-md);background:var(--piano-surface)}.ep-songs-search-input{border:none;background:none;outline:none;font-family:inherit;font-size:var(--text-base);color:var(--piano-text);flex:1}.ep-import-btn{display:inline-flex;align-items:center;gap:var(--sp-1);min-height:var(--ep-control-height);padding:0 var(--sp-3);border:1px solid var(--piano-primary);border-radius:var(--ep-control-radius);background:#fff;font-family:inherit;font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--piano-primary);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.ep-import-btn:hover{background:var(--piano-primary);color:#fff}.ep-songs-empty{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);padding:var(--sp-8) 0;color:var(--piano-text-secondary);font-size:var(--text-base)}.ep-songs-hint{font-size:var(--text-sm);color:var(--piano-text-muted)}.ep-songs-list{display:flex;flex-direction:column;gap:var(--sp-1)}.ep-song-item{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border:1px solid var(--piano-border);border-radius:var(--radius-md);background:#fff;cursor:pointer;transition:all var(--transition-fast);text-align:left;width:100%;font-family:inherit}.ep-song-item:hover{border-color:var(--piano-primary);background:var(--piano-surface)}.ep-song-icon{font-size:20px;color:var(--piano-primary)}.ep-song-info{display:flex;flex-direction:column}.ep-song-title{font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--piano-text)}.ep-song-meta{font-size:var(--text-sm);color:var(--piano-text-secondary)}.input-sources{position:relative}.is-trigger{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) var(--sp-3);border:1px solid var(--piano-border);border-radius:var(--radius-md);background:#fff;font-family:inherit;font-size:var(--text-base);color:var(--piano-text-secondary);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.is-trigger:hover{border-color:var(--piano-primary)}.is-trigger.connected{border-color:var(--piano-success-text);color:var(--piano-text)}.is-trigger.mic-live{border-color:color-mix(in srgb,#d6698f 38%,var(--piano-border));background:color-mix(in srgb,#fff5f8 55%,#ffffff)}.is-dot{width:7px;height:7px;border-radius:var(--radius-full);background:var(--piano-border-strong);flex-shrink:0}.is-dot.on{background:var(--piano-success-text)}.is-label{font-weight:var(--weight-medium)}.is-notes{display:flex;gap:2px}.is-note-badge{padding:0 var(--sp-1);border-radius:var(--radius-sm);background:var(--piano-primary-light);color:var(--piano-primary);font-size:var(--text-xs);font-weight:var(--weight-medium);line-height:1.5}.is-arrow{color:var(--piano-text-secondary)}.is-dropdown{position:absolute;top:calc(100% + var(--sp-2));right:0;width:320px;background:#fff;border:1px solid var(--piano-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);z-index:100;padding:var(--sp-3)}.is-section{display:flex;flex-direction:column;gap:var(--sp-2)}.is-section-mic{border:1px solid transparent;border-radius:var(--radius-lg);padding:var(--sp-2);margin-inline:calc(-1 * var(--sp-2));transition:border-color var(--transition-fast),background-color var(--transition-fast),box-shadow var(--transition-fast)}.is-section-mic.active{border-color:color-mix(in srgb,#d6698f 36%,var(--piano-border));background:linear-gradient(180deg,color-mix(in srgb,#fde7ef 44%,#ffffff),color-mix(in srgb,#fff5f8 62%,#ffffff));box-shadow:inset 0 0 0 1px color-mix(in srgb,#f5b7ca 30%,transparent)}.is-row{display:flex;align-items:center;gap:var(--sp-3)}.is-icon{font-size:20px!important;color:var(--piano-text-secondary)}.is-info{flex:1;display:flex;flex-direction:column;gap:1px}.is-source-name{font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--piano-text)}.is-status{font-size:var(--text-sm);font-weight:var(--weight-medium)}.is-status.ok{color:var(--piano-success-text)}.is-section-mic.active .is-status.ok{color:color-mix(in srgb,#a03c62 78%,#5b1c37)}.is-status.off{color:var(--piano-text-secondary)}.is-help{font-size:var(--text-sm);color:var(--piano-text-secondary);line-height:1.4;margin:0;padding-left:30px}.is-device{font-size:var(--text-sm);color:var(--piano-text);margin:0;padding-left:30px}.is-detected{display:inline-flex;align-items:center;gap:var(--sp-2);width:-moz-fit-content;width:fit-content;border:1px solid color-mix(in srgb,#e38ead 44%,var(--piano-border));border-radius:var(--radius-full);background:color-mix(in srgb,#fff0f5 66%,#ffffff);padding:4px var(--sp-2)}.is-detected-label{font-size:var(--text-xs);color:color-mix(in srgb,#8f4460 80%,#5f2940);font-weight:var(--weight-semibold);letter-spacing:.02em;text-transform:uppercase}.is-pitch-pill{display:inline-flex;align-items:center;justify-content:center;min-width:2.8rem;padding:2px 10px;border-radius:var(--radius-full);background:linear-gradient(180deg,color-mix(in srgb,#e88dad 84%,#ffffff),color-mix(in srgb,#cf5f88 90%,#b4416d));color:#fff;font-weight:var(--weight-bold);letter-spacing:.02em;text-shadow:0 1px 0 rgba(88,22,45,.35)}.is-select-row{display:grid;grid-template-columns:92px 1fr;align-items:center;gap:var(--sp-2);padding-left:30px}.is-select-label{font-size:var(--text-sm);color:var(--piano-text-secondary)}.is-select{width:100%;border:1px solid var(--piano-border);border-radius:var(--radius-sm);background:#fff;font-family:inherit;font-size:var(--text-sm);color:var(--piano-text);padding:6px var(--sp-2)}.is-select:focus-visible{outline:none;border-color:var(--piano-primary);box-shadow:0 0 0 2px var(--piano-primary-light)}.is-toggle{padding:var(--sp-1) var(--sp-3);border:1px solid var(--piano-border);border-radius:var(--radius-sm);background:#fff;font-family:inherit;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--piano-text-secondary);cursor:pointer;transition:all var(--transition-fast)}.is-toggle:hover{border-color:var(--piano-primary);color:var(--piano-primary)}.is-toggle.active{background:var(--piano-success-light);border-color:var(--piano-success-text);color:var(--piano-success-text)}.is-divider{height:1px;background:var(--piano-border);margin:var(--sp-2) 0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(var(--sp-6))}to{opacity:1;transform:translateY(0)}}.btn,.sb-mode-btn,.dur-btn,.dotted-btn,.metronome-btn,.sb-tempo-adj,.rest-btn,.exercises-header-row,.run-row,.sb-checkbox,.white-key,.black-key,.ex-pill,.ex-toggle,.ex-toggle-cycle,.ex-dropdown-btn,.ex-num-btn,.ex-dice{-webkit-tap-highlight-color:transparent;touch-action:manipulation}.volume-slider,.sb-tempo-input,.sound-select,.abc-textarea{touch-action:manipulation}@media(min-width:769px)and (max-width:1200px){.sidebar{width:300px;min-width:300px;max-width:300px}.score-container{padding:var(--sp-5) var(--sp-6)}.dur-btn{min-width:var(--sp-10);height:44px}.metronome-btn{width:44px;height:44px}.sb-mode-btn{padding:var(--sp-3) var(--sp-2) var(--sp-3)}.sb-tempo-adj{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}.btn{padding:var(--sp-3) var(--sp-4)}.btn-small{padding:var(--sp-2) var(--sp-3)}.rest-btn{min-height:44px}.exercises-header-row{padding:var(--sp-3) var(--sp-4);min-height:var(--sp-12)}.run-row{padding:var(--sp-2) var(--sp-2);min-height:44px}.sb-checkbox{min-height:44px}.white-key{width:40px;height:130px}.black-key{width:27px;height:82px}.key-label{font-size:var(--text-xs)}.volume-slider{padding-block:8px!important}.sidebar-playback{padding:var(--sp-3)}}@media(max-width:768px){.piano-app{height:auto;min-height:100vh}.piano-layout{flex-direction:column;overflow:visible}.sidebar{width:100%;min-width:100%;max-width:100%;border-left:none;border-top:1px solid var(--piano-border)}.score-container{padding:var(--sp-3)}.piano-header{padding:var(--sp-2) var(--sp-3);gap:var(--sp-2);flex-wrap:wrap}.piano-header h1{font-size:var(--text-lg)}.dur-btn{min-width:38px;height:44px}.metronome-btn{width:44px;height:44px}.sb-mode-btn{padding:var(--sp-3) var(--sp-1) var(--sp-3)}.sb-tempo-adj{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}.btn{padding:var(--sp-3) var(--sp-3)}.dashboard-stats{grid-template-columns:repeat(2,1fr)}}