:root{
  --wp-piano-width: 100%;
  --wp-piano-height: 240px;
  --wp-radius: 12px;
  --wp-gap: 3px;
  --wp-border: 1px;
  --wp-shadow: 0 6px 18px rgba(0,0,0,.06);
  --wp-white: #ffffff;
  --wp-white-hover: #f5f9ff;
  --wp-white-active: #eaf2ff;
  --wp-black: #0f0f12;
  --wp-black-hover: #17181b;
  --wp-black-active: #22232a;
  --wp-dark: false;
}
.wp-piano-wrapper{
  width: var(--wp-piano-width);
  max-width: 100%;
  margin: 16px auto;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.wp-piano{
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  height: var(--wp-piano-height);
  background: color-mix(in srgb, #fff 92%, #f4f6f8);
  border: var(--wp-border) solid #e5e7eb;
  border-radius: var(--wp-radius);
  padding: var(--wp-gap);
  box-shadow: var(--wp-shadow);
}
/* Dark surface variant */
.wp-piano-wrapper[style*="--wp-dark:true"] .wp-piano{
  background: #0b0c10;
  border-color: #1f2937;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
/* White keys */
.wp-piano-white{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--wp-gap);
  height: 100%;
}
.wp-key.white{
  position: relative;
  border: var(--wp-border) solid #e5e7eb;
  background: var(--wp-white);
  border-radius: calc(var(--wp-radius) - var(--wp-gap)) calc(var(--wp-radius) - var(--wp-gap)) 10px 10px;
  transition: background .12s ease, transform .04s ease, box-shadow .12s ease, border-color .12s ease;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.06);
  font-size: 12px;
}
.wp-key.white:hover{ background: var(--wp-white-hover); }
.wp-key.white:active,
.wp-key.white.active{ background: var(--wp-white-active); transform: translateY(1px); border-color: #d1d5db; }
/* Dark tweak */
.wp-piano-wrapper[style*="--wp-dark:true"] .wp-key.white{
  border-color:#2a2f3a; background:#f8fafc;
}
/* Black keys overlay */
.wp-piano-black{
  pointer-events: none;
  position: absolute;
  top: calc(var(--wp-gap) + 1px);
  left: calc(var(--wp-gap) + 1px);
  right: calc(var(--wp-gap) + 1px);
  height: calc(var(--wp-piano-height) * 0.58);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}
.wp-key.black{
  pointer-events: auto;
  justify-self: start;
  width: 60%;
  margin-left: -18%;
  height: 100%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--wp-black) 98%, #fff 2%), var(--wp-black));
  border: var(--wp-border) solid #0d0d10;
  border-radius: 0 0 10px 10px;
  color: #e5e7eb;
  font-size: 10px;
  transition: background .12s ease, transform .04s ease, box-shadow .12s ease, border-color .12s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.wp-key.black:hover{ background: var(--wp-black-hover); }
.wp-key.black:active,
.wp-key.black.active{ background: var(--wp-black-active); transform: translateY(1px); border-color:#17171b; }
.wp-piano-wrapper[style*="--wp-dark:true"] .wp-key.black{
  border-color:#1b1c22; box-shadow: 0 8px 20px rgba(0,0,0,.45);
}

/* Focus */
.wp-key:focus{ outline: 2px solid #93c5fd; outline-offset: 2px; }

.wp-piano-help{ margin-top: 8px; color:#6b7280; font-size:12px; }
.wp-piano-wrapper[style*="--wp-dark:true"] .wp-piano-help{ color:#94a3b8; }

/* Mitra card */
.wp-mitra-panel{ margin-top: 14px; transition: opacity .2s ease; opacity: 0; }
.wp-mitra-panel.show{ opacity: 1; }
.wp-mitra-card{
  border: 1px solid #e5e7eb;
  background: #fafafa;
  border-radius: 12px;
  padding: 12px;
}
.wp-piano-wrapper[style*="--wp-dark:true"] .wp-mitra-card{
  background:#0e1116; border-color:#1f2937; color:#e5e7eb;
}
.wp-mitra-title{ font-weight: 700; font-size: 18px; margin-bottom: 4px; }
.wp-mitra-sub{ color: #4b5563; font-size: 13px; margin-bottom: 8px; }
.wp-piano-wrapper[style*="--wp-dark:true"] .wp-mitra-sub{ color:#9ca3af; }
.wp-mitra-notes{ font-size: 14px; margin-bottom: 10px; }
.wp-mitra-bars{ display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 8px; }
.wp-mitra-bars div{ display: flex; align-items: center; gap: 6px; font-size: 12px; }
.wp-mitra-bars em{
  display: inline-block; height: 6px; width: 100%;
  background: #e5e7eb; border-radius: 999px; position: relative;
}
.wp-mitra-bars em::after{
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: calc((var(--v, 0) / 5) * 100%); background: #111; border-radius: 999px;
}
.wp-mitra-desc{ margin: 8px 0 0 0; font-size: 13px; color: #374151; }

@media (max-width: 600px){
  .wp-piano{ height: calc(var(--wp-piano-height) - 40px); }
  .wp-mitra-bars{ grid-template-columns: 1fr; }
}