facupdqate

README.md

@@ -1,8 +1,8 @@
-<p align="center">
+<!-- <p align="center"> -->
-  <img width="180" src="https://github.com/user-attachments/assets/d148b00d-e9f9-4280-89cc-0cc866e17251" alt="PHANTOM logo" />
+<!--   <img width="180" src="https://github.com/user-attachments/assets/d148b00d-e9f9-4280-89cc-0cc866e17251" alt="PHANTOM logo" /> -->
-</p>
+<!-- </p> -->
 
-# PHANTOM
+![](./banner.png)
 
 Agent-aware dynamic pricing research platform for studying how automated transaction orchestration changes pricing power, and for testing defenses that recover margin while protecting legitimate user experience.
 

docs/index.html

@@ -45,8 +45,8 @@
   <meta name="citation_pdf_url" content="https://pub-d5b94a3c29fd40c6b3881946e463fdb7.r2.dev/thesis-latest.pdf">
 
   <!-- Additional SEO -->
-  <meta name="theme-color" content="#303030">
+  <meta name="theme-color" content="#1f2a38">
-  <meta name="msapplication-TileColor" content="#303030">
+  <meta name="msapplication-TileColor" content="#1f2a38">
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="default">
 
@@ -59,12 +59,19 @@
   <title>PHANTOM: Pricing Heuristics Against Non-human Transaction Orchestration Mechanisms - Daniel Rösel | Academic Research</title>
 
   <!-- Favicon and App Icons -->
+  <link rel="icon" type="image/svg+xml" href="static/images/favicon.svg">
   <link rel="icon" type="image/x-icon" href="static/images/favicon.ico">
-  <link rel="apple-touch-icon" href="static/images/favicon.ico">
+  <link rel="apple-touch-icon" href="static/images/apple-touch-icon.png">
 
   <!-- Critical CSS - Load synchronously -->
   <link rel="stylesheet" href="static/css/bulma.min.css">
   <link rel="stylesheet" href="static/css/index.css">
+  <link rel="stylesheet" href="static/css/defense-theme.css">
+
+  <!-- Defense-style monospace tagline font -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
 
   <!-- Non-critical CSS - Load asynchronously -->
   <link rel="preload" href="static/css/bulma-carousel.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
@@ -236,92 +243,87 @@
   </div>
 
   <main id="main-content">
-  <section class="hero">
+  <section class="hero defense-cover" id="top">
     <div class="hero-body">
       <div class="container is-max-desktop">
-        <div class="columns is-centered">
+        <div class="defense-hero-grid">
-          <div class="column has-text-centered">
+          <div class="defense-copy">
-            <h1 class="title is-1 publication-title">Pricing Heuristics Against Non-human Transaction Orchestration Mechanisms</h1>
+            <p class="defense-kicker">IE University Bachelor's Thesis · 2025</p>
-            <div class="is-size-5 publication-authors author-names">
+            <h1 class="title publication-title defense-title">PHANTOM</h1>
-              <span class="author-block">
+            <p class="defense-subtitle">Revenue management in the age of <span class="mark">AI agents</span>.</p>
-                <a href="https://alves.world" target="_blank">Daniel Rösel</a></span>
-                  </div>
 
-                  <div class="is-size-5 publication-authors author-meta">
+            <div class="defense-chip-row" aria-label="Core thesis dimensions">
-                    <span class="author-block">IE University<br>Bachelor's Thesis 2025</span>
+              <span class="defense-chip">Private Valuation</span>
-                    <span class="eql-cntrb">Advisor: Alberto Martín Izquierdo</span>
+              <span class="defense-chip">True Demand</span>
-                  </div>
+              <span class="defense-chip">Constraints</span>
+            </div>
 
-                  <div class="column has-text-centered">
+            <div class="defense-meta-card" aria-label="Project authorship">
-                    <div class="publication-links">
+              <span>Written by Daniel Rösel</span>
-                      <span class="link-block">
+              <span class="dot" aria-hidden="true"></span>
-                        <a href="https://blog.alves.world/series/phantom" target="_blank"
+              <span>Advised by Alberto Martín Izquierdo</span>
-                        class="external-link button is-normal is-rounded is-dark">
+            </div>
-                        <span class="icon">
-                          <i class="fas fa-blog"></i>
-                        </span>
-                        <span>Blog Series</span>
-                      </a>
-                    </span>
 
-                    <span class="link-block">
+            <div class="defense-links publication-links" aria-label="Project links">
-                        <a href="https://pub-d5b94a3c29fd40c6b3881946e463fdb7.r2.dev/thesis-latest.pdf" target="_blank"
+              <a href="https://pub-d5b94a3c29fd40c6b3881946e463fdb7.r2.dev/thesis-latest.pdf" target="_blank" class="external-link button is-normal is-rounded is-dark">
-                        class="external-link button is-normal is-rounded is-dark">
+                <span class="icon"><i class="fas fa-file-pdf"></i></span>
-                        <span class="icon">
+                <span>Thesis</span>
-                          <i class="fas fa-file-pdf"></i>
-                        </span>
-                        <span>Paper</span>
-                      </a>
-                    </span>
-
-                    <span class="link-block">
-                      <a href="https://huggingface.co/datasets/velocitatem/whoclickedit" target="_blank"
-                      class="external-link button is-normal is-rounded is-dark">
-                      <span class="icon">
-                        <i class="fas fa-database"></i>
-                      </span>
-                      <span>Dataset</span>
-                    </a>
-                  </span>
-
-                  <span class="link-block">
-                    <a href="https://github.com/velocitatem/PHANTOM" target="_blank"
-                    class="external-link button is-normal is-rounded is-dark">
-                    <span class="icon">
-                      <i class="fab fa-github"></i>
-                    </span>
-                    <span>Code</span>
-                  </a>
-                </span>
-
-                <span class="link-block">
-                  <a href="https://phantom-hotel.vercel.app" target="_blank"
-                  class="external-link button is-normal is-rounded is-dark">
-                  <span class="icon">
-                    <i class="fas fa-globe"></i>
-                  </span>
-                  <span>Hotel Demo</span>
-                </a>
-              </span>
-
-              <span class="link-block">
-                <a href="https://phantom-airline.vercel.app" target="_blank"
-                class="external-link button is-normal is-rounded is-dark">
-                <span class="icon">
-                  <i class="fas fa-plane"></i>
-                </span>
-                <span>Airline Demo</span>
               </a>
