/* Synth School is a distinct app face. Every selector is route-scoped so
   ordinary Piano Tool layout and interaction return unchanged after teardown. */

body.synth-school-workspace-active {
  padding: 0;
  overflow: hidden;
  background: #f4f6f3;
  color: #18221e;
}

/* Ten-lesson reusable experiment shell. Concept graphics are lightweight DOM
   and SVG projections; the measured trace remains worker-owned above. */
.synth-school-curriculum-grid {
  margin: 26px 0;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
  gap: 18px;
  align-items: stretch;
}

.synth-school-curriculum-grid > * {
  margin: 0;
  min-width: 0;
}

.synth-school-curriculum-visual {
  --curriculum-motion-duration: 1s;
  --curriculum-beat-duration: 4s;
  min-height: 300px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--school-line);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 82% 0, var(--school-signal-violet-soft), transparent 42%),
    linear-gradient(155deg, var(--school-visual-grad-a), var(--school-visual-grad-b));
}

.synth-school-curriculum-visual > figcaption {
  min-height: 38px;
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.5;
}

.synth-school-curriculum-visual > figcaption span {
  display: block;
  margin-bottom: 3px;
  color: var(--school-signal-violet);
  font: 750 9px/1.2 var(--font-mono);
  letter-spacing: 0.14em;
}

.synth-school-curriculum-visual svg {
  width: 100%;
  height: auto;
  display: block;
}

.synth-school-workspace .curriculum-axis,
.synth-school-workspace .curriculum-grid {
  fill: none;
  stroke: rgba(var(--school-ink-rgb), 0.13);
  stroke-width: 1;
}

.synth-school-workspace .curriculum-wave,
.synth-school-workspace .curriculum-filter-response,
.synth-school-workspace .curriculum-automation {
  fill: none;
  stroke: var(--school-signal-red);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.synth-school-workspace .curriculum-wave--b {
  stroke: var(--school-signal-violet);
  stroke-dasharray: 9 6;
}

.synth-school-workspace .curriculum-wave--sum,
.synth-school-workspace .curriculum-wave--fm {
  stroke: var(--school-ink);
}

.synth-school-workspace .curriculum-wave--sum {
  stroke-dasharray: 13 7;
}

.synth-school-workspace [data-curriculum-lab][data-active="true"] .curriculum-wave--b,
.synth-school-workspace [data-curriculum-lab][data-active="true"] .curriculum-wave--sum {
  animation: synth-school-wave-drift var(--curriculum-beat-duration) linear infinite;
}

.synth-school-workspace .curriculum-filter-response {
  stroke-width: calc(3px + (var(--curriculum-resonance, 0) * 4px));
}

.synth-school-workspace .curriculum-filter-cutoff {
  fill: var(--school-signal-violet);
  filter: drop-shadow(0 0 8px rgba(var(--school-signal-violet-rgb), 0.35));
}

.synth-school-workspace .curriculum-lfo-wave {
  fill: none;
  stroke: var(--school-signal-violet);
  stroke-width: 5;
}

.synth-school-workspace .curriculum-lfo-visual {
  position: relative;
  contain: layout paint;
}

.synth-school-workspace .curriculum-lfo-hand {
  position: absolute;
  top: calc(50% - 10px);
  left: calc(4.2% - 10px);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--school-signal-red);
  pointer-events: none;
  will-change: transform;
}

.synth-school-workspace [data-curriculum-lab][data-active="true"] .curriculum-lfo-hand {
  animation: synth-school-lfo-hand var(--curriculum-motion-duration) linear infinite;
}

.synth-school-workspace .curriculum-automation {
  stroke: var(--school-signal-violet);
}

.synth-school-curriculum-visual__legend {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-3);
  font: 650 9px/1.3 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.synth-school-curriculum-path {
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  border: 1px solid var(--school-line);
  border-radius: var(--radius-xl);
  background: var(--school-surface);
  list-style: none;
  overflow: hidden;
}

.synth-school-curriculum-path li {
  min-height: 82px;
  padding: 16px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--school-line);
}

.synth-school-curriculum-path li:last-child {
  border-right: 0;
}

.synth-school-curriculum-path span {
  color: var(--school-signal-red);
  font: 700 9px/1 var(--font-mono);
}

.synth-school-curriculum-path strong {
  margin-top: 7px;
  font-size: 12px;
}

.synth-school-curriculum-path i {
  position: absolute;
  top: 50%;
  right: -9px;
  z-index: 1;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid var(--school-line);
  border-radius: 50%;
  background: var(--school-chip);
  color: var(--school-signal-violet);
  font: normal 700 10px/1 var(--font-mono);
}

.synth-school-curriculum-experiment {
  margin: 24px 0 14px;
  padding: clamp(18px, 3vw, 28px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px;
  align-items: center;
  border: 1px solid rgba(var(--school-signal-red-rgb), 0.24);
  border-radius: var(--radius-xl);
  background: linear-gradient(120deg, var(--school-signal-red-soft), var(--school-signal-violet-soft));
}

.synth-school-curriculum-experiment h2 {
  margin: 6px 0;
  font-size: clamp(20px, 2.6vw, 30px);
}

.synth-school-curriculum-experiment p:last-child {
  margin: 0;
  color: var(--text-2);
  line-height: 1.55;
}

.synth-school-curriculum-note {
  min-width: 138px;
  min-height: 92px;
  padding: 14px;
  border: 1px solid rgba(var(--school-ink-rgb), 0.2);
  border-radius: 18px;
  background: var(--school-chip);
  cursor: pointer;
}

.synth-school-curriculum-note span,
.synth-school-curriculum-note strong {
  display: block;
}

.synth-school-curriculum-note span {
  margin-bottom: 8px;
  color: var(--school-signal-red);
  font: 800 22px/1 var(--font-mono);
}

.synth-school-curriculum-note:active {
  transform: translateY(2px);
  background: var(--school-signal-red-soft);
}

.synth-school-curriculum-note:disabled {
  opacity: 0.46;
  cursor: not-allowed;
}

.synth-school-curriculum-presets {
  margin: 14px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.synth-school-curriculum-presets button {
  min-height: 92px;
  padding: 14px;
  border: 1px solid var(--school-line);
  border-radius: var(--radius-lg);
  background: var(--school-chip);
  text-align: left;
  cursor: pointer;
}

.synth-school-curriculum-presets button:hover:not(:disabled),
.synth-school-curriculum-presets button.is-selected {
  border-color: rgba(var(--school-signal-violet-rgb), 0.42);
  background: var(--school-signal-violet-soft);
}

.synth-school-curriculum-presets button strong,
.synth-school-curriculum-presets button small {
  display: block;
}

.synth-school-curriculum-presets button small {
  margin-top: 6px;
  color: var(--text-3);
  line-height: 1.4;
}

.synth-school-curriculum-presets button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.synth-school-curriculum-controls {
  margin: 14px 0;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  border: 1px solid var(--school-line);
  border-radius: var(--radius-xl);
  background: var(--school-surface);
}

.synth-school-curriculum-controls label > span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
}

.synth-school-curriculum-controls output {
  color: var(--school-signal-violet);
  font: 700 11px/1.3 var(--font-mono);
}

.synth-school-curriculum-controls input {
  width: 100%;
  margin-top: 14px;
  accent-color: var(--school-signal-red);
}

.synth-school-curriculum-status,
.synth-school-curriculum-motion-copy {
  margin: 12px 0 0;
  color: var(--text-3);
  font-size: 11px;
  line-height: 1.5;
}

.synth-school-voice-bank {
  min-height: 190px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  align-content: center;
}

.synth-school-voice-bank span {
  aspect-ratio: 1.35;
  display: grid;
  place-items: center;
  border: 1px solid var(--school-line);
  border-radius: 12px;
  background: var(--school-chip);
  color: var(--text-3);
  font: 700 12px/1 var(--font-mono);
  transition: 120ms ease;
}

.synth-school-voice-bank span.is-active {
  border-color: var(--school-signal-red);
  background: var(--school-signal-red-soft);
  color: var(--school-signal-red);
  box-shadow: 0 0 18px rgba(var(--school-signal-red-rgb), 0.18);
}

.synth-school-curriculum-visual > p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--text-3);
  font-size: 11px;
}

