@amg555/frameforge-mcp 2.3.2 → 2.3.3

package/plugins/video-pipeline/skills/video-pipeline/assets/project/ANIMATION_GUIDE.md

@@ -0,0 +1,257 @@
+# ANIMATION_GUIDE.md — Agent Context for HTML Video Projects
+
+> This file is loaded as context by the model before it writes any scene code.
+> It encodes the contract, the four storyboard gates, and the six determinism rules
+> that make headless-Chrome rendering reproducible and parallel.
+>
+> Source: ClaudeAnimationBase ANIMATION_GUIDE.md + awesomeclaude.ai corpus study (703 prompts).
+
+---
+
+## The Contract
+
+A video is a set of scene files where **every pixel is a pure function of time `t`**.
+
+The renderer owns the clock. Scenes never call `Date.now()`, `performance.now()`,
+`setTimeout`, `setInterval`, `Math.random()`, or any module-level mutable counter.
+The renderer injects a virtual clock shim before the page loads, advances it one frame
+at a time, and screenshots the result. Frame 400 can be captured hours after frame 399
+and the scene must not care.
+
+---
+
+## Step 0 — Beat Sheet First
+
+**Never write scene code before the storyboard passes all four gates.**
+
+The workflow is always:
+
+1. Write a beat sheet (title, shots, events, reads, transitions).
+2. Reply with the beat sheet and four keyframe descriptions **only**. Stop.
+3. Wait for approval.
+4. Only after approval: write the scene files.
+
+Fixing a line in a beat sheet costs one message. Fixing a finished scene costs a rewrite.
+
+---
+
+## The Four Storyboard Gates
+
+Run `node scripts/storyboard-validator.mjs STORYBOARD.md` to enforce these automatically.
+
+### Gate 1 — Every shot has an EVENT
+
+An event is something that **physically happens** in the shot. It is not a description
+of what the viewer sees, and it is not a mood adjective.
+
+| ❌ FAILS | ✅ PASSES |
+|---|---|
+| "Clawd stands in a meadow." | "Clawd turns to face the viewer and extends one hand." |
+| "A beautiful space scene." | "A comet crosses the frame left-to-right over 4 seconds." |
+| "We see the city at night." | "The city's lights flicker off one by one from the edges in." |
+
+### Gate 2 — Reads must not overlap
+
+Each shot has a list of **reads** — the discrete things a viewer must understand,
+with non-overlapping start and end timestamps.
+
+```
+# BAD — 0.0–1.5 and 1.0–2.5 overlap from 1.0–1.5
+reads:
+  - 0.0–1.5: Viewer recognises the character.
+  - 1.0–2.5: Viewer understands she is running away.
+
+# GOOD
+reads:
+  - 0.0–2.0: Viewer recognises the character.
+  - 2.0–4.0: Viewer understands she is running away.
+```
+
+### Gate 3 — Every seam has a named transition
+
+This includes the film open (transition_in on Shot 1) and film close
+(transition_out on the last shot). A storyboard that starts or ends
+without a declared transition fails.
+
+Recognised transition names:
+`cut` `fade-from-black` `fade-to-black` `dissolve` `wipe-left` `wipe-right`
+`iris-in` `iris-out` `cross-dissolve` `push-left` `push-right` `flash` `dip-to-white`
+
+### Gate 4 — No text on screen
+
+"Lost" must be acted, not captioned. "Heartbroken" must be shown, not written.
+
+The model **may not** write `text()`, `wallCard()`, `stamp()`, or `codeCard()` calls
+that convey plot-critical information (character names, place names, dates, emotions,
+narrative exposition). These helpers exist for UI/diagram/explainer content only,
+not for storytelling that belongs in the direction.
+
+---
+
+## Six Determinism Rules
+
+These rules are what make the render reproducible, parallel, and resumable.
+
+### Rule 1 — Read time, never count frames
+
+```js
+// ❌ BAD — frame counter mutates across calls
+let frame = 0
+layer('x').on(() => { frame++; return { opacity: frame / 30 } })
+
+// ✅ GOOD — pure function of t
+layer('x').on(t => ({ opacity: Math.min(1, t / 1.0) }))
+```
+
+### Rule 2 — Seed everything with `hash(i)`
+
+`hash(i)` in `reel/engine.js` is a deterministic integer hash of its index.
+Use it wherever you need a stable pseudo-random value (star positions, brush seeds,
+particle offsets). Never use `Math.random()` inside a scene file.
+
+```js
+import { hash } from './reel/engine.js'
+
+// Star field — same every render
+for (let i = 0; i < 200; i++) {
+  const x = (hash(i)     % 1920)
+  const y = (hash(i + 1) % 1080)
+  // ...
+}
+```
+
+**Boil wobble exception:** hand-drawn wobble is deliberately re-seeded 12 times
+per second so it looks chaotic while remaining reproducible:
+
+```js
+const boilSeed = Math.floor(t * 12) // same bucket for every frame in that 1/12s window
+const wobble   = (hash(boilSeed) % 7) - 3  // –3 to +3 px
+```
+
+### Rule 3 — No integrating physics
+
+Never integrate velocity per tick. Use closed-form motion or precompute the
+simulation into an array before the layer is registered.
+
+```js
+// ❌ BAD — position depends on previous frame
+let vx = 0, x = 0
+layer('ball').on(() => { vx += 0.1; x += vx; return { left: x } })
+
+// ✅ GOOD — closed-form quadratic
+layer('ball').on(t => ({ left: 0.5 * 120 * t * t + 'px' }))
+```
+
+### Rule 4 — Await `document.fonts.ready` before frame 0
+
+The renderer calls `await page.evaluate(() => document.fonts.ready)` before
+advancing the clock. Scene code must not assume fonts are available before that
+await resolves — if a font load fails, every text frame renders in the system
+fallback and the entire video looks wrong.
+
+### Rule 5 — ffmpeg owns audio
+
+Never capture audio from the browser. Audio is a separate pass:
+
+1. TTS generates audio → word-level timestamps from `scripts/transcribe.py`
+2. Scene resolves animation anchors from those timestamps via `cuePhrase()`
+3. `node scripts/render.mjs full` renders video frames (silent)
+4. `uv run scripts/mix_audio.py` builds the final audio track
+5. `node scripts/render.mjs mux` merges with `-c:v copy` (video stream untouched)
+
+`cuePhrase(phrase)` **throws a fatal build error** if the phrase cannot be found
+in the loaded captions track. If a phrase stops being spoken, the build fails and
+names the missing words — re-recording voice-over can never silently desync the film.
+
+### Rule 6 — Tag BT.709 and use `-t` not `-shortest`
+
+The renderer's ffmpeg encode always includes:
+
+```
+-color_primaries bt709 -color_trc bt709 -colorspace bt709
+```
+
+Untagged HD video gets decoded with the wrong matrix on some players and colours shift.
+
+Always use `-t <duration>` for the output duration, not `-shortest`. `-shortest`
+hangs if the input has a subtitle or data stream.
+
+---
+
+## Motion Vocabulary
+
+Write these explicitly in the brief. The model will follow them.
+
+**Allowed:** easeIn, easeOut, easeInOut, spring(t), lerp(t, a, b), fade, slide, scale, rotate.
+
+**Banned (AI slop tells):**
+- Particle bursts that emit from a single point
+- Lens flares
+- Neon glow on everything
+- RGB chromatic-aberration split used decoratively
+- Bouncy easing on text (`spring` on entrance is OK; double-bounce is not)
+- Perspective / `rotateY` in a flat/painted 2D style (breaks layout math and look)
+
+---
+
+## Review Surface
+
+Before `node scripts/render.mjs full`, always generate stills:
+
+```bash
+# Shape of the film — first/middle/last of each shot
+node scripts/render.mjs sheet
+
+# Every frame of one motion or transition
+node scripts/render.mjs strip 2.1 2.6
+
+# Story-carrying face or detail at full resolution
+node scripts/render.mjs storyboard
+
+# Mobile crop check
+node scripts/render.mjs crop 9:16 3.0
+```
+
+Budget: **at least one sheet per shot, a strip per key motion and transition,
+a crop per story-carrying face.**
+
+Feed the PNGs back to the model. Name what failed. Then re-render the affected range.
+Re-rendering frame 400 costs nothing. Unguided revision costs everything.
+
+---
+
+## Pre-render checklist (run before `render full`)
+
+```bash
+node scripts/look.mjs          # fonts, clipped text, NaN transforms, missing images
+node scripts/storyboard-validator.mjs STORYBOARD.md  # all four gates
+```
+
+Both must exit 0.
+
+---
+
+## Subagent rules (long films)
+
+- One orchestrator, N chapter subagents.
+- **Chapter subagents may not edit shared helpers** (`reel/engine.js`, `reel/engine.css`,
+  `scripts/render.mjs`, `scripts/look.mjs`).
+- Each subagent loads its rules from `pipeline/briefings/<chapter>.md` on disk, not
+  from the parent context. This keeps context small and rules isolated.
+- Verification runs with subagents: 2 subagents at a time, each scanning 10 frames,
+  every 5 frames of the rendered sequence.
+
+---
+
+## Cost reference (single data points, not benchmarks)
+
+| Project | Cost |
+|---|---|
+| 15s launch spot from a one-liner | ~$2 API |
+| Full lyric music video (high effort) | ~$200 |
+| 3-min Remotion film (~7,400 lines) | 7% of weekly quota |
+| Model tokens alone (~90K in / 15K out) | ~$0.66 at Opus 5.5 list price |
+
+Render is **free and local**. The expensive part is model iteration, which is why
+the storyboard gate and the still-review loop exist — they eliminate the most
+expensive kind of work: finishing a scene before discovering it was wrong.

