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