:root{--color-primary: #4f46e5;--color-secondary: #7c3aed;--color-accent: #5ee1a9;--color-success: #10b981;--color-warning: #ffb35c;--color-error: #ef4444;--color-background: #0b0f14;--color-surface: #111824;--color-surface-elevated: #1a2637;--color-border: #192233;--color-border-subtle: #223146;--color-border-strong: #2e4a65;--color-text: #e6edf3;--color-text-muted: #9fb0c0;--color-text-subtle: #64748b;--color-text-inverse: #111;--color-note-detected: var(--color-success);--color-note-target: #f9c74f;--color-note-hit: var(--color-accent);--color-note-scale: var(--color-text-muted);--color-note-background: #132232;--color-note-border: var(--color-border);--color-listening: var(--color-warning);--color-active: var(--color-accent);--color-inactive: var(--color-text-muted);--space-0: 0;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--space-20: 5rem;--font-family-base: system-ui, "Segoe UI", Roboto, Arial, "Noto Sans";--font-family-mono: "Courier New", monospace;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 2rem;--font-size-4xl: 3rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-weight-extrabold: 800;--line-height-tight: 1.25;--line-height-normal: 1.4;--line-height-relaxed: 1.6;--border-width-0: 0;--border-width-1: 1px;--border-width-2: 2px;--border-width-4: 4px;--border-radius-none: 0;--border-radius-sm: .25rem;--border-radius-md: .375rem;--border-radius-lg: .5rem;--border-radius-xl: .75rem;--border-radius-2xl: 1rem;--border-radius-full: 9999px;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1);--shadow-glow: 0 0 15px rgba(94, 225, 169, .5);--shadow-glow-strong: 0 0 30px rgba(0, 0, 0, .25);--z-base: 1;--z-dropdown: 1000;--z-sticky: 1020;--z-fixed: 1030;--z-modal: 1040;--z-popover: 1050;--z-tooltip: 1060;--z-note-base: 1;--z-note-target: 2;--z-note-detected: 3;--z-note-topmost: 4;--duration-fast: .15s;--duration-normal: .25s;--duration-slow: .4s;--duration-slower: .6s;--easing-linear: linear;--easing-ease: ease;--easing-ease-in: ease-in;--easing-ease-out: ease-out;--easing-ease-in-out: ease-in-out;--note-size-sm: 2rem;--note-size-md: 2.5rem;--note-size-lg: 3rem;--note-size-xl: 3.5rem;--note-shape-size: 70%;--note-shape-stroke: var(--border-width-2);--note-shape-inset: var(--space-2);--note-shape-radius: var(--border-radius-md);--note-shape-opacity: .6;--panel-gradient: linear-gradient(180deg, #121a27, #0f1622);--panel-border: var(--color-border);--panel-radius: var(--border-radius-2xl);--panel-shadow: var(--shadow-glow-strong);--panel-padding: var(--space-6);--button-radius: var(--border-radius-lg);--button-padding-x: var(--space-3);--button-padding-y: var(--space-2);--button-transition: all var(--duration-fast) var(--easing-ease);--input-radius: var(--border-radius-md);--input-padding-x: var(--space-2);--input-padding-y: var(--space-1);--input-border: var(--color-border-subtle);--input-background: rgba(255, 255, 255, .05);--volume-height: 12px;--volume-radius: var(--border-radius-md);--volume-gradient: linear-gradient(90deg, var(--color-accent), var(--color-warning), var(--color-error));--grid-gap: var(--space-4);--grid-gap-sm: var(--space-2);--grid-gap-lg: var(--space-6)}[data-theme=light]{--color-background: #ffffff;--color-surface: #f8fafc;--color-surface-elevated: #e2e8f0;--color-border: #e2e8f0;--color-border-subtle: #cbd5e1;--color-border-strong: #94a3b8;--color-text: #1e293b;--color-text-muted: #64748b;--color-text-subtle: #94a3b8;--color-text-inverse: #ffffff;--color-note-background: #f1f5f9;--color-note-border: var(--color-border);--panel-gradient: linear-gradient(180deg, #ffffff, #f8fafc);--panel-shadow: 0 4px 6px -1px rgb(0 0 0 / .1);--input-background: #ffffff;--input-border: var(--color-border-subtle);--shadow-glow: 0 0 15px rgba(79, 70, 229, .3)}[data-theme=high-contrast]{--color-background: #000000;--color-surface: #1a1a1a;--color-surface-elevated: #333333;--color-border: #ffffff;--color-border-subtle: #cccccc;--color-border-strong: #ffffff;--color-text: #ffffff;--color-text-muted: #cccccc;--color-text-subtle: #999999;--color-text-inverse: #000000;--color-note-detected: #00ff00;--color-note-target: #ff0000;--color-note-hit: #ffff00;--color-note-background: #1a1a1a;--color-note-border: #ffffff;--color-accent: #00ff00;--color-warning: #ffff00;--color-error: #ff0000;--panel-gradient: linear-gradient(180deg, #1a1a1a, #000000);--shadow-glow: 0 0 15px rgba(255, 255, 255, .5)}[data-theme=colorblind]{--color-note-detected: #0173b2;--color-note-target: #de8f05;--color-note-hit: #cc78bc;--color-accent: #0173b2;--color-warning: #de8f05;--color-error: #d55e00;--color-success: #029e73;--color-primary: #0173b2;--volume-gradient: linear-gradient(90deg, #029e73, #de8f05, #d55e00)}[data-theme=protanopia]{--color-note-detected: #005ab5;--color-note-target: #dc3220;--color-note-hit: #ffb14e;--color-accent: #005ab5;--color-warning: #ffb14e;--color-error: #dc3220;--color-success: #005ab5}[data-theme*=reduced-motion],[data-reduce-motion=true]{--duration-fast: 0ms;--duration-normal: 0ms;--duration-slow: 0ms;--duration-slower: 0ms}[data-size=compact]{--space-1: .125rem;--space-2: .25rem;--space-3: .5rem;--space-4: .75rem;--space-5: 1rem;--space-6: 1.25rem;--note-size-sm: 1.5rem;--note-size-md: 2rem;--note-size-lg: 2.5rem;--panel-padding: var(--space-4);--font-size-base: .875rem;--font-size-sm: .75rem}[data-size=large]{--space-1: .375rem;--space-2: .75rem;--space-3: 1rem;--space-4: 1.5rem;--space-5: 2rem;--space-6: 2.5rem;--note-size-sm: 2.5rem;--note-size-md: 3rem;--note-size-lg: 3.5rem;--panel-padding: var(--space-8);--font-size-base: 1.125rem;--font-size-lg: 1.25rem}.note{width:var(--note-size-md);height:var(--note-size-md);border-radius:var(--border-radius-md);border:var(--border-width-1) solid var(--color-note-border);background:var(--color-note-background);color:var(--color-text);font-size:var(--font-size-sm);font-weight:var(--font-weight-normal);-webkit-user-select:none;user-select:none;cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;transition:background var(--duration-fast) var(--easing-ease),box-shadow var(--duration-fast) var(--easing-ease),opacity var(--duration-fast) var(--easing-ease),transform var(--duration-fast) var(--easing-ease);z-index:var(--z-note-base)}.note--size-small{width:var(--note-size-sm);height:var(--note-size-sm);font-size:var(--font-size-xs)}.note--size-large{width:var(--note-size-lg);height:var(--note-size-lg);font-size:var(--font-size-base)}.note--size-xl{width:var(--note-size-xl);height:var(--note-size-xl);font-size:var(--font-size-lg)}.note--detected{background:var(--color-note-detected);color:var(--color-text-inverse);font-weight:var(--font-weight-semibold);z-index:var(--z-note-detected)}.note--targeted{outline:var(--border-width-2) solid var(--color-note-target);outline-offset:-2px;z-index:var(--z-note-target)}.note--hit{background:var(--color-note-hit);color:var(--color-text-inverse);outline:2px solid var(--color-note-hit);outline-offset:2px;animation:note-pulse var(--duration-slow) var(--easing-ease-out)}.note--pulse{animation:note-hit-pulse var(--duration-slow) var(--easing-ease-out)}.note--in-scale{opacity:1}.note--out-of-scale{opacity:.28;filter:grayscale(85%)}.note--hidden-out-of-scale{opacity:0;pointer-events:none}.note--detected-off-scale{background:#ff8a00!important;color:var(--color-text-inverse)!important;outline:2px solid #ff8a00;outline-offset:2px;opacity:1!important;filter:none!important;pointer-events:auto!important;z-index:var(--z-note-detected)!important}.note:focus{outline:2px solid var(--color-accent);outline-offset:2px}.note--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.note-shape{position:absolute;inset:var(--note-shape-inset);display:block;pointer-events:none;color:var(--note-color, currentColor);opacity:var(--note-shape-opacity)}.note-shape--circle{border-radius:var(--border-radius-full);border:var(--note-shape-stroke) solid currentColor}.note-shape--square{border-radius:var(--note-shape-radius);border:var(--note-shape-stroke) solid currentColor}.note-shape--diamond{border:var(--note-shape-stroke) solid currentColor;transform:rotate(45deg);border-radius:2px}@keyframes note-pulse{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes note-hit-pulse{0%{transform:scale(1);outline:2px solid var(--color-note-hit);outline-offset:2px}50%{transform:scale(1.1);outline:4px solid var(--color-note-hit);outline-offset:4px}to{transform:scale(1);outline:2px solid var(--color-note-hit);outline-offset:2px}}@keyframes target-pulse{0%,to{opacity:1;border-color:var(--color-note-target)}50%{opacity:.7;border-color:var(--color-note-target)}}.note--target-highlight{animation:target-pulse 2s infinite}[data-feature-note-hitpulse="1"] .note--pulse{animation:note-hit-pulse var(--duration-slow) var(--easing-ease-out)}[data-feature-note-hitpulse="0"] .note--pulse,[data-feature-note-hitpulse=off] .note--pulse{animation:none}[data-feature-note-shape="1"] .note-shape{display:block}[data-feature-note-shape="0"] .note-shape,[data-feature-note-shape=off] .note-shape{display:none}[data-feature-note-priority=off] .note:after{display:none}.note:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none;z-index:var(--z-note-topmost);background:transparent}[data-feature-note-priority="1"] .note--targeted,:not([data-feature-note-priority=off]) .note--targeted{outline:none}.panel--compact{margin-bottom:var(--space-4);border-radius:var(--border-radius-lg)}.panel--flush{margin-bottom:0}.panel--minimizable{transition:all var(--duration-slow) var(--easing-ease)}.panel-minimized{position:fixed;top:60px;right:var(--space-4);z-index:var(--z-floating, 1000);cursor:pointer;display:flex;align-items:center;gap:var(--space-2);transition:all var(--duration-fast) var(--easing-ease)}.panel-minimized:hover{transform:translate(-4px)}.panel-minimized__icon{width:48px;height:48px;background:var(--color-surface-elevated);border:var(--border-width-1) solid var(--panel-border);border-radius:var(--border-radius-full);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-lg);box-shadow:var(--shadow-lg);transition:all var(--duration-fast) var(--easing-ease);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative;overflow:hidden}.panel-minimized__icon:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left var(--duration-slow) var(--easing-ease)}.panel-minimized:hover .panel-minimized__icon{transform:scale(1.05);box-shadow:var(--shadow-xl);background:var(--color-surface)}.panel-minimized:hover .panel-minimized__icon:before{left:100%}.panel-minimized__status{position:absolute;top:-2px;right:-2px;pointer-events:none;z-index:1}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-5) var(--panel-padding);background:linear-gradient(90deg,var(--color-surface-elevated),var(--color-surface));border-bottom:var(--border-width-1) solid var(--panel-border);cursor:pointer;transition:background var(--duration-fast) var(--easing-ease)}.panel-header:hover{background:linear-gradient(90deg,#1e2a3f,#131c29)}.panel-header--not-collapsible{cursor:default}.panel-header--not-collapsible:hover{background:linear-gradient(90deg,var(--color-surface-elevated),var(--color-surface))}.panel-controls{display:flex;align-items:center;gap:var(--space-2)}.panel-title{margin:0;font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);display:flex;align-items:center;gap:var(--space-2)}.panel-subtitle{color:var(--color-text-muted);font-size:var(--font-size-sm);font-weight:var(--font-weight-normal);margin-left:var(--space-2)}.panel-status{display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--font-size-sm);color:var(--color-text-muted)}.panel-status-dot{width:var(--space-2);height:var(--space-2);border-radius:var(--border-radius-full);background:var(--color-inactive)}.panel-minimize-btn{background:none;border:none;color:var(--color-accent);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);cursor:pointer;padding:0;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius-full);transition:var(--button-transition)}.panel-minimize-btn:hover{background:#5ee1a91a;transform:scale(1.1)}.panel-minimize-btn:focus{outline:2px solid var(--color-accent);outline-offset:2px}.panel-collapse-btn{background:none;border:none;color:var(--color-accent);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius-full);transition:var(--button-transition)}.panel-collapse-btn:hover{background:#5ee1a91a;transform:scale(1.1)}.panel-collapse-btn:focus{outline:2px solid var(--color-accent);outline-offset:2px}.panel-content{padding:var(--panel-padding);transition:max-height var(--duration-slow) var(--easing-ease),opacity var(--duration-slow) var(--easing-ease);overflow:hidden}.panel-content--collapsed{max-height:0;padding-top:0;padding-bottom:0;opacity:0}.panel--warning{border-color:var(--color-warning)}.panel--error{border-color:var(--color-error)}.panel--success{border-color:var(--color-success)}.panel-minimized--audio{z-index:calc(var(--z-floating, 1000) + 1)}.panel-minimized--string-practice{z-index:var(--z-floating, 1000)}.panel-status-dot{width:var(--space-3);height:var(--space-3);border-radius:var(--border-radius-full);background:var(--color-inactive);transition:all var(--duration-fast) var(--easing-ease)}.panel-status-dot--active{background:var(--color-listening);animation:status-pulse 2s infinite}.panel-status-dot--success{background:var(--color-active)}.panel-status-dot--error{background:var(--color-error)}@keyframes status-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.1)}}@keyframes panel-minimize{0%{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes panel-restore{0%{opacity:.8;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}.panel--minimizing{animation:panel-minimize var(--duration-fast) var(--easing-ease)}.panel--restoring{animation:panel-restore var(--duration-fast) var(--easing-ease)}@media (max-width: 768px){.panel{border-radius:var(--border-radius-xl);margin-bottom:var(--space-6)}.panel-header,.panel-content{padding:var(--space-4)}.panel-title{font-size:var(--font-size-lg)}}.panel__overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:100;animation:panel-overlay-fade-in .3s ease;cursor:pointer}.panel__overlay-content{max-width:90%;max-height:90%;overflow:auto;animation:panel-overlay-slide-up .4s ease;cursor:default}@keyframes panel-overlay-fade-in{0%{opacity:0}to{opacity:1}}@keyframes panel-overlay-slide-up{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@media (prefers-reduced-motion: reduce){.panel__overlay,.panel__overlay-content{animation:none}}.btn{background:var(--color-surface);color:var(--color-text);border:var(--border-width-1) solid var(--color-border-subtle);border-radius:var(--button-radius);padding:var(--button-padding-y) var(--button-padding-x);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);font-family:inherit;cursor:pointer;transition:var(--button-transition);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);text-decoration:none;-webkit-user-select:none;user-select:none}.btn:hover:not(:disabled){background:var(--color-surface-elevated);border-color:var(--color-border-strong);transform:translateY(-1px)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:focus{outline:2px solid var(--color-accent);outline-offset:2px}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.btn--primary{background:var(--color-accent);color:var(--color-text-inverse);border-color:var(--color-accent)}.btn--primary:hover:not(:disabled){background:#5ea891;border-color:#5ea891}.btn--secondary{background:var(--color-primary);color:var(--color-text-inverse);border-color:var(--color-primary)}.btn--warning{background:var(--color-warning);color:var(--color-text-inverse);border-color:var(--color-warning)}.btn--error{background:var(--color-error);color:var(--color-text-inverse);border-color:var(--color-error)}.btn--success{background:var(--color-success);color:var(--color-text-inverse);border-color:var(--color-success)}.btn--ghost{background:transparent;border-color:transparent}.btn--ghost:hover:not(:disabled){background:var(--color-surface);border-color:var(--color-border)}.btn--outline{background:transparent;color:var(--color-accent);border-color:var(--color-accent)}.btn--outline:hover:not(:disabled){background:var(--color-accent);color:var(--color-text-inverse)}.btn--small{padding:var(--space-1) var(--space-2);font-size:var(--font-size-xs);border-radius:var(--border-radius-sm)}.btn--large{padding:var(--space-3) var(--space-5);font-size:var(--font-size-base);border-radius:var(--border-radius-xl)}.btn--xl{padding:var(--space-4) var(--space-6);font-size:var(--font-size-lg);border-radius:var(--border-radius-xl)}.btn--full-width{width:100%}.btn--icon-only{padding:var(--button-padding-y);aspect-ratio:1}.btn-group{display:flex;gap:var(--space-2)}.btn-group--attached .btn{border-radius:0}.btn-group--attached .btn:first-child{border-top-left-radius:var(--button-radius);border-bottom-left-radius:var(--button-radius)}.btn-group--attached .btn:last-child{border-top-right-radius:var(--button-radius);border-bottom-right-radius:var(--button-radius)}.btn-group--attached .btn:not(:first-child){border-left-width:0}.btn--toggle{position:relative}.btn--toggle:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:var(--color-accent);opacity:0;transition:opacity var(--duration-fast) var(--easing-ease)}.btn--toggle.is-active:before{opacity:.1}.btn--toggle.is-active{color:var(--color-accent);border-color:var(--color-accent)}@media (max-width: 768px){.btn{padding:var(--space-3) var(--space-4);font-size:var(--font-size-base)}.btn--small{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm)}}.form-group{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-4)}.form-group--inline{flex-direction:row;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3)}.form-label{display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text);margin-bottom:var(--space-1)}.form-label--required:after{content:" *";color:var(--color-error)}.form-input{background:var(--input-background);color:var(--color-text);border:var(--border-width-1) solid var(--input-border);border-radius:var(--input-radius);padding:var(--input-padding-y) var(--input-padding-x);font-size:var(--font-size-sm);font-family:inherit;transition:var(--button-transition);width:100%}.form-input:focus{outline:none;border-color:var(--color-accent);background:#ffffff1a;box-shadow:0 0 0 3px #5ee1a91a}.form-input:disabled{opacity:.5;cursor:not-allowed;background:var(--color-surface)}.form-input--error{border-color:var(--color-error)}.form-input--success{border-color:var(--color-success)}.form-select{background:var(--input-background);color:var(--color-text);border:var(--border-width-1) solid var(--input-border);border-radius:var(--input-radius);padding:var(--input-padding-y) var(--input-padding-x);font-size:var(--font-size-sm);font-family:inherit;cursor:pointer;transition:var(--button-transition);width:100%}.form-select:focus{outline:none;border-color:var(--color-accent);background:#ffffff1a}.form-range{width:100%;height:6px;background:var(--color-border);border-radius:var(--border-radius-sm);outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-range::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;background:var(--color-accent);border-radius:var(--border-radius-full);cursor:pointer;box-shadow:0 2px 6px #5ee1a94d;transition:var(--button-transition)}.form-range::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 4px 12px #5ee1a966}.form-range::-moz-range-thumb{width:18px;height:18px;background:var(--color-accent);border-radius:var(--border-radius-full);cursor:pointer;border:none;box-shadow:0 2px 6px #5ee1a94d}.form-checkbox,.form-radio{width:18px;height:18px;accent-color:var(--color-accent);cursor:pointer}.form-checkbox-group,.form-radio-group{display:flex;flex-direction:column;gap:var(--space-2)}.form-checkbox-group--inline,.form-radio-group--inline{flex-direction:row;gap:var(--space-4)}.form-checkbox-label,.form-radio-label{display:flex;align-items:center;gap:var(--space-2);cursor:pointer;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.form-input--small,.form-select--small{padding:var(--space-1) var(--space-2);font-size:var(--font-size-xs)}.form-input--large,.form-select--large{padding:var(--space-3) var(--space-4);font-size:var(--font-size-base)}.form-input--narrow{width:auto;min-width:60px}.form-input--medium{width:auto;min-width:120px}.form-input--wide{width:100%}.form-error{font-size:var(--font-size-xs);color:var(--color-error);margin-top:var(--space-1)}.form-help{font-size:var(--font-size-xs);color:var(--color-text-muted);margin-top:var(--space-1)}.form-row{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:end}.form-row>.form-group{flex:1;margin-bottom:0}@media (max-width: 768px){.form-row{flex-direction:column;align-items:stretch}.form-group--inline{flex-direction:column;align-items:flex-start}}.volume-meter{position:relative;height:var(--volume-height);background:var(--color-background);border-radius:var(--volume-radius);overflow:hidden;border:var(--border-width-1) solid var(--color-border)}.volume-bar{height:100%;border-radius:var(--volume-radius);transition:width .1s var(--easing-ease-out);background:var(--volume-gradient)}.volume-bar--low{background:var(--color-accent)}.volume-bar--medium{background:var(--color-warning)}.volume-bar--high{background:var(--color-error)}.volume-gate-line{position:absolute;top:0;bottom:0;width:2px;background:var(--color-text);transform:translate(-50%);opacity:.8;z-index:var(--z-base)}@media (max-width: 768px){.volume-meter{height:calc(var(--volume-height) * 1.2)}}.exercise-panel{display:flex;flex-direction:column;gap:var(--space-4)}.exercise-panel__controls{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:center;padding:var(--space-4);background:var(--color-surface-elevated);border-radius:var(--border-radius-lg);border:var(--border-width-1) solid var(--color-border)}.exercise-panel__label{font-weight:var(--font-weight-semibold);color:var(--color-text);font-size:var(--font-size-sm);display:flex;align-items:center;gap:var(--space-1)}.exercise-panel__button{padding:var(--space-2) var(--space-3);background:var(--color-accent);color:var(--color-text-inverse);border:none;border-radius:var(--border-radius-md);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);cursor:pointer;transition:var(--button-transition)}.exercise-panel__button:focus-visible{outline:var(--border-width-2) solid var(--color-accent);outline-offset:var(--space-1)}.exercise-panel__button:hover:not(:disabled){background:var(--color-success);transform:translateY(-1px);box-shadow:var(--shadow-md)}.exercise-panel__button:active:not(:disabled){transform:translateY(0);box-shadow:var(--shadow-sm)}.exercise-panel__button:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.exercise-panel__button--small{padding:var(--space-1) var(--space-2);font-size:var(--font-size-2xs)}.exercise-panel__button--demo{background:var(--color-warning);color:var(--color-text);border:var(--border-width-1) solid var(--color-warning-subtle)}.exercise-panel__button--demo:hover:not(:disabled){background:var(--color-warning-hover);border-color:var(--color-warning)}.exercise-panel__checkbox-label{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-xs);color:var(--color-text-muted);cursor:pointer;padding:var(--space-2);border-radius:var(--border-radius-md);transition:var(--duration-fast)}.exercise-panel__checkbox-label:hover{background:var(--color-surface);color:var(--color-text)}.exercise-panel__checkbox-label input[type=checkbox]{accent-color:var(--color-accent);transform:scale(1.1)}.exercise-panel__remaining-count{font-size:var(--font-size-xs);color:var(--color-text-muted);padding:var(--space-1) var(--space-2);background:var(--color-surface);border-radius:var(--border-radius-sm);border:var(--border-width-1) solid var(--color-border-subtle)}.exercise-panel__description{padding:var(--space-4);background:var(--color-surface);border-radius:var(--border-radius-lg);border-left:var(--border-width-4) solid var(--color-accent);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed);color:var(--color-text-muted)}.exercise-panel__description p{margin-bottom:var(--space-3)}.exercise-panel__description p:last-child{margin-bottom:0}.exercise-panel__description strong{color:var(--color-text);font-weight:var(--font-weight-semibold)}.exercise-panel__section{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);background:var(--color-surface);border-radius:var(--border-radius-lg);border:var(--border-width-1) solid var(--color-border)}.exercise-panel__section-title{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text);display:flex;align-items:center;gap:var(--space-2)}.exercise-panel__section-subtitle{font-size:var(--font-size-xs);font-weight:var(--font-weight-normal);color:var(--color-text-muted);margin-left:var(--space-2)}.exercise-panel__note-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--note-size-sm),1fr));gap:var(--space-2);padding:var(--space-2);background:var(--color-background);border-radius:var(--border-radius-md);border:var(--border-width-1) solid var(--color-border-subtle);min-height:80px}.exercise-panel__note-pool .note{font-size:var(--font-size-xs);width:var(--note-size-sm);height:var(--note-size-sm);opacity:.8;border-color:var(--color-border-subtle);background:var(--color-surface-elevated);transition:all var(--duration-fast) var(--easing-ease)}.exercise-panel__note-pool .note:hover{opacity:1;background:var(--color-accent);color:var(--color-text-inverse);border-color:var(--color-accent);transform:scale(1.05);box-shadow:var(--shadow-md)}.exercise-panel__note-targets .note{font-size:var(--font-size-xs);width:var(--note-size-sm);height:var(--note-size-sm);border-color:var(--color-note-target);background:#f9c74f1a;position:relative}.exercise-panel__note-targets .note:after{content:"🎯";position:absolute;top:-2px;right:-2px;font-size:8px;background:var(--color-note-target);border-radius:var(--border-radius-full);display:flex;align-items:center;justify-content:center}.exercise-panel__note-targets .note:hover{background:var(--color-error);color:var(--color-text-inverse);border-color:var(--color-error);transform:scale(1.05)}.exercise-panel__empty-state{text-align:center;padding:var(--space-8);color:var(--color-text-muted);background:var(--color-surface-elevated);border-radius:var(--border-radius-lg);border:var(--border-width-2) dashed var(--color-border-subtle);grid-column:1 / -1}.exercise-panel__empty-state p{margin-bottom:var(--space-2);font-size:var(--font-size-sm)}.exercise-panel__empty-state p:first-child{font-weight:var(--font-weight-semibold);color:var(--color-text)}.exercise-panel__empty-state p:last-child{margin-bottom:0;font-size:var(--font-size-xs)}.exercise-panel__session-section{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-4);background:var(--color-surface);border-radius:var(--border-radius-lg);border:var(--border-width-1) solid var(--color-border);border-left:var(--border-width-4) solid var(--color-success)}.exercise-panel__session-controls{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:center}.exercise-panel__button--primary{background:var(--color-success);border-color:var(--color-success)}.exercise-panel__button--secondary{background:var(--color-warning);border-color:var(--color-warning)}.exercise-panel__button--danger{background:var(--color-error);border-color:var(--color-error)}.exercise-panel__form-group{display:flex;flex-direction:column;gap:var(--space-1);min-width:150px}.exercise-panel__form-label{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text)}.exercise-panel__select,.exercise-panel__number-input{padding:var(--space-2);border:var(--border-width-1) solid var(--color-border);border-radius:var(--border-radius-md);background:var(--color-surface-elevated);color:var(--color-text);font-size:var(--font-size-xs);transition:var(--duration-fast)}.exercise-panel__select:focus,.exercise-panel__number-input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 2px #5ee1a933}.exercise-panel__form-help{font-size:var(--font-size-xs);color:var(--color-text-muted);font-style:italic}.exercise-panel__progress-section{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-4);background:var(--color-background);border-radius:var(--border-radius-md);border:var(--border-width-1) solid var(--color-border-subtle)}.exercise-panel__progress-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--space-3)}.exercise-panel__metric{display:flex;flex-direction:column;align-items:center;padding:var(--space-3);background:var(--color-surface-elevated);border-radius:var(--border-radius-md);border:var(--border-width-1) solid var(--color-border-subtle)}.exercise-panel__metric-label{font-size:var(--font-size-xs);color:var(--color-text-muted);margin-bottom:var(--space-1);font-weight:var(--font-weight-medium)}.exercise-panel__metric-value{font-size:var(--font-size-lg);color:var(--color-text);font-weight:var(--font-weight-bold);font-family:var(--font-family-mono)}.exercise-panel__progress-container{display:flex;flex-direction:column;gap:var(--space-2)}.exercise-panel__progress-label{font-size:var(--font-size-sm);color:var(--color-text);font-weight:var(--font-weight-semibold)}.exercise-panel__progress-bar{height:20px;background:var(--color-background);border-radius:var(--border-radius-md);border:var(--border-width-1) solid var(--color-border-subtle);overflow:hidden;position:relative}.exercise-panel__progress-fill{height:100%;background:linear-gradient(90deg,var(--color-success),var(--color-accent));border-radius:var(--border-radius-md);position:relative;min-width:4px}.exercise-panel__progress-fill:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:progress-shine 2s ease-in-out infinite}@keyframes progress-shine{0%{transform:translate(-100%)}to{transform:translate(100%)}}.exercise-panel__session-history{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);background:var(--color-surface-elevated);border-radius:var(--border-radius-md);border:var(--border-width-1) solid var(--color-border-subtle)}.exercise-panel__history-title{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text)}.exercise-panel__history-list{display:flex;flex-direction:column;gap:var(--space-1);max-height:150px;overflow-y:auto}.exercise-panel__history-item{display:flex;gap:var(--space-2);padding:var(--space-2);background:var(--color-background);border-radius:var(--border-radius-sm);border-left:var(--border-width-3) solid var(--color-border);font-size:var(--font-size-xs)}.exercise-panel__history-item--hit{border-left-color:var(--color-success)}.exercise-panel__history-item--miss{border-left-color:var(--color-error)}.exercise-panel__history-item--session_start{border-left-color:var(--color-accent)}.exercise-panel__history-item--session_end{border-left-color:var(--color-warning)}.exercise-panel__history-time{color:var(--color-text-muted);font-family:var(--font-family-mono);min-width:60px}.exercise-panel__history-event{color:var(--color-text);flex:1}.exercise-panel__section--debug{background:var(--color-surface-elevated);border-color:var(--color-warning);border-left:var(--border-width-4) solid var(--color-warning)}.exercise-panel__debug-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-2);font-family:var(--font-family-mono);font-size:var(--font-size-xs)}.exercise-panel__debug-item{padding:var(--space-2);background:var(--color-background);border-radius:var(--border-radius-sm);border:var(--border-width-1) solid var(--color-border-subtle);color:var(--color-text-muted)}.exercise-panel__debug-item strong{color:var(--color-warning);font-weight:var(--font-weight-semibold)}@media (max-width: 768px){.exercise-panel__controls{flex-direction:column;align-items:stretch;gap:var(--space-2)}.exercise-panel__button{text-align:center;padding:var(--space-3)}.exercise-panel__note-grid{grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:var(--space-1)}.exercise-panel__debug-info{grid-template-columns:1fr}.exercise-panel__session-controls{flex-direction:column;align-items:stretch}.exercise-panel__form-group{min-width:auto}.exercise-panel__progress-metrics{grid-template-columns:repeat(2,1fr)}.exercise-panel__history-list{max-height:100px}}@media (max-width: 480px){.exercise-panel{gap:var(--space-3)}.exercise-panel__section{padding:var(--space-3)}.exercise-panel__description{padding:var(--space-3);font-size:var(--font-size-xs)}.exercise-panel__progress-metrics{grid-template-columns:1fr}.exercise-panel__metric{flex-direction:row;justify-content:space-between;align-items:center}.exercise-panel__metric-label{margin-bottom:0}}.exercise-panel__note-grid .note:focus-visible{outline:var(--border-width-2) solid var(--color-accent);outline-offset:var(--space-1);z-index:var(--z-note-topmost)}@media (prefers-contrast: high){.exercise-panel__button{border:var(--border-width-2) solid currentColor}.exercise-panel__note-pool .note,.exercise-panel__note-targets .note{border-width:var(--border-width-2)}}@media (prefers-reduced-motion: reduce){.exercise-panel__button,.exercise-panel__note-grid .note{transition:none;transform:none!important}}[data-feature-animations="1"] .exercise-panel__button:hover{animation:button-pulse .3s ease-out}@keyframes button-pulse{0%{transform:translateY(-1px) scale(1)}50%{transform:translateY(-2px) scale(1.02)}to{transform:translateY(-1px) scale(1)}}[data-theme=colorblind] .exercise-panel__note-targets .note{border-color:var(--color-accent);background:#5ee1a91a}[data-theme=high-contrast] .exercise-panel__section{border-width:var(--border-width-2);border-color:var(--color-border-strong)}.exercise-panel__win-demo{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-4);background:var(--color-surface);border-radius:var(--border-radius-lg);border:var(--border-width-1) solid var(--color-border);border-left:var(--border-width-4) solid var(--color-warning)}.exercise-panel__win-demo-info{display:flex;flex-direction:column;gap:var(--space-3);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed);color:var(--color-text-muted)}.exercise-panel__win-demo-info p{margin:0}.exercise-panel__win-demo-info strong{color:var(--color-text);font-weight:var(--font-weight-semibold)}.exercise-panel__win-demo-active{background:var(--color-warning-bg);color:var(--color-warning-text);padding:var(--space-3);border-radius:var(--border-radius-md);border:var(--border-width-1) solid var(--color-warning);animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.01)}}.exercise-panel__hit-detection{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-4);background:var(--color-surface);border-radius:var(--border-radius-lg);border:var(--border-width-1) solid var(--color-border);border-left:var(--border-width-4) solid var(--color-accent)}.exercise-panel__stats-container{display:flex;gap:var(--space-4);align-items:center;flex-wrap:wrap}.exercise-panel__stat-box{border:var(--border-width-1) solid var(--color-border);border-radius:var(--border-radius-md);padding:var(--space-3);min-width:100px;text-align:center;transition:all var(--duration-normal) var(--easing-ease);background:var(--color-surface-elevated)}.exercise-panel__stat-box--highlight{background:var(--color-success-bg, rgba(34, 197, 94, .1));border-color:var(--color-success);box-shadow:var(--shadow-md);animation:stat-highlight .5s ease-out}.exercise-panel__stat-box--highlight-miss{background:var(--color-error-bg, rgba(239, 68, 68, .1));border-color:var(--color-error);box-shadow:var(--shadow-md);animation:stat-highlight .5s ease-out}@keyframes stat-highlight{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.exercise-panel__stat-label{font-weight:var(--font-weight-semibold);font-size:var(--font-size-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px}.exercise-panel__stat-value{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);margin:var(--space-1) 0;color:var(--color-text);font-family:var(--font-family-mono)}.exercise-panel__stat-detail{font-size:var(--font-size-xs);color:var(--color-text-muted);font-family:var(--font-family-mono)}.exercise-panel__button--win-demo{background:linear-gradient(135deg,var(--color-warning),var(--color-accent));color:var(--color-text-inverse);font-weight:var(--font-weight-semibold);box-shadow:var(--shadow-sm);position:relative;overflow:hidden}.exercise-panel__button--win-demo:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left var(--duration-slow)}.exercise-panel__button--win-demo:hover:not(:disabled):before{left:100%}.exercise-panel__button--win-demo:hover:not(:disabled){background:linear-gradient(135deg,var(--color-success),var(--color-accent));box-shadow:var(--shadow-lg);transform:translateY(-2px)}.exercise-panel__button--small{font-size:var(--font-size-xs);padding:var(--space-1) var(--space-2);min-width:auto}.exercise-panel__hit-info{background:var(--color-background);border-radius:var(--border-radius-md);padding:var(--space-3);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed);border:var(--border-width-1) solid var(--color-border-subtle)}.exercise-panel__hit-info ul{margin:var(--space-2) 0;padding-left:var(--space-4)}.exercise-panel__hit-info li{margin-bottom:var(--space-1)}.exercise-panel__hit-info strong{color:var(--color-text);font-weight:var(--font-weight-semibold)}.exercise-panel__event-feedback{min-height:40px;display:flex;align-items:center;gap:var(--space-2);justify-content:center}.exercise-panel__hit-feedback,.exercise-panel__miss-feedback{padding:var(--space-2) var(--space-3);border-radius:var(--border-radius-md);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);animation:feedback-slide-in .3s ease;display:flex;align-items:center;gap:var(--space-1)}.exercise-panel__hit-feedback{background:var(--color-success-bg, rgba(34, 197, 94, .1));color:var(--color-success);border:var(--border-width-1) solid var(--color-success)}.exercise-panel__miss-feedback{background:var(--color-error-bg, rgba(239, 68, 68, .1));color:var(--color-error);border:var(--border-width-1) solid var(--color-error)}.exercise-panel__hit-icon,.exercise-panel__miss-icon{display:inline-flex;align-items:center;justify-content:center;font-size:var(--font-size-lg);width:20px;height:20px}@keyframes feedback-slide-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion: reduce){.exercise-panel__stat-box--highlight,.exercise-panel__stat-box--highlight-miss,.exercise-panel__hit-feedback,.exercise-panel__miss-feedback{animation:none}}.exercise-panel__sequence-controls{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-4);background:var(--color-surface-elevated);border-radius:var(--border-radius-lg);border:var(--border-width-1) solid var(--color-border)}.exercise-panel__control-group{display:flex;flex-direction:column;gap:var(--space-2)}.exercise-panel__checkbox-label{display:flex;align-items:center;gap:var(--space-2);font-weight:var(--font-weight-semibold);color:var(--color-text);cursor:pointer;padding:var(--space-2);border-radius:var(--border-radius-md);transition:background-color .2s ease}.exercise-panel__checkbox-label:hover{background:var(--color-surface-hover)}.exercise-panel__checkbox-label input[type=checkbox]{width:var(--space-4);height:var(--space-4);accent-color:var(--color-primary)}.exercise-panel__help-text{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0;padding-left:var(--space-6)}.exercise-panel__sequence-creation{display:flex;gap:var(--space-2);flex-wrap:wrap}.exercise-panel__preset-sequences{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}.exercise-panel__preset-label{font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);font-size:var(--font-size-sm)}.exercise-panel__button--small{padding:var(--space-1) var(--space-3);font-size:var(--font-size-sm);min-height:auto}.exercise-panel__sequence-display{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-4);background:var(--color-surface);border-radius:var(--border-radius-lg);border:var(--border-width-2) solid var(--color-primary-alpha-20)}.exercise-panel__sequence-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-2)}.exercise-panel__sequence-title{margin:0;font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-text)}.exercise-panel__sequence-progress{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-sm);color:var(--color-text-secondary);font-weight:var(--font-weight-semibold)}.exercise-panel__sequence-completed{color:var(--color-success);font-weight:var(--font-weight-bold);animation:pulse .5s ease-in-out}.exercise-panel__sequence-notes{display:flex;flex-wrap:wrap;gap:var(--space-1);padding:var(--space-2);background:var(--color-surface-elevated);border-radius:var(--border-radius-md);border:var(--border-width-1) solid var(--color-border)}.exercise-panel__sequence-note{position:relative;display:flex;align-items:center;justify-content:center;min-width:var(--space-12);height:var(--space-10);border-radius:var(--border-radius-md);border:var(--border-width-2) solid var(--color-border);background:var(--color-surface);transition:all .2s ease;cursor:default}.exercise-panel__sequence-note-content{display:flex;align-items:center;gap:var(--space-1)}.exercise-panel__sequence-note-text{font-weight:var(--font-weight-bold);font-size:var(--font-size-sm)}.exercise-panel__sequence-note-indicator{font-size:var(--font-size-lg);color:var(--color-primary);animation:bounce 1s infinite}.exercise-panel__sequence-note--current{border-color:var(--color-primary);background:var(--color-primary-alpha-10);color:var(--color-primary);box-shadow:0 0 0 var(--border-width-1) var(--color-primary-alpha-30);transform:scale(1.05)}.exercise-panel__sequence-note--completed{border-color:var(--color-success);background:var(--color-success-alpha-10);color:var(--color-success)}.exercise-panel__sequence-note--completed .exercise-panel__sequence-note-text:after{content:" ✓";color:var(--color-success);font-weight:var(--font-weight-bold)}.exercise-panel__sequence-note--pending{border-color:var(--color-border);background:var(--color-surface-muted);color:var(--color-text-tertiary);opacity:.7}.exercise-panel__sequence-actions{display:flex;gap:var(--space-2);flex-wrap:wrap}.exercise-panel__sequence-info{padding:var(--space-3);background:var(--color-surface-elevated);border-radius:var(--border-radius-md);border-left:var(--border-width-4) solid var(--color-info)}.exercise-panel__sequence-info p{margin:0 0 var(--space-2) 0;font-size:var(--font-size-sm);line-height:var(--line-height-relaxed)}.exercise-panel__sequence-info p:last-child{margin-bottom:0}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes bounce{0%,20%,50%,80%,to{transform:translate(0)}40%{transform:translate(-3px)}60%{transform:translate(3px)}}@media (max-width: 768px){.exercise-panel__sequence-header{flex-direction:column;align-items:flex-start}.exercise-panel__sequence-notes{justify-content:center}.exercise-panel__preset-sequences{flex-direction:column;align-items:flex-start}.exercise-panel__sequence-actions,.exercise-panel__sequence-creation{flex-direction:column}}.exercise-panel__checkbox-label:focus-within{outline:var(--border-width-2) solid var(--color-focus);outline-offset:var(--space-1)}.exercise-panel__sequence-note:focus{outline:var(--border-width-2) solid var(--color-focus);outline-offset:var(--space-1)}@media (prefers-reduced-motion: reduce){.exercise-panel__sequence-note-indicator,.exercise-panel__sequence-completed{animation:none}.exercise-panel__sequence-note,.exercise-panel__checkbox-label{transition:none}}.fretboard-controls{display:flex;flex-direction:column;gap:var(--space-4)}.fretboard-controls__row{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}.fretboard-controls__label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text);min-width:80px}.fretboard-controls__select,.fretboard-controls__input{padding:var(--input-padding-y) var(--input-padding-x);border:var(--border-width-1) solid var(--input-border);border-radius:var(--input-radius);background:var(--input-background);color:var(--color-text);font-size:var(--font-size-sm);transition:var(--button-transition)}.fretboard-controls__select:focus,.fretboard-controls__input:focus{outline:none;border-color:var(--color-accent);background:var(--color-surface-elevated)}.fretboard-controls__checkbox{accent-color:var(--color-accent);transform:scale(1.2)}@media (max-width: 768px){.fretboard-controls__row{flex-direction:column;align-items:flex-start}.fretboard-controls__label{min-width:auto}}.developer-panel{position:fixed;top:var(--space-4);right:var(--space-4);width:300px;max-height:80vh;overflow-y:auto;background:var(--color-surface-elevated);border:var(--border-width-1) solid var(--color-border);border-radius:var(--border-radius-xl);box-shadow:var(--shadow-xl);z-index:var(--z-modal);font-family:var(--font-family-base)}.developer-panel__toggle{position:fixed;top:var(--space-4);right:var(--space-4);background:var(--color-accent);color:var(--color-text-inverse);border:none;border-radius:var(--border-radius-full);width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:var(--font-size-lg);box-shadow:var(--shadow-lg);z-index:var(--z-modal);transition:var(--button-transition)}.developer-panel__toggle:hover{transform:scale(1.05);box-shadow:var(--shadow-xl)}.developer-panel__content{padding:var(--space-6)}.developer-panel__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-4)}.developer-panel__title{margin:0;font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold)}.developer-panel__close{background:none;border:none;font-size:var(--font-size-xl);cursor:pointer;color:var(--color-text-muted);padding:var(--space-1);border-radius:var(--border-radius-md);transition:var(--button-transition)}.developer-panel__close:hover{background:var(--color-surface);color:var(--color-text)}.developer-panel__section{margin-bottom:var(--space-4)}.developer-panel__section-title{margin-bottom:var(--space-2);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text)}.developer-panel__grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}.developer-panel__grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--space-2)}.developer-panel__feature-list{display:flex;flex-direction:column;gap:var(--space-2)}.developer-panel__feature-item{display:flex;justify-content:space-between;align-items:center;padding:var(--space-2);background:var(--color-surface);border-radius:var(--border-radius-md);border:var(--border-width-1) solid var(--color-border);transition:background var(--duration-fast) var(--easing-ease)}.developer-panel__feature-item:hover{background:var(--color-background)}.developer-panel__feature-label{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-text)}.developer-panel__feature-toggle{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:32px;height:18px;background:var(--color-border);border-radius:var(--border-radius-full);position:relative;cursor:pointer;transition:background var(--duration-fast) var(--easing-ease)}.developer-panel__feature-toggle:checked{background:var(--color-accent)}.developer-panel__feature-toggle:before{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;background:var(--color-text-inverse);border-radius:var(--border-radius-full);transition:transform var(--duration-fast) var(--easing-ease)}.developer-panel__feature-toggle:checked:before{transform:translate(14px)}.developer-panel__theme-info{padding:var(--space-3);background:var(--color-background);border-radius:var(--border-radius-md);border:var(--border-width-1) solid var(--color-border);font-size:var(--font-size-xs);color:var(--color-text-muted);line-height:1.4}.developer-panel__button,.developer-panel__button--compact{font-size:var(--font-size-xs);padding:var(--space-1) var(--space-2)}.string-learner-panel{padding:var(--space-6);position:relative}.string-learner-panel__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-6);gap:var(--space-4)}.string-learner-panel__title{font-size:var(--font-size-lg);font-weight:600;color:var(--color-text);margin:0}.string-learner-panel__mode-controls{display:flex;gap:var(--space-2)}.string-learner-panel__mode-button{padding:var(--space-2) var(--space-4);border:1px solid var(--color-border);border-radius:var(--border-radius-md);background:var(--color-surface);color:var(--color-text-muted);cursor:pointer;transition:all .2s ease;font-size:var(--font-size-sm)}.string-learner-panel__mode-button:hover{background:var(--color-surface-elevated)}.string-learner-panel__mode-button--active{background:var(--color-accent);color:var(--color-text-inverse);border-color:var(--color-accent)}.string-learner-panel__content{display:flex;flex-direction:column;gap:var(--space-6)}.string-learner-panel__target-section{text-align:center;padding:var(--space-8);background:var(--color-surface);border-radius:var(--border-radius-lg);border:2px solid var(--color-border);min-height:140px;display:flex;flex-direction:column;align-items:center;justify-content:center}.string-learner-panel__fret-hint{margin-top:var(--space-3);padding:var(--space-1) var(--space-3);border-radius:var(--border-radius-full);background:var(--color-surface-elevated);border:1px solid var(--color-border);color:var(--color-text);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);box-shadow:var(--shadow-sm)}.string-learner-panel__target-label{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-bottom:var(--space-2);text-transform:uppercase;letter-spacing:.5px}.string-learner-panel__target-note{margin:0 auto var(--space-4);display:flex;justify-content:center;filter:drop-shadow(0 2px 8px rgba(0,0,0,.2))}.string-learner-panel__target-note .note{transform:scale(2);background:var(--note-color);color:var(--color-text-inverse);font-weight:var(--font-weight-bold);border:2px solid rgba(255,255,255,.3);box-shadow:0 4px 12px #0000004d}.string-learner-panel__target-info{font-size:var(--font-size-sm);color:var(--color-text-muted)}.string-learner-panel__progress-section{display:flex;flex-direction:column;gap:var(--space-4)}.string-learner-panel__progress-item{display:flex;justify-content:space-between;align-items:center;padding:var(--space-2) var(--space-4);background:var(--color-surface);border-radius:var(--border-radius-md);border:1px solid var(--color-border)}.string-learner-panel__progress-item--active{background:#5ee1a91a;border-color:var(--color-accent)}.string-learner-panel__progress-label{font-size:var(--font-size-sm);color:var(--color-text);font-weight:500}.string-learner-panel__progress-value{font-size:var(--font-size-sm);color:var(--color-text-muted);font-family:monospace}.string-learner-panel__string-selector{display:flex;gap:var(--space-2);justify-content:center;margin-bottom:var(--space-4)}.string-learner-panel__string-button{width:40px;height:40px;border:2px solid var(--color-border);border-radius:50%;background:var(--color-surface);color:var(--color-text-muted);cursor:pointer;transition:all .2s ease;font-weight:600;font-size:var(--font-size-sm);display:flex;align-items:center;justify-content:center}.string-learner-panel__string-button:hover{background:var(--color-surface-elevated);border-color:var(--color-accent)}.string-learner-panel__string-button--active{background:var(--color-accent);color:var(--color-text-inverse);border-color:var(--color-accent)}.string-learner-panel__string-button--completed{background:var(--color-success);color:#fff;border-color:var(--color-success)}.string-learner-panel__settings{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4);background:var(--color-surface);border-radius:var(--border-radius-lg);border:1px solid var(--color-border)}.string-learner-panel__settings-title{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text);margin-bottom:var(--space-2)}.string-learner-panel__setting{display:flex;align-items:center;gap:var(--space-2)}.string-learner-panel__setting label{font-size:var(--font-size-sm);color:var(--color-text-muted);cursor:pointer}.string-learner-panel__completion{text-align:center;padding:var(--space-8);background:var(--color-success);color:#fff;border-radius:var(--border-radius-lg);animation:completionPulse .5s ease-out}.string-learner-panel__completion-title{font-size:var(--font-size-lg);font-weight:600;margin-bottom:var(--space-2)}.string-learner-panel__completion-stats{font-size:var(--font-size-sm);opacity:.9}.string-learner-panel__restart-button{margin-top:var(--space-4);padding:var(--space-2) var(--space-6);background:#fff3;border:1px solid rgba(255,255,255,.3);border-radius:var(--border-radius-md);color:#fff;cursor:pointer;transition:all .2s ease;font-size:var(--font-size-sm)}.string-learner-panel__restart-button:hover{background:#ffffff4d}@keyframes completionPulse{0%{transform:scale(.95);opacity:0}50%{transform:scale(1.02)}to{transform:scale(1);opacity:1}}.string-learner-panel__string-display{padding:var(--space-2) var(--space-4);border-radius:var(--border-radius-full);background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text);font-weight:600}.string-learner-panel__tickstrip{display:grid;grid-template-columns:repeat(40,1fr);gap:2px;height:10px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);padding:2px}.string-learner-panel__tick{display:block;width:100%;height:100%;background:var(--color-border);border-radius:1px}.string-learner-panel__tick--done{background:var(--color-accent)}.string-learner-panel__progressbar{width:100%;height:10px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);overflow:hidden}.string-learner-panel__progressbar-fill{height:100%;background:var(--color-accent);transition:width .2s ease}.string-learner-panel__poolgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(24px,1fr));gap:var(--space-1);padding:var(--space-4);background:var(--color-surface);border-radius:var(--border-radius-md);border:1px solid var(--color-border);max-height:120px;min-height:96px;overflow-y:auto}.string-learner-panel__poolgrid-empty{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);font-size:var(--font-size-xs)}.string-learner-panel__poolgrid .note{background:var(--note-color);color:var(--color-text-inverse);font-weight:var(--font-weight-semibold);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);font-size:var(--font-size-xs);aspect-ratio:1 / 1;min-height:24px;width:100%}.string-learner-panel__poolcell{width:100%;aspect-ratio:1 / 1;background:var(--color-border);border-radius:2px}.string-learner-panel__options{padding:var(--space-3) var(--space-4);background:var(--color-surface);border-radius:var(--border-radius-md);border:1px solid var(--color-border);margin-bottom:var(--space-2);display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}.string-learner-panel__hidden-note{width:100%;aspect-ratio:1 / 1;min-height:24px;background:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);cursor:help;transition:all .2s ease}.string-learner-panel__hidden-note:hover{background:var(--color-surface-elevated-hover);transform:scale(1.05)}@media (max-width: 768px){.string-learner-panel__header{flex-direction:column;align-items:stretch;gap:var(--space-2)}.string-learner-panel__target-note{transform:scale(1.5)}.string-learner-panel__string-selector{flex-wrap:wrap}}.string-learner-panel__win-content{background:var(--color-surface);border-radius:var(--border-radius-lg);padding:var(--space-6);width:85%;max-width:400px;text-align:center;box-shadow:var(--shadow-lg);animation:slideUp .4s ease;border:2px solid var(--color-accent);position:relative;overflow:hidden}.string-learner-panel__win-content:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--color-accent) 0%,var(--color-success) 50%,var(--color-accent) 100%);animation:shimmer 2s ease-in-out infinite}.string-learner-panel__win-title{font-size:var(--font-size-2xl);color:var(--color-accent);margin-bottom:var(--space-6);font-weight:var(--font-weight-bold);text-shadow:0 2px 4px rgba(0,0,0,.1)}.string-learner-panel__win-stats{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-8);background:var(--color-background);border-radius:var(--border-radius-md);padding:var(--space-4);border:1px solid var(--color-border)}.string-learner-panel__win-restart{margin:var(--space-6) 0;display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}.string-learner-panel__win-restart-label{font-size:var(--font-size-sm);color:var(--color-text-muted);text-align:center}.string-learner-panel__win-restart-note{background:var(--color-surface-elevated);border-radius:var(--border-radius-full);width:70px;height:70px;display:flex;align-items:center;justify-content:center;border:2px solid var(--color-accent);box-shadow:var(--shadow-sm);animation:pulse-restart 2s infinite}@keyframes pulse-restart{0%{transform:scale(1);box-shadow:0 0 #5ee1a9b3}70%{transform:scale(1.05);box-shadow:0 0 0 10px #5ee1a900}to{transform:scale(1);box-shadow:0 0 #5ee1a900}}.string-learner-panel__win-stat{display:flex;justify-content:space-between;align-items:center;padding:var(--space-2) var(--space-3);background:var(--color-surface-elevated);border-radius:var(--border-radius-sm);border:1px solid var(--color-border-subtle);transition:all var(--duration-fast) ease}.string-learner-panel__win-stat:hover{background:var(--color-surface);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.string-learner-panel__win-stat-label{font-weight:var(--font-weight-medium);color:var(--color-text);font-size:var(--font-size-sm)}.string-learner-panel__win-stat-value{font-family:var(--font-family-mono);color:var(--color-accent);font-weight:var(--font-weight-bold);font-size:var(--font-size-lg);text-shadow:0 1px 2px rgba(0,0,0,.1)}.string-learner-panel__win-buttons{display:flex;gap:var(--space-4);justify-content:center;flex-wrap:wrap}.string-learner-panel__win-buttons .exercise-panel__button{min-width:140px;padding:var(--space-3) var(--space-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);transition:all var(--duration-normal) ease;position:relative;overflow:hidden}.string-learner-panel__win-buttons .exercise-panel__button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.string-learner-panel__win-buttons .exercise-panel__button:hover:before{left:100%}.string-learner-panel__win-buttons .exercise-panel__button--primary{background:var(--color-success);border-color:var(--color-success);box-shadow:0 4px 12px #22c55e4d}.string-learner-panel__win-buttons .exercise-panel__button--primary:hover{background:var(--color-success);transform:translateY(-2px);box-shadow:0 6px 20px #22c55e66}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(30px) scale(.95);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes shimmer{0%,to{transform:translate(-100%)}50%{transform:translate(100%)}}@media (max-width: 768px){.string-learner-panel__win-content{padding:var(--space-6);width:95%;max-width:none;margin:var(--space-4)}.string-learner-panel__win-title{font-size:var(--font-size-xl)}.string-learner-panel__win-buttons{flex-direction:column;gap:var(--space-2)}.string-learner-panel__win-buttons .exercise-panel__button{min-width:auto;width:100%}}@media (prefers-reduced-motion: reduce){.string-learner-panel__win-content,.string-learner-panel__win-content:before,.string-learner-panel__win-buttons .exercise-panel__button:before,.string-learner-panel__win-restart-note{animation:none}.string-learner-panel__win-stat:hover,.string-learner-panel__win-buttons .exercise-panel__button:hover{transform:none}}.theme-toggle{position:fixed;top:10px;right:10px;z-index:9999;background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--border-radius-md);padding:var(--space-2);cursor:pointer;font-size:var(--font-size-sm);display:flex;align-items:center;gap:var(--space-1);box-shadow:var(--shadow-sm);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all var(--duration-fast) var(--easing-ease);font-family:inherit}.theme-toggle:hover{background:var(--color-surface-hover, var(--color-surface));border-color:var(--color-border-hover, var(--color-border));box-shadow:var(--shadow-md);transform:translateY(-1px)}.theme-toggle:active{transform:translateY(0);box-shadow:var(--shadow-sm)}.theme-toggle:focus{outline:2px solid var(--color-accent);outline-offset:2px}@media (max-width: 768px){.theme-toggle{top:8px;right:8px;padding:var(--space-1) var(--space-2);font-size:var(--font-size-xs)}}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family-base);background:var(--color-background);color:var(--color-text);line-height:var(--line-height-normal);padding:var(--space-5);transition:background var(--duration-normal) var(--easing-ease),color var(--duration-normal) var (--easing-ease)}.container{max-width:900px;margin:0 auto}h1{text-align:center;margin-bottom:var(--space-8);font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);color:var(--color-text)}h3{margin-bottom:var(--space-4);font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);color:var(--color-text)}.panel{background:var(--panel-gradient);border:var(--border-width-1) solid var(--panel-border);border-radius:var(--panel-radius);padding:0;box-shadow:var(--panel-shadow);margin-bottom:var(--space-8);overflow:hidden}.group-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-5) var(--space-6);background:linear-gradient(90deg,var(--color-surface-elevated),var(--color-surface));border-bottom:var(--border-width-1) solid var(--panel-border);cursor:pointer;transition:background var(--duration-fast) var(--easing-ease)}.group-header:hover{background:linear-gradient(90deg,var(--color-surface-elevated),var(--color-surface))}.group-header h3{margin:0;font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold)}.collapse-btn{background:none;border:none;color:var(--color-accent);font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius-full);transition:all var(--duration-fast) var(--easing-ease)}.collapse-btn:hover{background:#5ee1a91a;transform:scale(1.1)}.group-content{padding:var(--space-6);transition:max-height .3s ease,opacity .3s ease;overflow:hidden}.group-content.collapsed{max-height:0;padding-top:0;padding-bottom:0;opacity:0}.fretboard-controls{margin-bottom:20px}.mode-toggle{display:flex;gap:16px;margin-bottom:8px}.toggle-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;font-weight:500}.toggle-label input[type=radio]{width:18px;height:18px;accent-color:var(--color-accent)}.mode-description{font-size:12px;color:var(--color-text-muted);font-style:italic}.challenge-controls{display:flex;gap:16px;align-items:center;margin-bottom:20px;flex-wrap:wrap}.status-item.inline{background:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:12px;padding:8px 12px;text-align:center;min-width:auto}.status-item.inline .status-label{margin-bottom:2px}.status-item.inline .status-value{font-size:16px}.controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:20px}.sensitivity-control{margin-bottom:20px;padding:16px;background:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:12px}.sensitivity-label{display:block;font-size:14px;color:var(--color-text);margin-bottom:8px;font-weight:500}.sensitivity-slider{width:100%;height:6px;background:var(--color-border);border-radius:3px;outline:none;margin-bottom:12px;cursor:pointer}.sensitivity-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;background:var(--color-accent);border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #5ee1a94d}.sensitivity-slider::-moz-range-thumb{width:18px;height:18px;background:var(--color-accent);border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px #5ee1a94d}.volume-meter{position:relative;height:12px;background:var(--color-surface);border-radius:6px;overflow:hidden;border:1px solid var(--color-border)}.volume-bar{height:100%;background:linear-gradient(90deg,var(--color-accent),var(--color-warning),var(--color-error));width:0%;border-radius:6px;transition:width .1s ease-out}.gate-line{position:absolute;top:0;bottom:0;width:2px;background:var(--color-text);left:50%;transform:translate(-50%);opacity:.8;z-index:1}select,button{background:var(--color-surface-elevated);color:var(--color-text);border:1px solid var(--color-border-strong);border-radius:10px;padding:10px 12px;font-size:14px;cursor:pointer;transition:all .2s ease}button:hover{background:var(--color-surface);border-color:var(--color-border-strong)}button:active{transform:translateY(1px)}button.primary{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse)}.status-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-bottom:20px}.status-item{background:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:12px;padding:12px;text-align:center}.status-label{font-size:12px;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.status-value{font-size:18px;font-weight:600}.quiz-section{margin-bottom:20px}.target-note{font-size:3rem;font-weight:800;text-align:center;margin:20px 0;padding:20px;background:var(--color-surface-elevated);border:2px dashed var(--color-accent);border-radius:16px}.fretboard{overflow-x:auto;margin:20px 0}.fretboard-table{border-collapse:collapse;width:100%;min-width:600px}.fretboard-table td,.fretboard-table th{border:1px solid var(--color-border);text-align:center;width:45px;height:35px;position:relative}.fretboard-table th{background:var(--color-surface-elevated);font-size:12px;color:var(--color-text-muted)}.note-button{cursor:pointer;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;transition:all .2s ease;border-radius:4px;background:var(--color-note-background)}.target-highlight{animation:pulse 2s infinite;outline:2px solid var(--accent)!important;outline-offset:2px}.detected-note{background:var(--color-accent)!important;color:var(--color-background)!important;outline:2px solid var(--color-accent);outline-offset:2px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.pitch-indicator{display:flex;align-items:center;gap:8px;font-size:14px}.dot{width:8px;height:8px;border-radius:50%;display:inline-block}.listening{background:var(--color-warning)}.detected{background:var(--color-accent)}.error{background:var(--color-error)}.score{text-align:center;font-size:1.2rem;margin-top:16px}.message{text-align:center;font-weight:600;margin-top:12px;min-height:24px}.success{color:var(--color-accent)}.wrong{color:var(--color-warning)}.config-section{margin-bottom:16px;padding:12px;background:#ffffff05;border-radius:8px;border:1px solid rgba(255,255,255,.1)}.config-section h4{margin:0 0 12px;color:var(--color-accent);font-size:14px;font-weight:600}.config-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}.config-row label{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--color-text)}.config-input{padding:4px 8px;border:1px solid var(--color-border-subtle);border-radius:4px;background:var(--input-background);color:var(--color-text);width:60px;text-align:center}.config-input:focus{outline:none;border-color:var(--color-accent);background:var(--color-surface-elevated)}.config-btn{padding:4px 12px;background:var(--accent);color:var(--bg);border:none;border-radius:4px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease}.config-btn:hover{background:var(--color-accent);transform:translateY(-1px)}.string-tuning{display:flex;flex-direction:column;gap:8px;margin-top:8px;transition:all .3s ease}.string-tuning.collapsed{display:none}.string-config{display:flex;align-items:center;gap:12px;padding:8px;background:#ffffff08;border-radius:6px;border:1px solid rgba(255,255,255,.08)}.string-label{min-width:60px;font-size:14px;font-weight:600;color:var(--text)}.string-note-select{padding:4px 8px;border:1px solid rgba(255,255,255,.2);border-radius:4px;background:#ffffff0d;color:var(--text);min-width:60px}.string-octave-select{padding:4px 8px;border:1px solid rgba(255,255,255,.2);border-radius:4px;background:#ffffff0d;color:var(--text);width:50px}.string-note-select:focus,.string-octave-select:focus{outline:none;border-color:var(--accent);background:#ffffff1a}.remove-string-btn{padding:4px 8px;background:var(--error);color:#fff;border:none;border-radius:4px;font-size:12px;cursor:pointer;opacity:.8;transition:all .2s ease}.remove-string-btn:hover{opacity:1;transform:translateY(-1px)}.config-header{cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:4px 0;border-radius:4px;transition:background-color .2s ease}.config-header:hover{background-color:#ffffff05}@media (max-width: 600px){.config-row{flex-direction:column;align-items:flex-start}.string-config{flex-wrap:wrap}}@media (max-width: 768px){.controls{flex-direction:column;align-items:stretch}.status-bar{grid-template-columns:1fr}body{padding:10px}.container{margin:0}.target-note{font-size:2rem;padding:15px}}.string-practice__layout{display:grid;grid-template-columns:1fr auto;gap:var(--space-6);margin-top:var(--space-4)}.string-practice__note-section{display:flex;flex-direction:column;justify-content:center;min-height:200px}.string-practice__target-display{text-align:center;padding:var(--space-6);background:var(--color-surface);border-radius:var(--border-radius-lg);border:2px solid var(--color-border)}.string-practice__target-label{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-bottom:var(--space-3);text-transform:uppercase;letter-spacing:.5px}.string-practice__target-note{margin:0 auto var(--space-4);transform:scale(1.8);filter:drop-shadow(0 2px 8px rgba(0,0,0,.2))}.string-practice__position-info{font-size:var(--font-size-sm);color:var(--color-text-muted)}.string-practice__string-name{font-size:var(--font-size-xs);color:var(--color-text-subtle);margin-top:var(--space-1)}.string-practice__placeholder{display:flex;align-items:center;justify-content:center;min-height:200px;background:var(--color-surface);border-radius:var(--border-radius-lg);border:2px dashed var(--color-border)}.string-practice__instructions{text-align:center;color:var(--color-text-muted);font-size:var(--font-size-sm)}.string-practice__complete{text-align:center;padding:var(--space-6);background:var(--color-success);color:#fff;border-radius:var(--border-radius-lg)}.string-practice__complete h3{margin-bottom:var(--space-3);font-size:var(--font-size-lg)}.string-practice__stats{font-size:var(--font-size-sm);opacity:.9}.string-practice__stats>div{margin-bottom:var(--space-1)}.string-practice__info-section{min-width:200px;display:flex;flex-direction:column;gap:var(--space-4)}.string-practice__progress{padding:var(--space-4);background:var(--color-surface);border-radius:var(--border-radius-lg);border:1px solid var(--color-border)}.string-practice__progress-bar{width:100%;height:8px;background:var(--color-border);border-radius:var(--border-radius-sm);overflow:hidden;margin:var(--space-2) 0}.progress-fill{height:100%;background:var(--color-accent);transition:width .3s ease;border-radius:var(--border-radius-sm)}.string-practice__progress-text{font-size:var(--font-size-xs);color:var(--color-text-muted);text-align:center}.string-practice__preview{padding:var(--space-4);background:var(--color-surface);border-radius:var(--border-radius-lg);border:1px solid var(--color-border)}.string-practice__preview-info{font-size:var(--font-size-sm);color:var(--color-text-muted)}.string-practice__preview-info>div{margin-bottom:var(--space-1)}.note-display{display:flex;flex-direction:column;align-items:center}.note-display__name{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);line-height:1}.note-display__octave{font-size:var(--font-size-sm);opacity:.7;margin-top:var(--space-1)}@media (max-width: 768px){.string-practice__layout{grid-template-columns:1fr;gap:var(--space-4)}.string-practice__info-section{min-width:auto}.string-practice__target-note{transform:scale(1.4)}}.app{min-height:100vh}.app-header{text-align:center;margin-bottom:2rem}.app-header h1{font-size:2rem;font-weight:700;margin-bottom:.5rem}.app-header p{color:var(--muted);font-size:.9rem}.app-main{flex:1}#root{padding:0;max-width:none;text-align:left}.fretboard-wrapper{width:100%;overflow-x:auto;font-family:var(--font-mono, monospace)}.fret-header-row{display:flex;margin-left:58px}.fret-number{width:48px;max-width:48px;text-align:center;font-size:.75rem;opacity:.6;padding:2px 0;border-right:2px solid var(--color-border)}.fret-number:first-child{width:26px;max-width:26px;border-right:4px solid var(--color-border-strong);background:var(--color-surface-elevated);opacity:.8;font-weight:600}.fret-number:last-child{border-right:none}.fret-spacer{width:56px}.fretboard-grid{display:flex;flex-direction:column;gap:0}.string-row{display:flex;align-items:stretch}.string-label{width:56px;text-align:center;font-weight:600;background:transparent;padding:4px 0;border:none;border-right:2px solid var(--color-border);border-radius:0;cursor:pointer;font-size:.75rem;opacity:.8;transition:opacity .2s ease}.string-label:hover{opacity:1;background:var(--color-surface-elevated)}.fret-note{width:48px;height:48px;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;border-right:2px solid var(--color-border)}.fret-note:first-of-type{width:24px}.fret-note:last-child{border-right:none}.note{--note-color: var(--color-accent);border-radius:0;border:none;background:var(--color-note-background);transition:background .15s,box-shadow .15s,opacity .15s;-webkit-user-select:none;user-select:none;font-size:.8rem;display:flex;align-items:center;justify-content:center;position:relative;z-index:var(--z-note-base, 0)}.note.is-target{z-index:var(--z-note-target, 1)}.note.is-hit{outline:2px solid var(--note-color);outline-offset:4px;animation:notePulse .4s ease-out}#app-root:not([data-feature-note-priority=off]) .note:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none;z-index:var(--z-note-topmost, 3);background:transparent}#app-root:not([data-feature-note-priority=off]) .note.is-target{outline:none}.fret-note.is-open{background:var(--color-surface-elevated);border-right:4px solid var(--color-border-strong)}.fret-note.is-open .note{background:var(--color-surface-elevated)}.fret-note.is-dim-out-of-scale{opacity:.28;filter:grayscale(85%)}.fret-note.is-hidden-out-of-scale{opacity:0;pointer-events:none;position:relative}.fret-note.is-hidden-out-of-scale:has(.note.is-target){opacity:1!important;pointer-events:auto!important}.fret-note.is-dim-out-of-scale:has(.note.is-target){opacity:1!important;filter:none!important}.fret-note.is-hidden-out-of-scale:after{content:"";position:absolute;top:6px;right:6px;bottom:6px;left:6px;border:1px dashed var(--color-border-subtle);border-radius:4px}.note.is-detected-offscale{background:var(--color-warning)!important;color:var(--color-text-inverse)!important;outline:2px solid var(--color-warning)!important;outline-offset:2px;opacity:1!important;filter:none!important;pointer-events:auto!important;z-index:var(--z-note-detected, 2)!important}.fretboard-controls{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}.fretboard-controls .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.fretboard-controls label{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;opacity:.7}.string-tunings{display:flex;flex-direction:column;gap:4px;max-height:180px;overflow:auto}.string-tuning-row{display:flex;gap:6px;align-items:center;font-size:.75rem}.string-tuning-row .idx{width:16px;text-align:right;opacity:.6}.string-tuning-row input[type=text]{width:32px;text-align:center}.fretboard-controls input,.fretboard-controls select{background:var(--color-note-background);border:1px solid var(--color-border);padding:4px 6px;border-radius:4px;color:var(--color-text);font-size:.75rem}.fretboard-controls input:focus,.fretboard-controls select:focus{outline:1px solid var(--color-accent)}@keyframes notePulse{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1)}}.note-popover{position:fixed;z-index:1000;background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;box-shadow:0 8px 24px #00000040;padding:12px;min-width:160px;transform:translateY(-50%)}.note-popover__row{display:flex;align-items:center;gap:8px;margin-bottom:8px}.note-popover__row:last-child{margin-bottom:0}.note-popover__label{font-size:.75rem;font-weight:500;min-width:50px;color:var(--color-text)}.note-popover__select{flex:1;padding:4px 8px;border:1px solid var(--color-border);border-radius:4px;background:var(--color-surface-elevated);color:var(--color-text);font-size:.75rem}.note-popover__select:focus{outline:none;border-color:var(--color-accent)}