you-wrapped 0.1.0 → 0.2.0

package/README.md

@@ -36,6 +36,9 @@ you-wrapped-out/
   portrait.json        the analysis          (with --synthesize)
   wrapped.html         your portrait         (with --synthesize)
   wrapped.share.html   redacted, safe to post
+
+wrapped.html has two modes: swipeable story cards (arrows, tap, or swipe) and a
+full long-read with every finding at length. Press R to switch.
 ```
 
 ## Usage

package/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: you-wrapped
-description: Build an evidence-grounded portrait of the user from everything you can reach — their Mac (iMessage, Notes, browser, photo metadata) plus any connected services (Gmail, Calendar, Drive, Slack, Granola, Linear). Use when someone asks you to "understand me", wants a personal year-in-review or "wrapped", a self-audit, or asks what their own data says about them.
+description: Build an evidence-grounded portrait of the user from everything you can reach — their Mac (iMessage, Notes, browser, photo metadata) plus any connected services (Gmail, Calendar, Drive, Slack, Granola, Linear). Use when someone asks you to "understand me", wants a personal year-in-review or "wrapped", a self-audit, asks what their own data says about them, or says "do a you-wrapped on me".
 ---
 
 # you-wrapped
@@ -17,17 +17,9 @@ connectors alone misses what they write at 1am.
 ## Phase 1 — local extraction (the CLI)
 
 ```bash
-# Published (once it's on npm):
 npx you-wrapped --days 400 --out ./wrapped
-
-# Not published yet — run from a local checkout:
-npx /path/to/you-wrapped --days 400 --out ./wrapped
 ```
 
-**Verify which form applies before running.** `npm view you-wrapped version` — if that
-404s, the package is unpublished and you must use the local path. Do not run a bare
-`npx you-wrapped` against an unclaimed name.
-
 Reads iMessage (including `attributedBody` — ~44% of messages, invisible to naive
 scrapers), Apple Notes, Contacts, Chrome + Safari history split by device, and photo
 metadata. Writes `signals.json`, `evidence.local.md`, `prompt.md`.
@@ -63,8 +55,9 @@ Don't summarize `signals.json` back to them. Counts are not insight. Work the me
 many domains. State it in one sentence, then show it in four unrelated places. If no single
 trait explains most of the data, say so rather than inventing one.
 
-**2. Find the scissor.** Two trends moving in opposite directions that shouldn't.
-Commitment language rising while requests-for-help fall is the common one. Quantify it.
+**2. Find the scissor.** Two trends moving in opposite directions that shouldn't — output up while
+recovery down, breadth up while depth down, promises up while asks down. Find whichever pair *this*
+data actually shows rather than reaching for a template. Quantify it.
 
 **3. Find a dated collision.** Cross-reference sources for a specific day where two
 commitments overlapped and one broke — photo GPS against a written regret, travel against a
@@ -89,7 +82,7 @@ it.** Let them. This is the part that earns the rest.
 Write the portrait as JSON matching the schema in `prompt.md`, then:
 
 ```bash
