/* Ivan studio surface. Spec: docs/STUDIO_DESIGN.md. Three faces, two
   colours (ink and oxide), hairlines only, opacity and transform only.
   Newsreader ships its optical-size axis: the 40 px question gets the
   display cut and the 17 px script the text cut from the same file. */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/newsreader.10fc876f9f21.woff2") format("woff2-variations"), url("/assets/fonts/newsreader.10fc876f9f21.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter.ee755325418c.woff2") format("woff2-variations"), url("/assets/fonts/inter.ee755325418c.woff2") format("woff2");
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/geist-mono.8af39dc3c10c.woff2") format("woff2-variations"), url("/assets/fonts/geist-mono.8af39dc3c10c.woff2") format("woff2");
}

/* ---------- Tokens ---------- */

.drawing-editor { width: min(1180px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 24px; border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); box-shadow: var(--sheet-shadow); overflow: auto; }
.drawing-editor::backdrop { background: rgba(0,0,0,.52); }
.drawing-editor > header { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 20px; }
.drawing-editor h2 { font: 500 28px/1.2 var(--serif); margin: 4px 0 0; }
.editor-eyebrow { font: 11px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); margin: 0; }
.drawing-editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: 28px; align-items: start; }
.drawing-workspace { min-width: 0; }
.drawing-toolbar { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; font: 12px/1.5 var(--sans); color: var(--ink-3); }
.drawing-toolbar span { flex: 1; }
.drawing-canvas { position: relative; aspect-ratio: var(--video-aspect); width: min(100%, calc((100dvh - 200px) * var(--video-aspect))); margin: 0 auto; background: #f4f1e7; border: 1px solid var(--line); overflow: hidden; touch-action: none; cursor: crosshair; }
.drawing-canvas img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
.drawing-selection { position: absolute; border: 2px solid #4f6fd8; background: rgba(79,111,216,.05); box-shadow: 0 0 0 1px #ffffff99; pointer-events: none; box-sizing: border-box; }
.drawing-inspector { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.drawing-inspector label { display: block; font: 12px/1.5 var(--sans); color: var(--ink-2); }
.drawing-inspector input:not([type=checkbox]), .drawing-inspector select, .drawing-inspector textarea { width: 100%; box-sizing: border-box; margin-top: 6px; padding: 9px 10px; border: 1px solid var(--line-2); border-radius: 4px; color: var(--ink); background: var(--paper-2); font: 13px/1.5 var(--sans); }
.drawing-inspector textarea { resize: vertical; min-height: 100px; }
.drawing-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.drawing-inspector .drawing-check { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.drawing-check input { accent-color: var(--oxide); }
.drawing-color { display: flex; gap: 10px; align-items: center; margin: 6px 0 16px; }
.drawing-color input[type=color] { width: 40px; height: 32px; padding: 2px; margin: 0; }
.drawing-apply { border-top: 1px solid var(--line); padding-top: 16px; }
.drawing-apply .revision-submit { width: 100%; }
.drawing-inspector #drawing-reset { margin-top: 12px; }
.drawing-editor button:disabled { opacity: .45; cursor: default; }
.estimate-price { margin: 24px 0 4px; font: 500 30px/1.2 var(--serif); }
.edit-estimate footer { display: flex; justify-content: flex-end; align-items: center; gap: 24px; }
.video-update { padding: 12px 16px; margin-bottom: 20px; border: 1px solid var(--line-2); background: var(--paper-2); display: flex; gap: 20px; justify-content: space-between; align-items: center; font: 13px/1.5 var(--sans); }
.video-update[hidden] { display: none; }
.video-update p { margin: 0; }
.video-edits { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 14px; font: 12px/1.6 var(--sans); color: var(--ink-2); }
.video-edits summary { cursor: pointer; }
.video-edits ol { list-style: none; padding: 0; margin: 12px 0; }
.video-edits li { display: flex; justify-content: space-between; gap: 20px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.video-edits li span:last-child { white-space: nowrap; font-family: var(--mono); }
@media (max-width: 760px) {
  .drawing-editor { width: calc(100vw - 16px); padding: 16px; max-height: calc(100dvh - 16px); }
  .drawing-editor-layout { grid-template-columns: 1fr; gap: 18px; }
  .drawing-editor > header { margin-bottom: 14px; }
  .drawing-editor h2 { font-size: 23px; }
  .drawing-toolbar { gap: 12px; }
  .drawing-inspector { padding-bottom: 8px; }
  .video-update { align-items: flex-start; }
}

/* The light palette stands alone first, so a browser without light-dark()
   (before the baseline in STUDIO_DESIGN 12) stays on paper in both schemes;
   the @supports block below pairs each token with its dark value. */
:root {
  color-scheme: light dark;
  --paper: #f6f2ea;
  --paper-2: #ece6da;
  --ink: #1c1a17;
  --ink-2: #5b5750;
  --ink-3: #6f6a60;
  --ink-4: #9a9488;
  --line: #ddd6c8;
  --line-2: #c6bdab;
  --film: #141210;
  --cream: #efe8da;
  --cream-2: #b8b0a2;
  --oxide: #9a3b2c;
  --selection: rgba(28, 26, 23, 0.12);
  --scrim: rgba(20, 18, 16, 0.14);
  --frame-edge: rgba(28, 26, 23, 0.1);
  --sheet-shadow: 0 0 0 1px var(--line-2), 0 24px 64px rgba(0, 0, 0, 0.16);
  --chip-bg: rgba(20, 18, 16, 0.72);
  --overlay-bg: rgba(20, 18, 16, 0.82);
  --serif: "Newsreader", Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", sans-serif;
  --mono: "Geist Mono", Menlo, ui-monospace, "SF Mono", Consolas, monospace;
  --ease-in: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.4, 0, 1, 1);
  --gutter: clamp(20px, 6vw, 120px);
  --col-max: 1200px;
  --bar-h: 52px;
  --script-w: 320px;
  --spread-gap: 48px;
  --frame-chrome: 300px;
  /* The run's frame shape: 16 / 9 unless the page is viewing a portrait
     run, when the root carries data-format="portrait". The spread column,
     the frame, the chapter thumbnail and the drawing canvas all read it. */
  --video-aspect: 16 / 9;
  --sheet-history-w: 360px;
  --sheet-inspect-w: 520px;
  --t-fast: 150ms;
  --t-chip: 200ms;
  --t-arrive: 320ms;
  --t-fade: 400ms;
  --t-sheet: 480ms;
  --t-spread: 600ms;
}

@supports (color: light-dark(#000, #fff)) {
  :root {
    --paper: light-dark(#f6f2ea, #161412);
    --paper-2: light-dark(#ece6da, #1e1b18);
    --ink: light-dark(#1c1a17, #ede7db);
    --ink-2: light-dark(#5b5750, #b3ac9f);
    --ink-3: light-dark(#6f6a60, #948d80);
    --ink-4: light-dark(#9a9488, #6b655b);
    --line: light-dark(#ddd6c8, #2c2823);
    --line-2: light-dark(#c6bdab, #3d3830);
    --film: light-dark(#141210, #0b0a09);
    --oxide: light-dark(#9a3b2c, #d9806c);
    --selection: light-dark(rgba(28, 26, 23, 0.12), rgba(237, 231, 219, 0.16));
    --frame-edge: light-dark(rgba(28, 26, 23, 0.1), #2c2823);
    --sheet-shadow: 0 0 0 1px var(--line-2), 0 24px 64px light-dark(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.5));
  }
}

html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

@media (min-width: 1800px) {
  :root { --col-max: 1320px; }
}

/* ---------- Base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
}

body {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
  overflow-x: hidden;
}

::selection { background: var(--selection); }

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  border-radius: 0;
}

button { cursor: pointer; text-align: left; }

.author-options { margin: 12px 4px 0; color: var(--ink-3); font-size: 12px; }
.author-options summary { cursor: pointer; width: fit-content; }
.author-options-fields { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 12px; }
.author-options-fields label { display: grid; gap: 6px; flex: 1 1 150px; }
.author-options-fields label:first-child { flex: 2 1 260px; }
.author-options-fields input, .author-options-fields select { box-sizing: border-box; width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 6px; padding: 9px 10px; color: var(--ink); background: var(--paper); }
.author-options-fields input:focus-visible, .author-options-fields select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
button:disabled { cursor: default; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.frame :focus-visible {
  outline-color: var(--cream);
  outline-offset: -3px;
}

kbd { font-family: var(--mono); font-weight: 400; }

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mono,
.elapsed,
.time,
.chip,
.frame-line,
.engine,
.count,
.meta,
.status-word,
.row-meta,
.scene-number,
.json,
.gantt-num,
.call-num,
.overview dd,
.rail-tip-text {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.text-link {
  font: 500 13px/18px var(--sans);
  color: var(--ink-2);
  transition: color var(--t-fast) var(--ease-in);
}

.text-link:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-2);
  text-underline-offset: 0.16em;
}

.text-button {
  font: 500 14px/20px var(--sans);
  color: var(--ink);
  height: 32px;
  padding: 0 12px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--line-2);
  transition: background-color var(--t-fast) var(--ease-in);
}

.text-button:hover { background: var(--paper-2); }
.text-button:active { opacity: 0.8; }
.text-button:disabled { color: var(--ink-4); }

/* The one action a stopped run wants first: filled like Explain, with its
   icon, so it cannot be mistaken for a secondary link. */
.text-button.is-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px 0 14px;
  background: var(--ink);
  color: var(--paper);
  box-shadow: none;
}
.text-button.is-primary:hover { background: var(--ink); opacity: 0.9; }
.text-button.is-primary:disabled { background: var(--ink-4); color: var(--paper); opacity: 1; }
.text-button.is-primary svg { width: 16px; height: 16px; flex: none; }
.run-actions { align-items: center; }

/* ---------- Page and bar ---------- */

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* A docked Inspect snaps the column to the remaining width: 24 px gutters
   either side of the 520 px sheet (1440 → 872, 1280 → 712), which keeps 1440
   well clear of the stacked threshold below. */
.page.is-docked { --gutter: 24px; }

.page.is-docked .bar,
.page.is-docked .main { padding-right: calc(var(--sheet-inspect-w) + var(--gutter)); }

.bar {
  position: sticky;
  top: 0;
  z-index: 5;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  padding: 0 var(--gutter);
  background: var(--paper);
  transition: box-shadow var(--t-fast) var(--ease-in);
}

/* The bar's content shares the column box with the title and the spread, so
   the wordmark sits on the question's left edge and the links end where the
   elapsed does; the bar itself stays full-bleed for the sticky hairline. */
.bar-inner {
  flex: 1;
  max-width: var(--col-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bar.is-scrolled { box-shadow: 0 1px 0 var(--line); }

.wordmark {
  font: 600 20px/24px var(--serif);
  font-optical-sizing: auto;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-decoration: none;
}

.bar-links {
  display: flex;
  gap: 24px;
}

.bar-link {
  font: 500 13px/18px var(--sans);
  color: var(--ink-2);
  padding: 4px 0;
  transition: color var(--t-fast) var(--ease-in);
}

.bar-link:hover { color: var(--ink); }

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 var(--gutter);
}

.composer,
.run {
  width: min(var(--col-max), 100%);
  margin: 0 auto;
}

/* ---------- Composer ---------- */

.composer {
  padding-top: calc(38vh - var(--bar-h));
  padding-bottom: 96px;
  transition: opacity 240ms var(--ease-out);
}

.composer.is-leaving { opacity: 0; }

.composer-form {
  width: min(680px, 100%);
}

.field-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.field {
  flex: 1;
  min-width: 0;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 24px;
  line-height: 32px;
  font-weight: 400;
  font-feature-settings: "kern", "liga";
  color: var(--ink);
  caret-color: var(--ink);
  padding: 6px 0 8px;
  resize: none;
  overflow: hidden;
  min-height: 46px;
  max-height: 270px;
  box-shadow: inset 0 -1px 0 var(--line-2);
  transition: box-shadow var(--t-fast) var(--ease-in);
  field-sizing: content;
}

.field.is-tall { overflow-y: auto; }
.field::placeholder { color: var(--ink-3); opacity: 1; }
.field:focus { box-shadow: inset 0 -1px 0 var(--ink); }
.field:focus-visible { outline: none; }

/* Dictate: a quiet mic beside the field; the oxide dot pulses while it listens. */
.dictate {
  flex: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-top: 1px;
  border-radius: 4px;
  color: var(--ink-2);
  transition: color var(--t-fast) var(--ease-in), background-color var(--t-fast) var(--ease-in);
}

.dictate:hover { color: var(--ink); }
.dictate:active { background: var(--line-2); }
.dictate:disabled { color: var(--ink-4); }
.dictate.is-busy { color: var(--ink-3); }
.dictate.is-recording { color: var(--ink); }

.dictate-dot {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--oxide);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--t-fast) var(--ease-in), transform var(--t-fast) var(--ease-in);
}

.dictate.is-recording .dictate-dot {
  opacity: 1;
  transform: none;
  animation: dictate-pulse 1.4s ease-in-out infinite;
}

@keyframes dictate-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.explain {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 14px 0 16px;
  margin-top: 1px;
  border-radius: 4px;
  background: var(--ink);
  color: var(--paper);
  font: 500 14px/20px var(--sans);
  transition: opacity var(--t-fast) var(--ease-in);
}

.explain kbd {
  font-size: 12px;
  line-height: 16px;
  color: var(--paper);
  opacity: 0.6;
}

.explain:hover { opacity: 0.9; }
.explain:active { opacity: 0.8; }
.explain:disabled { background: var(--ink-4); opacity: 1; }
.explain.is-busy { opacity: 0.7; }

.composer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  min-height: 28px;
}

.composer-left,
/* Two dot-separated groups (length, voice) sit side by side; the space
   between them is wider than the space within each. */
.composer-right {
  display: flex;
  align-items: center;
  gap: 28px;
  min-width: 0;
}

.try {
  font: 400 13px/18px var(--sans);
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--t-fast) var(--ease-in);
}

.try:hover { color: var(--ink); }

.count { color: var(--ink-3); }
.count.is-over { color: var(--oxide); }

.segmented {
  display: inline-flex;
  align-items: center;
  border: 0;
  padding: 0;
  margin: 0;
}

.segmented label {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.segmented label + label::before {
  content: "·";
  color: var(--ink-4);
  padding: 0 6px;
  font: 400 13px/18px var(--sans);
}

.segmented input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.segmented span {
  display: inline-block;
  padding: 5px 2px;
  font: 400 13px/18px var(--sans);
  color: var(--ink-3);
  transition: color var(--t-fast) var(--ease-in);
}

.segmented label:hover span { color: var(--ink-2); }
.segmented input:checked + span { color: var(--ink); }
.segmented input:focus-visible + span {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 4px;
}

.engine {
  margin: 16px 0 0;
  color: var(--ink-3);
  min-height: 16px;
}

.engine.is-missing { color: var(--oxide); font-family: var(--sans); font-size: 13px; line-height: 18px; }

.composer-error {
  margin: 8px 0 0;
  font: 400 13px/18px var(--sans);
  color: var(--oxide);
  min-height: 0;
}

.composer-error:empty { display: none; }

/* Recently */

.recently { margin-top: 64px; max-width: 680px; }

.recently-label {
  margin: 0 0 4px;
  font: 500 13px/18px var(--sans);
  color: var(--ink-3);
}

.row-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The Recently list is one grid: each item and its button are subgrids, so
   the question, the meta and the status word sit in columns shared by every
   row and the dates line up down the page. */
.recently .row-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.recently .row-list > li,
.recently .row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 0;
  width: 100%;
  min-height: 44px;
  padding: 10px 0;
  box-shadow: inset 0 -1px 0 var(--line);
  color: var(--ink);
  transition: background-color var(--t-fast) var(--ease-in);
}

.row:hover { background: var(--paper-2); }
.row.is-current { background: var(--paper-2); }

.row-question {
  font: 500 14px/20px var(--sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row-meta { color: var(--ink-3); white-space: nowrap; margin-left: 16px; }
.status-word { color: var(--ink-3); white-space: nowrap; }
.status-word.is-failed { color: var(--oxide); }
.status-word:empty { display: none; }

/* An empty status word keeps its cell so the shared column stays put, and the
   gap belongs to the word itself so a list with nothing to say ends flush
   with the column. */
.row .status-word:empty { display: block; }
.row .status-word:not(:empty) { margin-left: 16px; }

.all-runs { margin-top: 12px; }

/* ---------- Run: title block ---------- */

.run {
  padding-bottom: 16px;
  container-type: inline-size;
  container-name: column;
}

.title-block { padding-top: 64px; }

.question {
  margin: 0;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-feature-settings: "kern", "liga";
  color: var(--ink);
  overflow-wrap: anywhere;
  hanging-punctuation: first allow-end;
  transform-origin: 0 0;
  will-change: transform;
}

.question.is-lifting { transition: transform var(--t-sheet) var(--ease-in); }

.question.q-40 { font-size: 40px; line-height: 46px; font-weight: 400; letter-spacing: -0.006em; text-wrap: balance; }
.question.q-28 { font-size: 28px; line-height: 34px; font-weight: 450; letter-spacing: 0; text-wrap: balance; }
.question.q-19 {
  font-size: 19px;
  line-height: 26px;
  font-weight: 450;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.question.q-19.is-expanded { display: block; -webkit-line-clamp: none; overflow: visible; }

.read-all { margin-top: 4px; }

.running-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-top: 8px;
  padding-bottom: 12px;
  box-shadow: inset 0 -1px 0 var(--line);
  transition: opacity var(--t-arrive) var(--ease-in);
}

/* Held back while the question lifts into the title: hidden at once, shown
   with the fade above. */
.running-row.is-arriving { opacity: 0; transition: none; }

.running {
  flex: 1;
  min-width: 0;
  margin: 0;
  font: 500 14px/20px var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.running.is-failed { color: var(--ink); }

.dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--oxide);
  align-self: center;
}

.dot.is-ink { background: var(--ink); }

.reconnecting {
  font: 400 13px/18px var(--sans);
  color: var(--ink-2);
}

.elapsed {
  flex: none;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--ink-2);
  min-width: 4ch;
  text-align: right;
}

.failure { margin-top: 12px; }

.raw-error {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 18px;
  color: var(--ink-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-height: 36px;
}

.raw-error.is-expanded {
  display: block;
  -webkit-line-clamp: none;
  max-height: none;
  overflow: visible;
}

.failure-actions {
  display: flex;
  gap: 16px;
  margin-top: 4px;
}

.run-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

/* ---------- Spread ---------- */

/* The frame is sized from the viewport alone (spec section 4): the column
   less the script and its gap, or the 16:9 box that fits under 300 px of
   chrome, whichever is narrower. Nothing on the page resizes it; a taller
   title block or a failure block scrolls the page instead. The script track
   is fixed so its measure never changes between runs. */
.spread {
  margin-top: 12px;
  display: grid;
  grid-template-columns: min(100% - var(--script-w) - var(--spread-gap), max(320px, (100vh - var(--frame-chrome)) * var(--video-aspect))) var(--spread-gap) var(--script-w);
  align-items: stretch;
  transition: opacity var(--t-spread) var(--ease-in), transform var(--t-spread) var(--ease-in);
}

.spread.is-arriving { opacity: 0; transform: translateY(16px); }

.film {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.frame {
  position: relative;
  aspect-ratio: var(--video-aspect);
  background: var(--film);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--frame-edge);
  color: var(--cream);
}

.layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--t-fade) var(--ease-in);
  pointer-events: none;
}

.layer.is-visible { opacity: 1; }

.video { object-fit: contain; background: var(--film); }
.drawing { object-fit: contain; background: #fff; }

/* The first picture arrives over the drawing with the frame's fade; from the
   first swap on, every change of picture is a cut, as it is in final.mp4. */
.frame.is-cut .video { transition: none; }

.status-layer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
}

.frame-title {
  margin: 0;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 22px;
  line-height: 30px;
  font-weight: 400;
  color: var(--cream);
  text-wrap: balance;
}

.frame-line {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--cream-2);
  min-height: 18px;
}

.frame-line:empty { display: none; }

.chip {
  position: absolute;
  left: 12px;
  bottom: 12px;
  margin: 0;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--chip-bg);
  color: var(--cream-2);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-chip) var(--ease-in), visibility var(--t-chip);
  pointer-events: none;
}

.chip.is-shown { opacity: 1; visibility: visible; }

.frame-error {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 4px;
  background: var(--chip-bg);
  color: var(--cream);
  font: 400 13px/18px var(--sans);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.play-big {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--cream);
  cursor: pointer;
}

/* The overlay sits over a white drawing or a paused frame as often as over
   film, so the ring and the label carry their own dark backing; cream on it
   reads at 6:1 or better whatever the picture. */
.play-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--chip-bg);
  box-shadow: inset 0 0 0 1px var(--cream);
  transition: background-color var(--t-fast) var(--ease-in);
}

.play-ring svg { margin-left: 3px; }
.play-big:hover .play-ring { background: var(--overlay-bg); }

.play-big-label {
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--overlay-bg);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 16px;
  color: var(--cream);
}

/* Controls */

/* Native caption cues sit low on the drawing in both schemes. */
video::cue {
  font-family: Inter, system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.35;
  color: #f6f2ea;
  background: rgba(22, 20, 18, 0.82);
}

.controls {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-2);
}

.control {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 40px;
  color: var(--ink-2);
  transition: color var(--t-fast) var(--ease-in);
}

.control.play { width: 44px; margin-left: -12px; }
.controls.is-inert .control,
.controls.is-inert .time { color: var(--ink-4); }
.controls.is-inert .control { pointer-events: none; }
.control:hover { color: var(--ink); }
.control[aria-pressed="true"] { color: var(--ink); }
.control .icon { display: block; }
.control.play .icon-pause,
.control.play.is-playing .icon-play { display: none; }
.control.play.is-playing .icon-pause { display: block; }
.control.mute .icon-muted,
.control.mute[aria-pressed="true"] .icon-sound { display: none; }
.control.mute[aria-pressed="true"] .icon-muted { display: block; }

.time {
  flex: none;
  color: var(--ink-2);
  padding: 0 8px 0 0;
  white-space: nowrap;
}

.time-now { display: inline-block; min-width: 4ch; text-align: right; }
.time-total { display: inline-block; min-width: 4ch; }
.time-sep { color: var(--ink-4); }

.rail {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 24px;
  cursor: pointer;
  touch-action: none;
}

.rail:focus-visible { outline-offset: 0; }

.rail-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 11px;
  height: 2px;
  display: flex;
  gap: 3px;
}

.chapter {
  flex: 1 1 0;
  height: 2px;
  background: var(--line);
  transition: background-color var(--t-chip) var(--ease-in), opacity var(--t-arrive) var(--ease-in);
  border-radius: 1px;
}

.chapter.is-ready { background: var(--ink); }
.chapter.is-failed { background: var(--oxide); }
.chapter.is-arriving { opacity: 0; }

.chapter.stub {
  background: repeating-linear-gradient(90deg, var(--line-2) 0 2px, transparent 2px 5px);
}

.playhead {
  position: absolute;
  top: 6px;
  left: 0;
  width: 1px;
  height: 12px;
  background: var(--ink);
  opacity: 0;
  transition: opacity var(--t-chip) var(--ease-in);
  will-change: transform;
}

.playhead.is-visible { opacity: 1; }

.rail-tip {
  position: absolute;
  bottom: 28px;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  pointer-events: none;
  z-index: 3;
  transform: translateX(-50%);
}

.rail-thumb {
  display: block;
  width: 160px;
  aspect-ratio: var(--video-aspect);
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line-2), 0 8px 24px rgba(0, 0, 0, 0.16);
  object-fit: contain;
}

.rail-tip-text {
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--ink);
  color: var(--paper);
  white-space: nowrap;
}

