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-broadside/example.html ADDED Viewed

@@ -0,0 +1,2189 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Open Design — Broadside</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <!-- Broadside fonts: Barlow (the workhorse grotesque), IBM Plex Mono (chrome),
+         Noto Sans SC (CJK fallback for all roles) -->
+    <link
+      href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700;800;900&family=IBM+Plex+Mono:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700;900&display=swap"
+      rel="stylesheet"
+    />
+    <style>
+      /* ╔══════════════════════════════════════════════════════════════════════╗
+   ║  ZONE A · TOKENS                                                     ║
+   ║                                                                      ║
+   ║  This is the ONLY block you replace to change the visual style.      ║
+   ║  Every color, font, and size in this file reads from these vars.     ║
+   ║  Never write raw hex values, font names, or px sizes outside here.   ║
+   ╚══════════════════════════════════════════════════════════════════════╝ */
+      :root {
+        /* ── Palette ──────────────────────────────────────────────────────── */
+        --c-bg: #111111; /* near-black — the default slide background  */
+        --c-bg-alt: #1a1a18; /* secondary surface on dark slides            */
+        /* Broadside has NO light slides. These vars are overridden to dark
+           so any accidental .light class still renders dark. */
+        --c-bg-light: #111111;
+        --c-bg-light-alt: #1a1a18;
+        /* The signature: orange is not an accent here — it is the ENVIRONMENT.
+           Cover and chapter slides use this as their full background fill. */
+        --c-bg-orange: #e85d26;
+        --c-fg: #f0ece5; /* primary text on dark slides                 */
+        --c-fg-2: #9c9c92; /* secondary / muted text on dark (AA on #111) */
+        --c-fg-3: #8b8b81; /* tertiary / hint text on dark (AA on #111)   */
+        /* Text colours for orange slides — ink on fire */
+        --c-fg-light: #111111; /* primary text on orange                */
+        --c-fg-light-2: #2a1810; /* muted text on orange                  */
+        --c-fg-light-3: rgba(
+          17,
+          17,
+          17,
+          0.78
+        ); /* hint text on orange               */
+        --c-accent: #e85d26; /* orange = accent everywhere on dark slides   */
+        --c-border: #282826; /* divider lines on dark slides                */
+        --c-border-light: #282826; /* same dark border even on "light" (overridden)*/
+        /* ── Typography ──────────────────────────────────────────────────── */
+        /* Barlow: the defining typeface. Condensed grotesque. Always heavy.
+           Used at max weight — 900 for display, 800 for h1, 700 for h2.
+           Noto Sans SC provides full CJK coverage at matching weights. */
+        --f-display: "Barlow", "Noto Sans SC", sans-serif;
+        --f-heading: "Barlow", "Noto Sans SC", sans-serif;
+        --f-body: "Barlow", "Noto Sans SC", system-ui, sans-serif;
+        /* Mono: IBM Plex Mono for chrome labels, metadata, slide numbers */
+        --f-mono: "IBM Plex Mono", monospace;
+        /* ── Type Scale ───────────────────────────────────────────────────── */
+        /* Broadside's defining trait: TYPE IS MASSIVE. Display is 13vw —
+           on a 1440px screen that is ~187px. Words become graphic elements. */
+        --sz-display: 13vw; /* the whole point — nearly abstract at full size */
+        --sz-h1: 7.5vw; /* chapter title — still enormous                */
+        --sz-h2: 4.5vw; /* slide headline                                */
+        --sz-h3: 2.8vw; /* sub-headline                                  */
+        --sz-lead: 1.6vw; /* lead paragraph                                */
+        --sz-body: 1.2vw; /* body text                                     */
+        --sz-caption: 0.9vw; /* captions, footnotes                           */
+        --sz-label: 0.72vw; /* chrome labels, slide numbers, metadata        */
+        /* ── Spacing ─────────────────────────────────────────────────────── */
+        --pad-x: 5.5vw; /* tighter than skeleton — type fills the space  */
+        --pad-y: 5.5vh;
+        --gap-lg: 3.5vh;
+        --gap-md: 2vh;
+        --gap-sm: 1vh;
+        /* ── Motion ──────────────────────────────────────────────────────── */
+        --ease-slide: cubic-bezier(0.77, 0, 0.175, 1);
+        --dur-slide: 0.8s;
+        --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
+        --dur-enter: 0.5s;
+      }
+      /* ╔══════════════════════════════════════════════════════════════════════╗
+   ║  ZONE B · ENGINE — DO NOT MODIFY                                     ║
+   ║                                                                      ║
+   ║  Layout engine, transitions, animation system, navigation.           ║
+   ║  Touching this breaks the mechanics.                                 ║
+   ╚══════════════════════════════════════════════════════════════════════╝ */
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+      html,
+      body {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        background: var(--c-bg);
+        -webkit-font-smoothing: antialiased;
+      }
+      /* Deck container — all slides sit side by side */
+      #deck {
+        display: flex;
+        height: 100vh;
+        /* Width = N * 100vw, set dynamically by JS */
+        transition: transform var(--dur-slide) var(--ease-slide);
+        will-change: transform;
+      }
+      /* Slide base — each slide is one full viewport */
+      .slide {
+        flex: 0 0 100vw;
+        width: 100vw;
+        height: 100vh;
+        position: relative;
+        padding: var(--pad-y) var(--pad-x);
+        display: grid;
+        grid-template-rows: auto 1fr auto;
+        overflow: hidden;
+      }
+      /* Prevent grid children from overflowing */
+      .slide-body {
+        min-height: 0;
+      }
+      /* Slide themes */
+      .slide.dark {
+        background: var(--c-bg);
+        color: var(--c-fg);
+      }
+      /* Broadside: .light is overridden to dark — there are no cream/white slides */
+      .slide.light {
+        background: var(--c-bg-light);
+        color: var(--c-fg);
+      }
+      /* The orange theme — the signature Broadside treatment */
+      .slide.orange {
+        background: var(--c-bg-orange);
+        color: var(--c-fg-light);
+      }
+      /* ── Animation system ──────────────────────────────────────────────── */
+      /* All data-anim elements start invisible.
+   They animate when their parent slide receives .is-active.
+   JS resets animations before adding .is-active so re-visiting a slide re-plays them. */
+      [data-anim] {
+        opacity: 0;
+      }
+      .slide.is-active [data-anim] {
+        animation-duration: var(--dur-enter);
+        animation-timing-function: var(--ease-enter);
+        animation-fill-mode: forwards;
+      }
+      .slide.is-active [data-anim="fade-up"] {
+        animation-name: kFadeUp;
+      }
+      .slide.is-active [data-anim="fade-in"] {
+        animation-name: kFadeIn;
+      }
+      .slide.is-active [data-anim="reveal-right"] {
+        animation-name: kRevealRight;
+      }
+      .slide.is-active [data-anim="reveal-left"] {
+        animation-name: kRevealLeft;
+      }
+      .slide.is-active [data-anim="scale-in"] {
+        animation-name: kScaleIn;
+      }
+      /* Stagger delays — add data-delay="N" to offset each element */
+      [data-delay="0"] {
+        animation-delay: 0s;
+      }
+      [data-delay="1"] {
+        animation-delay: 0.08s;
+      }
+      [data-delay="2"] {
+        animation-delay: 0.18s;
+      }
+      [data-delay="3"] {
+        animation-delay: 0.3s;
+      }
+      [data-delay="4"] {
+        animation-delay: 0.44s;
+      }
+      [data-delay="5"] {
+        animation-delay: 0.6s;
+      }
+      [data-delay="6"] {
+        animation-delay: 0.78s;
+      }
+      @keyframes kFadeUp {
+        from {
+          opacity: 0;
+          transform: translateY(28px);
+        }
+        to {
+          opacity: 1;
+          transform: none;
+        }
+      }
+      @keyframes kFadeIn {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+      @keyframes kRevealRight {
+        from {
+          clip-path: inset(0 100% 0 0);
+          opacity: 1;
+        }
+        to {
+          clip-path: inset(0 0% 0 0);
+          opacity: 1;
+        }
+      }
+      @keyframes kRevealLeft {
+        from {
+          clip-path: inset(0 0 0 100%);
+          opacity: 1;
+        }
+        to {
+          clip-path: inset(0 0 0 0%);
+          opacity: 1;
+        }
+      }
+      @keyframes kScaleIn {
+        from {
+          opacity: 0;
+          transform: scale(0.94);
+        }
+        to {
+          opacity: 1;
+          transform: none;
+        }
+      }
+      /* Reduced motion: show everything immediately, no slide easing */
+      @media (prefers-reduced-motion: reduce) {
+        #deck {
+          transition: none;
+        }
+        [data-anim] {
+          opacity: 1;
+        }
+        .slide.is-active [data-anim] {
+          animation: none;
+        }
+        .bar-fill {
+          transition: none;
+        }
+      }
+      /* ── Navigation ───────────────────────────────────────────────────── */
+      #nav-dots {
+        position: fixed;
+        bottom: 24px;
+        left: 50%;
+        transform: translateX(-50%);
+        display: flex;
+        gap: 7px;
+        z-index: 100;
+      }
+      /* Broadside chrome is angular — square markers, no circles */
+      .nav-dot {
+        width: 5px;
+        height: 5px;
+        border-radius: 0;
+        border: none;
+        background: rgba(255, 255, 255, 0.25);
+        cursor: pointer;
+        transition:
+          background 0.3s,
+          transform 0.3s;
+        padding: 0;
+      }
+      .nav-dot.is-active {
+        background: rgba(255, 255, 255, 0.85);
+        transform: scale(1.4);
+      }
+      #slide-counter {
+        position: fixed;
+        bottom: 20px;
+        right: 28px;
+        font-family: var(--f-mono);
+        font-size: 10px;
+        letter-spacing: 0.12em;
+        color: rgba(255, 255, 255, 0.38);
+        z-index: 100;
+        user-select: none;
+      }
+      /* ╔══════════════════════════════════════════════════════════════════════╗
+   ║  ZONE C · TYPOGRAPHY                                                 ║
+   ║                                                                      ║
+   ║  Use only these classes for text. Never set font-family, font-size,  ║
+   ║  or color inline. Exception: overriding size via                     ║
+   ║  style="--sz-h2: 2.5vw" is OK — it stays within the token system.   ║
+   ╚══════════════════════════════════════════════════════════════════════╝ */
+      /* Base typographic classes — all font families read from tokens */
+      .display {
+        font-family: var(--f-display);
+        font-size: var(--sz-display);
+        /* Broadside: maximum weight. Lowercase is the aesthetic — NOT uppercase. */
+        font-weight: 900;
+        line-height: 0.88;
+        letter-spacing: -0.04em;
+      }
+      .h1 {
+        font-family: var(--f-heading);
+        font-size: var(--sz-h1);
+        font-weight: 800;
+        line-height: 0.9;
+        letter-spacing: -0.03em;
+      }
+      .h2 {
+        font-family: var(--f-heading);
+        font-size: var(--sz-h2);
+        font-weight: 700;
+        line-height: 1.1;
+        letter-spacing: -0.02em;
+      }
+      .h3 {
+        font-family: var(--f-heading);
+        font-size: var(--sz-h3);
+        /* Barlow 600 is not loaded — 700 keeps the broadside weight honest
+           instead of letting the browser synthesize a fake 600 */
+        font-weight: 700;
+        line-height: 1.2;
+        letter-spacing: -0.01em;
+      }
+      .lead {
+        font-family: var(--f-body);
+        font-size: var(--sz-lead);
+        font-weight: 400;
+        line-height: 1.5;
+      }
+      .body {
+        font-family: var(--f-body);
+        font-size: var(--sz-body);
+        font-weight: 400;
+        line-height: 1.6;
+      }
+      .caption {
+        font-family: var(--f-body);
+        font-size: var(--sz-caption);
+        font-weight: 400;
+        line-height: 1.5;
+      }
+      .label {
+        font-family: var(--f-mono);
+        font-size: var(--sz-label);
+        font-weight: 500;
+        letter-spacing: 0.14em;
+        text-transform: uppercase;
+      }
+      /* Contextual color helpers — reads from active slide theme */
+      .dark .muted {
+        color: var(--c-fg-2);
+      }
+      .light .muted {
+        color: var(--c-fg-2);
+      } /* light = dark in Broadside */
+      /* On orange slides: muted text is dark ink at reduced opacity */
+      .orange .muted {
+        color: var(--c-fg-light-2);
+      }
+      /* The orange accent colour — used for emphasis on dark slides */
+      .accent {
+        color: var(--c-accent);
+      }
+      /* ── Orange slide text overrides ────────────────────────────────────── */
+      /* On orange slides, display/heading text is near-black (ink on fire).
+         This is the protest-poster aesthetic: dark ink on vivid ground. */
+      .orange .display,
+      .orange .h1,
+      .orange .h2,
+      .orange .h3 {
+        color: #111111;
+      }
+      .orange .lead,
+      .orange .body {
+        color: rgba(17, 17, 17, 0.82);
+      }
+      .orange .label {
+        color: rgba(17, 17, 17, 0.78);
+      }
+      /* On orange, .accent still means "the contrast pop" — use sparingly */
+      .orange .accent {
+        color: #111111;
+      }
+      /* ╔══════════════════════════════════════════════════════════════════════╗
+   ║  ZONE D · CHROME                                                     ║
+   ║                                                                      ║
+   ║  Header + footer present on slides that show them.                   ║
+   ║  Cover, chapter, quote, and end slides suppress both.                ║
+   ╚══════════════════════════════════════════════════════════════════════╝ */
+      .slide-chrome,
+      .slide-foot {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .slide-chrome {
+        padding-bottom: var(--gap-sm);
+        border-bottom: 1px solid var(--c-border);
+        margin-bottom: var(--gap-md);
+      }
+      .slide-foot {
+        padding-top: var(--gap-sm);
+        border-top: 1px solid var(--c-border);
+        margin-top: var(--gap-md);
+      }
+      /* On orange slides, chrome borders use dark ink at low opacity */
+      .orange .slide-chrome,
+      .orange .slide-foot {
+        border-color: rgba(17, 17, 17, 0.2);
+      }
+      /* Slides that suppress chrome/foot entirely */
+      .slide--cover .slide-chrome,
+      .slide--cover .slide-foot,
+      .slide--chapter .slide-chrome,
+      .slide--chapter .slide-foot,
+      .slide--quote .slide-chrome,
+      .slide--quote .slide-foot,
+      .slide--end .slide-chrome,
+      .slide--end .slide-foot {
+        display: none;
+      }
+      /* ╔══════════════════════════════════════════════════════════════════════╗
+   ║  ZONE E · LAYOUT PATTERNS                                            ║
+   ║                                                                      ║
+   ║  9 slide types. Use the class names below — do not invent new ones.  ║
+   ║  Broadside note: .slide--cover and .slide--chapter use .orange       ║
+   ║  (not .dark or .light). Dark slides use .dark.                       ║
+   ╚══════════════════════════════════════════════════════════════════════╝ */
+      /* ── 1. COVER ─────────────────────────────────────────────────────── */
+      /* Title slide. Always orange in Broadside. The broadside-num sits
+         top-left like a catalogue number. Title fills most of the slide. */
+      .slide--cover {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+      }
+      .cover-body {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        justify-content: flex-end;
+        /* extra room so the display descenders (g/y/p) clear the lead line */
+        gap: calc(var(--gap-lg) * 1.7);
+      }
+      .cover-meta {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+        margin-top: var(--gap-lg);
+        padding-top: var(--gap-sm);
+        border-top: 1px solid rgba(17, 17, 17, 0.2);
+      }
+      /* ── 2. CHAPTER ───────────────────────────────────────────────────── */
+      /* Section divider. Always orange in Broadside.
+         Big weight-900 title, no chrome, maximum negative space. */
+      .slide--chapter {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 0;
+      }
+      .chapter-num {
+        font-family: var(--f-mono);
+        font-size: var(--sz-label);
+        letter-spacing: 0.2em;
+        text-transform: uppercase;
+        /* On orange: dark ink; on dark: orange accent */
+        color: rgba(17, 17, 17, 0.72);
+        margin-bottom: var(--gap-md);
+      }
+      /* On dark chapter slides the number gets orange accent */
+      .dark .chapter-num {
+        color: var(--c-accent);
+      }
+      .chapter-rule {
+        width: 36px;
+        height: 2px;
+        background: #111111; /* dark rule on orange */
+        margin-bottom: var(--gap-md);
+      }
+      .dark .chapter-rule {
+        background: var(--c-accent);
+      }
+      /* ── 3. STATEMENT ─────────────────────────────────────────────────── */
+      /* Single bold claim. No image. The dark counterpart to the orange covers.
+         4-8 words max. Let the type breathe. */
+      .slide--statement .statement-body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: var(--gap-md);
+      }
+      /* ── 4. SPLIT ─────────────────────────────────────────────────────── */
+      /* Left: text content. Right: image. Dark background.
+         Orange kicker/rule above the headline. */
+      .slide--split .slide-body {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: calc(var(--pad-x) * 0.7);
+        align-items: center;
+      }
+      .split-text {
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap-md);
+      }
+      .split-image {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        gap: var(--gap-sm);
+      }
+      /* Always explicit height in vh to prevent overflow on different screens */
+      .split-image img {
+        width: 100%;
+        height: 55vh;
+        object-fit: cover;
+        display: block;
+      }
+      /* Placeholder shown when no real image is wired up. Same footprint
+         as a real <img> so the surrounding layout stays unchanged. */
+      .img-placeholder {
+        width: 100%;
+        height: 55vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: rgba(255, 255, 255, 0.04);
+        border: 1px dashed var(--c-border);
+        font-family: var(--f-mono);
+        font-size: 0.85rem;
+        font-weight: 500;
+        color: var(--c-fg-2, var(--c-fg));
+        letter-spacing: 0.12em;
+        text-transform: uppercase;
+      }
+      /* ── 5. STATS ─────────────────────────────────────────────────────── */
+      /* 3 or 4 large data cards. Add .cols-4 to .stats-grid for 4 columns. */
+      .slide--stats .slide-body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: var(--gap-lg);
+      }
+      .stats-grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 0;
+      }
+      .stats-grid.cols-4 {
+        grid-template-columns: repeat(4, 1fr);
+      }
+      .stat-card {
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap-sm);
+        padding: var(--gap-md) var(--gap-md) var(--gap-md) 0;
+        border-top: 1px solid var(--c-border);
+      }
+      /* The big number — orange on dark slides */
+      .stat-value {
+        font-family: var(--f-display);
+        font-size: 5.5vw;
+        font-weight: 900;
+        line-height: 1;
+        color: var(--c-accent);
+        letter-spacing: -0.04em;
+      }
+      .stat-label {
+        font-family: var(--f-body);
+        font-size: var(--sz-body);
+        line-height: 1.5;
+      }
+      .stat-note {
+        font-family: var(--f-mono);
+        font-size: var(--sz-caption);
+        letter-spacing: 0.05em;
+        color: var(--c-fg-3);
+      }
+      /* ── 6. QUOTE ─────────────────────────────────────────────────────── */
+      /* Full-slide pull quote. Dark background. Orange opening mark. */
+      .slide--quote {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: calc(var(--pad-y) * 1.2) calc(var(--pad-x) * 1.1);
+      }
+      .quote-mark {
+        font-family: var(--f-display);
+        font-size: 10vw;
+        line-height: 0.6;
+        color: var(--c-accent);
+        margin-bottom: var(--gap-md);
+        font-weight: 900;
+      }
+      .quote-text {
+        font-family: var(--f-display);
+        font-size: 3.8vw;
+        font-weight: 700;
+        line-height: 1.15;
+        letter-spacing: -0.02em;
+        max-width: 78%;
+        margin-bottom: var(--gap-lg);
+      }
+      .quote-attr {
+        display: flex;
+        flex-direction: column;
+        gap: 0.4vh;
+      }
+      /* ── 7. LIST ──────────────────────────────────────────────────────── */
+      /* Headline left, bullets right. Max 3 bullets in Broadside — this style
+         prizes density of impact over density of information. */
+      .slide--list .slide-body {
+        display: grid;
+        grid-template-columns: 2fr 3fr;
+        gap: calc(var(--pad-x) * 0.8);
+        align-items: center;
+      }
+      .list-head {
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap-md);
+        padding-top: var(--gap-sm);
+      }
+      .bullet-list {
+        list-style: none;
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap-md);
+      }
+      .bullet-list li {
+        display: grid;
+        grid-template-columns: 1.2em 1fr;
+        gap: 0.5em;
+        font-family: var(--f-body);
+        font-size: var(--sz-lead);
+        font-weight: 500;
+        line-height: 1.4;
+      }
+      /* Orange dash marker */
+      .bullet-list li::before {
+        content: "/";
+        color: var(--c-accent);
+        font-family: var(--f-mono);
+        font-weight: 700;
+      }
+      .dark .bullet-list li {
+        color: var(--c-fg);
+      }
+      .light .bullet-list li {
+        color: var(--c-fg);
+      }
+      /* ── 8. COMPARE ───────────────────────────────────────────────────── */
+      /* Side-by-side before/after or A vs B. Orange "after" label. */
+      .slide--compare .slide-body {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        height: 100%;
+      }
+      .compare-panel {
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap-md);
+        padding: var(--gap-md) 0;
+      }
+      .compare-panel.left {
+        padding-right: calc(var(--pad-x) * 0.55);
+        border-right: 1px solid var(--c-border);
+      }
+      .compare-panel.right {
+        padding-left: calc(var(--pad-x) * 0.55);
+      }
+      .compare-label {
+        font-family: var(--f-mono);
+        font-size: var(--sz-label);
+        letter-spacing: 0.16em;
+        text-transform: uppercase;
+        padding-bottom: var(--gap-sm);
+        border-bottom: 1px solid var(--c-border);
+        color: var(--c-fg-2);
+      }
+      /* The "after" panel uses orange — the payoff */
+      .compare-label.after {
+        color: var(--c-accent);
+        border-color: var(--c-accent);
+      }
+      /* ── 9. END ───────────────────────────────────────────────────────── */
+      /* Closing slide. Dark background. Massive closing headline. No chrome. */
+      .slide--end {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: var(--gap-md);
+      }
+      /* ╔══════════════════════════════════════════════════════════════════════╗
+   ║  ZONE F · COMPONENTS                                                 ║
+   ║                                                                      ║
+   ║  Reusable pieces used across multiple layouts.                       ║
+   ╚══════════════════════════════════════════════════════════════════════╝ */
+      /* Accent rule — orange on dark, dark-ink on orange */
+      .rule {
+        width: 36px;
+        height: 2px;
+        background: var(--c-accent);
+      }
+      .orange .rule {
+        background: #111111;
+      }
+      .rule.full {
+        width: 100%;
+        background: var(--c-border);
+      }
+      .orange .rule.full {
+        background: rgba(17, 17, 17, 0.2);
+      }
+      /* Eyebrow / kicker label — orange on dark, dark-ink on orange */
+      .kicker {
+        font-family: var(--f-mono);
+        font-size: var(--sz-label);
+        letter-spacing: 0.14em;
+        text-transform: uppercase;
+        color: var(--c-accent);
+      }
+      .orange .kicker {
+        color: rgba(17, 17, 17, 0.78);
+      }
+      /* Bordered tag */
+      .tag {
+        display: inline-block;
+        font-family: var(--f-mono);
+        font-size: var(--sz-label);
+        letter-spacing: 0.14em;
+        text-transform: uppercase;
+        color: var(--c-accent);
+        border: 1px solid var(--c-accent);
+        padding: 0.3em 0.8em;
+        line-height: 1;
+      }
+      .orange .tag {
+        color: #111111;
+        border-color: rgba(17, 17, 17, 0.4);
+      }
+      /* Image caption */
+      .img-caption {
+        font-family: var(--f-mono);
+        font-size: var(--sz-caption);
+        letter-spacing: 0.04em;
+        opacity: 0.5;
+        margin-top: 0.8vh;
+      }
+      /* ── Broadside-specific: slide number ─────────────────────────────── */
+      /* The large catalogue number in the top-left corner of orange slides.
+         Inspired by SPACE10 deck: "01" in small mono, top-left, low opacity. */
+      .broadside-num {
+        font-family: var(--f-mono);
+        font-size: 1.1vw;
+        font-weight: 500;
+        letter-spacing: 0.1em;
+        color: rgba(17, 17, 17, 0.72); /* dark ink on orange */
+      }
+      /* On dark slides the number uses muted fg */
+      .dark .broadside-num {
+        color: var(--c-fg-3);
+      }
+      /* Corner label utility — used for section labels at slide edges */
+      .corner-label {
+        font-family: var(--f-mono);
+        font-size: var(--sz-label);
+        letter-spacing: 0.1em;
+        text-transform: uppercase;
+        color: rgba(17, 17, 17, 0.78);
+      }
+      .dark .corner-label {
+        color: var(--c-fg-3);
+      }
+      /* Orange slide cover: a thin top strip showing the slide number + section name */
+      .broadside-top-chrome {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: auto;
+        padding-bottom: 0;
+      }
+      /* ── FADELIST (SPACE10 Before/During/After) ────────────────────────── */
+      .slide--fadelist {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+      }
+      .fadelist-top {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+      }
+      .fadelist-items {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        gap: 0;
+        line-height: 0.92;
+      }
+      .fadelist-item {
+        font-family: var(--f-display);
+        font-size: 7.5vw;
+        font-weight: 900;
+        letter-spacing: -0.03em;
+        color: #111111;
+        line-height: 1;
+      }
+      .fadelist-item:nth-child(2) {
+        opacity: 0.5;
+      }
+      .fadelist-item:nth-child(3) {
+        opacity: 0.22;
+      }
+      .fadelist-title {
+        font-family: var(--f-display);
+        font-size: 10.5vw;
+        font-weight: 900;
+        line-height: 0.9;
+        letter-spacing: -0.04em;
+        color: #111111;
+        align-self: flex-end;
+      }
+      /* Stats on orange: dark ink instead of cream */
+      .orange .stat-value {
+        color: #111111;
+      }
+      .orange .stat-label {
+        color: rgba(17, 17, 17, 0.78);
+      }
+      .orange .stat-note {
+        color: rgba(17, 17, 17, 0.72);
+      }
+      .orange .stat-card {
+        border-top-color: rgba(17, 17, 17, 0.22);
+      }
+      /* Compare: right panel gets orange fill */
+      .compare-panel.panel-orange {
+        padding-left: calc(var(--pad-x) * 0.55);
+        background: var(--c-accent);
+      }
+      .compare-panel.panel-orange .compare-label {
+        color: rgba(17, 17, 17, 0.72);
+        border-color: rgba(17, 17, 17, 0.3);
+      }
+      .compare-panel.panel-orange .h3 {
+        color: #111111;
+      }
+      .compare-panel.panel-orange .lead {
+        color: rgba(17, 17, 17, 0.8);
+      }
+      .compare-panel.panel-orange .bullet-list li {
+        color: #111111;
+      }
+      .compare-panel.panel-orange .bullet-list li::before {
+        color: rgba(17, 17, 17, 0.45);
+      }
+      /* ── CHART ─────────────────────────────────────────────────────────── */
+      .slide--chart .slide-body {
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap-md);
+        min-height: 0;
+      }
+      .chart-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+        flex-shrink: 0;
+      }
+      .chart-wrapper {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        min-height: 0;
+      }
+      .bar-track {
+        height: 30vh;
+        display: flex;
+        align-items: flex-end;
+        gap: 4vw;
+        border-left: 1px solid var(--c-border);
+        padding-left: 0.5vw;
+      }
+      .orange .bar-track {
+        border-color: rgba(17, 17, 17, 0.2);
+      }
+      .bar-col {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: flex-end;
+        gap: 1vh;
+        height: 100%;
+      }
+      .bar-fill {
+        width: 100%;
+        background: var(--c-fg-3);
+        transition: height 0.6s var(--ease-enter);
+      }
+      .bar-fill.accent {
+        background: var(--c-accent);
+      }
+      .orange .bar-fill {
+        background: rgba(17, 17, 17, 0.22);
+      }
+      .orange .bar-fill.accent {
+        background: #111111;
+      }
+      .bar-x-label {
+        font-family: var(--f-mono);
+        font-size: var(--sz-caption);
+        letter-spacing: 0.1em;
+        color: var(--c-fg-3);
+        white-space: nowrap;
+        text-transform: uppercase;
+      }
+      .orange .bar-x-label {
+        color: rgba(17, 17, 17, 0.66);
+      }
+      .bar-val {
+        font-family: var(--f-body);
+        font-size: var(--sz-body);
+        font-weight: 700;
+        color: var(--c-fg-2);
+      }
+      .bar-val.hi {
+        color: var(--c-accent);
+      }
+      .orange .bar-val {
+        color: rgba(17, 17, 17, 0.7);
+      }
+      .orange .bar-val.hi {
+        color: #111111;
+      }
+      .chart-baseline {
+        height: 1px;
+        background: var(--c-border);
+        flex-shrink: 0;
+        margin-top: 1px;
+      }
+      .orange .chart-baseline {
+        background: rgba(17, 17, 17, 0.2);
+      }
+      .chart-source {
+        flex-shrink: 0;
+        font-family: var(--f-mono);
+        font-size: var(--sz-caption);
+        color: var(--c-fg-3);
+        letter-spacing: 0.06em;
+        margin-top: var(--gap-sm);
+      }
+      .orange .chart-source {
+        color: rgba(17, 17, 17, 0.72);
+      }
+      /* ── DIAGRAM ────────────────────────────────────────────────────────── */
+      .slide--diagram .slide-body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: var(--gap-lg);
+        min-height: 0;
+      }
+      .flow {
+        display: flex;
+        align-items: stretch;
+        gap: 0;
+      }
+      .flow-step {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap-sm);
+        padding-right: calc(var(--pad-x) * 0.35);
+      }
+      .flow-num {
+        font-family: var(--f-display);
+        font-size: 5vw;
+        font-weight: 900;
+        line-height: 1;
+        color: var(--c-accent);
+        letter-spacing: -0.03em;
+      }
+      .orange .flow-num {
+        color: rgba(17, 17, 17, 0.2);
+      }
+      .flow-title {
+        font-family: var(--f-heading);
+        font-size: var(--sz-h3);
+        font-weight: 700;
+        line-height: 1.15;
+        color: var(--c-fg);
+      }
+      .orange .flow-title {
+        color: #111111;
+      }
+      .flow-desc {
+        font-family: var(--f-body);
+        font-size: var(--sz-body);
+        color: var(--c-fg-2);
+        line-height: 1.6;
+        font-weight: 400;
+      }
+      .orange .flow-desc {
+        color: rgba(17, 17, 17, 0.76);
+      }
+      .flow-arrow {
+        display: flex;
+        align-items: flex-start;
+        padding-top: 1.2em;
+        padding-right: calc(var(--pad-x) * 0.35);
+        font-size: 2.2vw;
+        color: var(--c-accent);
+        font-weight: 400;
+        flex-shrink: 0;
+      }
+      .orange .flow-arrow {
+        color: rgba(17, 17, 17, 0.3);
+      }
+      /* ── PIE / DONUT CHART ──────────────────────────────────────────────── */
+      .slide--pie .slide-body {
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap-md);
+        min-height: 0;
+      }
+      .pie-row {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: calc(var(--pad-x) * 0.7);
+        align-items: center;
+        flex: 1;
+        min-height: 0;
+      }
+      .pie-donut {
+        width: min(28vw, 44vh);
+        height: min(28vw, 44vh);
+        border-radius: 50%;
+        position: relative;
+        flex-shrink: 0;
+        justify-self: center;
+      }
+      .pie-donut::after {
+        content: "";
+        position: absolute;
+        inset: 20%;
+        border-radius: 50%;
+        background: var(--c-bg);
+      }
+      .orange .pie-donut::after {
+        background: var(--c-bg-orange);
+      }
+      .pie-legend {
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap-md);
+      }
+      .pie-item {
+        display: grid;
+        grid-template-columns: 0.8em 1fr auto;
+        gap: 1em;
+        align-items: center;
+      }
+      .pie-swatch {
+        width: 0.8em;
+        height: 0.8em;
+        border-radius: 0; /* square — matches the broadside angular language */
+        flex-shrink: 0;
+      }
+      .pie-item-label {
+        font-family: var(--f-body);
+        font-size: var(--sz-lead);
+        font-weight: 700;
+        line-height: 1.4;
+      }
+      .pie-item-val {
+        font-family: var(--f-mono);
+        font-size: var(--sz-body);
+        font-weight: 500;
+        letter-spacing: 0.06em;
+        color: var(--c-accent);
+      }
+      .orange .pie-item-val {
+        color: #111;
+      }
+      .pie-total {
+        margin-top: var(--gap-sm);
+        padding-top: var(--gap-sm);
+        border-top: 1px solid var(--c-border);
+        font-family: var(--f-mono);
+        font-size: var(--sz-label);
+        letter-spacing: 0.1em;
+        color: var(--c-fg-3);
+      }
+      /* ── PYRAMID ─────────────────────────────────────────────────────────── */
+      .slide--pyramid .slide-body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: var(--gap-md);
+        min-height: 0;
+      }
+      .pyramid {
+        display: flex;
+        flex-direction: column;
+        gap: 3px;
+        align-items: center;
+      }
+      .pyr-level {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 1.5vh 2.5vw;
+        border-left: 4px solid var(--c-accent);
+        transition: width 0.3s;
+      }
+      .orange .pyr-level {
+        border-left-color: rgba(17, 17, 17, 0.4);
+      }
+      .pyr-level:nth-child(1) {
+        background: color-mix(in srgb, var(--c-accent) 75%, var(--c-bg));
+        width: 36%;
+      }
+      .pyr-level:nth-child(2) {
+        background: color-mix(in srgb, var(--c-accent) 50%, var(--c-bg));
+        width: 52%;
+      }
+      .pyr-level:nth-child(3) {
+        background: color-mix(in srgb, var(--c-accent) 28%, var(--c-bg));
+        width: 68%;
+      }
+      .pyr-level:nth-child(4) {
+        background: color-mix(in srgb, var(--c-accent) 14%, var(--c-bg));
+        width: 84%;
+      }
+      .pyr-level:nth-child(5) {
+        background: color-mix(in srgb, var(--c-accent) 6%, var(--c-bg));
+        width: 100%;
+      }
+      .pyr-name {
+        font-family: var(--f-heading);
+        font-size: var(--sz-h3);
+        font-weight: 900;
+        line-height: 1.1;
+        text-transform: lowercase;
+      }
+      .pyr-desc {
+        font-family: var(--f-body);
+        font-size: var(--sz-body);
+        color: var(--c-fg-2);
+        text-align: right;
+        max-width: 55%;
+        line-height: 1.4;
+        font-weight: 400;
+      }
+      /* Top three pyramid levels sit on orange-mix fills:
+         gray muted text is illegible there — use cream ink instead */
+      .pyr-level:nth-child(-n + 3) .pyr-desc {
+        color: rgba(240, 236, 229, 0.85);
+      }
+      /* ── VERTICAL TIMELINE ───────────────────────────────────────────────── */
+      .slide--vtimeline {
+        grid-template-rows: auto auto 1fr auto;
+      }
+      .vt-hl {
+        font-family: var(--f-heading);
+        font-size: var(--sz-h2);
+        font-weight: 900;
+        text-transform: lowercase;
+        letter-spacing: -0.03em;
+        padding-bottom: var(--gap-md);
+        border-bottom: 1px solid var(--c-border);
+      }
+      .vtimeline {
+        display: grid;
+        grid-template-columns: 8em 2px 1fr;
+        gap: 0;
+        min-height: 0;
+        padding-top: var(--gap-md);
+      }
+      .vt-date {
+        font-family: var(--f-mono);
+        font-size: var(--sz-caption);
+        letter-spacing: 0.1em;
+        color: var(--c-fg-3);
+        text-align: right;
+        padding: 0 1.5vw 3.5vh 0;
+        line-height: 1.4;
+      }
+      .vt-spine {
+        background: var(--c-border);
+        position: relative;
+      }
+      .vt-spine::before {
+        content: "";
+        position: absolute;
+        top: 0.2em;
+        left: -5px;
+        width: 10px;
+        height: 10px;
+        background: var(--c-accent);
+      }
+      .vt-content {
+        padding: 0 0 3.5vh 1.5vw;
+      }
+      .vt-title {
+        font-family: var(--f-heading);
+        font-size: var(--sz-h3);
+        font-weight: 900;
+        margin-bottom: 0.6vh;
+        line-height: 1.1;
+        text-transform: lowercase;
+      }
+      .vt-body {
+        font-family: var(--f-body);
+        font-size: var(--sz-body);
+        color: var(--c-fg-2);
+        line-height: 1.65;
+        font-weight: 400;
+      }
+      /* ── CYCLE PROCESS ───────────────────────────────────────────────────── */
+      .slide--cycle .slide-body {
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap-md);
+        min-height: 0;
+      }
+      .cycle-grid {
+        display: grid;
+        grid-template-columns: 1fr 3em 1fr;
+        grid-template-rows: 1fr 3em 1fr;
+        gap: var(--gap-sm);
+        flex: 1;
+        min-height: 0;
+        align-items: center;
+      }
+      .cycle-step {
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap-sm);
+        padding: var(--gap-md);
+        border-top: 3px solid var(--c-accent);
+      }
+      .cycle-num {
+        font-family: var(--f-display);
+        font-size: 4vw;
+        font-weight: 900;
+        color: var(--c-accent);
+        line-height: 1;
+        letter-spacing: -0.03em;
+        text-transform: lowercase;
+      }
+      .cycle-title {
+        font-family: var(--f-heading);
+        font-size: var(--sz-h3);
+        font-weight: 900;
+        line-height: 1.1;
+        text-transform: lowercase;
+      }
+      .cycle-desc {
+        font-family: var(--f-body);
+        font-size: var(--sz-body);
+        color: var(--c-fg-2);
+        line-height: 1.6;
+        font-weight: 400;
+      }
+      .cycle-arrow {
+        color: var(--c-fg-3);
+        font-size: 2.2vw;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="deck">
+      <!-- ══════════════════════════════════════════════════════════════════
+     LAYOUT 1 · COVER  (Broadside: orange)
+     ──────────────────────────────────────────────────────────────────
+     The SPACE10 aesthetic: full orange fill, "01" top-left in tiny mono,
+     section label top-right. Massive weight-900 lowercase title.
+     Tiny mono subtitle. Author + date in bottom corners.
+     ══════════════════════════════════════════════════════════════════ -->
+      <section class="slide slide--cover orange">
+        <!-- Top chrome: slide number left, section label right -->
+        <div class="broadside-top-chrome">
+          <span class="broadside-num" data-anim="fade-in" data-delay="0"
+            >01</span
+          >
+          <span class="corner-label" data-anim="fade-in" data-delay="0"
+            >Apache-2.0</span
+          >
+        </div>
+        <!-- Main content: fills the slide, anchored to bottom -->
+        <div class="cover-body">
+          <h1
+            class="display"
+            data-anim="fade-up"
+            data-delay="1"
+            style="max-width: 95%"
+          >
+            open design
+          </h1>
+          <p
+            class="lead"
+            data-anim="fade-up"
+            data-delay="2"
+            style="max-width: 55%"
+          >
+            The open-source, local, agent-driven design platform. From idea to
+            prototypes, slides, and HTML video — on your own machine.
+          </p>
+        </div>
+        <!-- Bottom meta: author left, date right -->
+        <div class="cover-meta" data-anim="fade-in" data-delay="3">
+          <span class="broadside-num">github.com/nexu-io/open-design</span>
+          <span class="broadside-num">Runs Locally · BYOK · No Sign-up</span>
+        </div>
+      </section>
+      <section class="slide slide--chapter orange">
+        <!-- Chapter number: top-left, same small mono as cover -->
+        <div
+          class="broadside-num"
+          data-anim="fade-in"
+          data-delay="0"
+          style="margin-bottom: var(--gap-lg)"
+        >
+          02 / Why
+        </div>
+        <h2 class="h1" data-anim="fade-up" data-delay="1">
+          why open design
+        </h2>
+        <p
+          class="lead"
+          data-anim="fade-up"
+          data-delay="2"
+          style="max-width: 50%; margin-top: var(--gap-md)"
+        >
+          In April 2026, Claude Design proved an LLM can truly design — yet it
+          is closed-source, paid, and cloud-only. Open Design sets that
+          capability free.
+        </p>
+      </section>
+      <section class="slide slide--statement dark">
+        <header class="slide-chrome">
+          <span class="label muted">The Argument</span>
+          <span class="label muted">03</span>
+        </header>
+        <div class="statement-body">
+          <p class="kicker" data-anim="fade-in" data-delay="0">Core Thesis</p>
+          <div
+            class="rule"
+            data-anim="reveal-right"
+            data-delay="1"
+            style="margin: 1.8vh 0"
+          ></div>
+          <!-- The .accent class makes this orange — the punchline -->
+          <h2
+            class="h1 accent"
+            data-anim="fade-up"
+            data-delay="2"
+            style="max-width: 75%"
+          >
+            frontier ai design, back on every creator's desk.
+          </h2>
+        </div>
+        <footer class="slide-foot">
+          <span class="label muted">Open Design</span>
+          <span class="label muted">github.com/nexu-io/open-design</span>
+        </footer>
+      </section>
+      <section class="slide slide--split dark">
+        <header class="slide-chrome">
+          <span class="label muted">Details</span>
+          <span class="label muted">04</span>
+        </header>
+        <div class="slide-body">
+          <div class="split-text">
+            <p class="kicker" data-anim="fade-in" data-delay="0">The problem</p>
+            <div
+              class="rule"
+              data-anim="reveal-right"
+              data-delay="1"
+              style="margin: 1.5vh 0"
+            ></div>
+            <h2 class="h2" data-anim="fade-up" data-delay="2">
+              closed, paid, and cloud-only
+            </h2>
+            <p
+              class="lead muted"
+              data-anim="fade-up"
+              data-delay="3"
+              style="max-width: 90%"
+            >
+              Claude Design produces real design artifacts — but locks you to
+              one model, one cloud, one bill.
+            </p>
+            <!-- Broadside list: max 3 items, forward-slash bullet -->
+            <ul class="bullet-list" data-anim="fade-up" data-delay="4">
+              <li>No agent choice — locked to a single model</li>
+              <li>No self-hosting, no BYOK</li>
+              <li>Your design context lives in someone else's cloud</li>
+            </ul>
+          </div>
+          <div class="split-image" data-anim="reveal-right" data-delay="2">
+            <div class="img-placeholder">Image Placeholder</div>
+            <p class="img-caption">Product screenshot · Open Design</p>
+          </div>
+        </div>
+        <footer class="slide-foot">
+          <span class="label muted">Open Design</span>
+          <span class="label muted">github.com/nexu-io/open-design</span>
+        </footer>
+      </section>
+      <section class="slide slide--stats orange">
+        <header class="slide-chrome">
+          <span class="broadside-num">05</span>
+          <span class="corner-label">By the numbers</span>
+        </header>
+        <div class="slide-body">
+          <div class="stats-grid" data-anim="fade-up" data-delay="1">
+            <div class="stat-card">
+              <div class="stat-value" data-anim="scale-in" data-delay="1">
+                60K+
+              </div>
+              <div class="stat-label body">
+                GitHub Stars — open source under Apache-2.0
+              </div>
+              <div class="stat-note">github.com/nexu-io/open-design</div>
+            </div>
+            <div class="stat-card">
+              <div class="stat-value" data-anim="scale-in" data-delay="2">
+                300+
+              </div>
+              <div class="stat-label body">
+                Contributors building the platform in the open
+              </div>
+              <div class="stat-note">And 21 coding agents supported</div>
+            </div>
+            <div class="stat-card">
+              <div class="stat-value" data-anim="scale-in" data-delay="3">
+                217+
+              </div>
+              <div class="stat-label body">
+                Plugins — prototypes, slides, posters, dashboards
+              </div>
+              <div class="stat-note">Plus 129 design systems</div>
+            </div>
+          </div>
+        </div>
+        <footer class="slide-foot">
+          <span class="broadside-num" style="opacity: 0.62">Open Design</span>
+          <span class="broadside-num" style="opacity: 0.62"
+            >github.com/nexu-io/open-design</span
+          >
+        </footer>
+      </section>
+      <section class="slide slide--fadelist orange">
+        <div class="fadelist-top">
+          <span class="broadside-num" data-anim="fade-in" data-delay="0"
+            >06</span
+          >
+          <div class="fadelist-items" data-anim="fade-up" data-delay="1">
+            <span class="fadelist-item">Open</span>
+            <span class="fadelist-item">Local</span>
+            <span class="fadelist-item">Agent-native</span>
+          </div>
+        </div>
+        <div class="fadelist-title" data-anim="fade-up" data-delay="2">
+          open<br />design
+        </div>
+        <div
+          style="
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-end;
+            padding-top: var(--gap-sm);
+            border-top: 1px solid rgba(17, 17, 17, 0.15);
+          "
+        >
+          <span class="broadside-num" style="opacity: 0.62"
+            >Open Design · Apache-2.0</span
+          >
+          <span class="broadside-num" style="opacity: 0.62">06 / 16</span>
+        </div>
+      </section>
+      <section class="slide slide--list dark">
+        <header class="slide-chrome">
+          <span class="label muted">The Framework</span>
+          <span class="label muted">07</span>
+        </header>
+        <div class="slide-body">
+          <div class="list-head">
+            <p class="kicker" data-anim="fade-in" data-delay="0">Four claims</p>
+            <h2 class="h2" data-anim="fade-up" data-delay="1">
+              what makes it<br />different
+            </h2>
+          </div>
+          <ul class="bullet-list" data-anim="fade-up" data-delay="2">
+            <li>
+              Desktop-native — local files, Figma exports, and code repos
+              directly readable
+            </li>
+            <li>
+              Plug in agents, don't rebuild them — 21 coding agents on your
+              PATH, zero config
+            </li>
+            <li>
+              It learns your taste — every choice becomes design systems,
+              preferences, and memory
+            </li>
+            <li>
+              Full-stack BYOK — your keys, your machine, Apache-2.0 all the way
+              down
+            </li>
+          </ul>
+        </div>
+        <footer class="slide-foot">
+          <span class="label muted">Open Design</span>
+          <span class="label muted">github.com/nexu-io/open-design</span>
+        </footer>
+      </section>
+      <section class="slide slide--quote dark">
+        <p
+          class="kicker accent"
+          data-anim="fade-in"
+          data-delay="0"
+          style="margin-bottom: var(--gap-lg)"
+        >
+          On version control
+        </p>
+        <div class="quote-text" data-anim="fade-up" data-delay="1">
+          "File-system semantics plus git-diffable design artifacts — design is
+          finally under version control."
+        </div>
+        <div class="quote-attr" data-anim="fade-up" data-delay="2">
+          <span class="label accent">Indie developer</span>
+          <span class="label muted">Open Design community</span>
+        </div>
+      </section>
+      <section class="slide slide--compare dark">
+        <header class="slide-chrome">
+          <span class="label muted">Before · After</span>
+          <span class="label muted">09</span>
+        </header>
+        <div class="slide-body">
+          <div class="compare-panel left">
+            <div class="compare-label" data-anim="fade-in" data-delay="0">
+              Before
+            </div>
+            <h3 class="h3" data-anim="fade-up" data-delay="1">
+              closed and cloud-only
+            </h3>
+            <p class="lead muted" data-anim="fade-up" data-delay="2">
+              One model, one cloud, one monthly bill. Your design context lives
+              on someone else's servers.
+            </p>
+            <ul
+              class="bullet-list"
+              data-anim="fade-up"
+              data-delay="3"
+              style="--sz-lead: 1.2vw"
+            >
+              <li>Locked to a single model</li>
+              <li>No self-hosting, no BYOK</li>
+              <li>About $500 a month</li>
+            </ul>
+          </div>
+          <div class="compare-panel panel-orange">
+            <div class="compare-label after" data-anim="fade-in" data-delay="0">
+              After
+            </div>
+            <h3
+              class="h3"
+              data-anim="fade-up"
+              data-delay="1"
+              style="color: #111"
+            >
+              open and local
+            </h3>
+            <p
+              class="lead"
+              data-anim="fade-up"
+              data-delay="2"
+              style="color: rgba(17, 17, 17, 0.8)"
+            >
+              Any of 21 coding agents, your own keys, everything on your
+              machine.
+            </p>
+            <ul
+              class="bullet-list"
+              data-anim="fade-up"
+              data-delay="3"
+              style="--sz-lead: 1.2vw"
+            >
+              <li>Apache-2.0 — fork, self-host, commercial use</li>
+              <li>Full-stack BYOK across providers</li>
+              <li>$500 → ~$73 a month — 80% less</li>
+            </ul>
+          </div>
+        </div>
+        <footer class="slide-foot">
+          <span class="label muted">Open Design</span>
+          <span class="label muted">github.com/nexu-io/open-design</span>
+        </footer>
+      </section>
+      <section class="slide slide--chart dark">
+        <header class="slide-chrome">
+          <span class="label muted">Plugin Ecosystem</span>
+          <span class="label muted">10</span>
+        </header>
+        <div class="slide-body">
+          <div class="chart-header">
+            <h2 class="h2" data-anim="fade-up" data-delay="0">
+              plugins by category
+            </h2>
+            <span class="caption muted" data-anim="fade-in" data-delay="1"
+              >217+ plugins · demo distribution</span
+            >
+          </div>
+          <div class="chart-wrapper" data-anim="fade-up" data-delay="2">
+            <div class="bar-track">
+              <div class="bar-col">
+                <span class="bar-val">38</span>
+                <div class="bar-fill" style="height: 14vh"></div>
+                <span class="bar-x-label">Video</span>
+              </div>
+              <div class="bar-col">
+                <span class="bar-val">47</span>
+                <div class="bar-fill" style="height: 18vh"></div>
+                <span class="bar-x-label">Posters</span>
+              </div>
+              <div class="bar-col">
+                <span class="bar-val">58</span>
+                <div class="bar-fill" style="height: 22vh"></div>
+                <span class="bar-x-label">Slides</span>
+              </div>
+              <div class="bar-col">
+                <span class="bar-val hi">74</span>
+                <div class="bar-fill accent" style="height: 28vh"></div>
+                <span class="bar-x-label">Prototypes</span>
+              </div>
+            </div>
+            <div class="chart-baseline"></div>
+          </div>
+          <p class="chart-source" data-anim="fade-in" data-delay="3">
+            Demo data — illustrative split of the 217+ plugin catalog
+          </p>
+        </div>
+        <footer class="slide-foot">
+          <span class="label muted">Open Design</span>
+          <span class="label muted">github.com/nexu-io/open-design</span>
+        </footer>
+      </section>
+      <section class="slide slide--diagram orange">
+        <header class="slide-chrome">
+          <span class="broadside-num">11</span>
+          <span class="corner-label">The Process</span>
+        </header>
+        <div class="slide-body">
+          <h2
+            class="h2"
+            style="color: #111; letter-spacing: -0.02em"
+            data-anim="fade-up"
+            data-delay="0"
+          >
+            how it works
+          </h2>
+          <div class="flow" data-anim="fade-up" data-delay="1">
+            <div class="flow-step">
+              <div class="flow-num">01</div>
+              <div class="flow-title">Pick a start</div>
+              <div class="flow-desc">
+                Describe your goal in one sentence, or start from a template or
+                plugin.
+              </div>
+            </div>
+            <div class="flow-arrow">→</div>
+            <div class="flow-step">
+              <div class="flow-num">02</div>
+              <div class="flow-title">Set direction</div>
+              <div class="flow-desc">
+                Pick a visual direction — palette, type, and spacing flow into
+                generation automatically.
+              </div>
+            </div>
+            <div class="flow-arrow">→</div>
+            <div class="flow-step">
+              <div class="flow-num">03</div>
+              <div class="flow-title">Generate</div>
+              <div class="flow-desc">
+                The agent reads full context and produces real runnable files,
+                previewed in a sandbox.
+              </div>
+            </div>
+            <div class="flow-arrow">→</div>
+            <div class="flow-step">
+              <div class="flow-num">04</div>
+              <div class="flow-title">Ship or film</div>
+              <div class="flow-desc">
+                Hand off to engineering, or turn it into video with
+                HyperFrames. Memory compounds.
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer class="slide-foot" style="border-color: rgba(17, 17, 17, 0.15)">
+          <span class="broadside-num" style="opacity: 0.62">Open Design</span>
+          <span class="broadside-num" style="opacity: 0.62"
+            >github.com/nexu-io/open-design</span
+          >
+        </footer>
+      </section>
+      <section class="slide slide--pie dark">
+        <header class="slide-chrome">
+          <span class="label muted">What You Can Make</span>
+          <span class="label muted">12</span>
+        </header>
+        <div class="slide-body">
+          <h2
+            class="h2"
+            data-anim="fade-up"
+            data-delay="0"
+            style="font-weight: 900"
+          >
+            what people make with it
+          </h2>
+          <div class="pie-row" data-anim="fade-up" data-delay="1">
+            <!-- Donut: conic-gradient segments match legend order -->
+            <div
+              class="pie-donut"
+              style="
+                background: conic-gradient(
+                  var(--c-accent) 0% 40%,
+                  #6e6e63 40% 68%,
+                  #4a4a41 68% 88%,
+                  #30302a 88% 100%
+                );
+              "
+            ></div>
+            <div class="pie-legend">
+              <div class="pie-item">
+                <div
+                  class="pie-swatch"
+                  style="background: var(--c-accent)"
+                ></div>
+                <span class="pie-item-label">Prototypes</span>
+                <span class="pie-item-val">40%</span>
+              </div>
+              <div class="pie-item">
+                <div class="pie-swatch" style="background: #6e6e63"></div>
+                <span class="pie-item-label">Slides &amp; decks</span>
+                <span class="pie-item-val">28%</span>
+              </div>
+              <div class="pie-item">
+                <div class="pie-swatch" style="background: #4a4a41"></div>
+                <span class="pie-item-label">Posters &amp; images</span>
+                <span class="pie-item-val">20%</span>
+              </div>
+              <div class="pie-item">
+                <div class="pie-swatch" style="background: #30302a"></div>
+                <span class="pie-item-label">HTML video</span>
+                <span class="pie-item-val">12%</span>
+              </div>
+              <div class="pie-total">217+ PLUGINS · DEMO DISTRIBUTION</div>
+            </div>
+          </div>
+          <p class="chart-source" data-anim="fade-in" data-delay="2">
+            Demo data · illustrative split by artifact type
+          </p>
+        </div>
+        <footer class="slide-foot">
+          <span class="label muted">Open Design</span>
+          <span class="label muted">github.com/nexu-io/open-design</span>
+        </footer>
+      </section>
+      <section class="slide slide--pyramid dark">
+        <header class="slide-chrome">
+          <span class="label muted">The Hierarchy</span>
+          <span class="label muted">13</span>
+        </header>
+        <div class="slide-body">
+          <h2
+            class="h2"
+            data-anim="fade-up"
+            data-delay="0"
+            style="font-weight: 900"
+          >
+            what actually matters
+          </h2>
+          <div class="pyramid" data-anim="fade-up" data-delay="1">
+            <div class="pyr-level">
+              <span class="pyr-name">memory</span>
+              <span class="pyr-desc">every choice compounds into taste</span>
+            </div>
+            <div class="pyr-level">
+              <span class="pyr-name">design systems</span>
+              <span class="pyr-desc">129 systems keep brands consistent</span>
+            </div>
+            <div class="pyr-level">
+              <span class="pyr-name">agents</span>
+              <span class="pyr-desc">21 coding agents, zero config</span>
+            </div>
+            <div class="pyr-level">
+              <span class="pyr-name">plugins</span>
+              <span class="pyr-desc">217+ ready-made workflows</span>
+            </div>
+            <div class="pyr-level">
+              <span class="pyr-name">open source</span>
+              <span class="pyr-desc">Apache-2.0 — fork it, self-host it</span>
+            </div>
+          </div>
+        </div>
+        <footer class="slide-foot">
+          <span class="label muted">Open Design</span>
+          <span class="label muted">github.com/nexu-io/open-design</span>
+        </footer>
+      </section>
+      <section class="slide slide--vtimeline dark">
+        <header class="slide-chrome">
+          <span class="label muted">The Story</span>
+          <span class="label muted">14</span>
+        </header>
+        <div class="vt-hl" data-anim="fade-up" data-delay="0">
+          how we got here
+        </div>
+        <div class="vtimeline" data-anim="fade-up" data-delay="1">
+          <!-- Event 1 -->
+          <div class="vt-date">Apr 2026</div>
+          <div class="vt-spine"></div>
+          <div class="vt-content">
+            <div class="vt-title">the proof</div>
+            <div class="vt-body">
+              Claude Design shows an LLM can produce real design artifacts —
+              but it is closed-source, paid, and cloud-only.
+            </div>
+          </div>
+          <!-- Event 2 -->
+          <div class="vt-date">Then</div>
+          <div class="vt-spine"></div>
+          <div class="vt-content">
+            <div class="vt-title">the answer</div>
+            <div class="vt-body">
+              Open Design — open, local, agent-driven. Apache-2.0 from day one,
+              BYOK, no sign-up.
+            </div>
+          </div>
+          <!-- Event 3 -->
+          <div class="vt-date">Today</div>
+          <div class="vt-spine"></div>
+          <div class="vt-content">
+            <div class="vt-title">the community</div>
+            <div class="vt-body">
+              60K+ GitHub stars, 300+ contributors, 217+ plugins, 129 design
+              systems.
+            </div>
+          </div>
+          <!-- Event 4 -->
+          <div class="vt-date">Next</div>
+          <div class="vt-spine"></div>
+          <div class="vt-content">
+            <div class="vt-title">your desk</div>
+            <div class="vt-body">
+              Frontier AI design, back on every creator's desk.
+            </div>
+          </div>
+        </div>
+        <footer class="slide-foot">
+          <span class="label muted">Open Design · Apache-2.0</span>
+          <span class="label muted">14</span>
+        </footer>
+      </section>
+      <section class="slide slide--cycle dark">
+        <header class="slide-chrome">
+          <span class="label muted">The Loop</span>
+          <span class="label muted">15</span>
+        </header>
+        <div class="slide-body">
+          <h2
+            class="h2"
+            data-anim="fade-up"
+            data-delay="0"
+            style="font-weight: 900"
+          >
+            generate · choose · remember
+          </h2>
+          <div class="cycle-grid" data-anim="fade-up" data-delay="1">
+            <!-- Row 1 -->
+            <div class="cycle-step">
+              <div class="cycle-num">01</div>
+              <div class="cycle-title">generate</div>
+              <div class="cycle-desc">
+                The agent reads full context and produces real runnable files.
+              </div>
+            </div>
+            <div class="cycle-arrow">→</div>
+            <div class="cycle-step">
+              <div class="cycle-num">02</div>
+              <div class="cycle-title">choose</div>
+              <div class="cycle-desc">
+                Preview in the sandbox. Pick, tweak, and refine the result.
+              </div>
+            </div>
+            <!-- Row 2: arrows -->
+            <div class="cycle-arrow">↓</div>
+            <div></div>
+            <div class="cycle-arrow">↓</div>
+            <!-- Row 3 (reversed: left=04, right=03 to form clockwise loop) -->
+            <div class="cycle-step">
+              <div class="cycle-num">04</div>
+              <div class="cycle-title">improve</div>
+              <div class="cycle-desc">
+                The next generation lands closer to what you want.
+              </div>
+            </div>
+            <div class="cycle-arrow">←</div>
+            <div class="cycle-step">
+              <div class="cycle-num">03</div>
+              <div class="cycle-title">remember</div>
+              <div class="cycle-desc">
+                Every choice becomes design systems, preferences, and memory.
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer class="slide-foot">
+          <span class="label muted">Open Design · Apache-2.0</span>
+          <span class="label muted">15</span>
+        </footer>
+      </section>
+      <section class="slide slide--end orange">
+        <div class="broadside-top-chrome">
+          <span class="broadside-num" data-anim="fade-in" data-delay="0"
+            >16</span
+          >
+          <span class="corner-label" data-anim="fade-in" data-delay="0"
+            >End</span
+          >
+        </div>
+        <h1
+          class="display"
+          data-anim="fade-up"
+          data-delay="1"
+          style="
+            color: #111;
+            max-width: 80%;
+            line-height: 0.9;
+            letter-spacing: -0.04em;
+          "
+        >
+          on your<br />desk.
+        </h1>
+        <div
+          style="display: flex; flex-direction: column; gap: var(--gap-sm)"
+          data-anim="fade-up"
+          data-delay="2"
+        >
+          <p class="lead" style="color: rgba(17, 17, 17, 0.8); max-width: 45%">
+            github.com/nexu-io/open-design · discord.gg/9ptkbbqRu ·
+            x.com/nexudotio
+          </p>
+        </div>
+        <div
+          style="
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-end;
+            margin-top: auto;
+            padding-top: var(--gap-sm);
+            border-top: 1px solid rgba(17, 17, 17, 0.15);
+          "
+        >
+          <span class="broadside-num" style="opacity: 0.62"
+            >Download Open Design · macOS / Windows</span
+          >
+          <span class="broadside-num" style="opacity: 0.62"
+            >Star on GitHub</span
+          >
+        </div>
+      </section>
+    </div>
+    <!-- /#deck -->
+    <nav id="nav-dots" aria-label="Slide navigation"></nav>
+    <div id="slide-counter"></div>
+    <script>
+      (function () {
+        const deck = document.getElementById("deck");
+        const dotsNav = document.getElementById("nav-dots");
+        const counter = document.getElementById("slide-counter");
+        const slides = Array.from(deck.querySelectorAll(".slide"));
+        const total = slides.length;
+        let current = 0;
+        let isAnimating = false;
+        // Size the deck to fit all slides side by side
+        deck.style.width = "calc(" + total + " * 100vw)";
+        // Build navigation dots dynamically from slide count
+        slides.forEach(function (_, i) {
+          const dot = document.createElement("button");
+          dot.className = "nav-dot";
+          dot.setAttribute("aria-label", "Slide " + (i + 1));
+          dot.addEventListener("click", function () {
+            goTo(i);
+          });
+          dotsNav.appendChild(dot);
+        });
+        function pad(n) {
+          return String(n).padStart(2, "0");
+        }
+        function goTo(index) {
+          if (isAnimating) return;
+          if (index < 0 || index >= total) return;
+          if (
+            index === current &&
+            slides[current].classList.contains("is-active")
+          )
+            return;
+          isAnimating = true;
+          slides[current].classList.remove("is-active");
+          current = index;
+          const slide = slides[current];
+          // Reset animations so re-visiting a slide re-plays them
+          slide.querySelectorAll("[data-anim]").forEach(function (el) {
+            el.style.animation = "none";
+            void el.offsetHeight; // force reflow to clear animation state
+            el.style.animation = "";
+          });
+          slide.classList.add("is-active");
+          deck.style.transform = "translateX(calc(-" + current + " * 100vw))";
+          // Update dots
+          dotsNav.querySelectorAll(".nav-dot").forEach(function (d, i) {
+            d.classList.toggle("is-active", i === current);
+          });
+          // Update counter
+          counter.textContent = pad(current + 1) + " / " + pad(total);
+          setTimeout(function () {
+            isAnimating = false;
+          }, 900);
+        }
+        // Keyboard navigation — arrows, space, Home/End
+        document.addEventListener("keydown", function (e) {
+          if (
+            e.key === "ArrowRight" ||
+            e.key === " " ||
+            e.key === "ArrowDown"
+          ) {
+            e.preventDefault();
+            goTo(current + 1);
+          }
+          if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+            e.preventDefault();
+            goTo(current - 1);
+          }
+          if (e.key === "Home") goTo(0);
+          if (e.key === "End") goTo(total - 1);
+        });
+        // Touch swipe — 40px threshold
+        var touchStartX = 0;
+        document.addEventListener(
+          "touchstart",
+          function (e) {
+            touchStartX = e.touches[0].clientX;
+          },
+          { passive: true },
+        );
+        document.addEventListener(
+          "touchend",
+          function (e) {
+            var dx = e.changedTouches[0].clientX - touchStartX;
+            if (Math.abs(dx) > 40) goTo(current + (dx < 0 ? 1 : -1));
+          },
+          { passive: true },
+        );
+        // Mouse wheel — 1000ms lock prevents double-firing
+        var wheelLocked = false;
+        document.addEventListener(
+          "wheel",
+          function (e) {
+            if (wheelLocked) return;
+            var primary =
+              Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
+            goTo(current + (primary > 0 ? 1 : -1));
+            wheelLocked = true;
+            setTimeout(function () {
+              wheelLocked = false;
+            }, 1000);
+          },
+          { passive: true },
+        );
+        // Kick off on slide 1
+        goTo(0);
+      })();
+    </script>
+  </body>
+</html>