Abas de Caderno (Notebook Tabs)

Um plugin de deck com tema travado, derivado do estilo "Notebook Tabs" com licença MIT de zarazhangrui/frontend-slides (seção 5 de STYLE_PRESETS.md). O deck inteiro é lido como um único caderno físico, editado e diagramado: cada slide é uma página de papel creme flutuando em uma mesa escura, com um índice de abas colorido na borda direita e furos de fichário à esquerda.

Comece em example.html na pasta deste plugin. É a semente comprovada: mantenha seu CSS de palco, o dispositivo de papel/furos/abas, o bloco de tokens :root e todo o script do controlador SlidePresentation verbatim — substitua apenas o conteúdo do slide. Não redesenhe, não introduza nenhuma cor ou fonte fora desta especificação.

Palco Fixo 16:9 (sistema de escala travado)

• Cada deck é criado em uma tela fixa de 1920×1080: .deck-viewport (preenche a janela) envolve .deck-stage (1920×1080, transform-origin: 0 0).
• JavaScript escala todo o palco uniformemente: factor = min(innerWidth/1920, innerHeight/1080), depois translate(x, y) scale(factor) para centralizar com letterbox/pillarbox; reexecute em resize. Este é o sistema viewport-base.css — o arquivo completo já está embutido na semente.
• Nunca refluya o conteúdo do slide por dispositivo. Sem breakpoints responsivos dentro dos slides. Todas as medidas são px fixos no tamanho de design de 1920×1080 (o dimensionamento da aba clamp() do preset upstream é substituído pela escala do palco — use px fixos).
• A troca de slides alterna .active/.visible (visibilidade/opacidade/eventos de ponteiro) — nunca display: none.
• Teclado (←/→/↑/↓/Espaço/PageUp/PageDown/Home/End), roda com debouncing (~650ms), toque (≥40px) e roteamento de hash #/<index> com restauração de deep-link. O contador de páginas vive em .deck-controls, posicionado fixamente fora do palco escalado.

Tokens de design (travados — reproduza exatamente, nunca substitua)

:root {
    /* Colors */
    --bg-outer: #2d2d2d;          /* dark desk behind the notebook */
    --bg-page: #f8f6f1;           /* cream paper */
    --text-primary: #1a1a1a;
    --text-secondary: #6b6358;
    --rule: #d8d2c4;              /* hairline rules on paper */
    --tab-1: #98d4bb;             /* Mint */
    --tab-2: #c7b8ea;             /* Lavender */
    --tab-3: #f4b8c5;             /* Pink */
    --tab-4: #a8d8ea;             /* Sky */
    --tab-5: #ffe6a7;             /* Cream */
    --stage-bg: var(--bg-outer);
    --slide-bg: var(--bg-outer);

    /* Typography */
    --font-display: 'Bodoni Moda', 'Didot', serif;   /* 400/700 + italic */
    --font-body: 'DM Sans', 'Helvetica Neue', sans-serif;  /* 400/500/700 */
    --title-size: 150px;
    --h2-size: 84px;
    --subtitle-size: 30px;
    --body-size: 26px;
    --label-size: 17px;

    /* Paper geometry inside the 1920×1080 stage */
    --paper-top: 56px;
    --paper-bottom: 56px;
    --paper-left: 120px;
    --paper-right: 150px;        /* leaves room for the protruding tabs */
    --paper-pad-x: 110px;
    --paper-pad-y: 78px;

    /* Motion */
    --ease-page: cubic-bezier(0.16, 1, 0.3, 1);   /* the one signature easing */
    --duration-normal: 0.7s;
}

Fontes carregam via um Google Fonts @import (Bodoni Moda itálico, ESPESSURA 0,400/0,700/1,400 + DM Sans 400/500/700). Proibido: qualquer outra fonte, fontes de exibição Inter/Roboto/Arial/sistema, qualquer cor fora dos tokens acima, gradientes como decoração, #6366f1 índigo, painéis dark-glassmorphism.

Dispositivos de assinatura (cada slide carrega todos eles)

1. Cartão de papel .paper — posicionado absolutamente pelas bordas --paper-*, border-radius: 8px, sombra em camadas (0 2px 4px + 0 18px 50px gotas escuras + um realce branco interno de 1px), um leve grão de linha riscada de passo de 44px via um linear-gradient em camadas, z-index: 1.
2. Furos de fichário .holes — uma coluna flexível de margem esquerda com 10 círculos perfurados (26px, background: var(--bg-outer), sombra escura interna + realce branco inferior de 1px), dentro do papel em left: 38px.
3. Linha de margem .margin-rule — uma linha vertical de 1px em left: 92px em var(--tab-3) com opacidade de 0,55, ecoando a linha de margem vermelha de um caderno real.

…