cyber/landing/deck.js

/* cyber — the superintelligence · interactive deck
   a frozen protocol for collective lifeforms. 7 chapters × 3 slides. the graph behind you grows with what you do.
   marks: ● measured · ○ target · ◌ mock (a browser simulation, not the chain) */
(() => {
const $ = (s, r = document) => r.querySelector(s);
const el = (h) => { const t = document.createElement('template'); t.innerHTML = h.trim(); return t.content.firstChild; };
const fmt = (n) => n.toLocaleString('en-US');
const esc = (t) => t.replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));
const M = (k) => `<i class="mk ${k}"></i>`; // m = measured, t = target, k = mock
const MONO = 'JetBrains Mono,Menlo,monospace', SANS = 'Play,Inter,system-ui,sans-serif';
const COLS = ['#ff1a00', '#ff7a00', '#ffc400', '#00ff41', '#00b8ff', '#1e00ff', '#7a00ff'];

/* ------------------------------------------------------------------ chapters */
const CH = [
  { id: 'si',      name: 'superintelligence', c: 'var(--c1)' },
  { id: 'anatomy', name: 'anatomy',           c: 'var(--c2)' },
  { id: 'focus',   name: 'focus',             c: 'var(--c3)' },
  { id: 'compile', name: 'compile',           c: 'var(--c4)' },
  { id: 'syntropy',name: 'syntropy',          c: 'var(--c5)' },
  { id: 'frozen',  name: 'frozen',            c: 'var(--c6)' },
  { id: 'moneys',  name: 'money', c: 'var(--c7)' },
];

/* ------------------------------------------------------------------ figures */
const svgo = (w, h, label, body) => `<svg class="fig" viewBox="0 0 ${w} ${h}" role="img" aria-label="${label}">${body}</svg>`;
const T = (x, y, t, o = {}) => `<text x="${x}" y="${y}" font-size="${o.fs || 11}" font-weight="${o.w || 400}" text-anchor="${o.a || 'start'}" fill="${o.c || 'currentColor'}" fill-opacity="${o.op || 1}" font-family="${o.ff || (o.w === 700 ? SANS : MONO)}"${o.ls ? ` letter-spacing="${o.ls}"` : ''}>${t}</text>`;

const scaleFig = () => {
  const W = 760, H = 275, X0 = 40, X1 = 720, B = 150;
  const x = (e) => X0 + (X1 - X0) * e / 24;
  const sup = (n) => String(n).replace(/\d/g, (d) => '⁰¹²³⁴⁵⁶⁷⁸⁹'[d]);
  const L = [
    ['self', 0, '1', 'one neuron, one particle', COLS[3], 1, 24], ['crystal', 3.7, '5,040', 'curated seed', COLS[3], -1, 24],
    ['bootloader', 6.5, '3,143,650', 'today · d⋆ = 31', COLS[3], 1, 70], ['cognition', 8.5, '10⁸ – 10⁹', 'concepts no one holds', COLS[4], -1, 50],
    ['thermodynamic', 12, '10¹²', 'φ⋆ is the state', COLS[4], 1, 24], ['planetary', 15, '10¹⁵ · 10¹⁰ neurons', 'design target', COLS[4], -1, 24],
    ['Avogadro', 23.78, '6.02 × 10²³', 'a mole of matter', COLS[1], 1, 70],
  ];
  let o = ''; let pts = [`${X0},${B}`];
  for (let e = 0; e <= 24; e++) pts.push(`${x(e).toFixed(1)},${(B - 2 - 50 * Math.pow(e / 24, 1.6)).toFixed(1)}`);
  pts.push(`${X1},${B}`);
  o += `<rect x="${x(12)}" y="${B - 118}" width="${X1 - x(12)}" height="118" fill="${COLS[4]}" fill-opacity=".06"/><line x1="${x(12)}" y1="${B - 118}" x2="${x(12)}" y2="${B + 24}" stroke="${COLS[4]}" stroke-dasharray="3 4"/>` + T(x(12) + 6, B - 108, 'threshold', { fs: 10, w: 700, c: COLS[4] }) + T(x(12) + 6, B - 97, 'past here only the field describes the system', { fs: 8, c: COLS[4], op: .85 }) + `${B}" stroke="currentColor" stroke-opacity=".35"/>`;
  for (let e = 0; e < 24; e += 3) o += T(x(e), B + 16, '10' + sup(e), { fs: 9, a: 'middle', op: .5 });
  o += `<line x1="${x(0)}" y1="${B}" x2="${x(6.5)}" y2="${B}" stroke="${COLS[3]}" stroke-width="3" stroke-linecap="round"/>`;
  for (const [n, e, cnt, line, col, side, stem] of L) {
    const xx = x(e), r = 3.5 + e * .42;
    o += `<circle cx="${xx}" cy="${B}" r="${r}" fill="${col}" fill-opacity=".18" stroke="${col}" stroke-width="1.5"/>" cy="${B}" r="2.2" fill="${col}"/>`;
    const y1 = side > 0 ? B - r - 2 : B + r + 2, y2 = side > 0 ? B - r - stem : B + r + stem;
    o += `<line x1="${xx}" y1="${y1}" x2="${xx}" y2="${y2}" stroke="${col}" stroke-opacity=".6"/>`;
    let a = 'middle', tx = xx; if (n === 'self') { a = 'start'; tx = X0 - 2; } if (n === 'Avogadro') { a = 'end'; tx = X1 + 2; }
    const ty = side > 0 ? y2 - 4 : y2 + 12;
    const rows = side > 0 ? [[ty - 24, n, 12.5, 'currentColor', 700], [ty - 11, cnt, 10.5, col, 400], [ty, line, 9, 'currentColor', 400]] : [[ty, n, 12.5, 'currentColor', 700], [ty + 13, cnt, 10.5, col, 400], [ty + 24, line, 9, 'currentColor', 400]];
    for (const [y, t, fs, c, w] of rows) o += T(tx, y, t, { fs, c, w, a, op: fs === 9 ? .65 : 1 });
  }
  return svgo(W, H, 'from self to Avogadro', o);
};