.synth-school-curriculum-visual > p strong,
.synth-school-curriculum-visual > p span {
  display: block;
}

.synth-school-spectrum {
  height: 58px;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 7px;
}

.synth-school-spectrum span {
  width: 8px;
  height: calc(var(--bar) * (0.45 + var(--curriculum-fm-amount, 0) * 0.55));
  border-radius: 4px 4px 0 0;
  background: linear-gradient(var(--school-signal-violet), var(--school-signal-red));
}

.synth-school-family-map {
  min-height: 230px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  align-content: center;
}

.synth-school-family-map span {
  padding: 13px;
  border: 1px solid var(--school-line);
  border-radius: 12px;
  background: var(--school-chip);
}

.synth-school-family-map strong,
.synth-school-family-map small {
  display: block;
}

.synth-school-family-map small {
  margin-top: 5px;
  color: var(--text-3);
}

@keyframes synth-school-wave-drift {
  to { stroke-dashoffset: -90; }
}

@keyframes synth-school-lfo-hand {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(640px, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@media (max-width: 980px) {
  .synth-school-curriculum-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .synth-school-curriculum-experiment {
    grid-template-columns: 1fr;
  }

  .synth-school-curriculum-note {
    width: 100%;
  }

  .synth-school-curriculum-path li {
    border-right: 0;
    border-bottom: 1px solid var(--school-line);
  }

  .synth-school-curriculum-path li:last-child {
    border-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .synth-school-workspace .curriculum-wave--b,
  .synth-school-workspace .curriculum-wave--sum,
  .synth-school-workspace .curriculum-lfo-hand {
    animation: none;
  }
}

body.synth-school-workspace-active > :not(#synth-school-workspace):not(.pianoroll-canvas):not(script) {
  visibility: hidden !important;
  pointer-events: none !important;
}

body.synth-school-workspace-active > .pianoroll-canvas {
  visibility: visible !important;
  pointer-events: auto !important;
  position: fixed !important;
  inset: auto 0 0 !important;
  width: 100vw !important;
  height: 132px !important;
  z-index: 12030 !important;
  touch-action: none;
  contain: layout paint;
  border-top: 1px solid rgba(68, 79, 91, 0.28);
  background: #11141a;
}

body.synth-school-workspace-active > .audio-unlock-overlay {
  display: none !important;
}

.synth-school-workspace {
  /* Theme contract: every surface, line, wash, and shadow the light and dark
     faces disagree on resolves through these tokens. The dark block at the end
     of this file primarily swaps token values, plus a small set of documented
     per-surface overrides (well bezels, faint wash lifts, error tints).
     Instrument wells (scope, ADSR grid, Prophet faceplates) are deliberately
     NOT tokenized: they are already-dark hardware shared by both themes. */
  --school-bg: #f4f6f3;
  --school-page-top: #ffffff;
  --school-surface: #ffffff;
  --school-surface-raised: #f9faf8;
  --school-chip: #ffffff;
  --school-panel: var(--school-surface-raised);
  --school-input-bg: #ffffff;
  --school-line: #d7ded9;
  --school-header-bg: rgba(255, 255, 255, 0.97);
  --school-rail-bg: rgba(250, 251, 249, 0.82);
  --school-floor-bg: rgba(255, 255, 255, 0.98);
  --school-visual-grad-a: #ffffff;
  --school-visual-grad-b: #f4f1f8;
  /* Signal colors match the shipped MixerVisualPanelTheme palette. */
  --school-signal-red: #ff2249;
  --school-signal-red-rgb: 255, 34, 73;
  --school-signal-red-soft: rgba(255, 34, 73, 0.09);
  --school-signal-violet: #8b1bff;
  --school-signal-violet-rgb: 139, 27, 255;
  --school-signal-violet-soft: rgba(139, 27, 255, 0.08);
  /* Prophet control LEDs match the in-app faceplate, not the page chrome. */
  --school-prophet-led: #ff4b50;
  --school-prophet-led-dim: rgba(255, 60, 66, 0.18);
  --school-prophet-led-glow: rgba(255, 75, 80, 0.5);
  --school-ink: #18221e;
  --school-ink-rgb: 24, 34, 30;
  --school-copy: #48564f;
  --school-muted: #69766f;
  --school-shadow-card: 0 1px 2px rgba(24, 34, 30, 0.04);
  --school-shadow-pop: 0 8px 18px rgba(24, 34, 30, 0.08);
  --school-shadow-floor: 0 -10px 28px rgba(24, 34, 30, 0.09);
  --school-shadow-hw: 0 5px 14px rgba(24, 34, 30, 0.12);
  --school-header-edge: 0 1px 0 rgba(24, 34, 30, 0.02);
  --text-1: var(--school-ink);
  --text-2: var(--school-copy);
  --text-3: var(--school-muted);
  color-scheme: light;
  position: fixed;
  inset: 0;
  z-index: 12000;
  visibility: visible !important;
  overflow: auto;
  overscroll-behavior: contain;
  background:
    linear-gradient(180deg, var(--school-page-top) 0, var(--school-bg) 18rem),
    var(--school-bg);
  color: var(--school-ink);
  font-family: var(--font-system);
}

.synth-school-workspace button,
.synth-school-workspace input {
  font: inherit;
}

.synth-school-workspace [hidden] {
  display: none !important;
}

.synth-school-workspace button {
  color: inherit;
}

.synth-school-workspace button:focus-visible,
.synth-school-workspace input:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.synth-school-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.synth-school-header {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 68px;
  padding: 0 clamp(18px, 3vw, 44px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: var(--school-header-bg);
  border-bottom: 1px solid var(--school-line);
  box-shadow: var(--school-header-edge);
}

.synth-school-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--school-ink);
}

.synth-school-world-switcher .topbar-world-trigger {
  min-height: 50px;
  padding: 4px 8px 4px 4px;
}

.synth-school-world-switcher .topbar-world-panel {
  top: calc(100% - 2px);
  left: 0;
}

.synth-school-world-switcher .topbar-world-trigger:hover,
.synth-school-world-switcher .topbar-world-trigger:focus-visible,
.synth-school-world-switcher.is-open .topbar-world-trigger {
  background: linear-gradient(110deg, rgba(var(--school-signal-red-rgb), 0.1), rgba(var(--school-signal-violet-rgb), 0.08));
  box-shadow: 0 0 0 1px rgba(var(--school-signal-red-rgb), 0.2), 0 0 18px rgba(var(--school-signal-violet-rgb), 0.14);
}

.synth-school-brand__mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #202622;
  color: #ffffff;
  font: 800 26px/1 var(--font-mono);
}

.synth-school-brand strong,
.synth-school-brand small {
  display: block;
}

.synth-school-brand strong {
  font-size: 15px;
  letter-spacing: 0.01em;
}

.synth-school-brand small {
  margin-top: 1px;
  color: var(--text-3);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Hardware-style rocker: the LED lights while the dark face is engaged. */
.synth-school-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid var(--school-line);
  border-radius: var(--radius-pill);
  background: var(--school-chip);
  color: var(--text-2);
  font: 750 9px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.synth-school-theme-toggle:hover {
  border-color: rgba(var(--school-signal-red-rgb), 0.34);
  background: var(--school-signal-red-soft);
}

.synth-school-theme-toggle__led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(var(--school-ink-rgb), 0.22);
}

.synth-school-theme-toggle[aria-pressed="true"] .synth-school-theme-toggle__led {
  background: var(--school-prophet-led);
  box-shadow: 0 0 8px var(--school-prophet-led-glow);
}

.synth-school-layout {
  width: min(1520px, 100%);
  min-height: calc(100dvh - 68px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
}

.synth-school-rail {
  padding: clamp(30px, 5vh, 64px) 24px 36px;
  border-right: 1px solid var(--school-line);
  background: var(--school-rail-bg);
}

.synth-school-rail__eyebrow,
.synth-school-kicker,
.synth-school-card-kicker {
  margin: 0;
  color: var(--accent);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.synth-school-rail__list {
  margin: 22px 0;
  padding: 0;
  list-style: none;
}

.synth-school-rail__list li {
  margin: 0 0 10px;
}

.synth-school-rail__list button {
  width: 100%;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  padding: 13px 12px;
  border: 1px solid var(--school-line);
  border-radius: var(--radius-lg);
  background: var(--school-surface);
  color: var(--text-1);
  text-align: left;
  cursor: pointer;
}

.synth-school-rail__list button:hover,
.synth-school-rail__list button:focus-visible {
  border-color: rgba(var(--school-signal-red-rgb), 0.34);
  background: var(--school-signal-red-soft);
}

.synth-school-rail__list li.is-current button {
  background: var(--accent-bg-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}

.synth-school-rail__list button > span:first-child {
  color: var(--accent);
  font: 700 11px/1.5 var(--font-mono);
}

.synth-school-rail__list strong,
.synth-school-rail__list small {
  display: block;
}

.synth-school-rail__list strong {
  font-size: 12px;
}

.synth-school-rail__list small {
  margin-top: 4px;
  color: var(--text-3);
  font-size: 11px;
}

.synth-school-rail__note {
  margin: 0;
  color: var(--text-3);
  font-size: 11px;
  line-height: 1.55;
}

.synth-school-main {
  width: min(1260px, 100%);
  margin: 0 auto;
  padding: clamp(30px, 5vh, 64px) clamp(22px, 3.8vw, 58px) 250px;
}

.synth-school-intro {
  margin-bottom: 28px;
}

.synth-school-title-row {
  margin-top: 10px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.synth-school-title-row h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(32px, 4.6vw, 64px);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.synth-school-title-row p {
  max-width: 690px;
  margin: 18px 0 0;
  color: var(--text-2);
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.6;
}

.synth-school-lesson-state {
  flex: 0 0 auto;
  margin-bottom: 6px;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--school-line);
  border-radius: var(--radius-pill);
  color: var(--text-2);
  font-size: 11px;
}

.synth-school-state-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-3);
}

.synth-school-lesson-state.is-active .synth-school-state-dot {
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-bg-soft);
}

.synth-school-lesson-state.is-complete {
  color: var(--accent);
  border-color: rgba(56, 145, 255, 0.42);
  background: var(--accent-bg-soft);
}

.synth-school-lesson-state.is-error {
  color: #a23b32;
  border-color: #e3b5b0;
  background: #fff4f2;
}

.synth-school-start-card,
.synth-school-control-card,
.synth-school-play-card,
.synth-school-flow,
.synth-school-checkpoint,
.synth-school-transfer,
.synth-school-error {
  border: 1px solid var(--school-line);
  border-radius: 18px;
  background: var(--school-surface);
  box-shadow: var(--school-shadow-card);
}

.synth-school-start-card {
  min-height: 240px;
  padding: clamp(28px, 5vw, 56px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  background: var(--school-surface);
}

.synth-school-start-card h2,
.synth-school-copy-card h2,
.synth-school-control-card h2,
.synth-school-play-card h2,
.synth-school-flow h2,
.synth-school-checkpoint h2,
.synth-school-transfer h2 {
  margin: 10px 0 0;
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.12;
}

.synth-school-start-card p:not(.synth-school-card-kicker),
.synth-school-copy-card p,
.synth-school-control-card p,
.synth-school-play-card p,
.synth-school-flow p,
.synth-school-checkpoint p,
.synth-school-transfer p,
.synth-school-error p {
  max-width: 650px;
  margin: 13px 0 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.6;
}

.synth-school-primary {
  min-width: 170px;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #ffffff !important;
  font-weight: 750 !important;
  cursor: pointer;
}

.synth-school-primary:hover {
  background: var(--accent-hover);
  box-shadow: var(--accent-glow);
}

.synth-school-primary:disabled {
  opacity: 0.58;
  cursor: wait;
}

.synth-school-listen-grid {
  display: grid;
  grid-template-columns: minmax(250px, 0.8fr) minmax(420px, 1.2fr);
  gap: 18px;
}

.synth-school-copy-card,
.synth-school-scope {
  min-height: 300px;
  margin: 0;
  padding: 26px;
  border: 1px solid var(--school-line);
  border-radius: 18px;
  background: var(--school-surface);
}

.synth-school-copy-card .synth-school-hint {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--school-line);
  color: var(--text-2);
  font-size: 12px;
}

.synth-school-scope {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
  overflow: hidden;
}

.synth-school-scope__head,
.synth-school-scope__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.synth-school-scope__head figcaption {
  font-size: 12px;
  font-weight: 700;
}

.synth-school-scope__truth {
  color: var(--school-signal-red);
  font-size: 10px;
  letter-spacing: 0.04em;
}

.synth-school-scope__viewport {
  position: relative;
  min-width: 0;
  margin: 16px 0;
  overflow: hidden;
  border-radius: 12px;
  contain: layout paint size;
}

.synth-school-scope__canvas {
  width: 100%;
  height: 220px;
  display: block;
  border: 1px solid #3a3037;
  border-radius: 12px;
  background: #10151c;
  box-shadow:
    inset 0 0 0 1px rgba(239, 79, 72, 0.06),
    0 0 24px rgba(101, 80, 168, 0.06);
}

.synth-school-scope__mask {
  position: absolute;
  inset: 0;
  padding: 24px;
  display: grid;
  place-content: center;
  gap: 8px;
  text-align: center;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255, 34, 73, 0.035) 0,
      rgba(255, 34, 73, 0.035) 1px,
      transparent 1px,
      transparent 4px
    ),
    rgba(4, 2, 3, 0.96);
  color: rgba(255, 255, 255, 0.88);
}

