Add comprehensive viewport fitting requirements

- Add dedicated "CRITICAL: Viewport Fitting Requirements" section to SKILL.md
- Define content density limits per slide type (max bullets, cards, etc.)
- Add complete mandatory CSS architecture for viewport fitting
- Include height-based breakpoints (700px, 600px, 500px)
- Add overflow prevention checklist
- Update STYLE_PRESETS.md with expanded viewport fitting section
- Add troubleshooting guide for common viewport issues
- Emphasize "split slides, never scroll" philosophy

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

SKILL.md

@@ -13,6 +13,235 @@ Create zero-dependency, animation-rich HTML presentations that run entirely in t
 2. **Show, Don't Tell** — People don't know what they want until they see it. Generate visual previews, not abstract choices.
 3. **Distinctive Design** — Avoid generic "AI slop" aesthetics. Every presentation should feel custom-crafted.
 4. **Production Quality** — Code should be well-commented, accessible, and performant.
+5. **Viewport Fitting (CRITICAL)** — Every slide MUST fit exactly within the viewport. No scrolling within slides, ever. This is non-negotiable.
+
+---
+
+## CRITICAL: Viewport Fitting Requirements
+
+**This section is mandatory for ALL presentations. Every slide must be fully visible without scrolling on any screen size.**
+
+### The Golden Rule
+
+```
+Each slide = exactly one viewport height (100vh/100dvh)
+Content overflows? → Split into multiple slides or reduce content
+Never scroll within a slide.
+```
+
+### Content Density Limits
+
+To guarantee viewport fitting, enforce these limits per slide:
+
+| Slide Type | Maximum Content |
+|------------|-----------------|
+| Title slide | 1 heading + 1 subtitle + optional tagline |
+| Content slide | 1 heading + 4-6 bullet points OR 1 heading + 2 paragraphs |
+| Feature grid | 1 heading + 6 cards maximum (2x3 or 3x2 grid) |
+| Code slide | 1 heading + 8-10 lines of code maximum |
+| Quote slide | 1 quote (max 3 lines) + attribution |
+| Image slide | 1 heading + 1 image (max 60vh height) |
+
+**If content exceeds these limits → Split into multiple slides**
+
+### Required CSS Architecture
+
+Every presentation MUST include this base CSS for viewport fitting:
+
+```css
+/* ===========================================
+   VIEWPORT FITTING: MANDATORY BASE STYLES
+   These styles MUST be included in every presentation.
+   They ensure slides fit exactly in the viewport.
+   =========================================== */
+
+/* 1. Lock html/body to viewport */
+html, body {
+    height: 100%;
+    overflow-x: hidden;
+}
+
+html {
+    scroll-snap-type: y mandatory;
+    scroll-behavior: smooth;
+}
+
+/* 2. Each slide = exact viewport height */
+.slide {
+    width: 100vw;
+    height: 100vh;
+    height: 100dvh; /* Dynamic viewport height for mobile browsers */
+    overflow: hidden; /* CRITICAL: Prevent ANY overflow */
+    scroll-snap-align: start;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+/* 3. Content container with flex for centering */
+.slide-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    max-height: 100%;
+    overflow: hidden; /* Double-protection against overflow */
+    padding: var(--slide-padding);
+}
+
+/* 4. ALL typography uses clamp() for responsive scaling */
+:root {
+    /* Titles scale from mobile to desktop */
+    --title-size: clamp(1.5rem, 5vw, 4rem);
+    --h2-size: clamp(1.25rem, 3.5vw, 2.5rem);
+    --h3-size: clamp(1rem, 2.5vw, 1.75rem);
+
+    /* Body text */
+    --body-size: clamp(0.75rem, 1.5vw, 1.125rem);
+    --small-size: clamp(0.65rem, 1vw, 0.875rem);
+
+    /* Spacing scales with viewport */
+    --slide-padding: clamp(1rem, 4vw, 4rem);
+    --content-gap: clamp(0.5rem, 2vw, 2rem);
+    --element-gap: clamp(0.25rem, 1vw, 1rem);
+}
+
+/* 5. Cards/containers use viewport-relative max sizes */
+.card, .container, .content-box {
+    max-width: min(90vw, 1000px);
+    max-height: min(80vh, 700px);
+}
+
+/* 6. Lists auto-scale with viewport */
+.feature-list, .bullet-list {
+    gap: clamp(0.4rem, 1vh, 1rem);
+}
+
+.feature-list li, .bullet-list li {
+    font-size: var(--body-size);
+    line-height: 1.4;
+}
+
+/* 7. Grids adapt to available space */
+.grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
+    gap: clamp(0.5rem, 1.5vw, 1rem);
+}
+
+/* 8. Images constrained to viewport */
+img, .image-container {
+    max-width: 100%;
+    max-height: min(50vh, 400px);
+    object-fit: contain;
+}
+
+/* ===========================================
+   RESPONSIVE BREAKPOINTS
+   Aggressive scaling for smaller viewports
+   =========================================== */
+
+/* Short viewports (< 700px height) */
+@media (max-height: 700px) {
+    :root {
+        --slide-padding: clamp(0.75rem, 3vw, 2rem);
+        --content-gap: clamp(0.4rem, 1.5vw, 1rem);
+        --title-size: clamp(1.25rem, 4.5vw, 2.5rem);
+        --h2-size: clamp(1rem, 3vw, 1.75rem);
+    }
+}
+
+/* Very short viewports (< 600px height) */
+@media (max-height: 600px) {
+    :root {
+        --slide-padding: clamp(0.5rem, 2.5vw, 1.5rem);
+        --content-gap: clamp(0.3rem, 1vw, 0.75rem);
+        --title-size: clamp(1.1rem, 4vw, 2rem);
+        --body-size: clamp(0.7rem, 1.2vw, 0.95rem);
+    }
+
+    /* Hide non-essential elements */
+    .nav-dots, .keyboard-hint, .decorative {
+        display: none;
+    }
+}
+
+/* Extremely short (landscape phones, < 500px height) */
+@media (max-height: 500px) {
+    :root {
+        --slide-padding: clamp(0.4rem, 2vw, 1rem);
+        --title-size: clamp(1rem, 3.5vw, 1.5rem);
+        --h2-size: clamp(0.9rem, 2.5vw, 1.25rem);
+        --body-size: clamp(0.65rem, 1vw, 0.85rem);
+    }
+}
+
+/* Narrow viewports (< 600px width) */
+@media (max-width: 600px) {
+    :root {
+        --title-size: clamp(1.25rem, 7vw, 2.5rem);
+    }
+
+    /* Stack grids vertically */
+    .grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* ===========================================
+   REDUCED MOTION
+   Respect user preferences
+   =========================================== */
+@media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+        animation-duration: 0.01ms !important;
+        transition-duration: 0.2s !important;
+    }
+
+    html {
+        scroll-behavior: auto;
+    }
+}
+```
+
+### Overflow Prevention Checklist
+
+Before generating any presentation, mentally verify:
+
+1. ✅ Every `.slide` has `height: 100vh; height: 100dvh; overflow: hidden;`
+2. ✅ All font sizes use `clamp(min, preferred, max)`
+3. ✅ All spacing uses `clamp()` or viewport units
+4. ✅ Content containers have `max-height` constraints
+5. ✅ Images have `max-height: min(50vh, 400px)` or similar
+6. ✅ Grids use `auto-fit` with `minmax()` for responsive columns
+7. ✅ Breakpoints exist for heights: 700px, 600px, 500px
+8. ✅ No fixed pixel heights on content elements
+9. ✅ Content per slide respects density limits
+
+### When Content Doesn't Fit
+
+If you find yourself with too much content:
+
+**DO:**
+- Split into multiple slides
+- Reduce bullet points (max 5-6 per slide)
+- Shorten text (aim for 1-2 lines per bullet)
+- Use smaller code snippets
+- Create a "continued" slide
+
+**DON'T:**
+- Reduce font size below readable limits
+- Remove padding/spacing entirely
+- Allow any scrolling
+- Cram content to fit
+
+### Testing Viewport Fit
+
+After generating, recommend the user test at these sizes:
+- Desktop: 1920×1080, 1440×900, 1280×720
+- Tablet: 1024×768, 768×1024 (portrait)
+- Mobile: 375×667, 414×896
+- Landscape phone: 667×375, 896×414
 
 ---
 