-            </span>
+              <a href="https://github.com/velocitatem/PHANTOM" target="_blank" class="external-link button is-normal is-rounded is-dark">
+                <span class="icon"><i class="fab fa-github"></i></span>
+                <span>Code</span>
+              </a>
+              <a href="https://huggingface.co/datasets/velocitatem/whoclickedit" target="_blank" class="external-link button is-normal is-rounded is-dark">
+                <span class="icon"><i class="fas fa-database"></i></span>
+                <span>Dataset</span>
+              </a>
+              <a href="documentation/" class="external-link button is-normal is-rounded is-light-outline">
+                <span class="icon"><i class="fas fa-book"></i></span>
+                <span>Docs</span>
+              </a>
+            </div>
+
+            <p class="tpu-credit">Powered by <span class="accent">Google</span> TPU Research Cloud.</p>
+          </div>
+
+          <div class="defense-visual" aria-hidden="true">
+            <div class="defense-orbit-card">
+              <div class="defense-art-stack">
+                <img class="agent-art" src="static/images/agent.svg" alt="" loading="eager">
+                <span class="mini-token"><i class="fas fa-dollar-sign"></i></span>
+                <span class="mini-token"><i class="fas fa-wave-square"></i></span>
+                <span class="mini-token"><i class="fas fa-shield-alt"></i></span>
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-</section>
+  </section>
 
+  <section class="defense-overview-strip" aria-label="PHANTOM defense overview">
+    <div class="container is-max-desktop">
+      <div class="defense-overview-grid">
+        <article class="defense-overview-card">
+          <span class="num">01</span>
+          <h3>The vulnerability</h3>
+          <p>Repeated agent price queries collapse the Cost of Information that dynamic pricing depends on.</p>
+        </article>
+        <article class="defense-overview-card">
+          <span class="num">02</span>
+          <h3>The signal</h3>
+          <p>Human and agent sessions separate through transition-kernel behavior, not brittle bot flags.</p>
+        </article>
+        <article class="defense-overview-card">
+          <span class="num">03</span>
+          <h3>The defense</h3>
+          <p>Distributionally robust RL preserves pricing power under contaminated demand.</p>
+        </article>
+      </div>
+    </div>
+  </section>
 
-<section class="hero teaser">
+<section class="hero teaser defense-teaser">
   <div class="container is-max-desktop">
     <div class="hero-body">
       <div class="publication-banner">
@@ -337,7 +339,7 @@
   <div class="container is-max-desktop">
     <div class="columns is-centered has-text-centered">
       <div class="column is-four-fifths">
-        <h2 class="title is-3">Abstract</h2>
+        <h2 class="title is-3">The thesis, compressed.</h2>
         <div class="content has-text-justified">
           <p>
             Dynamic pricing extracts margin by exploiting the gap between what a platform knows and what a buyer knows. A user who browses a hotel across several sessions signals intent; the platform raises the price accordingly. That information asymmetry — the <em>Cost of Information</em> — is the economic engine behind session-based pricing in travel, hospitality, and e-commerce.
@@ -355,37 +357,106 @@
 </section>
 <!-- End paper abstract -->
 
-<section class="section">
+
+<!-- Defense-styled: new interaction environment (actor triptych) -->
+<section class="section defense-block">
   <div class="container is-max-desktop">
-    <div class="content has-text-justified">
+    <h2 class="defense-heading">New interaction environment of <span class="mark">future commerce</span>.</h2>
-      <h2 class="title is-3 has-text-centered">How it works</h2>
+    <div class="actor-grid">
-      <p>
+      <div class="actor-card">
-        The methodology runs in three stages: observe, distinguish, defend.
+        <div class="actor-art">
-      </p>
+          <img src="static/images/human.svg" alt="Isometric illustration of a human user as a cube character" loading="lazy" />
-
+        </div>
-      <h3 class="title is-4">Stage 1 — Observe</h3>
+        <h3>Users</h3>
-      <p>
+        <p>Have new needs and <strong>means of research</strong> &amp; acquisition.</p>
-        Both human participants and LLM agents are assigned goal-driven tasks on a live instrumented storefront (hotel or airline mode). Every interaction is logged as a timestamped event tuple <code>(action, item, timestamp)</code>. Actions are partitioned into four semantic categories — cart, dwell, navigation, filter — with decreasing signal weights (4.0, 2.0, 1.0, 0.5) calibrated by the KL divergence between human and agent transition rows. Price quotes are streamed to a separate Kafka topic, enabling joint analysis of behavior and pricing exposure. The platform runs a surge-discount heuristic during collection to expose participants to state-dependent prices.
+      </div>
-      </p>
+      <div class="actor-card">
-
+        <div class="actor-art">
-      <h3 class="title is-4">Stage 2 — Distinguish</h3>
+          <img src="static/images/agent.svg" alt="Isometric illustration of an LLM agent depicted as a cube robot" loading="lazy" />
-      <p>
+        </div>
-        From the labeled session trajectories, we estimate class-specific Markov transition kernels <em>T̂<sub>H</sub></em> and <em>T̂<sub>A</sub></em> by maximum likelihood. For any new partial trajectory τ', we compute KL divergence to each prototype:
+        <h3>Agents</h3>
-      </p>
+        <p>Use browsers (C/BUA) to look human and create <strong>clean sessions</strong>.</p>
-      <p style="text-align:center; font-style:italic; margin: 1rem 0;">
+      </div>
-        Δ<sub>H</sub> = D<sub>KL</sub>(T̂' ∥ T̄<sub>H</sub>), &nbsp; Δ<sub>A</sub> = D<sub>KL</sub>(T̂' ∥ T̄<sub>A</sub>)
+      <div class="actor-card">
-      </p>
+        <div class="actor-art">
-      <p>
+          <div class="actor-icon" aria-hidden="true"><i class="fas fa-store"></i></div>
-        The gap score <em>g</em>(τ') = Δ<sub>H</sub> − Δ<sub>A</sub> maps to a weak agent probability via a temperature-controlled logistic function: <em>f</em>(τ') = σ((Δ<sub>H</sub> − Δ<sub>A</sub>) / T). This is a continuous signal, not a binary bot flag. The Mann–Whitney test on gap scores between the 13-human and 16-agent cohorts yields U = 2.0, p = 0.0006 — the behavioral distributions are well separated.
+        </div>
-      </p>
+        <h3>Platforms</h3>
-
+        <p>Run <strong>standard pricing</strong> algorithms and experience revenue loss.</p>
-      <h3 class="title is-4">Stage 3 — Defend</h3>
+      </div>
-      <p>
-        A contamination generator G(α) mixes real human trajectories with synthetic agent trajectories drawn from <em>T̂<sub>A</sub></em> to produce training distributions at any contamination level α ∈ [0, 1]. The pricing policy is trained as a Stackelberg leader against a Wasserstein ambiguity set around the generator's empirical distribution, minimizing worst-case regret over plausible demand shifts. The per-step reward penalizes COI leakage — weighted by <em>f</em>(τ') — while a UX index bounds harm to legitimate users. Sweeps ran across 384 TPU chips (v4, v5e, v6e Trillium) covering six contamination levels and multiple algorithm variants (PPO, A2C, DQN, Q-table).
-      </p>
     </div>
   </div>
 </section>
