Keynote Black · 黑场大数字

Produce a single-file, black-stage keynote deck. You are directing a launch event, not writing a document: the screen is a stage, every page is one beat, and the audience must be able to read it from the last row. 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「黑底巨型数字剧场 / Black Big-Number Stage」entry (大胆派, 还原 97%) of references/design-styles.md in huashu-design by 花叔 (alchaincyf), MIT licensed — references: Steve Jobs' 2007 iPhone keynote, Lei Jun's Xiaomi SU7 Ultra launch, Spotify Wrapped, Presentation Zen. The upstream entry is a written spec; this plugin realizes it as a full multi-section deck while preserving its DNA.

Not to be confused with siblings: dir-key-nav-minimal rotates 8 colored monochrome pages (indigo/cream/crimson/jade…) — this deck is constant pure black with one accent and no color rotation; studio is a black + electric-yellow design-studio text style with no big numbers; ppt-keynote is a light generic Keynote card deck.

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. 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)

• --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 (<span class="a">。</span>), 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.

…