docs: Add Alaya.love Loom Pitch integration + enhanced Neon Cyber CSS

README.md

@@ -540,6 +540,26 @@ This skill was born from the belief that:
 
 4. **Comments are kindness.** Code should explain itself to future-you (or anyone else who opens it).
 
+## Real-World Integration: Alaya.love Loom
+
+[Alaya.love](https://alaya.love) uses Frontend Slides in its **Loom Pitch** feature — an AI agent that generates startup pitch decks from a topic, renders them as zero-dependency HTML presentations, and writes them to an Obsidian vault.
+
+```python
+# Loom Pitch uses 3 styles from STYLE_PRESETS.md
+style = "bold-signal"  # or "electric-studio" or "neon-cyber"
+html = _build_pitch_html(topic, content, style)
+```
+
+The generated decks are scroll-snap HTML files with:
+
+- **Keyboard navigation** (← → ↑ ↓ Space)
+- **Touch swipe** on mobile
+- **Progress bar** + nav dots
+- **Staggered reveal animations** with `prefers-reduced-motion` support
+- **Fixed viewport scaling** compatible with `viewport-base.css`
+
+The pitch agent produces both Markdown (for the vault) and HTML (for the presentation) — a complete zero-dependency pipeline from idea → deck.
+
 ## Sharing Your Presentations
 
 After creating a presentation, the skill offers two ways to share it:

STYLE_PRESETS.md

@@ -256,9 +256,50 @@ Curated visual styles for Frontend Slides. Each preset is inspired by real desig
 
 **Typography:** `Clash Display` + `Satoshi` (Fontshare)
 
-**Colors:** Deep navy (#0a0f1c), cyan accent (#00ffcc), magenta (#ff00aa)
+**Colors:**
+```css
+:root {
+    --bg-primary: #0a0f1c;
+    --accent-cyan: #00ffcc;
+    --accent-magenta: #ff00aa;
+    --text-primary: #e0e0e0;
+    --title-size: clamp(2rem, 5vw, 4.5rem);
+    --h2-size: clamp(1.2rem, 3vw, 2.2rem);
+    --body-size: clamp(0.8rem, 1.5vw, 1.1rem);
+    --slide-padding: clamp(1.5rem, 5vw, 4rem);
+}
+```
+
+**Production CSS (used by Alaya.love Loom Pitch):**
+```css
+.slide { background: var(--bg-primary); }
+.title-slide {
+    background:
+        radial-gradient(ellipse at 30% 50%, rgba(0,255,204,0.08) 0%, transparent 50%),
+        radial-gradient(ellipse at 70% 30%, rgba(255,0,170,0.06) 0%, transparent 50%),
+        var(--bg-primary);
+}
+.title-slide h1 {
+    font-family: var(--display_font);
+    font-size: var(--title-size);
+    color: var(--accent-cyan);
+    text-shadow: 0 0 40px rgba(0,255,204,0.3);
+}
+.content-slide h2 {
+    font-family: var(--display_font);
+    font-size: var(--h2-size);
+    color: var(--accent-cyan);
+    margin-bottom: 1.5rem;
+}
+.content-slide .card {
+    background: rgba(255,255,255,0.03);
+    border: 1px solid rgba(0,255,204,0.15);
+    padding: clamp(1rem, 3vw, 2rem);
+    border-radius: 4px;
+}
+```
 
-**Signature:** Particle backgrounds, neon glow, grid patterns
+**Signature:** Dual radial gradients on title, cyan neon glow text-shadow, translucent cards with cyan border
 
 ---