package/plugins/video-pipeline/skills/video-pipeline/assets/project/STORYBOARD.md

@@ -0,0 +1,77 @@
+# STORYBOARD.md — Shot List Template
+
+> Fill this out and validate it with `node scripts/storyboard-validator.mjs STORYBOARD.md`
+> before writing any scene code. All four gates must pass.
+>
+> Gate 1 — Every shot has an EVENT (what physically happens), not a description.
+> Gate 2 — Reads within each shot have non-overlapping timestamps.
+> Gate 3 — Every seam has a named transition, including the film open and close.
+> Gate 4 — No on-screen text. Emotion and story must be acted, not captioned.
+
+---
+
+## Film
+
+- title: My Film
+- duration: 30.0
+- fps: 30
+- size: 1920 × 1080
+- palette: #0d1117 #f0f6ff #3b82f6
+- bpm: 120
+
+---
+
+## Shot 1 — Opening
+- start: 0.0
+- end: 8.0
+- transition_in: fade-from-black
+- transition_out: cut
+- event: The camera pushes slowly through darkness until a single point of light fills the frame.
+- reads:
+  - 0.0–3.0: Viewer feels disorientation — where are we?
+  - 3.0–8.0: The light resolves into a planet, establishing scale.
+
+---
+
+## Shot 2 — Reveal
+- start: 8.0
+- end: 18.0
+- transition_in: cut
+- transition_out: dissolve
+- event: The planet rotates a quarter-turn, revealing the continent below, and the camera begins a slow descent.
+- reads:
+  - 8.0–12.0: Viewer recognises the landmass.
+  - 12.0–18.0: Viewer understands we are descending toward a specific location.
+
+---
+
+## Shot 3 — Close
+- start: 18.0
+- end: 30.0
+- transition_in: dissolve
+- transition_out: fade-to-black
+- event: A single window lights up in the city below as all other lights flicker off.
+- reads:
+  - 18.0–24.0: Viewer feels the loneliness of the lit window.
+  - 24.0–30.0: Viewer understands this story is about one person among millions.
+
+---
+<!-- 
+  NOTES FOR THE MODEL
+  ───────────────────
+  • "event" is a physical action, not a mood adjective.
+    BAD:  "A beautiful landscape is shown."
+    GOOD: "A wave breaks over the seawall and spray hits the lens."
+
+  • "reads" timestamps must not overlap:
+    BAD:  0.0–2.0 and 1.5–3.0 (overlap at 1.5–2.0)
+    GOOD: 0.0–2.0 and 2.0–4.0
+
+  • Every transition must be named. Recognised values:
+    cut  fade-from-black  fade-to-black  dissolve  wipe-left  wipe-right
+    iris-in  iris-out  cross-dissolve  push-left  push-right  flash  dip-to-white
+
+  • No text means no lower-thirds, title cards, subtitles, or overlays.
+    The model cannot write `text()` calls that convey plot information.
+    Character names, place names, dates — all must be acted or implied visually.
+-->

