.ppiano {
  --ppiano-white-width: 54px;
  --ppiano-black-width: 34px;
  --ppiano-key-height: 210px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 1.5rem 0;
  padding: clamp(14px, 2.5vw, 24px);
  color: #202532;
  background: linear-gradient(145deg, #f7f8fb, #e9edf4);
  border: 1px solid #d9deea;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(28, 39, 60, .10);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.ppiano *, .ppiano *::before, .ppiano *::after { box-sizing: border-box; }
.ppiano__header, .ppiano__controls, .ppiano__footer {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.ppiano__header { flex-wrap: wrap; margin-bottom: 16px; }
.ppiano__title { margin: 0 0 4px; color: #202532; font-size: clamp(1.25rem, 3vw, 1.7rem); line-height: 1.2; }
.ppiano__hint, .ppiano__keyboard-help { margin: 0; color: #596273; font-size: .9rem; }
.ppiano__controls { flex-wrap: wrap; }
.ppiano__volume-label { display: flex; align-items: center; gap: 8px; color: #3e4655; font-size: .85rem; }
.ppiano__volume { width: 105px; accent-color: #4b62d1; }
.ppiano button { font: inherit; cursor: pointer; }
.ppiano__sustain, .ppiano__labels {
  border: 1px solid #c7cede; border-radius: 999px; padding: 8px 13px;
  background: #fff; color: #30394a; font-size: .82rem;
}
.ppiano__sustain[aria-pressed="true"] { background: #e6eaff; border-color: #8999ed; }
.ppiano__keyboard-wrap { overflow-x: auto; padding: 8px 3px 12px; scrollbar-width: thin; }
.ppiano__keyboard {
  position: relative; display: flex; align-items: flex-start;
  width: max-content; min-width: 100%; height: var(--ppiano-key-height);
  user-select: none; touch-action: pan-x;
}
.ppiano__key {
  position: relative; flex: none; border: 1px solid #aeb5c2;
  padding: 0; margin: 0; touch-action: none; outline-offset: -4px;
}
.ppiano__key--white {
  z-index: 1; width: var(--ppiano-white-width); height: var(--ppiano-key-height);
  margin-right: -1px; border-radius: 0 0 7px 7px;
  background: linear-gradient(180deg, #fff 0%, #fff 78%, #edf0f5 100%);
  box-shadow: 0 4px 0 #cbd0d9, 0 5px 7px rgba(25, 35, 50, .12);
}
.ppiano__key--white.is-active {
  background: linear-gradient(180deg, #e7ebff, #cbd4ff);
  transform: translateY(2px); box-shadow: 0 2px 0 #aab5dc;
}
.ppiano__key--black {
  z-index: 2; width: var(--ppiano-black-width); height: calc(var(--ppiano-key-height) * .62);
  margin-left: calc(var(--ppiano-black-width) / -2); margin-right: calc(var(--ppiano-black-width) / -2);
  border: 1px solid #090d16; border-radius: 0 0 5px 5px;
  background: linear-gradient(90deg, #101522, #343b4a 48%, #111622);
  box-shadow: 0 4px 0 #080b12, 0 5px 7px rgba(0,0,0,.25);
}
.ppiano__key--black.is-active {
  background: linear-gradient(90deg, #34447e, #6276c5, #34447e);
  transform: translateY(2px); box-shadow: 0 2px 0 #202d58;
}
.ppiano__key-name { position: absolute; bottom: 24px; left: 0; right: 0; text-align: center; font-size: 11px; color: #7a8290; }
.ppiano__key--black .ppiano__key-name { bottom: 13px; color: #d9def0; font-size: 9px; }
.ppiano__computer-key { position: absolute; bottom: 7px; left: 0; right: 0; text-align: center; color: #a1a8b5; font-size: 9px; font-weight: 700; }
.ppiano__key--black .ppiano__computer-key { bottom: 4px; color: #aeb8d5; }
.ppiano--hide-labels .ppiano__key-name { display: none; }
.ppiano__footer { margin: 8px 0 10px; flex-wrap: wrap; }
.ppiano__note { min-height: 1.3em; color: #354b9c; font-size: .9rem; font-weight: 650; }
.ppiano__keyboard-help { font-size: .78rem; }
@media (max-width: 600px) {
  .ppiano { --ppiano-white-width: 43px; --ppiano-black-width: 28px; --ppiano-key-height: 175px; }
  .ppiano__header { align-items: flex-start; }
  .ppiano__controls { width: 100%; justify-content: flex-start; }
}