feat: add responsive bilingual presentation

app.js

@@ -1,9 +1,55 @@
 const phases = {
-  plan: { model: 'OPUS / REASONING', title: 'Turn ambiguity into work', copy: 'Inspect the repository, choose the architecture, split the request, and write acceptance criteria.', code: 'plan → decompose → define acceptance' },
+  plan: { model: { en: 'OPUS / REASONING', pt: 'OPUS / RACIOCÍNIO' }, title: { en: 'Turn ambiguity into work', pt: 'Transforme ambiguidade em trabalho' }, copy: { en: 'Inspect the repository, choose the architecture, split the request, and write acceptance criteria.', pt: 'Inspecione o repositório, escolha a arquitetura, divida o pedido e escreva critérios de aceitação.' }, code: { en: 'plan → decompose → define acceptance', pt: 'planejar → decompor → definir aceitação' } },
-  build: { model: 'SONNET, HAIKU, OR EQUIVALENT', title: 'Execute one bounded slice', copy: 'Give each worker enough context, one responsibility, and its own worktree. Less context; less collision.', code: 'brief + worktree → implement → test' },
+  build: { model: { en: 'SONNET, HAIKU, OR EQUIVALENT', pt: 'SONNET, HAIKU OU EQUIVALENTE' }, title: { en: 'Execute one bounded slice', pt: 'Execute uma fatia delimitada' }, copy: { en: 'Give each worker enough context, one responsibility, and its own worktree. Less context; less collision.', pt: 'Dê a cada worker contexto suficiente, uma responsabilidade e seu próprio worktree. Menos contexto; menos colisões.' }, code: { en: 'brief + worktree → implement → test', pt: 'brief + worktree → implementar → testar' } },
-  review: { model: 'STRONG MODEL OR HUMAN', title: 'Reconnect result to intent', copy: 'Check the diff against the original brief, run the checks, then merge, request changes, or discard.', code: 'diff + checks → review → merge / iterate' }
+  review: { model: { en: 'STRONG MODEL OR HUMAN', pt: 'MODELO FORTE OU HUMANO' }, title: { en: 'Reconnect result to intent', pt: 'Reconecte o resultado à intenção' }, copy: { en: 'Check the diff against the original brief, run the checks, then merge, request changes, or discard.', pt: 'Compare o diff com o brief original, execute as verificações e então faça merge, peça mudanças ou descarte.' }, code: { en: 'diff + checks → review → merge / iterate', pt: 'diff + verificações → revisar → merge / iterar' } }
 };
