:root {
  --ink: #202124;
  --muted: #62676f;
  --paper: #f7f8f4;
  --panel: #ffffff;
  --line: #d9ded8;
  --teal: #0f8f88;
  --teal-dark: #0b615d;
  --red: #c84f3d;
  --yellow: #f5c542;
  --blue: #3459a6;
  --shadow: 0 18px 50px rgba(31, 42, 55, .12);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background:
    linear-gradient(135deg, rgba(15, 143, 136, .12), transparent 32%),
    linear-gradient(45deg, transparent 58%, rgba(200, 79, 61, .11)),
    var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  min-height: 100vh;
  margin: 0;
}

button,
input {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

.studio-shell {
  width: min(1820px, calc(100% - 32px));
  margin: 0 auto;
  padding: 22px 0 28px;
}

.topbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 0 18px;
}

/* The title column gets the SAME width on every page (sized to the widest
   title), so the nav pills wrap at identical points everywhere - headers
   stay the same height across all tools at any window size. */
@media (min-width: 821px) {
  .topbar > div:first-child {
    flex: 0 0 max(280px, 24vw);
  }
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--teal-dark);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

h1,
h2,
p,
figure {
  margin: 0;
}

h1 {
  font-size: clamp(1.9rem, 2.6vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: 0;
  white-space: nowrap;
}

h2 {
  font-size: 1rem;
  line-height: 1.2;
}

.topbar-note {
  border: 1px solid rgba(15, 143, 136, .28);
  border-radius: 999px;
  padding: 8px 13px;
  background: rgba(255, 255, 255, .7);
  color: var(--teal-dark);
  font-size: .88rem;
  font-weight: 800;
  white-space: nowrap;
}

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.tool-nav {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.tool-nav a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(15, 143, 136, .24);
  border-radius: 999px;
  padding: 8px 13px;
  background: rgba(255, 255, 255, .68);
  color: var(--ink);
  font-size: .86rem;
  font-weight: 860;
  text-decoration: none;
}

.tool-nav a.current {
  border-color: var(--teal);
  background: #e4f5ef;
  color: var(--teal-dark);
}

.workspace {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

/* The Studio tray lives in the artwork column, RIGHT under the canvas -
   on pages whose tools panel runs longer than the artwork (Painterly),
   the tray fills that space instead of dropping below the whole panel.
   The third row absorbs the tall panel's excess height so neither the
   canvas row nor the tray row gets stretched away from the artwork. */
.workspace {
  grid-template-rows: auto auto 1fr;
}

.workspace > .tools-panel {
  grid-column: 1;
  grid-row: 1 / span 3;
}

.workspace > .canvas-area {
  grid-column: 2;
  grid-row: 1;
}

.workspace > #studioFlow {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
}

.panel,
.canvas-frame {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .86);
  box-shadow: var(--shadow);
}

.panel {
  align-self: stretch;
  padding: 16px;
}

.panel-section + .panel-section {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.panel-section h2 {
  margin-bottom: 10px;
}

.button-row,
.mode-grid {
  display: grid;
  gap: 8px;
}

.button-row {
  grid-template-columns: 1fr 1fr;
}

.button-row.three {
  grid-template-columns: repeat(3, 1fr);
}

.mode-grid {
  grid-template-columns: 1fr;
}

.choice-button,
.mode-button,
.secondary-button,
.primary-button {
  min-height: 42px;
  border-radius: 8px;
  padding: 9px 11px;
  font-weight: 850;
  line-height: 1.05;
}

.choice-button,
.mode-button,
.secondary-button {
  border: 1px solid #cbd5d0;
  background: #fbfcf9;
  color: var(--ink);
}

.choice-button.active,
.mode-button.active {
  border-color: var(--teal);
  background: #e4f5ef;
  color: var(--teal-dark);
}

.upload-control {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  color: var(--muted);
  font-size: .9rem;
  font-weight: 760;
}

.upload-control input {
  width: 100%;
  color: var(--muted);
}

.sliders label {
  display: grid;
  gap: 8px;
  margin-top: 13px;
}

.sliders label span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: .9rem;
  font-weight: 800;
}

.sliders output {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

input[type="range"] {
  width: 100%;
  accent-color: var(--teal);
}

.actions {
  display: grid;
  gap: 9px;
}

.primary-button {
  background: var(--ink);
  color: #fff;
}

.secondary-button {
  color: var(--red);
}

.canvas-area {
  min-width: 0;
}

/* Long-panel pages: keep the artwork on screen while the controls scroll. */
.sticky-canvas .canvas-pair {
  position: sticky;
  top: 14px;
  height: auto;
  max-height: calc(100vh - 28px);
}

.sticky-canvas .canvas-frame {
  min-height: 0;
  max-height: calc(100vh - 28px);
}

.canvas-pair {
  display: grid;
  grid-template-columns: minmax(150px, .34fr) minmax(0, 1fr);
  gap: 16px;
  height: 100%;
}

.canvas-stage {
  display: grid;
  height: 100%;
}

#patternCanvas,
#motionCanvas,
#drawCanvas {
  cursor: crosshair;
  touch-action: none;
}

