Rebuild leaderboard around the tree-ring story

app.js

@@ -1,192 +1,267 @@
 /* FinDendro leaderboard: every number comes from data.js. */
+document.documentElement.classList.add('js');
 const D = window.FD, M = D.models, CH = D.meta.chance;
+const FRONT = M.filter(m => !m.small);
 const $ = (s, el = document) => el.querySelector(s);
+const $$ = (s, el = document) => [...el.querySelectorAll(s)];
 const f2 = v => v.toFixed(2).replace('-', '−');
 const f3 = v => (v > 0 ? '+' : '') + v.toFixed(3).replace('-', '−');
 const pct = v => Math.round(v * 100) + '%';
 const by = name => M.find(m => m.model === name);
-const quarters = (a, b) => { const q = s => +s.slice(0, 4) * 4 + +s.slice(5); return q(b) - q(a); };
+const qn = s => +s.slice(0, 4) * 4 + +s.slice(5);
+const quarters = (a, b) => qn(b) - qn(a);
+const qX = s => +s.slice(0, 4) + (+s.slice(5) - .5) / 4;
+const ymX = s => { const [y, m] = s.split('-').map(Number); return y + (m - .5) / 12; };
+const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
 const NS = 'http://www.w3.org/2000/svg';
-const KNOWS = 'var(--knows)', SAYS = 'var(--says)', CHANCE = 'var(--chance)';
+const add = (p, tag, attrs, text) => { const e = document.createElementNS(NS, tag); for (const k in attrs) e.setAttribute(k, attrs[k]); if (text != null) e.textContent = text; p.appendChild(e); return e; };
+const svg = (w, h, label) => { const s = document.createElementNS(NS, 'svg'); s.setAttribute('viewBox', `0 0 ${w} ${h}`); s.setAttribute('width', '100%'); s.setAttribute('role', 'img'); s.setAttribute('aria-label', label); s.style.display = 'block'; return s; };
+const mix = (a, b, t) => '#' + a.map((v, i) => Math.round(v + (b[i] - v) * Math.max(0, Math.min(1, t))).toString(16).padStart(2, '0')).join('');
+const WOOD = [243, 236, 220], TEAL = [8, 96, 88], RUST = [201, 82, 28], PALE = [241, 244, 238], HEAT = [10, 125, 116];
 
-/* tooltip: any element with data-tip */
+/* tooltip */
 const tip = $('#tip');
-const showTip = (html, e) => {
-  tip.innerHTML = html; tip.classList.add('show');
-  const w = tip.offsetWidth, h = tip.offsetHeight;
-  tip.style.transform = `translate(${Math.max(8, Math.min(innerWidth - w - 8, e.clientX + 12))}px,${e.clientY - h - 12 < 8 ? e.clientY + 16 : e.clientY - h - 12}px)`;
-};
+const showTip = (html, e) => { tip.innerHTML = html; tip.classList.add('show'); const w = tip.offsetWidth, h = tip.offsetHeight; tip.style.transform = `translate(${Math.max(8, Math.min(innerWidth - w - 8, e.clientX + 12))}px,${e.clientY - h - 12 < 8 ? e.clientY + 16 : e.clientY - h - 12}px)`; };
 const hideTip = () => tip.classList.remove('show');
-document.addEventListener('pointermove', e => {
-  const t = e.target.closest && e.target.closest('[data-tip]');
-  if (t) showTip(t.dataset.tip, e); else if (!e.target.closest || !e.target.closest('.chart')) hideTip();
-});
+document.addEventListener('pointermove', e => { const t = e.target.closest && e.target.closest('[data-tip]'); if (t) showTip(t.dataset.tip, e); else if (!(e.target.closest && e.target.closest('.live'))) hideTip(); });
 
-function svg(w, h, label) {
-  const s = document.createElementNS(NS, 'svg');
-  s.setAttribute('viewBox', `0 0 ${w} ${h}`); s.setAttribute('width', '100%'); s.setAttribute('role', 'img'); s.setAttribute('aria-label', label);
-  s.style.display = 'block';
-  return s;
-}
-function add(p, tag, attrs, text) {
-  const e = document.createElementNS(NS, tag);
-  for (const k in attrs) e.setAttribute(k, attrs[k]);
-  if (text != null) e.textContent = text;
-  p.appendChild(e); return e;
-}
+/* scroll, reveal, nav */
+const prog = $('#progress'), head = $('#header');
+const onScroll = () => { const h = document.documentElement; prog.style.transform = `scaleX(${h.scrollTop / Math.max(1, h.scrollHeight - h.clientHeight)})`; head.classList.toggle('scrolled', h.scrollTop > 12); };
+addEventListener('scroll', onScroll, { passive: true }); onScroll();
+const io = new IntersectionObserver(es => es.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }), { rootMargin: '0px 0px -6% 0px' });
+$$('.reveal').forEach(el => io.observe(el));
+setTimeout(() => $$('.reveal').forEach(el => el.classList.add('in')), 2200);
+const nav = new IntersectionObserver(es => es.forEach(e => { if (e.isIntersecting) $$('#navLinks a').forEach(a => a.classList.toggle('active', a.dataset.sec === e.target.id)); }), { rootMargin: '-40% 0px -55% 0px' });
+$$('#navLinks a').forEach(a => { const s = document.getElementById(a.dataset.sec); if (s) nav.observe(s); });
 