+
+const translations = {
+  pt: {
+    '.chapter-links a:nth-child(1)': '01 frota', '.chapter-links a:nth-child(2)': '02 worktrees', '.chapter-links a:nth-child(3)': '03 skills', '.edition': 'ENGENHARIA DE IA <i></i> 01 / 2026',
+    '.hero .eyebrow': 'Uma apresentação para quem entrega software', '.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.', '.hero-index span': 'NOTA DE CAMPO / 001', '.hero-index strong': 'Entregue o<br /><em>sistema.</em>', '.hero-index small': 'Skills · agentes · worktrees · evidências',
+    '.hero-stats div:nth-child(1) span': 'modelo forte<br />para ambiguidade', '.hero-stats div:nth-child(2) span': 'workers delimitados<br />em paralelo', '.hero-stats div:nth-child(3) span': 'iterações<br />com evidências', '.hero-stats p': 'Leia isto como um mapa de rota, não como uma receita de prompt.',
+    '.thesis span': 'REGRA ZERO', '.thesis strong': 'Modelo forte para ambiguidade.<br />Modelo leve para trabalho delimitado.', '.fleet .section-label span:nth-child(1)': 'Uma pequena frota', '.fleet .section-label span:nth-child(2)': 'coordenação antes do paralelismo', '.captain span': 'ORQUESTRADOR', '.captain h2': 'Decide o que<br />precisa acontecer.', '.caption': 'O orquestrador preserva a intenção, escreve pequenos contratos e reúne resultados verificáveis. Ele não precisa digitar cada linha.',
+    '.failure-map .section-label span:nth-child(1)': 'Por que a fronteira importa', '.failure-map .section-label span:nth-child(2)': 'uma tarefa vaga / três falhas previsíveis', '.failure-grid article:nth-child(1) strong': 'Sopa de contexto', '.failure-grid article:nth-child(1) p': 'Cada worker lê tudo. Ninguém sabe quais fatos são essenciais.', '.failure-grid article:nth-child(2) strong': 'Colisão de branches', '.failure-grid article:nth-child(2) p': 'Dois agentes usam o mesmo checkout. O caminho mais rápido vira resolução de conflitos.', '.failure-grid article:nth-child(3) strong': 'Desvio confiante', '.failure-grid article:nth-child(3) p': 'O diff parece ótimo, mas ninguém verifica se resolveu o problema original.',
+    '.workflow .eyebrow': 'O ciclo de subagentes', '#workflow-title': 'Clique em uma fase.<br /><em>Veja a passagem.</em>', '.workflow .copy > p:last-child': 'Delegar é mover uma tarefa delimitada para um contexto menor — não abrir mão da responsabilidade.', '.handoff .section-label span:nth-child(1)': 'O que atravessa contextos', '.handoff .section-label span:nth-child(2)': 'brief → diff → evidência', '.handoff thead th:nth-child(1)': 'Pacote', '.handoff thead th:nth-child(2)': 'Contém', '.handoff thead th:nth-child(3)': 'Por que importa',
+    '.worktrees .eyebrow': 'Git worktrees', '.worktrees h2': 'Uma branch<br />por <em>mão.</em>', '.worktrees > div:first-child > p': 'Um worktree é outro diretório ligado ao mesmo repositório. Cada agente recebe seu próprio checkout e índice; o histórico continua compartilhado.', '.routing .eyebrow': 'Roteamento de modelos', '.routing h2': 'Não pague por<br />raciocínio onde precisa<br />de <em>ritmo.</em>', '.skills .eyebrow': 'Skills', '.skills h2': 'Escreva do jeito certo<br /><em>uma vez.</em>', '.skills > div:first-child > p': 'Uma skill é um procedimento reutilizável. Ela pode carregar instruções, referências, scripts e assets. Não é memória mágica e não substitui critérios de aceitação.',
+    '.skill-principles span:nth-child(1)': '01 / defina o gatilho', '.skill-principles span:nth-child(2)': '02 / carregue detalhes sob demanda', '.skill-principles span:nth-child(3)': '03 / devolva evidências', '.skill-package > span': 'PACOTE DE SKILL', '.rule span': 'O PAPEL HUMANO', '.rule strong': 'O agente pode ser autônomo na execução. Intenção, limites e evidências continuam sendo seus.', '.callout span': 'COMECE AQUI', '.callout strong': 'Comece com um agente e uma skill. Adicione paralelismo apenas quando as tarefas forem realmente independentes.', '.sources .section-label span:nth-child(1)': 'Continue aprendendo', '.sources .section-label span:nth-child(2)': 'fontes reunidas localmente', '.sources p': 'Baseado em pesquisas sobre Claude Code, Codex, Git e fluxos de agentes. <a href="docs/references/">Abrir o pacote de referências →</a>'
+  }
+};
+
 const panel = document.querySelector('#phase-panel');