@@ -75,7 +304,64 @@ If user has content, ask them to share it (text, bullet points, images, etc.).
 
 Most people can't articulate design preferences in words. Instead of asking "do you want minimalist or bold?", we generate mini-previews and let them react.
 
-### Step 2.1: Mood Selection
+### How Users Choose Presets
+
+Users can select a style in **two ways**:
+
+**Option A: Guided Discovery (Default)**
+- User answers mood questions
+- Skill generates 3 preview files based on their answers
+- User views previews in browser and picks their favorite
+- This is best for users who don't have a specific style in mind
+
+**Option B: Direct Selection**
+- If user already knows what they want, they can request a preset by name
+- Example: "Use the Bold Signal style" or "I want something like Dark Botanical"
+- Skip to Phase 3 immediately
+
+**Available Presets:**
+| Preset | Vibe | Best For |
+|--------|------|----------|
+| Bold Signal | Confident, high-impact | Pitch decks, keynotes |
+| Electric Studio | Clean, professional | Agency presentations |
+| Creative Voltage | Energetic, retro-modern | Creative pitches |
+| Dark Botanical | Elegant, sophisticated | Premium brands |
+| Notebook Tabs | Editorial, organized | Reports, reviews |
+| Pastel Geometry | Friendly, approachable | Product overviews |
+| Split Pastel | Playful, modern | Creative agencies |
+| Vintage Editorial | Witty, personality-driven | Personal brands |
+| Neon Cyber | Futuristic, techy | Tech startups |
+| Terminal Green | Developer-focused | Dev tools, APIs |
+| Swiss Modern | Minimal, precise | Corporate, data |
+| Paper & Ink | Literary, thoughtful | Storytelling |
+
+### Step 2.0: Style Path Selection
+
+First, ask how the user wants to choose their style:
+
+**Question: Style Selection Method**
+- Header: "Style"
+- Question: "How would you like to choose your presentation style?"
+- Options:
+  - "Show me options" — Generate 3 previews based on my needs (recommended for most users)
+  - "I know what I want" — Let me pick from the preset list directly
+
+**If "Show me options"** → Continue to Step 2.1 (Mood Selection)
+
+**If "I know what I want"** → Show preset picker:
+
+**Question: Pick a Preset**
+- Header: "Preset"
+- Question: "Which style would you like to use?"
+- Options:
+  - "Bold Signal" — Vibrant card on dark, confident and high-impact
+  - "Dark Botanical" — Elegant dark with soft abstract shapes
+  - "Notebook Tabs" — Editorial paper look with colorful section tabs
+  - "Pastel Geometry" — Friendly pastels with decorative pills
+
+(If user picks one, skip to Phase 3. If they want to see more options, show additional presets or proceed to guided discovery.)
+
+### Step 2.1: Mood Selection (Guided Discovery)
 
 **Question 1: Feeling**
 - Header: "Vibe"
@@ -100,10 +386,10 @@ Based on their mood selection, generate **3 distinct style previews** as mini HT
 
 | Mood | Style Options |
 |------|---------------|
