:root{--bg: #0f1117;--bg-elev: #171a23;--bg-card: #1b1f2a;--border: #2a2f3d;--text: #e7e9ee;--text-dim: #9aa1b1;--muted: #6b7283;--accent: #f0a73c;--accent-2: #a78bfa;--accent-soft: rgba(240, 167, 60, .14);--good: #34d399;--char: #2dd4bf;--char-soft: rgba(45, 212, 191, .16);--parent: #f472b6;--parent-soft: rgba(244, 114, 182, .16);--radius: 16px;--shadow: 0 10px 40px rgba(0, 0, 0, .35);font-synthesis:none}*{box-sizing:border-box;margin:0}html,body,#root{height:100%}body{background:radial-gradient(1200px 700px at 80% -10%,rgba(167,139,250,.1),transparent 60%),radial-gradient(1000px 600px at -10% 10%,rgba(240,167,60,.08),transparent 55%),var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden}.tagline{color:var(--text-dim);margin-top:4px;font-size:15px}.layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start;flex:1}.main-col,.mid-col,.side-col{display:flex;flex-direction:column;gap:18px;min-width:0}.side-col{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap}.side-col>*{flex:1 1 240px;min-width:0}@media(min-width:1600px){.layout{grid-template-columns:minmax(0,3fr) minmax(0,3fr) minmax(260px,2fr)}.side-col{grid-column:auto;flex-direction:column;flex-wrap:nowrap}.side-col>*{flex:initial}}@media(max-width:680px){.layout{grid-template-columns:minmax(0,1fr)}.side-col{grid-column:auto;flex-direction:column;flex-wrap:nowrap}.side-col>*{flex:initial}}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.card-head h3{font-size:14px;text-transform:uppercase;letter-spacing:.12em;color:var(--text-dim);font-weight:700}.sub{color:var(--text-dim);font-size:14px}.muted{color:var(--muted)}.controls{display:flex;gap:10px}.btn{flex:1;padding:12px 16px;border-radius:10px;border:1px solid var(--border);background:var(--bg-elev);color:var(--text);font-weight:700;font-size:15px;cursor:pointer;transition:background .12s ease,border-color .12s ease,transform .1s ease}.btn:hover{border-color:var(--accent-2)}.btn:active{transform:scale(.98)}.btn.primary{background:var(--accent);color:#1a1205;border-color:transparent}.btn.primary:hover{filter:brightness(1.05)}.btn.ghost{background:transparent}.btn.small{flex:none;padding:6px 12px;font-size:13px}.app-footer{margin-top:32px;text-align:center;color:var(--muted);font-size:13px}.reveal{animation:reveal .45s cubic-bezier(.2,.8,.2,1)}@keyframes reveal{0%{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}@media(max-width:680px){.session-card{padding:20px}.card{padding:18px}.session-title{font-size:clamp(30px,9vw,44px)}.fret-grid{min-width:380px}.dot{width:22px;height:22px;font-size:9px}.fret-string{height:30px}.kbd{height:100px}.vamp-controls,.vamp-drums{gap:8px}}.shell{display:flex;flex-direction:column;min-height:100%}.content{flex:1;min-width:0;display:flex;flex-direction:column}.page{max-width:1400px;width:100%;margin:0 auto;padding:clamp(20px,4vw,48px);flex:1}.page-header{margin-bottom:28px}.page-header h1{font-size:clamp(28px,5vw,40px);font-weight:800;letter-spacing:-.03em}@media(min-width:1600px){.page{max-width:1660px}}@media(max-width:680px){.page{padding:16px}}.app-splash{min-height:100vh;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--text-dim)}.focus-label{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--accent);font-weight:700}.focus-text{margin-top:4px;font-size:15px}.select-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:18px}.learn-grid{display:grid;gap:22px;align-items:start;flex:1;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"session instrument" "session about"}.learn-grid>section{display:flex;flex-direction:column;gap:18px;min-width:0}.learn-col-session{grid-area:session}.learn-col-instrument{grid-area:instrument}.learn-col-about{grid-area:about}@media(min-width:1200px){.learn-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(260px,1fr);grid-template-areas:"session instrument about"}}@media(max-width:680px){.learn-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"session" "instrument" "about"}}.topbar{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(10px,2vw,24px);padding:12px clamp(16px,4vw,48px);border-bottom:1px solid var(--border);background:#0f1117d1;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.topbar .brand{justify-self:start;font-size:22px;font-weight:800;letter-spacing:-.03em}.topbar .brand .accent{color:var(--accent)}.topbar .nav{justify-self:center;list-style:none;margin:0;padding:0;display:flex;gap:6px;max-width:100%;overflow-x:auto;scrollbar-width:none}.topbar .nav::-webkit-scrollbar{display:none}.nav-link{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;color:var(--text-dim);text-decoration:none;font-weight:600;font-size:14px;white-space:nowrap;transition:background .15s ease,color .15s ease}.nav-link:hover{background:var(--bg-elev);color:var(--text)}.nav-link.active{background:var(--accent-soft);color:var(--accent)}.nav-glyph{font-size:17px}@media(max-width:900px){.nav-label{display:none}.nav-link{padding:8px 12px}.nav-glyph{font-size:19px}}@media(max-width:520px){.topbar{gap:8px;padding:10px 14px}.topbar .brand{font-size:19px}.nav-link{padding:7px 9px}}.account-menu{position:relative}.avatar{width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:var(--accent-soft);color:var(--accent);font-weight:800;font-size:14px;cursor:pointer;transition:transform .12s ease,border-color .12s ease}.avatar:hover{transform:translateY(-1px);border-color:var(--accent)}.account-dropdown{position:absolute;top:calc(100% + 10px);right:0;width:248px;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:8px;display:flex;flex-direction:column;gap:2px;z-index:30}.account-dropdown-head{display:flex;flex-direction:column;gap:2px;padding:8px 10px 10px;border-bottom:1px solid var(--border);margin-bottom:4px}.account-name{font-weight:800;font-size:15px}.account-email{font-size:12px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-item{text-align:left;background:none;border:none;color:var(--text);font-size:14px;font-weight:600;padding:9px 10px;border-radius:8px;cursor:pointer;transition:background .12s ease}.account-item:hover{background:var(--bg-elev)}.account-item.danger{color:#e05c6c}.account-section{padding:8px 10px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:4px 0}.account-section-label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--text-dim);margin-bottom:8px}.lang-switch{justify-self:end;display:inline-flex;border:1px solid var(--border);border-radius:999px;overflow:hidden;background:var(--bg-card)}.lang-switch button{border:none;background:transparent;color:var(--text-dim);font-size:12px;font-weight:700;padding:6px 12px;cursor:pointer}.lang-switch button.on{background:var(--accent);color:#1a1205}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#00000080;display:flex;align-items:center;justify-content:center;padding:24px}.modal{width:100%;max-width:420px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:16px}.modal-head{display:flex;align-items:center;justify-content:space-between}.modal-head h2{font-size:20px;font-weight:800}.modal-close{background:var(--bg-elev);border:1px solid var(--border);color:var(--text-dim);width:32px;height:32px;border-radius:999px;cursor:pointer}.modal-close:hover{color:var(--text);border-color:var(--accent)}.modal-field{display:flex;flex-direction:column;gap:6px}.modal-field>span{font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--text-dim)}.modal-field input{background:var(--bg-elev);border:1px solid var(--border);border-radius:9px;padding:11px 12px;font-size:15px;color:var(--text);width:100%}.modal-field input:focus{outline:none;border-color:var(--accent)}.modal-field input:disabled{opacity:.6}.modal-row{display:flex;gap:8px}.modal-row input{flex:1}.modal-btn{background:var(--accent);color:#1a1205;border:none;border-radius:9px;padding:0 16px;font-size:14px;font-weight:800;cursor:pointer;white-space:nowrap}.modal-btn:disabled{opacity:.5;cursor:not-allowed}.modal-error{font-size:13px;color:#e05c6c}.modal-notice{font-size:13px;color:#40c084}.auth-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}.auth-card{width:100%;max-width:380px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:32px 28px;display:flex;flex-direction:column;gap:14px}.auth-brand{font-size:28px;font-weight:800;letter-spacing:-.02em}.auth-brand .accent{color:var(--accent)}.auth-tagline{font-size:14px;color:var(--text-dim);margin-bottom:4px}.auth-tabs{display:flex;gap:6px;background:var(--bg-elev);border:1px solid var(--border);border-radius:10px;padding:4px}.auth-tabs button{flex:1;background:none;border:none;color:var(--text-dim);font-weight:700;font-size:14px;padding:8px;border-radius:7px;cursor:pointer;transition:background .15s ease,color .15s ease}.auth-tabs button.on{background:var(--accent);color:#1a1205}.auth-form{display:flex;flex-direction:column;gap:14px}.auth-title{font-size:20px;font-weight:800}.auth-field{display:flex;flex-direction:column;gap:6px}.auth-field span{font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--text-dim)}.auth-field input{background:var(--bg-elev);border:1px solid var(--border);border-radius:9px;padding:11px 12px;font-size:15px;color:var(--text)}.auth-field input:focus{outline:none;border-color:var(--accent)}.auth-submit{margin-top:4px;background:linear-gradient(135deg,var(--accent),#f6c062);color:#1a1205;border:none;border-radius:10px;padding:13px;font-size:15px;font-weight:800;cursor:pointer;transition:transform .12s ease}.auth-submit:hover:not(:disabled){transform:translateY(-2px)}.auth-submit:disabled{opacity:.6;cursor:not-allowed}.auth-link{background:none;border:none;color:var(--text-dim);font-size:13px;cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px;align-self:flex-start}.auth-link:hover{color:var(--text)}.auth-error{font-size:13px;color:#e05c6c}.auth-notice{font-size:13px;color:#40c084}.instrument{margin-top:26px;padding-top:22px;border-top:1px solid var(--border)}.instrument h3{font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--text-dim);font-weight:700;margin-bottom:14px}.diagram-label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);font-weight:700;margin:14px 0 8px}.fret{overflow-x:auto;padding-bottom:4px}.fret-grid{--nut-w: 6px;min-width:460px}.fret-string{display:flex;align-items:stretch;height:34px}.string-label{width:30px;flex:none;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted);font-weight:700}.fret-cell{flex:1;border-right:1px solid var(--border);border-top:1px solid rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;position:relative}.fret-cell.nut{flex:0 0 var(--nut-w);border-right:3px solid var(--text-dim)}.dot{width:26px;height:26px;border-radius:50%;border:none;background:var(--accent-2);color:#1a1228;font-size:10px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .1s ease}.dot:hover{transform:scale(1.12)}.dot.hl{box-shadow:0 0 0 2px #ffffff2e}.fret-numbers{display:flex;height:18px;margin-top:2px}.fret-num{flex:1;text-align:center;font-size:10px;color:var(--muted)}.fret-num:first-of-type{flex:0 0 var(--nut-w)}.kbd{position:relative;height:120px;-webkit-user-select:none;user-select:none}.kbd-whites{display:flex;height:100%}.white{flex:1;background:#f4f5f7;border:1px solid #2a2f3d;border-radius:0 0 5px 5px;margin:0 1px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;cursor:pointer}.white.in{background:#d8c9f5}.black{position:absolute;top:0;width:4.4%;height:62%;transform:translate(-50%);background:#14171f;border:1px solid #000;border-radius:0 0 4px 4px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px;cursor:pointer;z-index:2}.black.in{background:#7a5cc4}.kbd-name{font-size:9px;font-weight:800;color:#1a1228}.black .kbd-name{color:#fff}.black.hl .kbd-name{color:#10131a}.instrument-legend{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--text-dim);margin-bottom:14px}.legend-dot{width:11px;height:11px;border-radius:50%;display:inline-block;margin-right:4px;vertical-align:-1px}.legend-dot.tonic{background:var(--accent)}.legend-dot.char{background:var(--char)}.legend-dot.parent{background:var(--parent)}.legend-dot.scale{background:var(--accent-2)}.key-selector{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:18px}.key-selector-label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:var(--text-dim)}.key-selector-buttons{display:flex;flex-wrap:wrap;gap:6px}.key-selector-buttons button{min-width:38px;background:var(--bg-elev);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:6px 10px;font-size:13px;font-weight:700;cursor:pointer;font-variant-numeric:tabular-nums;transition:border-color .15s ease,background .15s ease,color .15s ease}.key-selector-buttons button:hover{border-color:var(--accent)}.key-selector-buttons button.on{background:var(--accent);color:#1a1205;border-color:transparent}.about-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.about-head h3{font-size:18px;font-weight:800;letter-spacing:-.01em}.about-tag{font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--accent-2);background:#a78bfa1f;padding:3px 10px;border-radius:999px;white-space:nowrap}.about-aka{color:var(--text-dim);font-size:14px;margin:4px 0 16px}.about-facts{display:flex;flex-direction:column;gap:14px;margin:0}.about-facts dt{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);font-weight:700;margin-bottom:3px}.about-facts dd{margin:0;font-size:15px;line-height:1.55}.about-tips,.about-refs{margin-top:18px}.about-tips ul{margin:8px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:14.5px}.about-tips li::marker{color:var(--accent-2)}.about-refs ul{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}.about-refs a{color:var(--accent-2);text-decoration:none;font-size:14.5px;font-weight:600}.about-refs a:hover{text-decoration:underline}.char-chips{display:inline-flex;flex-wrap:wrap;gap:6px;margin-right:8px;vertical-align:middle}.char-chip{display:inline-flex;align-items:center;gap:6px;background:var(--char-soft);border:1px solid var(--char);border-radius:999px;padding:2px 4px 2px 10px;font-size:12px}.char-fn{color:var(--char);font-weight:700}.char-note{background:var(--char);color:#08221e;font-weight:800;border-radius:999px;padding:2px 9px;font-variant-numeric:tabular-nums}.hint{font-size:11px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--muted);margin-left:8px}.scale-tools{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 22px}.tool-btn{background:var(--bg-elev);border:1px solid var(--border);color:var(--text);border-radius:999px;padding:8px 16px;font-size:14px;font-weight:600;cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease}.tool-btn:hover{border-color:var(--accent)}.tool-btn.active{background:var(--accent);color:#1a1205;border-color:transparent}.chord{font-family:inherit;color:var(--text);cursor:pointer}.chord:active{transform:scale(.97)}.octave-switch{display:inline-flex;align-items:center;gap:8px;background:var(--bg-elev);border:1px solid var(--border);border-radius:999px;padding:4px 10px}.octave-label{font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--text-dim)}.octave-btn{width:24px;height:24px;border-radius:50%;border:1px solid var(--border);background:var(--bg-card);color:var(--text);font-size:15px;font-weight:800;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}.octave-btn:hover{border-color:var(--accent)}.octave-value{min-width:46px;text-align:center;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}.session-notes{margin-top:22px;padding-top:20px;border-top:1px solid var(--border)}.notes-input{width:100%;margin-top:8px;background:var(--bg-elev);border:1px solid var(--border);border-radius:10px;color:var(--text);padding:10px 12px;font-family:inherit;font-size:14px;resize:vertical}.notes-input:focus{outline:none;border-color:var(--accent-2)}.band{margin-top:16px;padding:14px;background:var(--bg-elev);border:1px solid var(--border);border-radius:12px}.band-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.band-label{display:block;font-size:17px;font-weight:800;letter-spacing:-.01em;margin-top:3px}.band-cells{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.band-cell{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:6px 12px;font-weight:700;font-size:15px;transition:all .08s ease}.band-cell.on{background:var(--accent);color:#1a1205;border-color:transparent;transform:translateY(-2px);box-shadow:0 4px 14px #f0a73c66}.band-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.band-tempo{display:flex;align-items:center;gap:10px}.band-bpm{font-size:13px;font-weight:700;color:var(--text)}.band-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}.bridges-card{margin-bottom:18px}.bridges-caption,.bridges-none{font-size:14px;color:var(--text-dim);margin-bottom:12px}.bridges-chords{display:flex;flex-wrap:wrap;gap:8px}.bridge-chip{background:var(--bg-elev);border:1px solid var(--border);color:var(--text);border-radius:10px;padding:10px 16px;font-size:16px;font-weight:800;cursor:pointer;transition:border-color .15s ease,transform .1s ease}.bridge-chip:hover{border-color:var(--accent-2);transform:translateY(-2px)}.bridges-approaches{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}.bridge-approach{display:flex;flex-direction:column;gap:4px;text-align:left;background:var(--bg-elev);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:10px;padding:12px 14px;cursor:pointer;color:var(--text);transition:border-color .15s ease,transform .1s ease}.bridge-approach:hover{border-color:var(--accent);transform:translateY(-2px)}.bridge-type{font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--text-dim)}.bridge-symbol{font-size:17px;font-weight:800}.bridges-sub+.bridges-sub{margin-top:14px}.bridges-sub .focus-label{display:block;margin-bottom:8px}.circle-card{display:flex;justify-content:center;padding:28px}.res-desc{font-size:15px;color:var(--text-dim);margin-bottom:16px;max-width:720px}.res-desc strong{color:var(--text)}.cycle-switch{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}.cof{width:100%;max-width:620px;height:auto;display:block;margin:0 auto}.cof-node-bg{fill:var(--bg-elev);stroke:var(--border);stroke-width:1.5;transition:fill .15s ease,stroke .15s ease}.cof-node.clickable{cursor:pointer}.cof-node.clickable:hover .cof-node-bg,.cof-node.hot .cof-node-bg{fill:var(--accent-soft);stroke:var(--accent)}.cof-major{fill:var(--accent);font-size:19px;font-weight:800;text-anchor:middle;dominant-baseline:middle;pointer-events:none}.cof-minor{fill:var(--text-dim);font-size:11px;font-weight:700;text-anchor:middle;dominant-baseline:middle}.cof-center{fill:var(--text-dim);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;text-anchor:middle;dominant-baseline:middle}.cof-ring-arrow{stroke:var(--border);stroke-width:1.5}.cof-arrowhead-base{fill:var(--border)}.cof-sat circle{fill:var(--bg-card);stroke:var(--accent-2);stroke-width:1.5}.cof-sat text{fill:var(--text);font-size:13px;font-weight:700;text-anchor:middle;dominant-baseline:middle;pointer-events:none}.cof-res-arrow{stroke:var(--accent-2);stroke-width:2}.cof-arrowhead{fill:var(--accent-2)}.cof-ray{cursor:pointer}.cof-ray.dim{opacity:.16}.cof-ray.hot .cof-res-arrow{stroke:var(--accent);stroke-width:3}.cof-ray.hot .cof-arrowhead{fill:var(--accent)}.cof-ray.hot .cof-sat circle{stroke:var(--accent)}.res-cloud{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:18px}.res-group{display:flex;flex-direction:column;gap:8px}.res-group-label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:var(--text-dim)}.res-buttons{display:flex;flex-wrap:wrap;gap:8px}.res-btn{background:var(--bg-elev);border:1px solid var(--border);color:var(--text);border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease}.res-btn:hover{border-color:var(--accent-2)}.res-btn.active{background:var(--accent);color:#1a1205;border-color:transparent}.connections-card{margin-bottom:18px}.connections-mode{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:18px}.connections-legend{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--text-dim);margin-bottom:12px}.connections-legend .legend-dot{width:11px;height:11px;border-radius:50%;display:inline-block;margin-right:4px;vertical-align:-1px}.connections-legend .legend-dot.tonic{background:var(--accent)}.connections-legend .legend-dot.maj{background:var(--accent-2)}.connections-legend .legend-dot.min{background:var(--char)}.connections-caption{font-size:14px;color:var(--text-dim);margin-top:12px;min-height:1.4em}.fn-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}.fn-group{border:1px solid var(--border);border-radius:12px;padding:14px;border-top:3px solid var(--border)}.fn-group.tonic{border-top-color:var(--accent)}.fn-group.subdominant{border-top-color:var(--char)}.fn-group.dominant{border-top-color:var(--accent-2)}.fn-label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:var(--text-dim)}.fn-chords{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.fn-chord{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--bg-elev);border:1px solid var(--border);border-radius:10px;padding:8px 12px;cursor:pointer;color:var(--text);transition:border-color .15s ease,transform .1s ease}.fn-chord:hover{border-color:var(--accent-2);transform:translateY(-2px)}.fn-degree{font-size:11px;font-weight:700;color:var(--accent-2)}.fn-symbol{font-size:15px;font-weight:800}.orbit{width:100%;max-width:540px;height:auto;display:block;margin:0 auto}.orbit-ring{fill:none;stroke:var(--border);stroke-width:1.5}.orbit-node{cursor:pointer}.orbit-node circle{stroke:var(--border);stroke-width:1.5;transition:transform .1s ease}.orbit-node text{fill:#11121a;font-size:12px;font-weight:800;text-anchor:middle;dominant-baseline:middle;pointer-events:none}.orbit-node.maj circle{fill:var(--accent-2)}.orbit-node.min circle{fill:var(--char)}.orbit-node.dim circle{fill:var(--text-dim)}.orbit-node.tonic circle{fill:var(--accent)}.orbit-node.hot circle{stroke:var(--text);stroke-width:2.5}.orbit-node.faded{opacity:.22}.loop-card{display:flex;flex-direction:column;gap:16px}.loop-pickers{display:flex;flex-wrap:wrap;gap:24px}.loop-glue{font-size:15px;color:var(--text-dim);border-left:3px solid var(--char);background:var(--char-soft);border-radius:8px;padding:10px 14px}.loop-bars{display:flex;gap:10px}.loop-bar{flex:1;text-align:center;background:var(--bg-elev);border:1px solid var(--border);border-radius:10px;padding:14px;font-size:20px;font-weight:800;transition:all .08s ease}.loop-bar.on{background:var(--accent);color:#1a1205;border-color:transparent;transform:translateY(-2px);box-shadow:0 4px 14px #f0a73c66}.loop-controls{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.loop-controls .btn{flex:0 0 auto;min-width:120px}.loop-tempo{display:flex;align-items:center;gap:8px}.loop-tempo button{background:var(--bg-elev);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:6px 10px;font-weight:700;font-size:13px;cursor:pointer}.loop-tempo button:hover{border-color:var(--accent)}.loop-bpm{min-width:40px;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}.loop-band-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.loop-scales{margin-top:6px;padding-top:16px;border-top:1px solid var(--border)}.loop-scales-controls{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:14px}.loop-scale-caption{font-size:14px;color:var(--text-dim);margin-top:12px}.chord-picker{flex:1 1 280px;min-width:0}.chord-picker-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.chord-picker-symbol{background:var(--accent-soft);border:1px solid var(--accent);color:var(--accent);border-radius:10px;padding:4px 14px;font-size:18px;font-weight:800;cursor:pointer}.chord-picker-sublabel{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--muted);margin:8px 0 6px}.chord-picker-row{display:flex;flex-wrap:wrap;gap:6px}.chord-picker-row button{min-width:36px;background:var(--bg-elev);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:6px 9px;font-size:13px;font-weight:700;cursor:pointer;font-variant-numeric:tabular-nums;transition:border-color .15s ease,background .15s ease,color .15s ease}.chord-picker-row button:hover{border-color:var(--accent)}.chord-picker-row button.on{background:var(--accent);color:#1a1205;border-color:transparent}.session-card{padding:28px;min-height:280px}.session-card.empty{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:8px;border-style:dashed}.session-card .prompt{font-size:22px;font-weight:700}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--accent);font-weight:700}.session-title{font-size:clamp(34px,7vw,56px);font-weight:800;letter-spacing:-.03em;margin:6px 0 8px;line-height:1.05}.session-title .tonic{color:var(--text)}.session-title .mode{color:var(--accent-2)}.session-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px}.chip{background:var(--accent-soft);color:var(--accent);padding:3px 10px;border-radius:999px;font-weight:600;font-size:12px;text-transform:capitalize}.parent-major{display:inline-flex;align-items:center;gap:8px;background:#a78bfa1f;border:1px solid rgba(167,139,250,.35);border-radius:999px;padding:4px 6px 4px 12px}.parent-label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:var(--accent-2)}.parent-key{background:var(--accent-2);color:#1a1228;font-weight:800;font-size:15px;line-height:1;padding:5px 11px;border-radius:999px;font-variant-numeric:tabular-nums}.cycle-banner{background:#34d3991f;border:1px solid rgba(52,211,153,.3);color:var(--good);padding:10px 14px;border-radius:10px;font-size:14px;margin-bottom:18px}.scale-row{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}.scale-note{background:var(--bg-elev);border:1px solid var(--border);border-radius:10px;padding:8px 12px;font-weight:700;font-variant-numeric:tabular-nums;min-width:44px;text-align:center}.harmonic-field h3{font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--text-dim);margin-bottom:12px;font-weight:700}.chord-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:10px}.chord{background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;padding:12px 8px;text-align:center;display:flex;flex-direction:column;gap:4px;transition:border-color .15s ease,transform .15s ease}.chord:hover{border-color:var(--accent-2);transform:translateY(-2px)}.chord-degree{font-size:12px;color:var(--accent-2);font-weight:700}.chord-symbol{font-size:17px;font-weight:700}.focus{margin-top:22px;padding:16px;background:var(--accent-soft);border-radius:12px;border-left:3px solid var(--accent)}.vamp{margin-top:16px;padding:14px;background:var(--bg-elev);border:1px solid var(--border);border-radius:12px}.vamp-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.vamp-label{display:block;font-size:17px;font-weight:800;letter-spacing:-.01em;margin-top:3px}.vamp-chords{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.vamp-chord{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:6px 12px;font-weight:700;font-size:15px;transition:all .08s ease}.vamp-chord.on{background:var(--accent);color:#1a1205;border-color:transparent;transform:translateY(-2px);box-shadow:0 4px 14px #f0a73c66}.vamp-tempo{display:flex;align-items:center;gap:12px}.vamp-tempo input{flex:1;accent-color:var(--accent)}.vamp-bpm{font-size:13px;font-weight:700;color:var(--text-dim);min-width:56px;text-align:right}.vamp-tempo{gap:10px}.vamp-bpm{min-width:0;text-align:left;color:var(--text);font-weight:700}.vamp-sync{font-size:12px}.vamp-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.voicing-switch{display:inline-flex;border:1px solid var(--border);border-radius:999px;overflow:hidden;background:var(--bg-card)}.voicing-switch button{border:none;background:transparent;color:var(--text-dim);font-size:12px;font-weight:700;padding:6px 12px;cursor:pointer;transition:background .15s ease,color .15s ease}.voicing-switch button:hover{color:var(--text)}.voicing-switch button.on{background:var(--accent);color:#1a1205}.vamp-drums{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}.generate-btn{width:100%;padding:20px 24px;font-size:18px;font-weight:700;letter-spacing:-.01em;color:#1a1205;background:linear-gradient(135deg,var(--accent),#f6c062);border:none;border-radius:var(--radius);cursor:pointer;box-shadow:0 8px 24px #f0a73c47;transition:transform .12s ease,box-shadow .12s ease,filter .12s ease}.generate-btn:hover{transform:translateY(-2px);box-shadow:0 12px 32px #f0a73c61}.generate-btn:active{transform:translateY(0);filter:brightness(.97)}.start-session-btn{width:100%;padding:16px 24px;font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--text);background:var(--bg-elev);border:1px solid var(--accent);border-radius:var(--radius);cursor:pointer;transition:transform .12s ease,border-color .12s ease,background .12s ease}.start-session-btn:hover{transform:translateY(-2px);background:var(--bg-card)}.reroll{align-self:center;background:none;border:none;color:var(--muted);font-size:13px;cursor:pointer;padding:4px 8px;text-decoration:underline dotted;text-underline-offset:3px;transition:color .15s ease}.reroll:hover{color:var(--text-dim)}.theory-links{margin-top:22px}.theory-links .theory-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}@media(max-width:900px){.theory-links .theory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.theory-links .theory-grid{grid-template-columns:minmax(0,1fr)}}.theory-link{display:flex;flex-direction:column;align-items:flex-start;gap:6px;height:100%;background:var(--bg-elev);border:1px solid var(--border);border-top:3px solid var(--accent-2);border-radius:10px;padding:14px;text-decoration:none;color:var(--text);transition:border-color .15s ease,transform .1s ease}.theory-link:hover{border-color:var(--accent-2);transform:translateY(-2px)}.theory-glyph{font-size:22px;color:var(--accent-2);line-height:1}.theory-body{flex:1}.theory-name{display:block;font-weight:800;font-size:15px}.theory-nugget{display:block;font-size:13px;color:var(--text-dim);margin-top:4px}.theory-cta{margin-top:4px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-2)}.history-list{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:2px;max-height:280px;overflow-y:auto}.history-list li{display:flex;justify-content:space-between;padding:8px 4px;border-bottom:1px solid var(--border);font-size:14px}.history-list li:last-child{border-bottom:none}.h-session{font-weight:600}.h-date{color:var(--muted)}.beat-dot{width:14px;height:14px;border-radius:50%;background:var(--border);transition:background .05s ease,box-shadow .05s ease,transform .05s ease}.beat-dot.on{background:var(--accent);box-shadow:0 0 14px var(--accent);transform:scale(1.25)}.bpm-display{text-align:center;margin:4px 0 12px}.bpm-value{font-size:48px;font-weight:800;font-variant-numeric:tabular-nums}.bpm-label{font-size:14px;color:var(--text-dim);margin-left:8px;font-weight:600}.bpm-slider{width:100%;accent-color:var(--accent);margin-bottom:12px}.bpm-steppers{display:flex;gap:8px;margin-bottom:14px}.bpm-steppers button{flex:1;background:var(--bg-elev);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:8px;cursor:pointer;font-weight:700;font-size:13px}.bpm-steppers button:hover{border-color:var(--accent)}.streak-flame{font-size:15px;font-weight:800;color:var(--accent)}.heatmap{display:grid;grid-template-rows:repeat(7,11px);grid-auto-flow:column;grid-auto-columns:11px;gap:3px;margin:6px 0 12px}.heat-cell{width:11px;height:11px;border-radius:2px;background:var(--bg-elev)}.heat-cell.on{background:var(--accent)}.timer.alarming{animation:flash .85s ease infinite;border-color:var(--accent)}@keyframes flash{0%,to{background:var(--bg-card)}50%{background:#f0a73c38}}.time-display{font-size:56px;font-weight:800;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin:6px 0 14px}.progress{height:6px;background:var(--bg-elev);border-radius:999px;overflow:hidden;margin-bottom:16px}.progress-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .9s linear}.stepper{display:flex;align-items:center;gap:8px}.stepper-value{font-weight:700;font-size:14px;min-width:56px;text-align:center}.stepper button{background:var(--bg-elev);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:4px 9px;cursor:pointer;font-weight:700;font-size:13px}.stepper button:hover{border-color:var(--accent)}.gs-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:var(--bg);display:flex;justify-content:center;overflow-y:auto;padding:24px 18px 48px}.gs-shell{width:100%;max-width:720px;display:flex;flex-direction:column;gap:24px}.gs-top{display:flex;align-items:center;gap:16px}.gs-progress{flex:1;display:flex;flex-direction:column;gap:6px}.gs-progress-label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:var(--text-dim)}.gs-bar{height:6px;border-radius:999px;background:var(--bg-elev);overflow:hidden}.gs-bar-fill{height:100%;background:var(--accent);transition:width .25s ease}.gs-close{background:var(--bg-elev);border:1px solid var(--border);color:var(--text-dim);width:36px;height:36px;border-radius:999px;font-size:15px;cursor:pointer;transition:color .15s ease,border-color .15s ease}.gs-close:hover{color:var(--text);border-color:var(--accent)}.gs-step{display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center}.gs-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.14em;font-weight:700;color:var(--accent-2)}.gs-title{font-size:30px;font-weight:800;letter-spacing:-.02em}.gs-sub{font-size:15px;color:var(--text-dim);max-width:46ch}.gs-scale-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.gs-scale-note{background:var(--bg-elev);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-weight:800;font-size:16px}.gs-step .vamp,.gs-step .instrument{width:100%;text-align:left}.gs-play{background:var(--bg-elev);border:1px solid var(--border);color:var(--text);border-radius:10px;padding:10px 18px;font-size:15px;font-weight:700;cursor:pointer;transition:border-color .15s ease,transform .1s ease}.gs-play:hover{border-color:var(--accent);transform:translateY(-2px)}.gs-next{align-self:center;background:linear-gradient(135deg,var(--accent),#f6c062);color:#1a1205;border:none;border-radius:12px;padding:14px 32px;font-size:16px;font-weight:800;cursor:pointer;box-shadow:0 8px 24px #f0a73c47;transition:transform .12s ease,box-shadow .12s ease}.gs-next:hover{transform:translateY(-2px);box-shadow:0 12px 32px #f0a73c61}.gs-challenge{display:flex;flex-direction:column;gap:16px;align-items:center;width:100%}.gs-qcount{font-size:12px;color:var(--text-dim);font-variant-numeric:tabular-nums}.gs-prompt{font-size:22px;font-weight:800;max-width:40ch}.gs-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;max-width:460px}.gs-choice{background:var(--bg-elev);border:1px solid var(--border);color:var(--text);border-radius:12px;padding:16px;font-size:18px;font-weight:800;cursor:pointer;transition:border-color .15s ease,transform .1s ease,background .15s ease}.gs-choice:not(:disabled):hover{border-color:var(--accent);transform:translateY(-2px)}.gs-choice.right{background:#40c0842e;border-color:#40c084;color:var(--text)}.gs-choice.wrong{background:#e05c6c29;border-color:#e05c6c}.gs-choice.dim{opacity:.45}.gs-feedback{display:flex;flex-direction:column;gap:4px;max-width:46ch}.gs-verdict{font-weight:800;font-size:16px}.gs-feedback.right .gs-verdict{color:#40c084}.gs-feedback.wrong .gs-verdict{color:#e05c6c}.gs-explain{font-size:14px;color:var(--text-dim)}.gs-score{font-size:40px;font-weight:800;letter-spacing:-.02em}.gs-encourage{font-size:16px;color:var(--text)}@media(max-width:520px){.gs-choices{grid-template-columns:minmax(0,1fr)}}