---
// /full-guide/ — assembled from typed guide collections and the task 10 blocks.
// This route deliberately never imports the legacy full-guide HTML: task 20 removes
// that tree, and both locales must be present in the server-rendered document.
import { getCollection } from 'astro:content';
import BaseLayout from '../layouts/BaseLayout.astro';
import FleetDiagram from '../components/blocks/FleetDiagram.astro';
import HandoffTable from '../components/blocks/HandoffTable.astro';
import PhasePanel from '../components/blocks/PhasePanel.astro';
import RouteTable from '../components/blocks/RouteTable.astro';
import SkillPackage from '../components/blocks/SkillPackage.astro';
import WorktreeMap from '../components/blocks/WorktreeMap.astro';
import CopyPrompt from '../components/islands/CopyPrompt.astro';
import GuideSelector from '../components/islands/GuideSelector.astro';
import LanguageToggle from '../components/islands/LanguageToggle.astro';
import ReadingProgress from '../components/islands/ReadingProgress.astro';
import '../../legacy/styles/guide.css';
import '../../legacy/styles/audit.css';

type Entry<T extends { id: string }> = { data: T };
const toRecord = <T extends { id: string }>(entries: Entry<T>[]) =>
  Object.fromEntries(entries.map(({ data }) => [data.id, data]));
const [
  phaseEntries,
  workerEntries,
  treeEntries,
  routeEntries,
  providerEntries,
  effortEntries,
  skillFileEntries,
  workflowEntries,
  commonSkillEntries,
  promptEntries,
  installEntries,
] = await Promise.all([
  getCollection('phases'),
  getCollection('workers'),
  getCollection('trees'),
  getCollection('routes'),
  getCollection('providers'),
  getCollection('efforts'),
  getCollection('skillFiles'),
  getCollection('skillWorkflow'),
  getCollection('commonSkills'),
  getCollection('handsOnPrompts'),
  getCollection('skillInstallPrompts'),
]);
const phases = toRecord(phaseEntries);
const workers = toRecord(workerEntries);
const trees = toRecord(treeEntries);
const routes = toRecord(routeEntries);
const providers = toRecord(providerEntries);
const efforts = toRecord(effortEntries);
const skillFiles = toRecord(skillFileEntries);
const skillWorkflow = toRecord(workflowEntries);
const commonSkills = toRecord(commonSkillEntries);
const sortedCommonSkills = Object.values(commonSkills).sort((a, b) =>
  a.number.localeCompare(b.number),
);
const handsOn = promptEntries.find(({ data }) => data.id === 'tiny-tasks')?.data;
const install = installEntries.find(({ data }) => data.id === 'install')?.data;
if (!handsOn || !install) throw new Error('full-guide content collections are incomplete');

// Selector chrome is page-specific, so it remains an inline bilingual constant.
const labels = {
  context: { en: 'context: isolated', pt: 'contexto: isolado' },
  owner: { en: 'OWNER', pt: 'RESPONSÁVEL' },
  reasoningLoad: { en: 'REASONING LOAD', pt: 'CARGA DE RACIOCÍNIO' },
  officialSource: { en: 'OFFICIAL SOURCE ↗', pt: 'FONTE OFICIAL ↗' },
  skillFileHint: {
    en: 'select another file to explore',
    pt: 'clique em outro arquivo para explorar',
  },
  workflow: {
    question: { en: 'QUESTION', pt: 'PERGUNTA' },
    action: { en: 'ACTION', pt: 'AÇÃO' },
    artifact: { en: 'ARTIFACT', pt: 'ARTEFATO' },
    proof: { en: 'PROOF', pt: 'PROVA' },
  },
  commonSkill: {
    whenToUse: { en: 'WHEN TO USE', pt: 'QUANDO USAR' },
    example: { en: 'EXAMPLE', pt: 'EXEMPLO' },
    watchOut: { en: 'WATCH OUT', pt: 'CUIDADO' },
    source: { en: 'GITHUB SOURCE ↗', pt: 'FONTE NO GITHUB ↗' },
  },
};
const builderSteps: Record<
  string,
  { title: { en: string; pt: string }; tagline: { en: string; pt: string } }
> = {
  observe: {
    title: { en: 'Observe', pt: 'Observar' },
    tagline: { en: 'find repeated friction', pt: 'encontre atrito repetido' },
  },
  trigger: {
    title: { en: 'Define trigger', pt: 'Definir gatilho' },
    tagline: { en: 'route precisely', pt: 'roteie com precisão' },
  },
  scaffold: {
    title: { en: 'Choose anatomy', pt: 'Escolher anatomia' },
    tagline: { en: 'only needed files', pt: 'apenas arquivos necessários' },
  },
  write: {
    title: { en: 'Write guidance', pt: 'Escrever orientação' },
    tagline: { en: 'decisions, not trivia', pt: 'decisões, não trivialidades' },
  },
  validate: {
    title: { en: 'Validate', pt: 'Validar' },
    tagline: { en: 'test real behavior', pt: 'teste comportamento real' },
  },
};
const selectorData = {
  phases,
  workers,
  trees,
  routes,
  providers,
  efforts,
  skillFiles,
  skillWorkflow,
  commonSkills,
  labels,
};
const workerCards = [
  {
    id: 'ui',
    label: 'UI',
    strong: { en: 'Component and visual states', pt: 'Componentes e estados visuais' },
    code: 'agent/ui',
  },
  {
    id: 'tests',
    label: 'TEST',
    strong: { en: 'Acceptance cases', pt: 'Casos de aceitação' },
    code: 'agent/tests',
  },
  {
    id: 'docs',
    label: 'DOCS',
    strong: { en: 'Guide and examples', pt: 'Guia e exemplos' },
    code: 'agent/docs',
  },
];
const treeBranches = [
  {
    id: 'ui',
    label: { en: 'UI AGENT', pt: 'AGENTE DE UI' },
    strong: 'agent/ui',
    small: { en: '3 files · working', pt: '3 arquivos · trabalhando' },
    tone: 'ui',
  },
  {
    id: 'tests',
    label: { en: 'TEST AGENT', pt: 'AGENTE DE TESTES' },
    strong: 'agent/tests',
    small: { en: '8 checks · ready', pt: '8 verificações · pronto' },
    tone: 'tests',
  },
  {
    id: 'docs',
    label: { en: 'DOCS AGENT', pt: 'AGENTE DE DOCS' },
    strong: 'agent/docs',
    small: { en: '2 pages · review', pt: '2 páginas · revisão' },
    tone: 'docs',
  },
];
const base = import.meta.env.BASE_URL;
---

<BaseLayout
  title="AI For Dummies — Field Guide"
  description="AI For Dummies: a field guide to skills, models, subagents, and worktrees."
