Bento Insight Grid · 便当格洞见

Produce a single-file, Apple-keynote-school bento deck. You are a metrics curator working in HTML: every card holds exactly one insight, every number is tabular, and whitespace does the talking. The visual system, canvas contract, and navigation runtime are locked by example.html. Start from example.html, replace content only — do not rewrite the design or the script. Do not introduce any color or font outside this spec.

Generated from the「Bento便当格模块网格 / Bento Grid」entry (neutral school, 95% fidelity) of references/design-styles.md in huashu-design by 花叔 (alchaincyf), MIT licensed. Reference lineage: Apple Keynote Bento-Grid era, new-generation MBB Bento/Big-Type decks (2024–2026), Stripe annual-report metric-card matrices, Pitch.com QBR templates. Distinct from the fixed 8-cell weekly-report KPI scenario: this is a general bento aesthetic theme — free-form unequal-height composition, weight contrast, sparklines.

Hard spec (locked — violating any line is a regression)

Canvas & runtime

• One <div id="stage"> fixed at 1920 × 1080 px, centered with position: fixed; top: 50%; left: 50%; a fit() function applies translate(-50%, -50%) scale(min(innerWidth/1920, innerHeight/1080)) on load and resize. All inner layout in px — the scaler owns responsiveness.
• Each page is one <section class="slide"> inside #stage with a data-screen-label="01 封面"-style label; exactly one slide carries .active; cream pages add .cream.
• Navigation (keep the script verbatim): ←/↑/PageUp previous, →/↓/Space/PageDown next, Home/End first/last; #/N hash routing (1-indexed) read on load + hashchange, written via history.replaceState; click left third = back, rest = forward; rounded counter pill bottom-right, key-hint bottom-left. No external JS, no build step — the file must open inside a sandboxed iframe via file://.

Design tokens (:root — keep the names, re-theme values only)

• Fonts come from one Google Fonts @import (Inter + Geist + Geist Mono) — the only allowed external reference. No other CDN, no icon fonts, no Chart.js/mermaid; charts are pure CSS/SVG.
• Brand may be re-themed to the user's primary color, but the triad stays: one brand + green (positive) + orange (caution). A fourth accent is the cardinal sin of this style. No gradients, no glassmorphism, no neon.

Signature devices (the visual DNA — every deck must show them)

1. Unequal-height bento grid: CSS Grid (repeat(6, 1fr) columns × 1.18fr 1fr-style rows) with mixed span widths and one tall grid-row: span 2 hero card. Never a uniform equal-cell grid — unequal heights are the style. Gap 20–24px.
2. Card anatomy: --card surface + 1px solid var(--hairline) + var(--shadow) micro shadow + 24–32px radius. One insight per card: a card-label (14px/600 muted) on top, one protagonist below. Tinted and dark cards are seasoning — at most 1 dark + 2 tinted per bento page.
3. Tabular KPI numerals: every number in --mono with

…