.synth-school-scope__mask[hidden] {
  display: none;
}

.synth-school-scope__mask strong {
  color: var(--school-signal-red);
  font: 800 11px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.synth-school-scope__mask span {
  max-width: 330px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 11px;
  line-height: 1.5;
}

.synth-school-scope__footer {
  color: var(--text-3);
  font-size: 10px;
}

.synth-school-analysis-status {
  color: var(--school-signal-red);
  font: 700 10px/1 var(--font-mono);
  letter-spacing: 0.1em;
}

.synth-school-waveforms {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.synth-school-waveform {
  min-height: 132px;
  padding: 18px;
  display: grid;
  grid-template-columns: 28px 74px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  text-align: left;
  border: 1px solid var(--school-line);
  border-radius: 16px;
  background: var(--school-surface);
  cursor: pointer;
}

.synth-school-waveform:hover,
.synth-school-waveform.is-selected {
  border-color: rgba(var(--school-signal-red-rgb), 0.46);
  background: var(--school-signal-red-soft);
}

.synth-school-waveform.is-playing {
  box-shadow: inset 0 0 0 2px var(--school-signal-red), 0 8px 20px rgba(var(--school-signal-red-rgb), 0.12);
}

.synth-school-waveform.is-heard .synth-school-waveform__number::after {
  content: "✓";
  display: block;
  margin-top: 7px;
  color: var(--school-signal-red);
  font-size: 11px;
}

.synth-school-waveform__number {
  color: var(--text-3);
  font: 700 11px/1 var(--font-mono);
  align-self: start;
}

.synth-school-waveform strong,
.synth-school-waveform small {
  display: block;
}

.synth-school-waveform strong {
  font-size: 17px;
}

.synth-school-waveform small {
  margin-top: 5px;
  color: var(--text-3);
  font-size: 11px;
}

.synth-school-waveform__action {
  color: var(--school-signal-red);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Colored strokes below are the no-mask fallback; where masks are supported
   the icons repaint through alpha masks so both themes share one SVG. */
.synth-school-waveform__icon {
  width: 74px;
  height: 44px;
  display: block;
  opacity: 0.88;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.synth-school-waveform__icon--saw {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 44'%3E%3Cpath d='M2 40L24 4v36L46 4v36L68 4v36' fill='none' stroke='%23ff2249' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.synth-school-waveform__icon--pulse {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 44'%3E%3Cpath d='M2 38V7h22v31h22V7h22v31h10' fill='none' stroke='%238b1bff' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .synth-school-waveform__icon {
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
  }

  .synth-school-waveform__icon--saw {
    background: var(--school-signal-red);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 44'%3E%3Cpath d='M2 40L24 4v36L46 4v36L68 4v36' fill='none' stroke='%23000' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 44'%3E%3Cpath d='M2 40L24 4v36L46 4v36L68 4v36' fill='none' stroke='%23000' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  .synth-school-waveform__icon--pulse {
    background: var(--school-signal-violet);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 44'%3E%3Cpath d='M2 38V7h22v31h22V7h22v31h10' fill='none' stroke='%23000' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 44'%3E%3Cpath d='M2 38V7h22v31h22V7h22v31h10' fill='none' stroke='%23000' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

.synth-school-waveform[data-preview-waveform="pulse"]:not(.is-playing) .synth-school-waveform__action {
  color: var(--school-signal-violet);
}

.synth-school-waveform[data-preview-waveform="pulse"].is-selected:not(.is-playing) {
  border-color: rgba(var(--school-signal-violet-rgb), 0.34);
  background: var(--school-signal-violet-soft);
}

.synth-school-control-card,
.synth-school-play-card {
  margin-top: 18px;
  padding: 24px 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.55fr);
  align-items: center;
  gap: 40px;
}

.synth-school-level {
  display: grid;
  gap: 14px;
}

.synth-school-level__readout {
  display: flex;
  justify-content: space-between;
  color: var(--text-2);
  font-size: 12px;
}

.synth-school-level output {
  color: var(--school-prophet-led);
  font-family: var(--font-mono);
}

.synth-school-prophet-control {
  --knob-led: var(--school-prophet-led);
  --knob-led-dim: var(--school-prophet-led-dim);
  --knob-led-glow: var(--school-prophet-led-glow);
  position: relative;
  min-height: 154px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 13px;
  overflow: hidden;
  border: 1px solid #0b0c0f;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 22%),
    #17191e;
  color: rgba(255, 255, 255, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    var(--school-shadow-hw);
}

.synth-school-prophet-control:focus-within {
  outline: none;
  box-shadow: var(--focus-ring), var(--school-shadow-hw);
}

.synth-school-prophet-control__legend {
  position: absolute;
  top: 10px;
  left: 12px;
  color: rgba(255, 255, 255, 0.42);
  font: 700 8px/1 var(--font-mono);
  letter-spacing: 0.14em;
}

.synth-school-prophet-knob {
  position: relative;
  width: 58px;
  height: 58px;
  display: block;
  border: 1px solid #090a0d;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #2c2f37, #16181d 65%, #101216);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.16),
    0 3px 7px rgba(0, 0, 0, 0.55);
}

.synth-school-prophet-knob::before {
  content: "";
  position: absolute;
  bottom: 50%;
  left: calc(50% - 1.5px);
  width: 3px;
  height: 22px;
  border-radius: 2px;
  background: #dde3ec;
  transform: rotate(var(--rotation, 0deg));
  transform-origin: 50% 100%;
}

.synth-school-prophet-knob .knob-collar {
  inset: -16px;
}

.synth-school-prophet-control__label {
  color: rgba(255, 255, 255, 0.72);
  font: 700 9px/1 var(--font-mono);
  letter-spacing: 0.14em;
}

.synth-school-prophet-control input {
  position: absolute;
  left: 50%;
  top: 35px;
  width: 104px;
  height: 104px;
  margin: 0;
  opacity: 0;
  transform: translateX(-50%);
  cursor: ew-resize;
}

.synth-school-play-card {
  align-items: end;
}

.synth-school-flow {
  margin-top: 18px;
  padding: clamp(28px, 4vw, 42px);
  display: grid;
  grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1.58fr);
  gap: 26px 34px;
  align-items: stretch;
}

.synth-school-flow__copy {
  align-self: center;
}

.synth-school-flow__binding {
  width: min(100%, 310px);
  margin-top: 22px !important;
  padding: 13px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid rgba(var(--school-signal-red-rgb), 0.28);
  border-radius: 12px;
  background: var(--school-signal-red-soft);
}

.synth-school-flow__binding span {
  color: var(--text-3);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.synth-school-flow__binding strong {
  color: var(--school-signal-red);
  font-size: 12px;
}

.synth-school-flow__diagram {
  position: relative;
  min-width: 0;
  padding-bottom: 112px;
}

.synth-school-flow__audio-path {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(118px, 1fr));
  gap: 14px;
  list-style: none;
}

.synth-school-flow__audio-path li {
  position: relative;
  min-height: 134px;
  padding: 16px 14px;
  display: grid;
  align-content: start;
  gap: 8px;
  border: 1px solid var(--school-line);
  border-radius: 14px;
  background: var(--school-surface-raised);
}

.synth-school-flow__audio-path li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 2px);
  width: 10px;
  height: 2px;
  background: var(--school-signal-red);
  transform: translateY(-50%);
}

.synth-school-flow__audio-path li:not(:last-child)::before {
  content: "";
  position: absolute;
  top: calc(50% - 4px);
  left: calc(100% + 10px);
  border: 5px solid transparent;
  border-left-color: var(--school-signal-red);
}

.synth-school-flow__stage-index {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--school-signal-red);
  color: #ffffff;
  font: 800 11px/1 var(--font-mono);
}

.synth-school-flow__audio-path strong,
.synth-school-flow__envelope strong {
  color: var(--text-1);
  font-size: 14px;
}

.synth-school-flow__audio-path small,
.synth-school-flow__envelope small {
  color: var(--text-3);
  font-size: 11px;
  line-height: 1.45;
}

.synth-school-flow__audio-path [data-flow-stage="oscillator"] {
  border-color: rgba(var(--school-signal-red-rgb), 0.34);
  background: var(--school-signal-red-soft);
}

.synth-school-flow__audio-path [data-flow-stage="oscillator"].is-pulse {
  border-color: rgba(var(--school-signal-violet-rgb), 0.34);
  background: var(--school-signal-violet-soft);
}

.synth-school-flow__audio-path [data-flow-stage="oscillator"].is-pulse .synth-school-flow__stage-index {
  background: var(--school-signal-violet);
}

.synth-school-flow__audio-path [data-flow-stage="output"].is-active {
  border-color: rgba(56, 145, 255, 0.42);
  background: var(--accent-bg-soft);
}

.synth-school-flow__envelope {
  position: absolute;
  right: min(28%, 220px);
  bottom: 0;
  width: min(320px, 58%);
  min-height: 82px;
  padding: 14px 16px;
  display: grid;
  gap: 10px;
  border: 1px solid rgba(var(--school-signal-violet-rgb), 0.34);
  border-radius: 14px;
  background: var(--school-surface);
  box-shadow: var(--school-shadow-pop);
}

.synth-school-flow__envelope::before {
  content: "";
  position: absolute;
  right: 42px;
  bottom: calc(100% - 1px);
  width: 2px;
  height: 38px;
  background: var(--school-signal-violet);
}

.synth-school-flow__envelope::after {
  content: "";
  position: absolute;
  right: 38px;
  bottom: calc(100% + 32px);
  border: 5px solid transparent;
  border-bottom-color: var(--school-signal-violet);
}

.synth-school-flow__control-label {
  color: var(--school-signal-violet);
  font: 800 9px/1 var(--font-mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.synth-school-adsr {
  min-width: 0;
  margin: 0;
  display: grid;
  gap: 9px;
}

.synth-school-adsr figcaption {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 750;
}

.synth-school-adsr__status {
  width: fit-content;
  padding: 5px 8px;
  border: 1px solid rgba(var(--school-signal-violet-rgb), 0.22);
  border-radius: 999px;
  background: rgba(var(--school-signal-violet-rgb), 0.06);
  color: var(--school-signal-violet);
  font: 750 8px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.synth-school-adsr[data-adsr-pending="true"] .synth-school-adsr__status {
  border-color: rgba(105, 118, 111, 0.3);
  background: rgba(105, 118, 111, 0.08);
  color: var(--text-3);
}

.synth-school-adsr svg {
  width: 100%;
  display: block;
  overflow: hidden;
  border: 1px solid #252b32;
  border-radius: 12px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 52px),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 42px),
    #11151b;
}

.synth-school-adsr__axis {
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 1;
}

.synth-school-adsr__shape {
  fill: none;
  stroke: var(--school-signal-violet);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.synth-school-adsr__markers circle {
  fill: #ffffff;
  stroke: var(--school-signal-violet);
  stroke-width: 2;
}

.synth-school-adsr__labels text {
  fill: rgba(255, 255, 255, 0.72);
  font: 800 13px/1 var(--font-mono);
  text-anchor: middle;
}

.synth-school-adsr[data-adsr-pending="true"] .synth-school-adsr__shape,
.synth-school-adsr[data-adsr-pending="true"] .synth-school-adsr__markers circle {
  opacity: 0.42;
}

.synth-school-adsr__readout {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.synth-school-adsr__readout div {
  min-width: 0;
  padding: 7px 6px;
  border: 1px solid rgba(var(--school-signal-violet-rgb), 0.16);
  border-radius: 8px;
  background: rgba(var(--school-signal-violet-rgb), 0.04);
}

.synth-school-adsr__readout dt,
.synth-school-adsr__readout dd {
  margin: 0;
}

.synth-school-adsr__readout dt {
  color: var(--text-3);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.synth-school-adsr__readout dd {
  margin-top: 3px;
  color: var(--text-1);
  font: 750 10px/1.15 var(--font-mono);
}

.synth-school-adsr__controls {
  display: grid;
  gap: 8px;
}

.synth-school-adsr__control {
  display: grid;
  grid-template-columns: 68px 1fr 56px;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: 11px;
}

.synth-school-adsr__control output {
  justify-self: end;
  color: var(--school-signal-violet);
  font-family: var(--font-mono);
  font-size: 10px;
}

.synth-school-adsr__control input {
  min-width: 0;
  accent-color: var(--school-signal-violet);
  touch-action: pan-x;
}

.synth-school-flow {
  grid-template-areas:
    "copy scope"
    "panel panel";
}

.synth-school-flow__copy {
  grid-area: copy;
}

.synth-school-flow [data-scope-panel="signal-flow"] {
  grid-area: scope;
  min-height: 280px;
}

.synth-school-flow__panel {
  grid-area: panel;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(240px, 0.65fr) minmax(380px, 1.2fr);
  gap: 20px;
}

.synth-school-flow__module {
  min-width: 0;
  padding: 20px;
  display: grid;
  align-content: start;
  gap: 18px;
  border: 1px solid var(--school-line);
  border-radius: 14px;
  background: var(--school-surface-raised);
}

.synth-school-flow__module--oscillator {
  border-color: rgba(var(--school-signal-red-rgb), 0.34);
  background: var(--school-signal-red-soft);
}

.synth-school-flow__module--amplifier {
  border-color: rgba(var(--school-signal-violet-rgb), 0.28);
  background: rgba(var(--school-signal-violet-rgb), 0.04);
}

.synth-school-flow__module-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px 10px;
}

.synth-school-flow__module-head > span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--school-signal-red);
  color: #ffffff;
  font: 800 11px/1 var(--font-mono);
}

.synth-school-flow__module-head h3 {
  margin: 0;
  color: var(--text-1);
  font-size: 14px;
}

.synth-school-flow__module-head small {
  grid-column: 2;
  color: var(--text-3);
  font: 750 9px/1 var(--font-mono);
  letter-spacing: 0.12em;
}

.synth-school-flow__switches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.synth-school-flow__switches button {
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid rgba(var(--school-signal-red-rgb), 0.24);
  border-radius: 999px;
  background: var(--school-chip);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.synth-school-flow__switches button:disabled {
  opacity: 0.54;
  cursor: not-allowed;
}

.synth-school-flow__switches button.is-selected {
  border-color: var(--school-signal-red);
  background: var(--school-signal-red);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(var(--school-signal-red-rgb), 0.14);
}

.synth-school-flow__cutoff {
  display: grid;
  justify-items: center;
  gap: 14px;
  color: var(--text-2);
  font-size: 12px;
}

.synth-school-flow__cutoff > span:first-child {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.synth-school-flow__cutoff output {
  color: var(--school-prophet-led);
  font-family: var(--font-mono);
}

.synth-school-flow__cutoff small {
  color: var(--text-3);
  font-size: 10px;
}

.synth-school-flow__knob {
  position: relative;
  width: 76px;
  height: 76px;
  display: block;
  border: 1px solid #090a0d;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #2c2f37, #16181d 65%, #101216);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.16),
    0 3px 7px rgba(0, 0, 0, 0.4);
}

.synth-school-flow__knob--control {
  padding: 0;
  cursor: ns-resize;
  touch-action: none;
}

.synth-school-flow__knob--control:focus-visible {
  box-shadow:
    var(--focus-ring),
    inset 0 1px 2px rgba(255, 255, 255, 0.16),
    0 3px 7px rgba(0, 0, 0, 0.4);
}

.synth-school-flow__knob--control:active {
  transform: translateY(1px);
}

.synth-school-flow__knob--control:disabled {
  cursor: not-allowed;
  opacity: 0.54;
}

.synth-school-flow__knob::before {
  content: "";
  position: absolute;
  bottom: 50%;
  left: calc(50% - 1.5px);
  width: 3px;
  height: 30px;
  border-radius: 2px;
  background: #dde3ec;
  transform: rotate(var(--flow-knob-turn, 0deg));
  transform-origin: 50% 100%;
}

.synth-school-flow__panel[data-state="inactive"],
.synth-school-flow__panel[data-state="error"] {
  filter: saturate(0.82);
}

.synth-school-play-card__handoff {
  min-height: 90px;
  padding: 18px 20px;
  display: grid;
  align-content: center;
  gap: 6px;
  border: 1px solid rgba(56, 145, 255, 0.3);
  border-radius: 12px;
  background: var(--accent-bg-soft);
}

.synth-school-play-card__handoff strong {
  color: var(--accent);
  font-size: 12px;
}

.synth-school-play-card__handoff span {
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.5;
}

.synth-school-beating {
  display: grid;
  gap: 18px;
}

.synth-school-beating__intro {
  margin-bottom: 0;
}

.synth-school-model-notice {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid rgba(var(--school-signal-violet-rgb), 0.28);
  border-radius: 12px;
  background: var(--school-signal-violet-soft);
}

.synth-school-model-notice strong {
  color: var(--school-signal-violet);
  font-size: 12px;
}

.synth-school-model-notice span {
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.45;
}

.synth-school-beating__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.synth-school-beating__controls button {
  min-width: 164px;
  padding: 13px 15px;
  display: grid;
  gap: 4px;
  border: 1px solid var(--school-line);
  border-radius: 12px;
  background: var(--school-surface);
  text-align: left;
  cursor: pointer;
}

.synth-school-beating__controls button:hover,
.synth-school-beating__controls button.is-selected {
  border-color: rgba(var(--school-signal-red-rgb), 0.4);
  background: var(--school-signal-red-soft);
}

.synth-school-beating__controls strong {
  font-size: 13px;
}

.synth-school-beating__controls span {
  color: var(--text-3);
  font-size: 11px;
}

.synth-school-beating__explanation {
  max-width: 840px;
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.6;
}

.synth-school-beating__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.synth-school-beating-panel {
  min-width: 0;
  margin: 0;
  padding: 18px;
  border: 1px solid var(--school-line);
  border-radius: 14px;
  background: var(--school-surface);
}

.synth-school-beating-panel--wide {
  grid-column: 1 / -1;
}

.synth-school-beating-panel figcaption {
  margin-bottom: 12px;
  color: var(--text-1);
  font-size: 12px;
  font-weight: 750;
}

.synth-school-beating-panel svg {
  width: 100%;
  display: block;
  overflow: hidden;
  border: 1px solid #282f34;
  border-radius: 12px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 45px),
    #11151b;
}

.synth-school-beating-panel line {
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 1;
}

.synth-school-beating-panel path {
  fill: none;
  stroke: var(--school-signal-red);
  stroke-width: 4;
  stroke-linecap: round;
}

.synth-school-beating-panel .is-a {
  stroke: var(--school-signal-red);
}

.synth-school-beating-panel .is-b {
  stroke: var(--school-signal-violet);
  opacity: 0.78;
}

.synth-school-beating-panel .is-envelope {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 8 8;
  opacity: 0.72;
}

.synth-school-beating-panel [hidden] {
  display: none;
}

.synth-school-beating__try {
  margin-top: 0;
}

.synth-school-play-surface {
  position: fixed;
  z-index: 25;
  inset: auto 0 0;
  height: 190px;
  padding: 13px clamp(18px, 3vw, 44px) 132px;
  display: grid;
  grid-template-columns: auto auto auto minmax(220px, 1fr);
  align-items: center;
  gap: 24px;
  border-top: 1px solid var(--school-line);
  background: var(--school-floor-bg);
  box-shadow: var(--school-shadow-floor);
}

.synth-school-play-surface__identity {
  display: flex;
  align-items: center;
  gap: 10px;
}

.synth-school-play-surface__identity strong,
.synth-school-play-surface__identity small,
.synth-school-play-surface__state strong,
.synth-school-play-surface__state span {
  display: block;
}

.synth-school-play-surface__identity strong {
  font-size: 12px;
}

.synth-school-play-surface__identity small {
  margin-top: 2px;
  color: var(--text-3);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.synth-school-play-surface__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #89938d;
  box-shadow: 0 0 0 4px rgba(105, 118, 111, 0.1);
}

.synth-school-play-surface[data-state="ready"] .synth-school-play-surface__dot {
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-bg-soft), 0 0 12px rgba(56, 145, 255, 0.4);
}

.synth-school-play-surface__state {
  padding-left: 24px;
  border-left: 1px solid var(--school-line);
}

.synth-school-play-surface__state strong {
  color: var(--text-1);
  font-size: 11px;
}

.synth-school-play-surface__state span {
  margin-top: 3px;
  color: var(--text-3);
  font-size: 10px;
}

.synth-school-play-surface__start {
  min-height: 38px;
  padding: 0 16px;
  white-space: nowrap;
}

.synth-school-play-surface > p {
  justify-self: end;
  margin: 0;
  color: var(--text-3);
  font-size: 10px;
  text-align: right;
}

.synth-school-play-surface__compact-help {
  display: none;
}

.synth-school-checkpoint {
  margin-top: 18px;
  padding: 28px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 1.1fr);
  gap: 24px;
  align-items: center;
}

.synth-school-trial-progress {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text-3);
  font-size: 11px;
}

.synth-school-trial-progress strong {
  color: var(--accent);
}

.synth-school-ear-player {
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(56, 145, 255, 0.24);
  border-radius: 14px;
  background: var(--accent-bg-soft);
}

.synth-school-ear-play {
  width: 100%;
  min-height: 68px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 13px;
  text-align: left;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: var(--school-chip);
  color: var(--text-1);
  cursor: pointer;
  touch-action: none;
}

.synth-school-ear-play > span:first-child {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
}

.synth-school-ear-play strong,
.synth-school-ear-play small {
  display: block;
}

.synth-school-ear-play small {
  margin-top: 4px;
  color: var(--text-3);
  font-size: 10px;
}

.synth-school-ear-play.is-playing {
  box-shadow: var(--accent-glow);
}

.synth-school-ear-feedback {
  min-height: 38px;
  margin-top: 12px !important;
}

.synth-school-checkpoint__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--school-line);
}

