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

@@ -0,0 +1,689 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Quartz · 2026 Series A Memo</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --paper: #FBFBFA;
+    --paper-2: #F4F3F0;
+    --ink: #1A1A19;
+    --ink-soft: #555452;
+    --muted: #828079;
+    --hairline: #E5E3DE;
+    --hairline-soft: #EFEDE8;
+    --accent: #346538;
+    --accent-bg: #EDF3EC;
+    --accent-2: #9F2F2D;
+    --accent-2-bg: #FDEBEC;
+    --display: 'Instrument Serif', 'Newsreader', Georgia, serif;
+    --sans: 'Inter Tight', 'Switzer', 'SF Pro Display', system-ui, sans-serif;
+    --mono: 'JetBrains Mono', 'Geist Mono', ui-monospace, monospace;
+    --ease: cubic-bezier(0.16, 1, 0.3, 1);
+  }
+  * { box-sizing: border-box; }
+  html, body { margin: 0; padding: 0; }
+  body {
+    background: var(--paper);
+    color: var(--ink);
+    font-family: var(--sans);
+    font-size: 16px;
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+  }
+  /* Deck system (matches html-ppt convention) */
+  .deck { position: relative; width: 100vw; }
+  .slide {
+    position: relative;
+    width: 100vw; height: 100vh; min-height: 720px;
+    padding: 72px 96px;
+    display: flex; flex-direction: column;
+    overflow: hidden;
+    page-break-after: always;
+  }
+  .slide + .slide { border-top: 1px solid var(--hairline); }
+  body.deck-nav-ready { overflow: hidden; }
+  body.deck-nav-ready .deck {
+    height: 100vh;
+    overflow: hidden;
+  }
+  body.deck-nav-ready .slide {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 420ms var(--ease);
+  }
+  body.deck-nav-ready .slide.active {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  body.deck-nav-ready .slide + .slide { border-top: 0; }
+  .deck-progress {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    z-index: 40;
+    background: var(--hairline-soft);
+  }
+  .deck-progress span {
+    display: block;
+    width: 0;
+    height: 100%;
+    background: var(--accent);
+    transition: width 220ms var(--ease);
+  }
+  #deck-nav {
+    position: fixed;
+    left: 50%;
+    bottom: 24px;
+    transform: translateX(-50%);
+    z-index: 40;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 11px;
+    border: 1px solid rgba(26, 26, 25, 0.12);
+    border-radius: 999px;
+    background: rgba(251, 251, 250, 0.72);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+  }
+  #deck-nav .dot {
+    width: 7px;
+    height: 7px;
+    border: 0;
+    border-radius: 999px;
+    padding: 0;
+    background: rgba(26, 26, 25, 0.24);
+    cursor: pointer;
+    transition: width 220ms var(--ease), background 220ms var(--ease), transform 220ms var(--ease);
+  }
+  #deck-nav .dot:hover { transform: scale(1.2); background: rgba(26, 26, 25, 0.42); }
+  #deck-nav .dot.active {
+    width: 22px;
+    background: var(--accent);
+  }
+  #deck-nav .dot:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 3px;
+  }
+  /* Slide chrome */
+  .meta-row {
+    position: absolute; top: 32px; left: 96px; right: 96px;
+    display: flex; justify-content: space-between; align-items: baseline;
+    font-family: var(--mono); font-size: 11px;
+    letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
+  }
+  .meta-row .left { display: inline-flex; align-items: center; gap: 10px; }
+  .meta-row .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); }
+  .meta-row .num { color: var(--ink); }
+  .pagenum {
+    position: absolute; bottom: 32px; right: 96px;
+    font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
+  }
+  .footrule {
+    position: absolute; bottom: 28px; left: 96px; right: 96px;
+    border: 0; border-top: 1px solid var(--hairline);
+  }
+  .signature {
+    position: absolute; bottom: 32px; left: 96px;
+    font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
+  }
+  /* Display headings */
+  h1.cover {
+    font-family: var(--display);
+    font-size: clamp(72px, 9vw, 132px);
+    font-weight: 400;
+    line-height: 0.98;
+    letter-spacing: -0.028em;
+    margin: 0;
+    max-width: 16ch;
+  }
+  h1.cover em { font-style: italic; color: var(--ink-soft); }
+  h2.title {
+    font-family: var(--display);
+    font-size: clamp(54px, 6.5vw, 92px);
+    font-weight: 400;
+    line-height: 1.02;
+    letter-spacing: -0.025em;
+    margin: 0;
+    max-width: 14ch;
+  }
+  h2.title em { font-style: italic; color: var(--ink-soft); }
+  h3.sub {
+    font-family: var(--display); font-style: italic; font-weight: 400;
+    font-size: 32px; line-height: 1.15; letter-spacing: -0.02em;
+    color: var(--ink-soft); margin: 12px 0 0;
+  }
+  .lede {
+    font-size: 21px; line-height: 1.5; color: var(--ink-soft);
+    max-width: 56ch; margin: 0;
+  }
+  /* Cover slide */
+  .cover-slide { justify-content: center; }
+  .cover-slide .lede { margin-top: 28px; max-width: 50ch; }
+  .cover-slide .stamp {
+    display: inline-block;
+    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
+    color: var(--accent); background: var(--accent-bg);
+    padding: 4px 10px; border-radius: 999px;
+    margin-bottom: 28px;
+  }
+  /* TOC slide */
+  .toc-slide { justify-content: center; }
+  .toc-slide .columns { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: start; padding-top: 48px; }
+  .toc {
+    list-style: none; padding: 0; margin: 0;
+    border-top: 1px solid var(--hairline);
+  }
+  .toc li {
+    display: grid; grid-template-columns: 4ch 1fr 4ch;
+    align-items: baseline; gap: 18px;
+    padding: 16px 0;
+    border-bottom: 1px solid var(--hairline);
+    font-size: 17px;
+  }
+  .toc li .n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: var(--muted); }
+  .toc li .pg { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: var(--muted); text-align: right; }
+  .toc li .t { font-family: var(--display); font-size: 22px; letter-spacing: -0.012em; line-height: 1.2; }
+  .toc li .t em { font-style: italic; color: var(--ink-soft); }
+  /* Manifesto slide */
+  .manifesto .body {
+    margin-top: 48px;
+    display: grid; grid-template-columns: 1fr;
+  }
+  .manifesto .item {
+    display: grid; grid-template-columns: 6ch 1fr 14ch;
+    gap: 32px;
+    padding: 22px 0;
+    border-top: 1px solid var(--hairline);
+    align-items: baseline;
+  }
+  .manifesto .item:last-child { border-bottom: 1px solid var(--hairline); }
+  .manifesto .item .n {
+    font-family: var(--display); font-size: 44px; line-height: 0.95; letter-spacing: -0.03em;
+  }
+  .manifesto .item h4 {
+    font-family: var(--display); font-size: 26px; letter-spacing: -0.015em; line-height: 1.2;
+    margin: 0 0 6px; font-weight: 400; max-width: 32ch;
+  }
+  .manifesto .item p { margin: 0; font-size: 14.5px; color: var(--ink-soft); max-width: 56ch; }
+  .manifesto .item .tag {
+    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
+    color: var(--muted); text-align: right;
+  }
+  /* Bento data slide */
+  .bento-slide .grid {
+    margin-top: 56px;
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-auto-rows: minmax(180px, auto);
+    gap: 0;
+    border: 1px solid var(--hairline);
+    background: var(--hairline);
+  }
+  .bento-slide .cell { background: var(--paper); padding: 28px 32px; }
+  .cell-meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; display: block; }
+  .cell .stat { font-family: var(--display); font-size: 64px; line-height: 1; letter-spacing: -0.03em; font-weight: 400; }
+  .cell .stat small { font-family: var(--sans); font-size: 14px; color: var(--muted); margin-left: 6px; }
+  .cell h4 { font-family: var(--display); font-size: 22px; line-height: 1.2; letter-spacing: -0.015em; font-weight: 400; margin: 0 0 8px; }
+  .cell p { font-size: 13.5px; color: var(--ink-soft); margin: 0; max-width: 32ch; line-height: 1.55; }
+  .span-3 { grid-column: span 3; }
+  .span-2 { grid-column: span 2; }
+  .span-4 { grid-column: span 4; }
+  .row-2 { grid-row: span 2; }
+  .delta { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 999px; background: var(--accent-bg); color: var(--accent); margin-top: 14px; }
+  .delta.down { background: var(--accent-2-bg); color: var(--accent-2); }
+  /* Quote slide */
+  .quote-slide { justify-content: center; text-align: left; }
+  .quote-slide blockquote {
+    margin: 0; padding: 38px 0;
+    border-top: 1px solid var(--hairline);
+    border-bottom: 1px solid var(--hairline);
+    font-family: var(--display); font-size: clamp(40px, 4.4vw, 64px); font-weight: 400;
+    letter-spacing: -0.02em; line-height: 1.12; color: var(--ink);
+    max-width: 26ch;
+  }
+  .quote-slide blockquote em { color: var(--ink-soft); font-style: italic; }
+  .quote-slide cite {
+    display: block; margin-top: 22px;
+    font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
+    font-style: normal;
+  }
+  /* Comparison slide */
+  .compare-slide .columns {
+    margin-top: 56px;
+    display: grid; grid-template-columns: 1fr 1fr;
+    border-top: 1px solid var(--hairline);
+  }
+  .compare-slide .col { padding: 28px 0; }
+  .compare-slide .col + .col { border-left: 1px solid var(--hairline); padding-left: 32px; }
+  .compare-slide .col h5 {
+    font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
+    color: var(--muted); margin: 0 0 22px;
+  }
+  .compare-slide .col.against h5 { color: var(--accent-2); }
+  .compare-slide .col.for h5 { color: var(--accent); }
+  .compare-slide .col p {
+    font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1.3; letter-spacing: -0.01em;
+    margin: 0 0 18px; padding-bottom: 18px; border-bottom: 1px solid var(--hairline);
+    max-width: 28ch;
+  }
+  .compare-slide .col p:last-child { border-bottom: none; }
+  .compare-slide .col.against p { color: var(--ink-soft); text-decoration: line-through; text-decoration-thickness: 1px; }
+  /* Table slide */
+  .table-slide .data {
+    margin-top: 56px;
+    display: grid;
+    grid-template-columns: 4ch 1.4fr 1fr 1fr 1fr 0.9fr;
+    gap: 1px;
+    background: var(--hairline);
+    font-size: 14px;
+  }
+  .table-slide .data > div { background: var(--paper); padding: 14px 18px; }
+  .table-slide .data .head {
+    background: var(--ink); color: var(--paper);
+    font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
+  }
+  .table-slide .data .right { text-align: right; }
+  .table-slide .data .num { font-family: var(--mono); }
+  .table-slide .data .pos { color: var(--accent); }
+  .table-slide .data .neg { color: var(--accent-2); }
+  /* Chart slide */
+  .chart-slide .chart {
+    margin-top: 56px;
+    display: grid;
+    grid-template-columns: 12ch 1fr 8ch;
+    gap: 18px 24px;
+    align-items: center;
+    font-size: 14px;
+  }
+  .chart-slide .chart .label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
+  .chart-slide .chart .bar {
+    height: 20px; background: var(--paper-2); position: relative;
+    border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
+  }
+  .chart-slide .chart .bar::after {
+    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
+    width: var(--w, 0%); background: var(--ink-soft);
+  }
+  .chart-slide .chart .bar.accent::after { background: var(--accent); }
+  .chart-slide .chart .v { font-family: var(--mono); font-size: 13px; text-align: right; letter-spacing: 0.02em; }
+  /* Colophon */
+  .colophon-slide .grid { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
+  .colophon-slide dl {
+    margin: 0; display: grid; grid-template-columns: 14ch 1fr; gap: 12px 18px;
+    font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em;
+    line-height: 1.6;
+  }
+  .colophon-slide dt { color: var(--muted); text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; }
+  .colophon-slide dd { margin: 0; color: var(--ink); }
+  .colophon-slide dd em { color: var(--ink-soft); font-style: normal; }
+  .colophon-slide dl + dl { border-top: 1px solid var(--hairline); padding-top: 22px; }
+  /* Closing */
+  .closing-slide { justify-content: center; text-align: left; }
+  .closing-slide h2 {
+    font-family: var(--display); font-style: italic; font-weight: 400;
+    font-size: clamp(64px, 8vw, 120px); line-height: 1;
+    letter-spacing: -0.025em; margin: 0; max-width: 18ch;
+  }
+  .closing-slide h2 b { font-weight: 400; font-style: normal; color: var(--ink); }
+  .closing-slide .row { display: flex; gap: 14px; margin-top: 38px; align-items: center; }
+  .ghost-cta {
+    font-family: var(--sans); font-weight: 500; font-size: 14px;
+    padding: 12px 22px; border: 1px solid var(--hairline);
+    border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer;
+    transition: background 200ms var(--ease);
+  }
+  .ghost-cta.solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
+  .ghost-cta:hover { background: var(--paper-2); }
+  .ghost-cta.solid:hover { background: #2A2A28; }
+  /* Print / preview */
+  @media print {
+    .slide { height: auto; min-height: 100vh; page-break-after: always; }
+    body.deck-nav-ready { overflow: visible; }
+    body.deck-nav-ready .deck { height: auto; overflow: visible; }
+    body.deck-nav-ready .slide {
+      position: relative;
+      inset: auto;
+      opacity: 1;
+      pointer-events: auto;
+    }
+    .deck-progress,
+    #deck-nav { display: none; }
+  }
+</style>
+</head>
+<body>
+<div class="deck">
+  <!-- 01 · Cover -->
+  <section class="slide cover-slide" data-title="Cover">
+    <div class="meta-row"><span class="left"><span class="dot"></span><span class="num">QUARTZ · MEMO 04 · 2026</span></span><span>SERIES A · CONFIDENTIAL</span></div>
+    <span class="stamp">— filed 14 may 2026</span>
+    <h1 class="cover">A quiet workspace, <em>handed</em> to the people who write&nbsp;the&nbsp;manuals.</h1>
+    <h3 class="sub">Series A memo &mdash; for an audience of three.</h3>
+    <p class="lede" style="margin-top: 28px;">We are raising six and a half million euros to spend the next eighteen months making documentation feel like writing again. This deck is the short version. The longer version lives in the manual.</p>
+    <span class="signature">Q. Albrecht · CEO · q@quartz.press</span>
+    <span class="pagenum">01 / 10</span>
+  </section>
+  <!-- 02 · Thesis & TOC -->
+  <section class="slide toc-slide" data-title="Thesis &amp; TOC">
+    <div class="meta-row"><span class="left"><span class="dot"></span><span class="num">02 · thesis &amp; agenda</span></span><span>q. albrecht</span></div>
+    <div class="columns">
+      <div>
+        <h2 class="title">The world has enough <em>note-taking</em> apps. It has too few <em>writing</em> ones.</h2>
+        <p class="lede" style="margin-top: 28px;">Quartz is a workspace for technical writers — the people who keep the manuals, the changelogs, the runbooks, the policy docs. They write the longest documents in any company and use the worst tools to do it.</p>
+      </div>
+      <div>
+        <ul class="toc">
+          <li><span class="n">01</span><span class="t">Cover</span><span class="pg">p. 01</span></li>
+          <li><span class="n">02</span><span class="t">Thesis &amp; agenda</span><span class="pg">p. 02</span></li>
+          <li><span class="n">03</span><span class="t">Six theses on a <em>quieter</em> doc tool</span><span class="pg">p. 03</span></li>
+          <li><span class="n">04</span><span class="t">Where we are, in numbers</span><span class="pg">p. 04</span></li>
+          <li><span class="n">05</span><span class="t">A line we believe in</span><span class="pg">p. 05</span></li>
+          <li><span class="n">06</span><span class="t">What it isn't / what it is</span><span class="pg">p. 06</span></li>
+          <li><span class="n">07</span><span class="t">Customers, in a row</span><span class="pg">p. 07</span></li>
+          <li><span class="n">08</span><span class="t">ARR — the long way</span><span class="pg">p. 08</span></li>
+          <li><span class="n">09</span><span class="t">Colophon</span><span class="pg">p. 09</span></li>
+          <li><span class="n">10</span><span class="t">The ask</span><span class="pg">p. 10</span></li>
+        </ul>
+      </div>
+    </div>
+    <hr class="footrule">
+    <span class="pagenum">02 / 10</span>
+  </section>
+  <!-- 03 · Manifesto -->
+  <section class="slide manifesto" data-title="Six theses">
+    <div class="meta-row"><span class="left"><span class="dot"></span><span class="num">03 · manifest</span></span><span>section · product</span></div>
+    <h2 class="title">Six theses on a <em>quieter</em> doc tool.</h2>
+    <div class="body">
+      <div class="item"><div class="n">01</div><div><h4>The page is the unit, not the block.</h4><p>If the editor reads like a database, the doc reads like one. Quartz writes Markdown to disk and treats the page as a single object — not 142 nested toggles.</p></div><div class="tag">— editor</div></div>
+      <div class="item"><div class="n">02</div><div><h4>Review belongs inline. Not in Slack.</h4><p>Comments anchor to a line, resolve to an audit log, never spawn a thread that nobody can find two weeks later.</p></div><div class="tag">— review</div></div>
+      <div class="item"><div class="n">03</div><div><h4>History is a feature, not a tab.</h4><p>Every save is a commit. Diff two revisions in three keystrokes. Roll back without writing a support ticket.</p></div><div class="tag">— history</div></div>
+      <div class="item"><div class="n">04</div><div><h4>Publishing is not a separate product.</h4><p>The same page is a draft, a review, and a published doc — by changing one field, not by exporting to a third-party site builder.</p></div><div class="tag">— publish</div></div>
+    </div>
+    <hr class="footrule">
+    <span class="pagenum">03 / 10</span>
+  </section>
+  <!-- 04 · Bento data slide -->
+  <section class="slide bento-slide" data-title="Where we are">
+    <div class="meta-row"><span class="left"><span class="dot"></span><span class="num">04 · in numbers</span></span><span>section · traction</span></div>
+    <h2 class="title">Where we are, in <em>numbers</em>.</h2>
+    <div class="grid">
+      <div class="cell span-3 row-2">
+        <span class="cell-meta">paying teams · live</span>
+        <div class="stat">147<small>teams</small></div>
+        <span class="delta">▲ +38 this quarter · +35%</span>
+        <p style="margin-top: 18px;">Including engineering and policy teams at four publicly-listed European companies. Median seat count is twelve; the long tail is solo writers paying out of pocket.</p>
+      </div>
+      <div class="cell span-3"><span class="cell-meta">arr · annual run rate</span><div class="stat">€842k<small>ARR</small></div><span class="delta">▲ +29% qoq</span></div>
+      <div class="cell span-2"><span class="cell-meta">net retention</span><div class="stat">131<small>%</small></div></div>
+      <div class="cell span-2"><span class="cell-meta">gross margin</span><div class="stat">88<small>%</small></div></div>
+      <div class="cell span-2"><span class="cell-meta">churn · monthly logo</span><div class="stat">0.7<small>%</small></div><span class="delta down">▼ from 1.4% in Jan</span></div>
+    </div>
+    <hr class="footrule">
+    <span class="pagenum">04 / 10</span>
+  </section>
+  <!-- 05 · Quote -->
+  <section class="slide quote-slide" data-title="Quote">
+    <div class="meta-row"><span class="left"><span class="dot"></span><span class="num">05 · pull quote</span></span><span>customer · pilot 04</span></div>
+    <blockquote>
+      We replaced four tools with Quartz. Confluence for the docs, Notion for the drafts, Google Docs for the review, and Slack for the panic <em>that the doc nobody had read was wrong.</em>
+    </blockquote>
+    <cite>— Hester Naitō, principal engineer · Pilot 04 · Munich</cite>
+    <hr class="footrule">
+    <span class="pagenum">05 / 10</span>
+  </section>
+  <!-- 06 · Comparison -->
+  <section class="slide compare-slide" data-title="What it isn't">
+    <div class="meta-row"><span class="left"><span class="dot"></span><span class="num">06 · positioning</span></span><span>section · product</span></div>
+    <h2 class="title">What it <em>isn't</em>. What it <em>is</em>.</h2>
+    <div class="columns">
+      <div class="col against">
+        <h5>— Quartz isn't</h5>
+        <p>A wiki you have to maintain a sidebar for.</p>
+        <p>A knowledge graph nobody asked for.</p>
+        <p>An AI that suggests the third callout on the page.</p>
+        <p>A static-site generator with a CMS bolted on.</p>
+      </div>
+      <div class="col for">
+        <h5>— Quartz is</h5>
+        <p>A page. A title. A column measure that the writer can trust.</p>
+        <p>A history of every save and a diff between any two of them.</p>
+        <p>A line of comments anchored to the line they critique, archived when resolved.</p>
+        <p>Markdown out, Markdown in. Always.</p>
+      </div>
+    </div>
+    <hr class="footrule">
+    <span class="pagenum">06 / 10</span>
+  </section>
+  <!-- 07 · Table -->
+  <section class="slide table-slide" data-title="Customers">
+    <div class="meta-row"><span class="left"><span class="dot"></span><span class="num">07 · customer index</span></span><span>section · gtm</span></div>
+    <h2 class="title">Customers, in <em>a row</em>.</h2>
+    <div class="data">
+      <div class="head">№</div><div class="head">team</div><div class="head">country</div><div class="head">seats</div><div class="head right">arr</div><div class="head right">since</div>
+      <div>01</div><div>Albrecht Press</div><div>FR</div><div>4</div><div class="right num">€ 4,720</div><div class="right num">22.04</div>
+      <div>02</div><div>Naitō Robotics — Eng. docs</div><div>JP / DE</div><div>18</div><div class="right num pos">€ 41,280</div><div class="right num">23.10</div>
+      <div>03</div><div>Andrejević Atelier</div><div>HR</div><div>3</div><div class="right num">€ 3,180</div><div class="right num">24.01</div>
+      <div>04</div><div>Nwachukwu Ltd. — Policy</div><div>NG / UK</div><div>11</div><div class="right num">€ 18,640</div><div class="right num">24.06</div>
+      <div>05</div><div>Arroyave &amp; Bros</div><div>CO</div><div>7</div><div class="right num pos">€ 9,840</div><div class="right num">25.02</div>
+      <div>06</div><div>Quentin Veterinary, S.A.</div><div>FR</div><div>2</div><div class="right num neg">€ 1,920</div><div class="right num">25.04</div>
+    </div>
+    <hr class="footrule">
+    <span class="pagenum">07 / 10</span>
+  </section>
+  <!-- 08 · Chart -->
+  <section class="slide chart-slide" data-title="ARR">
+    <div class="meta-row"><span class="left"><span class="dot"></span><span class="num">08 · arr · the long way</span></span><span>section · finance</span></div>
+    <h2 class="title">ARR — <em>the long way</em>.</h2>
+    <div class="chart">
+      <span class="label">Q1 / 2024</span><div class="bar" style="--w: 9%;"></div><span class="v">€ 78k</span>
+      <span class="label">Q2 / 2024</span><div class="bar" style="--w: 14%;"></div><span class="v">€ 121k</span>
+      <span class="label">Q3 / 2024</span><div class="bar" style="--w: 22%;"></div><span class="v">€ 187k</span>
+      <span class="label">Q4 / 2024</span><div class="bar" style="--w: 32%;"></div><span class="v">€ 274k</span>
+      <span class="label">Q1 / 2025</span><div class="bar" style="--w: 44%;"></div><span class="v">€ 372k</span>
+      <span class="label">Q2 / 2025</span><div class="bar" style="--w: 58%;"></div><span class="v">€ 491k</span>
+      <span class="label">Q3 / 2025</span><div class="bar" style="--w: 71%;"></div><span class="v">€ 603k</span>
+      <span class="label">Q4 / 2025</span><div class="bar" style="--w: 83%;"></div><span class="v">€ 706k</span>
+      <span class="label">Q1 / 2026</span><div class="bar accent" style="--w: 99%;"></div><span class="v">€ 842k</span>
+    </div>
+    <p class="lede" style="margin-top: 56px; max-width: 60ch; font-size: 15px;">
+      No paid acquisition since Q3 2024. Growth comes from word-of-mouth between docs teams; ARR adds an Albrecht Press every five working days.
+    </p>
+    <hr class="footrule">
+    <span class="pagenum">08 / 10</span>
+  </section>
+  <!-- 09 · Colophon -->
+  <section class="slide colophon-slide" data-title="Colophon">
+    <div class="meta-row"><span class="left"><span class="dot"></span><span class="num">09 · colophon</span></span><span>section · team</span></div>
+    <h2 class="title">A small press. A long&nbsp;manual.</h2>
+    <div class="grid">
+      <dl>
+        <dt>founder</dt><dd>Quentin Albrecht <em>· prev. lead writer, IETF working group on documentation tooling</em></dd>
+        <dt>co-founder</dt><dd>Hester Naitō <em>· prev. principal engineer, Naitō Robotics</em></dd>
+        <dt>head of design</dt><dd>Margerit Andrejević <em>· prev. typographer, Atelier Nord-Ouest</em></dd>
+        <dt>policy / legal</dt><dd>Pemberton Nwachukwu <em>· prev. counsel, IBM Africa</em></dd>
+      </dl>
+      <dl>
+        <dt>set in</dt><dd>Instrument Serif · Inter Tight · JetBrains Mono</dd>
+        <dt>press</dt><dd>Atelier Nord-Ouest · Bordeaux</dd>
+        <dt>edition</dt><dd>04 · v 2026.05 · 2,400 numbered</dd>
+        <dt>contact</dt><dd>q@quartz.press · +33 (0)5 56 21 47 88</dd>
+        <dt>auditor</dt><dd>BDO France — Q1 2026 review complete</dd>
+      </dl>
+    </div>
+    <hr class="footrule">
+    <span class="pagenum">09 / 10</span>
+  </section>
+  <!-- 10 · Closing -->
+  <section class="slide closing-slide" data-title="The ask">
+    <div class="meta-row"><span class="left"><span class="dot"></span><span class="num">10 · the ask</span></span><span>series a · 2026</span></div>
+    <h2><b>Six and a half million euros</b>, <em>to spend the next eighteen months making documentation feel like writing again.</em></h2>
+    <p class="lede" style="margin-top: 32px; max-width: 64ch;">€2.4M to ship the publishing pipeline. €1.8M to grow a sales team of four. €1.4M to extend runway to thirty months. €0.9M to ratify our SOC 2 and translate the manual.</p>
+    <div class="row">
+      <button class="ghost-cta solid">Open the manual</button>
+      <button class="ghost-cta">q@quartz.press</button>
+      <span style="font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-left: auto;">— end · 2026.05.14</span>
+    </div>
+    <hr class="footrule">
+    <span class="pagenum">10 / 10</span>
+  </section>
+</div>
+<div class="deck-progress" id="deck-progress" aria-hidden="true"><span></span></div>
+<nav id="deck-nav" aria-label="Slide navigation"></nav>
+<script>
+(function () {
+  var deck = document.querySelector('.deck');
+  if (!deck) return;
+  var slides = Array.prototype.filter.call(deck.children, function (el) {
+    return el.classList && el.classList.contains('slide');
+  });
+  var nav = document.getElementById('deck-nav');
+  var progress = document.querySelector('#deck-progress span');
+  if (!slides.length || !nav || !progress) return;
+  var idx = 0;
+  var wheelAcc = 0;
+  var wheelTimer = null;
+  var touchX = 0;
+  var touchY = 0;
+  document.body.classList.add('deck-nav-ready');
+  document.body.setAttribute('tabindex', '-1');
+  document.body.style.outline = 'none';
+  slides.forEach(function (_, i) {
+    var dot = document.createElement('button');
+    dot.className = 'dot';
+    dot.type = 'button';
+    dot.setAttribute('aria-label', 'Go to slide ' + (i + 1));
+    dot.addEventListener('click', function () { go(i); });
+    nav.appendChild(dot);
+  });
+  function clamp(n) {
+    return Math.max(0, Math.min(slides.length - 1, n));
+  }
+  function go(n) {
+    idx = clamp(n);
+    slides.forEach(function (slide, i) {
+      var active = i === idx;
+      slide.classList.toggle('active', active);
+      slide.classList.toggle('is-active', active);
+      slide.setAttribute('aria-hidden', active ? 'false' : 'true');
+    });
+    Array.prototype.forEach.call(nav.querySelectorAll('.dot'), function (dot, i) {
+      var active = i === idx;
+      dot.classList.toggle('active', active);
+      if (active) dot.setAttribute('aria-current', 'true');
+      else dot.removeAttribute('aria-current');
+    });
+    progress.style.width = (((idx + 1) / slides.length) * 100) + '%';
+  }
+  function shouldIgnoreKeyTarget(target) {
+    if (!target || !target.tagName) return false;
+    var tag = target.tagName.toLowerCase();
+    return tag === 'input' || tag === 'textarea' || tag === 'select' || target.isContentEditable;
+  }
+  function onKey(e) {
+    if (e.__tasteDeckHandled || shouldIgnoreKeyTarget(e.target)) return;
+    var next = null;
+    if (e.key === 'ArrowRight' || e.key === 'ArrowDown' || e.key === 'PageDown' || e.key === ' ') next = idx + 1;
+    else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp' || e.key === 'PageUp') next = idx - 1;
+    else if (e.key === 'Home') next = 0;
+    else if (e.key === 'End') next = slides.length - 1;
+    if (next === null) return;
+    e.__tasteDeckHandled = true;
+    e.preventDefault();
+    go(next);
+  }
+  function onWheel(e) {
+    var delta = e.deltaY + e.deltaX;
+    if (Math.abs(delta) < 1) return;
+    e.preventDefault();
+    wheelAcc += delta;
+    if (Math.abs(wheelAcc) > 60) {
+      go(idx + (wheelAcc > 0 ? 1 : -1));
+      wheelAcc = 0;
+    }
+    clearTimeout(wheelTimer);
+    wheelTimer = setTimeout(function () { wheelAcc = 0; }, 150);
+  }
+  function onTouchStart(e) {
+    if (!e.touches || !e.touches.length) return;
+    touchX = e.touches[0].clientX;
+    touchY = e.touches[0].clientY;
+  }
+  function onTouchEnd(e) {
+    if (!e.changedTouches || !e.changedTouches.length) return;
+    var dx = e.changedTouches[0].clientX - touchX;
+    var dy = e.changedTouches[0].clientY - touchY;
+    if (Math.abs(dx) > 50 && Math.abs(dx) > Math.abs(dy)) {
+      go(idx + (dx < 0 ? 1 : -1));
+    }
+  }
+  function focusDeck() {
+    try {
+      window.focus();
+      document.body.focus({ preventScroll: true });
+    } catch (_) {}
+  }
+  window.addEventListener('keydown', onKey, true);
+  document.addEventListener('keydown', onKey, true);
+  window.addEventListener('wheel', onWheel, { passive: false });
+  window.addEventListener('touchstart', onTouchStart, { passive: true });
+  window.addEventListener('touchend', onTouchEnd, { passive: true });
+  document.addEventListener('mousedown', focusDeck);
+  window.addEventListener('load', focusDeck);
+  go(0);
+  focusDeck();
+})();
+</script>
+</body>
+</html>