.fretboard[data-v-0870b50e]{width:100%;border-spacing:0;border-collapse:collapse;table-layout:fixed}.fretboard tr[data-v-0870b50e]{height:2rem}.fretboard tr:first-child td[data-v-0870b50e]{border-top:1px solid #aaa}.fretboard tr:first-child td[data-v-0870b50e]:first-child{border-top:0}.fretboard tr:last-child td[data-v-0870b50e]{border-bottom:1px solid #aaa}.fretboard tr:last-child td[data-v-0870b50e]:first-child{border-bottom:0}.fretboard td[data-v-0870b50e]{border-left:1px solid #aaa;border-right:1px solid #aaa}.fretboard td[data-v-0870b50e]:first-child{border-left:0;border-right:3px solid #aaa;width:3.5em}.fretboard .string[data-v-0870b50e]{border:0}.fretboard .string.highlight[data-v-0870b50e]{border-color:#32cd32}.fretboard .string1[data-v-0870b50e]{border-top:1px solid}.fretboard .string2[data-v-0870b50e]{border-top:2px solid}.fretboard .string3[data-v-0870b50e]{border-top:3px solid}.fretboard .string4[data-v-0870b50e]{border-top:4px solid}.fretboard .string5[data-v-0870b50e]{border-top:5px solid}.fretboard .string6[data-v-0870b50e]{border-top:6px solid}.fretboard .position[data-v-0870b50e]{position:relative;cursor:pointer}.fretboard .position[data-v-0870b50e]:hover{background-color:#eee}.fretboard .marker[data-v-0870b50e]{left:calc(50% - 7px);bottom:calc(-50% + 6px);width:14px;height:14px;max-height:90%;max-width:90%;background-color:#d3d3d3}.fretboard .marker[data-v-0870b50e],.spot{display:inline;position:absolute;border-radius:100%}.spot{left:calc(50% - 12px);top:calc(50% - 12px);width:25px;height:25px;background-color:#00f;color:#fff;line-height:25px;vertical-align:middle;text-align:center;font-size:80%}.spot.open{left:-12px}.spot.root{background-color:red}.spot.highlight{background-color:#ff0;color:#000}.keyboard[data-v-34dd1c32]{width:100%;table-layout:fixed}.keyboard .note-key[data-v-34dd1c32]{border:1px solid #aaa;height:5rem;cursor:pointer}.question[data-v-298d25c3],.result[data-v-298d25c3]{font-size:200%;font-weight:700}.correct[data-v-298d25c3]{background-color:#90ee90;color:#006400;border-width:3px;border-color:#006400;border-style:solid;border-radius:25px;padding:3px}.wrong[data-v-298d25c3]{color:#8b0000}.notes[data-v-0f7f46d2]{width:100%;border-spacing:0;border-collapse:collapse;table-layout:fixed;border:1px solid #aaa}.notes td[data-v-0f7f46d2],.notes th[data-v-0f7f46d2]{border:1px solid #aaa;padding:3px}.notes td[data-v-0f7f46d2]{font-size:75%}.notes .highlight[data-v-0f7f46d2]{background-color:#ff0}.treble-clef[data-v-0ddc8c31]{position:absolute;font-size:4rem}.staff-main[data-v-0ddc8c31]{position:relative;width:100%;margin-top:6rem;margin-bottom:9rem}.staff[data-v-0ddc8c31]{position:absolute;width:100%;height:4.5rem}.staff .line{position:absolute;height:.5rem;width:100%}.staff .line.additional{width:1.75rem}.treble-clef:before{content:"\1D11E"}.note:before{content:"\2669"}.note-size-4:before{font-size:4rem}