.synth-school-checkpoint__actions button,
.synth-school-complete button,
.synth-school-error button {
  min-width: 92px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--school-line);
  border-radius: var(--radius-pill);
  background: var(--school-chip);
  cursor: pointer;
}

.synth-school-checkpoint__actions button:hover,
.synth-school-checkpoint__actions button.is-selected {
  border-color: var(--accent);
  background: var(--accent-bg-soft);
}

.synth-school-checkpoint__actions .synth-school-primary {
  margin-left: auto;
  border-color: var(--accent);
  background: var(--accent);
}

.synth-school-checkpoint__actions button:disabled,
.synth-school-ear-play:disabled {
  opacity: 0.52;
  cursor: not-allowed;
}

.synth-school-transfer {
  margin-top: 18px;
  padding: 28px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(300px, 1.1fr);
  gap: 28px;
}

.synth-school-transfer[hidden] {
  display: none;
}

.synth-school-transfer__checks {
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
  list-style: none;
  color: var(--text-2);
  font-size: 12px;
}

.synth-school-transfer__checks li {
  display: flex;
  align-items: center;
  gap: 9px;
}

.synth-school-transfer__checks li span {
  width: 20px;
  color: var(--text-3);
  font-family: var(--font-mono);
}

.synth-school-transfer__checks li.is-done,
.synth-school-transfer__checks li.is-done span {
  color: var(--accent);
}

