@opendirectory.dev/skills 0.1.57 → 0.1.59

package/skills/graphic-ebook/references/style-presets.md

@@ -0,0 +1,346 @@
+# Style Presets — graphic-case-study
+
+9 business-oriented style presets. Each is fully self-contained -- complete CSS token set, no "derive from" chains.
+
+Choose based on the vendor's brand and audience. When in doubt: clean-slate for enterprise B2B, midnight-editorial for tech/AI companies, warm-earth for agencies and services.
+
+---
+
+## 1. clean-slate
+
+**Best for:** Enterprise B2B, sales teams, customer-facing materials, any audience that expects professionalism
+**Feeling:** Trustworthy, clear, confident, enterprise-safe
+
+```
+Background:       #FFFFFF outer / #FFFFFF page / #F8F8F8 alt sections / #F4F4F4 footer
+Text primary:     #111111
+Text secondary:   #555555
+Text muted:       #999999
+Accent:           #0F172A  (near-black navy)
+Accent light:     #E0F2FE  (light blue for pill/badge backgrounds)
+Accent text:      #FFFFFF
+Divider:          #E8E8E8
+Card border:      #E0E0E0
+Card radius:      16px
+Card shadow:      0 2px 8px rgba(0, 0, 0, 0.06)
+
+Display font:     'Plus Jakarta Sans', Arial, Helvetica, sans-serif
+Body font:        'Plus Jakarta Sans', Arial, Helvetica, sans-serif
+Google Fonts:     https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;800&display=swap
+
+Display weight:   800
+Body weight:      400 / 500
+```
+
+**Signature elements:**
+- Rounded card containers (`border-radius: 16px`) on all fact cells, feature cards, stat containers
+- Badge pills for category labels (`border-radius: 100px; background: #E0F2FE; color: #0F172A; padding: 0.2em 0.8em`)
+- Generous whitespace -- push toward maximum clamp values
+- Hero stat in dark `#0F172A` (high contrast, authoritative -- no color distraction)
+- Cover background: `#0F172A` full dark (inversion for premium feel)
+- Closing CTA: `#0F172A` full bg with white headline and white CTA
+
+---
+
+## 2. midnight-editorial
+
+**Best for:** Tech, AI, developer-focused companies, premium B2B, thought leadership
+**Feeling:** Editorial authority, premium, considered
+
+```
+Background:       #0A0A0A outer / #111111 page / #1A1A1A elevated cards / #080808 footer
+Text primary:     #F2F2F2
+Text secondary:   #AAAAAA
+Text muted:       #555555
+Accent:           #D8F90A  (yellow-green)
+Accent text:      #0A0A0A  (dark text on accent)
+Divider:          #2A2A2A
+Card border:      #222222
+
+Display font:     'Instrument Serif', Georgia, 'Times New Roman', serif
+Body font:        Inter, Arial, Helvetica, sans-serif
+Google Fonts:     https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&display=swap
+
+Display weight:   400
+Body weight:      400 / 600
+```
+
+**Signature elements:**
+- Thin `<hr>` separators (`border: none; border-top: 1px solid #2A2A2A; width: 40px; margin: 0`)
+- Oversized section numbers at `opacity: 0.06` as absolute background elements
+- Instrument Serif italic on testimonial quotes (literary weight)
+- Hero stat number in `#D8F90A` accent
+- Cover: `#D8F90A` full-bg inversion with `#0A0A0A` text (unmissable)
+- Closing CTA: `#D8F90A` full bg with `#0A0A0A` text
+
+---
+
+## 3. matt-gray
+
+**Best for:** Internal business reviews, board materials, professional presentations to mixed audiences
+**Feeling:** Safe, professional, accessible, clean
+
+```
+Background:       #F5F5F5 outer / #FFFFFF page / #EEEEEE section alt / #F8F8F8 footer
+Text primary:     #1A1A1A
+Text secondary:   #444444
+Text muted:       #888888
+Accent:           #2563EB  (blue)
+Accent text:      #FFFFFF
+Divider:          #E5E5E5
+Card border:      #DDDDDD
+Card shadow:      0 1px 3px rgba(0, 0, 0, 0.08)
+
+Display font:     'DM Sans', Arial, Helvetica, sans-serif
+Body font:        'DM Sans', Arial, Helvetica, sans-serif
+Google Fonts:     https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700;800&display=swap
+
+Display weight:   700
+Body weight:      400 / 500
+```
+
+**Signature elements:**
+- 4px left border on section headings and fact cells (`border-left: 4px solid #2563EB; padding-left: 1rem`)
+- Subtle drop shadow on stat containers
+- Hero stat in accent blue `#2563EB`
+- Section headings use `#EEEEEE` alt background
+- Closing CTA: `#1A1A1A` full dark bg with white text and blue button
+
+---
+
+## 4. brutalist
+
+**Best for:** Standout sales materials, design-forward agencies, brands that want to be remembered
+**Feeling:** Direct, raw, confident, uncompromising
+
+```
+Background:       #FFFFFF outer / #FFFFFF page
+Text primary:     #000000
+Text secondary:   #333333
+Accent:           #FF3300  (red) or #FFE500 (yellow)
+Accent text:      #000000
+Divider:          #000000  (solid black)
+Border:           3px solid #000000  (heavy)
+Border-radius:    0  (zero everywhere -- absolute rule)
+
+Display font:     'Archivo Black', Arial Black, Arial, sans-serif
+Body font:        'Space Grotesk', Arial, sans-serif
+Google Fonts:     https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;700&display=swap
+
+Display weight:   900
+Body weight:      400 / 700
+```
+
+**Signature elements:**
+- Heavy borders everywhere: `border: 3px solid #000000` on ALL cards, tables, containers, page sections
+- Zero border-radius on every element -- this is a hard rule, never soften
+- Oversized section numbers fully visible (`opacity: 1`) in accent color
+- Cover: accent color full bg (`#FF3300` or `#FFE500`) with `#000000` text
+- Hero stat in accent color, extreme size
+- Closing CTA: `#000000` full bg with white text and accent-color button/border
+
+**DO NOT apply rounded corners, gradients, or drop shadows to brutalist case studies.**
+
+---
+
+## 5. mint-pixel-corporate
+
+**Best for:** SaaS sales, product-focused companies, tech startups, growth-stage B2B
+**Feeling:** Fresh, modern, startup-professional
+
+```
+Background:       #F0FAF7 outer / #FFFFFF page / #E8F5F0 alt sections / #F0FAF7 footer
+Text primary:     #1A2E2A
+Text secondary:   #4A6B62
+Text muted:       #7A9B92
+Accent:           #00B894  (mint)
+Accent text:      #1A2E2A
+Divider:          #D1E8E1
+Card border:      #C5DFD7
+Card radius:      10px
+
+Display font:     'Manrope', Arial, Helvetica, sans-serif
+Body font:        'Manrope', Arial, Helvetica, sans-serif
+Google Fonts:     https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&display=swap
+
+Display weight:   800
+Body weight:      400 / 500
+```
+
+**Signature elements:**
+- Mint accent pills for feature labels and category tags (`border-radius: 100px; background: #00B894; color: #1A2E2A`)
+- CSS `radial-gradient` dot pattern on cover background:
+  ```css
+  background-image: radial-gradient(circle, #00B894 1px, transparent 1px);
+  background-size: 24px 24px;
+  background-color: #1A2E2A;
+  ```
+- Hero stat in mint `#00B894`
+- Feature cards with mint border (`border: 2px solid #00B894`)
+- Closing CTA: `#1A2E2A` dark bg with dot pattern + mint text and white button
+
+---
+
+## 6. product-minimal
+
+**Best for:** Product companies, design-forward B2B, companies presenting to design-savvy buyers
+**Feeling:** Maximum whitespace, purposeful restraint, design system precision
+
+```
+Background:       #FAFAFA outer / #FAFAFA page / #F4F4F4 alt / #F0F0F0 footer
+Text primary:     #18181B
+Text secondary:   #71717A
+Text muted:       #A1A1AA
+Accent:           #8B5CF6  (violet)
+Accent text:      #FFFFFF
+Divider:          #E4E4E7
+Card shadow:      0 1px 3px rgba(0, 0, 0, 0.08)
+Card radius:      12px
+
+Display font:     'Syne', Arial, Helvetica, sans-serif
+Body font:        'IBM Plex Sans', Arial, Helvetica, sans-serif
+Google Fonts:     https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=IBM+Plex+Sans:wght@400;500;600&display=swap
+
+Display weight:   700-800
+Body weight:      400 / 500
+```
+
+**Signature elements:**
+- Single accent element per section rule: violet appears in AT MOST ONE element per section
+- Subtle CSS drop shadow on cards (`box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08)`)
+- Very generous padding (use maximum clamp values everywhere)
+- Hero stat in violet `#8B5CF6` with thin violet top-border on stat container
+- Cover: `#18181B` full dark bg with Syne display font in white
+- Closing CTA: violet background (`#8B5CF6`) with white text
+
+---
+
+## 7. magazine-red
+
+**Best for:** Marketing agencies, bold companies, brand-forward case studies, attention-commanding materials
+**Feeling:** Authoritative, editorial, high energy
+
+```
+Background:       #1A1A1A outer / #111111 page / #1E1E1E alt / #0D0D0D footer
+Text primary:     #FFFFFF
+Text secondary:   #CCCCCC
+Text muted:       #888888
+Accent:           #E63329  (red)
+Divider:          #2A2A2A
+
+Display font:     'Fraunces', Georgia, 'Times New Roman', serif
+Body font:        'Work Sans', Arial, Helvetica, sans-serif
+Google Fonts:     https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,900;1,900&family=Work+Sans:wght@400;500;600&display=swap
+
+Display weight:   900
+Body weight:      400 / 500
+```
+
+**Signature elements:**
+- 8px full-width red band separator: `<div style="width:100%; height:8px; background:#E63329; margin: clamp(1rem, 2vw, 2rem) 0">`
+- Editorial section numbers at `opacity: 0.25` in red
+- Testimonial section inverted to white bg with dark text (only white section in the deck)
+- Fraunces italic for quote text (extreme editorial weight)
+- Hero stat in red `#E63329`, large
+- Closing CTA: full red background (`#E63329`) with white text
+
+---
+
+## 8. soft-cloud
+
+**Best for:** Onboarding materials, customer education, HR/people companies, approachable SaaS
+**Feeling:** Friendly, accessible, soft, welcoming
+
+```
+Background:       #EEF2FF outer / #FFFFFF page / #F5F3FF alt / #EEF2FF footer
+Text primary:     #1E1B4B
+Text secondary:   #4C4A7B
+Text muted:       #9896C0
+Accent:           #6366F1  (indigo)
+Accent light:     #E0E7FF  (light indigo for card backgrounds)
+Accent text:      #FFFFFF
+Divider:          #DDD6FE
+Card radius:      24px
+Card shadow:      0 4px 16px rgba(99, 102, 241, 0.08)
+
+Display font:     'Outfit', Arial, Helvetica, sans-serif
+Body font:        'Outfit', Arial, Helvetica, sans-serif
+Google Fonts:     https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap
+
+Display weight:   700
+Body weight:      400 / 500
+```
+
+**Signature elements:**
+- Generous border-radius (`border-radius: 24px`) on all cards, callout blocks, stat containers
+- Gradient section backgrounds: `linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 50%, #DDD6FE 100%)`
+- Badge pills on key points (`border-radius: 100px; background: #E0E7FF; color: #6366F1`)
+- Hero stat in indigo `#6366F1` on `#F5F3FF` elevated card bg
+- Closing CTA: indigo gradient (`linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%)`) with white text
+
+---
+
+## 9. warm-earth (case-study-exclusive)
+
+**Best for:** Agencies, consultancies, service businesses, health/education tech, companies that sell on trust
+**Feeling:** Trusted, grounded, human, warm authority
+
+```
+Background:       #FDF6EF outer / #FFFFFF page / #FAF0E4 alt sections / #F5EBD8 footer
+Text primary:     #2C1A0E
+Text secondary:   #6B4C30
+Text muted:       #A08060
+Accent:           #D4622A  (burnt orange)
+Accent light:     #FDE8D8  (peach -- for pill/badge backgrounds)
+Accent text:      #FFFFFF
+Divider:          #E8D5BF
+Card border:      #E0C9A8
+Card radius:      10px
+Card shadow:      0 2px 8px rgba(44, 26, 14, 0.06)
+
+Display font:     'Lora', Georgia, 'Times New Roman', serif
+Body font:        'Source Sans 3', Arial, Helvetica, sans-serif
+Google Fonts:     https://fonts.googleapis.com/css2?family=Lora:wght@400;600;700&family=Source+Sans+3:wght@400;600&display=swap
+
+Display weight:   700
+Body weight:      400 / 600
+```
+
+**Signature elements:**
+- Warm off-white background (`#FDF6EF`) -- not pure white, not gray. The warmth starts with the canvas.
+- Accent pills in peach (`background: #FDE8D8; color: #D4622A; border-radius: 100px`) for category labels
+- **Drop cap on challenge page opening paragraph:**
+  ```css
+  .challenge-context::first-letter {
+    font-family: 'Lora', Georgia, serif;
+    font-size: clamp(3rem, 7vw, 5rem);
+    float: left;
+    margin: 0.05em 0.12em 0 0;
+    color: var(--accent);
+    line-height: 0.8;
+  }
+  ```
+- Hero stat in burnt orange `#D4622A`
+- Section headings: `border-left: 4px solid #D4622A; padding-left: 1rem` (no full-background inversion -- subtle accent)
+- Cover: warm-dark background `#2C1A0E` with off-white text `#F5EBD8` and burnt-orange accent label
+- Closing CTA: `#2C1A0E` full dark bg with `#FDE8D8` peach headline, white CTA button with burnt orange border
+
+---
+
+## DO NOT USE -- Style Slop Checklist
+
+Before outputting any HTML, verify none of these are present:
+
+| Pattern | Why it's wrong |
+|---|---|
+| Inter as display font | Zero typographic character -- reads as default AI output |
+| Purple-to-blue gradient on white background | Most overused AI aesthetic -- immediately signals undesigned |
+| Every section same background color | No visual rhythm -- the PDF reads as one flat block |
+| Identical section layouts throughout | No typographic thinking -- copy-pasted template feel |
+| `box-shadow` on everything | Overused "depth" signal with no real depth |
+| `border-radius: 8px` on everything (especially brutalist) | Softening that fights the style's aesthetic intent |
+| Accent color on 5+ elements per section | Over-branded, destroys scarcity = destroys premium feel |
+| Helvetica Neue / Arial as display font | Generic -- no personality at display size |
+| Stat numbers at body text size | Breaks the entire purpose of the results section |
+| "Thank You" as closing-cta headline | No action, no contact info = completely wasted page |
+| Logo placeholder box with no styling | Unfinished -- use CSS initials at minimum |

