### Install Dependencies and Playwright Browsers

Source: https://github.com/phlegonlabs/powerpoint-fancy-design/blob/main/README.md

Installs project dependencies using npm and downloads the Chromium browser for Playwright. Run this command in your terminal to set up the project environment.

```powershell
npm install
npx playwright install chromium
```

--------------------------------

### Example Markdown Input for Slides

Source: https://github.com/phlegonlabs/powerpoint-fancy-design/blob/main/README.md

Demonstrates the preferred Markdown structure for input files, where content is grouped by slide. This format facilitates the generation of well-structured presentations.

```markdown
# Page 1
## Title
2026 Market Outlook

## Subtitle
Why Southeast Asia matters now

## Key Points
- EV penetration accelerated in three urban clusters
- Battery localization is improving margin outlook
- Policy support remains uneven by country

# Page 2
## Title
Key Drivers

## Sections
### Demand
- Fleet adoption
- Urban charging growth
```

--------------------------------

### Build Pipeline Commands

Source: https://context7.com/phlegonlabs/powerpoint-fancy-design/llms.txt

NPM scripts to execute the full HTML to PPTX pipeline.

```bash
# Install dependencies
npm install
npx playwright install chromium

# Build individual steps
npm run render:slides   # HTML → PNG
npm run export:ppt      # PNG → PPTX

# Full pipeline (render + export)
npm run build:ppt

# Build public-stage benchmark with all 10 styles
npm run build:public-stage

# Build for a specific style only
node scripts/build_public_stage_cases.mjs --style a

# Generate style preview images
npm run build:style-previews
```

--------------------------------

### Run Build:PPT Command

Source: https://github.com/phlegonlabs/powerpoint-fancy-design/blob/main/README.md

Executes both the slide rendering and PPTX export commands sequentially. This is a convenient shortcut for the complete slide generation pipeline.

```powershell
npm run build:ppt
```

--------------------------------

### Render and Export Slides

Source: https://github.com/phlegonlabs/powerpoint-fancy-design/blob/main/CLAUDE.md

Execute the slide engine to render HTML slides to PNG and then package them into a PPTX file.

```bash
node ./scripts/render_slides.mjs --input ./outputs/html --output ./outputs/rendered
node ./scripts/export_ppt.mjs --input ./outputs/rendered --output ./outputs/ppt/deck.pptx
```

--------------------------------

### Import Typography

Source: https://github.com/phlegonlabs/powerpoint-fancy-design/blob/main/skills/ppt-design/styles/style_h.md

Google Fonts link for Orbitron, Space Mono, Inter, and Noto Sans SC.

```html
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Orbitron:wght@400;500;700;900&family=Inter:wght@200;300;400&family=Noto+Sans+SC:wght@300;400;700&display=swap" rel="stylesheet">
```

--------------------------------

### Build Style Preview Assets

Source: https://github.com/phlegonlabs/powerpoint-fancy-design/blob/main/README.md

Generates assets used for previewing styles within the project. This command is useful for development and testing of visual elements.

```powershell
npm run build:style-previews
```

--------------------------------

### Import Typography

Source: https://github.com/phlegonlabs/powerpoint-fancy-design/blob/main/skills/ppt-design/styles/style_f.md

Google Fonts link for the required display and body typefaces.

```html
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Inter:wght@200;300;400;500&family=DM+Mono:wght@300;400&family=Noto+Serif+SC:wght@400;700;900&family=Noto+Sans+SC:wght@300;400;500&display=swap" rel="stylesheet">
```

--------------------------------

### Run Public-Stage Benchmark Pipeline

Source: https://github.com/phlegonlabs/powerpoint-fancy-design/blob/main/README.md

Executes the full benchmark pipeline for public-facing slide decks.

```powershell
npm run build:public-stage
```

--------------------------------

### Mapping Content to Layouts

Source: https://context7.com/phlegonlabs/powerpoint-fancy-design/llms.txt

Generate a page plan by providing content specifications, style context, and presentation parameters.

