.chord-guide{--fret-board-bg: light-dark(#f4f4f5, #111);--fret-board-chord-c: light-dark(#222, #f7f7f7);--fret-board-fret-bg: light-dark(#e7e7ea, #1b1b1b);--fret-board-fret-c: light-dark(#111, #f6f6f6);--fret-board-string-c: light-dark(#1115, #fff5);--string-note-bg: light-dark(#111, #f6f6f6);--string-note-c: light-dark(#fdfdfd, #111);--string-note-mute-open-c: light-dark(#2b2b2b, #ddd);--fret-board-bdrs: .75rem;--fret-board-ff: var(--font-sans);display:grid;gap:1.5rem}.chord-guide__handedness{border:0;margin:0;padding:0;display:flex;align-items:center;gap:1rem}.chord-guide__handedness label{display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem;font-weight:500;cursor:pointer}.chord-guide__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:1rem}.chord-guide__card{display:flex;width:100%}.chord-guide fret-board{--fret-board-fret-w: clamp(.0625rem, .03125rem + .5cqi, .5rem);--fret-board-string-w: clamp(.0625rem, .03125rem + .5cqi, .125rem);--_frets: attr(frets type(<number>), 4);--_strings: attr(strings type(<number>), 6);aspect-ratio:1 / 1;background-color:transparent;border-radius:var(--fret-board-bdrs, .5rem);box-sizing:border-box;container-type:inline-size;display:grid;font-family:var(--fret-board-ff, inherit);grid-template-columns:repeat(calc(var(--_strings) * 2),1fr);grid-template-rows:var(--fret-board-top-row-h, 12%) repeat(calc(var(--_frets)),1fr) var(--fret-board-bottom-row-h, 15%);place-items:center;padding:0 .5rem;width:100%}.chord-guide fret-board:before{background-color:var(--fret-board-fret-bg, #0000);background-image:linear-gradient(90deg,var(--fret-board-string-c) var(--fret-board-string-w),#0000 0 var(--fret-board-string-w)),linear-gradient(180deg,var(--fret-board-fret-c) var(--fret-board-fret-w),#0000 0 var(--fret-board-fret-w));background-position:0 var(--fret-board-fret-w),0 0;background-repeat:repeat-x,repeat-y;background-size:calc(100% / (var(--_strings) - 1) - (var(--fret-board-string-w) / var(--_strings))) calc(100% - (2 * var(--fret-board-fret-w))),100% calc(100% / var(--_frets) - (var(--fret-board-fret-w) / var(--_frets)));box-shadow:0 calc(0px - var(--fret-board-fret-bbsw, 1.5cqi)) 0 0 var(--fret-board-fret-c);content:"";display:block;grid-area:2 / 2 / calc(var(--_frets) + 2) / calc(var(--_strings) * 2);height:100%;width:100%}.chord-guide fret-board:after{color:var(--fret-board-chord-c, light-dark(#222, #fff));content:attr(chord);font-size:var(--fret-board-chord-fs, 7.5cqi);font-weight:var(--fret-board-chord-fw, 500);grid-column:2 / span calc((var(--_strings) * 2) - 2);grid-row:calc(var(--_frets) + 2);text-align:center;width:100%}.chord-guide fret-board ol{align-items:center;color:var(--fret-board-chord-c);display:grid;font-size:var(--fret-board-fret-number-fs, 5cqi);font-weight:var(--fret-board-fret-number-fw, 400);grid-column:1;grid-row:2 / span var(--_frets);grid-template-rows:repeat(var(--_frets),1fr);height:100%;margin:0;padding:0;position:relative;z-index:2;list-style:none}.chord-guide[data-hand=left] fret-board ol{grid-column:calc(var(--_strings) * 2)}.chord-guide string-note{--string-note-h: 12cqi;--string-note-open-mute-h: 5cqi;--barre: attr(barre type(<number>), 1);--fret: attr(fret type(<number>), 0);--string: attr(string type(<number>), 0);aspect-ratio:1;background-color:var(--string-note-bg, currentColor);border-radius:50%;box-sizing:border-box;display:grid;grid-column:calc((var(--_strings) * 2) - (var(--string) * 2 - 1)) / span calc(var(--barre) * 2);grid-row:calc(var(--fret) + 1);height:var(--string-note-h);isolation:isolate;list-style:none;place-content:center;position:relative;z-index:1}.chord-guide[data-hand=left] fret-board string-note{grid-column:calc((var(--string) * 2) - (var(--barre) * 2 - 1)) / span calc(var(--barre) * 2)}.chord-guide string-note:after{color:var(--string-note-c, light-dark(#fff, #222));content:attr(finger);font-size:var(--string-note-fs, 7cqi);font-weight:var(--string-note-fw, 500);text-box:cap alphabetic}.chord-guide string-note[barre]{aspect-ratio:unset;border-radius:var(--string-note-h);opacity:1;width:100%}.chord-guide string-note[open],.chord-guide string-note[mute]{background-color:var(--string-note-mute-open-c, light-dark(#222, #fff));height:var(--string-note-open-mute-h);width:var(--string-note-open-mute-h)}.chord-guide string-note[mute]{border-image:conic-gradient(var(--fret-board-bg) 0 0) 100% / calc(50% - .3cqi);rotate:45deg}.chord-guide string-note[open]{border-radius:50%;mask:radial-gradient(circle farthest-side at center,#0000 calc(100% - 1cqi),#000 calc(100% - 1cqi + 1px))}