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)

• 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

…