/* a cyberlink, exploded */
const linkFig = () => {
  const W = 760, H = 330; let o = '';
  const box = (x, y, w, h, title, sub, col) => `<rect x="${x}" y="${y}" width="${w}" height="${h}" rx="10" fill="${col}" fill-opacity=".12" stroke="${col}" stroke-width="1.5"/>` + T(x + w / 2, y + 30, title, { fs: 16, w: 700, a: 'middle' }) + T(x + w / 2, y + 50, sub, { fs: 9.5, a: 'middle', op: .65 });
  o += box(40, 110, 200, 70, 'from · particle p', 'hemera(file) · authorizes the move', COLS[1]);
  o += box(520, 110, 200, 70, 'to · particle q', 'hemera(file) · any card', COLS[1]);
  o += `<line x1="240" y1="145" x2="520" y2="145" stroke="currentColor" stroke-width="3" marker-end="url(#ah)"/><defs><marker id="ah" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto"><path d="M0,0 L10,5 L0,10 z" fill="currentColor"/></marker></defs>`;
  o += T(380, 132, 'cyberlink', { fs: 15, w: 700, a: 'middle' });
  o += T(380, 170, '“p belongs with q”', { fs: 11, a: 'middle', op: .7 });
  const call = (x, y, t, d, up) => `<g class="hov"><rect x="${x - 120}" y="${up ? y - 30 : y + 4}" width="240" height="42" fill="transparent"/><line x1="${x}" y1="${up ? 110 : 180}" x2="${x}" y2="${y}" stroke="currentColor" stroke-opacity=".45" stroke-dasharray="2 4"/>` + T(x, up ? y - 16 : y + 18, t, { fs: 12, w: 700, a: 'middle' }) + T(x, up ? y - 3 : y + 32, d, { fs: 10, a: 'middle', op: .7 }) + '</g>';
  o += call(285, 50, 'structural · link(from, to)', 'a directed edge between two cards', true);
  o += call(500, 50, 'who · when', 'ride on the signal, not the link', true);
  o += call(270, 230, 'economic · box(coin, amount)', 'conviction · weight in A^eff', false);
  o += call(515, 230, 'epistemic · valence v ∈ {−1, 0, +1}', '0 ranks · ±1 bets the truth market', false);
  o += T(380, 300, 'five stored fields, three concepts · append-only: delete = withdraw the box and link again with v = −1 · never erasure', { fs: 10, a: 'middle', op: .6 });
  return svgo(W, H, 'anatomy of a cyberlink', o);
};

/* a signal, exploded: s = (ν, ℓ⃗, Δφ⋆, σ, prev, mc, vdf, step, nonce) */
const signalFig = () => {
  const W = 760, H = 275; let o = '';
  const F = [['ν', 'neuron', 'who speaks'], ['ℓ', 'links', 'the cyberlinks claimed'], ['Δφ⋆', 'shift', 'focus shift asserted, in bits'], ['σ', 'zheng proof', 'covers links, impulse, conviction'], ['prev', 'previous', 'author\'s last signal: a chain'], ['mc', 'merkle clock', 'causal state it was computed on'], ['vdf', 'delay', 'physical time since previous'], ['step', 'step', 'logical clock, monotonic'], ['nonce', 'nonce', 'proof randomness = mining']];
  const w = 76, x0 = 50, y = 110;
  F.forEach(([sym, name, meaning], i) => {
    const x = x0 + i * w, col = COLS[i % 7];
    o += `<g class="hov"><rect x="${x}" y="${y}" width="${w - 4}" height="56" rx="8" fill="${col}" fill-opacity=".14" stroke="${col}"/>` + T(x + (w - 4) / 2, y + 26, sym, { fs: 16, w: 700, a: 'middle', ff: MONO }) + T(x + (w - 4) / 2, y + 44, name, { fs: 9, a: 'middle', op: .7 });
    const lines = []; let cur = ''; for (const wd of meaning.split(' ')) { if ((cur + ' ' + wd).trim().length > 13 && cur) { lines.push(cur); cur = wd; } else cur = (cur + ' ' + wd).trim(); } if (cur) lines.push(cur);
    lines.slice(0, 3).forEach((ln, k) => { o += T(x + (w - 4) / 2, y + 74 + k * 11, ln, { fs: 8, a: 'middle', op: .8 }); }); o += '</g>';
  });
  const bx = x0 + 1 * w, bw = 3 * w - 4; o += `<path d="M${bx},${y - 10} v-8 h${bw} v8" fill="none" stroke="${COLS[3]}" stroke-width="1.5"/>` + T(bx + bw / 2, y - 24, 'σ · one zheng proof covers these', { fs: 10, w: 700, a: 'middle', c: COLS[3] });
  const px = x0 + 4 * w + (w - 4) / 2; o += `<path d="M${px},${y - 10} C ${px},${y - 60} ${x0 - 10},${y - 60} ${x0 - 10},${y + 28}" fill="none" stroke="${COLS[4]}" stroke-width="1.5" stroke-dasharray="3 4" marker-end="url(#ah3)"/>` + T(px + 20, y - 46, 'prev → the author\'s last signal: every neuron is a chain', { fs: 10, w: 700, c: COLS[4] });
  o += T(380, 262, 'the proof is the claim. the claim is the mining. identical signals produce one root everywhere.', { fs: 10, a: 'middle', op: .6 });
  return svgo(W, H, 'anatomy of a signal', o);
};

