.notes-line {
  text-align: center; font-family: var(--serif); font-size: 1.4rem;
  font-weight: 700; color: var(--primary); min-height: 1.6em; margin: 6px 0 16px;
}
.piano {
  position: relative; display: flex; height: 180px;
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  user-select: none;
}
.key {
  position: relative; flex: 1; background: #fff; border-right: 1px solid #e2ddd2;
  cursor: pointer; display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 8px; font-size: 0.65rem; color: #b8b2a6;
}
.key.black {
  position: absolute; top: 0; width: 5.5%; height: 62%; background: #16181d;
  border-radius: 0 0 4px 4px; z-index: 2; color: #6b6f76;
}
.key.active { background: var(--primary-soft); }
.key.black.active { background: var(--primary); }
.key.root.active { background: #f59e0b; color: #fff; }