.theme-toggle{width:44px;height:44px;flex-shrink:0;border:1px solid var(--line);border-radius:50%;background:#ffffff80;color:var(--text);display:grid;place-items:center;padding:10px}
.theme-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .sun{display:none}.brand img{width:42px;height:42px;flex-shrink:0}.brand{gap:10px;letter-spacing:-.6px}
html[data-theme=dark]{color-scheme:dark;--bg:#101522;--panel:#192131;--text:#e7edf8;--muted:#a9b6ce;--line:#354158;--accent:#a7b6ff;--green:#82d3b6}
html[data-theme=dark] body{background:radial-gradient(ellipse at 5% 0%,#172b43 0,transparent 48%),radial-gradient(ellipse at 95% 25%,#29223f 0,transparent 50%),#101522;background-attachment:fixed}
html[data-theme=dark] *{border-color:var(--line)}
html[data-theme=dark] :is(.panel,.tool-card,.home-tools .tool-card,.support-notes section,.tools-menu nav,.chord-card){background:#192131;box-shadow:none}
html[data-theme=dark] :is(input,select,textarea,.field input,.field select,.guide,.advanced,.play-controls,.tab-system,.string,.button,.tabs,.root-button,.output,.notice,.progression>div,.badge,.practice-switch [aria-pressed=false]){background:#202b3e;color:var(--text)}
html[data-theme=dark] :is(.small,.intro,.eyebrow,label,.label,.chord-heading>span,.chord-formula,.voicing-label,.chord-tones,.diagram-label,.filter-label,.scale-notes,.string small,table.data th){color:var(--muted);fill:var(--muted)}
html[data-theme=dark] :is(.support-link,.theme-toggle){background:#1c2639;color:var(--text)}
html[data-theme=dark] :is(.button:hover,nav a:hover,.tools-menu nav a[aria-current]){background:#303c56;color:#e7edf8}
html[data-theme=dark] nav a{color:var(--muted)}
html[data-theme=dark] :is(.button.primary,.practice-switch [aria-pressed=true]){background:linear-gradient(120deg,#667bd0,#8175c5);color:#fff;border-color:#7d8ede}
html[data-theme=dark] .home-hero h1 span{background-image:linear-gradient(100deg,#99b9f0,#b2a0ed)}
html[data-theme=dark] :is(.tool-card .icon,.tabs button[aria-selected=true],.root-button[aria-pressed=true],.tab-column.active){background:#354569;color:#d6dfff}
html[data-theme=dark] .tabs button{color:var(--muted)}
html[data-theme=dark] .tabs button[aria-selected=true]{color:#fff}
html[data-theme=dark] :is(.note,.fret-dot){color:#a9bcff;fill:#a9bcff}
html[data-theme=dark] .fret-lines{stroke:#8795af}
html[data-theme=dark] :is(.fretboard .root,.fretboard td.root){background:#536bb2;color:#fff}
html[data-theme=dark] .string.detected{background:#254b43;color:#abecd3;border-color:#649f8f}
html[data-theme=dark] .tab-column>span{background:linear-gradient(transparent 49%,#42516b 49%,#42516b 53%,transparent 53%)}
html[data-theme=dark] .tab-column small{color:#a4b2ce}
html[data-theme=dark] .theme-toggle .moon{display:none}html[data-theme=dark] .theme-toggle .sun{display:block}
@media(max-width:560px){.header-links{gap:9px}.brand{font-size:18px;gap:6px}.brand img{width:34px;height:34px}.theme-toggle{width:40px;height:40px;padding:9px}.support-link{padding:8px}.tools-menu nav{right:-100px}}
@media(max-width:360px){.header-links{gap:6px}.brand{font-size:16px}.site-header{padding-inline:12px}.brand img{width:30px;height:30px}}
.vocal-callout{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:28px;padding:25px 28px;border:1px solid var(--line);border-radius:18px;background:#ffffff60}.vocal-callout h2{font-size:20px;margin-bottom:8px}.vocal-callout p{font-size:14px;color:var(--muted);max-width:600px;margin:0}.vocal-callout .button{flex-shrink:0}html[data-theme=dark] .vocal-callout{background:#192131a0}@media(max-width:560px){.vocal-callout{flex-direction:column;align-items:start;padding:22px}}
html[data-theme=dark] :is(.chord-heading h3,.chord-card h3,.output,.big-number,.progression strong,.timer-digits){color:var(--text)}html[data-theme=dark] :is(.chord-formula,.voicing-label,.chord-tones,.chord-heading>span){color:var(--muted)}html[data-theme=dark] .fretboard td{color:var(--text)}html[data-theme=dark] :is(.root-button.active,.note-select.active){background:#354569;color:#fff}
.tools-menu summary{align-items:center;gap:8px;line-height:1}.menu-chevron{width:16px;height:16px;display:block;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.tools-menu[open] .menu-chevron{transform:rotate(180deg)}.fretboard{table-layout:fixed;width:100%;min-width:780px}.fretboard :is(th,td){width:calc(100% / 13);min-width:0}.fretboard .tone{flex-shrink:0}html[data-theme=dark] .fretboard td{background:linear-gradient(transparent 48%,#58657d 49%,#58657d 51%,transparent 52%)}html[data-theme=dark] .tone{background:#354569;color:#e7edf8}html[data-theme=dark] .tone.root{background:#7388d3;color:#fff}

/* Keep string geometry independent of cell backgrounds and theme surfaces. */
.fretboard td{background:none!important}
.fretboard td::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:#8999b1;pointer-events:none}
.fretboard .tone{position:relative;z-index:1}
html[data-theme=dark] .fretboard td::before{background:#8293b0}
html[data-theme=dark] .tone.root{background:#a7b6ff;color:#101522}
:root{--muted:#596780}
.button.primary{background:linear-gradient(120deg,#4e5bb1,#6355a6);color:#fff}
html[data-theme=dark] :is(.button.primary,.practice-switch [aria-pressed=true]){background:linear-gradient(120deg,#a7b6ff,#c0aff1);color:#101522;border-color:#a7b6ff}
html[data-theme=dark] :is(.card-action,.inline,.support-heart){color:#b9c6ff}
html[data-theme=dark] :is(.frequency,.meter-labels,.status,.progression small,.back-home,.home-note,.home-hero>p,.section-title>span,.more-tools summary>span,.support-notes p){color:var(--muted)}
html[data-theme=dark] input::placeholder,html[data-theme=dark] textarea::placeholder{color:#a9b6ce;opacity:1}
html[data-theme=dark] .progression>div{color:#e7edf8}
html[data-theme=dark] .fretboard .tone.root{background:#a7b6ff;color:#101522}
html[data-theme=dark] :is(.guide>summary,.advanced>summary,.tabs button small){color:#bdc9df}
html[data-theme=dark] table.data th{background:#202b3e;color:#bdc9df}
html[data-theme=dark] .chip{background:#354569;color:#e7edf8}
html:not([data-theme=dark]) :is(.string small,.eyebrow,.root-button,.tabs button,.tabs button small,.tab-column small,table.data th){color:#596780}
html:not([data-theme=dark]) .root-button[aria-pressed=true],html:not([data-theme=dark]) .tone.root{background:#4e5bb1;color:#fff}
.tabs button span{color:inherit}