/* graph → transformer */
const compileFig = () => {
  const W = 760, H = 285; let o = '';
  // graph glyph
  const gx = 110, gy = 150; const pts = [[0, -60], [52, -30], [60, 30], [10, 65], [-50, 40], [-58, -25], [0, 0], [25, 20], [-20, -30]];
  const E = [[0, 1], [1, 2], [2, 3], [3, 4], [4, 5], [5, 0], [6, 0], [6, 2], [6, 4], [7, 2], [7, 3], [8, 5], [8, 6], [8, 1]];
  for (const [a, b] of E) o += `<line x1="${gx + pts[a][0]}" y1="${gy + pts[a][1]}" x2="${gx + pts[b][0]}" y2="${gy + pts[b][1]}" stroke="${COLS[3]}" stroke-opacity=".6"/>`;
  pts.forEach(([x, y], i) => { o += `<circle cx="${gx + x}" cy="${gy + y}" r="${i === 6 ? 7 : 4.5}" fill="${COLS[3]}"/>`; });
  o += T(gx, 250, 'weighted cybergraph', { fs: 12, w: 700, a: 'middle' }) + T(gx, 266, 'A^eff · stake × karma', { fs: 9, a: 'middle', op: .65 });
  // three derivations
  const rows = [[70, 'effective rank of Σ_φ⋆', 'd⋆ = exp H(σ(Σ_φ⋆))', 'embedding dimension'], [150, 'count of dialects', 'h⋆ ≥ ￿Dialect(G)￿', 'attention heads'], [230, 'diameter × contraction', 'L⋆ = diam(G) · ⌈log(1/ε) / log(1/κ)⌉', 'layers']];
  for (const [y, from, formula, to] of rows) {
    o += `<g class="hov"><line x1="195" y1="${y}" x2="250" y2="${y}" stroke="currentColor" stroke-opacity=".4"/><line x1="470" y1="${y}" x2="538" y2="${y}" stroke="currentColor" stroke-opacity=".4" marker-end="url(#ah2)"/>`;
    o += `<rect x="250" y="${y - 24}" width="220" height="48" rx="8" fill="currentColor" fill-opacity=".06" stroke="currentColor" stroke-opacity=".3"/>` + T(360, y - 6, from, { fs: 9, a: 'middle', op: .65 }) + T(360, y + 12, formula, { fs: 11, w: 700, a: 'middle' });
    o += T(544, y + 4, to, { fs: 10, op: .85 }) + '</g>';
  }
  o += `<defs><marker id="ah2" markerWidth="8" markerHeight="8" refX="6" refY="4" orient="auto"><path d="M0,0 L8,4 L0,8 z" fill="currentColor" fill-opacity=".6"/></marker></defs>`;
  // transformer stack glyph
  for (let i = 0; i < 7; i++) o += `<rect x="652" y="${60 + i * 26}" width="64" height="18" rx="3" fill="${COLS[3]}" fill-opacity="${.12 + i * .1}" stroke="${COLS[3]}" stroke-opacity=".7"/>`;
  o += T(684, 48, 'one layer = one kernel step', { fs: 9, w: 700, a: 'middle' });
  o += T(684, 250, 'L⋆ = 290 layers', { fs: 10.5, w: 700, a: 'middle' }) + T(684, 263, '= 290 kernel steps to φ⋆', { fs: 9, a: 'middle', op: .8 }) + T(684, 276, 'compiled, not trained', { fs: 9, a: 'middle', op: .65 });
  return svgo(W, H, 'the graph compiled into a transformer', o);
};


/* earth ↔ mars: finality is an information condition, not a clock */
const planetFig = () => {
  const W = 760, H = 258; let o = '';
  const planet = (x, y, r, col, name, sub) => `<circle cx="${x}" cy="${y}" r="${r}" fill="${col}" fill-opacity=".15" stroke="${col}" stroke-width="1.5"/>` + T(x, y + 4, name, { fs: 13, w: 700, a: 'middle' }) + T(x, y + r + 40, sub, { fs: 9, a: 'middle', op: .7 });
  o += planet(120, 120, 46, COLS[4], 'earth', 'its own pond · finalizes at earth speed');
  o += planet(640, 120, 30, COLS[1], 'mars', 'its own pond · finalizes at mars speed');
  // local gossip rings
  for (let k = 1; k <= 3; k++) o += `<circle cx="120" cy="120" r="${46 + k * 11}" fill="none" stroke="${COLS[4]}" stroke-opacity="${.35 - k * .09}" stroke-dasharray="2 5"/>`;
  // light path
  o += `<line x1="200" y1="120" x2="580" y2="120" stroke="currentColor" stroke-opacity=".35" stroke-dasharray="6 6"/>`;
  o += `<circle cx="300" cy="120" r="3" fill="#fff"><animate attributeName="cx" values="200;580" dur="6s" repeatCount="indefinite"/></circle>`;
  o += T(390, 104, '4 – 24 minutes of light, one way', { fs: 11, w: 700, a: 'middle' });
  o += T(390, 140, 'a signal pays light-time once · a vote pays it twice, every round', { fs: 9.5, a: 'middle', op: .75 });
  // rule box
  o += `<rect x="250" y="190" width="280" height="54" rx="10" fill="currentColor" fill-opacity=".06" stroke="currentColor" stroke-opacity=".3"/>`;
  o += T(390, 210, 'final ⇔ φ⋆ᵢ > τ', { fs: 14, w: 700, a: 'middle', ff: MONO });
  o += T(390, 230, 'enough attention has gathered · an information condition, not a clock', { fs: 9, a: 'middle', op: .75 });
  o += T(120, 22, 'identical signals → one root everywhere', { fs: 9.5, a: 'middle', op: .7 });
  o += T(745, 22, 'a dark link freezes trade, never invents two truths', { fs: 9.5, a: 'end', op: .7 });
  return svgo(W, H, 'earth and mars: finality survives the speed of light', o);
};

