.piano-page-card {
  margin-bottom: 24px;
}

.piano-wrap {
  overflow-x: auto;
  display: flex;
  justify-content: center;
}

/* Yellow reads with strong contrast against both ivory white keys and
   near-black keys — the single-color choice accessibility guidance
   recommends for a highlight that has to work on both surfaces, and it's
   not otherwise used as a highlight color anywhere else in the app. */
.piano-key.is-pressed {
  background: linear-gradient(180deg, #ffe14d 0%, #f5c518 100%) !important;
  box-shadow: 0 0 0 2px rgba(255, 225, 77, 0.5);
  transform: scale(0.97);
}

.piano-key.is-pressed .piano-key-label {
  color: #2a1a00;
}

.keyboard-map-hint {
  margin: 16px 2px 0;
  color: var(--muted);
  line-height: 1.6;
}

@media (max-width: 760px) {
  .toolbar-actions {
    width: 100%;
  }

  .mode-toggle {
    width: 100%;
    justify-content: center;
  }
}