HERCULEAN leaderboard site (from xueqingpeng/herculean docs/ @ 76f5121)

README.md

@@ -1,10 +1,22 @@
 ---
 title: HERCULEAN
-emoji: 😻
-colorFrom: blue
+emoji: 🦁
+colorFrom: red
 colorTo: purple
 sdk: static
+app_file: index.html
 pinned: false
+short_description: Agentic benchmark for financial intelligence leaderboard
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# HERCULEAN
+
+**HERCULEAN: An Agentic Benchmark for Financial Intelligence** · [arXiv 2605.14355](https://arxiv.org/abs/2605.14355)
+
+Interactive leaderboard for HERCULEAN, which evaluates 30 agent systems (5 architectures × 6 backbones,
+3 runs each) end to end on four financial workflows: Trading, Hedging, Market Insights and Auditing.
+
+- `index.html`: rankings, per-workflow leaderboard, trajectory replay and benchmark overview
+- `play.html`: a mini-game that trades a stock with the agent systems' recorded decisions
+
+Also available at https://xueqingpeng.github.io/herculean/

app.js

@@ -0,0 +1,1068 @@
+/* HERCULEAN leaderboard.
+   Reads window.HERC from ./data.js. No libraries. */
+(() => {
+const H = window.HERC, M = H.meta;
+const $ = (s, el = document) => el.querySelector(s);
+const $$ = (s, el = document) => [...el.querySelectorAll(s)];
+const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+const WF = H.workflows;                                   // Trading, Hedging, Market Insights, Auditing
+const WC = { 'Trading': '#d6304a', 'Hedging': '#8a3ce0', 'Market Insights': '#2f6fd6', 'Auditing': '#11949f' };
+const SHORT = { 'Market Insights': 'Insights' };
+const AC = { 'ReAct': '#2a78d6', 'Claude Code': '#eb6834', 'Codex': '#1baf7a', 'Hermes': '#eda100', 'OpenClaw': '#e87ba4' };
+const INI = { 'ReAct': 'RA', 'Claude Code': 'CC', 'Codex': 'CX', 'Hermes': 'HM', 'OpenClaw': 'OC' };
+const INI_FG = { 'ReAct': '#fff' };                        // dark text on the lighter badges
+const ini = (a, cls = 'ini') => `<span class="${cls}" style="--c:${AC[a]};--fg:${INI_FG[a] || '#0f1528'}">${INI[a]}</span>`;
+
+/* ---------- agent systems: Overall = mean of the 4 workflow scores, Floor = min ---------- */
+const rows = H.scores.map(s => {
+  const v = WF.map(w => s[w]);
+  return { ...s, key: `${s.agent}|${s.model}`, name: `${s.agent} · ${s.model}`,
+    Overall: v.reduce((a, b) => a + b, 0) / v.length, Floor: Math.min(...v) };
+}).sort((a, b) => b.Overall - a.Overall);
+rows.forEach((r, i) => r.rank = i + 1);
+const top = rows[0], N = rows.length, S = H.offlineStd;
+
+// paper rounding (half up), so 96.55 shows as 96.6
+const f1 = v => (Math.round(v * 10 + 1e-9) / 10).toFixed(1);
+const fmtRho = v => (v < 0 ? '−' : '') + Math.abs(v).toFixed(2);
+const pct = v => v == null ? '—' : (v > 0 ? '+' : v < 0 ? '−' : '') + Math.abs(v).toFixed(2) + '%';
+const num = (v, d = 2) => v == null ? '—' : (v < 0 ? '−' : '') + Math.abs(v).toFixed(d);
+const pm = (txt, sd, d = 2) => sd == null ? txt : `${txt}<span class="sd">±${Math.abs(sd).toFixed(d)}</span>`;
+const mean = a => { const x = a.filter(v => v != null); return x.length ? x.reduce((p, q) => p + q, 0) / x.length : null; };
+
+/* best score per workflow (ties count for every tied system) */
+const best = Object.fromEntries(WF.map(w => [w, Math.max(...rows.map(r => r[w]))]));
+const isBest = (r, w) => Math.abs(r[w] - best[w]) < 1e-6;
+const leaders = Object.fromEntries(WF.map(w => [w, rows.filter(r => isBest(r, w))]));
+const leadCount = {}; WF.forEach(w => leaders[w].forEach(r => leadCount[r.key] = (leadCount[r.key] || 0) + 1));
+const maxLeads = Math.max(...Object.values(leadCount));
+
+/* Spearman ρ between workflow rankings (average ranks for ties) */
+function ranks(v) {
+  const idx = v.map((x, i) => [x, i]).sort((a, b) => a[0] - b[0]), r = new Array(v.length);
+  for (let i = 0; i < idx.length;) { let j = i; while (j + 1 < idx.length && idx[j + 1][0] === idx[i][0]) j++;
+    for (let k = i; k <= j; k++) r[idx[k][1]] = (i + j) / 2 + 1; i = j + 1; }
+  return r;
+}
+function spearman(a, b) {
+  const ra = ranks(a), rb = ranks(b), n = a.length, m = (n + 1) / 2;
+  let sab = 0, saa = 0, sbb = 0;
+  for (let i = 0; i < n; i++) { sab += (ra[i] - m) * (rb[i] - m); saa += (ra[i] - m) ** 2; sbb += (rb[i] - m) ** 2; }
+  return sab / Math.sqrt(saa * sbb);
+}
+const rhos = []; WF.forEach((a, i) => WF.slice(i + 1).forEach(b => rhos.push(spearman(rows.map(r => r[a]), rows.map(r => r[b])))));
+const meanRho = rhos.reduce((p, q) => p + q, 0) / rhos.length;
+
+/* score magnitude: one purple hue, light → dark */
+const RAMP = [[244, 240, 251], [201, 182, 234], [142, 106, 208], [75, 42, 143]];
+function shade(v) {
+  const t = Math.max(0, Math.min(1, v / 100)) * (RAMP.length - 1), i = Math.min(RAMP.length - 2, Math.floor(t)), f = t - i;
+  const c = RAMP[i].map((x, k) => Math.round(x + (RAMP[i + 1][k] - x) * f));
+  return { bg: `rgb(${c})`, fg: v > 58 ? '#fff' : '#0f1528' };
+}
+
+/* ---------- tooltip ---------- */
+const tip = $('#tip');
+document.addEventListener('pointerover', e => { const t = e.target.closest('[data-tip]'); if (!t) return; tip.innerHTML = t.dataset.tip; tip.classList.add('on'); });
+document.addEventListener('pointermove', e => {
+  if (!tip.classList.contains('on')) return;
+  const x = Math.min(innerWidth - tip.offsetWidth - 10, e.clientX + 14), y = e.clientY - tip.offsetHeight - 12;
+  tip.style.left = x + 'px'; tip.style.top = (y < 6 ? e.clientY + 18 : y) + 'px';
+});
+document.addEventListener('pointerout', e => { if (e.target.closest('[data-tip]')) tip.classList.remove('on'); });
+
+/* ================= HERO ================= */
+// small lion for the "New benchmark" pill: scalloped mane, face, eyes, nose
+const LION = (() => {
+  // spiky mane (16-point star), ears, face, eyes, nose and muzzle
+  const pts = Array.from({ length: 32 }, (_, i) => { const a = i / 32 * 2 * Math.PI - Math.PI / 2, r = i % 2 ? 8.6 : 11.4;
+    return `${(12 + r * Math.cos(a)).toFixed(2)},${(12.6 + r * Math.sin(a)).toFixed(2)}`; }).join(' ');
+  const face = '#6b1590';
+  return `<svg viewBox="0 0 24 24" aria-hidden="true"><polygon class="mane" points="${pts}" fill="#fff"/>
+    <circle cx="8.1" cy="8.2" r="1.9" fill="${face}"/><circle cx="15.9" cy="8.2" r="1.9" fill="${face}"/>
+    <circle cx="12" cy="12.9" r="6.4" fill="${face}"/>
+    <circle cx="9.6" cy="11.6" r=".95" fill="#fff"/><circle cx="14.4" cy="11.6" r=".95" fill="#fff"/>
+    <ellipse cx="12" cy="15.4" rx="2.6" ry="1.9" fill="#fff" opacity=".22"/>
+    <path d="M10.6 13.6h2.8L12 15.2z" fill="#fff"/>
+    <path d="M12 15.2v.8M12 16c-.6.7-1.5.8-2.1.3M12 16c.6.7 1.5.8 2.1.3" stroke="#fff" stroke-width=".75" fill="none" stroke-linecap="round"/></svg>`;
+})();
+$('#lion').innerHTML = LION;
+// the same lion beside "Cite HERCULEAN"
+if ($('#citeLion')) $('#citeLion').innerHTML = LION;
+// hovering the lion or the citation panel speeds the mane up; playbackRate keeps the current angle (no jump)
+(() => {
+  const lion = $('#citeLion'), bib = $('#resources .bib'); if (!lion) return;
+  const rate = r => { const m = $('.mane', lion); if (m) m.getAnimations().forEach(x => (x.playbackRate = r)); };
+  [lion, bib].filter(Boolean).forEach(el => { el.addEventListener('pointerenter', () => rate(14 / 3)); el.addEventListener('pointerleave', () => rate(1)); });
+})();
+// rotating subject: one architecture at a time, in its own colour
+(() => {
+  const r = $('#rotator');
+  r.innerHTML = H.agents.map((a, i) => `<span class="${i === 0 ? 'on' : ''}" style="--c:${AC[a]}">${a}</span>`).join('');
+  const sp = $$('span', r); let i = 0;
+  const MS_ROT = 1600;                                               // one name every 1.6 s
+  r.style.setProperty('--rot', MS_ROT + 'ms');
+  // width follows the current name; the underline takes its colour
+  const fit = () => { r.style.width = sp[i].offsetWidth + 'px'; r.style.setProperty('--uc', AC[H.agents[i]]); };
+  fit(); document.fonts && document.fonts.ready.then(fit);
+  if (reduce) return;
+  setInterval(() => {
+    const prev = sp[i]; prev.classList.remove('on'); prev.classList.add('out');
+    i = (i + 1) % sp.length; sp[i].classList.remove('out'); sp[i].classList.add('on'); fit();
+    setTimeout(() => prev.classList.remove('out'), 600);
+  }, MS_ROT);
+})();
+$('#awardN').textContent = `${H.agents.length} architectures × ${H.models.length} backbones`;
+$('#stats').innerHTML = [[N, 'agent systems', `${H.agents.length} architectures × ${H.models.length} backbones`], [WF.length, 'workflows', WF.join(' · ')], [M.offlineDays, 'offline days', `trading days, ${M.offlineWindow[0]} → ${M.offlineWindow[1]}`], [M.liveDays, 'live days', `trading days, ${M.liveWindow[0]} → ${M.liveWindow[1]}; Trading, Hedging and Market Insights, 3 selected systems per workflow`], [M.runs, 'runs', `every agent system is run ${M.runs} times independently`, '×']]
+  .map(([n, l, t, suf]) => `<div${t ? ` data-tip="<b>${l}</b><br>${t}"` : ''}><b data-count="${n}" data-dec="0"${suf ? ` data-suf="${suf}"` : ''}>0</b><span>${l}</span></div>`).join('');
+// "Top 8 · Overall score" card: bars coloured by architecture, initials badge on top
+const MS = { 'Claude Sonnet 5': 'Sonnet 5', 'DeepSeek-V3.2': 'DS-V3.2', 'DeepSeek-V4-Pro': 'DS-V4-Pro', 'Qwen3.5-9B': 'Qwen-9B', 'Qwen3.5-4B': 'Qwen-4B' };
+// jump into the Rankings section on a given view, optionally with a selection (set by the Rankings block below)
+let rkGo = null;
+const goRank = (view, sel) => { if (rkGo) rkGo(view, sel); document.getElementById('rankings').scrollIntoView({ behavior: reduce ? 'auto' : 'smooth', block: 'start' }); };
+$('#award').addEventListener('click', e => { e.preventDefault(); goRank('flow'); });
+const pod = $('#podium'), TOPN = 8;
+pod.innerHTML = rows.slice(0, TOPN).map((r, i) => `<div class="col${i === 0 ? ' first' : ''}${i < 3 ? ` podium-${i + 1}` : ''}" data-key="${r.key}" style="--h:${r.Overall / top.Overall * 100}%;--d:${i * 90}ms;--c:${AC[r.agent]};--fg:${INI_FG[r.agent] || '#0f1528'}"
+    data-tip="<b>#${r.rank} ${r.name}</b><br>Overall ${f1(r.Overall)}<span> · floor ${f1(r.Floor)}</span><br>${WF.map(w => `${SHORT[w] || w} ${f1(r[w])}`).join('<span> · </span>')}">
+    <div class="bar"><span class="val">${f1(r.Overall)}</span><span class="rk-badge">${r.rank}</span></div><span class="nm">${r.agent}<small>${MS[r.model] || r.model}</small></span></div>`).join('');
+// ticker: every agent system by Overall rank; the list is doubled so the loop is seamless
+const tickItem = r => `<span class="tk${r.rank === 1 ? ' first' : ''}" data-key="${r.key}" data-tip="<b>#${r.rank} ${r.name}</b><br>${WF.map(w => `${SHORT[w] || w} ${f1(r[w])}`).join('<span> · </span>')}"><span class="p">#${String(r.rank).padStart(2, '0')}</span>${ini(r.agent, 'ini sm')}<span class="n">${r.agent} <em>·</em> ${MS[r.model] || r.model}</span><span class="v">${f1(r.Overall)}</span></span>`;
+$('#tickerTrack').innerHTML = rows.map(tickItem).join('').repeat(2);
+// constant speed (~70 px/s, like a ticker tape) whatever the item widths
+const setTickerSpeed = () => { const t = $('#tickerTrack'); t.style.setProperty('--dur', (t.scrollWidth / 2 / 70).toFixed(1) + 's'); };
+setTickerSpeed(); document.fonts && document.fonts.ready.then(setTickerSpeed);
+$('#ticker').addEventListener('click', e => {
+  const t = e.target.closest('.tk'); if (!t) return;
+  const i = rows.findIndex(r => r.key === t.dataset.key);
+  if (openKey !== rows[i].key) toggle(i);
+  document.getElementById('leaderboard').scrollIntoView({ behavior: reduce ? 'auto' : 'smooth' });
+});
+$('#heroLegend').innerHTML = H.agents.map(a => `<span><i style="background:${AC[a]}"></i>${a}</span>`).join('');
+// architecture and backbone rankings: mean Overall over the systems that share the architecture (6 backbones)
+// or the backbone (5 architectures) — a page-only aggregate of the leaderboard
+{
+  const agg = (keys, by) => keys.map(k => { const rs = rows.filter(r => r[by] === k), v = rs.map(r => r.Overall);
+    return { k, m: v.reduce((p, q) => p + q, 0) / v.length, lo: Math.min(...v), hi: Math.max(...v), best: rs[0] }; }).sort((p, q) => q.m - p.m);
+  const A = agg(H.agents, 'agent'), B = agg(H.models, 'model'), mx = Math.max(...A.map(x => x.m), ...B.map(x => x.m));
+  const row = (x, i, kind) => `<div class="gr" data-kind="${kind}" data-k="${x.k}" data-tip="<b>${kind === 'agent' ? x.k : (MS[x.k] || x.k)}</b> · mean Overall ${f1(x.m)}<br><span>range ${f1(x.lo)}–${f1(x.hi)} over ${kind === 'agent' ? H.models.length + ' backbones' : H.agents.length + ' architectures'}</span><br>best: ${x.best.name} (${f1(x.best.Overall)})">
+      <span class="gr-p">${i + 1}</span>${kind === 'agent' ? ini(x.k, 'ini sm') : ''}<span class="gr-n">${kind === 'agent' ? x.k : (MS[x.k] || x.k)}</span>
+      <span class="gr-t"><i style="width:${x.m / mx * 100}%;${kind === 'agent' ? `background:${AC[x.k]}` : ''}"></i></span><b>${f1(x.m)}</b></div>`;
+  $('#heroLeaders').innerHTML = `<div class="gr-col"><p class="hl-cap">Architectures <span>mean Overall</span></p>${A.map((x, i) => row(x, i, 'agent')).join('')}</div>
+    <div class="gr-col"><p class="hl-cap">Backbones <span>mean Overall</span></p>${B.map((x, i) => row(x, i, 'model')).join('')}</div>`;
+}
+$('#vizCap').textContent = `Top ${TOPN} · Overall score`;
+// clicking a bar opens Rankings on the Floor → Overall view with that system highlighted;
+// clicking an architecture / backbone row opens the Field view with that group highlighted
+pod.addEventListener('click', e => { const c = e.target.closest('.col'); if (c) goRank('floor', { mode: 'system', key: c.dataset.key }); });
+$('#heroLeaders').addEventListener('click', e => { const g = e.target.closest('.gr'); if (g) goRank('field', { mode: g.dataset.kind, key: g.dataset.k }); });
+
+function countUp(el) {
+  const to = +el.dataset.count, dec = el.dataset.dec != null ? +el.dataset.dec : 1, suf = el.dataset.suf || '', d = 1200, t0 = performance.now();
+  const show = v => (el.textContent = v.toFixed(dec) + suf);
+  if (reduce) { show(to); return; }
+  setTimeout(() => show(to), d + 300);   // always land on the value
+  // rAF time can precede t0 on the first frame; clamp so the count never starts below zero
+  const step = t => { const p = Math.max(0, Math.min(1, (t - t0) / d)), e = 1 - Math.pow(1 - p, 3);
+    show(to * e); if (p < 1) requestAnimationFrame(step); };
+  requestAnimationFrame(step);
+}
+
+/* ================= 1 · WORKFLOW CARDS ================= */
+const ICONS = {
+  env: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="5.5" rx="7.5" ry="2.5"/><path d="M4.5 5.5v6c0 1.4 3.4 2.5 7.5 2.5s7.5-1.1 7.5-2.5v-6"/><path d="M4.5 11.5v6c0 1.4 3.4 2.5 7.5 2.5s7.5-1.1 7.5-2.5v-6"/></svg>',
+  proto: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h12l-3-3M20 17H8l3 3"/></svg>',
+  eval: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 20h18"/><path d="M5 16l4-5 4 3 6-8"/><circle cx="19" cy="6" r="1.5"/></svg>',
+};
+// each workflow = Environment + Interaction Protocol + Trajectory Evaluation (short; the paper has the details)
+const RECIPE = {
+  'Trading': [`Daily prices, news and 10-K / 10-Q filings for ${H.tradeAssets.join(', ')}`, `One BUY, SELL or HOLD per day for ${M.offlineDays} trading days`, ['CR', 'SR', 'MDD', 'vs Buy & Hold']],
+  'Hedging': ['The same data across eight large-cap stocks', 'Pick a pair on day 1, then LONG_SHORT, SHORT_LONG, HOLD or CLOSE daily', ['CR', 'SR', 'MDD', 'dollar-neutral']],
+  'Market Insights': ['Weekly market context with a fixed peer mapping', 'A weekly eight-section report and rating, about 13 per asset', ['Quality 0–10', 'CR', 'SR', 'MDD']],
+  'Auditing': [`SEC XBRL filings with the US-GAAP taxonomy, ${M.auditInstances} instances`, 'Commit the reported and the recalculated value of one fact', ['ACC', 'SER', 'EER', 'CER']],
+};
+// one line on what each workflow is for (directional vs market-neutral; forward- vs backward-looking)
+const PURPOSE = {
+  'Trading': 'Seek profit as the market evolves, one directional decision a day.',
+  'Hedging': 'Seek profit with market risk hedged out, through a market-neutral pair.',
+  'Market Insights': 'Look forward: turn evidence into a view on an asset’s future.',
+  'Auditing': 'Look back: verify what a filing reports against its own numbers.',
+};
+const PARTS = [['Environment', 'env'], ['Interaction Protocol', 'proto'], ['Trajectory Evaluation', 'eval']];
+$('#wfGrid').innerHTML = WF.map((w, i) => {
+  const lead = leaders[w], [env, proto, ev] = RECIPE[w];
+  const who = lead.length === 1 ? `<span>${lead[0].agent} <em>·</em></span><span>${lead[0].model}</span>`
+    : `<span data-tip="<b>${lead.length}-way tie</b><br>${lead.map(r => r.name).join('<br>')}"><span>${lead[0].agent} <em>·</em></span><span>${lead[0].model} <em>+${lead.length - 1} tied</em></span></span>`;
+  const item = (j, body) => `<li><span class="ico">${ICONS[PARTS[j][1]]}</span><div><small>${PARTS[j][0]}</small>${body}</div></li>`;
+  return `<article class="wf spot" data-reveal style="--i:${i};--c:${WC[w]}"><span class="wf-bar"></span>
+    <div class="wf-top"><span class="lbl"><span class="wdot" style="--c:${WC[w]}"></span>Workflow</span><span class="num">0${i + 1}</span></div>
+    <h3>${w}</h3>
+    <p class="purpose">${PURPOSE[w]}</p>
+    <ul class="recipe">${item(0, `<p>${env}</p>`)}${item(1, `<p>${proto}</p>`)}${item(2, `<div class="chips">${ev.map(m => `<span>${m}</span>`).join('')}</div>`)}</ul>
+    <div class="wf-best"><div><small>Best agent system</small><div class="who">${who}</div></div><b>${f1(best[w])}</b></div>
+  </article>`;
+}).join('');
+
+/* ================= 2 · LEADERBOARD ================= */
+const score = (r, v) => v === 'Overall' ? r.Overall : v === 'Workflow floor' ? r.Floor : r[v];
+let view = 'Overall', openKey = null, showAll = false;
+const LIMIT = 10;                                          // rows shown before "show all"
+const hidden = new Set(), hiddenM = new Set();
+
+$('#lbKicker').textContent = `Leaderboard · offline regime · ${M.offlineWindow[0]} → ${M.offlineWindow[1]}`;
+$('#lbSub').textContent = `Click a column to re-rank all ${N} agent systems. Click a row for its details.`;
+$('#lbNote').innerHTML = `Each metric (mean of ${M.runs} runs) is rank-normalised across the ${N} agent systems to 0–100. <b>Overall</b> is the mean of the four workflow scores; the <b>workflow floor</b> is the lowest.`;
+
+// ranking is chosen from the column headers (Overall or one workflow); the bar always shows Overall
+$('#archChips').innerHTML = H.agents.map(a => `<button type="button" data-a="${a}" aria-pressed="true">${ini(a, 'ini sm')}${a}</button>`).join('');
+$('#archChips').addEventListener('click', e => {
+  const b = e.target.closest('button'); if (!b) return;
+  const a = b.dataset.a;
+  if (hidden.has(a)) hidden.delete(a); else if (hidden.size < H.agents.length - 1) hidden.add(a);
+  $$('button', $('#archChips')).forEach(x => { x.classList.toggle('off', hidden.has(x.dataset.a)); x.setAttribute('aria-pressed', !hidden.has(x.dataset.a)); });
+  layout();
+});
+$('#modelChips').innerHTML = H.models.map(m => `<button type="button" data-m="${m}" aria-pressed="true">${MS[m] || m}</button>`).join('');
+$('#modelChips').addEventListener('click', e => {
+  const b = e.target.closest('button'); if (!b) return;
+  const m = b.dataset.m;
+  if (hiddenM.has(m)) hiddenM.delete(m); else if (hiddenM.size < H.models.length - 1) hiddenM.add(m);
+  $$('button', $('#modelChips')).forEach(x => { x.classList.toggle('off', hiddenM.has(x.dataset.m)); x.setAttribute('aria-pressed', !hiddenM.has(x.dataset.m)); });
+  layout();
+});
+$('#colCells').innerHTML = WF.map(w => `<button type="button" class="sort-h" data-v="${w}" title="Rank by ${w}"><span class="wdot" style="--c:${WC[w]}"></span>${SHORT[w] || w}<i class="arr">↓</i></button>`).join('');
+$('#board .lb-cols').addEventListener('click', e => { const b = e.target.closest('.sort-h'); if (!b || b.dataset.v === view) return; view = b.dataset.v; layout(); });
+
+// one DOM row per system, created once and moved with transforms
+const box = $('#lbRows');
+box.innerHTML = rows.map((r, i) => `<div class="lb-row" data-i="${i}">
+  <div class="in" tabindex="0" role="button" aria-expanded="false">
+    <span class="lb-pos"></span>
+    <span class="lb-name">${ini(r.agent)}<b>${r.agent}</b><span>${r.model}</span></span>
+    <span class="lb-score"><span class="lb-track"><span class="lb-bar" style="--c:${AC[r.agent]}"></span></span><span class="lb-val"></span></span>
+    <span class="cells">${WF.map(w => { const s = shade(r[w]);
+      return `<span class="cell${isBest(r, w) ? ' best' : ''}" data-w="${w}" style="background:${s.bg};color:${s.fg}" data-tip="<b>${r.name}</b><br>${w}: ${f1(r[w])}<span> / 100${isBest(r, w) ? ' · best in workflow' : ''}</span>">${f1(r[w])}</span>`; }).join('')}</span>
+    <span class="chev">›</span>
+  </div></div>`).join('') + '<div class="lb-detail" id="lbDetail"></div>';
+const els = $$('.lb-row', box), detail = $('#lbDetail');
+function fitNames() {
+  const w = Math.max(...$$('.lb-name', box).map(n => [...n.children].reduce((s, c) => s + Math.max(c.getBoundingClientRect().width, c.scrollWidth), 0) + 22));
+  $('#board').style.setProperty('--namew', Math.ceil(w) + 'px');
+}
+const ROW = 40;
+let revealed = false;
+
+function layout() {
+  const vis = rows.map((r, i) => ({ r, i })).filter(x => !hidden.has(x.r.agent) && !hiddenM.has(x.r.model))
+    .sort((a, b) => score(b.r, view) - score(a.r, view) || b.r.Overall - a.r.Overall);
+  if (openKey && (hidden.has(openKey.split('|')[0]) || hiddenM.has(openKey.split('|')[1]))) openKey = null;
+  // open row beyond the first LIMIT rows (e.g. from the ticker): show everything
+  if (openKey && !showAll && vis.findIndex(x => x.r.key === openKey) >= LIMIT) showAll = true;
+  const shown = showAll ? vis : vis.slice(0, LIMIT);
+  els.forEach(el => el.classList.add('gone'));
+  let y = 0;
+  shown.forEach((x, pos) => {
+    const el = els[x.i], open = openKey === x.r.key;
+    el.classList.remove('gone'); el.classList.toggle('open', open); el.classList.toggle('top', pos === 0);
+    $('.in', el).setAttribute('aria-expanded', open);
+    el.style.transform = `translateY(${y}px)`;
+    $('.lb-pos', el).textContent = String(pos + 1).padStart(2, '0');
+    $('.lb-bar', el).style.width = (revealed ? x.r.Overall : 0) + '%';
+    $('.lb-val', el).textContent = f1(x.r.Overall);
+    $('.cells', el).classList.toggle('dim', WF.includes(view));
+    $$('.cell', el).forEach(c => c.classList.toggle('on', c.dataset.w === view));
+    y += ROW;
+    if (open) { detail.style.transform = `translateY(${y}px)`; y += detail.offsetHeight; }
+  });
+  if (openKey && !shown.some(x => x.r.key === openKey)) openKey = null;
+  detail.classList.toggle('show', !!openKey);
+  const more = $('#lbMore'), rest = vis.length - LIMIT;
+  more.hidden = rest <= 0;
+  more.setAttribute('aria-expanded', showAll);
+  more.innerHTML = showAll ? `Show top ${LIMIT} only <span class="chev2">↓</span>` : `Show all ${vis.length} agent systems <em style="font-style:normal;color:var(--muted)">(+${rest})</em> <span class="chev2">↓</span>`;
+  box.style.height = y + 'px';
+  $$('#board .sort-h').forEach(b => b.classList.toggle('on', b.dataset.v === view));
+}
+
+$('#lbMore').addEventListener('click', () => {
+  showAll = !showAll;
+  if (!showAll) openKey = null;               // otherwise an open row below #15 would re-expand the list
+  layout();
+  if (!showAll) document.getElementById('board').scrollIntoView({ behavior: reduce ? 'auto' : 'smooth', block: 'start' });
+});
+
+// expanded row: a one-line summary, then four small cards, one chart each
+const wfRank = (r, w) => 1 + rows.filter(x => x[w] > r[w] + 1e-9).length;
+const isLive = (w, k) => (M.liveConfigs[w] || []).includes(k);
+const pc0 = v => v == null ? '—' : (v > 0 ? '+' : v < 0 ? '−' : '') + Math.abs(v).toFixed(1) + '%';
+const sdS = (v, d = 1) => v == null ? '' : `<span class="sd">±${Math.abs(v).toFixed(d)}</span>`;
+// shared CR axis across every system and Buy & Hold, so trading dots are comparable between rows
+const crAll = H.tradeAssets.flatMap(a => [...rows.map(r => H.offline.Trading[a].CR[r.key]), H.baseline[`Trading|${a}|CR`]]).filter(v => v != null);
+const crMin = Math.min(0, ...crAll), crMax = Math.max(0, ...crAll), xPos = v => (v - crMin) / (crMax - crMin) * 100;
+const ACTION = { B: 'BUY', S: 'SELL', H: 'HOLD', L: 'LONG_SHORT', R: 'SHORT_LONG', C: 'CLOSE', '-': 'no committed record (scored as HOLD)' };
+function breakdown(r) {
+  const k = r.key, O = H.offline, A = H.tradeAssets;
+  const fw = WF.find(w => r[w] === r.Floor), liveWf = Object.keys(M.liveConfigs).filter(w => isLive(w, k));
+  const best = WF.reduce((p, w) => r[w] > r[p] ? w : p, WF[0]);
+  const liveTip = M.liveRule.replace(/"/g, '&quot;');
+  const tag = w => (w === best ? '<span class="d1-tag best" data-tip="this system’s strongest workflow">best</span>' : w === fw ? '<span class="d1-tag floor" data-tip="this system’s weakest workflow (workflow floor)">floor</span>' : '')
+    + (liveWf.includes(w) ? `<span class="d1-tag live" data-tip="<b>Run live</b> ${M.liveWindow[0]} → ${M.liveWindow[1]}<br><span>${liveTip}</span>">live</span>` : '');
+  const rpl = w => (w === 'Trading' || w === 'Hedging') ? `<button type="button" class="d1-replay" data-replay="${k}"><svg class="play-ico" viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="8" r="7.5" fill="currentColor"/><path d="M6.4 4.9v6.2l4.9-3.1z" fill="#fff"/></svg>Replay</button>` : '';
+  const card = (w, sub, body) => `<div class="d1-card" style="--c:${WC[w]}"><h4><span class="wdot" style="--c:${WC[w]}"></span>${w}${tag(w)}<span class="ws" data-tip="${w} workflow score, rank-normalised 0–100"><b>${f1(r[w])}</b><span class="rk" data-tip="rank in ${w} among ${N} agent systems">#${wfRank(r, w)}</span></span></h4><p class="sub">${sub}${rpl(w)}</p>${body}</div>`;
+  // Trading: CR per asset (dot) against Buy & Hold (tick)
+  const tr = A.map(a => { const v = O.Trading[a].CR[k], sd = S.Trading[a].CR[k], bh = H.baseline[`Trading|${a}|CR`];
+    const sr = O.Trading[a].SR[k], mdd = O.Trading[a].MDD[k];
+    return `<div class="d1-cr" data-tip="<b>${a}</b><br>Agent CR ${pct(v)} <span>±${(sd ?? 0).toFixed(2)}</span><br>SR ${num(sr)} <span>±${(S.Trading[a].SR[k] ?? 0).toFixed(2)}</span><br>MDD ${mdd == null ? '— <span>never held a position</span>' : mdd.toFixed(2) + '% <span>±' + (S.Trading[a].MDD[k] ?? 0).toFixed(2) + '</span>'}<br><span>Buy &amp; Hold CR ${pct(bh)}</span>"><span class="d1-t">${a}</span>
+      <span class="track"><i class="zero" style="left:${xPos(0)}%"></i><i class="bh" style="left:${xPos(bh)}%"></i>${v == null ? '' : `<i class="ag" style="left:${xPos(v)}%"></i>`}</span>
+      <span class="val">${pct(v)}${sdS(sd)}</span></div>`; }).join('');
+  const beats = A.filter(t => O.Trading[t].CR[k] >= H.baseline[`Trading|${t}|CR`]).length;
+  const trading = card('Trading', 'Cumulative return (CR) per asset · hover a row for SR and MDD', tr + `<p class="d1-beat">Beats Buy &amp; Hold on <b>${beats} of ${A.length}</b> tickers</p><div class="d1-legend"><span><i class="l-ag"></i>agent CR</span><span><i class="l-bh"></i>Buy &amp; Hold CR</span><span><i class="l-z"></i>0%</span></div>`);
+  // Hedging: pair, CR / SR / MDD, 61-day action strip
+  const hp = O.Hedging.PAIR, hs = S.Hedging.PAIR, pair = H.pairs[k], pr = H.pairRuns[k], acts = H.hedgingActions[k] || '';
+  const [pl, prt] = pair ? pair.split('/') : [];
+  const hedging = card('Hedging', 'Pair chosen on day 1 (most frequent over runs)',
+    (pair ? `<div class="d1-pair" data-tip="LONG_SHORT = long ${pl}, short ${prt}">${pl}<span class="s">/</span>${prt}${pr ? `<span class="runs">${pr.runs}/${pr.of} runs</span>` : ''}</div>` : '<div class="d1-pair na">no pair</div>') +
+    `<div class="d1-kv"><span>CR</span><span>${pct(hp.CR[k])}${sdS(hs.CR[k])}</span></div><div class="d1-kv"><span>SR</span><span>${num(hp.SR[k])}${sdS(hs.SR[k], 2)}</span></div>
+     <div class="d1-kv"><span>MDD</span><span>${hp.MDD[k] == null ? '<span data-tip="never held a position">—</span>' : hp.MDD[k].toFixed(2) + '%' + sdS(hs.MDD[k])}</span></div>` +
+    (acts ? (() => {
+      // same encoding as the paper's Figure 3b: position state per day (HOLD and days without a committed record keep
+      // the previous position, as in the evaluator); CLOSE days are marked with a diamond
+      let p = 'F';
+      const days = [...acts].map((c, i) => { const cl = c === 'C'; if (c === 'L' || c === 'R') p = c; else if (cl) p = 'F'; return { s: p, cl, c, i }; });
+      const pn = { L: `Long-Short (long ${pl}, short ${prt})`, R: `Short-Long (short ${pl}, long ${prt})`, F: 'Flat' };
+      return `<div class="d1-cap">Position each day · run ${pr ? pr.shownRun : 1} of ${M.runs}</div><div class="d1-strip">${days.map(d => `<i class="${d.s}${d.cl ? ' cl' : ''}" data-tip="<b>${H.dates[d.i]}</b><br>${pn[d.s]}<br><span>action: ${d.c === '-' ? 'no committed record (kept as HOLD)' : ACTION[d.c]}</span>"></i>`).join('')}</div>`;
+    })() : '') +
+    `<div class="d1-legend"><span><i class="sw L"></i>Long-Short</span><span><i class="sw R"></i>Short-Long</span><span><i class="sw F"></i>Flat</span><span><i class="dia"></i>Close</span></div>`);
+  // Market Insights: report quality per asset, rating-strategy CR vs Buy & Hold
+  const qs = A.map(a => O['Market Insights'][a].Score[k]), qsd = A.map(a => S['Market Insights'][a].Score[k]);
+  const insights = card('Market Insights', `Report quality (0–10), rubric over ${M.insightsRubric.length} dimensions`,
+    `<div class="d1-big">${num(mean(qs))}<small>mean / 10</small></div>` +
+    `<div class="d1-q hd"><span></span><span></span><span>score</span><span data-tip="CR of the weekly ratings replayed as a strategy">CR</span><span data-tip="Buy &amp; Hold CR">B&amp;H</span></div>` +
+    A.map((a, i) => { const cr = O['Market Insights'][a].CR[k], bh = H.baseline[`Market Insights|${a}|CR`];
+      return `<div class="d1-q" data-tip="<b>${a}</b><br>report quality ${num(qs[i])} ±${(qsd[i] ?? 0).toFixed(2)} / 10<br>CR of ratings ${pct(cr)} ±${(S['Market Insights'][a].CR[k] ?? 0).toFixed(2)}<br><span>Buy &amp; Hold CR ${pct(bh)}</span>"><span class="d1-t">${a}</span><span class="q-bar"><i style="width:${(qs[i] || 0) * 10}%"></i></span><span class="val">${f1(qs[i])}</span><span class="val ${cr >= bh ? 'up' : 'dn'}">${pc0(cr)}</span><span class="val bh">${pc0(bh)}</span></div>`; }).join(''));
+  // Auditing: ACC and the error split (ACC + SER + EER + CER = 100%)
+  const MS4 = ['ACC', 'SER', 'EER', 'CER'], au = MS4.map(m => O.Auditing.AUDIT[m][k]), asd = MS4.map(m => S.Auditing.AUDIT[m][k]);
+  const NAMES = { ACC: 'Accuracy', SER: 'Schema error', EER: 'Extraction error', CER: 'Calculation error' };
+  const auditing = card('Auditing', `${M.auditInstances} XBRL instances · ACC + SER + EER + CER = 100%`,
+    `<div class="d1-big">${f1(au[0])}<small>% ACC${asd[0] == null ? '' : ' ±' + asd[0].toFixed(1)}</small></div>` +
+    `<div class="d1-stack">${MS4.map((m, i) => au[i] ? `<i class="s-${m.toLowerCase()}" style="width:${au[i]}%" data-tip="${NAMES[m]} (${m}): ${f1(au[i])}%"></i>` : '').join('')}</div>` +
+    MS4.map((m, i) => `<div class="d1-kv"><span><i class="s-${m.toLowerCase()} sq"></i>${NAMES[m]} <em class="ab">${m}</em></span><span>${f1(au[i])}%${sdS(asd[i])}</span></div>`).join(''));
+  return `<div class="d1"><div class="d1-cards">${trading}${hedging}${insights}${auditing}</div><p class="d1-foot">Raw metrics: mean of ${M.runs} runs <span class="sd">±std</span></p></div>`;
+}
+function toggle(i) {
+  const r = rows[i];
+  openKey = openKey === r.key ? null : r.key;
+  if (openKey) detail.innerHTML = breakdown(r);
+  layout();
+}
+detail.addEventListener('click', e => { const b = e.target.closest('[data-replay]'); if (b) { e.stopPropagation(); replayTo(b.dataset.replay); } });
+els.forEach((el, i) => {
+  const t = $('.in', el);
+  t.addEventListener('click', () => toggle(i));
+  t.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggle(i); } });
+});
+fitNames(); document.fonts && document.fonts.ready.then(fitNames);
+layout();
+
+/* ================= 2b · RANKINGS ACROSS WORKFLOWS ================= */
+// bump chart with linked highlighting: pick one system, a whole architecture, or a whole backbone
+(() => {
+  const NS = 'http://www.w3.org/2000/svg';
+  const mk = (tag, attrs = {}, parent) => { const e = document.createElementNS(NS, tag); for (const k in attrs) e.setAttribute(k, attrs[k]); if (parent) parent.appendChild(e); return e; };
+  const n = rows.length;
+  // y position = order within a workflow (ties broken by Overall); label = competition rank, "=" marks a tie
+  const pos = {}, lab = {}, rnum = {};
+  WF.forEach(w => {
+    [...rows].sort((x, y) => y[w] - x[w] || y.Overall - x.Overall).forEach((r, i) => {
+      (pos[r.key] ||= {})[w] = i + 1;
+      const c = 1 + rows.filter(x => x[w] > r[w] + 1e-9).length, tie = rows.filter(x => Math.abs(x[w] - r[w]) < 1e-9).length > 1;
+      (lab[r.key] ||= {})[w] = (tie ? '=' : '') + c; (rnum[r.key] ||= {})[w] = c;
+    });
+  });
+  const topIn = w => [...rows].sort((x, y) => y[w] - x[w] || y.Overall - x.Overall);
+  const topBy = s => s === 'Overall' ? rows : s === 'Floor' ? [...rows].sort((x, y) => y.Floor - x.Floor || y.Overall - x.Overall) : topIn(s);
+  const ordinal = k => k + (k % 100 >= 11 && k % 100 <= 13 ? 'th' : ({ 1: 'st', 2: 'nd', 3: 'rd' }[k % 10] || 'th'));
+  const short = m => MS[m] || m;
+
+  /* ---------- chart (built once; selection only toggles classes) ---------- */
+  // side margins just wide enough for the longest labels: rank ticks + architecture on the left, backbone + rank on the right
+  const textW = (txt, size, weight = 500) => { const c = textW.c || (textW.c = document.createElement('canvas').getContext('2d')); c.font = `${weight} ${size}px Inter, system-ui, sans-serif`; return c.measureText(txt).width; };
+  const longAgent = Math.max(...H.agents.map(ag => textW(ag, 11.5))), longModel = Math.max(...rows.map(r => textW(`${short(r.model)} #${r.rank}`, 11.5, 600)));
+  const W = 1116, T = 52, rowH = 18, Hh = T + n * rowH + 10;
+  const L = Math.ceil(4 + textW('#30', 10.5) + 18 + longAgent + 20 + 6), R = Math.ceil(20 + longModel + 10);
+  const cx = i => L + i * (W - L - R) / (WF.length - 1), cy = p => T + (p - 1) * rowH + rowH / 2;
+  const svg = mk('svg', { viewBox: `0 0 ${W} ${Hh}`, role: 'img', 'aria-label': 'Rank of every agent system in each workflow' });
+  const defs = mk('defs', {}, svg), gr = mk('linearGradient', { id: 'wfGrad', gradientUnits: 'userSpaceOnUse', x1: cx(0), x2: cx(WF.length - 1), y1: 0, y2: 0 }, defs);
+  WF.forEach((w, i) => mk('stop', { offset: i / (WF.length - 1), 'stop-color': WC[w] }, gr));
+  WF.forEach((w, i) => {
+    mk('line', { x1: cx(i), x2: cx(i), y1: T - 10, y2: Hh - 4, class: 'lane' }, svg);
+    // header = button: follow this workflow's leader
+    const ld = leaders[w][0], hg = mk('g', { class: 'col-btn', 'data-k': ld.key, 'data-w': w, style: `--c:${WC[w]}`, tabindex: 0, role: 'button',
+      'data-tip': `<b>${w} · top 3</b><br>${[...rows].sort((x, y) => y[w] - x[w] || y.Overall - x.Overall).slice(0, 3).map((r, j) => `${j + 1}. ${r.name}`).join('<br>')}<br><span>click to highlight</span>` }, svg);
+    const tw = w.length * 7.6 + 34;
+    mk('rect', { x: cx(i) - tw / 2, y: 2, width: tw, height: 26, rx: 13, class: 'cb-bg' }, hg);
+    mk('circle', { cx: cx(i) - tw / 2 + 13, cy: 15, r: 3.5, class: 'cb-dot' }, hg);
+    mk('text', { x: cx(i) + 6, y: 19.5, 'text-anchor': 'middle', class: 'col-h' }, hg).textContent = w;
+  });
+  [1, 5, 10, 15, 20, 25, 30].filter(p => p <= n).forEach(p => (mk('text', { x: 4, y: cy(p) + 3.5, class: 'tick' }, svg).textContent = `#${p}`));
+  const lines = {}, layer = mk('g', {}, svg), lbls = mk('g', { class: 'lbls' }, svg);
+  rows.forEach(r => {
+    const pts = WF.map((w, i) => [cx(i), cy(pos[r.key][w])]);
+    let d = `M${pts[0][0]},${pts[0][1]}`;
+    for (let i = 1; i < pts.length; i++) { const mx = (pts[i - 1][0] + pts[i][0]) / 2; d += ` C${mx},${pts[i - 1][1]} ${mx},${pts[i][1]} ${pts[i][0]},${pts[i][1]}`; }
+    const g = mk('g', { class: 'ln', 'data-key': r.key }, layer);
+    const tipAll = `<b>${r.name}</b><br>${WF.map(w => `${SHORT[w] || w} #${lab[r.key][w]}`).join('<span> · </span>')}<br><span>#${r.rank} Overall · click to follow</span>`;
+    mk('path', { d, class: 'line' }, g);
+    mk('path', { d, class: 'hit', 'data-tip': tipAll }, g);
+    WF.forEach((w, i) => {
+      mk('circle', { cx: pts[i][0], cy: pts[i][1], r: 2.6, style: `--wc:${WC[w]}`, 'data-tip': `<b>${r.name}</b><br>${w}: ${ordinal(rnum[r.key][w])}${lab[r.key][w][0] === '=' ? ' (tied)' : ''} of ${n}<span> · score ${f1(r[w])}</span>` }, g);
+      const t = mk('text', { x: pts[i][0], y: pts[i][1] + 4, class: 'rkl' }, g); t.textContent = lab[r.key][w];
+      if (lab[r.key][w].length > 2) t.style.fontSize = '9px';
+    });
+    lines[r.key] = g;
+  });
+  $('#rkChart').appendChild(svg);
+  svg.classList.add('rk-flow');
+
+  /* ---------- second view: workflow floor → Overall ---------- */
+  // one row per system (Overall order): its four workflow scores as coloured dots, floor (open ring) joined to Overall (filled dot)
+  const DW = 1116, DT = 58, DH = 17, DL = 250, DR = 70, dH = DT + n * DH + 34;
+  const dx = v => DL + v / 100 * (DW - DL - DR);
+  const db = mk('svg', { viewBox: `0 0 ${DW} ${dH}`, class: 'rk-db', role: 'img', 'aria-label': 'Workflow floor, workflow scores and Overall score of every agent system' });
+  // user-space gradient: a horizontal line has a zero-height bounding box, so a bbox gradient would not paint
+  const dgr = mk('linearGradient', { id: 'brandGrad', gradientUnits: 'userSpaceOnUse', x1: dx(0), x2: dx(100), y1: 0, y2: 0 }, mk('defs', {}, db));
+  mk('stop', { offset: 0, 'stop-color': '#b40028' }, dgr); mk('stop', { offset: 1, 'stop-color': '#7800f0' }, dgr);
+  // sort chips: Overall, workflow floor, then the four workflows (re-orders the rows; the highlight is unchanged)
+  // same pills as the other two views' headers: centred, tinted, filled when chosen
+  const DSORT = [['Overall', 'Overall', '#4a1a8c'], ['Floor', 'Workflow floor', '#4a1a8c'], ...WF.map(w => [w, w, WC[w]])];
+  const dpw = l => l.length * 7.6 + 34, dGap = 10;
+  let lx = (DW - DSORT.reduce((s, [, l]) => s + dpw(l), 0) - dGap * (DSORT.length - 1)) / 2, dbSort = 'Overall';
+  DSORT.forEach(([k, lbl, c]) => {
+    const tw = dpw(lbl), g = mk('g', { class: 'db-sort' + (k === dbSort ? ' on' : ''), 'data-s': k, style: `--c:${c}`, tabindex: 0, role: 'button',
+      'data-tip': `sort by ${lbl}${k === 'Floor' ? '<br><span>ring = the weakest workflow’s dot</span>' : k === 'Overall' ? '<br><span>black dot = Overall</span>' : ''}` }, db);
+    mk('rect', { x: lx, y: 2, width: tw, height: 26, rx: 13, class: 'cb-bg' }, g);
+    if (k === 'Floor') { mk('circle', { cx: lx + 13, cy: 15, r: 2.2, class: 'cb-dot' }, g); mk('circle', { cx: lx + 13, cy: 15, r: 4.6, class: 'cb-ring' }, g); }
+    else mk('circle', { cx: lx + 13, cy: 15, r: 3.5, class: 'cb-dot' }, g);
+    mk('text', { x: lx + tw / 2 + 6, y: 19.5, 'text-anchor': 'middle', class: 'col-h' }, g).textContent = lbl;
+    lx += tw + dGap;
+  });
+  [0, 25, 50, 75, 100].forEach(v => {
+    mk('line', { x1: dx(v), x2: dx(v), y1: DT - 8, y2: DT + n * DH, class: 'lane' }, db);
+    mk('text', { x: dx(v), y: DT + n * DH + 18, 'text-anchor': 'middle', class: 'tick' }, db).textContent = v;
+  });
+  const dbRows = {}, dbLayer = mk('g', {}, db);
+  rows.forEach((r, i) => {
+    const y = DT + i * DH + DH / 2, vals = WF.map(w => r[w]), lo = Math.min(...vals), hi = Math.max(...vals);
+    const g = mk('g', { class: 'db', 'data-key': r.key }, dbLayer);
+    mk('rect', { x: 0, y: y - DH / 2, width: DW, height: DH, rx: 6, class: 'db-band', 'data-tip': `<b>#${r.rank} ${r.name}</b><br>Overall ${f1(r.Overall)} · floor ${f1(r.Floor)}<br>${WF.map(w => `${SHORT[w] || w} ${f1(r[w])}`).join('<span> · </span>')}` }, g);
+    mk('text', { x: DL - 46, y: y + 4, class: 'db-name', 'text-anchor': 'end' }, g).textContent = `${r.agent} · ${short(r.model)}`;
+    g.dataset.i = i; g.dataset.y = y;
+    mk('text', { x: DL - 14, y: y + 4, class: 'db-rank', 'text-anchor': 'end' }, g).textContent = `#${r.rank}`;
+    mk('line', { x1: dx(lo), x2: dx(hi), y1: y, y2: y, class: 'db-range' }, g);
+    mk('line', { x1: dx(r.Floor), x2: dx(r.Overall), y1: y, y2: y, class: 'db-gap' }, g);
+    WF.forEach(w => mk('circle', { cx: dx(r[w]), cy: y, r: 3.2, class: 'db-wf', style: `fill:${WC[w]}` }, g));
+    // floor = a transparent ring drawn around the weakest workflow's own dot (the dot shows through)
+    const fw = WF.find(w => r[w] === r.Floor);
+    mk('circle', { cx: dx(r.Floor), cy: y, r: 6, class: 'db-floor', 'data-tip': `<b>${r.name}</b><br>workflow floor: ${fw} ${f1(r.Floor)}` }, g);
+    mk('circle', { cx: dx(r.Overall), cy: y, r: 5.5, class: 'db-ov', 'data-dx': dx(r.Floor) - dx(r.Overall) }, g);
+    mk('text', { x: DW - DR + 18, y: y + 4, class: 'db-val' }, g).textContent = f1(r.Overall);
+    dbRows[r.key] = g;
+  });
+  // re-order rows (slide) by the chosen key; the rank and value columns follow that key
+  const keyOf = (r, s) => s === 'Overall' ? r.Overall : s === 'Floor' ? r.Floor : r[s];
+  function sortDb(s) {
+    dbSort = s;
+    [...rows].sort((p, q) => keyOf(q, s) - keyOf(p, s) || q.Overall - p.Overall).forEach((r, p) => {
+      const g = dbRows[r.key];
+      g.style.transform = `translateY(${(p - +g.dataset.i) * DH}px)`;
+      $('.db-rank', g).textContent = `#${1 + rows.filter(x => keyOf(x, s) > keyOf(r, s) + 1e-9).length}`;
+      $('.db-val', g).textContent = f1(keyOf(r, s));
+    });
+    $$('.db-sort', db).forEach(b => b.classList.toggle('on', b.dataset.s === s));
+  }
+  db.addEventListener('click', e => { const b = e.target.closest('.db-sort'); if (b) { sortDb(b.dataset.s); choose({ mode: 'sort', key: b.dataset.s }, true); } });
+  db.addEventListener('keydown', e => { const b = e.target.closest('.db-sort'); if (b && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); sortDb(b.dataset.s); choose({ mode: 'sort', key: b.dataset.s }, true); } });
+  db.style.display = 'none';
+  $('#rkChart').appendChild(db);
+
+  /* ---------- field view ("staff"): one line per architecture, one note per backbone, x = score ---------- */
+  // score = the chosen workflow (header pills), else Overall; follows the same selection state as the other views
+  const BB = { 'Claude Sonnet 5': 'Son5', 'GPT-5.4': 'GPT', 'DeepSeek-V3.2': 'DS3.2', 'DeepSeek-V4-Pro': 'DS4P', 'Qwen3.5-9B': 'Q9B', 'Qwen3.5-4B': 'Q4B' };
+  // same canvas height as the other two views (the card never changes size); the spare height is split above and below
+  const FW = W, FLANE = 92, FH = Hh, FT = 64 + Math.max(0, (FH - (64 + H.agents.length * FLANE + 70)) / 2), FL = 150, FR = 86, NR = 15.5, KR = 13.5;
+  const fx = v => FL + v / 100 * (FW - FL - FR);
+  const fv = mk('svg', { viewBox: `0 0 ${FW} ${FH}`, role: 'img', 'aria-label': 'Every agent system on one score axis, one line per architecture' });
+  // score pills: Overall + the four workflows (workflow pills reuse the column-header buttons)
+  const pills = ['Overall', ...WF], pw = p => p.length * 7.6 + 34, gapP = 10, totP = pills.reduce((s, p) => s + pw(p), 0) + gapP * (pills.length - 1);
+  let px0 = (FW - totP) / 2;
+  pills.forEach(p => {
+    const g = mk('g', p === 'Overall' ? { class: 'col-btn ov-btn', style: '--c:#4a1a8c', tabindex: 0, role: 'button', 'data-tip': 'Overall = mean of the four workflow scores' }
+      : { class: 'col-btn', 'data-w': p, style: `--c:${WC[p]}`, tabindex: 0, role: 'button', 'data-tip': `<b>${p}</b><br><span>place every system by its ${p} score</span>` }, fv);
+    mk('rect', { x: px0, y: 2, width: pw(p), height: 26, rx: 13, class: 'cb-bg' }, g);
+    mk('circle', { cx: px0 + 13, cy: 15, r: 3.5, class: 'cb-dot' }, g);
+    mk('text', { x: px0 + pw(p) / 2 + 6, y: 19.5, 'text-anchor': 'middle', class: 'col-h' }, g).textContent = p;
+    px0 += pw(p) + gapP;
+  });
+  const fGrid = mk('g', {}, fv), fLanes = mk('g', {}, fv), fTraces = mk('g', {}, fv), fNotes = mk('g', {}, fv);
+  const axY = FT + H.agents.length * FLANE + 6;
+  [0, 25, 50, 75, 100].forEach(v => { mk('line', { x1: fx(v), x2: fx(v), y1: FT - 8, y2: axY, class: 'f-grid' }, fGrid); mk('text', { x: fx(v), y: axY + 18, class: 'tick', 'text-anchor': 'middle' }, fGrid).textContent = v; });
+  mk('text', { x: FW - FR + 26, y: FT - 14, class: 'tick' }, fGrid).textContent = 'mean';
+  // key: note code -> backbone
+  // key: a small note with the code, then the backbone's full name
+  // key: a small dark note with the code, then the backbone's full name
+  const kW = H.models.map(m => 2 * KR + 8 + textW(m, 11.5)), kGap = 26, kTot = kW.reduce((s, w) => s + w, 0) + kGap * (H.models.length - 1);
+  let kx = (FW - kTot) / 2;
+  H.models.forEach((m, i) => {
+    const g = mk('g', { class: 'f-key', transform: `translate(${kx + KR},${axY + 42})` }, fGrid);
+    mk('circle', { r: KR, class: 'f-kdot' }, g);
+    mk('text', { y: 3.6, 'text-anchor': 'middle', class: 'f-kbb' }, g).textContent = BB[m];
+    mk('text', { x: KR + 8, y: 4, class: 'f-kname' }, g).textContent = m;
+    kx += kW[i] + kGap;
+  });
+  const fTrace = Object.fromEntries(H.models.map(m => [m, mk('path', { class: 'f-trace' }, fTraces)]));
+  const fLane = Object.fromEntries(H.agents.map(ag => {
+    const g = mk('g', { class: 'f-lane', 'data-a': ag }, fLanes);
+    mk('line', { x1: FL, x2: FW - FR, y1: 0, y2: 0, class: 'f-line' }, g);
+    mk('text', { x: FL - 22, y: 5, 'text-anchor': 'end', class: 'f-name', style: `fill:${AC[ag]}` }, g).textContent = ag;
+    mk('line', { y1: -NR - 8, y2: NR + 8, class: 'f-mean', style: `stroke:${AC[ag]}` }, g);
+    mk('text', { x: FW - FR + 26, y: 5, class: 'f-mv' }, g);
+    return [ag, g];
+  }));
+  const fNote = Object.fromEntries(rows.map(r => {
+    const g = mk('g', { class: 'f-note', 'data-key': r.key }, fNotes);
+    mk('circle', { r: NR, style: `fill:${AC[r.agent]}` }, g);
+    mk('text', { y: 3.4, 'text-anchor': 'middle', class: 'f-bb' }, g).textContent = BB[r.model];
+    return [r.key, g];
+  }));
+  let fPos = {};
+  function fieldLayout() {
+    const sc = st.mode === 'workflow' ? st.key : 'Overall', val = r => sc === 'Overall' ? r.Overall : r[sc];
+    $$('.col-btn', fv).forEach(b => b.classList.toggle('on', b.classList.contains('ov-btn') ? sc === 'Overall' : b.dataset.w === sc));
+    const mean = ag => { const v = rows.filter(r => r.agent === ag).map(val); return v.reduce((p, q) => p + q, 0) / v.length; };
+    const order = H.agents, ly = ag => FT + (order.indexOf(ag) + .5) * FLANE;   // fixed: same row order as the picker
+    order.forEach(ag => {
+      const g = fLane[ag], m = mean(ag);
+      g.style.transform = `translateY(${ly(ag)}px)`;
+      const mk2 = $('.f-mean', g); mk2.setAttribute('x1', fx(m)); mk2.setAttribute('x2', fx(m));
+      $('.f-mv', g).textContent = f1(m);
+      g.dataset.tip = `<b>${ag}</b><br>mean ${sc}: ${f1(m)}<br><span>click to highlight its ${H.models.length} systems</span>`;
+    });
+    // within a lane, notes that would overlap are nudged up / down (small beeswarm)
+    fPos = {};
+    H.agents.forEach(ag => {
+      const placed = [];
+      rows.filter(r => r.agent === ag).sort((p, q) => val(p) - val(q)).forEach(r => {
+        const x = fx(val(r)); let dy = 0;
+        let best = -1;   // first free slot; if none is free, the slot with the least overlap
+        for (const c of [0, -1, 1, -2, 2]) { const md = Math.min(1e9, ...placed.map(p => Math.hypot(p.x - x, p.dy - c * NR * 1.1)));
+          if (md >= NR * 1.9) { dy = c * NR * 1.1; break; } if (md > best) { best = md; dy = c * NR * 1.1; } }
+        placed.push({ x, dy }); fPos[r.key] = { x, y: ly(ag) + dy };
+      });
+    });
+    rows.forEach(r => {
+      const g = fNote[r.key], p = fPos[r.key];
+      g.style.transform = `translate(${p.x}px,${p.y}px)`;
+      g.dataset.tip = `<b>${r.name}</b><br>${sc}: ${f1(val(r))}<span> · #${1 + rows.filter(x => val(x) > val(r) + 1e-9).length} of ${n}</span>`;
+    });
+  }
+  // classes follow the shared selection; the dashed trace links one backbone across the five lines
+  function fieldApply(selKey, litKeys) {
+    fieldLayout();
+    rows.forEach(r => { const g = fNote[r.key]; g.classList.toggle('sel', r.key === selKey); g.classList.toggle('lit', litKeys.has(r.key)); g.classList.toggle('pv', r.key === pv); });
+    fv.classList.toggle('all', st.mode === 'none');
+    // the dashed trace links one backbone across the five lines: the hovered note's, the chosen column's,
+    // else the highlighted system's (by default the #1 system's)
+    const one = pv ? rows.find(r => r.key === pv).model : st.mode === 'model' ? st.key : rows.find(r => r.key === selKey).model;
+    H.models.forEach(m => {
+      const pts = rows.filter(r => r.model === m).map(r => fPos[r.key]).sort((p, q) => p.y - q.y);
+      fTrace[m].setAttribute('d', pts.map((p, i) => (i ? 'L' : 'M') + p.x.toFixed(1) + ',' + p.y.toFixed(1)).join(''));
+      fTrace[m].classList.toggle('on', m === one);
+    });
+  }
+  fNotes.addEventListener('click', e => { const g = e.target.closest('.f-note'); if (g) choose({ mode: 'system', key: g.dataset.key }); });
+  fNotes.addEventListener('pointerover', e => { const g = e.target.closest('.f-note'); const k = g ? g.dataset.key : null; if (k && k !== pv) { pv = k; apply(); } });
+  fNotes.addEventListener('pointerleave', () => { if (pv) { pv = null; apply(); } });
+  fLanes.addEventListener('click', e => { const g = e.target.closest('.f-lane'); if (g) choose({ mode: 'agent', key: g.dataset.a }); });
+  fv.addEventListener('click', e => { if (e.target.closest('.ov-btn')) choose({ mode: 'none' }, true); });
+  fv.addEventListener('keydown', e => { if (e.target.closest('.ov-btn') && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); choose({ mode: 'none' }, true); } });
+  fv.style.display = 'none';
+  $('#rkChart').appendChild(fv);
+  function growField() {
+    rows.forEach((r, i) => { const g = fNote[r.key]; g.animate([{ opacity: 0, transform: `translate(${fx(0)}px,${fPos[r.key].y}px)` }, { opacity: 1, transform: g.style.transform }], { duration: 900, delay: i * 18, easing: 'cubic-bezier(.22,1,.36,1)', fill: 'backwards' }); });
+  }
+  let view = 'flow';
+
+  /* ---------- picker: architecture rows × backbone columns ---------- */
+  const pk = $('#picker');
+  pk.innerHTML = '<span></span>' + H.models.map(m => `<button class="pk-col" data-m="${m}" title="All ${H.agents.length} architectures on ${m}">${short(m)}</button>`).join('') +
+    H.agents.map(ag => `<button class="pk-row" data-a="${ag}" title="All ${H.models.length} ${ag} systems">${ini(ag, 'ini sm')}${ag}</button>` +
+      H.models.map(m => { const r = rows.find(x => x.agent === ag && x.model === m);
+        return `<button class="pk-cell" data-k="${r.key}" style="--c:${AC[ag]}" data-tip="<b>${r.name}</b><br>#${r.rank} Overall · ${f1(r.Overall)}">${r.rank}</button>`; }).join('')).join('') +
+    '<p class="pk-note">Block = one agent system (number = Overall rank) · row = architecture · column = backbone</p>';
+
+  /* ---------- state ---------- */
+  let st = { mode: 'none' }, pv = null;
+  // one highlighted line (sel) plus secondary lines (lit) for every choice:
+  //   none     -> #1 Overall highlighted, every other line secondary
+  //   workflow -> its #1 highlighted, its #2 and #3 secondary
+  //   system   -> that system highlighted, the same architecture on other backbones secondary
+  //   agent / model -> the group's best Overall system highlighted, the rest of the row / column secondary
+  // rows are already in Overall order, so the first match is the group's best system
+  const selOf = s => s.mode === 'system' ? s.key : s.mode === 'workflow' ? topIn(s.key)[0].key : s.mode === 'sort' ? topBy(s.key)[0].key : s.mode === 'none' ? top.key
+    : rows.find(r => r[s.mode] === s.key).key;
+  const group = s => {
+    const k = selOf(s);
+    if (s.mode === 'agent' || s.mode === 'model') return rows.filter(r => r[s.mode] === s.key && r.key !== k);
+    if (s.mode === 'workflow') return topIn(s.key).slice(1, 3);
+    if (s.mode === 'sort') return topBy(s.key).slice(1, 3);
+    if (s.mode === 'system') { const ag = rows.find(x => x.key === k).agent; return rows.filter(r => r.agent === ag && r.key !== k); }
+    return [];
+  };
+  // labels are static text, the same for every highlighted line: architecture on the left, backbone + Overall rank on the right
+  function labels(shown) {
+    lbls.innerHTML = '';
+    const spread = arr => { arr.sort((p, q) => p.y - q.y); for (let i = 1; i < arr.length; i++) if (arr[i].y - arr[i - 1].y < 13) arr[i].y = arr[i - 1].y + 13; return arr; };
+    spread(shown.map(r => ({ y: cy(pos[r.key][WF[0]]), r }))).forEach(({ y, r }) =>
+      (mk('text', { x: cx(0) - 20, y: y + 4, class: 'end end-l', style: `fill:${AC[r.agent]}` }, lbls).textContent = r.agent));
+    spread(shown.map(r => ({ y: cy(pos[r.key][WF[WF.length - 1]]), r }))).forEach(({ y, r }) => {
+      const t = mk('text', { x: cx(WF.length - 1) + 20, y: y + 4, class: 'end' }, lbls);
+      t.textContent = short(r.model) + ' ';
+      mk('tspan', { class: 'rk-tag' }, t).textContent = `#${r.rank}`;
+    });
+  }
+  function apply() {
+    const lit = group(st), litKeys = new Set(lit.map(r => r.key)), selKey = selOf(st);
+    Object.entries(lines).forEach(([k, g]) => { g.classList.toggle('sel', k === selKey); g.classList.toggle('lit', litKeys.has(k)); g.classList.toggle('pv', k === pv); });
+    // draw order: faint lines, then the lit group, then the preview, then the selected line on top
+    [...lit.map(r => r.key), pv, selKey].filter(Boolean).forEach(k => layer.appendChild(lines[k]));
+    labels([...lit, ...(selKey ? [rows.find(x => x.key === selKey)] : [])]);
+    svg.classList.toggle('all', st.mode === 'none');
+    $$('.pk-cell', pk).forEach(c => { c.classList.toggle('sel', c.dataset.k === selKey); c.classList.toggle('lit', litKeys.has(c.dataset.k)); c.classList.toggle('pv', c.dataset.k === pv); });
+    $$('.pk-row', pk).forEach(b => b.classList.toggle('on', st.mode === 'agent' && b.dataset.a === st.key));
+    $$('.pk-col', pk).forEach(b => b.classList.toggle('on', st.mode === 'model' && b.dataset.m === st.key));
+    $$('#rkChart .col-btn').forEach(b => b.classList.toggle('on', st.mode === 'workflow' && b.dataset.w === st.key));
+    Object.entries(dbRows).forEach(([k, g]) => { g.classList.toggle('sel', k === selKey); g.classList.toggle('lit', litKeys.has(k)); g.classList.toggle('pv', k === pv); });
+    db.classList.toggle('all', st.mode === 'none');
+    fieldApply(selKey, litKeys);
+  }
+  // dots appear as the growing line reaches their column (the ease-out curve gets there early)
+  const DOT_AT = [0, 70, 160, 300];
+  const pop = (c, delay) => c.animate([{ opacity: 0, transform: 'scale(.3)' }, { opacity: 1, transform: 'scale(1)' }], { duration: 260, delay, easing: 'cubic-bezier(.34,1.56,.64,1)', fill: 'backwards' });
+  // the lit and selected lines grow in again after every click (same effect as on first view)
+  function grow(force) {
+    if (reduce) return;
+    if (view === 'floor') return growDb(force);
+    if (view === 'field') return force && growField();
+    const keys = force || st.mode === 'none' ? rows.map(r => r.key) : [...group(st).map(r => r.key), selOf(st)].filter(Boolean);
+    keys.forEach((k, i) => {
+      const p = $('path.line', lines[k]), l = p.getTotalLength();
+      p.getAnimations().forEach(x => x.cancel());
+      p.animate([{ strokeDasharray: l, strokeDashoffset: l }, { strokeDasharray: l, strokeDashoffset: 0 }], { duration: 900, delay: i * 45, easing: 'cubic-bezier(.22,1,.36,1)' });
+      $$('circle', lines[k]).forEach((c, j) => pop(c, i * 45 + DOT_AT[j]));
+    });
+  }
+  // clicking the current choice again clears it
+  // floor → Overall view: the Overall dot slides out from the floor, the gap line stretches, workflow dots pop in
+  function growDb(all) {
+    const keys = all || st.mode === 'none' ? rows.map(r => r.key) : [...group(st).map(r => r.key), selOf(st)].filter(Boolean);
+    keys.forEach((k, i) => {
+      const g = dbRows[k], d = i * (all ? 22 : 50), ov = $('.db-ov', g);
+      ov.animate([{ transform: `translateX(${ov.dataset.dx}px)` }, { transform: 'none' }], { duration: 800, delay: d, easing: 'cubic-bezier(.22,1,.36,1)', fill: 'backwards' });
+      $('.db-gap', g).animate([{ transform: 'scaleX(0)' }, { transform: 'none' }], { duration: 800, delay: d, easing: 'cubic-bezier(.22,1,.36,1)', fill: 'backwards' });
+      $('.db-range', g).animate([{ opacity: 0 }, { opacity: 1 }], { duration: 500, delay: d + 150, fill: 'backwards' });
+      $$('.db-wf', g).forEach((c, j) => pop(c, d + 120 + j * 60));
+    });
+  }
+  const choose = (s, keep) => { st = (!keep && s.mode === st.mode && s.key === st.key) ? { mode: 'none' } : s; pv = null; apply(); grow(); };
+  pk.addEventListener('click', e => {
+    const c = e.target.closest('.pk-cell'), rw = e.target.closest('.pk-row'), cl = e.target.closest('.pk-col');
+    if (c) choose({ mode: 'system', key: c.dataset.k }); else if (rw) choose({ mode: 'agent', key: rw.dataset.a }); else if (cl) choose({ mode: 'model', key: cl.dataset.m });
+  });
+  pk.addEventListener('pointerover', e => { const c = e.target.closest('.pk-cell'); const k = c ? c.dataset.k : null; if (k !== pv) { pv = k; apply(); } });
+  pk.addEventListener('pointerleave', () => { if (pv) { pv = null; apply(); } });
+  layer.addEventListener('pointerover', e => { const g = e.target.closest('.ln'); const k = g ? g.dataset.key : null; if (k && k !== pv) { pv = k; apply(); } });
+  layer.addEventListener('pointerleave', () => { if (pv) { pv = null; apply(); } });
+  layer.addEventListener('click', e => { const g = e.target.closest('.ln'); if (g) choose({ mode: 'system', key: g.dataset.key }); });
+  $('#rkChart').addEventListener('click', e => { const b = e.target.closest('.col-btn[data-w]'); if (b) choose({ mode: 'workflow', key: b.dataset.w }); });
+  dbLayer.addEventListener('click', e => { const g = e.target.closest('.db'); if (g) choose({ mode: 'system', key: g.dataset.key }); });
+  dbLayer.addEventListener('pointerover', e => { const g = e.target.closest('.db'); const k = g ? g.dataset.key : null; if (k && k !== pv) { pv = k; apply(); } });
+  dbLayer.addEventListener('pointerleave', () => { if (pv) { pv = null; apply(); } });
+  // view switch
+  const vs = $('#rkView'), vPill = $('.seg-pill', vs);
+  const placeV = () => { const b = $('button[aria-selected=true]', vs); vPill.style.width = b.offsetWidth + 'px'; vPill.style.transform = `translateX(${b.offsetLeft}px)`; };
+  vs.addEventListener('click', e => {
+    const b = e.target.closest('button'); if (!b || b.dataset.v === view) return;
+    view = b.dataset.v; $$('button', vs).forEach(x => x.setAttribute('aria-selected', x === b)); placeV();
+    svg.style.display = view === 'flow' ? '' : 'none'; db.style.display = view === 'floor' ? '' : 'none'; fv.style.display = view === 'field' ? '' : 'none';
+    grow(true);
+  });
+  requestAnimationFrame(placeV); document.fonts && document.fonts.ready.then(placeV); addEventListener("resize", placeV);
+  $('#rkChart').addEventListener('keydown', e => { const b = e.target.closest('.col-btn[data-w]'); if (b && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); choose({ mode: 'workflow', key: b.dataset.w }); } });
+  apply();
+  rkGo = (v, s) => { const b = $(`button[data-v="${v}"]`, vs); if (b && v !== view) b.click(); if (s) choose(s, true); };
+
+  /* ---------- draw-in when the chart scrolls into view ---------- */
+  if (reduce || !('IntersectionObserver' in window) || /[?&]all\b/.test(location.search)) return;
+  const paths = rows.map(r => $('path.line', lines[r.key]));
+  paths.forEach(p => { const l = p.getTotalLength(); p.style.strokeDasharray = l; p.style.strokeDashoffset = l; });
+  $$('circle', layer).forEach(c => (c.style.opacity = 0));
+  new IntersectionObserver((es, ob) => es.forEach(e => {
+    if (!e.isIntersecting) return; ob.disconnect();
+    paths.forEach((p, i) => {
+      const l = +p.style.strokeDasharray;
+      p.animate([{ strokeDashoffset: l }, { strokeDashoffset: 0 }], { duration: 1100, delay: 150 + i * 28, easing: 'cubic-bezier(.22,1,.36,1)', fill: 'forwards' })
+        .onfinish = () => { p.style.strokeDasharray = ''; p.style.strokeDashoffset = ''; };
+    });
+    rows.forEach((r, i) => $$('circle', lines[r.key]).forEach((c, j) => pop(c, 150 + i * 28 + DOT_AT[j]).onfinish = () => (c.style.opacity = '')));
+  }), { threshold: .2 }).observe($('#rkChart'));
+})();
+
+/* ================= 2c · REPLAY: one system's Trading and Hedging trajectories, drawn day by day ================= */
+const replayTo = (() => {
+  const NS = 'http://www.w3.org/2000/svg', D = H.dates, ND = D.length;
+  const mk = (tag, attrs = {}, parent) => { const e = document.createElementNS(NS, tag); for (const k in attrs) e.setAttribute(k, attrs[k]); if (parent) parent.appendChild(e); return e; };
+  const ACOL = { B: '#1593b5', S: '#e0475b', H: 'rgba(185,181,207,.6)' }, PCOL = { L: '#3567d8', R: '#e0475b', F: 'rgba(185,181,207,.45)' };
+  const ANAME = { B: 'BUY', S: 'SELL', H: 'HOLD', L: 'LONG_SHORT', R: 'SHORT_LONG', C: 'CLOSE', '-': 'no committed record (scored as HOLD)' };
+  const date = d => new Date(d + 'T00:00:00').toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+  const W = 560, PH = 150, GAP = 8, SH = 14, L = 40, R = 34, T = 18, Hh = T + PH + GAP + SH + 20;
+  const X = i => L + (i + .5) * (W - L - R) / ND, cw = (W - L - R) / ND;
+  let sys = top, tk = H.tradeAssets[0], run = 1, raf = null;
+  const RN = H.runs;
+
+  // one chart: price line(s) with a purple wash underneath, a day-by-day strip, a dot riding the
+  // first line and a pill that names each day's action / position; returns handles for the animation
+  function chart(host, series, cells, labels, info) {
+    host.innerHTML = '';
+    const svg = mk('svg', { viewBox: `0 0 ${W} ${Hh}` }, host), defs = mk('defs', {}, svg), id = host.id;
+    const fg = mk('linearGradient', { id: id + 'Fill', x1: 0, x2: 0, y1: 0, y2: 1 }, defs);
+    mk('stop', { offset: 0, 'stop-color': '#7800f0', 'stop-opacity': .14 }, fg); mk('stop', { offset: 1, 'stop-color': '#7800f0', 'stop-opacity': 0 }, fg);
+    const all = series.flat(), lo = Math.min(...all), hi = Math.max(...all), pad = (hi - lo) * .08 || 1;
+    const Y = v => T + (1 - (v - lo + pad) / (hi - lo + 2 * pad)) * PH;
+    [0, .5, 1].forEach(f => { const v = lo - pad + f * (hi - lo + 2 * pad);
+      mk('line', { x1: L, x2: W - R, y1: Y(v), y2: Y(v), class: 'rp-gridline' }, svg);
+      mk('text', { x: L - 6, y: Y(v) + 3, 'text-anchor': 'end', class: 'rp-ax' }, svg).textContent = v.toFixed(0); });
+    [0, Math.floor(ND / 2), ND - 1].forEach(i => mk('text', { x: X(i), y: Hh - 4, 'text-anchor': 'middle', class: 'rp-ax' }, svg).textContent = date(D[i]));
+    const cr = mk('rect', { x: 0, y: 0, width: L, height: Hh }, mk('clipPath', { id: id + 'Clip' }, defs));
+    const g = mk('g', { 'clip-path': `url(#${id}Clip)` }, svg);
+    const pts = s => series[s].map((v, i) => `${X(i).toFixed(1)},${Y(v).toFixed(1)}`).join(' ');
+    mk('polygon', { points: `${X(0)},${T + PH} ${pts(0)} ${X(ND - 1)},${T + PH}`, fill: `url(#${id}Fill)` }, g);
+    series.forEach((p, s) => mk('polyline', { points: pts(s), class: 'rp-line' + (s ? ' b' : '') }, g));
+    // end labels, nudged apart when the two legs finish close together
+    const ly = (labels || []).map((t, s) => ({ t, s, y: Y(series[s][ND - 1]) + 3 })).sort((p, q) => p.y - q.y);
+    for (let k = 1; k < ly.length; k++) if (ly[k].y - ly[k - 1].y < 11) { const m = (ly[k].y + ly[k - 1].y) / 2; ly[k - 1].y = m - 5.5; ly[k].y = m + 5.5; }
+    ly.forEach(({ t, s, y }) => mk('text', { x: W - R + 4, y, class: 'rp-lab', fill: s ? '#8a93a3' : '#0f1528' }, svg).textContent = t);
+    const y0 = T + PH + GAP;
+    const cellEls = cells.map((c, i) => mk('rect', { x: (L + i * cw + .4).toFixed(2), y: y0, width: (cw - .8).toFixed(2), height: SH, rx: 1.5, class: 'rp-cell pending', fill: c.fill, 'data-tip': c.tip }, svg));
+    const dias = cells.map((c, i) => c.diamond ? mk('rect', { x: L + i * cw + cw / 2 - 3, y: y0 + SH / 2 - 3, width: 6, height: 6, fill: '#8b3fd9', transform: `rotate(45 ${L + i * cw + cw / 2} ${y0 + SH / 2})`, class: 'rp-cell pending' }, svg) : null);
+    const vl = mk('line', { x1: L, x2: L, y1: T - 4, y2: y0 + SH, stroke: '#0f1528', 'stroke-opacity': .18, 'stroke-dasharray': '2 3' }, svg);
+    const dot = mk('circle', { r: 4.5, stroke: '#fff', 'stroke-width': 2, fill: '#0f1528', class: 'rp-dot' }, svg);
+    const status = mk('text', { x: L, y: 10, class: 'rp-status' }, svg);
+    const pill = mk('rect', { x: 0, y: 0, width: 60, height: 15, rx: 7.5, class: 'rp-pill' }, svg), ptx = mk('text', { x: 0, y: 10.8, 'text-anchor': 'middle', class: 'rp-pilltext' }, svg);
+    // hover: a vertical line follows the pointer; the tooltip lists that day's values
+    if (info) {
+      const hv = mk('line', { y1: T - 4, y2: y0 + SH, class: 'rp-hover', opacity: 0 }, svg);
+      const hd = series.map((p, s) => mk('circle', { r: 3, class: 'rp-hdot' + (s ? ' b' : ''), opacity: 0 }, svg));
+      const hit = mk('rect', { x: L, y: 0, width: W - L - R, height: y0 + SH, fill: 'transparent' }, svg);
+      hit.addEventListener('pointermove', e => {
+        const b = svg.getBoundingClientRect(), sx = (e.clientX - b.left) / b.width * W;
+        const i = Math.max(0, Math.min(ND - 1, Math.floor((sx - L) / cw))), x = X(i);
+        hv.setAttribute('x1', x); hv.setAttribute('x2', x); hv.setAttribute('opacity', 1);
+        hd.forEach((d, s) => { d.setAttribute('cx', x); d.setAttribute('cy', Y(series[s][i])); d.setAttribute('opacity', 1); });
+        tip.innerHTML = info(i); tip.classList.add('on');
+      });
+      hit.addEventListener('pointerleave', () => { hv.setAttribute('opacity', 0); hd.forEach(d => d.setAttribute('opacity', 0)); tip.classList.remove('on'); });
+    }
+    return { svg, cr, cellEls, dias, vl, dot, status, pill, ptx, cells, Y, line: series[0] };
+  }
+  const hatch = 'url(#rpHatch)';
+  const trow = (k, v) => `<div class="tr"><span>${k}</span><b>${v}</b></div>`;
+  function hatchDef(svg) { const p = mk('pattern', { id: 'rpHatch', width: 4, height: 4, patternUnits: 'userSpaceOnUse', patternTransform: 'rotate(45)' }, mk('defs', {}, svg)); mk('rect', { width: 4, height: 4, fill: '#fff' }, p); mk('line', { x1: 0, y1: 0, x2: 0, y2: 4, stroke: '#d8d6e0', 'stroke-width': 1.6 }, p); }
+
+  function render() {
+    const k = sys.key, O = H.offline, Sd = H.offlineStd;
+    $$('#rpArch button').forEach(b => b.classList.toggle('sel', b.dataset.a === sys.agent));
+    $$('#rpModel button').forEach(b => b.classList.toggle('sel', b.dataset.m === sys.model));
+    $$('#rpRun button').forEach(b => b.classList.toggle('on', +b.dataset.r === run));
+    $('#rpSub').textContent = `Every committed decision of one agent system over the ${ND} offline trading days. Pick an architecture, a backbone and a run, or open a system from the leaderboard.`;
+    $$('#rpTk button').forEach(b => b.classList.toggle('on', b.dataset.t === tk));
+    // Trading: price + BUY / SELL / HOLD strip
+    const acts = [...((RN.trading[`${k}|${tk}`] || [])[run - 1] || '-'.repeat(ND))], px = H.prices[tk];
+    const tr = chart($('#rpTrade'), [px], acts.map((c, i) => ({ fill: c === '-' ? hatch : ACOL[c], pill: [c === '-' ? 'NO RECORD' : ANAME[c], c === '-' ? hatch : c === 'H' ? '#d9d7e3' : ACOL[c], c === '-' || c === 'H'], dot: c === 'B' || c === 'S' ? ACOL[c] : '#0f1528', tip: `<b>${tk} · ${date(D[i])}</b><br>close $${px[i].toFixed(2)}<br>${ANAME[c]}` })), null, i => `<div class="tt">${tk} · ${date(D[i])}</div>${trow('Close', '$' + px[i].toFixed(2))}${trow('Action', ANAME[acts[i]])}${trow('Run', run + ' of ' + M.runs)}`);
+    hatchDef(tr.svg);
+    const [cr, sr, mdd] = (RN.tradingMetrics[`${k}|${tk}`] || [])[run - 1] || [], bh = H.baseline[`Trading|${tk}|CR`];
+    $('#rpTradeFoot').innerHTML = `<div><b class="${cr >= bh ? 'up' : 'dn'}">${pct(cr)}</b><span>CR · run ${run}</span></div><em class="vs">vs.</em><div><b>${pct(bh)}</b><span>Buy &amp; Hold</span></div><div class="dim"><b>${num(sr)}</b><span>SR</span></div><div class="dim"><b>${mdd == null ? '—' : mdd.toFixed(2) + '%'}</b><span>MDD</span></div>`;
+    // Hedging: both legs indexed to 100 + position strip (paper Figure 3b encoding)
+    const pair = (RN.pairs[k] || [])[run - 1], pr = H.pairRuns[k], hs = (RN.hedging[k] || [])[run - 1];
+    let hc = null;
+    if (pair && hs) {
+      const [pl, prt] = pair.split('/'), ix = p => p.map(v => v / p[0] * 100);
+      let p = 'F';
+      const cells = [...hs].map((c, i) => { const cl = c === 'C'; if (c === 'L' || c === 'R') p = c; else if (cl) p = 'F';
+        const pn = cl ? 'CLOSE' : { L: 'LONG-SHORT', R: 'SHORT-LONG', F: 'FLAT' }[p], pc = cl ? '#8b3fd9' : p === 'F' ? '#d9d7e3' : PCOL[p];
+        return { fill: PCOL[p], diamond: cl, pill: [pn, pc, p === 'F' && !cl], dot: p === 'F' && !cl ? '#0f1528' : pc, tip: `<b>${date(D[i])}</b><br>${{ L: 'Long-Short', R: 'Short-Long', F: 'Flat' }[p]}<br><span>action: ${ANAME[c]}</span>` }; });
+      const li = ix(H.prices[pl]), ri = ix(H.prices[prt]), posN = { L: `long ${pl} / short ${prt}`, R: `short ${pl} / long ${prt}`, F: 'flat' };
+      let q = 'F'; const posArr = [...hs].map(c => { if (c === 'L' || c === 'R') q = c; else if (c === 'C') q = 'F'; return q; });
+      hc = chart($('#rpHedge'), [li, ri], cells, [pl, prt], i => `<div class="tt">${pl} / ${prt} · ${date(D[i])}</div>${trow(pl + ' (idx)', li[i].toFixed(1))}${trow(prt + ' (idx)', ri[i].toFixed(1))}${trow('Action', ANAME[hs[i]])}${trow('Position', posN[posArr[i]])}`);
+      const same = (RN.pairs[k] || []).filter(x => x === pair).length;
+      $('#rpPair').innerHTML = `${pl} / ${prt}<small>chosen in ${same}/${M.runs} runs · Long-Short = long ${pl}</small>`;
+    } else { $('#rpHedge').innerHTML = '<p class="sub">No pair selected in this run.</p>'; $('#rpPair').textContent = ''; }
+    const [hcr, hsr, hmdd] = (RN.hedgingMetrics[k] || [])[run - 1] || [];
+    $('#rpHedgeFoot').innerHTML = `<div><b class="${hcr >= 0 ? 'up' : 'dn'}">${pct(hcr)}</b><span>CR · run ${run}</span></div><div class="dim"><b>${num(hsr)}</b><span>SR</span></div><div class="dim"><b>${hmdd == null ? '—' : hmdd.toFixed(2) + '%'}</b><span>MDD</span></div>`;
+    play([tr, hc].filter(Boolean));
+  }
+  // draw both charts left to right over ~4 s (eased); strips light up, the dot rides the line, the pill names the day
+  let timer = null;
+  function play(charts) {
+    cancelAnimationFrame(raf); clearTimeout(timer);
+    const feet = [$('#rpTradeFoot'), $('#rpHedgeFoot')], shown = charts.map(() => -1);
+    function frame(p) {
+      const f = p * (ND - 1), i = Math.min(ND - 1, Math.floor(f + 1e-6)), fr = f - i, x = X(f);
+      charts.forEach((c, ci) => {
+        const v = i < ND - 1 ? c.line[i] + (c.line[i + 1] - c.line[i]) * fr : c.line[ND - 1];
+        c.cr.setAttribute('width', x + 1);
+        c.dot.setAttribute('cx', x); c.dot.setAttribute('cy', c.Y(v));
+        c.vl.setAttribute('x1', x); c.vl.setAttribute('x2', x);
+        if (i === shown[ci]) return;
+        for (let k = shown[ci] + 1; k <= i; k++) { c.cellEls[k].classList.remove('pending'); if (c.dias[k]) c.dias[k].classList.remove('pending'); }
+        shown[ci] = i;
+        const [txt, fill, dark] = c.cells[i].pill;
+        c.status.textContent = `Day ${String(i + 1).padStart(2, '0')}/${ND} · ${date(D[i])}`;
+        const bw = c.status.getComputedTextLength(), pw = txt.length * 6.4 + 16;
+        c.pill.setAttribute('x', L + bw + 10); c.pill.setAttribute('width', pw); c.pill.setAttribute('fill', fill);
+        c.ptx.setAttribute('x', L + bw + 10 + pw / 2); c.ptx.textContent = txt; c.ptx.classList.toggle('dark', dark);
+        c.dot.setAttribute('fill', c.cells[i].dot);
+      });
+    }
+    const done = () => { frame(1); charts.forEach(c => c.vl.setAttribute('stroke-opacity', 0)); feet.forEach(f => f.classList.remove('pending')); };
+    if (reduce || document.hidden) { done(); return; }
+    feet.forEach(f => f.classList.add('pending'));
+    const t0 = performance.now(), dur = 4000;
+    const step = t => { const p = Math.max(0, Math.min(1, (t - t0) / dur)); frame(1 - Math.pow(1 - p, 1.6)); if (p < 1) raf = requestAnimationFrame(step); else done(); };
+    frame(0); raf = requestAnimationFrame(step);
+    timer = setTimeout(done, dur + 600);   // fallback if rAF is throttled
+  }
+  // controls
+  const pickSys = (ag, m) => { sys = rows.find(r => r.agent === ag && r.model === m); render(); };
+  $('#rpArch').innerHTML = H.agents.map(ag => `<button type="button" data-a="${ag}">${ini(ag, 'ini sm')}${ag}</button>`).join('');
+  $('#rpModel').innerHTML = H.models.map(m => `<button type="button" data-m="${m}">${MS[m] || m}</button>`).join('');
+  $('#rpArch').addEventListener('click', e => { const b = e.target.closest('button'); if (b) pickSys(b.dataset.a, sys.model); });
+  $('#rpModel').addEventListener('click', e => { const b = e.target.closest('button'); if (b) pickSys(sys.agent, b.dataset.m); });
+  $('#rpRun').innerHTML = Array.from({ length: M.runs }, (_, i) => `<button type="button" data-r="${i + 1}">Run ${i + 1}</button>`).join('');
+  $('#rpRun').addEventListener('click', e => { const b = e.target.closest('button'); if (b) { run = +b.dataset.r; render(); } });
+  $('#rpTk').innerHTML = H.tradeAssets.map(t => `<button type="button" data-t="${t}">${t}</button>`).join('');
+  $('#rpTk').addEventListener('click', e => { const b = e.target.closest('button'); if (b) { tk = b.dataset.t; render(); } });
+  $('#rpAgain').addEventListener('click', render);
+  // first draw when the section scrolls into view
+  let drawn = false;
+  const go = () => { if (!drawn) { drawn = true; render(); } };
+  if (reduce || !('IntersectionObserver' in window) || /[?&]all\b/.test(location.search)) go();
+  else new IntersectionObserver((es, ob) => es.forEach(e => { if (e.isIntersecting) { ob.disconnect(); go(); } }), { threshold: .3 }).observe($('#replay'));
+  // entry point used by the leaderboard rows
+  return key => { sys = rows.find(r => r.key === key); drawn = true; document.getElementById('replay').scrollIntoView({ behavior: reduce ? 'auto' : 'smooth', block: 'start' }); setTimeout(render, reduce ? 0 : 450); };
+})();
+
+/* ================= 3 · PARTNERS ================= */
+// collaborator institutions from the arXiv paper's affiliations (names only until logos are collected)
+const INSTITUTIONS = ['Columbia University', 'Stevens Institute of Technology', 'New York University', 'Georgia Institute of Technology',
+  'Université de Montréal', 'University of Minnesota', 'University of Massachusetts Boston', 'AIST', 'University of Liverpool',
+  'Vrije Universiteit Amsterdam', 'National University of Singapore', 'Halmstad University', 'Cardiff University', 'Mila – Quebec AI Institute'];
+$('#pNames').innerHTML = INSTITUTIONS.map(n => `<span>${n}</span>`).join(' <i>·</i> ');   // spaces = line-break points
+$('#copyBib').addEventListener('click', () => {
+  const b = $('#copyBib');
+  (navigator.clipboard ? navigator.clipboard.writeText($('#bib').textContent) : Promise.reject()).then(() => b.textContent = 'Copied', () => b.textContent = 'Select & copy');
+  setTimeout(() => b.textContent = 'Copy BibTeX', 1800);
+});
+
+
+/* ================= hero background: real price paths as thin drifting lines ================= */
+// Each line is one stock's 61 offline closes. To loop seamlessly the path runs forward then mirrored
+// (period = 2 × width), and the group drifts left by one period every 160 s.
+function drawFlow() {
+  const svg = $('#flow'), W = Math.max(800, svg.clientWidth), Hh = Math.max(500, svg.clientHeight);
+  svg.setAttribute('viewBox', `0 0 ${W} ${Hh}`);
+  const syms = ['ADBE', 'META', 'AMZN', 'GOOGL', 'TSLA', 'AAPL', 'NVDA', 'MSFT'].filter(s => H.prices[s]);
+  // Catmull-Rom through the points, as cubic Bézier segments [start, c1, c2, end] (rounded like the path string)
+  const r1 = v => Math.round(v * 10) / 10;
+  const segsOf = pts => pts.slice(0, -1).map((p1, i) => { const p0 = pts[Math.max(0, i - 1)], p2 = pts[i + 1], p3 = pts[Math.min(pts.length - 1, i + 2)];
+    return [p1, [p1[0] + (p2[0] - p0[0]) / 6, p1[1] + (p2[1] - p0[1]) / 6], [p2[0] - (p3[0] - p1[0]) / 6, p2[1] - (p3[1] - p1[1]) / 6], p2].map(q => [r1(q[0]), r1(q[1])]); });
+  const f1p = q => `${q[0].toFixed(1)},${q[1].toFixed(1)}`;
+  const smooth = segs => `M${f1p(segs[0][0])}` + segs.map(([, c1, c2, e]) => ` C${f1p(c1)} ${f1p(c2)} ${f1p(e)}`).join('');
+  // ridge: the curve's y at every integer x over one 2W period. Same stepping as SVG getPointAtLength every
+  // 2 units of arc length (the heroes step along it the way they always did), measured on the segments in JS.
+  const ridgeOf = segs => { const r = new Float32Array(Math.ceil(2 * W) + 1);
+    let px = segs[0][0][0], py = segs[0][0][1], acc = 0, s = 2, last = 0, ly = py, done = false;
+    const put = (x, y) => { if (x > 2 * W) { done = true; return; } for (let i = last; i <= Math.floor(x); i++) r[i] = y; last = Math.floor(x) + 1; ly = y; };
+    put(px, py);
+    for (const [a, b, c, d] of segs) { if (done) break;
+      for (let j = 1; j <= 64 && !done; j++) { const t = j / 64, u = 1 - t;
+        const x = u * u * u * a[0] + 3 * u * u * t * b[0] + 3 * u * t * t * c[0] + t * t * t * d[0], y = u * u * u * a[1] + 3 * u * u * t * b[1] + 3 * u * t * t * c[1] + t * t * t * d[1];
+        const dl = Math.hypot(x - px, y - py);
+        while (!done && acc + dl >= s) { const f = (s - acc) / dl; put(px + (x - px) * f, py + (y - py) * f); s += 2; }
+        acc += dl; px = x; py = y; } }
+    for (let i = last; i < r.length; i++) r[i] = ly;   // the period's last pixels keep the last height
+    return r; };
+  const ridges = [];
+  const labels = [];
+  let out = `<defs><linearGradient id="lg" gradientUnits="userSpaceOnUse" x1="0" x2="${W}" y1="0" y2="0" spreadMethod="reflect"><stop offset="0" stop-color="#b40028"/><stop offset="1" stop-color="#7800f0"/></linearGradient></defs><g>`;
+  syms.forEach((s, li) => {
+    const p = H.prices[s], n = p.length, lo = Math.min(...p), hi = Math.max(...p), depth = li / (syms.length - 1);
+    const base = Hh * (.16 + depth * .74), amp = 60 + depth * 60;
+    const y = v => base - (v - lo) / (hi - lo) * amp;
+    const loopv = [...p, ...p.slice(0, -1).reverse()], m = loopv.length;            // forward then mirrored, ends where it starts
+    const pts = [0, 1, 2].flatMap(k => loopv.map((v, i) => [k * 2 * W + i / (m - 1) * 2 * W, y(v)]));   // three periods, enough for the drift
+    // ticker name, fixed at the right edge at the middle of this line's band (does not drift)
+    labels.push(`<text x="${W - 60}" y="${(base - amp / 2 + 3).toFixed(1)}" text-anchor="end" font-family="JetBrains Mono,monospace" font-size="9" fill="#7a1fb4" fill-opacity=".14">${s}</text>`);
+    const bright = li % 3 === 1;
+    const segs = segsOf(pts); ridges.push(segs);
+    out += `<path d="${smooth(segs)}" fill="none" stroke="url(#lg)" stroke-width="${bright ? 1.3 : .9}" opacity="${bright ? .34 : .12 + depth * .1}"/>`;
+    for (let k = 0; k < 3; k++) {
+      if (bright) [.18, .55, .83].forEach(f => { const i = Math.round(f * (n - 1)), xi = k * 2 * W + i / (m - 1) * 2 * W;
+        out += `<circle cx="${xi}" cy="${y(p[i])}" r="2.2" fill="#7800f0" opacity=".5"/><circle class="node" cx="${xi}" cy="${y(p[i])}" r="2.4" fill="none" stroke="#7800f0" stroke-width=".8" style="animation-delay:${(f * 3).toFixed(2)}s"/>`; });
+    }
+  });
+  out += '</g>' + labels.join('');
+  svg.innerHTML = out;
+  flowState = { W, Hh, ridge: ridgeOf(ridges[ridges.length - 1]), ridgeTop: ridgeOf(ridges[0]), g: svg.querySelector('g'), period: 2 * W };
+}
+let flowState = null, flowT0 = null;
+// drift the lines left (one 2W period every 160 s) and stand the pixel hero / lion on the front ridge
+function flowTick(ts) {
+  if (!flowState) return requestAnimationFrame(flowTick);
+  if (flowT0 === null) flowT0 = ts;
+  const { W, Hh, ridge, ridgeTop, g, period } = flowState, off = reduce ? 0 : ((ts - flowT0) / 160000 * period) % period;
+  g.setAttribute('transform', `translate(${-off} 0)`);
+  const k = $('#flow').getBoundingClientRect().width / W || 1;        // svg is stretched to the hero box
+  const ky = $('#flow').getBoundingClientRect().height / Hh;
+  const yAt = (r, px) => r[Math.max(0, Math.min(r.length - 1, Math.round(px / k + off) % period))] * ky;
+  const stand = (sel, r) => $$(sel).forEach(el => {
+    const sw = el.parentNode.clientWidth, l = el.style.left, w = el.offsetWidth || 18;
+    const x = l.endsWith('%') ? parseFloat(l) / 100 * sw : parseFloat(l) || 0;     // the return walker moves in %
+    el.style.top = (yAt(r, x + w / 2) - (el.offsetHeight || 24) + 2) + 'px';
+  });
+  stand('#herc-top .walker, #herc-top .lion, #herc-top .flash', ridgeTop);   // the fight, on the top line (ADBE)
+  stand('#herc-bot .walker', ridge);                                      // the walk back, on the bottom line (MSFT)
+  requestAnimationFrame(flowTick);
+}
+requestAnimationFrame(flowTick);
+drawFlow();
+
+/* ================= header: scrolled state, progress bar, sliding nav pill ================= */
+const header = $('#header'), prog = $('#progress'), nav = $('#navLinks');
+function onScroll() {
+  const y = scrollY, max = document.documentElement.scrollHeight - innerHeight;
+  header.classList.toggle('scrolled', y > 10);
+  prog.style.transform = `scaleX(${max > 0 ? y / max : 0})`;
+  let cur = null;
+  for (const a of $$('a', nav)) { const sec = document.getElementById(a.dataset.sec); if (sec && sec.getBoundingClientRect().top < innerHeight * .4) cur = a.dataset.sec; }
+  $$('a', nav).forEach(a => a.classList.toggle('active', a.dataset.sec === cur));
+}
+addEventListener('scroll', onScroll, { passive: true }); onScroll();
+let rz; addEventListener('resize', () => { clearTimeout(rz); rz = setTimeout(() => { drawFlow(); layout(); }, 200); });
+
+/* ================= micro-interactions (thefin.ai): spotlight cards, button glow, magnetic CTAs, tilt ================= */
+let lastBtn = null;
+document.addEventListener('pointermove', e => {
+  const b = e.target.closest && e.target.closest('.btn');
+  if (lastBtn && lastBtn !== b) lastBtn.style.transform = '';
+  lastBtn = b;
+  if (b) {
+    const r = b.getBoundingClientRect(), x = e.clientX - r.left, y = e.clientY - r.top;
+    b.style.setProperty('--mx', x + 'px'); b.style.setProperty('--my', y + 'px');
+    if (!reduce && b.classList.contains('magnetic')) b.style.transform = `translate(${(x - r.width / 2) * .18}px,${(y - r.height / 2) * .3}px)`;
+  }
+  const c = e.target.closest && e.target.closest('.spot');
+  if (c) { const r = c.getBoundingClientRect(); c.style.setProperty('--x', e.clientX - r.left + 'px'); c.style.setProperty('--y', e.clientY - r.top + 'px'); }
+}, { passive: true });
+if (!reduce && matchMedia('(hover:hover)').matches) $$('.tilt').forEach(card => {
+  card.addEventListener('pointermove', e => {
+    const r = card.getBoundingClientRect(), px = (e.clientX - r.left) / r.width, py = (e.clientY - r.top) / r.height;
+    card.style.transition = 'transform .1s';
+    card.style.transform = `perspective(1000px) rotateY(${(px - .5) * 8}deg) rotateX(${(.5 - py) * 8}deg)`;
+    card.style.setProperty('--gx', px * 100 + '%'); card.style.setProperty('--gy', py * 100 + '%');
+  });
+  card.addEventListener('pointerleave', () => { card.style.transition = ''; card.style.transform = ''; });
+});
+
+/* ================= reveal on scroll ================= */
+const io = 'IntersectionObserver' in window ? new IntersectionObserver(es => es.forEach(e => {
+  if (!e.isIntersecting) return;
+  e.target.classList.add('in'); io.unobserve(e.target);
+  if (e.target.id === 'board') { revealed = true; setTimeout(layout, 120); }
+}), { threshold: .08 }) : null;
+$$('[data-reveal]').forEach(el => io ? io.observe(el) : el.classList.add('in'));
+if (!io || reduce || /[?&]all\b/.test(location.search)) { revealed = true; pod.classList.add('in'); $$('[data-reveal]').forEach(el => el.classList.add('in')); layout(); }
+
+requestAnimationFrame(() => { document.body.classList.add('loaded'); setTimeout(() => { $$('[data-count]').forEach(countUp); pod.classList.add('in'); }, 500); });
+})();
+
+/* ---------- game card: mini K-line of the real window (TSLA), with one system's calls ---------- */
+(() => {
+  const H = window.HERC, svg = document.getElementById('gameK'); if (!svg || !H.ohlc) return;
+  const tk = 'TSLA', O = H.ohlc, bars = O.bars[tk].slice(O.start), acts = (H.runs.trading[`Hermes|DeepSeek-V4-Pro|${tk}`] || [''])[0] || '';
+  const lo = Math.min(...bars.map(b => b[2])), hi = Math.max(...bars.map(b => b[1])), W = svg.clientWidth || 360, Hh = svg.clientHeight || 96, top = 10, ph = Hh - 20, cw = W / bars.length, w = cw * .6;
+  const Y = v => top + (1 - (v - lo) / (hi - lo)) * ph;
+  svg.setAttribute('viewBox', `0 0 ${W} ${Hh}`);
+  svg.innerHTML = bars.map((b, i) => {
+    const [o, h, l, c] = b, up = c >= o, col = up ? '#3fd68f' : '#ff5a72', x = (i + .5) * cw, d = `style="transition-delay:${(i * 18) | 0}ms"`;
+    const mk = acts[i] === 'B' ? `<path d="M${x},${Y(l) + 3} l3,5 h-6z" fill="#3fd68f"/>` : acts[i] === 'S' ? `<path d="M${x},${Y(h) - 3} l3,-5 h-6z" fill="#ff5a72"/>` : '';
+    return `<g class="gk" ${d}><line x1="${x}" x2="${x}" y1="${Y(h)}" y2="${Y(l)}" stroke="${col}" stroke-width=".9"/><rect x="${x - w / 2}" y="${Y(Math.max(o, c))}" width="${w}" height="${Math.max(.8, Math.abs(Y(o) - Y(c)))}" fill="${up ? 'none' : col}" stroke="${col}" stroke-width=".8"/>${mk}</g>`;
+  }).join('');
+})();
+
+/* ---------- deep links (play.html → the Leaderboard section): the target travels in the #hash, ?to=, window.name and
+   localStorage, because some viewers drop or rewrite the URL; scroll once the JS-built sections exist, and again
+   while the layout settles, unless the reader has started scrolling */
+(() => {
+  let want = location.hash.slice(1) || new URLSearchParams(location.search).get('to') || '';
+  const wn = /^herc-goto:(\w[\w-]*)$/.exec(window.name || ''); if (wn) { want = want || wn[1]; window.name = ''; }
+  try { const g = JSON.parse(localStorage.getItem('herc-goto') || 'null'); localStorage.removeItem('herc-goto'); if (!want && g && Date.now() - g.t < 15000) want = g.id; } catch (_) {}
+  if (!want || !document.getElementById(want)) return;
+  let user = false; const stop = () => (user = true);
+  ['wheel', 'touchstart', 'keydown', 'mousedown'].forEach(t => addEventListener(t, stop, { once: true, passive: true }));
+  const go = () => {
+    if (user) return;
+    const el = document.getElementById(want), root = document.documentElement, sb = root.style.scrollBehavior;
+    root.style.scrollBehavior = 'auto';                       // html{scroll-behavior:smooth} would animate and can be cut short
+    scrollTo(0, el.getBoundingClientRect().top + scrollY - (parseFloat(getComputedStyle(root).scrollPaddingTop) || 0));
+    root.style.scrollBehavior = sb;
+  };
+  if ('scrollRestoration' in history) history.scrollRestoration = 'manual';
+  go(); requestAnimationFrame(go);
+  [150, 400, 900, 1600, 2600].forEach(t => setTimeout(go, t));
+  addEventListener('load', go);
+  addEventListener('pageshow', e => e.persisted && go());
+  (document.fonts && document.fonts.ready || Promise.resolve()).then(go);
+})();
+
+/* ---------- coins popping out of the $ badge on the two "Trade" buttons: slow and faint at rest, fast and bright on hover ---------- */
+(() => {
+  if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+  const btns = [...document.querySelectorAll('.btn--trade')]; if (!btns.length) return;
+  const layer = document.createElement('div'); layer.className = 'coin-layer'; document.body.appendChild(layer);
+  const coin = () => { const c = document.createElement('i'); c.className = 'coin'; c.textContent = '$'; return c; };
+  btns.forEach(b => {
+    const host = b.closest('.game-card') || b, dol = b.querySelector('.dol') || b;
+    let hot = false, vis = true, t = 0, raf = 0;
+    host.addEventListener('pointerenter', () => (hot = true)); host.addEventListener('pointerleave', () => (hot = false));
+    if ('IntersectionObserver' in window) new IntersectionObserver(es => es.forEach(e => (vis = e.isIntersecting))).observe(b);
+    const spawn = () => {
+      const r = dol.getBoundingClientRect(), x = r.left + r.width / 2 + scrollX, y = r.top + r.height / 2 + scrollY;
+      const big = hot, c = coin(), dx = (Math.random() - .5) * (big ? 70 : 34), up = (big ? 46 : 26) + Math.random() * (big ? 30 : 14);
+      const s = big ? .9 + Math.random() * .35 : .7 + Math.random() * .2, op = big ? .95 : .38, dur = big ? 900 + Math.random() * 300 : 1300 + Math.random() * 400;
+      c.style.left = x + 'px'; c.style.top = y + 'px'; layer.appendChild(c);
+      // flat coin: a small in-plane turn only
+      const spin = (Math.random() < .5 ? -1 : 1) * (10 + Math.random() * 20);
+      c.animate([
+        { transform: `translate(-50%,-50%) translate(0,0) scale(${s * .4}) rotate(0deg)`, opacity: 0 },
+        { transform: `translate(-50%,-50%) translate(${dx * .5}px,${-up}px) scale(${s}) rotate(${spin * .6}deg)`, opacity: op, offset: .45 },
+        { transform: `translate(-50%,-50%) translate(${dx}px,${-up * .55}px) scale(${s * .85}) rotate(${spin}deg)`, opacity: 0 }
+      ], { duration: dur, easing: 'cubic-bezier(.25,.7,.35,1)' }).onfinish = () => c.remove();
+    };
+    const tick = now => {
+      const gap = hot ? 190 : 900;
+      if (vis && !document.hidden && now - t > gap) { t = now; spawn(); }
+      raf = requestAnimationFrame(tick);
+    };
+    raf = requestAnimationFrame(tick);
+  });
+})();

