npm - @hiai-gg/hiai-opencode - Versions diffs - 0.2.1 → 0.2.2 - Mend

@hiai-gg/hiai-opencode 0.2.1 → 0.2.2

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

package/skills/design-templates/html-ppt-zhangzara-editorial-tri-tone/example.html ADDED Viewed

@@ -0,0 +1,737 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<title>Editorial Deck Template</title>
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<script src="assets/deck-stage.js"></script>
+<style>
+  :root{
+    --pink:#F2B6C6;
+    --pink-deep:#F2B6C6;
+    --cream:#F2D86A;
+    --navy:#7A1F35;
+    --forest:#7A1F35;
+    --burgundy:#7A1F35;
+    --lime:#F2D86A;
+    --sky:#F2B6C6;
+    --terracotta:#F2D86A;
+    --butter:#F2D86A;
+    --ink:#7A1F35;
+  }
+  html, body { margin:0; padding:0; background:#7A1F35; }
+  body { font-family: "Bricolage Grotesque", sans-serif; color: var(--ink); }
+  deck-stage section {
+    width:1920px; height:1080px;
+    position:relative;
+    overflow:hidden;
+    box-sizing:border-box;
+  }
+  .mono { font-family:"JetBrains Mono", monospace; }
+  .serif { font-family:"Instrument Serif", serif; font-style: italic; font-weight:400; }
+  .grotesk { font-family:"Bricolage Grotesque", sans-serif; }
+  .pill {
+    display:inline-flex; align-items:center; justify-content:center;
+    padding: 0.35em 0.9em;
+    border-radius: 999px;
+    font-family:"Bricolage Grotesque", sans-serif;
+    font-weight:500;
+    line-height:1;
+    white-space:nowrap;
+  }
+  .label {
+    font-family:"JetBrains Mono", monospace;
+    font-size:24px;
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+  }
+  .footer {
+    position:absolute; left:64px; right:64px; bottom:36px;
+    display:flex; justify-content:space-between; align-items:center;
+    font-family:"JetBrains Mono", monospace;
+    font-size:16px;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    opacity:0.75;
+  }
+  .footer .dotrow { display:flex; gap:8px; }
+  .footer .dotrow i { width:8px; height:8px; border-radius:999px; background: currentColor; opacity:0.3; display:inline-block; }
+  .footer .dotrow i.on { opacity:1; }
+  /* ========== SLIDE 1: COVER ========== */
+  .s-cover { background: var(--pink); color: var(--ink); }
+  .s-cover .pill-cluster {
+    position:absolute;
+    top:120px; left:64px; right:64px;
+    display:flex; flex-wrap:wrap; gap: 22px;
+    max-width: 1500px;
+  }
+  .s-cover .pill-cluster .pill { font-size: 44px; padding: 16px 38px; }
+  .s-cover .wordmark {
+    position:absolute;
+    left:64px; right:64px; bottom:80px;
+    font-family:"Bricolage Grotesque", sans-serif;
+    font-weight:800;
+    font-size: 300px;
+    line-height: 0.82;
+    letter-spacing:-0.04em;
+    color: var(--burgundy);
+    display:flex;
+    align-items:flex-end;
+    flex-wrap:nowrap;
+  }
+  .s-cover .wordmark .amp { font-family:"Instrument Serif", serif; font-style:italic; font-weight:400; font-stretch:normal; }
+  .s-cover .meta {
+    position:absolute; top:64px; left:64px; right:64px;
+    display:flex; justify-content:space-between;
+    font-family:"JetBrains Mono", monospace;
+    font-size:24px; letter-spacing:0.15em; text-transform:uppercase;
+  }
+  /* ========== SLIDE 2: MANIFESTO ========== */
+  .s-manifesto { background: var(--cream); color: var(--ink); display:grid; grid-template-columns: 1fr 1fr; }
+  .s-manifesto .left { padding: 96px 64px; display:flex; flex-direction:column; justify-content:space-between; }
+  .s-manifesto .right {
+    background: var(--forest); color: var(--cream);
+    padding: 96px 80px;
+    display:flex; flex-direction:column; justify-content:space-between;
+    position:relative;
+  }
+  .s-manifesto .chapter {
+    font-family:"Instrument Serif", serif; font-style:italic;
+    font-size: 240px; line-height:0.9;
+    color: var(--burgundy);
+  }
+  .s-manifesto .chapter sup { font-size: 0.35em; vertical-align: super; opacity:0.6; }
+  .s-manifesto .lede {
+    font-family:"Bricolage Grotesque", sans-serif;
+    font-size: 56px; line-height:1.05;
+    font-weight:500; letter-spacing:-0.02em;
+    max-width: 720px;
+  }
+  .s-manifesto .lede em { font-family:"Instrument Serif", serif; font-style:italic; font-weight:400; color:var(--terracotta); }
+  .s-manifesto .right h3 {
+    font-family:"JetBrains Mono", monospace;
+    font-size: 24px; letter-spacing:0.18em; text-transform:uppercase;
+    margin: 0 0 32px; color: var(--butter); font-weight:500;
+  }
+  .s-manifesto .right p {
+    font-size: 28px; line-height:1.45; max-width:540px; margin:0 0 24px;
+  }
+  .s-manifesto .right .signature {
+    font-family:"Instrument Serif", serif; font-style:italic;
+    font-size: 64px; line-height:1;
+    color: var(--lime);
+  }
+  /* ========== SLIDE 3: GRID OF VALUES ========== */
+  .s-grid { background: var(--pink); padding: 72px 64px 80px; }
+  .s-grid h2 {
+    margin:0 0 32px; font-size: 76px; line-height:1;
+    font-family:"Bricolage Grotesque", sans-serif; font-weight:700;
+    letter-spacing:-0.02em; color: var(--burgundy);
+    max-width: 1100px;
+  }
+  .s-grid h2 em { font-family:"Instrument Serif", serif; font-style:italic; font-weight:400; color: var(--navy); }
+  .s-grid .grid {
+    display:grid; grid-template-columns: repeat(4, 1fr);
+    gap: 24px;
+  }
+  .s-grid .card {
+    border-radius: 28px;
+    padding: 28px 28px 30px;
+    height: 340px;
+    display:flex; flex-direction:column; justify-content:space-between;
+    position:relative; overflow:hidden;
+  }
+  .s-grid .card .num {
+    font-family:"JetBrains Mono", monospace;
+    font-size: 24px; letter-spacing:0.15em;
+    opacity:0.7;
+  }
+  .s-grid .card h4 {
+    font-size: 40px; line-height:1; margin: 0;
+    font-weight:600; letter-spacing:-0.02em;
+  }
+  .s-grid .card p { font-size: 24px; line-height:1.4; margin:0; opacity:0.85; }
+  .s-grid .c1, .s-grid .c3, .s-grid .c5, .s-grid .c7 { background: var(--burgundy); color: var(--butter); }
+  .s-grid .c2, .s-grid .c4, .s-grid .c6, .s-grid .c8 { background: var(--butter); color: var(--burgundy); }
+  /* ========== SLIDE 4: BIG STAT / EDITORIAL ========== */
+  .s-stat { background: var(--burgundy); color: var(--cream); padding: 96px 64px; position:relative; }
+  .s-stat .toprow { display:flex; justify-content:space-between; align-items:flex-start; }
+  .s-stat .kicker { font-family:"JetBrains Mono", monospace; font-size:24px; letter-spacing:0.18em; text-transform:uppercase; color: var(--butter); }
+  .s-stat .swatches { display:flex; gap:10px; }
+  .s-stat .swatches i { width:36px; height:36px; border-radius:999px; display:block; }
+  .s-stat .figure {
+    margin-top: 20px;
+    font-family:"Bricolage Grotesque", sans-serif;
+    font-weight:700;
+    font-size: 540px;
+    line-height: 0.78;
+    letter-spacing: -0.06em;
+    color: var(--pink);
+    display:flex; align-items:flex-start;
+  }
+  .s-stat .figure .pct { font-family:"Instrument Serif", serif; font-style:italic; font-weight:400; font-size:220px; color: var(--lime); margin-top: 60px; margin-left: 20px; }
+  .s-stat .breakdown {
+    position:absolute; right:64px; bottom:80px;
+    width: 600px;
+  }
+  .s-stat .breakdown .row {
+    display:grid; grid-template-columns: 150px 1fr 90px;
+    gap: 16px; align-items:center; padding: 14px 0;
+    border-top: 1px solid rgba(246,237,220,0.25);
+    font-size: 24px;
+  }
+  .s-stat .breakdown .row:last-child { border-bottom: 1px solid rgba(246,237,220,0.25); }
+  .s-stat .breakdown .row .lbl { font-family:"JetBrains Mono", monospace; font-size:24px; letter-spacing:0.1em; text-transform:uppercase; opacity:0.7; }
+  .s-stat .breakdown .row .bar { height:10px; border-radius:999px; background: rgba(246,237,220,0.15); position:relative; overflow:hidden; }
+  .s-stat .breakdown .row .bar i { display:block; height:100%; border-radius:999px; }
+  .s-stat .breakdown .row .val { font-family:"JetBrains Mono", monospace; font-size:24px; text-align:right; }
+  /* ========== SLIDE 5: TIMELINE ========== */
+  .s-timeline { background: var(--butter); padding: 96px 80px; }
+  .s-timeline .head { display:flex; justify-content:space-between; align-items:flex-start; gap: 48px; margin-bottom: 48px; }
+  .s-timeline .head h2 {
+    margin:0; font-size: 76px; line-height:0.95;
+    font-weight:700; letter-spacing:-0.02em; color: var(--burgundy);
+    max-width: 1100px;
+  }
+  .s-timeline .head h2 em { font-family:"Instrument Serif", serif; font-style:italic; font-weight:400; color: var(--burgundy); }
+  .s-timeline .head .meta { font-family:"JetBrains Mono", monospace; font-size:24px; letter-spacing:0.15em; text-transform:uppercase; text-align:right; line-height:1.5; color: var(--burgundy); flex-shrink:0; }
+  .s-timeline .head .meta span { display:block; opacity:0.55; margin-top: 4px; }
+  .s-timeline .track {
+    position:relative;
+    padding: 60px 0 40px;
+  }
+  .s-timeline .axis {
+    position:absolute; left:0; right:0; top: 110px;
+    height: 4px; background: var(--ink); opacity:0.15;
+  }
+  .s-timeline .stops {
+    display:grid; grid-template-columns: repeat(5, 1fr);
+    gap: 24px; position:relative;
+  }
+  .s-timeline .stop { position:relative; padding-top: 90px; }
+  .s-timeline .stop .dot {
+    position:absolute; top: 90px; left: 0;
+    width: 28px; height: 28px; border-radius: 999px;
+    transform: translateY(-50%);
+    border: 4px solid var(--butter);
+    background: var(--burgundy);
+    display: none;
+  }
+  .s-timeline .stop .yr {
+    font-family:"Instrument Serif", serif; font-style:italic;
+    font-size: 56px; line-height:1; margin-bottom: 12px;
+    color: var(--burgundy);
+  }
+  .s-timeline .stop h5 {
+    margin:0 0 12px; font-size:28px; font-weight:600; letter-spacing:-0.01em; color: var(--burgundy);
+  }
+  .s-timeline .stop p { margin:0; font-size:24px; line-height:1.45; color: var(--burgundy); opacity:0.8; }
+  .s-timeline .ribbon {
+    margin-top: 56px;
+    background: var(--burgundy); color: var(--butter);
+    border-radius: 999px;
+    padding: 24px 44px;
+    display:flex; justify-content:space-between; align-items:center;
+    font-family:"JetBrains Mono", monospace; font-size: 24px; letter-spacing:0.15em; text-transform:uppercase;
+  }
+  .s-timeline .ribbon strong { font-family:"Instrument Serif", serif; font-style:italic; font-weight:400; font-size:30px; letter-spacing:0; text-transform:none; color: var(--pink); }
+  /* ========== SLIDE 6: CHART ========== */
+  .s-chart { background: var(--navy); color: var(--cream); padding: 88px 64px; display:grid; grid-template-columns: 1.1fr 1fr; gap:64px; }
+  .s-chart .l h2 {
+    margin:0 0 24px; font-size: 84px; line-height:0.95;
+    font-weight:700; letter-spacing:-0.02em;
+  }
+  .s-chart .l h2 em { font-family:"Instrument Serif", serif; font-style:italic; font-weight:400; color: var(--butter); }
+  .s-chart .l .lede { font-size: 24px; line-height:1.5; max-width: 640px; opacity:0.85; }
+  .s-chart .l .legend {
+    margin-top: 56px;
+    display:flex; flex-direction:column; gap: 16px;
+  }
+  .s-chart .l .legend .item { display:flex; align-items:center; gap: 14px; font-size:24px; }
+  .s-chart .l .legend .item i { width:14px; height:14px; border-radius:4px; display:block; }
+  .s-chart .l .legend .item .cat { font-family:"JetBrains Mono", monospace; font-size:24px; letter-spacing:0.1em; text-transform:uppercase; opacity:0.7; margin-left:auto; }
+  .s-chart .r {
+    background: var(--cream); color: var(--ink);
+    border-radius: 32px;
+    padding: 48px 48px 56px;
+    display:flex; flex-direction:column;
+    position:relative;
+  }
+  .s-chart .r .head { display:flex; justify-content:space-between; align-items:center; margin-bottom: 32px; }
+  .s-chart .r .head .ttl { font-family:"Instrument Serif", serif; font-style:italic; font-size: 40px; }
+  .s-chart .r .head .unit { font-family:"JetBrains Mono", monospace; font-size:24px; letter-spacing:0.1em; text-transform:uppercase; opacity:0.6; }
+  .s-chart svg.chart { width:100%; flex:0 0 auto; max-height: 480px; }
+  .s-chart .r .xax { display:grid; grid-template-columns: repeat(6, 1fr); margin-top: 12px; font-family:"JetBrains Mono", monospace; font-size:24px; opacity:0.6; letter-spacing:0.1em; }
+  /* ========== SLIDE 7: QUOTE / EDITORIAL SPLIT ========== */
+  .s-quote { background: var(--lime); color: var(--ink); padding: 0; display:grid; grid-template-columns: 0.95fr 1fr; }
+  .s-quote .l { padding: 80px 56px 80px 80px; display:flex; flex-direction:column; justify-content:space-between; gap: 24px; position:relative; }
+  .s-quote .l .top { display:flex; flex-direction:column; gap: 12px; }
+  .s-quote .l .mark { font-family:"Instrument Serif", serif; font-style:italic; font-size: 200px; line-height:0.6; color: var(--burgundy); margin: 80px 0 0 0; }
+  .s-quote .l blockquote {
+    margin: 0;
+    font-family:"Instrument Serif", serif; font-style:italic;
+    font-size: 64px; line-height:1.1;
+    color: var(--ink);
+    max-width: 760px;
+  }
+  .s-quote .l blockquote b { font-family:"Bricolage Grotesque", sans-serif; font-style:normal; font-weight:600; color: var(--burgundy); }
+  .s-quote .l .attribution { display:flex; align-items:center; gap:20px; }
+  .s-quote .l .avatar { width:72px; height:72px; border-radius:999px; background: var(--burgundy); border:3px solid var(--burgundy); }
+  .s-quote .l .who { font-size:26px; font-weight:600; }
+  .s-quote .l .who small { display:block; font-family:"JetBrains Mono", monospace; font-size:24px; letter-spacing:0.1em; text-transform:uppercase; opacity:0.65; font-weight:400; margin-top:4px; }
+  .s-quote .r {
+    background: var(--burgundy); color: var(--butter);
+    padding: 96px 80px;
+    display:flex; flex-direction:column; gap: 28px;
+    position:relative;
+  }
+  .s-quote .r h3 { margin:0; font-size: 56px; font-weight:600; line-height:1; letter-spacing:-0.02em; }
+  .s-quote .r .endorsements { display:flex; flex-direction:column; gap: 20px; margin-top: 8px; }
+  .s-quote .r .endorsements .row {
+    display:grid; grid-template-columns: 80px 1fr;
+    gap: 20px; align-items:center;
+    padding: 20px 0; border-top: 1px solid rgba(246,237,220,0.3);
+  }
+  .s-quote .r .endorsements .row:last-child { border-bottom: 1px solid rgba(246,237,220,0.3); }
+  .s-quote .r .endorsements .num { font-family:"Instrument Serif", serif; font-style:italic; font-size: 56px; line-height:1; color: var(--pink); }
+  .s-quote .r .endorsements .txt { font-size: 26px; line-height:1.4; }
+  .s-quote .r .endorsements .txt strong { font-weight:600; display:block; margin-bottom: 4px; }
+  /* ========== SLIDE 8: CLOSER / INDEX ========== */
+  .s-closer { background: var(--ink); color: var(--cream); padding: 96px 64px; position:relative; }
+  .s-closer .top { display:flex; justify-content:space-between; align-items:flex-start; }
+  .s-closer .top .kicker { font-family:"JetBrains Mono", monospace; font-size:24px; letter-spacing:0.18em; text-transform:uppercase; color: var(--lime); }
+  .s-closer .big {
+    margin-top: 40px;
+    font-family:"Bricolage Grotesque", sans-serif;
+    font-weight:700;
+    font-size: 320px;
+    line-height: 0.82;
+    letter-spacing: -0.05em;
+    color: var(--pink);
+    max-width: 800px;
+  }
+  .s-closer .big em { display:inline-block; margin-left: -20px; }
+  .s-closer .big em { font-family:"Instrument Serif", serif; font-style:italic; font-weight:400; color: var(--butter); }
+  .s-closer .grid {
+    position:absolute; left:64px; right:64px; bottom: 120px;
+    display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
+  }
+  .s-closer .grid .col h6 {
+    margin: 0 0 16px;
+    font-family:"JetBrains Mono", monospace;
+    font-size:24px; letter-spacing:0.15em; text-transform:uppercase;
+    color: var(--lime); font-weight:500;
+  }
+  .s-closer .grid .col p { margin:0; font-size: 24px; line-height:1.45; }
+  .s-closer .grid .col p + p { margin-top: 8px; }
+  .s-closer .corner-pills {
+    position:absolute; right:64px; top: 200px;
+    display:flex; flex-direction:column; gap: 12px; align-items:flex-end;
+  }
+  .s-closer .corner-pills .pill { font-size:22px; padding: 10px 24px; }
+</style>
+</head>
+<body>
+<deck-stage>
+  <!-- ============ SLIDE 1: COVER ============ -->
+  <section class="s-cover" data-screen-label="01 Cover">
+    <div class="meta">
+      <span>Vol. 04 &mdash; Editorial Brief</span>
+      <span>Spring / Summer Edition</span>
+      <span>FW · 2026</span>
+    </div>
+    <div class="pill-cluster">
+      <span class="pill" style="background:var(--burgundy); color:var(--pink)">focus</span>
+      <span class="pill" style="background:var(--butter); color:var(--burgundy)">tech-equipped</span>
+      <span class="pill" style="background:var(--burgundy); color:var(--butter)">creativity</span>
+      <span class="pill" style="background:var(--butter); color:var(--burgundy)">coffee</span>
+      <span class="pill" style="background:var(--burgundy); color:var(--pink)">community</span>
+      <span class="pill" style="background:var(--butter); color:var(--burgundy)">coworking</span>
+      <span class="pill" style="background:var(--burgundy); color:var(--butter)">productivity</span>
+      <span class="pill" style="background:var(--butter); color:var(--burgundy)">inspiration</span>
+      <span class="pill" style="background:var(--burgundy); color:var(--pink)">flexible</span>
+      <span class="pill" style="background:var(--butter); color:var(--burgundy)">workshops</span>
+      <span class="pill" style="background:var(--burgundy); color:var(--butter)">collaboration</span>
+      <span class="pill" style="background:var(--butter); color:var(--burgundy)">studio</span>
+    </div>
+    <div class="wordmark">
+      <span>Studio</span>
+      <span class="amp" style="color:var(--butter); margin: 0 24px 24px;">&amp;</span>
+      <span>Salon</span>
+    </div>
+  </section>
+  <!-- ============ SLIDE 2: MANIFESTO ============ -->
+  <section class="s-manifesto" data-screen-label="02 Manifesto">
+    <div class="left">
+      <div>
+        <div class="label" style="margin-bottom:32px; color: var(--burgundy);">Chapter One · Manifesto</div>
+        <div class="chapter">01<sup></sup></div>
+      </div>
+      <div class="lede">
+        Placeholder lede sets the tone for the whole document. A short, declarative sentence followed by an <em>aside in italic</em> that carries the warmth.
+      </div>
+      <div class="mono" style="font-size:24px; letter-spacing:0.12em; opacity:0.6; text-transform:uppercase;">Page 002 / 016 &nbsp;·&nbsp; Read Time 04:30</div>
+    </div>
+    <div class="right">
+      <div>
+        <h3>An opening note</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+        <p>Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla.</p>
+        <p>Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+      </div>
+      <div>
+        <div class="signature">— with warmth,</div>
+        <div style="font-family:'JetBrains Mono', monospace; font-size:24px; letter-spacing:0.18em; text-transform:uppercase; margin-top: 12px; color: var(--butter);">The Editorial Desk</div>
+      </div>
+    </div>
+  </section>
+  <!-- ============ SLIDE 3: VALUES GRID ============ -->
+  <section class="s-grid" data-screen-label="03 Principles">
+    <div style="display:flex; justify-content:space-between; align-items:flex-end; margin-bottom: 24px;">
+      <h2>Eight principles, <em>loosely held.</em></h2>
+      <div class="mono" style="font-size:24px; letter-spacing:0.15em; text-transform:uppercase; color: var(--burgundy);">§ 03 — Principles</div>
+    </div>
+    <div class="grid">
+      <div class="card c1">
+        <div class="num">/ 01</div>
+        <h4>Slow looking</h4>
+        <p>A short paragraph describing the principle in plain language. Two sentences is plenty.</p>
+      </div>
+      <div class="card c2">
+        <div class="num">/ 02</div>
+        <h4>Open kitchen</h4>
+        <p>Process in public. Show the seams, the sketches, the half-formed thoughts before they harden.</p>
+      </div>
+      <div class="card c3">
+        <div class="num">/ 03</div>
+        <h4>Borrowed light</h4>
+        <p>Cite generously. The best ideas always belong to a lineage; name the room you walked into.</p>
+      </div>
+      <div class="card c4">
+        <div class="num">/ 04</div>
+        <h4>Quiet defaults</h4>
+        <p>Restraint as a posture. Loud only when the moment earns it; otherwise, a soft shoulder.</p>
+      </div>
+      <div class="card c5">
+        <div class="num">/ 05</div>
+        <h4>Fewer, finer</h4>
+        <p>Pare back the pile. Three considered objects beat thirty hurried ones, every single time.</p>
+      </div>
+      <div class="card c6">
+        <div class="num">/ 06</div>
+        <h4>Generous edges</h4>
+        <p>Margins are mercy. Leave white space for the reader to breathe and bring their own.</p>
+      </div>
+      <div class="card c7">
+        <div class="num">/ 07</div>
+        <h4>Hand in it</h4>
+        <p>A trace of the maker, on purpose. Polish should never quite hide the fingerprints.</p>
+      </div>
+      <div class="card c8">
+        <div class="num">/ 08</div>
+        <h4>To be added</h4>
+        <p>A placeholder principle, awaiting the next conversation. The list is not yet finished.</p>
+      </div>
+    </div>
+  </section>
+  <!-- ============ SLIDE 4: BIG STAT ============ -->
+  <section class="s-stat" data-screen-label="04 Headline figure">
+    <div class="toprow">
+      <div>
+        <div class="kicker">§ 04 — Headline Figure</div>
+        <div class="serif" style="font-size: 48px; margin-top: 16px; color: var(--pink);">A portrait, in numbers.</div>
+      </div>
+      <div class="swatches">
+        <i style="background:var(--pink)"></i>
+        <i style="background:var(--lime)"></i>
+        <i style="background:var(--butter)"></i>
+        <i style="background:var(--terracotta)"></i>
+        <i style="background:var(--sky)"></i>
+      </div>
+    </div>
+    <div class="figure" style="margin-left:0px; max-width: 900px;">
+      <span>72</span><span class="pct">%</span>
+    </div>
+    <div style="position:absolute; left:64px; bottom:80px; max-width: 900px;">
+      <div class="kicker" style="color:var(--butter);">What this measures</div>
+      <p style="font-size:24px; line-height:1.45; margin-top:18px; opacity:0.9;">Placeholder annotation. A short, candid sentence about what the figure means and, more importantly, what it doesn't. Survey of n=842, fielded in placeholder month, weighted to placeholder population.</p>
+    </div>
+    <div class="breakdown">
+      <div class="kicker" style="margin-bottom:12px;">Composition</div>
+      <div class="row">
+        <span class="lbl">Segment A</span>
+        <span class="bar"><i style="width:82%; background:var(--lime)"></i></span>
+        <span class="val">82.4</span>
+      </div>
+      <div class="row">
+        <span class="lbl">Segment B</span>
+        <span class="bar"><i style="width:64%; background:var(--butter)"></i></span>
+        <span class="val">63.9</span>
+      </div>
+      <div class="row">
+        <span class="lbl">Segment C</span>
+        <span class="bar"><i style="width:48%; background:var(--terracotta)"></i></span>
+        <span class="val">48.1</span>
+      </div>
+      <div class="row">
+        <span class="lbl">Segment D</span>
+        <span class="bar"><i style="width:31%; background:var(--sky)"></i></span>
+        <span class="val">31.0</span>
+      </div>
+    </div>
+  </section>
+  <!-- ============ SLIDE 5: TIMELINE ============ -->
+  <section class="s-timeline" data-screen-label="05 Trajectory">
+    <div class="head">
+      <h2>A short trajectory, <em>told in five stops.</em></h2>
+      <div class="meta">
+        § 05 — Trajectory<br/>
+        <span style="opacity:0.5;">2019 → present</span>
+      </div>
+    </div>
+    <div class="track">
+      <div class="axis"></div>
+      <div class="stops">
+        <div class="stop">
+          <span class="dot"></span>
+          <div class="yr">'19</div>
+          <h5>The first prototype</h5>
+          <p>A short caption per milestone, written in plain prose. One observation, one consequence.</p>
+        </div>
+        <div class="stop">
+          <span class="dot"></span>
+          <div class="yr">'21</div>
+          <h5>Quiet expansion</h5>
+          <p>Placeholder copy describing a turning point. Keep the writing concrete, never abstract.</p>
+        </div>
+        <div class="stop">
+          <span class="dot"></span>
+          <div class="yr">'23</div>
+          <h5>A new house style</h5>
+          <p>Type, color, voice — re-cast around a single editorial premise; everything else followed.</p>
+        </div>
+        <div class="stop">
+          <span class="dot"></span>
+          <div class="yr">'25</div>
+          <h5>The salon, formalized</h5>
+          <p>Monthly gatherings became a fixture, then a discipline, then the work's center of gravity.</p>
+        </div>
+        <div class="stop">
+          <span class="dot"></span>
+          <div class="yr">'26</div>
+          <h5>Where we sit now</h5>
+          <p>Present tense. A brief, honest description of the shape of the practice today, in two breaths.</p>
+        </div>
+      </div>
+    </div>
+    <div class="ribbon">
+      <span>Next chapter loading</span>
+      <strong>— and the work continues, gently.</strong>
+      <span>Vol. 05 / Autumn</span>
+    </div>
+  </section>
+  <!-- ============ SLIDE 6: CHART ============ -->
+  <section class="s-chart" data-screen-label="06 Composition">
+    <div class="l">
+      <div class="label" style="color:var(--butter); margin-bottom: 20px;">§ 06 — Composition</div>
+      <h2>How the days <em>arrange themselves.</em></h2>
+      <p class="lede">A placeholder description for the chart on the right. Speak to the shape of the data — what rises, what plateaus — not the precise figures. Methodology and a one-line caveat live at the bottom.</p>
+      <div class="legend">
+        <div class="item"><i style="background:var(--pink); border:1px solid var(--burgundy);"></i> Studio hours, deep work <span class="cat">Series A</span></div>
+        <div class="item"><i style="background:var(--butter); border:2px solid var(--burgundy); border-radius:999px;"></i> Salon &amp; conversation <span class="cat">Series B</span></div>
+        <div class="item"><i style="background:var(--burgundy);"></i> Reading, drift, walking <span class="cat">Series C</span></div>
+        <div class="item"><i style="background:transparent; border-top: 3px dotted var(--butter); border-radius:0; height: 0;"></i> Correspondence, admin <span class="cat">Series D</span></div>
+      </div>
+      <div class="mono" style="margin-top: 40px; font-size:24px; letter-spacing:0.1em; text-transform:uppercase; opacity:0.5;">Source: internal logs · self-reported · n = 24 weeks</div>
+    </div>
+    <div class="r">
+      <div class="head">
+        <span class="ttl">Hours per week, by mode</span>
+        <span class="unit">Hrs / wk</span>
+      </div>
+      <svg class="chart" viewBox="0 0 720 380" preserveAspectRatio="none">
+        <!-- gridlines -->
+        <g stroke="#7A1F35" stroke-opacity="0.15" stroke-width="1">
+          <line x1="60" y1="40"  x2="720" y2="40"  />
+          <line x1="60" y1="125" x2="720" y2="125" />
+          <line x1="60" y1="210" x2="720" y2="210" />
+          <line x1="60" y1="295" x2="720" y2="295" />
+          <line x1="60" y1="380" x2="720" y2="380" />
+        </g>
+        <!-- y labels -->
+        <g font-family="JetBrains Mono, monospace" font-size="24" fill="#7A1F35" fill-opacity="0.6">
+          <text x="0" y="48">40</text>
+          <text x="0" y="133">30</text>
+          <text x="0" y="218">20</text>
+          <text x="0" y="303">10</text>
+          <text x="8" y="380">0</text>
+        </g>
+        <!-- Series A (pink area, burgundy stroke) -->
+        <path d="M 60 230 Q 120 200 180 180 T 300 145 T 420 120 T 540 100 T 660 80 L 660 380 L 60 380 Z"
+              fill="#F2B6C6" fill-opacity="0.85"/>
+        <path d="M 60 230 Q 120 200 180 180 T 300 145 T 420 120 T 540 100 T 660 80"
+              fill="none" stroke="#7A1F35" stroke-width="3"/>
+        <!-- Series C bars (burgundy, dark on yellow) -->
+        <g fill="#7A1F35">
+          <rect x="80"  y="320" width="22" height="60" rx="4"/>
+          <rect x="190" y="300" width="22" height="80" rx="4"/>
+          <rect x="300" y="285" width="22" height="95" rx="4"/>
+          <rect x="410" y="275" width="22" height="105" rx="4"/>
+          <rect x="520" y="260" width="22" height="120" rx="4"/>
+          <rect x="630" y="245" width="22" height="135" rx="4"/>
+        </g>
+        <!-- Series B (yellow circles + burgundy line) -->
+        <path d="M 90 280 L 200 250 L 310 235 L 420 215 L 530 200 L 640 175"
+              fill="none" stroke="#7A1F35" stroke-width="3"/>
+        <g fill="#F2D86A" stroke="#7A1F35" stroke-width="3">
+          <circle cx="90" cy="280" r="8"/>
+          <circle cx="200" cy="250" r="8"/>
+          <circle cx="310" cy="235" r="8"/>
+          <circle cx="420" cy="215" r="8"/>
+          <circle cx="530" cy="200" r="8"/>
+          <circle cx="640" cy="175" r="8"/>
+        </g>
+        <!-- Series D (burgundy dotted) -->
+        <path d="M 90 350 L 200 345 L 310 348 L 420 338 L 530 340 L 640 332"
+              fill="none" stroke="#7A1F35" stroke-width="3" stroke-dasharray="2 10" stroke-linecap="round" stroke-opacity="0.6"/>
+      </svg>
+      <div class="xax">
+        <span>W·01</span><span>W·05</span><span>W·09</span><span>W·13</span><span>W·17</span><span>W·24</span>
+      </div>
+    </div>
+  </section>
+  <!-- ============ SLIDE 7: QUOTE / SPLIT ============ -->
+  <section class="s-quote" data-screen-label="07 In their words">
+    <div class="l">
+      <div class="top">
+        <div class="mono" style="font-size:24px; letter-spacing:0.18em; text-transform:uppercase; color: var(--burgundy);">§ 07 — In their words</div>
+        <div class="mark">&ldquo;</div>
+      </div>
+      <blockquote>
+        A placeholder pull-quote, set in italic with one phrase rendered as <b>bold sans</b> for emphasis, the way good editorial designers have always done it.
+      </blockquote>
+      <div class="attribution">
+        <div class="avatar"></div>
+        <div class="who">
+          A. Placeholder-Surname
+          <small>Editor-at-large · Sister Publication</small>
+        </div>
+      </div>
+    </div>
+    <div class="r">
+      <div class="label" style="color: var(--butter);">Three short reads</div>
+      <h3>Voices, lightly edited &mdash; from the readership.</h3>
+      <div class="endorsements">
+        <div class="row">
+          <span class="num">i.</span>
+          <div class="txt">
+            <strong>On the rhythm</strong>
+            A two-line testimonial that reads as if spoken aloud across a small kitchen table.
+          </div>
+        </div>
+        <div class="row">
+          <span class="num">ii.</span>
+          <div class="txt">
+            <strong>On the company</strong>
+            Another short note, three or four beats long, useful and specific without being precious about it.
+          </div>
+        </div>
+        <div class="row">
+          <span class="num">iii.</span>
+          <div class="txt">
+            <strong>On returning</strong>
+            A closing testimonial — the one that comes after the others have already convinced the reader.
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- ============ SLIDE 8: CLOSER / INDEX ============ -->
+  <section class="s-closer" data-screen-label="08 Colophon">
+    <div class="top">
+      <div>
+        <div class="kicker">§ 08 — Colophon &amp; Index</div>
+        <div class="serif" style="font-size:48px; color:var(--pink); margin-top:12px;">Until the next volume.</div>
+      </div>
+      <div class="mono" style="font-size:24px; letter-spacing:0.15em; text-transform:uppercase; opacity:0.7; text-align:right; line-height:1.4;">
+        End of issue<br/>
+        <span style="opacity:0.5;">No. 04 · 016 pp.</span>
+      </div>
+    </div>
+    <div class="big">
+      Fin<em>.</em>
+    </div>
+    <div class="corner-pills">
+      <span class="pill" style="background:var(--burgundy); color:var(--cream); font-size:24px; padding: 12px 28px;">issue 04</span>
+      <span class="pill" style="background:var(--lime); color:var(--ink); font-size:24px; padding: 12px 28px;">spring volume</span>
+      <span class="pill" style="background:var(--butter); color:var(--ink); font-size:24px; padding: 12px 28px;">colophon</span>
+    </div>
+    <div class="grid">
+      <div class="col">
+        <h6>Editorial</h6>
+        <p>A. Placeholder</p>
+        <p>B. Placeholder</p>
+        <p>C. Placeholder</p>
+      </div>
+      <div class="col">
+        <h6>Type</h6>
+        <p>Bricolage Grotesque</p>
+        <p>Instrument Serif</p>
+        <p>JetBrains Mono</p>
+      </div>
+      <div class="col">
+        <h6>Printed by</h6>
+        <p>Placeholder Press</p>
+        <p>City &amp; State</p>
+        <p>Recycled stock, 120gsm</p>
+      </div>
+      <div class="col">
+        <h6>Correspondence</h6>
+        <p>desk@placeholder.studio</p>
+        <p>P.O. Box 0000</p>
+        <p>Routing No. 04 / 26</p>
+      </div>
+    </div>
+  </section>
+</deck-stage>
+</body>
+</html>