package/plugins/video-pipeline/skills/video-pipeline/assets/project/index.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <!--
+    FrameForge HTML Compositor Page
+    ================================
+    This page is the render target for headless Playwright captures.
+    render.mjs navigates here, injects the virtual-clock shim, then calls
+    window.__seek(t) once per frame to advance to time t.
+
+    DO NOT add async resource loads (remote fonts, CDN scripts) — all assets
+    must be local so the page reaches `networkidle` deterministically.
+
+    The #stage div is required. engine.js appends all layer divs into it.
+    Its dimensions are set by reel() in edit.js and matched by
+    page.setViewportSize() in render.mjs.
+  -->
+  <link rel="stylesheet" href="reel/engine.css">
+  <style>
+    /* Reset */
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    html, body {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      background: #000;
+    }
+
+    /* #stage is sized by reel() in edit.js (via CSS custom props set inline).
+       Fallback: 1920×1080. render.mjs also calls page.setViewportSize(). */
+    #stage {
+      position: relative;
+      width:  var(--reel-width,  1920px);
+      height: var(--reel-height, 1080px);
+      overflow: hidden;
+      background: #000;
+    }
+
+    /* Layer divs injected by engine.js */
+    #stage > [data-layer] {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+    }
+
+    /* Captions overlay — placed by engine.js captions() */
+    #caption-overlay {
+      position: absolute;
+      bottom: 80px;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 9999;
+      text-align: center;
+      pointer-events: none;
+    }
+  </style>
+</head>
+<body>
+  <!-- The compositor stage. All layers are appended here by engine.js. -->
+  <div id="stage"></div>
+
+  <!--
+    edit.js is the author-written animation file.
+    It imports from ./reel/engine.js and calls:
+      reel({ width, height, fps, duration, title })
+      layer('name').on(t => ({ ...styles }))
+      at(t, element)
+    etc.
+
+    The module type is required — engine.js uses ES module exports.
+  -->
+  <script type="module" src="edit.js"></script>
+</body>
+</html>

