#fretboard.svelte-x1zss4{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-top:50px}#fretboard.svelte-x1zss4 .chord:where(.svelte-x1zss4){display:flex;justify-content:center;align-items:center}#fretboard.svelte-x1zss4 .chord:where(.svelte-x1zss4) .fret:where(.svelte-x1zss4){display:flex;justify-content:center;align-items:center;width:50px;height:50px;border:1px solid black;position:relative}#fretboard.svelte-x1zss4 .chord.fret-number:where(.svelte-x1zss4) .fret:where(.svelte-x1zss4){border:none;width:52px;height:52px;opacity:.3}#fretboard.svelte-x1zss4 .chord:where(.svelte-x1zss4) .fret:where(.svelte-x1zss4):nth-child(1){border-left:none}#fretboard.svelte-x1zss4 .chord:where(.svelte-x1zss4) .fret:where(.svelte-x1zss4):nth-child(n+2){font-weight:700}#fretboard.svelte-x1zss4 .chord:where(.svelte-x1zss4):nth-child(3) .fret:where(.svelte-x1zss4):nth-child(4):after,#fretboard.svelte-x1zss4 .chord:where(.svelte-x1zss4):nth-child(3) .fret:where(.svelte-x1zss4):nth-child(6):after,#fretboard.svelte-x1zss4 .chord:where(.svelte-x1zss4):nth-child(3) .fret:where(.svelte-x1zss4):nth-child(8):after,#fretboard.svelte-x1zss4 .chord:where(.svelte-x1zss4):nth-child(3) .fret:where(.svelte-x1zss4):nth-child(10):after{content:" ";position:absolute;bottom:-10px;left:calc(50% - 6);height:18px;width:18px;border-radius:25px;background-color:gray}#fretboard.svelte-x1zss4 .chord:where(.svelte-x1zss4):nth-child(4) .fret:where(.svelte-x1zss4):nth-child(13):after,#fretboard.svelte-x1zss4 .chord:where(.svelte-x1zss4):nth-child(3) .fret:where(.svelte-x1zss4):nth-child(13):after{content:" ";position:absolute;height:18px;width:18px;border-radius:25px;background-color:gray;z-index:-1}#fretboard.svelte-x1zss4 .chord:where(.svelte-x1zss4):nth-child(4) .fret:where(.svelte-x1zss4):nth-child(13):after{bottom:-9px;left:calc(50% - 9)}#fretboard.svelte-x1zss4 .chord:where(.svelte-x1zss4):nth-child(3) .fret:where(.svelte-x1zss4):nth-child(13):after{top:-9px;left:calc(50% - 9)}#fretboard.svelte-x1zss4 .chord:where(.svelte-x1zss4) .fret[data-note]>div:where(.svelte-x1zss4):before{content:" ";height:30px;width:30px;position:absolute;top:calc(50% - 15px);left:calc(50% - 15px);z-index:-1;border-radius:50%}#fretboard.svelte-x1zss4 .chord:where(.svelte-x1zss4) .fret[data-note=A]>div:where(.svelte-x1zss4):before{background-color:#f003}#fretboard.svelte-x1zss4 .chord:where(.svelte-x1zss4) .fret[data-note=B]>div:where(.svelte-x1zss4):before{background-color:#ff7f0033}#fretboard.svelte-x1zss4 .chord:where(.svelte-x1zss4) .fret[data-note=C]>div:where(.svelte-x1zss4):before{background-color:#ff03}#fretboard.svelte-x1zss4 .chord:where(.svelte-x1zss4) .fret[data-note=D]>div:where(.svelte-x1zss4):before{background-color:#0f03}#fretboard.svelte-x1zss4 .chord:where(.svelte-x1zss4) .fret[data-note=E]>div:where(.svelte-x1zss4):before{background-color:#00f3}#fretboard.svelte-x1zss4 .chord:where(.svelte-x1zss4) .fret[data-note=F]>div:where(.svelte-x1zss4):before{background-color:#4b008233}#fretboard.svelte-x1zss4 .chord:where(.svelte-x1zss4) .fret[data-note=G]>div:where(.svelte-x1zss4):before{background-color:#30e2f633}.hidden.svelte-x1zss4{display:none!important}#visible-notes.svelte-x1zss4 label:where(.svelte-x1zss4){padding-right:10px}#visible-notes.svelte-x1zss4 label:where(.svelte-x1zss4):not(:last-child){border-right:1px solid black}#visible-notes.svelte-x1zss4 input:where(.svelte-x1zss4):not(:first-child){margin-left:10px}
