Terminal Mono (Terminal de Largura Fixa)

Um plugin de deck com tema único e travado, derivado do template de deck de slides nicobailon/visual-explainer com licença MIT, reestilizado com a estética Terminal Mono de seu references/slide-patterns.md. Nativo para desenvolvedores e tipograficamente rigoroso: fundo quase preto, tudo em monoespaçado, uma voz verde, uma grade de pontos sutil.

Zero esqueumorfismo, zero efeitos. Sem prompts $, sem cromado de janela vermelho/amarelo/verde, sem linhas de varredura CRT, sem vinhetas, sem brilhos. Este tema se sustenta apenas na disciplina tipográfica e na textura da grade de pontos. (O visual "teatro de terminal" esqueumórfico pertence a um plugin diferente — não vá por aí.)

Comece em example.html na pasta deste plugin. É a semente comprovada: copie seus tokens :root (ambos os temas), CSS do deck/slide, tratamento da grade de pontos e todo o script do SlideEngine verbatim, então substitua apenas o conteúdo do slide. Não reescreva o sistema de design e não introduza nenhuma cor ou fonte fora desta especificação.

Tokens de design (travados — liste verbatim em :root)

Escuro é o tema padrão; o modo claro alterna automaticamente via prefers-color-scheme: light. Ambos os blocos fazem parte da especificação travada — o suporte a tema duplo é a assinatura da família visual-explainer e deve ser incluído em todos os decks.

:root {
  --font-body: 'Geist Mono', 'SF Mono', Consolas, monospace;
  --font-mono: 'Geist Mono', 'SF Mono', Consolas, monospace;
  --bg: #0a0e14;                         /* near-black ground */
  --surface: #12161e;
  --surface2: #1a1f2a;
  --surface-elevated: #222836;
  --border: rgba(80, 250, 123, 0.06);    /* low-opacity green hairline */
  --border-bright: rgba(80, 250, 123, 0.12);
  --text: #c8d6e5;
  --text-dim: #7d8c9b;                   /* AA on --bg for body text */
  --accent: #50fa7b;                     /* Dracula green — the only voice */
  --accent-dim: rgba(80, 250, 123, 0.08);
  --code-bg: #060a10;
  --code-text: #c8d6e5;
  --dot: rgba(80, 250, 123, 0.05);       /* dot-grid ink */
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f4f6f8;
    --surface: #ffffff;
    --surface2: #eaecf0;
    --surface-elevated: #f8f9fa;
    --border: rgba(0, 80, 40, 0.08);
    --border-bright: rgba(0, 80, 40, 0.16);
    --text: #1a2332;
    --text-dim: #5a6a7a;
    --accent: #0d7a3e;                   /* deep green for light ground */
    --accent-dim: rgba(13, 122, 62, 0.08);
    --code-bg: #1a2332;                  /* code blocks stay dark in light mode */
    --code-text: #c8d6e5;
    --dot: rgba(13, 122, 62, 0.07);
  }
}

Tipografia (travada)

• Uma fonte para tudo: Geist Mono 400/500/600/700 do Google Fonts (https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600;700&display=swap). Pilha de fallback 'SF Mono', Consolas, monospace. Nunca uma segunda fonte.
• Títulos são mono de peso-400 grandes, nunca negrito de exibição. Exibição clamp(36px, 7vw, 88px) peso 400 espaçamento entre letras -2px; títulos clamp(24px, 4vw, 42px) peso 400 espaçamento entre letras -1px.
• Rótulos/sobrancelhas: 10-13px, peso 600, maiúsculas, espaçamento entre letras 1.5-2px, cor de destaque. Subtítulos: mono em maiúsculas em --text-dim.
• Corpo e marcadores: 15-20px, altura da linha ~1.6, --text-dim.
• Números usam font-variant-numeric: tabular-nums.

Dispositivos de assinatura (travados)

• Grade de pontos em cada slide: background-image: radial-gradient(var(--dot) 1px, transparent 1px); background-size: 24px 24px; Isso substitui os brilhos radiais de destaque que outros temas da família usam — sem brilhos aqui.
• Linhas finas, não sombras: bordas de 1px em --border / --border-bright. Sem box-shadows, sem desfoques (exceto o desfoque do plano de fundo dos pontos de navegação da semente).
• Geometria quadrada: border-radius 0-2px em todos os lugares; marcadores de lista são quadrados de 7px em --accent (sem pontos redondos); pontos do deck são quadrados.
• Decoração de colchetes de canto (apenas slides de título/encerramento): duas linhas de destaque de 1.5px com opacidade de ~0.25 formando um L em um canto, como SVG inline.
• Números do divisor de seção: numerais mono gigantes (até 260px), peso 400, cor de destaque com opacidade de 0.05, centralizados atrás do título.

Motor do deck e navegação (mantenha verbatim da semente)

• .deck é um contêiner 100dvh scroll-snap; cada página é um <section class="slide"> (também 100dvh, scroll-snap-align: start).
• SlideEngine (JS puro, sem dependências) constrói o cromado: barra de progresso de destaque de 2px, trilha de pontos quadrada (direita, com desfoque de plano de fundo), contador n / N,

…