diff --git a/CHANGELOG.md b/CHANGELOG.md
index bac0c8c..cc9e4e3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -49,6 +49,16 @@ different event from one that moved because it was wrong.
   ranking (`site/search.js`) runs in the browser with no library.
   `scripts/check_search.mjs` holds the ranking to its cases and every index
   entry to a page and id that exist.
+- The explainer opens with the example report's result drawn as a card (the
+  measured ECE against its floor's 95th percentile, and the verdict), written
+  at build time from the report's own line so it reads the same with scripts
+  off, and keeps its contents in a rail beside the text on wide screens.
+- The calculator and planner each run in their own worker and can be
+  cancelled; their inputs are kept in the address, so a link reproduces a
+  result, and each result has "Copy link" and "Copy result" buttons.
+- Every page carries a Content-Security-Policy that allows nothing but the
+  site's own files (no inline script or style), and `check_site_links.mjs`
+  fails a page that lacks it or carries anything it would block.
 
 ### Changed
 
@@ -59,6 +69,17 @@ different event from one that moved because it was wrong.
 
 ### Fixed
 
+- Every validation message on the site's calculator and planner read
+  "[object Object]" (#25). Messages now say what is wrong, mark the field
+  invalid, and are tied to it for screen readers; a result is announced as one
+  line rather than the whole result block (#53).
+- A failure to draw the worked example was reported as the example being
+  missing; the page now says which happened. `floor.js` turned a bin count of 0
+  into 10 where the Python refuses it, and now refuses it too. The parity
+  check holds the worked example's floor to 1e-9, not only to the four
+  decimals the report prints (#55).
+- A link to a later section of the explainer (`#planner`) stopped short of it,
+  because the worked example grows the page after it loads.
 - The inconclusive verdict read as a pass. "Not distinguishable from a
   perfectly calibrated model at this sample size" is what the arithmetic
   establishes and close to the opposite of what it means, and readers took it
diff --git a/scripts/build_site.py b/scripts/build_site.py
index 2c3903a..5e5414b 100644
--- a/scripts/build_site.py
+++ b/scripts/build_site.py
@@ -56,7 +56,7 @@
 from typing import Any, TypedDict
 
 from plumbline.cli import app
-from plumbline.metrics.calibration import synthetic_floor
+from plumbline.metrics.calibration import calibration_floor, synthetic_floor
 from plumbline.runner.execute import RunResult
 
 ROOT = Path(__file__).resolve().parent.parent
@@ -292,6 +292,7 @@ def build_example() -> dict[str, Any]:
     n_bins = int(ece_match["bins"])
     accuracy = sum(outcomes) / len(outcomes)
     summary = synthetic_floor(len(probabilities), n_bins=n_bins, accuracy=accuracy)["ece"]
+    real = calibration_floor(run.probabilities(), n_bins=n_bins)["ece"]
 
     return {
         "about": (
@@ -317,6 +318,10 @@ def build_example() -> dict[str, Any]:
         "python": {
             "accuracy": accuracy,
             "summary_floor": {"mean": summary.mean, "p95": summary.p95},
+            # The floor from the rows themselves, unrounded, so the page's
+            # calibrationFloor is held to 1e-9 and not only to the 4 decimals
+            # the report prints.
+            "calibration_floor": {"mean": real.mean, "p95": real.p95},
         },
     }
 
@@ -572,10 +577,22 @@ def social_meta(title: str, description: str, url: str) -> str:
     )
 
 
+#: The Content Security Policy every page carries. Everything the site loads is
+#: its own: no inline script or style, no other origin, and data: only for the
+#: inline favicon. ``site/index.html`` carries the same tag, which the build
+#: requires, and ``scripts/check_site_links.mjs`` checks every page for it.
+CSP = (
+    "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; "
+    "font-src 'self'; connect-src 'self'; worker-src 'self'; frame-src 'none'; "
+    "object-src 'none'; base-uri 'none'; form-action 'none'"
+)
+CSP_META = f'<meta http-equiv="Content-Security-Policy" content="{CSP}">'
+
 PAGE = """<!doctype html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
+{csp}
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>{title} | plumbline</title>
 <meta name="description" content="{description}">
@@ -622,6 +639,7 @@ def _page(
 ) -> str:
     """One doc-shaped page: header, docs sidebar, the body, and its contents list."""
     return PAGE.format(
+        csp=CSP_META,
         title=html.escape(title),
         description=html.escape(description, quote=True),
         meta=meta,
@@ -702,11 +720,71 @@ def write_404(out: Path) -> None:
 HEADER_SLOT = "<!-- site:header -->"
 
 
-def explainer_page(source: str) -> str:
-    """The explainer as written, with the shared header in its slot."""
-    if source.count(HEADER_SLOT) != 1:
-        raise BuildError(f"site/index.html must contain {HEADER_SLOT} exactly once")
-    return source.replace(HEADER_SLOT, site_header("", "calculator"))
+#: Where the example's result card goes, in the explainer's opening block.
+CARD_SLOT = "<!-- site:example-card -->"
+
+
+def example_card(report: dict[str, Any]) -> str:
+    """The example report's headline result, drawn at build time.
+
+    ``report`` is the ``report`` block of ``example-run.json``: the figures parsed
+    from the report's own ECE line, so the card says exactly what the report
+    says, and says it with scripts off. The gauge puts the measured ECE against
+    the calibrated-model floor's 95th percentile on one scale.
+    """
+    ece, p95, n = float(report["ece"]), float(report["floor_p95"]), int(report["n"])
+    inconclusive = "INCONCLUSIVE" in report["ece_line"]
+    width, scale = 320.0, max(ece, p95) * 1.3
+    x_ece, x_p95 = width * ece / scale, width * p95 / scale
+    anchor = "start" if x_ece < 60 else "end" if x_ece > width - 60 else "middle"
+    gauge = (
+        f'<svg class="gauge" viewBox="0 0 {width:.0f} 58" role="img" '
+        f'aria-label="Measured ECE {ece:.4f} against a calibrated-model floor whose 95th '
+        f'percentile is {p95:.4f}">'
+        f'<rect class="track" x="0" y="22" width="{width:.0f}" height="10" rx="5"/>'
+        f'<rect class="band" x="0" y="22" width="{x_p95:.1f}" height="10" rx="5"/>'
+        f'<line class="marker" x1="{x_ece:.1f}" x2="{x_ece:.1f}" y1="14" y2="40"/>'
+        f'<text class="marker-label" x="{x_ece:.1f}" y="10" text-anchor="{anchor}">'
+        f"measured {ece:.4f}</text>"
+        f'<text class="band-label" x="{x_p95:.1f}" y="54" text-anchor="end">'
+        f"floor, 95th percentile {p95:.4f}</text></svg>"
+    )
+    if inconclusive:
+        chip = '<span class="chip inconclusive">INCONCLUSIVE</span>'
+        says = (
+            f"The measured figure sits inside what a perfectly calibrated model scores on "
+            f"{n} rows, so this dataset establishes nothing either way."
+        )
+    else:
+        chip = '<span class="chip distinguishable">Distinguishable</span>'
+        says = (
+            f"The measured figure is above what a perfectly calibrated model scores on {n} "
+            "rows nineteen times in twenty."
+        )
+    return (
+        '<figure class="hero-card">\n'
+        f'  <figcaption class="card-label">The example report, {n} rows</figcaption>\n'
+        '  <div class="figures">\n'
+        f'    <p><span class="k">Measured ECE</span> <span class="v">{ece:.4f}</span></p>\n'
+        '    <p><span class="k">Calibrated-model floor, 95th percentile</span> '
+        f'<span class="v">{p95:.4f}</span></p>\n'
+        "  </div>\n"
+        f"  {gauge}\n"
+        f'  <p class="card-verdict">{chip} {says} '
+        '<a href="#example">See it derived from the rows</a>.</p>\n'
+        "</figure>"
+    )
+
+
+def explainer_page(source: str, report: dict[str, Any]) -> str:
+    """The explainer as written, with the shared header and the example card in their slots."""
+    for slot in (HEADER_SLOT, CARD_SLOT):
+        if source.count(slot) != 1:
+            raise BuildError(f"site/index.html must contain {slot} exactly once")
+    if source.count(CSP_META) != 1:
+        raise BuildError("site/index.html must carry the site's Content-Security-Policy tag")
+    page = source.replace(HEADER_SLOT, site_header("", "calculator"))
+    return page.replace(CARD_SLOT, example_card(report))
 
 
 #: The explainer's name in search results.
@@ -789,7 +867,7 @@ def main() -> int:
         prov = provenance()
         rendered = render_docs(prov)
         source = (SITE / "index.html").read_text(encoding="utf-8")
-        explainer = explainer_page(source)
+        explainer = explainer_page(source, example["report"])
         index = search_index(rendered, source)
     except BuildError as problem:
         print(f"site build refused: {problem}", file=sys.stderr)
diff --git a/scripts/check_floor_parity.mjs b/scripts/check_floor_parity.mjs
index 3929909..d94d945 100644
--- a/scripts/check_floor_parity.mjs
+++ b/scripts/check_floor_parity.mjs
@@ -72,6 +72,10 @@ if (examplePath) {
   for (const key of ["mean", "p95"]) {
     const gap = Math.abs(summary[key] - example.python.summary_floor[key]);
     if (!(gap <= tolerance)) failures.push(`worked example: summary floor ${key} off by ${gap}`);
+    // The line above agrees to 4 decimals; this holds the floor from the rows
+    // to the same 1e-9 as every other case.
+    const real = Math.abs(band[key] - example.python.calibration_floor[key]);
+    if (!(real <= tolerance)) failures.push(`worked example: calibration floor ${key} off by ${real}`);
   }
   console.log(`worked example: ${derived.slice(0, 110)}...`);
 }
diff --git a/scripts/check_site_links.mjs b/scripts/check_site_links.mjs
index b2d7c46..e7aaa19 100644
--- a/scripts/check_site_links.mjs
+++ b/scripts/check_site_links.mjs
@@ -13,6 +13,9 @@
 // - a page loads anything (script, stylesheet, image, frame) from another origin,
 // - a page lacks its canonical, Open Graph, or Twitter card tags, or its
 //   canonical and og:url do not name the page itself,
+// - a page does not carry exactly the site's Content-Security-Policy tag, or
+//   has an inline script, an inline style block, or a style attribute (which
+//   that policy would block, so the page would silently break),
 // - og.png is not a 1200x630 PNG,
 // - the 404 page is missing, links anywhere that does not resolve, or (live)
 //   a missing path is not answered with it and a 404 status.
@@ -23,6 +26,13 @@ import path from "node:path";
 const SITE_URL = "https://tmhsdigital.github.io/plumbline/";
 const SITE_PATH = new URL(SITE_URL).pathname; // "/plumbline/"
 
+// Stated here rather than read from build_site.py, so a change to the policy
+// is a change to what this check requires.
+const CSP =
+  "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; " +
+  "font-src 'self'; connect-src 'self'; worker-src 'self'; frame-src 'none'; " +
+  "object-src 'none'; base-uri 'none'; form-action 'none'";
+
 const target = process.argv[2];
 if (!target) {
   console.error("usage: check_site_links.mjs <site directory | site URL>");
@@ -119,6 +129,15 @@ function checkSocial(sitePath, html) {
   }
 }
 
+function checkPolicy(where, html) {
+  const tags = [...html.matchAll(/<meta http-equiv="Content-Security-Policy" content="([^"]*)">/g)];
+  if (tags.length !== 1) problems.push(`${where}: ${tags.length} Content-Security-Policy tags, expected 1`);
+  else if (tags[0][1] !== CSP) problems.push(`${where}: Content-Security-Policy is not the site's policy`);
+  if (/<script\b(?![^>]*\bsrc=)[^>]*>/i.test(html)) problems.push(`${where}: an inline <script>, which the policy blocks`);
+  if (/<style\b/i.test(html)) problems.push(`${where}: an inline <style>, which the policy blocks`);
+  if (/<[a-z][^>]*\sstyle="/i.test(html)) problems.push(`${where}: a style attribute, which the policy blocks`);
+}
+
 // Check one page's references; queue the internal HTML pages it links to.
 async function crawl(sitePath, { social = true, servedAs = sitePath } = {}) {
   if (checked.has(sitePath)) return;
@@ -129,6 +148,7 @@ async function crawl(sitePath, { social = true, servedAs = sitePath } = {}) {
     return;
   }
   if (social) checkSocial(sitePath, html);
+  checkPolicy(servedAs, html);
   const queue = [];
   for (const [tag, , value, rel] of references(html)) {
     const where = `${servedAs}: <${tag}> ${value}`;
@@ -192,4 +212,4 @@ if (problems.length) {
   console.error(`${problems.length} problem(s) on ${live ? base : target}:\n  ${problems.join("\n  ")}`);
   process.exit(1);
 }
-console.log(`${htmlPages} pages checked on ${live ? base : target}: every link, anchor, and meta tag resolves; nothing loads from another origin.`);
+console.log(`${htmlPages} pages checked on ${live ? base : target}: every link, anchor, and meta tag resolves; nothing loads from another origin; every page carries the CSP.`);
diff --git a/site/explainer.css b/site/explainer.css
new file mode 100644
index 0000000..9193a0f
--- /dev/null
+++ b/site/explainer.css
@@ -0,0 +1,102 @@
+/* The explainer (index.html): its calculator, worked example, and planner. */
+section { padding: 2rem 0; border-top: 1px solid var(--line); }
+.lede { font-size: 1.05rem; }
+.label { display: inline-block; font: 600 0.75rem var(--mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--warn-fg); background: var(--warn-bg); padding: 0.1rem 0.4rem; border-radius: 3px; margin-bottom: 0.5rem; }
+
+form { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 1rem; margin: 1.25rem 0 1rem; }
+label { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 0.25rem; }
+.hint { display: block; font-size: 0.8rem; font-weight: 400; color: var(--muted); }
+input { width: 100%; font: 1rem var(--mono); padding: 0.5rem 0.6rem; color: var(--fg); background: var(--bg); border: 1px solid var(--control); border-radius: 4px; }
+.actions { grid-column: 1 / -1; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
+button { font: 600 1rem var(--sans); padding: 0.55rem 1.1rem; color: var(--bg); background: var(--fg); border: 0; border-radius: 4px; cursor: pointer; }
+button[disabled] { opacity: 0.55; cursor: progress; }
+progress { flex: 1 1 8rem; height: 0.5rem; }
+.error { color: var(--error); }
+
+.result { border: 1px solid var(--line); border-radius: 6px; padding: 1rem; background: var(--panel); }
+.result[hidden], [hidden] { display: none !important; }
+.result h3:first-child { margin-top: 0; }
+dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0 0 1rem; }
+dt { color: var(--muted); }
+dd { margin: 0; font-family: var(--mono); overflow-wrap: anywhere; }
+.verdict { padding: 0.75rem; border-radius: 4px; margin: 0 0 1rem; }
+.verdict.inconclusive { background: var(--warn-bg); color: var(--warn-fg); }
+.verdict.distinguishable { background: var(--ok-bg); color: var(--ok-fg); }
+.verdict strong { display: block; margin-bottom: 0.25rem; }
+.big { font: 600 1.6rem var(--mono); margin: 0 0 0.5rem; }
+
+.table-wrap { overflow-x: auto; margin: 0 0 1rem; }
+table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
+caption { text-align: left; color: var(--muted); font-size: 0.85rem; padding-bottom: 0.4rem; }
+th, td { padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--line); text-align: right; font-family: var(--mono); white-space: nowrap; }
+th { font-family: var(--sans); font-weight: 600; color: var(--muted); }
+th:first-child, td:first-child { text-align: left; }
+tfoot td { border-bottom: 0; font-weight: 600; }
+@media (max-width: 30rem) {
+  table { font-size: 0.8rem; }
+  th, td { padding: 0.3rem 0.25rem; }
+  th { white-space: normal; }
+}
+
+figure { margin: 0 0 1rem; }
+figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 0.25rem; }
+svg.hist { width: 100%; height: auto; display: block; }
+svg.hist .bar { fill: var(--bar); }
+svg.hist .axis { stroke: var(--line); }
+svg.hist text { fill: var(--muted); font: 13px var(--mono); }
+svg.hist .measured { stroke: var(--mark-measured); stroke-width: 2; }
+svg.hist .p95 { stroke: var(--mark-p95); stroke-width: 2; stroke-dasharray: 5 3; }
+svg.hist text.measured-label { fill: var(--mark-measured); }
+svg.hist text.p95-label { fill: var(--mark-p95); }
+
+ol.steps { padding-left: 1.25rem; }
+ol.steps > li { margin-bottom: 1.25rem; }
+.trace { font: 0.85rem var(--mono); color: var(--muted); padding-left: 1.25rem; margin: 0 0 1rem; }
+
+/* ---- layout: the text, and the contents rail beside it from 64rem ------- */
+
+.explainer .rail ul { list-style: none; padding: 0; margin: 0 0 2rem; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
+.explainer .rail a { font-size: 0.95rem; }
+.explainer .rail .rail-label { display: none; }
+@media (min-width: 64rem) {
+  main.explainer { max-width: 64rem; display: grid; grid-template-columns: minmax(0, 46rem) 12rem; column-gap: 3rem; justify-content: center; }
+  main.explainer > * { grid-column: 1; }
+  main.explainer > .rail { grid-column: 2; grid-row: 1 / span 10; position: sticky; top: calc(var(--header-h) + 2.5rem); align-self: start; padding-top: 2.5rem; }
+  .explainer .rail ul { display: block; margin: 0; }
+  .explainer .rail .rail-label { display: block; font: 600 0.72rem var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 0.5rem 0.6rem; }
+  .explainer .rail a { display: block; padding: 0.2rem 0.6rem; border-left: 2px solid transparent; color: var(--muted); text-decoration: none; font-size: 0.9rem; }
+  .explainer .rail a:hover { color: var(--fg); text-decoration: underline; }
+  .explainer .rail a[aria-current] { color: var(--fg); font-weight: 600; border-left-color: var(--accent); }
+}
+
+/* ---- the opening block ---------------------------------------------------- */
+
+.hero h1 { font-size: clamp(1.9rem, 4.5vw, 2.6rem); letter-spacing: -0.01em; margin-bottom: 1rem; }
+.hero .lede { font-size: 1.1rem; max-width: 42rem; }
+.hero-card { margin: 1.5rem 0; padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
+.card-label { font: 600 0.72rem var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 0.75rem; }
+.hero-card .figures { display: flex; flex-wrap: wrap; gap: 0.5rem 2.5rem; }
+.hero-card .figures p { margin: 0; }
+.hero-card .k { display: block; font-size: 0.85rem; color: var(--muted); }
+.hero-card .v { display: block; font: 600 1.6rem var(--mono); }
+svg.gauge { display: block; width: 100%; max-width: 24rem; height: auto; margin: 0.75rem 0; }
+svg.gauge .track { fill: var(--bg); stroke: var(--line); }
+svg.gauge .band { fill: var(--bar); }
+svg.gauge .marker { stroke: var(--mark-measured); stroke-width: 2.5; }
+svg.gauge text { font: 10px var(--mono); fill: var(--muted); }
+svg.gauge .marker-label { fill: var(--mark-measured); }
+.card-verdict { margin: 0; font-size: 0.95rem; }
+.chip { display: inline-block; font: 600 0.75rem var(--mono); letter-spacing: 0.04em; padding: 0.1rem 0.45rem; border-radius: 3px; margin-right: 0.35rem; }
+.chip.inconclusive { color: var(--warn-fg); background: var(--warn-bg); }
+.chip.distinguishable { color: var(--ok-fg); background: var(--ok-bg); }
+.cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 2rem; }
+
+/* Links that look like buttons, and the quieter button. */
+a.button { display: inline-block; font: 600 1rem var(--sans); padding: 0.55rem 1.1rem; color: var(--bg); background: var(--fg); border: 1px solid var(--fg); border-radius: 4px; text-decoration: none; }
+a.button:hover { opacity: 0.9; }
+a.button.secondary, button.secondary { color: var(--fg); background: var(--bg); border: 1px solid var(--control); }
+a.button.secondary:hover, button.secondary:hover { border-color: var(--fg); }
+button.small-button { font-size: 0.85rem; font-weight: 400; padding: 0.3rem 0.7rem; }
+.share { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; }
+input[aria-invalid="true"] { border-color: var(--error); outline: 1px solid var(--error); }
+@media print { .rail, .cta, .share, .actions { display: none !important; } }
diff --git a/site/explainer.js b/site/explainer.js
new file mode 100644
index 0000000..fd0356e
--- /dev/null
+++ b/site/explainer.js
@@ -0,0 +1,492 @@
+// The explainer's calculator, worked example, and planner. The arithmetic is
+// floor.js; this file only reads the forms and draws the results.
+(function () {
+  "use strict";
+  var F = window.PlumblineFloor;
+  var fmt = F.fixed4;
+  function $(id) { return document.getElementById(id); }
+  function text(id, value) { $(id).textContent = value; }
+  function el(tag, content, className) {
+    var node = document.createElement(tag);
+    if (content !== undefined) node.textContent = content;
+    if (className) node.className = className;
+    return node;
+  }
+  function row(cells) {
+    var tr = document.createElement("tr");
+    cells.forEach(function (cell) { tr.appendChild(el("td", cell)); });
+    return tr;
+  }
+  function binLabel(lower, upper) {
+    var digits = upper - lower < 0.1 - 1e-9 ? 2 : 1;
+    return lower.toFixed(digits) + "-" + upper.toFixed(digits);
+  }
+
+  /* ---- workers --------------------------------------------------------- */
+
+  // Each tool gets its own worker, so the planner's long search never queues
+  // the calculator behind it, and Cancel can end one without the other. Where
+  // the browser refuses a worker (a page opened from disk, for example), the
+  // same code runs here, and there is nothing to cancel.
+  var nextId = 0;
+  function cancelled() {
+    var error = new Error("Cancelled.");
+    error.cancelled = true;
+    return error;
+  }
+
+  function runHere(job) {
+    setTimeout(function () {
+      try {
+        if (job.message.kind === "synthetic") {
+          job.resolve(F.syntheticFloor(job.message.n, job.message.nBins, job.message.accuracy));
+        } else {
+          job.resolve(F.planRows(job.message.target, job.message.nBins, job.message.accuracy, { onStep: job.onStep }));
+        }
+      } catch (error) { job.reject(error); }
+    }, 20);
+  }
+
+  function makeRunner() {
+    var worker = null;
+    var usable = typeof Worker === "function";
+    var job = null;
+    function spawn() {
+      if (worker || !usable) return worker;
+      try {
+        worker = new Worker("floor-worker.js");
+      } catch (e) {
+        usable = false;
+        return null;
+      }
+      worker.onmessage = function (event) {
+        var m = event.data;
+        if (!job || m.id !== job.id) return;
+        if (m.progress !== undefined) job.onProgress(m.progress);
+        else if (m.step !== undefined) job.onStep(m.step);
+        else {
+          var done = job;
+          job = null;
+          if (m.error) done.reject(new Error(m.error));
+          else done.resolve(m.result);
+        }
+      };
+      worker.onerror = function (event) {
+        event.preventDefault();
+        usable = false;
+        worker = null;
+        if (job) {
+          var orphan = job;
+          job = null;
+          runHere(orphan);
+        }
+      };
+      return worker;
+    }
+    return {
+      run: function (message, onProgress, onStep) {
+        return new Promise(function (resolve, reject) {
+          var noop = function () {};
+          var next = { id: ++nextId, message: message, resolve: resolve, reject: reject, onProgress: onProgress || noop, onStep: onStep || noop };
+          var w = spawn();
+          if (!w) { runHere(next); return; }
+          job = next;
+          message.id = next.id;
+          w.postMessage(message);
+        });
+      },
+      // Only a job running in a worker can be stopped part way.
+      cancellable: function () { return !!(worker && job); },
+      cancel: function () {
+        if (!job) return;
+        var stopped = job;
+        job = null;
+        worker.terminate();
+        worker = null; // a fresh one starts on the next run
+        stopped.reject(cancelled());
+      },
+    };
+  }
+  var runners = { calc: makeRunner(), plan: makeRunner() };
+
+  /* ---- forms ------------------------------------------------------------ */
+
+  function number(input, check, message) {
+    var value = Number(input.value);
+    return check(value) ? { value: value } : { message: message, field: input };
+  }
+
+  function busy(prefix, on, statusText) {
+    $(prefix + "-go").disabled = on;
+    $(prefix + "-progress").hidden = !on;
+    $(prefix + "-progress").value = 0;
+    $(prefix + "-cancel").hidden = !(on && runners[prefix].cancellable());
+    var status = $(prefix + "-status");
+    status.classList.remove("error");
+    status.textContent = statusText || "";
+  }
+
+  // A problem is said once, in the status line, and tied to the field it is
+  // about, so a screen reader on that field hears why.
+  function fail(prefix, error) {
+    var status = $(prefix + "-status");
+    status.textContent = error.message || String(error);
+    status.classList.toggle("error", !error.cancelled);
+    if (error.field) {
+      error.field.setAttribute("aria-invalid", "true");
+      error.field.setAttribute("aria-describedby", prefix + "-status");
+      error.field.focus();
+    }
+  }
+
+  function clearInvalid(form) {
+    Array.prototype.forEach.call(form.querySelectorAll("input"), function (input) {
+      input.removeAttribute("aria-invalid");
+      input.removeAttribute("aria-describedby");
+    });
+  }
+
+  var isWhole = function (lo, hi) { return function (v) { return Number.isInteger(v) && v >= lo && v <= hi; }; };
+  var isOpenUnit = function (v) { return v > 0 && v < 1; };
+
+  /* ---- sharing: inputs in the address, results on the clipboard --------- */
+
+  // The query string carries each tool's inputs, so a link reproduces a
+  // result. Each tool writes only its own names and leaves the other's alone.
+  var PARAMS = {
+    calc: { n: "n", bins: "bins", accuracy: "accuracy", measured: "measured" },
+    plan: { target: "target", bins: "plan_bins", accuracy: "plan_accuracy" },
+  };
+  var SECTION = { calc: "calculator", plan: "planner" };
+
+  function remember(prefix, form) {
+    if (!window.history || !history.replaceState) return;
+    var params = new URLSearchParams(location.search);
+    var names = PARAMS[prefix];
+    Object.keys(names).forEach(function (field) {
+      var value = form[field].value.trim();
+      if (value === "") params.delete(names[field]);
+      else params.set(names[field], value);
+    });
+    history.replaceState(null, "", "?" + params.toString() + "#" + SECTION[prefix]);
+  }
+
+  // Fills a tool's form from the address; says whether there was anything.
+  function recall(prefix, form) {
+    var params = new URLSearchParams(location.search);
+    var names = PARAMS[prefix];
+    var found = false;
+    Object.keys(names).forEach(function (field) {
+      if (params.has(names[field])) {
+        form[field].value = params.get(names[field]);
+        found = true;
+      }
+    });
+    return found;
+  }
+
+  function linkFor(prefix) {
+    return location.origin + location.pathname + location.search + "#" + SECTION[prefix];
+  }
+
+  function copy(value) {
+    if (navigator.clipboard && window.isSecureContext) return navigator.clipboard.writeText(value);
+    return new Promise(function (resolve, reject) {
+      var area = document.createElement("textarea");
+      area.value = value;
+      area.setAttribute("readonly", "");
+      area.className = "offscreen";
+      document.body.appendChild(area);
+      area.select();
+      var ok = false;
+      try { ok = document.execCommand("copy"); } catch (e) { ok = false; }
+      area.remove();
+      if (ok) resolve(); else reject(new Error("copy refused"));
+    });
+  }
+
+  var lastResult = { calc: "", plan: "" };
+  ["calc", "plan"].forEach(function (prefix) {
+    function copyButton(id, what, valueOf) {
+      $(id).addEventListener("click", function () {
+        var status = $(prefix + "-status");
+        copy(valueOf()).then(
+          function () { status.classList.remove("error"); status.textContent = what + " copied."; },
+          function () { status.textContent = "Could not copy; select the text instead."; }
+        );
+      });
+    }
+    copyButton(prefix + "-copy-link", "Link", function () { return linkFor(prefix); });
+    copyButton(prefix + "-copy-result", "Result", function () { return lastResult[prefix]; });
+    $(prefix + "-cancel").addEventListener("click", function () { runners[prefix].cancel(); });
+  });
+
+  /* ---- calculator ------------------------------------------------------ */
+
+  $("calc").addEventListener("submit", function (event) {
+    event.preventDefault();
+    var form = event.target;
+    clearInvalid(form);
+    var fields = [
+      number(form.n, isWhole(1, 100000), "Rows must be a whole number from 1 to 100,000."),
+      number(form.bins, isWhole(1, 1000), "Bins must be a whole number from 1 to 1,000."),
+      number(form.accuracy, isOpenUnit, "Accuracy must lie strictly between 0 and 1."),
+    ];
+    var measuredText = form.measured.value.trim();
+    var measured = null;
+    if (measuredText !== "") {
+      var m = number(form.measured, function (v) { return v >= 0 && v <= 1; }, "Measured ECE must lie between 0 and 1.");
+      fields.push(m);
+      measured = m.value;
+    }
+    for (var i = 0; i < fields.length; i++) {
+      if (fields[i].message) { busy("calc", false); fail("calc", fields[i]); return; }
+    }
+    var input = { n: fields[0].value, nBins: fields[1].value, accuracy: fields[2].value, measured: measured };
+    var running = runners.calc.run({ kind: "synthetic", n: input.n, nBins: input.nBins, accuracy: input.accuracy },
+      function (f) { $("calc-progress").value = f; });
+    busy("calc", true, "Running 2,000 bootstrap resamples...");
+    running
+      .then(function (band) {
+        var summary = showCalc(band, input);
+        busy("calc", false, summary);
+        remember("calc", form);
+      })
+      .catch(function (error) { busy("calc", false); fail("calc", error); });
+  });
+
+  // Draws the result, and returns the one line the status reads out.
+  function showCalc(band, input) {
+    text("calc-mean", fmt(band.mean));
+    text("calc-p95", fmt(band.p95));
+    text("calc-config", band.n + " rows, " + band.nBins + " bins, accuracy " + input.accuracy);
+    text("calc-read", "A perfectly calibrated model scores " + fmt(band.mean) + " on average at this size, and above " +
+      fmt(band.p95) + " one time in twenty. A measured ECE at or below " + fmt(band.p95) +
+      " cannot be told apart from calibrated on this many rows.");
+    var summary = "Floor mean " + fmt(band.mean) + ", 95th percentile " + fmt(band.p95) + ".";
+    var verdict = $("calc-verdict");
+    if (input.measured === null) {
+      verdict.hidden = true;
+      lastResult.calc = "Calibrated-model floor at " + band.n + " rows, " + band.nBins + " bins, accuracy " +
+        input.accuracy + ": mean " + fmt(band.mean) + ", 95th percentile " + fmt(band.p95) + ".";
+    } else {
+      var clears = F.isDistinguishable(input.measured, band);
+      var statement = F.statement(input.measured, band);
+      verdict.className = "verdict " + (clears ? "distinguishable" : "inconclusive");
+      verdict.replaceChildren(
+        el("strong", clears ? "Distinguishable from sampling noise" : "Inconclusive, which is not a pass"),
+        el("span", statement)
+      );
+      verdict.hidden = false;
+      lastResult.calc = statement;
+      summary += clears ? " The measured ECE clears it." : " The measured ECE is inconclusive.";
+    }
+    $("calc-result").hidden = false;
+    return summary;
+  }
+
+  /* ---- worked example -------------------------------------------------- */
+
+  function histogram(svg, draws, marks) {
+    var left = 6, right = 394, top = 40, bottom = 172;
+    var hi = Math.max.apply(null, draws.concat(marks.map(function (m) { return m.value; }))) * 1.08;
+    var nb = 40;
+    var counts = new Array(nb).fill(0);
+    draws.forEach(function (d) { counts[Math.min(nb - 1, Math.floor(d / hi * nb))]++; });
+    var peak = Math.max.apply(null, counts);
+    var x = function (v) { return left + (v / hi) * (right - left); };
+    var ns = "http://www.w3.org/2000/svg";
+    function add(tag, attrs, content) {
+      var node = document.createElementNS(ns, tag);
+      Object.keys(attrs).forEach(function (k) { node.setAttribute(k, attrs[k]); });
+      if (content !== undefined) node.textContent = content;
+      svg.appendChild(node);
+      return node;
+    }
+    svg.replaceChildren();
+    var bw = (right - left) / nb;
+    counts.forEach(function (c, i) {
+      if (!c) return;
+      var h = (c / peak) * (bottom - top);
+      add("rect", { class: "bar", x: left + i * bw + 0.5, y: bottom - h, width: Math.max(1, bw - 1), height: h });
+    });
+    add("line", { class: "axis", x1: left, x2: right, y1: bottom, y2: bottom });
+    [0, 0.05, 0.1, 0.15, 0.2, 0.25, 0.3].forEach(function (t) {
+      if (t > hi) return;
+      add("line", { class: "axis", x1: x(t), x2: x(t), y1: bottom, y2: bottom + 4 });
+      add("text", { x: x(t), y: bottom + 20, "text-anchor": t === 0 ? "start" : "middle" }, t.toFixed(2));
+    });
+    marks.forEach(function (m, i) {
+      add("line", { class: m.className, x1: x(m.value), x2: x(m.value), y1: 6 + i * 17, y2: bottom });
+      // Start the label at its line when it fits to the right, else end it there.
+      var anchor = x(m.value) + 4 + m.label.length * 8 < right ? "start" : "end";
+      var dx = anchor === "end" ? -4 : 4;
+      add("text", { class: m.className + "-label", x: x(m.value) + dx, y: 16 + i * 17, "text-anchor": anchor }, m.label);
+    });
+  }
+
+  // A missing file and a failure to draw it are different problems, and the
+  // page says which one happened.
+  function loadExample() {
+    return fetch("example-run.json", { cache: "no-cache" })
+      .then(function (response) {
+        if (!response.ok) throw new Error("HTTP " + response.status);
+        return response.json();
+      })
+      .then(function (ex) {
+        try {
+          showExample(ex);
+        } catch (error) {
+          console.error(error);
+          $("ex-report-line").replaceChildren(el("p", "The example's rows loaded, but drawing them failed: " +
+            (error.message || String(error)) + ". Please open an issue.", "error"));
+        }
+      }, function () {
+        $("ex-report-line").replaceChildren(el("p", "The example is not available in this copy of the page.", "muted"));
+        $("ex-missing").hidden = false;
+      });
+  }
+
+  function showExample(ex) {
+    var p = ex.probabilities, correct = ex.correct, nBins = ex.n_bins, n = p.length;
+    $("ex-report-line").replaceChildren(el("p", ex.report.accuracy_line), el("p", ex.report.ece_line));
+
+    var right = correct.reduce(function (a, b) { return a + b; }, 0);
+    var accuracy = right / n;
+    $("ex-rows").replaceChildren(
+      document.createTextNode(n + " predictions and outcomes from the seeded mock adapter, a deterministic stand-in rather than a vendor. They were regenerated when this site was deployed, by running the command the report records: "),
+      el("code", ex.command),
+      document.createTextNode(". " + right + " of " + n + " were right, an accuracy of " + fmt(accuracy) + ".")
+    );
+
+    var bins = F.reliability(p, correct, nBins);
+    var tbody = $("ex-bins");
+    tbody.replaceChildren();
+    bins.forEach(function (b) {
+      tbody.appendChild(row([binLabel(b.lower, b.upper), String(b.count), fmt(b.meanProbability), fmt(b.accuracy), fmt(b.gap)]));
+    });
+    var measured = F.ece(p, correct, nBins);
+    text("ex-n", String(n));
+    text("ex-ece", fmt(measured));
+
+    var band = F.calibrationFloor(p, nBins, { keepDraws: true });
+    histogram($("ex-hist"), band.draws, [
+      { value: measured, label: "measured " + fmt(measured), className: "measured" },
+      { value: band.p95, label: "p95 " + fmt(band.p95), className: "p95" },
+    ]);
+    var beyond = band.draws.filter(function (d) { return d >= measured; }).length;
+    text("ex-hist-desc", "Histogram of 2,000 resampled ECEs from a perfectly calibrated model with these 105 probabilities. Mean " +
+      fmt(band.mean) + ", 95th percentile " + fmt(band.p95) + ". " + beyond + " of the 2,000 (" +
+      Math.round(beyond / 20) + "%) scored at least the measured " + fmt(measured) + ".");
+
+    var derived = F.statement(measured, band);
+    var clears = F.isDistinguishable(measured, band);
+    $("ex-verdict").className = "verdict " + (clears ? "distinguishable" : "inconclusive");
+    $("ex-verdict").replaceChildren(el("strong", clears ? "Distinguishable from sampling noise" : "Inconclusive, which is not a pass"), el("span", derived));
+    var same = derived === ex.report.ece_line;
+    text("ex-match", same
+      ? "Derived here, and identical to the line in the report, character for character."
+      : "This derivation does not match the report line. The deploy check should have prevented this; please open an issue.");
+    $("ex-steps").hidden = false;
+
+    var summary = F.syntheticFloor(n, nBins, accuracy, { keepProbabilities: true });
+    text("ex-real-floor", fmt(band.mean) + " (95th percentile " + fmt(band.p95) + ")");
+    text("ex-summary-floor", fmt(summary.mean) + " (95th percentile " + fmt(summary.p95) + ")");
+    var realCounts = new Array(nBins).fill(0);
+    var inventedCounts = new Array(nBins).fill(0);
+    bins.forEach(function (b) { realCounts[b.index] = b.count; });
+    summary.probabilities.forEach(function (q) { inventedCounts[Math.min(nBins - 1, Math.floor(q * nBins))]++; });
+    var spread = $("ex-spread");
+    spread.replaceChildren();
+    for (var k = 0; k < nBins; k++) {
+      if (!realCounts[k] && !inventedCounts[k]) continue;
+      spread.appendChild(row([binLabel(k / nBins, (k + 1) / nBins), String(realCounts[k]), String(inventedCounts[k])]));
+    }
+    $("ex-lesson").hidden = false;
+  }
+
+  /* ---- planner --------------------------------------------------------- */
+
+  $("plan").addEventListener("submit", function (event) {
+    event.preventDefault();
+    var form = event.target;
+    clearInvalid(form);
+    var fields = [
+      number(form.target, isOpenUnit, "The ECE to detect must lie strictly between 0 and 1."),
+      number(form.bins, isWhole(1, 1000), "Bins must be a whole number from 1 to 1,000."),
+      number(form.accuracy, isOpenUnit, "Accuracy must lie strictly between 0 and 1."),
+    ];
+    for (var i = 0; i < fields.length; i++) {
+      if (fields[i].message) { busy("plan", false); fail("plan", fields[i]); return; }
+    }
+    var target = fields[0].value, nBins = fields[1].value, accuracy = fields[2].value;
+    var trace = $("plan-trace");
+    trace.replaceChildren();
+    $("plan-result").hidden = true;
+    var running = runners.plan.run({ kind: "plan", target: target, nBins: nBins, accuracy: accuracy },
+      function (f) { $("plan-progress").value = f; },
+      function (steps) { showTrace(steps); });
+    busy("plan", true, "Searching. Large row counts take several seconds each...");
+    running
+      .then(function (plan) {
+        var summary = showPlan(plan, target, nBins, accuracy);
+        busy("plan", false, summary);
+        remember("plan", form);
+      })
+      .catch(function (error) { busy("plan", false); fail("plan", error); });
+  });
+
+  function showTrace(steps) {
+    var trace = $("plan-trace");
+    trace.replaceChildren();
+    steps.forEach(function (s) {
+      trace.appendChild(el("li", s.n.toLocaleString("en-US") + " rows: 95th percentile " + fmt(s.p95)));
+    });
+  }
+
+  // Draws the plan, and returns the one line the status reads out.
+  function showPlan(plan, target, nBins, accuracy) {
+    showTrace(plan.evaluations);
+    var headline, reading;
+    if (plan.exceeds) {
+      headline = "More than " + plan.maxRows.toLocaleString("en-US") + " rows";
+      reading = "At " + plan.maxRows.toLocaleString("en-US") + " rows the summary floor's 95th percentile is " +
+        fmt(plan.band.p95) + ", still above " + target + ". Extrapolating at one over the square root of n suggests roughly " +
+        plan.extrapolated.toLocaleString("en-US") + " rows; this page does not compute floors that large.";
+    } else {
+      headline = "About " + plan.rows.toLocaleString("en-US") + " rows";
+      reading = "At " + plan.rows.toLocaleString("en-US") + " rows, " + nBins + " bins, and accuracy " + accuracy +
+        ", the summary floor has mean " + fmt(plan.band.mean) + " and 95th percentile " + fmt(plan.band.p95) +
+        ", so a measured ECE of " + target + " would clear it. On materially fewer rows, the same measurement would read as INCONCLUSIVE.";
+    }
+    text("plan-rows", headline);
+    text("plan-read", reading);
+    lastResult.plan = "To detect an ECE of " + target + " (" + nBins + " bins, accuracy " + accuracy + "): " +
+      headline.toLowerCase() + ". " + reading;
+    $("plan-result").hidden = false;
+    return headline + " to detect an ECE of " + target + ".";
+  }
+
+  /* ---- start ------------------------------------------------------------ */
+
+  // The worked example grows the page after it loads, which leaves a link to
+  // a later section (#planner, say) short of its target. Once it is drawn,
+  // land on the target again, unless the reader has already moved.
+  var moved = false;
+  ["wheel", "touchmove", "keydown", "mousedown"].forEach(function (type) {
+    window.addEventListener(type, function () { moved = true; }, { once: true, passive: true });
+  });
+  loadExample().then(function () {
+    var target = location.hash && document.getElementById(decodeURIComponent(location.hash.slice(1)));
+    if (target && !moved) target.scrollIntoView();
+  });
+
+  // A link that carries a tool's inputs runs that tool as the page opens.
+  ["calc", "plan"].forEach(function (prefix) {
+    var form = $(prefix);
+    if (recall(prefix, form)) {
+      if (form.requestSubmit) form.requestSubmit();
+      else form.dispatchEvent(new Event("submit", { cancelable: true }));
+    }
+  });
+})();
diff --git a/site/floor.js b/site/floor.js
index 0ba3cb0..75e4a9d 100644
--- a/site/floor.js
+++ b/site/floor.js
@@ -280,7 +280,7 @@
    * and accuracy. For display; ece() below does the same sums in the same order.
    */
   function reliability(probabilities, correct, nBins) {
-    nBins = nBins || DEFAULT_N_BINS;
+    if (nBins == null) nBins = DEFAULT_N_BINS; // 0 is refused below, as the Python refuses it
     checkBins(nBins);
     var index = binIndices(probabilities, nBins);
     var counts = new Float64Array(nBins);
@@ -313,7 +313,7 @@
    * ECE of observed rows: the count-weighted mean per-bin gap, as ece() computes it.
    */
   function ece(probabilities, correct, nBins) {
-    nBins = nBins || DEFAULT_N_BINS;
+    if (nBins == null) nBins = DEFAULT_N_BINS; // 0 is refused below, as the Python refuses it
     checkBins(nBins);
     var n = probabilities.length;
     if (!n || n !== correct.length) throw new Error("probabilities and outcomes must be non-empty and the same length");
@@ -392,7 +392,7 @@
    */
   function calibrationFloor(probabilities, nBins, options) {
     options = options || {};
-    nBins = nBins || DEFAULT_N_BINS;
+    if (nBins == null) nBins = DEFAULT_N_BINS; // 0 is refused below, as the Python refuses it
     checkBins(nBins);
     if (!probabilities.length) throw new Error("no predictions to build a floor from");
     return bootstrapFloor(Float64Array.from(probabilities), nBins, {
@@ -416,7 +416,7 @@
   function syntheticFloor(n, nBins, accuracy, options) {
     options = options || {};
     var concentration = options.concentration || DEFAULT_CONCENTRATION;
-    nBins = nBins || DEFAULT_N_BINS;
+    if (nBins == null) nBins = DEFAULT_N_BINS; // 0 is refused below, as the Python refuses it
 
     if (!(Number.isInteger(n) && n >= 1)) throw new Error("n must be a whole number of rows, at least 1");
     checkBins(nBins);
diff --git a/site/index.html b/site/index.html
index 1b5606a..74f7fd5 100644
--- a/site/index.html
+++ b/site/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
 <meta charset="utf-8">
+<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; font-src 'self'; connect-src 'self'; worker-src 'self'; frame-src 'none'; object-src 'none'; base-uri 'none'; form-action 'none'">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>plumbline: the ECE floor</title>
 <meta name="description" content="A perfectly calibrated model does not score an ECE of zero on a finite sample. Enter your row count and see the floor your number has to clear.">
@@ -24,85 +25,38 @@
 <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1v9' stroke='%23555' stroke-width='1.5'/%3E%3Cpath d='M5 10h6l-3 5z' fill='%23555'/%3E%3C/svg%3E">
 <script src="theme.js"></script>
 <link rel="stylesheet" href="base.css">
-<style>
-  section { padding: 2rem 0; border-top: 1px solid var(--line); }
-  .lede { font-size: 1.05rem; }
-  .label { display: inline-block; font: 600 0.75rem var(--mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--warn-fg); background: var(--warn-bg); padding: 0.1rem 0.4rem; border-radius: 3px; margin-bottom: 0.5rem; }
-
-  form { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 1rem; margin: 1.25rem 0 1rem; }
-  label { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 0.25rem; }
-  .hint { display: block; font-size: 0.8rem; font-weight: 400; color: var(--muted); }
-  input { width: 100%; font: 1rem var(--mono); padding: 0.5rem 0.6rem; color: var(--fg); background: var(--bg); border: 1px solid var(--control); border-radius: 4px; }
-  .actions { grid-column: 1 / -1; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
-  button { font: 600 1rem var(--sans); padding: 0.55rem 1.1rem; color: var(--bg); background: var(--fg); border: 0; border-radius: 4px; cursor: pointer; }
-  button[disabled] { opacity: 0.55; cursor: progress; }
-  progress { flex: 1 1 8rem; height: 0.5rem; }
-  .error { color: var(--error); }
-
-  .result { border: 1px solid var(--line); border-radius: 6px; padding: 1rem; background: var(--panel); }
-  .result[hidden], [hidden] { display: none !important; }
-  .result h3:first-child { margin-top: 0; }
-  dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0 0 1rem; }
-  dt { color: var(--muted); }
-  dd { margin: 0; font-family: var(--mono); overflow-wrap: anywhere; }
-  .verdict { padding: 0.75rem; border-radius: 4px; margin: 0 0 1rem; }
-  .verdict.inconclusive { background: var(--warn-bg); color: var(--warn-fg); }
-  .verdict.distinguishable { background: var(--ok-bg); color: var(--ok-fg); }
-  .verdict strong { display: block; margin-bottom: 0.25rem; }
-  .big { font: 600 1.6rem var(--mono); margin: 0 0 0.5rem; }
-
-  .table-wrap { overflow-x: auto; margin: 0 0 1rem; }
-  table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
-  caption { text-align: left; color: var(--muted); font-size: 0.85rem; padding-bottom: 0.4rem; }
-  th, td { padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--line); text-align: right; font-family: var(--mono); white-space: nowrap; }
-  th { font-family: var(--sans); font-weight: 600; color: var(--muted); }
-  th:first-child, td:first-child { text-align: left; }
-  tfoot td { border-bottom: 0; font-weight: 600; }
-  @media (max-width: 30rem) {
-    table { font-size: 0.8rem; }
-    th, td { padding: 0.3rem 0.25rem; }
-    th { white-space: normal; }
-  }
-
-  figure { margin: 0 0 1rem; }
-  figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 0.25rem; }
-  svg.hist { width: 100%; height: auto; display: block; }
-  svg.hist .bar { fill: var(--bar); }
-  svg.hist .axis { stroke: var(--line); }
-  svg.hist text { fill: var(--muted); font: 13px var(--mono); }
-  svg.hist .measured { stroke: var(--mark-measured); stroke-width: 2; }
-  svg.hist .p95 { stroke: var(--mark-p95); stroke-width: 2; stroke-dasharray: 5 3; }
-  svg.hist text.measured-label { fill: var(--mark-measured); }
-  svg.hist text.p95-label { fill: var(--mark-p95); }
-
-  ol.steps { padding-left: 1.25rem; }
-  ol.steps > li { margin-bottom: 1.25rem; }
-  .trace { font: 0.85rem var(--mono); color: var(--muted); padding-left: 1.25rem; margin: 0 0 1rem; }
-</style>
+<link rel="stylesheet" href="explainer.css">
 </head>
 <body>
 <a class="skip" href="#argument">Skip to the argument</a>
 <!-- site:header -->
 
-<main>
-<div class="intro">
+<main class="explainer">
+<div class="intro hero">
   <h1>A calibration claim has a floor</h1>
   <p class="lede">A perfectly calibrated model does not score an Expected Calibration Error of zero.
   On a finite sample it scores something above zero, and on a few hundred rows that something is
   often larger than the differences people report. Below a certain row count, a calibration claim
   is not measurable at all. This page lets you check where your own numbers sit, without installing
   anything.</p>
-  <nav aria-label="On this page">
-    <ul>
-      <li><a href="#argument">The argument</a></li>
-      <li><a href="#calculator">Floor calculator</a></li>
-      <li><a href="#example">Worked example</a></li>
-      <li><a href="#planner">Sample-size planner</a></li>
-      <li><a href="#provenance">What computes this</a></li>
-    </ul>
-  </nav>
+  <!-- site:example-card -->
+  <p class="cta">
+    <a class="button" href="#calculator">Check your numbers</a>
+    <a class="button secondary" href="docs/methodology.html">Read the methodology</a>
+  </p>
 </div>
 
+<nav class="rail" aria-label="On this page">
+  <p class="rail-label">On this page</p>
+  <ul>
+    <li><a href="#argument">The argument</a></li>
+    <li><a href="#calculator">Floor calculator</a></li>
+    <li><a href="#example">Worked example</a></li>
+    <li><a href="#planner">Sample-size planner</a></li>
+    <li><a href="#provenance">What computes this</a></li>
+  </ul>
+</nav>
+
   <section id="argument" aria-labelledby="argument-h">
     <h2 id="argument-h">The argument</h2>
     <p>ECE sorts predictions into bins by the probability the model gave, and in each bin compares
@@ -144,12 +98,13 @@ <h2 id="calculator-h">Floor calculator</h2>
       </div>
       <div class="actions">
         <button id="calc-go" type="submit">Compute floor</button>
+        <button id="calc-cancel" type="button" class="secondary" hidden>Cancel</button>
         <progress id="calc-progress" max="1" value="0" hidden aria-label="Calculator progress"></progress>
         <span id="calc-status" role="status" aria-live="polite"></span>
       </div>
     </form>
 
-    <div id="calc-result" class="result" hidden aria-live="polite">
+    <div id="calc-result" class="result" hidden>
       <h3>Calibrated-model floor</h3>
       <dl>
         <dt>Mean</dt><dd id="calc-mean"></dd>
@@ -158,6 +113,10 @@ <h3>Calibrated-model floor</h3>
       </dl>
       <p id="calc-read"></p>
       <div id="calc-verdict" class="verdict" hidden></div>
+      <p class="share">
+        <button id="calc-copy-link" type="button" class="secondary small-button">Copy link</button>
+        <button id="calc-copy-result" type="button" class="secondary small-button">Copy result</button>
+      </p>
       <p class="small muted">This is an estimate from summary numbers. Your real predictions can
       give a different floor at the same row count; the <a href="#example">worked example</a>
       shows why.</p>
@@ -258,14 +217,19 @@ <h2 id="planner-h">Sample-size planner</h2>
       </div>
       <div class="actions">
         <button id="plan-go" type="submit">Plan</button>
+        <button id="plan-cancel" type="button" class="secondary" hidden>Cancel</button>
         <progress id="plan-progress" max="1" value="0" hidden aria-label="Planner progress"></progress>
         <span id="plan-status" role="status" aria-live="polite"></span>
       </div>
     </form>
 
-    <div id="plan-result" class="result" hidden aria-live="polite">
+    <div id="plan-result" class="result" hidden>
       <p class="big" id="plan-rows"></p>
       <p id="plan-read"></p>
+      <p class="share">
+        <button id="plan-copy-link" type="button" class="secondary small-button">Copy link</button>
+        <button id="plan-copy-result" type="button" class="secondary small-button">Copy result</button>
+      </p>
       <h3>Floors computed on the way</h3>
       <ul class="trace" id="plan-trace"></ul>
     </div>
@@ -309,317 +273,6 @@ <h2 id="provenance-h">What computes these numbers</h2>
 <script src="search.js" defer></script>
 <script src="site.js" defer></script>
 <script src="floor.js"></script>
-<script>
-(function () {
-  "use strict";
-  var F = window.PlumblineFloor;
-  var fmt = F.fixed4;
-  function $(id) { return document.getElementById(id); }
-  function text(id, value) { $(id).textContent = value; }
-  function el(tag, content, className) {
-    var node = document.createElement(tag);
-    if (content !== undefined) node.textContent = content;
-    if (className) node.className = className;
-    return node;
-  }
-  function row(cells) {
-    var tr = document.createElement("tr");
-    cells.forEach(function (cell) { tr.appendChild(el("td", cell)); });
-    return tr;
-  }
-  function binLabel(lower, upper) {
-    var digits = upper - lower < 0.1 - 1e-9 ? 2 : 1;
-    return lower.toFixed(digits) + "-" + upper.toFixed(digits);
-  }
-
-  /* ---- worker ---------------------------------------------------------- */
-
-  // A worker keeps the page responsive on large n. Where the browser refuses
-  // one (a page opened from disk, for example), the same code runs here.
-  var worker = null;
-  var pending = {};
-  var nextId = 0;
-  try {
-    worker = new Worker("floor-worker.js");
-    worker.onmessage = function (event) {
-      var m = event.data;
-      var job = pending[m.id];
-      if (!job) return;
-      if (m.progress !== undefined) job.onProgress(m.progress);
-      else if (m.step !== undefined) job.onStep(m.step);
-      else {
-        delete pending[m.id];
-        if (m.error) job.reject(new Error(m.error));
-        else job.resolve(m.result);
-      }
-    };
-    worker.onerror = function (event) {
-      event.preventDefault();
-      worker = null;
-      Object.keys(pending).forEach(function (id) { runHere(pending[id]); delete pending[id]; });
-    };
-  } catch (e) {
-    worker = null;
-  }
-
-  function runHere(job) {
-    setTimeout(function () {
-      try {
-        if (job.message.kind === "synthetic") {
-          job.resolve(F.syntheticFloor(job.message.n, job.message.nBins, job.message.accuracy));
-        } else {
-          job.resolve(F.planRows(job.message.target, job.message.nBins, job.message.accuracy, { onStep: job.onStep }));
-        }
-      } catch (error) { job.reject(error); }
-    }, 20);
-  }
-
-  function submit(message, onProgress, onStep) {
-    return new Promise(function (resolve, reject) {
-      var job = { message: message, resolve: resolve, reject: reject, onProgress: onProgress || function () {}, onStep: onStep || function () {} };
-      if (!worker) { runHere(job); return; }
-      message.id = ++nextId;
-      pending[message.id] = job;
-      worker.postMessage(message);
-    });
-  }
-
-  function number(input, check, message) {
-    var value = Number(input.value);
-    return check(value) ? { value: value } : { error: message, field: input };
-  }
-
-  function busy(prefix, on, statusText) {
-    $(prefix + "-go").disabled = on;
-    $(prefix + "-progress").hidden = !on;
-    $(prefix + "-progress").value = 0;
-    var status = $(prefix + "-status");
-    status.classList.remove("error");
-    status.textContent = statusText || "";
-  }
-
-  function fail(prefix, error) {
-    var status = $(prefix + "-status");
-    status.textContent = error.message || String(error);
-    status.classList.add("error");
-    if (error.field) error.field.focus();
-  }
-
-  var isWhole = function (lo, hi) { return function (v) { return Number.isInteger(v) && v >= lo && v <= hi; }; };
-  var isOpenUnit = function (v) { return v > 0 && v < 1; };
-
-  /* ---- calculator ------------------------------------------------------ */
-
-  $("calc").addEventListener("submit", function (event) {
-    event.preventDefault();
-    var form = event.target;
-    var fields = [
-      number(form.n, isWhole(1, 100000), "Rows must be a whole number from 1 to 100,000."),
-      number(form.bins, isWhole(1, 1000), "Bins must be a whole number from 1 to 1,000."),
-      number(form.accuracy, isOpenUnit, "Accuracy must lie strictly between 0 and 1."),
-    ];
-    var measuredText = form.measured.value.trim();
-    var measured = null;
-    if (measuredText !== "") {
-      var m = number(form.measured, function (v) { return v >= 0 && v <= 1; }, "Measured ECE must lie between 0 and 1.");
-      fields.push(m);
-      measured = m.value;
-    }
-    for (var i = 0; i < fields.length; i++) {
-      if (fields[i].error) { busy("calc", false); fail("calc", fields[i]); return; }
-    }
-    var input = { n: fields[0].value, nBins: fields[1].value, accuracy: fields[2].value, measured: measured };
-    busy("calc", true, "Running 2,000 bootstrap resamples...");
-    submit({ kind: "synthetic", n: input.n, nBins: input.nBins, accuracy: input.accuracy },
-      function (f) { $("calc-progress").value = f; })
-      .then(function (band) { showCalc(band, input); busy("calc", false, "Done."); })
-      .catch(function (error) { busy("calc", false); fail("calc", error); });
-  });
-
-  function showCalc(band, input) {
-    text("calc-mean", fmt(band.mean));
-    text("calc-p95", fmt(band.p95));
-    text("calc-config", band.n + " rows, " + band.nBins + " bins, accuracy " + input.accuracy);
-    text("calc-read", "A perfectly calibrated model scores " + fmt(band.mean) + " on average at this size, and above " +
-      fmt(band.p95) + " one time in twenty. A measured ECE at or below " + fmt(band.p95) +
-      " cannot be told apart from calibrated on this many rows.");
-    var verdict = $("calc-verdict");
-    if (input.measured === null) {
-      verdict.hidden = true;
-    } else {
-      var clears = F.isDistinguishable(input.measured, band);
-      verdict.className = "verdict " + (clears ? "distinguishable" : "inconclusive");
-      verdict.replaceChildren(
-        el("strong", clears ? "Distinguishable from sampling noise" : "Inconclusive, which is not a pass"),
-        el("span", F.statement(input.measured, band))
-      );
-      verdict.hidden = false;
-    }
-    $("calc-result").hidden = false;
-  }
-
-  /* ---- worked example -------------------------------------------------- */
-
-  function histogram(svg, draws, marks) {
-    var left = 6, right = 394, top = 40, bottom = 172;
-    var hi = Math.max.apply(null, draws.concat(marks.map(function (m) { return m.value; }))) * 1.08;
-    var nb = 40;
-    var counts = new Array(nb).fill(0);
-    draws.forEach(function (d) { counts[Math.min(nb - 1, Math.floor(d / hi * nb))]++; });
-    var peak = Math.max.apply(null, counts);
-    var x = function (v) { return left + (v / hi) * (right - left); };
-    var ns = "http://www.w3.org/2000/svg";
-    function add(tag, attrs, content) {
-      var node = document.createElementNS(ns, tag);
-      Object.keys(attrs).forEach(function (k) { node.setAttribute(k, attrs[k]); });
-      if (content !== undefined) node.textContent = content;
-      svg.appendChild(node);
-      return node;
-    }
-    svg.replaceChildren();
-    var bw = (right - left) / nb;
-    counts.forEach(function (c, i) {
-      if (!c) return;
-      var h = (c / peak) * (bottom - top);
-      add("rect", { class: "bar", x: left + i * bw + 0.5, y: bottom - h, width: Math.max(1, bw - 1), height: h });
-    });
-    add("line", { class: "axis", x1: left, x2: right, y1: bottom, y2: bottom });
-    [0, 0.05, 0.1, 0.15, 0.2, 0.25, 0.3].forEach(function (t) {
-      if (t > hi) return;
-      add("line", { class: "axis", x1: x(t), x2: x(t), y1: bottom, y2: bottom + 4 });
-      add("text", { x: x(t), y: bottom + 20, "text-anchor": t === 0 ? "start" : "middle" }, t.toFixed(2));
-    });
-    marks.forEach(function (m, i) {
-      add("line", { class: m.className, x1: x(m.value), x2: x(m.value), y1: 6 + i * 17, y2: bottom });
-      // Start the label at its line when it fits to the right, else end it there.
-      var anchor = x(m.value) + 4 + m.label.length * 8 < right ? "start" : "end";
-      var dx = anchor === "end" ? -4 : 4;
-      add("text", { class: m.className + "-label", x: x(m.value) + dx, y: 16 + i * 17, "text-anchor": anchor }, m.label);
-    });
-  }
-
-  function loadExample() {
-    fetch("example-run.json", { cache: "no-cache" })
-      .then(function (response) {
-        if (!response.ok) throw new Error("HTTP " + response.status);
-        return response.json();
-      })
-      .then(showExample)
-      .catch(function () {
-        $("ex-report-line").replaceChildren(el("p", "The example is not available in this copy of the page.", "muted"));
-        $("ex-missing").hidden = false;
-      });
-  }
-
-  function showExample(ex) {
-    var p = ex.probabilities, correct = ex.correct, nBins = ex.n_bins, n = p.length;
-    $("ex-report-line").replaceChildren(el("p", ex.report.accuracy_line), el("p", ex.report.ece_line));
-
-    var right = correct.reduce(function (a, b) { return a + b; }, 0);
-    var accuracy = right / n;
-    $("ex-rows").replaceChildren(
-      document.createTextNode(n + " predictions and outcomes from the seeded mock adapter, a deterministic stand-in rather than a vendor. They were regenerated when this site was deployed, by running the command the report records: "),
-      el("code", ex.command),
-      document.createTextNode(". " + right + " of " + n + " were right, an accuracy of " + fmt(accuracy) + ".")
-    );
-
-    var bins = F.reliability(p, correct, nBins);
-    var tbody = $("ex-bins");
-    tbody.replaceChildren();
-    bins.forEach(function (b) {
-      tbody.appendChild(row([binLabel(b.lower, b.upper), String(b.count), fmt(b.meanProbability), fmt(b.accuracy), fmt(b.gap)]));
-    });
-    var measured = F.ece(p, correct, nBins);
-    text("ex-n", String(n));
-    text("ex-ece", fmt(measured));
-
-    var band = F.calibrationFloor(p, nBins, { keepDraws: true });
-    histogram($("ex-hist"), band.draws, [
-      { value: measured, label: "measured " + fmt(measured), className: "measured" },
-      { value: band.p95, label: "p95 " + fmt(band.p95), className: "p95" },
-    ]);
-    var beyond = band.draws.filter(function (d) { return d >= measured; }).length;
-    text("ex-hist-desc", "Histogram of 2,000 resampled ECEs from a perfectly calibrated model with these 105 probabilities. Mean " +
-      fmt(band.mean) + ", 95th percentile " + fmt(band.p95) + ". " + beyond + " of the 2,000 (" +
-      Math.round(beyond / 20) + "%) scored at least the measured " + fmt(measured) + ".");
-
-    var derived = F.statement(measured, band);
-    var clears = F.isDistinguishable(measured, band);
-    $("ex-verdict").className = "verdict " + (clears ? "distinguishable" : "inconclusive");
-    $("ex-verdict").replaceChildren(el("strong", clears ? "Distinguishable from sampling noise" : "Inconclusive, which is not a pass"), el("span", derived));
-    var same = derived === ex.report.ece_line;
-    text("ex-match", same
-      ? "Derived here, and identical to the line in the report, character for character."
-      : "This derivation does not match the report line. The deploy check should have prevented this; please open an issue.");
-    $("ex-steps").hidden = false;
-
-    var summary = F.syntheticFloor(n, nBins, accuracy, { keepProbabilities: true });
-    text("ex-real-floor", fmt(band.mean) + " (95th percentile " + fmt(band.p95) + ")");
-    text("ex-summary-floor", fmt(summary.mean) + " (95th percentile " + fmt(summary.p95) + ")");
-    var realCounts = new Array(nBins).fill(0);
-    var inventedCounts = new Array(nBins).fill(0);
-    bins.forEach(function (b) { realCounts[b.index] = b.count; });
-    summary.probabilities.forEach(function (q) { inventedCounts[Math.min(nBins - 1, Math.floor(q * nBins))]++; });
-    var spread = $("ex-spread");
-    spread.replaceChildren();
-    for (var k = 0; k < nBins; k++) {
-      if (!realCounts[k] && !inventedCounts[k]) continue;
-      spread.appendChild(row([binLabel(k / nBins, (k + 1) / nBins), String(realCounts[k]), String(inventedCounts[k])]));
-    }
-    $("ex-lesson").hidden = false;
-  }
-
-  loadExample();
-
-  /* ---- planner --------------------------------------------------------- */
-
-  $("plan").addEventListener("submit", function (event) {
-    event.preventDefault();
-    var form = event.target;
-    var fields = [
-      number(form.target, isOpenUnit, "The ECE to detect must lie strictly between 0 and 1."),
-      number(form.bins, isWhole(1, 1000), "Bins must be a whole number from 1 to 1,000."),
-      number(form.accuracy, isOpenUnit, "Accuracy must lie strictly between 0 and 1."),
-    ];
-    for (var i = 0; i < fields.length; i++) {
-      if (fields[i].error) { busy("plan", false); fail("plan", fields[i]); return; }
-    }
-    var target = fields[0].value, nBins = fields[1].value, accuracy = fields[2].value;
-    var trace = $("plan-trace");
-    trace.replaceChildren();
-    $("plan-result").hidden = true;
-    busy("plan", true, "Searching. Large row counts take several seconds each...");
-    submit({ kind: "plan", target: target, nBins: nBins, accuracy: accuracy },
-      function (f) { $("plan-progress").value = f; },
-      function (steps) { showTrace(steps); })
-      .then(function (plan) { showPlan(plan, target, nBins, accuracy); busy("plan", false, "Done."); })
-      .catch(function (error) { busy("plan", false); fail("plan", error); });
-  });
-
-  function showTrace(steps) {
-    var trace = $("plan-trace");
-    trace.replaceChildren();
-    steps.forEach(function (s) {
-      trace.appendChild(el("li", s.n.toLocaleString("en-US") + " rows: 95th percentile " + fmt(s.p95)));
-    });
-  }
-
-  function showPlan(plan, target, nBins, accuracy) {
-    showTrace(plan.evaluations);
-    if (plan.exceeds) {
-      text("plan-rows", "More than " + plan.maxRows.toLocaleString("en-US") + " rows");
-      text("plan-read", "At " + plan.maxRows.toLocaleString("en-US") + " rows the summary floor's 95th percentile is " +
-        fmt(plan.band.p95) + ", still above " + target + ". Extrapolating at one over the square root of n suggests roughly " +
-        plan.extrapolated.toLocaleString("en-US") + " rows; this page does not compute floors that large.");
-    } else {
-      text("plan-rows", "About " + plan.rows.toLocaleString("en-US") + " rows");
-      text("plan-read", "At " + plan.rows.toLocaleString("en-US") + " rows, " + nBins + " bins, and accuracy " + accuracy +
-        ", the summary floor has mean " + fmt(plan.band.mean) + " and 95th percentile " + fmt(plan.band.p95) +
-        ", so a measured ECE of " + target + " would clear it. On materially fewer rows, the same measurement would read as INCONCLUSIVE.");
-    }
-    $("plan-result").hidden = false;
-  }
-})();
-</script>
+<script src="explainer.js"></script>
 </body>
 </html>
diff --git a/tests/test_build_site.py b/tests/test_build_site.py
index 8b80c04..0c89ee2 100644
--- a/tests/test_build_site.py
+++ b/tests/test_build_site.py
@@ -104,17 +104,42 @@ def test_header_marks_the_current_link(site: ModuleType) -> None:
     assert 'class="search-open" hidden' in html and 'class="theme-toggle" hidden' in html
 
 
-def test_explainer_needs_exactly_one_header_slot(site: ModuleType) -> None:
-    page = site.explainer_page(f"<body>{site.HEADER_SLOT}<main></main></body>")
+REPORT = {
+    "ece": 0.074,
+    "floor_p95": 0.1109,
+    "n": 105,
+    "ece_line": "ECE 0.0740 over 105 rows ...: INCONCLUSIVE at this sample size.",
+}
+
+
+def test_explainer_fills_both_slots_and_needs_the_policy(site: ModuleType) -> None:
+    good = f"{site.CSP_META}<body>{site.HEADER_SLOT}<main>{site.CARD_SLOT}</main></body>"
+    page = site.explainer_page(good, REPORT)
     assert site.HEADER_SLOT not in page and 'class="site-header"' in page
-    for broken in ("<body></body>", site.HEADER_SLOT * 2):
+    assert site.CARD_SLOT not in page and 'class="hero-card"' in page
+    broken = (
+        good.replace(site.HEADER_SLOT, ""),
+        good + site.HEADER_SLOT,
+        good.replace(site.CARD_SLOT, ""),
+        good.replace(site.CSP_META, ""),
+    )
+    for source in broken:
         with pytest.raises(site.BuildError):
-            site.explainer_page(broken)
+            site.explainer_page(source, REPORT)
 
 
-def test_the_committed_explainer_has_its_slot(site: ModuleType) -> None:
+def test_the_committed_explainer_has_its_slots_and_policy(site: ModuleType) -> None:
     source = (site.SITE / "index.html").read_text(encoding="utf-8")
-    assert source.count(site.HEADER_SLOT) == 1
+    for slot in (site.HEADER_SLOT, site.CARD_SLOT, site.CSP_META):
+        assert source.count(slot) == 1
+
+
+def test_example_card_says_what_the_report_says(site: ModuleType) -> None:
+    card = site.example_card(REPORT)
+    assert '<span class="v">0.0740</span>' in card and '<span class="v">0.1109</span>' in card
+    assert "INCONCLUSIVE" in card and "105 rows" in card
+    clear = site.example_card({**REPORT, "ece": 0.2, "ece_line": "ECE 0.2000 ...: distinguishable"})
+    assert "INCONCLUSIVE" not in clear and "Distinguishable" in clear
 
 
 def fake_rendered(site: ModuleType) -> dict[str, dict[str, object]]: