Y2K Chrome (hps-y2k-chrome)

Plugin de tema único travado no tema y2k-chrome do projeto principal com licença MIT lewislulu/html-ppt-skill (36 temas × 31 layouts × 27 animações — este plugin entrega exatamente uma dessas skins, totalmente integrada em um único pacote autônomo: example.html).

Comece a partir de example.html. Substitua apenas o conteúdo. Nunca reescreva o sistema de design ou o script de tempo de execução. Sem cores ou fontes fora desta especificação.

Folha de tokens travada (:root — não adicione, remova ou mude a cor)

:root{
  --bg:#dfe4ec;            --bg-soft:#eef1f6;
  --surface:rgba(255,255,255,.72);   --surface-2:rgba(255,255,255,.5);
  --border:rgba(120,135,170,.32);    --border-strong:rgba(80,100,140,.55);
  --text-1:#1a1f2e;        --text-2:#4a536a;       --text-3:#8590a6;
  --accent:#8a5cff;        --accent-2:#3ccfd8;     --accent-3:#ff84c4;
  --good:#1fb98c;          --warn:#e8a13d;         --bad:#e0445a;
  --grad:linear-gradient(135deg,#b8c4d8 0%,#f5f7fb 30%,#8a9ab8 55%,#e8ecf4 80%,#6b7a95 100%);
  --grad-soft:linear-gradient(135deg,#c9e4ff,#f5d6ff 50%,#d6fffa);
  --chrome-text:linear-gradient(180deg,#f8faff 0%,#9aa8c4 50%,#4a5670 100%);
  --radius:26px;           --radius-sm:16px;       --radius-lg:36px;
  --shadow:0 12px 30px rgba(70,90,130,.22),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(80,100,140,.2);
  --shadow-lg:0 24px 60px rgba(70,90,130,.35),inset 0 2px 0 rgba(255,255,255,.95);
  --font-sans:'Space Grotesk','Inter','Noto Sans SC',sans-serif;
  --font-display:'Space Grotesk','Inter',sans-serif;
  --font-mono:'JetBrains Mono',SFMono-Regular,Menlo,monospace;
  --letter-tight:-.03em;   --letter-normal:-.01em;
  --ease:cubic-bezier(.4,0,.2,1);
}

Fontes: Space Grotesk é a fonte para títulos e corpo de texto ('Noto Sans SC' como fallback para CJK), JetBrains Mono para código/rótulos. Carregadas via Google Fonts @import apenas — o único recurso externo permitido.

Dispositivos de assinatura (use estes, nada mais)

1. Tela de metal prateado — body carrega o gradiente de 5 paradas linear-gradient(135deg,#c4cfe0 0%,#f0f3f8 25%,#aab8d0 50%,#f5f7fb 75%,#b8c4d8 100%) que preenche a tela. Cada slide é transparente sobre ele. Nunca pinte um fundo de slide opaco.
2. Texto com recorte cromado — .h1, .chrome-text, .stat-big recortam --chrome-text (branco→aço→grafite) via background-clip:text, mais filter:drop-shadow(0 2px 3px rgba(40,55,85,.38)) para que a parada superior branca mantenha a definição das letras sobre a tela clara. Números de exibição e palavras principais são sempre cromados, nunca cor sólida.
3. Cartões de vidro fosco — .card = --surface (72% branco) + backdrop-filter:blur(16px) saturate(140%) + --shadow. O destaque superior inset 0 1px 0 rgba(255,255,255,.9) é a assinatura — nunca o remova. Raio mega --radius:26px (superfícies grandes 36px).
4. Acentos doces — roxo --accent lidera (chamadas, barra de progresso, checks), ciano --accent-2 e rosa --accent-3 apoiam (esferas, barras de gráfico, sombrancelhas). Acentos são apenas para superfícies pequenas; preenchimentos grandes usam --grad / --grad-soft.
5. Esferas brilhantes — .orb esferas doces com gradiente radial e um destaque especular branco, posicionadas absolutamente, z-index:0, apenas decorativo.
6. Faíscas cromadas — SVGs de estrela de 4 pontas inline (.sparkle) preenchidos com o gradiente cromado ou acentos doces.
7. Pílulas cápsula cromadas — .pill = linear-gradient(180deg,#fff,#d4dcec) com contorno --border; tons .pill-accent com --accent.

Proibido: modo escuro, neon sobre preto, sombras com deslocamento rígido, cor H1 plana sem textura, qualquer valor hexadecimal ou família de fontes não listada acima.

Estrutura da página e tempo de execução (mantenha exatamente como está no pacote)

• Um arquivo HTML autônomo: <style> inline + <script> inline, zero build, zero JS externo. Gráficos são CSS puro / SVG inline — nunca Chart.js ou mermaid. Ícones são SVG inline. Sem imagens externas.
• Cada página é <section class="slide" data-title="…"> dentro de <div class="deck" id="deck"> — uma faixa de rolagem horizontal com snap, uma tela 100vw × 100vh por slide, preenchimento 72px 96px, sem rolagem interna.
• Cromado fixo: .deck-header (nome do deck + chip de tema y2k-chrome), .deck-footer (atribuição + contador N / total), .progress-bar (preenchimento de acento).
• Tempo de execução do teclado: ← → Space PageUp PageDown Home End para navegar; #/N (baseado em 1) links profundos de hash com history.replaceState em try/catch (seguro para srcdoc). O script remove duplicatas da janela/documento duplo

…