explainer-studio 0.1.5__tar.gz

explainer_studio-0.1.5/.gitignore

@@ -0,0 +1,231 @@
+.venv/
+__pycache__/
+episodes/*/build/
+episodes/*/audio/tts/
+episodes/*/assets/brand/
+episodes/*/.hyperframes/
+episodes/*/_render_*.html
+out/
+.env
+
+# --- GitHub Python template ---
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[codz]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#   Usually these files are written by a python script from a template
+#   before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py.cover
+*.lcov
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+.pybuilder/
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+#   For a library or package, you might want to ignore these files since the code is
+#   intended to run in multiple environments; otherwise, check them in:
+# .python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+# Pipfile.lock
+
+# uv
+#   Similar to Pipfile.lock, it is generally recommended to include uv.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+# uv.lock
+
+# poetry
+#   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
+# poetry.lock
+# poetry.toml
+
+# pdm
+#   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
+#   pdm recommends including project-wide configuration in pdm.toml, but excluding .pdm-python.
+#   https://pdm-project.org/en/latest/usage/project/#working-with-version-control
+# pdm.lock
+# pdm.toml
+.pdm-python
+.pdm-build/
+
+# pixi
+#   Similar to Pipfile.lock, it is generally recommended to include pixi.lock in version control.
+# pixi.lock
+#   Pixi creates a virtual environment in the .pixi directory, just like venv module creates one
+#   in the .venv directory. It is recommended not to include this directory in version control.
+.pixi/*
+!.pixi/config.toml
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule*
+celerybeat.pid
+
+# Redis
+*.rdb
+*.aof
+*.pid
+
+# RabbitMQ
+mnesia/
+rabbitmq/
+rabbitmq-data/
+
+# ActiveMQ
+activemq-data/
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.envrc
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs/Zensical documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# pytype static type analyzer
+.pytype/
+
+# Cython debug symbols
+cython_debug/
+
+# PyCharm
+#   JetBrains specific template is maintained in a separate JetBrains.gitignore that can
+#   be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
+#   and can be added to the global gitignore or merged into this file.  For a more nuclear
+#   option (not recommended) you can uncomment the following to ignore the entire idea folder.
+# .idea/
+
+# Abstra
+#   Abstra is an AI-powered process automation framework.
+#   Ignore directories containing user credentials, local state, and settings.
+#   Learn more at https://abstra.io/docs
+.abstra/
+
+# Visual Studio Code
+#   Visual Studio Code specific template is maintained in a separate VisualStudioCode.gitignore that
+#   can be found at https://github.com/github/gitignore/blob/main/Global/VisualStudioCode.gitignore
+#   and can be added to the global gitignore or merged into this file. However, if you prefer, you
+#   could uncomment the following to ignore the entire vscode folder
+# .vscode/
+# Temporary file for partial code execution
+tempCodeRunnerFile.py
+
+# Ruff stuff:
+.ruff_cache/
+
+# PyPI configuration file
+.pypirc
+
+# Marimo
+marimo/_static/
+marimo/_lsp/
+__marimo__/
+
+# Streamlit
+.streamlit/secrets.toml

explainer_studio-0.1.5/LICENSE

@@ -0,0 +1,41 @@
+MIT License
+
+Copyright (c) 2026 World Socialist Web Site
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+-------------------------------------------------------------------------------
+Scope
+
+The MIT licence above covers the studio software and its documentation:
+tools/, templates/, brand/brand.css, brand/frame.md, brand/pronunciations.yaml,
+docs/, the .github/ workflows, pyproject.toml, README.md, AGENTS.md and CLAUDE.md.
+
+It does NOT cover editorial content. Everything under episodes/ and scripts/
+(scripts, narration audio, timings, scene designs, thumbnails and the videos
+made from them) is Copyright (c) 2026 World Socialist Web Site, all rights
+reserved.
+
+Third-party files keep their own licences:
+  - brand/fonts/: PT Serif, Source Sans 3 and JetBrains Mono, SIL Open Font
+    License 1.1 (see the OFL-*.txt files alongside them).
+  - brand/vendor/gsap.min.js: GSAP, GreenSock Standard License
+    (https://gsap.com/standard-license), as stated in the file header.
+  - episodes/*/assets/media/: photographs, maps and footage remain under the
+    terms of their original sources, credited on screen where they are used.