-const render = (id) => { const phase = phases[id]; panel.innerHTML = `<div class="phase-meta"><span>${phase.model}</span><small>context: isolated</small></div><h3>${phase.title}</h3><p>${phase.copy}</p><code>${phase.code}</code>`; document.querySelectorAll('[data-phase]').forEach((button) => { const active = button.dataset.phase === id; button.classList.toggle('active', active); button.setAttribute('aria-selected', String(active)); }); };
+const buttons = document.querySelectorAll('[data-phase]');
-document.querySelectorAll('[data-phase]').forEach((button) => button.addEventListener('click', () => render(button.dataset.phase)));
+const originals = new Map();
+let currentLanguage = 'en';
+
+function setText(selector, value) {
+  const nodes = document.querySelectorAll(selector);
+  if (!nodes.length) return;
+  if (!originals.has(selector)) originals.set(selector, [...nodes].map((node) => node.innerHTML));
+  nodes.forEach((node) => { node.innerHTML = value; });
+}
+
+function render(id) {
+  const phase = phases[id];
+  panel.innerHTML = `<div class="phase-meta"><span>${phase.model[currentLanguage]}</span><small>${currentLanguage === 'pt' ? 'contexto: isolado' : 'context: isolated'}</small></div><h3>${phase.title[currentLanguage]}</h3><p>${phase.copy[currentLanguage]}</p><code>${phase.code[currentLanguage]}</code>`;
+  buttons.forEach((button) => { const active = button.dataset.phase === id; button.classList.toggle('active', active); button.setAttribute('aria-selected', String(active)); });
+}
+
+function applyLanguage(language) {
+  currentLanguage = language === 'pt' ? 'pt' : 'en';
+  document.documentElement.lang = currentLanguage === 'pt' ? 'pt-BR' : 'en';
+  if (currentLanguage === 'pt') Object.entries(translations.pt).forEach(([selector, value]) => setText(selector, value));
+  else originals.forEach((values, selector) => document.querySelectorAll(selector).forEach((node, index) => { node.innerHTML = values[index]; }));
+  document.querySelectorAll('[data-lang]').forEach((button) => { const active = button.dataset.lang === currentLanguage; button.classList.toggle('active', active); button.setAttribute('aria-pressed', String(active)); });
+  render(document.querySelector('[data-phase].active')?.dataset.phase || 'plan');
+  try { localStorage.setItem('ai-for-dummies-language', currentLanguage); } catch (error) { /* previews may disable storage */ }
+}
+
+buttons.forEach((button) => button.addEventListener('click', () => render(button.dataset.phase)));
+document.querySelectorAll('[data-lang]').forEach((button) => button.addEventListener('click', () => applyLanguage(button.dataset.lang)));
+window.addEventListener('scroll', () => { const height = document.documentElement.scrollHeight - window.innerHeight; document.querySelector('.reading-progress span').style.width = `${height > 0 ? (window.scrollY / height) * 100 : 0}%`; }, { passive: true });
+
+let savedLanguage = 'en';
+try { savedLanguage = localStorage.getItem('ai-for-dummies-language') || 'en'; } catch (error) { /* previews may disable storage */ }
 render('plan');
+applyLanguage(savedLanguage);

index.html

@@ -1,6 +1,7 @@
 <!doctype html>
 <html lang="en">
 <head>
+<link rel="stylesheet" href="responsive.css" />
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="description" content="AI For Dummies: a field guide to skills, models, subagents, and worktrees." />
@@ -8,16 +9,19 @@
   <link rel="stylesheet" href="styles.css" />
 </head>
 <body>
+<div class="reading-progress" aria-hidden="true"><span></span></div>
 <main>
-<header class="topbar"><a class="brand" href="#top"><span class="mark">A</span> field guide</a><span class="edition">AI ENGINEERING <i></i> 01 / 2026</span></header>
+<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">01 fleet</a><a href="#worktrees">02 worktrees</a><a href="#skills">03 skills</a></nav><div class="topbar-tools"><div class="lang-switch" aria-label="Language"><button class="active" data-lang="en" aria-pressed="true">EN</button><span>/</span><button data-lang="pt" aria-pressed="false">PT</button></div><span class="edition">AI ENGINEERING <i></i> 01 / 2026</span></div></header>
-<section class="hero" id="top"><p class="eyebrow">A presentation for humans who ship</p><h1>AI for<br /><em>dummies.</em></h1><p class="lede">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.</p></section>
+<section class="hero" id="top"><div><p class="eyebrow">A presentation for humans who ship</p><h1>AI for<br /><em>dummies.</em></h1><p class="lede">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.</p></div><aside class="hero-index"><span>FIELD NOTE / 001</span><strong>Ship the<br /><em>system.</em></strong><small>Skills · agents · worktrees · proof</small></aside></section>
+<section class="hero-stats" aria-label="Chapter summary"><div><strong>01</strong><span>strong model<br />for ambiguity</span></div><div><strong>03</strong><span>bounded workers<br />in parallel</span></div><div><strong>∞</strong><span>iterations<br />with evidence</span></div><p>Read this as a route map, not a prompt recipe.</p></section>
 <section class="thesis"><div><span>RULE ZERO</span><strong>Strong model for ambiguity.<br />Light model for bounded work.</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"><div class="section-label"><span>A small fleet</span><span>coordination before parallelism</span></div><div class="fleet-grid"><article class="captain"><span>ORCHESTRATOR</span><h2>Decides what<br />needs to happen.</h2><code>Opus / reasoning</code></article><div class="arrow">→</div><div class="workers"><article><span>UI</span><strong>Component and visual states</strong><code>agent/ui</code></article><article><span>TEST</span><strong>Acceptance cases</strong><code>agent/tests</code></article><article><span>DOCS</span><strong>Guide and examples</strong><code>agent/docs</code></article></div></div><p class="caption">The orchestrator preserves intent, writes small contracts, and gathers results that can be verified. It does not need to type every line.</p></section>