-/* hero background: one ring per year, darker where GPT-5 was more accurate */
-(function rings() {
-  const s = $('#rings'), years = {};
-  D.timeline['GPT-5'].forEach(r => { const y = Math.floor(r.x); (years[y] = years[y] || []).push(r.acc); });
-  Object.keys(years).sort().forEach((y, i, all) => {
-    const a = years[y].reduce((p, q) => p + q, 0) / years[y].length;
-    add(s, 'circle', { cx: 0, cy: 0, r: 40 + i * 10.4, fill: 'none', stroke: '#1f4fb8', 'stroke-width': 1 + a * 3.4, 'stroke-opacity': (0.03 + a * a * 0.2).toFixed(3) });
-  });
+/* pixel woodpecker, tapping at the rings */
+(function bird() {
+  const P = { k: '#10201c', r: '#c9521c', w: '#f4f1e6', t: '#0a7d74', y: '#d9962b' };
+  const A = ['....rr......', '...rrrr.....', '..kkkkkk....', '.kkwkkkk....', 'yykkkkkkk...', '..kkttkkkk..', '...kttttkkk.', '....tttttkk.', '.....kk.ttkk', '.....y.y...k'];
+  const B = A.map((r, i) => i < 5 ? '.' + r.slice(0, 11) : r);
+  const c = document.createElement('canvas'); c.width = 12; c.height = 12; $('#bird').appendChild(c);
+  const g = c.getContext('2d');
+  const draw = f => { g.clearRect(0, 0, 12, 12); f.forEach((r, y) => [...r].forEach((p, x) => { if (P[p]) { g.fillStyle = P[p]; g.fillRect(x, y + 1, 1, 1); } })); };
+  draw(A);
+  if (!reduce) { let n = 0; setInterval(() => { n = (n + 1) % 8; draw(n < 4 && n % 2 ? B : A); }, 170); }
 })();
 
-$('#stats').innerHTML = [
-  [D.meta.facts.toLocaleString('en-US'), 'dated facts'],
-  [D.meta.prompts.toLocaleString('en-US'), 'prompts per model'],
-  [`${D.meta.from}–${D.meta.to}`, 'calendar span'],
-  [M.length + D.pit.length, 'models and vintages'],
-].map(([b, s]) => `<div class="stat"><b>${b}</b><span>${s}</span></div>`).join('');
+/* hero */
+(function stats() {
+  const items = [[D.meta.facts, 'dated facts', v => v.toLocaleString('en-US')], [D.meta.prompts, 'prompts per model', v => v.toLocaleString('en-US')], [D.meta.to - D.meta.from + 1, 'years of markets', v => v], [M.length + D.pit.length, 'models and vintages', v => v]];
+  $('#stats').innerHTML = items.map(([v, s, f], i) => `<div class="stat"><b data-i="${i}">${f(v)}</b><span>${s}</span></div>`).join('');
+  if (reduce) return;
+  items.forEach(([v, , f], i) => { const el = $(`.stat b[data-i="${i}"]`), t0 = performance.now(); (function step(t) { const p = Math.min(1, (t - t0) / 1100), e = 1 - Math.pow(1 - p, 3); el.textContent = f(Math.round(v * e)); if (p < 1) requestAnimationFrame(step); })(t0); });
+})();
+(function rotator() {
+  const el = $('#rotator'), names = M.map(m => m.model); let i = 0; el.textContent = names[0];
+  if (reduce) return;
+  setInterval(() => { el.classList.add('off'); setTimeout(() => { i = (i + 1) % names.length; el.textContent = names[i]; el.classList.remove('off'); }, 260); }, 2200);
+})();
+(function ticker() {
+  const items = [...M].sort((a, b) => b.knows - a.knows).map((m, i) => `<span class="tk"><i>#${i + 1}</i><b>${m.model}</b>knows <u>${f2(m.knows)}</u> · says <s>${f2(m.says)}</s></span>`).join('');
+  $('#tickerTrack').innerHTML = items + items + items + items;
+})();
 
-/* horizontal dumbbell on a shared 0..1 axis; values sit in a column at the right so labels never meet */
-function dumbbell(el, rows, opts = {}) {
-  const W = opts.W || 520, L = opts.L || 112, R = 92, T = 8, rowH = opts.rowH || 34, H = T + rows.length * rowH + 24, sep = opts.sep || ' / ';
-  const s = svg(W, H, opts.label || 'Knows and says it knows by model');
-  const x = v => L + v * (W - L - R);
-  [0, .25, .5, .75, 1].forEach(v => {
-    add(s, 'line', { x1: x(v), x2: x(v), y1: T, y2: H - 22, stroke: 'rgba(24,56,152,.09)' });
-    add(s, 'text', { x: x(v), y: H - 6, 'text-anchor': 'middle', 'font-size': 11, fill: 'var(--soft)' }, v.toFixed(2));
+/* cross-section: right half is what the model knows, left half what it says it knows */
+let xsAuto = null;
+function arc(r, a0, a1) { const p = a => [(r * Math.cos(a)).toFixed(2), (r * Math.sin(a)).toFixed(2)]; const [x0, y0] = p(a0), [x1, y1] = p(a1); return `M${x0},${y0}A${r},${r} 0 0 1 ${x1},${y1}`; }
+function drawXS(name) {
+  const m = by(name), S = D.timeline[name], s = svg(500, 500, `${name} cross-section. Knowledge ends ${m.know_end}, claims end ${m.claim_end}.`);
+  s.setAttribute('viewBox', '-250 -250 500 500'); s.classList.add('live');
+  let r = 20; add(s, 'circle', { r: 16, fill: mix(WOOD, TEAL, .12) });
+  const after = (p, end) => p.length > 4 && qn(p) > qn(end);
+  S.forEach((p, i) => {
+    const w = p.p.length === 4 ? 6.4 : 3.1, rr = r + w / 2;
+    const kCol = after(p.p, m.know_end) ? mix(WOOD, TEAL, .05) : mix(WOOD, TEAL, (p.acc - CH) / (1 - CH) * .94 + .06);
+    const cCol = after(p.p, m.claim_end) ? mix(WOOD, RUST, .05) : mix(WOOD, RUST, p.claim * .94 + .06);
+    const g = add(s, 'g', { class: 'grow' }); g.style.animationDelay = (i * 15) + 'ms';
+    add(g, 'path', { d: arc(rr, -Math.PI / 2, Math.PI / 2), fill: 'none', stroke: kCol, 'stroke-width': w - .45 });
+    add(g, 'path', { d: arc(rr, Math.PI / 2, Math.PI * 1.5), fill: 'none', stroke: cCol, 'stroke-width': w - .45 });
+    p._r0 = r; p._r1 = r + w; r += w;
   });
-  if (!opts.noChance) add(s, 'line', { x1: x(CH), x2: x(CH), y1: T, y2: H - 22, stroke: CHANCE, 'stroke-width': 1.4, 'stroke-dasharray': '3 3' });
-  rows.forEach((r, i) => {
-    const y = T + rowH * (i + .5);
-    add(s, 'text', { x: L - 12, y: y + 4, 'text-anchor': 'end', 'font-size': 12.5, fill: 'var(--ink)' }, r.label);
-    add(s, 'line', { x1: x(r.a), x2: x(r.b), y1: y, y2: y, stroke: 'rgba(15,21,40,.22)', 'stroke-width': 2 });
-    [[r.a, KNOWS], [r.b, SAYS]].forEach(([v, c]) => add(s, 'circle', { cx: x(v), cy: y, r: 6.5, style: `fill:${c};stroke:#fff;stroke-width:2` }));
-    add(s, 'text', { x: W, y: y + 4, 'text-anchor': 'end', 'font-size': 12, fill: 'var(--soft)', style: 'font-variant-numeric:tabular-nums' }, f2(r.a) + sep + f2(r.b));
-    const hit = add(s, 'rect', { x: L - 4, y: y - rowH / 2, width: W - L + 4, height: rowH, fill: 'transparent' });
-    hit.dataset.tip = `<b>${r.label}</b><br>${r.aName || 'Knows'} ${f2(r.a)}<br>${r.bName || 'Says it knows'} ${f2(r.b)}`;
+  const ring = (p, a0, a1, col) => { if (p) add(s, 'path', { d: arc(p._r1, a0, a1), fill: 'none', stroke: col, 'stroke-width': 2.2 }); };
+  ring(S.find(p => p.p === m.know_end), -Math.PI / 2, Math.PI / 2, '#10201c');
+  ring(S.find(p => p.p === m.claim_end), Math.PI / 2, Math.PI * 1.5, '#10201c');
+  add(s, 'line', { x1: 0, x2: 0, y1: -r - 2, y2: r + 2, stroke: '#fff', 'stroke-width': 2.5 });
+  s.addEventListener('pointermove', e => {
+    const b = s.getBoundingClientRect(), dx = (e.clientX - b.left) / b.width * 500 - 250, dy = (e.clientY - b.top) / b.height * 500 - 250, d = Math.hypot(dx, dy);
+    const p = S.find(q => d >= q._r0 && d < q._r1);
+    if (p) showTip(`<b>${p.p}</b><br>Knows ${f2(p.acc)}<br>Says ${f2(p.claim)}`, e); else hideTip();
   });
-  el.replaceChildren(s);
+  s.addEventListener('pointerleave', hideTip);
+  $('#xs').replaceChildren(s);
+  $('#xsEnds').innerHTML = [['Knows', f2(m.knows)], ['Says', f2(m.says)], ['Knowledge ends', m.know_end], ['Claims end', m.claim_end]].map(([a, b]) => `<div><b>${b}</b>${a}</div>`).join('');
+  $$('#xsChips .chip').forEach(c => c.setAttribute('aria-selected', c.dataset.m === name));
 }
-dumbbell($('#dumbbell'), M.map(m => ({ label: m.model, a: m.knows, b: m.says })));
+$('#xsChips').innerHTML = FRONT.map(m => `<button class="chip" role="tab" data-m="${m.model}" type="button">${m.model}</button>`).join('');
+$$('#xsChips .chip').forEach(c => c.onclick = () => { clearInterval(xsAuto); drawXS(c.dataset.m); });
+drawXS(FRONT[0].model);
+if (!reduce) { let i = 0; xsAuto = setInterval(() => { if (document.hidden) return; i = (i + 1) % FRONT.length; drawXS(FRONT[i].model); }, 6000); }
+
+/* replay: the reader answers, then the recorded answers appear */
+(function replay() {
+  const P = D.pool, tally = { You: [0, 0] }; FRONT.forEach(m => tally[m.model] = [0, 0]);
+  let i = 0, done = false;
+  const val = (f, r) => (f.opts.find(o => o[0] === r) || [, ''])[1].replace(/ USD$| JPY per USD$/, '');
+  const months = ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May', 'Jun.', 'Jul.', 'Aug.', 'Sep.', 'Oct.', 'Nov.', 'Dec.'];
+  function score() { const [a, b] = tally.You; $('#aScore').textContent = b ? `You ${a} of ${b}` : ''; }
+  function rows(f, show) {
+    $('#aRows').innerHTML = FRONT.map(m => {
+      const a = f.ans[m.model].r, t = tally[m.model];
+      if (!show) return `<div class="a-row"><span class="a-m">${m.model}</span><span class="a-v wait">?</span><span class="a-s wait">waiting for your answer</span><span class="a-tally"></span></div>`;
+      if (!a) return `<div class="a-row"><span class="a-m">${m.model}</span><span class="a-v wait">n/a</span><span class="a-s wait">gave no usable answer</span><span class="a-tally">${t[0]} of ${t[1]}</span></div>`;
+      const ok = a[1] === f.true;
+      return `<div class="a-row"><span class="a-m">${m.model}</span><span class="a-v ${ok ? 'ok' : 'no'}">${val(f, a[1])}</span><span class="a-s ${a[0] ? 'know' : 'deny'}">${a[0] ? '“I know this value.”' : '“I do not know this value.”'}</span><span class="a-tally">${t[0]} of ${t[1]}</span></div>`;
+    }).join('');
+  }
+  function load() {
+    const f = P[i]; done = false;
+    const [y, mo] = f.period.split('-');
+    $('#qKick').textContent = `${f.family} · ${months[+mo - 1]} ${y}`;
+    $('#qN').textContent = `Fact ${i + 1} of ${P.length}`;
+    $('#qText').textContent = f.q.replace(/ Use FRED series.*$| Round to .*$/, '');
+    const box = $('#qOpts'); box.replaceChildren();
+    [...f.opts].sort((a, b) => (+a[1].replace(/[^\d.-]/g, '') || 0) - (+b[1].replace(/[^\d.-]/g, '') || 0)).forEach(o => {
+      const b = document.createElement('button'); b.type = 'button'; b.className = 'q-opt'; b.dataset.r = o[0];
+      const t = document.createElement('span'); t.textContent = o[1]; b.appendChild(t);
+      b.onclick = () => finish(o[0]); box.appendChild(b);
+    });
+    $('#qReveal').hidden = false; $('#qNext').hidden = true; $('#aPunch').hidden = true;
+    rows(f, false); score();
+  }
+  function finish(pick) {
+    if (done) return; done = true;
+    const f = P[i];
+    if (pick != null) { tally.You[1]++; if (pick === f.true) tally.You[0]++; }
+    FRONT.forEach(m => { const a = f.ans[m.model].r; if (a) { tally[m.model][1]++; if (a[1] === f.true) tally[m.model][0]++; } });
+    $$('.q-opt').forEach(b => { b.disabled = true; const r = +b.dataset.r; if (r === f.true) b.classList.add('right'); if (r === pick) b.classList.add('you'); });
+    rows(f, true); score();
+    const leak = FRONT.filter(m => { const a = f.ans[m.model].r; return a && !a[0] && a[1] === f.true; }).map(m => m.model);
+    const p = $('#aPunch');
+    if (leak.length) { p.textContent = `${leak.join(', ')} denied knowing it and picked the published value anyway.`; p.hidden = false; }
+    $('#qReveal').hidden = true; $('#qNext').hidden = false;
+  }
+  $('#qReveal').onclick = () => finish(null);
+  $('#qNext').onclick = () => { i = (i + 1) % P.length; load(); };
+  load();
+})();
 
 /* leaderboard */
-const COLS = [
-  ['model', 'Model', 'left'], ['knows', 'Knows'], ['says', 'Says'], ['acc_says', 'Acc | says'], ['acc_denies', 'Acc | denies'],
-  ['gap', 'Gap [95% CI]'], ['know_end', 'Knowledge ends'], ['claim_end', 'Claims end'], ['self_report', 'Self-report'], ['vendor_cutoff', 'Vendor'],
-];
-let sortK = 'knows', sortDir = -1;
+const COLS = [['model', 'Model', 'left'], ['knows', 'Knows', 'heat'], ['says', 'Says', 'heat'], ['acc_says', 'Right when claiming', 'heat'], ['acc_denies', 'Right when denying', 'heat'], ['gap', 'Gap [95% CI]'], ['know_end', 'Knowledge ends'], ['claim_end', 'Claims end']];
+let sortK = 'knows', sortDir = -1, openM = null;
+const heat = v => { const t = Math.max(0, Math.min(1, (v - .15) / .8)); return `background:${mix(PALE, HEAT, t)};color:${t > .55 ? '#fff' : 'var(--ink)'}`; };
+function detail(m) {
+  const fam = D.family[m.model];
+  const lines = fam ? Object.keys(fam).map(k => `<div class="dt-line"><span>${k}</span><b>knows ${f2(fam[k].know)} · says ${f2(fam[k].says)}</b></div>`).join('') : '<p>Not broken down for the small open models.</p>';
+  const lag = m.know_end ? quarters(m.know_end, m.claim_end) : null;
+  const read = m.know_end ? (lag > 1 ? `Keeps claiming knowledge for ${lag} quarters after it stops knowing.` : 'Its claims stop within a quarter of its knowledge.') : 'Accuracy sits too close to chance for the rule to locate an end.';
+  return `<div class="dt"><div><h4>Reading</h4><p>${read}</p><div class="dt-line" style="margin-top:8px"><span>Says when asked</span><b>${m.self_report || 'n/a'}</b></div><div class="dt-line"><span>Vendor cutoff</span><b>${m.vendor_cutoff || 'n/a'}</b></div></div>
+    <div><h4>By fact family</h4>${lines}</div>
+    <div><h4>With a declared date</h4><div class="dt-line"><span>Claims to already know</span><b>${f2(m.claims)} → ${f2(m.claims_declared)}</b></div><div class="dt-line"><span>Accuracy</span><b>${f2(m.acc)} → ${f2(m.acc_declared)}</b></div></div></div>`;
+}
 function renderLB() {
-  const rows = [...M].sort((a, b) => {
-    const x = a[sortK], y = b[sortK];
-    if (x == null && y == null) return 0;
-    if (x == null) return 1;
-    if (y == null) return -1;
-    return (x < y ? -1 : x > y ? 1 : 0) * sortDir;
-  });
-  const head = `<thead><tr><th class="left">#</th>${COLS.map(([k, t, c]) =>
-    `<th data-k="${k}" tabindex="0" role="button" class="${c || ''}${k === sortK ? ' on' : ''}"${k === sortK ? ` aria-sort="${sortDir < 0 ? 'descending' : 'ascending'}"` : ''}>${t}${k === sortK ? (sortDir < 0 ? ' ↓' : ' ↑') : ''}</th>`).join('')}</tr></thead>`;
+  const rows = [...M].sort((a, b) => { const x = a[sortK], y = b[sortK]; if (x == null && y == null) return 0; if (x == null) return 1; if (y == null) return -1; return (x < y ? -1 : x > y ? 1 : 0) * sortDir; });
   const na = '<span class="na">n/a</span>';
+  const head = `<thead><tr><th>#</th>${COLS.map(([k, t, c]) => `<th data-k="${k}" tabindex="0" role="button" class="${c === 'left' ? 'left' : ''}${k === sortK ? ' on' : ''}">${t}${k === sortK ? (sortDir < 0 ? ' ↓' : ' ↑') : ''}</th>`).join('')}<th></th></tr></thead>`;
   const body = rows.map((m, i) => {
-    const lag = m.know_end && quarters(m.know_end, m.claim_end) > 1;
-    return `<tr><td class="left rank">${i + 1}</td>
-      <td class="left"><span class="mname">${m.model}</span><span class="vendor">${m.vendor}</span>${m.small ? '<span class="chip">small</span>' : ''}</td>
-      <td><span class="bar"><i><b style="width:${m.knows * 100}%"></b><u style="left:${CH * 100}%"></u></i>${f2(m.knows)}</span></td>
-      <td>${f2(m.says)}</td><td>${f2(m.acc_says)}</td><td>${f2(m.acc_denies)}</td>
+    const lag = m.know_end && quarters(m.know_end, m.claim_end) > 1, open = openM === m.model;
+    return `<tr class="row${open ? ' open' : ''}" data-m="${m.model}" tabindex="0" aria-expanded="${open}"><td><span class="pos ${i < 3 ? 'p' + (i + 1) : ''}">${i + 1}</span></td>
+      <td class="left"><span class="mname">${m.model}</span><span class="mv">${m.vendor}</span>${m.small ? '<span class="tag">small</span>' : ''}</td>
+      ${['knows', 'says', 'acc_says', 'acc_denies'].map(k => `<td><span class="heat" style="${heat(m[k])}">${f2(m[k])}</span></td>`).join('')}
       <td>${f2(m.gap)}<span class="ci">[${f2(m.gap_lo)}, ${f2(m.gap_hi)}]</span></td>
-      <td>${m.know_end || na}</td><td${lag ? ' class="flag"' : ''}>${m.claim_end || na}</td>
-      <td>${m.self_report || na}</td><td>${m.vendor_cutoff || na}</td></tr>`;
+      <td>${m.know_end || na}</td><td class="${lag ? 'late' : ''}">${m.claim_end || na}</td><td><span class="chev">›</span></td></tr>` +
+      (open ? `<tr class="detail"><td colspan="${COLS.length + 2}">${detail(m)}</td></tr>` : '');
   }).join('');
-  const t = $('#lb');
-  t.innerHTML = head + `<tbody>${body}</tbody>`;
-  t.querySelectorAll('th[data-k]').forEach(th => {
-    const go = () => { const k = th.dataset.k; if (k === sortK) sortDir = -sortDir; else { sortK = k; sortDir = k === 'model' ? 1 : -1; } renderLB(); };
-    th.onclick = go;
-    th.onkeydown = e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); go(); } };
-  });
+  const t = $('#lb'); t.innerHTML = head + `<tbody>${body}</tbody>`;
+  $$('th[data-k]', t).forEach(th => { const go = () => { const k = th.dataset.k; if (k === sortK) sortDir = -sortDir; else { sortK = k; sortDir = k === 'model' ? 1 : -1; } renderLB(); }; th.onclick = go; th.onkeydown = e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); go(); } }; });
+  $$('tr.row', t).forEach(r => { const go = () => { openM = openM === r.dataset.m ? null : r.dataset.m; renderLB(); }; r.onclick = go; r.onkeydown = e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); go(); } }; });
 }