+<!-- End actor triptych -->
+
+
+<!-- Defense-styled: COI vulnerability -->
+<section class="section">
+  <div class="container is-max-desktop">
+    <h2 class="defense-heading">When agents can repeatedly query prices, realizable <span class="underline">markup disappears</span>.</h2>
+    <div class="coi-equation">
+      <div class="formula">COI = <em>E</em>[P] &minus; <u>p</u></div>
+      <p class="caption">Cost of Information &mdash; the expected premium dynamic pricing earns over the reservation price &mdash; collapses to zero as the number of independent querying agents grows.</p>
+    </div>
+  </div>
+</section>
+<!-- End COI vulnerability -->
+
+
+<section class="section defense-method-section">
+  <div class="container is-max-desktop">
+    <h2 class="defense-heading">We study behavior, convert it into a control signal, and train a pricing policy that survives contamination.</h2>
+    <div class="defense-method-grid">
+      <article class="defense-step">
+        <span class="step-num">01</span>
+        <h3>Observe</h3>
+        <p>Human participants and LLM agents complete goal-driven hotel and airline tasks. The storefront records behavior events and price quotes as timestamped trajectories.</p>
+      </article>
+      <article class="defense-step">
+        <span class="step-num">02</span>
+        <h3>Distinguish</h3>
+        <p>Session paths become transition kernels. KL distance to human and agent prototypes yields a continuous agent-probability signal.</p>
+      </article>
+      <article class="defense-step">
+        <span class="step-num">03</span>
+        <h3>Defend</h3>
+        <p>A contamination generator mixes human and synthetic agent trajectories. A distributionally robust RL policy optimizes price under worst-case demand shifts.</p>
+      </article>
+    </div>
+  </div>
+</section>
+
+
+<!-- Defense-styled: three takeaways and forward-deploy line -->
+<section class="section defense-block">
+  <div class="container is-max-desktop">
+    <h2 class="defense-heading">Agents <span class="mark">distort marketplace signals</span>. PHANTOM uses behavioral distinguishability and DR&ndash;RL to <span class="mark">preserve pricing power</span>.</h2>
+    <ol class="takeaways">
+      <li>
+        <span class="num">01</span>
+        <span>We can <strong>distinguish humans from agents</strong> at the transition-kernel level.<span class="stat">Mann&ndash;Whitney U = 2.0, p = 0.0006 across 29 labeled sessions.</span></span>
+      </li>
+      <li>
+        <span class="num">02</span>
+        <span>Revenue <strong>declines monotonically</strong> in agent-contaminated systems.<span class="stat">Each 1.0 step of contamination &alpha; removes ~90,140 in cohort revenue (p &lt; 10<sup>-77</sup>).</span></span>
+      </li>
+      <li>
+        <span class="num">03</span>
+        <span>Distributionally robust RL <strong>preserves margin</strong> under worst-case contamination.<span class="stat">Defended policy holds positive COI gap over baseline across &alpha; &isin; [0, 1].</span></span>
+      </li>
+    </ol>
+    <p class="deploy-line">Our solution can be forward-deployed to any e-commerce platform to <strong>preserve their COI</strong>.</p>
+    <div class="hf-callout">
+      <div class="hf-emoji" aria-hidden="true">&#129303;</div>
+      <div>
+        <h4>WhoClickedIt &mdash; published on Hugging Face.</h4>
+        <p>~4k rows of labeled human and agent interaction data across hotel and airline tasks. Open dataset used for training the behavioral kernels.</p>
+        <a href="https://huggingface.co/datasets/velocitatem/whoclickedit" target="_blank" rel="noopener">huggingface.co/datasets/velocitatem/whoclickedit</a>
+      </div>
+    </div>
+  </div>
+</section>
+<!-- End takeaways -->
 
 
 <!-- Image carousel -->
@@ -428,35 +499,7 @@
 
 
 
-<!-- Video carousel -->
+<!-- Defense Scenes video carousel removed -->
-<section class="hero is-small">
-  <div class="hero-body">
-    <div class="container">
-      <h2 class="title is-3">Defense Scenes</h2>
-      <div id="videos-carousel" class="carousel results-carousel">
-        <div class="item item-video1">
-          <video poster="" id="video1" controls muted loop height="100%" preload="metadata">
-            <source src="static/videos/COIFirstPrinciplesScene.mp4" type="video/mp4">
-          </video>
-          <h2 class="subtitle has-text-centered">COI from first principles.</h2>
-        </div>
-        <div class="item item-video2">
-          <video poster="" id="video2" controls muted loop height="100%" preload="metadata">
-            <source src="static/videos/BehaviorKernelConstructionScene.mp4" type="video/mp4">
-          </video>
-          <h2 class="subtitle has-text-centered">Behavioral kernel construction: learning how humans and agents differ.</h2>
-        </div>
-        <div class="item item-video3">
-          <video poster="" id="video3" controls muted loop height="100%" preload="metadata">
-            <source src="static/videos/RobustControlScene.mp4" type="video/mp4">
-          </video>
-          <h2 class="subtitle has-text-centered">Distributionally robust control loop.</h2>
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
-<!-- End video carousel -->
 
 
 
@@ -467,7 +510,7 @@
 <section class="hero is-small is-light">
   <div class="hero-body">
       <div class="container">
-      <h2 class="title">Full Thesis</h2>
+      <h2 class="title is-3">Full thesis.</h2>
 
       <iframe title="PHANTOM thesis PDF" src="https://pub-d5b94a3c29fd40c6b3881946e463fdb7.r2.dev/thesis-latest.pdf" width="100%" height="550">
           </iframe>

docs/static/css/defense-theme.css

