Add 'Reading the geometry' glossary up top (defines cosine, principal angles, LMC, CKA)

index.html

@@ -20,6 +20,7 @@
     <div class="toc-title">Contents</div>
     <ol>
       <li><a href="#abstract">Abstract</a></li>
+      <li><a href="#reading">Reading the geometry</a></li>
       <li><a href="#methods">The six losses</a></li>
       <li><a href="#cosine">Cosine map</a></li>
       <li><a href="#perlayer">Layer by layer</a></li>
@@ -46,7 +47,7 @@
     </div>
   </header>
 
-  <section id="abstract">
+  <section id="abstract" class="aside">
     <h2>Abstract</h2>
     <p id="abstract-text" class="dropcap"></p>
     <p>
@@ -57,6 +58,35 @@
     </p>
   </section>
 
+  <section id="reading" class="aside">
+    <h2>Reading the geometry</h2>
+    <p>
+      Every chart below is computed on the LoRA weight update <strong>ΔW</strong> — the small
+      change each method writes into the base model — or on the representations that update
+      produces. Four tools, each asking a different version of <em>“are these two the same?”</em>
+    </p>
+    <div class="note">
+      <dl class="glossary">
+        <div>
+          <dt>Cosine similarity</dt>
+          <dd>Do two weight updates point the same way? <b>+1</b> = identical direction, <b>0</b> = orthogonal (unrelated), <b>below 0</b> = opposed. This is the headline number, taken on the stacked ΔW.</dd>
+        </div>
+        <div>
+          <dt>Principal angles</dt>
+          <dd>How far apart are the <b>subspaces</b> the two updates span — a basis-free generalization of cosine. A few degrees means effectively the same subspace; near 90° means disjoint.</dd>
+        </div>
+        <div>
+          <dt>Mode connectivity<span>linear · LMC</span></dt>
+          <dd>Interpolate between two trained adapters and watch the loss. A flat path means they sit in the <b>same basin</b>; a bump in the middle is a barrier separating two different solutions.</dd>
+        </div>
+        <div>
+          <dt>CKA<span>centered kernel alignment</span></dt>
+          <dd>Do the two models compute the same thing <b>inside</b>? Unlike the others, CKA compares hidden representations, not weights. <b>≈1</b> = near-identical computation; lower means the circuit has been rewired.</dd>
+        </div>
+      </dl>
+    </div>
+  </section>
+
   <section id="methods">
     <h2>The six losses</h2>
     <p>

style.css

@@ -75,18 +75,29 @@ h2 {
   font-family: var(--display); font-weight: 600; font-size: 1.9rem; letter-spacing: -.01em;
   line-height: 1.12; margin: 0 0 1.2rem; position: relative;
 }
-section:not(#abstract) h2 { counter-increment: sec; }
-section:not(#abstract) h2::before {
+section:not(.aside) h2 { counter-increment: sec; }
+section:not(.aside) h2::before {
   content: counter(sec, decimal-leading-zero);
   font-family: var(--mono); font-size: .72rem; font-weight: 500; color: var(--accent);
   position: absolute; left: -2.7rem; top: .55rem; letter-spacing: .05em;
 }
-@media (max-width: 1180px) { section:not(#abstract) h2::before { position: static; display: inline-block; margin-right: .8rem; } }
+@media (max-width: 1180px) { section:not(.aside) h2::before { position: static; display: inline-block; margin-right: .8rem; } }
 p { margin: 0 0 1.3rem; }
 section > p { max-width: 62ch; }
 em { font-style: italic; }
 strong { font-weight: 600; }
-#abstract h2 { font-size: 1rem; font-family: var(--mono); font-weight: 500; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); margin-bottom: 1rem; }
+.aside h2 { font-size: 1rem; font-family: var(--mono); font-weight: 500; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); margin-bottom: 1rem; }
+
+/* glossary plate (definition list) */
+.note { border: 1.5px solid var(--rule); padding: 4px 24px; margin: 1.8rem 0 1rem; }
+dl.glossary { margin: 0; }
+dl.glossary > div { display: grid; grid-template-columns: 168px 1fr; gap: 5px 30px; padding: 17px 0; border-top: 1px solid var(--rule-soft); }
+dl.glossary > div:first-child { border-top: 0; }
+dl.glossary dt { font-family: var(--mono); font-size: .82rem; font-weight: 500; color: var(--ink); line-height: 1.3; }
+dl.glossary dt span { display: block; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-top: 5px; }
+dl.glossary dd { margin: 0; font-family: var(--body); font-size: 1rem; line-height: 1.45; color: var(--ink-soft); }
+dl.glossary dd b { color: var(--ink); font-weight: 600; }
+@media (max-width: 620px) { dl.glossary > div { grid-template-columns: 1fr; gap: 6px; } }
 .dropcap::first-letter {
   font-family: var(--display); font-weight: 600; float: left; font-size: 4.4rem;
   line-height: .76; padding: .06em .1em 0 0; color: var(--ink);