` 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`. There are no light pages — every page is the black stage. - 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; only `--accent` may change) | Token | Value | Role | |---|---|---| | `--stage` | `#000000` | the stage — every page background | | `--ink` | `#FFFFFF` | primary type, pure white only | | `--accent` | `#FF6900` | **the one accent** — deck-wide single choice | | `--muted` | `#9B9B9B` | captions / secondary lines | | `--faint` | `#5F5F5F` | whisper labels, footnotes | | `--line` | `#2A2A2A` | hairlines, capsule borders | | `--bar-base` | `#3A3A3A` | losing / baseline comparison bar | | `--sans` | `'Inter', 'Geist', 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif` | the only family | - `--accent` is a **single choice per deck** from exactly three values: Mi orange `#FF6900`, Spotify green `#1ED760`, Apple blue `#2997FF`. Mixing two of them in one deck is the cardinal sin of this style. - Fonts load via one Google Fonts `@import` (Inter + Noto Sans SC); no other external resource of any kind. ### Signature devices (the visual DNA — every deck must show them) 1. **One idea per screen**: each page centers one element with flex — one word, one number, one sentence, or one comparison. If a page needs a paragraph, it needs to become two pages. 2. **Giant numeral theater**: hero numbers are 320–460px, weight 900, tracking ≈ −0.04em, `font-variant-numeric: tabular-nums`, pure white, with a small uppercase unit beside or below — the unit (or one glyph) may take the accent. Exactly one quiet `--muted` caption line underneath. 3. **One-word manifesto**: 240–300px weight-900 word ending in an accent full stop (`。`), with one whisper line below. 4. **Stage spotlight**: a single faint `radial-gradient(closest-side, rgba(255,255,255,.05), transparent)` ellipse behind the hero element (`.spotlight`). This is the only decoration allowed — no other gradients, no photos, no emoji, no icon fonts, no shadows, no border-radius (runtime counter pill excepted). 5. **Whisper top label**: 12px / 600 / 4px-tracking uppercase `--faint` label centered at the top of every page (event name · chapter). It is chrome, not content — keep it nearly invisible. 6. **Accent-vs-grey comparison bars**: `.vs-row` = white 20px label left, full-width `--line`-hairline-topped track, accent fill for the subject vs `--bar-base` fill for the baseline, values printed at the right end in tabular-nums (accent value white-hot, baseline value `--muted`). The page's subject is **always** the accent bar. 7. **Price reveal**: small struck-through `--muted` expectation line above a giant white price whose currency glyph is the accent. The deck's climax. ### Layout enumeration (use 5+ per deck, never one layout everywhere) | Layout | Role | |---|---| | `cover` | whisper event label + product name with accent full stop + one sub line | | `agenda` | "今晚，只讲三件事。" — 3 numbered rows, accent numerals, hairline-separated | | `one-word` | 240–300px single word + accent 。 + whisper subtitle | | `big-number` | 320–460px numeral + uppercase unit + one caption (the workhorse — use 2–3) | | `versus` | subject vs baseline spec bars, accent vs `--bar-base`, tabular values | | `quote` | 64–88px white statement, one phrase in accent, attribution in `--faint` | | `price` | strikethrough expectation + giant price, accent currency glyph | | `one-more-thing` | the classic teaser line + one whisper reveal | | `closing` | 「谢谢。」-scale farewell + key-hint capsule | ### Typography & scale (read from the last row) - Geometric bold sans only, weights 700–900; headlines 96–180px, hero words 240–300px, hero numbers 320–460px, all with negative tracking (−0.02 to −0.05em). Captions 20–24px `--muted`; whisper labels 12–13px uppercase 4px-tracking `--faint`. Nothing between 24px and 64px — this style has no "medium" type; it whispers or it shouts. - Every digit everywhere sits in `tabular-nums`. Large numbers take thin comma grouping (`1,024`). - Chinese copy uses 「」 quotes; the accent is applied to a single glyph or a single phrase, never a whole headline. ### Rhythm & discipline - Default 10 pages (8–11 allowed). Sequence builds like a launch event: cover → agenda → alternating word/number beats → versus → quote → price reveal → one more thing → closing. Place the biggest number and the price in the back half — the deck must escalate. - Accent budget: **at most one accent device per page**; pages with none are encouraged. Pure black + pure white carries the style; the accent is the laser pointer, not the lighting rig. - Real content only — the user's actual words and numbers; missing data gets an honest `` placeholder, never invented statistics. (The seed deck's 「曜石 YAO」 launch is fictional demo content and must be fully replaced.) ## Workflow 1. **Clarify once**: topic, audience, page count, the ONE accent, and which 2–3 numbers are the protagonists (plus the price, if there is one). This style lives and dies by its hero numerals — pick them before any page. 2. **Copy `example.html`**, retitle, then replace each section's content following the layout enumeration. Keep tokens, spotlight, whisper labels, and the script intact. Change `--accent` only to one of the three sanctioned values. 3. **For ≥ 5 pages, showcase first**: build the cover + one big-number page, confirm the grammar, then batch the rest. 4. **Self-check before delivery**: arrow through every page; counter and `#/N` hash stay in sync; no overflow beyond 1920×1080; one idea and ≤ 1 accent device per page; every digit tabular; versus bar widths match their printed values proportionally; no second accent anywhere; no leftover demo (「曜石」/「YAO」) text; grep for `TODO`.