@polderlabs/bizar 8.0.0 → 9.0.0

package/.claude/worktrees/kanban-overhaul/bizar-dash/.graphifyignore

@@ -0,0 +1,40 @@
+# Auto-generated by the graphify mod (no LLM API key detected).
+# Code-only mode: restricts extraction to source files (processed locally
+# via tree-sitter — no API key needed). Delete this file and re-run once
+# you've set one of: GEMINI_API_KEY, GOOGLE_API_KEY, MOONSHOT_API_KEY,
+# ANTHROPIC_API_KEY, OPENAI_API_KEY, DEEPSEEK_API_KEY, AZURE_OPENAI_API_KEY.
+
+# Heavy / vendored dirs to skip entirely
+node_modules/
+.git/
+.bizar/
+.agents/
+dist/
+build/
+coverage/
+
+# Agent system prompts — Markdown with YAML frontmatter, not project docs.
+config/agents/
+
+# Non-code file types — graphify would need an LLM for these
+*.md
+*.markdown
+*.rst
+*.txt
+*.pdf
+*.docx
+*.html
+*.htm
+
+# Image / binary assets
+*.png
+*.jpg
+*.jpeg
+*.gif
+*.svg
+*.webp
+*.ico
+*.mp4
+*.mp3
+*.wav
+*.pdf

package/.claude/worktrees/kanban-overhaul/bizar-dash/.obsidian/README.md

@@ -0,0 +1,14 @@
+# bizar-dash — Obsidian Vault
+
+Long-term memory for this project's AI agents.
+
+## Structure
+
+- `daily/` — daily journal entries (one file per day)
+- `decisions/` — architecture / design decisions
+- `patterns/` — code patterns learned
+- `api/` — API contracts discovered
+- `tasks/` — per-task learnings
+
+All notes are plain markdown with YAML frontmatter.
+Agents maintain this vault automatically.

package/.claude/worktrees/kanban-overhaul/bizar-dash/.obsidian/daily/2026-06-25.md

@@ -0,0 +1,9 @@
+---
+id: daily-2026-06-25
+title: Today
+tags: 
+created: "2026-06-26T02:02:33.893Z"
+updated: "2026-06-26T02:02:33.893Z"
+---
+
+# Started v3.19.0

package/.claude/worktrees/kanban-overhaul/bizar-dash/.obsidian/vault.json

@@ -0,0 +1,7 @@
+{
+  "name": "bizar-dash",
+  "version": "1.0.0",
+  "format": "obsidian-vault",
+  "createdAt": "2026-06-26T02:02:33.872Z",
+  "managedBy": "bizar-dash"
+}

package/.claude/worktrees/kanban-overhaul/bizar-dash/.od-skills/web-prototype-e1429c1737/SKILL.md

