.piano {
  position: relative;
  display: flex;
  gap: var(--space-3xs);
  width: 100%;
  height: var(--piano-height, 200px);
  padding: var(--space-2xs);
  border-radius: var(--radius-card-inner);
  background: var(--color-paper-4);
  user-select: none;
  touch-action: manipulation;
}
.piano--hero { --piano-height: clamp(180px, 25vw, 370px); }
.piano--lesson { --piano-height: clamp(150px, 18vw, 220px); }
.piano--studio { --piano-height: 170px; }
.pkey {
  position: relative;
  min-width: 0;
  padding: 0;
  border: 0;
  font-family: var(--font-body);
  cursor: pointer;
}
.pkey:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; z-index: 5; }
.pkey--white {
  flex: 1 1 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  padding-bottom: var(--space-xs);
  border-radius: 4px 4px 8px 8px;
  background: var(--color-card);
  color: var(--color-card-ink);
  box-shadow: inset 0 -4px 0 var(--key-white-edge);
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.pkey--white:hover { background: var(--color-ink-2); }
.pkey--white.is-scale { background: color-mix(in oklab, var(--color-accent) 42%, var(--color-card)); }
.pkey--white.is-root { box-shadow: inset 0 0 0 3px var(--color-accent), inset 0 -4px 0 var(--key-white-edge); }
.pkey--white.is-active,
.pkey--white.is-active:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.pkey--black {
  position: absolute;
  top: 6px;
  z-index: 2;
  width: calc(var(--w) * 1%);
  height: 62%;
  left: calc(var(--left) * 1%);
  border-radius: 3px 3px 6px 6px;
  background: var(--color-paper-4);
  color: var(--color-ink);
  box-shadow: inset 0 -3px 0 var(--key-black-edge);
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.pkey--black:hover { background: var(--color-paper-3); }
.pkey--black.is-scale { background: var(--color-accent-2); color: var(--color-accent-ink); }
.pkey--black.is-active,
.pkey--black.is-active:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.pkey__label {
  font-size: 0.6875rem;
  line-height: 1.1;
  font-weight: 700;
  pointer-events: none;
  display: grid;
  justify-items: center;
  gap: var(--space-3xs);
}
.pkey__ru { font-size: 0.6875rem; font-weight: 500; color: var(--color-card-muted); }
.pkey--black .pkey__label { color: var(--color-ink); font-size: 0.6875rem; padding-bottom: var(--space-2xs); }
.pkey--white.is-active .pkey__ru { color: var(--color-accent-ink); }
.pkey--black .pkey__ru { color: var(--color-muted); }

.keyboard-hint {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-sm);
  color: var(--color-muted);
  font-size: var(--text-xs);
}
.keyboard-hint kbd {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  min-height: 20px;
  padding: 0 var(--space-3xs);
  border: 1px solid var(--color-rule);
  border-radius: 4px;
  font: 700 0.6875rem/1 var(--font-body);
  color: var(--color-ink);
}

.staff-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-card-inner);
  background: var(--color-card);
  color: var(--color-card-ink);
  padding: var(--space-xs);
}
.staff-svg { width: 100%; min-width: 300px; height: auto; }
.staff-line { stroke: var(--color-card-muted); stroke-width: 1; }
.staff-ledger { stroke: var(--color-card-ink); stroke-width: 1.5; }
.staff-note { fill: var(--color-card-ink); stroke: var(--color-card-ink); }
.staff-note--open { fill: var(--color-card); stroke: var(--color-card-ink); stroke-width: 2; }
.staff-stem { stroke: var(--color-card-ink); stroke-width: 2; }
.staff-clef { fill: var(--color-card-ink); font-family: var(--font-music); }
.staff-label { fill: var(--color-card-muted); font-family: var(--font-body); font-size: 11px; font-weight: 700; }
.staff-accidental { fill: var(--color-card-ink); font-family: var(--font-music); font-size: 25px; }
.staff-readout { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.note-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 34px;
  padding: 0 var(--space-sm);
  border-radius: var(--radius-pill);
  background: var(--color-paper-3);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-ink);
}
.note-chip--accent { background: var(--color-accent); color: var(--color-accent-ink); }
.note-chip--muted { color: var(--color-muted); font-weight: 500; }