```javascript
// scripts/slide_engine/layout_selection.mjs
import { buildPagePlan } from "./scripts/slide_engine/layout_selection.mjs";

// Define a page specification with content role and data
const pageSpec = {
  role: "metric",  // cover | chronology | comparison | metric | thesis | synthesis | closing
  blocks: [
    { text: "Q3 Performance" },
    { text: "Revenue Growth Accelerates" },
    { text: "Third quarter results exceeded analyst expectations across all segments." }
  ],
  metric: {
    value: "+47%",
    label: "Year-over-Year Revenue",
    note: "Highest quarterly growth since 2019"
  },
  bullets: [
    "Enterprise segment up 62%",
    "Consumer segment up 38%",
    "International markets up 51%"
  ],
  footer: "Source: Q3 2025 Earnings Report"
};

// Build the page plan with style context
const style = { id: "a", family: "editorial", coverPrototype: "cover-swiss-rail" };
const context = {
  presentationScenario: "investor-board",
  qualityTier: "public-stage",
  chromeMode: "bookend"
};

const plan = buildPagePlan(style, pageSpec, 3, "hero-cover", context);
// Returns:
// {
//   ...pageSpec,
//   index: 3,
//   layoutId: "metric-commentary",  // Selected based on role + family
//   family: "editorial",
//   styleId: "a",
//   componentDialect: "editorial",
//   presentationScenario: "investor-board",
//   qualityTier: "public-stage"
// }
```

--------------------------------

### Export PNGs to PPTX

Source: https://context7.com/phlegonlabs/powerpoint-fancy-design/llms.txt

Packages rendered PNG slides into a PPTX file with 16:9 aspect ratio.

```bash
# Export rendered PNGs to PPTX
node scripts/export_ppt.mjs --input ./outputs/rendered --output ./outputs/ppt/deck.pptx

# With environment variables for metadata
PPT_AUTHOR="Jane Smith" PPT_COMPANY="Strategy Team" \
  node scripts/export_ppt.mjs --input ./outputs/rendered --output ./outputs/ppt/deck.pptx

# Output:
# Exported 10 slide(s) -> outputs/ppt/deck.pptx
```

```javascript
// Programmatic export pattern
import pptxgen from "pptxgenjs";
import fs from "node:fs/promises";
import path from "node:path";

async function exportToPptx(imageDir, outputPath) {
  const pptx = new pptxgen();
  pptx.layout = "LAYOUT_WIDE";  // 16:9 aspect ratio
  pptx.author = process.env.PPT_AUTHOR || "AI Agent";
  pptx.company = process.env.PPT_COMPANY || "PPT Design Skill";
  pptx.title = path.basename(outputPath, ".pptx");

  const images = (await fs.readdir(imageDir))
    .filter(f => f.endsWith(".png"))
    .sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));

  for (const imageName of images) {
    const slide = pptx.addSlide();
    slide.addImage({
      path: path.join(imageDir, imageName),
      x: 0,
      y: 0,
      w: 13.333,  // LAYOUT_WIDE width in inches
      h: 7.5     // LAYOUT_WIDE height in inches
    });
  }

  await pptx.writeFile({ fileName: outputPath });
}
```

--------------------------------

### Typography Import

Source: https://github.com/phlegonlabs/powerpoint-fancy-design/blob/main/skills/ppt-design/styles/style_c.md

Google Fonts link for the required typography stack.

```html
<link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Inter:wght@400;600;700;900&family=Noto+Sans+SC:wght@400;700;900&display=swap" rel="stylesheet">
```

--------------------------------

### Set PPT Export Metadata

Source: https://github.com/phlegonlabs/powerpoint-fancy-design/blob/main/CLAUDE.md

Configure environment variables for deck metadata before running the export scripts.

```bash
export PPT_AUTHOR="Your Name"
export PPT_COMPANY="Your Team"
```

--------------------------------

### Implement hero-cover layout

Source: https://github.com/phlegonlabs/powerpoint-fancy-design/blob/main/references/layout-prototypes.md

Use this grid layout for cover slides as a fallback when style-specific prototypes are not applicable.

```css
.layout-root.hero-cover {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 28px;
  align-content: stretch;
}
```

--------------------------------

### Generate HTML Slides

Source: https://context7.com/phlegonlabs/powerpoint-fancy-design/llms.txt

Uses the shell module to render a page plan into a complete HTML document with specific styling and chrome options.

