Publish RoleRouteBench trajectory explorer

Add the static trajectory viewer, JEV reference results, public/private isolation design, and router-submission links. The Space runs entirely in the browser and executes no model.

README.md

@@ -1,12 +1,18 @@
 ---
 title: RoleRouteBench Explorer
-emoji: 🐨
-colorFrom: pink
-colorTo: pink
+emoji: 🧭
+colorFrom: blue
+colorTo: indigo
 sdk: static
+app_file: index.html
 pinned: false
 license: apache-2.0
-short_description: Explore live multi-agent routing trajectories and results.
+datasets:
+- TrangBui/RoleRouteBench
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# RoleRouteBench Explorer
+
+Static trajectory explorer and reference-results dashboard for
+[RoleRouteBench](https://huggingface.co/datasets/TrangBui/RoleRouteBench).
+It runs entirely in the browser and does not execute a router or model.

app.js

@@ -0,0 +1,89 @@
+const state = { data: null, packet: null };
+const byId = (id) => document.getElementById(id);
+const esc = (value) => String(value ?? "").replace(/[&<>'"]/g, (char) => ({"&":"&amp;","<":"&lt;",">":"&gt;","'":"&#39;",'"':"&quot;"}[char]));
+const percent = (part, total) => total ? `${Math.round(part * 100 / total)}%` : "—";
+
+async function loadData() {
+  const response = await fetch("benchmark.json");
+  if (!response.ok) throw new Error(`data request failed (${response.status})`);
+  return response.json();
+}
+
+function renderResults(runs) {
+  byId("results-body").innerHTML = runs.map((run) => `
+    <tr>
+      <td><strong>${esc(run.domain_label)}</strong></td>
+      <td>${run.packet_count}</td>
+      <td>${run.trajectory_passed}/${run.packet_count} <span class="badge">${percent(run.trajectory_passed, run.packet_count)}</span></td>
+      <td>${run.independent_end_task_passed}/${run.packet_count} <span class="badge">${percent(run.independent_end_task_passed, run.packet_count)}</span></td>
+      <td>${run.primary_routing_decisions}</td>
+      <td>${run.suppressed_by_budget}</td>
+    </tr>`).join("");
+}
+
+function unique(values) { return [...new Set(values.filter(Boolean))].sort(); }
+function fillSelect(select, values, label) {
+  select.innerHTML = `<option value="">${label}</option>` + values.map((value) => `<option value="${esc(value)}">${esc(value)}</option>`).join("");
+}
+
+function availablePackets() {
+  const domain = byId("domain-filter").value;
+  return state.data.packets.filter((packet) => !domain || packet.domain === domain);
+}
+
+function updatePacketOptions(keepSelection = true) {
+  const select = byId("packet-filter");
+  const previous = keepSelection ? select.value : "";
+  const packets = availablePackets();
+  select.innerHTML = packets.map((packet) => `<option value="${esc(packet.packet_id)}">${esc(packet.packet_id)}</option>`).join("");
+  if (packets.some((packet) => packet.packet_id === previous)) select.value = previous;
+  renderPacket();
+}
+
+function renderPacket() {
+  const id = byId("packet-filter").value;
+  state.packet = state.data.packets.find((packet) => packet.packet_id === id) || availablePackets()[0];
+  if (!state.packet) return;
+  byId("packet-filter").value = state.packet.packet_id;
+  const p = state.packet;
+  byId("packet-summary").innerHTML = `
+    <div class="packet-summary-head">
+      <div><h3>${esc(p.packet_id)}</h3><div class="badges"><span class="badge">${esc(p.domain_label)}</span><span class="badge">${esc(p.executor_model)}</span><span class="badge">${p.primary_routing_decisions} primary decisions</span></div></div>
+      <div class="badges"><span class="status ${p.trajectory_passed ? "success" : "failed"}">trajectory ${p.trajectory_passed ? "pass" : "fail"}</span><span class="status ${p.independent_end_task_passed ? "success" : "failed"}">trusted ${p.independent_end_task_passed ? "pass" : "fail"}</span></div>
+    </div><p>${esc(p.task)}</p>`;
+  renderSteps();
+}
+
+function renderSteps() {
+  const role = byId("role-filter").value;
+  const status = byId("status-filter").value;
+  const rows = state.packet.steps.filter((step) => (!role || step.role === role) && (!status || step.event_status === status));
+  byId("trajectory").innerHTML = rows.length ? rows.map((step) => `
+    <article class="trajectory-step">
+      <div class="step-number">#${String(step.index).padStart(2,"0")}</div>
+      <div class="step-role"><strong>${esc(step.role)}</strong><small>budget before: ${esc(step.budget_before)} · confidence: ${step.confidence == null ? "—" : Number(step.confidence).toFixed(2)}</small><span class="event-pill">${esc(step.event_status)} · ${esc(step.semantic_delta)}</span></div>
+      <div class="state-change"><small>state before → after</small><code>${esc(step.state_before || "not executed")}</code><code>→ ${esc(step.state_after || "not executed")}</code></div>
+      <div class="choice-list">top choices<br>${step.top_choices.map((choice) => `${esc(choice.role)} ${(choice.probability * 100).toFixed(0)}%`).join(" · ") || "not recorded"}</div>
+    </article>`).join("") : `<p class="error">No step matches the active role and status filters.</p>`;
+}
+
+async function init() {
+  try {
+    state.data = await loadData();
+    renderResults(state.data.runs);
+    const domains = state.data.runs.map((run) => run.domain);
+    byId("domain-filter").innerHTML += domains.map((domain) => `<option value="${esc(domain)}">${esc(state.data.runs.find((run) => run.domain === domain).domain_label)}</option>`).join("");
+    fillSelect(byId("role-filter"), unique(state.data.packets.flatMap((packet) => packet.steps.map((step) => step.role))), "All roles");
+    fillSelect(byId("status-filter"), unique(state.data.packets.flatMap((packet) => packet.steps.map((step) => step.event_status))), "All statuses");
+    updatePacketOptions(false);
+    byId("domain-filter").addEventListener("change", () => updatePacketOptions(false));
+    byId("packet-filter").addEventListener("change", renderPacket);
+    byId("role-filter").addEventListener("change", renderSteps);
+    byId("status-filter").addEventListener("change", renderSteps);
+  } catch (error) {
+    byId("results-body").innerHTML = `<tr><td colspan="6" class="error">Could not load explorer data: ${esc(error.message)}</td></tr>`;
+    byId("trajectory").innerHTML = `<p class="error">Explorer data is unavailable.</p>`;
+  }
+}
+
+document.addEventListener("DOMContentLoaded", init);

index.html

@@ -1,19 +1,156 @@
 <!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">
+  <meta name="description" content="Explore RoleRouteBench live multi-agent routing trajectories, JEV reference results, and the public/private isolation protocol.">
+  <meta name="theme-color" content="#08111f">
+  <title>RoleRouteBench — Dynamic role routing, made inspectable</title>
+  <link rel="stylesheet" href="styles.css">
+  <script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "Dataset",
+    "name": "RoleRouteBench",
+    "alternateName": "RoutingBench V4-beta",
+    "description": "A reproducible multi-domain benchmark for dynamic role routing in multi-agent systems, with 82 live trajectories across four domains.",
+    "identifier": "https://doi.org/10.57967/hf/11430",
+    "url": "https://huggingface.co/datasets/TrangBui/RoleRouteBench",
+    "version": "4.0.0-beta.2",
+    "creator": {"@type": "Person", "name": "Trang Bui"},
+    "license": "https://huggingface.co/datasets/TrangBui/RoleRouteBench/blob/main/LICENSE_DATA",
+    "sameAs": [
+      "https://doi.org/10.57967/hf/11430",
+      "https://huggingface.co/datasets/TrangBui/RoleRouteBench",
+      "https://github.com/BuiThiThanhTrang/RACO_MAS"
+    ],
+    "keywords": ["multi-agent systems", "dynamic routing", "agent orchestration", "tool use", "benchmark", "live trajectories"]
+  }
+  </script>
+</head>
+<body>
+  <a class="skip-link" href="#main">Skip to content</a>
+  <header class="site-header">
+    <a class="brand" href="#top" aria-label="RoleRouteBench home">
+      <span class="brand-mark">RR</span>
+      <span>RoleRouteBench</span>
+    </a>
+    <nav aria-label="Primary navigation">
+      <a href="#results">Results</a>
+      <a href="#explorer">Explorer</a>
+      <a href="#isolation">Isolation</a>
+      <a href="#submit">Submit</a>
+    </nav>
+    <a class="header-link" href="https://huggingface.co/datasets/TrangBui/RoleRouteBench">Dataset ↗</a>
+  </header>
+
+  <main id="main">
+    <section class="hero" id="top">
+      <div class="hero-copy">
+        <p class="eyebrow">Frozen environment · live consequences · multi-step tasks</p>
+        <h1>Dynamic role routing,<br><span>made inspectable.</span></h1>
+        <p class="hero-lede">RoleRouteBench evaluates whether a decision model can coordinate specialized executors across evolving task states—not merely whether the final answer happens to be correct.</p>
+        <div class="hero-actions">
+          <a class="button primary" href="#explorer">Explore trajectories</a>
+          <a class="button secondary" href="https://doi.org/10.57967/hf/11430">DOI 10.57967/hf/11430 ↗</a>
+        </div>
+      </div>
+      <div class="route-card" aria-label="Illustrative routing trajectory">
+        <div class="route-card-head"><span>packet / live state</span><span class="live-dot">LIVE</span></div>
+        <div class="route-step"><span class="step-index">01</span><div><strong>Inspect evidence</strong><small>state changed</small></div><span class="status success">success</span></div>
+        <div class="route-line"></div>
+        <div class="route-step"><span class="step-index">02</span><div><strong>Author candidate</strong><small>artifact created</small></div><span class="status success">success</span></div>
+        <div class="route-line warning"></div>
+        <div class="route-step"><span class="step-index">03</span><div><strong>Execute candidate</strong><small>failure preserved</small></div><span class="status failed">failed</span></div>
+        <div class="route-line"></div>
+        <div class="route-step"><span class="step-index">04</span><div><strong>Diagnose & repair</strong><small>new routed action</small></div><span class="status success">success</span></div>
+      </div>
+    </section>
+
+    <section class="stats" aria-label="Benchmark summary">
+      <div><strong>82</strong><span>live trajectories</span></div>
+      <div><strong>4</strong><span>task domains</span></div>
+      <div><strong>568</strong><span>primary decisions</span></div>
+      <div><strong>33</strong><span>specialized roles</span></div>
+    </section>
+
+    <section class="section why">
+      <div class="section-kicker">Why RoleRouteBench?</div>
+      <div class="why-grid">
+        <h2>Final task success cannot tell you whether a router coordinated well.</h2>
+        <div class="why-copy">
+          <p>Outcome quality also depends on the frozen executor. RoleRouteBench therefore retains every routing decision, failed action, state transition, budget event, and independent evaluator result.</p>
+          <p>Competing routers see the same public state, role pool, adapters, executors, budgets, and evaluator. The environment stays fixed; only the routing policy changes.</p>
+        </div>
+      </div>
+    </section>
+
+    <section class="section" id="results">
+      <div class="section-heading">
+        <div><div class="section-kicker">Reference system</div><h2>JEV 1.13 results</h2></div>
+        <p>Reference signals for environment validation—not an oracle and not a composite leaderboard score.</p>
+      </div>
+      <div class="table-wrap">
+        <table>
+          <thead><tr><th>Domain</th><th>Packets</th><th>Trajectory pass</th><th>Trusted task pass</th><th>Primary decisions</th><th>Budget-suppressed</th></tr></thead>
+          <tbody id="results-body"><tr><td colspan="6">Loading reference results…</td></tr></tbody>
+        </table>
+      </div>
+    </section>
+
+    <section class="section explorer-section" id="explorer">
+      <div class="section-heading">
+        <div><div class="section-kicker">Trajectory explorer</div><h2>Follow each routed consequence</h2></div>
+        <p>Filter public compact traces. Raw prompts and executor outputs are not included.</p>
+      </div>
+      <div class="filters" aria-label="Trajectory filters">
+        <label>Domain<select id="domain-filter"><option value="">All domains</option></select></label>
+        <label>Packet<select id="packet-filter"></select></label>
+        <label>Role<select id="role-filter"><option value="">All roles</option></select></label>
+        <label>Event status<select id="status-filter"><option value="">All statuses</option></select></label>
+      </div>
+      <div class="packet-summary" id="packet-summary" aria-live="polite"></div>
+      <div class="trajectory" id="trajectory" aria-live="polite"></div>
+    </section>
+
+    <section class="section isolation-section" id="isolation">
+      <div class="section-heading">
+        <div><div class="section-kicker">Evaluation boundary</div><h2>Public/private isolation by construction</h2></div>
+        <p>“Private” means evaluator-only under the benchmark protocol; the artifacts remain downloadable for transparent reproduction.</p>
+      </div>
+      <div class="isolation-grid">
+        <div class="boundary public-boundary">
+          <span class="boundary-label">ROUTER + EXECUTOR VISIBLE</span>
+          <h3>Public state</h3>
+          <ul><li>Task and public artifacts</li><li>Full role pool plus STOP</li><li>Prior observable consequences</li><li>Remaining call budget</li></ul>
+        </div>
+        <div class="boundary-flow" aria-hidden="true"><span>route</span><b>→</b><span>execute</span><b>→</b><span>observe</span></div>
+        <div class="boundary private-boundary">
+          <span class="boundary-label">EVALUATOR ONLY</span>
+          <h3>Reference state</h3>
+          <ul><li>Gold patches and proofs</li><li>Answer workbooks and oracles</li><li>Trusted evaluator results</li><li>Track A labels</li></ul>
+        </div>
+      </div>
+      <p class="boundary-note">The evaluator runs only after termination. It does not feed private artifacts back into the trajectory.</p>
+    </section>
+
+    <section class="section submit-section" id="submit">
+      <div>
+        <div class="section-kicker">Community evaluation</div>
+        <h2>Bring your own router.</h2>
+        <p>JEV is the reference system. Submit reproducible results from another decision model under the frozen environment—without sending us your model.</p>
+      </div>
+      <div class="submit-actions">
+        <a class="button primary" href="https://github.com/BuiThiThanhTrang/RACO_MAS/issues/new?template=router-result.yml">Submit router results ↗</a>
+        <a class="button secondary" href="https://github.com/BuiThiThanhTrang/RACO_MAS/blob/main/puppeteer/CONTRIBUTING_ROUTER_RESULTS.md">Read the protocol ↗</a>
+      </div>
+    </section>
+  </main>
+
+  <footer>
+    <div><strong>RoleRouteBench</strong><span>Version 4.0.0-beta.2 · DOI 10.57967/hf/11430</span></div>
+    <div class="footer-links"><a href="https://huggingface.co/datasets/TrangBui/RoleRouteBench">Dataset</a><a href="https://github.com/BuiThiThanhTrang/RACO_MAS">Code</a><a href="https://doi.org/10.57967/hf/11430">DOI</a></div>
+  </footer>
+  <script src="app.js" defer></script>
+</body>
 </html>

robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://buithithanhtrang.github.io/RACO_MAS/sitemap.xml

sitemap.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://buithithanhtrang.github.io/RACO_MAS/</loc>
+    <lastmod>2026-11-04</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>1.0</priority>
+  </url>
+</urlset>

styles.css

@@ -0,0 +1,123 @@
+:root {
+  --bg: #07101d;
+  --panel: #0d1929;
+  --panel-2: #112238;
+  --text: #edf5ff;
+  --muted: #9cb0c9;
+  --line: #233b58;
+  --cyan: #53dddb;
+  --blue: #71a7ff;
+  --green: #59d391;
+  --red: #ff7f7f;
+  --amber: #f1c76d;
+  --max: 1180px;
+}
+* { box-sizing: border-box; }
+html { scroll-behavior: smooth; }
+body { margin: 0; color: var(--text); background: var(--bg); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.55; }
+a { color: inherit; }
+.skip-link { position: absolute; left: -9999px; top: 1rem; z-index: 20; background: white; color: black; padding: .7rem 1rem; }
+.skip-link:focus { left: 1rem; }
+.site-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 2rem; padding: 1rem max(1.25rem, calc((100vw - var(--max))/2)); border-bottom: 1px solid rgba(113,167,255,.18); background: rgba(7,16,29,.9); backdrop-filter: blur(16px); }
+.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; font-weight: 740; letter-spacing: -.02em; }
+.brand-mark { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: .65rem; color: #07101d; background: linear-gradient(135deg,var(--cyan),var(--blue)); font-size: .72rem; letter-spacing: .04em; }
+nav { display: flex; gap: 1.4rem; margin-left: auto; }
+nav a, .header-link { color: var(--muted); text-decoration: none; font-size: .9rem; }
+nav a:hover, .header-link:hover { color: var(--text); }
+.header-link { padding-left: 1.5rem; border-left: 1px solid var(--line); }
+.hero { max-width: var(--max); margin: 0 auto; padding: 7rem 1.25rem 5rem; display: grid; grid-template-columns: 1.12fr .88fr; gap: 4rem; align-items: center; }
+.hero::before { content: ""; position: absolute; inset: 4rem 0 auto; height: 34rem; pointer-events: none; background: radial-gradient(circle at 22% 40%, rgba(42,125,187,.24), transparent 34%), radial-gradient(circle at 82% 18%, rgba(83,221,219,.13), transparent 30%); }
+.hero-copy, .route-card { position: relative; }
+.eyebrow, .section-kicker { color: var(--cyan); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 760; }
+h1 { margin: 1rem 0 1.4rem; max-width: 13ch; font-size: clamp(3rem, 6vw, 5.8rem); line-height: .97; letter-spacing: -.065em; }
+h1 span { color: transparent; background: linear-gradient(90deg,var(--cyan),var(--blue)); background-clip: text; -webkit-background-clip: text; }
+.hero-lede { max-width: 63ch; color: #b7c8da; font-size: 1.1rem; }
+.hero-actions, .submit-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
+.button { display: inline-flex; justify-content: center; align-items: center; min-height: 2.8rem; padding: .72rem 1.05rem; border-radius: .65rem; text-decoration: none; font-weight: 700; font-size: .9rem; }
+.button.primary { color: #06101b; background: var(--cyan); }
+.button.primary:hover { background: #78ece9; }
+.button.secondary { color: var(--text); border: 1px solid var(--line); background: rgba(16,31,51,.58); }
+.button.secondary:hover { border-color: var(--blue); }
+.route-card { padding: 1.2rem; border: 1px solid var(--line); border-radius: 1rem; background: linear-gradient(160deg,rgba(17,34,56,.98),rgba(8,20,34,.95)); box-shadow: 0 28px 80px rgba(0,0,0,.36); }
+.route-card-head { display: flex; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid var(--line); color: var(--muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .72rem; }
+.live-dot { color: var(--green); }
+.route-step { display: grid; grid-template-columns: 2.2rem 1fr auto; align-items: center; gap: .85rem; padding: .9rem .3rem; }
+.step-index { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); font: .72rem ui-monospace, monospace; }
+.route-step div { display: flex; flex-direction: column; }
+.route-step small { color: var(--muted); }
+.status { border-radius: 999px; padding: .25rem .5rem; font: .67rem ui-monospace, monospace; }
+.status.success { color: var(--green); background: rgba(89,211,145,.1); }
+.status.failed { color: var(--red); background: rgba(255,127,127,.1); }
+.route-line { width: 1px; height: .75rem; margin: -.4rem 0 -.4rem 1.28rem; background: var(--green); }
+.route-line.warning { background: var(--red); }
+.stats { max-width: var(--max); margin: 0 auto; padding: 0 1.25rem 5rem; display: grid; grid-template-columns: repeat(4,1fr); }
+.stats div { padding: 1.4rem 1.6rem; border-block: 1px solid var(--line); border-right: 1px solid var(--line); }
+.stats div:first-child { border-left: 1px solid var(--line); }
+.stats strong { display: block; font-size: 2rem; letter-spacing: -.04em; }
+.stats span { color: var(--muted); font-size: .84rem; }
+.section { max-width: var(--max); margin: 0 auto; padding: 5.5rem 1.25rem; border-top: 1px solid var(--line); }
+.why-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 5rem; margin-top: 1rem; }
+h2 { margin: .65rem 0 1rem; font-size: clamp(2rem,4vw,3.3rem); line-height: 1.08; letter-spacing: -.045em; }
+.why-copy, .section-heading > p, .boundary-note { color: var(--muted); }
+.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 3rem; margin-bottom: 2rem; }
+.section-heading > p { max-width: 48ch; }
+.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: .8rem; }
+table { width: 100%; border-collapse: collapse; min-width: 760px; background: rgba(13,25,41,.72); }
+th, td { padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); text-align: left; }
+th { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
+tbody tr:last-child td { border-bottom: 0; }
+.filters { display: grid; grid-template-columns: 1.15fr 1.55fr 1.15fr 1fr; gap: .8rem; }
+label { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
+select { width: 100%; margin-top: .45rem; padding: .72rem .8rem; border: 1px solid var(--line); border-radius: .55rem; color: var(--text); background: var(--panel); font: inherit; text-transform: none; letter-spacing: 0; }
+.packet-summary { margin: 1.3rem 0; padding: 1.2rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--panel); }
+.packet-summary-head { display: flex; justify-content: space-between; gap: 1rem; }
+.packet-summary h3 { margin: 0 0 .5rem; font: 700 1rem ui-monospace, monospace; }
+.packet-summary p { margin: .7rem 0 0; color: var(--muted); }
+.badges { display: flex; flex-wrap: wrap; gap: .4rem; }
+.badge { padding: .25rem .5rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .7rem; }
+.trajectory { display: grid; gap: .7rem; }
+.trajectory-step { display: grid; grid-template-columns: 3rem minmax(11rem,1.1fr) minmax(12rem,.9fr) minmax(13rem,1.2fr); gap: 1rem; align-items: center; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: .7rem; background: rgba(13,25,41,.72); }
+.trajectory-step.hidden { display: none; }
+.step-number { color: var(--muted); font: .75rem ui-monospace, monospace; }
+.step-role strong { display: block; }
+.step-role small, .state-change small { color: var(--muted); }
+.state-change code { display: block; overflow: hidden; text-overflow: ellipsis; color: var(--blue); font-size: .72rem; }
+.choice-list { color: var(--muted); font-size: .76rem; }
+.event-pill { display: inline-block; width: fit-content; margin-top: .35rem; padding: .18rem .45rem; border-radius: 999px; background: rgba(113,167,255,.1); color: var(--blue); font-size: .68rem; }
+.isolation-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: stretch; }
+.boundary { padding: 1.6rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--panel); }
+.public-boundary { border-top: 3px solid var(--cyan); }
+.private-boundary { border-top: 3px solid var(--amber); }
+.boundary h3 { margin: .65rem 0; font-size: 1.55rem; }
+.boundary-label { color: var(--muted); font: .68rem ui-monospace, monospace; letter-spacing: .08em; }
+.boundary ul { margin: .8rem 0 0; padding-left: 1.15rem; color: var(--muted); }
+.boundary-flow { display: flex; align-items: center; gap: .45rem; color: var(--muted); font: .68rem ui-monospace, monospace; writing-mode: vertical-rl; }
+.boundary-note { text-align: center; }
+.submit-section { display: flex; justify-content: space-between; align-items: center; gap: 3rem; margin-bottom: 5rem; padding: 3rem; border: 1px solid var(--line); border-radius: 1rem; background: linear-gradient(120deg,rgba(19,55,75,.78),rgba(14,29,49,.85)); }
+.submit-section p { max-width: 60ch; color: var(--muted); }
+footer { max-width: var(--max); margin: 0 auto; padding: 2rem 1.25rem 3rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; color: var(--muted); }
+footer div:first-child { display: flex; flex-direction: column; }
+.footer-links { display: flex; gap: 1rem; }
+.error { color: var(--red); }
+@media (max-width: 900px) {
+  nav { display: none; }
+  .header-link { margin-left: auto; }
+  .hero, .why-grid { grid-template-columns: 1fr; }
+  .hero { padding-top: 4.5rem; }
+  .stats { grid-template-columns: repeat(2,1fr); }
+  .filters { grid-template-columns: 1fr 1fr; }
+  .trajectory-step { grid-template-columns: 2.5rem 1fr; }
+  .state-change, .choice-list { grid-column: 2; }
+  .isolation-grid { grid-template-columns: 1fr; }
+  .boundary-flow { writing-mode: initial; justify-content: center; padding: .5rem; }
+  .submit-section, .section-heading { align-items: flex-start; flex-direction: column; }
+}
+@media (max-width: 560px) {
+  .site-header { gap: .5rem; }
+  .header-link { display: none; }
+  h1 { font-size: 3.25rem; }
+  .stats, .filters { grid-template-columns: 1fr; }
+  .stats div { border-left: 1px solid var(--line); }
+  .packet-summary-head, footer { flex-direction: column; }
+  .submit-section { padding: 2rem 1.2rem; margin-inline: 1rem; }
+}