.synth-school-chord-pad {
  width: min(100%, 280px);
  margin-top: 18px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--accent-bg-soft);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.52);
  cursor: pointer;
}

.synth-school-chord-pad span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.synth-school-chord-pad strong {
  font-size: 12px;
}

.synth-school-chord-pad:active,
.synth-school-chord-pad:focus-visible {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  box-shadow: var(--accent-glow);
  outline: none;
}

.synth-school-reflection {
  padding: 20px;
  display: grid;
  gap: 10px;
  align-content: start;
  border: 1px solid var(--school-line);
  border-radius: 14px;
  background: var(--school-panel);
}

.synth-school-reflection label {
  color: var(--text-1);
  font-size: 12px;
  font-weight: 750;
}

.synth-school-reflection textarea {
  width: 100%;
  min-height: 104px;
  resize: vertical;
  padding: 12px;
  border: 1px solid var(--school-line);
  border-radius: 10px;
  background: var(--school-input-bg);
  color: var(--text-1);
  font: inherit;
  line-height: 1.5;
}

.synth-school-reflection textarea[aria-invalid="true"] {
  border-color: #a23b32;
  box-shadow: 0 0 0 3px rgba(162, 59, 50, 0.12);
}

.synth-school-reflection p {
  margin: 0 !important;
  font-size: 10px;
}