```javascript
// scripts/slide_engine/shell.mjs
import { renderHtml } from "./scripts/slide_engine/shell.mjs";
import { styles } from "./scripts/slide_engine/styles.mjs";

const style = styles.find(s => s.id === "a");
const plan = {
  index: 1,
  role: "cover",
  layoutId: "cover-swiss-rail",
  metaLabel: "Cover",
  family: "editorial",
  blocks: [
    { text: "Annual Strategy Review" },
    { text: "Building Tomorrow's Platform Today" },
    { text: "A comprehensive roadmap for sustainable growth" },
    { text: "This presentation outlines our strategic priorities for the coming fiscal year." }
  ],
  yearRange: "2025-2026",
  notes: [
    { label: "Audience", text: "Executive Leadership Team" },
    { label: "Duration", text: "45 minutes" },
    { label: "Objective", text: "Alignment on Q1 initiatives" }
  ]
};

const options = {
  pageCount: 10,
  chromeMode: "bookend",  // all | bookend | none
  brandProfile: {
    showHeaderLogo: true,
    logoText: "ACME Corp",
    showFooterBrand: true,
    footerText: "Confidential"
  },
  presentationScenario: "brand-launch",
  qualityTier: "public-stage"
};

const html = renderHtml(style, plan, options);
// Returns complete HTML document with:
// - Style-specific CSS variables and shell styles
// - Google Fonts preconnect and stylesheet links
// - Slide container with theme class (.theme-a, .family-editorial)
// - Style ornaments (corners, decorative elements)
// - Safe zone indicators
// - Chrome labels (top/bottom) on cover/closing slides
// - Main frame with rendered layout content
```

--------------------------------

### Typography Import

Source: https://github.com/phlegonlabs/powerpoint-fancy-design/blob/main/skills/ppt-design/styles/style_b.md

Google Fonts link for Noto Serif SC, Noto Sans SC, DM Mono, Playfair Display, and Inter.

```html
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700;900&family=Noto+Sans+SC:wght@300;400;500&family=DM+Mono:wght@300;400;500&family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
```

--------------------------------

### Render Slides to PNG

Source: https://context7.com/phlegonlabs/powerpoint-fancy-design/llms.txt

Captures HTML slides as high-resolution PNG images using Playwright.

```bash
# Render all HTML slides in a directory to PNG
node scripts/render_slides.mjs --input ./outputs/html --output ./outputs/rendered

# Output:
# Rendered slide_01.html -> outputs/rendered/slide_01.png
# Rendered slide_02.html -> outputs/rendered/slide_02.png
# ...
```

