diff --git a/CLAUDE.md b/CLAUDE.md
index 1ee056d..09bede7 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -16,7 +16,7 @@ t7d.dev: the personal site of Tim Conrad. Plain HTML, CSS and a little JavaScrip
 - A new tool page: copy `tools/papercuts/index.html`, keep its `<!-- tool-readme: owner/name -->` placeholder, and add the tool to `tools/index.html`, the Tools section of `index.html` and `sitemap.xml`. `scripts/gen-tools.py` puts the README of the latest release into the page at deploy time. Never paste a README by hand. Test: `uv run --no-project --with markdown==3.11.3 python3 -m unittest scripts/test_gen_tools.py`.
 - `drafts/` holds local drafts. Git ignores it, and it is not in `SITE` or `sitemap.xml`. The repo is public, so a draft never goes into git. To publish a draft, move it to its real folder.
 - A new or revised thought: use the skill `adding-a-thought`. `llms.txt` and the feeds are made at deploy time (`scripts/gen-feeds.py`); do not commit them.
-- Keep the Content-Security-Policy of each page strict: no inline scripts or styles, no `style=""` attributes, and no request to another site on page load. `assets/theme.js` and `assets/site.js` are the only scripts.
+- Keep the Content-Security-Policy of each page strict: no inline scripts or styles, no `style=""` attributes, and no request to another site on page load. `assets/theme.js` and `assets/site.js` are the only scripts, plus the characters of each game page (`assets/play/play-kb.js`, `assets/play/play-wz.js`; see "Game pages" in `DESIGN.md`).
 - `master` is the source. Never edit `gh-pages` by hand: the workflow publishes it after every push to `master`, and the sealed admin app (`Tim-Conrad/sealed`) publishes encrypted sites to `sealed/` on it, a folder that exists only there. `scripts/deploy.sh` must keep `sealed/`.
 - Classes and scripts that the sealed login page uses (`.sealed`, `.label`, `.btn`, `.nav`, `#theme-toggle`, `/assets/site.js`) are used by another repository too. Keep them, or change `client/themes/t7d/login.html` in sealed with them.
 - `blog/` and `CVE/` only redirect old addresses (the thoughts were a blog until November 2026). Do not add pages there.
diff --git a/DESIGN.md b/DESIGN.md
index 64d92e9..0e3f3c7 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -11,6 +11,8 @@ Two rules follow from this:
 1. **Black and white.** The only colour on the site is in the pictures and videos, so they are what the eye finds first.
 2. **Plain words.** The site says what it holds and what a thing does. It does not sell.
 
+The one place that breaks the calm on purpose is a game page. There, the game's own characters live on the lines of the sheet and can be played with (see "Game pages"). The rest of the site stays still and serious.
+
 ## Wording
 
 The tone is honest and down to earth.
@@ -63,8 +65,49 @@ All fonts are in `assets/fonts/` (SIL Open Font License). Nothing loads from ano
 - **The front page stays short.** It says what exists and links to it: overview, the games, the latest thoughts, the research summary with a button to the write-up, the PGP key, contact. Details such as the attack steps and the disclosure timeline belong in the write-up, not here.
 - **Title block.** The box next to the name lists site, contents, contact and the PGP fingerprint. It holds facts only. Update "Contents" when a write-up or a game is added.
 - **Grid.** The faint 48 px grid appears only behind the name on the front page. It is the one decorative element. Do not put it behind text blocks.
-- **Square corners.** Nothing has rounded corners or a shadow, except the phone frame, the step numbers and the dots of the timeline.
+- **Square corners.** Nothing has rounded corners or a shadow, except the phone frame, the step numbers, the dots of the timeline and the soft smoke of the train.
 - **Spacing.** Lay out with grid or flex and `gap`. Side padding is `--pad`.
+- **A game page** has, in this order: the header (with the line of what the characters can do), the reel, the live demo, the text with the feature list, and the timeline. It has no grid of screenshots: the videos show more, and the pictures made the page slow.
+
+## Game pages
+
+On the page of a game, and only there, the game's own characters live in the article. They make the page feel like the game without turning the site into a game. They never appear on the front page, in the game boxes there, in the thoughts or in the research.
+
+**What they are made of**
+
+- **The figures are pictures.** They are the game's own art, so they keep their colours, like any picture.
+  - Wortzauber: the pixel sprite sheets of the game, unchanged (Paul, the Schwebe-Bot, the things a word makes).
+  - Kleinbahn: rendered from the game's models (`src/models`, the near versions with `detail:'high'`), in side view, with 16 wheel positions per car, once by day and once by night. Render them again when the models change; do not draw them by hand.
+- **Everything around them is drawn in ink.** Hills, tunnels, the station, the platform, the signal, speech bubbles and the hint line use the colour tokens, like a diagram. They follow the theme.
+- **Smoke and steam are grey, never coloured, and low poly like the models.** Each puff is a faceted blob: a fan of flat triangles lit from the upper left. The exhaust leaves the chimney fast with the train's speed, drag slows it to the breeze, warm smoke keeps rising while it cools, and a shared turbulent flow folds neighbouring puffs together; puffs grow, turn lighter and fade. At speed the plume lies long and low; standing, it climbs. It comes in beats, four to a turn of the driving wheels, and is darker while the engine pulls away. Steam (the cylinders at the start, the brakes, the whistle, the safety valve) is lighter and short-lived. In the dark theme the smoke is light grey.
+- **The site loads no game engine.** No three.js, no canvas: the figures are image strips moved by one small script per game page.
+
+**Where they stand**
+
+- They stand on lines that are already there: the rules between the sections, the frame of a picture, the lines of the feature list, the tops of the letters of a heading, a button. They do not get boxes, backgrounds or frames of their own.
+- Kleinbahn's line is the rule under the header. The header gets the room the railway needs below its text, so nothing covers the text, and the smoke stays below it too.
+- The two tunnels are one loop: what goes into the right hill comes out of the left one at once, so the line is never empty for long. Each hill reaches over the track: its paper covers the wheels and the sleepers beneath it, and it draws the rail line again.
+- A figure may pass over text for a moment, but never stays on top of a link, a button or a paragraph.
+
+**How they behave**
+
+- **Alive, never pasted.** Every figure moves a little on its own: Paul breathes, looks around, walks and casts; the bot floats; the train runs, stops at the station and smokes; people get on and off; sheep graze. A figure that only stands still is wrong here.
+- **They answer the reader.** A tap does one small thing (Paul jumps, the train stops or starts, a sheep hops). A drag carries or pushes (pick Paul up and throw him, push the train). A real control stays a real control: the signal is a `button`.
+- **Wortzauber acts out the game.** Dotted words in the text (`.mw`) are traced letter by letter, and Paul makes the thing appear. Only words whose thing has a sprite in the game are dotted.
+- **Paul follows the reader.** When his line scrolls away, he jumps down to a line on screen, or the bot lifts him up, as in the game.
+- **Night is the dark theme.** In the dark theme the train shows its night pictures with lit windows. Load only the pictures of the theme in use.
+
+**Words**
+
+- One hint line under the subtitle says what you can do, in plain words: "Paul lives on this page. Pick him up, or tap a dotted word."
+- Speech bubbles are short and friendly and say something true about the moment ("Back to Paul.", "Stop!", "Kuchen · cake"). No slogans, no calls to action.
+
+**Limits**
+
+- **Reduced motion.** The figures stand still in one pose (the train waits at the station) and nothing moves by itself. Taps and drags still work, because the reader starts them.
+- **Weight.** The pictures of one game page stay under about 400 KB for one theme, as WebP or small PNG strips.
+- **Phone first.** Check at 1440, 390 and 320 px, in both themes, by touch as well as by mouse. On a narrow screen use a shorter train and leave out what has no room (the signal), rather than shrinking the figures.
+- **Access.** Each figure has `role="img"` and a label that says what it is and what a tap or drag does; the dotted words are focusable and work with Enter and Space.
 
 ## Components
 
@@ -82,7 +125,8 @@ All fonts are in `assets/fonts/` (SIL Open Font License). Nothing loads from ano
 | Thought | `.tmeta`, `.status` | A page in `/thoughts/<slug>/`: an idea Tim works through and comes back to. Under the title: Status (`Draft`, `Settled` or `Changed my mind`), Started, Last revised. At the end, in this order: Open questions (if any), Starting points (the links the thought began with), Sources, Revisions (`.dates`: date and what changed), Feedback (what people answered when it was shared, and what it changed; "Not shared yet" until then). |
 | Animated diagram | `figure.anim` | Inline SVG that moves: lines draw (`.draw`), bars grow (`.grow`, `.grow-l`), parts appear (`.pop`, delays `.d1`-`.d8`) and numbers count up (`[data-count]`) once the figure comes on screen; a token can run along a path (`<animateMotion>`) while it is on screen, with a Pause button. `data-switch="A|B"` adds two buttons that switch the figure between two states (`.w-a`/`.w-b` show, `.hi-a`/`.hi-b` stay strong, `.off-b` fades). `[data-pick]` parts are buttons that show their item of `.pick__list` in a `.pick__panel`. A wide drawing (`.dg-w`) can have a narrow one for phones (`.dg-n`, below 600 px) instead of scrolling. Without the script, the end state and the whole list show. |
 | Diagram | `.dg` in a `figure` | Inline SVG drawn only with the classes in `site.css` (`.bx`, `.bx-s`, `.bx-i`, `.ln`, `.t-h`, `.t-s`, ...), which use the colour tokens, so a diagram follows the theme. Give it `<title>` and `<desc>`. In a `.fig-wide` figure it scrolls inside its box on a phone instead of shrinking the text. No colours, no `style` attributes. |
-| Diagram with steps | `figure[data-steps]`, `.steps__list` | A diagram whose parts carry `data-step="n"`, with one list item per step. The list sits in a box joined to the bottom of the diagram (`.steps__panel`, surface colour). `site.js` puts the step number, the text of the step and Back, Next and Play into that box and shows one step at a time: earlier steps faint, later ones nearly hidden. Without the script the box holds the whole numbered list. Use it where a process has an order; keep a still diagram where it has none. |
+| Diagram with steps | `figure[data-steps]`, `.steps__list` | A diagram whose parts carry `data-step="n"`, with one list item per step. The list sits in a box joined to the bottom of the diagram (`.steps__panel`, surface colour). `site.js` puts the step number, the text of the step and Back, Next and Play into that box and shows one step at a time: earlier steps faint, later ones nearly hidden. Without the script the box holds the whole numbered list. Like an animated diagram, it can hold a wide drawing (`.dg-w`) and a narrow one for phones (`.dg-n`); give the parts of both the same `data-step` numbers. Use it where a process has an order; keep a still diagram where it has none. |
+| Game characters | `.play-layer`, `.play-spr`, `.play-bubble`, `.mw`, `.kb-*` | Only on a game page (see "Game pages"). One layer over `main` holds the figures, the speech bubble and the smoke (`.kb-smoke`, one SVG of low-poly puffs); `.mw` marks a dotted word; `.kb-*` is the drawn railway (hills, station, platform, signal) and the cars. |
 | Encrypted site login | `.sealed` | The login page of a site below `/sealed/`, written by sealed (theme `t7d`). Label "Encrypted", the title as `h1`, one hint, username, password, one filled button "Open", a mono status line. Inputs are framed in ink with square corners. |
 
 ## Rules that are easy to break
@@ -91,12 +135,13 @@ All fonts are in `assets/fonts/` (SIL Open Font License). Nothing loads from ano
 - **Links are underlined.** Colour cannot mark a link here.
 - **Keyboard focus is visible**: a 3 px ink outline.
 - **Phone first.** Check each change at 1440, 390 and 320 px wide, in both themes. The page must not scroll sideways. Wide tables and code scroll inside their own box.
-- **Motion.** The interface does not move, apart from smooth scrolling to a section. The exceptions are recordings of real things: the videos, which loop silently and do not start by themselves for a visitor who asked for reduced motion, and the gameplay loop in a game box: a short animated WebP of the real game, loaded lazily. A visitor who asked for reduced motion gets a still instead, through the `<picture>` element. The other exceptions are diagrams in a thought. A diagram with steps changes only when the reader presses Back, Next or Play. An animated diagram (`figure.anim`) plays its drawing once when it comes on screen, and a running token moves only while the figure is on screen and stops with its Pause button. Animation explains something in the diagram; it is never decoration. A visitor who asked for reduced motion gets the end state at once, and the running token stands still until Play.
+- **Motion.** The interface does not move, apart from smooth scrolling to a section. The exceptions are recordings of real things: the videos, which loop silently and do not start by themselves for a visitor who asked for reduced motion, and the gameplay loop in a game box: a short animated WebP of the real game, loaded lazily. A visitor who asked for reduced motion gets a still instead, through the `<picture>` element. The characters on a game page are another exception: they move on their own and answer the reader, and stand still for reduced motion ("Game pages"). The other exceptions are diagrams in a thought. A diagram with steps changes only when the reader presses Back, Next or Play. An animated diagram (`figure.anim`) plays its drawing once when it comes on screen, and a running token moves only while the figure is on screen and stops with its Pause button. Animation explains something in the diagram; it is never decoration. A visitor who asked for reduced motion gets the end state at once, and the running token stands still until Play.
 - **Pictures.** Give every picture `width`, `height` and a plain `alt` text that describes what it shows.
 
 ## Where things are
 
 - Styles and tokens: `assets/site.css`
