Interactive research article

.gitattributes

@@ -0,0 +1,18 @@
+*.png filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.jpeg filter=lfs diff=lfs merge=lfs -text
+*.gif filter=lfs diff=lfs merge=lfs -text
+*.mp3 filter=lfs diff=lfs merge=lfs -text
+*.mp4 filter=lfs diff=lfs merge=lfs -text
+*.mov filter=lfs diff=lfs merge=lfs -text
+*.avi filter=lfs diff=lfs merge=lfs -text
+*.wav filter=lfs diff=lfs merge=lfs -text
+*.csv filter=lfs diff=lfs merge=lfs -text
+*.json filter=lfs diff=lfs merge=lfs -text
+*.pdf filter=lfs diff=lfs merge=lfs -text
+# the package and package lock should not be tracked
+package.json -filter -diff -merge text
+package-lock.json -filter -diff -merge text
+# Notion imported images should NOT be in LFS (needed for Docker build)
+app/src/content/assets/image/image_27877f1c*.png -filter -diff -merge text
+app/scripts/notion-importer/output/** -filter -diff -merge text

.gitignore

@@ -0,0 +1,41 @@
+# Python
+__pycache__
+*.py[cod]
+*.so
+.Python
+env/
+venv/
+*.egg-info/
+dist/
+build/
+*.egg
+.idea/
+.vscode/
+.astro/
+.claude/
+*.swp
+.DS_Store
+# Node
+node_modules/
+*.log
+*.env
+*.cache
+.notion-to-md
+
+app/scripts/latex-to-mdx/output/
+app/scripts/notion-importer/output/**/*
+app/src/content/embeds/typography/generated
+
+# PDF export
+app/public/*.pdf
+app/public/*.png
+app/public/*.jpg
+app/public/data/**/*
+
+.astro/
+
+# Template sync temporary directories
+.template-sync/
+.temp-*/
+.backup-*/
+

Dockerfile

@@ -0,0 +1,35 @@
+# Stage 1: Build Astro static site
+FROM node:18-slim AS build
+
+WORKDIR /app
+
+COPY app/package*.json ./
+
+RUN npm install
+
+COPY app/ .
+
+# Ensure public/data is a real directory (not symlink)
+RUN set -e; \
+    rm -rf public/data; \
+    mkdir -p public/data; \
+    cp -a src/content/assets/data/. public/data/
+
+RUN npm run build
+
+# Stage 2: Serve with nginx
+FROM nginx:alpine
+
+COPY --from=build /app/dist /app/dist
+
+COPY nginx.conf /etc/nginx/nginx.conf
+
+COPY entrypoint.sh /entrypoint.sh
+RUN chmod +x /entrypoint.sh
+
+RUN mkdir -p /var/cache/nginx /var/run /var/log/nginx /var/lib/nginx/body /tmp && \
+    chmod -R 777 /var/cache/nginx /var/run /var/log/nginx /var/lib/nginx /tmp /app
+
+EXPOSE 7860
+
+ENTRYPOINT ["/entrypoint.sh"]

LICENSE

@@ -0,0 +1,33 @@
+Creative Commons Attribution 4.0 International License
+
+Copyright (c) 2024 Thibaud Frere
+
+This work is licensed under the Creative Commons Attribution 4.0 International License.
+To view a copy of this license, visit http://creativecommons.org/licenses/by/4.0/
+or send a letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA.
+
+You are free to:
+
+    Share — copy and redistribute the material in any medium or format
+    Adapt — remix, transform, and build upon the material for any purpose, even commercially.
+
+The licensor cannot revoke these freedoms as long as you follow the license terms.
+
+Under the following terms:
+
+    Attribution — You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.
+
+    No additional restrictions — You may not apply legal terms or technological measures that legally restrict others from doing anything the license permits.
+
+Notices:
+
+    You do not have to comply with the license for elements of the material in the public domain or where your use is permitted by an applicable exception or limitation.
+
+    No warranties are given. The license may not give you all of the permissions necessary for your intended use. For example, other rights such as publicity, privacy, or moral rights may limit how you use the material.
+
+---
+
+For the source code and technical implementation:
+- The source code is available at: https://huggingface.co/spaces/tfrere/research-article-template
+- Third-party figures and assets are excluded from this license and marked in their captions
+- Dependencies and third-party libraries maintain their respective licenses

README.md

@@ -0,0 +1,122 @@
+---
+title: 'Control Reinforcement Learning'
+short_desc: 'Interpretable Token-Level Steering of LLMs via SAE Features'
+emoji: 🎛️
+colorFrom: indigo
+colorTo: purple
+sdk: docker
+pinned: false
+header: mini
+app_port: 7860
+tags:
+  - research-article-template
+  - research paper
+  - scientific paper
+  - data visualization
+thumbnail: https://huggingface.co/spaces/tfrere/research-paper-template/thumb.jpg
+---
+<div align="center">
+
+# Research Article Template
+
+[![License: CC BY 4.0](https://img.shields.io/badge/License-CC%20BY%204.0-lightgrey.svg)](https://creativecommons.org/licenses/by/4.0/)
+[![Node.js Version](https://img.shields.io/badge/node-%3E%3D20.0.0-brightgreen.svg)](https://nodejs.org/)
+[![Astro](https://img.shields.io/badge/Astro-4.10.0-orange.svg)](https://astro.build/)
+[![Hugging Face Spaces](https://img.shields.io/badge/%F0%9F%A4%97%20Hugging%20Face-Spaces-blue)](https://huggingface.co/spaces/tfrere/research-article-template)
+
+
+**A modern, interactive template for scientific writing** that brings papers to life with web-native features. The web offers what static PDFs can't: **interactive diagrams**, **progressive notation**, and **exploratory views** that show how ideas behave. This template treats interactive artifacts—figures, math, code, and inspectable experiments—as **first-class** alongside prose, helping readers **build intuition** instead of skimming results—all with **minimal setup** and no web knowledge required.
+ 
+**[Try the live demo & documentation →](https://huggingface.co/spaces/tfrere/research-article-template)**
+
+</div>
+
+## 🚀 Quick Start
+
+### Option 1: Duplicate on Hugging Face (Recommended)
+
+1. Visit **[🤗 Research Article Template](https://huggingface.co/spaces/tfrere/research-article-template)**
+2. Click **"Duplicate this Space"**
+3. Clone your new repository:
+   ```bash
+   git clone git@hf.co:spaces/<your-username>/<your-space>
+   cd <your-space>
+   ```
+
+### Option 2: Clone Directly
+
+```bash
+git clone https://github.com/tfrere/research-article-template.git
+cd research-article-template
+```
+
+### Installation
+
+```bash
+# Install Node.js 20+ (use nvm for version management)
+nvm install 20
+nvm use 20
+
+# Install Git LFS and pull assets
+git lfs install
+git lfs pull
+
+# Install dependencies
+cd app
+npm install
+
+# Start development server
+npm run dev
+```
+
+Visit `http://localhost:4321` to see your site!
+
+## 🎯 Who This Is For
+
+- **Scientists** writing modern, web-native research papers
+- **Educators** creating interactive, explorable lessons
+- **Researchers** who want to focus on ideas, not infrastructure
+- **Anyone** who values clear, engaging technical communication
+
+## 🌟 Inspired by Distill
+
+This template carries forward the spirit of [Distill](https://distill.pub/) (2016–2021), pushing interactive scientific writing even further with:
+- Accessible, high-quality explanations
+- Reproducible, production-ready demos
+- Modern web technologies and best practices
+
+## 🤝 Contributing
+
+We welcome contributions! Please see our [Contributing Guidelines](CONTRIBUTING.md) for details.
+
+### Ways to Contribute
+
+- **Report bugs** - Open an issue with detailed information
+- **Suggest features** - Share ideas for improvements
+- **Improve documentation** - Help others get started
+- **Submit code** - Fix bugs or add features
+- **Join discussions** - Share feedback and ideas
+
+## 📄 License
+
+This project is licensed under the [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0/).
+
+- **Diagrams and text**: CC-BY 4.0
+- **Source code**: Available on [Hugging Face](https://huggingface.co/spaces/tfrere/research-article-template)
+- **Third-party figures**: Excluded and marked in captions
+
+## 🙏 Acknowledgments
+
+- Inspired by [Distill](https://distill.pub/) and the interactive scientific writing movement
+- Built with [Astro](https://astro.build/), [MDX](https://mdxjs.com/), and modern web technologies
+- Community feedback and contributions from researchers worldwide
+
+## 📞 Support
+
+- **[Community Discussions](https://huggingface.co/spaces/tfrere/research-article-template/discussions)** - Ask questions and share ideas
+- **[Report Issues](https://huggingface.co/spaces/tfrere/research-article-template/discussions?status=open&type=issue)** - Bug reports and feature requests
+- **Contact**: [@tfrere](https://huggingface.co/tfrere) on Hugging Face
+
+---
+
+**Made with ❤️ for the scientific community**

app/astro.config.mjs

@@ -0,0 +1,78 @@
+import { defineConfig } from 'astro/config';
+import mdx from '@astrojs/mdx';
+import svelte from '@astrojs/svelte';
+import compressor from 'astro-compressor';
+import remarkMath from 'remark-math';
+import rehypeKatex from 'rehype-katex';
+import remarkFootnotes from 'remark-footnotes';
+import rehypeSlug from 'rehype-slug';
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+import rehypeCodeCopy from './plugins/rehype/code-copy.mjs';
+import rehypeCitation from 'rehype-citation';
+import rehypeReferencesAndFootnotes from './plugins/rehype/post-citation.mjs';
+import remarkIgnoreCitationsInCode from './plugins/remark/ignore-citations-in-code.mjs';
+import remarkUnwrapCitationLinks from './plugins/remark/unwrap-citation-links.mjs';
+import remarkDirective from 'remark-directive';
+import remarkOutputContainer from './plugins/remark/output-container.mjs';
+import rehypeRestoreAtInCode from './plugins/rehype/restore-at-in-code.mjs';
+import rehypeWrapTables from './plugins/rehype/wrap-tables.mjs';
+import rehypeWrapOutput from './plugins/rehype/wrap-outputs.mjs';
+// Built-in Shiki (dual themes) — no rehype-pretty-code
+
+// Plugins moved to app/plugins/*
+
+export default defineConfig({
+  output: 'static',
+  integrations: [
+    mdx(),
+    svelte(),
+    // Precompress output with Gzip only (Brotli disabled due to server module mismatch)
+    compressor({ brotli: false, gzip: true })
+  ],
+  devToolbar: {
+    enabled: false
+  },
+  markdown: {
+    shikiConfig: {
+      themes: {
+        light: 'github-light',
+        dark: 'github-dark'
+      },
+      defaultColor: false,
+      wrap: false,
+      langAlias: {
+        // Map MDX fences to TSX for better JSX tokenization
+        mdx: 'tsx'
+      }
+    },
+    remarkPlugins: [
+      remarkUnwrapCitationLinks,
+      remarkIgnoreCitationsInCode,
+      remarkMath,
+      [remarkFootnotes, { inlineNotes: true }],
+      remarkDirective,
+      remarkOutputContainer
+    ],
+    rehypePlugins: [
+      rehypeSlug,
+      [rehypeAutolinkHeadings, { behavior: 'wrap' }],
+      [rehypeKatex, {
+        trust: true,
+      }],
+      [rehypeCitation, {
+        bibliography: 'src/content/bibliography.bib',
+        linkCitations: true,
+        csl: "apa",
+        noCite: false,
+        suppressBibliography: false,
+      }],
+      rehypeReferencesAndFootnotes,
+      rehypeRestoreAtInCode,
+      rehypeCodeCopy,
+      rehypeWrapOutput,
+      rehypeWrapTables
+    ]
+  }
+});
+
+

app/plugins/rehype/code-copy.mjs

@@ -0,0 +1,94 @@
+// Minimal rehype plugin to wrap code blocks with a copy button
+// Exported as a standalone module to keep astro.config.mjs lean
+export default function rehypeCodeCopy() {
+  return (tree) => {
+    // Walk the tree; lightweight visitor to find <pre><code>
+    const visit = (node, parent) => {
+      if (!node || typeof node !== 'object') return;
+      const children = Array.isArray(node.children) ? node.children : [];
+      if (node.tagName === 'pre' && children.some(c => c.tagName === 'code')) {
+        // Find code child
+        const code = children.find(c => c.tagName === 'code');
+        // Determine if single-line block: prefer Shiki lines, then text content
+        const countLinesFromShiki = () => {
+          const isLineEl = (el) => el && el.type === 'element' && el.tagName === 'span' && Array.isArray(el.properties?.className) && el.properties.className.includes('line');
+          const hasNonWhitespaceText = (node) => {
+            if (!node) return false;
+            if (node.type === 'text') return /\S/.test(String(node.value || ''));
+            const kids = Array.isArray(node.children) ? node.children : [];
+            return kids.some(hasNonWhitespaceText);
+          };
+          const collectLines = (node, acc) => {
+            if (!node || typeof node !== 'object') return;
+            if (isLineEl(node)) acc.push(node);
+            const kids = Array.isArray(node.children) ? node.children : [];
+            kids.forEach((k) => collectLines(k, acc));
+          };
+          const lines = [];
+          collectLines(code, lines);
+          const nonEmpty = lines.filter((ln) => hasNonWhitespaceText(ln)).length;
+          return nonEmpty || 0;
+        };
+        const countLinesFromText = () => {
+          // Parse raw text content of the <code> node including nested spans
+          const extractText = (node) => {
+            if (!node) return '';
+            if (node.type === 'text') return String(node.value || '');
+            const kids = Array.isArray(node.children) ? node.children : [];
+            return kids.map(extractText).join('');
+          };
+          const raw = extractText(code);
+          if (!raw || !/\S/.test(raw)) return 0;
+          return raw.split('\n').filter(line => /\S/.test(line)).length;
+        };
+        const lines = countLinesFromShiki() || countLinesFromText();
+        const isSingleLine = lines <= 1;
+        // Also treat code blocks shorter than a threshold as single-line (defensive)
+        if (!isSingleLine) {
+          const approxChars = (() => {
+            const extract = (n) => Array.isArray(n?.children) ? n.children.map(extract).join('') : (n?.type === 'text' ? String(n.value||'') : '');
+            return extract(code).length;
+          })();
+          if (approxChars < 6) {
+            node.__forceSingle = true;
+          }
+        }
+        // Replace <pre> with wrapper div.code-card containing button + pre
+        const wrapper = {
+          type: 'element',
+          tagName: 'div',
+          properties: { className: ['code-card'].concat((isSingleLine || node.__forceSingle) ? ['no-copy'] : []) },
+          children: (isSingleLine || node.__forceSingle) ? [ node ] : [
+            {
+              type: 'element',
+              tagName: 'button',
+              properties: { className: ['code-copy', 'button--ghost'], type: 'button', 'aria-label': 'Copy code' },
+              children: [
+                {
+                  type: 'element',
+                  tagName: 'svg',
+                  properties: { viewBox: '0 0 24 24', 'aria-hidden': 'true', focusable: 'false' },
+                  children: [
+                    { type: 'element', tagName: 'path', properties: { d: 'M16 1H4c-1.1 0-2 .9-2 2v12h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z' }, children: [] }
+                  ]
+                }
+              ]
+            },
+            node
+          ]
+        };
+        if (parent && Array.isArray(parent.children)) {
+          const idx = parent.children.indexOf(node);
+          if (idx !== -1) parent.children[idx] = wrapper;
+        }
+        return; // don't visit nested
+      }
+      children.forEach((c) => visit(c, node));
+    };
+    visit(tree, null);
+  };
+}
+
+
+
+

app/plugins/rehype/post-citation.mjs

@@ -0,0 +1,449 @@
+// rehype plugin to post-process citations and footnotes at build-time
+// - Normalizes the bibliography into <ol class="references"> with <li id="...">
+// - Linkifies DOI/URL occurrences inside references
+// - Appends back-reference links (↩ back: 1, 2, ...) from each reference to in-text citation anchors
+// - Cleans up footnotes block (.footnotes)
+
+export default function rehypeReferencesAndFootnotes() {
+  return (tree) => {
+    const isElement = (n) => n && typeof n === 'object' && n.type === 'element';
+    const getChildren = (n) => (Array.isArray(n?.children) ? n.children : []);
+
+    const walk = (node, parent, fn) => {
+      if (!node || typeof node !== 'object') return;
+      fn && fn(node, parent);
+      const kids = getChildren(node);
+      for (const child of kids) walk(child, node, fn);
+    };
+
+    const ensureArray = (v) => (Array.isArray(v) ? v : v != null ? [v] : []);
+
+    const hasClass = (el, name) => {
+      const cn = ensureArray(el?.properties?.className).map(String);
+      return cn.includes(name);
+    };
+
+    const setAttr = (el, key, val) => {
+      el.properties = el.properties || {};
+      if (val == null) delete el.properties[key];
+      else el.properties[key] = val;
+    };
+
+    const getAttr = (el, key) => (el?.properties ? el.properties[key] : undefined);
+
+    // Shared helpers for backlinks + backrefs block
+    const collectBacklinksForIdSet = (idSet, anchorPrefix) => {
+      const idToBacklinks = new Map();
+      const idToAnchorNodes = new Map();
+      if (!idSet || idSet.size === 0) return { idToBacklinks, idToAnchorNodes };
+      walk(tree, null, (node) => {
+        if (!isElement(node) || node.tagName !== 'a') return;
+        const href = String(getAttr(node, 'href') || '');
+        if (!href.startsWith('#')) return;
+        const id = href.slice(1);
+        if (!idSet.has(id)) return;
+        // Ensure a stable id
+        let anchorId = String(getAttr(node, 'id') || '');
+        if (!anchorId) {
+          const list = idToBacklinks.get(id) || [];
+          anchorId = `${anchorPrefix}-${id}-${list.length + 1}`;
+          setAttr(node, 'id', anchorId);
+        }
+        const list = idToBacklinks.get(id) || [];
+        list.push(anchorId);
+        idToBacklinks.set(id, list);
+        const nodes = idToAnchorNodes.get(id) || [];
+        nodes.push(node);
+        idToAnchorNodes.set(id, nodes);
+      });
+      return { idToBacklinks, idToAnchorNodes };
+    };
+
+    const createBackIcon = () => ({
+      type: 'element',
+      tagName: 'svg',
+      properties: {
+        className: ['back-icon'],
+        width: 12,
+        height: 12,
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        stroke: 'currentColor',
+        'stroke-width': 2,
+        'stroke-linecap': 'round',
+        'stroke-linejoin': 'round',
+        'aria-hidden': 'true',
+        focusable: 'false'
+      },
+      children: [
+        { type: 'element', tagName: 'line', properties: { x1: 12, y1: 19, x2: 12, y2: 5 }, children: [] },
+        { type: 'element', tagName: 'polyline', properties: { points: '5 12 12 5 19 12' }, children: [] }
+      ]
+    });
+
+    const appendBackrefsBlock = (listElement, idToBacklinks, ariaLabel) => {
+      if (!listElement || !idToBacklinks || idToBacklinks.size === 0) return;
+      for (const li of getChildren(listElement)) {
+        if (!isElement(li) || li.tagName !== 'li') continue;
+        const id = String(getAttr(li, 'id') || '');
+        if (!id) continue;
+        const keys = idToBacklinks.get(id);
+        if (!keys || !keys.length) continue;
+        // Remove pre-existing .backrefs in this li to avoid duplicates
+        li.children = getChildren(li).filter((n) => !(isElement(n) && n.tagName === 'small' && hasClass(n, 'backrefs')));
+        const small = {
+          type: 'element',
+          tagName: 'small',
+          properties: { className: ['backrefs'] },
+          children: []
+        };
+        if (keys.length === 1) {
+          // Single backlink: just the icon wrapped in the anchor
+          const a = {
+            type: 'element',
+            tagName: 'a',
+            properties: { href: `#${keys[0]}`, 'aria-label': ariaLabel },
+            children: [createBackIcon()]
+          };
+          small.children.push(a);
+        } else {
+          // Multiple backlinks: icon + label + numbered links
+          small.children.push(createBackIcon());
+          small.children.push({ type: 'text', value: ' back: ' });
+          keys.forEach((backId, idx) => {
+            small.children.push({
+              type: 'element',
+              tagName: 'a',
+              properties: { href: `#${backId}`, 'aria-label': ariaLabel },
+              children: [{ type: 'text', value: String(idx + 1) }]
+            });
+            if (idx < keys.length - 1) small.children.push({ type: 'text', value: ', ' });
+          });
+        }
+        li.children.push(small);
+      }
+    };
+    // Remove default back-reference anchors generated by remark-footnotes inside a footnote item
+    const getTextContent = (el) => {
+      if (!el) return '';
+      const stack = [el];
+      let out = '';
+      while (stack.length) {
+        const cur = stack.pop();
+        if (!cur) continue;
+        if (cur.type === 'text') out += String(cur.value || '');
+        const kids = getChildren(cur);
+        for (let i = kids.length - 1; i >= 0; i--) stack.push(kids[i]);
+      }
+      return out;
+    };
+
+    const removeFootnoteBackrefAnchors = (el) => {
+      if (!isElement(el)) return;
+      const kids = getChildren(el);
+      for (let i = kids.length - 1; i >= 0; i--) {
+        const child = kids[i];
+        if (isElement(child)) {
+          if (
+            child.tagName === 'a' && (
+              getAttr(child, 'data-footnote-backref') != null ||
+              hasClass(child, 'footnote-backref') ||
+              String(getAttr(child, 'role') || '').toLowerCase() === 'doc-backlink' ||
+              String(getAttr(child, 'aria-label') || '').toLowerCase().includes('back to content') ||
+              String(getAttr(child, 'href') || '').startsWith('#fnref') ||
+              // Fallback: text-based detection like "↩" or "↩2"
+              /^\s*↩\s*\d*\s*$/u.test(getTextContent(child))
+            )
+          ) {
+            // Remove the anchor
+            el.children.splice(i, 1);
+            continue;
+          }
+          // Recurse into element
+          removeFootnoteBackrefAnchors(child);
+          // If a wrapper like <sup> or <span> became empty, remove it
+          const becameKids = getChildren(child);
+          if ((child.tagName === 'sup' || child.tagName === 'span') && (!becameKids || becameKids.length === 0)) {
+            el.children.splice(i, 1);
+          }
+        }
+      }
+    };
+
+
+    const normDoiHref = (href) => {
+      if (!href) return href;
+      const DUP = /https?:\/\/(?:dx\.)?doi\.org\/(?:https?:\/\/(?:dx\.)?doi\.org\/)+/gi;
+      const ONE = /https?:\/\/(?:dx\.)?doi\.org\/(10\.[^\s<>"']+)/i;
+      href = String(href).replace(DUP, 'https://doi.org/');
+      const m = href.match(ONE);
+      return m ? `https://doi.org/${m[1]}` : href;
+    };
+
+    const DOI_BARE = /\b10\.[0-9]{4,9}\/[\-._;()\/:A-Z0-9]+\b/gi;
+    const URL_GEN = /\bhttps?:\/\/[^\s<>()"']+/gi;
+
+    const linkifyTextNode = (textNode) => {
+      const text = String(textNode.value || '');
+      let last = 0;
+      const parts = [];
+      const pushText = (s) => { if (s) parts.push({ type: 'text', value: s }); };
+
+      const matches = [];
+      // Collect URL matches
+      let m;
+      URL_GEN.lastIndex = 0;
+      while ((m = URL_GEN.exec(text)) !== null) {
+        matches.push({ type: 'url', start: m.index, end: URL_GEN.lastIndex, raw: m[0] });
+      }
+      // Collect DOI matches
+      DOI_BARE.lastIndex = 0;
+      while ((m = DOI_BARE.exec(text)) !== null) {
+        matches.push({ type: 'doi', start: m.index, end: DOI_BARE.lastIndex, raw: m[0] });
+      }
+      matches.sort((a, b) => a.start - b.start);
+
+      for (const match of matches) {
+        if (match.start < last) continue; // overlapping
+        pushText(text.slice(last, match.start));
+        if (match.type === 'url') {
+          const href = normDoiHref(match.raw);
+          const doiOne = href.match(/https?:\/\/(?:dx\.)?doi\.org\/(10\.[^\s<>"']+)/i);
+          const a = {
+            type: 'element',
+            tagName: 'a',
+            properties: { href, target: '_blank', rel: 'noopener noreferrer' },
+            children: [{ type: 'text', value: doiOne ? doiOne[1] : href }]
+          };
+          parts.push(a);
+        } else {
+          const href = `https://doi.org/${match.raw}`;
+          const a = {
+            type: 'element',
+            tagName: 'a',
+            properties: { href, target: '_blank', rel: 'noopener noreferrer' },
+            children: [{ type: 'text', value: match.raw }]
+          };
+          parts.push(a);
+        }
+        last = match.end;
+      }
+
+      pushText(text.slice(last));
+      return parts;
+    };
+
+    const linkifyInElement = (el) => {
+      const kids = getChildren(el);
+      for (let i = 0; i < kids.length; i++) {
+        const child = kids[i];
+        if (!child) continue;
+        if (child.type === 'text') {
+          const replacement = linkifyTextNode(child);
+          if (replacement.length === 1 && replacement[0].type === 'text') continue;
+          // Replace the single text node with multiple nodes
+          el.children.splice(i, 1, ...replacement);
+          i += replacement.length - 1;
+        } else if (isElement(child)) {
+          if (child.tagName === 'a') {
+            const href = normDoiHref(getAttr(child, 'href'));
+            setAttr(child, 'href', href);
+            const m = String(href || '').match(/https?:\/\/(?:dx\.)?doi\.org\/(10\.[^\s<>"']+)/i);
+            if (m && (!child.children || child.children.length === 0)) {
+              child.children = [{ type: 'text', value: m[1] }];
+            }
+            continue;
+          }
+          linkifyInElement(child);
+        }
+      }
+      // Deduplicate adjacent identical anchors
+      for (let i = 1; i < el.children.length; i++) {
+        const prev = el.children[i - 1];
+        const curr = el.children[i];
+        if (isElement(prev) && isElement(curr) && prev.tagName === 'a' && curr.tagName === 'a') {
+          const key = `${getAttr(prev, 'href') || ''}|${(prev.children?.[0]?.value) || ''}`;
+          const key2 = `${getAttr(curr, 'href') || ''}|${(curr.children?.[0]?.value) || ''}`;
+          if (key === key2) {
+            el.children.splice(i, 1);
+            i--;
+          }
+        }
+      }
+    };
+
+    // Find references container and normalize its list
+    const findReferencesRoot = () => {
+      let found = null;
+      walk(tree, null, (node) => {
+        if (found) return;
+        if (!isElement(node)) return;
+
+        // Ignore headers (h1, h2, h3, h4, h5, h6) - we only want container elements
+        if (/^h[1-6]$/i.test(node.tagName)) return;
+
+        const id = getAttr(node, 'id');
+        if (id === 'references' || id === 'refs' || hasClass(node, 'references') || hasClass(node, 'bibliography')) {
+          found = node;
+        }
+      });
+      return found;
+    };
+
+    const toOrderedList = (container) => {
+      // If there is already an <ol>, use it; otherwise convert common structures
+      let ol = getChildren(container).find((c) => isElement(c) && c.tagName === 'ol');
+      if (!ol) {
+        ol = { type: 'element', tagName: 'ol', properties: { className: ['references'] }, children: [] };
+        const candidates = getChildren(container).filter((n) => isElement(n));
+        if (candidates.length) {
+          for (const node of candidates) {
+            if (hasClass(node, 'csl-entry') || node.tagName === 'li' || node.tagName === 'p' || node.tagName === 'div') {
+              const li = { type: 'element', tagName: 'li', properties: {}, children: getChildren(node) };
+              if (getAttr(node, 'id')) setAttr(li, 'id', getAttr(node, 'id'));
+              ol.children.push(li);
+            }
+          }
+        }
+        // Replace container children by the new ol
+        container.children = [ol];
+      }
+      if (!hasClass(ol, 'references')) {
+        const cls = ensureArray(ol.properties?.className).map(String);
+        if (!cls.includes('references')) cls.push('references');
+        ol.properties = ol.properties || {};
+        ol.properties.className = cls;
+      }
+      return ol;
+    };
+
+    const refsRoot = findReferencesRoot();
+    let refsOl = null;
+    const refIdSet = new Set();
+    const refIdToExternalHref = new Map();
+
+    if (refsRoot) {
+      // Add a unique id to avoid collisions with user-created headers
+      setAttr(refsRoot, 'id', 'bibliography-references-list');
+      setAttr(refsRoot, 'data-bibliography-block', 'true');
+
+      refsOl = toOrderedList(refsRoot);
+      // Collect item ids and linkify their content
+      for (const li of getChildren(refsOl)) {
+        if (!isElement(li) || li.tagName !== 'li') continue;
+        if (!getAttr(li, 'id')) {
+          // Try to find a nested element with id to promote
+          const nestedWithId = getChildren(li).find((n) => isElement(n) && getAttr(n, 'id'));
+          if (nestedWithId) setAttr(li, 'id', getAttr(nestedWithId, 'id'));
+        }
+        const id = getAttr(li, 'id');
+        if (id) refIdSet.add(String(id));
+        linkifyInElement(li);
+        // Record first external link href (e.g., DOI/URL) if present
+        if (id) {
+          let externalHref = null;
+          const stack = [li];
+          while (stack.length) {
+            const cur = stack.pop();
+            const kids = getChildren(cur);
+            for (const k of kids) {
+              if (isElement(k) && k.tagName === 'a') {
+                const href = String(getAttr(k, 'href') || '');
+                if (/^https?:\/\//i.test(href)) {
+                  externalHref = href;
+                  break;
+                }
+              }
+              if (isElement(k)) stack.push(k);
+            }
+            if (externalHref) break;
+          }
+          if (externalHref) refIdToExternalHref.set(String(id), externalHref);
+        }
+      }
+      setAttr(refsRoot, 'data-built-refs', '1');
+    }
+
+    // Collect in-text anchors that point to references ids
+    const { idToBacklinks: refIdToBacklinks, idToAnchorNodes: refIdToCitationAnchors } = collectBacklinksForIdSet(refIdSet, 'refctx');
+
+    // Append backlinks into references list items
+    appendBackrefsBlock(refsOl, refIdToBacklinks, 'Back to citation');
+
+    // Rewrite in-text citation anchors to external link when available
+    if (refIdToCitationAnchors.size > 0) {
+      for (const [id, anchors] of refIdToCitationAnchors.entries()) {
+        const ext = refIdToExternalHref.get(id);
+        if (!ext) continue;
+        for (const a of anchors) {
+          setAttr(a, 'data-ref-id', id);
+          setAttr(a, 'href', ext);
+          const existingTarget = getAttr(a, 'target');
+          if (!existingTarget) setAttr(a, 'target', '_blank');
+          const rel = String(getAttr(a, 'rel') || '');
+          const relSet = new Set(rel ? rel.split(/\s+/) : []);
+          relSet.add('noopener');
+          relSet.add('noreferrer');
+          setAttr(a, 'rel', Array.from(relSet).join(' '));
+        }
+      }
+    }
+
+    // Footnotes cleanup + backrefs harmonized with references
+    const cleanupFootnotes = () => {
+      let root = null;
+      walk(tree, null, (node) => {
+        if (!isElement(node)) return;
+        if (hasClass(node, 'footnotes')) root = node;
+      });
+      if (!root) return { root: null, ol: null, idSet: new Set() };
+      // Remove <hr> direct children
+      root.children = getChildren(root).filter((n) => !(isElement(n) && n.tagName === 'hr'));
+      // Ensure an <ol>
+      let ol = getChildren(root).find((c) => isElement(c) && c.tagName === 'ol');
+      if (!ol) {
+        ol = { type: 'element', tagName: 'ol', properties: {}, children: [] };
+        const items = getChildren(root).filter((n) => isElement(n) && (n.tagName === 'li' || hasClass(n, 'footnote') || n.tagName === 'p' || n.tagName === 'div'));
+        if (items.length) {
+          for (const it of items) {
+            const li = { type: 'element', tagName: 'li', properties: {}, children: getChildren(it) };
+            // Promote nested id if present (e.g., <p id="fn-1">)
+            const nestedWithId = getChildren(it).find((n) => isElement(n) && getAttr(n, 'id'));
+            if (nestedWithId) setAttr(li, 'id', getAttr(nestedWithId, 'id'));
+            ol.children.push(li);
+          }
+        }
+        root.children = [ol];
+      }
+      // For existing structures, try to promote ids from children when missing
+      for (const li of getChildren(ol)) {
+        if (!isElement(li) || li.tagName !== 'li') continue;
+        if (!getAttr(li, 'id')) {
+          const nestedWithId = getChildren(li).find((n) => isElement(n) && getAttr(n, 'id'));
+          if (nestedWithId) setAttr(li, 'id', getAttr(nestedWithId, 'id'));
+        }
+        // Remove default footnote backrefs anywhere inside (to avoid duplication)
+        removeFootnoteBackrefAnchors(li);
+      }
+      setAttr(root, 'data-built-footnotes', '1');
+      // Collect id set
+      const idSet = new Set();
+      for (const li of getChildren(ol)) {
+        if (!isElement(li) || li.tagName !== 'li') continue;
+        const id = getAttr(li, 'id');
+        if (id) idSet.add(String(id));
+      }
+      return { root, ol, idSet };
+    };
+
+    const { root: footRoot, ol: footOl, idSet: footIdSet } = cleanupFootnotes();
+
+    // Collect in-text anchors pointing to footnotes
+    const { idToBacklinks: footIdToBacklinks } = collectBacklinksForIdSet(footIdSet, 'footctx');
+
+    // Append backlinks into footnote list items (identical pattern to references)
+    appendBackrefsBlock(footOl, footIdToBacklinks, 'Back to footnote call');
+  };
+}
+
+

app/plugins/rehype/restore-at-in-code.mjs

@@ -0,0 +1,22 @@
+// Rehype plugin to restore '@' inside code nodes after rehype-citation ran
+export default function rehypeRestoreAtInCode() {
+  return (tree) => {
+    const restoreInNode = (node) => {
+      if (!node || typeof node !== 'object') return;
+      const isText = node.type === 'text';
+      if (isText && typeof node.value === 'string' && node.value.includes('__AT_SENTINEL__')) {
+        node.value = node.value.replace(/__AT_SENTINEL__/g, '@');
+      }
+      const isCodeEl = node.type === 'element' && node.tagName === 'code';
+      const children = Array.isArray(node.children) ? node.children : [];
+      if (isCodeEl && children.length) {
+        children.forEach(restoreInNode);
+        return;
+      }
+      children.forEach(restoreInNode);
+    };
+    restoreInNode(tree);
+  };
+}
+
+

app/plugins/rehype/wrap-outputs.mjs

@@ -0,0 +1,38 @@
+// Wrap plain-text content inside <section class="code-outputs"> into a <pre>
+export default function rehypeWrapOutput() {
+  return (tree) => {
+    const isWhitespace = (value) => typeof value === 'string' && !/\S/.test(value);
+    const extractText = (node) => {
+      if (!node) return '';
+      if (node.type === 'text') return String(node.value || '');
+      const kids = Array.isArray(node.children) ? node.children : [];
+      return kids.map(extractText).join('');
+    };
+    const visit = (node) => {
+      if (!node || typeof node !== 'object') return;
+      const children = Array.isArray(node.children) ? node.children : [];
+      if (node.type === 'element' && node.tagName === 'section') {
+        const className = node.properties?.className || [];
+        const classes = Array.isArray(className) ? className : [className].filter(Boolean);
+        if (classes.includes('code-output')) {
+          const meaningful = children.filter((c) => !(c.type === 'text' && isWhitespace(c.value)));
+          if (meaningful.length === 1) {
+            const only = meaningful[0];
+            const isPlainParagraph = only.type === 'element' && only.tagName === 'p' && (only.children || []).every((c) => c.type === 'text');
+            const isPlainText = only.type === 'text';
+            if (isPlainParagraph || isPlainText) {
+              const text = isPlainText ? String(only.value || '') : extractText(only);
+              node.children = [
+                { type: 'element', tagName: 'pre', properties: {}, children: [ { type: 'text', value: text } ] }
+              ];
+            }
+          }
+        }
+      }
+      children.forEach(visit);
+    };
+    visit(tree);
+  };
+}
+
+

app/plugins/rehype/wrap-tables.mjs

@@ -0,0 +1,43 @@
+// rehype plugin: wrap bare <table> elements in a <div class="table-scroll"> container
+// so that tables stay width:100% while enabling horizontal scroll when content overflows
+
+export default function rehypeWrapTables() {
+  return (tree) => {
+    const isElement = (n) => n && typeof n === 'object' && n.type === 'element';
+    const getChildren = (n) => (Array.isArray(n?.children) ? n.children : []);
+
+    const walk = (node, parent, fn) => {
+      if (!node || typeof node !== 'object') return;
+      fn && fn(node, parent);
+      const kids = getChildren(node);
+      for (const child of kids) walk(child, node, fn);
+    };
+
+    const ensureArray = (v) => (Array.isArray(v) ? v : v != null ? [v] : []);
+    const hasClass = (el, name) => ensureArray(el?.properties?.className).map(String).includes(name);
+
+    const wrapTable = (tableNode, parent) => {
+      if (!parent || !Array.isArray(parent.children)) return;
+      // Don't double-wrap if already inside .table-scroll
+      if (parent.tagName === 'div' && hasClass(parent, 'table-scroll')) return;
+
+      const wrapper = {
+        type: 'element',
+        tagName: 'div',
+        properties: { className: ['table-scroll'] },
+        children: [tableNode]
+      };
+
+      const idx = parent.children.indexOf(tableNode);
+      if (idx >= 0) parent.children.splice(idx, 1, wrapper);
+    };
+
+    walk(tree, null, (node, parent) => {
+      if (!isElement(node)) return;
+      if (node.tagName !== 'table') return;
+      wrapTable(node, parent);
+    });
+  };
+}
+
+

app/plugins/remark/ignore-citations-in-code.mjs

@@ -0,0 +1,21 @@
+// Remark plugin to ignore citations inside code (block and inline)
+export default function remarkIgnoreCitationsInCode() {
+  return (tree) => {
+    const visit = (node) => {
+      if (!node || typeof node !== 'object') return;
+      const type = node.type;
+      if (type === 'code' || type === 'inlineCode') {
+        if (typeof node.value === 'string' && node.value.includes('@')) {
+          // Use a sentinel to avoid rehype-citation, will be restored later in rehype
+          node.value = node.value.replace(/@/g, '__AT_SENTINEL__');
+        }
+        return; // do not traverse into code
+      }
+      const children = Array.isArray(node.children) ? node.children : [];
+      children.forEach(visit);
+    };
+    visit(tree);
+  };
+}
+
+

app/plugins/remark/output-container.mjs

@@ -0,0 +1,23 @@
+// Transform `:::output ... :::` into a <section class="code-output"> wrapper
+// Requires remark-directive to be applied before this plugin
+
+export default function remarkOutputContainer() {
+  return (tree) => {
+    const visit = (node) => {
+      if (!node || typeof node !== 'object') return;
+
+      if (node.type === 'containerDirective' && node.name === 'output') {
+        node.data = node.data || {};
+        node.data.hName = 'section';
+        node.data.hProperties = { className: ['code-output'] };
+      }
+
+      const children = Array.isArray(node.children) ? node.children : [];
+      for (const child of children) visit(child);
+    };
+
+    visit(tree);
+  };
+}
+
+

app/plugins/remark/outputs-container.mjs

@@ -0,0 +1,23 @@
+// Transform `:::outputs ... :::` into a <section class="code-outputs"> wrapper
+// Requires remark-directive to be applied before this plugin
+
+export default function remarkOutputsContainer() {
+  return (tree) => {
+    const visit = (node) => {
+      if (!node || typeof node !== 'object') return;
+
+      if (node.type === 'containerDirective' && node.name === 'outputs') {
+        node.data = node.data || {};
+        node.data.hName = 'section';
+        node.data.hProperties = { className: ['code-outputs'] };
+      }
+
+      const children = Array.isArray(node.children) ? node.children : [];
+      for (const child of children) visit(child);
+    };
+
+    visit(tree);
+  };
+}
+
+

app/plugins/remark/unwrap-citation-links.mjs

@@ -0,0 +1,57 @@
+// Plugin remark pour transformer les liens markdown contenant des citations en citations simples
+// Transforme [@reference](url) en [@reference]
+export default function remarkUnwrapCitationLinks() {
+    return (tree) => {
+        // Fonction helper pour extraire le contenu textuel d'un nœud
+        const getTextContent = (node) => {
+            if (!node) return '';
+            if (node.type === 'text') return node.value || '';
+            if (Array.isArray(node.children)) {
+                return node.children.map(getTextContent).join('');
+            }
+            return '';
+        };
+
+        const visit = (node, parent) => {
+            if (!node || typeof node !== 'object') return;
+
+            // Parcourir les enfants d'abord (post-order traversal)
+            const children = Array.isArray(node.children) ? node.children : [];
+            for (let i = 0; i < children.length; i++) {
+                const child = children[i];
+                visit(child, node);
+            }
+
+            // Si c'est un nœud de type 'link', vérifier son contenu
+            if (node.type === 'link' && parent && Array.isArray(parent.children)) {
+                // Récupérer le contenu textuel du lien
+                const textContent = getTextContent(node);
+
+                // Debug
+                console.log('🔍 Link trouvé:', {
+                    text: textContent,
+                    url: node.url,
+                    matches: /^@\w+/.test(textContent.trim())
+                });
+
+                // Vérifier si c'est une citation (commence par @)
+                if (textContent && /^@\w+/.test(textContent.trim())) {
+                    // Trouver l'index du nœud dans son parent
+                    const index = parent.children.indexOf(node);
+
+                    if (index !== -1) {
+                        console.log('✅ Transformation:', textContent);
+                        // Remplacer le nœud link par un nœud text simple
+                        parent.children[index] = {
+                            type: 'text',
+                            value: textContent.trim()
+                        };
+                    }
+                }
+            }
+        };
+
+        visit(tree, null);
+    };
+}
+

app/postcss.config.mjs

@@ -0,0 +1,14 @@
+// PostCSS config enabling Custom Media Queries
+// Allows usage of: @media (--bp-content-collapse) { ... }
+
+import postcssCustomMedia from 'postcss-custom-media';
+import postcssPresetEnv from 'postcss-preset-env';
+
+export default {
+  plugins: [
+    postcssCustomMedia(),
+    postcssPresetEnv({
+      stage: 0
+    })
+  ]
+};

app/public/hf-space-parent-listener.js

@@ -0,0 +1,70 @@
+/**
+ * Script pour la fenêtre parente des Spaces Hugging Face
+ * Ce script écoute les messages de l'iframe et met à jour l'URL de la fenêtre parente
+ * 
+ * Instructions d'utilisation :
+ * 1. Ajoutez ce script à votre Space Hugging Face dans le fichier app.py ou dans un composant Gradio
+ * 2. Ou utilisez-le dans une page HTML qui contient votre iframe
+ */
+
+(function () {
+    'use strict';
+
+    console.log('HF Space Parent Listener initialized');
+
+    // Écouter les messages de l'iframe
+    window.addEventListener('message', function (event) {
+        console.log('Received message from iframe:', event.data);
+
+        // Vérifier le type de message
+        if (event.data && event.data.type) {
+            switch (event.data.type) {
+                case 'urlChange':
+                case 'anchorChange':
+                case 'HF_SPACE_URL_UPDATE':
+                    handleUrlChange(event.data);
+                    break;
+                default:
+                    console.log('Unknown message type:', event.data.type);
+            }
+        }
+    });
+
+    function handleUrlChange(data) {
+        try {
+            const hash = data.hash || data.anchorId;
+            const url = data.url;
+
+            if (hash) {
+                // Mettre à jour l'URL avec la nouvelle ancre
+                const newUrl = new URL(window.location);
+                newUrl.hash = hash;
+
+                // Utiliser replaceState pour éviter d'ajouter une entrée dans l'historique
+                window.history.replaceState(null, '', newUrl.toString());
+
+                console.log('Updated parent URL to:', newUrl.toString());
+
+                // Optionnel : faire défiler vers l'élément correspondant dans la page parente
+                const targetElement = document.querySelector(hash);
+                if (targetElement) {
+                    targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                }
+            }
+        } catch (error) {
+            console.error('Error updating parent URL:', error);
+        }
+    }
+
+    // Fonction utilitaire pour tester la communication
+    window.testIframeCommunication = function () {
+        console.log('Testing iframe communication...');
+        const iframe = document.querySelector('iframe');
+        if (iframe) {
+            iframe.contentWindow.postMessage({ type: 'test' }, '*');
+        } else {
+            console.log('No iframe found');
+        }
+    };
+
+})();

app/public/scripts/color-palettes.js

@@ -0,0 +1,274 @@
+// Global color palettes generator and watcher
+// - Observes CSS variable --primary-color and theme changes
+// - Generates categorical, sequential, and diverging palettes (OKLCH/OKLab)
+// - Exposes results as CSS variables on :root
+// - Supports variable color counts per palette via CSS vars
+// - Dispatches a 'palettes:updated' CustomEvent after each update
+
+(() => {
+  const MODE = { cssRoot: document.documentElement };
+
+  const getCssVar = (name) => {
+    try { return getComputedStyle(MODE.cssRoot).getPropertyValue(name).trim(); } catch { return ''; }
+  };
+  const getIntFromCssVar = (name, fallback) => {
+    const raw = getCssVar(name);
+    if (!raw) return fallback;
+    const v = parseInt(String(raw), 10);
+    if (Number.isNaN(v)) return fallback;
+    return v;
+  };
+  const clamp = (n, min, max) => Math.max(min, Math.min(max, n));
+
+  // Color math (OKLab/OKLCH)
+  const srgbToLinear = (u) => (u <= 0.04045 ? u / 12.92 : Math.pow((u + 0.055) / 1.055, 2.4));
+  const linearToSrgb = (u) => (u <= 0.0031308 ? 12.92 * u : 1.055 * Math.pow(Math.max(0, u), 1 / 2.4) - 0.055);
+  const rgbToOklab = (r, g, b) => {
+    const rl = srgbToLinear(r), gl = srgbToLinear(g), bl = srgbToLinear(b);
+    const l = Math.cbrt(0.4122214708 * rl + 0.5363325363 * gl + 0.0514459929 * bl);
+    const m = Math.cbrt(0.2119034982 * rl + 0.6806995451 * gl + 0.1073969566 * bl);
+    const s = Math.cbrt(0.0883024619 * rl + 0.2817188376 * gl + 0.6299787005 * bl);
+    const L = 0.2104542553 * l + 0.7936177850 * m - 0.0040720468 * s;
+    const a = 1.9779984951 * l - 2.4285922050 * m + 0.4505937099 * s;
+    const b2 = 0.0259040371 * l + 0.7827717662 * m - 0.8086757660 * s;
+    return { L, a, b: b2 };
+  };
+  const oklabToRgb = (L, a, b) => {
+    const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+    const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+    const s_ = L - 0.0894841775 * a - 1.2914855480 * b;
+    const l = l_ * l_ * l_;
+    const m = m_ * m_ * m_;
+    const s = s_ * s_ * s_;
+    const r = linearToSrgb(+4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s);
+    const g = linearToSrgb(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s);
+    const b3 = linearToSrgb(-0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s);
+    return { r, g, b: b3 };
+  };
+  const oklchToOklab = (L, C, hDeg) => { const h = (hDeg * Math.PI) / 180; return { L, a: C * Math.cos(h), b: C * Math.sin(h) }; };
+  const oklabToOklch = (L, a, b) => { const C = Math.sqrt(a * a + b * b); let h = Math.atan2(b, a) * 180 / Math.PI; if (h < 0) h += 360; return { L, C, h }; };
+  const clamp01 = (x) => Math.min(1, Math.max(0, x));
+  const isInGamut = ({ r, g, b }) => r >= 0 && r <= 1 && g >= 0 && g <= 1 && b >= 0 && b <= 1;
+  const toHex = ({ r, g, b }) => {
+    const R = Math.round(clamp01(r) * 255), G = Math.round(clamp01(g) * 255), B = Math.round(clamp01(b) * 255);
+    const h = (n) => n.toString(16).padStart(2, '0');
+    return `#${h(R)}${h(G)}${h(B)}`.toUpperCase();
+  };
+  const oklchToHexSafe = (L, C, h) => { let c = C; for (let i = 0; i < 12; i++) { const { a, b } = oklchToOklab(L, c, h); const rgb = oklabToRgb(L, a, b); if (isInGamut(rgb)) return toHex(rgb); c = Math.max(0, c - 0.02); } return toHex(oklabToRgb(L, 0, 0)); };
+  const parseCssColorToRgb = (css) => { try { const el = document.createElement('span'); el.style.color = css; document.body.appendChild(el); const cs = getComputedStyle(el).color; document.body.removeChild(el); const m = cs.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/i); if (!m) return null; return { r: Number(m[1]) / 255, g: Number(m[2]) / 255, b: Number(m[3]) / 255 }; } catch { return null; } };
+
+  // Get primary color in OKLCH format to preserve precision
+  const getPrimaryOKLCH = () => {
+    const css = getCssVar('--primary-color');
+    if (!css) return null;
+
+    // For OKLCH colors, return the exact values without conversion
+    if (css.includes('oklch')) {
+      const oklchMatch = css.match(/oklch\(([^)]+)\)/);
+      if (oklchMatch) {
+        const values = oklchMatch[1].split(/\s+/).map(v => parseFloat(v.trim()));
+        if (values.length >= 3) {
+          const [L, C, h] = values;
+          return { L, C, h };
+        }
+      }
+    }
+
+    // For non-OKLCH colors, convert to OKLCH for consistency
+    const rgb = parseCssColorToRgb(css);
+    if (rgb) {
+      const { L, a, b } = rgbToOklab(rgb.r, rgb.g, rgb.b);
+      const { C, h } = oklabToOklch(L, a, b);
+      return { L, C, h };
+    }
+    return null;
+  };
+
+  // Keep getPrimaryHex for backward compatibility, but now it converts from OKLCH
+  const getPrimaryHex = () => {
+    const oklch = getPrimaryOKLCH();
+    if (!oklch) return null;
+
+    const { a, b } = oklchToOklab(oklch.L, oklch.C, oklch.h);
+    const rgb = oklabToRgb(oklch.L, a, b);
+    return toHex(rgb);
+  };
+  // No count management via CSS anymore; counts are passed directly to the API
+
+  const generators = {
+    categorical: (baseOKLCH, count) => {
+      const { L, C, h } = baseOKLCH;
+      const L0 = Math.min(0.85, Math.max(0.4, L));
+      const C0 = Math.min(0.35, Math.max(0.1, C || 0.2));
+      const total = Math.max(1, Math.min(12, count || 8));
+      const hueStep = 360 / total;
+      const results = [];
+      for (let i = 0; i < total; i++) {
+        const hDeg = (h + i * hueStep) % 360;
+        const lVar = ((i % 3) - 1) * 0.04;
+        results.push(oklchToHexSafe(Math.max(0.4, Math.min(0.85, L0 + lVar)), C0, hDeg));
+      }
+      return results;
+    },
+    sequential: (baseOKLCH, count) => {
+      const { L, C, h } = baseOKLCH;
+      const total = Math.max(1, Math.min(12, count || 8));
+      const startL = Math.max(0.25, L - 0.18);
+      const endL = Math.min(0.92, L + 0.18);
+      const cBase = Math.min(0.33, Math.max(0.08, C * 0.9 + 0.06));
+      const out = [];
+      for (let i = 0; i < total; i++) {
+        const t = total === 1 ? 0 : i / (total - 1);
+        const lNow = startL * (1 - t) + endL * t;
+        const cNow = cBase * (0.85 + 0.15 * (1 - Math.abs(0.5 - t) * 2));
+        out.push(oklchToHexSafe(lNow, cNow, h));
+      }
+      return out;
+    },
+    diverging: (baseOKLCH, count) => {
+      const { L, C, h } = baseOKLCH;
+      const total = Math.max(1, Math.min(12, count || 8));
+
+      // Left endpoint: EXACT primary color (no darkening)
+      const leftLab = oklchToOklab(L, C, h);
+      // Right endpoint: complement with same L and similar C (clamped safe)
+      const compH = (h + 180) % 360;
+      const cSafe = Math.min(0.35, Math.max(0.08, C));
+      const rightLab = oklchToOklab(L, cSafe, compH);
+      const whiteLab = { L: 0.98, a: 0, b: 0 }; // center near‑white
+
+      const hexFromOKLab = (L, a, b) => toHex(oklabToRgb(L, a, b));
+      const lerp = (a, b, t) => a + (b - a) * t;
+      const lerpOKLabHex = (A, B, t) => hexFromOKLab(lerp(A.L, B.L, t), lerp(A.a, B.a, t), lerp(A.b, B.b, t));
+
+      const out = [];
+      if (total % 2 === 1) {
+        const nSide = (total - 1) >> 1; // items on each side
+        // Left side: include left endpoint exactly at index 0
+        for (let i = 0; i < nSide; i++) {
+          const t = nSide <= 1 ? 0 : (i / (nSide - 1)); // 0 .. 1
+          // Move from leftLab to a value close (but not equal) to white; ensure last before center is lighter
+          const tt = t * 0.9; // keep some distance from pure white before center
+          out.push(lerpOKLabHex(leftLab, whiteLab, tt));
+        }
+        // Center
+        out.push(hexFromOKLab(whiteLab.L, whiteLab.a, whiteLab.b));
+        // Right side: start near white and end EXACTLY at rightLab
+        for (let i = 0; i < nSide; i++) {
+          const t = nSide <= 1 ? 1 : ((i + 1) / nSide); // (1/n)..1
+          const tt = Math.max(0.1, t); // avoid starting at pure white
+          out.push(lerpOKLabHex(whiteLab, rightLab, tt));
+        }
+        // Ensure first and last are exact endpoints
+        if (out.length) { out[0] = hexFromOKLab(leftLab.L, leftLab.a, leftLab.b); out[out.length - 1] = hexFromOKLab(rightLab.L, rightLab.a, rightLab.b); }
+      } else {
+        const nSide = total >> 1;
+        // Left half including left endpoint, approaching white but not reaching it
+        for (let i = 0; i < nSide; i++) {
+          const t = nSide <= 1 ? 0 : (i / (nSide - 1)); // 0 .. 1
+          const tt = t * 0.9;
+          out.push(lerpOKLabHex(leftLab, whiteLab, tt));
+        }
+        // Right half: mirror from near white to exact right endpoint
+        for (let i = 0; i < nSide; i++) {
+          const t = nSide <= 1 ? 1 : ((i + 1) / nSide); // (1/n)..1
+          const tt = Math.max(0.1, t);
+          out.push(lerpOKLabHex(whiteLab, rightLab, tt));
+        }
+        if (out.length) { out[0] = hexFromOKLab(leftLab.L, leftLab.a, leftLab.b); out[out.length - 1] = hexFromOKLab(rightLab.L, rightLab.a, rightLab.b); }
+      }
+      return out;
+    }
+  };
+
+  let lastSignature = '';
+
+  const updatePalettes = () => {
+    const primaryOKLCH = getPrimaryOKLCH();
+    const primaryHex = getPrimaryHex();
+    const signature = `${primaryOKLCH?.L},${primaryOKLCH?.C},${primaryOKLCH?.h}`;
+    if (signature === lastSignature) return;
+    lastSignature = signature;
+    try { document.dispatchEvent(new CustomEvent('palettes:updated', { detail: { primary: primaryHex, primaryOKLCH } })); } catch { }
+  };
+
+  const bootstrap = () => {
+    // Initial setup - only run once on page load
+    updatePalettes();
+
+    // Observer will handle all subsequent changes
+    const mo = new MutationObserver(() => updatePalettes());
+    mo.observe(MODE.cssRoot, { attributes: true, attributeFilter: ['style', 'data-theme'] });
+
+    // Utility: choose high-contrast (or softened) text style against an arbitrary background color
+    const pickTextStyleForBackground = (bgCss, opts = {}) => {
+      const cssRoot = document.documentElement;
+      const getCssVar = (name) => {
+        try { return getComputedStyle(cssRoot).getPropertyValue(name).trim(); } catch { return ''; }
+      };
+      const resolveCssToRgb01 = (css) => {
+        const rgb = parseCssColorToRgb(css);
+        if (!rgb) return null;
+        return rgb; // already 0..1
+      };
+      const mixRgb01 = (a, b, t) => ({ r: a.r * (1 - t) + b.r * t, g: a.g * (1 - t) + b.g * t, b: a.b * (1 - t) + b.b * t });
+      const relLum = (rgb) => {
+        const f = (u) => srgbToLinear(u);
+        return 0.2126 * f(rgb.r) + 0.7152 * f(rgb.g) + 0.0722 * f(rgb.b);
+      };
+      const contrast = (fg, bg) => {
+        const L1 = relLum(fg), L2 = relLum(bg); const a = Math.max(L1, L2), b = Math.min(L1, L2);
+        return (a + 0.05) / (b + 0.05);
+      };
+      try {
+        const bg = resolveCssToRgb01(bgCss);
+        if (!bg) return { fill: getCssVar('--text-color') || '#000', stroke: 'var(--transparent-page-contrast)', strokeWidth: 1 };
+        const candidatesCss = [getCssVar('--text-color') || '#111', getCssVar('--on-primary') || '#0f1115', '#000', '#fff'];
+        const candidates = candidatesCss
+          .map(css => ({ css, rgb: resolveCssToRgb01(css) }))
+          .filter(x => !!x.rgb);
+        // Pick the max contrast
+        let best = candidates[0]; let bestCR = contrast(best.rgb, bg);
+        for (let i = 1; i < candidates.length; i++) {
+          const cr = contrast(candidates[i].rgb, bg);
+          if (cr > bestCR) { best = candidates[i]; bestCR = cr; }
+        }
+        // Optional softening via blend factor (0..1), blending towards muted color
+        const blend = Math.min(1, Math.max(0, Number(opts.blend || 0)));
+        let finalRgb = best.rgb;
+        if (blend > 0) {
+          const mutedCss = getCssVar('--muted-color') || (getCssVar('--text-color') || '#111');
+          const mutedRgb = resolveCssToRgb01(mutedCss) || best.rgb;
+          finalRgb = mixRgb01(best.rgb, mutedRgb, blend);
+        }
+        const haloStrength = Math.min(1, Math.max(0, Number(opts.haloStrength == null ? 0.5 : opts.haloStrength)));
+        const stroke = (best.css === '#000' || best.css.toLowerCase() === 'black') ? `rgba(255,255,255,${0.30 + 0.40 * haloStrength})` : `rgba(0,0,0,${0.30 + 0.30 * haloStrength})`;
+        return { fill: toHex(finalRgb), stroke, strokeWidth: (opts.haloWidth == null ? 1 : Number(opts.haloWidth)) };
+      } catch {
+        return { fill: getCssVar('--text-color') || '#000', stroke: 'var(--transparent-page-contrast)', strokeWidth: 1 };
+      }
+    };
+    window.ColorPalettes = {
+      refresh: updatePalettes,
+      notify: () => { try { const primaryOKLCH = getPrimaryOKLCH(); const primaryHex = getPrimaryHex(); document.dispatchEvent(new CustomEvent('palettes:updated', { detail: { primary: primaryHex, primaryOKLCH } })); } catch { } },
+      getPrimary: () => getPrimaryHex(),
+      getPrimaryOKLCH: () => getPrimaryOKLCH(),
+      getColors: (key, count = 6) => {
+        const primaryOKLCH = getPrimaryOKLCH();
+        if (!primaryOKLCH) return [];
+        const total = Math.max(1, Math.min(12, Number(count) || 6));
+        if (key === 'categorical') return generators.categorical(primaryOKLCH, total);
+        if (key === 'sequential') return generators.sequential(primaryOKLCH, total);
+        if (key === 'diverging') return generators.diverging(primaryOKLCH, total);
+        return [];
+      },
+      getTextStyleForBackground: (bgCss, opts) => pickTextStyleForBackground(bgCss, opts || {}),
+      chooseReadableText: (bgCss, opts) => pickTextStyleForBackground(bgCss, opts || {})
+    };
+  };
+
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', bootstrap, { once: true });
+  else bootstrap();
+})();
+
+

app/src/components/Footer.astro

@@ -0,0 +1,347 @@
+---
+interface Props {
+  citationText: string;
+  bibtex: string;
+  licence?: string;
+  doi?: string;
+}
+const { citationText, bibtex, licence, doi } = Astro.props as Props;
+---
+
+<footer class="footer">
+  <div class="footer-inner">
+    <section class="citation-block">
+      <h3>Citation</h3>
+      <p>For attribution in academic contexts, please cite this work as</p>
+      <pre class="citation short">{citationText}</pre>
+
+      <p>BibTeX citation</p>
+      <pre class="citation long">{bibtex}</pre>
+    </section>
+    {
+      doi && (
+        <section class="doi-block">
+          <h3>DOI</h3>
+          <p>
+            <a
+              href={`https://doi.org/${doi}`}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {doi}
+            </a>
+          </p>
+        </section>
+      )
+    }
+    {
+      licence && (
+        <section class="reuse-block">
+          <h3>Reuse</h3>
+          <p set:html={licence} />
+        </section>
+      )
+    }
+    <section class="references-block">
+      <slot />
+    </section>
+    <div class="template-credit">
+      <p>
+        Made with ❤️ with <a
+          href="https://huggingface.co/spaces/tfrere/research-article-template"
+          target="_blank"
+          rel="noopener noreferrer">research article template</a
+        >
+      </p>
+    </div>
+  </div>
+</footer>
+
+<script is:inline>
+  (() => {
+    const getFooter = () =>
+      document.currentScript?.closest("footer") ||
+      document.querySelector("footer.footer");
+    const footer = getFooter();
+    if (!footer) return;
+    const target = footer.querySelector(".references-block");
+    if (!target) return;
+
+    const contentRoot =
+      document.querySelector("section.content-grid main") ||
+      document.querySelector("main") ||
+      document.body;
+
+    const ensureHeading = (text) => {
+      const exists = Array.from(target.children).some(
+        (c) =>
+          c.tagName === "H3" &&
+          c.textContent.trim().toLowerCase() === text.toLowerCase(),
+      );
+      if (!exists) {
+        const h = document.createElement("h3");
+        h.textContent = text;
+        target.appendChild(h);
+      }
+    };
+
+    const moveIntoFooter = (element, headingText) => {
+      if (!element) return false;
+      // Remove an eventual heading already included inside the block (avoid duplicates)
+      const firstHeading = element.querySelector(
+        ":scope > h1, :scope > h2, :scope > h3",
+      );
+      if (firstHeading) {
+        const txt = (firstHeading.textContent || "").trim().toLowerCase();
+        const targetTxt = headingText.trim().toLowerCase();
+        if (
+          txt === targetTxt ||
+          txt.includes("reference") ||
+          txt.includes("bibliograph")
+        ) {
+          firstHeading.remove();
+        }
+      }
+
+      // Move footnote backref links inside paragraphs
+      if (element.classList && element.classList.contains("footnotes")) {
+        const footnoteItems = element.querySelectorAll("li");
+        footnoteItems.forEach((item) => {
+          const backrefContainer = item.querySelector("small.backrefs");
+          const lastP = item.querySelector("p:last-of-type");
+          if (backrefContainer && lastP && !lastP.contains(backrefContainer)) {
+            lastP.appendChild(document.createTextNode(" "));
+            lastP.appendChild(backrefContainer);
+          }
+        });
+      }
+
+      ensureHeading(headingText);
+      target.appendChild(element);
+      return true;
+    };
+    const run = () => {
+      const findFirstOutsideFooter = (selectors) => {
+        for (const sel of selectors) {
+          const el = contentRoot.querySelector(sel);
+          if (el && !footer.contains(el)) return el;
+        }
+        return null;
+      };
+
+      const referencesEl = findFirstOutsideFooter([
+        "#bibliography-references-list",
+        "[data-bibliography-block]",
+        "#references",
+        "#refs",
+        ".references",
+        ".bibliography",
+      ]);
+      const footnotesEl = findFirstOutsideFooter([".footnotes"]);
+
+      const movedRefs = moveIntoFooter(referencesEl, "References");
+      const movedNotes = moveIntoFooter(footnotesEl, "Footnotes");
+      return movedRefs || movedNotes;
+    };
+
+    // Try now; if not found yet, try again on DOM ready
+    const done = run();
+    if (!done) {
+      const onReady = () => run();
+      if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", onReady, { once: true });
+      } else {
+        setTimeout(onReady, 0);
+      }
+    }
+
+    // Resize on window changes (e.g., fonts, layout)
+    // No textarea auto-resize needed for <pre> blocks
+  })();
+</script>
+
+<style is:global>
+  .footer {
+    contain: layout style;
+    font-size: 0.8em;
+    line-height: 1.7em;
+    margin-top: 60px;
+    margin-bottom: 0;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    color: rgba(0, 0, 0, 0.5);
+  }
+
+  .footer-inner {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 60px 16px 48px;
+    display: grid;
+    grid-template-columns: 220px minmax(0, 680px) 260px;
+    /* Every citation child is its own grid row, so a symmetric gap spaces the
+       block out far more than the columns need. */
+    column-gap: 32px;
+    row-gap: 12px;
+    align-items: start;
+  }
+
+  /* Use the parent grid (3 columns like .content-grid) */
+  .citation-block,
+  .references-block,
+  .reuse-block,
+  .doi-block {
+    display: contents;
+  }
+
+  .citation-block > h3,
+  .references-block > h3,
+  .reuse-block > h3,
+  .doi-block > h3 {
+    grid-column: 1;
+    font-size: 15px;
+    margin: 0;
+    text-align: right;
+    padding-right: 30px;
+  }
+
+  .citation-block > :not(h3),
+  .references-block > :not(h3),
+  .reuse-block > :not(h3),
+  .doi-block > :not(h3) {
+    grid-column: 2;
+  }
+
+  .citation-block h3 {
+    margin: 0 0 8px;
+  }
+
+  .citation-block h4 {
+    margin: 16px 0 8px;
+    font-size: 14px;
+    text-transform: uppercase;
+    color: var(--muted-color);
+  }
+
+  .citation-block p,
+  .reuse-block p,
+  .doi-block p,
+  .footnotes ol,
+  .footnotes ol p,
+  .references {
+    margin-top: 0;
+  }
+
+  /* Distill-like appendix citation styling */
+  .citation {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+      "Liberation Mono", "Courier New", monospace;
+    font-size: 11px;
+    line-height: 15px;
+    border-left: 1px solid rgba(0, 0, 0, 0.1);
+    padding-left: 18px;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    background: rgba(0, 0, 0, 0.02);
+    padding: 10px 18px;
+    border-radius: 3px;
+    color: rgba(150, 150, 150, 1);
+    overflow: hidden;
+    margin-top: -12px;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  }
+
+  .citation a {
+    color: rgba(0, 0, 0, 0.6);
+    text-decoration: underline;
+  }
+
+  .citation.short {
+    margin-top: -4px;
+  }
+
+  .references-block h3 {
+    margin: 0;
+  }
+
+  /* Distill-like list styling for references/footnotes */
+  .references-block ol {
+    padding: 0 0 0 15px;
+  }
+
+  @media (min-width: 768px) {
+    .references-block ol {
+      padding: 0 0 0 30px;
+      margin-left: -30px;
+    }
+  }
+
+  .references-block li {
+    margin-bottom: 1em;
+  }
+
+  .references-block a {
+    color: var(--text-color);
+  }
+
+  [data-theme="dark"] .footer {
+    border-top-color: rgba(255, 255, 255, 0.15);
+    color: rgba(200, 200, 200, 0.8);
+  }
+  [data-theme="dark"] .citation {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: rgba(255, 255, 255, 0.15);
+    color: rgba(200, 200, 200, 1);
+  }
+  [data-theme="dark"] .citation a {
+    color: rgba(255, 255, 255, 0.75);
+  }
+
+  /* Footer links: use primary color consistently */
+  .footer a {
+    color: var(--primary-color);
+    border-bottom: 1px solid var(--link-underline);
+    text-decoration: none;
+  }
+  .footer a:hover {
+    color: var(--primary-color-hover);
+    border-bottom-color: var(--link-underline-hover);
+  }
+  [data-theme="dark"] .footer a {
+    color: var(--primary-color);
+  }
+
+  /* Template credit - discrete at the bottom */
+  .template-credit {
+    display: contents;
+  }
+
+  .template-credit p {
+    grid-column: 2;
+    margin: 24px 0 0 0;
+    font-size: 0.85em;
+    color: rgba(0, 0, 0, 0.5);
+  }
+
+  .template-credit a {
+    color: rgba(0, 0, 0, 0.6);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+  }
+
+  .template-credit a:hover {
+    color: rgba(0, 0, 0, 0.8);
+    border-bottom-color: rgba(0, 0, 0, 0.3);
+  }
+
+  [data-theme="dark"] .template-credit p {
+    color: rgba(200, 200, 200, 0.6);
+  }
+
+  [data-theme="dark"] .template-credit a {
+    color: rgba(200, 200, 200, 0.7);
+    border-bottom-color: rgba(255, 255, 255, 0.2);
+  }
+
+  [data-theme="dark"] .template-credit a:hover {
+    color: rgba(200, 200, 200, 0.9);
+    border-bottom-color: rgba(255, 255, 255, 0.35);
+  }
+</style>

app/src/components/FullWidth.astro

@@ -0,0 +1,9 @@
+---
+const { class: className, ...props } = Astro.props;
+const wrapperClass = ["full-width", className].filter(Boolean).join(" ");
+---
+<div class={wrapperClass} {...props}>
+  <slot />
+</div>
+
+

app/src/components/Hero.astro

@@ -0,0 +1,612 @@
+---
+import HtmlEmbed from "./HtmlEmbed.astro";
+
+interface Props {
+  title: string; // may contain HTML (e.g., <br/>)
+  titleRaw?: string; // plain title for slug/PDF (optional)
+  description?: string;
+  authors?: Array<
+    string | { name: string; url?: string; affiliationIndices?: number[] }
+  >;
+  affiliations?: Array<{ id: number; name: string; url?: string }>;
+  affiliation?: string; // legacy single affiliation
+  published?: string;
+  doi?: string;
+  arxiv?: string;
+  pdfProOnly?: boolean; // Gate PDF download to Pro users only
+}
+
+const {
+  title,
+  titleRaw,
+  description,
+  authors = [],
+  affiliations = [],
+  affiliation,
+  published,
+  doi,
+  arxiv,
+  pdfProOnly = false,
+} = Astro.props as Props;
+
+type Author = { name: string; url?: string; affiliationIndices?: number[] };
+
+function normalizeAuthors(
+  input: Array<
+    | string
+    | {
+        name?: string;
+        url?: string;
+        link?: string;
+        affiliationIndices?: number[];
+      }
+  >,
+): Author[] {
+  return (Array.isArray(input) ? input : [])
+    .map((a) => {
+      if (typeof a === "string") {
+        return { name: a } as Author;
+      }
+      const name = (a?.name ?? "").toString();
+      const url = (a?.url ?? a?.link) as string | undefined;
+      const affiliationIndices = Array.isArray((a as any)?.affiliationIndices)
+        ? (a as any).affiliationIndices
+        : undefined;
+      return { name, url, affiliationIndices } as Author;
+    })
+    .filter((a) => a.name && a.name.trim().length > 0);
+}
+
+const normalizedAuthors: Author[] = normalizeAuthors(authors as any);
+
+// Determine if affiliation superscripts should be shown (only when there are multiple distinct affiliations referenced by authors)
+const authorAffiliationIndexSet = new Set<number>();
+for (const author of normalizedAuthors) {
+  const indices = Array.isArray(author.affiliationIndices)
+    ? author.affiliationIndices
+    : [];
+  for (const idx of indices) {
+    if (typeof idx === "number") {
+      authorAffiliationIndexSet.add(idx);
+    }
+  }
+}
+const shouldShowAffiliationSupers = authorAffiliationIndexSet.size > 1;
+const hasMultipleAffiliations =
+  Array.isArray(affiliations) && affiliations.length > 1;
+
+function stripHtml(text: string): string {
+  return String(text || "").replace(/<[^>]*>/g, "");
+}
+
+function slugify(text: string): string {
+  return (
+    String(text || "")
+      .normalize("NFKD")
+      .replace(/\p{Diacritic}+/gu, "")
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, "-")
+      .replace(/^-+|-+$/g, "")
+      .slice(0, 120) || "article"
+  );
+}
+
+const pdfBase = titleRaw ? stripHtml(titleRaw) : stripHtml(title);
+const pdfFilename = `${slugify(pdfBase)}.pdf`;
+---
+
+<section class="hero">
+  <h1 class="hero-title" set:html={title} />
+  <div class="hero-banner">
+    <HtmlEmbed src="branch-explorer.html" frameless />
+    {description && <p class="hero-desc">{description}</p>}
+  </div>
+  <div class="hero-features" id="hero-features">
+    <a class="hero-feat-badge" href="https://neuronpedia.org/gemma-2-2b/20-gemmascope-res-16k/14304" target="_blank" rel="noopener">
+      <span class="feat-id">L20/14304</span>
+      <span class="feat-desc">merging components in a process</span>
+    </a>
+    <a class="hero-feat-badge" href="https://neuronpedia.org/gemma-2-2b/10-gemmascope-res-16k/12435" target="_blank" rel="noopener">
+      <span class="feat-id">L10/12435</span>
+      <span class="feat-desc">specific locations or geographic information</span>
+    </a>
+  </div>
+</section>
+
+<header class="meta" aria-label="Article meta information">
+  <div class="meta-container">
+    {
+      normalizedAuthors.length > 0 && (
+        <div class="meta-container-cell">
+          <h3>Author{normalizedAuthors.length > 1 ? "s" : ""}</h3>
+          <ul class="authors">
+            {normalizedAuthors.map((a, i) => {
+              const supers =
+                shouldShowAffiliationSupers &&
+                Array.isArray(a.affiliationIndices) &&
+                a.affiliationIndices.length ? (
+                  <sup>{a.affiliationIndices.join(", ")}</sup>
+                ) : null;
+              return (
+                <li>
+                  {a.url ? <a href={a.url}>{a.name}</a> : a.name}{supers}{i < normalizedAuthors.length - 1 && <span set:html=",&nbsp;" />}
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      )
+    }
+    {
+      Array.isArray(affiliations) && affiliations.length > 0 && (
+        <div class="meta-container-cell meta-container-cell--affiliations">
+          <h3>Affiliation{affiliations.length > 1 ? "s" : ""}</h3>
+          {hasMultipleAffiliations ? (
+            <ol class="affiliations">
+              {affiliations.map((af) => (
+                <li value={af.id}>
+                  {af.url ? (
+                    <a href={af.url} target="_blank" rel="noopener noreferrer">
+                      {af.name}
+                    </a>
+                  ) : (
+                    af.name
+                  )}
+                </li>
+              ))}
+            </ol>
+          ) : (
+            <p>
+              {affiliations[0]?.url ? (
+                <a
+                  href={affiliations[0].url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {affiliations[0].name}
+                </a>
+              ) : (
+                affiliations[0]?.name
+              )}
+            </p>
+          )}
+        </div>
+      )
+    }
+    {
+      (!affiliations || affiliations.length === 0) && affiliation && (
+        <div class="meta-container-cell meta-container-cell--affiliations">
+          <h3>Affiliation</h3>
+          <p>{affiliation}</p>
+        </div>
+      )
+    }
+    {
+      published && (
+        <div class="meta-container-cell meta-container-cell--published">
+          <h3>Published</h3>
+          <p>{published}</p>
+        </div>
+      )
+    }
+    <!-- {doi && (
+      <div class="meta-container-cell">
+        <h3>DOI</h3>
+        <p><a href={`https://doi.org/${doi}`} target="_blank" rel="noopener noreferrer">{doi}</a></p>
+      </div>
+    )} -->
+    <div class="meta-container-cell meta-container-cell--pdf">
+      <div class="pdf-header-wrapper">
+        <h3>PDF</h3>
+        <span class="pro-badge-wrapper" style="display: none;">
+          <span class="pro-badge-prefix">- you are</span>
+          <span class="pro-badge">PRO</span>
+        </span>
+        <span class="pro-only-label" style="display: none;">
+          <span class="pro-only-dash">-</span>
+          <span class="pro-only-text">pro only</span>
+          <svg class="pro-only-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
+            <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
+          </svg>
+        </span>
+      </div>
+      <div id="pdf-download-container" data-pdf-pro-only={pdfProOnly.toString()}>
+        <p class="pdf-loading">Checking access...</p>
+        <p class="pdf-pro-only" style="display: none;">
+          <a
+            class="button"
+            href={arxiv ? `https://arxiv.org/pdf/${arxiv}` : `/${pdfFilename}`}
+            target={arxiv ? "_blank" : undefined}
+            rel={arxiv ? "noopener noreferrer" : undefined}
+            download={arxiv ? undefined : pdfFilename}
+            aria-label={arxiv ? `View PDF on arXiv` : `Download PDF ${pdfFilename}`}
+          >
+            Download PDF
+          </a>
+        </p>
+        <div class="pdf-locked" style="display: none;">
+          <a 
+            class="button button-locked" 
+            href="https://huggingface.co/subscribe/pro"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <svg class="lock-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" viewBox="0 0 12 12" fill="none">
+              <path d="M6.48 1.26c0 1.55.67 2.58 1.5 3.24.86.68 1.9 1 2.58 1.07v.86A5.3 5.3 0 0 0 7.99 7.5a3.95 3.95 0 0 0-1.51 3.24h-.96c0-1.55-.67-2.58-1.5-3.24a5.3 5.3 0 0 0-2.58-1.07v-.86A5.3 5.3 0 0 0 4.01 4.5a3.95 3.95 0 0 0 1.51-3.24h.96Z" fill="currentColor"></path>
+            </svg>
+            <span class="locked-title">Subscribe to Pro</span>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</header>
+
+<script>
+  // PDF access control for Pro users only
+  
+  // ⚙️ Configuration for local development
+  const LOCAL_IS_PRO = false; // Set to true to test Pro access locally
+  
+  const FALLBACK_TIMEOUT_MS = 3000;
+  let userPlanChecked = false;
+
+  // Check if PDF Pro gating is enabled
+  const pdfContainer = document.querySelector("#pdf-download-container") as HTMLElement;
+  const pdfProOnly = pdfContainer?.getAttribute("data-pdf-pro-only") === "true";
+
+  /**
+   * Check if user has Pro access
+   * Isolated logic for Pro user verification
+   * Expected plan structure: { user: "pro", org: "enterprise" }
+   */
+  function isProUser(plan: any): boolean {
+    if (!plan) return false;
+    
+    // Check if user property is "pro"
+    return plan.user === "pro";
+  }
+
+  /**
+   * Update UI based on user's Pro status
+   */
+  function updatePdfAccess(isPro: boolean) {
+    const loadingEl = document.querySelector(".pdf-loading") as HTMLElement;
+    const proOnlyEl = document.querySelector(".pdf-pro-only") as HTMLElement;
+    const lockedEl = document.querySelector(".pdf-locked") as HTMLElement;
+    const proOnlyLabel = document.querySelector(".pro-only-label") as HTMLElement;
+    const proBadgeWrapper = document.querySelector(".pro-badge-wrapper") as HTMLElement;
+    
+    // Hide loading state
+    if (loadingEl) loadingEl.style.display = "none";
+    
+    // If PDF Pro gating is disabled, just show the download button
+    if (!pdfProOnly) {
+      if (proOnlyEl) proOnlyEl.style.display = "block";
+      if (proOnlyLabel) proOnlyLabel.style.display = "none";
+      if (lockedEl) lockedEl.style.display = "none";
+      if (proBadgeWrapper) proBadgeWrapper.style.display = "none";
+      return;
+    }
+    
+    // Show appropriate state based on Pro status
+    if (isPro) {
+      if (proOnlyEl) proOnlyEl.style.display = "block";
+      if (proOnlyLabel) proOnlyLabel.style.display = "none";
+      if (lockedEl) lockedEl.style.display = "none";
+      if (proBadgeWrapper) proBadgeWrapper.style.display = "inline-flex";
+    } else {
+      if (proOnlyEl) proOnlyEl.style.display = "none";
+      if (proOnlyLabel) proOnlyLabel.style.display = "inline-flex";
+      if (lockedEl) lockedEl.style.display = "block";
+      if (proBadgeWrapper) proBadgeWrapper.style.display = "none";
+    }
+  }
+
+  /**
+   * Handle user plan response
+   */
+  function handleUserPlan(plan: any) {
+    userPlanChecked = true;
+    const isPro = isProUser(plan);
+    updatePdfAccess(isPro);
+    
+    // Optional: log for debugging
+    console.log("[PDF Access]", { plan, isPro });
+  }
+
+  /**
+   * Fallback behavior when no parent window responds
+   * Uses LOCAL_IS_PRO configuration for local development
+   */
+  function handleFallback() {
+    if (LOCAL_IS_PRO) {
+      handleUserPlan({ user: "pro" });
+    } else {
+      handleUserPlan({ user: "free" });
+    }
+  }
+
+  // If PDF Pro gating is disabled, show the download button immediately
+  if (!pdfProOnly) {
+    updatePdfAccess(true);
+  } else {
+    // Listen for messages from parent window (Hugging Face Spaces)
+    window.addEventListener("message", (event) => {
+      if (event.data.type === "USER_PLAN") {
+        handleUserPlan(event.data.plan);
+      }
+    });
+
+    // Request user plan on page load
+    if (window.parent && window.parent !== window) {
+      // We're in an iframe, request user plan
+      window.parent.postMessage({ type: "USER_PLAN_REQUEST" }, "*");
+      
+      // Fallback if no response after timeout
+      setTimeout(() => {
+        if (!userPlanChecked) {
+          handleFallback();
+        }
+      }, FALLBACK_TIMEOUT_MS);
+    } else {
+      // Not in iframe (local development), use fallback immediately
+      handleFallback();
+    }
+  }
+</script>
+
+<style>
+  /* Hero (full-width) */
+  .hero {
+    width: 100%;
+    padding: 64px 16px 16px;
+    text-align: center;
+  }
+  .hero-title {
+    font-size: clamp(28px, 4vw, 48px);
+    font-weight: 800;
+    line-height: 1.1;
+    margin: 0 0 28px;
+    max-width: 100%;
+  }
+  .hero-banner {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+  .hero-desc {
+    color: var(--muted-color);
+    font-style: italic;
+    margin: 0 auto 16px;
+    max-width: 55%;
+  }
+
+  @media (max-width: 768px) {
+    .hero-desc {
+      max-width: 90%;
+    }
+  }
+
+  /* Meta (byline-like header) */
+  .meta {
+    border-top: 1px solid var(--border-color);
+    border-bottom: 1px solid var(--border-color);
+    padding: 1rem 0;
+    font-size: 0.9rem;
+  }
+  .meta-container {
+    max-width: 980px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin: 0 auto;
+    padding: 0 var(--content-padding-x);
+    gap: 8px;
+  }
+  /* Subtle underline for links in meta; keep buttons without underline */
+  .meta-container a:not(.button) {
+    color: var(--primary-color);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    text-decoration-thickness: 0.06em;
+    text-decoration-color: var(--link-underline);
+    transition: text-decoration-color 0.15s ease-in-out;
+  }
+  .meta-container a:hover {
+    text-decoration-color: var(--link-underline-hover);
+  }
+  .meta-container a.button,
+  .meta-container .button {
+    text-decoration: none;
+  }
+  .meta-container-cell {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    max-width: 400px;
+  }
+  .meta-container-cell h3 {
+    margin: 0;
+    font-size: 12px;
+    font-weight: 400;
+    color: var(--muted-color);
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+  }
+  .meta-container-cell p {
+    margin: 0;
+  }
+  .authors {
+    margin: 0;
+    list-style-type: none;
+    padding-left: 0;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .authors li {
+    white-space: nowrap;
+    padding:0;
+  }
+  .affiliations {
+    margin: 0;
+    padding-left: 1.25em;
+  }
+  .affiliations li {
+    margin: 0;
+  }
+
+  header.meta .meta-container {
+    flex-wrap: wrap;
+    row-gap: 12px;
+  }
+
+  @media (max-width: 768px) {
+    .meta-container-cell--affiliations,
+    .meta-container-cell--pdf {
+      text-align: right;
+    }
+  }
+
+  @media print {
+    .meta-container-cell--pdf {
+      display: none !important;
+    }
+  }
+
+  /* PDF access control styles */
+  .pdf-header-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    line-height: 1;
+  }
+
+  .pdf-header-wrapper h3 {
+    line-height: 1;
+  }
+
+  .pdf-loading {
+    color: var(--muted-color);
+    font-size: 0.9em;
+  }
+
+  .pdf-pro-only {
+    margin: 0;
+  }
+
+  .pro-badge-wrapper {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    font-style: normal;
+  }
+
+  .pro-badge-prefix {
+    font-size: 0.85em;
+    opacity: 0.5;
+    font-weight: 400;
+    font-style: normal;
+  }
+
+  .pro-badge {
+    display: inline-block;
+    border: 1px solid rgba(0, 0, 0, 0.025);
+    background: linear-gradient(to bottom right, #f9a8d4, #86efac, #fde047);
+    color: black;
+    padding: 1px 5px;
+    border-radius: 3px;
+    font-size: 0.5rem;
+    font-weight: 700;
+    font-style: normal;
+    letter-spacing: 0.025em;
+    text-transform: uppercase;
+  }
+
+  /* Dark mode pro badge */
+  :global(.dark) .pro-badge,
+  :global([data-theme="dark"]) .pro-badge {
+    background: linear-gradient(to bottom right, #ec4899, #22c55e, #eab308);
+    border-color: rgba(255, 255, 255, 0.15);
+  }
+
+  .pro-only-label {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 5px;
+    font-size: 0.85em;
+    opacity: 0.5;
+    font-weight: 400;
+    line-height: 1;
+  }
+
+  .pro-only-dash {
+    display: inline-flex;
+    align-items: center;
+    line-height: 1;
+  }
+
+  .pro-only-icon {
+    width: 11px;
+    height: 11px;
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .pro-only-text {
+    display: inline-flex;
+    align-items: center;
+    line-height: 1;
+  }
+
+  .pdf-locked {
+    display: block;
+  }
+
+  .button-locked {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    background: linear-gradient(135deg, 
+                  var(--primary-color) 0%, 
+                  oklch(from var(--primary-color) calc(l - 0.1) calc(c + 0.05) calc(h - 60)) 100%);
+    border-radius: var(--button-radius);
+    padding: var(--button-padding-y) var(--button-padding-x);
+    font-size: var(--button-font-size);
+    line-height: 1;
+    color: var(--on-primary);
+    position: relative;
+    overflow: hidden;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    font-weight: normal;
+    border-color: rgba(0, 0, 0, 0.15);
+  }
+
+  .button-locked:active {
+    transform: translateY(0);
+  }
+
+  .lock-icon {
+    font-size: 1em;
+    flex-shrink: 0;
+    position: relative;
+    z-index: 1;
+  }
+
+  .locked-title {
+    position: relative;
+    z-index: 1;
+  }
+
+  /* Dark mode locked button - inherits from light mode variables */
+
+  @media (max-width: 768px) {
+    .meta-container-cell--pdf {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+    }
+  }
+</style>

app/src/components/HtmlEmbed.astro

@@ -0,0 +1,407 @@
+---
+interface Props {
+  src: string;
+  title?: string;
+  desc?: string;
+  caption?: string;
+  frameless?: boolean;
+  align?: "left" | "center" | "right";
+  id?: string;
+  data?: string | string[];
+  config?: any;
+}
+const {
+  src,
+  title,
+  desc,
+  caption,
+  frameless = false,
+  align = "left",
+  id,
+  data,
+  config,
+} = Astro.props as Props;
+
+// Load all .html embeds under src/content/embeds/** as strings (dev & build)
+const embeds = (import.meta as any).glob("../content/embeds/**/*.html", {
+  query: "?raw",
+  import: "default",
+  eager: true,
+}) as Record<string, string>;
+
+function resolveFragment(requested: string): string | null {
+  // Allow both "banner.html" and "embeds/banner.html"
+  const needle = requested.replace(/^\/*/, "");
+  for (const [key, html] of Object.entries(embeds)) {
+    if (
+      key.endsWith("/" + needle) ||
+      key.endsWith("/" + needle.replace(/^embeds\//, ""))
+    ) {
+      return html;
+    }
+  }
+  return null;
+}
+
+const html = resolveFragment(src);
+const mountId = `frag-${Math.random().toString(36).slice(2)}`;
+const dataAttr = Array.isArray(data)
+  ? JSON.stringify(data)
+  : typeof data === "string"
+    ? data
+    : undefined;
+const configAttr =
+  typeof config === "string"
+    ? config
+    : config != null
+      ? JSON.stringify(config)
+      : undefined;
+
+// Apply the ID to the HTML content if provided
+const htmlWithId =
+  id && html
+    ? html.replace(/<div class="([^"]*)"[^>]*>/, `<div class="$1" id="${id}">`)
+    : html;
+---
+
+{
+  html ? (
+    <figure class="html-embed" id={id}>
+      {title && (
+        <figcaption class="html-embed__title" style={`text-align:${align}`}>
+          {title}
+        </figcaption>
+      )}
+      <div class={`html-embed__card${frameless ? " is-frameless" : ""}`}>
+        <div
+          id={mountId}
+          data-datafiles={dataAttr}
+          data-config={configAttr}
+          set:html={htmlWithId}
+        />
+      </div>
+      {(desc || caption) && (
+        <figcaption
+          class="html-embed__desc"
+          style={`text-align:${align}`}
+          set:html={caption || desc}
+        />
+      )}
+    </figure>
+  ) : (
+    <figure class="html-embed html-embed--error" id={id}>
+      <div class="html-embed__card html-embed__card--error">
+        <div class="html-embed__error">
+          <strong>Embed not found</strong>
+          <p>
+            The requested embed could not be loaded: <code>{src}</code>
+          </p>
+        </div>
+      </div>
+    </figure>
+  )
+}
+
+<script>
+  // Re-execute <script> tags inside the injected fragment (innerHTML doesn't run scripts)
+  const scriptEl = document.currentScript;
+  const mount = scriptEl ? scriptEl.previousElementSibling : null;
+  const execute = () => {
+    if (!mount) return;
+    const scripts = mount.querySelectorAll("script");
+    scripts.forEach((old) => {
+      // ignore non-executable types (e.g., application/json)
+      if (
+        old.type &&
+        old.type !== "text/javascript" &&
+        old.type !== "module" &&
+        old.type !== ""
+      )
+        return;
+      if (old.dataset.executed === "true") return;
+      old.dataset.executed = "true";
+      if (old.src) {
+        const s = document.createElement("script");
+        Array.from(old.attributes).forEach((attr) =>
+          s.setAttribute(attr.name, attr.value),
+        );
+        document.body.appendChild(s);
+      } else {
+        try {
+          // run inline
+          (0, eval)(old.text || "");
+        } catch (e) {
+          console.error("HtmlEmbed inline script error:", e);
+        }
+      }
+    });
+  };
+  // Execute after DOM is parsed (ensures deferred module scripts are executed first)
+  if (document.readyState === "loading")
+    document.addEventListener("DOMContentLoaded", execute, { once: true });
+  else execute();
+</script>
+
+<style is:global>
+  .html-embed {
+    margin: 0 0 var(--block-spacing-y);
+    z-index: var(--z-elevated);
+    position: relative;
+  }
+  .html-embed__title {
+    text-align: left;
+    font-weight: 600;
+    font-size: 0.95rem;
+    color: var(--text-color);
+    margin: 0;
+    padding: 0;
+    padding-bottom: var(--spacing-1);
+    position: relative;
+    display: block;
+    width: 100%;
+    background: var(--page-bg);
+    z-index: var(--z-elevated);
+  }
+  .html-embed__card {
+    background-color: var(--surface-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 10px;
+    padding: 24px;
+    z-index: calc(var(--z-elevated) + 1);
+    position: relative;
+  }
+  .html-embed__card.is-frameless {
+    background: transparent;
+    border: none;
+    padding: 0;
+  }
+  .html-embed__desc {
+    text-align: left;
+    font-size: 0.9rem;
+    color: var(--muted-color);
+    margin: 0;
+    padding: 0;
+    padding-top: var(--spacing-1);
+    position: relative;
+    z-index: var(--z-elevated);
+    display: block;
+    width: 100%;
+    background: var(--page-bg);
+  }
+  /* Error state for missing embeds */
+  .html-embed__card--error {
+    background: #fef2f2;
+    border: 2px solid #dc2626;
+    border-radius: 8px;
+    padding: 20px;
+  }
+  .html-embed__error {
+    text-align: center;
+    color: #dc2626;
+  }
+  .html-embed__error strong {
+    display: block;
+    font-size: 1.1rem;
+    font-weight: 600;
+    margin-bottom: 8px;
+  }
+  .html-embed__error p {
+    margin: 0;
+    font-size: 0.9rem;
+    line-height: 1.5;
+  }
+  .html-embed__error code {
+    background: rgba(220, 38, 38, 0.1);
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-family: var(--font-mono);
+    font-size: 0.85rem;
+    word-break: break-all;
+  }
+  /* Dark mode for error state */
+  [data-theme="dark"] .html-embed__card--error {
+    background: #1f2937;
+    border-color: #ef4444;
+  }
+  [data-theme="dark"] .html-embed__error {
+    color: #ef4444;
+  }
+  [data-theme="dark"] .html-embed__error code {
+    background: rgba(239, 68, 68, 0.2);
+  }
+  /* Plotly – fragments & controls */
+  .html-embed__card svg text {
+    fill: var(--text-color);
+  }
+  .html-embed__card label {
+    color: var(--text-color);
+  }
+  .plotly-graph-div {
+    width: 100%;
+    min-height: 320px;
+  }
+  @media (max-width: 768px) {
+    .plotly-graph-div {
+      min-height: 260px;
+    }
+  }
+  [id^="plot-"] {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 15px;
+  }
+  .plotly_caption {
+    font-style: italic;
+    margin-top: 10px;
+  }
+  .plotly_controls {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 30px;
+  }
+  .plotly_input_container {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    gap: 10px;
+  }
+  .plotly_input_container > select {
+    padding: 2px 4px;
+    line-height: 1.5em;
+    text-align: center;
+    border-radius: 4px;
+    font-size: 12px;
+    background-color: var(--neutral-200);
+    outline: none;
+    border: 1px solid var(--neutral-300);
+  }
+  .plotly_slider {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+  .plotly_slider > input[type="range"] {
+    -webkit-appearance: none;
+    appearance: none;
+    height: 2px;
+    background: var(--neutral-400);
+    border-radius: 5px;
+    outline: none;
+  }
+  .plotly_slider > input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: var(--primary-color);
+    cursor: pointer;
+  }
+  .plotly_slider > input[type="range"]::-moz-range-thumb {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: var(--primary-color);
+    cursor: pointer;
+  }
+  .plotly_slider > span {
+    font-size: 14px;
+    line-height: 1.6em;
+    min-width: 16px;
+  }
+  /* Dark mode overrides for Plotly readability */
+  [data-theme="dark"] .html-embed__card .xaxislayer-above text,
+  [data-theme="dark"] .html-embed__card .yaxislayer-above text,
+  [data-theme="dark"] .html-embed__card .infolayer text,
+  [data-theme="dark"] .html-embed__card .legend text,
+  [data-theme="dark"] .html-embed__card .annotation text,
+  [data-theme="dark"] .html-embed__card .colorbar text,
+  [data-theme="dark"] .html-embed__card .hoverlayer text {
+    fill: #fff !important;
+  }
+  [data-theme="dark"] .html-embed__card .xaxislayer-above path,
+  [data-theme="dark"] .html-embed__card .yaxislayer-above path,
+  [data-theme="dark"] .html-embed__card .xlines-above,
+  [data-theme="dark"] .html-embed__card .ylines-above {
+    stroke: rgba(255, 255, 255, 0.35) !important;
+  }
+  [data-theme="dark"] .html-embed__card .gridlayer path {
+    stroke: rgba(255, 255, 255, 0.15) !important;
+  }
+  [data-theme="dark"] .html-embed__card .legend rect.bg {
+    fill: rgba(0, 0, 0, 0.25) !important;
+    stroke: rgba(255, 255, 255, 0.2) !important;
+  }
+  [data-theme="dark"] .html-embed__card .hoverlayer .bg {
+    fill: rgba(0, 0, 0, 0.8) !important;
+    stroke: rgba(255, 255, 255, 0.2) !important;
+  }
+  [data-theme="dark"] .html-embed__card .colorbar .cbbg {
+    fill: rgba(0, 0, 0, 0.25) !important;
+    stroke: rgba(255, 255, 255, 0.2) !important;
+  }
+  @media print {
+    .html-embed,
+    .html-embed__card {
+      max-width: 100% !important;
+      width: 100% !important;
+      margin-left: 0 !important;
+      margin-right: 0 !important;
+    }
+    .html-embed__card {
+      padding: 6px;
+    }
+    .html-embed__card.is-frameless {
+      padding: 0;
+    }
+    .html-embed__card svg,
+    .html-embed__card canvas,
+    .html-embed__card img {
+      max-width: 100% !important;
+      height: auto !important;
+    }
+    .html-embed__card > div[id^="frag-"] {
+      width: 100% !important;
+    }
+  }
+  @media print {
+    /* Avoid breaks inside embeds */
+    .html-embed,
+    .html-embed__card {
+      break-inside: avoid;
+      page-break-inside: avoid;
+    }
+    /* Constrain width and scale inner content */
+    .html-embed,
+    .html-embed__card {
+      max-width: 100% !important;
+      width: 100% !important;
+    }
+    .html-embed__card {
+      padding: 6px;
+    }
+    .html-embed__card.is-frameless {
+      padding: 0;
+    }
+    .html-embed__card svg,
+    .html-embed__card canvas,
+    .html-embed__card img,
+    .html-embed__card video,
+    .html-embed__card iframe {
+      max-width: 100% !important;
+      height: auto !important;
+    }
+    .html-embed__card > div[id^="frag-"] {
+      width: 100% !important;
+      max-width: 100% !important;
+    }
+    /* Center and constrain the banner (galaxy) when printing */
+    .html-embed .d3-galaxy {
+      width: 100% !important;
+      max-width: 980px !important;
+      margin-left: auto !important;
+      margin-right: auto !important;
+    }
+  }
+</style>

app/src/components/Note.astro

@@ -0,0 +1,125 @@
+---
+interface Props {
+  title?: string;
+  emoji?: string;
+  class?: string;
+  variant?: "neutral" | "info" | "success" | "danger";
+}
+const {
+  title,
+  emoji,
+  class: className,
+  variant = "neutral",
+  ...props
+} = Astro.props as Props;
+const wrapperClass = ["note", `note--${variant}`, className]
+  .filter(Boolean)
+  .join(" ");
+const hasHeader =
+  (emoji && String(emoji).length > 0) || (title && String(title).length > 0);
+---
+
+<div class={wrapperClass} {...props}>
+  {title ? (
+    <!-- When there's a title, emoji is inline with title -->
+    <div class="note__body">
+      <div class="note__header">
+        {emoji && <span class="note__emoji-inline" aria-hidden="true">{emoji}</span>}
+        <div class="note__title">{title}</div>
+      </div>
+      <div class="note__content">
+        <slot />
+      </div>
+    </div>
+  ) : (
+    <!-- When there's no title, emoji is above content -->
+    <div class="note__layout">
+      {
+        emoji && (
+          <div class="note__icon" aria-hidden="true">
+            <span class="note__emoji">{emoji}</span>
+          </div>
+        )
+      }
+      <div class="note__body">
+        <div class="note__content">
+          <slot />
+        </div>
+      </div>
+    </div>
+  )}
+</div>
+
+<style>
+  .note {
+    background: var(--surface-bg);
+    border-left: 2px solid var(--border-color);
+    border-radius: 4px;
+    padding: 10px 14px;
+    margin: var(--block-spacing-y) 0;
+  }
+  .note__layout {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+  }
+  .note__icon {
+    flex: 0 0 auto;
+    line-height: 1;
+    padding-top: 2px;
+  }
+  .note__emoji {
+    font-size: 32px;
+    line-height: 1;
+    display: block;
+  }
+  .note__body {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+  .note__header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 6px;
+  }
+  .note__emoji-inline {
+    font-size: 20px;
+    line-height: 1;
+    flex-shrink: 0;
+  }
+  .note__title {
+    font-size: 16px;
+    letter-spacing: 0.2px;
+    font-weight: 600;
+    color: var(--text-color);
+    text-align: left;
+  }
+  .note__content {
+    color: var(--text-color);
+    font-size: 0.95rem;
+    text-align: left;
+  }
+  /* Ensure the very last slotted element has no bottom margin */
+  .note .note__content > :global(*:last-child) {
+    margin-bottom: 0 !important;
+  }
+
+  /* Variants */
+  .note.note--neutral {
+    border-left-color: var(--border-color);
+    background: var(--surface-bg);
+  }
+  .note.note--info {
+    border-left-color: #f39c12;
+    background: color-mix(in oklab, #f39c12 10%, var(--surface-bg));
+  }
+  .note.note--success {
+    border-left-color: #2ecc71;
+    background: color-mix(in oklab, #2ecc71 8%, var(--surface-bg));
+  }
+  .note.note--danger {
+    border-left-color: #e74c3c;
+    background: color-mix(in oklab, #e74c3c 8%, var(--surface-bg));
+  }
+</style>

app/src/components/Quote.astro

@@ -0,0 +1,140 @@
+---
+interface Props {
+    author?: string;
+    source?: string;
+}
+
+const { author, source } = Astro.props;
+---
+
+<blockquote class="quote">
+    <div class="quote__text">
+        <slot />
+    </div>
+    {
+        (author || source) && (
+            <footer class="quote__footer">
+                {author && <span class="quote__author" set:html={author} />}
+                {author && source && <span class="quote__separator">, </span>}
+                {source && <span class="quote__source" set:html={source} />}
+            </footer>
+        )
+    }
+</blockquote>
+
+<style>
+    .quote {
+        font-family: var(--default-font-family);
+        margin: 32px 0;
+        max-width: 600px;
+        text-align: left;
+        position: relative;
+        padding: 0;
+        border: none;
+        background: none;
+        box-shadow: none;
+        white-space: normal;
+    }
+
+    .quote::before {
+        content: '"';
+        position: absolute;
+        top: -24px;
+        left: -30px;
+        font-size: 8rem;
+        font-family: var(--default-font-family);
+        font-weight: 400;
+        color: var(--text-color);
+        opacity: 0.05;
+        z-index: -1;
+        line-height: 1;
+        pointer-events: none;
+    }
+
+    .quote__text {
+        font-size: 1.5rem;
+        line-height: 1.4;
+        font-style: normal;
+        font-weight: 400;
+        font-family:
+            "SF Pro Text",
+            -apple-system,
+            BlinkMacSystemFont,
+            "Segoe UI",
+            sans-serif;
+        color: var(--text-color);
+        margin-bottom: 12px;
+        padding: 0;
+        letter-spacing: -0.01em;
+    }
+
+    .quote__text p {
+        margin: 0;
+    }
+
+    .quote__footer {
+        font-size: 0.875rem;
+        color: var(--muted-color);
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        gap: 6px;
+        margin-top: 0;
+        font-family:
+            "SF Pro Text",
+            -apple-system,
+            BlinkMacSystemFont,
+            "Segoe UI",
+            sans-serif;
+    }
+
+    .quote__author {
+        font-weight: 500;
+        opacity: 0.85;
+        font-style: italic;
+        color: var(--text-color);
+    }
+
+    .quote__author::before {
+        content: "— ";
+        font-style: normal;
+    }
+
+    .quote__separator {
+        font-weight: 500;
+        opacity: 0.85;
+        color: var(--text-color);
+    }
+
+    .quote__source {
+        font-weight: 500;
+        opacity: 0.85;
+        font-style: italic;
+        color: var(--text-color);
+    }
+
+    @media (max-width: 640px) {
+        .quote {
+            margin: 24px 0;
+            max-width: 100%;
+        }
+
+        .quote::before {
+            font-size: 6rem;
+            top: -18px;
+            left: -16px;
+        }
+
+        .quote__text {
+            font-size: 1.25rem;
+            line-height: 1.45;
+            padding: 0;
+        }
+
+        .quote__footer {
+            flex-direction: row;
+            gap: 6px;
+            font-size: 0.8rem;
+        }
+    }
+</style>

app/src/components/Reference.astro

@@ -0,0 +1,45 @@
+---
+interface Props {
+    /** ID unique pour la référence */
+    id: string;
+    /** Légende HTML pour la référence */
+    caption: string;
+}
+
+const { id, caption } = Astro.props as Props;
+---
+
+<div class="reference-wrapper" id={id}>
+    <figure class="reference">
+        <div class="reference__content">
+            <slot />
+        </div>
+        <figcaption class="reference__caption" set:html={caption} />
+    </figure>
+</div>
+
+<style>
+    .reference-wrapper {
+        margin: 0;
+    }
+
+    .reference {
+        margin: 0;
+    }
+
+    .reference__content {
+        /* Le contenu peut être n'importe quoi */
+    }
+
+    .reference__caption {
+        text-align: left;
+        font-size: 0.9rem;
+        color: var(--muted-color);
+        margin-top: 6px;
+        background: var(--page-bg);
+        position: relative;
+        z-index: var(--z-elevated);
+        display: block;
+        width: 100%;
+    }
+</style>

app/src/components/Seo.astro

@@ -0,0 +1,51 @@
+---
+interface Props {
+  title: string;
+  description?: string;
+  authors?: string[];
+  published?: string;
+  tags?: string[];
+  image?: string; // Preferred absolute URL
+}
+
+const { title, description = '', authors = [], published, tags = [], image } = Astro.props as Props;
+
+const url = Astro.url?.toString?.() ?? '';
+const site = (Astro.site ? String(Astro.site) : '') as string;
+
+const ogImage = image && image.length > 0
+  ? (image.startsWith('http') ? image : (site ? new URL(image, site).toString() : image))
+  : undefined;
+
+const jsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'Article',
+  headline: title,
+  description: description || undefined,
+  datePublished: published || undefined,
+  author: authors.map((name) => ({ '@type': 'Person', name })),
+  keywords: tags.length ? tags.join(', ') : undefined,
+  mainEntityOfPage: url || undefined,
+  image: ogImage ? [ogImage] : undefined,
+};
+---
+<title>{title}</title>
+<meta name="description" content={description} />
+<link rel="canonical" href={url} />
+
+<meta property="og:type" content="article" />
+<meta property="og:title" content={title} />
+{description && <meta property="og:description" content={description} />}
+<meta property="og:url" content={url} />
+{ogImage && <meta property="og:image" content={ogImage} />}
+{published && <meta property="article:published_time" content={published} />}
+{authors.map(a => <meta property="article:author" content={a} />)}
+
+<meta name="twitter:card" content={ogImage ? 'summary_large_image' : 'summary'} />
+<meta name="twitter:title" content={title} />
+{description && <meta name="twitter:description" content={description} />}
+{ogImage && <meta name="twitter:image" content={ogImage} />}
+
+<script type="application/ld+json" set:html={JSON.stringify(jsonLd)} />
+
+

app/src/components/Sidenote.astro

@@ -0,0 +1,99 @@
+---
+
+---
+
+<div class="sidenote-container">
+  <aside class="sidenote">
+    <slot />
+  </aside>
+</div>
+
+<script>
+  document.addEventListener("DOMContentLoaded", () => {
+    const containers = document.querySelectorAll(".sidenote-container");
+
+    containers.forEach((container) => {
+      // Find the previous element (sibling just before)
+      const previousElement = container.previousElementSibling as HTMLElement;
+
+      if (previousElement && previousElement.parentNode) {
+        // Create a wrapper div that will contain both the previous element and the sidenote
+        const wrapper = document.createElement("div");
+        wrapper.className = "sidenote-wrapper";
+
+        // Insert the wrapper before the previous element
+        previousElement.parentNode.insertBefore(wrapper, previousElement);
+
+        // Move both the previous element and the sidenote container into the wrapper
+        wrapper.appendChild(previousElement);
+        wrapper.appendChild(container);
+
+        // Style the wrapper to create the layout
+        wrapper.style.position = "relative";
+        wrapper.style.display = "block";
+
+        // Style the sidenote container so it positions correctly
+        const sidenoteContainer = container as HTMLElement;
+        sidenoteContainer.style.position = "absolute";
+        sidenoteContainer.style.top = "0";
+        sidenoteContainer.style.right = "-292px"; // 260px width + 32px gap
+        sidenoteContainer.style.width = "260px";
+
+        // Display the container with a fade-in
+        sidenoteContainer.style.display = "block";
+        sidenoteContainer.style.opacity = "0";
+
+        // Fade-in with transition
+        setTimeout(() => {
+          sidenoteContainer.style.opacity = "1";
+        }, 10);
+      }
+    });
+  });
+</script>
+
+<style is:global>
+  .sidenote-wrapper {
+    /* Le wrapper contient l'élément original et le sidenote */
+    position: relative;
+    display: block;
+  }
+
+  .sidenote-container {
+    /* Caché par défaut, sera affiché par JS */
+    display: none;
+    margin: 0;
+    /* Transition for fade-in */
+    transition: opacity 0.3s ease-in-out;
+  }
+
+  .sidenote {
+    border-radius: 8px;
+    padding: 0 30px;
+    font-size: 0.9rem;
+    color: var(--muted-color);
+    margin: 0;
+  }
+
+  @media (--bp-content-collapse) {
+    .sidenote-wrapper {
+      /* Sur mobile, le wrapper n'a pas besoin de position relative */
+      position: static !important;
+    }
+
+    .sidenote-container {
+      position: static !important;
+      width: auto !important;
+      right: auto !important;
+      top: auto !important;
+      margin-top: 8px;
+      /* Affichage normal sur mobile */
+      display: block !important;
+      opacity: 1 !important;
+    }
+
+    .sidenote {
+      padding: 0;
+    }
+  }
+</style>

app/src/components/TableOfContents.astro

@@ -0,0 +1,860 @@
+---
+export interface Props {
+  tableOfContentAutoCollapse?: boolean;
+}
+const { tableOfContentAutoCollapse = false } = Astro.props as Props;
+---
+
+<nav
+  class="table-of-contents"
+  aria-label="Table of Contents"
+  data-auto-collapse={tableOfContentAutoCollapse ? "1" : "0"}
+>
+  <div class="title">Table of Contents</div>
+  <div id="article-toc-placeholder"></div>
+</nav>
+<details class="table-of-contents-mobile">
+  <summary>Table of Contents</summary>
+  <div id="article-toc-mobile-placeholder"></div>
+</details>
+
+<script is:inline>
+  // Build TOC from article headings (h2/h3/h4) and render into the sticky aside
+  const buildTOC = () => {
+    const holder = document.getElementById("article-toc-placeholder");
+    const holderMobile = document.getElementById(
+      "article-toc-mobile-placeholder",
+    );
+    // Always rebuild TOC to avoid stale entries
+    if (holder) holder.innerHTML = "";
+    if (holderMobile) holderMobile.innerHTML = "";
+    const articleRoot = document.querySelector("section.content-grid main");
+    if (!articleRoot) return;
+    const headings = articleRoot.querySelectorAll("h2, h3, h4");
+    if (!headings.length) return;
+
+    // Inclure tous les titres H2/H3/H4 sans filtrer "Table of contents"
+    const headingsArr = Array.from(headings);
+    if (!headingsArr.length) return;
+
+    // Ensure unique ids for headings (deduplicate duplicates)
+    const usedIds = new Set();
+    const slugify = (s) =>
+      String(s || "")
+        .toLowerCase()
+        .trim()
+        .replace(/\s+/g, "_")
+        .replace(/[^a-z0-9_\-]/g, "");
+    headingsArr.forEach((h) => {
+      let id = (h.id || "").trim();
+      if (!id) {
+        const base = slugify(h.textContent || "");
+        id = base || "section";
+      }
+      let candidate = id;
+      let n = 2;
+      while (usedIds.has(candidate)) {
+        candidate = `${id}-${n++}`;
+      }
+      if (h.id !== candidate) h.id = candidate;
+      usedIds.add(candidate);
+    });
+
+    const nav = document.createElement("nav");
+    let ulStack = [document.createElement("ul")];
+    nav.appendChild(ulStack[0]);
+
+    const levelOf = (tag) => (tag === "H2" ? 2 : tag === "H3" ? 3 : 4);
+    let prev = 2;
+    let headingCount = 0;
+    headingsArr.forEach((h) => {
+      const lvl = levelOf(h.tagName);
+      // adjust depth
+      while (lvl > prev) {
+        const ul = document.createElement("ul");
+        ulStack[ulStack.length - 1].lastElementChild?.appendChild(ul);
+        ulStack.push(ul);
+        prev++;
+      }
+      while (lvl < prev) {
+        ulStack.pop();
+        prev--;
+      }
+      const li = document.createElement("li");
+      const a = document.createElement("a");
+      a.href = "#" + h.id;
+      a.textContent = h.textContent;
+      a.target = "_self";
+      li.appendChild(a);
+      // Ajouter un index unique à chaque heading pour le tracking
+      li.setAttribute("data-heading-idx", String(headingCount));
+      headingCount++;
+      ulStack[ulStack.length - 1].appendChild(li);
+    });
+
+    if (holder) holder.appendChild(nav);
+    const navClone = nav.cloneNode(true);
+    if (holderMobile) holderMobile.appendChild(navClone);
+
+    // active link on scroll
+    const links = [
+      ...(holder ? holder.querySelectorAll("a") : []),
+      ...(holderMobile ? holderMobile.querySelectorAll("a") : []),
+    ];
+    // Read breakpoint from CSS var and set autoCollapse only on desktop (disabled on mobile)
+    const getCollapsePx = () => {
+      const root = document.documentElement;
+      const raw = getComputedStyle(root)
+        .getPropertyValue("--bp-content-collapse")
+        .trim();
+      return raw || "1100px";
+    };
+    const mq = window.matchMedia(`(max-width: ${getCollapsePx()})`);
+    const attrEnabled =
+      document
+        .querySelector(".table-of-contents")
+        ?.getAttribute("data-auto-collapse") === "1";
+    let autoCollapse = attrEnabled && !mq.matches;
+
+    // Inject styles for collapsible & animation (tous les niveaux)
+    const ensureStyles = () => {
+      if (document.getElementById("toc-collapse-style")) return;
+      const style = document.createElement("style");
+      style.id = "toc-collapse-style";
+      style.textContent = `
+        .table-of-contents nav.table-of-contents-collapsible li > ul,
+        details.table-of-contents-mobile nav.table-of-contents-collapsible li > ul { overflow: hidden; transition: height 200ms ease; }
+        .table-of-contents nav.table-of-contents-collapsible li.collapsed > ul,
+        details.table-of-contents-mobile nav.table-of-contents-collapsible li.collapsed > ul { display: block; }
+      `;
+      document.head.appendChild(style);
+    };
+    ensureStyles();
+
+    const getAllItemsWithChildren = () => {
+      const sideNav = holder ? holder.querySelector("nav") : null;
+      const mobileNav = holderMobile ? holderMobile.querySelector("nav") : null;
+      const q = (navEl) =>
+        navEl
+          ? Array.from(navEl.querySelectorAll("li[data-heading-idx]")).filter(
+              (li) => li.querySelector(":scope > ul"),
+            )
+          : [];
+      return {
+        sideNav,
+        mobileNav,
+        sideItems: q(sideNav),
+        mobileItems: q(mobileNav),
+      };
+    };
+
+    const setNavCollapsible = () => {
+      const sideNav = holder ? holder.querySelector("nav") : null;
+      const mobileNav = holderMobile ? holderMobile.querySelector("nav") : null;
+      if (sideNav) sideNav.classList.add("table-of-contents-collapsible");
+      if (mobileNav) mobileNav.classList.add("table-of-contents-collapsible");
+    };
+
+    const measure = (el) => {
+      if (!el) return 0;
+      // Temporarily set height to auto to measure scrollHeight reliably
+      const prev = el.style.height;
+      el.style.height = "auto";
+
+      // Force un reflow pour que le navigateur calcule les wraps de texte
+      void el.offsetHeight;
+
+      // Maintenant scrollHeight inclut la vraie hauteur avec tous les line wraps
+      const h = el.scrollHeight;
+      el.style.height = prev || "";
+      return h;
+    };
+
+    // Tracker les animations en cours pour pouvoir les annuler
+    const activeAnimations = new Map();
+
+    const cancelAnimation = (el) => {
+      if (!el) return;
+      const animData = activeAnimations.get(el);
+      if (animData) {
+        // Nettoyer le listener de l'animation précédente
+        el.removeEventListener("transitionend", animData.onEnd);
+        activeAnimations.delete(el);
+      }
+    };
+
+    const animateTo = (el, target) => {
+      if (!el) return;
+
+      // Annuler toute animation en cours sur cet élément
+      cancelAnimation(el);
+
+      // Obtenir la hauteur ACTUELLE (même si une animation est en cours)
+      const current = parseFloat(getComputedStyle(el).height) || 0;
+
+      // Si on est déjà proche de la cible, pas besoin d'animer
+      if (Math.abs(current - target) < 1) {
+        el.style.height = target ? "auto" : "0px";
+        return;
+      }
+
+      // Démarrer depuis la hauteur actuelle
+      el.style.height = current + "px";
+      // Force reflow
+      void el.offsetHeight;
+
+      // Aller vers la cible
+      el.style.height = target + "px";
+
+      // Créer le listener de fin
+      const onEnd = (e) => {
+        if (e.propertyName !== "height") return;
+        el.removeEventListener("transitionend", onEnd);
+        activeAnimations.delete(el);
+        if (target > 0) el.style.height = "auto";
+      };
+
+      // Sauvegarder le listener pour pouvoir l'annuler plus tard
+      activeAnimations.set(el, { onEnd });
+      el.addEventListener("transitionend", onEnd);
+    };
+
+    let prevActiveIdx = -1;
+    let prevActiveElements = new Set();
+    let prevActiveHeadingId = null;
+
+    const setCollapsedState = (activeIdx) => {
+      if (!autoCollapse) return;
+      if (activeIdx == null || activeIdx < 0) activeIdx = 0;
+      const { sideItems, mobileItems } = getAllItemsWithChildren();
+
+      // Trouver l'élément <li> correspondant au heading actif et tous ses ancêtres
+      const getActiveAndAncestors = (items, targetIdx) => {
+        const toExpand = new Set();
+
+        // Trouver le <li> qui correspond au targetIdx
+        const findActiveLi = (li) => {
+          const idx = Number(li.getAttribute("data-heading-idx") || "-1");
+          if (idx === targetIdx) {
+            return li;
+          }
+
+          const childUl = li.querySelector(":scope > ul");
+          if (!childUl) return null;
+
+          const childLis = childUl.querySelectorAll(
+            ":scope > li[data-heading-idx]",
+          );
+          for (const child of childLis) {
+            const found = findActiveLi(child);
+            if (found) return found;
+          }
+          return null;
+        };
+
+        let activeLi = null;
+        for (const li of items) {
+          activeLi = findActiveLi(li);
+          if (activeLi) break;
+        }
+
+        if (!activeLi) return toExpand;
+
+        // Collecter l'élément actif lui-même
+        const activeIdx = Number(
+          activeLi.getAttribute("data-heading-idx") || "-1",
+        );
+        toExpand.add(activeIdx);
+
+        // Remonter et collecter TOUS les ancêtres, sans condition
+        // La structure de la TOC détermine automatiquement qui doit être ouvert
+        let current = activeLi;
+        while (current) {
+          const parent = current.parentElement?.closest("li[data-heading-idx]");
+          if (parent) {
+            const parentIdx = Number(
+              parent.getAttribute("data-heading-idx") || "-1",
+            );
+            toExpand.add(parentIdx);
+            current = parent;
+          } else {
+            break;
+          }
+        }
+
+        return toExpand;
+      };
+
+      const update = (items) => {
+        const newActiveAncestors = getActiveAndAncestors(items, activeIdx);
+
+        // Étape 0 : Annuler TOUTES les animations en cours avant de commencer
+        // Cela évite les conflits si l'utilisateur scroll rapidement
+        items.forEach((li) => {
+          const sub = li.querySelector(":scope > ul");
+          if (sub) cancelAnimation(sub);
+        });
+
+        // Étape 1 : Identifier TOUS les éléments qui vont changer d'état
+        const allChanges = [];
+        items.forEach((li) => {
+          const sub = li.querySelector(":scope > ul");
+          if (!sub) return;
+
+          const idx = Number(li.getAttribute("data-heading-idx") || "-1");
+
+          // Un élément doit être expanded SI il contient (directement ou indirectement) le heading actif
+          // Donc soit il est dans newActiveAncestors, soit un de ses descendants l'est
+          let shouldBeExpanded = false;
+
+          // Vérifier si cet élément ou un de ses descendants est dans le chemin actif
+          const allDescendants = li.querySelectorAll("li[data-heading-idx]");
+          const allRelatedIndices = [
+            idx,
+            ...Array.from(allDescendants).map((d) =>
+              Number(d.getAttribute("data-heading-idx") || "-1"),
+            ),
+          ];
+
+          // Si au moins un de ces indices est dans newActiveAncestors, garder ouvert
+          shouldBeExpanded = allRelatedIndices.some((i) =>
+            newActiveAncestors.has(i),
+          );
+
+          const isCurrentlyCollapsed = li.classList.contains("collapsed");
+
+          const isChanging =
+            (shouldBeExpanded && isCurrentlyCollapsed) ||
+            (!shouldBeExpanded && !isCurrentlyCollapsed);
+
+          if (isChanging) {
+            allChanges.push({ li, sub, shouldBeExpanded, idx });
+          }
+        });
+
+        // Étape 2 : Parmi tous les changements, trouver ceux qui sont des "top-level"
+        // (= n'ont PAS d'ancêtre qui change aussi)
+        const topLevelChanges = [];
+        const descendantChanges = [];
+
+        allChanges.forEach((change) => {
+          let hasAncestorChanging = false;
+
+          // Remonter l'arbre pour voir si un ancêtre change aussi
+          let currentLi = change.li;
+          while (currentLi) {
+            const parentLi = currentLi.parentElement?.closest(
+              "li[data-heading-idx]",
+            );
+            if (!parentLi) break;
+
+            const parentIdx = Number(
+              parentLi.getAttribute("data-heading-idx") || "-1",
+            );
+
+            // Vérifier si ce parent est dans la liste des changements
+            const parentIsChanging = allChanges.some(
+              (c) => c.idx === parentIdx,
+            );
+            if (parentIsChanging) {
+              hasAncestorChanging = true;
+              break;
+            }
+
+            currentLi = parentLi;
+          }
+
+          if (hasAncestorChanging) {
+            descendantChanges.push(change);
+          } else {
+            topLevelChanges.push(change);
+          }
+        });
+
+        // Étape 3 : Appliquer TOUS les descendants instantanément (sans animation)
+        // Ceci doit être fait AVANT toute animation pour que les hauteurs soient correctes
+        if (descendantChanges.length > 0) {
+          descendantChanges.forEach(({ li, sub, shouldBeExpanded }) => {
+            const oldTransition = sub.style.transition;
+            sub.style.transition = "none";
+
+            if (shouldBeExpanded) {
+              li.classList.remove("collapsed");
+              sub.style.height = "auto";
+            } else {
+              li.classList.add("collapsed");
+              sub.style.height = "0px";
+            }
+
+            // Forcer un reflow immédiat pour cet élément
+            void sub.offsetHeight;
+            sub.style.transition = oldTransition || "";
+          });
+
+          // Forcer un reflow global pour que TOUS les changements soient appliqués
+          void document.body.offsetHeight;
+
+          // IMPORTANT : Attendre un frame pour que le navigateur ait fini tous les calculs
+          // avant de mesurer les hauteurs des parents
+        }
+
+        // Étape 4 : Animer SEULEMENT les top-level avec requestAnimationFrame
+        // Les descendants sont déjà dans leur état final, donc la hauteur du parent sera correcte
+        if (topLevelChanges.length > 0) {
+          // Double requestAnimationFrame pour être sûr que le DOM est stabilisé
+          requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+              topLevelChanges.forEach(({ li, sub, shouldBeExpanded }) => {
+                if (shouldBeExpanded) {
+                  li.classList.remove("collapsed");
+
+                  // CRITIQUE : Avant de mesurer, mettre ABSOLUMENT TOUS les sous-éléments
+                  // dans leur état final (expanded OU collapsed) de manière synchrone
+                  const allInnerItems = sub.querySelectorAll(
+                    "li[data-heading-idx]",
+                  );
+
+                  // D'abord, désactiver toutes les transitions
+                  allInnerItems.forEach((innerLi) => {
+                    const innerSub = innerLi.querySelector(":scope > ul");
+                    if (innerSub) {
+                      innerSub.style.transition = "none";
+                    }
+                  });
+
+                  // Ensuite, mettre chaque élément dans son état final
+                  allInnerItems.forEach((innerLi) => {
+                    const innerIdx = Number(
+                      innerLi.getAttribute("data-heading-idx") || "-1",
+                    );
+                    const innerSub = innerLi.querySelector(":scope > ul");
+                    if (innerSub) {
+                      if (newActiveAncestors.has(innerIdx)) {
+                        // Cet élément devrait être expanded
+                        innerLi.classList.remove("collapsed");
+                        innerSub.style.height = "auto";
+                      } else {
+                        // Cet élément devrait être collapsed
+                        innerLi.classList.add("collapsed");
+                        innerSub.style.height = "0px";
+                      }
+                    }
+                  });
+
+                  // Forcer un reflow global pour que TOUT soit calculé
+                  void sub.offsetHeight;
+
+                  // Réactiver les transitions
+                  allInnerItems.forEach((innerLi) => {
+                    const innerSub = innerLi.querySelector(":scope > ul");
+                    if (innerSub) {
+                      innerSub.style.transition = "";
+                    }
+                  });
+
+                  // Maintenant on peut mesurer avec confiance : tous les éléments
+                  // sont dans leur état final définitif
+                  const target = measure(sub);
+                  animateTo(sub, target);
+                } else {
+                  li.classList.add("collapsed");
+                  animateTo(sub, 0);
+                }
+              });
+            });
+          });
+        }
+
+        prevActiveElements = newActiveAncestors;
+      };
+
+      update(sideItems);
+      update(mobileItems);
+      setNavCollapsible();
+      prevActiveIdx = activeIdx;
+    };
+
+    // When switching between desktop/mobile, refresh autoCollapse and expand all on mobile
+    const expandAll = () => {
+      const { sideItems, mobileItems } = getAllItemsWithChildren();
+      const expand = (items) =>
+        items.forEach((li) => {
+          li.classList.remove("collapsed");
+          const sub = li.querySelector(":scope > ul");
+          if (sub) sub.style.height = "auto";
+        });
+      expand(sideItems);
+      expand(mobileItems);
+    };
+
+    const onMqChange = () => {
+      autoCollapse = attrEnabled && !mq.matches;
+      if (!autoCollapse) {
+        expandAll();
+      } else {
+        setCollapsedState(prevActiveIdx);
+      }
+    };
+    if (mq.addEventListener) mq.addEventListener("change", onMqChange);
+    else if (mq.addListener) mq.addListener(onMqChange);
+
+    // Debounce pour traiter la dernière mise à jour après que le scroll se stabilise
+    let scrollDebounceTimer = null;
+    let lastRequestedIdx = -1;
+    let isProcessing = false;
+
+    // Fonction pour mettre à jour l'URL avec l'ancre actuelle
+    const updateURL = (headingId) => {
+      if (!headingId) return;
+
+      const newUrl = `${window.location.pathname}${window.location.search}#${headingId}`;
+
+      // Mettre à jour l'URL sans recharger la page
+      if (window.location.href !== newUrl) {
+        history.pushState(null, null, newUrl);
+
+        // Essayer différentes méthodes pour communiquer avec la fenêtre parente
+        if (window.parent !== window) {
+          try {
+            // Méthode 1: Essayer de modifier directement l'URL du parent (si autorisé)
+            try {
+              window.parent.location.hash = headingId;
+              console.debug("Successfully updated parent URL directly");
+              return;
+            } catch (e) {
+              console.debug("Direct parent URL update blocked:", e.message);
+            }
+
+            // Méthode 2: Essayer avec window.top (fenêtre racine)
+            try {
+              if (window.top !== window && window.top !== window.parent) {
+                window.top.location.hash = headingId;
+                console.debug("Successfully updated top window URL directly");
+                return;
+              }
+            } catch (e) {
+              console.debug("Direct top window URL update blocked:", e.message);
+            }
+
+            // Méthode 3: Utiliser postMessage avec différents formats vers parent
+            const messages = [
+              {
+                type: "urlChange",
+                url: newUrl,
+                hash: headingId,
+              },
+              {
+                type: "anchorChange",
+                anchorId: headingId,
+                url: newUrl,
+              },
+              {
+                type: "HF_SPACE_URL_UPDATE",
+                hash: headingId,
+                url: newUrl,
+              },
+              // Format officiel Hugging Face
+              {
+                queryString: "",
+                hash: headingId,
+              },
+            ];
+
+            messages.forEach((msg) => {
+              try {
+                window.parent.postMessage(msg, "*");
+              } catch (e) {
+                console.debug("PostMessage to parent failed:", e.message);
+              }
+            });
+
+            // Méthode 4: Essayer avec window.top
+            try {
+              if (window.top !== window) {
+                messages.forEach((msg) => {
+                  try {
+                    window.top.postMessage(msg, "*");
+                  } catch (e) {
+                    console.debug("PostMessage to top failed:", e.message);
+                  }
+                });
+              }
+            } catch (e) {
+              console.debug("PostMessage to top window failed:", e.message);
+            }
+
+            // Méthode 5: Essayer avec l'origine spécifique Hugging Face
+            try {
+              window.parent.postMessage(
+                {
+                  queryString: "",
+                  hash: headingId,
+                },
+                "https://huggingface.co",
+              );
+              console.debug("Sent HF official format message");
+            } catch (e) {
+              console.debug("HF official format failed:", e.message);
+            }
+          } catch (e) {
+            console.debug(
+              "All parent communication methods failed:",
+              e.message,
+            );
+          }
+        }
+      }
+    };
+
+    const onScroll = () => {
+      // active link highlight
+      let activeIdx = -1;
+      let activeHeadingId = null;
+
+      for (let i = headingsArr.length - 1; i >= 0; i--) {
+        const top = headingsArr[i].getBoundingClientRect().top;
+        if (top - 60 <= 0) {
+          links.forEach((l) => l.classList.remove("active"));
+          const id = "#" + headingsArr[i].id;
+          const actives = Array.from(links).filter(
+            (l) => l.getAttribute("href") === id,
+          );
+          actives.forEach((a) => a.classList.add("active"));
+          // Utiliser l'index du heading actif (n'importe quel niveau)
+          activeIdx = i;
+          activeHeadingId = headingsArr[i].id;
+          break;
+        }
+      }
+
+      // Track active heading (without updating URL)
+      if (activeHeadingId) {
+        prevActiveHeadingId = activeHeadingId;
+      }
+
+      if (activeIdx === prevActiveIdx) return;
+
+      // Sauvegarder la dernière demande
+      lastRequestedIdx = activeIdx;
+
+      // Si on est en train de traiter, ne rien faire (on traitera la dernière demande après)
+      if (isProcessing) return;
+
+      // Debounce : attendre un peu que le scroll se stabilise
+      clearTimeout(scrollDebounceTimer);
+      scrollDebounceTimer = setTimeout(() => {
+        // Traiter la dernière demande
+        if (lastRequestedIdx !== prevActiveIdx) {
+          isProcessing = true;
+          setCollapsedState(lastRequestedIdx);
+          // Le processing flag sera réinitialisé après les animations
+          setTimeout(() => {
+            isProcessing = false;
+            // Si une nouvelle demande est arrivée pendant qu'on traitait, la traiter maintenant
+            if (lastRequestedIdx !== prevActiveIdx) {
+              onScroll();
+            }
+          }, 250); // Attendre que les animations soient lancées
+        }
+      }, 100); // Debounce de 100ms
+    };
+
+    // If auto-collapse, collapse immediately (expand first section) before any scroll
+    if (autoCollapse) setCollapsedState(0);
+
+    window.addEventListener("scroll", onScroll);
+
+    // Gérer la navigation par ancres au chargement de la page
+    const handleInitialNavigation = () => {
+      const hash = window.location.hash;
+      if (hash) {
+        const targetElement = document.querySelector(hash);
+        if (targetElement) {
+          // Attendre que le DOM soit prêt puis faire défiler vers l'élément
+          setTimeout(() => {
+            targetElement.scrollIntoView({ block: "start" });
+            // Mettre à jour l'URL après le scroll
+            setTimeout(() => {
+              updateURL(hash.substring(1)); // Enlever le # du hash
+            }, 100);
+          }, 100);
+        }
+      } else {
+        // No hash on load — just highlight the first section in the TOC
+        // without modifying the URL (prevents unwanted auto-scroll on reload)
+      }
+    };
+
+    // Initialize state
+    onScroll();
+
+    // Gérer la navigation initiale
+    handleInitialNavigation();
+
+    // Gérer les événements de navigation du navigateur (boutons précédent/suivant)
+    window.addEventListener("popstate", (event) => {
+      const hash = window.location.hash;
+      if (hash) {
+        const targetElement = document.querySelector(hash);
+        if (targetElement) {
+          targetElement.scrollIntoView({ block: "start" });
+        }
+      } else {
+        // Si pas d'ancre, aller au début de la page
+        window.scrollTo({ top: 0 });
+      }
+    });
+
+    // Close mobile accordion when a link inside it is clicked
+    if (holderMobile) {
+      const details = holderMobile.closest("details");
+      holderMobile.addEventListener("click", (ev) => {
+        const target = ev.target;
+        const anchor =
+          target && "closest" in target ? target.closest("a") : null;
+        if (anchor instanceof HTMLAnchorElement && details && details.open) {
+          details.open = false;
+        }
+      });
+    }
+  };
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", buildTOC, { once: true });
+  } else {
+    buildTOC();
+  }
+</script>
+
+<style is:global>
+  /* Sticky aside */
+  .table-of-contents {
+    position: sticky;
+    top: 32px;
+    margin-top: 12px;
+  }
+
+  .table-of-contents nav {
+    border-left: 1px solid var(--border-color);
+    padding-left: 16px;
+    font-size: 13px;
+  }
+
+  .table-of-contents .title {
+    font-weight: 600;
+    font-size: 14px;
+    margin-bottom: 8px;
+  }
+
+  /* Look & feel */
+  .table-of-contents nav ul {
+    margin: 0 0 6px;
+    padding-left: 1em;
+  }
+
+  .table-of-contents nav li {
+    list-style: none;
+    margin: 0.25em 0;
+  }
+
+  .table-of-contents nav a,
+  .table-of-contents nav a:link,
+  .table-of-contents nav a:visited {
+    color: var(--text-color);
+    text-decoration: none;
+    border-bottom: none;
+  }
+
+  .table-of-contents nav > ul > li > a {
+    font-weight: 700;
+  }
+
+  .table-of-contents nav a:hover {
+    text-decoration: underline solid var(--muted-color);
+  }
+
+  .table-of-contents nav a.active {
+    text-decoration: underline;
+  }
+
+  /* Mobile accordion */
+  .table-of-contents-mobile {
+    display: none;
+    margin: 8px 0 16px;
+  }
+
+  .table-of-contents-mobile > summary {
+    cursor: pointer;
+    list-style: none;
+    padding: var(--spacing-3) var(--spacing-4);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    color: var(--text-color);
+    font-weight: 600;
+    position: relative;
+  }
+
+  .table-of-contents-mobile[open] > summary {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  /* Disclosure arrow for mobile summary */
+  .table-of-contents-mobile > summary::after {
+    content: "";
+    position: absolute;
+    right: var(--spacing-4);
+    top: 50%;
+    width: 8px;
+    height: 8px;
+    border-right: 2px solid currentColor;
+    border-bottom: 2px solid currentColor;
+    transform: translateY(-70%) rotate(45deg);
+    transition: transform 150ms ease;
+    opacity: 0.7;
+  }
+
+  .table-of-contents-mobile[open] > summary::after {
+    transform: translateY(-30%) rotate(-135deg);
+  }
+
+  .table-of-contents-mobile nav {
+    border-left: none;
+    padding: 10px 12px;
+    font-size: 14px;
+    border: 1px solid var(--border-color);
+    border-top: none;
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+  }
+
+  .table-of-contents-mobile nav ul {
+    margin: 0 0 6px;
+    padding-left: 1em;
+  }
+
+  .table-of-contents-mobile nav li {
+    list-style: none;
+    margin: 0.25em 0;
+  }
+
+  .table-of-contents-mobile nav a,
+  .table-of-contents-mobile nav a:link,
+  .table-of-contents-mobile nav a:visited {
+    color: var(--text-color);
+    text-decoration: none;
+    border-bottom: none;
+  }
+
+  .table-of-contents-mobile nav > ul > li > a {
+    font-weight: 700;
+  }
+
+  .table-of-contents-mobile nav a:hover {
+    text-decoration: underline solid var(--muted-color);
+  }
+
+  .table-of-contents-mobile nav a.active {
+    text-decoration: underline;
+  }
+</style>

app/src/components/ThemeToggle.astro

@@ -0,0 +1,117 @@
+<button id="theme-toggle" aria-label="Toggle color theme">
+  <svg
+    class="icon light"
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    aria-hidden="true"
+    focusable="false"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <circle cx="12" cy="12" r="5"></circle>
+    <line x1="12" y1="1" x2="12" y2="4"></line>
+    <line x1="12" y1="20" x2="12" y2="23"></line>
+    <line x1="1" y1="12" x2="4" y2="12"></line>
+    <line x1="20" y1="12" x2="23" y2="12"></line>
+    <line x1="4.22" y1="4.22" x2="6.34" y2="6.34"></line>
+    <line x1="17.66" y1="17.66" x2="19.78" y2="19.78"></line>
+    <line x1="4.22" y1="19.78" x2="6.34" y2="17.66"></line>
+    <line x1="17.66" y1="6.34" x2="19.78" y2="4.22"></line>
+  </svg>
+  <svg
+    class="icon dark"
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    aria-hidden="true"
+    focusable="false"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+  </svg>
+  <script>
+    const btn = document.getElementById("theme-toggle");
+    const media =
+      window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)");
+    const prefersDark = media && media.matches;
+    const saved = localStorage.getItem("theme"); // 'light' | 'dark' | null
+
+    const apply = (mode) => {
+      document.documentElement.dataset.theme = mode;
+    };
+
+    // Initial mode: default to light, then use localStorage, else system
+    apply(saved || (prefersDark ? "dark" : "light"));
+
+    // If user hasn't chosen manually, follow system changes
+    if (!saved && media) {
+      const syncWithSystem = (e) => apply(e.matches ? "dark" : "light");
+      if (media.addEventListener)
+        media.addEventListener("change", syncWithSystem);
+      else if (media.addListener) media.addListener(syncWithSystem);
+    }
+
+    const toggleTheme = () => {
+      const next =
+        document.documentElement.dataset.theme === "dark" ? "light" : "dark";
+      localStorage.setItem("theme", next);
+      apply(next);
+    };
+
+    if (btn) {
+      btn.addEventListener("click", toggleTheme);
+    }
+
+    // Ajouter le raccourci clavier pour la touche D
+    document.addEventListener("keydown", (e) => {
+      // Vérifier que la touche D est pressée et qu'on n'est pas dans un input/textarea
+      if (e.key === "d" || e.key === "D") {
+        const activeElement = document.activeElement;
+        const isInput =
+          activeElement &&
+          (activeElement.tagName === "INPUT" ||
+            activeElement.tagName === "TEXTAREA" ||
+            (activeElement as HTMLElement).contentEditable === "true");
+
+        if (!isInput) {
+          e.preventDefault();
+          toggleTheme();
+        }
+      }
+    });
+  </script>
+</button>
+
+<style>
+  #theme-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    border: none;
+    background: transparent;
+    padding: 6px 10px;
+    border-radius: 8px;
+    cursor: pointer;
+    color: var(--text-color) !important;
+  }
+  #theme-toggle .icon.dark {
+    display: none;
+  }
+  [data-theme="dark"] #theme-toggle .icon.light {
+    display: none;
+  }
+  [data-theme="dark"] #theme-toggle .icon.dark {
+    display: inline;
+  }
+  #theme-toggle .icon {
+    filter: none !important;
+  }
+</style>

app/src/components/Wide.astro

@@ -0,0 +1,9 @@
+---
+const { class: className, ...props } = Astro.props;
+const wrapperClass = ["wide", className].filter(Boolean).join(" ");
+---
+<div class={wrapperClass} {...props}>
+  <slot />
+</div>
+
+

app/src/content/article.mdx

@@ -0,0 +1,332 @@
+---
+seoThumbImage: 'https://seongland.com/article/crl/og.png'
+title: 'Control Reinforcement Learning'
+subtitle: >-
+  Interpretable Token-Level Steering of LLMs via SAE Features
+description: 'CRL: Interpretable Token-Level Steering of LLMs via Sparse Autoencoder Features'
+authors:
+  - name: Seonglae Cho
+    affiliations:
+      - 1
+      - 2
+  - name: Zekun Wu
+    affiliations:
+      - 1
+      - 2
+  - name: Adriano Koshiyama
+    affiliations:
+      - 1
+      - 2
+affiliations:
+  - name: Holistic AI
+    url: 'https://holisticai.com'
+  - name: University College London
+    url: 'https://ucl.ac.uk'
+published: 'Feb. 13, 2026'
+licence: >
+  Diagrams and text are licensed under <a
+  href="https://creativecommons.org/licenses/by/4.0/" target="_blank"
+  rel="noopener noreferrer">CC‑BY 4.0</a>.
+doi: '10.48550/arXiv.2602.10437'
+arxiv: '2602.10437'
+tags:
+  - mechanistic interpretability
+  - sparse autoencoders
+  - reinforcement learning
+  - language models
+  - feature attribution
+
+tableOfContentsAutoCollapse: true
+---
+
+import Sidenote from '../components/Sidenote.astro';
+import HtmlEmbed from '../components/HtmlEmbed.astro';
+import Note from '../components/Note.astro';
+import Wide from '../components/Wide.astro';
+import FullWidth from '../components/FullWidth.astro';
+import Quote from '../components/Quote.astro';
+import Reference from '../components/Reference.astro';
+
+## Abstract
+
+Watching a feature light up tells you it was present. It does not tell you it did anything. [Sparse autoencoders](https://texonom.com/1fa3c713076d4e34aa43f7c1dce62a94) (SAEs) decompose language model activations into interpretable features [@bricken2023monosemanticity; @huben2024sparse], and almost everything built on them reads off *which* features activate, not which ones actually **change model outputs** when amplified. We introduce **Control [Reinforcement Learning](https://texonom.com/3e6e1e5b806941b6b586ce2c3d1bbd02) (CRL)**, which trains a policy to select SAE features for steering at each token, producing interpretable intervention logs.
+
+**Adaptive Feature Masking** encourages diverse feature discovery while preserving single-feature interpretability. The framework yields new analysis capabilities: **branch point tracking** locates tokens where feature choice determines output correctness; **critic trajectory analysis** separates policy limitations from value estimation errors; and **layer-wise comparison** reveals syntactic features in early layers and semantic features in later layers [@tenney2019bert].
+
+On [Gemma 2](https://texonom.com/8aa07c8eba2c4d4ba61213b9a4f711c5) 2B [@gemmateam2024gemma2improvingopen] across [MMLU](https://texonom.com/d2a91b61ee71491d9e6e284a5bdcc709) [@hendrycks2021measuring], [BBQ](https://texonom.com/14bc3c96247d81038bb3c4aa92f78a0d) [@parrish-etal-2022-bbq], GSM8K [@cobbe2021trainingverifierssolvemath], HarmBench, and [XSTest](https://texonom.com/237c3c96247d8090a166c4cbee0dc287), CRL achieves consistent improvements while providing per-token intervention logs. These results establish learned feature steering as a [mechanistic interpretability](https://texonom.com/e40305fd878c46ca85d99ea93ee9a2ff) tool that complements static feature analysis with dynamic intervention probes.
+
+<Wide>
+<HtmlEmbed src="steering-demo.html" title="Token-Level Steering Simulation" desc="Figure 2: Watch how different SAE features steer token generation along divergent paths. The same prompt context leads to correct or incorrect answers depending on which feature is amplified. Feature IDs link to Neuronpedia for detailed activation analysis." />
+</Wide>
+
+## The Problem: Static Feature Analysis Falls Short
+
+Sparse autoencoders have emerged as a powerful tool for decomposing the internal representations of language models. By training an encoder-decoder pair with a sparsity penalty, SAEs recover interpretable features from the [residual stream](https://texonom.com/beb7f1e3c9334362b518f0350300780a) — components that correspond to concepts like "mathematical reasoning" or "safety refusal patterns."
+
+<Sidenote>
+SAEs learn: $\mathcal{L} = \|\mathbf{x} - \hat{\mathbf{x}}\|^2 + \lambda \|\mathbf{z}\|_1$ where $\mathbf{z}$ is the sparse feature activation vector.
+</Sidenote>
+
+But there's a fundamental limitation: **static analysis tells you which features are present, not which ones matter.** Knowing that [Feature 7708](https://neuronpedia.org/gemma-2-2b/20-gemmascope-res-16k/7708) ("mathematical operations") activates on a math problem doesn't tell you whether *amplifying* that feature would improve the model's answer, make it worse, or have no effect at all.
+
+This gap between activation analysis and causal intervention is where CRL enters. Instead of cataloging which features fire, we ask: **which features, when amplified, actually change the model's output?**
+
+<Note variant="info">
+**The key distinction:** Traditional SAE analysis is like reading a map — you can see the terrain. CRL is like walking through it — you discover which paths actually lead somewhere different.
+</Note>
+
+Current approaches to SAE-based control face limitations:
+- **Contrastive methods** require carefully curated positive/negative datasets for each feature
+- **[Activation patching](https://texonom.com/11fc3c96247d80d683e6c67f149c992d)** requires extensive storage and computation for exhaustive feature probing
+- **Manual coefficient tuning** doesn't generalize across layers or tasks
+
+CRL addresses these by framing feature selection as a *learned* decision at every token, using reinforcement learning to discover which features are worth amplifying.
+
+
+## How CRL Works
+
+<Wide>
+<HtmlEmbed src="crl-flowchart-animated.html" title="CRL System Overview" desc="Figure 3: Interactive CRL system diagram. Hover over components to see their role. The policy network observes the residual stream and selects SAE features for steering, while the critic estimates expected outcomes for PPO training." />
+</Wide>
+
+### Formulating Steering as an MDP
+
+CRL treats the control of transformer representations as a **[Markov Decision Process](https://texonom.com/d01c5c23d56648ce843727514008e25c)** over SAE features:
+
+<div class="crl-equation">
+
+$$\tilde{\mathbf{x}}_t = \mathbf{x}_t + c \cdot \mathbf{a}_t \mathbf{W}_{dec}$$
+
+</div>
+
+where $\mathbf{x}_t$ is the residual stream activation at token $t$, $\mathbf{a}_t$ is the binary feature selection vector, $c$ is the steering coefficient, and $\mathbf{W}_{dec}$ is the SAE decoder matrix.
+
+The MDP components are:
+
+- **State** $\mathbf{s} = \mathbf{x}$: the residual stream activation at the intervention layer
+- **Action** $\mathbf{a} \in \{0,1\}^{d_{dict}}$: a sparse binary vector selecting SAE features (typically $k=1$)
+- **Transition**: deterministic, governed by the transformer's forward pass with the steering intervention
+- **Reward**: task-specific binary signal (correct/incorrect output)
+
+<Sidenote>
+Using $k=1$ (single feature selection) is critical for interpretability — each intervention is attributable to exactly one SAE feature.
+</Sidenote>
+
+### The Policy and Critic Networks
+
+<Wide>
+<HtmlEmbed src="policy-critic-diagram.html" title="Policy & Critic Architecture" desc="Figure: The policy observes the residual stream per token and selects SAE features for steering. The critic estimates state values for advantage computation from verifiable rewards." />
+</Wide>
+
+The **policy network** $\pi_\theta$ is a 2-layer MLP with Tanh activation that maps residual stream activations to feature selection logits:
+
+$$\boldsymbol{\mu} = \pi_\theta(\mathbf{s}), \quad \mathbf{a} = \text{TopK}(\boldsymbol{\mu}, k)$$
+
+During training, actions are sampled from a categorical distribution over softmax probabilities for unbiased [policy gradients](https://texonom.com/331be391bdf44796a94ac9d6ddfe6c01). During evaluation, we use deterministic argmax for reproducibility.
+
+The **critic network** $V_\phi$ estimates the state [value function](https://texonom.com/d9d3467fea994443b2336fd7958dc00b), enabling advantage estimation for [PPO](https://texonom.com/87ce8ebe81f84ac1a7617b1f6def9e26) [@schulman2017proximal] training. Crucially, the critic also serves as an *analysis tool* — its learned value estimates reveal where the policy succeeds and fails.
+
+<Note variant="info">
+**Why PPO over [DPO](https://texonom.com/d4099259ad6d443e8f9c2c9d1b45d6db)/[GRPO](https://texonom.com/187c3c96247d80dfb88bceaf4abad43c) [@shao2024deepseekmathpushinglimitsmathematical]?** PPO provides an explicit value function that we analyze as a diagnostic tool. The critic trajectories reveal bottleneck patterns that would be invisible with preference-based methods.
+</Note>
+
+### Partial Observability
+
+CRL-Token operates under partial observability: the policy sees only the residual stream at layer $\ell$, without access to the tokens that will be sampled. We mitigate this by using temperature-0 sampling, making the generation deterministic given the residual stream state.
+
+
+## Adaptive Feature Masking
+
+A naive policy would collapse to repeatedly selecting the same high-reward feature. **Adaptive Feature Masking (AFM)** prevents this by dynamically managing which features are available for selection.
+
+<div class="crl-equation">
+
+$$\text{mask}_i^{(t+1)} = \text{mask}_i^{(t)} \lor \text{active}_i^{(t)}$$
+
+</div>
+
+The mask starts small and **progressively expands** as the model generates tokens — features that naturally activate during generation become available for future policy selections:
+
+1. Policy computes logits and masks unavailable features: $\mathbf{a}_t = \text{TopK}(\boldsymbol{\mu} \odot \text{mask}^{(t)}, k)$
+2. Steering is applied to the residual stream
+3. Natural SAE activations at the current token expand the mask for the next step
+
+This creates a virtuous cycle: early steering may activate new features that become candidates for later steering, encouraging diverse feature discovery while building on the model's own representations.
+
+<Note variant="success">
+AFM is particularly important for multi-token tasks like GSM8K, where the reasoning chain spans hundreds of tokens and different features become relevant at different stages.
+</Note>
+
+
+## Branch Analysis: Where Steering Decides the Answer
+
+This is where CRL's interpretability capabilities become most compelling. **Branch analysis** identifies tokens where the *choice of feature* determines whether the model produces a correct or incorrect answer.
+
+### How Branch Analysis Works
+
+For each generation, we track:
+1. The **context** (shared prefix before the branch point)
+2. The **correct path** — the feature that leads to a correct answer
+3. The **incorrect path** — the feature that leads to a wrong answer
+
+This provides direct causal evidence that specific features are responsible for output quality, not just correlated with it.
+
+### Layer-Specific Feature Semantics
+
+Comparing features selected at Layer 10 vs Layer 20 reveals a striking pattern:
+
+<div class="crl-comparison">
+  <div class="crl-comparison__side crl-comparison__side--correct">
+    <h4>Layer 10: Syntactic Features</h4>
+    <ul>
+      <li><a href="https://neuronpedia.org/gemma-2-2b/10-gemmascope-res-16k/16145"><span class="crl-layer-badge">L10/16145</span></a> "mathematical notation"</li>
+      <li><a href="https://neuronpedia.org/gemma-2-2b/10-gemmascope-res-16k/5423"><span class="crl-layer-badge">L10/5423</span></a> "pronoun references"</li>
+      <li><a href="https://neuronpedia.org/gemma-2-2b/10-gemmascope-res-16k/8428"><span class="crl-layer-badge">L10/8428</span></a> "clinical examinations" (surface similarity)</li>
+      <li><a href="https://neuronpedia.org/gemma-2-2b/10-gemmascope-res-16k/8775"><span class="crl-layer-badge">L10/8775</span></a> "legal contracts" (terminology match)</li>
+    </ul>
+  </div>
+  <div class="crl-comparison__side crl-comparison__side--incorrect">
+    <h4>Layer 20: Semantic Features</h4>
+    <ul>
+      <li><a href="https://neuronpedia.org/gemma-2-2b/10-gemmascope-res-16k/12607"><span class="crl-layer-badge">L10/12607</span></a> "mathematical proofs" (logical structure)</li>
+      <li><a href="https://neuronpedia.org/gemma-2-2b/20-gemmascope-res-16k/11163"><span class="crl-layer-badge">L20/11163</span></a> "assessments and strategic plans"</li>
+      <li><a href="https://neuronpedia.org/gemma-2-2b/20-gemmascope-res-16k/2878"><span class="crl-layer-badge">L20/2878</span></a> "code formatting" (structural patterns)</li>
+      <li><a href="https://neuronpedia.org/gemma-2-2b/20-gemmascope-res-16k/998"><span class="crl-layer-badge">L20/998</span></a> "needs identification" (requirement semantics)</li>
+    </ul>
+  </div>
+</div>
+
+Layer 10 features capture **concrete syntactic patterns** — surface-level notation, entity tracking, formatting. Layer 20 features encode **abstract semantics** — logical derivation structure, planning, and strategic reasoning.
+
+<Note variant="danger">
+**Feature labels have limited predictive value.** A feature labeled "emotional relationships" can solve speed calculations, while "mathematical notation" fails on some arithmetic. This indicates learned steering effects diverge from semantic interpretations derived from activation patterns alone.
+</Note>
+
+Out of 8 analyzed branch pairs, Layer 10 features succeed on **3 cases** (discrete counting, direct arithmetic), while Layer 20 features succeed on **5 cases** (multi-step accumulation, variable reasoning).
+
+
+## Empirical Validation
+
+To confirm that the learned policy selects *meaningful* features — not arbitrary ones — we compare CRL against baselines on five benchmarks. The goal is not performance gain per se, but to validate that the policy has learned a non-trivial feature selection strategy worth analyzing.
+
+<HtmlEmbed src="results-table.html" title="CRL Steering Results" desc="Table 1: Before vs. after CRL steering. Toggle between Gemma 2 2B and [LLaMA](https://texonom.com/f2b6721202d44d469add84d8a366809c) 3.1 8B to compare across tasks and architectures." />
+
+### Learned vs. Random Selection
+
+<Wide>
+<HtmlEmbed src="baseline-comparison.html" title="Steering Baseline Comparison" desc="Figure 5: Random feature selection can degrade performance (−1.81 on BBQ), confirming the policy learns non-trivial feature selection." />
+</Wide>
+
+| Method | BBQ Ambig | HarmBench |
+|--------|-----------|-----------|
+| No Steering (Base) | 60.17 | 41.46 |
+| Random Feature | 58.36 | 45.35 |
+| Random + AFM | 60.16 | 46.96 |
+| Most-Active Feature | 59.94 | 48.03 |
+| **CRL (Ours)** | **65.86** | **49.12** |
+
+Random feature steering can actually *hurt* performance (−1.81 on BBQ Ambig), while selecting the most-active SAE feature barely helps. The learned policy discovers features whose *causal effects* differ from their activation magnitude — precisely the gap that static analysis cannot reveal.
+
+
+## Critic Trajectory Analysis
+
+The learned critic (value function) reveals *where* in the generation process the model's confidence changes — and whether task limitations stem from the policy or the value estimator.
+
+<Wide>
+<HtmlEmbed src="critic-trajectories.html" title="Interactive Critic Trajectory Explorer" desc="Figure 7: Explore critic value trajectories across tasks. GSM8K shows multi-token generation (~1000 steps); HarmBench and XSTest show short-form generation (~30 steps). Toggle between tasks to compare." />
+</Wide>
+
+### Key Observations
+
+For multi-token generation (GSM8K), critic trajectories reveal the *temporal dynamics* of steering:
+
+- **Correct samples** (green): Higher gradients with divergence around token 200–400
+- **Incorrect samples** (red): Flat or declining values throughout
+- **Corrected samples** (blue): Show value increases at the ~400-token point, indicating interventions become more effective in later reasoning stages
+- **Misguided samples** (yellow): Initially high values that drop — the steering seemed promising but ultimately led astray
+
+
+## Feature Interpretability
+
+CRL provides per-token intervention logs that reveal *which* features are selected and *when*. This enables a new form of mechanistic analysis.
+
+### Feature-Token Alignment
+
+<Wide>
+<HtmlEmbed src="token-highlights.html" title="Token-Level Feature Activation Highlights" desc="Figures 8-11: Interactive token-level visualization of SAE feature activations on GSM8K reasoning chains. Corrected examples show feature activations aligning with mathematical tokens; misguided examples show token-feature misalignment. Hover tokens for details; click feature pills to view on Neuronpedia." />
+</Wide>
+
+**Corrected examples** show clear semantic coherence: features activate on mathematical tokens, operators, and quantitative units -- demonstrating lexical generalization beyond surface forms.
+
+### When Features Fail
+
+**Misguided examples** (select the "Misguided" tab above) reveal failure modes:
+- Task-irrelevant features disrupting the reasoning chain
+- Token-feature misalignment producing incoherent activations
+- Feature interference causing the model to abandon its solution path
+
+### Feature Diversity
+
+<HtmlEmbed src="feature-frequency.html" title="Feature Selection Frequency" desc="Figure 13: Feature selection frequency follows a rank-dependent decay, confirming the policy learns selective (not random) feature choices. Click feature IDs to view on Neuronpedia." />
+
+Feature diversity varies significantly across tasks, measured by entropy of the feature selection distribution:
+
+| Task | Feature Diversity | Interpretation |
+|------|------------------|----------------|
+| GSM8K | 6.695 | Complex reasoning needs diverse features |
+| MMLU-Pro | 5.476 | High complexity, broad engagement |
+| XSTest | 4.757 | Intermediate diversity |
+| HarmBench | 2.938 | Focused refusal uses concentrated features |
+
+Complex reasoning tasks require *broader* feature engagement, while focused behavioral tasks benefit from *concentrated* feature activation.
+
+
+## Layer-Wise Analysis
+
+Different layers encode different types of information, and CRL's layer-wise training reveals this structure.
+
+<Wide>
+<HtmlEmbed src="layer-heatmap.html" title="Layer × Coefficient Sensitivity" desc="Figure 14: Interactive heatmap showing accuracy across layer-coefficient combinations. Each task has a different optimal configuration. Hover cells for details." />
+</Wide>
+
+### Residual Stream Norms
+
+<HtmlEmbed src="norm-growth.html" title="Residual Stream Norm Growth" desc="Figure 15: Residual stream norms increase across layers, requiring larger steering coefficients in deeper layers. Hover to see exact values and coefficient ranges." />
+
+Residual stream norms increase with depth, which directly impacts the optimal steering coefficient:
+- **Early layers** (L5–L10): $c = 10\text{–}20$
+- **Middle layers** (L15–L20): $c = 30\text{–}60$
+- **Late layers** (L22–L25): $c = 60\text{–}100$
+
+Large coefficients degrade early-layer performance, while late layers tolerate — and require — stronger interventions.
+
+
+## Discussion
+
+### What CRL Reveals as an Analysis Tool
+
+CRL provides three diagnostic capabilities that complement static feature analysis:
+
+**1. Branch tracking** locates critical decision points — tokens where the choice of a single SAE feature determines whether the output is correct or incorrect. This provides *causal* evidence for feature importance, going beyond correlational activation analysis.
+
+**2. Critic trajectories** separate policy from value-estimation limitations. When the critic shows a bottleneck (MMLU), we know the value function is the limiting factor, not the policy's feature selection. When the critic shows clear discrimination (BBQ), the policy-critic coordination is effective.
+
+**3. Layer comparison** reveals a syntactic-to-semantic gradient: early layers encode concrete patterns (notation, formatting), while later layers capture abstract structure (logical derivation, strategic planning).
+
+### Limitations
+
+- **Layer selection is post-hoc:** optimal layers are identified via validation, not predicted a priori
+- **Feature labels are unreliable:** SAE feature descriptions often diverge from their actual steering effects
+- **Single-feature constraint:** selecting $k=1$ maximizes interpretability but may leave performance on the table
+- **Computational cost:** while modest (8–9% overhead), CRL requires PPO training for each task-layer combination
+
+
+## Conclusion
+
+Control Reinforcement Learning transforms SAE feature steering from a static analysis tool into a **dynamic, token-level intervention framework** with built-in interpretability. By training a policy to select features at each generation step, CRL produces mechanistic analysis tools:
+
+- **Branch tracking** locates critical decision points where feature choice determines output correctness
+- **Critic trajectories** separate policy limitations from value-estimation errors
+- **Layer comparison** reveals syntactic-to-semantic feature gradients across network depth
+
+Validated across knowledge, bias, reasoning, and safety benchmarks, CRL maintains single-feature interpretability throughout. The framework establishes learned feature steering as a practical mechanistic interpretability tool that complements static feature analysis with dynamic intervention probes.

app/src/content/assets/data/bbq-ambig-layer-sweep.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:99f3cada76e74b16d3d4fdc66f320359a7f2f5844bb2eb787343f5dff734bc5f
+size 3136

app/src/content/assets/data/bbq-disambig-layer-sweep.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:bbdcdb11ef584f5a95bc6213ac100391859a15ab938c7e25d4482b809663175b
+size 2264

app/src/content/assets/data/mmlu-layer-sweep-constrained.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2173d7c14090dcf34446f00266a99e719112e4068500a6baf0af57ba09cad9ca
+size 2880

app/src/content/assets/data/mmlu-layer-sweep.json

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:cfc679c136321b7cda6490f334e8cf132bafac1a649a4f1698af018c13800ddf
+size 7423

app/src/content/bibliography.bib

@@ -0,0 +1,1739 @@
+% LLM
+@misc{nikolaou2025languagemodelsinjectiveinvertible,
+      title={Language Models are Injective and Hence Invertible}, 
+      author={Giorgos Nikolaou and Tommaso Mencattini and Donato Crisostomi and Andrea Santilli and Yannis Panagakis and Emanuele Rodolà},
+      year={2025},
+      eprint={2510.15511},
+      archivePrefix={arXiv},
+      primaryClass={cs.LG},
+      url={https://arxiv.org/abs/2510.15511}, 
+}
+
+@inproceedings{vaswani2017attention,
+    author = {Vaswani, Ashish and Shazeer, Noam and Parmar, Niki and Uszkoreit, Jakob and Jones, Llion and Gomez, Aidan N and Kaiser, Lukasz and Polosukhin, Illia},
+    booktitle = {Advances in Neural Information Processing Systems},
+    editor = {I. Guyon and U. Von Luxburg and S. Bengio and H. Wallach and R. Fergus and S. Vishwanathan and R. Garnett},
+    pages = {},
+    publisher = {Curran Associates, Inc.},
+    title = {Attention is All you Need},
+    url = {https://proceedings.neurips.cc/paper_files/paper/2017/file/3f5ee243547dee91fbd053c1c4a845aa-Paper.pdf},
+    volume = {30},
+    year = {2017}
+}
+
+@inproceedings{wei2022finetuned,
+    title={Finetuned Language Models are Zero-Shot Learners},
+    author={Jason Wei and Maarten Bosma and Vincent Zhao and Kelvin Guu and Adams Wei Yu and Brian Lester and Nan Du and Andrew M. Dai and Quoc V Le},
+    booktitle={International Conference on Learning Representations},
+    year={2022},
+    url={https://openreview.net/forum?id=gEZrGCozdqR}
+}
+
+@article{wei2022emergent,
+    title={Emergent Abilities of Large Language Models},
+    author={Jason Wei and Yi Tay and Rishi Bommasani and Colin Raffel and Barret Zoph and Sebastian Borgeaud and Dani Yogatama and Maarten Bosma and Denny Zhou and Donald Metzler and Ed H. Chi and Tatsunori Hashimoto and Oriol Vinyals and Percy Liang and Jeff Dean and William Fedus},
+    journal={Transactions on Machine Learning Research},
+    issn={2835-8856},
+    year={2022},
+    url={https://openreview.net/forum?id=yzkSU5zdwD},
+    note={Survey Certification}
+}
+
+@inproceedings{parikh-etal-2016-decomposable,
+    title     = {A Decomposable Attention Model for Natural Language Inference},
+    author    = {Parikh, Ankur  and
+                 T{\"a}ckstr{\"o}m, Oscar  and
+                 Das, Dipanjan  and
+                 Uszkoreit, Jakob},
+    editor    = {Su, Jian  and
+                 Duh, Kevin  and
+                 Carreras, Xavier},
+    booktitle = {Proceedings of the 2016 Conference on Empirical Methods in Natural Language Processing},
+    month     = nov,
+    year      = {2016},
+    address   = {Austin, Texas},
+    publisher = {Association for Computational Linguistics},
+    url       = {https://aclanthology.org/D16-1244/},
+    doi       = {10.18653/v1/D16-1244},
+    pages     = {2249--2255}
+}
+
+@inproceedings{kojima2022large,
+    title={Large Language Models are Zero-Shot Reasoners},
+    author={Takeshi Kojima and Shixiang Shane Gu and Machel Reid and Yutaka Matsuo and Yusuke Iwasawa},
+    booktitle={Advances in Neural Information Processing Systems},
+    editor={Alice H. Oh and Alekh Agarwal and Danielle Belgrave and Kyunghyun Cho},
+    year={2022},
+    url={https://openreview.net/forum?id=e2TBb5y0yFf}
+}
+
+@inproceedings{bahdanau2015neural,
+    author    = {Dzmitry Bahdanau and
+                 Kyunghyun Cho and
+                 Yoshua Bengio},
+    editor    = {Yoshua Bengio and
+                 Yann LeCun},
+    title     = {Neural Machine Translation by Jointly Learning to Align and Translate},
+    booktitle = {3rd International Conference on Learning Representations, {ICLR} 2015,
+                 San Diego, CA, USA, May 7-9, 2015, Conference Track Proceedings},
+    year      = {2015},
+    url       = {http://arxiv.org/abs/1409.0473},
+    timestamp = {Wed, 17 Jul 2019 10:40:54 +0200},
+    biburl    = {https://dblp.org/rec/journals/corr/BahdanauCB14.bib},
+    bibsource = {dblp computer science bibliography, https://dblp.org}
+}
+
+% Training
+@inproceedings{hu2022lora,
+    title={Lo{RA}: Low-Rank Adaptation of Large Language Models},
+    author={Edward J Hu and yelong shen and Phillip Wallis and Zeyuan Allen-Zhu and Yuanzhi Li and Shean Wang and Lu Wang and Weizhu Chen},
+    booktitle={International Conference on Learning Representations},
+    year={2022},
+    url={https://openreview.net/forum?id=nZeVKeeFYf9}
+}
+
+% Inference-time
+@inproceedings{wei2022chain,
+    title={Chain of Thought Prompting Elicits Reasoning in Large Language Models},
+    author={Jason Wei and Xuezhi Wang and Dale Schuurmans and Maarten Bosma and brian ichter and Fei Xia and Ed H. Chi and Quoc V Le and Denny Zhou},
+    booktitle={Advances in Neural Information Processing Systems},
+    editor={Alice H. Oh and Alekh Agarwal and Danielle Belgrave and Kyunghyun Cho},
+    year={2022},
+    url={https://openreview.net/forum?id=\_VjQlMeSB\_J}
+}
+
+@misc{hu2024understanding,
+    title={Understanding Reasoning in Chain-of-Thought from the Hopfieldian View},
+    author={Lijie Hu and Liang Liu and Shu Yang and Xin CHEN and Zhen Tan and Muhammad Asif Ali and Mengdi Li and Di Wang},
+    year={2024},
+    url={https://openreview.net/forum?id=OclSRDktp3}
+}
+
+@inproceedings{zhao-etal-2024-enhancing-zero,
+    title = "Enhancing Zero-Shot Chain-of-Thought Reasoning in Large Language Models through Logic",
+    author = "Zhao, Xufeng  and
+      Li, Mengdi  and
+      Lu, Wenhao  and
+      Weber, Cornelius  and
+      Lee, Jae Hee  and
+      Chu, Kun  and
+      Wermter, Stefan",
+    editor = "Calzolari, Nicoletta  and
+      Kan, Min-Yen  and
+      Hoste, Veronique  and
+      Lenci, Alessandro  and
+      Sakti, Sakriani  and
+      Xue, Nianwen",
+    booktitle = "Proceedings of the 2024 Joint International Conference on Computational Linguistics, Language Resources and Evaluation (LREC-COLING 2024)",
+    month = may,
+    year = "2024",
+    address = "Torino, Italia",
+    publisher = "ELRA and ICCL",
+    url = "https://aclanthology.org/2024.lrec-main.543/",
+    pages = "6144--6166"
+}
+
+@inproceedings{li2023inferencetime,
+    title={Inference-Time Intervention: Eliciting Truthful Answers from a Language Model},
+    author={Kenneth Li and Oam Patel and Fernanda Vi{\'e}gas and Hanspeter Pfister and Martin Wattenberg},
+    booktitle={Thirty-seventh Conference on Neural Information Processing Systems},
+    year={2023},
+    url={https://openreview.net/forum?id=aLLuYpn83y}
+}
+
+@article{dutta2024how,
+    title={How to think step-by-step: A mechanistic understanding of chain-of-thought reasoning},
+    author={Subhabrata Dutta and Joykirat Singh and Soumen Chakrabarti and Tanmoy Chakraborty},
+    journal={Transactions on Machine Learning Research},
+    issn={2835-8856},
+    year={2024},
+    url={https://openreview.net/forum?id=uHLDkQVtyC},
+    note={}
+}
+
+
+% Mechanistic Interpretability
+@article{olah2017feature,
+    author = {Olah, Chris and Mordvintsev, Alexander and Schubert, Ludwig},
+    title = {Feature Visualization},
+    journal = {Distill},
+    year = {2017},
+    url = {https://distill.pub/2017/feature-visualization},
+    doi = {10.23915/distill.00007}
+}
+
+@article{goh2021multimodal,
+    author = {Goh, Gabriel and Cammarata, Nick and Voss, Chelsea and Carter, Shan and Petrov, Michael and Schubert, Ludwig and Radford, Alec and Olah, Chris},
+    title = {Multimodal Neurons in Artificial Neural Networks},
+    journal = {Distill},
+    year = {2021},
+    url = {https://distill.pub/2021/multimodal-neurons},
+    doi = {10.23915/distill.00030}
+}
+
+@article{schubert2021high-low,
+    author = {Schubert, Ludwig and Voss, Chelsea and Cammarata, Nick and Goh, Gabriel and Olah, Chris},
+    title = {High-Low Frequency Detectors},
+    journal = {Distill},
+    year = {2021},
+    url = {https://distill.pub/2020/circuits/frequency-edges},
+    doi = {10.23915/distill.00024.005}
+}
+
+@article{carter2019activation,
+  author = {Carter, Shan and Armstrong, Zan and Schubert, Ludwig and Johnson, Ian and Olah, Chris},
+  title = {Activation Atlas},
+  journal = {Distill},
+  year = {2019},
+  url = {https://distill.pub/2019/activation-atlas},
+  doi = {10.23915/distill.00015}
+}
+
+@inproceedings{oikarinen2025evaluating,
+    title={Evaluating Neuron Explanations: A Unified Framework with Sanity Checks},
+    author={Oikarinen, Tuomas and Yan, Ge and Weng, {Tsui-Wei}},
+    booktitle={Forty-second International Conference on Machine Learning},
+    year={2025},
+    publisher={PMLR},
+    url={https://openreview.net/forum?id=8unyWZ14mf}
+}
+
+@misc{cloud2024gradientroutingmaskinggradients,
+    title={Gradient Routing: Masking Gradients to Localize Computation in Neural Networks}, 
+    author={Alex Cloud and Jacob Goldman-Wetzler and Evžen Wybitul and Joseph Miller and Alexander Matt Turner},
+    year={2024},
+    eprint={2410.04332},
+    archivePrefix={arXiv},
+    primaryClass={cs.LG},
+    url={https://arxiv.org/abs/2410.04332}, 
+}
+
+@misc{choi2024automatic,
+    author       = {Choi, Dami and Huang, Vincent and Meng, Kevin and Johnson, Daniel D and Steinhardt, Jacob and Schwettmann, Sarah},
+    title        = {Scaling Automatic Neuron Description},
+    year         = {2024},
+    month        = {October},
+    day          = {23},
+    howpublished = {\url{https://transluce.org/neuron-descriptions}}
+}
+
+@article{olsson2022context,
+   title={In-context Learning and Induction Heads},
+   author={Olsson, Catherine and Elhage, Nelson and Nanda, Neel and Joseph, Nicholas and DasSarma, Nova and Henighan, Tom and Mann, Ben and Askell, Amanda and Bai, Yuntao and Chen, Anna and Conerly, Tom and Drain, Dawn and Ganguli, Deep and Hatfield-Dodds, Zac and Hernandez, Danny and Johnston, Scott and Jones, Andy and Kernion, Jackson and Lovitt, Liane and Ndousse, Kamal and Amodei, Dario and Brown, Tom and Clark, Jack and Kaplan, Jared and McCandlish, Sam and Olah, Chris},
+   year={2022},
+   journal={Transformer Circuits Thread},
+   note={https://transformer-circuits.pub/2022/in-context-learning-and-induction-heads/index.html}
+}
+
+@article{mikolov2013linguistic,
+    title={Efficient Estimation of Word Representations in Vector Space},
+    author={Mikolov, Tomas and Chen, Kai and Corrado, Greg and Dean, Jeffrey},
+    journal={arXiv preprint arXiv:1301.3781},
+    year={2013},
+    url={https://arxiv.org/abs/1301.3781}
+}
+
+
+% Circuit
+@article{olah2020zoom,
+  author = {Olah, Chris and Cammarata, Nick and Schubert, Ludwig and Goh, Gabriel and Petrov, Michael and Carter, Shan},
+  title = {Zoom In: An Introduction to Circuits},
+  journal = {Distill},
+  year = {2020},
+  note = {https://distill.pub/2020/circuits/zoom-in},
+  doi = {10.23915/distill.00024.001}
+}
+
+@article{elhage2021mathematical,
+   title={A Mathematical Framework for Transformer Circuits},
+   author={Elhage, Nelson and Nanda, Neel and Olsson, Catherine and Henighan, Tom and Joseph, Nicholas and Mann, Ben and Askell, Amanda and Bai, Yuntao and Chen, Anna and Conerly, Tom and DasSarma, Nova and Drain, Dawn and Ganguli, Deep and Hatfield-Dodds, Zac and Hernandez, Danny and Jones, Andy and Kernion, Jackson and Lovitt, Liane and Ndousse, Kamal and Amodei, Dario and Brown, Tom and Clark, Jack and Kaplan, Jared and McCandlish, Sam and Olah, Chris},
+   year={2021},
+   journal={Transformer Circuits Thread},
+   note={https://transformer-circuits.pub/2021/framework/index.html}
+}
+@inproceedings{marks2025sparse,
+title={Sparse Feature Circuits: Discovering and Editing Interpretable Causal Graphs in Language Models},
+author={Samuel Marks and Can Rager and Eric J Michaud and Yonatan Belinkov and David Bau and Aaron Mueller},
+booktitle={The Thirteenth International Conference on Learning Representations},
+year={2025},
+url={https://openreview.net/forum?id=I4e82CIDxv}
+}
+
+
+@article{lindsey2025landscape,
+    author={Lindsey, Jack and Ameisen, Emmanuel and Nanda, Neel and Shabalin, Stepan and Piotrowski, Mateusz and McGrath, Tom and Hanna, Michael and Lewis, Owen and Tigges, Curt and Merullo, Jack and Watts, Connor and Paulo, Gonçalo and Batson, Joshua and Gorton, Liv and Simon, Elana and Loeffler, Max and McDougall, Callum and Lin, Johnny},
+    title={The Circuits Research Landscape: Results and Perspectives},
+    journal={Neuronpedia},
+    year={2025},
+    url={https://neuronpedia.org/graph/info}
+}
+
+@inproceedings{ferrao2025fsrl,
+title={The Anatomy of Alignment: Decomposing Preference Optimization by Steering Sparse Features},
+author={Jeremias Lino Ferrao and Matthijs van der Lende and Ilija Lichkovski and Clement Neo},
+booktitle={Mechanistic Interpretability Workshop at NeurIPS 2025},
+year={2025},
+url={https://openreview.net/forum?id=CoaaltVlx7}
+}
+
+@inproceedings{sinii2025small,
+title={Small Vectors, Big Effects: A Mechanistic Study of {RL}-Induced Reasoning via Steering Vectors},
+author={Viacheslav Sinii and Nikita Balagansky and Yaroslav Aksenov and Vadim Kurochkin and Daniil Laptev and Alexey Gorbatovski and Boris Shaposhnikov and Daniil Gavrilov},
+booktitle={Mechanistic Interpretability Workshop at NeurIPS 2025},
+year={2025},
+url={https://openreview.net/forum?id=M8WDG1TfBb}
+}
+
+@inproceedings{tenney-etal-2019-bert,
+    title = "{BERT} Rediscovers the Classical {NLP} Pipeline",
+    author = "Tenney, Ian  and
+      Das, Dipanjan  and
+      Pavlick, Ellie",
+    editor = "Korhonen, Anna  and
+      Traum, David  and
+      M{\`a}rquez, Llu{\'i}s",
+    booktitle = "Proceedings of the 57th Annual Meeting of the Association for Computational Linguistics",
+    month = jul,
+    year = "2019",
+    address = "Florence, Italy",
+    publisher = "Association for Computational Linguistics",
+    url = "https://aclanthology.org/P19-1452/",
+    doi = "10.18653/v1/P19-1452",
+    pages = "4593--4601",
+    abstract = "Pre-trained text encoders have rapidly advanced the state of the art on many NLP tasks. We focus on one such model, BERT, and aim to quantify where linguistic information is captured within the network. We find that the model represents the steps of the traditional NLP pipeline in an interpretable and localizable way, and that the regions responsible for each step appear in the expected sequence: POS tagging, parsing, NER, semantic roles, then coreference. Qualitative analysis reveals that the model can and often does adjust this pipeline dynamically, revising lower-level decisions on the basis of disambiguating information from higher-level representations."
+}
+
+
+@inproceedings{cho2025corrsteer,
+title={CorrSteer: Generation-Time {LLM} Steering via Correlated Sparse Autoencoder Features},
+author={Cho, Seonglae and Wu, Zekun and Koshiyama, Adriano},
+booktitle={Forty-third International Conference on Machine Learning},
+year={2026}
+}
+
+@inproceedings{conmy2023towards,
+title={Towards Automated Circuit Discovery for Mechanistic Interpretability},
+author={Arthur Conmy and Augustine N. Mavor-Parker and Aengus Lynch and Stefan Heimersheim and Adri{\`a} Garriga-Alonso},
+booktitle={Thirty-seventh Conference on Neural Information Processing Systems},
+year={2023},
+url={https://openreview.net/forum?id=89ia77nZ8u}
+}
+
+@article{lindsey2025biology,
+  author={Lindsey, Jack and Gurnee, Wes and Ameisen, Emmanuel and Chen, Brian and Pearce, Adam and Turner, Nicholas L. and Citro, Craig and Abrahams, David and Carter, Shan and Hosmer, Basil and Marcus, Jonathan and Sklar, Michael and Templeton, Adly and Bricken, Trenton and McDougall, Callum and Cunningham, Hoagy and Henighan, Thomas and Jermyn, Adam and Jones, Andy and Persic, Andrew and Qi, Zhenyi and Thompson, T. Ben and Zimmerman, Sam and Rivoire, Kelley and Conerly, Thomas and Olah, Chris and Batson, Joshua},
+  title={On the Biology of a Large Language Model},
+  journal={Transformer Circuits Thread},
+  year={2025},
+  url={https://transformer-circuits.pub/2025/attribution-graphs/biology.html}
+}
+
+@article{ameisen2025circuit,
+    author={Ameisen, Emmanuel and Lindsey, Jack and Pearce, Adam and Gurnee, Wes and Turner, Nicholas L. and Chen, Brian and Citro, Craig and Abrahams, David and Carter, Shan and Hosmer, Basil and Marcus, Jonathan and Sklar, Michael and Templeton, Adly and Bricken, Trenton and McDougall, Callum and Cunningham, Hoagy and Henighan, Thomas and Jermyn, Adam and Jones, Andy and Persic, Andrew and Qi, Zhenyi and Ben Thompson, T. and Zimmerman, Sam and Rivoire, Kelley and Conerly, Thomas and Olah, Chris and Batson, Joshua},
+    title={Circuit Tracing: Revealing Computational Graphs in Language Models},
+    journal={Transformer Circuits Thread},
+    year={2025},
+    url={https://transformer-circuits.pub/2025/attribution-graphs/methods.html}
+}
+
+@inproceedings{sun-2025-circuit,
+    title = "Circuit Stability Characterizes Language Model Generalization",
+    author = "Sun, Alan",
+    editor = "Che, Wanxiang  and
+      Nabende, Joyce  and
+      Shutova, Ekaterina  and
+      Pilehvar, Mohammad Taher",
+    booktitle = "Proceedings of the 63rd Annual Meeting of the Association for Computational Linguistics (Volume 1: Long Papers)",
+    month = jul,
+    year = "2025",
+    address = "Vienna, Austria",
+    publisher = "Association for Computational Linguistics",
+    url = "https://aclanthology.org/2025.acl-long.442/",
+    doi = "10.18653/v1/2025.acl-long.442",
+    pages = "9025--9040",
+    ISBN = "979-8-89176-251-0",
+}
+
+@inproceedings{syed-etal-2024-attribution,
+    title = "Attribution Patching Outperforms Automated Circuit Discovery",
+    author = "Syed, Aaquib  and
+      Rager, Can  and
+      Conmy, Arthur",
+    editor = "Belinkov, Yonatan  and
+      Kim, Najoung  and
+      Jumelet, Jaap  and
+      Mohebbi, Hosein  and
+      Mueller, Aaron  and
+      Chen, Hanjie",
+    booktitle = "Proceedings of the 7th BlackboxNLP Workshop: Analyzing and Interpreting Neural Networks for NLP",
+    month = nov,
+    year = "2024",
+    address = "Miami, Florida, US",
+    publisher = "Association for Computational Linguistics",
+    url = "https://aclanthology.org/2024.blackboxnlp-1.25/",
+    doi = "10.18653/v1/2024.blackboxnlp-1.25",
+    pages = "407--416",
+}
+
+
+% Superposition
+@article{elhage2022superposition,
+    title   = {Toy Models of Superposition},
+    author  = {Elhage, Nelson and Hume, Tristan and Olsson, Catherine and Schiefer, Nicholas and Henighan, Tom and Kravec, Shauna and Hatfield-Dodds, Zac and Lasenby, Robert and Drain, Dawn and Chen, Carol and Grosse, Roger and McCandlish, Sam and Kaplan, Jared and Amodei, Dario and Wattenberg, Martin and Olah, Christopher},
+    year    = {2022},
+    journal = {Transformer Circuits Thread},
+    url    = {https://transformer-circuits.pub/2022/toy\_model/index.html}
+}
+
+@ARTICLE{dongho2006compressed,
+    author={Donoho, D.L.},
+    journal={IEEE Transactions on Information Theory}, 
+    title={Compressed sensing}, 
+    year={2006},
+    volume={52},
+    number={4},
+    pages={1289-1306},
+    keywords={Compressed sensing;Image reconstruction;Pixel;Vectors;Digital images;Image coding;Transform coding;Size measurement;Signal processing;Data mining;Adaptive sampling;almost-spherical sections of Banach spaces;Basis Pursuit;eigenvalues of random matrices;Gel'fand;information-based complexity;integrated sensing and processing;minimum;optimal recovery;Quotient-of-a-Subspace theorem;sparse solution of linear equations},
+    doi={10.1109/TIT.2006.871582}
+}
+
+@inproceedings{bora2017compressed,
+  title={Compressed Sensing using Generative Models},
+  author={Bora, Ashish and Jalal, Ajil and Price, Eric and Dimakis, Alexandros G},
+  booktitle={Proceedings of the 34th International Conference on Machine Learning (ICML)},
+  editor={Doina Precup and Yee Whye Teh},
+  volume={70},
+  series={Proceedings of Machine Learning Research},
+  pages={537--546},
+  year={2017},
+  publisher={PMLR},
+  address={Sydney, Australia},
+  url={https://proceedings.mlr.press/v70/bora17a/bora17a.pdf}
+}
+
+
+% Linear Representation
+@inproceedings{faruqui-etal-2015-sparse,
+    title     = {Sparse Overcomplete Word Vector Representations},
+    author    = {Faruqui, Manaal  and
+                 Tsvetkov, Yulia  and
+                 Yogatama, Dani  and
+                 Dyer, Chris  and
+                 Smith, Noah A.},
+    editor    = {Zong, Chengqing  and
+                 Strube, Michael},
+    booktitle = {Proceedings of the 53rd Annual Meeting of the Association for Computational Linguistics and the 7th International Joint Conference on Natural Language Processing (Volume 1: Long Papers)},
+    month     = jul,
+    year      = {2015},
+    address   = {Beijing, China},
+    publisher = {Association for Computational Linguistics},
+    url       = {https://aclanthology.org/P15-1144/},
+    doi       = {10.3115/v1/P15-1144},
+    pages     = {1491--1500}
+}
+
+@inproceedings{socher-etal-2013-recursive,
+    title = "Recursive Deep Models for Semantic Compositionality Over a Sentiment Treebank",
+    author = "Socher, Richard  and
+      Perelygin, Alex  and
+      Wu, Jean  and
+      Chuang, Jason  and
+      Manning, Christopher D.  and
+      Ng, Andrew  and
+      Potts, Christopher",
+    editor = "Yarowsky, David  and
+      Baldwin, Timothy  and
+      Korhonen, Anna  and
+      Livescu, Karen  and
+      Bethard, Steven",
+    booktitle = "Proceedings of the 2013 Conference on Empirical Methods in Natural Language Processing",
+    month = oct,
+    year = "2013",
+    address = "Seattle, Washington, USA",
+    publisher = "Association for Computational Linguistics",
+    url = "https://aclanthology.org/D13-1170/",
+    pages = "1631--1642"
+}
+
+@article{arora-etal-2018-linear,
+    title     = {Linear Algebraic Structure of Word Senses, with Applications to Polysemy},
+    author    = {Arora, Sanjeev  and
+                 Li, Yuanzhi  and
+                 Liang, Yingyu  and
+                 Ma, Tengyu  and
+                 Risteski, Andrej},
+    editor    = {Lee, Lillian  and
+                 Johnson, Mark  and
+                 Toutanova, Kristina  and
+                 Roark, Brian},
+    journal   = {Transactions of the Association for Computational Linguistics},
+    volume    = {6},
+    year      = {2018},
+    address   = {Cambridge, MA},
+    publisher = {MIT Press},
+    url       = {https://aclanthology.org/Q18-1034/},
+    doi       = {10.1162/tacl_a_00034},
+    pages     = {483--495}
+}
+
+@inproceedings{park2023the,
+    title={The Linear Representation Hypothesis and the Geometry of Large Language Models},
+    author={Kiho Park and Yo Joong Choe and Victor Veitch},
+    booktitle={Causal Representation Learning Workshop at NeurIPS 2023},
+    year={2023},
+    url={https://openreview.net/forum?id=T0PoOJg8cK}
+}
+
+@inproceedings{park2024the,
+    title={The Geometry of Categorical and Hierarchical Concepts in Large Language Models},
+    author={Kiho Park and Yo Joong Choe and Yibo Jiang and Victor Veitch},
+    booktitle={ICML 2024 Workshop on Mechanistic Interpretability},
+    year={2024},
+    url={https://openreview.net/forum?id=KXuYjuBzKo}
+}
+
+
+% Steering Vector
+@inproceedings{subramani-etal-2022-extracting,
+    title = "Extracting Latent Steering Vectors from Pretrained Language Models",
+    author = "Subramani, Nishant  and
+      Suresh, Nivedita  and
+      Peters, Matthew",
+    editor = "Muresan, Smaranda  and
+      Nakov, Preslav  and
+      Villavicencio, Aline",
+    booktitle = "Findings of the Association for Computational Linguistics: ACL 2022",
+    month = may,
+    year = "2022",
+    address = "Dublin, Ireland",
+    publisher = "Association for Computational Linguistics",
+    url = "https://aclanthology.org/2022.findings-acl.48/",
+    doi = "10.18653/v1/2022.findings-acl.48",
+    pages = "566--581"
+}
+
+@misc{azizi2025activationsteeringchainofthoughtcompression,
+      title={Activation Steering for Chain-of-Thought Compression}, 
+      author={Seyedarmin Azizi and Erfan Baghaei Potraghloo and Massoud Pedram},
+      year={2025},
+      eprint={2507.04742},
+      archivePrefix={arXiv},
+      primaryClass={cs.AI},
+      url={https://arxiv.org/abs/2507.04742}, 
+}
+
+@inproceedings{tan2024analysing,
+    title={Analysing the Generalisation and Reliability of Steering Vectors},
+    author={Daniel Chee Hian Tan and David Chanin and Aengus Lynch and Brooks Paige and Dimitrios Kanoulas and Adri{\`a} Garriga-Alonso and Robert Kirk},
+    booktitle={The Thirty-eighth Annual Conference on Neural Information Processing Systems},
+    year={2024},
+    url={https://openreview.net/forum?id=v8X70gTodR}
+}
+
+@inproceedings{qiu2024spectral,
+    title={Spectral Editing of Activations for Large Language Model Alignment},
+    author={Yifu QIU and Zheng Zhao and Yftah Ziser and Anna Korhonen and Edoardo Ponti and Shay B Cohen},
+    booktitle={The Thirty-eighth Annual Conference on Neural Information Processing Systems},
+    year={2024},
+    url={https://openreview.net/forum?id=pqYceEa87j}
+}
+
+
+@inproceedings{luo2024pace,
+    title={Pa{CE}: Parsimonious Concept Engineering for Large Language Models},
+    author={Jinqi Luo and Tianjiao Ding and Kwan Ho Ryan Chan and Darshan Thaker and Aditya Chattopadhyay and Chris Callison-Burch and Rene Vidal},
+    booktitle={The Thirty-eighth Annual Conference on Neural Information Processing Systems},
+    year={2024},
+    url={https://openreview.net/forum?id=lOMHt16T8R}
+}
+
+
+@inproceedings{rimsky-etal-2024-steering,
+    title = "Steering Llama 2 via Contrastive Activation Addition",
+    author = "Rimsky, Nina  and
+      Gabrieli, Nick  and
+      Schulz, Julian  and
+      Tong, Meg  and
+      Hubinger, Evan  and
+      Turner, Alexander",
+    editor = "Ku, Lun-Wei  and
+      Martins, Andre  and
+      Srikumar, Vivek",
+    booktitle = "Proceedings of the 62nd Annual Meeting of the Association for Computational Linguistics (Volume 1: Long Papers)",
+    month = aug,
+    year = "2024",
+    address = "Bangkok, Thailand",
+    publisher = "Association for Computational Linguistics",
+    url = "https://aclanthology.org/2024.acl-long.828/",
+    doi = "10.18653/v1/2024.acl-long.828",
+    pages = "15504--15522"
+}
+
+@inproceedings{hernandez2024inspecting,
+    title={Inspecting and Editing Knowledge Representations in Language Models},
+    author={Evan Hernandez and Belinda Z. Li and Jacob Andreas},
+    booktitle={First Conference on Language Modeling},
+    year={2024},
+    url={https://openreview.net/forum?id=ADtL6fgNRv}
+}
+
+@article{DBLP:journals/corr/abs-2308-10248,
+    publtype={informal},
+    author={Alexander Matt Turner and Lisa Thiergart and David Udell and Gavin Leech and Ulisse Mini and Monte MacDiarmid},
+    title={Activation Addition: Steering Language Models Without Optimization},
+    year={2023},
+    cdate={1672531200000},
+    journal={CoRR},
+    volume={abs/2308.10248},
+    url={https://doi.org/10.48550/arXiv.2308.10248}
+}
+
+@inproceedings{konen-etal-2024-style,
+    title     = {Style Vectors for Steering Generative Large Language Models},
+    author    = {Konen, Kai  and
+                 Jentzsch, Sophie  and
+                 Diallo, Diaoul{\'e}  and
+                 Sch{\"u}tt, Peer  and
+                 Bensch, Oliver  and
+                 El Baff, Roxanne  and
+                 Opitz, Dominik  and
+                 Hecking, Tobias},
+    editor    = {Graham, Yvette  and
+                 Purver, Matthew},
+    booktitle = {Findings of the Association for Computational Linguistics: EACL 2024},
+    month     = mar,
+    year      = {2024},
+    address   = {St. Julian{'}s, Malta},
+    publisher = {Association for Computational Linguistics},
+    url       = {https://aclanthology.org/2024.findings-eacl.52/},
+    pages     = {782--802}
+}
+
+% Attention Sink
+@inproceedings{xiao2024efficient,
+    title={Efficient Streaming Language Models with Attention Sinks},
+    author={Guangxuan Xiao and Yuandong Tian and Beidi Chen and Song Han and Mike Lewis},
+    booktitle={The Twelfth International Conference on Learning Representations},
+    year={2024},
+    url={https://openreview.net/forum?id=NG7sS51zVF}
+}
+
+@article{hazra2025under,
+    title={Under the Hood of a Reasoning Model},
+    author={Hazra, Dron and Loeffler, Max and Cubuktepe, Murat and Avagyan, Levon and Gorton, Liv and Bissell, Mark and Lewis, Owen and McGrath, Thomas and Balsam, Daniel},
+    journal={Goodfire Research Blog},
+    year={2025},
+    month={Apr},
+    day={15},
+    note={\url{https://goodfire.ai/blog/under-the-hood-of-a-reasoning-model}},
+}
+
+@inproceedings{gu2025when,
+    title={When Attention Sink Emerges in Language Models: An Empirical View},
+    author={Xiangming Gu and Tianyu Pang and Chao Du and Qian Liu and Fengzhuo Zhang and Cunxiao Du and Ye Wang and Min Lin},
+    booktitle={The Thirteenth International Conference on Learning Representations},
+    year={2025},
+    url={https://openreview.net/forum?id=78Nn4QJTEN}
+}
+
+
+% Sparse Coding
+@article{olshausen1997sparse,
+  title={Sparse coding with an overcomplete basis set: A strategy employed by V1?},
+  author={Olshausen, Bruno A. and Field, David J.},
+  journal={Vision Research},
+  volume={37},
+  number={23},
+  pages={3311--3325},
+  year={1997},
+  publisher={Elsevier}
+}
+
+@book{elad2010sparse,
+  title={Sparse and Redundant Representations: From Theory to Applications in Signal and Image Processing},
+  author={Elad, Michael},
+  year={2010},
+  publisher={Springer New York},
+  doi={10.1007/978-1-4419-7011-4},
+  isbn={978-1-4419-7010-7},
+  edition={1},
+  pages={XX, 376}
+}
+
+@article{braun2024identifying,
+  title={Identifying functionally important features with end-to-end sparse dictionary learning},
+  author={Braun, Dan and Taylor, Jordan and Goldowsky-Dill, Nicholas and Sharkey, Lee},
+  journal={Advances in Neural Information Processing Systems},
+  volume={37},
+  pages={107286--107325},
+  year={2024}
+}
+
+
+% SAE
+@inproceedings{huben2024sparse,
+    title     = {Sparse Autoencoders Find Highly Interpretable Features in Language Models},
+    author    = {Robert Huben and Hoagy Cunningham and Logan Riggs Smith and Aidan Ewart and Lee Sharkey},
+    booktitle = {The Twelfth International Conference on Learning Representations},
+    year      = {2024},
+    url       = {https://openreview.net/forum?id=F76bwRSLeK}
+}
+
+@inproceedings{leask2025inferencetime,
+    title={Inference-Time Decomposition of Activations ({ITDA}): A Scalable Approach to Interpreting Large Language Models},
+    author={Patrick Leask and Neel Nanda and Noura Al Moubayed},
+    booktitle={Forty-second International Conference on Machine Learning},
+    year={2025},
+    url={https://openreview.net/forum?id=4WMZqAoYi4}
+}
+
+@article{templeton2024scaling,
+    title   = {Scaling Monosemanticity: Extracting Interpretable Features from Claude 3 Sonnet},
+    author  = {Templeton, Adly and Conerly, Tom and Marcus, Jonathan and Lindsey, Jack and Bricken, Trenton and Chen, Brian and Pearce, Adam and Citro, Craig and Ameisen, Emmanuel and Jones, Andy and Cunningham, Hoagy and Turner, Nicholas L and McDougall, Callum and MacDiarmid, Monte and Freeman, C. Daniel and Sumers, Theodore R. and Rees, Edward and Batson, Joshua and Jermyn, Adam and Carter, Shan and Olah, Chris and Henighan, Tom},
+    year    = {2024},
+    journal = {Transformer Circuits Thread},
+    url     = {https://transformer-circuits.pub/2024/scaling-monosemanticity/index.html}
+}
+
+@article{bricken2023monosemanticity,
+    title={Towards Monosemanticity: Decomposing Language Models With Dictionary Learning},
+    author={Bricken, Trenton and Templeton, Adly and Batson, Joshua and Chen, Brian and Jermyn, Adam and Conerly, Tom and Turner, Nick and Anil, Cem and Denison, Carson and Askell, Amanda and Lasenby, Robert and Wu, Yifan and Kravec, Shauna and Schiefer, Nicholas and Maxwell, Tim and Joseph, Nicholas and Hatfield-Dodds, Zac and Tamkin, Alex and Nguyen, Karina and McLean, Brayden and Burke, Josiah E and Hume, Tristan and Carter, Shan and Henighan, Tom and Olah, Christopher},
+    year={2023},
+    journal={Transformer Circuits Thread},
+    note={https://transformer-circuits.pub/2023/monosemantic-features/index.html}
+}
+
+@misc{smith2025negative,
+    title = {Negative Results for SAEs On Downstream Tasks and Deprioritising SAE Research},
+    author = {Lewis Smith and Senthooran Rajamanoharan and Arthur Conmy and Callum McDougall and Tom Lieberum and János Kramár and Rohin Shah and Neel Nanda},
+    year = {2025},
+    note = {DeepMind Mechanistic Interpretability Team Progress Update \#2},
+    howpublished = {\url{https://www.lesswrong.com/posts/4uXCAJNuPKtKBsi28/sae-progress-update-2-draft}},
+}
+
+@misc{kissane2024saefinetuning,
+    author       = {Connor Kissane and Robert Krzyzanowski and Arthur Conmy and Neel Nanda},
+    title        = {SAEs (usually) Transfer Between Base and Chat Models},
+    year         = {2024},
+    howpublished = {Alignment Forum},
+    url          = {https://www.alignmentforum.org/posts/fmwk6qxrpW8d4jvbd/saes-usually-transfer-between-base-and-chat-models}
+}
+
+@inproceedings{ayonrinde2024interpretability,
+    title={Interpretability as Compression: Reconsidering {SAE} Explanations of Neural Activations},
+    author={Kola Ayonrinde and Michael T Pearce and Lee Sharkey},
+    booktitle={NeurIPS 2024 Workshop on Scientific Methods for Understanding Deep Learning},
+    year={2024},
+    url={https://openreview.net/forum?id=hAqeEZRVSD}
+}
+
+@inproceedings{lieberum-etal-2024-gemma,
+    title = "Gemma Scope: Open Sparse Autoencoders Everywhere All At Once on Gemma 2",
+    author = "Lieberum, Tom  and
+      Rajamanoharan, Senthooran  and
+      Conmy, Arthur  and
+      Smith, Lewis  and
+      Sonnerat, Nicolas  and
+      Varma, Vikrant  and
+      Kramar, Janos  and
+      Dragan, Anca  and
+      Shah, Rohin  and
+      Nanda, Neel",
+    editor = "Belinkov, Yonatan  and
+      Kim, Najoung  and
+      Jumelet, Jaap  and
+      Mohebbi, Hosein  and
+      Mueller, Aaron  and
+      Chen, Hanjie",
+    booktitle = "Proceedings of the 7th BlackboxNLP Workshop: Analyzing and Interpreting Neural Networks for NLP",
+    month = nov,
+    year = "2024",
+    address = "Miami, Florida, US",
+    publisher = "Association for Computational Linguistics",
+    url = "https://aclanthology.org/2024.blackboxnlp-1.19/",
+    doi = "10.18653/v1/2024.blackboxnlp-1.19",
+    pages = "278--300"
+}
+
+@misc{he2024llamascopeextractingmillions,
+      title={Llama Scope: Extracting Millions of Features from Llama-3.1-8B with Sparse Autoencoders}, 
+      author={Zhengfu He and Wentao Shu and Xuyang Ge and Lingjie Chen and Junxuan Wang and Yunhua Zhou and Frances Liu and Qipeng Guo and Xuanjing Huang and Zuxuan Wu and Yu-Gang Jiang and Xipeng Qiu},
+      year={2024},
+      eprint={2410.20526},
+      archivePrefix={arXiv},
+      primaryClass={cs.LG},
+      url={https://arxiv.org/abs/2410.20526}, 
+}
+
+@misc{sae_finetuning,
+    author= {Connor Kissane and Robert Krzyzanowski and Arthur Conmy and Neel Nanda},
+    url = {https://www.alignmentforum.org/posts/fmwk6qxrpW8d4jvbd/saes-usually-transfer-between-base-and-chat-models},
+    year = {2024},
+    howpublished = {Alignment Forum},
+    title = {SAEs (usually) Transfer Between Base and Chat Models},
+}
+
+@misc{stefanhex2023residual,
+  title        = {Residual stream norms grow exponentially over the forward pass},
+  author       = {Stefan Heimersheim and Alex Turner},
+  year         = {2023},
+  month        = {May},
+  day          = {7},
+  url = {https://www.lesswrong.com/posts/8mizBCm3dyc432nK8/residual-stream-norms-grow-exponentially-over-the-forward},
+  note         = {LessWrong, AI Alignment Forum}
+}
+
+
+% SAE Architecture
+@inproceedings{bussmann2024batchtopk,
+    title={BatchTopK Sparse Autoencoders},
+    author={Bart Bussmann and Patrick Leask and Neel Nanda},
+    booktitle={NeurIPS 2024 Workshop on Scientific Methods for Understanding Deep Learning},
+    year={2024},
+    url={https://openreview.net/forum?id=d4dpOCqybL}
+}
+
+@misc{rajamanoharan2024jumpingaheadimprovingreconstruction,
+      title={Jumping Ahead: Improving Reconstruction Fidelity with JumpReLU Sparse Autoencoders}, 
+      author={Senthooran Rajamanoharan and Tom Lieberum and Nicolas Sonnerat and Arthur Conmy and Vikrant Varma and János Kramár and Neel Nanda},
+      year={2024},
+      eprint={2407.14435},
+      archivePrefix={arXiv},
+      primaryClass={cs.LG},
+      url={https://arxiv.org/abs/2407.14435}, 
+}
+
+@misc{rajamanoharan2025jumping,
+    title={Jumping Ahead: Improving Reconstruction Fidelity with JumpReLU Sparse Autoencoders},
+    author={Senthooran Rajamanoharan and Tom Lieberum and Nicolas Sonnerat and Arthur Conmy and Vikrant Varma and Janos Kramar and Neel Nanda},
+    year={2025},
+    url={https://openreview.net/forum?id=mMPaQzgzAN}
+}
+
+@inproceedings{dunefsky2024transcoders,
+    title={Transcoders find interpretable {LLM} feature circuits},
+    author={Jacob Dunefsky and Philippe Chlenski and Neel Nanda},
+    booktitle={The Thirty-eighth Annual Conference on Neural Information Processing Systems},
+    year={2024},
+    url={https://openreview.net/forum?id=J6zHcScAo0}
+}
+
+@inproceedings{gao2025topksae,
+    title     = {Scaling and evaluating TopK Sparse Autoencoders},
+    author    = {Leo Gao and Tom Dupre la Tour and Henk Tillman and Gabriel Goh and Rajan Troll and Alec Radford and Ilya Sutskever and Jan Leike and Jeffrey Wu},
+    booktitle = {The Thirteenth International Conference on Learning Representations},
+    year      = {2024},
+    url       = {https://openreview.net/forum?id=tcsZt9ZNKD}
+}
+
+@misc{lindsey2024crosscoders,
+    title     = {Sparse Crosscoders for Cross-Layer Features and Model Diffing},
+    author    = {Lindsey, Jack and Templeton, Adly and Marcus, Jonathan and Conerly, Thomas and Batson, Joshua and Olah, Christopher},
+    note      = {Transformer Circuits Thread, Anthropic. Research update, not peer-reviewed.},
+    year      = {2024},
+    month     = {October},
+    url       = {https://transformer-circuits.pub/2024/crosscoders/index.html}
+}
+
+@misc{valentin2025dbksvdscalablealternatingoptimization,
+      title={DB-KSVD: Scalable Alternating Optimization for Disentangling High-Dimensional Embedding Spaces}, 
+      author={Romeo Valentin and Sydney M. Katz and Vincent Vanhoucke and Mykel J. Kochenderfer},
+      year={2025},
+      eprint={2505.18441},
+      archivePrefix={arXiv},
+      primaryClass={cs.LG},
+      url={https://arxiv.org/abs/2505.18441}, 
+}
+
+@inproceedings{leask2024itda,
+  title     = {Inference-Time Decomposition of Activations (ITDA): A Scalable Approach to Interpreting Large Language Models},
+  author    = {Leask, Patrick and Nanda, Neel and Al Moubayed, Noura},
+  booktitle = {Proceedings of the 41st International Conference on Machine Learning (ICML)},
+  year      = {2024},
+  address   = {San Diego, CA, USA},
+  note      = {Poster presentation, East Exhibition Hall A-B \#E-2410, Wed 16 Jul 11:00 a.m.--1:30 p.m. PDT},
+  publisher = {PMLR}
+}
+
+% SAE Feature
+@misc{bricken2023simplest,
+    author       = {Trenton Bricken and Joshua Batson and Adly Templeton and Adam Jermyn and Tom Henighan and Chris Olah},
+    title        = {Features as The Simplest Factorization},
+    journal      = {Transformer Circuits Thread},
+    year         = {2023},
+    month        = {May},
+    url          = {https://transformer-circuits.pub/2023/may-update/index.html#simple-factorization},
+    note         = {Part of the May 2023 Circuits Updates by the Anthropic interpretability team}
+}
+
+@misc{bloom2024understandingfeatureslogitlens,
+   title = {Understanding SAE Features with the Logit Lens},
+   author = {Joseph Bloom, Johnny Lin},
+   year = {2024},
+   url = {https://www.lesswrong.com/posts/qykrYY6rXXM7EEs8Q/understanding-sae-features-with-the-logit-lens},
+}
+
+@inproceedings{stolfo2025antipodal,
+    title={Antipodal Pairing and Mechanistic Signals in Dense SAE Latents},
+    author={Alessandro Stolfo and Ben Peng Wu and Mrinmaya Sachan},
+    booktitle={ICLR 2025 Workshop on Building Trust in Language Models and Applications},
+    year={2025},
+    url={https://openreview.net/forum?id=Zlx6AlEoB0}
+}
+
+@misc{heap2025sparseautoencodersinterpretrandomly,
+    title={Sparse Autoencoders Can Interpret Randomly Initialized Transformers}, 
+    author={Thomas Heap and Tim Lawson and Lucy Farnik and Laurence Aitchison},
+    year={2025},
+    eprint={2501.17727},
+    archivePrefix={arXiv},
+    primaryClass={cs.LG},
+    url={https://arxiv.org/abs/2501.17727}, 
+}
+
+@inproceedings{balagansky2025mechanistic,
+    title     = {Mechanistic Permutability: Match Features Across Layers},
+    author    = {Nikita Balagansky and Ian Maksimov and Daniil Gavrilov},
+    booktitle = {The Thirteenth International Conference on Learning Representations},
+    year      = {2025},
+    url       = {https://openreview.net/forum?id=MDvecs7EvO}
+}
+
+@misc{paulo2025sparseautoencoderstraineddata,
+      title={Sparse Autoencoders Trained on the Same Data Learn Different Features}, 
+      author={Gonçalo Paulo and Nora Belrose},
+      year={2025},
+      eprint={2501.16615},
+      archivePrefix={arXiv},
+      primaryClass={cs.LG},
+      url={https://arxiv.org/abs/2501.16615}, 
+}
+
+
+% SAE Steering
+@inproceedings{zhao-etal-2025-steering,
+    title = "Steering Knowledge Selection Behaviours in {LLM}s via {SAE}-Based Representation Engineering",
+    author = "Zhao, Yu  and
+      Devoto, Alessio  and
+      Hong, Giwon  and
+      Du, Xiaotang  and
+      Gema, Aryo Pradipta  and
+      Wang, Hongru  and
+      He, Xuanli  and
+      Wong, Kam-Fai  and
+      Minervini, Pasquale",
+    editor = "Chiruzzo, Luis  and
+      Ritter, Alan  and
+      Wang, Lu",
+    booktitle = "Proceedings of the 2025 Conference of the Nations of the Americas Chapter of the Association for Computational Linguistics: Human Language Technologies (Volume 1: Long Papers)",
+    month = apr,
+    year = "2025",
+    address = "Albuquerque, New Mexico",
+    publisher = "Association for Computational Linguistics",
+    url = "https://aclanthology.org/2025.naacl-long.264/",
+    doi = "10.18653/v1/2025.naacl-long.264",
+    pages = "5117--5136",
+    ISBN = "979-8-89176-189-6"
+}
+
+@misc{liu2024incontextvectorsmakingcontext,
+    title={In-context Vectors: Making In Context Learning More Effective and Controllable Through Latent Space Steering}, 
+    author={Sheng Liu and Haotian Ye and Lei Xing and James Zou},
+    year={2024},
+    eprint={2311.06668},
+    archivePrefix={arXiv},
+    primaryClass={cs.LG},
+    url={https://arxiv.org/abs/2311.06668}, 
+}
+
+@misc{zhao2025steeringknowledgeselectionbehaviours,
+  title         = {Steering Knowledge Selection Behaviours in LLMs via SAE-Based Representation Engineering},
+  author        = {Yu Zhao and Alessio Devoto and Giwon Hong and Xiaotang Du and Aryo Pradipta Gema and Hongru Wang and Xuanli He and Kam-Fai Wong and Pasquale Minervini},
+  year          = {2025},
+  eprint        = {2410.15999},
+  archiveprefix = {arXiv},
+  primaryclass  = {cs.CL},
+  url           = {https://arxiv.org/abs/2410.15999}
+}
+
+@inproceedings{lee2025programming,
+    title={Programming Refusal with Conditional Activation Steering},
+    author={Bruce W. Lee and Inkit Padhi and Karthikeyan Natesan Ramamurthy and Erik Miehling and Pierre Dognin and Manish Nagireddy and Amit Dhurandhar},
+    booktitle={The Thirteenth International Conference on Learning Representations},
+    year={2025},
+    url={https://openreview.net/forum?id=Oi47wc10sm}
+}
+
+@article{karvonen2024sieve,
+    title={Sieve: SAEs Beat Baselines on a Real-World Task (A Code Generation Case Study)},
+    author={Karvonen, Adam and Pai, Dhruv and Wang, Mason and Keigwin, Ben},
+    journal={Tilde Research Blog},
+    year={2024},
+    month={12},
+    url={https://www.tilderesearch.com/blog/sieve},
+    note={Blog post}
+}
+
+
+@inproceedings{obrien2025steering,
+    title={Steering Language Model Refusal with Sparse Autoencoders},
+    author={Kyle O'Brien and David Majercak and Xavier Fernandes and Richard G. Edgar and Blake Bullwinkel and Jingya Chen and Harsha Nori and Dean Carignan and Eric Horvitz and Forough Poursabzi-Sangdeh},
+    booktitle={ICML 2025 Workshop on Reliable and Responsible Foundation Models},
+    year={2025},
+    url={https://openreview.net/forum?id=PMK1jdGQoc}
+}
+
+@misc{ferrao2024autosteer,
+    title        = {AutoSteer: Weight-Preserving Reinforcement Learning for Interpretable Model Control},
+    author       = {Jeremias Lino Ferrao},
+    date         = {2024-11-25},
+    year         = {2024},
+    organization = {Apart Research},
+    note         = {Research submission to the research sprint hosted by Apart},
+    howpublished = {https://apartresearch.com}
+}
+
+@misc{durmus2024steering,
+    author = {Esin Durmus and Alex Tamkin and Jack Clark and Jerry Wei and Jonathan Marcus and Joshua Batson and Kunal Handa and Liane Lovitt and Meg Tong and Miles McCain and Oliver Rausch and Saffron Huang and Sam Bowman and Stuart Ritchie and Tom Henighan and Deep Ganguli},
+    title = {Evaluating Feature Steering: A Case Study in Mitigating Social Biases},
+    year = {2024},
+    howpublished = {\url{https://anthropic.com/research/evaluating-feature-steering}},
+    note = {Anthropic Research}
+}
+
+@inproceedings{cao2024personalized,
+    title={Personalized Steering of Large Language Models: Versatile Steering Vectors Through Bi-directional Preference Optimization},
+    author={Yuanpu Cao and Tianrong Zhang and Bochuan Cao and Ziyi Yin and Lu Lin and Fenglong Ma and Jinghui Chen},
+    booktitle={The Thirty-eighth Annual Conference on Neural Information Processing Systems},
+    year={2024},
+    url={https://openreview.net/forum?id=7qJFkuZdYo}
+}
+
+@inproceedings{soo2025interpretable,
+    title={Interpretable Steering of Large Language Models with Feature Guided Activation Additions},
+    author={Samuel Soo and Wesley Teng and Chandrasekaran Balaganesh and Tan Guoxian and Ming YAN},
+    booktitle={ICLR 2025 Workshop on Building Trust in Language Models and Applications},
+    year={2025},
+    url={https://openreview.net/forum?id=swRxS7s4rB}
+}
+
+@misc{chalnev2024improvingsteeringvectorstargeting,
+    title={Improving Steering Vectors by Targeting Sparse Autoencoder Features}, 
+    author={Sviatoslav Chalnev and Matthew Siu and Arthur Conmy},
+    year={2024},
+    eprint={2411.02193},
+    archivePrefix={arXiv},
+    primaryClass={cs.LG},
+    url={https://arxiv.org/abs/2411.02193}, 
+}
+
+@misc{arad2025saesgoodsteering,
+      title={SAEs Are Good for Steering -- If You Select the Right Features}, 
+      author={Dana Arad and Aaron Mueller and Yonatan Belinkov},
+      year={2025},
+      eprint={2505.20063},
+      archivePrefix={arXiv},
+      primaryClass={cs.LG},
+      url={https://arxiv.org/abs/2505.20063}, 
+}
+
+
+% SAE Unlearning
+@inproceedings{zhou2025llm,
+    title={{LLM} Neurosurgeon: Targeted Knowledge Removal in {LLM}s using Sparse Autoencoders},
+    author={Dylan Zhou and Kunal Patil and Yifan Sun and Karthik lakshmanan and Senthooran Rajamanoharan and Arthur Conmy},
+    booktitle={ICLR 2025 Workshop on Building Trust in Language Models and Applications},
+    year={2025},
+    url={https://openreview.net/forum?id=aeQeXlG2Pw}
+}
+
+@inproceedings{muhamed2025saes,
+    title={{SAE}s Can Improve Unlearning: Dynamic Sparse Autoencoder Guardrails for Precision Unlearning in {LLM}s},
+    author={Aashiq Muhamed and Jacopo Bonato and Mona T. Diab and Virginia Smith},
+    booktitle={ICML 2025 Workshop on Reliable and Responsible Foundation Models},
+    year={2025},
+    url={https://openreview.net/forum?id=8gFO7ebDLT}
+}
+
+@inproceedings{cywinski2025saeuron,
+    title={{SA}eUron: Interpretable Concept Unlearning in Diffusion Models with Sparse Autoencoders},
+    author={Bartosz Cywi{\'n}ski and Kamil Deja},
+    booktitle={Forty-second International Conference on Machine Learning},
+    year={2025},
+    url={https://openreview.net/forum?id=6N0GxaKdX9}
+}
+
+@inproceedings{wang2025model,
+    title={Model Unlearning via Sparse Autoencoder Subspace Guided Projections},
+    author={Xu Wang and Zihao Li and Benyou Wang and Yan Hu and Difan Zou},
+    booktitle={ICML 2025 Workshop on Machine Unlearning for Generative AI},
+    year={2025},
+    url={https://openreview.net/forum?id=MIlqM98o9I}
+}
+
+
+% SAE Probing
+@article{gurnee2023finding,
+    title={Finding Neurons in a Haystack: Case Studies with Sparse Probing},
+    author={Wes Gurnee and Neel Nanda and Matthew Pauly and Katherine Harvey and Dmitrii Troitskii and Dimitris Bertsimas},
+    journal={Transactions on Machine Learning Research},
+    issn={2835-8856},
+    year={2023},
+    url={https://openreview.net/forum?id=JYs1R9IMJr},
+    note={}
+}
+
+% RL
+
+@misc{schulman2017proximal,
+    title        = {Proximal Policy Optimization Algorithms},
+    author       = {Schulman, John and Wolski, Filip and Dhariwal, Prafulla and Radford, Alec and Klimov, Oleg},
+    year         = {2017},
+    eprint       = {1707.06347},
+    archivePrefix= {arXiv},
+    primaryClass = {cs.LG},
+    url          = {https://arxiv.org/abs/1707.06347},
+    howpublished = {\url{https://openai.com/index/openai-baselines-ppo/}}
+}
+
+@article{williams1992simple,
+    title={Simple statistical gradient-following algorithms for connectionist reinforcement learning},
+    author={Williams, Ronald J},
+    journal={Machine Learning},
+    volume={8},
+    number={3-4},
+    pages={229--256},
+    year={1992},
+    publisher={Springer}
+}
+
+@article{mnih2015human,
+    title={Human-level control through deep reinforcement learning},
+    author={Mnih, Volodymyr and Kavukcuoglu, Koray and Silver, David and Rusu, Andrei A. and Veness, Joel and Bellemare, Marc G. and Graves, Alex and Riedmiller, Martin and Fidjeland, Andreas K. and Ostrovski, Georg and Petersen, Stig and Beattie, Charles and Sadik, Amir and Antonoglou, Ioannis and King, Helen and Kumaran, Dharshan and Wierstra, Daan and Legg, Shane and Hassabis, Demis},
+    journal={Nature},
+    volume={518},
+    number={7540},
+    pages={529--533},
+    year={2015},
+    publisher={Nature Publishing Group}
+}
+
+@inproceedings{zhong2023a,
+    title={A Theoretical Analysis of Optimistic Proximal Policy Optimization in Linear Markov Decision Processes},
+    author={Han Zhong and Tong Zhang},
+    booktitle={Thirty-seventh Conference on Neural Information Processing Systems},
+    year={2023},
+    url={https://openreview.net/forum?id=1bTG4sJ7tN}
+}
+
+@article{lim2023optimality,
+    title={Optimality Guarantees for Particle Belief Approximation of POMDPs},
+    author={Lim, Michael and Becker, Nathan and Kochenderfer, Mykel J and Tomlin, Claire J and Sunberg, Zachary N},
+    journal={Journal of Artificial Intelligence Research},
+    volume={77},
+    pages={1591--1636},
+    year={2023},
+    doi={10.1613/jair.1.14491},
+    url={https://jair.org/index.php/jair/article/view/14491}
+}
+
+@misc{shao2024deepseekmathpushinglimitsmathematical,
+    title={DeepSeekMath: Pushing the Limits of Mathematical Reasoning in Open Language Models}, 
+    author={Zhihong Shao and Peiyi Wang and Qihao Zhu and Runxin Xu and Junxiao Song and Xiao Bi and Haowei Zhang and Mingchuan Zhang and Y. K. Li and Y. Wu and Daya Guo},
+    year={2024},
+    eprint={2402.03300},
+    archivePrefix={arXiv},
+    primaryClass={cs.CL},
+    url={https://arxiv.org/abs/2402.03300}, 
+}
+
+@misc{deepseekai2025deepseekr1,
+    title={DeepSeek-R1: Incentivizing Reasoning Capability in LLMs via Reinforcement Learning}, 
+    author={DeepSeek-AI},
+    year={2025},
+    eprint={2501.12948},
+    archivePrefix={arXiv},
+    primaryClass={cs.CL},
+    url={https://arxiv.org/abs/2501.12948}, 
+}
+
+% RL with Residual Stream
+@inproceedings{yu-etal-2017-learning,
+    title = "Learning to Skim Text",
+    author = "Yu, Adams Wei  and
+      Lee, Hongrae  and
+      Le, Quoc",
+    editor = "Barzilay, Regina  and
+      Kan, Min-Yen",
+    booktitle = "Proceedings of the 55th Annual Meeting of the Association for Computational Linguistics (Volume 1: Long Papers)",
+    month = jul,
+    year = "2017",
+    address = "Vancouver, Canada",
+    publisher = "Association for Computational Linguistics",
+    url = "https://aclanthology.org/P17-1172/",
+    doi = "10.18653/v1/P17-1172",
+    pages = "1880--1890",
+}
+
+@article{gui2019long,
+    title={Long Short-Term Memory with Dynamic Skip Connections},
+    volume={33},
+    url={https://ojs.aaai.org/index.php/AAAI/article/view/4613},
+    DOI={10.1609/aaai.v33i01.33016481},
+    number={01},
+    journal={Proceedings of the AAAI Conference on Artificial Intelligence},
+    author={Gui, Tao and Zhang, Qi and Zhao, Lujun and Lin, Yaosong and Peng, Minlong and Gong, Jingjing and Huang, Xuanjing},
+    year={2019},
+    month={Jul.},
+    pages={6481-6488}
+}
+
+@article{xu2024dynamic,
+  title   = {Dynamic Layer Skipping for Large Language Models on Natural Language Understanding Tasks and Machine Translation Using Reinforcement Learning},
+  author  = {Xu, Wei and Jin, Xiaodong},
+  journal = {Frontiers in Computing and Intelligent Systems},
+  year    = {2024},
+  volume  = {9},
+  number  = {3},
+  doi     = {10.54097/wy0g8m89},
+  note    = {Uses dynamic layer skipping with adapters and RL to accelerate inference of LLMs; achieves SOTA performance on NLU and MT tasks}
+}
+
+
+% RLVR
+@inproceedings{yue2025does,
+    title={Does Reinforcement Learning Really Incentivize Reasoning Capacity in {LLM}s Beyond the Base Model?},
+    author={Yang Yue and Zhiqi Chen and Rui Lu and Andrew Zhao and Zhaokai Wang and Yang Yue and Shiji Song and Gao Huang},
+    booktitle={2nd AI for Math Workshop @ ICML 2025},
+    year={2025},
+    url={https://openreview.net/forum?id=upehLVgq1b}
+}
+
+@misc{wu2025generalizationsftreinforcementlearning,
+    title={On the Generalization of SFT: A Reinforcement Learning Perspective with Reward Rectification}, 
+    author={Yongliang Wu and Yizhou Zhou and Zhou Ziheng and Yingzhe Peng and Xinyu Ye and Xinting Hu and Wenbo Zhu and Lu Qi and Ming-Hsuan Yang and Xu Yang},
+    year={2025},
+    eprint={2508.05629},
+    archivePrefix={arXiv},
+    primaryClass={cs.LG},
+    url={https://arxiv.org/abs/2508.05629}, 
+}
+
+@article{DBLP:journals/corr/abs-2505-10425,
+    publtype={informal},
+    author={Jingyao Wang and Wenwen Qiang and Zeen Song and Changwen Zheng and Hui Xiong},
+    title={Learning to Think: Information-Theoretic Reinforcement Fine-Tuning for LLMs},
+    year={2025},
+    month={May},
+    cdate={1746057600000},
+    journal={CoRR},
+    volume={abs/2505.10425},
+    url={https://doi.org/10.48550/arXiv.2505.10425}
+}
+
+% Token Entropy
+
+@misc{wang20258020rulehighentropyminority,
+    title={Beyond the 80/20 Rule: High-Entropy Minority Tokens Drive Effective Reinforcement Learning for LLM Reasoning}, 
+    author={Shenzhi Wang and Le Yu and Chang Gao and Chujie Zheng and Shixuan Liu and Rui Lu and Kai Dang and Xionghui Chen and Jianxin Yang and Zhenru Zhang and Yuqiong Liu and An Yang and Andrew Zhao and Yang Yue and Shiji Song and Bowen Yu and Gao Huang and Junyang Lin},
+    year={2025},
+    eprint={2506.01939},
+    archivePrefix={arXiv},
+    primaryClass={cs.CL},
+    url={https://arxiv.org/abs/2506.01939}, 
+}
+
+@misc{cheng2025reasoningexplorationentropyperspective,
+    title={Reasoning with Exploration: An Entropy Perspective on Reinforcement Learning for LLMs}, 
+    author={Daixuan Cheng and Shaohan Huang and Xuekai Zhu and Bo Dai and Wayne Xin Zhao and Zhenliang Zhang and Furu Wei},
+    year={2025},
+    eprint={2506.14758},
+    archivePrefix={arXiv},
+    primaryClass={cs.CL},
+    url={https://arxiv.org/abs/2506.14758}, 
+}
+
+@misc{obeso2025realtimedetectionhallucinatedentities,
+    title={Real-Time Detection of Hallucinated Entities in Long-Form Generation}, 
+    author={Oscar Obeso and Andy Arditi and Javier Ferrando and Joshua Freeman and Cameron Holmes and Neel Nanda},
+    year={2025},
+    eprint={2509.03531},
+    archivePrefix={arXiv},
+    primaryClass={cs.CL},
+    url={https://arxiv.org/abs/2509.03531}, 
+}
+
+% Model
+
+@InProceedings{pmlr-v27-baldi12a,
+    title = 	 {Autoencoders, Unsupervised Learning, and Deep Architectures},
+    author = 	 {Baldi, Pierre},
+    booktitle = 	 {Proceedings of ICML Workshop on Unsupervised and Transfer Learning},
+    pages = 	 {37--49},
+    year = 	 {2012},
+    editor = 	 {Guyon, Isabelle and Dror, Gideon and Lemaire, Vincent and Taylor, Graham and Silver, Daniel},
+    volume = 	 {27},
+    series = 	 {Proceedings of Machine Learning Research},
+    address = 	 {Bellevue, Washington, USA},
+    month = 	 {02 Jul},
+    publisher =    {PMLR},
+    pdf = 	 {http://proceedings.mlr.press/v27/baldi12a/baldi12a.pdf},
+    url = 	 {https://proceedings.mlr.press/v27/baldi12a.html},
+    abstract = 	 {Autoencoders play a fundamental role in unsupervised learning and in deep architectures for transfer learning and other tasks. In spite of their fundamental role, only linear autoencoders over the real numbers have been solved analytically. Here we present a general mathematical framework for the study of both linear and non-linear autoencoders. The framework allows one to derive an analytical treatment for the most non-linear autoencoder, the Boolean autoencoder. Learning in the Boolean autoencoder is equivalent to a clustering problem that can be solved in polynomial time when the number of clusters is small and becomes NP complete when the number of clusters is large. The framework sheds light on the different kinds of autoencoders, their learning complexity, their horizontal and vertical composability in deep architectures, their critical points, and their fundamental connections to clustering, Hebbian learning, and information theory.}
+}
+
+@misc{grattafiori2024llama3herdmodels,
+      title={The Llama 3 Herd of Models}, 
+      author={Llama Team and Aaron Grattafiori and Abhimanyu Dubey and Abhinav Jauhri and Abhinav Pandey and Abhishek Kadian and Ahmad Al-Dahle and Aiesha Letman and Akhil Mathur and Alan Schelten and Alex Vaughan and Amy Yang and Angela Fan and Anirudh Goyal and Anthony Hartshorn and Aobo Yang and Archi Mitra and Archie Sravankumar and Artem Korenev and Arthur Hinsvark and Arun Rao and Aston Zhang and Aurelien Rodriguez and Austen Gregerson and Ava Spataru and Baptiste Roziere and Bethany Biron and Binh Tang and Bobbie Chern and Charlotte Caucheteux and Chaya Nayak and Chloe Bi and Chris Marra and Chris McConnell and Christian Keller and Christophe Touret and Chunyang Wu and Corinne Wong and Cristian Canton Ferrer and Cyrus Nikolaidis and Damien Allonsius and Daniel Song and Danielle Pintz and Danny Livshits and Danny Wyatt and David Esiobu and Dhruv Choudhary and Dhruv Mahajan and Diego Garcia-Olano and Diego Perino and Dieuwke Hupkes and Egor Lakomkin and Ehab AlBadawy and Elina Lobanova and Emily Dinan and Eric Michael Smith and Filip Radenovic and Francisco Guzmán and Frank Zhang and Gabriel Synnaeve and Gabrielle Lee and Georgia Lewis Anderson and Govind Thattai and Graeme Nail and Gregoire Mialon and Guan Pang and Guillem Cucurell and Hailey Nguyen and Hannah Korevaar and Hu Xu and Hugo Touvron and Iliyan Zarov and Imanol Arrieta Ibarra and Isabel Kloumann and Ishan Misra and Ivan Evtimov and Jack Zhang and Jade Copet and Jaewon Lee and Jan Geffert and Jana Vranes and Jason Park and Jay Mahadeokar and Jeet Shah and Jelmer van der Linde and Jennifer Billock and Jenny Hong and Jenya Lee and Jeremy Fu and Jianfeng Chi and Jianyu Huang and Jiawen Liu and Jie Wang and Jiecao Yu and Joanna Bitton and Joe Spisak and Jongsoo Park and Joseph Rocca and Joshua Johnstun and Joshua Saxe and Junteng Jia and Kalyan Vasuden Alwala and Karthik Prasad and Kartikeya Upasani and Kate Plawiak and Ke Li and Kenneth Heafield and Kevin Stone and Khalid El-Arini and Krithika Iyer and Kshitiz Malik and Kuenley Chiu and Kunal Bhalla and Kushal Lakhotia and Lauren Rantala-Yeary and Laurens van der Maaten and Lawrence Chen and Liang Tan and Liz Jenkins and Louis Martin and Lovish Madaan and Lubo Malo and Lukas Blecher and Lukas Landzaat and Luke de Oliveira and Madeline Muzzi and Mahesh Pasupuleti and Mannat Singh and Manohar Paluri and Marcin Kardas and Maria Tsimpoukelli and Mathew Oldham and Mathieu Rita and Maya Pavlova and Melanie Kambadur and Mike Lewis and Min Si and Mitesh Kumar Singh and Mona Hassan and Naman Goyal and Narjes Torabi and Nikolay Bashlykov and Nikolay Bogoychev and Niladri Chatterji and Ning Zhang and Olivier Duchenne and Onur Çelebi and Patrick Alrassy and Pengchuan Zhang and Pengwei Li and Petar Vasic and Peter Weng and Prajjwal Bhargava and Pratik Dubal and Praveen Krishnan and Punit Singh Koura and Puxin Xu and Qing He and Qingxiao Dong and Ragavan Srinivasan and Raj Ganapathy and Ramon Calderer and Ricardo Silveira Cabral and Robert Stojnic and Roberta Raileanu and Rohan Maheswari and Rohit Girdhar and Rohit Patel and Romain Sauvestre and Ronnie Polidoro and Roshan Sumbaly and Ross Taylor and Ruan Silva and Rui Hou and Rui Wang and Saghar Hosseini and Sahana Chennabasappa and Sanjay Singh and Sean Bell and Seohyun Sonia Kim and Sergey Edunov and Shaoliang Nie and Sharan Narang and Sharath Raparthy and Sheng Shen and Shengye Wan and Shruti Bhosale and Shun Zhang and Simon Vandenhende and Soumya Batra and Spencer Whitman and Sten Sootla and Stephane Collot and Suchin Gururangan and Sydney Borodinsky and Tamar Herman and Tara Fowler and Tarek Sheasha and Thomas Georgiou and Thomas Scialom and Tobias Speckbacher and Todor Mihaylov and Tong Xiao and Ujjwal Karn and Vedanuj Goswami and Vibhor Gupta and Vignesh Ramanathan and Viktor Kerkez and Vincent Gonguet and Virginie Do and Vish Vogeti and Vítor Albiero and Vladan Petrovic and Weiwei Chu and Wenhan Xiong and Wenyin Fu and Whitney Meers and Xavier Martinet and Xiaodong Wang and Xiaofang Wang and Xiaoqing Ellen Tan and Xide Xia and Xinfeng Xie and Xuchao Jia and Xuewei Wang and Yaelle Goldschlag and Yashesh Gaur and Yasmine Babaei and Yi Wen and Yiwen Song and Yuchen Zhang and Yue Li and Yuning Mao and Zacharie Delpierre Coudert and Zheng Yan and Zhengxing Chen and Zoe Papakipos and Aaditya Singh and Aayushi Srivastava and Abha Jain and Adam Kelsey and Adam Shajnfeld and Adithya Gangidi and Adolfo Victoria and Ahuva Goldstand and Ajay Menon and Ajay Sharma and Alex Boesenberg and Alexei Baevski and Allie Feinstein and Amanda Kallet and Amit Sangani and Amos Teo and Anam Yunus and Andrei Lupu and Andres Alvarado and Andrew Caples and Andrew Gu and Andrew Ho and Andrew Poulton and Andrew Ryan and Ankit Ramchandani and Annie Dong and Annie Franco and Anuj Goyal and Aparajita Saraf and Arkabandhu Chowdhury and Ashley Gabriel and Ashwin Bharambe and Assaf Eisenman and Azadeh Yazdan and Beau James and Ben Maurer and Benjamin Leonhardi and Bernie Huang and Beth Loyd and Beto De Paola and Bhargavi Paranjape and Bing Liu and Bo Wu and Boyu Ni and Braden Hancock and Bram Wasti and Brandon Spence and Brani Stojkovic and Brian Gamido and Britt Montalvo and Carl Parker and Carly Burton and Catalina Mejia and Ce Liu and Changhan Wang and Changkyu Kim and Chao Zhou and Chester Hu and Ching-Hsiang Chu and Chris Cai and Chris Tindal and Christoph Feichtenhofer and Cynthia Gao and Damon Civin and Dana Beaty and Daniel Kreymer and Daniel Li and David Adkins and David Xu and Davide Testuggine and Delia David and Devi Parikh and Diana Liskovich and Didem Foss and Dingkang Wang and Duc Le and Dustin Holland and Edward Dowling and Eissa Jamil and Elaine Montgomery and Eleonora Presani and Emily Hahn and Emily Wood and Eric-Tuan Le and Erik Brinkman and Esteban Arcaute and Evan Dunbar and Evan Smothers and Fei Sun and Felix Kreuk and Feng Tian and Filippos Kokkinos and Firat Ozgenel and Francesco Caggioni and Frank Kanayet and Frank Seide and Gabriela Medina Florez and Gabriella Schwarz and Gada Badeer and Georgia Swee and Gil Halpern and Grant Herman and Grigory Sizov and Guangyi and Zhang and Guna Lakshminarayanan and Hakan Inan and Hamid Shojanazeri and Han Zou and Hannah Wang and Hanwen Zha and Haroun Habeeb and Harrison Rudolph and Helen Suk and Henry Aspegren and Hunter Goldman and Hongyuan Zhan and Ibrahim Damlaj and Igor Molybog and Igor Tufanov and Ilias Leontiadis and Irina-Elena Veliche and Itai Gat and Jake Weissman and James Geboski and James Kohli and Janice Lam and Japhet Asher and Jean-Baptiste Gaya and Jeff Marcus and Jeff Tang and Jennifer Chan and Jenny Zhen and Jeremy Reizenstein and Jeremy Teboul and Jessica Zhong and Jian Jin and Jingyi Yang and Joe Cummings and Jon Carvill and Jon Shepard and Jonathan McPhie and Jonathan Torres and Josh Ginsburg and Junjie Wang and Kai Wu and Kam Hou U and Karan Saxena and Kartikay Khandelwal and Katayoun Zand and Kathy Matosich and Kaushik Veeraraghavan and Kelly Michelena and Keqian Li and Kiran Jagadeesh and Kun Huang and Kunal Chawla and Kyle Huang and Lailin Chen and Lakshya Garg and Lavender A and Leandro Silva and Lee Bell and Lei Zhang and Liangpeng Guo and Licheng Yu and Liron Moshkovich and Luca Wehrstedt and Madian Khabsa and Manav Avalani and Manish Bhatt and Martynas Mankus and Matan Hasson and Matthew Lennie and Matthias Reso and Maxim Groshev and Maxim Naumov and Maya Lathi and Meghan Keneally and Miao Liu and Michael L. Seltzer and Michal Valko and Michelle Restrepo and Mihir Patel and Mik Vyatskov and Mikayel Samvelyan and Mike Clark and Mike Macey and Mike Wang and Miquel Jubert Hermoso and Mo Metanat and Mohammad Rastegari and Munish Bansal and Nandhini Santhanam and Natascha Parks and Natasha White and Navyata Bawa and Nayan Singhal and Nick Egebo and Nicolas Usunier and Nikhil Mehta and Nikolay Pavlovich Laptev and Ning Dong and Norman Cheng and Oleg Chernoguz and Olivia Hart and Omkar Salpekar and Ozlem Kalinli and Parkin Kent and Parth Parekh and Paul Saab and Pavan Balaji and Pedro Rittner and Philip Bontrager and Pierre Roux and Piotr Dollar and Polina Zvyagina and Prashant Ratanchandani and Pritish Yuvraj and Qian Liang and Rachad Alao and Rachel Rodriguez and Rafi Ayub and Raghotham Murthy and Raghu Nayani and Rahul Mitra and Rangaprabhu Parthasarathy and Raymond Li and Rebekkah Hogan and Robin Battey and Rocky Wang and Russ Howes and Ruty Rinott and Sachin Mehta and Sachin Siby and Sai Jayesh Bondu and Samyak Datta and Sara Chugh and Sara Hunt and Sargun Dhillon and Sasha Sidorov and Satadru Pan and Saurabh Mahajan and Saurabh Verma and Seiji Yamamoto and Sharadh Ramaswamy and Shaun Lindsay and Shaun Lindsay and Sheng Feng and Shenghao Lin and Shengxin Cindy Zha and Shishir Patil and Shiva Shankar and Shuqiang Zhang and Shuqiang Zhang and Sinong Wang and Sneha Agarwal and Soji Sajuyigbe and Soumith Chintala and Stephanie Max and Stephen Chen and Steve Kehoe and Steve Satterfield and Sudarshan Govindaprasad and Sumit Gupta and Summer Deng and Sungmin Cho and Sunny Virk and Suraj Subramanian and Sy Choudhury and Sydney Goldman and Tal Remez and Tamar Glaser and Tamara Best and Thilo Koehler and Thomas Robinson and Tianhe Li and Tianjun Zhang and Tim Matthews and Timothy Chou and Tzook Shaked and Varun Vontimitta and Victoria Ajayi and Victoria Montanez and Vijai Mohan and Vinay Satish Kumar and Vishal Mangla and Vlad Ionescu and Vlad Poenaru and Vlad Tiberiu Mihailescu and Vladimir Ivanov and Wei Li and Wenchen Wang and Wenwen Jiang and Wes Bouaziz and Will Constable and Xiaocheng Tang and Xiaojian Wu and Xiaolan Wang and Xilun Wu and Xinbo Gao and Yaniv Kleinman and Yanjun Chen and Ye Hu and Ye Jia and Ye Qi and Yenda Li and Yilin Zhang and Ying Zhang and Yossi Adi and Youngjin Nam and Yu and Wang and Yu Zhao and Yuchen Hao and Yundi Qian and Yunlu Li and Yuzi He and Zach Rait and Zachary DeVito and Zef Rosnbrick and Zhaoduo Wen and Zhenyu Yang and Zhiwei Zhao and Zhiyu Ma},
+      year={2024},
+      eprint={2407.21783},
+      archivePrefix={arXiv},
+      primaryClass={cs.AI},
+      url={https://arxiv.org/abs/2407.21783}, 
+}
+
+@misc{bloom2024gpt2residualsaes,
+   title = {Open Source Sparse Autoencoders for all Residual Stream Layers of GPT2 Small},
+   author = {Joseph Bloom},
+   year = {2024},
+   url = {https://www.alignmentforum.org/posts/f9EgfLSurAiqRJySD/open-source-sparse-autoencoders-for-all-residual-stream},
+}
+
+@misc{gemmateam2024gemma2improvingopen,
+      title={Gemma 2: Improving Open Language Models at a Practical Size}, 
+      author={Gemma Team and Morgane Riviere and Shreya Pathak and Pier Giuseppe Sessa and Cassidy Hardin and Surya Bhupatiraju and Léonard Hussenot and Thomas Mesnard and Bobak Shahriari and Alexandre Ramé and Johan Ferret and Peter Liu and Pouya Tafti and Abe Friesen and Michelle Casbon and Sabela Ramos and Ravin Kumar and Charline Le Lan and Sammy Jerome and Anton Tsitsulin and Nino Vieillard and Piotr Stanczyk and Sertan Girgin and Nikola Momchev and Matt Hoffman and Shantanu Thakoor and Jean-Bastien Grill and Behnam Neyshabur and Olivier Bachem and Alanna Walton and Aliaksei Severyn and Alicia Parrish and Aliya Ahmad and Allen Hutchison and Alvin Abdagic and Amanda Carl and Amy Shen and Andy Brock and Andy Coenen and Anthony Laforge and Antonia Paterson and Ben Bastian and Bilal Piot and Bo Wu and Brandon Royal and Charlie Chen and Chintu Kumar and Chris Perry and Chris Welty and Christopher A. Choquette-Choo and Danila Sinopalnikov and David Weinberger and Dimple Vijaykumar and Dominika Rogozińska and Dustin Herbison and Elisa Bandy and Emma Wang and Eric Noland and Erica Moreira and Evan Senter and Evgenii Eltyshev and Francesco Visin and Gabriel Rasskin and Gary Wei and Glenn Cameron and Gus Martins and Hadi Hashemi and Hanna Klimczak-Plucińska and Harleen Batra and Harsh Dhand and Ivan Nardini and Jacinda Mein and Jack Zhou and James Svensson and Jeff Stanway and Jetha Chan and Jin Peng Zhou and Joana Carrasqueira and Joana Iljazi and Jocelyn Becker and Joe Fernandez and Joost van Amersfoort and Josh Gordon and Josh Lipschultz and Josh Newlan and Ju-yeong Ji and Kareem Mohamed and Kartikeya Badola and Kat Black and Katie Millican and Keelin McDonell and Kelvin Nguyen and Kiranbir Sodhia and Kish Greene and Lars Lowe Sjoesund and Lauren Usui and Laurent Sifre and Lena Heuermann and Leticia Lago and Lilly McNealus and Livio Baldini Soares and Logan Kilpatrick and Lucas Dixon and Luciano Martins and Machel Reid and Manvinder Singh and Mark Iverson and Martin Görner and Mat Velloso and Mateo Wirth and Matt Davidow and Matt Miller and Matthew Rahtz and Matthew Watson and Meg Risdal and Mehran Kazemi and Michael Moynihan and Ming Zhang and Minsuk Kahng and Minwoo Park and Mofi Rahman and Mohit Khatwani and Natalie Dao and Nenshad Bardoliwalla and Nesh Devanathan and Neta Dumai and Nilay Chauhan and Oscar Wahltinez and Pankil Botarda and Parker Barnes and Paul Barham and Paul Michel and Pengchong Jin and Petko Georgiev and Phil Culliton and Pradeep Kuppala and Ramona Comanescu and Ramona Merhej and Reena Jana and Reza Ardeshir Rokni and Rishabh Agarwal and Ryan Mullins and Samaneh Saadat and Sara Mc Carthy and Sarah Cogan and Sarah Perrin and Sébastien M. R. Arnold and Sebastian Krause and Shengyang Dai and Shruti Garg and Shruti Sheth and Sue Ronstrom and Susan Chan and Timothy Jordan and Ting Yu and Tom Eccles and Tom Hennigan and Tomas Kocisky and Tulsee Doshi and Vihan Jain and Vikas Yadav and Vilobh Meshram and Vishal Dharmadhikari and Warren Barkley and Wei Wei and Wenming Ye and Woohyun Han and Woosuk Kwon and Xiang Xu and Zhe Shen and Zhitao Gong and Zichuan Wei and Victor Cotruta and Phoebe Kirk and Anand Rao and Minh Giang and Ludovic Peran and Tris Warkentin and Eli Collins and Joelle Barral and Zoubin Ghahramani and Raia Hadsell and D. Sculley and Jeanine Banks and Anca Dragan and Slav Petrov and Oriol Vinyals and Jeff Dean and Demis Hassabis and Koray Kavukcuoglu and Clement Farabet and Elena Buchatskaya and Sebastian Borgeaud and Noah Fiedel and Armand Joulin and Kathleen Kenealy and Robert Dadashi and Alek Andreev},
+      year={2024},
+      eprint={2408.00118},
+      archivePrefix={arXiv},
+      primaryClass={cs.CL},
+      url={https://arxiv.org/abs/2408.00118}, 
+}
+
+@article{radford2019language,
+  author = {Radford, Alec and Wu, Jeffrey and Child, Rewon and Luan, David and Amodei, Dario and Sutskever, Ilya},
+  interhash = {b926ece39c03cdf5499f6540cf63babd},
+  intrahash = {33e4b003b64b1060334660fbf6db1f3f},
+  journal = {OpenAI},
+  keywords = {gpt gpt2 languagemodelling transferlearning transformer},
+  note = {Accessed: 2024-11-15},
+  timestamp = {2024-11-15T12:44:17.000+0100},
+  title = {Language Models are Unsupervised Multitask Learners},
+  url = {https://cdn.openai.com/better-language-models/language_models_are_unsupervised_multitask_learners.pdf},
+  year = 2019
+}
+
+% Dataset
+@inproceedings{hendrycks2021measuring,
+    title={Measuring Massive Multitask Language Understanding},
+    author={Dan Hendrycks and Collin Burns and Steven Basart and Andy Zou and Mantas Mazeika and Dawn Song and Jacob Steinhardt},
+    booktitle={International Conference on Learning Representations},
+    year={2021},
+    url={https://openreview.net/forum?id=d7KBjmI3GmQ}
+}
+
+
+
+% Benchmark
+@inproceedings{parrish-etal-2022-bbq,
+    title = "{BBQ}: A hand-built bias benchmark for question answering",
+    author = "Parrish, Alicia  and
+      Chen, Angelica  and
+      Nangia, Nikita  and
+      Padmakumar, Vishakh  and
+      Phang, Jason  and
+      Thompson, Jana  and
+      Htut, Phu Mon  and
+      Bowman, Samuel",
+    editor = "Muresan, Smaranda  and
+      Nakov, Preslav  and
+      Villavicencio, Aline",
+    booktitle = "Findings of the Association for Computational Linguistics: ACL 2022",
+    month = may,
+    year = "2022",
+    address = "Dublin, Ireland",
+    publisher = "Association for Computational Linguistics",
+    url = "https://aclanthology.org/2022.findings-acl.165/",
+    doi = "10.18653/v1/2022.findings-acl.165",
+    pages = "2086--2105"
+}
+
+@misc{wei2024measuringshortformfactualitylarge,
+      title={Measuring short-form factuality in large language models}, 
+      author={Jason Wei and Nguyen Karina and Hyung Won Chung and Yunxin Joy Jiao and Spencer Papay and Amelia Glaese and John Schulman and William Fedus},
+      year={2024},
+      eprint={2411.04368},
+      archivePrefix={arXiv},
+      primaryClass={cs.CL},
+      url={https://openai.com/index/introducing-simpleqa/}, 
+}
+
+@inproceedings{mazeika2024harmbench,
+    title={HarmBench: A Standardized Evaluation Framework for Automated Red Teaming and Robust Refusal},
+    author={Mantas Mazeika and Long Phan and Xuwang Yin and Andy Zou and Zifan Wang and Norman Mu and Elham Sakhaee and Nathaniel Li and Steven Basart and Bo Li and David Forsyth and Dan Hendrycks},
+    booktitle={Forty-first International Conference on Machine Learning},
+    year={2024},
+    url={https://openreview.net/forum?id=f3TUipYU3U}
+}
+
+@inproceedings{rottger-etal-2024-xstest,
+    title = "{XST}est: A Test Suite for Identifying Exaggerated Safety Behaviours in Large Language Models",
+    author = {R{\"o}ttger, Paul  and
+      Kirk, Hannah  and
+      Vidgen, Bertie  and
+      Attanasio, Giuseppe  and
+      Bianchi, Federico  and
+      Hovy, Dirk},
+    editor = "Duh, Kevin  and
+      Gomez, Helena  and
+      Bethard, Steven",
+    booktitle = "Proceedings of the 2024 Conference of the North American Chapter of the Association for Computational Linguistics: Human Language Technologies (Volume 1: Long Papers)",
+    month = jun,
+    year = "2024",
+    address = "Mexico City, Mexico",
+    publisher = "Association for Computational Linguistics",
+    url = "https://aclanthology.org/2024.naacl-long.301/",
+    doi = "10.18653/v1/2024.naacl-long.301",
+    pages = "5377--5400"
+}
+
+@inproceedings{li2024the,
+    title={The {WMDP} Benchmark: Measuring and Reducing Malicious Use with Unlearning},
+    author={Nathaniel Li and Alexander Pan and Anjali Gopal and Summer Yue and Daniel Berrios and Alice Gatti and Justin D. Li and Ann-Kathrin Dombrowski and Shashwat Goel and Gabriel Mukobi and Nathan Helm-Burger and Rassin Lababidi and Lennart Justen and Andrew Bo Liu and Michael Chen and Isabelle Barrass and Oliver Zhang and Xiaoyuan Zhu and Rishub Tamirisa and Bhrugu Bharathi and Ariel Herbert-Voss and Cort B Breuer and Andy Zou and Mantas Mazeika and Zifan Wang and Palash Oswal and Weiran Lin and Adam Alfred Hunt and Justin Tienken-Harder and Kevin Y. Shih and Kemper Talley and John Guan and Ian Steneker and David Campbell and Brad Jokubaitis and Steven Basart and Stephen Fitz and Ponnurangam Kumaraguru and Kallol Krishna Karmakar and Uday Tupakula and Vijay Varadharajan and Yan Shoshitaishvili and Jimmy Ba and Kevin M. Esvelt and Alexandr Wang and Dan Hendrycks},
+    booktitle={Forty-first International Conference on Machine Learning},
+    year={2024},
+    url={https://openreview.net/forum?id=xlr6AUDuJz}
+}
+
+@inproceedings{king2024hearts,
+    title={{HEARTS}: A Holistic Framework for Explainable, Sustainable and Robust Text Stereotype Detection},
+    author={Theo King and Zekun Wu and Adriano Koshiyama and Emre Kazim and Philip Colin Treleaven},
+    booktitle={Neurips Safe Generative AI Workshop 2024},
+    year={2024},
+    url={https://openreview.net/forum?id=arh91riKiQ}
+}
+
+@inproceedings{wang2024mmlupro,
+    title={{MMLU}-Pro: A More Robust and Challenging Multi-Task Language Understanding Benchmark},
+    author={Yubo Wang and Xueguang Ma and Ge Zhang and Yuansheng Ni and Abhranil Chandra and Shiguang Guo and Weiming Ren and Aaran Arulraj and Xuan He and Ziyan Jiang and Tianle Li and Max Ku and Kai Wang and Alex Zhuang and Rongqi Fan and Xiang Yue and Wenhu Chen},
+    booktitle={The Thirty-eight Conference on Neural Information Processing Systems Datasets and Benchmarks Track},
+    year={2024},
+    url={https://openreview.net/forum?id=y10DM6R2r3}
+}
+
+@misc{cobbe2021trainingverifierssolvemath,
+    title={Training Verifiers to Solve Math Word Problems}, 
+    author={Karl Cobbe and Vineet Kosaraju and Mohammad Bavarian and Mark Chen and Heewoo Jun and Lukasz Kaiser and Matthias Plappert and Jerry Tworek and Jacob Hilton and Reiichiro Nakano and Christopher Hesse and John Schulman},
+    year={2021},
+    eprint={2110.14168},
+    archivePrefix={arXiv},
+    primaryClass={cs.LG},
+    url={https://arxiv.org/abs/2110.14168}, 
+}
+
+% Brain
+@article{Pang2023,
+  author    = {James C. Pang and Kevin M. Aquino and Marianne Oldehinkel and Peter A. Robinson and Ben D. Fulcher and Michael Breakspear and Alex Fornito},
+  title     = {Geometric constraints on human brain function},
+  journal   = {Nature},
+  volume    = {618},
+  number    = {7965},
+  pages     = {566--574},
+  year      = {2023},
+  month     = {June},
+  doi       = {10.1038/s41586-023-06098-1},
+  url       = {https://doi.org/10.1038/s41586-023-06098-1},
+  issn      = {1476-4687}
+}
+
+@article{Poo2009,
+  author    = {Cindy Poo and Jeffry S. Isaacson},
+  title     = {Odor representations in olfactory cortex: "sparse" coding, global inhibition, and oscillations},
+  journal   = {Neuron},
+  volume    = {62},
+  number    = {6},
+  pages     = {850--861},
+  year      = {2009},
+  month     = {June},
+  doi       = {10.1016/j.neuron.2009.05.022},
+  issn      = {0896-6273},
+  pmid      = {19555653},
+  pmcid     = {PMC2702531},
+  url       = {https://doi.org/10.1016/j.neuron.2009.05.022},
+  note      = {Supported by NIH grants: F31 DC009366, R01 DC004682, T32 NS061847}
+}
+
+@book{James2007,
+  author    = {William James},
+  title     = {The Principles of Psychology, Vol. 1},
+  publisher = {Cosimo, Inc.},
+  year      = {2007}
+}
+
+@article{Coppola2022,
+  author    = {Peter Coppola and Judith Allanson and Lorina Naci and Ram Adapa and Paola Finoia and Guy B. Williams and John D. Pickard and Adrian M. Owen and David K. Menon and Emmanuel A. Stamatakis},
+  title     = {The complexity of the stream of consciousness},
+  journal   = {Communications Biology},
+  year      = {2022},
+  volume    = {5},
+  number    = {1},
+  pages     = {1173},
+  doi       = {10.1038/s42003-022-04109-x},
+  url       = {https://doi.org/10.1038/s42003-022-04109-x},
+  issn      = {2399-3642}
+}
+
+@article{DelPozo2021,
+  author    = {S. M. Del Pozo and H. Laufs and V. Bonhomme and S. Laureys and P. Balenzuela and E. Tagliazucchi},
+  title     = {Unconsciousness reconfigures modular brain network dynamics},
+  journal   = {Chaos},
+  year      = {2021},
+  volume    = {31},
+  number    = {9},
+  pages     = {093117},
+  doi       = {10.1063/5.0046047},
+  issn      = {1054-1500},
+  pmid      = {34598477}
+}
+
+% AI Alignment
+@inproceedings{qi2025safety,
+    title={Safety Alignment Should be Made More Than Just a Few Tokens Deep},
+    author={Xiangyu Qi and Ashwinee Panda and Kaifeng Lyu and Xiao Ma and Subhrajit Roy and Ahmad Beirami and Prateek Mittal and Peter Henderson},
+    booktitle={The Thirteenth International Conference on Learning Representations},
+    year={2025},
+    url={https://openreview.net/forum?id=6Mxhg9PtDE}
+}
+
+
+% Emergent Misalignment
+@inproceedings{qi2024fine,
+    author={Xiangyu Qi and Yi Zeng and Tinghao Xie and Pin-Yu Chen and Ruoxi Jia and Prateek Mittal and Peter Henderson},
+    title={Fine-tuning Aligned Language Models Compromises Safety, Even When Users Do Not Intend To!},
+    year={2024},
+    cdate={1704067200000},
+    url={https://openreview.net/forum?id=hTEGyKf0dZ},
+    booktitle={ICLR}
+}
+
+@inproceedings{betley2025emergent,
+    title={Emergent Misalignment: Narrow finetuning can produce broadly misaligned {LLM}s},
+    author={Jan Betley and Daniel Chee Hian Tan and Niels Warncke and Anna Sztyber-Betley and Xuchan Bao and Mart{\'\i}n Soto and Nathan Labenz and Owain Evans},
+    booktitle={Forty-second International Conference on Machine Learning},
+    year={2025},
+    url={https://openreview.net/forum?id=aOIJ2gVRWW}
+}
+@inproceedings{casademunt2025steering,
+    title={Steering Fine-Tuning Generalization with Targeted Concept Ablation},
+    author={Helena Casademunt and Caden Juang and Samuel Marks and Senthooran Rajamanoharan and Neel Nanda},
+    booktitle={ICLR 2025 Workshop on Building Trust in Language Models and Applications},
+    year={2025},
+    url={https://openreview.net/forum?id=2HyKWpAB4i}
+}
+
+@inproceedings{ji-etal-2025-language-models,
+    title = "Language Models Resist Alignment: Evidence From Data Compression",
+    author = "Ji, Jiaming  and
+      Wang, Kaile  and
+      Qiu, Tianyi Alex  and
+      Chen, Boyuan  and
+      Zhou, Jiayi  and
+      Li, Changye  and
+      Lou, Hantao  and
+      Dai, Josef  and
+      Liu, Yunhuai  and
+      Yang, Yaodong",
+    editor = "Che, Wanxiang  and
+      Nabende, Joyce  and
+      Shutova, Ekaterina  and
+      Pilehvar, Mohammad Taher",
+    booktitle = "Proceedings of the 63rd Annual Meeting of the Association for Computational Linguistics (Volume 1: Long Papers)",
+    month = jul,
+    year = "2025",
+    address = "Vienna, Austria",
+    publisher = "Association for Computational Linguistics",
+    url = "https://aclanthology.org/2025.acl-long.1141/",
+    doi = "10.18653/v1/2025.acl-long.1141",
+    pages = "23411--23432",
+    ISBN = "979-8-89176-251-0"
+}
+
+@misc{guan2025deliberativealignmentreasoningenables,
+      title={Deliberative Alignment: Reasoning Enables Safer Language Models}, 
+      author={Melody Y. Guan and Manas Joglekar and Eric Wallace and Saachi Jain and Boaz Barak and Alec Helyar and Rachel Dias and Andrea Vallone and Hongyu Ren and Jason Wei and Hyung Won Chung and Sam Toyer and Johannes Heidecke and Alex Beutel and Amelia Glaese},
+      year={2024},
+      howpublished={\url{https://openai.com/index/deliberative-alignment/}}, 
+}
+
+@inproceedings{rawte-etal-2023-troubling,
+    title = "The Troubling Emergence of Hallucination in Large Language Models - An Extensive Definition, Quantification, and Prescriptive Remediations",
+    author = "Rawte, Vipula  and
+      Chakraborty, Swagata  and
+      Pathak, Agnibh  and
+      Sarkar, Anubhav  and
+      Tonmoy, S.M Towhidul Islam  and
+      Chadha, Aman  and
+      Sheth, Amit  and
+      Das, Amitava",
+    editor = "Bouamor, Houda  and
+      Pino, Juan  and
+      Bali, Kalika",
+    booktitle = "Proceedings of the 2023 Conference on Empirical Methods in Natural Language Processing",
+    month = dec,
+    year = "2023",
+    address = "Singapore",
+    publisher = "Association for Computational Linguistics",
+    url = "https://aclanthology.org/2023.emnlp-main.155/",
+    doi = "10.18653/v1/2023.emnlp-main.155",
+    pages = "2541--2573"
+}
+
+% Memory
+@inproceedings{li-etal-2023-large,
+    title = "Large Language Models with Controllable Working Memory",
+    author = "Li, Daliang  and
+      Rawat, Ankit Singh  and
+      Zaheer, Manzil  and
+      Wang, Xin  and
+      Lukasik, Michal  and
+      Veit, Andreas  and
+      Yu, Felix  and
+      Kumar, Sanjiv",
+    editor = "Rogers, Anna  and
+      Boyd-Graber, Jordan  and
+      Okazaki, Naoaki",
+    booktitle = "Findings of the Association for Computational Linguistics: ACL 2023",
+    month = jul,
+    year = "2023",
+    address = "Toronto, Canada",
+    publisher = "Association for Computational Linguistics",
+    url = "https://aclanthology.org/2023.findings-acl.112/",
+    doi = "10.18653/v1/2023.findings-acl.112",
+    pages = "1774--1793"
+}
+
+@inproceedings{fountas2025humaninspired,
+    title={Human-inspired Episodic Memory for Infinite Context {LLM}s},
+    author={Zafeirios Fountas and Martin Benfeghoul and Adnan Oomerjee and Fenia Christopoulou and Gerasimos Lampouras and Haitham Bou Ammar and Jun Wang},
+    booktitle={The Thirteenth International Conference on Learning Representations},
+    year={2025},
+    url={https://openreview.net/forum?id=BI2int5SAC}
+}
+
+
+@article{Tikochinski2025,
+    author={Tikochinski, Refael
+    and Goldstein, Ariel
+    and Meiri, Yoav
+    and Hasson, Uri
+    and Reichart, Roi},
+    title={Incremental accumulation of linguistic context in artificial and biological neural networks},
+    journal={Nature Communications},
+    year={2025},
+    month={Jan},
+    day={18},
+    volume={16},
+    number={1},
+    pages={803},
+    issn={2041-1723},
+    doi={10.1038/s41467-025-56162-9},
+    url={https://doi.org/10.1038/s41467-025-56162-9}
+}
+
+
+% Layer sharing
+@inproceedings{elhoushi2024,
+  author={Mostafa Elhoushi and Akshat Shrivastava and Diana Liskovich and Basil Hosmer and Bram Wasti and Liangzhen Lai and Anas Mahmoud and Bilge Acun and Saurabh Agarwal and Ahmed Roman and Ahmed A Aly and Beidi Chen and Carole-Jean Wu},
+  title={LayerSkip: Enabling Early Exit Inference and Self-Speculative Decoding},
+  year={2024},
+  pages={12622-12642},
+  url={https://doi.org/10.18653/v1/2024.acl-long.681},
+  booktitle={Proceedings of the 62nd Annual Meeting of the Association for Computational Linguistics}
+}
+
+@inproceedings{ye-etal-2021-tr,
+    title = "TR-BERT: Dynamic Token Reduction for Accelerating BERT Inference",
+    author = "Ye, Deming  and
+      Lin, Yankai  and
+      Huang, Yufei  and
+      Sun, Maosong",
+    editor = "Toutanova, Kristina  and
+      Rumshisky, Anna  and
+      Zettlemoyer, Luke  and
+      Hakkani-Tur, Dilek  and
+      Beltagy, Iz  and
+      Bethard, Steven  and
+      Cotterell, Ryan  and
+      Chakraborty, Tanmoy  and
+      Zhou, Yichao",
+    booktitle = "Proceedings of the 2021 Conference of the North American Chapter of the Association for Computational Linguistics: Human Language Technologies",
+    month = jun,
+    year = "2021",
+    address = "Online",
+    publisher = "Association for Computational Linguistics",
+    url = "https://aclanthology.org/2021.naacl-main.463/",
+    doi = "10.18653/v1/2021.naacl-main.463",
+    pages = "5798--5809"
+}
+
+@misc{raposo2024mixtureofdepths,
+      title={Mixture-of-Depths: Dynamically allocating compute in transformer-based language models}, 
+      author={David Raposo and Sam Ritter and Blake Richards and Timothy Lillicrap and Peter Conway Humphreys and Adam Santoro},
+      year={2024},
+      eprint={2404.02258},
+      archivePrefix={arXiv},
+      primaryClass={cs.LG},
+      url={https://arxiv.org/abs/2404.02258}, 
+}
+
+% Additional citations for ICML version
+@inproceedings{vig2020causal,
+  title={Investigating gender bias in language models using causal mediation analysis},
+  author={Vig, Jesse and Gehrmann, Sebastian and Belinkov, Yonatan and Qian, Sharon and Nevo, Daniel and Singer, Yaron and Shieber, Stuart},
+  booktitle={Advances in Neural Information Processing Systems},
+  volume={33},
+  pages={12388--12401},
+  year={2020}
+}
+
+@inproceedings{meng2022locating,
+  title={Locating and editing factual associations in GPT},
+  author={Meng, Kevin and Bau, David and Andonian, Alex and Belinkov, Yonatan},
+  booktitle={Advances in Neural Information Processing Systems},
+  volume={35},
+  pages={17359--17372},
+  year={2022}
+}
+
+@article{team2024gemma,
+  title={Gemma: Open models based on Gemini research and technology},
+  author={Team, Gemma and Mesnard, Thomas and Hardin, Cassidy and Dadashi, Robert and Bhupatiraju, Surya and Pathak, Shreya and Sifre, Laurent and Rivi{\`e}re, Morgane and Kale, Mihir Sanjay and Love, Juliette and others},
+  journal={arXiv preprint arXiv:2403.08295},
+  year={2024}
+}
+
+@article{lieberum2024gemma,
+  title={Gemma scope: Open sparse autoencoders everywhere all at once on Gemma 2},
+  author={Lieberum, Tom and Rajamanoharan, Senthooran and Conmy, Arthur and Smith, Lewis and Sonnerat, Nicolas and Varma, Vikrant and Kram{\'a}r, J{\'a}nos and Dragan, Anca and Shah, Rohin and Nanda, Neel},
+  journal={arXiv preprint arXiv:2408.05147},
+  year={2024}
+}
+
+@article{engels2025decomposing,
+  title={Decomposing the Dark Matter of Sparse Autoencoders},
+  author={Engels, Joshua and Riggs, Logan and Tegmark, Max},
+  journal={Transactions on Machine Learning Research},
+  year={2025}
+}
+
+@inproceedings{wu2025axbench,
+  title={{AxBench}: Steering {LLM}s? Even Simple Baselines Outperform Sparse Autoencoders},
+  author={Wu, Zhengxuan and Arora, Aryaman and Geiger, Atticus and Huang, Jing and Wang, Zheng and Potts, Christopher and Manning, Christopher D. and Bowman, Samuel R.},
+  booktitle={ICML},
+  year={2025}
+}
+@inproceedings{wang2023interpretability,
+title={Interpretability in the Wild: a Circuit for Indirect Object Identification in {GPT}-2 Small},
+author={Kevin Ro Wang and Alexandre Variengien and Arthur Conmy and Buck Shlegeris and Jacob Steinhardt},
+booktitle={The Eleventh International Conference on Learning Representations },
+year={2023},
+url={https://openreview.net/forum?id=NpsVSN6o4ul}
+}

app/src/content/embeds/banner.html

@@ -0,0 +1,389 @@
+<div class="hero-3d-container"></div>
+<style>
+.hero-3d-container {
+  width: 100%; height: 440px; position: relative; overflow: hidden;
+  background: linear-gradient(135deg, #0c1220 0%, #0a0e1a 60%, #0d1424 100%);
+}
+.hero-3d-container > canvas { display: block; }
+</style>
+<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
+<script>
+(function() {
+  var ctr = document.querySelectorAll('.hero-3d-container');
+  var el = ctr[ctr.length - 1];
+  if (!el || el.dataset.m) return;
+  el.dataset.m = '1';
+
+  var W = el.clientWidth, H = el.clientHeight;
+
+  /* ===== Scene ===== */
+  var scene = new THREE.Scene();
+
+  /* ===== Camera ===== */
+  var camera = new THREE.PerspectiveCamera(44, W / H, 0.1, 100);
+  camera.position.set(7.5, 7, 19);
+
+  /* ===== Renderer ===== */
+  var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+  renderer.setSize(W, H);
+  renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
+  renderer.toneMapping = THREE.ACESFilmicToneMapping;
+  renderer.toneMappingExposure = 1.2;
+  el.appendChild(renderer.domElement);
+
+  /* ===== Lights ===== */
+  scene.add(new THREE.AmbientLight(0x9aadcc, 0.7));
+  var sun = new THREE.DirectionalLight(0xffffff, 0.9);
+  sun.position.set(5, 12, 8);
+  scene.add(sun);
+  var fill = new THREE.DirectionalLight(0x6688cc, 0.35);
+  fill.position.set(-5, 4, -4);
+  scene.add(fill);
+  var rim = new THREE.DirectionalLight(0x8866cc, 0.2);
+  rim.position.set(0, -2, 8);
+  scene.add(rim);
+
+  /* ===== Controls ===== */
+  var ctrl = new THREE.OrbitControls(camera, renderer.domElement);
+  ctrl.target.set(7.5, 1.5, 0);
+  ctrl.enableDamping = true;
+  ctrl.dampingFactor = 0.08;
+  ctrl.autoRotate = true;
+  ctrl.autoRotateSpeed = 0.3;
+  ctrl.enablePan = false;
+  ctrl.minDistance = 10;
+  ctrl.maxDistance = 28;
+  ctrl.maxPolarAngle = Math.PI * 0.72;
+  ctrl.update();
+
+  /* ===== Materials (paper-matched colors) ===== */
+  function M(c, e, ei) {
+    return new THREE.MeshStandardMaterial({
+      color: c, roughness: 0.4, metalness: 0.1,
+      emissive: e || 0x000000, emissiveIntensity: ei || 0
+    });
+  }
+  var GR = M(0x808080, 0x000000, 0);       // gray sides (paper)
+  var DK = M(0x1a1a1a, 0x000000, 0);       // black faces (paper)
+  var GN = M(0x4ade80, 0x22c55e, 0.6);     // bright green separators
+  var RD = M(0xef4444, 0xff0000, 0.5);     // bright red
+  var CY = M(0x22d3ee, 0x06b6d4, 0.5);    // bright cyan
+  var BL = M(0x3b82f6, 0x2563eb, 0.5);    // bright blue
+  var IN = M(0x818cf8, 0x6366f1, 0.5);    // indigo
+  var YL = M(0xfde047, 0xeab308, 0.6);    // bright yellow
+  var OR = M(0xf97316, 0xea580c, 0.5);    // orange
+  var PK = M(0xf472b6, 0xec4899, 0.5);    // pink
+  var PU = M(0xa855f7, 0x7c3aed, 0.5);    // purple
+  var GK = M(0x2dd4bf, 0x14b8a6, 0.5);    // teal (reward)
+
+  /* ===== Geometry ===== */
+  var BX = new THREE.BoxGeometry(0.85, 0.85, 0.85);
+  var ST = new THREE.BoxGeometry(0.12, 0.85, 0.06);
+  var EG = new THREE.EdgesGeometry(BX);
+  var EM = new THREE.LineBasicMaterial({ color: 0x1e293b, transparent: true, opacity: 0.3 });
+
+  /* ===== Text Sprites ===== */
+  function textSprite(text, opts) {
+    opts = opts || {};
+    var fontSize = opts.size || 28;
+    var color = opts.color || '#d4d4d4';
+    var bold = opts.bold || false;
+    var dpr = 2;
+    var cvs = document.createElement('canvas');
+    var ctx = cvs.getContext('2d');
+    var font = (bold ? 'bold ' : '') + (fontSize * dpr) + 'px Inter,-apple-system,system-ui,sans-serif';
+    ctx.font = font;
+    var w = ctx.measureText(text).width + 12 * dpr;
+    var h = fontSize * 1.8 * dpr;
+    cvs.width = Math.ceil(w);
+    cvs.height = Math.ceil(h);
+    ctx.font = font;
+    ctx.fillStyle = color;
+    ctx.textBaseline = 'middle';
+    ctx.textAlign = 'center';
+    ctx.fillText(text, w / 2, h / 2);
+    var tex = new THREE.CanvasTexture(cvs);
+    tex.minFilter = THREE.LinearFilter;
+    var mat = new THREE.SpriteMaterial({ map: tex, transparent: true, depthTest: false, depthWrite: false });
+    var sprite = new THREE.Sprite(mat);
+    var sc = opts.scale || 0.6;
+    sprite.scale.set(sc * w / h, sc, 1);
+    sprite.renderOrder = 999;
+    return sprite;
+  }
+
+  function addLabel(text, x, y, z, opts) {
+    var s = textSprite(text, opts);
+    s.position.set(x, y, z || 0);
+    scene.add(s);
+    return s;
+  }
+
+  /* ===== Build Layer Stack ===== */
+  var greenSeps = [];
+  function buildStack(bx, hl) {
+    for (var y = 0; y < 4; y++) {
+      for (var x = 0; x < 4; x++) {
+        var k = x + ',' + y;
+        var top = (hl && hl[k]) || DK;
+        // Paper: black top/bottom, gray sides, colored top highlights
+        var m = new THREE.Mesh(BX, [GR, GR, top, DK, DK, DK]);
+        m.position.set(bx + x, y, 0);
+        scene.add(m);
+        var e = new THREE.LineSegments(EG, EM);
+        e.position.set(bx + x, y, 0);
+        scene.add(e);
+      }
+      var s = new THREE.Mesh(ST, GN.clone());
+      s.position.set(bx - 0.47, y, 0.43);
+      scene.add(s);
+      greenSeps.push(s);
+    }
+  }
+
+  // Policy stack with colored highlights
+  buildStack(0, {
+    '0,3': RD, '1,3': RD,
+    '2,2': CY, '3,2': CY,
+    '2,3': CY, '3,3': CY
+  });
+
+  // Critic stack with yellow top highlights (paper)
+  buildStack(9, {
+    '0,3': YL, '1,3': YL, '2,3': YL, '3,3': YL,
+    '0,2': YL, '1,2': YL
+  });
+
+  /* ===== Feature Direction Cubes (interactive) ===== */
+  var fMeshes = [], fGroups = [];
+  var fCols = [[RD, CY], [BL, RD], [CY, IN]];
+  var fDirs = [
+    [1, 0, 0.5], [-0.7, 0, 1],
+    [1, 0, -0.3], [0, 0, 1],
+    [-1, 0, 0.2], [0.7, 0, 0.7]
+  ];
+
+  for (var fy = 0; fy < 3; fy++) {
+    for (var fx = 0; fx < 2; fx++) {
+      var g = new THREE.Group();
+      var px = 5 + fx, py = fy + 0.5;
+      g.position.set(px, py, 0);
+
+      var col = fCols[fy][fx];
+      var fm = new THREE.Mesh(BX, [GR, GR, col, DK, DK, DK]);
+      g.add(fm);
+      g.add(new THREE.LineSegments(EG, EM));
+
+      var di = fy * 2 + fx;
+      var d = new THREE.Vector3(fDirs[di][0], fDirs[di][1], fDirs[di][2]).normalize();
+      g.add(new THREE.ArrowHelper(d, new THREE.Vector3(0, 0.48, 0), 0.45, 0x60a5fa, 0.14, 0.1));
+
+      g.userData = { baseY: py, targetY: py };
+      scene.add(g);
+      fMeshes.push(fm);
+      fGroups.push(g);
+    }
+  }
+
+  /* ===== Critic Value / Advantage / Reward ===== */
+  var criticCubes = [];
+  function addSingle(pos, mats) {
+    var m = new THREE.Mesh(BX, mats);
+    m.position.copy(pos);
+    scene.add(m);
+    var e = new THREE.LineSegments(EG, EM);
+    e.position.copy(pos);
+    scene.add(e);
+    criticCubes.push({ mesh: m, baseY: pos.y });
+    return m;
+  }
+
+  addSingle(new THREE.Vector3(14, 3, 0), [OR, OR, YL, OR, PK, PK]);
+  addSingle(new THREE.Vector3(15.5, 1.5, 0), [OR, DK, PU, DK, DK, DK]);
+  addSingle(new THREE.Vector3(14, 0, 0), [GK, GK, GN, GK, GK, GK]);
+
+  /* ===== Particles (residual stream flow) ===== */
+  var particles = [];
+  var particleGeo = new THREE.SphereGeometry(0.06, 8, 8);
+  var particlePaths = [
+    // Policy path: tokens → policy stack → features → back
+    { start: [-1.5, -0.5, 0], end: [1.5, 3.5, 0], color: 0x4ade80, speed: 0.008 },
+    { start: [1.5, 3.5, 0], end: [5.5, 1.5, 0], color: 0x60a5fa, speed: 0.007 },
+    { start: [5.5, 1.5, 0], end: [1.5, -0.5, 0], color: 0x818cf8, speed: 0.009 },
+    // Critic path: tokens → critic stack → value → advantage
+    { start: [7.5, -0.5, 0], end: [10.5, 3.5, 0], color: 0xfde047, speed: 0.008 },
+    { start: [10.5, 3.5, 0], end: [14, 3, 0], color: 0xfbbf24, speed: 0.007 },
+    { start: [14, 3, 0], end: [15.5, 1.5, 0], color: 0xa78bfa, speed: 0.006 },
+    { start: [15.5, 1.5, 0], end: [14, 0, 0], color: 0x4ade80, speed: 0.008 }
+  ];
+
+  for (var pi = 0; pi < particlePaths.length; pi++) {
+    var pp = particlePaths[pi];
+    var pMat = new THREE.MeshBasicMaterial({ color: pp.color, transparent: true, opacity: 0.9 });
+    var pMesh = new THREE.Mesh(particleGeo, pMat);
+    pMesh.position.set(pp.start[0], pp.start[1], pp.start[2]);
+    scene.add(pMesh);
+
+    // Add glow sprite
+    var glowCvs = document.createElement('canvas');
+    glowCvs.width = 32; glowCvs.height = 32;
+    var glowCtx = glowCvs.getContext('2d');
+    var grad = glowCtx.createRadialGradient(16, 16, 0, 16, 16, 16);
+    var c = new THREE.Color(pp.color);
+    grad.addColorStop(0, 'rgba(' + Math.round(c.r*255) + ',' + Math.round(c.g*255) + ',' + Math.round(c.b*255) + ',0.6)');
+    grad.addColorStop(1, 'rgba(' + Math.round(c.r*255) + ',' + Math.round(c.g*255) + ',' + Math.round(c.b*255) + ',0)');
+    glowCtx.fillStyle = grad;
+    glowCtx.fillRect(0, 0, 32, 32);
+    var glowTex = new THREE.CanvasTexture(glowCvs);
+    var glowMat = new THREE.SpriteMaterial({ map: glowTex, transparent: true, depthTest: false });
+    var glow = new THREE.Sprite(glowMat);
+    glow.scale.set(0.5, 0.5, 1);
+    pMesh.add(glow);
+
+    particles.push({
+      mesh: pMesh, mat: pMat,
+      start: new THREE.Vector3(pp.start[0], pp.start[1], pp.start[2]),
+      end: new THREE.Vector3(pp.end[0], pp.end[1], pp.end[2]),
+      t: Math.random(), speed: pp.speed
+    });
+  }
+
+  /* ===== Labels ===== */
+  addLabel('Policy \u03C0\u03B8', 1.5, 5, 0, { size: 36, color: '#a5b4fc', bold: true, scale: 0.7 });
+  addLabel('Critic V\u03C6', 10.5, 5, 0, { size: 36, color: '#fcd34d', bold: true, scale: 0.7 });
+
+  addLabel('1. Observe residual stream', 1.5, -1.2, 0, { size: 20, color: '#525252', scale: 0.5 });
+  addLabel('2. Select feature', 5.5, 3.8, 0, { size: 20, color: '#525252', scale: 0.5 });
+  addLabel('3. Append direction', 3, -2.1, 0, { size: 20, color: '#525252', scale: 0.5 });
+
+  addLabel('1. Observe residual stream', 10.5, -1.2, 0, { size: 20, color: '#525252', scale: 0.5 });
+  addLabel('2. Estimate state value', 14.5, 4.3, 0, { size: 20, color: '#525252', scale: 0.5 });
+  addLabel('3. Calculate advantage', 15, -0.8, 0, { size: 20, color: '#525252', scale: 0.5 });
+
+  addLabel('SAE Feature Directions', 5.5, -0.8, 0, { size: 22, color: '#737373', scale: 0.5 });
+  addLabel('Critic Value', 14, 2, 0, { size: 22, color: '#fbbf24', scale: 0.5 });
+  addLabel('Advantage', 15.5, 0.4, 0, { size: 22, color: '#a78bfa', scale: 0.5 });
+  addLabel('Verifiable Reward', 14, -1.3, 0, { size: 22, color: '#34d399', scale: 0.5 });
+  addLabel('1/0', 14.6, 0, 0.55, { size: 24, color: '#4ade80', bold: true, scale: 0.4 });
+
+  var tks = ['John', 'and', 'Merry', 'went'];
+  var tc = ['#4ade80', '#fde68a', '#4ade80', '#fde68a'];
+  for (var i = 0; i < 4; i++) {
+    addLabel(tks[i], -1.5, i, 0, { size: 24, color: tc[i], bold: true, scale: 0.45 });
+    addLabel(tks[i], 7.5, i, 0, { size: 24, color: tc[i], bold: true, scale: 0.45 });
+  }
+
+  /* ===== Click: Select Feature ===== */
+  var ray = new THREE.Raycaster();
+  var mp = new THREE.Vector2();
+  var sel = null;
+  var selSprite = textSprite('\u2713 selected', { size: 22, color: '#818cf8', bold: true, scale: 0.4 });
+  selSprite.visible = false;
+  scene.add(selSprite);
+
+  el.addEventListener('click', function(ev) {
+    var r = el.getBoundingClientRect();
+    mp.x = ((ev.clientX - r.left) / r.width) * 2 - 1;
+    mp.y = -((ev.clientY - r.top) / r.height) * 2 + 1;
+    ray.setFromCamera(mp, camera);
+    var h = ray.intersectObjects(fMeshes);
+    if (h.length) {
+      var grp = h[0].object.parent;
+      if (sel === grp) {
+        grp.userData.targetY = grp.userData.baseY;
+        sel = null;
+        selSprite.visible = false;
+      } else {
+        if (sel) sel.userData.targetY = sel.userData.baseY;
+        sel = grp;
+        grp.userData.targetY = grp.userData.baseY + 0.35;
+        selSprite.visible = true;
+      }
+    }
+  });
+
+  el.addEventListener('mousemove', function(ev) {
+    var r = el.getBoundingClientRect();
+    mp.x = ((ev.clientX - r.left) / r.width) * 2 - 1;
+    mp.y = -((ev.clientY - r.top) / r.height) * 2 + 1;
+    ray.setFromCamera(mp, camera);
+    renderer.domElement.style.cursor = ray.intersectObjects(fMeshes).length ? 'pointer' : '';
+  });
+
+  /* ===== Render Loop ===== */
+  var on = true;
+  var clock = new THREE.Clock();
+
+  function loop() {
+    requestAnimationFrame(loop);
+    if (!on) return;
+    var t = clock.getElapsedTime();
+    ctrl.update();
+
+    /* --- Green separator pulse --- */
+    for (var si = 0; si < greenSeps.length; si++) {
+      var sep = greenSeps[si];
+      var pulse = 0.4 + 0.4 * Math.sin(t * 2.5 + si * 0.8);
+      sep.material.emissiveIntensity = pulse;
+    }
+
+    /* --- Feature cube gentle float --- */
+    for (var i = 0; i < fGroups.length; i++) {
+      var g = fGroups[i];
+      var floatOffset = Math.sin(t * 1.2 + i * 1.1) * 0.06;
+      var targetWithFloat = g.userData.targetY + floatOffset;
+      var dy = targetWithFloat - g.position.y;
+      if (Math.abs(dy) > 0.001) g.position.y += dy * 0.12;
+    }
+
+    /* --- Critic cubes gentle bob --- */
+    for (var ci = 0; ci < criticCubes.length; ci++) {
+      var cc = criticCubes[ci];
+      cc.mesh.position.y = cc.baseY + Math.sin(t * 1.5 + ci * 2.0) * 0.04;
+    }
+
+    /* --- Particle flow --- */
+    for (var pi = 0; pi < particles.length; pi++) {
+      var p = particles[pi];
+      p.t += p.speed;
+      if (p.t > 1) p.t -= 1;
+      // Smooth ease in-out
+      var ease = p.t < 0.5 ? 2 * p.t * p.t : 1 - Math.pow(-2 * p.t + 2, 2) / 2;
+      p.mesh.position.lerpVectors(p.start, p.end, ease);
+      // Slight arc upward
+      p.mesh.position.y += Math.sin(p.t * Math.PI) * 0.4;
+      // Fade at endpoints
+      var fade = Math.sin(p.t * Math.PI);
+      p.mat.opacity = 0.3 + 0.7 * fade;
+      // Scale pulse
+      var sc = 0.8 + 0.4 * fade;
+      p.mesh.scale.set(sc, sc, sc);
+    }
+
+    if (sel && selSprite.visible) {
+      selSprite.position.set(sel.position.x, sel.position.y + 0.85, sel.position.z);
+    }
+
+    renderer.render(scene, camera);
+  }
+  loop();
+
+  /* ===== Resize ===== */
+  if ('ResizeObserver' in window) {
+    new ResizeObserver(function() {
+      W = el.clientWidth; H = el.clientHeight;
+      camera.aspect = W / H;
+      camera.updateProjectionMatrix();
+      renderer.setSize(W, H);
+    }).observe(el);
+  }
+
+  /* ===== Visibility ===== */
+  if ('IntersectionObserver' in window) {
+    new IntersectionObserver(function(entries) {
+      on = entries[0].isIntersecting;
+    }, { threshold: 0.05 }).observe(el);
+  }
+})();
+</script>

app/src/content/embeds/baseline-comparison.html

@@ -0,0 +1,201 @@
+<div class="baseline-comparison"></div>
+<style>
+    .baseline-comparison {
+        font-family: system-ui, -apple-system, sans-serif;
+        padding: 0;
+    }
+
+    .baseline-comparison__wrapper {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 20px;
+    }
+
+    @media (max-width: 640px) {
+        .baseline-comparison__wrapper {
+            grid-template-columns: 1fr;
+        }
+    }
+
+    .baseline-comparison__chart-card {
+        border: 1px solid var(--border-color);
+        border-radius: 16px;
+        padding: 24px;
+        background: var(--page-bg);
+    }
+
+    .baseline-comparison__chart-title {
+        font-size: 15px;
+        font-weight: 700;
+        color: var(--text-color);
+        margin-bottom: 16px;
+        text-align: center;
+    }
+
+    .baseline-comparison svg {
+        width: 100%;
+        height: auto;
+        display: block;
+        overflow: visible;
+    }
+
+    .baseline-comparison .axis path { display: none; }
+    .baseline-comparison .axis line { stroke: var(--grid-color); }
+    .baseline-comparison .axis text { fill: var(--tick-color); font-size: 12px; }
+    .baseline-comparison .grid line { stroke: var(--grid-color); stroke-width: 1; }
+
+    .baseline-comparison__bar {
+        transition: opacity 0.2s ease;
+        rx: 4;
+        ry: 4;
+    }
+
+    .baseline-comparison__bar--ours {
+        filter: drop-shadow(0 2px 4px rgba(79, 70, 229, 0.3));
+    }
+
+    .baseline-comparison__tooltip {
+        position: absolute;
+        padding: 8px 14px;
+        background: var(--text-color);
+        color: var(--page-bg);
+        border-radius: 8px;
+        font-size: 13px;
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity 0.15s ease;
+        white-space: nowrap;
+        z-index: 100;
+    }
+
+    .baseline-comparison__legend {
+        display: flex;
+        justify-content: center;
+        gap: 24px;
+        margin-bottom: 16px;
+        flex-wrap: wrap;
+    }
+
+    .baseline-comparison__legend-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 12px;
+        color: var(--text-color);
+    }
+
+    .baseline-comparison__legend-swatch {
+        width: 14px;
+        height: 14px;
+        border-radius: 4px;
+    }
+</style>
+<script>
+(function() {
+    function ensureD3(cb) {
+        if (window.d3 && typeof window.d3.select === 'function') return cb();
+        var s = document.getElementById('d3-cdn-script');
+        if (!s) {
+            s = document.createElement('script');
+            s.id = 'd3-cdn-script';
+            s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js';
+            document.head.appendChild(s);
+        }
+        s.addEventListener('load', function() { if (window.d3) cb(); }, { once: true });
+    }
+
+    function bootstrap() {
+    var containers = document.querySelectorAll('.baseline-comparison');
+    var root = containers[containers.length - 1];
+    if (!root || root.dataset.mounted) return;
+    root.dataset.mounted = '1';
+
+    const data = [
+        {method: "No Steering", bbq: 60.17, harm: 41.46, ours: false},
+        {method: "Random Feature", bbq: 58.36, harm: 45.35, ours: false},
+        {method: "Random + AFM", bbq: 60.16, harm: 46.96, ours: false},
+        {method: "Most-Active", bbq: 59.94, harm: 48.03, ours: false},
+        {method: "CRL (Ours)", bbq: 65.86, harm: 49.12, ours: true}
+    ];
+
+    const colors = {
+        base: '#a3a3a3',
+        ours: '#4F46E5'
+    };
+
+    function buildChart(container, title, key, domain) {
+        const card = document.createElement('div');
+        card.className = 'baseline-comparison__chart-card';
+        card.innerHTML = `<div class="baseline-comparison__chart-title">${title}</div>`;
+
+        const margin = {top: 8, right: 50, bottom: 30, left: 100};
+        const width = 340;
+        const height = data.length * 40 + margin.top + margin.bottom;
+
+        const svg = d3.select(card).append('svg')
+            .attr('viewBox', `0 0 ${width + margin.left + margin.right} ${height}`)
+            .attr('preserveAspectRatio', 'xMidYMid meet');
+
+        const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`);
+
+        const x = d3.scaleLinear().domain(domain).range([0, width]);
+        const y = d3.scaleBand().domain(data.map(d => d.method)).range([0, height - margin.top - margin.bottom]).padding(0.35);
+
+        g.append('g').attr('class', 'grid')
+            .call(d3.axisBottom(x).ticks(5).tickSize(height - margin.top - margin.bottom).tickFormat(''))
+            .attr('stroke-opacity', 0.5)
+            .select('.domain').remove();
+
+        g.append('g').attr('class', 'axis')
+            .attr('transform', `translate(0,${height - margin.top - margin.bottom})`)
+            .call(d3.axisBottom(x).ticks(5).tickFormat(d => d + '%'));
+
+        g.append('g').attr('class', 'axis')
+            .call(d3.axisLeft(y).tickSize(0).tickPadding(10));
+
+        const bars = g.selectAll('.baseline-comparison__bar')
+            .data(data).enter().append('rect')
+            .attr('class', d => 'baseline-comparison__bar' + (d.ours ? ' baseline-comparison__bar--ours' : ''))
+            .attr('x', 0)
+            .attr('y', d => y(d.method))
+            .attr('height', y.bandwidth())
+            .attr('fill', d => d.ours ? colors.ours : colors.base)
+            .attr('rx', 4).attr('ry', 4)
+            .attr('width', 0);
+
+        const labels = g.selectAll('.bar-label')
+            .data(data).enter().append('text')
+            .attr('x', d => x(d[key]) + 6)
+            .attr('y', d => y(d.method) + y.bandwidth() / 2)
+            .attr('dy', '0.35em')
+            .attr('fill', 'var(--text-color)')
+            .attr('font-size', '12px')
+            .attr('font-weight', d => d.ours ? '700' : '400')
+            .attr('opacity', 0)
+            .text(d => d[key].toFixed(2) + '%');
+
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    bars.transition().duration(800).delay((d, i) => i * 100)
+                        .attr('width', d => x(d[key]));
+                    labels.transition().duration(400).delay((d, i) => i * 100 + 600)
+                        .attr('opacity', 1);
+                    observer.disconnect();
+                }
+            });
+        }, {threshold: 0.3});
+        observer.observe(card);
+
+        container.appendChild(card);
+    }
+
+    root.innerHTML = '<div class="baseline-comparison__wrapper"></div>';
+    const wrapper = root.querySelector('.baseline-comparison__wrapper');
+    buildChart(wrapper, 'BBQ Ambiguous (%)', 'bbq', [0, 72]);
+    buildChart(wrapper, 'HarmBench (%)', 'harm', [0, 55]);
+    }
+
+    ensureD3(bootstrap);
+})();
+</script>

app/src/content/embeds/branch-explorer.html

@@ -0,0 +1,805 @@
+<div class="branch-explorer"></div>
+
+<style>
+  .branch-explorer {
+    font-family: var(--default-font-family, system-ui, -apple-system, sans-serif);
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    padding: 0;
+    width: 100%;
+    margin: 0 auto;
+    --green: #10B981;
+    --red: #EF4444;
+    --blue: #3B82F6;
+    --purple: #8B5CF6;
+    --indigo: #4F46E5;
+    --green-bg: oklch(from #10B981 l c h / 0.08);
+    --red-bg: oklch(from #EF4444 l c h / 0.08);
+    --green-border: oklch(from #10B981 l c h / 0.25);
+    --red-border: oklch(from #EF4444 l c h / 0.25);
+    --mono: 'SF Mono', 'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace;
+  }
+
+  /* --- Navigation --- */
+  .branch-explorer .be-nav {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    margin-bottom: 20px;
+  }
+
+  .branch-explorer .be-nav-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border-radius: 999px;
+    border: 1px solid var(--border-color, #e5e7eb);
+    background: var(--surface-bg, #fff);
+    color: var(--text-color, #1f2937);
+    cursor: pointer;
+    font-size: 16px;
+    transition: all 0.2s;
+    padding: 0;
+    line-height: 1;
+  }
+
+  .branch-explorer .be-nav-btn:hover:not(:disabled) {
+    background: var(--border-color, #e5e7eb);
+  }
+
+  .branch-explorer .be-nav-btn:disabled {
+    opacity: 0.35;
+    cursor: not-allowed;
+  }
+
+  .branch-explorer .be-play-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+    height: 36px;
+    padding: 0 16px;
+    border-radius: 999px;
+    border: 1px solid var(--indigo, #4F46E5);
+    background: var(--indigo, #4F46E5);
+    color: #fff;
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 600;
+    font-family: inherit;
+    transition: all 0.2s;
+    line-height: 1;
+  }
+
+  .branch-explorer .be-play-btn:hover {
+    background: oklch(from #4F46E5 calc(l - 0.05) c h);
+  }
+
+  .branch-explorer .be-nav-label {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--muted-color, #6b7280);
+    min-width: 120px;
+    text-align: center;
+    user-select: none;
+  }
+
+  /* --- Question card --- */
+  .branch-explorer .be-question-card {
+    background: oklch(from #3B82F6 l c h / 0.06);
+    border: 1px solid oklch(from #3B82F6 l c h / 0.2);
+    border-radius: 16px;
+    padding: 14px 20px;
+    margin-bottom: 12px;
+    text-align: left;
+  }
+
+  .branch-explorer .be-question-label {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--blue, #3B82F6);
+    margin-bottom: 6px;
+  }
+
+  .branch-explorer .be-question-text {
+    font-size: 14px;
+    color: var(--text-color, #1f2937);
+    line-height: 1.55;
+  }
+
+  /* --- Context card --- */
+  .branch-explorer .be-context-card {
+    background: var(--surface-bg, #f9fafb);
+    border: 1px solid var(--border-color, #e5e7eb);
+    border-radius: 16px;
+    padding: 16px 20px;
+    margin-bottom: 20px;
+    text-align: center;
+  }
+
+  .branch-explorer .be-context-label {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--muted-color, #6b7280);
+    margin-bottom: 6px;
+  }
+
+  .branch-explorer .be-context-text {
+    font-size: 14px;
+    font-family: var(--mono);
+    color: var(--text-color, #1f2937);
+    line-height: 1.5;
+    word-break: break-word;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 3px;
+    justify-content: center;
+    min-height: 22px;
+  }
+
+  /* --- SVG tree --- */
+  .branch-explorer .be-tree-wrap {
+    width: 100%;
+    margin-bottom: 20px;
+    display: flex;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.4s ease;
+  }
+
+  .branch-explorer .be-tree-wrap.visible {
+    opacity: 1;
+  }
+
+  .branch-explorer .be-tree-wrap svg {
+    display: block;
+    overflow: visible;
+  }
+
+  .branch-explorer .be-tree-wrap .branch-path {
+    fill: none;
+    stroke-width: 2.5;
+    stroke-linecap: round;
+  }
+
+  .branch-explorer .be-tree-wrap .node-label {
+    font-size: 11px;
+    font-weight: 500;
+    font-family: var(--default-font-family, system-ui, sans-serif);
+  }
+
+  /* --- Outputs grid --- */
+  .branch-explorer .be-outputs {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+    opacity: 0;
+    transform: translateY(8px);
+    transition: opacity 0.4s ease, transform 0.4s ease;
+  }
+
+  .branch-explorer .be-outputs.visible {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  @media (max-width: 640px) {
+    .branch-explorer .be-outputs {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .branch-explorer .be-output-card {
+    border-radius: 16px;
+    padding: 16px;
+    border: 1.5px solid;
+  }
+
+  .branch-explorer .be-output-card.correct {
+    border-color: var(--green-border);
+    background: var(--green-bg);
+  }
+
+  .branch-explorer .be-output-card.incorrect {
+    border-color: var(--red-border);
+    background: var(--red-bg);
+  }
+
+  .branch-explorer .be-output-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 10px;
+    flex-wrap: wrap;
+  }
+
+  .branch-explorer .be-output-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0;
+    font-size: 12px;
+    font-weight: 600;
+    padding: 0;
+    border-radius: 999px;
+    overflow: hidden;
+    line-height: 1;
+    flex-shrink: 0;
+  }
+
+  .branch-explorer .be-output-badge .badge-icon {
+    padding: 4px 7px;
+    color: #fff;
+    font-size: 13px;
+  }
+
+  .branch-explorer .be-output-badge.correct .badge-icon { background: var(--green); }
+  .branch-explorer .be-output-badge.incorrect .badge-icon { background: var(--red); }
+
+  .branch-explorer .be-output-badge .badge-label {
+    padding: 4px 10px 4px 8px;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  .branch-explorer .be-output-badge.correct .badge-label {
+    background: oklch(from #10B981 l c h / 0.15);
+    color: var(--green);
+  }
+
+  .branch-explorer .be-output-badge.incorrect .badge-label {
+    background: oklch(from #EF4444 l c h / 0.15);
+    color: var(--red);
+  }
+
+  .branch-explorer .be-feature-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 0;
+    font-size: 12px;
+    font-weight: 600;
+    border-radius: 999px;
+    overflow: hidden;
+    line-height: 1;
+    cursor: default;
+    position: relative;
+    flex-shrink: 0;
+  }
+
+  .branch-explorer .be-feature-pill .fp-layer {
+    padding: 4px 7px;
+    color: #fff;
+    font-size: 11px;
+    font-weight: 700;
+    font-family: var(--mono);
+  }
+
+  .branch-explorer .be-feature-pill .fp-layer.layer-blue { background: var(--blue); }
+  .branch-explorer .be-feature-pill .fp-layer.layer-purple { background: var(--purple); }
+
+  .branch-explorer .be-feature-pill .fp-id {
+    padding: 4px 8px 4px 6px;
+    font-size: 11px;
+    font-weight: 600;
+    font-family: var(--mono);
+    background: var(--surface-bg, #f3f4f6);
+    color: var(--text-color, #374151);
+    border: 1px solid var(--border-color, #e5e7eb);
+    border-left: none;
+    border-radius: 0 999px 999px 0;
+  }
+
+  .branch-explorer .be-feature-pill .fp-tooltip {
+    display: none;
+    position: absolute;
+    top: calc(100% + 6px);
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--text-color, #1f2937);
+    color: var(--page-bg, #fff);
+    font-size: 11px;
+    font-weight: 400;
+    font-family: var(--default-font-family, system-ui, sans-serif);
+    padding: 6px 10px;
+    border-radius: 8px;
+    white-space: normal;
+    max-width: 260px;
+    z-index: 10;
+    pointer-events: none;
+    line-height: 1.4;
+  }
+
+  .branch-explorer .be-feature-pill:hover .fp-tooltip { display: block; }
+
+  /* --- Token pills --- */
+  .branch-explorer .be-token {
+    display: inline-block;
+    font-family: var(--mono);
+    font-size: 12px;
+    line-height: 1.3;
+    padding: 3px 6px;
+    border-radius: 5px;
+    white-space: pre;
+    opacity: 0;
+    transform: scale(0.7);
+    transition: opacity 0.1s ease, transform 0.1s ease;
+  }
+
+  .branch-explorer .be-token.visible {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  .branch-explorer .be-token.neutral {
+    background: oklch(from #6b7280 l c h / 0.08);
+    color: var(--text-color, #374151);
+  }
+
+  .branch-explorer .be-token.tok-green {
+    background: oklch(from #10B981 l c h / 0.13);
+    color: var(--text-color, #374151);
+  }
+
+  .branch-explorer .be-token.tok-red {
+    background: oklch(from #EF4444 l c h / 0.13);
+    color: var(--text-color, #374151);
+  }
+
+
+  /* --- Output token rows --- */
+  .branch-explorer .be-output-tokens {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 3px;
+    align-items: flex-start;
+    min-height: 24px;
+  }
+
+  /* --- Progress bar --- */
+  .branch-explorer .be-progress {
+    width: 100%;
+    height: 3px;
+    background: oklch(from #6b7280 l c h / 0.08);
+    border-radius: 2px;
+    margin-bottom: 16px;
+    overflow: hidden;
+  }
+
+  .branch-explorer .be-progress-fill {
+    height: 100%;
+    background: var(--indigo, #4F46E5);
+    border-radius: 2px;
+    width: 0%;
+    transition: width 0.15s linear;
+  }
+</style>
+
+<script>
+(function() {
+  if (!window.d3) {
+    var s = document.createElement('script');
+    s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js';
+    s.onload = init;
+    document.head.appendChild(s);
+  } else { setTimeout(init, 0); }
+
+  function init() {
+  var BRANCHES = [{"context": "Here ' s how we can solve it :  1 . ** Calculate daily rice consumption :** ", "correct": {"feature": "L20/11163", "description": "phrases and terms related to assessments, evaluations, or strategic plans", "output": "  - Each person consumes  0 . 2 kg per meal *  2 meals =  0 . 4 kg per day .   - Total consumption per day : "}, "incorrect": {"feature": "L10/8428", "description": " phrases related to clinical examinations and diagnostic procedures in healthcare", "output": "5 members *  0 . 2 kg / member =  1 kg of rice per day .  2 . ** Calculate weekly rice consumption :**  1 kg / day * "}, "question": "5 family members each eat 0.2 kg of rice per meal, with 2 meals per day. How long will a 42 kg bag of rice last?"}, {"context": "Here ' s how we can break down the problem :  1 . ** Betty ' s points :**", "correct": {"feature": "L10/11074", "description": "references to significant individuals and their relationships", "output": "  - Betty collected  3 0 % more than Adam , who has  5 0 points .   -  3 0 % of  5 0 points = ( 3"}, "incorrect": {"feature": "L20/8693", "description": "expressions of pride and accomplishment", "output": "Betty collected  3 0 % more than Adam , so she collected  1 . 3 0 *  5 0 =  6 5 points more than Adam .   * Betty"}, "question": "Adam has 50 points. Betty collected 30% more than Adam. Marta collected 3 times Tom's points. Tom has 30 fewer than Betty. How many points to reach the 400-point trip threshold?"}, {"context": "Here ' s how we can solve it :   ", "correct": {"feature": "L10/16145", "description": " mathematical symbols and notation", "output": "1 . ** Morning :**  5 0 people entered the restaurant .  2 . ** 1 0 : 0 0 :**  4 0 more people entered , bringing the total to "}, "incorrect": {"feature": "L20/11861", "description": "phrases related to food and dining experiences", "output": "* ** Step  1 : People at  1 0 : 0 0 **   -  5 0 people entered in the morning .    * ** Step  2"}, "question": "50 people enter a restaurant in the morning. 40 more come at 10:00. Some leave by lunch, and more arrive in the afternoon. How many at closing?"}];
+
+  var containers = document.querySelectorAll('.branch-explorer');
+  for (var ci = 0; ci < containers.length; ci++) { mountBranchExplorer(containers[ci]); }
+  function mountBranchExplorer(container) {
+  if (!container || container.dataset.mounted) return;
+  container.dataset.mounted = 'true';
+
+  /* ---------- STATE ---------- */
+  var currentIndex = 0;
+  var playing = false;
+  var phase = 'idle'; // idle, context, branch-pause, branching, done
+  var ctxTokens = [];
+  var correctTokens = [];
+  var incorrectTokens = [];
+  var ctxIdx = 0;
+  var branchIdx = 0;
+  var timer = null;
+  var loopTimer = null;
+  var TOKEN_DELAY = 120; // ms per token
+
+  /* ---------- TOKENIZE ---------- */
+  function tokenize(text) {
+    var raw = text.split(/(\s+)/);
+    var tokens = [];
+    for (var i = 0; i < raw.length; i++) {
+      if (raw[i] !== '' && !/^\s+$/.test(raw[i])) tokens.push(raw[i]);
+    }
+    return tokens;
+  }
+
+  /* ---------- HELPERS ---------- */
+  function el(tag, cls) {
+    var e = document.createElement(tag);
+    if (cls) e.className = cls;
+    return e;
+  }
+
+  function parseFeature(f) {
+    var m = f.match(/^(L\d+)\/(\d+)$/);
+    if (!m) return { layer: f, id: '' };
+    return { layer: m[1], id: m[2] };
+  }
+
+  function escapeHtml(s) {
+    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  }
+
+  function makeFeaturePill(feature, description) {
+    var parsed = parseFeature(feature);
+    var n = parseInt(parsed.layer.replace('L', ''), 10);
+    var colorClass = n <= 15 ? 'layer-blue' : 'layer-purple';
+    var url = 'https://neuronpedia.org/gemma-2-2b/' + n + '-gemmascope-res-16k/' + parsed.id;
+    return '<a class="be-feature-pill" href="' + url + '" target="_blank" rel="noopener" style="text-decoration:none;color:inherit;cursor:pointer">' +
+      '<span class="fp-layer ' + colorClass + '">' + parsed.layer + '</span>' +
+      '<span class="fp-id">' + parsed.id + '</span>' +
+      '<span class="fp-tooltip">' + escapeHtml(description.trim()) + '</span>' +
+      '</a>';
+  }
+
+  function addToken(container, text, colorClass) {
+    var tok = el('span', 'be-token ' + colorClass);
+    tok.textContent = text;
+    container.appendChild(tok);
+    requestAnimationFrame(function() {
+      requestAnimationFrame(function() { tok.classList.add('visible'); });
+    });
+  }
+
+  /* ---------- BUILD DOM ---------- */
+  container.innerHTML = '';
+
+  // Nav
+  var nav = el('div', 'be-nav');
+  var prevBtn = el('button', 'be-nav-btn'); prevBtn.textContent = '\u2190'; prevBtn.setAttribute('aria-label', 'Previous');
+  var playBtn = el('button', 'be-play-btn'); playBtn.innerHTML = '\u25B6 Play';
+  var navLabel = el('span', 'be-nav-label');
+  var nextBtn = el('button', 'be-nav-btn'); nextBtn.textContent = '\u2192'; nextBtn.setAttribute('aria-label', 'Next');
+  nav.appendChild(prevBtn);
+  nav.appendChild(playBtn);
+  nav.appendChild(navLabel);
+  nav.appendChild(nextBtn);
+  container.appendChild(nav);
+
+  // Question card
+  var questionCard = el('div', 'be-question-card');
+  var qLabel = el('div', 'be-question-label'); qLabel.textContent = 'GSM8K Question';
+  var qText = el('div', 'be-question-text');
+  questionCard.appendChild(qLabel);
+  questionCard.appendChild(qText);
+  container.appendChild(questionCard);
+
+  // Context card
+  var contextCard = el('div', 'be-context-card');
+  var cLabel = el('div', 'be-context-label'); cLabel.textContent = 'Shared Answer Prefix';
+  var cText = el('div', 'be-context-text');
+  contextCard.appendChild(cLabel);
+  contextCard.appendChild(cText);
+  container.appendChild(contextCard);
+
+  // Progress bar
+  var progressBar = el('div', 'be-progress');
+  var progressFill = el('div', 'be-progress-fill');
+  progressBar.appendChild(progressFill);
+  container.appendChild(progressBar);
+
+  // SVG tree
+  var treeWrap = el('div', 'be-tree-wrap');
+  container.appendChild(treeWrap);
+
+  // Outputs grid
+  var outputsGrid = el('div', 'be-outputs');
+
+  var correctCard = el('div', 'be-output-card correct');
+  var correctHeader = el('div', 'be-output-header');
+  var correctRow = el('div', 'be-output-tokens');
+  correctCard.appendChild(correctHeader);
+  correctCard.appendChild(correctRow);
+
+  var incorrectCard = el('div', 'be-output-card incorrect');
+  var incorrectHeader = el('div', 'be-output-header');
+  var incorrectRow = el('div', 'be-output-tokens');
+  incorrectCard.appendChild(incorrectHeader);
+  incorrectCard.appendChild(incorrectRow);
+
+  outputsGrid.appendChild(correctCard);
+  outputsGrid.appendChild(incorrectCard);
+  container.appendChild(outputsGrid);
+
+  /* ---------- D3 TREE ---------- */
+  var svgWidth = 520, svgHeight = 140;
+  var svg = d3.select(treeWrap)
+    .append('svg')
+    .attr('viewBox', '0 0 ' + svgWidth + ' ' + svgHeight)
+    .attr('width', '100%')
+    .attr('preserveAspectRatio', 'xMidYMid meet')
+    .style('max-width', svgWidth + 'px');
+
+  var defs = svg.append('defs');
+  var glowFilter = defs.append('filter').attr('id', 'be-glow');
+  glowFilter.append('feGaussianBlur').attr('stdDeviation', '3').attr('result', 'coloredBlur');
+  var feMerge = glowFilter.append('feMerge');
+  feMerge.append('feMergeNode').attr('in', 'coloredBlur');
+  feMerge.append('feMergeNode').attr('in', 'SourceGraphic');
+
+  var nodes = {
+    context: { x: 60, y: 70 },
+    branch: { x: 220, y: 70 },
+    correct: { x: 440, y: 30 },
+    incorrect: { x: 440, y: 110 }
+  };
+
+  function bezier(from, to) {
+    var mx = (from.x + to.x) / 2;
+    return 'M' + from.x + ',' + from.y + ' C' + mx + ',' + from.y + ' ' + mx + ',' + to.y + ' ' + to.x + ',' + to.y;
+  }
+
+  // Trunk (dashed)
+  svg.append('path').attr('class', 'branch-path')
+    .attr('d', 'M' + nodes.context.x + ',' + nodes.context.y + ' L' + nodes.branch.x + ',' + nodes.branch.y)
+    .attr('stroke', 'var(--muted-color, #9ca3af)').attr('stroke-dasharray', '4,3');
+
+  var correctPath = svg.append('path').attr('class', 'branch-path')
+    .attr('d', bezier(nodes.branch, nodes.correct)).attr('stroke', '#10B981');
+  var incorrectPath = svg.append('path').attr('class', 'branch-path')
+    .attr('d', bezier(nodes.branch, nodes.incorrect)).attr('stroke', '#EF4444');
+
+  function animatePath(p) {
+    var len = p.node().getTotalLength();
+    p.attr('stroke-dasharray', len).attr('stroke-dashoffset', len)
+     .transition().duration(600).ease(d3.easeCubicOut).attr('stroke-dashoffset', 0);
+  }
+
+  // Context node
+  svg.append('circle').attr('cx', nodes.context.x).attr('cy', nodes.context.y).attr('r', 10)
+    .attr('fill', 'var(--surface-bg, #f3f4f6)').attr('stroke', 'var(--border-color, #d1d5db)').attr('stroke-width', 2);
+  svg.append('text').attr('class', 'node-label').attr('x', nodes.context.x).attr('y', nodes.context.y + 28)
+    .attr('text-anchor', 'middle').attr('fill', 'var(--muted-color, #6b7280)').text('Context');
+
+  // Branch node (glow)
+  svg.append('circle').attr('cx', nodes.branch.x).attr('cy', nodes.branch.y).attr('r', 12)
+    .attr('fill', '#fbbf24').attr('opacity', 0.3).attr('filter', 'url(#be-glow)');
+  svg.append('circle').attr('cx', nodes.branch.x).attr('cy', nodes.branch.y).attr('r', 8)
+    .attr('fill', '#fbbf24').attr('stroke', '#f59e0b').attr('stroke-width', 2);
+  svg.append('text').attr('class', 'node-label').attr('x', nodes.branch.x).attr('y', nodes.branch.y + 26)
+    .attr('text-anchor', 'middle').attr('fill', 'var(--muted-color, #6b7280)').text('SAE Feature');
+
+  // Correct endpoint
+  svg.append('circle').attr('cx', nodes.correct.x).attr('cy', nodes.correct.y).attr('r', 10)
+    .attr('fill', '#10B981').attr('opacity', 0.9);
+  var correctLabel = svg.append('text').attr('class', 'node-label')
+    .attr('x', nodes.correct.x + 16).attr('y', nodes.correct.y + 4)
+    .attr('fill', '#10B981').attr('font-weight', 600).attr('font-size', '11px');
+
+  // Incorrect endpoint
+  svg.append('circle').attr('cx', nodes.incorrect.x).attr('cy', nodes.incorrect.y).attr('r', 10)
+    .attr('fill', '#EF4444').attr('opacity', 0.9);
+  var incorrectLabel = svg.append('text').attr('class', 'node-label')
+    .attr('x', nodes.incorrect.x + 16).attr('y', nodes.incorrect.y + 4)
+    .attr('fill', '#EF4444').attr('font-weight', 600).attr('font-size', '11px');
+
+  /* ---------- LOAD EXAMPLE ---------- */
+  function loadExample(idx) {
+    var d = BRANCHES[idx];
+
+    // Nav
+    navLabel.textContent = 'Example ' + (idx + 1) + ' of ' + BRANCHES.length;
+    prevBtn.disabled = idx === 0;
+    nextBtn.disabled = idx === BRANCHES.length - 1;
+
+    // Question
+    if (d.question) {
+      qText.textContent = d.question;
+      questionCard.style.display = '';
+    } else {
+      questionCard.style.display = 'none';
+    }
+
+    // Tokenize
+    ctxTokens = tokenize(d.context);
+    correctTokens = tokenize(d.correct.output);
+    incorrectTokens = tokenize(d.incorrect.output);
+
+    // Tree labels
+    correctLabel.text(d.correct.feature);
+    incorrectLabel.text(d.incorrect.feature);
+
+    // Headers
+    correctHeader.innerHTML = '<span class="be-output-badge correct">' +
+      '<span class="badge-icon">\u2713</span><span class="badge-label">Correct</span></span> ' +
+      makeFeaturePill(d.correct.feature, d.correct.description);
+    incorrectHeader.innerHTML = '<span class="be-output-badge incorrect">' +
+      '<span class="badge-icon">\u2717</span><span class="badge-label">Incorrect</span></span> ' +
+      makeFeaturePill(d.incorrect.feature, d.incorrect.description);
+
+    resetVisuals();
+
+    // Update hero feature badges
+    var heroFeats = document.getElementById('hero-features');
+    if (heroFeats) {
+      function heroBadge(feat, desc) {
+        var parts = feat.split('/');
+        var n = parseInt(parts[0].replace('L',''), 10);
+        var url = 'https://neuronpedia.org/gemma-2-2b/' + n + '-gemmascope-res-16k/' + parts[1];
+        return '<a class="hero-feat-badge" href="' + url + '" target="_blank" rel="noopener">' +
+          '<span class="feat-id">' + feat + '</span>' +
+          '<span class="feat-desc">' + escapeHtml(desc.trim()) + '</span></a>';
+      }
+      heroFeats.innerHTML = heroBadge(d.correct.feature, d.correct.description) +
+        heroBadge(d.incorrect.feature, d.incorrect.description);
+    }
+  }
+
+  function resetVisuals() {
+    cText.innerHTML = '';
+    correctRow.innerHTML = '';
+    incorrectRow.innerHTML = '';
+    ctxIdx = 0;
+    branchIdx = 0;
+    treeWrap.classList.remove('visible');
+    outputsGrid.classList.remove('visible');
+    progressFill.style.width = '0%';
+    phase = 'idle';
+  }
+
+  /* ---------- ANIMATION ---------- */
+  function updateProgress() {
+    var total = ctxTokens.length + Math.max(correctTokens.length, incorrectTokens.length);
+    var current = ctxIdx + branchIdx;
+    progressFill.style.width = Math.min(100, (current / total) * 100) + '%';
+  }
+
+  function tick() {
+    if (!playing) return;
+
+    if (phase === 'context') {
+      if (ctxIdx < ctxTokens.length) {
+        addToken(cText, ctxTokens[ctxIdx], 'neutral');
+        ctxIdx++;
+        updateProgress();
+        timer = setTimeout(tick, TOKEN_DELAY);
+      } else {
+        // Show branch point
+        phase = 'branch-pause';
+        treeWrap.classList.add('visible');
+        animatePath(correctPath);
+        animatePath(incorrectPath);
+        // Pause then start branching
+        timer = setTimeout(function() {
+          if (!playing) return;
+          phase = 'branching';
+          outputsGrid.classList.add('visible');
+          tick();
+        }, 1200);
+      }
+    } else if (phase === 'branching') {
+      if (branchIdx < Math.max(correctTokens.length, incorrectTokens.length)) {
+        if (branchIdx < correctTokens.length) {
+          addToken(correctRow, correctTokens[branchIdx], 'tok-green');
+        }
+        if (branchIdx < incorrectTokens.length) {
+          addToken(incorrectRow, incorrectTokens[branchIdx], 'tok-red');
+        }
+        branchIdx++;
+        updateProgress();
+        timer = setTimeout(tick, TOKEN_DELAY);
+      } else {
+        // Done
+        phase = 'done';
+        progressFill.style.width = '100%';
+        playBtn.innerHTML = '\u25B6 Play';
+
+        // Auto-advance after 3s
+        loopTimer = setTimeout(function() {
+          currentIndex = (currentIndex + 1) % BRANCHES.length;
+          loadExample(currentIndex);
+          startPlay();
+        }, 3000);
+      }
+    }
+  }
+
+  function startPlay() {
+    stopTimers();
+    playing = true;
+    playBtn.innerHTML = 'Pause';
+
+    if (phase === 'done' || phase === 'idle') {
+      resetVisuals();
+      phase = 'context';
+    }
+    tick();
+  }
+
+  function pausePlay() {
+    playing = false;
+    stopTimers();
+    playBtn.innerHTML = '\u25B6 Play';
+  }
+
+  function stopTimers() {
+    clearTimeout(timer);
+    clearTimeout(loopTimer);
+    timer = null;
+    loopTimer = null;
+  }
+
+  /* ---------- INSTANT RENDER (for prev/next) ---------- */
+  function renderInstant() {
+    var d = BRANCHES[currentIndex];
+    resetVisuals();
+
+    // Show all context tokens instantly
+    for (var i = 0; i < ctxTokens.length; i++) {
+      var tok = el('span', 'be-token neutral visible');
+      tok.textContent = ctxTokens[i];
+      cText.appendChild(tok);
+    }
+    ctxIdx = ctxTokens.length;
+
+    // Show tree
+    treeWrap.classList.add('visible');
+
+    // Show all output tokens instantly
+    for (var j = 0; j < correctTokens.length; j++) {
+      var ct = el('span', 'be-token tok-green visible');
+      ct.textContent = correctTokens[j];
+      correctRow.appendChild(ct);
+    }
+    for (var k = 0; k < incorrectTokens.length; k++) {
+      var it = el('span', 'be-token tok-red visible');
+      it.textContent = incorrectTokens[k];
+      incorrectRow.appendChild(it);
+    }
+
+    outputsGrid.classList.add('visible');
+    progressFill.style.width = '100%';
+    phase = 'done';
+  }
+
+  /* ---------- EVENTS ---------- */
+  playBtn.addEventListener('click', function() {
+    if (playing) { pausePlay(); } else { startPlay(); }
+  });
+
+  prevBtn.addEventListener('click', function() {
+    pausePlay();
+    if (currentIndex > 0) {
+      currentIndex--;
+      loadExample(currentIndex);
+      renderInstant();
+    }
+  });
+
+  nextBtn.addEventListener('click', function() {
+    pausePlay();
+    if (currentIndex < BRANCHES.length - 1) {
+      currentIndex++;
+      loadExample(currentIndex);
+      renderInstant();
+    }
+  });
+
+  /* ---------- INIT ---------- */
+  loadExample(0);
+  renderInstant();
+  } // end mountBranchExplorer
+  }
+})();
+</script>

app/src/content/embeds/crl-flowchart-animated.html

@@ -0,0 +1,637 @@
+<div class="crl-flowchart-animated"></div>
+
+<style>
+  .crl-flowchart-animated {
+    font-family: system-ui, -apple-system, sans-serif;
+    border: 1px solid var(--border-color, #e5e5e5);
+    border-radius: 16px;
+    padding: 24px;
+    background: var(--page-bg, #ffffff);
+    overflow: hidden;
+    position: relative;
+  }
+
+  .crl-flowchart-animated svg {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+
+  .crl-flowchart-animated .fc-node {
+    cursor: default;
+    transition: filter 0.2s ease;
+  }
+
+  .crl-flowchart-animated .fc-node:hover {
+    filter: brightness(1.08);
+  }
+
+  .crl-flowchart-animated .fc-node:hover .fc-box {
+    stroke-width: 2.5;
+  }
+
+  .crl-flowchart-animated .fc-label {
+    font-size: 11.5px;
+    font-weight: 600;
+    fill: var(--text-color, #1c1c1c);
+    pointer-events: none;
+    dominant-baseline: central;
+    text-anchor: middle;
+  }
+
+  .crl-flowchart-animated .fc-label.fc-label-light {
+    fill: #fafafa;
+  }
+
+  .crl-flowchart-animated .fc-sublabel {
+    font-size: 9px;
+    font-weight: 400;
+    fill: var(--muted-color, #737373);
+    pointer-events: none;
+    dominant-baseline: central;
+    text-anchor: middle;
+  }
+
+  .crl-flowchart-animated .fc-sublabel.fc-sublabel-light {
+    fill: #d4d4d4;
+  }
+
+  .crl-flowchart-animated .fc-arrow-forward {
+    stroke: var(--muted-color, #a3a3a3);
+    stroke-width: 1.8;
+    fill: none;
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  .crl-flowchart-animated .fc-arrow-feedback {
+    stroke: #6366f1;
+    stroke-width: 1.8;
+    fill: none;
+    stroke-dasharray: 6, 4;
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  .crl-flowchart-animated .fc-arrow-active {
+    visibility: visible;
+    animation: crl-arrow-fadein 0.5s ease both;
+  }
+
+  .crl-flowchart-animated .fc-arrow-feedback-active {
+    visibility: visible;
+    animation: crl-fb-fadein 0.4s ease both, crl-dash-flow 1.2s linear 0.4s infinite;
+  }
+
+  .crl-flowchart-animated .fc-node-hidden {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+
+  @keyframes crl-node-reveal {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  .crl-flowchart-animated .fc-node-visible {
+    animation: crl-node-reveal 0.4s ease both;
+  }
+
+  .crl-flowchart-animated .fc-arrow-highlight {
+    stroke-width: 3;
+    stroke: #6366f1 !important;
+  }
+
+  .crl-flowchart-animated .fc-fo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    font-size: 12px;
+    font-weight: 600;
+    text-align: center;
+    line-height: 1.2;
+  }
+  .crl-flowchart-animated .fc-fo-sub {
+    font-size: 9px;
+    font-weight: 400;
+    align-items: flex-start;
+    padding-top: 2px;
+  }
+  .crl-flowchart-animated .fc-fo .katex { font-size: inherit; }
+
+  .crl-flowchart-animated .fc-tooltip {
+    position: absolute;
+    background: var(--surface-bg, #fafafa);
+    border: 1px solid var(--border-color, #e5e5e5);
+    border-radius: 8px;
+    padding: 8px 12px;
+    font-size: 12px;
+    color: var(--text-color, #2e2e2e);
+    line-height: 1.5;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    z-index: 10;
+    max-width: 240px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+    white-space: normal;
+  }
+
+  .crl-flowchart-animated .fc-tooltip-visible {
+    opacity: 1;
+  }
+
+  .crl-flowchart-animated .fc-afm-box {
+    fill: none;
+    stroke: var(--muted-color, #a3a3a3);
+    stroke-dasharray: 4, 3;
+    stroke-width: 1.2;
+    rx: 6;
+  }
+
+  .crl-flowchart-animated .fc-afm-label {
+    font-size: 8.5px;
+    font-weight: 600;
+    fill: var(--muted-color, #737373);
+    pointer-events: none;
+    text-anchor: middle;
+  }
+
+  .crl-flowchart-animated .fc-section-label {
+    font-size: 9px;
+    font-weight: 700;
+    fill: var(--muted-color, #a3a3a3);
+    text-transform: uppercase;
+    letter-spacing: 1.2px;
+    pointer-events: none;
+  }
+
+  @keyframes crl-arrow-fadein {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes crl-fb-fadein {
+    from { opacity: 0; }
+    to { opacity: 0.85; }
+  }
+
+  @keyframes crl-dash-flow {
+    to { stroke-dashoffset: -20; }
+  }
+</style>
+
+<script>
+  (() => {
+    const bootstrap = () => {
+      const scriptEl = document.currentScript;
+      let container = scriptEl ? scriptEl.previousElementSibling : null;
+      if (!(container && container.classList && container.classList.contains('crl-flowchart-animated'))) {
+        const candidates = Array.from(document.querySelectorAll('.crl-flowchart-animated'))
+          .filter((el) => !(el.dataset && el.dataset.mounted === 'true'));
+        container = candidates[candidates.length - 1] || null;
+      }
+      if (!container) return;
+      if (container.dataset) {
+        if (container.dataset.mounted === 'true') return;
+        container.dataset.mounted = 'true';
+      }
+
+      // --- Layout constants ---
+      const W = 960;
+      const H = 430;
+      const BOX_H = 44;
+      const BOX_RX = 12;
+      const ROW_Y = [68, 202, 340];
+
+      // Column positions (x centers) - evenly distributed with generous gaps
+      const COL = {
+        input: 62,
+        llm1: 215,
+        residual: 385,
+        sae: 545,
+        policy: 710,
+        featsel: 215,
+        steering: 420,
+        llm2: 630,
+        output: 815,
+        reward: 815,
+        critic: 630,
+        ppo: 420,
+      };
+
+      // Box widths
+      const BW = {
+        input: 86,
+        llm1: 148,
+        residual: 138,
+        sae: 118,
+        policy: 108,
+        featsel: 148,
+        steering: 210,
+        llm2: 148,
+        output: 96,
+        reward: 96,
+        critic: 108,
+        ppo: 118,
+      };
+
+      // Node definitions: id, label, sublabel, x, y, w, h, style
+      const nodes = [
+        // Row 1: Forward pass
+        { id: 'input',    label: 'Input',               sub: null,                    x: COL.input,    y: ROW_Y[0], w: BW.input,    style: 'subtle' },
+        { id: 'llm1',     label: 'LLM Layers 1..l\u22121', sub: null,                 x: COL.llm1,     y: ROW_Y[0], w: BW.llm1,     style: 'llm',   math: '\\text{LLM Layers } 1..l{-}1' },
+        { id: 'residual', label: 'Residual Stream',      sub: 'x at layer l',          x: COL.residual, y: ROW_Y[0], w: BW.residual, style: 'subtle', mathSub: '\\mathbf{x}_l' },
+        { id: 'sae',      label: 'SAE Encoder',          sub: 'sparse features',       x: COL.sae,      y: ROW_Y[0], w: BW.sae,      style: 'sae' },
+        { id: 'policy',   label: 'Policy \u03C0\u03B8',  sub: '2-layer MLP',           x: COL.policy,   y: ROW_Y[0], w: BW.policy,   style: 'agent', math: '\\text{Policy } \\pi_\\theta' },
+        // Row 2: Steering
+        { id: 'featsel',  label: 'Feature Selection',    sub: 'TopK(\u03BC, k=1)',     x: COL.featsel,  y: ROW_Y[1], w: BW.featsel,  style: 'agent', mathSub: '\\text{TopK}(\\mu,\\, k{=}1)' },
+        { id: 'steering', label: 'x\u0303 = x + c\u00B7a\u209CW_dec', sub: 'steering vector', x: COL.steering, y: ROW_Y[1], w: BW.steering, style: 'key', math: '\\tilde{\\mathbf{x}} = \\mathbf{x} + c \\cdot \\mathbf{a}_t \\mathbf{W}_{\\text{dec}}' },
+        { id: 'llm2',     label: 'LLM Layers l+1..L',   sub: null,                    x: COL.llm2,     y: ROW_Y[1], w: BW.llm2,     style: 'llm',   math: '\\text{LLM Layers } l{+}1..L' },
+        { id: 'output',   label: 'Output',               sub: 'generated text',        x: COL.output,   y: ROW_Y[1], w: BW.output,   style: 'subtle' },
+        // Row 3: Feedback
+        { id: 'reward',   label: 'Reward',               sub: 'binary signal',         x: COL.reward,   y: ROW_Y[2], w: BW.reward,   style: 'feedback' },
+        { id: 'critic',   label: 'Critic V\u03C6',       sub: 'advantage est.',        x: COL.critic,   y: ROW_Y[2], w: BW.critic,   style: 'agent', math: '\\text{Critic } V_\\varphi' },
+        { id: 'ppo',      label: 'PPO Update',           sub: 'clipped objective',     x: COL.ppo,      y: ROW_Y[2], w: BW.ppo,      style: 'agent' },
+      ];
+
+      // Edges: [sourceId, targetId, type]
+      // type: 'forward' or 'feedback'
+      const edges = [
+        // Row 1
+        ['input', 'llm1', 'forward'],
+        ['llm1', 'residual', 'forward'],
+        ['residual', 'sae', 'forward'],
+        ['sae', 'policy', 'forward'],
+        // Row 1 -> Row 2
+        ['policy', 'featsel', 'forward'],
+        // Row 2
+        ['featsel', 'steering', 'forward'],
+        ['steering', 'llm2', 'forward'],
+        ['llm2', 'output', 'forward'],
+        // Row 2 -> Row 3
+        ['output', 'reward', 'feedback'],
+        // Row 3
+        ['reward', 'critic', 'feedback'],
+        ['critic', 'ppo', 'feedback'],
+        // Row 3 -> Row 1 (loop back)
+        ['ppo', 'policy', 'feedback'],
+      ];
+
+      // Tooltip descriptions
+      const tooltips = {
+        input:    'Text prompt fed to the model',
+        llm1:     'Transformer layers before the intervention point',
+        residual: 'Hidden state x at layer l \u2014 the policy\'s observation',
+        sae:      'Sparse autoencoder decomposes x into interpretable features',
+        policy:   '2-layer MLP selecting which feature to amplify',
+        featsel:  'TopK(\u03BC, k=1) \u2014 single feature chosen per token',
+        steering: 'x\u0303 = x + c\u00B7a\u209CW_dec \u2014 modified activation',
+        llm2:     'Remaining transformer layers process the steered activation',
+        output:   'Generated text (temperature=0 for determinism)',
+        reward:   'Binary signal: correct (1) or incorrect (0)',
+        critic:   'Value function estimating expected reward',
+        ppo:      'Policy gradient with clipped surrogate objective',
+      };
+
+      // Style configs
+      const styles = {
+        llm:      { fill: '#1c1c1c', stroke: '#2e2e2e', textClass: 'fc-label fc-label-light', subClass: 'fc-sublabel fc-sublabel-light' },
+        sae:      { fill: 'rgba(124,58,237,0.13)', stroke: '#7c3aed', textClass: 'fc-label', subClass: 'fc-sublabel' },
+        agent:    { fill: 'rgba(79,70,229,0.12)', stroke: '#4f46e5', textClass: 'fc-label', subClass: 'fc-sublabel' },
+        key:      { fill: 'rgba(79,70,229,0.08)', stroke: '#4f46e5', textClass: 'fc-label', subClass: 'fc-sublabel', strokeW: 2.5 },
+        subtle:   { fill: 'var(--surface-bg, #f5f5f5)', stroke: 'var(--border-color, #d4d4d4)', textClass: 'fc-label', subClass: 'fc-sublabel' },
+        feedback: { fill: 'rgba(239,68,68,0.10)', stroke: '#ef4444', textClass: 'fc-label', subClass: 'fc-sublabel' },
+      };
+
+      // --- Build node lookup ---
+      const nodeMap = {};
+      nodes.forEach(n => { nodeMap[n.id] = n; });
+
+      // --- Helpers ---
+      const getPort = (node, side) => {
+        const hw = node.w / 2;
+        const hh = BOX_H / 2;
+        switch (side) {
+          case 'left':   return { x: node.x - hw, y: node.y };
+          case 'right':  return { x: node.x + hw, y: node.y };
+          case 'top':    return { x: node.x,       y: node.y - hh };
+          case 'bottom': return { x: node.x,       y: node.y + hh };
+        }
+      };
+
+      const determineSides = (src, tgt) => {
+        const dx = tgt.x - src.x;
+        const dy = tgt.y - src.y;
+        // Mostly horizontal
+        if (Math.abs(dx) > Math.abs(dy) * 0.5 && dx > 0) return ['right', 'left'];
+        if (Math.abs(dx) > Math.abs(dy) * 0.5 && dx < 0) return ['left', 'right'];
+        // Mostly vertical
+        if (dy > 0) return ['bottom', 'top'];
+        return ['top', 'bottom'];
+      };
+
+      const buildPath = (srcNode, tgtNode) => {
+        const [srcSide, tgtSide] = determineSides(srcNode, tgtNode);
+        const p1 = getPort(srcNode, srcSide);
+        const p2 = getPort(tgtNode, tgtSide);
+
+        const dx = p2.x - p1.x;
+        const dy = p2.y - p1.y;
+
+        // Use cubic bezier for smooth curves
+        let c1, c2;
+        if (srcSide === 'right' && tgtSide === 'left') {
+          const mx = dx * 0.45;
+          c1 = { x: p1.x + mx, y: p1.y };
+          c2 = { x: p2.x - mx, y: p2.y };
+        } else if (srcSide === 'bottom' && tgtSide === 'top') {
+          const my = dy * 0.45;
+          c1 = { x: p1.x, y: p1.y + my };
+          c2 = { x: p2.x, y: p2.y - my };
+        } else if (srcSide === 'left' && tgtSide === 'right') {
+          const mx = Math.abs(dx) * 0.45;
+          c1 = { x: p1.x - mx, y: p1.y };
+          c2 = { x: p2.x + mx, y: p2.y };
+        } else if (srcSide === 'top' && tgtSide === 'bottom') {
+          const my = Math.abs(dy) * 0.45;
+          c1 = { x: p1.x, y: p1.y - my };
+          c2 = { x: p2.x, y: p2.y + my };
+        } else {
+          c1 = { x: p1.x + dx * 0.4, y: p1.y };
+          c2 = { x: p2.x - dx * 0.4, y: p2.y };
+        }
+
+        return `M${p1.x},${p1.y} C${c1.x},${c1.y} ${c2.x},${c2.y} ${p2.x},${p2.y}`;
+      };
+
+      // Special path for Policy -> Feature Selection (wrap from row 1 to row 2)
+      const buildPolicyToFeatsel = () => {
+        const src = nodeMap['policy'];
+        const tgt = nodeMap['featsel'];
+        const p1 = getPort(src, 'bottom');
+        const p2 = getPort(tgt, 'top');
+        const midY = (p1.y + p2.y) / 2;
+        return `M${p1.x},${p1.y} C${p1.x},${midY} ${p2.x},${midY} ${p2.x},${p2.y}`;
+      };
+
+      // Special path for PPO -> Policy (feedback loop: down from PPO, right along bottom, up right side, into Policy)
+      const buildFeedbackLoop = () => {
+        const src = nodeMap['ppo'];
+        const tgt = nodeMap['policy'];
+        const p1 = getPort(src, 'bottom');
+        const p2 = getPort(tgt, 'right');
+        const bottomY = H - 16;   // bottom margin
+        const rightX = W - 40;    // right margin
+        const r = 16;             // corner radius
+        // Down from PPO, rounded corner right, along bottom, rounded corner up, up right side, rounded corner left into Policy
+        return `M${p1.x},${p1.y} L${p1.x},${bottomY - r} Q${p1.x},${bottomY} ${p1.x + r},${bottomY} L${rightX - r},${bottomY} Q${rightX},${bottomY} ${rightX},${bottomY - r} L${rightX},${p2.y + r} Q${rightX},${p2.y} ${rightX - r},${p2.y} L${p2.x},${p2.y}`;
+      };
+
+      // --- Build SVG ---
+      let svgContent = '';
+
+      // Defs: arrowheads
+      svgContent += `
+        <defs>
+          <marker id="crl-arrow-fwd" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto" markerUnits="strokeWidth">
+            <path d="M0,0.5 L6.5,3 L0,5.5" fill="none" stroke="var(--muted-color, #a3a3a3)" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
+          </marker>
+          <marker id="crl-arrow-fb" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto" markerUnits="strokeWidth">
+            <path d="M0,0.5 L6.5,3 L0,5.5" fill="none" stroke="#6366f1" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
+          </marker>
+        </defs>
+      `;
+
+      // Section dividers and labels
+      const divY1 = (ROW_Y[0] + ROW_Y[1]) / 2 + 5;
+      const divY2 = (ROW_Y[1] + ROW_Y[2]) / 2 + 5;
+      svgContent += `
+        <line x1="16" y1="${divY1}" x2="${W - 16}" y2="${divY1}" stroke="var(--border-color, #e5e5e5)" stroke-width="0.8" stroke-dasharray="3,4" opacity="0.5" />
+        <line x1="16" y1="${divY2}" x2="${W - 16}" y2="${divY2}" stroke="var(--border-color, #e5e5e5)" stroke-width="0.8" stroke-dasharray="3,4" opacity="0.5" />
+        <text class="fc-section-label" x="16" y="${ROW_Y[0] - 28}">Forward Pass</text>
+        <text class="fc-section-label" x="16" y="${ROW_Y[1] - 28}">Steering</text>
+        <text class="fc-section-label" x="16" y="${ROW_Y[2] - 28}">Training Loop</text>
+      `;
+
+      // Edges (rendered first, behind nodes)
+      edges.forEach(([srcId, tgtId, type], idx) => {
+        const src = nodeMap[srcId];
+        const tgt = nodeMap[tgtId];
+        const isFeedback = type === 'feedback';
+        let d;
+
+        if (srcId === 'ppo' && tgtId === 'policy') {
+          d = buildFeedbackLoop();
+        } else if (srcId === 'policy' && tgtId === 'featsel') {
+          d = buildPolicyToFeatsel();
+        } else {
+          d = buildPath(src, tgt);
+        }
+
+        const cls = isFeedback ? 'fc-arrow-feedback' : 'fc-arrow-forward';
+        const marker = isFeedback ? 'url(#crl-arrow-fb)' : 'url(#crl-arrow-fwd)';
+
+        svgContent += `<path class="${cls}" d="${d}" data-marker="${marker}" data-edge-idx="${idx}" data-src="${srcId}" data-tgt="${tgtId}" />`;
+      });
+
+      // AFM dashed annotation around Feature Selection
+      const fsNode = nodeMap['featsel'];
+      const afmPad = 12;
+      svgContent += `
+        <rect class="fc-afm-box"
+          x="${fsNode.x - fsNode.w / 2 - afmPad}" y="${fsNode.y - BOX_H / 2 - afmPad}"
+          width="${fsNode.w + afmPad * 2}" height="${BOX_H + afmPad * 2 + 14}" />
+        <text class="fc-afm-label" x="${fsNode.x}" y="${fsNode.y + BOX_H / 2 + afmPad + 6}">AFM: mask expands as tokens generate</text>
+      `;
+
+      // Nodes
+      nodes.forEach(n => {
+        const s = styles[n.style];
+        const hw = n.w / 2;
+        const hh = BOX_H / 2;
+        const sw = s.strokeW || 1.8;
+
+        svgContent += `<g class="fc-node fc-node-hidden" data-node-id="${n.id}">`;
+        svgContent += `<rect class="fc-box" x="${n.x - hw}" y="${n.y - hh}" width="${n.w}" height="${BOX_H}" rx="${BOX_RX}" fill="${s.fill}" stroke="${s.stroke}" stroke-width="${sw}" />`;
+
+        // Determine text color for foreignObject
+        const isLight = n.style === 'llm';
+        const txtColor = isLight ? '#fff' : 'var(--text-color, #1f2937)';
+        const subColor = isLight ? 'rgba(255,255,255,0.7)' : 'var(--muted-color, #6b7280)';
+
+        if (n.math && n.sub) {
+          svgContent += `<foreignObject x="${n.x - hw}" y="${n.y - hh}" width="${n.w}" height="${hh}"><div xmlns="http://www.w3.org/1999/xhtml" class="fc-fo" data-tex="${n.math}" style="color:${txtColor}">${n.label}</div></foreignObject>`;
+          if (n.mathSub) {
+            svgContent += `<foreignObject x="${n.x - hw}" y="${n.y}" width="${n.w}" height="${hh}"><div xmlns="http://www.w3.org/1999/xhtml" class="fc-fo fc-fo-sub" data-tex="${n.mathSub}" style="color:${subColor}">${n.sub}</div></foreignObject>`;
+          } else {
+            svgContent += `<text class="${s.subClass}" x="${n.x}" y="${n.y + 10}" font-size="9">${n.sub}</text>`;
+          }
+        } else if (n.math) {
+          svgContent += `<foreignObject x="${n.x - hw}" y="${n.y - hh}" width="${n.w}" height="${BOX_H}"><div xmlns="http://www.w3.org/1999/xhtml" class="fc-fo" data-tex="${n.math}" style="color:${txtColor}">${n.label}</div></foreignObject>`;
+        } else if (n.sub) {
+          if (n.mathSub) {
+            svgContent += `<text class="${s.textClass}" x="${n.x}" y="${n.y - 6}">${n.label}</text>`;
+            svgContent += `<foreignObject x="${n.x - hw}" y="${n.y}" width="${n.w}" height="${hh}"><div xmlns="http://www.w3.org/1999/xhtml" class="fc-fo fc-fo-sub" data-tex="${n.mathSub}" style="color:${subColor}">${n.sub}</div></foreignObject>`;
+          } else {
+            svgContent += `<text class="${s.textClass}" x="${n.x}" y="${n.y - 6}">${n.label}</text>`;
+            svgContent += `<text class="${s.subClass}" x="${n.x}" y="${n.y + 10}" font-size="9">${n.sub}</text>`;
+          }
+        } else {
+          svgContent += `<text class="${s.textClass}" x="${n.x}" y="${n.y + 1}">${n.label}</text>`;
+        }
+
+        svgContent += `</g>`;
+      });
+
+      const svgEl = `<svg viewBox="0 0 ${W} ${H}" xmlns="http://www.w3.org/2000/svg" style="overflow:visible;">${svgContent}</svg>`;
+
+      // Tooltip element
+      const tooltipEl = '<div class="fc-tooltip"></div>';
+
+      container.innerHTML = svgEl + tooltipEl;
+
+      // --- KaTeX render ---
+      function renderTex() {
+        if (typeof katex === 'undefined') return;
+        container.querySelectorAll('.fc-fo[data-tex]').forEach(function(el) {
+          try { el.innerHTML = katex.renderToString(el.dataset.tex, { throwOnError: false, displayMode: false }); } catch(e) {}
+        });
+      }
+      if (typeof katex !== 'undefined') renderTex();
+      else { var _ki = setInterval(function(){ if(typeof katex!=='undefined'){clearInterval(_ki);renderTex();}},300); setTimeout(function(){clearInterval(_ki);},8000); }
+
+      // --- Animations: IntersectionObserver ---
+      const svg = container.querySelector('svg');
+      const tooltip = container.querySelector('.fc-tooltip');
+      const allNodeEls = svg.querySelectorAll('.fc-node');
+      const allEdgeEls = svg.querySelectorAll('.fc-arrow-forward, .fc-arrow-feedback');
+
+      // Reveal order: nodes by appearance
+      const revealOrder = [
+        'input', 'llm1', 'residual', 'sae', 'policy',
+        'featsel', 'steering', 'llm2', 'output',
+        'reward', 'critic', 'ppo'
+      ];
+
+      // Edge reveal: after both endpoints are visible
+      const edgeRevealAfter = {
+        0: ['input', 'llm1'],
+        1: ['llm1', 'residual'],
+        2: ['residual', 'sae'],
+        3: ['sae', 'policy'],
+        4: ['policy', 'featsel'],
+        5: ['featsel', 'steering'],
+        6: ['steering', 'llm2'],
+        7: ['llm2', 'output'],
+        8: ['output', 'reward'],
+        9: ['reward', 'critic'],
+        10: ['critic', 'ppo'],
+        11: ['ppo', 'policy'],
+      };
+
+      let revealed = new Set();
+      let animationTriggered = false;
+
+      const runRevealAnimation = () => {
+        if (animationTriggered) return;
+        animationTriggered = true;
+
+        revealOrder.forEach((nodeId, i) => {
+          setTimeout(() => {
+            const el = svg.querySelector(`[data-node-id="${nodeId}"]`);
+            if (el) {
+              el.classList.remove('fc-node-hidden');
+              el.classList.add('fc-node-visible');
+            }
+            revealed.add(nodeId);
+
+            // Reveal edges after a short delay so the node is visible first
+            setTimeout(function() {
+              allEdgeEls.forEach(function(edgeEl) {
+                var idx = parseInt(edgeEl.getAttribute('data-edge-idx'));
+                var deps = edgeRevealAfter[idx];
+                if (deps && deps.every(function(d) { return revealed.has(d); })) {
+                  if (edgeEl.dataset.edgeRevealed) return;
+                  edgeEl.dataset.edgeRevealed = '1';
+                  var isFb = edgeEl.classList.contains('fc-arrow-feedback');
+                  var mk = edgeEl.getAttribute('data-marker');
+                  if (mk) edgeEl.setAttribute('marker-end', mk);
+                  if (isFb) {
+                    edgeEl.classList.add('fc-arrow-feedback-active');
+                  } else {
+                    edgeEl.classList.add('fc-arrow-active');
+                  }
+                }
+              });
+            }, 200);
+          }, i * 280);
+        });
+      };
+
+      // IntersectionObserver
+      if ('IntersectionObserver' in window) {
+        const observer = new IntersectionObserver((entries) => {
+          entries.forEach(entry => {
+            if (entry.isIntersecting) {
+              runRevealAnimation();
+              observer.disconnect();
+            }
+          });
+        }, { threshold: 0.2 });
+        observer.observe(container);
+      } else {
+        // Fallback: reveal immediately
+        runRevealAnimation();
+      }
+
+      // --- Hover interactions ---
+      allNodeEls.forEach(nodeEl => {
+        const nodeId = nodeEl.getAttribute('data-node-id');
+
+        nodeEl.addEventListener('mouseenter', (e) => {
+          // Highlight connected edges
+          allEdgeEls.forEach(edgeEl => {
+            const src = edgeEl.getAttribute('data-src');
+            const tgt = edgeEl.getAttribute('data-tgt');
+            if (src === nodeId || tgt === nodeId) {
+              edgeEl.classList.add('fc-arrow-highlight');
+            }
+          });
+
+          // Show tooltip
+          if (tooltips[nodeId]) {
+            tooltip.textContent = tooltips[nodeId];
+            tooltip.classList.add('fc-tooltip-visible');
+
+            const rect = container.getBoundingClientRect();
+            const svgRect = svg.getBoundingClientRect();
+            const node = nodeMap[nodeId];
+            // Convert SVG coords to pixel coords
+            const scaleX = svgRect.width / W;
+            const scaleY = svgRect.height / H;
+            const px = svgRect.left - rect.left + node.x * scaleX;
+            const py = svgRect.top - rect.top + (node.y - BOX_H / 2) * scaleY - 8;
+
+            tooltip.style.left = Math.max(8, Math.min(px - 60, rect.width - 220)) + 'px';
+            tooltip.style.top = Math.max(8, py - tooltip.offsetHeight) + 'px';
+          }
+        });
+
+        nodeEl.addEventListener('mouseleave', () => {
+          allEdgeEls.forEach(edgeEl => {
+            edgeEl.classList.remove('fc-arrow-highlight');
+          });
+          tooltip.classList.remove('fc-tooltip-visible');
+        });
+      });
+    };
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', bootstrap, { once: true });
+    } else {
+      bootstrap();
+    }
+  })();
+</script>

app/src/content/embeds/feature-frequency.html

@@ -0,0 +1,467 @@
+<!--
+  Feature Selection Frequency (Zipf-like)
+
+  Horizontal bar chart showing the top-10 most frequently selected SAE features
+  by the CRL policy on GSM8K layer 20.  Data from feature_analysis_20.json "success" category.
+  Feature IDs link to Neuronpedia.
+-->
+<div class="feature-frequency"></div>
+<style>
+  .feature-frequency {
+    position: relative;
+    font-family: system-ui, -apple-system, sans-serif;
+    width: 100%;
+  }
+
+  .feature-frequency .chart-card {
+    background: var(--page-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 16px;
+    padding: 24px;
+  }
+
+  .feature-frequency .chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    margin-bottom: 20px;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .feature-frequency .chart-title {
+    font-size: 15px;
+    font-weight: 700;
+    color: var(--text-color);
+  }
+
+  .feature-frequency .chart-subtitle {
+    font-size: 12px;
+    color: var(--muted-color);
+    font-weight: 500;
+  }
+
+  .feature-frequency svg {
+    display: block;
+    width: 100%;
+    height: auto;
+    overflow: visible;
+  }
+
+  .feature-frequency .axis path { stroke: none; }
+  .feature-frequency .axis line { stroke: var(--grid-color); }
+  .feature-frequency .axis text { fill: var(--tick-color); font-size: 11px; }
+  .feature-frequency .grid line { stroke: var(--grid-color); stroke-dasharray: 2, 3; }
+  .feature-frequency .grid path { stroke: none; }
+
+  .feature-frequency .bar-rect {
+    cursor: pointer;
+    transition: opacity 0.15s ease;
+  }
+  .feature-frequency .bar-rect:hover { opacity: 0.82; }
+
+  .feature-frequency .bar-count {
+    font-size: 11px;
+    font-weight: 600;
+    fill: var(--text-color);
+    pointer-events: none;
+  }
+
+  .feature-frequency .y-label {
+    font-size: 11px;
+    fill: var(--text-color);
+    cursor: pointer;
+    text-decoration: none;
+  }
+  .feature-frequency .y-label:hover {
+    fill: #4F46E5;
+    text-decoration: underline;
+  }
+
+  .feature-frequency .y-desc {
+    font-size: 10px;
+    fill: var(--muted-color);
+    pointer-events: none;
+  }
+
+  .feature-frequency .axis-label {
+    fill: var(--text-color);
+    font-size: 12px;
+    font-weight: 600;
+  }
+
+  .feature-frequency .d3-tooltip {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translate(-9999px, -9999px);
+    pointer-events: none;
+    padding: 10px 14px;
+    border-radius: 12px;
+    font-size: 12px;
+    line-height: 1.5;
+    border: 1px solid var(--border-color);
+    background: var(--surface-bg);
+    color: var(--text-color);
+    box-shadow: 0 8px 32px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.10);
+    backdrop-filter: saturate(1.12) blur(8px);
+    -webkit-backdrop-filter: saturate(1.12) blur(8px);
+    opacity: 0;
+    transition: opacity 0.15s ease;
+    z-index: 20;
+    max-width: 260px;
+  }
+
+  .feature-frequency .entropy-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 4px 12px;
+    border-radius: 999px;
+    border: 1px solid var(--border-color);
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--text-color);
+    background: var(--surface-bg, var(--page-bg));
+  }
+
+  .feature-frequency .entropy-badge .dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #4F46E5;
+  }
+
+  @media (max-width: 600px) {
+    .feature-frequency .chart-card {
+      padding: 14px;
+    }
+    .feature-frequency .y-label {
+      font-size: 10px;
+    }
+    .feature-frequency .y-desc {
+      font-size: 9px;
+    }
+  }
+</style>
+<script>
+(function() {
+  var ensureD3 = function(cb) {
+    if (window.d3 && typeof window.d3.select === 'function') return cb();
+    var s = document.getElementById('d3-cdn-script');
+    if (!s) {
+      s = document.createElement('script');
+      s.id = 'd3-cdn-script';
+      s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js';
+      document.head.appendChild(s);
+    }
+    var onReady = function() {
+      if (window.d3 && typeof window.d3.select === 'function') cb();
+    };
+    s.addEventListener('load', onReady, { once: true });
+    if (window.d3) onReady();
+  };
+
+  var bootstrap = function() {
+    var candidates = Array.from(document.querySelectorAll('.feature-frequency'))
+      .filter(function(el) { return !el.dataset.mounted; });
+    var container = candidates[candidates.length - 1];
+    if (!container) return;
+    container.dataset.mounted = 'true';
+    container.style.position = 'relative';
+
+    var d3sel = window.d3;
+
+    /* ── Data (real from feature_analysis_20.json "success" category) ── */
+    var data = [
+      {rank: 1,  feature: 2198,  count: 699, label: "summaries, reflections, or clarifications"},
+      {rank: 2,  feature: 6787,  count: 644, label: "cellular biology and histology terms"},
+      {rank: 3,  feature: 5890,  count: 613, label: "technical terms and specifications"},
+      {rank: 4,  feature: 6512,  count: 518, label: "instructions and steps for processes"},
+      {rank: 5,  feature: 14802, count: 473, label: "code structures, functions, methods"},
+      {rank: 6,  feature: 16326, count: 452, label: "comparative measurements or evaluations"},
+      {rank: 7,  feature: 8587,  count: 439, label: "procedural language, claims and benefits"},
+      {rank: 8,  feature: 9488,  count: 425, label: "API functions and documentation"},
+      {rank: 9,  feature: 5423,  count: 409, label: "parentheses and numerical data"},
+      {rank: 10, feature: 9276,  count: 399, label: "punctuation and conversational cues"}
+    ];
+
+    var totalCount = data.reduce(function(s, d) { return s + d.count; }, 0);
+
+    /* ── Tooltip ── */
+    var tip = document.createElement('div');
+    tip.className = 'd3-tooltip';
+    var tipInner = document.createElement('div');
+    tip.appendChild(tipInner);
+    container.appendChild(tip);
+
+    function showTip(event, html) {
+      tipInner.innerHTML = html;
+      var coords = d3sel.pointer(event, container);
+      var tipRect = tip.getBoundingClientRect();
+      var contW = container.getBoundingClientRect().width;
+      var contH = container.getBoundingClientRect().height;
+      var tx = coords[0] + 14;
+      var ty = coords[1] - 10;
+      if (tx + (tipRect.width || 200) > contW - 10) tx = coords[0] - (tipRect.width || 200) - 14;
+      if (ty + (tipRect.height || 80) > contH - 10) ty = coords[1] - (tipRect.height || 80) - 10;
+      if (ty < 0) ty = coords[1] + 20;
+      tip.style.opacity = '1';
+      tip.style.transform = 'translate(' + Math.round(tx) + 'px, ' + Math.round(ty) + 'px)';
+    }
+    function hideTip() {
+      tip.style.opacity = '0';
+      tip.style.transform = 'translate(-9999px, -9999px)';
+    }
+
+    /* ── Card ── */
+    var card = document.createElement('div');
+    card.className = 'chart-card';
+    container.appendChild(card);
+
+    /* Header */
+    var header = document.createElement('div');
+    header.className = 'chart-header';
+    header.innerHTML =
+      '<div>' +
+        '<div class="chart-title">Feature Selection Frequency</div>' +
+        '<div class="chart-subtitle">GSM8K \u00b7 Layer 20 \u00b7 Top-10 most selected SAE features</div>' +
+      '</div>' +
+      '<div class="entropy-badge"><span class="dot"></span>Diversity H = 6.695</div>';
+    card.appendChild(header);
+
+    /* SVG container */
+    var svgWrap = document.createElement('div');
+    svgWrap.style.position = 'relative';
+    card.appendChild(svgWrap);
+
+    var svg = d3sel.select(svgWrap).append('svg');
+    var defs = svg.append('defs');
+
+    /* Gradient definition */
+    var gradId = 'ff-grad-' + Math.random().toString(36).slice(2);
+    var grad = defs.append('linearGradient')
+      .attr('id', gradId)
+      .attr('x1', '0%').attr('y1', '0%')
+      .attr('x2', '0%').attr('y2', '100%');
+    grad.append('stop').attr('offset', '0%').attr('stop-color', '#4F46E5');
+    grad.append('stop').attr('offset', '100%').attr('stop-color', '#a3a3a3');
+
+    var gRoot = svg.append('g');
+    var gGrid = gRoot.append('g').attr('class', 'grid');
+    var gBars = gRoot.append('g').attr('class', 'bars');
+    var gAxes = gRoot.append('g').attr('class', 'axes');
+
+    var hasAnimated = false;
+
+    /* ── Color interpolation per rank ── */
+    function barColor(rank) {
+      var t = (rank - 1) / (data.length - 1);
+      return d3sel.interpolateRgb('#4F46E5', '#a3a3a3')(t);
+    }
+
+    /* ── Neuronpedia URL ── */
+    function neuronpediaUrl(featureId) {
+      return 'https://neuronpedia.org/gemma-2-2b/20-gemmascope-res-16k/' + featureId;
+    }
+
+    /* ── Render ── */
+    function render(animate) {
+      var containerWidth = container.clientWidth || 700;
+      var totalWidth = Math.max(340, Math.round(containerWidth));
+
+      /* Responsive margin: narrower left margin on mobile */
+      var isNarrow = totalWidth < 500;
+      var margin = {
+        top: 8,
+        right: 48,
+        bottom: 40,
+        left: isNarrow ? 130 : 200
+      };
+      var innerWidth = totalWidth - margin.left - margin.right;
+      var barHeight = isNarrow ? 22 : 26;
+      var barPadding = isNarrow ? 4 : 6;
+      var totalBarArea = data.length * (barHeight + barPadding) - barPadding;
+      var totalHeight = margin.top + totalBarArea + margin.bottom;
+
+      svg.attr('viewBox', '0 0 ' + totalWidth + ' ' + totalHeight)
+        .attr('preserveAspectRatio', 'xMidYMid meet');
+
+      gRoot.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+      /* Scales */
+      var xMax = d3sel.max(data, function(d) { return d.count; });
+      var xScale = d3sel.scaleLinear()
+        .domain([0, xMax * 1.08])
+        .range([0, innerWidth]);
+
+      var yScale = d3sel.scaleBand()
+        .domain(data.map(function(d) { return d.rank; }))
+        .range([0, totalBarArea])
+        .paddingInner(barPadding / (barHeight + barPadding))
+        .paddingOuter(0);
+
+      /* Grid lines */
+      gGrid.selectAll('*').remove();
+      gGrid.append('g')
+        .call(d3sel.axisBottom(xScale)
+          .ticks(isNarrow ? 4 : 6)
+          .tickSize(totalBarArea)
+          .tickFormat('')
+        )
+        .call(function(g) { g.select('.domain').remove(); });
+
+      /* ── Bars ── */
+      var barGroups = gBars.selectAll('g.bar-group')
+        .data(data, function(d) { return d.rank; });
+
+      var barEnter = barGroups.enter().append('g').attr('class', 'bar-group');
+      barEnter.append('rect').attr('class', 'bar-rect');
+      barEnter.append('text').attr('class', 'bar-count');
+
+      var barMerge = barEnter.merge(barGroups);
+
+      barMerge.attr('transform', function(d) {
+        return 'translate(0,' + yScale(d.rank) + ')';
+      });
+
+      var rects = barMerge.select('.bar-rect')
+        .attr('y', 0)
+        .attr('height', yScale.bandwidth())
+        .attr('rx', 4)
+        .attr('ry', 4)
+        .attr('fill', function(d) { return barColor(d.rank); });
+
+      if (animate) {
+        rects
+          .attr('x', 0)
+          .attr('width', 0)
+          .transition()
+          .duration(800)
+          .delay(function(d, i) { return i * 40; })
+          .ease(d3sel.easeCubicOut)
+          .attr('width', function(d) { return xScale(d.count); });
+      } else {
+        rects
+          .attr('x', 0)
+          .attr('width', function(d) { return xScale(d.count); });
+      }
+
+      /* Hover */
+      rects
+        .on('mousemove', function(event, d) {
+          var pct = ((d.count / totalCount) * 100).toFixed(1);
+          var html =
+            '<div style="font-weight:700;margin-bottom:2px;">F' + d.feature + '</div>' +
+            '<div style="font-size:11px;color:var(--muted-color);margin-bottom:6px;">' + d.label + '</div>' +
+            '<div style="display:flex;gap:16px;">' +
+              '<div><span style="font-size:10px;color:var(--muted-color);">Count</span><br><strong style="font-size:16px;">' + d.count + '</strong></div>' +
+              '<div><span style="font-size:10px;color:var(--muted-color);">Share</span><br><strong style="font-size:16px;">' + pct + '%</strong></div>' +
+              '<div><span style="font-size:10px;color:var(--muted-color);">Rank</span><br><strong style="font-size:16px;">#' + d.rank + '</strong></div>' +
+            '</div>';
+          showTip(event, html);
+        })
+        .on('mouseleave', function() { hideTip(); })
+        .on('click', function(event, d) {
+          window.open(neuronpediaUrl(d.feature), '_blank', 'noopener');
+        });
+
+      /* Count labels at end of bar */
+      var countLabels = barMerge.select('.bar-count')
+        .attr('y', yScale.bandwidth() / 2)
+        .attr('dy', '0.35em')
+        .text(function(d) { return d.count; });
+
+      if (animate) {
+        countLabels
+          .attr('x', 4)
+          .attr('opacity', 0)
+          .transition()
+          .duration(400)
+          .delay(function(d, i) { return i * 40 + 600; })
+          .attr('x', function(d) { return xScale(d.count) + 6; })
+          .attr('opacity', 1);
+      } else {
+        countLabels
+          .attr('x', function(d) { return xScale(d.count) + 6; })
+          .attr('opacity', 1);
+      }
+
+      barGroups.exit().remove();
+
+      /* ── Y-axis labels (feature IDs + descriptions) ── */
+      gAxes.selectAll('*').remove();
+
+      data.forEach(function(d) {
+        var yPos = yScale(d.rank) + yScale.bandwidth() / 2;
+
+        /* Feature ID as clickable link */
+        var link = gAxes.append('a')
+          .attr('href', neuronpediaUrl(d.feature))
+          .attr('target', '_blank')
+          .attr('rel', 'noopener');
+
+        link.append('text')
+          .attr('class', 'y-label')
+          .attr('x', -8)
+          .attr('y', yPos)
+          .attr('dy', isNarrow ? '0.35em' : '-0.15em')
+          .attr('text-anchor', 'end')
+          .attr('font-weight', 600)
+          .text('F' + d.feature);
+
+        /* Description below feature ID (only on wider viewports) */
+        if (!isNarrow) {
+          gAxes.append('text')
+            .attr('class', 'y-desc')
+            .attr('x', -8)
+            .attr('y', yPos)
+            .attr('dy', '1.0em')
+            .attr('text-anchor', 'end')
+            .text(d.label);
+        }
+      });
+
+      /* X-axis */
+      gAxes.append('g')
+        .attr('class', 'axis x-axis')
+        .attr('transform', 'translate(0,' + totalBarArea + ')')
+        .call(d3sel.axisBottom(xScale).ticks(isNarrow ? 4 : 6));
+
+      gAxes.append('text')
+        .attr('class', 'axis-label')
+        .attr('text-anchor', 'middle')
+        .attr('x', innerWidth / 2)
+        .attr('y', totalBarArea + 34)
+        .text('Selection Count');
+    }
+
+    /* ── Initial render (no animation) then observe for scroll-in ── */
+    render(false);
+
+    var obs = new IntersectionObserver(function(entries) {
+      entries.forEach(function(entry) {
+        if (entry.isIntersecting && !hasAnimated) {
+          hasAnimated = true;
+          render(true);
+          obs.disconnect();
+        }
+      });
+    }, { threshold: 0.15 });
+    obs.observe(container);
+
+    /* Resize */
+    if (window.ResizeObserver) {
+      new ResizeObserver(function() {
+        if (hasAnimated) render(false);
+      }).observe(container);
+    }
+  };
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function() { ensureD3(bootstrap); }, { once: true });
+  } else {
+    ensureD3(bootstrap);
+  }
+})();
+</script>

app/src/content/embeds/layer-heatmap.html

@@ -0,0 +1,470 @@
+<!--
+  Layer × Coefficient Sensitivity — Multi-line Chart
+  Shows accuracy across layers for different steering coefficients.
+  Data: real experiment results from DGX (compare_layers.jsonl etc.)
+-->
+<div class="layer-sensitivity"></div>
+<style>
+.layer-sensitivity {
+  font-family: var(--default-font-family, system-ui, -apple-system, sans-serif);
+  position: relative;
+  max-width: 760px;
+  margin: 0 auto;
+}
+.layer-sensitivity .ls-tabs {
+  display: flex;
+  gap: 4px;
+  margin-bottom: 8px;
+  flex-wrap: wrap;
+}
+.layer-sensitivity .ls-tab {
+  padding: 6px 14px;
+  border-radius: 8px;
+  border: 1.5px solid var(--border-color, rgba(0,0,0,0.12));
+  background: transparent;
+  color: var(--muted-color, #666);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-family: inherit;
+}
+.layer-sensitivity .ls-tab:hover {
+  border-color: var(--text-color, #333);
+  color: var(--text-color, #333);
+}
+.layer-sensitivity .ls-tab.active {
+  background: var(--text-color, #222);
+  color: var(--page-bg, #fff);
+  border-color: var(--text-color, #222);
+}
+.layer-sensitivity .ls-mode-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+.layer-sensitivity .ls-mode-btn {
+  padding: 4px 12px;
+  border-radius: 6px;
+  border: 1px solid var(--border-color, rgba(0,0,0,0.12));
+  background: transparent;
+  color: var(--muted-color, #888);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-family: inherit;
+}
+.layer-sensitivity .ls-mode-btn.active {
+  background: oklch(from var(--text-color, #222) l c h / 0.12);
+  color: var(--text-color, #222);
+  border-color: var(--text-color, #222);
+  font-weight: 600;
+}
+.layer-sensitivity .ls-chart-wrap {
+  position: relative;
+}
+.layer-sensitivity .ls-legend {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 8px;
+  flex-wrap: wrap;
+  font-size: 12px;
+  color: var(--muted-color, #888);
+}
+.layer-sensitivity .ls-legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+.layer-sensitivity .ls-legend-item.dimmed {
+  opacity: 0.25;
+}
+.layer-sensitivity .ls-legend-swatch {
+  width: 18px;
+  height: 3px;
+  border-radius: 2px;
+}
+.layer-sensitivity .ls-legend-baseline {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: 8px;
+}
+.layer-sensitivity .ls-legend-dash {
+  width: 18px;
+  height: 0;
+  border-top: 2px dashed var(--muted-color, #aaa);
+}
+.layer-sensitivity .ls-tooltip {
+  position: absolute;
+  pointer-events: none;
+  padding: 8px 12px;
+  border-radius: 10px;
+  font-size: 12px;
+  line-height: 1.5;
+  background: var(--page-bg, #fff);
+  border: 1px solid var(--border-color, rgba(0,0,0,0.12));
+  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
+  opacity: 0;
+  transition: opacity 0.12s;
+  z-index: 10;
+  white-space: nowrap;
+}
+</style>
+<script>
+(function() {
+  var root = document.currentScript ? document.currentScript.parentElement.querySelector('.layer-sensitivity') : document.querySelector('.layer-sensitivity');
+  if (!root || root.dataset.mounted) return;
+  root.dataset.mounted = 'true';
+
+  /* ── Inline data from DGX experiments ── */
+  var DATA = {"mmlu":{"layer":{"10":{"0":0.484119,"1":0.471799,"2":0.444666,"3":0.45777,"4":0.481555,"5":0.48419,"6":0.480487,"7":0.457841,"8":0.441461,"9":0.461259,"10":0.515382,"11":0.523857,"12":0.521721,"13":0.523715,"14":0.540593,"15":0.53867,"16":0.540949,"17":0.54629,"18":0.541874,"19":0.546432,"20":0.5475,"21":0.547073,"22":0.539097,"23":0.549708,"24":0.551702,"25":0.542943},"20":{"0":0.480986,"1":0.474149,"2":0.445378,"3":0.463538,"4":0.476428,"5":0.482125,"6":0.476428,"7":0.455989,"8":0.440179,"9":0.463538,"10":0.514528,"11":0.524213,"12":0.525139,"13":0.521222,"14":0.538242,"15":0.536177,"16":0.543085,"17":0.545364,"18":0.539239,"19":0.544937,"20":0.547358,"21":0.547572,"22":0.537886,"23":0.550919,"24":0.550064,"25":0.543726},"30":{"0":0.47949,"1":0.457413,"2":0.430281,"3":0.45606,"4":0.479348,"5":0.485615,"6":0.472226,"7":0.448796,"8":0.441248,"9":0.46425,"10":0.515382,"11":0.521293,"12":0.519655,"13":0.520011,"14":0.539595,"15":0.537245,"16":0.537601,"17":0.543655,"18":0.538527,"19":0.546931,"20":0.547287,"21":0.546717,"22":0.537886,"23":0.549993,"24":0.551987,"25":0.543227},"40":{"0":0.471656,"1":0.420097,"2":0.443883,"3":0.438043,"4":0.469449,"5":0.468096,"6":0.469662,"7":0.450007,"8":0.448156,"9":0.46425,"10":0.512605,"11":0.52229,"12":0.51759,"13":0.518658,"14":0.536391,"15":0.536462,"16":0.540593,"17":0.544438,"18":0.53632,"19":0.545008,"20":0.547572,"21":0.546646,"22":0.537958,"23":0.549708,"24":0.552699,"25":0.543299},"50":{"0":0.463039,"1":0.486683,"2":0.432916,"3":0.439254,"4":0.457983,"5":0.464749,"6":0.459977,"7":0.440464,"8":0.448868,"9":0.469164,"10":0.513175,"11":0.518872,"12":0.509614,"13":0.51581,"14":0.535251,"15":0.534895,"16":0.539952,"17":0.543014,"18":0.535679,"19":0.543085,"20":0.547144,"21":0.547002,"22":0.538955,"23":0.549566,"24":0.552557,"25":0.542943},"60":{"0":0.462541,"1":0.452215,"2":0.43199,"3":0.438043,"4":0.439182,"5":0.452713,"6":0.433556,"7":0.431562,"8":0.454779,"9":0.469662,"10":0.506481,"11":0.512961,"12":0.511822,"13":0.513673,"14":0.529198,"15":0.53226,"16":0.535679,"17":0.543156,"18":0.533044,"19":0.544082,"20":0.546859,"21":0.544723,"22":0.538598,"23":0.549637,"24":0.552628,"25":0.542729},"70":{"0":0.459764,"1":0.333571,"2":0.425367,"3":0.422233,"4":0.439966,"5":0.437901,"6":0.43142,"7":0.430922,"8":0.434126,"9":0.473722,"10":0.507264,"11":0.512961,"12":0.503347,"13":0.508332,"14":0.524356,"15":0.530124,"16":0.531477,"17":0.54045,"18":0.529839,"19":0.5428,"20":0.546503,"21":0.544509,"22":0.537103,"23":0.550491,"24":0.552485,"25":0.543085},"80":{"0":0.445877,"1":0.356359,"2":0.438399,"3":0.371101,"4":0.413759,"5":0.393391,"6":0.436049,"7":0.432417,"8":0.441248,"9":0.456345,"10":0.494588,"11":0.50235,"12":0.495585,"13":0.500641,"14":0.521792,"15":0.525709,"16":0.530053,"17":0.539239,"18":0.530551,"19":0.540165,"20":0.545649,"21":0.544296,"22":0.536818,"23":0.54921,"24":0.551702,"25":0.542017},"90":{"0":0.432061,"1":0.474434,"2":0.360063,"3":0.399587,"4":0.410483,"5":0.423302,"6":0.408987,"7":0.420667,"8":0.431491,"9":0.453639,"10":0.494659,"11":0.488534,"12":0.484333,"13":0.489959,"14":0.516379,"15":0.527774,"16":0.532403,"17":0.535394,"18":0.528842,"19":0.539168,"20":0.543726,"21":0.544153,"22":0.537958,"23":0.548925,"24":0.550919,"25":0.540521},"100":{"0":0.43085,"1":0.390044,"2":0.395955,"3":0.351802,"4":0.363979,"5":0.394459,"6":0.400798,"7":0.404287,"8":0.42907,"9":0.453354,"10":0.472725,"11":0.473223,"12":0.465033,"13":0.475787,"14":0.501852,"15":0.520367,"16":0.523287,"17":0.53575,"18":0.524854,"19":0.541874,"20":0.543441,"21":0.54223,"22":0.535536,"23":0.54864,"24":0.549138,"25":0.542159}}},"mmlu_const":{"layer":{"30":{"0":0.5315,"1":0.5293,"2":0.5244,"3":0.5247,"4":0.5372,"5":0.5356,"6":0.5307,"7":0.5251,"8":0.5253,"9":0.5267,"10":0.5308,"11":0.5282,"12":0.5209,"13":0.5221,"14":0.5401,"15":0.537,"16":0.5417,"17":0.5464,"18":0.5555,"19":0.5525,"20":0.5499,"21":0.5503,"22":0.5515,"23":0.5505,"24":0.5541,"25":0.5523},"40":{"0":0.5296,"1":0.5231,"2":0.5198,"3":0.5219,"4":0.5335,"5":0.5321,"6":0.5265,"7":0.5224,"8":0.5229,"9":0.5262,"10":0.5267,"11":0.5278,"12":0.5229,"13":0.5189,"14":0.5365,"15":0.5389,"16":0.5423,"17":0.5489,"18":0.5546,"19":0.5511,"20":0.5496,"21":0.5494,"22":0.5502,"23":0.5513,"24":0.5547,"25":0.5528},"50":{"0":0.5296,"1":0.5288,"2":0.5221,"3":0.5273,"4":0.5225,"5":0.5311,"6":0.5241,"7":0.5179,"8":0.5197,"9":0.5224,"10":0.5268,"11":0.5254,"12":0.5207,"13":0.5202,"14":0.5357,"15":0.5377,"16":0.54,"17":0.5437,"18":0.555,"19":0.5513,"20":0.5504,"21":0.5504,"22":0.5514,"23":0.5508,"24":0.555,"25":0.5529},"60":{"0":0.5252,"1":0.5113,"2":0.5084,"3":0.4978,"4":0.5192,"5":0.5269,"6":0.5192,"7":0.5162,"8":0.5108,"9":0.5197,"10":0.5276,"11":0.5218,"12":0.5193,"13":0.5138,"14":0.5373,"15":0.5377,"16":0.5424,"17":0.5459,"18":0.5538,"19":0.5533,"20":0.5502,"21":0.5503,"22":0.5512,"23":0.5503,"24":0.555,"25":0.5524},"70":{"0":0.523,"1":0.5132,"2":0.5027,"3":0.4824,"4":0.5119,"5":0.5174,"6":0.5135,"7":0.5085,"8":0.5105,"9":0.5169,"10":0.5239,"11":0.518,"12":0.5089,"13":0.5135,"14":0.5344,"15":0.5344,"16":0.536,"17":0.5444,"18":0.555,"19":0.5528,"20":0.5507,"21":0.5514,"22":0.5504,"23":0.5503,"24":0.5539,"25":0.5532},"80":{"0":0.5127,"1":0.4921,"2":0.4838,"3":0.4903,"4":0.5066,"5":0.5171,"6":0.5111,"7":0.499,"8":0.5028,"9":0.5162,"10":0.5184,"11":0.5179,"12":0.5103,"13":0.5099,"14":0.5322,"15":0.5353,"16":0.5397,"17":0.5469,"18":0.5533,"19":0.5523,"20":0.5486,"21":0.5498,"22":0.5495,"23":0.5496,"24":0.5547,"25":0.5527},"90":{"0":0.5083,"1":0.5024,"2":0.4878,"3":0.4928,"4":0.4954,"5":0.5082,"6":0.5019,"7":0.4948,"8":0.4981,"9":0.5078,"10":0.5135,"11":0.5122,"12":0.5066,"13":0.5043,"14":0.5261,"15":0.5306,"16":0.5335,"17":0.54,"18":0.5542,"19":0.5518,"20":0.5482,"21":0.5503,"22":0.5523,"23":0.5502,"24":0.5539,"25":0.5518},"100":{"0":0.5042,"1":0.4222,"2":0.4591,"3":0.447,"4":0.4909,"5":0.5049,"6":0.4999,"7":0.4878,"8":0.4888,"9":0.5018,"10":0.5149,"11":0.5098,"12":0.5011,"13":0.5,"14":0.526,"15":0.5312,"16":0.5368,"17":0.5426,"18":0.5501,"19":0.5527,"20":0.5498,"21":0.5503,"22":0.5516,"23":0.5492,"24":0.5543,"25":0.5524}}},"bbq_ambig":{"layer":{"20":{"0":0.527388,"1":0.487041,"2":0.47651,"3":0.496273,"4":0.55464,"5":0.542467,"6":0.462422,"7":0.421562,"8":0.364494,"9":0.348184,"10":0.363332,"11":0.383266,"12":0.382822,"13":0.384805,"14":0.395917,"15":0.448164,"16":0.483895,"17":0.433564,"18":0.609348,"19":0.599911,"20":0.613417,"21":0.618067,"22":0.598338,"23":0.600868,"24":0.589722,"25":0.585755},"30":{"0":0.520892,"1":0.482904,"2":0.452917,"3":0.4907,"4":0.549238,"5":0.530773,"6":0.455208,"7":0.413458,"8":0.355878,"9":0.346064,"10":0.364255,"11":0.384258,"12":0.38436,"13":0.38648,"14":0.395404,"15":0.449155,"16":0.483211,"17":0.43394,"18":0.610101,"19":0.599569,"20":0.613315,"21":0.618067,"22":0.597483,"23":0.601176,"24":0.589893,"25":0.585687},"40":{"0":0.507625,"1":0.48116,"2":0.455105,"3":0.477501,"4":0.523867,"5":0.50359,"6":0.440812,"7":0.394105,"8":0.344765,"9":0.340183,"10":0.364665,"11":0.387882,"12":0.388737,"13":0.388737,"14":0.397764,"15":0.448335,"16":0.480613,"17":0.431204,"18":0.610101,"19":0.599638,"20":0.613041,"21":0.617144,"22":0.597825,"23":0.601074,"24":0.590132,"25":0.58596},"50":{"0":0.50253,"1":0.424092,"2":0.43965,"3":0.45066,"4":0.516105,"5":0.506531,"6":0.429802,"7":0.382411,"8":0.348902,"9":0.337277,"10":0.36405,"11":0.39007,"12":0.39007,"13":0.390173,"14":0.401901,"15":0.450797,"16":0.480168,"17":0.433358,"18":0.610237,"19":0.599125,"20":0.612494}}},"bbq_disambig":{"layer":{"20":{"0":0.744888,"1":0.735519,"2":0.723757,"3":0.73275,"4":0.734733,"5":0.738152,"6":0.736169,"7":0.729057,"8":0.70543,"9":0.723757,"10":0.727997,"11":0.714115,"12":0.689428,"13":0.689838,"14":0.737092,"15":0.75053,"16":0.768344,"17":0.767284,"18":0.746393,"19":0.752821,"20":0.752923,"21":0.753847,"22":0.752958,"23":0.753642,"24":0.752547,"25":0.752034},"30":{"0":0.740341,"1":0.731827,"2":0.719141,"3":0.730049,"4":0.735041,"5":0.732989,"6":0.734083,"7":0.726356,"8":0.701498,"9":0.719141,"10":0.725672,"11":0.713021,"12":0.68741,"13":0.689291,"14":0.73487,"15":0.750085,"16":0.768652,"17":0.765712,"18":0.746051,"19":0.753436,"20":0.753744,"21":0.75371,"22":0.752923,"23":0.753676,"24":0.7533,"25":0.752684},"40":{"0":0.734767,"1":0.729707,"2":0.729536,"3":0.706934,"4":0.7175,"5":0.728954,"6":0.725022,"7":0.717431,"8":0.688162,"9":0.707174,"10":0.72068,"11":0.705977,"12":0.685359,"13":0.683683,"14":0.731519,"15":0.747829,"16":0.767729,"17":0.767113,"18":0.746393}}}};
+
+  var BASELINES = {
+    mmlu: 0.5206,
+    mmlu_const: 0.5519,
+    bbq_ambig: 0.6017,
+    bbq_disambig: 0.7542
+  };
+
+  var TASK_LABELS = {
+    mmlu: 'MMLU',
+    mmlu_const: 'MMLU (Constrained)',
+    bbq_ambig: 'BBQ (Ambiguous)',
+    bbq_disambig: 'BBQ (Disambiguated)'
+  };
+
+  var currentTask = 'mmlu';
+  var currentMode = 'layer';
+  var disabledCoeffs = {};
+
+  /* Mako palette (seaborn): dark purple → indigo → teal → mint */
+  var COEFF_COLORS = {
+    10:  '#1c101d', 15: '#2c1d37', 20: '#382a54', 25: '#3f3872',
+    30:  '#3f488e', 40: '#395d9b', 45: '#3570a0', 50: '#3483a4',
+    60:  '#3496a9', 70: '#38a9ac', 75: '#44bcad', 80: '#5fceac',
+    90:  '#90dbb3', 100: '#bbe7c8'
+  };
+  function coeffColor(c) { return COEFF_COLORS[c] || '#888'; }
+
+  /* ── Build DOM ── */
+  var tabs = document.createElement('div');
+  tabs.className = 'ls-tabs';
+  root.appendChild(tabs);
+
+  var modeRow = document.createElement('div');
+  modeRow.className = 'ls-mode-row';
+  root.appendChild(modeRow);
+
+  var chartWrap = document.createElement('div');
+  chartWrap.className = 'ls-chart-wrap';
+  root.appendChild(chartWrap);
+
+  var legend = document.createElement('div');
+  legend.className = 'ls-legend';
+  root.appendChild(legend);
+
+  var tooltip = document.createElement('div');
+  tooltip.className = 'ls-tooltip';
+  root.appendChild(tooltip);
+
+  /* ── Tabs ── */
+  function renderTabs() {
+    tabs.innerHTML = '';
+    Object.keys(TASK_LABELS).forEach(function(task) {
+      var btn = document.createElement('button');
+      btn.className = 'ls-tab' + (task === currentTask ? ' active' : '');
+      btn.textContent = TASK_LABELS[task];
+      btn.addEventListener('click', function() {
+        currentTask = task;
+        disabledCoeffs = {};
+        pickDefaultMode();
+        renderAll();
+      });
+      tabs.appendChild(btn);
+    });
+  }
+
+  function pickDefaultMode() {
+    currentMode = 'layer';
+  }
+
+  function renderModeButtons() {
+    modeRow.innerHTML = '';
+  }
+
+  function getActiveData() {
+    var td = DATA[currentTask];
+    if (!td) return null;
+    return td.layer || null;
+  }
+
+  /* ── Chart rendering with D3 ── */
+  function renderChart() {
+    chartWrap.innerHTML = '';
+    var activeData = getActiveData();
+    if (!activeData) {
+      chartWrap.innerHTML = '<div style="padding:24px;color:var(--muted-color);text-align:center;">No data</div>';
+      return;
+    }
+
+    var coeffs = Object.keys(activeData).map(Number).sort(function(a,b){return a-b;});
+    var layers = [];
+    coeffs.forEach(function(c) {
+      Object.keys(activeData[String(c)]).forEach(function(l) {
+        var ln = Number(l);
+        if (layers.indexOf(ln) === -1) layers.push(ln);
+      });
+    });
+    layers.sort(function(a,b){return a-b;});
+
+    var baseline = BASELINES[currentTask];
+
+    /* SVG dimensions */
+    var W = 720, H = 360;
+    var margin = {top: 16, right: 20, bottom: 44, left: 54};
+    var iw = W - margin.left - margin.right;
+    var ih = H - margin.top - margin.bottom;
+
+    var svg = d3.select(chartWrap).append('svg')
+      .attr('viewBox', '0 0 ' + W + ' ' + H)
+      .attr('width', '100%')
+      .style('display', 'block');
+
+    var g = svg.append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+    /* Scales */
+    var xScale = d3.scaleLinear().domain([d3.min(layers), d3.max(layers)]).range([0, iw]);
+
+    var allVals = [];
+    coeffs.forEach(function(c) {
+      if (disabledCoeffs[c]) return;
+      var cd = activeData[String(c)];
+      layers.forEach(function(l) {
+        var v = cd[String(l)];
+        if (v != null) allVals.push(v);
+      });
+    });
+    if (baseline != null) allVals.push(baseline);
+    var yMin = d3.min(allVals) - 0.01;
+    var yMax = d3.max(allVals) + 0.01;
+    var yScale = d3.scaleLinear().domain([yMin, yMax]).range([ih, 0]).nice();
+
+    /* Grid lines */
+    var yTicks = yScale.ticks(6);
+    yTicks.forEach(function(t) {
+      g.append('line')
+        .attr('x1', 0).attr('x2', iw)
+        .attr('y1', yScale(t)).attr('y2', yScale(t))
+        .attr('stroke', 'var(--border-color, rgba(0,0,0,0.08))')
+        .attr('stroke-dasharray', '2,3');
+    });
+
+    /* Baseline (only if defined for this task) */
+    if (baseline != null) {
+      g.append('line')
+        .attr('x1', 0).attr('x2', iw)
+        .attr('y1', yScale(baseline)).attr('y2', yScale(baseline))
+        .attr('stroke', 'var(--muted-color, #aaa)')
+        .attr('stroke-width', 1.5)
+        .attr('stroke-dasharray', '6,4');
+
+      g.append('text')
+        .attr('x', iw + 4).attr('y', yScale(baseline))
+        .attr('dy', '0.35em')
+        .attr('font-size', '10px')
+        .attr('fill', 'var(--muted-color, #aaa)')
+        .text('Base');
+    }
+
+    /* Line generator */
+    var line = d3.line()
+      .x(function(d){ return xScale(d.layer); })
+      .y(function(d){ return yScale(d.acc); })
+      .defined(function(d){ return d.acc != null; })
+      .curve(d3.curveMonotoneX);
+
+    /* Draw lines */
+    coeffs.forEach(function(c) {
+      if (disabledCoeffs[c]) return;
+      var cd = activeData[String(c)];
+      var pts = layers.map(function(l) {
+        return { layer: l, acc: cd[String(l)] || null };
+      }).filter(function(d){ return d.acc != null; });
+
+      var color = coeffColor(c);
+
+      g.append('path')
+        .datum(pts)
+        .attr('fill', 'none')
+        .attr('stroke', color)
+        .attr('stroke-width', 2)
+        .attr('stroke-linecap', 'round')
+        .attr('d', line)
+        .attr('opacity', 0.85);
+
+      /* Dots */
+      g.selectAll('.dot-c' + c)
+        .data(pts).enter()
+        .append('circle')
+        .attr('cx', function(d){ return xScale(d.layer); })
+        .attr('cy', function(d){ return yScale(d.acc); })
+        .attr('r', 2.5)
+        .attr('fill', color)
+        .attr('stroke', color)
+        .attr('stroke-width', 0.5);
+    });
+
+    /* Axes */
+    var xAxis = d3.axisBottom(xScale)
+      .ticks(13)
+      .tickFormat(function(d){ return d; });
+    g.append('g')
+      .attr('transform', 'translate(0,' + ih + ')')
+      .call(xAxis)
+      .selectAll('text')
+      .attr('fill', 'var(--tick-color, var(--text-color, #333))')
+      .attr('font-size', '11px');
+
+    g.append('text')
+      .attr('x', iw / 2).attr('y', ih + 36)
+      .attr('text-anchor', 'middle')
+      .attr('fill', 'var(--text-color, #333)')
+      .attr('font-size', '12px')
+      .attr('font-weight', 600)
+      .text('Layer');
+
+    var yAxis = d3.axisLeft(yScale)
+      .ticks(6)
+      .tickFormat(function(d){ return (d * 100).toFixed(1); });
+    g.append('g')
+      .call(yAxis)
+      .selectAll('text')
+      .attr('fill', 'var(--tick-color, var(--text-color, #333))')
+      .attr('font-size', '11px');
+
+    g.append('text')
+      .attr('transform', 'translate(-40,' + (ih / 2) + ') rotate(-90)')
+      .attr('text-anchor', 'middle')
+      .attr('fill', 'var(--text-color, #333)')
+      .attr('font-size', '12px')
+      .attr('font-weight', 600)
+      .text('Accuracy (%)');
+
+    /* Style axis lines */
+    svg.selectAll('.domain').attr('stroke', 'var(--border-color, rgba(0,0,0,0.15))');
+    svg.selectAll('.tick line').attr('stroke', 'var(--border-color, rgba(0,0,0,0.08))');
+
+    /* Hover interaction */
+    var hoverLine = g.append('line')
+      .attr('y1', 0).attr('y2', ih)
+      .attr('stroke', 'var(--text-color, #333)')
+      .attr('stroke-width', 0.8)
+      .attr('stroke-dasharray', '3,3')
+      .attr('opacity', 0);
+
+    var hoverRect = g.append('rect')
+      .attr('width', iw).attr('height', ih)
+      .attr('fill', 'none')
+      .attr('pointer-events', 'all');
+
+    hoverRect.on('mousemove', function(event) {
+      var coords = d3.pointer(event);
+      var mx = coords[0];
+      var layerVal = Math.round(xScale.invert(mx));
+      layerVal = Math.max(d3.min(layers), Math.min(d3.max(layers), layerVal));
+
+      hoverLine.attr('x1', xScale(layerVal)).attr('x2', xScale(layerVal)).attr('opacity', 1);
+
+      var html = '<div style="font-weight:600;margin-bottom:4px;">Layer ' + layerVal + '</div>';
+      var activeCoeffs = coeffs.filter(function(c){ return !disabledCoeffs[c]; });
+      activeCoeffs.forEach(function(c) {
+        var cd = activeData[String(c)];
+        var val = cd[String(layerVal)];
+        if (val != null) {
+          var deltaHtml = '';
+          if (baseline != null) {
+            var delta = val - baseline;
+            var sign = delta >= 0 ? '+' : '';
+            var dColor = delta >= 0 ? '#10b981' : '#ef4444';
+            deltaHtml = '<span style="color:' + dColor + ';font-size:11px;">' + sign + (delta * 100).toFixed(2) + '</span>';
+          }
+          html += '<div style="display:flex;align-items:center;gap:6px;">' +
+            '<span style="width:8px;height:8px;border-radius:50%;background:' + coeffColor(c) + ';flex-shrink:0;"></span>' +
+            '<span style="min-width:24px;">c=' + c + '</span>' +
+            '<span style="font-weight:600;">' + (val * 100).toFixed(2) + '%</span>' +
+            deltaHtml +
+            '</div>';
+        }
+      });
+
+      tooltip.innerHTML = html;
+      tooltip.style.opacity = '1';
+
+      var wrapRect = chartWrap.getBoundingClientRect();
+      var rootRect = root.getBoundingClientRect();
+      var tx = coords[0] + margin.left + 16;
+      var ty = coords[1] + margin.top - 10;
+      var tipW = tooltip.offsetWidth || 180;
+      if (tx + tipW > wrapRect.width) tx = coords[0] + margin.left - tipW - 12;
+      tooltip.style.left = tx + 'px';
+      tooltip.style.top = ty + 'px';
+    });
+
+    hoverRect.on('mouseleave', function() {
+      hoverLine.attr('opacity', 0);
+      tooltip.style.opacity = '0';
+    });
+  }
+
+  /* ── Legend ── */
+  function renderLegend() {
+    legend.innerHTML = '';
+    var activeData = getActiveData();
+    if (!activeData) return;
+    var coeffs = Object.keys(activeData).map(Number).sort(function(a,b){return a-b;});
+
+    coeffs.forEach(function(c) {
+      var item = document.createElement('span');
+      item.className = 'ls-legend-item' + (disabledCoeffs[c] ? ' dimmed' : '');
+      item.innerHTML = '<span class="ls-legend-swatch" style="background:' + coeffColor(c) + ';"></span>' +
+        '<span>' + c + '</span>';
+      item.addEventListener('click', function() {
+        disabledCoeffs[c] = !disabledCoeffs[c];
+        renderAll();
+      });
+      legend.appendChild(item);
+    });
+
+    /* Baseline legend entry (only if baseline exists) */
+    if (BASELINES[currentTask] != null) {
+      var bl = document.createElement('span');
+      bl.className = 'ls-legend-baseline';
+      bl.innerHTML = '<span class="ls-legend-dash"></span><span>Baseline (' + (BASELINES[currentTask] * 100).toFixed(1) + '%)</span>';
+      legend.appendChild(bl);
+    }
+  }
+
+  /* ── Render all ── */
+  function renderAll() {
+    renderTabs();
+    renderModeButtons();
+    renderChart();
+    renderLegend();
+  }
+
+  function waitForD3() {
+    if (window.d3 && typeof d3.select === 'function') {
+      renderAll();
+    } else {
+      setTimeout(waitForD3, 100);
+    }
+  }
+  waitForD3();
+})();
+</script>

app/src/content/embeds/norm-growth.html

@@ -0,0 +1,568 @@
+<!--
+  Residual Stream Norm Growth
+
+  Interactive D3.js line chart showing how residual stream norms
+  grow across transformer layers in Gemma 2 2B. Marks intervention
+  layers with colored dots and shaded coefficient-range zones.
+-->
+<div class="norm-growth"></div>
+<style>
+  .norm-growth {
+    position: relative;
+    font-family: system-ui, -apple-system, sans-serif;
+    width: 100%;
+  }
+
+  .norm-growth .chart-card {
+    background: var(--page-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 16px;
+    padding: 24px;
+  }
+
+  .norm-growth svg {
+    display: block;
+    width: 100%;
+  }
+
+  /* Axes */
+  .norm-growth .axis path { stroke: none; }
+  .norm-growth .axis line { stroke: var(--axis-color, #d1d5db); shape-rendering: crispEdges; }
+  .norm-growth .axis text { fill: var(--tick-color, #6b7280); font-size: 11px; }
+  .norm-growth .grid line { stroke: var(--grid-color, #e5e7eb); stroke-dasharray: 2, 2; }
+  .norm-growth .grid path { stroke: none; }
+  .norm-growth .axis-label {
+    fill: var(--text-color, #1f2937);
+    font-size: 12px;
+    font-weight: 600;
+  }
+
+  /* Zone labels */
+  .norm-growth .zone-label {
+    font-size: 10px;
+    font-weight: 600;
+    pointer-events: none;
+    text-anchor: middle;
+    dominant-baseline: hanging;
+    opacity: 0.85;
+  }
+
+  .norm-growth .zone-name {
+    font-size: 9px;
+    font-weight: 500;
+    pointer-events: none;
+    text-anchor: middle;
+    opacity: 0.6;
+  }
+
+  /* Dot labels on hover */
+  .norm-growth .dot-label {
+    font-size: 10px;
+    font-weight: 600;
+    text-anchor: middle;
+    pointer-events: none;
+  }
+
+  /* Legend */
+  .norm-growth .legend-bar {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 6px 16px;
+    margin-top: 16px;
+  }
+
+  .norm-growth .legend-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 11px;
+    color: var(--text-color, #1f2937);
+    white-space: nowrap;
+  }
+
+  .norm-growth .legend-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  /* Crosshair */
+  .norm-growth .crosshair {
+    stroke: var(--muted-color, #9ca3af);
+    stroke-width: 1;
+    stroke-dasharray: 3, 3;
+    opacity: 0.5;
+  }
+
+  .norm-growth .hover-dot {
+    stroke: var(--page-bg, #fff);
+    stroke-width: 2;
+  }
+
+  /* Dark mode overrides via CSS vars */
+  [data-theme="dark"] .norm-growth .grid line { stroke: var(--grid-color, #374151); }
+  [data-theme="dark"] .norm-growth .axis line { stroke: var(--axis-color, #4b5563); }
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) .norm-growth .grid line { stroke: var(--grid-color, #374151); }
+    :root:not([data-theme="light"]) .norm-growth .axis line { stroke: var(--axis-color, #4b5563); }
+  }
+
+  @media (max-width: 600px) {
+    .norm-growth .chart-card {
+      padding: 14px;
+    }
+  }
+</style>
+<script>
+(function() {
+  var ensureD3 = function(cb) {
+    if (window.d3 && typeof window.d3.select === 'function') return cb();
+    var s = document.getElementById('d3-cdn-script');
+    if (!s) {
+      s = document.createElement('script');
+      s.id = 'd3-cdn-script';
+      s.src = 'https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js';
+      document.head.appendChild(s);
+    }
+    var onReady = function() {
+      if (window.d3 && typeof window.d3.select === 'function') cb();
+    };
+    s.addEventListener('load', onReady, { once: true });
+    if (window.d3) onReady();
+  };
+
+  var bootstrap = function() {
+    var candidates = Array.from(document.querySelectorAll('.norm-growth'))
+      .filter(function(el) { return !el.dataset.mounted; });
+    var container = candidates[candidates.length - 1];
+    if (!container) return;
+    container.dataset.mounted = 'true';
+    container.style.position = 'relative';
+
+    var d3 = window.d3;
+
+    /* ── Data ── */
+    /* Values read from paper Figure norm.png (b) Residual Stream L2 Norm */
+    var data = [
+      {layer: 0, norm: 42},
+      {layer: 1, norm: 44},
+      {layer: 2, norm: 47},
+      {layer: 3, norm: 50},
+      {layer: 4, norm: 54},
+      {layer: 5, norm: 58},
+      {layer: 6, norm: 63},
+      {layer: 7, norm: 68},
+      {layer: 8, norm: 75},
+      {layer: 9, norm: 82},
+      {layer: 10, norm: 92},
+      {layer: 11, norm: 105},
+      {layer: 12, norm: 118},
+      {layer: 13, norm: 132},
+      {layer: 14, norm: 148},
+      {layer: 15, norm: 165},
+      {layer: 16, norm: 180},
+      {layer: 17, norm: 195},
+      {layer: 18, norm: 212},
+      {layer: 19, norm: 228},
+      {layer: 20, norm: 248},
+      {layer: 21, norm: 275},
+      {layer: 22, norm: 310},
+      {layer: 23, norm: 370},
+      {layer: 24, norm: 500},
+      {layer: 25, norm: 1100}
+    ];
+
+    /* Intervention layers */
+    var interventions = [
+      { layer: 5,  label: 'L5 (BBQ)',        color: '#EC4899', benchmark: 'BBQ' },
+      { layer: 10, label: 'L10',             color: '#06B6D4', benchmark: '' },
+      { layer: 12, label: 'L12 (XSTest)',    color: '#F97316', benchmark: 'XSTest' },
+      { layer: 20, label: 'L20',             color: '#3B82F6', benchmark: '' },
+      { layer: 21, label: 'L21 (HarmBench)', color: '#7C3AED', benchmark: 'HarmBench' },
+      { layer: 24, label: 'L24 (MMLU/GSM8K)',color: '#10B981', benchmark: 'MMLU/GSM8K' }
+    ];
+
+    /* Coefficient range zones */
+    var zones = [
+      { x0: 5,  x1: 10, fill: '#10B981', label: 'c = 10-20',  name: 'Low layers' },
+      { x0: 15, x1: 20, fill: '#F59E0B', label: 'c = 30-60',  name: 'Mid layers' },
+      { x0: 22, x1: 25, fill: '#EF4444', label: 'c = 60-100', name: 'Deep layers' }
+    ];
+
+    var LINE_COLOR = '#4F46E5';
+    var margin = { top: 20, right: 28, bottom: 54, left: 56 };
+    var hasAnimated = false;
+
+    /* ── Tooltip ── */
+    var tip = document.createElement('div');
+    Object.assign(tip.style, {
+      position: 'absolute', top: '0', left: '0',
+      transform: 'translate(-9999px, -9999px)',
+      pointerEvents: 'none', padding: '10px 14px',
+      borderRadius: '10px', fontSize: '12px', lineHeight: '1.5',
+      border: '1px solid var(--border-color, #e5e5e5)',
+      background: 'var(--surface-bg, #f9fafb)', color: 'var(--text-color, #1f2937)',
+      boxShadow: '0 6px 28px rgba(0,0,0,.18)',
+      backdropFilter: 'saturate(1.12) blur(10px)',
+      WebkitBackdropFilter: 'saturate(1.12) blur(10px)',
+      opacity: '0', transition: 'opacity .12s ease',
+      zIndex: '1000', maxWidth: '260px'
+    });
+    var tipInner = document.createElement('div');
+    tip.appendChild(tipInner);
+    container.appendChild(tip);
+
+    function showTip(event, html) {
+      tipInner.innerHTML = html;
+      var coords = d3.pointer(event, container);
+      var tipRect = tip.getBoundingClientRect();
+      var cx = container.getBoundingClientRect().width;
+      var cy = container.getBoundingClientRect().height;
+      var tx = coords[0] + 16;
+      var ty = coords[1] - 12;
+      if (tx + (tipRect.width || 200) > cx - 10) tx = coords[0] - (tipRect.width || 200) - 16;
+      if (ty < 10) ty = coords[1] + 20;
+      if (ty + (tipRect.height || 80) > cy - 10) ty = coords[1] - (tipRect.height || 80) - 10;
+      tip.style.transform = 'translate(' + Math.round(tx) + 'px,' + Math.round(ty) + 'px)';
+      tip.style.opacity = '1';
+    }
+    function hideTip() {
+      tip.style.opacity = '0';
+      tip.style.transform = 'translate(-9999px, -9999px)';
+    }
+
+    /* ── DOM structure ── */
+    var card = document.createElement('div');
+    card.className = 'chart-card';
+    container.appendChild(card);
+
+    var svgWrap = document.createElement('div');
+    svgWrap.style.position = 'relative';
+    card.appendChild(svgWrap);
+
+    var svg = d3.select(svgWrap).append('svg');
+    var defs = svg.append('defs');
+
+    /* Gradient for area fill */
+    var gradId = 'norm-area-grad-' + Math.random().toString(36).slice(2);
+    var grad = defs.append('linearGradient')
+      .attr('id', gradId)
+      .attr('x1', '0').attr('y1', '0')
+      .attr('x2', '0').attr('y2', '1');
+    grad.append('stop').attr('offset', '0%').attr('stop-color', LINE_COLOR).attr('stop-opacity', 0.25);
+    grad.append('stop').attr('offset', '100%').attr('stop-color', LINE_COLOR).attr('stop-opacity', 0.02);
+
+    var gRoot = svg.append('g');
+    var gGrid = gRoot.append('g').attr('class', 'grid');
+    var gZones = gRoot.append('g').attr('class', 'zones');
+    var gArea = gRoot.append('g').attr('class', 'area-layer');
+    var gLine = gRoot.append('g').attr('class', 'line-layer');
+    var gDots = gRoot.append('g').attr('class', 'dots-layer');
+    var gLabels = gRoot.append('g').attr('class', 'labels-layer').style('pointer-events', 'none');
+    var gHover = gRoot.append('g').attr('class', 'hover-layer').style('pointer-events', 'none');
+    var gAxes = gRoot.append('g').attr('class', 'axes');
+
+    /* Legend */
+    var legendBar = document.createElement('div');
+    legendBar.className = 'legend-bar';
+    interventions.forEach(function(iv) {
+      var item = document.createElement('span');
+      item.className = 'legend-item';
+      var dot = document.createElement('span');
+      dot.className = 'legend-dot';
+      dot.style.background = iv.color;
+      var txt = document.createElement('span');
+      txt.textContent = iv.label;
+      item.appendChild(dot);
+      item.appendChild(txt);
+      legendBar.appendChild(item);
+    });
+    card.appendChild(legendBar);
+
+    /* ── Render ── */
+    function render(animate) {
+      var width = container.clientWidth || 700;
+      var height = Math.max(300, Math.round(width / 2.2));
+      svg.attr('width', width).attr('height', height)
+         .attr('viewBox', '0 0 ' + width + ' ' + height)
+         .attr('preserveAspectRatio', 'xMidYMid meet');
+      gRoot.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+      var innerW = width - margin.left - margin.right;
+      var innerH = height - margin.top - margin.bottom;
+
+      var xScale = d3.scaleLinear().domain([0, 25]).range([0, innerW]);
+      var yScale = d3.scaleLinear().domain([0, 1200]).range([innerH, 0]).nice();
+
+      /* Clear */
+      gGrid.selectAll('*').remove();
+      gZones.selectAll('*').remove();
+      gArea.selectAll('*').remove();
+      gLine.selectAll('*').remove();
+      gDots.selectAll('*').remove();
+      gLabels.selectAll('*').remove();
+      gHover.selectAll('*').remove();
+      gAxes.selectAll('*').remove();
+
+      /* Grid */
+      gGrid.append('g').attr('class', 'grid')
+        .call(d3.axisLeft(yScale).tickSize(-innerW).tickFormat(''))
+        .call(function(g) { g.select('.domain').remove(); });
+
+      /* Shaded coefficient zones */
+      zones.forEach(function(z) {
+        var zx = xScale(z.x0);
+        var zw = xScale(z.x1) - xScale(z.x0);
+
+        gZones.append('rect')
+          .attr('x', zx).attr('y', 0)
+          .attr('width', zw).attr('height', innerH)
+          .attr('fill', z.fill)
+          .attr('opacity', 0.07)
+          .attr('rx', 4).attr('ry', 4);
+
+        /* Zone label at top */
+        gZones.append('text')
+          .attr('class', 'zone-label')
+          .attr('x', zx + zw / 2)
+          .attr('y', 6)
+          .attr('fill', z.fill)
+          .text(z.label);
+
+        gZones.append('text')
+          .attr('class', 'zone-name')
+          .attr('x', zx + zw / 2)
+          .attr('y', 34)
+          .attr('fill', z.fill)
+          .text(z.name);
+      });
+
+      /* Area fill */
+      var areaGen = d3.area()
+        .x(function(d) { return xScale(d.layer); })
+        .y0(innerH)
+        .y1(function(d) { return yScale(d.norm); })
+        .curve(d3.curveMonotoneX);
+
+      gArea.append('path')
+        .attr('d', areaGen(data))
+        .attr('fill', 'url(#' + gradId + ')');
+
+      /* Line */
+      var lineGen = d3.line()
+        .x(function(d) { return xScale(d.layer); })
+        .y(function(d) { return yScale(d.norm); })
+        .curve(d3.curveMonotoneX);
+
+      var linePath = gLine.append('path')
+        .attr('d', lineGen(data))
+        .attr('fill', 'none')
+        .attr('stroke', LINE_COLOR)
+        .attr('stroke-width', 2.5)
+        .attr('stroke-linejoin', 'round')
+        .attr('stroke-linecap', 'round');
+
+      /* Animate line draw-in */
+      if (animate) {
+        var totalLen = linePath.node().getTotalLength();
+        linePath
+          .attr('stroke-dasharray', totalLen)
+          .attr('stroke-dashoffset', totalLen)
+          .transition().duration(1400).ease(d3.easeCubicOut)
+          .attr('stroke-dashoffset', 0);
+
+        /* Fade-in area */
+        gArea.select('path')
+          .attr('opacity', 0)
+          .transition().delay(400).duration(800).ease(d3.easeCubicOut)
+          .attr('opacity', 1);
+      }
+
+      /* Intervention dots */
+      var ivMap = {};
+      interventions.forEach(function(iv) { ivMap[iv.layer] = iv; });
+
+      interventions.forEach(function(iv) {
+        var pt = data.find(function(d) { return d.layer === iv.layer; });
+        if (!pt) return;
+        var cx = xScale(pt.layer);
+        var cy = yScale(pt.norm);
+
+        /* Outer glow ring */
+        gDots.append('circle')
+          .attr('cx', cx).attr('cy', cy)
+          .attr('r', 8)
+          .attr('fill', iv.color)
+          .attr('opacity', 0.15);
+
+        /* Main dot */
+        var dot = gDots.append('circle')
+          .attr('cx', cx).attr('cy', cy)
+          .attr('r', 5)
+          .attr('fill', iv.color)
+          .attr('stroke', 'var(--page-bg, #fff)')
+          .attr('stroke-width', 2)
+          .style('cursor', 'pointer');
+
+        if (animate) {
+          dot.attr('r', 0)
+            .transition().delay(600 + iv.layer * 40).duration(400).ease(d3.easeBackOut)
+            .attr('r', 5);
+        }
+
+        /* Persistent layer label for key benchmarks */
+        if (iv.benchmark) {
+          var labelY = cy - 14;
+          /* If label would overlap the top, push below */
+          if (labelY < 24) labelY = cy + 18;
+
+          gLabels.append('text')
+            .attr('class', 'dot-label')
+            .attr('x', cx).attr('y', labelY)
+            .attr('fill', iv.color)
+            .text(iv.label)
+            .attr('opacity', animate ? 0 : 0.85)
+            .transition().delay(animate ? 900 + iv.layer * 40 : 0).duration(400)
+            .attr('opacity', 0.85);
+        }
+      });
+
+      /* Axes */
+      gAxes.append('g').attr('class', 'axis x-axis')
+        .attr('transform', 'translate(0,' + innerH + ')')
+        .call(d3.axisBottom(xScale).ticks(Math.min(13, Math.floor(innerW / 50))).tickFormat(function(d) { return 'L' + d; }));
+
+      gAxes.append('g').attr('class', 'axis y-axis')
+        .call(d3.axisLeft(yScale).ticks(6));
+
+      /* Axis labels */
+      gAxes.append('text').attr('class', 'axis-label')
+        .attr('text-anchor', 'middle')
+        .attr('x', innerW / 2).attr('y', innerH + 42)
+        .text('Transformer Layer');
+
+      gAxes.append('text').attr('class', 'axis-label')
+        .attr('text-anchor', 'middle')
+        .attr('transform', 'translate(-42,' + (innerH / 2) + ') rotate(-90)')
+        .text('Residual Stream Norm');
+
+      /* ── Hover / crosshair ── */
+      var crosshairV = gHover.append('line').attr('class', 'crosshair').style('display', 'none');
+      var crosshairH = gHover.append('line').attr('class', 'crosshair').style('display', 'none');
+      var hoverDot = gHover.append('circle').attr('class', 'hover-dot')
+        .attr('r', 5).attr('fill', LINE_COLOR).style('display', 'none');
+
+      var hoverRect = svg.selectAll('.hover-rect').data([0]).join('rect')
+        .attr('class', 'hover-rect')
+        .attr('x', margin.left).attr('y', margin.top)
+        .attr('width', innerW).attr('height', innerH)
+        .attr('fill', 'transparent')
+        .style('cursor', 'crosshair');
+
+      var bisect = d3.bisector(function(d) { return d.layer; }).left;
+
+      hoverRect.on('mousemove', function(event) {
+        var coords = d3.pointer(event, gRoot.node());
+        var mx = coords[0];
+        var layerVal = xScale.invert(mx);
+        layerVal = Math.max(0, Math.min(25, layerVal));
+
+        /* Find closest data point */
+        var idx = bisect(data, layerVal);
+        if (idx >= data.length) idx = data.length - 1;
+        if (idx > 0) {
+          var d0 = data[idx - 1];
+          var d1 = data[idx];
+          if (Math.abs(layerVal - d0.layer) < Math.abs(layerVal - d1.layer)) idx = idx - 1;
+        }
+        var pt = data[idx];
+
+        var cx = xScale(pt.layer);
+        var cy = yScale(pt.norm);
+
+        crosshairV.style('display', null)
+          .attr('x1', cx).attr('x2', cx)
+          .attr('y1', 0).attr('y2', innerH);
+
+        crosshairH.style('display', null)
+          .attr('x1', 0).attr('x2', innerW)
+          .attr('y1', cy).attr('y2', cy);
+
+        hoverDot.style('display', null)
+          .attr('cx', cx).attr('cy', cy);
+
+        /* Build tooltip */
+        var html = '<div style="font-weight:700;margin-bottom:4px">Layer ' + pt.layer + '</div>';
+        html += '<div style="font-size:16px;font-weight:700;color:' + LINE_COLOR + '">Norm: ' + pt.norm + '</div>';
+
+        /* Check if this is an intervention layer */
+        var iv = ivMap[pt.layer];
+        if (iv) {
+          html += '<div style="margin-top:6px;display:flex;align-items:center;gap:6px">';
+          html += '<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:' + iv.color + '"></span>';
+          html += '<span style="font-weight:600;color:' + iv.color + '">' + iv.label + '</span>';
+          html += '</div>';
+        }
+
+        /* Check if in a zone */
+        zones.forEach(function(z) {
+          if (pt.layer >= z.x0 && pt.layer <= z.x1) {
+            html += '<div style="margin-top:4px;font-size:11px;color:var(--muted-color, #6b7280)">Coefficient range: <strong>' + z.label + '</strong></div>';
+          }
+        });
+
+        /* Growth rate from previous layer */
+        if (idx > 0) {
+          var prevNorm = data[idx - 1].norm;
+          var growth = ((pt.norm - prevNorm) / prevNorm * 100).toFixed(1);
+          html += '<div style="margin-top:3px;font-size:11px;color:var(--muted-color, #6b7280)">Growth from L' + data[idx - 1].layer + ': +' + growth + '%</div>';
+        }
+
+        showTip(event, html);
+      });
+
+      hoverRect.on('mouseleave', function() {
+        crosshairV.style('display', 'none');
+        crosshairH.style('display', 'none');
+        hoverDot.style('display', 'none');
+        hideTip();
+      });
+    }
+
+    /* ── Init ── */
+    render(false);
+
+    /* IntersectionObserver for initial scroll-in animation */
+    if (window.IntersectionObserver) {
+      var obs = new IntersectionObserver(function(entries) {
+        entries.forEach(function(entry) {
+          if (entry.isIntersecting && !hasAnimated) {
+            hasAnimated = true;
+            render(true);
+            obs.disconnect();
+          }
+        });
+      }, { threshold: 0.15 });
+      obs.observe(container);
+    } else {
+      hasAnimated = true;
+      render(true);
+    }
+
+    /* Resize */
+    if (window.ResizeObserver) {
+      new ResizeObserver(function() { if (hasAnimated) render(false); }).observe(container);
+    } else {
+      window.addEventListener('resize', function() { render(false); });
+    }
+  };
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function() { ensureD3(bootstrap); }, { once: true });
+  } else {
+    ensureD3(bootstrap);
+  }
+})();
+</script>