.under-frame {
  min-height: 0;
  display: flex;
  justify-content: flex-end;
  gap: 20px;
}

.under-frame .text-link { padding: 4px 0; }

/* Fullscreen: the frame container is requested so the bar and chip persist. */

.film:fullscreen {
  background: var(--film);
  display: block;
}

.film:fullscreen .frame {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
}

/* A portrait run: the same spread with a tall, narrow frame column. The
   chapter thumbnail keeps its height rather than its width. */
:root[data-format="portrait"] { --video-aspect: 9 / 16; }
:root[data-format="portrait"] .rail-thumb { width: 90px; }

.film:fullscreen .controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 16px;
  background: rgba(20, 18, 16, 0.82);
  color: var(--cream);
  transition: opacity var(--t-chip) var(--ease-in);
}

.film:fullscreen .control,
.film:fullscreen .time { color: var(--cream); }
.film:fullscreen .chapter { background: rgba(239, 232, 218, 0.3); }
.film:fullscreen .chapter.is-ready { background: var(--cream); }
.film:fullscreen .playhead { background: var(--cream); }
.film:fullscreen.is-idle .controls { opacity: 0; }
.film:fullscreen .under-frame { display: none; }

/* Script column */

.script {
  grid-column: 3;
  position: relative;
  min-width: 0;
  min-height: 0;
}

