Sync pipeline status

README.md

@@ -1,10 +1,14 @@
 ---
 title: Beam Verified Python
-emoji: 🌍
-colorFrom: red
+emoji: 🧪
+colorFrom: blue
 colorTo: green
 sdk: static
 pinned: false
+license: apache-2.0
+short_description: Python problems written by Beam, kept only if they pass.
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Live status of a synthetic dataset built with [Beam-1.0-501B-A23B](https://huggingface.co/reflection/Beam-1.0-501B-A23B):
+Beam writes a Python exercise, a reference solution and unit tests; a problem is kept only if the
+solution passes every test in a sandbox and the tests reject trivial fake answers.

app.js

@@ -0,0 +1,335 @@
+const FAKES = ["return None", "return 0", "return ''", "return []", "return False", "return first argument"];
+const REASONS = {
+  api_error: ["The API call failed", "Beam never answered (network error, timeout or rate limit). These are retried on the next run."],
+  unparseable: ["No readable JSON", "Beam's reply didn't contain the problem in the required format."],
+  missing_fields: ["Missing pieces", "The reply lacked a title, prompt, solution or test list."],
+  solution_syntax: ["Solution doesn't parse", "The reference solution has a Python syntax error."],
+  entry_point_missing: ["Function not defined", "The solution never defines the function the tests call."],
+  disallowed_import: ["Unsafe import", "The solution imports a module outside the pure standard-library allowlist."],
+  too_few_valid_tests: ["Too few tests", "Fewer than six well-formed assert statements that call the function."],
+  timeout: ["Too slow", "Running the tests took longer than the time limit."],
+  solution_load_error: ["Solution crashes on load", "Defining the solution raised an error before any test ran."],
+  solution_fails_tests: ["Fails its own tests", "Beam's solution and Beam's tests disagree, so at least one of them is wrong."],
+  tests_too_weak: ["Tests too weak", "A fake answer like return None passed every test."],
+  duplicate: ["Duplicate", "Same problem statement as one already kept."],
+};
+
+const $ = (id) => document.getElementById(id);
+const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+const fmt = (n) => Number(n || 0).toLocaleString("en-US");
+const el = (tag, cls, text) => {
+  const e = document.createElement(tag);
+  if (cls) e.className = cls;
+  if (text != null) e.textContent = text;
+  return e;
+};
+
+function ago(iso) {
+  const s = Math.max(0, (Date.now() - new Date(iso).getTime()) / 1000);
+  if (s < 90) return "just now";
+  if (s < 5400) return `${Math.round(s / 60)} minutes ago`;
+  if (s < 129600) return `${Math.round(s / 3600)} hours ago`;
+  return `${Math.round(s / 86400)} days ago`;
+}
+
+function md(text) {
+  return DOMPurify.sanitize(marked.parse(text || ""));
+}
+
+function highlightIn(root) {
+  if (!window.hljs) return;
+  root.querySelectorAll("pre code").forEach((b) => {
+    if (!b.className) b.className = "language-python";
+    hljs.highlightElement(b);
+  });
+}
+
+/* ---------- header + funnel + ledger ---------- */
+
+function renderStatus(status) {
+  const generated = status.funnel[0].count;
+  const kept = status.funnel[status.funnel.length - 1].count;
+  $("bar-status").textContent = `Updated ${ago(status.updated_at)}`;
+  const hs = $("headline-status");
+  hs.innerHTML = "";
+  if (!generated) {
+    hs.textContent = "No problems generated yet. Run the generator, then sync this page.";
+    return;
+  }
+  hs.append(el("strong", null, `${fmt(kept)} of ${fmt(generated)}`), ` problems Beam has written so far passed every check.`);
+
+  const funnel = $("funnel");
+  funnel.innerHTML = "";
+  for (const stage of status.funnel) {
+    const li = el("li");
+    const top = el("div", "f-top");
+    top.append(el("span", "f-label", stage.label), el("span", "f-count", fmt(stage.count)));
+    const bar = el("div", "f-bar");
+    const fill = el("span");
+    fill.style.width = `${generated ? (100 * stage.count) / generated : 0}%`;
+    bar.append(fill);
+    const body = el("div");
+    body.append(top, bar);
+    const lostEntries = Object.entries(stage.lost);
+    const lost = el("p", lostEntries.length ? "f-lost" : "f-lost none");
+    lost.textContent = lostEntries.length
+      ? lostEntries.map(([r, n]) => `${fmt(n)} dropped: ${(REASONS[r] || [r])[0].toLowerCase()}`).join("; ")
+      : stage.key === "generated" ? "Every reply Beam sent back" : "None dropped here";
+    li.append(body, lost);
+    funnel.append(li);
+  }
+
+  const t = status.tokens || {};
+  const perRow = generated ? (t.completion || 0) / generated : 0;
+  const rows = [
+    ["Beam output tokens", fmt(t.completion), `${fmt(t.reasoning)} of them spent thinking`],
+    ["Prompt tokens", fmt(t.prompt), null],
+    ["Output tokens per problem", fmt(Math.round(perRow)), perRow ? `about ${fmt(Math.floor(1e6 / perRow))} problems per million output tokens` : null],
+    ["Typical call", status.median_seconds_per_call != null ? `${status.median_seconds_per_call}s` : "–", null],
+    ["Served by", Object.entries(status.providers).map(([p, n]) => `${p} (${fmt(n)})`).join(", ") || "–", null],
+  ];
+  const dl = el("dl");
+  for (const [k, v, note] of rows) {
+    const dd = el("dd", null, v);
+    if (note) dd.append(el("small", null, note));
+    dl.append(el("dt", null, k), dd);
+  }
+  $("ledger").replaceChildren(dl);
+}
+
+/* ---------- coverage ---------- */
+
+function renderCoverage(status) {
+  const topics = Object.keys(status.coverage);
+  const half = Math.ceil(topics.length / 2);
+  const wrap = $("coverage");
+  wrap.innerHTML = "";
+  for (const chunk of [topics.slice(0, half), topics.slice(half)]) {
+    const col = el("div", "cov-col");
+    col.append(el("span"));
+    for (const d of status.difficulties) col.append(el("span", "cov-h", d));
+    for (const topic of chunk) {
+      const label = el("span", "cov-t", topic);
+      label.title = topic;
+      col.append(label);
+      for (const d of status.difficulties) {
+        const n = status.coverage[topic][d];
+        const c = el("span", n ? "cov-c has" : "cov-c", n ? String(n) : "");
+        c.setAttribute("aria-label", `${topic}, ${d}: ${n} problems`);
+        col.append(c);
+      }
+    }
+    wrap.append(col);
+  }
+}
+
+/* ---------- rejections ---------- */
+
+function renderRejected(status) {
+  const box = $("rejected");
+  const entries = Object.entries(status.reasons);
+  if (!entries.length) {
+    box.replaceChildren(el("p", "rej-empty", "Nothing rejected yet. Every problem Beam has written so far passed all the checks."));
+    return;
+  }
+  const ul = el("ul", "rej-list");
+  for (const [r, n] of entries) {
+    const [why, desc] = REASONS[r] || [r, ""];
+    const li = el("li");
+    const text = el("div");
+    text.append(el("div", "rej-why", why), el("div", "rej-desc", desc));
+    li.append(el("span", "rej-n", fmt(n)), text);
+    ul.append(li);
+  }
+  box.replaceChildren(ul);
+}
+
+/* ---------- specimen ---------- */
+
+let specTimers = [];
+let specIndex = -1;
+
+function signatureOf(p) {
+  if (p.signature) return p.signature;
+  const m = p.solution.match(new RegExp(`def ${p.entry_point}\\([^)]*\\)[^:]*:`));
+  return m ? m[0] : `def ${p.entry_point}(...)`;
+}
+
+function showSpecimen(problems) {
+  specTimers.forEach(clearTimeout);
+  specTimers = [];
+  if (!problems.length) {
+    $("specimen").replaceChildren(el("p", "spec-note", "The first verified problem will appear here."));
+    return;
+  }
+  specIndex = problems.length === 1 ? 0 : (specIndex + 1 + Math.floor(Math.random() * (problems.length - 1))) % problems.length;
+  const p = problems[specIndex];
+  const tests = [...p.public_tests, ...p.hidden_tests];
+  $("spec-title").textContent = p.title;
+  $("spec-tags").textContent = `${p.difficulty}, ${p.topic}`;
+  $("spec-sig").textContent = signatureOf(p);
+  $("spec-next").hidden = problems.length < 2;
+
+  const cells = $("spec-cells");
+  cells.innerHTML = "";
+  tests.forEach((t, i) => {
+    const li = el("li", null, "✓");
+    li.title = t;
+    li.setAttribute("aria-label", `Test ${i + 1} passed`);
+    cells.append(li);
+  });
+  const fakes = $("spec-fakes");
+  fakes.innerHTML = "";
+  FAKES.forEach((f) => fakes.append(el("li", null, f)));
+  const note = $("spec-pass-note");
+  note.textContent = "";
+
+  const cellEls = [...cells.children];
+  const fakeEls = [...fakes.children];
+  const finish = () => (note.textContent = `${tests.length} of ${tests.length} tests pass. ${p.public_tests.length} are shown to the solver, ${p.hidden_tests.length} are hidden for scoring.`);
+  if (reduceMotion) {
+    cellEls.forEach((c) => c.classList.add("on"));
+    fakeEls.forEach((f) => f.classList.add("caught"));
+    finish();
+    return;
+  }
+  cellEls.forEach((c, i) => specTimers.push(setTimeout(() => c.classList.add("on"), 300 + i * 85)));
+  const after = 300 + cellEls.length * 85 + 250;
+  specTimers.push(setTimeout(finish, after));
+  fakeEls.forEach((f, i) => specTimers.push(setTimeout(() => f.classList.add("caught"), after + 200 + i * 160)));
+}
+
+/* ---------- browser ---------- */
+
+const state = { q: "", diff: "all", current: null };
+
+function renderSeg(difficulties) {
+  const seg = $("diff-seg");
+  for (const d of ["all", ...difficulties]) {
+    const b = el("button", null, d === "all" ? "All" : d[0].toUpperCase() + d.slice(1));
+    b.type = "button";
+    b.setAttribute("role", "radio");
+    b.setAttribute("aria-checked", String(d === state.diff));
+    b.onclick = () => {
+      state.diff = d;
+      seg.querySelectorAll("button").forEach((x) => x.setAttribute("aria-checked", String(x === b)));
+      renderList();
+    };
+    seg.append(b);
+  }
+}
+
+let PROBLEMS = [];
+
+function renderList() {
+  const q = state.q.trim().toLowerCase();
+  const items = PROBLEMS.filter(
+    (p) => (state.diff === "all" || p.difficulty === state.diff) && (!q || `${p.title} ${p.topic}`.toLowerCase().includes(q))
+  );
+  const ul = $("plist");
+  ul.innerHTML = "";
+  if (!items.length) {
+    ul.append(el("li", "none", PROBLEMS.length ? "No problems match. Clear the search or pick another difficulty." : "No verified problems yet."));
+    return;
+  }
+  for (const p of items) {
+    const li = el("li");
+    const b = el("button");
+    b.type = "button";
+    b.setAttribute("aria-current", String(p.id === state.current));
+    b.append(el("span", "p-title", p.title), el("span", "p-meta", `${p.difficulty}, ${p.topic}, ${p.num_tests} tests`));
+    b.onclick = () => showDetail(p);
+    li.append(b);
+    ul.append(li);
+  }
+  if (!items.some((p) => p.id === state.current)) showDetail(items[0]);
+}
+
+function testList(tests) {
+  const ul = el("ul", "tests");
+  tests.forEach((t) => ul.append(el("li", null, t)));
+  return ul;
+}
+
+function showDetail(p) {
+  state.current = p.id;
+  $("plist").querySelectorAll("button").forEach((b) => b.setAttribute("aria-current", String(b.querySelector(".p-title")?.textContent === p.title)));
+  const d = $("detail");
+  d.innerHTML = "";
+  d.append(el("p", "d-meta", `${p.difficulty}, ${p.topic}. Written by ${p.source_model} at temperature ${p.temperature}.`));
+  const prose = el("div", "prose");
+  prose.innerHTML = md(p.prompt);
+  d.append(prose);
+
+  const tabs = el("div", "tabs");
+  tabs.setAttribute("role", "tablist");
+  const panel = el("div", "tabpanel");
+  panel.setAttribute("role", "tabpanel");
+  const views = {
+    "Reference solution": () => {
+      const pre = el("pre");
+      pre.append(el("code", "language-python", p.solution));
+      return pre;
+    },
+    [`Tests shown to the solver (${p.public_tests.length})`]: () => testList(p.public_tests),
+    [`Hidden tests (${p.hidden_tests.length})`]: () => testList(p.hidden_tests),
+  };
+  Object.keys(views).forEach((name, i) => {
+    const b = el("button", null, name);
+    b.type = "button";
+    b.setAttribute("role", "tab");
+    b.setAttribute("aria-selected", String(i === 0));
+    b.onclick = () => {
+      tabs.querySelectorAll("button").forEach((x) => x.setAttribute("aria-selected", String(x === b)));
+      panel.replaceChildren(views[name]());
+      highlightIn(panel);
+    };
+    tabs.append(b);
+  });
+  panel.append(Object.values(views)[0]());
+  d.append(tabs, panel);
+  highlightIn(d);
+}
+
+/* ---------- footer + boot ---------- */
+
+function renderFoot(status) {
+  const f = $("foot");
+  const p = el("p");
+  p.append(
+    "Generated with ",
+    Object.assign(el("a", null, status.model), { href: "https://huggingface.co/reflection/Beam-1.0-501B-A23B" }),
+    " for the Build with Beam challenge. Solutions run in a separate Python process with CPU, memory and time limits, and may import only pure standard-library modules."
+  );
+  f.replaceChildren(p);
+}
+
+async function boot() {
+  try {
+    const bust = `?t=${Date.now()}`;
+    const [status, problems] = await Promise.all([
+      fetch(`data/status.json${bust}`).then((r) => r.json()),
+      fetch(`data/problems.json${bust}`).then((r) => r.json()),
+    ]);
+    PROBLEMS = problems;
+    renderStatus(status);
+    renderCoverage(status);
+    renderRejected(status);
+    renderFoot(status);
+    showSpecimen(problems);
+    $("spec-next").onclick = () => showSpecimen(problems);
+    renderSeg(status.difficulties);
+    $("q").addEventListener("input", (e) => {
+      state.q = e.target.value;
+      renderList();
+    });
+    renderList();
+  } catch (err) {
+    $("bar-status").textContent = "Couldn't load the run data";
+    document.querySelector("main").replaceChildren(
+      el("p", "load-error", `The status files in data/ didn't load (${err.message}). Run beamcode.space_sync to regenerate them.`)
+    );
+  }
+}
+
+document.addEventListener("DOMContentLoaded", boot);

data/problems.json

@@ -0,0 +1 @@
+[{"id": "aafeb62b8774", "topic": "shortest paths", "difficulty": "easy", "title": "Shortest Ferry Times", "entry_point": "shortest_ferry_times", "signature": "def shortest_ferry_times(routes: list[tuple[str, str, int]], origin: str) -> dict[str, int]:", "prompt": "## Shortest Ferry Times\n\nA ferry network connects ports. Each route is an undirected ferry crossing with a nonnegative travel time in minutes. Given a list of routes and an origin port, return the shortest travel time from the origin to every reachable port.\n\n### Function signature\n```python\ndef shortest_ferry_times(routes: list[tuple[str, str, int]], origin: str) -> dict[str, int]:\n```\n\n### Input\n- `routes`: a list of tuples `(port_a, port_b, minutes)`.\n- Port names are strings.\n- `minutes` is a nonnegative integer.\n- A route may be used in either direction.\n- Duplicate routes, self-loops, and zero-minute crossings are allowed.\n\n### Output\n- A dictionary mapping each reachable port to its minimum travel time from `origin`.\n- The origin is always included with time `0`, even if it has no routes.\n- Ports that are unreachable from the origin are omitted.\n- If multiple routes connect the same two ports, the shorter effective time is used automatically by shortest-path computation.\n\n### Constraints\n- `0 <= len(routes) <= 1000`\n- Port names contain at most 32 characters.\n- `0 <= minutes <= 10**6`\n- All route endpoints and the origin are valid port names.\n\n### Examples\n```python\nshortest_ferry_times([(\"A\", \"B\", 10), (\"B\", \"C\", 10), (\"A\", \"C\", 15)], \"A\")\n# {\"A\": 0, \"B\": 10, \"C\": 15}\n\nshortest_ferry_times([(\"X\", \"Y\", 7)], \"A\")\n# {\"A\": 0}\n```", "solution": "import heapq\n\n\ndef shortest_ferry_times(routes: list[tuple[str, str, int]], origin: str) -> dict[str, int]:\n    \"\"\"Return shortest travel times from origin in an undirected weighted graph.\"\"\"\n    graph: dict[str, list[tuple[str, int]]] = {}\n\n    def add_edge(a: str, b: str, weight: int) -> None:\n        graph.setdefault(a, []).append((b, weight))\n        if a != b:\n            graph.setdefault(b, []).append((a, weight))\n        else:\n            graph.setdefault(b, [])\n\n    for port_a, port_b, minutes in routes:\n        add_edge(port_a, port_b, minutes)\n\n    distances: dict[str, int] = {origin: 0}\n    priority_queue: list[tuple[int, str]] = [(0, origin)]\n\n    while priority_queue:\n        current_distance, current_port = heapq.heappop(priority_queue)\n        if current_distance > distances.get(current_port, float(\"inf\")):\n            continue\n\n        for neighbor, weight in graph.get(current_port, []):\n            candidate = current_distance + weight\n            if candidate < distances.get(neighbor, float(\"inf\")):\n                distances[neighbor] = candidate\n                heapq.heappush(priority_queue, (candidate, neighbor))\n\n    return distances\n", "public_tests": ["assert shortest_ferry_times([], \"A\") == {\"A\": 0}", "assert shortest_ferry_times([(\"A\", \"B\", 5)], \"A\") == {\"A\": 0, \"B\": 5}", "assert shortest_ferry_times([(\"A\", \"B\", 5)], \"B\") == {\"B\": 0, \"A\": 5}"], "hidden_tests": ["assert shortest_ferry_times([(\"A\", \"B\", 10), (\"B\", \"C\", 10), (\"A\", \"C\", 15)], \"A\") == {\"A\": 0, \"B\": 10, \"C\": 15}", "assert shortest_ferry_times([(\"A\", \"B\", 1), (\"C\", \"D\", 2)], \"A\") == {\"A\": 0, \"B\": 1}", "assert shortest_ferry_times([(\"A\", \"B\", 8), (\"A\", \"B\", 3)], \"A\") == {\"A\": 0, \"B\": 3}", "assert shortest_ferry_times([(\"A\", \"B\", 0), (\"B\", \"C\", 4)], \"A\") == {\"A\": 0, \"B\": 0, \"C\": 4}", "assert shortest_ferry_times([(\"A\", \"A\", 99), (\"A\", \"B\", 2)], \"A\") == {\"A\": 0, \"B\": 2}", "assert shortest_ferry_times([(\"X\", \"Y\", 7)], \"A\") == {\"A\": 0}", "assert shortest_ferry_times([(\"A\", \"B\", 2), (\"A\", \"C\", 2), (\"B\", \"D\", 2), (\"C\", \"D\", 2)], \"A\") == {\"A\": 0, \"B\": 2, \"C\": 2, \"D\": 4}", "assert shortest_ferry_times([(\"A\", \"B\", 0), (\"B\", \"C\", 0), (\"C\", \"A\", 0), (\"C\", \"D\", 1)], \"A\") == {\"A\": 0, \"B\": 0, \"C\": 0, \"D\": 1}", "assert shortest_ferry_times([(\"B\", \"A\", 6)], \"A\") == {\"A\": 0, \"B\": 6}", "assert shortest_ferry_times([(\"A\", \"B\", 1), (\"B\", \"C\", 1), (\"A\", \"C\", 3)], \"A\") == {\"A\": 0, \"B\": 1, \"C\": 2}", "assert shortest_ferry_times([(\"A\", \"B\", 10), (\"B\", \"C\", 10), (\"A\", \"C\", 25)], \"A\") == {\"A\": 0, \"B\": 10, \"C\": 20}"], "num_tests": 14, "source_model": "reflection/Beam-1.0-501B-A23B", "temperature": 0.8}, {"id": "ab37e43f0c9c", "topic": "version strings and semantic comparison", "difficulty": "medium", "title": "Semantic Version Comparator", "entry_point": "compare_versions", "signature": "def compare_versions(a: str, b: str) -> int:", "prompt": "## Semantic Version Comparator\n\nYou are comparing firmware release tags for a medical-device update service. Implement a function that compares two version strings according to semantic-version precedence.\n\n**Signature**\n\n```python\ndef compare_versions(a: str, b: str) -> int:\n```\n\n**Version grammar**\n\nA valid version string has the form:\n\n```\nMAJOR.MINOR.PATCH[-prerelease][+build]\n```\n\n- `MAJOR`, `MINOR`, and `PATCH` are non-negative integers without leading zeros.\n- `prerelease` is a dot-separated list of identifiers. Each identifier is either a non-negative integer without leading zeros, or an ASCII alphanumeric/hyphen string containing at least one non-digit.\n- `build` is a dot-separated list of ASCII alphanumeric/hyphen identifiers.\n- Inputs are guaranteed to be valid version strings.\n\n**Precedence rules**\n\n1. Compare `MAJOR`, then `MINOR`, then `PATCH` numerically.\n2. A version without a prerelease has higher precedence than the same core version with a prerelease.\n3. Prerelease identifiers are compared left to right:\n   - Numeric identifiers are compared numerically.\n   - Non-numeric identifiers are compared by ASCII lexicographic order.\n   - Numeric identifiers always have lower precedence than non-numeric identifiers.\n   - If all compared identifiers are equal, the prerelease with more identifiers has higher precedence.\n4. Build metadata is ignored for precedence.\n\n**Return value**\n\nReturn `-1` if `a` has lower precedence than `b`, `0` if they have equal precedence, and `1` if `a` has higher precedence.\n\n**Examples**\n\n- `compare_versions(\"1.2.3-rc.1\", \"1.2.3-rc.10\")` returns `-1` because `1 < 10` numerically.\n- `compare_versions(\"1.0.0+exp.42\", \"1.0.0\")` returns `0` because build metadata is ignored.", "solution": "import re\n\n_VERSION_RE = re.compile(\n    r\"^(?P<core>(?:0|[1-9]\\d*)\\.(?:0|[1-9]\\d*)\\.(?:0|[1-9]\\d*))\"\n    r\"(?:-(?P<pre>[0-9A-Za-z-]+(?:\\.[0-9A-Za-z-]+)*))?\"\n    r\"(?:\\+(?P<build>[0-9A-Za-z-]+(?:\\.[0-9A-Za-z-]+)*))?$\"\n)\n\n\ndef _parse(version: str):\n    match = _VERSION_RE.fullmatch(version)\n    if match is None:\n        raise ValueError(f\"invalid version string: {version!r}\")\n    core = tuple(int(part) for part in match.group(\"core\").split(\".\"))\n    pre = match.group(\"pre\")\n    prerelease = None if pre is None else pre.split(\".\")\n    return core, prerelease\n\n\ndef _compare_identifier(left: str, right: str) -> int:\n    left_numeric = left.isdigit()\n    right_numeric = right.isdigit()\n    if left_numeric and right_numeric:\n        left_value = int(left)\n        right_value = int(right)\n        if left_value < right_value:\n            return -1\n        if left_value > right_value:\n            return 1\n        return 0\n    if left_numeric != right_numeric:\n        return -1 if left_numeric else 1\n    if left < right:\n        return -1\n    if left > right:\n        return 1\n    return 0\n\n\ndef compare_versions(a: str, b: str) -> int:\n    core_a, pre_a = _parse(a)\n    core_b, pre_b = _parse(b)\n\n    if core_a < core_b:\n        return -1\n    if core_a > core_b:\n        return 1\n\n    if pre_a is None and pre_b is None:\n        return 0\n    if pre_a is None:\n        return 1\n    if pre_b is None:\n        return -1\n\n    limit = min(len(pre_a), len(pre_b))\n    for index in range(limit):\n        result = _compare_identifier(pre_a[index], pre_b[index])\n        if result != 0:\n            return result\n\n    if len(pre_a) == len(pre_b):\n        return 0\n    return -1 if len(pre_a) < len(pre_b) else 1\n", "public_tests": ["assert compare_versions('1.2.3', '1.2.4') == -1", "assert compare_versions('2.0.0', '1.9.9') == 1", "assert compare_versions('1.0.0', '1.0.0') == 0"], "hidden_tests": ["assert compare_versions('1.0.0-alpha', '1.0.0') == -1", "assert compare_versions('1.0.0', '1.0.0-alpha') == 1", "assert compare_versions('1.0.0-alpha', '1.0.0-beta') == -1", "assert compare_versions('1.0.0-rc.1', '1.0.0-rc.10') == -1", "assert compare_versions('1.0.0-1', '1.0.0-alpha') == -1", "assert compare_versions('1.0.0+build.2', '1.0.0+build.1') == 0", "assert compare_versions('1.0.0-alpha+build', '1.0.0-alpha') == 0", "assert compare_versions('1.0.0-rc.1.0', '1.0.0-rc.1') == 1", "assert compare_versions('1.0.0-alpha.1', '1.0.0-alpha.beta') == -1", "assert compare_versions('0.0.0', '0.0.1') == -1"], "num_tests": 13, "source_model": "reflection/Beam-1.0-501B-A23B", "temperature": 0.8}, {"id": "1bf5bda6cb2c", "topic": "text formatting and wrapping", "difficulty": "easy", "title": "Wrap Plain-Text Labels", "entry_point": "wrap_text", "signature": "def wrap_text(text: str, width: int) -> list[str]:", "prompt": "Write a function `wrap_text(text, width)` that wraps a single line of text into lines of at most `width` characters.\n\nWords are maximal runs of non-whitespace characters. Any whitespace separates words, and output lines contain single spaces between words. Words are packed greedily: put as many whole words on a line as possible without exceeding `width`. If a word is longer than `width`, split it into chunks of at most `width` characters. Empty or whitespace-only input returns `[]`. `width` must be a positive integer.\n\nExamples:\n- `wrap_text('ab cdefg hi', 4)` returns `['ab', 'cdef', 'g hi']`\n- `wrap_text('x abcdefghij y', 4)` returns `['x', 'abcd', 'efgh', 'ij y']`", "solution": "def wrap_text(text: str, width: int) -> list[str]:\n    if not isinstance(width, int) or width < 1:\n        raise ValueError('width must be a positive integer')\n\n    words = text.split()\n    lines = []\n    current = ''\n\n    for word in words:\n        if current and len(current) + 1 + len(word) <= width:\n            current += ' ' + word\n        else:\n            if current:\n                lines.append(current)\n                current = ''\n\n            if len(word) <= width:\n                current = word\n            else:\n                start = 0\n                n = len(word)\n                while start + width < n:\n                    lines.append(word[start:start + width])\n                    start += width\n                current = word[start:]\n\n    if current:\n        lines.append(current)\n\n    return lines\n", "public_tests": ["assert wrap_text('', 4) == []", "assert wrap_text('   \\t  ', 4) == []", "assert wrap_text('hello', 5) == ['hello']"], "hidden_tests": ["assert wrap_text('hello', 3) == ['hel', 'lo']", "assert wrap_text('hello world', 5) == ['hello', 'world']", "assert wrap_text('a b c d e', 5) == ['a b c', 'd e']", "assert wrap_text('  a   b  ', 10) == ['a b']", "assert wrap_text('abc def', 3) == ['abc', 'def']", "assert wrap_text('abcdefghij', 4) == ['abcd', 'efgh', 'ij']", "assert wrap_text('ab cdefg hi', 4) == ['ab', 'cdef', 'g hi']", "assert wrap_text('x abcdefghij y', 4) == ['x', 'abcd', 'efgh', 'ij y']", "assert wrap_text('abcdefghij k', 4) == ['abcd', 'efgh', 'ij k']", "assert wrap_text('a bc', 1) == ['a', 'b', 'c']", "assert wrap_text('ab cdefghij k', 4) == ['ab', 'cdef', 'ghij', 'k']"], "num_tests": 14, "source_model": "reflection/Beam-1.0-501B-A23B", "temperature": 0.8}]

data/rejected.json

@@ -0,0 +1 @@
+[]

data/status.json

@@ -0,0 +1,253 @@
+{
+ "updated_at": "2026-10-30T22:02:17+00:00",
+ "model": "Beam-1.0-501B-A23B",
+ "providers": {
+  "baseten": 3
+ },
+ "funnel": [
+  {
+   "key": "generated",
+   "label": "Beam wrote it",
+   "count": 3,
+   "lost": {}
+  },
+  {
+   "key": "well_formed",
+   "label": "Well-formed",
+   "count": 3,
+   "lost": {}
+  },
+  {
+   "key": "passes_tests",
+   "label": "Passes its own tests",
+   "count": 3,
+   "lost": {}
+  },
+  {
+   "key": "beats_fakes",
+   "label": "Catches fake answers",
+   "count": 3,
+   "lost": {}
+  },
+  {
+   "key": "kept",
+   "label": "Not a duplicate",
+   "count": 3,
+   "lost": {}
+  }
+ ],
+ "reasons": {},
+ "tokens": {
+  "prompt": 1142,
+  "completion": 15554,
+  "reasoning": 11894
+ },
+ "difficulties": [
+  "easy",
+  "medium",
+  "hard"
+ ],
+ "coverage": {
+  "string manipulation": {
+   "easy": 0,
+   "medium": 0,
+   "hard": 0
+  },
+  "parsing structured text": {
+   "easy": 0,
+   "medium": 0,
+   "hard": 0
+  },
+  "run-length and other encodings": {
+   "easy": 0,
+   "medium": 0,
+   "hard": 0
+  },
+  "regular-expression-free tokenizing": {
+   "easy": 0,
+   "medium": 0,
+   "hard": 0
+  },
+  "arrays and prefix sums": {
+   "easy": 0,
+   "medium": 0,
+   "hard": 0
+  },
+  "two pointers": {
+   "easy": 0,
+   "medium": 0,
+   "hard": 0
+  },
+  "sliding window": {
+   "easy": 0,
+   "medium": 0,
+   "hard": 0
+  },
+  "binary search on answers": {
+   "easy": 0,
+   "medium": 0,
+   "hard": 0
+  },
+  "sorting with custom keys": {
+   "easy": 0,
+   "medium": 0,
+   "hard": 0
+  },
+  "hash maps and counting": {
+   "easy": 0,
+   "medium": 0,
+   "hard": 0
+  },
+  "stacks and bracket matching": {
+   "easy": 0,
+   "medium": 0,
+   "hard": 0
+  },
+  "queues and simulation": {
+   "easy": 0,
+   "medium": 0,
+   "hard": 0
+  },
+  "heaps and top-k": {
+   "easy": 0,
+   "medium": 0,
+   "hard": 0
+  },
+  "intervals and merging": {
+   "easy": 0,
+   "medium": 0,
+   "hard": 0
+  },
+  "greedy scheduling": {
+   "easy": 0,
+   "medium": 0,
+   "hard": 0
+  },
+  "dynamic programming on sequences": {
+   "easy": 0,
+   "medium": 0,
+   "hard": 0
+  },
+  "dynamic programming on grids": {
+   "easy": 0,
+   "medium": 0,
+   "hard": 0
+  },
+  "knapsack-style optimization": {
+   "easy": 0,
+   "medium": 0,
+   "hard": 0
+  },
+  "graph traversal (BFS/DFS) on adjacency lists": {
+   "easy": 0,
+   "medium": 0,
+   "hard": 0
+  },
+  "shortest paths": {
+   "easy": 1,
+   "medium": 0,
+   "hard": 0
+  },
+  "topological sort and dependencies": {
+   "easy": 0,
+   "medium": 0,
+   "hard": 0
+  },
+  "union-find": {
+   "easy": 0,
+   "medium": 0,
+   "hard": 0
+  },
+  "grid and matrix puzzles": {
+   "easy": 0,
+   "medium": 0,
+   "hard": 0
+  },
+  "trees encoded as nested lists or parent arrays": {
+   "easy": 0,
+   "medium": 0,
+   "hard": 0
+  },
+  "recursion and backtracking": {
+   "easy": 0,
+   "medium": 0,
+   "hard": 0
+  },
+  "combinatorics": {
+   "easy": 0,
+   "medium": 0,
+   "hard": 0
+  },
+  "number theory": {
+   "easy": 0,
+   "medium": 0,
+   "hard": 0
+  },
+  "bit manipulation": {
+   "easy": 0,
+   "medium": 0,
+   "hard": 0
+  },
+  "geometry with integer coordinates": {
+   "easy": 0,
+   "medium": 0,
+   "hard": 0
+  },
+  "date and time arithmetic with the datetime module": {
+   "easy": 0,
+   "medium": 0,
+   "hard": 0
+  },
+  "state machines": {
+   "easy": 0,
+   "medium": 0,
+   "hard": 0
+  },
+  "inventory and order-processing business logic": {
+   "easy": 0,
+   "medium": 0,
+   "hard": 0
+  },
+  "bank ledger and transaction reconciliation": {
+   "easy": 0,
+   "medium": 0,
+   "hard": 0
+  },
+  "text formatting and wrapping": {
+   "easy": 1,
+   "medium": 0,
+   "hard": 0
+  },
+  "version strings and semantic comparison": {
+   "easy": 0,
+   "medium": 1,
+   "hard": 0
+  },
+  "file-path normalization (pure string logic)": {
+   "easy": 0,
+   "medium": 0,
+   "hard": 0
+  },
+  "game rules simulation": {
+   "easy": 0,
+   "medium": 0,
+   "hard": 0
+  },
+  "elevator or traffic simulation": {
+   "easy": 0,
+   "medium": 0,
+   "hard": 0
+  },
+  "spreadsheet-style formula evaluation": {
+   "easy": 0,
+   "medium": 0,
+   "hard": 0
+  },
+  "data validation rules": {
+   "easy": 0,
+   "medium": 0,
+   "hard": 0
+  }
+ },
+ "median_seconds_per_call": 9.2
+}

index.html

@@ -1,19 +1,100 @@
-<!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>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Beam Verified Python</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=Schibsted+Grotesk:wght@400;500;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="style.css">
+  <script src="https://cdn.jsdelivr.net/npm/marked@12/marked.min.js" defer></script>
+  <script src="https://cdn.jsdelivr.net/npm/dompurify@3/dist/purify.min.js" defer></script>
+  <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/highlight.min.js" defer></script>
+  <script src="app.js" defer></script>
+</head>
+<body>
+  <header class="bar">
+    <span class="wordmark">Beam Verified Python</span>
+    <span class="bar-status" id="bar-status">Loading the latest run…</span>
+  </header>
+
+  <main>
+    <section class="hero">
+      <div class="hero-copy">
+        <h1>Python problems written by Beam, kept only if they pass their own tests.</h1>
+        <p class="lede">
+          Beam writes an exercise, a reference solution and a set of unit tests. We run the solution against every test
+          in a sandbox, then try to fool the tests with fake answers. A problem only makes it into the dataset if the
+          solution passes and every fake answer gets caught.
+        </p>
+        <p class="headline-status" id="headline-status"></p>
+      </div>
+
+      <figure class="specimen" id="specimen" aria-label="One verified problem">
+        <figcaption class="spec-head">
+          <span class="spec-title" id="spec-title"></span>
+          <span class="spec-tags" id="spec-tags"></span>
+        </figcaption>
+        <code class="spec-sig" id="spec-sig"></code>
+        <div class="spec-row">
+          <h3>Reference solution vs. its own tests</h3>
+          <ol class="cells" id="spec-cells"></ol>
+          <p class="spec-note" id="spec-pass-note"></p>
+        </div>
+        <div class="spec-row">
+          <h3>Fake answers the tests caught</h3>
+          <ul class="fakes" id="spec-fakes"></ul>
+        </div>
+        <button class="ghost" id="spec-next" type="button">Show another problem</button>
+      </figure>
+    </section>
+
+    <section class="block" aria-labelledby="funnel-h">
+      <div class="block-head">
+        <h2 id="funnel-h">Where problems drop out</h2>
+        <p>Each step removes problems that fail it. The last bar is what ships in the dataset.</p>
+      </div>
+      <div class="funnel-wrap">
+        <ol class="funnel" id="funnel"></ol>
+        <aside class="ledger" id="ledger" aria-label="Run costs"></aside>
+      </div>
+    </section>
+
+    <section class="block" aria-labelledby="cov-h">
+      <div class="block-head">
+        <h2 id="cov-h">Coverage</h2>
+        <p>Verified problems by topic and difficulty. Empty squares are combinations Beam hasn't produced yet.</p>
+      </div>
+      <div class="coverage" id="coverage"></div>
+    </section>
+
+    <section class="block" aria-labelledby="rej-h">
+      <div class="block-head">
+        <h2 id="rej-h">Rejected problems</h2>
+        <p>Why Beam's output got thrown away.</p>
+      </div>
+      <div id="rejected"></div>
+    </section>
+
+    <section class="block" aria-labelledby="browse-h">
+      <div class="block-head">
+        <h2 id="browse-h">Browse problems</h2>
+        <p>Everything that passed. Tests shown to the solver appear in the prompt; hidden tests decide the reward.</p>
+      </div>
+      <div class="browser">
+        <div class="list-pane">
+          <div class="filters">
+            <input type="search" id="q" placeholder="Search titles and topics" aria-label="Search problems">
+            <div class="seg" role="radiogroup" aria-label="Difficulty" id="diff-seg"></div>
+          </div>
+          <ul class="plist" id="plist"></ul>
+        </div>
+        <article class="detail" id="detail" aria-live="polite"></article>
+      </div>
+    </section>
+  </main>
+
+  <footer class="foot" id="foot"></footer>
+</body>
 </html>

style.css

@@ -1,28 +1,226 @@
+:root {
+  --prussian: #0f2a52;
+  --deep: #0a1f3f;
+  --line: #2c4b7a;
+  --paper: #eef3f8;
+  --muted: #9db2cf;
+  --pass: #8ee3b8;
+  --fail: #f4b860;
+  --sans: "Schibsted Grotesk", system-ui, sans-serif;
+  --mono: "JetBrains Mono", ui-monospace, monospace;
+  --measure: 66ch;
+}
+
+* { box-sizing: border-box; }
+
+html { background: var(--prussian); }
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+  margin: 0;
+  color: var(--paper);
+  font: 400 17px/1.55 var(--sans);
+  /* Cyanotype blueprint grid */
+  background-color: var(--prussian);
+  background-image:
+    linear-gradient(rgba(238, 243, 248, 0.045) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(238, 243, 248, 0.045) 1px, transparent 1px);
+  background-size: 28px 28px;
+  -webkit-font-smoothing: antialiased;
+}
+
+:focus-visible { outline: 2px solid var(--pass); outline-offset: 3px; }
+
+h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.02em; }
+p { margin: 0; }
+code, pre { font-family: var(--mono); }
+
+/* Header bar */
+.bar {
+  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap;
+  padding: 1.1rem clamp(1.25rem, 4vw, 3.5rem);
+  border-bottom: 1px solid var(--line);
+}
+.wordmark { font-weight: 800; letter-spacing: -0.01em; }
+.bar-status { color: var(--muted); font-size: 0.9rem; }
+
+main { padding: 0 clamp(1.25rem, 4vw, 3.5rem); max-width: 1320px; margin: 0 auto; }
+
+/* Hero */
+.hero {
+  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem);
+  align-items: start; padding: clamp(3rem, 8vw, 6.5rem) 0 clamp(3rem, 6vw, 5rem);
+}
+.hero h1 {
+  font-size: clamp(2.3rem, 4.6vw, 4.1rem); line-height: 1.02; letter-spacing: -0.035em; max-width: 16ch;
+}
+.lede { margin-top: 1.6rem; max-width: 52ch; color: var(--muted); font-size: 1.06rem; }
+.headline-status { margin-top: 1.8rem; font-size: 1.15rem; font-weight: 500; max-width: 40ch; }
+.headline-status strong { color: var(--pass); font-weight: 700; }
+
+/* Specimen: one problem on the test bench */
+.specimen {
+  margin: 0; padding: 1.6rem 1.6rem 1.3rem;
+  background: var(--deep); border: 1px solid var(--line); border-radius: 4px;
+  box-shadow: 10px 10px 0 rgba(10, 31, 63, 0.55);
+}
+.spec-head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; flex-wrap: wrap; }
+.spec-title { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.015em; }
+.spec-tags { color: var(--muted); font-size: 0.88rem; }
+.spec-sig {
+  display: block; margin-top: 0.9rem; padding: 0.7rem 0.85rem; overflow-x: auto; white-space: pre;
+  font-size: 0.82rem; color: var(--paper); background: rgba(238, 243, 248, 0.05); border-radius: 3px;
+}
+.spec-row { margin-top: 1.4rem; }
+.spec-row h3 { font-size: 0.92rem; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-bottom: 0.6rem; }
+
+.cells { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
+.cells li {
+  width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 3px;
+  display: grid; place-items: center; font: 500 0.66rem var(--mono); color: transparent;
+  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
+}
+.cells li.on { background: var(--pass); border-color: var(--pass); color: var(--deep); }
+.spec-note { margin-top: 0.55rem; font-size: 0.88rem; color: var(--muted); min-height: 1.4em; }
+
+.fakes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; }
+.fakes li {
+  font: 400 0.8rem var(--mono); padding: 0.28rem 0.55rem; border: 1px dashed var(--line); border-radius: 3px;
+  color: var(--muted); transition: color 200ms ease, border-color 200ms ease, text-decoration-color 200ms ease;
+  text-decoration: line-through; text-decoration-color: transparent; text-decoration-thickness: 2px;
 }