.canvas-frame {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 520px;
  overflow: hidden;
}

.canvas-frame figcaption {
  border-bottom: 1px solid var(--line);
  padding: 11px 13px;
  color: var(--muted);
  font-size: .83rem;
  font-weight: 900;
  text-transform: uppercase;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: #fdfdfb;
  object-fit: contain;
}

.hero-frame canvas {
  background:
    linear-gradient(90deg, rgba(15, 143, 136, .08), transparent),
    #fdfdfb;
}

.notes-panel {
  display: flex;
  flex-direction: column;
}

/* Course notes sit at the very bottom - kids rarely read them; they are
   for the teacher. Moving them (and the tray) below the artwork gives the
   iPad its drawing space. Sections flow side by side when there is room. */
.notes-panel.course-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px 30px;
  margin-top: 16px;
}

.notes-panel.course-notes .panel-section + .panel-section {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.notes-panel p {
  color: var(--muted);
  line-height: 1.55;
}

#modeTitle {
  margin-bottom: 10px;
  font-size: 1.35rem;
}

.prompt-list p {
  border-left: 4px solid var(--yellow);
  padding: 8px 0 8px 12px;
  color: var(--ink);
  font-weight: 820;
}

.prompt-list p + p {
  margin-top: 8px;
}

.research-note {
  margin-top: auto;
}

.sliders-single {
  display: grid;
  gap: 8px;
  margin-top: 13px;
}

.sliders-single span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: .9rem;
  font-weight: 800;
}

.sliders-single output {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.seg-status {
  margin-top: 12px;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.45;
}

.brushable {
  cursor: crosshair;
}

.brush-cursor {
  position: fixed;
  z-index: 30;
  width: var(--brush-size, 60px);
  height: var(--brush-size, 60px);
  border: 2px solid rgba(15, 143, 136, .86);
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .82),
    0 8px 24px rgba(15, 96, 92, .16);
  background: rgba(15, 143, 136, .08);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: width .08s ease, height .08s ease, border-color .08s ease, background-color .08s ease;
}

.brush-cursor.erase {
  border-color: rgba(200, 79, 61, .92);
  border-style: dashed;
  background: rgba(200, 79, 61, .08);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .86),
    0 8px 24px rgba(200, 79, 61, .16);
}

.brush-cursor.hidden {
  display: none;
}

/* Eraser mode wears a visible state on the whole canvas: on an iPad the ring
   cursor only exists while a finger is down (and hides under it), so without
   this a kid can't tell the next touch will rub marks away. */
.canvas-frame.erasing {
  position: relative;
  outline: 3px dashed rgba(200, 79, 61, .6);
  outline-offset: 2px;
}

.canvas-frame.erasing::after {
  content: "Eraser \2014  rub to remove";
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 5;
  pointer-events: none;
  padding: 6px 12px;
  border: 1.5px dashed rgba(255, 255, 255, .75);
  border-radius: 999px;
  background: rgba(200, 79, 61, .92);
  color: #fff;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(200, 79, 61, .3);
}

.brush-tools {
  margin-top: 10px;
}

.panel-button {
  width: 100%;
  margin-top: 12px;
}

.music-meter {
  display: block;
  width: 100%;
  height: 44px;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fdfdfb;
  object-fit: fill;
}

/* Code Conductor: a wider left panel hosts the force editor. */
.workspace.conduct-workspace {
  grid-template-columns: 430px minmax(0, 1fr);
}

.hidden {
  display: none !important;
}

/* Function brush: the conductor canvas becomes paper you draw on. */
canvas.brush-live {
  cursor: crosshair;
  touch-action: none;
}

canvas.brush-erasing {
  cursor: cell;
}

/* Overlay editor: a transparent textarea over a highlighted pre (the academy's
   iPad-safe pattern) - the pre paints the colors, the textarea owns the caret. */
.code-shell {
  position: relative;
  height: 340px;
  margin-top: 10px;
  border: 1px solid #cbd5d0;
  border-radius: 8px;
  background: #fbfcf9;
  overflow: hidden;
}

.code-shell:focus-within {
  outline: 2px solid var(--teal);
  outline-offset: -1px;
}

.code-text {
  margin: 0;
  padding: 12px;
  font: 600 13px/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  white-space: pre;
  tab-size: 2;
}

.code-highlight {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: var(--ink);
}

.code-highlight code {
  font: inherit;
  white-space: inherit;
}

.code-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color: transparent;
  -webkit-text-fill-color: transparent;
  caret-color: var(--ink);
  resize: none;
  overflow: auto;
  outline: none;
}

.code-input::selection {
  background: rgba(15, 143, 136, .22);
}