-renderLB();
+openM = FRONT[0].model; renderLB();
 
-/* findings, written from the data */
-(function findings() {
-  const g = by('GPT-5'), l = by('Llama-3.3-70B');
-  const items = [
-    [`${f2(g.knows)} known, ${f2(g.says)} claimed`, `GPT-5 answers ${pct(g.knows)} of controlled facts correctly and says it knows ${pct(g.says)} of them.`],
-    [`${f2(g.acc_denies)} on denied facts`, `When GPT-5 says it does not know a value, it still picks the right one ${pct(g.acc_denies)} of the time. Chance is about ${pct(CH)}.`],
-    [`${quarters(l.know_end, l.claim_end)} quarters of empty claims`, `Llama-3.3-70B stops knowing after ${l.know_end} and keeps claiming knowledge until ${l.claim_end}.`],
-  ];
-  $('#findings').innerHTML = items.map(([n, t]) => `<div class="card"><div class="num">${n}</div><p>${t}</p></div>`).join('');
-})();
+/* cutoff calendar: one row per model */
+function drawCalendar() {
+  const el = $('#calendar'), W = Math.max(340, el.clientWidth || 900), small = W < 560, L = small ? 76 : 118, R = 54, T = 8, rowH = 58, x0 = 2021, x1 = 2025.25, H = T + rowH * FRONT.length + 24;
+  const s = svg(W, H, 'Knowledge end, claims end, self-reported and vendor cutoffs by model'); const x = v => L + (v - x0) / (x1 - x0) * (W - L - R);
+  for (let y = 2021; y <= 2025; y++) { add(s, 'line', { x1: x(y), x2: x(y), y1: T, y2: H - 22, stroke: 'rgba(14,84,70,.09)' }); add(s, 'text', { x: x(y), y: H - 6, 'text-anchor': 'middle', 'font-size': 11.5, fill: 'var(--soft)' }, y); }
+  FRONT.forEach((m, i) => {
+    const y = T + rowH * (i + .5), kx = x(qX(m.know_end)), cx = x(qX(m.claim_end));
+    add(s, 'text', { x: L - 14, y: y + 4, 'text-anchor': 'end', 'font-size': small ? 11 : 13, 'font-weight': 500, fill: 'var(--ink)' }, small ? m.model.replace('-70B', '').replace('DeepSeek-', 'DS-') : m.model);
+    add(s, 'line', { x1: L, x2: W - R, y1: y + rowH / 2, y2: y + rowH / 2, stroke: 'rgba(14,84,70,.07)' });
+    if (cx > kx) add(s, 'rect', { x: kx, y: y - 18, width: cx - kx, height: 36, style: 'fill:var(--says);opacity:.16', rx: 3 });
+    const lag = quarters(m.know_end, m.claim_end);
+    if (lag > 1) add(s, 'text', { x: (kx + cx) / 2, y: y + 4, 'text-anchor': 'middle', 'font-size': 12, 'font-weight': 500, fill: '#b34a17' }, `${lag} quarters`);
+    const hit = (cxv, label, val, draw) => { draw(); const r = add(s, 'circle', { cx: cxv, cy: y, r: 16, fill: 'transparent' }); r.dataset.tip = `<b>${m.model}</b><br>${label}: ${val}`; };
+    if (m.vendor_cutoff) { const v = x(ymX(m.vendor_cutoff)); hit(v, 'Vendor cutoff', m.vendor_cutoff, () => add(s, 'rect', { x: v - 5, y: y + 8, width: 10, height: 10, style: 'fill:#fff;stroke:var(--vendor);stroke-width:2' })); }
+    const sv = x(ymX(m.self_report)); hit(sv, 'Says when asked', m.self_report, () => add(s, 'path', { d: `M${sv},${y - 19}l6,11h-12z`, style: 'fill:var(--ink)' }));
+    hit(cx, 'Claims end', m.claim_end, () => add(s, 'rect', { x: cx - 5.5, y: y - 5.5, width: 11, height: 11, transform: `rotate(45 ${cx} ${y})`, style: 'fill:var(--says);stroke:#fff;stroke-width:1.5' }));
+    hit(kx, 'Knowledge ends', m.know_end, () => add(s, 'circle', { cx: kx, cy: kx === cx ? y - 11 : y, r: 6.5, style: 'fill:var(--knows);stroke:#fff;stroke-width:1.5' }));
+  });
+  el.replaceChildren(s);
+}
 