.synth-school-reflection button {
  min-height: 42px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  background: var(--school-chip);
  color: var(--accent);
  font-weight: 750;
  cursor: pointer;
}

.synth-school-reflection button:disabled {
  border-color: rgba(56, 145, 255, 0.28);
  background: var(--accent-bg-soft);
  cursor: default;
}

.synth-school-complete {
  grid-column: 1 / -1;
  padding-top: 20px;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 12px;
  border-top: 1px solid rgba(56, 145, 255, 0.3);
}

.synth-school-complete[hidden] {
  display: none;
}

.synth-school-complete > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
  font-weight: 900;
}

.synth-school-complete strong,
.synth-school-complete small {
  display: block;
}

.synth-school-complete small {
  margin-top: 3px;
  color: var(--text-3);
  font-size: 10px;
}

.synth-school-error {
  padding: 28px;
  border-color: #e3b5b0;
  background: #fff8f7;
}

.synth-school-error[hidden] {
  display: none;
}

.synth-school-error > div {
  margin-top: 18px;
  display: flex;
  gap: 10px;
}

@media (max-width: 1120px) {
  .synth-school-waveform {
    grid-template-columns: 28px 74px minmax(0, 1fr);
  }

  .synth-school-waveform__action {
    grid-column: 3;
  }

  .synth-school-flow__panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .synth-school-layout {
    display: block;
  }

  .synth-school-rail {
    padding: 18px 22px 0;
    border-right: 0;
  }

  .synth-school-rail__eyebrow,
  .synth-school-rail__note {
    display: none;
  }

  .synth-school-rail__list {
    margin: 0;
  }

  .synth-school-rail__list li {
    max-width: 310px;
  }

  .synth-school-main {
    padding-top: 24px;
  }

  .synth-school-title-row,
  .synth-school-start-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .synth-school-listen-grid,
  .synth-school-control-card,
  .synth-school-play-card,
  .synth-school-flow,
  .synth-school-beating__grid,
  .synth-school-transfer {
    grid-template-columns: 1fr;
  }

  .synth-school-flow {
    grid-template-areas:
      "copy"
      "scope"
      "panel";
  }

  .synth-school-flow__panel {
    grid-template-columns: 1fr;
  }

  .synth-school-flow__audio-path {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .synth-school-flow__audio-path li:not(:last-child)::before,
  .synth-school-flow__audio-path li:not(:last-child)::after {
    display: none;
  }
}

@media (max-width: 620px) {
  body.synth-school-workspace-active > .pianoroll-canvas {
    height: 84px !important;
  }

  .synth-school-header {
    min-height: 60px;
  }

  .synth-school-brand small {
    display: none;
  }

  .synth-school-main {
    padding: 24px 16px 190px;
  }

  .synth-school-title-row h1 {
    font-size: 36px;
  }

  .synth-school-waveforms {
    grid-template-columns: 1fr;
  }

  .synth-school-flow {
    padding: 22px;
  }

  .synth-school-flow__audio-path {
    grid-template-columns: 1fr;
  }

  .synth-school-flow__diagram {
    padding-bottom: 0;
  }

  .synth-school-flow__envelope {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    margin-top: 14px;
  }

  .synth-school-flow__envelope::before,
  .synth-school-flow__envelope::after {
    display: none;
  }

  .synth-school-adsr__readout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .synth-school-model-notice {
    align-items: flex-start;
    flex-direction: column;
  }

  .synth-school-beating__controls button {
    flex: 1 1 100%;
  }

  .synth-school-waveform {
    grid-template-columns: 24px 58px 1fr;
  }

  .synth-school-waveform__action {
    grid-column: 3;
  }

  .synth-school-waveform__icon {
    width: 58px;
  }

  .synth-school-scope__head,
  .synth-school-scope__footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .synth-school-scope__canvas {
    height: 170px;
  }

  .synth-school-play-surface {
    height: 136px;
    padding: 8px 14px 84px;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
  }

  .synth-school-play-surface__identity small {
    display: none;
  }

  .synth-school-play-surface > p {
    grid-column: 1 / -1;
    justify-self: start;
    font-size: 8px;
    text-align: left;
  }

  .synth-school-play-surface__start {
    min-height: 32px;
    padding-inline: 10px;
    font-size: 9px;
  }

  .synth-school-play-surface__state {
    padding-left: 10px;
  }

  .synth-school-play-surface__state span {
    max-width: 130px;
  }

  .synth-school-play-surface__desktop-help {
    display: none;
  }

  .synth-school-play-surface__compact-help {
    display: inline;
  }

  .synth-school-checkpoint {
    grid-template-columns: 1fr;
  }

  .synth-school-checkpoint__actions {
    justify-content: stretch;
  }

  .synth-school-checkpoint__actions .synth-school-primary {
    margin-left: 0;
  }

  .synth-school-checkpoint__actions button {
    flex: 1 1 42%;
  }

  .synth-school-complete {
    grid-template-columns: 34px 1fr;
  }

  .synth-school-complete button {
    grid-column: 1 / -1;
  }

  .synth-school-checkpoint__actions button,
  .synth-school-complete button,
  .synth-school-error button {
    min-height: 44px;
  }
}

/* Phrase Roll (Lesson 9 interactive sequencer). The viewport mirrors the
   scope screen so the school keeps exactly two instrument "screens". */
.synth-school-phrase {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.synth-school-phrase__viewport {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 12px;
  contain: layout paint size;
  height: clamp(250px, 34vw, 320px);
}

.synth-school-phrase__canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
  border: 1px solid #3a3037;
  border-radius: 12px;
  background: #10151c;
  box-shadow:
    inset 0 0 0 1px rgba(239, 79, 72, 0.06),
    0 0 24px rgba(101, 80, 168, 0.06);
}

.synth-school-phrase__canvas:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.synth-school-phrase__hint kbd {
  padding: 1px 5px;
  border: 1px solid var(--school-line);
  border-radius: 4px;
  background: var(--school-surface-raised);
  font: 600 10px/1.4 var(--font-mono);
  color: var(--text-2);
}

.synth-school-phrase__transport {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.synth-school-phrase__play {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--school-line);
  background:
    linear-gradient(180deg, rgba(var(--school-ink-rgb), 0.02), transparent 60%),
    var(--school-chip);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--school-shadow-card);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}