>
  <ReadingProgress />
  <main id="full-guide">
    <header class="topbar">
      <a class="brand" href="#top"><span class="mark">A</span> field guide</a>
      <nav class="chapter-links" aria-label="Chapter sections">
        <a href="#fleet"
          ><span data-language-content="en">01 fleet</span><span data-language-content="pt" hidden
            >01 frota</span
          ></a
        ><a href="#worktrees"
          ><span data-language-content="en">02 worktrees</span><span
            data-language-content="pt"
            hidden>02 worktrees</span
          ></a
        ><a href="#models"
          ><span data-language-content="en">03 models</span><span data-language-content="pt" hidden
            >03 modelos</span
          ></a
        ><a href="#skills"
          ><span data-language-content="en">04 skills</span><span data-language-content="pt" hidden
            >04 skills</span
          ></a
        ><a href="#create-skill"
          ><span data-language-content="en">05 create</span><span data-language-content="pt" hidden
            >05 criar</span
          ></a
        ><a href="#field-kit"
          ><span data-language-content="en">06 field kit</span><span
            data-language-content="pt"
            hidden>06 kit de campo</span
          ></a
        ><a href="#hands-on"
          ><span data-language-content="en">07 hands-on</span><span
            data-language-content="pt"
            hidden>07 prática</span
          ></a
        ><a href="#verification">08 verify</a>
      </nav>
      <div class="topbar-tools">
        <a class="skills-review-link" href={`${base}skills-review/`}>review submissions ↗</a
        ><LanguageToggle /><span class="edition"
          ><span data-language-content="en">AI ENGINEERING <i></i> 01 / 2026</span><span
            data-language-content="pt"
            hidden>ENGENHARIA DE IA <i></i> 01 / 2026</span
          ></span
        >
      </div>
    </header>

    <section class="hero" id="top" data-language-content="en">
      <div>
        <p class="eyebrow">
          <span data-language-content="en">A presentation for humans who ship</span><span
            data-language-content="pt"
            hidden>Uma apresentação para quem entrega software</span
          >
        </p><h1>
          AI for<br /><em>dummies.</em>
        </h1><p class="lede">
          <span data-language-content="en"
            >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.</span
          >
          <span data-language-content="pt" hidden
            >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.</span
          >
        </p>
      </div><aside class="hero-index">
        <span
          ><span data-language-content="en">FIELD NOTE / 001</span><span
            data-language-content="pt"
            hidden>NOTA DE CAMPO / 001</span
          ></span
        ><strong
          ><span data-language-content="en">Ship the<br /><em>system.</em></span><span
            data-language-content="pt"
            hidden>Entregue o<br /><em>sistema.</em></span
          ></strong
        ><small
          ><span data-language-content="en">Skills · agents · worktrees · proof</span><span
            data-language-content="pt"
            hidden>Skills · agentes · worktrees · evidências</span
          ></small
        >
      </aside>
    </section>
    <section class="hero" id="top-pt" data-language-content="pt" hidden>
      <div>
        <p class="eyebrow">Uma apresentação para quem entrega software</p><h1>
          AI for<br /><em>dummies.</em>
        </h1><p class="lede">
          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.
        </p>
      </div><aside class="hero-index">
        <span>NOTA DE CAMPO / 001</span><strong>Entregue o<br /><em>sistema.</em></strong><small
          >Skills · agentes · worktrees · evidências</small
        >
      </aside>
    </section>

    <section class="hero-stats" aria-label="Chapter summary" data-language-content="en">
      <div>
        <strong>01</strong><span
          ><span data-language-content="en">strong model<br />for ambiguity</span><span
            data-language-content="pt"
            hidden>modelo forte<br />para ambiguidade</span
          ></span
        >
      </div><div>
        <strong>03</strong><span
          ><span data-language-content="en">bounded workers<br />in parallel</span><span
            data-language-content="pt"
            hidden>workers delimitados<br />em paralelo</span
          ></span
        >
      </div><div>
        <strong>∞</strong><span
          ><span data-language-content="en">iterations<br />with evidence</span><span
            data-language-content="pt"
            hidden>iterações<br />com evidências</span
          ></span
        >
      </div><p>
        <span data-language-content="en">Read this as a route map, not a prompt recipe.</span><span
          data-language-content="pt"
          hidden>Leia isto como um mapa de rota, não como uma receita de prompt.</span
        >
      </p>
    </section>
    <section class="hero-stats" aria-label="Resumo dos capítulos" data-language-content="pt" hidden>
      <div><strong>01</strong><span>modelo forte<br />para ambiguidade</span></div><div>
        <strong>03</strong><span>workers delimitados<br />em paralelo</span>
      </div><div><strong>∞</strong><span>iterações<br />com evidências</span></div><p>
        Leia isto como um mapa de rota, não como uma receita de prompt.
      </p>
    </section>

    <section class="thesis" data-language-content="en">
      <div>
        <span
          ><span data-language-content="en">RULE ZERO</span><span data-language-content="pt" hidden
            >REGRA ZERO</span
          ></span
        ><strong
          ><span data-language-content="en"
            >Strong model for ambiguity.<br />Light model for bounded work.</span
          ><span data-language-content="pt" hidden
            >Modelo forte para ambiguidade.<br />Modelo leve para trabalho delimitado.</span
          ></strong
        >
      </div><div class="signal" aria-hidden="true">
        <b>THINK</b><i></i><i></i><i></i><b>MAKE</b>
      </div>
    </section>
    <section class="thesis" data-language-content="pt" hidden>
      <div>
        <span>REGRA ZERO</span><strong
          >Modelo forte para ambiguidade.<br />Modelo leve para trabalho delimitado.</strong
        >
      </div><div class="signal" aria-hidden="true">
        <b>THINK</b><i></i><i></i><i></i><b>MAKE</b>
      </div>
    </section>

    <section class="fleet" id="fleet">
      <div class="section-label">
        <span
          ><span data-language-content="en">A small fleet</span><span
            data-language-content="pt"
            hidden>Uma pequena frota</span
          ></span
        ><span
          ><span data-language-content="en">coordination before parallelism</span><span
            data-language-content="pt"
            hidden>coordenação antes do paralelismo</span
          ></span
        >
      </div><FleetDiagram
        orchestrator={{
          eyebrow: { en: 'ORCHESTRATOR', pt: 'ORQUESTRADOR' },
          title: {
            en: 'Decides what<br />needs to happen.',
            pt: 'Decide o que<br />precisa acontecer.',
          },
          code: 'Opus / reasoning',
        }}
        workers={workerCards}
      /><div class="worker-detail" id="worker-detail" aria-live="polite">
        <span>{workers.ui.en[0]}</span><strong>{workers.ui.en[1]}</strong><small
          >{workers.ui.en[2]}</small
        >
      </div><p class="caption">
        <span data-language-content="en"
          >The orchestrator preserves intent, writes small contracts, and gathers results that can
          be verified. It does not need to type every line.</span
        ><span data-language-content="pt" hidden
          >O orquestrador preserva a intenção, escreve pequenos contratos e reúne resultados
          verificáveis. Ele não precisa digitar cada linha.</span
        >
      </p>
    </section>
    <section class="failure-map">
      <div class="section-label">
        <span
          ><span data-language-content="en">Why the boundary matters</span><span
            data-language-content="pt"
            hidden>Por que a fronteira importa</span
          ></span
        ><span
          ><span data-language-content="en">one vague task / three predictable failures</span><span
            data-language-content="pt"
            hidden>uma tarefa vaga / três falhas previsíveis</span
          ></span
        >
      </div><div class="failure-grid">
        <article>
          <span>01</span><strong
            ><span data-language-content="en">Context soup</span><span
              data-language-content="pt"
              hidden>Sopa de contexto</span
            ></strong
          ><p>
            <span data-language-content="en"
              >Every worker reads everything. Nobody knows which facts are load-bearing.</span
            ><span data-language-content="pt" hidden
              >Cada worker lê tudo. Ninguém sabe quais fatos são essenciais.</span
            >
          </p>
        </article><article>
          <span>02</span><strong
            ><span data-language-content="en">Branch collision</span><span
              data-language-content="pt"
              hidden>Colisão de branches</span
            ></strong
          ><p>
            <span data-language-content="en"
              >Two agents touch the same checkout. The fastest path becomes conflict resolution.</span
            ><span data-language-content="pt" hidden
              >Dois agentes usam o mesmo checkout. O caminho mais rápido vira resolução de
              conflitos.</span
            >
          </p>
        </article><article>
          <span>03</span><strong
            ><span data-language-content="en">Confident drift</span><span
              data-language-content="pt"
              hidden>Desvio confiante</span
            ></strong
          ><p>
            <span data-language-content="en"
              >The diff is polished, but no one checks whether it solved the original problem.</span
            ><span data-language-content="pt" hidden
              >O diff parece ótimo, mas ninguém verifica se resolveu o problema original.</span
            >
          </p>
        </article>
      </div>
    </section>

    <section class="workflow" aria-labelledby="workflow-title">
      <div class="copy">
        <p class="eyebrow">
          <span data-language-content="en">The subagent loop</span><span
            data-language-content="pt"
            hidden>O ciclo de subagentes</span
          >
        </p><h2 id="workflow-title">
          <span data-language-content="en">Click a phase.<br /><em>See the handoff.</em></span><span
            data-language-content="pt"
            hidden>Clique em uma fase.<br /><em>Veja a passagem.</em></span
          >
        </h2><!-- The legacy PT render paints this paragraph twice; preserve that output. -->
        <p>
          <span data-language-content="en"
            >Delegation means moving one bounded task into a smaller context—not giving away
            responsibility.</span
          ><span data-language-content="pt" hidden
            >Delegar é mover uma tarefa delimitada para um contexto menor — não abrir mão da
            responsabilidade.</span
          >
        </p>
      </div><PhasePanel
        phases={[
          {
            id: 'plan',
            label: 'PLAN',
            number: '01',
            title: phases.plan.title.en,
            body: phases.plan.copy.en,
            meta: { deliverable: phases.plan.model.en, gate: labels.context.en },
            evidence: phases.plan.code.en,
          },
          {
            id: 'build',
            label: 'BUILD',
            number: '02',
            title: phases.build.title.en,
            body: phases.build.copy.en,
            meta: { deliverable: phases.build.model.en, gate: labels.context.en },
            evidence: phases.build.code.en,
          },
          {
            id: 'review',
            label: 'REVIEW',
            number: '03',
            title: phases.review.title.en,
            body: phases.review.copy.en,
            meta: { deliverable: phases.review.model.en, gate: labels.context.en },
            evidence: phases.review.code.en,
          },
        ]}
      />
    </section>
    <section class="handoff">
      <div class="section-label">
        <span
          ><span data-language-content="en">What crosses contexts</span><span
            data-language-content="pt"
            hidden>O que atravessa contextos</span
          ></span
        ><span
          ><span data-language-content="en">brief → diff → evidence</span><span
            data-language-content="pt"
            hidden>brief → diff → evidência</span
          ></span
        >
      </div><HandoffTable
        columns={[
          { en: 'Package', pt: 'Pacote' },
          { en: 'Contains', pt: 'Contém' },
          { en: 'Why it matters', pt: 'Por que importa' },
        ]}
        rows={[
          {
            package: 'Brief',
            contains: 'goal, files, boundaries',
            why: 'stops the worker inventing the problem',
          },
          {
            package: 'Worktree',
            contains: 'branch and isolated checkout',
            why: 'parallel edits do not collide',
          },
          {
            package: 'Checks',
            contains: 'tests, build, criteria',
            why: 'turns “looks good” into evidence',
          },
          {
            package: 'Diff',
            contains: 'small, reviewable change',
            why: 'integration and discard stay cheap',
          },
        ]}
      />
    </section>

    <section class="worktrees" id="worktrees">
      <div class="worktree-intro">
        <p class="eyebrow">
          <span data-language-content="en">Git worktrees</span><span
            data-language-content="pt"
            hidden>Git worktrees</span
          >
        </p><h2>
          <span data-language-content="en">One branch<br />per <em>hand.</em></span><span
            data-language-content="pt"
            hidden>Uma branch<br />por <em>mão.</em></span
          >
        </h2><p>
          <span data-language-content="en"
            >A worktree is another directory linked to the same repository. Each agent gets its own
            checkout and index; history remains shared.</span
          ><span data-language-content="pt" hidden
            >Um worktree é outro diretório ligado ao mesmo repositório. Cada agente recebe seu
            próprio checkout e índice; o histórico continua compartilhado.</span
          >
        </p><p class="interaction-hint">
          <span data-language-content="en"
            >Select a node to inspect its checkout, owner, and next action.</span
          ><span data-language-content="pt" hidden
            >Selecione um nó para inspecionar checkout, responsável e próxima ação.</span
          >
        </p>
      </div><div class="tree-lab">
        <div class="tree-toolbar">
          <span
            ><span data-language-content="en">repository topology</span><span
              data-language-content="pt"
              hidden>topologia do repositório</span
            ></span
          ><span class="tree-live"
            ><span data-language-content="en"><i></i> 4 checkouts</span><span
              data-language-content="pt"
              hidden><i></i> 4 checkouts</span
            ></span
          >
        </div><WorktreeMap
          branches={treeBranches}
          rootLabel={{ en: 'ROOT', pt: 'RAIZ' }}
          rootSmall={{ en: '● clean', pt: '● limpo' }}
        /><article class="tree-detail" id="tree-detail" aria-live="polite">
          <div><span>{labels.owner.en}</span><strong>{trees.main.owner.en}</strong></div><div>
            <span>CHECKOUT</span><strong>{trees.main.path}</strong>
          </div><p>{trees.main.note.en}</p><code>{trees.main.command}</code>
        </article>
      </div>
    </section>

    <section class="routing">
      <div>
        <p class="eyebrow">
          <span data-language-content="en">Model routing</span><span
            data-language-content="pt"
            hidden>Roteamento de modelos</span
          >
        </p><h2>
          <span data-language-content="en"
            >Do not pay for<br />reasoning where<br />you need <em>rhythm.</em></span
          ><span data-language-content="pt" hidden
            >Não pague por<br />raciocínio onde precisa<br />de <em>ritmo.</em></span
          >
        </h2><p class="interaction-hint">
          <span data-language-content="en">Choose a job to see why the model profile changes.</span
          ><span data-language-content="pt" hidden
            >Escolha um trabalho para entender por que o perfil do modelo muda.</span
          >
        </p>
      </div><div class="route-console">
        <RouteTable
          headWork={{ en: 'Work', pt: 'Trabalho' }}
          headProfile={{ en: 'Profile', pt: 'Perfil' }}
          headPromptShape={{ en: 'Prompt shape', pt: 'Formato do prompt' }}
          routes={[
            {
              id: 'plan',
              strong: { en: 'Plan', pt: 'Planejar' },
              profile: 'strong / broad',
              prompt: 'What changes? What can break?',
            },
            {
              id: 'build',
              strong: { en: 'Build', pt: 'Construir' },
              profile: 'fast / focused',
              prompt: 'Implement this slice. Run these checks.',
            },
            {
              id: 'explore',
              strong: { en: 'Explore', pt: 'Explorar' },
              profile: 'read-only / light',
              prompt: 'Find where this contract is used.',
            },
            {
              id: 'review',
              strong: { en: 'Review', pt: 'Revisar' },
              profile: 'independent',
              prompt: 'Does the diff satisfy the brief?',
            },
          ]}
        /><article class="route-detail" id="route-detail" aria-live="polite">
          <div class="route-meter"><span style={`--score:${routes.plan.score}%`}></span></div><div>
            <small>{labels.reasoningLoad.en} · {routes.plan.score}</small><strong
              >{routes.plan.label.en}</strong
            ><p>{routes.plan.why.en}</p>
          </div>
        </article>
      </div>
    </section>

    <section class="model-gearbox" id="models">
      <div class="section-label">
        <span
          ><span data-language-content="en">Model gearbox</span><span
            data-language-content="pt"
            hidden>Câmbio de modelos</span
          ></span
        ><span
          ><span data-language-content="en">capability tier × thinking effort</span><span
            data-language-content="pt"
            hidden>nível de capacidade × esforço de raciocínio</span
          ></span
        >
      </div>
      <div class="gearbox-intro">
        <div>
          <p class="eyebrow">
            <span data-language-content="en">Two separate knobs</span><span
              data-language-content="pt"
              hidden>Dois controles separados</span
            >
          </p>
          <h2>
            <span data-language-content="en"
              >Choose the engine.<br />Then choose the <em>gear.</em></span
            ><span data-language-content="pt" hidden
              >Escolha o motor.<br />Depois escolha a <em>marcha.</em></span
            >
          </h2>
        </div>
        <p>
          <span data-language-content="en"
            >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.</span
          ><span data-language-content="pt" hidden
            >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.</span
          >
        </p>
      </div>
      <div class="gearbox">
        <div class="provider-tabs" role="tablist" aria-label="Model providers">
          <button class="active" data-model-provider="openai" role="tab" aria-selected="true"
            >OPENAI</button
          ><button data-model-provider="claude" role="tab" aria-selected="false">CLAUDE</button
          ><button data-model-provider="gemini" role="tab" aria-selected="false">GEMINI</button>
        </div><article class="provider-detail" id="provider-detail" aria-live="polite">
          <header>
            <span>{providers.openai.label}</span><a
              href={providers.openai.source}
              target="_blank"
              rel="noopener">{labels.officialSource.en}</a
            >
          </header><h3>{providers.openai.title.en}</h3><p>{providers.openai.copy.en}</p>
        </article><div class="effort-rail" role="tablist" aria-label="Reasoning effort">
          <span
            ><span data-language-content="en">REASONING / THINKING</span><span
              data-language-content="pt"
              hidden>RACIOCÍNIO / PENSAMENTO</span
            ></span
          >
          <button data-effort="low" role="tab" aria-selected="false"
            ><b
              ><span data-language-content="en">LOW</span><span data-language-content="pt" hidden
                >BAIXO</span
              ></b
            ><small
              ><span data-language-content="en">bounded + fast</span><span
                data-language-content="pt"
                hidden>delimitado + rápido</span
              ></small
            ></button
          ><button class="active" data-effort="medium" role="tab" aria-selected="true"
            ><b
              ><span data-language-content="en">MEDIUM</span><span data-language-content="pt" hidden
                >MÉDIO</span
              ></b
            ><small
              ><span data-language-content="en">default start</span><span
                data-language-content="pt"
                hidden>ponto inicial</span
              ></small
            ></button
          ><button data-effort="high" role="tab" aria-selected="false"
            ><b
              ><span data-language-content="en">HIGH</span><span data-language-content="pt" hidden
                >ALTO</span
              ></b
            ><small
              ><span data-language-content="en">complex + costly</span><span
                data-language-content="pt"
                hidden>complexo + custoso</span
              ></small
            ></button
          >
        </div><article class="effort-detail" id="effort-detail" aria-live="polite">
          <span>{efforts.medium.en[0]}</span><p>{efforts.medium.en[1]}</p><code
            >{providers.openai.config}</code
          >
        </article>
      </div>
      <div class="gearbox-rule">
        <span
          ><span data-language-content="en">ROUTING RULE</span><span
            data-language-content="pt"
            hidden>REGRA DE ROTEAMENTO</span
          ></span
        >
        <strong
          ><span data-language-content="en"
            >Use strong models for ambiguity and judgment. Use lighter models for bounded execution.
            Raise effort only when evaluation shows a gain.</span
          ><span data-language-content="pt" hidden
            >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.</span
          ></strong
        >
      </div>
    </section>

    <section class="skills" id="skills">
      <div>
        <p class="eyebrow">
          {
            /* Under Portuguese the legacy page paints the long skill sentence
              here, not "Skills": its `.skills > div:first-child > p` selector
              also matches this eyebrow and overwrites it. Reproduced on
              purpose -- see .agents/rules/content-i18n.md. */
          }
          <span data-language-content="en">Skills</span><span data-language-content="pt" hidden
            >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.</span
          >
        </p><h2>
          <span data-language-content="en">Write the right way<br /><em>once.</em></span><span
            data-language-content="pt"
            hidden>Escreva do jeito certo<br /><em>uma vez.</em></span
          >
        </h2><p>
          <span data-language-content="en"
            >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.</span
          >
          <span data-language-content="pt" hidden
            >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.</span
          >
        </p><div class="skill-principles">
          <span data-language-content="en">01 / trigger clearly</span><span
            data-language-content="pt"
            hidden>01 / defina o gatilho</span
          >
          <span data-language-content="en">02 / load detail on demand</span><span
            data-language-content="pt"
            hidden>02 / carregue detalhes sob demanda</span
          >
          <span data-language-content="en">03 / return evidence</span><span
            data-language-content="pt"
            hidden>03 / devolva evidências</span
          >
        </div>
      </div><div class="skill-explorer">
        <SkillPackage
          packageLabel={{ en: 'SKILL PACKAGE', pt: 'PACOTE DE SKILL' }}
          files={[
            { id: 'skill', path: 'SKILL.md', small: 'procedure and limits' },
            { id: 'references', path: 'references/', small: 'facts to consult' },
            { id: 'scripts', path: 'scripts/', small: 'repeatable checks' },
            { id: 'assets', path: 'assets/', small: 'templates and examples' },
          ]}
        /><article class="skill-detail" id="skill-detail" aria-live="polite">
          <span>{skillFiles.skill.icon}</span><div>
            <strong>{skillFiles.skill.title}</strong><p>{skillFiles.skill.en}</p><small
              >{labels.skillFileHint.en}</small
            >
          </div>
        </article>
      </div><pre><code>name: review-ui · check focus, mobile, reduced motion · run verification · return evidence</code></pre>
    </section>

    <section class="skill-builder" id="create-skill">
      <div class="section-label">
        <span
          ><span data-language-content="en">Create a skill</span><span
            data-language-content="pt"
            hidden>Criar uma skill</span
          ></span
        ><span
          ><span data-language-content="en">repeatable pain → reusable judgment</span><span
            data-language-content="pt"
            hidden>atrito repetido → julgamento reutilizável</span
          ></span
        >
      </div><div class="builder-intro">
        <div>
          <p class="eyebrow">
            <span data-language-content="en">The skill forge</span><span
              data-language-content="pt"
              hidden>A forja de skills</span
            >
          </p><h2>
            <span data-language-content="en"
              >Teach the decision.<br />Keep the context <em>light.</em></span
            ><span data-language-content="pt" hidden
              >Ensine a decisão.<br />Mantenha o contexto <em>leve.</em></span
            >
          </h2>
        </div><p>
          <span data-language-content="en"
            >Do not package everything you know. Capture the non-obvious choices that repeatedly
            improve an outcome, then prove the skill changes behavior.</span
          ><span data-language-content="pt" hidden
            >Não empacote tudo o que você sabe. Capture as escolhas não óbvias que melhoram
            resultados repetidamente e prove que a skill muda o comportamento.</span
          >
        </p>
      </div><div class="builder-workbench">
        <nav class="builder-steps" role="tablist" aria-label="Skill creation workflow">
          {
            ['observe', 'trigger', 'scaffold', 'write', 'validate'].map((id) => {
              const step = skillWorkflow[id];
              return (
                <button
                  class:list={{ active: step.id === 'observe' }}
                  data-skill-step={step.id}
                  role="tab"
                  aria-selected={step.id === 'observe'}
                >
                  <>
                    <b>{step.number}</b>
                    <>
                      <span>
                        <>
                          <span data-language-content="en">{builderSteps[step.id].title.en}</span>
                          <span data-language-content="pt" hidden>
                            {builderSteps[step.id].title.pt}
                          </span>
                        </>
                      </span>
                      <small>
                        <>
                          <span data-language-content="en">{builderSteps[step.id].tagline.en}</span>
                          <span data-language-content="pt" hidden>
                            {builderSteps[step.id].tagline.pt}
                          </span>
                        </>
                      </small>
                    </>
                  </>
                </button>
              );
            })
          }
        </nav><article class="builder-detail" id="builder-detail" aria-live="polite">
          <header>
            <span>{skillWorkflow.observe.number}</span><small>{labels.workflow.question.en}</small>
          </header><h3>{skillWorkflow.observe.title.en}</h3><blockquote>
            {skillWorkflow.observe.question.en}
          </blockquote><div class="builder-action">
            <span>{labels.workflow.action.en}</span><p>{skillWorkflow.observe.action.en}</p>
          </div><footer>
            <div>
              <span>{labels.workflow.artifact.en}</span><strong
                >{skillWorkflow.observe.output.en}</strong
              >
            </div><div>
              <span>{labels.workflow.proof.en}</span><strong
                >{skillWorkflow.observe.proof.en}</strong
              >
            </div>
          </footer>
        </article><aside class="builder-artifact">
          <div class="artifact-head">
            <span
              ><span data-language-content="en">OUTPUT / SKILL PACKAGE</span><span
                data-language-content="pt"
                hidden>SAÍDA / PACOTE DE SKILL</span
              ></span
            ><i></i>
          </div><pre
            aria-label="Example skill structure"><code>review-ui/<br />├── SKILL.md<br />├── agents/<br />│   └── openai.yaml<br />├── references/<br />│   └── accessibility.md<br />└── scripts/<br />    └── verify.mjs</code></pre><div
            class="artifact-command"
          >
            <span
              ><span data-language-content="en">VALIDATE</span><span
                data-language-content="pt"
                hidden>VALIDAR</span
              ></span
            ><code>quick_validate.py ./review-ui</code>
          </div>
        </aside>
      </div><div class="builder-loop">
        <span
          ><span data-language-content="en">AFTER REAL USE</span><span
            data-language-content="pt"
            hidden>APÓS USO REAL</span
          ></span
        ><div data-language-content="en">
          <b>observe failure</b><i>→</i><b>sharpen one rule</b><i>→</i><b>retest behavior</b><i>→</i
          ><b>keep it narrow</b>
        </div><div data-language-content="pt" hidden>
          <b>observar falha</b><i>→</i><b>refinar uma regra</b><i>→</i><b>retestar comportamento</b
          ><i>→</i><b>manter estreita</b>
        </div>
      </div>
    </section>

    <section class="skill-catalog" id="field-kit">
      <div class="section-label">
        <span
          ><span data-language-content="en">Common skills</span><span
            data-language-content="pt"
            hidden>Skills comuns</span
          ></span
        ><span
          ><span data-language-content="en">choose behavior before model</span><span
            data-language-content="pt"
            hidden>escolha o comportamento antes do modelo</span
          ></span
        >
      </div><div class="catalog-intro">
        <div>
          <p class="eyebrow">
            <span data-language-content="en">The field kit</span><span
              data-language-content="pt"
              hidden>O kit de campo</span
            >
          </p>
          <h2>
            <span data-language-content="en"
              >Different jobs.<br />Different <em>instincts.</em></span
            ><span data-language-content="pt" hidden
              >Trabalhos diferentes.<br />Instintos <em>diferentes.</em></span
            >
          </h2>
        </div>
        <p>
          <span data-language-content="en"
            >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.</span
          ><span data-language-content="pt" hidden
            >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.</span
          >
        </p>
      </div><div class="skill-deck">
        <div class="skill-index" role="tablist" aria-label="Common agent skills">
          {
            /* getCollection's order is not the deck's order. Sort by the
               card number so the tabs stay 01..07 as the legacy page has
               them, instead of shifting between builds. */
            sortedCommonSkills.map((skill) => (
              <button
                class:list={{ active: skill.id === 'ponytail' }}
                data-common-skill={skill.id}
                role="tab"
                aria-selected={skill.id === 'ponytail'}
              >
                <>
                  {/* The button's two lines are `label` / `tagline`, not the
                      panel's `kind` / `use`. See src/content/config.ts. */}
                  <span>
                    <span data-language-content="en">{skill.label.en}</span>
                    <span data-language-content="pt" hidden>
                      {skill.label.pt}
                    </span>
                  </span>
                  <strong>{skill.title}</strong>
                  <small>
                    <span data-language-content="en">{skill.tagline.en}</span>
                    <span data-language-content="pt" hidden>
                      {skill.tagline.pt}
                    </span>
                  </small>
                </>
              </button>
            ))
          }
        </div><article class="common-skill-detail" id="common-skill-detail" aria-live="polite">
          <header>
            <span>{commonSkills.ponytail.number}</span><small>{commonSkills.ponytail.kind.en}</small
            >
          </header><h3>{commonSkills.ponytail.title}</h3><blockquote>
            {commonSkills.ponytail.rule.en}
          </blockquote><div class="common-skill-notes">
            <div>
              <span>{labels.commonSkill.whenToUse.en}</span><p>{commonSkills.ponytail.use.en}</p>
            </div><div>
              <span>{labels.commonSkill.example.en}</span><p>{commonSkills.ponytail.example.en}</p>
            </div><div>
              <span>{labels.commonSkill.watchOut.en}</span><p>{commonSkills.ponytail.caution.en}</p>
            </div>
          </div><a
            class="skill-source"
            href={commonSkills.ponytail.source}
            target="_blank"
            rel="noopener">{labels.commonSkill.source.en}</a
          >
        </article>
      </div><div class="skill-loadout">
        <span data-language-content="en">ONE PRACTICAL LOADOUT</span><span
          data-language-content="pt"
          hidden>UM LOADOUT PRÁTICO</span
        >
        <div data-language-content="en">
          <b>PLAN</b> unlazy <i>→</i>
          <b>BUILD</b> ponytail-lite <i>→</i>
          <b>DEBUG</b> diagnosing-bugs <i>→</i>
          <b>REPORT</b> caveman
        </div>
        <div data-language-content="pt" hidden>
          <b>PLANEJAR</b> unlazy <i>→</i>
          <b>CONSTRUIR</b> ponytail-lite <i>→</i>
          <b>DIAGNOSTICAR</b> diagnosing-bugs <i>→</i>
          <b>REPORTAR</b> caveman
        </div>
      </div><article class="install-skills">
        <header>
          <div>
            <span
              ><span data-language-content="en">INSTALL PACK</span><span
                data-language-content="pt"
                hidden>PACOTE DE INSTALAÇÃO</span
              ></span
            ><strong
              ><span data-language-content="en"
                >Ask your coding agent to verify, install, and validate the skills.</span
              ><span data-language-content="pt" hidden
                >Peça ao seu agente para verificar, instalar e validar as skills.</span
              ></strong
            >
          </div><CopyPrompt target="prompt-install-skills" />
        </header><pre><code id="prompt-install-skills"><span data-language-content="en">{install.en}</span><span data-language-content="pt" hidden>{install.pt}</span></code></pre><footer
        >
          <span data-language-content="en"
            >Review every source before installation. Existing local skills must be preserved.</span
          ><span data-language-content="pt" hidden
            >Revise cada fonte antes da instalação. Skills locais existentes devem ser preservadas.</span
          >
        </footer>
      </article>
    </section>

    <section class="hands-on" id="hands-on">
      <div class="section-label">
        <span
          ><span data-language-content="en">Hands-on</span><span data-language-content="pt" hidden
            >Prática</span
          ></span
        ><span
          ><span data-language-content="en">10 minutes / one missing feature</span><span
            data-language-content="pt"
            hidden>10 minutos / uma feature ausente</span
          ></span
        >
      </div><div class="hands-intro">
        <div>
          <p class="eyebrow">
            <span data-language-content="en">Tiny Tasks lab</span><span
              data-language-content="pt"
              hidden>Laboratório Tiny Tasks</span
            >
          </p><h2>
            <span data-language-content="en">Same task.<br />Better <em>operating system.</em></span
            ><span data-language-content="pt" hidden
              >Mesma tarefa.<br />Melhor <em>sistema operacional.</em></span
            >
          </h2>
        </div><div>
          <p data-language-content="en">
            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.
          </p><p data-language-content="pt" hidden>
            Comece com um quadro estático propositalmente incompleto. Execute um prompt, restaure e
            execute a versão com skills. Compare tamanho do diff, evidências e complexidade
            desnecessária.
          </p><div class="starter-links">
            <div class="starter-link-group">
              <a href={`${base}hands-on/starter/`} class="starter-link"
                ><span data-language-content="en">Open the starter →</span><span
                  data-language-content="pt"
                  hidden>Abrir o projeto inicial →</span
                ></a
              ><a
                href="https://git.marcospaulo.dev.br/netcracker/ai-for-dummies/src/branch/pages/hands-on/starter"
                class="starter-link starter-link-source"
                ><span data-language-content="en">Clone from Gitea →</span><span
                  data-language-content="pt"
                  hidden>Abrir o projeto inicial →</span
                ></a
              >
            </div><div class="starter-link-group">
              <a href={`${base}hands-on/rules/`} class="starter-link"
                ><span data-language-content="en">Open the rules lab →</span><span
                  data-language-content="pt"
                  hidden>Abrir o projeto inicial →</span
                ></a
              ><a
                href="https://git.marcospaulo.dev.br/netcracker/ai-for-dummies/src/branch/pages/hands-on/rules"
                class="starter-link starter-link-source"
                ><span data-language-content="en">Clone from Gitea →</span><span
                  data-language-content="pt"
                  hidden>Abrir o projeto inicial →</span
                ></a
              >
            </div>
          </div>
        </div>
      </div><div class="exercise-brief">
        <span
          ><span data-language-content="en">THE MISSING FEATURE</span><span
            data-language-content="pt"
            hidden>A FEATURE AUSENTE</span
          ></span
        ><strong
          ><span data-language-content="en"
            >Add All / Open / Done filters that survive reload and browser navigation.</span
          ><span data-language-content="pt" hidden
            >Adicione filtros Todos / Abertos / Concluídos que sobrevivem reload e navegação.</span
          ></strong
        ><div>
          <span data-language-content="en"
            ><b>STACK</b> HTML · CSS · JavaScript <b>DEPENDENCIES</b> none <b>FILES</b> 3</span
          ><span data-language-content="pt" hidden
            ><b>STACK</b> HTML · CSS · JavaScript <b>DEPENDÊNCIAS</b> nenhuma <b>ARQUIVOS</b> 3</span
          >
        </div>
      </div><div class="prompt-compare">
        <article class="prompt-card">
          <header>
            <div>
              <span>RUN A</span><strong
                ><span data-language-content="en">Good prompt</span><span
                  data-language-content="pt"
                  hidden>Bom prompt</span
                ></strong
              >
            </div><CopyPrompt target="prompt-basic" />
          </header><pre><code id="prompt-basic"><span data-language-content="en">{handsOn.en.basic}</span><span data-language-content="pt" hidden>{handsOn.pt.basic}</span></code></pre><footer
          >
            <span data-language-content="en"
              >Clear context · constraints · acceptance · evidence</span
            ><span data-language-content="pt" hidden
              >Contexto claro · restrições · aceitação · evidência</span
            >
          </footer>
        </article><article class="prompt-card enhanced">
          <header>
            <div>
              <span>RUN B</span><strong
                ><span data-language-content="en">Good prompt + skills</span><span
                  data-language-content="pt"
                  hidden>Bom prompt + skills</span
                ></strong
              >
            </div><CopyPrompt target="prompt-skills" />
          </header><pre><code id="prompt-skills"><span data-language-content="en">{handsOn.en.skills}</span><span data-language-content="pt" hidden>{handsOn.pt.skills}</span></code></pre><footer
          >
            <span data-language-content="en"
              >Same contract · explicit working methods · stronger proof</span
            ><span data-language-content="pt" hidden
              >Mesmo contrato · métodos explícitos · prova mais forte</span
            >
          </footer>
        </article>
      </div><div class="comparison-strip">
        <span
          ><span data-language-content="en">COMPARE THE RUNS</span><span
            data-language-content="pt"
            hidden>COMPARE AS EXECUÇÕES</span
          ></span
        ><div>
          <b>01</b>
          <span data-language-content="en">Files changed</span><span
            data-language-content="pt"
            hidden>Arquivos alterados</span
          >
        </div><div>
          <b>02</b>
          <span data-language-content="en">New dependencies</span><span
            data-language-content="pt"
            hidden>Novas dependências</span
          >
        </div><div>
          <b>03</b>
          <span data-language-content="en">Checks actually run</span><span
            data-language-content="pt"
            hidden>Checks executados</span
          >
        </div><div>
          <b>04</b>
          <span data-language-content="en">Evidence returned</span><span
            data-language-content="pt"
            hidden>Evidências retornadas</span
          >
        </div>
      </div><p class="copy-status" id="copy-status" role="status" aria-live="polite"></p>
    </section>

    <aside class="rule">
      <span
        ><span data-language-content="en">THE HUMAN JOB</span><span
          data-language-content="pt"
          hidden>O PAPEL HUMANO</span
        ></span
      ><strong
        ><span data-language-content="en"
          >The agent may be autonomous in execution. Intent, boundaries, and evidence remain yours.</span
        ><span data-language-content="pt" hidden
          >O agente pode ser autônomo na execução. Intenção, limites e evidências continuam sendo
          seus.</span
        ></strong
      >
    </aside>
    <aside class="callout">
      <span
        ><span data-language-content="en">START HERE</span><span data-language-content="pt" hidden
          >COMECE AQUI</span
        ></span
      ><strong
        ><span data-language-content="en"
          >Begin with one agent and one skill. Add parallelism only when the tasks are truly
          independent.</span
        ><span data-language-content="pt" hidden
          >Comece com um agente e uma skill. Adicione paralelismo apenas quando as tarefas forem
          realmente independentes.</span
        ></strong
      >
    </aside>
    <section class="verification" id="verification">
      <div class="section-label">
        <span>Verification</span><span>run each gate separately</span>
      </div><div class="verify-intro">
        <div>
          <p class="eyebrow">Checks become evidence</p><h2>
            Three layers.<br />Run each one alone.
          </h2>
        </div><p>
          Run a gate on its own line, print its exit code, attach the output. The result is the
          deliverable.
        </p>
      </div><div class="verify-layers">
        <article>
          <span>01 · STATIC</span><h3>Lint and types</h3><p>
            Format, lint, type-check. Fast and scoped to one file. Run on every save.
          </p><code>pnpm lint; echo "lint=$?" pnpm typecheck; echo "typecheck=$?"</code>
        </article><article>
          <span>02 · BEHAVIOR</span><h3>Unit and contract</h3><p>
            Tests that repeat. Run before claiming done.
          </p><code>pnpm test; echo "test=$?" cd services/api && go test ./...</code>
        </article><article>
          <span>03 · INTEGRATION</span><h3>Real UI and API</h3><p>
            Drive the actual UI, API, or browser. Slower and flakier — only this catches mobile
            overflow and a missing 404.
          </p><code>pnpm check:ui; echo "ui=$?" TURBO_FORCE=true pnpm e2e</code>
        </article>
      </div><div class="verify-antipatterns">
        <span>FOUR WAYS A GREEN REPORT IS FALSE</span><div class="ap-grid">
          <article>
            <b>1</b><div>
              <strong>Pipe a gate</strong><p>
                tail, grep, or head hide the real exit code — a pipeline returns the last command's
                status.
              </p>
            </div>
          </article><article>
            <b>2</b><div>
              <strong>Swallow a rejection</strong><p>
                A silent <code>{'.catch(() => {})'}</code> hides a panic, an upstream limit, or a partial
                failure.
              </p>
            </div>
          </article><article>
            <b>3</b><div>
              <strong>Trust the cache</strong><p>
                Turbo caches results. A gate that "passes" may not have run — use <code
                  >TURBO_FORCE=true</code
                >.
              </p>
            </div>
          </article><article>
            <b>4</b><div>
              <strong>Skip the third layer</strong><p>
                Lint and unit can both be green while the page breaks on mobile and the API never
                returns 404.
              </p>
            </div>
          </article>
        </div>
      </div><article class="verify-cta">
        <span>RUN IT YOURSELF · two labs, under 10 minutes each</span><div class="verify-cta-grid">
          <a href={`${base}hands-on/starter/`} class="verify-card"
            ><strong>Path A · verification lab</strong><p>
              Fill the four-row comparison strip on the starter. Run A naively, Run B with <code
                >$gate-discipline</code
              > and <code>$webapp-testing</code>.
            </p><small>Open the starter →</small><small class="verify-card-source"
              >Clone ↗ <span>git.marcospaulo.dev.br/.../src/branch/pages/hands-on/starter</span
              ></small
            ></a
          ><a href={`${base}hands-on/rules/`} class="verify-card"
            ><strong>Path B · rules lab</strong><p>
              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.
            </p><small
              ><span data-language-content="en">Open the rules lab →</span><span
                data-language-content="pt"
                hidden>Open the rules lab →</span
              ></small
            ><small class="verify-card-source"
              >Clone ↗ <span>git.marcospaulo.dev.br/.../src/branch/pages/hands-on/rules</span
              ></small
            ></a
          >
        </div>
      </article>
    </section>
    <section class="sources">
      <div class="section-label">
        <span
          ><span data-language-content="en">Keep learning</span><span
            data-language-content="pt"
            hidden>Continue aprendendo</span
          ></span
        ><span
          ><span data-language-content="en">12 new readings + primary docs</span><span
            data-language-content="pt"
            hidden>12 novas leituras + documentação primária</span
          ></span
        >
      </div><p>
        <span data-language-content="en"
          >Go deeper with official documentation, production case studies, Medium, and practitioner
          workflows. <a href={`${base}rules/`}>Rules and enforcement case study →</a>
          <a href={`${base}skills-review/`}>Skills review desk →</a>
          <a href={`${base}docs/references/README.md`}>Primary references →</a>
          <a href={`${base}docs/references/additional-reading.md`}>12-part reading path →</a></span
        >
        <span data-language-content="pt" hidden
          >Aprofunde com documentação oficial, casos de produção, Medium e fluxos de praticantes. <a
            href={`${base}rules/`}>Estudo de caso sobre regras e enforcement →</a
          >
          <a href={`${base}docs/references/README.md`}>Referências primárias →</a>
          <a href={`${base}docs/references/additional-reading.md`}>Trilha com 12 leituras →</a
          ></span
        >
      </p>
    </section>
    <!-- Legacy full-guide/index.html closes with this section after `.sources`.
         Task 15d dropped it, and nothing caught that: verify.mjs reads the
         legacy file, so its chapter-route assertion kept passing. It has no
         `translations.pt` entry, so it is English-only on the live site too. -->
    <section class="chapter-route">
      <div class="section-label">
        <span>Navigate by idea</span><span>short chapters / one system</span>
      </div>
      <p>
        Prefer a focused chapter? Start with the <a href={`${base}summary/`}>route map</a>, then
        jump directly to <a href={`${base}models/`}>models</a>, <a href={`${base}agents/`}
          >agents and worktrees</a
        >, <a href={`${base}skills/`}>skill creation</a>, <a href={`${base}rules/`}>rules</a>, or
        the <a href={`${base}skills-review/`}>skills review desk</a>.
      </p>
    </section>
  </main>
  <GuideSelector rootSelector="#full-guide" data={selectorData} />