-| Impressed/Confident | "Corporate Elegant", "Dark Executive", "Clean Minimal" |
-| Excited/Energized | "Neon Cyber", "Bold Gradients", "Kinetic Motion" |
-| Calm/Focused | "Paper & Ink", "Soft Muted", "Swiss Minimal" |
-| Inspired/Moved | "Cinematic Dark", "Warm Editorial", "Atmospheric" |
+| Impressed/Confident | "Bold Signal", "Electric Studio", "Dark Botanical" |
+| Excited/Energized | "Creative Voltage", "Neon Cyber", "Split Pastel" |
+| Calm/Focused | "Notebook Tabs", "Paper & Ink", "Swiss Modern" |
+| Inspired/Moved | "Dark Botanical", "Vintage Editorial", "Pastel Geometry" |
 
 **IMPORTANT: Never use these generic patterns:**
 - Purple gradients on white backgrounds
@@ -218,12 +504,16 @@ Follow this structure for all presentations:
             --accent: #00ffcc;
             --accent-glow: rgba(0, 255, 204, 0.3);
 
-            /* Typography */
+            /* Typography - MUST use clamp() for responsive scaling */
             --font-display: 'Clash Display', sans-serif;
             --font-body: 'Satoshi', sans-serif;
+            --title-size: clamp(2rem, 6vw, 5rem);
+            --subtitle-size: clamp(0.875rem, 2vw, 1.25rem);
+            --body-size: clamp(0.75rem, 1.2vw, 1rem);
 
-            /* Spacing */
-            --slide-padding: clamp(2rem, 5vw, 4rem);
+            /* Spacing - MUST use clamp() for responsive scaling */
+            --slide-padding: clamp(1.5rem, 4vw, 4rem);
+            --content-gap: clamp(1rem, 2vw, 2rem);
 
             /* Animation */
             --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
@@ -242,6 +532,7 @@ Follow this structure for all presentations:
         html {
             scroll-behavior: smooth;
             scroll-snap-type: y mandatory;
+            height: 100%;
         }
 
         body {
@@ -249,23 +540,64 @@ Follow this structure for all presentations:
             background: var(--bg-primary);
             color: var(--text-primary);
             overflow-x: hidden;
+            height: 100%;
         }
 
         /* ===========================================
            SLIDE CONTAINER
-           Each section is one slide
+           CRITICAL: Each slide MUST fit exactly in viewport
+           - Use height: 100vh (NOT min-height)
+           - Use overflow: hidden to prevent scroll
+           - Content must scale with clamp() values
            =========================================== */
         .slide {
-            min-height: 100vh;
+            width: 100vw;
+            height: 100vh; /* EXACT viewport height - no scrolling */
+            height: 100dvh; /* Dynamic viewport height for mobile */
             padding: var(--slide-padding);
             scroll-snap-align: start;
             display: flex;
             flex-direction: column;
             justify-content: center;
             position: relative;
+            overflow: hidden; /* Prevent any content overflow */
+        }
+
+        /* Content wrapper that prevents overflow */
+        .slide-content {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            max-height: 100%;
             overflow: hidden;
         }
 
+        /* ===========================================
+           RESPONSIVE BREAKPOINTS
+           Adjust content for different screen sizes
+           =========================================== */
+        @media (max-height: 600px) {
+            :root {
+                --slide-padding: clamp(1rem, 3vw, 2rem);
+                --content-gap: clamp(0.5rem, 1.5vw, 1rem);
+            }
+        }
+
+        @media (max-width: 768px) {
+            :root {
+                --title-size: clamp(1.5rem, 8vw, 3rem);
+            }
+        }
+
+        @media (max-height: 500px) and (orientation: landscape) {
+            /* Extra compact for landscape phones */
+            :root {
+                --title-size: clamp(1.25rem, 5vw, 2rem);
+                --slide-padding: clamp(0.75rem, 2vw, 1.5rem);
+            }
+        }
+
         /* ===========================================
            ANIMATIONS
            Trigger via .visible class (added by JS on scroll)
@@ -394,19 +726,16 @@ class CustomCursor {
 }
 ```
 
-**Responsive:**
-- Mobile-friendly (single column, adjusted spacing)
-- Disable heavy effects on mobile
-- Touch-friendly interactions
+**Responsive & Viewport Fitting (CRITICAL):**
 
-```css
-@media (max-width: 768px) {
-    .nav-dots,
-    .keyboard-hint {
-        display: none;
-    }
-}
-```
+**See the "CRITICAL: Viewport Fitting Requirements" section above for complete CSS and guidelines.**
+
+Quick reference:
+- Every `.slide` must have `height: 100vh; height: 100dvh; overflow: hidden;`
+- All typography and spacing must use `clamp()`
+- Respect content density limits (max 4-6 bullets, max 6 cards, etc.)
+- Include breakpoints for heights: 700px, 600px, 500px
+- When content doesn't fit → split into multiple slides, never scroll
 
 ---
 

STYLE_PRESETS.md

@@ -1,522 +1,527 @@
 # Style Presets Reference
 
-Curated visual styles for Frontend Slides. Each preset includes specific font choices, color palettes, and animation approaches to ensure distinctive, non-generic designs.
+Curated visual styles for Frontend Slides. Each preset is inspired by real design references—no generic "AI slop" aesthetics. **Abstract shapes only—no illustrations.**
 
 ---
 
-## Dark Themes
+## ⚠️ CRITICAL: Viewport Fitting (Non-Negotiable)
 
-### 1. Neon Cyber
+**Every slide MUST fit exactly in the viewport. No scrolling within slides, ever.**
 
-**Vibe:** Futuristic, techy, confident, cutting-edge
+### Content Density Limits Per Slide
 
-**Typography:**
-- Display: `Clash Display` (700) — Bold, geometric, modern
-- Body: `Satoshi` (400/500) — Clean, technical, readable
+| Slide Type | Maximum Content |
+|------------|-----------------|
+| Title slide | 1 heading + 1 subtitle |
+| Content slide | 1 heading + 4-6 bullets (max 2 lines each) |
+| Feature grid | 1 heading + 6 cards (2x3 or 3x2) |
+| Code slide | 1 heading + 8-10 lines of code |
+| Quote slide | 1 quote (max 3 lines) + attribution |
+
+**Too much content? → Split into multiple slides. Never scroll.**
+
+### Required Base CSS (Include in ALL Presentations)
 
-**Colors:**
 ```css
+/* ===========================================
+   VIEWPORT FITTING: MANDATORY
+   Copy this entire block into every presentation
+   =========================================== */
+
+/* 1. Lock document to viewport */
+html, body {
+    height: 100%;
+    overflow-x: hidden;
+}
+
+html {
+    scroll-snap-type: y mandatory;
+    scroll-behavior: smooth;
+}
+
+/* 2. Each slide = exact viewport height */
+.slide {
+    width: 100vw;
+    height: 100vh;
+    height: 100dvh; /* Dynamic viewport for mobile */
+    overflow: hidden; /* CRITICAL: No overflow ever */
+    scroll-snap-align: start;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+/* 3. Content wrapper */
+.slide-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    max-height: 100%;
+    overflow: hidden;
+    padding: var(--slide-padding);
+}
+
+/* 4. ALL sizes use clamp() - scales with viewport */
 :root {
-    --bg-primary: #0a0f1c;
-    --bg-secondary: #111827;
-    --text-primary: #ffffff;
-    --text-secondary: #94a3b8;
-    --accent: #00ffcc;
-    --accent-secondary: #ff00aa;
-    --glow: rgba(0, 255, 204, 0.4);
+    /* Typography */
+    --title-size: clamp(1.5rem, 5vw, 4rem);
+    --h2-size: clamp(1.25rem, 3.5vw, 2.5rem);
+    --body-size: clamp(0.75rem, 1.5vw, 1.125rem);
+    --small-size: clamp(0.65rem, 1vw, 0.875rem);
+
+    /* Spacing */
+    --slide-padding: clamp(1rem, 4vw, 4rem);
+    --content-gap: clamp(0.5rem, 2vw, 2rem);
 }