-/* timeline small multiples */
-function ymX(s) { const [y, m] = s.split('-').map(Number); return y + (m - .5) / 12; }
-function qX(s) { return +s.slice(0, 4) + (+s.slice(5) - .5) / 4; }
-function drawPanel(el, m) {
-  const W = Math.max(320, el.clientWidth || 520), H = 230, L = 34, R = 12, T = 10, B = 26, x0 = 2017, x1 = 2026.9;
-  const pts = D.timeline[m.model].filter(r => r.x >= x0);
-  const s = svg(W, H, `${m.model}: accuracy and claim rate from ${x0}. Knowledge ends ${m.know_end}, claims end ${m.claim_end}.`);
+/* core chart */
+let coreM = FRONT[0].model;
+function drawCore() {
+  const el = $('#coreChart'), m = by(coreM), W = Math.max(320, el.clientWidth || 900), H = W < 560 ? 240 : 310, L = 36, R = 12, T = 12, B = 26, x0 = 2015, x1 = 2026.9;
+  const pts = D.timeline[coreM].filter(r => r.x >= x0);
+  const s = svg(W, H, `${coreM}: accuracy and claim rate from ${x0}`); s.classList.add('live');
   const x = v => L + (v - x0) / (x1 - x0) * (W - L - R), y = v => T + (1 - v) * (H - T - B);
-  [0, .25, .5, .75, 1].forEach(v => {
-    add(s, 'line', { x1: L, x2: W - R, y1: y(v), y2: y(v), stroke: 'rgba(24,56,152,.09)' });
-    add(s, 'text', { x: L - 6, y: y(v) + 4, 'text-anchor': 'end', 'font-size': 10.5, fill: 'var(--soft)' }, v.toFixed(2).replace('0.', '.').replace('1.00', '1'));
+  [0, .25, .5, .75, 1].forEach(v => { add(s, 'line', { x1: L, x2: W - R, y1: y(v), y2: y(v), stroke: 'rgba(14,84,70,.09)' }); add(s, 'text', { x: L - 7, y: y(v) + 4, 'text-anchor': 'end', 'font-size': 11, fill: 'var(--soft)' }, v.toFixed(2)); });
+  for (let yr = 2016; yr <= 2026; yr += W < 560 ? 2 : 1) add(s, 'text', { x: x(yr + .5), y: H - 7, 'text-anchor': 'middle', 'font-size': 11, fill: 'var(--soft)' }, yr);
+  add(s, 'line', { x1: L, x2: W - R, y1: y(CH), y2: y(CH), style: 'stroke:var(--chance)', 'stroke-width': 1.3, 'stroke-dasharray': '3 3' });
+  const kx = x(qX(m.know_end)), cx = x(qX(m.claim_end));
+  if (cx > kx) add(s, 'rect', { x: kx, y: T, width: cx - kx, height: H - T - B, style: 'fill:var(--says);opacity:.1' });
+  add(s, 'line', { x1: kx, x2: kx, y1: T, y2: H - B, style: 'stroke:var(--knows)', 'stroke-width': 2 });
+  add(s, 'line', { x1: cx, x2: cx, y1: T, y2: H - B, style: 'stroke:var(--says)', 'stroke-width': 2, 'stroke-dasharray': m.know_end === m.claim_end ? '5 5' : 'none' });
+  const path = k => pts.map((r, i) => `${i ? 'L' : 'M'}${x(r.x).toFixed(1)},${y(r[k]).toFixed(1)}`).join('');
+  [['claim', 'var(--says)'], ['acc', 'var(--knows)']].forEach(([k, c]) => {
+    const p = add(s, 'path', { d: path(k), fill: 'none', style: `stroke:${c}`, 'stroke-width': 2.4, 'stroke-linejoin': 'round' });
+    if (!reduce && drawCore.anim) { const n = 2600; p.style.strokeDasharray = n; p.style.strokeDashoffset = n; requestAnimationFrame(() => { p.style.transition = 'stroke-dashoffset 1.1s ease-out'; p.style.strokeDashoffset = 0; }); }
   });
-  for (let yr = 2018; yr <= 2026; yr += W < 420 ? 2 : 1)
-    add(s, 'text', { x: x(yr + .5), y: H - 8, 'text-anchor': 'middle', 'font-size': 10.5, fill: 'var(--soft)' }, W < 420 ? yr : `'${String(yr).slice(2)}`);
-  add(s, 'line', { x1: L, x2: W - R, y1: y(CH), y2: y(CH), stroke: CHANCE, 'stroke-width': 1.3, 'stroke-dasharray': '3 3' });
-  const vline = (v, style, dash) => add(s, 'line', { x1: x(v), x2: x(v), y1: T, y2: H - B, style, 'stroke-width': 2, ...(dash ? { 'stroke-dasharray': dash, 'stroke-linecap': 'round' } : {}) });
-  if (m.vendor_cutoff) vline(ymX(m.vendor_cutoff), 'stroke:var(--vendor)', '0.1 4');
-  vline(qX(m.know_end), 'stroke:var(--knows);opacity:.55');
-  // equal boundaries would overlap exactly, so claims end is drawn dashed on top
-  vline(qX(m.claim_end), 'stroke:var(--says);opacity:.8', m.know_end === m.claim_end ? '5 5' : null);
-  const path = key => pts.map((r, i) => `${i ? 'L' : 'M'}${x(r.x).toFixed(1)},${y(r[key]).toFixed(1)}`).join('');
-  add(s, 'path', { d: path('claim'), fill: 'none', style: `stroke:${SAYS}`, 'stroke-width': 2, 'stroke-linejoin': 'round' });
-  add(s, 'path', { d: path('acc'), fill: 'none', style: `stroke:${KNOWS}`, 'stroke-width': 2, 'stroke-linejoin': 'round' });
-  const cross = add(s, 'line', { y1: T, y2: H - B, stroke: 'rgba(15,21,40,.35)', visibility: 'hidden' });
-  const dA = add(s, 'circle', { r: 4.5, style: `fill:${KNOWS};stroke:#fff;stroke-width:1.5`, visibility: 'hidden' });
-  const dC = add(s, 'circle', { r: 4.5, style: `fill:${SAYS};stroke:#fff;stroke-width:1.5`, visibility: 'hidden' });
+  drawCore.anim = false;
+  const cross = add(s, 'line', { y1: T, y2: H - B, stroke: 'rgba(16,32,28,.35)', visibility: 'hidden' });
+  const dA = add(s, 'circle', { r: 4.5, style: 'fill:var(--knows);stroke:#fff;stroke-width:1.5', visibility: 'hidden' }), dC = add(s, 'circle', { r: 4.5, style: 'fill:var(--says);stroke:#fff;stroke-width:1.5', visibility: 'hidden' });
   el.replaceChildren(s);
-  const hide = () => { [cross, dA, dC].forEach(n => n.setAttribute('visibility', 'hidden')); hideTip(); };
   s.addEventListener('pointermove', e => {
-    const b = s.getBoundingClientRect(), mx = (e.clientX - b.left) / b.width * W;
-    let r = pts[0]; pts.forEach(p => { if (Math.abs(x(p.x) - mx) < Math.abs(x(r.x) - mx)) r = p; });
-    cross.setAttribute('x1', x(r.x)); cross.setAttribute('x2', x(r.x));
-    dA.setAttribute('cx', x(r.x)); dA.setAttribute('cy', y(r.acc)); dC.setAttribute('cx', x(r.x)); dC.setAttribute('cy', y(r.claim));
-    [cross, dA, dC].forEach(n => n.setAttribute('visibility', 'visible'));
-    showTip(`<b>${r.p}</b> · n=${r.n}<br>Accuracy ${f2(r.acc)}<br>Claim rate ${f2(r.claim)}`, e);
+    const b = s.getBoundingClientRect(), mx = (e.clientX - b.left) / b.width * W; let r = pts[0]; pts.forEach(p => { if (Math.abs(x(p.x) - mx) < Math.abs(x(r.x) - mx)) r = p; });
+    cross.setAttribute('x1', x(r.x)); cross.setAttribute('x2', x(r.x)); dA.setAttribute('cx', x(r.x)); dA.setAttribute('cy', y(r.acc)); dC.setAttribute('cx', x(r.x)); dC.setAttribute('cy', y(r.claim));
+    [cross, dA, dC].forEach(n => n.setAttribute('visibility', 'visible')); showTip(`<b>${r.p}</b> · ${r.n} facts<br>Accuracy ${f2(r.acc)}<br>Claim rate ${f2(r.claim)}`, e);
   });
-  s.addEventListener('pointerleave', hide);
+  s.addEventListener('pointerleave', () => { [cross, dA, dC].forEach(n => n.setAttribute('visibility', 'hidden')); hideTip(); });
+  $('#coreNote').textContent = `Yearly up to 2020 and quarterly after. ${coreM} knowledge ends ${m.know_end} and claims end ${m.claim_end}.`;
+  $$('#coreChips .chip').forEach(c => c.setAttribute('aria-selected', c.dataset.m === coreM));
 }
-const panels = M.filter(m => m.know_end);
-$('#multiples').innerHTML = panels.map((m, i) => `<article class="card panel"><h3>${m.model}</h3>
-  <div class="ends">Knowledge ends <b>${m.know_end}</b> · Claims end <b>${m.claim_end}</b> · Self-report <b>${m.self_report}</b> · Vendor <b>${m.vendor_cutoff || 'n/a'}</b></div>
-  <div class="chart" id="chart${i}"></div></article>`).join('');
-const drawAll = () => panels.forEach((m, i) => drawPanel($('#chart' + i), m));
+$('#coreChips').innerHTML = FRONT.map(m => `<button class="chip" role="tab" data-m="${m.model}" type="button">${m.model}</button>`).join('');
+$$('#coreChips .chip').forEach(c => c.onclick = () => { coreM = c.dataset.m; drawCore.anim = true; drawCore(); });
 
 /* fact families */
-const FAMS = Object.keys(D.family['GPT-5']);
-$('#fam').innerHTML = FAMS.map((f, i) => `<div class="card"><h3>${f}</h3><div id="fam${i}"></div></div>`).join('');
-FAMS.forEach((f, i) => dumbbell($('#fam' + i), Object.keys(D.family).map(m => ({ label: m, a: D.family[m][f].know, b: D.family[m][f].says })),
-  { W: 400, L: 104, rowH: 36, noChance: true, label: `${f}: knows and says it knows by model` }));
+(function fam() {
+  const names = Object.keys(D.family), order = ['Fed decisions', 'Macroeconomic', 'Stock prices'];
+  $('#fam').innerHTML = order.map(f => `<div class="card"><h3>${f}</h3><div class="fam-sub"><span><i style="background:var(--knows)"></i>Knows</span><span><i style="background:var(--says)"></i>Says</span></div>${names.map(m => {
+    const v = D.family[m][f]; return `<div class="fr"><span>${m}</span><div class="fr-b"><div class="fb k" data-tip="<b>${m}</b><br>Knows ${f2(v.know)}"><i style="width:${v.know * 100}%"></i>${f2(v.know)}</div><div class="fb c" data-tip="<b>${m}</b><br>Says ${f2(v.says)}"><i style="width:${v.says * 100}%"></i>${f2(v.says)}</div></div></div>`;
+  }).join('')}</div>`).join('');
+})();
 
-/* declared date */
-$('#decl').innerHTML = `<div class="card"><h3>Claims of knowledge</h3><div class="legend"><span><i class="dot dot--knows"></i>No date</span><span><i class="dot dot--says"></i>Date declared</span></div><div id="declC"></div></div>
-  <div class="card"><h3>Accuracy on the value</h3><div class="legend"><span><i class="dot dot--knows"></i>No date</span><span><i class="dot dot--says"></i>Date declared</span></div><div id="declA"></div></div>`;
-dumbbell($('#declC'), M.map(m => ({ label: m.model, a: m.claims, b: m.claims_declared, aName: 'No date', bName: 'Date declared' })), { W: 520, sep: ' → ', noChance: true, label: 'Claims of knowledge without and with a declared date' });
-dumbbell($('#declA'), M.map(m => ({ label: m.model, a: m.acc, b: m.acc_declared, aName: 'No date', bName: 'Date declared' })), { W: 520, sep: ' → ', noChance: true, label: 'Accuracy without and with a declared date' });
+/* declared date toggle */
+(function declared() {
+  const row = (m, k, c) => `<div class="hb-r"><span>${m.model}</span><div class="hb-t"><i data-a="${m[k]}" data-b="${m[k + '_declared']}" style="background:${c}"></i></div><span class="hb-v" data-a="${f2(m[k])}" data-b="${f2(m[k + '_declared'])}"></span></div>`;
+  $('#declC').innerHTML = M.map(m => row(m, 'claims', 'var(--says)')).join('');
+  $('#declA').innerHTML = M.map(m => row(m, 'acc', 'var(--knows)')).join('');
+  const sw = $('#dateSw');
+  const set = on => { sw.setAttribute('aria-checked', on); $('#dateCode').classList.toggle('on', on); $$('.hb-t i').forEach(i => i.style.width = (on ? i.dataset.b : i.dataset.a) * 100 + '%'); $$('.hb-v').forEach(v => v.textContent = on ? v.dataset.b : v.dataset.a); };
+  sw.onclick = () => set(sw.getAttribute('aria-checked') !== 'true');
+  set(false);
+})();
 
 /* point-in-time */
 (function pit() {
   const lo = -.08, hi = .12, x = v => (v - lo) / (hi - lo) * 100;
   $('#pitT').innerHTML = `<thead><tr><th class="left">Model</th><th>Cutoff</th><th>Up to cutoff</th><th>After</th><th>Difference [95% CI]</th><th class="left">Interval around zero</th></tr></thead><tbody>` +
-    D.pit.map(r => `<tr><td class="left mname">${r.model}</td><td>${r.cutoff}</td><td>${f2(r.before)}</td><td>${f2(r.after)}</td>
-      <td>${f3(r.diff)}<span class="ci">[${f3(r.lo)}, ${f3(r.hi)}]</span></td>
-      <td class="left"><span class="forest" data-tip="<b>${r.model} ${r.cutoff}</b><br>Difference ${f3(r.diff)}"><s style="left:${x(0)}%"></s><i style="left:${x(r.lo)}%;width:${x(r.hi) - x(r.lo)}%"></i><b style="left:${x(r.diff)}%"></b></span></td></tr>`).join('') + '</tbody>';
+    D.pit.map(r => `<tr><td class="left mname">${r.model}</td><td>${r.cutoff}</td><td>${f2(r.before)}</td><td>${f2(r.after)}</td><td>${f3(r.diff)}<span class="ci">[${f3(r.lo)}, ${f3(r.hi)}]</span></td><td class="left"><span class="forest" data-tip="<b>${r.model} ${r.cutoff}</b><br>Difference ${f3(r.diff)}"><s style="left:${x(0)}%"></s><i style="left:${x(r.lo)}%;width:${x(r.hi) - x(r.lo)}%"></i><b style="left:${x(r.diff)}%"></b></span></td></tr>`).join('') + '</tbody>';
 })();
 
+const drawAll = () => { drawCalendar(); drawCore(); };
 drawAll();
 let rz; addEventListener('resize', () => { clearTimeout(rz); rz = setTimeout(drawAll, 120); });

index.html

@@ -3,127 +3,200 @@
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<title>FinDendro · Temporal Self-Knowledge Leaderboard · The Fin AI</title>
-<meta name="description" content="FinDendro measures what LLMs know about dated financial facts and what they say they know." />
+<title>FinDendro · Do LLMs Know What They Know? · The Fin AI</title>
+<meta name="description" content="FinDendro dates what LLMs know about financial history, and checks it against what they say they know." />
 <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=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400;1,6..72,500&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;1,9..144,500&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400;1,6..72,500&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
 <link rel="icon" href="./assets/finai-logo.png" />
 <link rel="stylesheet" href="./style.css" />
 </head>
 <body>
+<div class="progress" id="progress"></div>
+<div class="glow" aria-hidden="true"></div>
+<div class="edge edge-l" aria-hidden="true"><span class="e-name">FinDendro</span></div>
+<div class="edge edge-r" aria-hidden="true"><span class="e-name">The Fin AI</span></div>
 <div class="tip" id="tip" role="tooltip"></div>
 
-<header class="header">
+<header class="header" id="header">
   <div class="wrap nav">
-    <a href="#top" class="brand"><img src="./assets/finai-logo.png" alt="" />The Fin AI<span class="brand-sep">/</span><span class="brand-fd">FinDendro</span></a>
-    <nav class="links">
-      <a href="#leaderboard">Leaderboard</a>
-      <a href="#timeline">Timeline</a>
-      <a href="#families">Facts</a>
-      <a href="#declared">Declared date</a>
-      <a href="#pit">Point-in-time</a>
-      <a href="#method">Method</a>
-    </nav>
+    <a href="https://thefin.ai/" class="brand" target="_blank" rel="noreferrer"><img src="./assets/finai-logo.png" alt="" />The Fin AI<span class="brand-sep">/</span><span class="brand-fd">FinDendro</span></a>
+    <div class="nav-right">
+      <nav class="links" id="navLinks">
+        <a href="#replay" data-sec="replay">Replay</a>
+        <a href="#leaderboard" data-sec="leaderboard">Leaderboard</a>
+        <a href="#core" data-sec="core">Core sample</a>
+        <a href="#date" data-sec="date">Declared date</a>
+        <a href="#benchmark" data-sec="benchmark">Benchmark</a>
+      </nav>
+      <a class="btn btn--sm" href="https://huggingface.co/datasets/TheFinAI/FinDendro" target="_blank" rel="noreferrer">Data <span class="arrow">↗</span></a>
+    </div>
   </div>
 </header>
 
 <main id="top">
-  <section class="hero">
-    <svg class="rings" id="rings" aria-hidden="true" viewBox="-320 -320 640 640"></svg>
+  <section class="hero" id="hero">
     <div class="wrap hero-grid">
       <div class="hero-copy">
-        <p class="eyebrow">Benchmark for financial backtesting</p>
-        <h1 class="wordmark">FinDendro</h1>
-        <p class="hero-sub">Do LLMs know what they <em>know</em>?</p>
-        <p class="lead">Backtests trust a model to say when its knowledge ends. FinDendro checks that claim against dated U.S. macro data, stock prices and Fed decisions, one quarter at a time.</p>
-        <div class="stats" id="stats"></div>
-        <div class="ctas">
-          <a class="btn" href="#leaderboard">See the leaderboard</a>
-          <a class="btn btn--ghost" href="https://huggingface.co/datasets/TheFinAI/FinDendro" target="_blank" rel="noreferrer">Dataset ↗</a>
+        <a class="award reveal" href="#replay"><span class="medal" id="bird" aria-hidden="true"></span>Temporal self-knowledge · <b>1999 to 2026, quarter by quarter</b> →</a>
+        <h1 class="wordmark reveal">FinDendro</h1>
+        <p class="hero-sub reveal">A tree records every year it lived.<br />An LLM <em>can't tell you</em> what it remembers.</p>
+        <p class="lead reveal">Dendrochronologists date wood by reading its rings. We date models the same way. Every model, <span class="rotator" id="rotator"></span>, answers dated questions about markets and says whether it knows each answer. Then we check both.</p>
+        <div class="stats reveal" id="stats"></div>
+        <div class="ctas reveal">
+          <a class="btn btn--lg" href="#replay">Try to beat a model</a>
+          <a class="btn btn--lg btn--ghost" href="#leaderboard">See who knows</a>
         </div>
       </div>
-      <figure class="card hero-viz">
-        <figcaption>Knows vs says it knows</figcaption>
-        <div class="legend">
-          <span><i class="dot dot--knows"></i>Knows</span>
-          <span><i class="dot dot--says"></i>Says it knows</span>
-          <span><i class="tick"></i>Chance</span>
+
+      <figure class="hero-viz reveal">
+        <figcaption><span>Cross-section · one ring per period</span><a href="#core">Read the core →</a></figcaption>
+        <div class="xs-chips" id="xsChips" role="tablist" aria-label="Choose a model"></div>
+        <div class="xs-wrap">
+          <div class="xs-side xs-side--l"><b>Says</b><span>claims it knows</span></div>
+          <div class="xs" id="xs"></div>
+          <div class="xs-side xs-side--r"><b>Knows</b><span>answers correctly</span></div>
         </div>
-        <div id="dumbbell"></div>
+        <div class="xs-ends" id="xsEnds"></div>
+        <p class="hero-claim">“I don't know” is <em>not</em> evidence that a model doesn't know.</p>
       </figure>
     </div>
+    <div class="ticker" id="ticker" aria-label="Leaderboard ticker"><div class="ticker-track" id="tickerTrack"></div></div>
+  </section>
+
+  <section class="section" id="replay">
+    <div class="wrap">
+      <div class="sec-head reveal">
+        <span class="kicker">Replay</span>
+        <h2>It said it <em>didn't know</em>. Then it named the price.</h2>
+        <p class="note">Real questions from the benchmark and the models' recorded answers. Make your pick first, then see what each model chose and whether it claimed to know.</p>
+      </div>
+      <div class="game reveal">
+        <article class="q-card">
+          <div class="q-top"><span class="q-kick" id="qKick"></span><span class="q-n" id="qN"></span></div>
+          <p class="q-text" id="qText"></p>
+          <div class="q-opts" id="qOpts"></div>
+          <div class="q-foot">
+            <button class="btn btn--ghost btn--sm" id="qReveal" type="button">Reveal without guessing</button>
+            <button class="btn btn--sm" id="qNext" type="button" hidden>Next fact →</button>
+          </div>
+        </article>
+        <aside class="a-card">
+          <div class="a-head"><span>What the models said</span><span class="a-score" id="aScore"></span></div>
+          <div class="a-rows" id="aRows"></div>
+          <p class="a-punch" id="aPunch" hidden></p>
+        </aside>
+      </div>
+    </div>
   </section>
 
-  <section class="section" id="leaderboard">
+  <section class="section section--tint" id="leaderboard">
     <div class="wrap">
-      <h2>Leaderboard</h2>
-      <p class="sec-sub">Sorted by what each model knows. Click a column to re-sort.</p>
-      <div class="scroll card card--flush"><table class="lb" id="lb"></table></div>
-      <p class="note"><b>Knows</b> is accuracy on 1,340 controlled facts. <b>Says</b> is the share of answers that claim knowledge. <b>Acc | says</b> and <b>Acc | denies</b> split accuracy by that claim. <b>Gap</b> is their within-period difference with a 95% interval. Boundaries are not reported for the two small Qwen models, whose accuracy is too close to chance for the rule to locate an end.</p>
-      <div class="findings" id="findings"></div>
+      <div class="sec-head reveal">
+        <span class="kicker">Leaderboard</span>
+        <h2>Who <em>knows</em>, and who <em>admits</em> it</h2>
+        <p class="note">Open a row for the breakdown. Click a heading to rank by it.</p>
+      </div>
+      <div class="board reveal"><div class="scroll"><table class="lb" id="lb"></table></div></div>
+      <div class="keys reveal">
+        <p><b>Knows</b> accuracy on 1,340 controlled facts, chance about 0.27. <b>Says</b> share of answers claiming knowledge. <b>Right when denying</b> accuracy on facts the model says it does not know. <b>Gap</b> how much better it does when it claims to know, inside each period.</p>
+        <p class="ramp-key">Darker green means higher. <span class="ramp"></span></p>
+      </div>
     </div>
   </section>
 
-  <section class="section section--tint" id="timeline">
+  <section class="section" id="core">
     <div class="wrap">
-      <h2>Where knowledge ends and claims end</h2>
-      <p class="sec-sub">Accuracy and claim rate by period since 2017. Yearly up to 2020, quarterly after.</p>
-      <div class="legend legend--wide">
-        <span><i class="ln ln--knows"></i>Accuracy</span>
-        <span><i class="ln ln--says"></i>Claim rate</span>
-        <span><i class="vl vl--knows"></i>Knowledge ends</span>
-        <span><i class="vl vl--says"></i>Claims end</span>
-        <span><i class="vl vl--vendor"></i>Vendor cutoff</span>
-        <span><i class="tick"></i>Chance</span>
+      <div class="sec-head reveal">
+        <span class="kicker">Core sample</span>
+        <h2>The last ring and the last <em>claim</em> can be years apart</h2>
+        <p class="note">One rule places every boundary. Knowledge ends where accuracy falls halfway to chance. Claims end where the claim rate halves.</p>
+      </div>
+      <div class="cal card reveal">
+        <div class="legend">
+          <span><i class="mk mk--k"></i>Knowledge ends</span><span><i class="mk mk--c"></i>Claims end</span><span><i class="mk mk--s"></i>Says when asked</span><span><i class="mk mk--v"></i>Vendor cutoff</span><span><i class="band"></i>Claiming without knowing</span>
+        </div>
+        <div id="calendar"></div>
+      </div>
+      <div class="big card reveal">
+        <div class="big-top">
+          <div class="pick" id="coreChips" role="tablist" aria-label="Choose a model"></div>
+          <div class="legend"><span><i class="ln ln--k"></i>Accuracy</span><span><i class="ln ln--c"></i>Claim rate</span><span><i class="tick"></i>Chance</span></div>
+        </div>
+        <div class="chart" id="coreChart"></div>
+        <p class="note" id="coreNote"></p>
       </div>
-      <div class="multiples" id="multiples"></div>
     </div>
   </section>
 
-  <section class="section" id="families">
+  <section class="section section--tint" id="grain">
     <div class="wrap">
-      <h2>What kind of fact matters</h2>
-      <p class="sec-sub">The same model can know prices it will not admit to knowing, and admit to Fed decisions it does know.</p>
-      <div class="legend">
-        <span><i class="dot dot--knows"></i>Knows</span>
-        <span><i class="dot dot--says"></i>Says it knows</span>
+      <div class="sec-head reveal">
+        <span class="kicker">Grain</span>
+        <h2>Models admit the <em>Fed</em> and hide the <em>prices</em></h2>
+        <p class="note">Frontier models claim knowledge of most Fed decisions and almost no stock prices, yet they recall prices well above what they admit.</p>
       </div>
-      <div class="fam" id="fam"></div>
+      <div class="fam reveal" id="fam"></div>
     </div>
   </section>
 
-  <section class="section section--tint" id="declared">
+  <section class="section" id="date">
     <div class="wrap">
-      <h2>A declared date changes the claim, not the knowledge</h2>
-      <p class="sec-sub">Backtests fix the forecast origin with a line such as “Assume that today is May 31, 2023.” Each pair shows the answer without that line and with it, on the Predict wording.</p>
-      <div class="decl" id="decl"></div>
+      <div class="sec-head reveal">
+        <span class="kicker">Declared date</span>
+        <h2>A date changes the <em>words</em>, not the <em>knowledge</em></h2>
+        <p class="note">Backtests fix the forecast origin with one line. Add it and watch what moves.</p>
+      </div>
+      <div class="prompt-line reveal">
+        <button class="sw" id="dateSw" type="button" role="switch" aria-checked="false"><i></i></button>
+        <code id="dateCode"><span id="datePrefix">Assume that today is May 31, 2023. Answer as you would on that date.</span></code>
+      </div>
+      <div class="decl reveal">
+        <div class="card"><h3>Claims to already know</h3><div class="hb" id="declC"></div></div>
+        <div class="card"><h3>Accuracy on the value</h3><div class="hb" id="declA"></div></div>
+      </div>
     </div>
   </section>
 
-  <section class="section" id="pit">
+  <section class="section section--tint" id="pit">
     <div class="wrap">
-      <h2>Point-in-time models</h2>
-      <p class="sec-sub">Models trained only on data before a cutoff are free of look-ahead by construction. At 1 to 1.5B parameters they retain almost none of these facts, so accuracy stays near chance on both sides of the cutoff.</p>
-      <div class="scroll card card--flush"><table class="lb pit" id="pitT"></table></div>
-      <p class="note">Scored by the likelihood of each candidate value, since these models do not follow a multiple-choice format. The difference is accuracy up to the cutoff year minus accuracy after it, with a 95% interval.</p>
+      <div class="sec-head reveal">
+        <span class="kicker">Saplings</span>
+        <h2>Clean by construction, <em>empty</em> by construction</h2>
+        <p class="note">Point-in-time models stop reading at a cutoff, so they cannot leak. At 1 to 1.5B parameters they also retain almost none of these facts. Scored by candidate likelihood, accuracy sits near chance on both sides of the cutoff.</p>
+      </div>
+      <div class="board reveal"><div class="scroll"><table class="lb pit" id="pitT"></table></div></div>
     </div>
   </section>
 
-  <section class="section section--tint" id="method">
-    <div class="wrap method">
-      <h2>Method</h2>
-      <div class="m-grid">
-        <div><h3>Facts</h3><p>2,226 dated U.S. facts sampled from a pool of 20,972, January 1999 to September 2026. Twelve FRED series, month-end prices of 50 large companies and Fed target rate decisions, all effectively unrevised after publication.</p></div>
-        <div><h3>Questions</h3><p>Each fact yields five prompts that share one set of candidates. Task 2 asks for the value. Task 1 offers every candidate twice, once with “I know this” and once with “I do not know this”, so one choice reveals both the answer and the claim.</p></div>
-        <div><h3>Controls</h3><p>47% of numerical facts can be answered by repeating last month's value, so they are excluded from knowledge. Fed decisions use balanced accuracy over three outcomes, since “unchanged” is right in 78% of months. Chance is about 0.27.</p></div>
-        <div><h3>Boundaries</h3><p>Knowledge ends at the last quarter whose two-quarter rolling accuracy stays above the midpoint between the 2015 to 2020 level and chance. Claims end at the last quarter whose claim rate stays above half of its 2015 to 2020 level.</p></div>
+  <section class="section" id="benchmark">
+    <div class="wrap">
+      <div class="sec-head reveal">
+        <span class="kicker">Benchmark</span>
+        <h2><em>One</em> fact, <em>one</em> choice, two answers</h2>
+        <p class="note">Every option pairs a value with a statement of knowledge, so a single letter reveals both what the model thinks and whether it claims to know.</p>
+      </div>
+      <div class="how reveal">
+        <div class="eg card">
+          <p class="eg-q">What was the 12-month percent change in the US CPI for June 2023?</p>
+          <div class="eg-grid">
+            <span class="eg-h">“I know this value”</span><span class="eg-h">“I do not know, best guess”</span>
+            <span>A. 2.8%</span><span>E. 2.8%</span><span class="eg-hit">B. 3.0%</span><span class="eg-hit">F. 3.0%</span><span>C. 3.2%</span><span>G. 3.2%</span><span>D. 3.4%</span><span>H. 3.4%</span>
+          </div>
+          <p class="note">The published value is shaded. The model picks one letter out of eight.</p>
+        </div>
+        <div class="m-grid">
+          <div><h3>Facts</h3><p>2,226 dated U.S. facts drawn from a pool of 20,972. Twelve FRED series, month-end prices of 50 companies and Fed decisions, scored against the value published at the time.</p></div>
+          <div><h3>Questions</h3><p>Five prompts per fact. One asks for the value alone. Four offer the paired options, as a recall or a prediction, with and without a declared date.</p></div>
+          <div><h3>Controls</h3><p>47% of numerical facts fall to repeating last month's value, so they do not count toward knowledge. Fed decisions use balanced accuracy.</p></div>
+          <div><h3>Boundaries</h3><p>One rule for every model, from two-quarter rolling accuracy and the claim rate, each against its 2015 to 2020 level.</p></div>
+        </div>
       </div>
     </div>
   </section>
 </main>
 
-<footer class="foot"><div class="wrap">FinDendro · The Fin AI</div></footer>
+<footer class="foot"><div class="wrap foot-in"><span>FinDendro · The Fin AI</span><a href="https://huggingface.co/datasets/TheFinAI/FinDendro" target="_blank" rel="noreferrer">Questions and raw results ↗</a></div></footer>
 <script src="./data.js"></script>
 <script src="./app.js"></script>
 </body>

style.css

@@ -1,134 +1,259 @@
-/* FinDendro leaderboard. Fin AI house tokens, with the house blue as accent.
-   Knows is blue and Says is orange everywhere on the page. */
+/* FinDendro leaderboard. Fin AI house structure; the accent is a heartwood-to-sapwood gradient.
+   Knows is heartwood teal and Says is rust, everywhere on the page. */
 :root{
-  --ink:#0f1528; --soft:#4f5a6e; --muted:#7a8496; --line:rgba(24,56,152,.11);
-  --paper:#fcfcfd; --paper-2:#f4f6fa;
-  --ring:0 0 0 1px rgba(24,56,152,.08),0 1px 2px rgba(20,30,80,.04),0 10px 28px -18px rgba(24,56,152,.2);
-  --g:linear-gradient(90deg,#183898,#0060b0 55%,#68a8d8);
-  --knows:#1f4fb8; --says:#e0662a; --chance:#8a93a3; --vendor:#5d6678;
-  --serif:'Newsreader',Georgia,serif; --sans:'Inter',system-ui,-apple-system,sans-serif; --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
-  --wrap:1180px;
+  --ink:#10201c; --soft:#4b5c58; --muted:#7f8d89; --line:rgba(14,84,70,.1);
+  --paper:#fcfcfa; --paper-2:#f3f6f1;
+  --ring:0 0 0 1px rgba(14,84,70,.08),0 1px 2px rgba(10,50,40,.04),0 10px 28px -18px rgba(14,84,70,.22);
+  --g:linear-gradient(90deg,#0a5d55,#2c9a6e 58%,#d9962b);
+  --g-soft:linear-gradient(90deg,rgba(10,125,116,.08),rgba(217,150,43,.1));
+  --knows:#0a7d74; --says:#d9622b; --chance:#8d9894; --vendor:#5d6a66; --wood:#efe6d3;
+  --serif:'Newsreader',Georgia,serif; --brand:'Fraunces','Newsreader',Georgia,serif; --sans:'Inter',system-ui,-apple-system,sans-serif; --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
+  --wrap:1180px; --ease:cubic-bezier(.22,1,.36,1);
 }
 *{box-sizing:border-box}
-html{scroll-behavior:smooth;scroll-padding-top:72px}
-body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
-h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.12;letter-spacing:-.02em;margin:0;text-wrap:balance}
+[hidden]{display:none!important}
+html{scroll-behavior:smooth;scroll-padding-top:74px}
+body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
+h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.1;letter-spacing:-.02em;margin:0;text-wrap:balance}
 p{margin:0;color:var(--soft)}
 a{color:inherit;text-decoration:none}
-a:focus-visible,button:focus-visible,th:focus-visible{outline:2px solid var(--knows);outline-offset:2px}
+button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
+:focus-visible{outline:2px solid var(--knows);outline-offset:2px}
+svg text{font-family:var(--sans)}
+::selection{background:#0a5d55;color:#fff}
+figure{margin:0}
 .wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:32px}
-.header{position:sticky;top:0;z-index:50;background:rgba(252,252,253,.86);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--line)}
-.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;flex-wrap:wrap}
-.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--serif);font-size:1.15rem;font-weight:500;white-space:nowrap}
-.brand img{height:22px;width:auto}
-.brand-sep{color:var(--muted)}
-.brand-fd{background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:500}
-.links{display:flex;gap:2px;flex-wrap:wrap}
-.links a{font-size:.86rem;color:var(--soft);padding:6px 12px;border-radius:999px}
+
+.glow{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(66vw 80vh at 18% 12%,rgba(10,125,116,.07),transparent 70%),radial-gradient(60vw 70vh at 88% 30%,rgba(217,150,43,.08),transparent 70%)}
+.edge{position:fixed;top:50%;z-index:45;pointer-events:none;display:flex;align-items:center;gap:18px;white-space:nowrap}
+.edge-l{left:24px;transform:translate(-50%,-50%) rotate(-90deg)}
+.edge-r{right:24px;transform:translate(50%,-50%) rotate(90deg)}
+.edge .e-name{font:600 11px var(--sans);letter-spacing:.42em;text-transform:uppercase;background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent}
+.edge::before,.edge::after{content:"";display:block;width:8vh;height:1px;background:linear-gradient(90deg,transparent,rgba(10,125,116,.26))}
+.edge::after{background:linear-gradient(90deg,rgba(10,125,116,.26),transparent)}
+@media (max-width:1320px){.edge{display:none}}
+
+.progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:60;transform-origin:0 50%;transform:scaleX(0);background:var(--g)}
+.header{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .4s var(--ease),box-shadow .4s}
+.header.scrolled{background:rgba(252,252,250,.82);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 1px 0 var(--line)}
+.nav{display:flex;align-items:center;justify-content:space-between;height:64px;gap:14px}
+.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--serif);font-size:1.2rem;font-weight:500;white-space:nowrap}
+.brand img{height:24px;width:auto}
+.brand-sep{color:var(--muted);font-weight:400}
+.brand-fd{font-family:var(--brand);font-size:1.02rem;font-weight:600;background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent}
+.nav-right{display:flex;align-items:center;gap:10px}
+.links{display:flex;gap:2px}
+.links a{font-size:.88rem;color:var(--soft);padding:7px 13px;border-radius:999px;transition:background .25s,color .25s}
 .links a:hover{background:var(--paper-2);color:var(--ink)}
