.webaudio-piano { max-width:900px; margin:20px auto; text-align:center; font-family: Arial, sans-serif; }
.wap-header h2 { margin: 6px 0 12px 0; font-size:18px; }
#piano-container { display:flex; justify-content:center; flex-wrap:wrap; gap:6px; padding:10px; border:1px solid #eee; border-radius:6px; background: #fafafa; }
.wap-controls { margin-top:10px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.wap-btn { padding:8px 12px; border-radius:6px; border:1px solid #ccc; background:#fff; cursor:pointer; }
.wap-feedback { margin-top:8px; min-height:18px; color:#333; font-size:14px; }
.wap-key { padding:18px 10px; border-radius:4px; background:#fff; border:1px solid #d9d9d9; box-shadow: 0 1px 0 rgba(0,0,0,0.03); cursor:pointer; min-width:48px; text-align:center; }
.wap-key.active { background:#ffd; transform:translateY(2px); box-shadow:none; }
.wap-key.learn { background:#cfefff; border-color:#7fbff0; }
@media (max-width:600px){
  .wap-key { padding:14px 8px; min-width:42px; font-size:12px; }
}