+<section class="fleet" id="fleet"><div class="section-label"><span>A small fleet</span><span>coordination before parallelism</span></div><div class="fleet-grid"><article class="captain"><span>ORCHESTRATOR</span><h2>Decides what<br />needs to happen.</h2><code>Opus / reasoning</code></article><div class="arrow">→</div><div class="workers"><article><span>UI</span><strong>Component and visual states</strong><code>agent/ui</code></article><article><span>TEST</span><strong>Acceptance cases</strong><code>agent/tests</code></article><article><span>DOCS</span><strong>Guide and examples</strong><code>agent/docs</code></article></div></div><p class="caption">The orchestrator preserves intent, writes small contracts, and gathers results that can be verified. It does not need to type every line.</p></section>
+<section class="failure-map"><div class="section-label"><span>Why the boundary matters</span><span>one vague task / three predictable failures</span></div><div class="failure-grid"><article><span>01</span><strong>Context soup</strong><p>Every worker reads everything. Nobody knows which facts are load-bearing.</p></article><article><span>02</span><strong>Branch collision</strong><p>Two agents touch the same checkout. The fastest path becomes conflict resolution.</p></article><article><span>03</span><strong>Confident drift</strong><p>The diff is polished, but no one checks whether it solved the original problem.</p></article></div></section>
 <section class="workflow" aria-labelledby="workflow-title"><div class="copy"><p class="eyebrow">The subagent loop</p><h2 id="workflow-title">Click a phase.<br /><em>See the handoff.</em></h2><p>Delegation means moving one bounded task into a smaller context—not giving away responsibility.</p></div><div class="phase-tabs" role="tablist" aria-label="Workflow phases"><button class="active" data-phase="plan" role="tab" aria-selected="true"><b>01</b> PLAN</button><button data-phase="build" role="tab" aria-selected="false"><b>02</b> BUILD</button><button data-phase="review" role="tab" aria-selected="false"><b>03</b> REVIEW</button></div><article class="phase-panel" id="phase-panel" aria-live="polite"></article></section>
 <section class="handoff"><div class="section-label"><span>What crosses contexts</span><span>brief → diff → evidence</span></div><table><thead><tr><th>Package</th><th>Contains</th><th>Why it matters</th></tr></thead><tbody><tr><th scope="row">Brief</th><td>goal, files, boundaries</td><td>stops the worker inventing the problem</td></tr><tr><th scope="row">Worktree</th><td>branch and isolated checkout</td><td>parallel edits do not collide</td></tr><tr><th scope="row">Checks</th><td>tests, build, criteria</td><td>turns “looks good” into evidence</td></tr><tr><th scope="row">Diff</th><td>small, reviewable change</td><td>integration and discard stay cheap</td></tr></tbody></table></section>
-<section class="worktrees"><div><p class="eyebrow">Git worktrees</p><h2>One branch<br />per <em>hand.</em></h2><p>A worktree is another directory linked to the same repository. Each agent gets its own checkout and index; history remains shared.</p><pre><code>git worktree add ../task-ui -b agent/ui · git worktree add ../task-tests -b agent/tests · git worktree list</code></pre></div><div class="map"><div class="repo"><span>REPOSITORY</span><strong>main</strong><small>shared history</small></div><div><span>UI</span><strong>agent/ui</strong><small>isolated checkout</small></div><div><span>TEST</span><strong>agent/tests</strong><small>isolated checkout</small></div><div><span>DOCS</span><strong>agent/docs</strong><small>isolated checkout</small></div></div></section>
+<section class="worktrees" id="worktrees"><div><p class="eyebrow">Git worktrees</p><h2>One branch<br />per <em>hand.</em></h2><p>A worktree is another directory linked to the same repository. Each agent gets its own checkout and index; history remains shared.</p><pre><code>git worktree add ../task-ui -b agent/ui · git worktree add ../task-tests -b agent/tests · git worktree list</code></pre></div><div class="map"><div class="repo"><span>REPOSITORY</span><strong>main</strong><small>shared history</small></div><div><span>UI</span><strong>agent/ui</strong><small>isolated checkout</small></div><div><span>TEST</span><strong>agent/tests</strong><small>isolated checkout</small></div><div><span>DOCS</span><strong>agent/docs</strong><small>isolated checkout</small></div></div></section>
 <section class="routing"><div><p class="eyebrow">Model routing</p><h2>Do not pay for<br />reasoning where<br />you need <em>rhythm.</em></h2></div><div class="route-table"><div class="head"><span>Work</span><span>Profile</span><span>Prompt shape</span></div><div><strong>Plan</strong><b>strong / broad</b><small>What changes? What can break?</small></div><div><strong>Build</strong><b>fast / focused</b><small>Implement this slice. Run these checks.</small></div><div><strong>Explore</strong><b>read-only / light</b><small>Find where this contract is used.</small></div><div><strong>Review</strong><b>independent</b><small>Does the diff satisfy the brief?</small></div></div></section>
-<section class="skills"><div><p class="eyebrow">Skills</p><h2>Write the right way<br /><em>once.</em></h2><p>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.</p></div><div class="skill-package"><span>SKILL PACKAGE</span><div><code>SKILL.md</code><small>procedure and limits</small></div><div><code>references/</code><small>facts to consult</small></div><div><code>scripts/</code><small>repeatable checks</small></div><div><code>assets/</code><small>templates and examples</small></div></div><pre><code>name: review-ui · check focus, mobile, reduced motion · run verification · return evidence</code></pre></section>
+<section class="skills" id="skills"><div><p class="eyebrow">Skills</p><h2>Write the right way<br /><em>once.</em></h2><p>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.</p><div class="skill-principles"><span>01 / trigger clearly</span><span>02 / load detail on demand</span><span>03 / return evidence</span></div></div><div class="skill-package"><span>SKILL PACKAGE</span><div><code>SKILL.md</code><small>procedure and limits</small></div><div><code>references/</code><small>facts to consult</small></div><div><code>scripts/</code><small>repeatable checks</small></div><div><code>assets/</code><small>templates and examples</small></div></div><pre><code>name: review-ui · check focus, mobile, reduced motion · run verification · return evidence</code></pre></section>
 <aside class="rule"><span>THE HUMAN JOB</span><strong>The agent may be autonomous in execution. Intent, boundaries, and evidence remain yours.</strong></aside><aside class="callout"><span>START HERE</span><strong>Begin with one agent and one skill. Add parallelism only when the tasks are truly independent.</strong></aside>
 <section class="sources"><div class="section-label"><span>Keep learning</span><span>sources bundled locally</span></div><p>Based on Claude Code, Codex, Git, and agent-workflow research. <a href="docs/references/">Open the reference bundle →</a></p></section>
 </main><script src="app.js" defer></script>

responsive.css

@@ -0,0 +1,7 @@
+.topbar-tools{display:flex;align-items:center;gap:24px}
+.lang-switch{display:flex;align-items:center;gap:6px;color:var(--muted);font:500 10px 'DM Mono',monospace;letter-spacing:.1em}
+.lang-switch button{padding:0;border:0;color:inherit;background:transparent;font:inherit;cursor:pointer}
+.lang-switch button.active{color:var(--ink);font-weight:700}
+.lang-switch button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
+@media(max-width:800px){.topbar-tools{margin-left:auto}}
+@media(max-width:600px){.topbar-tools .edition{display:none}}