npm - howone - Versions diffs - 0.1.19 → 0.1.22 - Mend

howone 0.1.19 → 0.1.22

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

package/templates/vite/.howone/skills/hallmark/site/_tests/04-meridian-manifesto/brief.md ADDED Viewed

@@ -0,0 +1,67 @@
+# Test 04 v2 — Meridian (studio manifesto)
+## The prompt (verbatim, same as v1)
+> "Make me a manifesto for my new studio called Meridian. We work on environmental products. No flashy stuff."
+## Step 0 · Pre-flight
+> *"No pre-flight signals — proceeding with full Hallmark stack."*
+## Step 1 · Design-context gate — partial → inferred
+User gave audience-implied + tone (declarative, no flash). Skill infers:
+> *"Going with: audience = potential clients and collaborators · use = read our position · tone = declarative, polemical, restrained. If any of those is wrong, redirect."*
+## Step 2.5 · Project memory rotation
+> *"Previous run on this brief picked Manifesto + Manifesto + none. Picking from {Quote-Led, Stat-Led, Numbered Theses} for the macro this time — Quote-Led wins because a manifesto can be one sentence as easily as it can be five, and the rotation rule pushes away from the Manifesto-named-twice pattern."*
+>
+> *"Theme rotation: Manifesto (dark · Inter Tight 900 display-heavy · red bleed) → Brutal (dark · Druk-condensed display · single yellow strike). Differs on display style and accent hue. Passes."*
+## Step 3 · Visual ruleset loaded
+`macrostructures.md` (Quote-Led), `component-cookbook.md` (H3 pull-quote hero), `typography.md` (display-heavy condensed), `color.md` (Brutal palette: dark, single bold accent), `microinteractions.md` (none — manifesto is typography-only), `anti-patterns.md`.
+## Step 4 · Hero enrichment
+> *"Enrichment: none. Quote-Led + Brutal is already loud; adding any visual would dilute the polemic. The 'no flashy stuff' constraint maps directly here — voice is the design."*
+## Step 5 · Preview
+```markdown
+**Hallmark · v0.6.0**
+- **Macrostructure** · Quote-Led
+- **Theme** · Brutal (near-black paper · Druk-condensed display · yellow strike accent)
+- **Enrichment** · none (typography only — voice is the design)
+- **Sections** · Masthead · Pull-quote (the hero) · Four principles · Working rules · Colophon
+- **Motion** · none — typography only
+- **Slop test** · 38 / 38 ✓
+- **Diversification** · differs from v1 (Manifesto/Manifesto) on macrostructure + display style + accent hue
+```
+## Step 6 · Macrostructure stamp
+```
+/* Hallmark · macrostructure: Quote-Led · H3 hero knobs: weight=display-condensed-bold, attribution=under-quote, length=20-words
+ * theme: Brutal · accent: strike-yellow ~3% (used as bleed-rule + one struck word)
+ * enrichment: none (typography only — voice is the design)
+ * studied: no · context: partial, inferred (audience + use) · v0.6.0
+ */
+```
+## What changed vs v1
+- **Macro:** Manifesto → Quote-Led. v1 leads with five numbered declarations + a bleed band; v2 leads with one twenty-word pull-quote + three supporting principles. Different rhetoric, same brief.
+- **Theme:** Manifesto (Inter Tight 900) → Brutal (Druk-condensed). Both dark, both display-heavy, but Brutal's condensed cap-height reads sharper for a single-quote hero. Accent shifts from red to yellow.
+- **Voice:** v1 says "WE ARE A STUDIO. WE ARE NOT A PLATFORM." (one of five lines); v2 stakes the page on "We make products that don't outlive their use" as the single hero claim.
+- **Section count:** v1 had ~9 sections; v2 has 5. Quote-Led wants brevity — the quote is the page.
+## What stayed the same
+- Brand and tone: Meridian, environmental products, "no flashy stuff."
+- Enrichment: none on both. Voice is the design.
+- Slop test: 38 / 38 ✓.
+- Dark paper. Single accent. No gradients. No rounded corners.

package/templates/vite/.howone/skills/hallmark/site/_tests/04-meridian-manifesto/index.html ADDED Viewed

