Carta Anual · 年度信笺

Produza um deck HTML de página única, com qualidade de carta, no gênero Carta Anual da Stripe: uma carta publicada que você lê, não um modelo que você folheia. A prosa flui em parágrafos com serifa; os números vivem em cartões de dados inline e âncoras de exibição gigantes. O sistema visual, o contrato de tela 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, e nunca introduza cores ou fontes fora desta especificação.

Adaptado do estilo editorial de longform (references/design-styles.md, 安静派 · 杂志编辑长文流 / Editorial Longform) de huashu-design por 花叔 (alchaincyf), licenciado sob MIT. Linhagem de referência: Stripe Annual Letter, Amazon six-page narrative memos, Stripe Press.

Especificação Rígida (travada — violar qualquer linha é uma regressão)

Tela e dimensionamento

• Uma <div id="stage"> fixa em 1920 × 1080 px, centralizada com position: fixed; top: 50%; left: 50%.
• Uma função fit() dimensiona o palco para a viewport: scale = min(innerWidth / 1920, innerHeight / 1080), aplicada como translate(-50%, -50%) scale(s), reexecutada em resize. Com barras pretas, nunca cortada.
• Todo o layout dentro do palco usa px (nunca vw/vh/% para tipografia) — o escalador cuida da responsividade.

Slides e runtime de navegação (não reescreva o script)

• Cada página é um <section class="slide"> diretamente dentro de #stage, com um rótulo no estilo data-screen-label="01 刊头" (indexado em 1).
• Exatamente um slide carrega .active. Sem páginas .dark neste tema — cada página fica em papel creme; o ritmo vem da densidade, não de mudanças de tema.
• Teclado: ←/↑/PageUp anterior · →/↓/Space/PageDown próximo · Home/End primeiro/último. Roteamento por hash #/N (indexado em 1) lido ao carregar e hashchange, escrito via history.replaceState. Clique: um terço esquerdo para voltar, o resto para avançar. Contador fixo no canto inferior direito, dica de tecla no canto inferior esquerdo.
• Zero JS externo, zero etapa de build; o arquivo deve abrir via file:// dentro de um iframe com sandbox.

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

--paper:        #FBFAF8;                    /* cream paper, every page */
--panel:        #FFFFFF;                    /* data-card surface */
--ink:          #232036;                    /* deep ink text */
--ink-70:       rgba(35, 32, 54, 0.72);     /* prose body */
--ink-45:       rgba(35, 32, 54, 0.46);     /* captions, chrome */
--hairline:     rgba(35, 32, 54, 0.12);     /* all rules */
--accent:       #635BFF;                    /* Stripe purple — the ONLY accent */
--accent-soft:  rgba(99, 91, 255, 0.08);    /* tint panels, quote marks */
--serif:        "Newsreader", "Source Serif 4", "Noto Serif SC", Georgia, serif;
--serif-text:   "Source Serif 4", "Newsreader", "Noto Serif SC", Georgia, serif;
--sans:         "Inter", "Noto Sans SC", -apple-system, sans-serif;

• Fontes via Google Fonts @import: Newsreader (display, incl. itálico), Source Serif 4 (prosa), Noto Serif SC (serifa CJK), Inter, Noto Sans SC.
• Todos os numerais tabulares: a classe compartilhada .num define font-variant-numeric: tabular-nums; cada métrica, ano e número de exibição a utiliza.
• Um acento. Nunca uma segunda tonalidade, nunca um gradiente, nunca um slide escuro.

Cromagem da carta (cada página)

• Cabeçalho faixa superior com linha fina: nome da publicação/empresa à esquerda (Inter em small-caps, com espaçamento entre letras, palavra da marca em acento), edição + data à direita.
• Rodapé linha fina: nome da seção à esquerda, metadados do autor/edição à direita. A numeração das páginas vive apenas no contador do runtime no canto inferior direito — nunca também impressa dentro de um slide.
• Títulos em var(--serif) (Newsreader/Noto Serif SC), peso 500–600 — as letras são definidas elegantemente, não em negrito; palavras-chave recebem class="hl" (acento), nunca o título inteiro.
• Kicker: rótulo em small-caps Inter com uma barra de acento curta de 44×3px acima dos títulos das seções.
• Cópia chinesa usa aspas 「」; 中英混排 mantém o inglês em Newsreader itálico.

Dispositivos de assinatura (o gênero — use-os, não substitua)

…