@cardstack/choreo 0.0.0 → 0.1.0-unstable.0

package/dist/film/film.js

@@ -0,0 +1,4424 @@
+import { on } from '@ember/modifier';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { modifier } from 'ember-modifier';
+import { motion } from 'glimmer-motion';
+import { at } from '../anchors.js';
+import { Choreo } from '../choreo.js';
+import { Clip } from './clip.js';
+import { resolveClips, clipWindow } from './clips.js';
+import { VOCABULARY, FilmGraph } from './graph/host.js';
+import { inGlass, PRESENTATIONS, seamShape, Joins } from './joins.js';
+import { RAD, lerp, smooth, wrapAngle, luminance, rgba } from './math.js';
+import { Captions, Insert, Stamp, Track } from './overlays.js';
+import { Plate } from './plate.js';
+import { Player, Burst, Menu } from './player.js';
+import { Rail } from './rail.js';
+import { TICK, beatStart, totalSecs, secsBefore, chapterHeads, tailFor, waypoints, cues, contents } from './schedule.js';
+import { Seam } from './seam.js';
+import { EndCard, Gate } from './titles.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i } from 'decorator-transforms/runtime';
+
+/**
+ * `?awake` keeps the loops running in a document that reports itself
+ * hidden — an embedded preview pane, a headless runner — where the idle
+ * gate would otherwise (correctly) stop the film dead. Tooling only.
+ */
+const AWAKE = new URLSearchParams(window.location.search).has('awake');
+/** how much each mood brightens the frame, for judging the ink against it */
+const GRADE_LUM = {
+  amber: 1.08,
+  chalk: 1.27,
+  ink: 1.0,
+  iron: 0.9,
+  plate: 1.09
+};
+
+/** what the blocks are given: the handle, and the vocabulary a film's score is written in */
+/** the row a film stands on before it has any: the door, with nothing behind it */const EMPTY_BEAT = {
+  cam: {
+    dolly: 1,
+    lookY: 0,
+    pitch: 0,
+    yaw: 0
+  },
+  ch: 0,
+  id: '',
+  mode: 'clear',
+  ticks: 1
+};
+const EMPTY_CHAPTER = {
+  n: '',
+  title: ''
+};
+/**
+ * How long a render may wait for the scene to arrive and for the score's
+ * second pass to land (`openTheDoor`). Frames rather than milliseconds,
+ * because what it is waiting for is a render.
+ */
+const BOOT_FRAMES = 240;
+/** one lane's clip, as the template needs it */
+
+/** which lane a resolved clip sits on: its own, or its position in the beat */function laneOfClip(beat, clip) {
+  const list = beat.clips ?? [];
+  const at = list.indexOf(clip.spec);
+  return clip.spec.lane ?? (at >= 0 ? at : 0);
+}
+/** the rows are rebuilt every frame; only a real change should re-render */
+function sameRows(a, b) {
+  if (a.length !== b.length) {
+    return false;
+  }
+  return a.every((row, i) => {
+    const other = b[i];
+    return row.key === other.key && row.state === other.state && row.freeze === other.freeze && row.src === other.src;
+  });
+}
+class Film extends Component {
+  static {
+    g(this.prototype, "graph", [tracked], function () {
+      return null;
+    });
+  }
+  #graph = (i(this, "graph"), void 0);
+  /* ---- what the film was handed ------------------------------------ */
+  /**
+  * THE GRAPH, compiled. A film written as `f.Spine` / `f.Chapter` /
+  * `f.Shot` in the default block compiles to the same rows a table would
+  * hand in (`graph/compile.ts`); the table arguments, when given, win.
+  */
+  takeGraph = graph => {
+    this.graph = graph;
+  };
+  /**
+  * THE PICTURE, as it registered itself from the `<:picture>` block: the
+  * page, its files, how it is seated, its rig, its moods. Nothing here
+  * is about the edit, which is why none of it is an argument any more.
+  */
+  static {
+    g(this.prototype, "picture", [tracked], function () {
+      return null;
+    });
+  }
+  #picture = (i(this, "picture"), void 0);
+  takePicture = spec => {
+    this.picture = spec;
+  };
+  get assets() {
+    return this.picture?.assets ?? '';
+  }
+  get standing() {
+    return this.picture?.standing ?? 0;
+  }
+  get frameTitle() {
+    return this.picture?.title ?? this.args.name;
+  }
+  /**
+  * THE WHOLE SHOT LIST, and there is only one place it comes from: the
+  * score in the default block, compiled. The film used to take a
+  * `Beat[]` as an argument as well, which is how both films were fed
+  * until Phase 2 migrated them; the table path is gone now that nothing
+  * hands one in, and the graph is the only way to write a film.
+  */
+  get all() {
+    return this.graph?.beats ?? [];
+  }
+  get chapters() {
+    return this.graph?.chapters ?? [];
+  }
+  get voSecs() {
+    return this.graph?.voSecs ?? {};
+  }
+  get voGain() {
+    return this.args.voGain ?? this.graph?.voGain ?? {};
+  }
+  get grades() {
+    return this.picture?.grades ?? {};
+  }
+  get lookFx() {
+    return this.picture?.lookFx ?? {};
+  }
+  get lutAmount() {
+    return this.picture?.lutAmount ?? 0.52;
+  }
+  get defaultJoin() {
+    return this.args.join ?? this.graph?.defaultJoin ?? 'dip';
+  }
+  /**
+  * WHERE THIS SEAM IS PLAYED. A seam the PICTURE declares by name is
+  * played in its glass with that name; the three the film knows how to
+  * mix are played there under the film's own law; everything else is an
+  * overlay in this document. The name is the only thing that decides,
+  * which is what makes the vocabulary open: a picture that declares
+  * `ridged-burn` gets `<f.Join @presentation="ridged-burn" />` for free,
+  * and the film learns nothing about it but its length.
+  */
+  glassFor(join) {
+    if (!this.film?.seam || !this.film.freeze) {
+      return null;
+    }
+    if (this.picture?.seams?.includes(join)) {
+      return {
+        name: join
+      };
+    }
+    return inGlass(join) ? {} : null;
+  }
+  /** how deep a seam goes when nothing says: the film's own default */
+  get defaultOver() {
+    return this.args.over ?? this.graph?.defaultOver ?? 'picture';
+  }
+  /**
+  * HOW DEEP THIS BEAT'S SEAM GOES. The row says, or the presentation
+  * says, or the film does. A seam that covers the furniture is always a
+  * seam with a still in the DOM: the picture's own glass is inside the
+  * canvas and cannot cover anything outside it.
+  */
+  overOf(beat) {
+    const join = beat.join ?? this.defaultJoin;
+    return beat.over ?? this.presentations[join]?.over ?? this.defaultOver;
+  }
+  /** every seam the film can play: its own twelve, and any the score brought */
+  get presentations() {
+    const brought = this.graph?.presentations ?? {};
+    const out = {
+      ...PRESENTATIONS
+    };
+    for (const [name, p] of Object.entries(brought)) {
+      /* a seam the score merely RETIMED, or one the picture runs, brings
+      no component — it keeps whatever the film already knew about it */
+      out[name] = {
+        ...out[name],
+        component: p.component ?? out[name]?.component,
+        over: p.over ?? out[name]?.over,
+        secs: p.secs,
+        still: p.component ? true : out[name]?.still ?? false
+      };
+    }
+    return out;
+  }
+  /** seconds a seam holds the picture; nothing, for one the film does not know */
+  secsOf(join) {
+    return join ? this.presentations[join]?.secs ?? 0 : 0;
+  }
+  /** does the seam paint a still of the outgoing frame over the incoming one */
+  holdsStill(join) {
+    return !!join && !!this.presentations[join]?.still;
+  }
+  /** how much of a frosted city a film frame can carry */
+  get cityGlass() {
+    return this.picture?.cityGlass ?? 0.16;
+  }
+  /** the rig's mid-height: `lookY` is world height minus this */
+  get rigMid() {
+    return this.picture?.rigMid ?? 6.6;
+  }
+  /** how much the passing cloud thickens the air */
+  get cloudHaze() {
+    return this.picture?.cloudHaze ?? 0.09;
+  }
+  /** the face type in the world is set in; a film that names none of it
+  *  leaves the page's own */
+  get worldFamily() {
+    const w = this.picture?.worldType;
+    return w ? w.family : 'Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif';
+  }
+  get worldWeight() {
+    const w = this.picture?.worldType;
+    return w ? w.weight : 800;
+  }
+  get worldTrack() {
+    return this.picture?.worldType?.track ?? 0.02;
+  }
+  /** the editorial accent: the film's own, or the scene's palette by day */
+  accentFor(dark, scene) {
+    const a = this.picture?.accent ?? {
+      dark: '#d9b44a',
+      light: '#8f6b1f'
+    };
+    return dark ? a.dark : a.light ?? scene ?? '#8f6b1f';
+  }
+  /** the film's handles, as the door and the card are given them */
+  get handle() {
+    return {
+      ...VOCABULARY,
+      picture: this.picture?.adjustments ?? VOCABULARY.picture,
+      beat: this.beat,
+      begin: this.begin,
+      chapter: this.chapter,
+      cutTo: this.pick,
+      preview: this.preview,
+      ready: this.ready,
+      renderAt: this.renderAt,
+      restart: this.restart,
+      runtime: this.runtime,
+      seek: this.seek,
+      toc: this.toc
+    };
+  }
+  /* ---- THE CLOCK, when the film is exact ---------------------------- *
+  * One number, seconds into the whole film. The frame loop advances it
+  * while playing; a scrub sets it; everything else is derived from it —
+  * the beat in force, the seam in progress, the score's and the type's
+  * run times, the pose. Nothing below accumulates.
+  * ------------------------------------------------------------------ */
+  get exact() {
+    return this.args.seek === 'exact';
+  }
+  /** the master clock: seconds into the whole film (exact mode) */
+  t = 0;
+  /** a seek happened since the last fold: it lands instantly, seam re-made */
+  jumped = false;
+  /** the score region's context, read every frame for its current run */
+  scoreCtx = null;
+  scoreRun = null;
+  /** the element the seam overlays live in, so their animations can be seeked */
+  joinsEl;
+  /** where the seam on screen began, film seconds, and how long it plays */
+  seamAt = -1;
+  seamLen = 0;
+  /** the lead whose air has been applied ahead of its beat */
+  airedFor = -1;
+  /** where the sun was before this beat asked, for a deterministic walk */
+  sunFrom = null;
+  /* ---- CLIPS --------------------------------------------------------- *
+  * A video, a still or a freeze of the picture over the frame, for a
+  * window on the film's clock (clips.ts). The state is re-derived every
+  * frame; the DOM changes only when the state does; the media element
+  * is driven to its source time, never left to its own clock.
+  * ------------------------------------------------------------------ */ /**
+                                                                          * THE CLIPS ON SCREEN, one row per lane, in lane order — which is also
+                                                                          * paint order. There used to be one of these and a beat that declared
+                                                                          * two clips kept the second one only.
+                                                                          */
+  static {
+    g(this.prototype, "clipRows", [tracked], function () {
+      return [];
+    });
+  }
+  #clipRows = (i(this, "clipRows"), void 0);
+  /** the picture read back, per lane, for a freeze */clipFreezes = new Map();
+  clipNow = new Map();
+  clipMedia = new Map();
+  clipEl = modifier((el, [lane]) => {
+    this.clipMedia.set(lane, el);
+    return () => {
+      if (this.clipMedia.get(lane) === el) {
+        this.clipMedia.delete(lane);
+      }
+    };
+  });
+  /**
+  * THE CLIP, EVERY FRAME. Resolve what should be on screen at this film
+  * time, land the DOM when that changes (a new window is a new element,
+  * so the entrance replays), and drive the media: a playing video is
+  * left to run and corrected when it drifts, a paused or scrubbed one
+  * is seeked, a held one stands at its out point, a frozen one is left
+  * alone. A freeze reads the picture back when its window opens — or,
+  * on a seek into it, after the page has been stood at that moment.
+  */
+  clips(film, filmTime, jumped) {
+    const found = resolveClips(this.all, i => this.beatStart(i), filmTime, this.absoluteIndex, this.totalSecs);
+    const lanes = new Set();
+    const rows = [];
+    for (const clip of found) {
+      const lane = clip.spec.lane ?? laneOfClip(this.all[clip.index], clip);
+      lanes.add(lane);
+      const key = `${this.all[clip.index].id}:${lane}`;
+      const was = this.clipNow.get(lane);
+      this.clipNow.set(lane, clip);
+      const wasKey = was ? `${this.all[was.index].id}:${lane}` : '';
+      if (key !== wasKey) {
+        this.clipFreezes.delete(lane);
+        if (clip.spec.kind === 'freeze') {
+          /* the picture as it stands at the window's head. A seek into the
+          window lands after the head: stand the page there first */
+          if (jumped || clip.since > 0.1) {
+            this.freezeClipAt(clip, filmTime);
+          }
+          const shot = film.snapshot();
+          if (shot.length > 64) {
+            this.clipFreezes.set(lane, shot);
+          }
+        }
+      }
+      rows.push({
+        freeze: this.clipFreezes.get(lane) ?? '',
+        key,
+        lane,
+        spec: clip.spec,
+        src: clip.spec.src ? `${this.assets}${clip.spec.src}` : '',
+        state: clip.state
+      });
+      this.driveClip(lane, clip, was, jumped);
+    }
+    /* a lane that emptied: fade its sound out and forget it */
+    for (const lane of [...this.clipNow.keys()]) {
+      if (lanes.has(lane)) {
+        continue;
+      }
+      this.clipNow.delete(lane);
+      this.clipFreezes.delete(lane);
+      const gone = this.clipMedia.get(lane);
+      if (gone instanceof HTMLVideoElement && gone.volume > 0.001) {
+        gone.volume = Math.max(0, gone.volume - 0.12);
+      }
+    }
+    if (!sameRows(this.clipRows, rows)) {
+      this.clipRows = rows;
+    }
+  }
+  /**
+  * ONE LANE'S MEDIA, every frame. A playing video is left to run and
+  * corrected when it drifts, a paused or scrubbed one is seeked, a held
+  * one stands at its out point, a frozen one is left alone.
+  *
+  * A CLIP'S SOUND NEVER STEPS. The element arrives at zero and is eased
+  * up to its level, and when its window closes it is eased back down
+  * before the exit fade takes the element away — a source that starts or
+  * stops at level is a click, whatever it is playing.
+  */
+  driveClip(lane, found, was, jumped) {
+    const v = this.clipMedia.get(lane);
+    if (found.spec.kind !== 'video') {
+      if (v instanceof HTMLVideoElement && v.volume > 0.001) {
+        v.volume = Math.max(0, v.volume - 0.12);
+      }
+      return;
+    }
+    if (!(v instanceof HTMLVideoElement) || found.source === null) {
+      return;
+    }
+    const level = Math.max(0, Math.min(1, found.spec.volume ?? 0));
+    if (was?.index !== found.index) {
+      v.volume = 0;
+    }
+    const closing = found.state !== 'active' ? 0 : level;
+    if (Math.abs(v.volume - closing) > 0.002) {
+      v.volume = v.volume + (closing - v.volume) * 0.28;
+    }
+    const rate = found.spec.rate ?? 1;
+    const live = found.state === 'active' && this.playing && this.scrubAt === null && !jumped;
+    if (live) {
+      if (v.paused) {
+        v.currentTime = found.source;
+        v.playbackRate = rate;
+        void v.play().catch(() => {});
+      } else if (Math.abs(v.currentTime - found.source) > 0.2) {
+        v.currentTime = found.source;
+      }
+    } else {
+      if (!v.paused) {
+        v.pause();
+      }
+      if (Math.abs(v.currentTime - found.source) > 0.04) {
+        v.currentTime = found.source;
+      }
+    }
+  }
+  /**
+  * THE PICTURE AT A MOMENT THAT HAS PASSED. A freeze seeked into needs
+  * the frame from its window's head: the score is stood there for one
+  * evaluation (the camera step reports the pose), the page is posed and
+  * clocked to that moment, and the fold's own time is restored after
+  * the read-back.
+  */
+  freezeClipAt(clip, filmTime) {
+    const film = this.film;
+    const run = this.scoreCtx?.run ?? null;
+    if (!film || !run) {
+      return;
+    }
+    const head = filmTime - clip.since;
+    const b = this.all[clip.index];
+    const local = Math.min(1, Math.max(0, (head - this.beatStart(clip.index)) / (b.ticks * TICK)));
+    run.pause();
+    run.time = head;
+    const g = this.goal;
+    film.pose({
+      az: g.yaw * RAD,
+      el: g.pitch * RAD,
+      fov: null,
+      fx: g.fx ?? 0,
+      fz: g.fz ?? 0,
+      lookY: g.lookY,
+      near: null,
+      ox: g.ox ?? 0,
+      snap: true,
+      zoom: g.dolly
+    });
+    if (Array.isArray(b.build)) {
+      film.time(lerp(b.build[0], b.build[1], smooth(Math.min(1, local / (b.buildBy ?? 1)))));
+    }
+    run.time = this.exact ? this.t : run.time;
+  }
+  /**
+  * FILM SECONDS AT WHICH A BEAT'S OWN SHOT BEGINS. The cues fire one
+  * tick after the beat table says, because the pose-in-force seed
+  * occupies the spline's first slot — so the windows the exact clock
+  * derives carry the same offset, and the picture and the type agree
+  * with the cut film to the frame.
+  */
+  beatStart(i) {
+    return beatStart(this.all, i);
+  }
+  /** the beat in force at a film time */
+  indexAt(t) {
+    let i = 0;
+    while (i + 1 < this.all.length && this.beatStart(i + 1) <= t) {
+      i += 1;
+    }
+    return i;
+  }
+  /** the score's region, held so its run can be driven by the clock */
+  grabScore = modifier((_el, [ctx]) => {
+    this.scoreCtx = ctx;
+    return () => {
+      if (this.scoreCtx === ctx) {
+        this.scoreCtx = null;
+      }
+    };
+  });
+  joinsWrap = modifier(el => {
+    this.joinsEl = el;
+    return () => {
+      if (this.joinsEl === el) {
+        this.joinsEl = undefined;
+      }
+    };
+  });
+  /** the score must stand even while paused: a paused exact film is a still */
+  get scoreOn() {
+    return this.playing || this.exact;
+  }
+  /**
+  * SEEK. In exact mode the clock is set and the next fold lands there;
+  * in cut mode the nearest shot's head is re-cut to, which is the only
+  * honest seek a chased lens has.
+  */
+  seek = seconds => {
+    if (!this.exact) {
+      let i = 0;
+      while (i + 1 < this.all.length && this.secsBefore(i + 1) <= seconds) {
+        i += 1;
+      }
+      this.cutTo(i);
+      return;
+    }
+    const total = this.totalSecs;
+    this.t = Math.max(0, Math.min(total, seconds));
+    this.jumped = true;
+    this.menu = false;
+    if (this.ended && this.t < total) {
+      this.ended = false;
+      this.idled = false;
+      this.film?.idle(false);
+    }
+    if (this.booted && this.film) {
+      this.fold();
+    }
+  };
+  /**
+  * A STILL AT A TIME, for a capture worker: pause, seek, run one frame
+  * of the loop against a zero step, and give the page two frames to
+  * draw it. The same code path as playing there — that is the claim.
+  */ /** a frame is being rendered rather than scrubbed to: seams play */
+  rendering = false;
+  /**
+  * A RENDER OPENS THE DOOR ITSELF.
+  *
+  * `?from=0` puts the title card up and leaves the film unbooted — and
+  * an unbooted film HAS NO SCORE, because the whole `<Choreo>` sits
+  * behind `{{#if this.booted}}` (the rig has to be an insertion before
+  * the camera step has a subject). So `fold`'s `run.time = t` wrote to
+  * a null run, `onCamera3D` never fired, `goal` stayed wherever the
+  * load path's `snap` seated it, and exact mode copied that one pose
+  * forward on every frame. Measured on towers, a stepped render swept
+  * half a degree of yaw across 273 seconds where the compiled path
+  * sweeps 380 — a whole render of a frozen lens, and `film-render.mjs`
+  * hit it every time, because its default `--from` is 0.
+  *
+  * A render is a request for the film, not for the lobby. So it opens
+  * the door itself, MUTED — nothing was clicked, and no browser hands
+  * out audio for a gesture nobody made.
+  */
+  renderAt = async seconds => {
+    if (!this.exact) {
+      this.seek(seconds);
+      return;
+    }
+    await this.openTheDoor();
+    this.playing = false;
+    this.rendering = true;
+    try {
+      this.seek(seconds);
+      const now = performance.now();
+      this.lastTick = now;
+      this.tick(now);
+      await new Promise(r => requestAnimationFrame(() => r(undefined)));
+      await new Promise(r => requestAnimationFrame(() => r(undefined)));
+    } finally {
+      this.rendering = false;
+    }
+  };
+  /**
+  * THE DOOR, OPENED BY A SCRIPT. Two waits, and neither is optional.
+  *
+  * The handle publishes itself from the mount modifier, a frame before
+  * the iframe's load seats the port — so a renderer that polls for
+  * `__choreo[name]` can call in before there is a picture to begin
+  * against, and `begin` would only pocket the choice. And `begin`
+  * itself DEFERS the lap bump that buys the score region its second
+  * render pass: until that pass lands the run does not exist, and a
+  * seek against a missing run is exactly the frozen lens this avoids.
+  *
+  * Both waits are bounded. A render against a film that never arrives
+  * degrades to the frame it would have drawn before, rather than
+  * hanging the worker on a promise that will not settle.
+  */
+  async openTheDoor() {
+    if (this.booted) {
+      return;
+    }
+    const frame = () => new Promise(r => requestAnimationFrame(() => r(undefined)));
+    for (let i = 0; i < BOOT_FRAMES && !this.film; i += 1) {
+      await frame();
+    }
+    if (!this.film) {
+      return;
+    }
+    this.begin(false);
+    for (let i = 0; i < BOOT_FRAMES && !this.scoreCtx?.run; i += 1) {
+      await frame();
+    }
+  }
+  /**
+  * THE FOLD (exact mode): the beat in force is the one whose window
+  * holds the clock; entering it — forward by playing, or by a seek in
+  * either direction — applies it whole, because every beat asserts its
+  * complete state and never inherits. A seek that lands inside a seam
+  * re-makes the outgoing frame first, so the seam plays from the middle
+  * exactly as it would have played into it.
+  */
+  fold() {
+    const film = this.film;
+    if (!film) {
+      return;
+    }
+    const t = this.t;
+    const i = this.indexAt(t);
+    const jumped = this.jumped;
+    this.jumped = false;
+    /* the air of a lead: the sky turns while the lens is still travelling */
+    const next = this.all[i + 1];
+    if (next && (next.lead ?? 0) > 0 && t >= this.secsBefore(i + 1) + TICK && this.airedFor !== i + 1) {
+      this.airedFor = i + 1;
+      this.applyAir(next, false);
+    }
+    if (i !== this.beatIndex || jumped) {
+      const beat = this.all[i];
+      const since = t - this.beatStart(i);
+      if (jumped) {
+        this.settleAir(i);
+        this.airedFor = -1;
+        this.freeze = '';
+      }
+      const join = beat.cut || beat.join ? beat.join ?? this.defaultJoin : null;
+      const len = this.secsOf(join ?? undefined);
+      this.seamAt = -1;
+      this.seamLen = 0;
+      /* A SEEK LANDS PAST THE SEAM. A seam is played forward, over a
+      still of the frame that was actually on screen; a seek has no
+      such frame, and re-making one (stand the picture at the previous
+      tail, read it back) bought a read-back per scrub for a transition
+      nobody asked to watch. So a jump into a seam's window stands at
+      the seam's END: the incoming shot, whole. */ /**
+                                                   * A SCRUB IS NOT A RENDER.
+                                                   *
+                                                   * A jump into a seam's window stands at the seam's END: a seam is
+                                                   * played forward over a still of the frame that was actually on
+                                                   * screen, a scrub has no such frame, and re-making one bought a
+                                                   * read-back per drag for a transition nobody asked to watch.
+                                                   *
+                                                   * But `renderAt` is a jump too, and a film rendered frame by frame
+                                                   * is a jump on EVERY frame — so with that rule alone an exact film
+                                                   * rendered deterministically had no seams in it at all. Which
+                                                   * breaks the promise the mode is named for: the same frame whether
+                                                   * you played there or rendered there. Measured on the reel, five of
+                                                   * its twelve seams came out as hard cuts in the render and worked
+                                                   * when played.
+                                                   *
+                                                   * So a render says so, and gets its seams.
+                                                   */
+      const inSeam = !!join && since < len && i > 0 && (!jumped || this.rendering);
+      const frozen = false;
+      if (inSeam) {
+        this.seamAt = this.beatStart(i);
+        this.seamLen = len;
+      }
+      this.beatIndex = i;
+      this.applyBeat(beat, jumped, {
+        frozen,
+        seam: inSeam,
+        since
+      });
+      if (jumped) {
+        this.speakAt(beat, since);
+      }
+    }
+    /* the seam on screen is a function of the clock: its animations are
+    paused and stood at the time the seam has been playing */
+    if (this.seamAt >= 0) {
+      const ms = Math.max(0, (t - this.seamAt) * 1000);
+      for (const a of this.joinsEl?.getAnimations({
+        subtree: true
+      }) ?? []) {
+        a.pause();
+        a.currentTime = ms;
+      }
+      if (t - this.seamAt > this.seamLen + 0.3 || t < this.seamAt) {
+        this.seamAt = -1;
+        this.joinKind = '';
+      }
+    }
+    /* the score's run is driven, not played, and everything ATTACHED to
+    the score — the type, the insert, the clip — is driven by it in
+    turn (`c.Attach`): one write, and every window on the film's clock
+    stands where the clock says */
+    const run = this.scoreCtx?.run ?? null;
+    if (run !== this.scoreRun) {
+      this.scoreRun = run;
+      run?.pause();
+    }
+    if (run) {
+      run.time = t;
+    }
+    if (t >= this.totalSecs && !this.ended) {
+      this.end();
+    }
+  }
+  /** a line, from the middle: what a seek owes the voice */
+  speakAt(beat, since) {
+    this.hush();
+    if (!beat.vo || !this.sound) {
+      this.film?.duck(1);
+      return;
+    }
+    const read = this.voSecs[beat.id] ?? beat.ticks * TICK * 0.66;
+    if (since < read - 0.3) {
+      this.film?.voice(this.voSrc(beat), this.voGain[beat.id] ?? 1, since);
+      this.primeNext(beat);
+    } else {
+      this.film?.duck(1);
+    }
+  }
+  /**
+  * THE SEAM'S GATE (`film/seam.ts`). A join's still is a JPEG the
+  * browser has not decoded yet on the frame it is handed over, and the
+  * lens moves on that frame — so every cut used to show three frames of
+  * the incoming shot before the outgoing one was on screen. The gate
+  * decodes first and holds the cut; a seam with no still runs at once.
+  */
+  seam = new Seam();
+  /**
+  * THE SEAM, EXACT. Every join that carries the outgoing frame carries it
+  * as a still in the DOM — the page's own dissolves run on the page's
+  * clock and cannot be stood at a time — and the whip, which is the
+  * chaser's, becomes a cut. The overlay is then driven by the fold.
+  */
+  seamExact(film, beat, join, seam) {
+    const wants = seam ? seam.seam : true;
+    /* the glass holds a mix seam here too, and an exact film gets the
+    better half of the bargain: the seam is a function of the clock, so
+    a scrub through it needs nothing stood at a time */
+    const glass = wants ? this.glassFor(join) : null;
+    if (glass) {
+      if (this.glassKind !== join) {
+        film.freeze?.(true);
+        this.glassKind = join;
+        this.glassName = glass.name ?? '';
+        this.glassLen = this.secsOf(join);
+        this.glassColor = beat.dipTo ?? '#0d0905';
+        this.freeze = '';
+        this.joinKind = '';
+      }
+      if (beat.cut) {
+        this.snap(beat.cam);
+      }
+      return;
+    }
+    const stills = this.holdsStill(join);
+    let held = this.freeze;
+    if (wants && stills && !seam?.frozen) {
+      const shot = film.snapshot();
+      held = shot.length > 64 ? shot : '';
+    }
+    if (!wants) {
+      held = '';
+      this.freeze = '';
+    }
+    /* the lens does not move until the still can be painted, and the
+    picture holds the outgoing frame while it waits */
+    if (held) {
+      film.freeze?.(true);
+    }
+    this.seam.hold(held, () => {
+      film.freeze?.(false);
+      this.seamPlay(film, beat, join, wants, held);
+    });
+  }
+  /** the seam itself: the still on screen, the lens on the incoming shot */
+  seamPlay(film, beat, join, wants, held) {
+    this.freeze = held;
+    if (beat.cut || join === 'wipe' || join === 'whip') {
+      this.snap(beat.cam);
+    }
+    if (!wants) {
+      return;
+    }
+    const deep = this.overOf(beat);
+    switch (join) {
+      case 'cut':
+      case 'whip':
+        break;
+      case 'dip':
+        this.dipColor = beat.dipTo ?? '#0d0905';
+        this.play('dip', deep);
+        break;
+      case 'flash':
+        this.play('flash', deep);
+        break;
+      case 'sweep':
+        this.lightSweep(film, beat);
+        break;
+      case 'defocus':
+        if (this.freeze) {
+          this.play('defocus', deep);
+        }
+        break;
+      case 'iris':
+        {
+          if (!this.freeze) {
+            break;
+          }
+          const v = film.view();
+          const p = beat.to ? film.project(...beat.to) : undefined;
+          const cx = p ? Math.max(12, Math.min(88, p.x / v.w * 100)) : 50;
+          const cy = p ? Math.max(12, Math.min(88, p.y / v.h * 100)) : 50;
+          this.irisAt = `--ix:${cx.toFixed(1)}%;--iy:${cy.toFixed(1)}%`;
+          this.play('iris', deep);
+          break;
+        }
+      default:
+        if (this.freeze) {
+          this.play(join, deep);
+        }
+    }
+  }
+  /** the last cue has run: hold the pose, settle the music, offer the card */
+  end() {
+    this.playing = false;
+    this.ended = true;
+    /* the voice goes out with the picture, not under it: a line still
+    running at the end is faded over a second, never cut */
+    this.film?.voiceStop(1000);
+    /* AND THE SCORE ENDS WITH IT. Ducking a step left the bed looping
+    under the end card for as long as the card was up — a film that
+    has finished playing over music that has not. It goes out over
+    four seconds, which is long enough to read as an ending and short
+    enough that the card is quiet before anybody clicks anything. */
+    if (this.film?.outro) {
+      this.film.outro(4200);
+    } else {
+      this.film?.duck(0.35);
+    }
+  }
+  /** the beat on screen; the score names it, the front layer renders it */
+  static {
+    g(this.prototype, "beatIndex", [tracked], function () {
+      return 0;
+    });
+  }
+  #beatIndex = (i(this, "beatIndex"), void 0);
+  static {
+    g(this.prototype, "playing", [tracked], function () {
+      return true;
+    });
+  }
+  #playing = (i(this, "playing"), void 0);
+  static {
+    g(this.prototype, "lap", [tracked], function () {
+      return 0;
+    });
+  }
+  #lap = (i(this, "lap"), void 0);
+  /** bumping this edits the score, which is how a finite film loops */
+  static {
+    g(this.prototype, "booted", [tracked], function () {
+      return false;
+    });
+  }
+  #booted = (i(this, "booted"), void 0);
+  static {
+    g(this.prototype, "joinKind", [tracked], function () {
+      return '';
+    });
+  }
+  #joinKind = (i(this, "joinKind"), void 0);
+  /** which seam is playing, and a key that replays it: bumped on every cut */
+  static {
+    g(this.prototype, "joinStamp", [tracked], function () {
+      return 0;
+    });
+  }
+  #joinStamp = (i(this, "joinStamp"), void 0);
+  static {
+    g(this.prototype, "joinOver", [tracked], function () {
+      return false;
+    });
+  }
+  #joinOver = (i(this, "joinOver"), void 0);
+  /** the seam on screen covers the furniture, not only the picture */
+  overTimer = 0;
+  /**
+  * THE SEAM IN THE GLASS. Its kind, how long it has and the colour it
+  * passes through — and `reveal`, how much of the incoming frame is NOT
+  * covered by it, which is the film's other half: the type, the stamp
+  * and the inserts wear it, so a caption is uncovered by the same
+  * gesture that uncovers the picture.
+  */
+  glassKind = '';
+  /** the picture's own name for it, when the picture declared this seam */
+  glassName = '';
+  glassLen = 0;
+  glassColor = '';
+  reveal = 1;
+  /** the captured outgoing frame every freeze-based join plays with */
+  static {
+    g(this.prototype, "freeze", [tracked], function () {
+      return '';
+    });
+  }
+  #freeze = (i(this, "freeze"), void 0);
+  static {
+    g(this.prototype, "dipColor", [tracked], function () {
+      return '#0d0905';
+    });
+  }
+  #dipColor = (i(this, "dipColor"), void 0);
+  /** the 'dip' join's veil colour */
+  static {
+    g(this.prototype, "irisAt", [tracked], function () {
+      return '';
+    });
+  }
+  #irisAt = (i(this, "irisAt"), void 0);
+  /** where the iris closes to, as inline custom properties */
+  static {
+    g(this.prototype, "fault", [tracked], function () {
+      return '';
+    });
+  }
+  #fault = (i(this, "fault"), void 0);
+  /** dev beacon: the first uncaught error, worn on the sleeve */
+  /**
+  * THE SEAM, DRIVEN. Half of it is the picture, which is handed two
+  * numbers and composites them in light; half is the furniture, which
+  * wears what is left over. Both come from one progress, and that
+  * progress is a function of the clock — so a seek through a seam needs
+  * nothing stood at a time, which is what the DOM overlay always did.
+  */ /** take a driven seam off: the picture back to live, the furniture whole */
+  endSeam() {
+    if (!this.glassKind) {
+      return;
+    }
+    this.glassKind = '';
+    this.glassName = '';
+    this.reveal = 1;
+    this.film?.seam?.(null);
+  }
+  driveSeam(film, t) {
+    if (!this.glassKind) {
+      return;
+    }
+    const len = Math.max(0.001, this.glassLen);
+    const p = this.exact ? this.seamAt >= 0 ? (t - this.seamAt) / len : 1 : (performance.now() - this.beatAt) / 1000 / len;
+    if (p >= 1) {
+      this.endSeam();
+      return;
+    }
+    if (this.glassName) {
+      /* a seam the picture declared: it owns the shape, so the film hands
+      it the progress and takes the progress back as the reveal — the
+      furniture arrives with the transition it cannot see inside */
+      film.seam?.({
+        mix: 0,
+        name: this.glassName,
+        p,
+        veil: 0
+      });
+      this.reveal = p;
+      return;
+    }
+    const {
+      mix,
+      veil
+    } = seamShape(this.glassKind, p);
+    film.seam?.({
+      color: this.glassColor,
+      mix,
+      p,
+      veil
+    });
+    this.reveal = 1 - Math.max(mix, veil);
+  }
+  /**
+  * Run a seam's overlay: a new element per cut, from its own first
+  * frame. A seam played `everything` is lifted above the type, the
+  * insert and the clip for as long as it runs, and put back after — an
+  * empty layer left standing over the furniture would swallow the next
+  * shot's pointer events, and there is no event for a CSS animation the
+  * film did not start.
+  */
+  play(kind, over = 'picture') {
+    this.joinKind = kind;
+    this.joinStamp += 1;
+    this.joinOver = over === 'everything';
+    window.clearTimeout(this.overTimer);
+    if (this.joinOver) {
+      const stamp = this.joinStamp;
+      this.overTimer = window.setTimeout(() => {
+        if (this.joinStamp === stamp) {
+          this.joinOver = false;
+        }
+      }, this.secsOf(kind) * 1000 + 80);
+    }
+  }
+  /**
+  * THE ENDING. A film that laps back to its own first frame has no
+  * ending, and the coda earns one — so when the last cue has run, the
+  * run simply stops: the final pose holds, the music settles down a
+  * step, and a card offers the way back in. Replay is a choice the
+  * viewer makes, never something the clock does to them.
+  */
+  static {
+    g(this.prototype, "ended", [tracked], function () {
+      return false;
+    });
+  }
+  #ended = (i(this, "ended"), void 0);
+  static {
+    g(this.prototype, "yearNow", [tracked], function () {
+      return 1882;
+    });
+  }
+  #yearNow = (i(this, "yearNow"), void 0);
+  /**
+  * THE YEAR IS THE SUBJECT. A film whose whole argument is that one
+  * building took a hundred and forty-four years cannot leave the audience
+  * to infer the date from the state of the scaffolding: the year is on
+  * screen, and it is on a line from the first stone to the present, so
+  * 1954 is not a number but a POSITION — two thirds along a rule that
+  * still has a third to run.
+  */
+  yearSent = 0;
+  /** whether the announced year is currently seated in the scene */
+  stampOn = false;
+  /** the page has been told the picture is static — see the frame loop */
+  idled = false;
+  gradeSent = '';
+  rakeSent = NaN;
+  rakeDeg = 35;
+  /** which beat's lightning cue has fired (reset on every beat change) */
+  struck = '';
+  /** which of the beat's hours (Beat.hours) is in force; -1 between beats */
+  hourStep = -1;
+  /** the next grade goes to the glass without its ease (a still-join) */
+  gradeSnap = false;
+  /** the last stock sent to the glass, by name; undefined before the first */
+  lutSent = undefined;
+  /** the last hour a beat named, so the night can be known without naming it again */
+  hourNow = 0;
+  /** the scrub track's width in px, kept by a ResizeObserver */
+  trackW = 0;
+  trackRO;
+  /** the chapter fractions the bar is drawn with, computed once */
+  segFr;
+  trackWrap = modifier(el => {
+    this.trackW = el.clientWidth;
+    this.trackRO = new ResizeObserver(() => {
+      this.trackW = el.clientWidth;
+    });
+    this.trackRO.observe(el);
+    return () => {
+      this.trackRO?.disconnect();
+      this.trackRO = undefined;
+    };
+  });
+  /**
+  * THE KNOB IS THE FILL'S END. The bar is chapters with a gap between
+  * them, so the playhead's position is not linear in the playhead's
+  * value — a second formula for the knob drifts from the fill inside
+  * every segment. This is the one formula: the same fractions the fill
+  * uses, over the measured track, with the gaps added back.
+  */
+  headPx(prog) {
+    const segs = this.segFr ??= this.playbar.map(c => {
+      const m = /--s0:([\d.]+);--sl:([\d.]+)/.exec(c.style);
+      return {
+        s0: +m[1],
+        sl: +m[2]
+      };
+    });
+    const gap = 2;
+    const usable = this.trackW - gap * (segs.length - 1);
+    let i = segs.findIndex((s, n) => prog < s.s0 + s.sl || n === segs.length - 1);
+    if (i < 0) {
+      i = segs.length - 1;
+    }
+    const s = segs[i];
+    const f = Math.max(0, Math.min(1, (prog - s.s0) / s.sl));
+    return (s.s0 + f * s.sl) * usable + i * gap;
+  }
+  /** which tower the lineup's metronome is on; -1 between lineups */
+  static {
+    g(this.prototype, "cycleStep", [tracked], function () {
+      return -1;
+    });
+  }
+  #cycleStep = (i(this, "cycleStep"), void 0);
+  film;
+  /**
+  * THE FRAME'S DRESSING, WHERE THE PICTURE CAN TAKE IT.
+  *
+  * The wash and the cloud were CSS layers over the canvas, which meant a
+  * seam could not touch them: the picture dissolved and the paper behind
+  * the type snapped on the cut frame — two edits at once. A transition
+  * applies to what its own container renders, so they belong in the
+  * container, and the container is the picture's post pass (where the
+  * vignette, the grain, the split tone and the grade already live). A
+  * picture that offers `wash`/`cloud` gets them and the film stops
+  * drawing its own; one that does not keeps the CSS layers.
+  */
+  static {
+    g(this.prototype, "washInGlass", [tracked], function () {
+      return false;
+    });
+  }
+  #washInGlass = (i(this, "washInGlass"), void 0);
+  static {
+    g(this.prototype, "cloudInGlass", [tracked], function () {
+      return false;
+    });
+  }
+  #cloudInGlass = (i(this, "cloudInGlass"), void 0);
+  static {
+    g(this.prototype, "dimInGlass", [tracked], function () {
+      return false;
+    });
+  }
+  #dimInGlass = (i(this, "dimInGlass"), void 0);
+  /** the palette's paper, as `wear` last read it, for the wash */paperNow = '';
+  /** the last wash the picture was told about: mode and paper, told on change */
+  washSent = '';
+  frameEl;
+  lineEl;
+  dotEl;
+  tetherEl;
+  dim;
+  /** the dim's own value, chased rather than cut so it never snaps on */
+  dimNow = 0;
+  plateEl;
+  rowEls = [];
+  raf = 0;
+  lastTick = 0;
+  /** when the current beat was entered, for the clocks it owns */
+  beatAt = 0;
+  /** where the beat's sky word was planted, in world azimuth */
+  skyAz = 0;
+  /** the azimuth the mark word is planted on, behind the building */
+  markAz = 0;
+  /** a sideways nudge in world units, for a word too short to centre */
+  markOff = 0;
+  /** the height the word rises FROM — set when it actually arrives */
+  markFrom = 2.6;
+  markSeated = false;
+  /** the last pose actually pushed — the final smoothing stage */
+  sent;
+  /** the light in force, and the light the beat asked for */
+  sunNow = null;
+  sunGoal = null;
+  /* ---- the player ------------------------------------------------- *
+  * A film owes its viewer the controls every other film has: a
+  * playhead you can put your hand on, chapters you can see coming, a
+  * clock, and a way to make it the whole screen. It also owes them the
+  * PICTURE — so the whole apparatus stands down when nobody is
+  * touching it and comes back on the first movement.
+  * ------------------------------------------------------------------ */
+  static {
+    g(this.prototype, "idle", [tracked], function () {
+      return false;
+    });
+  }
+  #idle = (i(this, "idle"), void 0);
+  static {
+    g(this.prototype, "scrubAt", [tracked], function () {
+      return null;
+    });
+  }
+  #scrubAt = (i(this, "scrubAt"), void 0);
+  /** the fraction the hand is holding while scrubbing, else null */
+  static {
+    g(this.prototype, "hoverAt", [tracked], function () {
+      return null;
+    });
+  }
+  #hoverAt = (i(this, "hoverAt"), void 0);
+  /** the fraction under a resting pointer on the bar, else null */
+  static {
+    g(this.prototype, "vol", [tracked], function () {
+      return Film.savedVol();
+    });
+  }
+  #vol = (i(this, "vol"), void 0);
+  /** the master fader, 0..1, remembered across visits */
+  static {
+    g(this.prototype, "burst", [tracked], function () {
+      return '';
+    });
+  }
+  #burst = (i(this, "burst"), void 0);
+  /** the centre-screen glyph that confirms a play or a pause */
+  static {
+    g(this.prototype, "paused", [tracked], function () {
+      return false;
+    });
+  }
+  #paused = (i(this, "paused"), void 0);
+  /** the viewer's pause: the run, the page and the beat clock all hold */
+  pausedAt = 0;
+  /** the lap whose head beat the cut itself already applied */
+  primedLap = -1;
+  /** the bar's own element, for the slider's live value */
+  scrubEl;
+  shownPct = -1;
+  static {
+    g(this.prototype, "clock", [tracked], function () {
+      return '0:00';
+    });
+  }
+  #clock = (i(this, "clock"), void 0);
+  static {
+    g(this.prototype, "full", [tracked], function () {
+      return false;
+    });
+  }
+  #full = (i(this, "full"), void 0);
+  idleTimer = 0;
+  shownSec = -1;
+  /** the whole film, in seconds, leads included */
+  get totalSecs() {
+    return totalSecs(this.all);
+  }
+  secsBefore(index) {
+    return secsBefore(this.all, index);
+  }
+  /** one segment per chapter, sized and placed in whole-film fractions */
+  get playbar() {
+    const total = this.totalSecs;
+    return this.chapterHeads.map((head, i) => {
+      const end = this.chapterHeads[i + 1] ?? this.all.length;
+      const ch = this.chapters[this.all[head].ch] ?? this.chapters[0];
+      const s0 = this.secsBefore(head) / total;
+      const sl = (this.secsBefore(end) - this.secsBefore(head)) / total;
+      return {
+        head,
+        n: ch.n,
+        style: `flex:${sl};--s0:${s0.toFixed(5)};--sl:${sl.toFixed(5)}`,
+        title: ch.title
+      };
+    });
+  }
+  static mmss(s) {
+    const m = Math.floor(Math.max(0, s) / 60);
+    return `${m}:${String(Math.floor(Math.max(0, s) % 60)).padStart(2, '0')}`;
+  }
+  get duration() {
+    return Film.mmss(this.totalSecs);
+  }
+  /**
+  * What the hand is pointing at — resting on the bar or dragging it:
+  * the chapter under it and the time, on two lines, the way every
+  * player's hover bubble does. A drag wins over a hover.
+  */
+  get tip() {
+    const at = this.scrubAt ?? this.hoverAt;
+    if (at === null) {
+      return null;
+    }
+    const want = at * this.totalSecs;
+    let i = 0;
+    while (i + 1 < this.all.length && this.secsBefore(i + 1) <= want) {
+      i += 1;
+    }
+    const ch = this.chapters[this.all[i].ch] ?? this.chapters[0];
+    return {
+      ch: `${ch.n} ${ch.title}`,
+      t: Film.mmss(want)
+    };
+  }
+  /** rolling AND not held by the viewer: what the play button shows */
+  get live() {
+    return this.playing && !this.paused;
+  }
+  /** the fader's setting, as it was left last time — one setting for
+  *  every film, the way a viewer's volume is theirs and not the film's */
+  static savedVol() {
+    try {
+      const v = Number(window.localStorage.getItem('cf-vol'));
+      return Number.isFinite(v) && v > 0 && v <= 1 ? v : 1;
+    } catch {
+      return 1;
+    }
+  }
+  /** sound on, and the fader up: the speaker glyph's three states */
+  get loud() {
+    if (!this.sound || this.vol <= 0) {
+      return 'off';
+    }
+    return this.vol < 0.5 ? 'low' : 'high';
+  }
+  get volStyle() {
+    return `--cf-vol:${this.vol.toFixed(2)}`;
+  }
+  /**
+  * THE FADER. Dragging it up while muted unmutes, because that is what
+  * the hand means; the value is the page's master gain, under the mix
+  * and the mute, and it is remembered for the next visit.
+  */
+  fade = e => {
+    const v = Number(e.target.value);
+    this.vol = v;
+    this.film?.volume?.(v);
+    try {
+      window.localStorage.setItem('cf-vol', v.toFixed(2));
+    } catch {
+      /* private mode: the fader just does not remember */}
+    if (v > 0 && !this.sound) {
+      this.hear();
+    }
+  };
+  /** the glyph that flashes in the middle of the picture on play/pause */
+  pop(kind) {
+    if (this.gate || this.ended) {
+      return;
+    }
+    this.burst = '';
+    requestAnimationFrame(() => {
+      this.burst = kind;
+    });
+  }
+  burstDone = () => {
+    this.burst = '';
+  };
+  /**
+  * A tap on the picture is play/pause and two taps are full screen —
+  * the grammar of every player since the first one. The controls, the
+  * door, the end card, the rail and the menu keep their own clicks.
+  */
+  static onGlass(e) {
+    const t = e.target;
+    return !t?.closest('button, a, input, .cf-player, .cf-menu, .cf-gate, .cf-rail');
+  }
+  tap = e => {
+    if (this.gate || this.ended || this.menu || !Film.onGlass(e)) {
+      return;
+    }
+    this.toggle();
+  };
+  tapTwice = e => {
+    if (this.gate || this.ended || this.menu || !Film.onGlass(e)) {
+      return;
+    }
+    this.screen();
+  };
+  /** the bar's own element, for the slider's live value */
+  slider = modifier(el => {
+    this.scrubEl = el;
+    return () => {
+      this.scrubEl = undefined;
+    };
+  });
+  wake = () => {
+    if (this.idle) {
+      this.idle = false;
+    }
+    window.clearTimeout(this.idleTimer);
+    this.idleTimer = window.setTimeout(() => {
+      /* never hide the controls out from under a hand that is using them */if (this.scrubAt === null && !this.menu && this.live) {
+        this.idle = true;
+      }
+    }, 2600);
+  };
+  scrubFrom(e) {
+    const el = e.currentTarget.getBoundingClientRect();
+    return Math.max(0, Math.min(1, (e.clientX - el.left) / el.width));
+  }
+  /**
+  * The bubble and the ghost fill follow the pointer, not the playhead:
+  * the bubble's x in pixels (held off the edges so it never clips) and
+  * the hover fraction, both as properties, both without a re-render.
+  */
+  point(e) {
+    const r = e.currentTarget.getBoundingClientRect();
+    const x = Math.max(0, Math.min(r.width, e.clientX - r.left));
+    const at = r.width > 0 ? x / r.width : 0;
+    const pad = Math.min(56, r.width / 2);
+    const st = this.pageEl?.style;
+    st?.setProperty('--cf-tipx', Math.max(pad, Math.min(r.width - pad, x)).toFixed(1));
+    st?.setProperty('--cf-hov', at.toFixed(5));
+    return at;
+  }
+  scrubDown = event => {
+    const e = event;
+    e.currentTarget.setPointerCapture(e.pointerId);
+    this.scrubAt = this.point(e);
+  };
+  scrubMove = event => {
+    const e = event;
+    const at = this.point(e);
+    if (this.scrubAt !== null) {
+      this.scrubAt = at;
+      /* an exact film follows the hand: the picture IS the tip */
+      if (this.exact) {
+        this.seek(this.barSecs(this.scrubAt));
+      }
+    } else if (e.pointerType !== 'touch') {
+      this.hoverAt = at;
+    }
+  };
+  scrubLeave = () => {
+    this.hoverAt = null;
+    this.pageEl?.style.setProperty('--cf-hov', '0');
+  };
+  /**
+  * THE PLAYHEAD SNAPS TO A SHOT, because this film cannot seek: the
+  * lens is an integrator and a run dropped into its own middle arrives
+  * with the wrong velocity (docs/choreo-splices.md). So the drag reads
+  * as time, the label names the shot under the hand, and the release
+  * RE-CUTS from that shot's head — which is the same edit the chapter
+  * buttons and the arrow keys make.
+  */ /**
+     * A HAND ON THE BAR NEVER LANDS ON THE CARD. The bar's right edge is
+     * the film's last second, and a click there — or a drag that ran off
+     * the end — seeks to the total, which is the ending itself: the card
+     * came up under a hand that wanted the last shot. The bar stops two
+     * seconds short; the ending is reached by playing to it.
+     */
+  barSecs(at) {
+    return Math.min(at * this.totalSecs, Math.max(0, this.totalSecs - 2));
+  }
+  scrubUp = event => {
+    const e = event;
+    const at = this.scrubAt ?? this.scrubFrom(e);
+    this.scrubAt = null;
+    this.hoverAt = null;
+    this.pageEl?.style.setProperty('--cf-hov', '0');
+    this.seek(this.barSecs(at));
+  };
+  screen = () => {
+    const el = this.pageEl ?? this.frameEl;
+    if (!el) {
+      return;
+    }
+    if (document.fullscreenElement) {
+      void document.exitFullscreen();
+    } else {
+      void el.requestFullscreen?.();
+    }
+  };
+  fullChange = () => {
+    this.full = !!document.fullscreenElement;
+  };
+  /**
+  * THE POINTER MOVES THE WORLD A LITTLE.
+  *
+  * A film that cannot be touched is a video, and the whole argument
+  * here is that this is a scene. So the cursor gets a few degrees of
+  * lean: the lens takes a fraction of it (real parallax — the building
+  * and the hills separate) and the type planes take more of it in the
+  * other direction, each layer by its own depth. It is small enough to
+  * be felt rather than played with, and damped, so it never fights the
+  * shot the score is composing.
+  */
+  lean = {
+    x: 0,
+    y: 0
+  };
+  leanTo = {
+    x: 0,
+    y: 0
+  };
+  aim = e => {
+    const el = this.pageEl ?? this.frameEl;
+    if (!el) {
+      return;
+    }
+    const r = el.getBoundingClientRect();
+    this.leanTo.x = Math.max(-1, Math.min(1, (e.clientX - r.left) / r.width * 2 - 1));
+    this.leanTo.y = Math.max(-1, Math.min(1, (e.clientY - r.top) / r.height * 2 - 1));
+  };
+  /** the haze the beat asked for — the weather drift breathes around it */
+  hazeBase = null;
+  /* the score's goal, and the two stages that chase it */
+  goal = {
+    ...(this.all[0] ?? EMPTY_BEAT).cam
+  };
+  mid = {
+    ...(this.all[0] ?? EMPTY_BEAT).cam
+  };
+  midV = {
+    dolly: 0,
+    fx: 0,
+    fz: 0,
+    lookY: 0,
+    ox: 0,
+    pitch: 0,
+    yaw: 0
+  };
+  now = {
+    ...(this.all[0] ?? EMPTY_BEAT).cam
+  };
+  nowV = {
+    dolly: 0,
+    fx: 0,
+    fz: 0,
+    lookY: 0,
+    ox: 0,
+    pitch: 0,
+    yaw: 0
+  };
+  /** the world-layer plane's own fade, so a chapter's type breathes in */
+  skyOn = 0;
+  /**
+  * THE SKY WORD'S OPACITY AS ACTUALLY SENT — not the ramp above.
+  *
+  * `skyOn` only says a word is WANTED; what the word is actually wearing
+  * is that ramp times the beat's own in and out, and the out takes it to
+  * nothing by 68% of the beat. When the next beat had no word the film
+  * used to hand the picture `skyOn` to fade from — a number still sitting
+  * near 1 — so a word that had been gone for seconds snapped back to 92%
+  * on the frame after the cut and faded out a second time, across the
+  * seam. Fade from what the word is wearing instead.
+  */
+  skyA = 0;
+  /** the time of day the furniture is currently dressed for */
+  wearing = '';
+  /** the cast-shadow offset the type is currently wearing, px */
+  shadow = {
+    x: 0,
+    y: 0
+  };
+  pageEl;
+  /**
+  * WHERE THE CUT STARTS — the arrow keys' one piece of state.
+  *
+  * A film this long is unwatchable without chapter skip, and seeking a run
+  * that carries an integrator is not honest (the chaser's pose depends on
+  * its history, which is the price Drift's doctrine names out loud). So
+  * skipping RE-CUTS instead of seeking: the beat list is sliced here, the
+  * path and the cues are both derived from that list, and the score the
+  * region sees is a different, shorter film. An edited timeline replays
+  * from its own head, which is exactly the behaviour wanted — and it is
+  * the same move Sylva's lap makes to loop.
+  *
+  * `?from=N` seeds it, so a shot can be linked to.
+  */ /**
+     * The deep link's shot, as asked (`?from=N`). Clamped against the
+     * rows when READ, never when set: with the score a graph the rows
+     * arrive a frame after construction, and clamping here against zero
+     * rows once made every deep link −1.
+     */
+  static {
+    g(this.prototype, "fromRaw", [tracked], function () {
+      return (() => {
+        const q = new URLSearchParams(window.location.search).get('from');
+        const n = q ? Number(q) : 0;
+        return Number.isFinite(n) && n > 0 ? n : 0;
+      })();
+    });
+  }
+  #fromRaw = (i(this, "fromRaw"), void 0);
+  get from() {
+    return Math.min(this.fromRaw, Math.max(0, this.all.length - 1));
+  }
+  set from(index) {
+    this.fromRaw = index;
+  }
+  /** sound is off until asked for: nobody's first second should be音 */
+  static {
+    g(this.prototype, "sound", [tracked], function () {
+      return false;
+    });
+  }
+  #sound = (i(this, "sound"), void 0);
+  static {
+    g(this.prototype, "gate", [tracked], function () {
+      return false;
+    });
+  }
+  #gate = (i(this, "gate"), void 0);
+  /**
+  * THE GATE. This film is narrated, and narration behind a mute button
+  * is a film shown with the projector lamp off — so the front door asks.
+  * One held frame, one choice, and the choice IS the user gesture that
+  * autoplay policy wants anyway: the browser unlocks audio on the same
+  * click that starts the picture. Museums have worked this way forever.
+  *
+  * `?from` skips it (an authoring link wants the shot, not the lobby)
+  * and so does embedding.
+  */
+  static {
+    g(this.prototype, "ready", [tracked], function () {
+      return false;
+    });
+  }
+  #ready = (i(this, "ready"), void 0);
+  /** the scene is loaded and seated behind the gate — the door can open */
+  static {
+    g(this.prototype, "rolling", [tracked], function () {
+      return false;
+    });
+  }
+  #rolling = (i(this, "rolling"), void 0);
+  /**
+  * One pass BEHIND `booted`, on purpose. A region's first render
+  * collects no score, so anything standing in it on that pass — the
+  * first beat's type, a head photo — was never inserted and never
+  * animates. Content mounts on this flag instead, which flips a tick
+  * later: the same render that gives the score its first real pass
+  * hands the front layer a genuine insertion, and the opening beat's
+  * type is DELIVERED like every other beat's instead of being found
+  * already on the glass.
+  */
+  get beats() {
+    return this.from > 0 && !this.exact ? this.all.slice(this.from) : this.all;
+  }
+  /** the first beat of each chapter, in whole-film indices */
+  get chapterHeads() {
+    return chapterHeads(this.all);
+  }
+  /** where we are in the WHOLE film, not the current cut */
+  get absoluteIndex() {
+    return this.from + this.beatIndex;
+  }
+  get beat() {
+    return this.beats[this.beatIndex] ?? this.beats[0] ?? EMPTY_BEAT;
+  }
+  /**
+  * CAPTIONS. `?subs` seeds them on; CC toggles them.
+  *
+  * They are the narration, printed. That makes them two things at once
+  * and both are wanted: an accessibility track for anyone who cannot or
+  * would rather not hear the voice, and — before any voice exists — the
+  * only reliable way to find out that a line is two seconds too long for
+  * the shot it is sitting on.
+  */
+  static {
+    g(this.prototype, "subsOn", [tracked], function () {
+      return new URLSearchParams(window.location.search).has('subs');
+    });
+  }
+  #subsOn = (i(this, "subsOn"), void 0);
+  get subs() {
+    return this.subsOn;
+  }
+  cc = () => {
+    this.subsOn = !this.subsOn;
+  };
+  get grade() {
+    return this.beat.grade ?? this.chapter.grade ?? 'amber';
+  }
+  get chapter() {
+    return this.chapters[this.beat.ch] ?? this.chapters[0] ?? EMPTY_CHAPTER;
+  }
+  get embed() {
+    /* the demo page mounts the theater route in an iframe with ?embed —
+    Sylva's pattern: the gate, the transport and the dive stand down
+    and the film begins muted */
+    return (this.args.embed ?? false) || /[?&]embed\b/.test(window.location.search);
+  }
+  /** `?debug` puts the build stamp in the corner — see `@build` */
+  get debug() {
+    return /[?&]debug\b/.test(window.location.search);
+  }
+  get build() {
+    return this.args.build ?? '';
+  }
+  get srcdoc() {
+    return this.picture?.srcdoc;
+  }
+  get src() {
+    const src = this.picture?.src;
+    return src ? `${src}?host${AWAKE ? '&awake' : ''}` : '';
+  }
+  get photoSrc() {
+    return `${this.assets}${this.beat.photo?.src ?? ''}`;
+  }
+  /** a photograph that failed to load is no photograph — drop the plate */
+  lost = new Set();
+  static {
+    g(this.prototype, "lostStamp", [tracked], function () {
+      return 0;
+    });
+  }
+  #lostStamp = (i(this, "lostStamp"), void 0);
+  get hasPhoto() {
+    const p = this.beat.photo;
+    return !!p && this.lostStamp >= 0 && !this.lost.has(p.src);
+  }
+  missing = () => {
+    const p = this.beat.photo;
+    if (p) {
+      this.lost.add(p.src);
+      this.lostStamp += 1;
+    }
+  };
+  /** a fresh name per lap: an edited score replays, a restarted one fights */
+  get filmName() {
+    return `film-${this.lap}`;
+  }
+  /**
+  * HOW MUCH HAND, in seconds — see `@settle`.
+  *
+  * The default is a QUARTER OF THE GAP BETWEEN WAYPOINTS, because that
+  * is the only number that means the same thing to two different films.
+  * A window is smoothing relative to the spacing of the kinks it
+  * smooths: a quarter takes the curvature step off every pose change
+  * and is far too little to stop the lens visiting the poses. Both
+  * films that ship here spend two seconds a waypoint, so both get half
+  * a second; a score that cuts four times as fast gets a quarter of
+  * that without being asked, and half a second imposed on it would have
+  * flattened its shots.
+  *
+  * Capped at half a second so a very slow film does not drift, and
+  * floored at nothing: `@settle={{0}}` gives the raw spline.
+  */
+  get settle() {
+    const said = this.args.settle;
+    if (said !== undefined) {
+      return said;
+    }
+    const points = this.path.length;
+    return points > 0 ? Math.min(0.5, this.filmSeconds / points / 4) : 0;
+  }
+  /**
+  * The pose the score OPENS on, declared to the region — without it the
+  * first spline segment travels in from the library's default rig, a
+  * two-second bounce every cold boot wore before its first real frame.
+  */
+  get openPose() {
+    const c = (this.beats[0] ?? EMPTY_BEAT).cam;
+    return {
+      dolly: c.dolly,
+      look: {
+        x: c.fx ?? 0,
+        y: c.lookY,
+        z: c.fz ?? 0
+      },
+      pitch: c.pitch,
+      x: c.ox ?? 0,
+      y: 0,
+      yaw: c.yaw
+    };
+  }
+  get filmSeconds() {
+    return this.beats.reduce((n, b, i) => n + b.ticks + (i === 0 ? 0 : b.lead ?? 0), 0) * TICK;
+  }
+  /**
+  * THE WHOLE FILM IS ONE CAMERA STEP.
+  *
+  * Every beat contributes `ticks` waypoints: a moving beat is sampled from
+  * its head pose to its tail, a holding beat repeats its pose, and the
+  * spline runs through the lot on one clock. So the shot list is a path
+  * rather than a playlist, the camera crosses each mark with velocity
+  * instead of arriving at it, and a hold is genuinely still without
+  * anything having stopped.
+  */ /**
+     * WHERE A SHOT ENDS — the beat's authored tail, floored so it always
+     * reads as a move, and clamped so it never travels past the pose the
+     * next shot begins on. Shared by the path (which lerps its waypoints
+     * across it) and by the LAUNCH: a cut hands the chaser this shot's own
+     * speed, so the lens is already travelling when the cut lands rather
+     * than easing up from a standstill.
+     */
+  tailFor(bi) {
+    return tailFor(this.beats, bi);
+  }
+  get path() {
+    return waypoints(this.beats, this.from > 0);
+  }
+  /**
+  * Each beat's entrance, as a delay into the one camera step — offset
+  * one tick, because the pose-in-force seed occupies the spline's first
+  * slot: waypoint k is crossed at (k+1) slots, not k. The old uniform
+  * skew was invisible (camera and cues equally late, a constant the
+  * chaser's own lag swallowed); a SPLICE made it audible — the snap
+  * fired two seconds before the goal stepped, and the chaser spent the
+  * gap dragged back toward the old shot. Cue 0 stays at zero: the boot
+  * and every re-cut apply their head beat by hand, and its immediate
+  * re-fire has always been the first cue's job.
+  */
+  get cues() {
+    return cues(this.beats);
+  }
+  /**
+  * THE ATTACHMENTS: every window the score drives another region over.
+  * The plate for every beat, the insert for a beat with a photograph,
+  * the clip for a beat with one — each on the score's own clock, so a
+  * seek stands all of them where playing there would. The regions are
+  * keyed per beat and mounted for their windows; `remove` past a window
+  * leaves them to that; a clip may outlive its beat and holds.
+  */
+  get windows() {
+    const beats = this.beats;
+    const heads = cues(beats).filter(c => c.action === 'beat');
+    const total = totalSecs(beats);
+    const out = [];
+    heads.forEach((c, k) => {
+      const b = beats[k];
+      const start = c.delay;
+      const next = heads[k + 1]?.delay ?? total;
+      out.push({
+        end: 'remove',
+        length: next - start,
+        region: 'plate',
+        start
+      });
+      if (b.photo) {
+        out.push({
+          end: 'remove',
+          length: next - start,
+          region: 'insert',
+          start
+        });
+      }
+      b.clips?.forEach(c => {
+        out.push({
+          end: 'hold',
+          length: clipWindow(c, start, next),
+          region: 'clip',
+          start: start + (c.at ?? 0)
+        });
+      });
+    });
+    return out;
+  }
+  /**
+  * THE TRANSPORT — a broadcast bar, not a thermometer. One segment per
+  * chapter, sized by the chapter's actual running time, filled by
+  * WHOLE-film progress (the old bar measured the current cut, so a
+  * skip made it lie), and clickable: the segments are the same re-cut
+  * the menu and the arrows perform.
+  */ /**
+     * ONE TIMELINE, NOT TWO.
+     *
+     * The corner carried a strip of chapter segments beside a rule of years:
+     * two timelines of the same film, at two different scales, in two
+     * different shapes, six inches apart. So the chapters are ON the years
+     * now — each one a dot at the year it opens, so the gap between THE SITE
+     * and SILENCE is fifty-four years wide and the gap between the last two
+     * is a decade, which is the fact the film is about. The dots are still
+     * the doors into the chapters.
+     */
+  get transport() {
+    const here = this.absoluteIndex;
+    const clock = this.args.clock;
+    const total = this.totalSecs;
+    return this.contents.map(c => {
+      const b = this.all[c.head];
+      let at;
+      let label;
+      if (clock) {
+        /* a chapter is a dot at the year it opens, so the gap between two
+        chapters is the fact the film is about */
+        const y = clock.yearAt(Array.isArray(b.build) ? b.build[0] : b.build ?? 0);
+        const [a, z] = clock.span;
+        at = Math.max(0, Math.min(1, (y - a) / (z - a)));
+        label = String(Math.floor(y));
+      } else {
+        at = this.secsBefore(c.head) / total;
+      }
+      return {
+        at,
+        done: here >= c.head,
+        head: c.head,
+        here: c.here,
+        label,
+        n: c.n,
+        title: c.title
+      };
+    });
+  }
+  /** the ends of the rule, when it is a clock */
+  get railLabels() {
+    const span = this.args.clock?.span;
+    return span ? [String(span[0]), String(span[1])] : undefined;
+  }
+  /** the rail is on unless the film says otherwise */
+  get railOn() {
+    return this.args.rail ?? true;
+  }
+  get railReadout() {
+    return this.args.clock ? String(this.yearNow) : '';
+  }
+  /**
+  * WHEN EACH CUE LANDS — paced against the voice, not the clock.
+  *
+  * The phrases used to arrive on four fixed delays, which meant a
+  * fourteen-second beat finished its type with five seconds of dead air
+  * and a short one crowded the read. So the cues spread themselves: the
+  * first lands early, the last lands as the measured line is finishing
+  * (`VO_SECS`), and a beat with no recording paces against two thirds of
+  * its own length, which is where a read for it would sit anyway.
+  */ /**
+     * THE TRANSITION FIRST, THEN THE TYPE. A setting that arrives while the
+     * seam is still on screen is read against two pictures at once. The
+     * block waits for the incoming join to finish and a breath more, then
+     * enters in its order: kicker, glyph, reading — and the lines after.
+     */
+  get typeAt() {
+    /* A SEAM THAT COVERS THE FURNITURE NEEDS NO WAIT. The still is above
+    the type, so the setting may enter from the beat's first frame and
+    be under way — not starting — when the sweep reveals it. That is
+    the whole point of `everything`. */
+    if (this.overOf(this.beat) === 'everything') {
+      return [0, 0.12, 0.36];
+    }
+    /* otherwise the type waits for the SEAM to finish, and an unnamed
+    join is the default one — reading '' here meant every default cut
+    typed straight through its own transition */
+    const wait = this.secsOf(this.beat.join ?? this.defaultJoin) + 0.45;
+    return [wait, wait + 0.12, wait + 0.36];
+  }
+  get sayAt() {
+    const b = this.beat;
+    const n = b.says?.length ?? 0;
+    const dur = b.ticks * TICK;
+    const vo = this.voSecs[b.id];
+    const first = this.typeAt[2] + 0.3;
+    /* land the last cue on the line's last breath, never inside the
+    beat's own exit */
+    const last = Math.max(first + 0.8, Math.min(vo ? vo - 0.4 : dur * 0.66, dur - 1.4));
+    return [0, 1, 2, 3].map(i => n <= 1 ? first : first + Math.min(i, n - 1) * (last - first) / (n - 1));
+  }
+  /**
+  * Thai and Khmer are not kanji: their ascenders, vowel marks and
+  * subscripts stand far outside a CJK-tuned glyph box, so at the kanji
+  * size they collide with the kicker above and the reading below. Tall
+  * scripts take a reduced setting with real leading.
+  */ /**
+     * HOW MANY CHARACTERS HAVE TO FIT. A vertical setting is as tall as
+     * its string, and 一国一城令 is five glyphs — at the plate's own size
+     * that column runs off the top of the frame and the film crops its
+     * own title. The count goes to CSS, which sizes the column to the
+     * height available rather than to a number somebody typed once while
+     * looking at a three-glyph word.
+     */
+  get glyphFit() {
+    return `--cf-glyphs:${Math.max(2, [...(this.beat.kanji ?? '')].length)}`;
+  }
+  get glyphTone() {
+    const k = this.beat.kanji ?? '';
+    if (/[A-Za-zÀ-ÿ]/.test(k)) {
+      return 'is-latin';
+    }
+    return /[฀-๿ក-៿]/.test(k) ? 'is-tall' : '';
+  }
+  /** the lineup's current kanji; empty between lineups */
+  get stamp() {
+    const c = this.beat.cycle;
+    return c && this.cycleStep >= 0 ? c[this.cycleStep]?.kanji ?? '' : '';
+  }
+  /**
+  * THE POSTER IS AN EVENING (by default). The film proper opens in the
+  * morning, so the door stands in the last of the light with a long hard
+  * shadow across the empty half of the frame; pressing it turns the day
+  * over. The film may dress its door otherwise (`@poster`).
+  */
+  dressPoster(film) {
+    const p = this.picture?.poster ?? {};
+    film.theme(p.theme ?? 2, true);
+    const l = p.light ?? {
+      az: -105,
+      el: 21
+    };
+    film.light({
+      az: l.az * RAD,
+      el: l.el * RAD
+    });
+  }
+  announced = false;
+  mount = modifier(el => {
+    /* the rows are a tracked read on purpose: a film whose score is a
+    graph has none on its first pass, and this modifier re-installs
+    — and re-runs the load path below — when they arrive */
+    const rows = this.all.length;
+    /* which cut is actually in the browser, said out loud once */
+    if (!this.announced) {
+      this.announced = true;
+      console.info(`film ${this.args.name}: ${this.args.build ?? ''}`);
+    }
+    this.frameEl = el;
+    this.pageEl = el.closest('.cf-page');
+    window.addEventListener('keydown', this.key);
+    window.addEventListener('pointermove', this.aim);
+    window.addEventListener('pointermove', this.wake);
+    window.addEventListener('wheel', this.wake, {
+      passive: true
+    });
+    document.addEventListener('fullscreenchange', this.fullChange);
+    /* NOT this.wake() — a modifier runs INSIDE the render pass, and
+    `idle` is read by the template in that same computation; writing
+    it here is a backtracking rerender, which Ember asserts on and
+    which takes the whole pass (and the film) down with it. The timer
+    is armed from a timeout instead, which is outside it. */
+    window.setTimeout(() => {
+      if (this.booted) {
+        this.wake();
+      }
+    }, 0);
+    window.addEventListener('error', this.trip);
+    window.addEventListener('unhandledrejection', this.trip);
+    const frame = el.querySelector('iframe');
+    if (!frame) {
+      return;
+    }
+    /* a film owns the whole frame: the app's bar and footer step out
+    entirely rather than fading, because unlike Sylva's theater there
+    is no lockup here that wants to stay superimposed */
+    document.body.classList.add(this.embed ? 'cf-embedded' : 'cf-film');
+    /**
+    * THE FILM, REACHABLE FROM OUTSIDE THE PAGE.
+    *
+    * An exact film is a pure function of one number, which is the whole
+    * claim of `@seek='exact'` — so it should be possible to stand it at
+    * a time from a script and read the frame back, rather than recording
+    * it in real time and hoping. `renderAt` has always existed on the
+    * handle; it was simply not reachable by anything that is not a
+    * template. Published under the film's own name so a page may hold
+    * more than one.
+    */
+    const reg = window.__choreo ??= {};
+    reg[this.args.name] = {
+      exact: this.exact,
+      renderAt: this.renderAt,
+      runtime: () => this.runtime,
+      seconds: () => this.totalSecs,
+      seek: this.seek
+    };
+    /* only ever gate a film that has not begun: a dev-mode template swap
+    re-runs this modifier on the SAME instance, and resurrecting the
+    door over a running film left its buttons answering to a guard
+    that told them the film had already started — because it had */ /* AND AN EMBED IS GATED TOO. It used to start itself, on the
+                                                                    grounds that a frame with no transport has no way to turn the
+                                                                    sound on — but that is exactly backwards: a film that starts
+                                                                    without being asked has spent no user gesture, and every browser
+                                                                    withholds audio until one is spent. So the door goes up inside
+                                                                    the frame as well, and the click that opens it is the gesture the
+                                                                    audio graph has been waiting for. A deep link (`?from`) still
+                                                                    skips it: that link asked for a shot, not for the lobby. */
+    this.gate = this.from === 0 && !this.booted;
+    const onLoad = () => {
+      const w = frame.contentWindow;
+      if (!w?.__film) {
+        return;
+      }
+      /* no rows yet: the graph compiles a frame after render, and the
+      boot below stands the picture on the FIRST shot — wait for it */
+      if (!rows && !this.all.length) {
+        return;
+      }
+      this.film = w.__film;
+      this.takeGlass(this.film);
+      this.film.volume?.(this.vol);
+      /* a RUNNING film needs nothing from the door. This path re-fires
+      whenever the modifier re-installs (it reads tracked state), and
+      re-seating here yanked the lens back to the cut's head. */
+      if (this.booted) {
+        return;
+      }
+      try {
+        /* the page opens on an empty site — its own clock is at zero —
+        and most of this film is about a finished building. Standing it
+        up before the first beat runs means a beat only ever has to say
+        what it CHANGES, which is also what makes `?from` land on a
+        real shot rather than on a field. */
+        w.__film.time(this.standing);
+        /* whatever the picture needs told once — the plan off, the city
+        on — is the film's own */
+        this.picture?.seat?.(w.__film);
+        /* THE POSTER IS AN EVENING. The film proper opens in the morning
+        — so the door stands in the last of the light, and pressing it
+        turns the day over: the sky crossfades to nine o'clock while
+        the lens flies out of the poster's circuit. Two things the
+        viewer did not ask for, both answering the same click. */
+        this.dressPoster(w.__film);
+        /* seat the lens where the film opens, so the first frame is the
+        shot and not a swing towards it */
+        this.snap((this.beats[0] ?? EMPTY_BEAT).cam);
+      } finally {
+        /* the door unlocks NO MATTER WHAT the seating did: a gate whose
+        buttons can be stranded disabled by a throw above is a locked
+        theatre with the lights on */
+        this.ready = true;
+      }
+      if (this.gate) {
+        /* a click that arrived while the scene was still loading was a
+        decision, not a miss — honour it now */
+        if (this.wanted !== undefined) {
+          this.begin(this.wanted);
+          return;
+        }
+        this.posterAt = 0;
+        this.posterRaf ??= requestAnimationFrame(this.poster);
+        return;
+      }
+      /* IDEMPOTENT, or nothing. This load path re-runs whenever the
+      modifier does (a booted flip re-renders the stage), and an
+      unconditional begin(false) here reached the already-booted
+      branch and TOGGLED THE SOUND BACK OFF — the "with sound" click
+      un-clicking itself one pass later. Only a film that has not
+      begun may be begun on its behalf. */ /**
+                                           * ONLY A DEEP LINK STARTS ITSELF. A door that opens on a fast (or
+                                           * cached) load is a film that started without being asked — which
+                                           * is how the poster's own circuit once got two seconds and then
+                                           * vanished.
+                                           */ /* ...and only a DEEP LINK starts itself now. `?from` named a shot,
+                                              so the film goes there; it plays muted until something asks
+                                              otherwise, because nothing has been clicked. Everything else —
+                                              the theater route and every embed — waits behind its door for
+                                              the click that buys the sound. */
+      if (!this.booted && this.from > 0) {
+        this.begin(true);
+      }
+    };
+    frame.addEventListener('load', onLoad);
+    /* a cached iframe can be complete before the listener is attached —
+    but never boot from inside the mount modifier itself: this runs
+    during the render pass, and a `booted` flipped here renders the
+    score region in the SAME pass, where the rig is not an insertion
+    and the whole run resolves to nothing. A timeout puts the flip in
+    its own pass, which is what the load event gives the slow path. */
+    let bootTimer = 0;
+    if (frame.contentDocument?.readyState === 'complete') {
+      bootTimer = window.setTimeout(onLoad, 0);
+    }
+    /**
+    * THE LOOP COMES BACK. This modifier reads tracked state (`from`,
+    * `booted`), so it re-installs on every re-cut and on the boot
+    * itself — and its own cleanup below cancels the frame loop each
+    * time. The old code got away with it because the load path
+    * re-booted the world wholesale; now that a running film is left
+    * alone, the re-install has to hand back the one thing it took.
+    */
+    if (this.booted) {
+      /* the cleanup nulled the bridge as well; take it straight back
+      rather than waiting a tick for the load path */
+      const w = frame.contentWindow;
+      if (w?.__film) {
+        this.film = w.__film;
+        this.takeGlass(this.film);
+        this.film.volume?.(this.vol);
+      }
+      cancelAnimationFrame(this.raf);
+      this.lastTick = performance.now();
+      this.raf = requestAnimationFrame(this.frame);
+    }
+    return () => {
+      cancelAnimationFrame(this.raf);
+      window.clearTimeout(bootTimer);
+      window.removeEventListener('keydown', this.key);
+      window.removeEventListener('error', this.trip);
+      window.removeEventListener('unhandledrejection', this.trip);
+      window.removeEventListener('pointermove', this.aim);
+      window.removeEventListener('pointermove', this.wake);
+      window.removeEventListener('wheel', this.wake);
+      document.removeEventListener('fullscreenchange', this.fullChange);
+      window.clearTimeout(this.idleTimer);
+      frame.removeEventListener('load', onLoad);
+      document.body.classList.remove('cf-film', 'cf-embedded');
+      delete window.__choreo?.[this.args.name];
+      this.film = undefined;
+      this.takeGlass(undefined);
+    };
+  });
+  trackEls = modifier(el => {
+    this.lineEl = el.querySelector('line.cf-leader');
+    this.tetherEl = el.querySelector('line.cf-tether');
+    this.dotEl = el.querySelector('circle');
+  });
+  dimEl = modifier(el => {
+    this.dim = el;
+    return () => {
+      if (this.dim === el) {
+        this.dim = undefined;
+      }
+    };
+  });
+  plate = modifier(el => {
+    this.plateEl = el;
+    /* the rows, nearest plane last — the big glyph is the near one */
+    this.rowEls = [...el.children];
+    return () => {
+      if (this.plateEl === el) {
+        this.plateEl = undefined;
+        this.rowEls = [];
+      }
+    };
+  });
+  snap(c, launch, secs) {
+    this.goal = {
+      ...c
+    };
+    this.mid = {
+      ...c
+    };
+    this.now = {
+      ...c
+    };
+    /**
+    * A CUT LANDS ON A MOVING CAMERA.
+    *
+    * Snapping used to zero the chaser's velocity, so every cut arrived
+    * at a standstill and eased up into its move — the one thing a cut
+    * must never do, because the ease-in is the join announcing itself.
+    * An operator does not stop between shots; the next shot is already
+    * running when the frame changes. So the chaser is handed the
+    * incoming shot's OWN speed (its whole travel over its whole
+    * length) and starts at pace.
+    */
+    for (const k of ['dolly', 'fx', 'fz', 'lookY', 'ox', 'pitch', 'yaw']) {
+      const a = c[k] ?? 0;
+      const b = launch ? launch[k] ?? 0 : a;
+      /**
+      * AND IT IS A NUDGE, NOT A LAUNCH.
+      *
+      * The chaser is handed the incoming shot's own speed so the cut
+      * lands on a moving camera rather than a standstill. But the spring
+      * is pulling toward the shot's HEAD while that speed points at its
+      * TAIL, so the whole of it has to be absorbed and given back — and
+      * once the stiffness came down to 3.9 there was not enough spring
+      * left to absorb it: the lens ran past its own opening frame and
+      * came back, which is the bounce at every cut. Roughly half the
+      * speed still reads as an operator already moving, and the return
+      * is inside the first breath of the shot instead of on top of it.
+      */ /* BOTH stages of the cascade get the shot's own speed. Handing it
+         only to the first one left the second accelerating from rest,
+         which reads as a short ease-in at every cut — and reads worst
+         where the new shot orbits the OTHER WAY, because the lens
+         appears to hesitate before changing its mind. */
+      this.midV[k] = secs ? (b - a) / secs * 0.45 : 0;
+      this.nowV[k] = this.midV[k];
+    }
+    this.sent = undefined;
+    this.film?.pose({
+      az: c.yaw * RAD,
+      el: c.pitch * RAD,
+      fx: c.fx ?? 0,
+      fz: c.fz ?? 0,
+      lookY: c.lookY,
+      ox: c.ox ?? 0,
+      snap: true,
+      zoom: c.dolly
+    });
+  }
+  /**
+  * THE WHIP. A 'whip' join does not snap: the goal steps across the
+  * seam (the splice does that) and the chaser races it on a briefly
+  * stiff spring — a fast, smooth tween between the shots that is over
+  * in a third of a second and never reads as a glide. While it runs,
+  * the spring is ~3× its documentary stiffness; then the hand relaxes.
+  */
+  whipUntil = 0;
+  /**
+  * One critically-damped stage. The page's own chase is the second, which
+  * is the whole cascade argument getting made for free by the fact that the
+  * scene lives in another document.
+  */
+  chase(dt) {
+    /* softer than it was: the lens is an operator's hand, not a servo.
+    Lower stiffness filters the spline's residual sway before the
+    page's own chase filters it again — except mid-whip, when the
+    hand is deliberately fast (see whipUntil). */ /* SLOWER. At 5.2 the chaser was arriving at its pose about a third of
+                                                  the way into the beat and then holding, which reads as a film that
+                                                  hurries to its composition and waits — the opposite of a building
+                                                  that took a century. At 3.9 the move is still arriving as the last
+                                                  cue lands, so every shot is travelling for as long as it is on. */
+    const w = this.whipUntil > performance.now() ? 11 : 3.9;
+    for (const k of ['dolly', 'fx', 'fz', 'lookY', 'ox', 'pitch', 'yaw']) {
+      const g = this.goal[k] ?? 0;
+      const m = this.mid[k] ?? 0;
+      const v = this.midV[k] + (w * w * (g - m) - 2 * w * this.midV[k]) * dt;
+      this.midV[k] = v;
+      const next = m + v * dt;
+      this.mid[k] = next;
+      this.now[k] = next;
+    }
+  }
+  /**
+  * THE POSTER TURNS.
+  *
+  * A still frame behind a title is indistinguishable from a JPEG, and
+  * this whole film's argument is that it is not one. So while the door
+  * is up the lens makes a slow circuit of the opening pose — a few
+  * degrees either side, breathing in and out — which says "live 3D"
+  * before a word is read and costs one rAF. It hands over on the
+  * click: the film does not snap away from the poster, it flies from
+  * wherever the circuit had reached.
+  */
+  poster = stamp => {
+    if (!this.gate || this.booted) {
+      this.posterRaf = undefined;
+      return;
+    }
+    this.posterRaf = requestAnimationFrame(this.poster);
+    const film = this.film;
+    if (!film) {
+      return;
+    }
+    if (!this.posterAt) {
+      this.posterAt = stamp;
+    }
+    const t = (stamp - this.posterAt) / 1000;
+    const c = (this.beats[0] ?? EMPTY_BEAT).cam;
+    /* THREE-QUARTERS ON, and swinging. Dead in front of a building is
+    an elevation drawing; the corner is where a tower shows you that
+    it has depth — two faces, two eave lines, and a shadow that
+    reads. The swing is slow and even, side to side, so the frame is
+    never still and never travelling anywhere either. */ /* THE POSTER IS CLOSE. The film's opening frame is as wide as the
+                                                         lens goes, which is right for a first shot and wrong for a
+                                                         poster: the door should show the building at a size worth
+                                                         pressing play for, and the press then RECOILS — a fast pull back
+                                                         out to the wide opening frame, from which the film's own slow
+                                                         push begins. */
+    const pose = {
+      dolly: c.dolly * (2.25 + 0.09 * Math.sin(t * 0.11 + 1.1)),
+      lookY: c.lookY + 1.4 + 0.6 * Math.sin(t * 0.15),
+      /* the two halves of the poster lean back toward the middle: the
+      building comes in off the left edge, the wordmark off the right,
+      and the gap between them is the composition */
+      ox: (c.ox ?? 0) * 0.66,
+      pitch: c.pitch + 2.4 + 1.4 * Math.sin(t * 0.13),
+      yaw: c.yaw + 34 + 11 * Math.sin(t * 0.2)
+    };
+    film.pose({
+      az: pose.yaw * RAD,
+      el: pose.pitch * RAD,
+      fx: c.fx ?? 0,
+      fz: c.fz ?? 0,
+      lookY: pose.lookY,
+      ox: pose.ox,
+      zoom: pose.dolly
+    });
+    this.posterPose = pose;
+  };
+  posterRaf;
+  posterAt = 0;
+  /** where the poster's circuit had reached when the door was answered */
+  posterPose;
+  /**
+  * ONE SETTING AT A TIME, AND THIS TIME IT IS GUARANTEED.
+  *
+  * The hand-off is a leaver and an arriver sharing the corner for half
+  * a second, which is the design. But a leaver whose exit never
+  * completes just stays — and a block from the first beat was still
+  * standing at full strength eight beats later, with two settings of
+  * different chapters overprinting each other. Whatever strands it (a
+  * removal that waits on a cue the outgoing beat never had), the rule
+  * the film states out loud in its own comment is worth enforcing
+  * rather than trusting: any block that is not the current one and has
+  * outstayed the longest hand-off is taken off the glass.
+  */
+  sweepBlocks(now) {
+    /* the type layer is a sibling of the frame, not a child of it — the
+    first version of this looked for it inside the wrong element and
+    swept nothing, which is how three chapters' settings came to be on
+    screen at once */
+    const root = this.pageEl ?? this.frameEl ?? document.body;
+    const blocks = root.querySelectorAll('.cf-type .cf-block');
+    if (blocks.length < 2) {
+      return;
+    }
+    for (let i = 0; i < blocks.length - 1; i++) {
+      const el = blocks[i];
+      const seen = Number(el.dataset['cfSeen'] ?? 0);
+      /* two is a hand-off and gets its half second; three is a leak, and
+      everything but the newest goes now */
+      if (blocks.length > 2 || seen && now - seen > 900) {
+        el.remove();
+      } else if (!seen) {
+        el.dataset['cfSeen'] = String(now);
+      }
+    }
+  }
+  frame = stamp => {
+    this.raf = requestAnimationFrame(this.frame);
+    this.tick(stamp);
+  };
+  tick(stamp) {
+    this.sweepBlocks(stamp);
+    const film = this.film;
+    if (!film) {
+      return;
+    }
+    /* A HIDDEN TAB DOES NO WORK. And once the end card is up nothing under
+    it will change again: the page is told so and stops drawing the
+    finished building into a frame nobody composites. */
+    if (document.hidden && !AWAKE) {
+      return;
+    }
+    if (this.ended) {
+      if (!this.idled) {
+        film.idle(true);
+        this.idled = true;
+      }
+      return;
+    }
+    if (this.idled) {
+      film.idle(false);
+      this.idled = false;
+    }
+    /* held by the viewer: nothing advances, nothing is written. An exact
+    film keeps deriving — its clock is the only thing that stops — so
+    a scrub under a hold still draws the frame under the hand. */
+    if (this.paused && !this.exact) {
+      this.lastTick = stamp;
+      return;
+    }
+    const dt = Math.min(0.08, this.lastTick ? (stamp - this.lastTick) / 1000 : 0);
+    this.lastTick = stamp;
+    /* THE CLOCK. An exact film advances one number and derives the rest;
+    a cut film reads the wall and the beat it was last handed. */
+    const jumpedNow = this.jumped;
+    if (this.exact) {
+      if (this.playing && this.rolling && !this.paused) {
+        this.t = Math.min(this.totalSecs, this.t + dt);
+      }
+      this.fold();
+      if (this.ended) {
+        return;
+      }
+    }
+    const since = this.exact ? this.t - this.beatStart(this.absoluteIndex) : (stamp - this.beatAt) / 1000;
+    /* the seam, both halves, from one progress — before the pose, so a
+    frame never carries a lens that has moved past a seam that has not */
+    this.driveSeam(film, this.t);
+    if (this.exact) {
+      /* no integrator in the pose path: the lens IS the spline */this.now = {
+        ...this.goal
+      };
+    } else {
+      this.chase(dt);
+    }
+    /* a chaser lands on a millionth of a pixel rather than on zero, and an
+    off-centre frustum that is never quite centred keeps the projection
+    matrix rebuilt every frame for nothing — so zero means zero */
+    const k = Math.min(1, dt * 1.8);
+    this.lean.x += (this.leanTo.x - this.lean.x) * k;
+    this.lean.y += (this.leanTo.y - this.lean.y) * k;
+    /**
+    * EVERY SHOT IS FLOWN. The sway started as a comparison-chapter
+    * idea and belongs to the whole film: a camera that holds perfectly
+    * still is a render, and a degree of drift costs nothing and says
+    * "somebody is holding this" in every shot.
+    *
+    * It is divided by the lens, though. A degree of tilt at a 4x
+    * close-up throws the frame around; the same degree on a wide is a
+    * breath. So the amplitude is scaled down as the shot gets tighter
+    * and a beat can still ask for more of it (the drone chapter does).
+    */
+    const air = (this.beat.bob ?? 0.5) / Math.max(0.8, Math.min(3, this.now.dolly));
+    const flown = Math.min(1, Math.max(0, since / (this.beat.ticks * TICK)));
+    /* ONE breath across the shot, faded in and out at the ends so the
+    sway never starts or stops abruptly. Three half-cycles of it (the
+    first attempt) is not a drone in the air, it is a hand shaking —
+    and on top of a move that is already covering ground it reads as
+    the whole shot being unsteady. */
+    const bob = air * Math.sin(flown * Math.PI * 1.6) * smooth(Math.min(1, flown / 0.18)) * smooth(Math.min(1, (1 - flown) / 0.18));
+    /* the aim, when the shot asks to stay on the subject (Beat.hold):
+    the MIDDLE of whatever is standing, in the rig's own coordinates
+    — half the built height, so a crane can go anywhere and the
+    building stays centred on the way */ /* a held shot on the whole building aims at half of what stands; a
+                                         held shot on a POINT (a finial, a cross) keeps the aim it was given */
+    const rise = this.followRise(film, dt);
+    const lookY = rise ? rise.lookY : this.beat.hold === 'top' ? /* the cut line, kept a little above centre, never under the ground */Math.max(1.4, film.height() * 0.62) - this.rigMid : this.beat.hold && !this.beat.to ? film.height() * 0.5 - this.rigMid : this.now.lookY;
+    const ox = Math.abs(this.now.ox ?? 0) < 1e-4 ? 0 : this.now.ox;
+    /**
+    * ONE LAST FILTER BEFORE THE GLASS.
+    *
+    * Everything upstream is smooth on its own — a spline, a spring,
+    * the scene's own chase — but they are SUMMED here, along with the
+    * bob and the pointer's lean, and a sum of smooth things is only as
+    * smooth as its roughest term. A short one-pole on the pose that
+    * actually ships takes the last of it out.
+    *
+    * It must never soften a CUT, though: a filter that carries sixty
+    * milliseconds of the outgoing shot into the incoming one turns
+    * every edit into a tiny dissolve. The snap clears it, so the first
+    * frame of a new building is exactly the new building.
+    */ /**
+       * THE HAND ON THE STICKS.
+       *
+       * Three sines at unrelated rates, summed and scaled by the lens:
+       * about a sixth of a degree of wander on a wide shot and a fraction
+       * of that on a close-up, plus a breath of it in the zoom. It is
+       * deterministic (no RNG, so no frame ever jumps), continuous (no
+       * discontinuity to catch the eye), and slower than a shake — this
+       * is the drift of somebody holding a machine steady, not a handheld
+       * effect. Turn it off by setting HAND to 0.
+       */ /* on the film's clock when the film is exact, so the breath is the
+          same breath at the same frame every time */
+    const clock = this.exact ? this.t : stamp / 1000;
+    const wander = (a, b, c) => Math.sin(clock * a) * 0.6 + Math.sin(clock * b) * 0.3 + Math.sin(clock * c) * 0.1;
+    const HAND = 0.17;
+    const hand = HAND / Math.max(0.8, Math.min(3.4, this.now.dolly));
+    const want = {
+      /* the lens leans into the cursor: a couple of degrees of orbit and
+      a hand's width of height, which is enough for the hills to move
+      against the building and nowhere near enough to fight the shot */ /* MOSTLY TILT. A machine in the air holds its heading far better
+                                                                        than it holds its nose: yaw is what the operator is steering and
+                                                                        pitch is what the wind is doing to it. So the wander is nearly
+                                                                        all in the tilt, with a quarter of it in the orbit to keep the
+                                                                        two from looking mechanically separate. */
+      az: (this.now.yaw + this.lean.x * 0.8 + hand * 0.25 * wander(0.37, 0.93, 2.11)) * RAD,
+      el: (this.now.pitch - this.lean.y * 0.5 + bob + hand * 1.2 * wander(0.29, 1.07, 1.83)) * RAD,
+      fx: this.now.fx ?? 0,
+      fz: this.now.fz ?? 0,
+      lookY: lookY + this.lean.y * 0.3 + (this.beat.hold ? 0 : bob * 0.3),
+      ox: ox - this.lean.x * 0.012,
+      zoom: Math.min(this.now.dolly, rise?.zoom ?? Infinity) * (1 + 0.0011 * wander(0.23, 0.71, 1.51))
+    };
+    /* and the send is filtered a little harder, so nothing the spring
+    does arrives at the page as a step */
+    const g = Math.min(1, dt * 12);
+    const sent = this.exact ? {
+      ...want
+    } : this.sent ?? {
+      ...want
+    };
+    if (!this.exact) {
+      sent.az += (want.az - sent.az) * g;
+      sent.el += (want.el - sent.el) * g;
+      sent.fx += (want.fx - sent.fx) * g;
+      sent.fz += (want.fz - sent.fz) * g;
+      sent.lookY += (want.lookY - sent.lookY) * g;
+      sent.ox += (want.ox - sent.ox) * g;
+      sent.zoom += (want.zoom - sent.zoom) * g;
+    }
+    this.sent = sent;
+    const eye = this.beat.eye;
+    /* the two halves of a ground shot (Beat.lift): the feet finish before
+    the head starts, with a beat of stillness between them */
+    const lift = Math.max(0, Math.min(0.9, this.beat.lift ?? 0));
+    const walk = eye?.to ? smooth(lift > 0 ? Math.min(1, flown / lift) : flown) : 0;
+    if (lift > 0 && this.beat.toCam) {
+      const from = this.beat.cam;
+      const to = this.beat.toCam;
+      const tilt = smooth(Math.max(0, Math.min(1, (flown - lift) / Math.max(0.1, 1 - lift))));
+      /* the aim is driven straight from the beat on a lifted shot: the
+      spring is the wrong instrument for a head that has to hold still
+      and then move, and these shots never dolly while they tilt */
+      sent.lookY = lerp(from.lookY ?? 0, to.lookY ?? 0, tilt) + bob * 0.3;
+      sent.el = lerp(from.pitch, to.pitch, tilt) * RAD + bob * 0.5 * RAD;
+    }
+    film.pose({
+      ...sent,
+      /* and the page's own chase is stood down too: two integrators is
+      two histories, and an exact film has none */
+      snap: this.exact ? true : undefined,
+      fov: eye ? eye.fov : null,
+      near: eye ? [lerp(eye.at[0], (eye.to ?? eye.at)[0], walk), lerp(eye.at[1], (eye.to ?? eye.at)[1], walk), lerp(eye.at[2], (eye.to ?? eye.at)[2], walk)] : null
+    });
+    /* the mood and the sun's rake go to the glass only when they change:
+    the page eases between them itself, so this is a target, not a frame */
+    const mood = this.grade;
+    const snap = this.gradeSnap;
+    if (mood !== this.gradeSent || this.rakeDeg !== this.rakeSent) {
+      const spec = this.grades[mood] ?? this.grades['amber'];
+      film.grade({
+        ...spec,
+        rake: this.rakeDeg * RAD
+      }, snap);
+      this.gradeSnap = false;
+      this.gradeSent = mood;
+      this.rakeSent = this.rakeDeg;
+    }
+    /* the stock rides beside the mood: a name the page bakes, or a .cube
+    under `assets/luts/`, crossfaded in the glass */
+    const b = this.beat;
+    /* a film that names no stock gets none: the grade alone is a look */
+    const chapLut = this.chapters[b.ch ?? 0]?.lut ?? null;
+    const lutName = b.lut === null ? null : b.lut ?? b.look ?? chapLut;
+    if (lutName !== this.lutSent && film.lut) {
+      const fx = this.lookFx[lutName ?? ''];
+      film.lut(lutName === null ? null : lutName.includes('.') ? {
+        amount: this.lutAmount,
+        url: `${this.assets}luts/${lutName}`
+      } : {
+        ...(fx ?? {
+          amount: this.lutAmount
+        }),
+        look: lutName
+      }, snap);
+      this.lutSent = lutName;
+    }
+    /* walk the key light to the shot's own sun — the short way round,
+    over about a second and a half */
+    const goal = this.sunGoal;
+    if (this.exact) {
+      /* the walk is a function of the beat's clock: from where the last
+      beat left the light to where this one asks, over a second and a
+      half, the short way round */
+      if (goal) {
+        const from = this.sunFrom ?? goal;
+        const k = smooth(Math.min(1, since / 1.5));
+        this.sunNow = {
+          az: from.az + wrapAngle(goal.az - from.az) * k,
+          el: lerp(from.el, goal.el, k)
+        };
+        film.light(this.sunNow);
+      }
+    } else if (goal && this.sunNow) {
+      /**
+      * AT A RATE, not on a time constant. An eased approach takes the
+      * same second and a half whether the sun moves two degrees or
+      * fifty-five — and fifty-five degrees in a second and a half is
+      * the jarring relight between the construction chapter (near
+      * overhead) and the detail chapter (raking). Capping the angular
+      * speed makes a small change quick and a big one a proper move,
+      * which the chapter's own flight has time for.
+      */
+      const cap = 0.3 * dt;
+      const ease = Math.min(1, dt * 1.6);
+      const walk = (from, to) => {
+        const d = (to - from) * ease;
+        return from + (Math.abs(d) > cap ? Math.sign(d) * cap : d);
+      };
+      let d = goal.az - this.sunNow.az;
+      while (d > Math.PI) {
+        d -= Math.PI * 2;
+      }
+      while (d < -Math.PI) {
+        d += Math.PI * 2;
+      }
+      this.sunNow.az = walk(this.sunNow.az, this.sunNow.az + d);
+      this.sunNow.el = walk(this.sunNow.el, goal.el);
+      film.light(this.sunNow);
+    }
+    this.pageEl?.style.setProperty('--cf-lx', this.lean.x.toFixed(3));
+    this.pageEl?.style.setProperty('--cf-ly', this.lean.y.toFixed(3));
+    /* THE PLAYHEAD, as a custom property rather than tracked state: it
+    changes sixty times a second and nothing about the template's
+    shape changes with it, so it must never cause a re-render. */
+    const at = this.exact ? this.t : this.secsBefore(this.absoluteIndex) + Math.min(this.beat.ticks * TICK, since);
+    const total = this.totalSecs;
+    const prog = this.scrubAt ?? Math.min(1, at / total);
+    this.pageEl?.style.setProperty('--cf-prog', prog.toFixed(5));
+    /* the rail's head rides the film's own clock when it has one, and
+    the playhead when it does not */
+    if (!this.args.clock) {
+      this.pageEl?.style.setProperty('--cf-head', prog.toFixed(5));
+    }
+    if (this.trackW > 0) {
+      this.pageEl?.style.setProperty('--cf-hpx', this.headPx(prog).toFixed(1));
+    }
+    const pct = Math.round(prog * 100);
+    if (pct !== this.shownPct) {
+      this.shownPct = pct;
+      this.scrubEl?.setAttribute('aria-valuenow', String(pct));
+    }
+    const sec = Math.floor(at);
+    if (sec !== this.shownSec) {
+      this.shownSec = sec;
+      this.clock = Film.mmss(at);
+    }
+    this.clips(film, at, jumpedNow);
+    const beat = this.beat;
+    /**
+    * The beat's own local clock. It is re-based at every beat entrance, so
+    * whatever it drifts is bounded by one beat rather than by the film —
+    * the same seek-unsafe-but-self-correcting bargain the chaser makes,
+    * and for the same reason: these are simulations, not tweens.
+    */
+    const local = Math.min(1, since / (beat.ticks * TICK));
+    /* only while the film is rolling: an ended or gated film must not keep
+    driving the last beat's clock, or a restart finds the tower still
+    down behind the door */
+    if (Array.isArray(beat.build) && this.rolling) {
+      /* a settle: the shot is seen standing before the first stone moves */const settle = beat.settle ?? 0;
+      const span0 = beat.ticks * TICK;
+      const bl = Math.max(0, Math.min(1, (since - settle) / Math.max(0.01, span0 - settle)));
+      const t = lerp(beat.build[0], beat.build[1], smooth(Math.min(1, bl / (beat.buildBy ?? 1))));
+      film.time(t);
+      this.showYear(t);
+    } else if (beat.build !== undefined) {
+      this.showYear(Array.isArray(beat.build) ? beat.build[0] : beat.build);
+    }
+    /**
+    * The corner empties half a second before the beat changes — and
+    * "changes" means the next CUE, not the end of this beat's own
+    * ticks. A beat followed by a chapter flight is on screen for its
+    * own length PLUS that flight's lead, and measuring against the
+    * short number faded the type out early and then held it at zero
+    * for the rest of the shot.
+    */
+    const nextLead = this.all[this.absoluteIndex + 1]?.lead ?? 0;
+    const span = (beat.ticks + nextLead) * TICK;
+    const left = Math.max(0, span - since);
+    const last = !this.all[this.absoluteIndex + 1];
+    /* THE TYPE LEAVES BEFORE THE CUT AND DOES NOT COME BACK. The fade is
+    written on the block itself, not only on the container: a container
+    that snaps back to 1 for the next beat while the old block is still
+    standing inside it as a leaver is the flash — the old setting at
+    full strength for the length of its exit. With the block at 0 on
+    its own inline style, the leaver has nothing to come back to. */ /* and it does not ARRIVE until the seam is over: the entrance tweens
+                                                                     apply their from-values when they start, not when the pass starts,
+                                                                     so for the length of the wait the block would stand at full
+                                                                     strength over the transition. The block itself is held at 0 until
+                                                                     the wait is up and rises over the next 0.4 s, under the tweens. */
+    const wait = this.typeAt[0] - 0.05;
+    const enter = smooth(Math.max(0, Math.min(1, (since - wait) / 0.4)));
+    /* THE LAST BEAT'S TYPE LEAVES BEFORE THE CARD. Its cue landed a slot
+    after its nominal start (the spline-seed offset every cue but the
+    first carries), so measured on its own clock the beat has a tick
+    left when the run's last cue ends the film — and the type was
+    standing at full strength when the scrim came. Measure to the
+    ending instead: gone half a second before it, over two seconds. */
+    const endOff = !this.exact && this.beatIndex === 0 ? 0 : TICK;
+    const tailA = this.ended ? 0 : last ? smooth(Math.max(0, Math.min(1, (left - endOff - 0.5) / 2.0))) : smooth(Math.min(1, left / 1.0));
+    /* THE SEAM, HALF TWO. Whatever the seam is holding over the picture,
+    it holds over the type, the stamp and the inserts too — so a
+    caption is uncovered by the same gesture that uncovers the shot
+    behind it, rather than waiting for it or hiding under it. Outside a
+    seam this is 1 and costs nothing. */
+    const typeA = Math.min(enter, tailA, this.reveal);
+    this.pageEl?.style.setProperty('--cf-type-a', typeA.toFixed(3));
+    /* THE TITLE HANDS THE FRAME TO THE SUBJECT. The opening card is
+    type-first — the study's name at poster size while the lens is
+    still far out — and as the push arrives the plate settles to the
+    size every other beat's type is set at. One property, eased, held
+    for the first breath. */
+    const titleK = beat.mode === 'title' ? smooth(Math.max(0, Math.min(1, (since - 1.0) / Math.max(0.5, span - 1.4)))) : 1;
+    this.pageEl?.style.setProperty('--cf-title-k', titleK.toFixed(3));
+    /**
+    * THE ANNOUNCED YEAR STANDS IN THE PLACE, NOT ON THE GLASS.
+    *
+    * On the glass it was a caption the size of the frame: nothing could
+    * pass in front of it, and it was white whatever the light was doing.
+    * As a plane in the scene the building crosses it, the shot moves past
+    * it, and it takes its colour from the hour — a warm ink on a bright
+    * morning, a pale wash at night — which is the difference between a
+    * date that belongs to the picture and one laid over it.
+    */
+    const stampA = this.stampAt(beat, local) * typeA;
+    if (beat.stamp && (stampA > 0.002 || this.stampOn)) {
+      this.stampOn = stampA > 0.002;
+      const pal = film.palette();
+      const night = luminance(pal.paper) < 0.42;
+      film.sky('stamp', {
+        color: night ? 'rgba(247,240,224,0.5)' : 'rgba(62,50,26,0.42)',
+        family: this.worldFamily,
+        lines: [String(beat.stamp.y)],
+        shadow: night ? 'rgba(0,0,0,0.35)' : 'rgba(255,252,244,0.3)',
+        shadowBlur: 0.12,
+        size: 5.4,
+        track: this.worldTrack * 0.5,
+        weight: this.worldWeight
+      }, {
+        billboard: true,
+        opacity: stampA * 0.9,
+        x: -Math.sin(this.skyAz) * 34,
+        y: 6.4,
+        z: -Math.cos(this.skyAz) * 34
+      });
+    }
+    if (this.plateEl) {
+      this.plateEl.style.opacity = typeA.toFixed(3);
+    }
+    /* THE HOURS OF A BEAT: a beat can walk the page's times of day across
+    its length — the ending goes morning, noon, dusk, night as the
+    tower comes down, and stays in the night */
+    if (beat.hours?.length && this.rolling) {
+      const over = beat.hoursOver ?? 1;
+      const hl = Math.min(1, local / over);
+      const step = Math.min(beat.hours.length - 1, Math.floor(hl * beat.hours.length));
+      if (step !== this.hourStep) {
+        this.hourStep = step;
+        /* each hour blends across its whole share of the beat, so the
+        day turns rather than steps */
+        film.themeDur(beat.ticks * TICK * over / beat.hours.length);
+        film.theme(beat.hours[step], false);
+      }
+    }
+    /* THE CHAPTER'S NUMERAL LEAVES WITH THE CHAPTER. It is furniture
+    for the passage, not for the beat, so it holds across the shots
+    inside a chapter and fades out over the tail of the last one —
+    an 02 still sitting in the corner while 03 arrives is the film
+    forgetting which chapter it is in. */
+    const here = this.absoluteIndex;
+    const tail = (this.all[here + 1]?.ch ?? -1) !== beat.ch;
+    /* and it gives way while the announced year is standing out in the
+    scene: two pale numerals of different sizes in one frame is not a
+    texture, it is a collision */
+    this.pageEl?.style.setProperty('--cf-ghost-a', ((tail ? 1 - smooth(Math.max(0, (local - 0.72) / 0.22)) : 1) * (1 - this.stampAt(beat, local))).toFixed(3));
+    /* the bolt the cut asked for, once per landing on this beat */
+    if (beat.lightning !== undefined && this.struck !== beat.id && since >= beat.lightning) {
+      this.struck = beat.id;
+      film.lightning();
+    }
+    if (beat.dissolve) {
+      /* the building goes, the frame stays */film.modelFade(1 - smooth(Math.max(0, (local - 0.12) / 0.72)));
+    }
+    /**
+    * WEATHER CROSSES THE SHOT. The scene lights itself beautifully and
+    * then holds that light for four minutes, which is the one thing
+    * daylight never does. So every beat long enough to notice gets a
+    * cloud: the air thickens, a cool shadow passes over the picture,
+    * and it clears again before the beat is out. It is one pass, phased
+    * off the beat's own place in the script so no two land alike, and
+    * it never touches the grade — a chapter's colour is an argument,
+    * this is only the sky.
+    */
+    if (beat.ticks * TICK >= 8) {
+      const phase = this.beatIndex * 0.37 % 1 * 0.25;
+      const w = Math.max(0, Math.min(1, (local - 0.12 - phase) / 0.62));
+      const cloud = Math.sin(Math.PI * w) ** 2;
+      film.haze((this.hazeBase ?? 0) + this.cloudHaze * cloud);
+      this.setCloud(film, cloud);
+    } else {
+      this.setCloud(film, 0);
+    }
+    /* and the wash, which changes with the shot and the palette */
+    this.pushWash(film);
+    /* the lineup's metronome: the beat divides itself evenly among its
+    towers and the last one holds the remainder, so the recap ends
+    standing on the film's own subject */
+    if (beat.cycle?.length) {
+      const step = Math.min(beat.cycle.length - 1, Math.floor(local * beat.cycle.length));
+      if (step !== this.cycleStep) {
+        this.cycleStep = step;
+        const c = beat.cycle[step];
+        /* a subject by index (a scene with several), a moment on the
+        film's own clock, or simply the standing subject */
+        if (c.style !== undefined && film.style && film.styleIndex) {
+          if (film.styleIndex() !== c.style) {
+            film.style(c.style);
+          }
+        }
+        film.time(c.year !== undefined && this.args.clock ? this.args.clock.tAt(c.year) : this.standing);
+        /* each stamp lands with the scene's own construction hit; the
+        final one — the film's subject — gets the bell */
+        film.ping(step < beat.cycle.length - 1 ? 0 : 99);
+      }
+    }
+    /* the world layer fades with the beat rather than cutting with it */
+    if (beat.sky) {
+      const d = beat.sky.dist ?? 30;
+      /**
+      * PARALLAX. This used to be placed at `view().az + offset`, which
+      * pins the word to the LENS: the camera orbits, the glyph orbits
+      * with it, and a hundred feet of type sits perfectly still in the
+      * frame — the one thing that tells an eye it is looking at a
+      * sticker rather than a place. The angle is now taken once, when
+      * the beat lands, and the word stays where it was put: the shot
+      * moves past it.
+      */
+      const a = this.skyAz;
+      this.skyOn = this.exact ? smooth(Math.min(1, since / 0.62)) : this.skyOn + (1 - this.skyOn) * Math.min(1, dt * 1.6);
+      film.sky('chapter', {
+        /* HOLLOW, HUGE, AND NEARLY GONE. A filled glyph sharing air
+        with the building is a stain on the lens; a hard outline is
+        a diagram drawn on the sky. What the shot wants is a word
+        the WEATHER is holding — twice the size, a hairline, and
+        faint enough that the hill reads straight through it. */
+        color: 'rgba(252,247,236,0.34)',
+        /* THE YEAR IS THE CENTENARY'S OWN NUMERAL. It was set in the
+        page's old-style serif — the typography of the standalone
+        study, not of this film — which read as a caption borrowed
+        from somewhere else every time a date came up in the sky.
+        Heavy grotesque, barely tracked, the way the programme sets
+        a date. */
+        family: this.worldFamily,
+        lines: beat.sky.lines,
+        shadow: 'rgba(40,30,14,0.34)',
+        shadowBlur: 0.16,
+        size: beat.sky.size * 3.4,
+        weight: this.worldWeight,
+        /* LIGHT, not ink. Drawn in the same warm white the front door
+        uses, at a hairline: over this film's grounds a pale
+        outline reads as a word held in the air, where a dark one
+        reads as a diagram printed on the sky. */
+        track: beat.sky.track ?? this.worldTrack
+      }, {
+        billboard: true,
+        opacity: this.skyA = this.skyOn * (beat.sky.opacity ?? 0.4) * 0.78 * smooth(Math.max(0, Math.min(1, (local - 0.16) / 0.16))) * (1 - smooth(Math.max(0, Math.min(1, (local - 0.52) / 0.16)))),
+        x: -Math.sin(a) * d,
+        y: beat.sky.y,
+        z: -Math.cos(a) * d
+      });
+    } else if (this.skyA > 0.001 || this.skyOn > 0.001) {
+      this.skyOn = this.exact ? 0 : this.skyOn + (0 - this.skyOn) * Math.min(1, dt * 2.4);
+      /* from where the word actually is, which is usually already nothing */
+      this.skyA = this.exact ? 0 : this.skyA + (0 - this.skyA) * Math.min(1, dt * 2.4);
+      film.fade('chapter', this.skyA);
+    }
+    this.stageMark(film, beat, local, dt);
+    this.trackPoint(film, beat, local, typeA);
+    this.traceShape(film, beat, local, dt);
+    this.parallax(local);
+    this.follow(film);
+    this.wear(film);
+  }
+  /**
+  * TYPE THROWS ITS SHADOW WHERE THE BUILDING THROWS ITS OWN.
+  *
+  * The scene lights itself from a key whose position is a property of the
+  * hour, and the tower's cast shadow lies along the ground at whatever
+  * diagonal that produces. Type set over the frame with a shadow offset
+  * down and right — the default of every drop shadow ever shipped — is
+  * lit by a different sun than everything behind it, and the eye reads
+  * the mismatch long before it can name it. So the key's own screen
+  * position comes back from the scene and the offset is simply the
+  * direction away from it. At night, or with the sun behind the lens,
+  * there is no honest cast shadow and the type wears none.
+  */
+  follow(film) {
+    const el = this.pageEl;
+    if (!el) {
+      return;
+    }
+    const s = film.sun();
+    const cx = s.w / 2;
+    const cy = s.h * 0.55;
+    const dx = cx - s.x;
+    const dy = cy - s.y;
+    const len = Math.hypot(dx, dy) || 1;
+    const throwPx = s.on ? 3.2 : 0;
+    const nx = dx / len * throwPx;
+    const ny = dy / len * throwPx;
+    /* a whole pixel is enough to read and small enough never to smear */
+    const q = v => Math.round(v * 10) / 10;
+    if (q(nx) !== this.shadow.x || q(ny) !== this.shadow.y) {
+      this.shadow = {
+        x: q(nx),
+        y: q(ny)
+      };
+      el.style.setProperty('--cf-shx', `${this.shadow.x}px`);
+      el.style.setProperty('--cf-shy', `${this.shadow.y}px`);
+      /* the same diagonal, longer, for the graphic rules */
+      this.rakeDeg = q(Math.atan2(ny, nx) * 57.2958);
+      el.style.setProperty('--cf-rake', `${this.rakeDeg}deg`);
+    }
+  }
+  /** which of the frame's layers this picture draws itself */
+  takeGlass(film) {
+    this.washInGlass = !!film?.wash;
+    this.cloudInGlass = !!film?.cloud;
+    this.dimInGlass = !!film?.dim;
+    /* a picture arriving mid-run has not been told the wash yet */
+    this.washSent = '';
+  }
+  /**
+  * THE WASH, TOLD ON A CHANGE. Two things decide it — the shot's own mode
+  * and the palette's paper — and neither changes often, so the picture is
+  * told when one does and eases the change itself over the same 700 ms
+  * the stylesheet used to.
+  */
+  pushWash(film) {
+    if (!film.wash) {
+      return;
+    }
+    const mode = this.beat.bare ? '' : this.beat.mode ?? '';
+    const sig = `${mode}|${this.paperNow}`;
+    if (sig === this.washSent) {
+      return;
+    }
+    this.washSent = sig;
+    film.wash(mode, this.paperNow);
+  }
+  /** the cloud: into the glass where the picture takes it, onto a CSS plate where it does not */
+  setCloud(film, k) {
+    if (film.cloud) {
+      film.cloud(k, this.rakeDeg);
+      return;
+    }
+    this.pageEl?.style.setProperty('--cf-cloud', k.toFixed(3));
+    this.pageEl?.classList.toggle('is-cloudless', k < 0.02);
+  }
+  /**
+  * THE FURNITURE WEARS THE SCENE'S PALETTE.
+  *
+  * The page carries four times of day and swings its whole palette between
+  * them, so a scrim and a caption painted in one fixed ochre are correct in
+  * exactly one chapter and wrong in the other four — at noon the film's
+  * warm paper sits on a cool scene like a sticker. The scene already
+  * publishes its ink as CSS variables, so the film simply reads them and
+  * dresses itself the same, once per change rather than once per frame.
+  */
+  wear(film) {
+    const p = film.palette();
+    if (!p.time) {
+      return;
+    }
+    /**
+    * THE INK IS JUDGED AGAINST WHAT IS ACTUALLY ON SCREEN. The paper
+    * alone lied: a noon paper under a heavy grade, a dim, and thick
+    * haze is a DARK frame wearing a light theme, and dark ink on it
+    * disappears. So the measured luminance is discounted by the
+    * grade's own brightness, by whether this beat runs the dim, and
+    * by its haze — and the type flips to light whenever the frame it
+    * sits on has genuinely gone dark, not merely when the clock says
+    * night.
+    */
+    const GB = this.picture?.gradeLum ?? GRADE_LUM;
+    const beat = this.beat;
+    const dimmed = beat.trace || beat.to ? 0.74 : 1;
+    const eff = luminance(p.paper) * (GB[this.grade] ?? 1) * dimmed * (1 - 0.25 * (beat.haze ?? 0));
+    const dark = eff < 0.42;
+    const ch = this.chapters[this.beat.ch ?? 0] ?? this.chapters[0];
+    const sig = `${p.time}${dark ? '#d' : '#l'}${ch.n}`;
+    if (sig === this.wearing) {
+      return;
+    }
+    this.wearing = sig;
+    const el = this.pageEl;
+    if (!el) {
+      return;
+    }
+    /* the wash is mixed from this too, wherever it is drawn */
+    this.paperNow = p.paper;
+    el.style.setProperty('--cf-paper', p.paper);
+    el.style.setProperty('--cf-paper-a', rgba(p.paper, 0.94));
+    el.style.setProperty('--cf-paper-b', rgba(p.paper, 0.76));
+    el.style.setProperty('--cf-paper-c', rgba(p.paper, 0));
+    /**
+    * WHEN THE GROUND GOES DARK, THE TYPE GOES LIGHT.
+    *
+    * The scrims are mixed from the scene's own paper, so at night they
+    * are a dark wash — and dark ink on a dark wash is unreadable however
+    * carefully the scrim was tuned. Rather than hand-pick a palette per
+    * hour, the ink is DERIVED — from the frame's effective luminance,
+    * computed above. One rule, right for all four hours, every grade,
+    * and any theme anybody adds later.
+    */
+    el.classList.toggle('is-dark', dark);
+    el.style.setProperty('--cf-ink', dark ? '#f7f0e0' : p.ink);
+    el.style.setProperty('--cf-ink2', dark ? '#bdb3a0' : p.ink2);
+    el.style.setProperty('--cf-ink3', dark ? '#e6dcc8' : p.ink3);
+    /* gold, not amber: the liturgical metal, by day and under floodlight */
+    el.style.setProperty('--cf-accent', this.accentFor(dark, p.accent));
+    el.style.setProperty('--cf-rule', p.rule);
+    /* the chapter's own colour, which every piece of type in the
+    information layer is set in (see this.chapters) */
+    el.style.setProperty('--cf-chap', (dark ? ch.tintD : ch.tint) ?? this.accentFor(dark, p.accent));
+  }
+  /**
+  * PLANES, MOVING AT THEIR OWN RATES.
+  *
+  * The world layer parallaxes because it is genuinely out in the scene at
+  * different distances. The front layer has no depth to borrow, so it is
+  * given one: over the life of a beat each row drifts and scales on its
+  * own rate, the big glyph fastest and nearest, the small print slowest
+  * and furthest, so the type reads as a set of planes rather than a
+  * sheet. It is the oldest trick in motion graphics and it is here for
+  * the oldest reason — a still caption over a moving picture looks
+  * pasted on, and a caption that moves WITH the picture looks composited
+  * into it.
+  *
+  * It runs on the beat's own clock rather than Motion's, deliberately:
+  * the entrances belong to the score and this belongs to the shot, and
+  * putting the two on one timeline would mean the drift restarting every
+  * time a word did.
+  */
+  parallax(local) {
+    const rows = this.rowEls;
+    if (!rows.length) {
+      return;
+    }
+    /* ease in over the head of the beat, then KEEP MOVING: the old curve
+    saturated at half the beat and the block sat still for the rest,
+    which is exactly the pasted-on look the parallax exists to kill.
+    This one never stops — a slow push that lasts the whole shot. */
+    const t = smooth(Math.min(1, local * 1.6)) * (0.35 + 0.65 * local);
+    /**
+    * A CLOSE-UP GETS LESS OF THIS. Parallax on the type exists to
+    * stop a caption looking pasted onto a moving picture. On a 4× detail
+    * shot the picture is barely moving and the caption is the largest
+    * thing on screen, so the same amplitude stops reading as depth and
+    * starts reading as drift. It has to scale with what the shot behind
+    * it is actually doing.
+    */
+    const amp = this.beat.mode === 'point' ? 0.35 : 1;
+    /* the last moments of the beat let go: the planes keep travelling
+    and fade under the swap, so an exit is an exit and not a vanish */
+    const out = local > 0.93 ? Math.max(0, (1 - local) / 0.07) : 1;
+    for (const [i, el] of rows.entries()) {
+      /* the glyph sits near the top of the block and should be the
+      NEAREST plane, so depth runs down the block rather than up it —
+      and each plane travels at its OWN rate, slightly detuned, so the
+      stack reads as separate sheets of glass rather than one card */
+      const depth = 1 - i / Math.max(1, rows.length - 1);
+      const rate = 1 + 0.22 * Math.sin(i * 2.4);
+      /* the x-glide is SHARED: staggering it per row shifts every text
+      line's left edge differently, which the eye reads as broken
+      indentation, not depth. The planes separate in y and scale,
+      where the type's own alignment cannot be injured. */
+      const dx = -11 * t * amp;
+      const dy = -(5 + 13 * depth) * t * amp * rate;
+      const sc = 1 + 0.055 * depth * t * amp;
+      el.style.transform = `translate3d(${dx.toFixed(2)}px,${dy.toFixed(2)}px,0) scale(${sc.toFixed(4)})`;
+      el.style.opacity = out.toFixed(3);
+    }
+  }
+  /**
+  * THE TRACES LIVE IN THE SCENE NOW. They began as SVG projected over
+  * the frame — approximately right and one frame behind the lens on
+  * every move. As tubes in the page's own scene they are exact: they
+  * lie ON the eave because they are geometry at the eave's own
+  * coordinates, the building occludes them honestly, and the draw-on
+  * is the tube's index buffer revealed in path order. Each line in a
+  * set starts a moment after the one before it — a hand annotating,
+  * not a diagram switching on.
+  */ /** how much of the follow is in force (eased), and its last aim and zoom */
+  riseK = 0;
+  riseAim = 0;
+  riseZoom = 1;
+  /**
+  * THE LENS FOLLOWS THE WORK. Chris's rule for a building that goes up
+  * in the shot: if a spire is rising, ZOOM OUT; as you push in, follow
+  * the top that is being built. So while the followed campaign is
+  * between its base and its top, the aim rides a little above the
+  * middle of what stands and the zoom is capped to keep base and top
+  * in the frame; when it finishes, the authored pose takes over again,
+  * on a one-pole so the release is a move and not a jump.
+  */
+  followRise(film, dt) {
+    const b = this.beat;
+    const want = b.follow !== false && Array.isArray(b.build) ? film.rising?.(typeof b.follow === 'string' ? b.follow : undefined) ?? null : null;
+    const on = !!want && want.rising;
+    if (this.exact) {
+      /* the follow eases in and out on the campaign's own progress, which
+      is a function of the page's clock and so of the film's */
+      if (!on || !want) {
+        return null;
+      }
+      const span = Math.max(1.6, want.top - want.base + 1.0);
+      const aim = want.base + 0.58 * (want.top - want.base) - this.rigMid;
+      const zoom = Math.min(this.now.dolly, 7.0 / span);
+      const k = smooth(Math.min(1, want.k / 0.12)) * (1 - smooth(Math.max(0, (want.k - 0.86) / 0.14)));
+      return {
+        lookY: lerp(this.now.lookY, aim, k),
+        zoom: lerp(this.now.dolly, zoom, k)
+      };
+    }
+    if (on && want) {
+      const span = Math.max(1.6, want.top - want.base + 1.0);
+      const aim = want.base + 0.58 * (want.top - want.base) - this.rigMid;
+      const zoom = Math.min(this.now.dolly, 7.0 / span);
+      const k = Math.min(1, dt / 1.1);
+      this.riseAim += (aim - this.riseAim) * (this.riseK < 0.02 ? 1 : k);
+      this.riseZoom += (zoom - this.riseZoom) * (this.riseK < 0.02 ? 1 : k);
+    }
+    this.riseK += ((on ? 1 : 0) - this.riseK) * Math.min(1, dt / 0.9);
+    if (this.riseK < 0.01) {
+      return null;
+    }
+    return {
+      lookY: lerp(this.now.lookY, this.riseAim, this.riseK),
+      zoom: lerp(this.now.dolly, this.riseZoom, this.riseK)
+    };
+  }
+  /** the beat whose lines are being timed, and the local time they became drawable */
+  traceBeat = '';
+  traceFrom = -1;
+  /** whether the beat's lines may be on the glass right now */
+  traceOk = false;
+  /**
+  * NO LINE ON A THING STILL GOING UP. A trace or a callout is drawn on a
+  * finished part: the followed campaign must be done (or, with nothing
+  * followed, the built height must have passed the line). The draw-on
+  * is timed from the moment that became true, not from the head.
+  */
+  traceReady(film, beat, local) {
+    if (this.traceBeat !== beat.id) {
+      this.traceBeat = beat.id;
+      this.traceFrom = -1;
+    }
+    let ready = true;
+    if (beat.follow !== false && Array.isArray(beat.build)) {
+      const r = film.rising?.(typeof beat.follow === 'string' ? beat.follow : undefined);
+      if (typeof beat.follow === 'string') {
+        ready = !!r && r.done;
+      } else {
+        ready = !r || !r.rising;
+      }
+    }
+    if (ready && this.traceFrom < 0) {
+      this.traceFrom = local;
+    }
+    this.traceOk = ready && this.traceFrom >= 0;
+    return this.traceOk;
+  }
+  traceShape(film, beat, local, dt) {
+    const specs = beat.trace ?? [];
+    let drew = 0;
+    /* AND THEY LEAVE. A hand that annotates a drawing also takes the
+    annotation away; a red line that survives to the cut reads as
+    something the film forgot. The whole set fades over the last
+    fifth of the beat, in the order it was drawn. */
+    const gone = Math.min(1, Math.max(0, (local - 0.78) / 0.16));
+    const since = this.traceReady(film, beat, local) ? local - this.traceFrom : -1;
+    for (const [i] of specs.entries()) {
+      const draw = Math.min(1, Math.max(0, (since - 0.04 - i * 0.12) / 0.16));
+      /* UNDRAWN, NOT FADED: the pen lifts back along the path it drew,
+      first line first, so the annotation leaves as a gesture */
+      const undraw = Math.min(1, Math.max(0, gone * (1 + i * 0.25)));
+      drew = Math.max(drew, draw * (1 - undraw));
+      if (undraw > 0 && film.traceUndraw) {
+        film.traceUndraw(`t${i}`, undraw);
+        film.traceFade(`t${i}`, undraw >= 1 ? 0 : 1);
+      } else {
+        film.traceDraw(`t${i}`, draw);
+        /* a page that cannot lift the pen fades the line instead */
+        film.traceFade(`t${i}`, 1 - undraw);
+      }
+    }
+    /* the callout earns the dim too — a leader and a ring are annotation
+    just as much as a traced eave is */
+    if (beat.to) {
+      drew = Math.max(drew, Math.min(1, Math.max(0, (since - 0.04) / 0.18)));
+    }
+    this.dimNow = this.exact ? drew : this.dimNow + (drew - this.dimNow) * Math.min(1, dt * 3.2);
+    if (this.dimInGlass) {
+      film.dim?.(this.dimNow);
+    } else if (this.dim) {
+      this.dim.style.opacity = this.dimNow.toFixed(3);
+    }
+  }
+  /** the mark's facing, damped behind the camera's own bearing */
+  markFace = 0;
+  /**
+  * Place the stage mark: climb to its height with a settle, hold, and
+  * face the camera a beat late.
+  */
+  stageMark(film, beat, local, dt) {
+    const m = beat.mark;
+    const tether = this.tetherEl;
+    /* THE CLIMB BELONGS TO THE WORD, NOT TO THE BEAT. A word that waits
+    for its wall to be built must still ENTER low — otherwise it
+    arrives at whatever height a ramp running since the top of the
+    beat has carried it to, which for the stone base meant appearing
+    halfway up the sky it was supposed to rise into. The rise is
+    measured from the moment it shows up. */
+    if (!m) {
+      film.fade('mark', 0);
+      if (tether) {
+        tether.style.opacity = '0';
+      }
+      return;
+    }
+    /**
+    * IT COMES IN BEHIND THE BUILDING, EVERY TIME. The entry height is
+    * read off the structure at the moment the word arrives — a little
+    * under the top of whatever has been built so far — so the thing on
+    * screen always hides the word's first frames and hands it over as
+    * it climbs. Taken once per beat, because reading it every frame
+    * would make the word ride the build instead of rising past it.
+    */
+    if (!this.markSeated && local >= (m.at ?? 0.14)) {
+      this.markSeated = true;
+      this.markFrom = Math.max(0.4, film.height() - 3.4);
+    }
+    /* the climb takes the first fifth of the beat and SETTLES — barely
+    past its mark, once. The old spring bounced at the top like a
+    carnival bell, which no surveyor's mark has ever done. */
+    const raw = Math.min(1, Math.max(0, (local - 0.04) / 0.2));
+    const c1 = 0.45;
+    const p = raw - 1;
+    const rise = raw >= 1 ? 1 : 1 + (c1 + 1) * p * p * p + c1 * p * p;
+    const y = m.to * rise;
+    const a = m.bearing * RAD;
+    const v = film.view();
+    /* a damped follow, and wrapped so the lag never takes the long way */
+    this.markFace = this.exact ? v.az : this.markFace + wrapAngle(v.az - this.markFace) * Math.min(1, dt * 1.6);
+    film.sky('mark', {
+      /* BIG, WHITE, SOFT, AND BEHIND. A dark label pasted over the
+      scaffolding is a sticker; a big pale word standing further out
+      than the structure — soft-edged, its own glow holding it
+      against the hills, the building crossing in FRONT of it — is
+      part of the place. */ /* white OUTLINE, on its own plane behind the building, and
+                            smaller than the sky word: this one names a part rather than
+                            the chapter, so it stands at the height of the thing it names
+                            and keeps climbing with it. */ /* BIGGER, FAINTER, AND IN THE SAME PLACE EVERY TIME. A word
+                                                           that lands somewhere new each beat is a caption chasing the
+                                                           building; one that always stands in the same spot behind it
+                                                           becomes a fixture of the film — you stop reading it as an
+                                                           annotation and start reading it as the name of what you are
+                                                           watching. Big enough to be architecture, faint enough that
+                                                           the timber crossing it always wins. */ /* TINTED, not outlined. An outline is a drawing of a word; a
+                                                                                                  tint is the word itself, standing in the same air as
+                                                                                                  everything else and taking the same light. Grey because the
+                                                                                                  sky it stands in is nearly white, and faint enough that the
+                                                                                                  building crossing it always wins. */
+      color: 'rgba(78,71,56,0.3)',
+      family: this.worldFamily,
+      lines: m.lines,
+      shadow: 'rgba(255,252,244,0.28)',
+      shadowBlur: 0.14,
+      size: m.size * 2.7,
+      track: this.worldTrack,
+      weight: this.worldWeight
+    }, {
+      /* IN LATE, OUT EARLY. The word arrives after the shot has been
+      running long enough to be about something, names the stage, and
+      is gone before the middle — a title that outstays the moment it
+      titles becomes furniture. */
+      opacity: 0.62 * smooth(Math.max(0, Math.min(1, (local - (m.at ?? 0.14)) / 0.16))) * (1 - smooth(Math.max(0, Math.min(1, (local - ((m.at ?? 0.14) + (m.hold ?? 0.34))) / 0.2)))),
+      ry: this.markFace / RAD % 360,
+      /**
+      * IT RISES OUT FROM BEHIND THE BUILDING. The word starts low
+      * enough that the structure stands in front of it, fades up
+      * while it is still half hidden, climbs past the frame the
+      * carpenters are raising, and is gone before it reaches the top
+      * of the picture — so the BUILDING reveals it, rather than a
+      * caption appearing beside the building. Planted on one azimuth
+      * so the camera moves PAST it, and nudged back toward the lens
+      * if the orbit carries it out of frame (below).
+      */
+      x: Math.sin(this.markAz) * 26 + Math.cos(this.markAz) * this.markOff,
+      /* a short climb, not a launch: the word should read as drifting
+      up out of the structure over its whole life, not crossing the
+      frame — same time on screen, a third of the distance */
+      y: this.markFrom + Math.max(0, local - (m.at ?? 0.14)) * 7,
+      z: Math.cos(this.markAz) * 26 - Math.sin(this.markAz) * this.markOff
+    });
+    /**
+    * KEEP IT ON SCREEN — WHILE IT IS ON SCREEN. A planted word
+    * parallaxes, which is the point, but the shot can orbit far enough
+    * to carry it out of the picture, so the anchor is nudged back
+    * toward the lens when what it projects to leaves the safe area.
+    *
+    * Two things this must NOT do. It must not correct a word that has
+    * already faded out — the first mark used to slide sideways as it
+    * left, because the correction was still hunting a glyph nobody
+    * could see. And it must not treat the TOP edge as a failure: this
+    * word is supposed to rise out of frame. Only the sides count, and
+    * only while it is visible.
+    */
+    const seen = film.project(Math.sin(this.markAz) * 26 + Math.cos(this.markAz) * this.markOff, this.markFrom + Math.max(0, local - (m.at ?? 0.14)) * 7, Math.cos(this.markAz) * 26 - Math.sin(this.markAz) * this.markOff);
+    const lit = local > (m.at ?? 0.14) - 0.02 && local < (m.at ?? 0.14) + (m.hold ?? 0.34) + 0.02;
+    const outside = lit && (!seen.on || seen.x < v.w * 0.12 || seen.x > v.w * 0.88);
+    if (outside) {
+      let d = v.az + Math.PI - this.markAz;
+      while (d > Math.PI) {
+        d -= Math.PI * 2;
+      }
+      while (d < -Math.PI) {
+        d += Math.PI * 2;
+      }
+      this.markAz += d * Math.min(1, dt * 0.9);
+    }
+    /* AND IT IS TETHERED. A label floating beside a building names
+    nothing; a line back to the height it is describing turns it into a
+    measurement. */
+    if (tether && this.frameEl) {
+      const host = this.frameEl.getBoundingClientRect();
+      const sx = host.width / v.w;
+      const sy = host.height / v.h;
+      const from = film.project(Math.sin(a) * m.r * 0.72, y, Math.cos(a) * m.r * 0.72);
+      const to = film.project(0, y, 0);
+      tether.setAttribute('x1', String(from.x * sx));
+      tether.setAttribute('y1', String(from.y * sy));
+      /* it reaches for the word rather than appearing beside it */
+      const tk = Math.min(1, Math.max(0, (raw - 0.4) / 0.22));
+      const fx = Number(tether.getAttribute('x1') ?? 0);
+      const fy = Number(tether.getAttribute('y1') ?? 0);
+      tether.setAttribute('x2', String(fx + (to.x * sx - fx) * tk));
+      tether.setAttribute('y2', String(fy + (to.y * sy - fy) * tk));
+      tether.style.opacity = tk > 0.01 ? '0.55' : '0';
+    }
+  }
+  /**
+  * THE TRACKING LINE — the one piece of the front layer that has to know
+  * where the camera is pointing this frame. The caption stays where the
+  * layout put it and a line reaches from it to the actual point on the
+  * building, redrawn every frame, so the label is attached to the thing
+  * rather than merely near it.
+  */
+  trackPoint(film, beat, local, typeA) {
+    const line = this.lineEl;
+    const dot = this.dotEl;
+    if (!line || !dot) {
+      return;
+    }
+    if (!beat.to || !this.frameEl || !this.plateEl) {
+      line.style.opacity = '0';
+      dot.style.opacity = '0';
+      return;
+    }
+    /* nothing is worth pointing at before it is built: the clip plane is
+    the honest test, since the point may be above it for most of a beat */
+    if (beat.to[1] > film.height() + 0.15) {
+      line.style.opacity = '0';
+      dot.style.opacity = '0';
+      return;
+    }
+    const p = film.project(...beat.to);
+    const v = film.view();
+    const host = this.frameEl.getBoundingClientRect();
+    const box = this.plateEl.getBoundingClientRect();
+    /* the page renders at its own size; the frame may be laid out at another */
+    const sx = host.width / v.w;
+    const sy = host.height / v.h;
+    const x2 = p.x * sx;
+    const y2 = p.y * sy;
+    /* leave from the edge of the caption that faces the point */
+    const cx = box.left - host.left + box.width / 2;
+    const cy = box.top - host.top + box.height / 2;
+    const x1 = x2 > cx ? box.right - host.left : box.left - host.left;
+    const y1 = cy;
+    /**
+    * A RED LINE IS DRAWN, NEVER SWITCHED ON.
+    *
+    * The traces on the building draw themselves along their own path and
+    * lift back off it; the callout — the leader and the ring — was
+    * fading in and out beside them, so half the annotation was a gesture
+    * and half was a light switch. Same clock, same behaviour: the leader
+    * runs out from the caption to the point, the ring is drawn round it,
+    * and at the end the leader's tail catches up with its head while the
+    * ring un-draws the way it came.
+    */
+    const gate = p.on && this.traceOk;
+    const inK = Math.min(1, Math.max(0, (local - 0.12) / 0.16));
+    const outK = Math.min(1, Math.max(0, (local - 0.78) / 0.16));
+    const draw = gate ? inK : 0;
+    const lift = gate ? outK : 1;
+    /* the head runs out first, then the tail follows it home */
+    const hx = x1 + (x2 - x1) * draw;
+    const hy = y1 + (y2 - y1) * draw;
+    const tx = x1 + (hx - x1) * lift;
+    const ty = y1 + (hy - y1) * lift;
+    line.setAttribute('x1', String(tx));
+    line.setAttribute('y1', String(ty));
+    line.setAttribute('x2', String(hx));
+    line.setAttribute('y2', String(hy));
+    dot.setAttribute('cx', String(x2));
+    dot.setAttribute('cy', String(y2));
+    /* the line belongs to the caption: it fades with the type, so a
+    chapter flight after the beat does not leave a rule hanging in the
+    air over a caption that has already gone */
+    line.style.opacity = draw > 0.01 && lift < 0.99 ? (0.75 * typeA).toFixed(3) : '0';
+    /* the ring: an arc that grows from nothing and is rubbed out from
+    the same end it started at */
+    const vis = Math.max(0, draw - lift);
+    dot.style.strokeDasharray = `${vis.toFixed(3)} 1`;
+    dot.style.strokeDashoffset = String(-lift.toFixed(3));
+    dot.style.opacity = vis > 0.005 ? typeA.toFixed(3) : '0';
+  }
+  /**
+  * THE READOUT AND THE MARKER. The numeral is tracked and written only
+  * when the whole year changes, which is a handful of times a run; the
+  * marker's position is a custom property written every frame, because a
+  * dot that steps once a year along a rule is a dot that looks broken.
+  */ /**
+     * WHEN THE NUMERAL IS ON. It rises as the voice reaches the year, holds
+     * while the phrase finishes, and is gone well before the cut — a date
+     * that outstays the sentence that said it becomes a watermark.
+     */
+  stampAt(beat, local) {
+    const st = beat.stamp;
+    if (!st) {
+      return 0;
+    }
+    const secs = beat.ticks * TICK;
+    const read = this.voSecs[beat.id] ?? secs * 0.66;
+    const t0 = (read * (st.at ?? 0.06) + this.typeAt[0]) / secs;
+    const rise = 0.9 / secs;
+    const hold = 2.6 / secs;
+    const fall = 1.1 / secs;
+    const inK = Math.max(0, Math.min(1, (local - t0) / rise));
+    const outK = Math.max(0, Math.min(1, (local - t0 - rise - hold) / fall));
+    return smooth(inK) * (1 - smooth(outK));
+  }
+  /** the film's clock readout, from page seconds — nothing without a clock */
+  showYear(t) {
+    const clock = this.args.clock;
+    if (!clock) {
+      return;
+    }
+    const y = clock.yearAt(t);
+    const n = Math.floor(y);
+    if (n !== this.yearSent) {
+      this.yearSent = n;
+      this.yearNow = n;
+    }
+    const [a, z] = clock.span;
+    const p = Math.max(0, Math.min(1, (y - a) / (z - a)));
+    this.pageEl?.style.setProperty('--cf-head', p.toFixed(4));
+  }
+  /** everything a beat changes in the world, done once on entry */
+  applyBeat(beat, instant = false, seam) {
+    const film = this.film;
+    if (!film) {
+      return;
+    }
+    this.beatAt = performance.now();
+    this.cycleStep = -1;
+    /* the traces are the beat's own; stand this beat's up unrevealed and
+    take the last beat's down */
+    for (let i = 0; i < 4; i++) {
+      film.clearTrace(`t${i}`);
+    }
+    /* the tube's thickness is a SCREEN quantity wearing world units: a
+    marker line should read the same weight in a wide shot as in a 4×
+    close-up, so the radius is sized against the shot's magnification */
+    const mag = (beat.cam.dolly + (beat.toCam?.dolly ?? beat.cam.dolly)) / 2;
+    beat.trace?.forEach((spec, i) => {
+      const r = Math.max(0.03, Math.min(0.2, (spec.wide ? 0.13 : 0.085) / mag));
+      film.trace(`t${i}`, {
+        pts: spec.pts,
+        r
+      });
+    });
+    /**
+    * A JOIN WITHOUT A CUT. Most seams are cuts, but not all of them:
+    * the construction chapter FLIES in and then has to clear the
+    * standing building off the ground before it can build one, and a
+    * tower blinking out of existence mid-sweep is a glitch. So a beat
+    * may name a join without being a cut — the overlay plays over the
+    * arriving shot and the camera is left alone.
+    */
+    if (beat.cut || beat.join) {
+      const join = beat.join ?? this.defaultJoin;
+      if (this.exact) {
+        this.seamExact(film, beat, join, seam);
+      } else if (join === 'whip') {
+        this.whipUntil = performance.now() + 360;
+      } else {
+        /**
+        * Every remaining join works the same way: capture the OUTGOING
+        * frame first — the bridge renders one on demand and reads it
+        * back synchronously — then snap, then run the join's overlay on
+        * the still while the live incoming shot plays underneath.
+        * 'wipe' sweeps it off along the sun's diagonal with a feathered
+        * edge; 'blend' is a push dissolve (it fades AND travels);
+        * 'iris' closes a circle onto the new shot's own subject; 'dip'
+        * covers the seam with a colour. A failed capture (zero-sized
+        * surface) degrades to a clean cut — a dip still gets its veil.
+        */ /**
+           * THE FREEZE BELONGS ON THE GPU, NOT IN A JPEG.
+           *
+           * Every join that is not a blend used to read the canvas back and
+           * encode it — `toDataURL` on a full-resolution, device-pixel-ratio
+           * canvas, synchronously, on the frame of the cut. That is tens of
+           * milliseconds of stall AT EVERY CUT, which is precisely where the
+           * film could least afford it, and with the dip now the default
+           * join it was happening twenty-odd times a run. The page can hold
+           * the outgoing frame in its own render target instead, for free.
+           * The still is kept only as the fallback for a join whose overlay
+           * genuinely needs pixels in the DOM (the wipe sweeps one, the iris
+           * closes over one).
+           */
+        let held = '';
+        const deep = this.overOf(beat);
+        /**
+        * THE SEAM IN TWO HALVES. A mix seam the picture can hold goes
+        * into the glass — where it is composited in LIGHT, which an
+        * `<img>` faded by this document can never be — and the incoming
+        * furniture is revealed by the same two numbers rather than
+        * hidden under a still. No read-back, no JPEG, no decode to wait
+        * for, and a seek through it is a function of the clock.
+        *
+        * A wipe and an iris are shapes rather than mixes: they need
+        * pixels to sweep and to clip, so they keep their still.
+        */
+        const glass = this.glassFor(join);
+        if (glass) {
+          film.freeze?.(true);
+          this.glassKind = join;
+          this.glassName = glass.name ?? '';
+          this.glassLen = this.secsOf(join);
+          this.glassColor = beat.dipTo ?? '#0d0905';
+          this.reveal = 0;
+          this.freeze = '';
+          this.joinKind = '';
+          if (beat.cut) {
+            this.snap(beat.cam, this.tailFor(this.beatIndex), beat.ticks * TICK);
+          }
+        } else if (deep !== 'everything' && (join === 'blend' || join === 'melt' || join === 'dip')) {
+          /* the crossfade lives in the glass now; the still is the
+          fallback, and a stale one must never stand in for it */ /* A/B IN THE GLASS: when nothing but the lens changes across
+                                                                  the seam, the outgoing shot keeps moving under the dissolve
+                                                                  (the page draws both cameras). A seam that changes the hour,
+                                                                  the weather, the model, the snow or the mood keeps the graded
+                                                                  still — a live A under B's light is the old shot dressed
+                                                                  wrong, which is worse than a frozen one. */
+          const live = beat.theme === undefined && beat.wx === undefined && beat.style === undefined && beat.winter === undefined && beat.grade === undefined && !beat.hours;
+          if (!film.dissolve(join, undefined, live)) {
+            const shot = film.snapshot();
+            held = shot.length > 64 ? shot : '';
+          }
+        } else if (join !== 'cut') {
+          const shot = film.snapshot();
+          held = shot.length > 64 ? shot : '';
+        }
+        /* THE LENS WAITS FOR THE STILL (`film/seam.ts`): everything below
+        happens on the frame the outgoing frame can actually be painted
+        on, not on the frame it was read back. And while it waits, the
+        PICTURE holds the outgoing frame — the rest of this method lands
+        the beat's hour, build, model and weather immediately, and for
+        the two or three frames the decode takes, the canvas would
+        otherwise show the incoming world with nothing over it. */
+        const index = this.beatIndex;
+        if (this.glassKind === join) ; else if (held) {
+          film.freeze?.(true);
+        }
+        this.seam.hold(this.glassKind === join ? '' : held, () => {
+          if (this.glassKind === join) {
+            return;
+          }
+          film.freeze?.(false);
+          this.freeze = held;
+          /* A WIPE IS A CUT with punctuation over it (docs/choreo-splices.md):
+          the still of the outgoing shot sweeps off to reveal the incoming
+          one, so the lens must already BE on the incoming shot. Without
+          the cut, the sweep revealed the old shot still gliding toward the
+          new pose — the same picture twice, once as a still and once live. */
+          if (beat.cut || join === 'wipe') {
+            this.snap(beat.cam, this.tailFor(index), beat.ticks * TICK);
+          }
+          if (join === 'dip') {
+            this.dipColor = beat.dipTo ?? '#0d0905';
+            this.play('dip', deep);
+          } else if (join === 'flash') {
+            this.play('flash', deep);
+          } else if (join === 'sweep') {
+            this.lightSweep(film, beat);
+          } else if (join === 'defocus') {
+            /* the rack: the freeze blurs away above while the live frame
+            arrives soft and pulls itself sharp underneath */
+            if (held) {
+              this.play('defocus', deep);
+            }
+            this.liveEl?.animate([{
+              filter: 'blur(9px)'
+            }, {
+              filter: 'blur(0px)'
+            }], {
+              duration: 700,
+              easing: 'cubic-bezier(0.3, 0, 0.3, 1)'
+            });
+          } else if (held) {
+            if (join === 'iris') {
+              /* the circle closes ON the incoming shot's named point —
+              projected now, with the camera already snapped — so the
+              iris hands the eye directly to the subject */
+              const v = film.view();
+              const p = beat.to ? film.project(...beat.to) : undefined;
+              const cx = p ? Math.max(12, Math.min(88, p.x / v.w * 100)) : 50;
+              const cy = p ? Math.max(12, Math.min(88, p.y / v.h * 100)) : 50;
+              this.irisAt = `--ix:${cx.toFixed(1)}%;--iy:${cy.toFixed(1)}%`;
+              this.play('iris', deep);
+            } else if (this.presentations[join]?.component) {
+              this.play(join, deep);
+            }
+          }
+        });
+      }
+    }
+    /**
+    * WHICH BUILDING THIS BEAT IS ABOUT — asserted, never inherited.
+    *
+    * This used to run only when a beat NAMED a style, so every beat
+    * that did not name one (all of chapters one to four) simply kept
+    * whatever tower was standing. Straight through from the top that is
+    * invisible, because the film opens on the keep and only the
+    * comparison names anything else. Come back the other way — the
+    * comparison or the lineup, then a chapter skip back into DETAIL —
+    * and the film narrates the Japanese keep over a Chinese pagoda: the
+    * shot called "at the foot" frames somebody else's balcony, and the
+    * traces, which are computed from the keep's own level table, point
+    * at empty air. That is the "off by one section" and the second
+    * building in the frame, and it is not a motion problem at all: it
+    * is a beat inheriting state it never asked for. The subject of this
+    * film is the keep, so a beat that says nothing means style zero.
+    */ /* WHICH SUBJECT THIS BEAT IS ABOUT — asserted, never inherited, in a
+       scene that has several: a beat that says nothing means subject
+       zero, or a chapter skip narrates one building over another */
+    if (film.style && film.styleIndex) {
+      const style = beat.style ?? 0;
+      if (film.styleIndex() !== style) {
+        film.style(style);
+        film.time(Array.isArray(beat.build) ? beat.build[0] : beat.build ?? this.standing);
+      }
+    }
+    /* whatever the last beat did to the model, this one starts whole */
+    if (!beat.dissolve) {
+      film.modelFade(1);
+    }
+    if (typeof beat.build === 'number') {
+      film.time(beat.build);
+    } else if (Array.isArray(beat.build)) {
+      film.time(beat.build[0]);
+    } else {
+      /* EVERY BEAT OWNS ITS BUILD STATE. A beat that says nothing wants
+      the building whole — so a chapter skip, a scrub or a restart
+      landing anywhere after the ending finds the tower standing, not
+      the last beat's rubble. Only the construction chapter and the
+      ending say otherwise, and they say it explicitly. */
+      film.time(this.standing);
+    }
+    if (beat.sky) {
+      /* plant the word where the shot can see it, once */ /* IT HAS TO BE IN THE SHOT.
+                                                           The bearing was taken from the lens at the head of the beat and
+                                                           then held — which is right, because a word that rides the lens is
+                                                           a sticker. But the shot MOVES after that: by the time the camera
+                                                           had swung forty degrees the word was off the left edge, standing
+                                                           in a piece of sky nobody was looking at. So the bearing is taken
+                                                           at the middle of the shot's own swing instead. The word is then
+                                                           behind the building at both ends of the move, the structure
+                                                           crosses it on the way past, and it never leaves the frame. */const swing = beat.toCam ? (beat.toCam.yaw - beat.cam.yaw) * RAD / 2 : 0;
+      this.skyAz = (this.film?.view().az ?? 0) + swing + (beat.sky.az ?? 0) * RAD;
+    }
+    if (beat.mark) {
+      /* AND THE MARK STANDS BEHIND THE BUILDING. Taken once, along the
+      lens axis at the moment the beat lands, so the word is directly
+      behind the subject — the structure crosses it, the camera moves
+      PAST it, and it never reads as a caption stuck on the glass. */
+      this.markAz = (this.film?.view().az ?? 0) + Math.PI;
+      /**
+      * A ONE-CHARACTER WORD IS NOT A TWO-CHARACTER WORD. 瓦 centred on
+      * the same anchor as 石垣 reads as sitting too far left — an eye
+      * centres a line of type on its mass, not on its box. So a lone
+      * glyph is nudged toward the right of frame, and which way THAT
+      * is depends on where the lens is standing: both candidates are
+      * projected and the one further right wins.
+      */
+      const lone = (beat.mark.lines[0] ?? '').length <= 1;
+      this.markOff = 0;
+      if (lone && this.film) {
+        const a = this.markAz;
+        const at = k => this.film.project(Math.sin(a) * 26 + Math.cos(a) * k, 9, Math.cos(a) * 26 - Math.sin(a) * k).x;
+        this.markOff = at(3.6) > at(-3.6) ? 3.6 : -3.6;
+      }
+      /* the entry height is taken when the word ARRIVES, not here —
+      by then the building has grown and the word has to enter
+      behind whatever is standing (see stageMark) */
+      this.markSeated = false;
+      this.markFrom = (beat.mark.to ?? 8) * 0.34 - 1.6;
+    }
+    this.applyAir(beat, instant);
+    /**
+    * THE VOICE CROSSES ON ITS OWN CLOCK. Tracks are linked by the seam
+    * but independent across it: a beat with its own line fades the old
+    * one under (~120ms) and speaks; a beat with none is an L-CUT — the
+    * outgoing sentence finishes over the new shot and the duck lifts
+    * when it lands, exactly as an editor would lay it. A designed
+    * silence (`hush`) is the exception that asks for quiet.
+    */
+    if (beat.vo || beat.hush) {
+      this.hush();
+      this.speak(beat);
+    } else if (!this.sound || !this.film?.speaking()) {
+      /* nothing is actually speaking: the silent beat gets its music */this.film?.duck(1);
+    }
+    this.args.onBeat?.(beat, film);
+  }
+  /**
+  * THE AIR OF A SHOT: grade, sun, haze, weather. Split out of the beat
+  * so a chapter's sky can begin turning while the lens is still flying
+  * into it — the `air` cue fires at the head of a lead, the beat's own
+  * cue when it lands, and applying it twice is harmless because every
+  * one of these is a set, not a step.
+  */
+  applyAir(beat, instant = false) {
+    /* THE STILL IS A, THE LIVE IS B. One scene cannot show two shots at
+    once, so every join that carries a still of the outgoing shot (a
+    cut, a wipe, a blend, a melt, a dip) needs the incoming shot to be
+    ENTIRELY itself on its first live frame — hour, weather, grade
+    snapped, not eased. Otherwise the sweep reveals the same building
+    still wearing the last shot's light, and the seam reads as the
+    same picture twice. Only a join with no still (a whip, a plain
+    glide) gets to ease. */
+    const hard = instant || !!beat.cut || beat.join !== undefined && this.holdsStill(beat.join);
+    const film = this.film;
+    if (!film) {
+      return;
+    }
+    if (beat.theme !== undefined) {
+      film.theme(beat.theme, hard);
+    }
+    /**
+    * THE SUN MOVES, it does not switch on. Both sun and haze are shot
+    * properties, released when a beat does not ask — otherwise one
+    * raking close-up lights the rest of the film. But a beat that DOES
+    * ask used to get its light in a single frame, which in the
+    * construction chapter (side light at twelve degrees, then sixty,
+    * then near-overhead) read as somebody flipping a switch. The goal
+    * is set here and the frame loop walks the light to it.
+    */
+    const want = beat.sun ? {
+      az: beat.sun.az * RAD,
+      el: beat.sun.el * RAD
+    } : null;
+    this.sunFrom = instant ? null : this.sunGoal;
+    this.sunGoal = want;
+    if (hard || !this.sunNow || !want) {
+      this.sunNow = want ? {
+        ...want
+      } : null;
+      film.light(this.sunNow);
+    }
+    this.struck = '';
+    this.hourStep = -1;
+    this.gradeSnap = hard;
+    if (!beat.hours) {
+      film.themeDur(null);
+    }
+    this.hazeBase = beat.haze ?? null;
+    film.haze(this.hazeBase);
+    if (beat.wx !== undefined) {
+      film.wx(beat.wx, hard || !!beat.wxCut);
+    }
+    if (beat.winter !== undefined) {
+      film.winter(beat.winter);
+    }
+    film.mix(beat.mix ?? null);
+    film.tag(Array.isArray(beat.build) && beat.build[1] > beat.build[0]);
+    /* the weather preset draws rain for the page's own wide shot; a beat
+    that is ABOUT the rain asks for more of it (Beat.rain) */
+    film.rain(beat.rain ?? null);
+    film.rim(beat.rim ?? null, true);
+    film.quality?.(beat.quality ?? null);
+    film.grass?.(beat.grass ?? false);
+    if (beat.theme !== undefined) {
+      this.hourNow = beat.theme;
+    }
+    /* by night the frosted city goes nearly under: the church is the lit thing */
+    film.city?.(beat.city ?? 'glass', this.hourNow === 3 ? 0.08 : this.cityGlass);
+    this.args.onAir?.(beat, film, hard);
+  }
+  /**
+  * THE HOUR A CUT INHERITS.
+  *
+  * Theme and weather are stated where they CHANGE, so a beat halfway
+  * through the film usually says nothing about either — which is right
+  * for a film played from the top and wrong for one dropped into. A
+  * deep link (or a chapter skip) would open in whatever sky was last
+  * set, which since the front door became an evening meant the
+  * construction chapter got built at dusk. So a cut resolves its own
+  * hour first: walk back to the last beat that named one, and take it.
+  */
+  settleAir(index) {
+    const film = this.film;
+    if (!film) {
+      return;
+    }
+    for (let i = index; i >= 0; i -= 1) {
+      const t = this.all[i]?.theme;
+      if (t !== undefined) {
+        film.theme(t, true);
+        break;
+      }
+    }
+    for (let i = index; i >= 0; i -= 1) {
+      const w = this.all[i]?.wx;
+      if (w !== undefined) {
+        film.wx(w, true);
+        break;
+      }
+    }
+    /* the snow a cut inherits — and a jump to before the first winter
+    beat must land on bare ground, not on whatever was last pinned */
+    let winter = null;
+    for (let i = index; i >= 0; i -= 1) {
+      if (this.all[i]?.winter !== undefined) {
+        winter = this.all[i].winter;
+        break;
+      }
+    }
+    film.winter(winter ?? null);
+  }
+  shot = state => {
+    this.goal = {
+      dolly: state.dolly,
+      fx: state.look?.x ?? 0,
+      fz: state.look?.z ?? 0,
+      lookY: state.look?.y ?? 0,
+      ox: state.x,
+      pitch: state.pitch,
+      yaw: state.yaw
+    };
+  };
+  dispatch = command => {
+    if (command.action === 'lap') {
+      /* the last cue has run. Looping past your own ending is how a film
+      tells the viewer it never meant any of it. */
+      this.end();
+      return;
+    }
+    if (command.action === 'air') {
+      const i = Number(command.target);
+      if (Number.isFinite(i) && this.beats[i]) {
+        this.applyAir(this.beats[i]);
+      }
+      return;
+    }
+    if (command.action === 'beat') {
+      const i = Number(command.target);
+      /* THE HEAD BEAT IS APPLIED ONCE. A cut applies its beat itself, so
+      the picture is right before the run exists; the run's first cue
+      then names the same beat a pass later. Applying it again ran
+      the join twice — and the second wipe snapshotted a lens that
+      had already moved, so the sweep revealed the shot it covered. */
+      if (i === 0 && this.primedLap === this.lap) {
+        this.primedLap = -1;
+        this.beatIndex = 0;
+        return;
+      }
+      if (Number.isFinite(i) && this.beats[i]) {
+        this.beatIndex = i;
+        this.applyBeat(this.beats[i]);
+      }
+    }
+  };
+  /**
+  * PAUSE MEANS EVERYTHING STOPS. The score's run holds where it is (the
+  * lens included), the page's own clock holds (grass, weather, the
+  * build, the day), the audio graph suspends, and the beat clock is
+  * shifted forward by the length of the hold on resume so the hours,
+  * the build and the type pick up exactly where they stood. Tearing the
+  * Sequence down was the old pause, and it re-ran the chapter on play.
+  * An exact film's runs are already standing — its clock is the only
+  * thing that has to hold.
+  */
+  toggle = () => {
+    if (!this.playing) {
+      return;
+    }
+    this.paused = !this.paused;
+    this.pop(this.paused ? 'pause' : 'play');
+    if (!this.exact) {
+      const run = this.scoreCtx?.run ?? null;
+      if (this.paused) {
+        this.pausedAt = performance.now();
+        run?.pause();
+      } else {
+        this.beatAt += performance.now() - this.pausedAt;
+        run?.play();
+      }
+    }
+    this.film?.hold?.(this.paused);
+    this.film?.pause(this.paused);
+  };
+  /** any re-cut or restart clears a hold: the new run starts rolling */
+  unhold() {
+    if (this.paused) {
+      this.paused = false;
+      this.film?.hold?.(false);
+      this.film?.pause(false);
+    }
+  }
+  /**
+  * SKIP A CHAPTER — by re-cutting, never by seeking.
+  *
+  * `from` moves to a chapter head, which changes the beat list, which
+  * changes the path, the cues and the sequence's name all at once. The
+  * region sees a different score and plays it from its head. Seeking the
+  * existing run would be the obvious alternative and it would be wrong:
+  * the lens is an integrator whose pose depends on where it has been, so
+  * a run dropped into the middle of itself arrives with the wrong
+  * velocity — the same reason `notes/sylva-one-world.md` calls the chaser
+  * seek-unsafe and means it.
+  */
+  goChapter = delta => {
+    const heads = this.chapterHeads;
+    const here = this.absoluteIndex;
+    let i = heads.findIndex((h, n) => here >= h && (heads[n + 1] ?? Infinity) > here);
+    if (i < 0) {
+      i = 0;
+    }
+    /* back, from more than a moment into a chapter, means this chapter's
+    head — the behaviour every transport control in the world has */
+    const restart = delta < 0 && here > heads[i];
+    const next = restart ? i : Math.max(0, Math.min(heads.length - 1, i + delta));
+    this.cutTo(heads[next]);
+  };
+  cutTo(index, hard = false) {
+    this.unhold();
+    if (this.exact) {
+      this.seek(this.beatStart(index));
+      return;
+    }
+    this.from = index;
+    this.beatIndex = 0;
+    this.ended = false;
+    this.playing = true;
+    this.lap += 1;
+    this.primedLap = this.lap;
+    this.settleAir(index);
+    this.applyBeat(this.all[index], true);
+    /* the re-cut score opens on a spliced first waypoint, so the goal
+    steps straight to this pose; the snap lands the lens beside it,
+    already carrying that shot's own speed */
+    this.snap(this.all[index].cam, hard ? undefined : this.tailFor(0), hard ? undefined : this.all[index].ticks * TICK);
+  }
+  /** an uncaught error anywhere becomes a visible line — a film that
+  *  dies silently mid-reel cannot be debugged from a chair */
+  trip = e => {
+    if (this.fault) {
+      return;
+    }
+    const err = e;
+    this.fault = String(err.message ?? err.reason ?? 'unknown fault').slice(0, 200);
+  };
+  prev = () => this.goChapter(-1);
+  next = () => this.goChapter(1);
+  key = e => {
+    if (e.metaKey || e.ctrlKey || e.altKey) {
+      return;
+    }
+    /* at the door, one key opens it — with the sound the film was made
+    with, since a keypress is as much a gesture as a click */
+    if (this.gate) {
+      if (e.key === ' ' || e.key === 'Enter') {
+        e.preventDefault();
+        this.begin(true);
+      }
+      return;
+    }
+    if (this.ended && (e.key === ' ' || e.key === 'Enter')) {
+      e.preventDefault();
+      this.replay();
+      return;
+    }
+    if (e.key === 'ArrowRight') {
+      e.preventDefault();
+      this.next();
+    } else if (e.key === 'ArrowLeft') {
+      e.preventDefault();
+      this.prev();
+    } else if (e.key === ' ' || e.key === 'k' || e.key === 'K') {
+      e.preventDefault();
+      this.toggle();
+    } else if (e.key === 'f' || e.key === 'F') {
+      this.screen();
+    } else if (e.key >= '1' && e.key <= '9') {
+      const head = this.chapterHeads[Number(e.key) - 1];
+      if (head !== undefined) {
+        this.pick(head);
+      }
+    } else if (e.key === '0' || e.key === 'Home') {
+      this.restart();
+    } else if (e.key === 'm' || e.key === 'M') {
+      this.hear();
+    } else if (e.key === 'c' || e.key === 'C' || e.key === 'Escape') {
+      this.toc();
+    } else if (e.key === 'v' || e.key === 'V') {
+      this.cc();
+    }
+  };
+  /**
+  * THE NARRATION, one file per beat.
+  *
+  * `assets/vo/<id>.mp3`, played on the beat's entrance and stopped
+  * when the beat changes. Per beat rather than one long track because
+  * chapter skip RE-CUTS the film: a single track would have to be sought,
+  * and a sought track against a re-cut score drifts inside a chapter.
+  *
+  * A missing file is silence, not an error. The film ships before the
+  * voice does, and the score has to be right either way. While a line
+  * plays the scene's own music ducks under it, which is the one piece of
+  * mixing that cannot wait for a mix.
+  */
+  voSrc(beat) {
+    return `${this.assets}vo/${beat.id}.mp3`;
+  }
+  /** ask the page to fetch and decode the line after this one, now */
+  primeNext(beat) {
+    const next = this.all[this.all.indexOf(beat) + 1];
+    if (next?.vo) {
+      this.film?.voicePrime(this.voSrc(next));
+    }
+  }
+  /**
+  * A BOUNDARY NEVER CLIPS THE VOICE — and every line has its own
+  * throat. One shared element made politeness impossible: however
+  * gently the old line was being faded, the new line's src swap
+  * guillotined it mid-word. So an interrupted line keeps its OWN
+  * element and fades there (~120ms, fast enough to read as a stop,
+  * slow enough that no waveform is cut mid-cycle) while the new line
+  * starts clean on a fresh one — the game-dialogue barge-in, which is
+  * what a chapter skip actually is. ("Stop at the next word" is the
+  * refinement this is built to take: an analyser watching for the
+  * inter-word trough before the fade — see docs/choreo-splices.md.)
+  */ /**
+     * A JOIN, EXHIBITED. Any seam as a pure overlay on whatever is playing —
+     * no beat change, no snap: the transition itself, on the living
+     * picture. What a cutting room's wall plate triggers.
+     */
+  preview = join => {
+    const film = this.film;
+    if (!film || !this.booted) {
+      return;
+    }
+    if ((join === 'blend' || join === 'melt') && film.dissolve(join)) {
+      this.freeze = '';
+      return;
+    }
+    if (join !== 'flash' && join !== 'sweep' && join !== 'whip') {
+      const shot = film.snapshot();
+      this.freeze = shot.length > 64 ? shot : '';
+      if (!this.freeze && join !== 'dip') {
+        return;
+      }
+    }
+    switch (join) {
+      case 'defocus':
+        this.play('defocus');
+        this.liveEl?.animate([{
+          filter: 'blur(9px)'
+        }, {
+          filter: 'blur(0px)'
+        }], {
+          duration: 700,
+          easing: 'cubic-bezier(0.3, 0, 0.3, 1)'
+        });
+        break;
+      case 'dip':
+        this.dipColor = '#0d0905';
+        this.play('dip');
+        break;
+      case 'iris':
+        {
+          const v = film.view();
+          const b = this.beat;
+          const pt = b.to ? film.project(...b.to) : undefined;
+          const cx = pt ? Math.max(12, Math.min(88, pt.x / v.w * 100)) : 50;
+          const cy = pt ? Math.max(12, Math.min(88, pt.y / v.h * 100)) : 46;
+          this.irisAt = `--ix:${cx.toFixed(1)}%;--iy:${cy.toFixed(1)}%`;
+          this.play('iris');
+          break;
+        }
+      case 'sweep':
+        this.lightSweep(film, this.beat);
+        break;
+      case 'whip':
+        this.whipUntil = performance.now() + 360;
+        break;
+      case 'cut':
+        break;
+      default:
+        this.play(join);
+    }
+  };
+  /** the wrapper the live picture sits in, for rack-defocus */
+  liveEl;
+  liveWrap = modifier(el => {
+    this.liveEl = el;
+    return () => {
+      if (this.liveEl === el) {
+        this.liveEl = undefined;
+      }
+    };
+  });
+  /**
+  * THE LIGHT SWEEP: the sun itself flares across the seam — swings
+  * high and past, then settles back onto whatever light the beat
+  * actually asked for. Fire-and-forget; the restore hands the key
+  * back to the beat's own sun (or the hour's).
+  */
+  lightSweep(film, beat) {
+    const t0 = performance.now();
+    const dur = 950;
+    const base = beat.sun ? {
+      az: beat.sun.az * RAD,
+      el: beat.sun.el * RAD
+    } : null;
+    const step = () => {
+      const f = (performance.now() - t0) / dur;
+      if (f >= 1 || !this.film) {
+        film.light(base);
+        return;
+      }
+      const swing = Math.sin(f * Math.PI);
+      film.light({
+        az: (base?.az ?? 0.4) + (1 - f) * 2.2 - 1.1,
+        el: (base?.el ?? 0.4) + swing * 0.3
+      });
+      requestAnimationFrame(step);
+    };
+    requestAnimationFrame(step);
+  }
+  /** the scene brought its own score — six of them, one per tower */ /** the line for this beat, at the level the session was mixed to */
+  speak(beat) {
+    this.film?.voice(this.voSrc(beat), this.voGain[beat.id] ?? 1);
+    this.primeNext(beat);
+  }
+  hush() {
+    this.film?.voiceStop();
+  }
+  hear = () => {
+    this.sound = !this.sound;
+    this.film?.sound(this.sound);
+    /* turning sound on mid-beat should speak the line you are LOOKING at,
+    not wait for the next one — otherwise the first thing anybody hears
+    is a chapter they have already read */
+    if (this.sound) {
+      this.speak(this.beat);
+    } else {
+      this.hush();
+    }
+  };
+  /**
+  * FROM THE TOP means the front door, not the first beat.
+  *
+  * A film restarted straight into its opening shot skips the one piece
+  * of the picture that says what it is — and the poster is a
+  * composition in its own right, with the building turning in the last
+  * of the light. So this clears everything the run has done and puts
+  * the door back up, with the lens seated where it opens.
+  */
+  restart = () => {
+    const film = this.film;
+    this.unhold();
+    this.freeze = '';
+    this.film?.voiceStop(120);
+    this.playing = false;
+    this.ended = false;
+    this.menu = false;
+    this.from = 0;
+    this.beatIndex = 0;
+    this.markSeated = false;
+    this.skyOn = 0;
+    this.skyA = 0;
+    this.dimNow = 0;
+    this.sent = undefined;
+    this.t = 0;
+    this.jumped = false;
+    this.seamAt = -1;
+    this.endSeam();
+    this.airedFor = -1;
+    this.scoreRun = null;
+    this.clipNow.clear();
+    this.clipRows = [];
+    this.clipFreezes.clear();
+    if (film) {
+      film.modelFade(1);
+      film.rain(null);
+      film.rim(null);
+      film.fade('mark', 0);
+      film.fade('chapter', 0);
+      for (let i = 0; i < 4; i++) {
+        film.clearTrace(`t${i}`);
+      }
+      film.duck(1);
+      /* the end card idled the page (nothing under it changes); the door
+      needs it drawing again, or the poster is the ending's last frame */
+      film.idle(false);
+      this.idled = false;
+      film.time(this.standing);
+      this.picture?.seat?.(film);
+      this.dressPoster(film);
+      this.snap((this.all[0] ?? EMPTY_BEAT).cam);
+    }
+    /* the run only exists while the film is booted; taking that away
+    ends it, and the door decides when the next one starts */
+    this.booted = false;
+    this.rolling = false;
+    this.gate = true;
+    this.posterAt = 0;
+    this.posterRaf ??= requestAnimationFrame(this.poster);
+  };
+  /** a choice made at the door before the scene finished loading */
+  wanted;
+  /** through the gate — on the click the audio policy was waiting for */
+  begin = withSound => {
+    if (this.booted) {
+      /* a gate over a film already running is a stale door, not a
+      request to boot twice — step aside and honour the sound choice */
+      this.gate = false;
+      if (withSound !== this.sound) {
+        this.hear();
+      }
+      return;
+    }
+    if (!this.film) {
+      /* the scene is still arriving: keep the choice, not the click */this.wanted = withSound;
+      return;
+    }
+    this.gate = false;
+    if (this.posterRaf !== undefined) {
+      cancelAnimationFrame(this.posterRaf);
+      this.posterRaf = undefined;
+    }
+    /* the door's choice is the page's state too — a muted begin that
+    leaves the page's own switch on plays every hit and bed under a
+    viewer who asked for silence */
+    this.sound = withSound;
+    this.film.sound(withSound);
+    if (this.exact) {
+      /* the clock opens at the linked beat's head; the door's flight is
+      the chaser's and an exact film cuts in instead */
+      const head = this.from;
+      this.from = 0;
+      this.t = this.beatStart(head);
+      this.beatIndex = head;
+      this.jumped = false;
+      this.seamAt = -1;
+      this.endSeam();
+      this.airedFor = -1;
+    }
+    const first = this.exact ? this.all[this.beatIndex] : this.beats[0] ?? EMPTY_BEAT;
+    this.settleAir(this.exact ? this.beatIndex : this.from);
+    this.applyBeat(first, true);
+    /* ...and the sky comes with it, NOT instantly: the evening of the
+    poster crossfades into the film's own morning across the launch */
+    this.applyAir(first, false);
+    /**
+    * THE CLICK IS ANSWERED IN THE SAME FRAME — and answered with the
+    * biggest move in the film. The lens does not cut to the opening
+    * shot; it FLIES there from wherever the poster's circuit had
+    * reached, on the stiff spring, so the first thing the viewer sees
+    * after pressing the button is the camera taking off. A door that
+    * opens onto a still frame reads as a page that did not hear you.
+    */
+    if (this.posterPose && !this.exact) {
+      this.now = {
+        ...this.posterPose
+      };
+      this.mid = {
+        ...this.posterPose
+      };
+      this.goal = {
+        ...(this.beats[0] ?? EMPTY_BEAT).cam
+      };
+      this.whipUntil = performance.now() + 1200;
+      for (const k of ['dolly', 'fx', 'fz', 'lookY', 'ox', 'pitch', 'yaw']) {
+        this.midV[k] = 0;
+        this.nowV[k] = 0;
+      }
+    } else {
+      this.snap(first.cam, this.tailFor(0), first.ticks * TICK);
+    }
+    /* THE DOOR STARTS THE SCORE. `playing` gates the Sequence, and a
+    restart leaves it false so the run ends with the door going up —
+    so the door has to turn it back on, or the second viewing stands
+    at its first pose forever with a play button that cannot help. */
+    this.playing = true;
+    this.paused = false;
+    this.booted = true;
+    this.wake();
+    this.lastTick = performance.now();
+    this.raf = requestAnimationFrame(this.frame);
+    /**
+    * ONE MORE PASS, on purpose. A region's first render collects no
+    * score — `firstRender` compiles an empty tree — so the run only
+    * exists after a SECOND pass, and that pass has to be paid for by a
+    * tracked write somewhere. Every cut so far happened to buy one
+    * within a second (a cue firing, a cycle stepping); a cut whose head
+    * beat writes nothing — one quiet beat, deep-linked — never did, and
+    * the film stood at its first pose forever. Bumping the lap edits
+    * the sequence's name, which is a real edit the region must collect.
+    */
+    window.setTimeout(() => {
+      this.lap += 1;
+      this.primedLap = this.lap;
+      this.rolling = true;
+    }, 0);
+  };
+  /** the whole film's running time, said the way a poster says it */
+  get runtime() {
+    const s = this.all.reduce((n, b) => n + b.ticks, 0) * TICK;
+    return `${Math.floor(s / 60)} min ${s % 60 ? `${s % 60} s` : ''}`.trim();
+  }
+  /**
+  * BACK IN FROM THE END CARD — a dissolve, not a flight.
+  *
+  * The film ends three hundred degrees around the building from where
+  * it opened, so tweening the lens home spins it like a globe. The
+  * ending cross-fades into the opening frame instead: the last frame
+  * is held as a still, the camera is PLACED at the opening pose behind
+  * it, and the still fades away.
+  */ /**
+     * BACK IN FROM THE END CARD — a hard reset, not a journey.
+     *
+     * The film ends three hundred degrees around the building, with the
+     * tower dissolved, the sky at golden hour, the rain gone and a chapter
+     * numeral on screen. Tweening any of that back to the opening is a
+     * confusing ten seconds in which nothing is either the ending or the
+     * beginning. So the ending is CLEARED: every overlay, the model, the
+     * weather, the world type, the traces and the lens all go back to
+     * their opening state in one frame, and the film starts.
+     */ /** the end card's WATCH AGAIN is the front door, not the first beat: the
+        *  choice of sound is made there, every time */
+  replay = () => {
+    this.restart();
+  };
+  /** the chapter menu. The film keeps running behind it, blurred: a
+  * menu that freezes the picture makes the picture feel like a file, and
+  * this one is meant to feel like a broadcast you are stepping around in */
+  static {
+    g(this.prototype, "menu", [tracked], function () {
+      return false;
+    });
+  }
+  #menu = (i(this, "menu"), void 0);
+  toc = () => {
+    this.menu = !this.menu;
+  };
+  /** every chapter, with the beat it starts at and whether we are in it */
+  get contents() {
+    const here = this.absoluteIndex;
+    const heads = this.chapterHeads;
+    return contents(this.all, this.chapters).map((c, i) => ({
+      ...c,
+      here: here >= c.head && here < (heads[i + 1] ?? this.all.length)
+    }));
+  }
+  pick = head => {
+    this.menu = false;
+    this.cutTo(head);
+  };
+  static {
+    setComponentTemplate(precompileTemplate("<div class=\"cf-page is-{{@name}}\n    {{if this.embed \"is-embed\"}}\n    {{if this.idle \"is-idle\"}}\">\n  {{!-- The stage is the film's glass: a click plays or pauses and a double\n      click goes full screen, as on any video. It holds the player's\n      buttons, so it can't be a button itself; the keyboard has the same\n      actions (Space or K, and F) and the player has a button for each. --}}\n  <div {{!-- template-lint-disable no-invalid-interactive --}} class=\"cf-stage is-grade-{{this.grade}} {{if this.subsOn \"has-subs\"}}\" {{this.mount}} {{on \"click\" this.tap}} {{on \"dblclick\" this.tapTwice}}>\n    {{!-- the live picture's own wrapper, so a rack-defocus can blur the\n    scene without touching the grade riding the iframe itself --}}\n    <div class=\"cf-live\" {{this.liveWrap}}>\n      <iframe class=\"cf-frame\" src={{this.src}} srcdoc={{this.srcdoc}} title={{this.frameTitle}} loading=\"eager\"></iframe>\n    </div>\n\n    {{!-- A scrim, not a box: each setting gets a soft directional lift\n    under it, which reads as light falling off and not as a panel. It is\n    a layer here only for a picture that cannot take it into its own\n    glass \u2014 where it can, the wash is inside the seam --}}\n    {{#unless this.washInGlass}}\n      <div class=\"cf-scrim cf-scrim-{{this.beat.mode}}\n          {{if this.beat.bare \"is-bare\"}}\" aria-hidden=\"true\"></div>\n    {{/unless}}\n\n    {{!-- THE TRANSITIONS: the outgoing frame, held, and whatever the\n    seam does to it --}}\n    <div class=\"cf-joins {{if this.joinOver \"is-over\"}}\" {{this.joinsWrap}}>\n      <Joins @kind={{this.joinKind}} @stamp={{this.joinStamp}} @freeze={{this.freeze}} @irisAt={{this.irisAt}} @dipColor={{this.dipColor}} @seekable={{this.exact}} @presentations={{this.presentations}} />\n    </div>\n    {{!-- THE CLOUD, driven per frame from --cf-cloud \u2014 again only for a\n    picture that cannot draw it in the glass --}}\n    {{#unless this.cloudInGlass}}\n      <div class=\"cf-cloud\" aria-hidden=\"true\"></div>\n    {{/unless}}\n\n    {{!-- THE DIM: a wash that comes in WITH an annotation and lifts with\n    it \u2014 dimming the plate is what a lecturer does when the slide goes\n    up --}}\n    {{#unless this.dimInGlass}}\n      <div class=\"cf-dim\" aria-hidden=\"true\" {{this.dimEl}}></div>\n    {{/unless}}\n\n    {{!-- the leader, the tether and the ring \u2014 what must connect DOM to\n    world --}}\n    <Track @wire={{this.trackEls}} />\n\n    {{#if this.booted}}\n      <Plate @beat={{this.beat}} @chapterN={{this.chapter.n}} @rolling={{this.rolling}} @typeAt={{this.typeAt}} @sayAt={{this.sayAt}} @glyphFit={{this.glyphFit}} @glyphTone={{this.glyphTone}} @mount={{this.plate}} />\n\n      <Stamp @step={{this.cycleStep}} @word={{this.stamp}} />\n\n      {{#each this.clipRows key=\"lane\" as |row|}}\n        <Clip @key={{row.key}} @spec={{row.spec}} @src={{row.src}} @freeze={{row.freeze}} @state={{row.state}} @lane={{row.lane}} @mount={{this.clipEl}} />\n      {{/each}}\n\n      {{#if (if this.rolling this.hasPhoto false)}}\n        <Insert @beat={{this.beat}} @src={{this.photoSrc}} @missing={{this.missing}} />\n      {{/if}}\n\n      {{#if this.subs}}\n        <Captions @line={{this.beat.vo}} />\n      {{/if}}\n\n      {{#if this.fault}}\n        <p class=\"cf-fault\">\u26A0 {{this.fault}}</p>\n      {{/if}}\n\n      {{#if this.railOn}}\n        <Rail @chapter={{this.chapter}} @marks={{this.transport}} @labels={{this.railLabels}} @readout={{this.railReadout}} @pick={{this.pick}} />\n      {{/if}}\n    {{/if}}\n\n    {{!-- THE SCORE. One camera step for the whole film, and one clipped\n    cue per beat \u2014 so the shot list and the script are the same object,\n    and the film is a pure function of one clock. It waits for the\n    scene: a rig on screen since the first pass was never inserted\n    into anything, and the camera step would resolve to no subject. --}}\n    {{#if this.booted}}\n      <Choreo @onCamera3D={{this.shot}} @onPerform={{this.dispatch}} @camera3dFrom={{this.openPose}} as |c|>\n        <i class=\"cf-rig\" {{motion id=\"rig\"}} {{this.grabScore c}} aria-hidden=\"true\"></i>\n        {{#if this.scoreOn}}\n          <c.Sequence @name={{this.filmName}}>\n            <c.Camera3D @name=\"film\" @through={{this.path}} @duration={{this.filmSeconds}} @ease=\"linear\" @settle={{this.settle}} @tension={{0.34}} />\n            {{!-- the type, the insert and the clip ride the score's clock:\n            one window per beat, driven, never played --}}\n            {{#each this.windows as |w|}}\n              <c.Attach @region={{w.region}} @at={{at \"film\"}} @delay={{w.start}} @duration={{w.length}} @end={{w.end}} @exact={{this.exact}} />\n            {{/each}}\n            {{!-- an exact film derives its beats from the clock; a cut\n            film is told them --}}\n            {{#unless this.exact}}\n              {{#each this.cues as |cue|}}\n                <c.Perform @at={{at \"film\"}} @delay={{cue.delay}} @action={{cue.action}} @target={{cue.index}} />\n              {{/each}}\n              <c.Perform @action=\"lap\" />\n            {{/unless}}\n          </c.Sequence>\n        {{/if}}\n      </Choreo>\n    {{/if}}\n\n    {{#if this.gate}}\n      <Gate @film={{this.handle}} as |f|>\n        {{yield f to=\"gate\"}}\n      </Gate>\n    {{/if}}\n\n    {{#if this.ended}}\n      <EndCard @film={{this.handle}} as |f|>\n        {{yield f to=\"end\"}}\n      </EndCard>\n    {{/if}}\n  </div>\n\n  {{#if this.menu}}\n    <Menu @title={{@menuTitle}} @sub={{if @menuSub @menuSub \"chapters\"}} @contents={{this.contents}} @pick={{this.pick}} />\n  {{/if}}\n\n  {{!-- the confirmation glyph: a play or a pause, once, in the middle\n  of the picture, gone in half a second --}}\n  {{#if this.burst}}\n    <Burst @kind={{this.burst}} @done={{this.burstDone}} />\n  {{/if}}\n\n  <Player @idle={{this.idle}} @away={{this.gate}} @live={{this.live}} @sound={{this.sound}} @loud={{this.loud}} @vol={{this.vol}} @volStyle={{this.volStyle}} @fade={{this.fade}} @full={{this.full}} @clock={{this.clock}} @duration={{this.duration}} @chapter={{this.chapter}} @subsOn={{this.subsOn}} @menu={{this.menu}} @debug={{this.debug}} @build={{this.build}} @playbar={{this.playbar}} @scrubAt={{this.scrubAt}} @tip={{this.tip}} @slider={{this.slider}} @trackWrap={{this.trackWrap}} @scrubDown={{this.scrubDown}} @scrubMove={{this.scrubMove}} @scrubUp={{this.scrubUp}} @scrubLeave={{this.scrubLeave}} @toggle={{this.toggle}} @prev={{this.prev}} @next={{this.next}} @hear={{this.hear}} @cc={{this.cc}} @toc={{this.toc}} @restart={{this.restart}} @screen={{this.screen}} />\n\n  {{!-- under the stage: whatever the film puts beneath its own picture \u2014\n  and its SCORE, when the film is written as a graph: the markers\n  compile to the table the engine runs --}}\n  {{yield this.takePicture to=\"picture\"}}\n  <FilmGraph @onCompile={{this.takeGraph}}>\n    {{yield this.handle}}\n  </FilmGraph>\n</div>\n\n<style>\n  /* THE FLAG, as an accent system. Two colours and nothing else:\n     the red of the hinomaru for the one thing that is happening NOW\n     \u2014 the playhead, the current chapter, the seal, the point a line\n     is drawn to \u2014 and a full white for type that has to win over a\n     picture. Everything else stays in the scene's own inks, so the\n     red never becomes decoration; it only ever means \"here\". */\n  .cf-page {\n    --cf-red: #bc002d;\n    --cf-white: #fffdf8;\n  }\n\n  .cf-page {\n    /* the film's ink, replaced per chapter from the scene's own\n       time-of-day palette by wear \u2014 these are the morning values,\n       which is also what the page opens on. --cf-shx/y is the cast\n       shadow's offset, written every frame from where the scene's key\n       light actually is (see follow). */\n    --cf-paper: #ecdcbc;\n    --cf-paper-a: rgba(236, 220, 188, 0.94);\n    --cf-paper-b: rgba(236, 220, 188, 0.76);\n    --cf-paper-c: rgba(236, 220, 188, 0);\n    --cf-ink: #2e2515;\n    --cf-ink2: #8b7c5c;\n    --cf-ink3: #3f3520;\n    --cf-accent: #a8621f;\n    /* THE ANNOTATION RED, and it is a different colour from the\n       editorial accent on purpose. The accent is ink \u2014 it belongs to\n       the page and takes the page's palette. This is a marker: it is\n       not in the scene, it never was, and it should look like\n       somebody drew on the photograph. Muted burnt orange over ochre\n       moss reads as part of the picture, which is exactly what an\n       annotation must not do. */\n    --cf-mark: #ff2412;\n    --cf-rule: #c2b18c;\n    /* The sun, in two numbers: cf-rake is the angle its light makes\n       across the frame, cf-shx/cf-shy the direction away from it.\n       They dress the things that are PHYSICALLY on the frame \u2014 the\n       photograph's own plate, the rake of a rule \u2014 and deliberately\n       not the type. An offset shadow behind a headline is a sticker\n       effect: it claims the letters are objects lying on the picture,\n       which they are not, and getting the angle right does not rescue\n       it. Type here earns its contrast from the scrim. */\n    /* TYPE. The display face is a serif on purpose. This film is set\n       beside mincho kanji and stands in front of a building, and a\n       wide-tracked geometric sans fights both \u2014 it is also the first\n       thing every deck reaches for, which is reason enough to leave\n       it alone. A warm old-style serif sits with the kanji instead of\n       arguing with it. The sans is kept for small mechanical labels\n       only, and its tracking is pulled well back from the point where\n       letterspaced caps start reading as a logo. */\n    /* THE INFORMATION LAYER IS SET IN THE BASILICA'S OWN VOICE.\n       The 2026 centenary identity is heavy grotesque capitals in flat\n       colour on stone paper \u2014 the programme, the plates, the timeline\n       of momentums are all cut that way, and a film about the same\n       building in the same year has no business inventing a second\n       typography for the same facts. Archivo is the closest open face\n       to it: a grotesque with real weight at 800 and none of the\n       geometric-sans blandness. The old-style serif stays for the\n       quote and the caption band, where a sentence is being spoken\n       rather than displayed. */\n    --cf-display: Archivo, 'Helvetica Neue', Helvetica, Arial, sans-serif;\n    --cf-caps: Archivo, 'Helvetica Neue', Helvetica, Arial, sans-serif;\n    --cf-serif:\n      'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype',\n      Palatino, Georgia, serif;\n    --cf-ui: Archivo, 'Helvetica Neue', Helvetica, Arial, sans-serif;\n    /* the identity's four colours, and the chapter's own (set by wear) */\n    --cf-c-red: #d8232a;\n    --cf-c-blue: #1268c3;\n    --cf-c-green: #0f7b62;\n    --cf-c-pink: #e5308a;\n    --cf-chap: #d8232a;\n    --cf-shx: 2px;\n    --cf-shy: 2px;\n    --cf-rake: 35deg;\n\n    position: relative;\n    min-height: 100svh;\n    background: var(--cf-paper);\n    display: flex;\n    flex-direction: column;\n    transition: background 900ms ease;\n    /* TYPE IS MEASURED AGAINST THE FILM, NOT THE WINDOW. Every size\n       below was written in vw, which is right only when the film\n       IS the window: put the same film in a 384px frame on a 1440px\n       page and every line is sized for the page it is sitting on.\n       An inline-size container makes cqw mean \"a hundredth of this\n       film's own width\" wherever it is mounted \u2014 the demo well, the\n       theater, a phone \u2014 so one set of numbers serves all of them.\n       Inline-size only: the height stays the stage's business, and\n       the stage below is its own container for exactly that. */\n    container-name: film;\n    container-type: inline-size;\n  }\n\n  /* THE STAGE NEVER GOES TALLER THAN IT IS WIDE, and on a phone that\n     is the whole difference between a film and a mess.\n\n     Every layout inside this box is written for a frame that is not\n     portrait: the type sets in a column beside the subject, the mark\n     draws a line across to it, the sky word runs off the right edge,\n     the rail is a rule. Handed a 9:16 viewport none of that has\n     anywhere to go \u2014 the picture crops to a slot, the column has no\n     room beside anything, and the shot the score composed is not the\n     shot on screen. Square is enough to hold all of it; the film\n     does not need a cinema ratio, it needs to not be a column.\n\n     The height is therefore capped at the width. That has to come\n     from the viewport rather than a percentage, because a percentage\n     max-height resolves against the parent's HEIGHT. Nothing changes\n     on a landscape screen, where 100cqw is comfortably taller than\n     the viewport and the cap never binds; on a phone the film plays\n     as a square, letterboxed on the film's own paper. */\n  .cf-stage {\n    position: relative;\n    height: 100svh;\n    /* the 1:1 floor, measured against the film's own width rather\n       than the window's \u2014 the same number, and right in a frame */\n    max-height: 100cqw;\n    flex: none;\n    overflow: hidden;\n    /* AND THE SHOT IS ITS OWN CONTAINER, on both axes. The rules\n       that compress the gate and stand the rail down were written\n       as max-height media queries, which ask about the WINDOW \u2014\n       and the window is not the film. A square film in an 844px\n       phone is 390px tall and needed every one of them; it got\n       none, and the door's stack ran straight through its own\n       buttons. Size containment is legal here because the height\n       above is definite, and it is what lets a height query mean\n       \"this shot is short\" rather than \"this phone is short\". */\n    container-name: shot;\n    container-type: size;\n  }\n\n  /* embedded there is nothing under the stage to hold it up, so the\n     letterbox is split evenly rather than all falling below */\n  .cf-page.is-embed {\n    justify-content: center;\n  }\n\n  .cf-live {\n    position: absolute;\n    inset: 0;\n  }\n\n  /* THE SCENE DOES NOT TAKE THE POINTER. It is a picture: it has no\n     controls of its own in film mode, and while it swallowed events\n     the wheel went to the iframe's document instead of this page \u2014\n     so the film filled the viewport and the wall plate underneath\n     could not be reached. */\n  .cf-frame {\n    pointer-events: none;\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    border: 0;\n    display: block;\n    /* the primary: contrast, saturation and lift, per grade */\n  }\n\n  /* ---- the grade ------------------------------------------------- *\n     Two passes, the way a colourist works: a primary on the picture\n     itself (above), then a split tone laid over it \u2014 warmth into the\n     highlights on one diagonal, coolness into the shadows on the\n     other. Soft-light rather than overlay, because overlay crushes this scene's\n     mid-tones and the whole point is to keep the moss and the plaster\n     legible while moving the mood underneath them.\n     ---------------------------------------------------------------- */\n\n  /* the five moods. CONTEXT opens warm and open; HISTORY is archival \u2014\n     desaturated, cool, contrastier, the look of a document rather than\n     a day; CONSTRUCTION goes clean and bright, nearly a blueprint;\n     DETAIL is rich and close; COMPARISON is a museum plate, flat and\n     even, because a comparison that flatters one subject is not one. */\n  .is-grade-amber {\n    --cf-lut: saturate(0.9) contrast(0.94) brightness(1.2);\n    --cf-warm: #ffd9a8;\n    --cf-cool: #b9c8e6;\n    --cf-grade-a: 0.3;\n    --cf-vig-a: 0.5;\n  }\n\n  .is-grade-iron {\n    --cf-lut: saturate(0.72) contrast(0.98) brightness(1.12) sepia(0.1);\n    --cf-warm: #e8d9c2;\n    --cf-cool: #9fb0c8;\n    --cf-grade-a: 0.4;\n    --cf-vig-a: 0.65;\n  }\n\n  /* MIDDAY, and it is meant to be the brightest thing in the film.\n     The construction chapter is the one that has to read as\n     information \u2014 you are watching a building get assembled \u2014 so it\n     is pushed up and opened out until it is nearly a working\n     drawing, and it earns its brightness by sitting between two\n     chapters that are deliberately heavier. Contrast between\n     chapters is a bigger effect than contrast inside one. */\n  .is-grade-chalk {\n    --cf-lut: saturate(0.88) contrast(0.96) brightness(1.34);\n    --cf-warm: #fffdf6;\n    --cf-cool: #cfdde8;\n    --cf-grade-a: 0.2;\n    --cf-vig-a: 0.22;\n  }\n\n  .is-grade-ink {\n    --cf-lut: saturate(0.98) contrast(1) brightness(1.16);\n    --cf-warm: #ffc9a1;\n    --cf-cool: #8fa0c9;\n    --cf-grade-a: 0.32;\n    --cf-vig-a: 0.68;\n  }\n\n  /* THE NIGHT: the one grade that pulls the picture DOWN. Every other\n     grade lifts, which is right for daylight; a lifted night is dusk. */\n  .is-grade-night {\n    --cf-lut: saturate(0.76) contrast(1.14) brightness(0.76);\n    --cf-warm: #c9c2b4;\n    --cf-cool: #8193b8;\n    --cf-grade-a: 0.5;\n    --cf-vig-a: 0;\n  }\n\n  /* WET. Rain is not simply the clear grade with drops in it: the\n     light comes from a lid rather than a source, so the picture\n     loses its warmth and most of its contrast, and the corners\n     close in. */\n  .is-grade-wet {\n    --cf-lut: saturate(0.72) contrast(0.92) brightness(0.94)\n      hue-rotate(-4deg);\n    --cf-warm: #cfd6dd;\n    --cf-cool: #7d8b9e;\n    --cf-grade-a: 0.44;\n    --cf-vig-a: 0.8;\n  }\n\n  .is-grade-plate {\n    --cf-lut: saturate(0.86) contrast(0.95) brightness(1.2);\n    --cf-warm: #f6e8d2;\n    --cf-cool: #c3c8bd;\n    --cf-grade-a: 0.18;\n    --cf-vig-a: 0.36;\n  }\n\n  /* SIX COUNTRIES, SIX LIGHTS. The comparison holds the framing and\n     the lens still so the BUILDING is the variable \u2014 but six towers\n     under one identical sky read as six models on one lawn, which\n     is a diorama, not a comparison. Each gets the tone its own\n     country is remembered in, at a strength you feel and cannot\n     quite name: the plate grade, bent a few degrees. */\n  .is-grade-c-jp {\n    --cf-lut: saturate(0.84) contrast(0.95) brightness(1.22);\n    --cf-warm: #f6e8d2;\n    --cf-cool: #bcc6bb;\n    --cf-grade-a: 0.2;\n    --cf-vig-a: 0.36;\n  }\n\n  .is-grade-c-cn {\n    --cf-lut: saturate(0.95) contrast(0.97) brightness(1.16) sepia(0.06);\n    --cf-warm: #ffd9a0;\n    --cf-cool: #c0a68e;\n    --cf-grade-a: 0.28;\n    --cf-vig-a: 0.44;\n  }\n\n  .is-grade-c-vn {\n    --cf-lut: saturate(0.92) contrast(0.94) brightness(1.18)\n      hue-rotate(-6deg);\n    --cf-warm: #eef0cd;\n    --cf-cool: #a7bda8;\n    --cf-grade-a: 0.26;\n    --cf-vig-a: 0.4;\n  }\n\n  .is-grade-c-th {\n    --cf-lut: saturate(1.02) contrast(0.93) brightness(1.3);\n    --cf-warm: #ffe9ad;\n    --cf-cool: #d3c6a0;\n    --cf-grade-a: 0.24;\n    --cf-vig-a: 0.3;\n  }\n\n  .is-grade-c-kh {\n    --cf-lut: saturate(0.9) contrast(0.99) brightness(1.14) sepia(0.12);\n    --cf-warm: #f2cfa4;\n    --cf-cool: #b9a184;\n    --cf-grade-a: 0.3;\n    --cf-vig-a: 0.5;\n  }\n\n  .is-grade-c-tr {\n    --cf-lut: saturate(0.8) contrast(0.96) brightness(1.26);\n    --cf-warm: #fdf3e2;\n    --cf-cool: #a9bacd;\n    --cf-grade-a: 0.22;\n    --cf-vig-a: 0.34;\n  }\n\n  /* the outgoing frame, swept off along the sun's diagonal behind a\n     FEATHERED edge \u2014 a mask, not a clip, because a wipe with a hard\n     edge is a screen transition and a wipe with a soft one is film */\n  /* THE SWEEP IS TWO TRANSFORMS, NOT A MASK MOVING. Sliding\n     mask-position repaints a full-resolution still every frame and\n     the wipe stutters \u2014 which is what a wipe must never do. So the\n     mask stays put on a sheet three frames wide, the SHEET slides\n     across the picture, and the still inside slides back by the same\n     amount so it never moves on screen. Both are transforms: the\n     compositor rasterises the masked sheet once and only translates. */\n  /**\n   * THE WIPE, AS A MOVING EDGE RATHER THAN A MOVING BOX.\n   *\n   * It used to be a box three frames wide carrying the gradient, with\n   * the image inside counter-moving so the edge appeared to cross. The\n   * travel was hardcoded up-left while the gradient's angle followed\n   * the SUN, so the two agreed only by luck: projected, the sweep was\n   * 0.92 of its intended distance at one rake, 0.16 at another, 0 at\n   * -27 degrees, and NEGATIVE past 0 \u2014 where the edge ran backwards\n   * and the outgoing frame grew back over the incoming one. Sizing the\n   * travel to the angle fixed the projection but not the geometry:\n   * WHICH corner of the box the still starts at also depends on the\n   * angle's quadrant, so at some rakes it began already uncovered.\n   *\n   * So nothing moves now. The element is the frame, the still fills\n   * it, and the two gradient stops are swept from before the frame to\n   * past it by one number. At p = 0 both stops are behind the frame,\n   * so it is wholly opaque; at p = 1 both are past it, so it is wholly\n   * gone. That is true at every angle, which the old one never was.\n   */\n  @property --cf-wipe-p {\n    syntax: '<number>';\n    initial-value: 0;\n    inherits: false;\n  }\n\n  .cf-swipe {\n    position: absolute;\n    inset: 0;\n    z-index: 0;\n    pointer-events: none;\n    will-change: mask-position, opacity;\n    /* the band is 24% of the gradient's line: soft enough to read as\n       a feathered edge, tight enough to read as an edge */\n    --cf-wipe-a: calc(var(--cf-wipe-p) * 150% - 45%);\n    mask-image: linear-gradient(\n      calc(var(--cf-rake, 35deg) + 72deg),\n      transparent var(--cf-wipe-a),\n      #000 calc(var(--cf-wipe-a) + 24%)\n    );\n    -webkit-mask-image: linear-gradient(\n      calc(var(--cf-rake, 35deg) + 72deg),\n      transparent var(--cf-wipe-a),\n      #000 calc(var(--cf-wipe-a) + 24%)\n    );\n    /* Star Wars speed: a wipe is a STATEMENT, and at two-thirds of a\n       second it reads as a glitch rather than a decision */\n    animation: cf-swipe 1150ms cubic-bezier(0.42, 0, 0.28, 1) forwards;\n  }\n\n  .cf-swipe img {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    display: block;\n  }\n\n  @keyframes cf-swipe {\n    0% {\n      --cf-wipe-p: 0;\n      opacity: 1;\n    }\n\n    88% {\n      opacity: 1;\n    }\n\n    100% {\n      --cf-wipe-p: 1;\n      opacity: 0;\n    }\n  }\n\n  .cf-melt {\n    position: absolute;\n    inset: 0;\n    z-index: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    pointer-events: none;\n    animation: cf-melt 1900ms cubic-bezier(0.4, 0, 0.5, 1) forwards;\n  }\n\n  @keyframes cf-melt {\n    0% {\n      opacity: 1;\n    }\n\n    22% {\n      opacity: 0.92;\n    }\n\n    100% {\n      opacity: 0;\n    }\n  }\n\n  .cf-blend {\n    position: absolute;\n    inset: 0;\n    z-index: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    pointer-events: none;\n    /* the still wears the same primary as the live frame under it,\n       so the dissolve is between two graded pictures \u2014 and it is a\n       PUSH dissolve: the old frame travels gently forward as it\n       thins, so the transition has a direction, not just a mix */\n    animation: cf-blend 520ms ease-out forwards;\n  }\n\n  @keyframes cf-blend {\n    0% {\n      opacity: 1;\n      transform: scale(1);\n    }\n\n    100% {\n      opacity: 0;\n      transform: scale(1.055);\n    }\n  }\n\n  /* the blur dissolve \u2014 and the freeze half of the rack-defocus */\n  .cf-blurout {\n    position: absolute;\n    inset: 0;\n    z-index: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    pointer-events: none;\n    animation: cf-blurout 640ms ease-out forwards;\n  }\n\n  @keyframes cf-blurout {\n    0% {\n      opacity: 1;\n      filter: blur(0);\n    }\n\n    100% {\n      opacity: 0;\n      filter: blur(13px);\n    }\n  }\n\n  /* the optical dissolve: lighten blend, so highlights linger */\n  .cf-luma {\n    position: absolute;\n    inset: 0;\n    z-index: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    pointer-events: none;\n    mix-blend-mode: lighten;\n    animation: cf-blend 700ms ease-in forwards;\n  }\n\n  /* two breaths of white, no freeze \u2014 the gun-crack */\n  .cf-flash {\n    position: absolute;\n    inset: 0;\n    z-index: 4;\n    pointer-events: none;\n    background: #fff8ec;\n    animation: cf-flash 300ms ease-out forwards;\n  }\n\n  @keyframes cf-flash {\n    0%,\n    22% {\n      opacity: 0.92;\n    }\n\n    100% {\n      opacity: 0;\n    }\n  }\n\n  /* the old shot closes in a circle onto the new shot's subject */\n  .cf-iris {\n    position: absolute;\n    inset: 0;\n    z-index: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    pointer-events: none;\n    clip-path: circle(150% at var(--ix, 50%) var(--iy, 50%));\n    animation: cf-iris 680ms cubic-bezier(0.45, 0, 0.3, 1) forwards;\n  }\n\n  @keyframes cf-iris {\n    0% {\n      clip-path: circle(150% at var(--ix, 50%) var(--iy, 50%));\n      opacity: 1;\n    }\n\n    92% {\n      opacity: 1;\n    }\n\n    100% {\n      clip-path: circle(0% at var(--ix, 50%) var(--iy, 50%));\n      opacity: 0;\n    }\n  }\n\n  .cf-dip {\n    position: absolute;\n    inset: 0;\n    z-index: 0;\n    pointer-events: none;\n  }\n\n  .cf-dip img {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    animation: cf-dip-frame 760ms linear forwards;\n  }\n\n  /* the freeze holds until the veil has fully closed, then drops\n     under cover \u2014 the incoming shot is never seen before the dip */\n  /* the outgoing frame is swapped for the incoming one IN THE DARK,\n     inside the veil's hold, so none of the change is ever on screen */\n  @keyframes cf-dip-frame {\n    0%,\n    37% {\n      opacity: 1;\n    }\n\n    41%,\n    100% {\n      opacity: 0;\n    }\n  }\n\n  .cf-dip i {\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    /* linear: the curve is in the stops, and it is not an ease */\n    animation: cf-dip-veil 760ms linear forwards;\n  }\n\n  /**\n   * A DIP CLOSES A SHUTTER; IT DOES NOT RAISE A BLIND.\n   *\n   * The veil is composited in sRGB, so an opacity of a leaves\n   * (1 - a)^2.2 of the LIGHT: a veil eased evenly to black is down to\n   * a fifth of the light by the halfway mark and then crawls, which is\n   * why the dip read as a lurch and then a wait rather than a fade.\n   * What a shutter does is take the LIGHT down smoothly, and the alpha\n   * that produces a smooth fall in light is this \u2014 nearly nothing for\n   * the first third, then a rush into black. The stops carry the\n   * curve, so the timing function is linear.\n   *\n   * Close over 34%, hold black for 10% (a dip is punctuation and the\n   * hold is the full stop), open over the remaining 56%: the way out\n   * is longer than the way in, which is the editor's convention and\n   * the reason a dip lands rather than bounces.\n   */\n  @keyframes cf-dip-veil {\n    0% {\n      opacity: 0;\n    }\n\n    6.8% {\n      opacity: 0.049;\n    }\n\n    13.6% {\n      opacity: 0.178;\n    }\n\n    17% {\n      opacity: 0.27;\n    }\n\n    20.4% {\n      opacity: 0.378;\n    }\n\n    23.8% {\n      opacity: 0.502;\n    }\n\n    27.2% {\n      opacity: 0.643;\n    }\n\n    30.6% {\n      opacity: 0.803;\n    }\n\n    34%,\n    44% {\n      opacity: 1;\n    }\n\n    49.6% {\n      opacity: 0.803;\n    }\n\n    55.2% {\n      opacity: 0.643;\n    }\n\n    60.8% {\n      opacity: 0.502;\n    }\n\n    66.4% {\n      opacity: 0.378;\n    }\n\n    72% {\n      opacity: 0.27;\n    }\n\n    77.6% {\n      opacity: 0.178;\n    }\n\n    88.8% {\n      opacity: 0.049;\n    }\n\n    100% {\n      opacity: 0;\n    }\n  }\n\n  /* the seams' own layer: no stacking context of its own, so a flash\n     still rides above the scrim and a still stays under it */\n  .cf-joins {\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n  }\n\n  /**\n   * A SEAM THAT COVERS THE FURNITURE (`@over=\"everything\"`). Above the\n   * type, the stamp, the rail, the inserts and the clips (1 to 4);\n   * level with the transport, which is later in the document and so\n   * stays in front of it; below the menu, the captions, the door and\n   * the fault banner (6 and up). A viewer must never lose the\n   * controls to a transition \u2014 and the layer takes no pointer events\n   * either way. The class is on only while the seam runs.\n   */\n  .cf-joins.is-over {\n    z-index: 5;\n  }\n\n  /* ---- the lens ------------------------------------------------- */\n  /* THE CLOUD IS A CAST SHADOW, not a filter over the lens. A band\n     swept across the whole frame reads as somebody dimming the\n     picture; what a cloud actually does is drop a soft, uneven\n     shape onto the land and the building, keep its edges out of\n     focus, and move. Two overlapping blobs on a wide plate,\n     multiplied over the scene and travelling with the sun's rake. */\n  .cf-cloud {\n    position: absolute;\n    /* -35%/-45% was a plate 1.7x the viewport each way, blurred at 26px\n       on every frame the sun moved. The gradients are soft already; the\n       blur added nothing you could see and a full-screen filter you could\n       feel. Smaller, unblurred, and hidden outright when there is no\n       cloud \u2014 an opacity of zero still costs a composited layer. */\n    inset: -12% -16%;\n    z-index: 1;\n    pointer-events: none;\n    /* IT WAS BLUE, AND BARCELONA IS NOT. A cloud passing over a warm\n       stone site takes the warmth out of the light; it does not tip the\n       whole frame to slate. These are a warm grey now, and at half the\n       strength \u2014 a shadow crossing the picture rather than a filter\n       laid over it. */\n    opacity: calc(var(--cf-cloud, 0) * 0.32);\n    background:\n      radial-gradient(\n        62% 40% at 32% 44%,\n        rgba(112, 100, 80, 0.4) 0%,\n        rgba(120, 108, 88, 0.24) 46%,\n        rgba(128, 118, 100, 0) 84%\n      ),\n      radial-gradient(\n        48% 32% at 68% 58%,\n        rgba(106, 96, 78, 0.3) 0%,\n        rgba(122, 110, 90, 0.16) 52%,\n        rgba(128, 118, 100, 0) 90%\n      );\n    mix-blend-mode: multiply;\n    transform: rotate(calc(var(--cf-rake, 35deg) * 0.4))\n      translate3d(\n        calc(var(--cf-cloud, 0) * -16%),\n        calc(var(--cf-cloud, 0) * 7%),\n        0\n      );\n  }\n\n  .is-cloudless .cf-cloud {\n    visibility: hidden;\n  }\n\n  /* ---- scrims: anchored to the caption, never banded across the\n     frame. A band wide enough to carry a lower third also washes out\n     whatever is standing in the middle of the shot \u2014 which on this\n     route is the building. ------------------------------------------ */\n  .cf-scrim {\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n    pointer-events: none;\n    transition: background 700ms ease;\n  }\n\n  /* a bare beat: no scrim at all \u2014 under a walk through the hours the\n     scrim's paper colour snaps with each theme, and a dish of colour\n     snapping behind the type is worse than no dish */\n  .cf-scrim.is-bare {\n    display: none;\n  }\n\n  .cf-scrim-lower {\n    background: radial-gradient(\n      128% 82% at 0% 112%,\n      var(--cf-paper-a) 0%,\n      var(--cf-paper-b) 36%,\n      var(--cf-paper-c) 72%\n    );\n  }\n\n  .cf-scrim-title {\n    background: radial-gradient(\n      112% 108% at 112% 116%,\n      var(--cf-paper-a) 0%,\n      var(--cf-paper-b) 34%,\n      var(--cf-paper-c) 70%\n    );\n  }\n\n  .cf-scrim-plate {\n    background: radial-gradient(\n      84% 104% at 110% 50%,\n      var(--cf-paper-a) 0%,\n      var(--cf-paper-b) 34%,\n      var(--cf-paper-c) 72%\n    );\n  }\n\n  .cf-scrim-point {\n    background: radial-gradient(\n      88% 92% at -10% 26%,\n      var(--cf-paper-a) 0%,\n      var(--cf-paper-b) 38%,\n      var(--cf-paper-c) 74%\n    );\n  }\n\n  .cf-dim {\n    position: absolute;\n    inset: 0;\n    z-index: 2;\n    pointer-events: none;\n    opacity: 0;\n    background: radial-gradient(\n      76% 66% at 50% 48%,\n      rgba(24, 18, 8, 0.16) 0%,\n      rgba(24, 18, 8, 0.34) 100%\n    );\n  }\n\n  /* ---- traces and callouts -------------------------------------- */\n  .cf-track {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    z-index: 2;\n  }\n\n  /* the marker glows, and the glow is doing real work: a thin line\n     over moss competes with the moss at exactly its own frequency,\n     and a soft bloom gives the eye a low-frequency edge to catch\n     first. (The traces on the building carry their own glow shell in\n     the scene now; this dresses only what is still on the glass.) */\n  /* THE GLOW COSTS A FRAME IN SAFARI. These two elements move every\n     frame \u2014 the leader is re-pointed at the building on each one \u2014 and\n     a stacked pair of drop-shadow filters is re-rasterised each time,\n     which WebKit charges far more for than Blink does. One tight\n     shadow gives the eye the same low-frequency edge to catch; the\n     wide one was doing very little over a dimmed plate anyway. */\n  .cf-leader,\n  .cf-track circle {\n    filter: drop-shadow(0 0 3px rgba(255, 36, 18, 0.9));\n  }\n\n  .cf-tether {\n    stroke: var(--cf-accent);\n    stroke-width: 1.4;\n    stroke-dasharray: 3 5;\n    opacity: 0;\n    transition: opacity 500ms ease;\n  }\n\n  .cf-leader {\n    stroke: var(--cf-mark);\n    stroke-width: 1.8;\n    stroke-dasharray: 5 4;\n    stroke-linecap: round;\n    opacity: 0;\n  }\n\n  .cf-track circle {\n    fill: none;\n    stroke: var(--cf-mark);\n    stroke-width: 2.6;\n    stroke-linecap: round;\n    opacity: 0;\n  }\n\n  /* ================================================================\n     RESPONSIVE. The film had not one media query in it: every size was\n     a viewport fraction, which keeps type in proportion but does not\n     change a LAYOUT. Two columns of an editorial plate do not become\n     a phone layout by getting smaller \u2014 they have to become one\n     column, the ghost numeral has to go, and the settings have to\n     stop being a corner of the frame and become its foot.\n     ================================================================ */\n\n  /* a laptop, or a window shared with something else */\n\n  /* a tablet, or a phone held the long way */\n\n  /* a phone */\n\n  /* a short window: the film is 16:9 in a letterbox and the vertical\n     rhythm, not the width, is what runs out */\n\n  /* someone who has asked for less movement gets the film without the\n     drift, the sway and the entrances \u2014 and still gets the film */\n  @media (prefers-reduced-motion: reduce) {\n    .cf-mg-mark,\n    .cf-mg-glyph,\n    .cf-gate-ghost,\n    .cf-mg-seal,\n    .cf-kicker::after {\n      animation-duration: 1ms !important;\n    }\n  }\n\n  /* ---- the front layer ------------------------------------------ */\n  /* THE WALL TEXT LEAVES BEFORE THE SEAM. Its own exit animation\n     runs when the next beat replaces it, which means the outgoing\n     setting is still on screen at the instant of the cut \u2014 so the\n     edit lands on a frame with two things happening in it. Half a\n     second of fade ahead of the change empties the corner first,\n     and the cut is then only ever about the picture. */\n  /* the ink follows the hour: the palette is swapped per theme by wear,\n     and under a walk through the day the type must not snap from black\n     to white \u2014 it turns with the light */\n  .cf-type,\n  .cf-type p,\n  .cf-type span {\n    transition: color 2400ms ease;\n  }\n\n  .cf-type {\n    position: absolute;\n    inset: 0;\n    z-index: 3;\n    opacity: var(--cf-type-a, 1);\n    pointer-events: none;\n    color: var(--cf-ink);\n    font-family: var(--cf-display);\n  }\n\n  .cf-block {\n    position: absolute;\n    max-width: min(46cqw, 660px);\n  }\n\n  /* a kicker rides a rule that draws itself out of the type \u2014 the\n     diagonal is the sun's, so the graphic furniture rakes the same\n     way the shadows do */\n  /* the eyebrow never wraps: 'THE TALLEST CHURCH ON EARTH' at this\n     tracking is wider than the block, and a wrapped kicker changes\n     the height of a bottom-anchored plate */\n  .cf-kicker > span {\n    white-space: nowrap;\n  }\n\n  .cf-kicker {\n    font-family: var(--cf-ui);\n    font-size: clamp(11px, 0.9cqw, 14px);\n    font-weight: 700;\n    letter-spacing: 0.11em;\n    color: var(--cf-chap);\n    margin: 0 0 14px;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n  }\n\n  /* the rule draws itself out of the kicker. It is a pseudo-element,\n     so Motion cannot own it \u2014 but the whole block is rebuilt on every\n     beat, which means a plain CSS animation runs from its first frame\n     each time and needs no retriggering. */\n  .cf-kicker::after {\n    content: '';\n    /* the rule takes the chapter's colour: on the centenary timeline\n       the rule, the dot and the heading are one colour, and that is\n       what makes it read as a system rather than as decoration */\n    background: var(--cf-chap);\n    /* the rule gives way to the words but never vanishes: a rule that\n       collapses to nothing on a long kicker is furniture that blinks\n       in and out with the string length */\n    flex: 1 1 26px;\n    min-width: 26px;\n    height: 2px;\n    transform-origin: left center;\n    animation: cf-rule 760ms 300ms cubic-bezier(0.22, 1, 0.36, 1) both;\n  }\n\n  .is-title .cf-kicker::after {\n    transform-origin: right center;\n  }\n\n  @keyframes cf-rule {\n    from {\n      transform: scaleX(0);\n    }\n\n    to {\n      transform: scaleX(1);\n    }\n  }\n\n  .is-point .cf-kicker::after,\n  .is-lower .cf-kicker::after {\n    max-width: 120px;\n  }\n\n  .cf-kanji {\n    font-family:\n      'Hiragino Mincho ProN', 'Yu Mincho', YuMincho, 'Noto Serif JP',\n      'Songti SC', serif;\n    font-size: min(132px, 8.4cqw);\n    line-height: 0.94;\n    letter-spacing: 0.04em;\n    margin: 0 0 18px;\n  }\n\n  .cf-read {\n    margin: 0 0 20px;\n    display: flex;\n    gap: 6px 16px;\n    align-items: baseline;\n    flex-wrap: wrap;\n  }\n\n  /* a flex child cannot shrink past its own content without this */\n  .cf-romaji,\n  .cf-gloss {\n    min-width: 0;\n  }\n\n  /* on a marked beat the reading is the largest thing in the block,\n     because the term itself is out in the scene */\n  .cf-block:not(:has(.is-glyph)) .cf-romaji {\n    font-size: clamp(17px, 1.5cqw, 24px);\n    letter-spacing: 0.2em;\n  }\n\n  .cf-block:not(:has(.is-glyph)) .cf-gloss {\n    font-size: clamp(15px, 1.2cqw, 19px);\n  }\n\n  .cf-romaji {\n    font-family: var(--cf-ui);\n    font-size: clamp(11px, 0.94cqw, 14px);\n    font-weight: 700;\n    letter-spacing: 0.11em;\n    color: var(--cf-chap);\n  }\n\n  .cf-gloss {\n    font-family: var(--cf-ui);\n    font-size: clamp(12px, 0.98cqw, 15px);\n    font-weight: 400;\n    letter-spacing: 0.01em;\n    color: var(--cf-ink3);\n  }\n\n  /* the planes are the host's to move; the type on them is Motion's */\n  .cf-plane {\n    will-change: transform;\n  }\n\n  /* a phrase is a HEADLINE, not body copy: it is on screen for two\n     seconds and read at a glance, so it is set at the size a glance\n     needs and it never runs past two lines */\n  .cf-say {\n    margin: 0 0 12px;\n    font-family: var(--cf-display);\n    /* set in the identity's capitals, but a cue is still a caption:\n       at 30px in heavy caps three of them fill a frame and the\n       picture becomes the background to a poster */\n    font-size: clamp(14px, 1.28cqw, 22px);\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.012em;\n    line-height: 1.16;\n    color: var(--cf-ink);\n    /* a cue is a phrase: wide enough that most set on ONE line.\n       26ch was a CJK measure and these run to 34 characters, so the\n       measure comes from the longest of them \u2014 and the break is left\n       to pretty, because balance moves the break around as the\n       string changes, which is the flicker between a one-line and a\n       two-line setting. */\n    max-width: min(38ch, 34cqw);\n    text-wrap: pretty;\n  }\n\n  .cf-say:last-child {\n    margin-bottom: 0;\n  }\n\n  /* tall scripts (Thai, Khmer) at kanji size collide with their\n     neighbours; scale the whole set box and give the marks headroom */\n  .cf-kanji.is-tall {\n    zoom: 0.58;\n    line-height: 1.5;\n  }\n\n  /* ---- lines that DO what they SAY ------------------------------ *\n     Behavior animations on the inner span, addressed per line by the\n     film (`.sx-<beat>-<n>`). They run the length of the beat, so\n     whenever the delivery reveals a line it is already mid-behavior \u2014\n     never waiting, never done. Two gestures ship here: a plumb drop\n     and a heavy settle. */\n  .cf-sayx {\n    display: inline-block;\n  }\n\n  @keyframes cf-plumb {\n    0% {\n      transform: translateY(-16px) scaleY(1.18);\n    }\n\n    100% {\n      transform: translateY(0) scaleY(1);\n    }\n  }\n\n  /* \"Flaring at the foot\" \u2014 the line itself flares, tracking wide\n     from its left foot for the whole shot, the batter's own curve */\n  /* (the old per-line behaviours are gone: one of them animated\n     letter-spacing on an inline-block, which re-wrapped the line it\n     was in halfway through a shot) */\n\n  @keyframes cf-sink {\n    0% {\n      transform: translateY(-14px);\n    }\n\n    34% {\n      transform: translateY(2px);\n    }\n\n    100% {\n      transform: translateY(0);\n    }\n  }\n\n  /* the four ways a beat is set. A title is ranged right against the\n     frame's edge with the tower in the other half; a lower third sits\n     bottom-left; a plate is a slab in the right third; a point is a\n     caption with a leader running out of it. */\n  .cf-block.is-title {\n    right: 6%;\n    bottom: 15%;\n    text-align: right;\n    max-width: min(48cqw, 700px);\n    /* poster size at the start, the house size once the lens has\n       arrived: the same lean as every block, times the title's own\n       scale, from the corner it hangs from */\n    transform-origin: 100% 100%;\n    transform: translate3d(\n        calc(var(--cf-lx, 0) * -9px),\n        calc(var(--cf-ly, 0) * -5px),\n        0\n      )\n      scale(calc(1.42 - 0.42 * var(--cf-title-k, 1)));\n  }\n\n  /* the opening's hierarchy: the name, then its reading, then the\n     cues a step back in the ink \u2014 a poster, not a paragraph */\n  .is-title .cf-kanji {\n    margin-bottom: 26px;\n  }\n\n  .is-title .cf-read {\n    justify-content: flex-end;\n    margin-bottom: 28px;\n    gap: 18px;\n  }\n\n  .is-title .cf-romaji {\n    font-size: clamp(15px, 1.3cqw, 23px);\n    letter-spacing: 0.3em;\n  }\n\n  .is-title .cf-gloss {\n    font-size: clamp(15px, 1.25cqw, 22px);\n  }\n\n  .is-title .cf-say {\n    max-width: 30ch;\n    margin-bottom: 6px;\n    color: var(--cf-ink2);\n    font-size: min(34px, 1.95cqw);\n  }\n\n  .is-title .cf-kicker {\n    flex-direction: row-reverse;\n  }\n\n  .is-title .cf-line {\n    margin-left: auto;\n  }\n\n  .is-title .cf-kanji {\n    font-size: min(190px, 11cqw);\n  }\n\n  .cf-block.is-lower {\n    left: 5.5%;\n    bottom: 11%;\n  }\n\n  /* captions take the foot of the frame, so the settings that live\n     down there move up out of their way rather than sit under them */\n  .has-subs .cf-block.is-lower {\n    bottom: 21%;\n  }\n\n  /* the plate steps out of the caption band's way \u2014 and stepping is\n     what it should not do, so it moves over a beat, not a frame */\n  .cf-block {\n    transition: bottom 420ms cubic-bezier(0.22, 1, 0.36, 1);\n  }\n\n  .has-subs .cf-block.is-title {\n    bottom: 24%;\n  }\n\n  /* the plate is centred on the frame, so a caption band eats its last\n     cue rather than sitting under it */\n  .has-subs .cf-block.is-plate {\n    top: 44%;\n  }\n\n  /* THE PLATE, which is the one setting that is a designed object\n     rather than a caption. Two columns: the term set VERTICALLY down\n     the right edge, the way it would be on a museum label or a\n     hanging scroll, and the reading and the phrases in a column\n     beside it. A rule between them draws itself down as the plate\n     lands. Ranged type in a corner was never wrong exactly \u2014 it was\n     just nothing, and this chapter's beats are the ones that hold\n     longest, so they are the ones that can least afford nothing. */\n  .cf-block.is-plate {\n    right: 5.5%;\n    top: 50%;\n    transform: translateY(-50%);\n    display: grid;\n    /* minmax(0,\u2026) or the cue column cannot shrink and the word wins */\n    grid-template-columns: minmax(0, auto) auto;\n    justify-content: end;\n    column-gap: min(30px, 1.8cqw);\n    align-items: start;\n    /* the word takes a column of its own, so the block has to be wide\n       enough for both it and a cue line that is not two words per row\n       \u2014 and no wider: at two thirds of the frame the cue column began\n       over the subject, and a plate is a label beside the thing */\n    max-width: min(50cqw, 760px);\n  }\n\n  .is-plate .cf-plane {\n    grid-column: 1;\n  }\n\n  /* THE CUES RANGE AGAINST THE RULE. The block hugs the right edge and\n     everything in it gathers toward the word, so the plate is one\n     object at the side of the frame and the picture keeps its left. */\n  .is-plate .cf-plane:not(.is-glyph) {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    text-align: right;\n  }\n\n  .is-plate .cf-plane:not(.is-glyph) .cf-kicker {\n    align-self: stretch;\n  }\n\n  .is-plate .cf-read {\n    justify-content: flex-end;\n  }\n\n  .is-plate .cf-plane.is-glyph {\n    grid-column: 2;\n    grid-row: 1 / -1;\n    border-right: 2px solid var(--cf-accent);\n    padding-right: min(26px, 1.5cqw);\n    transform-origin: top center;\n    animation: cf-rule-down 820ms 240ms cubic-bezier(0.22, 1, 0.36, 1) both;\n  }\n\n  /* the mask draws the rule DOWN; it must never clip sideways \u2014 the\n     glyph plane leans with the pointer, and a mask flush with the box\n     shaved the leaned strokes off the left edge as a hairline */\n  @keyframes cf-rule-down {\n    from {\n      clip-path: inset(0 -40px 100% -40px);\n    }\n\n    to {\n      clip-path: inset(0 -40px -4% -40px);\n    }\n  }\n\n  .is-plate .cf-kanji {\n    writing-mode: vertical-rl;\n    margin: 0;\n    /* the column never grows past the frame: whichever is smaller,\n       the designed size or the height each glyph can have and still\n       leave the set inside the picture */\n    font-size: min(min(88px, 5.4cqw), calc(62svh / var(--cf-glyphs, 3)));\n    letter-spacing: 0.1em;\n    line-height: 1;\n  }\n\n  .is-plate .cf-kicker {\n    margin-bottom: 18px;\n  }\n\n  /* the ghost is only ever behind a plate \u2014 everywhere else the frame\n     is already carrying the building */\n  .cf-ghost {\n    display: none;\n  }\n\n  /* THE PLANES LEAN. Each layer takes the pointer at its own depth \u2014\n     the ghost furthest, the big glyph next, the reading lines least\n     \u2014 so the type stack has air in it rather than being one sheet\n     of glass in front of a picture. */\n  .cf-block {\n    transform: translate3d(\n      calc(var(--cf-lx, 0) * -9px),\n      calc(var(--cf-ly, 0) * -5px),\n      0\n    );\n  }\n\n  .cf-plate .cf-ghost {\n    transform: translateY(-50%)\n      translate3d(\n        calc(var(--cf-lx, 0) * -26px),\n        calc(var(--cf-ly, 0) * -14px),\n        0\n      );\n  }\n\n  .cf-kanji {\n    transform: translate3d(\n      calc(var(--cf-lx, 0) * -15px),\n      calc(var(--cf-ly, 0) * -8px),\n      0\n    );\n  }\n\n  /* the ghost NUMERAL keeps its old treatment: a filled slab of ink\n     at a whisper of opacity, behind the plate. It is a page\n     furniture mark, not type in the world \u2014 the hollow treatment\n     belongs to the glyphs that share air with the building. */\n  .cf-plate .cf-ghost {\n    display: block;\n    position: absolute;\n    right: 3%;\n    top: 50%;\n    transform: translateY(-50%);\n    font-family: var(--cf-ui);\n    font-size: min(460px, 30cqw);\n    font-weight: 700;\n    line-height: 0.8;\n    letter-spacing: -0.04em;\n    color: var(--cf-ink);\n    opacity: calc(0.045 * var(--cf-ghost-a, 1));\n    pointer-events: none;\n    z-index: -1;\n  }\n\n  .cf-block.is-point {\n    left: 5.5%;\n    top: 18%;\n    max-width: min(36cqw, 520px);\n  }\n\n  .is-point .cf-kanji {\n    font-size: min(104px, 6.6cqw);\n  }\n\n  /* ---- clips ------------------------------------------------------ *\n     a video, a still or a freeze over the picture: full frame under the\n     scrim and the type, or an inset like the photograph */\n  .cf-clip {\n    position: absolute;\n    pointer-events: none;\n  }\n\n  .cf-clip.is-cover {\n    inset: 0;\n    z-index: 1;\n  }\n\n  .cf-clip.is-cover figure {\n    position: absolute;\n    inset: 0;\n    margin: 0;\n  }\n\n  .cf-clip.is-cover video,\n  .cf-clip.is-cover img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  .cf-clip.is-cover figcaption {\n    position: absolute;\n    left: 5.5%;\n    bottom: 6%;\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    font-family: var(--cf-ui);\n    color: #f7f0e0;\n    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);\n  }\n\n  .cf-clip.is-inset {\n    z-index: 4;\n  }\n\n  /**\n   * A PIP IS A LAYER, not a photograph. No card, no rule, no caption\n   * furniture \u2014 the score places it (`left/top/width` in percent of\n   * the frame, written inline) and it carries nothing but its own\n   * media and a corner radius. It sits under the type, so a lower\n   * third still wins over it, and over the picture and its scrim.\n   */\n  .cf-clip.is-pip {\n    z-index: 2;\n    inset: 0;\n  }\n\n  .cf-clip.is-pip figure {\n    position: absolute;\n    margin: 0;\n    overflow: hidden;\n    line-height: 0;\n    box-shadow: calc(var(--cf-shx) * 3) calc(var(--cf-shy) * 3) 30px\n      rgba(20, 14, 4, 0.34);\n  }\n\n  .cf-clip.is-pip video,\n  .cf-clip.is-pip img {\n    display: block;\n    width: 100%;\n    height: auto;\n  }\n\n  .cf-clip.is-inset figure {\n    position: absolute;\n    right: 5.5%;\n    top: 12%;\n    margin: 0;\n    width: min(30cqw, 340px);\n    background: var(--cf-paper);\n    padding: 10px 10px 8px;\n    border: 1px solid var(--cf-rule);\n    box-shadow: calc(var(--cf-shx) * 4) calc(var(--cf-shy) * 4) 26px\n      rgba(38, 28, 10, 0.26);\n  }\n\n  .cf-clip.is-inset video,\n  .cf-clip.is-inset img {\n    display: block;\n    width: 100%;\n    height: auto;\n  }\n\n  .cf-clip.is-inset figcaption {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    padding-top: 8px;\n    font-family: var(--cf-ui);\n  }\n\n  .cf-clip-cap {\n    font-size: 12px;\n    font-weight: 700;\n    letter-spacing: 0.12em;\n  }\n\n  .cf-clip-cr {\n    font-size: 10px;\n    letter-spacing: 0.06em;\n    opacity: 0.75;\n  }\n\n  /* ---- the photograph -------------------------------------------- */\n  .cf-photo {\n    position: absolute;\n    z-index: 4;\n    pointer-events: none;\n  }\n\n  .cf-photo figure.is-lower,\n  .cf-photo figure.is-title,\n  .cf-photo figure.is-point {\n    position: absolute;\n    right: 5.5%;\n    top: 12%;\n  }\n\n  .cf-photo figure.is-plate {\n    position: absolute;\n    left: 5.5%;\n    top: 12%;\n  }\n\n  .cf-photo figure {\n    margin: 0;\n    width: min(30cqw, 340px);\n    background: var(--cf-paper);\n    padding: 10px 10px 8px;\n    border: 1px solid var(--cf-rule);\n    box-shadow: calc(var(--cf-shx) * 4) calc(var(--cf-shy) * 4) 26px\n      rgba(38, 28, 10, 0.26);\n  }\n\n  .cf-photo img {\n    display: block;\n    width: 100%;\n    height: auto;\n    filter: saturate(0.86) contrast(1.04);\n  }\n\n  .cf-photo figcaption {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    padding-top: 8px;\n    font-family: var(--cf-ui);\n  }\n\n  .cf-photo-cap {\n    font-size: 12px;\n    font-weight: 700;\n    letter-spacing: 0.12em;\n    color: var(--cf-ink);\n  }\n\n  .cf-photo-cr {\n    font-size: 10px;\n    letter-spacing: 0.06em;\n    color: var(--cf-ink2);\n  }\n\n  .is-dark .cf-subs {\n    color: #1a1408;\n    background: rgba(238, 228, 204, 0.82);\n  }\n\n  .cf-subs {\n    position: absolute;\n    left: 50%;\n    bottom: 3%;\n    transform: translateX(-50%);\n    z-index: 6;\n    transition: bottom 360ms ease;\n    margin: 0;\n    max-width: 60ch;\n    text-align: center;\n    font-family: var(--cf-serif);\n    font-size: 17px;\n    line-height: 1.5;\n    color: #f7efdd;\n    background: rgba(20, 15, 6, 0.66);\n    padding: 9px 18px;\n  }\n\n  /* while the transport is up the caption sits above it, and drops\n     back to the foot of the frame when the bar leaves */\n  .cf-page:not(.is-idle) .cf-subs {\n    bottom: 104px;\n  }\n\n  /* ---- the rail -------------------------------------------------- */\n  /* ONE LINE: the numeral, the chapter's name and the rule, left to\n     right \u2014 the rule is not a second row under the title */\n  .cf-rail {\n    flex-wrap: nowrap;\n    position: absolute;\n    left: 5.5%;\n    top: 6%;\n    z-index: 3;\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    font-size: 11px;\n    font-weight: 700;\n    letter-spacing: 0.17em;\n    color: var(--cf-ink3);\n    font-family: var(--cf-ui);\n  }\n\n  .cf-rail-n {\n    font-size: 22px;\n    font-weight: 800;\n    letter-spacing: 0.02em;\n    color: var(--cf-chap);\n  }\n\n  .cf-rail-segs {\n    display: flex;\n    gap: 5px;\n    width: 240px;\n  }\n\n  /* ---- the year's own timeline ----------------------------------\n     A rule the width of the chapter strip, the run so far filled in\n     the chapter's colour, a dot on the head and the year riding above\n     it. Tabular figures so the numeral does not jitter as it counts,\n     and the whole thing is one row under the chapter line so the\n     corner stays a single object. */\n  /* THE RULE IS THE FILM'S LENGTH, so it should read as a long\n     distance: 240px made a century and a half look like a widget.\n     It runs to nearly half the frame now, and the chapter dots have\n     room to sit at their own years without touching. */\n  .cf-years {\n    position: relative;\n    flex: none;\n    height: 34px;\n    margin-left: 34px;\n    width: min(620px, 42cqw);\n  }\n\n  .cf-years-rule,\n  .cf-years-fill {\n    position: absolute;\n    left: 0;\n    top: 14px;\n    height: 2px;\n    background: var(--cf-rule);\n  }\n\n  .cf-years-rule {\n    right: 0;\n  }\n\n  .cf-years-fill {\n    width: calc(5px + var(--cf-head, 0) * (100% - 10px));\n    background: var(--cf-chap);\n    transition: width 220ms linear;\n  }\n\n  .cf-years-tick {\n    position: absolute;\n    top: 11px;\n    width: 1px;\n    height: 8px;\n    background: var(--cf-rule);\n  }\n\n  /* the chapters, as dots at the years they open. Unbuilt they are the\n     rule's own colour; passed, they take the chapter's. */\n  .cf-years-ch {\n    position: absolute;\n    top: 10px;\n    z-index: 2;\n    appearance: none;\n    border: 0;\n    padding: 0;\n    width: 10px;\n    height: 10px;\n    margin-left: -5px;\n    border-radius: 50%;\n    background: var(--cf-rule);\n    cursor: pointer;\n    pointer-events: auto;\n    transition:\n      background 300ms ease,\n      transform 200ms ease;\n  }\n\n  .cf-years-ch.is-done {\n    background: var(--cf-chap);\n  }\n\n  .cf-years-ch.is-here {\n    background: var(--cf-chap);\n    transform: scale(1.34);\n  }\n\n  .cf-years-ch:hover {\n    transform: scale(1.5);\n  }\n\n  .cf-years-now {\n    position: absolute;\n    top: 20px;\n    left: calc(5px + var(--cf-head, 0) * (100% - 10px));\n    transform: translateX(-50%);\n    font-family: var(--cf-ui);\n    font-weight: 800;\n    font-size: 15px;\n    letter-spacing: 0.01em;\n    font-variant-numeric: tabular-nums;\n    color: var(--cf-chap);\n    white-space: nowrap;\n    transition: left 220ms linear;\n  }\n\n  .cf-years-now::after {\n    content: '';\n    position: absolute;\n    left: 50%;\n    /* rule top 14px, rule 2px, dot 10px \u2192 -10 puts the dot's centre\n       on the rule's centre exactly */\n    top: -10px;\n    width: 10px;\n    height: 10px;\n    margin-left: -5px;\n    border-radius: 50%;\n    background: var(--cf-chap);\n  }\n\n  .cf-years-a,\n  .cf-years-b {\n    position: absolute;\n    top: 0;\n    font-family: var(--cf-ui);\n    font-style: normal;\n    font-size: 9px;\n    font-weight: 600;\n    letter-spacing: 0.14em;\n    color: var(--cf-ink2);\n  }\n\n  .cf-years-a {\n    left: 0;\n  }\n\n  .cf-years-b {\n    right: 0;\n  }\n\n  /* each segment is a 13px-tall click target drawing a hairline\n     track with its fill on top; the current chapter's bar thickens */\n  .cf-rail-seg {\n    appearance: none;\n    position: relative;\n    border: 0;\n    height: 13px;\n    padding: 0;\n    background: transparent;\n    cursor: pointer;\n    pointer-events: auto;\n  }\n\n  .cf-rail-seg::after {\n    content: '';\n    position: absolute;\n    inset: 5px 0 auto;\n    height: 3px;\n    background: var(--cf-rule);\n  }\n\n  .cf-rail-seg i {\n    position: absolute;\n    left: 0;\n    top: 5px;\n    height: 3px;\n    z-index: 1;\n    background: var(--cf-chap);\n    transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1);\n  }\n\n  .cf-rail-seg.is-here i {\n    top: 4px;\n    height: 5px;\n  }\n\n  /* THE DOT ON THE RULE. The centenary programme draws its timeline as\n     a line with a filled dot at each momentum; the film's chapter\n     strip is the same object, so it is drawn the same way. */\n  .cf-rail-seg::before {\n    content: '';\n    position: absolute;\n    left: -1px;\n    top: 2px;\n    z-index: 2;\n    width: 9px;\n    height: 9px;\n    border-radius: 50%;\n    background: var(--cf-rule);\n    transition: background 300ms ease;\n  }\n\n  .cf-rail-seg.is-here::before {\n    background: var(--cf-chap);\n  }\n\n  .cf-rail-seg:hover::after {\n    background: var(--cf-ink2);\n  }\n\n  .cf-fault {\n    position: absolute;\n    left: 5.5%;\n    bottom: 4%;\n    z-index: 9;\n    margin: 0;\n    padding: 8px 12px;\n    background: #2a0a06;\n    color: #ffb4a0;\n    font:\n      12px/1.4 ui-monospace,\n      monospace;\n    border-radius: 8px;\n    max-width: 80%;\n  }\n\n  .cf-rig {\n    position: absolute;\n    width: 0;\n    height: 0;\n  }\n\n  /* ---- the disc menu --------------------------------------------- */\n  /* the sheet belongs to the picture: it scrims the scene and its\n     transport, and leaves the wall plate below the film alone \u2014\n     a menu that dims an article is a modal, not a disc menu */\n  .cf-menu {\n    position: absolute;\n    inset: 0 0 auto 0;\n    height: 100svh;\n    z-index: 6;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: rgba(28, 22, 10, 0.52);\n    backdrop-filter: blur(2px);\n  }\n\n  .cf-menu-in {\n    background: var(--cf-paper);\n    border: 1px solid var(--cf-rule);\n    padding: 34px 40px 26px;\n    min-width: min(460px, 84cqw);\n    max-width: min(640px, 92cqw);\n    box-shadow: 0 30px 70px rgba(30, 22, 8, 0.34);\n    font-family: var(--cf-ui);\n  }\n\n  .cf-menu-head {\n    margin: 0;\n    font-size: 13px;\n    font-weight: 800;\n    letter-spacing: 0.42em;\n    color: var(--cf-ink);\n  }\n\n  .cf-menu-sub {\n    margin: 4px 0 22px;\n    font-size: 12px;\n    color: var(--cf-ink2);\n    letter-spacing: 0.06em;\n  }\n\n  .cf-menu-list {\n    list-style: none;\n    margin: 0 0 18px;\n    padding: 0;\n  }\n\n  .cf-menu-item {\n    appearance: none;\n    background: transparent;\n    border: 0;\n    border-top: 1px solid var(--cf-rule);\n    width: 100%;\n    display: flex;\n    align-items: baseline;\n    gap: 16px;\n    padding: 13px 4px;\n    font: inherit;\n    color: var(--cf-ink);\n    cursor: pointer;\n    text-align: left;\n  }\n\n  .cf-menu-item:hover {\n    color: var(--cf-accent);\n  }\n\n  .cf-menu-item.is-here {\n    color: var(--cf-accent);\n    font-weight: 700;\n  }\n\n  .cf-menu-n {\n    font-size: 12px;\n    letter-spacing: 0.16em;\n    color: var(--cf-accent);\n    min-width: 2.4em;\n  }\n\n  .cf-menu-t {\n    font-size: 17px;\n    letter-spacing: 0.1em;\n    font-weight: 600;\n    flex: 1;\n    min-width: 0;\n  }\n\n  .cf-menu-d {\n    font-size: 11px;\n    letter-spacing: 0.1em;\n    color: var(--cf-ink2);\n  }\n\n  .cf-menu-keys {\n    margin: 0;\n    font-size: 11px;\n    letter-spacing: 0.1em;\n    color: var(--cf-ink2);\n  }\n\n  /* ---- controls -------------------------------------------------- */\n  /* ---- the player ------------------------------------------------ *\n   * A chaptered playhead in the film's own materials: gaps between\n   * the chapters, seal red for what has played, and a head you can\n   * take hold of. It sits ON the picture, above the transport, and\n   * both stand down when the hand goes away.\n   * ------------------------------------------------------------- */\n  /* THE PLAYER FLOATS ON THE PICTURE, the way every player does \u2014\n     a paper bar under the frame costs fifty pixels of film and\n     announces that this is a document with a video in it. */\n  /* THE BAR IS UNDER THE PICTURE, not on it. A player floating over\n     the frame is right for a video in a page and wrong for a film\n     that fills the window: it takes the bottom of every composition\n     and it disappears exactly when you reach for it. Below the\n     picture it costs seventy-six pixels once and is always there. */\n  /* THE TRANSPORT SITS ON THE PICTURE, not under it. The source page\n     runs its track as a hairline over the scene; here the strip was a\n     solid band of paper that took 76px off every frame. It is a fade\n     of the chapter's own paper now, so the film owns the whole\n     viewport and the controls read as a ledge on the glass. */\n  /* ---- the player ------------------------------------------------ */\n  /* fixed, not absolute: the page runs on below the stage, so the\n     page's bottom is not the frame's bottom. A dark scrim, not paper:\n     white type on a gradient into black is the one thing that reads\n     over every grade the film wears, and it is what the eye expects\n     at the bottom of a picture that plays. */\n  .cf-player {\n    position: fixed;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 5;\n    padding: 26px 14px 8px;\n    color: #fff;\n    font-family: var(--cf-ui);\n    background: linear-gradient(\n      to top,\n      rgba(12, 9, 4, 0.72),\n      rgba(12, 9, 4, 0.38) 45%,\n      rgba(12, 9, 4, 0)\n    );\n    transition: opacity 360ms ease;\n  }\n\n  /* nobody is touching it: the apparatus leaves the picture, the way\n     every player made since 2010 does; a hand on the frame brings it\n     back (wake) */\n  .cf-player.is-idle {\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  /* the transport waits outside while the front door is open */\n  .cf-player.is-away {\n    visibility: hidden;\n  }\n\n  .cf-scrub {\n    position: relative;\n    height: 22px;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    touch-action: none;\n    outline: none;\n  }\n\n  .cf-scrub-track {\n    position: relative;\n    display: flex;\n    gap: 2px;\n    width: 100%;\n    height: 3px;\n    transition: height 120ms ease;\n  }\n\n  .cf-scrub:hover .cf-scrub-track,\n  .cf-scrub:focus-visible .cf-scrub-track {\n    height: 5px;\n  }\n\n  .cf-scrub-ch {\n    position: relative;\n    overflow: hidden;\n    background: rgba(255, 255, 255, 0.28);\n    transition: transform 120ms ease;\n  }\n\n  /* the chapter under the pointer stands up a little, the way the\n     hovered chapter on every chaptered bar does */\n  .cf-scrub:hover .cf-scrub-ch:hover {\n    transform: scaleY(1.7);\n  }\n\n  /* the ghost: a pale fill to wherever the pointer is resting, so\n     the eye reads the cut it would make before the hand makes it */\n  .cf-scrub-ghost {\n    position: absolute;\n    inset: 0 auto 0 0;\n    display: block;\n    background: rgba(255, 255, 255, 0.34);\n    width: calc(\n      clamp(0, (var(--cf-hov, 0) - var(--s0)) / var(--sl), 1) * 100%\n    );\n  }\n\n  /* each chapter fills with the part of the whole-film playhead that\n     falls inside it \u2014 one custom property, updated per frame, and no\n     re-render anywhere */\n  .cf-scrub-fill {\n    position: absolute;\n    inset: 0 auto 0 0;\n    display: block;\n    background: var(--cf-red);\n    width: calc(\n      clamp(0, (var(--cf-prog, 0) - var(--s0)) / var(--sl), 1) * 100%\n    );\n  }\n\n  /* the knob sits on the fill's end: --cf-hpx is that end in pixels,\n     from the same fractions and the measured track (see frame) */\n  .cf-scrub-head {\n    position: absolute;\n    top: 50%;\n    left: calc(var(--cf-hpx, 0) * 1px);\n    width: 13px;\n    height: 13px;\n    margin: -6.5px 0 0 -6.5px;\n    border-radius: 50%;\n    background: var(--cf-red);\n    transform: scale(0);\n    transition: transform 120ms ease;\n  }\n\n  .cf-scrub:hover .cf-scrub-head,\n  .cf-scrub:focus-visible .cf-scrub-head,\n  .cf-scrub.is-live .cf-scrub-head {\n    transform: scale(1);\n  }\n\n  .cf-scrub-tip {\n    position: absolute;\n    bottom: 18px;\n    left: calc(var(--cf-tipx, 0) * 1px);\n    transform: translateX(-50%);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 2px;\n    white-space: nowrap;\n    background: rgba(12, 9, 4, 0.92);\n    color: #fff;\n    padding: 7px 11px 6px;\n    border-radius: 4px;\n    pointer-events: none;\n  }\n\n  .cf-scrub-tip-ch {\n    font-size: 10px;\n    letter-spacing: 0.12em;\n    color: rgba(255, 255, 255, 0.72);\n  }\n\n  .cf-scrub-tip-t {\n    font-size: 13px;\n    font-weight: 600;\n    font-variant-numeric: tabular-nums;\n  }\n\n  .cf-controls {\n    display: flex;\n    align-items: center;\n    gap: 2px;\n    height: 40px;\n  }\n\n  /* the round ghost button: a 40px target, the glyph 22px inside it,\n     a hover that is a wash rather than an outline */\n  .cf-ic {\n    appearance: none;\n    border: 0;\n    background: transparent;\n    color: #fff;\n    width: 40px;\n    height: 40px;\n    padding: 0;\n    border-radius: 50%;\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex: none;\n    opacity: 0.92;\n    transition:\n      background 120ms ease,\n      opacity 120ms ease;\n  }\n\n  .cf-ic svg {\n    width: 22px;\n    height: 22px;\n    fill: currentColor;\n    display: block;\n  }\n\n  .cf-ic:hover,\n  .cf-ic:focus-visible {\n    background: rgba(255, 255, 255, 0.14);\n    opacity: 1;\n    outline: none;\n  }\n\n  /* the label above a button \u2014 the name and its key \u2014 in the bar's\n     own bubble rather than the browser's slow yellow one */\n  [data-tip] {\n    position: relative;\n  }\n\n  [data-tip]::before {\n    content: attr(data-tip);\n    position: absolute;\n    bottom: calc(100% + 10px);\n    left: 50%;\n    transform: translate(-50%, 4px);\n    white-space: nowrap;\n    background: rgba(12, 9, 4, 0.92);\n    color: #fff;\n    font-family: var(--cf-ui);\n    font-size: 11px;\n    font-weight: 500;\n    letter-spacing: 0.06em;\n    text-transform: none;\n    padding: 6px 10px;\n    border-radius: 4px;\n    opacity: 0;\n    pointer-events: none;\n    transition:\n      opacity 120ms ease 200ms,\n      transform 120ms ease 200ms;\n  }\n\n  [data-tip]:hover::before,\n  [data-tip]:focus-visible::before {\n    opacity: 1;\n    transform: translate(-50%, 0);\n  }\n\n  /* the last button's bubble hugs the right edge instead of the\n     button's centre, so it never leaves the viewport */\n  .cf-ic-last::before {\n    left: auto;\n    right: 0;\n    transform: translate(0, 4px);\n  }\n\n  .cf-ic-last:hover::before,\n  .cf-ic-last:focus-visible::before {\n    transform: translate(0, 0);\n  }\n\n  /* the speaker and its fader: the fader is folded away until the\n     pointer is on the speaker, then slides out beside it */\n  .cf-vol {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .cf-vol-range {\n    appearance: none;\n    -webkit-appearance: none;\n    width: 0;\n    height: 3px;\n    margin: 0;\n    opacity: 0;\n    border-radius: 2px;\n    background: linear-gradient(\n      to right,\n      #fff calc(var(--cf-vol, 1) * 100%),\n      rgba(255, 255, 255, 0.3) 0\n    );\n    cursor: pointer;\n    outline: none;\n    transition:\n      width 200ms ease,\n      margin 200ms ease,\n      opacity 200ms ease;\n  }\n\n  .cf-vol:hover .cf-vol-range,\n  .cf-vol:focus-within .cf-vol-range {\n    width: 64px;\n    margin: 0 12px 0 4px;\n    opacity: 1;\n  }\n\n  .cf-vol-range::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 12px;\n    height: 12px;\n    border-radius: 50%;\n    background: #fff;\n    border: 0;\n  }\n\n  .cf-vol-range::-moz-range-thumb {\n    width: 12px;\n    height: 12px;\n    border-radius: 50%;\n    background: #fff;\n    border: 0;\n  }\n\n  /* the chapter's name, beside the clock, is the way into the list */\n  .cf-chap {\n    appearance: none;\n    border: 0;\n    background: transparent;\n    color: rgba(255, 255, 255, 0.78);\n    font: inherit;\n    font-size: 12.5px;\n    letter-spacing: 0.04em;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    height: 32px;\n    padding: 0 6px 0 2px;\n    border-radius: 4px;\n    cursor: pointer;\n    white-space: nowrap;\n    max-width: min(34ch, 26cqw);\n    transition: color 120ms ease;\n  }\n\n  .cf-chap span {\n    opacity: 0.6;\n    padding-right: 1px;\n  }\n\n  .cf-chap svg {\n    width: 14px;\n    height: 14px;\n    flex: none;\n    fill: currentColor;\n    opacity: 0.7;\n    transition: transform 160ms ease;\n  }\n\n  .cf-chap:hover,\n  .cf-chap:focus-visible {\n    color: #fff;\n    outline: none;\n  }\n\n  .cf-chap:hover svg {\n    transform: translateX(2px);\n  }\n\n  /* a button with its name on it, set like the link beside it */\n  .cf-word {\n    appearance: none;\n    border: 0;\n    background: transparent;\n    color: rgba(255, 255, 255, 0.82);\n    font-family: var(--cf-ui);\n    font-size: 11px;\n    letter-spacing: 0.1em;\n    text-transform: uppercase;\n    display: inline-flex;\n    align-items: center;\n    gap: 7px;\n    height: 32px;\n    padding: 0 12px 0 8px;\n    border-radius: 16px;\n    cursor: pointer;\n    white-space: nowrap;\n    transition:\n      background 120ms ease,\n      color 120ms ease;\n  }\n\n  .cf-word svg {\n    width: 18px;\n    height: 18px;\n    fill: currentColor;\n  }\n\n  .cf-word:hover,\n  .cf-word:focus-visible {\n    background: rgba(255, 255, 255, 0.14);\n    color: #fff;\n    outline: none;\n  }\n\n  /* the confirmation glyph, fixed at the middle of the picture */\n  .cf-burst {\n    position: fixed;\n    left: 50%;\n    top: 50%;\n    width: 88px;\n    height: 88px;\n    margin: -44px 0 0 -44px;\n    border-radius: 50%;\n    background: rgba(12, 9, 4, 0.55);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    pointer-events: none;\n    z-index: 4;\n    animation: cf-burst 560ms ease-out forwards;\n  }\n\n  .cf-burst svg {\n    width: 42px;\n    height: 42px;\n    fill: #fff;\n  }\n\n  @keyframes cf-burst {\n    from {\n      opacity: 1;\n      transform: scale(0.72);\n    }\n\n    to {\n      opacity: 0;\n      transform: scale(1.5);\n    }\n  }\n\n  /* the hand that stopped moving takes its pointer with it */\n  .cf-page.is-idle {\n    cursor: none;\n  }\n\n  /* CC is a word, set as a badge; on, it is underlined in the film's\n     red the way every captions button on earth is */\n  .cf-ic-cc {\n    font-size: 11px;\n    font-weight: 700;\n    letter-spacing: 0.06em;\n    position: relative;\n  }\n\n  .cf-ic-cc.is-on::after,\n  .cf-ic.is-on::after {\n    content: '';\n    position: absolute;\n    left: 13px;\n    right: 13px;\n    bottom: 7px;\n    height: 2px;\n    background: var(--cf-red);\n    border-radius: 1px;\n  }\n\n  .cf-ic.is-on {\n    position: relative;\n  }\n\n  .cf-time {\n    margin-left: 8px;\n    font-size: 12.5px;\n    letter-spacing: 0.02em;\n    font-variant-numeric: tabular-nums;\n    color: rgba(255, 255, 255, 0.82);\n    white-space: nowrap;\n  }\n\n  .cf-time b {\n    font-weight: 500;\n    color: #fff;\n  }\n\n  .cf-time i {\n    font-style: normal;\n    padding: 0 4px;\n    opacity: 0.6;\n  }\n\n  /* the chapter title cannot be allowed to widen the control row */\n  .cf-time em {\n    display: inline-block;\n    max-width: min(28ch, 22cqw);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    vertical-align: bottom;\n    font-style: normal;\n    margin-left: 6px;\n    color: rgba(255, 255, 255, 0.72);\n  }\n\n  .cf-spacer {\n    flex: 1 1 auto;\n  }\n\n  .cf-link {\n    color: rgba(255, 255, 255, 0.82);\n    text-decoration: none;\n    font-size: 11px;\n    letter-spacing: 0.1em;\n    text-transform: uppercase;\n    padding: 0 12px;\n    white-space: nowrap;\n  }\n\n  .cf-link:hover {\n    color: #fff;\n    text-decoration: underline;\n    text-underline-offset: 3px;\n  }\n\n  /* only ever under ?debug: which cut of the film the browser has */\n  .cf-build {\n    color: rgba(255, 255, 255, 0.55);\n    font:\n      10px/1 ui-monospace,\n      monospace;\n    letter-spacing: 0.04em;\n    padding: 0 12px;\n    white-space: nowrap;\n  }\n\n  /* embedded, the iframe wraps the film AND its transport directly;\n     the app's own chrome inside the iframe stands down instead */\n  body.cf-embedded .topbar,\n  body.cf-embedded .footer {\n    display: none;\n  }\n\n  /* THE FILM ESCAPES THE APP'S PAGE CONTAINER. .page centres a\n     measured column with gutters and a top offset \u2014 right for every\n     demo page, and a pink-tinted mat around a film that owns its\n     frame. Both film bodies flatten it; the film's own layout is the\n     page. (This mattered only once cf-page left position: fixed \u2014\n     fixed elements never felt the container.) */\n  body.cf-film .page,\n  body.cf-embedded .page {\n    width: 100%;\n    margin: 0;\n    padding: 0;\n  }\n\n  /* a clear beat owns nothing on the glass, the numeral included */\n  .cf-clear .cf-ghost {\n    display: none;\n  }\n\n  /* ---- the gate --------------------------------------------------- */\n  /* the card stands BESIDE the tower, never over it: the boot pose\n     seats the building left of centre, so the door takes the right\n     third \u2014 the same real estate the title beat's type owns \u2014 and\n     its wash leans that way too instead of dimming the whole frame */\n  /* THE DOOR DOES NOT BLUR THE BUILDING. A poster's job is to make\n     the subject look like the reason to press play; a blur makes it\n     look like a placeholder. The scene stays sharp and keeps\n     turning (see the poster orbit) \u2014 the only thing over it is a\n     ground for the type, raked away from the tower. */\n  .cf-gate {\n    position: absolute;\n    inset: 0;\n    z-index: 7;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    background: linear-gradient(\n      100deg,\n      rgba(24, 18, 8, 0) 26%,\n      rgba(24, 18, 8, 0.28) 52%,\n      rgba(22, 16, 7, 0.72) 82%\n    );\n  }\n\n  /* THE DOOR SCALES, IT DOES NOT RE-LAY.\n  \n     A poster is a fixed composition: the wordmark sits hard right of\n     the building, the rule hangs above it, the seal stamps below. At\n     735 x 551 \u2014 the size it was drawn at \u2014 every number here is a\n     pixel. Smaller than that, all of them shrink together and the\n     composition survives; a breakpoint would instead have re-laid it\n     at two or three widths and been wrong at every width between.\n  \n     --gu is that one number: 1px at the design size and less below\n     it, driven by whichever of the two axes is scarcer, so a short\n     wide shot compresses exactly as a narrow tall one does. It never\n     exceeds 1px, so the door never grows past the poster it is. */\n  .cf-gate {\n    --gu: min(1px, 0.136cqw, 0.181cqh);\n  }\n\n  .cf-gate-in {\n    position: relative;\n    text-align: center;\n    font-family: var(--cf-ui);\n    color: #f7f0e0;\n    /* hard right: the poster is a two-column composition \u2014 building\n       in one half, wordmark in the other \u2014 and the wordmark drifting\n       toward the middle closes the gap that makes it one */\n    margin-right: calc(132 * var(--gu));\n  }\n\n  /* the museum frame: hairline, inset like a mat, above the scene\n     and under the type */\n  .cf-gate-frame {\n    position: absolute;\n    inset: min(30px, 2.4cqw);\n    border: 1px solid rgba(247, 240, 224, 0.34);\n    pointer-events: none;\n    animation: cf-mg-fade 1200ms ease-out both;\n  }\n\n  /* the spine: vertical Japanese down the inside of the frame */\n  .cf-gate-vert {\n    position: absolute;\n    top: 50%;\n    left: min(58px, 4.6cqw);\n    transform: translateY(-50%);\n    writing-mode: vertical-rl;\n    white-space: nowrap;\n    font-family: var(--cf-ui);\n    font-weight: 600;\n    font-size: clamp(10px, 0.95cqw, 13px);\n    letter-spacing: 0.3em;\n    color: rgba(247, 240, 224, 0.66);\n    animation: cf-mg-fade 900ms ease-out both;\n    animation-delay: 2050ms;\n  }\n\n  .cf-gate-k {\n    position: relative;\n    margin: 0;\n    font-family: var(--cf-display);\n    font-weight: 800;\n    font-size: min(calc(260 * var(--gu)), 15cqw);\n    letter-spacing: -0.03em;\n    white-space: nowrap;\n    line-height: 1.02;\n    text-shadow: 0 8px 70px rgba(20, 14, 4, 0.55);\n  }\n\n  /* the ghost: the title again, enormous and hollow, standing behind\n     itself \u2014 the poster's depth comes from one word at two weights */\n  .cf-gate-ghost {\n    position: absolute;\n    left: 50%;\n    top: 44%;\n    transform: translate(-50%, -50%) scale(1.9);\n    font-size: 1em;\n    line-height: 1;\n    color: transparent;\n    -webkit-text-stroke: 1px rgba(247, 240, 224, 0.2);\n    white-space: nowrap;\n    pointer-events: none;\n    animation: cf-mg-ghost 2400ms ease-out both;\n    animation-delay: 700ms;\n  }\n\n  @keyframes cf-mg-ghost {\n    0% {\n      opacity: 0;\n      transform: translate(-50%, -50%) scale(2.05);\n    }\n\n    100% {\n      opacity: 1;\n      transform: translate(-50%, -50%) scale(1.9);\n    }\n  }\n\n  /* the index strip along the foot of the frame */\n  .cf-gate-index {\n    position: absolute;\n    left: min(90px, 7cqw);\n    right: min(90px, 7cqw);\n    bottom: clamp(30px, 5.4vh, 56px);\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    gap: 6px min(36px, 2.2cqw);\n    margin: 0;\n    font-family: var(--cf-ui);\n    font-size: clamp(9px, 0.8cqw, 11px);\n    font-weight: 700;\n    letter-spacing: 0.22em;\n    color: rgba(247, 240, 224, 0.62);\n    animation: cf-mg-fade 900ms ease-out both;\n    animation-delay: 2500ms;\n  }\n\n  .cf-gate-index span {\n    white-space: nowrap;\n  }\n\n  .cf-gate-t {\n    margin: calc(10 * var(--gu)) 0 0;\n    font-size: calc(15 * var(--gu));\n    font-weight: 800;\n    letter-spacing: 0.5em;\n    text-indent: 0.5em;\n  }\n\n  .cf-gate-s {\n    margin: calc(6 * var(--gu)) 0 calc(30 * var(--gu));\n    font-size: calc(12 * var(--gu));\n    letter-spacing: 0.14em;\n    color: rgba(247, 240, 224, 0.72);\n  }\n\n  /* the claim under the subtitle: the display serif, italic, a step\n     back in the ink; and under it the four words, tiny and wide */\n  .cf-gate-live {\n    margin: calc(14 * var(--gu)) 0 0;\n    font-family: var(--cf-display);\n    font-style: italic;\n    font-size: calc(16 * var(--gu));\n    line-height: 1.4;\n    letter-spacing: 0.01em;\n    color: rgba(247, 240, 224, 0.78);\n    max-width: 40ch;\n    text-wrap: balance;\n  }\n\n  .cf-gate-live-k {\n    margin: calc(8 * var(--gu)) 0 calc(22 * var(--gu));\n    font-family: var(--cf-ui);\n    font-size: calc(10 * var(--gu));\n    letter-spacing: 0.22em;\n    text-transform: uppercase;\n    color: rgba(247, 240, 224, 0.5);\n  }\n\n  .cf-gate-row {\n    display: flex;\n    gap: calc(12 * var(--gu));\n    justify-content: center;\n  }\n\n  .cf-go {\n    appearance: none;\n    font: inherit;\n    font-family: var(--cf-ui);\n    font-size: calc(13 * var(--gu));\n    font-weight: 600;\n    letter-spacing: 0.14em;\n    cursor: pointer;\n    padding: calc(14 * var(--gu)) calc(30 * var(--gu));\n    border-radius: 999px;\n    border: 1px solid #f2e9d2;\n    background: #f2e9d2;\n    color: #2e2515;\n    box-shadow: 0 10px 34px rgba(20, 14, 4, 0.35);\n    transition:\n      transform 220ms cubic-bezier(0.22, 1, 0.36, 1),\n      box-shadow 220ms ease;\n  }\n\n  .cf-go:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 16px 44px rgba(20, 14, 4, 0.42);\n  }\n\n  .cf-go:disabled {\n    opacity: 0.45;\n    cursor: default;\n  }\n\n  .cf-go.is-quiet {\n    background: transparent;\n    color: #f2e9d2;\n    border-color: rgba(242, 233, 210, 0.5);\n  }\n\n  .cf-go.is-quiet:hover {\n    border-color: #f2e9d2;\n  }\n\n  /* ---- the title package ---------------------------------------- *\n     One motion system for front and back matter, staged like a\n     broadcast title: rule, glyphs, mark, sub, seal, controls. All\n     CSS \u2014 these screens live outside the score on purpose, since\n     both exist precisely when the film is not running. */\n  .cf-matter {\n    position: relative;\n  }\n\n  .cf-mg-rule {\n    display: block;\n    width: 1px;\n    height: 56px;\n    margin: 0 auto 18px;\n    background: rgba(247, 240, 224, 0.65);\n    transform-origin: 50% 0;\n    animation: cf-mg-rule 900ms cubic-bezier(0.22, 1, 0.36, 1) both;\n  }\n\n  @keyframes cf-mg-rule {\n    0% {\n      transform: scaleY(0);\n    }\n\n    100% {\n      transform: scaleY(1);\n    }\n  }\n\n  .cf-mg-g1,\n  .cf-mg-g2 {\n    display: inline-block;\n    animation: cf-mg-glyph 1300ms cubic-bezier(0.22, 1, 0.36, 1) both;\n    animation-delay: 350ms;\n  }\n\n  .cf-mg-g2 {\n    animation-delay: 650ms;\n  }\n\n  @keyframes cf-mg-glyph {\n    0% {\n      opacity: 0;\n      filter: blur(16px);\n      transform: translateY(10px);\n    }\n\n    100% {\n      opacity: 1;\n      filter: blur(0);\n      transform: translateY(0);\n    }\n  }\n\n  /* the wordmark tracks IN \u2014 from letterspaced air to its set width,\n     the oldest move in broadcast titles because nothing else says\n     \"this is the name\" as quietly */\n  .cf-mg-mark {\n    white-space: nowrap;\n    transform-origin: center;\n    animation: cf-mg-track 1400ms cubic-bezier(0.22, 1, 0.36, 1) both;\n    animation-delay: 1050ms;\n  }\n\n  /* THE WORDMARK NO LONGER RE-MEASURES ITSELF.\n     Tracking in from 1.1em added about 250px of laid-out width at the\n     first frame \u2014 so on anything but a wide screen the mark started\n     wrapped onto two lines and un-wrapped partway through its own\n     animation, taking the card under it with it. The same gesture\n     reads identically as a scale on the X axis, which is a composited\n     transform and reflows nothing. */\n  @keyframes cf-mg-track {\n    0% {\n      opacity: 0;\n      transform: scaleX(1.16);\n    }\n\n    100% {\n      opacity: 1;\n      transform: scaleX(1);\n    }\n  }\n\n  .cf-mg-sub {\n    animation: cf-mg-fade 800ms ease-out both;\n    animation-delay: 1650ms;\n  }\n\n  .cf-mg-row {\n    animation: cf-mg-fade 800ms ease-out both;\n    animation-delay: 2250ms;\n  }\n\n  /* centred as a block AND line by line: the shorthand margin used to\n     cancel the auto inline margins, so the column sat at the card's\n     left edge with its lines centred inside a box narrower than its\n     first line */\n  .cf-mg-credits {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    white-space: nowrap;\n    max-width: 88cqw;\n    gap: 4px;\n    margin: 0 auto 22px;\n    font-size: 11px;\n    letter-spacing: 0.14em;\n    color: rgba(247, 240, 224, 0.6);\n    animation: cf-mg-fade 900ms ease-out both;\n    animation-delay: 2050ms;\n  }\n\n  @keyframes cf-mg-fade {\n    0% {\n      opacity: 0;\n      transform: translateY(6px);\n    }\n\n    100% {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  /* the seal: the lineup's stamp, miniature \u2014 it lands hard and\n     late, canted the way a hand cants it */\n  /* on the end card the seal belongs IN the card: hung off the right\n     edge it floated in the corner of the frame with nothing to sit on */\n  .cf-end-in .cf-mg-seal {\n    position: static;\n    margin: 0 auto 16px;\n  }\n\n  /* the open end of the date. A dash at the numeral's own weight is a\n     slab as wide as a digit and reads as a fifth figure. */\n  .cf-end-dash {\n    font-style: normal;\n    font-size: 0.4em;\n    font-weight: 600;\n    vertical-align: 0.5em;\n    margin-left: 0.08em;\n    opacity: 0.7;\n  }\n\n  /* THE SEAL IS A DISC AND THE WORD SITS ON ITS CENTRE.\n     It was a vertical badge with letterspaced Latin running down it,\n     and letter-spacing adds its space AFTER the last letter \u2014 so the\n     word was always sitting one space above the middle of its own\n     box, which is exactly the kind of thing you cannot stop seeing.\n     Horizontal, tracked from the centre (text-indent pays the\n     trailing space back), on a round stamp. */\n  /* the stamp is part of the poster, so it scales with the poster \u2014\n     every number here is in the door's own unit (see --gu) */\n  .cf-mg-seal {\n    position: absolute;\n    top: calc(4 * var(--gu, 1px));\n    right: calc(-76 * var(--gu, 1px));\n    display: grid;\n    place-items: center;\n    width: calc(64 * var(--gu, 1px));\n    height: calc(64 * var(--gu, 1px));\n    font-family: var(--cf-ui);\n    font-weight: 700;\n    font-size: calc(15 * var(--gu, 1px));\n    letter-spacing: 0.12em;\n    text-indent: 0.12em;\n    text-transform: uppercase;\n    color: #f7f0e0;\n    background: var(--cf-mark);\n    border-radius: 50%;\n    animation: cf-mg-seal 500ms cubic-bezier(0.16, 1.2, 0.3, 1) both;\n    animation-delay: 1900ms;\n  }\n\n  @keyframes cf-mg-seal {\n    0% {\n      opacity: 0;\n      transform: rotate(-4deg) scale(1.6);\n    }\n\n    30% {\n      opacity: 1;\n      transform: rotate(-4deg) scale(0.97);\n    }\n\n    100% {\n      opacity: 0.94;\n      transform: rotate(-4deg) scale(1);\n    }\n  }\n\n  /* ---- the end card ---------------------------------------------- */\n  .cf-end {\n    position: absolute;\n    inset: 0;\n    z-index: 6;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: rgba(28, 22, 10, 0.58);\n    backdrop-filter: blur(1.5px);\n  }\n\n  .cf-end-in {\n    text-align: center;\n    font-family: var(--cf-ui);\n    color: #f7f0e0;\n  }\n\n  .cf-end-k {\n    margin: 0;\n    font-family: var(--cf-display);\n    font-weight: 800;\n    /* '1882 \u2014' is six characters, not four: at 19cqw it was six times\n       the viewport wide and it set the width of the whole card */\n    font-size: min(150px, min(15vh, 9cqw));\n    letter-spacing: -0.03em;\n    white-space: nowrap;\n    line-height: 1;\n    text-shadow: 0 6px 60px rgba(20, 14, 4, 0.55);\n  }\n\n  .cf-end-t {\n    margin: 12px 0 0;\n    font-size: 14px;\n    font-weight: 800;\n    letter-spacing: 0.5em;\n    text-indent: 0.5em;\n  }\n\n  .cf-end-s {\n    margin: 6px 0 26px;\n    font-size: 12px;\n    letter-spacing: 0.14em;\n    color: rgba(247, 240, 224, 0.7);\n  }\n\n  /* ---- the stamp -------------------------------------------------- *\n     A hanko, not a title: it strikes, settles at once, and is simply\n     replaced by the next. Seal-red on purpose \u2014 it shares the\n     annotation's ink because it IS an annotation, pressed over each\n     tower as the lineup calls the roll. */\n  .cf-stamp {\n    position: absolute;\n    inset: 0;\n    z-index: 3;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0;\n    pointer-events: none;\n    font-family: var(--cf-display);\n    font-weight: 700;\n    font-size: min(24vh, 16cqw);\n    letter-spacing: 0.04em;\n    color: var(--cf-mark);\n    mix-blend-mode: multiply;\n    animation: cf-stamp 700ms cubic-bezier(0.16, 1.3, 0.3, 1) both;\n  }\n\n  @keyframes cf-stamp {\n    0% {\n      opacity: 0;\n      transform: rotate(-2.5deg) scale(1.5);\n    }\n\n    16% {\n      opacity: 0.92;\n      transform: rotate(-2.5deg) scale(0.99);\n    }\n\n    100% {\n      opacity: 0.88;\n      transform: rotate(-2.5deg) scale(1);\n    }\n  }\n\n  /* the app's own chrome, gone: this route is a frame, not a page */\n  body.cf-film .topbar,\n  body.cf-film .footer {\n    display: none;\n  }\n\n  /* A ROMAN WORD IS NOT TWO GLYPHS.\n     The block was cut for a two-character CJK setting, where the type\n     size and the column width have nothing to do with each other. A\n     Latin word's width IS its letter count, so 'Evangelistes' set at\n     the size that suited 'Obra' runs off the frame \u2014 and a word that\n     wraps to two lines lands the whole plate at a different height.\n     So: never wrap, and take the size from the count the plane\n     already carries (--cf-glyphs), capped by the design size. 0.56em\n     is about the average advance of this face. */\n  .cf-kanji.is-latin {\n    font-family: var(--cf-display);\n    font-weight: 800;\n    text-transform: uppercase;\n    color: var(--cf-chap);\n    writing-mode: horizontal-tb;\n    white-space: nowrap;\n    font-size: min(\n      min(104px, 6.2cqw),\n      calc(var(--cf-fit, 42cqw) / (var(--cf-glyphs, 4) * 0.56))\n    );\n    letter-spacing: -0.02em;\n    line-height: 0.92;\n  }\n  .is-title .cf-kanji.is-latin {\n    --cf-fit: 46cqw;\n    font-size: min(\n      min(142px, 8.6cqw),\n      calc(var(--cf-fit) / (var(--cf-glyphs, 4) * 0.56))\n    );\n  }\n  .is-plate .cf-kanji.is-latin {\n    --cf-fit: 24cqw;\n    writing-mode: horizontal-tb;\n    font-size: min(\n      min(76px, 4.8cqw),\n      calc(var(--cf-fit) / (var(--cf-glyphs, 4) * 0.56))\n    );\n    letter-spacing: -0.01em;\n    max-width: 26cqw;\n  }\n  .is-point .cf-kanji.is-latin {\n    --cf-fit: 32cqw;\n    font-size: min(\n      min(82px, 5.2cqw),\n      calc(var(--cf-fit) / (var(--cf-glyphs, 4) * 0.56))\n    );\n  }\n  /* ---- THE RESPONSIVE OVERRIDES, LAST ON PURPOSE ------------- *\n\n     These are overrides, and an override that appears before the\n     rule it overrides does nothing at equal specificity. They sat\n     a thousand lines ABOVE the gate and the rail they were written\n     to compress, so none of them has ever applied: the door kept\n     its full stack at every width and ran through its own buttons\n     on anything narrow. Moving them to the foot of the sheet is\n     the whole fix \u2014 nothing here changed except where it is.\n\n     They ask the FILM and the SHOT rather than the window, so a\n     film in a small frame gets the same compact layout a phone\n     does. See the container declarations on .cf-page and\n     .cf-stage above. */\n\n  @container film (max-width: 1180px) {\n    .cf-block {\n      max-width: min(38ch, 56cqw);\n    }\n\n    .cf-block.is-plate {\n      max-width: min(46ch, 52cqw);\n    }\n\n    .is-plate .cf-kanji.is-latin {\n      --cf-fit: 28cqw;\n      max-width: 30cqw;\n    }\n\n    .cf-say {\n      max-width: min(28ch, 42cqw);\n    }\n  }\n\n  @container film (max-width: 860px) {\n    /* the plate stops being two columns: the word goes over the cues,\n       and the rule that separated them becomes the rule under it */\n    .cf-block.is-plate {\n      top: auto;\n      bottom: 12%;\n      right: 5.5%;\n      left: 5.5%;\n      display: block;\n      transform: none;\n      max-width: none;\n    }\n\n    .is-plate .cf-plane.is-glyph {\n      border-right: 0;\n      border-bottom: 2px solid var(--cf-chap);\n      padding-right: 0;\n      padding-bottom: 8px;\n      margin-bottom: 14px;\n    }\n\n    /* stacked under the word, the cues read from the left again */\n    .is-plate .cf-plane:not(.is-glyph) {\n      align-items: flex-start;\n      text-align: left;\n    }\n\n    .is-plate .cf-read {\n      justify-content: flex-start;\n    }\n\n    .is-plate .cf-kanji.is-latin {\n      --cf-fit: 84cqw;\n      max-width: none;\n    }\n\n    .cf-block.is-title,\n    .cf-block.is-lower,\n    .cf-block.is-point {\n      left: 5.5%;\n      right: 5.5%;\n      top: auto;\n      bottom: 13%;\n      max-width: none;\n      text-align: left;\n    }\n\n    .is-title .cf-read {\n      justify-content: flex-start;\n    }\n\n    .is-title .cf-kicker {\n      flex-direction: row;\n    }\n\n    .cf-kanji.is-latin,\n    .is-title .cf-kanji.is-latin,\n    .is-point .cf-kanji.is-latin {\n      --cf-fit: 84cqw;\n    }\n\n    .cf-say {\n      max-width: min(32ch, 84cqw);\n    }\n\n    /* a numeral three-quarters of the screen wide behind two columns\n       of type is a texture; behind one column it is a mess */\n    .cf-ghost,\n    .cf-plate .cf-ghost {\n      display: none;\n    }\n\n    .cf-photo figure {\n      width: min(46cqw, 260px);\n    }\n\n    /* a narrow frame: the rule drops under the title again */\n    .cf-rail {\n      flex-wrap: wrap;\n    }\n\n    .cf-years {\n      flex-basis: 100%;\n      width: min(420px, 56cqw);\n      margin-left: 0;\n      margin-top: 8px;\n    }\n\n    .cf-subs {\n      font-size: 15px;\n      max-width: 88cqw;\n    }\n  }\n\n  @container film (max-width: 560px) {\n    .cf-kicker {\n      font-size: 10px;\n      letter-spacing: 0.09em;\n    }\n\n    .cf-say {\n      font-size: 15px;\n      margin-bottom: 8px;\n    }\n\n    .cf-read {\n      margin-bottom: 12px;\n    }\n\n    .cf-kanji {\n      margin-bottom: 12px;\n    }\n\n    .cf-gate-index,\n    .cf-rail {\n      display: none;\n    }\n\n    .cf-gate-in.cf-matter {\n      margin-right: 0;\n      padding-inline: 20px;\n    }\n\n    .cf-gate-vert {\n      display: none;\n    }\n\n    .cf-mg-seal {\n      position: static;\n      margin: 14px auto 0;\n    }\n\n    .cf-photo {\n      display: none;\n    }\n\n    .cf-subs {\n      font-size: 14px;\n      bottom: 10%;\n    }\n  }\n\n  @container shot (max-height: 620px) {\n    .cf-kanji.is-latin {\n      font-size: min(\n        clamp(30px, 8vh, 64px),\n        calc(var(--cf-fit, 42cqw) / (var(--cf-glyphs, 4) * 0.56))\n      );\n    }\n\n    .cf-say {\n      font-size: clamp(13px, 2.4vh, 18px);\n      margin-bottom: 7px;\n    }\n\n    .cf-block.is-lower,\n    .cf-block.is-title {\n      bottom: 8%;\n    }\n\n    .has-subs .cf-block.is-lower,\n    .has-subs .cf-block.is-title {\n      bottom: 17%;\n    }\n  }\n  /* Sagrada: typography belongs to the shot, not the phone viewport.\n     Keep a compact editorial corner in square/portrait containers;\n     never turn the architecture into the backdrop for a full-width card. */\n  @container shot (max-aspect-ratio: 4/3) or ((max-width: 900px) and (max-height: 500px)) {\n    .is-sagrada .cf-type {\n      --cf-lx: 0;\n      --cf-ly: 0;\n    }\n    .is-sagrada .cf-block,\n    .is-sagrada .cf-block.is-title,\n    .is-sagrada .cf-block.is-lower,\n    .is-sagrada .cf-block.is-point,\n    .is-sagrada .cf-block.is-plate {\n      left: 5.5%;\n      right: auto;\n      top: auto;\n      bottom: 12%;\n      width: 48cqw;\n      max-width: 48cqw;\n      display: block;\n      text-align: left;\n    }\n    .is-sagrada .cf-kanji.is-latin,\n    .is-sagrada .is-title .cf-kanji.is-latin,\n    .is-sagrada .is-point .cf-kanji.is-latin,\n    .is-sagrada .is-plate .cf-kanji.is-latin {\n      --cf-fit: 46cqw;\n      font-size: min(\n        5.6cqw,\n        6cqh,\n        calc(46cqw / (var(--cf-glyphs, 4) * 0.56))\n      );\n      max-width: 46cqw;\n      margin-bottom: 1.5cqw;\n    }\n    .is-sagrada .cf-kicker {\n      font-size: clamp(7px, 1.65cqw, 12px);\n      gap: 1.5cqw;\n      margin-bottom: 1.5cqw;\n      letter-spacing: 0.07em;\n    }\n    .is-sagrada .cf-kicker > span {\n      white-space: normal;\n    }\n    .is-sagrada .cf-kicker::after {\n      min-width: 2cqw;\n      height: 1px;\n    }\n    .is-sagrada .cf-read {\n      gap: 0.8cqw 1.2cqw;\n      margin-bottom: 2cqw;\n      justify-content: flex-start;\n    }\n    .is-sagrada .cf-romaji,\n    .is-sagrada .cf-block:not(:has(.is-glyph)) .cf-romaji {\n      font-size: clamp(8px, 1.9cqw, 13px);\n      letter-spacing: 0.06em;\n    }\n    .is-sagrada .cf-gloss,\n    .is-sagrada .cf-block:not(:has(.is-glyph)) .cf-gloss {\n      font-size: clamp(8px, 1.9cqw, 13px);\n    }\n    .is-sagrada .cf-say {\n      font-size: clamp(9px, 2.1cqw, 15px);\n      line-height: 1.2;\n      max-width: 48cqw;\n      margin-bottom: 1cqw;\n    }\n    .is-sagrada .is-plate .cf-plane.is-glyph {\n      padding: 0 0 1.2cqw;\n      margin-bottom: 1.5cqw;\n      border-width: 1px;\n    }\n    .is-sagrada .cf-subs {\n      font-size: clamp(10px, 2.4cqw, 15px);\n      max-width: 80cqw;\n      bottom: 5%;\n    }\n    .is-sagrada .cf-ghost {\n      display: none;\n    }\n  }\n</style>", {
+      strictMode: true,
+      scope: () => ({
+        on,
+        Joins,
+        Track,
+        Plate,
+        Stamp,
+        Clip,
+        Insert,
+        Captions,
+        Rail,
+        Choreo,
+        motion,
+        at,
+        Gate,
+        EndCard,
+        Menu,
+        Burst,
+        Player,
+        FilmGraph
+      })
+    }), this);
+  }
+}
+
+export { Film, TICK };
+//# sourceMappingURL=film.js.map