```javascript
// Programmatic usage pattern
import fs from "node:fs/promises";
import path from "node:path";
import { chromium } from "playwright";

async function renderSlide(htmlPath, outputPath) {
  const browser = await chromium.launch();
  const context = await browser.newContext({
    viewport: { width: 1600, height: 900 },
    deviceScaleFactor: 2  // 3200x1800 output
  });
  const page = await context.newPage();

  await page.goto(`file://${htmlPath}`, { waitUntil: "load" });
  await page.waitForFunction(() => document.readyState === "complete");
  await page.evaluate(async () => {
    if (document.fonts?.ready) await document.fonts.ready;
  });

  const slide = page.locator(".slide");
  await slide.first().waitFor({ state: "visible" });
  await slide.first().screenshot({ path: outputPath, type: "png" });

  await browser.close();
}
```

--------------------------------

### Background Layering

Source: https://github.com/phlegonlabs/powerpoint-fancy-design/blob/main/styles/style_f.md

CSS for the base background color and the fine noise texture overlay.

```css
.card { background: #0e1118; }

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.12;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
  animation: grain 0.5s steps(4) infinite;
}
@keyframes grain {
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(-1px,1px)}
  50%{transform:translate(1px,-1px)}
  75%{transform:translate(-1px,1px)}
}
```

--------------------------------

### Implement metric-commentary layout

Source: https://github.com/phlegonlabs/powerpoint-fancy-design/blob/main/references/layout-prototypes.md

Use for metric slides where a single large number needs to dominate the visual hierarchy.

```css
.layout-root.metric-commentary {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 28px;
  align-items: stretch;
}
```

--------------------------------

### Apply Base Background

Source: https://github.com/phlegonlabs/powerpoint-fancy-design/blob/main/skills/ppt-design/styles/style_f.md

CSS for the primary dark background color.

```css
.card { background: #0e1118; }
```

--------------------------------

### Accessing Slide Styles

Source: https://context7.com/phlegonlabs/powerpoint-fancy-design/llms.txt

Retrieve style metadata, check theme compatibility, and inspect style properties using the style manifest.

```javascript
// scripts/slide_engine/styles.mjs
import { styles, darkThemes } from "./scripts/slide_engine/styles.mjs";

// Get all available styles
console.log(styles.map(s => `${s.id}: ${s.enName}`));
// Output:
// a: Swiss International
// b: East Asian Minimalism
// c: Risograph Print
// d: Bauhaus Geometry
// e: Organic Handcrafted
// f: Art Deco Luxury
// g: Neo Brutalism
// h: Retro Futurism
// i: Dark Editorial
// j: Memphis Pop

// Check if a style is dark-native (does not support white background)
const isDark = darkThemes.has("f"); // true - Art Deco Luxury is dark
const isLight = darkThemes.has("a"); // false - Swiss International supports white

// Access style properties
const styleA = styles.find(s => s.id === "a");
console.log({
  name: styleA.enName,           // "Swiss International"
  family: styleA.family,         // "editorial"
  coverPrototype: styleA.coverPrototype, // "cover-swiss-rail"
  fonts: styleA.fonts,           // Google Fonts URL
  allowedScenarios: styleA.allowedScenarios, // ["brand-launch", "investor-board", ...]
  seriousnessScore: styleA.seriousnessScore, // 9
});
```

--------------------------------

### Background Layering

Source: https://github.com/phlegonlabs/powerpoint-fancy-design/blob/main/styles/style_e.md

CSS for applying the base background color and the handmade paper texture overlay.

```css
.card { background: var(--bg); }
```

```css
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.38;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px;
  animation: grain 0.5s steps(3) infinite;
}
```

--------------------------------

### Implement comparison-bands layout

Source: https://github.com/phlegonlabs/powerpoint-fancy-design/blob/main/references/layout-prototypes.md

Provides a vertical stacking structure for comparison slides with multiple labeled groups.

```css
.layout-root.comparison-bands {
  display: grid;
  gap: 20px;
  align-content: start;
}
.band-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
```

--------------------------------

### Configure Background Modes and CSS Overrides

Source: https://context7.com/phlegonlabs/powerpoint-fancy-design/llms.txt

Defines supported background modes per style and provides CSS variable overrides to disable textures when white mode is active.

```javascript
// Background mode support by style
const backgroundSupport = {
  a: ["paper", "white"],  // Swiss International
  b: ["paper", "white"],  // East Asian Minimalism
  c: ["paper", "white"],  // Risograph Print
  d: ["paper", "white"],  // Bauhaus Geometry
  e: ["paper", "white"],  // Organic Handcrafted
  f: ["paper"],           // Art Deco Luxury (dark-native)
  g: ["paper", "white"],  // Neo Brutalism
  h: ["paper"],           // Retro Futurism (dark-native)
  i: ["paper"],           // Dark Editorial (dark-native)
  j: ["paper", "white"]   // Memphis Pop
};

// CSS variable overrides for white mode
const whiteModeOverrides = `
  .slide.white-mode {
    --bg: #ffffff;
    /* Remove paper grain and texture overlays */
  }
  .slide.white-mode::before {
    display: none; /* Disable paper texture pseudo-element */
  }
`;
```

--------------------------------

### Render Page Body with Layout Prototypes in JavaScript

Source: https://context7.com/phlegonlabs/powerpoint-fancy-design/llms.txt

Renders HTML structure for a page body using specified layout prototypes and content blocks. The function takes a plan object defining the layout and content.

```javascript
// scripts/slide_engine/renderers.mjs
import { renderPageBody } from "./scripts/slide_engine/renderers.mjs";

// Available layout prototypes:
// Cover: hero-cover, cover-swiss-rail, cover-zen-void, cover-riso-poster,
//        cover-bauhaus-frame, cover-organic-cluster, cover-deco-axis,
//        cover-brutal-stack, cover-horizon-signal, cover-editorial-ledger,
//        cover-memphis-splash
// Content: editorial-thesis, offset-timeline, story-rail, metric-commentary,
//          comparison-bands, card-constellation, process-ribbon, evidence-quote,
//          chronology-matrix, manifesto-wall, ledger-columns

