*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #EADBB8;--surface: #FBF4E2;--surface2: #F4E9CE;--surface-2: #F4E9CE;--surface-3: #E7D8B4;--surface-hover: #F6ECD3;--track: #E1CFA6;--text: #2A1D12;--text-muted: #6B5A43;--text-faint: #9A876A;--edge: #D8C39A;--edge-2: #C9B285;--line: #22160C;--accent: #E65C25;--accent-2: #C6491B;--accent-cool: #2E6E69;--accent-soft: #DCEAE7;--star: #E4A22B;--good: #5C8A3A;--warn: #C8791F;--crit: #C8452A;--fretboard: #B9853F;--fret-wire: #6B4A28;--fret-string: #8A6A3E;--fret-inlay: #F2E4C9;--fret-label: #7A5A34;--dot-stroke: #22160C;--dot-label: #22160C;--fret-map-op: .5;--fret-map-ink: #22160C;--str-1: #C8354F;--str-2: #9A6C00;--str-3: #2F8050;--str-4: #2A74B8;--str-5: #8E3FCB;--str-6: #C95A1E;--str-7: #4F5FD0;--str-8: #C2408F;--lane-fill: rgba(107,90,67,.1);--lane-chord-edge: #C9B285;--lane-scale-edge: #C9B285;--lane-chord-active-fill: rgba(46,110,105,.16);--lane-chord-active-text: #234E4A;--lane-scale-active-fill: rgba(230,92,37,.15);--lane-scale-active-text: #7A3410;--band-edge: #D8C39A;--band-sub: #6B5A43;--chip-bg: rgba(46,110,105,.14);--chip-edge: #2E6E69;--danger-bg: rgba(200,69,42,.12);--danger-edge: #C8452A;--danger-text: #8A2B1A;--star-soft: rgba(228,162,43,.15);--star-text: #6B4A10;--good-soft: rgba(92,138,58,.15);--accent-cool-fill: #2E6E69;--accent-cool-on: #F4E9CE;--board-mark: #6B5A43;--board-root: #B4571E;--glow: rgba(230,92,37,.3);--glow-good: rgba(92,138,58,.3);--glow-cool: rgba(46,110,105,.16);--shadow-soft: rgba(60,40,20,.28);--scrim: rgba(20,13,6,.8);--shelf-fade: #EADBB8F2;--shelf-fade-0: #EADBB800;--card-bd: 2.5px solid var(--line);--card-shadow: 4px 4px 0 var(--line);--card-lift: 4px 4px 0 var(--line);--card-lift-hover: 7px 7px 0 var(--line);--radius: 14px;--font: "Segoe UI", system-ui, sans-serif;--font-display: "Arial Black", "Segoe UI", system-ui, sans-serif}:root[data-theme=dark]{--bg: #0f0f1a;--surface: #1a1a2e;--surface2: #16162a;--surface-2: #16162a;--surface-3: #12122a;--surface-hover: #1f1f35;--track: #26263f;--text: #e0e0f0;--text-muted: #9a9ac0;--text-faint: #666688;--edge: #22223a;--edge-2: #2a2a48;--line: #2a2a48;--accent: #7c5cff;--accent-2: #5a3fd6;--accent-cool: #7fd4ff;--accent-soft: #12243a;--star: #f5c542;--good: #4caf7d;--warn: #ff7043;--crit: #e94560;--fretboard: #12122a;--fret-wire: #4a4a6a;--fret-string: #3a3a5a;--fret-inlay: #2c2c4a;--fret-label: #555577;--dot-stroke: transparent;--dot-label: #0d0d1e;--fret-map-op: .28;--fret-map-ink: transparent;--str-1: #e94560;--str-2: #f5c542;--str-3: #4caf7d;--str-4: #56b4f5;--str-5: #b456f5;--str-6: #f5874b;--str-7: #8a9bff;--str-8: #f56ec0;--lane-fill: rgba(120,120,170,.12);--lane-chord-edge: #44446a;--lane-scale-edge: #4a3a5a;--lane-chord-active-fill: rgba(127,212,255,.2);--lane-chord-active-text: #bfeaff;--lane-scale-active-fill: rgba(216,160,255,.2);--lane-scale-active-text: #ecd0ff;--band-edge: #2a5a3a;--band-sub: #9ab8a8;--chip-bg: #122a38;--chip-edge: #244a5a;--danger-bg: #3a1622;--danger-edge: #5a2535;--danger-text: #ffb0c4;--star-soft: #2a2410;--star-text: #f5d98a;--good-soft: #102a1a;--accent-cool-fill: #56b4f5;--accent-cool-on: #06243a;--board-mark: #44446a;--board-root: #c2a0ff;--glow: rgba(124,92,255,.27);--glow-good: rgba(76,175,125,.27);--glow-cool: rgba(127,212,255,.13);--shadow-soft: rgba(0,0,0,.4);--scrim: rgba(6,6,14,.8);--shelf-fade: #12122aF2;--shelf-fade-0: #12122a00;--card-bd: 1px solid var(--edge);--card-shadow: none;--card-lift: 0 6px 18px rgba(0,0,0,.4);--card-lift-hover: 0 10px 26px rgba(0,0,0,.55)}body{background:var(--bg);color:var(--text);font-family:var(--font);height:100vh;overflow:hidden}#root{height:100vh;display:flex;flex-direction:column}button{cursor:pointer;border:none;border-radius:var(--radius);font-family:var(--font);font-size:.95rem;transition:transform .1s,opacity .1s}button:active{transform:scale(.97)}button:disabled{opacity:.4;cursor:not-allowed}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--surface)}::-webkit-scrollbar-thumb{background:var(--edge);border-radius:3px}.shelf-row{scrollbar-width:none}.shelf-row::-webkit-scrollbar{display:none}.gc-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 14px;border-radius:8px;background:var(--surface);color:var(--text);border:1px solid var(--edge-2);font-weight:600;font-size:.8rem;line-height:1;white-space:nowrap;box-shadow:0 1px 0 var(--shadow-soft);transition:transform .06s,background .12s,border-color .12s,box-shadow .12s,filter .12s}.gc-btn:hover:not(:disabled){background:var(--surface-hover);border-color:var(--accent-cool)}.gc-btn:active:not(:disabled){transform:translateY(1px);box-shadow:none}.gc-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}.gc-btn--sm{height:28px;padding:0 10px;font-size:.75rem;border-radius:7px}.gc-btn--primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border-color:var(--accent-2)}.gc-btn--primary:hover:not(:disabled){background:linear-gradient(135deg,var(--accent),var(--accent-2));filter:brightness(1.06);border-color:var(--accent-2)}.gc-btn--cool{background:var(--accent-cool);color:var(--accent-cool-on);border-color:var(--accent-cool)}.gc-btn--cool:hover:not(:disabled){background:var(--accent-cool);filter:brightness(1.06);border-color:var(--accent-cool)}.gc-btn--danger{background:var(--danger-bg);color:var(--crit);border-color:var(--danger-edge)}.gc-btn--danger:hover:not(:disabled){background:var(--danger-bg);border-color:var(--crit)}.gc-btn--rec{background:var(--crit);color:#fff;border-color:var(--crit)}.gc-btn--rec:hover:not(:disabled){background:var(--crit);filter:brightness(1.06);border-color:var(--crit)}.gc-btn--ghost{background:transparent;border-color:transparent;box-shadow:none;padding:0 6px}.gc-btn--ghost:hover:not(:disabled){background:var(--surface-hover);border-color:var(--edge-2)}.gc-switch{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-weight:600;font-size:.8rem;color:var(--text);-webkit-user-select:none;user-select:none}.gc-switch input{display:none}.gc-switch .gc-track{width:38px;height:22px;border-radius:22px;flex:none;background:var(--edge-2);position:relative;transition:background .15s;box-shadow:inset 0 1px 2px var(--shadow-soft)}.gc-switch .gc-track:after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 2px var(--shadow-soft)}.gc-switch input:checked+.gc-track{background:var(--accent-cool)}.gc-switch input:checked+.gc-track:after{transform:translate(16px)}.gc-switch input:disabled+.gc-track{opacity:.45}.gc-seg{display:inline-flex;border:1px solid var(--edge-2);border-radius:8px;overflow:hidden;background:var(--surface)}.gc-seg button{height:32px;padding:0 12px;border:0;border-right:1px solid var(--edge-2);background:transparent;color:var(--text-muted);font-weight:700;font-size:.75rem;border-radius:0;transition:background .12s,color .12s}.gc-seg button:last-child{border-right:0}.gc-seg button:active{transform:none}.gc-seg button[aria-pressed=true]{background:var(--accent-cool);color:var(--accent-cool-on)}.gc-seg button:hover:not([aria-pressed=true]){background:var(--surface-hover)}.gc-stepper{display:inline-flex;align-items:center;border:1px solid var(--edge-2);border-radius:8px;overflow:hidden;background:var(--surface)}.gc-stepper button{width:30px;height:32px;border:0;border-radius:0;background:transparent;color:var(--text);font-weight:700;font-size:.95rem;transition:background .12s}.gc-stepper button:hover:not(:disabled){background:var(--surface-hover)}.gc-stepper button:active{transform:none}.gc-stepper .gc-val{min-width:90px;text-align:center;font-weight:600;font-size:.8rem;padding:0 8px;color:var(--text);border-left:1px solid var(--edge-2);border-right:1px solid var(--edge-2)}.gc-range{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:6px;border-radius:6px;background:var(--edge-2);outline:none;cursor:pointer}.gc-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent-cool);border:2px solid var(--surface);box-shadow:0 1px 3px var(--shadow-soft)}.gc-cluster{display:inline-flex;flex-direction:column;gap:6px;border:1px solid var(--edge-2);border-radius:10px;padding:8px 12px;background:var(--surface-3)}