Midnight Editorial（午夜金辉）

A single-aesthetic deck plugin: the midnight-editorial preset from the upstream MIT-licensed nicobailon/visual-explainer skill (templates/slide-deck.html), pinned and shipped as one self-contained seed — example.html. The upstream mermaid diagram slide has been replaced by a pure CSS/SVG pipeline page; the deck has zero external JS dependencies (Google Fonts @import is the only external reference).

Signature combination (what makes this skin this skin):

1. Deep navy + warm gold — #0f1729 page, #d4a73a accent, parchment text #e8e4d8. Cinematic, magazine-grade, dramatic.
2. Serif display → mono label drop — Instrument Serif at up to 120px (clamp(48px,10vw,120px), weight 400, -2px tracking, 0.95 line-height) falling directly to 13–14px uppercase JetBrains Mono labels with 1.5px letter-spacing. No intermediate sans anywhere.
3. Gold radial accent glow — every content slide carries one radial-gradient(ellipse at X% Y%, var(--accent-dim) 0%, transparent ~40%) inline background, with the ellipse anchor moving per slide.
4. Gold SVG corner marks + ghost numerals — 2px gold corner line marks at opacity 0.15 on the title slide; dividers carry a ghost clamp(100px,22vw,260px) gold numeral at opacity 0.06.
5. Cinematic staggered transitions — slides enter with fade + translateY(40px) + scale(0.98) on cubic-bezier(0.16,1,0.3,1); .reveal children stagger at 0.1s increments (max 6).
6. SlideEngine dual theme — explicit dark/light toggle (T key + ◐ chrome button, html[data-theme]), defaulting to the OS preference. The light mode is a locked cream/gold skin, not an afterthought.

Start from example.html. Replace content only — never rewrite the design system or the runtime script, and never introduce colors or fonts outside the token sheets below.

Locked token sheet — dark (default)

:root {
  --font-body: 'Instrument Serif', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  --bg: #0f1729;
  --surface: #162040;
  --surface2: #1d2b52;
  --surface-elevated: #243362;
  --border: rgba(200, 180, 140, 0.08);
  --border-bright: rgba(200, 180, 140, 0.16);
  --text: #e8e4d8;
  --text-dim: #9a9484;
  --accent: #d4a73a;
  --accent-dim: rgba(212, 167, 58, 0.1);
  --code-bg: #0a0f1e;
  --code-text: #d4d0c4;
  --green: #4ade80;  --green-dim: rgba(74, 222, 128, 0.1);
  --red: #f87171;    --red-dim: rgba(248, 113, 113, 0.1);
  --blue: #60a5fa;   --blue-dim: rgba(96, 165, 250, 0.1);
}

Locked token sheet — light (html[data-theme="light"])

html[data-theme="light"] {
  --bg: #faf8f2;
  --surface: #ffffff;
  --surface2: #f5f0e6;
  --surface-elevated: #fffdf5;
  --border: rgba(30, 30, 50, 0.08);
  --border-bright: rgba(30, 30, 50, 0.16);
  --text: #1a1814;
  --text-dim: #6e685c;
  --accent: #b8860b;
  --accent-dim: rgba(184, 134, 11, 0.08);
  --code-bg: #2a2520;
  --code-text: #e8e4d8;
  --green: #16a34a;  --green-dim: rgba(22, 163, 74, 0.08);
  --red: #dc2626;    --red-dim: rgba(220, 38, 38, 0.08);
  --blue: #2563eb;   --blue-dim: rgba(37, 99, 235, 0.08);
}

The same light block is mirrored under @media (prefers-color-scheme: light) { html:not([data-theme]) { … } } as a no-JS fallback. Both themes are part of the contract — every slide you author must read correctly in both. Semantic colors (--green/--red/--blue) are for status only (trends, before/after labels, diagram node families) — never decorative.

Fonts (locked — Google Fonts @import only)

No third font. No bold serif — drama comes from size, not weight.

Typography scale (locked)

…