/* surprising syntropy: two filters, one quadrant pays */
const syntropyFig = () => {
  const W = 760, H = 290; let o = '';
  const x0 = 170, y0 = 40, w = 430, h = 190;
  const cell = (cx, cy, col, title, sub, pay) => `<rect x="${cx}" y="${cy}" width="${w / 2 - 6}" height="${h / 2 - 6}" rx="10" fill="${col}" fill-opacity="${pay ? .22 : .06}" stroke="${col}" stroke-opacity="${pay ? 1 : .35}" stroke-width="${pay ? 2 : 1}"/>` + T(cx + w / 4 - 3, cy + 34, title, { fs: 13, w: 700, a: 'middle' }) + T(cx + w / 4 - 3, cy + 54, sub, { fs: 9.5, a: 'middle', op: .75 }) + T(cx + w / 4 - 3, cy + 76, pay ? 'paid: R(ν) = Shapley_ν(v⋆)' : 'mints 0', { fs: 11, w: 700, a: 'middle', c: pay ? COLS[3] : 'currentColor', ff: MONO });
  o += cell(x0, y0, COLS[3], 'surprising syntropy', 'order the crowd did not expect', true);
  o += cell(x0 + w / 2 + 6, y0, 'currentColor', 'expected order', 'a copy · what everyone saw coming', false);
  o += cell(x0, y0 + h / 2 + 6, 'currentColor', 'surprising noise', 'novel, and the picture got no clearer', false);
  o += cell(x0 + w / 2 + 6, y0 + h / 2 + 6, 'currentColor', 'noise', 'idle capital · volume · presence', false);
  // axes
  o += T(x0 - 14, y0 + h / 4, 'Δφ⁺ > 0', { fs: 11, w: 700, a: 'end', ff: MONO }) + T(x0 - 14, y0 + h / 4 + 14, 'picture clearer', { fs: 9, a: 'end', op: .7 });
  o += T(x0 - 14, y0 + 3 * h / 4, 'Δφ⁺ = 0', { fs: 11, w: 700, a: 'end', ff: MONO }) + T(x0 - 14, y0 + 3 * h / 4 + 14, 'no new order', { fs: 9, a: 'end', op: .7 });
  o += T(x0 + w / 4, y0 + h + 22, 'ρ high · surprising', { fs: 11, w: 700, a: 'middle', ff: MONO }) + T(x0 + w / 4, y0 + h + 36, 'the crowd did not predict it', { fs: 9, a: 'middle', op: .7 });
  o += T(x0 + 3 * w / 4, y0 + h + 22, 'ρ low · expected', { fs: 11, w: 700, a: 'middle', ff: MONO }) + T(x0 + 3 * w / 4, y0 + h + 36, 'the crowd predicted it', { fs: 9, a: 'middle', op: .7 });
  o += T(W / 2, H - 6, 'syntropy J(φ⋆) = D_KL(φ⋆ ‖ uniform): bits of distance from noise · surprise ρ: the serum, your claim against the crowd\'s prediction of itself', { fs: 9, a: 'middle', op: .6 });
  return svgo(W, H, 'surprising syntropy: two filters', o);
};


/* the tri-kernel: three local maps blended into one contraction */
const triFig = () => {
  const W = 760, H = 230; let o = '';
  const maps = [['diffusion', 'D', 'a random walk along links', COLS[2]], ['springs', 'S', 'linked particles pull together', COLS[3]], ['heat', 'H', 'e^{−τL} · smoothing', COLS[1]]];
  maps.forEach(([n, sym, d, col], k) => {
    const cx = 110 + k * 200, cy = 90;
    o += `<circle cx="${cx}" cy="${cy}" r="52" fill="${col}" fill-opacity=".1" stroke="${col}" stroke-width="1.5"/>`;
    const pts = [[0, -30], [28, -8], [18, 26], [-18, 26], [-28, -8]];
    pts.forEach(([x, y], i) => { const [x2, y2] = pts[(i + 1) % 5]; o += `<line x1="${cx + x}" y1="${cy + y}" x2="${cx + x2}" y2="${cy + y2}" stroke="${col}" stroke-opacity=".7"/>`; });
    if (k === 0) pts.forEach(([x, y], i) => { o += `<line x1="${cx + x}" y1="${cy + y}" x2="${cx + x * .3}" y2="${cy + y * .3}" stroke="${col}" stroke-opacity=".5" marker-end="url(#ah4)">`; });
    if (k === 1) pts.forEach(([x, y], i) => { const [x2, y2] = pts[(i + 2) % 5]; o += `<line x1="${cx + x}" y1="${cy + y}" x2="${cx + x2}" y2="${cy + y2}" stroke="${col}" stroke-opacity=".35" stroke-dasharray="2 3"><animate attributeName="stroke-dashoffset" values="0;-10" dur="1s" repeatCount="indefinite"/></line>`; });
    if (k === 2) for (let r = 10; r <= 40; r += 10) o += `<circle cx="${cx}" cy="${cy}" r="${r}" fill="none" stroke="${col}" stroke-opacity="${.5 - r / 100}">`;
    pts.forEach(([x, y]) => { o += `<circle cx="${cx + x}" cy="${cy + y}" r="3.5" fill="${col}"/>`; });
    o += T(cx, cy + 74, `${n} · ${sym}`, { fs: 13, w: 700, a: 'middle' }) + T(cx, cy + 90, d, { fs: 9, a: 'middle', op: .7 });
    if (k < 2) o += T(cx + 100, cy + 5, '+', { fs: 22, w: 700, a: 'middle', op: .6 });
  });
  o += `<defs><marker id="ah4" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto"><path d="M0,0 L6,3 L0,6 z" fill="${COLS[2]}" fill-opacity=".7"/></marker></defs>`;
  o += T(380, 205, 'φ ← λ_d·D(φ) + λ_s·S(φ) + λ_h·H(φ)      κ = λ_d·α + λ_s·‖L‖/(‖L‖+μ) + λ_h·e^{−τλ₂} < 1', { fs: 11, w: 700, a: 'middle', ff: MONO });
  o += T(380, 222, 'three local operators, one blend; each step moves at most κ of the way — so the iteration must stop somewhere, and only in one place', { fs: 9, a: 'middle', op: .65 });
  return svgo(W, H, 'the tri-kernel', o);
};


