.string[data-v-8cf7d1d1]{background-color:var(--string-color);height:2px;position:absolute;width:calc(100% - var(--fret-spacing) + 2px + var(--fret-spacing)/2)}.fret[data-v-5b52bd9d]{background-color:var(--fret-color);height:var(--fretboard-height);position:absolute;width:2px}.fret.first-fret[data-v-5b52bd9d]{background-color:#333}.note[data-v-1ce86881]{align-items:center;background:transparent;border-radius:50%;color:var(--note-text-color);font-family:Arial,sans-serif;font-size:var(--fret-number-font-size);font-weight:400;height:var(--note-size);justify-content:center;opacity:0;position:absolute;transform:translate(-50%,-50%);width:var(--note-size)}.note.active[data-v-1ce86881]{display:flex;opacity:1}.note.hasBackground[data-v-1ce86881]{background-color:var(--note-color)}.note.hasBackground.tonic[data-v-1ce86881]{background-color:var(--note-active-color);color:var(--note-active-text-color)}.note.hasBorder[data-v-1ce86881]{border:1px solid}.note.muted[data-v-1ce86881]{background:transparent;display:flex;opacity:1}.note.editMode[data-v-1ce86881]{cursor:pointer}.note.editMode[data-v-1ce86881]:not(.active){background:var(--note-color);display:flex;opacity:.2!important}.fret-number[data-v-b9fc9502]{color:var(--fret-number-color);font-size:var(--fret-number-font-size);font-weight:600;position:absolute;transform:translate(-50%)}.fretboard-container[data-v-bc11a94c]{overflow-x:auto;padding:0 0 20px 6px;--nut-width:4px;--string-color:#999;--fret-color:#666;--note-color:#7c7c7c;--note-active-color:#e2ad00;--note-text-color:#fff;--note-active-text-color:#fff;--first-fret-spacing:30px;--fret-number-color:#a2a2a2}.fretboard[data-v-bc11a94c]{height:var(--fretboard-height);margin:20px 2px 28px 0;position:relative;width:var(--fretboard-width)}.fret-numbers[data-v-bc11a94c]{position:absolute;top:calc(100% + var(--fret-number-top-spacing))}.fretboard[data-v-bc11a94c]:before{background-color:#333;content:"";height:var(--fretboard-height);left:var(--first-fret-spacing);position:absolute;top:0;width:var(--nut-width);z-index:1}