@@ -0,0 +1,86 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Meridian — environmental product practice</title>
+  <meta name="description" content="A small environmental products design practice. We make products that don't outlive their use." />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" />
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <main class="page">
+    <header class="masthead">
+      <span class="masthead__brand">MERIDIAN <strong>·</strong> environmental product practice</span>
+      <span class="masthead__meta">Lisbon · est. 2026 · n.º I</span>
+    </header>
+    <section class="hero">
+      <h1 class="quote">
+        We make products that don't <span class="quote__strike">outlive</span> their use.
+        <span class="quote__attr">— The studio · the position we open with · this is the page.</span>
+      </h1>
+    </section>
+    <section class="principles" aria-labelledby="principles-h">
+      <h2 class="principles__head" id="principles-h">§ Four principles</h2>
+      <ol class="principles__list">
+        <li class="principle">
+          <span class="principle__num">01.</span>
+          <h3 class="principle__head">Fewer things, made well</h3>
+          <p class="principle__body">
+            We don't pitch ranges. We don't pitch families. The studio works on one product at a
+            time, finishes it, and starts the next. <strong>If we can't end-of-life it cleanly, we
+            don't make it.</strong>
+          </p>
+        </li>
+        <li class="principle">
+          <span class="principle__num">02.</span>
+          <h3 class="principle__head">Material is the brief</h3>
+          <p class="principle__body">
+            Every project starts with the material accounting — what it's made of, where it comes
+            from, how it returns. <strong>Form follows the spec, not the visual mood-board.</strong>
+            We send the LCA before we send the render.
+          </p>
+        </li>
+        <li class="principle">
+          <span class="principle__num">03.</span>
+          <h3 class="principle__head">Repair before replace</h3>
+          <p class="principle__body">
+            Every product ships with a service manual, an exploded BOM, and the tools to take it
+            apart. <strong>If it can't be opened, fixed, and closed again, it's not finished.</strong>
+            Repair is a feature, not a footnote.
+          </p>
+        </li>
+        <li class="principle">
+          <span class="principle__num">04.</span>
+          <h3 class="principle__head">Slow is the deliverable</h3>
+          <p class="principle__body">
+            We work with three clients a year. We turn the rest down. <strong>Slow is a craft
+            position before it is a marketing one</strong> — fast, in this practice, is what you do
+            when you don't yet know what you're making.
+          </p>
+        </li>
+      </ol>
+    </section>
+    <section class="rules" aria-labelledby="rules-h">
+      <h2 class="rules__head" id="rules-h">§ Working rules</h2>
+      <ol class="rules__list">
+        <li class="rules__item"><span class="rules__num">i.</span><span>The shop runs on a four-day week. Friday is for the workshop.</span></li>
+        <li class="rules__item"><span class="rules__num">ii.</span><span>We answer the email ourselves. There is no account manager.</span></li>
+        <li class="rules__item"><span class="rules__num">iii.</span><span>The first thing we send is the spec. The render comes after.</span></li>
+        <li class="rules__item"><span class="rules__num">iv.</span><span>We don't sign NDAs that prevent us from naming the material.</span></li>
+        <li class="rules__item"><span class="rules__num">v.</span><span>We publish what we learn. The notes are the practice.</span></li>
+      </ol>
+    </section>
+    <footer class="colophon">
+      <span>Meridian · Rua dos Anjos 38, Lisbon · the year twenty twenty-six</span>
+      <span><a href="mailto:hello@meridian.studio">hello@meridian.studio</a></span>
+    </footer>
+  </main>
+</body>
+</html>

package/templates/vite/.howone/skills/hallmark/site/_tests/04-meridian-manifesto/style.css ADDED Viewed