+.fakes li.caught { color: var(--fail); border-color: rgba(244, 184, 96, 0.55); text-decoration-color: var(--fail); }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.ghost {
+  margin-top: 1.4rem; font: 500 0.9rem var(--sans); color: var(--paper); cursor: pointer;
+  background: none; border: 1px solid var(--line); border-radius: 3px; padding: 0.5rem 0.9rem;
 }
+.ghost:hover { border-color: var(--muted); }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+/* Section blocks */
+.block { padding: clamp(2.5rem, 5vw, 4rem) 0; border-top: 1px solid var(--line); }
+.block-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 2rem; align-items: baseline; margin-bottom: 2rem; }
+.block-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.1; }
+.block-head p { color: var(--muted); max-width: 56ch; }
+
+/* Funnel: a real sequence, so the steps are numbered */
+.funnel-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 3rem; align-items: start; }
+.funnel { list-style: none; margin: 0; padding: 0; counter-reset: step; }
+.funnel li {
+  counter-increment: step; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.2rem 1rem;
+  padding: 0.85rem 0; border-bottom: 1px dashed var(--line);
+}
+.funnel li::before { content: counter(step); grid-row: span 2; font: 500 0.95rem var(--mono); color: var(--muted); padding-top: 0.1rem; }
+.f-top { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
+.f-label { font-weight: 700; }
+.f-count { font: 500 1rem var(--mono); }
+.f-bar { height: 10px; background: rgba(238, 243, 248, 0.07); border-radius: 2px; overflow: hidden; margin-top: 0.45rem; }
+.f-bar span { display: block; height: 100%; background: var(--paper); }
+.funnel li:last-child .f-bar span { background: var(--pass); }
+.f-lost { grid-column: 2; font-size: 0.86rem; color: var(--fail); }
+.f-lost.none { color: var(--muted); }
+
+.ledger { border-left: 1px solid var(--line); padding-left: 1.5rem; }
+.ledger dl { margin: 0; display: grid; gap: 1.1rem; }
+.ledger dt { color: var(--muted); font-size: 0.86rem; }
+.ledger dd { margin: 0.15rem 0 0; font: 500 1.15rem var(--mono); }
+.ledger dd small { display: block; font: 400 0.8rem var(--sans); color: var(--muted); margin-top: 0.2rem; }
+
+/* Coverage grid */
+.coverage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; }
+.cov-col { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 56px); gap: 4px 6px; align-items: center; align-content: start; }
+.cov-h { font-size: 0.78rem; color: var(--muted); text-align: center; }
+.cov-t { font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 0.5rem; }
+.cov-c {
+  height: 22px; border: 1px solid var(--line); border-radius: 2px; display: grid; place-items: center;
+  font: 500 0.7rem var(--mono); color: var(--deep);
+}
+.cov-c.has { background: var(--pass); border-color: var(--pass); }
+
+/* Rejections */
+.rej-empty { color: var(--muted); max-width: 60ch; }
+.rej-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; max-width: 820px; }
+.rej-list li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1rem; align-items: baseline; }
+.rej-n { font: 500 1.25rem var(--mono); color: var(--fail); text-align: right; }
+.rej-why { font-weight: 700; }
+.rej-desc { color: var(--muted); font-size: 0.92rem; }
+
+/* Browser */
+.browser { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 2rem; align-items: start; }
+.filters { display: grid; gap: 0.7rem; margin-bottom: 1rem; }
+.filters input {
+  width: 100%; font: 400 0.95rem var(--sans); color: var(--paper); background: var(--deep);
+  border: 1px solid var(--line); border-radius: 3px; padding: 0.55rem 0.7rem;
+}
+.filters input::placeholder { color: var(--muted); }
+.seg { display: flex; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
+.seg button {
+  flex: 1; font: 500 0.85rem var(--sans); color: var(--muted); background: none; border: 0; padding: 0.45rem 0; cursor: pointer;
+}
+.seg button + button { border-left: 1px solid var(--line); }
+.seg button[aria-checked="true"] { background: var(--paper); color: var(--deep); }
+
+.plist { list-style: none; margin: 0; padding: 0; max-height: 640px; overflow-y: auto; border-top: 1px solid var(--line); }
+.plist button {
+  display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line);
+  color: var(--paper); padding: 0.75rem 0.4rem; cursor: pointer; font: inherit;
 }
