diff --git a/COPY.md b/COPY.md
index 9f4f6c00..91fe377a 100644
--- a/COPY.md
+++ b/COPY.md
@@ -42,6 +42,7 @@ These exact strings. Do not paraphrase them per page.
 | Nav: demos | Skill Demos | guidance only: the header link after Trending Skills, and the same item in the mobile menu. Links `/skills/demos` |
 | Demos link | All {n} demos | guidance only: under the homepage demo section. Links `/skills/demos` |
 | Demos page | See what skills make · Each demo is one recorded run: the prompt, and what the Agent built with the Skill. Pick a prompt to see the output, or open it live. | guidance only: the `/skills/demos` H1 and line. The meta title is "Claude skill examples: see what each one makes" for the admitted query |
+| Demo page | What /{name} made · One recorded run: the prompt, and what the Agent built with the Skill. | guidance only: the H1 and line of a demo page, `/skills/demos/<owner>/<repo>/<name>`. The meta title is "{name} skill example: {noun}" for the query "<skill> skill example", with `noun` from `DEMO_GROUPS`. The meta description is "{agent} made this {noun} with the /{name} skill from one prompt: “{prompt}”", cut at a word to 160 characters |
 | Demo groups | Films and launch videos · Landing pages · UI components · Diagrams and explainers | guidance only: `DEMO_GROUPS` in `shared/demo-groups.ts`: the `/skills/demos` group headings and their lines |
 | Demo stage | Open the demo | guidance only: the homepage demo stage link to the Skill page Demo panel |
 | Demo panel | Demo · Prompt · Open live demo · Open in a new tab · Run it yourself | guidance only: the Skill page Demo panel. "Show screenshots" replaces "Open live demo" while the live output shows |
diff --git a/GLOSSARY.md b/GLOSSARY.md
index fe98bd98..39b5b234 100644
--- a/GLOSSARY.md
+++ b/GLOSSARY.md
@@ -92,7 +92,7 @@ Collisions
 
 **Is:** one recorded run of a Skill: a fixed prompt, the output an Agent made with the Skill, and how it was recorded (Agent, model, Skill commit, date). A human approves each one before it ships.
 
-**Use for:** the Demo panel on the Skill page, the homepage demo section, and "live demo" for the sandboxed output page.
+**Use for:** the Demo panel on the Skill page, the homepage demo section, a demo page at `/skills/demos/<owner>/<repo>/<name>`, and "live demo" for the sandboxed output page.
 
 **Never:** example output, showcase, sample. Preview names the step of watching a demo, never the demo itself.
 
diff --git a/layers/marketing/app/pages/skills/demos.vue b/layers/marketing/app/pages/skills/demos/[...demo].vue
similarity index 52%
rename from layers/marketing/app/pages/skills/demos.vue
rename to layers/marketing/app/pages/skills/demos/[...demo].vue
index f90993c0..4b59b91a 100644
--- a/layers/marketing/app/pages/skills/demos.vue
+++ b/layers/marketing/app/pages/skills/demos/[...demo].vue
@@ -1,23 +1,34 @@
 <script setup lang="ts">
 import type { HomeDemoItem } from '~~/app/utils/home-demos'
+import { setResponseHeaders } from 'h3'
 import { demoKey } from '~~/app/utils/home-demos'
 import { resolveAuthorName } from '~~/app/utils/skill-byline'
-import { groupDemos } from '#shared/demo-groups'
+import { demoNoun, groupDemos } from '#shared/demo-groups'
+import { demoPagePath, DEMOS_PATH, MIN_INDEXABLE_DEMOS, parseDemoRoute } from '#shared/demo-pages'
 import { githubAvatarProxyUrl } from '#shared/image-proxy'
-import { pageRobots } from '../../utils/page-admissions'
+import { pageRobots } from '../../../utils/page-admissions'
 
 /**
  * Every demo, in the board shell `/skills/trending` uses. The rail lists the
- * demos under what each Skill makes; the stage shows the picked one in full:
- * its prompt, its output, and the Skill's run command. A pick lands in the URL
- * as `?demo=owner/repo/name`, so a shared link opens on it.
+ * demos under what each Skill makes; the stage shows one in full: its prompt,
+ * its output, and the Skill's run command. `/skills/demos` stages the rail's
+ * first demo. Each demo also has its own page at
+ * `/skills/demos/<owner>/<repo>/<name>`, which the rail links to.
  *
  * Indexable surface (VISION principle 2): the target query and admission bar
- * live in `page-admissions.ts`. Below MIN_INDEXABLE_DEMOS the page answers
- * noindex, the same guard `/skills/best` uses. Cull path: remove the
- * admission entry, and the page goes noindex on the next deploy.
+ * live in `page-admissions.ts`, and every demo page reads the `/skills/demos`
+ * entry. Below MIN_INDEXABLE_DEMOS every page answers noindex, the same guard
+ * `/skills/best` uses. Cull path: remove the admission entry, and the pages go
+ * noindex and leave the sitemap on the next deploy.
  */
 
+definePageMeta({
+  // One board for every demo, so the rail keeps its place and only the stage swaps.
+  key: 'skill-demos',
+  // Moving between demos keeps the scroll position. Arriving from another page starts at the top.
+  scrollToTop: (to, from) => to.name !== from.name,
+})
+
 // `await`, as on the other /skills pages: the server must render the demos.
 const { data } = await useFetch<{ items: HomeDemoItem[] }>('/api/skill-demos', { key: 'skill-demos-page' })
 
@@ -25,64 +36,90 @@ const demos = computed(() => data.value?.items ?? [])
 const groups = computed(() => groupDemos(demos.value))
 
 const route = useRoute()
-const sharedKey = typeof route.query.demo === 'string' ? route.query.demo : undefined
+const demoRoute = computed(() => parseDemoRoute(route.params.demo))
+
+function findDemo(key: string): HomeDemoItem | undefined {
+  return demos.value.find(demo => demoKey(demo).toLowerCase() === key.toLowerCase())
+}
 
-// The rail's first demo leads unless a shared link names another.
-const firstDemo = computed(() => groups.value[0]?.demos[0])
-const picked = ref(sharedKey ?? (firstDemo.value ? demoKey(firstDemo.value) : ''))
-const current = computed(() => demos.value.find(demo => demoKey(demo) === picked.value) ?? firstDemo.value)
+// Before demo pages, a pick lived in the query as `?demo=owner/repo/name`. A shared link moves to the demo page.
+const legacyKey = typeof route.query.demo === 'string' ? route.query.demo : undefined
+const legacyDemo = demoRoute.value._tag === 'index' && legacyKey ? findDemo(legacyKey) : undefined
+if (legacyDemo)
+  await navigateTo(demoPagePath(legacyDemo), { redirectCode: 301, replace: true })
+
+/** The demo this URL names; undefined on the board, and on a path that names no shown demo. */
+const pageDemo = computed(() => demoRoute.value._tag === 'demo' ? findDemo(demoRoute.value.key) : undefined)
+
+const missing = computed(() => demoRoute.value._tag === 'invalid' || (demoRoute.value._tag === 'demo' && !pageDemo.value))
+watch(missing, (isMissing) => {
+  if (!isMissing)
+    return
+  // A 404 must not enter the edge cache the demo pages share.
+  const event = import.meta.server ? useRequestEvent() : undefined
+  if (event)
+    setResponseHeaders(event, { 'cloudflare-cdn-cache-control': 'no-store', 'cache-control': 'private, no-store' })
+  showError(createError({ statusCode: 404, statusMessage: 'Unknown demo' }))
+}, { immediate: true })
+
+// The board stages the rail's first demo.
+const current = computed(() => pageDemo.value ?? groups.value[0]?.demos[0])
 const currentKey = computed(() => current.value ? demoKey(current.value) : '')
 
 const stage = useTemplateRef<HTMLElement>('stage')
 const wide = useMediaQuery('(min-width: 64rem)')
 const reducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)')
 
