#plugin_chords .chords-module { max-width: 660px; margin-inline: auto; }
#plugin_chords .chords-controls { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) max-content; gap: 8px; align-items: end; margin-bottom: 8px; }
#plugin_chords .chords-controls label { display: grid; gap: 2px; min-width: 0; }
#plugin_chords .chords-controls select { width: 100%; min-width: 0; box-sizing: border-box; margin-bottom: 0; }
#plugin_chords .chords-keyboard { position: relative; height: 138px; touch-action: manipulation; }
#plugin_chords .chords-key { position: absolute; top: 0; height: 134px; margin: 0; padding: 0 0 12px; border: 1px solid #333333; border-radius: 0 0 4px 4px; background: white; color: #333333; display: flex; align-items: end; justify-content: center; box-sizing: border-box; cursor: pointer; font-size: 11px; touch-action: manipulation; transition: transform 60ms; }
#plugin_chords .chords-key.is-black { height: 85px; z-index: 1; background: #333333; color: white; padding-bottom: 10px; font-size: 9px; }
#plugin_chords .chords-key.in-chord::after { content: ''; position: absolute; left: calc(50% - 3px); bottom: 5px; width: 6px; height: 3px; background: #B7287E; }
#plugin_chords .chords-key.is-playing { transform: translateY(3px); background: #0585BA; color: white; }
#plugin_chords .chords-key { outline: none; }
#plugin_chords .chords-status { margin: 6px 0 0; height: 24px; display: flex; align-items: end; font-size: .85em; }
@media(prefers-reduced-motion: reduce) { #plugin_chords .chords-key { transition: none; } }