` 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 and the locked page frame: `padding: 64px 96px 48px 96px`, flex column, `.top-row` chrome at the top and `.bottom-section` (insight text + brand mark) pinned to the bottom via `margin-top: auto`. Exactly one slide carries `.active`. - 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; the script also builds the gold slide-dot indicator into `#dots` and syncs it in `go()`. Counter pill bottom-right, key-hint bottom-left. No external JS, no build step — the file must open inside a sandboxed iframe. ### Design tokens (`:root` — keep the names, re-theme values only) | Token | Value | Role | |---|---|---| | `--bg` | `#FAFAF8` | warm off-white page — the only background | | `--ink` | `#2A2A2A` | primary ink (soft black, never #000) | | `--gold` | `#D4A574` | **the only accent** — hairlines, decimals, winning bars | | `--hairline` | `#E0DCD6` | gradient hairline separators | | `--rule` | `#EEECE8` | horizontal section rules / counter border | | `--track` | `#EEECEA` | comparison bar track | | `--bar` | `#D8D5D0` | baseline / losing bar | | `--muted` | `#696963` | metric names, strong captions | | `--soft` | `#74746E` | subtitles | | `--faint` | `#B8B4AE` | tertiary captions, eyebrow | | `--ghost` | `#C8C4BC` | brand text, source notes, oldest timeline year | | `--body` | `#6E6E68` | insight body copy (WCAG AA on `--bg`) | | `--sans` | `'Inter', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif` | the only family | - **Font loading**: exactly one `@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&display=swap')` at the top of the stylesheet. Weights 200/300/400/500/600 only — **700+ is forbidden**; emphasis in this style is achieved by stepping 300 → 500, not by bolding. - One accent. A second color, a dark page, a gradient surface, or a drop shadow on content (the stage letterbox shadow is the sole exception) is the cardinal sin of this style. ### Signature devices (the visual DNA — every deck must show them) 1. **Ultra-thin floating numerals**: metric values at 120px weight 200 with `letter-spacing: -4px`; hero numbers up to 240px weight 200 (`letter-spacing: -10px`). The decimal point is always a gold `.` at weight 300; units are 28–56px weight 200 gold `vertical-align: super` at `opacity: 0.8`. 2. **Gradient hairline separators**: 1px verticals built with `linear-gradient(to bottom, transparent, var(--hairline) 50%, transparent)` — between metric cards (`::after`), timeline columns, and the two-column divider. Never a solid full-height border. 3. **Gold-vs-grey comparison bars**: `.comp-row` = right-aligned 80px label + 2px `--track` track + fill; the page's subject is **always** the 3px gold fill, competitors get the 2px grey `--bar` fill; values sit outside the track (gold for the subject). Wide chart rows may use the `linear-gradient(to right, var(--gold), rgba(212,165,116,0.35))` fade fill. 4. **Page chrome**: every page opens with `.top-row` — 10px/400/4px-tracking uppercase `.eyebrow` left, 10px/300 right-aligned `.source-note` — and closes with `.bottom-section` — 13px/300 `.insight-text` (emphasis = `` at 500/#666) left, `.brand-mark` (32px gold hairline + 10px tracked brand text) right. Title pages add `.title-area`: 40px weight-200 headline with a weight-400 `.mid` span and a gold full stop (`.gold-dot`), 14px/300 subtitle, closed by a 1px `--rule` border. 5. **Gold slide-dot indicator**: 4px `--hairline` dots top-right; the active page becomes a 16px gold pill. Built by the script — do not hand-write dots into slides. 6. **Gold punctuation**: headlines end in a gold `。` or `.`; gold is never applied to a whole headline or paragraph. Budget: **≤ 5 gold touches per page** (a bar group counts as one). ### Layout enumeration (use 5+ per deck, never one layout everywhere) | Layout | Role | |---|---| | `cover` | 104px thin statement headline + gold full stop + 64px gold rule + 280px ghost year numeral at 5% opacity | | `contents` | hairline-ruled rows: 32px thin gold number + 22px/300 title + uppercase right caption | | `big-number` | one 240px thin numeral protagonist + gold-ruled side column (label + 15px/300 body) | | `metrics` | 2–3 `.metric-card` columns with 120px numerals + comparison groups + hairline separators (the upstream master) | | `channels` | full-width horizontal bar rows: name + EN small caption, gradient gold winner, 32px thin values | | `timeline` | equal hairline-separated columns, 88px year numerals graded ghost→faint→muted→ink, gold dot on the current year | | `quote` | centered: vertical gold fade hairline + 52px/200 quote (key phrase gold) + uppercase attribution | | `two-column` | before/after: ghost numerals left vs ink+gold numerals right, gradient hairline divider | | `stats-grid` | 2×2 grid of 96px thin numerals, crossed gradient hairlines through the center | | `closing` | 120px thin sign-off + gold full stop + uppercase EN echo + gold rule | ### Typography & whitespace discipline - Scale: eyebrow/captions 10–12px tracked uppercase · body 13–16px weight 300, line-height 1.8–2 · titles 40px weight 200 · metrics 120px · heroes 240px. Tracking: +2 to +4px on small uppercase, −0.5 to −10px on large thin type. Chinese copy uses 「」 quotes and full-width punctuation. - **70%+ of every page is empty.** One idea per page; at most 3 metric cards, 4 bar rows, 4 timeline columns, 4 stat cells, 7 contents rows. If content doesn't fit with this much air, add a page — never shrink the whitespace. - No emoji, no icon fonts, no images, no dark pages, no borders thicker than 1px (bars excepted at 2–3px), no border-radius except the counter pill and bar tracks. Icons, if truly needed, are 1px-stroke inline SVG. - Real content only — the user's actual numbers; missing data gets an honest `` placeholder, never invented statistics. (The seed deck's 「素白 SOBLANC」 perfume-house data is fictional demo content and must be fully replaced.) ## Workflow 1. **Clarify once**: topic, audience, page count, and which 2–4 numbers deserve the thin-numeral treatment. This style is carried by its floating numerals — choose them before writing any page. 2. **Copy `example.html`**, retitle, then replace each section's content following the layout enumeration. Keep the page chrome, hairline devices, token names, and the script intact. Re-theme by changing token values only — and only if the user's brand genuinely demands it; the off-white + warm gold pairing is the identity. 3. **For ≥ 5 pages, showcase first**: build the cover + one metrics page, confirm the grammar, then batch the rest. 4. **Self-check before delivery**: arrow through every page; dots, counter, and `#/N` hash stay in sync; no overflow beyond 1920×1080; bar widths match their printed values proportionally; every page shows the eyebrow row, the bottom brand mark, and at least one hairline device; no weight above 600 anywhere; gold count per page ≤ 5; no leftover demo ("素白"/"SOBLANC") text; grep for `TODO`.