Design: immersive OpenSAE organization card and interactive research homepage

.gitattributes

@@ -34,3 +34,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
 assets/opensae_banner.png filter=lfs diff=lfs merge=lfs -text
+assets/opensae_cover.gif filter=lfs diff=lfs merge=lfs -text

README.md

@@ -1,112 +1,61 @@
 ---
 title: OpenSAE
 emoji: 🧱
-colorFrom: blue
-colorTo: indigo
+colorFrom: gray
+colorTo: blue
 sdk: static
 app_file: index.html
-short_description: Open research for LLM evaluation.
+short_description: Open foundations for mechanistic interpretability.
 ---
 
 <div align="center">
-  <img src="https://huggingface.co/spaces/OpenSAE/README/resolve/main/assets/opensae_banner.png" alt="OpenSAE" width="720" />
+  <a href="https://huggingface.co/spaces/OpenSAE/README" title="Enter the OpenSAE interactive research homepage">
+    <img src="https://huggingface.co/spaces/OpenSAE/README/resolve/main/assets/opensae_cover.gif" alt="OpenSAE — From learned features to testable explanations" width="100%" />
+  </a>
 </div>
 
 <div align="center">
 
-# OpenSAE
+### FROM LEARNED FEATURES TO TESTABLE EXPLANATIONS
 
-### Open research infrastructure for mechanistic interpretability, SAE analysis, and large-scale LLM evaluation
+Open research methods and infrastructure for understanding how neural networks represent information, how their features interact, and how those interactions influence model behavior.
 
