@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap";@import"https://api.fontshare.com/v2/css?f[]=satoshi@400,500,600,700,800,900&display=swap";*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--font-sans: "Satoshi", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono: "JetBrains Mono", monospace;--radius: 10px;--radius-sm: 6px;--radius-lg: 16px;--ease: cubic-bezier(.4, 0, .2, 1);--spring: cubic-bezier(.34, 1.56, .64, 1);--transition: .2s var(--ease);--transition-slow: .4s var(--ease);--neon-cyan: #09cede;--neon-blue: #2987e6;--neon-purple: #9846ea;--neon-magenta: #e648d8;--neon-pink: #f749a2;--neon-coral: #f57064;--neon-amber: #fab123;--brand-grad: linear-gradient(100deg, var(--neon-cyan), var(--neon-blue) 28%, var(--neon-purple) 55%, var(--neon-pink) 80%, var(--neon-coral))}html{font-size:14px}body{font-family:var(--font-sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}.app.dark{--bg: #0a0b0d;--bg-surface: #101216;--bg-raised: #161920;--bg-hover: #1d212a;--bg-active: #252a34;--border: #23272e;--border-subtle: #171a20;--text: #e9ebee;--text-2: #79818c;--text-3: #3a4049;--accent: #2987e6;--accent-2: #5ba7ef;--accent-dim: rgba(41,135,230,.1);--accent-glow: rgba(41,135,230,.22);--ember: #ffc233;--ember-dim: rgba(255,194,51,.14);--glass: rgba(10,11,13,.86);--glass-border: rgba(255,255,255,.06);--shadow-lg: 0 8px 40px rgba(0,0,0,.5);--shadow-sm: 0 2px 12px rgba(0,0,0,.3)}.app.light{--bg: #f4f5f6;--bg-surface: #fbfbfc;--bg-raised: #fff;--bg-hover: #eceef0;--bg-active: #dfe2e6;--border: #d9dde1;--border-subtle: #e7eaed;--text: #14171a;--text-2: #5c646d;--text-3: #9aa2aa;--accent: #1f6fd1;--accent-2: #2987e6;--accent-dim: rgba(31,111,209,.09);--accent-glow: rgba(31,111,209,.16);--ember: #c98b00;--ember-dim: rgba(201,139,0,.14);--glass: rgba(244,245,246,.9);--glass-border: rgba(0,0,0,.06);--shadow-lg: 0 8px 40px rgba(0,0,0,.12);--shadow-sm: 0 2px 12px rgba(0,0,0,.08)}.app.midnight{--bg: #060818;--bg-surface: #0c1026;--bg-raised: #141a32;--bg-hover: #1c243e;--bg-active: #24304c;--border: #1c2842;--border-subtle: #141e36;--accent: #5b8def;--accent-2: #7ba4ff;--accent-dim: rgba(91,141,239,.08);--accent-glow: rgba(91,141,239,.18);--glass: rgba(6,8,24,.85);--glass-border: rgba(91,141,239,.08)}.app.ember{--bg: #100a06;--bg-surface: #181008;--bg-raised: #221810;--bg-hover: #2c2018;--bg-active: #362820;--border: #281e14;--border-subtle: #1e160e;--accent: #e07830;--accent-2: #f09040;--accent-dim: rgba(224,120,48,.08);--accent-glow: rgba(224,120,48,.18);--glass: rgba(16,10,6,.85);--glass-border: rgba(224,120,48,.08)}.app.vapor{--bg: #0c0614;--bg-surface: #140c1e;--bg-raised: #1e142a;--bg-hover: #281c36;--bg-active: #322442;--border: #22182e;--border-subtle: #1a1226;--accent: #d050a0;--accent-2: #e868b8;--accent-dim: rgba(208,80,160,.08);--accent-glow: rgba(208,80,160,.18);--glass: rgba(12,6,20,.85);--glass-border: rgba(208,80,160,.08)}.app.sage{--bg: #060e08;--bg-surface: #0c160e;--bg-raised: #141e16;--bg-hover: #1c2a1e;--bg-active: #243226;--border: #1a2a1c;--border-subtle: #121e14;--accent: #40b870;--accent-2: #58d088;--accent-dim: rgba(64,184,112,.08);--accent-glow: rgba(64,184,112,.18);--glass: rgba(6,14,8,.85);--glass-border: rgba(64,184,112,.08)}.app{min-height:100vh;background:var(--bg);color:var(--text);position:relative;overflow-x:hidden}.ambient-glow{position:fixed;top:-40%;left:5%;width:90%;height:90%;pointer-events:none;z-index:0;border-radius:50%;background:radial-gradient(ellipse,var(--glow-color, rgba(212,160,23,.03)),transparent 70%);filter:blur(100px);transition:background 3s ease;opacity:.7}.context-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 20px;position:sticky;top:0;z-index:100;background:var(--glass);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--glass-border)}.context-brand{display:flex;align-items:center;gap:10px}.context-logo{font-family:var(--font-mono);font-size:18px;font-weight:800;letter-spacing:-.06em;background:linear-gradient(135deg,var(--accent),var(--accent-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.context-title{font-size:13px;font-weight:600;color:var(--text-2);letter-spacing:-.01em}.context-actions{display:flex;align-items:center;gap:6px}.icon-btn{width:34px;height:34px;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-raised);color:var(--text-2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all var(--transition)}.icon-btn:hover{background:var(--bg-hover);border-color:var(--accent);color:var(--text)}.icon-btn.active{background:var(--accent-dim);border-color:var(--accent);color:var(--text);box-shadow:0 0 10px var(--accent-glow)}.lang-select{height:34px;font-size:12px;font-weight:700;font-family:var(--font-mono)}.notation-toggle{width:auto;padding:0 10px;font-size:11px;font-weight:700;font-family:var(--font-mono);letter-spacing:.02em;white-space:nowrap}.intro-veil.in-stage{top:58px;z-index:30}.intro-open-btn{padding:6px 10px;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--border);border-radius:999px;background:transparent;color:var(--text-3);cursor:pointer;transition:all var(--transition);white-space:nowrap}.intro-open-btn:hover{color:var(--text);border-color:var(--accent)}.quick-bar{flex-direction:column;gap:8px}.quick-row{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}.quick-root-select{font-family:var(--font-mono);font-weight:700}.main-stage{position:relative;z-index:1;max-width:1800px;margin:0 auto;padding:20px 24px 60px;display:flex;flex-direction:column;gap:16px}.note-row{display:flex;justify-content:center}.note-pills{display:inline-flex;gap:2px;padding:3px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius)}.note-pill{min-width:36px;height:32px;font-size:11px;font-weight:600;font-family:var(--font-mono);border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-3);cursor:pointer;transition:all var(--transition);display:flex;align-items:center;justify-content:center;position:relative}.note-pill.diatonic{flex-direction:column;gap:1px;min-width:48px;padding:5px 10px}.pill-roman{font-size:8px;font-weight:700;opacity:.45;letter-spacing:.02em;line-height:1}.pill-note{font-size:12px;font-weight:700;line-height:1}.note-pill.diatonic.active .pill-roman{opacity:.7}.note-pill:hover{color:var(--text-2);background:var(--bg-hover)}.note-pill.active{background:var(--accent);color:#000;font-weight:700;box-shadow:0 0 18px var(--accent-glow),inset 0 1px #fff3;transform:scale(1.06)}.control-strip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}.view-toggle{display:flex;gap:2px;padding:3px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius)}.view-btn{padding:8px 22px;font-size:12px;font-weight:700;font-family:var(--font-sans);border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-2);cursor:pointer;transition:all var(--transition);letter-spacing:.03em}.view-btn:hover{color:var(--text);background:var(--bg-hover)}.view-btn.active{background:var(--accent);color:#000;box-shadow:0 0 14px var(--accent-glow)}.type-select{padding:8px 32px 8px 12px;font-size:12px;font-weight:500;font-family:var(--font-sans);border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-raised);color:var(--text);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23666' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;min-width:180px;transition:border-color var(--transition)}.type-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}.type-select:hover{border-color:var(--accent)}.key-selector{display:flex;gap:6px;align-items:center;padding-left:12px;border-left:1px solid var(--border);margin-left:4px}.key-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3)}.key-select{padding:7px 28px 7px 10px;font-size:12px;font-weight:500;font-family:var(--font-sans);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-raised);color:var(--text);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23666' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;transition:border-color var(--transition)}.key-select:focus{outline:none;border-color:var(--accent)}.hero{text-align:center;padding:2px 0}.hero-label{font-size:28px;font-weight:800;letter-spacing:-.035em;color:var(--text);line-height:1.15}.hero-formula{font-family:var(--font-mono);font-size:13px;font-weight:500;color:var(--text-3);margin-top:4px;letter-spacing:.05em}.hero-chord-badge{display:inline-block;margin-top:6px;padding:3px 12px;font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--accent);background:var(--accent-dim);border:1px solid rgba(212,160,23,.15);border-radius:20px}.note-legend{display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:center;padding:2px 0}.legend-chip{display:flex;align-items:center;gap:3px}.legend-circle{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1.5px solid rgba(0,0,0,.2)}.legend-iv{font-family:var(--font-mono);font-size:7px;font-weight:700;color:#000}.legend-note{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--text)}.legend-chip.chord-tone{border-bottom:2px solid var(--accent);padding-bottom:2px}.legend-chip.chord-tone .legend-circle{box-shadow:0 0 8px var(--accent-glow)}.modes-row{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}.mode-pill{padding:3px 10px;font-size:10px;font-weight:600;font-family:var(--font-sans);border:1px solid var(--border);border-radius:20px;background:var(--bg-surface);color:var(--text-2);cursor:pointer;transition:all var(--transition)}.mode-pill.active{background:var(--accent-dim);color:var(--accent);border-color:var(--accent)}.mode-pill:hover:not(.active){background:var(--bg-hover)}.fretboard-container{width:100%;border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-surface);border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm),0 0 60px #00000026}.fretboard-viewport{overflow-x:auto;overflow-y:hidden;padding:8px 0}@media(max-width:768px){.fretboard-container{position:relative}.fretboard-container:after{content:"";position:absolute;top:0;right:0;bottom:0;width:28px;background:linear-gradient(to right,transparent,var(--bg-surface) 88%);pointer-events:none}}.fretboard-svg{display:block;width:100%;min-height:200px;max-height:min(52vh,430px)}.open-string-label{font-family:var(--font-mono);font-size:13px;font-weight:600;fill:var(--text-2)}.note-label{font-family:var(--font-mono);font-size:10px;font-weight:700;fill:#000;pointer-events:none}.interval-label{font-family:var(--font-mono);font-size:8.5px;font-weight:700;fill:#000000b3;pointer-events:none}.fret-number{font-family:var(--font-mono);font-size:11px;font-weight:500;fill:var(--text-3)}.note-group{cursor:pointer;transition:opacity .4s ease}.note-group:hover circle{filter:brightness(1.15)}.note-group.ghosted{opacity:.18}.note-group.passing-tone{opacity:1}.note-group.passing-tone:hover circle{filter:brightness(1.3);opacity:.5}.pos-highlight{transition:all .4s ease}.chord-connect-line{pointer-events:none;opacity:.6;transition:opacity .3s ease}.chord-iv-label{font-family:var(--font-mono);font-size:9px;font-weight:700;fill:#000000d9;pointer-events:none}.next-chord-ring{animation:next-ring-pulse 1.5s ease-in-out infinite;pointer-events:none}@keyframes next-ring-pulse{0%,to{opacity:.3}50%{opacity:.7}}.bottom-strip{display:flex;align-items:center;justify-content:center;gap:24px}.position-bar{display:flex;gap:4px}.pos-btn{min-width:40px;padding:7px 10px;font-size:12px;font-weight:600;font-family:var(--font-mono);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-raised);color:var(--text-2);cursor:pointer;transition:all var(--transition);text-align:center}.pos-btn:hover:not(.active){background:var(--bg-hover);border-color:var(--accent)}.pos-btn.active{background:var(--accent);color:#000;border-color:var(--accent);box-shadow:0 0 12px var(--accent-glow);font-weight:700}.pos-btn.zoom-btn{margin-left:6px;font-size:14px;font-family:var(--font-sans)}.advanced-panel{display:flex;flex-direction:column;gap:16px;padding:16px 0;animation:panel-enter .3s var(--ease)}@keyframes panel-enter{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.tab-bar{display:flex;gap:2px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:3px;width:fit-content}.tab-btn{padding:7px 20px;font-size:12px;font-weight:600;font-family:var(--font-sans);border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-2);cursor:pointer;transition:all var(--transition);letter-spacing:.02em}.tab-btn:hover{background:var(--bg-hover);color:var(--text)}.tab-btn.active{background:var(--accent);color:#000;box-shadow:0 0 12px var(--accent-glow)}.chord-section{display:flex;flex-direction:column;gap:10px}.section-header{display:flex;align-items:center;justify-content:space-between}.section-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3)}.chord-tier-bar{display:flex;gap:4px;justify-content:center;padding:4px 16px}.chord-tier-btn{background:transparent;border:1px solid var(--border);color:var(--text-dim, var(--text-3));padding:3px 12px;border-radius:var(--radius-sm);font-size:11px;font-family:var(--font-sans);cursor:pointer;transition:all var(--transition)}.chord-tier-btn:hover{border-color:var(--text-3);color:var(--text)}.chord-tier-btn.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}.display-mode-bar{display:flex;gap:4px;justify-content:center;padding:4px 16px 8px}.display-mode-btn{background:transparent;border:1px solid var(--border);color:var(--text-dim, var(--text-3));padding:3px 14px;border-radius:var(--radius-sm);font-size:11px;font-family:var(--font-sans);cursor:pointer;transition:all var(--transition)}.display-mode-btn:hover{border-color:var(--text-3);color:var(--text)}.display-mode-btn.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}.fret-range-bar{display:flex;align-items:center;gap:6px;justify-content:center;padding:0 16px 8px}.fret-range-label{font-size:11px;color:var(--text-dim, var(--text-3));text-transform:uppercase;letter-spacing:.5px}.fret-range-select{background:transparent;border:1px solid var(--border);color:var(--text);padding:2px 6px;border-radius:var(--radius-sm);font-size:11px;font-family:var(--font-sans);cursor:pointer}.fret-range-dash{color:var(--text-3);font-size:11px}.fret-range-reset{background:transparent;border:1px solid var(--border);color:var(--text-3);border-radius:var(--radius-sm);width:20px;height:20px;font-size:10px;cursor:pointer;transition:all var(--transition)}.fret-range-reset:hover{border-color:var(--accent);color:var(--accent)}.chord-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:4px}.chord-btn.empty{visibility:hidden}.chord-btn{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:12px;font-family:var(--font-sans);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-raised);color:var(--text);cursor:pointer;transition:all var(--transition);text-align:left}.chord-btn:hover{background:var(--bg-hover);border-color:var(--accent);transform:translateY(-1px)}.chord-btn.active{background:var(--accent-dim);border-color:var(--accent);box-shadow:0 0 12px var(--accent-glow)}.chord-roman{font-family:var(--font-mono);font-weight:700;color:var(--accent);min-width:30px;font-size:11px}.chord-name{font-weight:600;font-size:12px;flex:1}.chord-play{background:none;border:1px solid var(--border);border-radius:50%;width:24px;height:24px;font-size:9px;cursor:pointer;color:var(--text-3);display:flex;align-items:center;justify-content:center;transition:all var(--transition);flex-shrink:0}.chord-play:hover{background:var(--accent);color:#000;border-color:var(--accent)}.latch-btn{background:none;border:1px solid var(--border);border-radius:var(--radius-sm);padding:3px 8px;font-size:13px;cursor:pointer;color:var(--text-3);transition:all var(--transition);line-height:1}.latch-btn:hover{border-color:var(--accent);color:var(--text)}.latch-btn.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent);box-shadow:0 0 10px var(--accent-glow)}.compat-section{display:flex;flex-direction:column;gap:6px;padding-top:10px;border-top:1px solid var(--border)}.compat-list{display:flex;flex-direction:column;gap:2px;max-height:180px;overflow-y:auto}.compat-btn{display:block;width:100%;text-align:left;padding:6px 10px;font-size:11px;font-family:var(--font-sans);border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-2);cursor:pointer;transition:all var(--transition)}.compat-btn:hover{background:var(--bg-hover);color:var(--text)}.compat-btn.active{background:var(--accent-dim);color:var(--accent);font-weight:600}.progression-panel{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;display:flex;flex-direction:column;gap:12px}.progression-header{display:flex;align-items:center;gap:12px}.progression-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3)}.progression-bpm{display:flex;align-items:center;gap:4px;margin-left:auto}.progression-bpm-btn{width:26px;height:26px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-raised);color:var(--text-2);font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition);font-family:var(--font-mono)}.progression-bpm-btn:hover{background:var(--bg-hover);border-color:var(--accent)}.progression-bpm-val{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--text);min-width:60px;text-align:center}.progression-play-btn{padding:7px 16px;font-size:11px;font-weight:700;font-family:var(--font-sans);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-raised);color:var(--text);cursor:pointer;transition:all var(--transition)}.progression-play-btn:hover{border-color:var(--accent);background:var(--accent-dim)}.progression-play-btn.playing{background:var(--accent);color:#000;border-color:var(--accent);box-shadow:0 0 16px var(--accent-glow);animation:prog-pulse 1.5s ease-in-out infinite}@keyframes prog-pulse{0%,to{box-shadow:0 0 10px var(--accent-glow)}50%{box-shadow:0 0 20px var(--accent-glow)}}.progression-metro-btn{width:34px;height:34px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-raised);color:var(--text-3);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition)}.progression-metro-btn:hover{border-color:var(--accent)}.progression-metro-btn.active{background:var(--accent-dim);border-color:var(--accent);box-shadow:0 0 10px var(--accent-glow)}.progression-degrees{display:flex;gap:4px;flex-wrap:wrap}.progression-deg{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 12px;font-family:var(--font-sans);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-raised);color:var(--text-3);cursor:pointer;transition:all var(--transition);min-width:54px;opacity:.5}.progression-deg:hover{opacity:.8;border-color:var(--text-3)}.progression-deg.in-prog{opacity:1;border-color:var(--accent);background:var(--accent-dim);color:var(--text)}.progression-deg.current{background:var(--accent);color:#000;border-color:var(--accent);box-shadow:0 0 14px var(--accent-glow)}.progression-deg-roman{font-family:var(--font-mono);font-size:11px;font-weight:700}.progression-deg.current .progression-deg-roman{color:#000}.progression-deg-name{font-size:9px;font-weight:500}.progression-bars-row{display:flex;align-items:center;gap:6px;padding:4px 0;font-family:var(--font-mono);font-size:11px}.progression-bars-label{color:var(--text-3);font-weight:500;margin-right:2px}.progression-bars-btn{background:var(--bg-surface);border:1px solid var(--border);color:var(--text-2);border-radius:var(--radius-sm);padding:2px 10px;font-family:var(--font-mono);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s}.progression-bars-btn.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}.progression-clear-btn{margin-left:auto;background:none;border:1px solid var(--border);color:var(--text-3);border-radius:var(--radius-sm);padding:2px 10px;font-family:var(--font-sans);font-size:10px;font-weight:500;cursor:pointer;transition:all .15s}.progression-clear-btn:hover{color:var(--text);border-color:var(--text-3)}.progression-sequence{display:flex;align-items:center;flex-wrap:wrap;gap:2px;padding:8px 10px;background:var(--bg);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--text-2)}.progression-step{cursor:pointer;border-radius:4px;padding:1px 3px;transition:all .15s}.progression-step:hover{background:#ff3c3c1f;color:var(--text);text-decoration:line-through}.progression-step.current{color:var(--accent);text-shadow:0 0 10px var(--accent-glow)}.progression-step.next{color:var(--text);opacity:.8;border:1px dashed rgba(255,255,255,.3)}.progression-arrow{color:var(--text-3)}.harmony-grid-wrap{overflow-x:auto}.harmony-grid{display:grid;gap:1px;background:var(--border-subtle);min-width:500px}.harmony-grid>*{background:var(--bg)}.harmony-corner{background:var(--bg-surface)}.harmony-deg-header{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 4px;background:var(--bg-surface);gap:1px}.harmony-deg-roman{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--accent)}.harmony-deg-note{font-family:var(--font-mono);font-size:10px;color:var(--text-3)}.harmony-row-label{display:flex;align-items:center;justify-content:center;padding:4px 6px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-3);background:var(--bg-surface);white-space:nowrap}.harmony-cell{display:flex;align-items:center;justify-content:center;gap:4px;padding:6px 4px;min-height:34px;cursor:pointer;transition:all var(--transition);position:relative}.harmony-cell.has-chord:hover{background:var(--bg-hover)}.harmony-cell.active{background:var(--accent-dim);box-shadow:inset 0 0 18px var(--accent-glow);animation:cell-pulse 3s ease-in-out infinite}@keyframes cell-pulse{0%,to{box-shadow:inset 0 0 10px #d4a01714}50%{box-shadow:inset 0 0 20px #d4a0172e}}.harmony-cell.empty{cursor:default;background:#0000001f}.harmony-cell-name{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--text-2);white-space:nowrap;transition:color var(--transition)}.harmony-cell.has-chord:hover .harmony-cell-name{color:var(--text)}.harmony-cell.active .harmony-cell-name{color:var(--accent);font-weight:700}.harmony-cell-play{background:none;border:1px solid transparent;border-radius:50%;width:18px;height:18px;font-size:7px;cursor:pointer;color:transparent;display:flex;align-items:center;justify-content:center;transition:all var(--transition);flex-shrink:0;padding:0}.harmony-cell.has-chord:hover .harmony-cell-play{color:var(--text-3);border-color:var(--border)}.harmony-cell-play:hover{background:var(--accent)!important;color:#000!important;border-color:var(--accent)!important}.harmony-cell.active .harmony-cell-play{color:var(--accent);border-color:#d4a0174d}.technique-controls{display:flex;flex-direction:column;gap:10px}.technique-mode-toggle{display:flex;gap:2px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:3px;width:fit-content}.technique-mode-btn{padding:6px 16px;font-size:11px;font-weight:600;font-family:var(--font-sans);border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-2);cursor:pointer;transition:all var(--transition)}.technique-mode-btn:hover{background:var(--bg-hover);color:var(--text)}.technique-mode-btn.active{background:var(--accent-dim);color:var(--accent);border:1px solid rgba(212,160,23,.3)}.technique-pattern-bar{display:flex;align-items:center;gap:6px}.technique-pattern-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);margin-right:4px}.technique-pat-btn{min-width:38px;padding:7px 10px;font-size:12px;font-weight:600;font-family:var(--font-mono);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-raised);color:var(--text-2);cursor:pointer;transition:all var(--transition);text-align:center}.technique-pat-btn:hover:not(.active){background:var(--bg-hover);border-color:var(--accent)}.technique-pat-btn.active{background:var(--accent);color:#000;border-color:var(--accent);box-shadow:0 0 10px var(--accent-glow)}.technique-info{display:flex;align-items:center;gap:8px}.technique-info-text{font-size:13px;font-weight:600;color:var(--text)}.settings-drawer{position:fixed;top:0;right:0;width:320px;height:100vh;background:var(--bg-surface);border-left:1px solid var(--border);z-index:200;transform:translate(100%);transition:transform .35s var(--ease);overflow-y:auto;padding:0;display:flex;flex-direction:column}.settings-drawer.open{transform:translate(0);box-shadow:-8px 0 40px #00000080}.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg-surface);z-index:1}.drawer-title{font-size:14px;font-weight:700;letter-spacing:-.01em}.drawer-close{width:30px;height:30px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-raised);color:var(--text-2);font-size:18px;font-weight:300;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition)}.drawer-close:hover{background:var(--bg-hover);color:var(--text)}.drawer-body{padding:16px 20px;display:flex;flex-direction:column;gap:20px}.drawer-section{display:flex;flex-direction:column;gap:8px}.drawer-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3)}.drawer-hint{font-size:11px;line-height:1.5;color:var(--text-3);margin-top:2px}.drawer-row{display:flex;gap:10px}.drawer-half{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}.drawer-half .type-select{min-width:0;width:100%}.drawer-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:199;opacity:0;pointer-events:none;transition:opacity .35s ease}.drawer-overlay.open{opacity:1;pointer-events:all}.theme-swatches{display:flex;gap:6px;flex-wrap:wrap}.theme-swatch{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-raised);cursor:pointer;transition:all var(--transition);min-width:52px}.theme-swatch:hover{border-color:var(--text-3);background:var(--bg-hover)}.theme-swatch.active{border-color:var(--accent);background:var(--accent-dim);box-shadow:0 0 12px var(--accent-glow)}.theme-swatch-dot{width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,255,255,.1);transition:transform var(--transition)}.theme-swatch.active .theme-swatch-dot{transform:scale(1.15);border-color:#ffffff4d}.theme-swatch-name{font-size:9px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em}.theme-swatch.active .theme-swatch-name{color:var(--text)}.switch-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:12px;color:var(--text-2);cursor:pointer}.switch-track{width:40px;height:22px;border-radius:11px;padding:2px;background:var(--border);cursor:pointer;transition:background var(--transition);position:relative}.switch-track.on{background:var(--accent);box-shadow:0 0 10px var(--accent-glow)}.switch-thumb{width:18px;height:18px;border-radius:50%;background:#fff;transition:transform var(--transition);box-shadow:0 1px 4px #0000004d}.switch-track.on .switch-thumb{transform:translate(18px)}.slider-row{display:grid;grid-template-columns:52px 1fr 36px;align-items:center;gap:10px;padding:4px 0}.slider-row-label{font-size:12px;color:var(--text-2)}.slider-row-value{font-family:var(--font-mono);font-size:11px;color:var(--text-3);text-align:right;font-variant-numeric:tabular-nums}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;border-radius:999px;background:var(--border);cursor:pointer;outline:none}.slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent-glow);cursor:pointer;transition:transform var(--transition)}.slider::-webkit-slider-thumb:hover{transform:scale(1.15)}.slider::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent-glow);cursor:pointer}.slider::-moz-range-track{height:4px;border-radius:999px;background:var(--border)}.color-grid{display:flex;flex-wrap:wrap;gap:8px}.color-swatch{position:relative;width:28px;height:28px;cursor:pointer;border-radius:var(--radius-sm);overflow:hidden}.color-swatch input[type=color]{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer;width:100%;height:100%}.swatch-fill{display:block;width:100%;height:100%;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.1)}.color-header{display:flex;justify-content:flex-end}.reset-btn{font-size:11px;background:none;border:none;color:var(--text-3);cursor:pointer;font-family:var(--font-sans);transition:color var(--transition)}.reset-btn:hover{color:var(--text-2)}.collapsible{display:flex;flex-direction:column}.collapsible-header{display:flex;align-items:center;gap:6px;padding:8px 0;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);background:none;border:none;cursor:pointer;font-family:var(--font-sans);transition:color var(--transition);width:100%;text-align:left}.collapsible-header:hover{color:var(--text-2)}.collapsible-arrow{font-size:10px;color:var(--text-3);transition:transform .25s var(--ease);display:inline-block}.collapsible.open .collapsible-arrow{transform:rotate(0)}.collapsible-title{flex:1}.collapsible-body{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}.collapsible.open .collapsible-body{max-height:2000px}.collapsible-inner{display:flex;flex-direction:column;gap:12px;padding-bottom:8px}.collapsible-panel{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}.collapsible-panel .collapsible-header{padding:12px 16px;background:linear-gradient(180deg,rgba(255,255,255,.03) 0%,transparent 100%);font-size:11px;letter-spacing:.06em}.collapsible-panel .collapsible-inner{padding:0;gap:0}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}@media(max-width:768px){.main-stage{padding:12px 12px 40px;gap:12px}.note-pills{overflow-x:auto;max-width:100%}.note-pill{min-width:30px;height:28px;font-size:10px}.control-strip{flex-direction:column;gap:8px}.type-select{min-width:100%}.key-selector{border-left:none;padding-left:0;margin-left:0;flex-wrap:wrap}.hero-label{font-size:22px}.bottom-strip{flex-direction:column;gap:8px}.position-bar{justify-content:center}.chord-grid{grid-template-columns:1fr}.settings-drawer{width:100%}.context-title{display:none}}@media(max-width:480px){.main-stage{padding:8px 8px 30px;gap:10px}.note-pill{min-width:26px;height:26px;font-size:9px}.hero-label{font-size:18px}.hero-formula{font-size:11px}}.start-session{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;max-width:520px;margin:4px auto 2px;padding:18px 24px;border:1px solid var(--accent);border-radius:var(--radius);background:linear-gradient(135deg,var(--accent-dim),transparent);color:var(--text);cursor:pointer;transition:all var(--transition)}.start-session:hover{background:linear-gradient(135deg,var(--accent-glow),var(--accent-dim));box-shadow:0 0 26px var(--accent-glow);transform:translateY(-1px)}.start-session-main{font-family:var(--font-sans);font-size:17px;font-weight:700;letter-spacing:.04em;color:var(--accent-2)}.start-session-sub{font-size:11px;color:var(--text-2);letter-spacing:.05em}.concept-card{width:100%;max-width:720px;margin:4px auto 0;padding:18px 22px;border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--radius);background:var(--bg-surface)}.concept-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}.concept-title{font-family:var(--font-sans);font-size:22px;font-weight:700;color:var(--text);letter-spacing:.01em}.concept-focus{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--text-2);white-space:nowrap}.concept-focus b{display:inline-block;min-width:22px;padding:1px 7px;margin-left:4px;border-radius:10px;background:var(--accent);color:#000;font-weight:800;text-align:center}.concept-hook{margin-top:6px;font-size:14px;font-weight:600;color:var(--accent-2)}.concept-listen{margin:8px 0 0;font-size:14px;line-height:1.55;color:var(--text-2)}.flow-controls{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:4px}.flow-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;font-family:var(--font-sans);font-size:12px;font-weight:700;letter-spacing:.03em;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-raised);color:var(--text-2);cursor:pointer;transition:all var(--transition)}.flow-btn:hover{color:var(--text);border-color:var(--accent)}.flow-btn.primary{background:var(--accent);border-color:var(--accent);color:#000}.flow-btn.primary:hover{box-shadow:0 0 16px var(--accent-glow)}.flow-btn.ghost{background:transparent}.flow-btn .flow-dot{width:8px;height:8px;border-radius:50%;background:var(--text-3, #666);transition:background var(--transition)}.flow-btn.on{color:var(--text);border-color:var(--accent)}.flow-btn.on .flow-dot{background:var(--accent);animation:drone-pulse 2.4s ease-in-out infinite}.play-btn{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border:none;border-radius:50%;background:var(--brand-grad);color:#fff;font-size:18px;cursor:pointer;box-shadow:0 4px 18px #00000059;animation:play-pop .42s var(--spring)}.play-btn.small{width:40px;height:40px;font-size:14px}.play-btn:hover{transform:scale(1.06)}.play-btn:active{transform:scale(.92)}.play-btn .play-icon{transform:translate(1px);transition:transform .2s var(--spring)}.play-btn.on .play-icon{transform:translate(0)}.play-btn.on{animation:play-pop .42s var(--spring),play-pulse 2.4s ease-in-out .42s infinite}@keyframes play-pop{0%{transform:scale(1)}40%{transform:scale(1.28)}to{transform:scale(1)}}@keyframes play-pulse{0%,to{box-shadow:0 4px 18px #00000059,0 0 #9846ea66}50%{box-shadow:0 4px 18px #00000059,0 0 0 9px #9846ea00}}.backing-controls{display:flex;align-items:center;gap:8px}.backing-switch{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}.backing-switch-btn{padding:6px 10px;font-size:11px;font-weight:700;font-family:var(--font-sans);letter-spacing:.02em;border:none;background:var(--bg-raised);color:var(--text-3);cursor:pointer;transition:all var(--transition)}.backing-switch-btn+.backing-switch-btn{border-left:1px solid var(--border)}.backing-switch-btn:hover{color:var(--text);background:var(--bg-hover)}.backing-switch-btn.active{background:var(--brand-grad);color:#fff}.backing-bpm{display:flex;align-items:center;gap:4px}.backing-bpm-btn{width:22px;height:22px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-raised);color:var(--text-2);font-size:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition);font-family:var(--font-mono)}.backing-bpm-btn:hover{background:var(--bg-hover);border-color:var(--accent)}.backing-bpm-val{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--text-2);min-width:30px;text-align:center}.backing-metro-btn{width:28px;height:28px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-raised);color:var(--text-3);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition)}.backing-metro-btn:hover{border-color:var(--accent);color:var(--text)}.backing-metro-btn.active{background:var(--accent-dim);border-color:var(--accent);color:var(--text);box-shadow:0 0 10px var(--accent-glow)}.backing-tuner-btn{width:auto;padding:0 10px;font-size:11px;font-weight:700;font-family:var(--font-sans);letter-spacing:.02em}.tuner-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;z-index:210;display:grid;place-items:center;padding:16px}.tuner-panel{width:min(380px,94vw);background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding-bottom:20px;box-shadow:0 24px 60px #00000080}.tuner-note{font-family:var(--font-mono);font-size:64px;font-weight:700;text-align:center;color:var(--text);padding:18px 0 6px;transition:color .15s ease,text-shadow .15s ease}.tuner-note sub{font-size:22px;color:var(--text-3)}.tuner-note.in-tune{color:#3ad29f;text-shadow:0 0 24px rgba(58,210,159,.5)}.tuner-meter-row{display:flex;align-items:center;gap:10px;padding:0 24px}.tuner-flat,.tuner-sharp{color:var(--text-3);font-size:16px}.tuner-track{position:relative;flex:1;height:10px;border-radius:999px;background:var(--bg-raised);border:1px solid var(--border)}.tuner-center{position:absolute;left:50%;top:-4px;bottom:-4px;width:2px;background:var(--text);opacity:.55;transform:translate(-50%)}.tuner-needle{position:absolute;top:-6px;bottom:-6px;width:4px;border-radius:2px;background:var(--text-2);transform:translate(-50%);transition:left .09s linear,background .15s ease}.tuner-needle.in-tune{background:#3ad29f;box-shadow:0 0 12px #3ad29fb3}.tuner-needle.far{background:#e05555}.tuner-cents{font-family:var(--font-mono);font-size:12px;color:var(--text-3);text-align:center;padding:10px 0 14px;min-height:18px}.tuner-strings{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;padding:0 16px}.tuner-string{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--text-3);border:1px solid var(--border);border-radius:var(--radius-sm);padding:5px 10px;transition:all var(--transition)}.tuner-string sub{font-size:9px}.tuner-string.heard{color:var(--text);border-color:var(--accent);box-shadow:0 0 8px var(--accent-glow)}.tuner-string.in-tune{color:#3ad29f;border-color:#3ad29f;box-shadow:0 0 10px #3ad29f80}.jam-stage{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:12px 20px 20px;overflow:hidden}.flow-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}.jam-stage>*:not(.flow-canvas){position:relative;z-index:1}.jam-setup{align-self:center;display:flex;flex-direction:column;gap:10px;padding:14px 18px;background:var(--glass);border:1px solid var(--border);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.jam-setup-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.jam-chords{flex-direction:column;align-items:flex-start}.jam-chord-pool,.jam-chord-seq{display:flex;gap:6px;flex-wrap:wrap}.jam-chord-btn{padding:5px 10px;font-size:12px;font-weight:600;font-family:var(--font-sans);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-raised);color:var(--text-2);cursor:pointer;transition:all var(--transition)}.jam-chord-btn:hover{border-color:var(--accent);color:var(--text)}.jam-chord-btn.seq{background:var(--accent-dim);border-color:var(--accent);color:var(--text)}.jam-chord-hint{font-size:11px;color:var(--text-3);font-family:var(--font-mono)}.jam-hint{font-size:11px;color:var(--text-3);text-align:center}.jam-home{text-align:center;font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}.jam-home b{color:var(--text)}.jam-whisper{text-transform:none;letter-spacing:.04em;color:var(--text-2);animation:jam-whisper-in .8s ease}.jam-findit-hud{display:flex;align-items:baseline;justify-content:center;gap:22px;flex-wrap:wrap}.jam-findit-target{font-size:20px;letter-spacing:.04em;text-transform:none;color:var(--text)}.jam-findit-target b{color:var(--neon-amber);font-size:24px}.jam-findit-stat{color:var(--text-3)}.jam-findit-stat b{color:var(--text);font-size:14px}@keyframes jam-whisper-in{0%{opacity:0}to{opacity:1}}.jam-neck{display:grid;place-items:center;min-height:0;overflow:hidden}.jam-neck .fretboard-container{width:100%;background:transparent;border-color:transparent;box-shadow:none}.jam-summary{text-align:center;font-family:var(--font-mono);font-size:13px;color:var(--text-2)}@media(max-width:620px){.app.mode-flow{height:auto;min-height:100dvh;overflow:visible}.jam-stage{overflow:visible}.jam-neck{height:42vh;max-height:42vh;flex-shrink:0}.jam-neck .fretboard-svg{min-width:0;max-height:min(40vh,380px)}}.shell-header:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--brand-grad);opacity:.7;pointer-events:none}::selection{background:#f749a259;color:#fff}*{scrollbar-width:thin;scrollbar-color:var(--neon-purple) transparent}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--neon-blue),var(--neon-purple),var(--neon-pink));border-radius:999px}.jam-stage:before,.lessons-stage:before,.study-stage:before,.flow-stage:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:url(/mark.png) center 38% / min(50vmin,460px) no-repeat;opacity:.05;pointer-events:none}.lessons-stage{position:relative}.lessons-stage>*{position:relative}.study-stage{position:relative}.study-stage>*{position:relative;z-index:1}.flow-stage{position:relative}@media(max-height:500px){.app.mode-learn,.app.mode-flow{height:auto;min-height:100dvh;overflow:visible}.flow-stage,.jam-stage{height:auto;overflow:visible}.app.mode-learn .lessons-stage{flex:none;height:auto;overflow:visible}.jam-stage{justify-content:flex-start}.flow-neck,.jam-neck{height:72vh;max-height:72vh;flex-shrink:0}.flow-neck .fretboard-svg,.jam-neck .fretboard-svg{min-width:0;max-height:min(66vh,400px)}.shell-logo{width:44px;height:44px}.shell-wordmark{--wm-h: 22px}}.lessons-stage{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;gap:16px;padding:24px 20px 40px}.lessons-title{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)}.lesson-card{width:min(680px,100%);background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 20px;display:flex;flex-direction:column;gap:10px}.lesson-num{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}.lesson-name{font-size:18px;font-weight:700;color:var(--text)}.lesson-desc{font-size:13px;color:var(--text-2);line-height:1.5}.lesson-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.heard-note .heard-ring{animation:heard-pulse .9s ease-in-out infinite}.heard-note .heard-ring-outer{animation:heard-pulse .9s ease-in-out infinite reverse}@keyframes heard-pulse{0%,to{opacity:.55}50%{opacity:1}}.heard-readout{display:inline-flex;align-items:baseline;min-width:44px;justify-content:center;padding:7px 10px;font-family:var(--font-sans);font-size:14px;font-weight:800;letter-spacing:.02em;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-surface);color:var(--text);transition:all var(--transition)}.heard-readout sub{font-size:9px;font-weight:600;color:var(--text-2);margin-left:1px}.heard-readout.focus-hit{border-color:var(--accent);color:var(--accent-2);box-shadow:0 0 14px var(--accent-glow)}.mic-error{display:flex;align-items:center;gap:8px;font-size:12px;color:#ff8a8a;background:#e052521a;border:1px solid rgba(224,82,82,.3);border-radius:var(--radius);padding:8px 12px}.study-mic-error{margin:10px 0 0;width:fit-content}.concept-focus b{transition:all var(--transition)}.concept-focus b.hit{box-shadow:0 0 16px var(--accent-glow),0 0 4px var(--accent);animation:focus-hit-pulse .8s ease-in-out infinite}.concept-focus b.found:not(.hit){box-shadow:0 0 8px var(--accent-glow)}.concept-focus .focus-check{margin-left:6px;color:var(--accent-2);font-weight:800}@keyframes focus-hit-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.12)}}.app{min-height:100dvh;display:flex;flex-direction:column}@media(min-width:621px)and (min-height:501px){.app.mode-learn,.app.mode-flow{height:100dvh;overflow:hidden}}.shell-header{position:sticky;top:0;z-index:40;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:12px clamp(14px,3vw,28px);background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--border-subtle)}.shell-brand{display:flex;align-items:center;gap:10px;min-width:0}.shell-logo{width:64px;height:64px;margin:-10px 0;object-fit:contain;filter:drop-shadow(0 0 16px rgba(152,70,234,.6)) drop-shadow(0 0 36px rgba(9,206,222,.3));transition:filter var(--transition-slow),transform var(--transition-slow)}.shell-brand:hover .shell-logo{filter:drop-shadow(0 0 16px rgba(152,70,234,.8)) drop-shadow(0 0 34px rgba(247,73,162,.4));transform:scale(1.05)}.shell-wordmark{flex-shrink:0;--wm-h: 34px;width:calc(972 / 145 * var(--wm-h));height:var(--wm-h);background:url(/logo.png) no-repeat left bottom;background-size:calc(972 / 145 * var(--wm-h)) auto;filter:drop-shadow(0 0 10px rgba(247,73,162,.3))}.shell-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px}.mode-switch{display:flex;gap:3px;padding:3px;background:var(--bg-surface);border:1px solid var(--border);border-radius:999px}.mode-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 18px;border:none;border-radius:999px;background:transparent;color:var(--text-2);font-family:var(--font-sans);font-size:12.5px;font-weight:600;letter-spacing:.02em;cursor:pointer;transition:all var(--transition);white-space:nowrap}.mode-btn:hover{color:var(--text)}.mode-btn.active{background:var(--brand-grad);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35);box-shadow:0 0 14px #9846ea59}.mode-btn.tab-modes.active{background:linear-gradient(100deg,var(--neon-cyan),var(--neon-blue));box-shadow:0 0 14px #09cede66}.mode-btn.tab-explore.active{background:linear-gradient(100deg,var(--neon-blue),var(--neon-purple),var(--neon-magenta));box-shadow:0 0 14px #9846ea73}.mode-btn.tab-flow.active{background:linear-gradient(100deg,var(--neon-magenta),var(--neon-pink),var(--neon-coral));box-shadow:0 0 14px #f749a273}.mode-btn .mode-ico{font-size:11px;opacity:.8}.study-stage{display:flex;flex-direction:column;gap:12px;padding:14px clamp(14px,3vw,28px) 32px;max-width:1680px;width:100%;margin:0 auto}.study-bar{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:2px 0}.study-bar-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}.study-bar-sep{width:1px;height:20px;background:var(--border);margin:0 2px}.study-head{display:flex;align-items:baseline;justify-content:center;gap:14px;flex-wrap:wrap;text-align:center}.study-title{font-size:clamp(19px,2.4vw,27px);font-weight:800;letter-spacing:-.02em;color:var(--text)}.study-formula{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--text-2)}.theory-card{display:grid;gap:6px;max-width:780px;width:100%;margin:0 auto;padding:0;border:0;background:none}.theory-eyebrow{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}.theory-title{font-size:15px;font-weight:700;color:var(--text);letter-spacing:-.01em}.theory-body{font-size:13.5px;line-height:1.6;color:var(--text-2);max-width:78ch}.theory-toggle{margin-left:auto;padding:2px 6px;border:none;background:none;color:var(--text-3);font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}.theory-toggle:hover{color:var(--text-2)}.flow-stage{flex:1;min-height:0;display:grid;grid-template-rows:auto 1fr auto auto;gap:clamp(8px,1.6vh,16px);padding:clamp(12px,2.2vh,22px) clamp(16px,4vw,44px) clamp(10px,2vh,18px);position:relative}.flow-aura{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;background:radial-gradient(60% 50% at 50% 38%,var(--accent-glow),transparent 70%);opacity:.5;animation:flow-breathe 11s ease-in-out infinite;transition:background .22s ease}.flow-stage.landed .flow-aura{background:radial-gradient(62% 52% at 50% 40%,var(--ember-dim),transparent 70%);opacity:1}@keyframes flow-breathe{0%,to{opacity:.4;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.flow-stage>*:not(.flow-aura):not(.flow-owned):not(.collection-overlay){position:relative;z-index:1}.flow-idea{display:grid;gap:9px;justify-items:center;max-width:780px;width:100%;margin:0 auto;text-align:center}.flow-key{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--text-2)}.flow-hook{font-family:Georgia,Iowan Old Style,Palatino Linotype,serif;font-size:clamp(20px,2.5vw,30px);font-weight:400;line-height:1.2;letter-spacing:-.01em;color:var(--text);text-wrap:balance}.flow-listen{font-size:13.5px;line-height:1.6;color:var(--text-2);max-width:64ch}.flow-target{display:inline-flex;align-items:center;gap:11px;padding:7px 16px 7px 8px;border:1px solid var(--accent-glow);border-radius:999px;background:var(--accent-dim);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);transition:all .4s var(--ease)}.flow-target b{display:grid;place-items:center;min-width:28px;height:28px;padding:0 8px;border-radius:999px;background:var(--accent);color:#04211d;font-size:13px;font-weight:800;letter-spacing:0}.flow-target.found{border-color:var(--ember);background:var(--ember-dim);color:var(--ember)}.flow-target.found b{background:var(--ember);color:#2a1004;animation:flow-bloom .7s var(--spring)}@keyframes flow-bloom{0%{transform:scale(1);box-shadow:0 0 0 0 var(--ember-dim)}55%{transform:scale(1.3)}to{transform:scale(1);box-shadow:0 0 0 22px #ff8a4c00}}.rotate-prompt{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px;padding:10px 14px;border:1px solid var(--accent);border-radius:var(--radius);background:var(--accent-dim);font-size:12px;color:var(--text)}.rotate-prompt button{flex-shrink:0;padding:4px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-raised);color:var(--text);font-family:var(--font-sans);font-size:11px;font-weight:600;cursor:pointer}.flow-owned{position:absolute;top:clamp(12px,2.2vh,22px);right:clamp(16px,4vw,44px);z-index:2;display:inline-flex;align-items:center;gap:9px;padding:7px 13px 7px 8px;border:1px solid var(--border);border-radius:999px;background:var(--bg-surface);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);transition:all var(--transition);cursor:pointer;font-family:var(--font-mono)}.flow-owned:hover{border-color:var(--text-3);color:var(--text)}.flow-owned-n{display:grid;place-items:center;min-width:24px;height:24px;border-radius:999px;background:var(--bg-raised);border:1px solid var(--text-3);color:var(--text);font-size:12px;font-weight:800;letter-spacing:0;font-variant-numeric:tabular-nums;transition:all var(--transition)}.flow-owned.gained{border-color:var(--ember);color:var(--ember)}.flow-owned.gained .flow-owned-n{background:var(--ember);border-color:var(--ember);color:#2a1004;animation:flow-pop .62s var(--spring)}@keyframes flow-pop{0%{transform:scale(1)}40%{transform:scale(1.45)}to{transform:scale(1)}}.collection-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;z-index:210;display:flex;align-items:center;justify-content:center;padding:24px}.collection-panel{width:min(560px,100%);max-height:80vh;display:flex;flex-direction:column;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 20px 60px #00000080;overflow:hidden}.collection-sub{padding:0 20px;font-size:12px;color:var(--text-3)}.collection-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;padding:16px 20px 20px;overflow-y:auto}.collection-item{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-raised);font-family:var(--font-sans);font-size:12px;font-weight:600;text-align:left;cursor:pointer;transition:all var(--transition)}.collection-item:hover{border-color:var(--text-3)}.collection-item-mark{font-size:13px;color:var(--text-3);width:14px;text-align:center}.collection-item.owned{border-color:var(--ember);background:var(--ember-dim);color:var(--text)}.collection-item.owned .collection-item-mark{color:var(--ember)}.collection-item.locked{color:var(--text-3)}.flow-neck{display:grid;place-items:center;min-height:0;overflow:hidden}.flow-neck .fretboard-container{width:100%}.flow-legend{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}.flow-legend span{display:inline-flex;align-items:center;gap:6px}.flow-sw{width:10px;height:10px;border-radius:999px}.flow-sw.target{background:var(--accent)}.flow-sw.root{background:var(--bg-active);border:1.5px solid var(--text)}.flow-sw.scale{background:var(--brand-grad);opacity:.55}.flow-sw.heard{background:transparent;border:2px solid #fff}.flow-sw.shape{background:var(--bg-active);border:2px solid rgba(255,255,255,.9)}.flow-objective{max-width:68ch;font-size:14px;line-height:1.6;color:var(--text);padding:11px 16px;border-radius:12px;background:var(--bg-surface);border:1px solid var(--border-subtle)}.flow-objective b{color:var(--accent)}.flow-key{display:inline-flex;align-items:center;gap:10px}.flow-help{padding:3px 9px;border:1px solid var(--border);border-radius:999px;background:transparent;color:var(--text-2);font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:all var(--transition)}.flow-help:hover{color:var(--text);border-color:var(--accent)}.ladder{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;padding:5px;border:1px solid var(--border);border-radius:14px;background:var(--bg-surface)}.rung{position:relative;display:grid;gap:1px;justify-items:center;min-width:78px;padding:8px 10px 14px;border:1px solid transparent;border-radius:10px;background:var(--bg-raised);cursor:pointer;transition:all var(--transition)}.rung:hover{border-color:var(--text-3);transform:translateY(-1px)}.rung-tonic{font-family:var(--font-mono);font-size:15px;font-weight:800;color:var(--text-2)}.rung-mode{font-size:9.5px;font-weight:600;letter-spacing:.03em;color:var(--text-3)}.rung-mark{position:absolute;bottom:3px;font-size:9px;line-height:1;color:var(--text-3)}.rung.here{border-color:var(--accent);background:var(--accent-dim)}.rung.here .rung-tonic{color:var(--accent)}.rung.here .rung-mode{color:var(--text-2)}.rung.here .rung-mark{color:var(--accent)}.rung.claimed{background:var(--ember-dim);border-color:var(--ember);animation:rung-claim .64s var(--spring)}.rung.claimed .rung-tonic{color:var(--ember)}.rung.claimed .rung-mode{color:var(--text-2)}.rung.claimed .rung-mark{color:var(--ember);font-weight:800}.rung.claimed.here{border-color:var(--ember);box-shadow:0 0 16px var(--ember-dim)}@keyframes rung-claim{0%{transform:scale(1)}45%{transform:scale(1.14)}to{transform:scale(1)}}.walk-here{margin:0;display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:center;font-size:15px;color:var(--text-2)}.walk-here b{color:var(--text)}.walk-here-pos{padding:3px 10px;border-radius:999px;background:var(--accent);color:#04211d;font-family:var(--font-mono);font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.walk-plain{color:var(--text-3)}.walk-story{margin:0;max-width:72ch;padding:11px 15px;border-radius:10px;border-left:2px solid var(--accent);background:var(--accent-dim);font-size:13.5px;line-height:1.6;color:var(--text);animation:shift-in .52s var(--spring)}.walk-task{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;padding:10px 16px;border:1px solid var(--border);border-radius:999px;background:var(--bg-surface);transition:all var(--transition)}.walk-task.ready{border-color:var(--accent);background:var(--accent-dim);box-shadow:0 0 18px var(--accent-glow)}.walk-task.claimed{border-color:var(--ember);background:var(--ember-dim)}.walk-pips{display:flex;gap:5px}.walk-pip{width:9px;height:9px;border-radius:999px;background:var(--bg-active);border:1px solid var(--text-3);transition:all var(--transition)}.walk-pip.lit{background:var(--accent);border-color:var(--accent);transform:scale(1.15)}.walk-instruction{font-size:13px;font-weight:600;color:var(--text)}.walk-task.ready .walk-instruction{color:var(--accent-2)}.walk-task.claimed .walk-instruction{color:var(--ember)}.walk-combo{padding:4px 12px;border-radius:999px;background:var(--ember-dim);border:1px solid var(--ember);color:var(--ember);font-family:var(--font-mono);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;animation:rung-claim .5s var(--spring)}.walk-done{display:grid;gap:8px;justify-items:center;max-width:700px;padding:18px 20px;border:1px solid var(--ember);border-radius:16px;background:var(--ember-dim);text-align:center;animation:shift-in .6s var(--spring)}.walk-done-tag{padding:5px 14px;border-radius:999px;background:var(--ember);color:#2a1004;font-family:var(--font-mono);font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}.walk-done p{margin:0;font-size:14px;line-height:1.65;color:var(--text)}.walk-done b{color:var(--ember)}.flow-ctl.walk-entry{border-color:var(--accent);color:var(--accent)}.flow-ctl.walk-entry:hover{background:var(--accent);color:#04211d}.flow-sw.done{background:#2f3742;border:1px solid rgba(255,255,255,.55)}.flow-sw.todo{background:#191d24;border:1px solid rgba(255,255,255,.22)}.flow-sw.roll{background:transparent;border:1.5px dashed var(--ember)}.run-bar{display:flex;align-items:center;gap:12px;width:100%;max-width:560px;padding:9px 14px;border:1px solid var(--border);border-radius:999px;background:var(--bg-surface)}.run-name{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);white-space:nowrap}.run-progress{flex:1;height:5px;border-radius:999px;background:var(--bg-active);overflow:hidden}.run-progress-fill{height:100%;border-radius:999px;background:var(--accent);transition:width .22s var(--ease)}.run-count{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}.run-reset{border:none;background:none;padding:2px 4px;font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);cursor:pointer}.run-reset:hover{color:var(--text-2)}.run-hint{margin:0;max-width:62ch;font-size:12.5px;line-height:1.55;color:var(--text-3)}.run-done{display:grid;gap:10px;max-width:780px;width:100%;margin:0 auto;padding:14px 16px;border:1px solid var(--ember);border-radius:14px;background:var(--ember-dim);animation:shift-in .48s var(--spring)}.run-verdict{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px;color:var(--text)}.run-verdict-tag{padding:3px 9px;border-radius:999px;background:var(--ember);color:#2a1004;font-family:var(--font-mono);font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.run-stats{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap}.run-twist-offer{display:grid;gap:8px}.run-twist-lead{font-size:13px;line-height:1.55;color:var(--text)}.run-twist-btns{display:flex;gap:7px;flex-wrap:wrap}.run-twist-btn{padding:8px 16px;border:1px solid var(--accent);border-radius:999px;background:var(--accent-dim);color:var(--accent);font-family:var(--font-sans);font-size:12.5px;font-weight:700;cursor:pointer;transition:all var(--transition)}.run-twist-btn:hover{background:var(--accent);color:#04211d;transform:translateY(-1px)}.run-twist{margin:0;padding:11px 14px;border-radius:10px;border-left:2px solid var(--accent);background:var(--accent-dim);font-size:13.5px;line-height:1.6;color:var(--text);animation:shift-in .42s var(--spring)}.modes-strip{display:grid;gap:10px;padding:14px 16px;border:1px solid var(--border);border-radius:14px;background:linear-gradient(180deg,var(--accent-dim),transparent 70%),var(--bg-surface)}.modes-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}.modes-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);white-space:nowrap}.modes-hint{font-size:12.5px;line-height:1.5;color:var(--text-2)}.modes-row{display:flex;gap:6px;flex-wrap:wrap}.mode-chip{display:grid;gap:1px;justify-items:center;min-width:82px;padding:8px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg-raised);cursor:pointer;transition:all var(--transition)}.mode-chip:hover{border-color:var(--accent);transform:translateY(-1px)}.mode-chip.active{background:var(--brand-grad);border-color:transparent}.mode-chip-root{font-family:var(--font-mono);font-size:14px;font-weight:800;color:var(--text)}.mode-chip-name{font-size:10.5px;font-weight:600;color:var(--text-2)}.mode-chip.active .mode-chip-root{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35)}.mode-chip.active .mode-chip-name{color:#ffffffd9;text-shadow:0 1px 3px rgba(0,0,0,.35)}.modes-shift{position:relative;margin:0;padding:11px 34px 11px 14px;border-radius:10px;border-left:2px solid var(--ember);background:var(--ember-dim);font-size:13px;line-height:1.6;color:var(--text);animation:shift-in .5s var(--spring)}@keyframes shift-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}.modes-dismiss{position:absolute;top:6px;right:8px;border:none;background:none;color:var(--text-3);font-size:15px;cursor:pointer;line-height:1;padding:2px 5px}.modes-dismiss:hover{color:var(--text)}.theory-context{margin:0;padding:0;font-size:15px;line-height:1.55;color:var(--text);letter-spacing:-.005em;max-width:70ch}.primer{display:grid;gap:12px;max-width:820px;width:100%;margin:0 auto;padding:18px 20px;border:1px solid var(--border);border-radius:14px;background:var(--bg-surface);max-height:42vh;overflow-y:auto}.primer-item{display:grid;gap:4px}.primer-q{font-size:13.5px;font-weight:700;color:var(--accent)}.primer-a{font-size:13px;line-height:1.6;color:var(--text-2)}.flow-controls{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}.flow-ctl{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border:1px solid var(--border);border-radius:999px;background:transparent;color:var(--text-2);font-family:var(--font-sans);font-size:13px;font-weight:600;cursor:pointer;transition:all var(--transition)}.flow-ctl:hover{color:var(--text);border-color:var(--text-3)}.flow-ctl.primary{background:var(--brand-grad);border-color:transparent;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35)}.flow-ctl.primary:hover{transform:translateY(-1px)}.flow-ctl.primary.beckon{animation:flow-beckon 1.6s ease-in-out infinite}@keyframes flow-beckon{0%,to{box-shadow:0 0 #ff8a4c00}50%{box-shadow:0 0 0 7px var(--ember-dim)}}.flow-ctl.on{color:var(--text);border-color:var(--accent-glow)}.flow-ctl .flow-pip{width:7px;height:7px;border-radius:999px;background:var(--text-3)}.flow-ctl.on .flow-pip{background:var(--accent);animation:drone-pulse 2.6s ease-in-out infinite}.flow-readout{display:inline-grid;place-items:center;min-width:62px;padding:11px 14px;border:1px solid var(--border);border-radius:999px;font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--text-3);transition:all var(--transition)}.flow-readout sub{font-size:9px;color:var(--text-3)}.mic-meter{display:flex;align-items:center;width:90px}.mic-meter-track{position:relative;width:100%;height:6px;border-radius:999px;background:var(--bg-raised);border:1px solid var(--border);overflow:visible}.mic-meter-fill{position:absolute;top:0;right:0;bottom:0;left:0;width:0%;border-radius:999px;background:var(--text-3);transition:width .08s linear,background .15s ease}.mic-meter-fill.clearing{background:var(--brand-grad)}.mic-meter-gate{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--text);opacity:.6}.flow-readout.hit{color:var(--ember);border-color:var(--ember);background:var(--ember-dim)}.flow-coach{display:flex;align-items:center;justify-content:center;gap:10px;font-size:12px;color:var(--text-2)}.flow-coach .flow-pip{width:6px;height:6px;border-radius:999px;background:var(--accent);animation:drone-pulse 2.6s ease-in-out infinite}.flow-coach.mic-error{color:#ff8a8a;background:#e052521a;border:1px solid rgba(224,82,82,.3);border-radius:999px;padding:8px 16px}.flow-coach.mic-error .flow-pip{background:#ff8a8a;animation:none}.flow-coach button{padding:2px 6px;border:none;background:none;color:var(--text-3);font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}.flow-coach button:hover{color:var(--text-2)}.intro-veil{position:fixed;top:0;right:0;bottom:0;left:0;z-index:90;display:grid;place-items:center;padding:24px;background:#060709eb;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow-y:auto;overscroll-behavior:contain;grid-template-columns:minmax(0,1fr)}.intro{display:grid;gap:16px;justify-items:center;text-align:center;width:100%;max-width:760px;margin:auto;padding:8px 0;min-width:0}.intro>*{min-width:0;max-width:100%}.intro-eyebrow{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--text-2)}.intro-logo{width:min(240px,52vw);height:auto;margin:0 auto;display:block;filter:drop-shadow(0 0 30px rgba(152,70,234,.4))}.intro-how{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:4px 0 0;text-align:left}.intro-step{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"n t" ". d";column-gap:8px;row-gap:4px;padding:0 16px;border:0;border-left:1px solid var(--border)}.intro-step:first-child{border-left:0;padding-left:0}.intro-step-n{grid-area:n;align-self:center;font-family:var(--font-mono);font-size:10px;font-weight:700;color:var(--text-3)}.intro-step-t{grid-area:t;align-self:center;font-size:12.5px;font-weight:700;color:var(--text);letter-spacing:-.01em}.intro-step-d{grid-area:d;font-size:11.5px;line-height:1.55;color:var(--text-2)}.intro-step-d em{color:var(--accent);font-style:normal}.intro-step-d b{color:var(--accent);font-weight:700}.intro-title{font-family:Georgia,Iowan Old Style,serif;font-weight:400;font-size:clamp(28px,4.4vw,46px);line-height:1.1;letter-spacing:-.015em;color:var(--text);text-wrap:balance}.intro-title em{font-style:italic;color:var(--accent)}.intro-sub{font-size:14.5px;line-height:1.6;color:var(--text-2);max-width:50ch}.intro-sub em{color:var(--text);font-style:italic}.intro-sub b{color:var(--accent);font-weight:700}.intro-modes{display:grid;grid-template-columns:repeat(2,minmax(0,260px));gap:12px;margin-top:2px}.intro-mode{position:relative;display:grid;gap:6px;justify-items:center;padding:20px 16px 18px;border:1px solid var(--border);border-radius:14px;background:var(--bg-surface);cursor:pointer;transition:all var(--transition);text-align:center;overflow:hidden}.intro-mode:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--brand-grad)}.intro-mode:hover{border-color:var(--accent);transform:translateY(-2px)}.intro-mode-name{font-size:14px;font-weight:700;color:var(--text)}.intro-mode-desc{font-size:12px;line-height:1.5;color:var(--text-2)}.intro-skip{border:none;background:none;padding:6px;font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);cursor:pointer}.intro-skip:hover{color:var(--text-2)}.desktop-nudge-card{position:relative;width:100%;max-width:460px;margin:auto;padding:34px 28px 28px;border-radius:24px;border:1px solid transparent;background:linear-gradient(var(--bg-surface),var(--bg-surface)) padding-box,conic-gradient(from 180deg,var(--neon-cyan),var(--neon-blue),var(--neon-purple),var(--neon-pink),var(--neon-coral),var(--neon-amber),var(--neon-cyan)) border-box;box-shadow:0 0 50px #9846ea2e}.desktop-nudge-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:var(--bg-raised);color:var(--text-2);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition)}.desktop-nudge-close:hover{background:var(--bg-hover);color:var(--text);border-color:var(--accent)}.desktop-nudge{display:grid;gap:14px;justify-items:center;text-align:center;width:100%;min-width:0}.desktop-nudge-logo{width:64px;height:64px;filter:drop-shadow(0 0 24px rgba(152,70,234,.5))}.desktop-nudge-title{font-size:clamp(20px,5.5vw,24px);font-weight:700;color:var(--text);text-wrap:balance}.desktop-nudge-title-brand{background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent}.desktop-nudge-sub{font-size:13.5px;line-height:1.6;color:var(--text-2);max-width:42ch}.desktop-nudge-frame{width:100%;border-radius:var(--radius-lg);display:block;box-shadow:var(--shadow-sm)}.desktop-nudge-dismiss{margin-top:4px;padding:11px 28px;border:none;border-radius:999px;background:var(--brand-grad);color:#fff;font-family:var(--font-sans);font-size:14px;font-weight:700;cursor:pointer;transition:transform var(--transition)}.desktop-nudge-dismiss:hover{transform:scale(1.04)}.desktop-nudge-dismiss:active{transform:scale(.96)}@media(max-width:620px){.intro-modes{grid-template-columns:1fr}.shell-wordmark{--wm-h: 19px}.notation-toggle{width:auto;padding:0 8px}.app.mode-learn .lessons-stage{flex:none;height:auto;overflow:visible}.study-stage{padding:8px 12px 24px;gap:6px}.study-bar{flex-wrap:wrap;justify-content:center;gap:8px;padding:6px 0}.study-bar-sep,.modes-hint{display:none}.modes-strip{padding:10px 12px;gap:6px}.note-legend{padding:2px 0}.modes-row,.chord-grid-main,.chord-tier-bar,.position-bar{overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;-webkit-overflow-scrolling:touch;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,transparent 0,black 14px,black calc(100% - 22px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,black 14px,black calc(100% - 22px),transparent 100%)}.modes-row::-webkit-scrollbar,.chord-grid-main::-webkit-scrollbar,.position-bar::-webkit-scrollbar{display:none}.chord-grid-main{display:flex;gap:6px}.chord-grid-main .chord-btn{flex:0 0 auto;min-width:104px}.modes-head{flex-direction:column;align-items:flex-start;gap:2px}.study-head{flex-direction:column;gap:2px;text-align:center}.theory-context{font-size:14px}.fretboard-svg{max-height:46vh}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}@media(max-width:720px){.intro-how{grid-template-columns:1fr;gap:8px;margin-top:2px}.intro-step{border-left:0;border-top:1px solid var(--border);padding:8px 0 0}.intro-step:first-child{border-top:0;padding-top:0}.intro-veil{padding:16px 14px;align-items:start;overflow-x:hidden}.intro{gap:12px}.intro-how{width:100%}.intro-step{min-width:0}.intro-step-d,.intro-step-t{min-width:0;overflow-wrap:break-word}.intro-logo{width:min(170px,46vw)}.intro-title{font-size:clamp(26px,8vw,38px);line-height:1.1}.intro-sub{font-size:13px;line-height:1.5}.intro-modes{grid-template-columns:1fr;gap:8px;width:100%}.intro-mode{padding:12px 14px}.intro-mode-desc{font-size:12px}}@media(max-width:620px){.shell-header{position:static;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;align-items:center;gap:6px 10px;padding:8px 10px}.intro-veil.in-stage{top:0}.shell-brand{grid-column:1;grid-row:1;width:auto;gap:6px}.shell-logo{width:28px;height:28px;margin:0}.shell-wordmark{--wm-h: 15px}.shell-actions{grid-column:3;grid-row:1;justify-content:flex-end;gap:4px}.mode-switch{grid-column:1 / -1;grid-row:2;justify-self:center;padding:2px;gap:2px}.mode-btn{padding:6px 15px;font-size:12.5px;gap:5px}.icon-btn{width:30px;height:30px;font-size:13px}.lang-select{height:30px;font-size:11px;padding:0 20px 0 8px}.notation-toggle{width:auto;padding:0 6px;font-size:10px}.fretboard-viewport{overflow-x:auto;-webkit-overflow-scrolling:touch}.fretboard-svg{min-width:700px;max-height:none}.flow-neck .fretboard-svg{min-width:0;max-height:min(44vh,400px)}.app.mode-learn{height:auto;min-height:100dvh;overflow:visible}.flow-stage{display:flex;flex-direction:column;height:auto;overflow:visible}.flow-neck{height:46vh;max-height:46vh;flex-shrink:0}.walk-plain{display:block;margin-top:2px}.flow-actions,.flow-controls,.walk-nav{flex-wrap:wrap;justify-content:center;gap:8px}.flow-legend{flex-wrap:wrap;gap:8px 14px;font-size:10px}.flow-hint{display:block;text-align:center;line-height:1.5}.modes-row{gap:6px}.mode-chip{flex:0 0 auto}}