@@ -0,0 +1,262 @@
+/* Hallmark · macrostructure: Quote-Led · H3 hero knobs: weight=display-condensed-bold, attribution=under-quote, length=20-words
+ * theme: Brutal · accent: strike-yellow ~3% (used as bleed-rule + one struck word)
+ * enrichment: none (typography only — voice is the design)
+ * studied: no · context: partial, inferred (audience + use) · v0.6.0
+ */
+:root {
+  --color-paper: oklch(11% 0.005 60);
+  --color-paper-2: oklch(15% 0.006 60);
+  --color-rule: oklch(28% 0.006 60);
+  --color-ink: oklch(96% 0.005 90);
+  --color-ink-soft: oklch(72% 0.006 90);
+  --color-accent: oklch(86% 0.18 95);
+  --font-display: "Bebas Neue", "Oswald", "Barlow Condensed", "Helvetica Neue", "Arial Narrow", sans-serif;
+  --font-body: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
+  --space-3xs: 0.25rem;
+  --space-2xs: 0.5rem;
+  --space-xs: 0.75rem;
+  --space-sm: 1rem;
+  --space-md: 1.5rem;
+  --space-lg: 2rem;
+  --space-xl: 3rem;
+  --space-2xl: 4.5rem;
+  --space-3xl: 6.5rem;
+  --space-4xl: 9rem;
+  --measure-prose: 56ch;
+}
+* { box-sizing: border-box; }
+html, body { overflow-x: clip; }
+body {
+  margin: 0;
+  background: var(--color-paper);
+  color: var(--color-ink);
+  font-family: var(--font-body);
+  font-size: 1.0625rem;
+  line-height: 1.5;
+  font-weight: 400;
+  -webkit-font-smoothing: antialiased;
+}
+.page {
+  max-width: 80rem;
+  margin: 0 auto;
+  padding: 0;
+}
+/* Masthead */
+.masthead {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--space-md) var(--space-lg);
+  border-block-end: 1px solid var(--color-rule);
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--color-ink-soft);
+}
+.masthead__brand { color: var(--color-ink); font-weight: 500; }
+.masthead__brand strong {
+  color: var(--color-accent);
+  font-weight: 500;
+}
+.masthead__meta { font-variant-numeric: tabular-nums; }
+/* Hero — pull-quote */
+.hero {
+  padding: var(--space-4xl) var(--space-lg) var(--space-2xl);
+  border-block-end: 4px solid var(--color-accent);
+}
+.quote {
+  margin: 0;
+  font-family: var(--font-display);
+  font-size: clamp(3rem, 9vw, 7.5rem);
+  font-weight: 700;
+  line-height: 0.95;
+  letter-spacing: -0.01em;
+  text-transform: uppercase;
+  color: var(--color-ink);
+  max-width: 24ch;
+}
+.quote__strike {
+  position: relative;
+  display: inline-block;
+  color: var(--color-ink);
+}
+.quote__strike::after {
+  content: "";
+  position: absolute;
+  inset-inline: -0.05em;
+  inset-block-start: 50%;
+  height: 0.18em;
+  background: var(--color-accent);
+  transform: translateY(-30%) rotate(-2deg);
+}
+.quote__attr {
+  display: block;
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.4;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--color-ink-soft);
+  margin-block-start: var(--space-xl);
+}
+.quote__attr strong {
+  color: var(--color-ink);
+  font-weight: 500;
+}
+/* Principles section */
+.principles {
+  padding: var(--space-3xl) var(--space-lg);
+  border-block-end: 1px solid var(--color-rule);
+}
+.principles__head {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--color-ink-soft);
+  margin: 0 0 var(--space-2xl);
+}
+.principles__list {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--space-2xl) var(--space-xl);
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.principle {
+  border-block-start: 1px solid var(--color-rule);
+  padding-block-start: var(--space-md);
+}
+.principle__num {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  letter-spacing: 0.16em;
+  color: var(--color-accent);
+  display: block;
+  margin-block-end: var(--space-sm);
+}
+.principle__head {
+  font-family: var(--font-display);
+  font-size: clamp(1.75rem, 3vw, 2.5rem);
+  font-weight: 700;
+  letter-spacing: -0.005em;
+  text-transform: uppercase;
+  line-height: 0.95;
+  margin: 0 0 var(--space-md);
+  color: var(--color-ink);
+}
+.principle__body {
+  font-family: var(--font-body);
+  font-size: 1rem;
+  line-height: 1.6;
+  color: var(--color-ink-soft);
+  max-width: var(--measure-prose);
+  margin: 0;
+}
+.principle__body strong { color: var(--color-ink); font-weight: 500; }
+/* Working rules — terse list */
+.rules {
+  padding: var(--space-2xl) var(--space-lg);
+  background: var(--color-paper-2);
+  border-block-end: 1px solid var(--color-rule);
+}
+.rules__head {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--color-ink-soft);
+  margin: 0 0 var(--space-lg);
+}
+.rules__list {
+  display: grid;
+  gap: 0;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.rules__item {
+  display: grid;
+  grid-template-columns: 4ch 1fr;
+  gap: var(--space-md);
+  padding: var(--space-md) 0;
+  border-block-end: 1px solid var(--color-rule);
+  font-family: var(--font-body);
+  font-size: 1.0625rem;
+  line-height: 1.4;
+  color: var(--color-ink);
+}
+.rules__item:last-child { border-block-end: none; }
+.rules__num {
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+  letter-spacing: 0.06em;
+  color: var(--color-accent);
+}
+/* Colophon */
+.colophon {
+  padding: var(--space-md) var(--space-lg);
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--space-sm);
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--color-ink-soft);
+}
+.colophon a {
+  color: var(--color-ink-soft);
+  text-decoration: none;
+  transition: color 100ms ease;
+}
+.colophon a:hover, .colophon a:focus-visible {
+  color: var(--color-accent);
+}
+.colophon a:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 3px;
+}
+@media (max-width: 48rem) {
+  .principles__list { grid-template-columns: 1fr; }
+  .hero { padding: var(--space-2xl) var(--space-lg); }
+}