.synth-school-phrase__play svg path {
  fill: var(--school-signal-red);
}

.synth-school-phrase__play:hover:not(:disabled) {
  box-shadow: var(--school-shadow-pop);
}

.synth-school-phrase__play:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.synth-school-phrase__play.is-playing {
  border-color: var(--school-prophet-led-glow);
  box-shadow:
    0 0 0 1px var(--school-prophet-led-dim),
    0 0 18px var(--school-prophet-led-glow);
}

/* Scoped under the button so the curriculum figure's generic `svg { display:
   block }` rule cannot out-rank the icon swap. */
.synth-school-phrase__play .synth-school-phrase__icon-stop {
  display: none;
}

.synth-school-phrase__play.is-playing .synth-school-phrase__icon-play {
  display: none;
}

.synth-school-phrase__play.is-playing .synth-school-phrase__icon-stop {
  display: block;
}

.synth-school-phrase__loop {
  border: 1px solid var(--school-line);
  background: var(--school-surface-raised);
  border-radius: var(--radius-pill, 999px);
  padding: 8px 16px;
  font: 700 11px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  cursor: pointer;
}

.synth-school-phrase__loop:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.synth-school-phrase__loop.is-on {
  color: var(--school-signal-red);
  border-color: rgba(var(--school-signal-red-rgb), 0.45);
  background: var(--school-signal-red-soft);
}

