npm - eyeling - Versions diffs - 1.16.2 → 1.16.4 - Mend

eyeling 1.16.2 → 1.16.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (51) hide show

package/HANDBOOK.md +4 -0
package/README.md +0 -1
package/examples/ershov-mixed-computation.n3 +106 -0
package/examples/output/ershov-mixed-computation.n3 +15 -0
package/eyeling.js +510 -263
package/lib/cli.js +22 -12
package/lib/engine.js +488 -251
package/package.json +2 -3
package/arctifacts/README.md +0 -59
package/arctifacts/ackermann.html +0 -678
package/arctifacts/auroracare.html +0 -1297
package/arctifacts/bike-trip.html +0 -752
package/arctifacts/binomial-theorem.html +0 -631
package/arctifacts/bmi.html +0 -511
package/arctifacts/building-performance.html +0 -750
package/arctifacts/clinical-care.html +0 -726
package/arctifacts/collatz.html +0 -403
package/arctifacts/complex.html +0 -321
package/arctifacts/control-system.html +0 -482
package/arctifacts/delfour.html +0 -849
package/arctifacts/earthquake-epicenter.html +0 -982
package/arctifacts/eco-route.html +0 -662
package/arctifacts/euclid-infinitude.html +0 -564
package/arctifacts/euler-identity.html +0 -667
package/arctifacts/exoplanet-transit.html +0 -1000
package/arctifacts/faltings-theorem.html +0 -1046
package/arctifacts/fibonacci.html +0 -299
package/arctifacts/fundamental-theorem-arithmetic.html +0 -398
package/arctifacts/godel-numbering.html +0 -743
package/arctifacts/gps-bike.html +0 -759
package/arctifacts/gps-clinical-bench.html +0 -792
package/arctifacts/graph-french.html +0 -449
package/arctifacts/grass-molecular.html +0 -592
package/arctifacts/group-theory.html +0 -740
package/arctifacts/health-info.html +0 -833
package/arctifacts/kaprekar-constant.html +0 -576
package/arctifacts/lee.html +0 -805
package/arctifacts/linked-lists.html +0 -502
package/arctifacts/lldm.html +0 -612
package/arctifacts/matrix-multiplication.html +0 -502
package/arctifacts/matrix.html +0 -651
package/arctifacts/newton-raphson.html +0 -944
package/arctifacts/peano-factorial.html +0 -456
package/arctifacts/pi.html +0 -363
package/arctifacts/polynomial.html +0 -646
package/arctifacts/prime.html +0 -366
package/arctifacts/pythagorean-theorem.html +0 -468
package/arctifacts/rest-path.html +0 -469
package/arctifacts/roots-of-unity.html +0 -363
package/arctifacts/turing.html +0 -409
package/arctifacts/wind-turbines.html +0 -726

package/arctifacts/earthquake-epicenter.html DELETED Viewed