package/templates/vite/.howone/skills/hallmark/site/_tests/05-tracejam-saas/brief.md ADDED Viewed

@@ -0,0 +1,63 @@
+# Test 05 v2 — Tracejam (SaaS observability)
+## The prompt (verbatim, same as v1)
+> "Build a landing page for Tracejam — a tracing/observability tool for distributed systems. Audience: SREs and platform engineers. Use case: try it / contact sales. Tone: technical."
+## Step 0 · Pre-flight
+> *"No pre-flight signals — proceeding with full Hallmark stack."*
+## Step 1 · Design-context gate — fully answered
+Audience, use, tone all explicit.
+## Step 2.5 · Project memory rotation
+> *"Previous run on this brief picked Bento Grid + Pastel + Tier-A flame chart. Picking from {Workbench, Stat-Led, Long Document} for the macro this time — Workbench wins because the brief says 'try it' and Workbench is structured to walk an SRE through a single workflow rather than show six surfaces in a tile grid."*
+>
+> *"Theme rotation: Pastel (light · geometric-sans · cool-indigo) → Midnight (dark · geometric-sans · phosphor-cyan). Differs on paper band (light → dark) and accent hue (indigo → phosphor-cyan). Two of three axes differ. Passes."*
+## Step 3 · Visual ruleset loaded
+`macrostructures.md` (Workbench), `component-cookbook.md` (F2 sticky-scroll, H1 left-bias hero, code-card archetype), `typography.md` (Midnight pairing — Geist Mono display + Geist body), `color.md` (Midnight palette — dark cool greys), `microinteractions.md` (active-step highlight via `IntersectionObserver`, copy-to-clipboard on code lines, focus-visible rings), `anti-patterns.md`.
+## Step 4 · Hero enrichment
+> *"Enrichment: Tier-A pure-CSS pinned dashboard panel — a hand-built waterfall trace rendered as flex bars. Different from v1's clipped-edge browser frame: this one sits in the right column, pinned during scroll, swapping its content as the user scrolls past each step. Same Tier-A custom-craft, different layout role."*
+## Step 5 · Preview
+```markdown
+**Hallmark · v0.6.0**
+- **Macrostructure** · Workbench
+- **Theme** · Midnight (dark cool paper · Geist Mono display · phosphor-cyan accent ~3%)
+- **Enrichment** · Tier-A pure-CSS sticky dashboard panel (3-state, swaps on scroll)
+- **Sections** · Masthead · Hero · Sticky-walkthrough (3 steps × pinned panel) · Integrations · Pricing · Colophon
+- **Motion** · sticky-step active highlight · copy-to-clipboard on code (2 primitives)
+- **Slop test** · 38 / 38 ✓
+- **Diversification** · differs from v1 (Bento Grid/Pastel) on macrostructure + paper band + accent hue
+```
+## Step 6 · Macrostructure stamp
+```
+/* Hallmark · macrostructure: Workbench · F2 sticky-scroll knobs: pinned=right, content=trace-panel, steps=3
+ * theme: Midnight · accent: phosphor-cyan ~3% · enrichment: tier-A CSS-art trace panel (sticky-pinned, 3-state)
+ * studied: no · context: explicit · v0.6.0
+ */
+```
+## What changed vs v1
+- **Macro:** Bento Grid → Workbench. v1 split Tracejam into six asymmetric tiles (stat / sparkline / quote / code / integrations / spotlight); v2 walks the user through three SRE-shaped steps, each pinned alongside a swapping dashboard panel.
+- **Theme:** Pastel → Midnight. v1's light-cool paper with indigo accent becomes dark cool paper with phosphor-cyan. The dashboard mockup reads more credible on dark surface for a tracing tool.
+- **Enrichment:** v1's right-clipped browser frame becomes a sticky 3-state panel that updates as the user scrolls past each step. Same hand-built CSS-art content; different layout role.
+- **Pricing:** v1 had no pricing on the page; v2 adds a 3-tier table (Free / Team / Scale) — Workbench can carry it without becoming a Bento.
+## What stayed the same
+- Brand: Tracejam, distributed tracing, SRE audience.
+- Tier-A custom-craft (no Lottie, no real video).
+- Slop test: 38 / 38 ✓.