package/plugins/video-pipeline/skills/video-pipeline/assets/project/pipeline/briefings/diagram-author.md

@@ -0,0 +1,43 @@
+# pipeline/briefings/diagram-author.md
+# Loaded by diagram-author subagents. Read this fully before writing diagram code.
+
+## Your role
+
+You are a **diagram-author** subagent. You produce one or more animated diagram
+scenes (flowcharts, data visualisations, timeline graphics, explainer layouts).
+
+## Constraints
+
+1. **Read ANIMATION_GUIDE.md in full** before writing code.
+2. Do not edit shared helpers (`reel/engine.js`, etc.).
+3. Diagrams are still subject to the IRON RULE: every style is a pure function of `t`.
+4. **No rotateY / perspective** on flat diagrams — breaks layout.
+5. **No photoreal expectations** — diagrams are motion graphics. Flat fills, SVG,
+   Canvas 2D, or Three.js orthographic only.
+
+## Recommended stack by diagram type
+
+| Diagram type | Recommended |
+|---|---|
+| Flowchart / boxes and arrows | SVG + GSAP timeline `.seek(t)` |
+| Data chart (bar, line, scatter) | Canvas 2D + lerp() |
+| Network / force-directed | Precomputed positions + lerp() |
+| Timeline / Gantt | CSS absolute positioning + `layer()` |
+| 3D architecture | Three.js orthographic + `camera.position` driven by `t` |
+
+## GSAP pattern (paused + seeked)
+
+```js
+import gsap from 'https://cdn.skypack.dev/gsap'
+// Build the timeline PAUSED — the renderer drives it
+const tl = gsap.timeline({ paused: true })
+tl.to('#box', { x: 200, duration: 1 })
+layer('diagram').on(t => { tl.seek(t); return {} })
+```
+
+Never call `tl.play()` or `tl.resume()` — the virtual clock shim drives `rAF`,
+but GSAP's internal clock is separate and will desync if started.
+
+## Returning
+
+Reply with the complete diagram scene file and a storyboard still.