const plan = {
  layoutId: "manifesto-wall",
  family: "editorial",
  componentDialect: "editorial",
  blocks: [
    { text: "Strategic Priorities" },
    { text: "Three Pillars for Growth" },
    { text: "Our strategy rests on three foundational commitments." }
  ],
  pillars: [
    { title: "Innovation", text: "Invest 15% of revenue in R&D to maintain technology leadership." },
    { title: "Expansion", text: "Enter three new markets by Q4 with localized offerings." },
    { title: "Efficiency", text: "Reduce operational costs by 20% through automation." }
  ],
  footer: "Implementation timeline: 18 months"
};

const html = renderPageBody(plan);
// Returns layout HTML structure ready for insertion into main-frame
```

--------------------------------

### Import Google Fonts for Neo-Brutalism

Source: https://github.com/phlegonlabs/powerpoint-fancy-design/blob/main/skills/ppt-design/styles/style_g.md

Imports necessary Google Fonts for display titles, body text, labels, and Chinese characters, supporting the neo-brutalist aesthetic.

```html
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400;700&family=Inter:wght@400;700;900&family=Noto+Sans+SC:wght@400;700;900&display=swap" rel="stylesheet">
```

--------------------------------

### Set PPT Export Metadata via Environment Variables

Source: https://github.com/phlegonlabs/powerpoint-fancy-design/blob/main/README.md

Configures the author and company information for PPTX exports using environment variables. If these variables are not set, default values will be used.

```powershell
$env:PPT_AUTHOR = "Your Name"
$env:PPT_COMPANY = "Your Team"
```

--------------------------------

### Color System Variables

Source: https://github.com/phlegonlabs/powerpoint-fancy-design/blob/main/styles/style_a.md

CSS custom properties for the primary paper-based color palette.

```css
--bg: #f0ebe2;            /* warm paper stock */
--ink: #2a2a30;           /* near-black, not pure black */
--accent: #b85038;        /* terracotta red */
--text-secondary: #8a8580; /* warm gray */
--text-muted: #b0aaa0;    /* pale gray */
--text-mid: #6a6560;      /* middle gray */
```

--------------------------------

### Apply Matte Paper Texture with CSS

Source: https://github.com/phlegonlabs/powerpoint-fancy-design/blob/main/skills/ppt-design/styles/style_d.md

Adds a subtle matte paper texture to an element using a CSS pseudo-element and a fractal noise SVG background. Includes animation for a grain effect.

```css
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.20;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
  animation: grain 0.4s steps(4) infinite;
}
```

--------------------------------

### Color System Variables

Source: https://github.com/phlegonlabs/powerpoint-fancy-design/blob/main/skills/ppt-design/styles/style_b.md

CSS custom properties defining the warm cream, deep indigo, and vermilion palette.

```css
--bg: #f5f0e6;            /* warm cream stock */
--ink: #2d3a5c;           /* deep indigo ink */
--accent: #c45a3c;        /* faded vermilion */
--text-secondary: #8a8580;
--text-muted: #c4beb4;
```

--------------------------------

### Implement Chrome and Main Frame CSS

Source: https://github.com/phlegonlabs/powerpoint-fancy-design/blob/main/references/safe-zone.md

CSS classes for positioning chrome labels and the main content frame within the slide.

```css
/* Chrome labels — include on cover and closing slides only when chrome=bookend */
.chrome-top {
  position: absolute;
  left: var(--edge, 96px);
  right: var(--edge, 96px);
  top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted, #999);
  z-index: 2;
}
.chrome-bottom {
  position: absolute;
  left: var(--edge, 96px);
  right: var(--edge, 96px);
  bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted, #999);
  z-index: 2;
}