@@ -0,0 +1,103 @@
+---
+name: web-prototype
+description: |
+  General-purpose desktop web prototype. Single self-contained HTML file built
+  by copying the seed `assets/template.html` and pasting section layouts from
+  `references/layouts.md`. Default for any landing / marketing / docs / SaaS
+  page when no more specific skill matches.
+triggers:
+  - "prototype"
+  - "mockup"
+  - "landing"
+  - "single page"
+  - "marketing page"
+  - "homepage"
+od:
+  mode: prototype
+  platform: desktop
+  scenario: design
+  preview:
+    type: html
+    entry: index.html
+  design_system:
+    requires: true
+    sections: [color, typography, layout, components]
+---
+
+# Web Prototype Skill
+
+Produce a single, self-contained HTML prototype using the bundled seed and layout library — **not** by writing CSS from scratch. The seed already encodes good defaults (typography, spacing, accent budget). Your job is to compose it.
+
+## Resource map
+
+```
+web-prototype/
+├── SKILL.md                ← you're reading this
+├── assets/
+│   └── template.html       ← seed: tokens + class system + chrome (READ FIRST)
+└── references/
+    ├── layouts.md          ← 8 paste-ready section skeletons
+    └── checklist.md        ← P0/P1/P2 self-review
+```
+
+## Workflow
+
+### Step 0 — Pre-flight (do this once before writing anything)
+
+1. **Read `assets/template.html` end-to-end** — at minimum through the `<style>` block. The class inventory at the top of `references/layouts.md` lists every class that must be defined there; if one is missing, add it to `<style>` rather than re-defining it inline on every section.
+2. **Read `references/layouts.md`** so you know which section skeletons exist. Don't write a section type that isn't covered — pick the closest layout and adapt.
+3. **Read the active DESIGN.md** (already injected into your system prompt). Map its colors to the six `:root` variables in the seed; don't introduce new tokens.
+
+### Step 1 — Prepare the artifact from the seed
+
+Choose one kebab-case artifact slug before composing the page. Use `assets/template.html` as the seed for the final artifact HTML.
+
+Do not write a project-root HTML draft with file-write before emitting the final `<artifact>`. The live-artifact output is the canonical HTML file for this generation turn; an extra `index.html`, `cast.html`, or brief-derived draft can be stranded beside it as an orphan.
+
+Replace the six `:root` variables with the active design system's tokens. Replace the page `<title>` and the topnav brand.
+
+### Step 2 — Plan the section list
+
+**Pick layouts before writing copy.** Default rhythms (from `layouts.md`):
+
+| Page kind | Default rhythm |
+|---|---|
+| Landing | 1 hero → 3 features → 4 stats *or* 5 quote → custom split → 6 cta |
+| Marketing / editorial | 1 hero-center → 7 log list → 6 cta |
+| Pricing | 1 hero-center → 8 comparison table → 6 cta |
+| Docs index | 1 hero-center → 7 log list (sections of docs) → 6 cta |
+
+State the chosen list in one sentence to the user *before* writing — they can redirect cheaply now and not after 200 lines of HTML.
+
+### Step 3 — Paste and fill
+
+For each chosen layout, copy the `<section>` block from `layouts.md` into `<main id="content">` of the artifact HTML. Replace bracketed `[REPLACE]` strings with real, specific copy from the user's brief. **No filler** — if a slot is empty, the section is the wrong choice; pick a different layout.
+
+### Step 4 — Self-check
+
+Run through `references/checklist.md` top to bottom. Every P0 item must pass before you move on. P1 items should pass; P2 are bonus.
+
+### Step 5 — Emit the artifact
+
+Wrap the completed HTML in `<artifact>` tags using the artifact slug as the `identifier`. One sentence before describing what's there. Stop after `</artifact>`.
+
+## Hard rules (the seed protects most of these — don't fight it)
+
+- **Single accent, used at most twice per screen.** Eyebrow + primary CTA is the default budget.
+- **Display font is serif** (Iowan Old Style / Charter / Georgia in the seed). Sans for body. Mono for numerics, captions, eyebrows.
+- **Image placeholders, not external URLs.** Use the `.ph-img` class — never link to a stock photo CDN.
+- **Mobile reflow already works** via the seed's media query at 920px. Don't break it by adding fixed widths.
+- **`data-od-id` on every `<section>`** so comment mode can target it.
+
+## Output contract
+
+```
+<artifact identifier="kebab-case-slug" type="text/html" title="Human Title">
+<!doctype html>
+<html>...</html>
+</artifact>
+```
+
+Open Design derives the canonical HTML artifact from this identifier. Do not also write another root HTML file for the same generation turn.
+
+One sentence before the artifact. Nothing after.

package/.claude/worktrees/kanban-overhaul/bizar-dash/.od-skills/web-prototype-e1429c1737/assets/template.html