-- Scripts: `assets/theme.js` (theme before the first paint), `assets/site.js` (toggle, copy buttons, table of contents, the demo)
+- Scripts: `assets/theme.js` (theme before the first paint), `assets/site.js` (toggle, copy buttons, table of contents, the demo), and on a game page its characters: `assets/play/play-wz.js` or `assets/play/play-kb.js`, with `assets/play/play.css`
+- Pictures of the characters: `assets/play/` (Wortzauber sprites from the game's `art/pixel/`; Kleinbahn car strips `car-<kind>-d.webp` and `-n.webp` rendered from `src/models/train.js`)
 - Reels and pictures of the games: `.claude/skills/updating-product-reels/SKILL.md`
 - Deploy and repository layout: `README.md`
diff --git a/assets/play/apple.png b/assets/play/apple.png
new file mode 100644
index 0000000..817b707
Binary files /dev/null and b/assets/play/apple.png differ
diff --git a/assets/play/bot.png b/assets/play/bot.png
new file mode 100644
index 0000000..02f3c29
Binary files /dev/null and b/assets/play/bot.png differ
diff --git a/assets/play/cake.png b/assets/play/cake.png
new file mode 100644
index 0000000..482902b
Binary files /dev/null and b/assets/play/cake.png differ
diff --git a/assets/play/candle.png b/assets/play/candle.png
new file mode 100644
index 0000000..76bcd5c
Binary files /dev/null and b/assets/play/candle.png differ
diff --git a/assets/play/car-box-d.webp b/assets/play/car-box-d.webp
new file mode 100644
index 0000000..24ef4f4
Binary files /dev/null and b/assets/play/car-box-d.webp differ
diff --git a/assets/play/car-box-n.webp b/assets/play/car-box-n.webp
new file mode 100644
index 0000000..f01000e
Binary files /dev/null and b/assets/play/car-box-n.webp differ
diff --git a/assets/play/car-coach-d.webp b/assets/play/car-coach-d.webp
new file mode 100644
index 0000000..e82537f
Binary files /dev/null and b/assets/play/car-coach-d.webp differ
diff --git a/assets/play/car-coach-n.webp b/assets/play/car-coach-n.webp
new file mode 100644
index 0000000..3c33244
Binary files /dev/null and b/assets/play/car-coach-n.webp differ
diff --git a/assets/play/car-loco-d.webp b/assets/play/car-loco-d.webp
new file mode 100644
index 0000000..588d730
Binary files /dev/null and b/assets/play/car-loco-d.webp differ
diff --git a/assets/play/car-loco-n.webp b/assets/play/car-loco-n.webp
new file mode 100644
index 0000000..2c0adac
Binary files /dev/null and b/assets/play/car-loco-n.webp differ
diff --git a/assets/play/car-logs-d.webp b/assets/play/car-logs-d.webp
new file mode 100644
index 0000000..8455746
Binary files /dev/null and b/assets/play/car-logs-d.webp differ
diff --git a/assets/play/car-logs-n.webp b/assets/play/car-logs-n.webp
new file mode 100644
index 0000000..b00ebe8
Binary files /dev/null and b/assets/play/car-logs-n.webp differ
diff --git a/assets/play/car-rcoach-d.webp b/assets/play/car-rcoach-d.webp
new file mode 100644
index 0000000..9da4835
Binary files /dev/null and b/assets/play/car-rcoach-d.webp differ
diff --git a/assets/play/car-rcoach-n.webp b/assets/play/car-rcoach-n.webp
new file mode 100644
index 0000000..0800c2a
Binary files /dev/null and b/assets/play/car-rcoach-n.webp differ
diff --git a/assets/play/car-tank-d.webp b/assets/play/car-tank-d.webp
new file mode 100644
index 0000000..82dbe4e
Binary files /dev/null and b/assets/play/car-tank-d.webp differ
diff --git a/assets/play/car-tank-n.webp b/assets/play/car-tank-n.webp
new file mode 100644
index 0000000..1bd4762
Binary files /dev/null and b/assets/play/car-tank-n.webp differ
diff --git a/assets/play/p-child.png b/assets/play/p-child.png
new file mode 100644
index 0000000..8803157
Binary files /dev/null and b/assets/play/p-child.png differ
diff --git a/assets/play/p-stand.png b/assets/play/p-stand.png
new file mode 100644
index 0000000..d2219d3
Binary files /dev/null and b/assets/play/p-stand.png differ
diff --git a/assets/play/p-walk.png b/assets/play/p-walk.png
new file mode 100644
index 0000000..acd89fe
Binary files /dev/null and b/assets/play/p-walk.png differ
diff --git a/assets/play/paul.png b/assets/play/paul.png
new file mode 100644
index 0000000..38b0899
Binary files /dev/null and b/assets/play/paul.png differ
diff --git a/assets/play/play-kb.js b/assets/play/play-kb.js
new file mode 100644
index 0000000..0b15b45
--- /dev/null
+++ b/assets/play/play-kb.js
@@ -0,0 +1,321 @@
+// Kleinbahn page: the rule under the header is a railway (mock-up).
+// The scenery is drawn in ink like the rest of the sheet: two hills with tunnels, a station building, a signal.
+// The train is the game's own models (the near versions), rendered in 16 wheel positions, by day and by night.
+// The two tunnels are one loop: what goes into the right hill comes out of the left one at once.
+// The train stops at the station where people get on and off. The smoke is soft puffs, one burst per beat of the engine.
+// Tap a car to stop or start the train, grab it and push it, set the signal. Sheep graze on the hill.
+(() => {
+  const main = document.getElementById('main'), head = document.querySelector('.post-head'), reel = document.querySelector('.product > .reel');
+  if (!main || !head || !reel) return;
+  const A = '/assets/play/';
+  const reduced = () => matchMedia('(prefers-reduced-motion: reduce)').matches;
+  const dark = () => { const t = document.documentElement.dataset.theme; return t ? t === 'dark' : matchMedia('(prefers-color-scheme: dark)').matches; };
+  main.classList.add('has-play', 'has-rail');
+  const hint = document.createElement('p'); hint.className = 'label play-hint';
+  hint.textContent = 'The train runs on the line below. Tap it to stop or start it, push it along, or set the signal.';
+  head.appendChild(hint);
+  const layer = document.createElement('div'); layer.className = 'play-layer'; main.appendChild(layer);
+  const mk = (tag, cls, parent = layer) => { const e = document.createElement(tag); if (cls) e.className = cls; parent.appendChild(e); return e; };
+  const svgEl = (w, h, cls, inner, below = 0) => { const d = mk('div', cls); d.innerHTML = `<svg viewBox="0 0 ${w} ${h + below}" width="${w}" height="${h + below}" aria-hidden="true">${inner}</svg>`; return d; };
+  const put = (el, x, y, extra = '') => { el.style.transform = `translate(${Math.round(x)}px, ${Math.round(y)}px)${extra}`; };
+  let now = performance.now();
+
+  // ---------- the cars: frames rendered from src/models/train.js (detail:'high'), 250 px per model unit ----------
+  // l, r: the picture's edges from the car's centre; dia: the wheel, so a wheel frame moves with the distance
+  const CAR = {
+    loco: { w: 241, h: 150, dia: .17, label: 'The steam engine' }, coach: { w: 200, h: 125, dia: .12, label: 'A coach' },
+    rcoach: { w: 216, h: 125, dia: .12, label: 'A coach' }, box: { w: 206, h: 120, dia: .17, label: 'A box van' },
+    logs: { w: 206, h: 124, dia: .17, label: 'A wagon with logs' }, tank: { w: 206, h: 128, dia: .17, label: 'A tank wagon' } };
+  const FRAMES = 16;
+
+  // ---------- layout ----------
+  let W, railY, u, wide;
+  const measure = () => { const m = main.getBoundingClientRect(), r = reel.getBoundingClientRect();
+    W = main.clientWidth; railY = r.top - m.top; wide = W >= 700; u = wide ? 125 : 92; };
+  measure();
+
+  // ---------- the drawn scenery ----------
+  const sleepers = mk('div', 'kb-sleepers');
+  const BELOW = 12;
+  const hill = side => {      // a hill with a tunnel portal on its inner side; the train passes behind it
+    const w = wide ? 160 : 78, ph = Math.round(CAR.loco.h * u / 250) + 16, h = ph + (wide ? 36 : 26), id = 'kbh' + side + w;
+    const pw = 13, px = w - pw, top = `M0 ${h * .36} C${w * .2} 0 ${w * .48} 0 ${w * .68} ${h * .1} C${w * .84} ${h * .17} ${px - 5} ${h - ph - 15} ${px} ${h - ph - 8}`;
+    const inner = `<defs><pattern id="${id}" width="7" height="7" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><line class="kb-hatch" x1="0" y1="0" x2="0" y2="7"/></pattern></defs>
+      <path class="kb-hill__fill" d="${top} L${px} ${h} L0 ${h} Z"/><path d="${top} L${px} ${h} L0 ${h} Z" fill="url(#${id})"/>
+      <path class="kb-ink" d="${top}"/>
+      <rect class="kb-hill__fill kb-ink" x="${px}" y="${h - ph}" width="${pw}" height="${ph}"/>
+      <rect class="kb-hill__fill kb-ink" x="${px - 3}" y="${h - ph - 8}" width="${pw + 5}" height="8"/>
+      ${Array.from({ length: Math.floor(ph / 10) }, (_, k) => `<line class="kb-ink kb-thin" x1="${px}" y1="${h - ph + k * 10 + 10}" x2="${w}" y2="${h - ph + k * 10 + 10}"/>`).join('')}
+      ${Array.from({ length: Math.floor(ph / 10) }, (_, k) => `<line class="kb-ink kb-thin" x1="${px + (k % 2 ? 4 : 8)}" y1="${h - ph + k * 10}" x2="${px + (k % 2 ? 4 : 8)}" y2="${h - ph + k * 10 + 10}"/>`).join('')}
+      <rect class="kb-hill__fill" x="-1" y="${h - 2}" width="${w + 2}" height="${BELOW + 2}"/><line class="kb-ink kb-ground" x1="-1" y1="${h + .75}" x2="${w + 1}" y2="${h + .75}"/>`;
+    // the hill reaches over the track: its paper covers the wheels and the sleepers, and it draws the rail line again
+    const el = svgEl(w, h, 'kb-hill', inner, BELOW); if (side < 0) el.firstChild.style.transform = 'scaleX(-1)';
+    // the outline as a table of heights, so sheep can stand on the slope
+    const path = el.querySelector('path.kb-ink'), n = path.getTotalLength(), ys = new Array(Math.ceil(w) + 1).fill(h);
+    for (let k = 0; k <= 200; k++) { const pt = path.getPointAtLength(n * k / 200), i = Math.round(pt.x); if (i >= 0 && i < ys.length) ys[i] = Math.min(ys[i], pt.y); }
+    for (let i = 1; i < ys.length; i++) if (ys[i] === h) ys[i] = ys[i - 1];
+    return { el, w, h, ph, side, plateau: w * .6, yAt: x => ys[Math.max(0, Math.min(ys.length - 1, Math.round(x)))] }; };
+  let HL, HR;
+  const building = svgEl(130, 74, 'kb-building', `
+    <path class="kb-ink kb-paper" d="M14 30 L65 6 L116 30 Z"/><rect class="kb-ink kb-paper" x="20" y="30" width="90" height="44"/>
+    <rect class="kb-ink kb-paper" x="88" y="4" width="8" height="16"/>
+    <rect class="kb-ink" x="57" y="46" width="16" height="28"/><rect class="kb-ink" x="31" y="44" width="14" height="16"/><rect class="kb-ink" x="85" y="44" width="14" height="16"/>
+    <line class="kb-ink kb-thin" x1="38" y1="44" x2="38" y2="60"/><line class="kb-ink kb-thin" x1="92" y1="44" x2="92" y2="60"/>
+    <circle class="kb-ink kb-paper" cx="65" cy="22" r="5"/><line class="kb-ink kb-thin" x1="65" y1="22" x2="65" y2="18.5"/><line class="kb-ink kb-thin" x1="65" y1="22" x2="67.5" y2="22"/>
+    <text class="kb-name" x="65" y="40" text-anchor="middle">KLEINBAHN</text>`);
+  const platform = mk('div', 'kb-platform');
+  const lamp = svgEl(14, 64, 'kb-lamp', '<line class="kb-ink" x1="7" y1="10" x2="7" y2="64"/><path class="kb-ink kb-paper" d="M2 10 L12 10 L10 2 L4 2 Z"/>');
+  const signal = mk('button', 'kb-signal'); signal.type = 'button';
+  signal.innerHTML = '<svg viewBox="0 0 34 62" aria-hidden="true"><line class="ink" x1="17" y1="6" x2="17" y2="62"/><line class="ink" x1="10" y1="61" x2="24" y2="61"/>' +
+    '<g class="arm"><rect class="fill" x="17" y="9" width="17" height="6"/><circle class="hole" cx="29" cy="12" r="1.6"/></g><circle class="ink" cx="17" cy="12" r="2.4"/></svg>';
+  let clear = true;
+  const setSignal = c => { clear = c; signal.setAttribute('aria-pressed', String(c)); signal.setAttribute('aria-label', `Signal: ${c ? 'clear' : 'stop'}. Press to set it to ${c ? 'stop' : 'clear'}.`); };
+  setSignal(true);
+  signal.addEventListener('click', () => { setSignal(!clear); if (clear && T.v < 5 && T.mode === 'run') whistle(); });
+
+  // ---------- the train ----------
+  const T = { s: 0, v: 0, mode: 'run', cars: [], served: false, dwell: 0, inside: 3, held: null, lastPuff: 0, tunnel: 0 };
+  const strip = k => `url(${A}car-${k}-${dark() ? 'n' : 'd'}.webp)`;
+  const build = () => {
+    for (const c of T.cars) c.el.remove();
+    T.cars = [];
+    const kinds = wide ? ['loco', 'coach', 'rcoach', 'coach', 'box', 'logs', 'tank'] : ['loco', 'coach', 'box'];
+    for (const k of kinds) {
+      const d = CAR[k], w = d.w * u / 250, h = d.h * u / 250, el = mk('div', 'kb-car');
+      el.style.width = w + 'px'; el.style.height = h + 'px'; el.style.backgroundImage = strip(k); el.style.backgroundSize = `${w * FRAMES}px ${h}px`;
+      el.setAttribute('role', 'img'); el.setAttribute('aria-label', `${d.label}. Tap to stop or start the train, drag to push it.`);
+      T.cars.push({ kind: k, el, w, h, x: 0, v: 0, step: Math.PI * d.dia * u / FRAMES, passengers: k === 'coach' || k === 'rcoach' }); grab(el);
+    }
+    T.len = T.cars.reduce((a, c) => a + c.w, 0);
+  };
+  new MutationObserver(() => { night = dark(); for (const c of T.cars) c.el.style.backgroundImage = strip(c.kind); }).observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+  matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => { night = dark(); for (const c of T.cars) c.el.style.backgroundImage = strip(c.kind); });
+
+  const lay = () => {               // the station, the signal and the hills for this width
+    if (!HL || HL.wide !== wide) { if (HL) { HL.el.remove(); HR.el.remove(); } HL = hill(1); HR = hill(-1); HL.wide = HR.wide = wide; }
+    const lw = T.cars[0].w, pass = T.cars.filter(c => c.passengers).reduce((a, c) => a + c.w, 0);
+    T.xs = Math.round(W - HR.w - (wide ? 36 : 10));                 // where the engine's front stops
+    T.pl1 = Math.round(T.xs - lw - pass - 6); T.pl2 = Math.round(T.xs - lw * .3);
+    T.xsig = Math.round(Math.max(HL.w + 30, T.pl1 - (wide ? 70 : 30)));
+    // the loop: a car's right edge runs from just inside the left portal to where the right hill hides the whole car
+    const maxW = Math.max(...T.cars.map(c => c.w)); T.x0 = HL.w - 6; T.L = (W - HR.w + maxW + 6) - T.x0;
+    put(sleepers, 0, railY + 1.5); sleepers.style.width = W + 'px';
+    put(HL.el, 0, railY - HL.h); put(HR.el, W - HR.w, railY - HR.h);
+    platform.style.width = (T.pl2 - T.pl1) + 'px'; put(platform, T.pl1, railY - 10);
+    const bs = wide ? 1 : .62; building.firstChild.style.width = 130 * bs + 'px'; building.firstChild.style.height = 74 * bs + 'px';
+    put(building, (T.pl1 + T.pl2) / 2 - 65 * bs, railY - 10 - 74 * bs);
+    put(lamp, T.pl1 + 8, railY - 10 - 64 * (wide ? 1 : .8)); lamp.firstChild.style.height = 64 * (wide ? 1 : .8) + 'px';
+    put(signal, T.xsig + 4, railY - 62);
+    signal.style.display = !wide && T.xsig + 40 > T.pl1 ? 'none' : '';
+  };
+  const place = s => { T.s = s; let right = s; for (const c of T.cars) { c.x = right; right -= c.w - 1; } for (const c of T.cars) c.d = disp(c.x); T.lap = lapOf(s); };
+  // positions run on without end; on screen they wrap round the loop
+  const disp = X => T.x0 + (((X - T.x0) % T.L) + T.L) % T.L;
+  const lapOf = X => Math.floor((X - T.x0) / T.L);
+  const LD = () => disp(T.s);
+
+  // ---------- people on the platform ----------
+  const people = [];
+  const PH = () => .18 * u;
+  const person = (kind, x, state = 'wait') => {
+    const img = mk('img', 'play-img'); img.alt = ''; img.draggable = false;
+    const p = { kind, img, x, face: Math.random() < .5 ? 1 : -1, state, tx: x, t: Math.random() * 30 };
+    img.src = A + (kind === 'child' ? 'p-child.png' : 'p-stand.png'); img.style.transition = 'opacity .5s';
+    img.addEventListener('click', () => { if (p.state === 'wait') { p.face *= -1; say(['Hello!', 'Is it on time?', 'Morning!'][Math.floor(Math.random() * 3)], p.x, railY - 10 - PH()); } });
+    people.push(p); return p; };
+  const drawPerson = p => {
+    const h = p.kind === 'child' ? PH() * .66 : PH(), walking = p.state === 'walk' || p.state === 'board' || p.state === 'leave';
+    const step = walking && Math.floor(now / 170) % 2, file = p.kind === 'child' ? 'p-child.png' : step ? 'p-walk.png' : 'p-stand.png';
+    if (!p.img.src.endsWith(file)) p.img.src = A + file;
+    const w = h * (p.kind === 'child' ? 31 / 84 : step ? 54 / 128 : 47 / 129);
+    p.img.style.height = h + 'px'; p.img.style.width = w + 'px';
+    const bob = walking && p.kind === 'child' ? Math.floor(now / 150) % 2 : 0;
+    put(p.img, p.x - w / 2, railY - 10 - h - bob, ` scaleX(${p.face})`); };
+
+  // ---------- sheep on the left hill ----------
+  const sheep = [0, 1].map(i => { const img = mk('img', 'play-img'); img.src = A + 'sheep2.png'; img.alt = ''; img.draggable = false; img.style.zIndex = 7;
+    const sh = { img, x: 0, face: i ? -1 : 1, hop: 0, next: 2 + Math.random() * 5, walk: 0 };
+    img.addEventListener('click', () => { hop(sh); say('Mäh', sh.x, railY - HL.h - 30); }); return sh; });
+  const hop = sh => { if (!sh.hop) sh.hop = now; };
+
+  // ---------- speech, smoke ----------
+  const bubble = mk('div', 'play-bubble'); let bubbleT = 0;
+  const say = (text, x, y, ms = 1600) => { bubble.textContent = text; bubble.classList.add('is-on'); put(bubble, Math.max(8, Math.min(W - 90, x - 20)), y - 34); bubbleT = now + ms; };
+  // ---------- smoke and steam, low poly ----------
+  // Each puff is a faceted blob like the game's models: a fan of flat triangles, lit from the upper left.
+  // The physics: the exhaust leaves the chimney fast with the train's speed, air drag slows it to the breeze,
+  // warm smoke keeps rising while it cools, a shared turbulent flow folds neighbouring puffs together,
+  // puffs grow as they take in air, turn lighter and fade. At speed the plume lies long and low; standing, it climbs.
+  const NS = 'http://www.w3.org/2000/svg';
+  const smoke = mk('div', 'kb-smoke'); smoke.innerHTML = `<svg width="100%" height="100%" aria-hidden="true"></svg>`;
+  const sv = smoke.firstChild, parts = [], pool = [];
+  let night = dark();
+  const facet = () => {               // a unit puff: 6 to 8 corners, a little irregular, its centre nudged towards the light
+    const n = 6 + Math.floor(Math.random() * 3), pts = [], cx = -.12, cy = -.14;
+    for (let k = 0; k < n; k++) { const a = (k + Math.random() * .5) / n * Math.PI * 2, r = .82 + Math.random() * .3; pts.push([Math.cos(a) * r, Math.sin(a) * r]); }
+    const g = document.createElementNS(NS, 'g'), base = document.createElementNS(NS, 'polygon');
+    base.setAttribute('points', pts.map(p => p.join(',')).join(' ')); base.setAttribute('fill', 'currentColor'); g.appendChild(base);
+    for (let k = 0; k < n; k++) {
+      const p1 = pts[k], p2 = pts[(k + 1) % n], mx = (p1[0] + p2[0]) / 2 - cx, my = (p1[1] + p2[1]) / 2 - cy;
+      const lit = (-mx - my) / Math.hypot(mx, my) / Math.SQRT2;         // facing the upper left: lit; facing down right: shade
+      if (Math.abs(lit) < .25) continue;
+      const t = document.createElementNS(NS, 'polygon');
+      t.setAttribute('points', `${cx},${cy} ${p1.join(',')} ${p2.join(',')}`);
+      t.setAttribute('fill', lit > 0 ? '#fff' : '#000'); t.setAttribute('fill-opacity', (lit > 0 ? .26 : .16) * Math.abs(lit));
+      g.appendChild(t); }
+    return g; };
+  const puff = (x, y, o) => {
+    if (parts.length > 170) return;
+    const g = pool.pop() || facet(); sv.appendChild(g);
+    parts.push({ g, x, y, vx: o.vx || 0, vy: o.vy || 0, r0: o.r0 || 4, gr: o.gr || 14, life: o.life || 3, a: o.a ?? .6, age: 0, steam: !!o.steam,
+      drag: o.drag ?? 2.2, buoy: o.buoy ?? 26, rot: Math.random() * 360, spin: (Math.random() - .5) * 50, cc: -1 }); };
+  const flow = (x, y, t) => [                                     // a slow turbulent field: neighbours move alike
+    9 * Math.sin(.031 * y + .8 * t) + 6 * Math.sin(.047 * x - .55 * t + 1.3),
+    5 * Math.cos(.037 * x + .6 * t) + 4 * Math.sin(.052 * y - .9 * t) ];
+  const smokeStep = dt => {
+    const t = now / 1000, wind = -10 * sc(), ceil = railY - (wide ? 150 : 104) * sc() * (wide ? 1 : 1.3);
+    for (let i = parts.length - 1; i >= 0; i--) {
+      const p = parts[i]; p.age += dt * (p.y < ceil ? 2.5 : 1); const k = p.age / p.life;
+      if (k >= 1) { p.g.remove(); pool.push(p.g); parts.splice(i, 1); continue; }
+      const dr = Math.exp(-p.drag * dt), [fx, fy] = flow(p.x, p.y, t), heat = Math.exp(-p.age / 1.4);
+      p.vx = wind + (p.vx - wind) * dr; p.vy = p.vy * dr - p.buoy * heat * dt;
+      p.x += (p.vx + fx * Math.min(1, p.age * 1.5)) * dt; p.y += (p.vy + fy * Math.min(1, p.age * 1.5)) * dt;
+      if (p.y > railY - 4) { p.y = railY - 4; p.vy = Math.min(p.vy, 0); }        // smoke does not sink into the ground
+      p.rot += p.spin * dt;
+      const r = p.r0 + p.gr * Math.sqrt(p.age), fade = Math.min(1, p.age / .08) * Math.pow(1 - k, 1.6);
+      const m = Math.min(1, k * 1.4), [c0, c1] = p.steam ? (night ? [238, 238] : [214, 236]) : night ? [196, 118] : [62, 176];
+      const gC = Math.round(c0 + (c1 - c0) * m);
+      if (gC !== p.cc) { p.cc = gC; p.g.style.color = `rgb(${gC},${gC},${gC})`; }
+      p.g.setAttribute('transform', `translate(${p.x.toFixed(1)} ${p.y.toFixed(1)}) rotate(${p.rot.toFixed(0)}) scale(${r.toFixed(2)})`);
+      p.g.setAttribute('opacity', (p.a * fade).toFixed(3)); } };
+  const sc = () => u / 125;
+  const loco = () => T.cars[0];
+  const chimney = () => { const l = loco(); return [l.d - l.w * .21, railY - l.h + 3]; };
+  const visible = x => x > HL.w - 4 && x < W - HR.w + 4;
+  // one beat of the engine: a burst from the chimney, or out of a portal while the engine is in a tunnel
+  const chuff = (strong) => {
+    const [x, y] = chimney(), s = sc(), v = T.v;
+    if (!visible(x)) { const left = x <= HL.w, px = left ? HL.w + 2 : W - HR.w - 2, hh = left ? HL : HR;
+      puff(px, railY - hh.ph * .8, { vx: (left ? 40 : -40) * s, vy: -10, r0: 7 * s, gr: 14 * s, life: 3.2, a: .4, drag: 2.5, buoy: 18 }); return; }
+    for (let i = 0; i < 2; i++) puff(x + (Math.random() - .5) * 3, y - i * 3, { vx: v + (Math.random() - .5) * 14, vy: -(95 + Math.abs(v) * .3 + Math.random() * 30) * s,
+      r0: (3 + Math.random() * 2) * s, gr: (strong ? 15 : 12) * s * (.85 + Math.random() * .3), life: 3 + Math.random() * 1.2, a: strong ? .78 : .62, drag: 2.4, buoy: 30 * s }); };
+  const cocks = () => { const l = loco(), s = sc();                // the cylinder cocks blow steam when the engine starts
+    for (const dir of [1, -1]) puff(l.d - l.w * .12, railY - 10 * s, { steam: true, vx: dir * (110 + Math.random() * 60) * s + T.v, vy: -10, r0: 3 * s, gr: 13 * s, life: .9, a: .75, drag: 3.5, buoy: 10 }); };
+  const whistle = () => { const l = loco(), s = sc(), x = l.d - l.w * .45, y = railY - l.h * .82;
+    for (let i = 0; i < 6; i++) setTimeout(() => puff(x, y, { steam: true, vx: T.v, vy: -130 * s, r0: 2 * s, gr: 9 * s, life: 1.1, a: .85, drag: 3, buoy: 8 }), i * 55);
+    T.cocks = 1.6; for (let i = 0; i < 3; i++) setTimeout(() => chuff(true), i * 220); };
+  const brakeHiss = () => { const l = loco(), s = sc();
+    for (let i = 0; i < 5; i++) setTimeout(() => puff(l.d - l.w * (.15 + .4 * Math.random()), railY - 5 * s, { steam: true, vx: (Math.random() - .5) * 90 * s, vy: -12, r0: 2 * s, gr: 10 * s, life: .8, a: .6, drag: 3.5, buoy: 8 }), i * 80); };
+  // ---------- pointer ----------
+  function grab(el) {
+    el.addEventListener('pointerdown', e => { e.preventDefault(); el.setPointerCapture(e.pointerId); T.held = { el, x0: e.clientX, s0: T.s, moved: false, hist: [[now, e.clientX]] }; el.classList.add('is-held'); });
+    el.addEventListener('pointermove', e => { const h = T.held; if (!h || h.el !== el) return; if (Math.abs(e.clientX - h.x0) > 5) h.moved = true;
+      h.hist.push([now, e.clientX]); if (h.hist.length > 6) h.hist.shift(); if (h.moved) h.target = h.s0 + (e.clientX - h.x0); });
+    const up = () => { const h = T.held; if (!h || h.el !== el) return; T.held = null; el.classList.remove('is-held');
+      if (!h.moved) { toggle(); return; }
+      const a = h.hist[0], b = h.hist[h.hist.length - 1]; T.v = Math.max(-420, Math.min(420, (b[1] - a[1]) / Math.max(.016, (b[0] - a[0]) / 1000)));
+      if (Math.abs(T.v) > 160) say(T.v > 0 ? 'Whoosh!' : 'Backwards?', Math.min(W - HR.w - 60, LD() - 40), railY - T.cars[0].h); };
+    el.addEventListener('pointerup', up); el.addEventListener('pointercancel', up); }
+  const toggle = () => { const x = Math.min(W - HR.w - 60, LD() - 30);
+    if (T.mode === 'run') { T.mode = 'halt'; say('Stop!', x, railY - T.cars[0].h); } else { T.mode = 'run'; T.served = T.served || T.v === 0 && Math.abs(LD() - T.xs) < 2; whistle(); } };
+
+  // ---------- one step ----------
+  const CRUISE = () => 78 * u / 125, ACC = 30, BRK = 55;
+  const drive = dt => {
+    if (T.held) { if (T.held.target != null) { const ns = T.held.target; T.v = (ns - T.s) / Math.max(dt, .001) * .3 + T.v * .7; T.s = ns; } return; }
+    const vt = T.mode === 'run' && T.dwell <= 0 ? CRUISE() : 0, dl = LD(); let stopAt = null;
+    if (T.v >= 0) {
+      if (!clear && dl < T.xsig - 6) stopAt = T.xsig - 8;
+      if (!T.served && dl < T.xs + 1 && T.mode === 'run') stopAt = stopAt == null ? T.xs : Math.min(stopAt, T.xs);
+    }
+    if (stopAt != null && T.v > 0) {
+      const d = stopAt - dl;
+      if (d <= T.v * T.v / (2 * BRK) + 1) { if (d < .6) { T.s += d; T.v = 0; brakeHiss(); } else T.v = Math.max(4, T.v - T.v * T.v / (2 * d) * dt); }
+      else T.v = Math.min(vt, T.v + ACC * dt);
+    } else if (T.v < vt) T.v = Math.min(vt, T.v + ACC * dt * (T.v < 0 ? 3 : 1));
+    else { const was = T.v; T.v = Math.max(vt, T.v - (T.v > CRUISE() ? 80 : BRK) * dt); if (was > 0 && T.v === 0) brakeHiss(); }
+    T.s += T.v * dt;
+    const lap = lapOf(T.s); if (lap > T.lap) T.served = false; T.lap = lap;      // a new round: the station waits again
+    if (!T.served && T.v === 0 && Math.abs(LD() - T.xs) < 1 && T.dwell <= 0 && T.mode === 'run') arrive();
+    if (T.dwell > 0) { T.dwell -= dt; if (T.dwell <= 0) { T.served = true; whistle(); } } };
+  const doors = () => T.cars.filter(c => c.passengers).map(c => c.d - c.w / 2);
+  const arrive = () => {
+    T.dwell = 6; const ds = doors(); if (!ds.length) return;
+    const out = Math.min(T.inside, 1 + Math.floor(Math.random() * 3));
+    for (let i = 0; i < out; i++) setTimeout(() => {           // get off, wait a moment, walk away
+      const p = person(Math.random() < .3 ? 'child' : 'adult', ds[i % ds.length], 'walk'); T.inside--;
+      p.img.style.opacity = 0; requestAnimationFrame(() => { p.img.style.opacity = 1; });
+      p.tx = T.pl1 + 14 + Math.random() * (T.pl2 - T.pl1 - 28) * .5; p.then = 'leave'; }, 400 + i * 650);
+    for (const p of people.filter(p => p.state === 'wait')) { p.state = 'board'; p.tx = ds[Math.floor(Math.random() * ds.length)] + (Math.random() - .5) * 12; } };
+  const peopleStep = dt => {
+    for (const p of [...people]) {
+      if (p.state === 'walk' || p.state === 'board' || p.state === 'leave') {
+        const d = p.tx - p.x, sp = (p.kind === 'child' ? 20 : 15) * u / 125; p.face = d >= 0 ? 1 : -1;
+        if (Math.abs(d) < sp * dt) {
+          p.x = p.tx;
+          if (p.state === 'board' || p.state === 'leave') { if (p.state === 'board') T.inside++; p.img.style.opacity = 0; p.state = 'gone';
+            setTimeout(() => { p.img.remove(); people.splice(people.indexOf(p), 1); }, 600); }
+          else if (p.then === 'leave') { p.state = 'wait'; p.then = null; setTimeout(() => { if (p.state === 'wait') { p.state = 'leave'; p.tx = T.pl1 - 4; } }, 2500 + Math.random() * 2500); }
+          else p.state = 'wait';
+        } else p.x += Math.sign(d) * sp * dt;
+      } else if (p.state === 'wait' && !reduced()) { p.t -= dt; if (p.t < 0) { p.t = 5 + Math.random() * 25; p.face *= -1; } }
+      drawPerson(p); }
+    const waiting = people.filter(p => p.state === 'wait' || (p.state === 'walk' && !p.then)).length;
+    const away = T.cars.every(c => c.d < T.pl1 + 4 || c.d - c.w > T.pl2 - 4);
+    if (!reduced() && T.dwell <= 0 && waiting < 3 && away && Math.random() < dt * .3) {
+      const p = person(Math.random() < .25 ? 'child' : 'adult', T.pl1 - 2, 'walk'); p.img.style.opacity = 0; requestAnimationFrame(() => { p.img.style.opacity = 1; });
+      p.tx = T.pl1 + 18 + Math.random() * (T.pl2 - T.pl1 - 36); } };
+
+  let last = performance.now();
+  const tick = t => {
+    now = t; const dt = Math.min(.05, (t - last) / 1000); last = t;
+    const s0 = T.s; drive(dt);
+    // couplings: the cars follow on a spring, so the train bunches up when it brakes and stretches when it pulls
+    T.cars[0].x = T.s; T.cars[0].v = T.v;
+    for (let i = 1; i < T.cars.length; i++) {
+      const c = T.cars[i], p = T.cars[i - 1], target = p.x - p.w + 1;
+      c.v += (160 * (target - c.x) - 15 * (c.v - p.v)) * dt; c.x += c.v * dt;
+      c.x = Math.max(target - 6, Math.min(target + 1.5, c.x)); }
+    const sp = Math.abs(T.v);
+    for (const c of T.cars) c.d = disp(c.x);
+    for (const [i, c] of T.cars.entries()) {
+      const f = ((FRAMES - (Math.floor(c.x / c.step) % FRAMES)) % FRAMES + FRAMES) % FRAMES;
+      c.el.style.backgroundPosition = `${-f * c.w}px 0`;
+      const bob = sp > 5 ? Math.round(Math.sin(c.x * .3 + i * 2) * .6) : 0;
+      put(c.el, c.d - c.w, railY - c.h + 1 + bob); }
+    // smoke: four beats to a turn of the driving wheels; standing, the engine simmers
+    T.beat = (T.beat || 0) + Math.abs(T.s - s0);
+    const beatLen = Math.PI * .17 * u / 4;
+    if (T.beat >= beatLen) { T.beat %= beatLen; chuff(T.v > 2 && T.v < CRUISE() * .7 && T.mode === 'run'); }
+    if (!reduced() && sp < 3 && now - T.lastPuff > 380) { T.lastPuff = now; const [x, y] = chimney();
+      if (visible(x)) puff(x, y, { vx: 0, vy: -30 * sc(), r0: 2.5 * sc(), gr: 8 * sc(), life: 3, a: .34, drag: 1.5, buoy: 16 * sc() });
+      if (Math.random() < .08) { const l = loco(); puff(l.d - l.w * .62, railY - l.h * .74, { steam: true, vy: -70 * sc(), r0: 2 * sc(), gr: 7 * sc(), life: 1.1, a: .7, drag: 2.5, buoy: 8 }); } }
+    if (T.cocks > 0) { T.cocks -= dt; if (Math.random() < dt * 14) cocks(); }
+    smokeStep(dt);
+    // sheep graze on the hill, step about, and look up when the engine comes out of the tunnel
+    for (const [i, sh] of sheep.entries()) {
+      const h = .14 * u * 1.4, w = h * 98 / 72; sh.img.style.width = w + 'px'; sh.img.style.height = h + 'px';
+      sh.img.style.display = i && !wide ? 'none' : '';
+      if (!sh.x) sh.x = HL.plateau * (i ? .72 : .3);
+      if (!reduced()) { sh.next -= dt; if (sh.next < 0) { sh.next = 4 + Math.random() * 7; if (Math.random() < .45) sh.face *= -1; else sh.walk = 1 + Math.random(); } }
+      if (sh.walk > 0) { sh.walk -= dt; sh.x += sh.face * 7 * dt; if (sh.x < w / 2 + 2 || sh.x > HL.plateau - w / 2) { sh.face *= -1; sh.x = Math.max(w / 2 + 2, Math.min(HL.plateau - w / 2, sh.x)); } }
+      const nose = loco().d; if (T.v > 30 && nose > HL.w && nose < HL.w + 30) { hop(sh); sh.face = 1; }
+      let hy = 0; if (sh.hop) { const k = (now - sh.hop) / 420; if (k >= 1) sh.hop = 0; else hy = Math.sin(Math.PI * k) * 9; }
+      put(sh.img, sh.x - w / 2, railY - HL.h + HL.yAt(sh.x) - h + 2 - hy, ` scaleX(${sh.face})`); }
+    peopleStep(dt);
+    if (bubbleT && now > bubbleT) { bubble.classList.remove('is-on'); bubbleT = 0; }
+    requestAnimationFrame(tick); };
+
+  const start = () => {
+    measure(); build(); lay();
+    if (reduced()) { place(T.xs); T.served = true; T.mode = 'halt'; }
+    else { place(HL.w + T.cars[0].w + 20); T.v = CRUISE() * .8; }
+    for (const k of [.2, .45, .7]) person(k === .45 ? 'child' : 'adult', T.pl1 + (T.pl2 - T.pl1) * k);
+    requestAnimationFrame(tick);
+    let rt, lastW = W;
+    const relayout = () => { const k = LD() / lastW; measure(); if (Math.abs(W - lastW) > 40) { build(); lay(); place(k * W); lastW = W; for (const p of people) p.x = Math.max(T.pl1 + 10, Math.min(T.pl2 - 10, p.x)); } else lay(); };
+    addEventListener('resize', () => { clearTimeout(rt); rt = setTimeout(relayout, 150); });
+    setInterval(() => { measure(); lay(); }, 1500); };
+  const go = () => (document.fonts ? document.fonts.ready : Promise.resolve()).then(start);
+  if (document.readyState === 'complete') go(); else addEventListener('load', go);
+})();
diff --git a/assets/play/play-wz.js b/assets/play/play-wz.js
new file mode 100644
index 0000000..878f580
--- /dev/null
+++ b/assets/play/play-wz.js
@@ -0,0 +1,376 @@
+// Wortzauber page: Paul and the Schwebe-Bot live on the lines of the article (mock-up).
+// Paul walks on the rules, the feature list, the pictures and the title. Pick him up and throw him;
+// tap a dotted word and he makes the thing appear. When the reader scrolls on, he follows.
+(() => {
+  const main = document.getElementById('main');
+  if (!main || !document.querySelector('.post-head')) return;
+  const A = '/assets/play/';
+  const reduced = () => matchMedia('(prefers-reduced-motion: reduce)').matches;
+  const G = 2200;                       // gravity, px/s²
+  main.classList.add('has-play');
+  const layer = document.createElement('div'); layer.className = 'play-layer'; main.appendChild(layer);
+
+  // ---------- sprites ----------
+  const SHEETS = {
+    paul: { src: 'paul.png', w: 512, h: 1360, fw: 64, fh: 80, cols: 8, ax: 28, ay: 78, anims: {
+      idle: [0, 4, 6], cast: [8, 8, 12], walk: [16, 8, 10], jump: [24, 8, 12], land: [29, 3, 14], air: [27, 1, 1], channel: [32, 4, 8],
+      cheer: [40, 8, 10], run: [48, 8, 14], pickup: [96, 6, 14], drop: [104, 4, 12], fly: [112, 2, 6],
+      oidle: [80, 4, 6], owalk: [88, 8, 10] } },
+    bot: { src: 'bot.png', w: 640, h: 864, fw: 64, fh: 96, cols: 10, ax: 32, ay: 88, anims: {
+      idle: [0, 4, 6], move: [10, 6, 12], wave: [20, 6, 10], carry: [40, 4, 8], point: [60, 6, 8], cheer: [70, 8, 10] } },
+    cake: { src: 'cake.png', w: 44, h: 32, fw: 44, fh: 32, cols: 1, ax: 22, ay: 31, anims: { idle: [0, 1, 1] } },
+    candle: { src: 'candle.png', w: 120, h: 44, fw: 40, fh: 44, cols: 3, ax: 20, ay: 43, anims: { idle: [0, 3, 5] } },
+    apple: { src: 'apple.png', w: 32, h: 31, fw: 32, fh: 31, cols: 1, ax: 16, ay: 30, anims: { idle: [0, 1, 1] } },
+    puff: { src: 'smoke_puff.png', w: 768, h: 128, fw: 128, fh: 128, cols: 6, ax: 64, ay: 64, scale: .5, anims: { idle: [0, 6, 14] } },
+    sparkle: { src: 'summon_sparkle.png', w: 1024, h: 128, fw: 128, fh: 128, cols: 8, ax: 64, ay: 64, anims: { idle: [0, 8, 14] } },
+  };
+  let now = performance.now();
+  const all = new Set();
+  class Spr {
+    constructor(key, cls = 'play-spr') {
+      const s = this.s = SHEETS[key], k = s.scale || 1, el = this.el = document.createElement('div');
+      el.className = cls;
+      el.style.width = s.fw * k + 'px'; el.style.height = s.fh * k + 'px';
+      el.style.backgroundImage = `url(${A}${s.src})`; el.style.backgroundSize = `${s.w * k}px ${s.h * k}px`;
+      layer.appendChild(el);
+      this.x = 0; this.y = 0; this.face = 1; this.rot = 0; this.z = 1; this.play('idle'); all.add(this);
+    }
+    play(name, once = false) { if (this.anim === name && !once && !this.once) return; this.anim = name; this.t0 = now; this.once = once; this.ended = false; }
+    draw() {
+      const s = this.s, k = s.scale || 1, [f0, n, fps] = s.anims[this.anim];
+      let i = Math.floor((now - this.t0) / 1000 * fps);
+      if (this.once) { if (i >= n) { i = n - 1; this.ended = true; } } else i %= n;
+      const f = f0 + i, el = this.el;
+      el.style.backgroundPosition = `${-(f % s.cols) * s.fw * k}px ${-Math.floor(f / s.cols) * s.fh * k}px`;
+      const r = this.rot ? ` rotate(${this.rot.toFixed(1)}deg)` : '';
+      el.style.transformOrigin = this.rot ? `${s.ax * k}px ${8 * k}px` : `${s.ax * k}px ${s.ay * k}px`;
+      el.style.transform = `translate(${Math.round(this.x - s.ax * k)}px, ${Math.round(this.y - s.ay * k)}px)${r} scaleX(${this.face})`;
+      el.style.zIndex = this.z;
+    }
+    remove() { this.el.remove(); all.delete(this); }
+  }
+  const fx = (key, x, y) => { const f = new Spr(key, 'play-fx'); f.x = x; f.y = y; f.z = 4; f.play('idle', true); f.fx = true; return f; };
+
+  // ---------- the lines of the page that things can stand on ----------
+  let surfs = [], W = 0, H = 0;
+  const mrect = () => main.getBoundingClientRect();
+  const cv = document.createElement('canvas').getContext('2d');
+  const textTop = el => {     // a heading: the top of each letter, so Paul steps up onto the tall ones
+    const m = mrect(), cs = getComputedStyle(el), node = [...el.childNodes].find(n => n.nodeType === 3 && n.nodeValue.trim());
+    const r = document.createRange(); r.selectNodeContents(el); const t = r.getBoundingClientRect();
+    cv.font = `${cs.fontWeight} ${cs.fontSize} ${cs.fontFamily}`;
+    const fm = cv.measureText('Hxg'), base = t.top - m.top + (t.height - (fm.fontBoundingBoxAscent + fm.fontBoundingBoxDescent)) / 2 + fm.fontBoundingBoxAscent;
+    const prof = [];
+    if (node) for (let i = 0; i < node.nodeValue.length; i++) {
+      const ch = node.nodeValue[i]; if (!ch.trim()) continue;
+      const cr = document.createRange(); cr.setStart(node, i); cr.setEnd(node, i + 1); const b = cr.getBoundingClientRect();
+      const gm = cv.measureText(ch); prof.push([b.left - m.left, b.right - m.left, base - gm.actualBoundingBoxAscent]);
+    }
+    const ys = prof.map(p => p[2]);
+    return { x1: t.left - m.left + 4, x2: t.right - m.left - 4, y: ys.length ? Math.min(...ys) : base - 20, prof, el };
+  };
+  const measure = () => {
+    const m = mrect(); W = main.clientWidth; H = main.scrollHeight;
+    const S = [], add = (x1, x2, y, el, kind) => { if (x2 - x1 > 40) S.push({ x1, x2, y: Math.round(y), el, kind }); };
+    const box = el => { const r = el.getBoundingClientRect(); return { l: r.left - m.left, r: r.right - m.left, t: r.top - m.top, b: r.bottom - m.top }; };
+    const h1 = document.querySelector('.post-head h1'); if (h1) { const t = textTop(h1); add(t.x1, t.x2, t.y, h1, 'title'); S[S.length - 1].prof = t.prof; }
+    for (const el of document.querySelectorAll('.product > *')) { const b = box(el); add(b.l, b.r, b.t, el, 'rule'); }
+    for (const el of document.querySelectorAll('.product h2')) { const t = textTop(el); add(t.x1, t.x2, t.y, el, 'title'); if (S.length && S[S.length - 1].el === el) S[S.length - 1].prof = t.prof; }
+    const feats = document.querySelector('.feats');
+    if (feats) { const b = box(feats); add(b.l, b.r, b.t, feats, 'line'); for (const li of feats.children) { const c = box(li); add(c.l, c.r, c.b - 1, li, 'line'); } }
+    for (const el of document.querySelectorAll('.shots img, .tl .player, .product .btn')) { const b = box(el); if (b.b > b.t) add(b.l, b.r, b.t, el, 'top'); }
+    add(0, W, H - 2, main, 'floor');
+    surfs = S;
+  };
+  const yAt = (s, x) => {               // the height of a surface at x (a heading follows its letters)
+    if (!s.prof || !s.prof.length) return s.y;
+    let y = null; for (const [a, b, t] of s.prof) if (x >= a - 2 && x <= b + 2) y = y == null ? t : Math.min(y, t);
+    if (y != null) return Math.round(y);
+    let best = s.prof[0], d = 1e9; for (const p of s.prof) { const dd = Math.min(Math.abs(x - p[0]), Math.abs(x - p[1])); if (dd < d) { d = dd; best = p; } } return Math.round(best[2]);
+  };
+  const surfAt = (x, yFrom, yTo) => {  // the first surface crossed going down from yFrom to yTo at x
+    let best = null, by = 0;
+    for (const s of surfs) { if (x < s.x1 || x > s.x2) continue; const y = yAt(s, x); if (y >= yFrom && y <= yTo && (!best || y < by)) { best = s; by = y; } }
+    return best;
+  };
+  const surfBelow = (x, y) => surfAt(x, y, 1e9);
+  const view = () => { const m = mrect(); return { t: -m.top + 56, b: -m.top + innerHeight }; };
+
+  // ---------- Paul, the bot and the things ----------
+  const P = { spr: new Spr('paul'), x: 0, y: 0, vx: 0, vy: 0, state: 'ground', surf: null, mode: 'idle', timer: 1.5, tx: 0, after: null, carry: null, goal: null, quiet: 0 };
+  const B = { spr: new Spr('bot'), x: 0, y: 0, state: 'follow', vx: 0, vy: 0, tx: 0, ty: 0 };
+  P.spr.z = 3; B.spr.z = 2;
+  const things = [];
+  const bubble = document.createElement('div'); bubble.className = 'play-bubble'; bubble.setAttribute('aria-live', 'polite'); layer.appendChild(bubble);
+  let bubbleT = 0;
+  const say = (text, ms = 3200) => { bubble.textContent = text; bubble.classList.add('is-on'); bubbleT = now + ms; };
+
+  const paulAnim = () => {
+    if (P.state === 'held') return 'fly';
+    if (P.state === 'air' || P.state === 'hop') return P.jumping ? 'jump' : 'air';
+    if (P.state === 'lift') return 'fly';
+    if (P.mode === 'walk') return P.carry ? 'owalk' : (P.fast ? 'run' : 'walk');
+    if (P.mode === 'anim') return P.animName;
+    return P.carry ? 'oidle' : 'idle';
+  };
+  const doAnim = (name, then) => { P.mode = 'anim'; P.animName = name; P.spr.play(name, true); P.after = then || null; };
+  const walkTo = (x, then, fast = false) => { const s = P.surf; P.tx = Math.max(s.x1 + 12, Math.min(s.x2 - 12, x)); P.mode = 'walk'; P.after = then || null; P.fast = fast; };
+  const idle = (t = 1 + Math.random() * 2.5) => { P.mode = 'idle'; P.timer = t; P.after = null; };
+
+  // go to a point on another surface: hop down onto it, or let the bot lift him up
+  const travel = (s, x, then) => {
+    x = Math.max(s.x1 + 14, Math.min(s.x2 - 14, x));
+    if (s === P.surf) { walkTo(x, then, true); return; }
+    if (P.carry) dropCarry();
+    if (s.y > P.y) {                      // down: a hop that only lands on s
+      const v = view(); if (P.y < v.t - 200) P.y = v.t - 120;
+      const vy0 = -420, dy = s.y - P.y, t = (-vy0 + Math.sqrt(vy0 * vy0 + 2 * G * dy)) / G;
+      P.state = 'hop'; P.hopTo = s; P.vy = vy0; P.vx = (x - P.x) / t; P.jumping = false; P.next = then; P.face = P.vx >= 0 ? 1 : -1;
+    } else {                              // up: the bot carries him
+      const v = view(); if (P.y > v.b + 200) { P.y = v.b + 120; B.y = P.y - 70; }
+      P.state = 'lift'; P.liftTo = s; P.liftX = x; P.next = then; B.state = 'lift'; say('I can lift you!', 1800);
+    }
+  };
+
+  const land = (s, vy) => {
+    P.state = 'ground'; P.surf = s; P.y = yAt(s, P.x); P.vx = 0; P.vy = 0; P.spr.rot = 0; P.jumping = false;
+    if (vy > 700) { fx('puff', P.x, P.y - 10); }
+    if (P.next) { const n = P.next; P.next = null; idle(.15); P.after = n; P.timer = .15; return; }
+    if (vy > 1300) { doAnim('land', () => { say(['Wheee!', 'Again!', 'That was high.'][Math.floor(Math.random() * 3)]); doAnim('cheer', () => idle()); }); }
+    else doAnim('land', () => idle(.8));
+  };
+
+  // ---------- things that words make ----------
+  const mkThing = (key, x, y) => {
+    if (things.length >= 6) { const old = things.shift(); if (P.carry === old) P.carry = null; fx('puff', old.x, old.y - 10); old.spr.remove(); }
+    const t = { key, spr: new Spr(key), x, y, vx: (Math.random() - .5) * 60, vy: -260, state: 'air', surf: null };
+    t.spr.z = 2; things.push(t); grabbable(t.spr.el, t, 'thing'); return t;
+  };
+  const dropCarry = () => { const t = P.carry; if (!t) return; P.carry = null; t.state = 'air'; t.vx = P.face * 80; t.vy = -150; t.spr.z = 2; };
+
+  // ---------- the brain ----------
+  const decide = () => {
+    if (P.after) { const a = P.after; P.after = null; a(); return; }
+    if (reduced()) { idle(5); return; }
+    const s = P.surf;
+    const near = things.find(t => t.state === 'ground' && t.surf === s && !P.carry && Math.abs(t.x - P.x) < 260);
+    const r = Math.random();
+    if (near && r < .7) { walkTo(near.x - Math.sign(near.x - P.x || 1) * 12, () => pickUp(near)); return; }
+    if (P.carry && r < .25) { doAnim('drop', () => { const t = P.carry; P.carry = null; t.state = 'ground'; t.surf = s; t.x = P.x + P.face * 22; t.y = s.y; t.spr.z = 2; idle(1.5); }); return; }
+    if (r < .62) { walkTo(s.x1 + 20 + Math.random() * (s.x2 - s.x1 - 40)); return; }
+    if (r < .72 && !P.carry) { doAnim('cast', () => { fx('sparkle', P.x + P.face * 30, P.y - 40); idle(1.2); }); return; }
+    if (r < .8 && !P.carry) { doAnim('channel', () => idle(.6)); return; }
+    idle(1.5 + Math.random() * 3);
+  };
+  const pickUp = t => {
+    if (t.state !== 'ground' || P.carry) { idle(); return; }
+    P.face = t.x >= P.x ? 1 : -1;
+    doAnim('pickup', () => { if (t.state === 'ground') { P.carry = t; t.state = 'carried'; t.spr.z = 4; } doAnim('cheer', () => idle(1)); });
+  };
+
+  // ---------- pointer: pick up Paul, the bot and the things ----------
+  let held = null;
+  function grabbable(el, obj, kind) {
+    el.addEventListener('pointerdown', e => {
+      if (held) return; e.preventDefault(); el.setPointerCapture(e.pointerId);
+      const m = mrect(), px = e.clientX - m.left, py = e.clientY - m.top;
+      held = { obj, kind, el, dx: obj.x - px, dy: obj.y - py, x0: px, y0: py, t0: now, moved: false, hist: [[now, px, py]] };
+    });
+    el.addEventListener('pointermove', e => {
+      if (!held || held.el !== el) return;
+      const m = mrect(), px = e.clientX - m.left, py = e.clientY - m.top;
+      held.hist.push([now, px, py]); if (held.hist.length > 6) held.hist.shift();
+      if (!held.moved && Math.hypot(px - held.x0, py - held.y0) > 5) { held.moved = true; startHold(held); }
+      if (held.moved) { held.tx = px + held.dx; held.ty = py + held.dy; }
+    });
+    const up = () => {
+      if (!held || held.el !== el) return;
+      const h = held; held = null; el.classList.remove('is-held');
+      if (!h.moved) { tap(h); return; }
+      const a = h.hist[0], b = h.hist[h.hist.length - 1], dt = Math.max(16, b[0] - a[0]) / 1000;
+      let vx = (b[1] - a[1]) / dt, vy = (b[2] - a[2]) / dt; const sp = Math.hypot(vx, vy); if (sp > 1800) { vx *= 1800 / sp; vy *= 1800 / sp; }
+      release(h, vx, vy);
+    };
+    el.addEventListener('pointerup', up); el.addEventListener('pointercancel', up);
+  }
+  const startHold = h => {
+    h.el.classList.add('is-held'); h.tx = h.obj.x; h.ty = h.obj.y;
+    if (h.kind === 'paul') { if (P.carry) dropCarry(); P.goal = null; P.next = null; P.after = null; P.state = 'held'; P.quiet = 0;
+      if (!P.wasHeld) { P.wasHeld = true; setTimeout(() => say('Careful with Paul!', 2200), 300); } }
+    if (h.kind === 'bot') { B.state = 'held'; say('Hey!', 1200); }
+    if (h.kind === 'thing') { if (P.carry === h.obj) P.carry = null; h.obj.state = 'held'; h.obj.spr.z = 4; }
+  };
+  const release = (h, vx, vy) => {
+    if (h.kind === 'paul') { P.state = 'air'; P.vx = vx; P.vy = vy; P.jumping = false; }
+    if (h.kind === 'bot') { B.state = 'follow'; B.vx = vx; B.vy = vy; setTimeout(() => say('Back to Paul.', 1600), 400); }
+    if (h.kind === 'thing') { h.obj.state = 'air'; h.obj.vx = vx; h.obj.vy = vy; h.obj.spr.z = 2; }
+  };
+  const tap = h => {
+    if (h.kind === 'paul' && P.state === 'ground') { P.goal = null; P.after = null; P.state = 'air'; P.vy = -560; P.vx = 0; P.jumping = true; P.spr.play('jump', true); }
+    if (h.kind === 'bot') { B.spr.play('wave', true); say(['Hello!', 'I am the Schwebe-Bot.', 'Tap a dotted word.'][Math.floor(Math.random() * 3)]); }
+    if (h.kind === 'thing' && h.obj.state === 'ground') { h.obj.state = 'air'; h.obj.vy = -380; h.obj.vx = (Math.random() - .5) * 120; }
+  };
+  grabbable(P.spr.el, P, 'paul'); grabbable(B.spr.el, B, 'bot');
+  P.spr.el.setAttribute('role', 'img'); P.spr.el.setAttribute('aria-label', 'Paul, the hero of Wortzauber. Drag to pick him up.');
+  B.spr.el.setAttribute('role', 'img'); B.spr.el.setAttribute('aria-label', 'The Schwebe-Bot');
+
+  // ---------- dotted words: write, trace, appear ----------
+  const WORDS = { cake: ['cake', 'Kuchen'], candle: ['candle', 'Kerze'], candles: ['candle', 'Kerze'], apples: ['apple', 'Apfel'], apple: ['apple', 'Apfel'] };
+  const re = /\b(cake|candles?|apples?)\b/g;
+  for (const root of document.querySelectorAll('.product__about .prose p, .feats span')) {
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT), nodes = [];
+    while (walker.nextNode()) nodes.push(walker.currentNode);
+    for (const n of nodes) {
+      const txt = n.nodeValue; if (!re.test(txt)) continue; re.lastIndex = 0;
+      const frag = document.createDocumentFragment(); let last = 0, m;
+      while ((m = re.exec(txt))) {
+        frag.append(txt.slice(last, m.index));
+        const w = document.createElement('span'); w.className = 'mw'; w.textContent = m[1]; w.tabIndex = 0; w.setAttribute('role', 'button');
+        w.dataset.k = m[1]; w.setAttribute('aria-label', `${m[1]}: Paul makes it appear`); frag.append(w); last = m.index + m[1].length;
+      }
+      frag.append(txt.slice(last)); n.replaceWith(frag);
+    }
+  }
+  const magic = w => {
+    if (w.classList.contains('is-tracing')) return;
+    const [key, de] = WORDS[w.dataset.k];
+    w.classList.remove('is-traced'); void w.offsetWidth; w.classList.add('is-tracing');
+    setTimeout(() => { w.classList.add('is-traced'); }, 900);
+    setTimeout(() => w.classList.remove('is-tracing', 'is-traced'), 2600);
+    measure();
+    const m = mrect(), r = w.getBoundingClientRect(), wx = (r.left + r.right) / 2 - m.left, wy = r.top - m.top;
+    const s = surfBelow(wx, r.bottom - m.top + 2);
+    say(`${de} · ${key}`, 2600);
+    let done = false;
+    const appear = () => { if (done) return; done = true; fx('sparkle', wx, wy + 8); setTimeout(() => mkThing(key, wx, wy + 14), 180); };
+    if (P.state === 'ground' && s && !reduced()) {
+      const side = P.x < wx ? -1 : 1;
+      P.goal = 'word';
+      travel(s, wx + side * 46, () => {
+        P.goal = null; P.face = wx >= P.x ? 1 : -1;
+        doAnim('cast', () => { appear(); doAnim('cheer', () => idle(.8)); });
+        setTimeout(appear, 2600);
+      });
+      setTimeout(appear, 5200);      // he could not get there: the thing appears anyway
+    } else setTimeout(appear, 700);
+  };
+  document.querySelectorAll('.mw').forEach(w => {
+    w.addEventListener('click', () => magic(w));
+    w.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); magic(w); } });
+  });
+
+  // ---------- the loop ----------
+  const fall = (o, dt, only) => {     // gravity and landing; returns the surface it landed on
+    const y0 = o.y; o.vy += G * dt; o.y += o.vy * dt; o.x += o.vx * dt; o.vx *= Math.pow(.6, dt);
+    if (o.x < 8) { o.x = 8; o.vx = Math.abs(o.vx) * .5; } if (o.x > W - 8) { o.x = W - 8; o.vx = -Math.abs(o.vx) * .5; }
+    if (o.vy > 0) {
+      const oy = only ? yAt(only, o.x) : 0, s = only ? (oy >= y0 && oy <= o.y && o.x >= only.x1 - 30 && o.x <= only.x2 + 30 ? only : null) : surfAt(o.x, y0, o.y);
+      if (s) { o.x = Math.max(s.x1 + 4, Math.min(s.x2 - 4, o.x)); o.y = yAt(s, o.x); return s; }
+    }
+    if (o.y > H) { o.y = H - 2; return surfs[surfs.length - 1]; }
+    return null;
+  };
+  let pointer = null;
+  addEventListener('pointermove', e => { const m = mrect(); pointer = { x: e.clientX - m.left, y: e.clientY - m.top, t: now }; }, { passive: true });
+  let offT = 0;
+
+  let last = performance.now();
+  const tick = t => {
+    now = t; const dt = Math.min(.05, (t - last) / 1000); last = t;
+    // Paul
+    if (P.state === 'held' && held) {
+      const px = P.x; P.x += (held.tx - P.x) * Math.min(1, dt * 18); P.y += (held.ty - P.y) * Math.min(1, dt * 18);
+      const vx = (P.x - px) / dt; P.spr.rot += (Math.max(-28, Math.min(28, -vx * .05)) - P.spr.rot) * Math.min(1, dt * 8);
+      if (Math.abs(vx) > 30) P.face = vx > 0 ? 1 : -1;
+    } else if (P.state === 'air') {
+      P.spr.rot *= .9; const vy = P.vy; const s = fall(P, dt); if (s) land(s, vy);
+    } else if (P.state === 'hop') {
+      const vy = P.vy; const s = fall(P, dt, P.hopTo); if (s) land(s, Math.min(vy, 600));
+    } else if (P.state === 'lift') {
+      const tx = P.liftX, ty = yAt(P.liftTo, P.liftX);
+      if (Math.hypot(B.x - P.x, B.y - (P.y - 66)) > 12 && !P.lifting) { /* the bot comes first */ }
+      else { P.lifting = true; P.x += (tx - P.x) * Math.min(1, dt * 1.6); P.y += (ty - 12 - P.y) * Math.min(1, dt * 1.6);
+        if (Math.abs(P.x - tx) < 3 && Math.abs(P.y - (yAt(P.liftTo, tx) - 12)) < 3) { P.lifting = false; P.state = 'air'; P.vx = 0; P.vy = 0; B.state = 'follow'; P.next = P.next || null; } }
+    } else if (P.state === 'ground') {
+      if (P.mode === 'walk') {
+        const sp = P.fast ? 110 : 46, d = P.tx - P.x; P.face = d >= 0 ? 1 : -1;
+        if (Math.abs(d) <= sp * dt) { P.x = P.tx; P.mode = 'idle'; P.timer = .1; } else P.x += Math.sign(d) * sp * dt;
+      } else if (P.mode === 'anim') { if (P.spr.ended) { P.mode = 'idle'; P.timer = 0; if (!P.after) P.timer = .4; } }
+      else { P.timer -= dt; if (pointer && now - pointer.t < 1500 && Math.abs(pointer.x - P.x) < 220 && Math.abs(pointer.y - P.y) < 160) P.face = pointer.x >= P.x ? 1 : -1;
+        if (P.timer <= 0) decide(); }
+      // a line that moved (resize, a picture that loaded)
+      if (P.surf) { const gy = yAt(P.surf, P.x), d = gy - P.y;   // step up onto tall letters with a little hop, down with a drop
+        if (Math.abs(d) > 1) P.y += d * Math.min(1, dt * (d < 0 ? 16 : 22)); else P.y = gy; }
+    }
+    const pa = paulAnim(); if (P.mode !== 'anim' || P.state !== 'ground') P.spr.play(pa); P.spr.x = P.x; P.spr.y = P.y; P.spr.face = P.face;
+    if (P.carry) { const c = P.carry; c.x = P.x + P.face * 2; c.y = P.y - 70; }
+
+    // the bot
+    const bob = 4 * Math.sin(now / 430);
+    if (B.state === 'held' && held) { B.x += (held.tx - B.x) * Math.min(1, dt * 18); B.y += (held.ty - B.y) * Math.min(1, dt * 18); B.spr.play('wave'); }
+    else {
+      let tx, ty, k = 3;
+      if (B.state === 'lift') { tx = P.x; ty = P.y - 66; k = P.lifting ? 30 : 5; }
+      else if (P.state === 'held') { tx = P.x - 60 * P.face; ty = P.y - 40; k = 4; }
+      else { tx = P.x - 48 * P.face; ty = P.y - 74 + bob; }
+      if (B.vx || B.vy) { B.x += B.vx * dt; B.y += B.vy * dt; B.vx *= Math.pow(.02, dt); B.vy *= Math.pow(.02, dt); if (Math.hypot(B.vx, B.vy) < 20) B.vx = B.vy = 0; }
+      const dx = tx - B.x, dy = ty - B.y; B.x += dx * Math.min(1, dt * k); B.y += dy * Math.min(1, dt * k);
+      if (!B.spr.once || B.spr.ended) B.spr.play(B.state === 'lift' ? 'carry' : (Math.hypot(dx, dy) > 14 ? 'move' : 'idle'));
+      if (Math.abs(dx) > 6) B.spr.face = dx > 0 ? 1 : -1; else if (B.state !== 'lift') B.spr.face = P.face;
+    }
+    B.spr.x = B.x; B.spr.y = B.y;
+    { const bw = bubble.offsetWidth, bh = bubble.offsetHeight, vt = view().t; let by = B.y - 52 - bh, bx = B.x - bw / 2;
+      if (by < Math.max(4, vt + 4)) { by = B.y - 40; bx = B.spr.face > 0 ? B.x + 26 : B.x - 26 - bw; bubble.classList.add('is-side'); } else bubble.classList.remove('is-side');
+      bubble.style.transform = `translate(${Math.round(Math.max(8, Math.min(W - bw - 8, bx)))}px, ${Math.round(by)}px)`; }
+    if (bubbleT && now > bubbleT) { bubble.classList.remove('is-on'); bubbleT = 0; }
+
+    // things
+    for (const o of things) {
+      if (o.state === 'held' && held && held.obj === o) { o.x += (held.tx - o.x) * Math.min(1, dt * 18); o.y += (held.ty - o.y) * Math.min(1, dt * 18); }
+      else if (o.state === 'air') {
+        const vy = o.vy, s = fall(o, dt);
+        // Paul catches a thing that flies at him
+        if (!P.carry && P.state === 'ground' && Math.abs(o.x - P.x) < 26 && o.y > P.y - 90 && o.y < P.y - 40 && vy > -200) {
+          P.carry = o; o.state = 'carried'; o.spr.z = 4; P.after = null; doAnim('cheer', () => idle(1)); say('Got it!', 1400);
+        } else if (s) { if (vy > 500) { o.vy = -vy * .3; o.vx *= .6; } else { o.state = 'ground'; o.surf = s; o.y = s.y; o.vx = 0; o.vy = 0; } }
+      } else if (o.state === 'ground' && o.surf) o.y = yAt(o.surf, o.x);
+      o.spr.x = o.x; o.spr.y = o.y;
+    }
+
+    // follow the reader: off screen for a while, he comes along
+    if (!held && P.state === 'ground' && !P.goal && !reduced()) {
+      const v = view(), off = P.y < v.t - 10 ? 'up' : P.y > v.b + 30 ? 'down' : null;
+      if (off) { offT += dt; if (offT > 1.4) { offT = 0;
+        const cands = surfs.filter(s => s.y > v.t + 130 && s.y < v.b - 50 && s.kind !== 'floor');
+        if (cands.length) { const s = off === 'up' ? cands.reduce((a, b) => (a.y < b.y ? a : b)) : cands.reduce((a, b) => (a.y > b.y ? a : b));
+          P.goal = 'follow'; travel(s, Math.max(s.x1 + 40, Math.min(s.x2 - 40, P.x)), () => { P.goal = null; idle(.6); }); } } }
+      else offT = 0;
+    }
+
+    for (const s of all) { s.draw(); if (s.fx && s.ended) s.remove(); }
+    requestAnimationFrame(tick);
+  };
+
+  // ---------- start ----------
+  const start = () => {
+    measure();
+    const t = surfs.find(s => s.kind === 'title') || surfs[0];
+    P.surf = t; P.x = t.x2 - 30; P.y = t.y; P.face = -1;
+    B.x = P.x + 60; B.y = P.y - 80;
+    const head = document.querySelector('.post-head');
+    const hint = document.createElement('p'); hint.className = 'label play-hint';
+    hint.textContent = 'Paul lives on this page. Pick him up, or tap a dotted word.'; head.appendChild(hint);
+    measure(); P.surf = (W < 700 ? surfs.find(s => s.kind === 'rule') : surfs.find(s => s.kind === 'title')) || surfs[0]; P.x = W < 700 ? W * .7 : P.surf.x2 - 30; P.y = yAt(P.surf, P.x);
+    B.x = P.x + 50; B.y = P.y - 80;
+    setTimeout(() => say('Hello! You can pick Paul up.', 3400), 1400);
+    setTimeout(() => { if (!P.wasHeld) say('Or tap a dotted word.', 3000); }, 9000);
+    requestAnimationFrame(tick);
+    let rt; addEventListener('resize', () => { clearTimeout(rt); rt = setTimeout(() => { const old = P.surf; measure(); P.surf = surfs.find(s => s.el === old.el && s.kind === old.kind) || surfBelow(P.x, P.y - 200) || surfs[0];
+      P.x = Math.max(P.surf.x1 + 10, Math.min(P.surf.x2 - 10, P.x)); P.y = yAt(P.surf, P.x);
+      for (const o of things) if (o.surf) { o.state = 'air'; o.y -= 20; } }, 200); });
+    setInterval(() => { const old = P.surf; measure(); if (old) { const n = surfs.find(s => s.el === old.el && s.kind === old.kind); if (n) P.surf = n; }
+      for (const o of things) if (o.surf) { const n = surfs.find(s => s.el === o.surf.el && s.kind === o.surf.kind); if (n) o.surf = n; } }, 1500);
+  };
+  const go = () => (document.fonts ? document.fonts.ready : Promise.resolve()).then(start);
+  if (document.readyState === 'complete') go(); else addEventListener('load', go);
+})();
diff --git a/assets/play/play.css b/assets/play/play.css
new file mode 100644
index 0000000..1953626
--- /dev/null
+++ b/assets/play/play.css
@@ -0,0 +1,48 @@
+/* the game characters that live on a game page (mock-up) */
+#main.has-play { position: relative; }
+.play-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
+.play-spr { position: absolute; left: 0; top: 0; background-repeat: no-repeat; image-rendering: pixelated; pointer-events: auto; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
+.play-spr:active, .play-spr.is-held { cursor: grabbing; }
+.play-fx { position: absolute; left: 0; top: 0; background-repeat: no-repeat; image-rendering: pixelated; pointer-events: none; }
+.play-img { position: absolute; left: 0; top: 0; max-width: none; pointer-events: auto; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
+.play-img.is-static { pointer-events: none; }
+.play-ring { position: absolute; left: 0; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border: 1px solid var(--ink); border-radius: 50%; pointer-events: none; }
+.play-bubble { position: absolute; left: 0; top: 0; padding: .35rem .55rem; background: var(--bg); color: var(--ink); border: 1px solid var(--ink); font: 500 var(--step--1)/1.3 var(--mono); letter-spacing: .04em; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .2s; }
+.play-bubble.is-on { opacity: 1; }
+.play-bubble::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 9px; height: 9px; margin-left: -5px; background: var(--bg); border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); transform: rotate(45deg); }
+.play-hint { margin-top: .25rem; }
+
+/* Wortzauber: words that make things appear */
+.mw { text-decoration: underline dotted; text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; border-radius: 0; }
+.mw:hover { background: var(--ink); color: var(--bg); }
+.mw.is-tracing, .mw.is-tracing:hover { background: none; color: transparent; -webkit-text-stroke: 1px var(--ink); text-decoration-style: solid; transition: color .9s steps(6); }
+.mw.is-traced, .mw.is-traced:hover { background: none; color: var(--ink); -webkit-text-stroke: 0; transition: color .9s; }
+
+/* Kleinbahn: the railway on the rule under the header, with scenery drawn in ink */
+.has-rail .post-head { padding-bottom: calc(clamp(1.75rem, 4.5vw, 3.5rem) + 8.5rem); }
+@media (max-width: 700px) { .has-rail .post-head { padding-bottom: calc(clamp(1.75rem, 4.5vw, 3.5rem) + 6rem); } }
+.kb-sleepers { position: absolute; left: 0; top: 0; height: 6px; background: repeating-linear-gradient(90deg, var(--ink) 0 1.5px, transparent 1.5px 13px); pointer-events: none; }
+.kb-hill, .kb-building, .kb-lamp { position: absolute; left: 0; top: 0; pointer-events: none; }
+.kb-hill { z-index: 6; } .kb-hill svg, .kb-building svg, .kb-lamp svg { display: block; overflow: visible; }
+.kb-hill__fill { fill: var(--bg); }
+.kb-hatch { stroke: var(--soft); stroke-width: 1; }
+.kb-ink { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
+.kb-ink.kb-thin { stroke-width: 1; }
+.kb-ink.kb-paper, .kb-hill__fill.kb-ink { fill: var(--bg); }
+.kb-name { font: 500 7px var(--mono); letter-spacing: .12em; fill: var(--ink); }
+.kb-building { z-index: 1; } .kb-lamp { z-index: 2; }
+.kb-platform { position: absolute; left: 0; top: 0; height: 10px; border: 1px solid var(--ink); border-bottom: 0; background: var(--surface); pointer-events: none; z-index: 2; }
+.kb-signal { position: absolute; left: 0; top: 0; width: 34px; height: 62px; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; color: var(--ink); z-index: 3; }
+.kb-signal svg { display: block; width: 100%; height: 100%; overflow: visible; }
+.kb-signal .arm { transform-origin: 17px 12px; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
+.kb-signal[aria-pressed="true"] .arm { transform: rotate(-45deg); }
+.kb-signal .ink { stroke: currentColor; stroke-width: 1.5; fill: none; }
+.kb-signal .fill { fill: currentColor; }
+.kb-signal .hole { fill: var(--bg); stroke: currentColor; stroke-width: 1.5; }
+.kb-signal:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
+.kb-car { position: absolute; left: 0; top: 0; background-repeat: no-repeat; pointer-events: auto; cursor: grab; touch-action: none; z-index: 4; }
+.kb-car.is-held { cursor: grabbing; }
+.has-rail .play-img { z-index: 3; } .has-rail .play-ring { z-index: 7; } .has-rail .play-bubble { z-index: 8; }
+.kb-smoke { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
+.kb-smoke svg { display: block; overflow: visible; }
+.kb-ground { stroke-width: 1.5; }
diff --git a/assets/play/sheep2.png b/assets/play/sheep2.png
new file mode 100644
index 0000000..77a6cbe
Binary files /dev/null and b/assets/play/sheep2.png differ
diff --git a/assets/play/smoke_puff.png b/assets/play/smoke_puff.png
new file mode 100644
index 0000000..ee385b6
Binary files /dev/null and b/assets/play/smoke_puff.png differ
diff --git a/assets/play/summon_sparkle.png b/assets/play/summon_sparkle.png
new file mode 100644
index 0000000..80f7094
Binary files /dev/null and b/assets/play/summon_sparkle.png differ
diff --git a/assets/site.css b/assets/site.css
index 9dd1f13..a896479 100644
--- a/assets/site.css
+++ b/assets/site.css
@@ -408,9 +408,9 @@ blockquote { margin: 0; padding: .2rem 0 .2rem 1.2rem; border-left: 3px solid va
 .prose .pick__list a:hover { background: var(--ink); color: var(--bg); outline: 0; }
 .pick__hint { margin: 0; font-size: .9688rem; color: var(--muted); }
 .pick__hint[hidden] { display: none; }
-/* a figure can hold a wide drawing (.dg-w) and a narrow one for phones (.dg-n) */
-.anim .dg-n { display: none; }
-@media (max-width: 600px) { .anim .dg-w { display: none; } .anim .dg-n { display: block; } .fig-wide.anim { overflow-x: visible; } .fig-wide .dg-n { min-width: 0; } }
+/* a figure (animated or with steps) can hold a wide drawing (.dg-w) and a narrow one for phones (.dg-n) */
+.anim .dg-n, [data-steps] .dg-n { display: none; }
+@media (max-width: 600px) { .anim .dg-w, [data-steps] .dg-w { display: none; } .anim .dg-n, [data-steps] .dg-n { display: block; } .fig-wide.anim { overflow-x: visible; } .fig-wide .dg-n { min-width: 0; } }
 @media (prefers-reduced-motion: reduce) {
   .anim .draw, .anim .grow, .anim .grow-l, .anim .pop, .anim .w-a, .anim .w-b, .anim .fade, .anim .lvl { transition: none; }
 }
diff --git a/assets/site.js b/assets/site.js
index 938ceb5..81df87b 100644
--- a/assets/site.js
+++ b/assets/site.js
@@ -119,7 +119,7 @@
   $$('figure[data-steps]').forEach(function (fig) {
     var svg = $('svg', fig), items = $$('.steps__list li', fig), n = items.length;
     if (!svg || !n) return;
-    var parts = $$('[data-step]', svg), at = 0, timer = null;
+    var parts = $$('[data-step]', fig), at = 0, timer = null;
     var bar = document.createElement('div'); bar.className = 'steps__bar';
     function button(label, text) {
       var b = document.createElement('button'); b.type = 'button'; b.className = 'btn btn--ghost btn--s';
diff --git a/index.html b/index.html
index 416c3cb..e9fff31 100644
--- a/index.html
+++ b/index.html
@@ -47,7 +47,7 @@ <h1>Tim Conrad</h1>
   </div>
   <dl class="tb">
     <div><dt>Site</dt><dd>t7d.dev</dd></div>
-    <div><dt>Contents</dt><dd>2 games, 2 thoughts, 1 write-up, 1 tool</dd></div>
+    <div><dt>Contents</dt><dd>2 games, 5 thoughts, 1 write-up, 1 tool</dd></div>
     <div class="wide"><dt>Contact</dt><dd><a href="https://de.linkedin.com/in/tim-c-94397a200/de" rel="me noopener">LinkedIn</a>, <a href="https://github.com/Tim-Conrad" rel="me noopener">GitHub</a></dd></div>
     <div class="wide"><dt>PGP fingerprint</dt><dd class="mono">A886 6CB1 6B07 9685 5615<br>74B2 A91D ABBE C996 7390</dd></div>
   </dl>
@@ -93,49 +93,47 @@ <h2>Thoughts</h2>
       <p>Ideas I am working through. Each one keeps its sources and a list of what changed. All of them are on <a href="/thoughts/">the list</a>, and in the <a href="/thoughts/feed.xml">RSS feed</a>.</p>
     </div>
     <div class="projects">
-      <a class="proj" href="/thoughts/humans-md/">
-        <p class="label"><time datetime="2026-11-10">10 Nov 2026</time> · draft · working with models</p>
-        <h3>A humans.md for working with models</h3>
-        <svg class="dg" viewBox="0 0 640 360" role="img" aria-labelledby="hm-t">
-          <title id="hm-t">Two files side by side: CLAUDE.md for the agent, HUMANS.md for me, with a log per model.</title>
-          <rect class="bx" x="50" y="56" width="240" height="220"/>
-          <text x="72" y="98" class="t-l">CLAUDE.md</text>
-          <rect class="bx-s" x="72" y="122" width="190" height="12"/>
-          <rect class="bx-s" x="72" y="148" width="150" height="12"/>
-          <rect class="bx-s" x="72" y="174" width="170" height="12"/>
-          <rect class="bx-s" x="72" y="200" width="120" height="12"/>
-          <text x="50" y="316" class="t-l t-m">for the agent</text>
-          <rect class="bx-i" x="350" y="56" width="240" height="220"/>
-          <text x="372" y="98" class="t-l t-inv">HUMANS.md</text>
-          <rect class="bx" x="372" y="122" width="190" height="12"/>
-          <rect class="bx" x="372" y="148" width="150" height="12"/>
-          <rect class="bx" x="372" y="190" width="196" height="64"/>
-          <line class="ln" x1="372" y1="211" x2="568" y2="211"/>
-          <line class="ln" x1="372" y1="232" x2="568" y2="232"/>
-          <text x="350" y="316" class="t-l t-m">for me</text>
+      <a class="proj" href="/thoughts/no-long-lived-secrets/">
+        <p class="label"><time datetime="2026-11-12">12 Nov 2026</time> · draft · security · coding agents</p>
+        <h3>Agents without long-lived secrets, approved from my phone</h3>
+        <svg class="dg" viewBox="0 0 640 360" role="img" aria-labelledby="ls-t">
+          <title id="ls-t">Today an agent reads keys that never expire; with grants it holds a short grant from the phone, bound to its own key.</title>
+          <rect class="bx" x="40" y="56" width="250" height="220"/>
+          <text x="62" y="104" class="t-l">API_KEY=sk-…</text>
+          <text x="62" y="152" class="t-l">DEPLOY_KEY</text>
+          <text x="62" y="200" class="t-l">GH_TOKEN=…</text>
+          <text x="62" y="248" class="t-l">no expiry</text>
+          <text x="40" y="316" class="t-l t-m">what an agent reads today</text>
+          <rect class="bx" x="380" y="40" width="170" height="252" rx="20"/>
+          <rect class="bx-s" x="398" y="76" width="134" height="84"/>
+          <text x="410" y="106" class="t-l">git push</text>
+          <text x="410" y="140" class="t-l">2 h</text>
+          <rect class="bx-i" x="398" y="226" width="134" height="40"/>
+          <text x="465" y="253" text-anchor="middle" class="t-l t-inv">Approve</text>
+          <text x="350" y="316" class="t-l t-m">a grant from the phone</text>
         </svg>
-        <p>My repositories tell the agent how to work with me, but nothing tells me how to work with the agent. A first version of that file, and what changes when a new model ships.</p>
+        <p>My agents can read keys that never expire. A design where they hold none: tokens bound to a key with DPoP, a phone that shows what an agent wants to do, and a gateway that keeps the last keys.</p>
         <span class="proj__more">Read the thought</span>
       </a>
-      <a class="proj" href="/thoughts/encrypted-patches/">
-        <p class="label"><time datetime="2026-11-10">10 Nov 2026</time> · draft · updates · key release</p>
-        <h3>Encrypted patches, unlocked on patch day</h3>
-        <svg class="dg" viewBox="0 0 640 360" role="img" aria-labelledby="bc-t">
-          <title id="bc-t">The encrypted bundle reaches every host before patch day; at T only the key is published.</title>
-          <text x="400" y="50" text-anchor="middle" class="t-h t-l">patch day T</text>
-          <line class="ln-s" x1="400" y1="66" x2="400" y2="300"/>
-          <rect class="bx-s" x="40" y="92" width="360" height="56"/>
-          <text x="60" y="128" class="t-l">encrypted bundle</text>
-          <rect class="bx-i" x="400" y="92" width="36" height="56"/>
-          <text x="452" y="128" class="t-l t-m">install</text>
-          <rect class="bx-i" x="406" y="176" width="220" height="56"/>
-          <text x="422" y="212" class="t-l t-inv">diff → exploit</text>
-          <g transform="translate(388,256)"><circle class="bx" cx="10" cy="10" r="9"/><line class="ln-t" x1="19" y1="10" x2="44" y2="10"/><line class="ln-t" x1="36" y1="10" x2="36" y2="18"/></g>
-          <text x="376" y="274" text-anchor="end" class="t-l t-m">key at T</text>
-          <line class="ln" x1="40" y1="314" x2="600" y2="314"/>
-          <text x="40" y="344" class="t-l t-m">−7 days</text>
+      <a class="proj" href="/thoughts/sealed/">
+        <p class="label"><time datetime="2026-11-10">10 Nov 2026</time> · draft · encryption · static sites</p>
+        <h3>A private site on public static hosting</h3>
+        <svg class="dg" viewBox="0 0 640 360" role="img" aria-labelledby="se-t">
+          <title id="se-t">Readable files for the reader, random blob names of the same sizes for the host.</title>
+          <rect class="bx" x="40" y="56" width="250" height="220"/>
+          <text x="62" y="104" class="t-l">index.html</text>
+          <text x="62" y="152" class="t-l">map.png</text>
+          <text x="62" y="200" class="t-l">theme.mp3</text>
+          <text x="62" y="248" class="t-l">chapter-2</text>
+          <text x="40" y="316" class="t-l t-m">for the reader</text>
+          <rect class="bx-i" x="350" y="56" width="250" height="220"/>
+          <text x="372" y="104" class="t-l t-inv">3f9a0c71</text>
+          <text x="372" y="152" class="t-l t-inv">e6c1a30f</text>
+          <text x="372" y="200" class="t-l t-inv">58ab07e9</text>
+          <text x="372" y="248" class="t-l t-inv">0d2f98a5</text>
+          <text x="350" y="316" class="t-l t-m">for the host</text>
         </svg>
-        <p>Ship a security fix early as ciphertext and publish the key on patch day, so teams can stage it and apply it together. Games, a design with signed keys, open source in private, and the patents.</p>
+        <p>sealed puts a whole static site on a public host in encrypted form, with a password per reader. What the host sees, how a password opens a file, and what it does not protect.</p>
         <span class="proj__more">Read the thought</span>
       </a>
     </div>
diff --git a/projects/kleinbahn/index.html b/projects/kleinbahn/index.html
index d8be74b..02b4708 100644
--- a/projects/kleinbahn/index.html
+++ b/projects/kleinbahn/index.html
@@ -18,6 +18,8 @@
 <link rel="stylesheet" href="/assets/site.css">
 <script src="/assets/theme.js"></script>
 <script src="/assets/site.js" defer></script>
+<link rel="stylesheet" href="/assets/play/play.css">
+<script src="/assets/play/play-kb.js" defer></script>
 </head>
 <body>
 <a class="skip" href="#main">Skip to content</a>
@@ -84,13 +86,6 @@ <h2 id="play-h">Play it here</h2>
     </ul>
   </div>
 
-  <div class="shots">
-    <figure><img src="/assets/projects/kleinbahn-1.jpg" width="1280" height="720" alt="A steam train crossing a road next to a carousel." loading="lazy"></figure>
-    <figure><img src="/assets/projects/kleinbahn-2.jpg" width="1280" height="720" alt="The town centre with timber-framed houses, a windmill and a train passing." loading="lazy"></figure>
-    <figure><img src="/assets/projects/kleinbahn-3.jpg" width="1280" height="720" alt="A space shuttle lifting off from the launch site in a cloud of smoke." loading="lazy"></figure>
-    <figure><img src="/assets/projects/kleinbahn-4.jpg" width="1280" height="720" alt="The main island at night with street lamps lit." loading="lazy"></figure>
-  </div>
-
   <section class="changes" id="changes" aria-labelledby="changes-h">
     <h2 id="changes-h">How it changed</h2>
     <p class="changes__intro">One entry per merged pull request that changed play, newest first. Each clip is filmed from the game at the state of that pull request.</p>
diff --git a/projects/wortzauber/index.html b/projects/wortzauber/index.html
index ff3fce1..81eaf51 100644
--- a/projects/wortzauber/index.html
+++ b/projects/wortzauber/index.html
@@ -18,6 +18,8 @@
 <link rel="stylesheet" href="/assets/site.css">
 <script src="/assets/theme.js"></script>
 <script src="/assets/site.js" defer></script>
+<link rel="stylesheet" href="/assets/play/play.css">
+<script src="/assets/play/play-wz.js" defer></script>
 </head>
 <body>
 <a class="skip" href="#main">Skip to content</a>
@@ -84,13 +86,6 @@ <h2 id="play-h">Play it here</h2>
     </ul>
   </div>
 
-  <div class="shots">
-    <figure><img src="/assets/projects/wortzauber-1.jpg" width="1280" height="720" alt="The word apfel being traced letter by letter on school lines." loading="lazy"></figure>
-    <figure><img src="/assets/projects/wortzauber-2.jpg" width="1280" height="720" alt="Berta the baker greets the hero in her bakery." loading="lazy"></figure>
-    <figure><img src="/assets/projects/wortzauber-3.jpg" width="1280" height="720" alt="The hero and the hovering robot at the castle scaffold with two letters collected." loading="lazy"></figure>
-    <figure><img src="/assets/projects/wortzauber-4.jpg" width="1280" height="720" alt="The map between the castle and the bakery village." loading="lazy"></figure>
-  </div>
-
   <section class="changes" id="changes" aria-labelledby="changes-h">
     <h2 id="changes-h">How it changed</h2>
     <p class="changes__intro">One entry per merged pull request that changed play, newest first. Each clip is filmed from the game at the state of that pull request. The clips are silent.</p>
diff --git a/sitemap.xml b/sitemap.xml
index 6d9878d..d0d8ba1 100644
--- a/sitemap.xml
+++ b/sitemap.xml
@@ -2,6 +2,9 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url><loc>https://t7d.dev/</loc></url>
   <url><loc>https://t7d.dev/thoughts/</loc></url>
+  <url><loc>https://t7d.dev/thoughts/no-long-lived-secrets/</loc></url>
+  <url><loc>https://t7d.dev/thoughts/sealed/</loc></url>
+  <url><loc>https://t7d.dev/thoughts/decision-models/</loc></url>
   <url><loc>https://t7d.dev/thoughts/humans-md/</loc></url>
   <url><loc>https://t7d.dev/tools/</loc></url>
   <url><loc>https://t7d.dev/tools/papercuts/</loc></url>
diff --git a/thoughts/decision-models/index.html b/thoughts/decision-models/index.html
new file mode 100644
index 0000000..500f663
--- /dev/null
+++ b/thoughts/decision-models/index.html
@@ -0,0 +1,344 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'self'; script-src 'self'; img-src 'self'; font-src 'self'; media-src 'self'; base-uri 'none'; form-action 'none'">
+<title>When a small decision model can replace an LLM call · Tim Conrad</title>
+<meta name="description" content="Amazon replaced Claude Sonnet 4.6 with a small decision model for labelling tickets. The method behind it, step by step: the task card, a frozen test set, baselines, the ladder from rewording to training, thresholds and a side-by-side run. And how I would try it at home and at work.">
+<link rel="canonical" href="https://t7d.dev/thoughts/decision-models/">
+<meta property="og:type" content="article">
+<meta property="og:title" content="When a small decision model can replace an LLM call">
+<meta property="og:description" content="Amazon replaced Claude Sonnet 4.6 with a small decision model for labelling tickets. The method behind it, step by step: the task card, a frozen test set, baselines, the ladder from rewording to training, thresholds and a side-by-side run. And how I would try it at home and at work.">
+<meta property="og:url" content="https://t7d.dev/thoughts/decision-models/">
+<meta property="og:image" content="https://t7d.dev/assets/og.png">
+<meta property="article:published_time" content="2026-11-10">
+<meta name="twitter:card" content="summary_large_image">
+<link rel="alternate" type="application/rss+xml" title="Tim Conrad · Thoughts" href="/thoughts/feed.xml">
+<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
+<link rel="preload" href="/assets/fonts/barlow-condensed-700.woff2" as="font" type="font/woff2" crossorigin>
+<link rel="stylesheet" href="/assets/site.css">
+<script src="/assets/theme.js"></script>
+<script src="/assets/site.js" defer></script>
+</head>
+<body>
+<a class="skip" href="#main">Skip to content</a>
+
+<header class="nav">
+  <div class="wrap nav__in">
+    <a class="brand" href="/">Tim Conrad</a>
+    <nav class="nav__links" aria-label="Site">
+      <a href="/#games">Games</a>
+      <a href="/thoughts/">Thoughts</a>
+      <a class="opt3" href="/#research">Research</a>
+      <a class="opt2" href="/#verify">PGP key</a>
+      <a class="opt2" href="/#contact">Contact</a>
+    </nav>
+    <button class="toggle" id="theme-toggle" type="button">dark</button>
+  </div>
+</header>
+
+<main id="main" class="wrap">
+
+<header class="post-head">
+  <a class="crumb" href="/thoughts/">← Thoughts</a>
+  <h1>When a small decision model can replace an LLM call</h1>
+  <p class="sub">Amazon replaced Claude Sonnet 4.6 with a small model that only picks from a list. How that is done, step by step, and how I would try it at home and at work.</p>
+  <p class="label">Tim Conrad · Language models · Method · Cost</p>
+  <dl class="tmeta">
+    <div><dt>Status</dt><dd><span class="status">Draft</span></dd></div>
+    <div><dt>Started</dt><dd><time datetime="2026-11-10">10 Nov 2026</time></dd></div>
+    <div><dt>Last revised</dt><dd><time datetime="2026-11-10">10 Nov 2026</time></dd></div>
+  </dl>
+</header>
+
+<div class="post">
+  <nav class="toc" aria-label="On this page">
+    <p class="label">On this page</p>
+    <ol>
+      <li><a href="#itch">One model for everything</a></li>
+      <li><a href="#amazon">What Amazon did</a></li>
+      <li><a href="#decider">A model that only picks</a></li>
+      <li><a href="#method">The method, step by step</a></li>
+      <li><a href="#home">At home</a></li>
+      <li><a href="#work">At work</a></li>
+      <li><a href="#gaps">What the post leaves out</a></li>
+      <li><a href="#check">When to think about a specialised model</a></li>
+      <li><a href="#open">Open questions</a></li>
+      <li><a href="#start">Starting points</a></li>
+      <li><a href="#sources">Sources</a></li>
+      <li><a href="#revisions">Revisions</a></li>
+      <li><a href="#feedback">Feedback</a></li>
+    </ol>
+  </nav>
+
+  <article class="prose">
+    <h2 id="itch">One model for everything</h2>
+    <p>I use whatever model the session runs, and that is a frontier model, for everything. I rarely think about what one call costs. A large model that writes a paragraph of reasoning before it picks one word from a list of twenty is the same model that refactors a codebase.</p>
+    <p>A post from the Strands Agents team made me stop on that. Two Amazon engineers replaced Claude Sonnet 4.6 with a small decision model in a ticketing system, at a fraction of the cost <a href="#s1">[1]</a>. The case itself matters less to me than the method. How do you do this well, and how would I do it at home and at work?</p>
+
+    <h2 id="amazon">What Amazon did</h2>
+    <p>The post is by Carr Onstott, Mehul Jaiswal and the Strands Agents team, from 9 November 2026 <a href="#s1">[1]</a>. Sonnet 4.6 put each ticket into one of 20 categories, with a long system prompt and a JSON answer with reasoning. They replaced it with Strands Decider on Gemma 4 E4B. Per ticket, 6,724 tokens became 2,010, the average call took 897 ms instead of 4,215 ms, and the cost at list prices fell from $0.0222 to about $0.0005.</p>
+    <p>They name the limits themselves. It worked because the task is "a closed choice from a known catalog, the volume is high, and the latency of the old path mattered." If the labels need explanation text, the catalog changes weekly, or the context does not fit into a few thousand tokens, "a decision model probably can't replace the LLM's job" <a href="#s1">[1]</a>.</p>
+
+    <h2 id="decider">A model that only picks</h2>
+    <p>A decision model does not write text. It gets a state and a question with options, and returns a probability for each option and a confidence <a href="#s1">[1]</a>. It answers three kinds of question: pick one of several options, yes or no, and a level on a scale <a href="#s4">[4]</a>.</p>
+    <figure class="fig-wide anim" data-switch="LLM|Decision model">
+      <svg class="dg dg-w" viewBox="0 0 680 300" role="img" aria-labelledby="f1t f1d">
+        <title id="f1t">The same ticket, labelled by an LLM and by a decision model</title>
+        <desc id="f1d">A ticket goes into a model. The LLM reads a long prompt of 6,554 tokens and writes JSON with a label and its reasoning: 170 tokens out, 4.2 seconds on average. The decision model reads a short prompt of 2,009 tokens and returns one probability per label. The top label, capacity request at 0.71, is above the threshold, so it is applied: 1 token out, 0.9 seconds on average. The token and time figures are Amazon's; the probabilities are an example.</desc>
+        <text x="20" y="28" class="t-h">Ticket</text>
+        <rect class="bx" x="20" y="44" width="180" height="200"/>
+        <rect class="bx-s" x="36" y="64" width="140" height="10"/>
+        <rect class="bx-s" x="36" y="86" width="110" height="10"/>
+        <rect class="bx-s" x="36" y="108" width="130" height="10"/>
+        <rect class="bx-s" x="36" y="130" width="90" height="10"/>
+        <rect class="bx-s" x="36" y="152" width="120" height="10"/>
+        <text x="36" y="228" class="t-s">comments, alarms, logs</text>
+        <line class="ln" x1="208" y1="144" x2="228" y2="144"/><polygon class="arr" points="228,139 236,144 228,149"/>
+
+        <rect class="bx" x="240" y="104" width="150" height="80"/>
+        <text x="256" y="134" class="t-h w-a">LLM</text>
+        <text x="256" y="134" class="t-h w-b">Decision model</text>
+        <text x="256" y="160" class="t-s w-a">6,554 tokens in</text>
+        <text x="256" y="160" class="t-s w-b">2,009 tokens in</text>
+        <line class="ln" x1="398" y1="144" x2="418" y2="144"/><polygon class="arr" points="418,139 426,144 418,149"/>
+
+        <text x="430" y="28" class="t-h w-a">Writes an answer</text>
+        <text x="430" y="28" class="t-h w-b">Returns probabilities</text>
+        <rect class="bx" x="430" y="44" width="230" height="200"/>
+        <g class="w-a">
+          <text x="446" y="72" class="t-s">{"label": "capacity",</text>
+          <text x="446" y="94" class="t-s"> "reasoning": "The ticket</text>
+          <text x="446" y="116" class="t-s">  asks for more hosts in</text>
+          <text x="446" y="138" class="t-s">  one region before a</text>
+          <text x="446" y="160" class="t-s">  launch, so ..."}</text>
+          <text x="446" y="228" class="t-s">170 tokens out · 4.2 s</text>
+        </g>
+        <g class="w-b">
+          <text x="446" y="72" class="t-s">capacity</text>
+          <rect class="bx-i" x="540" y="62" width="78" height="12"/>
+          <text x="446" y="98" class="t-s">alarm</text>
+          <rect class="bx-s" x="540" y="88" width="15" height="12"/>
+          <text x="446" y="124" class="t-s">security</text>
+          <rect class="bx-s" x="540" y="114" width="9" height="12"/>
+          <text x="446" y="150" class="t-s">escalation</text>
+          <rect class="bx-s" x="540" y="140" width="6" height="12"/>
+          <text x="446" y="176" class="t-s">none</text>
+          <rect class="bx-s" x="540" y="166" width="2" height="12"/>
+          <line class="ln-s" x1="606" y1="54" x2="606" y2="186"/>
+          <text x="606" y="202" text-anchor="middle" class="t-s">threshold</text>
+          <text x="446" y="228" class="t-s">1 token out · 0.9 s</text>
+        </g>
+      </svg>
+      <svg class="dg dg-n" viewBox="0 0 360 520" role="img" aria-labelledby="f1nt">
+        <title id="f1nt">The same ticket, labelled by an LLM and by a decision model</title>
+        <text x="10" y="24" class="t-h">Ticket</text>
+        <rect class="bx" x="10" y="38" width="340" height="70"/>
+        <rect class="bx-s" x="26" y="56" width="200" height="10"/>
+        <rect class="bx-s" x="26" y="78" width="150" height="10"/>
+        <line class="ln" x1="180" y1="112" x2="180" y2="126"/><polygon class="arr" points="175,126 180,134 185,126"/>
+        <rect class="bx" x="10" y="138" width="340" height="66"/>
+        <text x="26" y="166" class="t-h w-a">LLM</text>
+        <text x="26" y="166" class="t-h w-b">Decision model</text>
+        <text x="26" y="190" class="t-s w-a">6,554 tokens in</text>
+        <text x="26" y="190" class="t-s w-b">2,009 tokens in</text>
+        <line class="ln" x1="180" y1="208" x2="180" y2="222"/><polygon class="arr" points="175,222 180,230 185,222"/>
+        <rect class="bx" x="10" y="234" width="340" height="270"/>
+        <g class="w-a">
+          <text x="26" y="264" class="t-s">{"label": "capacity",</text>
+          <text x="26" y="288" class="t-s"> "reasoning": "The ticket asks</text>
+          <text x="26" y="312" class="t-s">  for more hosts in one region</text>
+          <text x="26" y="336" class="t-s">  before a launch, so ..."}</text>
+          <text x="26" y="484" class="t-s">170 tokens out · 4.2 s</text>
+        </g>
+        <g class="w-b">
+          <text x="26" y="264" class="t-s">capacity</text>
+          <rect class="bx-i" x="130" y="254" width="142" height="12"/>
+          <text x="26" y="294" class="t-s">alarm</text>
+          <rect class="bx-s" x="130" y="284" width="28" height="12"/>
+          <text x="26" y="324" class="t-s">security</text>
+          <rect class="bx-s" x="130" y="314" width="16" height="12"/>
+          <text x="26" y="354" class="t-s">escalation</text>
+          <rect class="bx-s" x="130" y="344" width="10" height="12"/>
+          <text x="26" y="384" class="t-s">none</text>
+          <rect class="bx-s" x="130" y="374" width="4" height="12"/>
+          <line class="ln-s" x1="250" y1="244" x2="250" y2="394"/>
+          <text x="250" y="414" text-anchor="middle" class="t-s">threshold</text>
+          <text x="26" y="484" class="t-s">1 token out · 0.9 s</text>
+        </g>
+      </svg>
+      <figcaption>Fig. 1 · An LLM writes an answer; a decision model returns one probability per label, and the top one counts only above a threshold. Tokens and times are Amazon's averages <a href="#s1">[1]</a>; the probabilities are an example.</figcaption>
+    </figure>
+    <p>Three properties make the method work:</p>
+    <ul>
+      <li><b>A confidence I can act on.</b> The README says that on short classification tasks the model has never seen, answers with a confidence of 0.9 or more are right about 95% of the time; below that, "confirm or ask a person" <a href="#s2">[2]</a>. On unseen tasks, picking an option is useful behind such a gate; a level on a scale is not <a href="#s3">[3]</a>.</li>
+      <li><b>More questions cost almost nothing.</b> The state is read once, and only the short questions are added for each one. On their GPU, eight questions about a 2,000-token state took 369 ms, against 1,964 ms when each was asked on its own <a href="#s5">[5]</a>. So "which team", "how urgent" and "is it a duplicate" can be one call.</li>
+      <li><b>Open and local.</b> The repository is under Apache 2.0, and the models are open, from 2B to 26B parameters. They can serve on a CPU <a href="#s2">[2]</a>.</li>
+    </ul>
+
+    <h2 id="method">The method, step by step</h2>
+    <p>The best description of the method I found is not the blog post, but a guide in the same repository, written for a coding agent that helps a user try the model on their own data <a href="#s4">[4]</a>. It agrees with what Amazon did, and goes further. Its rule: measure first, and train only when the numbers show a gap that training can close. Here is my summary, with Amazon's experience added where it fits.</p>
+    <figure class="fig-wide" data-steps>
+      <svg class="dg dg-w" viewBox="0 0 760 250" role="img" aria-labelledby="f2t f2d">
+        <title id="f2t">Eight steps from an LLM call to a decision model</title>
+        <desc id="f2d">Check the fit, write the task card, build a frozen test set, score every candidate on it, climb the ladder from rewording to training, set the thresholds, run old and new side by side, then watch and re-check.</desc>
+        <g data-step="1"><rect class="bx" x="20" y="40" width="165" height="70"/><text x="34" y="62" class="t-s">1</text><text x="34" y="84" class="t-h">Fit?</text><text x="34" y="102" class="t-s">fixed options</text></g>
+        <g data-step="2"><line class="ln" x1="185" y1="75" x2="198" y2="75"/><polygon class="arr" points="198,70 206,75 198,80"/><rect class="bx" x="205" y="40" width="165" height="70"/><text x="219" y="62" class="t-s">2</text><text x="219" y="84" class="t-h">Task card</text><text x="219" y="102" class="t-s">options, error costs</text></g>
+        <g data-step="3"><line class="ln" x1="370" y1="75" x2="383" y2="75"/><polygon class="arr" points="383,70 391,75 383,80"/><rect class="bx" x="390" y="40" width="165" height="70"/><text x="404" y="62" class="t-s">3</text><text x="404" y="84" class="t-h">Test set</text><text x="404" y="102" class="t-s">real items, frozen</text></g>
+        <g data-step="4"><line class="ln" x1="555" y1="75" x2="568" y2="75"/><polygon class="arr" points="568,70 576,75 568,80"/><rect class="bx" x="575" y="40" width="165" height="70"/><text x="589" y="62" class="t-s">4</text><text x="589" y="84" class="t-h">Baselines</text><text x="589" y="102" class="t-s">all on the same items</text></g>
+        <g data-step="5"><line class="ln" x1="657" y1="110" x2="657" y2="142"/><polygon class="arr" points="652,142 657,150 662,142"/><rect class="bx" x="575" y="150" width="165" height="70"/><text x="589" y="172" class="t-s">5</text><text x="589" y="194" class="t-h">Ladder</text><text x="589" y="212" class="t-s">train only if needed</text></g>
+        <g data-step="6"><line class="ln" x1="575" y1="185" x2="562" y2="185"/><polygon class="arr" points="562,180 554,185 562,190"/><rect class="bx" x="390" y="150" width="165" height="70"/><text x="404" y="172" class="t-s">6</text><text x="404" y="194" class="t-h">Thresholds</text><text x="404" y="212" class="t-s">act, confirm, person</text></g>
+        <g data-step="7"><line class="ln" x1="390" y1="185" x2="377" y2="185"/><polygon class="arr" points="377,180 369,185 377,190"/><rect class="bx" x="205" y="150" width="165" height="70"/><text x="219" y="172" class="t-s">7</text><text x="219" y="194" class="t-h">Side by side</text><text x="219" y="212" class="t-s">both on real traffic</text></g>
+        <g data-step="8"><line class="ln" x1="205" y1="185" x2="192" y2="185"/><polygon class="arr" points="192,180 184,185 192,190"/><rect class="bx-i" x="20" y="150" width="165" height="70"/><text x="34" y="172" class="t-s t-inv">8</text><text x="34" y="194" class="t-h t-inv">Watch</text><text x="34" y="212" class="t-s t-inv">log and re-check</text></g>
+      </svg>
+      <svg class="dg dg-n" viewBox="0 0 360 474" role="img" aria-labelledby="f2nt">
+        <title id="f2nt">Eight steps from an LLM call to a decision model</title>
+        <g data-step="1"><rect class="bx" x="10" y="10" width="340" height="46"/><text x="24" y="39" class="t-s">1</text><text x="46" y="39" class="t-h">Fit?</text><text x="336" y="39" text-anchor="end" class="t-s">fixed options</text></g>
+        <g data-step="2"><line class="ln" x1="180" y1="56" x2="180" y2="61"/><polygon class="arr" points="175,61 180,68 185,61"/><rect class="bx" x="10" y="68" width="340" height="46"/><text x="24" y="97" class="t-s">2</text><text x="46" y="97" class="t-h">Task card</text><text x="336" y="97" text-anchor="end" class="t-s">options, error costs</text></g>
+        <g data-step="3"><line class="ln" x1="180" y1="114" x2="180" y2="119"/><polygon class="arr" points="175,119 180,126 185,119"/><rect class="bx" x="10" y="126" width="340" height="46"/><text x="24" y="155" class="t-s">3</text><text x="46" y="155" class="t-h">Test set</text><text x="336" y="155" text-anchor="end" class="t-s">real items, frozen</text></g>
+        <g data-step="4"><line class="ln" x1="180" y1="172" x2="180" y2="177"/><polygon class="arr" points="175,177 180,184 185,177"/><rect class="bx" x="10" y="184" width="340" height="46"/><text x="24" y="213" class="t-s">4</text><text x="46" y="213" class="t-h">Baselines</text><text x="336" y="213" text-anchor="end" class="t-s">all on the same items</text></g>
+        <g data-step="5"><line class="ln" x1="180" y1="230" x2="180" y2="235"/><polygon class="arr" points="175,235 180,242 185,235"/><rect class="bx" x="10" y="242" width="340" height="46"/><text x="24" y="271" class="t-s">5</text><text x="46" y="271" class="t-h">Ladder</text><text x="336" y="271" text-anchor="end" class="t-s">train only if needed</text></g>
+        <g data-step="6"><line class="ln" x1="180" y1="288" x2="180" y2="293"/><polygon class="arr" points="175,293 180,300 185,293"/><rect class="bx" x="10" y="300" width="340" height="46"/><text x="24" y="329" class="t-s">6</text><text x="46" y="329" class="t-h">Thresholds</text><text x="336" y="329" text-anchor="end" class="t-s">act, confirm, person</text></g>
+        <g data-step="7"><line class="ln" x1="180" y1="346" x2="180" y2="351"/><polygon class="arr" points="175,351 180,358 185,351"/><rect class="bx" x="10" y="358" width="340" height="46"/><text x="24" y="387" class="t-s">7</text><text x="46" y="387" class="t-h">Side by side</text><text x="336" y="387" text-anchor="end" class="t-s">both on real traffic</text></g>
+        <g data-step="8"><line class="ln" x1="180" y1="404" x2="180" y2="409"/><polygon class="arr" points="175,409 180,416 185,409"/><rect class="bx-i" x="10" y="416" width="340" height="46"/><text x="24" y="445" class="t-s t-inv">8</text><text x="46" y="445" class="t-h t-inv">Watch</text><text x="336" y="445" text-anchor="end" class="t-s t-inv">log and re-check</text></g>
+      </svg>
+      <div class="steps__panel">
+        <ol class="steps__list">
+          <li>Is it a decision? The answer must be one of a fixed set of options, known before the call, and what the model needs to see must fit into its window of 4,096 tokens.</li>
+          <li>Write the task card: the question, each option with a one-line description, a "none" option, what happens after each answer, and what each kind of mistake costs.</li>
+          <li>Build a test set from real items, with labels from an outcome that is already recorded. Split it by time, and freeze it.</li>
+          <li>Score the current way, every model size and the simplest guess on the same items. Only then is a number worth anything.</li>
+          <li>Climb the ladder and stop at the first rung that is good enough: reword, recalibrate, a larger model, and only then train.</li>
+          <li>Set the thresholds from the costs of the mistakes: act alone above one confidence, ask below it.</li>
+          <li>Run the old and the new way on the same real traffic. The old one decides; every disagreement gets read.</li>
+          <li>Switch with a setting that can go back. Log every answer with its probabilities, label a fresh sample each month, and score it again.</li>
+        </ol>
+      </div>
+      <figcaption>Fig. 2 · The order of the work. Steps 1 to 6 need no traffic and no money; only step 5 may need a GPU, and only at its last rung.</figcaption>
+    </figure>
+
+    <h3>1. Is it a decision?</h3>
+    <p>The guide names good fits: routing, triage, choosing a tool, guardrails and policy checks, checking whether an answer is adequate, grading against a rubric. Poor fits: the answer is free text, the options are not known before the call, the decision needs many steps of reasoning that are not in the input, or the input is much longer than the window <a href="#s4">[4]</a>. If it is a poor fit, stop here.</p>
+
+    <h3>2. The task card</h3>
+    <p>One short document per decision. The question in exact words. Each option with a one-line description, because the model reads the descriptions. What the application does with each answer. And the cost of each kind of mistake: a false "urgent" wakes a person at night, a missed "urgent" loses a customer <a href="#s4">[4]</a>.</p>
+    <p>Amazon did the same. Their label descriptions alone were longer than the model's window, so they rewrote each of the 20 labels as a one- or two-sentence criterion and added "none" <a href="#s1">[1]</a>. The guide says to try the wording on 20 to 50 real examples: rewording costs nothing and "often moves accuracy by several points" <a href="#s4">[4]</a>. I like that this step is useful even if no model ever reads the card.</p>
+
+    <h3>3. A test set from real outcomes</h3>
+    <p>The labels should come from an outcome that is already recorded, not from someone's first guess. The guide's example: if each ticket records the team that finally closed it, that team is the label. The share of tickets that were passed on to another team then gives the accuracy of the current process for free. The passed-on tickets are the hard cases, and worth a group of their own <a href="#s4">[4]</a>.</p>
+    <p>Size: at least 1,000 items per decision for the test, and about as many again to calibrate. Split by time: the most recent period is the test, the older data is for training. Then freeze the files with their hashes. A test set that changes makes every earlier number useless <a href="#s4">[4]</a>.</p>
+
+    <h3>4. Baselines first</h3>
+    <p>Score everything on the same items: the current way, every model size, and the simplest guess of all, always the most common answer. A model below that simple guess has learned nothing, however good its accuracy looks: 29% on a choice of ten is worse than a most common answer that holds 30% <a href="#s4">[4]</a>. Report the accuracy with its interval, the share of answers above 0.9 confidence, their accuracy, the latency and the memory.</p>
+    <p>Amazon did a short version: they tried the 2B model, saw the E4B do clearly better on a test set, and switched <a href="#s1">[1]</a>.</p>
+
+    <h3>5. The ladder</h3>
+    <p>Climb and stop at the first rung that meets the target <a href="#s4">[4]</a>:</p>
+    <ol>
+      <li><b>Reword</b> the question and the descriptions.</li>
+      <li><b>Recalibrate</b> a released model on my own data. This needs no training, and is often the largest cheap gain.</li>
+      <li><b>Take a larger released model.</b> It usually gains more than training a small one, and needs no training data.</li>
+      <li><b>Fine-tune</b>, only when the gap is larger than the noise of the test set, there are a few thousand correct labels per decision, and the GPU cost is accepted. Train three seeds, not one, and keep the result only if it beats the released model on the same items.</li>
+    </ol>
+    <p>Amazon seems to have stopped at rung 3: a larger released model and a tuned threshold <a href="#s1">[1]</a>. That is the part I find most encouraging. The training I would expect to be the hard part is the last resort.</p>
+
+    <h3>6. Thresholds from the cost of mistakes</h3>
+    <p>The guide's starting bands: act alone at 0.9 or more, confirm between 0.5 and 0.9, send to a person below 0.5. "A start, not a rule" <a href="#s4">[4]</a>. The real thresholds come from the task card: where a mistake is expensive, the bar goes up. A yes-or-no question has no separate confidence, only the probability of yes, so it gets one or two cut points, for example: page a person above 0.8, queue for review between 0.4 and 0.8, ignore below 0.4.</p>
+    <p>Below the threshold, the item does not fail. It goes to a person, or to the large model. The small model takes the clear cases off the large one, and the large one stays for the rest.</p>
+
+    <h3>7. Side by side on real traffic</h3>
+    <p>Amazon's switch had three settings: only Sonnet; both, with Sonnet's answer applied and the decider's compared; only the decider <a href="#s1">[1]</a>. They call it the part they would copy "regardless of model": running both on real traffic and judging every disagreement "told us more than any offline eval would have."</p>
+
+    <h3>8. Switch, then watch</h3>
+    <p>Switching back was a 45-second config change for Amazon <a href="#s1">[1]</a>. After the switch: log every answer with its probabilities. Each month, or when the traffic changes, label a fresh sample and score it again. If the accuracy falls at the same confidence, the traffic moved; recalibrate or retrain <a href="#s4">[4]</a>.</p>
+    <p>And keep the input stable. At Amazon the order of the keys in the JSON input moved the probabilities by up to 0.19, so they now sort the keys on every request <a href="#s1">[1]</a>. A changed format is a changed test.</p>
+
+    <h2 id="home">At home</h2>
+    <p>At home the first five steps fit into a laptop, and nothing has to leave it. The model installs as a Python package with a command-line tool: <code>strands-decider ask</code> answers one question, <code>strands-decider serve</code> runs a small local web server for many <a href="#s2">[2]</a>. The command-line tool takes options without descriptions; for the full task card, the guide sends requests to the local server <a href="#s4">[4]</a>.</p>
+    <p>It runs on a CPU, an Apple GPU or an NVIDIA GPU. A CPU is much slower: the repository measured several seconds per question for the larger models on a large CPU server, and a median of 234 ms for the 2B model on an M3 Pro laptop <a href="#s3">[3]</a> <a href="#s5">[5]</a>. For a first test on a few hundred items that is enough.</p>
+    <p>What I need for a first try:</p>
+    <ul>
+      <li>One decision I already make, or have a model make, often, with an outcome I can check.</li>
+      <li>A task card for it.</li>
+      <li>A few hundred items with the right answer, to start with. The 1,000 of the guide come later, if it looks promising.</li>
+      <li>A count: how often does the model agree with the right answer at each confidence, and how does that compare with always guessing the most common answer?</li>
+    </ul>
+    <p>That tells me whether the idea holds for my data before I spend anything.</p>
+
+    <h2 id="work">At work</h2>
+    <p>At work the steps are the same. Four things change.</p>
+    <ul>
+      <li><b>The data.</b> The guide asks before anything moves the data off the machine: a cloud host, an outside LLM used to label, a storage bucket <a href="#s4">[4]</a>. A small open model on our own hardware keeps tickets, findings and customer text in house. For many teams that matters more than the price.</li>
+      <li><b>The cost.</b> The tokens per ticket fell by 70%, not 98%. Most of Amazon's saving comes from paying per instance-hour, $1.408, instead of per token. An instance costs the same busy or idle. My own sum from the post's numbers: one instance-hour costs as much as about 63 Sonnet tickets. Below about 63 tickets an hour, or about 46,000 a month, an instance that runs all the time costs more than calling Sonnet. That leaves out cheaper ways to run it: on a CPU we already have, or on AWS Lambda, which the repository supports for the 2B model, with requests that take seconds <a href="#s6">[6]</a>.</li>
+      <li><b>The people.</b> Someone owns the labels, someone agrees on what each mistake costs, and someone reads the disagreements in step 7. That is the real work, more than the model.</li>
+      <li><b>The input may be hostile.</b> In security work a report or a log line can be written by an attacker, with text meant to steer the model. A decision model cannot write text or call tools, so an injected instruction can at most move the label. That is still bad when the label decides that a finding is ignored. So "dismiss" needs a higher confidence than "look at this".</li>
+    </ul>
+
+    <h2 id="gaps">What the post leaves out</h2>
+    <ul>
+      <li><b>No accuracy figure.</b> The post says the E4B was "beating production Sonnet" and "performed just as well". It gives no number, no count of disagreements, and does not say how each disagreement was judged, or by whom. The guide in the same repository asks for exactly that: intervals, and a paired comparison on the same items <a href="#s4">[4]</a>.</li>
+      <li><b>Two latencies.</b> One request took about 640 ms; the average call took 897 ms. The second probably includes the network and queueing, but the post does not say.</li>
+      <li><b>A vendor post.</b> It is written by the team that makes the model, on its own site. That does not make it wrong. It means I want my own numbers before I believe "just as well".</li>
+    </ul>
+
+    <h2 id="check">When to think about a specialised model</h2>
+    <p>My checklist, for now. The more of these are true, the more a decision model is worth a try:</p>
+    <ul>
+      <li>The answer is one item from a fixed list, a yes or no, or a level. Nobody reads the reasoning.</li>
+      <li>The list changes rarely, not every week.</li>
+      <li>What the model needs to see fits into a few thousand tokens.</li>
+      <li>The same question comes up often: hundreds of times a day, not ten.</li>
+      <li>There is a recorded outcome to build a test set from.</li>
+      <li>Speed matters, or the data should not leave the house.</li>
+      <li>I can say what each mistake costs, and route the unsure cases to a person.</li>
+      <li>I can run the old and the new way side by side before I switch.</li>
+    </ul>
+    <p>If only the first one is true, the frontier model stays. It is the default for a reason: it is the right tool for the tasks that are not a list.</p>
+
+    <h2 id="open">Open questions</h2>
+    <ul>
+      <li>How did Amazon judge the disagreements between Sonnet and the decision model, and how many were there?</li>
+      <li>Which decision of mine is the first good candidate, with a recorded outcome to test against?</li>
+      <li>How well does a 2B model do on German text, and on technical jargon?</li>
+      <li>How easy is it to move the label with text written into the input? That needs a test of its own.</li>
+    </ul>
+
+    <h2 id="start">Starting points</h2>
+    <ul>
+      <li>Carr Onstott, Mehul Jaiswal, Strands Agents team: "Amazon saves millions by replacing Sonnet 4.6 with Strands Decider", 9 Nov 2026. It claims that a small decision model labels tickets as well as Sonnet 4.6 at 98% less cost <a href="#s1">[1]</a>.</li>
+      <li>My own question: what is the method behind it, and how would I do it at home and at work?</li>
+    </ul>
+
+    <h2 id="sources">Sources</h2>
+    <ol class="refs">
+      <li id="s1">Carr Onstott, Mehul Jaiswal, Strands Agents team: <a href="https://strandsagents.com/blog/amazon-saves-millions-replacing-sonnet-with-strands-decider/" rel="noopener">Amazon saves millions by replacing Sonnet 4.6 with Strands Decider</a>, 9 Nov 2026.</li>
+      <li id="s2">strands-labs: <a href="https://github.com/strands-labs/strands-decider" rel="noopener">strands-decider</a>, README.</li>
+      <li id="s3">strands-labs: <a href="https://github.com/strands-labs/strands-decider/blob/main/evaluation/results.md" rel="noopener">strands-decider, evaluation/results.md</a>.</li>
+      <li id="s4">strands-labs: <a href="https://github.com/strands-labs/strands-decider/blob/main/skills/customize-decider/SKILL.md" rel="noopener">strands-decider, skills/customize-decider/SKILL.md</a>, the guide for trying and customising the model on your own data.</li>
+      <li id="s5">strands-labs: <a href="https://github.com/strands-labs/strands-decider/blob/main/docs/inference.md" rel="noopener">strands-decider, docs/inference.md</a>.</li>
+      <li id="s6">strands-labs: <a href="https://github.com/strands-labs/strands-decider/blob/main/deploy/README.md" rel="noopener">strands-decider, deploy/README.md</a>.</li>
+    </ol>
+    <p class="refs">I read the post <a href="#s1">[1]</a> as text copied from the page; its numbers are at us-east-1 list prices. I read the repository <a href="#s2">[2]</a>–<a href="#s6">[6]</a> at its commit of 6 Nov 2026.</p>
+
+    <h2 id="revisions">Revisions</h2>
+    <ul class="dates">
+      <li><time datetime="2026-11-10">10 Nov 2026</time><span>First version.</span></li>
+    </ul>
+
+    <h2 id="feedback">Feedback</h2>
+    <p>Not shared yet. When I post about it, what people answer goes here, with what it changed.</p>
+  </article>
+</div>
+
+</main>
+
+<footer class="foot">
+  <div class="wrap">
+    <span>Tim Conrad</span>
+    <span>No cookies, no trackers, no third-party requests</span>
+  </div>
+</footer>
+
+</body>
+</html>
diff --git a/thoughts/index.html b/thoughts/index.html
index d5965b6..9f72a03 100644
--- a/thoughts/index.html
+++ b/thoughts/index.html
@@ -48,6 +48,27 @@ <h1>Thoughts</h1>
 
 <section class="blog-list">
   <ul class="posts">
+    <li>
+      <a href="/thoughts/no-long-lived-secrets/">
+        <span class="posts__meta"><span class="label"><time datetime="2026-11-12">12 Nov 2026</time></span><span class="status">Draft</span></span>
+        <span class="posts__title">Agents without long-lived secrets, approved from my phone</span>
+        <span class="posts__sum">My agents can read keys that never expire. A design where they hold none: DPoP-bound tokens, a broker that knows which program asks, a phone that shows the intent and signs a short grant, and a gateway that keeps the last keys.</span>
+      </a>
+    </li>
+    <li>
+      <a href="/thoughts/sealed/">
+        <span class="posts__meta"><span class="label"><time datetime="2026-11-10">10 Nov 2026</time></span><span class="status">Draft</span></span>
+        <span class="posts__title">A private site on public static hosting</span>
+        <span class="posts__sum">sealed puts a whole static site on a public host in encrypted form, with a password per reader. What the host sees, how a password opens a file, and what it does not protect.</span>
+      </a>
+    </li>
+    <li>
+      <a href="/thoughts/decision-models/">
+        <span class="posts__meta"><span class="label"><time datetime="2026-11-10">10 Nov 2026</time></span><span class="status">Draft</span></span>
+        <span class="posts__title">When a small decision model can replace an LLM call</span>
+        <span class="posts__sum">Amazon replaced Claude Sonnet 4.6 with a small model that only picks from a list. The method behind it, step by step, and how I would try it at home and at work.</span>
+      </a>
+    </li>
     <li>
       <a href="/thoughts/humans-md/">
         <span class="posts__meta"><span class="label"><time datetime="2026-11-10">10 Nov 2026</time></span><span class="status">Draft</span></span>
diff --git a/thoughts/no-long-lived-secrets/index.html b/thoughts/no-long-lived-secrets/index.html
new file mode 100644
index 0000000..593a0fc
--- /dev/null
+++ b/thoughts/no-long-lived-secrets/index.html
@@ -0,0 +1,656 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'self'; script-src 'self'; img-src 'self'; font-src 'self'; media-src 'self'; base-uri 'none'; form-action 'none'">
+<title>Agents without long-lived secrets, approved from my phone · Tim Conrad</title>
+<meta name="description" content="My agents can read API keys, deploy keys and tokens that never expire. A design where they hold none: tokens bound to a key with DPoP, a broker that checks which program asks, a phone that shows what the agent wants to do and signs a short grant, and a gateway that keeps the last keys.">
+<link rel="canonical" href="https://t7d.dev/thoughts/no-long-lived-secrets/">
+<meta property="og:type" content="article">
+<meta property="og:title" content="Agents without long-lived secrets, approved from my phone">
+<meta property="og:description" content="My agents can read API keys, deploy keys and tokens that never expire. A design where they hold none: tokens bound to a key with DPoP, a broker that checks which program asks, a phone that shows what the agent wants to do and signs a short grant, and a gateway that keeps the last keys.">
+<meta property="og:url" content="https://t7d.dev/thoughts/no-long-lived-secrets/">
+<meta property="og:image" content="https://t7d.dev/assets/og.png">
+<meta property="article:published_time" content="2026-11-12">
+<meta name="twitter:card" content="summary_large_image">
+<link rel="alternate" type="application/rss+xml" title="Tim Conrad · Thoughts" href="/thoughts/feed.xml">
+<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
+<link rel="preload" href="/assets/fonts/barlow-condensed-700.woff2" as="font" type="font/woff2" crossorigin>
+<link rel="stylesheet" href="/assets/site.css">
+<script src="/assets/theme.js"></script>
+<script src="/assets/site.js" defer></script>
+</head>
+<body>
+<a class="skip" href="#main">Skip to content</a>
+
+<header class="nav">
+  <div class="wrap nav__in">
+    <a class="brand" href="/">Tim Conrad</a>
+    <nav class="nav__links" aria-label="Site">
+      <a href="/#games">Games</a>
+      <a href="/thoughts/">Thoughts</a>
+      <a class="opt3" href="/#research">Research</a>
+      <a class="opt2" href="/#verify">PGP key</a>
+      <a class="opt2" href="/#contact">Contact</a>
+    </nav>
+    <button class="toggle" id="theme-toggle" type="button">dark</button>
+  </div>
+</header>
+
+<main id="main" class="wrap">
+
+<header class="post-head">
+  <a class="crumb" href="/thoughts/">← Thoughts</a>
+  <h1>Agents without long-lived secrets, approved from my phone</h1>
+  <p class="sub">My agents can read keys that never expire. A design where they hold none: tokens bound to a key, a broker that knows which program asks, a phone that shows what the agent wants to do, and a gateway that keeps the last keys.</p>
+  <p class="label">Tim Conrad · Security · Coding agents · OAuth · Android</p>
+  <dl class="tmeta">
+    <div><dt>Status</dt><dd><span class="status">Draft</span></dd></div>
+    <div><dt>Started</dt><dd><time datetime="2026-11-12">12 Nov 2026</time></dd></div>
+    <div><dt>Last revised</dt><dd><time datetime="2026-11-12">12 Nov 2026</time></dd></div>
+  </dl>
+</header>
+
+<div class="post">
+  <nav class="toc" aria-label="On this page">
+    <p class="label">On this page</p>
+    <ol>
+      <li><a href="#years">Keys that live for years</a></li>
+      <li><a href="#copy">A secret is something you can copy</a></li>
+      <li><a href="#picture">The design in one picture</a></li>
+      <li><a href="#who">Who is asking</a></li>
+      <li><a href="#intent">Show the intent, not a button</a></li>
+      <li><a href="#grants">Grants instead of secrets</a></li>
+      <li><a href="#flow">One request, step by step</a></li>
+      <li><a href="#gateway">A gateway keeps the last keys</a></li>
+      <li><a href="#pairing">Pairing the phone</a></li>
+      <li><a href="#lifetimes">How long each credential lives</a></li>
+      <li><a href="#further">Further out</a></li>
+      <li><a href="#first">What I would build first</a></li>
+      <li><a href="#left">What it does not solve</a></li>
+      <li><a href="#open">Open questions</a></li>
+      <li><a href="#start">Starting points</a></li>
+      <li><a href="#sources">Sources</a></li>
+      <li><a href="#revisions">Revisions</a></li>
+      <li><a href="#feedback">Feedback</a></li>
+    </ol>
+  </nav>
+
+  <article class="prose">
+    <h2 id="years">Keys that live for years</h2>
+    <p>My agents run as me. Whatever I can read, they can read. On my machines that includes API keys for the models and for a voice service, deploy keys for the repositories, GitHub and cloud tokens, and the service passwords of my lab. Most of them have no expiry date. They stay valid until someone rotates them.</p>
+    <p>An agent does not need to be evil to leak one. It prints an environment variable while it debugs. It pastes a config file into a log. It reads a web page that tells it to send <code>~/.config</code> somewhere. A key that leaks once works for whoever has it, from anywhere, for as long as it lives.</p>
+    <p>I want to get rid of that kind of secret, at least within reach of an agent. This thought is the design I would build: what exists already, what is missing, and a phone app that approves what an agent may do instead of handing it a key. I call the app Countersign for now.</p>
+
+    <h2 id="copy">A secret is something you can copy</h2>
+    <p>A password, an API key and a bearer token have one thing in common: whoever shows it, gets in. The server cannot tell the owner from someone with a copy. That is the problem, more than the lifetime.</p>
+    <p>DPoP changes that. RFC 9449, from September 2023, binds an OAuth access token to a key pair of the client <a href="#s1">[1]</a>. The token names the key by its thumbprint (<code>cnf.jkt</code>). With each request the client sends a fresh, signed proof: a small JWT that contains the HTTP method (<code>htm</code>), the URL (<code>htu</code>), the time (<code>iat</code>), a unique id (<code>jti</code>) and a hash of the token (<code>ath</code>). The server can also send a nonce that the next proof must contain <a href="#s2">[2]</a>.</p>
+    <div class="code">
+      <div class="code__bar"><span>a DPoP proof, decoded</span></div>
+<pre><code>header   { "typ": "dpop+jwt", "alg": "ES256", "jwk": { public key of the agent } }
+payload  { "htm": "POST",
+           "htu": "https://gw.lab/github/repos/Tim-Conrad/sealed/git/refs",
+           "iat": 1794826800,
+           "jti": "e1j3V_bKic8-LAEB",
+           "ath": "fUHyO2r2Z3DZ53EsNrWBb0xWXoaNy59IiKCAqksmQEo" }
+signed   with the private key, which never leaves the agent's process</code></pre>
+    </div>
+    <p>A copied token is now useless without the private key. And a copied proof is useless too: it is good for one method on one URL, for a short time, once.</p>
+    <figure class="fig-wide anim" data-switch="Bearer token|DPoP-bound token">
+      <svg class="dg dg-w" viewBox="0 0 680 270" role="img" aria-labelledby="f1t f1d">
+        <title id="f1t">What a copied token is worth</title>
+        <desc id="f1d">Top row: the agent sends a request to the API and the API accepts it. Bottom row: another machine sends a copy of the same token. With a bearer token the API accepts the copy too. With a DPoP-bound token the copy comes without a proof from the key, and the API rejects it.</desc>
+        <text x="20" y="28" class="t-h">The agent</text>
+        <rect class="bx" x="20" y="42" width="170" height="72"/>
+        <text x="36" y="70">agent, my laptop</text>
+        <text x="36" y="94" class="t-s w-a">holds the token</text>
+        <text x="36" y="94" class="t-s w-b">holds token and key</text>
+        <line class="ln" x1="190" y1="78" x2="232" y2="78"/><polygon class="arr" points="232,73 240,78 232,83"/>
+        <rect class="bx-s" x="244" y="42" width="214" height="72"/>
+        <text x="258" y="70" class="w-a">Bearer &lt;token&gt;</text>
+        <text x="258" y="70" class="w-b">DPoP &lt;token&gt;</text>
+        <text x="258" y="94" class="t-s w-a">the token alone</text>
+        <text x="258" y="94" class="t-s w-b">+ proof, signed just now</text>
+        <line class="ln" x1="458" y1="78" x2="498" y2="78"/><polygon class="arr" points="498,73 506,78 498,83"/>
+        <rect class="bx" x="510" y="42" width="150" height="72"/>
+        <text x="526" y="70">API</text>
+        <text x="526" y="94" class="t-s">accepts</text>
+
+        <text x="20" y="162" class="t-h">A copy of the token</text>
+        <rect class="bx-d" x="20" y="176" width="170" height="72"/>
+        <text x="36" y="204">another machine</text>
+        <text x="36" y="228" class="t-s">copied from a log</text>
+        <line class="ln" x1="190" y1="212" x2="232" y2="212"/><polygon class="arr" points="232,207 240,212 232,217"/>
+        <rect class="bx-s" x="244" y="176" width="214" height="72"/>
+        <text x="258" y="204" class="w-a">Bearer &lt;token&gt;</text>
+        <text x="258" y="204" class="w-b">DPoP &lt;token&gt;</text>
+        <text x="258" y="228" class="t-s w-a">the same token</text>
+        <text x="258" y="228" class="t-s w-b">no key, so no proof</text>
+        <line class="ln" x1="458" y1="212" x2="498" y2="212"/><polygon class="arr" points="498,207 506,212 498,217"/>
+        <rect class="bx w-a" x="510" y="176" width="150" height="72"/>
+        <text x="526" y="204" class="w-a">API</text>
+        <text x="526" y="228" class="t-s w-a">accepts the copy</text>
+        <rect class="bx-i w-b" x="510" y="176" width="150" height="72"/>
+        <text x="526" y="204" class="t-inv w-b">API</text>
+        <text x="526" y="228" class="t-s t-inv w-b">rejects: no proof</text>
+      </svg>
+      <svg class="dg dg-n" viewBox="0 0 360 520" role="img" aria-labelledby="f1nt">
+        <title id="f1nt">What a copied token is worth</title>
+        <text x="10" y="24" class="t-h">The agent</text>
+        <rect class="bx" x="10" y="36" width="340" height="56"/>
+        <text x="24" y="60">agent, my laptop</text>
+        <text x="24" y="80" class="t-s w-a">holds the token</text>
+        <text x="24" y="80" class="t-s w-b">holds token and key</text>
+        <line class="ln" x1="180" y1="92" x2="180" y2="102"/><polygon class="arr" points="175,102 180,110 185,102"/>
+        <rect class="bx-s" x="10" y="112" width="340" height="56"/>
+        <text x="24" y="136" class="w-a">Bearer &lt;token&gt;</text>
+        <text x="24" y="136" class="w-b">DPoP &lt;token&gt;</text>
+        <text x="24" y="156" class="t-s w-a">the token alone</text>
+        <text x="24" y="156" class="t-s w-b">+ proof, signed just now</text>
+        <line class="ln" x1="180" y1="168" x2="180" y2="178"/><polygon class="arr" points="175,178 180,186 185,178"/>
+        <rect class="bx" x="10" y="188" width="340" height="56"/>
+        <text x="24" y="212">API</text>
+        <text x="24" y="232" class="t-s">accepts</text>
+
+        <text x="10" y="284" class="t-h">A copy of the token</text>
+        <rect class="bx-d" x="10" y="296" width="340" height="56"/>
+        <text x="24" y="320">another machine</text>
+        <text x="24" y="340" class="t-s">copied from a log</text>
+        <line class="ln" x1="180" y1="352" x2="180" y2="362"/><polygon class="arr" points="175,362 180,370 185,362"/>
+        <rect class="bx-s" x="10" y="372" width="340" height="56"/>
+        <text x="24" y="396" class="w-a">Bearer &lt;token&gt;</text>
+        <text x="24" y="396" class="w-b">DPoP &lt;token&gt;</text>
+        <text x="24" y="416" class="t-s w-a">the same token</text>
+        <text x="24" y="416" class="t-s w-b">no key, so no proof</text>
+        <line class="ln" x1="180" y1="428" x2="180" y2="438"/><polygon class="arr" points="175,438 180,446 185,438"/>
+        <rect class="bx w-a" x="10" y="448" width="340" height="56"/>
+        <text x="24" y="472" class="w-a">API</text>
+        <text x="24" y="492" class="t-s w-a">accepts the copy</text>
+        <rect class="bx-i w-b" x="10" y="448" width="340" height="56"/>
+        <text x="24" y="472" class="t-inv w-b">API</text>
+        <text x="24" y="492" class="t-s t-inv w-b">rejects: no proof</text>
+      </svg>
+      <figcaption>Fig. 1 · Switch between a bearer token and a DPoP-bound token, and look at the bottom row.</figcaption>
+    </figure>
+    <p>RFC 8705 does the same with a TLS client certificate <a href="#s3">[3]</a>. DPoP works at the HTTP layer, so it also works through proxies, and a short-lived program can make a fresh key pair whenever it starts. Keycloak supports it fully since 26.4 <a href="#s4">[4]</a>, Spring Security can check DPoP-bound tokens <a href="#s5">[5]</a>, and Okta offers it as an app setting <a href="#s6">[6]</a>.</p>
+    <p>So the rule I want: <b>nothing an agent holds may work without a key that cannot be copied.</b> A private key is still a secret. But if it lives only in the memory of one process, or in a TPM or a phone's secure element, there is nothing to paste into a log.</p>
+
+    <h2 id="picture">The design in one picture</h2>
+    <p>DPoP solves the copy. It does not answer who decides that the agent gets a token, for what, and for how long. That is where the phone comes in. There are five parts. Tap one to read what it does and what it holds.</p>
+    <figure class="fig-wide anim">
+      <svg class="dg dg-w" viewBox="0 0 680 350" role="img" aria-labelledby="f2t f2d">
+        <title id="f2t">The five parts of the design</title>
+        <desc id="f2d">On my Linux machine, the agent talks to a local broker over a Unix socket. The broker talks end to end to my phone, through a relay that sees only ciphertext. The agent sends its requests to a gateway with a DPoP proof and a grant from the phone. The gateway trusts the phone's public key and calls the real APIs with a short upstream token or a key that it keeps.</desc>
+        <rect class="bx-d" x="20" y="40" width="320" height="290"/>
+        <text x="34" y="62" class="t-s">my Linux machine, or a server</text>
+        <g data-pick="agent" class="pop d1">
+          <rect class="bx" x="40" y="80" width="130" height="70"/>
+          <text x="54" y="108" class="t-h">Agent</text>
+          <text x="54" y="130" class="t-s">Claude Code</text>
+        </g>
+        <g data-pick="broker" class="pop d2">
+          <rect class="bx" x="190" y="80" width="130" height="70"/>
+          <text x="204" y="108" class="t-h">Broker</text>
+          <text x="204" y="130" class="t-s">local daemon</text>
+        </g>
+        <line class="ln draw d1" pathLength="1" x1="170" y1="115" x2="190" y2="115"/>
+        <text x="180" y="172" text-anchor="middle" class="t-s">Unix socket</text>
+        <g data-pick="relay" class="pop d3">
+          <rect class="bx" x="380" y="80" width="120" height="70"/>
+          <text x="394" y="108" class="t-h">Relay</text>
+          <text x="394" y="130" class="t-s">ciphertext only</text>
+        </g>
+        <line class="ln draw d2" pathLength="1" x1="320" y1="115" x2="380" y2="115"/>
+        <line class="ln draw d3" pathLength="1" x1="500" y1="115" x2="530" y2="115"/>
+        <text x="440" y="172" text-anchor="middle" class="t-s">end to end (Noise)</text>
+        <g data-pick="phone" class="pop d4">
+          <rect class="bx" x="530" y="60" width="130" height="90"/>
+          <text x="544" y="92" class="t-h">Phone</text>
+          <text x="544" y="114" class="t-s">Android app</text>
+          <text x="544" y="132" class="t-s">key in StrongBox</text>
+        </g>
+        <g data-pick="gateway" class="pop d5">
+          <rect class="bx" x="380" y="240" width="140" height="70"/>
+          <text x="394" y="268" class="t-h">Gateway</text>
+          <text x="394" y="290" class="t-s">agentgateway</text>
+        </g>
+        <path class="ln draw d4" pathLength="1" d="M105 150 V275 H380"/>
+        <text x="118" y="266" class="t-s">DPoP proof + grant</text>
+        <path class="ln-s" d="M595 150 V200 H450 V240"/>
+        <text x="604" y="190" class="t-s">public key</text>
+        <g data-pick="api" class="pop d6">
+          <rect class="bx" x="560" y="240" width="100" height="70"/>
+          <text x="574" y="268" class="t-h">APIs</text>
+          <text x="574" y="290" class="t-s">GitHub, …</text>
+        </g>
+        <line class="ln draw d5" pathLength="1" x1="520" y1="275" x2="560" y2="275"/>
+        <text x="660" y="334" text-anchor="end" class="t-s">short token or kept key</text>
+      </svg>
+      <svg class="dg dg-n" viewBox="0 0 360 500" role="img" aria-labelledby="f2nt">
+        <title id="f2nt">The five parts of the design</title>
+        <rect class="bx-d" x="5" y="30" width="350" height="104"/>
+        <text x="15" y="22" class="t-s">my Linux machine, or a server</text>
+        <g data-pick="agent" class="pop d1"><rect class="bx" x="15" y="48" width="155" height="64"/><text x="29" y="74" class="t-h">Agent</text><text x="29" y="96" class="t-s">Claude Code</text></g>
+        <g data-pick="broker" class="pop d2"><rect class="bx" x="190" y="48" width="155" height="64"/><text x="204" y="74" class="t-h">Broker</text><text x="204" y="96" class="t-s">local daemon</text></g>
+        <line class="ln" x1="170" y1="80" x2="190" y2="80"/>
+        <line class="ln" x1="267" y1="112" x2="267" y2="170"/>
+        <text x="275" y="148" class="t-s">Noise</text>
+        <g data-pick="relay" class="pop d3"><rect class="bx" x="190" y="170" width="155" height="60"/><text x="204" y="196" class="t-h">Relay</text><text x="204" y="216" class="t-s">ciphertext only</text></g>
+        <line class="ln" x1="267" y1="230" x2="267" y2="270"/>
+        <g data-pick="phone" class="pop d4"><rect class="bx" x="190" y="270" width="155" height="64"/><text x="204" y="296" class="t-h">Phone</text><text x="204" y="318" class="t-s">key in StrongBox</text></g>
+        <path class="ln" d="M92 112 V400"/>
+        <text x="100" y="250" class="t-s">proof</text>
+        <text x="100" y="266" class="t-s">+ grant</text>
+        <path class="ln-s" d="M267 334 V370 H130 V400"/>
+        <text x="140" y="364" class="t-s">public key</text>
+        <g data-pick="gateway" class="pop d5"><rect class="bx" x="15" y="400" width="155" height="64"/><text x="29" y="426" class="t-h">Gateway</text><text x="29" y="448" class="t-s">agentgateway</text></g>
+        <line class="ln" x1="170" y1="432" x2="190" y2="432"/>
+        <g data-pick="api" class="pop d6"><rect class="bx" x="190" y="400" width="155" height="64"/><text x="204" y="426" class="t-h">APIs</text><text x="204" y="448" class="t-s">GitHub, …</text></g>
+      </svg>
+      <div class="pick__panel">
+        <p class="pick__hint">Tap a part to read what it does and what it holds.</p>
+        <ul class="pick__list">
+          <li data-k="agent"><b>Agent</b>: Claude Code, a cron job, a CI runner. It makes a key pair when it starts and keeps the private half in memory. It asks the broker for what it needs, then sends its requests to the gateway with a DPoP proof. Holds: its own key, a grant for a few minutes or hours. Nothing that works without the key.</li>
+          <li data-k="broker"><b>Broker</b>: a small daemon on the same machine, reached over a Unix socket. It finds out which program is asking, the way macOS does with code signatures, and sends the request to my phone. Holds: its pairing key with the phone, ideally in the TPM.</li>
+          <li data-k="relay"><b>Relay</b>: a mailbox on the internet, so the phone and the machine find each other behind any network. It passes ciphertext and a push to wake the phone. It cannot read or change a request. Holds: nothing worth stealing.</li>
+          <li data-k="phone"><b>Phone</b>: the Android app. It shows who asks, what for and why, and signs a grant with a key in the secure element after my fingerprint. Holds: the one key that matters, and it cannot leave the chip.</li>
+          <li data-k="gateway"><b>Gateway</b>: an identity-aware proxy, for example agentgateway on my lab. It checks the proof, the grant and that the request matches the grant, then calls the real API. Holds: the phone's public key, and the upstream keys that cannot be replaced yet.</li>
+          <li data-k="api"><b>APIs</b>: GitHub, the model providers, my lab's services. Where they accept short tokens from a federation (a GitHub App, a cloud's workload identity), the gateway gets one per request. Where they only take a static key, that key lives in the gateway and nowhere else.</li>
+        </ul>
+      </div>
+      <figcaption>Fig. 2 · The five parts. The dashed line carries only a public key.</figcaption>
+    </figure>
+    <p>Two things are worth saying at once. The phone never sends a secret anywhere: it signs a statement. And the agent never sees an upstream key: the gateway adds it on the way out. Claude Code's cloud sessions, which I use, already do the second part: I save an API key on the environment, a proxy adds it to requests to that host, and the session never sees the value.</p>
+
+    <h2 id="who">Who is asking</h2>
+    <p>"An agent wants to push" is not enough. Which program? Started by whom? The same request from Claude Code in a session I started, and from an unknown binary in <code>/tmp</code>, should look very different on the phone.</p>
+    <h3>How macOS knows</h3>
+    <p>On macOS every app carries a code signature, and the system identifies an app by it, not by its path or name. The key idea is the designated requirement: in Apple's words, "the code's way of saying 'If you see me again, here's how you tell it's really me'" <a href="#s7">[7]</a>. For an app from a registered developer, it names the developer's Team ID in the certificate. A new version of the app meets the same requirement, so the privacy permissions you gave it (camera, files, screen) stay with it. A changed binary does not, so they do not <a href="#s7">[7]</a>.</p>
+    <p>Two more pieces make it work. Notarization: Apple scans software signed with a Developer ID, and Gatekeeper checks for that ticket <a href="#s8">[8]</a>. And a service can demand a signature from the process on the other end of its connection: <code>setCodeSigningRequirement</code> drops an XPC connection whose peer does not meet a requirement <a href="#s9">[9]</a>. Apple's engineers advise identifying the peer by its audit token, not by its process id, because a process id can be reused by another process <a href="#s10">[10]</a>.</p>
+    <h3>What Linux has</h3>
+    <p>Linux has no single signing system for programs. But it has most of the pieces to build the same check in a broker:</p>
+    <ul>
+      <li><b>The peer of a socket.</b> <code>SO_PEERCRED</code> gives the user and process id of the other end of a Unix socket. Since Linux 6.5, <code>SO_PEERPIDFD</code> gives a pidfd instead <a href="#s11">[11]</a>: a handle to exactly that process, which cannot point to another one if the id is reused. That is the audit token of Linux.</li>
+      <li><b>The program.</b> From the pidfd, <code>/proc/&lt;pid&gt;/exe</code> leads to the binary. Its hash can come from fs-verity, which the kernel keeps for a file and checks on each read (since 5.4), or from IMA, which measures files as they are run <a href="#s11">[11]</a>. SPIRE's Unix workload attestor already does this for workloads: it gives the user, the group, the path and the SHA-256 of the binary as selectors <a href="#s12">[12]</a>.</li>
+      <li><b>The context.</b> The process's cgroup names its systemd unit or scope, so the broker can see "a terminal session of tim" or "the backup timer". Flatpak's portals identify an app by the app id in the sandbox, and use pidfds to do it safely <a href="#s13">[13]</a>.</li>
+    </ul>
+    <p>So the broker can write a requirement much like Apple's, only from other parts:</p>
+    <div class="code">
+      <div class="code__bar"><span>a requirement for the broker, a sketch</span></div>
+<pre><code>requirement claude-code
+  exe      = /usr/bin/node
+  script   = ~/.local/lib/node_modules/@anthropic-ai/claude-code/cli.js
+  script.sha256 in npm-integrity(@anthropic-ai/claude-code)
+  uid      = tim
+  unit     ~ "session-*.scope"        # started from my login, not a timer
+  ptrace   = denied                   # Yama scope 2, or its own user</code></pre>
+    </div>
+    <p>Two things are harder than on macOS, and the design must be honest about them.</p>
+    <ul>
+      <li><b>Interpreters.</b> Many agents run in Node or Python. The binary is the interpreter; the program is a script. The broker has to identify the script too, and check its hash against the package it came from. A program that loads more code at run time is only as trustworthy as that code.</li>
+      <li><b>Same user, same power.</b> On a normal desktop, any process of mine can attach a debugger to another one and change it. macOS blocks that for hardened apps. On Linux the broker can only trust an identity if the agent runs as its own user, in a sandbox, or with ptrace restricted. Otherwise the check is a hint, and the phone should say so.</li>
+    </ul>
+
+    <h2 id="intent">Show the intent, not a button</h2>
+    <p>The push prompts I know ask "Is this you?" with two buttons. People approve them without reading; attackers count on it and send prompts until someone taps yes. Microsoft made number matching mandatory in its Authenticator app in May 2023 for that reason: the person types a number from the login screen, so a prompt they did not cause cannot be approved by reflex <a href="#s14">[14]</a>. That fixes "did I cause this". It does not say what I agree to.</p>
+    <p>There is better prior art for that. Secure Payment Confirmation in the browser must show the payee, the amount and the card, and the signature covers exactly that data <a href="#s15">[15]</a>. Android's Protected Confirmation shows a message in a screen the app cannot draw over, and signs it with a key that works only for confirmed messages <a href="#s16">[16]</a>. OAuth has a format for the content: Rich Authorization Requests (RFC 9396) carry a list of <code>authorization_details</code>, each with a <code>type</code> and the fields that say what exactly is allowed <a href="#s17">[17]</a>. And CIBA, the OpenID flow where one device asks and another one approves, shows a <code>binding_message</code> on both <a href="#s18">[18]</a>.</p>
+    <p>Put together, the phone shows a request in four parts, and what it signs is exactly what it shows. Tap a part.</p>
+    <figure class="fig-wide anim">
+      <svg class="dg dg-w" viewBox="0 0 680 480" role="img" aria-labelledby="f3t f3d">
+        <title id="f3t">The approval screen on the phone</title>
+        <desc id="f3d">A phone screen with six parts. Who: claude, node, verified because the package hash matches, on lab-1, session 7f3a. What: git push to Tim-Conrad/Tim-Conrad.github.io, branch claude/thought-grants, 3 commits. Why, in the agent's words: push the new thought for review. Allow: this push, or this session for 2 hours. A code that also shows in my terminal. Deny and Approve.</desc>
+        <rect class="bx" x="40" y="20" width="260" height="440" rx="28"/>
+        <text x="60" y="54" class="t-s">Countersign · lab-1 asks</text>
+        <g data-pick="who">
+          <rect class="bx" x="60" y="68" width="220" height="74"/>
+          <text x="72" y="90">claude · node</text>
+          <text x="72" y="110" class="t-s">verified: package hash</text>
+          <text x="72" y="128" class="t-s">lab-1 · session 7f3a</text>
+          <line class="ln-s" x1="290" y1="105" x2="330" y2="105"/>
+          <text x="340" y="109" class="t-pick">Who: checked by the broker</text>
+        </g>
+        <g data-pick="what">
+          <rect class="bx" x="60" y="152" width="220" height="86"/>
+          <text x="72" y="176" class="t-h">git push</text>
+          <text x="72" y="196" class="t-s">repo Tim-Conrad.github.io</text>
+          <text x="72" y="212" class="t-s">branch claude/thought-grants</text>
+          <text x="72" y="228" class="t-s">3 commits · not main</text>
+          <line class="ln-s" x1="290" y1="195" x2="330" y2="195"/>
+          <text x="340" y="199" class="t-pick">What: the exact request</text>
+        </g>
+        <g data-pick="why">
+          <rect class="bx" x="60" y="248" width="220" height="62"/>
+          <text x="72" y="266" class="t-s">why · the agent's words</text>
+          <text x="72" y="286">Push the new thought</text>
+          <text x="72" y="302">for review.</text>
+          <line class="ln-s" x1="290" y1="279" x2="330" y2="279"/>
+          <text x="340" y="283" class="t-pick">Why: what the agent says</text>
+        </g>
+        <g data-pick="grant">
+          <rect class="bx" x="60" y="320" width="220" height="50"/>
+          <text x="72" y="337" class="t-s">allow</text>
+          <rect class="bx-i" x="72" y="344" width="92" height="20"/>
+          <text x="80" y="358" class="t-s t-inv">this push</text>
+          <rect class="bx" x="170" y="344" width="100" height="20"/>
+          <text x="178" y="358" class="t-s">session, 2 h</text>
+          <line class="ln-s" x1="290" y1="345" x2="330" y2="345"/>
+          <text x="340" y="349" class="t-pick">Grant: how far, how long</text>
+        </g>
+        <g data-pick="code">
+          <rect class="bx" x="60" y="378" width="220" height="22"/>
+          <text x="72" y="393" class="t-s">code 47 · also in the terminal</text>
+          <line class="ln-s" x1="290" y1="389" x2="330" y2="389"/>
+          <text x="340" y="393" class="t-pick">Code: did I cause this?</text>
+        </g>
+        <g data-pick="sign">
+          <rect class="bx" x="60" y="408" width="100" height="34"/>
+          <text x="110" y="430" text-anchor="middle">Deny</text>
+          <rect class="bx-i" x="180" y="408" width="100" height="34"/>
+          <text x="230" y="430" text-anchor="middle" class="t-inv">Approve</text>
+          <line class="ln-s" x1="290" y1="425" x2="330" y2="425"/>
+          <text x="340" y="429" class="t-pick">Approve: fingerprint, then sign</text>
+        </g>
+      </svg>
+      <svg class="dg dg-n" viewBox="20 0 300 480" role="img" aria-labelledby="f3nt">
+        <title id="f3nt">The approval screen on the phone</title>
+        <rect class="bx" x="40" y="20" width="260" height="440" rx="28"/>
+        <text x="60" y="54" class="t-s">Countersign · lab-1 asks</text>
+        <g data-pick="who"><rect class="bx" x="60" y="68" width="220" height="74"/><text x="72" y="90">claude · node</text><text x="72" y="110" class="t-s">verified: package hash</text><text x="72" y="128" class="t-s">lab-1 · session 7f3a</text></g>
+        <g data-pick="what"><rect class="bx" x="60" y="152" width="220" height="86"/><text x="72" y="176" class="t-h">git push</text><text x="72" y="196" class="t-s">repo Tim-Conrad.github.io</text><text x="72" y="212" class="t-s">branch claude/thought-grants</text><text x="72" y="228" class="t-s">3 commits · not main</text></g>
+        <g data-pick="why"><rect class="bx" x="60" y="248" width="220" height="62"/><text x="72" y="266" class="t-s">why · the agent's words</text><text x="72" y="286">Push the new thought</text><text x="72" y="302">for review.</text></g>
+        <g data-pick="grant"><rect class="bx" x="60" y="320" width="220" height="50"/><text x="72" y="337" class="t-s">allow</text><rect class="bx-i" x="72" y="344" width="92" height="20"/><text x="80" y="358" class="t-s t-inv">this push</text><rect class="bx" x="170" y="344" width="100" height="20"/><text x="178" y="358" class="t-s">session, 2 h</text></g>
+        <g data-pick="code"><rect class="bx" x="60" y="378" width="220" height="22"/><text x="72" y="393" class="t-s">code 47 · also in the terminal</text></g>
+        <g data-pick="sign"><rect class="bx" x="60" y="408" width="100" height="34"/><text x="110" y="430" text-anchor="middle">Deny</text><rect class="bx-i" x="180" y="408" width="100" height="34"/><text x="230" y="430" text-anchor="middle" class="t-inv">Approve</text></g>
+      </svg>
+      <div class="pick__panel">
+        <p class="pick__hint">Tap a part of the screen to read what it shows and where it comes from.</p>
+        <ul class="pick__list">
+          <li data-k="who"><b>Who</b>: the program as the broker checked it, not as the agent describes itself. The machine, the session it runs in, and whether the requirement matched. If the agent shares its user with other programs, this says "not isolated", and the screen says so plainly.</li>
+          <li data-k="what"><b>What</b>: the request as structured data, an <code>authorization_details</code> entry, drawn by a template for its type. For a push: the repository, the branch, the number of commits, whether it is the default branch. A type without a template shows its raw fields, and asks for a second look.</li>
+          <li data-k="why"><b>Why</b>: the agent's own reason, and the task it came from. It is useful, and it is a claim. A prompt injection can write a good reason too, so the screen marks it as the agent's words and keeps it apart from what the broker checked.</li>
+          <li data-k="grant"><b>Grant</b>: how far the approval goes. "This push" is used once. "This session, 2 h" lets the same session do the same kind of thing again, within the same limits, until it ends or the time runs out. I can end any grant from the phone.</li>
+          <li data-k="code"><b>Code</b>: when I sit at the machine, the terminal shows the same two digits. It proves that this request is the one I just caused. When an agent runs on its own at night, there is no code, and the screen says so.</li>
+          <li data-k="sign"><b>Approve</b>: my fingerprint unlocks the key in the secure element, and the phone signs exactly the data on the screen. Deny tells the agent no, with an optional reason it can read.</li>
+        </ul>
+      </div>
+      <figcaption>Fig. 3 · The approval screen. The agent's reason and the checked facts are kept apart.</figcaption>
+    </figure>
+    <p>The most important line on that screen is the difference between "the broker checked this" and "the agent says this". An agent that read a poisoned web page can give a perfect reason. It cannot fake the program, the branch or the repository, because the gateway will refuse anything outside the grant.</p>
+
+    <h2 id="grants">Grants instead of secrets</h2>
+    <p>What the phone signs I call a grant. It is a short JWT, signed with ES256 by the key in the phone's StrongBox chip. Android keeps such a key out of the app's memory, and can bind its use to a fingerprint <a href="#s19">[19]</a>. A grant names the agent's key, so only that agent can use it:</p>
+    <div class="code">
+      <div class="code__bar"><span>a grant, decoded</span></div>
+<pre><code>{ "iss": "phone:tim-pixel",
+  "sub": "tim",
+  "cnf": { "jkt": "0ZcOCORZNYy-DWpqq30jZyJGHTN0d2HglBV3uiguA4I" },   # the agent's key
+  "req": { "machine": "lab-1", "requirement": "claude-code",
+           "session": "7f3a", "isolated": true },                  # what the broker checked
+  "authorization_details": [{
+      "type": "git.push",
+      "repository": "Tim-Conrad/Tim-Conrad.github.io",
+      "ref": "refs/heads/claude/thought-grants",
+      "default_branch": false,
+      "uses": 1 }],
+  "why": "Push the new thought for review.",                       # the agent's words
+  "iat": 1794826800, "exp": 1794834000,                            # two hours at most
+  "jti": "g_8Qm2" }</code></pre>
+    </div>
+    <p>Three properties follow from that shape.</p>
+    <ul>
+      <li><b>It is useless when copied.</b> The gateway accepts it only with a DPoP proof from the key in <code>cnf.jkt</code>.</li>
+      <li><b>It is narrow.</b> The gateway compares each request with <code>authorization_details</code>. A push to <code>main</code> is outside a grant for a branch.</li>
+      <li><b>It ends by itself.</b> Two hours at most, and earlier when I end it on the phone. There is nothing to rotate.</li>
+    </ul>
+    <h3>Standing grants</h3>
+    <p>Asking forty times per session would train me to tap without reading, which is the problem I started with. So the screen offers "this session, 2 h": the same session may repeat the same kind of action within the same limits. The phone shows a list of open grants, each with a button to end it.</p>
+    <p>1Password's SSH agent already works this way for keys: it asks once per application, and I can approve for that app, for a terminal session or for one request <a href="#s20">[20]</a>. Tailscale's SSH check mode asks again after a period, 12 hours by default <a href="#s21">[21]</a>. Krypton did it from a phone years ago: the SSH key lived on the phone and never left it <a href="#s22">[22]</a>. What none of them carry is the intent: they approve a key, not an action.</p>
+    <h3>Grants for subagents</h3>
+    <p>Agents start other agents. A subagent should get its own key and a grant that is narrower than its parent's, never wider. The parent can sign that grant itself, as long as it only removes rights. The gateway then sees a chain: phone, agent, subagent. Token Exchange (RFC 8693) already has a claim for that chain, <code>act</code>, the party that acts for the subject <a href="#s23">[23]</a>. The phone can show the chain when the subagent asks for something new.</p>
+
+    <h2 id="flow">One request, step by step</h2>
+    <p>Here is a push from start to end. Step through it, or press Play.</p>
+    <figure class="fig-wide" data-steps>
+      <svg class="dg dg-w" viewBox="0 0 760 430" role="img" aria-labelledby="f4t f4d">
+        <title id="f4t">One request from the agent to GitHub</title>
+        <desc id="f4d">The agent asks the broker, the broker checks who asks and sends the request to the phone, I approve, the phone signs a grant bound to the agent's key, the agent calls the gateway with a proof and the grant, the gateway checks them and calls GitHub with a short token, and sends a receipt to the phone.</desc>
+        <rect class="bx" x="10" y="20" width="120" height="36"/><text x="70" y="43" text-anchor="middle" class="t-h">Agent</text>
+        <rect class="bx" x="170" y="20" width="120" height="36"/><text x="230" y="43" text-anchor="middle" class="t-h">Broker</text>
+        <rect class="bx" x="330" y="20" width="120" height="36"/><text x="390" y="43" text-anchor="middle" class="t-h">Phone</text>
+        <rect class="bx" x="490" y="20" width="120" height="36"/><text x="550" y="43" text-anchor="middle" class="t-h">Gateway</text>
+        <rect class="bx" x="640" y="20" width="110" height="36"/><text x="695" y="43" text-anchor="middle" class="t-h">GitHub</text>
+        <line class="ln-s" x1="70" y1="56" x2="70" y2="420"/>
+        <line class="ln-s" x1="230" y1="56" x2="230" y2="420"/>
+        <line class="ln-s" x1="390" y1="56" x2="390" y2="420"/>
+        <line class="ln-s" x1="550" y1="56" x2="550" y2="420"/>
+        <line class="ln-s" x1="695" y1="56" x2="695" y2="420"/>
+        <g data-step="1"><line class="ln" x1="70" y1="96" x2="222" y2="96"/><polygon class="arr" points="222,91 230,96 222,101"/><text x="80" y="88" class="t-s">1 · need: git push, key jkt</text></g>
+        <g data-step="2"><rect class="bx-s" x="240" y="122" width="140" height="28"/><text x="250" y="141" class="t-s">2 · check caller</text></g>
+        <g data-step="3"><line class="ln" x1="230" y1="176" x2="382" y2="176"/><polygon class="arr" points="382,171 390,176 382,181"/><text x="240" y="168" class="t-s">3 · request, sealed</text></g>
+        <g data-step="4"><rect class="bx-s" x="400" y="202" width="140" height="28"/><text x="410" y="221" class="t-s">4 · read, approve</text></g>
+        <g data-step="5"><line class="ln" x1="390" y1="256" x2="78" y2="256"/><polygon class="arr" points="78,251 70,256 78,261"/><text x="90" y="248" class="t-s">5 · grant, bound to the agent's key</text></g>
+        <g data-step="6"><line class="ln" x1="70" y1="296" x2="542" y2="296"/><polygon class="arr" points="542,291 550,296 542,301"/><text x="90" y="288" class="t-s">6 · push + DPoP proof + grant</text></g>
+        <g data-step="7"><rect class="bx-s" x="560" y="318" width="126" height="28"/><text x="570" y="337" class="t-s">7 · check all 3</text><line class="ln" x1="550" y1="368" x2="687" y2="368"/><polygon class="arr" points="687,363 695,368 687,373"/><text x="560" y="362" class="t-s">token, 1 h</text></g>
+        <g data-step="8"><line class="ln" x1="550" y1="404" x2="398" y2="404"/><polygon class="arr" points="398,399 390,404 398,409"/><text x="410" y="396" class="t-s">8 · receipt</text></g>
+      </svg>
+      <svg class="dg dg-n" viewBox="0 0 360 400" role="img" aria-labelledby="f4nt">
+        <title id="f4nt">One request from the agent to GitHub</title>
+        <rect class="bx" x="9" y="14" width="62" height="28"/><text x="40" y="32" text-anchor="middle" class="t-s">Agent</text>
+        <rect class="bx" x="79" y="14" width="62" height="28"/><text x="110" y="32" text-anchor="middle" class="t-s">Broker</text>
+        <rect class="bx" x="149" y="14" width="62" height="28"/><text x="180" y="32" text-anchor="middle" class="t-s">Phone</text>
+        <rect class="bx" x="219" y="14" width="62" height="28"/><text x="250" y="32" text-anchor="middle" class="t-s">Gateway</text>
+        <rect class="bx" x="289" y="14" width="62" height="28"/><text x="320" y="32" text-anchor="middle" class="t-s">GitHub</text>
+        <line class="ln-s" x1="40" y1="42" x2="40" y2="390"/>
+        <line class="ln-s" x1="110" y1="42" x2="110" y2="390"/>
+        <line class="ln-s" x1="180" y1="42" x2="180" y2="390"/>
+        <line class="ln-s" x1="250" y1="42" x2="250" y2="390"/>
+        <line class="ln-s" x1="320" y1="42" x2="320" y2="390"/>
+        <g data-step="1"><line class="ln" x1="40" y1="80" x2="103" y2="80"/><polygon class="arr" points="103,75 110,80 103,85"/><text x="46" y="72" class="t-s">1 need</text></g>
+        <g data-step="2"><rect class="bx-s" x="116" y="100" width="58" height="24"/><text x="122" y="116" class="t-s">2 who?</text></g>
+        <g data-step="3"><line class="ln" x1="110" y1="150" x2="173" y2="150"/><polygon class="arr" points="173,145 180,150 173,155"/><text x="116" y="142" class="t-s">3 ask</text></g>
+        <g data-step="4"><rect class="bx-s" x="186" y="170" width="58" height="24"/><text x="192" y="186" class="t-s">4 read</text></g>
+        <g data-step="5"><line class="ln" x1="180" y1="222" x2="47" y2="222"/><polygon class="arr" points="47,217 40,222 47,227"/><text x="56" y="214" class="t-s">5 grant</text></g>
+        <g data-step="6"><line class="ln" x1="40" y1="260" x2="243" y2="260"/><polygon class="arr" points="243,255 250,260 243,265"/><text x="56" y="252" class="t-s">6 proof + grant</text></g>
+        <g data-step="7"><rect class="bx-s" x="256" y="280" width="58" height="24"/><text x="262" y="296" class="t-s">7 check</text><line class="ln" x1="250" y1="326" x2="313" y2="326"/><polygon class="arr" points="313,321 320,326 313,331"/><text x="256" y="318" class="t-s">token</text></g>
+        <g data-step="8"><line class="ln" x1="250" y1="366" x2="187" y2="366"/><polygon class="arr" points="187,361 180,366 187,371"/><text x="190" y="358" class="t-s">8 receipt</text></g>
+      </svg>
+      <div class="steps__panel">
+        <ol class="steps__list">
+          <li>The agent made a key pair when it started. It asks the broker over the Unix socket: I want to push this branch, and here is the thumbprint of my key.</li>
+          <li>The broker takes the pidfd of the caller from the socket and checks it against its requirements: the binary, the script and its hash, the user, the systemd unit, whether ptrace is restricted. A request that matches no requirement still goes to the phone, marked "unknown program".</li>
+          <li>The broker seals the request for the phone and puts it on the relay. A push wakes the app. The relay sees a few hundred bytes of ciphertext.</li>
+          <li>I read the screen. If I sit at the machine, I compare the code with the terminal. My fingerprint unlocks the key in the secure element.</li>
+          <li>The phone signs the grant, with the agent's key thumbprint, the checked facts, the exact request and an expiry, and sends it back the same way. The broker hands it to the agent.</li>
+          <li>The agent sends its push to the gateway, with <code>Authorization: DPoP</code>, a fresh proof for this method and URL, and the grant.</li>
+          <li>The gateway checks the grant's signature against the phone's public key, the proof against the key in the grant, and the request against <code>authorization_details</code>. Then it asks GitHub for an installation token of a GitHub App, which expires after one hour <a href="#s24">[24]</a>, and forwards the push with it. The agent never sees that token.</li>
+          <li>The gateway sends a signed receipt to the phone: what was approved, and what was done. If the two differ, the phone says so.</li>
+        </ol>
+      </div>
+      <figcaption>Fig. 4 · One push, eight steps. Only steps 3 to 5 need me.</figcaption>
+    </figure>
+
+    <h2 id="gateway">A gateway keeps the last keys</h2>
+    <p>Some services will take only a static API key for years to come. Those keys do not disappear. But they can move to one place that no agent can read, and that place can be strict about who uses them.</p>
+    <p>That place is an identity-aware proxy. The idea is old: Google's BeyondCorp moved access decisions from the network edge to a proxy in front of each service, which checks the user and the device on every request <a href="#s25">[25]</a>. Pomerium is an open-source proxy of that kind <a href="#s26">[26]</a>. CyberArk's Secretless Broker was built to keep secrets away from client applications: the broker connects to the database, the app does not get the password <a href="#s27">[27]</a>.</p>
+    <p>agentgateway is the same idea built for agents. It is an open-source proxy for MCP, A2A and LLM traffic, from Solo.io and now a Linux Foundation project <a href="#s28">[28]</a>. Three of its features fit this design directly <a href="#s28">[28]</a>:</p>
+    <ul>
+      <li>It checks JWTs and runs policies in CEL, so it can verify a grant against the phone's public key and compare a request with its fields.</li>
+      <li>Its <code>backendAuth</code> policy adds stored credentials to the upstream request. The agent sends its request without a key, and the key is added on the way out.</li>
+      <li>It can keep a private key and sign a fresh JWT for each upstream request (<code>jwtSign</code>), or do an RFC 8693 token exchange. For services that accept that, there is no static key at all, only a key that signs.</li>
+    </ul>
+    <p>I could not find DPoP proof checks in agentgateway. If they are missing, a small check in front of it can do that part. Tailscale's Aperture, in beta, keeps model provider keys in a gateway too, and lets clients in by their Tailscale identity <a href="#s29">[29]</a>.</p>
+    <p>The upstream keys that remain should be few, listed in one file, and used only by the gateway. Where a service offers federation (a GitHub App, a cloud's workload identity), the gateway uses that instead and the static key goes away.</p>
+
+    <h2 id="pairing">Pairing the phone</h2>
+    <p>The phone and the broker meet once, in person. The broker shows a QR code with its public key and a one-time code. The phone scans it, and both run a Noise handshake: a framework for building secure channels from Diffie-Hellman key exchanges <a href="#s30">[30]</a>. Afterwards each side knows the other's public key, and every message between them is encrypted end to end. The one-time code from the QR goes into the handshake, so a relay in the middle cannot join it.</p>
+    <p>Without a camera, a short code works, as in Magic Wormhole: a few words, typed on the other device, run through a PAKE so that a wrong guess fails at once <a href="#s31">[31]</a>.</p>
+    <p>The phone's key gets an attestation from Android: a certificate chain to Google's root that says the key was made in StrongBox and cannot leave it <a href="#s32">[32]</a>. The gateway checks it once, when I add the phone, and then trusts the public key.</p>
+
+    <h2 id="lifetimes">How long each credential lives</h2>
+    <p>Switch between what an agent can read today and what it would hold with grants.</p>
+    <figure class="fig-wide anim" data-switch="Today|With grants">
+      <svg class="dg dg-w" viewBox="0 0 680 290" role="img" aria-labelledby="f5t f5d">
+        <title id="f5t">Lifetime of each credential, today and with grants</title>
+        <desc id="f5d">On a scale from a minute to no expiry. Today: an API key for an agent, a deploy key, a GitHub or cloud token and a lab password, all valid until I rotate them, which in practice means years or forever. With grants: the access token lives about 5 minutes, the grant at most 2 hours, the agent's own key until its session ends, and the upstream keys still never expire, but stay in the gateway.</desc>
+        <text x="20" y="66" class="w-a">API key, agent</text>
+        <text x="20" y="66" class="w-b">Access token</text>
+        <text x="20" y="116" class="w-a">Deploy key</text>
+        <text x="20" y="116" class="w-b">Grant</text>
+        <text x="20" y="166" class="w-a">GitHub, cloud</text>
+        <text x="20" y="166" class="w-b">Agent key</text>
+        <text x="20" y="216" class="w-a">Lab password</text>
+        <text x="20" y="216" class="w-b">Upstream key</text>
+
+        <rect class="bx-i grow w-a" x="220" y="48" width="444" height="26"/><text x="232" y="66" class="t-s t-inv w-a">until I rotate it</text>
+        <rect class="bx-i grow w-a d1" x="220" y="98" width="444" height="26"/><text x="232" y="116" class="t-s t-inv w-a">until I rotate it</text>
+        <rect class="bx-i grow w-a d2" x="220" y="148" width="410" height="26"/><text x="232" y="166" class="t-s t-inv w-a">until it expires or I rotate it</text>
+        <rect class="bx-i grow w-a d3" x="220" y="198" width="444" height="26"/><text x="232" y="216" class="t-s t-inv w-a">until I change it</text>
+
+        <rect class="bx-s grow w-b" x="220" y="48" width="69" height="26"/><text x="297" y="66" class="t-s w-b">about 5 min, DPoP-bound</text>
+        <rect class="bx-s grow w-b d1" x="220" y="98" width="152" height="26"/><text x="380" y="116" class="t-s w-b">2 h at most</text>
+        <rect class="bx-s grow w-b d2" x="220" y="148" width="195" height="26"/><text x="423" y="166" class="t-s w-b">until the session ends</text>
+        <rect class="bx-i grow w-b d3" x="220" y="198" width="444" height="26"/><text x="232" y="216" class="t-s t-inv w-b">no expiry, but only in the gateway</text>
+
+        <line class="ln" x1="220" y1="242" x2="664" y2="242"/>
+        <line class="ln" x1="250" y1="238" x2="250" y2="246"/><text x="250" y="262" text-anchor="middle" class="t-s">1 min</text>
+        <line class="ln" x1="350" y1="238" x2="350" y2="246"/><text x="350" y="262" text-anchor="middle" class="t-s">1 h</text>
+        <line class="ln" x1="450" y1="238" x2="450" y2="246"/><text x="450" y="262" text-anchor="middle" class="t-s">1 day</text>
+        <line class="ln" x1="550" y1="238" x2="550" y2="246"/><text x="550" y="262" text-anchor="middle" class="t-s">1 month</text>
+        <line class="ln" x1="630" y1="238" x2="630" y2="246"/><text x="630" y="262" text-anchor="middle" class="t-s">1 year</text>
+        <text x="664" y="280" text-anchor="end" class="t-s">never →</text>
+      </svg>
+      <svg class="dg dg-n" viewBox="0 0 360 310" role="img" aria-labelledby="f5nt">
+        <title id="f5nt">Lifetime of each credential, today and with grants</title>
+        <text x="10" y="26" class="t-s w-a">API key, agent</text><text x="10" y="26" class="t-s w-b">Access token</text>
+        <text x="10" y="86" class="t-s w-a">Deploy key</text><text x="10" y="86" class="t-s w-b">Grant</text>
+        <text x="10" y="146" class="t-s w-a">GitHub, cloud token</text><text x="10" y="146" class="t-s w-b">Agent key</text>
+        <text x="10" y="206" class="t-s w-a">Lab password</text><text x="10" y="206" class="t-s w-b">Upstream key</text>
+        <rect class="bx-i grow w-a" x="10" y="34" width="340" height="20"/><text x="18" y="48" class="t-s t-inv w-a">until I rotate it</text>
+        <rect class="bx-i grow w-a d1" x="10" y="94" width="340" height="20"/><text x="18" y="108" class="t-s t-inv w-a">until I rotate it</text>
+        <rect class="bx-i grow w-a d2" x="10" y="154" width="320" height="20"/><text x="18" y="168" class="t-s t-inv w-a">until it expires or I rotate it</text>
+        <rect class="bx-i grow w-a d3" x="10" y="214" width="340" height="20"/><text x="18" y="228" class="t-s t-inv w-a">until I change it</text>
+        <rect class="bx-s grow w-b" x="10" y="34" width="78" height="20"/><text x="96" y="48" class="t-s w-b">about 5 min</text>
+        <rect class="bx-s grow w-b d1" x="10" y="94" width="135" height="20"/><text x="153" y="108" class="t-s w-b">2 h at most</text>
+        <rect class="bx-s grow w-b d2" x="10" y="154" width="166" height="20"/><text x="184" y="168" class="t-s w-b">session</text>
+        <rect class="bx-i grow w-b d3" x="10" y="214" width="340" height="20"/><text x="18" y="228" class="t-s t-inv w-b">no expiry, only in the gateway</text>
+        <line class="ln" x1="10" y1="258" x2="350" y2="258"/>
+        <line class="ln" x1="60" y1="254" x2="60" y2="262"/><text x="60" y="278" text-anchor="middle" class="t-s">1 min</text>
+        <line class="ln" x1="130" y1="254" x2="130" y2="262"/><text x="130" y="278" text-anchor="middle" class="t-s">1 h</text>
+        <line class="ln" x1="200" y1="254" x2="200" y2="262"/><text x="200" y="278" text-anchor="middle" class="t-s">1 day</text>
+        <line class="ln" x1="270" y1="254" x2="270" y2="262"/><text x="270" y="278" text-anchor="middle" class="t-s">1 mo</text>
+        <line class="ln" x1="330" y1="254" x2="330" y2="262"/><text x="330" y="278" text-anchor="middle" class="t-s">1 yr</text>
+        <text x="350" y="300" text-anchor="end" class="t-s">never →</text>
+      </svg>
+      <figcaption>Fig. 5 · Lifetimes on a log scale. Today's bars are rough: most of these keys have no expiry date at all. The upstream keys stay long-lived with grants too; what changes is who can read them.</figcaption>
+    </figure>
+    <p>The last bar is the honest part. "No long-lived secrets ever" is not reachable while some services only take static keys. What is reachable: no long-lived secret that an agent can read, and every one that remains in one place, in a list I can see.</p>
+
+    <h2 id="further">Further out</h2>
+    <p>The ideas above I would build. These go further. Some may be bad; I want to think them through anyway.</p>
+    <ul>
+      <li><b>Approve the plan, not each click.</b> At the start of a task the agent sends its plan as a list of <code>authorization_details</code>: push to this branch, open one pull request, call the voice API for at most 40 lines. I approve the plan once. The gateway refuses anything outside it. When the plan changes, the phone shows the difference, like a diff. That is intent in its strongest form: I agree to what the agent means to do before it does it.</li>
+      <li><b>Receipts.</b> Every request through the gateway produces a signed record. Once a week the phone shows what I approved and what happened. A grant that was never used was too wide.</li>
+      <li><b>Rules that grow from approvals.</b> After I approve the same request the fifth time, the phone offers a rule: "Claude Code in a session of mine may push to <code>claude/*</code> branches, for 30 days." A rule that is not used for a month expires.</li>
+      <li><b>Two keys for big actions.</b> A push to <code>main</code>, a deploy, a payment, deleting data: these need a second approval, from a second device or a second person. Like two keys for a safe.</li>
+      <li><b>Tripwires.</b> If no real secrets lie around, any secret that does is bait. Put fake API keys where agents look. Any use of one is an alarm, and the gateway knows which session read it.</li>
+      <li><b>Lending access.</b> A friend's agent needs to read one repository. Their broker sends a request to my phone, and I sign a grant for their agent's key: one repository, read only, a week. No account, no token to revoke later.</li>
+      <li><b>The agent asks better questions.</b> If every request must carry a type, fields and a reason, the agent has to say what it is about to do. That alone may make agents work better on my behalf: a request I can read is also a plan I can correct.</li>
+    </ul>
+
+    <h2 id="first">What I would build first</h2>
+    <p>The smallest version that removes a real key from my machines:</p>
+    <ol>
+      <li><b>The broker.</b> A small daemon with a Unix socket. It reads <code>SO_PEERPIDFD</code>, finds the binary, the script and the systemd unit, and matches requirements from a file. First it only logs, so I can see what my agents actually ask for.</li>
+      <li><b>The phone app.</b> Android, a key in StrongBox that needs my fingerprint, pairing by QR code and a Noise handshake, a relay with push. Templates for three types: <code>git.push</code>, <code>http.call</code> to an API, <code>secret.use</code> for the old keys.</li>
+      <li><b>The gateway.</b> agentgateway on my lab, in front of the GitHub API and the model APIs. It checks the grant as a JWT with the phone's public key; a small service in front checks the DPoP proof. Pushes go out with a GitHub App's installation token, and the voice service's key moves from <code>~/.config</code> into the gateway.</li>
+      <li><b>One agent.</b> Claude Code on the lab, as its own user, with a git credential helper that asks the broker. Then the deploy keys, one by one.</li>
+    </ol>
+    <p>A good test of the design: after step 4, <code>grep -r</code> for keys in the agent's home finds nothing that works.</p>
+
+    <h2 id="left">What it does not solve</h2>
+    <ul>
+      <li><b>A wrong action I approved.</b> If I approve a bad push, the push happens. The design makes the request readable; it cannot make me read it.</li>
+      <li><b>Approval fatigue.</b> Standing grants and plans reduce the number of questions. Whether I still read the twentieth one, I will only know by trying.</li>
+      <li><b>A program that pretends.</b> On a desktop where the agent shares my user, another process can change it while it runs. The identity check is only strong for agents in their own user or sandbox.</li>
+      <li><b>Root, a broken phone, a broken gateway.</b> The broker trusts the kernel. The grant trusts the phone. The upstream keys trust the gateway. Each is one place to protect instead of a hundred, but it is still a place.</li>
+      <li><b>Losing the phone.</b> A second paired device is the clean answer. A paper recovery key in a drawer is the honest one, and it is a long-lived secret again, only one that no program can reach.</li>
+      <li><b>Services with static keys.</b> They stay, in the gateway, until they offer something better.</li>
+    </ul>
+    <p>The same pattern runs through <a href="/thoughts/sealed/">sealed</a>, which keeps the keys in the browser where a script cannot export them. A key that cannot be copied is the thing I trust most. Grants and receipts are how I would extend that trust to agents, one narrow, short promise at a time.</p>
+
+    <h2 id="open">Open questions</h2>
+    <ul>
+      <li>Should the wire format be CIBA, so that an existing identity provider such as Keycloak can be the broker's partner, or is my own small protocol simpler?</li>
+      <li>How do I name and version the request types, so that a template on the phone and a check in the gateway always agree on what a field means?</li>
+      <li>How reliably can a broker identify a script inside Node or Python? Is the package hash enough?</li>
+      <li>Does agentgateway check DPoP proofs, or will it soon?</li>
+      <li>Android's Protected Confirmation would be the right screen for the approval, but it seems to be on its way out. Is a normal screen with a biometric prompt good enough?</li>
+      <li>Is there a way to recover from a lost phone without any long-lived secret at all?</li>
+    </ul>
+
+    <h2 id="start">Starting points</h2>
+    <ul>
+      <li>My own question: can DPoP replace the long-lived passwords, API keys and tokens on my machines, and can a phone approve what my agents may do, over an encrypted link to the Linux machine they run on?</li>
+      <li>How macOS identifies an app by its signature, and whether a Linux broker can do the same.</li>
+      <li>agentgateway, as a place to keep the keys that cannot go away yet <a href="#s28">[28]</a>.</li>
+    </ul>
+
+    <h2 id="sources">Sources</h2>
+    <ol class="refs">
+      <li id="s1">D. Fett, B. Campbell, J. Bradley, T. Lodderstedt, M. Jones, D. Waite: <a href="https://www.rfc-editor.org/rfc/rfc9449" rel="noopener">RFC 9449, OAuth 2.0 Demonstrating Proof of Possession (DPoP)</a>, Sep 2023.</li>
+      <li id="s2">The DPoP specification source, with the proof fields, <code>cnf.jkt</code> and the nonce: <a href="https://github.com/danielfett/draft-dpop/blob/master/main.md" rel="noopener">danielfett/draft-dpop</a>.</li>
+      <li id="s3"><a href="https://www.rfc-editor.org/rfc/rfc8705" rel="noopener">RFC 8705, OAuth 2.0 Mutual-TLS Client Authentication and Certificate-Bound Access Tokens</a>, Feb 2020.</li>
+      <li id="s4">Keycloak: <a href="https://github.com/keycloak/keycloak/tree/main/docs/documentation/release_notes/topics" rel="noopener">release notes 23.0, 24.0 and 26.4</a>.</li>
+      <li id="s5">Spring Security: <a href="https://github.com/spring-projects/spring-security/blob/main/docs/modules/ROOT/pages/servlet/oauth2/resource-server/dpop-tokens.adoc" rel="noopener">OAuth 2.0 DPoP-bound access tokens</a>.</li>
+      <li id="s6">Okta: <a href="https://developer.okta.com/docs/guides/dpop/main" rel="noopener">Configure OAuth 2.0 Demonstrating Proof-of-Possession</a>.</li>
+      <li id="s7">Apple: <a href="https://developer.apple.com/documentation/technotes/tn3127-inside-code-signing-requirements" rel="noopener">TN3127, Inside code signing: requirements</a>.</li>
+      <li id="s8">Apple: <a href="https://developer.apple.com/documentation/security/notarizing-macos-software-before-distribution" rel="noopener">Notarizing macOS software before distribution</a>.</li>
+      <li id="s9">Apple: <a href="https://developer.apple.com/documentation/foundation/nsxpcconnection/setcodesigningrequirement(_:)" rel="noopener">NSXPCConnection setCodeSigningRequirement</a>, macOS 13 and later.</li>
+      <li id="s10">Apple Developer Forums, answers by Apple's developer technical support: <a href="https://developer.apple.com/forums/thread/72881" rel="noopener">thread 72881</a> and <a href="https://developer.apple.com/forums/thread/681053" rel="noopener">thread 681053</a>.</li>
+      <li id="s11">Linux kernel source, <a href="https://github.com/torvalds/linux" rel="noopener">torvalds/linux</a>: <code>SO_PEERPIDFD</code> first in v6.5, <code>pidfd_open</code> in v5.3, fs-verity in v5.4, IMA in v2.6.30.</li>
+      <li id="s12">SPIFFE: <a href="https://github.com/spiffe/spire/blob/main/doc/plugin_agent_workloadattestor_unix.md" rel="noopener">SPIRE agent plugin, Unix workload attestor</a>.</li>
+      <li id="s13">xdg-desktop-portal: <a href="https://github.com/flatpak/xdg-desktop-portal/blob/main/shared/xdp-app-info-flatpak.c" rel="noopener">xdp-app-info-flatpak.c</a>.</li>
+      <li id="s14">BleepingComputer: <a href="https://www.bleepingcomputer.com/news/microsoft/microsoft-enforces-number-matching-to-fight-mfa-fatigue-attacks/" rel="noopener">Microsoft enforces number matching to fight MFA fatigue attacks</a>, May 2023.</li>
+      <li id="s15">W3C: <a href="https://w3c.github.io/secure-payment-confirmation/" rel="noopener">Secure Payment Confirmation</a>.</li>
+      <li id="s16">Android: <a href="https://developer.android.com/privacy-and-security/security-android-protected-confirmation" rel="noopener">Android Protected Confirmation</a>.</li>
+      <li id="s17">T. Lodderstedt, J. Richer, B. Campbell: <a href="https://www.rfc-editor.org/rfc/rfc9396" rel="noopener">RFC 9396, OAuth 2.0 Rich Authorization Requests</a>, May 2023.</li>
+      <li id="s18">OpenID Foundation: <a href="https://openid.net/specs/openid-client-initiated-backchannel-authentication-core-1_0.html" rel="noopener">Client-Initiated Backchannel Authentication Core 1.0</a>, Sep 2021.</li>
+      <li id="s19">Android: <a href="https://developer.android.com/privacy-and-security/keystore" rel="noopener">Android Keystore system</a>.</li>
+      <li id="s20">1Password: <a href="https://www.1password.dev/ssh/agent/authorization" rel="noopener">SSH agent authorization</a>.</li>
+      <li id="s21">Tailscale: <a href="https://tailscale.com/kb/1193/tailscale-ssh" rel="noopener">Tailscale SSH</a>.</li>
+      <li id="s22">KryptCo: <a href="https://github.com/kryptco/kr" rel="noopener">kr</a>, now deprecated in favour of akamai/akr.</li>
+      <li id="s23"><a href="https://www.rfc-editor.org/rfc/rfc8693" rel="noopener">RFC 8693, OAuth 2.0 Token Exchange</a>, Jan 2020.</li>
+      <li id="s24">GitHub Docs: <a href="https://docs.github.com/en/apps/creating-github-apps/authenticating-with-a-github-app/generating-an-installation-access-token-for-a-github-app" rel="noopener">Generating an installation access token for a GitHub App</a>.</li>
+      <li id="s25">Rory Ward, Betsy Beyer: <a href="https://research.google/pubs/pub43231/" rel="noopener">BeyondCorp: a new approach to enterprise security</a>, ;login: 39(6), 2014.</li>
+      <li id="s26"><a href="https://github.com/pomerium/pomerium" rel="noopener">Pomerium</a>.</li>
+      <li id="s27">CyberArk: <a href="https://github.com/cyberark/secretless-broker" rel="noopener">Secretless Broker</a>.</li>
+      <li id="s28"><a href="https://github.com/agentgateway/agentgateway" rel="noopener">agentgateway</a>, its <a href="https://github.com/agentgateway/agentgateway/blob/main/examples/traffic-jwt-sign/README.md" rel="noopener">jwtSign example</a>, and <a href="https://agentgateway.dev/blog/2025-08-25-solo-contributes-agentgateway-to-lf" rel="noopener">Solo.io contributes agentgateway to the Linux Foundation</a>, Aug 2025.</li>
+      <li id="s29">Tailscale: <a href="https://tailscale.com/docs/aperture/what-is-aperture" rel="noopener">What is Aperture</a>.</li>
+      <li id="s30">Trevor Perrin: <a href="https://noiseprotocol.org/noise.html" rel="noopener">The Noise Protocol Framework</a>, revision 34, 2018.</li>
+      <li id="s31"><a href="https://github.com/magic-wormhole/magic-wormhole" rel="noopener">Magic Wormhole</a>.</li>
+      <li id="s32">Android: <a href="https://developer.android.com/privacy-and-security/security-key-attestation" rel="noopener">Verify hardware-backed key pairs with key attestation</a>.</li>
+    </ol>
+    <p class="refs">The dates of the RFCs, CIBA and BeyondCorp, the Okta, 1Password, Tailscale and Microsoft pages <a href="#s6">[6]</a>, <a href="#s14">[14]</a>, <a href="#s20">[20]</a>, <a href="#s21">[21]</a>, <a href="#s29">[29]</a>, and the CIBA <code>binding_message</code> I could check only through search summaries, not on the pages themselves. The rest I read in the source: the specification repositories, the kernel tags, and Apple's and Android's documentation.</p>
+
+    <h2 id="revisions">Revisions</h2>
+    <ul class="dates">
+      <li><time datetime="2026-11-12">12 Nov 2026</time><span>First version.</span></li>
+    </ul>
+
+    <h2 id="feedback">Feedback</h2>
+    <p>Not shared yet. When I post about it, what people answer goes here, with what it changed.</p>
+  </article>
+</div>
+
+</main>
+
+<footer class="foot">
+  <div class="wrap">
+    <span>Tim Conrad</span>
+    <span>No cookies, no trackers, no third-party requests</span>
+  </div>
+</footer>
+
+</body>
+</html>
diff --git a/thoughts/sealed/index.html b/thoughts/sealed/index.html
new file mode 100644
index 0000000..bfb9c8d
--- /dev/null
+++ b/thoughts/sealed/index.html
@@ -0,0 +1,427 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'self'; script-src 'self'; img-src 'self'; font-src 'self'; media-src 'self'; base-uri 'none'; form-action 'none'">
+<title>A private site on public static hosting · Tim Conrad</title>
+<meta name="description" content="sealed puts a whole static site on public hosting in encrypted form. Each reader has their own password, and the browser decrypts every file. What the host sees, how a password opens a file, the service worker, groups and new keys, and the limits.">
+<link rel="canonical" href="https://t7d.dev/thoughts/sealed/">
+<meta property="og:type" content="article">
+<meta property="og:title" content="A private site on public static hosting">
+<meta property="og:description" content="sealed puts a whole static site on public hosting in encrypted form. Each reader has their own password, and the browser decrypts every file. What the host sees, how a password opens a file, the service worker, groups and new keys, and the limits.">
+<meta property="og:url" content="https://t7d.dev/thoughts/sealed/">
+<meta property="og:image" content="https://t7d.dev/assets/og.png">
+<meta property="article:published_time" content="2026-11-10">
+<meta name="twitter:card" content="summary_large_image">
+<link rel="alternate" type="application/rss+xml" title="Tim Conrad · Thoughts" href="/thoughts/feed.xml">
+<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
+<link rel="preload" href="/assets/fonts/barlow-condensed-700.woff2" as="font" type="font/woff2" crossorigin>
+<link rel="stylesheet" href="/assets/site.css">
+<script src="/assets/theme.js"></script>
+<script src="/assets/site.js" defer></script>
+</head>
+<body>
+<a class="skip" href="#main">Skip to content</a>
+
+<header class="nav">
+  <div class="wrap nav__in">
+    <a class="brand" href="/">Tim Conrad</a>
+    <nav class="nav__links" aria-label="Site">
+      <a href="/#games">Games</a>
+      <a href="/thoughts/">Thoughts</a>
+      <a class="opt3" href="/#research">Research</a>
+      <a class="opt2" href="/#verify">PGP key</a>
+      <a class="opt2" href="/#contact">Contact</a>
+    </nav>
+    <button class="toggle" id="theme-toggle" type="button">dark</button>
+  </div>
+</header>
+
+<main id="main" class="wrap">
+
+<header class="post-head">
+  <a class="crumb" href="/thoughts/">← Thoughts</a>
+  <h1>A private site on public static hosting</h1>
+  <p class="sub">sealed puts a whole static site on a public host in encrypted form. Each reader has their own password, and the browser decrypts every file. How it works, in pictures, and what it does not protect.</p>
+  <p class="label">Tim Conrad · Encryption · Static sites · Service workers</p>
+  <dl class="tmeta">
+    <div><dt>Status</dt><dd><span class="status">Draft</span></dd></div>
+    <div><dt>Started</dt><dd><time datetime="2026-11-10">10 Nov 2026</time></dd></div>
+    <div><dt>Last revised</dt><dd><time datetime="2026-11-11">11 Nov 2026</time></dd></div>
+  </dl>
+</header>
+
+<div class="post">
+  <nav class="toc" aria-label="On this page">
+    <p class="label">On this page</p>
+    <ol>
+      <li><a href="#itch">Private, without a server</a></li>
+      <li><a href="#host">What the host sees</a></li>
+      <li><a href="#chain">From password to file</a></li>
+      <li><a href="#worker">The worker in the browser</a></li>
+      <li><a href="#names">Names that stay the same</a></li>
+      <li><a href="#groups">Groups and new keys</a></li>
+      <li><a href="#here">On this site</a></li>
+      <li><a href="#staticrypt">Compared with StatiCrypt</a></li>
+      <li><a href="#limits">What it does not protect</a></li>
+      <li><a href="#start">Starting points</a></li>
+      <li><a href="#sources">Sources</a></li>
+      <li><a href="#revisions">Revisions</a></li>
+      <li><a href="#feedback">Feedback</a></li>
+    </ol>
+  </nav>
+
+  <article class="prose">
+    <h2 id="itch">Private, without a server</h2>
+    <p>Some things I make are for a few people only. The first one is a pen-and-paper game for friends. I wanted it on my own site, next to everything else, but only for the people I give a password to.</p>
+    <p>And I wanted to keep the hosting I have: static files on GitHub Pages, with no server of my own that checks passwords. A static host cannot check anything. It hands every file to whoever asks.</p>
+    <p>So the files themselves have to be locked. sealed is the tool I built for that. It takes a finished static site, encrypts every file, and adds a login page. The host gets ciphertext. The browser of a reader with a password gets the site back, and it works as before <a href="#s1">[1]</a>.</p>
+
+    <h2 id="host">What the host sees</h2>
+    <p>The first question for any design like this: what does the host learn? Switch between the two views.</p>
+    <figure class="fig-wide anim" data-switch="What a reader sees|What the host sees">
+      <svg class="dg dg-w" viewBox="0 0 680 300" role="img" aria-labelledby="f1t f1d">
+        <title id="f1t">The same site, as a reader sees it and as the host sees it</title>
+        <desc id="f1d">A reader sees file names such as index.html, story/chapter-1.html, map.png and theme.mp3, and three users with their groups. The host sees random blob names with the same sizes, a keyring with three entries and no names, and a key index with two groups. The sizes are the same in both views.</desc>
+        <text x="20" y="28" class="t-h w-a">Files</text>
+        <text x="20" y="28" class="t-h w-b">Blobs</text>
+        <text x="330" y="28" text-anchor="end" class="t-h">Size</text>
+        <rect class="bx" x="20" y="40" width="320" height="236"/>
+        <g class="w-a">
+          <text x="36" y="72">index.html</text>
+          <text x="36" y="106">story/chapter-1.html</text>
+          <text x="36" y="140">story/chapter-2.html</text>
+          <text x="36" y="174">style.css</text>
+          <text x="36" y="208">map.png</text>
+          <text x="36" y="242">theme.mp3</text>
+        </g>
+        <g class="w-b">
+          <text x="36" y="72" class="t-s">_sealed/c/3f9a0c71…</text>
+          <text x="36" y="106" class="t-s">_sealed/c/b71e44d2…</text>
+          <text x="36" y="140" class="t-s">_sealed/c/0d2f98a5…</text>
+          <text x="36" y="174" class="t-s">_sealed/c/c94d1237…</text>
+          <text x="36" y="208" class="t-s">_sealed/c/e6c1a30f…</text>
+          <text x="36" y="242" class="t-s">_sealed/c/58ab07e9…</text>
+        </g>
+        <text x="324" y="72" text-anchor="end" class="t-s">4 KB</text>
+        <text x="324" y="106" text-anchor="end" class="t-s">12 KB</text>
+        <text x="324" y="140" text-anchor="end" class="t-s">15 KB</text>
+        <text x="324" y="174" text-anchor="end" class="t-s">6 KB</text>
+        <text x="324" y="208" text-anchor="end" class="t-s">820 KB</text>
+        <text x="324" y="242" text-anchor="end" class="t-s">3.1 MB</text>
+
+        <text x="380" y="28" class="t-h w-a">Readers</text>
+        <text x="380" y="28" class="t-h w-b">Keyring and key index</text>
+        <rect class="bx" x="380" y="40" width="280" height="236"/>
+        <g class="w-a">
+          <text x="396" y="72">Anna</text><text x="644" y="72" text-anchor="end" class="t-s">all, chapter 2</text>
+          <text x="396" y="106">Ben</text><text x="644" y="106" text-anchor="end" class="t-s">all, chapter 2</text>
+          <text x="396" y="140">Cem</text><text x="644" y="140" text-anchor="end" class="t-s">all</text>
+          <text x="396" y="190" class="t-s">each with their own password</text>
+        </g>
+        <g class="w-b">
+          <text x="396" y="72" class="t-s">entry a91f04c2… · sealed</text>
+          <text x="396" y="106" class="t-s">entry 07c3e85b… · sealed</text>
+          <text x="396" y="140" class="t-s">entry 5e2d9a10… · sealed</text>
+          <text x="396" y="190" class="t-s">key 41d0… → manifest (sealed)</text>
+          <text x="396" y="214" class="t-s">key 7c1e… → manifest (sealed)</text>
+        </g>
+        <text x="396" y="256" class="t-s w-a">names, paths, groups: readable</text>
+        <text x="396" y="256" class="t-s w-b">3 entries, 2 groups, no names</text>
+      </svg>
+      <svg class="dg dg-n" viewBox="0 0 360 520" role="img" aria-labelledby="f1nt">
+        <title id="f1nt">The same site, as a reader sees it and as the host sees it</title>
+        <text x="10" y="24" class="t-h w-a">Files</text>
+        <text x="10" y="24" class="t-h w-b">Blobs</text>
+        <text x="350" y="24" text-anchor="end" class="t-h">Size</text>
+        <rect class="bx" x="10" y="36" width="340" height="226"/>
+        <g class="w-a">
+          <text x="24" y="66">index.html</text>
+          <text x="24" y="98">story/chapter-1.html</text>
+          <text x="24" y="130">story/chapter-2.html</text>
+          <text x="24" y="162">style.css</text>
+          <text x="24" y="194">map.png</text>
+          <text x="24" y="226">theme.mp3</text>
+        </g>
+        <g class="w-b">
+          <text x="24" y="66" class="t-s">_sealed/c/3f9a0c71…</text>
+          <text x="24" y="98" class="t-s">_sealed/c/b71e44d2…</text>
+          <text x="24" y="130" class="t-s">_sealed/c/0d2f98a5…</text>
+          <text x="24" y="162" class="t-s">_sealed/c/c94d1237…</text>
+          <text x="24" y="194" class="t-s">_sealed/c/e6c1a30f…</text>
+          <text x="24" y="226" class="t-s">_sealed/c/58ab07e9…</text>
+        </g>
+        <text x="336" y="66" text-anchor="end" class="t-s">4 KB</text>
+        <text x="336" y="98" text-anchor="end" class="t-s">12 KB</text>
+        <text x="336" y="130" text-anchor="end" class="t-s">15 KB</text>
+        <text x="336" y="162" text-anchor="end" class="t-s">6 KB</text>
+        <text x="336" y="194" text-anchor="end" class="t-s">820 KB</text>
+        <text x="336" y="226" text-anchor="end" class="t-s">3.1 MB</text>
+        <text x="10" y="302" class="t-h w-a">Readers</text>
+        <text x="10" y="302" class="t-h w-b">Keyring and key index</text>
+        <rect class="bx" x="10" y="314" width="340" height="196"/>
+        <g class="w-a">
+          <text x="24" y="344">Anna</text><text x="336" y="344" text-anchor="end" class="t-s">all, chapter 2</text>
+          <text x="24" y="376">Ben</text><text x="336" y="376" text-anchor="end" class="t-s">all, chapter 2</text>
+          <text x="24" y="408">Cem</text><text x="336" y="408" text-anchor="end" class="t-s">all</text>
+          <text x="24" y="450" class="t-s">each with their own password</text>
+        </g>
+        <g class="w-b">
+          <text x="24" y="344" class="t-s">entry a91f04c2… · sealed</text>
+          <text x="24" y="376" class="t-s">entry 07c3e85b… · sealed</text>
+          <text x="24" y="408" class="t-s">entry 5e2d9a10… · sealed</text>
+          <text x="24" y="444" class="t-s">key 41d0… → manifest (sealed)</text>
+          <text x="24" y="468" class="t-s">key 7c1e… → manifest (sealed)</text>
+        </g>
+        <text x="24" y="496" class="t-s w-a">names, paths, groups: readable</text>
+        <text x="24" y="496" class="t-s w-b">3 entries, 2 groups, no names</text>
+      </svg>
+      <figcaption>Fig. 1 · The host keeps the sizes, the number of files, the number of keyring entries and the number of groups. It loses every name, path and word. An example site; the names and sizes are made up.</figcaption>
+    </figure>
+    <p>Besides the blobs, the host serves a login page, a small script, a keyring and a key index. None of them holds a name or a path. That is the whole promise, and it is also the first limit: a picture of 820 KB stays a file of about 820 KB, and anyone can count the readers.</p>
+
+    <h2 id="chain">From password to file</h2>
+    <p>Each reader types a name and a password. From those two things alone, the browser finds the right keys. Step through it.</p>
+    <figure class="fig-wide" data-steps>
+      <svg class="dg dg-w" viewBox="0 0 760 250" role="img" aria-labelledby="f2t f2d">
+        <title id="f2t">From a name and a password to a decrypted file</title>
+        <desc id="f2d">The name and the password give a master secret through a slow function. The master gives an entry key and an entry id for this site. The id finds the reader's entry in the public keyring, and the entry key opens it. The entry holds the keys of the reader's groups. Each group key opens the manifest of its group, which maps paths to blob names. The browser fetches the blob and decrypts the file.</desc>
+        <g data-step="1"><rect class="bx" x="20" y="40" width="165" height="70"/><text x="34" y="62" class="t-s">1</text><text x="34" y="84" class="t-h">Name, password</text><text x="34" y="102" class="t-s">typed at the login</text></g>
+        <g data-step="2"><line class="ln" x1="185" y1="75" x2="198" y2="75"/><polygon class="arr" points="198,70 206,75 198,80"/><rect class="bx" x="205" y="40" width="165" height="70"/><text x="219" y="62" class="t-s">2</text><text x="219" y="84" class="t-h">Master</text><text x="219" y="102" class="t-s">slow on purpose</text></g>
+        <g data-step="3"><line class="ln" x1="370" y1="75" x2="383" y2="75"/><polygon class="arr" points="383,70 391,75 383,80"/><rect class="bx" x="390" y="40" width="165" height="70"/><text x="404" y="62" class="t-s">3</text><text x="404" y="84" class="t-h">Entry key and id</text><text x="404" y="102" class="t-s">a pair per site</text></g>
+        <g data-step="4"><line class="ln" x1="555" y1="75" x2="568" y2="75"/><polygon class="arr" points="568,70 576,75 568,80"/><rect class="bx" x="575" y="40" width="165" height="70"/><text x="589" y="62" class="t-s">4</text><text x="589" y="84" class="t-h">Keyring entry</text><text x="589" y="102" class="t-s">public, but sealed</text></g>
+        <g data-step="5"><line class="ln" x1="657" y1="110" x2="657" y2="142"/><polygon class="arr" points="652,142 657,150 662,142"/><rect class="bx" x="575" y="150" width="165" height="70"/><text x="589" y="172" class="t-s">5</text><text x="589" y="194" class="t-h">Group keys</text><text x="589" y="212" class="t-s">one per group</text></g>
+        <g data-step="6"><line class="ln" x1="575" y1="185" x2="562" y2="185"/><polygon class="arr" points="562,180 554,185 562,190"/><rect class="bx" x="390" y="150" width="165" height="70"/><text x="404" y="172" class="t-s">6</text><text x="404" y="194" class="t-h">Manifest</text><text x="404" y="212" class="t-s">path → blob name</text></g>
+        <g data-step="7"><line class="ln" x1="390" y1="185" x2="377" y2="185"/><polygon class="arr" points="377,180 369,185 377,190"/><rect class="bx-i" x="205" y="150" width="165" height="70"/><text x="219" y="172" class="t-s t-inv">7</text><text x="219" y="194" class="t-h t-inv">The file</text><text x="219" y="212" class="t-s t-inv">opened in the browser</text></g>
+      </svg>
+      <svg class="dg dg-n" viewBox="0 0 360 416" role="img" aria-labelledby="f2nt">
+        <title id="f2nt">From a name and a password to a decrypted file</title>
+        <g data-step="1"><rect class="bx" x="10" y="10" width="340" height="46"/><text x="24" y="39" class="t-s">1</text><text x="46" y="39" class="t-h">Name, password</text><text x="336" y="39" text-anchor="end" class="t-s">typed at the login</text></g>
+        <g data-step="2"><line class="ln" x1="180" y1="56" x2="180" y2="61"/><polygon class="arr" points="175,61 180,68 185,61"/><rect class="bx" x="10" y="68" width="340" height="46"/><text x="24" y="97" class="t-s">2</text><text x="46" y="97" class="t-h">Master</text><text x="336" y="97" text-anchor="end" class="t-s">slow on purpose</text></g>
+        <g data-step="3"><line class="ln" x1="180" y1="114" x2="180" y2="119"/><polygon class="arr" points="175,119 180,126 185,119"/><rect class="bx" x="10" y="126" width="340" height="46"/><text x="24" y="155" class="t-s">3</text><text x="46" y="155" class="t-h">Entry key and id</text><text x="336" y="155" text-anchor="end" class="t-s">a pair per site</text></g>
+        <g data-step="4"><line class="ln" x1="180" y1="172" x2="180" y2="177"/><polygon class="arr" points="175,177 180,184 185,177"/><rect class="bx" x="10" y="184" width="340" height="46"/><text x="24" y="213" class="t-s">4</text><text x="46" y="213" class="t-h">Keyring entry</text><text x="336" y="213" text-anchor="end" class="t-s">public, but sealed</text></g>
+        <g data-step="5"><line class="ln" x1="180" y1="230" x2="180" y2="235"/><polygon class="arr" points="175,235 180,242 185,235"/><rect class="bx" x="10" y="242" width="340" height="46"/><text x="24" y="271" class="t-s">5</text><text x="46" y="271" class="t-h">Group keys</text><text x="336" y="271" text-anchor="end" class="t-s">one per group</text></g>
+        <g data-step="6"><line class="ln" x1="180" y1="288" x2="180" y2="293"/><polygon class="arr" points="175,293 180,300 185,293"/><rect class="bx" x="10" y="300" width="340" height="46"/><text x="24" y="329" class="t-s">6</text><text x="46" y="329" class="t-h">Manifest</text><text x="336" y="329" text-anchor="end" class="t-s">path → blob name</text></g>
+        <g data-step="7"><line class="ln" x1="180" y1="346" x2="180" y2="351"/><polygon class="arr" points="175,351 180,358 185,351"/><rect class="bx-i" x="10" y="358" width="340" height="46"/><text x="24" y="387" class="t-s t-inv">7</text><text x="46" y="387" class="t-h t-inv">The file</text><text x="336" y="387" text-anchor="end" class="t-s t-inv">opened in the browser</text></g>
+      </svg>
+      <div class="steps__panel">
+        <ol class="steps__list">
+          <li>The reader types a name and a password on the login page. Nothing is sent anywhere.</li>
+          <li>The browser turns them into a master secret with a function that is slow on purpose: 600,000 rounds (PBKDF2). A right guess costs the same as a wrong one, so guessing many passwords is expensive. When I set a password, my admin page does the same in my browser, and the server keeps only the master, never the password.</li>
+          <li>From the master, a fast function (HKDF) makes two values for this one site: a key for the reader's entry, and the entry's id. Another site gives another pair, so two keyrings do not show that they share a reader.</li>
+          <li>The keyring is a public file. The id finds the reader's entry, and the key opens it. A wrong name or password gives an id that is not there, so it finds nothing.</li>
+          <li>The entry holds the keys of the groups the reader may open. The browser hands them to its worker, which keeps them where they cannot be read out again.</li>
+          <li>The key index says which manifest belongs to which group key. A manifest, opened with its group key, maps each path of the site to the name of its blob.</li>
+          <li>When the page asks for a path, the worker fetches that blob and decrypts it (AES-256-GCM). The page gets the plain file.</li>
+        </ol>
+      </div>
+      <figcaption>Fig. 2 · Seven steps, all in the browser. Only steps 1 and 2 are slow, and they run once at the login.</figcaption>
+    </figure>
+    <p>The words, for those who want them: the slow step is PBKDF2 with SHA-256, the split into entry key and id is HKDF, and every file, entry and manifest is sealed with AES-256-GCM. All three come with the browser (WebCrypto). sealed has no other dependency <a href="#s2">[2]</a>.</p>
+
+    <h2 id="worker">The worker in the browser</h2>
+    <p>A site is many files: pages, pictures, sound. If each page had to decrypt its own pictures, every app would need to change. sealed puts a service worker in between: a small script that the browser runs beside the page and that answers the page's requests <a href="#s2">[2]</a>.</p>
+    <figure class="fig-wide anim">
+      <svg class="dg dg-w" viewBox="0 0 680 250" role="img" aria-labelledby="f3t f3d">
+        <title id="f3t">A request through the service worker</title>
+        <desc id="f3d">The page asks for map.png. The service worker looks up the blob name, asks the host for the blob, gets ciphertext back, decrypts it with the group key and answers the page with the picture.</desc>
+        <rect class="bx" x="20" y="80" width="150" height="100"/>
+        <text x="36" y="108" class="t-h">Page</text>
+        <text x="36" y="130" class="t-s">the app, as before</text>
+        <rect class="bx-i" x="265" y="46" width="150" height="168"/>
+        <text x="281" y="76" class="t-h t-inv">Worker</text>
+        <text x="340" y="137" text-anchor="middle" class="t-s t-inv">decrypts</text>
+        <text x="281" y="182" class="t-s t-inv">holds the keys,</text>
+        <text x="281" y="202" class="t-s t-inv">cannot export them</text>
+        <rect class="bx" x="510" y="80" width="150" height="100"/>
+        <text x="526" y="108" class="t-h">Host</text>
+        <text x="526" y="130" class="t-s">ciphertext only</text>
+        <line class="ln" x1="170" y1="112" x2="257" y2="112"/><polygon class="arr" points="257,107 265,112 257,117"/>
+        <text x="217" y="102" text-anchor="middle" class="t-s">map.png</text>
+        <line class="ln" x1="415" y1="112" x2="502" y2="112"/><polygon class="arr" points="502,107 510,112 502,117"/>
+        <text x="462" y="102" text-anchor="middle" class="t-s">e6c1a30f…</text>
+        <line class="ln" x1="510" y1="152" x2="423" y2="152"/><polygon class="arr" points="423,147 415,152 423,157"/>
+        <text x="462" y="174" text-anchor="middle" class="t-s">ciphertext</text>
+        <line class="ln" x1="265" y1="152" x2="178" y2="152"/><polygon class="arr" points="178,147 170,152 178,157"/>
+        <text x="217" y="174" text-anchor="middle" class="t-s">picture</text>
+        <circle class="dot" r="6"><animateMotion dur="6s" repeatCount="indefinite" path="M170 112 H510 V152 H170 Z"/></circle>
+        <text x="20" y="232" class="t-s">The page never sees a key, and the host never sees a name.</text>
+      </svg>
+      <svg class="dg dg-n" viewBox="0 0 360 440" role="img" aria-labelledby="f3nt">
+        <title id="f3nt">A request through the service worker</title>
+        <rect class="bx" x="80" y="10" width="200" height="60"/>
+        <text x="180" y="36" text-anchor="middle" class="t-h">Page</text>
+        <text x="180" y="56" text-anchor="middle" class="t-s">the app, as before</text>
+        <rect class="bx-i" x="80" y="150" width="200" height="110"/>
+        <text x="180" y="176" text-anchor="middle" class="t-h t-inv">Worker</text>
+        <text x="180" y="200" text-anchor="middle" class="t-s t-inv">decrypts,</text>
+        <text x="180" y="220" text-anchor="middle" class="t-s t-inv">holds the keys,</text>
+        <text x="180" y="240" text-anchor="middle" class="t-s t-inv">cannot export them</text>
+        <rect class="bx" x="80" y="340" width="200" height="60"/>
+        <text x="180" y="366" text-anchor="middle" class="t-h">Host</text>
+        <text x="180" y="386" text-anchor="middle" class="t-s">ciphertext only</text>
+        <line class="ln" x1="98" y1="70" x2="98" y2="142"/><polygon class="arr" points="93,142 98,150 103,142"/>
+        <text x="90" y="114" text-anchor="end" class="t-s">map.png</text>
+        <line class="ln" x1="98" y1="260" x2="98" y2="332"/><polygon class="arr" points="93,332 98,340 103,332"/>
+        <text x="90" y="304" text-anchor="end" class="t-s">e6c1a30f…</text>
+        <line class="ln" x1="262" y1="340" x2="262" y2="268"/><polygon class="arr" points="257,268 262,260 267,268"/>
+        <text x="270" y="304" class="t-s">ciphertext</text>
+        <line class="ln" x1="262" y1="150" x2="262" y2="78"/><polygon class="arr" points="257,78 262,70 267,78"/>
+        <text x="270" y="114" class="t-s">picture</text>
+        <circle class="dot" r="6"><animateMotion dur="6s" repeatCount="indefinite" path="M98 70 V340 H262 V70 Z"/></circle>
+        <text x="10" y="430" class="t-s">The page never sees a key, the host never a name.</text>
+      </svg>
+      <figcaption>Fig. 3 · One request. The worker sits between the page and the host and answers every request of the site.</figcaption>
+    </figure>
+    <p>What the worker does besides that, in plain words <a href="#s2">[2]</a>:</p>
+    <ul>
+      <li><b>The keys stay put.</b> They are stored in the browser as keys that cannot be exported. A script can ask the browser to use them, but cannot read them out.</li>
+      <li><b>Sound and video work.</b> A player asks for a file in many small pieces. The worker keeps recently opened files in memory, so it does not decrypt the whole file again for each piece.</li>
+      <li><b>Offline works.</b> If a site allows it, the worker downloads the files after the login, all but sound and video, and keeps them in the browser's cache, still encrypted.</li>
+      <li><b>A new version keeps you logged in.</b> On each page load the worker reads the key index again. As long as the reader's keys are still in it, the new files open with the old keys.</li>
+      <li><b>Logout</b> deletes the keys from the browser.</li>
+    </ul>
+
+    <h2 id="names">Names that stay the same</h2>
+    <p>Every blob gets its name from three things: the key of its group, its path and its content. Only someone with the key can work out which name belongs to which path. Without the key, the names look random <a href="#s2">[2]</a>.</p>
+    <p>The same three things always give the same name. So a file that did not change keeps its name from one version to the next. That has two good effects: a browser that already has it in its cache does not download it again, and on GitHub only the files that really changed show up as changed.</p>
+    <p>The name is also bound into the encryption of the blob. If the host swapped two blobs, the browser would refuse to decrypt both.</p>
+
+    <h2 id="groups">Groups and new keys</h2>
+    <p>A site can have groups: for example one for everything, and one for a chapter that only some readers get. Each file belongs to exactly one group, and each group has its own key. A reader's entry holds the keys of their groups <a href="#s1">[1]</a>. Switch to see what happens when a reader loses a group.</p>
+    <figure class="fig-wide anim" data-switch="Before|Ben loses chapter 2">
+      <svg class="dg dg-w" viewBox="0 0 680 270" role="img" aria-labelledby="f4t f4d">
+        <title id="f4t">Taking a reader out of a group gives that group a new key</title>
+        <desc id="f4d">Three readers and two groups. Anna and Ben have both groups, Cem has only "all". When Ben loses chapter 2, chapter 2 gets a new key and its files are encrypted again. Anna logs in once more and gets the new key. Ben keeps "all". His old key for chapter 2 is no longer in the key index, so his browser forgets it.</desc>
+        <text x="250" y="40" text-anchor="middle" class="t-h">all</text>
+        <text x="360" y="40" text-anchor="middle" class="t-h">chapter 2</text>
+        <line class="ln-s" x1="40" y1="56" x2="420" y2="56"/>
+        <text x="40" y="94">Anna</text>
+        <text x="40" y="144">Ben</text>
+        <text x="40" y="194">Cem</text>
+        <circle class="dot" cx="250" cy="88" r="9"/>
+        <circle class="dot" cx="250" cy="138" r="9"/>
+        <circle class="dot" cx="250" cy="188" r="9"/>
+        <circle class="dot" cx="360" cy="88" r="9"/>
+        <circle class="dot fade off-b" cx="360" cy="138" r="9"/>
+        <circle class="bx" cx="360" cy="188" r="9"/>
+        <line class="ln-s" x1="40" y1="216" x2="420" y2="216"/>
+        <text x="250" y="244" text-anchor="middle" class="t-s">key 41d0…</text>
+        <text x="360" y="244" text-anchor="middle" class="t-s w-a">key 7c1e…</text>
+        <text x="360" y="244" text-anchor="middle" class="t-s w-b">new key 2e9b…</text>
+        <rect class="bx" x="460" y="56" width="200" height="160"/>
+        <g class="w-a">
+          <text x="476" y="86" class="t-s">Three readers,</text>
+          <text x="476" y="108" class="t-s">two groups.</text>
+          <text x="476" y="140" class="t-s">Each entry holds the</text>
+          <text x="476" y="162" class="t-s">keys of its groups.</text>
+        </g>
+        <g class="w-b">
+          <text x="476" y="86" class="t-s">chapter 2: new key,</text>
+          <text x="476" y="108" class="t-s">its files sealed again.</text>
+          <text x="476" y="140" class="t-s">Anna logs in once more.</text>
+          <text x="476" y="162" class="t-s">Ben keeps "all".</text>
+          <text x="476" y="194" class="t-s">Cem: nothing changes.</text>
+        </g>
+      </svg>
+      <svg class="dg dg-n" viewBox="0 0 360 400" role="img" aria-labelledby="f4nt">
+        <title id="f4nt">Taking a reader out of a group gives that group a new key</title>
+        <text x="190" y="30" text-anchor="middle" class="t-h">all</text>
+        <text x="290" y="30" text-anchor="middle" class="t-h">chapter 2</text>
+        <line class="ln-s" x1="10" y1="44" x2="350" y2="44"/>
+        <text x="10" y="80">Anna</text>
+        <text x="10" y="124">Ben</text>
+        <text x="10" y="168">Cem</text>
+        <circle class="dot" cx="190" cy="74" r="9"/>
+        <circle class="dot" cx="190" cy="118" r="9"/>
+        <circle class="dot" cx="190" cy="162" r="9"/>
+        <circle class="dot" cx="290" cy="74" r="9"/>
+        <circle class="dot fade off-b" cx="290" cy="118" r="9"/>
+        <circle class="bx" cx="290" cy="162" r="9"/>
+        <line class="ln-s" x1="10" y1="188" x2="350" y2="188"/>
+        <text x="190" y="214" text-anchor="middle" class="t-s">key 41d0…</text>
+        <text x="290" y="214" text-anchor="middle" class="t-s w-a">key 7c1e…</text>
+        <text x="290" y="214" text-anchor="middle" class="t-s w-b">new 2e9b…</text>
+        <rect class="bx" x="10" y="240" width="340" height="150"/>
+        <g class="w-a">
+          <text x="26" y="270" class="t-s">Three readers, two groups.</text>
+          <text x="26" y="296" class="t-s">Each entry holds the keys</text>
+          <text x="26" y="318" class="t-s">of its groups.</text>
+        </g>
+        <g class="w-b">
+          <text x="26" y="270" class="t-s">chapter 2: new key, its files</text>
+          <text x="26" y="292" class="t-s">sealed again.</text>
+          <text x="26" y="320" class="t-s">Anna logs in once more.</text>
+          <text x="26" y="344" class="t-s">Ben keeps "all".</text>
+          <text x="26" y="368" class="t-s">Cem: nothing changes.</text>
+        </g>
+      </svg>
+      <figcaption>Fig. 4 · A group keeps its key from version to version, so readers stay logged in. Only taking a reader out of a group, or a "new key" by hand, makes a new one. The readers are an example.</figcaption>
+    </figure>
+    <p>Why a new key at all? Ben's browser still has the old key of chapter 2. Without a new key, he could keep opening the new files of chapter 2. With it, his old key is not in the key index any more, and his browser forgets it <a href="#s1">[1]</a>.</p>
+    <p>A new password is different. It changes only the reader's entry, not the group keys. Devices that are logged in stay logged in. To log a reader out everywhere, I take away the access, or make a new key.</p>
+
+    <h2 id="here">On this site</h2>
+    <p>A sealed site can live on its own host, or in a folder below another site. On t7d.dev, sealed sites go below <code>/sealed/</code>, with a login page in the look of this site. Each folder has its own worker, its own key store and its own cache, so several sealed sites can share one address without seeing each other's keys <a href="#s1">[1]</a>.</p>
+    <p>You can try it: <a href="/sealed/demo/">the demo</a> is a small site with a picture, a sound and a bonus page. Log in as <code>reader</code> with the password <code>open-the-demo</code>, or as <code>member</code> with <code>open-the-bonus</code>; only <code>member</code> can open the bonus page. The demo protects nothing: its passwords and keys are public on purpose. A workflow in the sealed repository builds it and publishes it here after each change <a href="#s1">[1]</a>.</p>
+    <p>The deploy of this site and the publishing of sealed each replace only their own part of the branch that GitHub Pages serves, so they do not overwrite each other. Search engines are asked to stay out of <code>/sealed/</code>.</p>
+
+    <h2 id="staticrypt">Compared with StatiCrypt</h2>
+    <p>I am not the first to encrypt static pages. StatiCrypt is the best-known tool: it encrypts an HTML file with a password and returns a page with a password prompt. It also uses AES-256 and 600,000 rounds of PBKDF2, the number OWASP recommends <a href="#s3">[3]</a> <a href="#s4">[4]</a>. For one page and one password it is simpler than sealed.</p>
+    <p>What I needed beyond that:</p>
+    <ul>
+      <li><b>Every file, not only HTML.</b> Pictures, sound and video are encrypted too, and stream through the worker.</li>
+      <li><b>A password per reader.</b> StatiCrypt has one password per page; its README suggests a workaround for several users <a href="#s3">[3]</a>. In sealed each reader has their own, and I can take one away without changing the others.</li>
+      <li><b>Groups.</b> Different readers can open different parts of one site.</li>
+      <li><b>No changes to the app.</b> The site is built as a normal static site, and the worker makes it work behind the login, offline too.</li>
+    </ul>
+    <p>The price is more moving parts: a build, a worker, and an admin page that keeps the keys.</p>
+
+    <h2 id="limits">What it does not protect</h2>
+    <p>These are the limits I know of. They are in the README, and they belong here too <a href="#s1">[1]</a>.</p>
+    <ul>
+      <li><b>Guessing passwords offline.</b> The keyring is public. Anyone can copy it and try passwords on their own computer, as fast as their hardware allows. The slow step makes each try expensive, but only a long password makes guessing hopeless. That is why sealed generates the passwords.</li>
+      <li><b>Old keyrings stay in the history.</b> On GitHub Pages the published files are in a public repository, with all of their history. After a password change, the old keyring is still there, and so is everything it opens.</li>
+      <li><b>A reader can copy what they opened.</b> Once a file is decrypted in a browser, it can be saved. A new key protects the next version only.</li>
+      <li><b>Permissions work per file.</b> If one file holds the content of all groups, every reader who gets that file can read all of it. The site has to be split into files along the groups.</li>
+      <li><b>Sizes and counts show.</b> The number of files, their sizes, the number of readers and the number of groups are visible.</li>
+      <li><b>Static sites only.</b> An app with its own server needs something else. And the app cannot bring its own service worker, because sealed's worker takes that place.</li>
+      <li><b>A delay on GitHub Pages.</b> It caches files for up to ten minutes, so a new password or a new group can take that long to work there.</li>
+    </ul>
+
+    <h2 id="start">Starting points</h2>
+    <ul>
+      <li>My own need: put a game for a few friends on my public site, each friend with their own password, on static hosting without a server.</li>
+    </ul>
+
+    <h2 id="sources">Sources</h2>
+    <ol class="refs">
+      <li id="s1">sealed, README. My own tool, in a private repository; read on 11 Nov 2026, with the changes for the demo.</li>
+      <li id="s2">sealed, the crypto core, the service worker and the build (<code>client/core.js</code>, <code>client/sw.js</code>, <code>lib/build.mjs</code>), same commit.</li>
+      <li id="s3">Robin Moisson: <a href="https://github.com/robinmoisson/staticrypt" rel="noopener">StatiCrypt</a>, README, read at the commit of 8 Jun 2026.</li>
+      <li id="s4">OWASP: <a href="https://cheatsheetseries.owasp.org/cheatsheets/Password_Storage_Cheat_Sheet.html#pbkdf2" rel="noopener">Password Storage Cheat Sheet, PBKDF2</a>, as cited by StatiCrypt.</li>
+    </ol>
+
+    <h2 id="revisions">Revisions</h2>
+    <ul class="dates">
+      <li><time datetime="2026-11-11">11 Nov 2026</time><span>Added the demo below <code>/sealed/demo/</code>, with its public passwords.</span></li>
+      <li><time datetime="2026-11-10">10 Nov 2026</time><span>First version.</span></li>
+    </ul>
+
+    <h2 id="feedback">Feedback</h2>
+    <p>Not shared yet. When I post about it, what people answer goes here, with what it changed.</p>
+  </article>
+</div>
+
+</main>
+
+<footer class="foot">
+  <div class="wrap">
+    <span>Tim Conrad</span>
+    <span>No cookies, no trackers, no third-party requests</span>
+  </div>
+</footer>
+
+</body>
+</html>