.fretboard{border-top:1px solid var(--ds-color-border-subtle);border-bottom:1px solid var(--ds-color-border-subtle);transition:border-color var(--ds-duration-240)var(--ds-ease-out);display:flex}.fret{border-left:1px solid var(--ds-color-border-subtle);transition:border-color var(--ds-duration-240)var(--ds-ease-out);flex-direction:column;flex:1;display:flex}.note{text-align:center;font-size:var(--ds-font-size-13);border-bottom:1px solid var(--ds-color-border-subtle);color:var(--ds-color-text-muted);background-color:var(--ds-color-surface-sunken);transition:background-color var(--ds-duration-240)var(--ds-ease-out),color var(--ds-duration-240)var(--ds-ease-out);padding:4px}.note.open{font-weight:var(--ds-font-weight-emphasis);background-color:var(--ds-color-surface-raised);color:var(--ds-color-text-primary)}.note.scale{background-color:var(--ds-color-surface-raised);color:var(--ds-color-text-primary)}.note.highlight{background-color:var(--ds-color-primary-solid);color:var(--ds-color-text-on-primary);font-weight:var(--ds-font-weight-emphasis)}.note.correct{background-color:color-mix(in oklab,var(--ds-color-success)30%,var(--ds-color-surface-raised));color:var(--ds-color-text-primary);font-weight:var(--ds-font-weight-emphasis)}.note.wrong{background-color:color-mix(in oklab,var(--ds-color-danger)30%,var(--ds-color-surface-raised));color:var(--ds-color-text-primary);font-weight:var(--ds-font-weight-emphasis)}.note.highlight-p0{background-color:var(--ds-color-track-1)}.note.highlight-p1{background-color:var(--ds-color-track-2)}.note.highlight-p2{background-color:var(--ds-color-track-3)}.note.highlight-p3{background-color:var(--ds-color-track-4)}.fretboard-wrapper{overflow-x:auto}