@@ -0,0 +1,338 @@
+<!doctype html>
+<!--
+  OD web-prototype seed.
+
+  Copy this file to <project>/index.html, then fill `<main id="content">` by
+  pasting blocks from `references/layouts.md`. Every class referenced in
+  layouts.md is defined here — DO NOT remove unused ones unless you also
+  remove their callers, and DO NOT invent new global classes (use inline
+  style="…" for one-off tweaks).
+
+  Theme tokens at the top of `<style>` are the *only* place to set palette
+  and type. They map cleanly onto a DESIGN.md — when an active design system
+  is injected, swap these six variables and everything reflows.
+-->
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>[REPLACE] Page title · brand</title>
+  <style>
+    /* ─── tokens ─────────────────────────────────────────────────────────
+       Six variables. Bind them to the active DESIGN.md and stop.
+       Do not introduce raw hex anywhere else in this file. */
+    :root {
+      --bg:      #fafaf7;   /* page background — never #fff */
+      --surface: #ffffff;   /* cards, modals, raised areas */
+      --fg:      #1a1916;   /* primary text — never #000 */
+      --muted:   #6b6964;   /* secondary text, captions */
+      --border:  #e8e5df;   /* hairlines, dividers */
+      --accent:  #c96442;   /* one accent — used at most 2× per screen */
+
+      /* derived — do not change */
+      --accent-soft: color-mix(in oklch, var(--accent) 14%, transparent);
+      --fg-soft:     color-mix(in oklch, var(--fg) 6%, transparent);
+
+      /* type — display = serif (default), body = sans, mono for numerics */
+      --font-display: 'Iowan Old Style', 'Charter', Georgia, 'Times New Roman', serif;
+      --font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+      --font-mono:    ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;
+
+      /* scale — clamp() so it works at 1280, 1440, 1920 without media queries */
+      --fs-h1: clamp(44px, 6vw, 76px);
+      --fs-h2: clamp(32px, 4vw, 48px);
+      --fs-h3: 22px;
+      --fs-lead: 19px;
+      --fs-body: 16px;
+      --fs-meta: 13px;
+
+      /* spacing — 8-point grid */
+      --gap-xs: 8px;
+      --gap-sm: 12px;
+      --gap-md: 20px;
+      --gap-lg: 32px;
+      --gap-xl: 56px;
+      --gap-2xl: 96px;
+      --container: 1120px;
+      --gutter: 32px;
+
+      --radius: 10px;
+      --radius-lg: 16px;
+    }
+
+    /* ─── reset & base ──────────────────────────────────────────────── */
+    *, *::before, *::after { box-sizing: border-box; }
+    html { -webkit-text-size-adjust: 100%; }
+    body {
+      margin: 0;
+      background: var(--bg);
+      color: var(--fg);
+      font-family: var(--font-body);
+      font-size: var(--fs-body);
+      line-height: 1.55;
+      text-rendering: optimizeLegibility;
+      -webkit-font-smoothing: antialiased;
+    }
+    img, svg { display: block; max-width: 100%; }
+    a { color: inherit; text-decoration: none; }
+    button { font: inherit; cursor: pointer; }
+    p { text-wrap: pretty; }
+    h1, h2, h3, h4 { text-wrap: balance; }
+
+    /* ─── layout primitives ─────────────────────────────────────────── */
+    .container {
+      max-width: var(--container);
+      margin-inline: auto;
+      padding-inline: var(--gutter);
+    }
+    .section {
+      padding-block: clamp(48px, 8vw, var(--gap-2xl));
+    }
+    .section + .section { border-top: 1px solid var(--border); }
+    .stack { display: flex; flex-direction: column; }
+    .stack > * + * { margin-top: var(--gap-md); }
+    .row { display: flex; align-items: center; gap: var(--gap-md); }
+    .row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); }
+    .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-lg); }
+    .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-lg); }
+    .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-md); }
+    .grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--gap-xl); align-items: start; }
+    .grid-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: var(--gap-xl); align-items: start; }
+    @media (max-width: 920px) {
+      .grid-2, .grid-3, .grid-4, .grid-2-1, .grid-1-2 { grid-template-columns: 1fr; }
+    }
+
+    /* ─── type ──────────────────────────────────────────────────────── */
+    .h1, h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -0.02em; margin: 0; }
+    .h2, h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -0.015em; margin: 0; }
+    .h3, h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; margin: 0; }
+    .lead   { font-size: var(--fs-lead); line-height: 1.55; color: var(--muted); max-width: 60ch; margin: 0; }
+    .eyebrow {
+      font-family: var(--font-mono);
+      font-size: 12px;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: var(--accent);
+      margin: 0 0 var(--gap-md);
+    }
+    .meta { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--muted); }
+    .num  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+
+    /* ─── chrome: nav + footer ──────────────────────────────────────── */
+    .topnav {
+      position: sticky; top: 0; z-index: 10;
+      background: color-mix(in oklch, var(--bg) 92%, transparent);
+      backdrop-filter: blur(12px);
+      border-bottom: 1px solid var(--border);
+    }
+    .topnav-inner { display: flex; align-items: center; justify-content: space-between; padding-block: 14px; }
+    .topnav .logo { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
+    .topnav nav { display: flex; gap: var(--gap-lg); }
+    .topnav nav a { font-size: 14px; color: var(--muted); }
+    .topnav nav a:hover { color: var(--fg); }
+    .pagefoot { padding-block: var(--gap-xl); color: var(--muted); font-size: 13px; border-top: 1px solid var(--border); }
+    .pagefoot .row-between { flex-wrap: wrap; gap: var(--gap-md); }
+
+    /* ─── buttons ───────────────────────────────────────────────────── */
+    .btn {
+      display: inline-flex; align-items: center; gap: 8px;
+      padding: 11px 20px;
+      border-radius: var(--radius);
+      border: 1px solid transparent;
+      font-size: 15px;
+      font-weight: 500;
+      letter-spacing: -0.005em;
+      transition: transform 0.05s ease, background 0.15s ease, border-color 0.15s ease;
+    }
+    .btn:active { transform: translateY(1px); }
+    .btn-primary { background: var(--accent); color: var(--surface); border-color: var(--accent); }
+    .btn-primary:hover { background: color-mix(in oklch, var(--accent) 88%, black); }
+    .btn-secondary { background: transparent; color: var(--fg); border-color: var(--border); }
+    .btn-secondary:hover { border-color: var(--fg); }
+    .btn-ghost { background: transparent; color: var(--fg); border-color: transparent; padding-inline: 8px; }
+    .btn-ghost:hover { color: var(--accent); }
+    .btn-arrow::after { content: '→'; transition: transform 0.15s ease; }
+    .btn-arrow:hover::after { transform: translateX(2px); }
+
+    /* ─── card / surface ────────────────────────────────────────────── */
+    .card {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-lg);
+      padding: 28px;
+    }
+    .card-flat { background: transparent; border: 0; padding: 0; }
+    .card-rule { background: transparent; border: 0; border-top: 1px solid var(--fg); padding: 24px 0 0; border-radius: 0; }
+
+    /* ─── feature cell (icon + h3 + p) ──────────────────────────────── */
+    .feature .feature-mark {
+      width: 36px; height: 36px;
+      display: grid; place-items: center;
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      color: var(--accent);
+      margin-bottom: var(--gap-md);
+    }
+    .feature .feature-mark svg { width: 18px; height: 18px; }
+    .feature h3 { margin-bottom: 6px; }
+    .feature p  { margin: 0; color: var(--muted); font-size: 15px; }
+
+    /* ─── stat (big number + label) ─────────────────────────────────── */
+    .stat .stat-num {
+      font-family: var(--font-display);
+      font-size: clamp(56px, 8vw, 96px);
+      line-height: 0.95;
+      letter-spacing: -0.04em;
+      color: var(--accent);
+      font-weight: 600;
+    }
+    .stat .stat-label { color: var(--muted); font-size: 14px; margin-top: 8px; max-width: 24ch; }
+    .stat .stat-unit  { font-size: 0.5em; opacity: 0.7; margin-left: 2px; }
+
+    /* ─── quote / testimonial ───────────────────────────────────────── */
+    .quote {
+      font-family: var(--font-display);
+      font-size: clamp(24px, 2.6vw, 32px);
+      line-height: 1.32;
+      letter-spacing: -0.01em;
+      max-width: 28ch;
+    }
+    .quote-author { color: var(--muted); font-size: 14px; margin-top: var(--gap-md); }
+    .quote-mark   {
+      font-family: var(--font-display);
+      font-size: 140px; line-height: 0.7;
+      color: var(--accent); opacity: 0.18;
+      margin-bottom: -28px;
+    }
+
+    /* ─── pill / badge / tag ────────────────────────────────────────── */
+    .pill {
+      display: inline-flex; align-items: center; gap: 6px;
+      padding: 4px 10px;
+      background: var(--accent-soft);
+      color: var(--accent);
+      border-radius: 999px;
+      font-family: var(--font-mono);
+      font-size: 11px;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+    }
+    .tag {
+      display: inline-flex; align-items: center;
+      padding: 4px 10px;
+      background: transparent;
+      color: var(--muted);
+      border: 1px solid var(--border);
+      border-radius: 999px;
+      font-size: 12px;
+    }
+
+    /* ─── form field ────────────────────────────────────────────────── */
+    .field { display: flex; flex-direction: column; gap: 6px; }
+    .field label { font-size: 13px; color: var(--muted); }
+    .input, .textarea {
+      width: 100%;
+      padding: 11px 14px;
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      background: var(--surface);
+      color: var(--fg);
+      font: inherit;
+      font-size: 15px;
+    }
+    .input:focus, .textarea:focus {
+      outline: 2px solid var(--accent-soft);
+      border-color: var(--accent);
+    }
+    .textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
+
+    /* ─── table (data-style, no chrome) ─────────────────────────────── */
+    .ds-table { width: 100%; border-collapse: collapse; font-size: 14px; }
+    .ds-table th, .ds-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); }
+    .ds-table th { color: var(--muted); font-weight: 500; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
+    .ds-table tbody tr:hover { background: var(--fg-soft); }
+    .ds-table .num-col { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
+
+    /* ─── image placeholder (DS-tinted block, never broken <img>) ──── */
+    .ph-img {
+      background:
+        linear-gradient(135deg, var(--accent-soft), var(--fg-soft)),
+        var(--surface);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-lg);
+      aspect-ratio: 16 / 10;
+      display: grid; place-items: center;
+      color: var(--muted);
+      font-family: var(--font-mono);
+      font-size: 12px;
+      letter-spacing: 0.04em;
+    }
+    .ph-img.square    { aspect-ratio: 1 / 1; }
+    .ph-img.portrait  { aspect-ratio: 3 / 4; }
+    .ph-img.wide      { aspect-ratio: 16 / 9; }
+
+    /* ─── divider ───────────────────────────────────────────────────── */
+    .rule  { border: 0; border-top: 1px solid var(--border); margin: 0; }
+    .rule-strong { border: 0; border-top: 1px solid var(--fg); margin: 0; }
+
+    /* ─── hero variants used by layouts.md ──────────────────────────── */
+    .hero          { padding-block: clamp(80px, 12vw, 160px); }
+    .hero-center   { text-align: center; max-width: 32ch; margin-inline: auto; }
+    .hero h1       { margin-bottom: var(--gap-md); }
+    .hero .lead    { margin-bottom: var(--gap-lg); }
+    .hero-cta      { display: inline-flex; gap: var(--gap-sm); flex-wrap: wrap; }
+    .hero-center .hero-cta { justify-content: center; }
+    .hero-split    { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-2xl); align-items: center; }
+    @media (max-width: 920px) { .hero-split { grid-template-columns: 1fr; } }
+
+    /* ─── log row (newsletter, blog list, changelog) ────────────────── */
+    .log-row { display: grid; grid-template-columns: 120px 1fr 100px; gap: var(--gap-lg); padding: 22px 0; border-top: 1px solid var(--border); align-items: baseline; }
+    .log-row .meta { color: var(--muted); }
+    .log-row h3 { font-size: 19px; }
+    .log-row .pull { text-align: right; }
+  </style>
+</head>
+<body>
+  <header class="topnav" data-od-id="topnav">
+    <div class="container topnav-inner">
+      <span class="logo">[REPLACE] Brand</span>
+      <nav>
+        <a href="#">[REPLACE] Link 1</a>
+        <a href="#">[REPLACE] Link 2</a>
+        <a href="#">[REPLACE] Link 3</a>
+      </nav>
+      <button class="btn btn-primary">[REPLACE] CTA</button>
+    </div>
+  </header>
+
+  <main id="content">
+    <!--
+      ┌─────────────────────────────────────────────────────────────────┐
+      │  PASTE LAYOUTS FROM references/layouts.md HERE.                │
+      │  ► Each layout block is a self-contained `<section>` —         │
+      │    drop in 3–6 of them per page.                                │
+      │  ► Always lead with one hero (Layout 1 or 2).                   │
+      │  ► End with a CTA strip + footer (Layout 6 / footer below).     │
+      └─────────────────────────────────────────────────────────────────┘
+    -->
+    <section class="section hero" data-od-id="hero">
+      <div class="container hero-center">
+        <p class="eyebrow">[REPLACE] Eyebrow</p>
+        <h1>[REPLACE] One sharp sentence about what this is.</h1>
+        <p class="lead">[REPLACE] One subhead sentence — concrete value, not a tagline.</p>
+        <div class="hero-cta">
+          <button class="btn btn-primary">[REPLACE] Primary CTA</button>
+          <button class="btn btn-secondary">[REPLACE] Secondary</button>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <footer class="pagefoot" data-od-id="footer">
+    <div class="container row-between">
+      <span>© [REPLACE] Brand · [REPLACE] Year</span>
+      <span class="meta">[REPLACE] tagline · contact@example.com</span>
+    </div>
+  </footer>
+</body>
+</html>

