.fretboard-scroll{max-width:100%;margin:18px 0 24px;overflow-x:auto}.fretboard{width:100%;min-width:760px;display:block}.fretboard--long{min-width:1040px}.fretboard--short{min-width:0}.fretboard-scroll--short{container:fretboard-short/inline-size}.fretboard--short .fretboard-mark text,.fretboard--short .fretboard-number,.fretboard--short .fretboard-open-label{font-size:14px}@container fretboard-short not (min-inline-size:400px){.fretboard--short .fretboard-mark text,.fretboard--short .fretboard-number,.fretboard--short .fretboard-open-label{font-size:17px}}@container fretboard-short not (min-inline-size:280px){.fretboard--short .fretboard-mark text,.fretboard--short .fretboard-number,.fretboard--short .fretboard-open-label{font-size:19px}}.fretboard-board{fill:var(--ground2);stroke:var(--line)}.fretboard-fret,.fretboard-nut,.fretboard-string{stroke:var(--line)}.fretboard-nut{stroke-width:5px}.fretboard-string{stroke-width:2px}.fretboard-inlays circle{fill:var(--muted);opacity:.45}.fretboard-number{fill:var(--muted);font-family:var(--mono);text-anchor:middle;font-size:11px}.fretboard-open-label{fill:var(--muted);font-family:var(--mono);text-anchor:middle;dominant-baseline:central;font-size:11px;font-weight:600}.fretboard-mark circle{fill:var(--surface);stroke:var(--ink);stroke-width:2px}.fretboard-mark text{fill:var(--ink);font-family:var(--mono);text-anchor:middle;dominant-baseline:central;font-size:8px;font-weight:600}.fretboard-mark[data-role=root] circle{fill:var(--accent);stroke:var(--accent)}.fretboard-mark[data-role=root] text{fill:var(--accent-ink)}.fretboard-mark[data-role=chord] circle{fill:var(--ok);stroke:var(--ok)}.fretboard-mark[data-role=note] circle{fill:var(--muted);stroke:var(--muted)}.fretboard-mark[data-role=note] text{fill:var(--surface)}.fretboard--wood .fretboard-board{fill:color-mix(in srgb, var(--ui-night) 92%, var(--ui-on-night))}.fretboard--wood .fretboard-board,.fretboard--wood .fretboard-fret{stroke:color-mix(in srgb, var(--ui-on-night) 60%, var(--ui-night))}.fretboard--wood .fretboard-string,.fretboard--wood .fretboard-nut{stroke:color-mix(in srgb, var(--ui-on-night) 80%, var(--ui-night))}.fretboard--wood .fretboard-inlays circle{fill:color-mix(in srgb, var(--ui-on-night) 60%, var(--ui-night));opacity:1}.fretboard--wood .fretboard-number,.fretboard--wood .fretboard-open-label{fill:color-mix(in srgb, var(--ui-on-night) 80%, var(--ui-night))}.fretboard--key .fretboard-mark[data-role=root] circle,.fretboard-key-swatch[data-role=root] circle{fill:var(--highlight);stroke:var(--highlight)}.fretboard--key .fretboard-mark[data-role=root] text{fill:var(--ui-on-highlight)}.fretboard--key .fretboard-mark[data-role=third] circle,.fretboard-key-swatch[data-role=third] circle{fill:var(--warn);stroke:var(--warn)}.fretboard--key .fretboard-mark[data-role=fifth] circle,.fretboard-key-swatch[data-role=fifth] circle{fill:var(--ok);stroke:var(--ok)}.fretboard--key .fretboard-mark[data-role=third] text,.fretboard--key .fretboard-mark[data-role=fifth] text{fill:var(--ground)}.fretboard--key .fretboard-mark[data-role=scale] circle,.fretboard-key-swatch[data-role=scale] circle{fill:var(--ground);stroke:var(--ink)}.fretboard-mark[data-role=blue] circle{fill:var(--warn);stroke:var(--warn)}.fretboard-mark[data-role=blue] text{fill:var(--ground)}.fretboard-mark[data-state=now] circle{stroke:var(--highlight);stroke-width:4px}.fretboard-mark[data-state=dim]{opacity:.25}.fretboard-mark,.fretboard-zone{cursor:pointer}.fretboard-mark:focus-visible,.fretboard-zone:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.fretboard-window{fill:var(--highlight);fill-opacity:.08;stroke:var(--highlight);stroke-width:2px}.fretboard-zone path{fill:none;stroke:var(--muted);stroke-width:1.5px}.fretboard-zone text{fill:var(--muted);font-family:var(--mono);letter-spacing:1px;font-size:11px}.fretboard--wood .fretboard-zone path{stroke:color-mix(in srgb, var(--ui-on-night) 60%, var(--ui-night))}.fretboard--wood .fretboard-zone text{fill:color-mix(in srgb, var(--ui-on-night) 80%, var(--ui-night))}.fretboard-zone[aria-pressed=true] path{stroke:var(--highlight)}.fretboard-zone[aria-pressed=true] text{fill:var(--highlight)}.fretboard-mark[data-ring=true] circle.fretboard-ring{fill:none;stroke:var(--warn);stroke-width:2px;stroke-dasharray:4 3}.fretboard--wood .fretboard-mark[data-ring=true] circle.fretboard-ring{stroke:var(--ui-on-night)}.fretboard--piano .fretboard-mark[data-key=white]>circle:not([class]){fill:var(--ui-on-night);stroke:var(--ui-night)}.fretboard--piano .fretboard-mark[data-key=white] text{fill:var(--ui-night)}.fretboard--piano .fretboard-mark[data-key=black]>circle:not([class]){fill:var(--ui-night);stroke:color-mix(in srgb, var(--ui-on-night) 65%, var(--ui-night));stroke-width:1px}.fretboard--piano .fretboard-mark[data-key=black] text{fill:var(--ui-on-night)}.fretboard--piano .fretboard-mark[data-role=root]>circle:not([class]){fill:var(--highlight);stroke:var(--highlight)}.fretboard--piano .fretboard-mark[data-role=root] text{fill:var(--ui-on-highlight)}.fretboard .fretboard-mark>circle.fretboard-highlight-ring{fill:none;stroke:var(--highlight);stroke-width:2px}.fretboard-notes{flex-wrap:wrap;gap:.5rem;display:flex}.fretboard-note-key{box-sizing:border-box;border:1px solid color-mix(in srgb, var(--ui-on-night) 65%, var(--ui-night));background:var(--ui-on-night);block-size:2.125rem;inline-size:2.125rem;color:var(--ui-night);font-family:var(--mono);border-radius:50%;flex:none;justify-content:center;align-items:center;font-size:.8125rem;font-weight:600;display:inline-flex}button.fretboard-note-key{cursor:pointer}.fretboard-note-key[data-key=black]{background:var(--ui-night);color:var(--ui-on-night)}.fretboard-note-key[data-root=true]{background:var(--highlight);border-color:var(--highlight);color:var(--ui-on-highlight)}.fretboard-note-key[data-highlighted=true],.fretboard-note-key:focus-visible{outline:2px solid var(--highlight);outline-offset:3px}.fretboard--static:not(.fretboard--wood) .fretboard-string{stroke:var(--muted);stroke-width:2.5px}.fretboard--static:not(.fretboard--wood) .fretboard-fret{stroke:var(--muted);stroke-opacity:.55}.fretboard--static:not(.fretboard--wood) .fretboard-nut{stroke:var(--ink)}.fretboard--static .fretboard-mark{cursor:inherit}
.fretboard--range{min-width:0}.fretboard--range .fretboard-mark text,.fretboard--range .fretboard-number,.fretboard--range .fretboard-open-label{font-size:15px}.fretboard--fitted .fretboard-mark text,.fretboard--fitted .fretboard-number,.fretboard--fitted .fretboard-open-label{font-size:14px}@container fretboard-short not (min-inline-size:400px){.fretboard--fitted .fretboard-mark text,.fretboard--fitted .fretboard-number,.fretboard--fitted .fretboard-open-label{font-size:17px}}@container fretboard-short not (min-inline-size:280px){.fretboard--fitted .fretboard-mark text,.fretboard--fitted .fretboard-number,.fretboard--fitted .fretboard-open-label{font-size:19px}}