-```
 
-**Signature Elements:**
-- Particle system background (canvas)
-- Neon glow on accent elements
-- Custom cursor with trail
-- Grid pattern overlay
-- Glitch text effect on titles
+/* 5. Cards/containers use viewport-relative max sizes */
+.card, .container {
+    max-width: min(90vw, 1000px);
+    max-height: min(80vh, 700px);
+}
 
-**Animation Style:**
-- Medium speed (0.5-0.8s)
-- Slide up + fade entrances
-- Staggered reveals
+/* 6. Images constrained */
+img {
+    max-width: 100%;
+    max-height: min(50vh, 400px);
+    object-fit: contain;
+}
 
----
+/* 7. Grids adapt to space */
+.grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
+    gap: clamp(0.5rem, 1.5vw, 1rem);
+}
 
-### 2. Midnight Executive
+/* ===========================================
+   RESPONSIVE BREAKPOINTS - Height-based
+   =========================================== */
 
-**Vibe:** Premium, trustworthy, sophisticated, corporate
+/* Short screens (< 700px height) */
+@media (max-height: 700px) {
+    :root {
+        --slide-padding: clamp(0.75rem, 3vw, 2rem);
+        --content-gap: clamp(0.4rem, 1.5vw, 1rem);
+        --title-size: clamp(1.25rem, 4.5vw, 2.5rem);
+    }
+}
 
-**Typography:**
-- Display: `Libre Baskerville` (700) — Classic, authoritative
-- Body: `Source Sans 3` (400/600) — Professional, highly readable
+/* Very short (< 600px height) */
+@media (max-height: 600px) {
+    :root {
+        --slide-padding: clamp(0.5rem, 2.5vw, 1.5rem);
+        --title-size: clamp(1.1rem, 4vw, 2rem);
+        --body-size: clamp(0.7rem, 1.2vw, 0.95rem);
+    }
 
-**Colors:**
-```css
-:root {
-    --bg-primary: #0f172a;
-    --bg-secondary: #1e293b;
-    --text-primary: #f8fafc;
-    --text-secondary: #94a3b8;
-    --accent: #3b82f6;
-    --accent-secondary: #818cf8;
-    --gold: #fbbf24;
+    .nav-dots, .keyboard-hint, .decorative {
+        display: none;
+    }
+}
+
+/* Extremely short - landscape phones (< 500px) */
+@media (max-height: 500px) {
+    :root {
+        --slide-padding: clamp(0.4rem, 2vw, 1rem);
+        --title-size: clamp(1rem, 3.5vw, 1.5rem);
+        --body-size: clamp(0.65rem, 1vw, 0.85rem);
+    }
+}
+
+/* Narrow screens */
+@media (max-width: 600px) {
+    .grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+        animation-duration: 0.01ms !important;
+        transition-duration: 0.2s !important;
+    }
 }
 ```
 
-**Signature Elements:**
-- Subtle gradient backgrounds
-- Thin gold accent lines
-- Data visualizations
-- Minimal decorative elements
-- Focus on whitespace
+### Viewport Fitting Checklist
+
+Before finalizing any presentation, verify:
 
-**Animation Style:**
-- Fast, subtle (0.3-0.5s)
-- Fade only, minimal movement
-- Professional restraint
+- [ ] Every `.slide` has `height: 100vh; height: 100dvh; overflow: hidden;`
+- [ ] All font sizes use `clamp(min, preferred, max)`
+- [ ] All spacing uses `clamp()` or viewport units
+- [ ] Breakpoints exist for heights: 700px, 600px, 500px
+- [ ] Content respects density limits (max 6 bullets, max 6 cards)
+- [ ] No fixed pixel heights on content elements
+- [ ] Images have `max-height` constraints
 
 ---
 
-### 3. Deep Space
+## Dark Themes
+
+### 1. Bold Signal
+
+**Vibe:** Confident, bold, modern, high-impact
 
-**Vibe:** Inspiring, vast, contemplative, visionary
+**Layout:** Colored card on dark gradient. Number top-left, navigation top-right, title bottom-left.
 
 **Typography:**
-- Display: `Space Grotesk` (700) — Geometric, space-age
-- Body: `DM Sans` (400/500) — Modern, friendly
+- Display: `Archivo Black` (900)
+- Body: `Space Grotesk` (400/500)
 
 **Colors:**
 ```css
 :root {
-    --bg-primary: #030712;
-    --bg-secondary: #111827;
-    --text-primary: #f9fafb;
-    --text-secondary: #6b7280;
-    --accent: #818cf8;
-    --accent-secondary: #c084fc;
-    --stars: rgba(255, 255, 255, 0.1);
+    --bg-primary: #1a1a1a;
+    --bg-gradient: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
+    --card-bg: #FF5722;
+    --text-primary: #ffffff;
+    --text-on-card: #1a1a1a;
 }
 ```
 
 **Signature Elements:**
-- Starfield background (CSS or canvas)
-- Radial gradient "spotlight" effects
-- Floating elements
-- Large, impactful typography
-- Generous vertical spacing
-
-**Animation Style:**
-- Slow, cinematic (0.8-1.2s)
-- Scale + fade entrances
-- Parallax scrolling
+- Bold colored card as focal point (orange, coral, or vibrant accent)
+- Large section numbers (01, 02, etc.)
+- Navigation breadcrumbs with active/inactive opacity states
+- Grid-based layout for precise alignment
 
 ---
 
-### 4. Terminal Green
+### 2. Electric Studio
 
-**Vibe:** Developer-focused, hacker aesthetic, retro-tech
+**Vibe:** Bold, clean, professional, high contrast
+
+**Layout:** Split panel—white top, blue bottom. Brand marks in corners.
 
 **Typography:**
-- Display: `JetBrains Mono` (700) — Monospace, code-like
-- Body: `JetBrains Mono` (400) — Consistent monospace
+- Display: `Manrope` (800)
+- Body: `Manrope` (400/500)
 
 **Colors:**
 ```css
 :root {
-    --bg-primary: #0d1117;
-    --bg-secondary: #161b22;
-    --text-primary: #c9d1d9;
-    --text-secondary: #8b949e;
-    --accent: #39d353;
-    --accent-dim: rgba(57, 211, 83, 0.2);
-    --border: #30363d;
+    --bg-dark: #0a0a0a;
+    --bg-white: #ffffff;
+    --accent-blue: #4361ee;
+    --text-dark: #0a0a0a;
+    --text-light: #ffffff;
 }
 ```
 
 **Signature Elements:**
-- Scan line overlay effect
-- Blinking cursor
-- Code blocks and syntax highlighting
-- ASCII art decorations
-- Terminal-style borders
-
-**Animation Style:**
-- Typewriter text reveals
-- Quick, snappy transitions (0.2-0.3s)
-- Character-by-character reveals
+- Two-panel vertical split
+- Accent bar on panel edge
+- Quote typography as hero element
+- Minimal, confident spacing
 
 ---
 
-## Light Themes
+### 3. Creative Voltage
 
-### 5. Paper & Ink
+**Vibe:** Bold, creative, energetic, retro-modern
 
-**Vibe:** Editorial, literary, thoughtful, refined
+**Layout:** Split panels—electric blue left, dark right. Script accents.
 
 **Typography:**
-- Display: `Cormorant Garamond` (700) — Elegant, editorial
-- Body: `Source Serif 4` (400) — Classic, readable
+- Display: `Syne` (700/800)
+- Mono: `Space Mono` (400/700)
 
 **Colors:**
 ```css
 :root {
-    --bg-primary: #faf9f7;
-    --bg-secondary: #f5f3ef;
-    --text-primary: #1a1a1a;
-    --text-secondary: #666666;
-    --accent: #c41e3a;
-    --border: #e5e2db;
+    --bg-primary: #0066ff;
+    --bg-dark: #1a1a2e;
+    --accent-neon: #d4ff00;
+    --text-light: #ffffff;
 }
 ```
 
 **Signature Elements:**
-- Drop caps on opening paragraphs
-- Pull quotes
-- Subtle paper texture
-- Elegant horizontal rules
-- Classic column layouts
-
-**Animation Style:**
-- Gentle fades (0.4-0.6s)
-- No dramatic movements
-- Refined, understated
+- Electric blue + neon yellow contrast
+- Halftone texture patterns
+- Neon badges/callouts
+- Script typography for creative flair
 
 ---
 
-### 6. Swiss Modern
+### 4. Dark Botanical
 
-**Vibe:** Clean, precise, Bauhaus-inspired, geometric
+**Vibe:** Elegant, sophisticated, artistic, premium
+
+**Layout:** Centered content on dark. Abstract soft shapes in corner.
 
 **Typography:**
-- Display: `Archivo` (800) — Strong, geometric
-- Body: `Nunito` (400/600) — Friendly, rounded
+- Display: `Cormorant` (400/600) — elegant serif
+- Body: `IBM Plex Sans` (300/400)
 
 **Colors:**
 ```css
 :root {
-    --bg-primary: #ffffff;
-    --bg-secondary: #f7f7f7;
-    --text-primary: #000000;
-    --text-secondary: #555555;
-    --accent: #ff3300;
-    --grid: rgba(0, 0, 0, 0.05);
+    --bg-primary: #0f0f0f;
+    --text-primary: #e8e4df;
+    --text-secondary: #9a9590;
+    --accent-warm: #d4a574;
+    --accent-pink: #e8b4b8;
+    --accent-gold: #c9b896;
 }
 ```
 
 **Signature Elements:**
-- Visible grid system
-- Asymmetric layouts
-- Red accent sparingly
-- Bold black typography
-- Geometric shapes
-
-**Animation Style:**
-- Precise, mechanical (0.3-0.4s)
-- Linear or ease-out easing
-- Grid-aligned movements
+- Abstract soft gradient circles (blurred, overlapping)
+- Warm color accents (pink, gold, terracotta)
+- Thin vertical accent lines
+- Italic signature typography
+- **No illustrations—only abstract CSS shapes**
 
 ---
 
-### 7. Soft Pastel
+## Light Themes
+
+### 5. Notebook Tabs
 
-**Vibe:** Friendly, approachable, creative, playful
+**Vibe:** Editorial, organized, elegant, tactile
+
+**Layout:** Cream paper card on dark background. Colorful tabs on right edge.
 
 **Typography:**
-- Display: `Nunito` (800) — Rounded, warm
-- Body: `Nunito` (400/500) — Consistent warmth
+- Display: `Bodoni Moda` (400/700) — classic editorial
+- Body: `DM Sans` (400/500)
 
 **Colors:**
 ```css
 :root {
-    --bg-primary: #fef3f2;
-    --bg-secondary: #fef9f5;
-    --text-primary: #374151;
-    --text-secondary: #6b7280;
-    --accent: #f472b6;
-    --accent-secondary: #a78bfa;
-    --accent-tertiary: #34d399;
+    --bg-outer: #2d2d2d;
+    --bg-page: #f8f6f1;
+    --text-primary: #1a1a1a;
+    --tab-1: #98d4bb; /* Mint */
+    --tab-2: #c7b8ea; /* Lavender */
+    --tab-3: #f4b8c5; /* Pink */
+    --tab-4: #a8d8ea; /* Sky */
+    --tab-5: #ffe6a7; /* Cream */
 }
 ```
 
 **Signature Elements:**
-- Rounded corners everywhere
-- Blob shapes in background
-- Multiple pastel accents
-- Soft shadows
-- Illustrated icons
-
-**Animation Style:**
-- Bouncy spring physics
-- Playful overshoots
-- Floating/bobbing elements
+- Paper container with subtle shadow
+- Colorful section tabs on right edge (vertical text)
+- Binder hole decorations on left
+- Tab text must scale with viewport: `font-size: clamp(0.5rem, 1vh, 0.7rem)`
 
 ---
 
-### 8. Warm Editorial
+### 6. Pastel Geometry
 
-**Vibe:** Human, storytelling, photographic, magazine
+**Vibe:** Friendly, organized, modern, approachable
+
+**Layout:** White card on pastel background. Vertical pills on right edge.
 
 **Typography:**
-- Display: `Playfair Display` (700) — Elegant, serif headlines
-- Body: `Work Sans` (400) — Modern, readable
+- Display: `Plus Jakarta Sans` (700/800)
+- Body: `Plus Jakarta Sans` (400/500)
 
 **Colors:**
 ```css
 :root {
-    --bg-primary: #fffbf5;
-    --bg-secondary: #f5efe6;
-    --text-primary: #2d2a24;
-    --text-secondary: #78716c;
-    --accent: #b45309;
-    --accent-secondary: #0369a1;
+    --bg-primary: #c8d9e6;
+    --card-bg: #faf9f7;
+    --pill-pink: #f0b4d4;
+    --pill-mint: #a8d4c4;
+    --pill-sage: #5a7c6a;
+    --pill-lavender: #9b8dc4;
+    --pill-violet: #7c6aad;
 }
 ```
 
 **Signature Elements:**
-- Large hero images
-- Image overlays with text
-- Warm photography
-- Pull quotes in accent color
-- Handwritten accent fonts
-
-**Animation Style:**
-- Cinematic crossfades
-- Ken Burns effect on images
-- Slow, emotional transitions (0.8-1s)
+- Rounded card with soft shadow
+- **Vertical pills on right edge** with varying heights (like tabs)
+- Consistent pill width, heights: short → medium → tall → medium → short
+- Download/action icon in corner
 
 ---
 
-## Specialty Themes
+### 7. Split Pastel
 
-### 9. Brutalist
+**Vibe:** Playful, modern, friendly, creative
 
-**Vibe:** Raw, bold, unconventional, attention-grabbing
+**Layout:** Two-color vertical split (peach left, lavender right).
 
 **Typography:**
-- Display: `Anton` or `Bebas Neue` (900) — Massive, compressed
-- Body: `IBM Plex Mono` (400) — Industrial
+- Display: `Outfit` (700/800)
+- Body: `Outfit` (400/500)
 
 **Colors:**
 ```css
 :root {
-    --bg-primary: #ffffff;
-    --text-primary: #000000;
-    --accent: #ff0000;
-    --border: #000000;
+    --bg-peach: #f5e6dc;
+    --bg-lavender: #e4dff0;
+    --text-dark: #1a1a1a;
+    --badge-mint: #c8f0d8;
+    --badge-yellow: #f0f0c8;
+    --badge-pink: #f0d4e0;
 }
 ```
 
 **Signature Elements:**
-- Thick black borders
-- Asymmetric, chaotic layouts
-- Oversized typography
-- Raw, unpolished look
-- High contrast
-
-**Animation Style:**
-- Instant or very fast
-- Hard cuts, no easing
-- Jarring transitions
+- Split background colors
+- Playful badge pills with icons
+- Grid pattern overlay on right panel
+- Rounded CTA buttons
 
 ---
 
-### 10. Gradient Wave
+### 8. Vintage Editorial
 
-**Vibe:** Modern SaaS, energetic, approachable tech
+**Vibe:** Witty, confident, editorial, personality-driven
+
+**Layout:** Centered content on cream. Abstract geometric shapes as accent.
 
 **Typography:**
-- Display: `Cabinet Grotesk` (800) — Modern, confident
-- Body: `Inter` (400/500) — Only allowed for this style
+- Display: `Fraunces` (700/900) — distinctive serif
+- Body: `Work Sans` (400/500)
 
 **Colors:**
 ```css
 :root {
-    --bg-primary: #0f0f1a;
-    --gradient-1: #667eea;
-    --gradient-2: #764ba2;
-    --gradient-3: #f472b6;
-    --text-primary: #ffffff;
-    --text-secondary: #a1a1aa;
+    --bg-cream: #f5f3ee;
+    --text-primary: #1a1a1a;
+    --text-secondary: #555;
+    --accent-warm: #e8d4c0;
 }
 ```
 
 **Signature Elements:**
-- Animated gradient meshes
-- Blob shapes with blur
-- Glass-morphism cards
-- Floating orbs
-- Smooth curves
+- Abstract geometric shapes (circle outline + line + dot)
+- Bold bordered CTA boxes
+- Witty, conversational copy style
+- **No illustrations—only geometric CSS shapes**
+
+---
+
+## Specialty Themes
+
+### 9. Neon Cyber
+
+**Vibe:** Futuristic, techy, confident
+
+**Typography:** `Clash Display` + `Satoshi` (Fontshare)
 
-**Animation Style:**
-- Smooth, flowing (0.5-0.7s)
-- Continuous subtle animations
-- Hover reveals
+**Colors:** Deep navy (#0a0f1c), cyan accent (#00ffcc), magenta (#ff00aa)
+
+**Signature:** Particle backgrounds, neon glow, grid patterns
 
 ---
 
-## Font Pairing Quick Reference
+### 10. Terminal Green
+
+**Vibe:** Developer-focused, hacker aesthetic
+
+**Typography:** `JetBrains Mono` (monospace only)
 
-| Vibe | Display Font | Body Font | Source |
-|------|--------------|-----------|--------|
-| Techy/Modern | Clash Display | Satoshi | Fontshare |
-| Professional | Libre Baskerville | Source Sans 3 | Google |
-| Space/Future | Space Grotesk | DM Sans | Google |
-| Developer | JetBrains Mono | JetBrains Mono | JetBrains |
-| Editorial | Cormorant Garamond | Source Serif 4 | Google |
-| Swiss/Minimal | Archivo | Nunito | Google |
-| Playful | Nunito | Nunito | Google |
-| Magazine | Playfair Display | Work Sans | Google |
-| Brutalist | Anton | IBM Plex Mono | Google |
-| SaaS Modern | Cabinet Grotesk | Inter | Fontshare/Google |
+**Colors:** GitHub dark (#0d1117), terminal green (#39d353)
+
+**Signature:** Scan lines, blinking cursor, code syntax styling
 
 ---
 
-## Animation Easing Reference
+### 11. Swiss Modern
 
-```css
-:root {
-    /* Standard curves */
-    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
-    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
-    --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
+**Vibe:** Clean, precise, Bauhaus-inspired
 
-    /* Bouncy */
-    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
-    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+**Typography:** `Archivo` (800) + `Nunito` (400)
 
-    /* Smooth */
-    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
+**Colors:** Pure white, pure black, red accent (#ff3300)
 
-    /* Snappy */
-    --ease-snappy: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-}
-```
+**Signature:** Visible grid, asymmetric layouts, geometric shapes
 
 ---
 
-## Background Effect Snippets
+### 12. Paper & Ink
 
-### Particle Field (Canvas)
+**Vibe:** Editorial, literary, thoughtful
 
-```javascript
-class ParticleSystem {
-    constructor(canvas) {
-        this.canvas = canvas;
-        this.ctx = canvas.getContext('2d');
-        this.particles = [];
-        this.init();
-    }
+**Typography:** `Cormorant Garamond` + `Source Serif 4`
 
-    init() {
-        this.resize();
-        for (let i = 0; i < 50; i++) {
-            this.particles.push({
-                x: Math.random() * this.canvas.width,
-                y: Math.random() * this.canvas.height,
-                vx: (Math.random() - 0.5) * 0.5,
-                vy: (Math.random() - 0.5) * 0.5,
-                radius: Math.random() * 2 + 1
-            });
-        }
-        this.animate();
-    }
+**Colors:** Warm cream (#faf9f7), charcoal (#1a1a1a), crimson accent (#c41e3a)
 
-    animate() {
-        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-        this.particles.forEach(p => {
-            p.x += p.vx;
-            p.y += p.vy;
-            // Wrap around edges
-            if (p.x < 0) p.x = this.canvas.width;
-            if (p.x > this.canvas.width) p.x = 0;
-            if (p.y < 0) p.y = this.canvas.height;
-            if (p.y > this.canvas.height) p.y = 0;
-            // Draw
-            this.ctx.beginPath();
-            this.ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
-            this.ctx.fillStyle = 'rgba(0, 255, 204, 0.5)';
-            this.ctx.fill();
-        });
-        requestAnimationFrame(() => this.animate());
-    }
-}
-```
+**Signature:** Drop caps, pull quotes, elegant horizontal rules
 
-### Gradient Mesh (CSS)
+---
 
-```css
-.gradient-mesh {
-    background:
-        radial-gradient(at 40% 20%, hsla(280, 100%, 70%, 0.3) 0px, transparent 50%),
-        radial-gradient(at 80% 0%, hsla(200, 100%, 60%, 0.3) 0px, transparent 50%),
-        radial-gradient(at 0% 50%, hsla(340, 100%, 70%, 0.3) 0px, transparent 50%),
-        radial-gradient(at 80% 50%, hsla(180, 100%, 50%, 0.2) 0px, transparent 50%),
-        radial-gradient(at 0% 100%, hsla(250, 100%, 60%, 0.3) 0px, transparent 50%),
-        radial-gradient(at 80% 100%, hsla(20, 100%, 60%, 0.2) 0px, transparent 50%),
-        var(--bg-primary);
-}
-```
+## Font Pairing Quick Reference
 
-### Animated Starfield (CSS)
+| Preset | Display Font | Body Font | Source |
+|--------|--------------|-----------|--------|
+| Bold Signal | Archivo Black | Space Grotesk | Google |
+| Electric Studio | Manrope | Manrope | Google |
+| Creative Voltage | Syne | Space Mono | Google |
+| Dark Botanical | Cormorant | IBM Plex Sans | Google |
+| Notebook Tabs | Bodoni Moda | DM Sans | Google |
+| Pastel Geometry | Plus Jakarta Sans | Plus Jakarta Sans | Google |
+| Split Pastel | Outfit | Outfit | Google |
+| Vintage Editorial | Fraunces | Work Sans | Google |
+| Neon Cyber | Clash Display | Satoshi | Fontshare |
+| Terminal Green | JetBrains Mono | JetBrains Mono | JetBrains |
 
-```css
-.starfield {
-    background-image:
-        radial-gradient(2px 2px at 20% 30%, white 0%, transparent 50%),
-        radial-gradient(2px 2px at 40% 70%, white 0%, transparent 50%),
-        radial-gradient(1px 1px at 50% 40%, white 0%, transparent 50%),
-        radial-gradient(1px 1px at 60% 60%, white 0%, transparent 50%),
-        radial-gradient(2px 2px at 90% 10%, white 0%, transparent 50%);
-    background-size: 200% 200%;
-    animation: twinkle 15s ease-in-out infinite;
-}
+---
 
-@keyframes twinkle {
-    0%, 100% { background-position: 0% 0%; }
-    50% { background-position: 100% 100%; }
-}
-```
+## DO NOT USE (Generic AI Patterns)
+
+**Fonts:** Inter, Roboto, Arial, system fonts as display
+
+**Colors:** `#6366f1` (generic indigo), purple gradients on white
+
+**Layouts:** Everything centered, generic hero sections, identical card grids
 
-### Noise Texture (SVG Data URI)
+**Decorations:** Realistic illustrations, gratuitous glassmorphism, drop shadows without purpose
 
+---
+
+## Troubleshooting Viewport Issues
+
+### Content Overflows the Slide
+
+**Symptoms:** Scrollbar appears, content cut off, elements outside viewport
+
+**Solutions:**
+1. Check slide has `overflow: hidden` (not `overflow: auto` or `visible`)
+2. Reduce content — split into multiple slides
+3. Ensure all fonts use `clamp()` not fixed `px` or `rem`
+4. Add/fix height breakpoints for smaller screens
+5. Check images have `max-height: min(50vh, 400px)`
+
+### Text Too Small on Mobile / Too Large on Desktop
+
+**Symptoms:** Unreadable text on phones, oversized text on big screens
+
+**Solutions:**
 ```css
-.noise {
-    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
-    opacity: 0.05;
-}
+/* Use clamp with viewport-relative middle value */
+font-size: clamp(1rem, 3vw, 2.5rem);
+/*              ↑       ↑      ↑
+            minimum  scales  maximum */
 ```
 
----
+### Content Doesn't Fill Short Screens
 
-## DO NOT USE (Generic AI Patterns)
+**Symptoms:** Excessive whitespace on landscape phones or short browser windows
 
-Avoid these overused patterns that create "AI slop":
+**Solutions:**
+1. Add `@media (max-height: 600px)` and `(max-height: 500px)` breakpoints
+2. Reduce padding at smaller heights
+3. Hide decorative elements (`display: none`)
+4. Consider hiding nav dots and hints on short screens
 
-**Fonts:**
-- Inter (except in Gradient Wave style)
-- Roboto
-- Arial / Helvetica
-- System font stacks as display fonts
+### Testing Recommendations
 
-**Colors:**
-- `#6366f1` (generic indigo)
-- Purple/violet gradients on white
-- Generic blue primary buttons
-- Equal distribution of accent colors
-
-**Layouts:**
-- Centered everything
-- Generic hero with text left, image right
-- Standard 3-column features grid
-- Rounded rectangle cards with shadows
-
-**Animations:**
-- Identical timing on all elements
-- No stagger on children
-- Linear easing everywhere
-- Excessive bounce
-
-**Effects:**
-- Drop shadows without intention
-- Gratuitous glassmorphism
-- Blurs that don't add meaning
-- Gradients for no reason
+Test at these viewport sizes:
+- **Desktop:** 1920×1080, 1440×900, 1280×720
+- **Tablet:** 1024×768 (landscape), 768×1024 (portrait)
+- **Mobile:** 375×667 (iPhone SE), 414×896 (iPhone 11)
+- **Landscape phone:** 667×375, 896×414
+
+Use browser DevTools responsive mode to quickly test multiple sizes.