/* Main content frame — ALWAYS present on every slide */
.main-frame {
  position: absolute;
  left: var(--edge, 96px);
  right: var(--edge, 96px);
  top: 108px;
  bottom: 96px;
  z-index: 3;
}
```

--------------------------------

### Create Dot Grid Background

Source: https://github.com/phlegonlabs/powerpoint-fancy-design/blob/main/skills/ppt-design/styles/style_j.md

Applies a radial gradient to create a dot pattern with a specified size and opacity. The dots are blue, with transparent spacing.

```css
.dot-grid {
  background: radial-gradient(circle, var(--blue) 3px, transparent 3px);
  background-size: 18px 18px;
  opacity: 0.6;
}
```

--------------------------------

### Fine Surface Noise Layer

Source: https://github.com/phlegonlabs/powerpoint-fancy-design/blob/main/skills/ppt-design/styles/style_i.md

CSS for a pseudo-element to add subtle, animated noise to the background, creating a fine surface texture. Includes SVG for noise generation and a keyframe animation.

```css
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.08;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
  animation: grain 0.6s steps(4) infinite;
}
@keyframes grain {
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(-1px,1px)}
  50%{transform:translate(1px,-1px)}
  75%{transform:translate(-1px,1px)}
}
```

--------------------------------

### Implement card-constellation layout

Source: https://github.com/phlegonlabs/powerpoint-fancy-design/blob/main/references/layout-prototypes.md

Utilizes a 12-column mosaic grid for synthesis slides, allowing cards to vary in width.

```css
.layout-root.card-constellation {
  display: grid;
  gap: 20px;
  align-content: start;
}
.mosaic-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(82px, auto);
  gap: 14px;
}
/* Card span variation: span-1=5col, span-2=3col, span-3=4col, span-4=6col */
```

--------------------------------

### Construct Fan Motif

Source: https://github.com/phlegonlabs/powerpoint-fancy-design/blob/main/skills/ppt-design/styles/style_f.md

SVG implementation of a layered fan ornament.

```html
<svg viewBox="0 0 200 100">
  <path d="M 100,100 L 20,0 A 80,80 0 0,1 180,0 Z" fill="none" stroke="var(--gold)" stroke-width="0.5" />
  <path d="M 100,100 L 40,10 A 60,60 0 0,1 160,10 Z" fill="none" stroke="var(--gold)" stroke-width="0.5" />
  <path d="M 100,100 L 60,20 A 40,40 0 0,1 140,20 Z" fill="none" stroke="var(--gold)" stroke-width="0.5" />