.script-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 24px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
  mask-image: linear-gradient(to bottom, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}

.script-scroll:focus-visible { outline-offset: -2px; }

.script-list {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-inline-start: 16px;
  position: relative;
}

/* Logical inset: the scroll region takes its direction from the script, so
   the bar sits on the reading side for right-to-left languages too. */
.gutter-bar {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 2px;
  height: 100px;
  background: var(--ink);
  transform-origin: 0 0;
  opacity: 0;
  transition: transform var(--t-chip) var(--ease-in), opacity var(--t-chip) var(--ease-in);
  will-change: transform;
}

.gutter-bar.is-visible { opacity: 1; }

.scene { padding-bottom: 24px; }
.scene:last-child { padding-bottom: 0; }

.scene.is-arriving {
  animation: arrive var(--t-arrive) var(--ease-in) both;
  animation-delay: var(--stagger, 0ms);
}

@keyframes arrive {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.scene-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 8px;
  width: 100%;
  color: var(--ink);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  transition: color var(--t-fast) var(--ease-in);
}

.scene-heading:hover .scene-title { color: var(--ink-2); }
.scene-number { color: var(--ink-3); }
.scene-title { min-width: 0; overflow-wrap: anywhere; }
.scene-heading .status-word { color: var(--ink-3); }
.scene-heading .status-word.is-failed { color: var(--oxide); }

