From 86e11a6a1136bf12259e36f3c22cca1e060a7c2b Mon Sep 17 00:00:00 2001
From: Michael Pilosov <consistentbayes@gmail.com>
Date: Wed, 22 Apr 2026 10:57:24 -0600
Subject: [PATCH] restyle sec 0 + incl fig

---
 app/web/static/style.css     |  96 +++++++++++++++++++++++
 app/web/templates/index.html | 145 +++++++++++++++++++++++++++--------
 2 files changed, 208 insertions(+), 33 deletions(-)

diff --git a/app/web/static/style.css b/app/web/static/style.css
index 6b76300..d13f3bf 100644
--- a/app/web/static/style.css
+++ b/app/web/static/style.css
@@ -656,6 +656,20 @@ button.submit:disabled { background: var(--faint); border-color: var(--faint); c
 .dataset-picker.intro .picker-toggle::before { content: "[ read ]"; }
 .dataset-picker.intro[open] .picker-toggle::before { content: "[ collapse ]"; color: var(--accent); }
 
+.intro-body {
+  display: grid;
+  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
+  gap: 2.6rem;
+  align-items: center;
+}
+@media (max-width: 940px) {
+  .intro-body {
+    grid-template-columns: 1fr;
+    gap: 1.4rem;
+  }
+  .intro-prose { margin-inline: auto; }
+}
+
 .intro-prose {
   max-width: 72ch;
   color: var(--ink);
@@ -683,6 +697,88 @@ button.submit:disabled { background: var(--faint); border-color: var(--faint); c
 }
 .intro-prose em { font-style: italic; }
 
+.intro-figure {
+  margin: 0;
+  padding: 0;
+  max-width: 560px;
+  justify-self: center;
+  width: 100%;
+}
+.intro-schema {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+.intro-schema .frame {
+  fill: none;
+  stroke: var(--rule-2);
+  stroke-width: 1;
+}
+.intro-schema .frame.depth { opacity: 0.35; }
+.intro-schema .axes line {
+  stroke: var(--faint);
+  stroke-width: 1;
+}
+.intro-schema .dots circle {
+  fill: var(--ink);
+  opacity: 0.65;
+}
+.intro-schema .t-hint {
+  font-family: var(--mono);
+  font-size: 10px;
+  fill: var(--faint);
+  letter-spacing: 0.04em;
+}
+.intro-schema .arrow-line,
+.intro-schema .arrow-head {
+  stroke: var(--ink);
+  stroke-width: 1.4;
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.intro-schema .phi {
+  font-family: var(--serif);
+  font-style: italic;
+  font-size: 22px;
+  fill: var(--accent);
+}
+.intro-schema .arrow-sub {
+  font-family: var(--serif);
+  font-style: italic;
+  font-size: 11px;
+  fill: var(--mute);
+}
+.intro-schema .trajs polyline {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.4;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.intro-schema .dot-start circle {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.2;
+}
+.intro-schema .dot-end circle {
+  fill: currentColor;
+}
+.intro-schema .dots-hi circle {
+  fill: currentColor;
+}
+/* Three tracked points, colored identically on input and on their projected
+   trajectory — currentColor on every themed element picks this up. */
+.intro-schema .track-a { color: var(--accent); }
+.intro-schema .track-b { color: var(--alarm); }
+.intro-schema .track-c { color: var(--warm); }
+.intro-schema .cap text {
+  font-family: var(--serif);
+  font-style: italic;
+  font-size: 11px;
+  fill: var(--mute);
+}
+
 .dataset-picker .picker-body {
   padding: 0.4rem 2.2rem 1.6rem;
   max-width: 1440px;
diff --git a/app/web/templates/index.html b/app/web/templates/index.html
index 9691b94..65b98ad 100644
--- a/app/web/templates/index.html
+++ b/app/web/templates/index.html
@@ -4,7 +4,7 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1" />
   <title>embedding notebook — web1</title>
-  <link rel="stylesheet" href="/static/style.css?v=7" />
+  <link rel="stylesheet" href="/static/style.css?v=11" />
   <script src="https://unpkg.com/htmx.org@2.0.4"></script>
   <script type="importmap">
   {
@@ -52,38 +52,117 @@
   </summary>
 
   <div class="picker-body">
-    <div class="intro-prose">
-      <p>
-        <strong>What this is.</strong> Dimensionality reduction is a workhorse
-        for both exploratory visualization and downstream prediction, yet the
-        stability of its output under small perturbations of the input is
-        rarely examined directly. This notebook takes a narrow, empirical
-        approach: a three-dimensional point cloud (§&nbsp;1) is perturbed by a
-        controlled amount at each of a short sequence of timesteps, the
-        selected reducer (§&nbsp;2) is applied independently to every snapshot,
-        and the resulting trajectory of two-dimensional embeddings is recorded.
-      </p>
-      <p>
-        <strong>What it measures.</strong> Two stability views are logged
-        alongside each run and plotted on the
-        <a href="/metrics">metrics page</a>. Per-timestep travel —
-        ‖&thinsp;y(t)&thinsp;&minus;&thinsp;y(t&minus;1)&thinsp;‖ —
-        captures how much the 2-D layout moves between consecutive frames.
-        <em>k</em>NN retention captures how much of the input-space neighborhood
-        graph survives projection. Together they separate reducers that are
-        globally stable but locally noisy from those with the opposite failure
-        mode.
-      </p>
-      <p>
-        <strong>Why this matters.</strong> A reducer that looks well-behaved on
-        a single snapshot is not automatically the right tool for a streaming
-        or longitudinal setting. Used as the substrate for a visualization,
-        frame-to-frame motion will read as change the user did not request;
-        used as a feature-extraction step inside a classification pipeline,
-        drift between training and inference will quietly erode accuracy. The
-        aim here is to build intuition for those regimes before committing the
-        reducer to either role.
-      </p>
+    <div class="intro-body">
+      <div class="intro-prose">
+        <p>
+          <strong>What this is.</strong> Dimensionality reduction is a workhorse
+          for both exploratory visualization and downstream prediction, yet the
+          stability of its output under small perturbations of the input is
+          rarely examined directly. This notebook takes a narrow, empirical
+          approach: a three-dimensional point cloud (§&nbsp;1) is perturbed by a
+          controlled amount at each of a short sequence of timesteps, the
+          selected reducer (§&nbsp;2) is applied independently to every snapshot,
+          and the resulting trajectory of two-dimensional embeddings is recorded.
+        </p>
+        <p>
+          <strong>What it measures.</strong> Two stability views are logged
+          alongside each run and plotted on the
+          <a href="/metrics">metrics page</a>. Per-timestep travel —
+          ‖&thinsp;y(t)&thinsp;&minus;&thinsp;y(t&minus;1)&thinsp;‖ —
+          captures how much the 2-D layout moves between consecutive frames.
+          <em>k</em>NN retention captures how much of the input-space neighborhood
+          graph survives projection. Together they separate reducers that are
+          globally stable but locally noisy from those with the opposite failure
+          mode.
+        </p>
+        <p>
+          <strong>Why this matters.</strong> A reducer that looks well-behaved on
+          a single snapshot is not automatically the right tool for a streaming
+          or longitudinal setting. Used as the substrate for a visualization,
+          frame-to-frame motion will read as change the user did not request;
+          used as a feature-extraction step inside a classification pipeline,
+          drift between training and inference will quietly erode accuracy. The
+          aim here is to build intuition for those regimes before committing the
+          reducer to either role.
+        </p>
+      </div>
+
+      <figure class="intro-figure">
+        <svg class="intro-schema" viewBox="0 0 480 230" xmlns="http://www.w3.org/2000/svg"
+             role="img" aria-label="schematic: 3-D perturbed snapshots reduced independently to a 2-D trajectory">
+          <!-- LEFT: stack of snapshots -->
+          <g>
+            <rect class="frame depth" x="40" y="55" width="130" height="130"/>
+            <rect class="frame depth" x="30" y="45" width="130" height="130"/>
+            <rect class="frame" x="20" y="35" width="130" height="130"/>
+            <!-- tiny axis triad in the front frame -->
+            <g class="axes" transform="translate(32 156)">
+              <line x1="0" y1="0" x2="14" y2="0"/>
+              <line x1="0" y1="0" x2="0" y2="-14"/>
+              <line x1="0" y1="0" x2="-9" y2="7"/>
+            </g>
+            <g class="dots">
+              <circle cx="72" cy="112" r="2.1"/>
+              <circle cx="86" cy="60" r="2.1"/>
+              <circle cx="100" cy="92" r="2.1"/>
+              <circle cx="62" cy="142" r="2.1"/>
+              <circle cx="112" cy="124" r="2.1"/>
+              <circle cx="118" cy="54" r="2.1"/>
+              <circle cx="134" cy="148" r="2.1"/>
+            </g>
+            <g class="dots-hi">
+              <circle class="track-a" cx="54" cy="72" r="3.2"/>
+              <circle class="track-b" cx="132" cy="80" r="3.2"/>
+              <circle class="track-c" cx="90" cy="134" r="3.2"/>
+            </g>
+            <text class="t-hint" x="150" y="30" text-anchor="end">t = 0, 1, … T</text>
+          </g>
+
+          <!-- ARROW + reducer label -->
+          <g transform="translate(182 100)">
+            <line class="arrow-line" x1="0" y1="0" x2="92" y2="0"/>
+            <polyline class="arrow-head" points="84,-5 94,0 84,5" fill="none"/>
+            <text class="phi" x="47" y="-12" text-anchor="middle">φ</text>
+            <text class="arrow-sub" x="47" y="22" text-anchor="middle">per snapshot</text>
+          </g>
+
+          <!-- RIGHT: single 2-D frame with trajectories -->
+          <g>
+            <rect class="frame" x="290" y="35" width="170" height="130"/>
+            <g class="trajs">
+              <polyline class="track-a" points="308,72 316,88 326,106 336,124"/>
+              <polyline class="track-b" points="370,52 380,68 390,82 398,100"/>
+              <polyline class="track-c" points="430,152 428,132 430,108 426,84"/>
+            </g>
+            <g class="dot-start">
+              <circle class="track-a" cx="308" cy="72" r="3"/>
+              <circle class="track-b" cx="370" cy="52" r="3"/>
+              <circle class="track-c" cx="430" cy="152" r="3"/>
+            </g>
+            <g class="dot-end">
+              <circle class="track-a" cx="336" cy="124" r="2.9"/>
+              <circle class="track-b" cx="398" cy="100" r="2.9"/>
+              <circle class="track-c" cx="426" cy="84" r="2.9"/>
+            </g>
+            <g class="dots">
+              <circle cx="316" cy="112" r="2.1"/>
+              <circle cx="352" cy="136" r="2.1"/>
+              <circle cx="358" cy="78" r="2.1"/>
+              <circle cx="392" cy="58" r="2.1"/>
+              <circle cx="412" cy="118" r="2.1"/>
+              <circle cx="440" cy="140" r="2.1"/>
+              <circle cx="348" cy="158" r="2.1"/>
+              <circle cx="380" cy="142" r="2.1"/>
+            </g>
+          </g>
+
+          <!-- captions -->
+          <g class="cap">
+            <text x="85" y="200" text-anchor="middle">snapshots · Xₜ ⊂ ℝ³</text>
+            <text x="375" y="200" text-anchor="middle">embedded trajectory · Yₜ ⊂ ℝ²</text>
+          </g>
+        </svg>
+      </figure>
     </div>
   </div>
 </details>