-npx /path/to/you-wrapped --render portrait.json --out ./wrapped
+npx you-wrapped --render portrait.json --out ./wrapped
 ```
 
 Produces `wrapped.html` and a redacted `wrapped.share.html`. Tell them to read the share

package/bin/cli.mjs

@@ -7,7 +7,7 @@ import { analyze } from '../src/analyze.mjs';
 import { SYSTEM, buildUserPrompt } from '../src/prompt.mjs';
 import { render } from '../src/render.mjs';
 import { scrubDeep, coarsenPlaces, harvestNames, labelFor } from '../src/scrub.mjs';
-import { installSkill, skillInstalled, checkFullDiskAccess, openPrivacyPane, hostApp, nodeOk, resolveInvocation } from '../src/setup.mjs';
+import { installSkill, skillInstalled, checkFullDiskAccess, openPrivacyPane, hostApp, nodeOk, resolveInvocation, hasClaudeCLI, insideClaude, launchClaude } from '../src/setup.mjs';
 
 const args = process.argv.slice(2);
 const has = f => args.includes(f);
@@ -34,6 +34,7 @@ ${c.b}you-wrapped${c.x} — a portrait of your year, from the record your Mac al
   --out DIR       where to write                  (default ./you-wrapped-out)
   --no-share      skip the redacted share copy
   --yes           skip prompts
+  --no-launch     don't hand off to Claude Code when done
 
 ${c.d}Everything runs locally. Nothing is uploaded unless you pass --synthesize,
 and even then only aggregate signals and short quotes are sent.${c.x}
@@ -79,6 +80,11 @@ if (has('--install-skill')) {
 // ── render-only path
 if (has('--render')) {
   const p = JSON.parse(readFileSync(resolve(val('--render')), 'utf8'));
+  // pick up signals.json if it's sitting next to the portrait
+  if (!p.__signals) {
+    const sp = join(OUT, 'signals.json');
+    if (existsSync(sp)) { try { p.__signals = JSON.parse(readFileSync(sp, 'utf8')).sources; } catch {} }
+  }
   mkdirSync(OUT, { recursive: true });
   writeFileSync(join(OUT, 'wrapped.html'), render(p, { stats: {} }));
   log(`${c.g}✓${c.x} ${join(OUT, 'wrapped.html')}`);
@@ -213,11 +219,13 @@ if (has('--synthesize')) {
 // ── 5. render
 if (portrait) {
   const stats = { line: statLine, footer: `Assembled ${new Date().toISOString().slice(0, 10)} from ${statLine}.` };
-  writeFileSync(join(OUT, 'wrapped.html'), render(portrait, { stats }));
+  // the renderer draws its charts from the real signals, not from the model's prose
+  const withSignals = { ...portrait, __signals: profile.sources };
+  writeFileSync(join(OUT, 'wrapped.html'), render(withSignals, { stats }));
 
   if (!has('--no-share')) {
     const names = harvestNames(contacts.data, m.topPeople, m.topChats);
-    const shared = scrubDeep(portrait, names);
+    const shared = { ...scrubDeep(portrait, names), __signals: profile.sources };
     writeFileSync(join(OUT, 'wrapped.share.html'), render(shared, { shareMode: true, stats: { line: statLine, footer: stats.footer } }));
   }
   try { execFileSync('open', [join(OUT, 'wrapped.html')]); } catch {}
@@ -234,3 +242,19 @@ ${portrait ? `  ${c.d}wrapped.html${c.x}         your portrait
 
 ${c.d}${statLine}${c.x}
 `);
+
+// ── 6. hand off to Claude Code
+// The skill was written to disk above, and a *new* claude process loads skills
+// at startup — so launching now is what makes this a single command.
+if (!portrait && !has('--no-launch')) {
+  if (insideClaude()) {
+    log(`${c.d}  Already inside Claude Code — tell me "do a you-wrapped on me" and I'll read ${OUT}.${c.x}\n`);
+  } else if (hasClaudeCLI()) {
+    log(`${c.o}  Handing off to Claude Code…${c.x}\n`);
+    try { launchClaude(OUT); }
+    catch { log(`${c.d}  Couldn't launch. Run ${c.b}claude${c.x}${c.d} and say "do a you-wrapped on me".${c.x}\n`); }
+  } else {
+    log(`  ${c.b}Next:${c.x} paste ${c.d}${join(OUT, 'prompt.md')}${c.x} into Claude.`);
+    log(`  ${c.d}Or install Claude Code (claude.ai/code) and rerun for the one-command flow.${c.x}\n`);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "you-wrapped",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Turn the record your Mac already keeps into a portrait of your year. Runs entirely on your machine.",
   "type": "module",
   "bin": { "you-wrapped": "./bin/cli.mjs" },

package/src/charts.mjs

@@ -0,0 +1,124 @@
+// Inline SVG charts drawn from the real extracted signals — not from the model's
+// prose. If the numbers aren't in signals.json, the chart doesn't render at all.
+
+const esc = s => String(s ?? '').replace(/[&<>"]/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));
+const shortMonth = m => { const [y, mo] = m.split('-'); return `${['', 'JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'][+mo]} ’${y.slice(2)}`; };
+
+/** Two-series line chart. Used for the commitment/delegation scissor. */
+export function trendChart(series, keys, labels, colors) {
+  if (!series || series.length < 3) return '';
+  const W = 900, H = 300, PL = 46, PR = 20, PT = 18, PB = 34;
+  const all = series.flatMap(r => keys.map(k => r[k] ?? 0));
+  const lo = Math.max(0, Math.floor(Math.min(...all) - 1));
+  const hi = Math.ceil(Math.max(...all) + 1);
+  const x = i => PL + (i / (series.length - 1)) * (W - PL - PR);
+  const y = v => PT + (1 - (v - lo) / (hi - lo || 1)) * (H - PT - PB);
+  const path = k => series.map((r, i) => `${i ? 'L' : 'M'}${x(i).toFixed(1)},${y(r[k] ?? 0).toFixed(1)}`).join(' ');
+  const grid = [0, .25, .5, .75, 1].map(f => {
+    const v = lo + f * (hi - lo);
+    return `<line x1="${PL}" y1="${y(v)}" x2="${W - PR}" y2="${y(v)}" stroke="currentColor" opacity=".18"/>
+            <text x="${PL - 8}" y="${y(v) + 4}" text-anchor="end" class="ax">${v.toFixed(0)}</text>`;
+  }).join('');
+
+  return `<figure class="chart">
+    <svg viewBox="0 0 ${W} ${H}" role="img" aria-label="${esc(labels.join(' versus '))} over time">
+      ${grid}
+      ${keys.map((k, n) => `<path d="${path(k)}" fill="none" stroke="${colors[n]}"
+        stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round" class="ln"/>`).join('')}
+      ${keys.map((k, n) => {
+        const last = series[series.length - 1];
+        return `<circle cx="${x(series.length - 1)}" cy="${y(last[k] ?? 0)}" r="4" fill="${colors[n]}"/>`;
+      }).join('')}
+      <text x="${PL}" y="${H - 8}" class="ax">${esc(shortMonth(series[0].month))}</text>
+      <text x="${W - PR}" y="${H - 8}" text-anchor="end" class="ax">${esc(shortMonth(series[series.length - 1].month))}</text>
+    </svg>
+    <figcaption>${keys.map((k, n) =>
+      `<span><i style="background:${colors[n]}"></i>${esc(labels[n])} — ${series[0][k]} → ${series[series.length - 1][k]}</span>`).join('')}
+      <span class="unit">per 1,000 messages sent</span></figcaption>
+  </figure>`;
+}
+
+/** 24-bar histogram of when you actually send messages. */
+export function hourChart(hours) {
+  if (!hours || hours.length !== 24) return '';
+  const max = Math.max(...hours) || 1;
+  const total = hours.reduce((a, b) => a + b, 0) || 1;
+  const bars = hours.map((v, h) => {
+    const pct = (v / max) * 100;
+    const night = h >= 22 || h <= 3;
+    return `<div class="hbar" style="--h:${pct.toFixed(1)}%" data-night="${night}">
+      <i></i><span>${h === 0 ? '12a' : h === 12 ? '12p' : h > 12 ? h - 12 : h}</span></div>`;
+  }).join('');
+  const late = hours.reduce((s, v, h) => s + ((h >= 22 || h <= 3) ? v : 0), 0);
+  return `<figure class="chart hours">
+    <div class="hgrid">${bars}</div>
+    <figcaption><span><i style="background:#FF4D3D"></i>10pm–3am — ${(late / total * 100).toFixed(1)}% of everything you send</span></figcaption>
+  </figure>`;
+}
+
+/** Where the body actually was, by photo GPS. */
+export function placeTable(clusters, labelFor) {
+  if (!clusters?.length) return '';
+  const rows = clusters.slice(0, 8).map(c => {
+    const days = c.days || [];
+    return `<tr><td>${esc(labelFor(c.lat, c.lon))}</td>
+      <td class="num">${c.photos.toLocaleString()}</td>
+      <td class="dim">${days.length} day${days.length === 1 ? '' : 's'}</td>
+      <td class="dim mono">${esc(days[0] || '')}${days.length > 1 ? ` → ${esc(days[days.length - 1])}` : ''}</td></tr>`;
+  }).join('');
+  return `<table class="tbl"><thead><tr><th>place</th><th class="num">frames</th><th>days</th><th>range</th></tr></thead>
+    <tbody>${rows}</tbody></table>`;
+}
+
+/** Things written down repeatedly and never closed. */
+export function recurringTable(items) {
+  if (!items?.length) return '';
+  const rows = items.slice(0, 10).map(r =>
+    `<tr><td>${esc(r.item)}</td><td class="num">${r.days.length}×</td>
+     <td class="dim mono">${esc(r.days[0])} → ${esc(r.days[r.days.length - 1])}</td></tr>`).join('');
+  return `<table class="tbl"><thead><tr><th>you wrote this down again and again</th><th class="num">times</th><th>span</th></tr></thead>
+    <tbody>${rows}</tbody></table>`;
+}
+
+/** Desktop mind vs phone mind. */
+export function deviceSplit(b) {
+  if (!b || (!b.desktopQueries && !b.mobileQueries)) return '';
+  const m = b.mobileShare ?? 0;
+  return `<figure class="chart">
+    <div class="split"><div class="sd" style="width:${100 - m}%"><b>${b.desktopQueries?.toLocaleString() ?? 0}</b><span>desktop</span></div>
+      <div class="sm" style="width:${m}%"><b>${b.mobileQueries?.toLocaleString() ?? 0}</b><span>phone</span></div></div>
+    <figcaption><span class="unit">${m}% of your searching happens on your phone</span></figcaption>
+  </figure>`;
+}
+
+export const CHART_CSS = `
+.chart{margin:26px 0 30px}
+.chart svg{display:block;width:100%;height:auto;overflow:visible}
+.chart .ln{stroke-dasharray:2400;stroke-dashoffset:2400;animation:draw 1.5s cubic-bezier(.3,.7,.3,1) forwards}
+@keyframes draw{to{stroke-dashoffset:0}}
+.ax{font-family:var(--mono);font-size:11px;fill:currentColor;opacity:.5}
+.chart figcaption{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;
+  opacity:.72;margin-top:11px;line-height:1.5}
+.chart figcaption i{display:inline-block;width:20px;height:2px;vertical-align:middle;margin-right:8px}
+.chart .unit{opacity:.55}
+.hgrid{display:grid;grid-template-columns:repeat(24,1fr);gap:2px;align-items:end;height:132px}
+.hbar{display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:6px}
+.hbar i{display:block;height:var(--h);background:currentColor;opacity:.55;border-radius:1px;min-height:2px}
+.hbar[data-night="true"] i{background:var(--ac);opacity:1}
+.hbar span{font-family:var(--mono);font-size:8px;opacity:.45;text-align:center}
+@media(max-width:640px){.hbar span{display:none}}
+.split{display:flex;height:66px;border-radius:3px;overflow:hidden;border:1px solid currentColor}
+.split>div{display:flex;flex-direction:column;justify-content:center;padding:0 16px;min-width:0}
+.split b{font-family:var(--narrow);font-size:22px;font-weight:700}
+.split span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.6}
+.sd{background:transparent}.sm{background:var(--ac);color:var(--bg)}
+.tbl{width:100%;border-collapse:collapse;margin:18px 0 8px;font-size:13.5px}
+.tbl th{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
+  opacity:.5;text-align:left;font-weight:400;padding:0 10px 9px 0;border-bottom:1px solid currentColor}
+.tbl td{padding:9px 10px 9px 0;border-bottom:1px solid currentColor;border-color:color-mix(in srgb,currentColor 16%,transparent)}
+.tbl .num{text-align:right;font-family:var(--mono);font-size:13px}
+.tbl th.num{text-align:right}
+.tbl .dim{opacity:.6;font-size:12.5px}
+.tbl .mono{font-family:var(--mono);font-size:12px}
+@media(prefers-reduced-motion:reduce){.chart .ln{stroke-dashoffset:0;animation:none}}
+`;

package/src/prompt.mjs

@@ -10,9 +10,10 @@ METHOD — follow it in order:
    domains. Find theirs. State it in one sentence. Then show it appearing in at least four unrelated
    places. If you cannot find one trait that explains most of the data, say so rather than inventing one.
 
-2. FIND THE SCISSOR. Look for two trends that move in opposite directions and should not. (Common one:
-   commitments rising while requests-for-help fall.) A scissor is where a person's stated intent and
-   their actual behavior diverge over time. Quantify it.
+2. FIND THE SCISSOR. Look for two trends that move in opposite directions and should not — e.g. output
+   rising while recovery falls, breadth rising while depth falls, or promises rising while asks fall.
+   A scissor is where stated intent and actual behavior diverge over time. Find whichever pair the data
+   actually shows; don't force a template. Quantify it.
 
 3. FIND A DATED COLLISION. Somewhere in the data there is usually a specific day where two commitments
    overlapped and one broke. Cross-reference sources — location against written regret, calendar against
@@ -55,10 +56,10 @@ Write the portrait. Return only JSON:
 {
   "headline_quote": "their own most revealing line, verbatim",
   "headline_quote_source": "where and when",
-  "one_trait": { "name": "...", "thesis": "one sentence", "domains": [{"label":"...","evidence":"..."}] },
-  "scissor": { "thesis": "...", "detail": "...", "numbers": [{"label":"...","from":"...","to":"..."}] },
+  "one_trait": { "name": "...", "thesis": "one sentence", "domains": [{"label":"...","evidence":"..."}], "evidence": [{"quote":"their exact words","source":"iMessage|Notes|search|meeting","date":"YYYY-MM-DD"}] },
+  "scissor": { "thesis": "...", "detail": "...", "numbers": [{"label":"...","from":"...","to":"..."}], "evidence": [{"quote":"...","source":"...","date":"..."}] },
   "collision": { "date": "...", "thesis": "...", "detail": "...", "verification": "which two sources agree" },
-  "insight_vs_capacity": { "thesis": "...", "predicted": "...", "happened": "...", "implication": "..." },
+  "insight_vs_capacity": { "thesis": "...", "predicted": "...", "happened": "...", "implication": "...", "evidence": [{"quote":"...","source":"...","date":"..."}] },
   "unseen_wins": [{"label":"...","detail":"..."}],
   "distortion": { "thesis": "...", "evidence": "..." },
   "human_thing": { "thesis": "...", "private": ["..."], "public": ["..."], "note": "why these are next to each other" },

package/src/render.mjs

@@ -1,125 +1,462 @@
-// Renders the portrait JSON to a standalone HTML file. No external assets beyond
-// two webfonts, which degrade to system faces offline.
+// Story-card renderer. Full-bleed vertical cards, tap/swipe/arrow to advance —
+// the format people already know from year-in-review recaps.
+// Visual identity is deliberately its own: flat risograph color fields and heavy
+// condensed type, not gradient blobs.
+
+import { trendChart, hourChart, placeTable, recurringTable, deviceSplit, CHART_CSS } from './charts.mjs';
+import { labelFor } from './scrub.mjs';
 
 const esc = s => String(s ?? '').replace(/[&<>"]/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));
+const has = v => v != null && v !== '' && !(Array.isArray(v) && !v.length);
+
+/** Receipts. Every card that makes a claim shows where the claim came from. */
+const cite = (src) => src ? `<p class="src">${esc(src)}</p>` : '';
+const quotes = (list) => !list?.length ? '' : `<div class="ev">${list.slice(0, 3).map(e =>
+  `<blockquote class="evq">${esc(e.quote || e)}<cite>${esc(e.source || '')}${e.date ? ` · ${esc(e.date)}` : ''}</cite></blockquote>`).join('')}</div>`;
+
+// Each card gets a flat duotone. Ordered so adjacent cards always contrast hard.
+const THEMES = [
+  { bg: '#0E0E12', fg: '#F2EFE6', ac: '#E8FF43' },  // ink / acid
+  { bg: '#E8FF43', fg: '#0E0E12', ac: '#0E0E12' },  // acid
+  { bg: '#FF4D3D', fg: '#FFF5EF', ac: '#0E0E12' },  // vermilion
+  { bg: '#1B3BFF', fg: '#F2EFE6', ac: '#E8FF43' },  // ultramarine
+  { bg: '#F2EFE6', fg: '#0E0E12', ac: '#FF4D3D' },  // bone
+  { bg: '#00C48A', fg: '#04150F', ac: '#04150F' },  // green
+  { bg: '#FF8A3D', fg: '#1A0A00', ac: '#1A0A00' },  // amber
+  { bg: '#B14BFF', fg: '#F7F0FF', ac: '#E8FF43' },  // violet
+  { bg: '#0E0E12', fg: '#F2EFE6', ac: '#00C48A' },
+  { bg: '#FF2D78', fg: '#FFF0F6', ac: '#0E0E12' },  // magenta
+];
+
+/** Build the card list from the portrait, skipping anything the model left empty. */
+function buildCards(p, stats, shareMode, sig = {}) {
+  const M = sig.messages || {}, B = sig.browser || {}, PH = sig.photos || {}, NT = sig.notes || {};
+  const cards = [];
+  const add = (kind, html, opts = {}) => cards.push({ kind, html, ...opts });
+
+  add('cover', `
+    <div class="eyebrow">${esc(stats.year || new Date().getFullYear())}</div>
+    <h1 class="giant">YOU,<br>WRAPPED</h1>
+    <p class="sub">${esc(stats.line || '')}</p>
+    `);
+
+  if (has(p.headline_quote)) add('quote', `
+    <div class="eyebrow">you wrote this</div>
+    <blockquote>${esc(p.headline_quote)}</blockquote>
+    <p class="cite">${esc(p.headline_quote_source || '')}</p>`);
+
+  if (p.one_trait?.name) {
+    add('trait', `
+      <div class="eyebrow">the one thing</div>
+      <h2 class="big">${esc(p.one_trait.name)}</h2>
+      <p class="lede">${esc(p.one_trait.thesis)}</p>
+      ${quotes(p.one_trait.evidence)}`);
+    const d = p.one_trait.domains || [];
+    if (d.length) add('list', `
+      <div class="eyebrow">it shows up everywhere</div>
+      <ul class="ticks">${d.slice(0, 4).map(x =>
+        `<li><b>${esc(x.label)}</b><span>${esc(x.evidence)}</span></li>`).join('')}</ul>`);
+  }
+
+  if (p.scissor?.thesis) {
+    const n = p.scissor.numbers || [];
+    add('stat', `
+      <div class="eyebrow">the trend you can't see from inside</div>
+      <h2 class="mid">${esc(p.scissor.thesis)}</h2>
+      ${n.length ? `<div class="figures">${n.slice(0, 2).map(x => `
+        <div class="fig"><div class="fig-n">${esc(x.from)}<span class="arrow">→</span>${esc(x.to)}</div>
+        <div class="fig-l">${esc(x.label)}</div></div>`).join('')}</div>` : ''}
+      <p class="small">${esc(p.scissor.detail || '')}</p>
+      ${cite('measured across every message you sent')}`);
+
+    const chart = trendChart(M.series, ['commitment', 'delegation'],
+      ['promising ("I\'ll", "on it")', 'asking ("can you")'], ['currentColor', 'var(--ac)']);
+    if (chart) add('chart', `
+      <div class="eyebrow">ten months, month by month</div>
+      ${chart}
+      ${quotes(p.scissor?.evidence)}
+      ${cite(`from ${(M.sent || 0).toLocaleString()} messages you sent`)}`);
+  }
+
+  if (M.hours?.length === 24) add('chart', `
+    <div class="eyebrow">when you're actually working</div>
+    ${hourChart(M.hours)}
+    <p class="small">${esc(M.lateNightShare ?? 0)}% of what you send goes out between 10pm and 3am. ${esc(M.weekendShare ?? 0)}% lands on a weekend.</p>
+    ${cite('every timestamped message, bucketed by hour')}`);
+
+  if (p.collision?.date) {
+    add('collision', `
+      <div class="eyebrow">the day it collided</div>
+      <h2 class="date">${esc(p.collision.date)}</h2>
+      <p class="lede">${esc(p.collision.thesis)}</p>
+      <p class="small">${esc(p.collision.detail || '')}</p>
+      ${p.collision.verification ? `<p class="src">✓ ${esc(p.collision.verification)}</p>` : ''}`);
+    const places = placeTable(PH.clusters, labelFor);
+    if (places) add('data', `
+      <div class="eyebrow">where your body actually was</div>
+      ${places}
+      ${cite(`${(PH.geotagged || 0).toLocaleString()} geotagged frames · location never leaves this file`)}`);
+  }
+
+  if (p.insight_vs_capacity?.thesis) add('split', `
+    <div class="eyebrow">you already knew</div>
+    <div class="vs">
+      <div><span class="tag">you predicted</span><p>${esc(p.insight_vs_capacity.predicted)}</p></div>
+      <div><span class="tag alt">what happened</span><p>${esc(p.insight_vs_capacity.happened)}</p></div>
+    </div>
+    <p class="small">${esc(p.insight_vs_capacity.implication || '')}</p>
+    ${quotes(p.insight_vs_capacity.evidence)}`);
+
+  const dsplit = deviceSplit(B);
+  if (dsplit) add('chart', `
+    <div class="eyebrow">two different minds</div>
+    ${dsplit}
+    <p class="small">Desktop is where you produce. Your phone is where you think, look things up, and search at night.</p>
+    ${cite('unique search queries, split by device')}`);
+
+  const rec = recurringTable(NT.recurring);
+  if (rec) add('data', `
+    <div class="eyebrow">what you keep not finishing</div>
+    ${rec}
+    ${cite(`from ${(NT.count || 0).toLocaleString()} notes — items rewritten on 3+ separate days`)}`);
+
+  const wins = p.unseen_wins || [];
+  if (wins.length) add('list', `
+    <div class="eyebrow">what you've been discounting</div>
+    ${p.distortion?.evidence ? `<p class="small" style="margin-bottom:14px">${esc(p.distortion.evidence)}</p>` : ''}
+    <ul class="ticks">${wins.slice(0, 5).map(x =>
+      `<li><b>${esc(x.label)}</b><span>${esc(x.detail)}</span></li>`).join('')}</ul>`);
+
+  if (p.human_thing?.thesis) add('human', `
+    <div class="eyebrow">two things that rhyme</div>
+    <h2 class="mid">${esc(p.human_thing.thesis)}</h2>
+    <div class="vs">
+      <div><span class="tag">privately</span>${(p.human_thing.private || []).slice(0, 3).map(x => `<p>${esc(x)}</p>`).join('')}</div>
+      <div><span class="tag alt">publicly</span>${(p.human_thing.public || []).slice(0, 3).map(x => `<p>${esc(x)}</p>`).join('')}</div>
+    </div>`);
+
+  const acts = p.actions || [];
+  if (acts.length) add('list', `
+    <div class="eyebrow">two levers: reduce load, or hand it off</div>
+    <ul class="ticks num">${acts.slice(0, 4).map((a, i) =>
+      `<li><b>${String(i + 1).padStart(2, '0')} ${esc(a.title)}</b><span>${esc(a.body)}</span></li>`).join('')}</ul>`);
+
+  add('end', `
+    <h2 class="big">that's your year.</h2>
+    ${has(p.closing) ? `<p class="lede">${esc(p.closing)}</p>` : ''}
+    <div class="actions">
+      <button class="btn" data-read>read the full thing</button>
+      <button class="btn ghost" onclick="window.print()">save as PDF</button>
+    </div>
+    <p class="cite">npx you-wrapped</p>`);
+
+  return cards;
+}
+
+/**
+ * The long read. Cards are for swiping and sharing; this is where nothing gets
+ * dropped — every field the model returned, at full length.
+ */
+function longForm(p, stats, shareMode) {
+  const S = (eyebrow, title, body) => !body ? '' : `
+    <section class="rs"><div class="rw">
+      <div class="reyebrow">${esc(eyebrow)}</div>
+      ${title ? `<h2>${esc(title)}</h2>` : ''}
+      ${body}
+    </div></section>`;
+  const paras = a => (a || []).map(x => `<p>${esc(x)}</p>`).join('');
+  const grid = items => !items?.length ? '' : `<div class="rgrid">${items.map(x =>
+    `<div class="rcell"><div class="rk">${esc(x.label)}</div><p>${esc(x.detail || x.evidence)}</p></div>`).join('')}</div>`;
+
+  return `
+  <div id="read" hidden>
+    <header class="rhead"><div class="rw">
+      <button class="btn back" data-story>← back to cards</button>
+      ${shareMode ? '<span class="rbadge">share copy · identifiers removed</span>' : ''}
+      <h1>You, Wrapped</h1>
+      <p class="rsub">${esc(stats.line || '')}</p>
+      ${has(p.headline_quote) ? `<blockquote class="rquote">“${esc(p.headline_quote)}”
+        <cite>${esc(p.headline_quote_source || '')}</cite></blockquote>` : ''}
+    </div></header>
+
+    ${S('the one thing', p.one_trait?.name, p.one_trait ? `
+      <p class="rlede">${esc(p.one_trait.thesis)}</p>${grid(p.one_trait.domains)}` : '')}
+
+    ${S('the measurement', p.scissor?.thesis, p.scissor ? `
+      <p>${esc(p.scissor.detail || '')}</p>
+      ${(p.scissor.numbers || []).length ? `<div class="rstats">${p.scissor.numbers.map(x =>
+        `<div class="rstat"><div class="rn">${esc(x.from)} → ${esc(x.to)}</div>
+         <div class="rl">${esc(x.label)}</div></div>`).join('')}</div>` : ''}` : '')}
+
+    ${S('the collision', p.collision?.date ? `${p.collision.date} — ${p.collision.thesis}` : '', p.collision ? `
+      <p>${esc(p.collision.detail || '')}</p>
+      ${p.collision.verification ? `<div class="rpull"><p>${esc(p.collision.verification)}</p></div>` : ''}` : '')}
+
+    ${S('why awareness isn’t the fix', p.insight_vs_capacity?.thesis, p.insight_vs_capacity ? `
+      <div class="rcols">
+        <div><h3>What you predicted</h3><p>${esc(p.insight_vs_capacity.predicted)}</p></div>
+        <div><h3 class="ac">What happened</h3><p>${esc(p.insight_vs_capacity.happened)}</p></div>
+      </div>
+      <p class="rlede">${esc(p.insight_vs_capacity.implication || '')}</p>` : '')}
+
+    ${S('hard to see from inside', p.distortion?.thesis, (p.unseen_wins || []).length ? `
+      ${p.distortion?.evidence ? `<p>${esc(p.distortion.evidence)}</p>` : ''}
+      ${grid(p.unseen_wins)}` : '')}
+
+    ${S('two things that rhyme', p.human_thing?.thesis, p.human_thing ? `
+      <div class="rcols">
+        <div><h3>Written privately</h3>${paras(p.human_thing.private)}</div>
+        <div><h3 class="ac">Made publicly</h3>${paras(p.human_thing.public)}</div>
+      </div>
+      <p class="rlede">${esc(p.human_thing.note || '')}</p>` : '')}
+
+    ${S('what actually moves', 'Two levers. Neither is trying harder.', (p.actions || []).length ? `
+      <p>Reduce load, or transfer ownership.</p>
+      ${p.actions.map((a, i) => `<div class="ract">
+        <div class="rnum">${String(a.n ?? i + 1).padStart(2, '0')}</div>
+        <div><h4>${esc(a.title)}</h4><p>${esc(a.body)}</p></div></div>`).join('')}` : '')}
+
+    ${S('the limits of this', 'What this can’t see.', (p.limits || []).length ? `
+      ${grid(p.limits)}
+      ${has(p.closing) ? `<p class="rlede">${esc(p.closing)}</p>` : ''}` : '')}
+
+    <footer class="rfoot"><div class="rw">
+      <p>${esc(stats.footer || '')}</p>
+      <p>Generated locally by <b>you-wrapped</b>. Your data never left this machine.</p>
+      <button class="btn back" data-story>← back to cards</button>
+    </div></footer>
+  </div>`;
+}
 
 export function render(p, { shareMode = false, stats = {} } = {}) {
-  const S = k => p?.[k] ?? {};
-  const list = k => Array.isArray(p?.[k]) ? p[k] : [];
+  const cards = buildCards(p, stats, shareMode, p.__signals || {});
+  const n = cards.length;
 
-  const sec = (n, eyebrow, inner) => `
-  <section><div class="wrap">
-    <div class="slate rv"><b>${n}</b><span>${esc(eyebrow)}</span></div>
-    ${inner}
-  </div></section>`;
+  const slides = cards.map((c, i) => {
+    const t = THEMES[i % THEMES.length];
+    return `<section class="card ${c.kind}" data-i="${i}"
+      style="--bg:${t.bg};--fg:${t.fg};--ac:${t.ac}">
+      <div class="inner">${c.html}</div></section>`;
+  }).join('\n');
 
-  const cells = items => `<div class="grid two rv">${items.map(i =>
-    `<div class="cell"><div class="k">${esc(i.label)}</div><p>${esc(i.detail || i.evidence)}</p></div>`).join('')}</div>`;
+  const bars = cards.map((_, i) => `<i data-b="${i}"></i>`).join('');
 
   return `<!DOCTYPE html><html lang="en"><head>
-<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
-<title>${shareMode ? 'A year, assembled' : 'You — an assembly'}</title>
+<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
+<title>${shareMode ? 'A year, wrapped' : 'You, Wrapped'}</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=Manrope:wght@300;400;700;800&family=Geist+Mono:wght@400&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800;900&family=Archivo+Narrow:wght@700&family=Geist+Mono:wght@400&display=swap" rel="stylesheet">
 <style>
-:root{--ink:#0B0D10;--panel:#13171C;--line:#242B34;--bone:#E9E5DD;--dim:#868E99;--dimmer:#5A626C;--flare:#FF6B2C;--scope:#5CC8D7;
---display:"Manrope","Helvetica Neue",Arial,sans-serif;--mono:"Geist Mono",ui-monospace,Menlo,monospace}
-*{box-sizing:border-box}body{margin:0;background:var(--ink);color:var(--bone);font-family:var(--display);font-weight:300;font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
-.wrap{max-width:1080px;margin:0 auto;padding:0 28px}
-section{padding:100px 0;border-top:1px solid var(--line)}section:first-of-type{border-top:none}
-.slate{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dimmer);display:flex;gap:14px;margin-bottom:26px;flex-wrap:wrap}
-.slate b{color:var(--flare);font-weight:400}
-h2{font-weight:800;font-size:clamp(27px,3.5vw,42px);line-height:1.1;letter-spacing:-.026em;margin:0 0 22px;max-width:22ch}
-p{margin:0 0 21px;max-width:64ch;color:#CFCBC3}p.lead{font-size:20.5px;color:var(--bone)}
-strong{font-weight:700;color:var(--bone)}em{font-style:normal;color:var(--flare)}
-.hero{padding:120px 0 92px}
-.quote{font-weight:300;font-size:clamp(29px,5vw,58px);line-height:1.14;letter-spacing:-.03em;margin:0 0 22px;max-width:19ch}
-.attrib{font-family:var(--mono);font-size:12.5px;color:var(--dim)}
-.rv{opacity:0;transform:translateY(16px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}.rv.in{opacity:1;transform:none}
-.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden;margin:32px 0 10px}
-@media(min-width:720px){.grid.two{grid-template-columns:1fr 1fr}}
-.cell{background:var(--panel);padding:26px 24px}.cell p{margin:0;font-size:15.5px;color:#BFBBB4}
-.cell .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer);margin-bottom:12px}
-.stats{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden;margin:32px 0;grid-template-columns:repeat(2,1fr)}
-@media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
-.stat{background:var(--panel);padding:24px 20px}
-.stat .n{font-weight:800;font-size:30px;letter-spacing:-.03em;line-height:1}
-.stat .l{font-family:var(--mono);font-size:10.8px;letter-spacing:.1em;text-transform:uppercase;color:var(--dimmer);margin-top:10px;line-height:1.5}
-.two-col{display:grid;gap:34px}@media(min-width:860px){.two-col{grid-template-columns:1fr 1fr;gap:52px}}
-.two-col h3{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px;font-weight:400}
-.act{border-top:1px solid var(--line);padding:24px 0;display:grid;gap:16px}@media(min-width:800px){.act{grid-template-columns:56px 1fr}}
-.act .num{font-family:var(--mono);font-size:12px;color:var(--flare)}.act p{margin:0;font-size:16px}
-.act h4{margin:0 0 8px;font-size:17px;font-weight:700}
-.pull{border-left:2px solid var(--flare);padding:4px 0 4px 24px;margin:30px 0;max-width:60ch}
-.pull p{font-size:19px;line-height:1.5;color:var(--bone);margin:0}
-footer{padding:70px 0 90px;border-top:1px solid var(--line)}
-footer p{font-family:var(--mono);font-size:12.5px;color:var(--dimmer);line-height:1.9;max-width:78ch}
-.badge{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
-border:1px solid var(--line);border-radius:2px;padding:5px 10px;color:var(--dim);margin-bottom:24px}
-@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
-:focus-visible{outline:2px solid var(--flare);outline-offset:3px}
-</style></head><body>
+*{box-sizing:border-box;margin:0;padding:0}
+:root{--pad:clamp(20px,5.5cqw,40px);
+--sans:"Archivo","Helvetica Neue",Arial,sans-serif;
+--narrow:"Archivo Narrow","Archivo",sans-serif;
+--mono:"Geist Mono",ui-monospace,Menlo,monospace}
+html,body{height:100%;overflow:hidden;background:#08080A}
+body{font-family:var(--sans);-webkit-font-smoothing:antialiased;overscroll-behavior:none}
+
+/* phone-shaped on desktop, full-bleed on mobile */
+#stage{position:fixed;inset:0;display:grid;place-items:center}
+#deck{position:relative;width:100%;height:100%;overflow:hidden;background:#000;
+  container-type:inline-size;container-name:deck}
+@media(min-width:760px){
+  #deck{width:min(430px,32vw);height:min(920px,92vh);border-radius:28px;
+        box-shadow:0 40px 120px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08)}
+}
+
+.card{position:absolute;inset:0;background:var(--bg);color:var(--fg);
+  display:flex;align-items:center;padding:calc(var(--pad) + 34px) var(--pad) calc(var(--pad) + 26px);
+  opacity:0;pointer-events:none;transform:scale(1.03);
+  transition:opacity .42s ease,transform .52s cubic-bezier(.2,.75,.3,1)}
+.card.on{opacity:1;pointer-events:auto;transform:none}
+/* paper grain — keeps flat color from looking like a CSS default */
+.card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.055;
+  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>")}
+.inner{position:relative;z-index:1;width:100%;max-height:100%;overflow-y:auto;scrollbar-width:none}
+.inner::-webkit-scrollbar{display:none}
+
+.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
+  opacity:.62;margin-bottom:20px}
+.giant{overflow-wrap:anywhere;font-family:var(--narrow);font-weight:700;font-size:clamp(40px,15.5cqw,92px);
+  line-height:.86;letter-spacing:-.02em;text-transform:uppercase}
+.big{overflow-wrap:anywhere;font-weight:900;font-size:clamp(28px,9cqw,50px);line-height:1.02;letter-spacing:-.035em}
+.mid{font-weight:800;font-size:clamp(22px,7cqw,36px);line-height:1.08;letter-spacing:-.028em}
+.date{overflow-wrap:anywhere;font-family:var(--narrow);font-weight:700;font-size:clamp(34px,13cqw,68px);line-height:.92;
+  text-transform:uppercase;letter-spacing:-.01em;color:var(--ac)}
+blockquote{font-weight:600;font-size:clamp(21px,6.6cqw,34px);line-height:1.16;letter-spacing:-.026em}
+blockquote::before{content:"“"}blockquote::after{content:"”"}
+.lede{font-size:clamp(15px,4.2cqw,18px);line-height:1.5;margin-top:20px;opacity:.92;max-width:34ch}
+.sub{font-family:var(--mono);font-size:12.5px;line-height:1.7;margin-top:26px;opacity:.72;max-width:32ch}
+.small{font-size:14.5px;line-height:1.55;margin-top:16px;opacity:.72;max-width:38ch}
+.cite{font-family:var(--mono);font-size:11.5px;margin-top:18px;opacity:.6}
+.hint{position:absolute;left:var(--pad);bottom:calc(var(--pad) + 4px);font-family:var(--mono);font-size:11px;
+  letter-spacing:.16em;text-transform:uppercase;opacity:.5;animation:pulse 2.4s ease-in-out infinite}
+@keyframes pulse{0%,100%{opacity:.28}50%{opacity:.72}}
+
+.figures{display:grid;gap:26px;margin:8px 0 4px}
+.fig-n{font-family:var(--narrow);font-weight:700;font-size:clamp(32px,11.5cqw,58px);
+  line-height:1;letter-spacing:-.02em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
+.arrow{color:var(--ac);font-size:.7em}
+.fig-l{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;opacity:.72;margin-top:8px;
+  text-transform:uppercase;max-width:28ch;line-height:1.5}
 
-<section class="hero"><div class="wrap">
-  ${shareMode ? '<div class="badge rv">Share copy · names and identifiers removed</div>' : ''}
-  <div class="slate rv"><span>Assembly</span><span>·</span><span>${esc(stats.line || '')}</span></div>
-  <p class="quote rv">“${esc(S('headline_quote') || p.headline_quote || '')}”</p>
-  <p class="attrib rv">${esc(p.headline_quote_source || '')}</p>
-</div></section>
-
-${p.one_trait ? sec('01', 'the forest', `
-  <h2 class="rv">${esc(p.one_trait.name)}</h2>
-  <p class="lead rv">${esc(p.one_trait.thesis)}</p>
-  ${cells((p.one_trait.domains || []).map(d => ({ label: d.label, detail: d.evidence })))}`) : ''}
-
-${p.scissor ? sec('02', 'the measurement', `
-  <h2 class="rv">${esc(p.scissor.thesis)}</h2>
-  <p class="rv">${esc(p.scissor.detail)}</p>
-  <div class="stats rv">${(p.scissor.numbers || []).map(n =>
-    `<div class="stat"><div class="n">${esc(n.from)} → ${esc(n.to)}</div><div class="l">${esc(n.label)}</div></div>`).join('')}</div>`) : ''}
-
-${p.collision ? sec('03', 'the collision', `
-  <h2 class="rv">${esc(p.collision.date)} — ${esc(p.collision.thesis)}</h2>
-  <p class="rv">${esc(p.collision.detail)}</p>
-  <div class="pull rv"><p>${esc(p.collision.verification)}</p></div>`) : ''}
-
-${p.insight_vs_capacity ? sec('04', 'why awareness isn’t the fix', `
-  <h2 class="rv">${esc(p.insight_vs_capacity.thesis)}</h2>
-  <div class="two-col">
-    <div class="rv"><h3 style="color:var(--dim)">What you predicted</h3><p>${esc(p.insight_vs_capacity.predicted)}</p></div>
-    <div class="rv"><h3 style="color:var(--flare)">What happened</h3><p>${esc(p.insight_vs_capacity.happened)}</p></div>
-  </div>
-  <p class="rv" style="margin-top:36px">${esc(p.insight_vs_capacity.implication)}</p>`) : ''}
-
-${list('unseen_wins').length ? sec('05', 'hard to see from inside', `
-  <h2 class="rv">${esc(p.distortion?.thesis || 'What the same year looks like from outside.')}</h2>
-  ${p.distortion?.evidence ? `<p class="rv">${esc(p.distortion.evidence)}</p>` : ''}
-  ${cells(list('unseen_wins'))}`) : ''}
-
-${p.human_thing ? sec('06', 'the thing you may not have noticed', `
-  <h2 class="rv">${esc(p.human_thing.thesis)}</h2>
-  <div class="two-col">
-    <div class="rv"><h3 style="color:var(--dim)">Written privately</h3>${(p.human_thing.private || []).map(x => `<p>${esc(x)}</p>`).join('')}</div>
-    <div class="rv"><h3 style="color:var(--flare)">Made publicly</h3>${(p.human_thing.public || []).map(x => `<p>${esc(x)}</p>`).join('')}</div>
-  </div>
-  <p class="rv" style="margin-top:36px">${esc(p.human_thing.note)}</p>`) : ''}
-
-${list('actions').length ? sec('07', 'what actually moves', `
-  <h2 class="rv">Two levers. Neither is trying harder.</h2>
-  <p class="rv">Reduce load, or transfer ownership.</p>
-  <div class="rv">${list('actions').map(a =>
-    `<div class="act"><div class="num">${String(a.n).padStart(2, '0')}</div><div><h4>${esc(a.title)}</h4><p>${esc(a.body)}</p></div></div>`).join('')}</div>`) : ''}
-
-${list('limits').length ? sec('08', 'the limits of this', `
-  <h2 class="rv">What this can’t see.</h2>
-  ${cells(list('limits'))}
-  ${p.closing ? `<p class="rv" style="margin-top:32px">${esc(p.closing)}</p>` : ''}`) : ''}
-
-<footer><div class="wrap"><p>${esc(stats.footer || '')}</p>
-<p>Generated locally by <strong>you-wrapped</strong>. Your data never left this machine.</p></div></footer>
+.ticks{list-style:none;display:grid;gap:18px;margin-top:4px}
+.ticks li{border-top:1.5px solid currentColor;padding-top:12px;opacity:.95}
+.ticks b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.012em;margin-bottom:5px}
+.ticks span{display:block;font-size:14px;line-height:1.45;opacity:.78}
+.ticks.num b{font-family:var(--mono);font-weight:400;font-size:14px}
+
+.vs{display:grid;gap:20px;margin-top:20px}
+.vs>div{border-left:3px solid var(--ac);padding-left:14px}
+.vs p{font-size:15px;line-height:1.45;margin-top:6px;opacity:.9}
+.tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.65}
+.tag.alt{color:var(--ac);opacity:1}
+
+.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
+.btn{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
+  background:var(--fg);color:var(--bg);border:0;border-radius:999px;padding:13px 20px;
+  cursor:pointer;text-decoration:none;display:inline-block}
+.btn.ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1.5px currentColor}
+
+/* story progress bars */
+#bars{position:absolute;top:12px;left:12px;right:12px;display:flex;gap:4px;z-index:9}
+#bars i{flex:1;height:2.5px;background:rgba(255,255,255,.28);border-radius:2px;overflow:hidden}
+#bars i.done{background:rgba(255,255,255,.9)}
+#bars i.now{background:rgba(255,255,255,.9)}
+#deck.dark #bars i{background:rgba(0,0,0,.22)}
+#deck.dark #bars i.done,#deck.dark #bars i.now{background:rgba(0,0,0,.82)}
+
+.tapzone{position:absolute;top:0;bottom:0;width:34%;z-index:8;cursor:pointer}
+.tapzone.l{left:0}.tapzone.r{right:0;width:66%}
+#badge{position:absolute;bottom:10px;left:0;right:0;text-align:center;z-index:9;
+  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
+  color:rgba(255,255,255,.4)}
+@media(max-width:759px){#badge{display:none}}
+
+/* ── evidence on cards ── */
+.src{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
+  opacity:.5;margin-top:14px;line-height:1.55}
+.ev{display:grid;gap:12px;margin-top:18px}
+.evq{border-left:2.5px solid var(--ac);padding-left:13px;font-size:14.5px;line-height:1.42;
+  font-weight:500;opacity:.95}
+.evq::before{content:"“"}.evq::after{content:"”"}
+.evq cite{display:block;font-family:var(--mono);font-size:10px;font-style:normal;font-weight:400;
+  letter-spacing:.06em;opacity:.55;margin-top:7px}
+.card.chart-card .inner,.card.data .inner{padding-top:4px}
+${CHART_CSS}
+
+/* ── long-read mode ── */
+body.reading{overflow:auto;background:#0E0E12}
+body.reading #stage,body.reading #badge{display:none}
+#read{color:#E9E5DD;font-weight:300;font-size:17px;line-height:1.62;padding-bottom:60px}
+.rw{max-width:820px;margin:0 auto;padding:0 26px}
+.rhead{padding:44px 0 52px}
+.rhead h1{font-family:var(--narrow);font-weight:700;font-size:clamp(44px,9vw,76px);
+  line-height:.95;text-transform:uppercase;margin:26px 0 12px}
+.rsub{font-family:var(--mono);font-size:12.5px;opacity:.6}
+.rquote{font-size:clamp(21px,4.4vw,29px);line-height:1.24;font-weight:600;
+  letter-spacing:-.02em;margin-top:32px;border-left:3px solid #E8FF43;padding-left:20px}
+.rquote cite{display:block;font-family:var(--mono);font-size:11.5px;font-weight:400;
+  font-style:normal;opacity:.55;margin-top:12px;letter-spacing:.04em}
+.rs{padding:52px 0;border-top:1px solid #242B34}
+.reyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
+  color:#E8FF43;opacity:.8;margin-bottom:16px}
+#read h2{font-weight:900;font-size:clamp(25px,4.6vw,38px);line-height:1.08;
+  letter-spacing:-.03em;margin-bottom:18px;max-width:24ch}
+#read h3{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
+  font-weight:400;opacity:.6;margin-bottom:10px}
+#read h3.ac{color:#E8FF43;opacity:1}
+#read h4{font-size:17px;font-weight:800;margin-bottom:6px}
+#read p{margin-bottom:16px;max-width:66ch;color:#CFCBC3}
+.rlede{font-size:19.5px;color:#E9E5DD}
+.rgrid{display:grid;gap:1px;background:#242B34;border:1px solid #242B34;border-radius:3px;
+  overflow:hidden;margin-top:26px}
+@media(min-width:700px){.rgrid{grid-template-columns:1fr 1fr}}
+.rcell{background:#13171C;padding:24px 22px}
+.rcell p{margin:0;font-size:15px;color:#BFBBB4}
+.rk{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
+  opacity:.5;margin-bottom:10px}
+.rstats{display:grid;gap:1px;background:#242B34;border:1px solid #242B34;border-radius:3px;
+  overflow:hidden;margin:26px 0;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
+.rstat{background:#13171C;padding:22px 20px}
+.rn{font-family:var(--narrow);font-weight:700;font-size:30px;letter-spacing:-.02em}
+.rl{font-family:var(--mono);font-size:10.8px;letter-spacing:.1em;text-transform:uppercase;
+  opacity:.5;margin-top:9px;line-height:1.5}
+.rcols{display:grid;gap:30px;margin:24px 0}
+@media(min-width:820px){.rcols{grid-template-columns:1fr 1fr;gap:48px}}
+.rpull{border-left:3px solid #E8FF43;padding-left:20px;margin:24px 0}
+.rpull p{font-size:19px;color:#E9E5DD;margin:0}
+.ract{display:grid;gap:14px;border-top:1px solid #242B34;padding:22px 0}
+@media(min-width:700px){.ract{grid-template-columns:52px 1fr}}
+.rnum{font-family:var(--mono);font-size:12px;color:#E8FF43}
+.ract p{margin:0;font-size:16px}
+.rfoot{padding:52px 0;border-top:1px solid #242B34}
+.rfoot p{font-family:var(--mono);font-size:12.5px;opacity:.45;line-height:1.9}
+.rbadge{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
+  border:1px solid #242B34;border-radius:2px;padding:5px 10px;opacity:.6;margin-left:10px}
+.btn.back{background:transparent;color:#E9E5DD;box-shadow:inset 0 0 0 1.5px #333A44;margin-bottom:8px}
+
+@media(prefers-reduced-motion:reduce){.card{transition:none}.hint{animation:none}}
+@media print{
+  html,body{height:auto;overflow:visible}#stage{position:static}
+  #deck{width:100%;height:auto;box-shadow:none;border-radius:0}
+  .card{position:static;opacity:1;transform:none;page-break-after:always;min-height:100vh}
+  #bars,.tapzone,#badge,.hint,.actions,.btn{display:none}
+  body.reading .card{display:none}
+}
+</style></head><body>
+<div id="stage"><div id="deck">
+  <div id="bars">${bars}</div>
+  ${slides}
+  <div class="hint" id="hint">tap or press → to begin</div>
+  <div class="tapzone l" data-nav="-1" aria-hidden="true"></div>
+  <div class="tapzone r" data-nav="1" aria-hidden="true"></div>
+</div></div>
+<div id="badge">← → or tap · ${n} cards · press R to read</div>
+${longForm(p, stats, shareMode)}
 <script>
-const io=new IntersectionObserver(e=>e.forEach(x=>{if(x.isIntersecting){x.target.classList.add('in');io.unobserve(x.target)}}),{threshold:.14,rootMargin:'0px 0px -8% 0px'});
-document.querySelectorAll('.rv').forEach((el,i)=>{el.style.transitionDelay=Math.min(i,3)*70+'ms';io.observe(el)});
-addEventListener('load',()=>document.querySelectorAll('.hero .rv').forEach((el,i)=>setTimeout(()=>el.classList.add('in'),120+i*130)));
+const N=${n}, deck=document.getElementById('deck');
+const cards=[...document.querySelectorAll('.card')], bars=[...document.querySelectorAll('#bars i')];
+let i=0;
+// bar contrast has to follow the card, not the page
+const LIGHT=new Set(cards.map((c,k)=>{
+  const bg=getComputedStyle(c).getPropertyValue('--bg').trim();
+  const h=bg.replace('#','');
+  const v=parseInt(h.slice(0,2),16)*.299+parseInt(h.slice(2,4),16)*.587+parseInt(h.slice(4,6),16)*.114;
+  return v>140?k:-1;
+}).filter(k=>k>=0));
+function show(k){
+  const h=document.getElementById('hint'); if(h) h.style.display = k===0 ? '' : 'none';
+  i=Math.max(0,Math.min(N-1,k));
+  cards.forEach((c,x)=>c.classList.toggle('on',x===i));
+  bars.forEach((b,x)=>{b.classList.toggle('done',x<i);b.classList.toggle('now',x===i)});
+  deck.classList.toggle('dark',LIGHT.has(i));
+}
+document.querySelectorAll('[data-nav]').forEach(z=>
+  z.addEventListener('click',()=>show(i+ +z.dataset.nav)));
+// story ⇄ long read
+const readEl=document.getElementById('read');
+function setMode(reading){
+  document.body.classList.toggle('reading',reading);
+  readEl.hidden=!reading;
+  if(reading) window.scrollTo(0,0);
+}
+document.querySelectorAll('[data-read]').forEach(b=>b.addEventListener('click',()=>setMode(true)));
+document.querySelectorAll('[data-story]').forEach(b=>b.addEventListener('click',()=>setMode(false)));
+
+addEventListener('keydown',e=>{
+  const reading=document.body.classList.contains('reading');
+  if(e.key==='r'||e.key==='R'){setMode(!reading);return}
+  if(reading){ if(e.key==='Escape')setMode(false); return }
+  if(e.key==='ArrowRight'||e.key===' ')  {e.preventDefault();show(i+1)}
+  if(e.key==='ArrowLeft')                {e.preventDefault();show(i-1)}
+});
+let x0=null;
+deck.addEventListener('touchstart',e=>x0=e.touches[0].clientX,{passive:true});
+deck.addEventListener('touchend',e=>{
+  if(x0===null)return; const dx=e.changedTouches[0].clientX-x0;
+  if(Math.abs(dx)>44) show(i+(dx<0?1:-1)); x0=null;
+},{passive:true});
+show(0);
 </script></body></html>`;
 }

package/src/scrub.mjs

@@ -50,12 +50,22 @@ export function coarsenPlaces(clusters = []) {
 }
 
 const CITIES = [
-  ['San Francisco', 37.77, -122.42, .4], ['Los Angeles', 34.05, -118.30, .6],
-  ['New York', 40.74, -73.98, .4], ['Chicago', 41.88, -87.63, .6],
-  ['Seattle', 47.61, -122.33, .4], ['Austin', 30.27, -97.74, .4],
-  ['London', 51.51, -0.13, .4], ['Paris', 48.86, 2.35, .4],
-  ['Istanbul', 41.01, 28.98, .6], ['Miami', 25.77, -80.19, .4],
-  ['Tokyo', 35.68, 139.69, .5], ['Berlin', 52.52, 13.40, .4],
+  // Major metros, for coarsening coordinates to a city label in share mode.
+  ['New York', 40.71, -74.01, .5],      ['Los Angeles', 34.05, -118.24, .6],
+  ['Chicago', 41.88, -87.63, .5],       ['San Francisco', 37.77, -122.42, .4],
+  ['Seattle', 47.61, -122.33, .4],      ['Austin', 30.27, -97.74, .4],
+  ['Denver', 39.74, -104.99, .4],       ['Boston', 42.36, -71.06, .4],
+  ['Miami', 25.76, -80.19, .4],         ['Atlanta', 33.75, -84.39, .4],
+  ['Toronto', 43.65, -79.38, .4],       ['Mexico City', 19.43, -99.13, .5],
+  ['London', 51.51, -0.13, .5],         ['Paris', 48.86, 2.35, .4],
+  ['Berlin', 52.52, 13.40, .4],         ['Amsterdam', 52.37, 4.90, .3],
+  ['Madrid', 40.42, -3.70, .4],         ['Rome', 41.90, 12.50, .4],
+  ['Lisbon', 38.72, -9.14, .3],         ['Istanbul', 41.01, 28.98, .5],
+  ['Dubai', 25.20, 55.27, .4],          ['Mumbai', 19.08, 72.88, .5],
+  ['Bangalore', 12.97, 77.59, .4],      ['Singapore', 1.35, 103.82, .3],
+  ['Hong Kong', 22.32, 114.17, .3],     ['Tokyo', 35.68, 139.69, .6],
+  ['Seoul', 37.57, 126.98, .4],         ['Sydney', -33.87, 151.21, .4],
+  ['São Paulo', -23.55, -46.63, .5],    ['Lagos', 6.52, 3.38, .4],
 ];
 export function labelFor(lat, lon) {
   for (const [name, a, b, r] of CITIES) if (Math.abs(lat - a) <= r && Math.abs(lon - b) <= r) return name;

package/src/setup.mjs

@@ -77,6 +77,32 @@ export function hostApp() {
   return 'your terminal app';
 }
 
+/** Is the Claude Code CLI on PATH? */
+export function hasClaudeCLI() {
+  try { execSync('command -v claude', { stdio: 'pipe' }); return true; } catch { return false; }
+}
+
+/** Are we already running *inside* a Claude Code session? Don't nest one. */
+export function insideClaude() {
+  return Boolean(process.env.CLAUDECODE || process.env.CLAUDE_CODE);
+}
+
+/**
+ * Hand off to a fresh Claude Code session with the work already queued.
+ * The new process starts after the skill is on disk, so it loads it.
+ */
+export function launchClaude(outDir) {
+  const prompt = [
+    'Do a you-wrapped on me.',
+    `The local extraction has already run — signals are in ${outDir}/signals.json`,
+    `and my own words are in ${outDir}/evidence.local.md (read it, never copy it anywhere).`,
+    'Follow the you-wrapped skill: sweep any connected services I have (Granola, Slack,',
+    'Gmail, Calendar, Drive) to cross-reference, then work the six-step method and',
+    `render the portrait to ${outDir}.`,
+  ].join(' ');
+  execFileSync('claude', [prompt], { stdio: 'inherit' });
+}
+
 export function nodeOk() {
   const [maj, min] = process.versions.node.split('.').map(Number);
   return maj > 22 || (maj === 22 && min >= 5);