huashu-golden-circle

# Golden Circle Diagram · 黄金圆环图解

Produce a **single-file, one-diagram concept deck**. You are visualizing a
methodology the way Simon Sinek drew the Golden Circle on a TED flip chart:
one geometric master figure carries the entire argument, and every page is
that figure seen from a different angle. 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 中性派「单图母图概念图解 / Diagrammatic Minimalism」spec in
`references/design-styles.md` of
[huashu-design](https://github.com/alchaincyf/huashu-design) by 花叔
(alchaincyf), MIT licensed. Lineage: Simon Sinek's Golden Circle TED talk,
Bauhaus geometric abstraction, "one diagram rules the room" information
architecture.

## 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`; the dark closing page adds `.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` | `#FAFAF7` | warm-white page background |
| `--ink` | `#141414` | primary text |
| `--night` | `#161512` | dark closing-page background |
| `--night-ink` | `#F5F2EA` | primary text on dark |
| `--accent` | `#E8860C` | **the only accent hue (gold)** |
| `--tint-2` | `#F2BA6B` | middle-ring tint of the accent |
| `--tint-3` | `#FAE5C3` | outer-ring tint of the accent |
| `--neutral-2` | `#E8E4D9` | de-emphasized ring (warm grey) |
| `--neutral-3` | `#F2EFE7` | de-emphasized outer ring |
| `--line` | `#E5E1D6` | hairline rules |
| `--muted` | `#8A867C` | secondary labels |
| `--muted-2` | `#56524A` | body copy |
| `--faint` | `#B5B0A4` | tertiary captions |
| `--night-line` | `#3A372F` | hairlines on the dark page |
| `--display` | `'Jost', 'Manrope', 'PingFang SC', …` | uppercase tracked labels |
| `--sans` | `'Manrope', 'PingFang SC', …` | headlines + body |

- Fonts come from the single existing Google Fonts `@import`
  (Jost 400–700 + Manrope 400–800); Chinese falls back to PingFang SC /
  Microsoft YaHei. No other `@import`, no CDN scripts, no icon fonts.
- `--tint-2/--tint-3` are tints of the accent, not second colors. **A second
  accent hue is the cardinal sin of this style.**

### THE master figure (the deck's entire visual vocabulary)

The `.gc` component — nested concentric circles, pure `border-radius: 50%`
divs — is the only diagram in the deck. Keep its geometry verbatim:

- `.gc { --gc: <size>px }` sets the diameter; rings at `inset: 0` (WHAT,
  `--tint-3`), `inset: 16%` (HOW, `--tint-2`), `inset: 33%` (WHY, solid
  `--accent`, flex-centered core label).
- Uppercase labels (`.lbl`, Jost 600, `letter-spacing: .35em`) are embedded
  **inside the bands**: WHAT centered at 8% height, HOW at 24.5%, WHY in the
  core at `calc(var(--gc) * 0.085)` in `--paper` white.
- Locked modes — these are the full enumeration, do not invent new ones:
  - default: golden fill (cover, master page, the "right way" comparison);
  - `.mode-how` / `.mode-what`: target band `--accent` (its label `--paper`),
    other bands `--neutral-3`/`--paper`;
  - `.mode-grey`: all-neutral counter-example (core `--muted`);
  - `.mode-outline`: transparent rings with 2px `--accent` strokes — dark
    closing page only.
- Derivatives allowed: the solid accent disc (`.why-disc`, the WHY page's
  zoomed core), faint watermark rings (1px accent border, opacity ≤ 0.3,
  may bleed off-canvas), mini three-circle inline-SVG glyphs (36px, one band
  accented to mark a section), and inside-out arrows (inline SVG: dot at the
  center, 2–2.5px line, solid polygon head). Nothing else — no photos, no
  charts, no emoji, no decorative illustration.
- The rings may be renamed to match the user's framework (信念/路径/产品,
  core/loop/surface…) but there are **always exactly three bands**, and the
  innermost band is always the thesis.

### Chrome (hairline strips, not bars)

- Every page: `.head` (top) and `.foot` (bottom) — 84px strips at
  `left/right: 80px` with a 1px `--line` border (`--night-line` on dark),
  Jost 13px/600/3px-tracking uppercase; left side carries the deck logotype
  in `--ink` `<b>` + a gold `/` separator; right side of `.foot` carries
  `NN / 章节名`. Content lives in `.body` (`top/bottom: 84px`,
  `left/right: 80px`).
- The only rounded rectangle in the deck is the runtime counter pill (and
  the WHAT evidence cards at 18px radius); everything else is a circle or a
  straight hairline.

### Layout enumeration (use 6+ per deck, never one layout everywhere)

| Layout | Role |
|---|---|
| `cover` | left headline (gold full stop `。`) + hairline meta row; right master figure |
| `contents` | hairline rows: gold number + mini glyph + title + uppercase EN label |
| `master` | the figure at ≈660px + inside-out arrow piercing the rings + per-ring notes |
| `why` | solid accent disc (zoomed core) + one belief statement, ≤ 2 sentences |
| `how` | `.mode-how` figure + three hairline-separated pillar columns |
| `what` | `.mode-what` figure + 2×2 evidence cards with glyph markers |
| `big-number` | 300px Manrope-800 numeral (accent unit glyph) + stat rail + watermark rings |
| `comparison` | grey circle (inward arrow, outside-in) vs gold circle (outward arrow, inside-out) |
| `quote` | 66px/800 quote, key word in accent, offset watermark rings bleeding right |
| `closing` | dark page, `.mode-outline` figure + CTA in a 2px accent outlined capsule |

### Typography & discipline

- Headlines: Manrope 800, 64–96px, negative tracking; the cover/closing
  full stop `。` is the accent. Body (`.lede`) 20px/1.85 `--muted-2` with
  `<strong>` ink emphasis — **statements, not bullet walls**; any list ≤ 3
  short lines.
- Labels (`.kicker`, `.caption`, ring labels): Jost 600, 12–15px, 3–5px
  tracking, uppercase — the connective tissue of the style.
- Chinese copy uses 「」 quotes and full-width punctuation; accent is applied
  to single glyphs and key words, never whole headings.
- Default 10 pages (8–11 allowed). Exactly **one** dark page (the closing).
  Accent budget: outside the figure itself, ≤ 3 gold touches per page.
- One idea per page, mapped onto the figure: if a concept cannot be pointed
  to on the circle, it does not belong in this deck.

## Workflow

1. **Clarify once**: topic, audience, page count — and the user's
   three-band framework (what is the WHY / HOW / WHAT of *their* argument),
   plus 1–2 protagonist numbers for the evidence page. The master figure is
   the deck; name its bands before writing any page.
2. **Copy `example.html`**, retitle, rename the ring labels if needed, then
   replace each section's content following the layout enumeration. Keep the
   `.gc` component, tokens, hairline chrome, and the script intact. Re-theme
   by changing token values only — and keep `--tint-2/--tint-3` as tints of
   whatever single accent you choose.
3. **For ≥ 5 pages, showcase first**: build the cover + the master-diagram
   page, confirm the figure's band names read correctly, 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; every page shows
   the figure or one of its locked derivatives; ring labels sit inside their
   bands at every `--gc` size used; exactly one accent hue in the whole
   file; no leftover demo ("同心"/"TONGXIN") text; grep for `TODO`.