@@ -1,982 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <title>Earthquake Epicenter — ARC Science Explorer</title>
-    <meta
-      name="description"
-      content="A mobile-first ARC-style science page that infers an earthquake epicenter from P- and S-wave arrivals, with Answer, Reason, and Check sections." />
-    <style>
-      :root {
-        --bg: #f7fafc;
-        --panel: #ffffff;
-        --soft: #f3f8fc;
-        --soft2: #eef6fb;
-        --text: #102133;
-        --muted: #5b7084;
-        --border: #d8e5ef;
-        --accent: #0ea5e9;
-        --accent2: #2563eb;
-        --gold: #f59e0b;
-        --ok: #0f766e;
-        --okbg: #ecfdf5;
-        --warn: #b45309;
-        --warnbg: #fff7ed;
-        --bad: #b91c1c;
-        --badbg: #fef2f2;
-        --shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
-        --r: 22px;
-      }
-      * {
-        box-sizing: border-box;
-      }
-      html,
-      body {
-        height: 100%;
-      }
-      body {
-        margin: 0;
-        font:
-          16px/1.55 Inter,
-          ui-sans-serif,
-          system-ui,
-          -apple-system,
-          Segoe UI,
-          Roboto,
-          sans-serif;
-        color: var(--text);
-        background:
-          radial-gradient(900px 420px at 100% -10%, rgba(14, 165, 233, 0.09), transparent 60%),
-          radial-gradient(850px 420px at -10% 0%, rgba(37, 99, 235, 0.06), transparent 60%), var(--bg);
-      }
-      .wrap {
-        max-width: 920px;
-        margin: 0 auto;
-        padding: 16px 14px 80px;
-      }
-      .card {
-        background: var(--panel);
-        border: 1px solid var(--border);
-        border-radius: var(--r);
-        box-shadow: var(--shadow);
-      }
-      header.hero {
-        padding: 24px 18px;
-        margin-top: 8px;
-      }
-      .kicker {
-        display: inline-flex;
-        align-items: center;
-        gap: 8px;
-        padding: 7px 11px;
-        border-radius: 999px;
-        background: #e0f2fe;
-        border: 1px solid #bae6fd;
-        color: #0369a1;
-        font-size: 12px;
-        letter-spacing: 0.08em;
-        text-transform: uppercase;
-        font-weight: 800;
-      }
-      h1 {
-        margin: 14px 0 10px;
-        font-size: clamp(30px, 7vw, 50px);
-        line-height: 1.02;
-        letter-spacing: -0.04em;
-      }
-      h2 {
-        margin: 0 0 8px;
-        font-size: clamp(24px, 5.1vw, 34px);
-        line-height: 1.08;
-        letter-spacing: -0.03em;
-      }
-      h3 {
-        margin: 0 0 8px;
-        font-size: 20px;
-        letter-spacing: -0.02em;
-      }
-      p {
-        margin: 0 0 12px;
-      }
-      .lead {
-        font-size: 18px;
-        color: var(--muted);
-        max-width: 40ch;
-      }
-      .formula {
-        margin-top: 16px;
-        padding: 14px 16px;
-        border-radius: 18px;
-        border: 1px solid #dbeafe;
-        background: #f8fbff;
-        color: #0c4a6e;
-        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-        overflow: auto;
-      }
-      .section {
-        margin-top: 16px;
-        padding: 18px;
-      }
-      .section-head {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        margin-bottom: 12px;
-      }
-      .badge {
-        width: 34px;
-        height: 34px;
-        border-radius: 50%;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        background: #e0f2fe;
-        border: 1px solid #bae6fd;
-        color: #0369a1;
-        font-size: 14px;
-        font-weight: 900;
-        flex: 0 0 auto;
-      }
-      .sub {
-        font-size: 14px;
-        color: var(--muted);
-      }
-      .grid {
-        display: grid;
-        gap: 12px;
-      }
-      .controls {
-        display: grid;
-        gap: 10px;
-      }
-      .control {
-        background: var(--soft);
-        border: 1px solid var(--border);
-        border-radius: 18px;
-        padding: 12px 14px;
-      }
-      .control label {
-        display: block;
-        font-size: 12px;
-        text-transform: uppercase;
-        letter-spacing: 0.07em;
-        color: var(--muted);
-        font-weight: 800;
-        margin-bottom: 8px;
-      }
-      .vnum {
-        font-size: 22px;
-        font-weight: 900;
-        margin-bottom: 4px;
-      }
-      input[type='range'] {
-        width: 100%;
-      }
-      select {
-        width: 100%;
-        border: 1px solid var(--border);
-        border-radius: 12px;
-        background: white;
-        padding: 10px 12px;
-        font: inherit;
-      }
-      .actions {
-        display: flex;
-        gap: 10px;
-        flex-wrap: wrap;
-        margin-top: 16px;
-      }
-      button {
-        appearance: none;
-        border: none;
-        cursor: pointer;
-        border-radius: 14px;
-        padding: 12px 14px;
-        font: inherit;
-        font-weight: 800;
-        background: var(--accent);
-        color: white;
-        box-shadow: 0 10px 20px rgba(14, 165, 233, 0.18);
-      }
-      button.secondary {
-        background: white;
-        color: var(--accent);
-        border: 1px solid #cceaf9;
-        box-shadow: none;
-      }
-      .metrics {
-        display: grid;
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-        gap: 10px;
-        margin-top: 12px;
-      }
-      .metric {
-        background: var(--soft);
-        border: 1px solid var(--border);
-        border-radius: 18px;
-        padding: 12px 14px;
-        min-height: 92px;
-      }
-      .metric .k {
-        font-size: 12px;
-        color: var(--muted);
-        text-transform: uppercase;
-        letter-spacing: 0.07em;
-      }
-      .metric .v {
-        font-size: 22px;
-        font-weight: 900;
-        margin-top: 4px;
-        word-break: break-word;
-      }
-      .mini {
-        font-size: 13px;
-        color: var(--muted);
-      }
-      .pill-row {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 8px;
-        margin-top: 10px;
-      }
-      .pill {
-        background: #eff6ff;
-        border: 1px solid #dbeafe;
-        color: #1d4ed8;
-        padding: 7px 10px;
-        border-radius: 999px;
-        font-size: 13px;
-      }
-      .block {
-        background: #fcfdff;
-        border: 1px solid var(--border);
-        border-radius: 18px;
-        padding: 14px;
-      }
-      .notice {
-        background: var(--warnbg);
-        border: 1px solid #fed7aa;
-        color: var(--warn);
-        border-radius: 18px;
-        padding: 12px 14px;
-        margin-top: 14px;
-      }
-      .code {
-        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-        word-break: break-word;
-      }
-      canvas {
-        display: block;
-        width: 100%;
-        border: 1px solid var(--border);
-        border-radius: 18px;
-        background: linear-gradient(180deg, #ffffff, #f8fbff);
-      }
-      .legend {
-        display: flex;
-        gap: 12px;
-        flex-wrap: wrap;
-        margin-top: 8px;
-        color: var(--muted);
-        font-size: 13px;
-      }
-      .legend span::before {
-        content: '';
-        display: inline-block;
-        width: 10px;
-        height: 10px;
-        border-radius: 50%;
-        margin-right: 6px;
-        vertical-align: middle;
-      }
-      .legend .p::before {
-        background: #0ea5e9;
-      }
-      .legend .s::before {
-        background: #f59e0b;
-      }
-      .legend .fit::before {
-        background: #2563eb;
-      }
-      .legend .event::before {
-        background: #ef4444;
-      }
-      .status {
-        display: inline-flex;
-        align-items: center;
-        gap: 8px;
-        padding: 6px 10px;
-        border-radius: 999px;
-        font-size: 12px;
-        font-weight: 900;
-      }
-      .pass {
-        background: var(--okbg);
-        color: var(--ok);
-        border: 1px solid #bbf7d0;
-      }
-      .fail {
-        background: var(--badbg);
-        color: var(--bad);
-        border: 1px solid #fecaca;
-      }
-      .table-wrap {
-        overflow: auto;
-        margin-top: 8px;
-      }
-      table {
-        width: 100%;
-        border-collapse: collapse;
-      }
-      th,
-      td {
-        text-align: left;
-        vertical-align: top;
-        padding: 9px 8px;
-        border-bottom: 1px dashed var(--border);
-      }
-      th {
-        font-size: 12px;
-        text-transform: uppercase;
-        letter-spacing: 0.07em;
-        color: var(--muted);
-      }
-      .refs {
-        display: flex;
-        gap: 10px;
-        flex-wrap: wrap;
-        margin-top: 10px;
-      }
-      .refs a {
-        text-decoration: none;
-        color: #0369a1;
-        background: #f8fbff;
-        border: 1px solid #dbeafe;
-        padding: 8px 10px;
-        border-radius: 999px;
-        font-size: 14px;
-      }
-      @media (min-width: 760px) {
-        .controls {
-          grid-template-columns: repeat(2, minmax(0, 1fr));
-        }
-        .metrics {
-          grid-template-columns: repeat(4, minmax(0, 1fr));
-        }
-      }
-    </style>
-  </head>
-  <body>
-    <div class="wrap">
-      <header class="card hero">
-        <span class="kicker">Science · answer • reason • check</span>
-        <h1>Earthquake Epicenter</h1>
-        <p class="lead">
-          Infer the hidden earthquake location from P- and S-wave arrival times at several stations, then verify the
-          result by recomputing travel distances and timing consistency.
-        </p>
-        <div class="formula">
-          Core idea:<br />
-          S−P time grows with distance because P waves travel faster than S waves.<br />
-          distance = (S−P) / (1/v<sub>S</sub> − 1/v<sub>P</sub>)<br />
-          with three or more stations, distance circles can localize the epicenter.
-        </div>
-        <div class="actions">
-          <button onclick="document.getElementById('answer').scrollIntoView({ behavior: 'smooth' })">
-            Start exploring
-          </button>
-          <button class="secondary" onclick="runAll()">Recompute</button>
-        </div>
-      </header>
-      <section class="card section" id="answer">
-        <div class="section-head">
-          <span class="badge">1</span>
-          <div>
-            <h2>Answer</h2>
-            <div class="sub">The inferred earthquake for the current station data</div>
-          </div>
-        </div>
-        <div class="controls">
-          <div class="control">
-            <label for="preset">Preset scenario</label>
-            <select id="preset">
-              <option value="coastal">Offshore event</option>
-              <option value="inland">Inland event</option>
-              <option value="northern">Northern event</option>
-              <option value="southern">Southern event</option>
-              <option value="custom">Custom values</option>
-            </select>
-          </div>
-          <div class="control">
-            <label for="noiseToggle">Timing realism</label>
-            <select id="noiseToggle">
-              <option value="off">Clean station picks</option>
-              <option value="on">Add mild timing noise</option>
-            </select>
-          </div>
-          <div class="control">
-            <label for="vp">P-wave speed (km/s)</label>
-            <div class="vnum" id="vpValue">6.0</div>
-            <input id="vp" type="range" min="4.5" max="8.0" step="0.1" value="6.0" />
-          </div>
-          <div class="control">
-            <label for="vs">S-wave speed (km/s)</label>
-            <div class="vnum" id="vsValue">3.5</div>
-            <input id="vs" type="range" min="2.5" max="5.0" step="0.1" value="3.5" />
-          </div>
-          <div class="control">
-            <label for="originTime">Hidden origin time after recording starts (s)</label>
-            <div class="vnum" id="originTimeValue">8.0</div>
-            <input id="originTime" type="range" min="2.0" max="20.0" step="0.1" value="8.0" />
-          </div>
-        </div>
-        <div class="metrics">
-          <div class="metric">
-            <div class="k">Estimated epicenter</div>
-            <div class="v" id="ansXY">—</div>
-            <div class="mini" id="ansCity">map coordinates in km</div>
-          </div>
-          <div class="metric">
-            <div class="k">Estimated origin time</div>
-            <div class="v" id="ansT0">—</div>
-            <div class="mini">seconds after record start</div>
-          </div>
-          <div class="metric">
-            <div class="k">Typical station distance</div>
-            <div class="v" id="ansDist">—</div>
-            <div class="mini">mean estimated radius</div>
-          </div>
-          <div class="metric">
-            <div class="k">Fit residual</div>
-            <div class="v" id="ansResidual">—</div>
-            <div class="mini">root-mean-square circle mismatch</div>
-          </div>
-        </div>
-        <div class="pill-row">
-          <span class="pill" id="classPill">location quality —</span>
-          <span class="pill" id="timingPill">timing spread —</span>
-          <span class="pill" id="geometryPill">station geometry —</span>
-        </div>
-        <div class="notice" id="answerNotice">
-          The answer is based on four stations, each contributing a distance estimate from its S−P gap.
-        </div>
-      </section>
-      <section class="card section" id="reason">
-        <div class="section-head">
-          <span class="badge">2</span>
-          <div>
-            <h2>Reason</h2>
-            <div class="sub">How the page turns arrival times into an epicenter</div>
-          </div>
-        </div>
-        <div class="grid">
-          <div class="block">
-            <h3>Timing → distance</h3>
-            <p>
-              If the earthquake is at distance <span class="code">d</span>, then the P and S arrivals occur at
-              <span class="code">t<sub>P</sub> = t<sub>0</sub> + d/v<sub>P</sub></span> and
-              <span class="code">t<sub>S</sub> = t<sub>0</sub> + d/v<sub>S</sub></span
-              >. Subtracting removes the unknown origin time.
-            </p>
-            <div class="formula">d = (t<sub>S</sub> − t<sub>P</sub>) / (1/v<sub>S</sub> − 1/v<sub>P</sub>)</div>
-            <div class="mini" id="reasonDistance">—</div>
-          </div>
-          <div class="block">
-            <h3>Several stations → one location</h3>
-            <p>
-              Each station defines a circle of possible epicenters. The earthquake should lie near the intersection of
-              those circles. With noise, the circles usually do not meet perfectly, so the page finds the best fit.
-            </p>
-            <canvas id="mapCanvas"></canvas>
-            <div class="legend">
-              <span class="fit">distance circles and best-fit point</span
-              ><span class="event">hidden event used to synthesize the data</span>
-            </div>
-          </div>
-          <div class="block">
-            <h3>Seismogram-style station traces</h3>
-            <p class="mini">
-              These traces are synthetic. They mark the observed P and S arrivals that the solver uses.
-            </p>
-            <canvas id="seismoCanvas"></canvas>
-            <div class="legend"><span class="p">P arrival</span><span class="s">S arrival</span></div>
-          </div>
-          <div class="block">
-            <h3>Origin time from P arrivals</h3>
-            <p>
-              Once the epicenter is estimated, each station gives an origin-time estimate
-              <span class="code">t<sub>0</sub> ≈ t<sub>P</sub> − d/v<sub>P</sub></span
-              >. A consistent solution should make those agree closely.
-            </p>
-            <div class="mini" id="reasonOrigin">—</div>
-          </div>
-        </div>
-      </section>
-      <section class="card section" id="check">
-        <div class="section-head">
-          <span class="badge">3</span>
-          <div>
-            <h2>Check</h2>
-            <div class="sub">Independent consistency tests on the inferred event</div>
-          </div>
-        </div>
-        <div class="metrics">
-          <div class="metric">
-            <div class="k">Distance formula</div>
-            <div class="v"><span id="checkDistBadge" class="status">—</span></div>
-            <div class="mini" id="checkDistText">—</div>
-          </div>
-          <div class="metric">
-            <div class="k">Origin-time agreement</div>
-            <div class="v"><span id="checkTimeBadge" class="status">—</span></div>
-            <div class="mini" id="checkTimeText">—</div>
-          </div>
-          <div class="metric">
-            <div class="k">Travel-time replay</div>
-            <div class="v"><span id="checkReplayBadge" class="status">—</span></div>
-            <div class="mini" id="checkReplayText">—</div>
-          </div>
-          <div class="metric">
-            <div class="k">Recovery against hidden truth</div>
-            <div class="v"><span id="checkTruthBadge" class="status">—</span></div>
-            <div class="mini" id="checkTruthText">—</div>
-          </div>
-        </div>
-        <div class="block" style="margin-top: 12px">
-          <h3>Audit table</h3>
-          <div class="table-wrap">
-            <table>
-              <thead>
-                <tr>
-                  <th>Station</th>
-                  <th>Observed P</th>
-                  <th>Observed S</th>
-                  <th>Distance from S−P</th>
-                  <th>Distance from inferred epicenter</th>
-                  <th>Origin time from station</th>
-                </tr>
-              </thead>
-              <tbody id="auditTable"></tbody>
-            </table>
-          </div>
-        </div>
-        <div class="notice">
-          The check layer uses the observed arrivals, recomputed radii, and independently recovered origin times. It
-          also compares the inferred epicenter with the hidden event that generated the synthetic station data.
-        </div>
-        <div class="refs">
-          <a href="https://www.usgs.gov/programs/earthquake-hazards/seismographs-keeping-track-earthquakes"
-            >USGS on P and S waves</a
-          >
-          <a href="https://www.iris.edu/hq/inclass/fact-sheet/how_are_earthquakes_located"
-            >IRIS on locating earthquakes</a
-          >
-          <a href="https://www.usgs.gov/programs/earthquake-hazards/earthquake-travel-times">USGS travel times</a>
-        </div>
-      </section>
-    </div>
-    <script>
-      'use strict';
-      const stations = [
-        { name: 'ALFA', x: 70, y: 90 },
-        { name: 'BRAV', x: 430, y: 110 },
-        { name: 'CHAR', x: 130, y: 365 },
-        { name: 'DELT', x: 395, y: 330 },
-      ];
-      const presets = {
-        coastal: { eventX: 150, eventY: 180, originTime: 8.0 },
-        inland: { eventX: 270, eventY: 225, originTime: 9.5 },
-        northern: { eventX: 250, eventY: 110, originTime: 7.2 },
-        southern: { eventX: 300, eventY: 300, originTime: 10.0 },
-      };
-      function fmt(x, d = 2) {
-        return Number(x).toFixed(d);
-      }
-      function clamp(x, a, b) {
-        return Math.max(a, Math.min(b, x));
-      }
-      function dist(a, b) {
-        return Math.hypot(a.x - b.x, a.y - b.y);
-      }
-      function mean(arr) {
-        return arr.reduce((s, x) => s + x, 0) / arr.length;
-      }
-      function rms(arr) {
-        return Math.sqrt(mean(arr.map((x) => x * x)));
-      }
-      function setStatus(id, ok) {
-        const el = document.getElementById(id);
-        el.textContent = ok ? 'PASS' : 'FAIL';
-        el.className = 'status ' + (ok ? 'pass' : 'fail');
-      }
-      function syncLabels() {
-        document.getElementById('vpValue').textContent = fmt(document.getElementById('vp').value, 1);
-        document.getElementById('vsValue').textContent = fmt(document.getElementById('vs').value, 1);
-        document.getElementById('originTimeValue').textContent = fmt(document.getElementById('originTime').value, 1);
-      }
-      function applyPreset(name) {
-        const p = presets[name];
-        if (!p) return;
-        document.getElementById('originTime').value = p.originTime;
-        document.getElementById('preset').value = name;
-        syncLabels();
-      }
-      function currentInputs() {
-        return {
-          vp: Number(document.getElementById('vp').value),
-          vs: Number(document.getElementById('vs').value),
-          originTime: Number(document.getElementById('originTime').value),
-          noise: document.getElementById('noiseToggle').value === 'on',
-          preset: document.getElementById('preset').value,
-        };
-      }
-      function hiddenEvent(inp) {
-        const p = presets[inp.preset] || presets.coastal;
-        return { x: p.eventX, y: p.eventY, t0: inp.originTime };
-      }
-      function stationObservations(inp) {
-        const evt = hiddenEvent(inp);
-        return stations.map((st, i) => {
-          const d = dist(st, evt);
-          const tp = evt.t0 + d / inp.vp;
-          const ts = evt.t0 + d / inp.vs;
-          const np = inp.noise ? 0.12 * Math.sin(1.7 * i + d * 0.013) : 0;
-          const ns = inp.noise ? 0.15 * Math.cos(1.3 * i + d * 0.015) : 0;
-          return {
-            ...st,
-            trueDistance: d,
-            tP: tp + np,
-            tS: ts + ns,
-          };
-        });
-      }
-      function distanceFromSP(obs, vp, vs) {
-        const sp = obs.tS - obs.tP;
-        return sp / (1 / vs - 1 / vp);
-      }
-      function fitEpicenter(obs, vp, vs) {
-        const radii = obs.map((o) => distanceFromSP(o, vp, vs));
-        let best = { x: 0, y: 0, sse: Infinity };
-        for (let y = 0; y <= 420; y += 2) {
-          for (let x = 0; x <= 500; x += 2) {
-            let sse = 0;
-            for (let i = 0; i < obs.length; i++) {
-              const dd = Math.hypot(x - obs[i].x, y - obs[i].y);
-              const r = radii[i];
-              const e = dd - r;
-              sse += e * e;
-            }
-            if (sse < best.sse) best = { x, y, sse };
-          }
-        }
-        for (let step of [1, 0.5]) {
-          let improved = true;
-          while (improved) {
-            improved = false;
-            for (let dy of [-step, 0, step]) {
-              for (let dx of [-step, 0, step]) {
-                const x = clamp(best.x + dx, 0, 500);
-                const y = clamp(best.y + dy, 0, 420);
-                let sse = 0;
-                for (let i = 0; i < obs.length; i++) {
-                  const dd = Math.hypot(x - obs[i].x, y - obs[i].y);
-                  const r = radii[i];
-                  const e = dd - r;
-                  sse += e * e;
-                }
-                if (sse + 1e-12 < best.sse) {
-                  best = { x, y, sse };
-                  improved = true;
-                }
-              }
-            }
-          }
-        }
-        const perStation = obs.map((o, i) => {
-          const dfit = Math.hypot(best.x - o.x, best.y - o.y);
-          const r = radii[i];
-          return { radius: r, fitDistance: dfit, mismatch: dfit - r };
-        });
-        const t0s = obs.map((o, i) => o.tP - perStation[i].fitDistance / vp);
-        const t0 = mean(t0s);
-        return {
-          x: best.x,
-          y: best.y,
-          radii,
-          perStation,
-          t0,
-          t0s,
-          residual: rms(perStation.map((p) => p.mismatch)),
-        };
-      }
-      function stationGeometryQuality() {
-        const pts = stations;
-        const area =
-          Math.abs(
-            pts[0].x * (pts[1].y - pts[2].y) + pts[1].x * (pts[2].y - pts[0].y) + pts[2].x * (pts[0].y - pts[1].y),
-          ) / 2;
-        return area > 20000 ? 'broad station spread' : 'narrower station spread';
-      }
-      function prepareCanvas(id, cssHeight) {
-        const canvas = document.getElementById(id);
-        const dpr = window.devicePixelRatio || 1;
-        const w = Math.max(320, Math.floor(canvas.clientWidth || canvas.parentElement.clientWidth || 600));
-        const h = cssHeight;
-        canvas.width = Math.floor(w * dpr);
-        canvas.height = Math.floor(h * dpr);
-        canvas.style.height = h + 'px';
-        const ctx = canvas.getContext('2d');
-        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-        return { canvas, ctx, w, h };
-      }
-      function clearCanvas(ctx, w, h) {
-        const g = ctx.createLinearGradient(0, 0, 0, h);
-        g.addColorStop(0, '#ffffff');
-        g.addColorStop(1, '#f8fbff');
-        ctx.fillStyle = g;
-        ctx.fillRect(0, 0, w, h);
-      }
-      function line(ctx, x1, y1, x2, y2, color, width = 1) {
-        ctx.beginPath();
-        ctx.moveTo(x1, y1);
-        ctx.lineTo(x2, y2);
-        ctx.strokeStyle = color;
-        ctx.lineWidth = width;
-        ctx.stroke();
-      }
-      function circle(ctx, x, y, r, stroke, fill, width = 1) {
-        ctx.beginPath();
-        ctx.arc(x, y, r, 0, Math.PI * 2);
-        if (fill) {
-          ctx.fillStyle = fill;
-          ctx.fill();
-        }
-        if (stroke) {
-          ctx.strokeStyle = stroke;
-          ctx.lineWidth = width;
-          ctx.stroke();
-        }
-      }
-      function text(ctx, s, x, y, color = '#102133', font = '12px system-ui', align = 'left') {
-        ctx.fillStyle = color;
-        ctx.font = font;
-        ctx.textAlign = align;
-        ctx.fillText(s, x, y);
-      }
-      function drawMap(obs, fit, truth) {
-        const { ctx, w, h } = prepareCanvas('mapCanvas', 320);
-        clearCanvas(ctx, w, h);
-        const pad = 18;
-        function X(x) {
-          return pad + (x * (w - 2 * pad)) / 500;
-        }
-        function Y(y) {
-          return pad + (y * (h - 2 * pad)) / 420;
-        }
-        for (let gx = 0; gx <= 500; gx += 100) {
-          line(ctx, X(gx), Y(0), X(gx), Y(420), '#e4edf4', 1);
-        }
-        for (let gy = 0; gy <= 420; gy += 84) {
-          line(ctx, X(0), Y(gy), X(500), Y(gy), '#e4edf4', 1);
-        }
-        obs.forEach((o, i) => {
-          circle(ctx, X(o.x), Y(o.y), (fit.radii[i] * (w - 2 * pad)) / 500, 'rgba(37,99,235,.22)', null, 1.5);
-          circle(ctx, X(o.x), Y(o.y), 5, '#0ea5e9', '#0ea5e9', 1);
-          text(ctx, o.name, X(o.x) + 8, Y(o.y) - 8, '#0c4a6e', '12px system-ui');
-        });
-        circle(ctx, X(fit.x), Y(fit.y), 6, '#2563eb', '#2563eb', 1);
-        line(ctx, X(fit.x) - 8, Y(fit.y), X(fit.x) + 8, Y(fit.y), '#2563eb', 2);
-        line(ctx, X(fit.x), Y(fit.y) - 8, X(fit.x), Y(fit.y) + 8, '#2563eb', 2);
-        circle(ctx, X(truth.x), Y(truth.y), 5, '#ef4444', '#ef4444', 1);
-        text(ctx, 'best-fit epicenter', X(fit.x) + 10, Y(fit.y) + 14, '#1d4ed8', '12px system-ui');
-        text(
-          ctx,
-          'hidden source used to make the station picks',
-          X(truth.x) + 10,
-          Y(truth.y) - 10,
-          '#b91c1c',
-          '12px system-ui',
-        );
-      }
-      function drawSeismograms(obs) {
-        const { ctx, w, h } = prepareCanvas('seismoCanvas', 280);
-        clearCanvas(ctx, w, h);
-        const pad = { l: 44, r: 14, t: 18, b: 22 };
-        const maxT = Math.max(...obs.map((o) => o.tS)) + 4;
-        function X(t) {
-          return pad.l + (t * (w - pad.l - pad.r)) / maxT;
-        }
-        line(ctx, pad.l, h - pad.b, w - pad.r, h - pad.b, '#d7e3ec', 1);
-        text(ctx, 'seconds after record start', w / 2, h - 6, '#5b7084', '12px system-ui', 'center');
-        obs.forEach((o, idx) => {
-          const y = pad.t + idx * ((h - pad.t - pad.b) / obs.length) + 22;
-          text(ctx, o.name, 8, y + 4, '#5b7084', '12px system-ui');
-          line(ctx, pad.l, y, w - pad.r, y, '#e7eef4', 1);
-          const N = 220;
-          ctx.beginPath();
-          for (let i = 0; i < N; i++) {
-            const t = (maxT * i) / (N - 1);
-            const pulseP = Math.exp(-Math.pow((t - o.tP) / 0.45, 2)) * Math.sin((t - o.tP) * 14);
-            const pulseS = 1.35 * Math.exp(-Math.pow((t - o.tS) / 0.85, 2)) * Math.sin((t - o.tS) * 9);
-            const noise = 0.06 * Math.sin(i * 0.4 + idx);
-            const amp = pulseP + pulseS + noise;
-            const xx = X(t),
-              yy = y - amp * 10;
-            if (i === 0) ctx.moveTo(xx, yy);
-            else ctx.lineTo(xx, yy);
-          }
-          ctx.strokeStyle = '#94a3b8';
-          ctx.lineWidth = 1.4;
-          ctx.stroke();
-          line(ctx, X(o.tP), y - 18, X(o.tP), y + 18, '#0ea5e9', 1.8);
-          line(ctx, X(o.tS), y - 18, X(o.tS), y + 18, '#f59e0b', 1.8);
-        });
-      }
-      function renderAnswer(inp, fit, obs, truth) {
-        const meanDist = mean(fit.radii);
-        document.getElementById('ansXY').textContent = `(${fmt(fit.x, 1)}, ${fmt(fit.y, 1)}) km`;
-        document.getElementById('ansT0').textContent = `${fmt(fit.t0, 2)} s`;
-        document.getElementById('ansDist').textContent = `${fmt(meanDist, 1)} km`;
-        document.getElementById('ansResidual').textContent = `${fmt(fit.residual, 2)} km`;
-        const truthError = Math.hypot(fit.x - truth.x, fit.y - truth.y);
-        const tSpread = Math.max(...fit.t0s) - Math.min(...fit.t0s);
-        document.getElementById('classPill').textContent =
-          `location quality — ${fit.residual < 4 ? 'tight fit' : fit.residual < 10 ? 'usable fit' : 'rough fit'}`;
-        document.getElementById('timingPill').textContent = `timing spread — ${fmt(tSpread, 2)} s across stations`;
-        document.getElementById('geometryPill').textContent = `station geometry — ${stationGeometryQuality()}`;
-        document.getElementById('answerNotice').textContent =
-          `The fitted epicenter lies ${fmt(truthError, 1)} km from the hidden source used to synthesize the station data. ` +
-          `Each station contributes a radius from its observed S−P interval, and the solver picks the map point with the smallest circle mismatch.`;
-      }
-      function renderReason(inp, obs, fit) {
-        const example = obs[0];
-        const sp = example.tS - example.tP;
-        document.getElementById('reasonDistance').textContent =
-          `For station ${example.name}, S−P = ${fmt(sp, 2)} s, so the distance estimate is ${fmt(distanceFromSP(example, inp.vp, inp.vs), 1)} km.`;
-        document.getElementById('reasonOrigin').textContent =
-          `The four station-based origin-time estimates cluster around ${fmt(fit.t0, 2)} s with spread ${fmt(Math.max(...fit.t0s) - Math.min(...fit.t0s), 2)} s.`;
-        drawMap(obs, fit, hiddenEvent(inp));
-        drawSeismograms(obs);
-      }
-      function renderChecks(inp, obs, fit, truth) {
-        const spDistances = obs.map((o) => distanceFromSP(o, inp.vp, inp.vs));
-        const geomDistances = obs.map((o) => Math.hypot(fit.x - o.x, fit.y - o.y));
-        const distErr = rms(spDistances.map((d, i) => d - geomDistances[i]));
-        const distOk = distErr < (inp.noise ? 7.5 : 2.0);
-        setStatus('checkDistBadge', distOk);
-        document.getElementById('checkDistText').textContent =
-          `RMS mismatch between S−P radii and map distances: ${fmt(distErr, 2)} km.`;
-        const tSpread = Math.max(...fit.t0s) - Math.min(...fit.t0s);
-        const timeOk = tSpread < (inp.noise ? 0.8 : 0.15);
-        setStatus('checkTimeBadge', timeOk);
-        document.getElementById('checkTimeText').textContent =
-          `Station-by-station origin times differ by ${fmt(tSpread, 2)} s.`;
-        const replayResiduals = obs.map((o, i) => {
-          const d = geomDistances[i];
-          const predP = fit.t0 + d / inp.vp;
-          const predS = fit.t0 + d / inp.vs;
-          return Math.max(Math.abs(predP - o.tP), Math.abs(predS - o.tS));
-        });
-        const replayMax = Math.max(...replayResiduals);
-        const replayOk = replayMax < (inp.noise ? 0.5 : 0.08);
-        setStatus('checkReplayBadge', replayOk);
-        document.getElementById('checkReplayText').textContent =
-          `Largest arrival-time replay error: ${fmt(replayMax, 2)} s.`;
-        const truthError = Math.hypot(fit.x - truth.x, fit.y - truth.y);
-        const truthOk = truthError < (inp.noise ? 12 : 3);
-        setStatus('checkTruthBadge', truthOk);
-        document.getElementById('checkTruthText').textContent =
-          `Best-fit epicenter is ${fmt(truthError, 2)} km from the hidden source.`;
-        const tbody = document.getElementById('auditTable');
-        tbody.innerHTML = '';
-        obs.forEach((o, i) => {
-          const tr = document.createElement('tr');
-          tr.innerHTML = `
-      <td>${o.name}</td>
-      <td class="code">${fmt(o.tP, 2)} s</td>
-      <td class="code">${fmt(o.tS, 2)} s</td>
-      <td class="code">${fmt(spDistances[i], 1)} km</td>
-      <td class="code">${fmt(geomDistances[i], 1)} km</td>
-      <td class="code">${fmt(fit.t0s[i], 2)} s</td>
-    `;
-          tbody.appendChild(tr);
-        });
-      }
-      function runAll() {
-        syncLabels();
-        const inp = currentInputs();
-        if (inp.vs >= inp.vp) {
-          document.getElementById('ansXY').textContent = 'invalid wave speeds';
-          return;
-        }
-        const obs = stationObservations(inp);
-        const fit = fitEpicenter(obs, inp.vp, inp.vs);
-        const truth = hiddenEvent(inp);
-        renderAnswer(inp, fit, obs, truth);
-        renderReason(inp, obs, fit);
-        renderChecks(inp, obs, fit, truth);
-      }
-      document.getElementById('preset').addEventListener('change', (e) => {
-        if (e.target.value !== 'custom') {
-          applyPreset(e.target.value);
-        }
-        runAll();
-      });
-      document.getElementById('noiseToggle').addEventListener('change', runAll);
-      ['vp', 'vs', 'originTime'].forEach((id) => {
-        document.getElementById(id).addEventListener('input', () => {
-          document.getElementById('preset').value = 'custom';
-          runAll();
-        });
-      });
-      window.addEventListener('resize', runAll);
-      applyPreset('coastal');
-      runAll();
-    </script>
-  </body>
-</html>