.tok-comment { color: #79806f; font-style: italic; }
.tok-string { color: #0f8f88; }
.tok-keyword { color: #3459a6; font-weight: 800; }
.tok-number { color: #c84f3d; }
.tok-builtin { color: #5c4db1; font-weight: 750; }
.tok-call { color: #8a5a00; }

.code-status {
  margin-top: 10px;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: .84rem;
  font-weight: 750;
  line-height: 1.5;
  white-space: pre-wrap;
}

.code-status.ok {
  background: #e4f5ef;
  color: var(--teal-dark);
}

.code-status.err {
  background: #faeae6;
  color: #8c3628;
}

.contract-line {
  margin-top: 8px;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.5;
}

.contract-line code {
  background: #eef2ee;
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--teal-dark);
  font: 700 .82rem ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

button:disabled,
input:disabled {
  opacity: .45;
  cursor: default;
}

.secondary-button.recording {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

/* Draw Alive Studio: brush color swatches. */
.swatch-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.swatch {
  height: 34px;
  border: 2px solid rgba(32, 33, 36, .18);
  border-radius: 8px;
}

.swatch.active {
  outline: 3px solid var(--teal);
  outline-offset: 1px;
}
input.swatch-any {
  padding: 3px;
  border-radius: 12px;
  background: conic-gradient(#e0614d, #f5c542, #6bbf59, #0f8f88, #3459a6, #8a5fbf, #e0614d);
  cursor: pointer;
}

input.swatch-any::-webkit-color-swatch-wrapper {
  padding: 0;
}

input.swatch-any::-webkit-color-swatch {
  border: none;
  border-radius: 8px;
}

.guess-line {
  margin: 0 0 10px;
  font-size: .95rem;
  font-weight: 600;
  color: #14453f;
}

.guess-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.guess-chip {
  border: 1px solid rgba(15, 76, 71, .3);
  background: rgba(15, 143, 136, .08);
  color: #0b3f3a;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
}

.guess-chip:hover {
  background: rgba(15, 143, 136, .18);
}

.guess-chip:first-child {
  background: rgba(15, 143, 136, .22);
  border-color: rgba(15, 76, 71, .5);
}


.layer-list {
  display: grid;
  gap: 8px;
}

.layer-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  row-gap: 6px;
}

.layer-swatch {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(32, 33, 36, .25);
  border-radius: 5px;
}

.layer-name {
  color: var(--ink);
  font-size: .82rem;
  font-weight: 820;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.layer-material {
  grid-column: 2 / 3;
  min-height: 34px;
  border: 1px solid #cbd5d0;
  border-radius: 6px;
  padding: 4px 6px;
  background: #fbfcf9;
  color: var(--ink);
  font-size: .8rem;
  font-weight: 780;
}

.layer-eye {
  grid-column: 2 / 3;
  justify-self: start;
  min-height: 30px;
  border: 1px solid #cbd5d0;
  border-radius: 6px;
  padding: 4px 10px;
  background: #fbfcf9;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 820;
}

.layer-eye[aria-pressed="false"] {
  color: var(--red);
  border-color: rgba(200, 79, 61, .4);
}

.studio-flow {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .86);
  box-shadow: var(--shadow);
}

.flow-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.flow-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.flow-actions .secondary-button {
  min-height: 38px;
  padding: 8px 13px;
}

.flow-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.flow-empty {
  color: var(--muted);
  line-height: 1.5;
}

.flow-thumb {
  flex: 0 0 auto;
  width: 168px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fdfdfb;
}

.flow-thumb img {
  display: block;
  width: 100%;
  height: 112px;
  object-fit: cover;
  background: #fdfdfb;
}

.flow-thumb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px;
}

.flow-thumb-actions button {
  flex: 1 1 auto;
  min-height: 32px;
  border: 1px solid #cbd5d0;
  border-radius: 6px;
  padding: 5px 8px;
  background: #fbfcf9;
  color: var(--ink);
  font-size: .78rem;
  font-weight: 820;
}

@media (max-width: 1200px) {
  .workspace {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .workspace.conduct-workspace {
    grid-template-columns: 380px minmax(0, 1fr);
  }

}

@media (max-width: 820px) {
  .studio-shell {
    width: min(100% - 18px, 760px);
    padding-top: 12px;
  }

  h1 {
    font-size: clamp(1.7rem, 6vw, 2.3rem);
    white-space: normal;
  }

  .topbar {
    display: block;
  }

  .topbar-actions,
  .tool-nav {
    justify-content: flex-start;
  }

  .topbar-note {
    display: inline-block;
    margin-top: 12px;
  }

  .workspace,
  .workspace.conduct-workspace,
  .canvas-pair {
    grid-template-columns: 1fr;
  }

  .workspace {
    grid-template-rows: none;
  }

  .workspace > .tools-panel,
  .workspace > .canvas-area,
  .workspace > #studioFlow {
    grid-column: auto;
    grid-row: auto;
  }

  .canvas-frame {
    min-height: 330px;
  }

  .button-row {
    grid-template-columns: 1fr;
  }
}