/* Theater B1 reference. See docs/design/THEATER_RUN_VIEW_SPEC.md. */
.page.is-run-view {
  --bar-h: 64px;
  --gutter: 32px;
  --col-max: 1600px;
  --view-accent: var(--signal);
  --view-accent-hover: #f76342;
  --on-view-accent: #171a19;
  --reading-serif: var(--sans);
  background: var(--paper);
  color: var(--ink);
}

/* 1. Quiet navigation, retaining the original Ivan logo and + New. */
.is-run-view .bar { height: var(--bar-h); flex: none; border: 0; background: var(--paper); }
.is-run-view .bar-inner { max-width: var(--col-max); margin-inline: auto; }
.is-run-view .bar-links { gap: 38px; }
.is-run-view .bar-link { font: 400 18px/1.3 var(--sans); }
.is-run-view #link-new { order: 2; gap: 10px; min-height: 44px; padding: 10px 20px; border: 1px solid var(--view-accent); border-radius: 8px; background: var(--view-accent); color: var(--on-view-accent); font-weight: 500; }
.is-run-view #link-new:hover { background: var(--view-accent-hover); }
.is-run-view #link-new svg { width: 22px; height: 22px; opacity: 1; }
.is-run-view #studio-preferences { display: none; }

/* 2. B1: title and actions on one row below the theater player. */
.run { width: min(100%, var(--col-max)); max-width: none; padding-bottom: 24px; }
.run .title-block { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 20px; min-width: 0; padding: 0 0 22px; border-bottom: 1px solid var(--line); animation: none; }
.run .title-block > :not(.run-heading-row):not(.result-actions) { grid-column: 1 / -1; }
.run-heading-row { display: block; min-width: 0; }
.run .question.q-40, .run .question.q-28, .run .question.q-19 {
  display: block;
  margin: 0;
  min-width: 0;
  font: 800 30px/1.2 var(--sans);
  letter-spacing: -.04em;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-line-clamp: unset;
  overflow: hidden;
}
.result-actions { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: 0; }
.result-action, .run #download-final {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  gap: 8px;
  min-height: 40px;
  min-width: 108px;
  margin: 0;
  padding: 8px 16px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: 500 16px/22px var(--sans);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease,
    transform var(--motion-press) var(--motion-ease), scale var(--motion-press) var(--motion-ease);
}
.result-action svg { flex: none; width: 20px; height: 20px; }
.run #download-final { min-width: 148px; font-size: 16px; }
.result-action-primary, .run #download-final { border-color: var(--view-accent); background: var(--view-accent); color: var(--on-view-accent); box-shadow: inset 0 1px 0 #ffffff0c; }
.run #download-final::before { content: none; }
.result-action:hover { border-color: var(--ink-3); background: var(--paper-2); }
.result-action-primary:hover, .run #download-final:hover { border-color: var(--view-accent-hover); background: var(--view-accent-hover); color: var(--on-view-accent); }
.result-action:active { transform: translateY(1px); }
.result-action:focus-visible, .copy-script:focus-visible, .copy-prompt:focus-visible { outline: 2px solid var(--sage-strong); outline-offset: 3px; }
.result-action.is-copied, .copy-script.is-copied, .copy-prompt.is-copied { color: var(--sage-strong); border-color: var(--sage-strong); }
.result-action-status { position: absolute; top: calc(100% + 4px); left: 0; right: 0; text-align: center; color: var(--ink-2); font: 400 11px/16px var(--sans); }
.run .running-row { flex-wrap: wrap; justify-content: flex-start; gap: 8px 16px; margin-top: 12px; padding-bottom: 0; box-shadow: none; }
.run[data-status="succeeded"] .running-row:not(.is-needed) { display: none; }
.run .running { flex: 0 1 auto; margin: 0; color: var(--ink-2); font: 400 13px/1.5 var(--sans); font-variant-numeric: tabular-nums; }
.run .new-question { display: none; }
.run .run-actions { flex-wrap: wrap; justify-content: center; gap: 8px; }
.run .run-actions .text-button { flex: none; height: auto; min-height: 38px; max-width: 100%; padding: 8px 12px; font: 450 12px/1.5 var(--sans); }
.run .failure { max-width: 720px; margin-inline: auto; }