/* kelvin versioning: layers freeze from the bottom */
const kelvinFig = () => {
  const W = 760, H = 230; let o = '';
  const L = [['nox', '0 K', 'frozen · 18 instructions, one field, one hash, one reduction', 1], ['hemera', 'candidate', 'the hash · parameters under review', .8], ['strata · trident', 'cooling', 'the field algebra · the compiler', .6], ['joy · zheng', 'warm', 'the runtime · the proofs', .4], ['cybergraph · foculus', 'warm', 'the book · consensus', .25]];
  L.forEach(([n, t, d, cold], i) => {
    const y = 20 + i * 38, col = cold > .7 ? COLS[4] : cold > .5 ? COLS[5] : COLS[1];
    o += `<rect x="40" y="${y}" width="680" height="30" rx="6" fill="${col}" fill-opacity="${.06 + cold * .18}" stroke="${col}" stroke-opacity="${.3 + cold * .6}"/>`;
    o += T(54, y + 20, n, { fs: 12, w: 700 }) + T(300, y + 20, t, { fs: 11, c: col, ff: MONO }) + T(708, y + 20, d, { fs: 9.5, a: 'end', op: .7 });
    if (i === 0) o += `<rect x="40" y="${y}" width="680" height="30" rx="6" fill="none" stroke="#fff" stroke-opacity=".6"><animate attributeName="stroke-opacity" values=".2;.8;.2" dur="3s" repeatCount="indefinite"/></rect>`;
  });
  o += T(380, 222, 'temperatures only drop · a frozen layer takes no proposals · a program written today proves the same way in fifty years', { fs: 9, a: 'middle', op: .6 });
  return svgo(W, H, 'kelvin versioning', o);
};
/* the loop the money closes */
const loopFig = () => {
  const W = 760, H = 230; let o = '';
  const N = [['learn', 'a link sharpens φ⋆', COLS[3]], ['mint', 'Δφ⁺ proven → CYB', COLS[4]], ['spend', 'inference · storage · bandwidth', COLS[6]], ['grow', 'a better model, for free', COLS[1]]];
  const cx = 380, cy = 112, R = 78;
  N.forEach(([n, d, col], i) => {
    const a = -Math.PI / 2 + i * Math.PI / 2, x = cx + Math.cos(a) * 250, y = cy + Math.sin(a) * R;
    o += `<rect x="${x - 70}" y="${y - 22}" width="140" height="44" rx="10" fill="${col}" fill-opacity=".14" stroke="${col}"/>` + T(x, y - 3, n, { fs: 13, w: 700, a: 'middle' }) + T(x, y + 13, d, { fs: 9, a: 'middle', op: .75 });
    const g = .36, s1 = a + g, s2 = a + Math.PI / 2 - g, p1 = [cx + Math.cos(s1) * 250, cy + Math.sin(s1) * R], p2 = [cx + Math.cos(s2) * 250, cy + Math.sin(s2) * R];
    o += `<path d="M${p1[0].toFixed(1)},${p1[1].toFixed(1)} A250,${R} 0 0 1 ${p2[0].toFixed(1)},${p2[1].toFixed(1)}" fill="none" stroke="currentColor" stroke-opacity=".4" stroke-width="1.5" marker-end="url(#ah5)"/>`;
  });
  o += `<defs><marker id="ah5" markerWidth="8" markerHeight="8" refX="6" refY="4" orient="auto"><path d="M0,0 L8,4 L0,8 z" fill="currentColor" fill-opacity=".6"/></marker></defs>`;
  o += T(cx, cy + 4, '$CYB', { fs: 22, w: 700, a: 'middle' }) + T(cx, cy + 22, 'the money of information', { fs: 9.5, a: 'middle', op: .7 });
  return svgo(W, H, 'the loop the money closes', o);
};
/* three invariants of privacy */
const privacyFig = () => {
  const W = 760, H = 170; let o = '';
  const C = [['the link is public', 'the author is private', 'p → q is seen; which neuron signed is not'], ['balances are private', 'transfers are private', 'stealth addresses and veil'], ['settlement reveals nothing', 'beyond public aggregates', 'a miner\'s neighbourhood stays dark']];
  C.forEach(([a, b, d], i) => {
    const x = 40 + i * 232;
    o += `<rect x="${x}" y="20" width="216" height="120" rx="12" fill="currentColor" fill-opacity=".05" stroke="currentColor" stroke-opacity=".25"/>`;
    o += `<circle cx="${x + 108}" cy="52" r="12" fill="none" stroke="${COLS[5]}" stroke-width="1.5"/><rect x="${x + 100}" y="52" width="16" height="12" rx="2" fill="${COLS[5]}"/>`;
    o += T(x + 108, 88, a, { fs: 11.5, w: 700, a: 'middle' }) + T(x + 108, 104, b, { fs: 11.5, w: 700, a: 'middle' }) + T(x + 108, 124, d, { fs: 9, a: 'middle', op: .7 });
  });
  o += T(380, 162, 'privacy is the third leg of truth: it removes the channel through which a false consensus is coordinated', { fs: 9, a: 'middle', op: .6 });
  return svgo(W, H, 'speak without fear', o);
};
/* every weight has an author */
const traceFig = () => {
  const W = 760, H = 150; let o = '';
  const cols = [['an answer', 'any output of the model', COLS[3]], ['weights', 'the parameters it used', COLS[3]], ['cyberlinks', 'where the weights came from', COLS[1]], ['neurons', 'who signed them · paid', COLS[0]]];
  cols.forEach(([n, d, col], i) => { const x = 40 + i * 180; o += `<rect x="${x}" y="30" width="150" height="60" rx="10" fill="${col}" fill-opacity=".12" stroke="${col}"/>` + T(x + 75, 55, n, { fs: 13, w: 700, a: 'middle' }) + T(x + 75, 74, d, { fs: 8.5, a: 'middle', op: .75 }); if (i < 3) o += `${x + 178}" y2="60" stroke="currentColor" stroke-opacity=".5" marker-end="url(#ah6)"/>`; });
  o += `<defs><marker id="ah6" markerWidth="8" markerHeight="8" refX="6" refY="4" orient="auto"><path d="M0,0 L8,4 L0,8 z" fill="currentColor" fill-opacity=".6"/></marker></defs>`;
  o += T(380, 125, 'attribution is a lookup, not interpretability research · alignment is a number: D_KL between human and machine focus', { fs: 9.5, a: 'middle', op: .65 });
  return svgo(W, H, 'every weight has an author', o);
};

