/* Курс фортепиано: клавиатура SVG, схема аккорда на две руки. Поверх css/guitar.css. */
body.piano:not(.mode-keys) .keys-only { display: none; }

/* Клавиатура */
.kb-svg { width: 100%; height: auto; display: block; margin: 6px 0; }
.kb-board { max-height: 150px; }
.kb-white { fill: #fbfaf6; stroke: #777; stroke-width: 1; }
.kb-black { fill: #1b1d21; stroke: #000; stroke-width: 1; }
.kb-white.kb-target { fill: var(--blow-soft); }
.kb-white.kb-next { fill: var(--bg); }
.kb-white.kb-heard { fill: var(--scale); }
.kb-white.kb-root, .kb-white.kb-scale { fill: var(--draw-soft); }
.kb-white.kb-weak { fill: #f6d6d6; }
.kb-black.kb-target { fill: var(--blow); }
.kb-black.kb-heard { fill: var(--heard); }
.kb-black.kb-root, .kb-black.kb-scale { fill: var(--draw); }
.kb-black.kb-weak { fill: var(--bad); }
.kb-mark { stroke-width: 2; }
.kb-mark.target { fill: var(--blow); stroke: var(--blow); }
.kb-mark.next { fill: #fff; stroke: var(--blow); stroke-dasharray: 3 2; }
.kb-mark.heard { fill: var(--heard); stroke: var(--heard); }
.kb-mark.root, .kb-mark.scale { fill: var(--draw); stroke: var(--draw); }
.kb-mark.weak { fill: var(--bad); stroke: var(--bad); }
.kb-label { font: 700 10px system-ui, sans-serif; fill: #fff; pointer-events: none; }
.kb-mark.next + .kb-label { fill: var(--text); }
.kb-c { font: 600 10px system-ui, sans-serif; fill: var(--muted); }

/* Схема аккорда: имя над маленькой клавиатурой. */
.kb-chord { width: 260px; max-width: 100%; }
.kb-chord .cd-name { font: 700 15px system-ui, sans-serif; color: var(--text); text-align: center; }
.lane-cd .kb-chord { width: 120px; }
.lane-cd .kb-chord .cd-name { display: none; }
.lane-cd .kb-chord .kb-c { display: none; }
#gxLane .lane-chord { padding-top: 2px; }

/* Лента: нота фортепиано — цветом инструмента. */
.piano .lane-note.pluck { background: var(--draw); }
.piano .g-chord-grid { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }