Sparkline Narrativo · 叙事波形

Produza um deck narrativo em arquivo único, estilo Duarte. Você é um cartógrafo de histórias trabalhando em HTML: cada página é construída sobre uma forma de onda oscilante que viaja entre "o que é" e "o que poderia ser", e o laranja aparece apenas onde a história muda. O sistema visual, o contrato do canvas e o runtime de navegação são travados por example.html. Comece em example.html, substitua apenas o conteúdo — não reescreva o design ou o script. Não introduza nenhuma cor ou fonte fora desta especificação.

Gerado a partir da especificação Sparkline叙事波形 / Narrative Sparkline (Duarte式) (中性派, 还原91%) em references/design-styles.md de huashu-design por 花叔 (alchaincyf), licenciado sob MIT. Linhagem: estrutura de sparkline de Nancy Duarte《Resonate》, Al Gore An Inconvenient Truth, data storytelling da Duarte Inc.

Especificação Rígida (travada — violar qualquer linha é um regresso)

Canvas e runtime

• Um <div id="stage"> fixo em 1920 × 1080 px, centralizado com position: fixed; top: 50%; left: 50%; uma função fit() aplica translate(-50%, -50%) scale(min(innerWidth/1920, innerHeight/1080)) ao carregar e resize. Todo o layout interno em px — o escalador cuida da responsividade.
• Cada página é um <section class="slide"> dentro de #stage com um rótulo estilo data-screen-label="01 封面"; exatamente um slide carrega .active; páginas escuras adicionam .dark.
• Navegação (mantenha o script verbatim): ←/↑/PageUp anterior, →/↓/Space/PageDown próximo, Home/End primeiro/último; roteamento por hash #/N (indexado em 1) lido ao carregar + hashchange, escrito via history.replaceState; clique no terço esquerdo = voltar, o resto = avançar; contador fixo no canto inferior direito, dica de tecla no canto inferior esquerdo. Sem JS externo, sem etapa de build — o arquivo deve abrir dentro de um iframe com sandbox via file://.

Tokens de design (:root — mantenha os nomes, re-tematize apenas os valores)

Fontes: uma Google Fonts @import (Inter 400–900 + Geist Mono 400–600) e nada mais. Sem scripts de CDN, sem bibliotecas de gráficos, sem imagens — cada gráfico é um caminho SVG inline escrito à mão. Uma segunda cor de acento é o pecado cardinal deste estilo; o cinza é a única outra voz.

Dispositivos de assinatura (o DNA visual — todo deck deve mostrá-los)

1. A espinha da forma de onda: cada página carrega pelo menos um SVG .spark full-bleed com um caminho oscilante cúbico-bézier suave. A camada de linha usa preserveAspectRatio="none" para que o caminho se estique; pontos/texto de anotação vivem em uma segunda camada SVG, não esticada, com o mesmo viewBox para que os círculos permaneçam redondos e o texto permaneça fiel. Pesos de linha: .arc linha principal laranja de 5px, .arc-thin de 3.5px, .ghost-line cinza de 3px, .ghost-dash stroke-dasharray: 2 10 cinza de linha de base/referência da indústria.
2. Anotações de ponto de virada laranja: grupo .pt = círculo de halo suave (--accent-dim), ponto laranja sólido (r≈6–7), anel laranja opcional de 2px para o ponto de inflexão, mais texto em caixa alta Geist Mono .lab (12px, rastreamento de 2px) e .val (20px, 600). Pontos cinzas .pt-ghost marcam pontos problemáticos em linhas de comparação. O laranja marca apenas pontos de virada — se cada ponto for laranja, nada muda.
3. Revelação progressiva: os caminhos carregam pathLength="1" + classe draw (stroke-dasharray: 1; stroke-dashoffset: 1); .slide.active .draw anima stroke-dashoffset para 0 (spark-draw, ~1.8s, cubic-bezier ease-out-ish). Segmento escalonado via d1/d2/d3, fade-ins de pontos via p1…p5 (escada de atraso de animação). Como .active alterna a exibição, a revelação se repete toda vez que um slide é acessado — mantenha assim.

…