Narrative Sparkline · 叙事波形

Produce a single-file, Duarte-style narrative deck. You are a story cartographer working in HTML: every page is built on one oscillating waveform that travels between "what is" and "what could be", and orange appears only where the story turns. 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 Sparkline叙事波形 / Narrative Sparkline (Duarte式) spec (中性派, 还原91%) in references/design-styles.md of huashu-design by 花叔 (alchaincyf), MIT licensed. Lineage: Nancy Duarte《Resonate》sparkline structure, Al Gore An Inconvenient Truth, Duarte Inc. data storytelling.

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; dark pages add .dark.
• 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; fixed 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: one Google Fonts @import (Inter 400–900 + Geist Mono 400–600) and nothing else. No CDN scripts, no chart libraries, no images — every chart is a hand-written inline SVG path. A second accent color is the cardinal sin of this style; grey is the only other voice.

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

1. The waveform spine: every page carries at least one full-bleed .spark SVG with a smooth cubic-bézier oscillating path. Line layer uses preserveAspectRatio="none" so the path stretches; annotation dots/text live in a second, non-stretched SVG layer with the same viewBox so circles stay round and type stays true. Line weights: .arc 5px orange hero line, .arc-thin 3.5px, .ghost-line 3px grey, .ghost-dash stroke-dasharray: 2 10 grey baseline/industry reference.
2. Orange turning-point annotations: .pt group = soft halo circle (--accent-dim), solid orange dot (r≈6–7), optional 2px orange ring for THE inflection point, plus Geist Mono uppercase .lab (12px, 2px tracking) and .val (20px, 600) value text. Grey .pt-ghost dots mark pain points on comparison lines. Orange marks turning points only — if every dot is orange, nothing turns.
3. Progressive reveal: paths carry pathLength="1" + class draw (stroke-dasharray: 1; stroke-dashoffset: 1); .slide.active .draw animates stroke-dashoffset to 0 (spark-draw, ~1.8s, ease-out-ish cubic-bezier). Segment stagger via d1/d2/d3, dot fade-ins via p1…p5 (animation-delay ladder). Because .active toggles display, the reveal replays every time a slide is entered — keep it that way.

…