</BaseLayout>

<style is:global>
  /* Page-owned former responsive.css rules. The legacy file remains loaded only by
   full-guide/index.html until task 20 removes that page. */
  .topbar-tools {
    display: flex;
    align-items: center;
    gap: 24px;
  }
  .skills-review-link {
    color: var(--blue);
    font: 700 var(--step-09) var(--font-mono);
    letter-spacing: 0.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 var(--step-00) var(--font-mono);
    letter-spacing: 0.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;
  }
  @media (max-width: 800px) {
    .topbar-tools {
      margin-left: auto;
    }
  }
  /* token-gap: preserve the legacy full-guide layout threshold; responsive.css is gone, so this rule is now the only definition of it */
  @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 var(--step-0)/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 0.2s ease,
      transform 0.2s ease;
  }
  .worker-card span {
    color: var(--guide-toolbar-text);
    font: 500 var(--step-00) var(--font-mono);
    letter-spacing: 0.1em;
  }
  .worker-card strong {
    font-size: var(--step-16);
    line-height: 1.2;
  }
  .worker-card code {
    color: var(--gold);
    font: var(--step-0) var(--font-mono);
  }
  .worker-card:hover,
  .worker-card.active {
    background: var(--guide-panel-blue);
  }
  .worker-card.active {
    box-shadow: inset 0 -4px 0 var(--gold);
  }
  .worker-card:active {
    transform: translateY(2px);
  }
  .worker-detail {
    display: grid;
    grid-template-columns: 0.55fr 1.1fr 1.2fr;
    gap: 1px;
    margin-top: 1px;
    background: var(--line);
  }
  .worker-detail > * {
    margin: 0;
    padding: 16px 20px;
    background: var(--guide-worker-detail-surface);
  }
  .worker-detail span,
  .worker-detail small {
    font: 500 var(--step-00)/1.5 var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .worker-detail span {
    color: var(--accent);
  }
  .worker-detail strong {
    font-size: var(--step-13);
  }
  .worker-detail small {
    color: var(--muted);
    text-transform: none;
  }

  .tree-lab {
    min-width: 0;
    border: 1px solid var(--guide-tree-rule);
    background: var(--guide-code-surface);
    box-shadow: 18px 18px 0 var(--guide-tree-shadow);
  }
  .tree-toolbar {
    display: flex;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--guide-tree-rule);
    color: var(--guide-toolbar-text);
    font: 500 var(--step-09) var(--font-mono);
    letter-spacing: 0.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: var(--guide-live);
    box-shadow: 0 0 0 4px var(--guide-live-glow);
  }
  .tree-stage {
    position: relative;
    height: 330px;
    overflow: hidden;
    background-image:
      linear-gradient(var(--guide-grid-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--guide-grid-line) 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: var(--blue);
    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 var(--guide-tree-border);
    color: var(--paper);
    background: var(--guide-tree-node);
    text-align: left;
    cursor: pointer;
    transition:
      border-color 0.2s ease,
      background 0.2s ease,
      transform 0.2s ease,
      box-shadow 0.2s ease;
  }
  .tree-node span,
  .tree-node small {
    font: 500 var(--step-08) var(--font-mono);
    letter-spacing: 0.08em;
  }
  .tree-node span {
    color: var(--guide-tree-node-label);
  }
  .tree-node strong {
    font: 600 var(--step-12) var(--font-mono);
  }
  .tree-node small {
    color: var(--guide-tree-node-muted);
  }
  .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: var(--guide-tree-node-hover);
    box-shadow: 0 0 0 4px var(--guide-gold-glow);
  }
  .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: 0.7fr 1fr 1.6fr;
    gap: 1px;
    border-top: 1px solid var(--guide-tree-rule);
    background: var(--guide-tree-rule);
  }
  .tree-detail > div,
  .tree-detail > p,
  .tree-detail > code {
    margin: 0;
    padding: 18px;
    background: var(--deep);
  }
  .tree-detail div {
    display: grid;
    gap: 8px;
  }
  .tree-detail span {
    color: var(--accent);
    font: 500 var(--step-08) var(--font-mono);
    letter-spacing: 0.1em;
  }
  .tree-detail strong {
    color: var(--paper);
    font: 500 var(--step-0) var(--font-mono);
  }
  .tree-detail p {
    color: var(--guide-tree-detail-text);
    font-size: var(--step-0);
    line-height: 1.55;
  }
  .tree-detail code {
    grid-column: 1/-1;
    color: var(--gold);
    font: var(--step-0) var(--font-mono);
  }

  .route-console {
    display: grid;
    gap: 14px;
  }
  .route-table button {
    display: grid;
    grid-template-columns: 0.8fr 0.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: var(--guide-phase-hover);
  }
  .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 var(--guide-meter-border);
  }
  .route-meter span {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--gold);
    transform: scaleY(var(--score));
    transform-origin: bottom;
    transition: transform 0.35s ease;
  }
  .route-detail > div:last-child {
    display: grid;
    gap: 7px;
  }
  .route-detail small {
    color: var(--gold);
    font: 500 var(--step-08) var(--font-mono);
    letter-spacing: 0.08em;
  }
  .route-detail strong {
    font-size: var(--step-17);
  }
  .route-detail p {
    margin: 0;
    color: var(--guide-route-copy);
    font-size: var(--step-12);
    line-height: 1.5;
  }

  .skill-explorer {
    display: grid;
    grid-template-columns: 0.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 var(--white-25);
    color: var(--paper);
    background: transparent;
    text-align: left;
    cursor: pointer;
  }
  .skill-package button:hover,
  .skill-package button.active {
    background: var(--guide-skill-hover);
  }
  .skill-package button.active {
    box-shadow: inset 4px 0 0 var(--gold);
  }
  .skill-package button code {
    font: var(--step-12) var(--font-mono);
  }
  .skill-package button small {
    opacity: 0.7;
  }
  .skill-detail {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-content: center;
    padding: 28px;
    color: var(--paper);
    background: var(--guide-panel-blue);
  }
  .skill-detail > span {
    color: var(--gold);
    font:
      var(--step-42) Georgia,
      serif;
  }
  .skill-detail > div {
    display: grid;
    gap: 13px;
  }
  .skill-detail strong {
    font: 600 var(--step-1) var(--font-mono);
  }
  .skill-detail p {
    margin: 0;
    color: var(--guide-skill-copy);
    font-size: var(--step-12);
    line-height: 1.65;
  }
  .skill-detail small {
    color: var(--gold);
    font: 500 var(--step-08) var(--font-mono);
    letter-spacing: 0.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;
  }

  /* Model and effort gearbox */
  .model-gearbox {
    margin-bottom: 150px;
    padding-top: 80px;
    border-top: 1px solid var(--line);
  }
  .gearbox-intro {
    display: grid;
    grid-template-columns: 0.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: var(--step-14);
    line-height: 1.75;
  }
  .gearbox {
    display: grid;
    grid-template-columns: 150px minmax(0, 1.35fr) minmax(230px, 0.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 var(--step-00) var(--font-mono);
    letter-spacing: 0.08em;
    cursor: pointer;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }
  .provider-tabs button:hover {
    background: var(--guide-skill-index-hover);
  }
  .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 var(--step-09) var(--font-mono);
    letter-spacing: 0.09em;
  }
  .provider-detail header a {
    color: var(--guide-provider-copy);
    font: 500 var(--step-09) var(--font-mono);
  }
  .provider-detail h3 {
    margin: 34px 0 12px;
    font-size: clamp(34px, 4vw, 62px);
    letter-spacing: -0.06em;
  }
  .provider-detail > p {
    max-width: 730px;
    margin: 0;
    color: var(--guide-provider-detail-copy);
    font-size: var(--step-13);
    line-height: 1.7;
  }
  .model-ladder {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-top: 34px;
    background: var(--guide-provider-rule);
  }
  .model-ladder div {
    padding: 18px;
    background: var(--guide-effort-surface);
  }
  .model-ladder span {
    display: block;
    color: var(--gold);
    font: 500 var(--step-08) var(--font-mono);
    letter-spacing: 0.08em;
  }
  .model-ladder strong {
    display: block;
    margin-top: 10px;
    font-size: var(--step-13);
  }
  .model-ladder small {
    display: block;
    margin-top: 7px;
    color: var(--guide-effort-copy);
    font-size: var(--step-00);
    line-height: 1.4;
  }
  .effort-rail {
    display: grid;
    grid-template-rows: auto repeat(3, 1fr);
    background: var(--guide-effort-active);
  }
  .effort-rail > span {
    padding: 17px;
    color: var(--accent);
    font: 700 var(--step-08) var(--font-mono);
    letter-spacing: 0.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 1var (--step-08) var(--font-mono);
  }
  .effort-rail button small {
    color: var(--muted);
    font-size: var(--step-00);
  }
  .effort-rail button:hover {
    background: var(--guide-skill-index-hover);
  }
  .effort-rail button.active {
    color: var(--paper);
    background: var(--accent);
    box-shadow: inset 5px 0 0 var(--gold);
  }
  .effort-rail button.active small {
    color: var(--guide-effort-active-copy);
  }
  .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: var(--guide-builder-surface);
  }
  .effort-detail > span {
    color: var(--gold);
    font: 500 var(--step-09) var(--font-mono);
    letter-spacing: 0.08em;
  }
  .effort-detail p {
    margin: 0;
    font-size: var(--step-12);
    line-height: 1.55;
  }
  .effort-detail code {
    padding: 10px 12px;
    color: var(--gold);
    background: var(--guide-tree-shadow);
    font: var(--step-00) 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 var(--step-09) var(--font-mono);
    letter-spacing: 0.08em;
  }
  .gearbox-rule strong {
    font-size: var(--step-13);
    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: 0.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: var(--step-14);
    line-height: 1.75;
  }
  .builder-workbench {
    display: grid;
    grid-template-columns: minmax(220px, 0.65fr) minmax(380px, 1.35fr) minmax(270px, 0.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 var(--step-0) var(--font-mono);
  }
  .builder-steps button span {
    font: 700 var(--step-12) var(--font-mono);
  }
  .builder-steps button small {
    margin-top: 5px;
    color: var(--muted);
    font-size: var(--step-00);
  }
  .builder-steps button:hover {
    background: var(--guide-skill-index-hover);
  }
  .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: var(--guide-builder-rule);
    font: 500 54px var(--font-mono);
  }
  .builder-detail header small,
  .builder-action span,
  .builder-detail footer span {
    color: var(--gold);
    font: 500 var(--step-08) var(--font-mono);
    letter-spacing: 0.1em;
  }
  .builder-detail h3 {
    margin: 27px 0 14px;
    font-size: clamp(26px, 3vw, 44px);
    line-height: 1.05;
    letter-spacing: -0.05em;
  }
  .builder-detail blockquote {
    margin: 0;
    padding: 0;
    color: var(--guide-builder-copy);
    font:
      italic var(--step-20)/1.35 Georgia,
      serif;
  }
  .builder-action {
    align-self: center;
    margin: 34px 0;
  }
  .builder-action p {
    margin: 11px 0 0;
    color: var(--guide-builder-action-copy);
    font-size: var(--step-13);
    line-height: 1.7;
  }
  .builder-detail footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--guide-provider-rule);
  }
  .builder-detail footer > div {
    display: grid;
    gap: 10px;
    padding: 17px;
    background: var(--guide-effort-surface);
  }
  .builder-detail footer strong {
    font-size: var(--step-0);
    line-height: 1.5;
  }
  .builder-artifact {
    display: grid;
    grid-template-rows: auto 1fr auto;
    color: var(--paper);
    background: var(--guide-code-surface);
  }
  .artifact-head {
    display: flex;
    justify-content: space-between;
    padding: 17px;
    border-bottom: 1px solid var(--guide-builder-border);
    font: 500 var(--step-08) var(--font-mono);
    letter-spacing: 0.09em;
  }
  .artifact-head i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--guide-live);
    box-shadow: 0 0 0 4px var(--guide-builder-live-glow);
  }
  .builder-artifact pre {
    display: grid;
    align-items: center;
    margin: 0;
    padding: 28px;
    overflow: auto;
    color: var(--guide-builder-code);
    background-image:
      linear-gradient(var(--guide-builder-grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--guide-builder-grid) 1px, transparent 1px);
    background-size: 22px 22px;
  }
  .builder-artifact pre code {
    font: var(--step-12)/1.9 var(--font-mono);
  }
  .artifact-command {
    display: grid;
    gap: 9px;
    padding: 18px;
    border-top: 1px solid var(--guide-builder-border);
  }
  .artifact-command span {
    color: var(--gold);
    font: 500 var(--step-08) var(--font-mono);
    letter-spacing: 0.09em;
  }
  .artifact-command code {
    font: var(--step-00) 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 var(--step-09) var(--font-mono);
    letter-spacing: 0.09em;
  }
  .builder-loop > div {
    font: 600 var(--step-0) 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: 0.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: var(--step-14);
    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 var(--step-09) var(--font-mono);
    letter-spacing: 0.09em;
    color: var(--accent);
  }
  .verify-layers article h3 {
    margin: 0;
    font-size: var(--step-18);
    letter-spacing: -0.02em;
  }
  .verify-layers article p {
    margin: 0;
    color: var(--muted);
    font-size: var(--step-13);
    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 var(--step-09) var(--font-mono);
    letter-spacing: 0.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 var(--step-22) var(--font-mono);
    color: var(--accent);
    line-height: 1;
    align-self: center;
  }
  .ap-grid article strong {
    font-size: var(--step-1);
    letter-spacing: -0.01em;
  }
  .ap-grid article p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: var(--step-13);
    line-height: 1.5;
  }
  .ap-grid article code {
    font: var(--step-0) 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 var(--step-09) var(--font-mono);
    letter-spacing: 0.09em;
    color: var(--gold);
  }
  .verify-cta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    margin-top: 18px;
    background: var(--guide-verify-rule);
  }
  .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: var(--step-17);
    letter-spacing: -0.01em;
  }
  .verify-card p {
    margin: 0;
    color: var(--guide-verify-copy);
    font-size: var(--step-13);
    line-height: 1.55;
  }
  .verify-card p code {
    font: var(--step-0) var(--font-mono);
    color: var(--gold);
    background: var(--guide-verify-code);
    padding: 1px 5px;
    border: 1px solid var(--guide-verify-code-border);
  }
  .verify-card small {
    font: 500 var(--step-00) var(--font-mono);
    color: var(--gold);
    letter-spacing: 0.09em;
  } /* token-gap: preserve the legacy verification layout threshold; this behavior is required by task 15e */
  @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: 0.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: var(--step-14);
    line-height: 1.75;
  }
  .skill-deck {
    display: grid;
    grid-template-columns: minmax(270px, 0.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 0.2s ease,
      color 0.2s ease;
  }
  .skill-index button span {
    grid-row: 1/-1;
    align-self: center;
    color: var(--accent);
    font: 500 var(--step-08) var(--font-mono);
    letter-spacing: 0.08em;
  }
  .skill-index button strong {
    font: 600 var(--step-13) var(--font-mono);
  }
  .skill-index button small {
    margin-top: 5px;
    color: var(--muted);
    font-size: var(--step-00);
  }
  .skill-index button:hover {
    background: var(--guide-skill-index-hover);
  }
  .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 var(--guide-accent-rule);
  }
  .common-skill-detail header span {
    font: 500 4var (--step-08) var(--font-mono);
    opacity: 0.34;
  }
  .common-skill-detail header small {
    font: 500 var(--step-09) var(--font-mono);
    letter-spacing: 0.1em;
  }
  .common-skill-detail h3 {
    margin: 38px 0 18px;
    font-size: var(--step-skill-title);
    letter-spacing: -0.06em;
  }
  .common-skill-detail blockquote {
    max-width: 720px;
    margin: 0 0 38px;
    padding: 0;
    border: 0;
    color: var(--gold);
    font:
      400 clamp(var(--step-20), 2.5vw, 34px)/1.15 Georgia,
      serif;
    font-style: italic;
  }
  .common-skill-notes {
    display: grid;
    grid-template-columns: 1.45fr 0.9fr 0.9fr;
    gap: 1px;
    align-self: end;
    background: var(--guide-accent-rule);
  }
  .common-skill-notes > div {
    padding: 20px;
    background: var(--guide-accent-note);
  }
  .common-skill-notes span {
    color: var(--gold);
    font: 500 var(--step-08) var(--font-mono);
    letter-spacing: 0.08em;
  }
  .common-skill-notes p {
    margin: 12px 0 0;
    color: var(--guide-accent-copy);
    font-size: var(--step-12);
    line-height: 1.55;
  }
  .common-skill-notes div:nth-child(2) p {
    font-family: var(--font-mono);
    font-size: var(--step-00);
  }
  .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 var(--step-09) var(--font-mono);
    letter-spacing: 0.09em;
  }
  .skill-loadout > div {
    font: 500 var(--step-0) var(--font-mono);
  }
  .skill-loadout b {
    color: var(--accent);
    font-size: var(--step-09);
  }
  .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 var(--step-09) var(--font-mono);
    letter-spacing: 0.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 var(--guide-install-rule);
  }
  .install-skills header > div {
    display: grid;
    gap: 7px;
  }
  .install-skills header span,
  .install-skills footer {
    color: var(--gold);
    font: 500 var(--step-08) var(--font-mono);
    letter-spacing: 0.08em;
  }
  .install-skills header strong {
    font-size: var(--step-1);
  }
  .install-skills button {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--guide-control-border);
    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: var(--guide-code-surface);
  }
  .install-skills pre code {
    font: var(--step-00)/1.7 var(--font-mono);
  }
  .install-skills footer {
    padding: 16px 24px;
    color: var(--guide-install-copy);
    border-top: 1px solid var(--guide-install-rule);
  }
  .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: 0.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: var(--step-14);
    line-height: 1.75;
  }
  .starter-link {
    display: inline-block;
    margin-top: 18px;
    color: var(--blue);
    font: 700 var(--step-0) 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: var(--guide-verify-copy);
    font-size: var(--step-00) !important;
    letter-spacing: 0.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 var(--step-09) var(--font-mono);
    letter-spacing: 0.09em;
  }
  .exercise-brief > strong {
    font-size: var(--step-exercise-title);
    line-height: 1.12;
  }
  .exercise-brief > div {
    grid-column: 2;
    color: var(--guide-exercise-copy);
    font: 500 var(--step-09) var(--font-mono);
    letter-spacing: 0.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: var(--guide-prompt-surface);
  }
  .prompt-card.enhanced {
    background: var(--guide-prompt-enhanced);
  }
  .prompt-card header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 22px;
    border-bottom: 1px solid var(--guide-prompt-rule);
  }
  .prompt-card header > div {
    display: grid;
    gap: 6px;
  }
  .prompt-card header span,
  .prompt-card footer {
    font: 500 var(--step-08) var(--font-mono);
    letter-spacing: 0.09em;
  }
  .prompt-card header > div span {
    color: var(--gold);
  }
  .prompt-card header strong {
    font-size: var(--step-17);
  }
  .prompt-card button {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--guide-control-border);
    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: var(--step-0)/1.72 var(--font-mono);
  }
  .prompt-card footer {
    padding: 17px 22px;
    color: var(--guide-verify-copy);
    border-top: 1px solid var(--guide-prompt-rule);
  }
  .prompt-card.enhanced footer {
    color: var(--guide-prompt-enhanced-copy);
  }
  .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 var(--step-09) var(--font-mono);
    letter-spacing: 0.08em;
  }
  .comparison-strip > div {
    color: var(--muted);
    font: 500 var(--step-00) 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 var(--step-00) var(--font-mono);
    text-align: right;
  }
  @media (min-width: 1600px) {
    .tree-detail {
      grid-template-columns: 0.6fr 0.8fr 1.8fr;
    }
  }
  @media (min-width: 2200px) {
    main {
      max-width: 2880px;
      padding-inline: clamp(140px, 7vw, 280px);
    }
    .hero {
      max-width: 1420px;
    }
    .hero h1 {
      font-size: var(--step-display-wide);
    }
    .tree-detail > * {
      font-size: var(--step-14) !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, 0.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 var(--guide-builder-border);
    }
  }
  /* token-gap: preserve the legacy worktree and skill layout threshold; this behavior is required by task 15e */
  @media (max-width: 1050px) {
    .tree-detail {
      grid-template-columns: 1fr 1fr;
    }
    .tree-detail p {
      grid-column: 1/-1;
    }
    .skill-explorer {
      grid-template-columns: 1fr;
    }
  }
  @media (max-width: 800px) {
    .worker-detail {
      grid-template-columns: 1fr;
    }
    .worktrees {
      display: block;
    }
    .worktree-intro {
      margin-bottom: 40px;
    }
    .tree-lab {
      box-shadow: 9px 9px 0 var(--guide-tree-shadow);
    }
    .route-table button {
      min-width: 620px;
    }
    .gearbox-intro,
    .builder-intro,
    .catalog-intro,
    .hands-intro {
      grid-template-columns: 1fr;
      gap: 20px;
    }
    .gearbox {
      grid-template-columns: 1fr 210px;
      grid-template-rows: auto auto;
    }
    .provider-tabs {
      grid-column: 1/-1;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: none;
    }
    .provider-tabs button {
      writing-mode: horizontal-tb;
      transform: none;
    }
    .provider-tabs button.active {
      box-shadow: inset 0 -5px 0 var(--gold);
    }
    .effort-detail {
      grid-template-columns: 110px 1fr;
    }
    .effort-detail code {
      grid-column: 2;
    }
    .skill-explorer {
      grid-template-columns: 1fr 1fr;
    }
    .builder-workbench {
      grid-template-columns: 1fr;
    }
    .builder-steps {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: none;
    }
    .builder-artifact {
      grid-column: auto;
    }
    .skill-deck {
      grid-template-columns: 1fr;
    }
    .skill-index {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: none;
    }
    .common-skill-detail {
      min-height: 600px;
    }
    .common-skill-notes {
      grid-template-columns: 1fr 1fr;
    }
    .common-skill-notes > div:first-child {
      grid-column: 1/-1;
    }
    .prompt-compare {
      grid-template-columns: 1fr;
    }
    .comparison-strip {
      grid-template-columns: 1fr 1fr;
    }
    .comparison-strip > span {
      grid-column: 1/-1;
    }
    .exercise-brief {
      grid-template-columns: 1fr;
    }
    .exercise-brief > div {
      grid-column: auto;
    }
  }
  /* token-gap: preserve the legacy full-guide layout threshold; responsive.css is gone, so this rule is now the only definition of it */
  @media (max-width: 600px) {
    .tree-detail {
      grid-template-columns: 1fr;
    }
    .tree-detail p,
    .tree-detail code {
      grid-column: auto;
    }
    .gearbox {
      grid-template-columns: 1fr;
    }
    .provider-detail,
    .effort-rail {
      grid-column: 1;
    }
    .model-ladder {
      grid-template-columns: 1fr;
    }
    .effort-rail {
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: auto auto;
    }
    .effort-rail > span {
      grid-column: 1/-1;
    }
    .effort-rail button {
      text-align: center;
      border-top: 1px solid var(--line);
      border-left: 1px solid var(--line);
    }
    .effort-rail button.active {
      box-shadow: inset 0 -5px 0 var(--gold);
    }
    .effort-detail {
      grid-template-columns: 1fr;
    }
    .effort-detail code {
      grid-column: auto;
      overflow: auto;
    }
    .gearbox-rule {
      grid-template-columns: 1fr;
    }
    .skill-explorer {
      grid-template-columns: 1fr;
    }
    .route-detail {
      grid-template-columns: 70px 1fr;
    }
    .route-meter {
      width: 56px;
      height: 70px;
    }
    .builder-steps {
      grid-template-columns: 1fr;
    }
    .builder-steps button {
      min-height: 78px;
    }
    .builder-detail {
      padding: 28px 24px;
    }
    .builder-detail footer {
      grid-template-columns: 1fr;
    }
    .builder-artifact {
      grid-template-columns: 1fr;
    }
    .builder-artifact .artifact-head {
      grid-column: auto;
    }
    .artifact-command {
      border-left: 0;
      border-top: 1px solid var(--guide-builder-border);
    }
    .builder-loop {
      grid-template-columns: 1fr;
    }
    .builder-loop > div {
      line-height: 2;
    }
    .builder-loop i {
      margin-inline: 4px;
    }
    .skill-index {
      grid-template-columns: 1fr;
    }
    .skill-index button {
      min-height: 78px;
    }
    .common-skill-detail {
      min-height: 0;
      padding: 30px 24px;
    }
    .common-skill-notes {
      grid-template-columns: 1fr;
    }
    .common-skill-notes > div:first-child {
      grid-column: auto;
    }
    .skill-loadout {
      grid-template-columns: 1fr;
    }
    .skill-loadout > div {
      line-height: 2;
    }
    .skill-loadout i {
      margin-inline: 4px;
    }
    .install-skills header {
      align-items: flex-start;
    }
    .install-skills header strong {
      font-size: var(--step-12);
    }
    .install-skills pre {
      max-height: 500px;
    }
    .exercise-brief {
      padding: 22px;
    }
    .exercise-brief > div {
      line-height: 2;
    }
    .exercise-brief b {
      margin-left: 7px;
    }
    .prompt-card {
      min-height: 0;
    }
    .prompt-card pre {
      max-height: 560px;
    }
    .comparison-strip {
      grid-template-columns: 1fr;
    }
    .comparison-strip > span {
      grid-column: auto;
    }
    .copy-status {
      text-align: left;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .worker-card,
    .tree-node,
    .route-meter span {
      transition: none;
    }
    .reading-progress span {
      transition: none;
    }
  }
</style>