herc_scene.js

@@ -0,0 +1,109 @@
+/* Pixel Hercules scenes, for the hero.
+   Top: the hero meets the Nemean lion and dons its skin. Bottom: the lion-skin hero walks on. */
+/* ---------- Hercules pixel scenes (top: encounter+transform · bottom: lion-skin hero walking) ---------- */
+(function(){
+  const SPR={
+    HA:"<svg viewBox=\"0 0 18 18\" shape-rendering=\"crispEdges\" fill=\"currentColor\"><rect x=\"7\" y=\"1\" width=\"1\" height=\"1\"/><rect x=\"8\" y=\"1\" width=\"1\" height=\"1\"/><rect x=\"9\" y=\"1\" width=\"1\" height=\"1\"/><rect x=\"6\" y=\"2\" width=\"1\" height=\"1\"/><rect x=\"7\" y=\"2\" width=\"1\" height=\"1\"/><rect x=\"8\" y=\"2\" width=\"1\" height=\"1\"/><rect x=\"9\" y=\"2\" width=\"1\" height=\"1\"/><rect x=\"10\" y=\"2\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"15\" y=\"2\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"16\" y=\"2\" width=\"1\" height=\"1\"/><rect x=\"6\" y=\"3\" width=\"1\" height=\"1\"/><rect x=\"7\" y=\"3\" width=\"1\" height=\"1\"/><rect x=\"8\" y=\"3\" width=\"1\" height=\"1\"/><rect x=\"9\" y=\"3\" width=\"1\" height=\"1\"/><rect x=\"10\" y=\"3\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"14\" y=\"3\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"15\" y=\"3\" width=\"1\" height=\"1\"/><rect x=\"7\" y=\"4\" width=\"1\" height=\"1\"/><rect x=\"8\" y=\"4\" width=\"1\" height=\"1\"/><rect x=\"9\" y=\"4\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"13\" y=\"4\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"14\" y=\"4\" width=\"1\" height=\"1\"/><rect x=\"4\" y=\"5\" width=\"1\" height=\"1\"/><rect x=\"5\" y=\"5\" width=\"1\" height=\"1\"/><rect x=\"6\" y=\"5\" width=\"1\" height=\"1\"/><rect x=\"7\" y=\"5\" width=\"1\" height=\"1\"/><rect x=\"8\" y=\"5\" width=\"1\" height=\"1\"/><rect x=\"9\" y=\"5\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"12\" y=\"5\" width=\"1\" height=\"1\"/><rect x=\"4\" y=\"6\" width=\"1\" height=\"1\"/><rect x=\"6\" y=\"6\" width=\"1\" height=\"1\"/><rect x=\"7\" y=\"6\" width=\"1\" height=\"1\"/><rect x=\"8\" y=\"6\" width=\"1\" height=\"1\"/><rect x=\"9\" y=\"6\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"11\" y=\"6\" width=\"1\" height=\"1\"/><rect x=\"6\" y=\"7\" width=\"1\" height=\"1\"/><rect x=\"7\" y=\"7\" width=\"1\" height=\"1\"/><rect x=\"8\" y=\"7\" width=\"1\" height=\"1\"/><rect x=\"9\" y=\"7\" width=\"1\" height=\"1\"/><rect x=\"6\" y=\"8\" width=\"1\" height=\"1\"/><rect x=\"7\" y=\"8\" width=\"1\" height=\"1\"/><rect x=\"8\" y=\"8\" width=\"1\" height=\"1\"/><rect x=\"9\" y=\"8\" width=\"1\" height=\"1\"/><rect x=\"6\" y=\"9\" width=\"1\" height=\"1\"/><rect x=\"7\" y=\"9\" width=\"1\" height=\"1\"/><rect x=\"8\" y=\"9\" width=\"1\" height=\"1\"/><rect x=\"9\" y=\"9\" width=\"1\" height=\"1\"/><rect x=\"7\" y=\"10\" width=\"1\" height=\"1\"/><rect x=\"8\" y=\"10\" width=\"1\" height=\"1\"/><rect x=\"6\" y=\"11\" width=\"1\" height=\"1\"/><rect x=\"9\" y=\"11\" width=\"1\" height=\"1\"/><rect x=\"5\" y=\"12\" width=\"1\" height=\"1\"/><rect x=\"9\" y=\"12\" width=\"1\" height=\"1\"/><rect x=\"4\" y=\"13\" width=\"1\" height=\"1\"/><rect x=\"9\" y=\"13\" width=\"1\" height=\"1\"/><rect x=\"3\" y=\"14\" width=\"1\" height=\"1\"/><rect x=\"9\" y=\"14\" width=\"1\" height=\"1\"/><rect x=\"10\" y=\"14\" width=\"1\" height=\"1\"/><rect x=\"2\" y=\"15\" width=\"1\" height=\"1\"/><rect x=\"3\" y=\"15\" width=\"1\" height=\"1\"/></svg>",
+    HB:"<svg viewBox=\"0 0 18 18\" shape-rendering=\"crispEdges\" fill=\"currentColor\"><rect x=\"7\" y=\"2\" width=\"1\" height=\"1\"/><rect x=\"8\" y=\"2\" width=\"1\" height=\"1\"/><rect x=\"9\" y=\"2\" width=\"1\" height=\"1\"/><rect x=\"6\" y=\"3\" width=\"1\" height=\"1\"/><rect x=\"7\" y=\"3\" width=\"1\" height=\"1\"/><rect x=\"8\" y=\"3\" width=\"1\" height=\"1\"/><rect x=\"9\" y=\"3\" width=\"1\" height=\"1\"/><rect x=\"10\" y=\"3\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"15\" y=\"3\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"16\" y=\"3\" width=\"1\" height=\"1\"/><rect x=\"6\" y=\"4\" width=\"1\" height=\"1\"/><rect x=\"7\" y=\"4\" width=\"1\" height=\"1\"/><rect x=\"8\" y=\"4\" width=\"1\" height=\"1\"/><rect x=\"9\" y=\"4\" width=\"1\" height=\"1\"/><rect x=\"10\" y=\"4\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"14\" y=\"4\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"15\" y=\"4\" width=\"1\" height=\"1\"/><rect x=\"7\" y=\"5\" width=\"1\" height=\"1\"/><rect x=\"8\" y=\"5\" width=\"1\" height=\"1\"/><rect x=\"9\" y=\"5\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"13\" y=\"5\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"14\" y=\"5\" width=\"1\" height=\"1\"/><rect x=\"4\" y=\"6\" width=\"1\" height=\"1\"/><rect x=\"5\" y=\"6\" width=\"1\" height=\"1\"/><rect x=\"6\" y=\"6\" width=\"1\" height=\"1\"/><rect x=\"7\" y=\"6\" width=\"1\" height=\"1\"/><rect x=\"8\" y=\"6\" width=\"1\" height=\"1\"/><rect x=\"9\" y=\"6\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"12\" y=\"6\" width=\"1\" height=\"1\"/><rect x=\"4\" y=\"7\" width=\"1\" height=\"1\"/><rect x=\"6\" y=\"7\" width=\"1\" height=\"1\"/><rect x=\"7\" y=\"7\" width=\"1\" height=\"1\"/><rect x=\"8\" y=\"7\" width=\"1\" height=\"1\"/><rect x=\"9\" y=\"7\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"11\" y=\"7\" width=\"1\" height=\"1\"/><rect x=\"6\" y=\"8\" width=\"1\" height=\"1\"/><rect x=\"7\" y=\"8\" width=\"1\" height=\"1\"/><rect x=\"8\" y=\"8\" width=\"1\" height=\"1\"/><rect x=\"9\" y=\"8\" width=\"1\" height=\"1\"/><rect x=\"6\" y=\"9\" width=\"1\" height=\"1\"/><rect x=\"7\" y=\"9\" width=\"1\" height=\"1\"/><rect x=\"8\" y=\"9\" width=\"1\" height=\"1\"/><rect x=\"9\" y=\"9\" width=\"1\" height=\"1\"/><rect x=\"7\" y=\"10\" width=\"1\" height=\"1\"/><rect x=\"8\" y=\"10\" width=\"1\" height=\"1\"/><rect x=\"7\" y=\"11\" width=\"1\" height=\"1\"/><rect x=\"9\" y=\"11\" width=\"1\" height=\"1\"/><rect x=\"7\" y=\"12\" width=\"1\" height=\"1\"/><rect x=\"10\" y=\"12\" width=\"1\" height=\"1\"/><rect x=\"6\" y=\"13\" width=\"1\" height=\"1\"/><rect x=\"10\" y=\"13\" width=\"1\" height=\"1\"/><rect x=\"5\" y=\"14\" width=\"1\" height=\"1\"/><rect x=\"6\" y=\"14\" width=\"1\" height=\"1\"/><rect x=\"10\" y=\"14\" width=\"1\" height=\"1\"/><rect x=\"9\" y=\"15\" width=\"1\" height=\"1\"/><rect x=\"10\" y=\"15\" width=\"1\" height=\"1\"/></svg>",
+    SA:"<svg viewBox=\"0 0 18 18\" shape-rendering=\"crispEdges\" fill=\"currentColor\"><rect class=\"acc\" x=\"6\" y=\"0\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"7\" y=\"0\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"8\" y=\"0\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"5\" y=\"1\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"6\" y=\"1\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"7\" y=\"1\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"8\" y=\"1\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"9\" y=\"1\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"4\" y=\"2\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"5\" y=\"2\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"6\" y=\"2\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"7\" y=\"2\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"8\" y=\"2\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"9\" y=\"2\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"10\" y=\"2\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"4\" y=\"3\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"5\" y=\"3\" width=\"1\" height=\"1\"/><rect x=\"6\" y=\"3\" width=\"1\" height=\"1\"/><rect x=\"7\" y=\"3\" width=\"1\" height=\"1\"/><rect x=\"8\" y=\"3\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"9\" y=\"3\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"10\" y=\"3\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"14\" y=\"3\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"15\" y=\"3\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"4\" y=\"4\" width=\"1\" height=\"1\"/><rect x=\"5\" y=\"4\" width=\"1\" height=\"1\"/><rect x=\"6\" y=\"4\" width=\"1\" height=\"1\"/><rect x=\"7\" y=\"4\" width=\"1\" height=\"1\"/><rect x=\"8\" y=\"4\" width=\"1\" height=\"1\"/><rect x=\"9\" y=\"4\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"10\" y=\"4\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"13\" y=\"4\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"14\" y=\"4\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"4\" y=\"5\" width=\"1\" height=\"1\"/><rect x=\"5\" y=\"5\" width=\"1\" height=\"1\"/><rect x=\"6\" y=\"5\" width=\"1\" height=\"1\"/><rect x=\"7\" y=\"5\" width=\"1\" height=\"1\"/><rect x=\"8\" y=\"5\" width=\"1\" height=\"1\"/><rect x=\"9\" y=\"5\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"10\" y=\"5\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"12\" y=\"5\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"13\" y=\"5\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"4\" y=\"6\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"5\" y=\"6\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"6\" y=\"6\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"7\" y=\"6\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"8\" y=\"6\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"9\" y=\"6\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"10\" y=\"6\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"12\" y=\"6\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"13\" y=\"6\" width=\"1\" height=\"1\"/><rect x=\"4\" y=\"7\" width=\"1\" height=\"1\"/><rect x=\"5\" y=\"7\" width=\"1\" height=\"1\"/><rect x=\"6\" y=\"7\" width=\"1\" height=\"1\"/><rect x=\"7\" y=\"7\" width=\"1\" height=\"1\"/><rect x=\"8\" y=\"7\" width=\"1\" height=\"1\"/><rect x=\"9\" y=\"7\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"10\" y=\"7\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"11\" y=\"7\" width=\"1\" height=\"1\"/><rect x=\"6\" y=\"8\" width=\"1\" height=\"1\"/><rect x=\"7\" y=\"8\" width=\"1\" height=\"1\"/><rect x=\"8\" y=\"8\" width=\"1\" height=\"1\"/><rect x=\"9\" y=\"8\" width=\"1\" height=\"1\"/><rect x=\"6\" y=\"9\" width=\"1\" height=\"1\"/><rect x=\"7\" y=\"9\" width=\"1\" height=\"1\"/><rect x=\"8\" y=\"9\" width=\"1\" height=\"1\"/><rect x=\"9\" y=\"9\" width=\"1\" height=\"1\"/><rect x=\"7\" y=\"10\" width=\"1\" height=\"1\"/><rect x=\"8\" y=\"10\" width=\"1\" height=\"1\"/><rect x=\"6\" y=\"11\" width=\"1\" height=\"1\"/><rect x=\"9\" y=\"11\" width=\"1\" height=\"1\"/><rect x=\"5\" y=\"12\" width=\"1\" height=\"1\"/><rect x=\"9\" y=\"12\" width=\"1\" height=\"1\"/><rect x=\"4\" y=\"13\" width=\"1\" height=\"1\"/><rect x=\"9\" y=\"13\" width=\"1\" height=\"1\"/><rect x=\"3\" y=\"14\" width=\"1\" height=\"1\"/><rect x=\"9\" y=\"14\" width=\"1\" height=\"1\"/><rect x=\"10\" y=\"14\" width=\"1\" height=\"1\"/><rect x=\"2\" y=\"15\" width=\"1\" height=\"1\"/><rect x=\"3\" y=\"15\" width=\"1\" height=\"1\"/></svg>",
+    SB:"<svg viewBox=\"0 0 18 18\" shape-rendering=\"crispEdges\" fill=\"currentColor\"><rect class=\"acc\" x=\"6\" y=\"1\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"7\" y=\"1\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"8\" y=\"1\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"5\" y=\"2\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"6\" y=\"2\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"7\" y=\"2\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"8\" y=\"2\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"9\" y=\"2\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"4\" y=\"3\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"5\" y=\"3\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"6\" y=\"3\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"7\" y=\"3\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"8\" y=\"3\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"9\" y=\"3\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"10\" y=\"3\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"4\" y=\"4\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"5\" y=\"4\" width=\"1\" height=\"1\"/><rect x=\"6\" y=\"4\" width=\"1\" height=\"1\"/><rect x=\"7\" y=\"4\" width=\"1\" height=\"1\"/><rect x=\"8\" y=\"4\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"9\" y=\"4\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"10\" y=\"4\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"14\" y=\"4\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"15\" y=\"4\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"4\" y=\"5\" width=\"1\" height=\"1\"/><rect x=\"5\" y=\"5\" width=\"1\" height=\"1\"/><rect x=\"6\" y=\"5\" width=\"1\" height=\"1\"/><rect x=\"7\" y=\"5\" width=\"1\" height=\"1\"/><rect x=\"8\" y=\"5\" width=\"1\" height=\"1\"/><rect x=\"9\" y=\"5\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"10\" y=\"5\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"13\" y=\"5\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"14\" y=\"5\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"4\" y=\"6\" width=\"1\" height=\"1\"/><rect x=\"5\" y=\"6\" width=\"1\" height=\"1\"/><rect x=\"6\" y=\"6\" width=\"1\" height=\"1\"/><rect x=\"7\" y=\"6\" width=\"1\" height=\"1\"/><rect x=\"8\" y=\"6\" width=\"1\" height=\"1\"/><rect x=\"9\" y=\"6\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"10\" y=\"6\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"12\" y=\"6\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"13\" y=\"6\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"4\" y=\"7\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"5\" y=\"7\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"6\" y=\"7\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"7\" y=\"7\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"8\" y=\"7\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"9\" y=\"7\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"10\" y=\"7\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"12\" y=\"7\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"13\" y=\"7\" width=\"1\" height=\"1\"/><rect x=\"4\" y=\"8\" width=\"1\" height=\"1\"/><rect x=\"5\" y=\"8\" width=\"1\" height=\"1\"/><rect x=\"6\" y=\"8\" width=\"1\" height=\"1\"/><rect x=\"7\" y=\"8\" width=\"1\" height=\"1\"/><rect x=\"8\" y=\"8\" width=\"1\" height=\"1\"/><rect x=\"9\" y=\"8\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"10\" y=\"8\" width=\"1\" height=\"1\"/><rect class=\"acc\" x=\"11\" y=\"8\" width=\"1\" height=\"1\"/><rect x=\"6\" y=\"9\" width=\"1\" height=\"1\"/><rect x=\"7\" y=\"9\" width=\"1\" height=\"1\"/><rect x=\"8\" y=\"9\" width=\"1\" height=\"1\"/><rect x=\"9\" y=\"9\" width=\"1\" height=\"1\"/><rect x=\"7\" y=\"10\" width=\"1\" height=\"1\"/><rect x=\"8\" y=\"10\" width=\"1\" height=\"1\"/><rect x=\"7\" y=\"11\" width=\"1\" height=\"1\"/><rect x=\"9\" y=\"11\" width=\"1\" height=\"1\"/><rect x=\"7\" y=\"12\" width=\"1\" height=\"1\"/><rect x=\"10\" y=\"12\" width=\"1\" height=\"1\"/><rect x=\"6\" y=\"13\" width=\"1\" height=\"1\"/><rect x=\"10\" y=\"13\" width=\"1\" height=\"1\"/><rect x=\"5\" y=\"14\" width=\"1\" height=\"1\"/><rect x=\"6\" y=\"14\" width=\"1\" height=\"1\"/><rect x=\"10\" y=\"14\" width=\"1\" height=\"1\"/><rect x=\"9\" y=\"15\" width=\"1\" height=\"1\"/><rect x=\"10\" y=\"15\" width=\"1\" height=\"1\"/></svg>"
+  };
+  const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+  // ---- TOP: full story ----
+  (function(){
+    const scene=document.getElementById('herc-top'); if(!scene) return;
+    scene.innerHTML =
+      '<span class="lion"><span class="li">\uD83E\uDD81</span></span>'+
+      '<span class="flash"></span>'+
+      '<span class="walker">'+
+        '<span class="hk plain"><span class="fr a">'+SPR.HA+'</span><span class="fr b">'+SPR.HB+'</span></span>'+
+        '<span class="hk skin"><span class="fr a">'+SPR.SA+'</span><span class="fr b">'+SPR.SB+'</span></span>'+
+      '</span>';
+    const walker=scene.querySelector('.walker'), lion=scene.querySelector('.lion'),
+          plain=scene.querySelector('.hk.plain'), skin=scene.querySelector('.hk.skin'),
+          flash=scene.querySelector('.flash'),
+          fA=[...scene.querySelectorAll('.hk .fr.a')], fB=[...scene.querySelectorAll('.hk .fr.b')];
+    // The ground scrolls left at WORLD px/s; the lion is "pinned" to that ground, so it drifts in
+    // from the far right at the EXACT same speed (no foot-slip, any window width). The hero walks in
+    // at his own pace, waits, they collide & bounce, the lion vanishes in a flash, the hero dons the skin.
+    const WORLD=60;                 // px/s — shared by ground + lion (slow, steady)
+    const HERO_PXS=150;             // hero walk speed (px/s), walking right the whole time
+    const HERO_START=-22;           // hero off-left (px)
+    const BOUNCE=1.5, MERGE_GAP=0.3, WALKOFF=3.6; // phase durations after contact (s)
+    if(reduce){ walker.style.left='50%'; lion.style.opacity=0; skin.style.display='block'; plain.style.display='none'; return; }
+
+    let t0=null,phase=0,lastLeg=0;
+    function frame(ts){
+      if(t0===null)t0=ts;
+      const W=scene.clientWidth||1000;
+      const elapsed=(ts-t0)/1000;
+      scene.style.setProperty('--gx', (-((WORLD*elapsed)%14))+'px');
+      // hero walks right at HERO_PXS, lion drifts left at WORLD — they close the gap until they touch.
+      // Solve contact time: HERO_START + HERO_PXS*t + 16  ==  (W+22) - WORLD*t   (hero right side meets lion left)
+      const startPx=W+22;
+      const tContact=Math.max(0,(startPx-16-HERO_START)/(HERO_PXS+WORLD));
+      const contactHeroPx=HERO_START+HERO_PXS*tContact;     // hero x at contact
+      const contactLionPx=contactHeroPx+16;                 // lion sits just past hero's right
+      const tBounceEnd=tContact+BOUNCE, tFlash=tContact+BOUNCE-0.05, tMerge=tBounceEnd+MERGE_GAP, tEnd=tMerge+Math.min(WALKOFF,Math.max(.2,(W+4-contactHeroPx)/(HERO_PXS*1.6)));   // phase ends as he leaves the screen
+      // one shared cycle: encounter + walk-off on the front line, then the walk back on the top line (RETURN s)
+      const RETURN=13, cycle=tEnd+RETURN, tc=elapsed%cycle;
+      window.__hercReturn = tc>=tEnd ? (tc-tEnd)/RETURN : null;    // 0..1 while the lion-skin hero walks back
+      if(tc>=tEnd){ walker.style.left=(W+60)+'px'; lion.style.opacity=0; flash.style.opacity=0; requestAnimationFrame(frame); return; }
+      const t=tc;
+
+      // ---- lion (pinned to ground: drifts left at WORLD px/s until contact) ----
+      let lionPx;
+      if(t<tContact){ lionPx=startPx-WORLD*t; }
+      else if(t<tBounceEnd){ const k=(t-tContact)/BOUNCE; lionPx=contactLionPx + 9*Math.sin(k*Math.PI*3)*(1-k); }
+      else lionPx=contactLionPx;
+      lion.style.left=lionPx+'px';
+
+      // ---- hero: walks right continuously until contact, bounces, then strides off ----
+      let heroPx;
+      if(t<tContact) heroPx=HERO_START+HERO_PXS*t;
+      else if(t<tBounceEnd){ const k=(t-tContact)/BOUNCE; heroPx=contactHeroPx - 22*Math.sin(k*Math.PI*3)*(1-k); }
+      else if(t<tMerge) heroPx=contactHeroPx;
+      else heroPx=contactHeroPx + HERO_PXS*1.6*(t-tMerge);
+      walker.style.left=heroPx+'px';
+
+      // legs march except during the locked collision window
+      const walking=t<tContact||t>=tMerge;
+      if(walking && ts-lastLeg>240){phase^=1;lastLeg=ts;
+        fA.forEach(e=>e.style.opacity=phase?0:1); fB.forEach(e=>e.style.opacity=phase?1:0);}
+
+      // transform: lion fades out over the merge gap, hero swaps to the lion-skin sprite
+      const merging=t>=tMerge;
+      skin.style.display=merging?'block':'none'; plain.style.display=merging?'none':'block';
+      if(t>=tBounceEnd&&t<tMerge){const u=(t-tBounceEnd)/MERGE_GAP; lion.style.opacity=1-u; lion.style.transform='scale('+(1-0.6*u)+')';}
+      else if(t>=tMerge){lion.style.opacity=0;}
+      else{lion.style.opacity=1; lion.style.transform='scale(1)';}
+      // flash at the moment of transformation
+      if(t>=tFlash-0.15&&t<tMerge+0.25){const d=Math.abs(t-(tFlash+0.05));
+        flash.style.opacity=Math.max(0,1-d/0.22); flash.style.left=(contactLionPx)+'px';}
+      else flash.style.opacity=0;
+      requestAnimationFrame(frame);
+    }
+    requestAnimationFrame(frame);
+  })();
+
+  // ---- BOTTOM: lone lion-skin hero walking right -> left ----
+  (function(){
+    const scene=document.getElementById('herc-bot'); if(!scene) return;
+    scene.innerHTML='<span class="walker"><span class="hk skin"><span class="fr a">'+SPR.SA+'</span><span class="fr b">'+SPR.SB+'</span></span></span>';
+    const walker=scene.querySelector('.walker');
+    const fA=scene.querySelector('.fr.a'), fB=scene.querySelector('.fr.b');
+    if(reduce){ walker.style.left='50%'; return; }
+    let t0=null,phase=0,lastLeg=0;
+    function frame(ts){
+      if(t0===null)t0=ts;
+      const p=window.__hercReturn;       // driven by the top scene: only walks after the encounter has left the screen
+      walker.style.visibility = p==null ? 'hidden' : 'visible';
+      walker.style.left=(p==null ? 101 : 101-(101-(-3))*p)+'%';  // enters right away at the right edge (101% -> -3%)
+      if(ts-lastLeg>240){phase^=1;lastLeg=ts;
+        fA.style.opacity=phase?0:1; fB.style.opacity=phase?1:0;}
+      requestAnimationFrame(frame);
+    }
+    requestAnimationFrame(frame);
+  })();
+})();

