:root{--text:#333;--text-h:#08060d;--bg:#fff;--white:#fff;--gray1:#e6e6e6;--gray2:#b3b3b3;--gray3:gray;--gray4:#4d4d4d;--gray5:#1a1a1a;--border:var(--gray1);--border-dark:var(--gray2);--border-darkest:var(--gray4);--sans:system-ui, "Segoe UI", Roboto, sans-serif;--fretTextSize:8px;--notationTextSize:10px;font:16px/100% var(--sans);color:var(--text);background:var(--bg)}main{max-width:1200px;margin:1rem}svg.fretboard{width:100%}svg.fretboard text{font-size:var(--fretTextSize);text-anchor:middle;fill:var(--text)}svg.fretboard .string{stroke:var(--border);stroke-width:.75px}svg.fretboard .fret:nth-child(5){stroke-width:3px;stroke:var(--border-darkest)}svg.fretboard .fretboard-note{fill:var(--white);stroke:var(--border-dark);stroke-width:1.25px}svg.fretboard .fretboard-note[data-status=inactive],svg.fretboard text[data-status=inactive]{opacity:0}svg.fretboard .double-note{font-size:calc(var(--fretTextSize) * .8)}.staff-line{stroke:var(--border-darkest);stroke-width:1px}svg.notation .notation-note[data-status=inactive]{opacity:0}svg.notation .note-txt{font-size:var(--notationTextSize);text-anchor:middle;fill:var(--white);pointer-events:none}svg.notation .note-txt[data-status=inactive]{fill:#0000}#notes-control button{border:1px solid var(--gray2);background-color:var(--white);border-radius:3px;margin:5px;padding:5px;font-size:1rem}#notes-control button[data-status=inactive]{background-color:var(--gray1);color:var(--gray3)}input,select{font-size:1rem}#fretboard-form .form-group{margin:.5rem 0}#fretboard-form label,#fretboard-form select{margin-right:.5rem}