+.links a.active{background:var(--g-soft);color:var(--ink)}
+
+.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:.92rem;font-weight:500;padding:10px 20px;border-radius:999px;background:var(--ink);color:#fff;transition:box-shadow .3s,transform .2s,background .2s}
+.btn:hover{box-shadow:0 10px 30px -12px rgba(10,125,116,.65);transform:translateY(-1px)}
+.btn--sm{padding:7px 15px;font-size:.84rem}
+.btn--lg{padding:14px 27px;font-size:1rem}
+.btn--ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
+.btn--ghost:hover{background:var(--paper-2)}
+
+.reveal{transition:opacity .75s var(--ease),transform .75s var(--ease)}
+.js .reveal:not(.in){opacity:0;transform:translateY(16px)}
 
-.hero{position:relative;overflow:hidden;padding-block:64px 56px}
-.rings{position:absolute;right:-180px;top:-200px;width:820px;height:820px;pointer-events:none;opacity:.65}
-.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
+.hero{position:relative;padding-top:118px;overflow:hidden}
+.hero-grid{display:grid;grid-template-columns:1.06fr 1fr;gap:54px;align-items:center;padding-bottom:40px}
 .hero-grid>*{min-width:0}
-.eyebrow{font:500 .76rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
-.wordmark{font-size:clamp(3.2rem,7.4vw,5.4rem);margin-top:10px;background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
-.hero-sub{font-family:var(--serif);font-size:clamp(1.4rem,2.5vw,1.8rem);color:var(--ink);margin-top:2px}
-.hero-sub em{color:var(--knows)}
-.lead{margin-top:16px;font-size:1.05rem;max-width:34em}
-.stats{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:12px 34px;margin-top:26px}
-.stat b{display:block;font:500 1.65rem var(--serif);color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.15}
-.stat span{font-size:.8rem;color:var(--muted)}
-.ctas{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}
-.btn{display:inline-flex;align-items:center;font-size:.9rem;font-weight:500;padding:10px 20px;border-radius:999px;background:var(--ink);color:#fff}
-.btn:hover{background:#183898}
-.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
-.btn--ghost:hover{background:var(--paper-2);color:var(--ink)}
-
-.card{background:#fff;border-radius:14px;box-shadow:var(--ring);padding:22px 24px}
-.card--flush{padding:0}
-figure{margin:0}
-figcaption{font:500 1.15rem var(--serif);color:var(--ink)}
-.legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:8px;font-size:.8rem;color:var(--soft)}
-.legend span{display:inline-flex;align-items:center;gap:7px}
-.legend--wide{margin-block:18px 16px}
-.dot{width:10px;height:10px;border-radius:50%;display:inline-block}
-.dot--knows{background:var(--knows)}.dot--says{background:var(--says)}
-.tick{width:0;height:13px;border-left:1.5px dashed var(--chance);display:inline-block}
-.ln{width:18px;height:2.5px;border-radius:2px;display:inline-block}
-.ln--knows{background:var(--knows)}.ln--says{background:var(--says)}
-.vl{width:0;height:13px;display:inline-block;border-left:2px solid}
-.vl--knows{border-color:var(--knows)}.vl--says{border-color:var(--says)}.vl--vendor{border-left:2px dotted var(--vendor)}
-#dumbbell{margin-top:6px}
-svg text{font-family:var(--sans)}
+.award{display:inline-flex;align-items:center;gap:9px;font-size:.84rem;color:var(--soft);padding:5px 14px 5px 6px;border-radius:999px;background:#fff;box-shadow:var(--ring)}
+.award b{font-weight:500;background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent}
+.medal{width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center;background:#e9f1ea;overflow:hidden}
+.medal canvas{width:22px;height:22px;image-rendering:pixelated}
+.wordmark{font-family:var(--brand);font-weight:600;font-size:clamp(3.6rem,8.3vw,6.3rem);letter-spacing:-.025em;line-height:1;margin-top:20px;padding-bottom:.08em;background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent}
+.hero-sub{font-family:var(--serif);font-size:clamp(1.4rem,2.5vw,1.8rem);line-height:1.24;color:var(--ink);margin-top:10px}
+.hero-sub em{background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
+.lead{margin-top:16px;max-width:33em;font-size:1.02rem}
+.rotator{display:inline-block;color:var(--ink);font-weight:500;border-bottom:1.5px solid var(--knows);padding-inline:2px;min-width:7.4em;text-align:center;transition:opacity .25s,filter .25s}
+.rotator.off{opacity:0;filter:blur(5px)}
+.stats{display:flex;flex-wrap:wrap;gap:12px 36px;margin-top:24px}
+.stat b{display:block;font:500 2.05rem/1.1 var(--serif);font-variant-numeric:tabular-nums}
+.stat span{font-size:.78rem;color:var(--muted)}
+.ctas{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
+
+.hero-viz{background:rgba(255,255,255,.86);border-radius:20px;box-shadow:var(--ring);padding:20px 22px 18px}
+.hero-viz figcaption{display:flex;justify-content:space-between;gap:10px;font:500 .72rem var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
+.hero-viz figcaption a{font:500 .86rem var(--sans);letter-spacing:0;text-transform:none;background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent}
+.xs-chips,.pick{display:flex;flex-wrap:wrap;gap:6px}
+.xs-chips{margin-top:12px}
+.chip{font-size:.8rem;padding:5px 12px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);color:var(--soft);transition:background .2s,color .2s}
+.chip:hover{color:var(--ink)}
+.chip[aria-selected="true"]{background:var(--ink);color:#fff;box-shadow:none}
+.xs-wrap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px;margin-top:6px}
+.xs{position:relative;max-width:330px;margin:0 auto;width:100%}
+.xs-side{font-size:.72rem;color:var(--muted);line-height:1.25;width:64px}
+.xs-side b{display:block;font:500 1.15rem var(--serif);letter-spacing:-.01em}
+.xs-side--l{text-align:right}.xs-side--l b{color:var(--says)}
+.xs-side--r b{color:var(--knows)}
+.xs-ends{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:6px;border-top:1px solid var(--line);padding-top:11px;font-size:.72rem;color:var(--muted);line-height:1.3}
+.xs-ends b{display:block;font:500 1rem var(--serif);color:var(--ink);font-variant-numeric:tabular-nums}
+.hero-claim{margin-top:12px;font:400 1.08rem var(--serif);color:var(--ink);text-align:center}
+.hero-claim em{color:var(--says)}
+
+.ticker{border-block:1px solid var(--line);overflow:hidden;background:rgba(255,255,255,.6);padding-block:11px}
+.ticker-track{display:flex;width:max-content;gap:44px;animation:tick 42s linear infinite}
+.ticker:hover .ticker-track{animation-play-state:paused}
+.tk{font-size:.84rem;white-space:nowrap;color:var(--soft);font-variant-numeric:tabular-nums}
+.tk i{font:500 .74rem var(--mono);color:var(--muted);font-style:normal;margin-right:7px}
+.tk b{font-weight:500;color:var(--ink);margin-right:8px}
+.tk u{text-decoration:none;color:var(--knows);font-weight:500}.tk s{text-decoration:none;color:var(--says);font-weight:500}
+@keyframes tick{to{transform:translateX(-50%)}}
 
-.section{padding-block:60px}
-.section--tint{background:var(--paper-2)}
-h2{font-size:clamp(1.7rem,3vw,2.3rem)}
-.sec-sub{margin-top:8px;max-width:48em}
-#leaderboard .scroll,#pit .scroll{margin-top:22px}
+.section{padding-block:76px}
+.section--tint{background:linear-gradient(180deg,rgba(243,246,241,.85),rgba(243,246,241,.45))}
+.sec-head{margin-bottom:28px}
+.kicker{display:inline-flex;align-items:center;gap:10px;font:500 .74rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--knows)}
+.kicker::before{content:"";width:26px;height:1.5px;background:var(--g)}
+h2{font-size:clamp(2rem,4.1vw,3rem);margin-top:9px;max-width:21em}
+h2 em{background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
+.note{margin-top:11px;max-width:45em;font-size:.97rem}
+.card{background:#fff;border-radius:16px;box-shadow:var(--ring);padding:22px 24px}
+.card h3{font-size:1.22rem}
+
+.game{display:grid;grid-template-columns:1.12fr 1fr;gap:16px;align-items:stretch}
+.game>*{min-width:0}
+.q-card,.a-card{background:#fff;border-radius:18px;box-shadow:var(--ring);padding:24px 26px;display:flex;flex-direction:column}
+.q-top{display:flex;justify-content:space-between;gap:10px;font:500 .72rem var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
+.q-text{font:400 1.32rem/1.32 var(--serif);color:var(--ink);margin-top:12px;min-height:5.3em}
+.q-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
+.q-opt{padding:13px 14px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line);text-align:left;font-size:1rem;font-variant-numeric:tabular-nums;transition:background .18s,box-shadow .18s;background:#fff;min-height:50px;display:flex;justify-content:space-between;align-items:center;gap:8px}
+.q-opt:hover:not(:disabled){background:var(--paper-2)}
+.q-opt:disabled{cursor:default;color:var(--soft)}
+.q-opt.you{box-shadow:inset 0 0 0 2px var(--ink);color:var(--ink)}
+.q-opt.right{background:#e3f2ee;box-shadow:inset 0 0 0 2px var(--knows);color:var(--ink);font-weight:500}
+.q-opt small{font:500 .68rem var(--mono);color:var(--muted)}
+.q-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:auto;padding-top:16px}
+.a-head{display:flex;justify-content:space-between;gap:10px;font:500 .72rem var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
+.a-score{letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}
+.a-rows{display:flex;flex-direction:column;margin-top:8px}
+.a-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:11px 0;border-bottom:1px solid var(--line)}
+.a-row:last-child{border-bottom:0}
+.a-m{font-weight:500;font-size:.95rem}
+.a-v{text-align:right;font-variant-numeric:tabular-nums;font-size:.95rem}
+.a-s{font:400 1.02rem var(--serif);color:var(--soft);min-height:1.5em}
+.a-s.know{color:var(--knows)}.a-s.deny{color:var(--says)}
+.a-tally{text-align:right;font:500 .72rem var(--mono);color:var(--muted);align-self:center}
+.a-v.ok{color:var(--knows);font-weight:500}.a-v.no{color:var(--muted);text-decoration:line-through}
+.wait{color:var(--muted)}
+.a-punch{margin-top:auto;padding-top:12px;font:400 1.14rem/1.3 var(--serif);color:var(--ink)}
+
+.board{background:#fff;border-radius:18px;box-shadow:var(--ring);overflow:hidden}
 .scroll{overflow-x:auto}
-table.lb{border-collapse:collapse;width:100%;font-size:.9rem;font-variant-numeric:tabular-nums;min-width:920px}
-.lb th{font:500 .74rem var(--sans);color:var(--muted);text-align:right;padding:13px 9px;border-bottom:1px solid var(--line);white-space:nowrap;user-select:none}
-.lb th[data-k]{cursor:pointer}
-.lb th[data-k]:hover{color:var(--ink)}
-.lb th.on{color:var(--ink)}
-.lb th.left,.lb td.left{text-align:left}
-.lb td{padding:11px 9px;text-align:right;border-bottom:1px solid var(--line);color:var(--ink);white-space:nowrap}
-.lb tr:last-child td{border-bottom:0}
-.lb tbody tr:hover{background:var(--paper-2)}
-.rank{color:var(--muted);font-family:var(--mono);font-size:.8rem}
-.mname{font-weight:500}
-.vendor{color:var(--muted);font-size:.78rem;margin-left:7px}
-.chip{font:500 .66rem var(--mono);color:var(--soft);background:var(--paper-2);border-radius:6px;padding:1px 6px;margin-left:7px}
-.bar{display:inline-flex;align-items:center;gap:9px;justify-content:flex-end}
-.bar i{position:relative;display:block;width:60px;height:7px;background:var(--paper-2);border-radius:4px}
-.bar i b{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--knows)}
-.bar i u{position:absolute;top:-3px;bottom:-3px;border-left:1.5px dashed var(--chance)}
-.ci{color:var(--muted);font-size:.8rem;margin-left:4px}
-.flag{color:#b43c12;font-weight:500}
+table.lb{border-collapse:collapse;width:100%;font-size:.94rem;font-variant-numeric:tabular-nums;min-width:960px}
+.lb th{font:500 .74rem var(--sans);color:var(--muted);text-align:center;padding:14px 8px;border-bottom:1px solid var(--line);white-space:nowrap;user-select:none}
+.lb th[data-k]{cursor:pointer}.lb th[data-k]:hover,.lb th.on{color:var(--ink)}
+.lb .left{text-align:left}
+.lb td{padding:8px;text-align:center;border-bottom:1px solid var(--line);white-space:nowrap}
+.lb tbody tr.row{cursor:pointer;transition:background .15s}
+.lb tbody tr.row:hover{background:var(--paper-2)}
+.lb tr.detail td{background:var(--paper-2);padding:0;white-space:normal;text-align:left}
+.pos{display:inline-grid;place-items:center;width:27px;height:27px;border-radius:50%;font:500 .78rem var(--mono);color:var(--muted)}
+.pos.p1{background:linear-gradient(145deg,#f6d77a,#d9a42b);color:#3e2c00}.pos.p2{background:linear-gradient(145deg,#e4e8ec,#b4bdc6);color:#2c3540}.pos.p3{background:linear-gradient(145deg,#e9bd91,#bf7f45);color:#3c2109}
+.mname{font-weight:500}.mv{color:var(--muted);font-size:.78rem;margin-left:7px}
+.tag{font:500 .66rem var(--mono);color:var(--soft);background:var(--paper-2);border-radius:6px;padding:1px 6px;margin-left:7px}
+.heat{display:inline-block;min-width:52px;padding:6px 8px;border-radius:9px}
+.ci{color:var(--muted);font-size:.78rem;margin-left:4px}
 .na{color:var(--muted)}
-.note{margin-top:12px;font-size:.84rem;max-width:62em}
-.note b{color:var(--ink);font-weight:500}
-.findings{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
-.findings>div{min-width:0}
-.findings .num{font:500 1.55rem var(--serif);color:var(--ink);line-height:1.2}
-.findings p{margin-top:6px;font-size:.9rem}
-
-.multiples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
-.panel h3{font-size:1.2rem}
-.panel .ends{font-size:.8rem;color:var(--soft);margin-top:3px}
-.panel .ends b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
-.chart{position:relative;margin-top:6px}
-
-.fam{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}
-.fam h3{font-size:1.15rem;margin-bottom:6px}
-
-.decl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:22px}
-
-.m-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 44px;margin-top:22px}
-.m-grid h3{font-size:1.15rem;margin-bottom:6px}
-.m-grid p{font-size:.93rem}
-.foot{padding-block:26px;font-size:.82rem;color:var(--muted)}
-
-.forest{position:relative;display:block;width:190px;height:16px}
+.late{color:var(--says);font-weight:500}
+.chev{color:var(--muted);transition:transform .25s;display:inline-block}
+tr.open .chev{transform:rotate(90deg)}
+.dt{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:26px;padding:18px 26px 22px}
+.dt>*{min-width:0}
+.dt h4{font:500 .72rem var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
+.dt p{font-size:.92rem}
+.dt-line{display:flex;justify-content:space-between;gap:10px;font-size:.9rem;padding:3px 0;font-variant-numeric:tabular-nums}
+.dt-line b{font-weight:500}
+.keys{display:flex;justify-content:space-between;gap:36px;margin-top:14px;font-size:.84rem}
+.keys p{font-size:.84rem}.keys b{color:var(--ink);font-weight:500}
+.ramp-key{white-space:nowrap}
+.ramp{display:inline-block;width:82px;height:9px;border-radius:5px;background:linear-gradient(90deg,#f1f4ee,#0a7d74);margin-left:7px;vertical-align:middle}
+
+.legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.8rem;color:var(--soft)}
+.legend span{display:inline-flex;align-items:center;gap:7px}
+.mk{width:11px;height:11px;display:inline-block}
+.mk--k{background:var(--knows);border-radius:50%}
+.mk--c{background:var(--says);transform:rotate(45deg) scale(.85)}
+.mk--s{width:0;height:0;border-inline:6px solid transparent;border-bottom:11px solid var(--ink)}
+.mk--v{border:2px solid var(--vendor);background:#fff}
+.band{width:22px;height:11px;background:rgba(217,98,43,.2);border-radius:2px;display:inline-block}
+.ln{width:18px;height:2.5px;border-radius:2px;display:inline-block}.ln--k{background:var(--knows)}.ln--c{background:var(--says)}
+.tick{height:13px;border-left:1.5px dashed var(--chance);display:inline-block}
+.cal #calendar{margin-top:8px}
+.big{margin-top:16px}
+.big-top{display:flex;justify-content:space-between;gap:10px 18px;flex-wrap:wrap;align-items:center}
+.chart{margin-top:8px}
+.big .note{margin-top:6px;font-size:.92rem}
+
+.fam{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
+.fam h3{margin-bottom:12px}
+.fam-sub{display:flex;gap:16px;font-size:.76rem;color:var(--muted);margin-bottom:6px}
+.fam-sub span{display:inline-flex;align-items:center;gap:6px}
+.fam-sub i{width:9px;height:9px;border-radius:50%;display:inline-block}
+.fr{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;align-items:center;padding:7px 0;font-size:.82rem}
+.fr-b{display:grid;gap:3px}
+.fb{display:grid;grid-template-columns:minmax(0,1fr) 30px;gap:7px;align-items:center;font-size:.76rem;color:var(--soft);font-variant-numeric:tabular-nums}
+.fb i{display:block;height:7px;border-radius:0 4px 4px 0}
+.fb.k i{background:var(--knows)}.fb.c i{background:var(--says)}
+
+.prompt-line{display:flex;gap:14px;align-items:center;padding:13px 18px;background:#fff;border-radius:14px;box-shadow:var(--ring);margin-bottom:16px}
+.sw{position:relative;flex:none;width:46px;height:26px;border-radius:999px;background:#d7dfda;transition:background .25s}
+.sw i{position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .3s var(--ease);box-shadow:0 1px 3px rgba(0,0,0,.25)}
+.sw[aria-checked="true"]{background:var(--knows)}
+.sw[aria-checked="true"] i{transform:translateX(20px)}
+#dateCode{font:400 .88rem var(--mono);color:var(--muted);transition:color .3s}
+#dateCode.on{color:var(--ink)}
+.decl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
+.hb{margin-top:12px;display:grid;gap:11px}
+.hb-r{display:grid;grid-template-columns:104px minmax(0,1fr) 40px;gap:10px;align-items:center;font-size:.86rem}
+.hb-t{height:12px;background:var(--paper-2);border-radius:0 6px 6px 0;position:relative}
+.hb-t i{position:absolute;inset:0 auto 0 0;background:var(--knows);border-radius:0 6px 6px 0;transition:width .7s var(--ease),background .4s}
+.hb-v{text-align:right;font-variant-numeric:tabular-nums;font-weight:500}
+
+table.pit{min-width:680px}
+.pit td{padding-block:9px}
+.forest{position:relative;display:block;width:200px;height:16px}
 .forest s{position:absolute;top:0;bottom:0;border-left:1.5px dashed var(--chance)}
 .forest i{position:absolute;top:7px;height:2px;background:var(--knows);border-radius:2px}
 .forest b{position:absolute;top:4px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--knows)}
-table.pit{min-width:640px}
 
-.tip{position:fixed;z-index:70;pointer-events:none;background:#0f1528;color:#fff;font-size:.78rem;line-height:1.45;padding:7px 10px;border-radius:8px;max-width:240px;opacity:0;transition:opacity .12s;left:0;top:0;font-variant-numeric:tabular-nums}
-.tip.show{opacity:1}
-.tip b{font-weight:600}
+.how{display:grid;grid-template-columns:1fr 1.25fr;gap:32px;align-items:start}
+.how>*{min-width:0}
+.eg-q{font:400 1.16rem/1.3 var(--serif);color:var(--ink)}
+.eg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:14px;font-size:.92rem;font-variant-numeric:tabular-nums}
+.eg-grid span{padding:8px 11px;border-radius:9px;box-shadow:inset 0 0 0 1px var(--line)}
+.eg-grid .eg-h{box-shadow:none;padding:0 2px;font-size:.78rem;color:var(--muted)}
+.eg-grid .eg-hit{background:#e3f2ee}
+.m-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 30px}
+.m-grid h3{font-size:1.16rem;margin-bottom:5px}
+.m-grid p{font-size:.92rem}
+.foot{border-top:1px solid var(--line);padding-block:24px;font-size:.84rem;color:var(--muted)}
+.foot-in{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
+.foot a:hover{color:var(--ink)}
+
+.tip{position:fixed;z-index:70;pointer-events:none;background:#10201c;color:#fff;font-size:.78rem;line-height:1.45;padding:7px 10px;border-radius:8px;max-width:250px;opacity:0;transition:opacity .12s;left:0;top:0;font-variant-numeric:tabular-nums}
+.tip.show{opacity:1}.tip b{font-weight:600}
 
-@media (max-width:900px){
+@keyframes grow{from{opacity:0}}
+.grow{animation:grow .3s both}
+
+@media (max-width:960px){
   .wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
-  .header{position:static}
-  .hero{padding-block:40px}
-  .hero-grid,.multiples,.fam,.decl,.m-grid,.findings{grid-template-columns:minmax(0,1fr)}
-  .hero-grid{gap:30px}
-  .stats{grid-template-columns:repeat(2,auto)}
-  .rings{opacity:.4;right:-320px}
-  .section{padding-block:42px}
+  .links{display:none}
+  .hero{padding-top:88px}
+  .hero-grid,.game,.fam,.decl,.how,.dt{grid-template-columns:minmax(0,1fr)}
+  .hero-grid{gap:26px}
+  .section{padding-block:48px}
+  .keys{flex-direction:column;gap:8px}
+  .xs-side{width:50px}
+  .q-text{min-height:0}
+}
+@media (max-width:480px){.m-grid{grid-template-columns:minmax(0,1fr)}.xs-ends{grid-template-columns:repeat(2,1fr)}}
+@media (prefers-reduced-motion:reduce){
+  html{scroll-behavior:auto}
+  .reveal,.js .reveal:not(.in){opacity:1;transform:none;transition:none}
+  .ticker-track,.grow{animation:none}
 }
-@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}