.beat {
  margin: 8px 0 0;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 17px;
  line-height: 26px;
  font-weight: 400;
  color: var(--ink);
  overflow-wrap: anywhere;
  text-wrap: pretty;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
  transition: color var(--t-fast) var(--ease-in);
}

/* Devanagari carries marks above and below the line; give it room. */
.script.is-tall .beat { line-height: 1.7; }
.script.is-playing .beat { color: var(--ink-2); }
.script.is-playing .beat.is-spoken { color: var(--ink); }

.follow {
  position: absolute;
  right: 0;
  bottom: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--ink);
  color: var(--paper);
  font: 500 12px/16px var(--mono);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t-chip) var(--ease-in), visibility var(--t-chip);
}

.follow.is-shown { opacity: 1; visibility: visible; pointer-events: auto; }

/* Meta */

.meta {
  margin: 16px 0 0;
  color: var(--ink-3);
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  min-height: 16px;
}

.meta .num { display: inline-block; text-align: right; }
.meta .sep { color: var(--ink-4); }

/* Stacked spread: below 800 px of column width the script drops under the
   frame as a 240 px scroll block (docked Inspect at 1280, narrow windows). */

@container column (max-width: 799px) {
  .spread {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 16px;
  }

  .film { grid-column: 1; }
  .script { grid-column: 1; height: 240px; }
}

/* ---------- Sheets ---------- */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: var(--scrim);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-sheet) var(--ease-in), visibility var(--t-sheet);
}

.scrim.is-visible { opacity: 1; visibility: visible; }

.sheet {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  box-shadow: var(--sheet-shadow);
  transition: transform var(--t-sheet) var(--ease-in);
  will-change: transform;
}

.sheet.history {
  left: 0;
  width: var(--sheet-history-w);
  transform: translateX(-100%);
}

.sheet.inspect {
  right: 0;
  width: var(--sheet-inspect-w);
  transform: translateX(100%);
}

.sheet.is-open { transform: none; }

.sheet.inspect.is-docked {
  z-index: 6;
  top: 0;
  box-shadow: -1px 0 0 var(--line);
  transition: none;
}

.sheet-header {
  flex: none;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-shadow: inset 0 -1px 0 var(--line);
}

.sheet-title {
  margin: 0;
  font: 500 14px/20px var(--sans);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sheet-title.mono { font: 400 12px/16px var(--mono); color: var(--ink-2); }

.sheet-close {
  flex: none;
  height: 24px;
  padding: 0 6px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--line-2);
  font: 400 12px/16px var(--mono);
  color: var(--ink-3);
  transition: color var(--t-fast) var(--ease-in), background-color var(--t-fast) var(--ease-in);
}

.sheet-close:hover { color: var(--ink); background: var(--paper-2); }
.sheet-close .back { display: none; }

.sheet-filter {
  flex: none;
  padding: 12px 20px;
  box-shadow: inset 0 -1px 0 var(--line);
}

.filter {
  width: 100%;
  height: 28px;
  font: 400 14px/20px var(--sans);
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
}

.filter::placeholder { color: var(--ink-3); opacity: 1; }
.filter::-webkit-search-cancel-button { -webkit-appearance: none; }

.history-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
  padding: 0 20px;
}

.history-list .row {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  row-gap: 2px;
  padding: 12px 0;
}

.history-list .row-question {
  grid-column: 1 / -1;
  font-size: 15px;
  line-height: 20px;
  white-space: normal;
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.history-list .row-meta {
  grid-column: 1;
  min-width: 0;
  margin-left: 0;
  white-space: normal;
}
.history-list .status-word { grid-column: 2; grid-row: 2; }

.history-empty,
.calls-empty {
  margin: 0;
  padding: 16px 20px;
  font: 400 13px/18px var(--sans);
  color: var(--ink-3);
}

.sheet-footer {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  padding: 8px 20px;
  box-shadow: inset 0 1px 0 var(--line);
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 400 13px/18px var(--sans);
  color: var(--ink-2);
  cursor: pointer;
}

.switch input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--ink);
}

/* Inspect body */

.sheet-scroll {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
  padding: 16px 20px 32px;
}

.gantt { position: relative; }

.gantt-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.gantt-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 44px 56px 72px;
  align-items: center;
  column-gap: 12px;
  width: 100%;
  height: 24px;
  color: var(--ink-2);
  font: 400 13px/18px var(--sans);
  font-variant-numeric: tabular-nums;
  border-radius: 4px;
  transition: background-color var(--t-fast) var(--ease-in);
}

.gantt-row:hover { background: var(--paper-2); }
.gantt-row[aria-pressed="true"] { background: var(--paper-2); color: var(--ink); }
.gantt-row.is-failed .gantt-word,
.gantt-row.is-failed .gantt-label { color: var(--oxide); }

.gantt-label { padding-left: 6px; }

.gantt-track {
  position: relative;
  height: 24px;
}