/* 3. One player surface. Its dark transport is part of the frame. */
.run .spread { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin-top: 12px; }
.watch-below { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; column-gap: 32px; margin-top: 16px; }
.watch-below > .title-block { grid-column: 1; grid-row: 1; }
.watch-details { grid-column: 1; grid-row: 2; min-width: 0; padding-top: 36px; }
.watch-library { grid-column: 2; grid-row: 2; min-width: 0; margin-top: 36px; padding-left: 24px; border-left: 1px solid var(--line); }
.run .film, .run .script { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.run .film { position: relative; top: auto; padding: 0; min-width: 0; }
.player-shell { position: relative; width: 100%; overflow: hidden; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; }
.run .frame { width: 100%; margin: 0; border-radius: 0; box-shadow: none; }
.run .controls {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
  min-height: 50px;
  margin: 0;
  padding: 7px 18px;
  gap: 12px;
  color: #fff;
  background: linear-gradient(to bottom, #171a19d9, #111513f5);
  transition: opacity 160ms;
}
.run .control { width: 32px; height: 34px; color: #fff; }
.run .control svg { width: 20px; height: 20px; }
.run .control.play svg { width: 24px; height: 24px; }
.run .control:hover { color: #fff; background: #ffffff12; border-radius: 4px; }
.run .control:focus-visible, .run .rail:focus-visible { outline-color: #fff; }
:where(.page.is-run-view) .run .time { color: #fff; font: 400 12.5px/1.5 var(--data); font-variant-numeric: tabular-nums; }
.run .time-now, .run .time-total, .run .time-sep { color: inherit; }
.run .rail { margin: 0 2px; }
.run .rail-track { height: 4px; background: #ffffff35; border-radius: 4px; overflow: hidden; }
.run .chapter { background: #ffffff35; }
.run .chapter.is-ready { background: #ffffff55; }
.run .chapter.is-failed { background: var(--oxide); }
.run .playhead { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 1px solid #21241b; box-shadow: 0 1px 3px #0004; }
.run .rail-tip { color: var(--ink); background: var(--paper); border: 1px solid var(--line-2); box-shadow: none; }
.run .under-frame { min-height: 0; margin-top: 0; padding-top: 0; justify-content: flex-start; }
.run .under-frame:not(:has(> :not([hidden]))) { display: none; }
.run .under-frame .text-link { margin-top: 10px; font: 450 12px/1.5 var(--sans); }
.run .narration-warning { margin-top: 12px; }
.run .chip { bottom: 60px; }
@media (hover: hover) and (pointer: fine) {
  .player-shell:has(.play.is-playing):not(:hover):not(:focus-within) .controls { opacity: 0; }
}

/* 4. Compact numbered chapters, before narration. */
.chapter-section:has(.chapter-nav[hidden]) { display: none; }
:where(.page.is-run-view) .chapter-section h2, :where(.page.is-run-view) .watch-library h2 { margin: 0; color: var(--ink-2); font: 600 13.5px/1.4 var(--sans); letter-spacing: -.008em; }
.chapter-nav { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; margin-top: 14px; }
.chapter-link { display: flex; flex: 1 1 190px; align-items: center; gap: 8px; min-width: 0; min-height: 44px; padding: 7px 10px 7px 7px; border: 1px solid var(--line); border-radius: 6px; background: transparent; font: 450 13px/1.4 var(--sans); color: var(--ink); }
.chapter-link.is-current { background: color-mix(in srgb, var(--view-accent) 9%, var(--paper)); border-color: color-mix(in srgb, var(--view-accent) 22%, var(--line)); }
:where(.page.is-run-view) .chapter-link-dot { display: grid; place-items: center; flex: none; width: 25px; height: 28px; border-radius: 4px; background: var(--paper-2); color: var(--ink-2); font: 500 12px/1 var(--data); }
.chapter-link.is-current .chapter-link-dot { background: var(--view-accent); color: var(--on-view-accent); }
.chapter-link-title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(.page.is-run-view) .chapter-link-duration { min-width: 0; max-width: none; flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: auto; padding-left: 8px; font: 400 11.5px/1.4 var(--data); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.chapter-link:disabled { color: var(--ink-3); }
.chapter-link:not(:disabled):hover { border-color: var(--line-2); }

/* The saved-video list uses real current-cut imagery, never preview edits. */
.watch-library-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.watch-library-header .text-link { flex: none; font-size: 12px; }
.watch-video-list { list-style: none; margin: 0; padding: 0; }
.watch-video-list > li + li { margin-top: 18px; }
.watch-video { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: start; width: 100%; color: var(--ink); text-align: left; border-radius: 6px; }
.watch-video:hover .watch-video-title { text-decoration: underline; text-underline-offset: 3px; }
.watch-video:focus-visible { outline: 2px solid var(--sage-strong); outline-offset: 5px; }
.watch-video-preview { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--paper-2); color: var(--ink-3); }
.watch-video-preview::before { content: "▷"; font: 400 26px/1 var(--sans); }
.watch-video-preview img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.watch-video-copy { display: grid; gap: 5px; min-width: 0; padding-top: 1px; }
.watch-video-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--ink); font: 500 14px/1.35 var(--sans); letter-spacing: -.01em; overflow-wrap: anywhere; }
:where(.page.is-run-view) .watch-video-meta { color: var(--ink-3); font: 400 12.5px/1.4 var(--sans); }
.watch-library-empty { margin: 0; font: 400 14px/1.5 var(--sans); color: var(--ink-3); }

/* 5. Full narration, in the page flow. No transcript clipping or inner scroll. */
.run .script { width: 100%; max-width: none; height: auto; min-height: 0; max-height: none; margin: 56px 0 0; padding: 0; display: flex; flex-direction: column; }
.run .script-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0; margin: 0 0 22px; }
:where(.page.is-run-view) .run .script-header h2 { margin: 0; color: var(--ink-2); font: 600 13.5px/1.4 var(--sans); letter-spacing: -.008em; }
.copy-script, .copy-prompt { display: inline-flex; align-items: center; justify-content: center; flex: none; gap: 7px; min-height: 33px; min-width: 130px; padding: 5px 11px; border: 1px solid var(--line-2); border-radius: 5px; background: transparent; color: var(--ink); font: 400 13px/1.5 var(--sans); white-space: nowrap; }
.copy-script:hover, .copy-prompt:hover { background: var(--paper-2); border-color: var(--ink-3); }
.copy-script svg, .copy-prompt svg { flex: none; }
.run .script-scroll { position: static; inset: auto; flex: none; min-height: 0; max-height: none; height: auto; margin: 0; padding: 0; overflow: visible; mask-image: none; -webkit-mask-image: none; }
.run .script-list { margin: 0; padding: 0; }
.run .scene, .run .scene:last-child { margin: 0; padding: 36px 0; border-top: 1px solid var(--line); }
.run .scene:first-child { padding-top: 0; border-top: 0; }
.run .scene:last-child { padding-bottom: 0; }
.run .scene::before, .run .scene.is-current::before { background: none; box-shadow: none; }
.run .scene-heading { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 4px 0; align-items: baseline; min-height: 30px; padding-left: 0; }
.run .scene-title { grid-column: 2; grid-row: 1; font: 600 22px/1.25 var(--sans); letter-spacing: -.025em; color: var(--ink); }
:where(.page.is-run-view) .run .scene-number, :where(.page.is-run-view) .run .scene.is-current .scene-number { grid-column: 1; grid-row: 1; position: static; display: block; width: auto; height: auto; border: 0; border-radius: 0; background: none; color: var(--ink-3); font: 450 12px/1.5 var(--data); }
:where(.page.is-run-view) .run .scene-duration { grid-column: 3; grid-row: 1; display: block; margin: 0; color: var(--ink-3); font: 400 12px/1.5 var(--data); font-variant-numeric: tabular-nums; }
.run .scene-heading .status-word { grid-column: 2 / -1; grid-row: 2; justify-self: start; margin: 2px 0 0; }
.run[data-status="succeeded"] .scene-heading .status-word.is-ready { display: none; }
.run .scene-card, .run .scene-failure, .run .scene-chips, .run .scene-extra-body { margin-left: 36px; }
.run .scene-card { margin-top: 14px; }
.run .scene-card > summary { min-height: 28px; padding: 2px 0; color: var(--ink-3); font: 450 12px/1.5 var(--sans); }
.run .scene-card.is-readonly > summary { display: none; }
.run .scene-card-body { padding: 0; }
/* Both modes share the reading measure; form controls keep their sans face. */
:where(.page.is-run-view) .run .scene-beats { max-width: 70ch; font: 400 20px/1.6 var(--reading); font-optical-sizing: auto; }
:where(.page.is-run-view) .run .scene-card.is-readonly .beat { margin: 0; color: var(--ink); max-width: 70ch; font: 400 20px/1.6 var(--reading); font-optical-sizing: auto; letter-spacing: 0; text-wrap: pretty; hyphens: none; }
.run .scene-card.is-readonly .beat + .beat { margin-top: 14px; }
/* Two hosts: each turn is its own line, hung on its dash the way a printed
   dialogue hangs one, and the whole beat still highlights as one beat. */
.run .scene-card.is-readonly .beat.is-two-host { display: flex; flex-direction: column; gap: 10px; }
.run .scene-card.is-readonly .beat-turn { display: block; padding-left: 3.7em; text-indent: -3.7em; }
:where(.page.is-run-view) .run .scene-card.is-readonly .beat-turn-host { display: inline-block; min-width: 3.2em; margin-right: .5em; color: var(--ink-3); font: 500 11px/1.7 var(--data); letter-spacing: .04em; text-transform: uppercase; }
.run .script.is-single-scene .scene-heading { display: none; }
.run .script.is-single-scene .scene-card { margin: 0; }
.run .script.is-playing .scene-card.is-readonly .beat { color: var(--ink); }
.run .script.is-playing .scene-card.is-readonly .beat.is-spoken { color: var(--ink); }
.run .script.is-tall .scene-card.is-readonly .beat { line-height: 1.75; }
.run .scene-beat-field textarea { font: 400 20px/1.6 var(--sans); }
/* Newsreader is a roman Latin face: it has no glyphs for any of these
   scripts, so their narration is set in the sans role with the system's
   own fallbacks, at the leading a script with marks above and below its
   letters needs. One rule, one list, every offered script that stacks. */
:where(.page.is-run-view) .run .scene-beats:lang(hi),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(hi),
.run .scene-beat-field textarea:lang(hi),
:where(.page.is-run-view) .run .scene-beats:lang(bn),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(bn),
.run .scene-beat-field textarea:lang(bn),
:where(.page.is-run-view) .run .scene-beats:lang(bho),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(bho),
.run .scene-beat-field textarea:lang(bho),
:where(.page.is-run-view) .run .scene-beats:lang(gu),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(gu),
.run .scene-beat-field textarea:lang(gu),
:where(.page.is-run-view) .run .scene-beats:lang(kn),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(kn),
.run .scene-beat-field textarea:lang(kn),
:where(.page.is-run-view) .run .scene-beats:lang(kok),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(kok),
.run .scene-beat-field textarea:lang(kok),
:where(.page.is-run-view) .run .scene-beats:lang(mai),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(mai),
.run .scene-beat-field textarea:lang(mai),
:where(.page.is-run-view) .run .scene-beats:lang(ml),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(ml),
.run .scene-beat-field textarea:lang(ml),
:where(.page.is-run-view) .run .scene-beats:lang(mr),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(mr),
.run .scene-beat-field textarea:lang(mr),
:where(.page.is-run-view) .run .scene-beats:lang(ne),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(ne),
.run .scene-beat-field textarea:lang(ne),
:where(.page.is-run-view) .run .scene-beats:lang(or),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(or),
.run .scene-beat-field textarea:lang(or),
:where(.page.is-run-view) .run .scene-beats:lang(pa),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(pa),
.run .scene-beat-field textarea:lang(pa),
:where(.page.is-run-view) .run .scene-beats:lang(sd),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(sd),
.run .scene-beat-field textarea:lang(sd),
:where(.page.is-run-view) .run .scene-beats:lang(si),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(si),
.run .scene-beat-field textarea:lang(si),
:where(.page.is-run-view) .run .scene-beats:lang(ta),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(ta),
.run .scene-beat-field textarea:lang(ta),
:where(.page.is-run-view) .run .scene-beats:lang(te),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(te),
.run .scene-beat-field textarea:lang(te),
:where(.page.is-run-view) .run .scene-beats:lang(ur),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(ur),
.run .scene-beat-field textarea:lang(ur),
:where(.page.is-run-view) .run .scene-beats:lang(my),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(my),
.run .scene-beat-field textarea:lang(my),
:where(.page.is-run-view) .run .scene-beats:lang(zh-TW),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(zh-TW),
.run .scene-beat-field textarea:lang(zh-TW),
:where(.page.is-run-view) .run .scene-beats:lang(ja),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(ja),
.run .scene-beat-field textarea:lang(ja),
:where(.page.is-run-view) .run .scene-beats:lang(ko),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(ko),
.run .scene-beat-field textarea:lang(ko),
:where(.page.is-run-view) .run .scene-beats:lang(lo),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(lo),
.run .scene-beat-field textarea:lang(lo),
:where(.page.is-run-view) .run .scene-beats:lang(zh),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(zh),
.run .scene-beat-field textarea:lang(zh),
:where(.page.is-run-view) .run .scene-beats:lang(th),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(th),
.run .scene-beat-field textarea:lang(th),
:where(.page.is-run-view) .run .scene-beats:lang(ar-EG),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(ar-EG),
.run .scene-beat-field textarea:lang(ar-EG),
:where(.page.is-run-view) .run .scene-beats:lang(ar),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(ar),
.run .scene-beat-field textarea:lang(ar),
:where(.page.is-run-view) .run .scene-beats:lang(ps),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(ps),
.run .scene-beat-field textarea:lang(ps),
:where(.page.is-run-view) .run .scene-beats:lang(fa),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(fa),
.run .scene-beat-field textarea:lang(fa) { font: 400 18px/1.75 var(--sans); }

:where(.page.is-run-view) .run .scene-beats:lang(mn),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(mn),
.run .scene-beat-field textarea:lang(mn),
:where(.page.is-run-view) .run .scene-beats:lang(be),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(be),
.run .scene-beat-field textarea:lang(be),
:where(.page.is-run-view) .run .scene-beats:lang(bg),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(bg),
.run .scene-beat-field textarea:lang(bg),
:where(.page.is-run-view) .run .scene-beats:lang(el),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(el),
.run .scene-beat-field textarea:lang(el),
:where(.page.is-run-view) .run .scene-beats:lang(mk),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(mk),
.run .scene-beat-field textarea:lang(mk),
:where(.page.is-run-view) .run .scene-beats:lang(ru),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(ru),
.run .scene-beat-field textarea:lang(ru),
:where(.page.is-run-view) .run .scene-beats:lang(sr),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(sr),
.run .scene-beat-field textarea:lang(sr),
:where(.page.is-run-view) .run .scene-beats:lang(uk),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(uk),
.run .scene-beat-field textarea:lang(uk),
:where(.page.is-run-view) .run .scene-beats:lang(am),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(am),
.run .scene-beat-field textarea:lang(am),
:where(.page.is-run-view) .run .scene-beats:lang(hy),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(hy),
.run .scene-beat-field textarea:lang(hy),
:where(.page.is-run-view) .run .scene-beats:lang(ka),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(ka),
.run .scene-beat-field textarea:lang(ka),
:where(.page.is-run-view) .run .scene-beats:lang(he),
:where(.page.is-run-view) .run .script .scene-card.is-readonly .beat:lang(he),
.run .scene-beat-field textarea:lang(he) { font: 400 18px/1.6 var(--sans); }
.run .scene-heading-input { font: 600 22px/1.4 var(--reading-serif); }
.run .script-footer { margin: 0; }
.run .script-footer:has(> :not([hidden])) { margin-bottom: 16px; }
.run .script-footer:not(:has(> :not([hidden]))) { display: none; }
.run .gutter-bar, .run .follow { display: none; }

/* 6. The original prompt remains available after the narration. */
.prompt-details { width: 100%; margin: 48px auto 0; border-top: 1px solid var(--line); }
.prompt-details-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; }
.run .read-all { display: inline-flex; flex: 1; align-items: center; gap: 8px; min-width: 0; min-height: 33px; padding: 0; color: var(--ink); font: 500 14px/1.5 var(--sans); }
.run .read-all svg { flex: none; transition: transform 140ms; }
.run .read-all[aria-expanded="true"] .prompt-marker { transform: rotate(90deg); }
.run .read-all[aria-expanded="true"] .prompt-chevron { transform: rotate(180deg); }
:where(.page.is-run-view) .prompt-toggle-label { margin-left: auto; color: var(--ink-2); font: 600 13.5px/1.5 var(--sans); letter-spacing: -.008em; }
.prompt-chevron { color: var(--ink-3); }
.run .read-all:hover { color: var(--sage-strong); }
.run-prompt { display: grid; gap: 14px; margin: 4px 0 14px; padding: 12px 16px; border-left: 2px solid var(--line-2); }
.run-prompt .copy-prompt { justify-self: end; }
.run-prompt p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-2); font: 400 18px/1.6 var(--reading); font-optical-sizing: auto; }

/* 7. Share and manual-copy fallbacks use real links and exact source text. */
.result-dialog { width: min(460px, calc(100vw - 40px)); box-sizing: border-box; margin: auto; padding: 24px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--paper); color: var(--ink); box-shadow: 0 12px 40px #0002; }
.result-dialog::backdrop { background: #171a124d; backdrop-filter: none; }
.result-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.result-dialog h2 { margin: 0; font: 700 26px/1.2 var(--sans); letter-spacing: -.02em; }
.result-dialog .dialog-close { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 5px; }
.result-dialog .dialog-close:hover { background: var(--paper-2); }
.result-dialog p { margin: 14px 0 18px; color: var(--ink-2); font: 400 14px/1.5 var(--sans); }
.result-dialog label { display: block; margin-bottom: 6px; color: var(--ink-2); font: 500 12px/1.5 var(--sans); }
.share-link-row { display: flex; gap: 8px; }
.share-link-row input { min-width: 0; flex: 1; padding: 10px; border: 1px solid var(--line-2); border-radius: 6px; font: 400 13px/1.5 var(--sans); }
.share-link-row .result-action { min-width: 96px; min-height: 40px; padding: 9px 12px; font-size: 13px; }
.share-download { margin-top: 16px; min-height: 42px; font-size: 14px; }
.result-dialog .share-dialog-status { margin-bottom: 0; }
.result-dialog .share-dialog-status:empty { display: none; }
#script-copy-text { display: block; width: 100%; height: 260px; resize: vertical; padding: 12px; border: 1px solid var(--line-2); border-radius: 6px; font: 400 16px/1.5 var(--sans); }
.result-dialog footer { display: flex; justify-content: flex-end; margin-top: 16px; }

/* Preserve the existing editor while sharing the reference's button details. */
.run.is-agent-workspace > .prompt-details { display: none; }
.agent-heading #agent-download { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 9px 14px; border: 1px solid var(--view-accent); border-radius: 7px; background: var(--view-accent); color: var(--on-view-accent); font: 450 13px/1.5 var(--sans); text-decoration: none; }
.agent-heading h1 { font-weight: 450; }
.agent-heading .agent-scenes { margin-left: auto; }
.agent-heading #agent-download svg { width: 18px; height: 18px; }
.agent-narration { font: 400 20px/1.5 var(--sans); color: var(--ink); }
.agent-narration p + p { margin-top: 18px; }
.agent-form { box-shadow: none; }
.scene-editor::backdrop, .drawing-editor::backdrop { backdrop-filter: none; }

/* Portrait keeps the same centered hierarchy and an uncropped 9:16 picture. */
:root[data-format="portrait"] .run .player-shell { width: min(100%, calc(var(--portrait-frame-h) * 9 / 16)); margin-inline: auto; }
:root[data-format="portrait"] .run .frame { width: 100%; }
:root[data-format="portrait"] .run .controls { width: 100%; margin: 0; }
:root[data-format="portrait"] .run .under-frame { width: auto; }
:root[data-format="portrait"] .run .controls { gap: 7px; padding-inline: 10px; }
:root[data-format="portrait"] .run .time { font-size: 11px; }
:root[data-format="portrait"] .run .control { width: 28px; }
.run .film:fullscreen .player-shell { width: 100%; height: 100%; border: 0; border-radius: 0; }
.run .film:fullscreen .frame { width: 100%; height: 100%; aspect-ratio: auto; }

.is-run-view .studio-footer { width: min(100%, 1600px); margin: 24px auto 0; padding: 18px var(--gutter); gap: 20px; border-top: 0; font-size: 11px; }
.is-run-view .footer-themes { gap: 14px; padding-right: 20px; }
.is-run-view .footer-themes svg { width: 16px; height: 16px; }

@media (max-width: 1050px) {
  .watch-below { grid-template-columns: minmax(0, 1fr); }
  .watch-library { grid-column: 1; grid-row: 3; margin-top: 36px; padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .watch-video-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
  .watch-video-list > li + li { margin: 0; }
}
@media (max-width: 600px) {
  .watch-video-list { grid-template-columns: minmax(0, 1fr); }
  .watch-video { grid-template-columns: 140px minmax(0, 1fr); }
  .watch-below { margin-top: 16px; }
  .page.is-run-view { --bar-h: 64px; --gutter: 20px; }
  .is-run-view .bar-links { gap: 8px; }
  .is-run-view .bar-link:not(#link-new) { width: 44px; min-height: 44px; padding: 0; }
  .is-run-view .bar-link { font-size: 13px; }
  .is-run-view .bar-link:not(#link-new) > span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .is-run-view #link-new > span { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; }
  .is-run-view #link-new { min-height: 38px; padding: 8px 12px; gap: 7px; }
  .is-run-view #link-new svg { width: 18px; height: 18px; }
  .run .title-block { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 0 0 18px; }
  .run .question.q-40, .run .question.q-28, .run .question.q-19 { white-space: normal; overflow-wrap: anywhere; }
  .result-actions { gap: 10px; justify-content: flex-start; margin: 0; }
  .result-action, .run #download-final { min-height: 42px; min-width: 0; gap: 7px; padding: 9px 11px; font-size: 13px; }
  .run #download-final { min-width: 124px; font-size: 13px; }
  #share-video { min-width: 94px; }
  .result-action svg { width: 18px; height: 18px; }
  .run .spread { margin-top: 8px; }
  .run .controls { gap: 7px; height: 44px; min-height: 44px; padding: 5px 10px; }
  .run .control { width: 28px; min-width: 28px; height: 32px; padding: 0; }
  .run .control svg { width: 18px; height: 18px; }
  .chapter-nav, .run .script, .prompt-details { width: 100%; }
  .chapter-link { flex-basis: 160px; }
  .chapter-link { min-height: 42px; }
  .chapter-link-dot { width: 24px; height: 26px; }
  .watch-details { padding-top: 28px; }
  .run .script { margin-top: 44px; }
  .run .script-header { gap: 12px; margin-bottom: 18px; }
  .copy-script, .copy-prompt { min-width: 118px; min-height: 32px; padding: 5px 9px; font-size: 12px; }
  .run .scene, .run .scene:last-child { padding: 28px 0; }
  .run .scene:first-child { padding-top: 0; }
  .run .scene:last-child { padding-bottom: 0; }
  .run .scene-heading { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .run .scene-title { font-size: 20px; }
  .run .scene-card, .run .scene-failure, .run .scene-chips, .run .scene-extra-body { margin-left: 0; }
  .run .scene-card { margin-top: 12px; }
  :where(.page.is-run-view) .run .scene-beats, .run .scene-card.is-readonly .beat, .run .scene-beat-field textarea { font-size: 18px; }
  .prompt-details { margin-top: 36px; }
  .run-prompt { padding: 10px 12px; }
  .run-prompt p { font-size: 17px; }
  .is-run-view .studio-footer { gap: 14px; margin-top: 8px; }
  .agent-ready .bar .agent-heading { gap: 8px; padding-left: 12px; margin-left: 12px; }
  .agent-heading #agent-download { padding: 8px; }
  .agent-heading #agent-download span { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 370px) {
  .page.is-run-view { --gutter: 16px; }
  .result-actions { gap: 7px; }
  .run #download-final { min-width: 103px; }
  #share-video { min-width: 77px; }
  .result-action, .run #download-final { gap: 5px; padding-inline: 8px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .result-action, .run #download-final, .run .controls, .run .read-all svg { transition: none; }
}

.run[data-look="board"] .frame { --film: #1e2429; }
.run[data-look="board"] .frame-progress { color: #f3f1ea; }
.run[data-look="board"] .frame-progress::after { background: #f3f1ea; }

/* ============================================================
   Watch and making, in Paper & Ink. The film is a print lying
   on the desk; while it is still being made the same print is
   blank, ruled like drafting paper, and the pen inks a line
   along its foot. Ported from the approved Watch and Making
   boards; every id, role and player behaviour is kept.
   ============================================================ */
.page.is-run-view {
  --col-max: 1280px; --transport-h: 54px;
  --gutter: max(clamp(22px, 4vw, 64px), env(safe-area-inset-left), env(safe-area-inset-right));
  --edge: var(--frame-edge);
  --signal-hover: #f76342;
  --run-ease: cubic-bezier(.16, 1, .3, 1);
  --sh-rest: 0 1px 1px var(--landing-shadow-soft), 0 12px 32px -14px var(--landing-shadow-deep);
  --sh-lift: 0 2px 3px var(--landing-shadow-soft), 0 28px 56px -18px var(--landing-shadow-deep);
}
@keyframes run-draw-y { from { transform: scaleY(0); } }
@keyframes run-shimmer { to { background-position: 200% 0; } }
@keyframes run-nib-in { from { opacity: 0; translate: 0 -8px; } }
@keyframes run-pulse { 50% { opacity: .35; } }

/* The bar: quiet links, one dark pill, the account disc kept on screen. */
.is-run-view .bar { height: 68px; background: var(--landing-bar-glass); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); }
.is-run-view .bar-links { gap: 4px; align-items: center; }
.is-run-view .bar-link {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; min-height: 0; padding: 0 12px;
  border: 0; border-radius: 999px; background: none; color: var(--ink-2);
  font: 500 14px/1 var(--sans); letter-spacing: -.004em;
  transition: color 160ms ease, background-color 160ms ease;
}
.is-run-view .bar-link:hover { color: var(--ink); background: var(--paper-2); }
.is-run-view .bar-link svg { width: 16px; height: 16px; opacity: .85; }
.is-run-view #link-new {
  order: 1; flex-direction: row-reverse; gap: 12px; height: 40px; margin-left: 6px;
  padding: 0 6px 0 18px; border: 0; background: var(--ink); color: var(--paper); font-weight: 600;
  box-shadow: 0 1px 2px var(--landing-shadow-deep), 0 10px 22px -12px var(--landing-shadow-deep), inset 0 1px 0 #ffffff1f;
  transition: background-color 200ms ease, transform 200ms var(--run-ease);
}
.is-run-view #link-new:hover { background: #242a28; color: var(--paper); transform: translateY(-1px); }
.is-run-view #link-new svg {
  box-sizing: content-box; width: 16px; height: 16px; padding: 6px; border-radius: 50%;
  background: var(--signal); color: #171a19; opacity: 1;
  transition: background-color 160ms ease, translate 220ms var(--run-ease);
}
.is-run-view #link-new:hover svg { background: var(--signal-hover); translate: 2px 0; }
.is-run-view #studio-preferences {
  order: 2; position: relative; display: grid; place-items: center; width: 34px; height: 34px; margin-left: 14px;
  border: 0; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--ink); font: 600 13px/1 var(--sans);
  transition: box-shadow 160ms ease, background-color 160ms ease;
}
.is-run-view #studio-preferences::before { content: ""; position: absolute; left: -14px; top: 7px; bottom: 7px; width: 1px; background: var(--line); }
.is-run-view #studio-preferences:hover { background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--ink-4); }

/* The print. A sheet with an edge and two shadows, lying on a blank one that
   shows only at the corner. The shell sets the stacking context, so the pad
   sits under the paper and the frame's own white hides the rest of it. */
.run .spread { margin-top: 18px; }
.player-shell {
  position: relative; z-index: 1; overflow: visible;
  border: 1px solid var(--edge); border-radius: 10px; background: var(--paper);
  box-shadow: var(--sh-rest);
  animation: land 1.1s .1s var(--run-ease) both;
}
.player-shell::before {
  content: ""; position: absolute; inset: 8px -5px -7px 6px; z-index: -1;
  border: 1px solid var(--edge); border-radius: 10px; background: var(--paper); rotate: .6deg;
  box-shadow: 0 1px 2px var(--landing-shadow-soft), 0 22px 40px -22px var(--landing-shadow-deep);
}
.page.is-run-view .frame { --film: var(--paper); border-radius: 9px; box-shadow: none; }
.run .film:fullscreen .player-shell { animation: none; }
.run .film:fullscreen .player-shell::before { content: none; }

/* While the sheet is blank it carries a faint drafting grid, nothing else. */
.run .frame:has(> .status-layer.is-visible)::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px);
  background-size: 48px 48px; background-position: center;
  -webkit-mask: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 100%);
  mask: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 100%);
}

/* The making stage: four words the machine says, the live one lit, one plain
   sentence under them and the machine's own count beneath that. */
.run .status-layer { gap: 0; color: var(--ink); }
.run .stage-rail {
  position: static; display: flex; align-items: center; width: auto; margin: 0 0 24px;
  transform: none;
}
.run .stage-rail > li {
  position: relative; display: flex; align-items: center; gap: 10px;
  color: var(--ink-4); font: 500 13.5px/1.5 var(--sans); letter-spacing: -.008em;
}
/* The track between two stages is a drawn line in the gap, not an overlay. */
.run .stage-rail > li::before { content: none; }
.run .stage-rail > li + li::before {
  content: ""; position: static; inset: auto; width: 56px; height: 1px; margin: 0 16px;
  background: var(--line-2);
}
.run .stage-rail > li.is-done + li::before { background: var(--ink-3); }
.run .stage-dot { width: 8px; height: 8px; background: none; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.run .stage-rail > li .stage-name { font: inherit; color: inherit; }
.run .stage-rail > li.is-done { color: var(--ink-3); }
.run .stage-rail > li.is-done .stage-dot { background: var(--ink-3); box-shadow: none; }
.run .stage-rail > li.is-active { color: var(--ink); }
.run .stage-rail > li.is-active .stage-dot { background: var(--signal); box-shadow: none; animation: ping 1.4s ease-out infinite; }
.run .frame-title {
  max-width: 34ch; font-family: var(--sans); font-weight: 600;
  font-size: clamp(17px, 2.6cqi, 20px); line-height: 1.5; letter-spacing: -.01em; color: var(--ink);
}
.run .frame-line {
  max-width: 34ch; margin-top: 4px; font: 400 clamp(15px, 2.2cqi, 18px)/1.5 var(--sans);
  color: var(--ink-2);
}
.run .frame-count {
  position: static; margin-top: 18px; letter-spacing: -.005em;
  font: 500 13.5px/1.5 var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums;
}

/* The pen inks the progress line along the bottom edge of the sheet. */
.run .frame-progress {
  position: absolute; left: 0; right: 0; bottom: var(--transport-h); z-index: 2;
  width: auto; height: 3px; margin: 0; color: var(--signal);
}
.run .frame-progress span {
  inset: 0 auto 0 0; width: var(--p, 0%); height: auto; background: var(--signal);
  animation: none; transition: width 600ms var(--run-ease);
}
.run .frame-progress::after {
  content: ""; position: absolute; left: var(--p, 0%); bottom: 0; z-index: 3;
  width: 34px; height: 34px; margin: 0 0 -4px -2px; border-radius: 0; background: var(--ink);
  opacity: 1; transition: left 600ms var(--run-ease);
  -webkit-mask: var(--run-nib) center / contain no-repeat;
  mask: var(--run-nib) center / contain no-repeat;
  animation: run-nib-in 520ms .2s var(--run-ease) both;
}
.page.is-run-view {
  --run-nib: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19l7-7 3 3-7 7-3-3z'/%3E%3Cpath d='M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z'/%3E%3Cpath d='M2 2l7.586 7.586'/%3E%3Ccircle cx='11' cy='11' r='2'/%3E%3C/svg%3E");
}

/* Finished boards arrive as thumbnails along the top of the blank sheet. */
.run .frame-boards { position: absolute; left: 18px; top: 16px; z-index: 2; display: flex; gap: 8px; }
.run .frame-board {
  width: 96px; aspect-ratio: 16 / 9; overflow: clip;
  border: 1px solid var(--edge); border-radius: 4px; background: var(--paper); box-shadow: var(--sh-rest);
  animation: pop 320ms var(--run-ease) both;
}
.run .frame-board video { display: block; width: 100%; height: 100%; object-fit: cover; }
.run .frame-board.is-blank {
  background: linear-gradient(100deg, var(--paper-2) 30%, var(--paper) 50%, var(--paper-2) 70%);
  background-size: 200% 100%; animation: run-shimmer 1.6s linear infinite;
}

/* Transport: part of the print, a dark strip along its bottom edge. */
.run .controls { height: var(--transport-h); min-height: var(--transport-h); padding: 0 18px; border-radius: 0 0 9px 9px; }
.run .control { width: 34px; height: 34px; border-radius: 6px; }
.run .control:hover { background: #ffffff14; }
.run .rail { height: 34px; margin: 0 4px; }
.run .rail-track { top: 15px; height: 4px; gap: 3px; background: none; border-radius: 0; overflow: visible; }
.run .chapter { position: relative; height: 4px; border-radius: 3px; overflow: clip; background: #ffffff47; }
.run .chapter::after { content: ""; position: absolute; inset: 0; width: var(--p, 0%); background: #fff; }
.run .chapter.stub::after { content: none; }
.run .rail:hover .chapter { background: #ffffff61; }
.run .playhead { top: 11px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; border: 1px solid #21241b; box-shadow: 0 1px 3px #00000040; }
.run .rail-tip {
  bottom: 34px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-width: 150px;
  padding: 8px 10px; border: 1px solid var(--edge); border-radius: 8px;
  background: var(--paper); color: var(--ink); box-shadow: var(--sh-lift);
}
:where(.page.is-run-view) .run .rail-tip-num { color: var(--ink-2); font: 600 12px/1.5 var(--sans); letter-spacing: -.008em; }
.run .rail-tip-text { font: 500 13px/1.3 var(--sans); white-space: normal; }
:where(.page.is-run-view) .run .rail-tip-time { color: var(--ink-3); font: 400 11px/1.4 var(--data); font-variant-numeric: tabular-nums; }

.run .chip { bottom: 66px; }

/* Title block: the question in the product's voice, the facts beneath it. */
.watch-below { column-gap: 40px; margin-top: 28px; }
.run .title-block { align-items: start; gap: 8px 24px; padding-bottom: 26px; }
.run .question.q-40, .run .question.q-28, .run .question.q-19 {
  font: 800 clamp(28px, 2.9vw, 40px)/1.08 var(--sans); letter-spacing: -.04em;
  white-space: normal; overflow: visible; text-overflow: clip; text-wrap: balance;
}
.run .title-block > .run-facts:not(.run-heading-row) { grid-column: 1; }
.run-facts {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; margin: 12px 0 0;
  color: var(--ink-3); font: 500 14px/1.5 var(--sans); letter-spacing: -.005em;
}
.run-facts > span { display: inline-flex; align-items: center; }
.run-facts > span + span::before { content: "\00b7"; margin: 0 13px; color: var(--line-2); }
.run-facts b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.run-facts .is-live { gap: 7px; color: var(--signal-text); }
.run-facts .is-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); animation: run-pulse 1.2s ease-in-out infinite; }


/* Share stays quiet; Download is the one dark pill, with the orange disc. */
.run .title-block > .result-actions { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.result-actions { gap: 8px; }
/* Share is the quiet offer; the dark Download pill sits last, nearest the eye. */
.run #share-video { order: 1; }
.run #download-final { order: 2; }
.result-action, .run #download-final {
  min-height: 36px; min-width: 0; gap: 8px; padding: 0 14px;
  border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink); font: 500 14px/1 var(--sans); letter-spacing: -.004em;
}
.result-action svg { width: 16px; height: 16px; opacity: .9; }
.result-action:hover { background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.run #download-final {
  flex-direction: row-reverse; height: 40px; min-height: 40px; gap: 12px; padding: 0 6px 0 18px;
  background: var(--ink); color: var(--paper); font-weight: 600;
  box-shadow: 0 1px 2px var(--landing-shadow-deep), 0 10px 22px -12px var(--landing-shadow-deep), inset 0 1px 0 #ffffff1f;
  transition: background-color 200ms ease, transform 200ms var(--run-ease);
}
.run #download-final:hover { background: #242a28; color: var(--paper); transform: translateY(-1px); }
/* On dark paper the ink pill lifts towards the page instead of into it, so
   the label keeps its contrast. */
html[data-theme="dark"] .run #download-final:hover { background: var(--ink-2); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .run #download-final:hover { background: var(--ink-2); }
}
.run #download-final svg {
  box-sizing: content-box; width: 16px; height: 16px; padding: 6px; border-radius: 50%;
  background: var(--signal); color: #171a19; opacity: 1;
  transition: background-color 160ms ease, translate 220ms var(--run-ease);
}
.run #download-final:hover svg { background: var(--signal-hover); translate: 0 2px; }
.run .running-row { margin-top: 14px; }
.run .running { color: var(--ink-3); font: 400 13px/1.5 var(--sans); }
/* The facts line already says where the film stands, so the old status
   sentence stays for screen readers alone once the video is finished. */
.run[data-status="succeeded"] .running-row:not(.is-needed) .running { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* The filled Retry keeps its own ink fill and paper label; only the quiet
   controls beside it are restyled as pills. */
.run .running-row #cancel-run, .run .run-actions .text-button:not(.is-primary) {
  height: 36px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: 500 14px/1 var(--sans);
}
.run .running-row #cancel-run:hover, .run .run-actions .text-button:not(.is-primary):hover { background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line-2); }

/* Chapters: index cards, the one playing pinned in orange. */
.chapter-nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 14px; }
.chapter-link {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 6px 10px;
  min-height: 60px; padding: 10px 12px 10px 10px;
  border: 1px solid var(--edge); border-radius: 8px; background: var(--paper);
  box-shadow: var(--sh-rest); font: 500 14px/1.3 var(--sans); letter-spacing: -.012em;
  transition: box-shadow 400ms var(--run-ease), transform 400ms var(--run-ease), border-color 200ms ease;
}
.chapter-link:not(:disabled):hover { transform: translateY(-2px); border-color: var(--edge); box-shadow: var(--sh-lift); }
:where(.page.is-run-view) .chapter-link-dot { width: 28px; height: 28px; border-radius: 6px; grid-row: 1 / span 2; }
.chapter-link-title { grid-column: 2; white-space: normal; text-wrap: balance; }
:where(.page.is-run-view) .chapter-link-duration { grid-column: 2; grid-row: 2; margin: 0; padding: 0; font-size: 11px; }
/* A card with no film yet says where its scene stands, and a word is set in
   the voice of the page; only the times stay in figures. */
.chapter-link:disabled .chapter-link-duration { font-family: var(--sans); font-weight: 500; font-size: 11.5px; }
.chapter-link.is-current { background: var(--paper); border-color: var(--signal-text); box-shadow: 0 0 0 3px #f0442026, var(--sh-lift); }
.chapter-link.is-current .chapter-link-dot { background: var(--signal); color: #171a19; }

/* Narration: the spoken words in the reading face, the live scene inked. */
.run .script { margin-top: 56px; }
.copy-script, .copy-prompt {
  min-height: 36px; min-width: 0; gap: 8px; padding: 0 12px;
  border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink); font: 500 14px/1 var(--sans); letter-spacing: -.004em;
}
.copy-script:hover, .copy-prompt:hover { background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line-2); border-color: transparent; }
.copy-script svg, .copy-prompt svg { width: 16px; height: 16px; opacity: .9; }
.run .scene { position: relative; }
.run .scene, .run .scene:last-child { padding: 34px 0; }
.run .scene.is-current::before {
  content: ""; position: absolute; left: -18px; top: 34px; bottom: 34px; width: 2px; height: auto;
  border-radius: 2px; background: var(--signal); box-shadow: none;
  transform-origin: top; animation: run-draw-y 900ms var(--run-ease) both;
}
.run .scene:first-child.is-current::before { top: 0; }
:where(.page.is-run-view) .run .scene.is-current .scene-number { color: var(--signal-text); }
.run .script.is-playing .scene.is-current .scene-card.is-readonly .beat { color: var(--ink-3); }
.run .script.is-playing .scene.is-current .scene-card.is-readonly .beat.is-spoken {
  color: var(--ink); background: linear-gradient(to top, #f0442022 0 .28em, transparent .28em);
}
.run .scene-heading { grid-template-columns: 44px minmax(0, 1fr) auto auto; }
:where(.page.is-run-view) .run .scene-title { font: 650 22px/1.25 var(--sans); letter-spacing: -.028em; }
:where(.page.is-run-view) .run .scene-duration { grid-column: 3; font-size: 12px; }
.run .scene-heading .status-word {
  grid-column: 4; grid-row: 1; justify-self: end; display: inline-flex; align-items: center; gap: 7px;
  margin: 0 0 0 16px; padding: 0; border: 0; background: none;
  color: var(--ink-3); font: 500 13px/1.5 var(--sans); letter-spacing: -.005em;
}
.run .scene-heading .status-word::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.run .scene-heading .status-word.is-working { color: var(--signal-text); background: none; border: 0; }
.run .scene-heading .status-word.is-working::before { animation: run-pulse 1.2s ease-in-out infinite; }
.run .scene-heading .status-word.is-ready { width: auto; height: auto; padding: 0; border-radius: 0; background: none; color: var(--ink-3); font: 500 13px/1.5 var(--sans); }
.run .scene-card, .run .scene-failure, .run .scene-chips, .run .scene-extra-body { margin-left: 44px; }
.run .script-empty { margin: 0 0 0 44px; color: var(--ink-3); font: 400 15px/1.5 var(--sans); }
/* Scenes the pen has not reached yet: a page of faint ruled lines. */
.run:has(#stage-rail:not([hidden])[data-at="planning"]) .script-list::after {
  content: ""; display: block; height: 62px; max-width: 70ch; margin: 14px 0 0 44px;
  background: linear-gradient(100deg, var(--paper-2) 30%, var(--paper) 50%, var(--paper-2) 70%);
  background-size: 200% 100%;
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 14px, transparent 14px 24px), linear-gradient(to right, #000 52%, transparent);
  mask-image: repeating-linear-gradient(to bottom, #000 0 14px, transparent 14px 24px), linear-gradient(to right, #000 52%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  animation: run-shimmer 1.8s linear infinite;
}

/* The original prompt: what you brought, kept in your own voice. */
.run .read-all:hover { color: var(--signal-text); }
.run-prompt {
  margin: 2px 0 14px; padding: 6px 0 6px 22px; border-left: 2px solid var(--signal);
  animation: fade-up 360ms var(--run-ease) both;
}
.run-prompt p { order: 0; max-width: 62ch; font: 400 20px/1.5 var(--reading); }
.run-prompt .copy-prompt { order: 1; justify-self: start; }

/* Library: your other prints, small. */
.watch-library { padding-left: 28px; }
.watch-video-preview {
  border: 1px solid var(--edge); border-radius: 6px; background: #fff;
  box-shadow: var(--sh-rest); transition: box-shadow 400ms var(--run-ease), border-color 200ms ease;
}
/* A print keeps its paper in both themes, so the ink always multiplies. */
.watch-video-preview img { object-fit: cover; background: #fff; mix-blend-mode: multiply; }
.watch-video:hover .watch-video-preview { border-color: var(--signal-text); box-shadow: var(--sh-lift); }
.watch-video:hover .watch-video-title { color: var(--signal-text); text-decoration: none; }
.watch-library-header .text-link:hover { color: var(--signal-text); }

@media (max-width: 1050px) {
  .chapter-nav { grid-template-columns: repeat(auto-fill, minmax(46%, 1fr)); }
}
@media (max-width: 640px) {
  .run .spread { margin-top: 8px; }
  /* The phone print is too small to hold thumbnails and the status at once. */
  .run .frame-boards { display: none; }
  .run .status-layer { padding: 12px 14px calc(var(--transport-h) + 12px); }
  .run .stage-rail { margin-bottom: 12px; }
  .run .stage-rail > li + li::before { width: 20px; margin: 0 8px; }
  .run .stage-rail > li .stage-name { font-size: 12px; }
  /* On a phone the rail keeps its dots and names only the live stage. */
  .run .stage-rail > li:not(.is-active) .stage-name {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%);
  }
  .run .stage-rail > li:not(.is-active) { gap: 0; }
  .run .frame-count { margin-top: 10px; }
  .page.is-run-view { --transport-h: 46px; }
  .run .controls { gap: 7px; padding: 0 10px; }
  .run .control { width: 28px; height: 32px; }
  .run .chip { bottom: 56px; }
  .watch-below { margin-top: 18px; }
  .run .title-block { padding-bottom: 18px; }
  .run .title-block > .result-actions { grid-column: 1 / -1; grid-row: auto; justify-content: flex-start; }
  .result-actions { grid-row: auto; margin-top: 4px; }
  .chapter-nav { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .chapter-link { min-height: 48px; }
  .run .script { margin-top: 40px; }
  .run .scene, .run .scene:last-child { padding: 26px 0; }
  .run .scene.is-current::before { left: -11px; top: 26px; bottom: 26px; }
  .run .scene-heading { grid-template-columns: 32px minmax(0, 1fr) auto auto; }
  :where(.page.is-run-view) .run .scene-title { font-size: 19px; }
  .run .scene-card, .run .scene-failure, .run .scene-chips, .run .scene-extra-body,
  .run .script-empty { margin-left: 0; }
  .run:has(#stage-rail:not([hidden])[data-at="planning"]) .script-list::after { margin-left: 0; }
  .watch-library { padding-left: 0; }
  .run-prompt p { font-size: 18px; }
}
@media (max-width: 390px) {
  .is-run-view .bar-link:not(#link-new) { padding: 0 8px; }
  .is-run-view #link-new { gap: 8px; padding-left: 12px; }
  .is-run-view #studio-preferences { margin-left: 8px; }
  .is-run-view #studio-preferences::before { left: -8px; }
}
@media (prefers-reduced-motion: reduce) {
  .player-shell, .run .frame-board, .run .frame-board.is-blank,
  .run .frame-progress::after, .run .scene.is-current::before, .run-prompt,
  .run .stage-rail > li.is-active .stage-dot, .run-facts .is-live i,
  .run .scene-heading .status-word.is-working::before,
  .run:has(#stage-rail:not([hidden])[data-at="planning"]) .script-list::after { animation: none !important; }
  .run .frame-progress span, .run .frame-progress::after, .chapter-link,
  .watch-video-preview, .is-run-view #link-new, .run #download-final { transition: none; }
  .run .frame-progress::after { display: none; }
}
.is-run-view .studio-footer { width: min(100%, var(--col-max)); margin-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line); }