package/skills/graphic-ebook/scripts/export-pdf.sh

@@ -0,0 +1,361 @@
+#!/usr/bin/env bash
+# export-pdf.sh — Export an HTML presentation to PDF
+#
+# Usage:
+#   bash scripts/export-pdf.sh <path-to-html> [output.pdf]
+#
+# Examples:
+#   bash scripts/export-pdf.sh ./my-deck/index.html
+#   bash scripts/export-pdf.sh ./presentation.html ./presentation.pdf
+#
+# What this does:
+#   1. Starts a local server to serve the HTML (fonts and assets need HTTP)
+#   2. Uses Playwright to screenshot each slide at 1920x1080
+#   3. Combines all screenshots into a single PDF
+#   4. Cleans up the server and temp files
+#
+# The PDF preserves colors, fonts, and layout — but not animations.
+# Perfect for email attachments, printing, or embedding in documents.
+set -euo pipefail
+
+# ─── Colors ────────────────────────────────────────────────
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+CYAN='\033[0;36m'
+YELLOW='\033[1;33m'
+BOLD='\033[1m'
+NC='\033[0m'
+
+info()  { echo -e "${CYAN}ℹ${NC} $*"; }
+ok()    { echo -e "${GREEN}✓${NC} $*"; }
+warn()  { echo -e "${YELLOW}⚠${NC} $*"; }
+err()   { echo -e "${RED}✗${NC} $*" >&2; }
+
+# ─── Parse flags ──────────────────────────────────────────
+
+# Default resolution: 1920x1080 (full HD, ~1-2MB per slide)
+# Compact resolution: 1280x720 (HD, ~50-70% smaller files)
+# Portrait resolution: 1200x1697 (A4 portrait — for case studies and PDFs)
+VIEWPORT_W=1920
+VIEWPORT_H=1080
+COMPACT=false
+PORTRAIT=false
+
+POSITIONAL=()
+for arg in "$@"; do
+    case $arg in
+        --compact)
+            COMPACT=true
+            VIEWPORT_W=1280
+            VIEWPORT_H=720
+            ;;
+        --portrait)
+            PORTRAIT=true
+            VIEWPORT_W=1200
+            VIEWPORT_H=1697
+            ;;
+        *)
+            POSITIONAL+=("$arg")
+            ;;
+    esac
+done
+set -- "${POSITIONAL[@]}"
+
+# ─── Input validation ─────────────────────────────────────
+
+if [[ $# -lt 1 ]]; then
+    err "Usage: bash scripts/export-pdf.sh <path-to-html> [output.pdf] [--compact|--portrait]"
+    err ""
+    err "Examples:"
+    err "  bash scripts/export-pdf.sh ./my-deck/index.html"
+    err "  bash scripts/export-pdf.sh ./presentation.html ./slides.pdf"
+    err "  bash scripts/export-pdf.sh ./presentation.html --compact    # smaller file size (1280×720)"
+    err "  bash scripts/export-pdf.sh ./case-study/index.html --portrait  # A4 portrait (1200×1697)"
+    exit 1
+fi
+
+INPUT_HTML="$1"
+if [[ ! -f "$INPUT_HTML" ]]; then
+    err "File not found: $INPUT_HTML"
+    exit 1
+fi
+
+# Resolve to absolute path
+INPUT_HTML=$(cd "$(dirname "$INPUT_HTML")" && pwd)/$(basename "$INPUT_HTML")
+
+# Output PDF path: use second argument or derive from input name
+if [[ $# -ge 2 ]]; then
+    OUTPUT_PDF="$2"
+else
+    OUTPUT_PDF="$(dirname "$INPUT_HTML")/$(basename "$INPUT_HTML" .html).pdf"
+fi
+
+# Resolve output to absolute path
+OUTPUT_DIR=$(dirname "$OUTPUT_PDF")
+mkdir -p "$OUTPUT_DIR"
+OUTPUT_PDF="$OUTPUT_DIR/$(basename "$OUTPUT_PDF")"
+
+echo ""
+echo -e "${BOLD}╔══════════════════════════════════════╗${NC}"
+echo -e "${BOLD}║       Export Slides to PDF            ║${NC}"
+echo -e "${BOLD}╚══════════════════════════════════════╝${NC}"
+echo ""
+
+# ─── Step 1: Check dependencies ───────────────────────────
+
+info "Checking dependencies..."
+
+if ! command -v npx &>/dev/null; then
+    err "Node.js is required but not installed."
+    err ""
+    err "Install Node.js:"
+    err "  macOS:   brew install node"
+    err "  or visit https://nodejs.org and download the installer"
+    exit 1
+fi
+
+ok "Node.js found"
+
+# ─── Step 2: Create the export script ─────────────────────
+
+# We use a temporary Node.js script with Playwright to:
+# 1. Start a local server (so fonts load correctly)
+# 2. Navigate to each slide
+# 3. Screenshot each slide at 1920x1080 (16:9 landscape)
+# 4. Combine into a single PDF
+
+TEMP_DIR=$(mktemp -d)
+TEMP_SCRIPT="$TEMP_DIR/export-slides.mjs"
+
+# Figure out which directory to serve (the folder containing the HTML)
+SERVE_DIR=$(dirname "$INPUT_HTML")
+HTML_FILENAME=$(basename "$INPUT_HTML")
+
+cat > "$TEMP_SCRIPT" << 'EXPORT_SCRIPT'
+// export-slides.mjs — Vector PDF export via Playwright
+//
+// Uses page.pdf() directly on the live HTML — produces true vector PDF
+// with crisp text, real fonts, and CSS backgrounds. No screenshots.
+
+import { chromium } from 'playwright';
+import { createServer } from 'http';
+import { readFileSync } from 'fs';
+import { join, extname } from 'path';
+
+const SERVE_DIR = process.argv[2];
+const HTML_FILE = process.argv[3];
+const OUTPUT_PDF = process.argv[4];
+const VP_WIDTH  = parseInt(process.argv[5]) || 1920;
+const VP_HEIGHT = parseInt(process.argv[6]) || 1080;
+
+// ─── Static file server (needed for Google Fonts + relative assets) ──
+
+const MIME_TYPES = {
+  '.html': 'text/html',
+  '.css':  'text/css',
+  '.js':   'application/javascript',
+  '.json': 'application/json',
+  '.png':  'image/png',
+  '.jpg':  'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.gif':  'image/gif',
+  '.svg':  'image/svg+xml',
+  '.webp': 'image/webp',
+  '.woff': 'font/woff',
+  '.woff2':'font/woff2',
+  '.ttf':  'font/ttf',
+  '.eot':  'application/vnd.ms-fontobject',
+};
+
+const server = createServer((req, res) => {
+  const decodedUrl = decodeURIComponent(req.url);
+  const filePath = join(SERVE_DIR, decodedUrl === '/' ? HTML_FILE : decodedUrl);
+  try {
+    const content = readFileSync(filePath);
+    const ext = extname(filePath).toLowerCase();
+    res.writeHead(200, { 'Content-Type': MIME_TYPES[ext] || 'application/octet-stream' });
+    res.end(content);
+  } catch {
+    res.writeHead(404);
+    res.end('Not found');
+  }
+});
+
+const port = await new Promise((resolve) => {
+  server.listen(0, () => resolve(server.address().port));
+});
+
+console.log(`  Local server on port ${port}`);
+
+// ─── Load page ────────────────────────────────────────────
+
+const browser = await chromium.launch();
+const page = await browser.newPage({
+  viewport: { width: VP_WIDTH, height: VP_HEIGHT },
+});
+
+await page.goto(`http://localhost:${port}/`, { waitUntil: 'networkidle' });
+await page.evaluate(() => document.fonts.ready);
+await page.waitForTimeout(1000);
+
+// Count slides
+const slideCount = await page.evaluate(() =>
+  document.querySelectorAll('.slide').length
+);
+
+console.log(`  Found ${slideCount} slides`);
+
+if (slideCount === 0) {
+  console.error('  ERROR: No .slide elements found.');
+  console.error('  Make sure your HTML uses <section class="slide"> or <div class="slide">.');
+  await browser.close();
+  server.close();
+  process.exit(1);
+}
+
+// ─── Force all animation states to final visible state ────
+
+await page.evaluate(() => {
+  // Trigger intersection observer targets
+  document.querySelectorAll('.slide').forEach(s => s.classList.add('visible'));
+  // Force reveal + stat-item animations to completed state
+  document.querySelectorAll('.reveal, .stat-item').forEach(el => {
+    el.style.setProperty('opacity', '1', 'important');
+    el.style.setProperty('transform', 'none', 'important');
+    el.style.setProperty('transition', 'none', 'important');
+  });
+});
+
+// ─── Inject print layout CSS ──────────────────────────────
+// Each .slide becomes exactly one page in the PDF.
+// @page sets the physical page size to match the ebook canvas.
+// overflow: visible on html/body lets Playwright see all slides.
+
+await page.addStyleTag({ content: `
+  @page {
+    size: ${VP_WIDTH}px ${VP_HEIGHT}px;
+    margin: 0;
+  }
+  @media print {
+    html, body {
+      overflow: visible !important;
+      height: auto !important;
+      width: ${VP_WIDTH}px !important;
+      scroll-snap-type: none !important;
+    }
+    .slide {
+      page-break-after: always !important;
+      break-after: page !important;
+      width: ${VP_WIDTH}px !important;
+      height: ${VP_HEIGHT}px !important;
+      min-height: ${VP_HEIGHT}px !important;
+      max-height: ${VP_HEIGHT}px !important;
+      overflow: hidden !important;
+      position: relative !important;
+      display: block !important;
+      scroll-snap-align: none !important;
+    }
+    .slide:last-child {
+      page-break-after: auto !important;
+      break-after: auto !important;
+    }
+  }
+` });
+
+await page.waitForTimeout(200);
+
+// ─── Export as vector PDF ─────────────────────────────────
+// page.pdf() renders the live DOM — text stays as vectors,
+// fonts stay as fonts, backgrounds render via printBackground.
+
+console.log(`  Generating vector PDF...`);
+
+await page.pdf({
+  path: OUTPUT_PDF,
+  width:  `${VP_WIDTH}px`,
+  height: `${VP_HEIGHT}px`,
+  printBackground: true,
+  margin: { top: 0, right: 0, bottom: 0, left: 0 },
+});
+
+await browser.close();
+server.close();
+
+console.log(`  ✓ PDF saved to: ${OUTPUT_PDF}`);
+EXPORT_SCRIPT
+
+# ─── Step 3: Install Playwright in temp directory ──────────
+# We install Playwright locally in the temp dir so the Node script can import it.
+# This avoids polluting global packages and ensures the script is self-contained.
+
+info "Setting up Playwright (headless browser for screenshots)..."
+info "This may take a moment on first run..."
+echo ""
+
+cd "$TEMP_DIR"
+
+# Create a minimal package.json so npm install works
+cat > "$TEMP_DIR/package.json" << 'PKG'
+{ "name": "slide-export", "private": true, "type": "module" }
+PKG
+
+# Install Playwright into the temp directory
+npm install playwright &>/dev/null || {
+    err "Failed to install Playwright."
+    err "Try running: npm install playwright"
+    rm -rf "$TEMP_DIR"
+    exit 1
+}
+
+# Ensure Chromium browser binary is downloaded
+npx playwright install chromium 2>/dev/null || {
+    err "Failed to install Chromium browser for Playwright."
+    err "Try running manually: npx playwright install chromium"
+    rm -rf "$TEMP_DIR"
+    exit 1
+}
+ok "Playwright ready"
+echo ""
+
+# ─── Step 4: Run the export ───────────────────────────────
+
+info "Exporting slides to PDF..."
+echo ""
+
+if [[ "$COMPACT" == "true" ]]; then
+    info "Using compact mode (1280×720) for smaller file size"
+fi
+if [[ "$PORTRAIT" == "true" ]]; then
+    info "Using portrait mode (1200×1697) — A4 portrait format"
+fi
+
+node "$TEMP_SCRIPT" "$SERVE_DIR" "$HTML_FILENAME" "$OUTPUT_PDF" "$VIEWPORT_W" "$VIEWPORT_H" || {
+    err "PDF export failed."
+    rm -rf "$TEMP_DIR"
+    exit 1
+}
+
+# ─── Step 5: Cleanup and success ──────────────────────────
+
+rm -rf "$TEMP_DIR"
+
+echo ""
+echo -e "${BOLD}════════════════════════════════════════${NC}"
+ok "PDF exported successfully!"
+echo ""
+echo -e "  ${BOLD}File:${NC}  $OUTPUT_PDF"
+echo ""
+FILE_SIZE=$(du -h "$OUTPUT_PDF" | cut -f1 | xargs)
+echo "  Size: $FILE_SIZE"
+echo ""
+echo "  This PDF works everywhere — email, Slack, Notion, print."
+echo "  Note: Animations are not preserved (it's a static export)."
+echo -e "${BOLD}════════════════════════════════════════${NC}"
+echo ""
+
+# Open the PDF automatically
+if command -v open &>/dev/null; then
+    open "$OUTPUT_PDF"
+elif command -v xdg-open &>/dev/null; then
+    xdg-open "$OUTPUT_PDF"
+fi