.synth-school-phrase__readout {
  margin: 0 0 0 auto;
  color: var(--text-3);
  font: 600 11px/1.5 var(--font-mono);
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.synth-school-phrase__hint {
  margin: 0;
  color: var(--text-3);
  font-size: 11px;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .synth-school-workspace *,
  .synth-school-workspace *::before,
  .synth-school-workspace *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   DARK THEME — "studio at night"
   The paper surfaces dim to green-tinted charcoal on a five-step depth
   ladder (page → card → chip, inputs recess below the page, overlays
   float above it) while the already-dark instrument wells — scope
   glass, ADSR grid, Prophet faceplates — keep their exact hardware
   colors and become the deepest points on the page. Depth reads as
   lightness steps and hairlines instead of drop shadows; signal red
   and violet lift so small text keeps AA contrast on dark surfaces.
   ════════════════════════════════════════════════════════════════════ */

body.synth-school-workspace-active.synth-school-theme-dark {
  background: #0e1311;
  color: #e9efeb;
}

.synth-school-workspace[data-school-theme="dark"] {
  color-scheme: dark;
  --school-bg: #0e1311;
  --school-page-top: #151b18;
  --school-surface: #161d1a;
  --school-surface-raised: #1c2420;
  --school-chip: #1f2823;
  --school-input-bg: #0f1513;
  --school-line: rgba(215, 232, 223, 0.14);
  --school-header-bg: rgba(16, 21, 19, 0.96);
  --school-rail-bg: rgba(10, 14, 12, 0.55);
  --school-floor-bg: rgba(17, 23, 20, 0.97);
  --school-visual-grad-a: #151c19;
  --school-visual-grad-b: #171522;
  --school-signal-red: #ff4d68;
  --school-signal-red-rgb: 255, 77, 104;
  --school-signal-red-soft: rgba(255, 77, 104, 0.13);
  --school-signal-violet: #a85cff;
  --school-signal-violet-rgb: 168, 92, 255;
  --school-signal-violet-soft: rgba(168, 92, 255, 0.13);
  --school-ink: #e9efeb;
  --school-ink-rgb: 233, 239, 235;
  --school-copy: #aebcb4;
  --school-muted: #7f8d85;
  --school-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45);
  --school-shadow-pop: 0 10px 24px rgba(0, 0, 0, 0.5);
  --school-shadow-floor: 0 -10px 28px rgba(0, 0, 0, 0.55);
  --school-shadow-hw: 0 5px 14px rgba(0, 0, 0, 0.5);
  --school-header-edge: 0 1px 0 rgba(0, 0, 0, 0.4);
}

/* Instrument wells now sit inside dark cards — their bezel lines lighten
   so the recessed glass still reads as a separate object. */
.synth-school-workspace[data-school-theme="dark"] .synth-school-scope__canvas,
.synth-school-workspace[data-school-theme="dark"] .synth-school-phrase__canvas {
  border-color: rgba(158, 182, 193, 0.24);
}

.synth-school-workspace[data-school-theme="dark"] .synth-school-adsr svg,
.synth-school-workspace[data-school-theme="dark"] .synth-school-beating-panel svg {
  border-color: rgba(158, 182, 193, 0.2);
}

.synth-school-workspace[data-school-theme="dark"] .synth-school-brand__mark {
  background: #232b27;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.synth-school-workspace[data-school-theme="dark"] .synth-school-prophet-control {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 0 1px rgba(151, 175, 187, 0.14),
    var(--school-shadow-hw);
}

/* Faint violet washes disappear on charcoal; give them one lift step. */
.synth-school-workspace[data-school-theme="dark"] .synth-school-flow__module--amplifier {
  background: rgba(var(--school-signal-violet-rgb), 0.09);
}

.synth-school-workspace[data-school-theme="dark"] .synth-school-adsr__status {
  background: rgba(var(--school-signal-violet-rgb), 0.12);
}

.synth-school-workspace[data-school-theme="dark"] .synth-school-adsr__readout div {
  border-color: rgba(var(--school-signal-violet-rgb), 0.26);
  background: rgba(var(--school-signal-violet-rgb), 0.09);
}

.synth-school-workspace[data-school-theme="dark"] .synth-school-chord-pad {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.synth-school-workspace[data-school-theme="dark"] .synth-school-play-surface:not([data-state="ready"]) .synth-school-play-surface__dot {
  background: #5f6a63;
  box-shadow: 0 0 0 4px rgba(146, 160, 152, 0.12);
}

.synth-school-workspace[data-school-theme="dark"] .synth-school-lesson-state.is-error {
  color: #ff9d8f;
  border-color: rgba(255, 122, 102, 0.4);
  background: rgba(255, 96, 72, 0.1);
}

.synth-school-workspace[data-school-theme="dark"] .synth-school-error {
  border-color: rgba(255, 122, 102, 0.4);
  background: #211716;
}

.synth-school-workspace[data-school-theme="dark"] .synth-school-reflection textarea[aria-invalid="true"] {
  border-color: #ff8a76;
  box-shadow: 0 0 0 3px rgba(255, 122, 102, 0.18);
}