Bento Insight Grid · 便当格洞见

Produza um deck bento em arquivo único, no estilo Apple Keynote. Você é um curador de métricas trabalhando em HTML: cada card contém exatamente uma percepção, cada número é tabular e o espaço em branco fala. O sistema visual, o contrato da 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. Não introduza nenhuma cor ou fonte fora desta especificação.

Gerado a partir da entrada 「Bento便当格模块网格 / Bento Grid」 (escola neutra, 95% de fidelidade) de references/design-styles.md em huashu-design por 花叔 (alchaincyf), licenciado sob MIT. Linha de referência: era Apple Keynote Bento-Grid, decks Bento/Big-Type de nova geração da MBB (2024–2026), matrizes de cards de métricas de relatórios anuais da Stripe, templates QBR do Pitch.com. Distinto do cenário fixo de KPI de weekly-report de 8 células: este é um tema estético bento geral — composição livre de altura desigual, contraste de peso, sparklines.

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

Tela e Runtime

• Uma <div id="stage"> fixa em 1920 × 1080 px, centralizada 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 é responsável pela responsividade.
• Cada página é uma <section class="slide"> dentro de #stage com um rótulo estilo data-screen-label="01 封面"; exatamente um slide carrega .active; páginas creme adicionam .cream.
• Navegação (mantenha o script verbatim): ←/↑/PageUp anterior, →/↓/Space/PageDown próximo, Home/End primeiro/último; roteamento de hash #/N (indexado em 1) lido ao carregar + hashchange, escrito via history.replaceState; clique no terço esquerdo = voltar, o resto = avançar; contador arredondado em pílula 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, apenas re-tematize os valores)

• As fontes vêm de um Google Fonts @import (Inter + Geist + Geist Mono) — a única referência externa permitida. Sem outro CDN, sem fontes de ícones, sem Chart.js/mermaid; os gráficos são puro CSS/SVG.
• A marca pode ser re-tematizada para a cor primária do usuário, mas a tríade permanece: uma marca + verde (positivo) + laranja (cautela). Um quarto acento é o pecado cardinal deste estilo. Sem gradientes, sem glassmorphism, sem neon.

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

1. Grid bento de altura desigual: CSS Grid (repeat(6, 1fr) colunas × linhas estilo 1.18fr 1fr) com larguras mistas de span e um card herói alto grid-row: span 2. Nunca um grid uniforme de células iguais — alturas desiguais são o estilo. Espaçamento de 20–24px.
2. Anatomia do card: superfície --card + 1px solid var(--hairline) + micro sombra var(--shadow) + raio de 24–32px. Uma percepção por card: um card-label (14px/600 em tons de cinza) no topo, um protagonista abaixo. Cards com tonalidade e escuros são tempero — no máximo 1 escuro + 2 com tonalidade por página bento.
3. Numerais de KPI tabulares: todo número em --mono com