index.html

@@ -1,19 +1,237 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>HERCULEAN · An Agentic Benchmark for Financial Intelligence · The Fin AI</title>
+<meta name="description" content="HERCULEAN: end-to-end, workflow-level evaluation of financial agents. Leaderboard of agent systems across Trading, Hedging, Market Insights and Auditing." />
+<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=Cinzel:wght@600;700&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>
+<!-- page frame: soft colour glows behind everything, and vertical marks on both edges -->
+<div class="glow" aria-hidden="true"></div>
+<div class="edge edge-l" aria-hidden="true"><span class="e-name">HERCULEAN</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 ============ -->
+<header class="header" id="header">
+  <div class="wrap 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-herc">HERCULEAN</span></a>
+    <div class="nav-right">
+      <nav class="links" id="navLinks">
+        <a href="#rankings" data-sec="rankings">Rankings</a>
+        <a href="#leaderboard" data-sec="leaderboard">Leaderboard</a>
+        <a href="#replay" data-sec="replay">Replay</a>
+        <a href="#workflows" data-sec="workflows">Benchmark</a>
+        <a href="#resources" data-sec="resources">Cite</a>
+      </nav>
+      <a class="btn btn--sm" href="https://arxiv.org/abs/2605.14355" target="_blank" rel="noreferrer">Paper <span class="arrow">↗</span></a>
+    </div>
+  </div>
+</header>
+
+<main id="top">
+  <!-- ============ HERO ============ -->
+  <section class="hero" id="hero">
+    <!-- background: one thin gradient line per stock (real offline prices), drifting slowly left -->
+    <svg class="flow" id="flow" aria-hidden="true" preserveAspectRatio="none"></svg>
+    <div class="wrap hero-grid">
+      <div class="hero-copy">
+        <a class="award reveal-up" id="award" href="#rankings" style="transition-delay:.05s">
+          <span class="medal" id="lion" aria-hidden="true"></span>Agentic benchmark · <b id="awardN">5 architectures × 6 backbones</b> →
+        </a>
+        <h1 class="wordmark reveal-up" style="transition-delay:.15s">HERCULEAN</h1>
+        <p class="hero-sub reveal-up" style="transition-delay:.3s"><em>End-to-end</em>, <em>workflow-level</em> evaluation of financial&nbsp;agents.</p>
+        <p class="lead reveal-up" style="transition-delay:.4s">Every agent system, <span class="rotator" id="rotator"></span>, trades, hedges, writes market reports and audits filings under the same date-bounded environment, and is scored on its whole trajectory.</p>
+        <div class="stats reveal-up" id="stats" style="transition-delay:.5s"></div>
+        <div class="hero-ctas reveal-up" style="transition-delay:.6s">
+          <a class="btn btn--lg btn--trade magnetic" href="./play.html">Trade with an agent <svg class="dol" viewBox="0 0 18 18" aria-hidden="true"><circle cx="9" cy="9" r="8.5" fill="currentColor"/><text x="9" y="13.1" text-anchor="middle" font-size="11.5" font-weight="700" font-family="Inter,system-ui,sans-serif">$</text></svg></a>
+          <a class="btn btn--lg btn--ghost magnetic" href="https://arxiv.org/abs/2605.14355" target="_blank" rel="noreferrer">Read the paper</a>
+        </div>
+      </div>
+
+      <figure class="hero-viz tilt reveal-up" style="transition-delay:.55s">
+        <figcaption><span id="vizCap">Top 8 · Overall score</span><a href="#leaderboard">Full ranking →</a></figcaption>
+        <div class="podium" id="podium"></div>
+        <div class="hero-legend" id="heroLegend"></div>
+        <div class="hero-leaders" id="heroLeaders"></div>
+        <p class="hero-claim">No agent system is a <em>generalist</em>: every workflow has its own leader.</p>
+      </figure>
+    </div>
+    <!-- pixel Hercules: meets the Nemean lion and dons its skin, walking on the ticker's top line -->
+    <div class="scene press js-ground" id="herc-top" aria-hidden="true"></div>
+    <!-- after the fight, the lion-skin hero walks back right-to-left along the bottom price line -->
+    <div class="scene rev solo" id="herc-bot" aria-hidden="true"></div>
+    <!-- ticker: all agent systems by Overall, looping (pause on hover, click to open) -->
+    <div class="ticker" id="ticker" aria-label="Overall ranking ticker"><div class="ticker-track" id="tickerTrack"></div></div>
+  </section>
+
+  <!-- ============ 2b · RANKINGS ============ -->
+  <section class="section" id="rankings" style="padding-top:36px">
+    <div class="wrap">
+      <div class="rk-head" data-reveal>
+        <div class="rk-copy">
+          <span class="kicker">Rankings</span>
+          <h2 class="sec-h2">Rankings <em>reshuffle</em> across workflows</h2>
+        </div>
+        <div class="picker" id="picker" aria-label="Choose an agent system, an architecture or a backbone"></div>
+      </div>
+      <div class="rk-chart" id="rkChart" data-reveal>
+        <div class="rk-view" id="rkView" role="tablist" aria-label="Chart view"><span class="seg-pill"></span>
+          <button role="tab" aria-selected="true" data-v="flow"><svg viewBox="0 0 22 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M1 13 C6 13 7 3 11 3 S16 12 21 6"/><path d="M1 4 C6 4 8 12 12 12 S17 4 21 10" opacity=".55"/></svg><b>Rank flow</b><i class="go">›</i></button>
+          <button role="tab" aria-selected="false" data-v="field"><svg viewBox="0 0 22 16" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"><path d="M1 3h20M1 8h20M1 13h20" opacity=".55"/><circle cx="6" cy="3" r="2" fill="currentColor"/><circle cx="14" cy="8" r="2" fill="currentColor"/><circle cx="9" cy="13" r="2" fill="currentColor"/></svg><b>Field</b><i class="go">›</i></button>
+          <button role="tab" aria-selected="false" data-v="floor"><svg viewBox="0 0 22 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M4 4h12M2 8h16M6 12h10"/><circle cx="16" cy="4" r="1.8" fill="currentColor"/><circle cx="18" cy="8" r="1.8" fill="currentColor"/><circle cx="16" cy="12" r="1.8" fill="currentColor"/></svg><b>Floor → Overall</b><i class="go">›</i></button>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ============ 2 · LEADERBOARD ============ -->
+  <section class="section section--tint" id="leaderboard" style="padding-top:20px">
+    <div class="wrap">
+      <div class="sec-head lb-head" data-reveal>
+        <div>
+          <span class="kicker" id="lbKicker">Leaderboard</span>
+          <h2 class="sec-h2">Who <em>leads</em>, workflow by workflow</h2>
+          <p class="note" id="lbSub"></p>
+        </div>
+      </div>
+      <div class="controls" data-reveal>
+        <div class="arch-chips" id="archChips" aria-label="Show or hide an architecture"></div>
+        <div class="arch-chips model-chips" id="modelChips" aria-label="Show or hide a backbone"></div>
+      </div>
+
+      <div class="board" id="board" data-reveal>
+        <div class="lb-cols">
+          <span class="c-pos">#</span><span>Agent system</span><button type="button" class="sort-h on" id="colScore" data-v="Overall" title="Rank by Overall">Overall <i class="arr">↓</i></button>
+          <span class="c-cells" id="colCells"></span><span></span>
+        </div>
+        <div class="lb-rows" id="lbRows"></div>
+        <button class="lb-more" id="lbMore" type="button" aria-expanded="false"></button>
+      </div>
+      <div class="board-foot" data-reveal>
+        <p id="lbNote"></p>
+        <p class="keys"><span class="ring-key"></span>best score in each workflow. Darker purple = higher score. <span class="ramp"></span></p>
+      </div>
+    </div>
+  </section>
+
+  <!-- ============ 2c · REPLAY ============ -->
+  <section class="section" id="replay" style="padding-top:20px">
+    <div class="wrap">
+      <div class="sec-head rp-head" data-reveal>
+        <div><span class="kicker">Replay</span><h2 class="sec-h2">Watch an agent <em>trade</em> and <em>hedge</em></h2>
+          <p class="note" id="rpSub"></p></div>
+      </div>
+      <div class="controls rp-pick" data-reveal>
+        <div class="arch-chips" id="rpArch" aria-label="Architecture"></div>
+        <div class="arch-chips model-chips" id="rpModel" aria-label="Backbone"></div>
+        <div class="rp-ctl">
+          <div class="rp-tk rp-run" id="rpRun" role="tablist" aria-label="Run"></div>
+          <button class="btn btn--ghost btn--sm rp-again" id="rpAgain" type="button"><svg class="play-ico" viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="8" r="7.5" fill="currentColor"/><path d="M6.4 4.9v6.2l4.9-3.1z" fill="#fff"/></svg>Replay</button>
+        </div>
+      </div>
+      <div class="rp-grid" data-reveal>
+        <article class="rp-card" style="--c:#d6304a">
+          <div class="rp-top"><span class="rp-kick"><span class="wdot" style="--c:#d6304a"></span>Trading</span><div class="rp-tk" id="rpTk" role="tablist" aria-label="Ticker"></div></div>
+          <div class="rp-chart" id="rpTrade"></div>
+          <div class="rp-legend"><span><i class="a-B"></i>BUY</span><span><i class="a-S"></i>SELL</span><span><i class="a-H"></i>HOLD</span><span><i class="a-x"></i>no record (scored as HOLD)</span></div>
+          <div class="rp-foot" id="rpTradeFoot"></div>
+        </article>
+        <article class="rp-card" style="--c:#8a3ce0">
+          <div class="rp-top"><span class="rp-kick"><span class="wdot" style="--c:#8a3ce0"></span>Hedging</span><span class="rp-pair" id="rpPair"></span></div>
+          <div class="rp-chart" id="rpHedge"></div>
+          <div class="rp-legend"><span><i class="p-L"></i>Long-Short</span><span><i class="p-R"></i>Short-Long</span><span><i class="p-F"></i>Flat</span><span><i class="p-dia"></i>Close</span></div>
+          <div class="rp-foot" id="rpHedgeFoot"></div>
+        </article>
+      </div>
+    </div>
+  </section>
+
+  <!-- ============ 1 · WORKFLOWS ============ -->
+  <section class="section" id="workflows" style="padding-top:20px">
+    <div class="wrap">
+      <div class="sec-head" data-reveal>
+        <div><span class="kicker">Benchmark</span><h2 class="sec-h2 one-line"><em>Four</em> workflows, <em>one</em> benchmark</h2>
+          <p class="note recipe-note">Every workflow = <b>Environment</b> + <b>Interaction Protocol</b> + <b>Trajectory Evaluation</b>.</p></div>
+      </div>
+      <div class="wf-grid" id="wfGrid"></div>
+    </div>
+  </section>
+
+  <!-- ============ GAME CARD (links to play.html) ============ -->
+  <section class="cta-sec" id="play">
+    <div class="wrap">
+      <a class="cta-card game-card" href="./play.html" data-reveal>
+        <div class="mesh" aria-hidden="true"><i></i><i></i></div>
+        <div class="cta-text">
+          <span class="game-kick">Mini-game · Trading workflow</span>
+          <h3>Trade with an <em>agent</em></h3>
+          <p>Pick a stock, then choose which agent system trades it each day. Its real recorded decisions play out over the 61-day window. Can your picks beat Buy &amp; Hold?</p>
+        </div>
+        <svg class="game-k" id="gameK" aria-hidden="true"></svg>
+        <span class="btn btn--light btn--trade game-go">Trade <svg class="dol" viewBox="0 0 18 18" aria-hidden="true"><circle cx="9" cy="9" r="8.5" fill="currentColor"/><text x="9" y="13.1" text-anchor="middle" font-size="11.5" font-weight="700" font-family="Inter,system-ui,sans-serif">$</text></svg></span>
+      </a>
+    </div>
+  </section>
+
+  <!-- ============ 3 · CITE · RESOURCES · PARTNERS ============ -->
+  <section class="section" id="resources" style="padding-top:84px;padding-bottom:12px">
+    <div class="wrap">
+      <div class="sec-head" data-reveal>
+        <div><span class="kicker">Cite</span><h2 class="sec-h2">Cite <em class="herc">HERCULEAN</em><span class="medal cite-lion" id="citeLion" aria-hidden="true"></span></h2></div>
+      </div>
+      <div class="bib spot" data-reveal>
+        <div class="bib-top"><span class="res-h">Citation</span>
+          <div class="bib-actions"><a class="paper-link" href="https://arxiv.org/abs/2605.14355" target="_blank" rel="noreferrer">Paper · arXiv 2605.14355 <span>↗</span></a><button class="copy-btn" id="copyBib" type="button">Copy BibTeX</button></div></div>
+<pre id="bib">@misc{peng2026herculeanagenticbenchmarkfinancial,
+      title={Herculean: An Agentic Benchmark for Financial Intelligence}, 
+      author={Xueqing Peng and Zhuohan Xie and Yupeng Cao and Haohang Li and Lingfei Qian and Yan Wang and Vincent Jim Zhang and Huan He and Xuguang Ai and Linhai Ma and Ruoyu Xiang and Yueru He and Yi Han and Shuyao Wang and Yuqing Guo and Mingyang Jiang and Yilun Zhao and Youzhong Dong and Xiaoyu Wang and Yankai Chen and Ye Yuan and Qiyuan Zhang and Fuyuan Lyu and Haolun Wu and Yonghan Yang and Zichen Zhao and Yuyang Dai and Fan Zhang and Rania Elbadry and Ayesha Gull and Muhammad Usman Safder and Nuo Chen and Fengbin Zhu and Tianshi Cai and Zimu Wang and Polydoros Giannouris and Yuechen Jiang and Zhiwei Liu and Mohsinul Kabir and Yuyan Wang and Yixiang Zheng and Yangyang Yu and Weijin Liu and Wenbo Cao and Anke Xu and Peng Lu and Jerry Huang and Mingquan Lin and Prayag Tiwari and Yijia Zhao and Víctor Gutiérrez-Basulto and Xiao-Yang Liu and Kaleb E Smith and Jiahuan Pei and Arman Cohan and Jimin Huang and Yuehua Tang and Alejandro Lopez-Lira and Xi Chen and Xue Liu and Junichi Tsujii and Jian-Yun Nie and Sophia Ananiadou},
+      year={2026},
+      eprint={2605.14355},
+      archivePrefix={arXiv},
+      primaryClass={cs.AI},
+      url={https://arxiv.org/abs/2605.14355}, 
+}</pre>
+      </div>
+
+      <!-- partners: logos in order, then the remaining institutions as names (no panel) -->
+      <div class="partners" data-reveal>
+        <div class="p-logos">
+          <a href="https://thefin.ai/" target="_blank" rel="noreferrer" class="p-finai" data-tip="The Fin AI"><img src="./assets/finai-logo.png" alt="" /><span>The Fin AI</span></a>
+          <a href="https://deepkin.ai/" target="_blank" rel="noreferrer" class="p-pair p-dk" data-tip="DeepKin"><img src="./assets/deepkin-mark.svg" alt="" class="crest" /><span class="p-dkw">DeepKin</span></a>
+          <a href="https://www.nactem.ac.uk/" target="_blank" rel="noreferrer" data-tip="National Centre for Text Mining (NaCTeM)"><img src="./assets/nactem.png" alt="NaCTeM" /></a>
+          <a href="https://www.ufl.edu/" target="_blank" rel="noreferrer" data-tip="University of Florida (UF)"><img src="./assets/uf.svg" alt="University of Florida" /></a>
+        </div>
+        <div class="p-logos">
+          <a href="https://www.manchester.ac.uk/" target="_blank" rel="noreferrer" data-tip="The University of Manchester (UoM)"><img src="./assets/manchester.png" alt="The University of Manchester" /></a>
+          <a href="https://www.yale.edu/" target="_blank" rel="noreferrer" class="p-pair" data-tip="Yale University"><img src="./assets/yale-shield.svg" alt="" class="crest" /><img src="./assets/yale.svg" alt="Yale University" /></a>
+          <a href="https://www.mcgill.ca/" target="_blank" rel="noreferrer" class="p-pair" data-tip="McGill University"><img src="./assets/mcgill-coa.svg" alt="" class="crest" /><span class="p-word">McGill</span></a>
+          <a href="https://mbzuai.ac.ae/" target="_blank" rel="noreferrer" data-tip="Mohamed bin Zayed University of Artificial Intelligence (MBZUAI)"><img src="./assets/mbzuai.png" alt="Mohamed bin Zayed University of Artificial Intelligence" class="p-mbz" /></a>
+          <a href="https://www.nvidia.com/" target="_blank" rel="noreferrer" data-tip="NVIDIA"><img src="./assets/nvidia-full.svg" alt="NVIDIA" /></a>
+        </div>
+        <p class="p-names" id="pNames"></p>
+      </div>
+    </div>
+  </section>
+</main>
+
+<footer class="footer">
+  <div class="wrap footer-bottom">
+    <a class="brand sm" href="https://thefin.ai/" target="_blank" rel="noreferrer"><img src="./assets/finai-logo.png" alt="" />The Fin AI</a>
+    <span class="copy">© 2026 The Fin AI · HERCULEAN benchmark</span>
+    <a href="#top" class="to-top" aria-label="Back to top">↑</a>
+  </div>
+</footer>
+
+<script src="./data.js"></script>
+<script src="./app.js"></script>
+<script src="./herc_scene.js"></script>
+</body>
 </html>

play.css

@@ -0,0 +1,240 @@
+:root{--ink:#0f1528;--soft:#4f5a6e;--muted:#8a93a3;--line:rgba(74,38,130,.085);--paper:#fcfcfd;--paper-2:#f4f6fa;
+  --g:linear-gradient(90deg,#b40028,#7800f0);--up:#0f9d58;--dn:#d6304a;
+  --serif:'Newsreader',Georgia,serif;--sans:'Inter',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace;
+  --ring:0 0 0 1px rgba(74,38,130,.07),0 1px 2px rgba(40,20,80,.04),0 10px 28px -18px rgba(60,30,120,.18)}
+*{box-sizing:border-box}html,body{margin:0;height:100%}
+body{font-family:var(--sans);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;
+  background-image:radial-gradient(58vw 70vh at 0% 20%,rgba(180,0,40,.05),transparent 72%),radial-gradient(62vw 74vh at 100% 85%,rgba(120,0,240,.06),transparent 72%)}
+button{font:inherit;cursor:pointer}
+.up{color:var(--up)}.dn{color:var(--dn)}.muted{color:var(--muted)}
+.app{height:100vh;min-height:680px;display:grid;grid-template-rows:60px minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);row-gap:14px;padding:0 28px 18px}
+
+/* top bar */
+.top{display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--line)}
+.back{font:600 .8rem var(--sans);color:#fff;text-decoration:none;padding:8px 15px;border-radius:999px;background:var(--ink);box-shadow:0 6px 16px -8px rgba(15,21,40,.6);transition:transform .2s,box-shadow .2s}
+.back:hover{transform:translateX(-2px);box-shadow:0 8px 20px -8px rgba(15,21,40,.7)}
+.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:1.15rem;font-weight:500;color:var(--ink);text-decoration:none}
+.brand img{height:22px}.brand .sep{color:rgba(74,38,130,.25)}
+.brand b{font:700 .8rem 'Cinzel','Newsreader',Georgia,serif;letter-spacing:.1em;background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent}
+.title{font-family:var(--serif);font-size:1.15rem;margin-left:6px}
+.title em{font-style:italic;background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
+.who{display:flex;align-items:center;gap:12px;margin-left:auto}
+.sym-pill{font:600 .78rem var(--mono);padding:5px 11px;border-radius:999px;background:var(--paper-2)}
+.sym-pill small{font:400 .72rem var(--sans);color:var(--soft);margin-left:6px}
+.day{font:500 .8rem var(--mono);color:var(--soft)}.day b{color:var(--ink)}
+.ghost{border:0;background:none;font-size:.78rem;color:var(--soft);padding:5px 10px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line)}
+.ghost:hover{color:var(--ink)}
+.newg{border:0;font:600 .78rem var(--sans);color:#6a2bc4;padding:7px 13px;border-radius:999px;background:rgba(120,0,240,.07);box-shadow:inset 0 0 0 1px rgba(120,0,240,.22);transition:background .2s,color .2s}
+.newg:hover{background:rgba(120,0,240,.13);color:#5310b0}
+.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--g);color:#fff;font:500 1rem var(--serif)}
+.nm{display:flex;flex-direction:column;line-height:1.15}
+.nm small{font-size:.62rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}.nm b{font:500 1.05rem var(--serif)}
+
+/* layout */
+.main{display:grid;grid-template-columns:300px minmax(0,1fr) 340px;gap:18px;padding-top:2px;min-height:0}
+.chartcard{background:#fff;border-radius:18px;box-shadow:var(--ring);padding:14px 16px 8px;display:flex;flex-direction:column;min-height:0}
+.ch-head{display:flex;align-items:baseline;gap:12px;flex-wrap:nowrap;min-height:26px;white-space:nowrap;overflow:hidden}
+.ch-head .sym{font:600 1.15rem var(--sans)}.ch-head .px{font:600 1.15rem var(--mono)}
+.ch-head .chg{font:500 .85rem var(--mono)}.ch-head .ohlc{font:400 .72rem var(--mono);color:var(--muted)}.ch-head .ohlc b{color:var(--soft);font-weight:500}
+.ch-head .leg{margin-left:auto;display:flex;gap:12px;font-size:.7rem;color:var(--soft)}
+.ch-head .leg i{display:inline-block;width:14px;height:2px;margin-right:5px;vertical-align:3px}
+.ch-head .leg i.dash{height:0;border-top:1.5px dashed var(--muted)}
+#kline{display:block;width:100%;flex:1;min-height:0;cursor:crosshair}
+.ax{font:400 9.5px var(--mono);fill:var(--muted)}.gl{stroke:rgba(74,38,130,.07)}
+.cnew{transform-box:fill-box;transform-origin:center;animation:grow .45s cubic-bezier(.2,.8,.2,1)}
+@keyframes grow{from{transform:scaleY(0);opacity:0}}
+.mk{animation:pop .4s cubic-bezier(.3,1.6,.5,1)}@keyframes pop{from{opacity:0;transform:translateY(-6px)}}
+
+.side{display:flex;flex-direction:column;gap:12px;min-height:0}
+.card{background:#fff;border-radius:16px;box-shadow:var(--ring);padding:14px 16px}
+.kick{font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;gap:10px}
+.eq{display:flex;align-items:baseline;gap:10px;margin-top:6px}
+.eq b{font:500 2rem var(--serif);letter-spacing:-.02em}.eq span{font:600 .9rem var(--mono)}
+.eq .vs{color:var(--muted);font-weight:400}
+.kv{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
+.kv div{background:var(--paper-2);border-radius:10px;padding:7px 9px}
+.kv small{display:block;font-size:.6rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}.kv b{font:600 .9rem var(--mono)}
+
+.stand{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}
+.stand.wide{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:28px;height:206px;min-width:0}
+.st-left{display:flex;flex-direction:column;min-height:0;min-width:0}
+.st-right{min-width:0;border-left:1px solid var(--line);padding-left:24px}
+.st-gap{font:600 .8rem var(--mono)}
+.stand.wide .st-rank{font-size:1.5rem}
+.st-plot{flex:1;min-height:48px;margin-top:4px;overflow:hidden}
+.st-plot svg{position:relative}
+.stand .tb{margin-top:4px;font-size:.74rem}.stand .tr{grid-template-columns:34px minmax(0,1fr) 64px 70px;padding:2px 6px}
+.stand .nm2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.st-row{display:flex;justify-content:space-between;align-items:baseline}
+.st-rank{font:500 1.25rem var(--serif);background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent}
+.st-rank small{font:400 .72rem var(--mono);color:var(--muted);-webkit-text-fill-color:var(--muted)}
+.stand svg{display:block;margin-top:2px}
+.sx{font:500 8.5px var(--mono);fill:var(--muted)}.sx.you{fill:#7800f0;font-weight:600}
+.st-line{display:flex;justify-content:space-between;gap:8px;font-size:.72rem;color:var(--soft);margin-top:2px}
+.st-line b{color:var(--ink);font-weight:600}.st-line span:last-child{font:600 .72rem var(--mono);white-space:nowrap}
+.pick{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
+.pick button{display:inline-flex;align-items:center;gap:6px;border:0;background:#fff;box-shadow:0 0 0 1px rgba(74,38,130,.12);font:500 .74rem var(--sans);padding:4px 10px 4px 4px;border-radius:999px;color:var(--ink);transition:background .15s,color .15s,box-shadow .15s}
+.pick.m button{padding:4px 10px}
+.pick button:hover{box-shadow:0 0 0 1px rgba(120,0,240,.35)}
+.pick button.sel{background:var(--ink);color:#fff;box-shadow:none}
+.ini{display:inline-grid;place-items:center;flex:none;width:18px;height:18px;border-radius:50%;font:600 .46rem var(--mono);color:#0f1528}
+.go-row{display:flex;gap:8px;margin-top:12px}
+.go{flex:1;border:0;border-radius:12px;padding:11px;font:600 .9rem var(--sans);color:#fff;background:linear-gradient(90deg,#7a1036,#4a1a8c);display:flex;justify-content:center;gap:10px;align-items:center;transition:filter .2s,transform .1s}
+.go small{font-weight:400;opacity:.7}.go:hover{filter:brightness(1.15)}.go:active{transform:scale(.98)}
+.go:disabled,.auto:disabled{opacity:.4;cursor:default;filter:none}
+.auto{border:0;border-radius:12px;padding:0 14px;font:600 .78rem var(--sans);color:var(--ink);background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line)}
+.auto.on{background:var(--ink);color:#fff}
+.reveal{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-top:10px;padding:9px 11px;border-radius:10px;min-height:40px;font-size:.74rem;color:var(--soft);
+  background:linear-gradient(90deg,rgba(180,0,40,.05),rgba(120,0,240,.06))}
+.reveal b{color:var(--ink);font-size:.8rem}
+.reveal.flash{animation:flash .5s}@keyframes flash{from{background:rgba(120,0,240,.18)}}
+.act{font:600 .62rem var(--sans);letter-spacing:.06em;padding:2px 6px;border-radius:5px;text-align:center}
+.reveal .act{font-size:.72rem;padding:3px 8px}
+.act.B{color:#0b7a45;background:#e3f5eb}.act.S{color:#b4233a;background:#fdecee}.act.H{color:#4f5a6e;background:var(--paper-2)}
+.logbar{padding:12px 16px 12px;min-width:0}
+.tiles{display:flex;gap:6px;overflow-x:auto;margin-top:8px;padding:2px 2px 6px;scrollbar-width:thin;position:relative;
+  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent)}
+.tile{flex:none;width:112px;border-radius:10px;padding:6px 8px;background:var(--paper-2);font-size:.68rem;display:grid;gap:3px;cursor:default;transition:box-shadow .15s,background .15s}
+.tile:hover{background:#fff;box-shadow:0 0 0 1px rgba(120,0,240,.35)}
+.tile .t1,.tile .t2{display:flex;justify-content:space-between;align-items:center}
+.tile .t1{font-family:var(--mono);color:var(--muted);font-size:.62rem}
+.tile .t2 span:last-child{font:600 .72rem var(--mono)}
+.tile .t3{color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.tile.fut{background:none;outline:1px dashed rgba(74,38,130,.14);outline-offset:-1px;box-shadow:none;color:var(--muted)}
+.tile.fut .t2,.tile.fut .t3{visibility:hidden}
+.tile.now{outline:1.5px solid #7800f0;outline-offset:-1.5px;background:#fff}
+.tile.now .t2{visibility:visible;color:#7800f0;font-weight:600}
+.tile.new{animation:pop .35s}
+.tile.on{background:#fff;box-shadow:0 0 0 1.5px #7800f0}
+.log-body{flex:1;min-height:0;overflow:auto;margin-top:4px;scrollbar-width:thin}
+.row{display:grid;grid-template-columns:42px 44px 1fr 62px;gap:8px;align-items:center;font-size:.74rem;padding:7px 0;border-top:1px solid var(--line)}
+.row:first-child{border-top:0}.row.new{animation:pop .35s}
+.row .d{font-family:var(--mono);color:var(--muted)}
+.row .ag{color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.row .r{text-align:right;font-family:var(--mono)}
+.log .empty{font-size:.74rem;color:var(--muted);padding:10px 0}
+
+/* overlay (start / end) */
+.ov{position:fixed;inset:0;display:grid;place-items:center;background:rgba(246,245,250,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:20;opacity:0;pointer-events:none;transition:opacity .3s}
+.ov.on{opacity:1;pointer-events:auto}
+.ov-card{width:min(640px,92vw);background:#fff;border-radius:22px;box-shadow:var(--ring),0 30px 80px -30px rgba(60,30,120,.35);padding:28px 30px;transform:translateY(10px);transition:transform .35s}
+.ov.on .ov-card{transform:none}
+.ov-card .kick{justify-content:flex-start}
+.ov-card h2{font:500 2rem/1.15 var(--serif);margin:6px 0 4px;letter-spacing:-.01em}
+.ov-card h2 em{font-style:italic;background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
+.ov-card p{margin:6px 0 0;font-size:.86rem;color:var(--soft);line-height:1.5}
+.reroll{border:0;background:none;color:var(--muted);font-size:1rem;vertical-align:4px;padding:0 4px}.reroll:hover{color:#7800f0}
+.stocks{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}
+.stock{border:0;background:#fff;border-radius:14px;box-shadow:0 0 0 1px rgba(74,38,130,.12);padding:12px 12px 8px;text-align:left;transition:box-shadow .2s,transform .2s}
+.stock:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(120,0,240,.35),0 8px 20px -12px rgba(60,30,120,.3)}
+.stock.sel{box-shadow:0 0 0 2px #7800f0}
+.stock b{display:block;font:600 .95rem var(--mono)}.stock small{font-size:.7rem;color:var(--muted)}
+.stock svg{display:block;width:100%;height:34px;margin-top:6px}
+.rules{display:flex;gap:18px;margin-top:16px;font-size:.74rem;color:var(--soft)}
+.rules span{display:flex;gap:6px;align-items:baseline}.rules i{font-style:normal;font:600 .7rem var(--mono);color:#7800f0}
+.ov-actions{display:flex;gap:10px;margin-top:20px;align-items:center}
+.ov-actions .go{flex:none;padding:11px 22px}
+.ov-actions a,.ov-actions .ghost{font-size:.82rem}
+.ov-actions a{color:var(--soft);text-decoration:none;padding:7px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line)}
+.res{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}
+.res div{background:var(--paper-2);border-radius:12px;padding:10px 12px}
+.res small{display:block;font-size:.6rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
+.res b{font:600 1.05rem var(--mono)}.res em{display:block;font:400 .7rem var(--mono);color:var(--muted);font-style:normal;margin-top:2px}
+.rankline{margin-top:14px;padding:12px 14px;border-radius:12px;font-size:.84rem;color:var(--soft);background:linear-gradient(90deg,rgba(180,0,40,.05),rgba(120,0,240,.07))}
+.rankline b{color:var(--ink)}.rankline .big{font:500 1.6rem var(--serif);margin-right:6px;background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent}
+.rankline .dn{color:var(--dn)}
+.rk-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
+.tb{margin-top:8px;font-size:.78rem}
+.tr{display:grid;grid-template-columns:40px 1fr 72px 72px;gap:8px;align-items:center;padding:4px 6px;border-radius:8px}
+.tr span:nth-child(3),.tr span:nth-child(4){text-align:right;font-family:var(--mono)}
+.tr.th{font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
+.tr .rk{font-family:var(--mono);color:var(--muted)}.tr .nm2{display:flex;align-items:center;gap:6px;color:var(--ink)}
+.tr .nm2 small{color:var(--muted);font-size:.7rem}
+.tr.me{background:#fff;box-shadow:0 0 0 1.5px #7800f0}.tr.me .rk{color:#7800f0;font-weight:600}.tr.me .nm2{font-weight:600}
+.tr.gapr{display:block;text-align:center;color:var(--muted);padding:0;line-height:.8}
+.fav{margin-top:8px;font-size:.74rem;color:var(--soft)}
+
+.tip{position:fixed;z-index:30;pointer-events:none;background:var(--ink);color:#fff;font-size:.72rem;padding:6px 9px;border-radius:8px;opacity:0;transition:opacity .15s;white-space:nowrap}
+.tip.on{opacity:1}
+
+@media(max-width:1000px){
+  .app{height:auto;padding:0 16px 20px}.title,.brand{display:none}
+  .main{grid-template-columns:1fr}.chartcard{height:70vh}
+  .stocks{grid-template-columns:repeat(2,1fr)}.res{grid-template-columns:repeat(2,1fr)}
+}
+@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
+.stand .st-line{margin-top:6px}
+.ch-head .co{font-size:.78rem;color:var(--soft);margin-left:-8px}
+.dayblk{margin-left:auto;display:flex;align-items:center;gap:10px;font:500 .78rem var(--mono);color:var(--soft)}
+.dayblk b{color:var(--ink)}
+.prog{display:inline-block;width:90px;height:5px;border-radius:3px;background:var(--paper-2);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
+.prog i{display:block;height:100%;background:linear-gradient(90deg,#b40028,#7800f0);border-radius:3px;transition:width .4s}
+#kline .lg text{font:500 9.5px var(--sans);fill:var(--soft)}
+#kline .flag{font:600 9px var(--mono);fill:#fff}
+.ch-head .ohlc{font-size:.68rem}
+.dayblk{font-size:.74rem}.prog{width:70px}
+.side > .card:last-child{flex:1}
+/* standing as the left column */
+.main > .stand{display:flex;flex-direction:column;min-height:0;overflow:hidden}
+.main > .stand .st-row{margin-top:6px}
+.main > .stand .st-rank{font-size:1.6rem}
+.main > .stand .st-plot{flex:none;height:150px;margin-top:4px}
+.tb.full{flex:1;min-height:0;overflow:auto;margin-top:8px;scrollbar-width:thin;border-top:1px solid var(--line);padding-top:0}
+.tb.full .tr{grid-template-columns:30px minmax(0,1fr) 60px;padding:3px 4px;font-size:.72rem}
+.tb.full .tr.th{position:sticky;top:0;background:#fff;z-index:1;font-size:.56rem;border-radius:0;padding-top:6px;padding-bottom:5px;box-shadow:0 1px 0 var(--line)}
+.tb.full .tr .nm2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.tb.full .tr .ini{width:16px;height:16px;font-size:.42rem}
+.tb.full .gapr{display:none}
+#kline .ttag .t1{font:700 10px var(--mono);fill:#fff;letter-spacing:.04em}
+#kline .ttag .t1{font:600 10.5px var(--sans);fill:#fff}
+#kline .ttag .t2{font:500 8.5px var(--sans);fill:rgba(255,255,255,.75);letter-spacing:.04em}
+/* right column: richer reveal + P&L attribution */
+.reveal{flex-direction:column;align-items:stretch;gap:6px}
+.rv1{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
+.rv-pnl{font:600 .8rem var(--mono)}
+.rv2{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.66rem}
+.rv2 .muted{margin-right:auto}
+.rv-run{display:inline-flex;align-items:center;gap:3px;padding:2px 4px 2px 5px;border-radius:7px;background:#fff;opacity:.6}
+.rv-run i{font:500 .6rem var(--mono);font-style:normal;color:var(--muted)}
+.rv-run .act{font-size:.56rem;padding:1px 4px}
+.rv-run.drawn{opacity:1;box-shadow:0 0 0 1.5px #7800f0}
+.act.na{color:var(--muted);background:var(--paper-2)}
+.side > .card:last-child{flex:1}
+.attr{display:flex;flex-direction:column;min-height:0;overflow:hidden}
+.at-h,.at-r{display:grid;grid-template-columns:minmax(0,1.1fr) 64px minmax(0,1fr) 56px;gap:8px;align-items:center;white-space:nowrap}
+.at-h{margin-top:8px;font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
+.at-h span:nth-child(2),.at-h span:last-child{text-align:right}
+.at-body{flex:1;min-height:0;overflow:auto;scrollbar-width:thin}
+.at-r{padding:5px 0;border-top:1px solid var(--line);font-size:.72rem}
+.at-n{display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden}
+.at-n .ini{width:17px;height:17px;font-size:.44rem;flex:none}
+.at-d{font-family:var(--mono);color:var(--muted);text-align:right;font-size:.66rem}
+.at-bar{position:relative;height:8px;background:linear-gradient(90deg,transparent calc(50% - .5px),rgba(74,38,130,.18) calc(50% - .5px),rgba(74,38,130,.18) calc(50% + .5px),transparent calc(50% + .5px))}
+.at-bar i{position:absolute;top:0;bottom:0;border-radius:2px}
+.at-bar i.p{left:50%;background:#0f9d58}.at-bar i.n{right:50%;background:#d6304a}
+.at-v{font:600 .7rem var(--mono);text-align:right}
+/* right column: roomier top two cards */
+.side{gap:14px}
+.side > .card:not(.attr){padding:18px 20px}
+.side .eq{margin-top:10px}
+.side .kv{gap:10px;margin-top:14px}
+.side .kv div{padding:9px 11px}
+.pk-l{margin-top:12px;font-size:.6rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
+.side .pick{gap:6px 6px;margin-top:6px}
+.side .go-row{margin-top:16px}
+.side .reveal{margin-top:12px;padding:11px 13px}
+
+/* ---------- narrow screens (≤1000px): one column — chart, then the controls, then the standing. Desktop is untouched. ---------- */
+@media (max-width:1000px){
+  .app{height:auto;min-height:0;display:flex;flex-direction:column;gap:14px;padding:0 14px 20px}
+  .main{display:flex;flex-direction:column;gap:14px}
+  .main > .chartcard{order:1;height:62vh;min-height:380px}
+  .main > .side{order:2}
+  .main > .stand{order:3;max-height:420px}
+  .ch-head{flex-wrap:wrap;white-space:normal;row-gap:2px}
+  .ch-head .ohlc{flex-basis:100%}
+  .who .nm{display:none}
+  .rules{flex-wrap:wrap;row-gap:6px}
+  .ov-card{padding:22px 20px;max-height:92vh;overflow:auto}
+  .logbar .kick span:last-child{display:none}
+}

play.html

@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Trade with an agent · HERCULEAN</title>
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&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;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
+<link rel="icon" href="./assets/finai-logo.png" />
+<link rel="stylesheet" href="./play.css" />
+</head>
+<body>
+<div class="app">
+  <header class="top">
+    <a class="back" href="./index.html">← Leaderboard</a>
+    <a class="brand" href="./index.html"><img src="./assets/finai-logo.png" alt="">The Fin AI<span class="sep">/</span><b>HERCULEAN</b></a>
+    <div class="who">
+      <button class="newg" id="newBtn" title="Start over">↻ New game</button>
+      <div class="avatar" id="ava"></div><div class="nm"><small>Trader</small><b id="trader"></b></div>
+    </div>
+  </header>
+
+  <main class="main">
+    <section class="card stand" id="stand"></section>
+
+    <section class="chartcard">
+      <div class="ch-head" id="head"></div>
+      <svg id="kline" aria-label="Price chart"></svg>
+    </section>
+
+    <aside class="side">
+      <div class="card">
+        <div class="kick"><span>Portfolio · $100k start</span><span>you vs B&amp;H</span></div>
+        <div class="eq"><b id="eqv">$100,000</b><span id="eqr"></span></div>
+        <div class="kv" id="kv"></div>
+      </div>
+      <div class="card">
+        <div class="kick"><span>Who trades today?</span><span id="dayK"></span></div>
+        <div class="pk-l">Architecture</div>
+        <div class="pick" id="arch"></div>
+        <div class="pk-l">Backbone</div>
+        <div class="pick m" id="model"></div>
+        <div class="go-row">
+          <button class="go" id="goBtn">Trade today <small>▶ reveal the call</small></button>
+          <button class="auto" id="autoBtn" title="Keep this pick and play the remaining days">Auto ▸▸</button>
+        </div>
+        <div class="reveal" id="rev"><span class="muted">Pick an architecture and a backbone, then trade. One of its 3 runs is drawn at random.</span></div>
+      </div>
+      <div class="card attr" id="attr"></div>
+    </aside>
+  </main>
+
+
+  <section class="card logbar">
+    <div class="kick"><span>Trade log · day by day</span><span>system · run · action · P&amp;L</span></div>
+    <div class="tiles" id="log"></div>
+  </section>
+</div>
+
+<!-- start / end overlay -->
+<div class="ov" id="ov">
+  <div class="ov-card" id="ovCard"></div>
+</div>
+
+<div class="tip" id="tip"></div>
+<script src="./data.js"></script>
+<script src="./play.js"></script>
+</body>
+</html>

play.js

@@ -0,0 +1,351 @@
+/* HERCULEAN · Trade with an agent.
+   Each day the player picks an agent system (architecture × backbone); one of its three recorded runs is drawn
+   (only among runs that committed that day; HOLD if none did) and its real Trading decision is executed.
+   Scoring follows analysis/score_runs.py: BUY/SELL/HOLD -> +1/-1/0, held from the open of the day to the next
+   open (last day: open to close), adjusted prices, no costs. SR = sqrt(252)·mean/std of daily returns. */
+(() => {
+  const H = window.HERC, OH = H.ohlc, HIST = OH.start, N = H.dates.length, $ = id => document.getElementById(id);
+  const AC = { ReAct: '#2a78d6', 'Claude Code': '#eb6834', Codex: '#1baf7a', Hermes: '#eda100', OpenClaw: '#e87ba4' };
+  const INI = { ReAct: 'RA', 'Claude Code': 'CC', Codex: 'CX', Hermes: 'HM', OpenClaw: 'OC' };
+  const MS = { 'Claude Sonnet 5': 'Sonnet 5', 'DeepSeek-V3.2': 'DS-V3.2', 'DeepSeek-V4-Pro': 'DS-V4-Pro', 'Qwen3.5-9B': 'Qwen-9B', 'Qwen3.5-4B': 'Qwen-4B' };
+  const CO = { MSFT: 'Microsoft', TSLA: 'Tesla', AAPL: 'Apple', NVDA: 'NVIDIA' };
+  const NAMES = ['Perseus', 'Theseus', 'Atalanta', 'Achilles', 'Odysseus', 'Penelope', 'Jason', 'Medea', 'Orpheus', 'Eurydice',
+    'Andromeda', 'Cassandra', 'Hector', 'Ajax', 'Electra', 'Antigone', 'Ariadne', 'Bellerophon', 'Castor', 'Pollux', 'Daedalus',
+    'Icarus', 'Hippolyta', 'Iphigenia', 'Nestor', 'Telemachus', 'Pandora', 'Psyche', 'Calypso', 'Circe', 'Paris', 'Helen'];
+  const ACT = { B: 'BUY', S: 'SELL', H: 'HOLD' }, POS = { B: 1, S: -1, H: 0 };
+  const short = m => MS[m] || m, sysName = (a, m) => `${a} · ${short(m)}`;
+  const pct = (v, d = 2) => (v >= 0 ? '+' : '−') + Math.abs(v * 100).toFixed(d) + '%';
+  const money = v => '$' + Math.round(v).toLocaleString('en-US');
+  const cls = v => v > 0 ? 'up' : v < 0 ? 'dn' : '';
+  const pickRand = a => a[Math.floor(Math.random() * a.length)];
+
+  let S;                                   // game state
+  let arch = 'Hermes', model = 'DeepSeek-V4-Pro', name = pickRand(NAMES), sym = 'MSFT', autoT = null, hover = null;
+
+  // per-day returns on the chosen stock (open -> next open; last day open -> close)
+  const returns = tk => H.dates.map((_, d) => { const b = OH.bars[tk][HIST + d], nx = OH.bars[tk][HIST + d + 1]; return (nx ? nx[0] : b[3]) / b[0] - 1; });
+  const metrics = (rets) => {
+    let w = 1, peak = 1, mdd = 0; for (const r of rets) { w *= 1 + r; peak = Math.max(peak, w); mdd = Math.max(mdd, 1 - w / peak); }
+    const n = rets.length, mu = n ? rets.reduce((p, q) => p + q, 0) / n : 0;
+    const sd = n > 1 ? Math.sqrt(rets.reduce((p, q) => p + (q - mu) ** 2, 0) / (n - 1)) : 0;
+    return { cr: w - 1, sr: sd > 0 ? Math.sqrt(252) * mu / sd : 0, mdd };
+  };
+
+  // the 30 systems on this stock: mean wealth over their three runs after each day (missing decision = flat)
+  function field(tk, ret) {
+    return H.agents.flatMap(a => H.models.map(m => {
+      const runs = (H.runs.trading[`${a}|${m}|${tk}`] || []).filter(Boolean), w = new Array(N + 1).fill(0);
+      runs.forEach(r => { let x = 1; w[0] += 1; for (let d = 0; d < N; d++) { x *= 1 + (POS[r[d]] || 0) * ret[d]; w[d + 1] += x; } });
+      return { a, m, w: w.map(v => v / (runs.length || 1)) };
+    }));
+  }
+  // where the player stands after day d (CR, ties go to the player)
+  function standing(d) {
+    const you = S.eq[d] - 1, all = S.field.map(f => ({ a: f.a, m: f.m, cr: f.w[d] - 1 })).sort((p, q) => q.cr - p.cr);
+    const rank = 1 + all.filter(f => f.cr > you + 1e-12).length;
+    return { you, all, rank, n: all.length + 1, top: all[0], bh: S.bh[d] - 1 };
+  }
+  // the field on one CR axis, one lane per architecture (dots = backbones); you = the purple line and dot
+  function strip(st, W, Hs) {
+    const xs = [...st.all.map(f => f.cr), st.you, st.bh, 0], lo = Math.min(...xs), hi = Math.max(...xs), span = hi - lo || .01, pl = 26, pr = 10;
+    const X = v => pl + (v - lo) / span * (W - pl - pr), top = 16, axY = Hs - 14, lh = (axY - top - 2) / H.agents.length;
+    const LY = a => top + (H.agents.indexOf(a) + .5) * lh, r = Math.max(2.8, Math.min(4.6, lh * .36));
+    let g = '';
+    H.agents.forEach((a, i) => g += `<line x1="${pl}" x2="${W - pr}" y1="${LY(a)}" y2="${LY(a)}" stroke="rgba(74,38,130,${i % 2 ? .05 : .09})"/>` +
+      `<text x="${pl - 6}" y="${LY(a) + 3}" text-anchor="end" class="sx" style="fill:${AC[a]};font-weight:600">${INI[a]}</text>`);
+    g += `<line x1="${pl}" x2="${W - pr}" y1="${axY}" y2="${axY}" stroke="rgba(74,38,130,.18)"/>`;
+    const lab = [[lo, pct(lo, 1), 'start'], [hi, pct(hi, 1), 'end'], [0, '0%', 'middle'], [st.bh, 'B&H', 'middle']], used = [];
+    lab.reverse().forEach(([v, t, an]) => { const x = X(v); if (used.some(u => Math.abs(u - x) < 30)) return; used.push(x);
+      g += `<text x="${x}" y="${Hs - 2}" text-anchor="${an}" class="sx"${t === 'B&H' ? ' style="fill:#4f5a6e"' : ''}>${t}</text>`; });
+    g += `<line x1="${X(0)}" x2="${X(0)}" y1="${top}" y2="${axY}" stroke="rgba(74,38,130,.14)"/>`;
+    g += `<line x1="${X(st.bh)}" x2="${X(st.bh)}" y1="${top}" y2="${axY + 2}" stroke="#8a93a3" stroke-dasharray="2 2"/>`;
+    st.all.forEach(f => g += `<circle cx="${X(f.cr)}" cy="${LY(f.a)}" r="${r}" fill="${AC[f.a]}" opacity=".7"><title>${sysName(f.a, f.m)} · ${pct(f.cr)}</title></circle>`);
+    const t = st.top;
+    g += `<circle cx="${X(t.cr)}" cy="${LY(t.a)}" r="${r + 2}" fill="none" stroke="${AC[t.a]}" stroke-width="1.2"/><text x="${Math.min(X(t.cr), W - pr)}" y="${top - 5}" text-anchor="end" class="sx">#1</text>`;
+    const yx = X(st.you);
+    g += `<line x1="${yx}" x2="${yx}" y1="${top - 2}" y2="${axY}" stroke="#7800f0" stroke-width="1.6"/><circle cx="${yx}" cy="${top - 2}" r="4" fill="#7800f0" stroke="#fff" stroke-width="1.5"><title>you · ${pct(st.you)}</title></circle>` +
+      `<text x="${yx + (yx > W - 40 ? -8 : 8)}" y="${top + 1}" text-anchor="${yx > W - 40 ? 'end' : 'start'}" class="sx you">you</text>`;
+    return `<svg viewBox="0 0 ${W} ${Hs}" width="100%" height="${Hs}" style="overflow:visible">${g}</svg>`;
+  }
+
+  // ranking rows: top 3, then the player's neighbourhood (`around` rows either side)
+  function rankTable(st, around, compact) {
+    const rank = st.rank, rows = st.all.map((f, i) => ({ ...f, r: i + 1 + (i + 1 >= rank ? 1 : 0) }));
+    rows.splice(rank - 1, 0, { you: true, cr: st.you, r: rank });
+    const keep = new Set([0, 1, 2]); for (let k = -around; k <= around; k++) keep.add(rank - 1 + k);
+    let tb = '', prev = -1;
+    rows.forEach((f, i) => { if (!keep.has(i)) return; if (prev >= 0 && i > prev + 1) tb += '<div class="tr gapr">⋯</div>'; prev = i;
+      tb += `<div class="tr${f.you ? ' me' : ''}"><span class="rk">#${f.r}</span><span class="nm2">${f.you ? `${name} <small>your picks</small>` : `<span class="ini" style="background:${AC[f.a]}${f.a === 'ReAct' ? ';color:#fff' : ''}">${INI[f.a]}</span>${sysName(f.a, f.m)}`}</span>` +
+        `<span class="${cls(f.cr)}">${pct(f.cr)}</span>${compact ? '' : `<span class="muted">${i === 0 ? '—' : ((f.cr - rows[0].cr) * 100).toFixed(2) + ' pp'}</span>`}</div>`; });
+    return tb;
+  }
+
+  function newGame(tk) {
+    sym = tk; stopAuto();
+    S = { d: 0, ret: returns(tk), log: [], eq: [1], bh: [1], picks: {} }; S.field = field(tk, S.ret);
+    $('trader').textContent = name; $('ava').textContent = name[0];
+    $('rev').innerHTML = '<span class="muted">Pick an architecture and a backbone, then trade. One of its 3 runs is drawn at random.</span>';
+    renderAll();
+  }
+
+  // ---------- one trading day ----------
+  function step() {
+    if (!S || S.d >= N) return;
+    const d = S.d, runs = H.runs.trading[`${arch}|${model}|${sym}`] || ['', '', ''];
+    const ok = [0, 1, 2].filter(r => runs[r] && runs[r][d] && runs[r][d] !== '-');
+    const r = ok.length ? pickRand(ok) : Math.floor(Math.random() * 3);
+    const a = ok.length ? runs[r][d] : 'H', miss = !ok.length;
+    const pnl = POS[a] * S.ret[d];
+    S.eq.push(S.eq[d] * (1 + pnl)); S.bh.push(S.bh[d] * (1 + S.ret[d]));
+    S.log.push({ d, a, arch, model, run: r + 1, pnl, miss });
+    const k = `${arch}|${model}`; S.picks[k] = (S.picks[k] || 0) + 1;
+    S.d++;
+    // the three recorded runs of this system on this day; the drawn one is outlined
+    const calls = [0, 1, 2].map(i => { const c = runs[i] && runs[i][d]; return !c || c === '-' ? null : c; });
+    $('rev').innerHTML = `<div class="rv1"><b>${sysName(arch, model)}</b><span class="rv-pnl ${cls(pnl)}">${miss ? 'HOLD · no commit' : pct(pnl)}</span></div>` +
+      `<div class="rv2"><span class="muted">${H.dates[d].slice(5)} · its 3 runs</span>${calls.map((c, i) => `<span class="rv-run${i === r ? ' drawn' : ''}"><i>r${i + 1}</i>${c ? `<span class="act ${c}">${ACT[c]}</span>` : '<span class="act na">—</span>'}</span>`).join('')}</div>`;
+    const rv = $('rev'); rv.classList.remove('flash'); void rv.offsetWidth; rv.classList.add('flash');
+    renderAll(true);
+    if (S.d >= N) { stopAuto(); setTimeout(endCard, 700); }
+  }
+  function stopAuto() { clearInterval(autoT); autoT = null; $('autoBtn').classList.remove('on'); $('autoBtn').textContent = 'Auto ▸▸'; }
+
+  // ---------- render ----------
+  function renderAll(fresh) { renderSide(fresh); draw(fresh); }
+
+  function renderSide(fresh) {
+    const done = S.d >= N, eq = S.eq[S.d], bh = S.bh[S.d], m = metrics(S.log.map(l => l.pnl));
+    $('dayK').textContent = done ? 'window closed' : `Day ${S.d + 1} · ${H.dates[S.d].slice(5)}`;
+    $('eqv').textContent = money(1e5 * eq);
+    $('eqr').innerHTML = `<span class="${cls(eq - 1)}">${pct(eq - 1)}</span> <span class="vs">vs</span> <span class="${cls(bh - 1)}">${pct(bh - 1)}</span>`;
+    const last = S.log[S.log.length - 1];
+    const pos = !last ? 'Flat' : { B: 'Long', S: 'Short', H: 'Flat' }[last.a];
+    $('kv').innerHTML = [['Position', pos], ['Max DD', (m.mdd * 100).toFixed(2) + '%'], ['Sharpe', S.log.length > 1 ? m.sr.toFixed(2) : '—']]
+      .map(([k, v]) => `<div><small>${k}</small><b>${v}</b></div>`).join('');
+    // P&L attribution: each picked system's days, win days and summed daily P&L (pp)
+    const by = {};
+    S.log.forEach(l => { const k = `${l.arch}|${l.model}`, b = by[k] || (by[k] = { a: l.arch, m: l.model, days: 0, win: 0, pnl: 0 }); b.days++; b.pnl += l.pnl; if (l.pnl > 0) b.win++; });
+    const ag = Object.values(by).sort((p, q) => q.pnl - p.pnl), amax = Math.max(.002, ...ag.map(b => Math.abs(b.pnl)));
+    $('attr').innerHTML = `<div class="kick"><span>P&amp;L attribution</span><span>by agent system</span></div>` + (ag.length
+      ? `<div class="at-h"><span>agent system</span><span>days · won</span><span>P&amp;L</span></div><div class="at-body">` + ag.map(b => `<div class="at-r" title="${b.a} · ${b.m}: ${b.days} days, ${b.win} winning, sum of daily P&L ${pct(b.pnl)}">` +
+        `<span class="at-n"><span class="ini" style="background:${AC[b.a]}${b.a === 'ReAct' ? ';color:#fff' : ''}">${INI[b.a]}</span>${short(b.m)}</span>` +
+        `<span class="at-d">${b.days} · ${b.win}</span>` +
+        `<span class="at-bar"><i class="${b.pnl >= 0 ? 'p' : 'n'}" style="width:${Math.abs(b.pnl) / amax * 50}%"></i></span>` +
+        `<span class="at-v ${cls(b.pnl)}">${pct(b.pnl)}</span></div>`).join('') + '</div>'
+      : '<p class="st-line muted" style="margin-top:8px;white-space:normal">Which of your picks made or lost money will show here.</p>');
+    const st = standing(S.d), gap = (st.you - st.top.cr) * 100;
+    $('stand').innerHTML = `<div class="kick"><span>Standing · ${sym} CR</span><span>mean of 3 runs</span></div>` +
+      `<div class="st-row"><span class="st-rank">${S.d ? `#${st.rank}<small> / ${st.n}</small>` : '<small>—</small>'}</span>` +
+      (S.d ? `<span class="st-gap ${st.rank === 1 ? 'up' : 'dn'}">${st.rank === 1 ? '+' + ((st.you - st.all[0].cr) * 100).toFixed(2) + ' pp ahead' : '−' + Math.abs(gap).toFixed(2) + ' pp to #1'}</span>` : '') + '</div>' +
+      (S.d ? '<div class="st-plot" id="stPlot"></div>' +
+        `<div class="tb full" id="stList"><div class="tr th"><span>#</span><span>agent system</span><span>CR</span></div>${rankTable(st, 99, true)}</div>`
+        : `<p class="st-line muted" style="margin-top:10px;white-space:normal">Trade to enter the ranking of the 30 agent systems (CR, mean of 3 runs, up to the same day).</p>`);
+    const me = document.querySelector('#stList .tr.me'), li = $('stList');
+    // centre the player's row in the list (positions measured relative to the list itself)
+    if (me && li) li.scrollTop = Math.max(0, me.getBoundingClientRect().top - li.getBoundingClientRect().top + li.scrollTop - (li.clientHeight - me.offsetHeight) / 2);
+    lastSt = S.d ? st : null; plotStand(); requestAnimationFrame(plotStand);
+    $('arch').innerHTML = H.agents.map(a => `<button data-a="${a}" class="${a === arch ? 'sel' : ''}"><span class="ini" style="background:${AC[a]}${a === 'ReAct' ? ';color:#fff' : ''}">${INI[a]}</span>${a}</button>`).join('');
+    $('model').innerHTML = H.models.map(x => `<button data-m="${x}" class="${x === model ? 'sel' : ''}" title="${x}">${short(x)}</button>`).join('');
+    $('goBtn').disabled = done; $('autoBtn').disabled = done;
+    $('log').innerHTML = H.dates.map((dt, d) => {
+      const l = S.log[d];
+      if (!l) return `<div class="tile fut${d === S.d ? ' now' : ''}" data-d="${d}"><div class="t1"><span>${dt.slice(5)}</span><span>D${d + 1}</span></div><div class="t2"><span>${d === S.d ? 'today' : ''}</span><span></span></div><div class="t3">·</div></div>`;
+      return `<div class="tile${fresh && d === S.d - 1 ? ' new' : ''}" data-d="${d}" title="${l.arch} · ${l.model} · run ${l.run}${l.miss ? ' · no commit, scored as HOLD' : ''}"><div class="t1"><span>${dt.slice(5)}</span><span>D${d + 1}</span></div>` +
+        `<div class="t2"><span class="act ${l.a}">${ACT[l.a]}</span><span class="${cls(l.pnl)}">${pct(l.pnl)}</span></div><div class="t3">${INI[l.arch]} · ${short(l.model)} · r${l.run}${l.miss ? ' · –' : ''}</div></div>`;
+    }).join('');
+    const tl = $('log'), cur = tl.children[Math.min(S.d, N - 1)];
+    if (cur) tl.scrollTo({ left: Math.max(0, cur.offsetLeft - tl.clientWidth + cur.offsetWidth * 2.5), behavior: 'auto' });
+  }
+
+  function head(i) {
+    const b = OH.bars[sym], cur = b[i], prev = b[i - 1], chg = cur[3] / prev[3] - 1, d = Math.min(S.d, N), done = S.d >= N;
+    const dt = new Date((done ? H.dates[N - 1] : H.dates[S.d]) + 'T12:00:00Z').toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric', year: 'numeric', timeZone: 'UTC' });
+    $('head').innerHTML = `<span class="sym">${sym}</span><span class="co">${CO[sym]}</span><span class="px">${cur[3].toFixed(2)}</span><span class="chg ${cls(chg)}">${pct(chg)}</span>` +
+      `<span class="ohlc">${OH.dates[i]} · O <b>${cur[0].toFixed(2)}</b> H <b>${cur[1].toFixed(2)}</b> L <b>${cur[2].toFixed(2)}</b> C <b>${cur[3].toFixed(2)}</b> · Vol <b>${cur[4].toFixed(1)}M</b></span>` +
+''; void dt; void d; void done;
+  }
+
+  // the standing plot takes whatever height the card has left; redraw when that changes (fonts, resize)
+  let lastSt = null;
+  function plotStand() {
+    const sp = $('stPlot'); if (!sp || !lastSt) return;
+    sp.innerHTML = ''; sp.innerHTML = strip(lastSt, sp.clientWidth || 328, Math.max(48, Math.min(170, sp.clientHeight)));
+  }
+  if (window.ResizeObserver) new ResizeObserver(() => plotStand()).observe($('stand'));
+  if (document.fonts) { document.fonts.ready.then(() => { plotStand(); S && draw(); }); document.fonts.addEventListener('loadingdone', () => { plotStand(); S && draw(); }); }
+
+  let G = null;   // geometry for hover
+  function draw(fresh) {
+    const svg = $('kline'), W = svg.clientWidth, Hh = svg.clientHeight; if (!W || !Hh) return;
+    svg.setAttribute('viewBox', `0 0 ${W} ${Hh}`);
+    const bars = OH.bars[sym], total = HIST + N, L = 6, R = 58, cw = (W - L - R) / total, X = i => L + (i + .5) * cw;
+    const nShown = HIST + S.d, shown = bars.slice(0, nShown);
+    const pTop = 20, pH = Hh * .5, aTop = pTop + pH + 10, aH = 13, vTop = aTop + aH + 8, vH = Hh * .08, eTop = vTop + vH + 22, eH = Hh - eTop - 46, tY = Hh - 16;
+    // price scale from what has been revealed only (no peeking at the future)
+    let lo = Math.min(...shown.map(b => b[2])), hi = Math.max(...shown.map(b => b[1])); const pad = (hi - lo) * .12;
+    lo -= pad; hi += pad;
+    const Y = v => pTop + (1 - (v - lo) / (hi - lo)) * pH, vmax = Math.max(...shown.map(b => b[4]));
+    let g = '';
+    for (let t = 0; t <= 4; t++) { const v = lo + t / 4 * (hi - lo); g += `<line class="gl" x1="${L}" x2="${W - R}" y1="${Y(v)}" y2="${Y(v)}"/><text class="ax" x="${W - R + 6}" y="${Y(v) + 3}">${v.toFixed(0)}</text>`; }
+    const x0 = X(HIST) - cw / 2, xn = X(nShown) - cw / 2;
+    g += `<rect x="${x0}" y="${pTop}" width="${Math.max(0, xn - x0)}" height="${eTop + eH - pTop}" fill="rgba(120,0,240,.028)"/>`;
+    if (S.d < N) g += `<rect x="${xn}" y="${pTop}" width="${W - R - xn}" height="${eTop + eH - pTop}" fill="url(#fut)"/>`;
+    g += `<text class="ax" x="${x0 + 3}" y="${pTop + 10}" fill="#7a1fb4">Jan 2 · window opens</text>`;
+    // legends inside the panels
+    g += `<g class="lg"><line x1="${L + 2}" x2="${L + 16}" y1="${pTop - 9}" y2="${pTop - 9}" stroke="#eda100" stroke-width="1.6"/><text x="${L + 20}" y="${pTop - 6}">MA5</text>` +
+      `<line x1="${L + 52}" x2="${L + 66}" y1="${pTop - 9}" y2="${pTop - 9}" stroke="#7800f0" stroke-width="1.6"/><text x="${L + 70}" y="${pTop - 6}">MA20</text>` +
+      `<path d="M${L + 110},${pTop - 6} l4,-7 l4,7z" fill="#0f9d58"/><text x="${L + 122}" y="${pTop - 6}">agent BUY</text><path d="M${L + 180},${pTop - 13} l4,7 l4,-7z" fill="#d6304a"/><text x="${L + 192}" y="${pTop - 6}">agent SELL</text></g>`;
+    // daily decision strip (as in the Trading replay): one cell per window day
+    g += `<text class="ax" x="${x0 - 6}" y="${aTop + 10}" text-anchor="end">ACTION</text>`;
+    const AF = { B: '#0f9d58', S: '#d6304a', H: '#d9d7e3' };
+    for (let d = 0; d < N; d++) {
+      const l = S.log[d], cx0 = X(HIST + d) - cw / 2 + .6, cwi = Math.max(1, cw - 1.2);
+      if (l) g += `<rect${fresh && d === S.d - 1 ? ' class="cnew"' : ''} x="${cx0}" y="${aTop}" width="${cwi}" height="${aH}" rx="1.5" fill="${l.miss ? 'url(#miss)' : AF[l.a]}"/>`;
+      else g += `<rect x="${cx0}" y="${aTop}" width="${cwi}" height="${aH}" rx="1.5" fill="#fff" stroke="${d === S.d ? '#7800f0' : 'rgba(74,38,130,.14)'}" stroke-width="${d === S.d ? 1.4 : .8}"/>`;
+    }
+    // moving averages
+    [[5, '#eda100'], [20, '#7800f0']].forEach(([n, c]) => {
+      let p = ''; for (let i = n - 1; i < nShown; i++) { const v = bars.slice(i - n + 1, i + 1).reduce((s, b) => s + b[3], 0) / n; p += (p ? 'L' : 'M') + X(i).toFixed(1) + ',' + Y(v).toFixed(1); }
+      g += `<path d="${p}" fill="none" stroke="${c}" stroke-width="1.2" opacity=".75"/>`;
+    });
+    // candles + volume
+    const w = Math.max(1.5, cw * .62);
+    shown.forEach((b, i) => {
+      const [o, h, l, c, v] = b, up = c >= o, col = up ? '#0f9d58' : '#d6304a', nw = fresh && i === nShown - 1 ? ' class="cnew"' : '';
+      g += `<g${nw}><line x1="${X(i)}" x2="${X(i)}" y1="${Y(h)}" y2="${Y(l)}" stroke="${col}"/><rect x="${X(i) - w / 2}" y="${Y(Math.max(o, c))}" width="${w}" height="${Math.max(1, Math.abs(Y(o) - Y(c)))}" fill="${up ? '#fff' : col}" stroke="${col}"/></g>`;
+      g += `<rect${nw} x="${X(i) - w / 2}" y="${vTop + vH - v / vmax * vH}" width="${w}" height="${v / vmax * vH}" fill="${col}" opacity=".35"/>`;
+    });
+    // the agents' calls
+    S.log.forEach((l, k) => {
+      const i = HIST + l.d, b = bars[i], nw = fresh && k === S.log.length - 1 ? ' class="mk"' : '';
+      if (l.a === 'B') g += `<path${nw} d="M${X(i)},${Y(b[2]) + 5} l4,7 h-8z" fill="#0f9d58"/>`;
+      if (l.a === 'S') g += `<path${nw} d="M${X(i)},${Y(b[1]) - 5} l4,-7 h-8z" fill="#d6304a"/>`;
+    });
+    const lastC = shown[nShown - 1][3], lastUp = lastC >= shown[nShown - 2][3];
+    g += `<rect x="${W - R + 2}" y="${Y(lastC) - 8}" width="${R - 4}" height="16" rx="4" fill="${lastUp ? '#0f9d58' : '#d6304a'}"/><text x="${W - R + 6}" y="${Y(lastC) + 4}" style="font:600 10px 'JetBrains Mono',monospace" fill="#fff">${lastC.toFixed(2)}</text>`;
+    // equity panel
+    const all = [...S.eq, ...S.bh], emin = Math.min(...all), emax = Math.max(...all), ep = Math.max((emax - emin) * .15, .01);
+    const EY = v => eTop + (1 - (v - emin + ep) / (emax - emin + 2 * ep)) * eH;
+    const ex = k => k === 0 ? x0 : X(HIST + k - 1) + cw / 2;      // equity after day k sits at the right edge of that day
+    g += `<text class="ax" x="${L}" y="${eTop - 6}">EQUITY</text><line class="gl" x1="${L}" x2="${W - R}" y1="${EY(1)}" y2="${EY(1)}" stroke-dasharray="2 3"/><text class="ax" x="${W - R + 6}" y="${EY(1) + 3}">$100k</text>`;
+    const line = arr => arr.map((v, k) => (k ? 'L' : 'M') + ex(k).toFixed(1) + ',' + EY(v).toFixed(1)).join('');
+    if (S.d) {
+      g += `<path d="${line(S.eq)} L${ex(S.d)},${EY(1)} L${ex(0)},${EY(1)}Z" fill="rgba(120,0,240,.08)"/>`;
+      g += `<path d="${line(S.bh)}" fill="none" stroke="#8a93a3" stroke-dasharray="4 3" stroke-width="1.2"/><path d="${line(S.eq)}" fill="none" stroke="#0f1528" stroke-width="1.8"/>`;
+      g += `<circle cx="${ex(S.d)}" cy="${EY(S.eq[S.d])}" r="4" fill="#0f1528" stroke="#fff" stroke-width="2"/>`;
+    } else g += `<text class="ax" x="${x0 + 3}" y="${EY(1) - 8}">your equity starts here</text>`;
+    // time bar under the chart: the 61-day window, filled up to today; the Day tag rides on it
+    const xEnd = X(HIST + N - 1) + cw / 2, cur = Math.min(S.d, N - 1), tx = S.d >= N ? xEnd : X(HIST + S.d);
+    if (S.d < N) g += `<line x1="${tx}" x2="${tx}" y1="${pTop}" y2="${tY - 9}" stroke="#7800f0" stroke-opacity=".45" stroke-dasharray="3 3"/>`;
+    g += `<rect x="${x0}" y="${tY - 3}" width="${xEnd - x0}" height="6" rx="3" fill="#eceef4"/>` +
+      `<rect x="${x0}" y="${tY - 3}" width="${Math.max(0, (S.d >= N ? xEnd : tx - cw / 2) - x0)}" height="6" rx="3" fill="url(#tlg)"/>`;
+    [20, 40].forEach(k => g += `<line x1="${X(HIST + k) - cw / 2}" x2="${X(HIST + k) - cw / 2}" y1="${tY - 3}" y2="${tY + 3}" stroke="#fff" stroke-width="1.5"/>`);
+    g += `<text class="ax" x="${x0 - 8}" y="${tY + 3.5}" text-anchor="end">Jan 2</text><text class="ax" x="${xEnd + 8}" y="${tY + 3.5}">Mar 31</text>`;
+    // date tag riding on the bar: month and day on top, weekday below
+    const dd = new Date(H.dates[cur] + 'T12:00:00Z'), fmt = o => dd.toLocaleDateString('en-US', { ...o, timeZone: 'UTC' });
+    const l1 = S.d >= N ? 'Closed' : fmt({ month: 'short', day: 'numeric' }), l2 = S.d >= N ? 'Mar 31' : fmt({ weekday: 'short' });
+    const tw = Math.max(l1.length * 6.4, l2.length * 5.4) + 16, tcx = Math.min(Math.max(tx, x0 + tw / 2), xEnd - tw / 2);
+    g += `<g class="ttag"><rect x="${tcx - tw / 2}" y="${tY - 15}" width="${tw}" height="30" rx="9" fill="#4a1a8c" stroke="#fff" stroke-width="2"/>` +
+      `<text x="${tcx}" y="${tY - 1.5}" text-anchor="middle" class="t1">${l1}</text><text x="${tcx}" y="${tY + 9.5}" text-anchor="middle" class="t2">${l2}</text></g>`;
+    g += `<g class="lg"><line x1="${L + 60}" x2="${L + 74}" y1="${eTop - 9}" y2="${eTop - 9}" stroke="#0f1528" stroke-width="1.8"/><text x="${L + 78}" y="${eTop - 6}">your equity</text>` +
+      `<line x1="${L + 146}" x2="${L + 160}" y1="${eTop - 9}" y2="${eTop - 9}" stroke="#8a93a3" stroke-dasharray="3 2" stroke-width="1.3"/><text x="${L + 164}" y="${eTop - 6}">Buy &amp; Hold</text></g>`;
+    // date axis
+    g += `<text class="ax" x="${X(0)}" y="${tY + 3.5}">${new Date(OH.dates[0] + 'T12:00:00Z').toLocaleDateString('en-US', { month: 'short', day: 'numeric', timeZone: 'UTC' })}</text>`;
+    g += `<g id="hv"></g>`;
+    svg.innerHTML = `<defs><pattern id="fut" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><rect width="6" height="6" fill="#fcfcfd"/><line x1="0" y1="0" x2="0" y2="6" stroke="rgba(74,38,130,.035)" stroke-width="2"/></pattern><linearGradient id="tlg" x1="0" x2="1"><stop offset="0" stop-color="#b40028"/><stop offset="1" stop-color="#7800f0"/></linearGradient><pattern id="miss" width="4" height="4" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><rect width="4" height="4" fill="#eceaf3"/><line x1="0" y1="0" x2="0" y2="4" stroke="#b9b5cf" stroke-width="1.5"/></pattern></defs>` + g;
+    G = { X, cw, L, R, W, nShown, pTop, bot: eTop + eH, Y, EY, ex };
+    head(hover != null && hover < nShown ? hover : nShown - 1);
+  }
+
+  // hover crosshair + readout (chart and log tiles)
+  function showDay(i, cx, cy) {
+    if (!G || i < 0 || i >= G.nShown) return leave();
+    hover = i; head(i);
+    const day = i - HIST, l = day >= 0 ? S.log[day] : null;
+    $('hv').innerHTML = `<line x1="${G.X(i)}" x2="${G.X(i)}" y1="${G.pTop}" y2="${G.bot}" stroke="#0f1528" stroke-opacity=".3" stroke-dasharray="3 3"/>` +
+      (l ? `<circle cx="${G.ex(day + 1)}" cy="${G.EY(S.eq[day + 1])}" r="3.5" fill="#7800f0" stroke="#fff" stroke-width="1.5"/>` : '');
+    document.querySelectorAll('.tile.on').forEach(t => t.classList.remove('on'));
+    if (day >= 0 && $('log').children[day]) $('log').children[day].classList.add('on');
+    const tip = $('tip');
+    if (l && cx != null) { tip.innerHTML = `${sysName(l.arch, l.model)} · run ${l.run} → <b>${ACT[l.a]}</b> · <span style="color:${l.pnl > 0 ? '#5fe0a0' : l.pnl < 0 ? '#ff8a9a' : '#ccc'}">${pct(l.pnl)}</span>`; tip.style.left = cx + 14 + 'px'; tip.style.top = cy - 34 + 'px'; tip.classList.add('on'); }
+    else tip.classList.remove('on');
+  }
+  $('kline').addEventListener('mousemove', e => {
+    if (!G) return;
+    const r = e.currentTarget.getBoundingClientRect();
+    showDay(Math.round((e.clientX - r.left - G.L) / G.cw - .5), e.clientX, e.clientY);
+  });
+  $('log').addEventListener('mouseover', e => { const t = e.target.closest('.tile'); if (t && S.log[+t.dataset.d]) showDay(HIST + +t.dataset.d); });
+  $('log').addEventListener('mouseleave', () => leave());
+  const leave = () => { hover = null; if ($('hv')) $('hv').innerHTML = ''; document.querySelectorAll('.tile.on').forEach(t => t.classList.remove('on')); $('tip').classList.remove('on'); if (G) head(G.nShown - 1); };
+  $('kline').addEventListener('mouseleave', leave);
+
+  // ---------- picks & buttons ----------
+  $('arch').addEventListener('click', e => { const b = e.target.closest('button'); if (b) { arch = b.dataset.a; renderSide(); } });
+  $('model').addEventListener('click', e => { const b = e.target.closest('button'); if (b) { model = b.dataset.m; renderSide(); } });
+  $('goBtn').addEventListener('click', () => { stopAuto(); step(); });
+  $('autoBtn').addEventListener('click', () => {
+    if (autoT) return stopAuto();
+    $('autoBtn').classList.add('on'); $('autoBtn').textContent = 'Stop ■'; step();
+    autoT = setInterval(step, 320);
+  });
+  $('newBtn').addEventListener('click', startCard);
+  document.addEventListener('keydown', e => {
+    if ($('ov').classList.contains('on')) return;
+    if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); stopAuto(); step(); }
+  });
+  addEventListener('resize', () => S && draw());
+
+  // ---------- overlays ----------
+  const spark = tk => {    // pre-window history only
+    const c = OH.bars[tk].slice(0, HIST).map(b => b[3]), lo = Math.min(...c), hi = Math.max(...c), up = c[c.length - 1] >= c[0];
+    const p = c.map((v, i) => `${(i / (c.length - 1) * 100).toFixed(1)},${(30 - (v - lo) / (hi - lo) * 26 - 2).toFixed(1)}`).join(' ');
+    return `<svg viewBox="0 0 100 32" preserveAspectRatio="none"><polyline points="${p}" fill="none" stroke="${up ? '#0f9d58' : '#d6304a'}" stroke-width="1.5" vector-effect="non-scaling-stroke"/></svg>`;
+  };
+  function open(html) { $('ovCard').innerHTML = html; $('ov').classList.add('on'); }
+  function close() { $('ov').classList.remove('on'); }
+
+  function startCard() {
+    stopAuto();
+    open(`<div class="kick"><span>HERCULEAN · Trading workflow</span></div>
+      <h2>Welcome, <em id="nm">${name}</em><button class="reroll" id="reroll" title="Another name">↻</button></h2>
+      <p>Pick a stock. For each of the 61 trading days (Jan 2 – Mar 31, 2026) you choose which agent system trades; one of its three recorded runs is drawn, and its real decision is executed. Can your picks beat Buy &amp; Hold?</p>
+      <div class="stocks">${H.tradeAssets.map(t => `<button class="stock${t === sym ? ' sel' : ''}" data-t="${t}"><b>${t}</b><small>${CO[t]}</small>${spark(t)}</button>`).join('')}</div>
+      <div class="rules"><span><i>30</i>agent systems</span><span><i>3</i>runs each</span><span><i>$100k</i>start</span><span><i>open→open</i>no costs</span></div>
+      <div class="ov-actions"><button class="go" id="startBtn">Start trading ▶</button>${S && S.d && S.d < N ? '<button class="ghost" id="resume">Resume</button>' : ''}<a class="to-lb" href="./index.html">See the leaderboard</a></div>`);
+    let tk = sym;
+    $('ovCard').querySelectorAll('.stock').forEach(b => b.onclick = () => { tk = b.dataset.t; $('ovCard').querySelectorAll('.stock').forEach(x => x.classList.toggle('sel', x === b)); });
+    $('reroll').onclick = () => { let n; do n = pickRand(NAMES); while (n === name); name = n; $('nm').textContent = n; };
+    $('startBtn').onclick = () => { close(); newGame(tk); };
+    if ($('resume')) $('resume').onclick = close;
+  }
+
+  function endCard() {
+    const m = metrics(S.log.map(l => l.pnl)), bh = metrics(S.ret), st = standing(N), rank = st.rank, top = st.top;
+    const fav = Object.entries(S.picks).sort((p, q) => q[1] - p[1])[0], [fa, fm] = fav[0].split('|');
+    const beat = m.cr > bh.cr, gap = (m.cr - top.cr) * 100;
+    const tb = rankTable(st, 1);
+    open(`<div class="kick"><span>${sym} · window closed · 61 days</span></div>
+      <h2>${beat ? `${name} <em>beat</em> Buy &amp; Hold` : `Buy &amp; Hold wins this time, <em>${name}</em>`}</h2>
+      <div class="res">
+        <div><small>Final equity</small><b>${money(1e5 * (1 + m.cr))}</b><em>B&amp;H ${money(1e5 * (1 + bh.cr))}</em></div>
+        <div><small>CR</small><b class="${cls(m.cr)}">${pct(m.cr)}</b><em>B&amp;H ${pct(bh.cr)}</em></div>
+        <div><small>SR</small><b>${m.sr.toFixed(2)}</b><em>B&amp;H ${bh.sr.toFixed(2)}</em></div>
+        <div><small>MDD</small><b>${(m.mdd * 100).toFixed(2)}%</b><em>B&amp;H ${(bh.mdd * 100).toFixed(2)}%</em></div>
+      </div>
+      <div class="rankline">
+        <div class="rk-top"><span><span class="big">#${rank}</span>of ${st.n} on ${sym} Trading</span>
+          <span>${rank === 1 ? 'ahead of #2 by <b>' + ((m.cr - st.all[0].cr) * 100).toFixed(2) + ' pp</b>' : `<b class="dn">${gap.toFixed(2)} pp</b> behind #1`}</span></div>
+        ${strip(st, 580, 96)}
+        <div class="tb"><div class="tr th"><span>Rank</span><span>Agent system · CR, mean of 3 runs</span><span>CR</span><span>vs #1</span></div>${tb}</div>
+        <div class="fav">Your most-picked: <b>${sysName(fa, fm)}</b> (${fav[1]} of 61 days)</div>
+      </div>
+      <div class="ov-actions"><button class="go" id="again">Play again ▶</button><button class="ghost" id="review">Review chart</button><a class="to-lb" href="./index.html">See the leaderboard</a></div>`);
+    $('again').onclick = () => { name = pickRand(NAMES.filter(n => n !== name)); startCard(); };
+    $('review').onclick = close;
+  }
+
+  newGame(sym);
+  startCard();
+  window.__play = { step, state: () => S, set: (a, m) => { arch = a; model = m; renderSide(); }, endCard, close };   // for tests
+})();

style.css

@@ -1,28 +1,756 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+/* HERCULEAN leaderboard
+   Fin AI house tokens; the blue accent is replaced by the HERCULEAN red→purple gradient. */
+:root{
+  --ink:#0f1528; --soft:#4f5a6e; --muted:#8a93a3; --line:rgba(74,38,130,.085);
+  --paper:#fcfcfd; --paper-2:#f4f6fa;
+  --card-ring:0 0 0 1px rgba(74,38,130,.07),0 1px 2px rgba(40,20,80,.04),0 10px 28px -18px rgba(60,30,120,.18);
+  --g:linear-gradient(90deg,#b40028,#7800f0);
+  --g-soft:linear-gradient(90deg,rgba(180,0,40,.08),rgba(120,0,240,.09));
+  --accent-ink:#4a1a8c;
+  --up:#16a34a;
+  --serif:'Newsreader',Georgia,serif; --brand:'Cinzel','Newsreader',Georgia,serif; --sans:'Inter',system-ui,-apple-system,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
+  --wrap:1180px; --ease:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.34,1.56,.64,1);
 }
+*{box-sizing:border-box}
+html{scroll-behavior:smooth;scroll-padding-top:70px}
+body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
+h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.1;letter-spacing:-.02em;margin:0}
+p{margin:0;color:var(--soft)}
+a{color:inherit;text-decoration:none}
+img{display:block}
+.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 32px}
+::selection{background:#5a1aa8;color:#fff}
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
+/* ---------- page frame: soft colour glows + vertical edge marks ---------- */
+.glow{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(66vw 80vh at 20% 15%,rgba(180,0,40,.070),transparent 72%),radial-gradient(70vw 84vh at 67% 90%,rgba(120,0,240,.080),transparent 72%)}
+.edge{position:fixed;top:50%;z-index:45;pointer-events:none;display:flex;align-items:center;gap:18px;white-space:nowrap;text-transform:uppercase}
+.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;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(120,0,240,.22))}
+.edge::after{background:linear-gradient(90deg,rgba(120,0,240,.22),transparent)}
+.edge-r .e-name{background-image:linear-gradient(90deg,#183898,#0060b0 55%,#68a8d8)}
+.edge-r::before{background:linear-gradient(90deg,transparent,rgba(0,96,176,.28))}
+.edge-r::after{background:linear-gradient(90deg,rgba(0,96,176,.28),transparent)}
+@media (max-width:1320px){.edge{display:none}}
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
+/* ---------- scroll progress + header ---------- */
+.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,253,.8);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}
+.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;transition:transform .6s var(--spring)}
+.brand:hover img{transform:rotate(-12deg) scale(1.08)}
+.brand.sm{font-size:1rem}.brand.sm img{height:20px}
+.brand-sep{color:var(--line);font-weight:400}
+.brand-herc{font-family:var(--brand);font-size:.84rem;font-weight:700;letter-spacing:.1em;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)}
+
+/* ---------- buttons ---------- */
+.btn{position:relative;display:inline-flex;align-items:center;gap:10px;font-size:.9rem;font-weight:500;padding:10px 20px;border-radius:999px;background:var(--ink);color:var(--paper);overflow:hidden;isolation:isolate;border:0;cursor:pointer;font-family:inherit;transition:transform .35s var(--spring),box-shadow .35s}
+.btn{--mx:50%;--my:50%}
+.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(130px circle at var(--mx) var(--my),rgba(180,0,40,.75),rgba(120,0,240,.6) 45%,transparent 75%);opacity:0;transition:opacity .3s}
+.btn:hover::before{opacity:1}
+.btn.magnetic{transition:transform .25s var(--ease),box-shadow .35s}
+.btn:hover{box-shadow:0 10px 30px -12px rgba(120,0,240,.55)}
+.btn:active{transform:scale(.96)}
+.btn .arrow{display:inline-block;transition:transform .35s var(--spring)}
+.btn:hover .arrow{transform:translateX(4px)}
+.btn--lg{padding:14px 26px;font-size:1rem}
+.btn--sm{padding:7px 15px;font-size:.84rem;gap:7px}
+.btn--ghost{background:rgba(255,255,255,.7);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
+.btn--ghost::before{background:radial-gradient(110px circle at var(--mx) var(--my),rgba(120,0,240,.12),transparent 70%)}
+.btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--ink)}
+
+/* ---------- hero ---------- */
+.hero{position:relative;background:var(--paper);min-height:clamp(700px,100svh,940px);display:flex;align-items:center;padding:96px 0 92px;overflow:hidden}
+.flow{position:absolute;inset:0;width:100%;height:100%;z-index:0}
+.flow .node{animation:ping2 3.2s var(--ease) infinite}
+@keyframes ping2{0%{r:2.4;opacity:.9}100%{r:9;opacity:0}}
+.hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 55% 70% at 24% 50%,var(--paper) 35%,transparent 78%),linear-gradient(to bottom,transparent 72%,var(--paper))}
+.hero-grid>*{min-width:0}
+.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center;width:100%}
+.award{display:inline-flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line),0 6px 20px -12px rgba(15,21,40,.3);font-size:.8rem;font-weight:500;color:var(--soft);position:relative;overflow:hidden;transition:box-shadow .3s,transform .4s var(--spring)}
+.award:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(120,0,240,.35),0 12px 28px -14px rgba(120,0,240,.45)}
+.award::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.9) 50%,transparent 65%);transform:translateX(-100%);animation:shine 4.5s 1.8s infinite}
+@keyframes shine{0%,70%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
+.award .medal{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--g);color:#fff}
+.award .medal svg{width:26px;height:26px}
+.award b{color:var(--accent-ink);font-weight:600}
+.wordmark{font-family:var(--brand);font-weight:600;font-size:clamp(2.6rem,6.2vw,5.2rem);letter-spacing:.01em;line-height:1;margin:24px 0 16px;padding-bottom:.04em;background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent;width:max-content;max-width:100%}
+.hero-sub{font-family:var(--serif);font-size:clamp(1.4rem,2.3vw,1.95rem);line-height:1.25;color:var(--ink);max-width:24ch}
+.hero-sub em,.sec-h2 em,.claim em{font-style:italic;background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
+.hero .lead{font-size:1.06rem;max-width:46ch;margin:16px 0 0}
+/* stats */
+.stats{display:flex;gap:34px;margin:28px 0 30px;flex-wrap:wrap}
+.stats div{display:flex;flex-direction:column}
+.stats b{font-family:var(--serif);font-weight:500;font-size:2.6rem;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
+.stats span{font-size:.8rem;color:var(--muted);margin-top:7px}
+.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
+/* rotating architecture name (thefin.ai "rotator"): serif italic like the subtitle, underline drawn in and out */
+.rotator{--uc:#7800f0;--rot:1.6s;display:inline-block;position:relative;height:1.35em;vertical-align:bottom;overflow:hidden;font-family:var(--serif);font-style:italic;font-size:1.2em;line-height:1.35;transition:width .45s var(--ease)}
+.rotator span{position:absolute;left:0;top:0;color:var(--c);white-space:nowrap;opacity:0;transform:translateY(60%);filter:blur(6px);transition:opacity .45s var(--ease),transform .55s var(--ease),filter .45s}
+.rotator span.on{opacity:1;transform:none;filter:none}
+.rotator span.out{opacity:0;transform:translateY(-60%);filter:blur(6px)}
+.rotator::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:2px;border-radius:2px;background:var(--uc);transform-origin:0 50%;animation:under var(--rot) var(--ease) infinite;transition:background .3s}
+@keyframes under{0%{transform:scaleX(0)}25%,80%{transform:scaleX(1);transform-origin:0 50%}81%{transform-origin:100% 50%}100%{transform:scaleX(0);transform-origin:100% 50%}}
+/* ticker at the bottom of the hero (thefin.ai marquee) */
+.ticker{position:absolute;left:0;right:0;bottom:14px;z-index:2;height:36px;display:flex;align-items:center;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(252,252,253,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
+.ticker-track{display:flex;width:max-content;animation:marquee var(--dur,140s) linear infinite}
+.ticker:hover .ticker-track{animation-play-state:paused}
+@keyframes marquee{to{transform:translateX(-50%)}}
+.tk{display:inline-flex;align-items:center;gap:8px;padding:0 18px;font-size:.8rem;line-height:1;white-space:nowrap;cursor:pointer;border-right:1px solid var(--line)}
+.tk .p{font-family:var(--mono);font-size:.7rem;color:var(--muted)}
+.tk .n{color:var(--soft)}
+.tk .n em{font-style:normal;color:var(--muted)}
+.tk .v{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
+.tk .ini.sm{width:18px;height:18px;font-size:.46rem}
+.tk:hover .n{color:var(--ink)}
+.tk.first .v{color:#7a1fb4}
+.reveal-up{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
+.loaded .reveal-up{opacity:1;transform:none}
+
+/* "Top 8 · Overall score" card (light theme) */
+.hero-viz{position:relative;margin:0;height:600px;border-radius:24px;background:linear-gradient(160deg,rgba(244,246,250,.92),rgba(255,255,255,.86));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 0 0 1px var(--line),0 30px 60px -32px rgba(15,21,40,.32);padding:20px 22px 16px;display:flex;flex-direction:column}
+.hero-viz.tilt{transform-style:preserve-3d;transition:transform .6s var(--ease),box-shadow .4s}
+.hero-viz.tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(500px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.55),transparent 45%);opacity:0;transition:opacity .4s}
+.hero-viz.tilt:hover::after{opacity:1}
+.hero-viz.tilt:hover{box-shadow:0 0 0 1px rgba(120,0,240,.22),0 34px 60px -30px rgba(120,0,240,.38)}
+.hero-viz figcaption{white-space:nowrap;gap:12px;display:flex;justify-content:space-between;align-items:center;font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
+.hero-viz figcaption a{letter-spacing:.02em;text-transform:none;font-size:.8rem;font-weight:500;color:#6a1fc0;transition:transform .35s var(--spring)}
+.hero-viz figcaption a:hover{transform:translateX(3px)}
+.podium{position:relative;flex:1;display:grid;grid-template-columns:repeat(8,1fr);gap:10px;align-items:end;padding:54px 0 0;border-bottom:1px solid var(--line);margin-bottom:72px}
+.col{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;cursor:pointer}
+.col .bar{position:relative;width:100%;max-width:44px;height:0;border-radius:10px 10px 3px 3px;background:linear-gradient(180deg,var(--c),color-mix(in srgb,var(--c) 55%,#fff));transition:height 1.1s var(--ease) var(--d),transform .35s var(--spring),filter .25s;transform-origin:50% 100%}
+.podium.in .col .bar{height:var(--h)}
+.col.first .bar{box-shadow:0 12px 24px -14px #7800f0}
+.col .val{position:absolute;left:50%;top:8px;transform:translateX(-50%);font-size:.7rem;font-weight:600;color:var(--fg,#0f1528);font-variant-numeric:tabular-nums;opacity:0;transition:opacity .4s calc(var(--d) + .8s)}
+.col .rk-badge{position:absolute;left:50%;top:-36px;margin-left:-13px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font:700 .74rem/1 var(--sans);color:var(--fg,#0f1528);background:var(--c);opacity:0;transform:translateY(8px) scale(.6);box-shadow:0 0 0 2px #fff,0 4px 10px -5px rgba(15,21,40,.4);transition:opacity .5s var(--ease) calc(var(--d) + .6s),transform .6s var(--spring) calc(var(--d) + .6s)}
+.podium.in .col .val,.podium.in .col .rk-badge{opacity:1}
+.podium.in .col .rk-badge{transform:none}
+.col .nm{position:absolute;top:100%;right:50%;margin-top:10px;white-space:nowrap;font-size:.7rem;line-height:1.25;color:var(--soft);transform-origin:right center;transform:rotate(-38deg);text-align:right}
+.col .nm small{display:block;font-size:.62rem;color:var(--muted)}
+.col:hover .bar{transform:scaleX(1.08);filter:brightness(1.06)}
+.col:hover .rk-badge{transform:translateY(-4px) scale(1.12);transition-delay:0s}
+/* top three: flat gold / silver / bronze badges that glow on staggered, slightly different cycles */
+.col.podium-1{--m:#f2b81c;--mg:rgba(242,184,28,.7);--gd:2.6s;--gw:0s}
+.col.podium-2{--m:#b6bfce;--mg:rgba(150,164,190,.75);--gd:3.1s;--gw:1.1s}
+.col.podium-3{--m:#d08a4e;--mg:rgba(208,138,78,.7);--gd:2.8s;--gw:2s}
+.col[class*="podium-"] .rk-badge{background:var(--m);color:#2b1d05;box-shadow:0 0 0 2px #fff,0 0 10px 2px var(--mg);animation:medalGlow var(--gd) ease-in-out var(--gw) infinite}
+@keyframes medalGlow{0%,100%{box-shadow:0 0 0 2px #fff,0 0 6px 1px var(--mg)}50%{box-shadow:0 0 0 2px #fff,0 0 18px 6px var(--mg)}}
+.col[class*="podium-"] .nm{color:var(--ink);font-weight:600}
+.col[class*="podium-"] .nm small{color:var(--soft);font-weight:500}
+.col:hover .nm{color:var(--ink)}
+.hero-claim{margin-top:10px;padding-top:9px;border-top:1px solid var(--line);font-size:.8rem;color:var(--ink);line-height:1.3;white-space:nowrap}
+.hero-claim em{font-style:normal}
+.hero-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.72rem;color:var(--soft)}
+.hero-leaders{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
+.hl-cap{font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 4px;display:flex;justify-content:space-between}
+.hl-cap span{letter-spacing:.02em;text-transform:none;font-weight:500}
+.gr{display:grid;grid-template-columns:12px 16px 76px 1fr 30px;align-items:center;gap:6px;height:19px;font-size:.72rem;cursor:pointer;border-radius:5px;transition:background .2s}
+.gr:hover{background:rgba(120,0,240,.06)}
+.gr-p{font-family:var(--mono);font-size:.62rem;color:var(--muted)}
+.gr .ini.sm{width:16px;height:16px;font-size:.42rem}
+.gr-n{color:var(--ink);white-space:nowrap}
+.gr-t{height:5px;border-radius:3px;background:var(--paper-2);overflow:hidden}
+.gr-t i{display:block;height:100%;border-radius:3px;background:#8e6ad0}
+.gr b{font-weight:600;font-size:.72rem;text-align:right;font-variant-numeric:tabular-nums}
+.gr-col:last-child .gr{grid-template-columns:12px 66px 1fr 30px}
+.hero-legend span{display:inline-flex;align-items:center;gap:6px}
+.hero-legend i{width:8px;height:8px;border-radius:50%}
+.wdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--c);flex:none}
+
+/* ---------- section scaffolding ---------- */
+.section{padding:84px 0}
+.section--tint{background:none}
+.kicker{display:inline-flex;align-items:center;gap:10px;font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#7a1fb4}
+.kicker::before{content:"";width:22px;height:1px;background:var(--g)}
+.sec-h2{font-size:clamp(2.2rem,4.2vw,3.2rem);margin:14px 0 0;max-width:24ch}
+.sec-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:40px}
+.sec-head>p{max-width:42ch;font-size:1rem}
+.sec-sub{margin-top:14px;font-size:1rem;color:var(--soft)}
+.sec-sub b{color:var(--ink);font-weight:600}
+/* initials badge used in the hero card is defined with the leaderboard below */
+[data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--i,0) * 80ms)}
+[data-reveal].in{opacity:1;transform:none}
+
+/* ---------- 1 · workflow cards ---------- */
+.wf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
+.wf{position:relative;display:flex;flex-direction:column;padding:24px 22px 20px;border-radius:20px;background:#fff;box-shadow:var(--card-ring);overflow:hidden;isolation:isolate;transition:transform .5s var(--spring),box-shadow .4s}
+.wf-bar{position:absolute;left:0;right:0;top:0;height:3px;background:var(--c);transform:scaleX(.18);transform-origin:0 50%;transition:transform .6s var(--ease)}
+.wf:hover{transform:translateY(-6px);box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 30%,transparent),0 24px 40px -26px color-mix(in srgb,var(--c) 70%,transparent)}
+.wf:hover .wf-bar{transform:none}
+/* spotlight (thefin.ai "spot"): a soft glow and a lit border that follow the pointer, in the card's own colour */
+.spot{--x:50%;--y:50%;--sc:#7800f0}
+.spot::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(420px circle at var(--x) var(--y),color-mix(in srgb,var(--sc) 15%,transparent),transparent 45%);opacity:0;transition:opacity .4s;pointer-events:none}
+.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(260px circle at var(--x) var(--y),var(--sc),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s;pointer-events:none}
+.spot:hover::before,.spot:hover::after{opacity:1}
+.wf.spot{--sc:var(--c)}
+.wf-top{display:flex;align-items:center;justify-content:space-between}
+.wf-top .num{font-family:var(--mono);font-size:.8rem;color:var(--muted)}
+.wf-top .lbl{display:inline-flex;align-items:center;gap:7px;font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--c)}
+.wf h3{font-size:1.65rem;margin:18px 0 6px}
+.wf .purpose{font-size:.8rem;line-height:1.45;color:var(--ink);opacity:.78;margin-bottom:18px;min-height:2.9em}
+/* the three parts of a task: icon + label + one short line */
+.recipe{list-style:none;margin:0;padding:0;display:grid;gap:12px}
+.recipe li{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start}
+.recipe .ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--g-soft);color:#5a1aa8;transition:transform .6s var(--spring)}
+/* hover (thefin.ai pillars): the same icon lights up in the workflow colour and turns slightly */
+.recipe .ico{transition:transform .6s var(--spring),background .3s,color .3s,box-shadow .3s}
+.wf:hover .recipe .ico{transform:rotate(-8deg) scale(1.08);background:var(--c);color:#fff;box-shadow:0 6px 14px -6px var(--c)}
+.recipe .ico svg{width:16px;height:16px}
+.recipe small{display:block;font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);line-height:1.3;margin-bottom:4px;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;text-decoration-color:color-mix(in srgb,var(--c) 55%,transparent)}
+.recipe p{font-size:.78rem;line-height:1.45;color:var(--soft)}
+.chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
+.chips span{font-family:var(--mono);font-size:.68rem;padding:2px 7px;border-radius:999px;background:var(--paper-2);color:var(--soft)}
+.wf-best{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px}
+.wf .recipe{margin-bottom:20px}
+.wf-best small{display:block;font-size:.64rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:3px;white-space:nowrap}
+.wf-best .who{min-height:2.6em;font-size:.86rem;font-weight:500;line-height:1.3}
+.wf-best .who span{display:block;white-space:nowrap}
+.wf-best .who em{font-style:normal;color:var(--muted);font-weight:400}
+.wf-best b{font-family:var(--serif);font-weight:500;font-size:1.85rem;line-height:1;font-variant-numeric:tabular-nums}
+
+/* ---------- 2 · leaderboard ---------- */
+.lb-head{align-items:end;margin-bottom:26px}
+.sub-h{margin-top:12px;font-family:var(--serif);font-size:1.45rem;line-height:1.2;color:var(--ink)}
+.sub-h em{font-style:italic;background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
+.note{margin-top:10px;font-size:.78rem;color:var(--muted);max-width:70ch}
+.recipe-note b{color:var(--ink);font-weight:600}
+.sec-h2.one-line{max-width:none;white-space:nowrap}
+.lb-claim{max-width:340px;padding-left:24px;border-left:1px solid var(--line)}
+.claim-k{font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
+.claim{font-family:var(--serif);font-size:1.7rem;line-height:1.15;color:var(--ink);margin-top:6px;letter-spacing:-.01em}
+.claim-sub{font-size:.88rem;margin-top:10px;line-height:1.5}
+.claim-sub b{color:var(--ink);font-weight:600}
+.controls{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-bottom:16px}
+.seg{position:relative;display:inline-flex;gap:2px;padding:4px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
+.seg button{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;border:0;background:none;font:inherit;font-size:.84rem;font-weight:500;color:var(--soft);padding:7px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:color .3s}
+.seg button[aria-selected=true]{color:var(--paper)}
+.seg-pill{position:absolute;top:4px;bottom:4px;left:0;border-radius:999px;background:var(--ink);transition:transform .45s var(--ease),width .45s var(--ease)}
+.arch-chips{display:flex;flex-wrap:wrap;gap:6px}
+.arch-chips button{display:inline-flex;align-items:center;gap:7px;border:0;background:#fff;box-shadow:0 0 0 1px var(--line);color:var(--ink);font:500 .8rem var(--sans);padding:5px 11px 5px 5px;border-radius:999px;cursor:pointer;transition:opacity .25s,box-shadow .25s,transform .3s var(--spring)}
+.arch-chips button:hover{box-shadow:0 0 0 1px rgba(120,0,240,.4)}
+.arch-chips button:active{transform:scale(.95)}
+.arch-chips button.off{opacity:.42}
+.arch-chips button.off .ini{background:var(--muted)!important;color:#fff}
+.model-chips{padding-left:14px;border-left:1px solid var(--line)}
+.model-chips button{padding:5px 11px}
+
+/* architecture initials badge */
+.ini{display:inline-grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;font:600 .58rem/1 var(--mono);letter-spacing:.02em;color:var(--fg,#0f1528);background:var(--c);transition:transform .35s var(--spring)}
+.ini.sm{width:20px;height:20px;font-size:.5rem}
+
+.board{background:#fff;border-radius:20px;box-shadow:var(--card-ring);padding:6px 10px 10px}
+/* columns: rank | system | score bar | 4 workflow cells | chevron */
+.lb-cols,.lb-row .in{display:grid;grid-template-columns:30px var(--namew,250px) minmax(160px,1fr) 248px 18px;gap:12px;align-items:center}
+.lb-cols{padding:10px 10px 8px;border-bottom:1px solid var(--line);font-size:.64rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
+.lb-cols .c-pos{text-align:right}
+.c-cells{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;text-align:center}
+.sort-h{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:0;border:0;background:none;padding:3px 0;border-radius:6px;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--muted);cursor:pointer;transition:color .25s,background .25s}
+#colScore{justify-content:flex-start}
+.sort-h:hover{color:var(--ink);background:var(--paper-2)}
+.sort-h.on{color:var(--ink)}
+.sort-h .arr{position:absolute;right:-9px;font-style:normal;opacity:0;transition:opacity .25s}
+.c-cells .sort-h{letter-spacing:.02em;font-size:.6rem;gap:3px}
+.c-cells .sort-h .arr{display:none}
+.c-cells .sort-h.on{box-shadow:inset 0 -2px 0 var(--ink);border-radius:0}
+.sort-h.on .arr{opacity:1}
+.sort-h:hover .arr{opacity:.5}
+.lb-rows{position:relative;transition:height .55s var(--ease)}
+.lb-row{position:absolute;left:0;right:0;top:0;height:40px;transition:transform .7s var(--ease),opacity .4s}
+.lb-row .in{height:100%;padding:0 10px;border-radius:12px;cursor:pointer;transition:background .2s}
+.lb-row .in:hover{background:#faf8fe}
+.lb-row.open .in{background:#f6f2fd}
+.lb-row.gone{opacity:0;pointer-events:none}
+.lb-pos{font-family:var(--mono);font-size:.76rem;color:var(--muted);text-align:right}
+.lb-row.top .lb-pos{background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:600}
+.lb-name{display:flex;align-items:center;gap:10px;min-width:0;font-size:.9rem;white-space:nowrap}
+.lb-name b{font-weight:500}
+.lb-name>span:not(.ini){color:var(--muted);overflow:hidden;text-overflow:ellipsis}
+.lb-row .in:hover .ini{transform:rotate(-10deg) scale(1.1)}
+.lb-score{display:flex;align-items:center;gap:12px}
+.lb-track{flex:1;height:10px;border-radius:999px;background:var(--paper-2);overflow:hidden}
+.lb-bar{display:block;height:100%;width:0;border-radius:999px;background:var(--c);transition:width 1s var(--ease)}
+.lb-val{font-weight:600;font-size:.92rem;width:38px;text-align:right;font-variant-numeric:tabular-nums}
+.cells{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
+.cell{display:block;text-align:center;padding:4px 0;border-radius:6px;font-family:var(--mono);font-size:.74rem;line-height:1.3;transition:box-shadow .3s,opacity .3s}
+.cell.best{box-shadow:0 0 0 2px var(--ink)}
+.cells.dim .cell:not(.on){opacity:.62}
+.chev{color:var(--muted);font-size:.8rem;transition:transform .35s var(--ease)}
+.lb-row.open .chev{transform:rotate(90deg)}
+/* show more / fewer rows */
+.lb-more{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:6px;padding:11px 0 6px;border:0;border-top:1px solid var(--line);background:none;font:500 .84rem var(--sans);color:var(--soft);cursor:pointer;transition:color .25s}
+.lb-more:hover{color:var(--ink)}
+.lb-more[hidden]{display:none}
+.lb-more .chev2{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);font-size:.7rem;transition:transform .45s var(--ease),background .3s,color .3s}
+.lb-more:hover .chev2{background:var(--ink);color:#fff;box-shadow:none}
+.lb-more[aria-expanded=true] .chev2{transform:rotate(180deg)}
+/* expanded breakdown, positioned under its row */
+.lb-detail{position:absolute;left:0;right:0;top:0;opacity:0;pointer-events:none;transition:transform .7s var(--ease),opacity .35s}
+.lb-detail.show{opacity:1;pointer-events:auto;transition:transform .7s var(--ease),opacity .45s .15s}
+.sd{margin-left:4px;font-family:var(--mono);font-size:.86em;color:var(--muted);font-weight:400}
+/* expanded row: summary line + four cards */
+.d1{padding:8px 10px 14px 46px}
+.d1-head{font-size:.76rem;color:var(--muted);margin:2px 0 12px}
+.d1-head b{color:var(--soft);font-weight:600}
+.d1-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
+.d1-card{background:#fff;border-radius:12px;box-shadow:var(--card-ring);padding:12px 13px;min-width:0}
+.d1-card h4{margin:0 0 2px;font-size:.77rem;font-weight:600;display:flex;align-items:flex-start;gap:5px;white-space:nowrap}
+.d1-card h4>.wdot{margin-top:5px}
+.d1-card h4>.d1-tag{margin-top:1px}
+.d1-card h4 .ws{margin-left:auto;display:inline-flex;align-items:baseline;gap:5px;white-space:nowrap}
+.d1-card h4 .ws b{font-weight:600;font-size:.82rem}
+.d1-card h4 .ws .rk{font-size:.62rem;font-weight:500;color:var(--muted)}
+.d1-tag{font-size:.52rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 5px;border-radius:999px;cursor:help}
+.d1-tag.best{color:#0f7a4a;background:#e7f6ec}
+.d1-tag.floor{color:#b4233a;background:#fdecee}
+.d1-beat{margin-top:6px;font-size:.7rem;color:var(--soft)}
+.d1-beat b{color:var(--ink);font-weight:600}
+.d1-tag.live{color:#1d5fbf;background:#e8f0fc}
+.d1-foot{margin-top:8px;font-size:.66rem;color:var(--muted);text-align:right}
+.d1 .ab{font-style:normal;font-family:var(--mono);font-size:.62rem;color:var(--muted);margin-left:5px}
+.d1-card .sub{font-size:.7rem;color:var(--muted);margin:0 0 10px}
+.d1-big{font-size:1.4rem;font-weight:700;letter-spacing:-.01em;line-height:1.1;margin-bottom:6px}
+.d1-big small{font-size:.72rem;font-weight:500;color:var(--muted);margin-left:4px}
+.d1-kv{display:flex;justify-content:space-between;gap:10px;font-size:.74rem;color:var(--ink);margin-top:4px}
+.d1-kv>span:first-child{color:var(--muted);display:inline-flex;align-items:center}
+.d1-kv>span:last-child{font-family:var(--mono);white-space:nowrap}
+.d1 .na{color:var(--muted)}
+.d1-cr{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:8px;font-size:.74rem;height:22px}
+.d1-t{font-family:var(--mono);font-size:.7rem;color:var(--soft)}
+.d1-cr .val,.d1-q .val{font-family:var(--mono);text-align:right;white-space:nowrap}
+.track{position:relative;height:14px}
+.track::before{content:"";position:absolute;left:0;right:0;top:7px;height:1px;background:var(--line)}
+.track .zero{position:absolute;top:2px;width:1px;height:10px;background:var(--muted);opacity:.5}
+.track .bh{position:absolute;top:1px;width:2px;height:12px;margin-left:-1px;background:#7d7b85;border-radius:1px}
+.track .ag{position:absolute;top:3px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--c)}
+.d1-legend{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:.64rem;color:var(--muted);margin-top:8px}
+.d1-legend i{display:inline-block;vertical-align:-1px;margin-right:4px}
+.d1-legend .l-ag{width:8px;height:8px;border-radius:50%;background:#d6304a}
+.d1-legend .l-bh{width:2px;height:10px;background:#7d7b85}
+.d1-legend .l-z{width:1px;height:10px;background:var(--muted);opacity:.5}
+.d1-legend .sw{width:8px;height:8px;border-radius:2px}
+.d1-pair{font-size:.95rem;font-weight:600;margin-bottom:4px}
+.d1-pair .s{color:var(--muted);font-weight:400;margin:0 4px}
+.d1-pair .runs{font-size:.68rem;font-weight:500;color:var(--muted);margin-left:8px}
+.d1-cap{font-size:.64rem;color:var(--muted);margin-top:10px}
+.d1-strip{display:flex;gap:1px;height:14px;margin-top:3px}
+.d1-strip i,.d1-legend .sw{background:#d9d7de}
+.d1-strip i{flex:1;border-radius:1px;cursor:help}
+.d1-strip i.L,.d1-legend .sw.L{background:#3567d8}
+.d1-strip i.R,.d1-legend .sw.R{background:#e0475b}
+.d1-strip i.F,.d1-legend .sw.F{background:#b9b5cf;opacity:.45}
+.d1-strip i{position:relative}
+.d1-strip i.cl::after,.d1-legend .dia{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;background:#8b3fd9;transform:rotate(45deg);opacity:1}
+.d1-legend .dia{position:relative;display:inline-block;left:auto;top:auto;margin:0 6px 0 2px;vertical-align:0}
+.d1-strip i.M,.d1-legend .sw.M{background:repeating-linear-gradient(45deg,#fff 0 2px,#e2e0e6 2px 4px)}
+.d1-q{display:grid;grid-template-columns:34px 1fr 26px 44px 44px;align-items:center;gap:6px;font-size:.72rem;height:20px}
+.d1-q.hd{height:14px;font-size:.54rem;letter-spacing:.03em;white-space:nowrap;text-transform:uppercase;color:var(--muted)}
+.d1-q.hd span{text-align:right}
+.d1-q .val.up{color:#0f7a4a}.d1-q .val.dn{color:#b4233a}.d1-q .val.bh{color:var(--muted)}
+.q-bar{height:6px;border-radius:3px;background:var(--paper-2);overflow:hidden}
+.q-bar i{display:block;height:100%;border-radius:3px;background:var(--c)}
+.d1-stack{display:flex;gap:2px;height:12px;margin:4px 0 8px;border-radius:4px;overflow:hidden;background:var(--paper-2)}
+.d1-stack i{height:100%;cursor:help}
+.s-acc{background:#11949f}.s-ser{background:#4f5a6e}.s-eer{background:#8a93a3}.s-cer{background:#c9cfdb}
+.d1 .sq{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px}
+.board-foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:14px;font-size:.78rem}
+.board-foot p{font-size:.78rem;color:var(--muted);max-width:70ch}
+.board-foot b{color:var(--soft);font-weight:600}
+.keys{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
+.ring-key{display:inline-block;width:18px;height:12px;border-radius:4px;background:#8e6ad0;box-shadow:0 0 0 2px var(--ink);margin-right:4px}
+.ramp{display:inline-block;width:70px;height:8px;border-radius:4px;margin-left:6px;background:linear-gradient(90deg,#f4f0fb,#c9b6ea,#8e6ad0,#4b2a8f)}
+
+/* ---------- 2b · rankings across workflows ---------- */
+.rk-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:end;margin-bottom:16px}
+.rk-dek{margin-top:14px;font-size:1rem;max-width:52ch}
+.rk-dek b{color:var(--ink);font-weight:600}
+.rk-quick{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:18px;align-items:center}
+.rk-quick button{--c:#7800f0;display:inline-flex;align-items:center;gap:7px;border:0;cursor:pointer;font:500 .8rem var(--sans);padding:6px 12px;border-radius:999px;color:color-mix(in srgb,var(--c) 75%,#0f1528);background:color-mix(in srgb,var(--c) 9%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 22%,transparent);transition:background .3s,color .3s,box-shadow .3s,transform .3s var(--spring)}
+.rk-quick button:hover{background:color-mix(in srgb,var(--c) 16%,#fff)}
+.rk-quick button:active{transform:scale(.95)}
+.rk-quick button.on{background:var(--c);color:#fff;box-shadow:0 6px 14px -8px var(--c)}
+.rk-quick button.grad{--c:#7800f0}
+.rk-quick button.grad.on{background:var(--g)}
+.rk-quick .wdot{transition:background .3s}
+.rk-quick button.on .wdot{background:#fff}
+/* agent × backbone picker */
+.picker{display:grid;grid-template-columns:auto repeat(6,56px);gap:3px 5px;align-items:center;padding:8px 14px 7px;border-radius:18px;background:#fff;box-shadow:var(--card-ring)}
+.pk-col,.pk-row{border:0;background:none;cursor:pointer;font:inherit;color:var(--soft);border-radius:8px;transition:color .25s,background .25s}
+.pk-col{font-size:.6rem;font-weight:600;letter-spacing:.04em;padding:1px 0;text-align:center;white-space:nowrap}
+.pk-row{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:500;padding:0 10px 0 2px;line-height:1.2;text-align:left;white-space:nowrap}
+.pk-col:hover,.pk-row:hover{color:var(--ink);background:var(--paper-2)}
+.pk-col.on,.pk-row.on{color:var(--ink);background:var(--g-soft)}
+.pk-cell{position:relative;height:20px;border:0;border-radius:6px;cursor:pointer;font:500 .62rem var(--mono);color:color-mix(in srgb,var(--c) 70%,#0f1528);background:color-mix(in srgb,var(--c) 14%,#fff);transition:background .3s,color .3s,box-shadow .3s,transform .35s var(--spring)}
+.pk-cell:hover{transform:scale(1.08);z-index:3}
+.pk-cell.pv,.pk-cell.lit{z-index:1}
+.pk-cell.lit{background:color-mix(in srgb,var(--c) 70%,#fff);color:#fff}
+.pk-cell.sel{z-index:2;background:var(--c);color:#fff;box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--ink);transform:scale(1.06)}
+.pk-cell.pv:not(.sel){box-shadow:0 0 0 1.5px var(--c)}
+.pk-note{grid-column:1/-1;font-size:.66rem;color:var(--muted);margin-top:2px;line-height:1.3}
+/* chart */
+.rk-chart{position:relative;border-radius:20px;background:rgba(255,255,255,.72);box-shadow:var(--card-ring);padding:14px 10px 6px}
+.rk-chart svg{display:block;width:100%;height:auto;overflow:visible;font-family:var(--sans)}
+.rk-chart .col-h{font-size:13px;font-weight:600;fill:var(--ink);pointer-events:none;transition:fill .3s}
+.col-btn{cursor:pointer;outline:none}
+.col-btn .cb-bg{fill:color-mix(in srgb,var(--c) 9%,#fff);stroke:color-mix(in srgb,var(--c) 28%,transparent);stroke-width:1;transition:fill .3s,stroke .3s}
+.col-btn .cb-dot{fill:var(--c);transition:fill .3s}
+.col-btn:hover .cb-bg,.col-btn:focus-visible .cb-bg{fill:color-mix(in srgb,var(--c) 18%,#fff)}
+.col-btn.on .cb-bg{fill:var(--c);stroke:var(--c)}
+.col-btn.on .col-h{fill:#fff}
+.col-btn.on .cb-dot{fill:#fff}
+.rk-tag{font-weight:700;fill:#7a1fb4}
+.rk-hint{font-size:.78rem;color:var(--muted);align-self:center}
+.rk-chart .tick{font-size:10.5px;fill:var(--muted);font-family:var(--mono)}
+.rk-chart .lane{stroke:var(--line);stroke-dasharray:2 4}
+.ln path.line{fill:none;stroke:rgba(74,38,130,.11);stroke-width:1.4;transition:stroke-opacity .45s,stroke-width .45s var(--ease),stroke .3s}
+.ln path.hit{fill:none;stroke:transparent;stroke-width:11;cursor:pointer}
+.ln circle{transform-box:fill-box;transform-origin:center;fill:#fff;stroke:rgba(74,38,130,.18);stroke-width:1.1;transition:r .45s var(--spring),fill .3s,stroke .3s,stroke-width .3s}
+.ln .rkl{font-size:11px;font-weight:700;fill:#fff;text-anchor:middle;pointer-events:none;opacity:0;transition:opacity .3s}
+.ln.lit path.line{stroke:url(#wfGrad);stroke-opacity:.6;stroke-width:2}
+.ln.lit circle{fill:var(--wc);stroke:#fff;stroke-width:1.5;r:4.5}
+.ln.sel path.line{stroke:url(#wfGrad);stroke-opacity:1;stroke-width:5.5;filter:drop-shadow(0 2px 4px rgba(90,20,160,.25))}
+.ln.sel circle{fill:var(--wc);stroke:#fff;stroke-width:2.5;r:12}
+.ln.sel .rkl{opacity:1}
+.ln.pv:not(.sel) path.line{stroke:#0f1528;stroke-opacity:.9;stroke-width:2.4}
+.ln.pv:not(.sel) circle{fill:#0f1528;stroke:#fff;r:4.5}
+.rk-chart svg.all .ln:not(.sel) path.line{stroke:url(#wfGrad);stroke-opacity:.34;stroke-width:1.5}
+.rk-chart svg.all .ln:not(.sel) circle{fill:var(--wc);stroke:#fff;stroke-width:1;r:3}
+.rk-chart svg.all .ln.pv:not(.sel) path.line{stroke:#0f1528;stroke-opacity:.9;stroke-width:2.4}
+.rk-chart svg.all .ln.pv:not(.sel) circle{fill:#0f1528;stroke:#fff;r:4.5}
+.end{font-size:11.5px;font-weight:500;fill:#4f5a6e;pointer-events:none}
+.end-l{text-anchor:end}
+
+/* view switch: the card's own two-half navigation, a gradient knob slides to the chosen half */
+.rk-view{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;margin:0 0 14px;padding:4px;border-radius:14px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line)}
+.rk-view button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:10px;border:0;background:none;height:32px;padding:0 16px;border-radius:10px;cursor:pointer;font:inherit;color:var(--soft);text-align:left;transition:color .35s}
+.rk-view button svg{width:26px;height:19px;flex:none}
+.rk-view button span{display:flex;flex-direction:column;line-height:1.25}
+.rk-view button b{font-size:.95rem;font-weight:600}
+.rk-view button small{font-size:.72rem;color:inherit;opacity:.75}
+.rk-view .go{font-style:normal;font-size:1.2rem;opacity:0;transform:translateX(-4px);transition:opacity .3s,transform .35s var(--spring)}
+.rk-view button[aria-selected=true]{color:#fff}
+.rk-view button[aria-selected=false]{color:#5a1aa8}
+.rk-view button[aria-selected=false] .go{opacity:1;transform:none;animation:nudge 1.3s cubic-bezier(.34,1.56,.64,1) infinite}
+.rk-view button[aria-selected=false]:hover .go{animation-duration:.7s}
+/* the arrow on the other view bounces to invite a click */
+@keyframes nudge{0%,55%,100%{transform:translateX(0)}20%{transform:translateX(6px)}35%{transform:translateX(1px)}45%{transform:translateX(3px)}}
+.rk-view button[aria-selected=false]:hover{background:rgba(120,0,240,.06)}
+.rk-view .seg-pill{position:absolute;top:4px;bottom:4px;left:0;border-radius:10px;background:linear-gradient(90deg,#7a1036,#4a1a8c);box-shadow:0 4px 10px -6px rgba(74,26,140,.6);transition:transform .5s var(--ease),width .5s var(--ease)}
+/* floor → Overall view */
+.rk-db .db-chip{font-size:12px}
+.rk-db .db-key text{font-size:11.5px;fill:var(--soft)}
+.db{cursor:pointer;transition:opacity .4s,transform .7s var(--ease)}
+.db-sort{cursor:pointer;outline:none}
+.db-sort .cb-bg{fill:color-mix(in srgb,var(--c) 9%,#fff);stroke:color-mix(in srgb,var(--c) 28%,transparent);stroke-width:1;transition:fill .3s,stroke .3s}
+.db-sort .cb-dot{fill:var(--c);transition:fill .3s}
+.db-sort:hover .cb-bg,.db-sort:focus-visible .cb-bg{fill:color-mix(in srgb,var(--c) 18%,#fff)}
+.db-sort.on .cb-bg{fill:var(--c);stroke:var(--c)}
+.db-sort.on .col-h,.db-sort.on .cb-dot{fill:#fff}
+.db-sort .cb-ring{fill:none;stroke:var(--c);stroke-width:1.4}
+.db-sort.on .cb-ring{stroke:#fff}
+.db-band{fill:transparent;transition:fill .3s}
+.db:hover .db-band,.db.pv .db-band{fill:rgba(15,21,40,.05)}
+.db.pv:not(.sel) .db-name{fill:#0f1528;font-weight:600}
+.db.pv:not(.sel) .db-gap{stroke:#0f1528;opacity:.85}
+.db.sel .db-band{fill:rgba(120,0,240,.08)}
+.db-name{font-size:11.5px;fill:var(--soft)}
+.db-rank{font-size:10.5px;fill:var(--muted);font-family:var(--mono)}
+.db-val{font-size:12px;font-weight:600;fill:var(--ink)}
+.db-range{stroke:rgba(74,38,130,.16);stroke-width:1.5}
+.db-gap{stroke:url(#brandGrad);stroke-width:3;stroke-linecap:round;opacity:.55;transform-box:fill-box;transform-origin:left center;transition:opacity .3s,stroke-width .3s}
+.db-wf{transform-box:fill-box;transform-origin:center}
+.db-floor{fill:none;stroke:#0f1528;stroke-width:1.5;pointer-events:all}
+.db-ov{fill:#0f1528;stroke:#fff;stroke-width:1.5;transform-box:fill-box;transform-origin:center}
+.rk-db .db:not(.sel):not(.lit):not(.pv){opacity:.28}
+.rk-db.all .db:not(.sel):not(.pv){opacity:1}
+.rk-db.all .db:not(.sel) .db-name{fill:var(--ink)}
+.db.sel .db-name,.db.lit .db-name{fill:var(--ink);font-weight:600}
+.db.sel .db-gap{opacity:1;stroke-width:4.5}
+.db.lit .db-gap{opacity:.85}
+.db.sel .db-ov{r:7}
+
+/* ---------- 2c · replay: Trading + Hedging trajectories, drawn day by day ---------- */
+.rp-head{align-items:end}
+.rp-ctl{display:flex;align-items:center;gap:12px;flex-basis:100%}
+.rp-run button{font-family:var(--sans);white-space:nowrap}
+.rp-pick{margin-bottom:14px}
+.rp-pick button.sel{background:var(--ink);color:#fff;box-shadow:none}
+.rp-pick button:not(.sel){opacity:.75}
+.rp-pick button:not(.sel):hover{opacity:1}
+.rp-now{margin-left:auto;font-size:.8rem;color:var(--muted)}
+.rp-now b{color:var(--ink);font-weight:600}
+#rpAgain{white-space:nowrap}
+.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
+.rp-sys{position:relative;display:inline-flex;align-items:center}
+.rp-sys select{appearance:none;-webkit-appearance:none;border:0;background:transparent;font:500 1.35rem var(--serif);letter-spacing:-.01em;color:var(--ink);padding:2px 22px 4px 0;cursor:pointer;border-bottom:1px dashed rgba(74,38,130,.3);border-radius:0}
+.rp-sys select:focus{outline:none;border-bottom-color:#7800f0}
+.rp-sys .caret{position:absolute;right:2px;top:50%;transform:translateY(-50%);font-size:.75rem;color:var(--muted);pointer-events:none}
+.rp-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
+.rp-card{position:relative;display:flex;flex-direction:column;padding:18px 20px 16px;border-radius:20px;background:#fff;box-shadow:var(--card-ring);min-width:0}
+.rp-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;height:30px}
+.rp-kick{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
+.rp-tk{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--paper-2)}
+.rp-tk button{border:0;background:none;font:500 .72rem var(--mono);color:var(--soft);padding:4px 10px;border-radius:999px;cursor:pointer;transition:background .25s,color .25s}
+.rp-tk button.on{background:#fff;color:var(--ink);box-shadow:0 1px 4px -1px rgba(15,21,40,.2)}
+.rp-pair{font:600 .9rem var(--sans)}
+.rp-pair small{font:500 .7rem var(--sans);color:var(--muted);margin-left:6px}
+.rp-chart svg{display:block;width:100%;height:auto;overflow:visible;font-family:var(--sans)}
+.rp-gridline{stroke:var(--line);stroke-dasharray:2 4}
+.rp-ax{font:500 9.5px var(--mono);fill:var(--muted)}
+.rp-line{fill:none;stroke:#0f1528;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
+.rp-line.b{stroke:#8a93a3;stroke-dasharray:4 3}
+.rp-lab{font:600 10px var(--mono)}
+.rp-status{font:500 10.5px var(--mono);fill:var(--soft)}
+.rp-card .rp-chart{margin-top:4px}
+.rp-dot{transition:fill .2s}
+.rp-hover{stroke:#0f1528;stroke-width:1;stroke-opacity:.35;pointer-events:none}
+.rp-hdot{fill:#0f1528;stroke:#fff;stroke-width:1.5;pointer-events:none}
+.rp-hdot.b{fill:#8a93a3}
+.tip .tt{font-weight:600;margin-bottom:3px}
+.tip .tr{display:flex;justify-content:space-between;gap:16px}
+.tip .tr span{color:rgba(255,255,255,.65)}
+.rp-pill{transition:fill .2s}
+.rp-pilltext{font:600 9.5px var(--sans);fill:#fff;letter-spacing:.06em}
+.rp-pilltext.dark{fill:#4f5a6e}
+.rp-cell{transition:opacity .2s}
+.rp-cell.pending{opacity:0}
+.rp-legend{margin-bottom:12px;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.7rem;color:var(--soft);margin-top:6px;min-height:18px}
+.rp-legend span{display:inline-flex;align-items:center;gap:6px}
+.rp-legend i{display:inline-block;width:11px;height:9px;border-radius:2px}
+.a-B{background:#1593b5}.a-S{background:#e0475b}.a-H{background:#b9b5cf;opacity:.6}
+.a-x{background:repeating-linear-gradient(45deg,#fff 0 2px,#d8d6e0 2px 4px);box-shadow:inset 0 0 0 1px #d8d6e0}
+.p-L{background:#3567d8}.p-R{background:#e0475b}.p-F{background:#b9b5cf;opacity:.45}
+.rp-legend i.p-dia{width:7px;height:7px;border-radius:0;background:#8b3fd9;transform:rotate(45deg)}
+.rp-foot{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;margin-top:auto;min-height:36px;box-sizing:content-box;line-height:1.4;padding-top:12px;border-top:1px solid var(--line);transition:opacity .5s}
+.rp-foot.pending{opacity:.25}
+.rp-foot div{display:flex;flex-direction:row;align-items:baseline;gap:5px;white-space:nowrap}
+.rp-foot b{font:600 1.05rem var(--sans);font-variant-numeric:tabular-nums}
+.rp-foot .vs{font-style:normal;font-size:.7rem;color:var(--muted);margin:0 -6px}
+.rp-foot .dim b{color:var(--muted)}
+.rp-foot span{font-size:.62rem;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
+.rp-foot .up{color:#0f7a4a}.rp-foot .dn{color:#b4233a}
+.d1-replay{display:flex;width:max-content;align-items:center;gap:6px;margin-top:4px;font-size:.64rem;font-weight:600;color:#7a1fb4;letter-spacing:.02em;cursor:pointer;border:0;background:none;padding:0;white-space:nowrap}
+.play-ico{width:15px;height:15px;flex:none;transition:transform .35s var(--spring)}
+.d1-replay .play-ico{width:14px;height:14px}
+.d1-replay:hover .play-ico,.rp-again:hover .play-ico{transform:scale(1.15)}
+.rp-again{color:var(--ink);gap:8px}
+.rp-again .play-ico{color:#7a1fb4}
+.d1-replay:hover{text-decoration:underline}
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* ---------- pixel Hercules scenes (from the earlier HERCULEAN site) ---------- */
+.scene{position:relative;height:34px;overflow:hidden;color:#4f5a6e;--gold:#A9762A}
+.hero .scene{position:absolute;inset:0;height:auto;z-index:0;margin:0;pointer-events:none}
+.hero .scene::after{display:none}   /* walks on the front price ridge instead (positioned in app.js) */
+.hero .scene .walker,.hero .scene .lion,.hero .scene .flash{bottom:auto}
+.scene::after{content:'';position:absolute;left:0;right:0;bottom:7px;height:1px;background:repeating-linear-gradient(90deg,rgba(74,38,130,.28) 0 10px,transparent 10px 14px);animation:hgrnd 1.1s linear infinite}
+.scene.rev::after{animation:hgrndrev .23s linear infinite}
+.scene.js-ground::after{animation:none;background-position-x:var(--gx,0)}
+@keyframes hgrnd{to{background-position-x:-14px}}
+@keyframes hgrndrev{to{background-position-x:14px}}
+.scene .walker{position:absolute;bottom:8px;width:18px;height:24px;z-index:2;color:#4A4234}
+.scene .walker svg{position:absolute;left:0;bottom:0;height:24px;width:auto;image-rendering:pixelated}
+.scene .walker .acc{fill:var(--gold)}
+.scene .hk{position:absolute;left:0;bottom:0;width:18px;height:24px}
+.scene .hk.skin{display:none}
+.scene .fr{opacity:0;position:absolute;left:0;bottom:0}
+.scene .fr.a{opacity:1}
+.scene .lion{position:absolute;bottom:8px;font-size:17px;line-height:1;z-index:1}
+.scene.press .lion{z-index:3}
+.scene .li{display:inline-block;animation:liorise .34s steps(2) alternate infinite}
+.scene .flash{position:absolute;bottom:8px;width:26px;height:26px;border-radius:50%;opacity:0;pointer-events:none;margin-left:-4px;z-index:4;mix-blend-mode:screen;background:radial-gradient(circle,#fff 0%,#FFE9A8 35%,rgba(255,220,120,0) 70%)}
+.scene.solo .walker{transform:scaleX(-1)}
+.scene.solo .hk.skin{display:block}
+@keyframes liorise{to{transform:translateY(-2px)}}
+@media(prefers-reduced-motion:reduce){.scene .li,.scene::after{animation:none}}
+
+/* ---------- compact CTA ---------- */
+.cta-sec{padding:20px 0 0}
+.cta-card{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:26px 30px;border-radius:20px;background:var(--ink);color:#fff}
+.cta-card .mesh{position:absolute;inset:-40%;z-index:-1;filter:blur(70px);opacity:.32;pointer-events:none}
+.cta-card .mesh i{position:absolute;width:40%;aspect-ratio:1;border-radius:50%}
+.cta-card .mesh i:nth-child(1){background:#b40028;left:5%;top:20%;animation:float1 16s ease-in-out infinite alternate}
+.cta-card .mesh i:nth-child(2){background:#7800f0;right:5%;top:10%;animation:float2 19s ease-in-out infinite alternate}
+@keyframes float1{to{transform:translate(18%,12%) scale(1.15)}}
+@keyframes float2{to{transform:translate(-20%,-8%) scale(.9)}}
+.cta-text h3{font-size:1.55rem;color:#fff}
+.cta-text h3 em{font-style:italic;background:linear-gradient(90deg,#ff8aa0,#c79bff);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
+.cta-text p{margin-top:6px;font-size:.88rem;color:rgba(255,255,255,.7);max-width:62ch}
+.cta-row{display:flex;gap:10px;flex:none}
+.btn--light{background:var(--paper);color:var(--ink)}
+.btn--light::before{background:radial-gradient(110px circle at var(--mx) var(--my),rgba(120,0,240,.16),transparent 70%)}
+.game-card{text-decoration:none;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
+.game-card:hover{transform:translateY(-3px);box-shadow:0 24px 50px -24px rgba(60,20,120,.55)}
+.game-kick{display:block;font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:6px}
+.game-k{flex:1 1 300px;min-width:0;max-width:440px;height:96px}
+.game-k .gk{transform-box:fill-box;transform-origin:center;opacity:0;transform:scaleY(.2);transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
+.game-card.in .game-k .gk{opacity:1;transform:none}
+.game-go{flex:none}
+.game-card:hover .game-go .arrow{transform:translateX(3px)}
+.btn--glass{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
+.btn--glass::before{background:radial-gradient(110px circle at var(--mx) var(--my),rgba(255,255,255,.22),transparent 70%)}
+
+/* ---------- 3 · cite · resources · partners ---------- */
+.res-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:14px}
+.res-h{display:block;font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
+.bib{position:relative;overflow:hidden;isolation:isolate;border-radius:20px;background:#fff;box-shadow:var(--card-ring);padding:22px 24px}
+.bib-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
+.bib pre{margin:0;font-family:var(--mono);font-size:.74rem;line-height:1.65;color:var(--soft);white-space:pre-wrap;word-break:break-word;max-height:14.5em;overflow:auto}
+.bib-actions{display:flex;align-items:center;gap:14px}
+.paper-link{font-size:.82rem;font-weight:500;color:#6a1fc0}
+.paper-link:hover{text-decoration:underline}
+.copy-btn{border:0;font:inherit;font-size:.78rem;font-weight:500;padding:6px 14px;border-radius:999px;background:var(--paper-2);color:var(--ink);cursor:pointer;transition:background .3s,color .3s}
+.copy-btn:hover{background:var(--ink);color:#fff}
+.res-links{position:relative;overflow:hidden;isolation:isolate;border-radius:20px;background:#fff;box-shadow:var(--card-ring);padding:22px 24px;display:flex;flex-direction:column}
+.res-links .res-h{margin-bottom:6px}
+.res-links a{display:grid;grid-template-columns:110px 1fr 16px;align-items:center;gap:10px;padding:11px 0;border-top:1px solid var(--line);transition:padding .35s var(--ease)}
+.res-links a:first-of-type{border-top:0}
+.res-links a:hover{padding-left:6px}
+.res-links b{font-family:var(--serif);font-weight:500;font-size:1.15rem}
+.res-links span{font-size:.84rem;color:var(--muted)}
+.res-links i{font-style:normal;color:var(--muted);transition:color .25s,transform .35s var(--spring)}
+.res-links a:hover i{color:#7800f0;transform:translate(2px,-2px)}
+.partners{margin-top:34px;text-align:center}
+.p-logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px 36px;flex-wrap:wrap}
+.p-logos+.p-logos{margin-top:18px}
+.p-logos a{display:inline-flex;align-items:center;gap:10px;transition:transform .35s var(--spring)}
+.p-logos a:hover{transform:translateY(-2px)}
+.p-logos .p-pair{gap:8px}
+.p-logos img.crest{height:32px;max-width:none}
+.p-logos .p-word{font-family:Georgia,'Times New Roman',serif;font-size:1.3rem;color:#ed1b2f;letter-spacing:.01em}
+.p-logos .p-text{font:600 1.15rem var(--sans);letter-spacing:-.01em;color:var(--ink);cursor:default}
+.p-logos .p-dk img.crest{height:30px}
+.p-logos .p-dkw{font:700 1.15rem var(--sans);letter-spacing:-.01em;color:#0b1d45}
+.p-logos img{height:28px;width:auto;max-width:112px;object-fit:contain}
+.p-logos .p-finai img{height:30px;max-width:none}
+.p-logos img.p-mbz{height:40px;max-width:none}
+.p-logos .p-finai{font-size:1.1rem!important;font-family:var(--serif);font-size:1.25rem;font-weight:500;white-space:nowrap}
+.p-lead{display:flex;align-items:center;gap:34px;flex-wrap:wrap}
+.p-main{display:inline-flex;align-items:center;gap:12px;font-family:var(--serif);font-size:1.6rem;font-weight:500}
+.p-main img{height:38px;width:auto}
+.p-names{margin:18px auto 0;max-width:860px;font-size:.78rem;line-height:1.9;color:var(--muted)}
+.p-names span{white-space:nowrap}
+.p-names i{font-style:normal;margin:0 9px;opacity:.5}
+
+/* ---------- footer ---------- */
+.footer{padding:20px 0 28px}
+.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:24px;border-top:1px solid var(--line)}
+.copy{font-size:.82rem;color:var(--muted)}
+.to-top{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);transition:background .3s,color .3s,transform .5s var(--spring)}
+.to-top:hover{background:var(--ink);color:#fff;transform:translateY(-4px)}
+
+/* ---------- tooltip ---------- */
+.tip{position:fixed;z-index:80;pointer-events:none;padding:7px 11px;border-radius:10px;background:var(--ink);color:#fff;font-size:.76rem;line-height:1.45;max-width:280px;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s}
+.tip.on{opacity:1;transform:none}
+.tip b{font-weight:600}
+.tip span{color:rgba(255,255,255,.65)}
+
+/* ---------- responsive ---------- */
+@media (max-width:1080px){
+  .wf-grid{grid-template-columns:repeat(2,1fr)}
+  .d1-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.d1{padding-left:10px}
+  .lb-cols,.lb-row .in{grid-template-columns:28px minmax(180px,240px) minmax(100px,1fr) 220px 14px;gap:10px}
+}
+@media (max-width:980px){
+  .hero{min-height:auto;padding:120px 0 70px}
+  .hero-grid{grid-template-columns:1fr;gap:40px}
+  .hero-viz{max-width:560px;height:430px}
+  .sec-head{flex-direction:column;align-items:start}
+  .lb-claim{padding-left:0;border-left:0}
+  .res-grid{grid-template-columns:1fr}
+  .rk-head{grid-template-columns:1fr}
+  .rp-grid{grid-template-columns:1fr}
+  .cta-card{flex-direction:column;align-items:start}
+  .game-k{width:100%}
+  .partners{grid-template-columns:1fr}
+}
+@media (max-width:760px){
+  .links{display:none}
+  .wrap{padding:0 18px}
+  .section{padding:64px 0}
+  .wf-grid{grid-template-columns:1fr}
+  .board{overflow-x:auto}
+  .lb-cols,.lb-rows{min-width:760px}
+  .stats{gap:24px}.stats b{font-size:2.1rem}
+  .podium{gap:5px}.col .nm{font-size:.62rem}.hero-viz{padding:18px 14px 14px}
+  .d1-cards{grid-template-columns:1fr}
 }
+@media (prefers-reduced-motion:reduce){
+  .ticker{overflow-x:auto}.ticker-track{animation:none}
+  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}
+}
+
+/* "Trade" buttons (hero + game card): on hover the whole pill turns into a bright brand gradient; $ badge */
+.btn--trade::before,.btn--trade.btn--light::before{background:linear-gradient(100deg,#ff2d5f,#c026d3 52%,#8b3dff);opacity:0;transition:opacity .35s var(--ease)}
+.btn--trade:hover::before,.game-card:hover .btn--trade::before,.btn--trade.fh::before{opacity:1}
+.btn--trade:hover,.game-card:hover .btn--trade,.btn--trade.fh{color:#fff;box-shadow:0 12px 30px -10px rgba(192,38,211,.6)}
+.btn--trade .dol{width:1.15em;height:1.15em;flex:none;color:#ffcf5a;transition:transform .45s var(--spring)}
+.btn--trade .dol text{fill:#3a2400}
+.btn--trade.btn--light .dol{color:#f0b429}
+.btn--trade:hover .dol,.game-card:hover .btn--trade .dol,.btn--trade.fh .dol{transform:rotate(-14deg) scale(1.12)}
+
+/* Rankings · field view */
+.rk-chart .f-grid{stroke:rgba(74,38,130,.07)}
+.rk-chart .f-lane{transition:transform .8s var(--ease);cursor:pointer}
+.rk-chart .f-line{stroke:rgba(74,38,130,.18)}
+.rk-chart .f-name{font-size:13px;font-weight:600}
+.rk-chart .f-mean{stroke-width:2.6;stroke-linecap:round;transition:x1 .8s var(--ease),x2 .8s var(--ease)}
+.rk-chart .f-mv{font:500 12px var(--mono);fill:var(--soft)}
+.rk-chart .f-note{cursor:pointer;transition:transform .8s var(--ease)}
+.rk-chart .f-note circle{stroke:#fff;stroke-width:2;opacity:.25;transition:opacity .25s,r .2s}
+.rk-chart .f-note .f-bb{font:600 9.5px var(--mono);letter-spacing:-.02em;fill:#fff;pointer-events:none;opacity:.6;transition:opacity .25s}
+.rk-chart svg.all .f-note circle,.rk-chart .f-note.lit circle,.rk-chart .f-note.sel circle,.rk-chart .f-note.pv circle{opacity:.92}
+.rk-chart svg.all .f-note .f-bb,.rk-chart .f-note.lit .f-bb,.rk-chart .f-note.sel .f-bb,.rk-chart .f-note.pv .f-bb{opacity:1}
+.rk-chart .f-note.sel circle{stroke:var(--ink);stroke-width:2.5;r:17.5}
+.rk-chart .f-note.pv circle{r:17.5}
+.rk-chart .f-trace{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-dasharray:4 4;opacity:0;transition:opacity .25s;pointer-events:none}
+.rk-chart .f-trace.on{opacity:.5}
+.rk-chart .f-kdot{fill:#2a3042;stroke:#fff;stroke-width:2}
+.rk-chart .f-kbb{font:600 8px var(--mono);letter-spacing:-.02em;fill:#fff}
+.rk-chart .f-kname{font:500 11.5px var(--sans);fill:var(--soft)}
+
+/* "Cite HERCULEAN": the lion medal from the hero badge */
+.cite-lion{display:inline-grid;place-items:center;width:42px;height:42px;margin-left:16px;border-radius:50%;background:var(--g);box-shadow:0 8px 20px -10px rgba(120,0,240,.6);vertical-align:.1em}
+.cite-lion svg{width:36px;height:36px}
+/* the mane turns slowly; the face stays upright (app.js speeds it up on hover) */
+.cite-lion .mane{transform-box:view-box;transform-origin:12px 12.6px;animation:maneSpin 14s linear infinite}
+@keyframes maneSpin{to{transform:rotate(360deg)}}
+@media(prefers-reduced-motion:reduce){.cite-lion .mane{animation:none}}
+
+/* coins for the Trade buttons (flat) */
+.coin-layer{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:60}
+.coin{position:absolute;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font:800 9.5px/1 Inter,system-ui,sans-serif;font-style:normal;color:#7a4a00;background:#f5bf2e;box-shadow:inset 0 0 0 1.5px #d69a12;will-change:transform,opacity}
+
+/* the HERCULEAN name is set in Cinzel (Roman/Greek inscription capitals) wherever it appears as a mark */
+.edge-l .e-name{font:700 12px var(--brand);letter-spacing:.34em}
+.sec-h2 em.herc{font-family:var(--brand);font-style:normal;font-weight:600;letter-spacing:.01em}
 
-.card p:last-child {
-	margin-bottom: 0;
+/* ---------- phones (≤760px). Desktop layout is untouched: every rule below sits in this media query. ---------- */
+@media (max-width:760px){
+  .hero{padding:96px 0 40px}
+  .award{font-size:.68rem;white-space:nowrap;gap:7px;padding-right:11px}.award .medal{width:24px;height:24px}.award .medal svg{width:20px;height:20px}
+  .hero-ctas{flex-wrap:nowrap;gap:10px}.hero-ctas .btn--lg{padding:11px 15px;font-size:.84rem;white-space:nowrap;gap:7px}
+  .stats{display:grid;grid-template-columns:repeat(5,auto);justify-content:space-between;gap:10px;margin:22px 0 24px}
+  .stats b{font-size:1.7rem}.stats span{font-size:.66rem;margin-top:5px}
+  .hero-viz{height:540px}
+  .hero-claim{white-space:normal}
+  .sec-h2.one-line{white-space:normal}
+  /* Rankings: the picker and the three charts keep a readable size and scroll sideways */
+  .rk-head{gap:14px}
+  .picker{grid-template-columns:auto repeat(6,50px);gap:3px 4px;padding:8px 10px;overflow-x:auto;justify-content:start}
+  .picker .pk-col{font-size:.58rem;white-space:nowrap}
+  .rk-chart{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:10px 8px 6px}
+  .rk-chart > svg{width:760px;max-width:none}
+  .rk-view{position:sticky;left:0;width:calc(100vw - 52px)}
+  .rk-view button{gap:6px;padding:0 6px}.rk-view button svg{display:none}.rk-view button b{font-size:.8rem;white-space:nowrap}
+  .rk-view .go{display:none}
+  /* tables that scroll sideways get a fading edge as a hint */
+  .keys{white-space:normal;flex-wrap:wrap}
+  .board{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
 }