.mpo-modal.shared-keyboard .hk-key { color: #000; }

/* Double the original 52px / 7vh / 80px height, then add 80% for whites. */
.mpo-modal.shared-keyboard .kc-group {
  grid-template-columns: repeat(var(--piano-columns, 50), minmax(0, 1fr));
  gap: 0; align-items: start; isolation: isolate;
}
.mpo-modal.shared-keyboard .kc-group .kc-btn {
  grid-row: 1; min-width: 0; width: 100%; margin: 0;
  height: clamp(104px, 14vh, 160px);
  align-items: flex-end; padding: 0 1px 12px;
  border-radius: 0 0 5px 5px;
}
.mpo-modal.shared-keyboard .kc-group .kc-btn.is-white {
  height: clamp(187.2px, 25.2vh, 288px); z-index: 0;
}
.mpo-modal.shared-keyboard .kc-group .kc-btn.is-black {
  z-index: 1; box-shadow: 0 3px 3px #0004;
}
.mpo-modal.shared-keyboard .kc-group .kc-btn:focus-visible { z-index: 2; outline-offset: -3px; }
.mpo-modal.shared-keyboard .keyboard-controls .kc-group .kc-btn.kc-chord-active {
  background: #ffe234;
  color: #000;
  border-color: #c9a900;
}

/* Keep Db/Eb/Gb/Ab/Bb intact instead of wrapping the accidental below. */
.piano-black-label > span { display: block; white-space: nowrap; overflow-wrap: normal; }

.mpo-modal.shared-keyboard #kb-host .solfege-wrap {
  display: grid; grid-template-columns: repeat(var(--solfege-count, 13), minmax(0, 1fr)); gap: 3px;
}
.mpo-modal.shared-keyboard #kb-host .solfege-wrap button {
  height: 44px; min-width: 0; aspect-ratio: auto; padding: 2px;
  font-size: clamp(11px, 1.4vw, 18px);
}
.mpo-modal.shared-keyboard .harmony-controls select { min-height: 44px; font-size: 18px; }
.mpo-modal.shared-keyboard .harmony-keyboard .hk-key {
  height: clamp(48px, 6vh, 70px); aspect-ratio: auto; font-size: 24px;
}
.mpo-modal.shared-keyboard .kc-group .kc-btn { font-size: clamp(11px, 1.4vw, 20px); }
.mpo-modal-backdrop .mpo-modal.shared-keyboard { max-width: min(1400px, 95vw); }

.mpo-modal.shared-keyboard .harmony-panel { margin: 0; }
.mpo-modal.shared-keyboard .keyboard-mode-controls { display: flex; justify-content: flex-end; margin: 8px 0; }
.mpo-modal.shared-keyboard .keyboard-tone-mode {
  min-height: 44px; padding: 8px 14px; border: 1px solid #777;
  border-radius: 8px; background: #fff; color: #111; cursor: pointer;
}
.mpo-modal.shared-keyboard .keyboard-tone-mode[aria-pressed="true"] { background: #ffe234; border-color: #c9a900; }
.mpo-modal.shared-keyboard .harmony-controls { margin-bottom: 8px; }
@media (max-width: 750px) {
  .mpo-modal.shared-keyboard .harmony-controls { grid-template-columns: 1fr; }
}