explainer_studio-0.1.5/PKG-INFO

@@ -0,0 +1,149 @@
+Metadata-Version: 2.5
+Name: explainer-studio
+Version: 0.1.5
+Summary: Command-line studio for narrated explainer videos (HyperFrames + Kokoro TTS + ffmpeg)
+License-Expression: MIT
+License-File: LICENSE
+Requires-Python: <3.14,>=3.12
+Requires-Dist: kokoro-onnx>=0.6.1
+Requires-Dist: misaki>=0.9
+Requires-Dist: num2words>=0.5
+Requires-Dist: numpy>=2.0
+Requires-Dist: pyyaml>=6.0
+Requires-Dist: soundfile>=0.12
+Requires-Dist: spacy<3.9,>=3.8
+Description-Content-Type: text/markdown
+
+# Explainer Studio
+
+[![CI](https://github.com/JoeMountWSWS/explainer-studio/actions/workflows/ci.yml/badge.svg)](https://github.com/JoeMountWSWS/explainer-studio/actions/workflows/ci.yml)
+
+A command-line studio for narrated explainer videos in the style of [wsws.org](https://www.wsws.org).
+You write a script in Markdown. The studio narrates it with local TTS, aligns every word to the audio,
+and turns each scene into a [HyperFrames](https://www.npmjs.com/package/hyperframes) HTML composition
+that is timed to the narration. It then renders a mastered 1920×1080 MP4 for YouTube, with captions
+and chapter markers.
+
+```
+script.md ──► narration (Kokoro, local; or ElevenLabs) ──► word timings (Whisper)
+          ──► scenes/<id>.html (HyperFrames + GSAP, timed to cues) ──► cached per-scene renders
+          ──► out/<slug>.mp4  (−14 LUFS)  +  out/<slug>.srt  +  out/<slug>.chapters.txt
+```
+
+# Installation
+
+## Requirements
+
+- Linux (developed on Arch with an AMD GPU; the render uses Chromium's GPU capture)
+- [uv](https://docs.astral.sh/uv/), with Python 3.12 or 3.13 (`kokoro-onnx` doesn't support 3.14 yet)
+- Node.js with `npx`. The HyperFrames CLI is fetched on demand at the version pinned in `tools/studio/common.py`.
+- ffmpeg and Chromium
+- Optional: an ElevenLabs API key in `.env` (`ELEVENLABS_API_KEY=…`) for cloud narration
+
+The first `sync` downloads the Kokoro-82M model to `~/.cache/hyperframes/tts` and spaCy's
+`en_core_web_sm` to `~/.cache/hyperframes/spacy`.
+
+# Usage
+
+Making a video with the studio is a loop of writing and listening. You write the script as plain
+Markdown, and the studio reads it aloud, works out exactly when each word is spoken, and hands those
+timings to your scenes so the visuals move in step with the voice. Change a sentence and only that
+sentence is re-recorded and only the affected scenes are re-rendered, so you can refine a five-minute
+video in seconds rather than starting over. Everything runs from one command, `uv run studio`, and
+nothing leaves your machine unless you choose cloud narration.
+
+## Install
+
+With the [requirements](#requirements) in place, either install the `studio` command from PyPI or
+clone the repository.
+
+**From PyPI**, to make videos in a folder of your own:
+
+```bash
+uv tool install explainer-studio   # or run it without installing: uvx --from explainer-studio studio …
+mkdir my-videos && cd my-videos
+studio new my-video "My Video"
+```
+
+The folder you run `studio` in becomes the workspace. It holds `episodes/`, `out/` and `.env`, and
+`studio` finds it from any subdirectory (or set `STUDIO_ROOT`). The house style (`brand/`) and scene
+templates ship with the package. To customise them, copy `brand/` or `templates/` from this repository
+into the workspace, and the studio uses your copy instead. Music beds and voice clips go in the
+workspace's `brand/music/` and `brand/voices/`. Use `studio` wherever this README says `uv run studio`.
+
+**From a clone**, to work on the studio itself or to use the example episodes:
+
+```bash
+git clone git@github.com:JoeMountWSWS/explainer-studio.git
+cd explainer-studio
+uv sync
+```
+
+Run commands from the repository root (or any folder below it). Confirm the install with
+`uv run studio --help`. The first `sync` of an episode downloads the Kokoro voice model and the
+spaCy English model, so it takes a little longer than later runs.
+
+## Quick start
+
+```bash
+uv run studio new my-video "My Video"   # scaffold episodes/my-video/
+$EDITOR episodes/my-video/script.md     # write the script
+uv run studio sync my-video             # narrate, align, stub scene files, write index.html
+uv run studio status my-video           # words, estimated vs actual length, cues per scene
+# design each episodes/my-video/scenes/<id>.html
+uv run studio preview my-video          # HyperFrames Studio in the browser, with narration
+uv run studio check my-video            # lint, layout and contrast audits (must pass)
+uv run studio render my-video --draft   # quick review copy -> out/my-video-draft.mp4
+uv run studio render my-video           # final -> out/my-video.mp4 + .srt + .chapters.txt
+uv run studio thumbnail my-video        # out/my-video-thumbnail.jpg
+uv run studio voices my-video           # audition Kokoro voice blends -> out/voice-samples/
+```
+
+Only scenes that have changed are re-rendered. Changing a paragraph of narration re-synthesises
+that paragraph and nothing else, and re-times the visuals that depend on it.
+
+## Writing a script
+
+```markdown
+---
+title: The Paris Commune
+voice: bf_emma*0.6 + bf_isabella*0.4
+speed: 0.85
+---
+## hook: Seventy-two days
+> template: title
+
+In the spring of 1871, the working class took power in a major city. {sub} This is the story of the Paris Commune.
+```
+
+Each `## id: Chapter title` heading is a scene and a YouTube chapter. `> template:` chooses the
+starting pattern for the scene file (`title`, `stat`, `quote`, `points`, `outro`, `blank`). Other `>`
+lines are visual notes and are never spoken. `{name}` marks a cue that the scene can animate on,
+and `{pause 1.5}` inserts a pause.
+
+The full documentation is at <https://joemountwsws.github.io/explainer-studio/>. [AGENTS.md](AGENTS.md) is the reference for coding agents: every front-matter setting, voice choice, the rules for
+authoring scenes, the render pipeline and known problems. Read [brand/frame.md](brand/frame.md)
+before designing scenes.
+
+## Layout
+
+| Path | What it is |
+| --- | --- |
+| `tools/studio/` | The Python CLI (`uv run studio …`) |
+| `brand/` | House style shared by every episode: design spec, CSS, fonts, GSAP, pronunciations |
+| `templates/` | Starter script, scene patterns and thumbnail |
+| `episodes/<slug>/` | One HyperFrames project per video. `script.md` is the source of truth |
+| `docs/` | The documentation site (MkDocs), including notes such as British ElevenLabs voices |
+| `out/` | Rendered deliverables (gitignored) |
+
+Worked examples: `episodes/demo-paris-commune` (Kokoro, 38s) and `episodes/demo-elevenlabs`
+(the same script narrated by ElevenLabs).
+
+## Working with coding agents
+
+The studio is designed to be driven by Claude Code or another coding agent. `AGENTS.md` (loaded
+through `CLAUDE.md`) gives the agent the conventions it needs, the HyperFrames skills cover the
+composition format and motion, and the `make-explainer-video` skill
+(`.claude/skills/make-explainer-video/`) walks Claude through the whole workflow. Start `claude` in
+the repository root and ask for a video, or run `/make-explainer-video`. See
+[Working with a coding agent](https://joemountwsws.github.io/explainer-studio/coding-agents/).

explainer_studio-0.1.5/README.md

@@ -0,0 +1,133 @@
+# Explainer Studio
+
+[![CI](https://github.com/JoeMountWSWS/explainer-studio/actions/workflows/ci.yml/badge.svg)](https://github.com/JoeMountWSWS/explainer-studio/actions/workflows/ci.yml)
+
+A command-line studio for narrated explainer videos in the style of [wsws.org](https://www.wsws.org).
+You write a script in Markdown. The studio narrates it with local TTS, aligns every word to the audio,
+and turns each scene into a [HyperFrames](https://www.npmjs.com/package/hyperframes) HTML composition
+that is timed to the narration. It then renders a mastered 1920×1080 MP4 for YouTube, with captions
+and chapter markers.
+
+```
+script.md ──► narration (Kokoro, local; or ElevenLabs) ──► word timings (Whisper)
+          ──► scenes/<id>.html (HyperFrames + GSAP, timed to cues) ──► cached per-scene renders
+          ──► out/<slug>.mp4  (−14 LUFS)  +  out/<slug>.srt  +  out/<slug>.chapters.txt
+```
+
+# Installation
+
+## Requirements
+
+- Linux (developed on Arch with an AMD GPU; the render uses Chromium's GPU capture)
+- [uv](https://docs.astral.sh/uv/), with Python 3.12 or 3.13 (`kokoro-onnx` doesn't support 3.14 yet)
+- Node.js with `npx`. The HyperFrames CLI is fetched on demand at the version pinned in `tools/studio/common.py`.
+- ffmpeg and Chromium
+- Optional: an ElevenLabs API key in `.env` (`ELEVENLABS_API_KEY=…`) for cloud narration
+
+The first `sync` downloads the Kokoro-82M model to `~/.cache/hyperframes/tts` and spaCy's
+`en_core_web_sm` to `~/.cache/hyperframes/spacy`.
+
+# Usage
+
+Making a video with the studio is a loop of writing and listening. You write the script as plain
+Markdown, and the studio reads it aloud, works out exactly when each word is spoken, and hands those
+timings to your scenes so the visuals move in step with the voice. Change a sentence and only that
+sentence is re-recorded and only the affected scenes are re-rendered, so you can refine a five-minute
+video in seconds rather than starting over. Everything runs from one command, `uv run studio`, and
+nothing leaves your machine unless you choose cloud narration.
+
+## Install
+
+With the [requirements](#requirements) in place, either install the `studio` command from PyPI or
+clone the repository.
+
+**From PyPI**, to make videos in a folder of your own:
+
+```bash
+uv tool install explainer-studio   # or run it without installing: uvx --from explainer-studio studio …
+mkdir my-videos && cd my-videos
+studio new my-video "My Video"
+```
+
+The folder you run `studio` in becomes the workspace. It holds `episodes/`, `out/` and `.env`, and
+`studio` finds it from any subdirectory (or set `STUDIO_ROOT`). The house style (`brand/`) and scene
+templates ship with the package. To customise them, copy `brand/` or `templates/` from this repository
+into the workspace, and the studio uses your copy instead. Music beds and voice clips go in the
+workspace's `brand/music/` and `brand/voices/`. Use `studio` wherever this README says `uv run studio`.
+
+**From a clone**, to work on the studio itself or to use the example episodes:
+
+```bash
+git clone git@github.com:JoeMountWSWS/explainer-studio.git
+cd explainer-studio
+uv sync
+```
+
+Run commands from the repository root (or any folder below it). Confirm the install with
+`uv run studio --help`. The first `sync` of an episode downloads the Kokoro voice model and the
+spaCy English model, so it takes a little longer than later runs.
+
+## Quick start
+
+```bash
+uv run studio new my-video "My Video"   # scaffold episodes/my-video/
+$EDITOR episodes/my-video/script.md     # write the script
+uv run studio sync my-video             # narrate, align, stub scene files, write index.html
+uv run studio status my-video           # words, estimated vs actual length, cues per scene
+# design each episodes/my-video/scenes/<id>.html
+uv run studio preview my-video          # HyperFrames Studio in the browser, with narration
+uv run studio check my-video            # lint, layout and contrast audits (must pass)
+uv run studio render my-video --draft   # quick review copy -> out/my-video-draft.mp4
+uv run studio render my-video           # final -> out/my-video.mp4 + .srt + .chapters.txt
+uv run studio thumbnail my-video        # out/my-video-thumbnail.jpg
+uv run studio voices my-video           # audition Kokoro voice blends -> out/voice-samples/
+```
+
+Only scenes that have changed are re-rendered. Changing a paragraph of narration re-synthesises
+that paragraph and nothing else, and re-times the visuals that depend on it.
+
+## Writing a script
+
+```markdown
+---
+title: The Paris Commune
+voice: bf_emma*0.6 + bf_isabella*0.4
+speed: 0.85
+---
+## hook: Seventy-two days
+> template: title
+
+In the spring of 1871, the working class took power in a major city. {sub} This is the story of the Paris Commune.
+```
+
+Each `## id: Chapter title` heading is a scene and a YouTube chapter. `> template:` chooses the
+starting pattern for the scene file (`title`, `stat`, `quote`, `points`, `outro`, `blank`). Other `>`
+lines are visual notes and are never spoken. `{name}` marks a cue that the scene can animate on,
+and `{pause 1.5}` inserts a pause.
+
+The full documentation is at <https://joemountwsws.github.io/explainer-studio/>. [AGENTS.md](AGENTS.md) is the reference for coding agents: every front-matter setting, voice choice, the rules for
+authoring scenes, the render pipeline and known problems. Read [brand/frame.md](brand/frame.md)
+before designing scenes.
+
+## Layout
+
+| Path | What it is |
+| --- | --- |
+| `tools/studio/` | The Python CLI (`uv run studio …`) |
+| `brand/` | House style shared by every episode: design spec, CSS, fonts, GSAP, pronunciations |
+| `templates/` | Starter script, scene patterns and thumbnail |
+| `episodes/<slug>/` | One HyperFrames project per video. `script.md` is the source of truth |
+| `docs/` | The documentation site (MkDocs), including notes such as British ElevenLabs voices |
+| `out/` | Rendered deliverables (gitignored) |
+
+Worked examples: `episodes/demo-paris-commune` (Kokoro, 38s) and `episodes/demo-elevenlabs`
+(the same script narrated by ElevenLabs).
+
+## Working with coding agents
+
+The studio is designed to be driven by Claude Code or another coding agent. `AGENTS.md` (loaded
+through `CLAUDE.md`) gives the agent the conventions it needs, the HyperFrames skills cover the
+composition format and motion, and the `make-explainer-video` skill
+(`.claude/skills/make-explainer-video/`) walks Claude through the whole workflow. Start `claude` in
+the repository root and ask for a video, or run `/make-explainer-video`. See
+[Working with a coding agent](https://joemountwsws.github.io/explainer-studio/coding-agents/).

explainer_studio-0.1.5/brand/brand.css

@@ -0,0 +1,145 @@
+/* Explainer house style, after wsws.org. Tokens mirror brand/frame.md.
+   `studio sync` copies this file (with fonts/ and gsap) into each episode's assets/brand/. */
+
+@font-face { font-family: "PT Serif"; src: url("fonts/PTSerif-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; }
+@font-face { font-family: "PT Serif"; src: url("fonts/PTSerif-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; }
+@font-face { font-family: "PT Serif"; src: url("fonts/PTSerif-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; }
+@font-face { font-family: "PT Serif"; src: url("fonts/PTSerif-BoldItalic.ttf") format("truetype"); font-weight: 700; font-style: italic; }
+@font-face { font-family: "Source Sans 3"; src: url("fonts/SourceSans3.ttf") format("truetype"); font-weight: 200 900; font-style: normal; }
+@font-face { font-family: "Source Sans 3"; src: url("fonts/SourceSans3-Italic.ttf") format("truetype"); font-weight: 200 900; font-style: italic; }
+@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono.ttf") format("truetype"); font-weight: 100 800; }
+
+:root {
+  --paper: #ffffff;
+  --panel: #f4f4f4;
+  --ink: #231f20;
+  --ink-2: #333333;
+  --ink-soft: #555555;
+  --rule: #cccccc;
+  --red: #e71e25;
+  --red-wash: #ffdfdf;
+  --tag: #1b2129;
+
+  --font-serif: "PT Serif", Georgia, serif;
+  --font-sans: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, monospace;
+
+  --safe-x: 192px;   /* title-safe inset (10%) */
+  --safe-y: 108px;
+  --hairline: 2px solid var(--rule);
+}
+
+/* Full-bleed white page. */
+.paper { position: absolute; inset: 0; background: var(--paper); }
+
+/* Title-safe content box. Put scene content inside one of these. */
+.stage {
+  position: absolute;
+  inset: var(--safe-y) var(--safe-x);
+  color: var(--ink-2);
+  font-family: var(--font-serif);
+}
+
+/* Reel (9:16, 1080x1920) content box. Platform UI covers the top ~200px, the right ~140px
+   (like/comment/share) and the bottom ~480px (caption, handle, audio). Burned captions sit
+   in the band y 1220-1440, so scene content ends by y 1180. */
+.stage-reel {
+  position: absolute;
+  inset: 220px 72px 740px 72px;
+  color: var(--ink-2);
+  font-family: var(--font-serif);
+}
+
+/* Heavy ink rule + uppercase label, like the site's "TOP STORIES" head.
+   <div class="section-head"><div class="section-rule"></div><div class="label">History</div></div>
+   Draw the rule on with scaleX (transform-origin is left). */
+.section-head { display: flex; flex-direction: column; gap: 18px; }
+.section-rule { height: 6px; background: var(--ink); transform-origin: left center; }
+
+.label {
+  font-family: var(--font-sans);
+  font-weight: 700;
+  font-size: 26px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--ink);
+}
+
+/* Dark category tag ("PERSPECTIVE"). */
+.tag {
+  display: inline-block;
+  align-self: flex-start;
+  background: var(--tag);
+  color: #ffffff;
+  font-family: var(--font-sans);
+  font-weight: 700;
+  font-size: 24px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  padding: 10px 18px 9px;
+}
+
+.headline {
+  font-family: var(--font-serif);
+  font-weight: 700;
+  font-size: 104px;
+  line-height: 1.12;
+  color: var(--ink);
+  margin: 0;
+}
+
+.standfirst {
+  font-family: var(--font-serif);
+  font-style: italic;
+  font-weight: 400;
+  font-size: 48px;
+  line-height: 1.35;
+  color: var(--ink-soft);
+  margin: 0;
+}
+
+.body {
+  font-family: var(--font-serif);
+  font-weight: 400;
+  font-size: 46px;
+  line-height: 1.4;
+  color: var(--ink-2);
+  margin: 0;
+}
+
+/* Source / byline / date line. */
+.byline {
+  font-family: var(--font-sans);
+  font-weight: 600;
+  font-size: 28px;
+  color: var(--ink-soft);
+}
+
+/* Blockquote with red left rule. */
+.quote {
+  border-left: 6px solid var(--red);
+  padding-left: 56px;
+  font-family: var(--font-serif);
+  color: var(--ink);
+}
+
+.italic { font-style: italic; }
+.soft { color: var(--ink-soft); }
+.red { color: var(--red); }
+.sans { font-family: var(--font-sans); }
+.mono { font-family: var(--font-mono); font-weight: 500; }
+.hairline { height: 0; border-top: var(--hairline); }
+.panel { background: var(--panel); padding: 40px 48px; }
+
+/* Highlight wash: <span id="x-key" class="hl">phrase</span>
+   Sweep it in on a cue: tl.to("#x-key", { backgroundSize: "100% 82%", duration: 0.5 }, cue("key")) */
+.hl {
+  background-image: linear-gradient(var(--red-wash), var(--red-wash));
+  background-repeat: no-repeat;
+  background-position: left 70%;
+  background-size: 0% 82%;
+  padding: 0 0.06em;
+  margin: 0 -0.06em;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}