Creative Voltage (fs-creative-voltage)

A locked single-theme deck plugin derived from the Creative Voltage preset (section 3 of STYLE_PRESETS.md) in the MIT-licensed zarazhangrui/frontend-slides. Vibe: bold, creative, energetic, retro-modern — a retro poster shop wired to a power grid.

Start from example.html in this plugin folder. It is the proven seed: copy its stage CSS, slide shell chrome, signature-device CSS, and the entire SlidePresentation controller script verbatim, then replace only the slide content. Do not rewrite the stage system, the navigation script, or the design tokens. Do not introduce any colors or fonts outside this spec.

Locked design tokens (:root — reproduce exactly)

:root {
    --stage-bg: #10101f;              /* letterbox behind the stage */
    --slide-bg: #1a1a2e;              /* default slide background */

    --bg-primary: #0066ff;            /* electric blue panel */
    --bg-primary-deep: #0052cc;       /* blue gradient stop */
    --bg-dark: #1a1a2e;               /* deep navy panel */
    --bg-dark-2: #23234a;             /* lifted navy card */
    --accent-neon: #d4ff00;           /* neon yellow badge/highlight */
    --accent-neon-soft: rgba(212, 255, 0, 0.14);

    --text-light: #ffffff;
    --text-dim: rgba(255, 255, 255, 0.64);
    --text-faint: rgba(255, 255, 255, 0.34);
    --text-on-neon: #1a1a2e;          /* navy text on neon yellow */
    --line: rgba(255, 255, 255, 0.18);
    --line-blue: rgba(255, 255, 255, 0.28);

    --font-display: 'Syne', sans-serif;       /* 700/800, uppercase headlines */
    --font-mono: 'Space Mono', monospace;     /* 400/700, body + labels + chrome */
    --font-script: 'Yellowtail', cursive;     /* script flourishes only */
    --title-size: 138px;
    --h2-size: 88px;
    --subtitle-size: 32px;
    --body-size: 27px;
    --label-size: 20px;

    --slide-pad: 96px;

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

Google Fonts (the only external reference allowed): https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Yellowtail&display=swap

Forbidden: any color outside the token table; Inter / Roboto / Arial / system display fonts; purple gradients; generic indigo #6366f1; rounded-corner glassmorphism. Neon yellow is an accent, never a slide background.

Fixed 16:9 stage — NON-NEGOTIABLE scaling system

• Every deck is authored on a fixed 1920×1080 canvas: .deck-viewport (fills the window) wraps .deck-stage (1920×1080, transform-origin: 0 0).
• JavaScript scales the whole stage uniformly: factor = min(innerWidth/1920, innerHeight/1080), then transform: translate(x, y) scale(factor) to center with letterbox/pillarbox; re-run on resize.
• Never reflow slide content per device. No responsive breakpoints inside slides. All measurements are fixed px at the 1920×1080 design size.
• Include the full viewport-base block from the seed <style> (stage, slide stacking, print, prefers-reduced-motion).
• Slide switching toggles .active / .visible classes flipping visibility / opacity / pointer-events — never display: none.

Slide shell chrome (every slide)

• <section class="slide"> directly inside .deck-stage; ~10 slides per deck — split content into more slides rather than shrinking type.
• .slide-no top-left: Space Mono 700, neon yellow, format NN / VOLT.
• .crumbs top-right: uppercase mono breadcrumbs; active section in neon (.on).
• .baseline bottom: 2px rule with uppercase mono caption left and NN / 10 right.
• .deck-controls page counter is fixed-positioned outside the scaled stage.

Signature devices (the theme's identity — use them, don't invent new ones)

1. Split panels — .panel-blue (46% width, linear-gradient(160deg, #0066ff, #0052cc)) against the deep navy base; .panel-blue.right mirrors it. Covers, dividers, quotes, and closings lean on this two-tone split.
2. Halftone dot texture — .halftone: pure CSS radial-gradient(circle, rgba(255,255,255,.30) 2.2px, transparent 2.9px) on a 22px grid, faded out with a mask-image linear gradient (.fade or inline masks). .halftone.neon swaps the dots to rgba(212,255,0,.45). Place one halftone patch per slide, in a corner.

…