.chord-notes-view,.chord-view{padding:8px;display:flex;--fret-height:12px;--string-width:10px;--finger-size:8px}@media (min-width:640px){.chord-notes-view,.chord-view{--fret-height:18px;--string-width:15px;--finger-size:12px}}[data-barre="1"]:is(:is(.chord-view,.chord-notes-view) .barre){--barre:1}[data-barre="2"]:is(:is(.chord-view,.chord-notes-view) .barre){--barre:2}[data-barre="3"]:is(:is(.chord-view,.chord-notes-view) .barre){--barre:3}[data-barre="4"]:is(:is(.chord-view,.chord-notes-view) .barre){--barre:4}[data-barre="5"]:is(:is(.chord-view,.chord-notes-view) .barre){--barre:5}:is(.chord-view,.chord-notes-view) .barre{position:absolute;width:100%;height:calc(var(--fret-height) / 2);border-radius:6px;background:oklch(var(--b3));z-index:10;top:calc(var(--barre) * var(--fret-height) - var(--fret-height) * .75)}:is(.chord-view,.chord-notes-view) .base-fret{position:absolute;left:100%;top:0;line-height:var(--fret-height);font-size:.75rem;padding-left:calc(var(--finger-size) * .4);letter-spacing:-1px}:is(.chord-view,.chord-notes-view) .strings{position:relative;display:flex;flex-direction:row;justify-content:space-between;align-items:stretch;margin:calc(var(--fret-height) / 2) calc(var(--string-width) * 1.5)}:is(.chord-view,.chord-notes-view) .string{position:relative;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;width:var(--string-width);border-left:1px solid oklch(var(--b3))}:is(:is(.chord-view,.chord-notes-view) .string):last-child{width:0}:is(:is(.chord-view,.chord-notes-view) .string):last-child .close-fret{right:calc(var(--string-width) / -2)}:is(:is(.chord-view,.chord-notes-view) .string):before{content:"";position:absolute;left:-1px;right:0;top:-1px;height:2px;background:oklch(var(--bc));z-index:2}:is(.chord-view,.chord-notes-view) .finger{font-family:Noto Sans Mono,Consolas,Courier New,monospace;position:absolute;top:100%;left:-4px;font-size:.75rem;line-height:var(--fret-height);text-align:center}:is(.chord-view,.chord-notes-view) .fret{position:relative;height:var(--fret-height)}[data-active=true][data-main=false]:is(:is(.chord-view,.chord-notes-view) .fret){--note-color:oklch(var(--n))}:is(:is(.chord-view,.chord-notes-view) .fret):before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:oklch(var(--b3))}:is(:is(.chord-view,.chord-notes-view) .fret):last-child{height:0}[data-active=true]:is(:is(.chord-view,.chord-notes-view) .fret):after{content:"";position:absolute;right:100%;margin-right:calc(-1 * var(--finger-size) / 2);top:calc((var(--fret-height) + var(--finger-size)) / -2);width:var(--finger-size);height:var(--finger-size);line-height:var(--finger-size);font-size:calc(var(--finger-size) - 4px);text-align:center;border-radius:50%;background:var(--note-color);z-index:20}[data-active=true][data-circle=true]:is(:is(.chord-view,.chord-notes-view) .fret):after{background:none;border:2px solid var(--note-color);width:var(--finger-size);height:var(--finger-size)}:is(.chord-view,.chord-notes-view) .close-fret{position:absolute;top:calc((var(--fret-height)) * -1);right:calc(var(--string-width) / 2);width:var(--string-width);height:var(--fret-height);display:flex;justify-content:stretch;align-items:stretch}:is(:is(.chord-view,.chord-notes-view) .close-fret) svg{width:100%;height:100%}:is(.chord-view,.chord-notes-view) .open-fret{position:absolute;right:100%;width:var(--finger-size);height:var(--finger-size);border-radius:50%;border:2px solid var(--notes-color);z-index:20}