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