package/plugins/video-pipeline/skills/video-pipeline/assets/project/pipeline/briefings/orchestrator.md

@@ -0,0 +1,56 @@
+# pipeline/briefings/orchestrator.md
+# Loaded by the orchestrator agent. Read this fully before spawning subagents.
+
+## Your role
+
+You are the **orchestrator**. You own the full production timeline and the final output.
+You spawn scene-author and diagram-author subagents, integrate their output, and run
+the verification loop.
+
+## Order of operations
+
+```
+1. Brief → storyboard (STORYBOARD.md) — STOP, await human approval
+2. Storyboard passes all 4 gates (storyboard-validator.mjs)
+3. TTS first: generate audio, get word-level timestamps (transcribe.py)
+4. Assign chapters to scene-author / diagram-author subagents
+5. Collect scenes — each must include a storyboard still
+6. Run look.mjs (preflight DOM check)
+7. Run render.mjs sheet (one sheet per shot)
+8. Review sheets, request patches from the responsible subagent
+9. Run render.mjs full (full encode, all workers)
+10. Run verify.py (7-gate QC)
+11. If QC fails: identify the responsible chapter, re-assign to a fresh subagent
+12. Mux audio: render.mjs mux --audio=audio/final_mix.wav
+13. Final verify.py pass
+```
+
+## Subagent rules
+
+- Each subagent receives a briefing from `pipeline/briefings/<role>.md`.
+- **Subagents may not edit shared helpers.** If a subagent proposes an edit to
+  `reel/engine.js` or `scripts/render.mjs`, reject it and ask for a chapter-local
+  workaround.
+- Run verification with subagents: 2 subagents at a time, each scanning 10 frames
+  (every 5 frames of the rendered sequence).
+- Chapter seams are the weakest point. Always run a strip over the last 0.5s of
+  one chapter and the first 0.5s of the next to catch missing anticipation frames.
+
+## Spend gate
+
+If `video_job.py` is running this production, it enforces `--max-usd`. You must call
+`estimate_cost()` before the visuals phase. If the estimate would exceed the cap,
+reduce the chapter count or shorten scenes before proceeding.
+
+## Quality gate pass criteria
+
+`verify.py` checks:
+1. Output file exists and is non-empty
+2. Duration within 2% of spec
+3. Resolution matches spec
+4. No corrupt frames (mean pixel value > 1, < 254)
+5. Audio track present in muxed file
+6. BT.709 colour tags present
+7. `-faststart` moov atom at file head
+
+All 7 must pass before the job is marked `done`.

package/plugins/video-pipeline/skills/video-pipeline/assets/project/pipeline/briefings/scene-author.md

@@ -0,0 +1,42 @@
+# pipeline/briefings/scene-author.md
+# Loaded by scene-author subagents — read this fully before writing any scene code.
+
+## Your role
+
+You are a **scene-author** subagent. Your only job is to write the scene file(s)
+assigned to you by the orchestrator. You do not edit shared helpers.
+
+## Hard constraints
+
+1. **Read ANIMATION_GUIDE.md in full** before you write a single line of scene code.
+2. **Do not edit** `reel/engine.js`, `reel/engine.css`, `scripts/render.mjs`,
+   `scripts/look.mjs`, or any other file outside your assigned chapter directory.
+3. Every style property must be a **pure function of `t`**. No `setTimeout`,
+   no `Math.random()`, no module-level mutable state.
+4. After writing, run:
+   ```bash
+   node scripts/render.mjs storyboard
+   ```
+   Attach the output PNG to your reply. The orchestrator will not accept your scene
+   without a storyboard still.
+5. If `cuePhrase()` throws a fatal error, your scene has a missing voiceover phrase.
+   Fix the phrase match before returning.
+
+## File naming
+
+Your chapter file is: `edit_chapter_N.js` where N is your chapter number.
+The orchestrator's `index.html` `<script>` tag already imports it. Do not create
+additional entry points.
+
+## Transition seams
+
+The orchestrator's storyboard specifies the transition_in and transition_out for your
+chapter. Implement them exactly. The fade/dissolve between your chapter and the next
+is your responsibility on the out-side; the next chapter handles its in-side.
+
+## Returning
+
+Reply with:
+1. The complete scene file contents (no diffs, no fragments).
+2. The storyboard still (PNG attached or path printed).
+3. Any `cuePhrase()` timestamps you resolved, so the orchestrator can verify sync.