-[![GitHub Organization](https://img.shields.io/badge/GitHub-OpenSAE-111827?logo=github)](https://github.com/OpenSAE)
-[![SAEBase Demo](https://img.shields.io/badge/Space-SAEBase%20Research%20Lab-2563eb)](https://huggingface.co/spaces/OpenSAE/SAEBase)
-[![Evaluation Dataset](https://img.shields.io/badge/Dataset-SAEBase--Evaluation-0f766e)](https://huggingface.co/datasets/OpenSAE/SAEBase-Evaluation)
+**[↗ EXPLORE OUR INTERACTIVE RESEARCH HUB](https://huggingface.co/spaces/OpenSAE/README)** &nbsp; · &nbsp; **[SAEBASE RESEARCH LAB](https://huggingface.co/spaces/OpenSAE/SAEBase)**
 
 </div>
 
 ---
 
-## From learned features to testable explanations
+### Research infrastructure
 
-OpenSAE develops **open methods, tools, and evaluation infrastructure** for studying how neural networks represent information and how internal components shape model behavior.
+**[🧱 SAEBase — Research infrastructure for sparse autoencoders](https://huggingface.co/spaces/OpenSAE/SAEBase)**
 
-We focus on **sparse autoencoders, feature interventions, behavioral evaluation, and reproducible interpretability workflows**.
+Capture and reuse model activations, intervene on SAE features, evaluate downstream behavior, and audit experiments with verifiable source records.
 
----
-
-## 🧱 Flagship infrastructure
-
-# SAEBase Research Lab
-
-**[Launch the interactive lab →](https://huggingface.co/spaces/OpenSAE/SAEBase)**
-
-SAEBase provides reusable infrastructure for:
-
-- activation capture and caching
-- SAE feature interventions
-- benchmarking and controlled evaluation
-- reliability analysis and traceable reports
-- research workflows for mechanistic interpretability
-
-### At a glance
-
-| Scope | Current release |
-| --- | --- |
-| **Software** | [SAEBase v0.3.0](https://github.com/OpenSAE/SAEBase/releases/tag/v0.3.0) |
-| **Evaluation dataset** | [SAEBase-Evaluation](https://huggingface.co/datasets/OpenSAE/SAEBase-Evaluation) |
-| **Verified coverage** | **18** model–SAE configurations |
-| **Verified sites** | **48** model/layer sites |
-| **Evidence** | Linked reports and traceable evaluation records |
-
-### Quick links
-
-- **[Interactive 5-minute walkthrough](https://huggingface.co/spaces/OpenSAE/SAEBase)**
-- **[GitHub repository](https://github.com/OpenSAE/SAEBase)**
-- **[Official release v0.3.0](https://github.com/OpenSAE/SAEBase/releases/tag/v0.3.0)**
-- **[Evaluation dataset](https://huggingface.co/datasets/OpenSAE/SAEBase-Evaluation)**
-
----
+| **18 configurations** | **48 evaluated layer sites** | **270M–9B models** |
+| :---: | :---: | :---: |
+| Model + SAE pairs | Checkpoint, benchmark and reliability checks | Selected model families |
 
-## 🔬 Research methods
+**[Explore SAEBase ↗](https://huggingface.co/spaces/OpenSAE/SAEBase)** · [Browse evaluation data](https://huggingface.co/datasets/OpenSAE/SAEBase-Evaluation) · [GitHub source](https://github.com/OpenSAE/SAEBase) · [v0.3.0 release](https://github.com/OpenSAE/SAEBase/releases/tag/v0.3.0)
 
-OpenSAE also develops research methods for understanding feature interactions, representation changes, and input dependencies.
+### Research directions
 
-| Project | Focus | Explore |
-| --- | --- | --- |
-| **SAR** | Behavioral compositionality of sparse autoencoder representations | [Project & tutorial](https://github.com/OpenSAE/SAE-Behavioral-Compositionality) |
-| **RSS** | Representation redistribution across prompt transformations | [Project & tutorial](https://github.com/OpenSAE/Redistribution-Sensitivity-Score) |
-| **Input Localization** | Input dependencies of SAE feature activations | [Project & tutorial](https://github.com/OpenSAE/SAE-Input-Localization) |
+| Research | Question | Explore |
+| :--- | :--- | :--- |
+| **🧩 Behavioral Compositionality (SAR)** | How do SAE features combine to influence downstream behavior? | [Project and tutorial ↗](https://github.com/OpenSAE/SAE-Behavioral-Compositionality) |
+| **🔀 Representation Redistribution (RSS)** | How does feature activity change across prompt presentations? | [Project and tutorial ↗](https://github.com/OpenSAE/Redistribution-Sensitivity-Score) |
+| **🧭 Input Localization** | Which controlled inputs are needed to explain feature activations? | [Project and tutorial ↗](https://github.com/OpenSAE/SAE-Input-Localization) |
 
 ---
 
-## 🚀 Why OpenSAE
+### Built for open, reproducible research
 
-- **Research-first**: built for mechanistic interpretability research rather than generic model hosting
-- **Reproducible**: evaluation records are traceable and linked to original reports
-- **Practical**: supports real workflows for interventions, benchmarking, and analysis
-- **Open**: code, tutorials, and research artifacts are publicly available
+We publish code, evaluation protocols, tutorials, and traceable experimental records. The SAEBase evaluation documents **engineering compatibility under controlled inputs**, not a universal ranking of interpretability or SAE quality. Pretrained model and SAE weights remain with their original publishers.
 
----
-
-## 🌍 Open science
-
-We share **research code, protocols, tutorials, and evaluation records** to support open and rigorous work on neural network understanding.
-
-External pretrained model and SAE weights remain with their respective publishers.
-
----
-
-## 🔗 Explore OpenSAE
+<div align="center">
 
-- **[OpenSAE GitHub organization](https://github.com/OpenSAE)**
-- **[SAEBase Research Lab](https://huggingface.co/spaces/OpenSAE/SAEBase)**
-- **[SAEBase Evaluation Dataset](https://huggingface.co/datasets/OpenSAE/SAEBase-Evaluation)**
-- **[Contributing guide](https://github.com/OpenSAE/SAEBase/blob/main/CONTRIBUTING.md)**
+**[GitHub](https://github.com/OpenSAE)** &nbsp; · &nbsp; **[Hugging Face Research Lab](https://huggingface.co/spaces/OpenSAE/SAEBase)** &nbsp; · &nbsp; **[Evaluation Dataset](https://huggingface.co/datasets/OpenSAE/SAEBase-Evaluation)** &nbsp; · &nbsp; **[Contribute](https://github.com/OpenSAE/SAEBase/blob/main/CONTRIBUTING.md)**
 
----
+OpenSAE · Research and collaboration: **hma232@wisc.edu**
 
-## Contact
-
-**Haotian Ma**  
-University of Wisconsin–Madison  
-Email: **hma232@wisc.edu**
+</div>

index.html

@@ -1,68 +1,430 @@
 <!doctype html>
 <html lang="en">
 <head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="theme-color" content="#f5f9fa">
-  <meta name="description" content="OpenSAE builds open research infrastructure for mechanistic interpretability, feature interventions, and reliable evaluation.">
-  <title>OpenSAE · Open Research Infrastructure</title>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <meta name="theme-color" content="#07121b" />
+  <meta name="description" content="OpenSAE develops open methods and research infrastructure for understanding neural representations, intervening on sparse autoencoder features, and evaluating their effects on model behavior." />
+  <meta property="og:type" content="website" />
+  <meta property="og:title" content="OpenSAE — From learned features to testable explanations" />
+  <meta property="og:description" content="Research infrastructure, open methods and reproducible evaluation for mechanistic interpretability." />
+  <meta property="og:image" content="https://huggingface.co/spaces/OpenSAE/README/resolve/main/assets/opensae_cover.gif" />
+  <title>OpenSAE — From learned features to testable explanations</title>
   <style>
-    :root { --ink: #17313d; --muted: #48616d; --line: #dce8e9; --teal: #087f78; --light: #eef8f6; }
-    * { box-sizing: border-box; }
-    body { margin: 0; background: #f6fafb; color: var(--ink); font: 15px/1.55 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
-    a { color: var(--teal); }
-    a:focus-visible { outline: 3px solid #169888; outline-offset: 3px; border-radius: 6px; }
-    main { max-width: 880px; margin: 0 auto; padding: 12px 26px 28px; }
-    .brand { text-align: center; padding: 3px 0 8px; }
-    .brand img { width: min(360px, 80%); height: auto; display: block; margin: auto; object-fit: contain; }
-    .eyebrow { font-size: 10px; color: #18786f; letter-spacing: .16em; font-weight: 800; text-transform: uppercase; margin: 11px 0 7px; }
-    h1 { font-size: clamp(22px, 3.8vw, 31px); font-weight: 780; letter-spacing: -.035em; line-height: 1.16; margin: 0 0 9px; }
-    .intro { color: var(--muted); max-width: 690px; margin: 0 0 20px; font-size: 14px; }
-    .links { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
-    .action { font-size: 12px; font-weight: 730; text-decoration: none; border: 1px solid #bbded7; padding: 10px 14px; border-radius: 9px; background: white; color: #176159; }
-    .action.primary { background: #0b504d; border-color: #0b504d; color: #f1fffb; }
-    .action:hover { box-shadow: 0 4px 16px #0d47451a; }
-    h2 { font-size: 14px; letter-spacing: -.015em; margin: 18px 0 9px; }
-    .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
-    .card { background: white; border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: block; text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
-    .card:hover { border-color: #5caca2; transform: translateY(-1px); }
-    .card strong { display: block; font-size: 14px; margin-bottom: 5px; }
-    .card span { color: var(--muted); display: block; font-size: 12px; line-height: 1.5; }
-    .card.featured { border-color: #b8dcd5; background: linear-gradient(135deg, #f2fbf9, white); }
-    .small-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
-    .small-grid .card strong { font-size: 13px; }
-    .small-grid .card span { font-size: 11px; }
-    footer { border-top: 1px solid var(--line); padding-top: 13px; margin-top: 23px; color: #617984; font-size: 12px; }
-    footer a { text-decoration: none; font-weight: 700; }
-    @media(max-width:620px) { main { padding: 12px 15px 25px; } .brand img { width: min(310px, 85%); } .cards, .small-grid { grid-template-columns: 1fr; } }
-    @media(prefers-reduced-motion: reduce) { .card { transition: none; } .card:hover { transform: none; } }
+    :root {
+      color-scheme: dark;
+      --ink: #07121b;
+      --navy: #0c1c27;
+      --surface: #0d1d28;
+      --surface-2: #102630;
+      --line: rgba(175,225,226,.13);
+      --mint: #a7f7dd;
+      --mint2: #5fdfc7;
+      --gold: #ecc795;
+      --white: #eef9f5;
+      --muted: #a0b6b9;
+      --deepmuted: #6f9298;
+      --max: 1210px;
+      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
+    }
+    *{box-sizing:border-box}
+    html{scroll-behavior:smooth;scroll-padding-top:100px}
+    body{margin:0;background:var(--ink);color:var(--white);overflow-x:hidden;-webkit-font-smoothing:antialiased}
+    body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.55;background:radial-gradient(ellipse at 75% 6%,rgba(23,93,91,.28),transparent 46%),radial-gradient(ellipse at 5% 87%,rgba(14,48,65,.38),transparent 48%)}
+    body::after{content:"";position:fixed;inset:0;z-index:15;pointer-events:none;opacity:.025;background-image:url('data:image/svg+xml,%3Csvg viewBox=%220 0 160 160%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.7%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22/%3E%3C/svg%3E')}
+    a{color:inherit;text-decoration:none}
+    button{font:inherit;cursor:pointer}
+    button,a{-webkit-tap-highlight-color:transparent}
+    :focus-visible{outline:2px solid var(--mint);outline-offset:5px}
+    .container{width:min(var(--max),calc(100% - 76px));margin-inline:auto}
+    .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase}
+    .light{color:var(--mint)}
+    .masthead{position:sticky;top:0;z-index:20;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);background:rgba(7,18,27,.83);border-bottom:1px solid rgba(179,229,221,.12)}
+    .nav-inner{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}
+    .brand{display:inline-flex;gap:13px;align-items:center;font-size:21px;font-weight:740;letter-spacing:-.065em;white-space:nowrap}
+    .brand-emblem{width:36px;height:36px;display:grid;place-items:center;position:relative;border:1px solid rgba(118,233,208,.4);border-radius:11px;background:rgba(25,85,83,.19)}
+    .brand-emblem svg{width:25px;height:25px}
+    .brand small{font-weight:450;font-size:9px;letter-spacing:.2em;color:var(--deepmuted);display:block;margin-top:2px}
+    .nav-items{display:flex;align-items:center;gap:29px}
+    .nav-items>a{font-size:12px;color:#b7c8c9;font-weight:560;transition:color .18s}
+    .nav-items>a:hover{color:var(--mint)}
+    .nav-right{display:flex;align-items:center;gap:16px}
+    .nav-live{font-size:9px;letter-spacing:.16em;color:var(--mint);display:flex;align-items:center;gap:8px}
+    .pulse-dot{width:7px;height:7px;border-radius:50%;background:#80e6c4;box-shadow:0 0 0 5px rgba(94,223,193,.12);animation:pulse 2.8s ease-in-out infinite}
+    .nav-cta{border:1px solid rgba(131,234,209,.35);background:rgba(85,199,179,.09);color:#d8fcf0;padding:11px 16px;border-radius:6px;font-size:11px;letter-spacing:.025em;font-weight:680;transition:background .2s,transform .2s}
+    .nav-cta:hover{background:rgba(85,199,179,.2);transform:translateY(-1px)}
+    .menu-toggle{display:none;align-items:center;justify-content:center;background:transparent;color:var(--white);border:1px solid var(--line);width:40px;height:40px;border-radius:6px}
+    .hero{position:relative;min-height:750px;display:flex;align-items:center;isolation:isolate;padding:88px 0 110px;overflow:hidden}
+    .hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(90deg,rgba(7,18,27,1) 1%,rgba(7,18,27,.93) 37%,transparent 78%),radial-gradient(ellipse at 79% 37%,rgba(15,130,120,.22),transparent 49%)}
+    .hero-grid{position:absolute;inset:0;z-index:-2;opacity:.28;mask-image:linear-gradient(90deg,transparent,#000 45%);background-image:linear-gradient(rgba(113,204,194,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(113,204,194,.1) 1px,transparent 1px);background-size:78px 78px;transform:perspective(850px) rotateX(13deg) scale(1.22);transform-origin:75% 45%}
+    #network{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;opacity:.55}
+    .hero-inner{display:grid;grid-template-columns:minmax(0,1.09fr) minmax(380px,.91fr);gap:26px;align-items:center;position:relative;z-index:2}
+    .eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:33px;color:var(--mint2);font-weight:700;font-size:10px;letter-spacing:.22em}
+    .eyebrow .rule{width:29px;height:1px;background:var(--mint2)}
+    h1,h2,h3,p{margin-top:0}
+    .hero h1{font-size:clamp(53px,6.2vw,98px);letter-spacing:-.084em;line-height:1.02;margin-bottom:30px;font-weight:725;max-width:770px}
+    .hero h1 .soft{display:block;color:#e8f8f3}
+    .hero h1 .gradient{display:block;background:linear-gradient(98deg,var(--mint) 5%,#6fc9d0 43%,#debd91 96%);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:7px}
+    .hero-text{max-width:575px}
+    .hero-text>p{color:#abbfc1;font-size:17px;line-height:1.83;max-width:520px;margin-bottom:37px}
+    .actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
+    .btn{display:inline-flex;align-items:center;gap:15px;padding:17px 23px;font-size:12px;font-weight:720;border-radius:5px;transition:transform .2s,background .2s,box-shadow .2s;border:1px solid transparent;white-space:nowrap}
+    .btn:hover{transform:translateY(-3px)}
+    .btn-primary{color:#08221f;background:var(--mint);box-shadow:0 9px 35px rgba(56,229,185,.13)}
+    .btn-primary:hover{background:#c2ffeb;box-shadow:0 9px 45px rgba(56,229,185,.23)}
+    .btn-outline{border-color:rgba(202,242,234,.29);background:rgba(21,43,54,.32);color:#e8f3ee}
+    .btn-outline:hover{background:rgba(66,129,131,.15)}
+    .btn-arrow{font-size:15px;line-height:1}
+    .hero-caption{display:flex;gap:30px;align-items:center;margin-top:53px;flex-wrap:wrap}
+    .hero-caption span{color:#78999c;font-size:10px;letter-spacing:.11em}
+    .hero-caption b{color:#a5d0ca;font-size:10px;font-weight:550}
+    .hero-visual{height:515px;position:relative;display:grid;place-items:center;perspective:800px;contain:layout}
+    .scene-core{position:relative;width:395px;height:395px;animation:drift 9s ease-in-out infinite;filter:drop-shadow(0 0 24px rgba(52,214,184,.1))}
+    .orbital{position:absolute;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid rgba(107,218,199,.16);box-shadow:inset 0 0 16px rgba(21,140,121,.035)}
+    .orbit1{width:352px;height:352px;border-style:dashed;animation:spin 42s linear infinite}
+    .orbit2{width:255px;height:255px;border-color:rgba(105,231,199,.37);animation:reverse 25s linear infinite}
+    .orbit3{width:165px;height:165px;border-color:rgba(132,238,215,.19)}
+    .orbital::before,.orbital::after{content:"";position:absolute;border-radius:50%;width:7px;height:7px;top:50%;left:-4px;transform:translateY(-50%);background:var(--mint2);box-shadow:0 0 23px rgba(90,227,194,.5)}
+    .orbital::after{left:auto;right:-4px;background:var(--gold);width:5px;height:5px}
+    .orbit3::before,.orbit3::after{display:none}
+    .constellation{position:absolute;width:340px;height:340px;left:50%;top:50%;transform:translate(-50%,-50%);overflow:visible;filter:drop-shadow(0 0 8px rgba(89,218,192,.16))}
+    .constellation .stroke{stroke:#78dccc;stroke-width:1.6;fill:none;opacity:.58}
+    .constellation .thin{stroke:#71cabe;stroke-width:1;opacity:.23;stroke-dasharray:5 7}
+    .constellation .vertex{fill:#09272b;stroke:#b9ffea;stroke-width:1.4}
+    .constellation .vertex-glow{fill:#aaf3de;opacity:.93}
+    .core{position:absolute;left:50%;top:50%;width:90px;height:90px;border-radius:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 48%,#153d41,#09212b 72%);border:1px solid rgba(176,255,227,.7);box-shadow:0 0 22px rgba(71,226,186,.34),0 0 90px rgba(71,226,186,.13)}
+    .core svg{width:40px;height:40px;filter:drop-shadow(0 0 10px rgba(160,248,220,.45))}
+    .float-note{position:absolute;z-index:5;border:1px solid rgba(146,227,213,.2);background:rgba(8,29,39,.78);backdrop-filter:blur(9px);border-radius:7px;padding:11px 14px;min-width:144px;box-shadow:0 20px 70px rgba(0,0,0,.12)}
+    .float-note small{display:block;color:#739fa4;font-size:9px;letter-spacing:.13em;margin-bottom:5px}
+    .float-note strong{font-size:12px;color:#c8f8e8;font-weight:610}
+    .note-top{top:65px;right:-12px;animation:bob 6s ease-in-out infinite}
+    .note-bottom{bottom:68px;left:-5px;animation:bob 7s 1s ease-in-out infinite}
+    .float-note .mini-dot{width:5px;height:5px;background:var(--mint2);display:inline-block;border-radius:50%;margin-right:5px}
+    .edge-id{position:absolute;color:#5c8084;right:0;bottom:2px;font-size:9px}
+    .ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(9,26,34,.79);overflow:hidden;position:relative}
+    .ticker-inner{display:flex;gap:70px;white-space:nowrap;width:max-content;padding:17px 0;animation:marquee 27s linear infinite}
+    .ticker-inner span{font-size:10px;font-weight:690;letter-spacing:.19em;color:#8eb6b3}
+    .ticker-inner span b{color:#7cdccc;font-weight:550;margin-right:12px}
+    .section{padding:118px 0;position:relative}
+    .section.alt{background:linear-gradient(180deg,rgba(13,31,40,.62),rgba(7,18,27,.5));border-block:1px solid rgba(160,227,219,.1)}
+    .section-title-group{display:flex;justify-content:space-between;gap:35px;align-items:end;margin-bottom:43px}
+    .eyeline{font-size:10px;color:var(--mint2);font-weight:740;letter-spacing:.21em;margin-bottom:19px}
+    h2{font-size:clamp(38px,4.5vw,61px);font-weight:705;letter-spacing:-.067em;line-height:1.12;margin-bottom:15px}
+    .section-title-group>p{max-width:385px;color:var(--muted);line-height:1.8;font-size:14px;margin:0 0 7px}
+    .research-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:9px;overflow:hidden;background:linear-gradient(130deg,rgba(20,49,58,.8),rgba(11,27,39,.8))}
+    .stat-block{padding:34px 36px;position:relative}
+    .stat-block:not(:last-child){border-right:1px solid var(--line)}
+    .stat-block .stat-label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#88acac}
+    .stat-block strong{font-size:clamp(46px,5vw,70px);letter-spacing:-.08em;line-height:1.13;display:block;margin:17px 0 8px;font-weight:660;color:var(--white)}
+    .stat-block strong .unit{font-size:25px;color:#8aaab0;letter-spacing:-.04em;margin-left:3px}
+    .stat-block p{margin:0;font-size:12px;line-height:1.7;color:var(--muted)}
+    .stat-corner{position:absolute;top:22px;right:26px;color:#477679;font-size:10px}
+    .feature-intro{display:grid;grid-template-columns:minmax(0,.83fr) minmax(0,1.17fr);align-items:center;gap:75px;margin:73px 0 37px}
+    .feature-intro h3{font-size:35px;letter-spacing:-.05em;line-height:1.2;margin:0 0 20px}
+    .feature-intro p{font-size:15px;line-height:1.9;color:var(--muted);margin-bottom:29px}
+    .link-arrow{font-size:13px;color:var(--mint);font-weight:690;display:inline-flex;gap:13px;align-items:center}
+    .link-arrow:hover{text-decoration:underline;text-underline-offset:6px}
+    .research-terminal{min-height:285px;border:1px solid rgba(131,227,208,.24);background:#081b24;border-radius:9px;overflow:hidden;box-shadow:0 18px 70px rgba(0,0,0,.15)}
+    .terminal-bar{height:44px;border-bottom:1px solid var(--line);display:flex;gap:7px;align-items:center;padding:0 20px;color:#759fa2;font-size:9px;letter-spacing:.1em}
+    .terminal-bar::before,.terminal-bar::after{content:"";width:7px;height:7px;border-radius:50%;background:#396568}
+    .terminal-bar::after{background:#55857d}
+    .terminal-bar small{margin-left:auto}
+    .terminal-body{padding:28px 30px}
+    .terminal-label{font-size:11px;color:var(--mint2);font-weight:690;letter-spacing:.11em;margin-bottom:23px}
+    .terminal-lines{display:grid;gap:16px}
+    .terminal-line{display:flex;gap:17px;align-items:center}
+    .terminal-line em{font-style:normal;color:#91aeb3;width:90px;font-size:10px}
+    .meter{height:7px;flex:1;border-radius:3px;background:#173542;overflow:hidden}
+    .meter span{display:block;height:100%;width:var(--level);background:linear-gradient(90deg,#257d80,#7ce5cb);border-radius:3px;animation:grow 1.7s ease both}
+    .terminal-foot{display:flex;justify-content:space-between;margin-top:24px;gap:16px;color:#64868c;font-size:9px;letter-spacing:.08em}
+    .capabilities{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
+    .cap-card{border:1px solid var(--line);padding:29px 23px 31px;min-height:243px;border-radius:8px;background:linear-gradient(175deg,rgba(16,40,50,.7),rgba(9,26,36,.6));transition:transform .25s,border-color .25s,background .25s}
+    .cap-card:hover{transform:translateY(-6px);border-color:rgba(98,216,191,.45);background:#103038}
+    .cap-icon{width:45px;height:45px;border:1px solid rgba(105,207,192,.22);background:rgba(38,132,122,.1);border-radius:8px;display:grid;place-items:center;color:var(--mint);margin-bottom:23px}
+    .cap-icon svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
+    .cap-card h3{font-size:16px;letter-spacing:-.015em;margin-bottom:10px}
+    .cap-card p{font-size:12px;line-height:1.74;color:var(--muted);margin:0}
+    .workflow{display:grid;grid-template-columns:.75fr 1.25fr;gap:55px;align-items:center;margin-top:15px}
+    .stage-list{display:grid;gap:11px}
+    .stage-button{display:flex;gap:20px;align-items:center;width:100%;border:1px solid var(--line);border-radius:8px;padding:22px;background:rgba(12,29,39,.5);color:#afc2c5;text-align:left;transition:background .2s,border-color .2s}
+    .stage-button[aria-pressed="true"]{border-color:rgba(113,233,198,.56);background:rgba(26,79,73,.22);color:var(--white)}
+    .stage-button:hover{border-color:rgba(115,227,204,.33)}
+    .stage-number{color:#569e9b;font-size:11px}
+    .stage-button strong{font-size:17px;font-weight:680;letter-spacing:-.02em}
+    .stage-button small{display:block;font-size:11px;color:var(--muted);margin-top:6px;letter-spacing:.025em}
+    .workflow-screen{min-height:410px;border:1px solid rgba(108,213,192,.26);border-radius:11px;background:radial-gradient(ellipse at 70% 30%,rgba(22,88,87,.24),transparent 58%),#081b26;padding:36px 42px;position:relative;overflow:hidden}
+    .workflow-screen::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(120,213,193,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(120,213,193,.055) 1px,transparent 1px);background-size:39px 39px;pointer-events:none}
+    .workflow-screen>*{position:relative}
+    .screen-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:23px}
+    .screen-heading small{font-size:10px;color:#6e9ea1;letter-spacing:.14em}
+    .screen-badge{border:1px solid rgba(131,231,203,.25);border-radius:50px;color:var(--mint);padding:7px 10px;font-size:10px}
+    #stageTitle{font-size:30px;letter-spacing:-.06em;margin:33px 0 12px;font-weight:690}
+    #stageDescription{color:#a5bec1;font-size:13px;line-height:1.85;min-height:64px;max-width:480px}
+    .signal-bars{display:flex;align-items:end;gap:12px;height:97px;margin:20px 0 26px;border-bottom:1px solid var(--line)}
+    .signal-bars i{flex:1;display:block;height:var(--h);background:linear-gradient(0deg,#176966,#9af3d5);border-radius:3px 3px 0 0;opacity:.92;transition:height .45s ease}
+    .screen-foot{color:#6a9294;font-size:9px;letter-spacing:.11em;line-height:1.8}
+    .method-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-top:35px}
+    .method-card{padding:32px 30px;min-height:310px;border:1px solid var(--line);border-radius:9px;background:linear-gradient(157deg,rgba(18,48,58,.76),rgba(8,26,38,.7));position:relative;display:flex;flex-direction:column;overflow:hidden;transition:transform .25s,border-color .25s}
+    .method-card:hover{border-color:rgba(112,219,196,.45);transform:translateY(-7px)}
+    .method-card::before{content:"";position:absolute;right:-52px;top:-65px;width:185px;height:185px;border:1px solid rgba(91,219,191,.15);border-radius:50%;box-shadow:0 0 0 30px rgba(91,219,191,.04),0 0 0 75px rgba(91,219,191,.03);transition:transform .4s}
+    .method-card:hover::before{transform:scale(1.15)}
+    .method-card .method-meta{font-size:10px;letter-spacing:.17em;color:var(--mint2);margin-bottom:38px}
+    .method-card h3{font-size:25px;letter-spacing:-.045em;line-height:1.22;margin-bottom:13px}
+    .method-card p{font-size:13px;line-height:1.8;color:#a9c1c1;margin-bottom:25px}
+    .method-card .method-link{font-size:12px;color:var(--mint);font-weight:660;margin-top:auto}
+    .evidence-panel{border:1px solid rgba(138,233,208,.2);border-radius:12px;padding:51px 60px;display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center;position:relative;overflow:hidden;background:radial-gradient(circle at 98% 14%,rgba(24,112,104,.23),transparent 44%),linear-gradient(110deg,#102a32,#0a1b27)}
+    .evidence-panel h2{font-size:clamp(33px,3.8vw,52px);margin:9px 0 17px}
+    .evidence-panel p{font-size:14px;line-height:1.9;color:#adcbca;margin-bottom:23px}
+    .evidence-list{display:grid;gap:14px}
+    .evidence-item{display:flex;align-items:center;gap:14px;color:#d2eae2;font-size:13px}
+    .evidence-item .evidence-dot{width:9px;height:9px;border-radius:3px;transform:rotate(45deg);background:#79d9bd;box-shadow:0 0 17px rgba(91,214,183,.22)}
+    .footer{padding:53px 0 45px;border-top:1px solid var(--line);background:#07121b}
+    .footer-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}
+    .footer-name{font-size:27px;font-weight:760;letter-spacing:-.065em}
+    .footer-info{margin-top:8px;font-size:11px;color:#799b9f}
+    .footer-links{display:flex;flex-wrap:wrap;gap:25px;font-size:12px;color:#a8c6c6}
+    .footer-links a:hover{color:var(--mint)}
+    .copyright{margin-top:38px;border-top:1px solid rgba(128,194,182,.09);padding-top:24px;color:#53777e;font-size:10px;display:flex;justify-content:space-between;gap:12px}
+    .reveal{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s cubic-bezier(.16,1,.3,1)}
+    .reveal.visible{opacity:1;transform:none}
+    .fade-in{animation:fadeup 1s both}
+    @keyframes pulse{50%{box-shadow:0 0 0 9px rgba(94,223,193,0)}}
+    @keyframes drift{50%{transform:translateY(-11px)}}
+    @keyframes bob{50%{transform:translateY(-9px)}}
+    @keyframes grow{from{width:0}to{width:var(--level)}}
+    @keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
+    @keyframes reverse{to{transform:translate(-50%,-50%) rotate(-360deg)}}
+    @keyframes fadeup{from{opacity:0;transform:translateY(21px)}to{opacity:1;transform:none}}
+    @keyframes marquee{to{transform:translateX(-50%)}}
+    @media(min-width:1440px){.hero{min-height:790px}}
+    @media(max-width:1060px){.nav-items{gap:17px}.nav-items>a{font-size:11px}.hero-inner{grid-template-columns:1fr .77fr}.hero-visual{height:460px}.scene-core{transform:scale(.86);animation:none}.note-top{right:-35px}.note-bottom{left:-25px}.capabilities{grid-template-columns:repeat(2,1fr)}.feature-intro{gap:36px}}
+    @media(max-width:790px){
+      .container{width:min(100% - 38px,var(--max))}.nav-inner{min-height:69px}.nav-live{display:none}
+      .menu-toggle{display:flex}.nav-items{display:none;position:absolute;top:69px;left:0;right:0;padding:16px 23px 22px;background:rgba(6,22,32,.97);border-bottom:1px solid var(--line);flex-direction:column;gap:0;align-items:stretch}.nav-items[data-open="true"]{display:flex}.nav-items a{padding:12px;font-size:13px}
+      .hero{min-height:0;padding:83px 0 60px}.hero-inner{grid-template-columns:1fr;gap:0}.hero h1{font-size:clamp(54px,11vw,88px);max-width:600px}.hero-visual{height:370px}.scene-core{transform:scale(.79)}
+      .section{padding:78px 0}.section-title-group{display:block}.section-title-group>p{max-width:100%;margin-top:17px}.research-strip{grid-template-columns:1fr}.stat-block{padding:28px 32px}.stat-block:not(:last-child){border-right:0;border-bottom:1px solid var(--line)}
+      .feature-intro{grid-template-columns:1fr;margin:59px 0 24px}.capabilities{grid-template-columns:repeat(2,1fr)}.workflow{grid-template-columns:1fr;gap:23px}.method-grid{grid-template-columns:1fr}.method-card{min-height:260px}.evidence-panel{grid-template-columns:1fr;padding:35px 29px;gap:15px}
+    }
+    @media(max-width:510px){.brand{font-size:19px}.nav-cta{padding:10px 12px;font-size:10px}.container{width:calc(100% - 34px)}.hero{padding-top:67px}.hero h1{font-size:clamp(46px,12vw,64px)}.hero-text>p{font-size:15px}.eyebrow{font-size:9px;letter-spacing:.15em}.btn{width:100%;justify-content:space-between}.hero-caption{gap:14px}.hero-visual{height:300px;overflow:hidden}.scene-core{transform:scale(.65)}.float-note{min-width:115px;padding:9px}.float-note strong{font-size:10px}.note-top{right:2px;top:45px}.note-bottom{left:1px;bottom:44px}.section{padding:64px 0}.section-title-group{margin-bottom:27px}h2{font-size:36px}.capabilities{grid-template-columns:1fr}.cap-card{min-height:0}.terminal-body{padding:25px 19px}.terminal-line em{width:75px}.workflow-screen{padding:27px 23px;min-height:430px}.stage-button{padding:17px}.evidence-panel{padding:32px 20px}.footer-inner{display:block}.footer-links{margin-top:22px;gap:15px}.copyright{display:block;line-height:1.8}}
+    @media(max-width:380px){.nav-cta{display:none}.brand{gap:8px}.nav-inner{gap:8px}}
+    @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}
   </style>
 </head>
 <body>
-  <main>
-    <div class="brand">
-      <img src="https://huggingface.co/spaces/OpenSAE/README/resolve/main/assets/opensae_banner.png" alt="OpenSAE official logo" loading="eager">
+  <header class="masthead">
+    <div class="container nav-inner">
+      <a class="brand" href="#top" aria-label="OpenSAE home">
+        <span class="brand-emblem" aria-hidden="true">
+          <svg viewBox="0 0 48 48"><g fill="none" stroke="#a7f7dd" stroke-width="3" stroke-linecap="round"><path d="M24 7V17M38.7 15.5L30.1 20.5M38.7 32.5L30.1 27.5M24 41V31M9.3 32.5L17.9 27.5M9.3 15.5L17.9 20.5"/></g><circle cx="24" cy="24" r="4" fill="#a7f7dd"/></svg>
+        </span>
+        <span>OpenSAE<small>RESEARCH INFRASTRUCTURE</small></span>
+      </a>
+      <nav class="nav-items" id="mainNav" aria-label="Main navigation">
+        <a href="#mission">Mission</a><a href="#infrastructure">Infrastructure</a><a href="#methods">Research</a><a href="#evidence">Open science</a>
+      </nav>
+      <div class="nav-right">
+        <span class="nav-live mono"><span class="pulse-dot"></span>OPEN RESEARCH</span>
+        <a class="nav-cta" href="https://github.com/OpenSAE" target="_blank" rel="noopener noreferrer">GitHub ↗</a>
+        <button type="button" class="menu-toggle" id="menuToggle" aria-expanded="false" aria-controls="mainNav" aria-label="Toggle menu">☰</button>
+      </div>
     </div>
-    <div class="eyebrow">Open science · Mechanistic interpretability</div>
-    <h1>From learned features to testable explanations.</h1>
-    <p class="intro">OpenSAE builds open research methods and infrastructure to study neural representations, intervene on model behavior, and evaluate how reliably our measurements explain it.</p>
-    <div class="links">
-      <a class="action primary" href="https://huggingface.co/spaces/OpenSAE/SAEBase">Explore SAEBase ↗</a>
-      <a class="action" href="https://huggingface.co/datasets/OpenSAE/SAEBase-Evaluation">Browse evaluation data ↗</a>
-      <a class="action" href="https://github.com/OpenSAE">OpenSAE on GitHub ↗</a>
-    </div>
-    <h2>Research infrastructure</h2>
-    <div class="cards">
-      <a class="card featured" href="https://huggingface.co/spaces/OpenSAE/SAEBase"><strong>🧱 SAEBase Research Lab ↗</strong><span>Capture activations, intervene on SAE features, benchmark effects, and audit reliability.</span></a>
-      <a class="card" href="https://huggingface.co/datasets/OpenSAE/SAEBase-Evaluation"><strong>▤ SAEBase Evaluation ↗</strong><span>Explore 18 model–SAE configurations and 48 verified model/layer sites with traceable reports.</span></a>
-    </div>
-    <h2>Research methods and tutorials</h2>
-    <div class="small-grid">
-      <a class="card" href="https://github.com/OpenSAE/SAE-Behavioral-Compositionality"><strong>🧩 SAR ↗</strong><span>How SAE features interact to shape downstream model behavior.</span></a>
-      <a class="card" href="https://github.com/OpenSAE/Redistribution-Sensitivity-Score"><strong>🔀 RSS ↗</strong><span>How feature activity changes across prompt presentations.</span></a>
-      <a class="card" href="https://github.com/OpenSAE/SAE-Input-Localization"><strong>🧭 Input Localization ↗</strong><span>Which input variables are needed to explain a feature's activation.</span></a>
-    </div>
-    <footer>Open research, reproducible evidence, shared tools. &nbsp; <a href="https://github.com/OpenSAE">Contribute ↗</a> &nbsp;·&nbsp; <a href="mailto:hma232@wisc.edu">Contact</a></footer>
+  </header>
+
+  <main id="top">
+    <section class="hero" aria-labelledby="heroTitle">
+      <div class="hero-grid" aria-hidden="true"></div>
+      <canvas id="network" aria-hidden="true"></canvas>
+      <div class="container hero-inner">
+        <div class="hero-copy fade-in">
+          <div class="eyebrow mono"><span class="rule"></span>OPEN SCIENCE / MECHANISTIC INTERPRETABILITY</div>
+          <h1 id="heroTitle"><span class="soft">From learned</span><span class="soft">features to</span><span class="gradient">testable explanations.</span></h1>
+          <p class="hero-text">We build open methods and research infrastructure to understand how neural networks represent information—and how their internal components shape behavior.</p>
+          <div class="actions">
+            <a class="btn btn-primary" href="https://huggingface.co/spaces/OpenSAE/SAEBase" target="_blank" rel="noopener noreferrer">Explore SAEBase Research Lab <span class="btn-arrow">↗</span></a>
+            <a class="btn btn-outline" href="#methods">Explore research <span class="btn-arrow">↘</span></a>
+          </div>
+          <div class="hero-caption mono"><span>FOCUS <b>SAE FEATURES</b></span><span>METHOD <b>INTERVENTIONS</b></span><span>STANDARD <b>REPRODUCIBILITY</b></span></div>
+        </div>
+        <div class="hero-visual fade-in" aria-hidden="true">
+          <div class="scene-core" id="sceneCore">
+            <div class="orbital orbit1"></div><div class="orbital orbit2"></div><div class="orbital orbit3"></div>
+            <svg class="constellation" viewBox="0 0 340 340">
+              <g class="thin"><path d="M170 20L300 95L300 245L170 320L40 245L40 95Z"/><path d="M170 20L170 320M40 95L300 245M300 95L40 245"/></g>
+              <g class="stroke"><path d="M170 71L256 120L256 220L170 269L84 220L84 120Z"/><path d="M170 71L170 170L256 220M84 220L170 170L256 120M84 120L170 170L170 269"/></g>
+              <g class="vertex"><circle cx="170" cy="71" r="7"/><circle cx="256" cy="120" r="7"/><circle cx="256" cy="220" r="7"/><circle cx="170" cy="269" r="7"/><circle cx="84" cy="220" r="7"/><circle cx="84" cy="120" r="7"/></g>
+              <g class="vertex-glow"><circle cx="170" cy="71" r="2"/><circle cx="256" cy="120" r="2"/><circle cx="256" cy="220" r="2"/><circle cx="170" cy="269" r="2"/><circle cx="84" cy="220" r="2"/><circle cx="84" cy="120" r="2"/></g>
+            </svg>
+            <div class="core"><svg viewBox="0 0 40 40"><g fill="none" stroke="#b5ffe7" stroke-width="2.3" stroke-linecap="round"><path d="M20 3V12M34.7 11.5L27 16M34.7 28.5L27 24M20 37V28M5.3 28.5L13 24M5.3 11.5L13 16"/></g><circle fill="#b5ffe7" cx="20" cy="20" r="3"/></svg></div>
+          </div>
+          <div class="float-note note-top"><small class="mono">OBSERVATION</small><strong><span class="mini-dot"></span>FEATURE ACTIVITY</strong></div>
+          <div class="float-note note-bottom"><small class="mono">INTERVENTION</small><strong><span class="mini-dot"></span>BEHAVIORAL EFFECT</strong></div>
+          <div class="edge-id mono">OPENSAE // RESEARCH SYSTEM 01</div>
+        </div>
+      </div>
+    </section>
+
+    <div class="ticker" aria-label="Research themes"><div class="ticker-inner mono">
+      <span><b>◈</b> MECHANISTIC INTERPRETABILITY</span><span><b>◈</b> SPARSE AUTOENCODERS</span><span><b>◈</b> FEATURE INTERVENTIONS</span><span><b>◈</b> EVALUATION INFRASTRUCTURE</span><span><b>◈</b> REPRODUCIBLE RESEARCH</span>
+      <span aria-hidden="true"><b>◈</b> MECHANISTIC INTERPRETABILITY</span><span aria-hidden="true"><b>◈</b> SPARSE AUTOENCODERS</span><span aria-hidden="true"><b>◈</b> FEATURE INTERVENTIONS</span><span aria-hidden="true"><b>◈</b> EVALUATION INFRASTRUCTURE</span><span aria-hidden="true"><b>◈</b> REPRODUCIBLE RESEARCH</span>
+    </div></div>
+
+    <section class="section" id="mission">
+      <div class="container">
+        <div class="section-title-group reveal"><div><p class="eyeline mono">01 / OUR MISSION</p><h2>Make explanations<br /><span class="light">testable.</span></h2></div><p>We investigate learned representations, interactions among internal components, and the reliability of feature-level explanations. We build tools that let other researchers reproduce and extend these experiments.</p></div>
+        <div class="research-strip reveal" aria-label="SAEBase verified coverage">
+          <div class="stat-block"><span class="stat-corner mono">01</span><span class="stat-label mono">MODEL / SAE CONFIGURATIONS</span><strong><span class="counter" data-target="18">18</span></strong><p>Selected model–SAE pairs covered by public verification records.</p></div>
+          <div class="stat-block"><span class="stat-corner mono">02</span><span class="stat-label mono">EVALUATED MODEL / LAYER SITES</span><strong><span class="counter" data-target="48">48</span></strong><p>Per-layer compatibility, benchmark and reliability records.</p></div>
+          <div class="stat-block"><span class="stat-corner mono">03</span><span class="stat-label mono">MODEL PARAMETERS</span><strong>270<span class="unit">M</span>–9<span class="unit">B</span></strong><p>Range represented by the evaluated models and SAE configurations.</p></div>
+        </div>
+      </div>
+    </section>
+
+    <section class="section alt" id="infrastructure">
+      <div class="container">
+        <div class="section-title-group reveal"><div><p class="eyeline mono">02 / OPEN INFRASTRUCTURE</p><h2>Built for research.<br /><span class="light">Built to be reused.</span></h2></div><p>SAEBase connects activation capture, feature interventions and quantitative evaluation in one consistent research workflow.</p></div>
+        <div class="feature-intro">
+          <div class="reveal"><h3>SAEBase <span class="light">Research Lab</span></h3><p>An open-source foundation for studying SAE features and measuring how interventions on them affect downstream model behavior.</p><a class="link-arrow" href="https://huggingface.co/spaces/OpenSAE/SAEBase" target="_blank" rel="noopener noreferrer">Open interactive evaluation lab <span>↗</span></a></div>
+          <div class="research-terminal reveal" role="img" aria-label="Illustrative diagram of activation capture, feature intervention and evaluation stages. Not an empirical measurement.">
+            <div class="terminal-bar mono">PIPELINE PREVIEW<small>CONCEPTUAL / NOT MEASURED DATA</small></div>
+            <div class="terminal-body"><div class="terminal-label mono">REPRODUCIBLE RESEARCH WORKFLOW</div><div class="terminal-lines">
+              <div class="terminal-line"><em class="mono">MODEL / SAE</em><div class="meter"><span style="--level:79%"></span></div></div>
+              <div class="terminal-line"><em class="mono">ACTIVATIONS</em><div class="meter"><span style="--level:62%"></span></div></div>
+              <div class="terminal-line"><em class="mono">INTERVENTIONS</em><div class="meter"><span style="--level:88%"></span></div></div>
+              <div class="terminal-line"><em class="mono">AUDIT RECORDS</em><div class="meter"><span style="--level:100%"></span></div></div>
+            </div><div class="terminal-foot mono"><span>INPUT → FEATURES → EFFECTS → EVIDENCE</span><span>SAEBASE / v0.3.0</span></div></div>
+          </div>
+        </div>
+        <div class="capabilities">
+          <article class="cap-card reveal"><div class="cap-icon"><svg viewBox="0 0 24 24"><ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v13c0 1.6 3.5 3 8 3s8-1.4 8-3V5M4 11c0 1.6 3.5 3 8 3s8-1.4 8-3"/></svg></div><h3>Activation Store</h3><p>Capture and reuse activation data across feature dictionaries and research experiments.</p></article>
+          <article class="cap-card reveal"><div class="cap-icon"><svg viewBox="0 0 24 24"><circle cx="6" cy="6" r="2"/><circle cx="18" cy="6" r="2"/><circle cx="12" cy="18" r="2"/><path d="M7.7 7.3 10.7 16M16.3 7.3 13.3 16M8 6h8"/></svg></div><h3>Feature Interventions</h3><p>Remove, adjust and combine SAE features to inspect their downstream effects.</p></article>
+          <article class="cap-card reveal"><div class="cap-icon"><svg viewBox="0 0 24 24"><path d="M4 20V11M10 20V4M16 20v-8M22 20V7M2 20h22"/></svg></div><h3>Benchmarking</h3><p>Measure reconstruction and behavior changes through documented evaluation protocols.</p></article>
+          <article class="cap-card reveal"><div class="cap-icon"><svg viewBox="0 0 24 24"><path d="m12 3 8 4v5c0 5-3.2 8-8 10-4.8-2-8-5-8-10V7Z"/><path d="m8 12 2.5 2.5L16 9"/></svg></div><h3>Reliability</h3><p>Audit results, statistical comparisons and traceable source records.</p></article>
+        </div>
+      </div>
+    </section>
+
+    <section class="section" id="workflow">
+      <div class="container">
+        <div class="section-title-group reveal"><div><p class="eyeline mono">03 / RESEARCH WORKFLOW</p><h2>Observe. Intervene.<br /><span class="light">Verify.</span></h2></div><p>Explore how the research workflow is organized. This animated visualization illustrates operations; experimental values are available in the verified dataset.</p></div>
+        <div class="workflow">
+          <div class="stage-list reveal" role="group" aria-label="Research workflow stages">
+            <button class="stage-button" data-stage="observe" aria-pressed="true"><span class="stage-number mono">01</span><span><strong>Observe representations</strong><small>Capture and encode feature activity</small></span></button>
+            <button class="stage-button" data-stage="intervene" aria-pressed="false"><span class="stage-number mono">02</span><span><strong>Intervene on features</strong><small>Evaluate controlled feature edits</small></span></button>
+            <button class="stage-button" data-stage="verify" aria-pressed="false"><span class="stage-number mono">03</span><span><strong>Verify the evidence</strong><small>Benchmark and audit recorded effects</small></span></button>
+          </div>
+          <div class="workflow-screen reveal" aria-live="polite">
+            <div class="screen-heading"><small class="mono">RESEARCH PIPELINE / ACTIVE STAGE</small><span class="screen-badge mono" id="stagePill">CAPTURE</span></div>
+            <h3 id="stageTitle">Observe representations</h3>
+            <p id="stageDescription">Capture model activations at a selected layer. Encode them with an SAE and record the source identities needed for reproducibility.</p>
+            <div class="signal-bars" id="signalBars" aria-hidden="true"><i style="--h:43%"></i><i style="--h:66%"></i><i style="--h:51%"></i><i style="--h:86%"></i><i style="--h:72%"></i><i style="--h:58%"></i><i style="--h:93%"></i><i style="--h:50%"></i><i style="--h:66%"></i></div>
+            <div class="screen-foot mono">INTERACTIVE CONCEPTUAL ILLUSTRATION · NOT A MEASURED FEATURE PLOT</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="section alt" id="methods">
+      <div class="container">
+        <div class="section-title-group reveal"><div><p class="eyeline mono">04 / RESEARCH DIRECTIONS</p><h2>Understand the<br /><span class="light">mechanisms.</span></h2></div><p>Our open research explores how learned features interact, shift across inputs, and depend on controlled variables.</p></div>
+        <div class="method-grid">
+          <a class="method-card reveal" href="https://github.com/OpenSAE/SAE-Behavioral-Compositionality" target="_blank" rel="noopener noreferrer"><div class="method-meta mono">01 / FEATURE INTERACTIONS</div><h3>SAR<br />Behavioral Compositionality</h3><p>When do the combined effects of SAE features depart from the sum of their individual effects?</p><span class="method-link">Explore project & tutorial ↗</span></a>
+          <a class="method-card reveal" href="https://github.com/OpenSAE/Redistribution-Sensitivity-Score" target="_blank" rel="noopener noreferrer"><div class="method-meta mono">02 / CONTEXT SENSITIVITY</div><h3>RSS<br />Representation Redistribution</h3><p>How does sparse feature activity change when a request is presented in different ways?</p><span class="method-link">Explore project & tutorial ↗</span></a>
+          <a class="method-card reveal" href="https://github.com/OpenSAE/SAE-Input-Localization" target="_blank" rel="noopener noreferrer"><div class="method-meta mono">03 / INPUT DEPENDENCIES</div><h3>Input<br />Localization</h3><p>Which input variables are needed to explain a feature’s activation under controlled changes?</p><span class="method-link">Explore project & tutorial ↗</span></a>
+        </div>
+      </div>
+    </section>
+
+    <section class="section" id="evidence">
+      <div class="container">
+        <div class="evidence-panel reveal">
+          <div><p class="eyeline mono">05 / OPEN SCIENCE</p><h2>Evidence you<br />can <span class="light">inspect.</span></h2><p>Explore public model and SAE verification records, experiment configurations and source checks. Measurements reflect controlled benchmark execution and reliability audits—not a general ranking of SAE quality.</p><div class="actions"><a class="btn btn-primary" href="https://huggingface.co/datasets/OpenSAE/SAEBase-Evaluation" target="_blank" rel="noopener noreferrer">Browse evaluation dataset <span class="btn-arrow">↗</span></a></div></div>
+          <div class="evidence-list"><div class="evidence-item"><span class="evidence-dot"></span><span>Original model/SAE identities</span></div><div class="evidence-item"><span class="evidence-dot"></span><span>48 recorded layer-site evaluations</span></div><div class="evidence-item"><span class="evidence-dot"></span><span>Benchmark and reliability reports</span></div><div class="evidence-item"><span class="evidence-dot"></span><span>Versioned open-source software</span></div><div class="evidence-item"><span class="evidence-dot"></span><span>Checkable provenance and data links</span></div><div class="evidence-item"><span class="evidence-dot"></span><span>Third-party model weights stay upstream</span></div></div>
+        </div>
+      </div>
+    </section>
   </main>
+  <footer class="footer">
+    <div class="container"><div class="footer-inner"><div><a class="footer-name" href="#top">OpenSAE<span class="light">.</span></a><div class="footer-info">Open foundations for understanding neural networks.</div></div><div class="footer-links"><a href="https://github.com/OpenSAE" target="_blank" rel="noopener noreferrer">GitHub ↗</a><a href="https://huggingface.co/spaces/OpenSAE/SAEBase" target="_blank" rel="noopener noreferrer">SAEBase ↗</a><a href="https://huggingface.co/datasets/OpenSAE/SAEBase-Evaluation" target="_blank" rel="noopener noreferrer">Dataset ↗</a><a href="mailto:hma232@wisc.edu">Contact ↗</a></div></div><div class="copyright mono"><span>© 2026 OPENSAE · OPEN RESEARCH</span><span>DESIGNED FOR INSPECTION, REUSE & REPRODUCIBILITY</span></div></div>
+  </footer>
+  <script>
+  (() => {
+    'use strict';
+    const media = window.matchMedia('(prefers-reduced-motion: reduce)');
+    const reduced = () => media.matches;
+    const menu = document.getElementById('menuToggle');
+    const nav = document.getElementById('mainNav');
+    menu.addEventListener('click', () => {
+      const on = nav.dataset.open !== 'true';
+      nav.dataset.open = String(on);
+      menu.setAttribute('aria-expanded', String(on));
+      menu.textContent = on ? '✕' : '☰';
+    });
+    nav.querySelectorAll('a').forEach(link => link.addEventListener('click', () => {
+      nav.dataset.open = 'false'; menu.setAttribute('aria-expanded','false'); menu.textContent = '☰';
+    }));
+    const reveals = [...document.querySelectorAll('.reveal')];
+    if ('IntersectionObserver' in window && !reduced()) {
+      const observer = new IntersectionObserver(entries => entries.forEach(entry => {
+        if (!entry.isIntersecting) return;
+        entry.target.classList.add('visible'); observer.unobserve(entry.target);
+      }), {threshold: 0.12, rootMargin:'0px 0px -28px 0px'});
+      reveals.forEach(el => observer.observe(el));
+    } else reveals.forEach(el => el.classList.add('visible'));
+    const stageData = {
+      observe: {title:'Observe representations',description:'Capture model activations at a selected layer. Encode them with an SAE and record the source identities needed for reproducibility.', pill:'CAPTURE', bars:[43,66,51,86,72,58,93,50,66]},
+      intervene: {title:'Intervene on features',description:'Apply controlled edits to SAE features, then measure the resulting changes in downstream model behavior.', pill:'INTERVENE', bars:[69,21,78,47,95,29,54,81,41]},
+      verify: {title:'Verify the evidence',description:'Evaluate benchmark measurements with recorded protocols, source checks and reliability auditing.', pill:'AUDIT', bars:[76,81,73,91,79,86,74,82,94]},
+    };
+    const buttons = [...document.querySelectorAll('[data-stage]')];
+    const bars = [...document.querySelectorAll('#signalBars i')];
+    buttons.forEach(button => button.addEventListener('click', () => {
+      const stage = stageData[button.dataset.stage];
+      if (!stage) return;
+      buttons.forEach(el => el.setAttribute('aria-pressed',String(el===button)));
+      document.getElementById('stageTitle').textContent=stage.title;
+      document.getElementById('stageDescription').textContent=stage.description;
+      document.getElementById('stagePill').textContent=stage.pill;
+      bars.forEach((el,i) => el.style.setProperty('--h',stage.bars[i]+'%'));
+    }));
+    // A quiet, self-contained ambient point-cloud. No external libraries/network.
+    const canvas=document.getElementById('network');
+    const ctx=canvas.getContext('2d',{alpha:true});
+    if (ctx && !reduced()) {
+      let width=0,height=0,dpr=1,raf=0,points=[],pointer={x:-1000,y:-1000};
+      const rand = (min,max)=>min+Math.random()*(max-min);
+      function resize(){
+        const box=canvas.getBoundingClientRect();width=box.width;height=box.height;dpr=Math.min(window.devicePixelRatio||1,2);
+        canvas.width=Math.round(width*dpr);canvas.height=Math.round(height*dpr);ctx.setTransform(dpr,0,0,dpr,0,0);
+        const number=Math.max(18,Math.min(75,Math.floor(width*height/21000)));
+        points=Array.from({length:number},()=>({x:rand(width*.35,width*1.02),y:rand(0,height),vx:rand(-.11,.11),vy:rand(-.13,.13),r:rand(.65,1.6)}));
+      }
+      const observer='ResizeObserver' in window ? new ResizeObserver(resize) : null;
+      observer ? observer.observe(canvas) : window.addEventListener('resize',resize,{passive:true});
+      resize();
+      window.addEventListener('pointermove',event=>{pointer.x=event.clientX;pointer.y=event.clientY-document.querySelector('.hero').getBoundingClientRect().top},{passive:true});
+      window.addEventListener('pointerleave',()=>{pointer.x=-1000;pointer.y=-1000});
+      function frame(){
+        ctx.clearRect(0,0,width,height);
+        for (const p of points){
+          p.x+=p.vx;p.y+=p.vy;
+          if(p.x<width*.3||p.x>width+12)p.vx*=-1;
+          if(p.y<0||p.y>height)p.vy*=-1;
+          let dx=p.x-pointer.x,dy=p.y-pointer.y,dist=Math.hypot(dx,dy);
+          if (dist<125&&dist>2){p.x+=(dx/dist)*.48;p.y+=(dy/dist)*.48;}
+          ctx.fillStyle='rgba(138,240,215,.65)';ctx.beginPath();ctx.arc(p.x,p.y,p.r,0,Math.PI*2);ctx.fill();
+        }
+        for(let i=0;i<points.length;i++){
+          for(let j=i+1;j<points.length;j++){
+            const a=points[i],b=points[j],d=Math.hypot(a.x-b.x,a.y-b.y);
+            if(d<122){ctx.strokeStyle='rgba(110,219,207,'+(.19*(1-d/122)).toFixed(3)+')';ctx.lineWidth=.8;ctx.beginPath();ctx.moveTo(a.x,a.y);ctx.lineTo(b.x,b.y);ctx.stroke();}
+          }
+        }
+        raf=requestAnimationFrame(frame);
+      }
+      raf=requestAnimationFrame(frame);
+      document.addEventListener('visibilitychange',()=>{cancelAnimationFrame(raf);if(!document.hidden)frame();});
+    }
+  })();
+  </script>
 </body>
 </html>