+.plist button:hover { background: rgba(238, 243, 248, 0.04); }
+.plist button[aria-current="true"] { background: rgba(142, 227, 184, 0.1); box-shadow: inset 3px 0 0 var(--pass); }
+.p-title { display: block; font-weight: 700; font-size: 0.97rem; }
+.p-meta { display: block; color: var(--muted); font-size: 0.82rem; margin-top: 0.1rem; }
+.plist .none { padding: 1rem 0.4rem; color: var(--muted); }
+
+.detail {
+  background: var(--deep); border: 1px solid var(--line); border-radius: 4px; padding: clamp(1.25rem, 3vw, 2rem); min-height: 400px;
+}
+.d-meta { color: var(--muted); font-size: 0.88rem; margin-bottom: 1.2rem; }
+.prose { max-width: var(--measure); }
+.prose h1, .prose h2, .prose h3 { font-weight: 700; letter-spacing: -0.015em; margin: 1.4em 0 0.5em; line-height: 1.2; }
+.prose h1:first-child, .prose h2:first-child, .prose h3:first-child { margin-top: 0; }
+.prose h1, .prose h2 { font-size: 1.45rem; }
+.prose h3 { font-size: 1.1rem; }
+.prose p, .prose ul, .prose ol { margin: 0 0 0.9em; }
+.prose code { font-size: 0.86em; background: rgba(238, 243, 248, 0.07); padding: 0.1em 0.3em; border-radius: 2px; }
+.prose pre code { background: none; padding: 0; }
+pre {
+  margin: 0 0 1em; padding: 0.9rem 1rem; overflow-x: auto; font-size: 0.82rem; line-height: 1.55;
+  background: rgba(238, 243, 248, 0.05); border: 1px solid var(--line); border-radius: 3px;
+}
+
+.tabs { display: flex; gap: 1.4rem; margin-top: 2rem; border-bottom: 1px solid var(--line); }
+.tabs button {
+  background: none; border: 0; color: var(--muted); font: 500 0.95rem var(--sans); padding: 0.6rem 0; cursor: pointer;
+  border-bottom: 2px solid transparent; margin-bottom: -1px;
+}
+.tabs button[aria-selected="true"] { color: var(--paper); border-bottom-color: var(--pass); }
+.tabpanel { padding-top: 1.1rem; }
+.tests { list-style: none; margin: 0; padding: 0; }
+.tests li { font: 400 0.8rem/1.5 var(--mono); padding: 0.45rem 0 0.45rem 1.4rem; border-bottom: 1px dashed var(--line); position: relative; word-break: break-word; }
+.tests li::before { content: ""; position: absolute; left: 0; top: 0.85rem; width: 8px; height: 8px; border-radius: 1px; background: var(--pass); }
+
+/* highlight.js tokens in palette */
+.hljs-keyword, .hljs-built_in { color: #a9c7ff; }
+.hljs-string { color: var(--pass); }
+.hljs-number, .hljs-literal { color: var(--fail); }
+.hljs-comment { color: #6f86a8; font-style: italic; }
+.hljs-title, .hljs-title.function_ { color: #ffffff; font-weight: 500; }
+.hljs-params { color: var(--paper); }
+
+.foot {
+  border-top: 1px solid var(--line); padding: 2rem clamp(1.25rem, 4vw, 3.5rem) 3rem; color: var(--muted); font-size: 0.88rem;
+}
+.foot p { max-width: 80ch; }
+.foot a { color: var(--paper); }
+
+.load-error { padding: 4rem 0; max-width: 60ch; }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+@media (max-width: 960px) {
+  .hero, .block-head, .funnel-wrap, .browser, .coverage { grid-template-columns: minmax(0, 1fr); }
+  .ledger { border-left: 0; border-top: 1px solid var(--line); padding: 1.5rem 0 0; }
+  .ledger dl { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
+  .plist { max-height: 320px; }
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { transition: none !important; animation: none !important; }
 }