.hx-bar{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}.hx-roots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}@media(min-width:760px){.hx-roots{grid-template-columns:repeat(12,minmax(0,1fr))}}.hx-root{min-height:44px;min-width:0;padding:0 2px;border:1.5px solid var(--ea-line-2);background:var(--ea-elevated);color:var(--ea-fg);border-radius:var(--rad-sm);font:600 var(--ea-fs-sm)var(--ea-font-text);cursor:pointer;white-space:nowrap}.hx-root:hover{border-color:var(--ea-violet)}.hx-root[aria-pressed=true]{background:var(--ea-violet);border-color:var(--ea-violet);color:#0b0d12}:root[data-theme=light] .hx-root[aria-pressed=true]{color:#fff}.hx-title{font-family:var(--ea-font-display);font-size:clamp(1.5rem,5vw,2.1rem);font-weight:700;line-height:1.1;margin:0;color:var(--ea-fg)}.hx-sub{color:var(--ea-fg-soft);font-size:var(--ea-fs-sm);margin:.35em 0 0}.tl-screen .hx-title{color:#e8eaf0}.tl-screen .hx-sub,.tl-screen .tl-hint{color:#aab2c4}.tl-screen .tl-label{color:#838ba0}.tl-screen .tl-hint a{color:#a99bf6}.hg-alt{font-size:.5em;font-weight:500;color:#838ba0;font-family:var(--ea-font-text)}.hx-notes{display:flex;flex-wrap:wrap;gap:6px}.hx-note{display:inline-grid;justify-items:center;min-width:44px;padding:.3em .55em;border-radius:var(--rad-sm);background:var(--ea-elevated);border:1px solid var(--ea-line-2);font:600 var(--ea-fs-ui)/1.2 var(--ea-font-text);color:var(--ea-fg)}.hx-note small{display:block;font:500 11px var(--ea-font-mono);color:var(--ea-fg-mute)}.hx-note.is-root{border-color:var(--ea-magenta);color:var(--ea-magenta)}.hx-note.is-blue{border-color:var(--ea-data-5);color:var(--ea-data-5)}.tl-screen .hx-note{background:#171b24;border-color:rgba(232,234,240,.18);color:#e8eaf0}.tl-screen .hx-note small{color:#838ba0}.tl-screen .hx-note.is-root{border-color:#ec6aa6;color:#ec6aa6}.tl-screen .hx-note.is-blue{border-color:#6ca9f5;color:#6ca9f5}.hg-head{display:grid;gap:var(--sp-3)}@media(min-width:760px){.hg-head{grid-template-columns:1fr 1.2fr;align-items:center}}.hc-deg{font:700 11px var(--ea-font-mono);color:var(--ea-violet-hi);letter-spacing:.02em}.hb{width:100%;height:auto;display:block}.hb text{font-family:var(--ea-font-text)}.hb-title{font-size:20px;font-weight:700;fill:var(--ea-fg)}.hb-fret{stroke:var(--ea-fg-mute);stroke-width:1.2}.hb-str{stroke:var(--ea-fg-soft)}.hb-nut{fill:var(--ea-fg)}.hb-base{font-size:13px;font-weight:700;fill:var(--ea-fg-soft)}.hb-mute line{stroke:var(--ea-fg-mute);stroke-width:2}.hb-open{fill:none;stroke:var(--ea-fg-soft);stroke-width:2}.hb-open.is-root{stroke:var(--ea-magenta)}.hb-barre,.hb-dot{fill:var(--ea-violet)}.hb-dot.is-root{fill:var(--ea-magenta)}.hb-fing{fill:#fff;font-size:11px;font-weight:700}.hb-under{fill:var(--ea-fg-soft);font-size:10px}.hf{display:block;height:auto;width:100%;min-width:820px}.hf text{font-family:var(--ea-font-text)}.hf-wood{fill:var(--ea-elevated)}.hf-fret{stroke:var(--ea-fg-mute);stroke-width:1.5}.hf-nut{stroke:var(--ea-fg);stroke-width:5}.hf-str{stroke:var(--ea-fg-soft)}.hf-inlay{fill:var(--ea-line-2)}.hf-num,.hf-sname{fill:var(--ea-fg-mute);font-size:11px;font-weight:600}.hf-box{fill:var(--ea-teal-dim);stroke:var(--ea-teal);stroke-dasharray:5 4}.hf-note{cursor:pointer}.hf-note circle{fill:var(--ea-violet)}.hf-note text{fill:#fff;font-size:10px;font-weight:700;pointer-events:none}.hf-note.is-root circle{fill:var(--ea-magenta)}.hf-note.is-blue circle{fill:var(--ea-data-5)}.hf-note.is-dim circle{fill:var(--ea-line-2)}.hf-note.is-dim text{fill:var(--ea-fg-mute)}.hf-note.is-live circle{fill:var(--ea-teal);stroke:var(--ea-fg);stroke-width:2}.hp{display:block;width:100%;height:auto;min-width:520px}.hp text{font-family:var(--ea-font-text);font-weight:700;font-size:10px;pointer-events:none}.hp-key{cursor:pointer}.hp-w rect{fill:#fff;stroke:#9aa1b2}.hp-b rect{fill:#151820;stroke:#000}.hp-w text{fill:#12151c}.hp-b text{fill:#fff}.hp-w.is-mark rect{fill:#bfefea}.hp-b.is-mark rect{fill:#138c81}.hp-w.is-root rect{fill:#f7c3da}.hp-b.is-root rect{fill:#b8336f}.hp-w.is-down rect,.hp-w.is-live rect{fill:#cfc8fb}.hp-b.is-down rect,.hp-b.is-live rect{fill:#5b45d0}.hg-voicings{display:grid;gap:var(--sp-3);grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--sp-4)}@media(min-width:900px){.hg-voicings{grid-template-columns:repeat(4,minmax(0,1fr))}}.hg-card{margin:0;padding:var(--sp-3);border:1px solid var(--ea-line-2);border-radius:var(--rad-md);background:var(--ea-elevated);display:grid;gap:var(--sp-2);align-content:start;min-width:0}.hg-card .hg-svg{max-width:190px;margin:0 auto;width:100%}.hg-card figcaption{font-size:var(--ea-fs-sm);color:var(--ea-fg-soft);text-align:center;line-height:1.4}.hg-code{display:block;font:600 12px var(--ea-font-mono);color:var(--ea-fg-mute);margin-top:2px;background:0 0}.hg-play{gap:6px}.hg-play .tl-btn{flex:auto;padding-inline:.6em}.hg-basics{display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr));margin:var(--sp-5)0}@media(min-width:700px){.hg-basics{grid-template-columns:repeat(6,minmax(0,1fr))}}.hg-basic{display:grid;gap:4px;justify-items:center;padding:8px 6px;border:1px solid var(--ea-line-2);border-radius:var(--rad-md);background:var(--ea-graphite);color:var(--ea-fg);cursor:pointer;font-family:var(--ea-font-text);min-width:0}.hg-basic:hover{border-color:var(--ea-violet)}.hg-basic .hg-svg{display:block;width:100%;max-width:130px}.hg-basic small{font:600 11px var(--ea-font-mono);color:var(--ea-fg-mute)}