@cardstack/boxel-cli 0.9.0 → 0.10.0-unstable.0

package/bundled-test-harness/assets/film-CMNJITZ-.js

@@ -1,4074 +0,0 @@
-import "./chunk-Rp0pCe6z.js";
-import { r as initializeDeferredDecorator, t as decorateFieldV2 } from "./runtime--fcdnjmJ-BoCBNIsz.js";
-import { et as tracked, wt as setComponentTemplate } from "./cache-DtDz7X5V-Wn8jRDfL.js";
-import { H as templateFactory, S as on } from "./index-DaCZcoCY-CgzbilMy.js";
-import "./tracking-CNiq91Pk.js";
-import "./modifier-D0EP-FQ7.js";
-import "./component-BJO47HTh.js";
-import { t as Component } from "./dist-CkA1rgqO.js";
-import "./template-factory-ds9s0u8l.js";
-import { r as modifier } from "./dist-nMt-N14r.js";
-import "./src-Bq3lg4hB.js";
-import { t as MotionModifier } from "./motion-l7EBYFii.js";
-import { t as Choreo } from "./choreo-CJDBg03r.js";
-import { E as at } from "./steps-D0xobKkB.js";
-import { t as Clip } from "./clip-CK6mVuyN.js";
-import { n as VOCABULARY, t as FilmGraph } from "./host-KVk6VIHI.js";
-import { h as seamShape, p as inGlass, s as Joins, u as PRESENTATIONS } from "./joins-D_xzMJAJ.js";
-import { i as Track, n as Insert, r as Stamp, t as Captions } from "./overlays-C6PM7oTd.js";
-import { t as Plate } from "./plate-CqN2nM6P.js";
-import { n as Menu, r as Player, t as Burst } from "./player-CN0l44LK.js";
-import { t as Rail } from "./rail-CQ53Dakr.js";
-import { n as Gate, t as EndCard } from "./titles-BE_XnCe4.js";
-//#region ../choreo/src/film/clips.ts
-/**
-* CLIPS — a source-time window over the film's clock.
-*
-* A beat is a shot of the picture. A clip is something else laid over it
-* for a while: a video, a still, or a freeze of the picture itself. Its
-* arithmetic is the compositor's (packages/choreo-gallery/realm/design/choreo-composition.md, Phase C3),
-* lifted whole because it was already right:
-*
-*   source = in + (film − start) × rate
-*   window = for, or (out − in) / rate, or the rest of the beat
-*
-* Before `start` the clip is absent; inside its window it is active and
-* its source time is the number above; past it the end policy applies —
-* `remove` (the default) takes it off, `hold` keeps the last sample on
-* screen, `freeze` keeps it on screen and writes nothing further. Every
-* state is re-derived from the film time on every frame, never discovered
-* by playing from zero — which is what lets an exact film scrub into the
-* middle of a clip and find it where it should be.
-*
-* A clip may outlive its beat: the window is measured on the film's
-* clock, so a still that starts late in one shot can cross the seam into
-* the next. That is the clip overlap an editor means.
-*/
-/**
-* A LOOK HELD ON A CLIP — the first adjustment that belongs to something
-* other than the picture.
-*
-* `f.picture.Look` reaches the WebGL page's own grade; a clip is a DOM
-* element and has never had one, so a video inset over a graded picture
-* was ungraded and there was no way to say otherwise. These are the
-* operations a browser can do to an element without a texture, composed
-* in the order the film's own shader composes them (saturate, contrast,
-* brightness, then sepia and hue) — because filter order is not
-* commutative and the two should agree.
-*
-* What this is NOT is the whole filter stack: curves, secondaries and a
-* LUT need the pixels, which needs the clip through a texture. This is
-* the half a browser gives for free.
-*/
-/** how long a clip's window is, in film seconds */
-function clipWindow(spec, beatStart, nextStart) {
-	if (spec.for !== void 0) return spec.for;
-	if (spec.out !== void 0) return (spec.out - (spec.in ?? 0)) / (spec.rate ?? 1);
-	return Math.max(0, nextStart - beatStart - (spec.at ?? 0));
-}
-/**
-* The clip on screen at a film time, if any: the most recent beat at or
-* before `index` whose clip's window holds the time, or whose end policy
-* keeps it on screen past its window. Older clips are never reached past
-* a newer one — a clip that was removed is gone, and one that is held is
-* the one on screen.
-*/
-function resolveClip(beats, beatStart, film, index, total, lane = 0) {
-	for (let i = Math.min(index, beats.length - 1); i >= 0; i -= 1) {
-		const spec = laneOf(beats[i], lane);
-		if (!spec) continue;
-		const start = beatStart(i) + (spec.at ?? 0);
-		if (film < start) continue;
-		const next = i + 1 < beats.length ? beatStart(i + 1) : total;
-		const window = clipWindow(spec, beatStart(i), next);
-		const since = film - start;
-		const rate = spec.rate ?? 1;
-		const inPoint = spec.in ?? 0;
-		if (since < window) return {
-			index: i,
-			since,
-			source: inPoint + since * rate,
-			spec,
-			state: "active"
-		};
-		const end = spec.end ?? "remove";
-		if (end === "remove") return null;
-		return {
-			index: i,
-			since,
-			source: end === "hold" ? inPoint + window * rate : null,
-			spec,
-			state: end === "hold" ? "held" : "frozen"
-		};
-	}
-	return null;
-}
-/** a beat's clip on one lane; a clip with no lane takes its own position */
-function laneOf(beat, lane) {
-	const list = beat.clips;
-	if (!list?.length) return;
-	for (let i = 0; i < list.length; i += 1) if ((list[i].lane ?? i) === lane) return list[i];
-}
-/** every lane any beat up to `index` puts a clip on, in order */
-function clipLanes(beats, index) {
-	const seen = /* @__PURE__ */ new Set();
-	for (let i = Math.min(index, beats.length - 1); i >= 0; i -= 1) beats[i].clips?.forEach((spec, n) => seen.add(spec.lane ?? n));
-	return [...seen].sort((a, b) => a - b);
-}
-/**
-* EVERY CLIP ON SCREEN AT A FILM TIME, one per lane, in lane order — which
-* is also paint order, so a score decides what sits over what by which
-* lane it puts a thing on.
-*
-* A beat used to carry one clip and a second on the same shot overwrote
-* the first without saying so. Lanes are the smallest thing that fixes
-* that without inventing a track model: the resolver below is the old
-* one, run once per lane.
-*/
-function resolveClips(beats, beatStart, film, index, total) {
-	const out = [];
-	for (const lane of clipLanes(beats, index)) {
-		const found = resolveClip(beats, beatStart, film, index, total, lane);
-		if (found) out.push(found);
-	}
-	return out;
-}
-//#endregion
-//#region ../choreo/src/film/math.ts
-/** the small arithmetic every film does: the same four lines, once */
-var RAD = Math.PI / 180;
-var lerp = (a, b, t) => a + (b - a) * t;
-var clamp01 = (v) => Math.max(0, Math.min(1, v));
-/** smoothstep on [0,1] */
-var smooth = (t) => {
-	const k = clamp01(t);
-	return k * k * (3 - 2 * k);
-};
-var hex = (h) => [
-	parseInt(h.slice(1, 3), 16) / 255,
-	parseInt(h.slice(3, 5), 16) / 255,
-	parseInt(h.slice(5, 7), 16) / 255
-];
-/** relative luminance of a #rrggbb, 0..1 */
-var luminance = (h) => {
-	if (!/^#[0-9a-f]{6}$/i.test(h)) return 1;
-	const [r, g, b] = hex(h);
-	return .2126 * r + .7152 * g + .0722 * b;
-};
-/** a #rrggbb at an alpha, as CSS */
-var rgba = (h, a) => {
-	if (!/^#[0-9a-f]{6}$/i.test(h)) return h;
-	const [r, g, b] = hex(h);
-	return `rgba(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(b * 255)}, ${a})`;
-};
-var mmss = (s) => {
-	return `${Math.floor(Math.max(0, s) / 60)}:${String(Math.floor(Math.max(0, s) % 60)).padStart(2, "0")}`;
-};
-/** the shortest way round a circle, radians */
-var wrapAngle = (d) => {
-	let k = d;
-	while (k > Math.PI) k -= Math.PI * 2;
-	while (k < -Math.PI) k += Math.PI * 2;
-	return k;
-};
-//#endregion
-//#region ../choreo/src/film/schedule.ts
-/**
-* THE SCHEDULE — everything a film derives from its shot list before a
-* single frame is drawn, as pure functions of the table.
-*
-* A film is its cue table and its camera path: when a beat starts, what
-* fires when, where the lens is at every waypoint, how the chapters are
-* cut. These were getters on the engine; lifting them here changes no
-* number — the engine calls them — and lets the same arithmetic be run
-* headless, in Node, to write the golden fixtures the graph refactor is
-* measured against (`scripts/film-fixtures.mjs`,
-* `tests/unit/film-schedule-test.ts`).
-*
-* Nothing in here reads the clock, the page or the DOM. Everything is a
-* function of `Beat[]` and a few numbers, which is the property the
-* fixtures pin.
-*/
-/** one tick of the shot list, in seconds: a beat's `ticks` × this is its length */
-var TICK = 2;
-/** the whole film, in seconds, leads included */
-function totalSecs(beats) {
-	return beats.reduce((n, b, i) => n + b.ticks + (i === 0 ? 0 : b.lead ?? 0), 0) * 2;
-}
-/** film seconds before a beat's nominal head, leads included */
-function secsBefore(beats, index) {
-	return beats.slice(0, index).reduce((n, b, i) => n + b.ticks + (i === 0 ? 0 : b.lead ?? 0), 0) * 2;
-}
-/**
-* 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. This is the single most load-bearing constant in the film.
-*/
-function beatStart(beats, i) {
-	if (i <= 0) return 0;
-	return secsBefore(beats, i) + (beats[i].lead ?? 0) * 2 + 2;
-}
-/** one cue per beat (and an `air` cue ahead of a led beat), as delays into the score */
-function cues(beats) {
-	let t = 0;
-	const out = [];
-	beats.forEach((b, i) => {
-		const lead = i === 0 ? 0 : b.lead ?? 0;
-		if (lead > 0) out.push({
-			action: "air",
-			delay: t + 2,
-			index: String(i)
-		});
-		const at = t + lead * 2;
-		t = at + b.ticks * 2;
-		out.push({
-			action: "beat",
-			delay: at === 0 ? 0 : at + 2,
-			index: String(i)
-		});
-	});
-	return out;
-}
-/** the first beat of each chapter, in whole-film indices */
-function chapterHeads(beats) {
-	const heads = [];
-	beats.forEach((b, i) => {
-		if (heads.length === 0 || beats[heads[heads.length - 1]].ch !== b.ch) heads.push(i);
-	});
-	return heads;
-}
-/** the chapter menu's rows: head index, numeral, title, shot count, running time */
-function contents(beats, chapters) {
-	const heads = chapterHeads(beats);
-	return heads.map((head, i) => {
-		const nextHead = heads[i + 1] ?? beats.length;
-		const ch = chapters[beats[head].ch] ?? chapters[0];
-		return {
-			head,
-			n: ch.n,
-			secs: beats.slice(head, nextHead).reduce((t, b) => t + b.ticks, 0) * 2,
-			shots: nextHead - head,
-			title: ch.title
-		};
-	});
-}
-/** the seam a beat is entered through, or none when it neither cuts nor names one */
-function joinInto(beats, i, defaultJoin) {
-	const beat = beats[i];
-	return beat.cut || beat.join ? beat.join ?? defaultJoin : null;
-}
-/**
-* 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.
-*
-* A shot must move on screen, not on paper: frame-differencing a capture
-* of the cut showed authored tails of a few degrees reading as stills, so
-* a tail is a DIRECTION and a floor, not a distance — what the beat asks
-* for is honoured, and anything slower than a real slow move is stretched
-* up to one. The floors are per second. And it never travels past where
-* the next shot begins: at a cut that jumped BACKWARDS into the successor.
-*/
-function tailFor(beats, bi) {
-	const b = beats[bi];
-	const drift = b.toCam ?? {
-		...b.cam,
-		dolly: b.cam.dolly * 1.05,
-		pitch: b.cam.pitch + 1.4,
-		yaw: b.cam.yaw + 6
-	};
-	const next = beats[bi + 1];
-	const secs = b.ticks * 2;
-	const sgn = (d) => d < 0 ? -1 : 1;
-	const stretch = (key, floor) => {
-		const head = b.cam[key] ?? 0;
-		const d = (drift[key] ?? 0) - head;
-		const nose = next ? (next.cam[key] ?? 0) - head : 0;
-		const way = d !== 0 ? sgn(d) : nose !== 0 ? sgn(nose) : 1;
-		const reach = !next ? Infinity : sgn(nose) === way && nose !== 0 ? Math.abs(nose) : 0;
-		return head + way * Math.min(Math.max(Math.abs(d), floor), Math.max(Math.abs(d), reach));
-	};
-	const to = {
-		...drift,
-		dolly: stretch("dolly", b.cam.dolly * Math.min(.22, .022 * secs)),
-		ox: stretch("ox", Math.min(.07, .008 * secs)),
-		pitch: stretch("pitch", Math.min(6, .45 * secs)),
-		yaw: stretch("yaw", Math.min(22, 2 * secs))
-	};
-	return {
-		dolly: to.dolly,
-		fx: to.fx ?? b.cam.fx ?? 0,
-		fz: to.fz ?? b.cam.fz ?? 0,
-		lookY: to.lookY,
-		ox: to.ox,
-		pitch: to.pitch,
-		yaw: to.yaw
-	};
-}
-/** one waypoint of the camera spline, in the terms `c.Camera3D @through` takes */
-/**
-* THE PATH. Every beat contributes `ticks` waypoints, lerped from its
-* head to its tail, so waypoint count is screen time; a led beat first
-* contributes `lead` waypoints travelling in from the previous tail; a
-* `cut` beat splices the spline. `recut` marks the first beat as a splice
-* too — a cut film re-cut from a chapter's head has nothing behind it.
-*/
-function waypoints(beats, recut = false) {
-	const pts = [];
-	for (const [bi, b] of beats.entries()) {
-		const splice = b.cut === true || bi === 0 && recut;
-		const to = tailFor(beats, bi);
-		const lead = bi === 0 ? 0 : b.lead ?? 0;
-		const prev = pts[pts.length - 1];
-		if (lead > 0 && prev) for (let k = 1; k <= lead; k++) {
-			const f = k / (lead + 1);
-			pts.push({
-				dolly: lerp(prev.dolly, b.cam.dolly, f),
-				look: {
-					x: lerp(prev.look.x, b.cam.fx ?? 0, f),
-					y: lerp(prev.look.y, b.cam.lookY, f),
-					z: lerp(prev.look.z, b.cam.fz ?? 0, f)
-				},
-				pitch: lerp(prev.pitch, b.cam.pitch, f),
-				x: lerp(prev.x, b.cam.ox ?? 0, f),
-				y: 0,
-				yaw: lerp(prev.yaw, b.cam.yaw, f)
-			});
-		}
-		for (let k = 0; k < b.ticks; k++) {
-			const f = b.ticks === 1 ? 0 : k / (b.ticks - 1);
-			pts.push({
-				cut: splice && k === 0 ? true : void 0,
-				dolly: lerp(b.cam.dolly, to.dolly, f),
-				look: {
-					x: lerp(b.cam.fx ?? 0, to.fx ?? 0, f),
-					y: lerp(b.cam.lookY, to.lookY, f),
-					z: lerp(b.cam.fz ?? 0, to.fz ?? 0, f)
-				},
-				pitch: lerp(b.cam.pitch, to.pitch, f),
-				x: lerp(b.cam.ox ?? 0, to.ox ?? 0, f),
-				y: 0,
-				yaw: lerp(b.cam.yaw, to.yaw, f)
-			});
-		}
-	}
-	return pts;
-}
-/**
-* THE GOLDEN SCHEDULE: one object per film, everything above at once, in
-* the shape the fixtures are written in. A refactor of the engine that
-* changes any number in here has changed the film.
-*/
-function schedule(beats, chapters, defaultJoin) {
-	return {
-		beats: beats.map((b, i) => ({
-			ch: b.ch,
-			id: b.id,
-			join: joinInto(beats, i, defaultJoin),
-			lead: i === 0 ? 0 : b.lead ?? 0,
-			secsBefore: secsBefore(beats, i),
-			start: beatStart(beats, i),
-			ticks: b.ticks
-		})),
-		contents: contents(beats, chapters),
-		cues: cues(beats),
-		total: totalSecs(beats),
-		waypoints: waypoints(beats)
-	};
-}
-//#endregion
-//#region ../choreo/src/film/seam.ts
-/**
-* THE SEAM'S GATE: hold the cut until its still can be PAINTED.
-*
-* Every join that carries the outgoing frame carries it as a JPEG data
-* URL in the DOM, and a full-resolution JPEG handed to the DOM is not
-* paintable on the frame it is handed over — the browser decodes it off
-* the main thread. The lens, meanwhile, moves on that frame. So the seam
-* used to play backwards: three frames of the incoming shot at 60 Hz,
-* then the still of the outgoing one, then the transition over it.
-*
-* The gate decodes the frame into the memory cache first and holds the
-* whole cut — the lens snap, the overlay, an iris's projection — until
-* it is ready; the DOM image then paints from that decode on the frame
-* it is inserted. The outgoing shot stays live and moving for those few
-* milliseconds, which nobody can see: a cut two frames late reads as a
-* cut, a cut that shows the wrong picture does not.
-*
-* Three rules the film depends on:
-*
-* - **Nothing to decode, nothing to wait for.** A seam with no still (a
-*   cut, a flash, a dissolve the page held in its own glass) runs
-*   SYNCHRONOUSLY, on the caller's stack, exactly as it always did.
-* - **One seam at a time.** A cut that arrives while an earlier one is
-*   still waiting retires it; the earlier one never runs.
-* - **No seam waits for ever.** A decode that never comes back (a
-*   truncated capture, a browser without `HTMLImageElement.decode`) is
-*   given `cap` milliseconds and then the cut goes anyway.
-*/
-var Seam = class {
-	/** which cut is in hand; a later one retires an earlier one */
-	turn = 0;
-	/**
-	* Hold `cut` until `still` can be painted, or run it now if there is
-	* no still. `cap` is the longest the film will wait on a decode.
-	*/
-	hold(still, cut, cap = 120) {
-		if (!still) {
-			cut();
-			return;
-		}
-		const mine = this.turn += 1;
-		let ran = false;
-		const go = () => {
-			if (ran || mine !== this.turn) return;
-			ran = true;
-			cut();
-		};
-		const pre = new Image();
-		pre.src = still;
-		setTimeout(go, cap);
-		const decoding = pre.decode?.();
-		if (decoding) decoding.then(go, go);
-		else go();
-	}
-};
-//#endregion
-//#region ../choreo/src/film/film.gts
-/**
-* `<Film>` — a headless cutting room, in which a 3D scene takes the place
-* of the video track.
-*
-* The model is an editor: one clock, a shot list dropped onto it, and
-* components that read the clock — the lens, the joins, the type, the
-* voice, the timeline. The film is a pure function of that clock, which
-* is why a beat can be widened and the type, the voice, the transport
-* and the readout all re-time together. The picture is whatever the film
-* hands in through the `Picture` port; two reference films hand in a
-* WebGL page in an iframe (packages/choreo-gallery/realm/design/film-construct.md).
-*
-* THE CAMERA. The score authors the shot and the lens CHASES it: one
-* critically-damped stage here, the page's own chase as the second, so
-* two integrators in series bound the jerk. That is what gives the films
-* their hand-held quality, and it is exactly what forfeits seeking — so
-* a skip here is an edit, never a seek: the score is re-cut from a
-* chapter's head and replays.
-*
-* WHAT THE POSE ARGS MEAN (an orbit rig):
-*   yaw    → the orbit's azimuth, degrees
-*   pitch  → elevation, degrees
-*   dolly  → magnification: 1 fits the subject, bigger is tighter
-*   lookY  → how far up the subject the lens aims, from the rig's mid-height
-*   fx, fz → where on the ground the lens aims
-*   ox     → an off-centre frustum, fractions of the frame
-*/
-/**
-* ONE TICK IS TWO SECONDS, and every beat is a whole number of them.
-* `@through` splits its clock evenly between waypoints, so a beat buys
-* the screen time it wants by contributing that many waypoints to the
-* path — and a beat that wants to HOLD contributes the same pose several
-* times over, which a Catmull-Rom spline comes smoothly to rest on.
-*/
-/**
-* `?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.
-*/
-var AWAKE = new URLSearchParams(window.location.search).has("awake");
-/** how much each mood brightens the frame, for judging the ink against it */
-var GRADE_LUM = {
-	amber: 1.08,
-	chalk: 1.27,
-	ink: 1,
-	iron: .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 */ var EMPTY_BEAT = {
-	cam: {
-		dolly: 1,
-		lookY: 0,
-		pitch: 0,
-		yaw: 0
-	},
-	ch: 0,
-	id: "",
-	mode: "clear",
-	ticks: 1
-};
-var 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.
-*/
-var 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 at = (beat.clips ?? []).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;
-	});
-}
-var Film = class Film extends Component {
-	static {
-		decorateFieldV2(this.prototype, "graph", [tracked], function() {
-			return null;
-		});
-	}
-	#graph = (initializeDeferredDecorator(this, "graph"), void 0);
-	/**
-	* 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 {
-		decorateFieldV2(this.prototype, "picture", [tracked], function() {
-			return null;
-		});
-	}
-	#picture = (initializeDeferredDecorator(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 ?? .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)) 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 ?? .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 ?? .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 ?? .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
-		};
-	}
-	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;
-	/**
-	* 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 {
-		decorateFieldV2(this.prototype, "clipRows", [tracked], function() {
-			return [];
-		});
-	}
-	#clipRows = (initializeDeferredDecorator(this, "clipRows"), void 0);
-	/** the picture read back, per lane, for a freeze */ clipFreezes = /* @__PURE__ */ new Map();
-	clipNow = /* @__PURE__ */ new Map();
-	clipMedia = /* @__PURE__ */ 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 = /* @__PURE__ */ 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);
-			if (key !== (was ? `${this.all[was.index].id}:${lane}` : "")) {
-				this.clipFreezes.delete(lane);
-				if (clip.spec.kind === "freeze") {
-					if (jumped || clip.since > .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);
-		}
-		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 > .001) gone.volume = Math.max(0, gone.volume - .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 > .001) v.volume = Math.max(0, v.volume - .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) > .002) v.volume = v.volume + (closing - v.volume) * .28;
-		const rate = found.spec.rate ?? 1;
-		if (found.state === "active" && this.playing && this.scrubAt === null && !jumped) {
-			if (v.paused) {
-				v.currentTime = found.source;
-				v.playbackRate = rate;
-				v.play().catch(() => {});
-			} else if (Math.abs(v.currentTime - found.source) > .2) v.currentTime = found.source;
-		} else {
-			if (!v.paused) v.pause();
-			if (Math.abs(v.currentTime - found.source) > .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 * 2)));
-		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 = void 0;
-		};
-	});
-	/** 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(void 0)));
-			await new Promise((r) => requestAnimationFrame(() => r(void 0)));
-		} 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(void 0)));
-		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() {
-		if (!this.film) return;
-		const t = this.t;
-		const i = this.indexAt(t);
-		const jumped = this.jumped;
-		this.jumped = false;
-		const next = this.all[i + 1];
-		if (next && (next.lead ?? 0) > 0 && t >= this.secsBefore(i + 1) + 2 && 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 ?? void 0);
-			this.seamAt = -1;
-			this.seamLen = 0;
-			/**
-			* 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);
-		}
-		if (this.seamAt >= 0) {
-			const ms = Math.max(0, (t - this.seamAt) * 1e3);
-			for (const a of this.joinsEl?.getAnimations({ subtree: true }) ?? []) {
-				a.pause();
-				a.currentTime = ms;
-			}
-			if (t - this.seamAt > this.seamLen + .3 || t < this.seamAt) {
-				this.seamAt = -1;
-				this.joinKind = "";
-			}
-		}
-		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;
-		}
-		if (since < (this.voSecs[beat.id] ?? beat.ticks * 2 * .66) - .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;
-		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 = "";
-		}
-		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) : void 0;
-				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;
-		this.film?.voiceStop(1e3);
-		if (this.film?.outro) this.film.outro(4200);
-		else this.film?.duck(.35);
-	}
-	/** the beat on screen; the score names it, the front layer renders it */
-	static {
-		decorateFieldV2(this.prototype, "beatIndex", [tracked], function() {
-			return 0;
-		});
-	}
-	#beatIndex = (initializeDeferredDecorator(this, "beatIndex"), void 0);
-	static {
-		decorateFieldV2(this.prototype, "playing", [tracked], function() {
-			return true;
-		});
-	}
-	#playing = (initializeDeferredDecorator(this, "playing"), void 0);
-	static {
-		decorateFieldV2(this.prototype, "lap", [tracked], function() {
-			return 0;
-		});
-	}
-	#lap = (initializeDeferredDecorator(this, "lap"), void 0);
-	/** bumping this edits the score, which is how a finite film loops */
-	static {
-		decorateFieldV2(this.prototype, "booted", [tracked], function() {
-			return false;
-		});
-	}
-	#booted = (initializeDeferredDecorator(this, "booted"), void 0);
-	static {
-		decorateFieldV2(this.prototype, "joinKind", [tracked], function() {
-			return "";
-		});
-	}
-	#joinKind = (initializeDeferredDecorator(this, "joinKind"), void 0);
-	/** which seam is playing, and a key that replays it: bumped on every cut */
-	static {
-		decorateFieldV2(this.prototype, "joinStamp", [tracked], function() {
-			return 0;
-		});
-	}
-	#joinStamp = (initializeDeferredDecorator(this, "joinStamp"), void 0);
-	static {
-		decorateFieldV2(this.prototype, "joinOver", [tracked], function() {
-			return false;
-		});
-	}
-	#joinOver = (initializeDeferredDecorator(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 {
-		decorateFieldV2(this.prototype, "freeze", [tracked], function() {
-			return "";
-		});
-	}
-	#freeze = (initializeDeferredDecorator(this, "freeze"), void 0);
-	static {
-		decorateFieldV2(this.prototype, "dipColor", [tracked], function() {
-			return "#0d0905";
-		});
-	}
-	#dipColor = (initializeDeferredDecorator(this, "dipColor"), void 0);
-	/** the 'dip' join's veil colour */
-	static {
-		decorateFieldV2(this.prototype, "irisAt", [tracked], function() {
-			return "";
-		});
-	}
-	#irisAt = (initializeDeferredDecorator(this, "irisAt"), void 0);
-	/** where the iris closes to, as inline custom properties */
-	static {
-		decorateFieldV2(this.prototype, "fault", [tracked], function() {
-			return "";
-		});
-	}
-	#fault = (initializeDeferredDecorator(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(.001, this.glassLen);
-		const p = this.exact ? this.seamAt >= 0 ? (t - this.seamAt) / len : 1 : (performance.now() - this.beatAt) / 1e3 / len;
-		if (p >= 1) {
-			this.endSeam();
-			return;
-		}
-		if (this.glassName) {
-			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) * 1e3 + 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 {
-		decorateFieldV2(this.prototype, "ended", [tracked], function() {
-			return false;
-		});
-	}
-	#ended = (initializeDeferredDecorator(this, "ended"), void 0);
-	static {
-		decorateFieldV2(this.prototype, "yearNow", [tracked], function() {
-			return 1882;
-		});
-	}
-	#yearNow = (initializeDeferredDecorator(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 = void 0;
-	/** 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 = void 0;
-		};
-	});
-	/**
-	* 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 {
-		decorateFieldV2(this.prototype, "cycleStep", [tracked], function() {
-			return -1;
-		});
-	}
-	#cycleStep = (initializeDeferredDecorator(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 {
-		decorateFieldV2(this.prototype, "washInGlass", [tracked], function() {
-			return false;
-		});
-	}
-	#washInGlass = (initializeDeferredDecorator(this, "washInGlass"), void 0);
-	static {
-		decorateFieldV2(this.prototype, "cloudInGlass", [tracked], function() {
-			return false;
-		});
-	}
-	#cloudInGlass = (initializeDeferredDecorator(this, "cloudInGlass"), void 0);
-	static {
-		decorateFieldV2(this.prototype, "dimInGlass", [tracked], function() {
-			return false;
-		});
-	}
-	#dimInGlass = (initializeDeferredDecorator(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;
-	static {
-		decorateFieldV2(this.prototype, "idle", [tracked], function() {
-			return false;
-		});
-	}
-	#idle = (initializeDeferredDecorator(this, "idle"), void 0);
-	static {
-		decorateFieldV2(this.prototype, "scrubAt", [tracked], function() {
-			return null;
-		});
-	}
-	#scrubAt = (initializeDeferredDecorator(this, "scrubAt"), void 0);
-	/** the fraction the hand is holding while scrubbing, else null */
-	static {
-		decorateFieldV2(this.prototype, "hoverAt", [tracked], function() {
-			return null;
-		});
-	}
-	#hoverAt = (initializeDeferredDecorator(this, "hoverAt"), void 0);
-	/** the fraction under a resting pointer on the bar, else null */
-	static {
-		decorateFieldV2(this.prototype, "vol", [tracked], function() {
-			return Film.savedVol();
-		});
-	}
-	#vol = (initializeDeferredDecorator(this, "vol"), void 0);
-	/** the master fader, 0..1, remembered across visits */
-	static {
-		decorateFieldV2(this.prototype, "burst", [tracked], function() {
-			return "";
-		});
-	}
-	#burst = (initializeDeferredDecorator(this, "burst"), void 0);
-	/** the centre-screen glyph that confirms a play or a pause */
-	static {
-		decorateFieldV2(this.prototype, "paused", [tracked], function() {
-			return false;
-		});
-	}
-	#paused = (initializeDeferredDecorator(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 {
-		decorateFieldV2(this.prototype, "clock", [tracked], function() {
-			return "0:00";
-		});
-	}
-	#clock = (initializeDeferredDecorator(this, "clock"), void 0);
-	static {
-		decorateFieldV2(this.prototype, "full", [tracked], function() {
-			return false;
-		});
-	}
-	#full = (initializeDeferredDecorator(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) {
-		return `${Math.floor(Math.max(0, s) / 60)}:${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 < .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 {}
-		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) {
-		return !e.target?.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 = void 0;
-		};
-	});
-	wake = () => {
-		if (this.idle) this.idle = false;
-		window.clearTimeout(this.idleTimer);
-		this.idleTimer = window.setTimeout(() => {
-			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;
-			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 (packages/choreo-gallery/realm/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) document.exitFullscreen();
-		else 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;
-	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 {
-		decorateFieldV2(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 = (initializeDeferredDecorator(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 {
-		decorateFieldV2(this.prototype, "sound", [tracked], function() {
-			return false;
-		});
-	}
-	#sound = (initializeDeferredDecorator(this, "sound"), void 0);
-	static {
-		decorateFieldV2(this.prototype, "gate", [tracked], function() {
-			return false;
-		});
-	}
-	#gate = (initializeDeferredDecorator(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 {
-		decorateFieldV2(this.prototype, "ready", [tracked], function() {
-			return false;
-		});
-	}
-	#ready = (initializeDeferredDecorator(this, "ready"), void 0);
-	/** the scene is loaded and seated behind the gate — the door can open */
-	static {
-		decorateFieldV2(this.prototype, "rolling", [tracked], function() {
-			return false;
-		});
-	}
-	#rolling = (initializeDeferredDecorator(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 {
-		decorateFieldV2(this.prototype, "subsOn", [tracked], function() {
-			return new URLSearchParams(window.location.search).has("subs");
-		});
-	}
-	#subsOn = (initializeDeferredDecorator(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() {
-		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 = /* @__PURE__ */ new Set();
-	static {
-		decorateFieldV2(this.prototype, "lostStamp", [tracked], function() {
-			return 0;
-		});
-	}
-	#lostStamp = (initializeDeferredDecorator(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 !== void 0) return said;
-		const points = this.path.length;
-		return points > 0 ? Math.min(.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) * 2;
-	}
-	/**
-	* 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) {
-				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])] : void 0;
-	}
-	/** 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() {
-		if (this.overOf(this.beat) === "everything") return [
-			0,
-			.12,
-			.36
-		];
-		const wait = this.secsOf(this.beat.join ?? this.defaultJoin) + .45;
-		return [
-			wait,
-			wait + .12,
-			wait + .36
-		];
-	}
-	get sayAt() {
-		const b = this.beat;
-		const n = b.says?.length ?? 0;
-		const dur = b.ticks * 2;
-		const vo = this.voSecs[b.id];
-		const first = this.typeAt[2] + .3;
-		const last = Math.max(first + .8, Math.min(vo ? vo - .4 : dur * .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) => {
-		const rows = this.all.length;
-		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);
-		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;
-		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
-		};
-		this.gate = this.from === 0 && !this.booted;
-		const onLoad = () => {
-			const w = frame.contentWindow;
-			if (!w?.__film) return;
-			if (!rows && !this.all.length) return;
-			this.film = w.__film;
-			this.takeGlass(this.film);
-			this.film.volume?.(this.vol);
-			if (this.booted) return;
-			try {
-				w.__film.time(this.standing);
-				this.picture?.seat?.(w.__film);
-				this.dressPoster(w.__film);
-				this.snap((this.beats[0] ?? EMPTY_BEAT).cam);
-			} finally {
-				this.ready = true;
-			}
-			if (this.gate) {
-				if (this.wanted !== void 0) {
-					this.begin(this.wanted);
-					return;
-				}
-				this.posterAt = 0;
-				this.posterRaf ??= requestAnimationFrame(this.poster);
-				return;
-			}
-			/**
-			* 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.
-			*/ if (!this.booted && this.from > 0) this.begin(true);
-		};
-		frame.addEventListener("load", onLoad);
-		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) {
-			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 = void 0;
-			this.takeGlass(void 0);
-		};
-	});
-	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 = void 0;
-		};
-	});
-	plate = modifier((el) => {
-		this.plateEl = el;
-		this.rowEls = [...el.children];
-		return () => {
-			if (this.plateEl === el) {
-				this.plateEl = void 0;
-				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.
-			*/ this.midV[k] = secs ? (b - a) / secs * .45 : 0;
-			this.nowV[k] = this.midV[k];
-		}
-		this.sent = void 0;
-		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) {
-		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 = void 0;
-			return;
-		}
-		this.posterRaf = requestAnimationFrame(this.poster);
-		const film = this.film;
-		if (!film) return;
-		if (!this.posterAt) this.posterAt = stamp;
-		const t = (stamp - this.posterAt) / 1e3;
-		const c = (this.beats[0] ?? EMPTY_BEAT).cam;
-		const pose = {
-			dolly: c.dolly * (2.25 + .09 * Math.sin(t * .11 + 1.1)),
-			lookY: c.lookY + 1.4 + .6 * Math.sin(t * .15),
-			ox: (c.ox ?? 0) * .66,
-			pitch: c.pitch + 2.4 + 1.4 * Math.sin(t * .13),
-			yaw: c.yaw + 34 + 11 * Math.sin(t * .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) {
-		const blocks = (this.pageEl ?? this.frameEl ?? document.body).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);
-			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;
-		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;
-		}
-		if (this.paused && !this.exact) {
-			this.lastTick = stamp;
-			return;
-		}
-		const dt = Math.min(.08, this.lastTick ? (stamp - this.lastTick) / 1e3 : 0);
-		this.lastTick = stamp;
-		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) / 1e3;
-		this.driveSeam(film, this.t);
-		if (this.exact) this.now = { ...this.goal };
-		else this.chase(dt);
-		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 ?? .5) / Math.max(.8, Math.min(3, this.now.dolly));
-		const flown = Math.min(1, Math.max(0, since / (this.beat.ticks * 2)));
-		const bob = air * Math.sin(flown * Math.PI * 1.6) * smooth(Math.min(1, flown / .18)) * smooth(Math.min(1, (1 - flown) / .18));
-		const rise = this.followRise(film, dt);
-		const lookY = rise ? rise.lookY : this.beat.hold === "top" ? Math.max(1.4, film.height() * .62) - this.rigMid : this.beat.hold && !this.beat.to ? film.height() * .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.
-		*/ const clock = this.exact ? this.t : stamp / 1e3;
-		const wander = (a, b, c) => Math.sin(clock * a) * .6 + Math.sin(clock * b) * .3 + Math.sin(clock * c) * .1;
-		const hand = .17 / Math.max(.8, Math.min(3.4, this.now.dolly));
-		const want = {
-			az: (this.now.yaw + this.lean.x * .8 + hand * .25 * wander(.37, .93, 2.11)) * RAD,
-			el: (this.now.pitch - this.lean.y * .5 + bob + hand * 1.2 * wander(.29, 1.07, 1.83)) * RAD,
-			fx: this.now.fx ?? 0,
-			fz: this.now.fz ?? 0,
-			lookY: lookY + this.lean.y * .3 + (this.beat.hold ? 0 : bob * .3),
-			ox: ox - this.lean.x * .012,
-			zoom: Math.min(this.now.dolly, rise?.zoom ?? Infinity) * (1 + .0011 * wander(.23, .71, 1.51))
-		};
-		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;
-		const lift = Math.max(0, Math.min(.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(.1, 1 - lift))));
-			sent.lookY = lerp(from.lookY ?? 0, to.lookY ?? 0, tilt) + bob * .3;
-			sent.el = lerp(from.pitch, to.pitch, tilt) * RAD + bob * .5 * RAD;
-		}
-		film.pose({
-			...sent,
-			snap: this.exact ? true : void 0,
-			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
-		});
-		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;
-		}
-		const b = this.beat;
-		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;
-		}
-		const goal = this.sunGoal;
-		if (this.exact) {
-			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 = .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));
-		const at = this.exact ? this.t : this.secsBefore(this.absoluteIndex) + Math.min(this.beat.ticks * 2, since);
-		const total = this.totalSecs;
-		const prog = this.scrubAt ?? Math.min(1, at / total);
-		this.pageEl?.style.setProperty("--cf-prog", prog.toFixed(5));
-		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 * 2));
-		if (Array.isArray(beat.build) && this.rolling) {
-			const settle = beat.settle ?? 0;
-			const span0 = beat.ticks * 2;
-			const bl = Math.max(0, Math.min(1, (since - settle) / Math.max(.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 !== void 0) 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) * 2;
-		const left = Math.max(0, span - since);
-		const last = !this.all[this.absoluteIndex + 1];
-		const wait = this.typeAt[0] - .05;
-		const enter = smooth(Math.max(0, Math.min(1, (since - wait) / .4)));
-		const endOff = !this.exact && this.beatIndex === 0 ? 0 : 2;
-		const tailA = this.ended ? 0 : last ? smooth(Math.max(0, Math.min(1, (left - endOff - .5) / 2))) : smooth(Math.min(1, left / 1));
-		const typeA = Math.min(enter, tailA, this.reveal);
-		this.pageEl?.style.setProperty("--cf-type-a", typeA.toFixed(3));
-		const titleK = beat.mode === "title" ? smooth(Math.max(0, Math.min(1, (since - 1) / Math.max(.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 > .002 || this.stampOn)) {
-			this.stampOn = stampA > .002;
-			const night = luminance(film.palette().paper) < .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: .12,
-				size: 5.4,
-				track: this.worldTrack * .5,
-				weight: this.worldWeight
-			}, {
-				billboard: true,
-				opacity: stampA * .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);
-		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;
-				film.themeDur(beat.ticks * 2 * over / beat.hours.length);
-				film.theme(beat.hours[step], false);
-			}
-		}
-		const here = this.absoluteIndex;
-		const tail = (this.all[here + 1]?.ch ?? -1) !== beat.ch;
-		this.pageEl?.style.setProperty("--cf-ghost-a", ((tail ? 1 - smooth(Math.max(0, (local - .72) / .22)) : 1) * (1 - this.stampAt(beat, local))).toFixed(3));
-		if (beat.lightning !== void 0 && this.struck !== beat.id && since >= beat.lightning) {
-			this.struck = beat.id;
-			film.lightning();
-		}
-		if (beat.dissolve) film.modelFade(1 - smooth(Math.max(0, (local - .12) / .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 * 2 >= 8) {
-			const phase = this.beatIndex * .37 % 1 * .25;
-			const w = Math.max(0, Math.min(1, (local - .12 - phase) / .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);
-		this.pushWash(film);
-		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];
-				if (c.style !== void 0 && film.style && film.styleIndex) {
-					if (film.styleIndex() !== c.style) film.style(c.style);
-				}
-				film.time(c.year !== void 0 && this.args.clock ? this.args.clock.tAt(c.year) : this.standing);
-				film.ping(step < beat.cycle.length - 1 ? 0 : 99);
-			}
-		}
-		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 / .62)) : this.skyOn + (1 - this.skyOn) * Math.min(1, dt * 1.6);
-			film.sky("chapter", {
-				color: "rgba(252,247,236,0.34)",
-				family: this.worldFamily,
-				lines: beat.sky.lines,
-				shadow: "rgba(40,30,14,0.34)",
-				shadowBlur: .16,
-				size: beat.sky.size * 3.4,
-				weight: this.worldWeight,
-				track: beat.sky.track ?? this.worldTrack
-			}, {
-				billboard: true,
-				opacity: this.skyA = this.skyOn * (beat.sky.opacity ?? .4) * .78 * smooth(Math.max(0, Math.min(1, (local - .16) / .16))) * (1 - smooth(Math.max(0, Math.min(1, (local - .52) / .16)))),
-				x: -Math.sin(a) * d,
-				y: beat.sky.y,
-				z: -Math.cos(a) * d
-			});
-		} else if (this.skyA > .001 || this.skyOn > .001) {
-			this.skyOn = this.exact ? 0 : this.skyOn + (0 - this.skyOn) * Math.min(1, dt * 2.4);
-			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 * .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;
-		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`);
-			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;
-		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 < .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 ? .74 : 1;
-		const dark = luminance(p.paper) * (GB[this.grade] ?? 1) * dimmed * (1 - .25 * (beat.haze ?? 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;
-		this.paperNow = p.paper;
-		el.style.setProperty("--cf-paper", p.paper);
-		el.style.setProperty("--cf-paper-a", rgba(p.paper, .94));
-		el.style.setProperty("--cf-paper-b", rgba(p.paper, .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);
-		el.style.setProperty("--cf-accent", this.accentFor(dark, p.accent));
-		el.style.setProperty("--cf-rule", p.rule);
-		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;
-		const t = smooth(Math.min(1, local * 1.6)) * (.35 + .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" ? .35 : 1;
-		const out = local > .93 ? Math.max(0, (1 - local) / .07) : 1;
-		for (const [i, el] of rows.entries()) {
-			const depth = 1 - i / Math.max(1, rows.length - 1);
-			const rate = 1 + .22 * Math.sin(i * 2.4);
-			const dx = -11 * t * amp;
-			const dy = -(5 + 13 * depth) * t * amp * rate;
-			const sc = 1 + .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 : void 0) ?? null : null;
-		const on = !!want && want.rising;
-		if (this.exact) {
-			if (!on || !want) return null;
-			const span = Math.max(1.6, want.top - want.base + 1);
-			const aim = want.base + .58 * (want.top - want.base) - this.rigMid;
-			const zoom = Math.min(this.now.dolly, 7 / span);
-			const k = smooth(Math.min(1, want.k / .12)) * (1 - smooth(Math.max(0, (want.k - .86) / .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);
-			const aim = want.base + .58 * (want.top - want.base) - this.rigMid;
-			const zoom = Math.min(this.now.dolly, 7 / span);
-			const k = Math.min(1, dt / 1.1);
-			this.riseAim += (aim - this.riseAim) * (this.riseK < .02 ? 1 : k);
-			this.riseZoom += (zoom - this.riseZoom) * (this.riseK < .02 ? 1 : k);
-		}
-		this.riseK += ((on ? 1 : 0) - this.riseK) * Math.min(1, dt / .9);
-		if (this.riseK < .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 : void 0);
-			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;
-		const gone = Math.min(1, Math.max(0, (local - .78) / .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 - .04 - i * .12) / .16));
-			const undraw = Math.min(1, Math.max(0, gone * (1 + i * .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);
-				film.traceFade(`t${i}`, 1 - undraw);
-			}
-		}
-		if (beat.to) drew = Math.max(drew, Math.min(1, Math.max(0, (since - .04) / .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;
-		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 ?? .14)) {
-			this.markSeated = true;
-			this.markFrom = Math.max(.4, film.height() - 3.4);
-		}
-		const raw = Math.min(1, Math.max(0, (local - .04) / .2));
-		const c1 = .45;
-		const p = raw - 1;
-		const rise = raw >= 1 ? 1 : 1 + 1.45 * p * p * p + c1 * p * p;
-		const y = m.to * rise;
-		const a = m.bearing * RAD;
-		const v = film.view();
-		this.markFace = this.exact ? v.az : this.markFace + wrapAngle(v.az - this.markFace) * Math.min(1, dt * 1.6);
-		film.sky("mark", {
-			color: "rgba(78,71,56,0.3)",
-			family: this.worldFamily,
-			lines: m.lines,
-			shadow: "rgba(255,252,244,0.28)",
-			shadowBlur: .14,
-			size: m.size * 2.7,
-			track: this.worldTrack,
-			weight: this.worldWeight
-		}, {
-			opacity: .62 * smooth(Math.max(0, Math.min(1, (local - (m.at ?? .14)) / .16))) * (1 - smooth(Math.max(0, Math.min(1, (local - ((m.at ?? .14) + (m.hold ?? .34))) / .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,
-			y: this.markFrom + Math.max(0, local - (m.at ?? .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 ?? .14)) * 7, Math.cos(this.markAz) * 26 - Math.sin(this.markAz) * this.markOff);
-		if (local > (m.at ?? .14) - .02 && local < (m.at ?? .14) + (m.hold ?? .34) + .02 && (!seen.on || seen.x < v.w * .12 || seen.x > v.w * .88)) {
-			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 * .9);
-		}
-		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 * .72, y, Math.cos(a) * m.r * .72);
-			const to = film.project(0, y, 0);
-			tether.setAttribute("x1", String(from.x * sx));
-			tether.setAttribute("y1", String(from.y * sy));
-			const tk = Math.min(1, Math.max(0, (raw - .4) / .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 > .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;
-		}
-		if (beat.to[1] > film.height() + .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();
-		const sx = host.width / v.w;
-		const sy = host.height / v.h;
-		const x2 = p.x * sx;
-		const y2 = p.y * sy;
-		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 - .12) / .16));
-		const outK = Math.min(1, Math.max(0, (local - .78) / .16));
-		const draw = gate ? inK : 0;
-		const lift = gate ? outK : 1;
-		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));
-		line.style.opacity = draw > .01 && lift < .99 ? (.75 * typeA).toFixed(3) : "0";
-		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 > .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 * 2;
-		const t0 = ((this.voSecs[beat.id] ?? secs * .66) * (st.at ?? .06) + this.typeAt[0]) / secs;
-		const rise = .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;
-		for (let i = 0; i < 4; i++) film.clearTrace(`t${i}`);
-		const mag = (beat.cam.dolly + (beat.toCam?.dolly ?? beat.cam.dolly)) / 2;
-		beat.trace?.forEach((spec, i) => {
-			const r = Math.max(.03, Math.min(.2, (spec.wide ? .13 : .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 * 2);
-				} else if (deep !== "everything" && (join === "blend" || join === "melt" || join === "dip")) {
-					const live = beat.theme === void 0 && beat.wx === void 0 && beat.style === void 0 && beat.winter === void 0 && beat.grade === void 0 && !beat.hours;
-					if (!film.dissolve(join, void 0, live)) {
-						const shot = film.snapshot();
-						held = shot.length > 64 ? shot : "";
-					}
-				} else if (join !== "cut") {
-					const shot = film.snapshot();
-					held = shot.length > 64 ? shot : "";
-				}
-				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;
-					if (beat.cut || join === "wipe") this.snap(beat.cam, this.tailFor(index), beat.ticks * 2);
-					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") {
-						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") {
-							const v = film.view();
-							const p = beat.to ? film.project(...beat.to) : void 0;
-							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.
-		*/ 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);
-			}
-		}
-		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 film.time(this.standing);
-		if (beat.sky) {
-			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) {
-			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;
-			}
-			this.markSeated = false;
-			this.markFrom = (beat.mark.to ?? 8) * .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()) 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) {
-		const hard = instant || !!beat.cut || beat.join !== void 0 && this.holdsStill(beat.join);
-		const film = this.film;
-		if (!film) return;
-		if (beat.theme !== void 0) 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 !== void 0) film.wx(beat.wx, hard || !!beat.wxCut);
-		if (beat.winter !== void 0) film.winter(beat.winter);
-		film.mix(beat.mix ?? null);
-		film.tag(Array.isArray(beat.build) && beat.build[1] > beat.build[0]);
-		film.rain(beat.rain ?? null);
-		film.rim(beat.rim ?? null, true);
-		film.quality?.(beat.quality ?? null);
-		film.grass?.(beat.grass ?? false);
-		if (beat.theme !== void 0) this.hourNow = beat.theme;
-		film.city?.(beat.city ?? "glass", this.hourNow === 3 ? .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 !== void 0) {
-				film.theme(t, true);
-				break;
-			}
-		}
-		for (let i = index; i >= 0; i -= 1) {
-			const w = this.all[i]?.wx;
-			if (w !== void 0) {
-				film.wx(w, true);
-				break;
-			}
-		}
-		let winter = null;
-		for (let i = index; i >= 0; i -= 1) if (this.all[i]?.winter !== void 0) {
-			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") {
-			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);
-			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 `packages/choreo-gallery/realm/design/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;
-		const next = delta < 0 && here > heads[i] ? 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);
-		this.snap(this.all[index].cam, hard ? void 0 : this.tailFor(0), hard ? void 0 : this.all[index].ticks * 2);
-	}
-	/** 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;
-		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 !== void 0) 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 packages/choreo-gallery/realm/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) : void 0;
-				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 = void 0;
-		};
-	});
-	/**
-	* 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 ?? .4) + (1 - f) * 2.2 - 1.1,
-				el: (base?.el ?? .4) + swing * .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);
-		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 = void 0;
-		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);
-			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);
-		}
-		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) {
-			this.gate = false;
-			if (withSound !== this.sound) this.hear();
-			return;
-		}
-		if (!this.film) {
-			this.wanted = withSound;
-			return;
-		}
-		this.gate = false;
-		if (this.posterRaf !== void 0) {
-			cancelAnimationFrame(this.posterRaf);
-			this.posterRaf = void 0;
-		}
-		this.sound = withSound;
-		this.film.sound(withSound);
-		if (this.exact) {
-			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);
-		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 * 2);
-		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) * 2;
-		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 {
-		decorateFieldV2(this.prototype, "menu", [tracked], function() {
-			return false;
-		});
-	}
-	#menu = (initializeDeferredDecorator(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(templateFactory({
-			"id": "yWP73lx5",
-			"block": "[[[10,0],[15,0,[29,[\"cf-page is-\",[30,1],\"\\n    \",[52,[30,0,[\"embed\"]],\"is-embed\"],\"\\n    \",[52,[30,0,[\"idle\"]],\"is-idle\"]]]],[14,\"data-scopedcss-82d0acbd35-8cfaa93df9\",\"\"],[12],[1,\"\\n\"],[1,\"  \"],[11,0],[16,0,[29,[\"cf-stage is-grade-\",[30,0,[\"grade\"]],\" \",[52,[30,0,[\"subsOn\"]],\"has-subs\"]]]],[24,\"data-scopedcss-82d0acbd35-8cfaa93df9\",\"\"],[4,[30,0,[\"mount\"]],null,null],[4,[32,0],[\"click\",[30,0,[\"tap\"]]],null],[4,[32,0],[\"dblclick\",[30,0,[\"tapTwice\"]]],null],[12],[1,\"\\n\"],[1,\"    \"],[11,0],[24,0,\"cf-live\"],[24,\"data-scopedcss-82d0acbd35-8cfaa93df9\",\"\"],[4,[30,0,[\"liveWrap\"]],null,null],[12],[1,\"\\n      \"],[10,\"iframe\"],[14,0,\"cf-frame\"],[15,\"src\",[30,0,[\"src\"]]],[15,\"srcdoc\",[30,0,[\"srcdoc\"]]],[15,\"title\",[30,0,[\"frameTitle\"]]],[14,\"loading\",\"eager\"],[14,\"data-scopedcss-82d0acbd35-8cfaa93df9\",\"\"],[12],[13],[1,\"\\n    \"],[13],[1,\"\\n\\n\"],[41,[51,[30,0,[\"washInGlass\"]]],[[[1,\"      \"],[10,0],[15,0,[29,[\"cf-scrim cf-scrim-\",[30,0,[\"beat\",\"mode\"]],\"\\n          \",[52,[30,0,[\"beat\",\"bare\"]],\"is-bare\"]]]],[14,\"aria-hidden\",\"true\"],[14,\"data-scopedcss-82d0acbd35-8cfaa93df9\",\"\"],[12],[13],[1,\"\\n\"]],[]],null],[1,\"\\n\"],[1,\"    \"],[11,0],[16,0,[29,[\"cf-joins \",[52,[30,0,[\"joinOver\"]],\"is-over\"]]]],[24,\"data-scopedcss-82d0acbd35-8cfaa93df9\",\"\"],[4,[30,0,[\"joinsWrap\"]],null,null],[12],[1,\"\\n      \"],[8,[32,1],[[24,\"data-scopedcss-82d0acbd35-8cfaa93df9\",\"\"]],[[\"@kind\",\"@stamp\",\"@freeze\",\"@irisAt\",\"@dipColor\",\"@seekable\",\"@presentations\"],[[30,0,[\"joinKind\"]],[30,0,[\"joinStamp\"]],[30,0,[\"freeze\"]],[30,0,[\"irisAt\"]],[30,0,[\"dipColor\"]],[30,0,[\"exact\"]],[30,0,[\"presentations\"]]]],null],[1,\"\\n    \"],[13],[1,\"\\n\"],[41,[51,[30,0,[\"cloudInGlass\"]]],[[[1,\"      \"],[10,0],[14,0,\"cf-cloud\"],[14,\"aria-hidden\",\"true\"],[14,\"data-scopedcss-82d0acbd35-8cfaa93df9\",\"\"],[12],[13],[1,\"\\n\"]],[]],null],[1,\"\\n\"],[41,[51,[30,0,[\"dimInGlass\"]]],[[[1,\"      \"],[11,0],[24,0,\"cf-dim\"],[24,\"aria-hidden\",\"true\"],[24,\"data-scopedcss-82d0acbd35-8cfaa93df9\",\"\"],[4,[30,0,[\"dimEl\"]],null,null],[12],[13],[1,\"\\n\"]],[]],null],[1,\"\\n\"],[1,\"    \"],[8,[32,2],[[24,\"data-scopedcss-82d0acbd35-8cfaa93df9\",\"\"]],[[\"@wire\"],[[30,0,[\"trackEls\"]]]],null],[1,\"\\n\\n\"],[41,[30,0,[\"booted\"]],[[[1,\"      \"],[8,[32,3],[[24,\"data-scopedcss-82d0acbd35-8cfaa93df9\",\"\"]],[[\"@beat\",\"@chapterN\",\"@rolling\",\"@typeAt\",\"@sayAt\",\"@glyphFit\",\"@glyphTone\",\"@mount\"],[[30,0,[\"beat\"]],[30,0,[\"chapter\",\"n\"]],[30,0,[\"rolling\"]],[30,0,[\"typeAt\"]],[30,0,[\"sayAt\"]],[30,0,[\"glyphFit\"]],[30,0,[\"glyphTone\"]],[30,0,[\"plate\"]]]],null],[1,\"\\n\\n      \"],[8,[32,4],[[24,\"data-scopedcss-82d0acbd35-8cfaa93df9\",\"\"]],[[\"@step\",\"@word\"],[[30,0,[\"cycleStep\"]],[30,0,[\"stamp\"]]]],null],[1,\"\\n\\n\"],[42,[28,[31,3],[[28,[31,3],[[30,0,[\"clipRows\"]]],null]],null],\"lane\",[[[1,\"        \"],[8,[32,5],[[24,\"data-scopedcss-82d0acbd35-8cfaa93df9\",\"\"]],[[\"@key\",\"@spec\",\"@src\",\"@freeze\",\"@state\",\"@lane\",\"@mount\"],[[30,2,[\"key\"]],[30,2,[\"spec\"]],[30,2,[\"src\"]],[30,2,[\"freeze\"]],[30,2,[\"state\"]],[30,2,[\"lane\"]],[30,0,[\"clipEl\"]]]],null],[1,\"\\n\"]],[2]],null],[1,\"\\n\"],[41,[52,[30,0,[\"rolling\"]],[30,0,[\"hasPhoto\"]],false],[[[1,\"        \"],[8,[32,6],[[24,\"data-scopedcss-82d0acbd35-8cfaa93df9\",\"\"]],[[\"@beat\",\"@src\",\"@missing\"],[[30,0,[\"beat\"]],[30,0,[\"photoSrc\"]],[30,0,[\"missing\"]]]],null],[1,\"\\n\"]],[]],null],[1,\"\\n\"],[41,[30,0,[\"subs\"]],[[[1,\"        \"],[8,[32,7],[[24,\"data-scopedcss-82d0acbd35-8cfaa93df9\",\"\"]],[[\"@line\"],[[30,0,[\"beat\",\"vo\"]]]],null],[1,\"\\n\"]],[]],null],[1,\"\\n\"],[41,[30,0,[\"fault\"]],[[[1,\"        \"],[10,2],[14,0,\"cf-fault\"],[14,\"data-scopedcss-82d0acbd35-8cfaa93df9\",\"\"],[12],[1,\"⚠ \"],[1,[30,0,[\"fault\"]]],[13],[1,\"\\n\"]],[]],null],[1,\"\\n\"],[41,[30,0,[\"railOn\"]],[[[1,\"        \"],[8,[32,8],[[24,\"data-scopedcss-82d0acbd35-8cfaa93df9\",\"\"]],[[\"@chapter\",\"@marks\",\"@labels\",\"@readout\",\"@pick\"],[[30,0,[\"chapter\"]],[30,0,[\"transport\"]],[30,0,[\"railLabels\"]],[30,0,[\"railReadout\"]],[30,0,[\"pick\"]]]],null],[1,\"\\n\"]],[]],null]],[]],null],[1,\"\\n\"],[41,[30,0,[\"booted\"]],[[[1,\"      \"],[8,[32,9],[[24,\"data-scopedcss-82d0acbd35-8cfaa93df9\",\"\"]],[[\"@onCamera3D\",\"@onPerform\",\"@camera3dFrom\"],[[30,0,[\"shot\"]],[30,0,[\"dispatch\"]],[30,0,[\"openPose\"]]]],[[\"default\"],[[[[1,\"\\n        \"],[11,\"i\"],[24,0,\"cf-rig\"],[24,\"aria-hidden\",\"true\"],[24,\"data-scopedcss-82d0acbd35-8cfaa93df9\",\"\"],[4,[32,10],null,[[\"id\"],[\"rig\"]]],[4,[30,0,[\"grabScore\"]],[[30,3]],null],[12],[13],[1,\"\\n\"],[41,[30,0,[\"scoreOn\"]],[[[1,\"          \"],[8,[30,3,[\"Sequence\"]],[[24,\"data-scopedcss-82d0acbd35-8cfaa93df9\",\"\"]],[[\"@name\"],[[30,0,[\"filmName\"]]]],[[\"default\"],[[[[1,\"\\n            \"],[8,[30,3,[\"Camera3D\"]],[[24,\"data-scopedcss-82d0acbd35-8cfaa93df9\",\"\"]],[[\"@name\",\"@through\",\"@duration\",\"@ease\",\"@settle\",\"@tension\"],[\"film\",[30,0,[\"path\"]],[30,0,[\"filmSeconds\"]],\"linear\",[30,0,[\"settle\"]],0.34]],null],[1,\"\\n\"],[42,[28,[31,3],[[28,[31,3],[[30,0,[\"windows\"]]],null]],null],null,[[[1,\"              \"],[8,[30,3,[\"Attach\"]],[[24,\"data-scopedcss-82d0acbd35-8cfaa93df9\",\"\"]],[[\"@region\",\"@at\",\"@delay\",\"@duration\",\"@end\",\"@exact\"],[[30,4,[\"region\"]],[28,[32,11],[\"film\"],null],[30,4,[\"start\"]],[30,4,[\"length\"]],[30,4,[\"end\"]],[30,0,[\"exact\"]]]],null],[1,\"\\n\"]],[4]],null],[41,[51,[30,0,[\"exact\"]]],[[[42,[28,[31,3],[[28,[31,3],[[30,0,[\"cues\"]]],null]],null],null,[[[1,\"                \"],[8,[30,3,[\"Perform\"]],[[24,\"data-scopedcss-82d0acbd35-8cfaa93df9\",\"\"]],[[\"@at\",\"@delay\",\"@action\",\"@target\"],[[28,[32,11],[\"film\"],null],[30,5,[\"delay\"]],[30,5,[\"action\"]],[30,5,[\"index\"]]]],null],[1,\"\\n\"]],[5]],null],[1,\"              \"],[8,[30,3,[\"Perform\"]],[[24,\"data-scopedcss-82d0acbd35-8cfaa93df9\",\"\"]],[[\"@action\"],[\"lap\"]],null],[1,\"\\n\"]],[]],null],[1,\"          \"]],[]]]]],[1,\"\\n\"]],[]],null],[1,\"      \"]],[3]]]]],[1,\"\\n\"]],[]],null],[1,\"\\n\"],[41,[30,0,[\"gate\"]],[[[1,\"      \"],[8,[32,12],[[24,\"data-scopedcss-82d0acbd35-8cfaa93df9\",\"\"]],[[\"@film\"],[[30,0,[\"handle\"]]]],[[\"default\"],[[[[1,\"\\n        \"],[18,10,[[30,6]]],[1,\"\\n      \"]],[6]]]]],[1,\"\\n\"]],[]],null],[1,\"\\n\"],[41,[30,0,[\"ended\"]],[[[1,\"      \"],[8,[32,13],[[24,\"data-scopedcss-82d0acbd35-8cfaa93df9\",\"\"]],[[\"@film\"],[[30,0,[\"handle\"]]]],[[\"default\"],[[[[1,\"\\n        \"],[18,11,[[30,7]]],[1,\"\\n      \"]],[7]]]]],[1,\"\\n\"]],[]],null],[1,\"  \"],[13],[1,\"\\n\\n\"],[41,[30,0,[\"menu\"]],[[[1,\"    \"],[8,[32,14],[[24,\"data-scopedcss-82d0acbd35-8cfaa93df9\",\"\"]],[[\"@title\",\"@sub\",\"@contents\",\"@pick\"],[[30,8],[52,[30,9],[30,9],\"chapters\"],[30,0,[\"contents\"]],[30,0,[\"pick\"]]]],null],[1,\"\\n\"]],[]],null],[1,\"\\n\"],[41,[30,0,[\"burst\"]],[[[1,\"    \"],[8,[32,15],[[24,\"data-scopedcss-82d0acbd35-8cfaa93df9\",\"\"]],[[\"@kind\",\"@done\"],[[30,0,[\"burst\"]],[30,0,[\"burstDone\"]]]],null],[1,\"\\n\"]],[]],null],[1,\"\\n  \"],[8,[32,16],[[24,\"data-scopedcss-82d0acbd35-8cfaa93df9\",\"\"]],[[\"@idle\",\"@away\",\"@live\",\"@sound\",\"@loud\",\"@vol\",\"@volStyle\",\"@fade\",\"@full\",\"@clock\",\"@duration\",\"@chapter\",\"@subsOn\",\"@menu\",\"@debug\",\"@build\",\"@playbar\",\"@scrubAt\",\"@tip\",\"@slider\",\"@trackWrap\",\"@scrubDown\",\"@scrubMove\",\"@scrubUp\",\"@scrubLeave\",\"@toggle\",\"@prev\",\"@next\",\"@hear\",\"@cc\",\"@toc\",\"@restart\",\"@screen\"],[[30,0,[\"idle\"]],[30,0,[\"gate\"]],[30,0,[\"live\"]],[30,0,[\"sound\"]],[30,0,[\"loud\"]],[30,0,[\"vol\"]],[30,0,[\"volStyle\"]],[30,0,[\"fade\"]],[30,0,[\"full\"]],[30,0,[\"clock\"]],[30,0,[\"duration\"]],[30,0,[\"chapter\"]],[30,0,[\"subsOn\"]],[30,0,[\"menu\"]],[30,0,[\"debug\"]],[30,0,[\"build\"]],[30,0,[\"playbar\"]],[30,0,[\"scrubAt\"]],[30,0,[\"tip\"]],[30,0,[\"slider\"]],[30,0,[\"trackWrap\"]],[30,0,[\"scrubDown\"]],[30,0,[\"scrubMove\"]],[30,0,[\"scrubUp\"]],[30,0,[\"scrubLeave\"]],[30,0,[\"toggle\"]],[30,0,[\"prev\"]],[30,0,[\"next\"]],[30,0,[\"hear\"]],[30,0,[\"cc\"]],[30,0,[\"toc\"]],[30,0,[\"restart\"]],[30,0,[\"screen\"]]]],null],[1,\"\\n\\n\"],[1,\"  \"],[18,12,[[30,0,[\"takePicture\"]]]],[1,\"\\n  \"],[8,[32,17],[[24,\"data-scopedcss-82d0acbd35-8cfaa93df9\",\"\"]],[[\"@onCompile\"],[[30,0,[\"takeGraph\"]]]],[[\"default\"],[[[[1,\"\\n    \"],[18,13,[[30,0,[\"handle\"]]]],[1,\"\\n  \"]],[]]]]],[1,\"\\n\"],[13],[1,\"\\n\\n\"],[10,\"style\"],[12],[1,\"\\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     — the playhead, the current chapter, the seal, the point a line\\n     is drawn to — 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 — 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 — 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 — the\\n       photograph's own plate, the rake of a rule — 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 — 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 — 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 — the demo well, the\\n       theater, a phone — 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 — 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 — 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 —\\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 —\\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 — 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 —\\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 — you are watching a building get assembled — 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 — 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 — 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 — 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 — 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 — 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 — 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 — 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 — 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 — 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 — 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 — 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 — 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 — 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 — 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 — the leader is re-pointed at the building on each one — 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 — 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 — 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 — 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 — 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 — 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 — 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 — 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 —\\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\\\" — 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 — 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 — 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 — 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,…) 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       — 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 — 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 — 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 —\\n     the ghost furthest, the big glyph next, the reading lines least\\n     — 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 — 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 — 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 — 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 → -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 —\\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 —\\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 — 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 — the name and its key — 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 — 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 —\\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 — the same real estate the title beat's type owns — 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) — 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 — the size it was drawn at — 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 — building\\n       in one half, wordmark in the other — 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 — 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 — 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 — 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 — 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 — 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 — 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 —\\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 —' 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 — 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 — 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 — 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\"],[13]],[\"@name\",\"row\",\"c\",\"w\",\"cue\",\"f\",\"f\",\"@menuTitle\",\"@menuSub\",\"&gate\",\"&end\",\"&picture\",\"&default\"],[\"if\",\"unless\",\"each\",\"-track-array\",\"yield\"]]",
-			"moduleName": "/home/runner/work/boxel/boxel/packages/choreo/src/film/film.gts",
-			"scope": () => [
-				on,
-				Joins,
-				Track,
-				Plate,
-				Stamp,
-				Clip,
-				Insert,
-				Captions,
-				Rail,
-				Choreo,
-				MotionModifier,
-				at,
-				Gate,
-				EndCard,
-				Menu,
-				Burst,
-				Player,
-				FilmGraph
-			],
-			"isStrictMode": true
-		}), this);
-	}
-};
-//#endregion
-export { clipWindow as C, clipLanes as S, resolveClips as T, lerp as _, chapterHeads as a, rgba as b, joinInto as c, tailFor as d, totalSecs as f, hex as g, clamp01 as h, beatStart as i, schedule as l, RAD as m, Seam as n, contents as o, waypoints as p, TICK as r, cues as s, Film as t, secsBefore as u, luminance as v, resolveClip as w, smooth as x, mmss as y };