.gantt-bar {
  position: absolute;
  top: 9px;
  height: 6px;
  border-radius: 1px;
  background: var(--ink);
  min-width: 2px;
  left: 0;
  width: 0;
}

.gantt-bar.is-running { background: var(--ink-2); }
.gantt-bar.is-failed { background: var(--oxide); }
.gantt-bar.is-interrupted { background: var(--ink-4); }

.gantt-num { color: var(--ink-3); text-align: right; }
.gantt-word { color: var(--ink-3); font: 400 12px/16px var(--mono); text-align: right; padding-right: 6px; }

.narration-summary {
  margin: 16px 0 0;
  font: 400 13px/18px var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

.narration-summary:empty { display: none; }

.calls { margin-top: 16px; }

.call-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.call-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px 64px;
  align-items: center;
  column-gap: 12px;
  width: 100%;
  height: 32px;
  padding: 0 6px;
  border-radius: 4px;
  box-shadow: inset 0 -1px 0 var(--line);
  color: var(--ink-2);
  font: 400 13px/18px var(--sans);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--t-fast) var(--ease-in);
}

.call-row:hover { background: var(--paper-2); }
.call-row[aria-pressed="true"] { background: var(--paper-2); color: var(--ink); }
.call-row .call-num { color: var(--ink-3); text-align: right; }
.call-row.is-failed .call-label { color: var(--oxide); }

.call-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detail { margin-top: 24px; }

.tabs {
  display: flex;
  gap: 20px;
  box-shadow: inset 0 -1px 0 var(--line);
}

.tab {
  font: 500 13px/18px var(--sans);
  color: var(--ink-3);
  padding: 6px 0 8px;
  position: relative;
  transition: color var(--t-fast) var(--ease-in);
}

.tab:hover { color: var(--ink-2); }
.tab[aria-selected="true"] { color: var(--ink); }
.tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--ink);
}

.panel { padding-top: 12px; }

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.panel-title {
  font: 500 13px/18px var(--sans);
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview {
  margin: 0;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 0;
}

.overview:empty,
.json:empty,
.artifact-list:empty { display: none; }

.overview dt,
.overview dd {
  margin: 0;
  padding: 6px 0;
  box-shadow: inset 0 -1px 0 var(--line);
  font: 400 13px/18px var(--sans);
}

.overview dt { color: var(--ink-3); }
.overview dd { color: var(--ink); text-align: left; overflow-wrap: anywhere; }
.overview dd.is-oxide { color: var(--oxide); }

.json {
  margin: 0;
  padding: 12px;
  border-radius: 4px;
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 18px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 2;
}

.artifact-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.artifact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  box-shadow: inset 0 -1px 0 var(--line);
  color: var(--ink);
  text-decoration: none;
  font: 400 13px/18px var(--sans);
  transition: color var(--t-fast) var(--ease-in);
}

.artifact:hover { color: var(--ink-2); }
.artifact .artifact-path { color: var(--ink-3); font: 400 12px/16px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.artifact .artifact-label { flex: none; }

/* Shortcuts dialog */

.shortcuts {
  padding: 24px;
  border: 0;
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--sheet-shadow);
  width: min(360px, calc(100vw - 32px));
}

.shortcuts::backdrop { background: var(--scrim); }

.key-list {
  margin: 16px 0 0;
  display: grid;
  row-gap: 8px;
}

.key-list div {
  display: grid;
  grid-template-columns: 96px 1fr;
  column-gap: 16px;
  align-items: baseline;
}

.key-list dt { font: 400 12px/16px var(--mono); color: var(--ink-2); }
.key-list dd { margin: 0; font: 400 13px/18px var(--sans); color: var(--ink); }
.key-list kbd { padding: 1px 4px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--line-2); }
.shortcuts form { margin-top: 20px; }

/* ---------- Responsive ---------- */

@media (max-width: 1279px) {
  .page.is-docked .bar,
  .page.is-docked .main { padding-right: var(--gutter); }
}