package/templates/vite/.howone/skills/hallmark/site/_tests/05-tracejam-saas/index.html ADDED Viewed

@@ -0,0 +1,167 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Tracejam — distributed tracing that explains itself</title>
+  <meta name="description" content="Open the trace, find the span that regressed, and read why — in plain text — without a glossary, a YAML diff, or a status-page hunt." />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&family=Geist:wght@400;500;600&display=swap" />
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <main class="page">
+    <header class="masthead">
+      <span class="masthead__brand"><span class="dot"></span>tracejam · v0.4</span>
+      <nav class="masthead__nav">
+        <a href="#walkthrough">Walkthrough</a>
+        <a href="#integrations">Integrations</a>
+        <a href="#pricing">Pricing</a>
+        <a href="#">Docs</a>
+      </nav>
+    </header>
+    <section class="hero">
+      <div class="hero__copy">
+        <p class="hero__eyebrow">For SREs &amp; platform engineers</p>
+        <h1 class="hero__head">Distributed tracing that <em>explains itself.</em></h1>
+        <p class="hero__sub">
+          Open the trace. Find the span that regressed. Read why — in plain text — without a glossary,
+          a YAML diff, or a status-page hunt. The post-mortem starts in the trace, not in a doc.
+        </p>
+        <div class="hero__cta">
+          <a class="btn btn--primary" href="#">Try it free <span aria-hidden="true">→</span></a>
+          <a class="btn" href="#">Talk to sales</a>
+        </div>
+      </div>
+      <aside class="hero__panel" aria-label="Sample trace preview">
+        <div class="hero__panel-head"><span>trace · 9c3a72ef</span><span>4.21 s</span></div>
+        <div class="trace">
+          <div class="span"><span class="span__label">api.checkout</span><span class="span__bar" style="--w:100%"><style>.span__bar::after { width: var(--w); }</style></span><span class="span__time">4.21s</span></div>
+          <div class="span"><span class="span__label">↳ auth.verify</span><span class="span__bar"><span style="position:absolute;inset:0;width:18%;background:var(--color-accent)"></span></span><span class="span__time">762ms</span></div>
+          <div class="span span--err"><span class="span__label">↳ pricing.quote</span><span class="span__bar"><span style="position:absolute;inset:0;width:78%;background:var(--color-error)"></span></span><span class="span__time">3.28s</span></div>
+          <div class="span span--warn"><span class="span__label">&nbsp;&nbsp;↳ rates.fx</span><span class="span__bar"><span style="position:absolute;inset:0;width:62%;background:var(--color-warn)"></span></span><span class="span__time">2.71s</span></div>
+          <div class="span"><span class="span__label">↳ ledger.write</span><span class="span__bar"><span style="position:absolute;inset:0;width:6%;background:var(--color-accent)"></span></span><span class="span__time">240ms</span></div>
+        </div>
+      </aside>
+    </section>
+    <section class="workbench" id="walkthrough">
+      <div class="steps">
+        <article class="step">
+          <p class="step__num">step 01 · open</p>
+          <h2 class="step__head">Open the trace, not a dashboard.</h2>
+          <p class="step__body">
+            Drop a trace ID, a request URL, or a five-second time window. Tracejam pulls the spans
+            from your collector and renders them inline — no dashboard hop, no link to Grafana,
+            no separate logs window. The trace is the unit of work.
+          </p>
+          <div class="step__code"><span class="c"># by trace id</span><br/><span class="k">$</span> tracejam open 9c3a72ef</div>
+        </article>
+        <article class="step">
+          <p class="step__num">step 02 · find</p>
+          <h2 class="step__head">Find the regressed span.</h2>
+          <p class="step__body">
+            Tracejam ranks spans by <strong>p99 deviation against your service's seven-day baseline</strong>.
+            The first one in the list is almost always the problem. No filters to set; the baseline
+            is precomputed every five minutes per service.
+          </p>
+          <div class="step__code"><span class="c"># top 3 regressed spans this hour</span><br/><span class="k">$</span> tracejam top --window 1h</div>
+        </article>
+        <article class="step">
+          <p class="step__num">step 03 · read</p>
+          <h2 class="step__head">Read why, in plain text.</h2>
+          <p class="step__body">
+            Each span carries an <strong>auto-generated explainer</strong>: which dependency
+            regressed, which version of which service, which deploy correlates, the last clean run,
+            and the diff between then and now. Plain text, copy-paste ready into a post-mortem.
+          </p>
+          <div class="step__code"><span class="c"># dump the explainer</span><br/><span class="k">$</span> tracejam why <span class="s">"pricing.quote"</span></div>
+        </article>
+      </div>
+      <aside class="pinned" aria-label="Pinned trace panel">
+        <header class="pinned__head">
+          <span>trace · 9c3a72ef</span>
+          <span class="pinned__chip">REGRESSED</span>
+        </header>
+        <div class="pinned__body">
+          <div class="span"><span class="span__label">api.checkout</span><span class="span__bar"><span style="position:absolute;inset:0;width:100%;background:var(--color-accent)"></span></span><span class="span__time">4.21s</span></div>
+          <div class="span"><span class="span__label">↳ auth.verify</span><span class="span__bar"><span style="position:absolute;inset:0;width:18%;background:var(--color-accent)"></span></span><span class="span__time">762ms</span></div>
+          <div class="span span--err"><span class="span__label">↳ pricing.quote</span><span class="span__bar"><span style="position:absolute;inset:0;width:78%;background:var(--color-error)"></span></span><span class="span__time">3.28s</span></div>
+          <div class="span span--warn"><span class="span__label">&nbsp;&nbsp;↳ rates.fx</span><span class="span__bar"><span style="position:absolute;inset:0;width:62%;background:var(--color-warn)"></span></span><span class="span__time">2.71s</span></div>
+          <div class="span"><span class="span__label">↳ ledger.write</span><span class="span__bar"><span style="position:absolute;inset:0;width:6%;background:var(--color-accent)"></span></span><span class="span__time">240ms</span></div>
+        </div>
+        <p class="pinned__why">
+          <strong>WHY:</strong> rates.fx p99 doubled at 14:02 UTC. Correlates with deploy
+          rates-svc@v1.34.2 — which lowered the FX cache TTL from 5 m to 30 s. Roll back, or raise
+          TTL. Last clean run: 13:57 UTC (2.41 s end-to-end).
+        </p>
+      </aside>
+    </section>
+    <section class="integrations" id="integrations">
+      <h2 class="integrations__head">Reads from</h2>
+      <ul class="integrations__grid">
+        <li>OpenTelemetry</li>
+        <li>Jaeger</li>
+        <li>Zipkin</li>
+        <li>AWS X-Ray</li>
+        <li>Tempo</li>
+        <li>Datadog APM</li>
+        <li>Honeycomb</li>
+        <li>New Relic</li>
+      </ul>
+    </section>
+    <section class="pricing" id="pricing">
+      <h2 class="pricing__head">Pricing</h2>
+      <div class="tiers">
+        <article class="tier">
+          <h3 class="tier__name">Free</h3>
+          <p class="tier__price">$0 <span class="per">forever</span></p>
+          <ul class="tier__list">
+            <li>50 GB trace ingest / month</li>
+            <li>7-day retention</li>
+            <li>Single project</li>
+            <li>Community Slack</li>
+          </ul>
+          <a class="btn" href="#">Start free</a>
+        </article>
+        <article class="tier tier--feature">
+          <h3 class="tier__name">Team</h3>
+          <p class="tier__price">$799 <span class="per">/ month</span></p>
+          <ul class="tier__list">
+            <li>500 GB ingest / month</li>
+            <li>30-day retention</li>
+            <li>Unlimited projects</li>
+            <li>Auto-explainers</li>
+            <li>SLO alerting</li>
+          </ul>
+          <a class="btn btn--primary" href="#">14-day trial</a>
+        </article>
+        <article class="tier">
+          <h3 class="tier__name">Scale</h3>
+          <p class="tier__price">Custom</p>
+          <ul class="tier__list">
+            <li>Custom ingest</li>
+            <li>365-day retention</li>
+            <li>SOC2 / ISO27001</li>
+            <li>Dedicated infra</li>
+            <li>24/7 oncall</li>
+          </ul>
+          <a class="btn" href="#">Talk to sales</a>
+        </article>
+      </div>
+    </section>
+    <footer class="colophon">
+      <span>Tracejam · v0.4 · made in Lisbon &amp; Berlin</span>
+      <span><a href="#">docs</a> · <a href="#">changelog</a> · <a href="#">status</a> · <a href="#">github</a></span>
+    </footer>
+  </main>
+</body>
+</html>