Luxe Whitespace · 奢华留白

Produza um deck de quiet-luxury em arquivo único. Você está diagramando para uma maison, não para uma startup: cada página respira, números flutuam em pesos ultrafinos e o dourado aparece apenas como um fio ou um ponto decimal — nunca como uma superfície. O sistema visual, o contrato da tela e o runtime de navegação são travados por example.html. Comece em 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.

Adaptado da vitrine ppt-build de huashu-design por 花叔 (alchaincyf), licenciado sob MIT. O arquivo original é uma única página de referência; este plugin o estende para um deck completo de múltiplas seções, preservando seu DNA: o campo off-white, as métricas finas flutuantes, as barras de comparação dourado-vs-cinza e os separadores de fio gradiente.

Especificação rígida (travada — violar qualquer linha é uma regressão)

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 cuida da responsividade.
• Cada página é uma <section class="slide"> dentro de #stage com um rótulo estilo data-screen-label="01 封面" e a moldura de página travada: padding: 64px 96px 48px 96px, coluna flexível, chrome .top-row no topo e .bottom-section (texto de insight + marca da marca) fixado na parte inferior via margin-top: auto. Exatamente um slide carrega .active.
• Navegação (mantenha o script verbatim): ←/↑/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; o script também constrói o indicador de ponto de slide dourado em #dots e o sincroniza em go(). Contador em pílula no canto inferior direito, dica de tecla no canto inferior esquerdo. Sem JS externo, sem etapa de build — o arquivo deve abrir dentro de um iframe com sandbox.

Tokens de design (:root — mantenha os nomes, re-tematize apenas os valores)

• Carregamento de fonte: exatamente um @import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&display=swap') no topo da folha de estilo. Apenas pesos 200/300/400/500/600 — 700+ é proibido; a ênfase neste estilo é alcançada subindo de 300 → 500, não por negrito.
• Um acento. Uma segunda cor, uma página escura, uma superfície gradiente ou uma sombra projetada no conteúdo (a sombra da caixa de palco é a única exceção) é o pecado capital deste estilo.

Dispositivos de assinatura (o DNA visual — todo deck deve mostrá-los)

1. Numerais flutuantes ultrafinos: valores métricos em 120px peso 200 com letter-spacing: -4px; números de destaque de até 240px peso 200 (letter-spacing: -10px). O ponto decimal é sempre um <span class="dot">.</span> dourado em peso 300; unidades são 28–56px vertical-align: super dourado em peso 200 em opacity: 0.8.
2. Separadores de fio gradiente: verticais de 1px construídos com linear-gradient(to bottom, transparent, var(--hairline) 50%, transparent) — entre cartões de métricas (::after), colunas de linha do tempo e o divisor de duas colunas. Nunca uma borda sólida de altura total.
3. Barras de comparação dourado-vs-cinza: .comp-row = rótulo de 80px alinhado à direita + trilha de 2px --track + preenchimento; o assunto da página é sempre o preenchimento dourado de 3px, os concorrentes recebem o preenchimento --bar cinza de 2px; os valores ficam fora da trilha (dourado para o assunto). Linhas de gráfico amplas podem usar o

…