@@ -0,0 +1,740 @@
+:root {
+  --phantom-bg: #eef3f7;
+  --phantom-paper: rgba(255, 255, 255, 0.78);
+  --phantom-paper-solid: #ffffff;
+  --phantom-ink: #1f2a38;
+  --phantom-muted: #59636e;
+  --phantom-faint: #dce5eb;
+  --phantom-line: rgba(31, 42, 56, 0.13);
+  --phantom-teal: #28aaa5;
+  --phantom-teal-dark: #16837f;
+  --phantom-blue: #527dad;
+  --phantom-blue-soft: rgba(82, 125, 173, 0.18);
+  --phantom-shadow: 0 28px 80px rgba(31, 42, 56, 0.12);
+  --phantom-soft-shadow: 0 14px 45px rgba(31, 42, 56, 0.08);
+}
+
+html {
+  scroll-behavior: smooth;
+  background: var(--phantom-bg);
+}
+
+body {
+  color: var(--phantom-ink);
+  background:
+    radial-gradient(70rem 22rem at 72% 8%, rgba(31, 42, 56, 0.15), transparent 58%),
+    radial-gradient(54rem 24rem at 20% 62%, rgba(31, 42, 56, 0.12), transparent 62%),
+    linear-gradient(180deg, #f7fafc 0%, var(--phantom-bg) 48%, #f8fafb 100%);
+  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  letter-spacing: -0.02em;
+}
+
+body::before {
+  content: "";
+  position: fixed;
+  inset: -20vh -10vw auto -10vw;
+  height: 72vh;
+  pointer-events: none;
+  z-index: -1;
+  opacity: 0.88;
+  filter: blur(30px);
+  background:
+    radial-gradient(45rem 16rem at 9% 34%, rgba(18, 23, 31, 0.11), transparent 62%),
+    radial-gradient(35rem 11rem at 65% 24%, rgba(18, 23, 31, 0.13), transparent 65%),
+    radial-gradient(42rem 17rem at 45% 88%, rgba(82, 125, 173, 0.13), transparent 68%);
+}
+
+strong, b {
+  font-weight: 700;
+  color: inherit;
+}
+
+a {
+  color: var(--phantom-blue);
+  text-decoration-thickness: 0.08em;
+  text-underline-offset: 0.18em;
+}
+
+main {
+  overflow: hidden;
+}
+
+.container.is-max-desktop {
+  max-width: 1180px !important;
+}
+
+.section,
+.hero-body {
+  position: relative;
+}
+
+.section {
+  padding: 5rem 1.5rem;
+}
+
+.title,
+.subtitle,
+h1,
+h2,
+h3,
+h4,
+button,
+.button {
+  /* important needed to beat index.css serif heading rule */
+  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
+  letter-spacing: -0.04em;
+}
+
+/* Defense cover */
+.defense-cover {
+  min-height: 92vh;
+  padding: 2rem 0 3.5rem;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(238, 243, 247, 0.92));
+}
+
+.defense-cover::after {
+  content: "";
+  position: absolute;
+  right: -10vw;
+  bottom: -13rem;
+  width: 64vw;
+  height: 26rem;
+  background: rgba(31, 42, 56, 0.12);
+  filter: blur(38px);
+  border-radius: 65% 35% 47% 53%;
+  transform: rotate(-8deg);
+  pointer-events: none;
+}
+
+.defense-cover .hero-body {
+  padding: 5.5rem 1.5rem 4rem;
+}
+
+.defense-hero-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.72fr);
+  gap: clamp(2rem, 6vw, 7rem);
+  align-items: center;
+}
+
+.defense-kicker,
+.defense-meta-row,
+.defense-chip-row,
+.defense-mini-label,
+.tpu-credit {
+  color: rgba(31, 42, 56, 0.66);
+  font-size: 0.88rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.defense-kicker {
+  margin-bottom: 1.2rem;
+}
+
+.publication-title.defense-title {
+  margin: 0;
+  color: var(--phantom-ink);
+  font-size: clamp(4.25rem, 12vw, 10rem);
+  line-height: 0.82;
+  font-weight: 800;
+  letter-spacing: -0.09em;
+  text-transform: uppercase;
+}
+
+.defense-subtitle {
+  max-width: 950px;
+  margin: clamp(1.5rem, 3vw, 2.3rem) 0 0;
+  color: var(--phantom-ink);
+  font-size: clamp(1.55rem, 3.2vw, 3.35rem);
+  line-height: 1.35;
+  font-weight: 400;
+  letter-spacing: 0.05em;
+}
+
+.mark,
+mark,
+.defense-highlight {
+  background: linear-gradient(0deg, var(--phantom-blue) 0%, var(--phantom-blue) 100%);
+  color: #ffffff;
+  padding: 0 0.1em;
+  line-height: inherit;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
+
+.defense-chip-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.7rem 0.9rem;
+  margin-top: 2.15rem;
+  text-transform: none;
+  letter-spacing: -0.02em;
+  font-size: clamp(0.92rem, 1.4vw, 1.2rem);
+}
+
+.defense-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.65rem;
+  color: rgba(31, 42, 56, 0.70);
+}
+
+.defense-chip::before {
+  content: "";
+  width: 0.42rem;
+  height: 0.42rem;
+  border-radius: 999px;
+  background: var(--phantom-blue);
+  box-shadow: 0 0 0 0.35rem var(--phantom-blue-soft);
+}
+
+.defense-meta-card {
+  margin-top: 2.4rem;
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.6rem 1rem;
+  align-items: center;
+  padding: 0.85rem 1rem;
+  border: 1px solid var(--phantom-line);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.58);
+  backdrop-filter: blur(18px);
+  box-shadow: var(--phantom-soft-shadow);
+  color: rgba(31, 42, 56, 0.74);
+  font-size: 0.95rem;
+}
+
+.defense-meta-card .dot {
+  width: 0.26rem;
+  height: 0.26rem;
+  border-radius: 50%;
+  background: var(--phantom-teal);
+}
+
+.defense-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-top: 1.8rem;
+}
+
+.defense-links .button,
+.publication-links .button {
+  border: 1px solid rgba(31, 42, 56, 0.18) !important;
+  background: rgba(31, 42, 56, 0.92) !important;
+  color: #ffffff !important;
+  box-shadow: 0 12px 30px rgba(31, 42, 56, 0.16);
+  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
+}
+
+.defense-links .button:hover,
+.publication-links .button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 16px 40px rgba(31, 42, 56, 0.20);
+  background: var(--phantom-ink) !important;
+}
+
+.defense-links .button.is-light-outline {
+  background: rgba(255, 255, 255, 0.72) !important;
+  color: var(--phantom-ink) !important;
+}
+
+.tpu-credit {
+  margin-top: 1.35rem;
+  text-transform: none;
+  letter-spacing: 0.02em;
+}
+
+.tpu-credit .accent {
+  color: var(--phantom-blue);
+  font-weight: 700;
+}
+
+.defense-visual {
+  justify-self: end;
+  width: min(100%, 430px);
+}
+
+.defense-orbit-card {
+  position: relative;
+  min-height: 435px;
+  border: 1px solid var(--phantom-line);
+  border-radius: 2rem;
+  background: linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(238, 243, 247, 0.68));
+  box-shadow: var(--phantom-shadow);
+  overflow: hidden;
+}
+
+.defense-orbit-card::before {
+  content: "";
+  position: absolute;
+  inset: 2rem;
+  border: 1px dashed rgba(31, 42, 56, 0.22);
+  border-radius: 44% 56% 58% 42%;
+  transform: rotate(-14deg);
+}
+
+.defense-orbit-card::after {
+  content: "";
+  position: absolute;
+  right: -4rem;
+  bottom: -5rem;
+  width: 18rem;
+  height: 12rem;
+  background: rgba(40, 170, 165, 0.14);
+  border-radius: 50%;
+  filter: blur(18px);
+}
+
+.defense-art-stack {
+  position: relative;
+  display: grid;
+  min-height: 435px;
+  place-items: center;
+  z-index: 1;
+}
+
+.defense-art-stack .agent-art {
+  width: min(70%, 250px);
+  transform: translateY(-12px);
+  filter: drop-shadow(0 28px 28px rgba(31, 42, 56, 0.12));
+}
+
+.defense-art-stack .mini-token {
+  position: absolute;
+  width: 4.8rem;
+  height: 4.8rem;
+  display: grid;
+  place-items: center;
+  border-radius: 1.3rem;
+  border: 1px solid rgba(82, 125, 173, 0.28);
+  background: rgba(255, 255, 255, 0.72);
+  color: var(--phantom-blue);
+  box-shadow: var(--phantom-soft-shadow);
+  font-size: 1.35rem;
+}
+
+.defense-art-stack .mini-token:nth-child(2) { top: 3.1rem; right: 3.2rem; }
+.defense-art-stack .mini-token:nth-child(3) { left: 2.8rem; bottom: 6.1rem; color: var(--phantom-teal-dark); }
+.defense-art-stack .mini-token:nth-child(4) { right: 5.6rem; bottom: 3.2rem; color: var(--phantom-ink); }
+
+/* Defense overview strip */
+.defense-overview-strip {
+  margin-top: -3.8rem;
+  padding: 0 1.5rem 4.6rem;
+  position: relative;
+  z-index: 2;
+}
+
+.defense-overview-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+}
+
+.defense-overview-card,
+.actor-card,
+.defense-step,
+.hf-callout,
+.coi-equation,
+pre,
+.publication-banner {
+  border: 1px solid var(--phantom-line);
+  background: var(--phantom-paper);
+  box-shadow: var(--phantom-soft-shadow);
+  backdrop-filter: blur(18px);
+}
+
+.defense-overview-card {
+  min-height: 9rem;
+  padding: 1.3rem;
+  border-radius: 1.4rem;
+}
+
+.defense-overview-card .num {
+  color: var(--phantom-blue);
+  font-weight: 700;
+  font-size: 0.85rem;
+}
+
+.defense-overview-card h3 {
+  margin: 1rem 0 0.45rem;
+  color: var(--phantom-ink);
+  font-size: clamp(1.15rem, 2vw, 1.65rem);
+  line-height: 1.05;
+}
+
+.defense-overview-card p {
+  color: var(--phantom-muted);
+  font-size: 0.95rem;
+  line-height: 1.45;
+}
+
+/* Main sections */
+.hero.teaser,
+.hero.is-small,
+.hero.is-small.is-light,
+.hero.is-light,
+.section.hero.is-light,
+.defense-block {
+  background: transparent !important;
+}
+
+.publication-banner {
+  padding: 1rem;
+  border-radius: 1.5rem;
+  overflow: hidden;
+}
+
+.publication-banner img,
+.actor-art img {
+  filter: drop-shadow(0 18px 22px rgba(31, 42, 56, 0.10));
+}
+
+.defense-heading,
+.title.is-3,
+.content h2.title {
+  color: var(--phantom-ink) !important;
+  font-size: clamp(2rem, 4.5vw, 4.8rem) !important;
+  /* enough leading that .mark backgrounds on wrapped lines don't overlap adjacent text */
+  line-height: 1.2 !important;
+  font-weight: 700 !important;
+  letter-spacing: -0.06em !important;
+  text-align: left !important;
+  margin-bottom: 2rem !important;
+}
+
+.title.is-4,
+.content h3.title {
+  color: var(--phantom-ink) !important;
+  font-size: clamp(1.35rem, 2.2vw, 2rem) !important;
+  font-weight: 700 !important;
+  letter-spacing: -0.05em !important;
+  margin-top: 2rem !important;
+}
+
+.content {
+  color: var(--phantom-muted);
+  font-size: 1.02rem;
+  line-height: 1.68;
+}
+
+.content.has-text-justified,
+.content.has-text-justified p {
+  text-align: left !important;
+}
+
+.content p + p {
+  margin-top: 1.05rem;
+}
+
+.defense-block,
+.section.hero.is-light {
+  position: relative;
+}
+
+.defense-block::before,
+.section.hero.is-light::before {
+  content: "";
+  position: absolute;
+  inset: 1rem 0 auto 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(31, 42, 56, 0.13), transparent);
+}
+
+.defense-block .defense-heading {
+  margin-bottom: 3.5rem !important;
+}
+
+.actor-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1.1rem;
+  position: relative;
+  z-index: 1;
+}
+
+.actor-card {
+  display: flex;
+  flex-direction: column;
+  min-height: 25rem;
+  padding: 1.4rem;
+  border-radius: 1.5rem;
+}
+
+.actor-card h3 {
+  margin-top: 1.1rem;
+  color: var(--phantom-ink);
+  font-size: clamp(1.6rem, 3vw, 2.55rem);
+  line-height: 1;
+  font-weight: 700;
+}
+
+.actor-card p {
+  margin-top: 1rem;
+  color: var(--phantom-muted);
+  font-size: 1rem;
+  line-height: 1.45;
+}
+
+.actor-art {
+  min-height: 12rem;
+  display: grid;
+  place-items: center;
+}
+
+.actor-art img {
+  max-height: 10.5rem;
+  width: auto;
+}
+
+.actor-icon {
+  display: grid;
+  width: 8.75rem;
+  height: 8.75rem;
+  place-items: center;
+  border: 2px solid rgba(82, 125, 173, 0.55);
+  border-radius: 1.7rem;
+  background: linear-gradient(145deg, rgba(40, 170, 165, 0.20), rgba(255, 255, 255, 0.94));
+  color: var(--phantom-teal-dark);
+  font-size: 3.6rem;
+  transform: rotate(-6deg);
+}
+
+.underline {
+  text-decoration: underline;
+  text-decoration-thickness: 0.09em;
+  text-underline-offset: 0.13em;
+}
+
+.coi-equation {
+  border-radius: 1.7rem;
+  padding: clamp(1.6rem, 4vw, 3rem);
+}
+
+.coi-equation .formula {
+  color: #111111;
+  font-family: Georgia, "Times New Roman", serif;
+  font-size: clamp(3rem, 9vw, 7.6rem);
+  line-height: 1;
+  letter-spacing: -0.07em;
+}
+
+.coi-equation .caption {
+  max-width: 780px;
+  margin-top: 1.3rem;
+  color: var(--phantom-muted);
+  font-size: 1.05rem;
+}
+
+.defense-method-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+  margin-top: 2rem;
+}
+
+.defense-step {
+  border-radius: 1.4rem;
+  padding: 1.35rem;
+}
+
+.defense-step .step-num {
+  display: inline-grid;
+  place-items: center;
+  width: 2.6rem;
+  height: 2.6rem;
+  margin-bottom: 1rem;
+  border: 1px solid rgba(40, 170, 165, 0.38);
+  border-radius: 50%;
+  color: var(--phantom-teal-dark);
+  background: rgba(40, 170, 165, 0.10);
+  font-weight: 700;
+}
+
+.defense-step h3 {
+  margin: 0 0 0.55rem !important;
+  font-size: 1.45rem !important;
+}
+
+.defense-step p {
+  color: var(--phantom-muted);
+  font-size: 0.95rem;
+  line-height: 1.5;
+}
+
+.takeaways {
+  list-style: none;
+  margin: 2rem 0 0 !important;
+  padding: 0;
+  display: grid;
+  gap: 0.9rem;
+}
+
+.takeaways li {
+  display: grid;
+  grid-template-columns: 5rem minmax(0, 1fr);
+  gap: 1rem;
+  align-items: start;
+  padding: 1.2rem 1.3rem;
+  border: 1px solid var(--phantom-line);
+  border-radius: 1.2rem;
+  background: rgba(255, 255, 255, 0.68);
+}
+
+.takeaways .num {
+  color: var(--phantom-blue);
+  font-size: 1.4rem;
+  font-weight: 700;
+}
+
+.takeaways .stat {
+  display: block;
+  margin-top: 0.45rem;
+  color: var(--phantom-muted);
+  font-size: 0.9rem;
+}
+
+.deploy-line {
+  margin: 2rem 0 0;
+  color: var(--phantom-ink);
+  font-size: clamp(1.45rem, 3vw, 2.5rem);
+  line-height: 1.25;
+  font-weight: 700;
+}
+
+.deploy-line strong {
+  background: var(--phantom-blue);
+  color: #ffffff;
+  padding: 0 0.1em;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
+
+.hf-callout {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 1rem;
+  margin-top: 1.6rem;
+  padding: 1.2rem;
+  border-radius: 1.3rem;
+}
+
+.hf-emoji {
+  width: 3.6rem;
+  height: 3.6rem;
+  display: grid;
+  place-items: center;
+  border-radius: 1rem;
+  background: rgba(255, 215, 0, 0.20);
+  font-size: 1.9rem;
+}
+
+.hf-callout h4 {
+  margin: 0 0 0.3rem;
+  color: var(--phantom-ink);
+  font-size: 1.12rem;
+}
+
+.hf-callout p {
+  margin: 0 0 0.35rem;
+  color: var(--phantom-muted);
+}
+
+pre#bibtex-code,
+pre {
+  border-radius: 1.2rem;
+  color: var(--phantom-ink);
+}
+
+.footer {
+  background: rgba(255, 255, 255, 0.54);
+  border-top: 1px solid var(--phantom-line);
+  color: var(--phantom-muted);
+}
+
+.more-works-container,
+.scroll-to-top {
+  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+}
+
+.more-works-btn,
+.scroll-to-top {
+  background: rgba(255, 255, 255, 0.78) !important;
+  color: var(--phantom-ink) !important;
+  border: 1px solid var(--phantom-line) !important;
+  box-shadow: var(--phantom-soft-shadow) !important;
+  backdrop-filter: blur(16px);
+}
+
+.more-works-dropdown {
+  border: 1px solid var(--phantom-line) !important;
+  border-radius: 1.2rem !important;
+  box-shadow: var(--phantom-shadow) !important;
+}
+
+@media (max-width: 900px) {
+  .defense-hero-grid,
+  .defense-overview-grid,
+  .actor-grid,
+  .defense-method-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .defense-cover .hero-body {
+    padding-top: 4rem;
+  }
+
+  .defense-visual {
+    justify-self: stretch;
+  }
+
+  .defense-orbit-card,
+  .defense-art-stack {
+    min-height: 330px;
+  }
+
+  .defense-art-stack .agent-art {
+    width: min(56%, 205px);
+  }
+
+  .defense-meta-card {
+    border-radius: 1.2rem;
+  }
+
+  .publication-title.defense-title {
+    font-size: clamp(4rem, 18vw, 6.2rem);
+  }
+}
+
+@media (max-width: 560px) {
+  .section {
+    padding: 3.6rem 1.1rem;
+  }
+
+  .defense-cover .hero-body {
+    padding-left: 1.1rem;
+    padding-right: 1.1rem;
+  }
+
+  .defense-subtitle {
+    letter-spacing: 0.02em;
+  }
+
+  .takeaways li,
+  .hf-callout {
+    grid-template-columns: 1fr;
+  }
+
+  .defense-chip-row,
+  .defense-links {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .defense-links .button {
+    justify-content: center;
+  }
+}

docs/static/css/index.css

@@ -31,6 +31,15 @@
   --paper-ink-strong: #303030;
   --paper-ink-soft: #6b6b6b;
   --paper-accent: #2f2f2f;
+  --defense-bg: #f4f7f9;
+  --defense-surface: #ffffff;
+  --defense-teal: #5fb3a8;
+  --defense-teal-soft: #b9e2dc;
+  --defense-teal-bg: #c8ebe5;
+  --defense-blue: #2d6f9f;
+  --defense-ink: #1d2630;
+  --defense-ink-soft: #5a6470;
+  --mono-stack: "IBM Plex Mono", "JetBrains Mono", "Roboto Mono", "SF Mono", Menlo, Consolas, monospace;
   --radius: 10px;
   --radius-lg: 14px;
 }

docs/static/images/agent.svg

@@ -0,0 +1,123 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800" width="100%" height="100%">
+  <defs>
+    <radialGradient id="bgShadow" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="#143547" stop-opacity="0.15" />
+      <stop offset="100%" stop-color="#ffffff" stop-opacity="0" />
+    </radialGradient>
+
+    <radialGradient id="innerShadow" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="#15334c" stop-opacity="0.35" />
+      <stop offset="100%" stop-color="#ffffff" stop-opacity="0" />
+    </radialGradient>
+
+    <linearGradient id="cubeTop" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#ffffff" />
+      <stop offset="100%" stop-color="#e2f1f7" />
+    </linearGradient>
+
+    <linearGradient id="cubeLeft" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#5caec4" />
+      <stop offset="100%" stop-color="#337899" />
+    </linearGradient>
+
+    <linearGradient id="cubeRight" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#9ce6d7" />
+      <stop offset="100%" stop-color="#5fbfa9" />
+    </linearGradient>
+
+    <linearGradient id="headTop" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#ffffff" />
+      <stop offset="100%" stop-color="#eef6fa" />
+    </linearGradient>
+
+    <linearGradient id="headLeft" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#ffffff" />
+      <stop offset="100%" stop-color="#d9eaf0" />
+    </linearGradient>
+
+    <linearGradient id="headRight" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#ffffff" />
+      <stop offset="100%" stop-color="#e3eff5" />
+    </linearGradient>
+
+    <linearGradient id="screenGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#0c2340" />
+      <stop offset="100%" stop-color="#16355c" />
+    </linearGradient>
+
+    <linearGradient id="recessGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#bcdde8" />
+      <stop offset="100%" stop-color="#edf6f9" />
+    </linearGradient>
+
+    <style>
+      .stroke-main { stroke: #1a446c; stroke-width: 7px; stroke-linecap: round; stroke-linejoin: round; }
+      .stroke-medium { stroke: #1a446c; stroke-width: 5.5px; stroke-linecap: round; stroke-linejoin: round; }
+      .stroke-thin { stroke: #1a446c; stroke-width: 4px; stroke-linecap: round; stroke-linejoin: round; }
+      .circuit-line { fill: none; stroke: #ffffff; stroke-width: 4px; stroke-linecap: round; stroke-linejoin: round; stroke-opacity: 0.9; }
+      .circuit-node { fill: #ffffff; stroke: #1a446c; stroke-width: 3.5px; }
+      .glow-eye { fill: #6bf2ff; filter: drop-shadow(0px 0px 3px rgba(107,242,255,0.8)); }
+    </style>
+  </defs>
+
+  <ellipse cx="400" cy="700" rx="220" ry="75" fill="url(#bgShadow)" />
+
+  <polygon points="220,415 400,519 400,710 220,606" fill="url(#cubeLeft)" />
+  <polygon points="400,519 580,415 580,606 400,710" fill="url(#cubeRight)" />
+  
+  <polygon points="220,415 400,519 400,450 220,346" fill="#ffffff" fill-opacity="0.35" />
+  <polygon points="400,519 580,415 580,346 400,450" fill="#ffffff" fill-opacity="0.15" />
+  
+  <polygon points="220,346 400,242 580,346 400,450" fill="url(#cubeTop)" />
+
+  <polygon points="220,346 400,242 580,346 580,606 400,710 220,606" fill="none" class="stroke-main" />
+  <line x1="400" y1="450" x2="400" y2="710" class="stroke-main" />
+  <line x1="220" y1="415" x2="400" y2="519" class="stroke-main" />
+  <line x1="400" y1="519" x2="580" y2="415" class="stroke-main" />
+
+  <path d="M 260,510 L 315,542 L 315,615" class="circuit-line" />
+  <circle cx="260" cy="510" r="6" class="circuit-node" />
+  
+  <path d="M 285,575 L 340,607 L 340,670" class="circuit-line" />
+  <circle cx="285" cy="575" r="6" class="circuit-node" />
+
+  <path d="M 365,550 L 365,685" class="circuit-line" />
+  <circle cx="365" cy="550" r="6" class="circuit-node" />
+
+  <path d="M 540,510 L 460,556 L 460,640" class="circuit-line" />
+  <circle cx="540" cy="510" r="6" class="circuit-node" />
+
+  <path d="M 520,570 L 485,590 L 485,665" class="circuit-line" />
+  <circle cx="520" cy="570" r="6" class="circuit-node" />
+
+
+  <polygon points="275,346 400,274 525,346 400,418" fill="url(#recessGrad)" class="stroke-thin" />
+  <ellipse cx="400" cy="346" rx="65" ry="28" fill="url(#innerShadow)" />
+
+
+  <polygon points="340,335 400,300 460,335 400,370" fill="#142d42" fill-opacity="0.25" />
+
+  <polygon points="310,250 400,302 400,397 310,345" fill="url(#headLeft)" />
+  <polygon points="400,302 490,250 490,345 400,397" fill="url(#headRight)" />
+  <polygon points="310,250 400,198 490,250 400,302" fill="url(#headTop)" />
+
+  <polygon points="310,250 400,198 490,250 490,345 400,397 310,345" fill="none" class="stroke-medium" />
+  <line x1="400" y1="302" x2="400" y2="397" class="stroke-medium" />
+
+  <polygon points="325,268 385,303 385,370 325,335" fill="url(#screenGrad)" class="stroke-thin" />
+
+  <line x1="343" y1="306" x2="343" y2="322" stroke="#6bf2ff" stroke-width="7.5" stroke-linecap="round" class="glow-eye" />
+  <line x1="367" y1="320" x2="367" y2="336" stroke="#6bf2ff" stroke-width="7.5" stroke-linecap="round" class="glow-eye" />
+
+
+  <ellipse cx="400" cy="230" rx="12" ry="6" fill="#325b7f" />
+  
+  <path d="M 320,165 C 320,142 480,142 480,165" fill="none" stroke="#63cbd1" stroke-width="6" stroke-linecap="round" stroke-opacity="0.8" />
+  
+  <line x1="400" y1="230" x2="400" y2="135" class="stroke-medium" />
+  
+  <path d="M 480,165 C 480,188 320,188 320,165" fill="none" stroke="#63cbd1" stroke-width="6" stroke-linecap="round" />
+
+  <circle cx="400" cy="135" r="10" fill="#5cbfa9" class="stroke-medium" />
+
+</svg>

docs/static/images/banner.svg

@@ -56,7 +56,7 @@
     <g transform="translate(60, 580)">
         <text x="0" y="30" font-size="24" font-weight="bold" fill="#444">Why COI Erodes with Agent Saturation</text>
         <text x="0" y="75" font-family="Georgia, serif" font-style="italic" font-size="22" fill="#8C7A6B">p<tspan font-size="14" dy="5">(1)</tspan><tspan dy="-5"> = min(p</tspan><tspan font-size="14" dy="5">1</tspan><tspan dy="-5">, ..., p</tspan><tspan font-size="14" dy="5">N</tspan><tspan dy="-5">)</tspan></text>
-        <text x="0" y="115" font-family="Georgia, serif" font-style="italic" font-size="22" fill="#8C7A6B">P(p<tspan font-size="14" dy="5">(1)</tspan><tspan dy="-5"> > t) = [1 - F(t)]</tspan><tspan font-size="14" dy="-10">N</tspan></text>
+        <text x="0" y="115" font-family="Georgia, serif" font-style="italic" font-size="22" fill="#8C7A6B">P(p<tspan font-size="14" dy="5">(1)</tspan><tspan dy="-5"> &gt; t) = [1 - F(t)]</tspan><tspan font-size="14" dy="-10">N</tspan></text>
 
         <!-- Erosion Graph -->
         <rect x="120" y="150" width="280" height="230" fill="#FFFFFF" filter="url(#shadow)" rx="8"/>
@@ -129,9 +129,9 @@
         <text x="250" y="440" font-size="18" fill="#777" text-anchor="middle">Kernel shape is the compact behavioral signature used downstream.</text>
     </g>
 
-    <!-- Bottom: Separability Distributions -->
+    <!-- Bottom: Distinguishability Distributions -->
     <g transform="translate(700, 600)">
-        <text x="0" y="30" font-size="24" font-weight="bold" fill="#444">Separability into a Control Signal</text>
+        <text x="0" y="30" font-size="24" font-weight="bold" fill="#444">Distinguishability into a Control Signal</text>
         <text x="0" y="75" font-family="Georgia, serif" font-style="italic" font-size="22" fill="#8C7A6B">Δ<tspan font-size="16" dy="5">H</tspan><tspan dy="-5"> = D</tspan><tspan font-size="16" dy="5">KL</tspan><tspan dy="-5">(T&#770;' || T&#772;</tspan><tspan font-size="16" dy="5">H</tspan><tspan dy="-5">)</tspan></text>
         <text x="0" y="115" font-family="Georgia, serif" font-style="italic" font-size="22" fill="#8C7A6B">Δ<tspan font-size="16" dy="5">A</tspan><tspan dy="-5"> = D</tspan><tspan font-size="16" dy="5">KL</tspan><tspan dy="-5">(T&#770;' || T&#772;</tspan><tspan font-size="16" dy="5">A</tspan><tspan dy="-5">)</tspan></text>
         <text x="0" y="155" font-family="Georgia, serif" font-style="italic" font-size="24" fill="#8C7A6B">g = Δ<tspan font-size="16" dy="5">H</tspan><tspan dy="-5"> - Δ</tspan><tspan font-size="16" dy="5">A</tspan></text>

docs/static/images/human.svg

@@ -0,0 +1,87 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="100%" height="100%">
+  <defs>
+    <radialGradient id="dropShadow" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="#143547" stop-opacity="0.15" />
+      <stop offset="100%" stop-color="#ffffff" stop-opacity="0" />
+    </radialGradient>
+
+    <radialGradient id="sphereShadow" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="#1c4561" stop-opacity="0.4" />
+      <stop offset="60%" stop-color="#2a5c7c" stop-opacity="0.15" />
+      <stop offset="100%" stop-color="#ffffff" stop-opacity="0" />
+    </radialGradient>
+
+    <linearGradient id="cubeTop" x1="25%" y1="0%" x2="75%" y2="100%">
+      <stop offset="0%" stop-color="#ffffff" />
+      <stop offset="100%" stop-color="#e1eff7" />
+    </linearGradient>
+
+    <linearGradient id="cubeLeft" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#5faec4" />
+      <stop offset="100%" stop-color="#367fa3" />
+    </linearGradient>
+
+    <linearGradient id="cubeRight" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#9ce6d7" />
+      <stop offset="100%" stop-color="#67c7b3" />
+    </linearGradient>
+
+    <linearGradient id="rimLeft" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#ffffff" />
+      <stop offset="100%" stop-color="#cbdfe8" />
+    </linearGradient>
+
+    <linearGradient id="rimRight" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#ffffff" />
+      <stop offset="100%" stop-color="#d5e6ed" />
+    </linearGradient>
+
+    <linearGradient id="sphereGrad" x1="30%" y1="10%" x2="70%" y2="90%">
+      <stop offset="0%" stop-color="#ffffff" />
+      <stop offset="15%" stop-color="#fffdf3" />
+      <stop offset="65%" stop-color="#fbf2d5" />
+      <stop offset="100%" stop-color="#eadebe" />
+    </linearGradient>
+    
+    <style>
+      .outline {
+        stroke: #1e517b;
+        stroke-width: 8px;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      .inner-line {
+        stroke: #1e517b;
+        stroke-width: 6px;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+    </style>
+  </defs>
+
+  <ellipse cx="430" cy="710" rx="180" ry="60" transform="rotate(-15, 430, 710)" fill="url(#dropShadow)" />
+
+  <polygon points="310,470 500,570 500,750 310,650" fill="url(#cubeLeft)" />
+  
+  <polygon points="500,570 690,470 690,650 500,750" fill="url(#cubeRight)" />
+
+  <polygon points="310,400 500,500 500,570 310,470" fill="url(#rimLeft)" />
+  
+  <polygon points="500,500 690,400 690,470 500,570" fill="url(#rimRight)" />
+  
+  <polygon points="310,400 500,300 690,400 500,500" fill="url(#cubeTop)" />
+
+  <ellipse cx="500" cy="370" rx="75" ry="35" fill="url(#sphereShadow)" />
+
+  <polygon points="310,400 500,300 690,400 690,650 500,750 310,650" fill="none" class="outline" />
+  
+  <line x1="310" y1="470" x2="500" y2="570" class="inner-line" />
+  <line x1="500" y1="570" x2="690" y2="470" class="inner-line" />
+  <line x1="500" y1="500" x2="500" y2="750" class="inner-line" />
+  <line x1="310" y1="400" x2="500" y2="500" class="inner-line" />
+  <line x1="500" y1="500" x2="690" y2="400" class="inner-line" />
+
+  <g id="sphere">
+    <circle cx="500" cy="266" r="90" fill="url(#sphereGrad)" class="outline" />
+  </g>
+</svg>