Diagrama do Círculo Dourado · 黄金圆环图解

Produza um deck de conceito em arquivo único, com um único diagrama. Você está visualizando uma metodologia da forma como Simon Sinek desenhou o Círculo Dourado em um flip chart da TED: uma figura geométrica mestra carrega todo o argumento, e cada página é essa figura vista de um ângulo diferente. O sistema visual, o contrato da tela e o runtime de navegação são travados por example.html. Comece por example.html, substitua apenas o conteúdo — não reescreva o design ou o script. Não introduza nenhuma cor ou fonte fora desta especificação.

Gerado a partir da especificação 中性派「单图母图概念图解 / Diagrammatic Minimalism」em references/design-styles.md de huashu-design por 花叔 (alchaincyf), licenciado sob MIT. Linhagem: palestra TED "Círculo Dourado" de Simon Sinek, abstração geométrica Bauhaus, arquitetura de informação "um diagrama domina a sala".

Especificação rígida (travada — violar qualquer linha é um retrocesso)

Tela e runtime

• Uma <div id="stage"> fixa em 1920 × 1080 px, centralizada com position: fixed; top: 50%; left: 50%; uma função fit() aplica translate(-50%, -50%) scale(min(innerWidth/1920, innerHeight/1080)) ao carregar e resize. Todo o layout interno em px — o escalador é responsável pela responsividade.
• Cada página é uma <section class="slide"> dentro de #stage com um rótulo estilo data-screen-label="01 封面"; exatamente um slide carrega .active; a página de encerramento escura adiciona .dark.
• Navegação (mantenha o script exato): ←/↑/PageUp anterior, →/↓/Space/PageDown próximo, Home/End primeiro/último; roteamento de hash #/N (indexado em 1) lido ao carregar + hashchange, escrito via history.replaceState; clique no terço esquerdo = voltar, o resto = avançar; contador fixo no canto inferior direito, dica de tecla no canto inferior esquerdo. Sem JS externo, sem etapa de compilação — o arquivo deve abrir dentro de um iframe com sandbox via file://.

Tokens de design (:root — mantenha os nomes, apenas redefina os valores)

• As fontes vêm da única fonte do Google Fonts existente @import (Jost 400–700 + Manrope 400–800); o chinês volta para PingFang SC / Microsoft YaHei. Nenhuma outra @import, nenhum script CDN, nenhuma fonte de ícones.
• --tint-2/--tint-3 são tons do destaque, não segundas cores. Uma segunda cor de destaque é o pecado capital deste estilo.

A figura mestra (todo o vocabulário visual do deck)

O componente .gc — círculos concêntricos aninhados, divs puros de border-radius: 50% — é o único diagrama no deck. Mantenha sua geometria exata:

• .gc { --gc: <size>px } define o diâmetro; anéis em inset: 0 (O QUÊ, --tint-3), inset: 16% (COMO, --tint-2), inset: 33% (POR QUÊ, núcleo sólido --accent, rótulo centralizado com flex).
• Rótulos em maiúsculas (.lbl, Jost 600, letter-spacing: .35em) são incorporados dentro das faixas: O QUÊ centralizado a 8% de altura, COMO a 24,5%, POR QUÊ no núcleo a calc(var(--gc) * 0.085) em --paper branco.
• Modos travados — esta é a enumeração completa, não invente novos:
  • padrão: preenchimento dourado (capa, página mestra, a comparação do "caminho certo");
  • .mode-how / .mode-what: faixa alvo --accent (seu rótulo --paper), outras faixas --neutral-3/--paper;
  • .mode-grey: contraexemplo totalmente neutro (núcleo --muted);
  • .mode-outline: anéis transparentes com traços de --accent de 2px — apenas na página de encerramento escura.
• Derivados permitidos: o disco sólido de destaque (.why-disc, o núcleo ampliado da página POR QUÊ), anéis de marca d'água fracos (borda de destaque de 1px, opacidade ≤ 0,3, pode sair da tela), glifos de ícones em SVG inline de três círculos (36px, uma faixa destacada para marcar uma seção) e setas de dentro para fora (SVG inline: ponto no