.metro { display: grid; gap: var(--space-lg); }
.metro__top { display: flex; align-items: end; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
.metro__bpm { display: flex; align-items: baseline; gap: var(--space-xs); }
.metro__value { font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3.6rem); font-weight: var(--display-weight); line-height: 1; letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.metro__unit { color: var(--color-muted); font-size: var(--text-sm); font-weight: 700; }
.metro__beats { display: grid; grid-template-columns: repeat(var(--beats, 4), minmax(0, 1fr)); gap: var(--space-xs); }
.beat-pad {
  display: grid;
  place-items: center;
  min-height: 64px;
  border: var(--rule-bar) solid transparent;
  border-radius: var(--radius-card-inner);
  background: var(--color-paper-3);
  color: var(--color-muted);
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: var(--display-weight);
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.beat-pad[data-accent="true"] { border-color: var(--color-rule); }
.beat-pad.is-active { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
.metro__controls { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.metro__slider { display: grid; gap: var(--space-2xs); }
.metro__slider input { width: 100%; min-height: 32px; accent-color: var(--color-accent); }
.metro__slider label { color: var(--color-muted); font-size: var(--text-xs); font-weight: 700; }
.metro__range-labels { display: flex; justify-content: space-between; color: var(--color-muted); font-size: var(--text-xs); }
.metro__tap { display: grid; gap: var(--space-2xs); }
.metro__message { min-height: 1lh; color: var(--color-muted); font-size: var(--text-sm); }

.duration-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xs); }
.duration-card {
  display: grid;
  gap: var(--space-xs);
  align-content: start;
  min-height: 150px;
  padding: var(--space-md);
  border: var(--rule-bar) solid var(--color-rule);
  border-radius: var(--radius-card-inner);
  background: var(--color-paper-3);
  color: var(--color-ink);
  text-align: left;
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.duration-card:hover { background: var(--color-paper-2); border-color: var(--color-accent); }
.duration-card.is-active { border-color: var(--color-accent); background: var(--color-paper-2); color: var(--color-ink); }
.duration-card__bar { display: flex; gap: var(--space-3xs); height: 24px; }
.duration-card__cell { flex: 1; border-radius: 3px; background: var(--color-paper); color: var(--color-ink); }
.duration-card__cell.is-on { background: var(--color-accent); }
.duration-card__name { font-family: var(--font-display); font-size: 1.1rem; font-weight: var(--display-weight); letter-spacing: var(--tracking-display); }
.duration-card__meta { color: var(--color-muted); font-size: var(--text-xs); }
.duration-card__play { color: var(--color-accent); font-size: var(--text-xs); font-weight: 700; }

.rhythm-builder { display: grid; gap: var(--space-md); }
.rhythm-presets { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.seg { display: inline-flex; flex-wrap: wrap; gap: var(--space-2xs); }
.seg__btn {
  min-height: 40px;
  padding: 0 var(--space-sm);
  border: var(--rule-bar) solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 700;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.seg__btn:hover { background: var(--color-paper-3); color: var(--color-ink); }
.seg__btn[aria-pressed="true"], .seg__btn.is-active { border-color: var(--color-accent); background: var(--color-paper-3); color: var(--color-ink); }
.rhythm-palette { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.rhythm-track {
  display: flex;
  gap: var(--space-3xs);
  min-height: 78px;
  padding: var(--space-2xs);
  border-radius: var(--radius-small);
  background: var(--color-paper-3);
  overflow: hidden;
}
.rhythm-block {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  border: 0;
  border-radius: 8px;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-size: var(--text-xs);
  font-weight: 700;
  transition: background-color var(--dur-micro) var(--ease-out);
}
.rhythm-block:hover { background: var(--color-accent-2); }
.rhythm-block--rest { background: var(--color-paper); color: var(--color-muted); }
.rhythm-block--rest:hover { background: var(--color-paper-2); }
.rhythm-block.is-playing { box-shadow: inset 0 0 0 3px var(--color-focus); }
.rhythm-empty { display: grid; place-items: center; width: 100%; color: var(--color-muted); font-size: var(--text-sm); }
.rhythm-total { display: flex; justify-content: space-between; gap: var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); }
.rhythm-total strong { color: var(--color-ink); font-variant-numeric: tabular-nums; }
.rhythm-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.rhythm-feedback { min-height: 1lh; color: var(--color-muted); font-size: var(--text-sm); }
.rhythm-feedback[data-tone="error"] { color: var(--color-error); }
.rhythm-notation { background: var(--color-card); color: var(--color-card-ink); border-radius: var(--radius-card-inner); padding: var(--space-xs); overflow-x: auto; }
.rhythm-svg { width: 100%; min-width: 420px; height: auto; }
.rhythm-line { stroke: var(--color-card-muted); stroke-width: 1; }
.rhythm-note { fill: var(--color-card-ink); }
.rhythm-stem { stroke: var(--color-card-ink); stroke-width: 2; }
.rhythm-beam { stroke: var(--color-card-ink); stroke-width: 3; }
.rhythm-rest { fill: var(--color-card-muted); font-family: var(--font-music); font-size: 26px; }
.rhythm-beat-label { fill: var(--color-card-muted); font-family: var(--font-body); font-size: 11px; font-weight: 700; }

.control-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }
.control-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.control-grid .field { min-width: 0; }
.note-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.scale-steps { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.step-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--space-sm);
  border-radius: var(--radius-pill);
  background: var(--color-paper-3);
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
}
.step-chip--half { background: var(--color-accent); color: var(--color-accent-ink); }
.degree-row { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.degree {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  min-height: 42px;
  padding: 0 var(--space-xs);
  border-radius: var(--radius-input);
  background: var(--color-paper-3);
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 700;
}
.degree.is-root { background: var(--color-accent); color: var(--color-accent-ink); }
.widget-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }

.interval-stage { display: grid; gap: var(--space-sm); padding: var(--space-md); border-radius: var(--radius-small); background: var(--color-paper-3); }
.interval-notes { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.interval-arrow { color: var(--color-accent); font-family: var(--font-display); font-size: var(--text-title); }
.interval-name { font-family: var(--font-display); font-size: var(--text-title); font-weight: var(--display-weight); letter-spacing: var(--tracking-display); }
.interval-meta { color: var(--color-muted); font-size: var(--text-sm); }
.ear-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
.ear-option {
  min-height: 48px;
  padding: var(--space-xs) var(--space-sm);
  border: var(--rule-bar) solid var(--color-rule);
  border-radius: var(--radius-input);
  background: transparent;
  color: var(--color-muted);
  font-weight: 700;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.ear-option:hover { background: var(--color-paper-3); color: var(--color-ink); }
.ear-option.is-correct { border-color: var(--color-success); background: var(--color-success); color: var(--color-success-ink); }
.ear-option.is-wrong { border-color: var(--color-error); background: var(--color-error); color: var(--color-error-ink); }
.ear-feedback { min-height: 1lh; color: var(--color-muted); font-size: var(--text-sm); }
.ear-feedback[data-tone="ok"] { color: var(--color-accent); }
.ear-feedback[data-tone="error"] { color: var(--color-error); }

.chord-summary { display: grid; gap: var(--space-sm); padding: var(--space-md); border-radius: var(--radius-card-inner); background: var(--color-paper-3); }
.chord-summary__title { font-family: var(--font-display); font-size: var(--text-title); font-weight: var(--display-weight); letter-spacing: var(--tracking-display); }
.chord-formula { color: var(--color-muted); font-size: var(--text-sm); }
.chord-formula strong { color: var(--color-accent); }
.inversion-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

.prog-bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xs); }
.prog-bar {
  display: grid;
  gap: var(--space-2xs);
  align-content: start;
  min-height: 150px;
  padding: var(--space-md);
  border: var(--rule-bar) solid transparent;
  border-radius: var(--radius-card-inner);
  background: var(--color-paper-3);
  color: var(--color-ink);
  text-align: left;
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.prog-bar:hover { background: var(--color-paper-2); }
.prog-bar.is-active { border-color: var(--color-accent); background: var(--color-paper-4); }
.prog-bar__roman { color: var(--color-accent); font-family: var(--font-display); font-size: var(--text-title); font-weight: var(--display-weight); }
.prog-bar__name { font-family: var(--font-display); font-size: var(--text-title); font-weight: var(--display-weight); letter-spacing: var(--tracking-display); }
.prog-bar__notes { color: var(--color-muted); font-size: var(--text-xs); line-height: 1.5; }
.prog-bar__lines { display: grid; gap: var(--space-2xs); margin-top: var(--space-xs); }
.prog-bar__line { height: 6px; border-radius: var(--radius-pill); background: var(--color-rule); }
.prog-bar__line:nth-child(2) { width: 78%; }
.prog-bar__line:nth-child(3) { width: 56%; }

.trainer { display: grid; gap: var(--space-md); }
.trainer__prompt { display: flex; align-items: baseline; gap: var(--space-sm); flex-wrap: wrap; }
.trainer__target { font-family: var(--font-display); font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: var(--display-weight); letter-spacing: var(--tracking-display); }
.trainer__hint { color: var(--color-muted); font-size: var(--text-sm); }
.trainer__stats { display: flex; flex-wrap: wrap; gap: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }
.trainer__stats strong { color: var(--color-ink); font-variant-numeric: tabular-nums; }
.trainer__feedback { min-height: 1lh; color: var(--color-muted); font-size: var(--text-sm); }
.trainer__feedback[data-tone="ok"] { color: var(--color-accent); font-weight: 700; }
.trainer__feedback[data-tone="error"] { color: var(--color-error); }
.trainer__answers { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.trainer__answer {
  min-width: 52px;
  min-height: 44px;
  padding: 0 var(--space-sm);
  border: var(--rule-bar) solid var(--color-rule);
  border-radius: var(--radius-input);
  background: transparent;
  color: var(--color-muted);
  font-weight: 700;
}
.trainer__answer:hover { background: var(--color-paper-3); color: var(--color-ink); }
.trainer__answer.is-correct { background: var(--color-success); color: var(--color-success-ink); border-color: var(--color-success); }
.trainer__answer.is-wrong { background: var(--color-error); color: var(--color-error-ink); border-color: var(--color-error); }

.roll {
  border-radius: var(--radius-card-inner);
  background: var(--color-paper-3);
  overflow: hidden;
  min-width: 0;
  padding: var(--space-3xs) var(--space-xs) var(--space-xs);
}
.roll__scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.roll__inner { display: grid; grid-template-columns: 54px minmax(0, 1fr); min-width: 760px; }
.roll__corner { border-bottom: var(--rule-hair) solid var(--color-rule); }
.roll__ruler {
  display: grid;
  grid-template-columns: repeat(32, minmax(0, 1fr));
  height: 26px;
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.roll__ruler span { display: grid; place-items: center; color: var(--color-muted); font-size: 0.625rem; font-weight: 700; border-left: 1px solid var(--color-rule); }
.roll__ruler span:first-child { border-left: 0; }
.roll__ruler span[data-bar] { grid-column: span 8; justify-items: start; padding-left: var(--space-2xs); color: var(--color-ink); }
.roll__labels { display: grid; grid-template-rows: repeat(36, 1fr); height: 504px; }
.roll__label { display: flex; align-items: center; padding-left: var(--space-2xs); color: var(--color-muted); font-size: 0.625rem; line-height: 1; border-top: 1px solid color-mix(in oklab, var(--color-rule) 40%, transparent); }
.roll__label[data-c="true"] { color: var(--color-ink); font-weight: 700; }
.roll__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(32, minmax(0, 1fr));
  grid-template-rows: repeat(36, 1fr);
  height: 504px;
  background: var(--color-paper-4);
}
.roll-cell {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid color-mix(in oklab, var(--color-rule) 35%, transparent);
  border-top: 1px solid color-mix(in oklab, var(--color-rule) 30%, transparent);
  background: transparent;
}
.roll-cell[data-bar-start="true"] { border-left: 2px solid var(--color-rule); }
.roll-cell[data-black="true"] { background: color-mix(in oklab, var(--color-paper-4) 70%, var(--color-paper-3)); }
.roll-cell:hover { background: var(--color-paper-2); }
.roll-cell:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; z-index: 3; }
.roll-note {
  position: absolute;
  z-index: 2;
  height: calc(100% / 36 - 2px);
  margin-top: 1px;
  border-radius: 4px;
  background: var(--color-accent);
  opacity: 0.92;
  pointer-events: none;
}
.roll-note--guide { background: var(--color-rule); opacity: 0.45; }
.roll-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  width: calc(100% / 32);
  border-left: 2px solid var(--color-focus);
  background: color-mix(in oklab, var(--color-focus) 18%, transparent);
  pointer-events: none;
  transform: translateX(calc(var(--step, 0) * 100%));
  display: none;
}
.roll-playhead.is-visible { display: block; }
.roll-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.roll-toolbar .seg { margin-inline-start: auto; }
.roll-hint { color: var(--color-muted); font-size: var(--text-xs); }
.roll-legend { display: flex; flex-wrap: wrap; gap: var(--space-sm); color: var(--color-muted); font-size: var(--text-xs); }
.roll-legend span { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.roll-legend i { width: 12px; height: 8px; border-radius: 2px; background: var(--color-accent); }

.stat-list { display: grid; gap: 0; }
.stat-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); padding-block: var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); font-size: var(--text-sm); }
.stat-row strong { color: var(--color-ink); font-variant-numeric: tabular-nums; }
.chord-guide { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.guide-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 36px;
  padding: 0 var(--space-sm);
  border: var(--rule-bar) solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 700;
}
.guide-chip:hover { background: var(--color-paper-3); color: var(--color-ink); }
.guide-chip.is-active { border-color: var(--color-accent); background: var(--color-paper-3); color: var(--color-ink); }

@media (max-width: 60rem) {
  .duration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prog-bars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio__keyboard .piano { --piano-height: 150px; }
}

@media (max-width: 40rem) {
  .pkey__ru { display: none; }
  .pkey--black .pkey__label { display: none; }
  .duration-grid { grid-template-columns: minmax(0, 1fr); }
  .duration-card { min-height: 0; }
  .control-grid, .control-grid--two { grid-template-columns: minmax(0, 1fr); }
  .ear-options { grid-template-columns: minmax(0, 1fr); }
  .prog-bars { grid-template-columns: minmax(0, 1fr); }
  .prog-bar { min-height: 0; }
  .metro__top { align-items: start; flex-direction: column; }
  .beat-pad { min-height: 52px; }
  .roll__inner { min-width: 720px; }
  .studio__keyboard .piano { --piano-height: 130px; }
}

/* Readouts, trainer finishes and small controls that sit inside widgets. */
.note-explorer { display: grid; gap: var(--space-md); }
.coverage-readout { display: grid; gap: var(--space-xs); padding: var(--space-md); border-radius: var(--radius-card-inner); background: var(--color-paper-3); }
.coverage-readout__note { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.coverage-readout__meta { display: flex; flex-wrap: wrap; gap: var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.trainer__finish { display: grid; gap: var(--space-xs); padding: var(--space-lg); min-height: 180px; align-content: center; justify-items: center; text-align: center; }
.trainer__finish .trainer__target { font-size: clamp(2rem, 4vw, 3.2rem); }
.degree.is-playing { background: var(--color-accent); color: var(--color-accent-ink); }
.rhythm-note--open { fill: var(--color-card); stroke: var(--color-card-ink); stroke-width: 2; }
.studio-transport { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.studio-transport .bpm { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--color-muted); font-size: var(--text-sm); font-weight: 700; }
.studio-transport input[type="number"] { width: 5.5ch; min-height: 40px; padding: 0 var(--space-xs); border: var(--rule-bar) solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-paper-3); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.composer-widget { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.composer-widget .studio-panel__head { margin-bottom: 0; }
.composer-widget .studio-transport { justify-content: space-between; }
.composer-widget .roll-toolbar { margin-bottom: var(--space-xs); }
.studio-side-card .btn { justify-self: start; }
.studio-side-card .field { font-size: var(--text-xs); }

.piano--static { pointer-events: none; }
.piano--static .pkey { cursor: default; }

.drum-pads-wrap { display: grid; gap: var(--space-sm); }
.drum-pads { display: grid; gap: var(--space-xs); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.drum-pads--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.drum-pads--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.drum-pad {
  display: grid;
  align-content: space-between;
  gap: var(--space-md);
  min-height: 104px;
  padding: var(--space-sm);
  border: var(--rule-bar) solid var(--color-rule);
  border-radius: var(--radius-card-inner);
  background: var(--color-paper-2);
  color: var(--color-ink);
  text-align: left;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.drum-pad:hover { background: var(--color-paper-3); border-color: var(--color-accent); }
.drum-pad:active { transform: translateY(1px); }
.drum-pad.is-active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.drum-pad__name { font-family: var(--font-display); font-size: 1rem; font-weight: var(--display-weight); letter-spacing: var(--tracking-display); line-height: 1.1; }
.drum-pad__key { color: var(--color-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.drum-pad.is-active .drum-pad__key { color: var(--color-accent-ink); }
.drum-pad-foot { display: flex; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; }
.drum-pad-readout { color: var(--color-muted); font-size: var(--text-sm); }
.drum-game { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); min-width: 0; }
.drum-game__controls { min-width: 0; }
.drum-game__controls { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-sm); }
.drum-game__controls .field { min-width: 120px; }
.tempo-row { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.tempo-row input[type="range"] { width: 120px; accent-color: var(--color-accent); }
.tempo-row input[type="number"] { width: 5.5ch; min-height: 40px; padding: 0 var(--space-xs); border: var(--rule-bar) solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-paper-3); color: var(--color-ink); }
.tempo-row output { color: var(--color-ink); font-variant-numeric: tabular-nums; font-weight: 700; }
.drum-game__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm); align-items: center; }
.drum-game__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.step-scroll { overflow-x: auto; overscroll-behavior-x: contain; min-width: 0; }
.step-pattern { min-width: 620px; display: grid; gap: var(--space-2xs); }
.step-ruler { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-xs); align-items: end; }
.step-ruler-cells { display: grid; grid-template-columns: repeat(var(--steps, 16), minmax(0, 1fr)); gap: var(--space-3xs); }
.step-ruler-cells span { color: var(--color-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.step-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-xs); align-items: center; }
.step-lane-label { color: var(--color-muted); font-size: var(--text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step-cells { display: grid; grid-template-columns: repeat(var(--steps, 16), minmax(0, 1fr)); gap: var(--space-3xs); }
.step-cell {
  min-width: 0;
  min-height: 30px;
  padding: 0;
  border: 1px solid var(--color-rule);
  border-radius: 4px;
  background: var(--color-paper-4);
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.step-cell.is-on { border-color: var(--color-accent); background: var(--color-accent); }
.step-cell.is-ghost { border-color: var(--color-accent); background: color-mix(in oklab, var(--color-accent) 35%, var(--color-paper-4)); }
.step-cell.is-current { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.step-cell:hover { border-color: var(--color-focus); }
button.step-cell:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.rudiment { display: grid; gap: var(--space-md); }
.rudiment__sticks { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: var(--space-2xs); }
.rudiment-stick { display: grid; place-items: center; min-height: 40px; border-radius: var(--radius-input); background: var(--color-paper-3); color: var(--color-muted); font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-sm); }
.rudiment-stick.is-current { background: var(--color-accent); color: var(--color-accent-ink); }
@media (max-width: 40rem) {
  .drum-pads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drum-pads--3, .drum-pads--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drum-pad { min-height: 88px; }
  .step-ruler, .step-row { grid-template-columns: 82px minmax(0, 1fr); }
  .rudiment__sticks { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}


@media (max-width: 60rem) {
  .drum-game__controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
  .drum-game__controls .field { min-width: 0; }
  .tempo-row input[type="range"] { width: 100%; }
}
@media (max-width: 40rem) {
  .drum-game__controls { grid-template-columns: minmax(0, 1fr); }
}

.fretboard { display: grid; gap: var(--space-md); }
.fretboard-scroll { overflow-x: auto; overscroll-behavior-x: contain; min-width: 0; }
.fretboard-grid { display: grid; gap: var(--space-3xs); min-width: 630px; }
.fretboard-quick .seg__btn { min-height: 44px; }
.fretboard-row { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: var(--space-xs); align-items: center; }
.fretboard-cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(34px, 1fr)); gap: var(--space-3xs); }
.fretboard-ruler .fretboard-cells span { color: var(--color-muted); font-size: var(--text-xs); text-align: center; font-variant-numeric: tabular-nums; }
.fretboard-label { color: var(--color-muted); font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--display-weight); }
.fretboard-cell {
  min-height: 40px;
  padding: 0;
  border: 1px solid var(--color-rule);
  border-radius: 5px;
  background: var(--color-paper-4);
  color: var(--color-muted);
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.fretboard-cells .fretboard-cell:first-child { border-left-width: 3px; }
.fretboard-cell:hover { border-color: var(--color-focus); color: var(--color-ink); }
.fretboard-cell.is-scale { background: color-mix(in oklab, var(--color-accent) 28%, var(--color-paper-4)); color: var(--color-ink); }
.fretboard-cell.is-root { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-accent-ink); }
.fretboard-cell.is-active { outline: 2px solid var(--color-focus); outline-offset: 1px; background: var(--color-accent); color: var(--color-accent-ink); }
.fretboard-note { font-size: 0.6875rem; font-weight: 700; }
.fretboard-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm); align-items: baseline; }
.fretboard-readout { color: var(--color-ink); font-size: var(--text-sm); font-weight: 700; }
.chord-shapes { display: grid; gap: var(--space-md); }
.chord-shape-card { display: grid; place-items: center; padding: var(--space-md); border-radius: var(--radius-small); background: var(--color-paper-3); color: var(--color-ink); }
.chord-diagram-svg { width: min(100%, 250px); height: auto; }
.chord-line { stroke: var(--color-muted); stroke-width: 2; }
.chord-dot { fill: var(--color-accent); }
.chord-finger { fill: var(--color-accent-ink); font-family: var(--font-body); font-size: 12px; font-weight: 700; }
.chord-open { fill: none; stroke: var(--color-ink); stroke-width: 2; }
.chord-x { fill: var(--color-muted); font-family: var(--font-body); font-size: 18px; }
.chord-string-label { fill: var(--color-muted); font-family: var(--font-body); font-size: 12px; font-weight: 700; }
.chord-shape-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); align-items: center; }
.chord-shape-foot > div { display: grid; gap: var(--space-2xs); }
.strummer { display: grid; gap: var(--space-md); }
.strum-line { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--space-2xs); }
.strum-step { display: grid; place-items: center; min-height: 48px; border-radius: var(--radius-input); background: var(--color-paper-3); color: var(--color-muted); font-size: 1.3rem; font-weight: 700; }
.strum-step.is-rest { color: var(--color-rule); }
.strum-step.is-current { background: var(--color-accent); color: var(--color-accent-ink); }
.amp-lab { display: grid; gap: var(--space-md); }
.amp-panel { display: grid; gap: var(--space-sm); padding: var(--space-md); border-radius: var(--radius-small); background: var(--color-paper-3); color: var(--color-ink); }
.riff-steps, .riff-board, .bass-steps { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: var(--space-3xs); min-width: 0; }
.bass-steps { grid-template-columns: repeat(32, minmax(0, 1fr)); min-width: 620px; }
.riff-step { min-height: 22px; border-radius: 3px; background: var(--color-paper-4); }
.riff-step.is-current { background: var(--color-accent); }
.riff-step.is-bar { border-left: 2px solid var(--color-rule); }
.riff-player { display: grid; gap: var(--space-md); }
.riff-notes { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.bass-groove { display: grid; gap: var(--space-md); }
.guitar-footer { display: flex; flex-wrap: wrap; gap: var(--space-md); }
@media (max-width: 40rem) {
  .fretboard-grid { min-width: 620px; }
  .fretboard-cell { min-height: 36px; }
  .chord-diagram-svg { max-width: 220px; }
  .strum-step { min-height: 42px; font-size: 1.1rem; }
}

.melody-lab { display: grid; gap: var(--space-md); }
.melody-scroll { overflow-x: auto; overscroll-behavior-x: contain; min-width: 0; }
.melody-chart { display: grid; gap: var(--space-2xs); min-width: 620px; }
.melody-chord-row { display: grid; grid-template-columns: 54px repeat(4, minmax(0, 1fr)); gap: var(--space-md); align-items: end; }
.melody-chord { display: grid; justify-items: start; color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-title); font-weight: var(--display-weight); }
.melody-chord small { color: var(--color-muted); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; }
.melody-row { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: var(--space-xs); align-items: center; }
.melody-label { color: var(--color-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.melody-cells { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: var(--space-3xs); }
.melody-cell { min-height: 28px; padding: 0; border: 1px solid var(--color-rule); border-radius: 4px; background: var(--color-paper-4); }
.melody-cell.is-chord { background: color-mix(in oklab, var(--color-accent) 24%, var(--color-paper-4)); border-color: color-mix(in oklab, var(--color-accent) 50%, var(--color-rule)); }
.melody-cell.is-root { border-color: var(--color-accent); }
.melody-cell.is-on { background: var(--color-accent); border-color: var(--color-accent); }
.melody-cell.is-current { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.melody-cell:hover { border-color: var(--color-focus); }
.melody-hint { color: var(--color-muted); }
@media (max-width: 40rem) {
  .melody-chart { min-width: 600px; }
  .melody-cell { min-height: 26px; }
}

.drum-mixer { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.drum-mixer .seg__btn[aria-pressed="true"] { background: var(--color-paper-3); text-decoration: line-through; }
.prog-bar__function { color: var(--color-muted); font-size: var(--text-xs); font-weight: 700; }

.melody-ear { display: grid; gap: var(--space-md); }
.ear-degrees { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2xs); }
.ear-degree { display: grid; justify-items: center; gap: var(--space-3xs); min-height: 54px; padding: var(--space-2xs); border: var(--rule-bar) solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-paper-4); color: var(--color-muted); }
.ear-degree strong { font-family: var(--font-display); font-size: var(--text-title); color: var(--color-ink); }
.ear-degree span { font-size: var(--text-xs); }
.ear-degree:hover, .ear-degree:focus-visible { border-color: var(--color-focus); color: var(--color-ink); }
.ear-feedback { min-height: 1lh; color: var(--color-muted); font-size: var(--text-sm); }
.ear-feedback[data-tone="ok"] { color: var(--color-accent); font-weight: 700; }
.ear-feedback[data-tone="error"] { color: var(--color-error); }
@media (max-width: 40rem) {
  .ear-degrees { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.principles-ear { display: grid; gap: var(--space-sm); margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.principles-ear h3 { font-size: var(--text-title); }

.degree-lab { display: grid; gap: var(--space-md); }
.degree-cards { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-xs); }
.degree-card { display: grid; gap: var(--space-2xs); align-content: start; min-height: 130px; padding: var(--space-sm); border: var(--rule-bar) solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-paper-3); color: var(--color-muted); text-align: left; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.degree-card:hover { border-color: var(--color-focus); background: var(--color-paper-2); }
.degree-card.is-playing { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-accent-ink); }
.degree-card__num { color: var(--color-accent); font-family: var(--font-display); font-size: var(--text-title); font-weight: var(--display-weight); }
.degree-card.is-playing .degree-card__num { color: var(--color-accent-ink); }
.degree-card strong { color: var(--color-ink); font-size: var(--text-md); }
.degree-card.is-playing strong { color: var(--color-accent-ink); }
.degree-card span, .degree-card small { font-size: var(--text-xs); }
.degree-card small { color: var(--color-muted); }
.degree-card.is-playing small, .degree-card.is-playing span { color: var(--color-accent-ink); }
@media (max-width: 60rem) {
  .degree-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .degree-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .degree-card { min-height: 110px; }
}

.circle-fifths { display: grid; gap: var(--space-md); }
.circle-fifths__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm); align-items: center; }
.circle-fifths__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-xs); }
.circle-key { display: grid; gap: var(--space-2xs); min-height: 90px; padding: var(--space-sm); border: var(--rule-bar) solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-paper-3); color: var(--color-muted); text-align: left; }
.circle-key:hover { background: var(--color-paper-2); border-color: var(--color-focus); }
.circle-key.is-active { border-color: var(--color-accent); background: var(--color-paper-2); color: var(--color-ink); }
.circle-key strong { color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-title); }
.circle-key span, .circle-key small { font-size: var(--text-xs); }
.circle-detail { display: grid; gap: var(--space-2xs); padding: var(--space-md); border-radius: var(--radius-card-inner); background: var(--color-paper-3); }
.circle-detail strong { font-family: var(--font-display); font-size: var(--text-title); }
.circle-detail span, .circle-detail p { color: var(--color-muted); font-size: var(--text-sm); }
@media (max-width: 60rem) { .circle-fifths__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .circle-fifths__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .circle-key { min-height: 76px; } }

.scroll-hint { display: none; color: var(--color-muted); font-size: var(--text-xs); }
@media (max-width: 40rem) {
  .scroll-hint { display: block; }
}