.fretboard{border-top:2px solid var(--border-dark);border-bottom:2px solid var(--border-dark)}.fret,.fretboard{display:flex;transition:border-color .3s ease}.fret{border-left:1px solid var(--fret-border);flex:1;flex-direction:column}.note{padding:4px;text-align:center;font-size:.8rem;border-bottom:1px solid var(--note-border);color:var(--text-primary);transition:all .3s ease}.note.open{font-weight:700;background-color:var(--note-open-bg)}.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)}.fret-number{width:100%;color:var(--text-secondary);transition:color .3s ease}