@agent-native/core-corpus 0.214.0 → 0.217.0

package/corpus/templates/slides-2/server/lib/slide-themes.ts

@@ -0,0 +1,2174 @@
+export type BuiltInSlideThemeMode = "light" | "dark";
+
+export interface BuiltInSlideThemeSummary {
+  id: string;
+  name: string;
+  description: string;
+  mode: BuiltInSlideThemeMode;
+  preview: {
+    background: string;
+    text: string;
+    accent: string;
+  };
+}
+
+export interface BuiltInSlideTheme extends BuiltInSlideThemeSummary {
+  guide: string;
+}
+
+const themes = [
+  {
+    id: "aero",
+    name: "Aero",
+    description:
+      "Kinetic sports-launch deck \u2014 electric violet, volt accent, italic condensed caps, every edge cut on one 12\u00b0 angle.",
+    mode: "dark",
+    preview: {
+      background: "#4B1DFF", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      text: "#FFFFFF", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      accent: "#D8FF2E", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+    },
+    guide: [
+      "# Aero",
+      "",
+      "## Palette",
+      "",
+      "Three base colours carry the deck (violet / volt / ink). Everything else is a supporting tint. Volt is the only highlight \u2014 one volt thing per idea, never a volt paragraph.",
+      "",
+      "| Role     | Value                    | Notes                                                                                   |",
+      "| -------- | ------------------------ | --------------------------------------------------------------------------------------- |",
+      '| bg       | `#4B1DFF`                | electric violet ("UV") \u2014 default page, `design.palette.bg`                              |', // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "| text     | `#FFFFFF`                | primary copy on violet and ink                                                          |", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      '| accent   | `#D8FF2E`                | volt \u2014 hero digits, bands, bib + kicker chips, the "target" in every chart              |', // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "| ink      | `#0B0A14`                | near-black \u2014 text on volt, third page tone, chip / marker fill                          |", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "| deep     | `#2A0FA3`                | deep violet \u2014 streaks, baseline bars, track and start-line blocks on violet             |", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "| muted    | `#D3CAFF`                | lavender \u2014 secondary copy, labels, axis ticks on violet (`TONES.uv.dim`)                |", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      '| coral    | `#FF4A3D`                | hot accent \u2014 placings ("1st"), record counts, one chip per page at most                 |', // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "| foam     | `#BBAEFF`                | light violet tint for illustration fills only                                           |", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "| whiteA   | `rgba(255,255,255,a)`    | `0.6` dim copy on ink \u00b7 `0.22\u20130.36` streaks + rules \u00b7 `0.26` inactive bars \u00b7 `0.12` chip |", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "| inkA     | `rgba(11,10,20,a)`       | on volt pages: `0.66` secondary copy \u00b7 `0.7` captions \u00b7 `0.24` inactive bars + rules    |", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "",
+      "### Design tokens + tones",
+      "",
+      "Declare the `design` const so `bg` / `text` / `accent` / fonts / hero size stay tweakable from the Design panel; the rest are plain constants. Every page picks one of three **tones** \u2014 the `TONES` map tells chrome (footer, kicker) which colours to use on that background.",
+      "",
+      "```tsx",
+      "export const design: DesignSystem = {",
+      "  palette: { bg: '#4B1DFF', text: '#FFFFFF', accent: '#D8FF2E' },", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "  fonts: {",
+      '    display: \'"Barlow Condensed", "Arial Narrow", system-ui, sans-serif\',',
+      "    body: '\"Barlow\", system-ui, sans-serif',",
+      "  },",
+      "  typeScale: { hero: 620, body: 30 },",
+      "  radius: 0,",
+      "};",
+      "",
+      "const INK = '#0B0A14';", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "const CORAL = '#FF4A3D';", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "const DEEP = '#2A0FA3';", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "const LAV = '#D3CAFF';", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "const WHITE_A = (a: number) => `rgba(255,255,255,${a})`;", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "const INK_A = (a: number) => `rgba(11,10,20,${a})`;", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "",
+      "type Tone = 'uv' | 'volt' | 'ink';",
+      "",
+      "const TONES: Record<Tone, { bg: string; fg: string; dim: string; hi: string; hiFg: string }> = {",
+      "  uv: { bg: 'var(--slides2-bg)', fg: 'var(--slides2-text)', dim: LAV, hi: 'var(--slides2-accent)', hiFg: INK },",
+      "  volt: {",
+      "    bg: 'var(--slides2-accent)',",
+      "    fg: INK,",
+      "    dim: 'rgba(11,10,20,0.66)',", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "    hi: INK,",
+      "    hiFg: 'var(--slides2-accent)',",
+      "  },",
+      "  ink: {",
+      "    bg: INK,",
+      "    fg: 'var(--slides2-text)',",
+      "    dim: 'rgba(255,255,255,0.6)',", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "    hi: 'var(--slides2-accent)',",
+      "    hiFg: INK,",
+      "  },",
+      "};",
+      "```",
+      "",
+      "- `uv` \u2014 default. Violet page, white type, lavender labels, volt highlights.",
+      "- `volt` \u2014 inverted: volt page, ink type. Use for lab data, pricing, asks \u2014 the pages that must be read.",
+      "- `ink` \u2014 near-black page for results / proof. Coral is most at home here.",
+      "",
+      "## Typography",
+      "",
+      '- Display font: `var(--slides2-font-display)` \u2192 `"Barlow Condensed", "Arial Narrow", system-ui, sans-serif` \u2014 **always italic, always uppercase**, weight 900 (800 for secondary numerals), line-height 0.84, letter-spacing -0.012em. Numerals add `tabular-nums` and -0.015em.',
+      '- Body font: `var(--slides2-font-body)` \u2192 `"Barlow", system-ui, sans-serif` \u2014 weight 500 for copy; labels are weight 600\u2013700, uppercase, letter-spacing 0.2em.',
+      "- Webfont import: `https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;1,700;1,800;1,900&family=Barlow:wght@400;500;600;700&display=swap` \u2014 inject once at module top level (snippet under **Foundation** below), per `references/webfonts.md` in `slide-authoring`.",
+      "- Type scale (deliberately extreme \u2014 overrides `slide-authoring` defaults):",
+      "  - Hero title: **620 px** (`var(--slides2-size-hero)`), line-height 0.8, -0.02em, `nowrap` \u2014 one short word + a volt digit (\u2248 6 characters max).",
+      "  - Section / divider / closer heading: 196\u2013236 px.",
+      "  - Page heading: 104\u2013150 px (`Title` default 132).",
+      "  - Hero stat numeral: 280\u2013360 px. Secondary numerals: 84\u2013150 px. Inline / row numerals: 40\u2013104 px.",
+      "  - Band text and card titles: 40\u201392 px display.",
+      "  - Body text: **30 px**, line-height 1.4 (secondary copy 22\u201326 px).",
+      "  - Label: 20 px (17\u201324). Footnote / tiny label: 15\u201316 px.",
+      "  - Footer: 17 px label, 24 px bib numeral.",
+      "",
+      "## Layout",
+      "",
+      "- Canvas: 1920 \u00d7 1080, **absolutely positioned** with the `abs(x, y)` helper \u2014 composition is placed, not flowed.",
+      "- Left rail `x = 120`, right edge `x = 1800` (content width 1680). Display type sits 4\u20138 px left of the rail (`x = 112\u2013116`, hero at 96) so the italic overhang lines up optically with labels at 120.",
+      "- Vertical rhythm: wordmark / kicker row at y \u2248 92\u2013104 \u00b7 heading at y \u2248 156\u2013168 \u00b7 content down to \u2248 960 \u00b7 footer bib at y = 1004 (32 px tall).",
+      "- Full-bleed motifs (streaks, bands, start-line stripe) overrun the canvas (`left: -80`, width 2080) so skewed ends never show; `Stage` clips with `overflow: hidden`.",
+      "- Radius is 0 everywhere. No rounded corners, no shadows, no gradients.",
+      "",
+      "### The 12\u00b0 angle system",
+      "",
+      "One angle drives every slanted edge in the deck \u2014 chips, bars, bands, streaks, rules, chart columns, even SVG hatching. Never introduce a second angle.",
+      "",
+      "```tsx",
+      "const ANGLE = 12;",
+      "const T = Math.tan((ANGLE * Math.PI) / 180);",
+      "const SKEW = `skewX(-${ANGLE}deg)`;",
+      "",
+      "const cut = (h: number) => {",
+      "  const d = (h * T).toFixed(2);",
+      "  return `polygon(${d}px 0, 100% 0, calc(100% - ${d}px) 100%, 0 100%)`;",
+      "};",
+      "",
+      "const BAND_RATIO = 12;",
+      "const BAND_PCT = ((T / BAND_RATIO) * 100).toFixed(4);",
+      "const BAND_CLIP = `polygon(${BAND_PCT}% 0, 100% 0, ${(100 - Number(BAND_PCT)).toFixed(4)}% 100%, 0 100%)`;",
+      "```",
+      "",
+      "- `SKEW` \u2014 for thin things that are *only* slant: streaks, vertical rules, the three-bar mark, spec ticks. Use `transformOrigin: '0 100%'` so the foot stays on its x.",
+      "- `cut(h)` \u2014 for filled blocks with upright content inside (chips, bars, ask rows, bib). Pass the element's own pixel height; the clip offset is `h \u00b7 tan 12\u00b0`, so the lean is identical at any height.",
+      "- `BAND_CLIP` \u2014 the signature volt band. Its height is always `w / BAND_RATIO`; the clip is percentage-based so the band can scale or morph between pages and keep the angle.",
+      "- In SVG charts, offset a bar's top by `h * T` (parallelogram columns), and skew SVG patterns with ``patternTransform={`skewX(-${ANGLE})`}``.",
+      "",
+      "## Fixed components",
+      "",
+      "These are paste-ready. Copy them verbatim into a slide that uses this theme. Swap the placeholder brand (`Tempo`) and footer labels for the real ones.",
+      "",
+      "### Foundation",
+      "",
+      "Shared type styles, helpers and the module-level webfont + keyframe injection (replace `<slide-id>` with the slide's folder id).",
+      "",
+      "```tsx",
+      "import type { CSSProperties, ReactNode } from 'react';",
+      "",
+      "const SLIDE_ID = '<slide-id>';",
+      "const FONT_HREF =",
+      "  'https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;1,700;1,800;1,900&family=Barlow:wght@400;500;600;700&display=swap';",
+      "const FONT_LINK_ID = `slides2-webfont-${SLIDE_ID}`;",
+      "const STYLE_ID = `slides2-styles-${SLIDE_ID}`;",
+      "const KEYFRAMES = `",
+      "@keyframes ae-run { from { transform: translateX(0) } to { transform: translateX(calc(var(--tile) * -1)) } }",
+      "@keyframes ae-in { from { opacity: 0; transform: translateX(-56px) } to { opacity: 1; transform: none } }",
+      "@keyframes ae-fade { from { opacity: 0 } to { opacity: 1 } }",
+      "@keyframes ae-pace { to { stroke-dashoffset: -1000 } }",
+      "`;",
+      "",
+      "if (typeof document !== 'undefined') {",
+      "  let link = document.getElementById(FONT_LINK_ID) as HTMLLinkElement | null;",
+      "  if (!link) {",
+      "    link = document.createElement('link');",
+      "    link.id = FONT_LINK_ID;",
+      "    link.rel = 'stylesheet';",
+      "    document.head.appendChild(link);",
+      "  }",
+      "  if (link.href !== FONT_HREF) link.href = FONT_HREF;",
+      "",
+      "  let style = document.getElementById(STYLE_ID);",
+      "  if (!style) {",
+      "    style = document.createElement('style');",
+      "    style.id = STYLE_ID;",
+      "    document.head.appendChild(style);",
+      "  }",
+      "  if (style.textContent !== KEYFRAMES) style.textContent = KEYFRAMES;",
+      "}",
+      "",
+      "const DISPLAY: CSSProperties = {",
+      "  fontFamily: 'var(--slides2-font-display)',",
+      "  fontStyle: 'italic',",
+      "  fontWeight: 900,",
+      "  textTransform: 'uppercase',",
+      "  lineHeight: 0.84,",
+      "  letterSpacing: '-0.012em',",
+      "  margin: 0,",
+      "};",
+      "",
+      "const NUM: CSSProperties = {",
+      "  ...DISPLAY,",
+      "  fontVariantNumeric: 'tabular-nums',",
+      "  letterSpacing: '-0.015em',",
+      "};",
+      "",
+      "const LABEL: CSSProperties = {",
+      "  fontFamily: 'var(--slides2-font-body)',",
+      "  fontSize: 20,",
+      "  fontWeight: 600,",
+      "  letterSpacing: '0.2em',",
+      "  textTransform: 'uppercase',",
+      "  lineHeight: 1.2,",
+      "};",
+      "",
+      "const BODY: CSSProperties = {",
+      "  fontFamily: 'var(--slides2-font-body)',",
+      "  fontSize: 30,",
+      "  fontWeight: 500,",
+      "  lineHeight: 1.4,",
+      "  margin: 0,",
+      "};",
+      "",
+      "const abs = (left: number, top: number, extra?: CSSProperties): CSSProperties => ({",
+      "  position: 'absolute',",
+      "  left,",
+      "  top,",
+      "  ...extra,",
+      "});",
+      "",
+      "const pad = (n: number) => String(n).padStart(2, '0');",
+      "```",
+      "",
+      "### Title",
+      "",
+      "Absolute-placed display heading. `color` inherits from the page tone; pass `style` for entry animation.",
+      "",
+      "```tsx",
+      "const Title = ({",
+      "  children,",
+      "  size = 132,",
+      "  x = 116,",
+      "  y = 160,",
+      "  style,",
+      "}: {",
+      "  children: ReactNode;",
+      "  size?: number;",
+      "  x?: number;",
+      "  y?: number;",
+      "  style?: CSSProperties;",
+      "}) => <h2 style={{ ...DISPLAY, ...abs(x, y), fontSize: size, ...style }}>{children}</h2>;",
+      "```",
+      "",
+      "### Footer",
+      "",
+      "The race bib: page number in a cut volt chip, total beside it, brand + deck title + meta label. Tone-aware via `TONES`. Rendered by `Stage` \u2014 covers, dividers and closers turn it off.",
+      "",
+      "```tsx",
+      "import { useSlidePageNumber } from '@open-slide/core';",
+      "",
+      "const Footer = ({",
+      "  tone,",
+      "  brand = 'Tempo',",
+      "  title = 'Season plan',",
+      "  meta = '2027 \u00b7 Confidential',",
+      "}: {",
+      "  tone: Tone;",
+      "  brand?: string;",
+      "  title?: string;",
+      "  meta?: string;",
+      "}) => {",
+      "  const { current, total } = useSlidePageNumber();",
+      "  const t = TONES[tone];",
+      "  return (",
+      "    <div",
+      "      style={{",
+      "        ...LABEL,",
+      "        position: 'absolute',",
+      "        left: 120,",
+      "        right: 120,",
+      "        top: 1004,",
+      "        height: 32,",
+      "        display: 'flex',",
+      "        alignItems: 'center',",
+      "        gap: 18,",
+      "        fontSize: 17,",
+      "        color: t.dim,",
+      "        zIndex: 5,",
+      "      }}",
+      "    >",
+      "      <span",
+      "        style={{",
+      "          ...NUM,",
+      "          width: 64,",
+      "          height: 32,",
+      "          display: 'inline-flex',",
+      "          alignItems: 'center',",
+      "          justifyContent: 'center',",
+      "          background: t.hi,",
+      "          color: t.hiFg,",
+      "          clipPath: cut(32),",
+      "          fontSize: 24,",
+      "          fontWeight: 800,",
+      "          lineHeight: 1,",
+      "          letterSpacing: 0,",
+      "        }}",
+      "      >",
+      "        {pad(current)}",
+      "      </span>",
+      "      <span style={{ fontVariantNumeric: 'tabular-nums', marginLeft: -8 }}>/ {pad(total)}</span>",
+      "      <span style={{ color: t.fg, marginLeft: 14 }}>{brand}</span>",
+      "      <span>{title}</span>",
+      "      <span style={{ marginLeft: 'auto' }}>{meta}</span>",
+      "    </div>",
+      "  );",
+      "};",
+      "```",
+      "",
+      "### Stage",
+      "",
+      "Every page's root. Sets the tone background + text colour and mounts the footer.",
+      "",
+      "```tsx",
+      "const Stage = ({",
+      "  tone = 'uv',",
+      "  footer = true,",
+      "  children,",
+      "}: {",
+      "  tone?: Tone;",
+      "  footer?: boolean;",
+      "  children: ReactNode;",
+      "}) => (",
+      "  <div",
+      "    style={{",
+      "      width: '100%',",
+      "      height: '100%',",
+      "      position: 'relative',",
+      "      overflow: 'hidden',",
+      "      isolation: 'isolate',",
+      "      background: TONES[tone].bg,",
+      "      color: TONES[tone].fg,",
+      "      fontFamily: 'var(--slides2-font-body)',",
+      "    }}",
+      "  >",
+      "    {children}",
+      "    {footer && <Footer tone={tone} />}",
+      "  </div>",
+      ");",
+      "```",
+      "",
+      "### Eyebrow (Kicker)",
+      "",
+      "A cut chip with the section tag, followed by the page's subject in label type. Sits top-left at `(120, 104)` on every content page.",
+      "",
+      "```tsx",
+      "const Kicker = ({",
+      "  tag,",
+      "  children,",
+      "  tone = 'uv',",
+      "  x = 120,",
+      "  y = 104,",
+      "}: {",
+      "  tag: string;",
+      "  children: ReactNode;",
+      "  tone?: Tone;",
+      "  x?: number;",
+      "  y?: number;",
+      "}) => {",
+      "  const t = TONES[tone];",
+      "  return (",
+      "    <div",
+      "      style={abs(x, y, { ...LABEL, display: 'flex', alignItems: 'center', gap: 18, color: t.fg })}",
+      "    >",
+      "      <span",
+      "        style={{",
+      "          ...LABEL,",
+      "          height: 32,",
+      "          padding: '0 18px',",
+      "          display: 'inline-flex',",
+      "          alignItems: 'center',",
+      "          background: t.hi,",
+      "          color: t.hiFg,",
+      "          clipPath: cut(32),",
+      "          fontWeight: 700,",
+      "          fontSize: 17,",
+      "        }}",
+      "      >",
+      "        {tag}",
+      "      </span>",
+      "      {children}",
+      "    </div>",
+      "  );",
+      "};",
+      "```",
+      "",
+      "### Wordmark + Mark",
+      "",
+      "Three skewed bars stepping down in opacity \u2014 the brand's speed mark. Wordmark at `(120, 92)` on covers and closers; the Mark alone (in ink, `h={64}`) sits inside the volt band.",
+      "",
+      "```tsx",
+      "const Mark = ({ color, h = 34 }: { color: string; h?: number }) => (",
+      "  <div style={{ display: 'flex', gap: h * 0.16 }}>",
+      "    <div style={{ width: h * 0.3, height: h, background: color, transform: SKEW }} />",
+      "    <div style={{ width: h * 0.3, height: h, background: color, transform: SKEW, opacity: 0.7 }} />",
+      "    <div style={{ width: h * 0.3, height: h, background: color, transform: SKEW, opacity: 0.4 }} />",
+      "  </div>",
+      ");",
+      "",
+      "const Wordmark = ({",
+      "  x,",
+      "  y,",
+      "  brand = 'Tempo',",
+      "  color = 'var(--slides2-text)',",
+      "  mark = 'var(--slides2-accent)',",
+      "}: {",
+      "  x: number;",
+      "  y: number;",
+      "  brand?: string;",
+      "  color?: string;",
+      "  mark?: string;",
+      "}) => (",
+      "  <div style={abs(x, y, { display: 'flex', alignItems: 'center', gap: 18, zIndex: 4 })}>",
+      "    <Mark color={mark} />",
+      "    <span style={{ ...DISPLAY, fontSize: 46, letterSpacing: '0.02em', color, lineHeight: 1 }}>",
+      "      {brand}",
+      "    </span>",
+      "  </div>",
+      ");",
+      "```",
+      "",
+      "### Streak",
+      "",
+      "A skewed, dashed speed line that loops sideways. Stack 8\u201312 on a cover in `deep` (thick, slow) and `WHITE_A(0.22\u20130.36)` (hairline, fast). `live` comes from `useIsActivePage()`.",
+      "",
+      "```tsx",
+      "const Streak = ({",
+      "  y,",
+      "  h,",
+      "  tile,",
+      "  dash,",
+      "  color,",
+      "  dur,",
+      "  shift = 0,",
+      "  live,",
+      "}: {",
+      "  y: number;",
+      "  h: number;",
+      "  tile: number;",
+      "  dash: number;",
+      "  color: string;",
+      "  dur: number;",
+      "  shift?: number;",
+      "  live: boolean;",
+      "}) => (",
+      "  <div",
+      "    style={{",
+      "      position: 'absolute',",
+      "      left: -80,",
+      "      top: y,",
+      "      width: 2080,",
+      "      height: h,",
+      "      overflow: 'hidden',",
+      "      transform: SKEW,",
+      "    }}",
+      "  >",
+      "    <div",
+      "      style={",
+      "        {",
+      "          '--tile': `${tile}px`,",
+      "          width: 2080 + tile,",
+      "          height: h,",
+      "          backgroundImage: `linear-gradient(90deg, ${color} 0 ${dash}px, transparent ${dash}px)`,",
+      "          backgroundSize: `${tile}px ${h}px`,",
+      "          backgroundRepeat: 'repeat-x',",
+      "          backgroundPosition: `${shift}px 0`,",
+      "          animation: live ? `ae-run ${dur}s linear infinite` : undefined,",
+      "        } as CSSProperties",
+      "      }",
+      "    />",
+      "  </div>",
+      ");",
+      "```",
+      "",
+      "### VoltBand",
+      "",
+      'The signature skewed band \u2014 the "one line" of the deck. Put band text over it in ink. For a cover-to-page morph, wrap it in `<MorphElement id="volt-band">` (see Motion).',
+      "",
+      "```tsx",
+      "const VoltBand = ({ x, y, w }: { x: number; y: number; w: number }) => (",
+      "  <div",
+      "    style={{",
+      "      position: 'absolute',",
+      "      left: x,",
+      "      top: y,",
+      "      width: w,",
+      "      height: w / BAND_RATIO,",
+      "      background: 'var(--slides2-accent)',",
+      "      clipPath: BAND_CLIP,",
+      "    }}",
+      "  />",
+      ");",
+      "```",
+      "",
+      "### CutBar, SkewRule, Chip, SpecChip",
+      "",
+      "Data bars, column dividers, tags and inline spec ticks \u2014 all on the 12\u00b0 angle.",
+      "",
+      "```tsx",
+      "const CutBar = ({",
+      "  x,",
+      "  y,",
+      "  w,",
+      "  h,",
+      "  color,",
+      "}: {",
+      "  x: number;",
+      "  y: number;",
+      "  w: number;",
+      "  h: number;",
+      "  color: string;",
+      "}) => (",
+      "  <div",
+      "    style={{",
+      "      position: 'absolute',",
+      "      left: x,",
+      "      top: y,",
+      "      width: w,",
+      "      height: h,",
+      "      background: color,",
+      "      clipPath: cut(h),",
+      "    }}",
+      "  />",
+      ");",
+      "",
+      "const SkewRule = ({",
+      "  x,",
+      "  y,",
+      "  h,",
+      "  w = 6,",
+      "  color = 'var(--slides2-accent)',",
+      "}: {",
+      "  x: number;",
+      "  y: number;",
+      "  h: number;",
+      "  w?: number;",
+      "  color?: string;",
+      "}) => (",
+      "  <div",
+      "    style={abs(x, y, {",
+      "      width: w,",
+      "      height: h,",
+      "      background: color,",
+      "      transform: SKEW,",
+      "      transformOrigin: '0 100%',",
+      "    })}",
+      "  />",
+      ");",
+      "",
+      "const Chip = ({",
+      "  children,",
+      "  bg = CORAL,",
+      "  fg = INK,",
+      "  h = 34,",
+      "}: {",
+      "  children: ReactNode;",
+      "  bg?: string;",
+      "  fg?: string;",
+      "  h?: number;",
+      "}) => (",
+      "  <span",
+      "    style={{",
+      "      ...LABEL,",
+      "      fontSize: 18,",
+      "      fontWeight: 700,",
+      "      letterSpacing: '0.14em',",
+      "      height: h,",
+      "      padding: '0 16px',",
+      "      display: 'inline-flex',",
+      "      alignItems: 'center',",
+      "      background: bg,",
+      "      color: fg,",
+      "      clipPath: cut(h),",
+      "    }}",
+      "  >",
+      "    {children}",
+      "  </span>",
+      ");",
+      "",
+      "const SpecChip = ({ children }: { children: ReactNode }) => (",
+      "  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 22 }}>",
+      "    <span style={{ width: 4, height: 22, background: 'var(--slides2-accent)', transform: SKEW }} />",
+      "    {children}",
+      "  </span>",
+      ");",
+      "```",
+      "",
+      '- `CutBar` \u2014 horizontal data bar; `deep` for baseline, `VoltBand` (or volt `CutBar`) for the target, `INK_A(0.24)` for "category average" on volt pages.',
+      "- `SkewRule` \u2014 6 px volt divider between hero stats; 3 px `WHITE_A(0.3)` for split / table columns.",
+      '- `Chip` \u2014 coral by default for placings and callouts; `bg={WHITE_A(0.12)} fg="#FFFFFF"` for neutral codes (country, size).', // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "- `SpecChip` \u2014 the spec row under a cover band: a plain first item, then each following spec led by a skewed volt tick (`4 drops`, `<SpecChip>38 markets</SpecChip>`, \u2026).",
+      "",
+      "## Motion",
+      "",
+      "- Philosophy: **rich, but only where it means speed.** Covers, dividers and closers move (looping streaks, a snap-in hero, a pace light running a track); content pages hold still apart from `<Steps>` reveals and one morph. Every move is horizontal and travels left \u2192 right. Gate all animation on `useIsActivePage()` so thumbnails, the overview grid and PDF render the final frame.",
+      "- Reusable keyframes (already in the Foundation `KEYFRAMES` string):",
+      "",
+      "```css",
+      "@keyframes ae-run { from { transform: translateX(0) } to { transform: translateX(calc(var(--tile) * -1)) } }",
+      "@keyframes ae-in { from { opacity: 0; transform: translateX(-56px) } to { opacity: 1; transform: none } }",
+      "@keyframes ae-fade { from { opacity: 0 } to { opacity: 1 } }",
+      "@keyframes ae-pace { to { stroke-dashoffset: -1000 } }",
+      "```",
+      "",
+      "- `ae-run` \u2014 `Streak` loops, 1.3\u20134.2 s linear infinite; thinner streaks run faster.",
+      "- `ae-in` \u2014 hero and headline entries: `ae-in 0.8s ${SNAP} ${delay}s both`, staggered 0.05 s \u2192 0.18 s.",
+      "- `ae-fade` \u2014 content that lands on a bar after a morph: `ae-fade 0.45s ease-out ${MORPH_MS}ms both`.",
+      "- `ae-pace` \u2014 a white dash running along an SVG path (`pathLength={1000}`, `strokeDasharray: '22 228'`, 9 s linear infinite).",
+      "",
+      "Easing + page transitions \u2014 a fast 240 ms nudge in the direction of travel; the outgoing page holds while the new one lands:",
+      "",
+      "```tsx",
+      "import { type SlideTransition } from '@open-slide/core';",
+      "",
+      "const EASE_OUT = 'cubic-bezier(0, 0, 0.2, 1)';",
+      "const EASE_IN = 'cubic-bezier(0.4, 0, 1, 1)';",
+      "const SNAP = 'cubic-bezier(0.16, 1, 0.3, 1)';",
+      "const HOLD: Keyframe[] = [{ opacity: 1 }, { opacity: 1 }];",
+      "const MORPH_MS = 860;",
+      "",
+      "export const transition: SlideTransition = {",
+      "  duration: 240,",
+      "  exit: { duration: 240, easing: EASE_IN, keyframes: HOLD },",
+      "  enter: {",
+      "    duration: 240,",
+      "    easing: EASE_OUT,",
+      "    keyframes: [",
+      "      { opacity: 0, transform: 'translateX(calc(var(--slides2-dir, 1) * 10px))' },",
+      "      { opacity: 1, transform: 'translateX(0)' },",
+      "    ],",
+      "  },",
+      "};",
+      "",
+      "const morphTransition: SlideTransition = {",
+      "  duration: 300,",
+      "  exit: { duration: 320, easing: EASE_IN, keyframes: HOLD },",
+      "  enter: { duration: 320, easing: EASE_OUT, keyframes: [{ opacity: 0 }, { opacity: 1 }] },",
+      "  morph: { duration: MORPH_MS, easing: 'cubic-bezier(0.65, 0, 0.25, 1)' },",
+      "};",
+      "```",
+      "",
+      'The signature move: the cover\'s full-width `VoltBand` morphs into the "target" bar on the next page (wrap both in `<MorphElement id="volt-band">`, set `Cover.transition = morphTransition` and the same on the receiving page).',
+      "",
+      "## Aesthetic",
+      "",
+      "Kinetic sports launch \u2014 the visual language of a race-day campaign: electric violet like a stadium at night, a single volt line you can follow across the whole deck, numbers set huge in italic condensed caps the way a bib or a finish clock would set them. Everything leans forward on the same 12\u00b0 angle, so even a static page feels like it's moving left to right. Composition is placed, not flowed: big numerals carry the page and copy stays short. Hold the discipline \u2014 one highlight colour, one angle, one display face. Avoid: rounded corners, drop shadows, gradients, glows, photography that fights the flat colour, upright (non-italic) display type, sentence-case headlines, a second slant angle, and more than one coral element per page.",
+      "",
+      "## Example usage",
+      "",
+      "```tsx",
+      "const Cover: Page = () => {",
+      "  const live = useIsActivePage();",
+      "  const enter = (delay: number): CSSProperties =>",
+      "    live ? { animation: `ae-in 0.8s ${SNAP} ${delay}s both` } : {};",
+      "  return (",
+      "    <Stage footer={false}>",
+      "      <Streak y={236} h={16} tile={920} dash={560} color={DEEP} dur={3.4} shift={-300} live={live} />",
+      "      <Streak y={462} h={3} tile={340} dash={120} color={WHITE_A(0.3)} dur={1.5} live={live} />",
+      "      <Wordmark x={120} y={92} />",
+      "      <h1",
+      "        style={{",
+      "          ...DISPLAY,",
+      "          ...abs(96, 156),",
+      "          fontSize: 'var(--slides2-size-hero)',",
+      "          lineHeight: 0.8,",
+      "          letterSpacing: '-0.02em',",
+      "          whiteSpace: 'nowrap',",
+      "          ...enter(0.05),",
+      "        }}",
+      "      >",
+      "        Run <span style={{ color: 'var(--slides2-accent)' }}>27</span>",
+      "      </h1>",
+      "      <VoltBand x={60} y={700} w={1800} />",
+      "      <div",
+      "        style={abs(196, 700, {",
+      "          height: 150,",
+      "          width: 1528,",
+      "          display: 'flex',",
+      "          alignItems: 'center',",
+      "          justifyContent: 'space-between',",
+      "          color: INK,",
+      "          ...enter(0.18),",
+      "        })}",
+      "      >",
+      "        <span style={{ ...DISPLAY, fontSize: 92, lineHeight: 1 }}>Season plan</span>",
+      "        <Mark color={INK} h={64} />",
+      "        <span style={{ ...NUM, fontSize: 92, lineHeight: 1 }}>Spring 2027</span>",
+      "      </div>",
+      "    </Stage>",
+      "  );",
+      "};",
+      "",
+      "const Results: Page = () => (",
+      '  <Stage tone="volt">',
+      '    <Kicker tag="Lab" tone="volt">',
+      "      Lab results",
+      "    </Kicker>",
+      "    <Title size={104}>The lab says faster.</Title>",
+      "    <div style={abs(120, 320)}>",
+      "      <div style={{ ...LABEL, fontSize: 18, fontWeight: 700 }}>Running economy</div>",
+      "      <div style={{ ...NUM, fontSize: 132, marginTop: 10 }}>+4.1%</div>",
+      "      <p style={{ ...BODY, fontSize: 22, color: INK_A(0.7), marginTop: 6 }}>",
+      "        Less oxygen at the same pace vs last season.",
+      "      </p>",
+      "    </div>",
+      '    <CutBar x={760} y={340} w={655} h={44} color="var(--slides2-bg)" />',
+      "    <CutBar x={760} y={396} w={266} h={44} color={INK} />",
+      "    <CutBar x={760} y={452} w={380} h={44} color={INK_A(0.24)} />",
+      "  </Stage>",
+      ");",
+      "```",
+    ].join("\n"),
+  },
+  {
+    id: "fieldwork",
+    name: "Fieldwork",
+    description:
+      "Notion-style operating plan \u2014 warm off-white page, heavy Inter headlines, Newsreader italic quotes, wobbly ink illustrations, pastel tinted cards and coral hand-drawn annotations.",
+    mode: "light",
+    preview: {
+      background: "#FFFEFC", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      text: "#191919", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      accent: "#E8553B", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+    },
+    guide: [
+      "# Fieldwork",
+      "",
+      "## Palette",
+      "",
+      "Ink and coral carry the page. The four pastels fill illustrations; their paler tints fill cards. Use coral for one thing per page \u2014 the eyebrow, a circled number, an arrow, a miss.",
+      "",
+      "| Role        | Value                  | Notes                                                    |",
+      "| ----------- | ---------------------- | -------------------------------------------------------- |",
+      "| bg          | `#FFFEFC`              | warm off-white page                                      |", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "| text        | `#191919`              | ink \u2014 headlines, strokes, primary copy                   |", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "| accent      | `#E8553B`              | coral \u2014 eyebrow, annotations, circled numbers, misses    |", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "| body        | `#5F5E5B`              | warm grey body copy and subtitles                        |", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      '| muted       | `#9B9A97`              | captions, footer, card index, the "from" in from \u2192 to    |', // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "| rule        | `rgba(25,25,25,0.12)`  | 1.5 px hairlines between rows                            |", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "| track       | `rgba(25,25,25,0.09)`  | progress-bar track                                       |", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      '| neutral     | `#E7E5E0`              | "previous period" bars in charts                         |', // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "| paper       | `#FFFFFF`              | fill inside ink drawings (phones, pages, faces)          |", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "| yellow      | `#F8DA7E`              | illustration fill, sparkles, backdrop circles            |", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "| blue        | `#8DBDEB`              | illustration fill                                        |", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "| pink        | `#F6C3CF`              | illustration fill                                        |", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "| green       | `#A6D4B2`              | illustration fill                                        |", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "| highlight   | `#FCE38A`              | marker highlight behind a phrase (alt: `#FADDE4` pink)   |", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "| tintYellow  | `#FBF3DB`              | card background                                          |", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "| tintBlue    | `#E7F3F8`              | card background                                          |", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "| tintPink    | `#FAF1F5`              | card background                                          |", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "| tintGreen   | `#EDF3EC`              | card background                                          |", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "| ok          | `#448361`              | status text \u2014 on track                                   |", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "| warn        | `#B07A12`              | status text \u2014 medium risk                                |", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      '| note        | `#3E7FCF`              | secondary annotation stroke / "watch" status             |', // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "",
+      "Tweakable tokens for a real slide (headlines read `var(--slides2-font-display)`, hero size reads `var(--slides2-size-hero)`):",
+      "",
+      "```tsx",
+      "export const design: DesignSystem = {",
+      "  palette: { bg: '#FFFEFC', text: '#191919', accent: '#E8553B' },", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "  fonts: {",
+      '    display: \'"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif\',',
+      '    body: \'"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif\',',
+      "  },",
+      "  typeScale: { hero: 150, body: 34 },",
+      "  radius: 24,",
+      "};",
+      "```",
+      "",
+      "## Typography",
+      "",
+      '- Display font: `"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif` \u2014 weight 780, line-height 1.0, letter-spacing `-0.04em` at \u2265 100 px and `-0.03em` below, word-spacing `0.08em`.',
+      "- Body font: same Inter stack \u2014 weight 400; 600\u2013720 for labels and inline emphasis. Set `fontVariantNumeric: 'tabular-nums'` on the page root.",
+      '- Quote font: `"Newsreader", "Iowan Old Style", Georgia, serif` \u2014 italic 400, only for pull quotes.',
+      "- Webfont import: `https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..800&family=Newsreader:ital,opsz,wght@1,6..72,400&display=swap` \u2014 inject once at module top level with a slide-keyed link id (see `references/webfonts.md` in `slide-authoring`).",
+      "- Type scale:",
+      "  - Hero title: 150 px (cover, three short lines).",
+      "  - Section / closer heading: 120\u2013130 px, line-height 0.98.",
+      "  - Page heading: 104 px.",
+      "  - Card title: 42\u201354 px, display recipe.",
+      "  - Big stat: 140 px (hero stat), 84 px (inline), 60\u201372 px (table cell), letter-spacing `-0.04em` to `-0.05em`.",
+      "  - Pull quote: 66 px Newsreader italic, line-height 1.16.",
+      "  - Body: 34 px on the cover, 28\u201332 px on content pages, line-height 1.45\u20131.5, color `body`.",
+      "  - Eyebrow: 26 px, weight 650, coral, sentence case.",
+      "  - Caption / meta: 22\u201326 px, color `muted`.",
+      "  - Footer: 21 px.",
+      "",
+      "## Layout",
+      "",
+      "- Canvas 1920 \u00d7 1080, absolutely positioned on a fixed grid. Left edge `X0 = 120`, content width `W = 1680`.",
+      "- Vertical rhythm: eyebrow at `top: 116`, page heading at `top: 160`, a one-line aside right-aligned at `left: 1220\u20131300, top: 196`, main content from `top: 330`, last content ends by ~940, footer at `top: 1000`.",
+      "- Cards: radius 24, flat pastel tint, no border, no shadow. Three across: 536 \u00d7 610 at `x = 120 / 692 / 1264`. Full-width rows: 1680 \u00d7 188, stacked 20 px apart.",
+      "- Tables and lists: rows separated by 1.5 px `rule` hairlines; header rules in solid 2 px ink.",
+      "- Illustrations sit right of the text block (`x \u2248 940\u20131080`) on a pastel backdrop circle, and never overlap type.",
+      "- Position helper:",
+      "",
+      "```tsx",
+      "const abs = (left: number, top: number, width?: number, height?: number): CSSProperties => ({",
+      "  position: 'absolute',",
+      "  left,",
+      "  top,",
+      "  width,",
+      "  height,",
+      "});",
+      "```",
+      "",
+      "## Fixed components",
+      "",
+      "These are paste-ready. Copy them verbatim into a slide that uses this theme (`import { type CSSProperties, type ReactNode, useId } from 'react';`).",
+      "",
+      "### Title",
+      "",
+      "```tsx",
+      "const Title = ({ children }: { children: ReactNode }) => (",
+      "  <h1",
+      "    style={{",
+      "      margin: 0,",
+      '      fontFamily: \'"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif\',',
+      "      fontSize: 150,",
+      "      fontWeight: 780,",
+      "      lineHeight: 1,",
+      "      letterSpacing: '-0.04em',",
+      "      wordSpacing: '0.08em',",
+      "      color: '#191919',", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "    }}",
+      "  >",
+      "    {children}",
+      "  </h1>",
+      ");",
+      "```",
+      "",
+      "### Heading",
+      "",
+      "Page headings (104), closer headings (130) and card titles (54) share one recipe.",
+      "",
+      "```tsx",
+      "const Heading = ({ children, size = 104 }: { children: ReactNode; size?: number }) => (",
+      "  <h2",
+      "    style={{",
+      "      margin: 0,",
+      '      fontFamily: \'"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif\',',
+      "      fontSize: size,",
+      "      fontWeight: 780,",
+      "      lineHeight: 1,",
+      "      letterSpacing: size >= 100 ? '-0.04em' : '-0.03em',",
+      "      wordSpacing: '0.08em',",
+      "      color: '#191919',", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "    }}",
+      "  >",
+      "    {children}",
+      "  </h2>",
+      ");",
+      "```",
+      "",
+      "### Footer",
+      "",
+      "Pin mark + wordmark + label on the left, zero-padded counter on the right. Pass your own `brand` / `label`.",
+      "",
+      "```tsx",
+      "import { useSlidePageNumber } from '@open-slide/core';",
+      "",
+      "const Mark = ({ size = 24 }: { size?: number }) => (",
+      "  <svg",
+      '    aria-hidden="true"',
+      "    width={size * 0.8}",
+      "    height={size}",
+      '    viewBox="0 0 20 25"',
+      "    style={{ display: 'block' }}",
+      "  >",
+      "    <path",
+      '      d="M10 24C8.5 20 1.5 15 1.5 9.5a8.5 8.5 0 0 1 17 0C18.5 15 11.5 20 10 24Z"',
+      '      fill="#191919"', // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "    />",
+      '    <circle cx="10" cy="9.5" r="3.4" fill="#FFFEFC" />', // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "  </svg>",
+      ");",
+      "",
+      "const Footer = ({",
+      "  brand = 'Fieldwork',",
+      "  label = 'Operating plan',",
+      "}: {",
+      "  brand?: string;",
+      "  label?: string;",
+      "}) => {",
+      "  const { current, total } = useSlidePageNumber();",
+      "  const pad2 = (n: number) => String(n).padStart(2, '0');",
+      "  return (",
+      "    <div",
+      "      style={{",
+      "        position: 'absolute',",
+      "        left: 120,",
+      "        right: 120,",
+      "        top: 1000,",
+      "        height: 32,",
+      "        display: 'flex',",
+      "        alignItems: 'center',",
+      "        justifyContent: 'space-between',",
+      '        fontFamily: \'"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif\',',
+      "        fontSize: 21,",
+      "        color: '#9B9A97',", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "      }}",
+      "    >",
+      "      <span style={{ display: 'flex', alignItems: 'center', gap: 12 }}>",
+      "        <Mark size={24} />",
+      "        <span style={{ color: '#191919', fontWeight: 720, letterSpacing: '-0.02em' }}>{brand}</span>", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "        <span style={{ marginLeft: 12 }}>{label}</span>",
+      "      </span>",
+      "      <span>",
+      "        {pad2(current)} / {pad2(total)}",
+      "      </span>",
+      "    </div>",
+      "  );",
+      "};",
+      "```",
+      "",
+      "### Eyebrow",
+      "",
+      "Coral, sentence case, no tracking \u2014 it reads like a Notion page breadcrumb, not a label.",
+      "",
+      "```tsx",
+      "const Eyebrow = ({ children }: { children: ReactNode }) => (",
+      "  <div",
+      "    style={{",
+      '      fontFamily: \'"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif\',',
+      "      fontSize: 26,",
+      "      fontWeight: 650,",
+      "      letterSpacing: '-0.01em',",
+      "      color: '#E8553B',", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "    }}",
+      "  >",
+      "    {children}",
+      "  </div>",
+      ");",
+      "```",
+      "",
+      "### Highlight",
+      "",
+      "Marker swipe behind one phrase per page. Uneven radii make it look hand-applied.",
+      "",
+      "```tsx",
+      "const Highlight = ({ children, color = '#FCE38A' }: { children: ReactNode; color?: string }) => (", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "  <span",
+      "    style={{",
+      "      background: color,",
+      "      borderRadius: '6px 12px 8px 14px',",
+      "      padding: '0 6px',",
+      "      margin: '0 -2px',",
+      "      color: '#191919',", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "      WebkitBoxDecorationBreak: 'clone',",
+      "      boxDecorationBreak: 'clone',",
+      "    }}",
+      "  >",
+      "    {children}",
+      "  </span>",
+      ");",
+      "```",
+      "",
+      "### TintCard",
+      "",
+      "Flat pastel card. Pick the tint from `tintBlue` / `tintGreen` / `tintYellow` / `tintPink`; rotate through them across a row.",
+      "",
+      "```tsx",
+      "const TintCard = ({",
+      "  tint = '#E7F3F8',", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "  style,",
+      "  children,",
+      "}: {",
+      "  tint?: string;",
+      "  style?: CSSProperties;",
+      "  children: ReactNode;",
+      "}) => (",
+      "  <div",
+      "    style={{",
+      "      position: 'relative',",
+      "      boxSizing: 'border-box',",
+      "      borderRadius: 24,",
+      "      background: tint,",
+      "      padding: '34px 44px 32px',",
+      "      ...style,",
+      "    }}",
+      "  >",
+      "    {children}",
+      "  </div>",
+      ");",
+      "```",
+      "",
+      "### Ink, Stroke, CircleDoodle, Sparkle",
+      "",
+      'The hand-drawn layer. `Ink` is an SVG with round 3.2 px ink strokes run through a turbulence filter so every line wobbles slightly. Draw illustrations inside it with plain `<path>` / `<rect>` / `<circle>`: ink outline, `#FFFFFF` or a pastel fill, and a pastel backdrop circle with `stroke="none"`. `Stroke` draws itself in when `live` is true \u2014 pass `useIsActivePage()` from the page. `CircleDoodle` loops a key number in coral; `Sparkle` is the four-point star used as a bullet, milestone or garnish.', // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "",
+      "```tsx",
+      "const Ink = ({",
+      "  width,",
+      "  height,",
+      "  viewBox,",
+      "  style,",
+      "  wobble = 2.2,",
+      "  children,",
+      "}: {",
+      "  width: number;",
+      "  height: number;",
+      "  viewBox?: string;",
+      "  style?: CSSProperties;",
+      "  wobble?: number;",
+      "  children: ReactNode;",
+      "}) => {",
+      "  const id = `fw${useId().replace(/[^a-zA-Z0-9]/g, '')}`;",
+      "  return (",
+      "    <svg",
+      '      aria-hidden="true"',
+      "      width={width}",
+      "      height={height}",
+      "      viewBox={viewBox ?? `0 0 ${width} ${height}`}",
+      '      fill="none"',
+      '      stroke="#191919"', // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "      strokeWidth={3.2}",
+      '      strokeLinecap="round"',
+      '      strokeLinejoin="round"',
+      "      style={{ display: 'block', overflow: 'visible', ...style }}",
+      "    >",
+      "      <defs>",
+      '        <filter id={id} x="-10%" y="-10%" width="120%" height="120%">',
+      '          <feTurbulence type="fractalNoise" baseFrequency="0.03" numOctaves={2} seed={4} />',
+      '          <feDisplacementMap in="SourceGraphic" scale={wobble} />',
+      "        </filter>",
+      "      </defs>",
+      "      <g filter={`url(#${id})`}>{children}</g>",
+      "    </svg>",
+      "  );",
+      "};",
+      "",
+      "const Stroke = ({",
+      "  d,",
+      "  live,",
+      "  delay = 0.3,",
+      "  dur = 0.7,",
+      "  color = '#191919',", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "  width = 3.2,",
+      "}: {",
+      "  d: string;",
+      "  live: boolean;",
+      "  delay?: number;",
+      "  dur?: number;",
+      "  color?: string;",
+      "  width?: number;",
+      "}) => (",
+      "  <path",
+      "    d={d}",
+      "    pathLength={1}",
+      "    strokeDasharray={1}",
+      "    stroke={color}",
+      "    strokeWidth={width}",
+      '    fill="none"',
+      "    style={{",
+      "      animation: live ? `fw-draw ${dur}s cubic-bezier(0, 0, 0.2, 1) ${delay}s both` : undefined,",
+      "    }}",
+      "  />",
+      ");",
+      "",
+      "const loopPath = (w: number, h: number) => {",
+      "  const p = (x: number, y: number) => `${((x * w) / 100).toFixed(1)} ${((y * h) / 100).toFixed(1)}`;",
+      "  return `M${p(30, 8)}C${p(55, 2)} ${p(90, 8)} ${p(96, 40)}C${p(100, 70)} ${p(72, 94)} ${p(42, 93)}C${p(14, 92)} ${p(2, 74)} ${p(4, 50)}C${p(6, 26)} ${p(26, 10)} ${p(56, 5)}`;",
+      "};",
+      "",
+      "const CircleDoodle = ({",
+      "  x,",
+      "  y,",
+      "  w,",
+      "  h,",
+      "  live,",
+      "  color = '#E8553B',", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "  delay = 0.4,",
+      "}: {",
+      "  x: number;",
+      "  y: number;",
+      "  w: number;",
+      "  h: number;",
+      "  live: boolean;",
+      "  color?: string;",
+      "  delay?: number;",
+      "}) => (",
+      "  <Ink width={w} height={h} wobble={1.6} style={{ position: 'absolute', left: x, top: y }}>",
+      "    <Stroke d={loopPath(w, h)} color={color} width={3.6} live={live} delay={delay} dur={0.8} />",
+      "  </Ink>",
+      ");",
+      "",
+      "const Sparkle = ({",
+      "  x,",
+      "  y,",
+      "  s = 1,",
+      "  fill = '#F8DA7E',", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "}: {",
+      "  x: number;",
+      "  y: number;",
+      "  s?: number;",
+      "  fill?: string;",
+      "}) => (",
+      "  <path",
+      "    transform={`translate(${x} ${y}) scale(${s})`}",
+      '    d="M0 -20Q3 -3 20 0Q3 3 0 20Q-3 3 -20 0Q-3 -3 0 -20Z"',
+      "    fill={fill}",
+      "    strokeWidth={3 / s}",
+      "  />",
+      ");",
+      "```",
+      "",
+      "Hand-drawn arrow / underline: an `Ink` box with one or two coral `Stroke`s, e.g. an underline `M6 22C120 10 260 30 400 16S510 12 532 16`, or an arrow whose head is two short strokes appended to the shaft (`\u2026M22 50L44 30M22 50L50 58`).",
+      "",
+      "## Motion",
+      "",
+      "- Philosophy: subtle \u2014 pages ease in with a 5 px lift, then the ink annotations draw themselves and bars grow once the page is active; nothing loops.",
+      "- Keyframes (inject once at module top level with a slide-keyed `<style>` id):",
+      "",
+      "```css",
+      "@keyframes fw-draw { from { stroke-dashoffset: 1 } to { stroke-dashoffset: 0 } }",
+      "@keyframes fw-fade { from { opacity: 0 } to { opacity: 1 } }",
+      "@keyframes fw-rise { from { transform: scaleY(0) } to { transform: scaleY(1) } }",
+      "@keyframes fw-grow { from { transform: scaleX(0) } to { transform: scaleX(1) } }",
+      "```",
+      "",
+      "- Easing: `cubic-bezier(0, 0, 0.2, 1)` out, `cubic-bezier(0.4, 0, 1, 1)` in. Draws run 0.7\u20130.8 s with a 0.3\u20131.0 s delay; bars `fw-rise` / `fw-grow` 0.7 s from `transformOrigin` bottom / left.",
+      "- Gate every on-page animation on `useIsActivePage()` so thumbnails render the finished state.",
+      "- Page transition:",
+      "",
+      "```tsx",
+      "export const transition: SlideTransition = {",
+      "  duration: 240,",
+      "  exit: {",
+      "    duration: 240,",
+      "    easing: 'cubic-bezier(0.4, 0, 1, 1)',",
+      "    keyframes: [{ opacity: 1 }, { opacity: 1 }],",
+      "  },",
+      "  enter: {",
+      "    duration: 240,",
+      "    easing: 'cubic-bezier(0, 0, 0.2, 1)',",
+      "    keyframes: [",
+      "      { opacity: 0, transform: 'translateY(5px)' },",
+      "      { opacity: 1, transform: 'translateY(0)' },",
+      "    ],",
+      "  },",
+      "};",
+      "```",
+      "",
+      "- For a card that opens into its own page, wrap the tinted card background in `MorphElement` and use `morph: { duration: 760, easing: 'cubic-bezier(0.4, 0, 0.2, 1)' }`; fade the new page's contents in with `fw-fade` after the morph.",
+      "",
+      "## Aesthetic",
+      "",
+      "A company operating plan written in Notion and illustrated by hand: warm paper-white canvas, very heavy tight Inter headlines that read like page titles, calm warm-grey body copy, and generous empty space. Personality comes from the ink layer \u2014 wobbly black-outlined spot illustrations (vans, houses, phones, people, toolboxes) sitting on soft pastel circles, coral circles and arrows scribbled over the numbers that matter, a yellow marker swipe behind one phrase, and the occasional Newsreader italic quote. Every number is real and owned by someone. Avoid: gradients, drop shadows, card borders, dark backgrounds, photography, emoji, uppercase tracked labels, more than one coral mark competing on a page, and illustrations drawn with clean geometric (non-wobbly) strokes.",
+      "",
+      "## Example usage",
+      "",
+      "```tsx",
+      "const root: CSSProperties = {",
+      "  position: 'relative',",
+      "  width: '100%',",
+      "  height: '100%',",
+      "  background: '#FFFEFC',", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "  color: '#191919',", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      '  fontFamily: \'"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif\',',
+      "  fontVariantNumeric: 'tabular-nums',",
+      "  WebkitFontSmoothing: 'antialiased',",
+      "};",
+      "",
+      "const Cover: Page = () => (",
+      "  <div style={root}>",
+      "    <div style={{ ...abs(120, 100), display: 'flex', alignItems: 'center', gap: 14 }}>",
+      "      <Mark size={32} />",
+      "      <span style={{ fontSize: 30, fontWeight: 760, letterSpacing: '-0.03em' }}>Fieldwork</span>",
+      "    </div>",
+      "    <div style={abs(120, 262)}>",
+      "      <Title>",
+      "        The annual",
+      "        <br />",
+      "        operating",
+      "        <br />",
+      "        plan.",
+      "      </Title>",
+      "    </div>",
+      "    <p style={{ ...abs(120, 772, 760), margin: 0, fontSize: 34, lineHeight: 1.45, color: '#5F5E5B' }}>", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "      Where we are, where we are going, and <Highlight>who owns each step</Highlight>.",
+      "    </p>",
+      "    <div style={{ ...abs(120, 906), fontSize: 24, color: '#9B9A97' }}>", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "      All-hands pre-read \u00b7 Planning team",
+      "    </div>",
+      "    <Footer />",
+      "  </div>",
+      ");",
+      "",
+      "const Summary: Page = () => {",
+      "  const live = useIsActivePage();",
+      "  return (",
+      "    <div style={root}>",
+      "      <div style={abs(120, 116)}>",
+      "        <Eyebrow>Strategy</Eyebrow>",
+      "      </div>",
+      "      <div style={abs(120, 160)}>",
+      "        <Heading>Three bets this year.</Heading>",
+      "      </div>",
+      '      <TintCard tint="#E7F3F8" style={abs(120, 330, 536, 610)}>', // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "        \u2026",
+      "      </TintCard>",
+      "      <CircleDoodle x={710} y={834} w={300} h={104} live={live} />",
+      "      <Footer />",
+      "    </div>",
+      "  );",
+      "};",
+      "```",
+    ].join("\n"),
+  },
+  {
+    id: "pommi",
+    name: "Pommi",
+    description:
+      "Playful consumer-brand deck \u2014 cream paper, ink outlines, tomato accent, sticker-bright fills, chunky Gabarito and springy motion.",
+    mode: "light",
+    preview: {
+      background: "#FFF3DF", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      text: "#151313", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      accent: "#FF5A2C", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+    },
+    guide: [
+      "# Pommi",
+      "",
+      "## Palette",
+      "",
+      "Cream paper and near-black ink do the structural work; tomato is the one accent. Butter, mint, periwinkle and pink are flat fills for cards, stickers, chips and chart marks \u2014 every filled shape gets a 4 px ink outline and a hard offset shadow.",
+      "",
+      "| Role      | Value                   | Notes                                                                 |",
+      "| --------- | ----------------------- | --------------------------------------------------------------------- |",
+      "| bg        | `#FFF3DF`               | cream canvas (`design.palette.bg` \u2192 `CREAM`)                          |", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "| text      | `#151313`               | ink: copy, outlines, shadows, pill fills (`design.palette.text` \u2192 `INK`) |", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      '| accent    | `#FF5A2C`               | tomato: hero stat block, lead sticker, "you" marks (`design.palette.accent` \u2192 `TOMATO`) |', // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "| butter    | `#FFD23F`               | default eyebrow fill, highlight sticker, sparkles                     |", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      '| mint      | `#7EDDB0`               | positive / "done" fills, secondary sticker                            |', // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "| peri      | `#98A6FF`               | cool fill, cover slab, third series                                   |", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "| pink      | `#FFB0D0`               | fourth series, small sparkles                                         |", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "| paper     | `#FFFCF6`               | card surface on top of cream                                          |", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "| white     | `#FFFFFF`               | chat-bubble style surfaces only                                       |", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "| muted     | `rgba(21, 19, 19, 0.6)` | captions, mono labels, footnotes (\u2248 `#736D65` on cream)               |", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      '| faint     | `rgba(21, 19, 19, 0.16)`| dashed dividers, grid lines, "inactive" outlines (\u2248 `#DACFBE` on cream) |', // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "| heat ramp | `rgba(255, 90, 44, a)`  | tomato at 0.1\u20131 alpha for heatmap tiles                               |", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "",
+      "Text on any fill (tomato, butter, mint, peri, pink) is always ink \u2014 never white.",
+      "",
+      "## Typography",
+      "",
+      '- Display font: `"Gabarito", system-ui, sans-serif` \u2014 weight 900 for titles and numbers, 800 for taglines and card labels.',
+      '- Body font: `"Gabarito", system-ui, sans-serif` \u2014 weight 500 for copy, 700\u2013800 for inline emphasis.',
+      '- Label font: `"DM Mono", ui-monospace, monospace` \u2014 weight 500, 17 px, uppercase, `letter-spacing: 0.06em`. Used for eyebrows, captions, axis labels, the footer and page counter.',
+      "- Webfont import: `https://fonts.googleapis.com/css2?family=DM+Mono:wght@500&family=Gabarito:wght@500;700;800;900&display=swap` \u2014 inject once at module top level (snippet in **Motion**), per `references/webfonts.md` in `slide-authoring`.",
+      "- Type scale (overrides `slide-authoring` where noted):",
+      "  - Wordmark / hero word: 250\u2013300 px, weight 900, `letter-spacing: -0.055em`, line-height 1 (`typeScale.hero = 300`; above the 140\u2013200 default).",
+      "  - Hero number: 180\u2013280 px, weight 900, `letter-spacing: -0.05em`, line-height 0.86, tabular figures.",
+      "  - Cover / closer tagline: 64\u201372 px, weight 800, line-height 1.06\u20131.08, `letter-spacing: -0.03em`.",
+      "  - Page title: 88 px (80\u201396), weight 900, line-height 1, `letter-spacing: -0.035em`.",
+      "  - Card title: 46\u201364 px display weight 900.",
+      "  - Stat number: 44\u201376 px display weight 900, `letter-spacing: -0.04em`.",
+      "  - Body: 30 px, weight 500, line-height 1.32 (`typeScale.body = 30`; tighter than the 1.5 default \u2014 the type is chunky and copy is short). 28 px inside cards.",
+      "  - Inline UI label: 20\u201330 px, weight 700\u2013800.",
+      "  - Mono label: 16\u201318 px. Footnote: 18 px, weight 500, line-height 1.4, muted.",
+      "- Gotcha: Gabarito's heavy `\u20ac` has almost no right bearing; under negative tracking wrap it as `<span style={{ marginRight: '0.06em' }}>\u20ac</span>`.",
+      "",
+      "## Layout",
+      "",
+      "- Canvas 1920 \u00d7 1080, `overflow: hidden`. Everything is absolutely placed with the `abs(left, top)` helper \u2014 this is a poster layout, not a flow layout.",
+      "- Side margins: 120 px \u2192 content width 1680 px.",
+      "- Vertical rhythm on content pages: Eyebrow at `y = 96` (46 px tall), Title at `y = 168`, content band roughly `y = 330 \u2192 900`, Footnote at `y \u2248 898\u2013956`, Footer row at `y = 996` (44 px tall).",
+      "- Split pages: left column `x = 120`, 1000 px wide; right column starts at 1160\u20131240 and runs to 1800. A big coloured **slab** (620\u2013640 px wide, 48 px radius, 4 px ink border) often fills the right column and may bleed off the bottom edge.",
+      "- Cover and closer drop the footer and carry a muted mono line at `y = 984` instead.",
+      "- Strokes: 4 px ink for cards, slabs and stickers; 3 px for pills, chips and small tiles; 2.5 px for tiny badges.",
+      "- Shadows are hard offsets with no blur \u2014 `shadow(n)` = `n px n px 0 ink`: 4 on pills, 5\u20136 on stickers and small tiles, 8 on cards, 10 on large cards, 12 on slabs and hero objects.",
+      "- Radii: 999 for pills, 20\u201328 for cards (`design.radius = 28`), 34 for large tilted cards, 48 for slabs.",
+      "- Tilt: stickers \u00b14\u201310\u00b0, cards \u00b11\u20139\u00b0. Content tables and charts stay straight.",
+      "- Dividers: `3px dashed faint` inside cards; `2px dashed faint` for chart grid lines; a 4 px ink baseline under bar charts.",
+      "",
+      "## Fixed components",
+      "",
+      "These are paste-ready. Copy the tokens and helpers first, then the components, then the Motion helpers and style injection.",
+      "",
+      "### Tokens & layout helpers",
+      "",
+      "`CREAM` / `INK` / `TOMATO` read from the per-slide `design` so the Design panel can tweak them.",
+      "",
+      "```tsx",
+      "import {",
+      "  type DesignSystem,",
+      "  type Page,",
+      "  useIsActivePage,",
+      "  useSlidePageNumber,",
+      "} from '@open-slide/core';",
+      "import { type CSSProperties, type ReactNode, useEffect, useState } from 'react';",
+      "",
+      "export const design: DesignSystem = {",
+      "  palette: { bg: '#FFF3DF', text: '#151313', accent: '#FF5A2C' },", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "  fonts: {",
+      "    display: '\"Gabarito\", system-ui, sans-serif',",
+      "    body: '\"Gabarito\", system-ui, sans-serif',",
+      "  },",
+      "  typeScale: { hero: 300, body: 30 },",
+      "  radius: 28,",
+      "};",
+      "",
+      "const CREAM = 'var(--slides2-bg)';",
+      "const INK = 'var(--slides2-text)';",
+      "const TOMATO = 'var(--slides2-accent)';",
+      "const BUTTER = '#FFD23F';", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "const MINT = '#7EDDB0';", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "const PERI = '#98A6FF';", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "const PINK = '#FFB0D0';", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "const PAPER = '#FFFCF6';", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "const MUTED = 'rgba(21, 19, 19, 0.6)';", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "const FAINT = 'rgba(21, 19, 19, 0.16)';", // guard:allow-raw-color — authored slide theme palette or documentation, not app chrome.
+      "",
+      "const BORDER = `4px solid ${INK}`;",
+      "const shadow = (n = 8) => `${n}px ${n}px 0 ${INK}`;",
+      "",
+      "const DISPLAY: CSSProperties = {",
+      "  fontFamily: 'var(--slides2-font-display)',",
+      "  fontWeight: 900,",
+      "  letterSpacing: '-0.035em',",
+      "  lineHeight: 1,",
+      "  margin: 0,",
+      "};",
+      "",
+      "const MONO: CSSProperties = {",
+      "  fontFamily: '\"DM Mono\", ui-monospace, monospace',",
+      "  fontWeight: 500,",
+      "  fontSize: 17,",
+      "  letterSpacing: '0.06em',",
+      "  textTransform: 'uppercase',",
+      "  lineHeight: 1.2,",
+      "};",
+      "",
+      "const BODY: CSSProperties = {",
+      "  fontFamily: 'var(--slides2-font-body)',",
+      "  fontWeight: 500,",
+      "  fontSize: 'var(--slides2-size-body)',",
+      "  lineHeight: 1.32,",
+      "  margin: 0,",
+      "  textWrap: 'pretty',",
+      "};",
+      "",
+      "const NUM: CSSProperties = { ...DISPLAY, fontVariantNumeric: 'tabular-nums' };",
+      "",
+      "const abs = (left: number, top: number, extra?: CSSProperties): CSSProperties => ({",
+      "  position: 'absolute',",
+      "  left,",
+      "  top,",
+      "  ...extra,",
+      "});",
+      "",
+      "const pad = (n: number) => String(n).padStart(2, '0');",
+      "```",
+      "",
+      "### Title",
+      "",
+      "Absolutely placed at the standard title slot. Rises in when the page goes live.",
+      "",
+      "```tsx",
+      "const Title = ({",
+      "  children,",
+      "  live,",
+      "  x = 120,",
+      "  y = 168,",
+      "  size = 88,",
+      "  width = 1680,",
+      "  delay = 70,",
+      "}: {",
+      "  children: ReactNode;",
+      "  live: boolean;",
+      "  x?: number;",
+      "  y?: number;",
+      "  size?: number;",
+      "  width?: number;",
+      "  delay?: number;",
+      "}) => (",
+      "  <h2 style={{ ...DISPLAY, ...abs(x, y), width, fontSize: size, ...rise(live, delay, 40) }}>",
+      "    {children}",
+      "  </h2>",
+      ");",
+      "```",
+      "",
+      "### Footer",
+      "",
+      "Pull the page number from `useSlidePageNumber()` \u2014 never hardcode `pageNum` / `total` props. Brand mark + wordmark on the left, mono label, a muted note pushed right, and an ink pill counter (`03 / 12`).",
+      "",
+      "```tsx",
+      "const Footer = ({",
+      "  brand = 'pommi',",
+      "  label = 'Company update \u00b7 2026',",
+      "  note = 'Confidential',",
+      "}: {",
+      "  brand?: string;",
+      "  label?: string;",
+      "  note?: string;",
+      "}) => {",
+      "  const { current, total } = useSlidePageNumber();",
+      "  return (",
+      "    <div",
+      "      style={abs(120, 996, {",
+      "        width: 1680,",
+      "        height: 44,",
+      "        display: 'flex',",
+      "        alignItems: 'center',",
+      "        gap: 14,",
+      "        zIndex: 8,",
+      "      })}",
+      "    >",
+      "      <Mark size={34} />",
+      "      <span style={{ ...DISPLAY, fontSize: 30, letterSpacing: '-0.04em' }}>{brand}</span>",
+      "      <span style={{ ...MONO, color: MUTED, marginLeft: 18 }}>{label}</span>",
+      "      <span style={{ ...MONO, color: MUTED, marginLeft: 'auto', marginRight: 10 }}>{note}</span>",
+      "      <span",
+      "        style={{",
+      "          ...MONO,",
+      "          height: 38,",
+      "          padding: '0 16px',",
+      "          borderRadius: 999,",
+      "          background: INK,",
+      "          color: CREAM,",
+      "          display: 'inline-flex',",
+      "          alignItems: 'center',",
+      "          fontVariantNumeric: 'tabular-nums',",
+      "        }}",
+      "      >",
+      "        {pad(current)} / {pad(total)}",
+      "      </span>",
+      "    </div>",
+      "  );",
+      "};",
+      "```",
+      "",
+      "### Eyebrow",
+      "",
+      "A numbered section tag: ink cell with the section number, butter label, hard 4 px shadow. Pass `color={TOMATO}` for the climax section (e.g. the ask).",
+      "",
+      "```tsx",
+      "const Eyebrow = ({",
+      "  n,",
+      "  children,",
+      "  live,",
+      "  x = 120,",
+      "  y = 96,",
+      "  color = BUTTER,",
+      "}: {",
+      "  n: string;",
+      "  children: ReactNode;",
+      "  live: boolean;",
+      "  x?: number;",
+      "  y?: number;",
+      "  color?: string;",
+      "}) => (",
+      "  <div",
+      "    style={abs(x, y, {",
+      "      display: 'flex',",
+      "      alignItems: 'stretch',",
+      "      height: 46,",
+      "      border: `3px solid ${INK}`,",
+      "      borderRadius: 999,",
+      "      background: color,",
+      "      boxShadow: shadow(4),",
+      "      overflow: 'hidden',",
+      "      ...rise(live, 0, 20),",
+      "    })}",
+      "  >",
+      "    <span",
+      "      style={{",
+      "        ...MONO,",
+      "        fontSize: 18,",
+      "        padding: '0 14px 0 16px',",
+      "        display: 'flex',",
+      "        alignItems: 'center',",
+      "        background: INK,",
+      "        color: CREAM,",
+      "      }}",
+      "    >",
+      "      {n}",
+      "    </span>",
+      "    <span",
+      "      style={{",
+      "        ...MONO,",
+      "        fontSize: 18,",
+      "        padding: '0 20px 0 16px',",
+      "        display: 'flex',",
+      "        alignItems: 'center',",
+      "      }}",
+      "    >",
+      "      {children}",
+      "    </span>",
+      "  </div>",
+      ");",
+      "```",
+      "",
+      "### Stage",
+      "",
+      "The page root. Every page wraps in it; pass `footer={false}` on cover and closer.",
+      "",
+      "```tsx",
+      "const Stage = ({ footer = true, children }: { footer?: boolean; children: ReactNode }) => (",
+      "  <div",
+      '    className="pm-root"',
+      "    style={{",
+      "      width: '100%',",
+      "      height: '100%',",
+      "      position: 'relative',",
+      "      overflow: 'hidden',",
+      "      isolation: 'isolate',",
+      "      background: CREAM,",
+      "      color: INK,",
+      "      fontFamily: 'var(--slides2-font-body)',",
+      "    }}",
+      "  >",
+      "    {children}",
+      "    {footer && <Footer />}",
+      "  </div>",
+      ");",
+      "```",
+      "",
+      "### Mark",
+      "",
+      "The tomato mascot: ink-outlined tomato with a mint leaf and a little door. Used at 34 px in the footer, 50 px on the cover, 400 px bobbing on the closer.",
+      "",
+      "```tsx",
+      "const Mark = ({ size = 56 }: { size?: number }) => (",
+      "  <svg",
+      "    width={size}",
+      "    height={size}",
+      '    viewBox="0 0 64 64"',
+      '    aria-hidden="true"',
+      "    style={{ display: 'block', overflow: 'visible' }}",
+      "  >",
+      "    <path",
+      '      d="M36.5 13.5 C 38.5 6, 46.5 2.5, 55 4.5 C 53 12, 45 16, 36.5 13.5 Z"',
+      "      style={{ fill: MINT, stroke: INK, strokeWidth: 3.5, strokeLinejoin: 'round' }}",
+      "    />",
+      "    <path",
+      '      d="M32 19 C 32 13, 33 9, 36 6"',
+      "      style={{ fill: 'none', stroke: INK, strokeWidth: 4, strokeLinecap: 'round' }}",
+      "    />",
+      "    <path",
+      '      d="M32 19 C 23 13, 6 15, 6 34 C 6 50, 17 60, 25 60 C 28 60, 30 58.5, 32 58.5 C 34 58.5, 36 60, 39 60 C 47 60, 58 50, 58 34 C 58 15, 41 13, 32 19 Z"',
+      "      style={{ fill: TOMATO, stroke: INK, strokeWidth: 4, strokeLinejoin: 'round' }}",
+      "    />",
+      "    <path",
+      '      d="M26.5 58.6 V 47 A 5.5 5.5 0 0 1 37.5 47 V 58.6"',
+      "      style={{ fill: CREAM, stroke: INK, strokeWidth: 3.5, strokeLinejoin: 'round' }}",
+      "    />",
+      "    <path",
+      '      d="M15 30 C 15.5 25.5, 18.5 22.5, 22.5 21.5"',
+      "      style={{ fill: 'none', stroke: PAPER, strokeWidth: 3.5, strokeLinecap: 'round' }}",
+      "    />",
+      "  </svg>",
+      ");",
+      "```",
+      "",
+      "### Sticker",
+      "",
+      "The signature move: a tilted, outlined, hard-shadowed badge that slaps on and then wobbles gently forever. Pass `round={232}` for a circular sticker.",
+      "",
+      "```tsx",
+      "const Sticker = ({",
+      "  x,",
+      "  y,",
+      "  r,",
+      "  live,",
+      "  delay,",
+      "  bg,",
+      "  children,",
+      "  round,",
+      "  pad: padding = '14px 26px',",
+      "  z = 6,",
+      "}: {",
+      "  x: number;",
+      "  y: number;",
+      "  r: number;",
+      "  live: boolean;",
+      "  delay: number;",
+      "  bg: string;",
+      "  children: ReactNode;",
+      "  round?: number;",
+      "  pad?: string;",
+      "  z?: number;",
+      "}) => (",
+      "  <div",
+      "    style={",
+      "      {",
+      "        ...abs(x, y),",
+      "        '--r': `${r}deg`,",
+      "        transform: `rotate(${r}deg)`,",
+      "        zIndex: z,",
+      "        ...anim(live, `pm-slap 760ms ${SLAP} ${delay}ms both`),",
+      "      } as CSSProperties",
+      "    }",
+      "  >",
+      "    <div",
+      "      style={{",
+      "        ...anim(live, `pm-wobble 5.2s ease-in-out ${delay + 900}ms infinite`),",
+      "        background: bg,",
+      "        border: BORDER,",
+      "        boxShadow: shadow(6),",
+      "        borderRadius: round ? '50%' : 22,",
+      "        width: round,",
+      "        height: round,",
+      "        padding: round ? 0 : padding,",
+      "        display: 'flex',",
+      "        flexDirection: 'column',",
+      "        alignItems: 'center',",
+      "        justifyContent: 'center',",
+      "        textAlign: 'center',",
+      "      }}",
+      "    >",
+      "      {children}",
+      "    </div>",
+      "  </div>",
+      ");",
+      "```",
+      "",
+      "### Sparkle",
+      "",
+      "A four-point ink-outlined star that pops in and twinkles. Scatter two or three around stickers and slabs, never more.",
+      "",
+      "```tsx",
+      "const Sparkle = ({",
+      "  x,",
+      "  y,",
+      "  size,",
+      "  color = BUTTER,",
+      "  live,",
+      "  delay,",
+      "}: {",
+      "  x: number;",
+      "  y: number;",
+      "  size: number;",
+      "  color?: string;",
+      "  live: boolean;",
+      "  delay: number;",
+      "}) => (",
+      "  <div",
+      "    style={{",
+      "      ...abs(x, y),",
+      "      width: size,",
+      "      height: size,",
+      "      ...anim(live, `pm-pop 700ms ${BOUNCY} ${delay}ms both`),",
+      "    }}",
+      "  >",
+      "    <svg",
+      "      width={size}",
+      "      height={size}",
+      '      viewBox="0 0 40 40"',
+      '      aria-hidden="true"',
+      "      style={{",
+      "        display: 'block',",
+      "        overflow: 'visible',",
+      "        ...anim(live, `pm-twinkle 2.8s ease-in-out ${delay + 700}ms infinite`),",
+      "      }}",
+      "    >",
+      "      <path",
+      '        d="M20 2 C 22 14, 26 18, 38 20 C 26 22, 22 26, 20 38 C 18 26, 14 22, 2 20 C 14 18, 18 14, 20 2 Z"',
+      "        style={{ fill: color, stroke: INK, strokeWidth: 3, strokeLinejoin: 'round' }}",
+      "      />",
+      "    </svg>",
+      "  </div>",
+      ");",
+      "```",
+      "",
+      "### Chip",
+      "",
+      "Paper pill for facts under a tagline (counts, markets, contact details).",
+      "",
+      "```tsx",
+      "const Chip = ({ children }: { children: ReactNode }) => (",
+      "  <span",
+      "    style={{",
+      "      height: 52,",
+      "      padding: '0 22px',",
+      "      border: `3px solid ${INK}`,",
+      "      borderRadius: 999,",
+      "      display: 'inline-flex',",
+      "      alignItems: 'center',",
+      "      fontSize: 24,",
+      "      fontWeight: 700,",
+      "      background: PAPER,",
+      "    }}",
+      "  >",
+      "    {children}",
+      "  </span>",
+      ");",
+      "```",
+      "",
+      "### StatRow",
+      "",
+      'A paper card with a coloured number block on the left \u2014 the workhorse for "three numbers" pages. Stack at 156 px pitch (`y = 420, 576, 732`).',
+      "",
+      "```tsx",
+      "const StatRow = ({",
+      "  x = 120,",
+      "  y,",
+      "  n,",
+      "  color,",
+      "  live,",
+      "  delay,",
+      "  children,",
+      "}: {",
+      "  x?: number;",
+      "  y: number;",
+      "  n: string;",
+      "  color: string;",
+      "  live: boolean;",
+      "  delay: number;",
+      "  children: ReactNode;",
+      "}) => (",
+      "  <div",
+      "    style={abs(x, y, {",
+      "      width: 1000,",
+      "      height: 132,",
+      "      display: 'flex',",
+      "      border: BORDER,",
+      "      borderRadius: 28,",
+      "      background: PAPER,",
+      "      boxShadow: shadow(8),",
+      "      overflow: 'hidden',",
+      "      boxSizing: 'border-box',",
+      "      ...anim(live, `pm-in-l 900ms ${SNAPPY} ${delay}ms both`),",
+      "    })}",
+      "  >",
+      "    <div",
+      "      style={{",
+      "        width: 250,",
+      "        flex: 'none',",
+      "        background: color,",
+      "        borderRight: BORDER,",
+      "        display: 'flex',",
+      "        alignItems: 'center',",
+      "        paddingLeft: 30,",
+      "        boxSizing: 'border-box',",
+      "      }}",
+      "    >",
+      "      <span style={{ ...NUM, fontSize: 76, letterSpacing: '-0.045em' }}>{n}</span>",
+      "    </div>",
+      "    <p style={{ ...BODY, padding: '0 36px', alignSelf: 'center' }}>{children}</p>",
+      "  </div>",
+      ");",
+      "```",
+      "",
+      "### TiltCard",
+      "",
+      'A large coloured card with an ink number badge and a display title, slapped on at an angle. Fan three of them for "how it works" or feature pages.',
+      "",
+      "```tsx",
+      "const TiltCard = ({",
+      "  x,",
+      "  y,",
+      "  r,",
+      "  color,",
+      "  n,",
+      "  title,",
+      "  live,",
+      "  delay,",
+      "  width = 360,",
+      "  height = 420,",
+      "  children,",
+      "}: {",
+      "  x: number;",
+      "  y: number;",
+      "  r: number;",
+      "  color: string;",
+      "  n: string;",
+      "  title: string;",
+      "  live: boolean;",
+      "  delay: number;",
+      "  width?: number;",
+      "  height?: number;",
+      "  children: ReactNode;",
+      "}) => (",
+      "  <div",
+      "    style={",
+      "      {",
+      "        ...abs(x, y),",
+      "        '--r': `${r}deg`,",
+      "        transform: `rotate(${r}deg)`,",
+      "        width,",
+      "        height,",
+      "        boxSizing: 'border-box',",
+      "        padding: 28,",
+      "        background: color,",
+      "        border: BORDER,",
+      "        borderRadius: 34,",
+      "        boxShadow: shadow(10),",
+      "        display: 'flex',",
+      "        flexDirection: 'column',",
+      "        ...anim(live, `pm-slap 760ms ${SLAP} ${delay}ms both`),",
+      "      } as CSSProperties",
+      "    }",
+      "  >",
+      "    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>",
+      "      <span",
+      "        style={{",
+      "          ...MONO,",
+      "          fontSize: 18,",
+      "          width: 52,",
+      "          height: 52,",
+      "          flex: 'none',",
+      "          borderRadius: '50%',",
+      "          background: INK,",
+      "          color: CREAM,",
+      "          display: 'flex',",
+      "          alignItems: 'center',",
+      "          justifyContent: 'center',",
+      "        }}",
+      "      >",
+      "        {n}",
+      "      </span>",
+      "      <span style={{ ...DISPLAY, fontSize: 64 }}>{title}</span>",
+      "    </div>",
+      "    <p style={{ ...BODY, fontSize: 28, marginTop: 24, lineHeight: 1.3 }}>{children}</p>",
+      "  </div>",
+      ");",
+      "```",
+      "",
+      "### DropWord",
+      "",
+      "Hero word where each letter falls in with a gravity bounce and squashes on landing. Use for one short word (no spaces) at 250\u2013300 px.",
+      "",
+      "```tsx",
+      "const DropWord = ({",
+      "  text,",
+      "  size,",
+      "  live,",
+      "  delay = 0,",
+      "}: {",
+      "  text: string;",
+      "  size: number;",
+      "  live: boolean;",
+      "  delay?: number;",
+      "}) => {",
+      "  const letters = Array.from(text, (ch, i) => ({ ch, id: `${i}-${ch}` }));",
+      "  return (",
+      "    <div",
+      "      style={{",
+      "        ...DISPLAY,",
+      "        fontSize: size,",
+      "        letterSpacing: '-0.055em',",
+      "        lineHeight: 1,",
+      "        display: 'flex',",
+      "        whiteSpace: 'nowrap',",
+      "      }}",
+      "    >",
+      "      {letters.map((l, i) => {",
+      "        const d = delay + i * 85;",
+      "        return (",
+      "          <span",
+      "            key={l.id}",
+      "            style={{",
+      "              display: 'inline-block',",
+      "              ...(live",
+      "                ? ({",
+      "                    animation: `pm-drop 940ms ${DROP} ${d}ms both`,",
+      "                    '--pm-from': '-1.6em',",
+      "                  } as CSSProperties)",
+      "                : {}),",
+      "            }}",
+      "          >",
+      "            <span",
+      "              style={{",
+      "                display: 'inline-block',",
+      "                transformOrigin: '50% 88%',",
+      "                ...anim(live, `pm-squash 560ms ease-out ${d + Math.round(940 * DROP_LAND)}ms both`),",
+      "              }}",
+      "            >",
+      "              {l.ch}",
+      "            </span>",
+      "          </span>",
+      "        );",
+      "      })}",
+      "    </div>",
+      "  );",
+      "};",
+      "```",
+      "",
+      "### Footnote",
+      "",
+      "```tsx",
+      "const Footnote = ({",
+      "  x = 120,",
+      "  y,",
+      "  width = 1680,",
+      "  children,",
+      "}: {",
+      "  x?: number;",
+      "  y: number;",
+      "  width?: number;",
+      "  children: ReactNode;",
+      "}) => (",
+      "  <p style={{ ...BODY, ...abs(x, y), width, fontSize: 18, lineHeight: 1.4, color: MUTED }}>",
+      "    {children}",
+      "  </p>",
+      ");",
+      "```",
+      "",
+      "## Motion",
+      "",
+      '- Philosophy: **rich** \u2014 everything has weight: letters drop and squash, stickers slap on and wobble, cards spring in, hero numbers count up and land with a "thunk"; but animation only runs while the page is active (`useLive`), so thumbnails, overview and PDF render the final frame.',
+      "- Easing: physical curves generated into CSS `linear()` \u2014 `BOUNCY` (spring, \u03b6 0.38) for pops and bars, `SNAPPY` (spring, \u03b6 0.62) for rises and slide-ins, `DROP` (gravity with two bounces) for falling objects, `SLAP` cubic-bezier for stickers.",
+      "- Choreography: eyebrow at 0 ms, title ~70 ms, content staggered 120\u2013150 ms apart, stickers and sparkles last (1.2\u20132.5 s). Count-ups ease out quartically over ~1.6 s; fire `pm-thunk` on the number as it lands.",
+      "- Page transition: 240 ms \u2014 the outgoing page holds, the incoming one fades up 8 px.",
+      "- `prefers-reduced-motion` disables all animation under `.pm-root`.",
+      "",
+      "Easing generators and live / count-up helpers:",
+      "",
+      "```tsx",
+      "const springAt = (t: number, zeta: number, omega: number) => {",
+      "  if (t >= 1) return 1;",
+      "  const wd = omega * Math.sqrt(1 - zeta * zeta);",
+      "  const decay = Math.exp(-zeta * omega * t);",
+      "  return 1 - decay * (Math.cos(wd * t) + ((zeta * omega) / wd) * Math.sin(wd * t));",
+      "};",
+      "",
+      "// Gravity drop with two shrinking bounces; never passes the floor, unlike a spring.",
+      "const dropAt = (t: number) => {",
+      "  const e = 0.3;",
+      "  const segs = [1, 2 * e, 2 * e * e];",
+      "  const total = segs[0] + segs[1] + segs[2];",
+      "  let u = t * total;",
+      "  if (u <= 1) return u * u;",
+      "  u -= 1;",
+      "  for (let k = 1; k < segs.length; k++) {",
+      "    if (u <= segs[k]) {",
+      "      const x = u / segs[k];",
+      "      return 1 - e ** (2 * k) * 4 * x * (1 - x);",
+      "    }",
+      "    u -= segs[k];",
+      "  }",
+      "  return 1;",
+      "};",
+      "const DROP_LAND = 1 / (1 + 0.6 + 0.18);",
+      "",
+      "const toLinear = (f: (t: number) => number, n: number) =>",
+      "  `linear(${Array.from({ length: n + 1 }, (_, i) => Number(f(i / n).toFixed(4))).join(', ')})`;",
+      "",
+      "const BOUNCY = toLinear((t) => springAt(t, 0.38, 15), 64);",
+      "const SNAPPY = toLinear((t) => springAt(t, 0.62, 10.5), 48);",
+      "const DROP = toLinear(dropAt, 72);",
+      "const SLAP = 'cubic-bezier(0.2, 0.8, 0.3, 1)';",
+      "",
+      "const anim = (live: boolean, value: string): CSSProperties => (live ? { animation: value } : {});",
+      "",
+      "const rise = (live: boolean, delay = 0, dist = 32): CSSProperties =>",
+      "  live",
+      "    ? ({",
+      "        animation: `pm-rise 820ms ${SNAPPY} ${delay}ms both`,",
+      "        '--pm-rise': `${dist}px`,",
+      "      } as CSSProperties)",
+      "    : {};",
+      "",
+      "const useLive = () => {",
+      "  const active = useIsActivePage();",
+      "  const [reduced] = useState(",
+      "    () =>",
+      "      typeof window !== 'undefined' &&",
+      "      window.matchMedia('(prefers-reduced-motion: reduce)').matches,",
+      "  );",
+      "  return active && !reduced;",
+      "};",
+      "",
+      "const useCount = (target: number, live: boolean, delay: number, dur = 1700) => {",
+      "  const [value, setValue] = useState(live ? 0 : target);",
+      "  useEffect(() => {",
+      "    if (!live) {",
+      "      setValue(target);",
+      "      return;",
+      "    }",
+      "    setValue(0);",
+      "    let raf = 0;",
+      "    const start = performance.now() + delay;",
+      "    const tick = (now: number) => {",
+      "      const p = Math.min(1, Math.max(0, (now - start) / dur));",
+      "      setValue(target * (1 - (1 - p) ** 4));",
+      "      if (p < 1) raf = requestAnimationFrame(tick);",
+      "    };",
+      "    raf = requestAnimationFrame(tick);",
+      "    return () => cancelAnimationFrame(raf);",
+      "  }, [live, target, delay, dur]);",
+      "  return value;",
+      "};",
+      "```",
+      "",
+      "Webfont + keyframes, injected once at module top level (key the ids to your slide):",
+      "",
+      "```tsx",
+      "const SLIDE_ID = 'your-slide-id';",
+      "const FONT_HREF =",
+      "  'https://fonts.googleapis.com/css2?family=DM+Mono:wght@500&family=Gabarito:wght@500;700;800;900&display=swap';",
+      "const FONT_LINK_ID = `slides2-webfont-${SLIDE_ID}`;",
+      "const STYLE_ID = `slides2-styles-${SLIDE_ID}`;",
+      "",
+      "const CSS = `",
+      "@keyframes pm-rise { from { opacity: 0; transform: translateY(var(--pm-rise, 32px)) } to { opacity: 1; transform: translateY(0) } }",
+      "@keyframes pm-in-l { from { opacity: 0; transform: translateX(-90px) } to { opacity: 1; transform: translateX(0) } }",
+      "@keyframes pm-fade { from { opacity: 0 } to { opacity: 1 } }",
+      "@keyframes pm-drop { from { transform: translateY(var(--pm-from, -320px)) } to { transform: translateY(0) } }",
+      "@keyframes pm-pop { from { opacity: 0; transform: scale(0) } to { opacity: 1; transform: scale(1) } }",
+      "@keyframes pm-pop-b { from { opacity: 0; transform: translateY(20px) scale(0.55) } to { opacity: 1; transform: translateY(0) scale(1) } }",
+      "@keyframes pm-squash { 0% { transform: scale(1, 1) } 26% { transform: scale(1.14, 0.82) } 56% { transform: scale(0.96, 1.05) } 100% { transform: scale(1, 1) } }",
+      "@keyframes pm-slap {",
+      "  0% { opacity: 0; transform: rotate(calc(var(--r) - 24deg)) scale(1.9) }",
+      "  42% { opacity: 1; transform: rotate(calc(var(--r) + 4deg)) scale(0.88, 0.84) }",
+      "  70% { opacity: 1; transform: rotate(calc(var(--r) - 1.5deg)) scale(1.04) }",
+      "  100% { opacity: 1; transform: rotate(var(--r)) scale(1) }",
+      "}",
+      "@keyframes pm-wobble { 0%, 100% { transform: rotate(0deg) } 50% { transform: rotate(2.6deg) } }",
+      "@keyframes pm-bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-12px) } }",
+      "@keyframes pm-twinkle { 0%, 100% { transform: scale(1) rotate(0deg) } 50% { transform: scale(0.7) rotate(25deg) } }",
+      "@keyframes pm-thunk { 0% { transform: scale(1) } 24% { transform: scale(1.07) rotate(-1.4deg) } 58% { transform: scale(0.985) rotate(0.4deg) } 100% { transform: scale(1) } }",
+      "",
+      "@media (prefers-reduced-motion: reduce) {",
+      "  .pm-root *, .pm-root *::before, .pm-root *::after { animation: none !important; transition: none !important; }",
+      "}",
+      "`;",
+      "",
+      "if (typeof document !== 'undefined') {",
+      "  let link = document.getElementById(FONT_LINK_ID) as HTMLLinkElement | null;",
+      "  if (!link) {",
+      "    link = document.createElement('link');",
+      "    link.id = FONT_LINK_ID;",
+      "    link.rel = 'stylesheet';",
+      "    document.head.appendChild(link);",
+      "  }",
+      "  if (link.href !== FONT_HREF) link.href = FONT_HREF;",
+      "",
+      "  let style = document.getElementById(STYLE_ID);",
+      "  if (!style) {",
+      "    style = document.createElement('style');",
+      "    style.id = STYLE_ID;",
+      "    document.head.appendChild(style);",
+      "  }",
+      "  if (style.textContent !== CSS) style.textContent = CSS;",
+      "}",
+      "```",
+      "",
+      "Optional page transition:",
+      "",
+      "```tsx",
+      "import type { SlideTransition } from '@open-slide/core';",
+      "",
+      "export const transition: SlideTransition = {",
+      "  duration: 240,",
+      "  exit: {",
+      "    duration: 240,",
+      "    easing: 'cubic-bezier(0.4, 0, 1, 1)',",
+      "    keyframes: [{ opacity: 1 }, { opacity: 1 }],",
+      "  },",
+      "  enter: {",
+      "    duration: 240,",
+      "    easing: 'cubic-bezier(0, 0, 0.2, 1)',",
+      "    keyframes: [",
+      "      { opacity: 0, transform: 'translateY(8px)' },",
+      "      { opacity: 1, transform: 'translateY(0)' },",
+      "    ],",
+      "  },",
+      "};",
+      "```",
+      "",
+      "## Aesthetic",
+      "",
+      "A consumer app's pitch deck that feels like a sticker sheet: warm cream paper, thick ink outlines on every shape, flat candy fills (tomato, butter, mint, periwinkle, pink) and hard, blur-free offset shadows that make cards look die-cut and stacked. Type is huge, heavy and tightly tracked; uppercase DM Mono keeps the labels honest. Layouts are poster-like \u2014 big absolute-positioned blocks, a coloured slab on the right, a few tilted stickers and sparkles breaking the grid \u2014 and motion is springy and physical, as if everything was dropped onto the page. Avoid: gradients, soft or blurred shadows, glassmorphism, thin hairline borders, white text on fills, photography, dark mode, and more than one tomato hero per page. If it could be a die-cut sticker on a laptop lid, it is on theme.",
+      "",
+      "## Example usage",
+      "",
+      "```tsx",
+      "const Content: Page = () => {",
+      "  const live = useLive();",
+      "  const count = useCount(412, live, 600, 1600);",
+      "  return (",
+      "    <Stage>",
+      '      <Eyebrow n="01" live={live}>',
+      "        Highlights",
+      "      </Eyebrow>",
+      "      <Title live={live} size={96} width={1100}>",
+      "        This quarter,",
+      "        <br />",
+      "        in three numbers.",
+      "      </Title>",
+      '      <StatRow y={420} n="3.4\u00d7" color={TOMATO} live={live} delay={260}>',
+      "        more weekly active users than at the same point last year",
+      "      </StatRow>",
+      '      <StatRow y={576} n="61%" color={BUTTER} live={live} delay={380}>',
+      "        of new sign-ups arrived through a friend's invite link",
+      "      </StatRow>",
+      '      <StatRow y={732} n="4 s" color={PERI} live={live} delay={500}>',
+      "        median time to finish the core action, down from eleven",
+      "      </StatRow>",
+      "      <Footnote y={898} width={1000}>",
+      "        Illustrative figures for the theme preview. Swap in your own numbers and sources.",
+      "      </Footnote>",
+      "",
+      "      <div",
+      "        style={abs(1220, 330, {",
+      "          width: 580,",
+      "          height: 520,",
+      "          boxSizing: 'border-box',",
+      "          padding: '40px 44px',",
+      "          background: PAPER,",
+      "          border: BORDER,",
+      "          borderRadius: 34,",
+      "          boxShadow: shadow(10),",
+      "          display: 'flex',",
+      "          flexDirection: 'column',",
+      "          ...rise(live, 160, 60),",
+      "        })}",
+      "      >",
+      "        <span style={{ ...MONO, color: MUTED }}>Monthly active homes</span>",
+      "        <span",
+      "          style={{",
+      "            ...NUM,",
+      "            fontSize: 200,",
+      "            lineHeight: 0.86,",
+      "            letterSpacing: '-0.05em',",
+      "            marginTop: 24,",
+      "            transformOrigin: '0% 80%',",
+      "            ...anim(live, 'pm-thunk 620ms ease-out 2200ms both'),",
+      "          }}",
+      "        >",
+      "          {Math.round(count)}k",
+      "        </span>",
+      "        <p style={{ ...BODY, fontWeight: 700, marginTop: 26 }}>",
+      "          households open the app at least once a month.",
+      "        </p>",
+      "        <div",
+      "          style={{",
+      "            marginTop: 'auto',",
+      "            paddingTop: 22,",
+      "            borderTop: `3px dashed ${FAINT}`,",
+      "            display: 'flex',",
+      "            alignItems: 'baseline',",
+      "            gap: 14,",
+      "          }}",
+      "        >",
+      "          <span style={{ ...NUM, fontSize: 44, letterSpacing: '-0.03em' }}>+3.1\u00d7</span>",
+      "          <span style={{ ...MONO, fontSize: 16, color: MUTED }}>Year on year</span>",
+      "        </div>",
+      "      </div>",
+      '      <Sticker x={1600} y={286} r={6} live={live} delay={2300} bg={MINT} pad="10px 20px">',
+      "        <span style={{ fontSize: 24, fontWeight: 800 }}>64% organic</span>",
+      "      </Sticker>",
+      "      <Sparkle x={1180} y={296} size={40} live={live} delay={2450} />",
+      "    </Stage>",
+      "  );",
+      "};",
+      "```",
+    ].join("\n"),
+  },
+] satisfies readonly BuiltInSlideTheme[];
+
+export function listBuiltInSlideThemeSummaries(): BuiltInSlideThemeSummary[] {
+  return themes.map(({ id, name, description, mode, preview }) => ({
+    id,
+    name,
+    description,
+    mode,
+    preview,
+  }));
+}
+
+export function getBuiltInSlideTheme(
+  id: string,
+): BuiltInSlideTheme | undefined {
+  const theme = themes.find((candidate) => candidate.id === id);
+  return theme ? structuredClone(theme) : undefined;
+}