npm - @rubytech/create-realagent-code - Versions diffs - 0.1.255 → 0.1.257 - Mend

@rubytech/create-realagent-code 0.1.255 → 0.1.257

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (217) hide show

package/payload/platform/plugins/slides/skills/deck-system/deck-craft.html ADDED Viewed

@@ -0,0 +1,1371 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Deck — Craft</title>
+<!--
+  ============================================================
+  TEMPLATE: CRAFT
+  A warm editorial theme inspired by premium SaaS sites
+  (Cursor, Linear, Notion). Parchment tones meet modern software.
+    - Warm cream/parchment base (#f5f0e8)
+    - Burnt orange accent for CTAs (#c05a3a)
+    - Light font weights with large sizes — elegance through scale
+    - Soft rounded cards (12px radius) with subtle borders
+    - Classical art + software overlay (signature component)
+    - Sans-serif editorial feel (Inter at 300–500)
+  NEW COMPONENTS (craft-specific):
+    22. Testimonial grid (3×2 quote cards with avatar)
+    23. Logo bar (horizontal partner logos)
+    24. Art overlay (painting background + UI mockup)
+    25. Feature card row (3-col with CTA links)
+    26. Update row (changelog-style badges with dates)
+  Same 21 base components + 5 new. Same navigation behavior.
+  ============================================================
+-->
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
+  :root {
+    --bg: #f5f0e8;
+    --bg-card: #ffffff;
+    --bg-card-warm: #faf6ef;
+    --bg-dark: #1a1a1a;
+    --text: #1a1a1a;
+    --text-light: #f5f0e8;
+    --text-secondary: #6b6560;
+    --text-muted: #9a9490;
+    --text-faint: #b5b0aa;
+    --accent: #c05a3a;
+    --accent-hover: #a84d30;
+    --border: #e5e0d8;
+    --border-strong: #d5d0c8;
+    --radius: 12px;
+    --radius-sm: 8px;
+    --radius-lg: 16px;
+  }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  html, body {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    background: var(--bg);
+    color: var(--text);
+    -webkit-font-smoothing: antialiased;
+  }
+  .deck {
+    width: 100vw;
+    height: 100vh;
+    position: relative;
+  }
+  .slide {
+    position: absolute;
+    inset: 0;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    padding: 6vh 8vw;
+    background: var(--bg);
+    color: var(--text);
+  }
+  .slide.active { display: flex; }
+  .slide-inner {
+    width: 100%;
+    max-width: 1100px;
+  }
+  /* --- Dark slides --- */
+  .slide.dark {
+    background: var(--bg-dark);
+    color: var(--text-light);
+  }
+  .slide.dark .eyebrow { color: var(--text-muted); }
+  .slide.dark .dim { color: #666; }
+  .slide.dark .subtitle { color: #999; }
+  .slide.dark .meta { color: #666; }
+  /* --- Typography --- */
+  .eyebrow {
+    font-size: 0.75rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--text-muted);
+    margin-bottom: 1.25rem;
+  }
+  h1 {
+    font-size: clamp(2.5rem, 5.5vw, 4.5rem);
+    font-weight: 400;
+    line-height: 1.1;
+    letter-spacing: -0.03em;
+    margin-bottom: 1.2rem;
+  }
+  h2 {
+    font-size: clamp(1.5rem, 3vw, 2.2rem);
+    font-weight: 400;
+    line-height: 1.15;
+    letter-spacing: -0.02em;
+    margin-bottom: 1.2rem;
+  }
+  h3 {
+    font-size: 1rem;
+    font-weight: 500;
+    margin-bottom: 0.5rem;
+  }
+  .dim {
+    color: var(--text-muted);
+    font-weight: 300;
+  }
+  .subtitle {
+    font-size: clamp(0.9rem, 1.2vw, 1.05rem);
+    color: var(--text-secondary);
+    max-width: 620px;
+    line-height: 1.6;
+    font-weight: 300;
+    margin-top: 0.8rem;
+  }
+  .meta {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    margin-top: 2rem;
+    font-weight: 400;
+  }
+  .cta-link {
+    color: var(--accent);
+    text-decoration: none;
+    font-size: 0.85rem;
+    font-weight: 500;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    transition: color 0.15s;
+  }
+  .cta-link:hover { color: var(--accent-hover); }
+  /* --- Quote slide --- */
+  .quote-slide { text-align: left; }
+  .quote-slide h1 {
+    font-size: clamp(2.5rem, 6vw, 5rem);
+    max-width: 90%;
+    line-height: 1.15;
+  }
+  /* --- Two-column --- */
+  .two-col {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 3rem;
+    margin-top: 2rem;
+  }
+  .two-col p {
+    font-size: 0.9rem;
+    line-height: 1.6;
+    color: var(--text-secondary);
+    margin-top: 0.5rem;
+    font-weight: 300;
+  }
+  /* --- Step stack --- */
+  .col-stack { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }
+  .step {
+    font-size: 0.85rem;
+    padding: 0.6rem 0.85rem;
+    border-left: 2px solid var(--border-strong);
+    color: var(--text);
+    font-weight: 400;
+    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+    background: var(--bg-card);
+  }
+  .step.dim { color: var(--text-muted); background: transparent; border-left-color: var(--border); }
+  .step.kill { color: #b44; border-left-color: #b44; }
+  .step.live { color: #3a7; border-left-color: #3a7; }
+  /* --- Three-column --- */
+  .three-col {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 2rem;
+  }
+  .three-col p {
+    font-size: 0.85rem;
+    line-height: 1.55;
+    color: var(--text-secondary);
+    margin-top: 0.3rem;
+    font-weight: 300;
+  }
+  /* --- Capability list --- */
+  .cap-list { margin-top: 2rem; }
+  .cap-row {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    gap: 2rem;
+    padding: 1.1rem 0;
+    border-top: 1px solid var(--border);
+    align-items: baseline;
+  }
+  .cap-q {
+    font-weight: 500;
+    font-size: 0.85rem;
+  }
+  .cap-a {
+    font-size: 0.9rem;
+    line-height: 1.55;
+    color: var(--text-secondary);
+    font-weight: 300;
+  }
+  /* --- Dark callout --- */
+  .callout {
+    background: var(--bg-dark);
+    color: var(--text-light);
+    padding: 2rem 2.5rem;
+    border-radius: var(--radius);
+    margin-top: 2.5rem;
+  }
+  .callout h3 { color: var(--text-muted); margin-bottom: 0.75rem; }
+  .callout p { font-size: 0.95rem; line-height: 1.6; color: #ccc; font-weight: 300; }
+  .callout strong { color: #fff; font-weight: 500; }
+  /* --- Dot flow --- */
+  .dot-flow {
+    display: flex;
+    align-items: flex-start;
+    gap: 0;
+    margin-top: 2.5rem;
+    position: relative;
+  }
+  .dot-flow::before {
+    content: '';
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    right: 10px;
+    height: 1px;
+    background: var(--border-strong);
+  }
+  .dot-step { flex: 1; text-align: center; position: relative; z-index: 1; }
+  .dot {
+    width: 20px;
+    height: 20px;
+    background: var(--text);
+    border-radius: 50%;
+    margin: 0 auto 0.75rem;
+  }
+  .slide.dark .dot { background: var(--text-light); }
+  .dot-step h4 { font-size: 0.8rem; font-weight: 500; margin-bottom: 0.25rem; }
+  .dot-step p { font-size: 0.75rem; color: var(--text-muted); line-height: 1.4; padding: 0 0.5rem; font-weight: 300; }
+  /* --- Stack grid --- */
+  .stack-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+    margin-top: 2rem;
+  }
+  .stack-card {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 1.5rem;
+  }
+  .stack-card-label {
+    font-size: 0.65rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--text-muted);
+    margin-bottom: 0.75rem;
+  }
+  .stack-tool {
+    font-size: 0.85rem;
+    padding: 0.35rem 0;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-weight: 400;
+  }
+  .mark {
+    width: 6px;
+    height: 6px;
+    background: var(--text);
+    border-radius: 50%;
+    display: inline-block;
+  }
+  /* --- Spec flow --- */
+  .spec-flow { margin-top: 2rem; }
+  .spec-block {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 1.5rem;
+    margin-bottom: 1rem;
+  }
+  .spec-block h4 {
+    font-size: 0.7rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--text-muted);
+    margin-bottom: 0.5rem;
+  }
+  .spec-block p { font-size: 0.9rem; line-height: 1.5; font-weight: 300; }
+  .ctx-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
+  .ctx-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); font-weight: 500; }
+  .ctx-pill {
+    font-size: 0.7rem;
+    padding: 0.25rem 0.75rem;
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 999px;
+    font-weight: 400;
+  }
+  .ai-divider { display: flex; align-items: center; gap: 1rem; margin: 1rem 0; }
+  .ai-divider .line { flex: 1; height: 1px; background: var(--border); }
+  .ai-pill {
+    font-size: 0.65rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    font-weight: 500;
+    color: var(--text-muted);
+    padding: 0.3rem 1rem;
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 999px;
+  }
+  .outputs-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
+  .output-card {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 1.25rem;
+  }
+  .output-card h5 { font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.4rem; }
+  .output-card p { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.4; font-weight: 300; }
+  /* --- Product slide --- */
+  .product-row { display: grid; grid-template-columns: 1fr auto; gap: 4rem; align-items: center; }
+  .product-meta { max-width: 500px; }
+  .product-num { font-size: 0.75rem; font-weight: 400; color: var(--text-muted); margin-bottom: 0.75rem; }
+  .product-tag { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; color: var(--text-muted); margin-bottom: 1rem; }
+  .product-headline { font-size: 1.3rem; font-weight: 400; line-height: 1.3; margin-bottom: 0.75rem; }
+  .product-desc { font-size: 0.85rem; line-height: 1.6; color: var(--text-secondary); margin-bottom: 1rem; font-weight: 300; }
+  .product-stat { font-size: 0.75rem; font-weight: 500; color: var(--text-muted); padding-top: 0.75rem; border-top: 1px solid var(--border); }
+  .product-name {
+    font-size: clamp(3rem, 8vw, 7rem);
+    font-weight: 300;
+    line-height: 0.9;
+    letter-spacing: -0.04em;
+    text-align: right;
+    color: var(--text-faint);
+  }
+  /* --- Collage slide --- */
+  .collage-slide { padding: 0; background: var(--bg-dark); }
+  .collage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
+  .collage img, .collage video { width: 100%; height: 100%; object-fit: cover; }
+  /* --- JEDUF --- */
+  .jeduf { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; margin-top: 2rem; }
+  .jeduf-col { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; }
+  .jeduf-col.hero { background: var(--bg-dark); color: var(--text-light); border-color: transparent; }
+  .jeduf-label { font-size: 0.6rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 0.5rem; }
+  .jeduf-col.hero .jeduf-label { color: #888; }
+  .jeduf-title { font-size: 1.1rem; font-weight: 400; margin-bottom: 0.5rem; }
+  .jeduf-philosophy { font-size: 0.8rem; font-style: italic; color: var(--text-muted); margin-bottom: 1rem; line-height: 1.4; font-weight: 300; }
+  .jeduf-col.hero .jeduf-philosophy { color: #aaa; }
+  .jeduf-step { font-size: 0.8rem; padding: 0.3rem 0; border-top: 1px solid var(--border); font-weight: 300; }
+  .jeduf-col.hero .jeduf-step { border-top-color: #333; }
+  /* --- Timeline --- */
+  .timeline { margin-top: 2rem; }
+  .timeline-row { display: grid; grid-template-columns: 80px 24px 1fr; gap: 1.5rem; min-height: 70px; align-items: start; }
+  .timeline-year { font-size: 0.8rem; font-weight: 500; text-align: right; padding-top: 2px; color: var(--text-muted); }
+  .timeline-track { display: flex; flex-direction: column; align-items: center; height: 100%; }
+  .timeline-dot { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; flex-shrink: 0; }
+  .timeline-line { width: 1px; flex: 1; background: var(--border); margin-top: 4px; }
+  .timeline-row:last-child .timeline-line { display: none; }
+  .timeline-content h4 { font-size: 0.85rem; font-weight: 500; margin-bottom: 0.2rem; }
+  .timeline-content p { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.4; font-weight: 300; }
+  /* --- Stat grid --- */
+  .stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
+  .stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; }
+  .stat-card.stat-dark { background: var(--bg-dark); color: var(--text-light); border-color: transparent; }
+  .stat-label { font-size: 0.65rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 0.5rem; }
+  .stat-dark .stat-label { color: #888; }
+  .stat-number { font-size: clamp(2rem, 4vw, 3rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1; margin-bottom: 0.5rem; }
+  .stat-desc { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.4; font-weight: 300; }
+  .stat-dark .stat-desc { color: #999; }
+  /* --- Quote pair --- */
+  .quote-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
+  .quote-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; }
+  .quote-card.quote-dark { background: var(--bg-dark); color: var(--text-light); border-color: transparent; }
+  .quote-text { font-size: 1rem; font-weight: 300; line-height: 1.5; margin-bottom: 1rem; }
+  .quote-attr { font-size: 0.7rem; font-weight: 500; color: var(--text-muted); }
+  .quote-dark .quote-attr { color: #888; }
+  /* --- Logo grid --- */
+  .logo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2rem; }
+  .logo-cell { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; text-align: center; }
+  .logo-mark { width: 40px; height: 40px; background: var(--bg-dark); border-radius: var(--radius-sm); margin: 0 auto 0.75rem; }
+  .logo-name { font-size: 0.8rem; font-weight: 500; }
+  .logo-role { font-size: 0.65rem; color: var(--text-muted); margin-top: 0.15rem; }
+  /* --- Code frame --- */
+  .code-frame { background: var(--bg-dark); border-radius: var(--radius); margin-top: 1.5rem; overflow: hidden; }
+  .code-frame-header { display: flex; align-items: center; padding: 0.75rem 1.25rem; border-bottom: 1px solid #333; }
+  .code-frame-dot { width: 8px; height: 8px; border-radius: 50%; background: #444; margin-right: 6px; }
+  .code-frame-title { margin-left: auto; font-size: 0.65rem; color: #666; font-weight: 400; }
+  .code-frame pre { padding: 1.5rem; font-family: 'SF Mono', ui-monospace, monospace; font-size: 0.78rem; line-height: 1.7; color: #ccc; overflow-x: auto; }
+  .code-comment { color: #555; }
+  .code-keyword { color: #e0e0e0; }
+  .code-string { color: var(--accent); }
+  .code-dim { color: #666; }
+  /* ============================================================
+     NEW CRAFT-SPECIFIC COMPONENTS
+     ============================================================ */
+  /* --- 22. Testimonial grid --- */
+  .testimonial-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1rem;
+    margin-top: 2rem;
+  }
+  .testimonial-card {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  .testimonial-quote {
+    font-size: 0.85rem;
+    line-height: 1.55;
+    color: var(--text);
+    font-weight: 400;
+    margin-bottom: 1.25rem;
+  }
+  .testimonial-author {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+  .testimonial-avatar {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: var(--border-strong);
+    flex-shrink: 0;
+  }
+  .testimonial-name {
+    font-size: 0.75rem;
+    font-weight: 500;
+    line-height: 1.3;
+  }
+  .testimonial-title {
+    font-size: 0.65rem;
+    color: var(--text-muted);
+    font-weight: 400;
+  }
+  /* --- 23. Logo bar --- */
+  .logo-bar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 3rem;
+    margin-top: 2rem;
+    padding: 1.5rem 2rem;
+    border-top: 1px solid var(--border);
+    border-bottom: 1px solid var(--border);
+    flex-wrap: wrap;
+  }
+  .logo-bar-item {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: var(--text);
+    letter-spacing: -0.02em;
+    white-space: nowrap;
+  }
+  /* --- 24. Art overlay (painting + UI) --- */
+  .art-overlay {
+    position: relative;
+    margin-top: 2rem;
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    aspect-ratio: 16/9;
+  }
+  .art-overlay-bg {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(135deg, #8b7355 0%, #a0926e 25%, #6b7c5a 50%, #8a9470 75%, #c4b896 100%);
+    filter: brightness(0.85) saturate(0.8);
+  }
+  .art-overlay-ui {
+    position: absolute;
+    inset: 10%;
+    background: var(--bg-card);
+    border-radius: var(--radius);
+    box-shadow: 0 25px 80px rgba(0,0,0,0.3), 0 8px 20px rgba(0,0,0,0.15);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+  .art-overlay-titlebar {
+    display: flex;
+    align-items: center;
+    padding: 0.6rem 1rem;
+    background: #f8f8f6;
+    border-bottom: 1px solid var(--border);
+    gap: 0.4rem;
+  }
+  .art-overlay-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+  }
+  .art-overlay-dot:nth-child(1) { background: #ff605c; }
+  .art-overlay-dot:nth-child(2) { background: #ffbd44; }
+  .art-overlay-dot:nth-child(3) { background: #00ca4e; }
+  .art-overlay-content {
+    flex: 1;
+    padding: 1.5rem;
+    display: flex;
+    gap: 1rem;
+    font-size: 0.7rem;
+    color: var(--text-secondary);
+    overflow: hidden;
+  }
+  .art-overlay-sidebar {
+    width: 35%;
+    border-right: 1px solid var(--border);
+    padding-right: 1rem;
+  }
+  .art-overlay-main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  .art-overlay-line {
+    height: 6px;
+    background: var(--border);
+    border-radius: 3px;
+  }
+  .art-overlay-line.short { width: 60%; }
+  .art-overlay-line.accent { background: var(--accent); width: 40%; opacity: 0.6; }
+  .art-overlay-caption {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 2rem 2.5rem;
+    background: linear-gradient(transparent, rgba(0,0,0,0.7));
+    color: #fff;
+  }
+  .art-overlay-caption h3 {
+    font-size: 1.1rem;
+    font-weight: 400;
+    color: #fff;
+    margin-bottom: 0.25rem;
+  }
+  .art-overlay-caption p {
+    font-size: 0.75rem;
+    color: rgba(255,255,255,0.7);
+    font-weight: 300;
+  }
+  /* --- 25. Feature card row --- */
+  .feature-cards {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1rem;
+    margin-top: 2rem;
+  }
+  .feature-card {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 1.75rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    min-height: 200px;
+  }
+  .feature-card-title {
+    font-size: 1rem;
+    font-weight: 500;
+    margin-bottom: 0.5rem;
+  }
+  .feature-card-desc {
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+    line-height: 1.55;
+    font-weight: 300;
+    margin-bottom: 1.5rem;
+  }
+  .feature-card-inner {
+    background: var(--bg-card-warm);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    padding: 1rem;
+    flex: 1;
+    margin-top: 1rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 0.4rem;
+  }
+  .feature-card-mock-line {
+    height: 5px;
+    background: var(--border);
+    border-radius: 3px;
+  }
+  .feature-card-mock-line.short { width: 50%; }
+  .feature-card-mock-line.accent { background: var(--accent); width: 35%; opacity: 0.4; }
+  /* --- 26. Update row (changelog) --- */
+  .update-row {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 1rem;
+    margin-top: 2rem;
+  }
+  .update-card {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 1.25rem;
+  }
+  .update-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.75rem;
+  }
+  .update-badge {
+    font-size: 0.6rem;
+    font-weight: 500;
+    padding: 0.15rem 0.5rem;
+    border: 1px solid var(--border-strong);
+    border-radius: 999px;
+    color: var(--text-secondary);
+  }
+  .update-date {
+    font-size: 0.7rem;
+    color: var(--text-muted);
+    font-weight: 400;
+  }
+  .update-title {
+    font-size: 0.85rem;
+    font-weight: 400;
+    line-height: 1.4;
+  }
+  /* --- Progress bar --- */
+  #progress {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 2px;
+    background: var(--accent);
+    transition: width 0.3s ease;
+    z-index: 100;
+  }
+  /* --- Navigation --- */
+  .nav {
+    position: fixed;
+    bottom: 2rem;
+    right: 2.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    z-index: 100;
+  }
+  .nav span {
+    font-size: 0.7rem;
+    color: var(--text-muted);
+    font-weight: 400;
+  }
+  .nav-buttons { display: flex; gap: 0.35rem; }
+  .nav-btn {
+    width: 32px;
+    height: 32px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    background: var(--bg-card);
+    color: var(--text);
+    cursor: pointer;
+    font-size: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.15s;
+  }
+  .nav-btn:hover {
+    background: var(--text);
+    color: var(--bg);
+    border-color: var(--text);
+  }
+  /* --- PDF button --- */
+  .pdf-btn {
+    position: fixed;
+    bottom: 2rem;
+    left: 2.5rem;
+    font-size: 0.65rem;
+    font-weight: 500;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    background: var(--bg-card);
+    color: var(--text-muted);
+    padding: 0.5rem 1.25rem;
+    cursor: pointer;
+    font-family: inherit;
+    transition: all 0.15s;
+    z-index: 100;
+  }
+  .pdf-btn:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
+  /* --- Print --- */
+  @page { size: 13.333in 7.5in; margin: 0; }
+  @media print {
+    html, body { overflow: visible; height: auto; }
+    .slide { display: flex !important; position: relative; page-break-after: always; height: 100vh; }
+    .nav, .pdf-btn, #progress { display: none !important; }
+  }
+</style>
+</head>
+<body>
+<div id="progress"></div>
+<div class="deck">
+  <!-- ========== 1. COVER ========== -->
+  <section class="slide active">
+    <div class="slide-inner">
+      <div class="eyebrow">Company · Product launch</div>
+      <h1>Built to make you<br>extraordinarily productive.</h1>
+      <p class="subtitle">A single sentence that frames what you've built, why it matters, and who it's for. Clear, warm, no jargon.</p>
+      <div class="meta">Name · Title · Date</div>
+    </div>
+  </section>
+  <!-- ========== 2. QUOTE ========== -->
+  <section class="slide quote-slide">
+    <div class="slide-inner">
+      <h1>The new way to build software.</h1>
+    </div>
+  </section>
+  <!-- ========== 3. LOGO BAR ========== -->
+  <section class="slide">
+    <div class="slide-inner">
+      <div class="eyebrow" style="text-align:center;">Trusted every day by teams that build world-class software</div>
+      <div class="logo-bar">
+        <div class="logo-bar-item">Stripe</div>
+        <div class="logo-bar-item">OpenAI</div>
+        <div class="logo-bar-item">Linear</div>
+        <div class="logo-bar-item">Datadog</div>
+        <div class="logo-bar-item">NVIDIA</div>
+        <div class="logo-bar-item">Figma</div>
+        <div class="logo-bar-item">Adobe</div>
+      </div>
+    </div>
+  </section>
+  <!-- ========== 4. ART OVERLAY ========== -->
+  <section class="slide">
+    <div class="slide-inner">
+      <div class="eyebrow">The experience</div>
+      <h2>Agents turn ideas into code.</h2>
+      <p class="subtitle">Accelerate development by handing off tasks, while you focus on making decisions.</p>
+      <div class="art-overlay">
+        <div class="art-overlay-bg"></div>
+        <div class="art-overlay-ui">
+          <div class="art-overlay-titlebar">
+            <div class="art-overlay-dot"></div>
+            <div class="art-overlay-dot"></div>
+            <div class="art-overlay-dot"></div>
+          </div>
+          <div class="art-overlay-content">
+            <div class="art-overlay-sidebar">
+              <div class="art-overlay-line" style="margin-bottom:0.5rem;"></div>
+              <div class="art-overlay-line short" style="margin-bottom:0.8rem;"></div>
+              <div class="art-overlay-line" style="margin-bottom:0.4rem;"></div>
+              <div class="art-overlay-line" style="margin-bottom:0.4rem;"></div>
+              <div class="art-overlay-line accent" style="margin-bottom:0.4rem;"></div>
+              <div class="art-overlay-line" style="margin-bottom:0.4rem;"></div>
+              <div class="art-overlay-line short"></div>
+            </div>
+            <div class="art-overlay-main">
+              <div class="art-overlay-line" style="width:80%;"></div>
+              <div class="art-overlay-line short"></div>
+              <div style="height:0.5rem;"></div>
+              <div class="art-overlay-line"></div>
+              <div class="art-overlay-line"></div>
+              <div class="art-overlay-line" style="width:70%;"></div>
+              <div style="height:0.5rem;"></div>
+              <div class="art-overlay-line accent" style="width:25%;"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- ========== 5. FEATURE CARDS ========== -->
+  <section class="slide">
+    <div class="slide-inner">
+      <h2>Understands your codebase,<br><span class="dim">no matter the size.</span></h2>
+      <div class="feature-cards">
+        <div class="feature-card">
+          <div>
+            <div class="feature-card-title">Multiple models</div>
+            <div class="feature-card-desc">Subagents run in parallel to explore your codebase, each using the best model for the task.</div>
+          </div>
+          <div class="feature-card-inner">
+            <div class="feature-card-mock-line"></div>
+            <div class="feature-card-mock-line short"></div>
+            <div class="feature-card-mock-line accent"></div>
+          </div>
+        </div>
+        <div class="feature-card">
+          <div>
+            <div class="feature-card-title">Deep indexing</div>
+            <div class="feature-card-desc">A custom embedding model gives agents best-in-class recall across large codebases.</div>
+          </div>
+          <div class="feature-card-inner">
+            <div class="feature-card-mock-line"></div>
+            <div class="feature-card-mock-line"></div>
+            <div class="feature-card-mock-line short"></div>
+          </div>
+        </div>
+        <div class="feature-card">
+          <div>
+            <div class="feature-card-title">Team rules</div>
+            <div class="feature-card-desc">Teach it your preferences, from team conventions to specific architectural decisions.</div>
+          </div>
+          <div class="feature-card-inner">
+            <div class="feature-card-mock-line accent"></div>
+            <div class="feature-card-mock-line"></div>
+            <div class="feature-card-mock-line short"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- ========== 6. TWO-COLUMN ========== -->
+  <section class="slide">
+    <div class="slide-inner">
+      <div class="eyebrow">The shift</div>
+      <h2>Before and after.</h2>
+      <div class="two-col">
+        <div>
+          <h3>The old way</h3>
+          <p>Manual search across files. Copy-paste between tools. Context switching that kills focus. Hours spent on boilerplate that adds no value.</p>
+        </div>
+        <div>
+          <h3>The new way</h3>
+          <p>Describe what you want. The agent reads your codebase, understands your patterns, and builds it. You review and iterate.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- ========== 7. TESTIMONIAL GRID ========== -->
+  <section class="slide">
+    <div class="slide-inner">
+      <h2 style="text-align:center;">The new way to build software.</h2>
+      <div class="testimonial-grid">
+        <div class="testimonial-card">
+          <div class="testimonial-quote">"It was night and day from one batch to another, adoption went from single digits to over 80%."</div>
+          <div class="testimonial-author">
+            <div class="testimonial-avatar"></div>
+            <div><div class="testimonial-name">Name One</div><div class="testimonial-title">Role, Company</div></div>
+          </div>
+        </div>
+        <div class="testimonial-card">
+          <div class="testimonial-quote">"Every one of our engineers, some 40,000, are now assisted by AI and our productivity has gone up incredibly."</div>
+          <div class="testimonial-author">
+            <div class="testimonial-avatar"></div>
+            <div><div class="testimonial-name">Name Two</div><div class="testimonial-title">Role, Company</div></div>
+          </div>
+        </div>
+        <div class="testimonial-card">
+          <div class="testimonial-quote">"You control how much independence to give the AI. You can do targeted edits, or you can let it rip."</div>
+          <div class="testimonial-author">
+            <div class="testimonial-avatar"></div>
+            <div><div class="testimonial-name">Name Three</div><div class="testimonial-title">Role, Company</div></div>
+          </div>
+        </div>
+        <div class="testimonial-card">
+          <div class="testimonial-quote">"We spend more on R&D and software creation than any other undertaking, and there's significant economic advantages."</div>
+          <div class="testimonial-author">
+            <div class="testimonial-avatar"></div>
+            <div><div class="testimonial-name">Name Four</div><div class="testimonial-title">Role, Company</div></div>
+          </div>
+        </div>
+        <div class="testimonial-card">
+          <div class="testimonial-quote">"The most useful AI tool that I currently pay for, hands down. It's fast, autocompletes when and where you need it."</div>
+          <div class="testimonial-author">
+            <div class="testimonial-avatar"></div>
+            <div><div class="testimonial-name">Name Five</div><div class="testimonial-title">Role, Company</div></div>
+          </div>
+        </div>
+        <div class="testimonial-card">
+          <div class="testimonial-quote">"We are at the 1% of what's possible, and it's in interactive experiences like this where models shine brightest."</div>
+          <div class="testimonial-author">
+            <div class="testimonial-avatar"></div>
+            <div><div class="testimonial-name">Name Six</div><div class="testimonial-title">Role, Company</div></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- ========== 8. CAPABILITY LIST ========== -->
+  <section class="slide">
+    <div class="slide-inner">
+      <div class="eyebrow">Everywhere you work</div>
+      <h2>One agent across every surface.</h2>
+      <div class="cap-list">
+        <div class="cap-row"><div class="cap-q">Desktop</div><div class="cap-a">The full IDE experience. Manual to agentic coding, in one familiar editor.</div></div>
+        <div class="cap-row"><div class="cap-q">CLI</div><div class="cap-a">Run agents in any terminal, script, or editor. Same power, no GUI needed.</div></div>
+        <div class="cap-row"><div class="cap-q">Integrations</div><div class="cap-a">Start agents from GitHub, Slack, Linear, and more. Where your team already works.</div></div>
+        <div class="cap-row"><div class="cap-q">Web & Mobile</div><div class="cap-a">Run cloud agents from your browser or phone. No installation required.</div></div>
+      </div>
+    </div>
+  </section>
+  <!-- ========== 9. STAT GRID ========== -->
+  <section class="slide">
+    <div class="slide-inner">
+      <div class="eyebrow">Impact</div>
+      <h2>The numbers.</h2>
+      <div class="stat-grid">
+        <div class="stat-card">
+          <div class="stat-label">Adoption</div>
+          <div class="stat-number">80%+</div>
+          <div class="stat-desc">Team adoption rate within the first quarter of deployment.</div>
+        </div>
+        <div class="stat-card stat-dark">
+          <div class="stat-label">Engineers</div>
+          <div class="stat-number">40,000</div>
+          <div class="stat-desc">Engineers using AI-assisted development across the organization.</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-label">Velocity</div>
+          <div class="stat-number">3×</div>
+          <div class="stat-desc">Faster from idea to pull request compared to the previous year.</div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- ========== 10. DOT FLOW ========== -->
+  <section class="slide">
+    <div class="slide-inner">
+      <div class="eyebrow">Workflow</div>
+      <h2>How it works.</h2>
+      <div class="dot-flow">
+        <div class="dot-step"><div class="dot"></div><h4>Describe</h4><p>Tell the agent what you need</p></div>
+        <div class="dot-step"><div class="dot"></div><h4>Plan</h4><p>Agent reads codebase, proposes steps</p></div>
+        <div class="dot-step"><div class="dot"></div><h4>Build</h4><p>Code written across files</p></div>
+        <div class="dot-step"><div class="dot"></div><h4>Review</h4><p>You inspect the diff</p></div>
+        <div class="dot-step"><div class="dot"></div><h4>Ship</h4><p>Merge and deploy</p></div>
+      </div>
+    </div>
+  </section>
+  <!-- ========== 11. DARK CALLOUT ========== -->
+  <section class="slide">
+    <div class="slide-inner">
+      <div class="eyebrow">Why now</div>
+      <h2>The moment matters.</h2>
+      <div class="callout">
+        <h3>Context</h3>
+        <p>The tools are finally good enough. <strong>Not because AI got smarter — because it learned to read your code.</strong> Context-aware agents change the economics of software development.</p>
+      </div>
+    </div>
+  </section>
+  <!-- ========== 12. UPDATE ROW ========== -->
+  <section class="slide">
+    <div class="slide-inner">
+      <div class="eyebrow">Changelog</div>
+      <h2>Always shipping.</h2>
+      <div class="update-row">
+        <div class="update-card">
+          <div class="update-header">
+            <span class="update-badge">3.3</span>
+            <span class="update-date">May 7, 2026</span>
+          </div>
+          <div class="update-title">PR Review, Build Plan in Parallel, and Split PRs</div>
+        </div>
+        <div class="update-card">
+          <div class="update-header">
+            <span class="update-badge">3.3</span>
+            <span class="update-date">May 6, 2026</span>
+          </div>
+          <div class="update-title">Context Usage Breakdown</div>
+        </div>
+        <div class="update-card">
+          <div class="update-header">
+            <span class="update-date">May 4, 2026</span>
+          </div>
+          <div class="update-title">Model controls, spend management, and usage analytics</div>
+        </div>
+        <div class="update-card">
+          <div class="update-header">
+            <span class="update-date">May 1, 2026</span>
+          </div>
+          <div class="update-title">Team Marketplace Updates</div>
+        </div>
+      </div>
+      <div style="margin-top:1.25rem;">
+        <a href="#" class="cta-link">See what's new &rarr;</a>
+      </div>
+    </div>
+  </section>
+  <!-- ========== 13. THREE-COLUMN ========== -->
+  <section class="slide">
+    <div class="slide-inner">
+      <div class="eyebrow">Architecture</div>
+      <h2>Three pillars.</h2>
+      <div class="three-col" style="margin-top: 2rem;">
+        <div><h3>Models</h3><p>The best foundation models, orchestrated to work together. Each sub-task routed to the right model.</p></div>
+        <div><h3>Context</h3><p>Deep codebase understanding through custom embeddings. The agent knows your patterns before you ask.</p></div>
+        <div><h3>Interface</h3><p>Meet developers where they are. Desktop, terminal, browser, phone. One experience everywhere.</p></div>
+      </div>
+    </div>
+  </section>
+  <!-- ========== 14. TIMELINE ========== -->
+  <section class="slide">
+    <div class="slide-inner">
+      <div class="eyebrow">Journey</div>
+      <h2>How we got here.</h2>
+      <div class="timeline">
+        <div class="timeline-row">
+          <div class="timeline-year">2022</div>
+          <div class="timeline-track"><div class="timeline-dot"></div><div class="timeline-line"></div></div>
+          <div class="timeline-content"><h4>Started</h4><p>Small team, big bet. The hypothesis: AI can understand entire codebases.</p></div>
+        </div>
+        <div class="timeline-row">
+          <div class="timeline-year">2023</div>
+          <div class="timeline-track"><div class="timeline-dot"></div><div class="timeline-line"></div></div>
+          <div class="timeline-content"><h4>Product-market fit</h4><p>Tab completion that actually works. Developers started switching in weeks, not months.</p></div>
+        </div>
+        <div class="timeline-row">
+          <div class="timeline-year">2025</div>
+          <div class="timeline-track"><div class="timeline-dot"></div><div class="timeline-line"></div></div>
+          <div class="timeline-content"><h4>Agents</h4><p>From autocomplete to autonomous. Agents that plan, build, and iterate across entire projects.</p></div>
+        </div>
+        <div class="timeline-row">
+          <div class="timeline-year">2026</div>
+          <div class="timeline-track"><div class="timeline-dot"></div><div class="timeline-line"></div></div>
+          <div class="timeline-content"><h4>The platform</h4><p>Every surface. Every team. The way software gets built, fundamentally different.</p></div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- ========== 15. PRODUCT SLIDE ========== -->
+  <section class="slide">
+    <div class="slide-inner">
+      <div class="product-row">
+        <div class="product-meta">
+          <div class="product-num">/01</div>
+          <div class="product-tag">Core product</div>
+          <h3 class="product-headline">The IDE that thinks with you.</h3>
+          <p class="product-desc">Not just autocomplete. A full development environment that understands your codebase, your team's conventions, and your intent.</p>
+          <div class="product-stat">Used by 40,000+ engineers</div>
+        </div>
+        <div class="product-name">Editor</div>
+      </div>
+    </div>
+  </section>
+  <!-- ========== 16. COLLAGE ========== -->
+  <section class="slide collage-slide">
+    <div class="collage">
+      <img src="media/KMSsp437.jpg" alt="" style="width:100%;height:100%;object-fit:cover;">
+    </div>
+  </section>
+  <!-- ========== 17. QUOTE PAIR ========== -->
+  <section class="slide">
+    <div class="slide-inner">
+      <div class="eyebrow">Perspectives</div>
+      <h2>Two views.</h2>
+      <div class="quote-pair">
+        <div class="quote-card">
+          <div class="quote-text">"The best tools disappear. You stop thinking about the tool and start thinking about the work."</div>
+          <div class="quote-attr">Builder</div>
+        </div>
+        <div class="quote-card quote-dark">
+          <div class="quote-text">"Speed without quality is just faster failure. The bar has to stay high."</div>
+          <div class="quote-attr">Architect</div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- ========== 18. JEDUF ========== -->
+  <section class="slide">
+    <div class="slide-inner">
+      <div class="eyebrow">Spectrum</div>
+      <h2>Finding the right level.</h2>
+      <div class="jeduf">
+        <div class="jeduf-col">
+          <div class="jeduf-label">Too manual</div>
+          <div class="jeduf-title">Write everything</div>
+          <div class="jeduf-philosophy">"Every line by hand."</div>
+          <div class="jeduf-step">Full control</div>
+          <div class="jeduf-step">Slow iteration</div>
+          <div class="jeduf-step">High cognitive load</div>
+        </div>
+        <div class="jeduf-col hero">
+          <div class="jeduf-label">Just right</div>
+          <div class="jeduf-title">Human + agent</div>
+          <div class="jeduf-philosophy">"You decide. It builds."</div>
+          <div class="jeduf-step">Intent-driven</div>
+          <div class="jeduf-step">Fast iteration</div>
+          <div class="jeduf-step">Quality preserved</div>
+        </div>
+        <div class="jeduf-col">
+          <div class="jeduf-label">Too autonomous</div>
+          <div class="jeduf-title">Fully automated</div>
+          <div class="jeduf-philosophy">"Just ship it, fix later."</div>
+          <div class="jeduf-step">No oversight</div>
+          <div class="jeduf-step">Drift from intent</div>
+          <div class="jeduf-step">Technical debt</div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- ========== 19. DARK SLIDE ========== -->
+  <section class="slide dark">
+    <div class="slide-inner">
+      <div class="eyebrow">The honest part</div>
+      <h1>We're early. <span class="dim">And that's the point.</span></h1>
+      <p class="subtitle">The tools will get better. The models will get smarter. The teams that start building this way now will compound every advantage.</p>
+    </div>
+  </section>
+  <!-- ========== 20. ART OVERLAY (as closing visual) ========== -->
+  <section class="slide">
+    <div class="slide-inner" style="display:flex; flex-direction:column; align-items:center; text-align:center;">
+      <h2>Craft meets code.</h2>
+      <p class="subtitle" style="text-align:center; margin-bottom:2rem;">The best software has always been made by people who care deeply about their tools.</p>
+      <div class="art-overlay" style="width:100%; max-width:900px;">
+        <div class="art-overlay-bg" style="background:linear-gradient(160deg, #7a6a4a 0%, #9a8866 20%, #5a6a4a 45%, #889070 65%, #b4a876 85%, #d4c896 100%);"></div>
+        <div class="art-overlay-ui">
+          <div class="art-overlay-titlebar">
+            <div class="art-overlay-dot"></div>
+            <div class="art-overlay-dot"></div>
+            <div class="art-overlay-dot"></div>
+          </div>
+          <div class="art-overlay-content">
+            <div class="art-overlay-sidebar">
+              <div class="art-overlay-line" style="margin-bottom:0.5rem;"></div>
+              <div class="art-overlay-line short" style="margin-bottom:0.8rem;"></div>
+              <div class="art-overlay-line accent" style="margin-bottom:0.4rem;"></div>
+              <div class="art-overlay-line" style="margin-bottom:0.4rem;"></div>
+              <div class="art-overlay-line short"></div>
+            </div>
+            <div class="art-overlay-main">
+              <div class="art-overlay-line" style="width:85%;"></div>
+              <div class="art-overlay-line short"></div>
+              <div style="height:0.3rem;"></div>
+              <div class="art-overlay-line"></div>
+              <div class="art-overlay-line" style="width:75%;"></div>
+              <div style="height:0.3rem;"></div>
+              <div class="art-overlay-line accent" style="width:30%;"></div>
+            </div>
+          </div>
+        </div>
+        <div class="art-overlay-caption">
+          <h3>Your product, built with care.</h3>
+          <p>Classical craft. Modern tools. The same attention to detail.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- ========== 21. CLOSING ========== -->
+  <section class="slide dark quote-slide">
+    <div class="slide-inner">
+      <h1>Stay on<br>the frontier.</h1>
+    </div>
+  </section>
+  <!-- ========== 22. THANKS ========== -->
+  <section class="slide">
+    <div class="slide-inner">
+      <h1 style="font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 300;">Thank you.</h1>
+      <p class="subtitle">Questions?</p>
+      <div class="meta">Name · Title</div>
+      <div style="margin-top: 1.5rem;">
+        <a href="#" class="cta-link">Learn more &rarr;</a>
+      </div>
+    </div>
+  </section>
+</div>
+<button class="pdf-btn" onclick="downloadPDF()">Download PDF</button>
+<div class="nav">
+  <span id="counter">1 / 22</span>
+  <div class="nav-buttons">
+    <button class="nav-btn" onclick="prev()">&#8249;</button>
+    <button class="nav-btn" onclick="next()">&#8250;</button>
+  </div>
+</div>
+<script>
+  const slides = document.querySelectorAll('.slide');
+  const counter = document.getElementById('counter');
+  const progress = document.getElementById('progress');
+  let current = 0;
+  function show(i) {
+    slides.forEach(s => s.classList.remove('active'));
+    slides[i].classList.add('active');
+    counter.textContent = `${i + 1} / ${slides.length}`;
+    progress.style.width = `${((i + 1) / slides.length) * 100}%`;
+    current = i;
+  }
+  function next() { if (current < slides.length - 1) show(current + 1); }
+  function prev() { if (current > 0) show(current - 1); }
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'PageDown') { e.preventDefault(); next(); }
+    if (e.key === 'ArrowLeft' || e.key === 'PageUp') { e.preventDefault(); prev(); }
+    if (e.key === 'Home') { show(0); }
+    if (e.key === 'End') { show(slides.length - 1); }
+    if (e.key === 'p' || e.key === 'P') { e.preventDefault(); downloadPDF(); }
+  });
+  function downloadPDF() {
+    const originalTitle = document.title;
+    document.title = 'deck-craft';
+    window.print();
+    setTimeout(() => { document.title = originalTitle; }, 1000);
+  }
+  let touchStartX = 0;
+  let touchStartY = 0;
+  const SWIPE_THRESHOLD = 50;
+  document.addEventListener('touchstart', (e) => {
+    touchStartX = e.changedTouches[0].screenX;
+    touchStartY = e.changedTouches[0].screenY;
+  }, { passive: true });
+  document.addEventListener('touchend', (e) => {
+    const dx = e.changedTouches[0].screenX - touchStartX;
+    const dy = e.changedTouches[0].screenY - touchStartY;
+    if (Math.abs(dx) < SWIPE_THRESHOLD || Math.abs(dy) > Math.abs(dx)) return;
+    if (dx < 0) next();
+    else prev();
+  }, { passive: true });
+  const isEmbed = new URLSearchParams(window.location.search).has('embed');
+  show(0);
+</script>
+</body>
+</html>