npm - @w3kits-com/plugin-opendesign - Versions diffs - 0.1.8 → 0.1.10 - Mend

@w3kits-com/plugin-opendesign 0.1.8 → 0.1.10

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

package/dist/__w3kits/assets/design-templates/html-ppt-zhangzara-monochrome/example.html ADDED Viewed

@@ -0,0 +1,2596 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ivory Ledger · User Research Synthesis</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <!--
+      Ivory Ledger font stack:
+        Jost          — geometric sans, the backbone (weights 200–600)
+        JetBrains Mono— chrome labels, sidebar metadata, mono elements
+        Lora          — serif for insight card titles and quotes (italic)
+        Noto Serif SC — CJK serif fallback
+        Noto Sans SC  — CJK sans fallback
+    -->
+    <link
+      href="https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400;500;600&family=JetBrains+Mono:wght@300;400;500&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Noto+Serif+SC:wght@300;400;500&family=Noto+Sans+SC:wght@200;300;400;500&display=swap"
+      rel="stylesheet"
+    />
+    <style>
+      /* ╔══════════════════════════════════════════════════════════════════════╗
+   ║  ZONE A · TOKENS  (Ivory Ledger style)                                      ║
+   ║                                                                      ║
+   ║  Ivory Ledger: black ink on cream paper only.                  ║
+   ║  Replace ONLY this block to retheme. Every color, font, and size     ║
+   ║  in this file reads from these custom properties.                    ║
+   ║  Never write raw hex values or px sizes outside this block.          ║
+   ╚══════════════════════════════════════════════════════════════════════╝ */
+      :root {
+        /* ── Palette ──────────────────────────────────────────────────────── */
+        --c-bg: #fafadf; /* cream background for every slide       */
+        --c-bg-alt: #f2f2d2; /* cream inset surface                   */
+        --c-bg-light: #fafadf; /* title-slide cream                     */
+        --c-bg-light-alt: #f0f0d4; /* slightly deeper cream for insets      */
+        --c-bg-cream: #f5f0e4; /* warm cream variant                    */
+        --c-fg: #1a1a16; /* black ink text                         */
+        --c-fg-2: #5e5e54; /* secondary graphite text                */
+        --c-fg-3: #8a8a80; /* tertiary graphite text                 */
+        --c-fg-light: #1a1a16; /* black ink on cream                    */
+        --c-fg-light-2: #5e5e54; /* secondary graphite on cream           */
+        --c-fg-light-3: #8a8a80; /* tertiary graphite on cream            */
+        --c-accent: #1a1a16; /* accent collapsed to black ink         */
+        --c-border: #1a1a16; /* black dividers                        */
+        --c-border-light: #1a1a16; /* black dividers on cream               */
+        /* ── Insight cards: no accent colors, just cream paper surfaces ─── */
+        --c-card-a: #fafadf;
+        --c-card-b: #f5f0e4;
+        --c-card-c: #fafadf;
+        /* ── Typography ──────────────────────────────────────────────────── */
+        --f-display: "Jost", "Noto Sans SC", system-ui, sans-serif;
+        --f-heading: "Jost", "Noto Sans SC", system-ui, sans-serif;
+        --f-body: "Jost", "Noto Sans SC", system-ui, sans-serif;
+        --f-serif: "Lora", "Noto Serif SC", Georgia, serif;
+        --f-mono: "JetBrains Mono", monospace;
+        /* ── Type Scale ───────────────────────────────────────────────────── */
+        --sz-display: 8.5vw; /* hero/cover — very large, very light         */
+        --sz-h1: 5vw; /* chapter / statement headline                */
+        --sz-h2: 3.2vw; /* slide headline                              */
+        --sz-h3: 2vw; /* sub-headline                                */
+        --sz-lead: 1.5vw; /* generous lead text                          */
+        --sz-body: 1.1vw; /* body text                                   */
+        --sz-caption: 0.85vw; /* captions, footnotes                         */
+        --sz-label: 0.72vw; /* chrome labels, sidebar labels               */
+        /* ── Spacing ─────────────────────────────────────────────────────── */
+        --pad-x: 8vw; /* generous horizontal padding — space is the design */
+        --pad-y: 6vh;
+        --gap-lg: 5vh;
+        --gap-md: 3vh;
+        --gap-sm: 1.5vh;
+        /* ── Motion ──────────────────────────────────────────────────────── */
+        --ease-slide: cubic-bezier(0.77, 0, 0.175, 1);
+        --dur-slide: 0.9s;
+        --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
+        --dur-enter: 0.7s;
+      }
+      /* ╔══════════════════════════════════════════════════════════════════════╗
+   ║  ZONE B · ENGINE — DO NOT MODIFY                                     ║
+   ║                                                                      ║
+   ║  Layout engine, slide 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 in a single row */
+      #deck {
+        display: flex;
+        height: 100vh;
+        /* Width = N * 100vw, calculated and set by JS on init */
+        transition: transform var(--dur-slide) var(--ease-slide);
+        will-change: transform;
+      }
+      /* Slide base — each slide is exactly one full viewport */
+      .slide {
+        flex: 0 0 100vw;
+        width: 100vw;
+        height: 100vh;
+        position: relative;
+        /* Left extra gutter makes room for the sidebar element */
+        padding: var(--pad-y) var(--pad-x) var(--pad-y)
+          calc(var(--pad-x) + 3.5vw);
+        display: grid;
+        grid-template-rows: auto 1fr auto;
+        overflow: hidden;
+      }
+      /* Prevent grid children from overflowing their row */
+      .slide-body {
+        min-height: 0;
+      }
+      /* Slide themes */
+      .slide.dark {
+        background: var(--c-bg);
+        color: var(--c-fg);
+      }
+      .slide.light {
+        background: var(--c-bg-light);
+        color: var(--c-fg-light);
+      }
+      /* Cream variant — insights + timeline slides */
+      .slide.cream {
+        background: var(--c-bg-cream);
+        color: var(--c-fg-light);
+      }
+      /* ── Animation system ──────────────────────────────────────────────── */
+      /*
+       * All [data-anim] elements start invisible (opacity:0).
+       * They animate when their parent slide gains .is-active.
+       * JS forcefully resets them before adding .is-active so re-visiting
+       * a slide replays the entrance animation from the beginning.
+       */
+      [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 elements */
+      [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;
+      }
+      [data-delay="7"] {
+        animation-delay: 0.96s;
+      }
+      @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;
+        }
+      }
+      /* ── Navigation dots ──────────────────────────────────────────────── */
+      #nav-dots {
+        position: fixed;
+        bottom: 24px;
+        left: 50%;
+        transform: translateX(-50%);
+        display: flex;
+        gap: 7px;
+        z-index: 100;
+      }
+      .nav-dot {
+        width: 5px;
+        height: 5px;
+        border-radius: 50%;
+        border: none;
+        /* Default: semi-transparent near-black, readable on cream bg */
+        background: rgba(26, 26, 22, 0.3);
+        cursor: pointer;
+        transition:
+          background 0.3s,
+          transform 0.3s;
+        padding: 0;
+      }
+      .nav-dot.is-active {
+        background: rgba(26, 26, 22, 0.8);
+        transform: scale(1.4);
+      }
+      /* Slide counter — bottom-right, barely-there */
+      #slide-counter {
+        position: fixed;
+        bottom: 20px;
+        right: 28px;
+        font-family: var(--f-mono);
+        font-size: 10px;
+        letter-spacing: 0.12em;
+        color: rgba(26, 26, 22, 0.28);
+        z-index: 100;
+        user-select: none;
+      }
+      /* ╔══════════════════════════════════════════════════════════════════════╗
+   ║  ZONE C · TYPOGRAPHY  (Ivory Ledger: ultra-light weights, generous spacing) ║
+   ╚══════════════════════════════════════════════════════════════════════╝ */
+      /* Display: hero headline, weight 200 — maximum airiness */
+      .display {
+        font-family: var(--f-display);
+        font-size: var(--sz-display);
+        font-weight: 200;
+        line-height: 0.96;
+        letter-spacing: -0.02em;
+      }
+      .h1 {
+        font-family: var(--f-heading);
+        font-size: var(--sz-h1);
+        font-weight: 200;
+        line-height: 1.1;
+        letter-spacing: -0.01em;
+      }
+      .h2 {
+        font-family: var(--f-heading);
+        font-size: var(--sz-h2);
+        font-weight: 300;
+        line-height: 1.2;
+      }
+      .h3 {
+        font-family: var(--f-heading);
+        font-size: var(--sz-h3);
+        font-weight: 400;
+        line-height: 1.3;
+      }
+      .lead {
+        font-family: var(--f-body);
+        font-size: var(--sz-lead);
+        font-weight: 300;
+        line-height: 1.65;
+      }
+      .body {
+        font-family: var(--f-body);
+        font-size: var(--sz-body);
+        font-weight: 300;
+        line-height: 1.7;
+      }
+      .caption {
+        font-family: var(--f-body);
+        font-size: var(--sz-caption);
+        font-weight: 300;
+        line-height: 1.55;
+      }
+      /* Labels: the one exception — tracked mono uppercase for structural chrome */
+      .label {
+        font-family: var(--f-mono);
+        font-size: var(--sz-label);
+        font-weight: 400;
+        letter-spacing: 0.12em;
+        text-transform: uppercase;
+      }
+      /* Serif: Lora — used for insight card titles and quote text */
+      .serif {
+        font-family: var(--f-serif);
+      }
+      /* Contextual color helpers */
+      .dark .muted {
+        color: var(--c-fg-2);
+      }
+      .light .muted {
+        color: var(--c-fg-light-2);
+      }
+      .cream .muted {
+        color: var(--c-fg-light-2);
+      }
+      /* Accent: monochrome ink for small emphasis marks */
+      .accent {
+        color: var(--c-accent);
+      }
+      /* ╔══════════════════════════════════════════════════════════════════════╗
+   ║  ZONE D · CHROME + SIDEBAR                                           ║
+   ║                                                                      ║
+   ║  Standard header/footer on light slides.                             ║
+   ║  Sidebar: the Ivory Ledger signature — a thin vertical line in the left     ║
+   ║  gutter with rotated mono labels reading bottom-to-top.              ║
+   ╚══════════════════════════════════════════════════════════════════════╝ */
+      /* Chrome header and footer: thin rule + label on each side */
+      .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);
+      }
+      /* Light and cream slides: warm tan border instead of dark */
+      .light .slide-chrome,
+      .light .slide-foot,
+      .cream .slide-chrome,
+      .cream .slide-foot {
+        border-color: var(--c-border-light);
+      }
+      /* These slide types 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;
+      }
+      /*
+       * ── Vertical Sidebar ─────────────────────────────────────────────────
+       *
+       * The sidebar occupies the left gutter (the 3.5vw added to pad-x above).
+       * It draws a single 1px vertical line with rotated mono labels along it.
+       * Labels read upward (writing-mode: vertical-rl + rotate(180deg)).
+       *
+       * How to use:
+       *   <div class="slide-sidebar" data-anim="fade-in" data-delay="0">
+       *     <span class="sidebar-label">Section Name</span>
+       *     <span class="sidebar-label">[Month, Year]</span>
+       *   </div>
+       *
+       * Two labels is the sweet spot. Three is the maximum.
+       */
+      /* Disabled: the rotated mono sidebar (vertical text in the left
+         gutter) was added as a chapter-tab decoration but reads as
+         visual noise. Hidden across the deck. */
+      .slide-sidebar {
+        display: none !important;
+      }
+      .slide-sidebar:not(.deck-no-such-thing) {
+        position: absolute;
+        /* Positioned in the left gutter, between outer padding and content */
+        left: var(--pad-x);
+        top: var(--pad-y);
+        bottom: var(--pad-y);
+        width: 3vw;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: flex-start;
+      }
+      /* The thin vertical spine of the sidebar */
+      .slide-sidebar::before {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: 1px;
+        background: var(--c-border-light);
+      }
+      .dark .slide-sidebar::before {
+        background: var(--c-border);
+      }
+      /* Individual rotated label — reads bottom-to-top along the line */
+      .sidebar-label {
+        font-family: var(--f-mono);
+        font-size: 0.65vw;
+        letter-spacing: 0.18em;
+        text-transform: uppercase;
+        color: var(--c-fg-light-3);
+        writing-mode: vertical-rl;
+        transform: rotate(180deg);
+        white-space: nowrap;
+        /* Small gap between the spine and the text */
+        padding-left: 0.8vw;
+      }
+      .dark .sidebar-label {
+        color: var(--c-fg-3);
+      }
+      /* ╔══════════════════════════════════════════════════════════════════════╗
+   ║  ZONE E · LAYOUT PATTERNS                                            ║
+   ║                                                                      ║
+   ║  12 slide types. Only use the class names defined below.             ║
+   ╚══════════════════════════════════════════════════════════════════════╝ */
+      /* ── 1. COVER ─────────────────────────────────────────────────────── */
+      /* Opening slide: light cream bg, bottom-anchored content, no chrome */
+      .slide--cover {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+      }
+      .cover-body {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        justify-content: flex-end;
+        gap: var(--gap-md);
+      }
+      /* Bottom meta bar: thin rule above, author left, version right */
+      .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 var(--c-border-light);
+      }
+      /* ── 2. CHAPTER ───────────────────────────────────────────────────── */
+      /* Dark section-break slide: chapter number + rule + headline */
+      .slide--chapter {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+      /* Chapter number in tracked mono — colored accent */
+      .chapter-num {
+        font-family: var(--f-mono);
+        font-size: var(--sz-label);
+        letter-spacing: 0.2em;
+        text-transform: uppercase;
+        color: var(--c-accent);
+        margin-bottom: var(--gap-md);
+      }
+      /* Thin horizontal rule — monochrome accent, matches chapter-num color */
+      .chapter-rule {
+        width: 36px;
+        height: 1px;
+        background: var(--c-accent);
+        margin-bottom: var(--gap-md);
+      }
+      /* ── 3. STATEMENT ─────────────────────────────────────────────────── */
+      /* Large claim slide: sidebar + headline + optional supporting content */
+      .slide--statement .statement-body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: var(--gap-md);
+      }
+      /* ── 4. SPLIT ─────────────────────────────────────────────────────── */
+      /* Two-column: text left, image right */
+      .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;
+        gap: var(--gap-sm);
+      }
+      /* Always specify explicit height in vh — never auto or aspect-ratio */
+      .split-image img,
+      .img-placeholder {
+        width: 100%;
+        height: 55vh;
+      }
+      .split-image img {
+        object-fit: cover;
+        display: block;
+      }
+      .img-placeholder {
+        border: 1px solid var(--c-border-light);
+        background: var(--c-bg-light-alt);
+        color: var(--c-fg-light-2);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: var(--f-mono);
+        font-size: var(--sz-label);
+        font-weight: 400;
+      }
+      /* ── 5. STATS ─────────────────────────────────────────────────────── */
+      /* Three large numeric stats with rule-top, label, and source note */
+      .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;
+      }
+      .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-light);
+      }
+      /* The big number: weight 200, maximum lightness */
+      .stat-value {
+        font-family: var(--f-display);
+        font-size: 5.5vw;
+        font-weight: 200;
+        line-height: 1;
+        color: var(--c-fg-light);
+        letter-spacing: -0.03em;
+      }
+      .stat-label {
+        font-family: var(--f-body);
+        font-size: var(--sz-body);
+        line-height: 1.5;
+        font-weight: 300;
+        color: var(--c-fg-light);
+      }
+      /* Source attribution in small mono */
+      .stat-note {
+        font-family: var(--f-mono);
+        font-size: var(--sz-caption);
+        letter-spacing: 0.05em;
+        color: var(--c-fg-light-3);
+      }
+      /* ── 6. QUOTE ─────────────────────────────────────────────────────── */
+      /* Dark slide: large Lora italic quote, no quote mark decoration */
+      .slide--quote {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        /* Override standard padding for full bleed feel */
+        padding: calc(var(--pad-y) * 1.3) calc(var(--pad-x) * 1.2)
+          calc(var(--pad-y) * 1.3) calc(var(--pad-x) + 3.5vw + 1.2vw);
+      }
+      /* The quote itself: Lora italic, large, no decoration */
+      .quote-text {
+        font-family: var(--f-serif);
+        font-size: 3.2vw;
+        font-weight: 400;
+        line-height: 1.35;
+        letter-spacing: 0;
+        max-width: 75%;
+        margin-bottom: var(--gap-lg);
+        font-style: italic;
+        color: var(--c-fg);
+      }
+      /* Attribution: two lines of small mono text */
+      .quote-attr {
+        display: flex;
+        flex-direction: column;
+        gap: 0.4vh;
+      }
+      /* ── 7. LIST ──────────────────────────────────────────────────────── */
+      /* Left: label + heading + context. Right: bullet list with dash markers */
+      .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: 300;
+        line-height: 1.5;
+      }
+      /* Ivory Ledger bullet: em dash in muted tan — never a heavy accent dot */
+      .bullet-list li::before {
+        content: "—";
+        color: var(--c-fg-light-3);
+        font-family: var(--f-mono);
+      }
+      .light .bullet-list li {
+        color: var(--c-fg-light);
+      }
+      .dark .bullet-list li {
+        color: var(--c-fg);
+      }
+      /* ── 8. COMPARE ───────────────────────────────────────────────────── */
+      /* Two panels divided by a center rule: before left, after right */
+      .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-light);
+      }
+      .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-light);
+        color: var(--c-fg-light-3);
+      }
+      /* "After" label: monochrome accent treatment */
+      .compare-label.after {
+        color: var(--c-accent);
+        border-color: var(--c-accent);
+      }
+      /* ── 9. END ───────────────────────────────────────────────────────── */
+      /* Closing slide: cream bg, centered vertically, simple */
+      .slide--end {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: var(--gap-md);
+      }
+      /* ── 10. INSIGHTS ─────────────────────────────────────────────────── */
+      /*
+       * The signature "insight cards" pattern: cream background with 3 tall
+       * rounded-rectangle cards in quiet cream tones. Each card has a
+       * large Lora serif italic title and body text below.
+       */
+      .slide--insights {
+        background: var(--c-bg-cream);
+        color: var(--c-fg-light);
+        grid-template-rows: auto 1fr auto;
+      }
+      /* The three-card grid — equal columns, stretching to fill the middle row */
+      .insights-grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 2vw;
+        align-items: stretch;
+      }
+      .insight-card {
+        border-radius: 16px;
+        padding: 3vh 2.5vw;
+        display: flex;
+        flex-direction: column;
+        gap: 1.5vh;
+      }
+      /* The three card surfaces: all monochrome cream tones */
+      .insight-card:nth-child(1) {
+        background: var(--c-card-a);
+      }
+      .insight-card:nth-child(2) {
+        background: var(--c-card-b);
+      }
+      .insight-card:nth-child(3) {
+        background: var(--c-card-c);
+      }
+      /* Large serif italic title: the visual anchor of each card */
+      .insight-title {
+        font-family: var(--f-serif);
+        font-size: 2.8vw;
+        font-weight: 400;
+        line-height: 1.15;
+        color: var(--c-fg-light);
+      }
+      .insight-title em {
+        font-style: italic;
+      }
+      /* Smaller serif subtitle under the title */
+      .insight-subtitle {
+        font-family: var(--f-serif);
+        font-size: 1.3vw;
+        font-weight: 500;
+        line-height: 1.3;
+        color: var(--c-fg-light);
+      }
+      /* Body: light sans, pushed to the bottom of the card */
+      .insight-body {
+        font-family: var(--f-body);
+        font-size: var(--sz-body);
+        line-height: 1.65;
+        font-weight: 300;
+        color: rgba(26, 26, 22, 0.75);
+        margin-top: auto;
+      }
+      /* ── 11. TIMELINE ─────────────────────────────────────────────────── */
+      /* Horizontal research timeline: steps connected by a thin rule */
+      .slide--timeline {
+        background: var(--c-bg-cream);
+        color: var(--c-fg-light);
+        grid-template-rows: auto auto 1fr auto;
+      }
+      /* Large headline above the track */
+      .timeline-hl {
+        font-family: var(--f-heading);
+        font-size: var(--sz-h2);
+        font-weight: 300;
+        line-height: 1.2;
+        padding-bottom: var(--gap-md);
+        border-bottom: 1px solid var(--c-border-light);
+        max-width: 70%;
+      }
+      /* The horizontal track container — equal-width steps side by side */
+      .timeline-track {
+        display: flex;
+        align-items: flex-start;
+        gap: 0;
+        padding-top: var(--gap-md);
+        position: relative;
+        min-height: 0;
+      }
+      /* Each step: flex column with dot, date, label, description */
+      .timeline-step {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap-sm);
+        padding-right: calc(var(--pad-x) * 0.3);
+        position: relative;
+      }
+      /* The horizontal connecting rule behind all steps */
+      .timeline-step::before {
+        content: "";
+        position: absolute;
+        top: 0.55em;
+        left: 0;
+        right: 0;
+        height: 1px;
+        background: var(--c-border-light);
+        z-index: 0;
+      }
+      /* The dot: monochrome accent, cream border to punch through the rule */
+      .timeline-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: var(--c-accent);
+        border: 2px solid var(--c-bg-cream);
+        position: relative;
+        z-index: 1;
+        margin-bottom: var(--gap-sm);
+        flex-shrink: 0;
+      }
+      .timeline-date {
+        font-family: var(--f-mono);
+        font-size: var(--sz-caption);
+        letter-spacing: 0.1em;
+        color: var(--c-fg-light-3);
+      }
+      .timeline-label {
+        font-family: var(--f-heading);
+        font-size: var(--sz-h3);
+        font-weight: 400;
+        line-height: 1.25;
+        color: var(--c-fg-light);
+      }
+      .timeline-desc {
+        font-family: var(--f-body);
+        font-size: var(--sz-body);
+        line-height: 1.6;
+        font-weight: 300;
+        color: var(--c-fg-light-2);
+      }
+      /* ── 12. DENSE ────────────────────────────────────────────────────── */
+      /* Research analysis: large headline above two-column text body */
+      .slide--dense {
+        grid-template-rows: auto auto 1fr auto;
+      }
+      .dense-hl {
+        font-family: var(--f-heading);
+        font-size: var(--sz-h2);
+        font-weight: 300;
+        line-height: 1.2;
+        padding-bottom: var(--gap-md);
+        border-bottom: 1px solid var(--c-border-light);
+        max-width: 88%;
+      }
+      .dense-cols {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: calc(var(--pad-x) * 0.5);
+        padding-top: var(--gap-md);
+        min-height: 0;
+      }
+      /* Section heading within each column: tracked mono uppercase */
+      .dense-col h4 {
+        font-family: var(--f-mono);
+        font-size: var(--sz-label);
+        letter-spacing: 0.16em;
+        text-transform: uppercase;
+        color: var(--c-fg-light-3);
+        margin-bottom: var(--gap-sm);
+        padding-bottom: var(--gap-sm);
+        border-bottom: 1px solid var(--c-border-light);
+      }
+      .dense-col p {
+        font-family: var(--f-body);
+        font-size: var(--sz-body);
+        line-height: 1.75;
+        font-weight: 300;
+        color: var(--c-fg-light-2);
+        margin-bottom: 1.4vh;
+      }
+      .dense-col p:last-child {
+        margin-bottom: 0;
+      }
+      /* ╔══════════════════════════════════════════════════════════════════════╗
+   ║  ZONE F · COMPONENTS                                                 ║
+   ╚══════════════════════════════════════════════════════════════════════╝ */
+      /* Thin accent rule — 36px default, full-width with .full */
+      .rule {
+        width: 36px;
+        height: 1px;
+        background: var(--c-border-light);
+      }
+      .rule.dark-rule {
+        background: var(--c-accent);
+      }
+      .rule.full {
+        width: 100%;
+        background: var(--c-border-light);
+      }
+      /* Eyebrow kicker label: mono uppercase, muted */
+      .kicker {
+        font-family: var(--f-mono);
+        font-size: var(--sz-label);
+        letter-spacing: 0.14em;
+        text-transform: uppercase;
+        color: var(--c-fg-light-3);
+      }
+      .dark .kicker {
+        color: var(--c-fg-3);
+      }
+      /* Bordered inline tag: used for version numbers, status labels */
+      .tag {
+        display: inline-block;
+        font-family: var(--f-mono);
+        font-size: var(--sz-label);
+        letter-spacing: 0.12em;
+        text-transform: uppercase;
+        color: var(--c-fg-light);
+        border: 1px solid var(--c-border-light);
+        padding: 0.3em 0.8em;
+        line-height: 1;
+      }
+      .dark .tag {
+        color: var(--c-fg-2);
+        border-color: var(--c-border);
+      }
+      /* Image caption: barely-there mono text below photos */
+      .img-caption {
+        font-family: var(--f-mono);
+        font-size: var(--sz-caption);
+        letter-spacing: 0.04em;
+        opacity: 0.45;
+        margin-top: 0.8vh;
+      }
+      /* ── 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: 28vh;
+        display: flex;
+        align-items: flex-end;
+        gap: 4vw;
+        border-left: 1px solid var(--c-border-light);
+        padding-left: 0.5vw;
+      }
+      .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-light-3);
+        opacity: 0.5;
+      }
+      .bar-fill.accent {
+        background: var(--c-accent);
+        opacity: 1;
+      }
+      .bar-x-label {
+        font-family: var(--f-mono);
+        font-size: var(--sz-caption);
+        font-weight: 300;
+        letter-spacing: 0.1em;
+        color: var(--c-fg-light-3);
+        white-space: nowrap;
+        text-transform: uppercase;
+      }
+      .bar-val {
+        font-family: var(--f-body);
+        font-size: var(--sz-body);
+        font-weight: 300;
+        color: var(--c-fg-light-2);
+      }
+      .bar-val.hi {
+        color: var(--c-accent);
+        font-weight: 500;
+      }
+      .chart-baseline {
+        height: 1px;
+        background: var(--c-border-light);
+        flex-shrink: 0;
+      }
+      .chart-source {
+        flex-shrink: 0;
+        font-family: var(--f-mono);
+        font-size: var(--sz-caption);
+        font-weight: 300;
+        color: var(--c-fg-light-3);
+        letter-spacing: 0.06em;
+        margin-top: var(--gap-sm);
+      }
+      /* ── 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: flex-start;
+        gap: 0;
+      }
+      .flow-step {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap-sm);
+        padding-right: calc(var(--pad-x) * 0.4);
+        padding-top: var(--gap-md);
+        border-top: 1px solid var(--c-border-light);
+      }
+      .flow-num {
+        font-family: var(--f-display);
+        font-size: 3.5vw;
+        font-weight: 200;
+        line-height: 1;
+        color: var(--c-fg-light-3);
+        letter-spacing: -0.02em;
+      }
+      .flow-title {
+        font-family: var(--f-heading);
+        font-size: var(--sz-h3);
+        font-weight: 400;
+        line-height: 1.2;
+        color: var(--c-fg-light);
+      }
+      .flow-desc {
+        font-family: var(--f-body);
+        font-size: var(--sz-body);
+        font-weight: 300;
+        color: var(--c-fg-light-2);
+        line-height: 1.68;
+      }
+      /* Ivory Ledger diagram uses no arrows — whitespace between steps implies flow */
+      /* ── 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(26vw, 42vh);
+        height: min(26vw, 42vh);
+        border-radius: 50%;
+        position: relative;
+        flex-shrink: 0;
+        justify-self: center;
+      }
+      .pie-donut::after {
+        content: "";
+        position: absolute;
+        inset: 22%;
+        border-radius: 50%;
+        background: var(--c-bg-light);
+      }
+      .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: 2px;
+        flex-shrink: 0;
+      }
+      .pie-item-label {
+        font-family: var(--f-body);
+        font-size: var(--sz-lead);
+        font-weight: 300;
+        line-height: 1.4;
+        color: var(--c-fg-light);
+      }
+      .pie-item-val {
+        font-family: var(--f-mono);
+        font-size: var(--sz-body);
+        font-weight: 400;
+        letter-spacing: 0.08em;
+        color: var(--c-accent);
+      }
+      .pie-total {
+        margin-top: var(--gap-sm);
+        padding-top: var(--gap-sm);
+        border-top: 1px solid var(--c-border-light);
+        font-family: var(--f-mono);
+        font-size: var(--sz-label);
+        letter-spacing: 0.1em;
+        color: var(--c-fg-light-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.3vh 2.5vw;
+        border-left: 2px solid var(--c-border-light);
+        transition: width 0.3s;
+      }
+      .pyr-level:nth-child(1) {
+        background: color-mix(in srgb, var(--c-accent) 55%, var(--c-bg-light));
+        width: 36%;
+      }
+      .pyr-level:nth-child(2) {
+        background: color-mix(in srgb, var(--c-accent) 35%, var(--c-bg-light));
+        width: 52%;
+      }
+      .pyr-level:nth-child(3) {
+        background: color-mix(in srgb, var(--c-accent) 20%, var(--c-bg-light));
+        width: 68%;
+      }
+      .pyr-level:nth-child(4) {
+        background: color-mix(in srgb, var(--c-accent) 10%, var(--c-bg-light));
+        width: 84%;
+      }
+      .pyr-level:nth-child(5) {
+        background: color-mix(in srgb, var(--c-accent) 4%, var(--c-bg-light));
+        width: 100%;
+      }
+      .pyr-name {
+        font-family: var(--f-heading);
+        font-size: var(--sz-h3);
+        font-weight: 300;
+        line-height: 1.2;
+        color: var(--c-fg-light);
+      }
+      .pyr-desc {
+        font-family: var(--f-body);
+        font-size: var(--sz-body);
+        font-weight: 300;
+        color: var(--c-fg-light-2);
+        text-align: right;
+        max-width: 55%;
+        line-height: 1.4;
+      }
+      /* ── 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: 200;
+        padding-bottom: var(--gap-md);
+        border-bottom: 1px solid var(--c-border-light);
+      }
+      .vtimeline {
+        display: grid;
+        grid-template-columns: 8em 1px 1fr;
+        gap: 0;
+        min-height: 0;
+        padding-top: var(--gap-md);
+      }
+      .vt-date {
+        font-family: var(--f-mono);
+        font-size: var(--sz-caption);
+        font-weight: 300;
+        letter-spacing: 0.08em;
+        color: var(--c-fg-light-3);
+        text-align: right;
+        padding: 0 1.5vw 3.5vh 0;
+        line-height: 1.4;
+      }
+      .vt-spine {
+        background: var(--c-border-light);
+        position: relative;
+      }
+      .vt-spine::before {
+        content: "";
+        position: absolute;
+        top: 0.25em;
+        left: -4px;
+        width: 9px;
+        height: 9px;
+        border-radius: 50%;
+        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: 400;
+        margin-bottom: 0.6vh;
+        line-height: 1.25;
+        color: var(--c-fg-light);
+      }
+      .vt-body {
+        font-family: var(--f-body);
+        font-size: var(--sz-body);
+        font-weight: 300;
+        color: var(--c-fg-light-2);
+        line-height: 1.68;
+      }
+      /* ── 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: 1px solid var(--c-border-light);
+      }
+      .cycle-num {
+        font-family: var(--f-display);
+        font-size: 3vw;
+        font-weight: 200;
+        color: var(--c-fg-light-3);
+        line-height: 1;
+        letter-spacing: -0.02em;
+      }
+      .cycle-title {
+        font-family: var(--f-heading);
+        font-size: var(--sz-h3);
+        font-weight: 400;
+        line-height: 1.2;
+        color: var(--c-fg-light);
+      }
+      .cycle-desc {
+        font-family: var(--f-body);
+        font-size: var(--sz-body);
+        font-weight: 300;
+        color: var(--c-fg-light-2);
+        line-height: 1.65;
+      }
+      .cycle-arrow {
+        color: var(--c-fg-light-3);
+        font-size: 1.6vw;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      /* ── PIE / DONUT CHART (v2 — legend variant) ───────────────────── */
+      /* Used by slide--pie v2: donut on left, legend items on right */
+      .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: var(--gap-lg);
+        align-items: center;
+        flex: 1;
+        min-height: 0;
+      }
+      .pie-donut {
+        width: min(26vw, 40vh);
+        height: min(26vw, 40vh);
+        border-radius: 50%;
+        position: relative;
+        margin: 0 auto;
+      }
+      .pie-donut::after {
+        content: "";
+        position: absolute;
+        inset: 22%;
+        border-radius: 50%;
+        background: var(--c-bg-light);
+      }
+      .pie-legend {
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap-sm);
+      }
+      .pie-legend-item {
+        display: flex;
+        align-items: center;
+        gap: 1.2vw;
+        font-size: var(--sz-body);
+        color: var(--c-fg-light);
+      }
+      .pie-legend-dot {
+        width: 1vw;
+        height: 1vw;
+        border-radius: 50%;
+        flex-shrink: 0;
+      }
+      /* ── PYRAMID (v2 — centered stack variant) ─────────────────────── */
+      /* Used by slide--pyramid v2: centered levels, solid fills */
+      .slide--pyramid .slide-body {
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap-md);
+        min-height: 0;
+      }
+      .pyr-wrap {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0.6vh;
+        flex: 1;
+        justify-content: center;
+      }
+      .pyr-level {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 1.4vh 2vw;
+        border-radius: 2px;
+        font-family: var(--f-body);
+        font-size: var(--sz-body);
+        font-weight: 500;
+        color: var(--c-fg-light);
+        text-align: center;
+        transition: width 0.4s ease;
+      }
+      .pyr-level:nth-child(1) {
+        background: color-mix(in srgb, var(--c-accent) 90%, transparent);
+        color: var(--c-bg-light);
+        width: 30%;
+      }
+      .pyr-level:nth-child(2) {
+        background: color-mix(in srgb, var(--c-accent) 68%, transparent);
+        color: var(--c-bg-light);
+        width: 48%;
+      }
+      .pyr-level:nth-child(3) {
+        background: color-mix(in srgb, var(--c-accent) 46%, transparent);
+        width: 66%;
+      }
+      .pyr-level:nth-child(4) {
+        background: color-mix(in srgb, var(--c-accent) 28%, transparent);
+        width: 83%;
+      }
+      .pyr-level:nth-child(5) {
+        background: color-mix(in srgb, var(--c-accent) 14%, transparent);
+        width: 100%;
+      }
+      /* ── VERTICAL TIMELINE (v2 — grid spine variant) ───────────────── */
+      /* Used by slide--vtimeline v2: date | spine | content grid layout */
+      .slide--vtimeline .slide-body {
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap-md);
+        min-height: 0;
+      }
+      .vtimeline {
+        display: grid;
+        grid-template-columns: 8em 1px 1fr;
+        gap: 0 0;
+        flex: 1;
+        min-height: 0;
+        overflow: hidden;
+      }
+      .vt-item {
+        display: contents;
+      }
+      .vt-date {
+        font-family: var(--f-mono);
+        font-size: var(--sz-label);
+        color: var(--c-accent);
+        padding: 0.4vh 1.5vw 2.5vh 0;
+        text-align: right;
+        line-height: 1.3;
+      }
+      .vt-spine {
+        background: color-mix(in srgb, var(--c-accent) 30%, transparent);
+        position: relative;
+        margin: 0 auto;
+      }
+      .vt-spine::before {
+        content: "";
+        position: absolute;
+        top: 0.3em;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background: var(--c-accent);
+      }
+      .vt-content {
+        padding: 0 0 2.5vh 1.5vw;
+        min-height: 0;
+      }
+      .vt-content p {
+        font-size: var(--sz-body);
+        color: var(--c-fg-light);
+        margin: 0.3vh 0 0;
+        line-height: 1.5;
+      }
+      /* ── CYCLE PROCESS (v2 — boxed cell variant) ───────────────────── */
+      /* Used by slide--cycle v2: 2×2 grid of bordered cells with center label */
+      .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: 0;
+        flex: 1;
+        min-height: 0;
+      }
+      .cycle-cell {
+        display: flex;
+        flex-direction: column;
+        gap: 0.6vh;
+        padding: 1.8vh 2vw;
+        background: color-mix(in srgb, var(--c-accent) 8%, transparent);
+        border: 1px solid color-mix(in srgb, var(--c-accent) 25%, transparent);
+        border-radius: 3px;
+      }
+      .cycle-num {
+        font-family: var(--f-mono);
+        font-size: var(--sz-label);
+        color: var(--c-accent);
+        font-weight: 500;
+      }
+      .cycle-cell p {
+        font-size: var(--sz-body);
+        color: var(--c-fg-light);
+        margin: 0;
+      }
+      .cycle-arrow {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.8vw;
+        color: var(--c-accent);
+        font-family: var(--f-mono);
+      }
+      .cycle-center {
+        display: block;
+        background: transparent;
+        border-radius: 0;
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="deck">
+      <!-- ══════════════════════════════════════════════════════════════════
+       SLIDE 01 · COVER (light — cream)
+       ──────────────────────────────────────────────────────────────────
+       Opening slide. Content anchors to the bottom of the slide.
+       Top-right mono label: deck title and date.
+       Large weight-200 display headline split across two lines.
+       Lead sentence in muted warm gray below the headline.
+       Bottom meta bar: team and round/version info.
+       ══════════════════════════════════════════════════════════════════ -->
+      <section class="slide slide--cover light">
+        <!-- Sidebar: research context above, date below -->
+        <div class="slide-sidebar" data-anim="fade-in" data-delay="0">
+          <span class="sidebar-label">Research Synthesis</span>
+          <span class="sidebar-label">[Month, Year]</span>
+        </div>
+        <!-- Top-right deck label: title and date -->
+        <div
+          style="
+            position: absolute;
+            top: var(--pad-y);
+            right: var(--pad-x);
+            text-align: right;
+          "
+          data-anim="fade-in"
+          data-delay="1"
+        >
+          <span class="label muted"
+            >User Research Synthesis / [Month, Year]</span
+          >
+        </div>
+        <div class="cover-body">
+          <!-- Display headline: weight 200, two lines -->
+          <h1 class="display" data-anim="fade-up" data-delay="2">
+            User Research<br />Synthesis
+          </h1>
+          <!-- Thin rule between headline and lead -->
+          <div
+            class="rule"
+            data-anim="reveal-right"
+            data-delay="3"
+            style="margin: 1.5vh 0"
+          ></div>
+          <!-- Lead: weight 300, muted, max 55% width -->
+          <p
+            class="lead muted"
+            data-anim="fade-up"
+            data-delay="4"
+            style="max-width: 55%"
+          >
+            What we learned from 24 interviews and what it means for the
+            product.
+          </p>
+        </div>
+        <!-- Bottom meta bar: team left, round right -->
+        <div class="cover-meta" data-anim="fade-in" data-delay="5">
+          <span class="label muted">Research Team · [Month, Year]</span>
+          <span class="label muted">Round [N] · Internal</span>
+        </div>
+      </section>
+      <section class="slide slide--chapter dark">
+        <!-- Sidebar on dark: adapts automatically via .dark .sidebar-label -->
+        <div class="slide-sidebar" data-anim="fade-in" data-delay="0">
+          <span class="sidebar-label">Context</span>
+          <span class="sidebar-label">Part One</span>
+        </div>
+        <!-- Chapter number: small mono, monochrome accent -->
+        <div class="chapter-num" data-anim="fade-in" data-delay="1">
+          01 · Context
+        </div>
+        <!-- Thin accent rule -->
+        <div class="chapter-rule" data-anim="reveal-right" data-delay="2"></div>
+        <!-- Chapter headline: weight 200, very large -->
+        <h2 class="h1" data-anim="fade-up" data-delay="3">
+          Why we went back<br />to users
+        </h2>
+        <!-- Short description: muted, capped at 50% width -->
+        <p
+          class="lead"
+          style="
+            max-width: 50%;
+            margin-top: var(--gap-md);
+            color: var(--c-fg-3);
+          "
+          data-anim="fade-up"
+          data-delay="4"
+        >
+          Three months after launch, retention numbers told us something the
+          metrics couldn't.
+        </p>
+      </section>
+      <section class="slide slide--statement light">
+        <!-- Sidebar: three contextual labels -->
+        <div class="slide-sidebar" data-anim="fade-in" data-delay="0">
+          <span class="sidebar-label">[Month, Year]</span>
+          <span class="sidebar-label">Round [N]</span>
+          <span class="sidebar-label">Objective</span>
+        </div>
+        <!-- Chrome header -->
+        <header class="slide-chrome">
+          <span class="label muted">Key Finding</span>
+          <span class="label muted">03</span>
+        </header>
+        <!-- Statement body: centered vertically -->
+        <div class="statement-body">
+          <!-- Objective label in mono muted at top of content area -->
+          <p class="kicker" data-anim="fade-in" data-delay="1">
+            Primary objective · Round [N] synthesis
+          </p>
+          <!-- The big claim: weight 200, sentence case, max 65% width -->
+          <h2
+            class="h1"
+            data-anim="fade-up"
+            data-delay="2"
+            style="max-width: 65%"
+          >
+            Users don't leave because they lose interest. They leave because
+            they don't know what to do next.
+          </h2>
+          <!-- Thin rule as a visual pause below the headline -->
+          <div
+            class="rule"
+            data-anim="reveal-right"
+            data-delay="3"
+            style="margin-top: var(--gap-sm)"
+          ></div>
+        </div>
+        <!-- Footer -->
+        <footer class="slide-foot">
+          <span class="label muted">User Research Synthesis</span>
+          <span class="label muted">Research Team</span>
+        </footer>
+      </section>
+      <section class="slide slide--split light">
+        <div class="slide-sidebar" data-anim="fade-in" data-delay="0">
+          <span class="sidebar-label">User Behavior</span>
+          <span class="sidebar-label">[Month, Year]</span>
+        </div>
+        <!-- Chrome header -->
+        <header class="slide-chrome">
+          <span class="label muted">User Behavior</span>
+          <span class="label muted">04</span>
+        </header>
+        <!-- Two-column body -->
+        <div class="slide-body">
+          <!-- Left: text content -->
+          <div class="split-text">
+            <p class="kicker" data-anim="fade-in" data-delay="1">The Pattern</p>
+            <h2 class="h2" data-anim="fade-up" data-delay="2">
+              The first 48 hours determine everything
+            </h2>
+            <p class="lead muted" data-anim="fade-up" data-delay="3">
+              Users who complete three core actions in their first two days have
+              a 4× higher 90-day retention rate. Most never get there.
+            </p>
+            <!-- Small bullet list below the lead -->
+            <ul
+              class="bullet-list"
+              style="margin-top: 0"
+              data-anim="fade-up"
+              data-delay="4"
+            >
+              <li>Onboarding drop-off peaks at step 3</li>
+              <li>"What do I do next?" is the most common exit trigger</li>
+              <li>Users who invite a teammate retain at 2× the rate</li>
+            </ul>
+          </div>
+          <!-- Right: image with caption -->
+          <div class="split-image" data-anim="fade-in" data-delay="3">
+            <div class="img-placeholder">Image placeholder</div>
+            <p class="img-caption">
+              Session recording review · [Month of study]
+            </p>
+          </div>
+        </div>
+        <!-- Footer -->
+        <footer class="slide-foot">
+          <span class="label muted">User Research Synthesis</span>
+          <span class="label muted">Research Team</span>
+        </footer>
+      </section>
+      <section class="slide slide--stats light">
+        <div class="slide-sidebar" data-anim="fade-in" data-delay="0">
+          <span class="sidebar-label">By the Numbers</span>
+          <span class="sidebar-label">[Month, Year]</span>
+        </div>
+        <!-- Chrome header -->
+        <header class="slide-chrome">
+          <span class="label muted">By the Numbers</span>
+          <span class="label muted">05</span>
+        </header>
+        <!-- Stats body: headline + three-col stat grid -->
+        <div class="slide-body">
+          <h2 class="h2" data-anim="fade-up" data-delay="1">
+            What the data showed
+          </h2>
+          <div
+            class="stats-grid"
+            style="margin-top: var(--gap-lg)"
+            data-anim="fade-up"
+            data-delay="2"
+          >
+            <!-- Stat 1: churn rate -->
+            <div class="stat-card">
+              <div class="stat-value">68%</div>
+              <p class="stat-label muted">
+                of users churned within 14 days — up from 54% in cohort 2
+              </p>
+              <p class="stat-note">[Analytics tool] · [Launch month]</p>
+            </div>
+            <!-- Stat 2: time to abandonment -->
+            <div class="stat-card">
+              <div class="stat-value">3.2min</div>
+              <p class="stat-label muted">
+                Average time before abandonment on the setup flow
+              </p>
+              <p class="stat-note">Session recordings · n=240</p>
+            </div>
+            <!-- Stat 3: retention multiplier -->
+            <div class="stat-card">
+              <div class="stat-value">4×</div>
+              <p class="stat-label muted">
+                Higher 90-day retention for users who complete onboarding fully
+              </p>
+              <p class="stat-note">Cohort analysis</p>
+            </div>
+          </div>
+        </div>
+        <!-- Footer -->
+        <footer class="slide-foot">
+          <span class="label muted">User Research Synthesis</span>
+          <span class="label muted">Research Team</span>
+        </footer>
+      </section>
+      <section class="slide slide--list light">
+        <div class="slide-sidebar" data-anim="fade-in" data-delay="0">
+          <span class="sidebar-label">Recommendations</span>
+          <span class="sidebar-label">[Month, Year]</span>
+        </div>
+        <!-- Chrome header -->
+        <header class="slide-chrome">
+          <span class="label muted">Recommendations</span>
+          <span class="label muted">06</span>
+        </header>
+        <!-- List body: left head + right bullets -->
+        <div class="slide-body">
+          <div class="list-head">
+            <p class="kicker" data-anim="fade-in" data-delay="1">What to fix</p>
+            <h2 class="h2" data-anim="fade-up" data-delay="2">
+              Five changes, ordered by impact
+            </h2>
+            <p class="body muted" data-anim="fade-up" data-delay="3">
+              We recommend addressing these sequentially — later ones depend on
+              the first landing.
+            </p>
+          </div>
+          <!-- Five bullets: weight-300 lead size, em dash markers -->
+          <ul class="bullet-list" data-anim="fade-up" data-delay="3">
+            <li>Redesign the setup flow to three steps maximum</li>
+            <li>Add a "start here" prompt on day one based on user type</li>
+            <li>
+              Surface the collaboration invite after first meaningful action
+            </li>
+            <li>Replace feature tour with outcome demonstration</li>
+            <li>
+              Build a 7-day email sequence that mirrors in-product progress
+            </li>
+          </ul>
+        </div>
+        <!-- Footer -->
+        <footer class="slide-foot">
+          <span class="label muted">User Research Synthesis</span>
+          <span class="label muted">Research Team</span>
+        </footer>
+      </section>
+      <section class="slide slide--compare light">
+        <div class="slide-sidebar" data-anim="fade-in" data-delay="0">
+          <span class="sidebar-label">Current vs Proposed</span>
+          <span class="sidebar-label">[Month, Year]</span>
+        </div>
+        <!-- Chrome header -->
+        <header class="slide-chrome">
+          <span class="label muted">Current · Proposed</span>
+          <span class="label muted">07</span>
+        </header>
+        <!-- Two-panel body -->
+        <div class="slide-body">
+          <!-- Left panel: current state -->
+          <div class="compare-panel left" data-anim="fade-up" data-delay="1">
+            <div class="compare-label">Current Onboarding</div>
+            <h3 class="h3">9-step setup, any order</h3>
+            <p class="lead muted">
+              Users choose their own path through setup. Most choose wrong.
+            </p>
+            <ul class="bullet-list" style="font-size: var(--sz-body)">
+              <li>Average 3.2 minutes to first value</li>
+              <li>Step 6 is where 41% abandon</li>
+              <li>No adaptive logic based on user type</li>
+            </ul>
+          </div>
+          <!-- Right panel: proposed state -->
+          <div class="compare-panel right" data-anim="fade-up" data-delay="2">
+            <div class="compare-label after">Proposed Flow</div>
+            <h3 class="h3">3-step guided path, adaptive</h3>
+            <p class="lead muted">
+              User type detected at signup. Path adjusts. First value in under
+              90 seconds.
+            </p>
+            <ul class="bullet-list" style="font-size: var(--sz-body)">
+              <li>Target: 90 seconds to first value</li>
+              <li>Eliminate decision paralysis at step entry</li>
+              <li>Inline help triggered at abandonment signals</li>
+            </ul>
+          </div>
+        </div>
+        <!-- Footer -->
+        <footer class="slide-foot">
+          <span class="label muted">User Research Synthesis</span>
+          <span class="label muted">Research Team</span>
+        </footer>
+      </section>
+      <section class="slide slide--quote dark">
+        <div class="slide-sidebar" data-anim="fade-in" data-delay="0">
+          <span class="sidebar-label">Participant Voice</span>
+          <span class="sidebar-label">[Month of study]</span>
+        </div>
+        <!-- Quote text: Lora italic, large, no decoration -->
+        <p class="quote-text" data-anim="fade-up" data-delay="1">
+          "I kept opening the app and then closing it again. I didn't know what
+          I was supposed to do."
+        </p>
+        <!-- Attribution: two lines of small mono -->
+        <div class="quote-attr" data-anim="fade-in" data-delay="3">
+          <span
+            class="label"
+            style="color: var(--c-fg-3); letter-spacing: 0.12em"
+          >
+            Participant 14 · 28 years old, Product Designer
+          </span>
+          <span
+            class="label"
+            style="color: var(--c-fg-3); letter-spacing: 0.12em"
+          >
+            Interview · [Month of study]
+          </span>
+        </div>
+      </section>
+      <section class="slide slide--dense light">
+        <div class="slide-sidebar" data-anim="fade-in" data-delay="0">
+          <span class="sidebar-label">Analysis</span>
+          <span class="sidebar-label">[Month, Year]</span>
+        </div>
+        <!-- Chrome header -->
+        <header class="slide-chrome">
+          <span class="label muted">Analysis</span>
+          <span class="label muted">09</span>
+        </header>
+        <!-- Dense headline -->
+        <h2 class="dense-hl" data-anim="fade-up" data-delay="1">
+          Why onboarding problems compound over time
+        </h2>
+        <!-- Two-column analysis body -->
+        <div class="slide-body">
+          <div class="dense-cols" data-anim="fade-up" data-delay="2">
+            <!-- Left column: The Activation Trap -->
+            <div class="dense-col">
+              <h4>The Activation Trap</h4>
+              <p>
+                Activation is the moment a user experiences the core value of a
+                product for the first time. When that moment is delayed or never
+                arrives, the user's mental model of the product never fully
+                forms. They carry a vague, unresolved impression into every
+                subsequent session.
+              </p>
+              <p>
+                Each session that ends without activation reinforces the exit
+                pattern. The user doesn't consciously decide to leave — they
+                simply stop opening the app because it hasn't yet earned a place
+                in their routine. The gap between download and habit is where
+                most products lose users permanently.
+              </p>
+              <p>
+                Retention data confirms this: users who hit activation in
+                session one have a 3× higher probability of returning in week
+                two. The window is narrow. Products that front-load value
+                creation outperform those that distribute it across multiple
+                sessions.
+              </p>
+            </div>
+            <!-- Right column: The Network Effect Delay -->
+            <div class="dense-col">
+              <h4>The Network Effect Delay</h4>
+              <p>
+                Collaboration products face a compounding problem: the value of
+                the product increases with each additional teammate, but users
+                must cross the value threshold alone before they think to invite
+                anyone. Most never reach the threshold.
+              </p>
+              <p>
+                Our data shows that the median user does not discover the
+                invitation flow until session four — by which point 60% have
+                already churned. The product's most powerful retention mechanism
+                is invisible during the critical first-session window where the
+                keep-or-leave decision is made.
+              </p>
+              <p>
+                The solution is not to surface the invite prompt earlier in a
+                disruptive way, but to design the single-player experience as an
+                explicit bridge to the collaborative one. Every solo action
+                should feel like preparation for something that scales.
+              </p>
+            </div>
+          </div>
+        </div>
+        <!-- Footer -->
+        <footer class="slide-foot">
+          <span class="label muted">User Research Synthesis</span>
+          <span class="label muted">Research Team</span>
+        </footer>
+      </section>
+      <section class="slide slide--chart light">
+        <header class="slide-chrome">
+          <span class="label muted">Retention Analysis</span>
+          <span class="label muted">11</span>
+        </header>
+        <div class="slide-body">
+          <div class="chart-header">
+            <h2
+              class="h2"
+              style="font-weight: 200"
+              data-anim="fade-up"
+              data-delay="0"
+            >
+              90-day retention by onboarding cohort
+            </h2>
+            <span class="caption muted" data-anim="fade-in" data-delay="1"
+              >% retained · n=480 · [Q1 of study period]</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">34%</span>
+                <div class="bar-fill" style="height: 10vh"></div>
+                <span class="bar-x-label">Cohort 1</span>
+              </div>
+              <div class="bar-col">
+                <span class="bar-val">41%</span>
+                <div class="bar-fill" style="height: 13vh"></div>
+                <span class="bar-x-label">Cohort 2</span>
+              </div>
+              <div class="bar-col">
+                <span class="bar-val">48%</span>
+                <div class="bar-fill" style="height: 16vh"></div>
+                <span class="bar-x-label">Cohort 3</span>
+              </div>
+              <div class="bar-col">
+                <span class="bar-val hi">67%</span>
+                <div class="bar-fill accent" style="height: 22vh"></div>
+                <span class="bar-x-label">Proposed</span>
+              </div>
+            </div>
+            <div class="chart-baseline"></div>
+          </div>
+          <p class="chart-source" data-anim="fade-in" data-delay="3">
+            Source: [Analytics tool] · Cohort analysis · Proposed target based
+            on redesigned onboarding flow
+          </p>
+        </div>
+        <footer class="slide-foot">
+          <span class="label muted">Research Team · [Month, Year]</span>
+          <span class="label muted">11 / 18</span>
+        </footer>
+      </section>
+      <section class="slide slide--diagram light">
+        <header class="slide-chrome">
+          <span class="label muted">Methodology</span>
+          <span class="label muted">12</span>
+        </header>
+        <div class="slide-body">
+          <h2
+            class="h2"
+            style="font-weight: 200"
+            data-anim="fade-up"
+            data-delay="0"
+          >
+            How this research was conducted
+          </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">Recruit</div>
+              <div class="flow-desc">
+                24 participants screened from the active user base. Mix of power
+                users, casual users, and churned users within 90 days.
+              </div>
+            </div>
+            <div class="flow-step">
+              <div class="flow-num">02</div>
+              <div class="flow-title">Interview</div>
+              <div class="flow-desc">
+                60-minute moderated sessions. Cognitive walkthrough of key
+                flows. Think-aloud protocol throughout.
+              </div>
+            </div>
+            <div class="flow-step">
+              <div class="flow-num">03</div>
+              <div class="flow-title">Analyse</div>
+              <div class="flow-desc">
+                Affinity mapping across 340 observations. Pattern clustering by
+                behaviour type, not stated preference.
+              </div>
+            </div>
+            <div class="flow-step">
+              <div class="flow-num">04</div>
+              <div class="flow-title">Validate</div>
+              <div class="flow-desc">
+                Key findings stress-tested against session recordings and
+                support ticket data before synthesis.
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer class="slide-foot">
+          <span class="label muted">Research Team · [Month, Year]</span>
+          <span class="label muted">12 / 18</span>
+        </footer>
+      </section>
+      <section class="slide slide--pie light">
+        <div class="slide-sidebar" data-anim="fade-in" data-delay="0">
+          <span class="sidebar-label">Participants</span>
+          <span class="sidebar-label">[Month, Year]</span>
+        </div>
+        <header class="slide-chrome">
+          <span class="label muted">Participant Breakdown</span>
+          <span class="label muted">13</span>
+        </header>
+        <div class="slide-body">
+          <h2
+            class="h2"
+            style="font-weight: 200"
+            data-anim="fade-up"
+            data-delay="1"
+          >
+            Who we spoke with
+          </h2>
+          <div class="pie-row" data-anim="fade-up" data-delay="2">
+            <!-- Donut chart: conic-gradient with 4 segments -->
+            <div
+              class="pie-donut"
+              style="
+                background: conic-gradient(
+                  var(--c-accent) 0% 38%,
+                  color-mix(in srgb, var(--c-accent) 60%, var(--c-bg-light)) 38%
+                    63%,
+                  color-mix(in srgb, var(--c-accent) 34%, var(--c-bg-light)) 63%
+                    85%,
+                  var(--c-bg-light-alt) 85% 100%
+                );
+              "
+            ></div>
+            <!-- Legend -->
+            <div class="pie-legend">
+              <div class="pie-item">
+                <div class="pie-swatch" style="background: var(--c-accent)"></div>
+                <span class="pie-item-label">Power Users</span>
+                <span class="pie-item-val">38%</span>
+              </div>
+              <div class="pie-item">
+                <div
+                  class="pie-swatch"
+                  style="
+                    background: color-mix(
+                      in srgb,
+                      var(--c-accent) 60%,
+                      var(--c-bg-light)
+                    );
+                  "
+                ></div>
+                <span class="pie-item-label">Casual Users</span>
+                <span class="pie-item-val">25%</span>
+              </div>
+              <div class="pie-item">
+                <div
+                  class="pie-swatch"
+                  style="
+                    background: color-mix(
+                      in srgb,
+                      var(--c-accent) 34%,
+                      var(--c-bg-light)
+                    );
+                  "
+                ></div>
+                <span class="pie-item-label">Churned Users</span>
+                <span class="pie-item-val">22%</span>
+              </div>
+              <div class="pie-item">
+                <div
+                  class="pie-swatch"
+                  style="background: var(--c-bg-light-alt)"
+                ></div>
+                <span class="pie-item-label">Prospects</span>
+                <span class="pie-item-val">15%</span>
+              </div>
+              <p class="pie-total">Total participants: [N] · [Study period]</p>
+            </div>
+          </div>
+          <p class="chart-source" data-anim="fade-in" data-delay="3">
+            Source: Recruitment screener · [Study period]
+          </p>
+        </div>
+        <footer class="slide-foot">
+          <span class="label muted">[Research Team] · [Month, Year]</span>
+        </footer>
+      </section>
+      <section class="slide slide--vtimeline light">
+        <div class="slide-sidebar" data-anim="fade-in" data-delay="0">
+          <span class="sidebar-label">Process</span>
+          <span class="sidebar-label">[Month, Year]</span>
+        </div>
+        <header class="slide-chrome">
+          <span class="label muted">Process</span>
+          <span class="label muted">14</span>
+        </header>
+        <h2 class="vt-hl" data-anim="fade-up" data-delay="1">
+          From research to recommendation
+        </h2>
+        <div class="slide-body">
+          <div class="vtimeline" data-anim="fade-up" data-delay="2">
+            <!-- Row 1 -->
+            <div class="vt-date">[Week 1]</div>
+            <div class="vt-spine"></div>
+            <div class="vt-content">
+              <div class="vt-title">Recruitment</div>
+              <p class="vt-body">
+                Screened [N]+ applicants, selected [N] participants across user
+                segments.
+              </p>
+            </div>
+            <!-- Row 2 -->
+            <div class="vt-date">[Week 2–3]</div>
+            <div class="vt-spine"></div>
+            <div class="vt-content">
+              <div class="vt-title">Fieldwork</div>
+              <p class="vt-body">
+                [N] moderated sessions. Think-aloud protocol. All sessions
+                recorded and transcribed.
+              </p>
+            </div>
+            <!-- Row 3 -->
+            <div class="vt-date">[Week 4]</div>
+            <div class="vt-spine"></div>
+            <div class="vt-content">
+              <div class="vt-title">Synthesis</div>
+              <p class="vt-body">
+                Affinity mapping across [N]+ observations. Pattern clustering by
+                behaviour type.
+              </p>
+            </div>
+            <!-- Row 4 -->
+            <div class="vt-date">[Week 5]</div>
+            <div class="vt-spine"></div>
+            <div class="vt-content">
+              <div class="vt-title">Validation</div>
+              <p class="vt-body">
+                Findings stress-tested against [analytics tool] data and [N]
+                support ticket samples.
+              </p>
+            </div>
+          </div>
+        </div>
+        <footer class="slide-foot">
+          <span class="label muted">[Research Team] · [Month, Year]</span>
+          <span class="label muted">14</span>
+        </footer>
+      </section>
+      <section class="slide slide--cycle light">
+        <div class="slide-sidebar" data-anim="fade-in" data-delay="0">
+          <span class="sidebar-label">Design Process</span>
+          <span class="sidebar-label">[Month, Year]</span>
+        </div>
+        <header class="slide-chrome">
+          <span class="label muted">Design Process</span>
+          <span class="label muted">15</span>
+        </header>
+        <div class="slide-body">
+          <h2
+            class="h2"
+            style="font-weight: 200"
+            data-anim="fade-up"
+            data-delay="1"
+          >
+            The design thinking cycle
+          </h2>
+          <div class="cycle-grid" data-anim="fade-up" data-delay="2">
+            <!-- Step 01: top-left -->
+            <div class="cycle-step">
+              <div class="cycle-num">01</div>
+              <div class="cycle-title">Empathise</div>
+              <p class="cycle-desc">
+                Understand users in their own context. Suspend assumptions.
+                Observe before interpreting.
+              </p>
+            </div>
+            <!-- Arrow right: top-center -->
+            <div class="cycle-arrow">→</div>
+            <!-- Step 02: top-right -->
+            <div class="cycle-step">
+              <div class="cycle-num">02</div>
+              <div class="cycle-title">Define</div>
+              <p class="cycle-desc">
+                Reframe the problem as a point of view. One sentence. Testable.
+                Grounded in observation.
+              </p>
+            </div>
+            <!-- Arrow down-left: mid-left -->
+            <div class="cycle-arrow">↓</div>
+            <!-- Center spacer: mid-center -->
+            <div></div>
+            <!-- Arrow down-right: mid-right -->
+            <div class="cycle-arrow">↓</div>
+            <!-- Step 04: bottom-left -->
+            <div class="cycle-step">
+              <div class="cycle-num">04</div>
+              <div class="cycle-title">Test</div>
+              <p class="cycle-desc">
+                Put prototypes in front of real users. Capture what they do, not
+                what they say.
+              </p>
+            </div>
+            <!-- Arrow left: bottom-center -->
+            <div class="cycle-arrow">←</div>
+            <!-- Step 03: bottom-right -->
+            <div class="cycle-step">
+              <div class="cycle-num">03</div>
+              <div class="cycle-title">Prototype</div>
+              <p class="cycle-desc">
+                Build to think, not to ship. The lowest fidelity that answers
+                the question.
+              </p>
+            </div>
+          </div>
+        </div>
+        <footer class="slide-foot">
+          <span class="label muted">[Research Team] · [Month, Year]</span>
+          <span class="label muted">15</span>
+        </footer>
+      </section>
+      <section class="slide slide--pyramid light" data-slide="17">
+        <div class="slide-sidebar" data-anim="fade-in" data-delay="0">
+          <span class="sidebar-label">Research Framework</span>
+          <span class="sidebar-label">[Month, Year]</span>
+        </div>
+        <header class="slide-chrome">
+          <span class="label muted">Research Framework</span>
+          <span class="label muted">17</span>
+        </header>
+        <div class="slide-body">
+          <p class="kicker" data-anim="fade-in" data-delay="1">
+            Research Framework
+          </p>
+          <h2 class="h2" data-anim="fade-up" data-delay="2">
+            Analysis Hierarchy
+          </h2>
+          <p class="lead muted" data-anim="fade-up" data-delay="3">
+            From raw observations to strategic insight
+          </p>
+          <!-- Centered pyramid: narrowest at top, widest at bottom -->
+          <div class="pyr-wrap" data-anim="fade-up" data-delay="4">
+            <div class="pyr-level">Strategic Insight</div>
+            <div class="pyr-level">Behavioral Patterns</div>
+            <div class="pyr-level">Synthesized Themes</div>
+            <div class="pyr-level">Coded Observations</div>
+            <div class="pyr-level">Raw Field Notes</div>
+          </div>
+        </div>
+        <footer class="slide-foot">
+          <span class="label muted">User Research Synthesis</span>
+          <span class="label muted">Research Team</span>
+        </footer>
+      </section>
+      <section class="slide slide--end light">
+        <div class="slide-sidebar" data-anim="fade-in" data-delay="0">
+          <span class="sidebar-label">Research Team</span>
+          <span class="sidebar-label">[Month, Year]</span>
+        </div>
+        <!-- Kicker: team attribution in muted mono -->
+        <p class="kicker" data-anim="fade-in" data-delay="1">Research Team</p>
+        <!-- Thin rule -->
+        <div
+          class="rule"
+          data-anim="reveal-right"
+          data-delay="2"
+          style="margin: var(--gap-sm) 0"
+        ></div>
+        <!-- Closing headline: weight 200, max 55% width -->
+        <h2
+          class="h1"
+          data-anim="fade-up"
+          data-delay="3"
+          style="max-width: 55%"
+        >
+          Questions, feedback, and next steps
+        </h2>
+        <!-- Contact lead: muted, links styled as plain text -->
+        <p
+          class="lead muted"
+          data-anim="fade-up"
+          data-delay="4"
+          style="max-width: 42%; margin-top: var(--gap-md)"
+        >
+          [research@org.com] · [Slack #research] · Full report at [link]
+        </p>
+      </section>
+    </div>
+    <!-- /#deck -->
+    <!-- Navigation dots: built dynamically by JS -->
+    <nav id="nav-dots" aria-label="Slide navigation"></nav>
+    <!-- Slide counter: bottom-right, barely visible -->
+    <div id="slide-counter"></div>
+    <script>
+      (function () {
+        /* ── DOM references ─────────────────────────────────────────────── */
+        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 in a single horizontal row ── */
+        deck.style.width = "calc(" + total + " * 100vw)";
+        /* ── Build one nav dot per slide ─────────────────────────────────  */
+        slides.forEach(function (_, i) {
+          var dot = document.createElement("button");
+          dot.className = "nav-dot";
+          dot.setAttribute("aria-label", "Slide " + (i + 1));
+          dot.addEventListener("click", function () {
+            goTo(i);
+          });
+          dotsNav.appendChild(dot);
+        });
+        /* ── Helpers ─────────────────────────────────────────────────────  */
+        function pad(n) {
+          return String(n).padStart(2, "0");
+        }
+        /* ── goTo: the central navigation function ───────────────────────  */
+        function goTo(index) {
+          /* Guard: no double-firing while a transition is running */
+          if (isAnimating) return;
+          if (index < 0 || index >= total) return;
+          if (
+            index === current &&
+            slides[current].classList.contains("is-active")
+          )
+            return;
+          isAnimating = true;
+          /* Remove active state from the outgoing slide */
+          slides[current].classList.remove("is-active");
+          current = index;
+          var slide = slides[current];
+          /*
+           * Animation reset: force the browser to forget the current animation
+           * state by setting animation:none, triggering a reflow, then clearing.
+           * This makes re-visiting a slide replay the entrance animation.
+           */
+          slide.querySelectorAll("[data-anim]").forEach(function (el) {
+            el.style.animation = "none";
+            void el.offsetHeight; /* force reflow — critical for reset to work */
+            el.style.animation = "";
+          });
+          /* Activate the incoming slide and scroll the deck */
+          slide.classList.add("is-active");
+          deck.style.transform = "translateX(calc(-" + current + " * 100vw))";
+          /* ── Update nav dots ─────────────────────────────────────────── */
+          dotsNav.querySelectorAll(".nav-dot").forEach(function (d, i) {
+            d.classList.toggle("is-active", i === current);
+            d.style.background =
+              i === current ? "rgba(26,26,22,0.8)" : "rgba(26,26,22,0.3)";
+          });
+          /* ── Update slide counter ────────────────────────────────────── */
+          counter.textContent = pad(current + 1) + " / " + pad(total);
+          counter.style.color = "rgba(26,26,22,0.28)";
+          /* Unlock after the slide transition completes */
+          setTimeout(function () {
+            isAnimating = false;
+          }, 950);
+        }
+        /* ── Keyboard navigation ─────────────────────────────────────────  */
+        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 ─────────────────────────────────────────────────  */
+        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;
+            /* Require at least 40px swipe to trigger navigation */
+            if (Math.abs(dx) > 40) goTo(current + (dx < 0 ? 1 : -1));
+          },
+          { passive: true },
+        );
+        /* ── Mouse wheel ─────────────────────────────────────────────────  */
+        var wheelLocked = false;
+        document.addEventListener(
+          "wheel",
+          function (e) {
+            if (wheelLocked) return;
+            /* Use whichever axis has greater delta */
+            var primary =
+              Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
+            goTo(current + (primary > 0 ? 1 : -1));
+            /* Lock for 1 second to prevent runaway scroll */
+            wheelLocked = true;
+            setTimeout(function () {
+              wheelLocked = false;
+            }, 1000);
+          },
+          { passive: true },
+        );
+        /* ── Initialize on slide 1 ───────────────────────────────────────  */
+        goTo(0);
+      })();
+    </script>
+  </body>
+</html>