/* ------------------------------------------------------------------ the cybergraph renderer (real data when graph.json is present) */
const cyberGraph = (() => {
  let data = null, cv, ctx, raf = 0, t0 = 0, W = 0, H = 0, mx = -1e9, my = -1e9, adj = null, lastHov = -1;
  const synth = () => { const n = 900, nodes = [], links = []; for (let i = 0; i < n; i++) nodes.push([`synth${i}`, 1, Math.random(), Math.random()]); for (let i = 1; i < n; i++) { const j = Math.floor(Math.pow(Math.random(), 2.2) * i); links.push([i, j]); nodes[j][1]++; nodes[i][1]++; } return { meta: { source: 'synthetic preferential attachment (graph.json not found)', particles_total: n, links_total: links.length, sampled_particles: n, sampled_links: links.length, synthetic: true }, nodes, links }; };
  const load = async () => { try { const r = await fetch('graph.json'); if (!r.ok) throw 0; data = await r.json(); } catch { data = synth(); } prep(); if (!data.meta.synthetic) graph.setReal(data); };
  let maxd = 1, cx = 0, cy = 0;
  let top5 = new Set();
  const prep = () => { adj = data.nodes.map(() => []); for (const [a, b] of data.links) { adj[a].push(b); adj[b].push(a); } maxd = Math.max(...data.nodes.map((n) => n[1])) || 1; top5 = new Set(data.nodes.map((n, i) => [n[1], i]).sort((a, b) => b[0] - a[0]).slice(0, 5).map((x) => x[1])); const xs = data.nodes.map((n) => n[2]), ys = data.nodes.map((n) => n[3]); cx = (Math.min(...xs) + Math.max(...xs)) / 2; cy = (Math.min(...ys) + Math.max(...ys)) / 2; const m = $('#cg-meta'); if (m) m.innerHTML = data.meta.synthetic ? `${M('k')} synthetic placeholder — the real sample is being extracted` : `sample: ${fmt(data.meta.sampled_particles)} particles · ${fmt(data.meta.sampled_links)} cyberlinks · 400 hubs + 800 particles linked into them · outer ring = sampled particles with no in-sample link · hover a particle ${M('m')}`; };
  const draw = () => {
    if (!cv || !data) return;
    const dpr = devicePixelRatio; W = cv.width = cv.clientWidth * dpr; H = cv.height = cv.clientHeight * dpr;
    const t = (performance.now() - t0) / 1000, ang = t * .04, s = Math.min(W, H) * .56, zoom = (1 + .05 * Math.sin(t * .4)) * userZoom;
    const P = data.nodes.map((n) => { const x = (n[2] - cx) * zoom, y = (n[3] - cy) * zoom; const c = Math.cos(ang), sn = Math.sin(ang); return [W / 2 + (x * c - y * sn) * 2 * s, H / 2 + (x * sn + y * c) * 2 * s * .92]; });
    let hov = -1, hd = 18 * dpr; P.forEach((p, i) => { const d = Math.hypot(p[0] - mx, p[1] - my); if (d < hd) { hd = d; hov = i; } }); lastHov = hov; if (hov < 0 && pinned >= 0) hov = pinned;
    ctx.clearRect(0, 0, W, H);
    ctx.lineWidth = .6 * dpr; ctx.strokeStyle = COLS[0]; ctx.globalAlpha = hov < 0 ? .22 : .08;
    ctx.beginPath(); for (const [a, b] of data.links) { ctx.moveTo(P[a][0], P[a][1]); ctx.lineTo(P[b][0], P[b][1]); } ctx.stroke();
    const nb = hov < 0 ? null : new Set(adj[hov]);
    if (nb) { ctx.lineWidth = 1 * dpr; ctx.strokeStyle = '#fff'; ctx.globalAlpha = .85; ctx.beginPath(); for (const j of nb) { ctx.moveTo(P[hov][0], P[hov][1]); ctx.lineTo(P[j][0], P[j][1]); } ctx.stroke(); }
    data.nodes.forEach((n, i) => { const d = n[1] / maxd, r = (1 + 9 * Math.sqrt(d)) * dpr; const lit = nb && (nb.has(i) || i === hov); ctx.globalAlpha = lit ? 1 : (nb ? .25 : .55 + .45 * d); ctx.fillStyle = lit ? '#fff' : d > .35 ? '#fff' : COLS[0]; ctx.beginPath(); ctx.arc(P[i][0], P[i][1], r, 0, Math.PI * 2); ctx.fill(); });
    const labs = [...top5].map((i) => [i, P[i][1]]).sort((a, b) => a[1] - b[1]); for (let k = 1; k < labs.length; k++) if (labs[k][1] - labs[k - 1][1] < 13 * dpr) labs[k][1] = labs[k - 1][1] + 13 * dpr;
    ctx.globalAlpha = .9; ctx.fillStyle = '#fff'; ctx.font = `${10 * dpr}px ${MONO}`; for (const [i, ly] of labs) { const r = (1 + 9 * Math.sqrt(data.nodes[i][1] / maxd)) * dpr; ctx.fillText(`${fmt(data.nodes[i][1])} links`, P[i][0] + r + 3 * dpr, ly + 3 * dpr); }
    if (hov >= 0) { const n = data.nodes[hov]; ctx.font = `${11 * dpr}px ${MONO}`; ctx.fillStyle = '#fff'; ctx.globalAlpha = 1; ctx.fillText(`${n[0]} · ${fmt(n[1])} links on chain · ${adj[hov].length} in sample`, 12 * dpr, 18 * dpr); }
    ctx.globalAlpha = 1; raf = requestAnimationFrame(draw);
  };
  let userZoom = 1, pinned = -1;
  const onMove = (e) => { const r = cv.getBoundingClientRect(); mx = (e.clientX - r.left) * devicePixelRatio; my = (e.clientY - r.top) * devicePixelRatio; };
  const onWheel = (e) => { e.preventDefault(); e.stopPropagation(); userZoom = Math.min(4, Math.max(.6, userZoom * (e.deltaY > 0 ? .92 : 1.08))); };
  const run = (init) => { let phi = null, lastD = 0; return { step() { if (!data) return null; if (!phi) { phi = data.nodes.map(() => init === 'random' ? Math.random() : 1); const z = phi.reduce((a, b) => a + b, 0); phi = phi.map((v) => v / z); } const next = phi.map((v, i) => { const nb = adj[i]; if (!nb.length) return .15 / data.nodes.length; let sum = 0; for (const j of nb) sum += phi[j] / Math.max(1, adj[j].length); return .15 / data.nodes.length + .85 * sum; }); let d = 0; for (let i = 0; i < phi.length; i++) d += Math.abs(next[i] - phi[i]); phi = next; const kap = lastD ? d / lastD : null; lastD = d; return { d, kap }; }, get phi() { return phi; }, reset() { phi = null; lastD = 0; } }; };
  const runA = run('uniform'); const iterate = () => runA.step();
  return { iterate, run, load() { if (!data) load(); }, start() { cv = $('#cg'); if (!cv) return; ctx = cv.getContext('2d'); cv.onmousemove = onMove; cv.onmouseleave = () => { mx = my = -1e9; }; cv.onwheel = onWheel; cv.onclick = () => { pinned = pinned === lastHov ? -1 : lastHov; sfx.tick(); }; t0 = t0 || performance.now(); if (!data) load().then(() => { if (!raf) draw(); }); else if (!raf) draw(); }, stop() { cancelAnimationFrame(raf); raf = 0; } };
})();