package/plugins/video-pipeline/skills/video-pipeline/assets/project/reel/engine.css

@@ -0,0 +1,140 @@
+/**
+ * engine.css — FrameForge HTML Compositor Base Reset + Design Tokens
+ *
+ * Loaded by index.html before edit.js.
+ * No animation or transition rules — every visual state is driven by engine.js seek(t).
+ */
+
+/* ── Design tokens ─────────────────────────────────────────────────────────── */
+
+:root {
+  /* Colours */
+  --bg:        #0d1117;
+  --surface:   #161b22;
+  --border:    rgba(255, 255, 255, 0.08);
+  --primary:   #ffffff;
+  --secondary: rgba(255, 255, 255, 0.6);
+  --accent:    #3b82f6;
+  --accent2:   #7c5cd8;
+  --success:   #22c55e;
+  --warning:   #f59e0b;
+  --danger:    #ef4444;
+
+  /* Typography scale */
+  --font-body:    -apple-system, "Segoe UI", system-ui, sans-serif;
+  --font-mono:    "Fira Code", "Cascadia Code", "Consolas", monospace;
+  --font-display: "Archivo", "Segoe UI", system-ui, sans-serif;
+
+  /* Spacing */
+  --gap-sm:  8px;
+  --gap-md:  16px;
+  --gap-lg:  32px;
+  --gap-xl:  64px;
+
+  /* Safe zones (match FFmpeg drawtext safe area) */
+  --safe-top:    120px;
+  --safe-bottom: 120px;
+  --safe-left:   80px;
+  --safe-right:  80px;
+}
+
+/* ── Full reset ─────────────────────────────────────────────────────────────── */
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html, body {
+  width:    100%;
+  height:   100%;
+  overflow: hidden;
+  background: var(--bg);
+}
+
+body {
+  font-family: var(--font-body);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: var(--primary);
+  /* Disable ALL browser animations — seek(t) owns every frame */
+  animation: none !important;
+  transition: none !important;
+}
+
+/* ── Stage ─────────────────────────────────────────────────────────────────── */
+
+#stage {
+  position: relative;
+  overflow: hidden;
+  background: var(--bg);
+  /* No transform on the stage itself — Playwright screenshots the viewport */
+}
+
+/* ── Layer base ─────────────────────────────────────────────────────────────── */
+
+[data-layer] {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+/* ── Typography utilities ───────────────────────────────────────────────────── */
+
+.text-display {
+  font-family: var(--font-display);
+  font-weight: 800;
+  letter-spacing: -0.02em;
+}
+
+.text-body {
+  font-family: var(--font-body);
+  font-weight: 400;
+  line-height: 1.6;
+}
+
+.text-mono {
+  font-family: var(--font-mono);
+}
+
+/* ── Utility classes ────────────────────────────────────────────────────────── */
+
+.center-x {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.center-y {
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.center-xy {
+  top:  50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+/* ── Image defaults ─────────────────────────────────────────────────────────── */
+
+img {
+  display: block;
+  max-width: 100%;
+}
+
+/* ── Scrollbar hide (for overflow containers) ───────────────────────────────── */
+
+::-webkit-scrollbar { display: none; }
+* { scrollbar-width: none; }
+
+/* ── Font imports — loaded from CDN in index.html; this is a fallback stack ── */
+
+/* Archivo (display) */
+@font-face {
+  font-family: 'Archivo';
+  font-style:  normal;
+  font-weight: 400 900;
+  font-display: block;
+  /* Served by index.html via Google Fonts; this block avoids FOUT in preview */
+}