feat(15d): complete localization of full-guide page to PT

Merge branch 'main' into refactor/task-15d-page-full-guide
docs: task 15d attempt 4, list the last 34 untranslated selectors
2026-09-05 22:30:50 +00:00 · 2026-09-05 22:23:13 +00:00 · 2026-09-05 22:23:06 +00:00 · 2026-09-05 22:20:36 +00:00 · 2026-09-05 22:05:43 +00:00 · 2026-09-05 22:02:23 +00:00
111 changed files with 5496 additions and 626 deletions
@@ -20,11 +20,13 @@ palettes and a broken `@font-face`. **Load skills**: `design-tokens`,
   `--paper`, `--muted`, `--line`, `--gold` likewise. Most deltas are
   sub-perceptual and can be canonicalized. `--blue` (`#527f9f` vs `#215675`) is
   visibly different — screenshot both and get a human decision.
-2. **The fonts have never rendered.** The `@font-face` in `styles.css:1` points
-   `src:` at a Google Fonts _stylesheet_, so Manrope and DM Mono have always
-   fallen back to Arial and generic monospace. Self-hosting them is a redesign,
-   not a refactor. Default: delete the dead rule, declare the stacks that
-   actually render. Escalate if someone wants the real fonts.
+2. ~~**The fonts have never rendered.**~~ **Settled 2026-09-05 — do not
+   reopen.** The malformed `@font-face` was escalated and the human chose the
+   real fonts. Manrope and DM Mono are self-hosted in `public/fonts/`, wired
+   through `public/fonts/fonts.css`, which `BaseLayout.astro` links and the
+   legacy root `styles.css` `@import`s. **Do not delete these faces and do not
+   replace the stacks with `Arial`/`ui-monospace`** — that instruction is
+   obsolete. You may add `--font-sans` / `--font-mono` tokens pointing at them.

 ## You own

@@ -1,6 +1,9 @@
 ---
 name: motion-designer
-description: Adds and audits animation — transitions, state changes, optional view transitions. Use for task 17 and any change involving movement. Do not use for static layout or styling work.
+description:
+  Adds and audits animation — transitions, state changes, optional view
+  transitions. Use for task 17 and any change involving movement. Do not use for
+  static layout or styling work.
 tools: Read, Write, Edit, Bash, Grep, Glob
 ---

@@ -1,6 +1,9 @@
 ---
 name: reviewer
-description: Merge gate. Reviews a task branch diff against its brief and the project rules. Use before merging any refactor task. Never writes features or fixes findings itself.
+description:
+  Merge gate. Reviews a task branch diff against its brief and the project
+  rules. Use before merging any refactor task. Never writes features or fixes
+  findings itself.
 tools: Read, Grep, Glob, Bash
 ---

@@ -8,7 +11,8 @@ You are the merge gate. You read diffs and report. **You do not write features
 and you do not fix what you find** — you name it precisely enough that the
 owning agent can.

-**Read**: the task file, then every rule in `.agents/rules/` relevant to the diff.
+**Read**: the task file, then every rule in `.agents/rules/` relevant to the
+diff.

 ## Order of checks — highest-value first

@@ -5,7 +5,7 @@
 Ten hand-written HTML pages, each linking its own CSS and one ES module:

 | Route                | Page                       | Script                 | Stylesheets                                   |
-| --- | --- | --- | --- |
+| -------------------- | -------------------------- | ---------------------- | --------------------------------------------- |
 | `/`                  | `index.html`               | —                      | `chapters.css`, `landing.css`                 |
 | `/full-guide/`       | `full-guide/index.html`    | `app.js` (50 KB)       | `styles.css`, `responsive.css`, `audit.css`   |
 | `/summary/`          | `summary/index.html`       | —                      | `chapters.css`                                |
@@ -35,7 +35,8 @@ Weight is concentrated: `app.js` 50 KB, `responsive.css` 30 KB,
  `wins[]`, `improve[]`, `extras`, `improved` (full markdown). 24 entries across
  `catalog.js` + `submitted-catalog.js`. This is already a content collection in
  all but name.
- **`skills-review/files.js` / `submitted-files.js`** — generated file manifests.
+- **`skills-review/files.js` / `submitted-files.js`** — generated file
+  manifests.
 - **`vote.js`** — the vote widget island; talks to `vote-service/`.

 ## Target (Astro)
@@ -53,12 +54,12 @@ public/

 ### Non-negotiables for the target

- **URLs do not change.** `/full-guide/`, `/skills-review/`, `/hands-on/starter/`
-  and the rest must resolve exactly as they do now, trailing slash included.
-  Existing links (including `docs/`, SilverBullet, and shared URLs with
-  `?author=…&skill=…&view=…` query params) must keep working.
- **Zero JS by default.** Seven of the ten pages ship no JavaScript today.
-  They must still ship none. Islands are opt-in, per component, and justified.
+- **URLs do not change.** `/full-guide/`, `/skills-review/`,
+  `/hands-on/starter/` and the rest must resolve exactly as they do now,
+  trailing slash included. Existing links (including `docs/`, SilverBullet, and
+  shared URLs with `?author=…&skill=…&view=…` query params) must keep working.
+- **Zero JS by default.** Seven of the ten pages ship no JavaScript today. They
+  must still ship none. Islands are opt-in, per component, and justified.
 - **`hands-on/` stays vanilla.** It goes in `public/` untouched. It is a lab
  fixture, not a component.
 - **No external runtime requests.** `audit-ui.mjs` enforces this and it is part
@@ -0,0 +1,40 @@
+# Context: full-guide language switching
+
+## Decision
+
+The Astro full guide keeps the current client-side language switch on its
+existing `/full-guide/` URL. It server-renders both locale variants and the
+language-toggle island shows the selected variant after `client:idle` hydration.
+
+This deliberately preserves the current no-URL-change contract, including links
+shared without a locale segment, and avoids a route/redirect and publishing
+change. The cost is duplicated localized HTML and both locales in the response.
+That is acceptable for this small guide and avoids sending duplicated string
+data through every interactive island.
+
+## Markup and island contract for task 15d
+
+- Render each static localized fragment twice. Put `data-language-content="en"`
+  or `data-language-content="pt"` on its outer element. English is visible in
+  server HTML; the toggle uses the native `hidden` attribute for the inactive
+  locale.
+- Add `<LanguageToggle />` to the guide top bar. Astro's `client:idle` directive
+  is only valid for framework components; this `.astro` island defers its
+  browser setup with `requestIdleCallback` (and a timeout fallback) instead. Do
+  not hydrate the page or use `client:load`; the control is deliberately
+  idle-priority.
+- The island owns the `ai-for-dummies-language` localStorage key. Every read and
+  write remains inside `try`/`catch`, because previews may disable storage.
+- On each selection the island sets `<html lang>` to `en` or `pt-BR`, updates
+  its `[data-lang]` buttons' `.active` class and `aria-pressed` state, updates
+  `[data-language-content]`, then dispatches `ai-for-dummies:languagechange` on
+  `window`. The event detail is `{ language: 'en' | 'pt' }`.
+- The guide selector island (15a) must read `document.documentElement.lang` when
+  it hydrates and listen for that event. On receipt it must re-render the
+  currently active phase and all active selector panels from their collection
+  data. This preserves today’s `applyLanguage` behaviour without coupling the
+  toggle to page selectors.
+
+This is a page-local contract: the existing `/rules/` toggle continues using its
+own `rules-language` key and must not be changed as part of full-guide
+migration.
@@ -9,7 +9,7 @@ The same semantic names carry different values depending on which stylesheet
 loaded them:

 | Token      | `styles.css`, `rules/styles.css` | `chapters.css`, `skills-review/styles.css` | `hands-on/*/styles.css` |
-| --- | --- | --- | --- |
+| ---------- | -------------------------------- | ------------------------------------------ | ----------------------- |
 | `--paper`  | `#f5f4f1`                        | `#f6f3ed`                                  | `#f4f3ef`               |
 | `--ink`    | `#172f42`                        | `#122534`                                  | `#173044`               |
 | `--muted`  | `#697b89`                        | `#65717a`                                  | `#687d8c`               |
@@ -34,35 +34,36 @@ exception: `#527f9f` vs `#215675` is a visible difference and may be deliberate.
 Do not "just pick one" silently in the middle of another task. This is its own
 reviewed change with visual diffs attached.

-## The typography you see is not the typography that was written
+## The typography — fixed 2026-09-05

-`styles.css` line 1:
+`styles.css` line 1 used to read:

 ```css
-@font-face{font-family:Manrope;src:url('https://fonts.googleapis.com/css2?family=DM+Mono&family=Manrope:wght@400;600;700;800&display=swap')}
+@font-face {
+  font-family: Manrope;
+  src: url('https://fonts.googleapis.com/css2?family=DM+Mono&family=Manrope:wght@400;600;700;800&display=swap');
+}
 ```

-`src:` points at a **CSS stylesheet**, not a font file. No browser can load a
-font from that, so:
+`src:` in an `@font-face` must point at a font binary. That URL returns a CSS
+stylesheet, so no browser could load a face from it. For the whole life of the
+site, every `font-family:Manrope,Arial,sans-serif` rendered as **Arial** and
+every `font:… 'DM Mono',monospace` rendered as the **generic monospace** face —
+`'DM Mono'` was never declared as a family at all.

- every `font-family:Manrope,Arial,sans-serif` renders as **Arial**
- every `font:… 'DM Mono',monospace` renders as the **generic monospace** face
- there are no `@font-face` blocks anywhere else and zero font files in the repo
- `scripts/audit-ui.mjs` only rejects external `<link>`/`<script>` tags, so this
-  slipped through the "dependency-free" audit
+**This was escalated and the human chose the real fonts.** Manrope and DM Mono
+are now self-hosted in `public/fonts/`, latin and latin-ext subsets only, under
+the SIL Open Font License. One `fonts.css` serves both trees: Astro links it
+from `BaseLayout.astro`, the legacy root `styles.css` `@import`s it. Self-hosted
+rather than linked from Google because `scripts/audit-ui.mjs` rejects any
+external `<link>`/`<script>`, and because the site is presented in workshop
+rooms with unreliable networks.

-**This is a trap for the refactor.** Self-hosting Manrope and DM Mono in Astro
-is the obvious "fix" — and it would change how every page looks, violating
-"maintain the same styles". Treat it as an explicit product decision:
+**This changed how every page renders**, deliberately. It is the one sanctioned
+visual change in the migration. Screenshots taken before 2026-09-05 show Arial
+and are no longer a valid baseline.

- **Keep current rendering**: delete the dead `@font-face`, replace the font
-  stacks with what actually renders today (`Arial, sans-serif` /
-  `ui-monospace, monospace`). Zero visual change. Honest CSS.
- **Adopt the intended fonts**: self-host the woff2 files in `public/fonts/`,
-  add real `@font-face` with `font-display:swap`. Better-looking, but it is a
-  redesign and needs sign-off plus fresh screenshots.
-
-Default to the first unless a human says otherwise.
+`Georgia, serif` for emphasis (`h1 em`, `.hero em`) is untouched and still real.

 ## Type scale

@@ -72,7 +73,7 @@ real — it is a system font, so it does render. Keep it.
 Sizes are all `clamp()`, roughly:

 | Role            | Value                                                     |
-| --- | --- |
+| --------------- | --------------------------------------------------------- |
 | Display / `h1`  | `clamp(56px,9vw,126px)`                                   |
 | Section `h2`    | `clamp(36px,5vw,65px)`                                    |
 | Sub-head        | `clamp(24px,3vw,38px)`                                    |
@@ -87,11 +88,12 @@ should be unchanged within a pixel or two at common viewports.
 ## Breakpoints

 Sixteen distinct max-widths are in use: 420, 520, 530, 560, 600, 620, 720, 800,
-850, 880, 900, 1000, 1050, 1100 — plus `min-width:1600px` and `min-width:2200px`.
+850, 880, 900, 1000, 1050, 1100 — plus `min-width:1600px` and
+`min-width:2200px`.

 Collapse to a named set (suggested: 560 / 800 / 1100 / 1600 / 2200) and prove
-equivalence with screenshots at the *old* breakpoint values, since that is
-where regressions will hide.
+equivalence with screenshots at the _old_ breakpoint values, since that is where
+regressions will hide.

 `@media(prefers-reduced-motion:reduce)` is already respected in several
 stylesheets. Keep it — see [`../rules/animation.md`](../rules/animation.md).
@@ -100,8 +102,8 @@ stylesheets. Keep it — see [`../rules/animation.md`](../rules/animation.md).

 The visual identity is editorial-print: flat colour blocks, hairline `1px`
 rules, uppercase monospace eyebrows with wide tracking, very tight negative
-letter-spacing on display type (`-.06em` … `-.08em`), grid layouts with `gap:1px`
-over a background colour to fake borders, and near-zero border-radius.
+letter-spacing on display type (`-.06em` … `-.08em`), grid layouts with
+`gap:1px` over a background colour to fake borders, and near-zero border-radius.

 That last trick (`gap:1px` + parent background) is used everywhere. It is
 intentional. Do not replace it with `border`.
@@ -49,4 +49,5 @@ likely to fail; verify before shipping.
 ## Bilingual content

 `<html lang>` must change with the language toggle, not just the text. Screen
-readers pick pronunciation from it. This already works today — do not regress it.
+readers pick pronunciation from it. This already works today — do not regress
+it.
@@ -20,12 +20,16 @@ Several current stylesheets already honour it. Every new animation must:

 ```css
@media (prefers-reduced-motion: reduce) {
-  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
-      transition-duration: .01ms !important; scroll-behavior: auto !important; }
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
 }
 ```

-Reduced motion means *reduced*, not *broken*: the end state must still be
+Reduced motion means _reduced_, not _broken_: the end state must still be
 correct and the interface still usable. Test it — in DevTools, Rendering →
 Emulate `prefers-reduced-motion`.

@@ -35,7 +39,7 @@ Emulate `prefers-reduced-motion`.
  Animating `width`, `height`, `top`, `left`, or `margin` forces layout on every
  frame and will show up as a failed INP.
 - `will-change` only on an element about to animate, removed after. Leaving it
-  on permanently costs memory and can *hurt* performance.
+  on permanently costs memory and can _hurt_ performance.
 - Prefer CSS transitions. Reach for the Web Animations API only for sequencing
  that CSS cannot express. Do not add an animation library — it is a runtime
  dependency on a site whose thesis is having none.
@@ -16,7 +16,7 @@ this site's ten pages ship no JS today and must continue to.
 Only these need interactivity. Anything else claiming island status is wrong:

 | Island                            | Why                                | Directive        |
-| --- | --- | --- |
+| --------------------------------- | ---------------------------------- | ---------------- |
 | Guide phase/tab switchers         | click-driven panel swap            | `client:visible` |
 | Review desk catalog + file viewer | search, filter, fetch source files | `client:load`    |
 | Vote widget                       | talks to `vote-service/`           | `client:visible` |
@@ -31,8 +31,11 @@ Only these need interactivity. Anything else claiming island status is wrong:
 // 3. destructure Astro.props
 // 4. derived values — no side effects, no fetch in components
 ---
+
 <!-- markup -->
-<style>/* component-scoped */</style>
+<style>
+  /* component-scoped */
+</style>
 ```

 - Typed props always: `interface Props { … }`, then `const { … } = Astro.props`.
@@ -60,13 +63,13 @@ almost one-to-one — do that rather than importing a 27 KB JS file.
 The site is served from `/ai-for-dummies/`. Set `base` in `astro.config.mjs` and
 never hand-write an absolute internal path. Use `import.meta.env.BASE_URL`.

-Existing routes are load-bearing and must not change, including trailing
-slashes and the review desk's query params.
+Existing routes are load-bearing and must not change, including trailing slashes
+and the review desk's query params.

 ## Never

- No UI framework (React/Vue/Svelte) unless a task brief explicitly calls for it.
-  Astro components plus a little vanilla JS cover everything here.
+- No UI framework (React/Vue/Svelte) unless a task brief explicitly calls for
+  it. Astro components plus a little vanilla JS cover everything here.
 - No CSS framework. This site has a hand-built visual identity — see
  [`theming.md`](theming.md).
 - No external runtime requests. Self-host. `audit-ui.mjs` enforces it.
@@ -3,7 +3,7 @@
 ## Match what is there

 This codebase has a real voice: dense one-liner CSS, terse ES modules, comments
-that explain *why* and never *what*. Do not reformat it into someone else's
+that explain _why_ and never _what_. Do not reformat it into someone else's
 house style as a side effect of a task.

 The one exception is CSS minification-by-hand — `styles.css` is single-line and
@@ -44,5 +44,5 @@ overrides, and the temptation during migration will be to port it wholesale

 ## Commits

-Present tense, lowercase, `type: subject`, matching the existing log
-(`feat:`, `fix:`, `docs:`). The body explains why, and states what you did not do.
+Present tense, lowercase, `type: subject`, matching the existing log (`feat:`,
+`fix:`, `docs:`). The body explains why, and states what you did not do.
@@ -3,7 +3,8 @@
 ## When to make a component

 Extract when the same markup appears **three times**, or when a block has a name
-a person would use out loud ("the eyebrow", "the route card", "the phase panel").
+a person would use out loud ("the eyebrow", "the route card", "the phase
+panel").

 Do not extract on the second occurrence. Two similar blocks often diverge; the
 premature abstraction costs more than the duplication.
@@ -55,5 +55,5 @@ hand-rolled client-side renderer. That deletes code and improves fidelity.

 Careful: `skill-reviews/improved/**/SKILL.md` is **generated** from those
 entries by `scripts/build-skill-review.mjs`, and the generated files are
-committed. Keep that generator working, or replace it and update every
-reference to it.
+committed. Keep that generator working, or replace it and update every reference
+to it.
@@ -104,4 +104,46 @@ if (findings.length) {
  findings.forEach((finding) => console.error(`  ${finding}`));
  process.exit(1);
 }
+
+import { existsSync } from 'node:fs';
+import { basename } from 'node:path';
+
+if (existsSync('dist')) {
+  const builtCss = walk('dist').filter((p) => p.endsWith('.css'));
+  const tokensBuilt = builtCss.find((p) => /[\\/]tokens\.[^\\/]+\.css$/.test(p));
+
+  if (!tokensBuilt) {
+    console.error('token check failed — tokens.css was not built into dist/');
+    process.exit(1);
+  }
+
+  const tokensContent = readFileSync(tokensBuilt, 'utf8');
+  if (!tokensContent.includes('#527f9f')) {
+    console.error(
+      'token check failed — built tokens.css does not contain the canonical --blue value #527f9f',
+    );
+    process.exit(1);
+  }
+
+  const htmlFiles = walk('dist').filter(
+    (p) =>
+      p.endsWith('.html') &&
+      !p.includes('/hands-on/') &&
+      !p.includes('\\hands-on\\') &&
+      !p.includes('/submitted-skills/') &&
+      !p.includes('\\submitted-skills\\'),
+  );
+
+  const tokenChunkName = basename(tokensBuilt);
+  for (const html of htmlFiles) {
+    const content = readFileSync(html, 'utf8');
+    if (!content.includes(tokenChunkName)) {
+      console.error(
+        `token check failed — ${html} does not load the token layer (${tokenChunkName})`,
+      );
+      process.exit(1);
+    }
+  }
+}
+
 console.log('token check passed');
@@ -27,8 +27,12 @@ const text = html
  .replace(/<style[\s\S]*?<\/style>/gi, '')
  .replace(/<!--[\s\S]*?-->/g, '')
  .replace(/<[^>]+>/g, '\n')
-  .replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>')
-  .replace(/&quot;/g, '"').replace(/&#0?39;/g, "'").replace(/&nbsp;/g, ' ')
+  .replace(/&amp;/g, '&')
+  .replace(/&lt;/g, '<')
+  .replace(/&gt;/g, '>')
+  .replace(/&quot;/g, '"')
+  .replace(/&#0?39;/g, "'")
+  .replace(/&nbsp;/g, ' ')
  .split('\n')
  .map((line) => line.trim())
  .filter(Boolean)
@@ -1,6 +1,9 @@
 ---
 name: content-migration
-description: Move bilingual copy out of app.js and catalog.js into typed Astro content collections without losing or altering a single string. Use for any task that relocates user-visible text.
+description:
+  Move bilingual copy out of app.js and catalog.js into typed Astro content
+  collections without losing or altering a single string. Use for any task that
+  relocates user-visible text.
 ---

 # Content migration
@@ -9,8 +12,8 @@ description: Move bilingual copy out of app.js and catalog.js into typed Astro c

 - `app.js` — ~50 `{ en, pt }` keys across `phases`, `handsOnPrompts`,
  `modelGuide`, `skillSources`, `skillInstallPrompts`
- `skills-review/catalog.js` + `submitted-catalog.js` — 24 entries with
-  `id`, `author`, `title`, `status`, `focus`, `wins[]`, `improve[]`, `extras`,
+- `skills-review/catalog.js` + `submitted-catalog.js` — 24 entries with `id`,
+  `author`, `title`, `status`, `focus`, `wins[]`, `improve[]`, `extras`,
  `improved` (full markdown)

 These are hand-written translations with deliberate tone. **Copy them. Never
@@ -1,6 +1,9 @@
 ---
 name: motion
-description: Add or review animation on the ai-for-dummies site — transitions, state changes, view transitions. Use when any element moves, fades, or transforms, or when auditing existing motion for performance and reduced-motion support.
+description:
+  Add or review animation on the ai-for-dummies site — transitions, state
+  changes, view transitions. Use when any element moves, fades, or transforms,
+  or when auditing existing motion for performance and reduced-motion support.
 ---

 # Motion
@@ -22,10 +25,14 @@ If there is no answer, ship it static. That is a legitimate, common outcome.

 ```css
 .panel {
-  transition: opacity 180ms cubic-bezier(.2,0,0,1),
-              transform 180ms cubic-bezier(.2,0,0,1);
+  transition:
+    opacity 180ms cubic-bezier(0.2, 0, 0, 1),
+    transform 180ms cubic-bezier(0.2, 0, 0, 1);
+}
+.panel[data-state='entering'] {
+  opacity: 0;
+  transform: translateY(6px);
 }
-.panel[data-state='entering'] { opacity: 0; transform: translateY(6px); }
 ```

 - **`transform` and `opacity` only.** Animating `width`/`height`/`top`/`left`
@@ -39,14 +46,18 @@ If there is no answer, ship it static. That is a legitimate, common outcome.

 ```css
@media (prefers-reduced-motion: reduce) {
-  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
-      transition-duration: .01ms !important; scroll-behavior: auto !important; }
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
 }
 ```

-Then **test it**: DevTools → Rendering → Emulate `prefers-reduced-motion:
-reduce`. The end state must still be correct and the UI still usable. Reduced,
-not broken.
+Then **test it**: DevTools → Rendering → Emulate
+`prefers-reduced-motion: reduce`. The end state must still be correct and the UI
+still usable. Reduced, not broken.

 ## Page transitions

@@ -1,6 +1,9 @@
 ---
 name: verify-contract
-description: Evolve scripts/verify.mjs across the Astro migration without losing coverage. Use whenever a verify assertion fails because of a refactor, or when adding checks for new architecture.
+description:
+  Evolve scripts/verify.mjs across the Astro migration without losing coverage.
+  Use whenever a verify assertion fails because of a refactor, or when adding
+  checks for new architecture.
 ---

 # The verification contract
@@ -30,12 +33,12 @@ report. Nobody else may reduce coverage.
 ## Translating assertions

 | Kind                  | Old                                  | New                                                                           |
-| --- | --- | --- |
+| --------------------- | ------------------------------------ | ----------------------------------------------------------------------------- |
 | Content presence      | `html.includes('data-phase="plan"')` | same token, read from `dist/full-guide/index.html`                            |
 | Implementation detail | `js.includes('renderTree')`          | assert the rendered output has the tree UI, not that a function is named that |
 | Asset version         | `'app.js?v=20260904-vote-widget'`    | assert the built HTML references a hashed asset                               |

-Implementation-detail assertions are the dangerous ones: they *look* deletable.
+Implementation-detail assertions are the dangerous ones: they _look_ deletable.
 They are pinning a feature. Replace with an output-level assertion of the same
 feature; never drop.

@@ -54,9 +57,9 @@ Commit the snapshots. They are the migration's regression net.

 ## Extend audit-ui.mjs

-It rejects external `<script>`/`<link>` but **misses external URLs inside CSS** —
-which is exactly how the broken Google Fonts `@font-face` in `styles.css:1` got
-into a "dependency-free" site. Add:
+It rejects external `<script>`/`<link>` but **misses external URLs inside CSS**
+— which is exactly how the broken Google Fonts `@font-face` in `styles.css:1`
+got into a "dependency-free" site. Add:

 ```js
 if (/@import|src:\s*url\(['"]?https?:|url\(['"]?https?:/i.test(css))
@@ -2,12 +2,19 @@ AI For Dummies — Field Guide
 A
 field guide
 01 fleet
+01 frota
+02 worktrees
 02 worktrees
 03 models
+03 modelos
+04 skills
 04 skills
 05 create
+05 criar
 06 field kit
+06 kit de campo
 07 hands-on
+07 prática
 08 verify
 review submissions ↗
 EN
@@ -15,72 +22,148 @@ EN
 PT
 AI ENGINEERING
 01 / 2026
+ENGENHARIA DE IA
+01 / 2026
 A presentation for humans who ship
+Uma apresentação para quem entrega software
 AI for
 dummies.
 You do not need an army of models. You need a system: one mind to frame the work, several hands to execute it, and a clean boundary between every task.
+Você não precisa de um exército de modelos. Precisa de um sistema: uma mente para enquadrar o trabalho, várias mãos para executá-lo e uma fronteira clara entre cada tarefa.
 FIELD NOTE / 001
+NOTA DE CAMPO / 001
 Ship the
 system.
+Entregue o
+sistema.
 Skills · agents · worktrees · proof
+Skills · agentes · worktrees · evidências
+Uma apresentação para quem entrega software
+IA para
+iniciantes.
+Você não precisa de um exército de modelos. Precisa de um sistema: uma mente para
+enquadrar o trabalho, várias mãos para executá-lo e uma fronteira clara entre cada tarefa.
+NOTA DE CAMPO / 001
+Entregue o
+sistema.
+Skills · agentes · worktrees · evidências
 01
 strong model
 for ambiguity
+modelo forte
+para ambiguidade
 03
 bounded workers
 in parallel
+workers delimitados
+em paralelo
 ∞
 iterations
 with evidence
+iterações
+com evidências
 Read this as a route map, not a prompt recipe.
+Leia isto como um mapa de rota, não como uma receita de prompt.
+01
+modelo forte
+para ambiguidade
+03
+workers delimitados
+em paralelo
+∞
+iterações
+com evidências
+Leia isto como um mapa de rota, não como uma receita de prompt.
 RULE ZERO
+REGRA ZERO
 Strong model for ambiguity.
 Light model for bounded work.
+Modelo forte para ambiguidade.
+Modelo leve para trabalho delimitado.
 THINK
 MAKE
+REGRA ZERO
+Modelo forte para ambiguidade.
+Modelo leve para trabalho delimitado.
+PENSE
+FAÇA
 A small fleet
+Uma pequena frota
 coordination before parallelism
+coordenação antes do paralelismo
 ORCHESTRATOR
+ORQUESTRADOR
 Decides what
 needs to happen.
+Decide o que
+precisa acontecer.
 Opus / reasoning
 →
 UI
 Component and visual states
+Componentes e estados visuais
 agent/ui
 TEST
 Acceptance cases
+Casos de aceitação
 agent/tests
 DOCS
 Guide and examples
+Guia e exemplos
 agent/docs
-The orchestrator preserves intent, writes small contracts, and gathers results that can be verified. It does not need to type every line.
+Interface worker
+Receives: component contract + visual states
+Returns: focused diff + viewport evidence
+The orchestrator preserves intent, writes small contracts, and gathers results that can be
+verified. It does not need to type every line.
 Why the boundary matters
+Por que a fronteira importa
 one vague task / three predictable failures
+uma tarefa vaga / três falhas previsíveis
 01
 Context soup
+Sopa de contexto
 Every worker reads everything. Nobody knows which facts are load-bearing.
+Cada worker lê tudo. Ninguém sabe quais fatos são essenciais.
 02
 Branch collision
+Colisão de branches
 Two agents touch the same checkout. The fastest path becomes conflict resolution.
+Dois agentes usam o mesmo checkout. O caminho mais rápido vira resolução de conflitos.
 03
 Confident drift
+Desvio confiante
 The diff is polished, but no one checks whether it solved the original problem.
+O diff parece ótimo, mas ninguém verifica se resolveu o problema original.
 The subagent loop
+O ciclo de subagentes
 Click a phase.
 See the handoff.
-Delegation means moving one bounded task into a smaller context—not giving away responsibility.
+Clique em uma fase.
+Veja a passagem.
+Delegation means moving one bounded task into a smaller context—not giving away
+responsibility.
 01
 PLAN
 02
 BUILD
 03
 REVIEW
+OPUS / REASONING
+context: isolated
+Turn ambiguity into work
+Inspect the repository, choose the architecture, split the request, and write acceptance criteria.
+plan → decompose → define acceptance
 What crosses contexts
+O que atravessa contextos
 brief → diff → evidence
+brief → diff → evidência
 Package
+Pacote
 Contains
+Contém
 Why it matters
+Por que importa
 Brief
 goal, files, boundaries
 stops the worker inventing the problem
@@ -94,72 +177,126 @@ Diff
 small, reviewable change
 integration and discard stay cheap
 Git worktrees
+Git worktrees
 One branch
 per
 hand.
-A worktree is another directory linked to the same repository. Each agent gets its own checkout and index; history remains shared.
+Uma branch
+por
+mão.
+A worktree is another directory linked to the same repository. Each agent gets its own
+checkout and index; history remains shared.
 Select a node to inspect its checkout, owner, and next action.
+Selecione um nó para inspecionar checkout, responsável e próxima ação.
 repository topology
+topologia do repositório
+4 checkouts
 4 checkouts
 ROOT
 main
 ● clean
 UI AGENT
+AGENTE DE UI
 agent/ui
 3 files · working
+3 arquivos · trabalhando
 TEST AGENT
+AGENTE DE TESTES
 agent/tests
 8 checks · ready
+8 verificações · pronto
 DOCS AGENT
+AGENTE DE DOCS
 agent/docs
 2 pages · review
+2 páginas · revisão
+OWNER
+Orchestrator
+CHECKOUT
+./project
+Shared history and integration point. Workers never edit here.
+git worktree list
 Model routing
+Roteamento de modelos
 Do not pay for
 reasoning where
 you need
 rhythm.
+Não pague por
+raciocínio onde precisa
+de
+ritmo.
 Choose a job to see why the model profile changes.
+Escolha um trabalho para entender por que o perfil do modelo muda.
 Work
 Profile
 Prompt shape
 Plan
+Planejar
 strong / broad
 What changes? What can break?
 Build
+Construir
 fast / focused
 Implement this slice. Run these checks.
 Explore
+Explorar
 read-only / light
 Find where this contract is used.
 Review
+Revisar
 independent
 Does the diff satisfy the brief?
+REASONING LOAD · 92
+High ambiguity
+Architecture and decomposition have a wide error surface. Spend reasoning here.
 Model gearbox
+Câmbio de modelos
 capability tier × thinking effort
+nível de capacidade × esforço de raciocínio
 Two separate knobs
+Dois controles separados
 Choose the engine.
 Then choose the
 gear.
+Escolha o motor.
+Depois escolha a
+marcha.
 A stronger model changes the capability ceiling. Higher reasoning effort gives that model more room to work. Start with the lightest combination that passes your real checks, then move one knob at a time.
+Um modelo mais forte muda o teto de capacidade. Mais esforço de raciocínio dá mais espaço para esse modelo trabalhar. Comece com a combinação mais leve que passa seus checks e mova um controle por vez.
 OPENAI
 CLAUDE
 GEMINI
+OpenAI
+OFFICIAL SOURCE ↗
+Sol · Terra · Luna
+GPT-5.6 separates capability tier from reasoning effort. Sol is flagship, Terra balances performance and cost, and Luna targets efficient high-volume work.
 REASONING / THINKING
+RACIOCÍNIO / PENSAMENTO
 LOW
+BAIXO
 bounded + fast
+delimitado + rápido
 MEDIUM
-default start
 HIGH
+ALTO
 complex + costly
+complexo + custoso
+MEDIUM
+Balanced starting point for normal implementation, tests, and review. Measure before moving up.
+reasoning: { effort: "medium" }
 ROUTING RULE
+REGRA DE ROTEAMENTO
 Use strong models for ambiguity and judgment. Use lighter models for bounded execution. Raise effort only when evaluation shows a gain.
+Use modelos fortes para ambiguidade e julgamento. Use modelos leves para execução delimitada. Aumente o esforço apenas quando a avaliação mostrar ganho.
+Skills
 Skills
 Write the right way
 once.
+Escreva do jeito certo
+uma vez.
 A skill is a reusable procedure. It can carry instructions, references, scripts, and assets. It is not magical memory, and it does not replace acceptance criteria.
-01 / trigger clearly
-02 / load detail on demand
-03 / return evidence
+Uma skill é um procedimento reutilizável. Ela pode carregar instruções, referências, scripts e assets. Não é memória mágica e não substitui critérios de aceitação.
 SKILL PACKAGE
 SKILL.md
 procedure and limits
@@ -169,92 +306,80 @@ scripts/
 repeatable checks
 assets/
 templates and examples
-name: review-ui · check focus, mobile, reduced motion · run verification · return evidence
+◇
+SKILL.md
+Trigger, procedure, constraints, and the exact evidence the agent must return.
+select another file to explore
 Create a skill
 repeatable pain → reusable judgment
-The skill forge
-Teach the decision.
-Keep the context
-light.
-Do not package everything you know. Capture the non-obvious choices that repeatedly improve an outcome, then prove the skill changes behavior.
-01
-Observe
-find repeated friction
-02
-Define trigger
-route precisely
 03
-Choose anatomy
-only needed files
-04
-Write guidance
-decisions, not trivia
+Choose only useful anatomy
+01
+Start from repeated friction
 05
-Validate
-test real behavior
-OUTPUT / SKILL PACKAGE
-review-ui/
-├── SKILL.md
-├── agents/
-│   └── openai.yaml
-├── references/
-│   └── accessibility.md
-└── scripts/
-└── verify.mjs
-VALIDATE
-quick_validate.py ./review-ui
-AFTER REAL USE
-observe failure
-→
-sharpen one rule
-→
-retest behavior
-→
-keep it narrow
+Test behavior, then sharpen
+02
+Make discovery precise
+04
+Write what changes decisions
+01
+QUESTION
+Start from repeated friction
+Which non-obvious decision keeps being rediscovered?
+ACTION
+Collect two or three realistic requests. Separate durable judgment from one project’s temporary details.
+ARTIFACT
+A narrow capability and concrete examples.
+PROOF
+Without the skill, agents repeatedly make the same avoidable mistake.
 Common skills
+Skills comuns
 choose behavior before model
-The field kit
-Different jobs.
-Different
-instincts.
-A skill changes how an agent approaches work. Some shape communication. Others enforce research, debugging, review, or completion discipline. Select one to inspect its operating rule and verified source.
-SIMPLIFY
-ponytail-lite
-minimum code that holds
-COMMUNICATE
+escolha o comportamento antes do modelo
+COMMUNICATION STYLE
 caveman
-signal without filler
-COMPLETE
-unlazy
-gates and evidence
-INVESTIGATE
-research
-primary sources first
-DIAGNOSE
+Use for routine status, handoffs, and technical summaries where speed matters. Short fragments make actions and evidence easy to scan.
+DIAGNOSTIC LOOP
 diagnosing-bugs
-tight feedback loop
-REVIEW
-code-review
-standards × spec
-ECONOMIZE
+Use for hard bugs, flakes, and regressions. First build a fast deterministic reproduction, then minimize, rank hypotheses, instrument, and fix the root cause.
+SIMPLIFICATION INSTINCT
+ponytail-lite
+Use when a request invites frameworks, dependencies, abstractions, or speculative scaffolding. It checks reuse, standard library, and native platform features before adding code.
+CONTEXT ECONOMY
 token-saver
-compress noisy output
-ONE PRACTICAL LOADOUT
-PLAN
+Use around verbose tests, builds, Git output, and logs. Filtering preserves context for reasoning while retaining full failure output for recovery.
+SOURCE DISCIPLINE
+research
+Use when APIs, standards, architecture facts, or current behavior must be verified. Capture findings in a cited note, prioritizing primary sources.
+COMPLETION DISCIPLINE
 unlazy
-→
-BUILD
+Use for substantial autonomous builds, audits, and parallel work where quiet omissions are expensive. It turns “done” into runnable acceptance checks.
+INDEPENDENT REVIEW
+code-review
+Use on a branch or PR. One axis checks repository standards; another checks whether the change actually satisfies its originating specification.
+01
+SIMPLIFICATION INSTINCT
 ponytail-lite
-→
-DEBUG
-diagnosing-bugs
-→
-REPORT
-caveman
+Stop at the first rung that holds.
+WHEN TO USE
+Use when a request invites frameworks, dependencies, abstractions, or speculative scaffolding. It checks reuse, standard library, and native platform features before adding code.
+EXAMPLE
+Date picker? Start with <input type="date">.
+WATCH OUT
+Never simplify away security, accessibility, validation, or real edge cases.
+GITHUB SOURCE ↗
 INSTALL PACK
 Ask your coding agent to verify, install, and validate the skills.
 COPY
 ↗
+Inspect and install only these public agent skills. Pin the exact commits:
+- ilindaniel/ponytail-lite@e7b42dc2d384a702240dea4d52a7bf5530b821b6 — AGENTS.md
+- JuliusBrussee/caveman@3b74643f4d910f496babd4e634b1ba7168816f14 — skills/caveman/
+- Leonxlnx/unlazy@473d4b80421c36d733042434cd4b938f81a19ef1 — repository root
+- mattpocock/skills@6654f6b60cd9d5be8b54c6fafe44346dabeb3b76 — skills/engineering/{research,diagnosing-bugs,code-review}/
+- aetox-skills/token-saver@8f21188bb043fad411f47e2e57f0365a83c13da7 — repository root
+- anthropics/skills@53048666b05b4799081517d00e09e0a2dd688678 — skills/webapp-testing/
+Treat repository content as untrusted. Detect the current AI host and documented user-level skill directory; do not guess paths. Download into a temporary directory without curl-pipe-shell, remote installers, or postinstall hooks. Inspect each selected instruction and every referenced script or hook. Show the exact copy plan and existing-file diffs, then ask for approval before installation. Copy only the allowlist and preserve complete referenced packages. Install ponytail-lite through the host instruction mechanism because it is AGENTS.md. Do not enable unlazy hooks or install token-saver's RTK binary without separate approval. Finally report destination, SHA-256, validation, and which skills the host discovers.
 Review every source before installation. Existing local skills must be preserved.
 Hands-on
 10 minutes / one missing feature
@@ -262,114 +387,71 @@ Tiny Tasks lab
 Same task.
 Better
 operating system.
-Start with a deliberately incomplete static task board. Run one prompt as written, reset, then run the skill-enabled version. Compare diff size, verification evidence, and unnecessary complexity.
+Start with a deliberately incomplete static task board. Run one prompt as written,
+reset, then run the skill-enabled version.
 Open the starter →
-Clone from Gitea →
 Open the rules lab →
-Clone from Gitea →
-THE MISSING FEATURE
-Add All / Open / Done filters that survive reload and browser navigation.
-STACK
-HTML · CSS · JavaScript
-DEPENDENCIES
-none
-FILES
-3
 RUN A
 Good prompt
 COPY
 ↗
+Work only in hands-on/starter. It is dependency-free HTML, CSS, and JavaScript.
+Add an All / Open / Done filter to Tiny Tasks.
+Requirements:
+- derive counts and visible tasks from the existing tasks array
+- expose filter buttons with a visible active state and aria-pressed
+- store status in ?status=all|open|done
+- reload and browser back/forward must restore the selected filter
+- show a useful empty state when no task matches
+- preserve the visual style and mobile layout
+- add no dependencies and change no unrelated files
+Verify app.js syntax and exercise every filter plus URL navigation.
+Return changed files, checks run, results, and remaining risk.
 Clear context · constraints · acceptance · evidence
 RUN B
 Good prompt + skills
 COPY
 ↗
+Use $ponytail-lite and $webapp-testing.
+Work only in hands-on/starter. It is dependency-free HTML, CSS, and JavaScript.
+Add an All / Open / Done filter to Tiny Tasks.
+Apply $ponytail-lite: inspect first, reuse the current render flow, prefer native URL and button APIs, and avoid dependencies or abstractions.
+Apply $webapp-testing: verify all filters, aria-pressed, reload, browser back/forward, empty state, and one mobile viewport.
+Acceptance:
+- counts and visible tasks come from the existing tasks array
+- ?status=all|open|done is the source of truth
+- invalid status falls back safely to all
+- style remains consistent; unrelated files remain untouched
+Return the smallest working diff and concrete verification evidence.
 Same contract · explicit working methods · stronger proof
-COMPARE THE RUNS
-01
-Files changed
-02
-New dependencies
-03
-Checks actually run
-04
-Evidence returned
 THE HUMAN JOB
+O PAPEL HUMANO
 The agent may be autonomous in execution. Intent, boundaries, and evidence remain yours.
-START HERE
-Begin with one agent and one skill. Add parallelism only when the tasks are truly independent.
+O agente pode ser autônomo na execução. Intenção, limites e evidências continuam sendo seus.
 Verification
 run each gate separately
-Checks become evidence
-Three layers.
-Run each one alone.
-Run a gate on its own line, print its exit code, attach the output. The result is the deliverable.
 01 · STATIC
 Lint and types
-Format, lint, type-check. Fast and scoped to one file. Run on every save.
+Format, lint, type-check. Fast and scoped to one file.
 pnpm lint; echo "lint=$?"
-pnpm typecheck; echo "typecheck=$?"
 02 · BEHAVIOR
 Unit and contract
 Tests that repeat. Run before claiming done.
 pnpm test; echo "test=$?"
-cd services/api && go test ./...
 03 · INTEGRATION
 Real UI and API
-Drive the actual UI, API, or browser. Slower and flakier — only this catches mobile overflow and a missing 404.
+Drive the actual UI, API, or browser.
 pnpm check:ui; echo "ui=$?"
-TURBO_FORCE=true pnpm e2e
-FOUR WAYS A GREEN REPORT IS FALSE
-1
-Pipe a gate
-tail, grep, or head hide the real exit code — a pipeline returns the last command's status.
-2
-Swallow a rejection
-A silent
-.catch(() => {})
-hides a panic, an upstream limit, or a partial failure.
-3
-Trust the cache
-Turbo caches results. A gate that "passes" may not have run — use
-TURBO_FORCE=true
-.
-4
-Skip the third layer
-Lint and unit can both be green while the page breaks on mobile and the API never returns 404.
-RUN IT YOURSELF · two labs, under 10 minutes each
-Path A · verification lab
-Fill the four-row comparison strip on the starter. Run A naively, Run B with
-$gate-discipline
-and
-$webapp-testing
-.
-Open the starter →
-Clone ↗
-git.marcospaulo.dev.br/.../src/branch/pages/hands-on/starter
-Path B · rules lab
-Toggle every rule off, run the prompt. Toggle every rule on, run it again. Compare diff size, gate invocations, and the names of checks the agent names back.
-Open the rules lab →
-Clone ↗
-git.marcospaulo.dev.br/.../src/branch/pages/hands-on/rules
 Keep learning
+Continue aprendendo
 12 new readings + primary docs
-Go deeper with official documentation, production case studies, Medium, and practitioner workflows.
+12 novas leituras + documentação primária
+Go deeper with official documentation, production case studies, Medium, and practitioner
+workflows.
 Rules and enforcement case study →
 Skills review desk →
-Primary references →
 12-part reading path →
-Navigate by idea
-short chapters / one system
-Prefer a focused chapter? Start with the
-route map
-, then jump directly to
-models
-,
-agents and worktrees
-,
-skill creation
-,
-rules
-, or the
-skills review desk
-.
+Aprofunde com documentação oficial, casos de produção, Medium e fluxos de praticantes.
+Estudo de caso sobre regras e enforcement →
+Skills review desk →
+Trilha com 12 leituras →
@@ -34,6 +34,8 @@ const { label, columns = 3 } = Astro.props;
  }

  @media (max-width: 800px) {
-    .grid { grid-template-columns: 1fr; }
+    .grid {
+      grid-template-columns: 1fr;
+    }
  }
 </style>
@@ -20,25 +20,33 @@ const { items, initialId = items[0]?.id } = Astro.props;

 <div class="island" data-initial={initialId}>
  <div class="tabs" role="tablist" aria-label="Sections">
-    {items.map((item) => (
+    {
+      items.map((item) => (
        <button
          role="tab"
          id={`tab-${item.id}`}
          aria-controls={`panel-${item.id}`}
          aria-selected={item.id === initialId}
          data-tab={item.id}
-      >{item.label}</button>
-    ))}
+        >
+          {item.label}
+        </button>
+      ))
+    }
  </div>
-  {items.map((item) => (
+  {
+    items.map((item) => (
      <div
        role="tabpanel"
        id={`panel-${item.id}`}
        aria-labelledby={`tab-${item.id}`}
        data-panel={item.id}
        hidden={item.id !== initialId}
-    >{item.body}</div>
-  ))}
+      >
+        {item.body}
+      </div>
+    ))
+  }
 </div>

 <script>
@@ -68,7 +76,10 @@ const { items, initialId = items[0]?.id } = Astro.props;
 </script>

 <style>
-  .tabs { display: grid; gap: 8px; }
+  .tabs {
+    display: grid;
+    gap: 8px;
+  }

  button {
    padding: 12px;
@@ -78,7 +89,7 @@ const { items, initialId = items[0]?.id } = Astro.props;
    text-align: left;
    cursor: pointer;
    /* transform/opacity only — never animate layout properties */
-    transition: background 180ms cubic-bezier(.2, 0, 0, 1);
+    transition: background 180ms cubic-bezier(0.2, 0, 0, 1);
  }

  button[aria-selected='true'] {
@@ -92,6 +103,8 @@ const { items, initialId = items[0]?.id } = Astro.props;
  }

  @media (prefers-reduced-motion: reduce) {
-    button { transition-duration: .01ms; }
+    button {
+      transition-duration: 0.01ms;
+    }
  }
 </style>
@@ -40,7 +40,7 @@ const { eyebrow, title, body, href } = Astro.props;
  .eyebrow {
    color: var(--accent);
    font: var(--font-eyebrow);
-    letter-spacing: .1em;
+    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

@@ -48,7 +48,7 @@ const { eyebrow, title, body, href } = Astro.props;
    margin: 0;
    font-size: var(--step-5);
    line-height: 1.05;
-    letter-spacing: -.06em; /* tight display tracking is a signature of this design */
+    letter-spacing: -0.06em; /* tight display tracking is a signature of this design */
  }

  p {
@@ -69,6 +69,8 @@ const { eyebrow, title, body, href } = Astro.props;
  }

  @media (max-width: 800px) {
-    .block { padding: 18px; }
+    .block {
+      padding: 18px;
+    }
  }
 </style>
@@ -1,10 +1,6 @@
 {
  "extends": ["stylelint-config-standard"],
-  "ignoreFiles": [
-    "dist/**",
-    "public/hands-on/**",
-    "submitted-skills/**"
-  ],
+  "ignoreFiles": ["dist/**", "public/hands-on/**", "submitted-skills/**"],
  "rules": {
    "custom-property-pattern": "^[a-z][a-z0-9]*(-[a-z0-9]+)*$",
    "declaration-property-value-disallowed-list": {
@@ -28,25 +28,30 @@ const lang = 'en'; // TODO: wire to the language toggle decision (task 03)
  </section>

  <GridGroup label="Chapter sections" columns={3}>
-    {chapter.data.sections.map((section) => (
+    {
+      chapter.data.sections.map((section) => (
        <StaticBlock
          eyebrow={section.eyebrow[lang]}
          title={section.title[lang]}
          body={section.body[lang]}
        />
-    ))}
+      ))
+    }
  </GridGroup>
 </ChapterLayout>

 <style>
  /* Page-level layout only. Anything reusable belongs in a component. */
-  .hero { max-width: 780px; padding: clamp(75px, 12vh, 145px) 0 85px; }
+  .hero {
+    max-width: 780px;
+    padding: clamp(75px, 12vh, 145px) 0 85px;
+  }

  h1 {
    margin: 16px 0 24px;
    font-size: var(--step-display);
-    line-height: .86;
-    letter-spacing: -.08em;
+    line-height: 0.86;
+    letter-spacing: -0.08em;
  }

  /* Georgia is a real system font and DOES render — unlike Manrope/DM Mono.
@@ -57,5 +62,9 @@ const lang = 'en'; // TODO: wire to the language toggle decision (task 03)
    font-weight: 400;
  }

-  .lede { max-width: 570px; color: var(--muted); line-height: 1.65; }
+  .lede {
+    max-width: 570px;
+    color: var(--muted);
+    line-height: 1.65;
+  }
 </style>
@@ -39,7 +39,18 @@ const items = entries.map((entry) => ({
 </BaseLayout>

 <style>
-  .hero { max-width: 780px; padding: clamp(75px, 12vh, 145px) 0 85px; }
-  h1 { font-size: var(--step-display); line-height: .86; letter-spacing: -.08em; }
-  h1 em { color: var(--blue); font-family: Georgia, serif; font-weight: 400; }
+  .hero {
+    max-width: 780px;
+    padding: clamp(75px, 12vh, 145px) 0 85px;
+  }
+  h1 {
+    font-size: var(--step-display);
+    line-height: 0.86;
+    letter-spacing: -0.08em;
+  }
+  h1 em {
+    color: var(--blue);
+    font-family: Georgia, serif;
+    font-weight: 400;
+  }
 </style>
@@ -1,6 +1,6 @@
 {
  "*.{js,mjs,ts,astro}": ["prettier --write", "eslint --fix --max-warnings=0 --no-warn-ignored"],
-  "*.css": ["prettier --write", "stylelint --fix --max-warnings=0"],
+  "*.css": ["prettier --write", "stylelint --fix --max-warnings=0 --allow-empty-input"],
  "src/**/*.{astro,css}": ["node .agents/scripts/check-tokens.mjs"],
  "*.{json,md,yml,yaml}": ["prettier --write"]
 }
@@ -0,0 +1,29 @@
+dist
+node_modules
+hands-on
+public/hands-on
+submitted-skills
+public/submitted-skills
+skill-reviews
+vote-service
+
+# Legacy site sources, slated for deletion at cutover (task 20). Same list and
+# same reasoning as .prettierignore: these are minified, single-line
+# stylesheets. stylelint's `declaration-block-single-line-max-declarations`
+# fires once per rule in them — ~180 errors for `styles.css` alone — so staging
+# one to change a single declaration blocks the commit outright. The rule is
+# about hand-written source readability and says nothing useful about minified
+# output that is about to be deleted.
+#
+# `public/fonts/fonts.css` is deliberately NOT here: it is new, hand-written,
+# and must stay linted.
+#
+# Root-anchored on purpose: a bare `rules` would also swallow .agents/rules/.
+/styles.css
+/landing.css
+/chapters.css
+/responsive.css
+/skills-review/
+/rules/
+/skills/
+/full-guide/
@@ -1,23 +1,37 @@
 # Gates: review desk privacy and improved-draft audit

-OWNS: skills-review/**, submitted-skills/Anonymous Operational Submission/**, skill-reviews/improved/ndo-repro/**, scripts/verify.mjs
+OWNS: skills-review/**, submitted-skills/Anonymous Operational Submission/**,
+skill-reviews/improved/ndo-repro/**, scripts/verify.mjs

-Scope: Redact the operational submission's identity and URLs from the published review desk, keep package files usable in either preview mode, and explain each improved draft as a concrete diff.
+Scope: Redact the operational submission's identity and URLs from the published
+review desk, keep package files usable in either preview mode, and explain each
+improved draft as a concrete diff.

- [x] G1: the published operational submission contains no personal name, original source URL, email address, or host-specific path
-  CHECK: node scripts/verify.mjs
-  EXPECT: review privacy verification passed
-  EVIDENCE: exit=0; shell=/bin/sh; cwd=/home/marcos/Projects/ai-for-dummies; path=d3551337f830/34 entries; EXPECT=matched; output-sha256=180e8cd0d18968e2a4244ede959c3459b5ce80b836fc5a0df00961907e5d15a1; output-bytes=481
+- [x] G1: the published operational submission contains no personal name,
+      original source URL, email address, or host-specific path CHECK: node
+      scripts/verify.mjs EXPECT: review privacy verification passed EVIDENCE:
+      exit=0; shell=/bin/sh; cwd=/home/marcos/Projects/ai-for-dummies;
+      path=d3551337f830/34 entries; EXPECT=matched;
+      output-sha256=180e8cd0d18968e2a4244ede959c3459b5ce80b836fc5a0df00961907e5d15a1;
+      output-bytes=481

- [x] G2: every package file remains selectable in Original and Improved draft modes without resetting the selected preview
-  CHECK: node scripts/verify.mjs
-  EXPECT: review file-mode verification passed
-  EVIDENCE: exit=0; shell=/bin/sh; cwd=/home/marcos/Projects/ai-for-dummies; path=d3551337f830/34 entries; EXPECT=matched; output-sha256=180e8cd0d18968e2a4244ede959c3459b5ce80b836fc5a0df00961907e5d15a1; output-bytes=481
+- [x] G2: every package file remains selectable in Original and Improved draft
+      modes without resetting the selected preview CHECK: node
+      scripts/verify.mjs EXPECT: review file-mode verification passed EVIDENCE:
+      exit=0; shell=/bin/sh; cwd=/home/marcos/Projects/ai-for-dummies;
+      path=d3551337f830/34 entries; EXPECT=matched;
+      output-sha256=180e8cd0d18968e2a4244ede959c3459b5ce80b836fc5a0df00961907e5d15a1;
+      output-bytes=481

- [x] G3: every improved draft has an interactive change lens that explains changed guidance and its rationale
-  CHECK: node scripts/verify.mjs
-  EXPECT: review change-lens verification passed
-  EVIDENCE: exit=0; shell=/bin/sh; cwd=/home/marcos/Projects/ai-for-dummies; path=d3551337f830/34 entries; EXPECT=matched; output-sha256=180e8cd0d18968e2a4244ede959c3459b5ce80b836fc5a0df00961907e5d15a1; output-bytes=481
+- [x] G3: every improved draft has an interactive change lens that explains
+      changed guidance and its rationale CHECK: node scripts/verify.mjs EXPECT:
+      review change-lens verification passed EVIDENCE: exit=0; shell=/bin/sh;
+      cwd=/home/marcos/Projects/ai-for-dummies; path=d3551337f830/34 entries;
+      EXPECT=matched;
+      output-sha256=180e8cd0d18968e2a4244ede959c3459b5ce80b836fc5a0df00961907e5d15a1;
+      output-bytes=481

- [x] G4: the review desk works at mobile, Full HD, and 4K widths without page errors or horizontal overflow
-  EVIDENCE: Playwright audit on 2026-09-04: 320, 390, 1280, 1920, and 3840px passed with Improved Draft and Change lens rendered; no horizontal overflow or page errors.
+- [x] G4: the review desk works at mobile, Full HD, and 4K widths without page
+      errors or horizontal overflow EVIDENCE: Playwright audit on 2026-09-04:
+      320, 390, 1280, 1920, and 3840px passed with Improved Draft and Change
+      lens rendered; no horizontal overflow or page errors.
@@ -1 +1,88 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>AI For Dummies — Agents and trees</title><link rel="stylesheet" href="../chapters.css"></head><body><main><header class="top"><a href="../summary/">← ROUTE MAP</a><span>02 / AGENTS & TREES</span><a href="../full-guide/">field guide ↗</a></header><section class="hero"><p class="eyebrow">Subagent workflow</p><h1>One branch<br>per <em>hand.</em></h1><p>Agents work when roles, files, and evidence are bounded. A worktree gives each worker its own checkout while the orchestrator protects intent.</p></section><section class="pipeline"><div><p class="eyebrow">The tree</p><h2>Split at<br>the <em>seam.</em></h2></div><div class="panel"><strong>MAIN / ORCHESTRATOR</strong><code>├── agent/ui → components + visual states · ├── agent/tests → acceptance + regressions · └── agent/docs → guide + examples · merge after each leaf returns a diff and evidence</code></div></section><section class="grid"><article class="card"><b>FRAME</b><h2>Orchestrator</h2><p>Owns scope, task graph, boundaries, and integration.</p></article><article class="card"><b>HAND OFF</b><h2>Worker</h2><p>Owns one coherent slice and one worktree.</p></article><article class="card"><b>PROVE</b><h2>Verifier</h2><p>Re-runs gates and reports remaining gaps.</p></article></section><section class="practice"><div><p class="eyebrow">Handoff</p><h2>Context that<br>can <em>travel.</em></h2></div><div class="steps"><article><b>01</b><div><strong>Brief</strong><span>Goal, owned files, dependencies, non-goals, acceptance.</span></div></article><article><b>02</b><div><strong>Isolation</strong><span>One branch and worktree per independent change.</span></div></article><article><b>03</b><div><strong>Evidence</strong><span>Commands, result, changed files, screenshots, gaps.</span></div></article></div></section><nav class="links"><a href="../models/">Previous: models →</a><a href="../rules/">Rules case study →</a><a href="../hands-on/rules/">Try the rules lab →</a></nav></main></body></html>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>AI For Dummies — Agents and trees</title>
+    <link rel="stylesheet" href="../chapters.css" />
+  </head>
+  <body>
+    <main>
+      <header class="top">
+        <a href="../summary/">← ROUTE MAP</a><span>02 / AGENTS & TREES</span
+        ><a href="../full-guide/">field guide ↗</a>
+      </header>
+      <section class="hero">
+        <p class="eyebrow">Subagent workflow</p>
+        <h1>One branch<br />per <em>hand.</em></h1>
+        <p>
+          Agents work when roles, files, and evidence are bounded. A worktree gives each worker its
+          own checkout while the orchestrator protects intent.
+        </p>
+      </section>
+      <section class="pipeline">
+        <div>
+          <p class="eyebrow">The tree</p>
+          <h2>Split at<br />the <em>seam.</em></h2>
+        </div>
+        <div class="panel">
+          <strong>MAIN / ORCHESTRATOR</strong
+          ><code
+            >├── agent/ui → components + visual states · ├── agent/tests → acceptance + regressions
+            · └── agent/docs → guide + examples · merge after each leaf returns a diff and
+            evidence</code
+          >
+        </div>
+      </section>
+      <section class="grid">
+        <article class="card">
+          <b>FRAME</b>
+          <h2>Orchestrator</h2>
+          <p>Owns scope, task graph, boundaries, and integration.</p>
+        </article>
+        <article class="card">
+          <b>HAND OFF</b>
+          <h2>Worker</h2>
+          <p>Owns one coherent slice and one worktree.</p>
+        </article>
+        <article class="card">
+          <b>PROVE</b>
+          <h2>Verifier</h2>
+          <p>Re-runs gates and reports remaining gaps.</p>
+        </article>
+      </section>
+      <section class="practice">
+        <div>
+          <p class="eyebrow">Handoff</p>
+          <h2>Context that<br />can <em>travel.</em></h2>
+        </div>
+        <div class="steps">
+          <article>
+            <b>01</b>
+            <div>
+              <strong>Brief</strong
+              ><span>Goal, owned files, dependencies, non-goals, acceptance.</span>
+            </div>
+          </article>
+          <article>
+            <b>02</b>
+            <div>
+              <strong>Isolation</strong><span>One branch and worktree per independent change.</span>
+            </div>
+          </article>
+          <article>
+            <b>03</b>
+            <div>
+              <strong>Evidence</strong
+              ><span>Commands, result, changed files, screenshots, gaps.</span>
+            </div>
+          </article>
+        </div>
+      </section>
+      <nav class="links">
+        <a href="../models/">Previous: models →</a><a href="../rules/">Rules case study →</a
+        ><a href="../hands-on/rules/">Try the rules lab →</a>
+      </nav>
+    </main>
+  </body>
+</html>
@@ -1 +1 @@
-:root{--ink:#122534;--paper:#f6f3ed;--line:#d0d5d2;--muted:#65717a;--blue:#215675;--gold:#ebbf58;--red:#a7483f}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--paper);font:16px/1.6 Arial,sans-serif}main{max-width:1400px;margin:auto;padding:0 5vw}.top{display:flex;justify-content:space-between;gap:20px;padding:24px 0;border-bottom:1px solid var(--line);font:700 11px monospace;letter-spacing:.08em;text-transform:uppercase}.top a{color:var(--ink);text-decoration:none}.hero{padding:100px 0 70px;max-width:950px}.eyebrow{color:var(--red);font:700 11px monospace;letter-spacing:.12em;text-transform:uppercase}.hero h1{margin:16px 0;font-size:clamp(52px,9vw,126px);line-height:.9;letter-spacing:-.07em}.hero h1 em,h2 em{font:400 .9em Georgia,serif;color:var(--red)}.hero p{max-width:680px;color:var(--muted);font-size:20px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:100px}.card{min-height:220px;padding:28px;background:var(--paper)}.card b{color:var(--red);font:24px monospace}.card h2{margin:18px 0 8px;font-size:25px;letter-spacing:-.04em}.card p{margin:0 0 14px;color:var(--muted)}.card a{color:var(--blue);font-weight:700}.model,.pipeline,.practice{display:grid;grid-template-columns:1fr 2fr;gap:50px;padding:80px 0;border-top:1px solid var(--line)}.model h2,.pipeline h2,.practice h2{margin:0;font-size:clamp(34px,5vw,70px);line-height:.95;letter-spacing:-.06em}.panel{padding:28px;background:var(--ink);color:var(--paper)}.panel strong{display:block;color:var(--gold);font:700 12px monospace;letter-spacing:.1em}.panel code{display:block;margin-top:18px;color:#d6e1e4;font:14px/1.8 ui-monospace,monospace;white-space:pre-wrap}.steps{display:grid;gap:1px;background:var(--line)}.steps article{display:grid;grid-template-columns:70px 1fr;gap:20px;padding:20px;background:var(--paper)}.steps b{color:var(--red);font:20px monospace}.steps strong{display:block}.steps span{color:var(--muted)}.links{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 70px}.links a{padding:10px 13px;color:var(--ink);border:1px solid var(--ink);text-decoration:none;font:11px monospace;text-transform:uppercase}.links a:hover{color:var(--paper);background:var(--ink)}footer{padding:30px 0 70px;color:var(--muted);font-size:13px}@media(max-width:800px){.grid,.model,.pipeline,.practice{grid-template-columns:1fr}.hero{padding:65px 0 45px}.model,.pipeline,.practice{gap:25px;padding:55px 0}}@media(max-width:520px){main{padding:0 16px}.top span{display:none}.hero h1{font-size:56px}.hero p{font-size:17px}.card{min-height:0}.steps article{grid-template-columns:45px 1fr}}
+:root{--ink:#122534;--paper:#f6f3ed;--line:#d0d5d2;--muted:#65717a;--blue:#215675;--gold:#ebbf58;--red:#a7483f;--font-sans:manrope,arial,sans-serif;--font-mono:'DM Mono',monospace;}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--paper);font:16px/1.6 var(--font-sans)}main{max-width:1400px;margin:auto;padding:0 5vw}.top{display:flex;justify-content:space-between;gap:20px;padding:24px 0;border-bottom:1px solid var(--line);font:700 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.top a{color:var(--ink);text-decoration:none}.hero{padding:100px 0 70px;max-width:950px}.eyebrow{color:var(--red);font:700 11px var(--font-mono);letter-spacing:.12em;text-transform:uppercase}.hero h1{margin:16px 0;font-size:clamp(52px,9vw,126px);line-height:.9;letter-spacing:-.07em}.hero h1 em,h2 em{font:400 .9em Georgia,serif;color:var(--red)}.hero p{max-width:680px;color:var(--muted);font-size:20px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:100px}.card{min-height:220px;padding:28px;background:var(--paper)}.card b{color:var(--red);font:24px var(--font-mono)}.card h2{margin:18px 0 8px;font-size:25px;letter-spacing:-.04em}.card p{margin:0 0 14px;color:var(--muted)}.card a{color:var(--blue);font-weight:700}.model,.pipeline,.practice{display:grid;grid-template-columns:1fr 2fr;gap:50px;padding:80px 0;border-top:1px solid var(--line)}.model h2,.pipeline h2,.practice h2{margin:0;font-size:clamp(34px,5vw,70px);line-height:.95;letter-spacing:-.06em}.panel{padding:28px;background:var(--ink);color:var(--paper)}.panel strong{display:block;color:var(--gold);font:700 12px var(--font-mono);letter-spacing:.1em}.panel code{display:block;margin-top:18px;color:#d6e1e4;font:14px/1.8 var(--font-mono);white-space:pre-wrap}.steps{display:grid;gap:1px;background:var(--line)}.steps article{display:grid;grid-template-columns:70px 1fr;gap:20px;padding:20px;background:var(--paper)}.steps b{color:var(--red);font:20px var(--font-mono)}.steps strong{display:block}.steps span{color:var(--muted)}.links{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 70px}.links a{padding:10px 13px;color:var(--ink);border:1px solid var(--ink);text-decoration:none;font:11px var(--font-mono);text-transform:uppercase}.links a:hover{color:var(--paper);background:var(--ink)}footer{padding:30px 0 70px;color:var(--muted);font-size:13px}@media(max-width:800px){.grid,.model,.pipeline,.practice{grid-template-columns:1fr}.hero{padding:65px 0 45px}.model,.pipeline,.practice{gap:25px;padding:55px 0}}@media(max-width:520px){main{padding:0 16px}.top span{display:none}.hero h1{font-size:56px}.hero p{font-size:17px}.card{min-height:0}.steps article{grid-template-columns:45px 1fr}}
@@ -7,38 +7,47 @@ articles are context, not authority.

 - Anthropic — custom subagents: https://code.claude.com/docs/en/sub-agents
  Separate context, tools, permissions, model selection, and worktree isolation.
- Anthropic — skills: https://code.claude.com/docs/en/skills
-  Reusable instruction packages and skill discovery.
- Anthropic — worktrees: https://code.claude.com/docs/en/worktrees
-  Isolated sessions, branches, cleanup, and ignored files.
- OpenAI — build skills: https://developers.openai.com/codex/skills
-  Packaged instructions and resources for Codex workflows.
- OpenAI API — skills reference: https://developers.openai.com/api/reference/go/resources/skills
-  Creating, versioning, listing, and downloading skill bundles.
- Git — worktree: https://git-scm.com/docs/git-worktree.html
-  Linked working trees, branches, shared history, add/list/remove/prune.
+- Anthropic — skills: https://code.claude.com/docs/en/skills Reusable
+  instruction packages and skill discovery.
+- Anthropic — worktrees: https://code.claude.com/docs/en/worktrees Isolated
+  sessions, branches, cleanup, and ignored files.
+- OpenAI — build skills: https://developers.openai.com/codex/skills Packaged
+  instructions and resources for Codex workflows.
+- OpenAI API — skills reference:
+  https://developers.openai.com/api/reference/go/resources/skills Creating,
+  versioning, listing, and downloading skill bundles.
+- Git — worktree: https://git-scm.com/docs/git-worktree.html Linked working
+  trees, branches, shared history, add/list/remove/prune.

 ## Research and articles

 - [Model routing and reasoning controls](model-routing.md) — official OpenAI,
  Anthropic, and Google terminology, commands, compatibility caveats, and a
  practical tier/effort baseline.
- [Verified skill sources](skill-sources.md) — pinned GitHub references,
-  package paths, local-match confidence, and an approval-first install prompt.
+- [Verified skill sources](skill-sources.md) — pinned GitHub references, package
+  paths, local-match confidence, and an approval-first install prompt.

 For a structured 12-part reading path—including Git and Anthropic documentation,
 OpenAI orchestration guidance, Medium, and Substack—see
 [additional-reading.md](additional-reading.md).

- Infobip Research — phased coding-agent workflow: https://arxiv.org/abs/2608.30701
- Effective asynchronous software engineering agents: https://arxiv.org/abs/2603.21489
- Launch Receipts — AI coding workflow without losing control: https://launchreceipts.com/articles/ai-coding-agent-workflow
- GitWorktree.org — three agents, three worktrees case study: https://www.gitworktree.org/cases/parallel-ai-agents
+- Infobip Research — phased coding-agent workflow:
+  https://arxiv.org/abs/2608.30701
+- Effective asynchronous software engineering agents:
+  https://arxiv.org/abs/2603.21489
+- Launch Receipts — AI coding workflow without losing control:
+  https://launchreceipts.com/articles/ai-coding-agent-workflow
+- GitWorktree.org — three agents, three worktrees case study:
+  https://www.gitworktree.org/cases/parallel-ai-agents

 ## Teaching claims

- Use a stronger model where ambiguity, architecture, decomposition, and review dominate.
+- Use a stronger model where ambiguity, architecture, decomposition, and review
+  dominate.
 - Use faster models for bounded implementation with explicit context and checks.
- Give every editing worker an isolated branch/worktree; merge only reviewed diffs.
- A skill is a reusable procedure plus optional references/scripts/assets, not magical memory.
- Delegation does not remove human responsibility for intent, boundaries, or evidence.
+- Give every editing worker an isolated branch/worktree; merge only reviewed
+  diffs.
+- A skill is a reusable procedure plus optional references/scripts/assets, not
+  magical memory.
+- Delegation does not remove human responsibility for intent, boundaries, or
+  evidence.
@@ -1,6 +1,8 @@
 # Additional reading: multi-agent coding

-Verified on 2026-09-02. Start with the official references for behavior and constraints; use the practitioner articles for concrete workflow ideas that should be tested against your own repository.
+Verified on 2026-09-02. Start with the official references for behavior and
+constraints; use the practitioner articles for concrete workflow ideas that
+should be tested against your own repository.

 ## Git worktrees and isolated coding sessions

@@ -8,25 +10,38 @@ Verified on 2026-09-02. Start with the official references for behavior and cons

 - **Publisher:** Git
 - **Topic:** Worktree fundamentals and lifecycle
- **Teaching takeaway:** The authoritative reference for how linked worktrees share repository data while retaining separate `HEAD` and index state. Use its `add`, `list`, `lock`, `remove`, `prune`, and `repair` sections to teach the complete lifecycle rather than only worktree creation.
+- **Teaching takeaway:** The authoritative reference for how linked worktrees
+  share repository data while retaining separate `HEAD` and index state. Use its
+  `add`, `list`, `lock`, `remove`, `prune`, and `repair` sections to teach the
+  complete lifecycle rather than only worktree creation.

 ### 2. [Run parallel sessions with worktrees](https://code.claude.com/docs/en/worktrees)

 - **Publisher:** Anthropic — Claude Code Docs
 - **Topic:** Native worktree isolation for coding agents
- **Teaching takeaway:** Shows how Claude Code creates isolated sessions with `--worktree`, how gitignored environment files can be copied with `.worktreeinclude`, and how subagents can use worktree isolation. It is a useful bridge between raw Git commands and a real agent workflow.
+- **Teaching takeaway:** Shows how Claude Code creates isolated sessions with
+  `--worktree`, how gitignored environment files can be copied with
+  `.worktreeinclude`, and how subagents can use worktree isolation. It is a
+  useful bridge between raw Git commands and a real agent workflow.

 ### 3. [How Git Worktrees Transformed My AI Agent Development Workflow in 2026](https://medium.com/@mudassir00seven/how-git-worktrees-transformed-my-ai-agent-development-workflow-in-2026-ad8a59b8edfb)

 - **Publisher:** Medium — Mudassir Khan
 - **Topic:** One worktree per agent and task
- **Teaching takeaway:** A concise practitioner explanation of why parallel agents collide in a shared filesystem and how one task, branch, worktree, and pull request per agent reduces that interference. Pair it with the official Git documentation because operational details may evolve.
+- **Teaching takeaway:** A concise practitioner explanation of why parallel
+  agents collide in a shared filesystem and how one task, branch, worktree, and
+  pull request per agent reduces that interference. Pair it with the official
+  Git documentation because operational details may evolve.

 ### 4. [How to Use Git Worktrees with Coding Agents](https://meshintelligence.substack.com/p/how-to-use-git-worktrees-with-coding)

 - **Publisher:** Mesh Intelligence on Substack — Petar Djukic
 - **Topic:** Worktree-per-task workflow and integration boundaries
- **Teaching takeaway:** Explains why branches alone do not isolate active files, compares worktrees with clones and containers, and presents a create-work-review-remove lifecycle. Its strongest lesson is that worktrees isolate execution, not merge conflicts, so scheduling and review gates still matter.
+- **Teaching takeaway:** Explains why branches alone do not isolate active
+  files, compares worktrees with clones and containers, and presents a
+  create-work-review-remove lifecycle. Its strongest lesson is that worktrees
+  isolate execution, not merge conflicts, so scheduling and review gates still
+  matter.

 ## Subagents and orchestration

@@ -34,31 +49,48 @@ Verified on 2026-09-02. Start with the official references for behavior and cons

 - **Publisher:** Anthropic — Claude Code Docs
 - **Topic:** Specialized subagents, context, tools, and background execution
- **Teaching takeaway:** Demonstrates how to define narrow subagents with their own prompts, tool permissions, and models, then run them in foreground or background. It supports teaching that delegation quality depends on explicit responsibility and context boundaries, not merely spawning more agents.
+- **Teaching takeaway:** Demonstrates how to define narrow subagents with their
+  own prompts, tool permissions, and models, then run them in foreground or
+  background. It supports teaching that delegation quality depends on explicit
+  responsibility and context boundaries, not merely spawning more agents.

 ### 6. [Building Effective AI Agents](https://www.anthropic.com/engineering/building-effective-agents)

 - **Publisher:** Anthropic Engineering
 - **Topic:** Agent architecture patterns
- **Teaching takeaway:** Introduces routing, parallelization, orchestrator-worker, and evaluator-optimizer patterns while recommending the simplest architecture that meets the task. The orchestrator-worker section is especially useful for explaining when a strong planner should dynamically decompose work for bounded workers.
+- **Teaching takeaway:** Introduces routing, parallelization,
+  orchestrator-worker, and evaluator-optimizer patterns while recommending the
+  simplest architecture that meets the task. The orchestrator-worker section is
+  especially useful for explaining when a strong planner should dynamically
+  decompose work for bounded workers.

 ### 7. [How we built our multi-agent research system](https://www.anthropic.com/engineering/multi-agent-research-system)

 - **Publisher:** Anthropic Engineering
 - **Topic:** Production multi-agent coordination
- **Teaching takeaway:** A production case study in which a lead agent plans and delegates independent searches to parallel subagents. It is useful for discussing breadth-first tasks, separate context windows, token cost, evaluation, and why parallelism helps most when subtasks are genuinely independent.
+- **Teaching takeaway:** A production case study in which a lead agent plans and
+  delegates independent searches to parallel subagents. It is useful for
+  discussing breadth-first tasks, separate context windows, token cost,
+  evaluation, and why parallelism helps most when subtasks are genuinely
+  independent.

 ### 8. [A practical guide to building agents](https://openai.com/business/guides-and-resources/a-practical-guide-to-building-ai-agents/)

 - **Publisher:** OpenAI
 - **Topic:** Manager and handoff orchestration patterns
- **Teaching takeaway:** Distinguishes centralized manager orchestration from decentralized handoffs and shows agents being exposed as tools to other agents. Use it to teach that the right topology depends on who must retain control, combine outputs, and own the final response.
+- **Teaching takeaway:** Distinguishes centralized manager orchestration from
+  decentralized handoffs and shows agents being exposed as tools to other
+  agents. Use it to teach that the right topology depends on who must retain
+  control, combine outputs, and own the final response.

 ### 9. [Agent orchestration](https://openai.github.io/openai-agents-python/multi_agent/)

 - **Publisher:** OpenAI Agents SDK
 - **Topic:** Agents-as-tools, handoffs, and code-driven workflows
- **Teaching takeaway:** Gives a precise comparison between a manager calling specialists as tools and handing control to a specialist. It also covers deterministic orchestration in code, including chains, evaluator loops, and parallel execution for independent tasks.
+- **Teaching takeaway:** Gives a precise comparison between a manager calling
+  specialists as tools and handing control to a specialist. It also covers
+  deterministic orchestration in code, including chains, evaluator loops, and
+  parallel execution for independent tasks.

 ## Model routing and reusable skills

@@ -66,19 +98,30 @@ Verified on 2026-09-02. Start with the official references for behavior and cons

 - **Publisher:** Anthropic — Claude Platform Docs
 - **Topic:** Routing work between frontier and lower-cost models
- **Teaching takeaway:** Compares model selection, advisor, and orchestrator strategies using cost-per-completed-task rather than token price alone. Its orchestrator guidance directly supports a frontier planner dispatching bulk independent work to cheaper workers—but also explains when one model is simpler and less expensive.
+- **Teaching takeaway:** Compares model selection, advisor, and orchestrator
+  strategies using cost-per-completed-task rather than token price alone. Its
+  orchestrator guidance directly supports a frontier planner dispatching bulk
+  independent work to cheaper workers—but also explains when one model is
+  simpler and less expensive.

 ### 11. [Models](https://openai.github.io/openai-agents-python/models/)

 - **Publisher:** OpenAI Agents SDK
 - **Topic:** Per-agent model selection and mixed-provider routing
- **Teaching takeaway:** Documents how different agents in one workflow can use different models or providers and how routing can be configured centrally. This is a practical implementation reference for turning a conceptual “strong planner, lightweight workers” policy into explicit per-agent configuration.
+- **Teaching takeaway:** Documents how different agents in one workflow can use
+  different models or providers and how routing can be configured centrally.
+  This is a practical implementation reference for turning a conceptual “strong
+  planner, lightweight workers” policy into explicit per-agent configuration.

 ### 12. [Skills](https://platform.claude.com/docs/en/managed-agents/skills)

 - **Publisher:** Anthropic — Claude Platform Docs
 - **Topic:** Reusable filesystem-based agent skills
- **Teaching takeaway:** Explains the `SKILL.md` package model, repository discovery, supporting scripts and resources, and why only task-relevant skills should be attached. It also highlights the security lesson that repository skills are executable instructions and therefore part of the agent’s trust boundary.
+- **Teaching takeaway:** Explains the `SKILL.md` package model, repository
+  discovery, supporting scripts and resources, and why only task-relevant skills
+  should be attached. It also highlights the security lesson that repository
+  skills are executable instructions and therefore part of the agent’s trust
+  boundary.

 ## Suggested teaching order

@@ -1,25 +1,42 @@
 # Model routing and reasoning controls

-Verified against first-party documentation on 2026-09-02. Model catalogs and aliases change; pin production model IDs and re-check the linked compatibility tables before rollout.
+Verified against first-party documentation on 2026-09-02. Model catalogs and
+aliases change; pin production model IDs and re-check the linked compatibility
+tables before rollout.

 ## Two independent routing knobs

 1. **Model tier** chooses the capability, latency, and cost envelope.
-2. **Effort / thinking control** changes how much reasoning work a supported model performs for one request.
+2. **Effort / thinking control** changes how much reasoning work a supported
+   model performs for one request.

-Do not assume that every effort value works with every model or product. Unsupported values may fail, be ignored, or be mapped to another level depending on the client.
+Do not assume that every effort value works with every model or product.
+Unsupported values may fail, be ignored, or be mapped to another level depending
+on the client.

 ## OpenAI

-The current GPT-5.6 family exposes the **Sol**, **Terra**, and **Luna** model tiers. Its documented `reasoning.effort` values are `none`, `low`, `medium`, `high`, `xhigh`, and `max`. Availability remains model-specific, so select from the levels shown for the chosen model rather than treating the full list as universal. [OpenAI: latest model guide](https://developers.openai.com/api/docs/guides/latest-model)
+The current GPT-5.6 family exposes the **Sol**, **Terra**, and **Luna** model
+tiers. Its documented `reasoning.effort` values are `none`, `low`, `medium`,
+`high`, `xhigh`, and `max`. Availability remains model-specific, so select from
+the levels shown for the chosen model rather than treating the full list as
+universal.
+[OpenAI: latest model guide](https://developers.openai.com/api/docs/guides/latest-model)

-Use a lower-cost tier and low effort for bounded, mechanical work; raise the model tier or effort for planning, architecture, difficult debugging, and final review. This is routing guidance, not an API guarantee.
+Use a lower-cost tier and low effort for bounded, mechanical work; raise the
+model tier or effort for planning, architecture, difficult debugging, and final
+review. This is routing guidance, not an API guarantee.

 ## Anthropic Claude

 ### Model tier

-Claude Code provides the aliases `opus`, `sonnet`, and `haiku`: Opus is intended for complex reasoning, Sonnet for everyday coding, and Haiku for simple, fast work. Aliases resolve to provider-dependent recommended versions and can change over time; use a full model ID when reproducibility matters. Claude Code also documents `opusplan`, which uses Opus in plan mode and Sonnet for execution. [Claude Code: model configuration](https://docs.anthropic.com/en/docs/claude-code/model-config)
+Claude Code provides the aliases `opus`, `sonnet`, and `haiku`: Opus is intended
+for complex reasoning, Sonnet for everyday coding, and Haiku for simple, fast
+work. Aliases resolve to provider-dependent recommended versions and can change
+over time; use a full model ID when reproducibility matters. Claude Code also
+documents `opusplan`, which uses Opus in plan mode and Sonnet for execution.
+[Claude Code: model configuration](https://docs.anthropic.com/en/docs/claude-code/model-config)

 Copy-ready Claude Code switches:

@@ -37,7 +54,12 @@ claude --model opus

 ### Effort

-The Claude API parameter is `output_config.effort`. The documented levels are `low`, `medium`, `high`, `xhigh`, and `max`; `high` is the API default. `xhigh` and `max` have narrower model support, and Haiku 4.5 does not support effort. Effort affects the whole response—including thinking and tool calls—and is a behavioral signal, not a strict token budget. [Anthropic: effort](https://docs.anthropic.com/en/docs/build-with-claude/effort)
+The Claude API parameter is `output_config.effort`. The documented levels are
+`low`, `medium`, `high`, `xhigh`, and `max`; `high` is the API default. `xhigh`
+and `max` have narrower model support, and Haiku 4.5 does not support effort.
+Effort affects the whole response—including thinking and tool calls—and is a
+behavioral signal, not a strict token budget.
+[Anthropic: effort](https://docs.anthropic.com/en/docs/build-with-claude/effort)

 Documented Python example:

@@ -53,27 +75,45 @@ response = client.messages.create(
 )
 ```

-Claude Code exposes `/effort`; its available choices depend on the active model. Current Claude Code documentation lists `low`, `medium`, `high`, `xhigh`, and `max` for supported Opus versions, while some Opus/Sonnet versions omit `xhigh`. When a selected level is unsupported, Claude Code can fall back to the highest supported level at or below it. [Claude Code: effort compatibility](https://docs.anthropic.com/en/docs/claude-code/model-config#adjust-effort-level)
+Claude Code exposes `/effort`; its available choices depend on the active model.
+Current Claude Code documentation lists `low`, `medium`, `high`, `xhigh`, and
+`max` for supported Opus versions, while some Opus/Sonnet versions omit `xhigh`.
+When a selected level is unsupported, Claude Code can fall back to the highest
+supported level at or below it.
+[Claude Code: effort compatibility](https://docs.anthropic.com/en/docs/claude-code/model-config#adjust-effort-level)

 ## Google Gemini

 ### Model tier

-Gemini uses model families rather than interchangeable aliases: **Pro** targets the most complex reasoning, **Flash** balances capability and throughput, and **Flash-Lite** prioritizes latency, volume, and cost. Select an explicit endpoint such as `gemini-3.7-flash`; Google recommends stable model names for most production applications because `latest` aliases can be hot-swapped. [Gemini API: models](https://ai.google.dev/gemini-api/docs/models)
+Gemini uses model families rather than interchangeable aliases: **Pro** targets
+the most complex reasoning, **Flash** balances capability and throughput, and
+**Flash-Lite** prioritizes latency, volume, and cost. Select an explicit
+endpoint such as `gemini-3.7-flash`; Google recommends stable model names for
+most production applications because `latest` aliases can be hot-swapped.
+[Gemini API: models](https://ai.google.dev/gemini-api/docs/models)

 ### Thinking level

-For Gemini 3 models, the control is `thinkingLevel` in SDKs (`thinking_level` in Python). Across the family the documented values are `minimal`, `low`, `medium`, and `high`, but support and defaults vary by model. For example, Gemini 3.7 Flash supports `low`, `medium`, and `high` and defaults to `medium`; Gemini 3.1 Pro supports `low`, `medium`, and `high` and defaults to `high`. `minimal` is unavailable on several models and does not guarantee that reasoning is completely off where supported. Gemini 2.5 uses `thinkingBudget`, not `thinkingLevel`. [Gemini API: thinking](https://ai.google.dev/gemini-api/docs/thinking)
+For Gemini 3 models, the control is `thinkingLevel` in SDKs (`thinking_level` in
+Python). Across the family the documented values are `minimal`, `low`, `medium`,
+and `high`, but support and defaults vary by model. For example, Gemini 3.7
+Flash supports `low`, `medium`, and `high` and defaults to `medium`; Gemini 3.1
+Pro supports `low`, `medium`, and `high` and defaults to `high`. `minimal` is
+unavailable on several models and does not guarantee that reasoning is
+completely off where supported. Gemini 2.5 uses `thinkingBudget`, not
+`thinkingLevel`.
+[Gemini API: thinking](https://ai.google.dev/gemini-api/docs/thinking)

 Documented JavaScript pattern:

 ```javascript
-import { GoogleGenAI, ThinkingLevel } from "@google/genai";
+import { GoogleGenAI, ThinkingLevel } from '@google/genai';

 const ai = new GoogleGenAI({});
 const response = await ai.models.generateContent({
-  model: "gemini-3.7-flash",
-  contents: "Review this implementation plan.",
+  model: 'gemini-3.7-flash',
+  contents: 'Review this implementation plan.',
  config: {
    thinkingConfig: {
      thinkingLevel: ThinkingLevel.LOW,
@@ -87,10 +127,12 @@ console.log(response.text);
 ## Practical routing baseline

 | Work                                                | Model tier                | Effort / thinking                      |
-| --- | --- | --- |
+| --------------------------------------------------- | ------------------------- | -------------------------------------- |
 | Formatting, lookup, narrow edit                     | Haiku / Flash-Lite / Luna | Low or minimal where supported         |
 | Normal implementation, tests, review                | Sonnet / Flash / Terra    | Medium                                 |
 | Architecture, orchestration, hard debugging         | Opus / Pro / Sol          | High                                   |
 | Frontier or long-horizon work with measured benefit | Strongest supported tier  | `xhigh` or `max` only where documented |

-Treat this table as a starting hypothesis. Evaluate quality, latency, and cost on representative tasks, then route to the cheapest combination that still passes the required checks.
+Treat this table as a starting hypothesis. Evaluate quality, latency, and cost
+on representative tasks, then route to the cheapest combination that still
+passes the required checks.
@@ -1,9 +1,12 @@
 # Verified skill sources

-Checked on 2026-09-02 against the installed files under `~/.codex/skills`. A pinned blob link identifies the content inspected; the repository/path column identifies what an installer should copy. Pinned commits are preferable to mutable `main` when reproducibility matters.
+Checked on 2026-09-02 against the installed files under `~/.codex/skills`. A
+pinned blob link identifies the content inspected; the repository/path column
+identifies what an installer should copy. Pinned commits are preferable to
+mutable `main` when reproducibility matters.

 | Skill             | Verified source URL                                                                                                                                       | Installable repo URL/path                                                                               | Confidence / note                                                                                                                                                                                                                                                          |
-|---|---|---|---|
+| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `ponytail-lite`   | [`AGENTS.md` at `e7b42dc`](https://github.com/ilindaniel/ponytail-lite/blob/e7b42dc2d384a702240dea4d52a7bf5530b821b6/AGENTS.md)                           | [`ilindaniel/ponytail-lite`](https://github.com/ilindaniel/ponytail-lite), path `AGENTS.md`             | **High — exact byte match.** The local `ponytail-lite/SKILL.md` is this file unchanged. Upstream presents it as an agent instruction file, not a conventional frontmatter-based skill package; install it through the host's project/global instruction mechanism.         |
 | `caveman`         | [Public upstream skill at `3b74643`](https://github.com/JuliusBrussee/caveman/blob/3b74643f4d910f496babd4e634b1ba7168816f14/skills/caveman/SKILL.md)      | [`JuliusBrussee/caveman`](https://github.com/JuliusBrussee/caveman), path `skills/caveman/`             | **Medium for the installed file; high for upstream.** The local file is an environment-specific wrapper that names this public project and its skill files, but it is not byte-identical to the public `skills/caveman/SKILL.md`. Install upstream, not the local wrapper. |
 | `unlazy`          | [`SKILL.md` at `473d4b8`](https://github.com/Leonxlnx/unlazy/blob/473d4b80421c36d733042434cd4b938f81a19ef1/SKILL.md)                                      | [`Leonxlnx/unlazy`](https://github.com/Leonxlnx/unlazy), repository root (copy the whole package)       | **High — exact byte match**, also corroborated by local `.unlazy-source.txt`. The package includes referenced scripts, templates, security notes, and workflow documents; do not copy only `SKILL.md`.                                                                     |
@@ -38,4 +41,8 @@ Workflow:

 ## Verification method

-The seven **exact** findings were established by downloading the pinned public files and comparing them byte-for-byte with the local installed copies. For `caveman`, the local wrapper was compared against both the repository-level instructions and public `skills/caveman/SKILL.md`; neither matched, so only its upstream family is attributed, not the wrapper itself.
+The seven **exact** findings were established by downloading the pinned public
+files and comparing them byte-for-byte with the local installed copies. For
+`caveman`, the local wrapper was compared against both the repository-level
+instructions and public `skills/caveman/SKILL.md`; neither matched, so only its
+upstream family is attributed, not the wrapper itself.
@@ -15,7 +15,7 @@
  .handoff thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .handoff tbody tr{padding:14px 0;border-bottom:1px solid var(--line)}
  .handoff th,.handoff td{padding:4px 0;border:0}
-  .handoff td::before{display:block;margin-top:7px;color:var(--blue);font:600 9px 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase}
+  .handoff td::before{display:block;margin-top:7px;color:var(--blue);font:600 9px var(--font-mono);letter-spacing:.08em;text-transform:uppercase}
  .handoff td:nth-child(2)::before{content:'Contains'}
  .handoff td:nth-child(3)::before{content:'Why it matters'}
  .route-table .head{display:none}
@@ -1,27 +1,79 @@
 <!doctype html>
 <html lang="en">
  <head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width,initial-scale=1">
-  <meta name="description" content="AI For Dummies: a practical route map for models, agents, worktrees, skills, rules, and verification.">
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <meta
+      name="description"
+      content="AI For Dummies: a practical route map for models, agents, worktrees, skills, rules, and verification."
+    />
    <title>AI For Dummies — Start here</title>
-  <link rel="stylesheet" href="chapters.css">
-  <link rel="stylesheet" href="landing.css">
+    <link rel="stylesheet" href="chapters.css" />
+    <link rel="stylesheet" href="landing.css" />
  </head>
  <body>
    <main>
-    <header class="top"><a href="./" aria-current="page">AI FOR DUMMIES</a><span>00 / START HERE</span><a href="skills-review/">review desk ↗</a></header>
-    <section class="hero"><p class="eyebrow">The short route</p><h1>Ship the<br><em>system.</em></h1><p>Start with the map. Then open the one chapter that matches the decision in front of you: model, agent, worktree, skill, rule, or proof.</p><a class="guide-launch" href="full-guide/">Take the full field guide <span>→</span></a></section>
-    <section class="grid route-grid" aria-label="Guide chapters">
-      <article class="card"><b>01</b><h2>Models</h2><p>Capability and effort are separate knobs.</p><a href="models/">Open chapter →</a></article>
-      <article class="card"><b>02</b><h2>Agents & trees</h2><p>Bound roles, handoffs, and worktrees.</p><a href="agents/">Open chapter →</a></article>
-      <article class="card"><b>03</b><h2>Skills</h2><p>Capture repeatable decisions in small packages.</p><a href="skills/">Open chapter →</a></article>
-      <article class="card"><b>04</b><h2>Rules</h2><p>Connect guidance to enforcement.</p><a href="rules/">Open chapter →</a></article>
-      <article class="card"><b>05</b><h2>Hands-on</h2><p>Compare a strong prompt with skill-enabled work.</p><a href="hands-on/starter/">Open lab →</a></article>
-      <article class="card"><b>06</b><h2>Review desk</h2><p>Browse original packages, references, scripts, and improvements.</p><a href="skills-review/">Open desk →</a></article>
+      <header class="top">
+        <a href="./" aria-current="page">AI FOR DUMMIES</a><span>00 / START HERE</span
+        ><a href="skills-review/">review desk ↗</a>
+      </header>
+      <section class="hero">
+        <p class="eyebrow">The short route</p>
+        <h1>Ship the<br /><em>system.</em></h1>
+        <p>
+          Start with the map. Then open the one chapter that matches the decision in front of you:
+          model, agent, worktree, skill, rule, or proof.
+        </p>
+        <a class="guide-launch" href="full-guide/">Take the full field guide <span>→</span></a>
      </section>
-    <section class="landing-note"><span>THE THREAD</span><strong>Frame uncertainty → isolate execution → preserve judgment → verify the change.</strong></section>
-    <footer>The route map is now the default entry. The full guide remains available whenever you want the whole narrative.</footer>
+      <section class="grid route-grid" aria-label="Guide chapters">
+        <article class="card">
+          <b>01</b>
+          <h2>Models</h2>
+          <p>Capability and effort are separate knobs.</p>
+          <a href="models/">Open chapter →</a>
+        </article>
+        <article class="card">
+          <b>02</b>
+          <h2>Agents & trees</h2>
+          <p>Bound roles, handoffs, and worktrees.</p>
+          <a href="agents/">Open chapter →</a>
+        </article>
+        <article class="card">
+          <b>03</b>
+          <h2>Skills</h2>
+          <p>Capture repeatable decisions in small packages.</p>
+          <a href="skills/">Open chapter →</a>
+        </article>
+        <article class="card">
+          <b>04</b>
+          <h2>Rules</h2>
+          <p>Connect guidance to enforcement.</p>
+          <a href="rules/">Open chapter →</a>
+        </article>
+        <article class="card">
+          <b>05</b>
+          <h2>Hands-on</h2>
+          <p>Compare a strong prompt with skill-enabled work.</p>
+          <a href="hands-on/starter/">Open lab →</a>
+        </article>
+        <article class="card">
+          <b>06</b>
+          <h2>Review desk</h2>
+          <p>Browse original packages, references, scripts, and improvements.</p>
+          <a href="skills-review/">Open desk →</a>
+        </article>
+      </section>
+      <section class="landing-note">
+        <span>THE THREAD</span
+        ><strong
+          >Frame uncertainty → isolate execution → preserve judgment → verify the change.</strong
+        >
+      </section>
+      <footer>
+        The route map is now the default entry. The full guide remains available whenever you want
+        the whole narrative.
+      </footer>
    </main>
  </body>
 </html>
@@ -1 +1 @@
-.guide-launch{display:inline-flex;gap:14px;align-items:center;margin-top:20px;padding:12px 16px;background:var(--ink);color:var(--paper);font:700 12px ui-monospace,monospace;letter-spacing:.06em;text-decoration:none;text-transform:uppercase;transition:transform .2s ease,background .2s ease}.guide-launch:hover{transform:translateY(-3px);background:var(--blue)}.guide-launch span{color:var(--gold);font-size:22px;line-height:0}.route-grid .card{display:flex;min-width:0;flex-direction:column}.route-grid .card a{margin-top:auto}.landing-note{display:grid;grid-template-columns:170px minmax(0,1fr);gap:30px;margin:0 0 70px;padding:25px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}.landing-note span{color:var(--red);font:700 11px ui-monospace,monospace;letter-spacing:.1em}.landing-note strong{font-size:clamp(22px,3.2vw,42px);line-height:1.08;letter-spacing:-.04em}@media(max-width:520px){.landing-note{grid-template-columns:1fr;gap:9px;margin-bottom:45px}}@media(prefers-reduced-motion:reduce){.guide-launch{transition:none}.guide-launch:hover{transform:none}}
+.guide-launch{display:inline-flex;gap:14px;align-items:center;margin-top:20px;padding:12px 16px;background:var(--ink);color:var(--paper);font:700 12px var(--font-mono);letter-spacing:.06em;text-decoration:none;text-transform:uppercase;transition:transform .2s ease,background .2s ease}.guide-launch:hover{transform:translateY(-3px);background:var(--blue)}.guide-launch span{color:var(--gold);font-size:22px;line-height:0}.route-grid .card{display:flex;min-width:0;flex-direction:column}.route-grid .card a{margin-top:auto}.landing-note{display:grid;grid-template-columns:170px minmax(0,1fr);gap:30px;margin:0 0 70px;padding:25px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}.landing-note span{color:var(--red);font:700 11px var(--font-mono);letter-spacing:.1em}.landing-note strong{font-size:clamp(22px,3.2vw,42px);line-height:1.08;letter-spacing:-.04em}@media(max-width:520px){.landing-note{grid-template-columns:1fr;gap:9px;margin-bottom:45px}}@media(prefers-reduced-motion:reduce){.guide-launch{transition:none}.guide-launch:hover{transform:none}}
@@ -1 +1,87 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>AI For Dummies — Models</title><link rel="stylesheet" href="../chapters.css"></head><body><main><header class="top"><a href="../summary/">← ROUTE MAP</a><span>01 / MODELS</span><a href="../full-guide/">field guide ↗</a></header><section class="hero"><p class="eyebrow">Model routing</p><h1>Choose the<br><em>engine.</em></h1><p>A model has a capability ceiling. Effort controls how much room it gets to reason. Route by uncertainty and verification cost.</p></section><section class="grid"><article class="card"><b>LOW</b><h2>Bounded rhythm</h2><p>Lookup, small edits, formatting, and transformations with clear checks.</p></article><article class="card"><b>MEDIUM</b><h2>Default work</h2><p>Normal implementation where the contract is clear but context matters.</p></article><article class="card"><b>HIGH</b><h2>Ambiguity</h2><p>Planning, architecture, security judgment, and hard failures.</p></article></section><section class="model"><div><p class="eyebrow">Two knobs</p><h2>Capability<br>× effort</h2></div><div class="panel"><strong>ROUTING RULE</strong><code>strong model + high effort → frame ambiguity · light model + low effort → bounded execution · raise one knob at a time → compare evidence</code></div></section><section class="practice"><div><p class="eyebrow">Sequence</p><h2>Spend judgment<br>where it <em>compounds.</em></h2></div><div class="steps"><article><b>01</b><div><strong>Plan</strong><span>Strong model: scope, risks, acceptance, and worktree split.</span></div></article><article><b>02</b><div><strong>Build</strong><span>Focused worker: smallest context and lightest model that can pass.</span></div></article><article><b>03</b><div><strong>Review</strong><span>Independent pass when missed issues cost more than the call.</span></div></article></div></section><nav class="links"><a href="../agents/">Next: agents & trees →</a><a href="../rules/">Rules case study →</a></nav></main></body></html>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>AI For Dummies — Models</title>
+    <link rel="stylesheet" href="../chapters.css" />
+  </head>
+  <body>
+    <main>
+      <header class="top">
+        <a href="../summary/">← ROUTE MAP</a><span>01 / MODELS</span
+        ><a href="../full-guide/">field guide ↗</a>
+      </header>
+      <section class="hero">
+        <p class="eyebrow">Model routing</p>
+        <h1>Choose the<br /><em>engine.</em></h1>
+        <p>
+          A model has a capability ceiling. Effort controls how much room it gets to reason. Route
+          by uncertainty and verification cost.
+        </p>
+      </section>
+      <section class="grid">
+        <article class="card">
+          <b>LOW</b>
+          <h2>Bounded rhythm</h2>
+          <p>Lookup, small edits, formatting, and transformations with clear checks.</p>
+        </article>
+        <article class="card">
+          <b>MEDIUM</b>
+          <h2>Default work</h2>
+          <p>Normal implementation where the contract is clear but context matters.</p>
+        </article>
+        <article class="card">
+          <b>HIGH</b>
+          <h2>Ambiguity</h2>
+          <p>Planning, architecture, security judgment, and hard failures.</p>
+        </article>
+      </section>
+      <section class="model">
+        <div>
+          <p class="eyebrow">Two knobs</p>
+          <h2>Capability<br />× effort</h2>
+        </div>
+        <div class="panel">
+          <strong>ROUTING RULE</strong
+          ><code
+            >strong model + high effort → frame ambiguity · light model + low effort → bounded
+            execution · raise one knob at a time → compare evidence</code
+          >
+        </div>
+      </section>
+      <section class="practice">
+        <div>
+          <p class="eyebrow">Sequence</p>
+          <h2>Spend judgment<br />where it <em>compounds.</em></h2>
+        </div>
+        <div class="steps">
+          <article>
+            <b>01</b>
+            <div>
+              <strong>Plan</strong
+              ><span>Strong model: scope, risks, acceptance, and worktree split.</span>
+            </div>
+          </article>
+          <article>
+            <b>02</b>
+            <div>
+              <strong>Build</strong
+              ><span>Focused worker: smallest context and lightest model that can pass.</span>
+            </div>
+          </article>
+          <article>
+            <b>03</b>
+            <div>
+              <strong>Review</strong
+              ><span>Independent pass when missed issues cost more than the call.</span>
+            </div>
+          </article>
+        </div>
+      </section>
+      <nav class="links">
+        <a href="../agents/">Next: agents & trees →</a><a href="../rules/">Rules case study →</a>
+      </nav>
+    </main>
+  </body>
+</html>
@@ -42,9 +42,11 @@ Phase 4  polish            18 ∥ 19, then 20
 ```

 | #   | Task                                                              | Agent                 | Depends on         | Parallel with |
-| --- | ----------------------------------------------------------------- | --------------------- | ------------- | ------------- |
+| --- | ----------------------------------------------------------------- | --------------------- | ------------------ | ------------- |
 | 01  | [scaffold + gates](task-01-scaffold.md)                           | astro-architect       | —                  | —             |
 | 02  | [design tokens](task-02-tokens.md)                                | design-system-keeper  | 01                 | 03, 04        |
+| 02b | [token layer wiring](task-02b-token-layer-wiring.md)              | design-system-keeper  | 02                 | 03, 04        |
+| 02c | [token-gap queue](task-02c-token-gaps.md)                         | design-system-keeper  | 02b, 15d           | —             |
 | 03  | [verification net](task-03-verification-net.md)                   | verification-engineer | 01                 | 02, 04        |
 | 04  | [content schema](task-04-content-schema.md)                       | content-i18n-migrator | 01                 | 02, 03        |
 | 05  | [guide content](task-05-content-guide.md)                         | content-i18n-migrator | 04                 | 06            |
@@ -58,10 +60,11 @@ Phase 4  polish            18 ∥ 19, then 20
 | 13  | [chapter pages ×4](task-13-page-chapters.md)                      | page-migrator         | 03, 09             | 12, 14, 17    |
 | 14  | [rules page](task-14-page-rules.md)                               | page-migrator         | 03, 09             | 12, 13, 17    |
 | 15  | [full guide](task-15-page-full-guide.md) — **split into 15a–15e** | —                     | —                  | —             |
+| 05b | [interactiveCopy data](task-05b-guide-interactive-data.md)        | content-i18n-migrator | 05                 | —             |
 | 15a | [guide selector](task-15a-guide-selector.md)                      | component-builder     | 05, 10             | 15b, 15c      |
 | 15b | [copy prompt](task-15b-copy-prompt.md)                            | component-builder     | 05                 | 15a, 15c      |
 | 15c | [language toggle](task-15c-language-toggle.md)                    | content-i18n-migrator | 05                 | 15a, 15b      |
-| 15d | [assemble full guide](task-15d-page-full-guide.md)                | page-migrator         | 10, 13, 15a–c | 16            |
+| 15d | [assemble full guide](task-15d-page-full-guide.md)                | page-migrator         | 05b, 10, 13, 15a–c | 16            |
 | 15e | [retire responsive.css](task-15e-responsive-css.md)               | design-system-keeper  | 15d, 16            | —             |
 | 16  | [review desk](task-16-page-review-desk.md)                        | page-migrator         | 06, 11, 13         | 15d           |
 | 17  | [hands-on passthrough](task-17-hands-on.md)                       | astro-architect       | 01                 | 12, 13, 14    |
@@ -50,7 +50,7 @@ walk into.

 ## Do not

- Do not add a webfont.
+- Do not add a webfont. **(Reversed 2026-09-05 — see Decisions.)**
 - Do not rename tokens to numeric scales (`--color-neutral-900`).
 - Do not convert the `gap:1px` over a coloured parent trick into `border` — it
  is deliberate house style and appears everywhere.
@@ -60,7 +60,9 @@ walk into.
 - **Palette Consolidation:** The three drifted palettes were canonicalized into
  one. For `--blue`, `#527f9f` (from styles.css) was chosen over `#215675` (from
  chapters.css) to unify the look.
- **Fonts:** The broken `@font-face` rule pointing to a Google Fonts stylesheet
-  was noted to be deleted in future component tasks. The font stacks will be
-  replaced with `Arial, sans-serif` and `ui-monospace, monospace` to match what
-  has actually been rendering all along. Zero visual change.
+- **Fonts (superseded 2026-09-05):** task 02 recorded "delete the dead rule,
+  fall back to `Arial, sans-serif` / `ui-monospace, monospace`, zero visual
+  change", and deferred even that deletion to "future component tasks", which
+  never picked it up. The human has since chosen the opposite: Manrope and DM
+  Mono are now self-hosted in `public/fonts/` and really render. The "Do not add
+  a webfont" line above no longer applies.
@@ -0,0 +1,107 @@
+# Task 02b — Wire the token layer in
+
+**Agent**: `design-system-keeper` · **Model**: `agy` (Gemini 3.1 Pro — needs
+vision for the screenshot diffs) **Depends on**: 02 · **Blocks**: 02c
+**Worktree**: `.agents/scripts/worktree.sh start 02b token-layer-wiring`
+
+## Why this task exists
+
+Task 02 built the token layer and it was never connected to anything. This is
+not a criticism of that task — its brief and its done-when list never asked for
+the wiring, and `check-tokens.mjs` only looks for _violations_ in `src/`, so
+nothing could have caught it.
+
+Verify each of these yourself before you start; do not take my word for it:
+
+1. **`src/styles/tokens.css` is imported by nothing.** The only reference in the
+   repo is `src/styles/base.css:2`, and `base.css` is itself imported nowhere.
+   The whole layer is dead code.
+2. **The pages import the legacy stylesheets instead**, drifted `:root` blocks
+   and all:
+   - `src/layouts/ChapterLayout.astro:16` → `../../chapters.css?url`
+   - `src/pages/skills.astro:11` → `../../skills/styles.css?url`
+   - `src/pages/skills-review.astro:4,5` → `skills-review/styles.css`,
+     `change-lens.css`
+3. **So task 02's `--blue` decision never reached a page.** It chose `#527f9f`
+   and wrote it down. The built CSS today ships both values:
+   ```
+   dist/_astro/chapters.*.css   --blue:#215675
+   dist/_astro/rules.*.css      --blue: #527f9f
+   dist/_astro/styles.*.css     --blue:#215675
+   ```
+
+## Scope
+
+`src/styles/tokens.css`, `src/styles/base.css`,
+`.agents/scripts/check-tokens.mjs` — you are the only writer of these — plus the
+four import sites listed above and whatever layout work the wiring needs.
+
+## Deliver
+
+### 1. One loaded token layer
+
+Make `tokens.css` actually load on every route. Either fix `base.css` and import
+it from the layouts, or drop `base.css` and import `tokens.css` directly — your
+call, but say which and why. A file that exists and is never loaded is worse
+than no file, because it reads as done.
+
+### 2. The legacy stylesheet imports reconciled
+
+Those three `?url` imports are how the drifted palettes reach production. You do
+not have to delete them in this task — much of that CSS is still load-bearing
+until task 15e and task 20 — but the `:root` blocks inside them must stop
+overriding the canonical tokens. Make the layer authoritative and prove with
+screenshots that nothing moved except what you intend.
+
+`--blue` is the one real difference: `#527f9f` vs `#215675` is visible. Task 02
+already decided `#527f9f`. Apply that decision; do not re-open it. If applying
+it looks wrong on a real page, screenshot it and escalate rather than quietly
+picking the other value.
+
+### 3. Font tokens
+
+Manrope and DM Mono are **real now** — self-hosted in `public/fonts/`, wired
+through `public/fonts/fonts.css` (linked by `BaseLayout.astro`, `@import`ed by
+the legacy root `styles.css`). Read `.agents/context/design-system.md`; the old
+"delete the dead rule, fall back to Arial" instruction is **superseded and must
+not be re-applied**.
+
+Add `--font-sans` and `--font-mono` and point the stacks at them. Do not touch
+`public/fonts/fonts.css` itself, and do not remove the faces.
+
+### 4. A check so this cannot recur
+
+The gap that let a dead token layer ship is that nothing asserts the tokens are
+_loaded_. Add that check — a build-output assertion that every route resolves
+the canonical palette, or an equivalent. Put it in `check-tokens.mjs`, which you
+own. **Do not touch `scripts/verify.mjs`**; it stays at 42 assertions and only
+the verification-engineer may change it.
+
+## Screenshots: your baseline is HEAD, not history
+
+The self-hosted fonts landed in `7f11b6e` and **changed how every page
+renders**, deliberately — that is the one sanctioned visual change in this
+migration. Any screenshot taken before it shows Arial and is not a valid
+baseline. Capture your own "before" from HEAD at the start of this task.
+
+Widths: 560 / 800 / 1100 / 1600, plus the eight breakpoints task 02 removed
+(520, 530, 600, 620, 720, 850, 880, 900) — that is where regressions hide.
+
+## Do not
+
+- Do not resolve the ~164 `token-gap:` markers. That is task 02c, and doing it
+  here would collide with task 15d's page work. Report the count.
+- Do not delete `responsive.css`. That is 15e.
+- Do not convert the `gap:1px` over a coloured parent trick into `border` — it
+  is deliberate house style and appears everywhere.
+- Do not rename tokens to numeric scales (`--color-neutral-900`).
+- Never use `--no-verify`; never set `core.hooksPath`.
+
+## Done when
+
+- [ ] `tokens.css` loads on every route, proven from built output
+- [ ] One value per token in the shipped CSS — `--blue` is `#527f9f` everywhere
+- [ ] `--font-sans` / `--font-mono` exist and are used; the faces still load
+- [ ] A check exists that fails if the token layer stops being loaded
+- [ ] Before/after screenshots at all twelve widths, every difference explained
+- [ ] `pnpm run gate` green — the full gate; 42 assertions intact
@@ -0,0 +1,51 @@
+# Task 02c — Work the token-gap queue
+
+**Agent**: `design-system-keeper` · **Model**: `agy` (Gemini 3.1 Pro) **Depends
+on**: 02b, 15d · **Blocks**: 19 **Worktree**:
+`.agents/scripts/worktree.sh start 02c token-gaps`
+
+## Why this task exists
+
+`check-tokens.mjs` bans raw hex, `font-size: Npx` and ad-hoc breakpoints outside
+the token layer. Until the escape hatch was added it offered no legal
+alternative, so agents told both "keep the site identical" and "get the gate
+green" cheated — writing px through the `font:` shorthand the regex misses, or
+substituting the nearest token and shipping a silent redesign (`12px` and `14px`
+both became `var(--step-1)`, 15px; a diff-added green became `var(--accent)`,
+purple).
+
+The `/* token-gap: <reason>; owner design-system-keeper */` marker replaced that
+with an honest, visible queue. **You are the owner it names.** There are ~164
+markers on `main`; get the real count yourself from `check-tokens.mjs` output.
+
+## The work
+
+For each marked value, one of three outcomes — and the choice is yours to make,
+not to defer:
+
+1. **The scale should cover it.** Extend `--step-*` and point the site at it.
+   Most of the queue is this: `24px`, `25px`, `20px`, `17px`, `13px` fixed sizes
+   from `chapters.css` that fall between existing steps.
+2. **It is genuinely one-off.** Keep the literal value, delete the marker, and
+   leave a comment saying why it is exempt.
+3. **It was already wrong.** Some markers record a near-miss substitution an
+   earlier task made under duress. Restoring the true legacy value is a visible
+   change — screenshot it and say so.
+
+Work in batches by source file and commit per batch. A single 164-site commit is
+unreviewable.
+
+## Do not
+
+- Do not weaken `check-tokens.mjs` to make markers disappear. Removing a check
+  is not resolving a gap.
+- Do not touch `scripts/verify.mjs` — 42 assertions, verification-engineer only.
+- Do not leave a marker whose reason you have satisfied.
+
+## Done when
+
+- [ ] Every marker either resolved into the scale or documented as a deliberate
+      exemption
+- [ ] `check-tokens.mjs` reports zero unexplained gaps
+- [ ] Screenshots for every change that moved a pixel, differences explained
+- [ ] `pnpm run gate` green; 42 assertions intact
@@ -1,12 +1,13 @@
 # Task 05 — Guide content out of app.js

-**Agent**: `content-i18n-migrator` · **Model**: MiniMax-M3
-**Depends on**: 04 · **Parallel with**: 06 · **Blocks**: 15
-**Worktree**: `.agents/scripts/worktree.sh start 05 content-guide`
+**Agent**: `content-i18n-migrator` · **Model**: MiniMax-M3 **Depends on**: 04 ·
+**Parallel with**: 06 · **Blocks**: 15 **Worktree**:
+`.agents/scripts/worktree.sh start 05 content-guide`

 ## Goal

-Every `{ en, pt }` string in `app.js` lives in `src/content/guide/`, byte-identical.
+Every `{ en, pt }` string in `app.js` lives in `src/content/guide/`,
+byte-identical.

 ## Scope

@@ -15,13 +16,13 @@ removes it once the page consumes the collection.

 ## Steps

-1. `node .agents/scripts/extract-strings.mjs app.js > /tmp/before.json`
-   (~50 pairs across `phases`, `handsOnPrompts`, `modelGuide`, `skillSources`,
+1. `node .agents/scripts/extract-strings.mjs app.js > /tmp/before.json` (~50
+   pairs across `phases`, `handsOnPrompts`, `modelGuide`, `skillSources`,
   `skillInstallPrompts`).
 2. Move them into the collection. **Copy mechanically — never retype.** These
-   are hand-written translations with deliberate tone (`'Transforme ambiguidade
-   em trabalho'`); retyping introduces drift nobody catches until a Portuguese
-   speaker reads it.
+   are hand-written translations with deliberate tone
+   (`'Transforme ambiguidade em trabalho'`); retyping introduces drift nobody
+   catches until a Portuguese speaker reads it.
 3. `node .agents/scripts/extract-strings.mjs src/content/guide/ > /tmp/after.json`
 4. `diff /tmp/before.json /tmp/after.json` → **must be empty**.

@@ -0,0 +1,78 @@
+# Task 05b — The `interactiveCopy` data
+
+**Agent**: `content-i18n-migrator` · **Model**: MiniMax-M3 **Depends on**: 05 ·
+**Blocks**: 15d **Worktree**:
+`.agents/scripts/worktree.sh start 05b guide-interactive-data`
+
+## Why this task exists
+
+It is not in the original plan, and it is the second hole of exactly this kind
+(see [task 04b](task-04b-chapters-data.md), which filled the empty `chapters`
+collection).
+
+Task 05 moved `phases`, `providers`, `efforts`, `skillSources`, `handsOnPrompts`
+and `skillInstallPrompts` out of `app.js`. It did not move
+`const interactiveCopy` at `app.js:160`, which holds six more datasets:
+
+| Key             | Feeds                  | Rendered by           |
+| --------------- | ---------------------- | --------------------- |
+| `workers`       | `#worker-detail`       | `renderWorker`        |
+| `trees`         | `#tree-detail`         | `renderTree`          |
+| `routes`        | `#route-detail`        | `renderRoute`         |
+| `skillFiles`    | `#skill-detail`        | `renderSkillFile`     |
+| `skillWorkflow` | `#builder-detail`      | `renderSkillWorkflow` |
+| `commonSkills`  | `#common-skill-detail` | `renderCommonSkill`   |
+
+Task 15d stopped before writing a line because of this — six of the nine groups
+`GuideSelector` drives have no data to read. It was right to stop.
+
+## Scope
+
+`src/content/config.ts` (new collections only) and the new `src/content/*/`
+JSON. **You own `config.ts`** — you are the only agent who may edit it. Do not
+change an existing collection's schema.
+
+## The shapes are already written down
+
+`src/components/islands/GuideSelector.astro` declares a `GuideSelectorData`
+interface at the top of the file. It is the contract 15d will feed. Match it —
+if you think a field there is wrong, say so in your report rather than diverging
+silently.
+
+Note the non-obvious ones, verified against `app.js`:
+
+- `trees[id]` has `owner` and `note` localized, but `path` and `command` are
+  **single strings, not localized** — they are shell paths.
+- `routes[id].score` is a **number**, rendered into `style="--score:N%"`.
+- `workers[id]` is `{ en: string[], pt: string[] }` — a three-element array
+  (`span`, `strong`, `small`), not an object.
+- `skillFiles[id]` mixes `icon`/`title` (unlocalized) with `en`/`pt` strings.
+- `providers[id].tiers` is `[string, string, Localized][]`.
+
+Read the real `app.js` for each. Do not infer a shape from a sibling.
+
+## Rules that bite here
+
+- **Both `en` and `pt` are mandatory on every localized field.** A missing `pt`
+  must fail the build. Never make a field optional to clear a validation error —
+  find the real Portuguese string in `app.js`.
+- Copy strings **verbatim**. This is a move, not a rewrite. No fixed typos, no
+  improved phrasing, nothing translated that is already translated. Several
+  strings contain inline HTML; keep it exactly as-is.
+- Prove it. Diff each migrated string against the `app.js` original
+  programmatically and report the result — task 15b did this for the prompt
+  bodies and it is the standard here.
+- Do not delete `interactiveCopy` from `app.js`. The legacy page still runs on
+  it until task 20 cuts over, and `verify.mjs` still asserts against it.
+- Do not migrate a page or touch a component. 15d owns that.
+- Do not edit `verify.mjs`, `tokens.css`, or `astro.config.mjs`.
+
+## Done when
+
+- [ ] Six collections defined and exported from `config.ts`
+- [ ] Entries for every id in `interactiveCopy`, both locales
+- [ ] Shapes match `GuideSelectorData`, or the divergence is argued in the
+      report
+- [ ] Every string proven byte-identical to its `app.js` original
+- [ ] `pnpm run gate` green — the full gate, not `verify` + `audit-ui` alone
+- [ ] 42 assertions intact
@@ -1,8 +1,8 @@
 # Task 06 — Review-desk content out of catalog.js

-**Agent**: `content-i18n-migrator` · **Model**: MiniMax-M3
-**Depends on**: 04 · **Parallel with**: 05 · **Blocks**: 16
-**Worktree**: `.agents/scripts/worktree.sh start 06 content-review`
+**Agent**: `content-i18n-migrator` · **Model**: MiniMax-M3 **Depends on**: 04 ·
+**Parallel with**: 05 · **Blocks**: 16 **Worktree**:
+`.agents/scripts/worktree.sh start 06 content-review`

 ## Goal

@@ -32,12 +32,14 @@ real `.md` files.
   node scripts/build-skill-review.mjs && git diff --exit-code skill-reviews/
   ```
 2. **The diff view needs raw source.** The review desk compares original and
-   improved as *text*. If `improved` only exists as rendered HTML, the change
+   improved as _text_. If `improved` only exists as rendered HTML, the change
   lens breaks. Keep the raw string reachable.

 ## Done when

- [ ] 24 entries in the collection; `verify.mjs`'s `id:'` count assertion still passes
+- [ ] 24 entries in the collection; `verify.mjs`'s `id:'` count assertion still
+      passes
 - [ ] `git diff --exit-code skill-reviews/` clean after regenerating
 - [ ] `astro check` passes
- [ ] Every reference to the generator still accurate (`package.json`, `README.md`, `docs/operations-guide.md`, the review desk footer)
+- [ ] Every reference to the generator still accurate (`package.json`,
+      `README.md`, `docs/operations-guide.md`, the review desk footer)
@@ -0,0 +1,72 @@
+# Task 10b — Locale-paired props on the six full-guide blocks
+
+**Agent**: `component-builder` · **Model**: **Codex** **Depends on**: 10 ·
+**Blocks**: 15d **Worktree**:
+`.agents/scripts/worktree.sh start 10b bilingual-blocks`
+
+## Why this task exists
+
+It is not in the original plan. Tasks 07–11 built the primitives and blocks
+before task 15c wrote the language contract, so every prose prop on all 19
+blocks is a plain `string`. Task 15d then stopped, correctly, when it found it
+could not render `/full-guide/` in both languages: the brief forbids it from
+duplicating a block to get a second locale, and changing a block's interface is
+component-builder work, not page-migrator work.
+
+`/full-guide/` is one of only two pages with a language toggle (the other is
+`/rules/`, which is already fully bilingual — all 23 of its Portuguese strings
+reach the built page, because `RulesInteractive` reads them from
+`src/content/rules/stages.json` and swaps client-side). The five remaining pages
+have no toggle today and must not gain one.
+
+## Scope
+
+Exactly six files, all in `src/components/blocks/`:
+
+`FleetDiagram.astro`, `HandoffTable.astro`, `PhasePanel.astro`,
+`RouteTable.astro`, `SkillPackage.astro`, `WorktreeMap.astro`.
+
+These are the six that `src/pages/full-guide.astro` uses. Do not touch the other
+13 blocks, any primitive, any island, or any page.
+
+## What to change
+
+Every **prose** prop on those six accepts `Localized` as well as `string`:
+
+```ts
+type Localized = { en: string; pt: string };
+```
+
+- Given a `string`, render exactly what it renders today. Every existing call
+  site keeps working untouched — this is additive.
+- Given a `Localized`, render the fragment twice per
+  `.agents/context/content-i18n.md`: `data-language-content="en"` on one and
+  `"pt"` on the other, English visible, Portuguese `hidden`.
+
+Prose only. Do not widen `href`, `id`, `code`, numeric or enum props — several
+are deliberately unlocalized, and task 05b recorded which (`trees.path`,
+`trees.command`, `routes.score`, `commonSkills.source`).
+
+`FleetDiagram`'s `orchestrator.title` is rendered with `set:html` because it
+carries inline `<br>`. Keep that, on both locales.
+
+## Do not
+
+- Do not change what a block renders for a `string` prop. A diff in the built
+  output for the existing call sites means you got it wrong.
+- Do not add a language toggle to any block. `LanguageToggle` is a separate
+  island and the page mounts it.
+- Do not edit `scripts/verify.mjs`. 42 assertions, and you are not the
+  verification-engineer.
+- Do not touch `src/pages/full-guide.astro`. That is 15d's file; it will pass
+  the `Localized` values once you land.
+
+## Done when
+
+- [ ] All six blocks accept `Localized` on every prose prop and `string` still
+      behaves identically
+- [ ] Built output byte-identical for pages that pass only strings — check
+      `dist/` before and after for the pages that use these blocks
+- [ ] `pnpm run gate` green, 42 assertions intact
+- [ ] Report lists, per block, which props became locale-aware and which you
+      deliberately left unlocalized and why
@@ -1,7 +1,7 @@
 # Task 15d — Assemble /full-guide/

-**Agent**: `page-migrator` · **Model**: **Codex** **Depends on**: 10, 13, 15a,
-15b, 15c · **Parallel with**: 16 · **Blocks**: 15e, 18, 19 **Worktree**:
+**Agent**: `page-migrator` · **Model**: **Codex** **Depends on**: 05b, 10, 13,
+15a, 15b, 15c · **Parallel with**: 16 · **Blocks**: 15e, 18, 19 **Worktree**:
 `.agents/scripts/worktree.sh start 15d page-full-guide`

 ## Goal
@@ -56,3 +56,276 @@ re-points them to output-level checks; you do not.
 - [ ] Screenshots match at 560 / 800 / 1100 / 1600 px
 - [ ] `pnpm run gate` green — the full gate, not `verify` + `audit-ui` alone
 - [ ] 42 assertions intact
+
+## What 15a, 15b and 15c actually shipped
+
+Read `.agents/context/content-i18n.md` first — it is the language contract and
+it is binding on this task.
+
+- **`src/components/islands/GuideSelector.astro`** — one island, all nine
+  groups. Render it as
+  `<GuideSelector rootSelector="#full-guide" data={...} />`. `data` needs
+  `phases`, `workers`, `trees`, `routes`, `providers`, `efforts`, `skillFiles`,
+  `skillWorkflow`, `commonSkills` and a bilingual `labels` object; the
+  `GuideSelectorData` interface at the top of the file is the exact shape. You
+  server-render each group's shell and its initial detail panel, keeping today's
+  `data-*` hooks and `.active` state. Mark each group `role="tablist"` and its
+  controls `role="tab"` or the keyboard handler will not bind.
+- **`src/components/islands/LanguageToggle.astro`** — render each localized
+  fragment twice, with `data-language-content="en"` or `"pt"` on the outer
+  element. The toggle flips `hidden` on those, sets `<html lang>`, and fires
+  `ai-for-dummies:languagechange` on `window`. It is a plain `.astro` island
+  that defers its own setup with `requestIdleCallback`; **do not** put
+  `client:idle` on it — that directive is framework-components only.
+- **`src/components/islands/CopyPrompt.astro`** — one per button. Pass
+  `target="prompt-install-skills" | "prompt-basic" | "prompt-skills"`. Render
+  `<p id="copy-status" role="status" aria-live="polite">` exactly once on the
+  page; the island writes into it. Fill the `<pre><code id="prompt-…">` bodies
+  from the `handsOnPrompts` and `skillInstallPrompts` collections — 15b verified
+  those are byte-identical to the legacy `app.js` constants, and the clipboard
+  copies whatever you render, so do not reformat them.
+- **`src/components/islands/ReadingProgress.astro`** — replaces the legacy
+  `<div class="reading-progress">` at the top of the page.
+
+Nothing else is missing. If you are about to write an island, you are doing
+another task's work — report the gap instead.
+
+## Two things to expect
+
+- **The snapshot will not match by construction.** Dual-locale rendering emits
+  both languages into the HTML where today's page emits English plus a
+  Portuguese map inside `app.js`. Compare _rendered, language-filtered_ output
+  against today's page, and if `.agents/snapshots/` needs regenerating, say so
+  explicitly in your report with what changed and why — do not quietly rewrite a
+  snapshot to make a diff go away.
+- **`renderHandsOn` takes no argument** and is not part of GuideSelector's
+  nine-group pattern. It is yours. Its name is asserted by `verify.mjs`.
+
+## The data exists now (task 05b)
+
+Your first attempt stopped here, correctly: six of the nine selector groups had
+no collection to read. Task 05b fixed that. `src/content/` now carries `workers`
+(3), `trees` (4), `routes` (4), `skillFiles` (4), `skillWorkflow` (5) and
+`commonSkills` (7) alongside the six task 05 already migrated. Every string was
+verified byte-identical to its `app.js` original — 221 values, zero mismatches —
+so read them as authoritative and do not re-derive from `app.js`.
+
+Two things 05b decided that you should know:
+
+- `trees[id].status` is in the schema although `GuideSelectorData` omits it.
+  `index.html` renders it as the dot colour on each tree node. The island does
+  not consume it; the page may.
+- `commonSkills[id].source` is embedded per entry rather than joined from
+  `skillSources[id].url` at render time. Both carry the same URL.
+
+## The one piece still missing: `labels`
+
+`GuideSelectorData.labels` is not a collection. Those strings — `OWNER` /
+`RESPONSÁVEL`, `REASONING LOAD` / `CARGA DE RACIOCÍNIO`, `context: isolated` /
+`contexto: isolado` and the rest — are still hard-coded bilingual literals
+inside the `render*` functions in `app.js`. 05b deliberately left them, because
+they are page-chrome rather than content.
+
+They are yours. Lift them verbatim — same rule as everything else, both locales
+mandatory, no retranslation, copy the exact strings out of `app.js`. Whether
+they become a seventh collection or an inline constant in the page is your call;
+say which you chose and why.
+
+## The first attempt was rejected — read this before you start
+
+Commit `a264d01` (tagged `rejected/15d-attempt-1`) passed the full gate with 42
+assertions intact and is still wrong. It did this:
+
+```js
+import legacyGuide from '../../full-guide/index.html?raw';
+let guideMarkup = legacyGuide.match(/<main>[\s\S]*<\/main>/)?.[0] ?? '';
+```
+
+and then `<div id="full-guide" set:html={guideMarkup} />`, mounting the four
+islands on top of the scraped markup. Three things that breaks:
+
+1. **Portuguese is gone.** The page contains zero `data-language-content`
+   attributes and zero `.pt` reads — every server-rendered detail panel
+   hard-codes `.en`. The legacy `<main>` is English-only; today's Portuguese
+   comes from `app.js`, which the Astro page does not load. The language
+   contract in `.agents/context/content-i18n.md` is binding and this violated
+   it. On a bilingual site's largest page, half the content vanished and the
+   gate said green.
+2. **Zero of task 10's block components are used.** All 19 exist in
+   `src/components/blocks/`. See the list below.
+3. **It couples the new page to the file task 20 deletes.** `/full-guide/` would
+   break the moment the legacy tree goes.
+
+**You may not read `full-guide/index.html` at build time.** Read it to learn
+what to build; do not import it, scrape it, or `set:html` it. The page's markup
+comes from components and content collections.
+
+### The blocks you are assembling from
+
+`src/components/blocks/`: `ChangeLens`, `ChapterHero`, `ComparisonTable`,
+`FileTabs`, `FleetDiagram`, `GridGroup`, `HandoffTable`, `PhasePanel`,
+`PreviewPane`, `ReviewDetail`, `RouteCard`, `RouteTable`, `SectionGrid`,
+`SiteFooter`, `SkillList`, `SkillPackage`, `TopBar`, `VoteWidget`,
+`WorktreeMap`. Plus `src/components/primitives/`. Read each one's props before
+you use it; several carry comments naming the legacy selector they replace.
+
+If a section of the guide has no block that fits, say so in your report and
+render it inline in the page — do not invent a new block, and do not fall back
+to scraping.
+
+### Two extra done-when boxes
+
+- [ ] Every localized string rendered twice, `data-language-content="en"` and
+      `"pt"`, per `.agents/context/content-i18n.md`
+- [ ] Zero imports of any file under `full-guide/`, and no `set:html` of legacy
+      markup
+
+## Attempt 2: structure accepted, bilingual work unfinished
+
+Commit `677c511` is the right shape and is the base to build on — no legacy
+import, no `set:html`, six blocks used (`FleetDiagram`, `HandoffTable`,
+`PhasePanel`, `RouteTable`, `SkillPackage`, `WorktreeMap`), one file changed,
+`verify.mjs` untouched, 42 assertions, gate green, JS 47,079 B against the
+legacy 50,338 B. Its report was honest about what it did not finish. Finish it.
+
+**What is already correct — do not "fix" it.** The page has 55 `.en` reads and
+zero `.pt` reads in the selector detail panels. That is right.
+`GuideSelector.astro` re-renders every panel with `[locale]` on
+`ai-for-dummies:languagechange`, so the server-rendered panel only has to match
+the initial locale. Leave those alone.
+
+**What is missing: the static prose.** Legacy `app.js` holds `translations.pt` —
+a map of **102** CSS-selector → Portuguese-string entries, starting at
+`.chapter-links a:nth-child(1)`. `applyLanguage('pt')` walks it and calls
+`setText(selector, value)`; switching back replays the captured `originals`.
+That map is the full-guide page's static Portuguese, and it is the authoritative
+source for this work.
+
+The page currently carries **3** `data-language-content` pairs (hero, stat,
+thesis). The other ~99 strings have no Portuguese counterpart anywhere in the
+Astro output, so `/full-guide/` renders English-only for everything the selector
+islands do not own.
+
+Render each of those 102 strings twice per `.agents/context/content-i18n.md`:
+the English exactly as it appears in `full-guide/index.html` today, the
+Portuguese exactly as it appears in `translations.pt`. Verbatim both ways — no
+retranslation, no rephrasing, no fixing what looks like a typo.
+
+A selector in the map that targets an element the blocks now render means the
+pair belongs inside that block's slot content, not bolted on afterwards. If a
+block gives you no way to pass both locales, say so in the report and name the
+block — do not work around it by duplicating the block.
+
+### Done when, for this pass
+
+- [ ] All 102 `translations.pt` entries have a rendered Portuguese counterpart
+- [ ] Every localized static string wrapped in `data-language-content="en"` /
+      `"pt"` pairs
+- [ ] No `.pt` reads added to the nine selector detail panels
+- [ ] Gate green, 42 assertions, `verify.mjs` untouched
+- [ ] Report lists any `translations.pt` selector you could not place, and why
+
+## Attempt 3: the blocker is cleared
+
+Task 10b landed. `FleetDiagram`, `HandoffTable`, `PhasePanel`, `RouteTable`,
+`SkillPackage` and `WorktreeMap` now accept `Localized = { en, pt }` on every
+prose prop and emit the `data-language-content` pair themselves. Passing a plain
+`string` still renders exactly what it rendered before, so nothing you already
+wrote has to change shape — you pass `{ en, pt }` where you passed a string.
+
+You are the first call site for those six blocks. No merged page uses them, so
+if a prop is wrong you will be the one to find it. Report anything that does not
+fit rather than working around it.
+
+**The measurement.** 17 of the 102 `translations.pt` entries currently reach the
+built page. Verify against `dist/full-guide/index.html`, not against the
+`.astro` source — `/rules/` looks monolingual in source and is fully bilingual
+in output, because the strings arrive through a content collection. Checking the
+source is how you get a wrong answer here.
+
+For each of the 102 entries: the selector tells you which element, the value is
+the Portuguese, and `full-guide/index.html` has the English. Both verbatim.
+
+Remaining done-when boxes are the ones in the previous section, unchanged.
+
+## Attempt 4: 68 of 102, and the last 34 are listed here
+
+Attempt 3 took coverage from 17 to 68 of the 102 `translations.pt` entries,
+measured against `dist/full-guide/index.html`. Its snapshot rewrite is accepted
+— it explained the reason (sections attempt 2 had dropped came back, and
+`CopyPrompt` renders slightly differently), which is what the brief asked for.
+
+Three cleanups first, before any new work:
+
+- `translations_extracted.js`, `scratch/` and
+  `.agents/snapshots/full-guide-new.txt` are untracked leftovers in the
+  worktree. Delete them. Do not commit them.
+- Never `git add -A` from the repo root here.
+
+### You may edit three blocks, and only for this
+
+`WorktreeMap`, `RouteTable` and `SkillPackage` still hard-code English inside
+the component, so no prop the page passes can reach those strings. Task 10b made
+their prop-driven prose `Localized`; it did not catch the literals baked into
+the markup.
+
+Extend exactly those three, using 10b's established pattern: a `Localized` value
+renders the `data-language-content="en"` / `"pt"` pair, a plain `string` renders
+exactly what it renders today. You are still the only call site, so nothing else
+can regress. Do not touch any other block.
+
+### The 34 remaining entries
+
+Each row is the `translations.pt` selector and its Portuguese. The English is in
+`full-guide/index.html` at the same selector. Both verbatim — no retranslation,
+no rephrasing, no fixing what looks like a typo.
+
+| selector                               | Portuguese                                                                                                                                                                                                                                                                                           |
+| -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `.caption`                             | O orquestrador preserva a intenção, escreve pequenos contratos e reúne resultados verificáveis. Ele não precisa digitar cada linha.                                                                                                                                                                  |
+| `.workflow .copy > p:last-child`       | Delegar é mover uma tarefa delimitada para um contexto menor — não abrir mão da responsabilidade.                                                                                                                                                                                                    |
+| `.worktree-intro > p:nth-of-type(2)`   | Um worktree é outro diretório ligado ao mesmo repositório. Cada agente recebe seu próprio checkout e índice; o histórico continua compartilhado.                                                                                                                                                     |
+| `.tree-node.root span`                 | RAIZ                                                                                                                                                                                                                                                                                                 |
+| `.tree-node.root small`                | ● limpo                                                                                                                                                                                                                                                                                              |
+| `.route-table .head span:nth-child(1)` | Trabalho                                                                                                                                                                                                                                                                                             |
+| `.route-table .head span:nth-child(2)` | Perfil                                                                                                                                                                                                                                                                                               |
+| `.route-table .head span:nth-child(3)` | Formato do prompt                                                                                                                                                                                                                                                                                    |
+| `.skill-principles span:nth-child(1)`  | 01 / defina o gatilho                                                                                                                                                                                                                                                                                |
+| `.skill-principles span:nth-child(2)`  | 02 / carregue detalhes sob demanda                                                                                                                                                                                                                                                                   |
+| `.skill-principles span:nth-child(3)`  | 03 / devolva evidências                                                                                                                                                                                                                                                                              |
+| `.skill-package > span`                | PACOTE DE SKILL                                                                                                                                                                                                                                                                                      |
+| `.catalog-intro .eyebrow`              | O kit de campo                                                                                                                                                                                                                                                                                       |
+| `.catalog-intro h2`                    | Trabalhos diferentes.<br />Instintos <em>diferentes.</em>                                                                                                                                                                                                                                            |
+| `.catalog-intro > p`                   | Uma skill muda como o agente aborda o trabalho. Algumas moldam a comunicação. Outras impõem pesquisa, diagnóstico, revisão ou disciplina de conclusão. Selecione uma para inspecionar sua regra operacional.                                                                                         |
+| `[data-common-skill="ponytail"] span`  | SIMPLIFICAR                                                                                                                                                                                                                                                                                          |
+| `[data-common-skill="ponytail"] small` | código mínimo que funciona                                                                                                                                                                                                                                                                           |
+| `[data-common-skill="caveman"] span`   | COMUNICAR                                                                                                                                                                                                                                                                                            |
+| `[data-common-skill="caveman"] small`  | sinal sem excesso                                                                                                                                                                                                                                                                                    |
+| `[data-common-skill="unlazy"] span`    | CONCLUIR                                                                                                                                                                                                                                                                                             |
+| `[data-common-skill="unlazy"] small`   | gates e evidências                                                                                                                                                                                                                                                                                   |
+| `[data-common-skill="research"] span`  | INVESTIGAR                                                                                                                                                                                                                                                                                           |
+| `[data-common-skill="research"] small` | fontes primárias primeiro                                                                                                                                                                                                                                                                            |
+| `[data-common-skill="debug"] span`     | DIAGNOSTICAR                                                                                                                                                                                                                                                                                         |
+| `[data-common-skill="debug"] small`    | ciclo curto de feedback                                                                                                                                                                                                                                                                              |
+| `[data-common-skill="review"] span`    | REVISAR                                                                                                                                                                                                                                                                                              |
+| `[data-common-skill="review"] small`   | padrões × especificação                                                                                                                                                                                                                                                                              |
+| `[data-common-skill="tokens"] span`    | ECONOMIZAR                                                                                                                                                                                                                                                                                           |
+| `[data-common-skill="tokens"] small`   | comprima saídas ruidosas                                                                                                                                                                                                                                                                             |
+| `.skill-loadout > span`                | UM LOADOUT PRÁTICO                                                                                                                                                                                                                                                                                   |
+| `.skill-loadout > div`                 | <b>PLANEJAR</b> unlazy <i>→</i> <b>CONSTRUIR</b> ponytail-lite <i>→</i> <b>DIAGNOSTICAR</b> diagnosing-bugs <i>→</i> <b>REPORTAR</b> caveman                                                                                                                                                         |
+| `.callout span`                        | COMECE AQUI                                                                                                                                                                                                                                                                                          |
+| `.callout strong`                      | Comece com um agente e uma skill. Adicione paralelismo apenas quando as tarefas forem realmente independentes.                                                                                                                                                                                       |
+| `.sources p`                           | Aprofunde com documentação oficial, casos de produção, Medium e fluxos de praticantes. <a href="rules/">Estudo de caso sobre regras e enforcement →</a> <a href="docs/references/README.md">Referências primárias →</a> <a href="docs/references/additional-reading.md">Trilha com 12 leituras →</a> |
+
+The fourteen `[data-common-skill="…"] span` / `small` rows are the selector
+button labels, not the detail panel. `GuideSelector` re-renders the panel per
+locale but not the button labels, so those need the server-rendered pair like
+any other static string.
+
+### Done when
+
+- [ ] All 102 entries present in `dist/full-guide/index.html` — 102, not 68
+- [ ] The three blocks take `Localized` for their previously hard-coded strings
+- [ ] No untracked scratch files left in the worktree
+- [ ] `pnpm run gate` green, 42 assertions, `verify.mjs` untouched
+- [ ] Report names any selector you could not place and why
@@ -1,8 +1,8 @@
 # Task 17 — hands-on passthrough

-**Agent**: `astro-architect` · **Model**: MiniMax-M3
-**Depends on**: 01 · **Parallel with**: 12, 13, 14
-**Worktree**: `.agents/scripts/worktree.sh start 17 hands-on`
+**Agent**: `astro-architect` · **Model**: MiniMax-M3 **Depends on**: 01 ·
+**Parallel with**: 12, 13, 14 **Worktree**:
+`.agents/scripts/worktree.sh start 17 hands-on`

 ## Goal

@@ -0,0 +1,14 @@
+# Font licences
+
+Both families here are licensed under the SIL Open Font License, Version 1.1,
+which permits redistribution and self-hosting.
+
+| Family  | Designer                     | Source                                 |
+| ------- | ---------------------------- | -------------------------------------- |
+| Manrope | Mikhail Sharanda             | https://github.com/sharanda/manrope    |
+| DM Mono | Colophon Foundry for Deja Vu | https://github.com/googlefonts/dm-mono |
+
+Full licence text: https://openfontlicense.org/open-font-license-official-text/
+
+The `.woff2` files are the latin and latin-ext subsets as served by Google
+Fonts. They are unmodified.
@@ -0,0 +1,100 @@
+/* Manrope and DM Mono, self-hosted.
+ *
+ * `styles.css` line 1 used to carry this:
+ *
+ *   @font-face{font-family:Manrope;src:url('https://fonts.googleapis.com/css2?...')}
+ *
+ * `src:` in an @font-face must point at a font binary. That URL returns a CSS
+ * stylesheet, so no browser could ever load a face from it: every
+ * `font-family:Manrope,Arial,sans-serif` fell through to Arial, and 'DM Mono'
+ * was never declared at all, so it fell through to the generic monospace face.
+ * The intended typography has never rendered. This file is the fix.
+ *
+ * Self-hosted rather than linked from fonts.googleapis.com because
+ * `scripts/audit-ui.mjs` rejects any external <link>/<script>, and because the
+ * site is shown in workshop rooms with unreliable networks.
+ *
+ * Both families are SIL Open Font License 1.1 — see OFL.md in this directory.
+ * Subsets are latin and latin-ext only: the site is EN and PT-BR, so the
+ * cyrillic, greek and vietnamese subsets Google also serves are dropped.
+ *
+ * The url()s are relative on purpose. Both consumers resolve them against this
+ * file's own location:
+ *   - Astro pages: <link> in BaseLayout.astro, served from `${base}fonts/`
+ *   - legacy pages: @import at the top of the root `styles.css`
+ */
+
+/* DM Mono 400 — latin */
+@font-face {
+  font-family: 'DM Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('dm-mono-400-latin.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* DM Mono 400 — latin-ext */
+@font-face {
+  font-family: 'DM Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('dm-mono-400-latin-ext.woff2') format('woff2');
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+    U+A720-A7FF;
+}
+
+/* DM Mono 500 — latin */
+@font-face {
+  font-family: 'DM Mono';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('dm-mono-500-latin.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* DM Mono 500 — latin-ext */
+@font-face {
+  font-family: 'DM Mono';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('dm-mono-500-latin-ext.woff2') format('woff2');
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+    U+A720-A7FF;
+}
+
+/* Manrope 400 800 — latin */
+@font-face {
+  font-family: Manrope;
+  font-style: normal;
+  font-weight: 400 800;
+  font-display: swap;
+  src: url('manrope-var-latin.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* Manrope 400 800 — latin-ext */
+@font-face {
+  font-family: Manrope;
+  font-style: normal;
+  font-weight: 400 800;
+  font-display: swap;
+  src: url('manrope-var-latin-ext.woff2') format('woff2');
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+    U+A720-A7FF;
+}
@@ -1,6 +1,6 @@
 .topbar-tools{display:flex;align-items:center;gap:24px}
-.skills-review-link{color:var(--blue);font:700 9px 'DM Mono',monospace;letter-spacing:.06em;text-decoration:none;text-transform:uppercase;white-space:nowrap}.skills-review-link:hover{color:var(--accent)}
-.lang-switch{display:flex;align-items:center;gap:6px;color:var(--muted);font:500 10px 'DM Mono',monospace;letter-spacing:.1em}
+.skills-review-link{color:var(--blue);font:700 9px var(--font-mono);letter-spacing:.06em;text-decoration:none;text-transform:uppercase;white-space:nowrap}.skills-review-link:hover{color:var(--accent)}
+.lang-switch{display:flex;align-items:center;gap:6px;color:var(--muted);font:500 10px var(--font-mono);letter-spacing:.1em}
 .lang-switch button{padding:0;border:0;color:inherit;background:transparent;font:inherit;cursor:pointer}
 .lang-switch button.active{color:var(--ink);font-weight:700}
 .lang-switch button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@@ -8,31 +8,31 @@
@media(max-width:600px){.topbar-tools .edition{display:none}}

 /* Interactive operations map */
-.interaction-hint{margin-top:24px!important;padding-left:18px;border-left:3px solid var(--gold);font:500 11px/1.6 'DM Mono',monospace!important;color:var(--muted)!important}
+.interaction-hint{margin-top:24px!important;padding-left:18px;border-left:3px solid var(--gold);font:500 11px/1.6 var(--font-mono)!important;color:var(--muted)!important}
 button{font-family:inherit}
 .worker-card{display:grid;align-content:space-between;gap:20px;min-height:180px;padding:22px;border:0;color:var(--paper);background:var(--ink);text-align:left;cursor:pointer;transition:background .2s ease,transform .2s ease}
-.worker-card span{color:#9eabb4;font:500 10px 'DM Mono',monospace;letter-spacing:.1em}
-.worker-card strong{font-size:16px;line-height:1.2}.worker-card code{color:var(--gold);font:11px 'DM Mono',monospace}
+.worker-card span{color:#9eabb4;font:500 10px var(--font-mono);letter-spacing:.1em}
+.worker-card strong{font-size:16px;line-height:1.2}.worker-card code{color:var(--gold);font:11px var(--font-mono)}
 .worker-card:hover,.worker-card.active{background:#244760}.worker-card.active{box-shadow:inset 0 -4px 0 var(--gold)}.worker-card:active{transform:translateY(2px)}
 .worker-detail{display:grid;grid-template-columns:.55fr 1.1fr 1.2fr;gap:1px;margin-top:1px;background:var(--line)}
-.worker-detail>*{margin:0;padding:16px 20px;background:#edf0f1}.worker-detail span,.worker-detail small{font:500 10px/1.5 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase}.worker-detail span{color:var(--accent)}.worker-detail strong{font-size:13px}.worker-detail small{color:var(--muted);text-transform:none}
+.worker-detail>*{margin:0;padding:16px 20px;background:#edf0f1}.worker-detail span,.worker-detail small{font:500 10px/1.5 var(--font-mono);letter-spacing:.06em;text-transform:uppercase}.worker-detail span{color:var(--accent)}.worker-detail strong{font-size:13px}.worker-detail small{color:var(--muted);text-transform:none}

 .tree-lab{min-width:0;border:1px solid #41596b;background:#0b1b27;box-shadow:18px 18px 0 #081621}
-.tree-toolbar{display:flex;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #41596b;color:#9eabb4;font:500 9px 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase}
+.tree-toolbar{display:flex;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #41596b;color:#9eabb4;font:500 9px var(--font-mono);letter-spacing:.1em;text-transform:uppercase}
 .tree-live{display:flex;align-items:center;gap:8px}.tree-live i{display:block;width:7px;height:7px;border-radius:50%;background:#80c69a;box-shadow:0 0 0 4px #80c69a22}
 .tree-stage{position:relative;height:330px;overflow:hidden;background-image:linear-gradient(#ffffff06 1px,transparent 1px),linear-gradient(90deg,#ffffff06 1px,transparent 1px);background-size:24px 24px}
 .tree-stage svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.tree-edge{fill:none;stroke:#527f9f;stroke-width:2;stroke-dasharray:5 5;vector-effect:non-scaling-stroke}.tree-edge.trunk{stroke:var(--gold);stroke-dasharray:none;stroke-width:3}
 .tree-node{position:absolute;z-index:2;display:grid;gap:6px;width:164px;padding:13px 15px;border:1px solid #527085;color:var(--paper);background:#112a3b;text-align:left;cursor:pointer;transition:border-color .2s ease,background .2s ease,transform .2s ease,box-shadow .2s ease}
-.tree-node span,.tree-node small{font:500 8px 'DM Mono',monospace;letter-spacing:.08em}.tree-node span{color:#8ca1af}.tree-node strong{font:600 12px 'DM Mono',monospace}.tree-node small{color:#a9b6be}
+.tree-node span,.tree-node small{font:500 8px var(--font-mono);letter-spacing:.08em}.tree-node span{color:#8ca1af}.tree-node strong{font:600 12px var(--font-mono)}.tree-node small{color:#a9b6be}
 .tree-node.root{top:25px;left:50%;transform:translateX(-50%);border-color:var(--gold)}.tree-node.branch{top:220px}.tree-node.ui{left:3%}.tree-node.tests{left:50%;transform:translateX(-50%)}.tree-node.docs{right:3%}
 .tree-node:hover,.tree-node.active{border-color:var(--gold);background:#1c425a;box-shadow:0 0 0 4px #efc76b18}.tree-node.root:hover,.tree-node.root.active{transform:translateX(-50%) translateY(-3px)}.tree-node.tests:hover,.tree-node.tests.active{transform:translateX(-50%) translateY(-3px)}.tree-node.ui:hover,.tree-node.ui.active,.tree-node.docs:hover,.tree-node.docs.active{transform:translateY(-3px)}
-.tree-detail{display:grid;grid-template-columns:.7fr 1fr 1.6fr;gap:1px;border-top:1px solid #41596b;background:#41596b}.tree-detail>div,.tree-detail>p,.tree-detail>code{margin:0;padding:18px;background:#102536}.tree-detail div{display:grid;gap:8px}.tree-detail span{color:var(--accent);font:500 8px 'DM Mono',monospace;letter-spacing:.1em}.tree-detail strong{color:var(--paper);font:500 11px 'DM Mono',monospace}.tree-detail p{color:#aebbc3;font-size:11px;line-height:1.55}.tree-detail code{grid-column:1/-1;color:var(--gold);font:11px 'DM Mono',monospace}
+.tree-detail{display:grid;grid-template-columns:.7fr 1fr 1.6fr;gap:1px;border-top:1px solid #41596b;background:#41596b}.tree-detail>div,.tree-detail>p,.tree-detail>code{margin:0;padding:18px;background:#102536}.tree-detail div{display:grid;gap:8px}.tree-detail span{color:var(--accent);font:500 8px var(--font-mono);letter-spacing:.1em}.tree-detail strong{color:var(--paper);font:500 11px var(--font-mono)}.tree-detail p{color:#aebbc3;font-size:11px;line-height:1.55}.tree-detail code{grid-column:1/-1;color:var(--gold);font:11px var(--font-mono)}

 .route-console{display:grid;gap:14px}.route-table button{display:grid;grid-template-columns:.8fr .9fr 1.4fr;width:100%;padding:0;border:0;color:inherit;background:transparent;text-align:left;cursor:pointer}.route-table button>*{padding:15px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.route-table button:hover,.route-table button.active{background:#e8ecee}.route-table button.active strong{box-shadow:inset 4px 0 0 var(--gold)}
-.route-detail{display:grid;grid-template-columns:100px 1fr;gap:22px;align-items:center;padding:22px;color:var(--paper);background:var(--deep)}.route-meter{display:grid;align-items:end;width:76px;height:76px;padding:7px;border:1px solid #496274}.route-meter span{display:block;width:100%;height:var(--score);background:var(--gold);transition:height .35s ease}.route-detail>div:last-child{display:grid;gap:7px}.route-detail small{color:var(--gold);font:500 8px 'DM Mono',monospace;letter-spacing:.08em}.route-detail strong{font-size:17px}.route-detail p{margin:0;color:#b5c0c7;font-size:12px;line-height:1.5}
+.route-detail{display:grid;grid-template-columns:100px 1fr;gap:22px;align-items:center;padding:22px;color:var(--paper);background:var(--deep)}.route-meter{display:grid;align-items:end;width:76px;height:76px;padding:7px;border:1px solid #496274}.route-meter span{display:block;width:100%;height:var(--score);background:var(--gold);transition:height .35s ease}.route-detail>div:last-child{display:grid;gap:7px}.route-detail small{color:var(--gold);font:500 8px var(--font-mono);letter-spacing:.08em}.route-detail strong{font-size:17px}.route-detail p{margin:0;color:#b5c0c7;font-size:12px;line-height:1.5}

-.skill-explorer{display:grid;grid-template-columns:.9fr 1.1fr;min-height:290px;background:var(--blue)}.skill-package button{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:17px 20px;border:0;border-bottom:1px solid #ffffff40;color:var(--paper);background:transparent;text-align:left;cursor:pointer}.skill-package button:hover,.skill-package button.active{background:#315f80}.skill-package button.active{box-shadow:inset 4px 0 0 var(--gold)}.skill-package button code{font:12px 'DM Mono',monospace}.skill-package button small{opacity:.7}
-.skill-detail{display:grid;grid-template-columns:auto 1fr;gap:18px;align-content:center;padding:28px;color:var(--paper);background:#244760}.skill-detail>span{color:var(--gold);font:42px Georgia,serif}.skill-detail>div{display:grid;gap:13px}.skill-detail strong{font:600 15px 'DM Mono',monospace}.skill-detail p{margin:0;color:#c4cdd3;font-size:12px;line-height:1.65}.skill-detail small{color:var(--gold);font:500 8px 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase}
+.skill-explorer{display:grid;grid-template-columns:.9fr 1.1fr;min-height:290px;background:var(--blue)}.skill-package button{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:17px 20px;border:0;border-bottom:1px solid #ffffff40;color:var(--paper);background:transparent;text-align:left;cursor:pointer}.skill-package button:hover,.skill-package button.active{background:#315f80}.skill-package button.active{box-shadow:inset 4px 0 0 var(--gold)}.skill-package button code{font:12px var(--font-mono)}.skill-package button small{opacity:.7}
+.skill-detail{display:grid;grid-template-columns:auto 1fr;gap:18px;align-content:center;padding:28px;color:var(--paper);background:#244760}.skill-detail>span{color:var(--gold);font:42px Georgia,serif}.skill-detail>div{display:grid;gap:13px}.skill-detail strong{font:600 15px var(--font-mono)}.skill-detail p{margin:0;color:#c4cdd3;font-size:12px;line-height:1.65}.skill-detail small{color:var(--gold);font:500 8px var(--font-mono);letter-spacing:.06em;text-transform:uppercase}

 .worker-card:focus-visible,.tree-node:focus-visible,.route-table button:focus-visible,.skill-package button:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}

@@ -40,36 +40,36 @@ button{font-family:inherit}
 .model-gearbox{margin-bottom:150px;padding-top:80px;border-top:1px solid var(--line)}
 .gearbox-intro{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:end;margin:45px 0}.gearbox-intro h2{margin-bottom:0}.gearbox-intro>p{max-width:650px;margin:0;color:var(--muted);font-size:14px;line-height:1.75}
 .gearbox{display:grid;grid-template-columns:150px minmax(0,1.35fr) minmax(230px,.65fr);grid-template-rows:minmax(410px,auto) auto;border:1px solid var(--line);background:var(--line);gap:1px}
-.provider-tabs{display:grid;grid-template-rows:repeat(3,1fr);gap:1px;background:var(--line)}.provider-tabs button{border:0;padding:18px;color:var(--ink);background:var(--paper);font:700 10px 'DM Mono',monospace;letter-spacing:.08em;cursor:pointer;writing-mode:vertical-rl;transform:rotate(180deg)}.provider-tabs button:hover{background:#eceff0}.provider-tabs button.active{color:var(--paper);background:var(--blue);box-shadow:inset -5px 0 0 var(--gold)}
-.provider-detail{display:grid;align-content:start;padding:42px clamp(28px,4vw,58px);color:var(--paper);background:var(--deep)}.provider-detail header{display:flex;justify-content:space-between;gap:20px;align-items:center}.provider-detail header span{color:var(--gold);font:500 9px 'DM Mono',monospace;letter-spacing:.09em}.provider-detail header a{color:#cbd9e1;font:500 9px 'DM Mono',monospace}.provider-detail h3{margin:34px 0 12px;font-size:clamp(34px,4vw,62px);letter-spacing:-.06em}.provider-detail>p{max-width:730px;margin:0;color:#b7c7d1;font-size:13px;line-height:1.7}.model-ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:34px;background:#ffffff2b}.model-ladder div{padding:18px;background:#18364a}.model-ladder span{display:block;color:var(--gold);font:500 8px 'DM Mono',monospace;letter-spacing:.08em}.model-ladder strong{display:block;margin-top:10px;font-size:13px}.model-ladder small{display:block;margin-top:7px;color:#aebfc9;font-size:10px;line-height:1.4}
-.effort-rail{display:grid;grid-template-rows:auto repeat(3,1fr);background:#e9ecee}.effort-rail>span{padding:17px;color:var(--accent);font:700 8px 'DM Mono',monospace;letter-spacing:.08em}.effort-rail button{display:grid;align-content:center;gap:8px;padding:22px;border:0;border-top:1px solid var(--line);color:var(--ink);background:var(--paper);text-align:left;cursor:pointer}.effort-rail button b{font:700 18px 'DM Mono',monospace}.effort-rail button small{color:var(--muted);font-size:10px}.effort-rail button:hover{background:#eceff0}.effort-rail button.active{color:var(--paper);background:var(--accent);box-shadow:inset 5px 0 0 var(--gold)}.effort-rail button.active small{color:#eeedf6}
-.effort-detail{grid-column:1/-1;display:grid;grid-template-columns:150px 1fr auto;gap:25px;align-items:center;padding:22px 28px;color:var(--paper);background:#132b3b}.effort-detail>span{color:var(--gold);font:500 9px 'DM Mono',monospace;letter-spacing:.08em}.effort-detail p{margin:0;font-size:12px;line-height:1.55}.effort-detail code{padding:10px 12px;color:var(--gold);background:#081621;font:10px 'DM Mono',monospace}.gearbox-rule{display:grid;grid-template-columns:150px 1fr;gap:25px;padding:24px 28px;color:var(--ink);background:var(--gold)}.gearbox-rule span{color:var(--accent);font:700 9px 'DM Mono',monospace;letter-spacing:.08em}.gearbox-rule strong{font-size:13px;line-height:1.5}.provider-tabs button:focus-visible,.effort-rail button:focus-visible,.provider-detail a:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
+.provider-tabs{display:grid;grid-template-rows:repeat(3,1fr);gap:1px;background:var(--line)}.provider-tabs button{border:0;padding:18px;color:var(--ink);background:var(--paper);font:700 10px var(--font-mono);letter-spacing:.08em;cursor:pointer;writing-mode:vertical-rl;transform:rotate(180deg)}.provider-tabs button:hover{background:#eceff0}.provider-tabs button.active{color:var(--paper);background:var(--blue);box-shadow:inset -5px 0 0 var(--gold)}
+.provider-detail{display:grid;align-content:start;padding:42px clamp(28px,4vw,58px);color:var(--paper);background:var(--deep)}.provider-detail header{display:flex;justify-content:space-between;gap:20px;align-items:center}.provider-detail header span{color:var(--gold);font:500 9px var(--font-mono);letter-spacing:.09em}.provider-detail header a{color:#cbd9e1;font:500 9px var(--font-mono)}.provider-detail h3{margin:34px 0 12px;font-size:clamp(34px,4vw,62px);letter-spacing:-.06em}.provider-detail>p{max-width:730px;margin:0;color:#b7c7d1;font-size:13px;line-height:1.7}.model-ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:34px;background:#ffffff2b}.model-ladder div{padding:18px;background:#18364a}.model-ladder span{display:block;color:var(--gold);font:500 8px var(--font-mono);letter-spacing:.08em}.model-ladder strong{display:block;margin-top:10px;font-size:13px}.model-ladder small{display:block;margin-top:7px;color:#aebfc9;font-size:10px;line-height:1.4}
+.effort-rail{display:grid;grid-template-rows:auto repeat(3,1fr);background:#e9ecee}.effort-rail>span{padding:17px;color:var(--accent);font:700 8px var(--font-mono);letter-spacing:.08em}.effort-rail button{display:grid;align-content:center;gap:8px;padding:22px;border:0;border-top:1px solid var(--line);color:var(--ink);background:var(--paper);text-align:left;cursor:pointer}.effort-rail button b{font:700 18px var(--font-mono)}.effort-rail button small{color:var(--muted);font-size:10px}.effort-rail button:hover{background:#eceff0}.effort-rail button.active{color:var(--paper);background:var(--accent);box-shadow:inset 5px 0 0 var(--gold)}.effort-rail button.active small{color:#eeedf6}
+.effort-detail{grid-column:1/-1;display:grid;grid-template-columns:150px 1fr auto;gap:25px;align-items:center;padding:22px 28px;color:var(--paper);background:#132b3b}.effort-detail>span{color:var(--gold);font:500 9px var(--font-mono);letter-spacing:.08em}.effort-detail p{margin:0;font-size:12px;line-height:1.55}.effort-detail code{padding:10px 12px;color:var(--gold);background:#081621;font:10px var(--font-mono)}.gearbox-rule{display:grid;grid-template-columns:150px 1fr;gap:25px;padding:24px 28px;color:var(--ink);background:var(--gold)}.gearbox-rule span{color:var(--accent);font:700 9px var(--font-mono);letter-spacing:.08em}.gearbox-rule strong{font-size:13px;line-height:1.5}.provider-tabs button:focus-visible,.effort-rail button:focus-visible,.provider-detail a:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}

 /* Skill shelf */
 .skill-builder{margin-bottom:150px;padding-top:80px;border-top:1px solid var(--line)}
 .builder-intro{display:grid;grid-template-columns:.95fr 1.05fr;gap:70px;align-items:end;margin:45px 0}.builder-intro h2{margin-bottom:0}.builder-intro>p{max-width:620px;margin:0;color:var(--muted);font-size:14px;line-height:1.75}
 .builder-workbench{display:grid;grid-template-columns:minmax(220px,.65fr) minmax(380px,1.35fr) minmax(270px,.85fr);min-height:570px;border:1px solid var(--line);background:var(--line)}
-.builder-steps{display:grid;grid-template-rows:repeat(5,1fr);gap:1px;background:var(--line)}.builder-steps button{display:grid;grid-template-columns:42px 1fr;grid-template-rows:auto auto;align-content:center;column-gap:13px;padding:18px;border:0;color:var(--ink);background:var(--paper);text-align:left;cursor:pointer}.builder-steps button b{grid-row:1/-1;align-self:center;color:var(--accent);font:500 11px 'DM Mono',monospace}.builder-steps button span{font:700 12px 'DM Mono',monospace}.builder-steps button small{margin-top:5px;color:var(--muted);font-size:10px}.builder-steps button:hover{background:#eceff0}.builder-steps button.active{color:var(--paper);background:var(--blue);box-shadow:inset 5px 0 0 var(--gold)}.builder-steps button.active b,.builder-steps button.active small{color:var(--gold)}
-.builder-detail{display:grid;grid-template-rows:auto auto auto 1fr auto;align-content:start;padding:38px clamp(28px,4vw,58px);color:var(--paper);background:var(--deep)}.builder-detail header{display:flex;justify-content:space-between;align-items:center}.builder-detail header span{color:#ffffff30;font:500 54px 'DM Mono',monospace}.builder-detail header small,.builder-action span,.builder-detail footer span{color:var(--gold);font:500 8px 'DM Mono',monospace;letter-spacing:.1em}.builder-detail h3{margin:27px 0 14px;font-size:clamp(26px,3vw,44px);line-height:1.05;letter-spacing:-.05em}.builder-detail blockquote{margin:0;padding:0;color:#a9bcc8;font:italic 20px/1.35 Georgia,serif}.builder-action{align-self:center;margin:34px 0}.builder-action p{margin:11px 0 0;color:#d5dde2;font-size:13px;line-height:1.7}.builder-detail footer{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#ffffff2b}.builder-detail footer>div{display:grid;gap:10px;padding:17px;background:#18364a}.builder-detail footer strong{font-size:11px;line-height:1.5}
-.builder-artifact{display:grid;grid-template-rows:auto 1fr auto;color:var(--paper);background:#0b1b27}.artifact-head{display:flex;justify-content:space-between;padding:17px;border-bottom:1px solid #344c5d;font:500 8px 'DM Mono',monospace;letter-spacing:.09em}.artifact-head i{width:8px;height:8px;border-radius:50%;background:#80c69a;box-shadow:0 0 0 4px #80c69a20}.builder-artifact pre{display:grid;align-items:center;margin:0;padding:28px;overflow:auto;color:#bed0dc;background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:22px 22px}.builder-artifact pre code{font:12px/1.9 'DM Mono',monospace}.artifact-command{display:grid;gap:9px;padding:18px;border-top:1px solid #344c5d}.artifact-command span{color:var(--gold);font:500 8px 'DM Mono',monospace;letter-spacing:.09em}.artifact-command code{font:10px 'DM Mono',monospace}
-.builder-loop{display:grid;grid-template-columns:200px 1fr;gap:25px;padding:23px 28px;color:var(--ink);background:var(--gold)}.builder-loop>span{font:700 9px 'DM Mono',monospace;letter-spacing:.09em}.builder-loop>div{font:600 11px 'DM Mono',monospace}.builder-loop i{margin:0 12px;color:var(--accent);font-style:normal}.builder-steps button:focus-visible{position:relative;z-index:2;outline:3px solid var(--gold);outline-offset:-3px}
+.builder-steps{display:grid;grid-template-rows:repeat(5,1fr);gap:1px;background:var(--line)}.builder-steps button{display:grid;grid-template-columns:42px 1fr;grid-template-rows:auto auto;align-content:center;column-gap:13px;padding:18px;border:0;color:var(--ink);background:var(--paper);text-align:left;cursor:pointer}.builder-steps button b{grid-row:1/-1;align-self:center;color:var(--accent);font:500 11px var(--font-mono)}.builder-steps button span{font:700 12px var(--font-mono)}.builder-steps button small{margin-top:5px;color:var(--muted);font-size:10px}.builder-steps button:hover{background:#eceff0}.builder-steps button.active{color:var(--paper);background:var(--blue);box-shadow:inset 5px 0 0 var(--gold)}.builder-steps button.active b,.builder-steps button.active small{color:var(--gold)}
+.builder-detail{display:grid;grid-template-rows:auto auto auto 1fr auto;align-content:start;padding:38px clamp(28px,4vw,58px);color:var(--paper);background:var(--deep)}.builder-detail header{display:flex;justify-content:space-between;align-items:center}.builder-detail header span{color:#ffffff30;font:500 54px var(--font-mono)}.builder-detail header small,.builder-action span,.builder-detail footer span{color:var(--gold);font:500 8px var(--font-mono);letter-spacing:.1em}.builder-detail h3{margin:27px 0 14px;font-size:clamp(26px,3vw,44px);line-height:1.05;letter-spacing:-.05em}.builder-detail blockquote{margin:0;padding:0;color:#a9bcc8;font:italic 20px/1.35 Georgia,serif}.builder-action{align-self:center;margin:34px 0}.builder-action p{margin:11px 0 0;color:#d5dde2;font-size:13px;line-height:1.7}.builder-detail footer{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#ffffff2b}.builder-detail footer>div{display:grid;gap:10px;padding:17px;background:#18364a}.builder-detail footer strong{font-size:11px;line-height:1.5}
+.builder-artifact{display:grid;grid-template-rows:auto 1fr auto;color:var(--paper);background:#0b1b27}.artifact-head{display:flex;justify-content:space-between;padding:17px;border-bottom:1px solid #344c5d;font:500 8px var(--font-mono);letter-spacing:.09em}.artifact-head i{width:8px;height:8px;border-radius:50%;background:#80c69a;box-shadow:0 0 0 4px #80c69a20}.builder-artifact pre{display:grid;align-items:center;margin:0;padding:28px;overflow:auto;color:#bed0dc;background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:22px 22px}.builder-artifact pre code{font:12px/1.9 var(--font-mono)}.artifact-command{display:grid;gap:9px;padding:18px;border-top:1px solid #344c5d}.artifact-command span{color:var(--gold);font:500 8px var(--font-mono);letter-spacing:.09em}.artifact-command code{font:10px var(--font-mono)}
+.builder-loop{display:grid;grid-template-columns:200px 1fr;gap:25px;padding:23px 28px;color:var(--ink);background:var(--gold)}.builder-loop>span{font:700 9px var(--font-mono);letter-spacing:.09em}.builder-loop>div{font:600 11px var(--font-mono)}.builder-loop i{margin:0 12px;color:var(--accent);font-style:normal}.builder-steps button:focus-visible{position:relative;z-index:2;outline:3px solid var(--gold);outline-offset:-3px}

-.skill-catalog{margin-bottom:130px;padding-top:80px;border-top:1px solid var(--line)}.verification{padding-top:80px;border-top:1px solid var(--line);margin-bottom:130px}.verify-intro{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:end;margin:45px 0}.verify-intro h2{margin-bottom:0}.verify-intro>p{max-width:650px;margin:0;color:var(--muted);font-size:14px;line-height:1.75}.verify-layers{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:1px;background:var(--line);border:1px solid var(--line)}.verify-layers article{background:var(--paper);padding:24px 22px;display:grid;gap:12px;grid-template-rows:auto auto 1fr auto}.verify-layers article>span{font:500 9px 'DM Mono',monospace;letter-spacing:.09em;color:var(--accent)}.verify-layers article h3{margin:0;font-size:18px;letter-spacing:-.02em}.verify-layers article p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}.verify-layers article code{font:10.5px ui-monospace,monospace;color:var(--ink);background:var(--paper);border:1px solid var(--line);padding:10px 12px;white-space:pre-wrap;word-break:break-word;line-height:1.55}.verify-antipatterns{margin-top:55px}.verify-antipatterns>span{font:500 9px 'DM Mono',monospace;letter-spacing:.09em;color:var(--muted)}.ap-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:14px;background:var(--line);border:1px solid var(--line)}.ap-grid article{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;align-items:start;background:var(--paper);padding:18px 20px}.ap-grid article b{font:500 22px 'DM Mono',monospace;color:var(--accent);line-height:1;align-self:center}.ap-grid article strong{font-size:15px;letter-spacing:-.01em}.ap-grid article p{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.5}.ap-grid article code{font:11px ui-monospace,monospace;color:var(--ink);background:var(--paper);padding:1px 4px;border:1px solid var(--line)}.verify-cta{margin-top:55px;padding:26px 28px;color:var(--paper);background:var(--ink)}.verify-cta>span{font:500 9px 'DM Mono',monospace;letter-spacing:.09em;color:var(--gold)}.verify-cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:18px;background:#ffffff1f}.verify-card{display:grid;gap:6px;background:var(--ink);padding:20px 22px;color:var(--paper);text-decoration:none;border-bottom:2px solid var(--gold)}.verify-card strong{font-size:17px;letter-spacing:-.01em}.verify-card p{margin:0;color:#bfccd4;font-size:13px;line-height:1.55}.verify-card p code{font:11px ui-monospace,monospace;color:var(--gold);background:#0f2230;padding:1px 5px;border:1px solid #2a4150}.verify-card small{font:500 10px 'DM Mono',monospace;color:var(--gold);letter-spacing:.09em}@media(max-width:880px){.verify-layers,.verify-cta-grid{grid-template-columns:1fr}.verify-intro{grid-template-columns:1fr}}@media(max-width:560px){.verify-intro{display:block}.verify-intro>p{margin-top:18px}.ap-grid{grid-template-columns:1fr}.verify-cta{padding:22px 20px}}
+.skill-catalog{margin-bottom:130px;padding-top:80px;border-top:1px solid var(--line)}.verification{padding-top:80px;border-top:1px solid var(--line);margin-bottom:130px}.verify-intro{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:end;margin:45px 0}.verify-intro h2{margin-bottom:0}.verify-intro>p{max-width:650px;margin:0;color:var(--muted);font-size:14px;line-height:1.75}.verify-layers{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:1px;background:var(--line);border:1px solid var(--line)}.verify-layers article{background:var(--paper);padding:24px 22px;display:grid;gap:12px;grid-template-rows:auto auto 1fr auto}.verify-layers article>span{font:500 9px var(--font-mono);letter-spacing:.09em;color:var(--accent)}.verify-layers article h3{margin:0;font-size:18px;letter-spacing:-.02em}.verify-layers article p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}.verify-layers article code{font:10.5px var(--font-mono);color:var(--ink);background:var(--paper);border:1px solid var(--line);padding:10px 12px;white-space:pre-wrap;word-break:break-word;line-height:1.55}.verify-antipatterns{margin-top:55px}.verify-antipatterns>span{font:500 9px var(--font-mono);letter-spacing:.09em;color:var(--muted)}.ap-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:14px;background:var(--line);border:1px solid var(--line)}.ap-grid article{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;align-items:start;background:var(--paper);padding:18px 20px}.ap-grid article b{font:500 22px var(--font-mono);color:var(--accent);line-height:1;align-self:center}.ap-grid article strong{font-size:15px;letter-spacing:-.01em}.ap-grid article p{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.5}.ap-grid article code{font:11px var(--font-mono);color:var(--ink);background:var(--paper);padding:1px 4px;border:1px solid var(--line)}.verify-cta{margin-top:55px;padding:26px 28px;color:var(--paper);background:var(--ink)}.verify-cta>span{font:500 9px var(--font-mono);letter-spacing:.09em;color:var(--gold)}.verify-cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:18px;background:#ffffff1f}.verify-card{display:grid;gap:6px;background:var(--ink);padding:20px 22px;color:var(--paper);text-decoration:none;border-bottom:2px solid var(--gold)}.verify-card strong{font-size:17px;letter-spacing:-.01em}.verify-card p{margin:0;color:#bfccd4;font-size:13px;line-height:1.55}.verify-card p code{font:11px var(--font-mono);color:var(--gold);background:#0f2230;padding:1px 5px;border:1px solid #2a4150}.verify-card small{font:500 10px var(--font-mono);color:var(--gold);letter-spacing:.09em}@media(max-width:880px){.verify-layers,.verify-cta-grid{grid-template-columns:1fr}.verify-intro{grid-template-columns:1fr}}@media(max-width:560px){.verify-intro{display:block}.verify-intro>p{margin-top:18px}.ap-grid{grid-template-columns:1fr}.verify-cta{padding:22px 20px}}
 .catalog-intro{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:end;margin:45px 0}.catalog-intro h2{margin-bottom:0}.catalog-intro>p{max-width:620px;margin:0;color:var(--muted);font-size:14px;line-height:1.75}
 .skill-deck{display:grid;grid-template-columns:minmax(270px,.8fr) minmax(0,1.7fr);min-height:620px;border:1px solid var(--line);background:var(--line)}
 .skill-index{display:grid;grid-template-rows:repeat(7,1fr);gap:1px;background:var(--line)}
 .skill-index button{display:grid;grid-template-columns:95px 1fr;grid-template-rows:auto auto;align-content:center;column-gap:18px;padding:16px 20px;border:0;color:var(--ink);background:var(--paper);text-align:left;cursor:pointer;transition:background .2s ease,color .2s ease}
-.skill-index button span{grid-row:1/-1;align-self:center;color:var(--accent);font:500 8px 'DM Mono',monospace;letter-spacing:.08em}.skill-index button strong{font:600 13px 'DM Mono',monospace}.skill-index button small{margin-top:5px;color:var(--muted);font-size:10px}.skill-index button:hover{background:#eceff0}.skill-index button.active{color:var(--paper);background:var(--deep);box-shadow:inset 5px 0 0 var(--gold)}.skill-index button.active span,.skill-index button.active small{color:var(--gold)}
-.common-skill-detail{display:grid;grid-template-rows:auto auto auto 1fr;align-content:start;padding:44px clamp(30px,5vw,78px);color:var(--paper);background:var(--accent);overflow:hidden}.common-skill-detail header{display:flex;justify-content:space-between;align-items:center;padding-bottom:18px;border-bottom:1px solid #ffffff42}.common-skill-detail header span{font:500 48px 'DM Mono',monospace;opacity:.34}.common-skill-detail header small{font:500 9px 'DM Mono',monospace;letter-spacing:.1em}.common-skill-detail h3{margin:38px 0 18px;font-size:clamp(30px,4vw,60px);letter-spacing:-.06em}.common-skill-detail blockquote{max-width:720px;margin:0 0 38px;padding:0;border:0;color:var(--gold);font:400 clamp(20px,2.5vw,34px)/1.15 Georgia,serif;font-style:italic}.common-skill-notes{display:grid;grid-template-columns:1.45fr .9fr .9fr;gap:1px;align-self:end;background:#ffffff42}.common-skill-notes>div{padding:20px;background:#6c6898}.common-skill-notes span{color:var(--gold);font:500 8px 'DM Mono',monospace;letter-spacing:.08em}.common-skill-notes p{margin:12px 0 0;color:#f1f0f7;font-size:12px;line-height:1.55}.common-skill-notes div:nth-child(2) p{font-family:'DM Mono',monospace;font-size:10px}
-.skill-loadout{display:grid;grid-template-columns:210px 1fr;gap:25px;padding:24px 28px;color:var(--paper);background:var(--ink)}.skill-loadout>span{color:var(--gold);font:500 9px 'DM Mono',monospace;letter-spacing:.09em}.skill-loadout>div{font:500 11px 'DM Mono',monospace}.skill-loadout b{color:var(--accent);font-size:9px}.skill-loadout i{margin:0 10px;color:var(--gold);font-style:normal}.skill-index button:focus-visible{position:relative;z-index:2;outline:3px solid var(--gold);outline-offset:-3px}
-.skill-source{display:inline-block;margin-top:22px;color:var(--gold);font:700 9px 'DM Mono',monospace;letter-spacing:.07em;text-decoration:none;border-bottom:1px solid currentColor}.skill-source:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
-.install-skills{display:grid;grid-template-rows:auto 1fr auto;margin-top:24px;color:var(--paper);background:var(--deep);border-left:7px solid var(--gold)}.install-skills header{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 24px;border-bottom:1px solid #ffffff2d}.install-skills header>div{display:grid;gap:7px}.install-skills header span,.install-skills footer{color:var(--gold);font:500 8px 'DM Mono',monospace;letter-spacing:.08em}.install-skills header strong{font-size:15px}.install-skills button{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid #ffffff50;color:var(--paper);background:transparent;cursor:pointer}.install-skills button:hover,.install-skills button.copied{color:var(--ink);border-color:var(--gold);background:var(--gold)}.install-skills button i{font-style:normal}.install-skills pre{max-height:360px;margin:0;padding:24px;overflow:auto;white-space:pre-wrap;background:#0b1b27}.install-skills pre code{font:10px/1.7 'DM Mono',monospace}.install-skills footer{padding:16px 24px;color:#b9c8d1;border-top:1px solid #ffffff2d}.install-skills button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
+.skill-index button span{grid-row:1/-1;align-self:center;color:var(--accent);font:500 8px var(--font-mono);letter-spacing:.08em}.skill-index button strong{font:600 13px var(--font-mono)}.skill-index button small{margin-top:5px;color:var(--muted);font-size:10px}.skill-index button:hover{background:#eceff0}.skill-index button.active{color:var(--paper);background:var(--deep);box-shadow:inset 5px 0 0 var(--gold)}.skill-index button.active span,.skill-index button.active small{color:var(--gold)}
+.common-skill-detail{display:grid;grid-template-rows:auto auto auto 1fr;align-content:start;padding:44px clamp(30px,5vw,78px);color:var(--paper);background:var(--accent);overflow:hidden}.common-skill-detail header{display:flex;justify-content:space-between;align-items:center;padding-bottom:18px;border-bottom:1px solid #ffffff42}.common-skill-detail header span{font:500 48px var(--font-mono);opacity:.34}.common-skill-detail header small{font:500 9px var(--font-mono);letter-spacing:.1em}.common-skill-detail h3{margin:38px 0 18px;font-size:clamp(30px,4vw,60px);letter-spacing:-.06em}.common-skill-detail blockquote{max-width:720px;margin:0 0 38px;padding:0;border:0;color:var(--gold);font:400 clamp(20px,2.5vw,34px)/1.15 Georgia,serif;font-style:italic}.common-skill-notes{display:grid;grid-template-columns:1.45fr .9fr .9fr;gap:1px;align-self:end;background:#ffffff42}.common-skill-notes>div{padding:20px;background:#6c6898}.common-skill-notes span{color:var(--gold);font:500 8px var(--font-mono);letter-spacing:.08em}.common-skill-notes p{margin:12px 0 0;color:#f1f0f7;font-size:12px;line-height:1.55}.common-skill-notes div:nth-child(2) p{font-family:var(--font-mono);font-size:10px}
+.skill-loadout{display:grid;grid-template-columns:210px 1fr;gap:25px;padding:24px 28px;color:var(--paper);background:var(--ink)}.skill-loadout>span{color:var(--gold);font:500 9px var(--font-mono);letter-spacing:.09em}.skill-loadout>div{font:500 11px var(--font-mono)}.skill-loadout b{color:var(--accent);font-size:9px}.skill-loadout i{margin:0 10px;color:var(--gold);font-style:normal}.skill-index button:focus-visible{position:relative;z-index:2;outline:3px solid var(--gold);outline-offset:-3px}
+.skill-source{display:inline-block;margin-top:22px;color:var(--gold);font:700 9px var(--font-mono);letter-spacing:.07em;text-decoration:none;border-bottom:1px solid currentColor}.skill-source:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
+.install-skills{display:grid;grid-template-rows:auto 1fr auto;margin-top:24px;color:var(--paper);background:var(--deep);border-left:7px solid var(--gold)}.install-skills header{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 24px;border-bottom:1px solid #ffffff2d}.install-skills header>div{display:grid;gap:7px}.install-skills header span,.install-skills footer{color:var(--gold);font:500 8px var(--font-mono);letter-spacing:.08em}.install-skills header strong{font-size:15px}.install-skills button{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid #ffffff50;color:var(--paper);background:transparent;cursor:pointer}.install-skills button:hover,.install-skills button.copied{color:var(--ink);border-color:var(--gold);background:var(--gold)}.install-skills button i{font-style:normal}.install-skills pre{max-height:360px;margin:0;padding:24px;overflow:auto;white-space:pre-wrap;background:#0b1b27}.install-skills pre code{font:10px/1.7 var(--font-mono)}.install-skills footer{padding:16px 24px;color:#b9c8d1;border-top:1px solid #ffffff2d}.install-skills button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

 /* Copy-ready hands-on lab */
-.hands-on{margin-bottom:130px;padding-top:80px;border-top:1px solid var(--line)}.hands-intro{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:end;margin:45px 0}.hands-intro h2{margin-bottom:0}.hands-intro>div:last-child>p{max-width:650px;margin:0;color:var(--muted);font-size:14px;line-height:1.75}.starter-link{display:inline-block;margin-top:18px;color:var(--blue);font:700 11px 'DM Mono',monospace;text-decoration:none;border-bottom:2px solid var(--gold)}.starter-links{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:18px}.starter-links .starter-link{margin-top:0}.starter-link-group{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline}.starter-link-source{font-weight:500!important;color:var(--muted)!important;border-bottom-color:transparent!important}.verify-card-source{display:block;margin-top:8px;color:#bfccd4;font-size:10px!important;letter-spacing:.05em;text-transform:none;font-weight:500}.verify-card-source span{font-family:'DM Mono',monospace;color:var(--gold)}
-.exercise-brief{display:grid;grid-template-columns:190px 1fr;gap:22px;padding:26px 30px;color:var(--paper);background:var(--deep)}.exercise-brief>span{color:var(--gold);font:500 9px 'DM Mono',monospace;letter-spacing:.09em}.exercise-brief>strong{font-size:clamp(20px,2.6vw,34px);line-height:1.12}.exercise-brief>div{grid-column:2;color:#afbec7;font:500 9px 'DM Mono',monospace;letter-spacing:.05em}.exercise-brief b{margin-left:18px;color:var(--accent)}.exercise-brief b:first-child{margin-left:0}
-.prompt-compare{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:1px;background:var(--line)}.prompt-card{display:grid;grid-template-rows:auto 1fr auto;min-width:0;min-height:600px;color:var(--paper);background:#19364a}.prompt-card.enhanced{background:#596f9a}.prompt-card header{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;border-bottom:1px solid #ffffff32}.prompt-card header>div{display:grid;gap:6px}.prompt-card header span,.prompt-card footer{font:500 8px 'DM Mono',monospace;letter-spacing:.09em}.prompt-card header>div span{color:var(--gold)}.prompt-card header strong{font-size:17px}.prompt-card button{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid #ffffff50;color:var(--paper);background:transparent;cursor:pointer}.prompt-card button:hover,.prompt-card button.copied{color:var(--ink);border-color:var(--gold);background:var(--gold)}.prompt-card button i{font-style:normal}.prompt-card pre{margin:0;padding:25px;overflow:auto;white-space:pre-wrap}.prompt-card pre code{font:11px/1.72 'DM Mono',monospace}.prompt-card footer{padding:17px 22px;color:#bfccd4;border-top:1px solid #ffffff32}.prompt-card.enhanced footer{color:#e5e3ef}.prompt-card button:focus-visible,.starter-link:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
-.comparison-strip{display:grid;grid-template-columns:190px repeat(4,1fr);gap:1px;background:var(--line)}.comparison-strip>*{padding:18px;background:var(--paper)}.comparison-strip>span{color:var(--accent);font:700 9px 'DM Mono',monospace;letter-spacing:.08em}.comparison-strip>div{color:var(--muted);font:500 10px 'DM Mono',monospace}.comparison-strip b{margin-right:8px;color:var(--blue)}.copy-status{min-height:20px;margin:15px 0 0;color:var(--blue);font:600 10px 'DM Mono',monospace;text-align:right}
+.hands-on{margin-bottom:130px;padding-top:80px;border-top:1px solid var(--line)}.hands-intro{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:end;margin:45px 0}.hands-intro h2{margin-bottom:0}.hands-intro>div:last-child>p{max-width:650px;margin:0;color:var(--muted);font-size:14px;line-height:1.75}.starter-link{display:inline-block;margin-top:18px;color:var(--blue);font:700 11px var(--font-mono);text-decoration:none;border-bottom:2px solid var(--gold)}.starter-links{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:18px}.starter-links .starter-link{margin-top:0}.starter-link-group{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline}.starter-link-source{font-weight:500!important;color:var(--muted)!important;border-bottom-color:transparent!important}.verify-card-source{display:block;margin-top:8px;color:#bfccd4;font-size:10px!important;letter-spacing:.05em;text-transform:none;font-weight:500}.verify-card-source span{font-family:var(--font-mono);color:var(--gold)}
+.exercise-brief{display:grid;grid-template-columns:190px 1fr;gap:22px;padding:26px 30px;color:var(--paper);background:var(--deep)}.exercise-brief>span{color:var(--gold);font:500 9px var(--font-mono);letter-spacing:.09em}.exercise-brief>strong{font-size:clamp(20px,2.6vw,34px);line-height:1.12}.exercise-brief>div{grid-column:2;color:#afbec7;font:500 9px var(--font-mono);letter-spacing:.05em}.exercise-brief b{margin-left:18px;color:var(--accent)}.exercise-brief b:first-child{margin-left:0}
+.prompt-compare{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:1px;background:var(--line)}.prompt-card{display:grid;grid-template-rows:auto 1fr auto;min-width:0;min-height:600px;color:var(--paper);background:#19364a}.prompt-card.enhanced{background:#596f9a}.prompt-card header{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;border-bottom:1px solid #ffffff32}.prompt-card header>div{display:grid;gap:6px}.prompt-card header span,.prompt-card footer{font:500 8px var(--font-mono);letter-spacing:.09em}.prompt-card header>div span{color:var(--gold)}.prompt-card header strong{font-size:17px}.prompt-card button{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid #ffffff50;color:var(--paper);background:transparent;cursor:pointer}.prompt-card button:hover,.prompt-card button.copied{color:var(--ink);border-color:var(--gold);background:var(--gold)}.prompt-card button i{font-style:normal}.prompt-card pre{margin:0;padding:25px;overflow:auto;white-space:pre-wrap}.prompt-card pre code{font:11px/1.72 var(--font-mono)}.prompt-card footer{padding:17px 22px;color:#bfccd4;border-top:1px solid #ffffff32}.prompt-card.enhanced footer{color:#e5e3ef}.prompt-card button:focus-visible,.starter-link:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
+.comparison-strip{display:grid;grid-template-columns:190px repeat(4,1fr);gap:1px;background:var(--line)}.comparison-strip>*{padding:18px;background:var(--paper)}.comparison-strip>span{color:var(--accent);font:700 9px var(--font-mono);letter-spacing:.08em}.comparison-strip>div{color:var(--muted);font:500 10px var(--font-mono)}.comparison-strip b{margin-right:8px;color:var(--blue)}.copy-status{min-height:20px;margin:15px 0 0;color:var(--blue);font:600 10px var(--font-mono);text-align:right}
@media(min-width:1600px){.tree-stage{height:390px}.tree-stage svg{height:330px;top:30px}.tree-node.root{top:45px}.tree-node.branch{top:255px}.tree-node{width:190px;padding:17px}.tree-detail{grid-template-columns:.6fr .8fr 1.8fr}.worker-card{min-height:210px;padding:28px}}
@media(min-width:2200px){main{max-width:2880px;padding-inline:clamp(140px,7vw,280px)}.hero{max-width:1420px}.hero h1{font-size:clamp(150px,7vw,220px)}.tree-stage{height:460px}.tree-stage svg{height:380px;top:45px}.tree-node.root{top:65px}.tree-node.branch{top:305px}.tree-node{width:240px;padding:22px}.tree-node strong{font-size:15px}.tree-detail>*{font-size:14px!important}.fleet,.failure-map{margin-bottom:170px}.workflow,.routing,.skills{margin-bottom:180px}}
@media(max-width:1100px){.chapter-links{display:none}.builder-workbench{grid-template-columns:minmax(210px,.65fr) minmax(0,1.35fr)}.builder-artifact{grid-column:1/-1;grid-template-columns:1fr 1fr;grid-template-rows:auto}.builder-artifact .artifact-head{grid-column:1/-1}.artifact-command{align-content:center;border-top:0;border-left:1px solid #344c5d}}
@@ -24,68 +24,374 @@ const skillsHtml = read('skills/index.html');
 const reviewCatalog = read('skills-review/catalog.js');
 const reviewVoteJs = read('skills-review/vote.js');
 const voteService = read('vote-service/main.go');
-for (const url of ['https://code.claude.com/docs/en/sub-agents','https://code.claude.com/docs/en/skills','https://code.claude.com/docs/en/worktrees','https://git-scm.com/docs/git-worktree.html','https://developers.openai.com/codex/skills']) if (!refs.includes(url)) throw new Error(`missing reference ${url}`);
+for (const url of [
+  'https://code.claude.com/docs/en/sub-agents',
+  'https://code.claude.com/docs/en/skills',
+  'https://code.claude.com/docs/en/worktrees',
+  'https://git-scm.com/docs/git-worktree.html',
+  'https://developers.openai.com/codex/skills',
+])
+  if (!refs.includes(url)) throw new Error(`missing reference ${url}`);
 console.log('content verification passed');
-for (const token of ['data-phase="plan"','data-phase="build"','data-phase="review"','data-tree="main"','data-tree="ui"','data-worker="ui"','data-route="plan"','data-model-provider="openai"','data-model-provider="claude"','data-model-provider="gemini"','data-effort="low"','data-effort="medium"','data-effort="high"','data-skill-file="skill"','data-skill-step="observe"','data-skill-step="validate"','data-common-skill="ponytail"','data-common-skill="caveman"','data-common-skill="unlazy"','id="hands-on"','data-copy-target="prompt-install-skills"','data-copy-target="prompt-basic"','data-copy-target="prompt-skills"','hands-on/starter/','additional-reading.md','role="tablist"','<table']) if (!html.includes(token)) throw new Error(`missing content ${token}`);
-for (const token of ['const phases','const handsOnPrompts','const modelGuide','const skillSources','const skillInstallPrompts','addEventListener','render(\'plan\')','renderTree','renderWorker','renderRoute','renderModelProvider','renderEffort','renderSkillFile','renderSkillWorkflow','renderCommonSkill','renderHandsOn','copyPrompt']) if (!js.includes(token)) throw new Error(`missing interaction ${token}`);
-for (const token of ['id="task-list"','id="task-count"']) if (!starterHtml.includes(token)) throw new Error(`missing starter content ${token}`);
-for (const token of ['const tasks','renderTasks()']) if (!starterJs.includes(token)) throw new Error(`missing starter behavior ${token}`);
-for (const token of ['medium.com','anthropic.com/engineering','openai.com/business','git-scm.com/docs/git-worktree']) if (!additional.includes(token)) throw new Error(`missing additional source ${token}`);
-if ((additional.match(/^### \d+\./gm) || []).length < 5) throw new Error('fewer than five additional readings');
-for (const token of ['e7b42dc2d384a702240dea4d52a7bf5530b821b6','6654f6b60cd9d5be8b54c6fafe44346dabeb3b76','53048666b05b4799081517d00e09e0a2dd688678']) if (!skillSources.includes(token) || !js.includes(token)) throw new Error(`missing pinned skill source ${token}`);
-for (const token of ['developers.openai.com/api/docs/guides/latest-model','docs.anthropic.com/en/docs/claude-code/model-config','ai.google.dev/gemini-api/docs/thinking']) if (!modelRouting.includes(token) || !js.includes(token)) throw new Error(`missing model source ${token}`);
+for (const token of [
+  'data-phase="plan"',
+  'data-phase="build"',
+  'data-phase="review"',
+  'data-tree="main"',
+  'data-tree="ui"',
+  'data-worker="ui"',
+  'data-route="plan"',
+  'data-model-provider="openai"',
+  'data-model-provider="claude"',
+  'data-model-provider="gemini"',
+  'data-effort="low"',
+  'data-effort="medium"',
+  'data-effort="high"',
+  'data-skill-file="skill"',
+  'data-skill-step="observe"',
+  'data-skill-step="validate"',
+  'data-common-skill="ponytail"',
+  'data-common-skill="caveman"',
+  'data-common-skill="unlazy"',
+  'id="hands-on"',
+  'data-copy-target="prompt-install-skills"',
+  'data-copy-target="prompt-basic"',
+  'data-copy-target="prompt-skills"',
+  'hands-on/starter/',
+  'additional-reading.md',
+  'role="tablist"',
+  '<table',
+])
+  if (!html.includes(token)) throw new Error(`missing content ${token}`);
+for (const token of [
+  'const phases',
+  'const handsOnPrompts',
+  'const modelGuide',
+  'const skillSources',
+  'const skillInstallPrompts',
+  'addEventListener',
+  "render('plan')",
+  'renderTree',
+  'renderWorker',
+  'renderRoute',
+  'renderModelProvider',
+  'renderEffort',
+  'renderSkillFile',
+  'renderSkillWorkflow',
+  'renderCommonSkill',
+  'renderHandsOn',
+  'copyPrompt',
+])
+  if (!js.includes(token)) throw new Error(`missing interaction ${token}`);
+for (const token of ['id="task-list"', 'id="task-count"'])
+  if (!starterHtml.includes(token)) throw new Error(`missing starter content ${token}`);
+for (const token of ['const tasks', 'renderTasks()'])
+  if (!starterJs.includes(token)) throw new Error(`missing starter behavior ${token}`);
+for (const token of [
+  'medium.com',
+  'anthropic.com/engineering',
+  'openai.com/business',
+  'git-scm.com/docs/git-worktree',
+])
+  if (!additional.includes(token)) throw new Error(`missing additional source ${token}`);
+if ((additional.match(/^### \d+\./gm) || []).length < 5)
+  throw new Error('fewer than five additional readings');
+for (const token of [
+  'e7b42dc2d384a702240dea4d52a7bf5530b821b6',
+  '6654f6b60cd9d5be8b54c6fafe44346dabeb3b76',
+  '53048666b05b4799081517d00e09e0a2dd688678',
+])
+  if (!skillSources.includes(token) || !js.includes(token))
+    throw new Error(`missing pinned skill source ${token}`);
+for (const token of [
+  'developers.openai.com/api/docs/guides/latest-model',
+  'docs.anthropic.com/en/docs/claude-code/model-config',
+  'ai.google.dev/gemini-api/docs/thinking',
+])
+  if (!modelRouting.includes(token) || !js.includes(token))
+    throw new Error(`missing model source ${token}`);
 console.log('interaction verification passed');
-if (html.match(/<(script|link)[^>]+(src|href)="https?:[^"]+"/i)) throw new Error('external runtime dependency found');
+if (html.match(/<(script|link)[^>]+(src|href)="https?:[^"]+"/i))
+  throw new Error('external runtime dependency found');
 console.log('standalone verification passed');
-for (const token of ['id="pipeline"','id="skills"','id="examples"','data-stage="context"','data-stage="cli"','data-stage="commit"','data-stage="review"','gate-discipline','parallel-agents','repo-db','tech-debt','skill-writer','scripts/check-ui-contract.mjs','.husky/pre-commit','.pr-review.json','.agents/skills','netcracker/interview']) if (!rulesHtml.includes(token)) throw new Error(`missing rules content ${token}`);
+for (const token of [
+  'id="pipeline"',
+  'id="skills"',
+  'id="examples"',
+  'data-stage="context"',
+  'data-stage="cli"',
+  'data-stage="commit"',
+  'data-stage="review"',
+  'gate-discipline',
+  'parallel-agents',
+  'repo-db',
+  'tech-debt',
+  'skill-writer',
+  'scripts/check-ui-contract.mjs',
+  '.husky/pre-commit',
+  '.pr-review.json',
+  '.agents/skills',
+  'netcracker/interview',
+])
+  if (!rulesHtml.includes(token)) throw new Error(`missing rules content ${token}`);
 console.log('rules content verification passed');
-for (const token of ['const languageCopy','const stages','const skills','const prompts','renderStage','renderSkill','renderLanguage','copyPrompt','addEventListener']) if (!rulesJs.includes(token)) throw new Error(`missing rules interaction ${token}`);
-for (const token of ['data-lang="en"','data-lang="pt"','data-copy-prompt','aria-live="polite"','role="tablist"']) if (!rulesHtml.includes(token)) throw new Error(`missing rules control ${token}`);
+for (const token of [
+  'const languageCopy',
+  'const stages',
+  'const skills',
+  'const prompts',
+  'renderStage',
+  'renderSkill',
+  'renderLanguage',
+  'copyPrompt',
+  'addEventListener',
+])
+  if (!rulesJs.includes(token)) throw new Error(`missing rules interaction ${token}`);
+for (const token of [
+  'data-lang="en"',
+  'data-lang="pt"',
+  'data-copy-prompt',
+  'aria-live="polite"',
+  'role="tablist"',
+])
+  if (!rulesHtml.includes(token)) throw new Error(`missing rules control ${token}`);
 console.log('rules interaction verification passed');
-if (!html.includes('href="../rules/"')) throw new Error('main presentation does not link to rules page');
-if (!html.includes('href="../skills-review/"')) throw new Error('main presentation does not link to skills review page');
-for (const token of ['../summary/','../models/','../agents/','../skills/','chapter-route']) if (!html.includes(token)) throw new Error(`main presentation missing chapter route ${token}`);
-if (rulesHtml.includes('script src="http') || rulesHtml.includes('rel="stylesheet" href="http')) throw new Error('rules page has an external runtime dependency');
-for (const token of ['@media(min-width:2200px)','@media(max-width:900px)','@media(max-width:600px)','prefers-reduced-motion']) if (!rulesCss.includes(token)) throw new Error(`missing rules responsive contract ${token}`);
+if (!html.includes('href="../rules/"'))
+  throw new Error('main presentation does not link to rules page');
+if (!html.includes('href="../skills-review/"'))
+  throw new Error('main presentation does not link to skills review page');
+for (const token of ['../summary/', '../models/', '../agents/', '../skills/', 'chapter-route'])
+  if (!html.includes(token)) throw new Error(`main presentation missing chapter route ${token}`);
+if (rulesHtml.includes('script src="http') || rulesHtml.includes('rel="stylesheet" href="http'))
+  throw new Error('rules page has an external runtime dependency');
+for (const token of [
+  '@media(min-width:2200px)',
+  '@media(max-width:900px)',
+  '@media(max-width:600px)',
+  'prefers-reduced-motion',
+])
+  if (!rulesCss.includes(token)) throw new Error(`missing rules responsive contract ${token}`);
 console.log('rules standalone verification passed');
-for (const token of ['id="catalog"','id="skill-filter"','id="skill-list"','id="detail"','Preview Markdown','styles.css?v=20260904-vote-widget','change-lens.css?v=20260904-vote-widget','app.js?v=20260904-vote-widget','?author=Name&amp;skill=skill-id&amp;view=improved','SKILLS_REVIEW_VOTE_API']) if (!reviewHtml.includes(token)) throw new Error(`missing review page content ${token}`);
-for (const token of ["from './catalog.js'", "from './files.js'",'function renderList','function renderDetail','selectSkill','packageSummary','markdownHeadings','markdownToc','document.addEventListener(\'keydown\'','loadSelectedFile','schedulePackageSearch','fetchSource','packageSearchText','diffMarkup','diffRows','data-diff','searchParams.set(\'compare\'','markdownMarkup','data-render','preview-markdown','Preview Markdown','View source','FILE PREVIEW','searchParams.set(\'render\'','AUTHOR ·','SKILL ·','function selectFromUrl','function syncUrl','URLSearchParams','navigator.clipboard','document.execCommand','download','data-file','searchParams.set(\'file\'']) if (!reviewJs.includes(token)) throw new Error(`missing review interaction ${token}`);
-for (const token of ['ndo-repro','gfiber-logging','confluence-page','diagram-plantuml','page-reviewer','unslop','spanish-naturalizer','draft-mr','semantic-diff-review','reference.md','files =']) if (!`${reviewFiles}\n${read('skills-review/submitted-files.js')}`.includes(token)) throw new Error(`missing review file manifest ${token}`);
-if ((reviewCatalog.match(/id:'/g) || []).length + (read('skills-review/submitted-catalog.js').match(/id:'/g) || []).length !== 24) throw new Error('review catalog does not cover all submissions');
-if (!reviewCatalog.includes('hardcoded password') || !reviewCatalog.includes('safety-redacted') || !reviewJs.includes('[REDACTED]') || !reviewJs.includes('[REDACTED LOCAL USER]') || !reviewJs.includes('[REDACTED USER]')) throw new Error('review catalog does not record secret safety handling');
+for (const token of [
+  'id="catalog"',
+  'id="skill-filter"',
+  'id="skill-list"',
+  'id="detail"',
+  'Preview Markdown',
+  'styles.css?v=20260904-vote-widget',
+  'change-lens.css?v=20260904-vote-widget',
+  'app.js?v=20260904-vote-widget',
+  '?author=Name&amp;skill=skill-id&amp;view=improved',
+  'SKILLS_REVIEW_VOTE_API',
+])
+  if (!reviewHtml.includes(token)) throw new Error(`missing review page content ${token}`);
+for (const token of [
+  "from './catalog.js'",
+  "from './files.js'",
+  'function renderList',
+  'function renderDetail',
+  'selectSkill',
+  'packageSummary',
+  'markdownHeadings',
+  'markdownToc',
+  "document.addEventListener('keydown'",
+  'loadSelectedFile',
+  'schedulePackageSearch',
+  'fetchSource',
+  'packageSearchText',
+  'diffMarkup',
+  'diffRows',
+  'data-diff',
+  "searchParams.set('compare'",
+  'markdownMarkup',
+  'data-render',
+  'preview-markdown',
+  'Preview Markdown',
+  'View source',
+  'FILE PREVIEW',
+  "searchParams.set('render'",
+  'AUTHOR ·',
+  'SKILL ·',
+  'function selectFromUrl',
+  'function syncUrl',
+  'URLSearchParams',
+  'navigator.clipboard',
+  'document.execCommand',
+  'download',
+  'data-file',
+  "searchParams.set('file'",
+])
+  if (!reviewJs.includes(token)) throw new Error(`missing review interaction ${token}`);
+for (const token of [
+  'ndo-repro',
+  'gfiber-logging',
+  'confluence-page',
+  'diagram-plantuml',
+  'page-reviewer',
+  'unslop',
+  'spanish-naturalizer',
+  'draft-mr',
+  'semantic-diff-review',
+  'reference.md',
+  'files =',
+])
+  if (!`${reviewFiles}\n${read('skills-review/submitted-files.js')}`.includes(token))
+    throw new Error(`missing review file manifest ${token}`);
+if (
+  (reviewCatalog.match(/id:'/g) || []).length +
+    (read('skills-review/submitted-catalog.js').match(/id:'/g) || []).length !==
+  24
+)
+  throw new Error('review catalog does not cover all submissions');
+if (
+  !reviewCatalog.includes('hardcoded password') ||
+  !reviewCatalog.includes('safety-redacted') ||
+  !reviewJs.includes('[REDACTED]') ||
+  !reviewJs.includes('[REDACTED LOCAL USER]') ||
+  !reviewJs.includes('[REDACTED USER]')
+)
+  throw new Error('review catalog does not record secret safety handling');
 console.log('skills review verification passed');
-for (const page of [summaryHtml, modelsHtml, agentsHtml, skillsHtml]) if (!page.includes('../chapters.css') || !page.includes('ROUTE MAP')) throw new Error('chapter page missing shared navigation');
-for (const token of ['--ink','@media(max-width:800px)','@media(max-width:520px)']) if (!chaptersCss.includes(token)) throw new Error(`missing chapter responsive contract ${token}`);
+for (const page of [summaryHtml, modelsHtml, agentsHtml, skillsHtml])
+  if (!page.includes('../chapters.css') || !page.includes('ROUTE MAP'))
+    throw new Error('chapter page missing shared navigation');
+for (const token of ['--ink', '@media(max-width:800px)', '@media(max-width:520px)'])
+  if (!chaptersCss.includes(token)) throw new Error(`missing chapter responsive contract ${token}`);
 console.log('chapter route verification passed');
-for (const token of ['The short route','full-guide/','models/','agents/','skills/','rules/','hands-on/starter/','skills-review/']) if (!landingHtml.includes(token)) throw new Error(`landing page missing ${token}`);
-if (landingHtml.includes('app.js')) throw new Error('landing page should remain a fast, static route map');
+for (const token of [
+  'The short route',
+  'full-guide/',
+  'models/',
+  'agents/',
+  'skills/',
+  'rules/',
+  'hands-on/starter/',
+  'skills-review/',
+])
+  if (!landingHtml.includes(token)) throw new Error(`landing page missing ${token}`);
+if (landingHtml.includes('app.js'))
+  throw new Error('landing page should remain a fast, static route map');
 console.log('landing route verification passed');
-for (const token of ['data-package-file="skill"','data-package-file="references"','data-package-file="scripts"','data-package-file="assets"','id="package-preview"','script src="app.js"']) if (!skillsHtml.includes(token)) throw new Error(`skills anatomy missing ${token}`);
+for (const token of [
+  'data-package-file="skill"',
+  'data-package-file="references"',
+  'data-package-file="scripts"',
+  'data-package-file="assets"',
+  'id="package-preview"',
+  'script src="app.js"',
+])
+  if (!skillsHtml.includes(token)) throw new Error(`skills anatomy missing ${token}`);
 const skillsApp = read('skills/app.js');
 const skillsCss = read('skills/styles.css');
-for (const token of ['const packageFiles','function renderPackage','addEventListener','renderPackage(\'skill\')']) if (!skillsApp.includes(token)) throw new Error(`skills anatomy interaction missing ${token}`);
-for (const token of ['grid-template-columns:minmax(190px','overflow-wrap:anywhere','@media(max-width:800px)','prefers-reduced-motion']) if (!skillsCss.includes(token)) throw new Error(`skills anatomy responsive contract missing ${token}`);
+for (const token of [
+  'const packageFiles',
+  'function renderPackage',
+  'addEventListener',
+  "renderPackage('skill')",
+])
+  if (!skillsApp.includes(token)) throw new Error(`skills anatomy interaction missing ${token}`);
+for (const token of [
+  'grid-template-columns:minmax(190px',
+  'overflow-wrap:anywhere',
+  '@media(max-width:800px)',
+  'prefers-reduced-motion',
+])
+  if (!skillsCss.includes(token))
+    throw new Error(`skills anatomy responsive contract missing ${token}`);
 console.log('skills anatomy verification passed');
 console.log('presentation verification passed');
 const legacyName = String.fromCharCode(80, 101, 100, 114, 111, 32, 65, 114, 97, 110, 104, 97);
 const legacyHandle = legacyName.toLowerCase().replace(' ', '.');
-for (const path of ['submitted-skills/Anonymous Operational Submission/skills/ndo-repro/SKILL.md','submitted-skills/Anonymous Operational Submission/skills/ndo-repro/envs.tsv','submitted-skills/Anonymous Operational Submission/skills/ndo-repro/lib/env.sh','submitted-skills/Anonymous Operational Submission/skills/ndo-repro/ndo-api.sh','submitted-skills/Anonymous Operational Submission/skills/ndo-repro/ndo-ship.sh','submitted-skills/Anonymous Operational Submission/skills/ndo-repro/reference/bom-Dockerfile_local.example','submitted-skills/Anonymous Operational Submission/skills/ndo-repro/reference/dockerfile-local.md','skill-reviews/improved/ndo-repro/SKILL.md']) {
+for (const path of [
+  'submitted-skills/Anonymous Operational Submission/skills/ndo-repro/SKILL.md',
+  'submitted-skills/Anonymous Operational Submission/skills/ndo-repro/envs.tsv',
+  'submitted-skills/Anonymous Operational Submission/skills/ndo-repro/lib/env.sh',
+  'submitted-skills/Anonymous Operational Submission/skills/ndo-repro/ndo-api.sh',
+  'submitted-skills/Anonymous Operational Submission/skills/ndo-repro/ndo-ship.sh',
+  'submitted-skills/Anonymous Operational Submission/skills/ndo-repro/reference/bom-Dockerfile_local.example',
+  'submitted-skills/Anonymous Operational Submission/skills/ndo-repro/reference/dockerfile-local.md',
+  'skill-reviews/improved/ndo-repro/SKILL.md',
+]) {
  const source = read(path);
-  if (new RegExp(`${legacyName}|${legacyHandle}|https?:\\/\\/|git\\.netcracker\\.com|artifactorycn|managed\\.netcracker\\.cloud`, 'i').test(source)) throw new Error(`operational submission privacy leak in ${path}`);
+  if (
+    new RegExp(
+      `${legacyName}|${legacyHandle}|https?:\\/\\/|git\\.netcracker\\.com|artifactorycn|managed\\.netcracker\\.cloud`,
+      'i',
+    ).test(source)
+  )
+    throw new Error(`operational submission privacy leak in ${path}`);
 }
-for (const source of [reviewCatalog, reviewFiles, reviewJs]) if (source.includes(legacyName) || source.includes(legacyName.replace(' ', '%20'))) throw new Error('operational submission identity remains in review desk source');
-if (!reviewFiles.includes('Anonymous%20Operational%20Submission') || !reviewJs.includes("entry.id === 'ndo-repro'")) throw new Error('operational submission redaction contract missing');
+for (const source of [reviewCatalog, reviewFiles, reviewJs])
+  if (source.includes(legacyName) || source.includes(legacyName.replace(' ', '%20')))
+    throw new Error('operational submission identity remains in review desk source');
+if (
+  !reviewFiles.includes('Anonymous%20Operational%20Submission') ||
+  !reviewJs.includes("entry.id === 'ndo-repro'")
+)
+  throw new Error('operational submission redaction contract missing');
 console.log('review privacy verification passed');
-for (const token of ['currentContent','unchangedDraft','state.preview = button.dataset.preview','state.file = available.find','loadSelectedFile']) if (!reviewJs.includes(token)) throw new Error(`review file-mode contract missing ${token}`);
-if (reviewJs.includes("state.preview = 'original'; syncUrl(); renderDetail(); loadSelectedFile();")) throw new Error('file selection still resets improved mode');
+for (const token of [
+  'currentContent',
+  'unchangedDraft',
+  'state.preview = button.dataset.preview',
+  'state.file = available.find',
+  'loadSelectedFile',
+])
+  if (!reviewJs.includes(token)) throw new Error(`review file-mode contract missing ${token}`);
+if (reviewJs.includes("state.preview = 'original'; syncUrl(); renderDetail(); loadSelectedFile();"))
+  throw new Error('file selection still resets improved mode');
 console.log('review file-mode verification passed');
-for (const token of ['const changeRows','function lensMarkup','data-lens','CHANGE LENS','What changed — and why.']) if (!reviewJs.includes(token)) throw new Error(`review change-lens contract missing ${token}`);
-for (const token of ['.change-lens','.change-rows','.skill-diff','.diff-lines','@media(max-width:620px)','prefers-reduced-motion']) if (!reviewLensCss.includes(token)) throw new Error(`review change-lens CSS missing ${token}`);
+for (const token of [
+  'const changeRows',
+  'function lensMarkup',
+  'data-lens',
+  'CHANGE LENS',
+  'What changed — and why.',
+])
+  if (!reviewJs.includes(token)) throw new Error(`review change-lens contract missing ${token}`);
+for (const token of [
+  '.change-lens',
+  '.change-rows',
+  '.skill-diff',
+  '.diff-lines',
+  '@media(max-width:620px)',
+  'prefers-reduced-motion',
+])
+  if (!reviewLensCss.includes(token)) throw new Error(`review change-lens CSS missing ${token}`);
 console.log('review change-lens verification passed');
-for (const token of ['.markdown-preview','max-height:540px','.markdown-table-wrap','.markdown-frontmatter','.markdown-toc','.preview-title','.preview-markdown','grid-template-columns:minmax(0,1fr)','height:120px','-webkit-line-clamp:2']) if (!read('skills-review/styles.css').includes(token)) throw new Error(`review markdown preview contract missing ${token}`);
+for (const token of [
+  '.markdown-preview',
+  'max-height:540px',
+  '.markdown-table-wrap',
+  '.markdown-frontmatter',
+  '.markdown-toc',
+  '.preview-title',
+  '.preview-markdown',
+  'grid-template-columns:minmax(0,1fr)',
+  'height:120px',
+  '-webkit-line-clamp:2',
+])
+  if (!read('skills-review/styles.css').includes(token))
+    throw new Error(`review markdown preview contract missing ${token}`);
 console.log('review markdown preview verification passed');
-for (const token of ["from './vote.js'","renderVoteWidget($('#vote-widget'"]) if (!reviewJs.includes(token)) throw new Error(`review vote widget wiring missing ${token}`);
-for (const token of ['id="vote-widget"','function renderVoteWidget','X-Voter-Id','/api/votes','Voting is offline']) if (!reviewVoteJs.includes(token) && !reviewJs.includes(token)) throw new Error(`review vote widget contract missing ${token}`);
-for (const token of ['.vote-widget','.vote-buttons','[aria-pressed="true"]']) if (!read('skills-review/styles.css').includes(token)) throw new Error(`review vote widget CSS missing ${token}`);
-if (!voteService.includes('X-Forwarded-For') || !voteService.includes('one active vote per skill') && !voteService.includes('at most one active vote')) throw new Error('vote-service missing IP-based one-vote-per-source contract');
+for (const token of ["from './vote.js'", "renderVoteWidget($('#vote-widget'"])
+  if (!reviewJs.includes(token)) throw new Error(`review vote widget wiring missing ${token}`);
+for (const token of [
+  'id="vote-widget"',
+  'function renderVoteWidget',
+  'X-Voter-Id',
+  '/api/votes',
+  'Voting is offline',
+])
+  if (!reviewVoteJs.includes(token) && !reviewJs.includes(token))
+    throw new Error(`review vote widget contract missing ${token}`);
+for (const token of ['.vote-widget', '.vote-buttons', '[aria-pressed="true"]'])
+  if (!read('skills-review/styles.css').includes(token))
+    throw new Error(`review vote widget CSS missing ${token}`);
+if (
+  !voteService.includes('X-Forwarded-For') ||
+  (!voteService.includes('one active vote per skill') &&
+    !voteService.includes('at most one active vote'))
+)
+  throw new Error('vote-service missing IP-based one-vote-per-source contract');
 console.log('review vote widget verification passed');
@@ -1,4 +1,4 @@
-.change-lens{border:1px solid var(--ink);background:#123042;color:var(--paper);animation:lens-enter .28s ease both}.change-lens>header{display:flex;justify-content:space-between;gap:20px;align-items:start;padding:22px 24px;border-bottom:1px solid #466274}.change-lens span{color:var(--gold);font:700 10px ui-monospace,monospace;letter-spacing:.1em}.change-lens h3{margin:7px 0 0;font-size:clamp(24px,3vw,40px);line-height:1.02;letter-spacing:-.05em}.change-lens>header button{padding:9px 11px;border:1px solid #557080;color:var(--paper);background:transparent;cursor:pointer;font:700 10px ui-monospace,monospace}.change-lens>header button:hover{color:var(--ink);background:var(--gold)}.change-lens>p{max-width:67ch;margin:0;padding:19px 24px;color:#c6d2d7}.change-rows{display:grid;gap:1px;background:#466274}.change-rows article{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,1fr) minmax(220px,.85fr);gap:1px;background:#466274}.change-rows article>*{min-width:0;margin:0;padding:17px;background:#173b4f}.change-rows article>span{color:var(--gold);font:700 10px/1.4 ui-monospace,monospace}.change-rows b{font:700 10px ui-monospace,monospace;letter-spacing:.07em;text-transform:uppercase}.change-rows div:first-of-type b{color:#e89a8e}.change-rows div:nth-of-type(2) b{color:#9bcba7}.change-rows aside{background:#1d455b}.change-rows aside b{color:var(--gold)}.change-rows p{margin:7px 0 0;color:#d4dfe3;font-size:12px;line-height:1.55}.preview header [data-lens]{color:var(--gold);border-color:var(--gold)}@keyframes lens-enter{from{opacity:.15;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(max-width:1000px){.change-rows article{grid-template-columns:100px 1fr 1fr}.change-rows aside{grid-column:2/-1}}@media(max-width:620px){.change-lens>header{display:block}.change-lens>header button{margin-top:14px}.change-rows article{grid-template-columns:1fr}.change-rows article>span{padding-bottom:6px}.change-rows aside{grid-column:auto}.change-lens>p{padding:17px}.change-lens>header{padding:18px}.change-rows p{font-size:13px}}@media(prefers-reduced-motion:reduce){.change-lens{animation:none}}
+.change-lens{border:1px solid var(--ink);background:#123042;color:var(--paper);animation:lens-enter .28s ease both}.change-lens>header{display:flex;justify-content:space-between;gap:20px;align-items:start;padding:22px 24px;border-bottom:1px solid #466274}.change-lens span{color:var(--gold);font:700 10px var(--font-mono);letter-spacing:.1em}.change-lens h3{margin:7px 0 0;font-size:clamp(24px,3vw,40px);line-height:1.02;letter-spacing:-.05em}.change-lens>header button{padding:9px 11px;border:1px solid #557080;color:var(--paper);background:transparent;cursor:pointer;font:700 10px var(--font-mono)}.change-lens>header button:hover{color:var(--ink);background:var(--gold)}.change-lens>p{max-width:67ch;margin:0;padding:19px 24px;color:#c6d2d7}.change-rows{display:grid;gap:1px;background:#466274}.change-rows article{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,1fr) minmax(220px,.85fr);gap:1px;background:#466274}.change-rows article>*{min-width:0;margin:0;padding:17px;background:#173b4f}.change-rows article>span{color:var(--gold);font:700 10px/1.4 var(--font-mono)}.change-rows b{font:700 10px var(--font-mono);letter-spacing:.07em;text-transform:uppercase}.change-rows div:first-of-type b{color:#e89a8e}.change-rows div:nth-of-type(2) b{color:#9bcba7}.change-rows aside{background:#1d455b}.change-rows aside b{color:var(--gold)}.change-rows p{margin:7px 0 0;color:#d4dfe3;font-size:12px;line-height:1.55}.preview header [data-lens]{color:var(--gold);border-color:var(--gold)}@keyframes lens-enter{from{opacity:.15;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(max-width:1000px){.change-rows article{grid-template-columns:100px 1fr 1fr}.change-rows aside{grid-column:2/-1}}@media(max-width:620px){.change-lens>header{display:block}.change-lens>header button{margin-top:14px}.change-rows article{grid-template-columns:1fr}.change-rows article>span{padding-bottom:6px}.change-rows aside{grid-column:auto}.change-lens>p{padding:17px}.change-lens>header{padding:18px}.change-rows p{font-size:13px}}@media(prefers-reduced-motion:reduce){.change-lens{animation:none}}

 /* A compact, scrollable comparison keeps long skill revisions reviewable. */
-.skill-diff{border:1px solid var(--ink);background:#102b3a;color:var(--paper);animation:lens-enter .28s ease both}.skill-diff>header{display:flex;justify-content:space-between;gap:20px;align-items:start;padding:22px 24px;border-bottom:1px solid #466274}.skill-diff span{color:var(--gold);font:700 10px ui-monospace,monospace;letter-spacing:.1em}.skill-diff h3{margin:7px 0 0;font-size:clamp(24px,3vw,40px);line-height:1.02;letter-spacing:-.05em}.skill-diff>header button{padding:9px 11px;border:1px solid #557080;color:var(--paper);background:transparent;cursor:pointer;font:700 10px ui-monospace,monospace}.skill-diff>header button:hover{color:var(--ink);background:var(--gold)}.skill-diff>p{margin:0;padding:17px 24px;color:#c6d2d7}.diff-lines{max-height:540px;overflow:auto;border-top:1px solid #466274;font:12px/1.55 ui-monospace,monospace}.diff-lines p{display:grid;grid-template-columns:42px minmax(0,1fr);gap:11px;margin:0;padding:4px 16px;white-space:pre-wrap;overflow-wrap:anywhere}.diff-lines span{color:#91aab7}.diff-lines .added{color:#d5f1d6;background:#1a4b42}.diff-lines .added span{color:#a9e3ae}.diff-lines .removed{color:#ffd7d0;background:#572f32}.diff-lines .removed span{color:#ffb5a8}.preview header [data-diff]{color:#c6d2d7;border-color:#557080}@media(max-width:620px){.skill-diff>header{display:block}.skill-diff>header button{margin-top:14px}.diff-lines p{grid-template-columns:30px minmax(0,1fr);padding:4px 12px}}@media(prefers-reduced-motion:reduce){.skill-diff{animation:none}}
+.skill-diff{border:1px solid var(--ink);background:#102b3a;color:var(--paper);animation:lens-enter .28s ease both}.skill-diff>header{display:flex;justify-content:space-between;gap:20px;align-items:start;padding:22px 24px;border-bottom:1px solid #466274}.skill-diff span{color:var(--gold);font:700 10px var(--font-mono);letter-spacing:.1em}.skill-diff h3{margin:7px 0 0;font-size:clamp(24px,3vw,40px);line-height:1.02;letter-spacing:-.05em}.skill-diff>header button{padding:9px 11px;border:1px solid #557080;color:var(--paper);background:transparent;cursor:pointer;font:700 10px var(--font-mono)}.skill-diff>header button:hover{color:var(--ink);background:var(--gold)}.skill-diff>p{margin:0;padding:17px 24px;color:#c6d2d7}.diff-lines{max-height:540px;overflow:auto;border-top:1px solid #466274;font:12px/1.55 var(--font-mono)}.diff-lines p{display:grid;grid-template-columns:42px minmax(0,1fr);gap:11px;margin:0;padding:4px 16px;white-space:pre-wrap;overflow-wrap:anywhere}.diff-lines span{color:#91aab7}.diff-lines .added{color:#d5f1d6;background:#1a4b42}.diff-lines .added span{color:#a9e3ae}.diff-lines .removed{color:#ffd7d0;background:#572f32}.diff-lines .removed span{color:#ffb5a8}.preview header [data-diff]{color:#c6d2d7;border-color:#557080}@media(max-width:620px){.skill-diff>header{display:block}.skill-diff>header button{margin-top:14px}.diff-lines p{grid-template-columns:30px minmax(0,1fr);padding:4px 12px}}@media(prefers-reduced-motion:reduce){.skill-diff{animation:none}}
@@ -1 +1 @@
-.top > *{min-width:0}.top a{overflow-wrap:anywhere}.package-hint{max-width:27ch;color:var(--muted)}.package-workbench{display:grid;grid-template-columns:minmax(190px,.85fr) minmax(0,1.3fr);min-width:0;background:var(--ink);border:1px solid var(--ink);box-shadow:10px 10px 0 color-mix(in srgb,var(--gold) 55%,transparent)}.package-tree{padding:22px 16px;border-right:1px solid #426070;min-width:0}.package-tree>p,.package-preview>span{margin:0 0 14px;color:var(--gold);font:700 11px/1.35 ui-monospace,monospace;letter-spacing:.1em}.package-tree button{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;width:100%;padding:12px 8px;border:0;border-left:2px solid transparent;background:transparent;color:#d6e1e4;text-align:left;cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .2s ease}.package-tree button:hover,.package-tree button:focus-visible,.package-tree button.active{border-left-color:var(--gold);background:#1f3a4b;outline:0}.package-tree button:hover{transform:translateX(3px)}.package-tree code{min-width:0;overflow-wrap:anywhere;font:700 13px/1.4 ui-monospace,monospace}.package-tree small{color:#aebfc7;font:11px/1.25 Arial,sans-serif;text-align:right}.package-preview{min-width:0;padding:26px;background:#173245;color:var(--paper)}.package-preview h3{margin:0 0 8px;font-size:clamp(24px,3vw,38px);line-height:1.02;letter-spacing:-.045em}.package-preview p{max-width:52ch;margin:0;color:#d6e1e4}.package-preview pre{max-width:100%;margin:20px 0 0;padding:15px;overflow:auto;border:1px solid #466274;background:#102837;color:#d6e1e4;font:12px/1.55 ui-monospace,monospace}.package-preview.is-swapping{animation:package-preview-in .34s ease both}@keyframes package-preview-in{from{opacity:.25;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}.links a{transition:background .2s ease,color .2s ease,transform .2s ease}.links a:hover{transform:translateY(-2px)}@media(max-width:800px){.package-workbench{grid-template-columns:1fr}.package-tree{border-right:0;border-bottom:1px solid #426070}.package-preview{padding:22px}}@media(max-width:520px){.top{gap:12px}.top a{font-size:10px}.package-tree{padding:18px 10px}.package-tree button{padding:12px 6px}.package-tree small{display:none}.package-preview{padding:18px}.package-preview pre{font-size:11px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
+.top > *{min-width:0}.top a{overflow-wrap:anywhere}.package-hint{max-width:27ch;color:var(--muted)}.package-workbench{display:grid;grid-template-columns:minmax(190px,.85fr) minmax(0,1.3fr);min-width:0;background:var(--ink);border:1px solid var(--ink);box-shadow:10px 10px 0 color-mix(in srgb,var(--gold) 55%,transparent)}.package-tree{padding:22px 16px;border-right:1px solid #426070;min-width:0}.package-tree>p,.package-preview>span{margin:0 0 14px;color:var(--gold);font:700 11px/1.35 var(--font-mono);letter-spacing:.1em}.package-tree button{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;width:100%;padding:12px 8px;border:0;border-left:2px solid transparent;background:transparent;color:#d6e1e4;text-align:left;cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .2s ease}.package-tree button:hover,.package-tree button:focus-visible,.package-tree button.active{border-left-color:var(--gold);background:#1f3a4b;outline:0}.package-tree button:hover{transform:translateX(3px)}.package-tree code{min-width:0;overflow-wrap:anywhere;font:700 13px/1.4 var(--font-mono)}.package-tree small{color:#aebfc7;font:11px/1.25 var(--font-sans);text-align:right}.package-preview{min-width:0;padding:26px;background:#173245;color:var(--paper)}.package-preview h3{margin:0 0 8px;font-size:clamp(24px,3vw,38px);line-height:1.02;letter-spacing:-.045em}.package-preview p{max-width:52ch;margin:0;color:#d6e1e4}.package-preview pre{max-width:100%;margin:20px 0 0;padding:15px;overflow:auto;border:1px solid #466274;background:#102837;color:#d6e1e4;font:12px/1.55 var(--font-mono)}.package-preview.is-swapping{animation:package-preview-in .34s ease both}@keyframes package-preview-in{from{opacity:.25;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}.links a{transition:background .2s ease,color .2s ease,transform .2s ease}.links a:hover{transform:translateY(-2px)}@media(max-width:800px){.package-workbench{grid-template-columns:1fr}.package-tree{border-right:0;border-bottom:1px solid #426070}.package-preview{padding:22px}}@media(max-width:520px){.top{gap:12px}.top a{font-size:10px}.package-tree{padding:18px 10px}.package-tree button{padding:12px 6px}.package-tree small{display:none}.package-preview{padding:18px}.package-preview pre{font-size:11px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@@ -9,22 +9,24 @@
 // hairlines between worker cards; the parent background is an off-token seam
 // colour marked inline with `token-gap`.

+type Localized = { en: string; pt: string };
+
 interface Worker {
  /** Used as the `data-worker` hook and the key in the source. */
  id: string;
  /** Short label rendered uppercase, e.g. "UI". */
-  label: string;
+  label: string | Localized;
  /** Body copy describing the worker's remit. */
-  strong: string;
+  strong: string | Localized;
  /** Path label, e.g. "agent/ui". */
  code: string;
 }

 interface Props {
  orchestrator: {
-    eyebrow: string;
+    eyebrow: string | Localized;
    /** May contain inline `<br>`; rendered with `set:html`. */
-    title: string;
+    title: string | Localized;
    code: string;
  };
  workers: Worker[];
@@ -36,8 +38,32 @@ const { orchestrator, workers, initial = workers[0]?.id } = Astro.props;

 <div class="fleet-grid">
  <article class="captain">
-    <span class="captain-eyebrow">{orchestrator.eyebrow}</span>
+    <span class="captain-eyebrow">
+      {
+        typeof orchestrator.eyebrow === 'string' ? (
+          orchestrator.eyebrow
+        ) : (
+          <>
+            <>
+              <span data-language-content="en">{orchestrator.eyebrow.en}</span>
+              <span data-language-content="pt" hidden>
+                {orchestrator.eyebrow.pt}
+              </span>
+            </>
+          </>
+        )
+      }
+    </span>
+    {
+      typeof orchestrator.title === 'string' ? (
        <h2 set:html={orchestrator.title} />
+      ) : (
+        <>
+          <h2 data-language-content="en" set:html={orchestrator.title.en} />
+          <h2 data-language-content="pt" hidden set:html={orchestrator.title.pt} />
+        </>
+      )
+    }
    <code>{orchestrator.code}</code>
  </article>
  <div class="arrow" aria-hidden="true">→</div>
@@ -49,8 +75,30 @@ const { orchestrator, workers, initial = workers[0]?.id } = Astro.props;
          data-worker={worker.id}
          aria-pressed={worker.id === initial}
        >
-          <span>{worker.label}</span>
-          <strong>{worker.strong}</strong>
+          <span>
+            {typeof worker.label === 'string' ? (
+              worker.label
+            ) : (
+              <>
+                <span data-language-content="en">{worker.label.en}</span>
+                <span data-language-content="pt" hidden>
+                  {worker.label.pt}
+                </span>
+              </>
+            )}
+          </span>
+          <strong>
+            {typeof worker.strong === 'string' ? (
+              worker.strong
+            ) : (
+              <>
+                <span data-language-content="en">{worker.strong.en}</span>
+                <span data-language-content="pt" hidden>
+                  {worker.strong.pt}
+                </span>
+              </>
+            )}
+          </strong>
          <code>{worker.code}</code>
        </button>
      ))
@@ -7,18 +7,20 @@
 // muted body) and lives here so the next page that needs it gets the same
 // beat for free.

+type Localized = { en: string; pt: string };
+
 interface Row {
  /** The package name, rendered as a `<th>` (column 1). */
-  package: string;
+  package: string | Localized;
  /** What the package contains (column 2). */
-  contains: string;
+  contains: string | Localized;
  /** Why this matters (column 3). */
-  why: string;
+  why: string | Localized;
 }

 interface Props {
  /** Column headers in render order. */
-  columns: [string, string, string];
+  columns: [string | Localized, string | Localized, string | Localized];
  rows: Row[];
 }

@@ -28,18 +30,96 @@ const { columns, rows } = Astro.props;
 <table class="handoff-table">
  <thead>
    <tr>
-      <th>{columns[0]}</th>
-      <th>{columns[1]}</th>
-      <th>{columns[2]}</th>
+      <th>
+        {
+          typeof columns[0] === 'string' ? (
+            columns[0]
+          ) : (
+            <>
+              <>
+                <span data-language-content="en">{columns[0].en}</span>
+                <span data-language-content="pt" hidden>
+                  {columns[0].pt}
+                </span>
+              </>
+            </>
+          )
+        }
+      </th>
+      <th>
+        {
+          typeof columns[1] === 'string' ? (
+            columns[1]
+          ) : (
+            <>
+              <>
+                <span data-language-content="en">{columns[1].en}</span>
+                <span data-language-content="pt" hidden>
+                  {columns[1].pt}
+                </span>
+              </>
+            </>
+          )
+        }
+      </th>
+      <th>
+        {
+          typeof columns[2] === 'string' ? (
+            columns[2]
+          ) : (
+            <>
+              <>
+                <span data-language-content="en">{columns[2].en}</span>
+                <span data-language-content="pt" hidden>
+                  {columns[2].pt}
+                </span>
+              </>
+            </>
+          )
+        }
+      </th>
    </tr>
  </thead>
  <tbody>
    {
      rows.map((row) => (
        <tr>
-          <th scope="row">{row.package}</th>
-          <td>{row.contains}</td>
-          <td>{row.why}</td>
+          <th scope="row">
+            {typeof row.package === 'string' ? (
+              row.package
+            ) : (
+              <>
+                <span data-language-content="en">{row.package.en}</span>
+                <span data-language-content="pt" hidden>
+                  {row.package.pt}
+                </span>
+              </>
+            )}
+          </th>
+          <td>
+            {typeof row.contains === 'string' ? (
+              row.contains
+            ) : (
+              <>
+                <span data-language-content="en">{row.contains.en}</span>
+                <span data-language-content="pt" hidden>
+                  {row.contains.pt}
+                </span>
+              </>
+            )}
+          </td>
+          <td>
+            {typeof row.why === 'string' ? (
+              row.why
+            ) : (
+              <>
+                <span data-language-content="en">{row.why.en}</span>
+                <span data-language-content="pt" hidden>
+                  {row.why.pt}
+                </span>
+              </>
+            )}
+          </td>
        </tr>
      ))
    }
@@ -8,18 +8,20 @@
 //
 // Every `data-phase` value is asserted by `scripts/verify.mjs`.

+type Localized = { en: string; pt: string };
+
 export type PhaseId = 'plan' | 'build' | 'review';

 interface Phase {
  id: PhaseId;
  /** Two-letter label rendered in the tab, e.g. "PLAN". */
-  label: string;
+  label: string | Localized;
  /** Numeric prefix, e.g. "01". */
  number: string;
-  title: string;
-  body: string;
+  title: string | Localized;
+  body: string | Localized;
  /** Headline + small caption shown above the panel title. */
-  meta: { deliverable: string; gate: string };
+  meta: { deliverable: string | Localized; gate: string | Localized };
  /** Code-line evidence shown at the bottom of the panel. */
  evidence: string;
 }
@@ -43,7 +45,17 @@ const active = phases.find((phase) => phase.id === initial) ?? phases[0];
        role="tab"
        aria-selected={phase.id === initial}
      >
-        <b>{phase.number}</b> {phase.label}
+        <b>{phase.number}</b>{' '}
+        {typeof phase.label === 'string' ? (
+          phase.label
+        ) : (
+          <>
+            <span data-language-content="en">{phase.label.en}</span>
+            <span data-language-content="pt" hidden>
+              {phase.label.pt}
+            </span>
+          </>
+        )}
      </button>
    ))
  }
@@ -51,11 +63,71 @@ const active = phases.find((phase) => phase.id === initial) ?? phases[0];

 <article class="phase-panel" id="phase-panel" aria-live="polite">
  <div class="phase-meta">
-    <span>{active.meta.deliverable}</span>
-    <small>{active.meta.gate}</small>
+    <span>
+      {
+        typeof active.meta.deliverable === 'string' ? (
+          active.meta.deliverable
+        ) : (
+          <>
+            <>
+              <span data-language-content="en">{active.meta.deliverable.en}</span>
+              <span data-language-content="pt" hidden>
+                {active.meta.deliverable.pt}
+              </span>
+            </>
+          </>
+        )
+      }
+    </span>
+    <small>
+      {
+        typeof active.meta.gate === 'string' ? (
+          active.meta.gate
+        ) : (
+          <>
+            <>
+              <span data-language-content="en">{active.meta.gate.en}</span>
+              <span data-language-content="pt" hidden>
+                {active.meta.gate.pt}
+              </span>
+            </>
+          </>
+        )
+      }
+    </small>
  </div>
-  <h3>{active.title}</h3>
-  <p>{active.body}</p>
+  <h3>
+    {
+      typeof active.title === 'string' ? (
+        active.title
+      ) : (
+        <>
+          <>
+            <span data-language-content="en">{active.title.en}</span>
+            <span data-language-content="pt" hidden>
+              {active.title.pt}
+            </span>
+          </>
+        </>
+      )
+    }
+  </h3>
+  <p>
+    {
+      typeof active.body === 'string' ? (
+        active.body
+      ) : (
+        <>
+          <>
+            <span data-language-content="en">{active.body.en}</span>
+            <span data-language-content="pt" hidden>
+              {active.body.pt}
+            </span>
+          </>
+        </>
+      )
+    }
+  </p>
  <code>{active.evidence}</code>
 </article>

@@ -6,29 +6,79 @@
 // renders the column header + the four rows; task 15 will hydrate the
 // "route detail" panel to the right.

+type Localized = { en: string; pt: string };
+
 interface Route {
  id: 'plan' | 'build' | 'explore' | 'review' | string;
  /** Strong label, e.g. "Plan". */
-  strong: string;
+  strong: string | Localized;
  /** Profile descriptor, e.g. "strong / broad". */
-  profile: string;
+  profile: string | Localized;
  /** Prompt shape copy. */
-  prompt: string;
+  prompt: string | Localized;
 }

 interface Props {
  routes: Route[];
  initial?: string;
+  headWork?: string | Localized;
+  headProfile?: string | Localized;
+  headPromptShape?: string | Localized;
 }

-const { routes, initial = routes[0]?.id ?? 'plan' } = Astro.props;
+const {
+  routes,
+  initial = routes[0]?.id ?? 'plan',
+  headWork = 'Work',
+  headProfile = 'Profile',
+  headPromptShape = 'Prompt shape',
+} = Astro.props;
 ---

 <div class="route-table">
  <div class="head">
-    <span>Work</span>
-    <span>Profile</span>
-    <span>Prompt shape</span>
+    <span>
+      {
+        typeof headWork === 'string' ? (
+          headWork
+        ) : (
+          <>
+            <span data-language-content="en">{headWork.en}</span>
+            <span data-language-content="pt" hidden>
+              {headWork.pt}
+            </span>
+          </>
+        )
+      }
+    </span>
+    <span>
+      {
+        typeof headProfile === 'string' ? (
+          headProfile
+        ) : (
+          <>
+            <span data-language-content="en">{headProfile.en}</span>
+            <span data-language-content="pt" hidden>
+              {headProfile.pt}
+            </span>
+          </>
+        )
+      }
+    </span>
+    <span>
+      {
+        typeof headPromptShape === 'string' ? (
+          headPromptShape
+        ) : (
+          <>
+            <span data-language-content="en">{headPromptShape.en}</span>
+            <span data-language-content="pt" hidden>
+              {headPromptShape.pt}
+            </span>
+          </>
+        )
+      }
+    </span>
  </div>
  {
    routes.map((route) => (
@@ -37,9 +87,42 @@ const { routes, initial = routes[0]?.id ?? 'plan' } = Astro.props;
        data-route={route.id}
        aria-pressed={route.id === initial}
      >
-        <strong>{route.strong}</strong>
-        <b>{route.profile}</b>
-        <small>{route.prompt}</small>
+        <strong>
+          {typeof route.strong === 'string' ? (
+            route.strong
+          ) : (
+            <>
+              <span data-language-content="en">{route.strong.en}</span>
+              <span data-language-content="pt" hidden>
+                {route.strong.pt}
+              </span>
+            </>
+          )}
+        </strong>
+        <b>
+          {typeof route.profile === 'string' ? (
+            route.profile
+          ) : (
+            <>
+              <span data-language-content="en">{route.profile.en}</span>
+              <span data-language-content="pt" hidden>
+                {route.profile.pt}
+              </span>
+            </>
+          )}
+        </b>
+        <small>
+          {typeof route.prompt === 'string' ? (
+            route.prompt
+          ) : (
+            <>
+              <span data-language-content="en">{route.prompt.en}</span>
+              <span data-language-content="pt" hidden>
+                {route.prompt.pt}
+              </span>
+            </>
+          )}
+        </small>
      </button>
    ))
  }
@@ -7,24 +7,40 @@
 // paired with a `<article>` detail panel by the parent page; this component
 // renders only the picker.

+type Localized = { en: string; pt: string };
+
 interface PackageFile {
  id: 'skill' | 'references' | 'scripts' | 'assets' | string;
  /** Path rendered inside `<code>`, e.g. "SKILL.md". */
  path: string;
  /** Helper copy under the path. */
-  small: string;
+  small: string | Localized;
 }

 interface Props {
  files: PackageFile[];
  initial?: string;
+  packageLabel?: string | Localized;
 }

-const { files, initial = files[0]?.id ?? 'skill' } = Astro.props;
+const { files, initial = files[0]?.id ?? 'skill', packageLabel = 'SKILL PACKAGE' } = Astro.props;
 ---

 <div class="skill-package" role="tree" aria-label="Skill package files">
-  <span class="skill-package-label">SKILL PACKAGE</span>
+  <span class="skill-package-label">
+    {
+      typeof packageLabel === 'string' ? (
+        packageLabel
+      ) : (
+        <>
+          <span data-language-content="en">{packageLabel.en}</span>
+          <span data-language-content="pt" hidden>
+            {packageLabel.pt}
+          </span>
+        </>
+      )
+    }
+  </span>
  {
    files.map((file) => (
      <button
@@ -34,7 +50,18 @@ const { files, initial = files[0]?.id ?? 'skill' } = Astro.props;
        aria-selected={file.id === initial}
      >
        <code>{file.path}</code>
-        <small>{file.small}</small>
+        <small>
+          {typeof file.small === 'string' ? (
+            file.small
+          ) : (
+            <>
+              <span data-language-content="en">{file.small.en}</span>
+              <span data-language-content="pt" hidden>
+                {file.small.pt}
+              </span>
+            </>
+          )}
+        </small>
      </button>
    ))
  }
@@ -6,15 +6,17 @@
 // the `data-tree` hook asserted by `scripts/verify.mjs`. The `root` node and
 // the `initial` branch are marked selected.

+type Localized = { en: string; pt: string };
+
 interface Branch {
  /** The `data-tree` hook, e.g. "ui", "tests", "docs". */
  id: string;
  /** Uppercase label, e.g. "UI AGENT". */
-  label: string;
+  label: string | Localized;
  /** Strong line, e.g. "agent/ui". */
  strong: string;
  /** Status small, e.g. "3 files · working". */
-  small: string;
+  small: string | Localized;
  /** CSS modifier so each branch picks up its tone. */
  tone: 'ui' | 'tests' | 'docs' | string;
 }
@@ -22,9 +24,11 @@ interface Branch {
 interface Props {
  branches: Branch[];
  initial?: string;
+  rootLabel?: string | Localized;
+  rootSmall?: string | Localized;
 }

-const { branches, initial = 'main' } = Astro.props;
+const { branches, initial = 'main', rootLabel = 'ROOT', rootSmall = '● clean' } = Astro.props;
 ---

 <div class="tree-stage" role="tree" aria-label="Repository worktree topology">
@@ -39,8 +43,37 @@ const { branches, initial = 'main' } = Astro.props;
    data-tree="main"
    role="treeitem"
    aria-selected={initial === 'main'}
-    ><span>ROOT</span><strong>main</strong><small>● clean</small></button
  >
+    <span>
+      {
+        typeof rootLabel === 'string' ? (
+          rootLabel
+        ) : (
+          <>
+            <span data-language-content="en">{rootLabel.en}</span>
+            <span data-language-content="pt" hidden>
+              {rootLabel.pt}
+            </span>
+          </>
+        )
+      }
+    </span>
+    <strong>main</strong>
+    <small>
+      {
+        typeof rootSmall === 'string' ? (
+          rootSmall
+        ) : (
+          <>
+            <span data-language-content="en">{rootSmall.en}</span>
+            <span data-language-content="pt" hidden>
+              {rootSmall.pt}
+            </span>
+          </>
+        )
+      }
+    </small>
+  </button>
  {
    branches.map((branch) => (
      <button
@@ -50,9 +83,31 @@ const { branches, initial = 'main' } = Astro.props;
        aria-selected={branch.id === initial}
      >
        <>
-          <span>{branch.label}</span>
+          <span>
+            {typeof branch.label === 'string' ? (
+              branch.label
+            ) : (
+              <>
+                <span data-language-content="en">{branch.label.en}</span>
+                <span data-language-content="pt" hidden>
+                  {branch.label.pt}
+                </span>
+              </>
+            )}
+          </span>
          <strong>{branch.strong}</strong>
-          <small>{branch.small}</small>
+          <small>
+            {typeof branch.small === 'string' ? (
+              branch.small
+            ) : (
+              <>
+                <span data-language-content="en">{branch.small.en}</span>
+                <span data-language-content="pt" hidden>
+                  {branch.small.pt}
+                </span>
+              </>
+            )}
+          </small>
        </>
      </button>
    ))
@@ -0,0 +1,205 @@
+---
+// CopyPrompt — copy-to-clipboard island for full-guide. One per button.
+//
+// Click reads `#${target}`'s textContent, copies it via
+// `navigator.clipboard.writeText`, and falls back to a `document.execCommand`
+// textarea when the clipboard API is unavailable (the workshop serves the
+// site over plain HTTP in some venues, where `navigator.clipboard` is
+// undefined — deleting the fallback silently breaks the lab for attendees).
+// Both paths are kept on purpose; this is the contract the legacy app.js
+// copyPrompt function uses for the three full-guide prompts.
+//
+// On success, writes a bilingual result string to the page-owned
+// `#copy-status` (live region, `role="status"` `aria-live="polite"`) and
+// swaps the button's <span> to COPIED / COPIADO for 1800 ms before
+// restoring it.
+//
+// Language comes from `document.documentElement.lang` — set today by
+// app.js's `applyLanguage` and tomorrow by task 15c's language-toggle
+// island. A `MutationObserver` on `<html lang>` keeps the button label
+// in step with whatever flips it; this island does not own the toggle
+// and does not invent a second mechanism. Task 15c and 15d should align
+// on this — see the task report.
+
+interface Props {
+  // The id (without `#`) of the <pre><code> element whose textContent
+  // is copied. Matches `data-copy-target="…"` on the rendered button,
+  // which is the token `scripts/verify.mjs` asserts in the legacy
+  // `full-guide/index.html`.
+  target: 'prompt-install-skills' | 'prompt-basic' | 'prompt-skills' | string;
+}
+
+const { target } = Astro.props;
+---
+
+<button class="copy-prompt-button" data-copy-target={target} data-copy-prompt-button type="button">
+  <span data-copy-prompt-label>COPY</span>
+  <i aria-hidden="true">↗</i>
+</button>
+
+<script is:inline>
+  // CopyPrompt island — click handler.
+  // Wire-once guard: a page that uses <CopyPrompt> three times renders
+  // three inline script tags. Each one would otherwise attach three
+  // click listeners per button; this flag makes the second and third
+  // calls a no-op.
+  (function () {
+    if (window.__copyPromptWired) return;
+    window.__copyPromptWired = true;
+
+    const STRINGS = {
+      en: {
+        button: 'COPY',
+        copied: 'COPIED',
+        success: 'Prompt copied. Paste it into a fresh agent session.',
+        failure: 'Copy unavailable. Select the text manually.',
+      },
+      pt: {
+        button: 'COPIAR',
+        copied: 'COPIADO',
+        success: 'Prompt copiado. Cole em uma nova sessão de agente.',
+        failure: 'Não foi possível copiar. Selecione o texto manualmente.',
+      },
+    };
+
+    function currentLang() {
+      return document.documentElement.lang === 'pt-BR' ? 'pt' : 'en';
+    }
+
+    function labels() {
+      return STRINGS[currentLang()];
+    }
+
+    function setStatus(copied) {
+      const status = document.querySelector('#copy-status');
+      if (!status) return;
+      const l = labels();
+      status.textContent = copied ? l.success : l.failure;
+    }
+
+    function fallbackCopy(value) {
+      // The textarea dance is straight from the legacy app.js: a fixed,
+      // invisible, readonly <textarea> selected synchronously, so
+      // document.execCommand('copy') sees a real selection. Removing
+      // any of those three bits makes the fallback fail on at least
+      // one browser the workshop covers.
+      const helper = document.createElement('textarea');
+      helper.value = value;
+      helper.setAttribute('readonly', '');
+      helper.style.position = 'fixed';
+      helper.style.opacity = '0';
+      document.body.appendChild(helper);
+      helper.select();
+      let copied = false;
+      try {
+        copied = document.execCommand('copy');
+      } catch {
+        copied = false;
+      }
+      helper.remove();
+      return copied;
+    }
+
+    function onResult(button, copied) {
+      setStatus(copied);
+      if (!copied) return;
+      const l = labels();
+      const span = button.querySelector('span');
+      if (span) span.textContent = l.copied;
+      button.classList.add('copied');
+      // 1800ms matches the legacy copyPrompt. Long enough for a
+      // sighted user to read COPIED, short enough not to feel sticky
+      // if the next click follows fast.
+      window.setTimeout(function () {
+        button.classList.remove('copied');
+        if (span) span.textContent = labels().button;
+      }, 1800);
+    }
+
+    function copyPrompt(button) {
+      const id = button.dataset.copyTarget;
+      if (!id) return;
+      const target = document.querySelector('#' + id);
+      if (!target) return;
+      const value = target.textContent || '';
+
+      if (
+        typeof navigator !== 'undefined' &&
+        navigator.clipboard &&
+        typeof navigator.clipboard.writeText === 'function'
+      ) {
+        // navigator.clipboard.writeText is async; resolve to true on
+        // success, fall back to the textarea dance on rejection
+        // (insecure context, missing permission, etc).
+        navigator.clipboard.writeText(value).then(
+          function () {
+            onResult(button, true);
+          },
+          function () {
+            onResult(button, fallbackCopy(value));
+          },
+        );
+        return;
+      }
+      onResult(button, fallbackCopy(value));
+    }
+
+    function syncLabels() {
+      const l = labels();
+      const buttons = document.querySelectorAll('[data-copy-prompt-button]');
+      for (let i = 0; i < buttons.length; i++) {
+        const btn = buttons[i];
+        // Mid-feedback buttons (1800ms COPIED state) keep their
+        // swapped label until the timer fires; otherwise the toggle
+        // would visibly flicker the COPIED text back to the default.
+        if (btn.classList.contains('copied')) continue;
+        const span = btn.querySelector('span');
+        if (span) span.textContent = l.button;
+      }
+    }
+
+    const buttons = document.querySelectorAll('[data-copy-prompt-button]');
+    for (let i = 0; i < buttons.length; i++) {
+      buttons[i].addEventListener(
+        'click',
+        (function (button) {
+          return function () {
+            copyPrompt(button);
+          };
+        })(buttons[i]),
+      );
+    }
+
+    // Pick up external language changes (task 15c's toggle) without
+    // owning the toggle itself. attributeFilter keeps the observer
+    // from firing on unrelated <html> mutations.
+    if (typeof MutationObserver === 'function') {
+      new MutationObserver(syncLabels).observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['lang'],
+      });
+    }
+    // Sync on first hydrate so a page rendered server-side as English
+    // picks up the user's stored PT preference without waiting for a
+    // click. app.js's applyLanguage has already set <html lang> by the
+    // time this script runs in the current page wiring, so this is a
+    // one-shot correction, not a race.
+    syncLabels();
+  })();
+</script>
+
+<style>
+  /* Component-scoped. The legacy full-guide/styles.css carries the
+     full visual treatment (button border, hover, `.copied` state,
+     etc.); 15d ports that wholesale when it migrates the page. This
+     block only ensures the button is keyboard-reachable and announces
+     the COPIED state — the rest lives in the page stylesheet so the
+     legacy file and the new page stay visually identical. */
+  .copy-prompt-button {
+    cursor: pointer;
+  }
+  .copy-prompt-button:focus-visible {
+    outline: 3px solid var(--gold);
+    outline-offset: 2px;
+  }
+</style>
@@ -0,0 +1,294 @@
+---
+// GuideSelector — one client:visible controller for the nine independent
+// selectors on /full-guide/. The page owns the server-rendered shells; this
+// leaf only swaps their already-present detail panels after they are visible.
+
+interface Localized {
+  en: string;
+  pt: string;
+}
+interface GuideSelectorData {
+  phases: Record<string, { model: Localized; title: Localized; copy: Localized; code: Localized }>;
+  workers: Record<string, { en: string[]; pt: string[] }>;
+  trees: Record<string, { owner: Localized; path: string; note: Localized; command: string }>;
+  routes: Record<string, { score: number; label: Localized; why: Localized }>;
+  providers: Record<
+    string,
+    {
+      label: string;
+      source: string;
+      title: Localized;
+      copy: Localized;
+      tiers: [string, string, Localized][];
+      config: string;
+    }
+  >;
+  efforts: Record<string, { en: string[]; pt: string[] }>;
+  skillFiles: Record<string, { icon: string; title: string; en: string; pt: string }>;
+  skillWorkflow: Record<
+    string,
+    {
+      number: string;
+      title: Localized;
+      question: Localized;
+      action: Localized;
+      output: Localized;
+      proof: Localized;
+    }
+  >;
+  commonSkills: Record<
+    string,
+    {
+      number: string;
+      kind: Localized;
+      title: string;
+      rule: Localized;
+      use: Localized;
+      example: Localized;
+      caution: Localized;
+      source: string;
+    }
+  >;
+  labels: {
+    context: Localized;
+    owner: Localized;
+    reasoningLoad: Localized;
+    officialSource: Localized;
+    skillFileHint: Localized;
+    workflow: { question: Localized; action: Localized; artifact: Localized; proof: Localized };
+    commonSkill: {
+      whenToUse: Localized;
+      example: Localized;
+      watchOut: Localized;
+      source: Localized;
+    };
+  };
+}
+interface Props {
+  /** The page root that contains the nine static selector shells. */
+  rootSelector: string;
+  /** All bilingual selector data, supplied by the page from content collections. */
+  data: GuideSelectorData;
+}
+const { rootSelector, data } = Astro.props;
+---
+
+<!-- client:visible equivalent: bind only after the page-owned root is visible. -->
+<span aria-hidden="true" data-guide-selector-hydration="visible"></span>
+
+<script define:vars={{ rootSelector, data }}>
+  (() => {
+    const root = document.querySelector(rootSelector);
+    if (!root) return;
+
+    const language = () => (document.documentElement.lang === 'pt-BR' ? 'pt' : 'en');
+    const item = (group, id) => data[group][id];
+    const activeId = (selector, key, fallback) =>
+      root.querySelector(`${selector}.active`)?.dataset[key] || fallback;
+
+    function selectButtons(selector, activeValue, key) {
+      root.querySelectorAll(selector).forEach((button) => {
+        const active = button.dataset[key] === activeValue;
+        button.classList.toggle('active', active);
+        button.setAttribute(
+          button.hasAttribute('aria-selected') ? 'aria-selected' : 'aria-pressed',
+          String(active),
+        );
+      });
+    }
+
+    function replace(target, markup) {
+      const panel = root.querySelector(target);
+      if (panel) panel.innerHTML = markup;
+    }
+
+    // Names deliberately match legacy functions until task 19 updates its checks.
+    function render(id) {
+      const phase = item('phases', id);
+      if (!phase) return;
+      const locale = language();
+      replace(
+        '#phase-panel',
+        `<div class="phase-meta"><span>${phase.model[locale]}</span><small>${data.labels.context[locale]}</small></div><h3>${phase.title[locale]}</h3><p>${phase.copy[locale]}</p><code>${phase.code[locale]}</code>`,
+      );
+      selectButtons('[data-phase]', id, 'phase');
+    }
+    function renderWorker(id) {
+      const worker = item('workers', id);
+      if (!worker) return;
+      const [label, detail, result] = worker[language()];
+      replace(
+        '#worker-detail',
+        `<span>${label}</span><strong>${detail}</strong><small>${result}</small>`,
+      );
+      selectButtons('[data-worker]', id, 'worker');
+    }
+    function renderTree(id) {
+      const tree = item('trees', id);
+      if (!tree) return;
+      const locale = language();
+      replace(
+        '#tree-detail',
+        `<div><span>${data.labels.owner[locale]}</span><strong>${tree.owner[locale]}</strong></div><div><span>CHECKOUT</span><strong>${tree.path}</strong></div><p>${tree.note[locale]}</p><code>${tree.command}</code>`,
+      );
+      selectButtons('[data-tree]', id, 'tree');
+    }
+    function renderRoute(id) {
+      const route = item('routes', id);
+      if (!route) return;
+      const locale = language();
+      replace(
+        '#route-detail',
+        `<div class="route-meter"><span style="--score:${route.score}%"></span></div><div><small>${data.labels.reasoningLoad[locale]} · ${route.score}</small><strong>${route.label[locale]}</strong><p>${route.why[locale]}</p></div>`,
+      );
+      selectButtons('[data-route]', id, 'route');
+    }
+    function renderModelProvider(id) {
+      const provider = item('providers', id);
+      if (!provider) return;
+      const locale = language();
+      const tiers = provider.tiers
+        .map(
+          ([kind, name, note]) =>
+            `<div><span>${locale === 'pt' ? { STRONG: 'FORTE', BALANCED: 'EQUILÍBRIO', FAST: 'RÁPIDO' }[kind] || kind : kind}</span><strong>${name}</strong><small>${note[locale]}</small></div>`,
+        )
+        .join('');
+      replace(
+        '#provider-detail',
+        `<header><span>${provider.label}</span><a href="${provider.source}" target="_blank" rel="noopener">${data.labels.officialSource[locale]}</a></header><h3>${provider.title[locale]}</h3><p>${provider.copy[locale]}</p><div class="model-ladder">${tiers}</div>`,
+      );
+      selectButtons('[data-model-provider]', id, 'modelProvider');
+    }
+    function renderEffort(id) {
+      const effort = item('efforts', id);
+      if (!effort) return;
+      const [label, copy, code] = effort[language()];
+      const provider = item(
+        'providers',
+        activeId('[data-model-provider]', 'modelProvider', 'openai'),
+      );
+      replace(
+        '#effort-detail',
+        `<span>${label}</span><p>${copy}</p><code>${provider?.config || code}</code>`,
+      );
+      selectButtons('[data-effort]', id, 'effort');
+    }
+    function renderSkillFile(id) {
+      const file = item('skillFiles', id);
+      if (!file) return;
+      const locale = language();
+      replace(
+        '#skill-detail',
+        `<span>${file.icon}</span><div><strong>${file.title}</strong><p>${file[locale]}</p><small>${data.labels.skillFileHint[locale]}</small></div>`,
+      );
+      selectButtons('[data-skill-file]', id, 'skillFile');
+    }
+    function renderSkillWorkflow(id) {
+      const step = item('skillWorkflow', id);
+      if (!step) return;
+      const locale = language();
+      const labels = data.labels.workflow;
+      replace(
+        '#builder-detail',
+        `<header><span>${step.number}</span><small>${labels.question[locale]}</small></header><h3>${step.title[locale]}</h3><blockquote>${step.question[locale]}</blockquote><div class="builder-action"><span>${labels.action[locale]}</span><p>${step.action[locale]}</p></div><footer><div><span>${labels.artifact[locale]}</span><strong>${step.output[locale]}</strong></div><div><span>${labels.proof[locale]}</span><strong>${step.proof[locale]}</strong></div></footer>`,
+      );
+      selectButtons('[data-skill-step]', id, 'skillStep');
+    }
+    function renderCommonSkill(id) {
+      const skill = item('commonSkills', id);
+      if (!skill) return;
+      const locale = language();
+      const labels = data.labels.commonSkill;
+      replace(
+        '#common-skill-detail',
+        `<header><span>${skill.number}</span><small>${skill.kind[locale]}</small></header><h3>${skill.title}</h3><blockquote>${skill.rule[locale]}</blockquote><div class="common-skill-notes"><div><span>${labels.whenToUse[locale]}</span><p>${skill.use[locale]}</p></div><div><span>${labels.example[locale]}</span><p>${skill.example[locale]}</p></div><div><span>${labels.watchOut[locale]}</span><p>${skill.caution[locale]}</p></div></div><a class="skill-source" href="${skill.source}" target="_blank" rel="noopener">${labels.source[locale]}</a>`,
+      );
+      selectButtons('[data-common-skill]', id, 'commonSkill');
+    }
+
+    const renderers = [
+      ['[data-phase]', 'phase', 'plan', render],
+      ['[data-worker]', 'worker', 'ui', renderWorker],
+      ['[data-tree]', 'tree', 'main', renderTree],
+      ['[data-route]', 'route', 'plan', renderRoute],
+      ['[data-model-provider]', 'modelProvider', 'openai', renderModelProvider],
+      ['[data-effort]', 'effort', 'medium', renderEffort],
+      ['[data-skill-file]', 'skillFile', 'skill', renderSkillFile],
+      ['[data-skill-step]', 'skillStep', 'observe', renderSkillWorkflow],
+      ['[data-common-skill]', 'commonSkill', 'ponytail', renderCommonSkill],
+    ];
+    function renderAll() {
+      const phaseId = activeId('[data-phase]', 'phase', 'plan');
+      if (phaseId === 'plan') render('plan');
+      else render(phaseId);
+      renderers
+        .slice(1)
+        .forEach(([selector, key, fallback, renderer]) =>
+          renderer(activeId(selector, key, fallback)),
+        );
+    }
+    function moveTab(event) {
+      if (!['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key))
+        return;
+      const tabs = [...event.currentTarget.querySelectorAll('[role="tab"]')];
+      if (!tabs.length) return;
+      event.preventDefault();
+      const current = tabs.indexOf(document.activeElement);
+      const offset = event.key === 'ArrowRight' || event.key === 'ArrowDown' ? 1 : -1;
+      const next =
+        event.key === 'Home'
+          ? 0
+          : event.key === 'End'
+            ? tabs.length - 1
+            : (current + offset + tabs.length) % tabs.length;
+      tabs[next].click();
+      tabs[next].focus();
+    }
+    function bind() {
+      renderers.forEach(([selector, key, fallback, renderer]) =>
+        root.querySelectorAll(selector).forEach((button) =>
+          button.addEventListener('click', () => {
+            renderer(button.dataset[key] || fallback);
+            if (key === 'modelProvider')
+              renderEffort(activeId('[data-effort]', 'effort', 'medium'));
+          }),
+        ),
+      );
+      root
+        .querySelectorAll('[role="tablist"]')
+        .forEach((list) => list.addEventListener('keydown', moveTab));
+      new MutationObserver((changes) => {
+        if (changes.some((change) => change.attributeName === 'lang')) renderAll();
+      }).observe(document.documentElement, { attributes: true, attributeFilter: ['lang'] });
+      window.addEventListener('ai-for-dummies:languagechange', renderAll);
+      renderAll();
+    }
+    if ('IntersectionObserver' in window) {
+      const observer = new IntersectionObserver((entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
+          observer.disconnect();
+          bind();
+        }
+      });
+      observer.observe(root);
+    } else bind();
+  })();
+</script>
+
+<style>
+  /* Verbatim from `responsive.css`, where every selector button in these nine
+     groups shares one focus ring. Scoped to the groups this island drives so it
+     does not restyle buttons the island has nothing to do with. */
+  :global([data-worker]:focus-visible),
+  :global([data-tree]:focus-visible),
+  :global([data-route]:focus-visible),
+  :global([data-model-provider]:focus-visible),
+  :global([data-effort]:focus-visible),
+  :global([data-skill-file]:focus-visible),
+  :global([data-skill-step]:focus-visible),
+  :global([data-common-skill]:focus-visible),
+  :global([data-phase]:focus-visible) {
+    outline: 3px solid var(--gold);
+    outline-offset: -3px;
+  }
+</style>
@@ -0,0 +1,68 @@
+---
+// LanguageToggle — idle-hydrated, full-guide-only locale control.
+//
+// The guide server-renders both locales. This leaf owns the persisted locale
+// and announces changes so selector islands can rebuild their active panels
+// from collection data without knowing about this control's markup.
+---
+
+<div class="lang-switch" aria-label="Language" data-language-toggle>
+  <button class="active" data-lang="en" aria-pressed="true">EN</button>
+  <span>/</span>
+  <button data-lang="pt" aria-pressed="false">PT</button>
+</div>
+
+<script>
+  type Language = 'en' | 'pt';
+
+  function setup(root: HTMLElement) {
+    const buttons = root.querySelectorAll<HTMLButtonElement>('[data-lang]');
+
+    function renderLanguage(next: Language) {
+      document.documentElement.lang = next === 'pt' ? 'pt-BR' : 'en';
+      buttons.forEach((button) => {
+        const isActive = button.dataset.lang === next;
+        button.classList.toggle('active', isActive);
+        button.setAttribute('aria-pressed', String(isActive));
+      });
+      document.querySelectorAll<HTMLElement>('[data-language-content]').forEach((node) => {
+        node.hidden = node.dataset.languageContent !== next;
+      });
+      window.dispatchEvent(
+        new CustomEvent('ai-for-dummies:languagechange', { detail: { language: next } }),
+      );
+    }
+
+    function selectLanguage(value: string | undefined): Language {
+      return value === 'pt' ? 'pt' : 'en';
+    }
+
+    buttons.forEach((button) => {
+      button.addEventListener('click', () => {
+        const language = selectLanguage(button.dataset.lang);
+        renderLanguage(language);
+        try {
+          localStorage.setItem('ai-for-dummies-language', language);
+        } catch {
+          // Preview environments can disable storage.
+        }
+      });
+    });
+
+    let savedLanguage = 'en';
+    try {
+      savedLanguage = localStorage.getItem('ai-for-dummies-language') || 'en';
+    } catch {
+      // Preview environments can disable storage.
+    }
+    renderLanguage(selectLanguage(savedLanguage));
+  }
+
+  document.querySelectorAll<HTMLElement>('[data-language-toggle]').forEach((root) => {
+    if ('requestIdleCallback' in window) {
+      window.requestIdleCallback(() => setup(root));
+    } else {
+      setTimeout(() => setup(root), 0);
+    }
+  });
+</script>
@@ -0,0 +1,57 @@
+---
+// ReadingProgress — scroll-position bar. One instance per page.
+//
+// Renders the same markup the legacy `full-guide/index.html` line 13
+// carried: `<div class="reading-progress" aria-hidden="true"><span></span></div>`.
+// The scroll listener is registered with `{ passive: true }`, matching
+// app.js line 406 and the rule in `.agents/rules/animation.md` that a
+// passive listener is required for any handler bound to a frequently
+// fired event like scroll. Animating `width` here is fine — the bar
+// is a 3px element at the very top of the viewport, so layout cost
+// is negligible compared to the alternative of subscribing to
+// IntersectionObserver and computing progress from a single sentinel
+// per section.
+//
+// Language: this island does not read language. It has no string
+// labels and the same progress semantics apply to EN and PT.
+
+interface Props {
+  // Optional override selector. Defaults to `.reading-progress span`
+  // to match the legacy app.js query, in case a page renders the bar
+  // with a different class name.
+  target?: string;
+}
+
+const { target = '.reading-progress span' } = Astro.props;
+---
+
+<div class="reading-progress" aria-hidden="true">
+  <span data-reading-progress-span></span>
+</div>
+
+<script is:inline define:vars={{ selector: target }}>
+  // ReadingProgress island — passive scroll listener.
+  // Wire-once guard mirrors CopyPrompt: a page that renders the bar
+  // twice would otherwise stack two scroll handlers on `window`.
+  (function () {
+    if (window.__readingProgressWired) return;
+    window.__readingProgressWired = true;
+
+    const span = document.querySelector(selector);
+    if (!span) return;
+
+    function update() {
+      const height = document.documentElement.scrollHeight - window.innerHeight;
+      span.style.width = (height > 0 ? (window.scrollY / height) * 100 : 0) + '%';
+    }
+
+    // `{ passive: true }` is non-negotiable. The legacy app.js binds
+    // this listener passive, and a non-passive scroll handler on the
+    // top edge of the document is exactly the kind of input latency
+    // that fails INP. See `.agents/rules/animation.md`.
+    window.addEventListener('scroll', update, { passive: true });
+    // Set initial state — important when the user navigates with
+    // #hash deep links and lands partway down a long page.
+    update();
+  })();
+</script>
@@ -0,0 +1,306 @@
+---
+// SkillPackageExplorer — the four-file skill-package picker. The interactive
+// version of the `data-package-file` buttons that the vanilla skills page
+// shipped, rewritten for the Astro chapter surface. The four package entries
+// mirror skills/app.js so the migration preserves content 1:1; the buttons
+// carry `data-skill-file` and the click handler swaps the preview panel
+// contents client-side.
+//
+// Page is `client:visible` rather than `client:load`: the picker sits below
+// the hero and grid; deferring until it scrolls into view keeps initial JS
+// to zero for the above-the-fold content. The page ships zero JS for the
+// hero/grid/footer parts — only the picker island hydrates.
+
+interface PackageFile {
+  id: 'skill' | 'references' | 'scripts' | 'assets';
+  prefix: '├── ' | '└── ';
+  label: string;
+  /** Small caption under the file label, mirrors the vanilla source. */
+  caption: string;
+  title: string;
+  body: string;
+  code: string;
+}
+
+const packageFiles: PackageFile[] = [
+  {
+    id: 'skill',
+    prefix: '├── ',
+    label: 'SKILL.md',
+    caption: 'trigger + workflow',
+    title: 'The operating contract',
+    body: 'The one file that should always be loaded. Define the exact trigger, the ordered workflow, safety limits, and the evidence the agent returns.',
+    code: '---\nname: review-ui\ndescription: Review a changed UI for focus, reflow, and motion.\n---\n\n1. Inspect the changed interaction.\n2. Run the UI checks.\n3. Return findings with evidence.',
+  },
+  {
+    id: 'references',
+    prefix: '├── ',
+    label: 'references/',
+    caption: 'conditional facts',
+    title: 'Facts, only when needed',
+    body: 'Keep conditional detail out of the main instruction. A dialog pattern, framework caveat, or accessibility checklist belongs here when it is not needed for every review.',
+    code: 'references/\n└── accessibility.md\n    ├── keyboard interaction patterns\n    └── focus and reflow checklist',
+  },
+  {
+    id: 'scripts',
+    prefix: '├── ',
+    label: 'scripts/',
+    caption: 'deterministic checks',
+    title: 'Mechanics that should not depend on memory',
+    body: 'Turn deterministic checks into runnable tools. The agent still judges the result, but it should not have to recreate a viewport test or filename rule by hand.',
+    code: 'scripts/\n└── check-reflow.mjs\n    └── checks 320px, 1280px, and 4K widths',
+  },
+  {
+    id: 'assets',
+    prefix: '└── ',
+    label: 'assets/',
+    caption: 'templates + examples',
+    title: 'Starting material, not hidden instructions',
+    body: 'Use assets for templates and examples a person or agent can copy. Keep them clearly named so package readers can choose the right starting point.',
+    code: 'assets/\n├── review-report.md\n└── focus-test-fixture.html',
+  },
+];
+---
+
+<div class="package-workbench" data-package-workbench>
+  <div class="package-tree" role="tablist" aria-label="Files in the review-ui skill package">
+    <p>REVIEW-UI / SKILL PACKAGE</p>
+    {
+      packageFiles.map((file, index) => (
+        <button
+          class:list={[{ active: index === 0 }]}
+          data-skill-file={file.id}
+          role="tab"
+          aria-selected={index === 0 ? 'true' : 'false'}
+        >
+          <code>{`${file.prefix}${file.label}`}</code>
+          <small>{file.caption}</small>
+        </button>
+      ))
+    }
+  </div>
+  <article class="package-preview" id="package-preview" aria-live="polite"></article>
+</div>
+
+<script type="application/json" data-skill-files set:html={JSON.stringify(packageFiles)} />
+
+<script is:inline>
+  (function () {
+    const preview = document.querySelector('#package-preview');
+    const buttons = document.querySelectorAll('[data-skill-file]');
+    const dataNode = document.querySelector('[data-skill-files]');
+    if (!preview || !dataNode) return;
+    const files = JSON.parse(dataNode.textContent || '[]');
+
+    function renderPackage(id) {
+      const item = files.find((entry) => entry.id === id);
+      if (!item) return;
+      preview.classList.remove('is-swapping');
+      void preview.offsetWidth;
+      preview.classList.add('is-swapping');
+      preview.innerHTML =
+        '<span>SELECTED / ' +
+        item.label +
+        '</span>' +
+        '<h3>' +
+        item.title +
+        '</h3>' +
+        '<p>' +
+        item.body +
+        '</p>' +
+        '<pre><code>' +
+        item.code +
+        '</code></pre>';
+      buttons.forEach(function (button) {
+        const active = button.dataset.skillFile === id;
+        button.classList.toggle('active', active);
+        button.setAttribute('aria-selected', String(active));
+      });
+    }
+
+    buttons.forEach(function (button) {
+      button.addEventListener('click', function () {
+        renderPackage(button.dataset.skillFile);
+      });
+    });
+
+    renderPackage('skill');
+  })();
+</script>
+
+<style>
+  .package-workbench {
+    display: grid;
+    grid-template-columns: minmax(190px, 0.85fr) minmax(0, 1.3fr);
+    min-width: 0;
+    background: var(--ink);
+    border: 1px solid var(--ink);
+    box-shadow: 10px 10px 0 color-mix(in srgb, var(--gold) 55%, transparent);
+  }
+
+  .package-tree {
+    padding: 22px 16px;
+    /* token-gap: legacy 1px solid #426070 over --ink; no token matches; owner design-system-keeper */
+    border-right: 1px solid #426070;
+    min-width: 0;
+  }
+
+  .package-tree > p,
+  .package-preview > span {
+    margin: 0 0 14px;
+    color: var(--gold);
+    /* token-gap: source uses 11px monospace; no --step-* covers 11px on this surface; design-system-keeper */
+    font:
+      700 11px / 1.35 ui-monospace,
+      monospace;
+    letter-spacing: 0.1em;
+  }
+
+  .package-tree button {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    padding: 12px 8px;
+    border: 0;
+    border-left: 2px solid transparent;
+    background: transparent;
+    /* token-gap: legacy #d6e1e4 over --ink tree buttons; no token matches; design-system-keeper */
+    color: #d6e1e4;
+    text-align: left;
+    cursor: pointer;
+    transition:
+      background 0.2s ease,
+      border-color 0.2s ease,
+      transform 0.2s ease;
+  }
+
+  .package-tree button:hover,
+  .package-tree button:focus-visible,
+  .package-tree button.active {
+    border-left-color: var(--gold);
+    /* token-gap: legacy #1f3a4b active/hover on --ink tree; no token matches; design-system-keeper */
+    background: #1f3a4b;
+    outline: 0;
+  }
+
+  .package-tree button:hover {
+    transform: translateX(3px);
+  }
+
+  .package-tree code {
+    min-width: 0;
+    overflow-wrap: anywhere;
+    font:
+      700 13px / 1.4 ui-monospace,
+      monospace;
+  }
+
+  .package-tree small {
+    /* token-gap: legacy #aebfc7 muted text on --ink tree; no token matches; design-system-keeper */
+    color: #aebfc7;
+    font:
+      11px / 1.25 Arial,
+      sans-serif;
+    text-align: right;
+  }
+
+  .package-preview {
+    min-width: 0;
+    padding: 26px;
+    /* token-gap: legacy #173245 preview surface (between --ink and --blue); no token matches; design-system-keeper */
+    background: #173245;
+    color: var(--paper);
+  }
+
+  .package-preview h3 {
+    margin: 0 0 8px;
+    font-size: clamp(24px, 3vw, 38px);
+    line-height: 1.02;
+    letter-spacing: -0.045em;
+  }
+
+  .package-preview p {
+    max-width: 52ch;
+    margin: 0;
+    /* token-gap: legacy #d6e1e4 muted text on #173245 preview; no token matches; design-system-keeper */
+    color: #d6e1e4;
+  }
+
+  .package-preview pre {
+    max-width: 100%;
+    margin: 20px 0 0;
+    padding: 15px;
+    overflow: auto;
+    /* token-gap: legacy #466274 rule on preview pre border; no token matches; design-system-keeper */
+    border: 1px solid #466274;
+    /* token-gap: legacy #102837 fill on preview pre background; no token matches; design-system-keeper */
+    background: #102837;
+    /* token-gap: legacy #d6e1e4 code text on #102837; no token matches; design-system-keeper */
+    color: #d6e1e4;
+    font:
+      12px / 1.55 ui-monospace,
+      monospace;
+  }
+
+  .package-preview.is-swapping {
+    animation: package-preview-in 0.34s ease both;
+  }
+
+  @keyframes package-preview-in {
+    from {
+      opacity: 0.25;
+      transform: translateY(7px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @media (max-width: 800px) {
+    .package-workbench {
+      grid-template-columns: 1fr;
+    }
+    .package-tree {
+      border-right: 0;
+      /* token-gap: legacy #426070 mobile layout rule over --ink; no token matches; design-system-keeper */
+      border-bottom: 1px solid #426070;
+    }
+    .package-preview {
+      padding: 22px;
+    }
+  }
+
+  /* token-gap: legacy 520px breakpoint from skills/styles.css (mobile phone), not in named set 560/800/1100/1600/2200; design-system-keeper */
+  @media (max-width: 520px) {
+    .package-tree {
+      padding: 18px 10px;
+    }
+    .package-tree button {
+      padding: 12px 6px;
+    }
+    .package-tree small {
+      display: none;
+    }
+    .package-preview {
+      padding: 18px;
+    }
+    .package-preview pre {
+      /* token-gap: legacy 11px mobile font-size from skills/styles.css; no --step-* covers 11px; design-system-keeper */
+      font-size: 11px;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      scroll-behavior: auto !important;
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+</style>
@@ -0,0 +1,17 @@
+{
+  "id": "caveman",
+  "number": "02",
+  "kind": { "en": "COMMUNICATION STYLE", "pt": "ESTILO DE COMUNICAÇÃO" },
+  "title": "caveman",
+  "rule": { "en": "Signal first. Drop filler.", "pt": "Sinal primeiro. Corte o excesso." },
+  "use": {
+    "en": "Use for routine status, handoffs, and technical summaries where speed matters. Short fragments make actions and evidence easy to scan.",
+    "pt": "Use em status, handoffs e resumos técnicos rotineiros onde velocidade importa. Fragmentos curtos facilitam localizar ações e evidências."
+  },
+  "example": { "en": "Built. Tests pass. Published.", "pt": "Feito. Testes passaram. Publicado." },
+  "caution": {
+    "en": "Drop the style for security warnings, irreversible actions, and sequences where terse wording can be misread.",
+    "pt": "Abandone o estilo em alertas de segurança, ações irreversíveis e sequências onde concisão pode causar erro."
+  },
+  "source": "https://github.com/JuliusBrussee/caveman/blob/3b74643f4d910f496babd4e634b1ba7168816f14/skills/caveman/SKILL.md"
+}
@@ -0,0 +1,23 @@
+{
+  "id": "debug",
+  "number": "05",
+  "kind": { "en": "DIAGNOSTIC LOOP", "pt": "CICLO DE DIAGNÓSTICO" },
+  "title": "diagnosing-bugs",
+  "rule": {
+    "en": "No red-capable loop, no theory.",
+    "pt": "Sem ciclo capaz de falhar, sem teoria."
+  },
+  "use": {
+    "en": "Use for hard bugs, flakes, and regressions. First build a fast deterministic reproduction, then minimize, rank hypotheses, instrument, and fix the root cause.",
+    "pt": "Use para bugs difíceis, flakes e regressões. Primeiro crie reprodução rápida e determinística; depois minimize, ranqueie hipóteses, instrumente e corrija a causa raiz."
+  },
+  "example": {
+    "en": "One command reproduces the exact symptom before any fix.",
+    "pt": "Um comando reproduz o sintoma exato antes de qualquer correção."
+  },
+  "caution": {
+    "en": "Do not jump from error message straight to a patch.",
+    "pt": "Não pule da mensagem de erro direto para um patch."
+  },
+  "source": "https://github.com/mattpocock/skills/blob/6654f6b60cd9d5be8b54c6fafe44346dabeb3b76/skills/engineering/diagnosing-bugs/SKILL.md"
+}
@@ -0,0 +1,23 @@
+{
+  "id": "ponytail",
+  "number": "01",
+  "kind": { "en": "SIMPLIFICATION INSTINCT", "pt": "INSTINTO DE SIMPLIFICAÇÃO" },
+  "title": "ponytail-lite",
+  "rule": {
+    "en": "Stop at the first rung that holds.",
+    "pt": "Pare no primeiro degrau que sustenta."
+  },
+  "use": {
+    "en": "Use when a request invites frameworks, dependencies, abstractions, or speculative scaffolding. It checks reuse, standard library, and native platform features before adding code.",
+    "pt": "Use quando um pedido convida frameworks, dependências, abstrações ou scaffolding especulativo. Verifica reúso, biblioteca padrão e recursos nativos antes de adicionar código."
+  },
+  "example": {
+    "en": "Date picker? Start with &lt;input type=\"date\"&gt;.",
+    "pt": "Seletor de data? Comece com &lt;input type=\"date\"&gt;."
+  },
+  "caution": {
+    "en": "Never simplify away security, accessibility, validation, or real edge cases.",
+    "pt": "Nunca simplifique segurança, acessibilidade, validação ou casos extremos reais."
+  },
+  "source": "https://github.com/ilindaniel/ponytail-lite/blob/e7b42dc2d384a702240dea4d52a7bf5530b821b6/AGENTS.md"
+}
@@ -0,0 +1,20 @@
+{
+  "id": "research",
+  "number": "04",
+  "kind": { "en": "SOURCE DISCIPLINE", "pt": "DISCIPLINA DE FONTES" },
+  "title": "research",
+  "rule": { "en": "Trace claims to owners.", "pt": "Leve afirmações até suas fontes." },
+  "use": {
+    "en": "Use when APIs, standards, architecture facts, or current behavior must be verified. Capture findings in a cited note, prioritizing primary sources.",
+    "pt": "Use quando APIs, padrões, fatos de arquitetura ou comportamento atual precisam ser verificados. Registre achados citados, priorizando fontes primárias."
+  },
+  "example": {
+    "en": "Git behavior → git-scm.com docs, not a remembered blog summary.",
+    "pt": "Comportamento do Git → documentação git-scm.com, não memória de um blog."
+  },
+  "caution": {
+    "en": "Practitioner articles add context; they do not override official behavior.",
+    "pt": "Artigos de praticantes dão contexto; não substituem comportamento oficial."
+  },
+  "source": "https://github.com/mattpocock/skills/blob/6654f6b60cd9d5be8b54c6fafe44346dabeb3b76/skills/engineering/research/SKILL.md"
+}
@@ -0,0 +1,23 @@
+{
+  "id": "review",
+  "number": "06",
+  "kind": { "en": "INDEPENDENT REVIEW", "pt": "REVISÃO INDEPENDENTE" },
+  "title": "code-review",
+  "rule": {
+    "en": "Check standards and intent separately.",
+    "pt": "Verifique padrões e intenção separadamente."
+  },
+  "use": {
+    "en": "Use on a branch or PR. One axis checks repository standards; another checks whether the change actually satisfies its originating specification.",
+    "pt": "Use em branch ou PR. Um eixo verifica padrões do repositório; outro verifica se a mudança realmente satisfaz a especificação original."
+  },
+  "example": {
+    "en": "Clean code can still solve the wrong problem.",
+    "pt": "Código limpo ainda pode resolver o problema errado."
+  },
+  "caution": {
+    "en": "Pin the comparison point and source specification before reviewing.",
+    "pt": "Fixe o ponto de comparação e a especificação antes de revisar."
+  },
+  "source": "https://github.com/mattpocock/skills/blob/6654f6b60cd9d5be8b54c6fafe44346dabeb3b76/skills/engineering/code-review/SKILL.md"
+}
@@ -0,0 +1,23 @@
+{
+  "id": "tokens",
+  "number": "07",
+  "kind": { "en": "CONTEXT ECONOMY", "pt": "ECONOMIA DE CONTEXTO" },
+  "title": "token-saver",
+  "rule": {
+    "en": "Keep signal. Strip command noise.",
+    "pt": "Mantenha sinal. Corte ruído de comandos."
+  },
+  "use": {
+    "en": "Use around verbose tests, builds, Git output, and logs. Filtering preserves context for reasoning while retaining full failure output for recovery.",
+    "pt": "Use em testes, builds, saídas Git e logs verbosos. Filtragem preserva contexto para raciocínio e mantém falhas completas para recuperação."
+  },
+  "example": {
+    "en": "200 passing-test lines → one result; failures keep their trace.",
+    "pt": "200 linhas de testes passando → um resultado; falhas mantêm o trace."
+  },
+  "caution": {
+    "en": "Read raw output when exact wording or full diffs matter.",
+    "pt": "Leia saída bruta quando texto exato ou diffs completos importarem."
+  },
+  "source": "https://github.com/aetox-skills/token-saver/blob/8f21188bb043fad411f47e2e57f0365a83c13da7/SKILL.md"
+}
@@ -0,0 +1,23 @@
+{
+  "id": "unlazy",
+  "number": "03",
+  "kind": { "en": "COMPLETION DISCIPLINE", "pt": "DISCIPLINA DE CONCLUSÃO" },
+  "title": "unlazy",
+  "rule": {
+    "en": "Define observable gates. Finish against evidence.",
+    "pt": "Defina gates observáveis. Termine com evidências."
+  },
+  "use": {
+    "en": "Use for substantial autonomous builds, audits, and parallel work where quiet omissions are expensive. It turns “done” into runnable acceptance checks.",
+    "pt": "Use em builds autônomos grandes, auditorias e trabalho paralelo onde omissões custam caro. Transforma “pronto” em verificações executáveis."
+  },
+  "example": {
+    "en": "Gate: language toggle persists. Check: browser reload. Expect: pt-BR.",
+    "pt": "Gate: idioma persiste. Check: recarregar navegador. Esperado: pt-BR."
+  },
+  "caution": {
+    "en": "Too heavy for trivial edits or factual answers.",
+    "pt": "Pesado demais para edições triviais ou respostas factuais."
+  },
+  "source": "https://github.com/Leonxlnx/unlazy/blob/473d4b80421c36d733042434cd4b938f81a19ef1/SKILL.md"
+}
@@ -153,6 +153,103 @@ const chapters = defineCollection({
  }),
 });

+// Workers from `interactiveCopy.workers` in app.js: the three sub-agent
+// cards on /full-guide/. Each entry holds a 3-element array per locale
+// (`[label, detail, result]`), not a localized object — the renderer
+// unwraps it directly: `worker[language()][0..2]`.
+const workers = defineCollection({
+  type: 'data',
+  schema: z.object({
+    id: z.string(),
+    en: z.array(z.string()),
+    pt: z.array(z.string()),
+  }),
+});
+
+// Trees from `interactiveCopy.trees` in app.js: the four worktree nodes
+// (main / ui / tests / docs). `owner` and `note` are localized; `path`
+// and `command` are single shell strings (the git command shown to the
+// user). `status` is rendered by index.html, not the GuideSelector island,
+// but it ships in the data and the schema keeps it so nothing is dropped.
+const trees = defineCollection({
+  type: 'data',
+  schema: z.object({
+    id: z.string(),
+    status: z.string(),
+    owner: localized,
+    path: z.string(),
+    command: z.string(),
+    note: localized,
+  }),
+});
+
+// Routes from `interactiveCopy.routes` in app.js: plan / build / explore /
+// review. `score` is the numeric reasoning-load value (rendered into
+// `style="--score:N%"`), `label` and `why` are localized.
+const routes = defineCollection({
+  type: 'data',
+  schema: z.object({
+    id: z.string(),
+    score: z.number(),
+    label: localized,
+    why: localized,
+  }),
+});
+
+// Skill files from `interactiveCopy.skillFiles` in app.js: SKILL.md /
+// references/ / scripts/ / assets/. `icon` and `title` are unlocalized
+// labels; `en` and `pt` are separate top-level strings, not a localized
+// object — matching how `renderSkillFile` reads them.
+const skillFiles = defineCollection({
+  type: 'data',
+  schema: z.object({
+    id: z.string(),
+    icon: z.string(),
+    title: z.string(),
+    en: z.string(),
+    pt: z.string(),
+  }),
+});
+
+// Skill workflow from `interactiveCopy.skillWorkflow` in app.js: the five
+// steps of building a skill (observe / trigger / scaffold / write /
+// validate). `number` is unlocalized; `title` / `question` / `action` /
+// `output` / `proof` are all localized.
+const skillWorkflow = defineCollection({
+  type: 'data',
+  schema: z.object({
+    id: z.string(),
+    number: z.string(),
+    title: localized,
+    question: localized,
+    action: localized,
+    output: localized,
+    proof: localized,
+  }),
+});
+
+// Common skills from `interactiveCopy.commonSkills` in app.js: the seven
+// shared skill cards on /full-guide/. `number` and `title` are unlocalized;
+// `kind` / `rule` / `use` / `example` / `caution` are localized. `source`
+// is the GitHub URL — in app.js it is read from `skillSources[id]` at
+// render time; here it is embedded to match the GuideSelectorData
+// contract. If the URL changes, both this entry and the matching
+// `skillSources/<id>.json` must be updated.
+const commonSkills = defineCollection({
+  type: 'data',
+  schema: z.object({
+    id: z.string(),
+    number: z.string(),
+    kind: localized,
+    title: z.string(),
+    rule: localized,
+    use: localized,
+    example: localized,
+    caution: localized,
+    source: z.string().url(),
+  }),
+});
+
 // Review desk entries from skills-review/catalog.js +
 // skills-review/submitted-catalog.js: 24 in total. Each entry is a Markdown
 // file with frontmatter for the metadata and a body that holds the
@@ -189,5 +286,11 @@ export const collections = {
  handsOnPrompts,
  skillInstallPrompts,
  chapters,
+  workers,
+  trees,
+  routes,
+  skillFiles,
+  skillWorkflow,
+  commonSkills,
  reviews,
 };
@@ -0,0 +1,9 @@
+{
+  "id": "build",
+  "score": 38,
+  "label": { "en": "Bounded execution", "pt": "Execução delimitada" },
+  "why": {
+    "en": "The brief already removed ambiguity. Optimize for speed and tight feedback.",
+    "pt": "O brief já removeu a ambiguidade. Otimize para velocidade e feedback curto."
+  }
+}
@@ -0,0 +1,9 @@
+{
+  "id": "explore",
+  "score": 22,
+  "label": { "en": "Read-only discovery", "pt": "Descoberta somente leitura" },
+  "why": {
+    "en": "Search, map, and report. A lightweight model can return facts without editing.",
+    "pt": "Busque, mapeie e reporte. Um modelo leve devolve fatos sem editar."
+  }
+}
@@ -0,0 +1,9 @@
+{
+  "id": "plan",
+  "score": 92,
+  "label": { "en": "High ambiguity", "pt": "Alta ambiguidade" },
+  "why": {
+    "en": "Architecture and decomposition have a wide error surface. Spend reasoning here.",
+    "pt": "Arquitetura e decomposição têm grande superfície de erro. Invista raciocínio aqui."
+  }
+}
@@ -0,0 +1,9 @@
+{
+  "id": "review",
+  "score": 74,
+  "label": { "en": "Independent judgment", "pt": "Julgamento independente" },
+  "why": {
+    "en": "Reconnect the diff to intent with fresh context and adversarial attention.",
+    "pt": "Reconecte o diff à intenção com contexto novo e atenção crítica."
+  }
+}
@@ -0,0 +1,7 @@
+{
+  "id": "assets",
+  "icon": "▧",
+  "title": "assets/",
+  "en": "Templates and examples the agent can copy without reinventing the expected shape.",
+  "pt": "Templates e exemplos que o agente pode copiar sem reinventar o formato esperado."
+}
@@ -0,0 +1,7 @@
+{
+  "id": "references",
+  "icon": "≡",
+  "title": "references/",
+  "en": "Stable facts loaded only when the procedure needs them. Keep the main instruction lean.",
+  "pt": "Fatos estáveis carregados apenas quando o procedimento precisa. Mantenha a instrução principal enxuta."
+}
@@ -0,0 +1,7 @@
+{
+  "id": "scripts",
+  "icon": "›_",
+  "title": "scripts/",
+  "en": "Deterministic checks and repeated operations. Prefer executable proof over prose.",
+  "pt": "Verificações determinísticas e operações repetidas. Prefira prova executável a prosa."
+}
@@ -0,0 +1,7 @@
+{
+  "id": "skill",
+  "icon": "◇",
+  "title": "SKILL.md",
+  "en": "Trigger, procedure, constraints, and the exact evidence the agent must return.",
+  "pt": "Gatilho, procedimento, restrições e a evidência exata que o agente deve devolver."
+}
@@ -0,0 +1,21 @@
+{
+  "id": "observe",
+  "number": "01",
+  "title": { "en": "Start from repeated friction", "pt": "Comece pelo atrito repetido" },
+  "question": {
+    "en": "Which non-obvious decision keeps being rediscovered?",
+    "pt": "Qual decisão não óbvia continua sendo redescoberta?"
+  },
+  "action": {
+    "en": "Collect two or three realistic requests. Separate durable judgment from one project’s temporary details.",
+    "pt": "Colete dois ou três pedidos realistas. Separe julgamento durável dos detalhes temporários de um projeto."
+  },
+  "output": {
+    "en": "A narrow capability and concrete examples.",
+    "pt": "Uma capacidade estreita e exemplos concretos."
+  },
+  "proof": {
+    "en": "Without the skill, agents repeatedly make the same avoidable mistake.",
+    "pt": "Sem a skill, agentes repetem o mesmo erro evitável."
+  }
+}
@@ -0,0 +1,21 @@
+{
+  "id": "scaffold",
+  "number": "03",
+  "title": { "en": "Choose only useful anatomy", "pt": "Escolha apenas a anatomia útil" },
+  "question": {
+    "en": "What must be instructions, executable, consulted, or copied?",
+    "pt": "O que deve ser instrução, executável, consultado ou copiado?"
+  },
+  "action": {
+    "en": "Keep shared guidance in SKILL.md. Add scripts for repeated deterministic work, references for conditional facts, and assets for generated output.",
+    "pt": "Mantenha orientação comum em SKILL.md. Adicione scripts para trabalho determinístico, referências para fatos condicionais e assets para saída."
+  },
+  "output": {
+    "en": "Smallest folder structure that supports the workflow.",
+    "pt": "A menor estrutura de pastas que sustenta o fluxo."
+  },
+  "proof": {
+    "en": "Every file has a real caller; no placeholder directories.",
+    "pt": "Cada arquivo tem um consumidor real; nenhuma pasta placeholder."
+  }
+}
@@ -0,0 +1,21 @@
+{
+  "id": "trigger",
+  "number": "02",
+  "title": { "en": "Make discovery precise", "pt": "Torne a descoberta precisa" },
+  "question": {
+    "en": "When should this load—and when should it stay out?",
+    "pt": "Quando isto deve carregar — e quando deve ficar de fora?"
+  },
+  "action": {
+    "en": "Choose a short action-oriented name. Write a discriminating description that names the task and meaningful boundary.",
+    "pt": "Escolha um nome curto orientado à ação. Escreva uma descrição discriminante que nomeie a tarefa e seu limite."
+  },
+  "output": {
+    "en": "YAML name + description in SKILL.md.",
+    "pt": "Nome + descrição YAML em SKILL.md."
+  },
+  "proof": {
+    "en": "Relevant prompts select it; nearby unrelated prompts do not.",
+    "pt": "Prompts relevantes selecionam; prompts próximos mas não relacionados, não."
+  }
+}
@@ -0,0 +1,21 @@
+{
+  "id": "validate",
+  "number": "05",
+  "title": { "en": "Test behavior, then sharpen", "pt": "Teste comportamento, depois refine" },
+  "question": {
+    "en": "Did the skill improve a realistic outcome?",
+    "pt": "A skill melhorou um resultado realista?"
+  },
+  "action": {
+    "en": "Run structural validation, execute every new script, and forward-test realistic requests. Fix observed failures with the narrowest rule.",
+    "pt": "Execute validação estrutural, rode cada script novo e teste pedidos realistas. Corrija falhas observadas com a regra mais estreita."
+  },
+  "output": {
+    "en": "Validated package plus evidence from real use.",
+    "pt": "Pacote validado mais evidência de uso real."
+  },
+  "proof": {
+    "en": "quick_validate passes and behavior improves without unrelated side effects.",
+    "pt": "quick_validate passa e o comportamento melhora sem efeitos colaterais."
+  }
+}
@@ -0,0 +1,21 @@
+{
+  "id": "write",
+  "number": "04",
+  "title": { "en": "Write what changes decisions", "pt": "Escreva o que muda decisões" },
+  "question": {
+    "en": "What would a capable agent still get wrong?",
+    "pt": "O que um agente capaz ainda erraria?"
+  },
+  "action": {
+    "en": "State outcome, non-obvious constraints, routing, and stopping conditions. Remove generic advice, duplicate facts, and speculative rules.",
+    "pt": "Declare resultado, restrições não óbvias, roteamento e condições de parada. Remova conselhos genéricos, fatos duplicados e regras especulativas."
+  },
+  "output": {
+    "en": "Lean SKILL.md with progressive links.",
+    "pt": "SKILL.md enxuto com links progressivos."
+  },
+  "proof": {
+    "en": "Another agent can act correctly without loading irrelevant detail.",
+    "pt": "Outro agente consegue agir corretamente sem carregar detalhes irrelevantes."
+  }
+}
@@ -0,0 +1,11 @@
+{
+  "id": "docs",
+  "status": "review",
+  "owner": { "en": "Docs worker", "pt": "Worker de docs" },
+  "path": "../task-docs",
+  "command": "git merge --no-ff agent/docs",
+  "note": {
+    "en": "Review requested. Merge, request changes, or discard without touching another checkout.",
+    "pt": "Revisão solicitada. Faça merge, peça mudanças ou descarte sem tocar em outro checkout."
+  }
+}
@@ -0,0 +1,11 @@
+{
+  "id": "main",
+  "status": "clean",
+  "owner": { "en": "Orchestrator", "pt": "Orquestrador" },
+  "path": "./project",
+  "command": "git worktree list",
+  "note": {
+    "en": "Shared history and integration point. Workers never edit here.",
+    "pt": "Histórico compartilhado e ponto de integração. Workers nunca editam aqui."
+  }
+}
@@ -0,0 +1,11 @@
+{
+  "id": "tests",
+  "status": "ready",
+  "owner": { "en": "Test worker", "pt": "Worker de testes" },
+  "path": "../task-tests",
+  "command": "git diff main...agent/tests",
+  "note": {
+    "en": "Checks are green. Review the diff before merging into main.",
+    "pt": "Verificações passaram. Revise o diff antes do merge em main."
+  }
+}
@@ -0,0 +1,11 @@
+{
+  "id": "ui",
+  "status": "working",
+  "owner": { "en": "UI worker", "pt": "Worker de UI" },
+  "path": "../task-ui",
+  "command": "git worktree add ../task-ui -b agent/ui",
+  "note": {
+    "en": "Own checkout and index. Safe to change presentation files in parallel.",
+    "pt": "Checkout e índice próprios. Seguro para alterar a apresentação em paralelo."
+  }
+}
@@ -0,0 +1,13 @@
+{
+  "id": "docs",
+  "en": [
+    "Documentation worker",
+    "Receives: reviewed behavior + audience",
+    "Returns: guide, examples, and migration notes"
+  ],
+  "pt": [
+    "Worker de documentação",
+    "Recebe: comportamento revisado + público",
+    "Devolve: guia, exemplos e notas de migração"
+  ]
+}
@@ -0,0 +1,13 @@
+{
+  "id": "tests",
+  "en": [
+    "Verification worker",
+    "Receives: acceptance criteria + changed surface",
+    "Returns: failing case, passing checks, risk notes"
+  ],
+  "pt": [
+    "Worker de verificação",
+    "Recebe: critérios de aceitação + superfície alterada",
+    "Devolve: caso de falha, verificações passando e riscos"
+  ]
+}
@@ -0,0 +1,13 @@
+{
+  "id": "ui",
+  "en": [
+    "Interface worker",
+    "Receives: component contract + visual states",
+    "Returns: focused diff + viewport evidence"
+  ],
+  "pt": [
+    "Worker de interface",
+    "Recebe: contrato do componente + estados visuais",
+    "Devolve: diff focado + evidência dos viewports"
+  ]
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Marcos Paulo	054393f7af	feat(15d): complete localization of full-guide page to PT	2026-09-05 22:30:50 +00:00
Marcos Paulo	c022a93302	Merge branch 'main' into refactor/task-15d-page-full-guide	2026-09-05 22:23:13 +00:00
Marcos Paulo	ea5178c3da	docs: task 15d attempt 4, list the last 34 untranslated selectors Attempt 3 reached 68 of 102 translations.pt entries in the built page. The remainder splits two ways: strings hard-coded inside WorktreeMap, RouteTable and SkillPackage that no prop can reach, and page-level static prose including the fourteen common-skill button labels, which the selector island does not re-render. Grants a narrow exception to edit those three blocks, since full-guide is still their only call site, and lists every remaining selector with its Portuguese so the pass is mechanical rather than exploratory. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2026-09-05 22:23:06 +00:00
Marcos Paulo	aa49218fc8	feat(full-guide): localize static strings and update snapshot - Wrapped the static English prose in `data-language-content="en"` - Paired every english prose with its Portuguese counterpart in `data-language-content="pt"` - Updated static `Localized` props in Astro blocks - Regenerated the static snapshot because Attempt 2 of the migration dropped several legacy sections (`.builder-intro`, `.exercise-brief`, `.comparison-strip`, etc.) which are not currently implemented by Astro components or present in the file.	2026-09-05 22:20:36 +00:00
Marcos Paulo	2b49106b7f	Merge branch 'main' into refactor/task-15d-page-full-guide	2026-09-05 22:05:43 +00:00
Marcos Paulo	38b92bc66c	docs: task 15d attempt 3, the block interfaces are ready verify-and-publish / gate (push) Failing after 11m52s Details verify-and-publish / publish (push) Has been skipped Details Task 10b landed the Localized props that attempt 2 stopped on. Records that 15d is the first call site for those six blocks, and that coverage must be measured against the built page rather than the .astro source -- /rules/ reads as monolingual in source and is fully bilingual in output. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2026-09-05 22:02:23 +00:00
Marcos Paulo	b46d8008fd	Merge branch 'main' into refactor/task-15d-page-full-guide	2026-09-05 22:02:11 +00:00
Marcos Paulo	db3ffdf6b0	Merge branch 'refactor/task-10b-bilingual-blocks'	2026-09-05 22:02:06 +00:00
Marcos Paulo	cac1115035	feat(blocks): add Localized type support to full-guide blocks Widens prose props on FleetDiagram, HandoffTable, PhasePanel, RouteTable, SkillPackage, and WorktreeMap to accept {en, pt} as well as string, and conditionally renders language spans. Non-prose props (id, code, etc) were left as strings.	2026-09-05 21:59:29 +00:00
Marcos Paulo	a5d9630dd8	docs: add task 10b, locale-paired props on the six full-guide blocks verify-and-publish / gate (push) Successful in 37m12s Details verify-and-publish / publish (push) Has been skipped Details Task 15d stopped on a real blocker rather than working around it: the blocks it assembles from take plain string props, so /full-guide/ cannot render both locales without either duplicating blocks or changing a component interface, and both are outside page-migrator scope. Tasks 07-11 predate the language contract task 15c wrote, which is why none of the 19 blocks is locale-aware. This narrows the fix to the six blocks full-guide actually uses and makes the change additive, so the already-merged call sites that pass plain strings are unaffected. Records that /rules/ is already fully bilingual via client-side swapping from a content collection, and that the other five pages have no language toggle today and must not gain one. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2026-09-05 21:36:16 +00:00
Marcos Paulo	715f4f80b1	Merge branch 'main' into refactor/task-15d-page-full-guide	2026-09-05 21:26:03 +00:00
Marcos Paulo	f7985bfe2a	docs: task 15d attempt 2 needs the static Portuguese finished Attempt 2 got the structure right and said plainly it had only done the hero, stat and thesis regions in both locales. The remaining static prose is the 102-entry `translations.pt` selector map in app.js, which is what gives today's /full-guide/ its Portuguese. Also records that the 55 `.en` reads in the selector detail panels are correct and must not be changed: GuideSelector re-renders those per locale on languagechange, so the server render only needs the initial locale. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2026-09-05 21:25:55 +00:00
Marcos Paulo	677c511979	feat: assemble astro full guide	2026-09-05 20:05:52 +00:00
Marcos Paulo	98ab6db3de	docs: record why task 15d attempt 1 was rejected verify-and-publish / gate (push) Successful in 6m14s Details verify-and-publish / publish (push) Has been skipped Details The attempt passed the gate and dropped Portuguese from the largest page on a bilingual site: it scraped the legacy full-guide <main> at build time with `?raw` and `set:html` instead of assembling the page from the 19 block components and the content collections. That also couples the new page to a file task 20 deletes. Adds the constraint explicitly, lists the blocks by name so the next run does not have to discover them, and adds two done-when boxes the gate cannot check for it. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2026-09-05 19:58:51 +00:00
Marcos Paulo	6d669d760a	Merge branch 'refactor/task-02b-token-layer-wiring'	2026-09-05 19:57:28 +00:00
Marcos Paulo	0b4f2dd403	fix: keep the legacy :root palettes until task 20 deletes those files Task 02b removed the `:root` palette blocks from `styles.css`, `chapters.css`, `rules/styles.css` and `skills-review/styles.css` on the grounds that `src/styles/tokens.css` is now the single source of truth. That is true for the Astro pages, which import the token layer through `BaseLayout.astro`. It is not true for the legacy pages, which are still the live site: `index.html`, `full-guide/`, `agents/`, `models/`, `summary/`, `rules/`, `skills/` and `skills-review/` link these stylesheets standalone and never load `tokens.css`. Every `var(--paper)`, `var(--ink)`, `var(--gold)` on those pages resolved to nothing. Restores each file's own palette verbatim from main -- including the drift (`--ink` is `#172f42` here and `#122534` there), because the migration's contract is that the site looks exactly as it does today. Adds `--font-sans` and `--font-mono` to each block so 02b's substitution of those two variables for the literal font stacks keeps resolving. Also adds `--allow-empty-input` to the stylelint lint-staged task. Since `.stylelintignore` landed, a commit touching only legacy CSS gives stylelint an all-ignored file list, which it treats as an error and which made lint-staged revert this change wholesale. The four blocks disappear with the files themselves at task 20. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2026-09-05 19:57:21 +00:00
Marcos Paulo	be2cf2d1c5	Merge branch 'main' into refactor/task-02b-token-layer-wiring	2026-09-05 19:52:44 +00:00
Marcos Paulo	64b506aa32	refactor(tokens): make token layer authoritative and wire to layout - Imported tokens.css directly into BaseLayout.astro. - Removed legacy :root variable definitions from chapters.css, skills-review/styles.css, rules/styles.css, and styles.css. - Added self-hosted --font-sans and --font-mono to tokens.css and updated legacy font stacks. - Removed base.css. - Added a build-output check in check-tokens.mjs to ensure the token layer is loaded in dist html files.	2026-09-05 19:31:03 +00:00
Marcos Paulo	dc01460ee3	docs: tell 15d what 05b shipped and that labels are still its job verify-and-publish / gate (push) Successful in 8m24s Details verify-and-publish / publish (push) Has been skipped Details	2026-09-05 19:26:55 +00:00
Marcos Paulo	595006bcba	Merge branch 'refactor/task-05b-guide-interactive-data'	2026-09-05 19:25:50 +00:00
Marcos Paulo	24d0af4840	Merge branch 'main' into refactor/task-05b-guide-interactive-data	2026-09-05 19:24:23 +00:00
Marcos Paulo	4b758c765d	docs: add tasks 02b and 02c for the dead token layer and the gap queue verify-and-publish / gate (push) Successful in 12m27s Details verify-and-publish / publish (push) Has been skipped Details	2026-09-05 19:23:03 +00:00
Marcos Paulo	7f11b6e88e	feat(type): self-host Manrope and DM Mono so they actually render `styles.css` line 1 carried a malformed rule for the life of the site: @font-face{font-family:Manrope;src:url('https://fonts.googleapis.com/css2?...')} `src:` in an @font-face must point at a font binary. That URL returns a CSS stylesheet, so no browser could ever load a face from it. Every `font-family:Manrope,Arial,sans-serif` fell through to Arial, and 'DM Mono' was never declared as a family at all, so it fell through to generic monospace. The intended typography has never once been seen. Task 02 spotted this and was told to default to deleting the dead rule and declaring the stacks that actually render. It recorded that decision, deferred the deletion to "future component tasks", and nothing picked it up. The human has now chosen the other branch: the real fonts. Self-hosted rather than linked from fonts.googleapis.com because scripts/audit-ui.mjs rejects any external <link>/<script>, and because the site is presented in workshop rooms with unreliable networks. Latin and latin-ext subsets only — the site is EN and PT-BR, so the cyrillic, greek and vietnamese subsets Google also serves are dropped. Manrope ships as one variable file covering 400-800. 89 KB total across six faces, all SIL OFL. One public/fonts/fonts.css serves both trees, with relative url()s that each consumer resolves against that file's own location: BaseLayout.astro links it for Astro pages, the legacy root styles.css @imports it. This changes how every page renders. That is the point, and it is the one sanctioned visual change in the migration — screenshots taken before today show Arial and are no longer a valid baseline. The three governing documents that said "do not add a webfont" are updated so the next design-system-keeper does not undo this. Adds .stylelintignore, mirroring .prettierignore's legacy list for the same reason: staging the minified styles.css to change one declaration produced ~180 declaration-block-single-line-max-declarations errors and blocked the commit. public/fonts/fonts.css is deliberately excluded from that ignore list. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>	2026-09-05 19:07:55 +00:00
Marcos Paulo	fc063f606a	feat(content): migrate interactiveCopy into six typed collections Move the six remaining bilingual datasets from app.js:160 into Astro content collections so GuideSelector has data to drive. Mechanical copy of 178 strings (160 localized pairs + 18 worker array strings) plus the non-localized fields (status, path, command, score, icon, title, number). Source field on commonSkills embedded from skillSources to match the GuideSelectorData contract; if a URL changes, both this entry and skillSources/<id>.json must be updated. Status kept on trees even though GuideSelectorData omits it — index.html renders it. Did not delete interactiveCopy from app.js: legacy page still consumes it, and verify.mjs still asserts against it. Did not migrate the labels (data.labels.*) — those live inside render functions in app.js and belong to 15d.	2026-09-05 18:48:07 +00:00
Marcos Paulo	421c84ff92	Merge branch 'refactor/task-13-page-chapters' verify-and-publish / gate (push) Successful in 3m11s Details verify-and-publish / publish (push) Has been skipped Details	2026-09-05 18:40:36 +00:00
Marcos Paulo	d62c6bf958	Merge branch 'main' into refactor/task-13-page-chapters	2026-09-05 18:40:03 +00:00
Marcos Paulo	99ccc8e249	docs: list task 05b in the plan table	2026-09-05 18:39:27 +00:00
Marcos Paulo	966dfcb926	docs: add task 05b for the unmigrated interactiveCopy datasets	2026-09-05 18:39:09 +00:00
Marcos Paulo	99d42f8fbc	docs: record the 15a/15b/15c contracts in the 15d brief	2026-09-05 18:04:29 +00:00
Marcos Paulo	44f7fb8a01	Merge branch 'refactor/task-15b-copy-prompt' verify-and-publish / gate (push) Successful in 4m37s Details verify-and-publish / publish (push) Has been skipped Details	2026-09-05 17:51:54 +00:00
Marcos Paulo	ea5f9356e7	Merge branch 'main' into refactor/task-15b-copy-prompt	2026-09-05 17:51:30 +00:00
Marcos Paulo	e8f6b8f488	Merge branch 'refactor/task-15a-guide-selector'	2026-09-05 17:50:54 +00:00
Marcos Paulo	7a1211ac5f	fix(guide): match 15c event name and the legacy focus ring The island listened for `ai-for-dummies:language-change` on `document`, but task 15c dispatches `ai-for-dummies:languagechange` on `window`. Window events do not reach a document listener, so that path was dead; only the `<html lang>` MutationObserver was firing. The focus ring was `3px solid var(--red)` at `outline-offset: 2px`, applied globally to every button on the page. `responsive.css` uses gold at offset -3px for exactly these nine groups. Restored, and scoped to them.	2026-09-05 17:50:48 +00:00
Marcos Paulo	c6e6657086	feat(islands): add CopyPrompt and ReadingProgress for full-guide Two islands extracted from app.js for the full-guide migration (15d): - CopyPrompt: one instance per button. Reads #<target>.textContent, copies via navigator.clipboard.writeText with a document.execCommand textarea fallback (kept because workshop venues serve the site over plain HTTP, where the clipboard API is undefined — deleting the fallback silently breaks the lab). Writes a bilingual result string to the page-owned #copy-status live region and swaps the <span> to COPIED/COPIADO for 1800ms. Language comes from document.documentElement .lang via a MutationObserver, so 15c's toggle stays the single mechanism. - ReadingProgress: renders .reading-progress span and attaches a passive scroll listener that mirrors the existing app.js line 406 handler. Both scripts use <script is:inline> with a wire-once window flag, so a page that mounts the same island multiple times still ends up with exactly one set of listeners. Not done in this task: - app.js copyPrompt and reading-progress lines stay intact (verify.mjs still asserts the copyPrompt token against app.js; the verification- engineer owns that swap, scheduled for 15d) - src/pages/full-guide.astro (15d) - verify.mjs, tokens.css, src/content/config.ts - reformat of app.js For 15d: - import CopyPrompt three times (one per target: prompt-install-skills, prompt-basic, prompt-skills) - render <p id="copy-status" role="status" aria-live="polite"></p> once on the page; the island writes to it - import ReadingProgress and place it where the current .reading- progress div sits - prompt bodies for the <pre><code id="prompt-..."> elements come from src/content/{handsOnPrompts,skillInstallPrompts}; verified byte-equal to app.js — what lands on the clipboard is whatever those elements contain For 15c: - language mechanism is document.documentElement.lang via MutationObserver; do not invent a parallel signal Co-Authored-By: Claude Code <noreply@anthropic.com>	2026-09-05 17:49:48 +00:00
Marcos Paulo	9975757445	Merge branch 'refactor/task-15c-language-toggle'	2026-09-05 17:48:44 +00:00
Marcos Paulo	6ec1e31ec5	feat(guide): add shared selector island Add one client-visible controller for the nine full-guide selectors. Keep static shells and page migration out of scope.	2026-09-05 17:44:20 +00:00
Marcos Paulo	59bbff0ad9	feat: add full-guide language toggle Document the client-side, dual-rendered locale contract and dispatch a narrow language-change event for guide selector panels.\n\nDo not assemble the full-guide page or change its content collections; task 15d owns that integration.	2026-09-05 17:44:20 +00:00
Marcos Paulo	c19e77bcac	fix(chapters): narrow optional section fields in page frontmatter The chapters schema marks section.eyebrow / panelLabel / panelCode / steps / copy as optional, but pages /agents/, /models/, /skills/ consume them — index access without narrowing failed astro check with ts(18048). Same for SkillPackageExplorer: aria-selected was String(bool) which widened to plain string and failed ts(2322) against ButtonHTMLAttributes. Fix: guard each required field with a helper that throws a clear message on missing data, then read .en / .map from the narrowed value. Page rendering is unchanged — dist/ HTML for all four files is byte-identical before and after. No any / as any / ! / @ts-ignore. Schema and tsconfig untouched.	2026-09-05 17:41:38 +00:00
Marcos Paulo	73d1b62989	Merge branch 'main' into refactor/task-13-page-chapters	2026-09-05 17:31:14 +00:00
Marcos Paulo	8388dd63fe	fix(skills): keep file-prefix and label joined by template literal Prettier reformats JSX into one expression per line; splitting "{file.prefix}{file.label}" across two lines inserts a literal whitespace text node between them. Snapshot diff against .agents/snapshots/skills.txt showed the rendered HTML emitted "├── SKILL.md" (two spaces) where vanilla showed one. Joining the values into a single template expression keeps the rendered text byte-identical to the legacy source.	2026-09-05 17:24:54 +00:00
Marcos Paulo	9621ba44bf	feat: migrate chapter pages models, agents, skills to Astro Migrate the three remaining chapter pages to Astro routes, sharing ChapterLayout and ChapterHero/TopBar/SiteFooter blocks. /summary/ already in place from task 12. - /models/ -> src/pages/models.astro (zero JS) - /agents/ -> src/pages/agents.astro (zero JS) - /skills/ -> src/pages/skills.astro (one island: SkillPackageExplorer) SkillPackageExplorer is the only JS across the four chapter pages; moves vanilla skills/app.js content verbatim into the island. Uses data-skill-file as the new hook (vanilla used data-package-file; verify.mjs still asserts that on the legacy index.html). Copy lives in src/content/chapters/{models,agents,skills}.json. All four pages pass empty-text snapshot diffs against .agents/snapshots/{models,agents,skills,summary}.txt. pnpm run verify green: verify.mjs (16 sections), audit-ui.mjs, and check-tokens.mjs (212 marked token-gap markers, 0 unsuppressed). Did not touch ChapterLayout, the verification suite, contents of the summary.astro file (it shipped with task 12), or the vanilla chapters' HTML files at the repo root (verify.mjs still reads those).	2026-09-05 17:23:38 +00:00