index.html

<style>
  .step-btn {
    cursor: pointer; padding: 6px 16px; font-size: 13px; font-weight: 500;
    border-radius: 20px; border: none; transition: all .2s;
  }
  .btn-0        { background:#EEEDFE; color:#3C3489; }
  .btn-0:hover  { background:#CECBF6; }
  .btn-0.active { background:#534AB7; color:#EEEDFE; }
  .btn-1        { background:#E1F5EE; color:#085041; }
  .btn-1:hover  { background:#9FE1CB; }
  .btn-1.active { background:#0F6E56; color:#E1F5EE; }
  .btn-2        { background:#FAEEDA; color:#633806; }
  .btn-2:hover  { background:#FAC775; }
  .btn-2.active { background:#854F0B; color:#FAEEDA; }
  .btn-3        { background:#FAECE7; color:#712B13; }
  .btn-3:hover  { background:#F5C4B3; }
  .btn-3.active { background:#993C1D; color:#FAECE7; }
  .btn-4        { background:#E6F1FB; color:#0C447C; }
  .btn-4:hover  { background:#B5D4F4; }
  .btn-4.active { background:#185FA5; color:#E6F1FB; }
  .panel { display:none; }
  .panel.visible { display:block; animation: fi .25s ease; }
  @keyframes fi { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
</style>

<h2 style="position:absolute;left:-9999px">RePo: how transformers re-position tokens by meaning</h2>

<div style="padding:1rem 0 0.5rem">
  <div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:1.5rem">
    <button class="step-btn btn-0 active" onclick="show(0)">The problem</button>
    <button class="step-btn btn-1" onclick="show(1)">Standard RoPE</button>
    <button class="step-btn btn-2" onclick="show(2)">The MLP GPS</button>
    <button class="step-btn btn-3" onclick="show(3)">Head assignment</button>
    <button class="step-btn btn-4" onclick="show(4)">The new map</button>
  </div>

  <!-- PANEL 0 -->
  <div class="panel visible" id="p0">
    <svg width="100%" viewBox="0 0 680 260" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <marker id="a0" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M2 1L8 5L2 9" fill="none" stroke="#888780" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        </marker>
      </defs>
      <text x="340" y="30" text-anchor="middle" font-size="12" fill="#5F5E5A" font-family="sans-serif">Sentence: "The capital of France is Paris."</text>
      <!-- gray tokens -->
      <rect x="28"  y="50" width="70" height="50" rx="8" fill="#F1EFE8" stroke="#B4B2A9" stroke-width="0.5"/>
      <text x="63"  y="72" text-anchor="middle" font-size="14" font-weight="500" fill="#444441" font-family="sans-serif">The</text>
      <text x="63"  y="88" text-anchor="middle" font-size="11" fill="#888780" font-family="sans-serif">pos 1</text>

      <rect x="108" y="50" width="80" height="50" rx="8" fill="#F1EFE8" stroke="#B4B2A9" stroke-width="0.5"/>
      <text x="148" y="72" text-anchor="middle" font-size="14" font-weight="500" fill="#444441" font-family="sans-serif">capital</text>
      <text x="148" y="88" text-anchor="middle" font-size="11" fill="#888780" font-family="sans-serif">pos 2</text>

      <rect x="198" y="50" width="60" height="50" rx="8" fill="#F1EFE8" stroke="#B4B2A9" stroke-width="0.5"/>
      <text x="228" y="72" text-anchor="middle" font-size="14" font-weight="500" fill="#444441" font-family="sans-serif">of</text>
      <text x="228" y="88" text-anchor="middle" font-size="11" fill="#888780" font-family="sans-serif">pos 3</text>

      <!-- teal: France -->
      <rect x="268" y="50" width="84" height="50" rx="8" fill="#E1F5EE" stroke="#1D9E75" stroke-width="1"/>
      <text x="310" y="72" text-anchor="middle" font-size="14" font-weight="500" fill="#085041" font-family="sans-serif">France</text>
      <text x="310" y="88" text-anchor="middle" font-size="11" fill="#0F6E56" font-family="sans-serif">pos 4</text>

      <rect x="362" y="50" width="52" height="50" rx="8" fill="#F1EFE8" stroke="#B4B2A9" stroke-width="0.5"/>
      <text x="388" y="72" text-anchor="middle" font-size="14" font-weight="500" fill="#444441" font-family="sans-serif">is</text>
      <text x="388" y="88" text-anchor="middle" font-size="11" fill="#888780" font-family="sans-serif">pos 5</text>

      <!-- coral: Paris -->
      <rect x="424" y="50" width="70" height="50" rx="8" fill="#FAECE7" stroke="#D85A30" stroke-width="1"/>
      <text x="459" y="72" text-anchor="middle" font-size="14" font-weight="500" fill="#712B13" font-family="sans-serif">Paris</text>
      <text x="459" y="88" text-anchor="middle" font-size="11" fill="#993C1D" font-family="sans-serif">pos 6</text>

      <rect x="504" y="50" width="30" height="50" rx="8" fill="#F1EFE8" stroke="#B4B2A9" stroke-width="0.5"/>
      <text x="519" y="76" text-anchor="middle" font-size="14" font-weight="500" fill="#444441" font-family="sans-serif">.</text>

      <!-- distance brace -->
      <line x1="310" y1="105" x2="310" y2="128" stroke="#B4B2A9" stroke-width="0.5"/>
      <line x1="459" y1="105" x2="459" y2="128" stroke="#B4B2A9" stroke-width="0.5"/>
      <line x1="310" y1="128" x2="459" y2="128" stroke="#B4B2A9" stroke-width="0.5" marker-end="url(#a0)" marker-start="url(#a0)"/>
      <text x="384" y="144" text-anchor="middle" font-size="12" fill="#5F5E5A" font-family="sans-serif">2 positions apart — model must "travel" to connect them</text>

      <!-- info box -->
      <rect x="60" y="165" width="560" height="68" rx="10" fill="#F1EFE8" stroke="#B4B2A9" stroke-width="0.5"/>
      <text x="340" y="188" text-anchor="middle" font-size="13" font-weight="500" fill="#2C2C2A" font-family="sans-serif">The core problem</text>
      <text x="340" y="210" text-anchor="middle" font-size="12" fill="#5F5E5A" font-family="sans-serif">Standard models assign position by word order (slot), not by meaning.</text>
      <text x="340" y="226" text-anchor="middle" font-size="12" fill="#5F5E5A" font-family="sans-serif">Related tokens stay far apart in the attention math.</text>
    </svg>
  </div>

  <!-- PANEL 1 -->
  <div class="panel" id="p1">
    <svg width="100%" viewBox="0 0 680 270" xmlns="http://www.w3.org/2000/svg">
      <text x="340" y="26" text-anchor="middle" font-size="12" fill="#5F5E5A" font-family="sans-serif">RoPE: each word gets a fixed integer — distance is always ordinal</text>
      <line x1="60" y1="100" x2="620" y2="100" stroke="#B4B2A9" stroke-width="1"/>
      <line x1="130" y1="94" x2="130" y2="106" stroke="#B4B2A9" stroke-width="1"/>
      <line x1="210" y1="94" x2="210" y2="106" stroke="#B4B2A9" stroke-width="1"/>
      <line x1="290" y1="94" x2="290" y2="106" stroke="#B4B2A9" stroke-width="1"/>
      <line x1="370" y1="94" x2="370" y2="106" stroke="#B4B2A9" stroke-width="1"/>
      <line x1="450" y1="94" x2="450" y2="106" stroke="#B4B2A9" stroke-width="1"/>
      <line x1="530" y1="94" x2="530" y2="106" stroke="#B4B2A9" stroke-width="1"/>
      <text x="130" y="120" text-anchor="middle" font-size="12" fill="#888780" font-family="sans-serif">1</text>
      <text x="210" y="120" text-anchor="middle" font-size="12" fill="#888780" font-family="sans-serif">2</text>
      <text x="290" y="120" text-anchor="middle" font-size="12" fill="#888780" font-family="sans-serif">3</text>
      <text x="370" y="120" text-anchor="middle" font-size="12" fill="#888780" font-family="sans-serif">4</text>
      <text x="450" y="120" text-anchor="middle" font-size="12" fill="#888780" font-family="sans-serif">5</text>
      <text x="530" y="120" text-anchor="middle" font-size="12" fill="#888780" font-family="sans-serif">6</text>

      <rect x="96"  y="52" width="68" height="36" rx="6" fill="#F1EFE8" stroke="#B4B2A9" stroke-width="0.5"/>
      <text x="130" y="75" text-anchor="middle" font-size="14" font-weight="500" fill="#444441" font-family="sans-serif">The</text>
      <rect x="170" y="52" width="80" height="36" rx="6" fill="#F1EFE8" stroke="#B4B2A9" stroke-width="0.5"/>
      <text x="210" y="75" text-anchor="middle" font-size="14" font-weight="500" fill="#444441" font-family="sans-serif">capital</text>
      <rect x="256" y="52" width="68" height="36" rx="6" fill="#F1EFE8" stroke="#B4B2A9" stroke-width="0.5"/>
      <text x="290" y="75" text-anchor="middle" font-size="14" font-weight="500" fill="#444441" font-family="sans-serif">of</text>
      <rect x="330" y="52" width="80" height="36" rx="6" fill="#E1F5EE" stroke="#1D9E75" stroke-width="1"/>
      <text x="370" y="75" text-anchor="middle" font-size="14" font-weight="500" fill="#085041" font-family="sans-serif">France</text>
      <rect x="416" y="52" width="68" height="36" rx="6" fill="#F1EFE8" stroke="#B4B2A9" stroke-width="0.5"/>
      <text x="450" y="75" text-anchor="middle" font-size="14" font-weight="500" fill="#444441" font-family="sans-serif">is</text>
      <rect x="494" y="52" width="72" height="36" rx="6" fill="#FAECE7" stroke="#D85A30" stroke-width="1"/>
      <text x="530" y="75" text-anchor="middle" font-size="14" font-weight="500" fill="#712B13" font-family="sans-serif">Paris</text>

      <path d="M370 140 Q370 155 450 155 Q530 155 530 140" fill="none" stroke="#E24B4A" stroke-width="1" stroke-dasharray="4 3"/>
      <text x="450" y="172" text-anchor="middle" font-size="12" fill="#A32D2D" font-family="sans-serif">gap = 2 — fixed, ordinal, cannot compress</text>

      <rect x="60" y="196" width="560" height="55" rx="10" fill="#F1EFE8" stroke="#B4B2A9" stroke-width="0.5"/>
      <text x="340" y="218" text-anchor="middle" font-size="12" fill="#5F5E5A" font-family="sans-serif">Positions are static: 1, 2, 3, 4, 5, 6 — always integers, always ordinal.</text>
      <text x="340" y="238" text-anchor="middle" font-size="12" fill="#5F5E5A" font-family="sans-serif">Semantically close words still appear far apart in the math.</text>
    </svg>
  </div>

  <!-- PANEL 2 -->
  <div class="panel" id="p2">
    <svg width="100%" viewBox="0 0 680 285" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <marker id="a2" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M2 1L8 5L2 9" fill="none" stroke="#888780" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        </marker>
        <marker id="a2o" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M2 1L8 5L2 9" fill="none" stroke="#EF9F27" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        </marker>
      </defs>
      <text x="340" y="24" text-anchor="middle" font-size="12" fill="#5F5E5A" font-family="sans-serif">Inside one transformer layer — RePo adds a GPS side-quest before attention</text>

      <!-- Paris token -->
      <rect x="40" y="50" width="80" height="48" rx="8" fill="#FAECE7" stroke="#D85A30" stroke-width="1"/>
      <text x="80" y="70" text-anchor="middle" font-size="14" font-weight="500" fill="#712B13" font-family="sans-serif">Paris</text>
      <text x="80" y="87" text-anchor="middle" font-size="11" fill="#993C1D" font-family="sans-serif">token</text>

      <line x1="120" y1="74" x2="148" y2="74" stroke="#888780" stroke-width="1" marker-end="url(#a2)"/>

      <!-- LayerNorm -->
      <rect x="150" y="50" width="88" height="48" rx="8" fill="#F1EFE8" stroke="#B4B2A9" stroke-width="0.5"/>
      <text x="194" y="70" text-anchor="middle" font-size="14" font-weight="500" fill="#444441" font-family="sans-serif">LayerNorm</text>
      <text x="194" y="87" text-anchor="middle" font-size="11" fill="#888780" font-family="sans-serif">stabilize</text>

      <!-- h extraction -->
      <circle cx="265" cy="74" r="8" fill="white" stroke="#EF9F27" stroke-width="2"/>
      <text x="265" y="78" text-anchor="middle" font-size="11" font-weight="500" fill="#BA7517" font-family="sans-serif">h</text>
      <text x="265" y="100" text-anchor="middle" font-size="11" fill="#BA7517" font-family="sans-serif">extracted here</text>

      <!-- down to MLP -->
      <line x1="265" y1="110" x2="265" y2="142" stroke="#EF9F27" stroke-width="1.5" stroke-dasharray="4 3" marker-end="url(#a2o)"/>

      <!-- MLP GPS -->
      <rect x="186" y="144" width="158" height="60" rx="8" fill="#FAEEDA" stroke="#EF9F27" stroke-width="1"/>
      <text x="265" y="166" text-anchor="middle" font-size="14" font-weight="500" fill="#633806" font-family="sans-serif">MLP GPS factory</text>
      <text x="265" y="184" text-anchor="middle" font-size="12" fill="#854F0B" font-family="sans-serif">4096 → 64 → p</text>

      <!-- p output -->
      <line x1="344" y1="174" x2="390" y2="174" stroke="#EF9F27" stroke-width="1.5" marker-end="url(#a2o)"/>
      <rect x="392" y="152" width="84" height="44" rx="8" fill="#FAEEDA" stroke="#EF9F27" stroke-width="1"/>
      <text x="434" y="170" text-anchor="middle" font-size="14" font-weight="500" fill="#633806" font-family="sans-serif">p (64d)</text>
      <text x="434" y="186" text-anchor="middle" font-size="11" fill="#854F0B" font-family="sans-serif">position essence</text>

      <!-- main path continues -->
      <line x1="272" y1="74" x2="340" y2="74" stroke="#888780" stroke-width="1" marker-end="url(#a2)"/>
      <rect x="342" y="50" width="110" height="48" rx="8" fill="#EEEDFE" stroke="#7F77DD" stroke-width="0.5"/>
      <text x="397" y="70" text-anchor="middle" font-size="14" font-weight="500" fill="#3C3489" font-family="sans-serif">Attention</text>
      <text x="397" y="87" text-anchor="middle" font-size="12" fill="#534AB7" font-family="sans-serif">Q · K / V</text>

      <!-- p feeds rotation -->
      <line x1="476" y1="174" x2="510" y2="174" stroke="#888780" stroke-width="1"/>
      <line x1="510" y1="174" x2="510" y2="98" stroke="#888780" stroke-width="1" marker-end="url(#a2)"/>
      <text x="548" y="144" text-anchor="middle" font-size="12" fill="#5F5E5A" font-family="sans-serif">used to rotate</text>
      <text x="548" y="160" text-anchor="middle" font-size="12" fill="#5F5E5A" font-family="sans-serif">Q and K (RoPE)</text>

      <rect x="60" y="230" width="560" height="42" rx="8" fill="#F1EFE8" stroke="#B4B2A9" stroke-width="0.5"/>
      <text x="340" y="255" text-anchor="middle" font-size="12" fill="#5F5E5A" font-family="sans-serif">h knows context (layer 12 "Paris" knows it's a capital). p encodes that as a decimal position.</text>
    </svg>
  </div>

  <!-- PANEL 3 -->
  <div class="panel" id="p3">
    <svg width="100%" viewBox="0 0 680 275" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <marker id="a3" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M2 1L8 5L2 9" fill="none" stroke="#888780" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        </marker>
      </defs>
      <text x="340" y="24" text-anchor="middle" font-size="12" fill="#5F5E5A" font-family="sans-serif">Same p, different head weight → different decimal z per head</text>

      <!-- p_Paris -->
      <rect x="270" y="44" width="140" height="48" rx="8" fill="#FAEEDA" stroke="#EF9F27" stroke-width="1"/>
      <text x="340" y="64" text-anchor="middle" font-size="14" font-weight="500" fill="#633806" font-family="sans-serif">p_Paris (64d)</text>
      <text x="340" y="82" text-anchor="middle" font-size="11" fill="#854F0B" font-family="sans-serif">position essence</text>

      <line x1="340" y1="92" x2="340" y2="116" stroke="#B4B2A9" stroke-width="1"/>
      <line x1="340" y1="116" x2="180" y2="116" stroke="#B4B2A9" stroke-width="1"/>
      <line x1="340" y1="116" x2="500" y2="116" stroke="#B4B2A9" stroke-width="1"/>
      <line x1="180" y1="116" x2="180" y2="138" stroke="#B4B2A9" stroke-width="1" marker-end="url(#a3)"/>
      <line x1="500" y1="116" x2="500" y2="138" stroke="#B4B2A9" stroke-width="1" marker-end="url(#a3)"/>

      <text x="180" y="132" text-anchor="middle" font-size="11" fill="#888780" font-family="sans-serif">w_A · p</text>
      <text x="500" y="132" text-anchor="middle" font-size="11" fill="#888780" font-family="sans-serif">w_B · p</text>

      <!-- Head A teal -->
      <rect x="96" y="140" width="168" height="56" rx="8" fill="#E1F5EE" stroke="#1D9E75" stroke-width="1"/>
      <text x="180" y="162" text-anchor="middle" font-size="14" font-weight="500" fill="#085041" font-family="sans-serif">Head A</text>
      <text x="180" y="180" text-anchor="middle" font-size="12" fill="#0F6E56" font-family="sans-serif">Geography specialist</text>

      <!-- Head B purple -->
      <rect x="416" y="140" width="168" height="56" rx="8" fill="#EEEDFE" stroke="#7F77DD" stroke-width="1"/>
      <text x="500" y="162" text-anchor="middle" font-size="14" font-weight="500" fill="#3C3489" font-family="sans-serif">Head B</text>
      <text x="500" y="180" text-anchor="middle" font-size="12" fill="#534AB7" font-family="sans-serif">Grammar specialist</text>

      <line x1="180" y1="196" x2="180" y2="218" stroke="#B4B2A9" stroke-width="1" marker-end="url(#a3)"/>
      <line x1="500" y1="196" x2="500" y2="218" stroke="#B4B2A9" stroke-width="1" marker-end="url(#a3)"/>

      <rect x="122" y="220" width="116" height="38" rx="8" fill="#E1F5EE" stroke="#1D9E75" stroke-width="1"/>
      <text x="180" y="244" text-anchor="middle" font-size="15" font-weight="500" fill="#085041" font-family="sans-serif">z = 2.1</text>

      <rect x="442" y="220" width="116" height="38" rx="8" fill="#EEEDFE" stroke="#7F77DD" stroke-width="1"/>
      <text x="500" y="244" text-anchor="middle" font-size="15" font-weight="500" fill="#3C3489" font-family="sans-serif">z = 5.9</text>

      <text x="180" y="268" text-anchor="middle" font-size="12" fill="#0F6E56" font-family="sans-serif">near France (2.0)</text>
      <text x="500" y="268" text-anchor="middle" font-size="12" fill="#534AB7" font-family="sans-serif">near period (6.0)</text>
    </svg>
  </div>

  <!-- PANEL 4 -->
  <div class="panel" id="p4">
    <svg width="100%" viewBox="0 0 680 295" xmlns="http://www.w3.org/2000/svg">
      <text x="340" y="22" text-anchor="middle" font-size="12" fill="#5F5E5A" font-family="sans-serif">Head A (geography lens) — semantic clustering in action</text>

      <!-- Standard row -->
      <text x="60" y="70" font-size="12" font-weight="500" fill="#888780" font-family="sans-serif">Standard</text>
      <line x1="134" y1="70" x2="642" y2="70" stroke="#B4B2A9" stroke-width="0.5"/>

      <rect x="134" y="52" width="58" height="30" rx="5" fill="#F1EFE8" stroke="#B4B2A9" stroke-width="0.5"/>
      <text x="163" y="72" text-anchor="middle" font-size="12" fill="#444441" font-family="sans-serif">The·1</text>
      <rect x="204" y="52" width="72" height="30" rx="5" fill="#F1EFE8" stroke="#B4B2A9" stroke-width="0.5"/>
      <text x="240" y="72" text-anchor="middle" font-size="12" fill="#444441" font-family="sans-serif">capital·2</text>
      <rect x="288" y="52" width="52" height="30" rx="5" fill="#F1EFE8" stroke="#B4B2A9" stroke-width="0.5"/>
      <text x="314" y="72" text-anchor="middle" font-size="12" fill="#444441" font-family="sans-serif">of·3</text>
      <rect x="352" y="52" width="74" height="30" rx="5" fill="#E1F5EE" stroke="#1D9E75" stroke-width="1"/>
      <text x="389" y="72" text-anchor="middle" font-size="12" fill="#085041" font-family="sans-serif">France·4</text>
      <rect x="438" y="52" width="48" height="30" rx="5" fill="#F1EFE8" stroke="#B4B2A9" stroke-width="0.5"/>
      <text x="462" y="72" text-anchor="middle" font-size="12" fill="#444441" font-family="sans-serif">is·5</text>
      <rect x="498" y="52" width="66" height="30" rx="5" fill="#FAECE7" stroke="#D85A30" stroke-width="1"/>
      <text x="531" y="72" text-anchor="middle" font-size="12" fill="#712B13" font-family="sans-serif">Paris·6</text>

      <path d="M389 86 Q389 98 460 98 Q531 98 531 86" fill="none" stroke="#E24B4A" stroke-width="1" stroke-dasharray="3 3"/>
      <text x="460" y="112" text-anchor="middle" font-size="11" fill="#A32D2D" font-family="sans-serif">gap = 2</text>

      <!-- RePo row -->
      <text x="60" y="156" font-size="12" font-weight="500" fill="#185FA5" font-family="sans-serif">RePo</text>
      <line x1="100" y1="156" x2="642" y2="156" stroke="#B4B2A9" stroke-width="0.5"/>

      <rect x="104" y="138" width="80" height="30" rx="5" fill="#E1F5EE" stroke="#1D9E75" stroke-width="1"/>
      <text x="144" y="158" text-anchor="middle" font-size="12" fill="#085041" font-family="sans-serif">France·2.0</text>
      <rect x="190" y="138" width="72" height="30" rx="5" fill="#FAECE7" stroke="#D85A30" stroke-width="1"/>
      <text x="226" y="158" text-anchor="middle" font-size="12" fill="#712B13" font-family="sans-serif">Paris·2.1</text>

      <rect x="410" y="138" width="62" height="30" rx="5" fill="#F1EFE8" stroke="#B4B2A9" stroke-width="0.5"/>
      <text x="441" y="158" text-anchor="middle" font-size="12" fill="#444441" font-family="sans-serif">The·5.5</text>
      <rect x="480" y="138" width="48" height="30" rx="5" fill="#F1EFE8" stroke="#B4B2A9" stroke-width="0.5"/>
      <text x="504" y="158" text-anchor="middle" font-size="12" fill="#444441" font-family="sans-serif">is·5.6</text>
      <rect x="536" y="138" width="84" height="30" rx="5" fill="#F1EFE8" stroke="#B4B2A9" stroke-width="0.5"/>
      <text x="578" y="158" text-anchor="middle" font-size="12" fill="#444441" font-family="sans-serif">capital·5.7</text>

      <path d="M144 172 Q144 184 185 184 Q226 184 226 172" fill="none" stroke="#0F6E56" stroke-width="1.2"/>
      <text x="185" y="200" text-anchor="middle" font-size="11" fill="#0F6E56" font-family="sans-serif">gap = 0.1</text>

      <!-- legend boxes -->
      <rect x="80" y="216" width="240" height="28" rx="6" fill="#E6F1FB" stroke="#85B7EB" stroke-width="0.5"/>
      <text x="200" y="235" text-anchor="middle" font-size="12" fill="#0C447C" font-family="sans-serif">Geography cluster — snapped together</text>

      <rect x="360" y="216" width="240" height="28" rx="6" fill="#F1EFE8" stroke="#B4B2A9" stroke-width="0.5"/>
      <text x="480" y="235" text-anchor="middle" font-size="12" fill="#5F5E5A" font-family="sans-serif">Filler words — pushed aside</text>

      <!-- key insight -->
      <rect x="60" y="258" width="560" height="30" rx="8" fill="#F1EFE8" stroke="#B4B2A9" stroke-width="0.5"/>
      <text x="340" y="278" text-anchor="middle" font-size="12" fill="#5F5E5A" font-family="sans-serif">Words don't move in memory — z changes the RoPE angle so attention sees them as adjacent</text>
    </svg>
  </div>
</div>

<script>
const panels = document.querySelectorAll('.panel');
const btns = document.querySelectorAll('.step-btn');
function show(i) {
  panels.forEach((p,j) => p.classList.toggle('visible', j===i));
  btns.forEach((b,j) => b.classList.toggle('active', j===i));
}
</script>