` 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 `

` 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) | Token | Value | Role | |---|---|---| | `--paper` | `#FFFFFF` | light page background | | `--night` | `#0E0E0C` | dark pages (solo-line, closing) | | `--ink` | `#1A1814` | primary text on light | | `--night-ink` | `#F5F3EE` | primary text on dark | | `--accent` | `#FF6B2C` | **the brand orange — the only accent** | | `--accent-dim` | `rgba(255,107,44,.14)` | annotation halos / soft fills | | `--ghost` | `#C9C7C2` | greyed comparison waveform | | `--grid` | `#ECEAE6` | hairline rules | | `--muted` | `#9A958C` | secondary labels | | `--muted-2` | `#5F5A52` | body copy on light | | `--night-line` | `#26241F` | hairlines on dark pages | | `--night-mut` | `#8A857C` | secondary text on dark | | `--sans` | `'Inter', 'PingFang SC', …, sans-serif` | headlines + body | | `--mono` | `'Geist Mono', 'SFMono-Regular', 'Menlo', monospace` | labels, annotations, numerals | **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. 4. **Mono hairline chrome**: 56px `.chrome-top` / `.chrome-bottom` strips on every page — Geist Mono 11px uppercase, 2px tracking, `--grid` hairline border (`--night-line` on dark), org name left with an orange `/` separator, orange uppercase tag right, orange `P.NN` page marker bottom right. No solid bars, no logos — type and one hairline only. 5. **Greyed contrast**: every claim gets a comparison — dashed industry baseline, the old process line above the new one, or a flat ghost line under the rising arc. The grey line is the "what is"; the orange line is the "what could be". 6. **Mono numerals**: giant numbers (`.giant`, 160–220px Geist Mono 600, negative tracking, `font-variant-numeric: tabular-nums`) with one orange glyph (%, ×, unit); stat strips (`.stat-strip`) with a `--grid` top hairline, 44px mono numbers and 11px uppercase captions. ### Layout enumeration (use 6+ per deck, never one layout everywhere) | Layout | Role | |---|---| | `cover` | giant statement headline (orange full stop) + waveform below with what-is / turn / new-bliss dots | | `contents` | chapters hung directly on the waveform as numbered annotation points | | `what-is` | left action-title column + low, flat grey waveform with dashed industry ghost + stat strip | | `turning-point` | giant mono numeral + V-shaped inflection waveform, THE ringed orange dot, dated annotation | | `before-after` | stacked contrast: grey jagged line top half, orange rising line bottom half, hairline divider | | `solo-line` | dark page, one orange line crossing the void, one annotation, one big number | | `evidence` | rising waveform with 4 labelled value dots + summary strip of mini inline-SVG sparklines | | `roadmap` | three waveform segments revealed in sequence (`d1/d2/d3`) + three phase columns below | | `quote` | orange SVG quote marks + 56px/800 quote with orange key phrase + ghost waveline footer | | `closing` | dark page, 6px orange curve climbing out of the top-right edge + giant CTA | ### Typography & narrative discipline - Headlines: Inter 800–900, 54–108px, tracking −1.5 to −4px; the closing glyph (。 or .) of a hero headline is orange — never the whole headline. - Body: 19px / 1.8 `--muted-2`, emphasized spans `--ink` 700, max-width ~620px. Labels/annotations/numerals: always Geist Mono, uppercase, 2–4px tracking. Chinese copy uses 「」 quotes and full-width punctuation. - Default 10 pages (8–11 allowed). White pages dominate; **at most 2–3 dark pages** (solo-line + closing). Orange budget: turning points, annotation dots, chrome tags and single glyphs — roughly ≤ 5 orange touches per page. - The deck must read as a Duarte sparkline: establish "what is" low, mark one explicit dated turning point, oscillate through evidence, end with the line climbing out of frame ("new bliss"). One story, one line. - No emoji, no gradients, no shadows, no images, no chart libraries. Real content only — the user's actual numbers and dates; missing data gets an honest `` placeholder, never invented statistics. (The seed deck's 「澈流 / CHELIU」 data is fictional demo content and must be fully replaced.) ## Workflow 1. **Clarify once**: topic, audience, page count — and the story spine: what is the "what is", what is THE dated turning point, which 3–4 numbers prove the climb. This style dies without a real inflection moment. 2. **Copy `example.html`**, retitle, then replace each section's content following the layout enumeration. Keep chrome strips, spark/reveal CSS, token names, and the script intact. Reshape the bézier paths to match the user's actual data direction (down-then-up, stepped, etc.) but keep the two-layer SVG pattern and `pathLength="1"` reveal mechanics. 3. **For ≥ 5 pages, showcase first**: build the cover + the turning-point page, confirm the grammar, then batch the rest. 4. **Self-check before delivery**: arrow through every page; counter and `#/N` hash stay in sync; reveal animation replays on each entry; no overflow beyond 1920×1080; annotation dots sit visually on their lines at 16:9; orange appears only at turning points; every page has the chrome strips and at least one waveform; no leftover demo (「澈流」/"CHELIU") text; grep for `TODO`.