/* ------------------------------------------------------------------ slides
   layout grammar: 'one' = statement/figure column (900px, left-aligned); default = two columns (text | figure or panel) */
const S = [
/* 01 · superintelligence */
{ ch: 0, cls: 'one', html: `
  <div><p class="kick">cyber · a frozen protocol for collective lifeforms</p>
  <p class="hero-word">cyber</p>
  <h2>the <em>superintelligence.</em></h2>
  <p class="lead">one focus over everything known, computed from every mind that pays to teach, proven to see what no member sees alone. the graph is the training data. the weights are public. the money is minted when the network learns.</p>
  <div class="tiles"><div class="tile"><b>one focus · φ⋆</b>unique, the same on every node</div><div class="tile"><b>compiled, not trained</b>bostrom → transformer in 62 s</div><div class="tile"><b>frozen foundations</b>one field · one hash · one proof</div><div class="tile"><b>a network of moneys</b>CYB is the root</div></div>
  <p class="kbd">→ or space to move · you will mine as you read</p></div>` },
{ ch: 0, cls: 'ink', html: `
  <div><p class="kick">01 · superintelligence · the definition</p><h2>superintelligence<br><em>is a number.</em></h2>
  <p class="lead">run the same engine on one neuron's private view, then on the whole graph, and score both on prediction. the gap is superadditivity. emergence stops being philosophy the moment it has an error bar.</p>
  <p class="mute">no individual ant understands the colony. the colony understands itself.</p></div>
  <div class="nums"><div class="n"><big>κ &lt; 1</big><small>the kernel contracts · a theorem</small></div><div class="n"><big>σ<span class="f">_best</span> &gt; 0</big><small>the graph out-predicts its strongest neuron · 34-node benchmark ${M('m')}</small></div><div class="n"><big>1</big><small>fixed point · ranks, prices and compiles</small></div><div class="n"><big>0</big><small>votes between a claim and its rank</small></div></div>` },
{ ch: 0, cls: 'one', bridge: 'a graph like this accepts exactly one kind of statement. that is the anatomy.', html: `
  <div><p class="kick">01 · superintelligence · the cybergraph · bostrom, sealed 2026-08-05</p>
  <h2>this is the <em>cybergraph.</em></h2>
  <div class="cgwrap"><canvas id="cg"></canvas><div class="cgcap"><span id="cg-meta">loading…</span><span>3,143,650 particles · 2,949,732 cyberlinks · 61,675 neurons ${M('m')}</span></div></div>
  <p class="mute">every dot is a content-addressed file; every line a staked claim that two of them belong together. no editor, no schema, no operator. hover a particle.</p></div>` },

/* 02 · anatomy */
{ ch: 1, cls: 'one wash', html: `
  <div><p class="kick">02 · anatomy · the cyberlink</p><h2>the only statement<br><em>the graph accepts.</em></h2>
  ${linkFig()}
  <p class="mute">five stored fields, three concepts. there is no type field: a label is itself a cyberlink onto the edge, so relation types are ranked like everything else.</p></div>` },
{ ch: 1, cls: 'one wash', html: `
  <div><p class="kick">02 · anatomy · the signal</p><h2>a message that<br><em>carries its own proof.</em></h2>
  ${signalFig()}
  <p class="mute"><span class="f">s = (ν, ℓ, Δφ⋆, σ, prev, mc, vdf, step, nonce)</span> · who, what, how much the picture sharpened, and one zheng proof over all of it. any verifier runs decide(σ) in O(log n). the unit of gossip, of settlement, and of mining.</p></div>` },
{ ch: 1, cls: 'ink', bridge: 'statements pile up. what makes one picture out of millions of them? the kernel.', html: `
  <div><p class="kick">02 · anatomy · do it</p><h2>link two things.<br><em>you just grew the graph.</em></h2>
  <p class="lead">the kernel reruns with your link and without it; the downhill difference in φ⋆ is yours. a perfect copy moves focus by zero: copying earns nothing.</p></div>
  <div class="panel"><label>this</label><input type="text" id="link-a" placeholder="a thing you know" value="proof of work"><div class="chips" id="chips-a"></div><label>belongs with</label><input type="text" id="link-b" placeholder="what it belongs with" value="Shapley sampling"><div class="chips" id="chips-b"></div><div class="row"><button class="btn" id="link-go">link · stake it</button><span class="fine">a throwaway neuron in your browser ${M('k')}</span></div><div class="out" id="link-out">your links land in the graph behind this deck.</div></div>` },

/* 03 · focus */
{ ch: 2, cls: 'one wash', html: `
  <div><p class="kick">03 · focus · here the magic starts</p><h2>three local maps,<br><em>one contraction.</em></h2>
  ${triFig()}
  <div class="panel slim"><div class="cbars" id="kernel-chart"></div><div class="row"><button class="btn" id="kernel-run">iterate ×12</button><span class="hash" id="kernel-delta" style="margin:0">‖Δφ‖ per step on the real sample — press iterate</span><span class="count" id="kernel-iter" style="font-size:26px;margin-left:auto">0</span></div></div></div>` },
{ ch: 2, cls: 'ink', html: `
  <div><p class="kick">03 · focus · the fixed point</p><h2>any start.<br><em>the same end.</em></h2>
  <p class="lead">a contraction has exactly one fixed point (Banach); on a token-weighted graph it is a positive distribution (Perron–Frobenius). call it φ⋆: the only place the iteration can stop.</p>
  <p class="mute">the same number on every node. computable from an O(log 1/ε)-hop neighbourhood. reached in a constant number of steps, so it can be proven.</p></div>
  <div class="panel"><label>two strangers, one focus · two random starts on the real sample</label><div class="cbars" id="unique-chart"></div><div class="row"><button class="btn" id="unique-run">run both</button><span class="hash" id="unique-out" style="margin:0">‖φ_A − φ_B‖₁ —</span></div><p class="fine">from unrelated starts the two runs meet to within 10⁻⁶: uniqueness demonstrated, not asserted ${M('k')}</p></div>` },
{ ch: 2, cls: 'one wash', bridge: 'one focus, on every world. a focus is a distribution — and a distribution can be compiled.', html: `
  <div><p class="kick">03 · focus · interplanetary</p><h2>one mind <em>across worlds.</em></h2>
  ${planetFig()}
  <p class="mute">earth to mars is 4–24 minutes one way; every protocol that counts votes is already dead at that distance. here a fact is final when enough attention has gathered — an information condition, not a clock. each planet is its own pond; a dark link freezes trade and never invents two truths.</p></div>` },

/* 04 · compile */
{ ch: 3, cls: 'one wash', html: `
  <div><p class="kick">04 · compile · the pitch</p><h2>we compile the graph<br><em>into a transformer.</em></h2>
  ${compileFig()}
  <p class="mute">attention is one step of the same convergent system that computes φ⋆. so a transformer's three free parameters are read off the graph — its covariance, its dialects, its diameter — and the weights are compiled from structure, not learned from text.</p></div>` },
{ ch: 3, cls: 'ink', html: `
  <div><p class="kick">04 · compile · the bootloader corpus, compiled</p><h2>62 seconds.<br><em>the whole chain's mind.</em></h2>
  <p class="lead">the final bostrom snapshot — 2,949,732 cyberlinks over 3,143,650 particles — compiled into a transformer on one machine with 20 GB of RAM.</p></div>
  <div class="nums"><div class="n"><big>31</big><small>d⋆ · embedding dimension = <span class="f">exp H(σ(Σ_φ⋆))</span> ${M('m')}