@media (max-width: 760px) {
  :root { --bar-h: 48px; }

  .composer { padding-top: calc(30vh - var(--bar-h)); }

  .spread {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
  }

  .film {
    grid-column: 1;
    position: sticky;
    top: var(--bar-h);
    z-index: 3;
    background: var(--paper);
    padding-bottom: 4px;
  }

  /* A portrait frame at full width would be taller than the phone; keep it
     within the viewport under the bar and centre it. */
  :root[data-format="portrait"] .frame {
    width: min(100%, calc((100dvh - var(--bar-h) - 32px) * var(--video-aspect)));
    margin: 0 auto;
  }

  .script {
    grid-column: 1;
    height: auto;
    max-width: 620px;
  }

  .script-scroll {
    position: static;
    padding: 0;
    overflow: visible;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .beat { font-size: 18px; line-height: 28px; }
  .follow { position: fixed; bottom: 16px; right: 16px; }

  .running-row {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .running { flex-basis: 100%; }
  .elapsed { text-align: left; }

  .rail { height: 44px; }
  .rail-track { top: 21px; }
  .playhead { top: 16px; }

  .control { width: 44px; height: 44px; }
  .controls { height: 44px; }
  .segmented span { padding: 13px 2px; }
  .bar-link,
  .text-link,
  .under-frame .text-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0;
  }

  .panel-head { align-items: center; }
  .row { min-height: 44px; }
  .run { padding-bottom: 32px; }

  .recently .row-list { grid-template-columns: minmax(0, 1fr) auto; }

  .recently .row {
    grid-template-rows: auto auto;
    row-gap: 2px;
    padding: 12px 0;
  }

  .recently .row-question {
    grid-column: 1 / -1;
    font-size: 15px;
    line-height: 20px;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .recently .row-meta {
    grid-column: 1;
    min-width: 0;
    margin-left: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .recently .status-word { grid-column: 2; grid-row: 2; }

  .sheet.history,
  .sheet.inspect { width: 100vw; }
  .sheet-close .esc { display: none; }
  .sheet-close .back { display: inline; }
  .sheet-close { box-shadow: none; font: 500 14px/20px var(--sans); color: var(--ink-2); }

  .gantt-row { grid-template-columns: 56px minmax(0, 1fr) 40px 56px 64px; column-gap: 8px; }
}

@media (max-width: 480px) {
  :root { --gutter: 16px; }

  .field { font-size: 22px; line-height: 30px; }
  .field-row { flex-wrap: wrap; }
  .explain { width: 100%; justify-content: center; margin-top: 12px; }
  .explain kbd { display: none; }
  .composer-row { flex-wrap: wrap; }
  .composer-right { width: 100%; justify-content: space-between; }

  .question.q-40 { font-size: 26px; line-height: 32px; }
  .question.q-28 { font-size: 21px; line-height: 28px; }
  .question.q-19 { font-size: 17px; line-height: 24px; }
  .frame-title { font-size: 18px; line-height: 26px; }
  .beat { font-size: 16px; line-height: 24px; }

  .control.mute,
  .control.captions { display: none; }
  .control.play { margin-left: -14px; }
  .time { padding-right: 4px; }
  .rail-thumb { width: 120px; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 120ms !important;
    animation-duration: 120ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }

  .spread.is-arriving { transform: none; }
  .question.is-lifting { transition: none; }
  .sheet { transition: opacity 120ms var(--ease-in) !important; transform: none; opacity: 0; }
  .sheet.is-open { opacity: 1; }
  .scene.is-arriving { animation-name: arrive-still; }

  @keyframes arrive-still {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

.operator-auth { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; padding-block: 1rem; }
.operator-auth input { font: inherit; border: 1px solid currentColor; border-radius: 4px; padding: 0.4rem; background: transparent; color: inherit; }
.degraded-chip { position: absolute; bottom: 1rem; left: 1rem; right: 1rem; padding: 0.4rem 0.6rem; background: var(--paper); color: var(--ink); font-size: 0.8rem; }

/* September reference design: warm editorial typography, quiet framed surfaces. */
:root { --bar-h: 78px; --gutter: clamp(22px, 3.9vw, 68px); --col-max: 1600px; --sheet-history-w: 600px; --scrim: rgba(0,0,0,.66); }
html[data-theme="dark"] { --paper: #0c0c0b; --paper-2: #171614; --ink: #eee9df; --ink-2: #b5b0a6; --ink-3: #928d83; --ink-4: #706b62; --line: #292723; --line-2: #4c453a; --film: #10100f; --frame-edge: #36332e; }
body { background: var(--paper); }
.bar { border-bottom: 1px solid var(--line); }
.bar-inner { max-width: none; width: 100%; }
.wordmark { font-size: 30px; line-height: 36px; }
.bar-links { align-items: center; gap: 38px; }
.bar-link { font-size: 16px; }
.composer { max-width: 1100px; padding: 46px 0 40px; }
.home-intro { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-bottom: 36px; }
.home-intro h1 { margin: 0; font: 400 clamp(38px,3.4vw,52px)/1.04 var(--serif); letter-spacing: -.025em; }
.home-intro p { margin: 12px 0 0; font: 400 16px/1.5 var(--sans); color: var(--ink-2); }
.composer-form { width: 100%; }
.composer-box { border: 1px solid var(--line-2); border-radius: 11px; background: color-mix(in srgb, var(--paper-2) 45%, var(--paper)); box-shadow: inset 0 1px 0 #ffffff06; }
/* The box: the question line with the mic at its end, so speaking is one
   reach from typing; upload and Explain sit on the line beneath. */
.field-row { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 28px; gap: 14px 22px; }
.field { grid-column: 1; grid-row: 1; font-size: 36px; line-height: 44px; box-shadow: none; min-height: 48px; padding: 0; margin-bottom: 8px; }
.field:focus { box-shadow: none; }
.dictate { grid-column: 2; grid-row: 1; align-self: start; margin: 2px 0 0; width: 48px; height: 48px; border-radius: 50%; color: var(--ink); background: color-mix(in srgb, var(--ink-2) 10%, transparent); }
.dictate:hover { background: color-mix(in srgb, var(--ink-2) 18%, transparent); }
.dictate.is-recording { background: color-mix(in srgb, var(--oxide) 16%, transparent); }
.dictate-dot { top: 8px; right: 8px; }
.upload { grid-column: 1; grid-row: 2; justify-self: start; display: inline-flex; align-items: center; cursor: pointer; color: var(--ink-2); font-size: 13px; height: 36px; }
.explain { grid-column: 2; grid-row: 2; justify-self: end; height: 50px; font-size: 17px; padding: 0 20px; border-radius: 6px; margin: 0; }
.home-lede { max-width: 640px; text-wrap: pretty; }
.new-question { display: inline-flex; align-items: center; gap: 8px; height: 38px; margin-left: auto; }
.new-question span:first-child { font-size: 18px; line-height: 1; }
.composer-row { margin: 0; border-top: 1px solid var(--line); padding: 15px 28px; justify-content: start; }
.composer-left { display: none; }
.composer-right { gap: 12px; flex-wrap: wrap; }
.setting-label { font: 400 12px/20px var(--sans); color: var(--ink-2); margin-left: 22px; }
.setting-label:first-child { margin-left: 0; }
.segmented { border: 1px solid var(--line); border-radius: 6px; }
.segmented label + label::before { display: none; }
.segmented span { padding: 6px 15px; font-size: 12px; min-width: 58px; text-align: center; }
.segmented input:checked + span { border-radius: 5px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line-2), inset 0 0 10px #bda57c0c; }
.engine { margin: 18px 28px 0; font-size: 12px; }
.recently { max-width: none; margin-top: 52px; position: relative; }
.recently-label { font: 400 21px/26px var(--serif); color: var(--ink-2); margin-bottom: 16px; }
.all-runs { position: absolute; right: 12px; top: 0; margin: 0; }
.recently .row-list { display: block; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; }
.recently .row-list > li { display: block; }
.recently .row { display: grid; grid-template-columns: 30px minmax(0,1fr) auto 74px; gap: 16px; padding: 12px 22px; min-height: 55px; }
.row::before { content: '▷'; width: 29px; height: 29px; border: 1px solid var(--line-2); border-radius: 50%; display: grid; place-items: center; color: var(--ink); font: 18px var(--sans); }
.row-question { text-align: left; font-size: 12px; font-weight: 450; }
.row-meta { font: 400 12px/20px var(--sans); color: var(--ink-3); }
.row .status-word { text-align: right; margin-left: 0; }
.row-list > li:last-child .row { box-shadow: none; }
.studio-footer { border-top: 1px solid var(--line); display: flex; align-items: center; gap: 30px; padding: 22px var(--gutter); font: 400 11px/20px var(--sans); color: var(--ink-2); }
.footer-themes { display: flex; gap: 24px; padding-right: 30px; border-right: 1px solid var(--line); }
.footer-themes button { font-size: 24px; }
#system-status { margin-left: 18px; }
#system-status.is-healthy { color: #9aac91; }
#footer-shortcuts { margin-left: auto; }
.studio-footer kbd { border: 1px solid var(--line); border-radius: 4px; padding: 3px 7px; }
.title-block { padding-top: 44px; }
.question.q-40, .question.q-28 { font: 400 clamp(32px,3.3vw,52px)/1.14 var(--serif); text-wrap: initial; letter-spacing: -.015em; }
.running-row { margin-top: 20px; padding-bottom: 8px; box-shadow: none; align-items: center; }
.running { font-size: 16px; font-weight: 400; }
.elapsed { display: none; }
.spread { display: grid; grid-template-columns: minmax(290px,28%) minmax(0,1fr); gap: 22px; margin-top: 20px; }
.film, .script { border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb,var(--paper-2) 45%,var(--paper)); box-shadow: inset 0 1px 2px #ffffff06; }
.film { grid-column: 2; grid-row: 1; padding: 16px; }
.frame { border-radius: 7px; }
.controls { padding: 14px 0; }
.under-frame { display: flex; justify-content: flex-end; margin-top: auto; padding-top: 24px; min-height: 74px; }
#download-final { border: 1px solid var(--line); border-radius: 6px; padding: 11px 16px; font-size: 14px; }
#download-final::before { content: '↓'; margin-right: 10px; }
.script { grid-column: 1; grid-row: 1; min-height: 420px; }
.script-header { display: flex; justify-content: space-between; padding: 23px 24px 16px; font: 400 16px/24px var(--sans); color: var(--ink-2); }
#scene-count { font-size: 12px; color: var(--ink-3); }
.script-scroll { inset: 64px 8px 14px 24px; padding: 0 14px 0 0; mask-image: none; -webkit-mask-image: none; }
.script-list { padding: 0; }
.scene, .scene:last-child { padding: 12px 0 15px; border-top: 1px solid var(--line); }
.scene-heading { position: relative; grid-template-columns: 36px minmax(0,1fr) auto; align-items: start; font: 400 13px/20px var(--sans); gap: 12px; text-align: left; }
.scene-number { display: grid; place-items: center; width: 36px; height: 35px; border: 1px solid var(--line-2); border-radius: 6px; color: var(--ink); font: 500 14px var(--sans); }
.scene-heading .status-word { font: 400 10px/17px var(--sans); border: 1px solid var(--line); border-radius: 5px; padding: 2px 7px; color: #a7ae8c; }
.scene-duration { grid-column: 2; font: 400 11px/16px var(--mono); color: var(--ink-3); margin-top: -10px; }
.beat { margin: 4px 0 0 48px; font: 400 12px/20px var(--sans); color: var(--ink-3); }
.meta { gap: 0; margin: 34px 0 22px; }
.meta-cell { display: flex; flex-direction: column; gap: 8px; padding: 0 26px; border-right: 1px solid var(--line); }
.meta-cell:first-child { padding-left: 3px; }
.meta-cell:last-child { border: 0; overflow-wrap: anywhere; }
.meta-label { font: 400 12px/16px var(--sans); }
.meta-value { font: 400 13px/18px var(--mono); color: var(--ink-2); }
.sheet.history { top: 28px; bottom: 24px; left: 28px; width: min(600px,calc(100vw - 56px)); border: 1px solid var(--line); border-radius: 12px; transform: translateX(calc(-100% - 32px)); background: var(--paper); }
.sheet.history.is-open { transform: none; }
.history .sheet-header { padding: 24px; height: 78px; box-shadow: none; }
.history .sheet-title { font: 400 30px/36px var(--serif); }
.history .sheet-close { height: 28px; font: 400 13px var(--sans); }
.history .sheet-filter { padding: 0 24px 20px; box-shadow: none; }
.history .filter { height: 46px; padding: 0 15px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--paper-2); }
.history-list { padding: 0 14px; }
.history-list .row { grid-template-columns: 34px minmax(0,1fr) 68px; grid-template-rows: auto auto; gap: 4px 16px; padding: 16px 14px; }
.history-list .row::before { grid-column: 1; grid-row: 1/3; align-self: start; width: 32px; height: 32px; }
.history-list .row-question { grid-column: 2; grid-row: 1; font: 400 20px/23px var(--serif); }
.history-list .row-meta { grid-column: 2; grid-row: 2; font-size: 13px; }
.history-list .status-word { grid-column: 3; grid-row: 1/3; align-self: center; }
.history-list .row.is-current, .history-list .row:hover { border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line-2); }
.history .sheet-footer { min-height: 60px; margin: 0 14px; padding: 8px 10px; }
@container column (max-width: 799px) {
  .spread { grid-template-columns: minmax(0,1fr); }
  .film { grid-column: 1; grid-row: 1; }
  .script { grid-column: 1; grid-row: 2; height: 380px; min-height: 0; }
}
@media (max-width: 1050px) {
  .composer { padding-top: 36px; }
  .composer-right { gap: 8px; }
  .setting-label { margin-left: 8px; }
  .segmented span { padding: 6px 10px; min-width: 0; }
  .recently .row { grid-template-columns: 30px minmax(0,1fr) 70px; }
  .recently .row-meta { display: none; }
}
@media (max-width: 600px) {
  :root { --bar-h: 64px; --gutter: 20px; }
  .bar-links { gap: 20px; } .bar-link { font-size: 13px; }
  .home-intro { display: block; margin-bottom: 24px; }
  .home-intro h1 { font-size: 38px; }
  .home-intro p { font-size: 14px; } .desktop-break { display: none; }
  .field-row { padding: 20px 16px; gap: 12px; }
  .field { font-size: 28px; line-height: 34px; }
  .upload { font-size: 11px; padding: 0 8px; } .explain { height: 42px; font-size: 14px; padding: 0 12px; }
  .dictate { width: 28px; }
  .composer-row { padding: 16px; }
  .composer-right { display: grid; grid-template-columns: auto 1fr; width: 100%; gap: 12px; }
  .setting-label { margin: 0; } .segmented { justify-self: start; } .segmented span { padding: 6px 14px; }
  .engine { margin-left: 2px; font-size: 10px; }
  .recently { margin-top: 34px; } .recently .row { padding: 12px; gap: 10px; grid-template-columns: 28px minmax(0,1fr) 54px; }
  .row-question { white-space: normal; } .row .status-word { font-size: 10px; }
  .studio-footer { flex-wrap: wrap; gap: 16px; padding: 18px 20px; } .footer-themes { padding-right: 16px; gap: 16px; }
  #system-status { margin-left: 8px; } #footer-shortcuts { margin-left: 0; }
  .title-block { padding-top: 28px; } .running { font-size: 12px; line-height: 20px; } .running-row { gap: 12px; }
  .film { padding: 10px; } .under-frame { min-height: 52px; padding-top: 10px; }
  .meta { gap: 20px 0; } .meta-cell { padding: 0 16px; } .meta-cell:last-child { padding-left: 3px; width: 100%; }
  .sheet.history { inset: 10px; width: auto; } .history .sheet-header { padding: 18px; }
  .history .sheet-filter { padding: 0 18px 14px; } .history-list { padding: 0 8px; }
  .history-list .row { grid-template-columns: 28px minmax(0,1fr) 56px; gap: 5px 10px; padding: 14px 8px; }
  .history-list .row-question { font-size: 18px; line-height: 22px; } .history-list .row-meta { font-size: 11px; }
  .history-list .row::before { width: 28px; height: 28px; }
  .history .sheet-footer { gap: 10px; } .history .segmented span { padding: 6px 10px; }
}
.profile { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--paper-2); color: var(--ink-2); font: 400 16px var(--sans); margin-left: 8px; }
.bar-link:disabled { opacity: .55; cursor: default; }
.row-list > li { position: relative; }
.recently .row { padding-right: 54px; grid-template-columns: 30px minmax(0,1fr) 330px 70px; }
.recently .row-meta { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 24px; margin: 0; text-align: left; }
.row-menu { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 1; }
.row-menu[open] { z-index: 3; }
.row-menu summary { display: grid; place-items: center; width: 24px; height: 32px; cursor: pointer; font: 21px var(--sans); color: var(--ink-2); list-style: none; border-radius: 4px; }
.row-menu summary::-webkit-details-marker { display: none; }
.row-menu summary:hover { background: var(--paper-2); }
.row-menu-actions { position: absolute; right: 0; top: 32px; min-width: 160px; padding: 6px; display: grid; background: var(--paper-2); border: 1px solid var(--line-2); border-radius: 7px; box-shadow: 0 8px 24px #0006; }
.row-menu-actions button { text-align: left; padding: 9px; font: 12px var(--sans); }
.row-menu-actions button:hover { background: var(--paper); }
.recently .row-list { overflow: visible; }
.history-list .row { padding-right: 44px; }
.script-footer { position: absolute; bottom: 16px; left: 16px; right: 16px; display: flex; gap: 8px; }
.script-footer .text-button { height: 38px; }
.script-footer .text-button:first-child { flex: 1; }
.script-scroll { bottom: 66px; }
.scene-heading { grid-template-columns: 36px minmax(0,1fr) auto auto; column-gap: 9px; }
.scene-duration { grid-column: 3; grid-row: 1; margin-top: 2px; }
.scene-heading .status-word { grid-column: 4; grid-row: 1; }
.beat { margin-top: -10px; margin-right: 4px; }
.beat + .beat { margin-top: 4px; }
.scene { min-height: 84px; }
@media (max-width: 1200px) { .recently .row { grid-template-columns: 30px minmax(0,1fr) 210px 64px; } .recently .row-meta { gap: 10px; } .scene-heading { grid-template-columns: 32px minmax(0,1fr) auto; } .scene-duration { display: none; } .scene-heading .status-word { grid-column: 3; } }
@media (max-width: 1050px) { .recently .row { grid-template-columns: 30px minmax(0,1fr) 64px; } .recently .row-meta { display: none; } }
@media (max-width: 600px) { .bar-links { gap: 14px; } .profile { width: 30px; height: 30px; margin-left: 0; font-size: 12px; } .recently .row { padding-right: 36px; grid-template-columns: 28px minmax(0,1fr) 48px; } .row-menu { right: 4px; } .history-list .row { padding-right: 30px; } .scene-heading { grid-template-columns: 36px minmax(0,1fr) auto auto; } .scene-duration { display: block; } .scene-heading .status-word { grid-column: 4; } }
.scene-heading { padding-left: 48px; grid-template-columns: minmax(0,1fr) auto auto; min-height: 22px; }
.scene-number { position: absolute; left: 0; top: 0; }
.scene-duration { grid-column: 2; }
.scene-heading .status-word { grid-column: 3; }
.beat { margin-top: 4px; }
@media (min-width: 601px) and (max-width: 1200px) { .scene-heading { grid-template-columns: minmax(0,1fr) auto; } .scene-heading .status-word { grid-column: 2; } }
.profile { display: grid; place-items: center; }
.recently .row-question { grid-column: 2; grid-row: 1; }
.recently .row-meta { grid-column: 3; grid-row: 1; }
.recently .status-word { grid-column: 4; grid-row: 1; }
@media (max-width: 1050px) { .recently .status-word { grid-column: 3; } }
@media (max-width: 600px) {
  .recently .row { grid-template-rows: auto; }
  .recently .row-question { grid-column: 2; grid-row: 1; font-size: 12px; line-height: 18px; }
  .recently .status-word { grid-column: 3; grid-row: 1; }
  .control.mute, .control.captions { display: inline-flex; }
  .controls { gap: 4px; } .control { width: 30px; min-width: 30px; } .control.play { margin-left: 0; }
}
.setting-label, .upload { display: inline-flex; align-items: center; gap: 10px; }
.setting-label svg { width: 22px; height: 22px; }
.upload svg { width: 16px; height: 16px; }
.script-scroll { position: absolute; overflow-y: auto; }
.script { max-width: none; }
.film { position: relative; top: auto; z-index: auto; }
.follow { position: absolute; bottom: 60px; right: 20px; }

/* Quiet motion: compositor-friendly entrances, tactile controls, no idle loop. */
:root {
  --t-sheet: 320ms;
  --t-spread: 360ms;
  --t-fade: 240ms;
  --polish-ease: cubic-bezier(.22, 1, .36, 1);
}
@keyframes surface-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes menu-enter {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes working-breath {
  0%, 100% { opacity: .25; transform: scaleX(.65); }
  50% { opacity: .8; transform: scaleX(1); }
}
.composer:not([hidden]) .home-intro,
.composer:not([hidden]) .composer-form,
.composer:not([hidden]) .recently,
.run:not([hidden]) .title-block {
  animation: surface-enter 420ms var(--polish-ease) both;
}
.composer:not([hidden]) .composer-form { animation-delay: 35ms; }
.composer:not([hidden]) .recently { animation-delay: 70ms; }
.sheet { transition-timing-function: var(--polish-ease); }
.composer-box { position: relative; isolation: isolate; }
.composer-box::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-radius: inherit;
  border: 1px solid color-mix(in srgb, var(--ink-2) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink-2) 7%, transparent);
  opacity: 0;
  transition: opacity 180ms ease;
}
.composer-box:focus-within::after { opacity: 1; }
.explain, .text-button, .profile, .control, .sheet-close {
  transition: transform 160ms var(--polish-ease), color 140ms ease, background-color 140ms ease;
}
.explain:active:not(:disabled), .text-button:active:not(:disabled),
.profile:active, .control:active, .sheet-close:active { transform: scale(.97); }
.explain kbd, .upload svg, #redraw svg {
  display: inline-block;
  transition: transform 180ms var(--polish-ease);
}
.segmented span { transition: color 140ms ease, background-color 140ms ease; }
.segmented label:active span { transform: scale(.97); }
.row::before { transition: transform 180ms var(--polish-ease), border-color 140ms ease; }
.row:active::before { transform: scale(.92); }
.row-menu[open] .row-menu-actions {
  transform-origin: top right;
  animation: menu-enter 180ms var(--polish-ease) both;
}
.scene { position: relative; isolation: isolate; }
.scene::before {
  content: "";
  position: absolute;
  inset: 0 -8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--ink-2) 7%, transparent);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.scene.is-current::before { opacity: 1; }
.scene.is-current .scene-number { border-color: var(--ink-3); }
/* The working bar: an indeterminate track under the frame title while Ivan
   is busy. It says "still going", never how long is left. */
.frame-progress {
  position: relative;
  width: min(220px, 60%);
  height: 3px;
  margin-top: 14px;
  border-radius: 3px;
  overflow: hidden;
  background: color-mix(in srgb, currentColor 18%, transparent);
}
.frame-progress span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  border-radius: 3px;
  background: currentColor;
  animation: progress-slide 1600ms var(--polish-ease) infinite;
}
@keyframes progress-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
  .frame-progress span { animation: working-breath 1800ms ease-in-out infinite !important; width: 100%; transform-origin: center; }
}
.controls.is-inert .control.mute { pointer-events: auto; color: var(--ink-2); }
.control, .row-menu summary { border-radius: 5px; }
.text-button.is-copied { color: #a4ba99; }
@media (hover: hover) and (pointer: fine) {
  .explain:hover:not(:disabled) { transform: translateY(-1px); }
  .explain:hover kbd { transform: translateX(2px); }
  .upload:hover svg { transform: translateY(-1px); }
  #redraw:hover:not(:disabled) svg { transform: rotate(-40deg); }
  .row:hover::before { transform: scale(1.06); border-color: var(--ink-3); }
  .control:hover { background: color-mix(in srgb, var(--ink-2) 8%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
.rail:focus-visible { outline: 1px solid var(--ink-3); outline-offset: 2px; border-radius: 4px; }

/* Revisions keep the player and script in the existing editorial workspace. */
.scene-editor h2 { margin: 0; font: 500 26px/1.15 var(--serif); }
.revision-note { margin: 8px 0 18px; color: var(--ink-2); font: 400 12px/1.6 var(--sans); }
#scene-editor-fields label { display: flex; flex-direction: column; gap: 8px; color: var(--ink-2); font: 500 12px/1.4 var(--sans); }
#scene-editor-fields textarea, #scene-editor-fields select {
  width: 100%; box-sizing: border-box; border: 1px solid var(--line-2); border-radius: 6px; padding: 12px;
  color: var(--ink); background: var(--paper); font: 400 14px/1.55 var(--sans);
}
#scene-editor-fields textarea { resize: vertical; min-height: 76px; }
.revision-submit { border: 1px solid var(--oxide); border-radius: 6px; padding: 13px 18px; color: var(--paper); background: var(--oxide); font: 500 13px/1.5 var(--sans); cursor: pointer; }
.revision-submit:disabled { opacity: .5; cursor: default; }
.scene, .scene:last-child { min-height: 0; padding: 14px 0; }
.scene-heading { min-height: 35px; align-items: center; }
.scene-heading .status-word.is-ready { color: #31845c; border: 0; background: color-mix(in srgb, #31845c 12%, transparent); border-radius: 50%; width: 22px; height: 22px; padding: 0; display: grid; place-items: center; font: 700 14px/1 var(--sans); }
.scene-heading .status-word.is-failed { color: var(--oxide); border-color: color-mix(in srgb, var(--oxide) 35%, transparent); }
.scene-failure { display: flex; align-items: center; gap: 12px; margin: 5px 0 0 48px; color: var(--oxide); font: 400 11px/17px var(--sans); }
.scene-failure-copy { flex: 1; }
.scene-retry { border: 1px solid color-mix(in srgb, var(--oxide) 40%, transparent); padding: 6px 10px; border-radius: 5px; color: var(--oxide); font-weight: 600; }
.scene-card :focus-visible, .scene-chips :focus-visible, .scene-add:focus-visible, .scene-retry:focus-visible { outline: 2px solid var(--oxide); outline-offset: 3px; }
.scene-editor { width: min(620px, calc(100vw - 40px)); max-height: calc(100dvh - 64px); box-sizing: border-box; padding: 28px; border: 1px solid var(--line-2); border-radius: 10px; color: var(--ink); background: var(--paper); box-shadow: var(--sheet-shadow); }
.scene-editor::backdrop { background: var(--scrim); backdrop-filter: blur(4px); }
.scene-editor header { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.scene-editor header h2 { overflow-wrap: anywhere; }
#scene-editor-fields { display: grid; gap: 20px; }
.scene-editor footer { display: flex; justify-content: flex-end; margin-top: 24px; }
.scene-editor :focus-visible { outline: 2px solid var(--oxide); outline-offset: 3px; }
#revision-source { display: inline-block; margin-top: 16px; }
@media (max-width: 480px) {
  .scene-editor { padding: 20px; }
}