:root{--bg-app: #140f0c;--bg-panel: #2a1f1a;--bg-element: #1a1410;--bg-input: #1a1410;--bg-fretboard: linear-gradient(to bottom, #3a1d14 0%, #5c2f1f 50%, #3a1d14 100%);--bg-fretboard-outer: #26140e;--border-dim: #5c2f1f;--border-bright: #8d5524;--border-focus: #8d5524;--text-main: #ffe4b5;--text-highlight: #ffe4b5;--text-accent: #f4a460;--text-inverse: #ffe4b5;--btn-bg: #8d5524;--btn-hover: #d4722e;--btn-text: #ffe4b5;--btn-border: #5c2f1f;--fret-wire: #8B7355;--string-color: rgba(255, 228, 181, .3);--nut-bg: #a0826d;--inlay-color: #d4a574;--logo-color: #f4a460;--root-bg: #8d5524;--root-border: #f4a460;--root-text: #ffe4b5;--tone-bg: #f4a460;--tone-border: #8d5524;--tone-text: #3d1810;--scale-bg: #5c2f1f;--scale-border: #3d2f27;--scale-text: #ffe4b5;--leading-bg: #6b7c3a;--leading-border: #5c2f1f;--leading-text: #f4a460;--topbar-offset: 140px}.theme-light{--bg-app: #f0f0f0;--bg-panel: #e0e0e0;--bg-element: #ffffff;--bg-input: #ffffff;--bg-fretboard: linear-gradient(to bottom, #dbe4eb 0%, #f0f8ff 50%, #dbe4eb 100%);--bg-fretboard-outer: #c0c8cf;--border-dim: #cccccc;--border-bright: #999999;--border-focus: #666666;--text-main: #333333;--text-highlight: #000000;--text-accent: #0055aa;--text-inverse: #ffffff;--btn-bg: #0055aa;--btn-hover: #004488;--btn-text: #ffffff;--btn-border: #003366;--fret-wire: #666666;--string-color: #999999;--nut-bg: #cccccc;--inlay-color: #999999;--root-bg: #0055aa;--root-border: #000000;--root-text: #ffffff;--tone-bg: #e0e0e0;--tone-border: #999999;--tone-text: #000000;--scale-bg: #ffffff;--scale-border: #cccccc;--scale-text: #666666;--leading-bg: #666666;--leading-border: #333333;--leading-text: #ffffff;--logo-color: #0055aa}.theme-high-contrast{--bg-app: #000000;--bg-panel: #000000;--bg-element: #111111;--bg-input: #000000;--bg-fretboard: #000000;--bg-fretboard-outer: #000000;--border-dim: #ffffff;--border-bright: #ffffff;--border-focus: #ffff00;--text-main: #ffffff;--text-highlight: #ffffff;--text-accent: #ffff00;--text-inverse: #000000;--btn-bg: #ffffff;--btn-hover: #cccccc;--btn-text: #000000;--btn-border: #ffffff;--fret-wire: #ffffff;--string-color: #ffffff;--nut-bg: #333333;--inlay-color: #ffffff;--root-bg: #ffffff;--root-border: #ffffff;--root-text: #000000;--tone-bg: #ffff00;--tone-border: #ffff00;--tone-text: #000000;--scale-bg: #000000;--scale-border: #ffffff;--scale-text: #ffffff;--leading-bg: #00ffff;--leading-border: #00ffff;--leading-text: #000000;--logo-color: #ffff00}.theme-autumn{--bg-app: #1a120b;--bg-panel: #2c1e16;--bg-element: #1f1510;--bg-input: #1f1510;--bg-fretboard: linear-gradient(to bottom, #3e2723 0%, #5d4037 50%, #3e2723 100%);--bg-fretboard-outer: #2a1b18;--border-dim: #5d4037;--border-bright: #8d6e63;--border-focus: #d84315;--text-main: #d7ccc8;--text-highlight: #ffccbc;--text-accent: #ff7043;--text-inverse: #3e2723;--btn-bg: #bf360c;--btn-hover: #d84315;--btn-text: #ffffff;--btn-border: #872608;--fret-wire: #a1887f;--string-color: rgba(255, 204, 188, .3);--nut-bg: #5d4037;--inlay-color: #8d6e63;--root-bg: #bf360c;--root-border: #ff7043;--root-text: #ffffff;--tone-bg: #e65100;--tone-border: #bf360c;--tone-text: #ffffff;--scale-bg: #3e2723;--scale-border: #5d4037;--scale-text: #a1887f;--leading-bg: #5d4037;--leading-border: #8d6e63;--leading-text: #ff7043;--logo-color: #ff7043}.theme-meadow{--bg-app: #0f1410;--bg-panel: #1b261e;--bg-element: #141f16;--bg-input: #141f16;--bg-fretboard: linear-gradient(to bottom, #1b3320 0%, #2e4d34 50%, #1b3320 100%);--bg-fretboard-outer: #122215;--border-dim: #2e4d34;--border-bright: #4a7c59;--border-focus: #f9a825;--text-main: #c8e6c9;--text-highlight: #e8f5e9;--text-accent: #f9a825;--text-inverse: #1b3320;--btn-bg: #2e7d32;--btn-hover: #388e3c;--btn-text: #ffffff;--btn-border: #1b5e20;--fret-wire: #81c784;--string-color: rgba(200, 230, 201, .3);--nut-bg: #2e4d34;--inlay-color: #66bb6a;--root-bg: #2e7d32;--root-border: #66bb6a;--root-text: #ffffff;--tone-bg: #f9a825;--tone-border: #f57f17;--tone-text: #1b3320;--scale-bg: #1b3320;--scale-border: #2e4d34;--scale-text: #81c784;--leading-bg: #33691e;--leading-border: #558b2f;--leading-text: #dce775;--logo-color: #f9a825}.theme-dusk{--bg-app: #0a0a12;--bg-panel: #151525;--bg-element: #10101c;--bg-input: #10101c;--bg-fretboard: linear-gradient(to bottom, #1a1a3a 0%, #2c2c54 50%, #1a1a3a 100%);--bg-fretboard-outer: #111126;--border-dim: #2c2c54;--border-bright: #474787;--border-focus: #706fd3;--text-main: #d1d8e0;--text-highlight: #f5f6fa;--text-accent: #a55eea;--text-inverse: #ffffff;--btn-bg: #341f97;--btn-hover: #5f27cd;--btn-text: #ffffff;--btn-border: #221366;--fret-wire: #706fd3;--string-color: rgba(209, 216, 224, .3);--nut-bg: #2c2c54;--inlay-color: #706fd3;--root-bg: #341f97;--root-border: #5f27cd;--root-text: #ffffff;--tone-bg: #227093;--tone-border: #34ace0;--tone-text: #ffffff;--scale-bg: #1a1a3a;--scale-border: #2c2c54;--scale-text: #706fd3;--leading-bg: #40407a;--leading-border: #706fd3;--leading-text: #a55eea;--logo-color: #a55eea}.theme-midnight{--bg-app: #0f172a;--bg-panel: #1e293b;--bg-element: #1e293b;--bg-input: #0f172a;--bg-fretboard: linear-gradient(to bottom, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);--bg-fretboard-outer: #0a1120;--border-dim: #334155;--border-bright: #64748b;--border-focus: #818cf8;--text-main: #e2e8f0;--text-highlight: #f8fafc;--text-accent: #818cf8;--text-inverse: #0f172a;--btn-bg: #4338ca;--btn-hover: #4f46e5;--btn-text: #ffffff;--btn-border: #312e81;--fret-wire: #94a3b8;--string-color: rgba(148, 163, 184, .3);--nut-bg: #334155;--inlay-color: #94a3b8;--root-bg: #4338ca;--root-border: #818cf8;--root-text: #ffffff;--tone-bg: #818cf8;--tone-border: #4338ca;--tone-text: #0f172a;--scale-bg: #1e293b;--scale-border: #334155;--scale-text: #94a3b8;--leading-bg: #312e81;--leading-border: #4338ca;--leading-text: #818cf8;--logo-color: #818cf8}.theme-paper{--bg-app: #fdfbf7;--bg-panel: #f3f0e8;--bg-element: #ffffff;--bg-input: #ffffff;--bg-fretboard: #ffffff;--bg-fretboard-outer: #f0f0f0;--border-dim: #d1d5db;--border-bright: #9ca3af;--border-focus: #111827;--text-main: #374151;--text-highlight: #111827;--text-accent: #b91c1c;--text-inverse: #ffffff;--btn-bg: #374151;--btn-hover: #1f2937;--btn-text: #ffffff;--btn-border: #111827;--fret-wire: #6b7280;--string-color: #9ca3af;--nut-bg: #d1d5db;--inlay-color: #374151;--root-bg: #111827;--root-border: #000000;--root-text: #ffffff;--tone-bg: #e5e7eb;--tone-border: #374151;--tone-text: #111827;--scale-bg: #ffffff;--scale-border: #d1d5db;--scale-text: #6b7280;--leading-bg: #d1d5db;--leading-border: #9ca3af;--leading-text: #111827;--logo-color: #b91c1c}.theme-terminal{--bg-app: #000000;--bg-panel: #0a0a0a;--bg-element: #000000;--bg-input: #000000;--bg-fretboard: #000000;--bg-fretboard-outer: #001100;--border-dim: #003300;--border-bright: #00ff00;--border-focus: #00ff00;--text-main: #00cc00;--text-highlight: #00ff00;--text-accent: #00ff00;--text-inverse: #000000;--btn-bg: #003300;--btn-hover: #004400;--btn-text: #00ff00;--btn-border: #00ff00;--fret-wire: #006600;--string-color: rgba(0, 255, 0, .3);--nut-bg: #003300;--inlay-color: #00ff00;--root-bg: #00ff00;--root-border: #00ff00;--root-text: #000000;--tone-bg: #003300;--tone-border: #00ff00;--tone-text: #00ff00;--scale-bg: #000000;--scale-border: #003300;--scale-text: #006600;--leading-bg: #003300;--leading-border: #00ff00;--leading-text: #00ff00;--logo-color: #00ff00}.theme-oceanic{--bg-app: #002b36;--bg-panel: #073642;--bg-element: #073642;--bg-input: #002b36;--bg-fretboard: linear-gradient(to bottom, #002b36 0%, #004d61 50%, #002b36 100%);--bg-fretboard-outer: #001a21;--border-dim: #586e75;--border-bright: #839496;--border-focus: #2aa198;--text-main: #93a1a1;--text-highlight: #eee8d5;--text-accent: #2aa198;--text-inverse: #002b36;--btn-bg: #2aa198;--btn-hover: #268bd2;--btn-text: #fdf6e3;--btn-border: #073642;--fret-wire: #657b83;--string-color: rgba(147, 161, 161, .3);--nut-bg: #586e75;--inlay-color: #839496;--root-bg: #268bd2;--root-border: #2aa198;--root-text: #fdf6e3;--tone-bg: #2aa198;--tone-border: #268bd2;--tone-text: #002b36;--scale-bg: #073642;--scale-border: #586e75;--scale-text: #839496;--leading-bg: #586e75;--leading-border: #839496;--leading-text: #eee8d5;--logo-color: #2aa198}.theme-sunset{--bg-app: #2d1b2e;--bg-panel: #452c45;--bg-element: #452c45;--bg-input: #2d1b2e;--bg-fretboard: linear-gradient(to bottom, #2d1b2e 0%, #562a3b 50%, #2d1b2e 100%);--bg-fretboard-outer: #1f1220;--border-dim: #b04e58;--border-bright: #ff9f1c;--border-focus: #ff9f1c;--text-main: #ffecd1;--text-highlight: #ffffff;--text-accent: #ff9f1c;--text-inverse: #2d1b2e;--btn-bg: #c44536;--btn-hover: #db504a;--btn-text: #ffffff;--btn-border: #772e25;--fret-wire: #e08e79;--string-color: rgba(255, 236, 209, .3);--nut-bg: #b04e58;--inlay-color: #ff9f1c;--root-bg: #ff9f1c;--root-border: #ffbf69;--root-text: #2d1b2e;--tone-bg: #c44536;--tone-border: #ff9f1c;--tone-text: #ffffff;--scale-bg: #452c45;--scale-border: #b04e58;--scale-text: #e08e79;--leading-bg: #b04e58;--leading-border: #ff9f1c;--leading-text: #ffecd1;--logo-color: #ff9f1c}.theme-slate{--bg-app: #27272a;--bg-panel: #3f3f46;--bg-element: #3f3f46;--bg-input: #27272a;--bg-fretboard: linear-gradient(to bottom, #18181b 0%, #3f3f46 50%, #18181b 100%);--bg-fretboard-outer: #111113;--border-dim: #52525b;--border-bright: #a1a1aa;--border-focus: #38bdf8;--text-main: #d4d4d8;--text-highlight: #ffffff;--text-accent: #38bdf8;--text-inverse: #000000;--btn-bg: #52525b;--btn-hover: #71717a;--btn-text: #ffffff;--btn-border: #27272a;--fret-wire: #71717a;--string-color: rgba(212, 212, 216, .3);--nut-bg: #52525b;--inlay-color: #a1a1aa;--root-bg: #38bdf8;--root-border: #7dd3fc;--root-text: #000000;--tone-bg: #71717a;--tone-border: #38bdf8;--tone-text: #ffffff;--scale-bg: #27272a;--scale-border: #52525b;--scale-text: #a1a1aa;--leading-bg: #52525b;--leading-border: #a1a1aa;--leading-text: #ffffff;--logo-color: #38bdf8}.theme-navy{--bg-app: #0a192f;--bg-panel: #112240;--bg-element: #112240;--bg-input: #0a192f;--bg-fretboard: linear-gradient(to bottom, #020c1b 0%, #112240 50%, #020c1b 100%);--bg-fretboard-outer: #010812;--border-dim: #233554;--border-bright: #64ffda;--border-focus: #ffd700;--text-main: #8892b0;--text-highlight: #ccd6f6;--text-accent: #ffd700;--text-inverse: #0a192f;--btn-bg: #1d3557;--btn-hover: #457b9d;--btn-text: #ffffff;--btn-border: #0a192f;--fret-wire: #8892b0;--string-color: rgba(136, 146, 176, .3);--nut-bg: #233554;--inlay-color: #ffd700;--root-bg: #ffd700;--root-border: #ffea00;--root-text: #0a192f;--tone-bg: #457b9d;--tone-border: #ffd700;--tone-text: #ffffff;--scale-bg: #112240;--scale-border: #233554;--scale-text: #8892b0;--leading-bg: #233554;--leading-border: #64ffda;--leading-text: #ccd6f6;--logo-color: #ffd700}.theme-berry{--bg-app: #2e001f;--bg-panel: #4a0033;--bg-element: #4a0033;--bg-input: #2e001f;--bg-fretboard: linear-gradient(to bottom, #2e001f 0%, #4a0033 50%, #2e001f 100%);--bg-fretboard-outer: #1f0015;--border-dim: #800040;--border-bright: #ff0055;--border-focus: #ff0055;--text-main: #ffccdd;--text-highlight: #ffffff;--text-accent: #ff0055;--text-inverse: #2e001f;--btn-bg: #800040;--btn-hover: #b30059;--btn-text: #ffffff;--btn-border: #4a0033;--fret-wire: #ff6699;--string-color: rgba(255, 204, 221, .3);--nut-bg: #800040;--inlay-color: #ff0055;--root-bg: #ff0055;--root-border: #ff6699;--root-text: #ffffff;--tone-bg: #ff99bb;--tone-border: #ff0055;--tone-text: #2e001f;--scale-bg: #4a0033;--scale-border: #800040;--scale-text: #ff6699;--leading-bg: #800040;--leading-border: #ff0055;--leading-text: #ffccdd;--logo-color: #ff0055}.theme-forest{--bg-app: #051a05;--bg-panel: #0d2e0d;--bg-element: #0d2e0d;--bg-input: #051a05;--bg-fretboard: linear-gradient(to bottom, #050a05 0%, #1a1510 50%, #050a05 100%);--bg-fretboard-outer: #0d0a08;--border-dim: #1b4d1b;--border-bright: #4caf50;--border-focus: #4caf50;--text-main: #a5d6a7;--text-highlight: #e8f5e9;--text-accent: #4caf50;--text-inverse: #051a05;--btn-bg: #2e7d32;--btn-hover: #388e3c;--btn-text: #ffffff;--btn-border: #1b5e20;--fret-wire: #8d6e63;--string-color: rgba(165, 214, 167, .3);--nut-bg: #1b4d1b;--inlay-color: #4caf50;--root-bg: #4caf50;--root-border: #81c784;--root-text: #051a05;--tone-bg: #8d6e63;--tone-border: #4caf50;--tone-text: #ffffff;--scale-bg: #0d2e0d;--scale-border: #1b4d1b;--scale-text: #66bb6a;--leading-bg: #1b4d1b;--leading-border: #4caf50;--leading-text: #a5d6a7;--logo-color: #4caf50}.theme-vaporwave{--bg-app: #09090b;--bg-panel: #050505;--bg-element: #050505;--bg-input: #09090b;--bg-fretboard: linear-gradient(to bottom, #0d0d0d 0%, #262626 50%, #0d0d0d 100%);--bg-fretboard-outer: #000000;--border-dim: #27272a;--border-bright: #f472b6;--border-focus: #f472b6;--text-main: #e4e4e7;--text-highlight: #ffffff;--text-accent: #f472b6;--text-inverse: #000000;--btn-bg: #db2777;--btn-hover: #be185d;--btn-text: #ffffff;--btn-border: #831843;--fret-wire: #22d3ee;--string-color: rgba(34, 211, 238, .3);--nut-bg: #27272a;--inlay-color: #f472b6;--root-bg: #f472b6;--root-border: #f9a8d4;--root-text: #000000;--tone-bg: #22d3ee;--tone-border: #06b6d4;--tone-text: #000000;--scale-bg: #18181b;--scale-border: #27272a;--scale-text: #a1a1aa;--leading-bg: #27272a;--leading-border: #f472b6;--leading-text: #f472b6;--logo-color: #f472b6}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:var(--bg-app);color:var(--text-main);min-height:100vh;padding-top:220px}.top-bar{position:fixed;top:0;left:0;right:0;background:var(--bg-panel);border-bottom:2px solid var(--border-dim);z-index:1000;box-shadow:0 4px 20px #00000080}.top-bar-content{max-width:1400px;margin:0 auto;padding:10px 20px;display:flex;flex-direction:column;gap:10px}.top-bar-row{display:flex;align-items:center;gap:30px;flex-wrap:wrap}.top-bar-row.bottom-row{display:flex;justify-content:space-between;width:100%;gap:15px}.app-header{display:flex;align-items:center;gap:12px;background-color:var(--bg-element);padding:4px 16px;border-radius:12px;border:1px solid var(--border-dim)}.app-title{font-size:1.8em;font-weight:700;color:var(--text-accent);line-height:1;font-family:Trebuchet MS,sans-serif}.app-logo{width:60px;height:60px}#fretboard-page,#progression-page,.page-content{padding-top:var(--topbar-offset);box-sizing:border-box}body:has(.top-bar.mobile-static) #fretboard-page,body:has(.top-bar.mobile-static) #progression-page,body:has(.top-bar.mobile-static) .page-content{padding-top:var(--topbar-offset)}.mode-toggle{display:flex;gap:5px;background:var(--bg-element);padding:4px;border-radius:8px}.mode-btn{padding:8px 20px;background:transparent;color:var(--text-main);border:none;border-radius:6px;cursor:pointer;font-size:.9em;font-weight:600;transition:all .3s}.mode-btn:hover{color:var(--text-highlight)}.mode-btn.active{background:var(--btn-bg);color:var(--btn-text)}.top-row-controls{display:flex;gap:15px;flex:1;justify-content:flex-end;flex-wrap:wrap}.bottom-left-controls,.bottom-center-controls,.bottom-right-controls{display:flex;gap:15px;align-items:center}.progression-select-row{width:100%;padding:10px 20px;background:#0003;border-top:1px solid var(--border-dim);justify-content:center;display:flex;align-items:center;gap:15px}.dropdowns-group,.filters-group{display:flex;gap:15px;align-items:center}.progression-select{font-size:1.2em;padding:8px 16px;min-width:300px}.theme-select,.progression-select{padding:6px 12px;border:2px solid var(--border-dim);border-radius:6px;font-size:1em;background:var(--bg-input);color:var(--text-main);cursor:pointer;transition:border-color .3s}.theme-select:hover,.progression-select:hover{border-color:var(--border-focus)}.playback-button{background:var(--btn-bg);color:var(--btn-text);border:2px solid var(--btn-border);border-radius:6px;padding:8px 20px;font-size:1em;font-weight:600;cursor:pointer;transition:all .3s}.playback-button:hover{background:var(--btn-hover);transform:translateY(-1px)}.bottom-left-controls{flex:0 0 auto}.bottom-center-controls{flex:1;justify-content:center}.bottom-right-controls{flex:0 0 auto;justify-content:flex-end}.input-group{display:flex;align-items:center;gap:8px}.input-group label{font-weight:600;color:var(--text-main);font-size:.85em;white-space:nowrap}.input-group select{padding:6px 12px;border:2px solid var(--border-dim);border-radius:6px;font-size:1.1em;background:var(--bg-input);color:var(--text-main);cursor:pointer;transition:border-color .3s}.input-group select option{background:var(--bg-input);color:var(--text-main)}.input-group select:hover{border-color:var(--border-focus)}.input-group select:focus{outline:none;border-color:var(--border-focus)}.input-group .theme-select{padding:0 8px;font-size:.85em;height:28px}.input-group .theme-select:hover{border-color:var(--border-focus)}.pdf-select{background:transparent;border:none;color:var(--text-main);font-size:.85em;cursor:pointer;outline:none;padding:0 4px;height:100%;font-weight:600}.compact-group select{min-width:80px}#chord-select-scale-toggle label,#show-leading-notes-group label{display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--text-accent)}#chord-select-scale-toggle input[type=checkbox],#show-leading-notes-group input[type=checkbox]{width:16px;height:16px;min-width:16px;min-height:16px;cursor:pointer;accent-color:var(--text-accent);background-color:var(--bg-input)}#chord-select-scale-toggle,#show-leading-notes-group{background:var(--bg-input);border:1px solid var(--border-dim);color:var(--text-main);border-radius:6px;padding:8px 12px}input[type=checkbox]{accent-color:var(--text-accent)}.control-icon{color:var(--text-main);flex-shrink:0}.zoom-value{min-width:36px;text-align:center;font-variant-numeric:tabular-nums}#zoom-value{color:var(--text-main);font-size:.85em;font-weight:600;min-width:40px}.zoom-wrapper{position:relative}.zoom-popup-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--bg-input);border:2px solid var(--border-dim);border-radius:6px;padding:0 8px;height:28px;color:var(--text-main);font-size:.85em;font-weight:600;cursor:pointer;transition:border-color .3s;width:110px}.zoom-popup-btn:hover{border-color:var(--border-focus)}.zoom-popup{position:absolute;top:calc(100% + 5px);left:50%;transform:translate(-50%);background:var(--bg-panel);border:1px solid var(--border-dim);border-radius:6px;padding:10px;box-shadow:0 4px 12px #00000080;z-index:1001}.zoom-slider-popup{-webkit-appearance:none;appearance:none;width:150px;height:6px;background:var(--tone-text);border-radius:3px;outline:none;cursor:pointer}.zoom-slider-popup::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:var(--text-accent);border-radius:50%;cursor:pointer;margin-top:-5px;transition:background .3s}.zoom-slider-popup::-webkit-slider-thumb:hover{background:var(--text-highlight)}.zoom-slider-popup::-moz-range-thumb{width:16px;height:16px;background:var(--text-accent);border-radius:50%;cursor:pointer;border:none;transition:background .3s}.zoom-slider-popup::-moz-range-thumb:hover{background:var(--text-highlight)}.zoom-slider-popup::-moz-range-track{width:100%;height:6px;background:var(--tone-text);border-radius:3px}.export-btn{padding:6px 16px;background:var(--btn-bg);color:var(--btn-text);border:2px solid var(--btn-border);border-radius:6px;font-size:.9em;font-weight:600;cursor:pointer;transition:all .3s;white-space:nowrap}.export-btn:hover{background:var(--btn-hover);transform:translateY(-1px)}.export-btn:active{transform:translateY(0)}.legend{display:flex;gap:15px;padding:0;background:transparent;border:none}.legend-item{display:flex;align-items:center;gap:6px;color:var(--text-main);font-size:.8em;white-space:nowrap}body:has(#fretboard-page.active) .legend .leading-note-legend{display:none}.legend-marker{width:28px;height:28px;border-radius:50%;border:2px solid var(--border-dim);display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700;font-size:.65em;gap:1px}.legend-marker.chord-tone{background:var(--tone-bg);color:var(--tone-text);border:2px solid var(--tone-border);border-radius:3px}.legend-marker.scale-note{background:var(--scale-bg);color:var(--scale-text);border-radius:50%}.legend-marker.leading-note{background:var(--border-bright);color:var(--btn-hover);border:2px solid var(--leading-border);border-radius:12px;width:34px;height:22px;display:flex;align-items:center;justify-content:center;font-size:1em}.legend-marker.leading-note:before{content:"➜"}.legend-marker.root-note{background:var(--root-bg);border:2px solid var(--root-border);color:var(--root-text);border-radius:3px}.legend-marker .note-name{font-size:.95em;font-weight:700;line-height:1}.legend-marker .interval{font-size:.65em;font-weight:400;opacity:.85;line-height:1}.page-content{display:none;max-width:1400px;margin:20px auto;padding:0 20px 30px}.page-content.active{display:block}#fretboard-container{display:flex;flex-direction:column;gap:30px}.fretboard-container{position:relative;overflow:visible!important}.fretboard-container .playback-container{position:absolute;top:8px;left:8px;z-index:100;display:block!important;visibility:visible!important;opacity:1!important}.chord-tools{display:flex;gap:10px;align-items:center;margin-left:auto}.filter-controls{display:flex;gap:5px;align-items:center}.filter-btn{background:var(--bg-panel);color:var(--text-main);border:1px solid var(--border-dim);border-radius:4px;padding:4px 10px;font-size:.85em;cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .2s;min-height:32px}.filter-btn:hover{background:var(--border-dim);color:var(--text-highlight)}.filter-btn.active{background:var(--btn-bg);color:var(--btn-text);border-color:var(--border-bright)}.filter-btn.secondary{background:transparent;border-color:var(--border-dim)}.filter-btn span{font-size:1.1em}.chord-section{background:var(--bg-element);border-radius:12px;padding:20px;border:2px solid var(--border-dim);position:relative}.chord-controls{display:flex;gap:15px;margin-bottom:20px;flex-wrap:wrap;align-items:flex-end}.chord-label{font-size:1.2em;font-weight:700;color:var(--text-accent);padding:8px 0;min-width:80px}.fretboard-container{background:var(--bg-fretboard-outer);padding:20px;border-radius:12px;border:1px solid var(--border-dim);box-shadow:inset 0 0 40px #0000004d;overflow-x:auto;overflow-y:visible;width:100%;max-width:100%;-webkit-overflow-scrolling:touch}.fretboard-grid{display:grid;grid-template-columns:60px repeat(13,1fr);gap:0;min-width:min(900px,100%);width:100%;padding:15px 15px 90px;position:relative;z-index:0}.fretboard-grid:before{content:"";position:absolute;inset:15px 15px 90px;background:var(--bg-fretboard);border:2px solid var(--border-dim);border-top-width:4px;border-bottom-width:4px;border-radius:8px;box-shadow:0 2px 8px #0006;z-index:-1;pointer-events:none}.string-label{display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--text-highlight);font-size:1.1em;padding:10px}.mandolin-fretboard .string-label.mandolin-paired-string{height:20px;margin-top:-40px;font-size:.8em;padding:5px;opacity:.7}.fret-cell{position:relative;min-height:60px;border-right:3px solid var(--fret-wire);display:flex;align-items:center;justify-content:center}.fret-cell:before{content:"";position:absolute;left:0;right:-3px;top:50%;transform:translateY(-50%);height:2px;background:var(--string-color);z-index:0}.fret-cell.fret-0:before{left:-5px}.mandolin-fretboard .fret-cell.mandolin-paired-string{height:20px;min-height:20px;margin-top:-40px}.fret-cell:first-of-type{border-left:5px solid var(--fret-wire)}.fret-cell.fret-0{background:var(--nut-bg);border-left:5px solid var(--fret-wire);border-right:3px solid var(--fret-wire)}.fret-marker{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85em;cursor:pointer;transition:transform .2s;border:2px solid transparent;position:relative;z-index:1}.fret-marker.interactive{cursor:pointer}.fret-marker.dimmed{opacity:.5;filter:grayscale(100%);transform:scale(.8)}.fret-marker:hover{transform:scale(1.1)}.fret-marker{flex-direction:column;gap:2px;font-size:.9em}.fret-marker .note-name{font-size:1em;font-weight:700}.fret-marker .interval{font-size:.7em;font-weight:400;opacity:.8}.fret-marker sub{font-size:.6em;font-weight:400;vertical-align:sub;line-height:0;margin-left:2px}.fret-marker sup{font-size:1em;font-weight:700;vertical-align:super;line-height:0}.fret-marker.scale-note{background:var(--scale-bg);color:var(--scale-text);border-color:var(--scale-border);border-radius:50%;font-size:.7em}.fret-marker.chord-tone{background:var(--tone-bg);color:var(--tone-text);border:3px solid var(--tone-border);border-radius:4px;font-size:.75em}.fret-marker.leading-note{background:var(--border-bright);color:var(--btn-hover);border:2px solid var(--leading-border);border-radius:20px;width:48px;height:30px;display:flex;align-items:center;justify-content:center;font-size:1.4em;position:relative;top:0}.fret-marker.leading-note:before{content:"➜";margin-top:-2px}.fret-marker.leading-chord-tone{background:var(--scale-bg);color:var(--inlay-color);border:2px solid var(--leading-border);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:1.5em}.fret-marker.leading-chord-tone:before{content:"➜";font-size:.8em}.fret-marker.root{background:var(--root-bg);color:var(--root-text);border:3px solid var(--root-border);font-weight:900}.fret-marker.chord-tone.root{background:var(--root-bg);color:var(--root-text);border:3px solid var(--root-border);border-radius:4px}.fret-number{position:absolute;bottom:-40px;font-size:.8em;color:var(--text-main);font-weight:700}.mandolin-fretboard .fret-number{bottom:-50px}.fret-inlay{position:absolute;bottom:-60px;width:12px;height:12px;background:var(--inlay-color);border-radius:50%}.mandolin-fretboard .fret-inlay{bottom:-70px}.progression-selector{background:var(--bg-element);border-radius:12px;padding:30px;margin-bottom:30px;border:2px solid var(--border-dim)}.progression-selector h2{color:var(--text-accent);margin-bottom:20px;text-align:center}.key-selector{display:flex;gap:20px;justify-content:center;margin-bottom:30px;flex-wrap:wrap}.key-selector label{color:var(--text-main);font-weight:600}.key-selector select{padding:8px 16px;background:var(--bg-input);color:var(--text-main);border:2px solid var(--border-dim);border-radius:6px;font-size:1em;cursor:pointer}.key-selector select:hover{border-color:var(--border-focus)}.progression-toggles{display:flex;gap:30px;justify-content:center;margin-bottom:30px;flex-wrap:wrap}.progression-toggles label{display:flex;align-items:center;gap:8px;color:var(--text-main);font-weight:600;cursor:pointer}.progression-toggles input[type=checkbox]{width:16px;height:16px;min-width:16px;min-height:16px;cursor:pointer;accent-color:var(--btn-bg)}.progression-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:15px}.progression-btn{padding:15px 20px;background:var(--bg-panel);color:var(--text-main);border:2px solid var(--border-dim);border-radius:8px;font-size:1em;cursor:pointer;transition:all .3s;text-align:left}.progression-btn:hover{background:var(--btn-bg);border-color:var(--btn-hover);color:var(--btn-text);transform:translateY(-2px)}#progression-display{display:flex;flex-direction:column;gap:30px;transition:transform .2s ease}.progression-placeholder{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:500px;margin:40px 0;border:2px dashed var(--border-dim);border-radius:12px;overflow:hidden}.placeholder-fretboard{position:absolute;inset:0;opacity:.75;background:repeating-linear-gradient(to bottom,transparent,transparent calc(100% / 7 - 2px),var(--border-dim) calc(100% / 7 - 2px),var(--border-dim) calc(100% / 7)),repeating-linear-gradient(to right,transparent,transparent calc(100% / 7 - 1px),var(--scale-border) calc(100% / 7 - 1px),var(--scale-border) calc(100% / 7)),var(--bg-fretboard);background-image:radial-gradient(circle,var(--border-dim) 6px,transparent 6px),radial-gradient(circle,var(--border-dim) 6px,transparent 6px),repeating-linear-gradient(to bottom,transparent,transparent calc(100% / 7 - 2px),var(--border-dim) calc(100% / 7 - 2px),var(--border-dim) calc(100% / 7)),repeating-linear-gradient(to right,transparent,transparent calc(100% / 7 - 1px),var(--scale-border) calc(100% / 7 - 1px),var(--scale-border) calc(100% / 7)),var(--bg-fretboard);background-position:30% 50%,60% 50%,0 0,0 0,0 0;background-size:20px 20px,20px 20px,100% 100%,100% 100%,100% 100%;background-repeat:no-repeat}.placeholder-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:40px;background:var(--bg-element);border-radius:12px;box-shadow:0 4px 20px #00000080}.placeholder-arrow{font-size:3em;color:var(--text-accent);margin-bottom:20px;animation:bounce 2s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.progression-placeholder h2{color:var(--text-accent);font-size:1.8em;margin-bottom:10px}.progression-placeholder p{color:var(--text-main);font-size:1.1em}.playback-controls-compact{display:flex;align-items:center;gap:8px;background:var(--bg-element);padding:4px;border-radius:8px;border:1px solid var(--border-dim)}.playback-toggle-group{display:flex;background:var(--bg-input);border:1px solid var(--border-dim);border-radius:4px;overflow:hidden}.toggle-btn{background:transparent;border:none;color:var(--text-main);padding:4px 8px;font-size:.8em;font-weight:600;cursor:pointer;transition:all .2s;min-width:32px;min-height:32px;display:flex;align-items:center;justify-content:center}.toggle-btn:hover{color:var(--text-highlight);background:var(--border-dim)}.toggle-btn.active{background:var(--btn-bg);color:var(--btn-text)}.compact-play-btn{background:var(--btn-bg);color:var(--btn-text);border:1px solid var(--btn-border);border-radius:4px;width:32px;height:32px;min-width:32px;min-height:32px;display:flex;align-items:center;justify-content:center;font-size:1em;cursor:pointer;transition:all .3s;padding:0}.compact-play-btn:hover{background:var(--btn-hover);transform:translateY(-1px)}.compact-play-btn:active{transform:translateY(0)}.playback-controls-wrapper{position:relative}.stop-button{background:var(--border-dim);color:var(--text-highlight);border:2px solid var(--border-dim);margin-top:12px;width:100%}.stop-button:hover{background:var(--btn-bg);border-color:var(--btn-border)}.theme-wrapper{position:relative}.theme-btn{padding:6px 12px;background:transparent;color:var(--text-accent);border:1px solid var(--border-dim);border-radius:6px;cursor:pointer;font-size:1.2em;transition:all .2s;display:flex;align-items:center;justify-content:center}.theme-btn svg{width:1em;height:1em}.theme-btn:hover{background:var(--border-dim);color:var(--text-highlight)}.theme-menu{position:absolute;top:100%;right:0;margin-top:8px;background:var(--bg-panel);border:1px solid var(--border-dim);border-radius:8px;padding:8px;display:none;flex-direction:column;gap:4px;min-width:160px;box-shadow:0 4px 12px #00000080;z-index:2000}.theme-menu.visible{display:flex}.theme-option{padding:8px 12px;background:transparent;border:none;color:var(--text-main);text-align:left;cursor:pointer;border-radius:4px;font-size:.9em;display:flex;align-items:center;gap:8px}.theme-option:hover{background:var(--bg-element);color:var(--text-highlight)}.theme-option.active{background:var(--btn-bg);color:var(--btn-text)}.theme-swatch{width:12px;height:12px;border-radius:50%;border:1px solid var(--text-main)}button,.export-btn,.playback-button,.mode-btn,.playback-mode-btn,select{min-height:44px;min-width:44px;cursor:pointer}input[type=checkbox]{cursor:pointer}@media(hover:none)and (pointer:coarse){button:active,.mode-btn:active,.playback-mode-btn:active,.export-btn:active{transform:scale(.96);transition:transform .1s}}.top-bar-content{display:flex;flex-direction:column;gap:10px;flex-wrap:wrap}.top-bar-row{display:flex;align-items:center;gap:15px;flex-wrap:wrap}@media(max-width:1200px){.top-bar-row{gap:10px}.input-group{flex:0 1 auto}}@media(max-width:768px){.fret-cell{min-height:clamp(40px,8vw,60px)}.fret-marker{width:clamp(30px,6vw,40px);height:clamp(30px,6vw,40px);font-size:clamp(.7em,1.5vw,.85em)}.string-label{font-size:clamp(.85em,2vw,1.1em);padding:clamp(5px,1.5vw,10px)}.fret-marker.leading-note{width:clamp(36px,8vw,44px);height:clamp(22px,5vw,28px);font-size:1.2em}.fretboard-container{padding:10px;width:fit-content;min-width:100%;overflow-x:visible}.fretboard-grid{min-width:100%;width:fit-content;padding:10px 10px 90px}.fretboard-grid:before{inset:10px 10px 90px}}@media(max-width:768px)and (orientation:portrait){.fret-cell{min-height:clamp(50px,10vw,70px)}.fret-marker{width:clamp(35px,7vw,45px);height:clamp(35px,7vw,45px);font-size:clamp(.75em,1.8vw,.9em)}.string-label{font-size:clamp(.9em,2.2vw,1.15em)}}@media(max-width:768px)and (orientation:landscape){.fret-cell{min-height:clamp(35px,6vh,45px);border-right:2px solid var(--fret-wire)}.fret-cell:before{height:2px;background:var(--string-color);top:50%;transform:translateY(-50%);left:0;right:-2px}.fret-cell:first-of-type{border-left:4px solid var(--fret-wire)}.fret-cell.fret-0{border-left:4px solid var(--fret-wire);border-right:2px solid var(--fret-wire)}.fret-marker{width:clamp(28px,5vh,35px);height:clamp(28px,5vh,35px);font-size:clamp(.65em,1.2vw,.8em)}.string-label{font-size:clamp(.8em,1.5vw,1em);padding:clamp(4px,1vw,8px)}.fretboard-container{padding:8px}.fretboard-grid{padding:8px 8px 90px;gap:0}.fretboard-grid:before{inset:8px 8px 90px}}@media(max-width:768px){body{padding-top:100px}.top-bar{transition:transform .3s ease-in-out}.top-bar.hidden{transform:translateY(-100%)}.toolbar-tab{position:fixed;top:0;left:50%;transform:translate(-50%);width:auto;min-width:100px;height:32px;padding:0 20px;background:var(--bg-panel);border-radius:0 0 12px 12px;border:1px solid var(--border-dim);border-top:none;display:flex;align-items:center;justify-content:center;gap:8px;z-index:999;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s ease-in-out,background-color .2s;-webkit-tap-highlight-color:transparent;box-shadow:0 4px 10px #0000004d}.toolbar-tab.visible{opacity:1;pointer-events:auto}.toolbar-tab .tab-label{color:var(--text-main);font-size:.8em;font-weight:600;letter-spacing:1px;text-transform:uppercase}.toolbar-tab .tab-arrow{color:var(--text-accent);font-size:.8em}.toolbar-tab:active{background:var(--border-dim)}.top-bar-content{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px}.app-logo{width:40px;height:40px}.app-title{font-size:1.4em}.mode-btn{padding:6px 12px;font-size:.85em}.top-bar-row{display:contents}.app-header{grid-column:1 / span 1;grid-row:1;padding:4px 8px;border:none;background:transparent;justify-self:start}.top-row-controls{display:contents}.input-group.theme-group{grid-column:2 / span 1;grid-row:1;justify-self:end;width:auto;flex-direction:row;align-items:center}#pdf-orientation-group,#export-pdf-btn{display:none!important}.mode-toggle{grid-column:1 / -1;grid-row:2;display:flex;gap:5px;margin-top:4px}.mode-btn{flex:1;padding:8px}.top-bar-row.bottom-row,.bottom-left-controls,.bottom-center-controls,.bottom-right-controls{display:contents}.input-group.zoom-group{grid-column:1;grid-row:3;width:100%;flex-direction:row;align-items:center}.filters-group{grid-column:2;grid-row:3;display:flex;flex-direction:column;gap:5px;align-items:flex-end}.dropdowns-group{grid-column:1 / -1;grid-row:4;display:flex;gap:8px;width:100%}.dropdowns-group .input-group{flex:1;min-width:0}.input-group{flex-direction:column;align-items:flex-start;gap:4px}.input-group label{font-size:.75em;opacity:.8;display:block}.input-group select{width:100%;padding:8px;font-size:.95em;height:40px}.scale-notes-group,.leading-notes-group{flex-direction:row;align-items:center;justify-content:flex-end;height:40px;padding:0 8px;background:var(--bg-input);border:1px solid var(--border-dim);border-radius:6px;width:100%}.scale-notes-group label,.leading-notes-group label{font-size:.85em;margin:0;display:flex;align-items:center;gap:6px;width:100%;cursor:pointer}.progression-select-row{grid-column:1 / -1;grid-row:5;display:flex;flex-direction:column;gap:10px;background:transparent;border:none;padding:0;margin-top:10px}.playback-container{width:100%;justify-content:space-between}.playback-toggle-group{flex:1;display:grid;grid-template-columns:1fr 1fr 1fr}.toggle-btn{width:100%}.page-content{padding:10px;margin-top:10px}#fretboard-container,#progression-display{gap:15px}.chord-section{padding:12px;display:block;visibility:visible;width:fit-content;min-width:100%}.fretboard-container{display:block!important;visibility:visible!important;min-height:200px}.fretboard-grid{display:grid!important;visibility:visible!important}.chord-controls{gap:8px;flex-wrap:wrap}.chord-controls .chord-label{flex:1 1 100%;order:-1;font-size:1.1em;padding:4px 0;margin-bottom:4px}.chord-controls .input-group{flex:1 1 auto;min-width:0}.chord-controls .input-group:has(#root-letter-0),.chord-controls .input-group:has(#root-letter-1),.chord-controls .input-group:has(#root-letter-2),.chord-controls .input-group:has(#root-letter-3),.chord-controls .input-group:has(#root-letter-4),.chord-controls .input-group:has(#root-letter-5),.chord-controls .input-group:has(#root-letter-6),.chord-controls .input-group:has(#root-letter-7){flex:0 1 24%;margin-right:4px}.chord-controls .compact-group{flex:0 1 12%;margin-right:8px}.chord-controls .compact-group select{padding:8px 2px;text-align:center}.chord-controls .input-group:has(#chord-type-0),.chord-controls .input-group:has(#chord-type-1),.chord-controls .input-group:has(#chord-type-2),.chord-controls .input-group:has(#chord-type-3),.chord-controls .input-group:has(#chord-type-4),.chord-controls .input-group:has(#chord-type-5),.chord-controls .input-group:has(#chord-type-6),.chord-controls .input-group:has(#chord-type-7){flex:1 1 26%;margin-right:4px}.chord-controls .input-group:has(#mode-type-0),.chord-controls .input-group:has(#mode-type-1),.chord-controls .input-group:has(#mode-type-2),.chord-controls .input-group:has(#mode-type-3),.chord-controls .input-group:has(#mode-type-4),.chord-controls .input-group:has(#mode-type-5),.chord-controls .input-group:has(#mode-type-6),.chord-controls .input-group:has(#mode-type-7){flex:1 1 26%}.chord-controls .input-group label{font-size:.8em;margin-bottom:2px;display:none}.chord-controls .input-group select{font-size:14px;padding:8px 6px}.legend{display:none}.frets-group{display:flex!important}}@media(min-width:769px)and (max-width:1024px){.top-bar-content{padding:10px 15px}.input-group{flex:0 1 auto}.bottom-left-controls,.bottom-center-controls,.bottom-right-controls{gap:10px}}@media(max-width:768px){.collapsible-controls{width:100%}.collapsible-controls summary{list-style:none;cursor:pointer;padding:10px 15px;background:var(--bg-panel);border-radius:6px;color:var(--text-accent);font-weight:600;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.collapsible-controls summary::-webkit-details-marker{display:none}.collapsible-controls summary:after{content:"▼";font-size:.8em;transition:transform .3s}.collapsible-controls[open] summary:after{transform:rotate(-180deg)}.collapsible-controls summary:hover{background:var(--border-dim)}.collapsible-controls[open]{background:var(--bg-element);border-radius:8px;padding:8px;margin-bottom:10px}.progression-select-row{padding:8px 12px}.progression-select-row select{width:100%;max-width:100%}.bottom-row.collapsed-mobile{display:none}.controls-toggle-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 16px;background:var(--btn-bg);color:var(--btn-text);border:2px solid var(--btn-border);border-radius:6px;font-size:.9em;font-weight:600;cursor:pointer;transition:all .3s}.controls-toggle-btn:hover{background:var(--btn-hover)}.controls-toggle-btn.active{background:var(--leading-bg)}}@media(max-width:896px)and (max-height:414px)and (orientation:landscape){.top-bar{position:sticky}.top-bar-content{padding:6px 12px;gap:6px}.app-logo{width:32px;height:32px}.app-title{font-size:1.2em}.mode-btn{padding:6px 10px;font-size:.8em}.fret-cell{min-height:35px}}@media print{.top-bar{display:none}body{padding-top:0;background:#fff}.page-content{max-width:100%}.chord-section{page-break-inside:avoid;break-inside:avoid}}