npm - agent-devkit - Versions diffs - 0.0.1 - Mend

agent-devkit 0.0.1

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 (4610) hide show

package/runtime/vendor/plugins/open-design/_official/examples/html-ppt-zhangzara-8-bit-orbit/example.html ADDED Viewed

@@ -0,0 +1,1657 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Open Design | 8-Bit Orbit Pixel Deck</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,400;0,500;1,500&family=Space+Mono:wght@400;700&family=Tektur:wght@400;700;900&display=swap" rel="stylesheet">
+  <style>
+    :root {
+      --neon-pink: #F0A6CA;
+      --neon-cyan: #5EDCF4;
+      --neon-yellow: #F4D03F;
+      --deep-navy: #0F1B3D;
+      --dark-void: #0A0E27;
+      --soft-lavender: #E2D5F2;
+      --font-display: 'Tektur', sans-serif;
+      --font-body: 'Chakra Petch', sans-serif;
+      --font-mono: 'Space Mono', monospace;
+    }
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    html, body {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      font-family: var(--font-body);
+      color: var(--dark-void);
+      background: var(--dark-void);
+    }
+    /* Scroll behavior for slide navigation */
+    .deck {
+      width: 100%;
+      height: 100vh;
+      overflow: hidden;
+      position: relative;
+    }
+    .slides-container {
+      width: 100%;
+      height: 100%;
+      transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
+    }
+    .slide {
+      width: 100%;
+      height: 100vh;
+      min-height: 100vh;
+      position: relative;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      padding: 3vh 4vw;
+    }
+    /* === GLOBAL ATMOSPHERIC OVERLAYS === */
+    /* Scanlines */
+    .scanlines::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background: repeating-linear-gradient(
+        0deg,
+        transparent 0px,
+        transparent 2px,
+        rgba(10, 14, 39, 0.04) 2px,
+        rgba(10, 14, 39, 0.04) 4px
+      );
+      pointer-events: none;
+      z-index: 50;
+      mix-blend-mode: multiply;
+    }
+    /* Grain / Noise */
+    .grain::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+      opacity: 0.035;
+      pointer-events: none;
+      z-index: 49;
+    }
+    /* CRT vignette glow */
+    .crt-glow::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background: radial-gradient(ellipse at center, transparent 50%, rgba(10, 14, 39, 0.25) 100%);
+      pointer-events: none;
+      z-index: 51;
+    }
+    /* Pixel grid background pattern */
+    .bg-grid {
+      background-color: var(--dark-void);
+      background-image:
+        linear-gradient(rgba(94, 220, 244, 0.07) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(94, 220, 244, 0.07) 1px, transparent 1px);
+      background-size: 40px 40px;
+    }
+    .bg-grid-pink {
+      background-color: var(--neon-pink);
+      background-image:
+        linear-gradient(rgba(15, 27, 61, 0.06) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(15, 27, 61, 0.06) 1px, transparent 1px);
+      background-size: 40px 40px;
+    }
+    .bg-grid-cyan {
+      background-color: var(--neon-cyan);
+      background-image:
+        linear-gradient(rgba(15, 27, 61, 0.08) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(15, 27, 61, 0.08) 1px, transparent 1px);
+      background-size: 40px 40px;
+    }
+    .bg-grid-lavender {
+      background-color: var(--soft-lavender);
+      background-image:
+        linear-gradient(rgba(15, 27, 61, 0.05) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(15, 27, 61, 0.05) 1px, transparent 1px);
+      background-size: 40px 40px;
+    }
+    /* Moving starfield for dark slides */
+    .starfield {
+      position: absolute;
+      inset: 0;
+      overflow: hidden;
+      z-index: 1;
+    }
+    .starfield .star {
+      position: absolute;
+      width: 4px;
+      height: 4px;
+      background: var(--neon-cyan);
+      opacity: 0.6;
+      animation: twinkle 3s infinite ease-in-out;
+    }
+    .starfield .star:nth-child(2n) { background: var(--neon-yellow); }
+    .starfield .star:nth-child(3n) { background: var(--neon-pink); }
+    .starfield .star:nth-child(4n) { width: 6px; height: 6px; }
+    @keyframes twinkle {
+      0%, 100% { opacity: 0.3; transform: scale(1); }
+      50% { opacity: 0.9; transform: scale(1.3); }
+    }
+    /* Floating pixel particles */
+    .pixel-particles {
+      position: absolute;
+      inset: 0;
+      overflow: hidden;
+      z-index: 1;
+      pointer-events: none;
+    }
+    .pixel-particles .p {
+      position: absolute;
+      width: 8px;
+      height: 8px;
+      opacity: 0.4;
+      animation: float 8s infinite ease-in-out;
+    }
+    @keyframes float {
+      0%, 100% { transform: translateY(0) rotate(0deg); }
+      50% { transform: translateY(-30px) rotate(90deg); }
+    }
+    /* === PIXEL UI COMPONENTS === */
+    /* Pixel border effect */
+    .pixel-box {
+      position: relative;
+      background: var(--deep-navy);
+      color: white;
+    }
+    .pixel-box::before {
+      content: "";
+      position: absolute;
+      inset: -4px;
+      background: var(--neon-cyan);
+      z-index: -1;
+      clip-path: polygon(
+        0 4px, 4px 4px, 4px 0,
+        calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px,
+        100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%,
+        4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px)
+      );
+    }
+    .pixel-box.yellow::before { background: var(--neon-yellow); }
+    .pixel-box.pink::before { background: var(--neon-pink); }
+    /* Pixel button */
+    .pixel-btn {
+      display: inline-block;
+      font-family: var(--font-display);
+      font-weight: 700;
+      font-size: 1rem;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      padding: 16px 36px;
+      background: var(--neon-cyan);
+      color: var(--deep-navy);
+      border: none;
+      cursor: pointer;
+      position: relative;
+      box-shadow:
+        4px 0 0 0 var(--deep-navy),
+        0 4px 0 0 var(--deep-navy),
+        4px 4px 0 0 var(--deep-navy),
+        8px 4px 0 0 var(--neon-yellow),
+        4px 8px 0 0 var(--neon-yellow),
+        8px 8px 0 0 var(--neon-yellow);
+      transition: transform 0.1s, box-shadow 0.1s;
+    }
+    .pixel-btn:hover {
+      transform: translate(2px, 2px);
+      box-shadow:
+        2px 0 0 0 var(--deep-navy),
+        0 2px 0 0 var(--deep-navy),
+        2px 2px 0 0 var(--deep-navy),
+        4px 2px 0 0 var(--neon-yellow),
+        2px 4px 0 0 var(--neon-yellow),
+        4px 4px 0 0 var(--neon-yellow);
+    }
+    .pixel-btn.pink-btn {
+      background: var(--neon-pink);
+      box-shadow:
+        4px 0 0 0 var(--deep-navy),
+        0 4px 0 0 var(--deep-navy),
+        4px 4px 0 0 var(--deep-navy),
+        8px 4px 0 0 var(--neon-cyan),
+        4px 8px 0 0 var(--neon-cyan),
+        8px 8px 0 0 var(--neon-cyan);
+    }
+    /* Pixel text shadow like the reference image */
+    .pixel-hero-text {
+      font-family: var(--font-display);
+      font-weight: 900;
+      font-size: clamp(3rem, 10vw, 8rem);
+      line-height: 1.05;
+      color: var(--neon-cyan);
+      text-shadow:
+        4px 4px 0 var(--neon-yellow),
+        8px 8px 0 var(--deep-navy);
+      letter-spacing: 0.04em;
+    }
+    /* Decorative pixel corners */
+    .pixel-corners {
+      position: relative;
+    }
+    .pixel-corners::before,
+    .pixel-corners::after {
+      content: "";
+      position: absolute;
+      width: 24px;
+      height: 24px;
+      border: 4px solid var(--neon-cyan);
+    }
+    .pixel-corners::before {
+      top: -8px;
+      left: -8px;
+      border-right: none;
+      border-bottom: none;
+    }
+    .pixel-corners::after {
+      bottom: -8px;
+      right: -8px;
+      border-left: none;
+      border-top: none;
+    }
+    .pixel-corners.yellow-corners::before,
+    .pixel-corners.yellow-corners::after { border-color: var(--neon-yellow); }
+    .pixel-corners.pink-corners::before,
+    .pixel-corners.pink-corners::after { border-color: var(--neon-pink); }
+    /* on the cyan slide the default cyan brackets vanish into the background */
+    .bg-grid-cyan .pixel-corners::before,
+    .bg-grid-cyan .pixel-corners::after { border-color: var(--deep-navy); }
+    /* Section labels */
+    .pixel-label {
+      font-family: var(--font-mono);
+      font-size: 0.75rem;
+      font-weight: 700;
+      letter-spacing: 0.2em;
+      text-transform: uppercase;
+      color: var(--neon-yellow);
+      background: var(--deep-navy);
+      padding: 6px 14px;
+      display: inline-block;
+      margin-bottom: 1.5rem;
+    }
+    /* === SLIDE CONTENT LAYOUTS === */
+    .slide-content {
+      position: relative;
+      z-index: 10;
+      width: 100%;
+      max-width: 1200px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+    h1, h2, h3, h4 {
+      font-family: var(--font-display);
+      font-weight: 700;
+      line-height: 1.15;
+    }
+    h1 { font-size: clamp(2rem, 5vw, 4rem); }
+    h2 { font-size: clamp(1.5rem, 3.5vw, 2.8rem); }
+    h3 { font-size: clamp(1.1rem, 2vw, 1.5rem); }
+    p, li {
+      font-family: var(--font-body);
+      font-size: clamp(0.9rem, 1.2vw, 1.15rem);
+      line-height: 1.7;
+      font-weight: 400;
+    }
+    /* === NAVIGATION === */
+    /* dark HUD backdrop so cyan dots stay legible on the cyan/lavender slides too */
+    .nav-dots {
+      position: fixed;
+      right: 24px;
+      top: 50%;
+      transform: translateY(-50%);
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      z-index: 100;
+      background: rgba(10, 14, 39, 0.8);
+      padding: 12px 8px;
+    }
+    .nav-dot {
+      width: 12px;
+      height: 12px;
+      border: 2px solid var(--neon-cyan);
+      background: transparent;
+      cursor: pointer;
+      position: relative;
+      transition: border-color 0.3s;
+    }
+    .nav-dot::after {
+      content: "";
+      position: absolute;
+      inset: 2px;
+      background: var(--neon-cyan);
+      opacity: 0;
+      transition: opacity 0.3s;
+    }
+    .nav-dot.active::after { opacity: 1; }
+    .nav-dot:hover { border-color: var(--neon-yellow); }
+    .nav-dot:hover::after { background: var(--neon-yellow); }
+    .slide-counter {
+      position: fixed;
+      bottom: 24px;
+      left: 50%;
+      transform: translateX(-50%);
+      font-family: var(--font-mono);
+      font-size: 0.8rem;
+      color: var(--neon-cyan);
+      background: rgba(10, 14, 39, 0.8);
+      padding: 8px 20px;
+      z-index: 100;
+      letter-spacing: 0.15em;
+    }
+    /* === CUSTOM CURSOR AREA === */
+    .deck {
+      cursor: crosshair;
+    }
+    /* === SPECIFIC SLIDE STYLES === */
+    /* Slide 1: Hero */
+    .hero-subtitle {
+      font-family: var(--font-mono);
+      font-size: 0.85rem;
+      letter-spacing: 0.3em;
+      color: var(--neon-pink);
+      text-transform: uppercase;
+      margin-bottom: 1.5rem;
+    }
+    .hero-tagline {
+      font-family: var(--font-body);
+      font-size: clamp(0.9rem, 1.5vw, 1.2rem);
+      color: rgba(255,255,255,0.88);
+      max-width: 500px;
+      text-align: center;
+      margin-top: 2rem;
+      line-height: 1.8;
+    }
+    .hero-badges {
+      display: flex;
+      gap: 16px;
+      margin-top: 3rem;
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+    .hero-badge {
+      font-family: var(--font-mono);
+      font-size: 0.7rem;
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+      padding: 8px 16px;
+      border: 2px solid var(--neon-yellow);
+      color: var(--neon-yellow);
+    }
+    /* Slide 2: Split Intro */
+    .split-layout {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 4vw;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      max-width: 1100px;
+    }
+    @media (max-width: 768px) {
+      .split-layout { grid-template-columns: 1fr; }
+    }
+    .pixel-avatar-zone {
+      width: 100%;
+      aspect-ratio: 1;
+      max-width: 380px;
+      margin: 0 auto;
+      background: var(--deep-navy);
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .pixel-avatar-zone::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background:
+        repeating-linear-gradient(
+          45deg,
+          transparent,
+          transparent 10px,
+          rgba(94, 220, 244, 0.1) 10px,
+          rgba(94, 220, 244, 0.1) 20px
+        );
+    }
+    .pixel-face {
+      width: 120px;
+      height: 120px;
+      position: relative;
+    }
+    .pixel-face .eye {
+      position: absolute;
+      width: 24px;
+      height: 24px;
+      background: var(--neon-cyan);
+      top: 30px;
+    }
+    .pixel-face .eye.left { left: 16px; }
+    .pixel-face .eye.right { right: 16px; }
+    .pixel-face .mouth {
+      position: absolute;
+      width: 60px;
+      height: 16px;
+      background: var(--neon-pink);
+      bottom: 24px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    /* Slide 3: Feature Grid */
+    .feature-grid {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 24px;
+      width: 100%;
+      max-width: 1000px;
+    }
+    @media (max-width: 900px) {
+      .feature-grid { grid-template-columns: repeat(2, 1fr); }
+    }
+    @media (max-width: 500px) {
+      .feature-grid { grid-template-columns: 1fr; }
+    }
+    /* flat game-dialog panel; no glass blur in a pixel deck */
+    .feature-card {
+      background: #ECF3F8;
+      padding: 32px 24px;
+      text-align: center;
+      position: relative;
+      border: 2px solid rgba(15, 27, 61, 0.6);
+    }
+    .feature-card::before {
+      content: "";
+      position: absolute;
+      top: -2px;
+      left: -2px;
+      width: 16px;
+      height: 16px;
+      border-top: 4px solid var(--deep-navy);
+      border-left: 4px solid var(--deep-navy);
+    }
+    .feature-card::after {
+      content: "";
+      position: absolute;
+      bottom: -2px;
+      right: -2px;
+      width: 16px;
+      height: 16px;
+      border-bottom: 4px solid var(--deep-navy);
+      border-right: 4px solid var(--deep-navy);
+    }
+    .feature-icon {
+      width: 48px;
+      height: 48px;
+      margin: 0 auto 16px;
+      position: relative;
+    }
+    .feature-icon.cube {
+      background: var(--deep-navy);
+      box-shadow: 6px 6px 0 var(--neon-yellow);
+    }
+    .feature-icon.diamond {
+      background: var(--neon-cyan);
+      transform: rotate(45deg);
+      width: 36px;
+      height: 36px;
+      margin-bottom: 22px;
+      margin-top: 6px;
+    }
+    .feature-icon.cross {
+      background: var(--neon-pink);
+      position: relative;
+    }
+    .feature-icon.cross::before,
+    .feature-icon.cross::after {
+      content: "";
+      position: absolute;
+      background: var(--deep-navy);
+    }
+    .feature-icon.cross::before { inset: 10px 4px; }
+    .feature-icon.cross::after { inset: 4px 10px; }
+    .feature-icon.circle {
+      border: 6px solid var(--neon-yellow);
+      border-radius: 0; /* square ring reads as a pixel circle */
+      background: transparent;
+      position: relative;
+    }
+    .feature-icon.circle::after {
+      content: "";
+      position: absolute;
+      inset: 8px;
+      background: var(--neon-yellow);
+    }
+    .feature-card h3 {
+      font-size: 1.1rem;
+      margin-bottom: 8px;
+      color: var(--deep-navy);
+    }
+    .feature-card p {
+      font-size: 0.85rem;
+      color: rgba(15, 27, 61, 0.82);
+      line-height: 1.6;
+    }
+    /* Slide 4 & 5: Charts */
+    .chart-slide-layout {
+      width: 100%;
+      max-width: 900px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    .pixel-chart-title {
+      text-align: center;
+      margin-bottom: 3rem;
+    }
+    .pixel-chart-title h2 {
+      color: var(--neon-cyan);
+      margin-bottom: 0.5rem;
+    }
+    .pixel-chart-title .subtitle {
+      font-family: var(--font-mono);
+      font-size: 0.8rem;
+      color: var(--neon-pink);
+      letter-spacing: 0.15em;
+    }
+    /* Bar Chart */
+    .pixel-bar-chart {
+      width: 100%;
+      display: flex;
+      align-items: flex-end;
+      justify-content: center;
+      gap: 24px;
+      height: 320px;
+      padding: 0 20px;
+      position: relative;
+    }
+    .pixel-bar-chart::before {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background: var(--neon-cyan);
+      opacity: 0.5;
+    }
+    .chart-bar-group {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 12px;
+      flex: 1;
+      max-width: 100px;
+    }
+    .chart-bar {
+      width: 100%;
+      background: var(--neon-cyan);
+      position: relative;
+      box-shadow: 4px 0 0 0 var(--deep-navy), 0 4px 0 0 var(--deep-navy), 4px 4px 0 0 var(--deep-navy);
+      transition: height 1s cubic-bezier(0.22, 1, 0.36, 1);
+    }
+    .chart-bar.alt { background: var(--neon-pink); }
+    .chart-bar.alt2 { background: var(--neon-yellow); }
+    .chart-bar-label {
+      font-family: var(--font-mono);
+      font-size: 0.7rem;
+      color: rgba(255,255,255,0.88);
+      text-align: center;
+      letter-spacing: 0.05em;
+    }
+    .chart-value {
+      font-family: var(--font-mono);
+      font-size: 0.75rem;
+      font-weight: 700;
+      color: var(--neon-yellow);
+      margin-bottom: 4px;
+    }
+    /* Horizontal Bar Chart */
+    .pixel-hbar-chart {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+    }
+    .hbar-row {
+      display: grid;
+      grid-template-columns: 120px 1fr 50px;
+      align-items: center;
+      gap: 16px;
+    }
+    .hbar-label {
+      font-family: var(--font-mono);
+      font-size: 0.75rem;
+      color: var(--deep-navy);
+      text-align: right;
+      font-weight: 700;
+    }
+    .hbar-track {
+      height: 32px;
+      background: rgba(15, 27, 61, 0.1);
+      position: relative;
+    }
+    .hbar-fill {
+      height: 100%;
+      background: var(--deep-navy);
+      position: relative;
+      box-shadow: 4px 4px 0 var(--neon-yellow);
+      transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
+    }
+    .hbar-fill.alt { background: var(--neon-cyan); box-shadow: 4px 4px 0 var(--deep-navy); }
+    .hbar-fill.alt2 { background: var(--neon-pink); box-shadow: 4px 4px 0 var(--deep-navy); }
+    .hbar-value {
+      font-family: var(--font-mono);
+      font-size: 0.8rem;
+      font-weight: 700;
+      color: var(--deep-navy);
+    }
+    /* Slide 6: Timeline */
+    .timeline-container {
+      width: 100%;
+      max-width: 900px;
+      position: relative;
+    }
+    .timeline-line {
+      position: absolute;
+      left: 50%;
+      top: 0;
+      bottom: 0;
+      width: 4px;
+      background: repeating-linear-gradient(
+        to bottom,
+        var(--deep-navy) 0px,
+        var(--deep-navy) 16px,
+        transparent 16px,
+        transparent 24px
+      );
+      transform: translateX(-50%);
+    }
+    .timeline-events {
+      display: flex;
+      flex-direction: column;
+      gap: 32px;
+      position: relative;
+    }
+    .timeline-event {
+      display: grid;
+      grid-template-columns: 1fr 60px 1fr;
+      align-items: center;
+      gap: 24px;
+    }
+    .timeline-event:nth-child(even) .timeline-text { grid-column: 3; text-align: left; }
+    .timeline-event:nth-child(even) .timeline-spacer { grid-column: 2; }
+    .timeline-event:nth-child(even) .timeline-empty { grid-column: 1; }
+    .timeline-event:nth-child(odd) .timeline-text { grid-column: 1; text-align: right; }
+    .timeline-event:nth-child(odd) .timeline-spacer { grid-column: 2; }
+    .timeline-event:nth-child(odd) .timeline-empty { grid-column: 3; }
+    .timeline-node {
+      width: 24px;
+      height: 24px;
+      background: var(--neon-cyan);
+      border: 4px solid var(--deep-navy);
+      justify-self: center;
+      position: relative;
+      z-index: 2;
+    }
+    .timeline-node.active { background: var(--neon-yellow); }
+    .timeline-text h4 {
+      font-size: 1rem;
+      color: var(--deep-navy);
+      margin-bottom: 4px;
+    }
+    .timeline-text p {
+      font-size: 0.85rem;
+      color: rgba(15, 27, 61, 0.8);
+      line-height: 1.5;
+    }
+    .timeline-text .date {
+      font-family: var(--font-mono);
+      font-size: 0.7rem;
+      color: var(--neon-cyan);
+      background: var(--deep-navy);
+      display: inline-block;
+      padding: 2px 10px;
+      margin-bottom: 8px;
+    }
+    @media (max-width: 700px) {
+      .timeline-event {
+        grid-template-columns: 40px 1fr !important;
+      }
+      .timeline-event .timeline-empty { display: none; }
+      .timeline-event .timeline-text { grid-column: 2 !important; text-align: left !important; }
+      .timeline-line { left: 20px; }
+      .timeline-node { justify-self: start; }
+    }
+    /* Slide 7: Stats */
+    .stats-grid {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 32px;
+      width: 100%;
+      max-width: 900px;
+    }
+    @media (max-width: 800px) {
+      .stats-grid { grid-template-columns: repeat(2, 1fr); }
+    }
+    @media (max-width: 400px) {
+      .stats-grid { grid-template-columns: 1fr; }
+    }
+    .stat-block {
+      text-align: center;
+      padding: 32px 16px;
+      background: rgba(94, 220, 244, 0.08);
+      border: 2px solid rgba(94, 220, 244, 0.38);
+      position: relative;
+    }
+    .stat-block::before {
+      content: "";
+      position: absolute;
+      top: -2px;
+      left: -2px;
+      width: 20px;
+      height: 20px;
+      border-top: 4px solid var(--neon-cyan);
+      border-left: 4px solid var(--neon-cyan);
+    }
+    .stat-block::after {
+      content: "";
+      position: absolute;
+      bottom: -2px;
+      right: -2px;
+      width: 20px;
+      height: 20px;
+      border-bottom: 4px solid var(--neon-cyan);
+      border-right: 4px solid var(--neon-cyan);
+    }
+    .stat-number {
+      font-family: var(--font-display);
+      font-size: clamp(2rem, 4vw, 3.5rem);
+      font-weight: 900;
+      color: var(--neon-cyan);
+      line-height: 1;
+      margin-bottom: 8px;
+      text-shadow: 3px 3px 0 var(--deep-navy);
+    }
+    .stat-label {
+      font-family: var(--font-mono);
+      font-size: 0.7rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--neon-pink);
+    }
+    /* Slide 8: Quote */
+    .quote-container {
+      max-width: 700px;
+      text-align: center;
+      position: relative;
+      padding: 48px;
+    }
+    .quote-mark {
+      font-family: var(--font-display);
+      font-size: 8rem;
+      line-height: 1;
+      color: var(--deep-navy);
+      opacity: 0.15;
+      position: absolute;
+      top: -20px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    .quote-text {
+      font-family: var(--font-body);
+      font-size: clamp(1.1rem, 2.2vw, 1.6rem);
+      font-weight: 500;
+      font-style: italic;
+      color: var(--deep-navy);
+      line-height: 1.8;
+      position: relative;
+      z-index: 2;
+    }
+    .quote-author {
+      margin-top: 2rem;
+      font-family: var(--font-mono);
+      font-size: 0.8rem;
+      color: rgba(15, 27, 61, 0.88);
+      letter-spacing: 0.1em;
+    }
+    .quote-line {
+      width: 60px;
+      height: 4px;
+      background: var(--neon-yellow);
+      margin: 1.5rem auto 0;
+      box-shadow: 4px 4px 0 var(--deep-navy);
+    }
+    /* Slide 9: Comparison / Cards */
+    .tier-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 24px;
+      width: 100%;
+      max-width: 900px;
+    }
+    @media (max-width: 800px) {
+      .tier-grid { grid-template-columns: 1fr; max-width: 400px; }
+    }
+    .tier-card {
+      background: #F2F4FB;
+      padding: 36px 28px;
+      position: relative;
+      text-align: center;
+    }
+    /* emphasis carried by the inverted panel + hard yellow shadow; no floating pop-out */
+    .tier-card.featured {
+      background: var(--deep-navy);
+      color: white;
+      box-shadow: 8px 8px 0 var(--neon-yellow);
+    }
+    /* hard pixel shadow, no soft transparency */
+    .tier-card:not(.featured) {
+      box-shadow: 6px 6px 0 var(--deep-navy);
+      border: 2px solid var(--deep-navy);
+    }
+    .tier-name {
+      font-family: var(--font-display);
+      font-size: 1.2rem;
+      margin-bottom: 8px;
+    }
+    /* navy on light card; cyan only survives on the dark featured card */
+    .tier-price {
+      font-family: var(--font-mono);
+      font-size: 2rem;
+      font-weight: 700;
+      color: var(--deep-navy);
+      margin-bottom: 4px;
+    }
+    .tier-card.featured .tier-price { color: var(--neon-cyan); }
+    .tier-price span {
+      font-size: 0.8rem;
+      color: rgba(15, 27, 61, 0.75);
+    }
+    .tier-card.featured .tier-price span { color: rgba(255,255,255,0.65); }
+    .tier-desc {
+      font-size: 0.8rem;
+      color: rgba(15, 27, 61, 0.78);
+      margin-bottom: 20px;
+      line-height: 1.5;
+    }
+    .tier-card.featured .tier-desc { color: rgba(255,255,255,0.82); }
+    .tier-features {
+      list-style: none;
+      text-align: left;
+      margin-bottom: 24px;
+    }
+    .tier-features li {
+      font-size: 0.8rem;
+      padding: 6px 0;
+      border-bottom: 1px dashed rgba(15, 27, 61, 0.28);
+      position: relative;
+      padding-left: 20px;
+    }
+    .tier-features li::before {
+      content: "+";
+      position: absolute;
+      left: 0;
+      font-family: var(--font-mono);
+      color: var(--deep-navy);
+      font-weight: 700;
+    }
+    .tier-card.featured .tier-features li::before { color: var(--neon-cyan); }
+    .tier-card.featured .tier-features li { border-color: rgba(255,255,255,0.1); }
+    /* Slide 10: CTA */
+    .cta-content {
+      text-align: center;
+      max-width: 600px;
+    }
+    .cta-content h2 {
+      font-size: clamp(2rem, 5vw, 3.5rem);
+      color: var(--neon-cyan);
+      margin-bottom: 1rem;
+      text-shadow: 4px 4px 0 var(--deep-navy), 8px 8px 0 var(--neon-yellow);
+    }
+    .cta-content p {
+      color: rgba(255,255,255,0.88);
+      margin-bottom: 2.5rem;
+      font-size: 1.1rem;
+    }
+    .cta-buttons {
+      display: flex;
+      gap: 20px;
+      justify-content: center;
+      flex-wrap: wrap;
+    }
+    /* Decorative pixel landscape at bottom of CTA */
+    .pixel-landscape {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 120px;
+      display: flex;
+      align-items: flex-end;
+      justify-content: center;
+      gap: 0;
+      z-index: 2;
+      opacity: 0.3;
+      pointer-events: none;
+    }
+    .mountain {
+      background: var(--deep-navy);
+      width: 80px;
+      position: relative;
+    }
+    /* Arrow hints */
+    /* pill background keeps the hint legible over light and dark slides alike */
+    .nav-hint {
+      position: fixed;
+      bottom: 24px;
+      right: 24px;
+      font-family: var(--font-mono);
+      font-size: 0.65rem;
+      color: var(--neon-cyan);
+      background: rgba(10, 14, 39, 0.8);
+      padding: 6px 12px;
+      z-index: 100;
+      letter-spacing: 0.1em;
+    }
+    /* Reduced motion */
+    @media (prefers-reduced-motion: reduce) {
+      .slides-container { transition: none; }
+      .starfield .star, .pixel-particles .p { animation: none; }
+      .chart-bar, .hbar-fill { transition: none; }
+    }
+  </style>
+</head>
+<body>
+<div class="deck" id="deck">
+  <!-- Navigation Dots -->
+  <div class="nav-dots" id="navDots"></div>
+  <!-- Slide Counter -->
+  <div class="slide-counter" id="slideCounter">01 / 10</div>
+  <!-- Keyboard hint -->
+  <div class="nav-hint">USE KEYS &uarr; &darr;</div>
+  <div class="slides-container" id="slidesContainer">
+    <!-- ========== SLIDE 1: HERO ========== -->
+    <section class="slide bg-grid scanlines grain crt-glow" data-slide="1">
+      <div class="starfield" id="starfield1"></div>
+      <div class="pixel-particles" id="particles1"></div>
+      <div class="slide-content" style="z-index:10;">
+        <div class="hero-subtitle">The Open-Source, Local, Agent-Driven Design Platform</div>
+        <h1 class="pixel-hero-text" style="text-align:center;">OPEN<br>DESIGN</h1>
+        <p class="hero-tagline">From idea to prototypes, web pages, slides, and HTML video — the full product-design workflow, on your own machine.</p>
+        <div class="hero-badges">
+          <span class="hero-badge">Apache-2.0</span>
+          <span class="hero-badge">Runs Locally</span>
+          <span class="hero-badge">BYOK</span>
+          <span class="hero-badge">No Sign-up</span>
+        </div>
+      </div>
+    </section>
+    <!-- ========== SLIDE 2: SPLIT INTRO ========== -->
+    <section class="slide bg-grid-pink scanlines grain" data-slide="2">
+      <div class="slide-content">
+        <div class="split-layout">
+          <div class="pixel-avatar-zone pixel-corners yellow-corners">
+            <div class="pixel-face">
+              <div class="eye left"></div>
+              <div class="eye right"></div>
+              <div class="mouth"></div>
+            </div>
+          </div>
+          <div style="max-width: 460px;">
+            <span class="pixel-label">Mission Brief</span>
+            <h2 style="color: var(--deep-navy); margin-bottom: 1.2rem; font-size: clamp(1.6rem, 3vw, 2.4rem);">Frontier Design, Set Free</h2>
+            <p style="color: rgba(15,27,61,0.85); margin-bottom: 1rem;">
+              In April 2026, Claude Design proved for the first time that an LLM can truly design — not write about design, but produce real design artifacts.
+            </p>
+            <p style="color: rgba(15,27,61,0.85);">
+              Yet it is closed-source, paid, and cloud-only: locked to one model, with no agent choice, no self-hosting, no BYOK. Open Design sets that capability free — back on every creator's desk.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- ========== SLIDE 3: FEATURE GRID ========== -->
+    <section class="slide bg-grid-cyan scanlines grain" data-slide="3">
+      <div class="slide-content">
+        <div style="text-align: center; margin-bottom: 2.5rem;">
+          <span class="pixel-label" style="background: var(--deep-navy); color: var(--neon-cyan);">Core Systems</span>
+          <h2 style="color: var(--deep-navy);">Core Capabilities</h2>
+        </div>
+        <div class="feature-grid">
+          <div class="feature-card">
+            <div class="feature-icon cube"></div>
+            <h3>HTML Video</h3>
+            <p>A full HTML-to-MP4 pipeline. HyperFrames turns artifacts into programmatic marketing shorts and demos.</p>
+          </div>
+          <div class="feature-card">
+            <div class="feature-icon diamond"></div>
+            <h3>Design Systems</h3>
+            <p>129 design systems ready to import — from GitHub, Figma, or local files — to keep every run on brand.</p>
+          </div>
+          <div class="feature-card">
+            <div class="feature-icon cross"></div>
+            <h3>Plugin Ecosystem</h3>
+            <p>217+ plugins for prototypes, slides, posters, dashboards, and more — installable in one click.</p>
+          </div>
+          <div class="feature-card">
+            <div class="feature-icon circle"></div>
+            <h3>Full-Stack BYOK</h3>
+            <p>Bring your own keys for Anthropic, OpenAI, Azure, and Google, plus 14 media providers.</p>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- ========== SLIDE 4: VERTICAL BAR CHART ========== -->
+    <section class="slide bg-grid scanlines grain crt-glow" data-slide="4">
+      <div class="starfield" id="starfield4"></div>
+      <div class="slide-content">
+        <div class="chart-slide-layout">
+          <div class="pixel-chart-title">
+            <span class="pixel-label">Analytics Core</span>
+            <h2>GitHub Stars Growth</h2>
+            <p class="subtitle">Community growth indexed to 60K+ stars &mdash; demo data</p>
+          </div>
+          <div class="pixel-bar-chart" id="barChart">
+            <div class="chart-bar-group">
+              <div class="chart-value" data-value="12">0</div>
+              <div class="chart-bar" data-height="12" style="height: 0%;"></div>
+              <div class="chart-bar-label">Q2'25</div>
+            </div>
+            <div class="chart-bar-group">
+              <div class="chart-value" data-value="26">0</div>
+              <div class="chart-bar alt" data-height="26" style="height: 0%;"></div>
+              <div class="chart-bar-label">Q3'25</div>
+            </div>
+            <div class="chart-bar-group">
+              <div class="chart-value" data-value="48">0</div>
+              <div class="chart-bar alt2" data-height="48" style="height: 0%;"></div>
+              <div class="chart-bar-label">Q4'25</div>
+            </div>
+            <div class="chart-bar-group">
+              <div class="chart-value" data-value="74">0</div>
+              <div class="chart-bar" data-height="74" style="height: 0%;"></div>
+              <div class="chart-bar-label">Q1'26</div>
+            </div>
+            <div class="chart-bar-group">
+              <div class="chart-value" data-value="100">0</div>
+              <div class="chart-bar alt" data-height="100" style="height: 0%;"></div>
+              <div class="chart-bar-label">Q2'26</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- ========== SLIDE 5: HORIZONTAL BAR CHART ========== -->
+    <section class="slide bg-grid-lavender scanlines grain" data-slide="5">
+      <div class="slide-content">
+        <div class="chart-slide-layout">
+          <div class="pixel-chart-title" style="margin-bottom: 2.5rem;">
+            <span class="pixel-label" style="background: var(--deep-navy); color: var(--neon-yellow);">Plugin Ecosystem</span>
+            <h2 style="color: var(--deep-navy);">217+ Plugins by Type</h2>
+            <p class="subtitle" style="color: rgba(15,27,61,0.82);">Relative share per artifact type &mdash; demo data</p>
+          </div>
+          <div class="pixel-hbar-chart" id="hbarChart">
+            <div class="hbar-row">
+              <div class="hbar-label">Prototypes</div>
+              <div class="hbar-track">
+                <div class="hbar-fill" data-width="88" style="width: 0%;"></div>
+              </div>
+              <div class="hbar-value">88%</div>
+            </div>
+            <div class="hbar-row">
+              <div class="hbar-label">Slides</div>
+              <div class="hbar-track">
+                <div class="hbar-fill alt" data-width="72" style="width: 0%;"></div>
+              </div>
+              <div class="hbar-value">72%</div>
+            </div>
+            <div class="hbar-row">
+              <div class="hbar-label">Images</div>
+              <div class="hbar-track">
+                <div class="hbar-fill alt2" data-width="64" style="width: 0%;"></div>
+              </div>
+              <div class="hbar-value">64%</div>
+            </div>
+            <div class="hbar-row">
+              <div class="hbar-label">Video</div>
+              <div class="hbar-track">
+                <div class="hbar-fill" data-width="52" style="width: 0%;"></div>
+              </div>
+              <div class="hbar-value">52%</div>
+            </div>
+            <div class="hbar-row">
+              <div class="hbar-label">Dashboards</div>
+              <div class="hbar-track">
+                <div class="hbar-fill alt" data-width="40" style="width: 0%;"></div>
+              </div>
+              <div class="hbar-value">40%</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- ========== SLIDE 6: TIMELINE ========== -->
+    <section class="slide bg-grid-pink scanlines grain" data-slide="6">
+      <div class="slide-content">
+        <div style="text-align: center; margin-bottom: 2.5rem;">
+          <span class="pixel-label">Workflow</span>
+          <h2 style="color: var(--deep-navy);">From Idea to Delivery</h2>
+        </div>
+        <div class="timeline-container">
+          <div class="timeline-line"></div>
+          <div class="timeline-events">
+            <div class="timeline-event">
+              <div class="timeline-text">
+                <span class="date">STEP 01</span>
+                <h4>Pick a Starting Point</h4>
+                <p>Describe your goal in one sentence, or start from a template or plugin.</p>
+              </div>
+              <div class="timeline-spacer">
+                <div class="timeline-node active"></div>
+              </div>
+              <div class="timeline-empty"></div>
+            </div>
+            <div class="timeline-event">
+              <div class="timeline-empty"></div>
+              <div class="timeline-spacer">
+                <div class="timeline-node active"></div>
+              </div>
+              <div class="timeline-text">
+                <span class="date">STEP 02</span>
+                <h4>Set the Visual Direction</h4>
+                <p>Palette, type, and spacing flow into generation automatically.</p>
+              </div>
+            </div>
+            <div class="timeline-event">
+              <div class="timeline-text">
+                <span class="date">STEP 03</span>
+                <h4>Generate the Artifact</h4>
+                <p>The agent reads full context and produces real runnable files, previewed in a sandbox.</p>
+              </div>
+              <div class="timeline-spacer">
+                <div class="timeline-node"></div>
+              </div>
+              <div class="timeline-empty"></div>
+            </div>
+            <div class="timeline-event">
+              <div class="timeline-empty"></div>
+              <div class="timeline-spacer">
+                <div class="timeline-node"></div>
+              </div>
+              <div class="timeline-text">
+                <span class="date">STEP 04</span>
+                <h4>Ship It, or Film It</h4>
+                <p>Hand off to engineering, or turn it into video with HyperFrames. Every choice becomes memory for the next run.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- ========== SLIDE 7: STATS / COUNTERS ========== -->
+    <section class="slide bg-grid scanlines grain crt-glow" data-slide="7">
+      <div class="starfield" id="starfield7"></div>
+      <div class="slide-content">
+        <div style="text-align: center; margin-bottom: 2.5rem;">
+          <span class="pixel-label">Open Source</span>
+          <h2 style="color: var(--neon-cyan);">Open Design in Numbers</h2>
+          <p style="color: rgba(255,255,255,0.85); font-size: 0.9rem; margin-top: 0.5rem;">A community-built platform, open source under Apache-2.0</p>
+        </div>
+        <div class="stats-grid" id="statsGrid">
+          <div class="stat-block">
+            <div class="stat-number" data-target="60" data-suffix="K+">0</div>
+            <div class="stat-label">GitHub Stars</div>
+          </div>
+          <div class="stat-block">
+            <div class="stat-number" data-target="300" data-suffix="+">0</div>
+            <div class="stat-label">Contributors</div>
+          </div>
+          <div class="stat-block">
+            <div class="stat-number" data-target="217" data-suffix="+">0</div>
+            <div class="stat-label">Plugins</div>
+          </div>
+          <div class="stat-block">
+            <div class="stat-number" data-target="129">0</div>
+            <div class="stat-label">Design Systems</div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- ========== SLIDE 8: QUOTE ========== -->
+    <section class="slide bg-grid-cyan scanlines grain" data-slide="8">
+      <div class="slide-content">
+        <div class="quote-container pixel-corners">
+          <div class="quote-mark">"</div>
+          <p class="quote-text">
+            File-system semantics plus git-diffable design artifacts — design is finally under version control.
+          </p>
+          <div class="quote-line"></div>
+          <div class="quote-author">&mdash; Indie Developer, Open Design Community</div>
+        </div>
+      </div>
+    </section>
+    <!-- ========== SLIDE 9: PRICING TIERS ========== -->
+    <section class="slide bg-grid-lavender scanlines grain" data-slide="9">
+      <div class="slide-content">
+        <div style="text-align: center; margin-bottom: 2.5rem;">
+          <span class="pixel-label" style="background: var(--deep-navy); color: var(--neon-pink);">Three Pillars</span>
+          <h2 style="color: var(--deep-navy);">Why Open Design</h2>
+        </div>
+        <div class="tier-grid">
+          <div class="tier-card">
+            <div class="tier-name">Desktop-Native</div>
+            <div class="tier-price">100%<span>&nbsp;local</span></div>
+            <div class="tier-desc">Design happens on the desktop, not in a cloud tab.</div>
+            <ul class="tier-features">
+              <li>Local files readable</li>
+              <li>Figma exports in place</li>
+              <li>Code repos as context</li>
+              <li>Full terminal power</li>
+            </ul>
+            <button class="pixel-btn" style="font-size: 0.8rem; padding: 12px 24px;">Explore</button>
+          </div>
+          <div class="tier-card featured">
+            <div class="tier-name" style="color: var(--neon-yellow);">Agent-Native</div>
+            <div class="tier-price" style="color: var(--neon-pink);">21<span>&nbsp;agents</span></div>
+            <div class="tier-desc">Plug in agents, don't rebuild them.</div>
+            <ul class="tier-features">
+              <li>Claude Code & Codex</li>
+              <li>Cursor Agent & more</li>
+              <li>Auto-detected from PATH</li>
+              <li>Zero configuration</li>
+              <li>Full-stack BYOK</li>
+            </ul>
+            <button class="pixel-btn pink-btn" style="font-size: 0.8rem; padding: 12px 24px;">Explore</button>
+          </div>
+          <div class="tier-card">
+            <div class="tier-name">Self-Evolving</div>
+            <div class="tier-price">129<span>&nbsp;systems</span></div>
+            <div class="tier-desc">It learns your taste with every run.</div>
+            <ul class="tier-features">
+              <li>Design system library</li>
+              <li>Preferences & memory</li>
+              <li>Git-diffable artifacts</li>
+              <li>Apache-2.0 licensed</li>
+            </ul>
+            <button class="pixel-btn" style="font-size: 0.8rem; padding: 12px 24px;">Explore</button>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- ========== SLIDE 10: CLOSING CTA ========== -->
+    <section class="slide bg-grid scanlines grain crt-glow" data-slide="10">
+      <div class="starfield" id="starfield10"></div>
+      <div class="pixel-particles" id="particles10"></div>
+      <div class="pixel-landscape" id="landscape10"></div>
+      <div class="slide-content" style="z-index:10;">
+        <div class="cta-content">
+          <h2>Open. Local.<br>Agent-Native.</h2>
+          <p>Frontier AI design, back on every creator's desk. Find us at github.com/nexu-io/open-design &middot; discord.gg/9ptkbbqRu &middot; x.com/nexudotio</p>
+          <div class="cta-buttons">
+            <a class="pixel-btn" href="https://open-design.ai/" target="_blank" rel="noreferrer noopener" style="text-decoration:none;">Download Open Design</a>
+            <a class="pixel-btn pink-btn" href="https://github.com/nexu-io/open-design" target="_blank" rel="noreferrer noopener" style="text-decoration:none;">Star on GitHub</a>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</div>
+<script>
+(function() {
+  const totalSlides = 10;
+  let currentSlide = 0;
+  const container = document.getElementById('slidesContainer');
+  const counter = document.getElementById('slideCounter');
+  const dotsContainer = document.getElementById('navDots');
+  // Generate nav dots
+  for (let i = 0; i < totalSlides; i++) {
+    const dot = document.createElement('div');
+    dot.className = 'nav-dot' + (i === 0 ? ' active' : '');
+    dot.addEventListener('click', () => goToSlide(i));
+    dotsContainer.appendChild(dot);
+  }
+  const dots = document.querySelectorAll('.nav-dot');
+  function updateUI() {
+    container.style.transform = `translateY(-${currentSlide * 100}vh)`;
+    counter.textContent = String(currentSlide + 1).padStart(2, '0') + ' / ' + totalSlides;
+    dots.forEach((d, i) => d.classList.toggle('active', i === currentSlide));
+    triggerAnimations(currentSlide);
+  }
+  function goToSlide(index) {
+    if (index < 0 || index >= totalSlides) return;
+    currentSlide = index;
+    updateUI();
+  }
+  function nextSlide() { goToSlide(currentSlide + 1); }
+  function prevSlide() { goToSlide(currentSlide - 1); }
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'ArrowDown' || e.key === 'ArrowRight' || e.key === ' ') {
+      e.preventDefault();
+      nextSlide();
+    } else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
+      e.preventDefault();
+      prevSlide();
+    } else if (e.key === 'Home') {
+      e.preventDefault();
+      goToSlide(0);
+    } else if (e.key === 'End') {
+      e.preventDefault();
+      goToSlide(totalSlides - 1);
+    }
+  });
+  // Touch / swipe support
+  let touchStartY = 0;
+  document.addEventListener('touchstart', (e) => { touchStartY = e.touches[0].clientY; });
+  document.addEventListener('touchend', (e) => {
+    const diff = touchStartY - e.changedTouches[0].clientY;
+    if (Math.abs(diff) > 50) {
+      diff > 0 ? nextSlide() : prevSlide();
+    }
+  });
+  // Wheel support with debounce
+  let wheelLock = false;
+  document.addEventListener('wheel', (e) => {
+    if (wheelLock) return;
+    wheelLock = true;
+    e.deltaY > 0 ? nextSlide() : prevSlide();
+    setTimeout(() => wheelLock = false, 800);
+  }, { passive: true });
+  // ===== ANIMATION TRIGGERS =====
+  function triggerAnimations(slideIndex) {
+    // Slide 4: Vertical bar chart
+    if (slideIndex === 3) {
+      document.querySelectorAll('#barChart .chart-bar').forEach((bar, i) => {
+        const h = bar.dataset.height;
+        setTimeout(() => {
+          bar.style.height = h + '%';
+        }, i * 120);
+      });
+      document.querySelectorAll('#barChart .chart-value').forEach((val, i) => {
+        const target = parseInt(val.dataset.value);
+        setTimeout(() => animateNumber(val, target, '', 800), i * 120);
+      });
+    } else {
+      document.querySelectorAll('#barChart .chart-bar').forEach(bar => bar.style.height = '0%');
+    }
+    // Slide 5: Horizontal bar chart
+    if (slideIndex === 4) {
+      document.querySelectorAll('#hbarChart .hbar-fill').forEach((fill, i) => {
+        const w = fill.dataset.width;
+        setTimeout(() => { fill.style.width = w + '%'; }, i * 100);
+      });
+    } else {
+      document.querySelectorAll('#hbarChart .hbar-fill').forEach(fill => fill.style.width = '0%');
+    }
+    // Slide 7: Stats counters
+    if (slideIndex === 6) {
+      document.querySelectorAll('#statsGrid .stat-number').forEach((el, i) => {
+        const target = parseFloat(el.dataset.target);
+        const suffix = el.dataset.suffix || '';
+        const isFloat = target % 1 !== 0;
+        setTimeout(() => animateNumber(el, target, suffix, 1200, isFloat), i * 150);
+      });
+    } else {
+      document.querySelectorAll('#statsGrid .stat-number').forEach(el => el.textContent = '0');
+    }
+  }
+  function animateNumber(el, target, suffix, duration, isFloat = false) {
+    const start = performance.now();
+    function tick(now) {
+      const progress = Math.min((now - start) / duration, 1);
+      const eased = 1 - Math.pow(1 - progress, 3);
+      const current = eased * target;
+      el.textContent = (isFloat ? current.toFixed(1) : Math.floor(current)) + suffix;
+      if (progress < 1) requestAnimationFrame(tick);
+      else el.textContent = (isFloat ? target.toFixed(1) : target) + suffix;
+    }
+    requestAnimationFrame(tick);
+  }
+  // ===== GENERATE STARFIELD =====
+  function generateStars(containerId, count = 40) {
+    const container = document.getElementById(containerId);
+    if (!container) return;
+    container.innerHTML = '';
+    for (let i = 0; i < count; i++) {
+      const star = document.createElement('div');
+      star.className = 'star';
+      star.style.left = Math.random() * 100 + '%';
+      star.style.top = Math.random() * 100 + '%';
+      star.style.animationDelay = Math.random() * 3 + 's';
+      container.appendChild(star);
+    }
+  }
+  generateStars('starfield1', 50);
+  generateStars('starfield4', 30);
+  generateStars('starfield7', 35);
+  generateStars('starfield10', 45);
+  // ===== GENERATE FLOATING PARTICLES =====
+  function generateParticles(containerId, colors, count = 12) {
+    const container = document.getElementById(containerId);
+    if (!container) return;
+    container.innerHTML = '';
+    for (let i = 0; i < count; i++) {
+      const p = document.createElement('div');
+      p.className = 'p';
+      const color = colors[i % colors.length];
+      p.style.background = color;
+      p.style.left = Math.random() * 100 + '%';
+      p.style.top = Math.random() * 100 + '%';
+      p.style.animationDelay = Math.random() * 5 + 's';
+      p.style.animationDuration = (6 + Math.random() * 6) + 's';
+      container.appendChild(p);
+    }
+  }
+  generateParticles('particles1', ['var(--neon-cyan)', 'var(--neon-pink)', 'var(--neon-yellow)'], 16);
+  generateParticles('particles10', ['var(--neon-cyan)', 'var(--neon-pink)', 'var(--neon-yellow)'], 20);
+  // ===== GENERATE PIXEL LANDSCAPE FOR CTA =====
+  function generateLandscape() {
+    const container = document.getElementById('landscape10');
+    if (!container) return;
+    const heights = [30, 50, 70, 40, 60, 35, 55, 45, 80, 25, 50, 40];
+    heights.forEach((h, i) => {
+      const mtn = document.createElement('div');
+      mtn.className = 'mountain';
+      mtn.style.height = h + 'px';
+      mtn.style.width = (60 + (i % 3) * 20) + 'px';
+      container.appendChild(mtn);
+    });
+  }
+  generateLandscape();
+  // Initialize
+  updateUI();
+})();
+</script>
+</body>
+</html>