</svg>
```

--------------------------------

### Huge Headline and Ultra-Light Subtitle Styles

Source: https://github.com/phlegonlabs/powerpoint-fancy-design/blob/main/skills/ppt-design/styles/style_i.md

CSS for styling a large, high-contrast headline using Playfair Display and a delicate, uppercase subtitle using Inter. Includes font-family, weight, size, color, line-height, and letter-spacing.

```css
.headline {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 120px;
  color: var(--text-primary);
  line-height: 0.9;
  letter-spacing: -2px;
}
.subtitle {
  font-family: 'Inter', sans-serif;
  font-weight: 200;
  font-size: 20px;
  color: var(--text-secondary);
  letter-spacing: 6px;
  text-transform: uppercase;
  margin-top: 24px;
}
```

--------------------------------

### Color System CSS Variables

Source: https://github.com/phlegonlabs/powerpoint-fancy-design/blob/main/skills/ppt-design/styles/style_a.md

Sets up CSS variables for the primary and semantic color palette, avoiding forbidden colors like pure black or gradients.

```css
--bg: #f0ebe2;            /* warm paper stock */
--ink: #2a2a30;           /* near-black, not pure black */
--accent: #b85038;        /* terracotta red */
--text-secondary: #8a8580; /* warm gray */
--text-muted: #b0aaa0;    /* pale gray */
--text-mid: #6a6560;      /* middle gray */
```

```css
--red: #c44040;
--red-bg: rgba(196,64,64,0.03);
--green: #5a8a6a;
--green-bg: rgba(90,138,90,0.03);
```

--------------------------------

### Render HTML Slides to PNG

Source: https://github.com/phlegonlabs/powerpoint-fancy-design/blob/main/README.md

Converts HTML slide files from the specified input directory to PNG images in the output directory. This command is essential for generating visual slide assets.

```powershell
node .\scripts\render_slides.mjs --input .\outputs\html --output .\outputs\rendered
```

--------------------------------

### Export PNG Slides to PPTX

Source: https://github.com/phlegonlabs/powerpoint-fancy-design/blob/main/README.md

Packages rendered PNG slide images into a PowerPoint (PPTX) file. Specify the directory containing PNGs and the desired output file path for the PPTX deck.

```powershell
node .\scripts\export_ppt.mjs --input .\outputs\rendered --output .\outputs\ppt\deck.pptx
```

--------------------------------

### Define Canvas Dimensions and Padding

Source: https://github.com/phlegonlabs/powerpoint-fancy-design/blob/main/skills/ppt-design/styles/style_g.md

Specifies the recommended width, height, and padding for presentation slides to maintain a consistent layout.

```text
Width: 1600px
Height: 900px
Padding: 48-64px
```

--------------------------------

### Semantic Contrast Colors

Source: https://github.com/phlegonlabs/powerpoint-fancy-design/blob/main/styles/style_a.md

CSS variables for chart indicators and status highlights.

```css
--red: #c44040;
--red-bg: rgba(196,64,64,0.03);
--green: #5a8a6a;
--green-bg: rgba(90,138,90,0.03);
```

--------------------------------

### Color Palettes

Source: https://github.com/phlegonlabs/powerpoint-fancy-design/blob/main/styles/style_e.md

CSS variable definitions for the Forest, Earth, and Coast color schemes.

```css
--bg: #f4f0e8;
--primary: #7a8a6a;
--secondary: #c4a060;
--ink: #3a3a38;
--text-light: #9a9590;
```

```css
--bg: #f2ece2;
--primary: #a07850;
--secondary: #6a8a7a;
--ink: #3a3530;
--text-light: #a0988e;
```

```css
--bg: #f0ece6;
--primary: #5a7a8a;
--secondary: #c4a070;
--ink: #2a3a3a;
--text-light: #8a9090;
```

--------------------------------

### Washi Texture Overlay

Source: https://github.com/phlegonlabs/powerpoint-fancy-design/blob/main/skills/ppt-design/styles/style_b.md

Applies a noise-based texture to simulate fibrous paper using an SVG filter.

```css
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px;
  animation: grain 0.3s steps(3) infinite;
}
```

--------------------------------

### Define Color System

Source: https://github.com/phlegonlabs/powerpoint-fancy-design/blob/main/skills/ppt-design/styles/style_h.md

CSS variables defining the dark, neon-accented color palette.

```css
--bg-dark: #08080e;
--bg-mid: #0e1028;
--grid: #1a3a5a;
--grid-bright: #2a6a8a;
--neon-cyan: #40e8d0;
--neon-dim: #206860;
--text-primary: #d0dce8;
--text-secondary: #6880a0;
--horizon-glow: #c04060;
```

--------------------------------

### Base HTML Slide Template

Source: https://github.com/phlegonlabs/powerpoint-fancy-design/blob/main/SKILL.md

Use this boilerplate for every slide file. It includes the required 1600x900 canvas and standard chrome layout containers.

```html
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=1600">
  <title>Slide Title</title>
  <link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">
  <style>
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: #e0e0e0;
      overflow: hidden;
    }
    .slide {
      position: relative;
      width: 1600px;
      height: 900px;
      overflow: hidden;
    }
    .slide::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 50;
      pointer-events: none;
    }
    .chrome-top, .chrome-bottom {
      position: absolute;
      left: var(--edge, 96px);
      right: var(--edge, 96px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted, #999);
      z-index: 2;
    }
    .chrome-top { top: 28px; }
    .chrome-bottom { bottom: 24px; }
    .main-frame {
      position: absolute;
      left: var(--edge, 96px);
      right: var(--edge, 96px);
      top: 108px;
      bottom: 96px;
      z-index: 3;
    }
  </style>
</head>
<body>
  <div class="slide">
    <!-- Include chrome-top and chrome-bottom on cover and closing slides only when chrome=bookend -->
    <div class="chrome-top">
      <div class="style-id">STYLE A / Swiss International</div>
      <div class="meta-id">Cover</div>
    </div>
    <div class="chrome-bottom">
      <div class="meta-id">cover-swiss-rail</div>
      <div class="page-id">01 / 05</div>
    </div>
    <!-- Main content frame — present on EVERY slide -->
    <main class="main-frame">
      <!-- All primary content goes here -->
    </main>
  </div>
</body>
</html>
```