:root{
 --bg:#060807;--bg2:#090d0b;--panel:#0d1310;--panel2:#111915;--panel3:#151d19;
 --ink:#f5f7f5;--muted:#aeb9b2;--green:#45d58b;--green2:#1fa968;--green3:#0e5a39;
 --gold:#d5a54a;--gold2:#f0c66a;--copper:#b77b36;--danger:#ef6a5b;--line:rgba(69,213,139,.20);--line2:rgba(213,165,74,.22);
 --shadow:0 24px 80px rgba(0,0,0,.42);--radius:22px;--container:1220px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(180deg,#050706,#080b09 52%,#050706);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.56;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;z-index:-2;background:radial-gradient(circle at 82% 4%,rgba(69,213,139,.10),transparent 28%),radial-gradient(circle at 10% 36%,rgba(213,165,74,.08),transparent 28%),linear-gradient(180deg,#050706,#080b09 55%,#050706)}
body:after{content:"";position:fixed;inset:0;z-index:-1;opacity:.13;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 80%)}
a{color:inherit}.container{width:min(calc(100% - 36px),var(--container));margin:auto}.section{padding:76px 0;scroll-margin-top:92px}.soft{background:linear-gradient(180deg,rgba(255,255,255,.015),rgba(255,255,255,.005))}.gold{color:var(--gold2)}.green{color:var(--green)}.muted,.mini{color:var(--muted)}.mini{font-size:.92rem}.kicker,.eyebrow{font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--green);font-weight:700}.eyebrow.goldish{color:var(--gold2)}
.nav{position:sticky;top:0;z-index:80;background:rgba(5,7,6,.86);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.06)}.navin{height:72px;display:flex;align-items:center;gap:22px}.brand{display:flex;flex-direction:column;text-decoration:none;min-width:230px}.brand b{font-size:.88rem;font-weight:720;letter-spacing:.03em}.brand small{font-size:.68rem;color:var(--green);margin-top:2px}.navlinks{display:flex;align-items:center;gap:18px;margin-left:auto}.navlinks a{text-decoration:none;color:#d6ddd8;font-size:.84rem}.navlinks a:hover{color:var(--green)}.nav .cta{margin-left:6px}.menubtn{display:none;background:transparent;color:var(--ink);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:9px 12px;font-weight:700}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border-radius:14px;text-decoration:none;border:1px solid rgba(255,255,255,.12);font-weight:730;letter-spacing:.02em;background:rgba(255,255,255,.03);color:var(--ink);cursor:pointer;transition:.2s ease}.btn:hover{transform:translateY(-1px);border-color:var(--green)}.btn.primary{background:linear-gradient(135deg,var(--green2),var(--green));color:#03150d;border-color:transparent}.btn.goldbtn{background:linear-gradient(135deg,var(--copper),var(--gold2));color:#1a1206;border-color:transparent}.btn.ghost{background:rgba(255,255,255,.025)}
.hero{padding:86px 0 70px}.hero-grid{display:grid;grid-template-columns:1.13fr .87fr;gap:42px;align-items:center}.display{font-size:clamp(3.1rem,7vw,6.6rem);line-height:.93;letter-spacing:-.055em;margin:14px 0 22px;font-weight:680;max-width:900px}.lead{font-size:clamp(1.02rem,1.8vw,1.25rem);color:#c9d3cc;max-width:780px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.hero-card{border:1px solid var(--line);border-radius:28px;padding:28px;background:linear-gradient(160deg,rgba(69,213,139,.08),rgba(213,165,74,.04) 55%,rgba(255,255,255,.02));box-shadow:var(--shadow)}
.logic{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:20px 0}.logic div{padding:15px 10px;border:1px solid rgba(255,255,255,.08);border-radius:16px;text-align:center;background:rgba(0,0,0,.18)}.logic b{display:block;font-size:2rem;color:var(--gold2);line-height:1}.logic span{font-size:.72rem;color:var(--muted)}
.tone-picker{margin-top:28px;padding:20px;border:1px solid var(--line2);border-radius:22px;background:rgba(0,0,0,.20)}.tone-search{width:100%;border:1px solid rgba(255,255,255,.10);background:#080c0a;color:var(--ink);padding:13px 14px;border-radius:13px;font:inherit;outline:none}.tone-search:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(69,213,139,.08)}.tones{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px}.tone{padding:14px 10px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,#101612,#0a0f0c);text-decoration:none;text-align:center;font-size:1.3rem;font-weight:720;transition:.2s}.tone small{display:block;font-size:.7rem;font-weight:550;color:var(--muted);margin-top:3px}.tone:hover,.tone.active{border-color:var(--green);box-shadow:0 0 0 2px rgba(69,213,139,.06),0 12px 36px rgba(0,0,0,.25);transform:translateY(-2px)}
.h2{font-size:clamp(2rem,4.5vw,4.15rem);line-height:1.02;letter-spacing:-.035em;margin:10px 0 18px;font-weight:660}.h3{font-size:clamp(1.28rem,2.2vw,1.8rem);line-height:1.15;margin:8px 0 12px;font-weight:650}.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:28px}.section-head p{max-width:680px;margin:0}
.quick-definition{border-left:3px solid var(--gold);padding:16px 18px;background:linear-gradient(90deg,rgba(213,165,74,.08),transparent);border-radius:0 16px 16px 0;margin-top:24px;color:#e9eee9}
.field-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:22px}.degree-card{position:relative;border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:16px 12px;background:linear-gradient(180deg,#111713,#0b100d);min-width:0}.degree-card .degree{font-size:.72rem;color:var(--gold2);font-weight:750}.degree-card .chord{font-size:clamp(1.35rem,2.3vw,2rem);font-weight:720;margin:4px 0}.degree-card .note{font-size:.83rem;color:#d3ddd6}.degree-card .quality{display:inline-flex;margin-top:10px;border-radius:999px;padding:4px 8px;font-size:.68rem;border:1px solid rgba(255,255,255,.10);color:var(--muted)}.degree-card.focus{border-color:rgba(69,213,139,.45);background:linear-gradient(180deg,rgba(69,213,139,.10),#0b100d)}
.table-wrap{overflow:auto;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:#090d0b}table{width:100%;border-collapse:collapse;min-width:760px}th,td{padding:13px 14px;border-bottom:1px solid rgba(255,255,255,.07);text-align:left}th{font-size:.72rem;text-transform:uppercase;letter-spacing:.10em;color:var(--gold2);font-weight:700}td strong{font-size:1.04rem}tbody tr:hover{background:rgba(69,213,139,.035)}
.chord-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.chord-card{border:1px solid rgba(255,255,255,.09);border-radius:22px;background:linear-gradient(180deg,#111713,#0a0f0c);padding:16px;box-shadow:0 18px 44px rgba(0,0,0,.18)}.chord-top{display:flex;justify-content:space-between;gap:10px;align-items:start}.chord-top h3{margin:0;font-size:1.2rem;font-weight:690}.tag{font-size:.67rem;padding:5px 8px;border:1px solid var(--line2);border-radius:999px;color:var(--gold2);white-space:nowrap}.chord-diagram{display:flex;justify-content:center;margin:7px 0 0}.chord-svg{width:100%;max-width:190px;height:auto}.svg-title{fill:#f8faf8;font-size:17px;font-weight:700}.svg-fret,.svg-help{fill:#91a097;font-size:9px}.svg-mark{fill:#d7e0da;font-size:15px}.svg-grid{stroke:rgba(235,242,237,.55)}.svg-dot{fill:var(--green);stroke:#082b1b;stroke-width:2}.variation{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:8px;margin-top:8px}.variation button{width:40px;height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.10);background:#090d0b;color:#fff;font-size:1.25rem;cursor:pointer}.variation button:hover{border-color:var(--green);color:var(--green)}.var-text{text-align:center;min-width:0}.var-text b{display:block;font-size:.78rem}.var-text small{display:block;font-size:.65rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chord-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.chord-meta div{padding:8px;border-radius:12px;background:rgba(255,255,255,.025);font-size:.7rem;color:var(--muted)}.chord-meta b{display:block;color:#eaf0ec;font-size:.78rem}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.seg{display:flex;gap:6px;padding:5px;background:#080c0a;border:1px solid rgba(255,255,255,.08);border-radius:14px}.seg button{border:0;background:transparent;color:var(--muted);padding:9px 12px;border-radius:10px;font:inherit;font-size:.8rem;cursor:pointer}.seg button.active{background:rgba(69,213,139,.14);color:var(--green)}
.fret-wrap{overflow-x:auto;padding-bottom:10px}.fretboard{min-width:560px;border:1px solid rgba(255,255,255,.09);border-radius:20px;background:linear-gradient(180deg,#23160f,#120d09);padding:18px;box-shadow:inset 0 0 60px rgba(0,0,0,.35)}.fret-row{display:grid;grid-template-columns:64px repeat(13,minmax(42px,1fr));align-items:center;position:relative}.fret-row.quick{grid-template-columns:64px repeat(6,minmax(42px,1fr))}.fret-row+.fret-row{border-top:1px solid rgba(235,215,187,.35)}.string-name{color:#e7d9c3;font-size:.72rem;font-weight:650}.fret-cell{min-height:48px;border-left:1px solid rgba(235,215,187,.28);display:flex;align-items:center;justify-content:center;position:relative}.fret-cell .dot{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#0d1611;border:1px solid var(--green);color:#fff;font-size:.69rem;font-weight:700}.fret-cell .dot.tonic{background:var(--green);color:#06170f}.fret-head{display:grid;grid-template-columns:64px repeat(13,minmax(42px,1fr));font-size:.63rem;color:var(--muted);margin-bottom:5px}.fret-head.quick{grid-template-columns:64px repeat(6,minmax(42px,1fr))}.fret-head span{text-align:center}.legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px;font-size:.74rem;color:var(--muted)}.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--green);margin-right:5px}
.progressions{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.prog{border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:18px;background:linear-gradient(180deg,#101612,#0a0f0c)}.prog .feeling{color:var(--gold2);font-weight:700;font-size:.83rem}.prog .roman{font-size:1.25rem;font-weight:720;margin:5px 0}.prog .chords{color:var(--green);font-size:1.1rem;font-weight:700}.prog p{font-size:.83rem;color:var(--muted);margin-bottom:0}
.function-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.function-card{padding:20px;border-radius:20px;border:1px solid rgba(255,255,255,.08);background:#0b110d}.function-card h3{font-weight:670;margin:0 0 5px}.function-card:nth-child(1){border-color:rgba(69,213,139,.28)}.function-card:nth-child(2){border-color:rgba(213,165,74,.32)}.function-card:nth-child(3){border-color:rgba(239,106,91,.35)}
.quickbox{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;padding:24px;border:1px solid var(--line2);border-radius:22px;background:linear-gradient(135deg,rgba(213,165,74,.07),rgba(69,213,139,.05))}.quick-actions{display:flex;gap:8px;flex-wrap:wrap}.copy-status{font-size:.75rem;color:var(--green);min-height:1.2em;margin-top:6px}
.faq details{border-bottom:1px solid rgba(255,255,255,.07);padding:14px 0}.faq summary{font-weight:680;cursor:pointer}.faq p{color:var(--muted)}
.school{border:1px solid rgba(69,213,139,.25);border-radius:28px;padding:30px;background:linear-gradient(145deg,rgba(69,213,139,.08),rgba(213,165,74,.05) 62%,rgba(255,255,255,.015));display:grid;grid-template-columns:1fr auto;align-items:center;gap:26px}.school h2{margin:4px 0 10px;font-size:clamp(1.7rem,3.3vw,3rem);font-weight:660}.school p{margin:0;color:var(--muted);max-width:780px}
footer{border-top:1px solid rgba(255,255,255,.06);padding:30px 0;background:#040605}.foot{display:flex;align-items:center;justify-content:space-between;gap:20px}.foot b{font-weight:670}.foot small{color:var(--muted)}
.breadcrumb{font-size:.76rem;color:var(--muted);margin-bottom:14px}.breadcrumb a{text-decoration:none;color:var(--green)}.tone-hero{padding:58px 0 34px}.tone-hero .display{font-size:clamp(2.7rem,6vw,5.6rem);margin-bottom:14px}.tone-switch{display:flex;gap:8px;overflow:auto;padding:8px 0 4px;scrollbar-width:thin}.tone-switch a{flex:0 0 auto;text-decoration:none;border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:9px 12px;font-weight:690;font-size:.78rem}.tone-switch a[aria-current="page"]{border-color:var(--green);background:rgba(69,213,139,.12);color:var(--green)}
.warning{padding:14px 16px;border-left:3px solid var(--gold);background:rgba(213,165,74,.06);border-radius:0 14px 14px 0;color:#d9e0db;font-size:.84rem}
@media(max-width:1050px){.navlinks{display:none}.menubtn{display:block;margin-left:auto}.nav .cta{display:none}.navlinks.open{display:flex;position:absolute;top:72px;left:18px;right:18px;flex-direction:column;align-items:stretch;background:#08100b;border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:12px;box-shadow:var(--shadow)}.navlinks.open a{padding:10px}.hero-grid{grid-template-columns:1fr}.chord-grid{grid-template-columns:repeat(3,1fr)}.field-strip{grid-template-columns:repeat(4,1fr)}.tones{grid-template-columns:repeat(5,1fr)}}
@media(max-width:760px){.container{width:min(calc(100% - 24px),var(--container))}.section{padding:58px 0}.navin{height:64px}.brand{min-width:0}.brand b{font-size:.76rem}.brand small{font-size:.59rem}.navlinks.open{top:64px}.hero{padding:58px 0}.display{font-size:clamp(2.8rem,15vw,4.8rem)}.h2{font-size:clamp(2rem,10vw,3.25rem)}.tones{grid-template-columns:repeat(3,1fr)}.logic{grid-template-columns:repeat(2,1fr)}.field-strip{grid-template-columns:repeat(2,1fr)}.chord-grid{grid-template-columns:repeat(2,1fr);gap:10px}.chord-card{padding:12px}.chord-top{align-items:center}.tag{font-size:.58rem}.chord-meta{grid-template-columns:1fr}.progressions{grid-template-columns:1fr}.function-grid{grid-template-columns:1fr}.quickbox,.school{grid-template-columns:1fr}.section-head{align-items:start;flex-direction:column}.foot{flex-direction:column;align-items:flex-start}.fretboard{min-width:340px;padding:10px}.fret-row.quick{grid-template-columns:48px repeat(6,minmax(40px,1fr))}.fret-head.quick{grid-template-columns:48px repeat(6,minmax(40px,1fr))}.fret-cell{min-height:44px}.fret-cell .dot{width:29px;height:29px;font-size:.62rem}.tone-hero{padding:42px 0 22px}.variation{grid-template-columns:38px 1fr 38px}.variation button{width:38px;height:38px}.quick-actions .btn{width:100%}}
@media(max-width:430px){.chord-grid{grid-template-columns:1fr}.tone{padding:12px 8px}.tone small{font-size:.63rem}.field-strip{grid-template-columns:1fr 1fr}.degree-card{padding:13px 10px}.display{letter-spacing:-.04em}.chord-svg{max-width:210px}.toolbar{gap:6px}.seg{width:100%;overflow:auto}.seg button{flex:1 0 auto}.school{padding:22px}.hero-card{padding:20px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media print{.nav,.hero-actions,.tone-switch,.toolbar,.variation button,.school,.quick-actions,.menubtn{display:none!important}body{background:#fff;color:#111}.section,.tone-hero{padding:22px 0}.container{width:100%}.chord-card,.degree-card,.prog,.function-card,.table-wrap,.quickbox{box-shadow:none;background:#fff;color:#111;border-color:#bbb;break-inside:avoid}.muted,.mini,.lead,.warning{color:#333}.svg-title,.svg-mark{fill:#111}.svg-grid{stroke:#555}.svg-dot{fill:#198a58}.field-strip{grid-template-columns:repeat(7,1fr)}footer{background:#fff;color:#111}.fretboard{background:#fff}.fret-cell .dot{color:#111}}