/* 触摸优化：禁止默认手势（滚动/缩放）与点击高亮 */
.key-white, .key-black {
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

/* ============================================================
   Piano
   ============================================================ */
.piano-wrap { position: relative; width: 100%; display: flex; justify-content: center; overflow-x: auto; }
.piano {
  display: flex; position: relative; height: 210px;
  --kw: 46px; --kb: 30px; --pad: 12px;
  background:
    linear-gradient(180deg, oklch(30% 0.02 258), oklch(22% 0.015 258) 30%, transparent 30%);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 18px 30px -14px oklch(0% 0 0 / 0.6);
  padding-top: var(--pad);
}
.key-white {
  width: var(--kw); height: 100%; flex-shrink: 0;
  background: linear-gradient(180deg, oklch(98% 0.003 95) 0%, oklch(93% 0.005 95) 70%, oklch(89% 0.006 95) 100%);
  border: 1px solid oklch(76% 0.005 260);
  border-top: 0; border-radius: 0 0 5px 5px;
  cursor: pointer; position: relative; z-index: 1;
  transition: background 0.08s, transform 0.06s;
  box-shadow: inset 0 -4px 8px -2px oklch(70% 0.01 95 / 0.5);
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 13px;
}
.key-white:hover { background: linear-gradient(180deg, oklch(96% 0.005 92), oklch(90% 0.007 92)); }
.key-white:active,
.key-white.pressed {
  background: linear-gradient(180deg, oklch(90% 0.02 88), oklch(82% 0.03 85));
  box-shadow: inset 0 6px 14px oklch(50% 0.02 80 / 0.4), inset 0 -2px 4px oklch(82% 0.14 86 / 0.4);
}
.key-white .hint {
  font-size: 11px; color: oklch(48% 0.01 260);
  font-family: var(--font-body); font-weight: 600; pointer-events: none;
}
.key-black {
  width: var(--kb);
  height: calc((100% - var(--pad)) * 0.62);
  background: linear-gradient(180deg, oklch(30% 0.012 260) 0%, oklch(16% 0.01 260) 55%, oklch(11% 0.008 258) 100%);
  border-radius: 0 0 4px 4px;
  position: absolute; top: var(--pad);
  left: calc((var(--after) + 1) * var(--kw) - var(--kb) / 2);
  z-index: 2; cursor: pointer;
  transition: background 0.08s, transform 0.06s;
  box-shadow:
    inset 0 1px 0 oklch(46% 0.012 260 / 0.9),
    inset 0 -4px 6px oklch(0% 0 0 / 0.7),
    0 4px 7px -1px oklch(0% 0 0 / 0.5);
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 9px;
}
.key-black:hover { background: linear-gradient(180deg, oklch(36% 0.013 260), oklch(20% 0.011 260)); }
.key-black:active,
.key-black.pressed {
  background: linear-gradient(180deg, oklch(40% 0.02 70), oklch(24% 0.02 70));
  box-shadow:
    inset 0 2px 6px oklch(0% 0 0 / 0.7),
    0 0 14px oklch(82% 0.14 86 / 0.45);
}
.key-black .hint {
  font-size: 10px; color: oklch(62% 0.01 90);
  font-family: var(--font-body); font-weight: 600; pointer-events: none;
}

/* ============================================================
   键盘响应式
   ============================================================ */
@media (max-width: 900px) {
  .piano { --kw: 40px; --kb: 27px; height: 190px; }
}
@media (max-width: 768px) {
  .piano { --kw: 34px; --kb: 24px; height: 168px; }
}
@media (max-width: 520px) {
  .piano { --kw: 24px; --kb: 18px; height: 150px; --pad: 10px; }
  .key-white .hint, .key-black .hint { font-size: 9px; }
}