.fretboard{border-top:2px solid var(--border-dark);border-bottom:2px solid var(--border-dark);transition:border-color .3s;display:flex}.fret{border-left:1px solid var(--fret-border);flex-direction:column;flex:1;transition:border-color .3s;display:flex}.note{text-align:center;border-bottom:1px solid var(--note-border);color:var(--text-primary);padding:4px;font-size:.8rem;transition:all .3s}.note.open{background-color:var(--note-open-bg);font-weight:700}.note.scale{background-color:var(--accent-scale)}.note.highlight{background-color:var(--accent-chord);font-weight:700}.note.highlight-p0{background-color:var(--highlight-p0)}.note.highlight-p1{background-color:var(--highlight-p1)}.note.highlight-p2{background-color:var(--accent-scale)}.note.highlight-p3{background-color:var(--highlight-p3)}.fretboard-wrapper{overflow-x:auto}