package/.claude/worktrees/kanban-overhaul/bizar-dash/.od-skills/web-prototype-e1429c1737/example.html

@@ -0,0 +1,81 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Tomato — focused work timer</title>
+  <style>
+    :root {
+      --bg: #fafaf9; --fg: #1c1b1a; --muted: #6b6964; --border: #e6e4e0;
+      --accent: #c96442; --surface: #ffffff;
+    }
+    * { box-sizing: border-box; }
+    body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.55 -apple-system, system-ui, sans-serif; }
+    header, main, footer { max-width: 1080px; margin: 0 auto; padding: 0 32px; }
+    header { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; }
+    .logo { font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
+    nav a { color: var(--fg); text-decoration: none; margin-left: 24px; font-size: 14px; }
+    nav a:hover { color: var(--accent); }
+    .hero { padding: 96px 0 80px; text-align: center; }
+    .hero h1 { font-size: clamp(44px, 6vw, 76px); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 20px; max-width: 18ch; margin-inline: auto; }
+    .hero p { color: var(--muted); font-size: 19px; max-width: 52ch; margin: 0 auto 32px; }
+    .cta { display: inline-flex; gap: 12px; }
+    button { font: inherit; cursor: pointer; padding: 12px 22px; border-radius: 8px; }
+    .btn-primary { background: var(--accent); color: white; border: 1px solid var(--accent); font-weight: 500; }
+    .btn-secondary { background: transparent; color: var(--fg); border: 1px solid var(--border); }
+    .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 56px 0 96px; }
+    @media (max-width: 720px) { .features { grid-template-columns: 1fr; } }
+    .feature { padding: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
+    .feature .icon { width: 36px; height: 36px; border-radius: 8px; background: var(--accent); margin-bottom: 16px; opacity: 0.12; }
+    .feature h3 { margin: 0 0 8px; font-size: 17px; letter-spacing: -0.01em; }
+    .feature p { margin: 0; color: var(--muted); font-size: 14px; }
+    .closing { padding: 64px 0 96px; text-align: center; border-top: 1px solid var(--border); }
+    .closing h2 { font-size: 32px; margin: 0 0 12px; letter-spacing: -0.01em; }
+    .closing p { color: var(--muted); margin: 0 0 28px; }
+    footer { padding: 32px; color: var(--muted); font-size: 13px; text-align: center; }
+  </style>
+</head>
+<body>
+  <header data-od-id="topnav">
+    <span class="logo">🍅 Tomato</span>
+    <nav>
+      <a href="#features">Features</a>
+      <a href="#pricing">Pricing</a>
+      <a href="#login">Sign in</a>
+    </nav>
+  </header>
+  <main>
+    <section class="hero" data-od-id="hero">
+      <h1>Twenty-five minutes at a time.</h1>
+      <p>The pomodoro timer that actually keeps your hands off Slack. Block notifications, log every cycle, ship more before lunch.</p>
+      <div class="cta">
+        <button class="btn-primary">Start a session</button>
+        <button class="btn-secondary">See how it works</button>
+      </div>
+    </section>
+    <section class="features" id="features">
+      <div class="feature" data-od-id="feature-block">
+        <div class="icon"></div>
+        <h3>Block on, not off</h3>
+        <p>Slack and email go quiet for 25 minutes. They come back loud at the break, with a digest.</p>
+      </div>
+      <div class="feature" data-od-id="feature-stats">
+        <div class="icon"></div>
+        <h3>Stats that don't lie</h3>
+        <p>Weekly review tells you which days you actually shipped versus which you only seemed busy.</p>
+      </div>
+      <div class="feature" data-od-id="feature-team">
+        <div class="icon"></div>
+        <h3>Team-friendly silences</h3>
+        <p>Your status auto-updates so teammates know when to ask, when to wait, and when you're done.</p>
+      </div>
+    </section>
+    <section class="closing" data-od-id="closing">
+      <h2>Stop measuring meetings. Start measuring focus.</h2>
+      <p>Free for solo. $4/mo per teammate after that.</p>
+      <button class="btn-primary">Try Tomato free</button>
+    </section>
+  </main>
+  <footer>© Tomato Labs · Made for people who'd rather be making.</footer>
+</body>
+</html>