feat: give the chapters motion, diagrams, and retrieval practice

Three strands of work on the chapter surface, all reading from the same
constraint: this site ships no runtime dependencies, so every effect below
is native CSS or an .astro component.

Motion (src/styles/motion.css, DrawRule.astro). A scroll-driven layer of
reveals, hero parallax, section depth, and a hairline that paints itself
along its path, scrubbed by `animation-timeline: view()` — 0KB against
lottie-web's ~60KB gzipped on the main thread. Every scrubbed rule sits
inside `prefers-reduced-motion: no-preference` and `@supports`, so a
Firefox reader or an opted-out one gets the complete static page rather
than one with holes in it. Ranges key to `cover 40%`-`cover 75%` where the
motion is meant to be watched: `view()` ranges key to first visibility,
which on a 2600px page is long before anyone is reading the section.
`.agents/skills/motion/references/scroll-driven.md` records the technique
and the two ways `pathLength` normalisation was broken while building it.

Diagrams (StepFlow.astro, WorktreeMap.astro). The `.steps` stack on
/skills/, /models/, and /agents/ becomes a numbered flow with connectors,
and /agents/ grows the worktree map it was describing in prose — reusing
the `trees` collection rather than a second set of strings. The map's
static variant is gated one class deeper than full-guide's page styles, so
the interactive copy renders byte-identical. Connectors are pseudo-elements,
not SVG: a stretched path desynchronises its own dash pattern, and a
straight line does not need one. Mermaid was considered and rejected at
~1MB of runtime.

Retrieval practice (/rules/, /skills/). A "check yourself" section of
native `<details>` question/answer pairs plus a citation row, both bilingual
through the existing `data-copy` toggle, and both JavaScript-free.

Two audit blind spots surfaced and are closed rather than worked around:
`build.inlineStylesheets: 'never'`, because Astro inlined sheets under ~4kB
and audit-ui.mjs reads its colour and size baseline from dist/_astro/*.css;
and `--columns` declared in the grid components, because an element-level
custom property is not a declaration the audit can resolve.

legacy/styles/skills.css is renamed and imported for its side effect. Inside
a *page*, `?url` resolves to that page's own CSS chunk whatever file it
names, so the link pointed at the wrong asset and the sheet was emitted but
never loaded — the package preview had been rendering unstyled and
overflowing since the Astro cutover.

verify.mjs gains 5 assertions for the recall sections and their Portuguese
copy: 89 now, against the 84 baseline.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/content/chapters/agents.json

@@ -1,31 +1,55 @@
 {
   "id": "agents",
-  "eyebrow": { "en": "Subagent workflow", "pt": "Subagent workflow" },
-  "title": { "en": "One branch<br>per <em>hand.</em>", "pt": "One branch<br>per <em>hand.</em>" },
+  "eyebrow": {
+    "en": "Subagent workflow",
+    "pt": "Subagent workflow"
+  },
+  "title": {
+    "en": "One branch<br>per <em>hand.</em>",
+    "pt": "One branch<br>per <em>hand.</em>"
+  },
   "lede": {
     "en": "Agents work when roles, files, and evidence are bounded. A worktree gives each worker its own checkout while the orchestrator protects intent.",
     "pt": "Agents work when roles, files, and evidence are bounded. A worktree gives each worker its own checkout while the orchestrator protects intent."
   },
   "cards": [
     {
-      "label": { "en": "FRAME", "pt": "FRAME" },
-      "title": { "en": "Orchestrator", "pt": "Orchestrator" },
+      "label": {
+        "en": "FRAME",
+        "pt": "FRAME"
+      },
+      "title": {
+        "en": "Orchestrator",
+        "pt": "Orchestrator"
+      },
       "copy": {
         "en": "Owns scope, task graph, boundaries, and integration.",
         "pt": "Owns scope, task graph, boundaries, and integration."
       }
     },
     {
-      "label": { "en": "HAND OFF", "pt": "HAND OFF" },
-      "title": { "en": "Worker", "pt": "Worker" },
+      "label": {
+        "en": "HAND OFF",
+        "pt": "HAND OFF"
+      },
+      "title": {
+        "en": "Worker",
+        "pt": "Worker"
+      },
       "copy": {
         "en": "Owns one coherent slice and one worktree.",
         "pt": "Owns one coherent slice and one worktree."
       }
     },
     {
-      "label": { "en": "PROVE", "pt": "PROVE" },
-      "title": { "en": "Verifier", "pt": "Verifier" },
+      "label": {
+        "en": "PROVE",
+        "pt": "PROVE"
+      },
+      "title": {
+        "en": "Verifier",
+        "pt": "Verifier"
+      },
       "copy": {
         "en": "Re-runs gates and reports remaining gaps.",
         "pt": "Re-runs gates and reports remaining gaps."
@@ -34,37 +58,58 @@
   ],
   "sections": [
     {
-      "eyebrow": { "en": "The tree", "pt": "The tree" },
-      "title": { "en": "Split at<br>the <em>seam.</em>", "pt": "Split at<br>the <em>seam.</em>" },
-      "panelLabel": { "en": "MAIN / ORCHESTRATOR", "pt": "MAIN / ORCHESTRATOR" },
+      "eyebrow": {
+        "en": "The tree",
+        "pt": "The tree"
+      },
+      "title": {
+        "en": "Split at<br>the <em>seam.</em>",
+        "pt": "Split at<br>the <em>seam.</em>"
+      },
+      "panelLabel": {
+        "en": "MAIN / ORCHESTRATOR",
+        "pt": "MAIN / ORCHESTRATOR"
+      },
       "panelCode": {
-        "en": "├── agent/ui → components + visual states · ├── agent/tests → acceptance + regressions · └── agent/docs → guide + examples · merge after each leaf returns a diff and evidence",
-        "pt": "├── agent/ui → components + visual states · ├── agent/tests → acceptance + regressions · └── agent/docs → guide + examples · merge after each leaf returns a diff and evidence"
+        "en": "├── agent/ui    → components + visual states\n├── agent/tests → acceptance + regressions\n└── agent/docs  → guide + examples\n\nmerge after each leaf returns a diff and evidence",
+        "pt": "├── agent/ui    → components + visual states\n├── agent/tests → acceptance + regressions\n└── agent/docs  → guide + examples\n\nmerge after each leaf returns a diff and evidence"
       }
     },
     {
-      "eyebrow": { "en": "Handoff", "pt": "Handoff" },
+      "eyebrow": {
+        "en": "Handoff",
+        "pt": "Handoff"
+      },
       "title": {
         "en": "Context that<br>can <em>travel.</em>",
         "pt": "Context that<br>can <em>travel.</em>"
       },
       "steps": [
         {
-          "label": { "en": "Brief", "pt": "Brief" },
+          "label": {
+            "en": "Brief",
+            "pt": "Brief"
+          },
           "copy": {
             "en": "Goal, owned files, dependencies, non-goals, acceptance.",
             "pt": "Goal, owned files, dependencies, non-goals, acceptance."
           }
         },
         {
-          "label": { "en": "Isolation", "pt": "Isolation" },
+          "label": {
+            "en": "Isolation",
+            "pt": "Isolation"
+          },
           "copy": {
             "en": "One branch and worktree per independent change.",
             "pt": "One branch and worktree per independent change."
           }
         },
         {
-          "label": { "en": "Evidence", "pt": "Evidence" },
+          "label": {
+            "en": "Evidence",
+            "pt": "Evidence"
+          },
           "copy": {
             "en": "Commands, result, changed files, screenshots, gaps.",
             "pt": "Commands, result, changed files, screenshots, gaps."