:root {
    --white: #fff;
    --black: #111;
    --border: #ccc;
    --highlight: #ffd54f;
    --bg: #f6f7fb;
}
html, body {
    margin: 0;
    background: var(--bg);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    color: #222;
}
header { text-align: center; padding: 12px 8px; }
.wrap { max-width: 1000px; margin: 0 auto 24px; padding: 0 8px; }

.white-key { fill: var(--white); stroke: var(--border); }
.black-key { fill: var(--black); }
.white-key.active { fill: var(--highlight); filter: drop-shadow(0 0 5px var(--highlight)); box-shadow: 0 0 10px var(--highlight); }
.black-key.active { fill: var(--highlight); filter: drop-shadow(0 0 5px var(--highlight)); box-shadow: 0 0 10px var(--highlight); }

#piano { width: 100%; height: auto; display: block; }
.label { font: 12px sans-serif; fill: #666; user-select: none; pointer-events: none; }

.hide-labels .label {
  display: none;
}

.center {
    text-align: center;
}