-/** Shows the demo, keeps it in the URL, and on narrow screens brings the stage into view. */
-function pick(demo: HomeDemoItem) {
-  picked.value = demoKey(demo)
+/** On narrow screens the stage sits under the rail, so a pick brings it into view. */
+function revealStage() {
   if (!wide.value)
     stage.value?.scrollIntoView({ block: 'start', behavior: reducedMotion.value ? 'auto' : 'smooth' })
-  return navigateTo({ query: { ...route.query, demo: demoKey(demo) }, hash: route.hash }, { replace: true })
 }
 
 function author(demo: HomeDemoItem): string {
   return resolveAuthorName(demo.owner, demo.authorName) ?? demo.owner
 }
 
-/** Below this many demos the page is too thin to index. */
-const MIN_INDEXABLE_DEMOS = 6
+/** Cuts text at a word to fit a meta description. */
+function clip(text: string, max: number): string {
+  if (text.length <= max)
+    return text
+  return `${text.slice(0, text.lastIndexOf(' ', max - 1))}…`
+}
 
-const title = 'Claude skill examples: see what each one makes'
-const description = computed(() =>
-  `${demos.value.length} recorded runs of agent skills: the prompt, and the film, page, component or diagram the Agent made with the Skill. Open any of them live.`,
-)
+const pageTitle = computed(() => pageDemo.value
+  ? `${pageDemo.value.name} skill example: ${demoNoun(pageDemo.value.makes)}`
+  : 'Claude skill examples: see what each one makes')
+const pageDescription = computed(() => pageDemo.value
+  ? clip(`${pageDemo.value.agent} made this ${demoNoun(pageDemo.value.makes)} with the /${pageDemo.value.name} skill from one prompt: “${pageDemo.value.prompt}”`, 160)
+  : `${demos.value.length} recorded runs of agent skills: the prompt, and the film, page, component or diagram the Agent made with the Skill. Open any of them live.`)
+const canonicalPath = computed(() => pageDemo.value ? demoPagePath(pageDemo.value) : DEMOS_PATH)
 
 useSeoMeta({
-  title,
-  description,
-  ogTitle: title,
-  ogDescription: description,
-  robots: () => demos.value.length >= MIN_INDEXABLE_DEMOS ? pageRobots('/skills/demos') : 'noindex,follow',
+  title: pageTitle,
+  description: pageDescription,
+  ogTitle: pageTitle,
+  ogDescription: pageDescription,
+  robots: () => demos.value.length >= MIN_INDEXABLE_DEMOS ? pageRobots(DEMOS_PATH) : 'noindex,follow',
 })
 
 useHead({
-  link: [{ rel: 'canonical', href: 'https://skilld.dev/skills/demos' }],
+  link: [{ rel: 'canonical', href: () => `https://skilld.dev${canonicalPath.value}` }],
 })
 
-defineOgImage('Page.takumi', {
-  title: 'See what skills make',
-  description: 'Recorded runs of agent skills: the prompt, and what the Agent made.',
-}, { alt: 'Skill demos on skilld' })
+defineOgImage('Page.takumi', pageDemo.value
+  ? { title: `What /${pageDemo.value.name} made`, description: clip(pageDemo.value.prompt, 120) }
+  : { title: 'See what skills make', description: 'Recorded runs of agent skills: the prompt, and what the Agent made.' }, { alt: pageDemo.value ? `What /${pageDemo.value.name} made, on skilld` : 'Skill demos on skilld' })
 </script>
 
 <template>
   <BoardShell heading-id="demos-heading" surface="demos" :show-weekly-cta="false" :cta-pending="false">
     <template #header>
       <h1 id="demos-heading" class="text-3xl font-semibold tracking-tight text-balance">
-        See what skills make
+        {{ pageDemo ? `What /${pageDemo.name} made` : 'See what skills make' }}
       </h1>
       <p class="mt-2 text-sm text-muted">
-        Each demo is one recorded run: the prompt, and what the Agent built with the Skill.
+        {{ pageDemo ? 'One recorded run: the prompt, and what the Agent built with the Skill.' : 'Each demo is one recorded run: the prompt, and what the Agent built with the Skill.' }}
       </p>
     </template>
 
@@ -94,12 +131,11 @@ defineOgImage('Page.takumi', {
           </h2>
           <ul class="list-none p-0">
             <li v-for="demo in group.demos" :key="demoKey(demo)">
-              <button
-                type="button"
+              <NuxtLink
+                :to="demoPagePath(demo)"
                 class="demos-rail__pick"
-                :aria-pressed="demoKey(demo) === currentKey"
-                aria-controls="demos-stage"
-                @click="() => pick(demo)"
+                :aria-current="demoKey(demo) !== currentKey ? undefined : pageDemo ? 'page' : 'true'"
+                @click="revealStage"
               >
                 <span class="demos-rail__dot" aria-hidden="true" />
                 <img
@@ -115,7 +151,7 @@ defineOgImage('Page.takumi', {
                   <span class="demos-rail__name">/{{ demo.name }}</span>
                   <span class="demos-rail__by">{{ author(demo) }}</span>
                 </span>
-              </button>
+              </NuxtLink>
             </li>
           </ul>
         </section>
@@ -172,7 +208,7 @@ defineOgImage('Page.takumi', {
   outline-offset: 2px;
 }
 
-.demos-rail__pick[aria-pressed='true'] {
+.demos-rail__pick[aria-current] {
   background: var(--ui-bg-muted);
 }
 
@@ -184,7 +220,7 @@ defineOgImage('Page.takumi', {
   background: var(--ui-border-accented);
 }
 
-.demos-rail__pick[aria-pressed='true'] .demos-rail__dot {
+.demos-rail__pick[aria-current] .demos-rail__dot {
   background: var(--ui-primary);
 }
 
diff --git a/layers/marketing/app/utils/page-admissions.ts b/layers/marketing/app/utils/page-admissions.ts
index 7fa1d897..a941800d 100644
--- a/layers/marketing/app/utils/page-admissions.ts
+++ b/layers/marketing/app/utils/page-admissions.ts
@@ -59,7 +59,7 @@ export const FREEZE_AUDIT_PATHS: readonly string[] = [
 export const PAGE_ADMISSIONS: Readonly<Record<string, PageAdmission>> = {
   '/skills/demos': {
     targetQuery: 'claude skills examples',
-    admissionBar: '720 searches a month, KD 32. NuxtSEO research keywords, 2026-10-06. Holds only demos a human approved by merging, and renders noindex below six. Review at the 2026-11-11 gate.',
+    admissionBar: '720 searches a month, KD 32. NuxtSEO research keywords, 2026-10-06. Holds only demos a human approved by merging, and renders noindex below six. Covers each demo page, `/skills/demos/<owner>/<repo>/<name>`, which targets "<skill> skill example" (owner-approved 2026-10-07; volume not measured). Review at the 2026-11-11 gate.',
   },
   '/compare/humanize-writing-skills': {
     targetQuery: 'best humanizer skill for claude',
diff --git a/layers/registry/server/api/__sitemap__/demos.ts b/layers/registry/server/api/__sitemap__/demos.ts
new file mode 100644
index 00000000..7246b783
--- /dev/null
+++ b/layers/registry/server/api/__sitemap__/demos.ts
@@ -0,0 +1,11 @@
+import { fetchFlaggedSkillKeys } from '#shared/server/run-check-flags'
+import { listDemoSitemapEntries } from '../../utils/skill-demos'
+
+/**
+ * `/skills/demos` and every demo page the board shows. The pages sitemap
+ * excludes `/skills/**`, so without this source the pages would be indexable
+ * but never announced. nuxt.config lists this sitemap only while
+ * `page-admissions.ts` admits `/skills/demos`.
+ */
+export default defineSitemapEventHandler(async () =>
+  listDemoSitemapEntries(await fetchFlaggedSkillKeys('demos-sitemap')))
diff --git a/layers/registry/server/api/skill-demos/index.get.ts b/layers/registry/server/api/skill-demos/index.get.ts
index 9c98d782..4a507892 100644
--- a/layers/registry/server/api/skill-demos/index.get.ts
+++ b/layers/registry/server/api/skill-demos/index.get.ts
@@ -1,26 +1,22 @@
 import type { SkillDemoView } from '../../utils/skill-demos'
-import { runCheckFlagKey } from '#shared/run-check-flags'
 import { defineApiHandler } from '#shared/server/handler'
 import { fetchFlaggedSkillKeys } from '#shared/server/run-check-flags'
-import { listSkillDemos, presentSkillDemo } from '../../utils/skill-demos'
+import { listShownSkillDemos, presentSkillDemo } from '../../utils/skill-demos'
 
 export interface SkillDemoListResponse {
   items: SkillDemoView[]
 }
 
 /**
- * Every published demo, newest first, for the homepage demo section and
- * `/skills/demos`. The manifest ships with the build. A demo whose Skill holds
- * a run check flag stays out until a check passes: a visitor who watches it
- * would copy a run command that fails. The list reads no D1 row of its own,
- * so it never knows the current commit and marks nothing outdated; the Skill
- * page does that.
+ * Every shown demo, newest first, for the homepage demo section,
+ * `/skills/demos`, and each demo page. The manifest ships with the build. The
+ * list reads no D1 row of its own, so it never knows the current commit and
+ * marks nothing outdated; the Skill page does that.
  */
 export default defineApiHandler({
   handler: async ({ event }) => {
     setHeader(event, 'Cache-Control', 'public, max-age=300, s-maxage=3600')
-    const flagged = await fetchFlaggedSkillKeys('skill-demos')
-    return listSkillDemos().filter(demo => !flagged.has(runCheckFlagKey(demo.owner, demo.repo, demo.name)))
+    return listShownSkillDemos(await fetchFlaggedSkillKeys('skill-demos'))
   },
   presenter: (demos): SkillDemoListResponse => ({
     items: demos.map(demo => presentSkillDemo(demo, null)),
diff --git a/layers/registry/server/data/skill-demos.json b/layers/registry/server/data/skill-demos.json
index 3b2b2032..50858231 100644
--- a/layers/registry/server/data/skill-demos.json
+++ b/layers/registry/server/data/skill-demos.json
@@ -137,6 +137,37 @@
         }
       ]
     },
+    {
+      "owner": "emilkowalski",
+      "repo": "skills",
+      "name": "apple-design",
+      "makes": "ui-component",
+      "authorName": "Emil Kowalski",
+      "sourceUrl": "https://github.com/emilkowalski/skills/blob/main/skills/apple-design/SKILL.md",
+      "prompt": "Build sheet.html: a draggable bottom sheet for Hollowmere, a fictional trail-map app. It snaps to three heights, carries the speed of a flick, rubber-bands past its edges, and can be grabbed mid-motion. Inline all CSS and JavaScript.",
+      "agent": "Claude Code",
+      "agentVersion": "2.1.292",
+      "model": "claude-opus-5-5",
+      "skillCommit": "85e8e2363b713506e1d5b6e07a0eb2da66be1bc3",
+      "recordedAt": "2026-10-07",
+      "outputFile": "sheet.html",
+      "shots": [
+        {
+          "file": "desktop-9e7faf5dab.jpg",
+          "width": 1440,
+          "height": 900,
+          "viewport": "desktop",
+          "alt": "Desktop screenshot of the page the Agent built for: Build sheet.html: a draggable bottom sheet for Hollowmere, a fictional trail-map app. It snaps to three heights, carries"
+        },
+        {
+          "file": "mobile-602c340f70.jpg",
+          "width": 390,
+          "height": 844,
+          "viewport": "mobile",
+          "alt": "Phone screenshot of the page the Agent built for: Build sheet.html: a draggable bottom sheet for Hollowmere, a fictional trail-map app. It snaps to three heights, carries"
+        }
+      ]
+    },
     {
       "owner": "emilkowalski",
       "repo": "skills",
@@ -360,6 +391,45 @@
       ],
       "pin": 2
     },
+    {
+      "owner": "leonxlnx",
+      "repo": "taste-skill",
+      "name": "taste-skill",
+      "makes": "landing-page",
+      "authorName": "Leon Lin",
+      "sourceUrl": "https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md",
+      "prompt": "Build a landing page for Marrowgate, a fictional sleeper-train company that runs overnight routes between six mountain towns. Don't stop to ask me questions; make the design calls yourself. Save it as one self-contained index.html with all CSS and JavaScript inline.",
+      "agent": "Claude Code",
+      "agentVersion": "2.1.292",
+      "model": "claude-opus-5-5",
+      "skillCommit": "3c7017d636c3a4aad378433ea6d0cfa6c921da4a",
+      "recordedAt": "2026-10-07",
+      "outputFile": "index.html",
+      "shots": [
+        {
+          "file": "desktop-55e6bf594a.jpg",
+          "width": 1440,
+          "height": 6000,
+          "viewport": "desktop",
+          "alt": "Desktop screenshot of the page the Agent built for: Build a landing page for Marrowgate, a fictional sleeper-train company that runs overnight routes between six mountain t",
+          "poster": {
+            "file": "desktop-poster-bff8fbec94.jpg",
+            "height": 900
+          }
+        },
+        {
+          "file": "mobile-239dae4144.jpg",
+          "width": 390,
+          "height": 6000,
+          "viewport": "mobile",
+          "alt": "Phone screenshot of the page the Agent built for: Build a landing page for Marrowgate, a fictional sleeper-train company that runs overnight routes between six mountain t",
+          "poster": {
+            "file": "mobile-poster-b509149d32.jpg",
+            "height": 844
+          }
+        }
+      ]
+    },
     {
       "owner": "ntcoding",
       "repo": "claude-skillz",
@@ -399,6 +469,34 @@
         }
       ]
     },
+    {
+      "owner": "nutlope",
+      "repo": "hallmark",
+      "name": "hallmark",
+      "makes": "landing-page",
+      "authorName": "Hassan El Mghari",
+      "sourceUrl": "https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md",
+      "prompt": "Build a landing page for Quillmoor, a fictional reading-log app for book clubs that tracks who finished which chapter. Don't stop to ask me questions; make the design calls yourself. Save it as one self-contained index.html with all CSS and JavaScript inline.",
+      "agent": "Claude Code",
+      "agentVersion": "2.1.292",
+      "model": "claude-opus-5-5",
+      "skillCommit": "f5f4a2ceb0ff302f2e69fb33679501611eadee32",
+      "recordedAt": "2026-10-07",
+      "outputFile": "index.html",
+      "shots": [
+        {
+          "file": "desktop-5b1f7fd33f.jpg",
+          "width": 1440,
+          "height": 2577,
+          "viewport": "desktop",
+          "alt": "Desktop screenshot of the page the Agent built for: Build a landing page for Quillmoor, a fictional reading-log app for book clubs that tracks who finished which chapter. D",
+          "poster": {
+            "file": "desktop-poster-1e21101a33.jpg",
+            "height": 900
+          }
+        }
+      ]
+    },
     {
       "owner": "pbakaus",
       "repo": "impeccable",
@@ -482,6 +580,65 @@
         }
       ]
     },
+    {
+      "owner": "tt-a1i",
+      "repo": "archify",
+      "name": "archify",
+      "makes": "diagram",
+      "authorName": null,
+      "sourceUrl": "https://github.com/tt-a1i/archify/blob/main/archify/SKILL.md",
+      "prompt": "Draw an architecture diagram for Ferncastle, a fictional library app: phone app, API gateway, auth service, catalog service, holds queue, search index, Postgres, and push notifier. Show how a book reservation flows through it. Save it as one self-contained diagram.html with all CSS and JavaScript inline.",
+      "agent": "Claude Code",
+      "agentVersion": "2.1.292",
+      "model": "claude-opus-5-5",
+      "skillCommit": "67c47c119ece23e3640692bbf10b333f49d14c71",
+      "recordedAt": "2026-10-07",
+      "outputFile": "diagram.html",
+      "shots": [
+        {
+          "file": "desktop-35a0f40375.jpg",
+          "width": 1440,
+          "height": 933,
+          "viewport": "desktop",
+          "alt": "Desktop screenshot of the page the Agent built for: Draw an architecture diagram for Ferncastle, a fictional library app: phone app, API gateway, auth service, catalog serv",
+          "poster": {
+            "file": "desktop-poster-9575d21ad9.jpg",
+            "height": 900
+          }
+        }
+      ]
+    },
+    {
+      "owner": "unclecatvn",
+      "repo": "agent-skills",
+      "name": "flow-diagram",
+      "makes": "diagram",
+      "authorName": "Hoai Nam",
+      "sourceUrl": "https://github.com/unclecatvn/agent-skills/blob/main/skills/flow-diagram/SKILL.md",
+      "prompt": "Write it in English, and don't stop to ask me questions. Draw an interactive flow diagram for Sleetgarden, a fictional photo-sharing app: how one uploaded photo becomes three thumbnails, through the upload API, virus scan, resize queue, image workers, object storage, and CDN, including what happens when a resize fails. Save it as one self-contained flow.html with all CSS and JavaScript inline.",
+      "agent": "Claude Code",
+      "agentVersion": "2.1.292",
+      "model": "claude-opus-5-5",
+      "skillCommit": "148f0b19b29df6dfede6bae1f17681569154538b",
+      "recordedAt": "2026-10-07",
+      "outputFile": "flow.html",
+      "shots": [
+        {
+          "file": "desktop-4d9c4e413c.jpg",
+          "width": 1440,
+          "height": 900,
+          "viewport": "desktop",
+          "alt": "Desktop screenshot of the page the Agent built for: Write it in English, and don't stop to ask me questions. Draw an interactive flow diagram for Sleetgarden, a fictional p"
+        },
+        {
+          "file": "mobile-6d86281bde.jpg",
+          "width": 390,
+          "height": 844,
+          "viewport": "mobile",
+          "alt": "Phone screenshot of the page the Agent built for: Write it in English, and don't stop to ask me questions. Draw an interactive flow diagram for Sleetgarden, a fictional p"
+        }
+      ]
+    },
     {
       "owner": "zarazhangrui",
       "repo": "frontend-slides",
diff --git a/layers/registry/server/demos/emilkowalski/skills/apple-design/sheet.html b/layers/registry/server/demos/emilkowalski/skills/apple-design/sheet.html
new file mode 100644
index 00000000..4c1dd332
--- /dev/null
+++ b/layers/registry/server/demos/emilkowalski/skills/apple-design/sheet.html
@@ -0,0 +1,738 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<meta name="color-scheme" content="light dark">
+<title>Hollowmere — Trails</title>
+<style>
+  :root {
+    --land: #e8e4d4;
+    --land-2: #dcd8c3;
+    --contour: rgba(120, 104, 70, 0.22);
+    --water: #b9d3d6;
+    --water-edge: #9cbfc3;
+    --forest: #c9d6b4;
+    --ink: #1d1f1a;
+    --ink-2: rgba(29, 31, 26, 0.64);
+    --ink-3: rgba(29, 31, 26, 0.42);
+    --material: rgba(250, 249, 244, 0.72);
+    --material-edge: rgba(255, 255, 255, 0.55);
+    --fill: rgba(29, 31, 26, 0.06);
+    --fill-press: rgba(29, 31, 26, 0.11);
+    --separator: rgba(29, 31, 26, 0.09);
+    --accent: #2f6f5e;
+    --shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 -12px 40px rgba(30, 28, 20, 0.16);
+    --scrim: #12140f;
+    --sheet-h: 100vh;
+    font: 100%/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
+    -webkit-font-smoothing: antialiased;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --land: #22251f;
+      --land-2: #1c1f1a;
+      --contour: rgba(200, 190, 150, 0.12);
+      --water: #1d3236;
+      --water-edge: #2a4549;
+      --forest: #263022;
+      --ink: #f1efe6;
+      --ink-2: rgba(241, 239, 230, 0.68);
+      --ink-3: rgba(241, 239, 230, 0.45);
+      --material: rgba(34, 36, 31, 0.72);
+      --material-edge: rgba(255, 255, 255, 0.10);
+      --fill: rgba(241, 239, 230, 0.08);
+      --fill-press: rgba(241, 239, 230, 0.14);
+      --separator: rgba(241, 239, 230, 0.10);
+      --accent: #7cc7ae;
+      --shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 -12px 40px rgba(0, 0, 0, 0.45);
+      --scrim: #000;
+    }
+  }
+
+  * { box-sizing: border-box; }
+  html, body { margin: 0; height: 100%; overflow: hidden; }
+  body {
+    background: var(--land);
+    color: var(--ink);
+    overscroll-behavior: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+  button { font: inherit; color: inherit; }
+
+  /* ---------- Map ---------- */
+  .map {
+    position: fixed;
+    inset: 0;
+    transform-origin: 50% 0;
+    will-change: transform;
+  }
+  .map svg { width: 100%; height: 100%; display: block; }
+  .map .land { fill: var(--land); }
+  .map .forest { fill: var(--forest); }
+  .map .contour { fill: none; stroke: var(--contour); stroke-width: 1; }
+  .map .water { fill: var(--water); stroke: var(--water-edge); stroke-width: 1.5; }
+  .map .water-label { fill: var(--water-edge); font: italic 600 11px system-ui, sans-serif; letter-spacing: 0.24em; }
+  .map .trail {
+    fill: none;
+    stroke-width: 3.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-dasharray: 1 7;
+    transition: opacity 200ms ease, stroke-width 200ms ease;
+  }
+  .map .trail-base { fill: none; stroke: var(--land); stroke-width: 7; stroke-linecap: round; opacity: 0.8; }
+  .map.has-selection .trail:not(.is-selected) { opacity: 0.25; }
+  .map .trail.is-selected { stroke-width: 5; stroke-dasharray: none; }
+  .map .pin circle { stroke: var(--land); stroke-width: 2.5; }
+  .map .pin text { fill: var(--ink); font: 600 10px system-ui, sans-serif; paint-order: stroke; stroke: var(--land); stroke-width: 3px; }
+
+  .scrim {
+    position: fixed;
+    inset: 0;
+    background: var(--scrim);
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  /* Floating map controls ride on top of the sheet until it covers the map */
+  .controls {
+    position: fixed;
+    right: 12px;
+    top: 0;
+    display: flex;
+    flex-direction: column;
+    border-radius: 12px;
+    overflow: hidden;
+    background: var(--material);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    backdrop-filter: blur(20px) saturate(180%);
+    box-shadow: 0 0 0 0.5px var(--separator), 0 4px 16px rgba(0, 0, 0, 0.12);
+    will-change: transform, opacity;
+  }
+  .controls button {
+    width: 44px;
+    height: 44px;
+    display: grid;
+    place-items: center;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    transition: background-color 100ms ease-out;
+  }
+  .controls button + button { border-top: 0.5px solid var(--separator); }
+  .controls button:active { background: var(--fill-press); }
+  .controls svg { width: 20px; height: 20px; stroke: var(--accent); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+
+  /* ---------- Sheet ---------- */
+  .sheet {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    margin: 0 auto;
+    max-width: 600px;
+    /* Extra 200px below the fold so rubber-banding upward never reveals a gap */
+    height: calc(var(--sheet-h) + 200px);
+    padding-bottom: 200px;
+    display: flex;
+    flex-direction: column;
+    border-radius: 14px 14px 0 0;
+    background: var(--material);
+    -webkit-backdrop-filter: blur(30px) saturate(180%);
+    backdrop-filter: blur(30px) saturate(180%);
+    box-shadow: var(--shadow), inset 0 1px 0 var(--material-edge);
+    touch-action: none;
+    user-select: none;
+    -webkit-user-select: none;
+    will-change: transform;
+    transform: translate3d(0, 100vh, 0);
+  }
+
+  .sheet-header {
+    flex: none;
+    padding: 0 16px 12px;
+    cursor: grab;
+  }
+  .sheet.is-dragging, .sheet.is-dragging .sheet-header { cursor: grabbing; }
+
+  .grabber {
+    display: block;
+    width: 100%;
+    height: 22px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: inherit;
+  }
+  .grabber::before {
+    content: "";
+    display: block;
+    width: 36px;
+    height: 5px;
+    margin: 6px auto 0;
+    border-radius: 3px;
+    background: var(--ink-3);
+    transition: transform 100ms ease-out, background-color 100ms ease-out;
+  }
+  .grabber:active::before { transform: scaleX(1.15); background: var(--ink-2); }
+  .grabber:focus-visible { outline: none; }
+  .grabber:focus-visible::before { box-shadow: 0 0 0 3px var(--accent); }
+
+  .search {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    height: 40px;
+    padding: 0 12px;
+    border-radius: 11px;
+    background: var(--fill);
+    color: var(--ink-2);
+  }
+  .search svg { flex: none; width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
+  .search input {
+    flex: 1;
+    min-width: 0;
+    border: 0;
+    background: transparent;
+    font: inherit;
+    font-size: 1.0625rem;
+    color: var(--ink);
+    outline: none;
+  }
+  .search input::placeholder { color: var(--ink-2); }
+
+  .summary {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    margin-top: 14px;
+  }
+  .summary h1 {
+    margin: 0;
+    font-size: 1.375rem;
+    line-height: 1.15;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+  }
+  .summary span { font-size: 0.8125rem; color: var(--ink-2); letter-spacing: 0.01em; font-weight: 500; }
+
+  .scroller {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+    padding: 0 16px 24px;
+    overscroll-behavior: contain;
+  }
+  .sheet.is-full .scroller { overflow-y: auto; touch-action: pan-y; }
+
+  .section-title {
+    margin: 18px 4px 8px;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--ink-2);
+  }
+
+  .list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    border-radius: 12px;
+    background: var(--fill);
+    overflow: hidden;
+  }
+  .trail-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    width: 100%;
+    padding: 12px 14px;
+    border: 0;
+    background: transparent;
+    text-align: left;
+    cursor: pointer;
+    transition: background-color 100ms ease-out, transform 100ms ease-out;
+  }
+  .list li + li .trail-row { box-shadow: inset 0 0.5px 0 var(--separator); }
+  .trail-row:active { background: var(--fill-press); }
+  .sheet.is-dragging .trail-row:active { background: transparent; }
+  .trail-row[aria-pressed="true"] { background: var(--fill-press); }
+  .trail-row:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
+  .swatch {
+    flex: none;
+    width: 36px;
+    height: 36px;
+    border-radius: 9px;
+    display: grid;
+    place-items: center;
+    color: #fff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+  }
+  .trail-row .meta { flex: 1; min-width: 0; }
+  .trail-row strong { display: block; font-size: 1rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; }
+  .trail-row small { display: block; font-size: 0.8125rem; color: var(--ink-2); line-height: 1.35; }
+  .trail-row .dist { font-size: 0.9375rem; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
+
+  .conditions {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 8px;
+  }
+  .stat {
+    padding: 12px;
+    border-radius: 12px;
+    background: var(--fill);
+  }
+  .stat b { display: block; font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
+  .stat small { font-size: 0.75rem; color: var(--ink-2); letter-spacing: 0.01em; }
+  .note { margin: 12px 4px 0; font-size: 0.875rem; color: var(--ink-2); line-height: 1.5; }
+
+  .visually-hidden {
+    position: absolute; width: 1px; height: 1px; overflow: hidden;
+    clip: rect(0 0 0 0); white-space: nowrap;
+  }
+  .safe-probe { position: fixed; top: 0; height: env(safe-area-inset-top, 0px); width: 0; visibility: hidden; }
+
+  @media (prefers-reduced-transparency: reduce) {
+    :root { --material: var(--land-2); }
+    .sheet, .controls { -webkit-backdrop-filter: none; backdrop-filter: none; }
+  }
+  @media (prefers-contrast: more) {
+    :root { --material: var(--land); --ink-2: var(--ink); }
+    .sheet, .controls { -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 0 0 1.5px var(--ink); }
+  }
+</style>
+</head>
+<body>
+<span class="safe-probe" aria-hidden="true"></span>
+
+<div class="map" id="map" aria-hidden="true">
+  <svg viewBox="0 0 400 820" preserveAspectRatio="xMidYMid slice">
+    <rect class="land" width="400" height="820"/>
+    <path class="forest" d="M-20 80 C60 40 140 90 170 160 C200 230 120 290 40 270 C-10 258 -30 180 -20 80Z"/>
+    <path class="forest" d="M260 520 C330 480 420 520 430 600 C440 690 360 720 300 690 C240 660 220 560 260 520Z"/>
+    <g>
+      <path class="contour" d="M230 60 C300 40 360 90 350 150 C340 210 270 230 230 190 C190 150 170 80 230 60Z"/>
+      <path class="contour" d="M235 80 C285 66 330 100 324 146 C318 190 268 204 240 176 C212 148 196 92 235 80Z"/>
+      <path class="contour" d="M245 102 C275 94 302 116 298 142 C294 170 266 176 250 160 C234 144 224 108 245 102Z"/>
+      <path class="contour" d="M258 122 C272 118 284 128 282 140 C280 152 266 156 259 148 C252 140 248 125 258 122Z"/>
+      <path class="contour" d="M20 560 C90 520 170 560 160 640 C150 720 60 740 20 700 C-20 660 -40 600 20 560Z"/>
+      <path class="contour" d="M36 584 C90 556 146 588 138 642 C130 696 70 708 42 680 C14 652 0 610 36 584Z"/>
+      <path class="contour" d="M56 610 C88 594 120 614 114 644 C108 674 76 680 60 664 C44 648 36 622 56 610Z"/>
+      <path class="contour" d="M-10 330 C80 300 120 360 210 340 C300 320 340 280 420 300"/>
+      <path class="contour" d="M-10 352 C80 324 124 384 212 364 C300 344 344 304 420 324"/>
+      <path class="contour" d="M-10 760 C100 730 200 780 300 750 C350 735 390 740 420 750"/>
+    </g>
+    <path class="water" d="M120 380 C170 350 260 360 290 410 C320 460 300 520 240 540 C180 560 110 540 90 490 C72 444 84 404 120 380Z"/>
+    <text class="water-label" x="140" y="458">HOLLOWMERE</text>
+
+    <g id="trails">
+      <path class="trail-base" d="M90 490 C60 430 70 330 140 280 C200 240 260 260 262 140"/>
+      <path class="trail" data-trail="lantern" stroke="#d98a2b" d="M90 490 C60 430 70 330 140 280 C200 240 260 260 262 140"/>
+      <path class="trail-base" d="M290 410 C340 390 370 330 340 260 C320 210 340 150 300 100"/>
+      <path class="trail" data-trail="greywater" stroke="#4f8fa8" d="M290 410 C340 390 370 330 340 260 C320 210 340 150 300 100"/>
+      <path class="trail-base" d="M240 540 C250 590 290 610 320 640 C350 670 330 720 360 760"/>
+      <path class="trail" data-trail="moss" stroke="#5c9a52" d="M240 540 C250 590 290 610 320 640 C350 670 330 720 360 760"/>
+      <path class="trail-base" d="M110 540 C90 590 60 610 76 640 C92 670 120 700 90 760"/>
+      <path class="trail" data-trail="cinder" stroke="#c4574f" d="M110 540 C90 590 60 610 76 640 C92 670 120 700 90 760"/>
+      <path class="trail-base" d="M120 380 C80 360 40 330 30 270 C20 200 60 140 40 60"/>
+      <path class="trail" data-trail="fen" stroke="#8a6cc0" d="M120 380 C80 360 40 330 30 270 C20 200 60 140 40 60"/>
+    </g>
+
+    <g class="pin"><circle cx="262" cy="140" r="6" fill="#d98a2b"/><text x="274" y="136">Lanternfall</text></g>
+    <g class="pin"><circle cx="300" cy="100" r="6" fill="#4f8fa8"/><text x="250" y="88">Greywater Ridge</text></g>
+    <g class="pin"><circle cx="76" cy="640" r="6" fill="#c4574f"/><text x="88" y="644">Cinder Hollow</text></g>
+    <g class="pin"><circle cx="40" cy="60" r="6" fill="#8a6cc0"/><text x="52" y="64">Fen Gate</text></g>
+  </svg>
+</div>
+<div class="scrim" id="scrim"></div>
+
+<div class="controls" id="controls">
+  <button type="button" aria-label="Map layers">
+    <svg viewBox="0 0 24 24"><path d="M12 3 3 8l9 5 9-5-9-5Z"/><path d="m3 13 9 5 9-5"/></svg>
+  </button>
+  <button type="button" aria-label="Show my location">
+    <svg viewBox="0 0 24 24"><path d="M20 4 4 11l7 2 2 7 7-16Z"/></svg>
+  </button>
+</div>
+
+<section class="sheet" id="sheet" aria-label="Trails near Hollowmere">
+  <div class="sheet-header" id="header">
+    <button class="grabber" id="grabber" type="button" aria-controls="sheet"></button>
+    <label class="search">
+      <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="m16 16 4 4"/></svg>
+      <span class="visually-hidden">Search trails</span>
+      <input type="search" placeholder="Search Hollowmere" autocomplete="off">
+    </label>
+    <div class="summary">
+      <h1>Trails nearby</h1>
+      <span>5 open · 1 closed</span>
+    </div>
+  </div>
+
+  <div class="scroller" id="scroller">
+    <ul class="list" id="list">
+      <li><button class="trail-row" type="button" data-trail="lantern" aria-pressed="false">
+        <span class="swatch" style="background:#d98a2b">LF</span>
+        <span class="meta"><strong>Lanternfall Loop</strong><small>Moderate · 410 m gain · lakeshore to the old beacon</small></span>
+        <span class="dist">6.2 km</span>
+      </button></li>
+      <li><button class="trail-row" type="button" data-trail="greywater" aria-pressed="false">
+        <span class="swatch" style="background:#4f8fa8">GR</span>
+        <span class="meta"><strong>Greywater Ridge</strong><small>Hard · 720 m gain · exposed above the treeline</small></span>
+        <span class="dist">9.8 km</span>
+      </button></li>
+      <li><button class="trail-row" type="button" data-trail="moss" aria-pressed="false">
+        <span class="swatch" style="background:#5c9a52">MS</span>
+        <span class="meta"><strong>Mossbank Steps</strong><small>Easy · 120 m gain · boardwalk through the alders</small></span>
+        <span class="dist">3.1 km</span>
+      </button></li>
+      <li><button class="trail-row" type="button" data-trail="fen" aria-pressed="false">
+        <span class="swatch" style="background:#8a6cc0">LF</span>
+        <span class="meta"><strong>The Long Fen</strong><small>Easy · 60 m gain · flat, wet after rain</small></span>
+        <span class="dist">11.4 km</span>
+      </button></li>
+      <li><button class="trail-row" type="button" data-trail="cinder" aria-pressed="false">
+        <span class="swatch" style="background:#c4574f">CH</span>
+        <span class="meta"><strong>Cinder Hollow</strong><small>Closed · rockfall below the second switchback</small></span>
+        <span class="dist">4.7 km</span>
+      </button></li>
+    </ul>
+
+    <h2 class="section-title">Conditions at the mere</h2>
+    <div class="conditions">
+      <div class="stat"><b>9°</b><small>Feels like 6°</small></div>
+      <div class="stat"><b>18:42</b><small>Sunset</small></div>
+      <div class="stat"><b>Low</b><small>Mist on water</small></div>
+    </div>
+    <p class="note">Ranger note: the ferry crossing to Lanternfall runs every 40 minutes until dusk. Greywater Ridge is exposed — turn back if cloud drops below the cairns.</p>
+
+    <h2 class="section-title">Saved</h2>
+    <ul class="list">
+      <li><button class="trail-row" type="button" data-trail="lantern" aria-pressed="false">
+        <span class="swatch" style="background:#d98a2b">LF</span>
+        <span class="meta"><strong>Beacon at first light</strong><small>Lanternfall Loop, clockwise · saved 3 days ago</small></span>
+        <span class="dist">6.2 km</span>
+      </button></li>
+      <li><button class="trail-row" type="button" data-trail="moss" aria-pressed="false">
+        <span class="swatch" style="background:#5c9a52">MS</span>
+        <span class="meta"><strong>Short one with the kids</strong><small>Mossbank Steps, out and back</small></span>
+        <span class="dist">3.1 km</span>
+      </button></li>
+    </ul>
+  </div>
+</section>
+
+<script>
+(() => {
+  const sheet = document.getElementById('sheet');
+  const header = document.getElementById('header');
+  const scroller = document.getElementById('scroller');
+  const grabber = document.getElementById('grabber');
+  const map = document.getElementById('map');
+  const scrim = document.getElementById('scrim');
+  const controls = document.getElementById('controls');
+  const reducedMotion = matchMedia('(prefers-reduced-motion: reduce)');
+
+  const FULL = 0, HALF = 1, PEEK = 2;
+  const NAMES = ['full height', 'half height', 'collapsed'];
+
+  // Spring presets in Apple's terms: damping ratio + response (seconds)
+  const SETTLE = { damping: 1.0, response: 0.35 }; // no momentum behind it → no overshoot
+  const FLICK = { damping: 0.8, response: 0.3 };   // drawer/sheet value, used only after a flick
+
+  const FLICK_VELOCITY = 300; // px/s; above this the release direction decides
+  const DECELERATION = 0.995; // between UIScrollView .normal (0.998) and .fast (0.99)
+
+  let viewportH = 0;
+  let detents = [0, 0, 0]; // translateY for FULL, HALF, PEEK
+  let index = PEEK;        // detent we're resting at or heading to
+  let y = 0;               // presentation value — what's on screen right now
+  let velocity = 0;        // px/s of the presentation value
+  let spring = null;       // { target, damping, response } while animating
+  let frame = 0;
+  let lastTime = 0;
+
+  /* ---------- Geometry ---------- */
+
+  function layout() {
+    viewportH = window.innerHeight;
+    const safeTop = document.querySelector('.safe-probe').offsetHeight;
+    const top = Math.max(safeTop, 0) + 12;
+    const peekVisible = header.offsetHeight + 8;
+    const peek = viewportH - peekVisible;
+    // Keep HALF meaningfully between the other two, even in short landscape viewports
+    const half = Math.min(Math.round(viewportH * 0.48), peek - 120);
+    detents = [top, Math.max(half, top + 60), peek];
+    document.documentElement.style.setProperty('--sheet-h', `${viewportH - top}px`);
+  }
+
+  // Apple's rubber-band: the further past the edge, the less the sheet follows
+  function rubberband(overshoot, dimension, c = 0.55) {
+    return (overshoot * dimension * c) / (dimension + c * Math.abs(overshoot));
+  }
+  // Inverse, so a sheet caught mid-bounce keeps its exact on-screen position
+  function unrubberband(displayed, dimension, c = 0.55) {
+    const d = Math.min(Math.abs(displayed), dimension * 0.999);
+    return Math.sign(displayed) * (d * dimension) / (c * (dimension - d));
+  }
+  function toDisplayed(raw) {
+    const [min, , max] = detents;
+    if (raw < min) return min - rubberband(min - raw, viewportH);
+    if (raw > max) return max + rubberband(raw - max, viewportH);
+    return raw;
+  }
+  function toRaw(displayed) {
+    const [min, , max] = detents;
+    if (displayed < min) return min - unrubberband(min - displayed, viewportH);
+    if (displayed > max) return max + unrubberband(displayed - max, viewportH);
+    return displayed;
+  }
+
+  // Exponential-decay projection from Apple's Designing Fluid Interfaces sample
+  function project(v, rate = DECELERATION) {
+    return (v / 1000) * rate / (1 - rate);
+  }
+
+  /* ---------- Render ---------- */
+
+  function render() {
+    sheet.style.transform = `translate3d(0, ${y}px, 0)`;
+
+    // 0 at HALF → 1 at FULL: dim and push the map back as the sheet takes focus
+    const [full, half] = detents;
+    const focus = Math.min(Math.max((half - y) / (half - full), 0), 1);
+    scrim.style.opacity = (focus * 0.32).toFixed(3);
+    map.style.transform = `scale(${1 - focus * 0.04})`;
+
+    // Controls ride just above the sheet, then fade as it heads for full height
+    const controlsY = Math.max(y, half) - controls.offsetHeight - 12;
+    controls.style.transform = `translate3d(0, ${controlsY}px, 0)`;
+    const fade = Math.min(Math.max((half + 40 - y) / 80, 0), 1);
+    controls.style.opacity = (1 - fade).toFixed(3);
+    controls.style.visibility = fade >= 1 ? 'hidden' : '';
+  }
+
+  function setIndex(i) {
+    index = i;
+    // Native list scrolling only switches on once the sheet has settled at FULL,
+    // so a sheet still travelling there can be caught anywhere
+    if (i !== FULL) sheet.classList.remove('is-full');
+    sheet.dataset.detent = NAMES[i];
+    const next = i === PEEK ? 'expand' : i === HALF ? 'expand to full height' : 'collapse';
+    grabber.setAttribute('aria-label', `Sheet at ${NAMES[i]}. Activate to ${next}.`);
+  }
+
+  /* ---------- Spring ---------- */
+
+  function animateTo(i, initialVelocity = velocity, params = SETTLE) {
+    const changed = i !== index;
+    setIndex(i);
+    if (changed) haptic();
+
+    if (reducedMotion.matches) {
+      stop();
+      y = detents[i];
+      velocity = 0;
+      render();
+      settle();
+      sheet.animate([{ opacity: 0.6 }, { opacity: 1 }], { duration: 200, easing: 'ease-out' });
+      return;
+    }
+
+    // Re-targeting keeps the current velocity, so a mid-flight change never hits a wall
+    velocity = initialVelocity;
+    spring = { target: detents[i], ...params };
+    if (!frame) {
+      lastTime = performance.now();
+      frame = requestAnimationFrame(tick);
+    }
+  }
+
+  function tick(now) {
+    const dt = Math.min((now - lastTime) / 1000, 1 / 20);
+    lastTime = now;
+    const { target, damping, response } = spring;
+    const stiffness = (2 * Math.PI / response) ** 2;
+    const friction = (4 * Math.PI * damping) / response;
+
+    // Fixed sub-steps keep the integration stable regardless of frame rate
+    const STEP = 1 / 240;
+    for (let t = 0; t < dt; t += STEP) {
+      const h = Math.min(STEP, dt - t);
+      const accel = -stiffness * (y - target) - friction * velocity;
+      velocity += accel * h;
+      y += velocity * h;
+    }
+
+    if (Math.abs(y - target) < 0.25 && Math.abs(velocity) < 2) {
+      y = target;
+      velocity = 0;
+      render();
+      stop();
+      settle();
+      return;
+    }
+    render();
+    frame = requestAnimationFrame(tick);
+  }
+
+  function settle() {
+    sheet.classList.toggle('is-full', index === FULL && y === detents[FULL]);
+  }
+
+  function stop() {
+    cancelAnimationFrame(frame);
+    frame = 0;
+    spring = null;
+  }
+
+  function haptic() {
+    if (navigator.vibrate) navigator.vibrate(6);
+  }
+
+  /* ---------- Gesture ---------- */
+
+  let gesture = null;
+  let suppressClick = false;
+
+  sheet.addEventListener('pointerdown', (e) => {
+    if (e.button !== 0 || gesture) return;
+    // At full height the list scrolls natively; the header still drags the sheet
+    if (sheet.classList.contains('is-full') && scroller.contains(e.target)) return;
+
+    const wasMoving = spring !== null;
+    stop(); // catch it exactly where it is — presentation value, not target
+
+    gesture = {
+      id: e.pointerId,
+      startClientY: e.clientY,
+      rawStart: toRaw(y),
+      samples: [{ t: e.timeStamp, y }],
+      dragging: false,
+      caught: wasMoving,
+    };
+    // Grabbing a moving sheet is unambiguous: track immediately, no threshold
+    if (wasMoving) beginDrag(e);
+  });
+
+  function beginDrag(e) {
+    stop(); // e.g. focusing search may have started a spring since pointerdown
+    gesture.dragging = true;
+    gesture.startClientY = e.clientY;
+    gesture.rawStart = toRaw(y);
+    gesture.samples = [{ t: e.timeStamp, y }];
+    sheet.classList.add('is-dragging');
+    try { sheet.setPointerCapture(e.pointerId); } catch {}
+    if (document.activeElement && sheet.contains(document.activeElement) && document.activeElement.tagName === 'INPUT') {
+      document.activeElement.blur();
+    }
+  }
+
+  window.addEventListener('pointermove', (e) => {
+    if (!gesture || e.pointerId !== gesture.id) return;
+    if (!gesture.dragging) {
+      if (Math.abs(e.clientY - gesture.startClientY) < 10) return; // hysteresis before committing
+      beginDrag(e);
+    }
+    y = toDisplayed(gesture.rawStart + (e.clientY - gesture.startClientY));
+    render();
+
+    const samples = gesture.samples;
+    samples.push({ t: e.timeStamp, y });
+    while (samples.length > 2 && e.timeStamp - samples[0].t > 100) samples.shift();
+  });
+
+  function releaseVelocity(now) {
+    const s = gesture.samples;
+    const last = s[s.length - 1];
+    if (now - last.t > 60) return 0; // finger came to rest before lifting
+    const first = s[0];
+    const dt = (last.t - first.t) / 1000;
+    return dt > 0 ? (last.y - first.y) / dt : 0;
+  }
+
+  function endGesture(e) {
+    if (!gesture || e.pointerId !== gesture.id) return;
+    const { dragging, caught } = gesture;
+    const v = dragging ? releaseVelocity(e.timeStamp) : 0;
+    gesture = null;
+    sheet.classList.remove('is-dragging');
+
+    if (dragging) {
+      suppressClick = true;
+      setTimeout(() => (suppressClick = false), 0);
+    }
+    if (!dragging && !caught) return; // a plain tap — let the click through
+
+    // Pick the detent nearest to where the flick would carry the sheet...
+    const projected = y + project(v);
+    let candidates = [FULL, HALF, PEEK];
+    // ...but a deliberate flick always moves in its own direction
+    if (Math.abs(v) > FLICK_VELOCITY) {
+      const ahead = candidates.filter((i) => (v < 0 ? detents[i] < y - 1 : detents[i] > y + 1));
+      if (ahead.length) candidates = ahead;
+    }
+    const target = candidates.reduce((best, i) =>
+      Math.abs(detents[i] - projected) < Math.abs(detents[best] - projected) ? i : best);
+
+    animateTo(target, v, Math.abs(v) > FLICK_VELOCITY ? FLICK : SETTLE);
+  }
+  window.addEventListener('pointerup', endGesture);
+  window.addEventListener('pointercancel', endGesture);
+
+  // A drag that started on a row shouldn't also select it
+  sheet.addEventListener('click', (e) => {
+    if (suppressClick) { e.preventDefault(); e.stopPropagation(); }
+  }, true);
+
+  /* ---------- Controls ---------- */
+
+  grabber.addEventListener('click', () => {
+    animateTo(index === PEEK ? HALF : index === HALF ? FULL : PEEK);
+  });
+  grabber.addEventListener('keydown', (e) => {
+    if (e.key === 'ArrowUp') { e.preventDefault(); animateTo(Math.max(index - 1, FULL)); }
+    if (e.key === 'ArrowDown') { e.preventDefault(); animateTo(Math.min(index + 1, PEEK)); }
+  });
+
+  // Focusing search should bring up the list it filters
+  sheet.querySelector('input').addEventListener('focus', () => {
+    if (index === PEEK) animateTo(HALF);
+  });
+
+  // Selecting a trail highlights it on the map and makes sure the map is visible
+  const rows = sheet.querySelectorAll('.trail-row');
+  const paths = map.querySelectorAll('.trail');
+  rows.forEach((row) => row.addEventListener('click', () => {
+    const id = row.dataset.trail;
+    const wasSelected = row.getAttribute('aria-pressed') === 'true';
+    rows.forEach((r) => r.setAttribute('aria-pressed', String(!wasSelected && r.dataset.trail === id)));
+    paths.forEach((p) => p.classList.toggle('is-selected', !wasSelected && p.dataset.trail === id));
+    map.classList.toggle('has-selection', !wasSelected);
+    if (!wasSelected && index === FULL) animateTo(HALF);
+  }));
+
+  /* ---------- Init ---------- */
+
+  window.addEventListener('resize', () => {
+    layout();
+    if (spring) spring.target = detents[index];
+    else if (!gesture) { y = detents[index]; render(); settle(); }
+  });
+
+  layout();
+  setIndex(PEEK);
+  // Enter from below, the same edge it collapses toward
+  y = viewportH;
+  render();
+  requestAnimationFrame(() => animateTo(HALF, 0, SETTLE));
+})();
+</script>
+</body>
+</html>
diff --git a/layers/registry/server/demos/leonxlnx/taste-skill/taste-skill/index.html b/layers/registry/server/demos/leonxlnx/taste-skill/taste-skill/index.html
new file mode 100644
index 00000000..fcc87833
--- /dev/null
+++ b/layers/registry/server/demos/leonxlnx/taste-skill/taste-skill/index.html
@@ -0,0 +1,719 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Marrowgate | Night trains between six mountain towns</title>
+<meta name="description" content="Marrowgate runs overnight sleeper trains between six mountain towns. Board after dinner, sleep in a real bed, arrive for breakfast.">
+<meta name="color-scheme" content="light dark">
+<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
+<link rel="preconnect" href="https://picsum.photos">
+<style>
+/* Fonts: Familjen Grotesk (display + body) and Geist Mono (times, prices), served from the Fontsource CDN. */
+@font-face { font-family: "Familjen Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url(https://cdn.jsdelivr.net/fontsource/fonts/familjen-grotesk@latest/latin-400-normal.woff2) format("woff2"); }
+@font-face { font-family: "Familjen Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url(https://cdn.jsdelivr.net/fontsource/fonts/familjen-grotesk@latest/latin-500-normal.woff2) format("woff2"); }
+@font-face { font-family: "Familjen Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url(https://cdn.jsdelivr.net/fontsource/fonts/familjen-grotesk@latest/latin-600-normal.woff2) format("woff2"); }
+@font-face { font-family: "Familjen Grotesk"; font-style: italic; font-weight: 500; font-display: swap; src: url(https://cdn.jsdelivr.net/fontsource/fonts/familjen-grotesk@latest/latin-500-italic.woff2) format("woff2"); }
+@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(https://cdn.jsdelivr.net/fontsource/fonts/geist-mono@latest/latin-400-normal.woff2) format("woff2"); }
+
+/* Tokens. Palette: Forest (pine + fog + one amber accent). Theme follows the system, overridable via [data-theme].
+   Shape rule: interactive controls are full pills, media and panels are 14px, inputs are 10px. */
+:root {
+  --bg: #e8ece6;
+  --surface: #dde3da;
+  --surface-2: #d1d9cd;
+  --ink: #14201c;
+  --muted: #4a5852;
+  --line: rgb(20 32 28 / .14);
+  --pine: #1f3d33;
+  --pine-ink: #e8ece6;
+  --accent: #dc9638;
+  --accent-ink: #14201c;
+  --accent-text: #8a5414;
+  --error: #9b2c1f;
+  --shadow: 0 24px 60px -28px rgb(31 61 51 / .45);
+  --r-media: 14px;
+  --r-input: 10px;
+  --font: "Familjen Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
+  --ease: cubic-bezier(.16, 1, .3, 1);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --bg: #0d1412; --surface: #141d1a; --surface-2: #1b2622; --ink: #e6e9e1; --muted: #9eaaa2;
+    --line: rgb(230 233 225 / .12); --pine: #1d3a30; --pine-ink: #e6e9e1; --accent: #e3a347;
+    --accent-ink: #14201c; --accent-text: #e3a347; --error: #f08a7a; --shadow: 0 24px 60px -28px rgb(0 0 0 / .7);
+  }
+}
+:root[data-theme="dark"] {
+  --bg: #0d1412; --surface: #141d1a; --surface-2: #1b2622; --ink: #e6e9e1; --muted: #9eaaa2;
+  --line: rgb(230 233 225 / .12); --pine: #1d3a30; --pine-ink: #e6e9e1; --accent: #e3a347;
+  --accent-ink: #14201c; --accent-text: #e3a347; --error: #f08a7a; --shadow: 0 24px 60px -28px rgb(0 0 0 / .7);
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
+body {
+  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font);
+  font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased;
+  transition: background-color .4s var(--ease), color .4s var(--ease);
+}
+img { display: block; max-width: 100%; height: auto; }
+a { color: inherit; }
+h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; }
+p { margin: 0; }
+.wrap { max-width: 1320px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3rem); }
+.mono { font-family: var(--mono); font-feature-settings: "tnum"; letter-spacing: -0.01em; }
+.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
+
+/* Buttons */
+.btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; white-space: nowrap;
+  height: 3rem; padding: 0 1.4rem; border-radius: 999px; border: 1px solid transparent;
+  font: 600 1rem/1 var(--font); text-decoration: none; cursor: pointer;
+  transition: transform .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
+}
+.btn:active { transform: translateY(1px) scale(.98); }
+.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 10px 24px -14px rgb(220 150 56 / .9); }
+.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgb(220 150 56 / .9); }
+.btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; }
+.btn-ghost:hover { border-color: var(--ink); }
+.btn-sm { height: 2.5rem; padding: 0 1.1rem; font-size: .95rem; }
+
+/* Nav */
+.nav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
+@media (prefers-reduced-transparency: reduce) { .nav { background: var(--bg); backdrop-filter: none; } }
+.nav-inner { height: 68px; display: flex; align-items: center; gap: 2rem; }
+.brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; font-size: 1.15rem; letter-spacing: -0.02em; text-decoration: none; }
+.brand svg { width: 28px; height: 28px; }
+.nav-links { display: flex; gap: 1.75rem; margin-left: auto; list-style: none; padding: 0; margin-block: 0; }
+.nav-links a { text-decoration: none; color: var(--muted); font-weight: 500; transition: color .2s; }
+.nav-links a:hover { color: var(--ink); }
+.nav-actions { display: flex; align-items: center; gap: .75rem; }
+.theme-toggle { height: 2.5rem; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: 500 .9rem var(--font); cursor: pointer; }
+.theme-toggle:hover { color: var(--ink); border-color: var(--ink); }
+@media (max-width: 860px) { .nav-links { display: none; } .nav-actions { margin-left: auto; } }
+
+/* Hero: asymmetric split, copy left, tall photo right */
+.hero { min-height: calc(100dvh - 68px); display: grid; align-items: center; padding: clamp(2rem, 5vw, 4.5rem) 0; }
+.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
+.hero h1 { font-size: clamp(3rem, 6vw, 5.4rem); line-height: 1.02; letter-spacing: -0.04em; max-width: 14ch; padding-bottom: .1em; }
+.hero h1 em { font-style: italic; font-weight: 500; color: var(--accent-text); }
+.hero-sub { margin-top: 1.75rem; font-size: clamp(1.1rem, 1.4vw, 1.3rem); color: var(--muted); max-width: 34ch; line-height: 1.5; }
+.hero-ctas { margin-top: 2.25rem; display: flex; gap: .75rem; flex-wrap: wrap; }
+.hero-media { position: relative; border-radius: var(--r-media); overflow: hidden; aspect-ratio: 4 / 5; max-height: calc(100dvh - 160px); justify-self: end; width: 100%; box-shadow: var(--shadow); background: var(--surface-2); }
+.hero-media img { width: 100%; height: 100%; object-fit: cover; }
+@media (max-width: 767px) {
+  .hero { min-height: auto; padding: 2.5rem 0 3rem; }
+  .hero-grid { grid-template-columns: 1fr; }
+  .hero-media { aspect-ratio: 4 / 3; max-height: none; }
+}
+
+/* Load-in choreography: copy first, then the photo settles */
+@media (prefers-reduced-motion: no-preference) {
+  .rise { opacity: 0; transform: translateY(18px); animation: rise .9s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 90ms + 80ms); }
+  .hero-media img { transform: scale(1.08); animation: settle 1.8s var(--ease) .1s forwards; }
+  @keyframes rise { to { opacity: 1; transform: none; } }
+  @keyframes settle { to { transform: scale(1); } }
+  .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
+  .reveal.in { opacity: 1; transform: none; }
+}
+
+section { scroll-margin-top: 80px; }
+.section { padding: clamp(4.5rem, 9vw, 8rem) 0; }
+.h2 { font-size: clamp(2.1rem, 4.2vw, 3.5rem); max-width: 18ch; }
+.lede { margin-top: 1.1rem; color: var(--muted); max-width: 52ch; font-size: 1.15rem; }
+
+/* Routes: interactive network map + departures board */
+.routes-grid { margin-top: 3rem; display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: stretch; }
+.map { position: relative; border-radius: var(--r-media); background: var(--pine); color: var(--pine-ink); overflow: hidden; aspect-ratio: 10 / 7; }
+.map::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 80% 0%, rgb(227 163 71 / .16), transparent 60%), radial-gradient(90% 70% at 0% 100%, rgb(0 0 0 / .28), transparent 70%); pointer-events: none; }
+.map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
+.map .edge { stroke: rgb(232 236 230 / .24); stroke-width: .35; fill: none; stroke-linecap: round; }
+.map .edge.on { stroke: var(--accent); stroke-width: .7; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.1s var(--ease) forwards; }
+@keyframes draw { to { stroke-dashoffset: 0; } }
+.station { position: absolute; transform: translate(-50%, -50%); width: 22px; height: 22px; display: grid; place-items: center; background: none; border: 0; padding: 0; color: inherit; font: 500 .95rem var(--font); cursor: pointer; }
+.station .pin { width: 14px; height: 14px; border-radius: 50%; background: var(--pine); border: 2px solid rgb(232 236 230 / .7); transition: transform .3s var(--ease), background-color .3s, border-color .3s; }
+.station .name { position: absolute; left: 50%; top: calc(100% + 4px); transform: translateX(-50%); white-space: nowrap; padding: .15rem .55rem; border-radius: 999px; transition: background-color .3s, color .3s; }
+.station.label-up .name { top: auto; bottom: calc(100% + 4px); }
+.station:hover .pin { transform: scale(1.3); }
+.station[aria-pressed="true"] .pin { background: var(--accent); border-color: var(--accent); transform: scale(1.35); }
+.station[aria-pressed="true"] .name { background: var(--accent); color: var(--accent-ink); }
+.station.linked .pin { border-color: var(--accent); }
+
+.board { display: flex; flex-direction: column; }
+.board-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
+.board-head h3 { font-size: 1.6rem; }
+.board-head span { color: var(--muted); font-size: .95rem; }
+.departures { list-style: none; margin: 0; padding: 0; }
+.dep { display: grid; grid-template-columns: auto 1fr auto; gap: .25rem 1.25rem; align-items: center; padding: 1.15rem 0; }
+.dep + .dep { border-top: 1px solid var(--line); }
+.dep .t { font-size: 1.35rem; }
+.dep .to { font-weight: 600; font-size: 1.15rem; }
+.dep .meta { grid-column: 2 / 4; color: var(--muted); font-size: .95rem; }
+.dep .arr { color: var(--muted); text-align: right; }
+.dep .arr b { color: var(--ink); font-weight: 400; }
+@media (prefers-reduced-motion: no-preference) {
+  .dep { animation: rise .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
+}
+.board-foot { margin-top: auto; padding-top: 1.25rem; color: var(--muted); font-size: .95rem; }
+.board-foot a { color: var(--accent-text); font-weight: 600; text-underline-offset: 3px; }
+@media (max-width: 900px) {
+  .routes-grid { grid-template-columns: 1fr; }
+  .station { font-size: .8rem; }
+  .station .pin { width: 11px; height: 11px; }
+}
+
+/* Cabins: three-cell bento, one tall feature + two stacked */
+.bento { margin-top: 3rem; display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: auto auto; gap: 1.25rem; }
+.cell { border-radius: var(--r-media); overflow: hidden; background: var(--surface); display: flex; flex-direction: column; }
+.cell-feature { grid-row: span 2; }
+.cell-media { overflow: hidden; background: var(--surface-2); }
+.cell-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
+.cell:hover .cell-media img { transform: scale(1.04); }
+.cell-feature .cell-media { flex: 1; min-height: 340px; }
+.cell-body { padding: 1.5rem 1.6rem 1.7rem; display: grid; grid-template-columns: 1fr auto; gap: .4rem 1.5rem; align-items: end; }
+.cell-body h3 { font-size: 1.6rem; }
+.cell-body p { grid-column: 1; color: var(--muted); max-width: 42ch; }
+.price { grid-column: 2; grid-row: 1 / 3; text-align: right; font-size: .9rem; color: var(--muted); line-height: 1.3; }
+.price .mono { display: block; font-size: 1.6rem; color: var(--ink); }
+.cell-split { display: grid; grid-template-columns: .9fr 1.1fr; }
+.cell-split .cell-media { min-height: 230px; }
+.cell-split .cell-body { grid-template-columns: 1fr; align-content: end; }
+.cell-split .price { grid-column: 1; grid-row: auto; text-align: left; margin-top: .6rem; }
+.cell-pine { background: var(--pine); color: var(--pine-ink); position: relative; }
+.cell-pine::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgb(232 236 230 / .045) 0 1px, transparent 1px 26px); pointer-events: none; }
+.cell-pine .cell-body { padding-top: 2.5rem; position: relative; z-index: 1; }
+.cell-pine p, .cell-pine .price { color: rgb(232 236 230 / .78); }
+.cell-pine .price .mono { color: var(--pine-ink); }
+@media (max-width: 767px) {
+  .bento { grid-template-columns: 1fr; }
+  .cell-feature { grid-row: auto; }
+  .cell-feature .cell-media { min-height: 260px; }
+  .cell-split { grid-template-columns: 1fr; }
+  .cell-split .cell-media { min-height: 200px; }
+}
+
+/* The night: sticky photo that shifts from night to dawn as the steps advance */
+.night-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); }
+.night-visual { position: sticky; top: 100px; align-self: start; border-radius: var(--r-media); overflow: hidden; aspect-ratio: 4 / 5; max-height: calc(100dvh - 140px); width: 100%; background: var(--surface-2); }
+.night-visual img { width: 100%; height: 100%; object-fit: cover; }
+.night-visual .tint { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(8 14 26 / .72), rgb(13 20 18 / .35)); transition: background .9s var(--ease), opacity .9s var(--ease); }
+.night-visual[data-step="3"] .tint { background: linear-gradient(180deg, rgb(8 14 26 / .85), rgb(8 14 26 / .6)); }
+.night-visual[data-step="4"] .tint { background: linear-gradient(180deg, rgb(227 163 71 / .18), rgb(13 20 18 / .2)); }
+.night-visual[data-step="5"] .tint { background: linear-gradient(180deg, rgb(227 163 71 / .28), rgb(232 236 230 / .05)); }
+.night-visual .clock { position: absolute; left: 1.5rem; bottom: 1.25rem; color: #eef0ea; font-size: clamp(3rem, 7vw, 5.5rem); letter-spacing: -0.04em; line-height: 1; text-shadow: 0 4px 30px rgb(0 0 0 / .35); }
+.eyebrow { font-size: .8rem; text-transform: uppercase; letter-spacing: .16em; color: var(--accent-text); font-weight: 600; margin-bottom: 1rem; }
+.steps { list-style: none; margin: 3rem 0 0; padding: 0; }
+.step { padding: 2.5rem 0 3.5rem; opacity: .38; transition: opacity .6s var(--ease); }
+.step.active { opacity: 1; }
+.step .mono { color: var(--accent-text); font-size: 1rem; }
+.step h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-top: .5rem; }
+.step p { margin-top: .75rem; color: var(--muted); max-width: 40ch; }
+@media (max-width: 767px) {
+  .night-grid { grid-template-columns: 1fr; }
+  .night-visual { position: relative; top: 0; aspect-ratio: 4 / 3; }
+  .step { opacity: 1; padding: 1.75rem 0; }
+}
+@media (prefers-reduced-motion: reduce) { .step { opacity: 1; } }
+
+/* Quote: full-bleed statement */
+.quote { padding: clamp(4rem, 9vw, 7.5rem) 0; border-block: 1px solid var(--line); }
+.quote blockquote { margin: 0; max-width: 26ch; font-size: clamp(1.9rem, 3.8vw, 3.2rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.03em; }
+.quote figcaption { margin-top: 2rem; display: flex; align-items: center; gap: 1rem; color: var(--muted); }
+.quote figcaption img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
+.quote figcaption b { color: var(--ink); font-weight: 600; display: block; }
+
+/* Booking */
+.book-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
+.form { background: var(--surface); border-radius: var(--r-media); padding: clamp(1.5rem, 3vw, 2.5rem); display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 1.25rem; }
+.field { display: grid; gap: .5rem; align-content: start; }
+.field.full { grid-column: 1 / -1; }
+.field label, .field legend { font-weight: 600; font-size: .95rem; }
+.field .help { color: var(--muted); font-size: .88rem; }
+.field .err { color: var(--error); font-size: .9rem; font-weight: 500; min-height: 0; }
+.field .err:empty { display: none; }
+select, input[type="date"] {
+  appearance: none; -webkit-appearance: none; width: 100%; height: 3.1rem; padding: 0 1rem; border-radius: var(--r-input);
+  border: 1px solid color-mix(in srgb, var(--ink) 28%, transparent); background: var(--bg); color: var(--ink);
+  font: 500 1rem var(--font); transition: border-color .2s, box-shadow .2s;
+}
+select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.5rem; }
+select:focus, input[type="date"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
+[aria-invalid="true"] { border-color: var(--error) !important; }
+fieldset { border: 0; margin: 0; padding: 0; }
+.berths { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-top: .5rem; }
+.berth input { position: absolute; opacity: 0; pointer-events: none; }
+.berth span { display: grid; gap: .1rem; height: 100%; padding: .8rem 1rem; border-radius: var(--r-input); border: 1px solid color-mix(in srgb, var(--ink) 28%, transparent); background: var(--bg); cursor: pointer; transition: border-color .2s, background-color .2s; }
+.berth span small { color: var(--muted); font-size: .85rem; }
+.berth input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--bg)); }
+.berth input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
+.form-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
+.result { grid-column: 1 / -1; }
+.result:empty { display: none; }
+.ticket { border-radius: var(--r-input); background: var(--bg); padding: 1.25rem 1.4rem; display: grid; grid-template-columns: 1fr auto; gap: .75rem 1rem; align-items: center; }
+.ticket .leg { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; font-size: 1.15rem; font-weight: 600; }
+.ticket .leg .mono { font-weight: 400; font-size: 1.3rem; }
+.ticket .sub { grid-column: 1; color: var(--muted); font-size: .95rem; }
+.ticket .fare { grid-column: 2; grid-row: 1 / 3; text-align: right; }
+.ticket .fare .mono { font-size: 1.6rem; display: block; }
+.ticket .hold { grid-column: 1 / -1; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
+.ticket .note { color: var(--muted); font-size: .95rem; }
+.skeleton { border-radius: var(--r-input); background: var(--bg); padding: 1.25rem 1.4rem; display: grid; gap: .7rem; }
+.skeleton i { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2), color-mix(in srgb, var(--surface-2) 50%, var(--bg)), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
+.skeleton i:nth-child(1) { width: 62%; height: 20px; } .skeleton i:nth-child(2) { width: 40%; } .skeleton i:nth-child(3) { width: 28%; }
+@keyframes shimmer { to { background-position: -200% 0; } }
+.empty { color: var(--muted); font-size: .95rem; padding: 1rem 1.25rem; border: 1px dashed color-mix(in srgb, var(--ink) 25%, transparent); border-radius: var(--r-input); }
+@media (max-width: 900px) { .book-grid { grid-template-columns: 1fr; } }
+@media (max-width: 560px) { .form { grid-template-columns: 1fr; } .berths { grid-template-columns: 1fr; } .ticket { grid-template-columns: 1fr; } .ticket .fare { grid-column: 1; grid-row: auto; text-align: left; } }
+@media (prefers-reduced-motion: reduce) { .skeleton i { animation: none; } }
+
+/* Questions: two-column accordion */
+.faq { margin-top: 3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; }
+details { border-top: 1px solid var(--line); }
+summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.4rem 0; font-weight: 600; font-size: 1.15rem; }
+summary::-webkit-details-marker { display: none; }
+summary::after { content: "+"; font: 400 1.5rem/1 var(--mono); color: var(--muted); transition: transform .35s var(--ease); }
+details[open] summary::after { transform: rotate(45deg); }
+details p { padding-bottom: 1.5rem; color: var(--muted); max-width: 52ch; }
+@media (max-width: 767px) { .faq { grid-template-columns: 1fr; } }
+
+/* Footer */
+footer { padding: 4rem 0 3rem; border-top: 1px solid var(--line); }
+.foot { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2rem; }
+.foot p { color: var(--muted); margin-top: .9rem; max-width: 36ch; }
+.foot h4 { margin: 0 0 .9rem; font-size: .95rem; }
+.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
+.foot ul a { color: var(--muted); text-decoration: none; }
+.foot ul a:hover { color: var(--ink); }
+.legal { margin-top: 3rem; color: var(--muted); font-size: .88rem; }
+@media (max-width: 767px) { .foot { grid-template-columns: 1fr 1fr; } .foot > div:first-child { grid-column: 1 / -1; } }
+
+@media (prefers-reduced-motion: reduce) {
+  html { scroll-behavior: auto; }
+  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
+}
+</style>
+</head>
+<body>
+
+<header class="nav">
+  <div class="wrap nav-inner">
+    <a class="brand" href="#top" aria-label="Marrowgate home">
+      <svg viewBox="0 0 28 28" aria-hidden="true"><circle cx="14" cy="11" r="7" fill="var(--accent)"/><rect x="2" y="20" width="24" height="2.4" rx="1.2" fill="currentColor"/><rect x="2" y="24.5" width="24" height="1.4" rx=".7" fill="currentColor" opacity=".5"/></svg>
+      Marrowgate
+    </a>
+    <ul class="nav-links">
+      <li><a href="#routes">Routes</a></li>
+      <li><a href="#cabins">Cabins</a></li>
+      <li><a href="#night">The night</a></li>
+      <li><a href="#questions">Questions</a></li>
+    </ul>
+    <div class="nav-actions">
+      <button class="theme-toggle" type="button" id="themeToggle" aria-label="Switch colour theme">Day</button>
+      <a class="btn btn-primary btn-sm" href="#book">Book a berth</a>
+    </div>
+  </div>
+</header>
+
+<main id="top">
+
+  <section class="hero">
+    <div class="wrap hero-grid">
+      <div>
+        <h1 class="rise" style="--i:0">Sleep through the <em>mountains.</em></h1>
+        <p class="hero-sub rise" style="--i:1">Overnight sleeper trains between six mountain towns. Board after dinner, sleep in a real bed, arrive for breakfast.</p>
+        <div class="hero-ctas rise" style="--i:2">
+          <a class="btn btn-primary" href="#book">Book a berth</a>
+          <a class="btn btn-ghost" href="#routes">See the routes</a>
+        </div>
+      </div>
+      <div class="hero-media rise" style="--i:1">
+        <img src="https://picsum.photos/id/1018/1000/1250" width="1000" height="1250" alt="A river valley under steep forested mountains" fetchpriority="high">
+      </div>
+    </div>
+  </section>
+
+  <section class="section" id="routes">
+    <div class="wrap">
+      <h2 class="h2 reveal">Eight night routes. Every train arrives before eight.</h2>
+      <p class="lede reveal">Pick a town to see where tonight's trains from there are headed.</p>
+
+      <div class="routes-grid">
+        <div class="map reveal" id="map">
+          <svg viewBox="0 0 100 70" preserveAspectRatio="none" aria-hidden="true" id="edges"></svg>
+        </div>
+        <div class="board reveal" aria-live="polite">
+          <div class="board-head">
+            <h3 id="boardTitle">From Harrowmere</h3>
+            <span>Departs nightly</span>
+          </div>
+          <ul class="departures" id="departures"></ul>
+          <p class="board-foot">Need two legs? Change at any town over breakfast and take the next night's train. <a href="#book">Book a berth</a></p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="section" id="cabins" style="padding-top:0">
+    <div class="wrap">
+      <h2 class="h2 reveal">Three ways to spend the night.</h2>
+      <div class="bento">
+        <article class="cell cell-feature reveal">
+          <div class="cell-media"><img src="https://picsum.photos/id/1015/1100/1000" width="1100" height="1000" alt="A river winding through a mountain valley, seen from above" loading="lazy"></div>
+          <div class="cell-body">
+            <h3>Double suite</h3>
+            <p>A proper double bed facing a full-width window, a private washroom, and breakfast brought to your door.</p>
+            <div class="price">from<span class="mono">&euro;245</span>per cabin</div>
+          </div>
+        </article>
+        <article class="cell cell-split reveal">
+          <div class="cell-media"><img src="https://picsum.photos/id/10/700/700" width="700" height="700" alt="A still lake below pine forest" loading="lazy"></div>
+          <div class="cell-body">
+            <h3>Single</h3>
+            <p>Your own cabin with a fold-down desk, a washbasin, and a door that locks.</p>
+            <div class="price">from<span class="mono">&euro;169</span></div>
+          </div>
+        </article>
+        <article class="cell cell-pine reveal">
+          <div class="cell-body">
+            <h3>Couchette</h3>
+            <p>Six bunks to a compartment, fresh linen on every one. The cheapest bed across the mountains.</p>
+            <div class="price">from<span class="mono">&euro;89</span>per berth</div>
+          </div>
+        </article>
+      </div>
+    </div>
+  </section>
+
+  <section class="section" id="night" style="padding-top:0">
+    <div class="wrap night-grid">
+      <div class="night-visual" id="nightVisual" data-step="1">
+        <img src="https://picsum.photos/id/1022/900/1125" width="900" height="1125" alt="Northern lights above a dark mountain lake" loading="lazy">
+        <div class="tint"></div>
+        <div class="clock mono" id="nightClock" aria-hidden="true">21:40</div>
+      </div>
+      <div>
+        <p class="eyebrow">A night aboard</p>
+        <h2 class="h2">From the platform to breakfast.</h2>
+        <ol class="steps">
+          <li class="step active" data-time="21:40" data-step="1">
+            <span class="mono">21:40</span>
+            <h3>Board with time to spare</h3>
+            <p>Doors open forty minutes before departure. Your cabin is made up and the lamp is already on.</p>
+          </li>
+          <li class="step" data-time="22:15" data-step="2">
+            <span class="mono">22:15</span>
+            <h3>Supper in the dining car</h3>
+            <p>Soup, bread, a local cheese, and a short wine list from the towns on your line. Last orders at eleven.</p>
+          </li>
+          <li class="step" data-time="00:30" data-step="3">
+            <span class="mono">00:30</span>
+            <h3>Over the high passes</h3>
+            <p>The climb happens while you sleep. We run slowly on the steep sections, so the ride stays smooth.</p>
+          </li>
+          <li class="step" data-time="06:15" data-step="4">
+            <span class="mono">06:15</span>
+            <h3>Coffee at your door</h3>
+            <p>A knock, a tray, and the valley turning light outside the window.</p>
+          </li>
+          <li class="step" data-time="07:05" data-step="5">
+            <span class="mono">07:05</span>
+            <h3>Step off in town</h3>
+            <p>Every station is a short walk from the centre. Shower rooms on the platform if you want one.</p>
+          </li>
+        </ol>
+      </div>
+    </div>
+  </section>
+
+  <figure class="quote">
+    <div class="wrap">
+      <blockquote class="reveal">&ldquo;I&rsquo;ve taken the Skarn train to Pellow Pass eleven times and still haven&rsquo;t seen the pass in daylight. I&rsquo;ve never minded.&rdquo;</blockquote>
+      <figcaption class="reveal">
+        <img src="https://picsum.photos/id/64/120/120" width="52" height="52" alt="" loading="lazy">
+        <span><b>Ilse Varga</b>Schoolteacher in Lisch</span>
+      </figcaption>
+    </div>
+  </figure>
+
+  <section class="section" id="book">
+    <div class="wrap book-grid">
+      <div class="reveal">
+        <h2 class="h2">Book a berth for tonight or any night.</h2>
+        <p class="lede">Choose two towns and a date. Bookings open ninety days ahead, and you can cancel for free until 18:00 on the day.</p>
+      </div>
+
+      <form class="form reveal" id="bookForm" novalidate>
+        <div class="field">
+          <label for="from">From</label>
+          <select id="from" name="from" aria-describedby="fromErr"></select>
+          <p class="err" id="fromErr"></p>
+        </div>
+        <div class="field">
+          <label for="to">To</label>
+          <select id="to" name="to" aria-describedby="toErr"></select>
+          <p class="err" id="toErr"></p>
+        </div>
+        <div class="field full">
+          <label for="date">Night of travel</label>
+          <input type="date" id="date" name="date" aria-describedby="dateHelp dateErr">
+          <p class="help" id="dateHelp">The date you board. You arrive the next morning.</p>
+          <p class="err" id="dateErr"></p>
+        </div>
+        <fieldset class="field full">
+          <legend>Cabin</legend>
+          <div class="berths">
+            <label class="berth"><input type="radio" name="cabin" value="couchette" checked><span>Couchette<small>from &euro;89</small></span></label>
+            <label class="berth"><input type="radio" name="cabin" value="single"><span>Single<small>from &euro;169</small></span></label>
+            <label class="berth"><input type="radio" name="cabin" value="double"><span>Double suite<small>from &euro;245</small></span></label>
+          </div>
+        </fieldset>
+        <div class="form-actions">
+          <button class="btn btn-primary" type="submit" id="checkBtn">Check berths</button>
+        </div>
+        <div class="result" id="result" aria-live="polite">
+          <p class="empty">Your train, times, and fare will show up here.</p>
+        </div>
+      </form>
+    </div>
+  </section>
+
+  <section class="section" id="questions" style="padding-top:0">
+    <div class="wrap">
+      <h2 class="h2 reveal">Questions people ask before their first night.</h2>
+      <div class="faq">
+        <div>
+          <details class="reveal"><summary>Can I bring skis or a bike?</summary><p>Yes. Every train has a luggage van with ski racks and bike hooks. Add one when you book; it costs &euro;12 per item.</p></details>
+          <details class="reveal"><summary>Are dogs allowed?</summary><p>Dogs travel free in single cabins and double suites. Couchettes are kept pet-free for people with allergies.</p></details>
+        </div>
+        <div>
+          <details class="reveal"><summary>What happens if snow closes a pass?</summary><p>We hold the train at the last town before the pass, keep the heating on, and serve breakfast aboard. If you arrive more than two hours late, we refund half the fare.</p></details>
+          <details class="reveal"><summary>Is it suitable for children?</summary><p>Very. Under-fours ride free in a parent&rsquo;s berth, and a couchette compartment can be booked as a single family cabin.</p></details>
+        </div>
+      </div>
+    </div>
+  </section>
+
+</main>
+
+<footer>
+  <div class="wrap">
+    <div class="foot">
+      <div>
+        <a class="brand" href="#top" aria-label="Marrowgate home">
+          <svg viewBox="0 0 28 28" aria-hidden="true"><circle cx="14" cy="11" r="7" fill="var(--accent)"/><rect x="2" y="20" width="24" height="2.4" rx="1.2" fill="currentColor"/><rect x="2" y="24.5" width="24" height="1.4" rx=".7" fill="currentColor" opacity=".5"/></svg>
+          Marrowgate
+        </a>
+        <p>Night trains between Harrowmere, Altvell, Corrie Bran, Pellow Pass, Skarn and Lisch.</p>
+      </div>
+      <div>
+        <h4>Travel</h4>
+        <ul><li><a href="#routes">Routes</a></li><li><a href="#cabins">Cabins</a></li><li><a href="#book">Book a berth</a></li></ul>
+      </div>
+      <div>
+        <h4>Help</h4>
+        <ul><li><a href="#questions">Questions</a></li><li><a href="mailto:desk@marrowgate.example">desk@marrowgate.example</a></li><li><a href="#top">Accessibility</a></li></ul>
+      </div>
+    </div>
+    <p class="legal">&copy; 2026 Marrowgate Night Rail. A fictional company.</p>
+  </div>
+</footer>
+
+<script>
+(() => {
+  const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+  /* Theme: system by default, manual override remembered */
+  const root = document.documentElement;
+  const toggle = document.getElementById("themeToggle");
+  const sysDark = matchMedia("(prefers-color-scheme: dark)");
+  const isDark = () => root.dataset.theme ? root.dataset.theme === "dark" : sysDark.matches;
+  const syncToggle = () => { toggle.textContent = isDark() ? "Day" : "Night"; toggle.setAttribute("aria-label", isDark() ? "Switch to light theme" : "Switch to dark theme"); };
+  try { const saved = localStorage.getItem("mg-theme"); if (saved) root.dataset.theme = saved; } catch (e) {}
+  syncToggle();
+  toggle.addEventListener("click", () => {
+    root.dataset.theme = isDark() ? "light" : "dark";
+    try { localStorage.setItem("mg-theme", root.dataset.theme); } catch (e) {}
+    syncToggle();
+  });
+  sysDark.addEventListener("change", syncToggle);
+
+  /* Network. Positions are in the map's 100 x 70 coordinate space. */
+  const towns = {
+    "Harrowmere":  { x: 13, y: 22, up: true },
+    "Altvell":     { x: 40, y: 13, up: true },
+    "Corrie Bran": { x: 76, y: 17, up: true },
+    "Pellow Pass": { x: 88, y: 54 },
+    "Skarn":       { x: 60, y: 47 },
+    "Lisch":       { x: 26, y: 55 }
+  };
+  // [a, b, a->b depart, a->b arrive, b->a depart, b->a arrive, train number]
+  const lines = [
+    ["Harrowmere", "Altvell",     "21:40", "07:05", "22:05", "07:20", 401],
+    ["Altvell",    "Corrie Bran", "22:30", "07:15", "21:35", "06:40", 403],
+    ["Corrie Bran","Pellow Pass", "21:50", "07:10", "22:20", "07:35", 405],
+    ["Pellow Pass","Skarn",       "21:20", "06:55", "22:00", "07:30", 407],
+    ["Skarn",      "Lisch",       "22:05", "07:30", "21:45", "07:00", 409],
+    ["Lisch",      "Harrowmere",  "22:10", "07:40", "21:30", "06:50", 411],
+    ["Altvell",    "Lisch",       "21:55", "06:40", "22:25", "07:05", 413],
+    ["Skarn",      "Corrie Bran", "22:15", "07:50", "21:25", "06:45", 415]
+  ];
+  const fares = { couchette: 89, single: 169, double: 245 };
+  const cabinNames = { couchette: "Couchette berth", single: "Single cabin", double: "Double suite" };
+
+  const departuresFrom = (town) => lines.flatMap(([a, b, d1, a1, d2, a2, n]) =>
+    a === town ? [{ to: b, dep: d1, arr: a1, train: "MG " + n }] :
+    b === town ? [{ to: a, dep: d2, arr: a2, train: "MG " + (n + 1) }] : []
+  ).sort((p, q) => p.dep.localeCompare(q.dep));
+
+  const duration = (dep, arr) => {
+    const [dh, dm] = dep.split(":").map(Number), [ah, am] = arr.split(":").map(Number);
+    let mins = (ah * 60 + am) - (dh * 60 + dm); if (mins < 0) mins += 1440;
+    return Math.floor(mins / 60) + " h " + String(mins % 60).padStart(2, "0") + " min";
+  };
+
+  /* Map */
+  const map = document.getElementById("map");
+  const svg = document.getElementById("edges");
+  const NS = "http://www.w3.org/2000/svg";
+  const edgeEls = lines.map(([a, b]) => {
+    const p = document.createElementNS(NS, "path");
+    const A = towns[a], B = towns[b];
+    const mx = (A.x + B.x) / 2, my = (A.y + B.y) / 2 - 4;
+    p.setAttribute("d", `M${A.x} ${A.y} Q${mx} ${my} ${B.x} ${B.y}`);
+    p.setAttribute("class", "edge");
+    p.setAttribute("pathLength", "1");
+    p.dataset.a = a; p.dataset.b = b;
+    svg.appendChild(p);
+    return p;
+  });
+  const stationEls = {};
+  Object.entries(towns).forEach(([name, t]) => {
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "station" + (t.up ? " label-up" : "");
+    btn.style.left = t.x + "%"; btn.style.top = (t.y / 70 * 100) + "%";
+    btn.setAttribute("aria-pressed", "false");
+    btn.innerHTML = `<span class="pin"></span><span class="name">${name}</span>`;
+    btn.addEventListener("click", () => select(name));
+    map.appendChild(btn);
+    stationEls[name] = btn;
+  });
+
+  const title = document.getElementById("boardTitle");
+  const list = document.getElementById("departures");
+  function select(town) {
+    Object.entries(stationEls).forEach(([n, el]) => { el.setAttribute("aria-pressed", String(n === town)); el.classList.remove("linked"); });
+    edgeEls.forEach(p => {
+      const on = p.dataset.a === town || p.dataset.b === town;
+      p.classList.remove("on");
+      if (on) {
+        void p.getBoundingClientRect();
+        p.classList.add("on");
+        stationEls[p.dataset.a === town ? p.dataset.b : p.dataset.a].classList.add("linked");
+      }
+    });
+    title.textContent = "From " + town;
+    list.innerHTML = departuresFrom(town).map((d, i) => `
+      <li class="dep" style="--i:${i}">
+        <span class="t mono">${d.dep}</span>
+        <span class="to">${d.to}</span>
+        <span class="arr">arrives <b class="mono">${d.arr}</b></span>
+        <span class="meta">${d.train}, ${duration(d.dep, d.arr)}</span>
+      </li>`).join("");
+  }
+  select("Harrowmere");
+
+  /* Booking form */
+  const form = document.getElementById("bookForm");
+  const from = document.getElementById("from"), to = document.getElementById("to"), date = document.getElementById("date");
+  const result = document.getElementById("result"), checkBtn = document.getElementById("checkBtn");
+  const opts = Object.keys(towns).sort().map(t => `<option value="${t}">${t}</option>`).join("");
+  from.innerHTML = `<option value="">Choose a town</option>` + opts;
+  to.innerHTML = `<option value="">Choose a town</option>` + opts;
+  const iso = (d) => d.toISOString().slice(0, 10);
+  const today = new Date(); today.setMinutes(today.getMinutes() - today.getTimezoneOffset());
+  const last = new Date(today); last.setDate(last.getDate() + 90);
+  date.min = iso(today); date.max = iso(last); date.value = iso(today);
+
+  const setErr = (el, msg) => {
+    document.getElementById(el.id + "Err").textContent = msg;
+    el.setAttribute("aria-invalid", msg ? "true" : "false");
+  };
+  [from, to, date].forEach(el => el.addEventListener("change", () => setErr(el, "")));
+
+  const hubFor = (a, b) => {
+    const da = departuresFrom(a).map(d => d.to);
+    return departuresFrom(b).map(d => d.to).find(t => da.includes(t));
+  };
+
+  let pending;
+  form.addEventListener("submit", (e) => {
+    e.preventDefault();
+    let ok = true;
+    if (!from.value) { setErr(from, "Choose where you are leaving from."); ok = false; }
+    if (!to.value) { setErr(to, "Choose where you are going."); ok = false; }
+    else if (to.value === from.value) { setErr(to, "Pick a different town from the one you are leaving."); ok = false; }
+    if (!date.value) { setErr(date, "Choose the night you want to travel."); ok = false; }
+    else if (date.value < date.min) { setErr(date, "That night has already gone. Pick today or later."); ok = false; }
+    else if (date.value > date.max) { setErr(date, "Bookings open ninety days ahead. Pick an earlier night."); ok = false; }
+    if (!ok) { form.querySelector('[aria-invalid="true"]').focus(); return; }
+
+    const cabin = form.cabin.value;
+    const trip = departuresFrom(from.value).find(d => d.to === to.value);
+    clearTimeout(pending);
+    checkBtn.disabled = true; checkBtn.textContent = "Checking";
+    result.innerHTML = `<div class="skeleton" aria-label="Checking berths"><i></i><i></i><i></i></div>`;
+
+    pending = setTimeout(() => {
+      checkBtn.disabled = false; checkBtn.textContent = "Check berths";
+      if (!trip) {
+        const hub = hubFor(from.value, to.value);
+        result.innerHTML = `<p class="empty">No direct night train runs between ${from.value} and ${to.value}. ${hub ? `Take the train to ${hub}, spend a day there, and continue the next night.` : "Try a nearby town."}</p>`;
+        return;
+      }
+      const night = new Date(date.value + "T12:00:00").toLocaleDateString("en-GB", { weekday: "long", day: "numeric", month: "long" });
+      result.innerHTML = `
+        <div class="ticket">
+          <div class="leg"><span class="mono">${trip.dep}</span>${from.value}<span aria-hidden="true">to</span>${to.value}<span class="mono">${trip.arr}</span></div>
+          <p class="sub">${trip.train} on ${night}, ${duration(trip.dep, trip.arr)}. ${cabinNames[cabin]}.</p>
+          <div class="fare"><span class="mono">&euro;${fares[cabin]}</span><small>includes breakfast</small></div>
+          <div class="hold"><button type="button" class="btn btn-primary" id="holdBtn">Hold this berth</button><span class="note" id="holdNote">Free to hold for 20 minutes.</span></div>
+        </div>`;
+      document.getElementById("holdBtn").addEventListener("click", (ev) => {
+        ev.currentTarget.disabled = true;
+        ev.currentTarget.textContent = "Held";
+        document.getElementById("holdNote").textContent = "We will keep it until " + new Date(Date.now() + 20 * 60000).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" }) + ". This demo stops here.";
+      });
+    }, reduce ? 0 : 850);
+  });
+
+  /* Scroll reveals */
+  const revealEls = document.querySelectorAll(".reveal");
+  if (reduce || !("IntersectionObserver" in window)) {
+    revealEls.forEach(el => el.classList.add("in"));
+  } else {
+    const io = new IntersectionObserver((entries) => entries.forEach(en => {
+      if (en.isIntersecting) { en.target.classList.add("in"); io.unobserve(en.target); }
+    }), { rootMargin: "0px 0px -8% 0px", threshold: 0.12 });
+    revealEls.forEach(el => io.observe(el));
+  }
+
+  /* Night timeline: the active step drives the clock and the photo's tint */
+  const visual = document.getElementById("nightVisual"), clock = document.getElementById("nightClock");
+  const steps = document.querySelectorAll(".step");
+  if ("IntersectionObserver" in window) {
+    const so = new IntersectionObserver((entries) => entries.forEach(en => {
+      if (!en.isIntersecting) return;
+      steps.forEach(s => s.classList.toggle("active", s === en.target));
+      visual.dataset.step = en.target.dataset.step;
+      clock.textContent = en.target.dataset.time;
+    }), { rootMargin: "-45% 0px -45% 0px" });
+    steps.forEach(s => so.observe(s));
+  }
+})();
+</script>
+</body>
+</html>
diff --git a/layers/registry/server/demos/nutlope/hallmark/hallmark/index.html b/layers/registry/server/demos/nutlope/hallmark/hallmark/index.html
new file mode 100644
index 00000000..05cfd78d
--- /dev/null
+++ b/layers/registry/server/demos/nutlope/hallmark/hallmark/index.html
@@ -0,0 +1,718 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Quillmoor — a reading log for book clubs</title>
+<meta name="description" content="Quillmoor tracks who in your book club has finished which chapter, and draws the line your discussion shouldn’t cross.">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,600;1,6..72,400&display=swap">
+<style>
+/* Hallmark · genre: editorial · macrostructure: Map / Diagram · theme: Almanac · enrichment: none (the ledger is the image) · nav: N6 · footer: Ft6
+ * tone: editorial, literary, calm · anchor hue: 85 (oat paper) · accent: oxblood 28
+ * inferred brief: audience = book-club organisers + members · use = request an invite · tone = editorial
+ * Hallmark · pre-emit critique: P5 H4 E4 S5 R5 V5 */
+
+:root {
+  /* colour — oat paper, warm ink, one oxblood accent */
+  --color-paper:      oklch(96.5% 0.012 85);
+  --color-paper-2:    oklch(93.5% 0.016 85);
+  --color-rule:       oklch(83% 0.014 80);
+  --color-neutral:    oklch(62% 0.012 75);
+  --color-muted:      oklch(43% 0.012 70);
+  --color-ink:        oklch(21% 0.014 60);
+  --color-ink-fill:   oklch(34% 0.022 60);
+  --color-accent:     oklch(47% 0.15 28);
+  --color-safe-wash:  oklch(92.5% 0.028 45);
+  --color-focus:      oklch(47% 0.15 28);
+  --color-error:      oklch(49% 0.17 32);
+  --color-success:    oklch(44% 0.08 150);
+
+  /* type */
+  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", ui-serif, serif;
+  --font-body:    "Newsreader", "Iowan Old Style", "Palatino Linotype", ui-serif, serif;
+
+  --text-xs:   0.8rem;
+  --text-sm:   0.9rem;
+  --text-base: 1.125rem;
+  --text-md:   1.375rem;
+  --text-lg:   1.75rem;
+  --text-display-s: clamp(2.25rem, 3.6vw + 1rem, 3.9rem);
+
+  /* space — 4pt scale */
+  --space-3xs: 0.25rem;
+  --space-2xs: 0.5rem;
+  --space-xs:  0.75rem;
+  --space-sm:  1rem;
+  --space-md:  1.5rem;
+  --space-lg:  2rem;
+  --space-xl:  3rem;
+  --space-2xl: 4rem;
+  --space-3xl: 6rem;
+  --page-gutter: clamp(1rem, 4vw, 3rem);
+  --page-max: 72rem;
+
+  --rule-hair: 1px;
+  --rule-firm: 2px;
+  --radius-sm: 2px;
+
+  /* motion */
+  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  --dur-micro: 120ms;
+  --dur-short: 220ms;
+  --dur-long:  420ms;
+
+  /* ledger geometry */
+  --ledger-label: 6.5rem;
+  --ledger-gap: var(--space-3xs);
+  --ledger-chapters: 24;
+
+  /* layering */
+  --z-wash: 0;
+  --z-cells: 1;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+html, body { overflow-x: clip; }
+html { -webkit-text-size-adjust: 100%; }
+body {
+  margin: 0;
+  background: var(--color-paper);
+  color: var(--color-ink);
+  font-family: var(--font-body);
+  font-size: var(--text-base);
+  line-height: 1.6;
+  font-variant-numeric: oldstyle-nums;
+  text-rendering: optimizeLegibility;
+}
+h1, h2, h3 {
+  font-family: var(--font-display);
+  font-style: normal;
+  font-weight: 300;
+  line-height: 1.08;
+  letter-spacing: -0.02em;
+  margin: 0;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+p { margin: 0; }
+a { color: inherit; text-decoration-thickness: var(--rule-hair); text-underline-offset: 0.2em; }
+a:hover { color: var(--color-accent); text-decoration-thickness: var(--rule-firm); }
+:focus-visible { outline: var(--rule-firm) solid var(--color-focus); outline-offset: 3px; }
+.wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-gutter); }
+.muted { color: var(--color-muted); }
+.visually-hidden {
+  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+}
+
+/* ── N6 masthead ─────────────────────────────── */
+.nav-mast { display: grid; gap: var(--space-2xs); padding-top: var(--space-md); text-align: center; }
+.mast-line {
+  font-variant-caps: all-small-caps;
+  letter-spacing: 0.1em;
+  font-size: var(--text-sm);
+  color: var(--color-muted);
+}
+.mast-name {
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: clamp(2.25rem, 5vw, 3.5rem);
+  letter-spacing: -0.015em;
+  line-height: 0.95;
+}
+.mast-nav ul {
+  display: flex; flex-wrap: wrap; justify-content: center;
+  gap: var(--space-2xs) var(--space-md);
+  list-style: none; padding: 0; margin: var(--space-2xs) 0 0;
+}
+.mast-nav a { white-space: nowrap; text-decoration: none; font-size: var(--text-sm); }
+.mast-nav a:hover { text-decoration: underline; }
+.mast-rule {
+  border: 0; height: 4px; margin: var(--space-sm) 0 0;
+  border-top: var(--rule-hair) solid var(--color-ink);
+  border-bottom: var(--rule-hair) solid var(--color-ink);
+}
+
+/* ── Orientation ─────────────────────────────── */
+.orient {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--space-md);
+  padding-top: var(--space-xl);
+  padding-bottom: var(--space-2xl);
+}
+.orient h1 { font-size: var(--text-display-s); max-width: 16ch; }
+.orient__lede { max-width: 54ch; font-size: var(--text-md); line-height: 1.5; color: var(--color-muted); }
+.orient__lede em { color: var(--color-ink); }
+@media (min-width: 60rem) {
+  .orient { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
+}
+
+/* ── The ledger (the map) ────────────────────── */
+.map {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--space-xl);
+  padding-bottom: var(--space-3xl);
+}
+@media (min-width: 60rem) {
+  .map { grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--space-2xl); }
+}
+.ledger-fig { margin: 0; min-width: 0; }
+.ledger-fig__title {
+  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
+  gap: var(--space-2xs) var(--space-md);
+  padding-bottom: var(--space-xs);
+  border-bottom: var(--rule-hair) solid var(--color-ink);
+}
+.ledger-fig__book { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); line-height: 1.1; }
+.ledger-fig__meta { font-size: var(--text-sm); color: var(--color-muted); }
+
+.ledger-scroll { overflow-x: auto; padding: var(--space-sm) 0 var(--space-2xs); }
+.ledger { min-width: 36rem; font-variant-numeric: tabular-nums lining-nums; }
+.ledger__row {
+  display: grid;
+  grid-template-columns: var(--ledger-label) minmax(0, 1fr);
+  align-items: center;
+}
+.ledger__cells {
+  display: grid;
+  grid-template-columns: repeat(var(--ledger-chapters), minmax(0, 1fr));
+  gap: var(--ledger-gap);
+  position: relative;
+  z-index: var(--z-cells);
+}
+.ledger__head .ledger__cells span {
+  text-align: center;
+  font-size: var(--text-xs);
+  color: var(--color-muted);
+  padding-bottom: var(--space-2xs);
+}
+.ledger__head .ledger__cells span.is-safe {
+  color: var(--color-accent);
+  font-weight: 600;
+}
+.ledger__name {
+  font-size: var(--text-sm);
+  padding-right: var(--space-xs);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ledger__row--you .ledger__name { color: var(--color-accent); font-weight: 600; }
+
+.ledger__body { position: relative; display: grid; gap: var(--space-2xs); }
+.ledger__body > .ledger__row { position: relative; z-index: var(--z-cells); }
+.ledger__wash {
+  position: absolute;
+  top: calc(var(--space-2xs) * -1);
+  bottom: calc(var(--space-2xs) * -1);
+  left: var(--ledger-label);
+  right: 0;
+  overflow: hidden;
+  z-index: var(--z-wash);
+  pointer-events: none;
+}
+.ledger__wash-fill {
+  position: absolute; inset: 0;
+  background: var(--color-safe-wash);
+  border-right: var(--rule-firm) solid var(--color-accent);
+  transform: translateX(calc(var(--safe-frac, 0) * 100% - 100%));
+  transition: transform var(--dur-long) var(--ease-out);
+}
+
+.cell {
+  position: relative;
+  display: block;
+  height: 1.9rem;
+  border: var(--rule-hair) solid var(--color-rule);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  font: inherit;
+  color: inherit;
+}
+.cell::before {
+  content: "";
+  position: absolute; inset: 0;
+  background: var(--color-ink-fill);
+  transform: scaleY(0);
+  transform-origin: bottom;
+  transition: transform var(--dur-short) var(--ease-out);
+}
+.cell.is-done { border-color: var(--color-ink-fill); }
+.cell.is-done::before { transform: scaleY(1); }
+.ledger__row--you .cell.is-done { border-color: var(--color-accent); }
+.ledger__row--you .cell::before { background: var(--color-accent); }
+
+button.cell { cursor: pointer; }
+button.cell:hover:not(.is-done) { border-color: var(--color-accent); }
+button.cell:hover.is-done::before { transform: scaleY(0.82); }
+button.cell:active::before { transform: scaleY(0.7); transition-duration: var(--dur-micro); }
+button.cell:focus-visible { outline-offset: 2px; }
+.ledger__row:not(.ledger__row--you) .cell:hover { border-color: var(--color-ink); }
+
+.ledger-fig__caption {
+  min-height: 3.4em;
+  margin-top: var(--space-sm);
+  padding-top: var(--space-xs);
+  border-top: var(--rule-hair) solid var(--color-rule);
+  font-size: var(--text-sm);
+  color: var(--color-muted);
+}
+.ledger-fig__caption strong { color: var(--color-ink); font-weight: 600; }
+.ledger-scroll-hint { display: none; font-size: var(--text-sm); color: var(--color-muted); }
+@media (max-width: 40rem) { .ledger-scroll-hint { display: block; } }
+
+/* the legend + annotations, beside the map */
+.notes { display: grid; gap: var(--space-lg); align-content: start; }
+.note { display: grid; gap: var(--space-3xs); }
+.note__term { font-variant-caps: all-small-caps; letter-spacing: 0.08em; font-size: var(--text-sm); color: var(--color-muted); }
+.note__big {
+  font-family: var(--font-display);
+  font-weight: 300;
+  font-size: var(--text-lg);
+  line-height: 1.15;
+  font-variant-numeric: lining-nums tabular-nums;
+}
+.note__big--accent { color: var(--color-accent); }
+.note__body { font-size: var(--text-sm); color: var(--color-muted); }
+.legend { display: grid; gap: var(--space-2xs); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); }
+.legend__item { display: flex; align-items: center; gap: var(--space-xs); }
+.swatch { inline-size: 1.25rem; block-size: 0.95rem; border-radius: var(--radius-sm); border: var(--rule-hair) solid var(--color-rule); flex: none; }
+.swatch--done { background: var(--color-ink-fill); border-color: var(--color-ink-fill); }
+.swatch--you { background: var(--color-accent); border-color: var(--color-accent); }
+.swatch--safe { background: var(--color-safe-wash); border-color: var(--color-safe-wash); border-right: var(--rule-firm) solid var(--color-accent); }
+.reset {
+  justify-self: start;
+  background: none; border: 0; padding: 0;
+  font: inherit; font-size: var(--text-sm);
+  color: var(--color-muted);
+  text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: var(--rule-hair);
+  cursor: pointer; white-space: nowrap;
+}
+.reset:hover { color: var(--color-accent); text-decoration-thickness: var(--rule-firm); }
+.reset:active { color: var(--color-ink); }
+.reset:disabled { color: var(--color-neutral); text-decoration: none; cursor: default; }
+
+/* ── How it reads ────────────────────────────── */
+.reads { padding-bottom: var(--space-3xl); }
+.reads h2 { font-size: var(--text-lg); max-width: 24ch; margin-bottom: var(--space-lg); }
+.reads__list { margin: 0; border-top: var(--rule-hair) solid var(--color-ink); }
+.reads__item {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--space-2xs);
+  padding: var(--space-md) 0;
+  border-bottom: var(--rule-hair) solid var(--color-rule);
+}
+.reads__item dt { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); line-height: 1.25; }
+.reads__item dd { margin: 0; max-width: 60ch; color: var(--color-muted); }
+@media (min-width: 48rem) {
+  .reads__item { grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); gap: var(--space-xl); }
+}
+
+/* ── Invite (C2 inline form) ─────────────────── */
+.invite {
+  padding: var(--space-2xl) 0 var(--space-3xl);
+  border-top: var(--rule-hair) solid var(--color-ink);
+}
+.invite h2 { font-size: var(--text-display-s); max-width: 14ch; margin-bottom: var(--space-sm); }
+.invite p.invite__lede { max-width: 50ch; color: var(--color-muted); margin-bottom: var(--space-lg); }
+.form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); max-width: 36rem; }
+.form__field { flex: 1 1 15rem; min-width: 0; }
+.form input {
+  width: 100%;
+  font: inherit;
+  color: var(--color-ink);
+  background: var(--color-paper);
+  border: 0;
+  border-bottom: var(--rule-firm) solid var(--color-ink);
+  border-radius: 0;
+  padding: var(--space-xs) var(--space-3xs);
+  transition: border-color var(--dur-micro) var(--ease-out);
+}
+.form input::placeholder { color: var(--color-muted); }
+.form input:hover { border-bottom-color: var(--color-accent); }
+.form input:focus-visible { outline: var(--rule-firm) solid var(--color-focus); outline-offset: 2px; }
+.form input[aria-invalid="true"] { border-bottom-color: var(--color-error); }
+.form input:disabled { color: var(--color-muted); border-bottom-style: dotted; }
+.btn {
+  flex: none;
+  font: inherit;
+  font-weight: 600;
+  white-space: nowrap;
+  color: var(--color-accent);
+  background: transparent;
+  border: var(--rule-firm) solid var(--color-accent);
+  border-radius: var(--radius-sm);
+  padding: var(--space-xs) var(--space-md);
+  cursor: pointer;
+  transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
+}
+.btn:hover { background: var(--color-accent); color: var(--color-paper); }
+.btn:active { transform: translateY(1px); }
+.btn:disabled { color: var(--color-neutral); border-color: var(--color-rule); background: transparent; cursor: default; transform: none; }
+.btn[aria-busy="true"] { cursor: progress; }
+.form__msg { flex-basis: 100%; min-height: 1.6em; font-size: var(--text-sm); color: var(--color-muted); }
+.form__msg.is-error { color: var(--color-error); }
+.form__msg.is-success { color: var(--color-success); }
+
+/* ── Ft6 letter close ────────────────────────── */
+.foot-letter { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); }
+.foot-letter__close { font-family: var(--font-display); font-weight: 300; font-size: var(--text-lg); line-height: 1.35; max-width: 30ch; }
+.foot-letter__sign { font-weight: 700; }
+.foot-letter__ps { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-md); max-width: 60ch; }
+
+/* ── Entrance — one orchestrated reveal ──────── */
+.reveal {
+  opacity: 0;
+  transform: translateY(8px);
+  animation: reveal var(--dur-long) var(--ease-out) forwards;
+  animation-delay: calc(var(--i, 0) * 60ms);
+}
+@keyframes reveal { to { opacity: 1; transform: none; } }
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 150ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 150ms !important;
+  }
+  .reveal { animation: reveal-reduced 150ms linear forwards; transform: none; }
+  @keyframes reveal-reduced { to { opacity: 1; } }
+  .btn:active { transform: none; }
+}
+</style>
+</head>
+<body>
+
+<header class="wrap nav-mast">
+  <p class="mast-line">A reading log for book clubs · Autumn 2026</p>
+  <p class="mast-name">Quillmoor</p>
+  <nav class="mast-nav" aria-label="Primary">
+    <ul>
+      <li><a href="#ledger">The ledger</a></li>
+      <li><a href="#how">How it reads</a></li>
+      <li><a href="#invite">Request an invite</a></li>
+    </ul>
+  </nav>
+  <hr class="mast-rule" aria-hidden="true">
+</header>
+
+<main>
+  <section class="wrap orient" aria-labelledby="orient-title">
+    <h1 id="orient-title" class="reveal" style="--i:0">Six readers. Twenty-four chapters. One safe line.</h1>
+    <p class="orient__lede reveal" style="--i:1">Quillmoor keeps a ledger of who in your club has finished which chapter. It finds the last chapter <em>everyone</em> has read and draws a line there, so Thursday’s talk stops where your slowest reader does.</p>
+  </section>
+
+  <section class="wrap map" id="ledger" aria-labelledby="ledger-title">
+    <figure class="ledger-fig">
+      <div class="ledger-fig__title">
+        <h2 id="ledger-title" class="ledger-fig__book">Persuasion</h2>
+        <p class="ledger-fig__meta">Jane Austen · 24 chapters · the Harbour Street club</p>
+      </div>
+
+      <div class="ledger-scroll">
+        <div class="ledger" id="ledger-grid">
+          <div class="ledger__row ledger__head" aria-hidden="true">
+            <span></span>
+            <div class="ledger__cells" id="ledger-head"></div>
+          </div>
+          <div class="ledger__body" id="ledger-body">
+            <div class="ledger__wash" aria-hidden="true"><div class="ledger__wash-fill" id="ledger-wash"></div></div>
+          </div>
+        </div>
+      </div>
+      <p class="ledger-scroll-hint">Swipe the ledger sideways to see later chapters.</p>
+
+      <figcaption class="ledger-fig__caption" id="ledger-caption" aria-live="polite"></figcaption>
+    </figure>
+
+    <aside class="notes" aria-label="Reading the ledger">
+      <div class="note">
+        <p class="note__term">Safe to discuss</p>
+        <p class="note__big note__big--accent" id="note-safe">—</p>
+        <p class="note__body" id="note-safe-body"></p>
+      </div>
+      <div class="note">
+        <p class="note__term">Furthest ahead</p>
+        <p class="note__big" id="note-ahead">—</p>
+        <p class="note__body" id="note-ahead-body"></p>
+      </div>
+      <div class="note">
+        <p class="note__term">Your row</p>
+        <p class="note__body">Tap a chapter in the bottom row to mark it read. Marking chapter 12 marks one to eleven too; tap your last chapter again to undo it. Arrow keys move along the row.</p>
+        <button type="button" class="reset" id="ledger-reset" disabled>Put my row back</button>
+      </div>
+      <div class="legend" aria-label="Legend">
+        <p class="legend__item"><span class="swatch swatch--done" aria-hidden="true"></span>Chapter finished</p>
+        <p class="legend__item"><span class="swatch swatch--you" aria-hidden="true"></span>Finished, by you</p>
+        <p class="legend__item"><span class="swatch" aria-hidden="true"></span>Not yet</p>
+        <p class="legend__item"><span class="swatch swatch--safe" aria-hidden="true"></span>Read by everyone</p>
+      </div>
+    </aside>
+  </section>
+
+  <section class="wrap reads" id="how" aria-labelledby="how-title">
+    <h2 id="how-title">What the ledger does, and what it won’t</h2>
+    <dl class="reads__list">
+      <div class="reads__item">
+        <dt>Mark a chapter</dt>
+        <dd>One tap when you finish it. No page counts, no streaks, no reading-speed leaderboard. A chapter is either read or it isn’t.</dd>
+      </div>
+      <div class="reads__item">
+        <dt>The line moves on its own</dt>
+        <dd>Quillmoor works out the last chapter every member has finished and moves the line there. Nobody has to tell the group they’re behind.</dd>
+      </div>
+      <div class="reads__item">
+        <dt>Margin notes wait for you</dt>
+        <dd>Notes are pinned to a chapter and stay folded until you’ve marked it. Readers who are ahead can write as much as they like, and nobody else sees it early.</dd>
+      </div>
+      <div class="reads__item">
+        <dt>One ledger per book</dt>
+        <dd>When the club picks its next title, the old ledger closes and goes into an archive you can look back through, with every note still in place.</dd>
+      </div>
+    </dl>
+  </section>
+
+  <section class="wrap invite" id="invite" aria-labelledby="invite-title">
+    <h2 id="invite-title">Open a ledger for your club.</h2>
+    <p class="invite__lede">We’re letting clubs in a few at a time. Leave an address and we’ll write when there’s room for yours. Nothing else lands in your inbox.</p>
+    <form class="form" id="invite-form" novalidate>
+      <div class="form__field">
+        <label class="visually-hidden" for="invite-email">Email address</label>
+        <input id="invite-email" name="email" type="email" autocomplete="email" placeholder="you@yourclub.org" aria-describedby="invite-msg" required>
+      </div>
+      <button class="btn" type="submit" id="invite-submit">Request an invite</button>
+      <p class="form__msg" id="invite-msg" role="status"></p>
+    </form>
+  </section>
+</main>
+
+<footer class="wrap foot-letter">
+  <p class="foot-letter__close">Yours, between chapters —<br><span class="foot-letter__sign">Quillmoor</span></p>
+  <p class="foot-letter__ps">P.S. Quillmoor is a made-up product. This page is a design study, and the form above doesn’t send anything anywhere.</p>
+</footer>
+
+<script>
+(() => {
+  const CHAPTERS = 24;
+  const members = [
+    { name: "Ines Varga",   short: "Ines",  read: 17 },
+    { name: "Theo Lindqvist", short: "Theo", read: 21 },
+    { name: "Ruth Adeyemi", short: "Ruth",  read: 9 },
+    { name: "Dev Malhotra", short: "Dev",   read: 14 },
+    { name: "Cleo Hart",    short: "Cleo",  read: 12 },
+    { name: "You",          short: "You",   read: 11, you: true }
+  ];
+  const YOU_START = 11;
+  const you = members.find(m => m.you);
+
+  const head = document.getElementById("ledger-head");
+  const body = document.getElementById("ledger-body");
+  const wash = document.getElementById("ledger-wash");
+  const caption = document.getElementById("ledger-caption");
+  const resetBtn = document.getElementById("ledger-reset");
+  const headCells = [];
+  const youButtons = [];
+
+  for (let c = 1; c <= CHAPTERS; c++) {
+    const s = document.createElement("span");
+    s.textContent = c;
+    head.appendChild(s);
+    headCells.push(s);
+  }
+
+  members.forEach((m, rowIndex) => {
+    const row = document.createElement("div");
+    row.className = "ledger__row reveal" + (m.you ? " ledger__row--you" : "");
+    row.style.setProperty("--i", Math.min(rowIndex + 2, 7));
+
+    const label = document.createElement("span");
+    label.className = "ledger__name";
+    label.textContent = m.short;
+    if (m.you) label.id = "you-label";
+    row.appendChild(label);
+
+    const cells = document.createElement("div");
+    cells.className = "ledger__cells";
+    if (m.you) {
+      cells.setAttribute("role", "group");
+      cells.setAttribute("aria-labelledby", "you-label");
+    } else {
+      cells.setAttribute("role", "img");
+      cells.setAttribute("aria-label", `${m.name} has finished chapters 1 to ${m.read}`);
+    }
+
+    m.cells = [];
+    for (let c = 1; c <= CHAPTERS; c++) {
+      const el = document.createElement(m.you ? "button" : "span");
+      el.className = "cell";
+      el.dataset.chapter = c;
+      if (m.you) {
+        el.type = "button";
+        el.tabIndex = -1;
+        el.setAttribute("aria-label", `Chapter ${c}`);
+        el.addEventListener("click", () => mark(c));
+        el.addEventListener("keydown", onYouKey);
+        youButtons.push(el);
+      }
+      el.addEventListener("mouseenter", () => describe(m, c));
+      el.addEventListener("focus", () => describe(m, c));
+      el.addEventListener("mouseleave", summarise);
+      el.addEventListener("blur", summarise);
+      cells.appendChild(el);
+      m.cells.push(el);
+    }
+    row.appendChild(cells);
+    body.appendChild(row);
+  });
+
+  function mark(c) {
+    you.read = (you.read === c) ? c - 1 : c;
+    render();
+    describe(you, c);
+  }
+
+  function onYouKey(e) {
+    const i = youButtons.indexOf(e.currentTarget);
+    let next = null;
+    if (e.key === "ArrowRight") next = Math.min(i + 1, CHAPTERS - 1);
+    else if (e.key === "ArrowLeft") next = Math.max(i - 1, 0);
+    else if (e.key === "Home") next = 0;
+    else if (e.key === "End") next = CHAPTERS - 1;
+    if (next === null) return;
+    e.preventDefault();
+    setRoving(next);
+    youButtons[next].focus();
+  }
+
+  function setRoving(index) {
+    youButtons.forEach((b, i) => { b.tabIndex = i === index ? 0 : -1; });
+  }
+
+  function safeLine() { return Math.min(...members.map(m => m.read)); }
+  function holders() { const s = safeLine(); return members.filter(m => m.read === s); }
+  function leader() { return members.reduce((a, b) => (b.read > a.read ? b : a)); }
+
+  function listNames(list) {
+    const names = list.map(m => (m.you ? "you" : m.short));
+    if (names.length <= 1) return names[0] || "";
+    return names.slice(0, -1).join(", ") + " and " + names[names.length - 1];
+  }
+
+  function render() {
+    members.forEach(m => {
+      m.cells.forEach((el, i) => {
+        const done = i < m.read;
+        el.classList.toggle("is-done", done);
+        if (m.you) el.setAttribute("aria-pressed", String(done));
+      });
+    });
+
+    const s = safeLine();
+    wash.style.setProperty("--safe-frac", s / CHAPTERS);
+    headCells.forEach((h, i) => h.classList.toggle("is-safe", i + 1 === s));
+
+    const safeEl = document.getElementById("note-safe");
+    const safeBody = document.getElementById("note-safe-body");
+    if (s === 0) {
+      safeEl.textContent = "Nothing yet";
+      safeBody.textContent = `${capitalise(listNames(holders()))} hasn’t finished chapter one, so the line sits before the first page.`;
+    } else {
+      safeEl.textContent = s === 1 ? "Chapter 1" : `Chapters 1–${s}`;
+      const h = holders();
+      safeBody.textContent = `${capitalise(listNames(h))} ${h.length === 1 && !h[0].you ? "is" : "are"} holding the line at chapter ${s}. Anything past it stays out of the discussion.`;
+    }
+
+    const lead = leader();
+    document.getElementById("note-ahead").textContent = `${lead.you ? "You" : lead.short}, chapter ${lead.read}`;
+    document.getElementById("note-ahead-body").textContent = lead.read > s
+      ? `Notes on chapters ${s + 1}–${lead.read} stay folded until each reader gets there.`
+      : "Everyone is on the same page. Literally.";
+
+    resetBtn.disabled = you.read === YOU_START;
+    const rovingIndex = Math.min(you.read, CHAPTERS - 1);
+    if (!youButtons.some(b => b === document.activeElement)) setRoving(rovingIndex);
+    summarise();
+  }
+
+  function describe(m, c) {
+    const who = m.you ? "You" : m.name;
+    const done = c <= m.read;
+    const verb = m.you ? (done ? "have finished" : "haven’t reached") : (done ? "has finished" : "hasn’t reached");
+    const s = safeLine();
+    const zone = c <= s ? "Everyone has read it, so it’s fair game on Thursday." : "Someone is still short of it. Keep it out of the discussion.";
+    caption.innerHTML = `<strong>${who}</strong> ${verb} chapter ${c}. ${zone}`;
+  }
+
+  function summarise() {
+    if (document.activeElement && document.activeElement.classList && document.activeElement.classList.contains("cell")) return;
+    const s = safeLine();
+    caption.innerHTML = s === 0
+      ? "The shaded band shows what everyone has read. It’s empty for now."
+      : `The shaded band runs to <strong>chapter ${s}</strong>, the last chapter all six readers have finished. Hover or focus a square to see whose it is.`;
+  }
+
+  function capitalise(str) { return str.charAt(0).toUpperCase() + str.slice(1); }
+
+  resetBtn.addEventListener("click", () => { you.read = YOU_START; render(); });
+
+  render();
+
+  /* invite form: fictional product, so submission is simulated locally */
+  const form = document.getElementById("invite-form");
+  const input = document.getElementById("invite-email");
+  const submit = document.getElementById("invite-submit");
+  const msg = document.getElementById("invite-msg");
+
+  function setMsg(text, kind) {
+    msg.textContent = text;
+    msg.classList.toggle("is-error", kind === "error");
+    msg.classList.toggle("is-success", kind === "success");
+  }
+
+  input.addEventListener("input", () => {
+    if (input.getAttribute("aria-invalid") === "true") {
+      input.removeAttribute("aria-invalid");
+      setMsg("", null);
+    }
+  });
+
+  form.addEventListener("submit", e => {
+    e.preventDefault();
+    const value = input.value.trim();
+    if (!value) {
+      input.setAttribute("aria-invalid", "true");
+      setMsg("Add an email address so we know where to write.", "error");
+      input.focus();
+      return;
+    }
+    if (!input.checkValidity()) {
+      input.setAttribute("aria-invalid", "true");
+      setMsg("That address is missing something. Check for the @ and the domain.", "error");
+      input.focus();
+      return;
+    }
+    submit.disabled = true;
+    input.disabled = true;
+    submit.setAttribute("aria-busy", "true");
+    submit.textContent = "Sending…";
+    setMsg("", null);
+    setTimeout(() => {
+      submit.removeAttribute("aria-busy");
+      submit.textContent = "On the list";
+      setMsg(`Noted. We’ll write to ${value} when there’s room for your club.`, "success");
+    }, 700);
+  });
+})();
+</script>
+</body>
+</html>
diff --git a/layers/registry/server/demos/tt-a1i/archify/archify/diagram.html b/layers/registry/server/demos/tt-a1i/archify/archify/diagram.html
new file mode 100644
index 00000000..43ad89eb
--- /dev/null
+++ b/layers/registry/server/demos/tt-a1i/archify/archify/diagram.html
@@ -0,0 +1,324 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Ferncastle — Book Reservation Architecture</title>
+<style>
+  :root {
+    --bg: #0b1120; --panel: #111a2e; --grid: #1a2540; --text: #e2e8f0; --muted: #94a3b8;
+    --client: #22d3ee; --edge: #a78bfa; --service: #34d399; --data: #fbbf24; --async: #f472b6; --security: #f87171;
+    --line: #64748b;
+  }
+  [data-theme="light"] {
+    --bg: #f8fafc; --panel: #ffffff; --grid: #e2e8f0; --text: #0f172a; --muted: #475569;
+    --client: #0891b2; --edge: #7c3aed; --service: #059669; --data: #b45309; --async: #db2777; --security: #dc2626;
+    --line: #94a3b8;
+  }
+  * { box-sizing: border-box; }
+  body { margin: 0; background: var(--bg); color: var(--text);
+    font: 14px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
+  header { display: flex; align-items: center; justify-content: space-between; gap: 16px;
+    padding: 20px 28px 8px; flex-wrap: wrap; }
+  h1 { margin: 0; font-size: 20px; letter-spacing: .01em; }
+  header p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
+  .controls { display: flex; gap: 8px; }
+  button { background: var(--panel); color: var(--text); border: 1px solid var(--grid);
+    border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; }
+  button:hover { border-color: var(--edge); }
+  button[aria-pressed="true"] { border-color: var(--client); color: var(--client); }
+  main { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; padding: 8px 28px 28px; }
+  @media (max-width: 1000px) { main { grid-template-columns: 1fr; } }
+  .canvas { background: var(--panel); border: 1px solid var(--grid); border-radius: 14px; overflow: auto; }
+  svg { display: block; width: 100%; height: auto; min-width: 760px; }
+  .bg-grid { stroke: var(--grid); stroke-width: 1; }
+
+  .node rect { fill: var(--panel); stroke-width: 1.6; rx: 10; }
+  .node .title { fill: var(--text); font-size: 14px; font-weight: 600; }
+  .node .sub { fill: var(--muted); font-size: 11.5px; }
+  .node .tag { font-size: 10px; font-weight: 700; letter-spacing: .08em; }
+  .node { cursor: pointer; transition: opacity .2s; }
+  .client rect { stroke: var(--client); } .client .tag { fill: var(--client); }
+  .edgeK rect { stroke: var(--edge); } .edgeK .tag { fill: var(--edge); }
+  .security rect { stroke: var(--security); } .security .tag { fill: var(--security); }
+  .service rect { stroke: var(--service); } .service .tag { fill: var(--service); }
+  .data rect { stroke: var(--data); } .data .tag { fill: var(--data); }
+  .async rect { stroke: var(--async); } .async .tag { fill: var(--async); }
+
+  .boundary rect { fill: none; stroke: var(--line); stroke-dasharray: 6 5; rx: 16; }
+  .boundary text { fill: var(--muted); font-size: 11px; letter-spacing: .1em; font-weight: 600; }
+
+  .link path { fill: none; stroke: var(--line); stroke-width: 1.6; transition: stroke .2s, opacity .2s; }
+  .link.async path { stroke-dasharray: 5 4; }
+  .link .num { fill: var(--bg); stroke: var(--line); stroke-width: 1.4; }
+  .link .num-t { fill: var(--text); font-size: 10.5px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
+  .link .lbl { fill: var(--muted); font-size: 11px; }
+  .link .lbl-bg { fill: var(--panel); opacity: .9; }
+
+  .dim .node:not(.on), .dim .link:not(.on) { opacity: .18; }
+  .link.on path { stroke: var(--client); stroke-width: 2.4; }
+  .link.on .num { stroke: var(--client); }
+  .link.on .lbl { fill: var(--text); }
+  .node.on rect { stroke-width: 2.6; }
+
+  aside { background: var(--panel); border: 1px solid var(--grid); border-radius: 14px; padding: 18px 18px 8px; }
+  aside h2 { margin: 0 0 10px; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
+  ol { margin: 0; padding: 0; list-style: none; counter-reset: s; }
+  ol li { counter-increment: s; position: relative; padding: 8px 8px 8px 36px; border-radius: 8px;
+    cursor: pointer; margin-bottom: 2px; font-size: 13px; }
+  ol li::before { content: counter(s); position: absolute; left: 8px; top: 8px; width: 20px; height: 20px;
+    border-radius: 50%; border: 1.4px solid var(--line); display: grid; place-items: center;
+    font-size: 10.5px; font-weight: 700; }
+  ol li:hover, ol li.on { background: var(--grid); }
+  ol li.on::before { border-color: var(--client); color: var(--client); }
+  ol li small { display: block; color: var(--muted); font-size: 11.5px; }
+  .legend { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 16px 0 10px; padding-top: 12px;
+    border-top: 1px solid var(--grid); font-size: 12px; color: var(--muted); }
+  .legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px;
+    border: 2px solid currentColor; margin-right: 6px; vertical-align: -1px; }
+  .legend .l-client { color: var(--client); } .legend .l-edge { color: var(--edge); }
+  .legend .l-sec { color: var(--security); } .legend .l-svc { color: var(--service); }
+  .legend .l-data { color: var(--data); } .legend .l-async { color: var(--async); }
+  .note { color: var(--muted); font-size: 11.5px; margin: 0 0 10px; }
+</style>
+</head>
+<body>
+<header>
+  <div>
+    <h1>Ferncastle — Book Reservation Flow</h1>
+    <p>Fictional library app · architecture view · numbered path shows a patron placing a hold</p>
+  </div>
+  <div class="controls">
+    <button id="play" aria-pressed="false">▶ Trace reservation</button>
+    <button id="reset">Clear</button>
+    <button id="theme">☀ Light</button>
+  </div>
+</header>
+
+<main>
+  <div class="canvas">
+    <svg id="diagram" viewBox="0 0 1040 640" role="img" aria-labelledby="svgTitle svgDesc">
+      <title id="svgTitle">Ferncastle architecture</title>
+      <desc id="svgDesc">Phone app calls the API gateway, which verifies tokens with the auth service and routes to the catalog service. The catalog service reads the search index and Postgres, enqueues a hold on the holds queue, and the push notifier consumes it to notify the phone app.</desc>
+      <defs>
+        <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
+          <path d="M40 0H0V40" class="bg-grid" fill="none"/>
+        </pattern>
+        <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+          <path d="M0 0L10 5L0 10z" fill="context-stroke"/>
+        </marker>
+      </defs>
+      <rect width="1040" height="640" fill="url(#grid)" opacity=".5"/>
+
+      <!-- Boundaries -->
+      <g class="boundary">
+        <rect x="250" y="40" width="770" height="580"/>
+        <text x="268" y="62">FERNCASTLE CLOUD</text>
+      </g>
+      <g class="boundary">
+        <rect x="560" y="90" width="440" height="510"/>
+        <text x="578" y="112">PRIVATE SERVICE NETWORK</text>
+      </g>
+
+      <!-- Links (drawn under nodes) -->
+      <g id="links">
+        <g class="link" data-step="1">
+          <path d="M200 330 H300" marker-end="url(#arrow)"/>
+          <rect class="lbl-bg" x="198" y="296" width="104" height="18" rx="4"/>
+          <text class="lbl" x="204" y="309">POST /holds</text>
+          <circle class="num" cx="250" cy="330" r="10"/><text class="num-t" x="250" y="330">1</text>
+        </g>
+        <g class="link" data-step="2">
+          <path d="M380 290 V200" marker-end="url(#arrow)"/>
+          <rect class="lbl-bg" x="388" y="232" width="96" height="18" rx="4"/>
+          <text class="lbl" x="394" y="245">verify JWT</text>
+          <circle class="num" cx="380" cy="245" r="10"/><text class="num-t" x="380" y="245">2</text>
+        </g>
+        <g class="link" data-step="3">
+          <path d="M460 330 H600" marker-end="url(#arrow)"/>
+          <rect class="lbl-bg" x="478" y="296" width="108" height="18" rx="4"/>
+          <text class="lbl" x="484" y="309">route request</text>
+          <circle class="num" cx="530" cy="330" r="10"/><text class="num-t" x="530" y="330">3</text>
+        </g>
+        <g class="link" data-step="4">
+          <path d="M760 290 V210 H820" marker-end="url(#arrow)"/>
+          <rect class="lbl-bg" x="676" y="232" width="78" height="18" rx="4"/>
+          <text class="lbl" x="682" y="245">find title</text>
+          <circle class="num" cx="760" cy="250" r="10"/><text class="num-t" x="760" y="250">4</text>
+        </g>
+        <g class="link" data-step="5">
+          <path d="M760 330 H820" marker-end="url(#arrow)"/>
+          <circle class="num" cx="790" cy="330" r="10"/><text class="num-t" x="790" y="330">5</text>
+          <rect class="lbl-bg" x="770" y="346" width="44" height="34" rx="4"/>
+          <text class="lbl" x="772" y="359">lock +</text>
+          <text class="lbl" x="772" y="374">insert</text>
+        </g>
+        <g class="link async" data-step="6">
+          <path d="M680 370 V460" marker-end="url(#arrow)"/>
+          <rect class="lbl-bg" x="690" y="402" width="104" height="18" rx="4"/>
+          <text class="lbl" x="696" y="415">HoldPlaced event</text>
+          <circle class="num" cx="680" cy="410" r="10"/><text class="num-t" x="680" y="410">6</text>
+        </g>
+        <g class="link" data-step="7">
+          <path d="M600 350 H460" marker-end="url(#arrow)"/>
+          <rect class="lbl-bg" x="466" y="378" width="96" height="18" rx="4"/>
+          <text class="lbl" x="472" y="391">202 · queue #</text>
+          <circle class="num" cx="570" cy="350" r="10"/><text class="num-t" x="570" y="350">7</text>
+        </g>
+        <g class="link" data-step="7">
+          <path d="M300 360 H200" marker-end="url(#arrow)"/>
+        </g>
+        <g class="link async" data-step="8">
+          <path d="M760 500 H820" marker-end="url(#arrow)"/>
+          <circle class="num" cx="790" cy="500" r="10"/><text class="num-t" x="790" y="500">8</text>
+          <rect class="lbl-bg" x="768" y="516" width="48" height="18" rx="4"/>
+          <text class="lbl" x="772" y="529">consume</text>
+        </g>
+        <g class="link async" data-step="9">
+          <path d="M900 540 V580 H120 V375" marker-end="url(#arrow)"/>
+          <rect class="lbl-bg" x="410" y="562" width="190" height="18" rx="4"/>
+          <text class="lbl" x="416" y="575">push: "Your hold is placed"</text>
+          <circle class="num" cx="380" cy="580" r="10"/><text class="num-t" x="380" y="580">9</text>
+        </g>
+      </g>
+
+      <!-- Nodes -->
+      <g class="node client" data-node="app" transform="translate(40 290)">
+        <rect width="160" height="85"/>
+        <text class="tag" x="14" y="22">CLIENT</text>
+        <text class="title" x="14" y="44">Phone App</text>
+        <text class="sub" x="14" y="62">iOS / Android patron app</text>
+      </g>
+      <g class="node edgeK" data-node="gw" transform="translate(300 290)">
+        <rect width="160" height="80"/>
+        <text class="tag" x="14" y="22">EDGE</text>
+        <text class="title" x="14" y="44">API Gateway</text>
+        <text class="sub" x="14" y="62">TLS · rate limit · routing</text>
+      </g>
+      <g class="node security" data-node="auth" transform="translate(300 120)">
+        <rect width="160" height="80"/>
+        <text class="tag" x="14" y="22">SECURITY</text>
+        <text class="title" x="14" y="44">Auth Service</text>
+        <text class="sub" x="14" y="62">patron login · JWT verify</text>
+      </g>
+      <g class="node service" data-node="catalog" transform="translate(600 290)">
+        <rect width="160" height="80"/>
+        <text class="tag" x="14" y="22">SERVICE</text>
+        <text class="title" x="14" y="44">Catalog Service</text>
+        <text class="sub" x="14" y="62">titles · copies · holds API</text>
+      </g>
+      <g class="node data" data-node="search" transform="translate(820 170)">
+        <rect width="160" height="80"/>
+        <text class="tag" x="14" y="22">INDEX</text>
+        <text class="title" x="14" y="44">Search Index</text>
+        <text class="sub" x="14" y="62">title / author / ISBN</text>
+      </g>
+      <g class="node data" data-node="pg" transform="translate(820 290)">
+        <rect width="160" height="80"/>
+        <text class="tag" x="14" y="22">DATABASE</text>
+        <text class="title" x="14" y="44">Postgres</text>
+        <text class="sub" x="14" y="62">source of truth · holds</text>
+      </g>
+      <g class="node async" data-node="queue" transform="translate(600 460)">
+        <rect width="160" height="80"/>
+        <text class="tag" x="14" y="22">QUEUE</text>
+        <text class="title" x="14" y="44">Holds Queue</text>
+        <text class="sub" x="14" y="62">HoldPlaced / HoldReady</text>
+      </g>
+      <g class="node async" data-node="push" transform="translate(820 460)">
+        <rect width="160" height="80"/>
+        <text class="tag" x="14" y="22">WORKER</text>
+        <text class="title" x="14" y="44">Push Notifier</text>
+        <text class="sub" x="14" y="62">APNs / FCM fan-out</text>
+      </g>
+    </svg>
+  </div>
+
+  <aside>
+    <h2>Reservation steps</h2>
+    <ol id="steps">
+      <li data-step="1">Patron taps <b>Reserve</b><small>Phone App → API Gateway · POST /holds {bookId}</small></li>
+      <li data-step="2">Token checked<small>Gateway → Auth Service · reject with 401 if invalid</small></li>
+      <li data-step="3">Request routed<small>Gateway → Catalog Service with patron id</small></li>
+      <li data-step="4">Title resolved<small>Catalog → Search Index · confirm edition &amp; branch copies</small></li>
+      <li data-step="5">Hold written<small>Catalog → Postgres · lock copy row, insert hold, assign queue position</small></li>
+      <li data-step="6">Event published<small>Catalog → Holds Queue · HoldPlaced (async)</small></li>
+      <li data-step="7">Patron gets answer<small>Catalog → Gateway → App · 202 Accepted + queue position</small></li>
+      <li data-step="8">Notifier consumes<small>Holds Queue → Push Notifier</small></li>
+      <li data-step="9">Confirmation pushed<small>Push Notifier → Phone App · later also “ready for pickup”</small></li>
+    </ol>
+    <div class="legend">
+      <span class="l-client">Client</span><span class="l-edge">Edge</span><span class="l-sec">Security</span>
+      <span class="l-svc">Service</span><span class="l-data">Data</span><span class="l-async">Async</span>
+    </div>
+    <p class="note">Solid = synchronous request · dashed = asynchronous event. Click a step or a component to highlight it.</p>
+  </aside>
+</main>
+
+<script>
+(() => {
+  const svg = document.getElementById('diagram');
+  const links = [...svg.querySelectorAll('.link')];
+  const items = [...document.querySelectorAll('#steps li')];
+  // Which components each step touches
+  const touches = {
+    1: ['app', 'gw'], 2: ['gw', 'auth'], 3: ['gw', 'catalog'], 4: ['catalog', 'search'],
+    5: ['catalog', 'pg'], 6: ['catalog', 'queue'], 7: ['catalog', 'gw', 'app'],
+    8: ['queue', 'push'], 9: ['push', 'app']
+  };
+  let timer = null;
+
+  function clear() {
+    svg.classList.remove('dim');
+    svg.querySelectorAll('.on').forEach(el => el.classList.remove('on'));
+    items.forEach(li => li.classList.remove('on'));
+  }
+
+  function showSteps(steps) {
+    clear();
+    if (!steps.length) return;
+    svg.classList.add('dim');
+    steps.forEach(s => {
+      links.filter(l => l.dataset.step == s).forEach(l => l.classList.add('on'));
+      touches[s].forEach(n => svg.querySelector(`[data-node="${n}"]`).classList.add('on'));
+      items.find(li => li.dataset.step == s)?.classList.add('on');
+    });
+  }
+
+  function stop() {
+    clearInterval(timer); timer = null;
+    document.getElementById('play').setAttribute('aria-pressed', 'false');
+  }
+
+  items.forEach(li => li.addEventListener('click', () => { stop(); showSteps([+li.dataset.step]); }));
+
+  svg.querySelectorAll('.node').forEach(node => node.addEventListener('click', () => {
+    stop();
+    const id = node.dataset.node;
+    showSteps(Object.keys(touches).filter(s => touches[s].includes(id)).map(Number));
+  }));
+
+  document.getElementById('play').addEventListener('click', e => {
+    if (timer) { stop(); return; }
+    e.currentTarget.setAttribute('aria-pressed', 'true');
+    let s = 1;
+    showSteps([s]);
+    timer = setInterval(() => {
+      s += 1;
+      if (s > 9) { stop(); showSteps([1,2,3,4,5,6,7,8,9]); return; }
+      showSteps([s]);
+    }, 1100);
+  });
+
+  document.getElementById('reset').addEventListener('click', () => { stop(); clear(); });
+
+  document.getElementById('theme').addEventListener('click', e => {
+    const root = document.documentElement;
+    const light = root.dataset.theme !== 'light';
+    root.dataset.theme = light ? 'light' : 'dark';
+    e.currentTarget.textContent = light ? '☾ Dark' : '☀ Light';
+  });
+})();
+</script>
+</body>
+</html>
diff --git a/layers/registry/server/demos/unclecatvn/agent-skills/flow-diagram/flow.html b/layers/registry/server/demos/unclecatvn/agent-skills/flow-diagram/flow.html
new file mode 100644
index 00000000..70a63409
--- /dev/null
+++ b/layers/registry/server/demos/unclecatvn/agent-skills/flow-diagram/flow.html
@@ -0,0 +1,620 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Sleetgarden: from one upload to three thumbnails</title>
+<style>
+:root {
+  color-scheme: light dark;
+  --bg:     light-dark(#f4f5f7, #0d1117);
+  --panel:  light-dark(#ffffff, #161b22);
+  --text:   light-dark(#111827, #e6edf3);
+  --muted:  light-dark(#6b7280, #8b949e);
+  --line:   light-dark(#d1d5db, #3d444d);
+  --line2:  light-dark(#e5e7eb, #2a3038);
+  --focal:  light-dark(#eff6ff, #132238);
+  --di:     light-dark(#2563eb, #5b9bff);
+  --ve:     light-dark(#059669, #34d399);
+  --sec:    light-dark(#dc2626, #f87171);
+  --script: light-dark(#7c3aed, #a78bfa);
+  --pipe:   light-dark(#d97706, #fbbf24);
+  --sky:    light-dark(#0284c7, #38bdf8);
+}
+:root[data-theme="light"] { color-scheme: light; }
+:root[data-theme="dark"]  { color-scheme: dark; }
+
+* { box-sizing: border-box; }
+html, body { height: 100%; margin: 0; }
+body {
+  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  background: var(--bg); color: var(--text);
+  display: flex; flex-direction: column; overflow: hidden;
+}
+
+/* ---------- header ---------- */
+header { display: flex; align-items: flex-start; gap: 16px; padding: 14px 20px 6px; }
+header .titles { flex: 1; min-width: 0; }
+h1 { font-size: 18px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
+.sub { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
+.icon-btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+  height: 32px; min-width: 32px; padding: 0 8px; border-radius: 8px;
+  border: 1px solid var(--line); background: var(--panel); color: var(--text);
+  cursor: pointer; font: inherit; font-size: 12px;
+}
+.icon-btn:hover { border-color: var(--muted); }
+.icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
+#theme-toggle .moon { display: none; }
+:root[data-theme="dark"] #theme-toggle .sun { display: none; }
+:root[data-theme="dark"] #theme-toggle .moon { display: inline; }
+
+/* ---------- chips ---------- */
+.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 20px 12px; }
+.chip {
+  display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px;
+  border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
+  font: inherit; font-size: 12.5px; cursor: pointer;
+}
+.chip .dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
+.chip .name { color: var(--text); }
+.chip[aria-pressed="true"] { border-color: currentColor; box-shadow: 0 0 0 1px currentColor inset; }
+.chips .hint { color: var(--muted); font-size: 12px; margin-left: 4px; }
+
+/* ---------- 2-pane layout ---------- */
+main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; padding: 0 20px 18px; }
+.board {
+  position: relative; min-height: 0; background: var(--panel);
+  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
+}
+.zoombar {
+  position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; gap: 4px; align-items: center;
+  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 3px;
+}
+.zoombar button { border: 0; background: transparent; color: var(--text); width: 28px; height: 26px; border-radius: 6px; cursor: pointer; font-size: 15px; }
+.zoombar button:hover { background: var(--bg); }
+.zoombar .pct { font-size: 11.5px; color: var(--muted); min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; }
+.canvas { position: absolute; inset: 0; cursor: grab; touch-action: none; }
+.canvas.panning { cursor: grabbing; }
+.canvas svg { width: 100%; height: 100%; display: block; user-select: none; }
+
+aside { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-right: 2px; }
+.card {
+  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px;
+  animation: slide-in .25s ease-out;
+}
+.card h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 14px; font-weight: 680; }
+.card h2 .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
+.card p { margin: 0 0 8px; color: var(--muted); font-size: 12.5px; }
+.card ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
+.card li { font-size: 12.5px; padding: 4px 6px; border-radius: 7px; transition: background .2s; }
+.card li.hl { background: color-mix(in srgb, var(--c) 14%, transparent); }
+.card .n {
+  display: inline-block; min-width: 22px; padding: 0 5px; margin-right: 6px; border-radius: 9px;
+  border: 1.3px solid var(--c); color: var(--c); font-size: 10.5px; font-weight: 700; text-align: center; line-height: 16px;
+}
+.card .n.ret { --c: var(--ve); }
+.card code { font-size: 11.5px; background: var(--bg); padding: 0 4px; border-radius: 4px; }
+.card.hidden { display: none; }
+@keyframes slide-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
+
+/* ---------- SVG color mapping: light hex in attributes, CSS remaps per theme ---------- */
+svg [stroke="#2563eb"] { stroke: var(--di); }     svg [fill="#2563eb"] { fill: var(--di); }
+svg [stroke="#059669"] { stroke: var(--ve); }     svg [fill="#059669"] { fill: var(--ve); }
+svg [stroke="#dc2626"] { stroke: var(--sec); }    svg [fill="#dc2626"] { fill: var(--sec); }
+svg [stroke="#7c3aed"] { stroke: var(--script); } svg [fill="#7c3aed"] { fill: var(--script); }
+svg [stroke="#d97706"] { stroke: var(--pipe); }   svg [fill="#d97706"] { fill: var(--pipe); }
+svg [stroke="#0284c7"] { stroke: var(--sky); }    svg [fill="#0284c7"] { fill: var(--sky); }
+svg [stroke="#d1d5db"] { stroke: var(--line); }
+svg [stroke="#e5e7eb"] { stroke: var(--line2); }
+svg [fill="#ffffff"]   { fill: var(--panel); }
+svg [fill="#eff6ff"]   { fill: var(--focal); }
+svg [fill="#111827"]   { fill: var(--text); }
+svg [fill="#6b7280"]   { fill: var(--muted); }
+
+/* text halo so a nearby line never makes a label unreadable */
+svg text { paint-order: stroke; stroke: var(--panel); stroke-width: 3px; stroke-linejoin: round; font-family: inherit; }
+svg .badge text { stroke-width: 0; }
+
+/* ---------- interaction ---------- */
+svg [data-flow], svg [data-flows], svg .region { transition: opacity .25s; }
+svg .dim { opacity: .1; }
+svg .hit { stroke: transparent; stroke-width: 14; fill: none; cursor: pointer; }
+svg .badge, svg .lbl { cursor: pointer; }
+svg .flow-dot { opacity: 0; transition: opacity .25s; pointer-events: none; }
+svg .flow-dot.flowing { opacity: 1; }
+svg .flow-ping { display: none; pointer-events: none; }
+svg .flow-ping.flowing { display: inline; }
+svg .flow-ping-ring { fill: none; transform-box: fill-box; transform-origin: center; animation: flow-ping 2.6s ease-out infinite; }
+@keyframes flow-ping {
+  0%   { transform: scale(1);    opacity: .35; }
+  65%  { transform: scale(1.05); opacity: 0; }
+  100% { transform: scale(1.05); opacity: 0; }
+}
+@media (prefers-reduced-motion: reduce) {
+  svg .flow-dot { display: none; }
+  svg .flow-ping-ring { animation: none; opacity: .3; }
+  .card { animation: none; }
+}
+
+@media (max-width: 900px) {
+  body { overflow: auto; }
+  main { grid-template-columns: 1fr; grid-template-rows: 60vh auto; }
+}
+
+/* ---------- print: flat, static, everything visible ---------- */
+@media print {
+  body { display: block; overflow: visible; background: #fff; }
+  #theme-toggle, .zoombar, .chips .hint { display: none; }
+  main { display: block; padding: 0; }
+  .board { position: static; height: auto; border: 0; }
+  .canvas { position: static; }
+  .canvas svg { height: auto; }
+  aside { overflow: visible; display: block; }
+  .card, .card.hidden { display: block; break-inside: avoid; margin-top: 10px; animation: none; }
+  svg .dim { opacity: 1; }
+  svg .flow-dot, svg .flow-ping { display: none !important; }
+}
+</style>
+</head>
+<body>
+
+<header>
+  <div class="titles">
+    <h1>Sleetgarden: from one upload to three thumbnails</h1>
+    <p class="sub">Solid line = request · dashed green = response or return leg · a small arc = two lines passing over each other. Scroll to zoom, drag to pan.</p>
+  </div>
+  <button class="icon-btn" id="theme-toggle" type="button" title="Toggle light / dark" aria-label="Toggle light or dark theme">
+    <svg class="sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
+    <svg class="moon" viewBox="0 0 24 24"><path d="M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5z"/></svg>
+  </button>
+</header>
+
+<nav class="chips" aria-label="Flows">
+  <button class="chip" type="button" data-flow="u" style="color:var(--di)"><span class="dot"></span><span class="name">1–5 Upload</span></button>
+  <button class="chip" type="button" data-flow="s" style="color:var(--sec)"><span class="dot"></span><span class="name">S Virus scan</span></button>
+  <button class="chip" type="button" data-flow="r" style="color:var(--pipe)"><span class="dot"></span><span class="name">R Resize to 3 thumbnails</span></button>
+  <button class="chip" type="button" data-flow="f" style="color:var(--script)"><span class="dot"></span><span class="name">F Resize fails</span></button>
+  <button class="chip" type="button" data-flow="d" style="color:var(--sky)"><span class="dot"></span><span class="name">D Delivery via CDN</span></button>
+  <span class="hint">Click a flow, line, or numbered badge to follow it from start to finish. Press Esc to clear.</span>
+</nav>
+
+<main>
+<section class="board">
+  <div class="zoombar">
+    <button type="button" id="z-out" title="Zoom out">−</button>
+    <span class="pct" id="z-pct">100%</span>
+    <button type="button" id="z-in" title="Zoom in">+</button>
+    <button type="button" id="z-fit" title="Fit to view">⤢</button>
+  </div>
+  <div class="canvas" id="canvas">
+<svg id="diagram" viewBox="0 0 1480 700" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Sleetgarden photo upload and thumbnail pipeline">
+<!-- LAYOUT PLAN
+  Columns (x): A 40–240 | B 340–540 | C 640–840 | D 940–1140 | E 1240–1440   (100px gutters)
+  Rows    (y): 1 90–166 | 2 330–406 (storage 330–426) | 3 580–656
+  Cells: A1 client · B1 Upload API (focal) · C1 virus scan · D1 resize queue · E1 dead-letter queue
+         B2 photo DB · C2 object storage · D2 image workers · E2 on-call alert · C3 CDN
+  Regions: "Upload & scan" 316–864 × 46–452 (B1,C1,B2,C2) · "Async resize" 916–1464 × 46–452 (D1,E1,D2,E2)
+  Corridors:
+    x=590   B|C gutter, U2 API→storage (down from y=156 to 360)
+    x=110 / x=170   left margin under client, D4 (return) / D1 (out) down to CDN row
+    y=490   below both regions, R5 workers→DB (status write, also used by F2)
+    y=600 / y=630   row 3, D1 / D4 between client column and CDN
+  Edge use: API left = U1 in / U5 out · API right = S1 out, S3 in, U2 out · API bottom = U3 out / U4 in
+            queue bottom = R2 out / F1 in · storage right = R3 out / R4 in · storage bottom = D2 in / D3 out
+  Forced crossings: R5 (y=490) over D2 (x=720) and D3 (x=780) → hops on R5 (amber vs sky/green).
+-->
+<defs>
+  <marker id="m-di"  viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0,0 L10,5 L0,10 z" fill="#2563eb"/></marker>
+  <marker id="m-ve"  viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0,0 L10,5 L0,10 z" fill="#059669"/></marker>
+  <marker id="m-sec" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0,0 L10,5 L0,10 z" fill="#dc2626"/></marker>
+  <marker id="m-sc"  viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0,0 L10,5 L0,10 z" fill="#7c3aed"/></marker>
+  <marker id="m-pi"  viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0,0 L10,5 L0,10 z" fill="#d97706"/></marker>
+  <marker id="m-sky" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0,0 L10,5 L0,10 z" fill="#0284c7"/></marker>
+</defs>
+
+<!-- ===== arrows ===== -->
+<g id="arrows" fill="none">
+  <!-- U: upload -->
+  <line data-flow="u" x1="240" y1="110" x2="332" y2="110" stroke="#2563eb" stroke-width="1.8" marker-end="url(#m-di)"/>
+  <path data-flow="u" d="M540,156 H590 V360 H632" stroke="#2563eb" stroke-width="1.8" marker-end="url(#m-di)"/>
+  <line data-flow="u" x1="420" y1="166" x2="420" y2="322" stroke="#2563eb" stroke-width="1.8" marker-end="url(#m-di)"/>
+  <line data-flow="u" x1="480" y1="330" x2="480" y2="174" stroke="#059669" stroke-width="1.6" stroke-dasharray="6 4" marker-end="url(#m-ve)"/>
+  <line data-flow="u" x1="340" y1="146" x2="248" y2="146" stroke="#059669" stroke-width="1.6" stroke-dasharray="6 4" marker-end="url(#m-ve)"/>
+
+  <!-- S: virus scan -->
+  <line data-flow="s" x1="540" y1="104" x2="632" y2="104" stroke="#dc2626" stroke-width="1.8" marker-end="url(#m-sec)"/>
+  <line data-flow="s" x1="740" y1="166" x2="740" y2="322" stroke="#dc2626" stroke-width="1.8" marker-end="url(#m-sec)"/>
+  <line data-flow="s" x1="640" y1="128" x2="548" y2="128" stroke="#dc2626" stroke-width="1.6" stroke-dasharray="6 4" marker-end="url(#m-sec)"/>
+
+  <!-- R: resize pipeline -->
+  <line data-flow="r" x1="840" y1="128" x2="932" y2="128" stroke="#d97706" stroke-width="1.8" stroke-dasharray="7 5" marker-end="url(#m-pi)"/>
+  <line data-flow="r" x1="1000" y1="166" x2="1000" y2="322" stroke="#d97706" stroke-width="1.8" stroke-dasharray="7 5" marker-end="url(#m-pi)"/>
+  <line data-flow="r" x1="840" y1="350" x2="932" y2="350" stroke="#d97706" stroke-width="1.8" marker-end="url(#m-pi)"/>
+  <line data-flow="r" x1="940" y1="392" x2="848" y2="392" stroke="#d97706" stroke-width="1.8" marker-end="url(#m-pi)"/>
+  <path data-flow="r f" d="M1040,406 V490 H788 A8,8 0 0 0 772,490 H728 A8,8 0 0 0 712,490 H440 V414" stroke="#d97706" stroke-width="1.8" marker-end="url(#m-pi)"/>
+
+  <!-- F: resize failure -->
+  <line data-flow="f" x1="1100" y1="330" x2="1100" y2="174" stroke="#7c3aed" stroke-width="1.8" stroke-dasharray="5 4" marker-end="url(#m-sc)"/>
+  <line data-flow="f" x1="1140" y1="110" x2="1232" y2="110" stroke="#7c3aed" stroke-width="1.8" marker-end="url(#m-sc)"/>
+  <line data-flow="f" x1="1340" y1="166" x2="1340" y2="322" stroke="#7c3aed" stroke-width="1.8" marker-end="url(#m-sc)"/>
+  <line data-flow="f" x1="1240" y1="146" x2="1148" y2="146" stroke="#7c3aed" stroke-width="1.8" stroke-dasharray="5 4" marker-end="url(#m-sc)"/>
+
+  <!-- D: delivery -->
+  <path data-flow="d" d="M170,166 V600 H632" stroke="#0284c7" stroke-width="1.8" marker-end="url(#m-sky)"/>
+  <line data-flow="d" x1="720" y1="580" x2="720" y2="434" stroke="#0284c7" stroke-width="1.8" marker-end="url(#m-sky)"/>
+  <line data-flow="d" x1="780" y1="426" x2="780" y2="572" stroke="#059669" stroke-width="1.6" stroke-dasharray="6 4" marker-end="url(#m-ve)"/>
+  <path data-flow="d" d="M640,630 H110 V174" stroke="#059669" stroke-width="1.6" stroke-dasharray="6 4" marker-end="url(#m-ve)"/>
+</g>
+
+<!-- ===== regions ===== -->
+<g class="region">
+  <rect x="316" y="46" width="548" height="406" rx="14" fill="none" stroke="#2563eb" stroke-width="1.2" stroke-dasharray="7 5" opacity="0.55"/>
+  <text x="332" y="68" font-size="11" font-weight="700" fill="#2563eb">Upload &amp; scan (synchronous edge)</text>
+</g>
+<g class="region">
+  <rect x="916" y="46" width="548" height="406" rx="14" fill="none" stroke="#d97706" stroke-width="1.2" stroke-dasharray="7 5" opacity="0.55"/>
+  <text x="932" y="68" font-size="11" font-weight="700" fill="#d97706">Async resize pipeline</text>
+</g>
+
+<!-- ===== boxes ===== -->
+<g class="box" data-flows="u d">
+  <rect class="box-rect" x="40" y="90" width="200" height="76" rx="10" fill="#ffffff" stroke="#d1d5db" stroke-width="1.3"/>
+  <text x="56" y="122" font-size="12.5" font-weight="680" fill="#111827">Sleetgarden app</text>
+  <text x="56" y="138" font-size="9" fill="#6b7280">iOS · Android · web</text>
+</g>
+<g class="box" data-flows="u s">
+  <rect class="box-rect" x="340" y="90" width="200" height="76" rx="10" fill="#eff6ff" stroke="#2563eb" stroke-width="1.7"/>
+  <text x="356" y="122" font-size="12.5" font-weight="700" fill="#111827">Upload API</text>
+  <text x="356" y="138" font-size="9" fill="#6b7280">POST /photos · GET /photos/:id</text>
+</g>
+<g class="box" data-flows="s r">
+  <rect class="box-rect" x="640" y="90" width="200" height="76" rx="10" fill="#ffffff" stroke="#dc2626" stroke-width="1.4"/>
+  <text x="656" y="122" font-size="12.5" font-weight="680" fill="#111827">Virus scan</text>
+  <text x="656" y="138" font-size="9" fill="#6b7280">sandboxed scanner · no network</text>
+</g>
+<g class="box" data-flows="r f">
+  <rect class="box-rect" x="940" y="90" width="200" height="76" rx="10" fill="#ffffff" stroke="#d1d5db" stroke-width="1.3"/>
+  <text x="956" y="122" font-size="12.5" font-weight="680" fill="#111827">Resize queue</text>
+  <text x="956" y="138" font-size="9" fill="#6b7280">resize-jobs · max 3 receives</text>
+</g>
+<g class="box" data-flows="f">
+  <rect class="box-rect" x="1240" y="90" width="200" height="76" rx="10" fill="#ffffff" stroke="#d1d5db" stroke-width="1.3"/>
+  <text x="1256" y="122" font-size="12.5" font-weight="680" fill="#111827">Dead-letter queue</text>
+  <text x="1256" y="138" font-size="9" fill="#6b7280">resize-jobs-dlq · kept 14 days</text>
+</g>
+<g class="box" data-flows="u r f">
+  <rect class="box-rect" x="340" y="330" width="200" height="76" rx="10" fill="#ffffff" stroke="#0284c7" stroke-width="1.4"/>
+  <text x="356" y="362" font-size="12.5" font-weight="680" fill="#111827">Photo DB</text>
+  <text x="356" y="378" font-size="9" fill="#6b7280">status · owner · thumbnail keys</text>
+</g>
+<g class="box" data-flows="u s r d">
+  <rect class="box-rect" x="640" y="330" width="200" height="96" rx="10" fill="#ffffff" stroke="#0284c7" stroke-width="1.4"/>
+  <text x="656" y="354" font-size="12.5" font-weight="680" fill="#111827">Object storage</text>
+  <text x="656" y="368" font-size="9" fill="#6b7280">quarantine/ · originals/ · thumbs/</text>
+  <rect x="656" y="378" width="52" height="34" rx="5" fill="#ffffff" stroke="#d1d5db"/>
+  <text x="682" y="393" font-size="9" font-weight="650" fill="#111827" text-anchor="middle">S</text>
+  <text x="682" y="405" font-size="8" fill="#6b7280" text-anchor="middle">150 px</text>
+  <rect x="714" y="378" width="52" height="34" rx="5" fill="#ffffff" stroke="#d1d5db"/>
+  <text x="740" y="393" font-size="9" font-weight="650" fill="#111827" text-anchor="middle">M</text>
+  <text x="740" y="405" font-size="8" fill="#6b7280" text-anchor="middle">600 px</text>
+  <rect x="772" y="378" width="52" height="34" rx="5" fill="#ffffff" stroke="#d1d5db"/>
+  <text x="798" y="393" font-size="9" font-weight="650" fill="#111827" text-anchor="middle">L</text>
+  <text x="798" y="405" font-size="8" fill="#6b7280" text-anchor="middle">1200 px</text>
+</g>
+<g class="box" data-flows="r f">
+  <rect class="box-rect" x="940" y="330" width="200" height="76" rx="10" fill="#ffffff" stroke="#d1d5db" stroke-width="1.3"/>
+  <text x="956" y="362" font-size="12.5" font-weight="680" fill="#111827">Image workers</text>
+  <text x="956" y="378" font-size="9" fill="#6b7280">libvips · autoscale on queue depth</text>
+</g>
+<g class="box" data-flows="f">
+  <rect class="box-rect" x="1240" y="330" width="200" height="76" rx="10" fill="#ffffff" stroke="#e5e7eb" stroke-width="1.3"/>
+  <text x="1256" y="362" font-size="12.5" font-weight="650" fill="#6b7280">On-call alert</text>
+  <text x="1256" y="378" font-size="9" fill="#6b7280">fires when DLQ depth &gt; 0</text>
+</g>
+<g class="box" data-flows="d">
+  <rect class="box-rect" x="640" y="580" width="200" height="76" rx="10" fill="#ffffff" stroke="#d1d5db" stroke-width="1.3"/>
+  <text x="656" y="612" font-size="12.5" font-weight="680" fill="#111827">CDN</text>
+  <text x="656" y="628" font-size="9" fill="#6b7280">img.sleetgarden.app · 1-year cache</text>
+</g>
+
+<!-- ===== badges + labels ===== -->
+<g id="badges">
+  <!-- U -->
+  <g class="badge" data-flow="u" data-step="1"><circle cx="262" cy="110" r="9" fill="#ffffff" stroke="#2563eb" stroke-width="1.4"/><text x="262" y="113.5" font-size="10" font-weight="700" text-anchor="middle" fill="#2563eb">1</text></g>
+  <text class="lbl" data-flow="u" x="303" y="99" font-size="8.5" text-anchor="middle" fill="#6b7280">POST /photos</text>
+  <g class="badge" data-flow="u" data-step="2"><circle cx="590" cy="240" r="9" fill="#ffffff" stroke="#2563eb" stroke-width="1.4"/><text x="590" y="243.5" font-size="10" font-weight="700" text-anchor="middle" fill="#2563eb">2</text></g>
+  <text class="lbl" data-flow="u" x="598" y="292" font-size="8.5" fill="#6b7280">to quarantine/</text>
+  <g class="badge" data-flow="u" data-step="3"><circle cx="420" cy="220" r="9" fill="#ffffff" stroke="#2563eb" stroke-width="1.4"/><text x="420" y="223.5" font-size="10" font-weight="700" text-anchor="middle" fill="#2563eb">3</text></g>
+  <text class="lbl" data-flow="u" x="412" y="262" font-size="8.5" text-anchor="end" fill="#6b7280">insert row</text>
+  <g class="badge" data-flow="u" data-step="4"><circle cx="480" cy="276" r="9" fill="#ffffff" stroke="#059669" stroke-width="1.4"/><text x="480" y="279.5" font-size="10" font-weight="700" text-anchor="middle" fill="#059669">4</text></g>
+  <text class="lbl" data-flow="u" x="488" y="226" font-size="8.5" fill="#6b7280">row saved</text>
+  <g class="badge" data-flow="u" data-step="5"><circle cx="318" cy="146" r="9" fill="#ffffff" stroke="#059669" stroke-width="1.4"/><text x="318" y="149.5" font-size="10" font-weight="700" text-anchor="middle" fill="#059669">5</text></g>
+  <text class="lbl" data-flow="u" x="272" y="164" font-size="8.5" text-anchor="middle" fill="#6b7280">202 Accepted</text>
+
+  <!-- S -->
+  <g class="badge" data-flow="s" data-step="S1"><rect x="553" y="95.5" width="26" height="17" rx="8.5" fill="#ffffff" stroke="#dc2626" stroke-width="1.4"/><text x="566" y="107.5" font-size="9.5" font-weight="700" text-anchor="middle" fill="#dc2626">S1</text></g>
+  <text class="lbl" data-flow="s" x="608" y="94" font-size="8.5" text-anchor="middle" fill="#6b7280">scan job</text>
+  <g class="badge" data-flow="s" data-step="S2"><rect x="727" y="221.5" width="26" height="17" rx="8.5" fill="#ffffff" stroke="#dc2626" stroke-width="1.4"/><text x="740" y="233.5" font-size="9.5" font-weight="700" text-anchor="middle" fill="#dc2626">S2</text></g>
+  <text class="lbl" data-flow="s" x="748" y="282" font-size="8.5" fill="#6b7280">scan, then promote</text>
+  <g class="badge" data-flow="s" data-step="S3"><rect x="601" y="119.5" width="26" height="17" rx="8.5" fill="#ffffff" stroke="#dc2626" stroke-width="1.4"/><text x="614" y="131.5" font-size="9.5" font-weight="700" text-anchor="middle" fill="#dc2626">S3</text></g>
+  <text class="lbl" data-flow="s" x="572" y="142" font-size="8.5" text-anchor="middle" fill="#6b7280">verdict</text>
+
+  <!-- R -->
+  <g class="badge" data-flow="r" data-step="R1"><rect x="877" y="119.5" width="26" height="17" rx="8.5" fill="#ffffff" stroke="#d97706" stroke-width="1.4"/><text x="890" y="131.5" font-size="9.5" font-weight="700" text-anchor="middle" fill="#d97706">R1</text></g>
+  <text class="lbl" data-flow="r" x="890" y="112" font-size="8.5" text-anchor="middle" fill="#6b7280">if clean</text>
+  <g class="badge" data-flow="r" data-step="R2"><rect x="987" y="221.5" width="26" height="17" rx="8.5" fill="#ffffff" stroke="#d97706" stroke-width="1.4"/><text x="1000" y="233.5" font-size="9.5" font-weight="700" text-anchor="middle" fill="#d97706">R2</text></g>
+  <text class="lbl" data-flow="r" x="1008" y="280" font-size="8.5" fill="#6b7280">pull job</text>
+  <g class="badge" data-flow="r" data-step="R3"><rect x="873" y="341.5" width="26" height="17" rx="8.5" fill="#ffffff" stroke="#d97706" stroke-width="1.4"/><text x="886" y="353.5" font-size="9.5" font-weight="700" text-anchor="middle" fill="#d97706">R3</text></g>
+  <text class="lbl" data-flow="r" x="886" y="335" font-size="8.5" text-anchor="middle" fill="#6b7280">read original</text>
+  <g class="badge" data-flow="r" data-step="R4"><rect x="873" y="383.5" width="26" height="17" rx="8.5" fill="#ffffff" stroke="#d97706" stroke-width="1.4"/><text x="886" y="395.5" font-size="9.5" font-weight="700" text-anchor="middle" fill="#d97706">R4</text></g>
+  <text class="lbl" data-flow="r" x="886" y="413" font-size="8.5" text-anchor="middle" fill="#6b7280">write 3 thumbnails</text>
+  <g class="badge" data-flow="r" data-step="R5"><rect x="1027" y="441.5" width="26" height="17" rx="8.5" fill="#ffffff" stroke="#d97706" stroke-width="1.4"/><text x="1040" y="453.5" font-size="9.5" font-weight="700" text-anchor="middle" fill="#d97706">R5</text></g>
+  <text class="lbl" data-flow="r f" x="600" y="482" font-size="8.5" text-anchor="middle" fill="#6b7280">status: ready / failed</text>
+
+  <!-- F -->
+  <g class="badge" data-flow="f" data-step="F1"><rect x="1087" y="221.5" width="26" height="17" rx="8.5" fill="#ffffff" stroke="#7c3aed" stroke-width="1.4"/><text x="1100" y="233.5" font-size="9.5" font-weight="700" text-anchor="middle" fill="#7c3aed">F1</text></g>
+  <text class="lbl" data-flow="f" x="1108" y="280" font-size="8.5" fill="#6b7280">nack, retry later</text>
+  <g class="badge" data-flow="f" data-step="F2"><rect x="927" y="481.5" width="26" height="17" rx="8.5" fill="#ffffff" stroke="#7c3aed" stroke-width="1.4"/><text x="940" y="493.5" font-size="9.5" font-weight="700" text-anchor="middle" fill="#7c3aed">F2</text></g>
+  <g class="badge" data-flow="f" data-step="F3"><rect x="1155" y="101.5" width="26" height="17" rx="8.5" fill="#ffffff" stroke="#7c3aed" stroke-width="1.4"/><text x="1168" y="113.5" font-size="9.5" font-weight="700" text-anchor="middle" fill="#7c3aed">F3</text></g>
+  <text class="lbl" data-flow="f" x="1190" y="95" font-size="8.5" text-anchor="middle" fill="#6b7280">after 3 attempts</text>
+  <g class="badge" data-flow="f" data-step="F4"><rect x="1327" y="221.5" width="26" height="17" rx="8.5" fill="#ffffff" stroke="#7c3aed" stroke-width="1.4"/><text x="1340" y="233.5" font-size="9.5" font-weight="700" text-anchor="middle" fill="#7c3aed">F4</text></g>
+  <text class="lbl" data-flow="f" x="1348" y="280" font-size="8.5" fill="#6b7280">page on-call</text>
+  <g class="badge" data-flow="f" data-step="F5"><rect x="1199" y="137.5" width="26" height="17" rx="8.5" fill="#ffffff" stroke="#7c3aed" stroke-width="1.4"/><text x="1212" y="149.5" font-size="9.5" font-weight="700" text-anchor="middle" fill="#7c3aed">F5</text></g>
+  <text class="lbl" data-flow="f" x="1180" y="166" font-size="8.5" text-anchor="middle" fill="#6b7280">manual replay</text>
+
+  <!-- D -->
+  <g class="badge" data-flow="d" data-step="D1"><rect x="157" y="371.5" width="26" height="17" rx="8.5" fill="#ffffff" stroke="#0284c7" stroke-width="1.4"/><text x="170" y="383.5" font-size="9.5" font-weight="700" text-anchor="middle" fill="#0284c7">D1</text></g>
+  <text class="lbl" data-flow="d" x="180" y="470" font-size="8.5" fill="#6b7280">GET thumbnail</text>
+  <g class="badge" data-flow="d" data-step="D2"><rect x="707" y="531.5" width="26" height="17" rx="8.5" fill="#ffffff" stroke="#0284c7" stroke-width="1.4"/><text x="720" y="543.5" font-size="9.5" font-weight="700" text-anchor="middle" fill="#0284c7">D2</text></g>
+  <text class="lbl" data-flow="d" x="710" y="566" font-size="8.5" text-anchor="end" fill="#6b7280">cache miss</text>
+  <g class="badge" data-flow="d" data-step="D3"><rect x="767" y="451.5" width="26" height="17" rx="8.5" fill="#ffffff" stroke="#059669" stroke-width="1.4"/><text x="780" y="463.5" font-size="9.5" font-weight="700" text-anchor="middle" fill="#059669">D3</text></g>
+  <text class="lbl" data-flow="d" x="790" y="540" font-size="8.5" fill="#6b7280">origin bytes</text>
+  <g class="badge" data-flow="d" data-step="D4"><rect x="97" y="371.5" width="26" height="17" rx="8.5" fill="#ffffff" stroke="#059669" stroke-width="1.4"/><text x="110" y="383.5" font-size="9.5" font-weight="700" text-anchor="middle" fill="#059669">D4</text></g>
+  <text class="lbl" data-flow="d" x="102" y="470" font-size="8.5" text-anchor="end" fill="#6b7280">cached image</text>
+</g>
+</svg>
+  </div>
+</section>
+
+<aside id="sidebar">
+  <article class="card" data-flow="u" style="--c:var(--di)">
+    <h2><span class="dot"></span>Upload: get the bytes in safely</h2>
+    <p>The user taps "Share". All the app needs back is a photo ID, so it doesn't wait for scanning or resizing.</p>
+    <ol>
+      <li data-step="1"><span class="n">1</span>The app sends <code>POST /photos</code> (multipart, at most 25 MB) with the user's session token.</li>
+      <li data-step="2"><span class="n">2</span>The API streams the bytes to <code>quarantine/{photoId}</code>. Nothing in quarantine is ever publicly readable.</li>
+      <li data-step="3"><span class="n">3</span>The API inserts the photo row with <code>status = scanning</code>.</li>
+      <li data-step="4"><span class="n ret">4</span>The database confirms the row.</li>
+      <li data-step="5"><span class="n ret">5</span>The API returns <code>202 Accepted</code> with the <code>photoId</code>. The app shows the local preview and polls <code>GET /photos/{id}</code> (the same path as steps 1 and 5) until the status changes.</li>
+    </ol>
+  </article>
+
+  <article class="card" data-flow="s" style="--c:var(--sec)">
+    <h2><span class="dot"></span>Virus scan: the security gate</h2>
+    <p>No other part of the system touches a file until the scanner has passed it.</p>
+    <ol>
+      <li data-step="S1"><span class="n">S1</span>The API sends a scan job with the <code>photoId</code> and its quarantine key.</li>
+      <li data-step="S2"><span class="n">S2</span>The scanner reads the quarantined object. If the file is clean, the scanner moves it to <code>originals/</code> and deletes the quarantine copy.</li>
+      <li data-step="S3"><span class="n">S3</span>The scanner sends its verdict back to the API. <b>Clean:</b> status becomes <code>scanned</code>, and the scanner starts the resize flow (R1). <b>Infected:</b> the object is deleted, status becomes <code>rejected</code>, the app shows "Upload blocked", and nothing goes onto the queue.</li>
+    </ol>
+  </article>
+
+  <article class="card" data-flow="r" style="--c:var(--pipe)">
+    <h2><span class="dot"></span>Resize: one original becomes three thumbnails</h2>
+    <p>This part is asynchronous. The queue absorbs bursts, and workers scale with queue depth.</p>
+    <ol>
+      <li data-step="R1"><span class="n">R1</span>Only for clean files, the scanner enqueues <code>{photoId, sizes: [150, 600, 1200]}</code>.</li>
+      <li data-step="R2"><span class="n">R2</span>A worker pulls the job. The message stays hidden from other workers for 60 s while the worker processes it.</li>
+      <li data-step="R3"><span class="n">R3</span>The worker reads the original from <code>originals/{photoId}</code>.</li>
+      <li data-step="R4"><span class="n">R4</span>The worker writes <code>thumbs/{photoId}/s.webp</code> (150 px), <code>m.webp</code> (600 px), and <code>l.webp</code> (1200 px). The keys are deterministic, so a retry overwrites any earlier attempt instead of adding duplicates.</li>
+      <li data-step="R5"><span class="n">R5</span>The worker sets <code>status = ready</code> and saves the three keys, then acks (deletes) the message. The next poll from the app returns the thumbnail URLs.</li>
+    </ol>
+  </article>
+
+  <article class="card" data-flow="f" style="--c:var(--script)">
+    <h2><span class="dot"></span>When a resize fails</h2>
+    <p>Typical causes are a corrupt or truncated file, an unsupported format, a worker running out of memory, or a timeout. The upload itself is never lost because the original stays in <code>originals/</code>.</p>
+    <ol>
+      <li data-step="F1"><span class="n">F1</span>The worker hits an error and nacks the message. It becomes visible again after a backoff (30 s, then 2 min), and another worker picks it up through R2.</li>
+      <li data-step="F2"><span class="n">F2</span>On the third failed attempt, the worker writes <code>status = failed</code>, using the same database path as R5. The app shows a placeholder tile with a "Try again" button instead of spinning forever.</li>
+      <li data-step="F3"><span class="n">F3</span>After 3 receives, the queue moves the message to the dead-letter queue, so one bad file can't block the queue.</li>
+      <li data-step="F4"><span class="n">F4</span>When the DLQ depth goes above 0, the on-call engineer is paged.</li>
+      <li data-step="F5"><span class="n">F5</span>After a fix ships, on-call replays the DLQ into <code>resize-jobs</code>. R2 through R5 then run again, and any partial thumbnails are overwritten.</li>
+    </ol>
+  </article>
+
+  <article class="card" data-flow="d" style="--c:var(--sky)">
+    <h2><span class="dot"></span>Delivery: thumbnails reach viewers</h2>
+    <p>Only <code>thumbs/</code> is exposed, and only through the CDN.</p>
+    <ol>
+      <li data-step="D1"><span class="n">D1</span>When the status is <code>ready</code>, the app requests <code>img.sleetgarden.app/thumbs/{id}/m.webp</code> (S for grids, M for feed, L for full screen).</li>
+      <li data-step="D2"><span class="n">D2</span>On a cache miss, the CDN fetches the object from storage using signed origin access.</li>
+      <li data-step="D3"><span class="n ret">D3</span>Storage returns the bytes. Because the keys never change, the CDN caches them for a year.</li>
+      <li data-step="D4"><span class="n ret">D4</span>The CDN serves the image. Later viewers get it straight from the edge cache.</li>
+    </ol>
+  </article>
+
+  <article class="card principles" style="--c:var(--muted)">
+    <h2><span class="dot"></span>Principles</h2>
+    <ol>
+      <li>Nothing is resized or served until it has passed the virus scan.</li>
+      <li>Uploads return quickly (202). All the heavy work runs asynchronously behind a queue.</li>
+      <li>Thumbnail keys are deterministic, so retries are safe and the CDN can cache them indefinitely.</li>
+      <li>A failure is visible to the user (<code>failed</code>), recoverable (DLQ replay), and never loses the original.</li>
+    </ol>
+  </article>
+</aside>
+</main>
+
+<script>
+(() => {
+  const NS = 'http://www.w3.org/2000/svg';
+  const root = document.documentElement;
+  const svg = document.getElementById('diagram');
+  const canvas = document.getElementById('canvas');
+  const flowsOf = el => (el.getAttribute('data-flow') || el.getAttribute('data-flows') || '').split(/\s+/).filter(Boolean);
+
+  /* ---------- theme ---------- */
+  const saved = localStorage.getItem('sleetgarden-flow-theme');
+  if (saved) root.dataset.theme = saved;
+  document.getElementById('theme-toggle').addEventListener('click', () => {
+    const cur = root.dataset.theme || (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+    root.dataset.theme = cur === 'dark' ? 'light' : 'dark';
+    localStorage.setItem('sleetgarden-flow-theme', root.dataset.theme);
+  });
+
+  /* ---------- arrows: hit areas, traveling dots, destination pings ---------- */
+  const arrows = [...svg.querySelectorAll('#arrows [data-flow][marker-end]')];
+  const boxes = [...svg.querySelectorAll('g.box')].map(g => {
+    const r = g.querySelector('.box-rect');
+    return { g, r, x: +r.getAttribute('x'), y: +r.getAttribute('y'), w: +r.getAttribute('width'), h: +r.getAttribute('height') };
+  });
+  const pathOf = el => el.tagName === 'line'
+    ? `M${el.getAttribute('x1')},${el.getAttribute('y1')} L${el.getAttribute('x2')},${el.getAttribute('y2')}`
+    : el.getAttribute('d');
+  const pinged = new Set();
+
+  arrows.forEach(a => {
+    const d = pathOf(a);
+    const flow = a.getAttribute('data-flow');
+    const color = a.getAttribute('stroke');
+
+    const hit = document.createElementNS(NS, 'path');
+    hit.setAttribute('d', d);
+    hit.setAttribute('class', 'hit');
+    hit.setAttribute('data-flow', flow);
+    a.before(hit);
+
+    const len = a.getTotalLength();
+    const dur = Math.min(3.5, Math.max(1.2, len / 130));
+    const dots = document.createElementNS(NS, 'g');
+    dots.setAttribute('class', 'flow-dot');
+    dots.setAttribute('data-flow', flow);
+    [0, dur / 2].forEach(begin => {
+      const c = document.createElementNS(NS, 'circle');
+      c.setAttribute('r', '3.4');
+      c.setAttribute('fill', color);
+      const m = document.createElementNS(NS, 'animateMotion');
+      m.setAttribute('dur', dur.toFixed(2) + 's');
+      m.setAttribute('begin', begin.toFixed(2) + 's');
+      m.setAttribute('repeatCount', 'indefinite');
+      m.setAttribute('path', d);
+      c.appendChild(m);
+      dots.appendChild(c);
+    });
+    a.after(dots);
+
+    // ping the box nearest the arrowhead, in that box's own border color
+    const end = a.getPointAtLength(len);
+    const box = boxes.find(b => end.x >= b.x - 14 && end.x <= b.x + b.w + 14 && end.y >= b.y - 14 && end.y <= b.y + b.h + 14);
+    if (!box) return;
+    flowsOf(a).forEach(f => {
+      const key = f + '|' + box.x + ',' + box.y;
+      if (pinged.has(key)) return;
+      pinged.add(key);
+      const g = document.createElementNS(NS, 'g');
+      g.setAttribute('class', 'flow-ping');
+      g.setAttribute('data-flow', f);
+      const ring = box.r.cloneNode(false);
+      ring.setAttribute('class', 'flow-ping-ring');
+      ring.setAttribute('fill', 'none');
+      ring.setAttribute('stroke-width', '2');
+      g.appendChild(ring);
+      box.g.insertBefore(g, box.r);
+    });
+  });
+
+  /* ---------- flow selection ---------- */
+  const chips = [...document.querySelectorAll('.chip')];
+  const cards = [...document.querySelectorAll('#sidebar .card')];
+  let current = null;
+
+  function select(flow, step) {
+    current = flow || null;
+    svg.querySelectorAll('[data-flow]').forEach(el => {
+      const mine = !!current && flowsOf(el).includes(current);
+      const animated = el.classList.contains('flow-dot') || el.classList.contains('flow-ping');
+      if (animated) el.classList.toggle('flowing', mine);
+      else el.classList.toggle('dim', !!current && !mine);
+    });
+    svg.querySelectorAll('g.box').forEach(g => g.classList.toggle('dim', !!current && !flowsOf(g).includes(current)));
+    svg.querySelectorAll('.region').forEach(g => g.classList.toggle('dim', !!current));
+    chips.forEach(c => c.setAttribute('aria-pressed', String(c.dataset.flow === current)));
+    cards.forEach(c => c.classList.toggle('hidden', !!current && c.dataset.flow !== current));
+    document.querySelectorAll('#sidebar li.hl').forEach(li => li.classList.remove('hl'));
+    if (step) {
+      const li = document.querySelector(`#sidebar .card[data-flow="${current}"] li[data-step="${step}"]`);
+      if (li) { li.classList.add('hl'); li.scrollIntoView({ block: 'nearest', behavior: 'smooth' }); }
+    }
+  }
+
+  chips.forEach(c => c.addEventListener('click', () => select(current === c.dataset.flow ? null : c.dataset.flow)));
+  svg.addEventListener('click', e => {
+    if (suppressClick) return;
+    const badge = e.target.closest('.badge');
+    if (badge) return select(badge.dataset.flow, badge.dataset.step);
+    const el = e.target.closest('.hit, .lbl, [data-flows]');
+    if (el && el.matches('.hit, .lbl')) {
+      const fs = flowsOf(el);
+      return select(fs.includes(current) ? current : fs[0]);
+    }
+    if (!el) select(null);
+  });
+  document.addEventListener('keydown', e => { if (e.key === 'Escape') select(null); });
+
+  /* ---------- zoom / pan (viewBox based; 100% = fit to view) ---------- */
+  const base = { x: 0, y: 0, w: 1480, h: 700 };
+  let vb = { ...base };
+  const pct = document.getElementById('z-pct');
+  const apply = () => {
+    svg.setAttribute('viewBox', `${vb.x} ${vb.y} ${vb.w} ${vb.h}`);
+    pct.textContent = Math.round(base.w / vb.w * 100) + '%';
+  };
+  const toSvg = (cx, cy) => {
+    const p = svg.createSVGPoint(); p.x = cx; p.y = cy;
+    return p.matrixTransform(svg.getScreenCTM().inverse());
+  };
+  function zoomAt(factor, pt) {
+    const w = Math.min(base.w, Math.max(base.w / 8, vb.w / factor));
+    const k = w / vb.w;
+    if (w >= base.w) { vb = { ...base }; return apply(); }
+    vb = { x: pt.x - (pt.x - vb.x) * k, y: pt.y - (pt.y - vb.y) * k, w, h: vb.h * k };
+    apply();
+  }
+  const center = () => ({ x: vb.x + vb.w / 2, y: vb.y + vb.h / 2 });
+  document.getElementById('z-in').onclick = () => zoomAt(1.25, center());
+  document.getElementById('z-out').onclick = () => zoomAt(0.8, center());
+  document.getElementById('z-fit').onclick = () => { vb = { ...base }; apply(); };
+  canvas.addEventListener('wheel', e => {
+    e.preventDefault();
+    zoomAt(Math.exp(-e.deltaY * (e.deltaMode ? 0.05 : 0.0015)), toSvg(e.clientX, e.clientY));
+  }, { passive: false });
+
+  let drag = null, suppressClick = false;
+  canvas.addEventListener('pointerdown', e => {
+    if (e.button !== 0) return;
+    drag = { sx: e.clientX, sy: e.clientY, vx: vb.x, vy: vb.y, moved: false, id: e.pointerId };
+    suppressClick = false;
+  });
+  canvas.addEventListener('pointermove', e => {
+    if (!drag) return;
+    const dx = e.clientX - drag.sx, dy = e.clientY - drag.sy;
+    if (!drag.moved && Math.hypot(dx, dy) < 4) return;
+    if (!drag.moved) { drag.moved = true; canvas.setPointerCapture(drag.id); canvas.classList.add('panning'); }
+    const s = 1 / svg.getScreenCTM().a;
+    vb.x = drag.vx - dx * s; vb.y = drag.vy - dy * s;
+    apply();
+  });
+  const endDrag = () => {
+    if (drag && drag.moved) { suppressClick = true; setTimeout(() => { suppressClick = false; }, 0); }
+    drag = null; canvas.classList.remove('panning');
+  };
+  canvas.addEventListener('pointerup', endDrag);
+  canvas.addEventListener('pointercancel', endDrag);
+
+  apply();
+})();
+</script>
+</body>
+</html>
diff --git a/layers/registry/server/utils/skill-demos.ts b/layers/registry/server/utils/skill-demos.ts
index fd2316ae..71b40f95 100644
--- a/layers/registry/server/utils/skill-demos.ts
+++ b/layers/registry/server/utils/skill-demos.ts
@@ -1,6 +1,8 @@
 import type { DemoMakes } from '#shared/demo-groups'
 import { z } from 'zod'
 import { DEMO_MAKES } from '#shared/demo-groups'
+import { demoPagePath, DEMOS_PATH, MIN_INDEXABLE_DEMOS } from '#shared/demo-pages'
+import { runCheckFlagKey } from '#shared/run-check-flags'
 import { repoSkillPath } from '#shared/skill-routes'
 import manifest from '../data/skill-demos.json'
 
@@ -98,6 +100,35 @@ export function listSkillDemos(demos: readonly SkillDemoRecord[] = SKILL_DEMOS):
     || b.recordedAt.localeCompare(a.recordedAt))
 }
 
+/**
+ * The demos a visitor may see. A demo whose Skill holds a run check flag stays
+ * out until a check passes: a visitor who watches it would copy a run command
+ * that fails.
+ */
+export function listShownSkillDemos(flagged: ReadonlySet<string>, demos: readonly SkillDemoRecord[] = SKILL_DEMOS): readonly SkillDemoRecord[] {
+  return listSkillDemos(demos).filter(demo => !flagged.has(runCheckFlagKey(demo.owner, demo.repo, demo.name)))
+}
+
+export interface DemoSitemapEntry {
+  loc: string
+  lastmod: string
+}
+
+/**
+ * `/skills/demos` and each shown demo's page. Empty below
+ * `MIN_INDEXABLE_DEMOS`, where those pages answer noindex.
+ */
+export function listDemoSitemapEntries(flagged: ReadonlySet<string>, demos: readonly SkillDemoRecord[] = SKILL_DEMOS): DemoSitemapEntry[] {
+  const shown = listShownSkillDemos(flagged, demos)
+  if (shown.length < MIN_INDEXABLE_DEMOS)
+    return []
+  const newest = shown.map(demo => demo.recordedAt).sort().at(-1) as string
+  return [
+    { loc: DEMOS_PATH, lastmod: newest },
+    ...shown.map(demo => ({ loc: demoPagePath(demo), lastmod: demo.recordedAt })),
+  ]
+}
+
 /** The `skilld-demo-media` bucket's custom domain. */
 export const DEMO_MEDIA_ORIGIN = 'https://media.skilld.dev'
 
diff --git a/layers/registry/server/utils/skills-route-policy.ts b/layers/registry/server/utils/skills-route-policy.ts
index 76d6ccd8..f27f6433 100644
--- a/layers/registry/server/utils/skills-route-policy.ts
+++ b/layers/registry/server/utils/skills-route-policy.ts
@@ -26,7 +26,9 @@ const marketingPaths = new Set([
   ...CULLED_CLUSTER_SLUGS.map(slug => `/skills/${slug}`),
 ])
 
-const marketingPrefixes = ['/skills/tag/']
+// A demo page is `/skills/demos/<owner>/<repo>/<name>`. It must reach the
+// page, not the legacy `/gh` redirect below.
+const marketingPrefixes = ['/skills/tag/', '/skills/demos/']
 
 export function resolveSkillsRoute(
   pathname: string,
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 6e1d5d49..bfa60d18 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -2,7 +2,7 @@ import { existsSync, readdirSync } from 'node:fs'
 import { fileURLToPath } from 'node:url'
 import { edgeCache } from '@harlan-zw/nuxt-cloudflare/cache'
 import { unpublishedAgentPaths } from './layers/marketing/app/utils/agent-pages'
-import { frozenNoindexPaths } from './layers/marketing/app/utils/page-admissions'
+import { frozenNoindexPaths, isPageAdmitted } from './layers/marketing/app/utils/page-admissions'
 import pkg from './package.json'
 import { dependencyPluginCompat } from './scripts/lib/dependency-plugin-compat'
 import { withBuildAssetMissFallthrough } from './scripts/lib/static-asset-fallthrough'
@@ -584,6 +584,7 @@ export default defineNuxtConfig({
     // takes two failed checks, so a day of stale serving on a quiet colo is
     // within the time the checks themselves take.
     '/skills/demos': edgeCache({ maxAge: 300, staleWhileRevalidate: 86400 }),
+    '/skills/demos/**': edgeCache({ maxAge: 300, staleWhileRevalidate: 86400 }),
     // The CLI and developer pages read no data and no session, so they change
     // only on deploy, and a deploy starts a new cache key. Uncached, each view
     // rendered in the Worker: 110 to 250 ms to first byte from Sydney on
@@ -885,6 +886,12 @@ export default defineNuxtConfig({
         includeAppSources: false,
         chunks: 10000,
       },
+      // `/skills/demos` and one page per demo, which the pages sitemap's
+      // `/skills/**` exclude drops. Listed while page-admissions admits
+      // `/skills/demos`, the entry every demo page reads.
+      ...(isPageAdmitted('/skills/demos')
+        ? { demos: { sources: ['/api/__sitemap__/demos'], includeAppSources: false } }
+        : {}),
       // `authors` and `sources` removed 2026-10-01 (owner decision): author
       // profiles, collections, owner hubs and multi-Skill repository hubs render
       // `noindex,follow`. A single-Skill repository hub is the Skill's own page,
diff --git a/shared/demo-groups.ts b/shared/demo-groups.ts
index 4a53fe03..afb92bb3 100644
--- a/shared/demo-groups.ts
+++ b/shared/demo-groups.ts
@@ -1,43 +1,51 @@
 /**
  * What a demo's Skill makes, which is how `/skills/demos` groups them. Named
  * by the thing a visitor wants made, not by the kind of work, so a film Skill
- * and a page Skill never share a group. The order is the page order.
+ * and a page Skill never share a group. The order is the page order. `noun`
+ * names one demo of the group, in a demo page title.
  *
  * This module imports nothing, so the recorder script can load it directly.
  */
 export const DEMO_GROUPS = [
   {
     makes: 'film',
+    noun: 'film',
     label: 'Films and launch videos',
     line: 'Videos a Skill directs and renders in code, from a prompt or a project folder.',
   },
   {
     makes: 'landing-page',
+    noun: 'landing page',
     label: 'Landing pages',
     line: 'A whole page from one prompt.',
   },
   {
     makes: 'ui-component',
+    noun: 'UI component',
     label: 'UI components',
     line: 'One component, with the states and motion the Skill teaches.',
   },
   {
     makes: 'diagram',
+    noun: 'diagram',
     label: 'Diagrams and explainers',
     line: 'Systems and flows drawn so a reader can follow them.',
   },
   {
     makes: 'slides',
+    noun: 'slide deck',
     label: 'Slides and decks',
     line: 'A talk or a pitch as a deck you can click through.',
   },
   {
     makes: 'chart',
+    noun: 'chart',
     label: 'Charts and dashboards',
     line: 'Data drawn so the point lands at a glance.',
   },
   {
     makes: 'game',
+    noun: 'game',
     label: 'Games and playables',
     line: 'Small games you can play right here.',
   },
@@ -60,3 +68,8 @@ export function groupDemos<T extends { makes: DemoMakes }>(demos: readonly T[]):
     .map(group => ({ makes: group.makes, label: group.label, line: group.line, demos: demos.filter(demo => demo.makes === group.makes) }))
     .filter(group => group.demos.length > 0)
 }
+
+/** One demo of the group, such as `landing page`. */
+export function demoNoun(makes: DemoMakes): string {
+  return DEMO_GROUPS.find(group => group.makes === makes)?.noun ?? 'demo'
+}
diff --git a/shared/demo-pages.ts b/shared/demo-pages.ts
new file mode 100644
index 00000000..0338f48b
--- /dev/null
+++ b/shared/demo-pages.ts
@@ -0,0 +1,34 @@
+/**
+ * Every demo has its own page at `/skills/demos/<owner>/<repo>/<name>`, the
+ * board with that demo on the stage. The pages share the `/skills/demos`
+ * admission in `page-admissions.ts`, and the `demos` sitemap lists them.
+ *
+ * This module imports nothing, so the app and the server both load it.
+ */
+
+export const DEMOS_PATH = '/skills/demos'
+
+/** Below this many demos, `/skills/demos` and every demo page answer noindex, and the sitemap lists none. */
+export const MIN_INDEXABLE_DEMOS = 6
+
+export function demoPagePath(demo: { owner: string, repo: string, name: string }): string {
+  return `${DEMOS_PATH}/${demo.owner}/${demo.repo}/${demo.name}`
+}
+
+export type DemoRoute
+  = | { _tag: 'index' }
+    | { _tag: 'demo', key: string }
+    | { _tag: 'invalid' }
+
+/**
+ * Reads the path segments after `/skills/demos`: none is the board, three
+ * name one demo as `owner/repo/name`, and any other count is no page.
+ */
+export function parseDemoRoute(segments: string | readonly string[] | undefined): DemoRoute {
+  const parts = (typeof segments === 'string' ? segments.split('/') : segments ?? []).filter(Boolean)
+  if (parts.length === 0)
+    return { _tag: 'index' }
+  if (parts.length === 3)
+    return { _tag: 'demo', key: parts.join('/') }
+  return { _tag: 'invalid' }
+}
diff --git a/test/unit/demo-pages.test.ts b/test/unit/demo-pages.test.ts
new file mode 100644
index 00000000..6d7a553e
--- /dev/null
+++ b/test/unit/demo-pages.test.ts
@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest'
+import { demoPagePath, parseDemoRoute } from '../../shared/demo-pages'
+
+describe('parseDemoRoute', () => {
+  it('reads no segments as the board', () => {
+    expect(parseDemoRoute([])).toEqual({ _tag: 'index' })
+    expect(parseDemoRoute('')).toEqual({ _tag: 'index' })
+    expect(parseDemoRoute(undefined)).toEqual({ _tag: 'index' })
+  })
+
+  it('reads three segments as one demo', () => {
+    expect(parseDemoRoute(['anthropics', 'skills', 'frontend-design'])).toEqual({ _tag: 'demo', key: 'anthropics/skills/frontend-design' })
+    expect(parseDemoRoute('anthropics/skills/frontend-design/')).toEqual({ _tag: 'demo', key: 'anthropics/skills/frontend-design' })
+  })
+
+  it('refuses any other depth, so a partial or extended path is no page', () => {
+    expect(parseDemoRoute(['anthropics'])).toEqual({ _tag: 'invalid' })
+    expect(parseDemoRoute(['anthropics', 'skills'])).toEqual({ _tag: 'invalid' })
+    expect(parseDemoRoute(['anthropics', 'skills', 'frontend-design', 'live'])).toEqual({ _tag: 'invalid' })
+  })
+
+  it('reads back the path demoPagePath builds', () => {
+    const path = demoPagePath({ owner: 'anthropics', repo: 'skills', name: 'frontend-design' })
+    expect(parseDemoRoute(path.slice('/skills/demos/'.length).split('/'))).toEqual({ _tag: 'demo', key: 'anthropics/skills/frontend-design' })
+  })
+})
diff --git a/test/unit/skill-demos.test.ts b/test/unit/skill-demos.test.ts
index 496e93ec..ec6ec293 100644
--- a/test/unit/skill-demos.test.ts
+++ b/test/unit/skill-demos.test.ts
@@ -1,6 +1,6 @@
 import type { SkillDemoRecord } from '../../layers/registry/server/utils/skill-demos'
 import { describe, expect, it } from 'vitest'
-import { findSkillDemo, listSkillDemos, presentSkillDemo } from '../../layers/registry/server/utils/skill-demos'
+import { findSkillDemo, listDemoSitemapEntries, listShownSkillDemos, listSkillDemos, presentSkillDemo } from '../../layers/registry/server/utils/skill-demos'
 
 const COMMIT = '41bbe19d1a1a7eaab5e7bb9050a417e5c6cffc8f'
 
@@ -85,3 +85,25 @@ describe('listSkillDemos', () => {
     expect(listSkillDemos([older, newer]).map(entry => entry.name)).toEqual(['newer', 'older'])
   })
 })
+
+describe('listShownSkillDemos', () => {
+  it('leaves out a demo whose Skill holds a run check flag, whatever its casing', () => {
+    const shown = listShownSkillDemos(new Set(['anthropics/skills/flagged']), [demo({ name: 'Flagged' }), demo({ name: 'kept' })])
+    expect(shown.map(entry => entry.name)).toEqual(['kept'])
+  })
+})
+
+describe('listDemoSitemapEntries', () => {
+  const six = Array.from({ length: 6 }, (_, i) => demo({ name: `skill-${i}`, recordedAt: `2026-10-0${i + 1}` }))
+
+  it('lists the board, dated by its newest demo, and every demo page', () => {
+    const entries = listDemoSitemapEntries(new Set(), six)
+    expect(entries[0]).toEqual({ loc: '/skills/demos', lastmod: '2026-10-06' })
+    expect(entries).toContainEqual({ loc: '/skills/demos/anthropics/skills/skill-0', lastmod: '2026-10-01' })
+    expect(entries).toHaveLength(7)
+  })
+
+  it('lists nothing once flags drop the shown demos below six, where the pages answer noindex', () => {
+    expect(listDemoSitemapEntries(new Set(['anthropics/skills/skill-0']), six)).toEqual([])
+  })
+})
diff --git a/test/unit/skills-route-policy.test.ts b/test/unit/skills-route-policy.test.ts
index 64d8c66b..5163b4fa 100644
--- a/test/unit/skills-route-policy.test.ts
+++ b/test/unit/skills-route-policy.test.ts
@@ -35,6 +35,11 @@ describe('skills route policy', () => {
       expect(resolveSkillsRoute(`/skills/${name}`, ''), `/skills/${name}`).toEqual({ _tag: 'pass' })
   })
 
+  it('passes demo pages through to the page, which answers an unknown one 404', () => {
+    expect(resolveSkillsRoute('/skills/demos/anthropics/skills/frontend-design', '')).toEqual({ _tag: 'pass' })
+    expect(resolveSkillsRoute('/skills/demos/anthropics/skills', '')).toEqual({ _tag: 'pass' })
+  })
+
   it('returns a 404 decision for unknown one-segment outcomes', () => {
     expect(resolveSkillsRoute('/skills/not-a-real-outcome', '')).toEqual({
       _tag: 'not_found',