embed and style improvements

app/src/components/Hero.astro

@@ -102,9 +102,9 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
 <section class="hero">
   <h1 class="hero-title" set:html={title} />
   <div class="hero-banner">
-
-    <Image src={eiffel_tower_llama} alt="A llama photobombing the Eiffel Tower" width="700"/>
-
+    <div class="hero-banner-image-wrapper">
+      <Image src={eiffel_tower_llama} alt="A llama photobombing the Eiffel Tower" width="700"/>
+    </div>
     {description && <p class="hero-desc">{description}</p>}
   </div>
 </section>
@@ -374,6 +374,29 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
     align-items: center;
     gap: 16px;
   }
+  .hero-banner-image-wrapper {
+    width: 100%;
+    max-width: 700px;
+    height: 320px;
+    border-radius: 16px;
+    overflow: hidden;
+    display: block;
+  }
+  .hero-banner-image-wrapper :global(.ri-root),
+  .hero-banner-image-wrapper :global(.ri-root img) {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 16px;
+    display: block;
+  }
+  .hero-banner-image-wrapper :global(img) {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 16px;
+    display: block;
+  }
   .hero-desc {
     color: var(--muted-color);
     font-style: italic;

app/src/components/HtmlEmbed.astro

@@ -1,15 +1,44 @@
 ---
-interface Props { src: string; title?: string; desc?: string; frameless?: boolean; align?: 'left' | 'center' | 'right'; id?: string, data?: string | string[], config?: any }
-const { src, title, desc, frameless = false, align = 'left', id, data, config } = Astro.props as Props;
+interface Props {
+  src: string;
+  title?: string;
+  desc?: string;
+  caption?: string;
+  frameless?: boolean;
+  wide?: boolean;
+  align?: "left" | "center" | "right";
+  id?: string;
+  data?: string | string[];
+  config?: any;
+}
+const {
+  src,
+  title,
+  desc,
+  caption,
+  frameless = false,
+  wide = 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>;
+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(/^\/*/, '');
+  const needle = requested.replace(/^\/*/, "");
   for (const [key, html] of Object.entries(embeds)) {
-    if (key.endsWith('/' + needle) || key.endsWith('/' + needle.replace(/^embeds\//, ''))) {
+    if (
+      key.endsWith("/" + needle) ||
+      key.endsWith("/" + needle.replace(/^embeds\//, ""))
+    ) {
       return html;
     }
   }
@@ -18,66 +47,235 @@ function resolveFragment(requested: string): string | 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);
+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;
+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 && <figcaption class="html-embed__desc" style={`text-align:${align}`} set:html={desc}></figcaption>}
-  </figure>
- ) : (
-  <div><!-- Fragment not found: {src} --></div>
- ) }
-
 
+{
+  html ? (
+    <figure class={`html-embed${wide ? " html-embed--wide" : ""}`} 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);
+  // Uses IntersectionObserver for lazy loading - only executes when embed is visible
+  (() => {
+    const scriptEl = document.currentScript;
+    const figure = scriptEl?.previousElementSibling?.closest(".html-embed");
+    const mount = scriptEl ? scriptEl.previousElementSibling : null;
+
+    if (!mount || !figure) return;
+
+    let executed = false;
+    const execute = () => {
+      if (executed || !mount) return;
+      executed = true;
+
+      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);
+          }
         }
+      });
+
+      // Mark as loaded
+      figure.classList.add("html-embed--loaded");
+    };
+
+    // Check if IntersectionObserver is supported
+    if ("IntersectionObserver" in window) {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting && !executed) {
+              observer.disconnect();
+              // Small delay to ensure DOM is ready
+              if (document.readyState === "loading") {
+                document.addEventListener("DOMContentLoaded", execute, {
+                  once: true,
+                });
+              } else {
+                // Use requestAnimationFrame to ensure execution after DOM is fully ready
+                requestAnimationFrame(() => {
+                  setTimeout(execute, 0);
+                });
+              }
+            }
+          });
+        },
+        {
+          // Start loading when element is 100px away from viewport
+          rootMargin: "100px",
+          threshold: 0.01,
+        },
+      );
+
+      observer.observe(figure);
+
+      // Fallback: if still not loaded after 3 seconds, load anyway (for edge cases)
+      setTimeout(() => {
+        if (!executed) {
+          observer.disconnect();
+          if (document.readyState === "loading") {
+            document.addEventListener("DOMContentLoaded", execute, {
+              once: true,
+            });
+          } else {
+            requestAnimationFrame(() => {
+              setTimeout(execute, 0);
+            });
+          }
+        }
+      }, 3000);
+    } else {
+      // Fallback for browsers without IntersectionObserver support
+      if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", execute, { once: true });
+      } else {
+        requestAnimationFrame(() => {
+          setTimeout(execute, 0);
+        });
       }
-    });
-  };
-  // 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>
+    }
+  })();
+</script>
 
 <style is:global>
-  .html-embed { margin: 0 0 var(--block-spacing-y);
+  .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; 
+
+  /* Wide mode - same styling as Wide.astro component */
+  .html-embed--wide {
+    /* Target up to ~1100px while staying within viewport minus page gutters */
+    width: min(1100px, 100vw - var(--content-padding-x) * 4);
+    margin-left: 50%;
+    transform: translateX(-50%);
+    padding: calc(var(--content-padding-x) * 4);
+    border-radius: calc(var(--button-radius) * 4);
+    background-color: var(--page-bg);
+    -webkit-mask: linear-gradient(
+        to right,
+        transparent 0px,
+        black 20px,
+        black calc(100% - 20px),
+        transparent 100%
+      ),
+      linear-gradient(
+        to bottom,
+        transparent 0px,
+        black 20px,
+        black calc(100% - 20px),
+        transparent 100%
+      );
+    -webkit-mask-composite: intersect;
+    mask: linear-gradient(
+        to right,
+        transparent 0px,
+        black 20px,
+        black calc(100% - 20px),
+        transparent 100%
+      ),
+      linear-gradient(
+        to bottom,
+        transparent 0px,
+        black 20px,
+        black calc(100% - 20px),
+        transparent 100%
+      );
+    mask-composite: intersect;
+  }
+
+  .html-embed--wide > * {
+    margin-bottom: 0 !important;
+  }
+
+  /* Responsive adjustments for wide mode */
+  @media (max-width: 1100px) {
+    .html-embed--wide {
+      width: 100%;
+      margin-left: 0;
+      margin-right: 0;
+      padding: 0;
+      transform: none;
+    }
+  }
+
+  .html-embed__title {
+    text-align: left;
+    font-weight: 600;
+    font-size: 0.95rem;
     color: var(--text-color);
     margin: 0;
     padding: 0;
@@ -89,7 +287,7 @@ const htmlWithId = id && html ? html.replace(/<div class="([^"]*)"[^>]*>/, `<div
     z-index: var(--z-elevated);
   }
   .html-embed__card {
-    background: var(--code-bg);
+    background-color: var(--surface-bg);
     border: 1px solid var(--border-color);
     border-radius: 10px;
     padding: 24px;
@@ -98,14 +296,14 @@ const htmlWithId = id && html ? html.replace(/<div class="([^"]*)"[^>]*>/, `<div
   }
   .html-embed__card.is-frameless {
     background: transparent;
-    border-color: transparent;
+    border: none;
     padding: 0;
   }
-  .html-embed__desc { 
-    text-align: left; 
-    font-size: 0.9rem; 
-    color: var(--muted-color); 
-    margin: 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;
@@ -114,63 +312,255 @@ const htmlWithId = id && html ? html.replace(/<div class="([^"]*)"[^>]*>/, `<div
     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; }
+  .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:not(.is-frameless) { background: #12151b; border-color: rgba(255,255,255,.15); }
   [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 .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,.35) !important; }
-  [data-theme="dark"] .html-embed__card .gridlayer path { stroke: rgba(255,255,255,.15) !important; }
-  [data-theme="dark"] .html-embed__card .legend rect.bg { fill: rgba(0,0,0,.25) !important; stroke: rgba(255,255,255,.2) !important; }
-  [data-theme="dark"] .html-embed__card .hoverlayer .bg { fill: rgba(0,0,0,.8) !important; stroke: rgba(255,255,255,.2) !important; }
-  [data-theme="dark"] .html-embed__card .colorbar .cbbg { fill: rgba(0,0,0,.25) !important; stroke: rgba(255,255,255,.2) !important; }
+  [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,
+    .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; }
+    .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; }
+    .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,
+    .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; }
+    .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 all banners when printing */
+    .html-embed .d3-galaxy,
+    .html-embed .threejs-galaxy,
+    .html-embed .d3-latent-space,
+    .html-embed .neural-flow,
+    .html-embed .molecular-space,
+    .html-embed [class*="banner"] {
+      width: 100% !important;
+      max-width: 980px !important;
+      margin-left: auto !important;
+      margin-right: auto !important;
+    }
+    /* Better rendering for d3-loss-curves when printing */
+    .html-embed .d3-loss-curves {
+      width: 100% !important;
+      height: auto !important;
+      min-height: 300px !important;
+      margin-left: auto !important;
+      margin-right: auto !important;
+      overflow: visible !important;
+    }
+    .html-embed .d3-loss-curves svg {
+      width: 100% !important;
+      height: auto !important;
+      max-height: 500px !important;
+    }
+    /* Ensure legend is visible in print */
+    .html-embed .d3-loss-curves .legend {
+      position: relative !important;
+      display: flex !important;
+      flex-direction: column !important;
+      align-items: flex-start !important;
+      gap: 4px !important;
+      margin-top: 10px !important;
+      bottom: auto !important;
+      left: auto !important;
+      max-width: 100% !important;
+    }
+    /* Hide annotation in print */
+    .html-embed .d3-loss-curves .annotation {
+      display: none !important;
+    }
   }
 </style>
-
-

app/src/content/article.mdx

@@ -11,7 +11,6 @@ affiliations:
   - name: "Hugging Face"
     url: "https://huggingface.co"
 published: "Nov. 18, 2025"
-doi: 10.1234/abcd.efgh
 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> with the source available on <a href="https://huggingface.co/spaces/tfrere/research-article-template" target="_blank" rel="noopener noreferrer">Hugging Face</a>, unless noted otherwise.
   Figures reused from other sources are excluded and marked in their captions (“Figure from …”).
@@ -19,7 +18,7 @@ tags:
   - research
   - template
 tableOfContentsAutoCollapse: true
-pdfProOnly: false
+pdfProOnly: true
 ---
 
 import Image from '../components/Image.astro'
@@ -289,9 +288,9 @@ import activations_magnitude from './assets/image/activations_magnitude.png'
 
 As we can see, activation norms roughly grow linearly across layers, with a norm being approximately equal to the layer index.
 If we want to look for a steering coefficient that is typically less than the original activation vector norm at layer $l$,
-we can define a reduced coefficient $\hat{\alpha_l} = (\alpha_l / l)$, and restrict our search to
+we can define a reduced coefficient $\hat{\alpha}_l = (\alpha_l / l)$, and restrict our search to
 $$
-\hat{\alpha_l} \in [0,1]
+\hat{\alpha}_l \in [0,1]
 $$
 
 
@@ -302,9 +301,7 @@ For a first grid search, we used the set of 50 prompts, temperature was set to 1
 The image below shows the results for each of our six metrics of the sweep over $\alpha$ for the feature 21576 in layer 15.
 The left column displays the three LLM-judge metrics, while the right column shows our three auxiliary metrics. On those charts, we can observe several regimes corresponding to essentially three ranges of the steering coefficient.
 
-import sweep_1D_analysis from './assets/image/sweep_1D_all_metrics.png'
-
-<Image src={sweep_1D_analysis} alt="1D sweep of steering coefficient" caption="1D sweep of steering coefficient for a single steering vector, with six metrics monitored." />
+<HtmlEmbed src="d3-sweep-1d-metrics.html" data="stats_L15F21576.csv" />
 
 First of all, **for low values of the steering coefficient $\alpha < 5$, the steered model behaves almost as the reference model**:
 the concept inclusion metric is zero, instruction following and fluency are close to 2.0, equivalent to the reference model.
@@ -324,9 +321,7 @@ Inspection of the answers shows that the model is producing repetitive patterns
 
 Those metrics show that we face a fundamental trade-off: stronger steering increases concept inclusion but degrades fluency, and finding the balance is the challenge. This is further complicated by the very large standard deviation: for a given steering coefficient, some prompts lead to good results while others completely fail. Even though all metrics somehow tell the same story, we have to decide how to select the optimal steering coefficient. We could simply use the mean of the three LLM judge metrics, but we can easily see that this would lead us to select the unsteered model (low $\alpha$) as the best model, which is not what we want. For that, we can use **the harmonic mean criterion proposed by AxBench**.
 
-import harmonic_mean_curve from './assets/image/sweep_1D_harmonic_mean.png'
-
-<Image src={harmonic_mean_curve} alt="Arithmetic (left) and harmonic (right) mean of the three LLM-judge metrics as a function of steering coefficient." caption="Arithmetic (left) and harmonic (right) mean of the three LLM-judge metrics as a function of steering coefficient." />
+<HtmlEmbed src="d3-harmonic-mean.html" data="stats_L15F21576.csv" />
 
 First, the results show the harmonic mean curve is very noisy. Despite the fact that we used 50 prompts to evaluate each point, the inherent discreteness of the LLM-judge metrics and the stochasticity of LLM generation leads to a noisy harmonic mean. This is something to keep in mind when trying to optimize steering coefficients.
 
@@ -345,7 +340,7 @@ Note that the harmonic mean we obtained here (about 0.45) is higher than the one
 
 Using the optimal steering coefficient $\alpha=8.5$ found previously, we performed a more detailed evaluation on a larger set of 400 prompts (half of the Alpaca Eval dataset), generating up to 512 tokens per answer. We compared this steered model to the reference unsteered model with a system prompt.
 
-<HtmlEmbed src="d3-evaluation1-naive.html" data="evaluation_summary.json" />
+<HtmlEmbed src="d3-evaluation-configurable.html" data="evaluation_summary.json" config="naive" />
 
 We can see that on all metrics, **the baseline prompted model significantly outperforms the steered model.** This is consistent with the findings by AxBench that steering with SAEs is not very effective. However, our numbers are not as dire as theirs. We can see an average score in concept inclusion compared to the reference model (1.03), while maintaining a reasonable level of instruction following (1.35). However, this comes at the price of a fluency drop (0.78 vs. 1.55 for the prompted model), as fluency is impaired by repetitions (0.27) or awkward phrasing.
 
@@ -363,9 +358,7 @@ Overall, the harmonic mean of the three LLM-judge metrics is 1.67 for the prompt
 
 From the results of this sweep, we can compute the correlations between our six metrics to see how they relate to each other.
 
-import metrics_correlation from './assets/image/sweep_1D_correlation_matrix.png'
-
-<Image src={metrics_correlation} alt="Correlation matrix between metrics" caption="Correlation matrix between metrics." />
+<HtmlEmbed src="d3-correlation-matrix.html" caption="Correlation matrix between metrics." />
 
 The matrix above shows several interesting correlations.
 First, **LLM instruction following and fluency are highly correlated** (0.8), which is not surprising as both metrics
@@ -399,7 +392,7 @@ This clamping approach was the one used by Anthropic in their Golden Gate demo,
 
 We tested the impact of clamping on the same steering vector at the optimal steering coefficient found previously ($\alpha=8.5$). We evaluated the model on the same set of prompts with 20 samples each and a maximum output length of 512 tokens.
 
-<HtmlEmbed src="d3-evaluation2-clamp.html" data="evaluation_summary.json" />
+<HtmlEmbed src="d3-evaluation-configurable.html" data="evaluation_summary.json" config="clamp" />
 
 We can see that **clamping has a positive effect on concept inclusion (both from the LLM score and the explicit reference), while not harming the other metrics**.
 
@@ -483,7 +476,7 @@ We performed optimization using 2 features (from layer 15 and layer 19) and then
 
 Results are shown below and compared to single-layer steering.
 
-<HtmlEmbed src="d3-evaluation3-multi.html" data="evaluation_summary.json" />
+<HtmlEmbed src="d3-evaluation-configurable.html" data="evaluation_summary.json" config="multi" />
 
 As we can see on the chart, steering 2 or even 8 features simultaneously leads to **only marginal improvements** compared to steering only one feature. Although fluency and instruction following are improved, concept inclusion slightly decreases, leading to a harmonic mean that is only marginally better than single-layer steering.
 

app/src/content/assets/data/stats_L15F21576.csv

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

app/src/content/assets/data/sweep_1d_metrics.csv

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

app/src/content/embeds/d3-correlation-matrix.html

@@ -0,0 +1,466 @@
+<div class="d3-correlation-matrix"></div>
+<style>
+  .d3-correlation-matrix {
+    position: relative;
+    overflow: visible;
+  }
+  .d3-correlation-matrix .chart-card {
+    background: var(--surface-bg);
+    border: none;
+    border-radius: 10px;
+    padding: 0;
+    overflow: visible;
+  }
+  .d3-correlation-matrix .chart-card svg {
+    overflow: visible;
+  }
+  .d3-correlation-matrix .axis-label-x {
+    fill: var(--text-color);
+    font-size: 11px;
+    font-weight: 700;
+  }
+  .d3-correlation-matrix .axis-label-x text {
+    word-break: break-word;
+    white-space: normal;
+  }
+  .d3-correlation-matrix .axis-label {
+    fill: var(--text-color);
+    font-size: 11px;
+    font-weight: 700;
+  }
+  .d3-correlation-matrix .cell-text {
+    fill: var(--muted-color);
+    font-size: 11px;
+    pointer-events: none;
+  }
+  .d3-correlation-matrix .colorbar-label {
+    fill: var(--text-color);
+    font-size: 10px;
+    font-weight: 600;
+  }
+</style>
+<script>
+  (() => {
+    // Load D3 from CDN once
+    const ensureD3 = (cb) => {
+      if (window.d3 && typeof window.d3.select === 'function') return cb();
+      let 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);
+      }
+      const onReady = () => { if (window.d3 && typeof window.d3.select === 'function') cb(); };
+      s.addEventListener('load', onReady, { once: true });
+      if (window.d3) onReady();
+    };
+
+    const bootstrap = () => {
+      const scriptEl = document.currentScript;
+      let container = scriptEl ? scriptEl.previousElementSibling : null;
+      if (!(container && container.classList && container.classList.contains('d3-correlation-matrix'))){
+        const cs = Array.from(document.querySelectorAll('.d3-correlation-matrix')).filter(el => !(el.dataset && el.dataset.mounted === 'true'));
+        container = cs[cs.length - 1] || null;
+      }
+      if (!container) return;
+      if (container.dataset) {
+        if (container.dataset.mounted === 'true') return;
+        container.dataset.mounted = 'true';
+      }
+
+      // Tooltip (HTML, single instance inside container)
+      container.style.position = container.style.position || 'relative';
+      let tip = container.querySelector('.d3-tooltip');
+      let tipInner;
+      if (!tip) {
+        tip = document.createElement('div');
+        tip.className = 'd3-tooltip';
+        Object.assign(tip.style, {
+          position: 'absolute',
+          top: '0px',
+          left: '0px',
+          transform: 'translate(-9999px, -9999px)',
+          pointerEvents: 'none',
+          padding: '8px 10px',
+          borderRadius: '8px',
+          fontSize: '12px',
+          lineHeight: '1.35',
+          border: '1px solid var(--border-color)',
+          background: 'var(--surface-bg)',
+          color: 'var(--text-color)',
+          boxShadow: '0 4px 24px rgba(0,0,0,.18)',
+          opacity: '0',
+          transition: 'opacity .12s ease'
+        });
+        tipInner = document.createElement('div');
+        tipInner.className = 'd3-tooltip__inner';
+        tipInner.style.textAlign = 'left';
+        tip.appendChild(tipInner);
+        container.appendChild(tip);
+      } else {
+        tipInner = tip.querySelector('.d3-tooltip__inner') || tip;
+      }
+
+      // SVG scaffolding
+      const card = document.createElement('div');
+      card.className = 'chart-card';
+      container.appendChild(card);
+      const svg = d3.select(card).append('svg').attr('width', '100%').style('display', 'block');
+      const gRoot = svg.append('g');
+      const gCells = gRoot.append('g');
+      const gAxes = gRoot.append('g');
+      const gColorbar = gRoot.append('g');
+      const gColorbarRects = gColorbar.append('g'); // Separate group for colorbar rectangles
+      const gColorbarLabels = gColorbar.append('g'); // Separate group for colorbar labels
+      
+
+      // Data: 6x6 correlation matrix
+      const metrics = [
+        'LLM score\nconcept',
+        'LLM score\ninstruction',
+        'LLM score\nfluency',
+        'Explicit\nconcept\ninclusion',
+        'Log Prob',
+        '3-gram\nrepetition'
+      ];
+
+      // Correlation matrix (exact values from the image)
+      const correlationMatrix = [
+        [1.00, -0.28, -0.37,  0.45, -0.57,  0.00],
+        [-0.28,  1.00,  0.80,  0.068, 0.45, -0.90],
+        [-0.37,  0.80,  1.00,  0.015, 0.67, -0.90],
+        [0.45,  0.068, 0.015, 1.00, -0.10, -0.093],
+        [-0.57,  0.45,  0.67, -0.10, 1.00, -0.53],
+        [0.00, -0.90, -0.90, -0.093, -0.53, 1.00]
+      ];
+
+      // Colors: diverging palette via window.ColorPalettes
+      const getDivergingColors = (count) => {
+        try {
+          if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') {
+            const palette = window.ColorPalettes.getColors('diverging', count);
+            // Invert the palette: reverse the array
+            return palette.slice().reverse();
+          }
+        } catch (_) {}
+        // Fallback: generate diverging scale (blue for negative, red for positive)
+        const steps = Math.max(3, count|0);
+        const arr = [];
+        for (let i = 0; i < steps; i++) {
+          const t = i / (steps - 1);
+          const pct = Math.round(t * 100);
+          // Blue (negative) to Red (positive) via white
+          if (t < 0.5) {
+            const bluePct = Math.round((0.5 - t) * 200);
+            arr.push(`color-mix(in srgb, #3A7BD5 ${bluePct}%, #ffffff ${100-bluePct}%)`);
+          } else {
+            const redPct = Math.round((t - 0.5) * 200);
+            arr.push(`color-mix(in srgb, #ffffff ${100-redPct}%, #D64545 ${redPct}%)`);
+          }
+        }
+        return arr;
+      };
+
+      const divergingPalette = getDivergingColors(21);
+
+      let width = 800;
+      let height = 600;
+      const margin = { top: 40, right: 0, bottom: 0, left: 70 };
+      const xLabelHeight = 20; // Height reserved for X-axis labels
+
+      function updateSize() {
+        const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+        width = container.clientWidth || 800;
+        // Use more of the available width and calculate height based on content
+        const availableWidth = width;
+        const minGridSize = 400;
+        // Reserve space for colorbar (80px) and calculate optimal grid size
+        const maxGridSize = Math.min(availableWidth - margin.left - margin.right - 80, 800);
+        const gridSize = Math.max(minGridSize, maxGridSize);
+        // Height must include: top margin + grid + x labels height + extra padding to ensure visibility
+        height = margin.top + gridSize + xLabelHeight + 20;
+        // Responsive SVG: width 100%, height auto, preserve aspect via viewBox
+        svg
+          .attr('viewBox', `0 0 ${width} ${height}`)
+          .attr('preserveAspectRatio', 'xMidYMid meet')
+          .style('width', '100%')
+          .style('height', 'auto');
+        gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
+        const innerWidth = width - margin.left - margin.right;
+        const innerHeight = height - margin.top - margin.bottom;
+        return { innerWidth, innerHeight, isDark, gridSize };
+      }
+
+      // Compute a fixed readable text color from a CSS rgb()/rgba() string
+      function chooseFixedReadableTextOnBg(bgCss){
+        try {
+          const m = String(bgCss||'').match(/rgba?\(([^)]+)\)/);
+          if (!m) return '#0e1116';
+          const parts = m[1].split(',').map(s => parseFloat(s.trim()));
+          const [r, g, b] = parts;
+          // sRGB → relative luminance
+          const srgb = [r, g, b].map(v => Math.max(0, Math.min(255, v)) / 255);
+          const linear = srgb.map(c => (c <= 0.03928 ? c/12.92 : Math.pow((c + 0.055)/1.055, 2.4)));
+          const L = 0.2126*linear[0] + 0.7152*linear[1] + 0.0722*linear[2];
+          // Threshold ~ 0.5 for readability; darker BG → white text, else near-black
+          return L < 0.5 ? '#ffffff' : '#0e1116';
+        } catch(_) { return '#0e1116'; }
+      }
+
+      function render() {
+        const { innerWidth, innerHeight, gridSize } = updateSize();
+        const n = metrics.length;
+        const cellSize = gridSize / n;
+        
+        // Ensure xLabelHeight is accessible
+        const labelHeight = xLabelHeight;
+
+        const x = d3.scaleBand().domain(d3.range(n)).range([0, gridSize]).paddingInner(0);
+        const y = d3.scaleBand().domain(d3.range(n)).range([0, gridSize]).paddingInner(0);
+
+        // Flatten correlation data
+        const flatData = [];
+        for (let r = 0; r < n; r++) {
+          for (let c = 0; c < n; c++) {
+            flatData.push({ r, c, value: correlationMatrix[r][c] });
+          }
+        }
+
+        // Color scale: diverging from -1 to 1
+        const colorScale = d3.scaleQuantize()
+          .domain([-1, 1])
+          .range(divergingPalette);
+
+        const cells = gCells.selectAll('g.cell')
+          .data(flatData, d => `${d.r}-${d.c}`);
+
+        const cellsEnter = cells.enter()
+          .append('g')
+          .attr('class', 'cell');
+
+        cellsEnter.append('rect')
+          .attr('rx', 0)
+          .attr('ry', 0)
+          .on('mousemove', (event, d) => {
+            const [px, py] = d3.pointer(event, container);
+            tipInner.innerHTML = `<strong>${metrics[d.r]}</strong> × <strong>${metrics[d.c]}</strong><br/>Correlation: ${d.value.toFixed(2)}`;
+            tip.style.transform = `translate(${px + 10}px, ${py + 10}px)`;
+            tip.style.opacity = '1';
+          })
+          .on('mouseleave', () => {
+            tip.style.opacity = '0';
+          });
+
+        cellsEnter.append('text')
+          .attr('class', 'cell-text')
+          .attr('text-anchor', 'middle')
+          .attr('dominant-baseline', 'middle');
+
+        const cellsMerged = cellsEnter.merge(cells);
+
+        cellsMerged.select('rect')
+          .attr('x', d => x(d.c))
+          .attr('y', d => y(d.r))
+          .attr('width', Math.max(1, x.bandwidth()))
+          .attr('height', Math.max(1, y.bandwidth()))
+          .attr('fill', d => colorScale(d.value));
+
+        cellsMerged.select('text')
+          .attr('x', d => x(d.c) + x.bandwidth() / 2)
+          .attr('y', d => y(d.r) + y.bandwidth() / 2)
+          .text(d => {
+            if (d.value === 1.00) return '1';
+            const absVal = Math.abs(d.value);
+            if (absVal < 0.01) return '0';
+            return d.value.toFixed(2);
+          })
+          .style('fill', function(d){
+            try {
+              const rect = this && this.parentNode ? this.parentNode.querySelector('rect') : null;
+              const bg = rect ? getComputedStyle(rect).fill : colorScale(d.value);
+              return chooseFixedReadableTextOnBg(bg);
+            } catch (_) {
+              return '#0e1116';
+            }
+          });
+
+        cells.exit().remove();
+
+        // Create clipPath for matrix cells to preserve rounded corners
+        const matrixClipId = `matrix-clip-${Math.random().toString(36).slice(2)}`;
+        let defsMatrix = svg.select('defs');
+        if (defsMatrix.empty()) {
+          defsMatrix = svg.append('defs');
+        }
+        const matrixClipPath = defsMatrix.append('clipPath').attr('id', matrixClipId);
+        matrixClipPath.append('rect')
+          .attr('x', 0)
+          .attr('y', 0)
+          .attr('width', gridSize)
+          .attr('height', gridSize)
+          .attr('rx', 8)
+          .attr('ry', 8);
+        
+        // Apply clipPath to cells group
+        gCells.attr('clip-path', `url(#${matrixClipId})`);
+
+        // Draw outer border with rounded corners (in a separate group above cells)
+        const gBorder = gRoot.append('g').attr('class', 'matrix-border');
+        gBorder.selectAll('rect.cell-bg')
+          .data([0])
+          .join('rect')
+          .attr('class', 'cell-bg')
+          .attr('x', 0)
+          .attr('y', 0)
+          .attr('width', gridSize)
+          .attr('height', gridSize)
+          .attr('rx', 8)
+          .attr('ry', 8)
+          .attr('fill', 'none')
+          .attr('stroke', 'var(--border-color)')
+          .attr('stroke-width', 1);
+
+        // Axes labels
+        gAxes.selectAll('*').remove();
+
+        // X-axis labels (bottom) - using SVG text with manual line breaks
+        const xLabelsGroup = gAxes.append('g').attr('class', 'x-labels');
+        const xLabels = xLabelsGroup.selectAll('text')
+          .data(metrics)
+          .join('text')
+          .attr('class', 'axis-label')
+          .attr('text-anchor', 'middle')
+          .attr('x', (_, i) => x(i) + x.bandwidth() / 2)
+          .attr('y', gridSize + 16)
+          .style('font-size', '11px')
+          .style('font-weight', '700')
+          .style('fill', 'var(--text-color)')
+          .each(function(d) {
+            const text = d3.select(this);
+            const lines = d.split('\n');
+            lines.forEach((line, i) => {
+              text.append('tspan')
+                .attr('x', text.attr('x'))
+                .attr('dy', i === 0 ? '0' : '1.2em')
+                .text(line);
+            });
+          });
+
+        // Y-axis labels (left) - using SVG text with manual line breaks
+        const yLabelsGroup = gAxes.append('g').attr('class', 'y-labels');
+        const yLabels = yLabelsGroup.selectAll('text')
+          .data(metrics)
+          .join('text')
+          .attr('class', 'axis-label')
+          .attr('text-anchor', 'end')
+          .attr('x', -12)
+          .attr('y', (_, i) => y(i) + y.bandwidth() / 2)
+          .style('font-size', '11px')
+          .style('font-weight', '700')
+          .style('fill', 'var(--text-color)')
+          .each(function(d) {
+            const text = d3.select(this);
+            const lines = d.split('\n');
+            // Center the text vertically around the y position
+            const lineHeight = 1.2;
+            const totalHeight = (lines.length - 1) * lineHeight;
+            const startY = -totalHeight / 2;
+            lines.forEach((line, i) => {
+              text.append('tspan')
+                .attr('x', text.attr('x'))
+                .attr('dy', i === 0 ? startY + 'em' : lineHeight + 'em')
+                .attr('text-anchor', 'end')
+                .text(line);
+            });
+          });
+
+        // Title
+        gAxes.append('text')
+          .attr('class', 'axis-label')
+          .attr('text-anchor', 'middle')
+          .attr('x', gridSize / 2)
+          .attr('y', -20)
+          .style('font-size', '14px')
+          .text('Correlation Matrix');
+
+        // Colorbar
+        const colorbarWidth = 20;
+        const colorbarHeight = gridSize;
+        const colorbarX = gridSize + 20;
+        const colorbarY = 0;
+        const colorbarSteps = divergingPalette.length;
+        const colorbarRadius = 8;
+
+        // Create clipPath for rounded corners (top and bottom only)
+        const clipId = `colorbar-clip-${Math.random().toString(36).slice(2)}`;
+        let defsColorbar = svg.select('defs');
+        if (defsColorbar.empty()) {
+          defsColorbar = svg.append('defs');
+        }
+        const clipPath = defsColorbar.append('clipPath').attr('id', clipId);
+        clipPath.append('rect')
+          .attr('x', colorbarX)
+          .attr('y', colorbarY)
+          .attr('width', colorbarWidth)
+          .attr('height', colorbarHeight)
+          .attr('rx', colorbarRadius)
+          .attr('ry', colorbarRadius);
+
+        // Apply clipPath only to colorbar rectangles group, not labels
+        gColorbarRects.attr('clip-path', `url(#${clipId})`);
+
+        gColorbarRects.selectAll('rect.colorbar-rect')
+          .data(d3.range(colorbarSteps))
+          .join('rect')
+          .attr('class', 'colorbar-rect')
+          .attr('x', colorbarX)
+          .attr('y', (_, i) => colorbarY + (colorbarHeight / colorbarSteps) * i)
+          .attr('width', colorbarWidth)
+          .attr('height', colorbarHeight / colorbarSteps)
+          .attr('fill', (_, i) => divergingPalette[colorbarSteps - 1 - i])
+          .attr('stroke', 'none');
+
+        // Colorbar border with rounded corners (top and bottom)
+        gColorbarRects.append('rect')
+          .attr('x', colorbarX)
+          .attr('y', colorbarY)
+          .attr('width', colorbarWidth)
+          .attr('height', colorbarHeight)
+          .attr('rx', colorbarRadius)
+          .attr('ry', colorbarRadius)
+          .attr('fill', 'none')
+          .attr('stroke', 'var(--border-color)')
+          .attr('stroke-width', 1);
+
+        // Colorbar labels (outside clipPath so they're visible)
+        const colorbarTicks = [-1, -0.75, -0.5, -0.25, 0, 0.25, 0.5, 0.75, 1];
+        gColorbarLabels.selectAll('text.colorbar-tick')
+          .data(colorbarTicks)
+          .join('text')
+          .attr('class', 'colorbar-label')
+          .attr('text-anchor', 'start')
+          .attr('x', colorbarX + colorbarWidth + 6)
+          .attr('y', d => colorbarY + (1 - d) / 2 * colorbarHeight)
+          .attr('dominant-baseline', 'middle')
+          .text(d => d.toFixed(2));
+      }
+
+      // Initial render + resize handling
+      const rerender = () => render();
+      if (window.ResizeObserver) {
+        const ro = new ResizeObserver(() => rerender());
+        ro.observe(container);
+      } else {
+        window.addEventListener('resize', rerender);
+      }
+    };
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true });
+    } else {
+      ensureD3(bootstrap);
+    }
+  })();
+</script>
+

app/src/content/embeds/{d3-evaluation1-naive.html → d3-evaluation-configurable.html}

@@ -1,4 +1,4 @@
-<div class="d3-eval-grid d3-eval-grid-1"></div>
+<div class="d3-eval-grid d3-eval-grid-configurable"></div>
 <style>
   .d3-eval-grid {
     padding: 2px;
@@ -91,11 +91,18 @@
       }, { once: true });
     };
 
+    // Define experiment states
+    const EXPERIMENT_STATES = {
+      'naive': ['Prompt', 'Basic steering'],
+      'clamp': ['Prompt', 'Basic steering', 'Clamping', 'Clamping + Penalty'],
+      'multi': ['Prompt', 'Basic steering', 'Clamping', 'Clamping + Penalty', '2D optimized', '8D optimized']
+    };
+
     const bootstrap = () => {
       const scriptEl = document.currentScript;
       let container = scriptEl ? scriptEl.previousElementSibling : null;
-      if (!(container && container.classList && container.classList.contains('d3-eval-grid-1'))) {
-        const candidates = Array.from(document.querySelectorAll('.d3-eval-grid-1'))
+      if (!(container && container.classList && container.classList.contains('d3-eval-grid-configurable'))) {
+        const candidates = Array.from(document.querySelectorAll('.d3-eval-grid-configurable'))
           .filter((el) => !(el.dataset && el.dataset.mounted === 'true'));
         container = candidates[candidates.length - 1] || null;
       }
@@ -105,8 +112,32 @@
         container.dataset.mounted = 'true';
       }
 
-      // Find data attribute
+      // Find config attribute
       let mountEl = container;
+      let configValue = null;
+      while (mountEl && !mountEl.getAttribute?.('data-config')) {
+        mountEl = mountEl.parentElement;
+      }
+      try {
+        const configAttr = mountEl && mountEl.getAttribute ? mountEl.getAttribute('data-config') : null;
+        if (configAttr && configAttr.trim()) {
+          // Try to parse as JSON first, otherwise treat as string
+          try {
+            configValue = JSON.parse(configAttr);
+          } catch(_) {
+            configValue = configAttr.trim();
+          }
+        }
+      } catch(_) {}
+
+      // Determine visible experiments based on config
+      // Default to 'naive' if no config provided
+      const stateName = typeof configValue === 'string' ? configValue.toLowerCase() : 
+                       (configValue && configValue.state) ? configValue.state.toLowerCase() : 'naive';
+      const visibleExperiments = EXPERIMENT_STATES[stateName] || EXPERIMENT_STATES['naive'];
+
+      // Find data attribute
+      mountEl = container;
       while (mountEl && !mountEl.getAttribute?.('data-datafiles')) {
         mountEl = mountEl.parentElement;
       }
@@ -118,15 +149,6 @@
         }
       } catch(_) {}
 
-      // Check for experiments filter attribute
-      let experimentsFilter = null;
-      try {
-        const expAttr = container.getAttribute('data-experiments');
-        if (expAttr) {
-          experimentsFilter = JSON.parse(expAttr);
-        }
-      } catch(_) {}
-
       const DEFAULT_JSON = '/data/evaluation_summary.json';
       const ensureDataPrefix = (p) => (typeof p === 'string' && p && !p.includes('/')) ? `/data/${p}` : p;
 
@@ -151,9 +173,8 @@
 
       fetchFirstAvailable(JSON_PATHS)
         .then(rawData => {
-          // Chart 1: Only Prompt and Basic steering (but reserve space for all)
+          // All experiments for consistent positioning
           const allExperiments = ['Prompt', 'Basic steering', 'Clamping', 'Clamping + Penalty', '2D optimized', '8D optimized'];
-          const visibleExperiments = ['Prompt', 'Basic steering'];
 
           // Metrics in 2x4 grid layout (8 metrics)
           const metrics = [
@@ -174,14 +195,177 @@
             data[d.metric][d.experiment] = { mean: d.mean, std: d.std };
           });
 
-          // Color palette - consistent across all charts
+          // Color palette - use categorical colors with similar hues for related experiments
+          const getCategoricalColors = (count) => {
+            try {
+              if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') {
+                return window.ColorPalettes.getColors('categorical', count);
+              }
+            } catch (_) {}
+            const primary = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim() || '#E889AB';
+            const tableau = (window.d3 && window.d3.schemeTableau10) ? window.d3.schemeTableau10 : ['#4e79a7', '#f28e2b', '#e15759', '#76b7b2', '#59a14f', '#edc948', '#b07aa1', '#ff9da7', '#9c755f', '#bab0ab'];
+            const pool = [primary, ...tableau];
+            const arr = []; for (let i = 0; i < count; i++) { arr.push(pool[i % pool.length]); }
+            return arr;
+          };
+          
+          // Get base colors for groups - start with primary color for Basic steering
+        const baseColors = getCategoricalColors(3);
+          
+          // Create variations using sequential palette for similar hues - more harmonious
+          const getSequentialVariations = (baseColor, count) => {
+            try {
+              // Try to use ColorPalettes sequential generator if available
+              if (window.ColorPalettes && typeof window.ColorPalettes.getPrimaryOKLCH === 'function') {
+                // Parse base color to extract its hue
+                const parseColor = (color) => {
+                  const el = document.createElement('span');
+                  el.style.color = color;
+                  document.body.appendChild(el);
+                  const rgb = getComputedStyle(el).color.match(/\d+/g);
+                  document.body.removeChild(el);
+                  if (!rgb || rgb.length < 3) return null;
+                  return { r: rgb[0]/255, g: rgb[1]/255, b: rgb[2]/255 };
+                };
+                
+                const rgb = parseColor(baseColor);
+                if (!rgb) return Array(count).fill(baseColor);
+                
+                // Convert RGB to HSL to get hue
+                const max = Math.max(rgb.r, rgb.g, rgb.b);
+                const min = Math.min(rgb.r, rgb.g, rgb.b);
+                const delta = max - min;
+                let h = 0;
+                if (delta !== 0) {
+                  if (max === rgb.r) h = ((rgb.g - rgb.b) / delta) % 6;
+                  else if (max === rgb.g) h = (rgb.b - rgb.r) / delta + 2;
+                  else h = (rgb.r - rgb.g) / delta + 4;
+                }
+                h = h * 60;
+                if (h < 0) h += 360;
+                
+                // Get primary OKLCH to use as base for sequential generation
+                const primaryOKLCH = window.ColorPalettes.getPrimaryOKLCH();
+                if (primaryOKLCH) {
+                  // Create a temporary OKLCH color with the base color's hue
+                  // Use the primary's L and C as reference, but use the base color's hue
+                  const baseL = 0.65; // Medium lightness
+                  const baseC = 0.2; // Medium chroma
+                  
+                  // Generate sequential palette with the base color's hue
+                  // This creates harmonious variations
+                  const tempOKLCH = { L: baseL, C: baseC, h: h };
+                  
+                  // Use ColorPalettes sequential generator if we can create a custom one
+                  // Otherwise, create subtle variations manually
+                  const variations = [];
+                  for (let i = 0; i < count; i++) {
+                    const t = count === 1 ? 0.5 : i / (count - 1);
+                    // More subtle variation: smaller range for harmony
+                    const LVar = baseL + (t - 0.5) * 0.12; // Range: 0.59 to 0.71 (more subtle)
+                    const CVar = baseC * (0.95 + t * 0.1); // Slight saturation variation
+                    
+                    // Use ColorPalettes oklchToHexSafe if available
+                    if (window.ColorPalettes && window.ColorPalettes.getColors) {
+                      // Try to get sequential colors and adjust hue
+                      // For now, use manual HSL conversion with better parameters
+                      const light = Math.max(0.5, Math.min(0.75, LVar));
+                      const sat = Math.max(0.35, Math.min(0.55, CVar * 2.5));
+                      const hue = h / 360;
+                      const c = sat * (1 - Math.abs(2 * light - 1));
+                      const x = c * (1 - Math.abs((hue * 6) % 2 - 1));
+                      const m = light - c / 2;
+                      let r, g, b;
+                      if (hue < 1/6) { r = c; g = x; b = 0; }
+                      else if (hue < 2/6) { r = x; g = c; b = 0; }
+                      else if (hue < 3/6) { r = 0; g = c; b = x; }
+                      else if (hue < 4/6) { r = 0; g = x; b = c; }
+                      else if (hue < 5/6) { r = x; g = 0; b = c; }
+                      else { r = c; g = 0; b = x; }
+                      const toHex = (n) => Math.round(Math.max(0, Math.min(255, (n + m) * 255))).toString(16).padStart(2, '0').toUpperCase();
+                      variations.push(`#${toHex(r)}${toHex(g)}${toHex(b)}`);
+                    } else {
+                      variations.push(baseColor);
+                    }
+                  }
+                  return variations;
+                }
+              }
+            } catch (_) {}
+            
+            // Fallback: create subtle variations manually
+            try {
+              const parseColor = (color) => {
+                const el = document.createElement('span');
+                el.style.color = color;
+                document.body.appendChild(el);
+                const rgb = getComputedStyle(el).color.match(/\d+/g);
+                document.body.removeChild(el);
+                if (!rgb || rgb.length < 3) return null;
+                return { r: rgb[0]/255, g: rgb[1]/255, b: rgb[2]/255 };
+              };
+              
+              const rgb = parseColor(baseColor);
+              if (!rgb) return Array(count).fill(baseColor);
+              
+              // Convert RGB to HSL
+              const max = Math.max(rgb.r, rgb.g, rgb.b);
+              const min = Math.min(rgb.r, rgb.g, rgb.b);
+              const delta = max - min;
+              let h = 0;
+              if (delta !== 0) {
+                if (max === rgb.r) h = ((rgb.g - rgb.b) / delta) % 6;
+                else if (max === rgb.g) h = (rgb.b - rgb.r) / delta + 2;
+                else h = (rgb.r - rgb.g) / delta + 4;
+              }
+              h = h * 60;
+              if (h < 0) h += 360;
+              
+              // More harmonious variations: smaller, subtler changes
+              const variations = [];
+              for (let i = 0; i < count; i++) {
+                const t = count === 1 ? 0.5 : i / (count - 1);
+                // Subtle lightness variation: smaller range for harmony
+                const light = 0.6 + (t - 0.5) * 0.15; // Range: 0.525 to 0.675 (more subtle)
+                const sat = 0.45 + t * 0.15; // Range: 0.45 to 0.60 (more controlled)
+                
+                // Convert HSL to RGB
+                const hue = h / 360;
+                const c = sat * (1 - Math.abs(2 * light - 1));
+                const x = c * (1 - Math.abs((hue * 6) % 2 - 1));
+                const m = light - c / 2;
+                let r, g, b;
+                if (hue < 1/6) { r = c; g = x; b = 0; }
+                else if (hue < 2/6) { r = x; g = c; b = 0; }
+                else if (hue < 3/6) { r = 0; g = c; b = x; }
+                else if (hue < 4/6) { r = 0; g = x; b = c; }
+                else if (hue < 5/6) { r = x; g = 0; b = c; }
+                else { r = c; g = 0; b = x; }
+                const toHex = (n) => Math.round(Math.max(0, Math.min(255, (n + m) * 255))).toString(16).padStart(2, '0').toUpperCase();
+                variations.push(`#${toHex(r)}${toHex(g)}${toHex(b)}`);
+              }
+              return variations;
+            } catch (_) {
+              return Array(count).fill(baseColor);
+            }
+          };
+          
+          // Create color groups
+          // baseColors[0] is primary color (first in categorical palette)
+          // baseColors[1] is second color
+          // baseColors[2] is third color
+          const clampBase = baseColors[1] || '#4e79a7'; // Second color for clamping group
+          const optimizedBase = baseColors[2] || '#59a14f'; // Third color for optimized group
+          const clampVariations = getSequentialVariations(clampBase, 2);
+          const optimizedVariations = getSequentialVariations(optimizedBase, 2);
+          
           const allColors = {
-            'Prompt': '#4c4c4c',
-            'Basic steering': '#b2b2b2',
-            'Clamping': '#b2b2cc',
-            'Clamping + Penalty': '#b2b2e6',
-            '2D optimized': '#b2ffb2',
-            '8D optimized': '#ffb2ff'
+            'Prompt': '#4c4c4c', // Keep gray for baseline/reference
+            'Basic steering': baseColors[0] || '#E889AB', // Primary color (first in palette)
+            'Clamping': clampVariations[0] || '#4e79a7',
+            'Clamping + Penalty': clampVariations[1] || '#5a8ab8',
+            '2D optimized': optimizedVariations[0] || '#59a14f',
+            '8D optimized': optimizedVariations[1] || '#6bb26b'
           };
 
           const gridContainer = document.createElement('div');
@@ -412,3 +596,4 @@
     }
   })();
 </script>
+

app/src/content/embeds/d3-evaluation-grid.html

@@ -1,467 +0,0 @@
-<div class="d3-eval-grid"></div>
-<style>
-  .d3-eval-grid {
-    padding: 8px;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  }
-
-  .d3-eval-grid .chart-card {
-    background: var(--surface-bg);
-    border: 1px solid var(--border-color);
-    border-radius: 10px;
-    padding: 16px;
-  }
-
-  .d3-eval-grid .grid-container {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 24px;
-    margin-bottom: 16px;
-  }
-
-  @media (max-width: 768px) {
-    .d3-eval-grid .grid-container {
-      grid-template-columns: 1fr;
-    }
-  }
-
-  .d3-eval-grid .subplot {
-    background: var(--surface-bg);
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    padding: 12px;
-  }
-
-  .d3-eval-grid .subplot-title {
-    font-size: 13px;
-    font-weight: 600;
-    color: var(--text-color);
-    margin-bottom: 8px;
-    text-align: center;
-  }
-
-  .d3-eval-grid .legend {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px 16px;
-    padding-top: 12px;
-    border-top: 1px solid var(--border-color);
-    font-size: 12px;
-    justify-content: center;
-  }
-
-  .d3-eval-grid .legend-item {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    cursor: pointer;
-    transition: opacity 0.2s;
-  }
-
-  .d3-eval-grid .legend-item.dimmed {
-    opacity: 0.3;
-  }
-
-  .d3-eval-grid .legend-swatch {
-    width: 14px;
-    height: 14px;
-    border-radius: 3px;
-    border: 1px solid var(--border-color);
-  }
-
-  .d3-eval-grid .axes path,
-  .d3-eval-grid .axes line {
-    stroke: var(--axis-color);
-  }
-
-  .d3-eval-grid .axes text {
-    fill: var(--tick-color);
-    font-size: 10px;
-  }
-
-  .d3-eval-grid .grid line {
-    stroke: var(--grid-color);
-    stroke-dasharray: 2,2;
-    opacity: 0.5;
-  }
-
-  .d3-eval-grid .axis-label {
-    fill: var(--text-color);
-    font-size: 11px;
-    font-weight: 600;
-  }
-
-  .d3-eval-grid .d3-tooltip {
-    position: absolute;
-    pointer-events: none;
-    padding: 8px 10px;
-    background: var(--surface-bg);
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    font-size: 11px;
-    line-height: 1.5;
-    box-shadow: 0 4px 24px rgba(0,0,0,.18);
-    opacity: 0;
-    transition: opacity 0.2s;
-    z-index: 1000;
-  }
-
-  .d3-eval-grid .bar {
-    transition: opacity 0.2s;
-  }
-
-  .d3-eval-grid .bar.dimmed {
-    opacity: 0.2;
-  }
-</style>
-<script>
-  (() => {
-    const ensureD3 = (cb) => {
-      if (window.d3 && typeof window.d3.select === 'function') return cb();
-      let 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', () => {
-        if (window.d3 && typeof window.d3.select === 'function') cb();
-      }, { once: true });
-    };
-
-    const bootstrap = () => {
-      const scriptEl = document.currentScript;
-      let container = scriptEl ? scriptEl.previousElementSibling : null;
-      if (!(container && container.classList && container.classList.contains('d3-eval-grid'))) {
-        const candidates = Array.from(document.querySelectorAll('.d3-eval-grid'))
-          .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';
-      }
-
-      // Find data attribute
-      let mountEl = container;
-      while (mountEl && !mountEl.getAttribute?.('data-datafiles')) {
-        mountEl = mountEl.parentElement;
-      }
-      let providedData = null;
-      try {
-        const attr = mountEl && mountEl.getAttribute ? mountEl.getAttribute('data-datafiles') : null;
-        if (attr && attr.trim()) {
-          providedData = attr.trim().startsWith('[') ? JSON.parse(attr) : attr.trim();
-        }
-      } catch(_) {}
-
-      // Check for experiments filter attribute
-      let experimentsFilter = null;
-      try {
-        const expAttr = container.getAttribute('data-experiments');
-        if (expAttr) {
-          experimentsFilter = JSON.parse(expAttr);
-        }
-      } catch(_) {}
-
-      const DEFAULT_JSON = '/data/evaluation_summary.json';
-      const ensureDataPrefix = (p) => (typeof p === 'string' && p && !p.includes('/')) ? `/data/${p}` : p;
-
-      const JSON_PATHS = typeof providedData === 'string'
-        ? [ensureDataPrefix(providedData)]
-        : [
-            DEFAULT_JSON,
-            './assets/data/evaluation_summary.json',
-            '../assets/data/evaluation_summary.json',
-            '../../assets/data/evaluation_summary.json'
-          ];
-
-      const fetchFirstAvailable = async (paths) => {
-        for (const p of paths) {
-          try {
-            const r = await fetch(p, { cache: 'no-cache' });
-            if (r.ok) return await r.json();
-          } catch(_){}
-        }
-        throw new Error('JSON not found');
-      };
-
-      fetchFirstAvailable(JSON_PATHS)
-        .then(rawData => {
-          // All experiments in order
-          const allExperiments = ['Prompt', 'Basic steering', 'Clamping', 'Clamping + Penalty', '2D optimized', '8D optimized'];
-
-          // Use filtered experiments if provided, otherwise use all
-          const experiments = experimentsFilter || allExperiments;
-
-          // Metrics in 2x3 grid layout
-          const metrics = [
-            { key: 'llm_score_concept', label: 'LLM Concept Score', format: d3.format('.2f') },
-            { key: 'llm_score_instruction', label: 'LLM Instruction Score', format: d3.format('.2f') },
-            { key: 'llm_score_fluency', label: 'LLM Fluency Score', format: d3.format('.2f') },
-            { key: 'rep3', label: '3-gram Repetition Fraction', format: d3.format('.2f') },
-            { key: 'mean_llm_score', label: 'Mean LLM Score', format: d3.format('.2f') },
-            { key: 'harmonic_llm_score', label: 'Harmonic Mean LLM Score', format: d3.format('.2f') }
-          ];
-
-          // Restructure data
-          const data = {};
-          rawData.forEach(d => {
-            if (!data[d.metric]) data[d.metric] = {};
-            data[d.metric][d.experiment] = { mean: d.mean, std: d.std };
-          });
-
-          // Color palette - consistent across all charts
-          const allColors = {
-            'Prompt': '#4c4c4c',
-            'Basic steering': '#b2b2b2',
-            'Clamping': '#b2b2cc',
-            'Clamping + Penalty': '#b2b2e6',
-            '2D optimized': '#b2ffb2',
-            '8D optimized': '#ffb2ff'
-          };
-
-          const card = document.createElement('div');
-          card.className = 'chart-card';
-          container.appendChild(card);
-
-          const gridContainer = document.createElement('div');
-          gridContainer.className = 'grid-container';
-          card.appendChild(gridContainer);
-
-          // Tooltip
-          const tooltip = d3.select(card).append('div')
-            .attr('class', 'd3-tooltip')
-            .style('transform', 'translate(-9999px, -9999px)');
-
-          let hoveredExperiment = null;
-
-          // Create each subplot
-          metrics.forEach((metric, idx) => {
-            const subplot = document.createElement('div');
-            subplot.className = 'subplot';
-            subplot.dataset.metric = metric.key;
-            gridContainer.appendChild(subplot);
-
-            const title = document.createElement('div');
-            title.className = 'subplot-title';
-            title.textContent = metric.label;
-            subplot.appendChild(title);
-
-            const svg = d3.select(subplot).append('svg')
-              .attr('width', '100%')
-              .style('display', 'block');
-
-            const g = svg.append('g');
-            const gGrid = g.append('g').attr('class', 'grid');
-            const gBars = g.append('g').attr('class', 'bars');
-            const gErrorBars = g.append('g').attr('class', 'error-bars');
-            const gAxes = g.append('g').attr('class', 'axes');
-
-            subplot._render = () => {
-              const width = subplot.clientWidth || 300;
-              const height = Math.max(200, Math.round(width * 0.6));
-              const margin = { top: 10, right: 10, bottom: 60, left: 50 };
-              const innerWidth = width - margin.left - margin.right;
-              const innerHeight = height - margin.top - margin.bottom;
-
-              svg.attr('height', height);
-              g.attr('transform', `translate(${margin.left},${margin.top})`);
-
-              // Scales
-              const x = d3.scaleBand()
-                .domain(experiments)
-                .range([0, innerWidth])
-                .padding(0.2);
-
-              // Find y domain for this metric
-              const values = experiments.map(exp => data[metric.key]?.[exp]?.mean).filter(v => v !== undefined);
-              const stds = experiments.map(exp => data[metric.key]?.[exp]?.std).filter(v => v !== undefined);
-              const maxVal = d3.max(values.map((v, i) => v + stds[i]));
-              const minVal = d3.min(values.map((v, i) => Math.max(0, v - stds[i])));
-
-              const y = d3.scaleLinear()
-                .domain([Math.max(0, minVal * 0.95), maxVal * 1.05])
-                .range([innerHeight, 0])
-                .nice();
-
-              // Grid
-              gGrid.selectAll('*').remove();
-              gGrid.selectAll('line')
-                .data(y.ticks(4))
-                .join('line')
-                .attr('x1', 0)
-                .attr('x2', innerWidth)
-                .attr('y1', d => y(d))
-                .attr('y2', d => y(d));
-
-              // Axes
-              gAxes.selectAll('*').remove();
-
-              const xAxis = gAxes.append('g')
-                .attr('transform', `translate(0,${innerHeight})`)
-                .call(d3.axisBottom(x).tickSize(3));
-
-              xAxis.selectAll('text')
-                .attr('transform', 'rotate(-45)')
-                .style('text-anchor', 'end')
-                .attr('dx', '-0.5em')
-                .attr('dy', '0.15em');
-
-              gAxes.append('g')
-                .call(d3.axisLeft(y).ticks(4).tickFormat(metric.format).tickSize(3));
-
-              // Draw bars
-              const bars = [];
-              experiments.forEach(exp => {
-                const d = data[metric.key]?.[exp];
-                if (d) {
-                  bars.push({
-                    experiment: exp,
-                    mean: d.mean,
-                    std: d.std,
-                    color: allColors[exp],
-                    x: x(exp),
-                    y: y(d.mean),
-                    width: x.bandwidth(),
-                    height: innerHeight - y(d.mean)
-                  });
-                }
-              });
-
-              gBars.selectAll('rect')
-                .data(bars)
-                .join('rect')
-                .attr('class', 'bar')
-                .attr('x', d => d.x)
-                .attr('y', d => d.y)
-                .attr('width', d => d.width)
-                .attr('height', d => d.height)
-                .attr('fill', d => d.color)
-                .attr('rx', 2)
-                .classed('dimmed', d => hoveredExperiment && d.experiment !== hoveredExperiment)
-                .on('mouseenter', (event, d) => {
-                  hoveredExperiment = d.experiment;
-                  updateAll();
-                  tooltip
-                    .style('opacity', 1)
-                    .html(`
-                      <div><strong>${d.experiment}</strong></div>
-                      <div style="margin-top: 4px;">${metric.label}</div>
-                      <div style="margin-top: 4px;"><strong>Mean:</strong> ${metric.format(d.mean)}</div>
-                      <div><strong>Std:</strong> ${metric.format(d.std)}</div>
-                    `);
-                })
-                .on('mousemove', (event) => {
-                  const [mx, my] = d3.pointer(event, card);
-                  tooltip.style('transform', `translate(${mx + 10}px, ${my + 10}px)`);
-                })
-                .on('mouseleave', () => {
-                  hoveredExperiment = null;
-                  updateAll();
-                  tooltip.style('opacity', 0).style('transform', 'translate(-9999px, -9999px)');
-                });
-
-              // Error bars
-              gErrorBars.selectAll('line')
-                .data(bars)
-                .join('line')
-                .attr('x1', d => d.x + d.width / 2)
-                .attr('x2', d => d.x + d.width / 2)
-                .attr('y1', d => y(d.mean + d.std))
-                .attr('y2', d => y(Math.max(0, d.mean - d.std)))
-                .attr('stroke', '#666')
-                .attr('stroke-width', 1.5)
-                .attr('opacity', 0.6);
-
-              // Error bar caps
-              gErrorBars.selectAll('.cap-top')
-                .data(bars)
-                .join('line')
-                .attr('class', 'cap-top')
-                .attr('x1', d => d.x + d.width / 2 - 3)
-                .attr('x2', d => d.x + d.width / 2 + 3)
-                .attr('y1', d => y(d.mean + d.std))
-                .attr('y2', d => y(d.mean + d.std))
-                .attr('stroke', '#666')
-                .attr('stroke-width', 1.5)
-                .attr('opacity', 0.6);
-
-              gErrorBars.selectAll('.cap-bottom')
-                .data(bars)
-                .join('line')
-                .attr('class', 'cap-bottom')
-                .attr('x1', d => d.x + d.width / 2 - 3)
-                .attr('x2', d => d.x + d.width / 2 + 3)
-                .attr('y1', d => y(Math.max(0, d.mean - d.std)))
-                .attr('y2', d => y(Math.max(0, d.mean - d.std)))
-                .attr('stroke', '#666')
-                .attr('stroke-width', 1.5)
-                .attr('opacity', 0.6);
-            };
-          });
-
-          // Legend
-          const legend = document.createElement('div');
-          legend.className = 'legend';
-          experiments.forEach(exp => {
-            const item = document.createElement('div');
-            item.className = 'legend-item';
-            item.dataset.experiment = exp;
-            item.innerHTML = `
-              <div class="legend-swatch" style="background: ${allColors[exp]}"></div>
-              <span>${exp}</span>
-            `;
-            legend.appendChild(item);
-          });
-          card.appendChild(legend);
-
-          // Legend interaction
-          legend.querySelectorAll('.legend-item').forEach(item => {
-            item.addEventListener('mouseenter', () => {
-              hoveredExperiment = item.dataset.experiment;
-              updateAll();
-            });
-            item.addEventListener('mouseleave', () => {
-              hoveredExperiment = null;
-              updateAll();
-            });
-          });
-
-          const updateAll = () => {
-            gridContainer.querySelectorAll('.subplot').forEach(subplot => {
-              if (subplot._render) subplot._render();
-            });
-
-            legend.querySelectorAll('.legend-item').forEach(item => {
-              if (hoveredExperiment && item.dataset.experiment !== hoveredExperiment) {
-                item.classList.add('dimmed');
-              } else {
-                item.classList.remove('dimmed');
-              }
-            });
-          };
-
-          updateAll();
-
-          if (window.ResizeObserver) {
-            const ro = new ResizeObserver(() => updateAll());
-            ro.observe(container);
-          } else {
-            window.addEventListener('resize', updateAll);
-          }
-        })
-        .catch(err => {
-          container.innerHTML = `<div style="color: red; padding: 20px;">Error: ${err.message}</div>`;
-        });
-    };
-
-    if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true });
-    } else {
-      ensureD3(bootstrap);
-    }
-  })();
-</script>

app/src/content/embeds/d3-evaluation2-clamp.html

@@ -1,414 +0,0 @@
-<div class="d3-eval-grid d3-eval-grid-2"></div>
-<style>
-  .d3-eval-grid {
-    padding: 2px;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  }
-
-  .d3-eval-grid .grid-container {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 8px;
-  }
-
-  @media (max-width: 768px) {
-    .d3-eval-grid .grid-container {
-      grid-template-columns: 1fr;
-    }
-  }
-
-  .d3-eval-grid .subplot {
-    padding: 4px;
-  }
-
-  .d3-eval-grid .subplot-title {
-    font-size: 12px;
-    font-weight: 600;
-    color: var(--text-color);
-    margin-bottom: 4px;
-    text-align: center;
-  }
-
-
-  .d3-eval-grid .axes path,
-  .d3-eval-grid .axes line {
-    stroke: var(--axis-color);
-  }
-
-  .d3-eval-grid .axes text {
-    fill: var(--tick-color);
-    font-size: 9px;
-  }
-
-  .d3-eval-grid .grid line {
-    stroke: var(--grid-color);
-    stroke-dasharray: 2,2;
-    opacity: 0.5;
-  }
-
-  .d3-eval-grid .axis-label {
-    fill: var(--text-color);
-    font-size: 11px;
-    font-weight: 600;
-  }
-
-  .d3-eval-grid .d3-tooltip {
-    position: absolute;
-    pointer-events: none;
-    padding: 8px 10px;
-    background: var(--surface-bg);
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    font-size: 11px;
-    line-height: 1.5;
-    box-shadow: 0 4px 24px rgba(0,0,0,.18);
-    opacity: 0;
-    transition: opacity 0.2s;
-    z-index: 1000;
-  }
-
-  .d3-eval-grid .bar {
-    transition: opacity 0.2s;
-  }
-
-  .d3-eval-grid .bar.dimmed {
-    opacity: 0.2;
-  }
-</style>
-<script>
-  (() => {
-    const ensureD3 = (cb) => {
-      if (window.d3 && typeof window.d3.select === 'function') return cb();
-      let 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', () => {
-        if (window.d3 && typeof window.d3.select === 'function') cb();
-      }, { once: true });
-    };
-
-    const bootstrap = () => {
-      const scriptEl = document.currentScript;
-      let container = scriptEl ? scriptEl.previousElementSibling : null;
-      if (!(container && container.classList && container.classList.contains('d3-eval-grid-2'))) {
-        const candidates = Array.from(document.querySelectorAll('.d3-eval-grid-2'))
-          .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';
-      }
-
-      // Find data attribute
-      let mountEl = container;
-      while (mountEl && !mountEl.getAttribute?.('data-datafiles')) {
-        mountEl = mountEl.parentElement;
-      }
-      let providedData = null;
-      try {
-        const attr = mountEl && mountEl.getAttribute ? mountEl.getAttribute('data-datafiles') : null;
-        if (attr && attr.trim()) {
-          providedData = attr.trim().startsWith('[') ? JSON.parse(attr) : attr.trim();
-        }
-      } catch(_) {}
-
-      // Check for experiments filter attribute
-      let experimentsFilter = null;
-      try {
-        const expAttr = container.getAttribute('data-experiments');
-        if (expAttr) {
-          experimentsFilter = JSON.parse(expAttr);
-        }
-      } catch(_) {}
-
-      const DEFAULT_JSON = '/data/evaluation_summary.json';
-      const ensureDataPrefix = (p) => (typeof p === 'string' && p && !p.includes('/')) ? `/data/${p}` : p;
-
-      const JSON_PATHS = typeof providedData === 'string'
-        ? [ensureDataPrefix(providedData)]
-        : [
-            DEFAULT_JSON,
-            './assets/data/evaluation_summary.json',
-            '../assets/data/evaluation_summary.json',
-            '../../assets/data/evaluation_summary.json'
-          ];
-
-      const fetchFirstAvailable = async (paths) => {
-        for (const p of paths) {
-          try {
-            const r = await fetch(p, { cache: 'no-cache' });
-            if (r.ok) return await r.json();
-          } catch(_){}
-        }
-        throw new Error('JSON not found');
-      };
-
-      fetchFirstAvailable(JSON_PATHS)
-        .then(rawData => {
-          // Chart 2: Add clamping experiments (but reserve space for all)
-          const allExperiments = ['Prompt', 'Basic steering', 'Clamping', 'Clamping + Penalty', '2D optimized', '8D optimized'];
-          const visibleExperiments = ['Prompt', 'Basic steering', 'Clamping', 'Clamping + Penalty'];
-
-          // Metrics in 2x4 grid layout (8 metrics)
-          const metrics = [
-            { key: 'llm_score_concept', label: 'LLM Concept Score', format: d3.format('.2f') },
-            { key: 'eiffel', label: 'Explicit Concept Presence', format: d3.format('.2f') },
-            { key: 'llm_score_instruction', label: 'LLM Instruction Score', format: d3.format('.2f') },
-            { key: 'minus_log_prob', label: 'Surprise in Original Model', format: d3.format('.2f') },
-            { key: 'llm_score_fluency', label: 'LLM Fluency Score', format: d3.format('.2f') },
-            { key: 'rep3', label: '3-gram Repetition Fraction', format: d3.format('.2f') },
-            { key: 'mean_llm_score', label: 'Mean LLM Score', format: d3.format('.2f') },
-            { key: 'harmonic_llm_score', label: 'Harmonic Mean LLM Score', format: d3.format('.2f') }
-          ];
-
-          // Restructure data
-          const data = {};
-          rawData.forEach(d => {
-            if (!data[d.metric]) data[d.metric] = {};
-            data[d.metric][d.experiment] = { mean: d.mean, std: d.std };
-          });
-
-          // Color palette - consistent across all charts
-          const allColors = {
-            'Prompt': '#4c4c4c',
-            'Basic steering': '#b2b2b2',
-            'Clamping': '#b2b2cc',
-            'Clamping + Penalty': '#b2b2e6',
-            '2D optimized': '#b2ffb2',
-            '8D optimized': '#ffb2ff'
-          };
-
-          const gridContainer = document.createElement('div');
-          gridContainer.className = 'grid-container';
-          container.appendChild(gridContainer);
-
-          // Tooltip
-          const tooltip = d3.select(container).append('div')
-            .attr('class', 'd3-tooltip')
-            .style('transform', 'translate(-9999px, -9999px)');
-
-          let hoveredExperiment = null;
-
-          // Create each subplot
-          metrics.forEach((metric, idx) => {
-            const subplot = document.createElement('div');
-            subplot.className = 'subplot';
-            subplot.dataset.metric = metric.key;
-            gridContainer.appendChild(subplot);
-
-            const title = document.createElement('div');
-            title.className = 'subplot-title';
-            title.textContent = metric.label;
-            subplot.appendChild(title);
-
-            const svg = d3.select(subplot).append('svg')
-              .attr('width', '100%')
-              .style('display', 'block');
-
-            const g = svg.append('g');
-            const gGrid = g.append('g').attr('class', 'grid');
-            const gBars = g.append('g').attr('class', 'bars');
-            const gErrorBars = g.append('g').attr('class', 'error-bars');
-            const gAxes = g.append('g').attr('class', 'axes');
-            const gLabels = g.append('g').attr('class', 'value-labels');
-
-            subplot._render = () => {
-              const width = subplot.clientWidth || 300;
-              const height = Math.max(200, Math.round(width * 0.6));
-              const margin = { top: 10, right: 20, bottom: 70, left: 42 };
-              const innerWidth = width - margin.left - margin.right;
-              const innerHeight = height - margin.top - margin.bottom;
-
-              svg.attr('height', height);
-              g.attr('transform', `translate(${margin.left},${margin.top})`);
-
-              // Scales - use all experiments for consistent positioning
-              const x = d3.scaleBand()
-                .domain(allExperiments)
-                .range([0, innerWidth])
-                .padding(0.2);
-
-              // Fixed y-axis ranges based on metric type
-              const yDomains = {
-                'llm_score_concept': [0, 2],
-                'llm_score_instruction': [0, 2],
-                'llm_score_fluency': [0, 2],
-                'mean_llm_score': [0, 2],
-                'harmonic_llm_score': [0, 2],
-                'eiffel': [0, 1],
-                'minus_log_prob': [0, 2],
-                'rep3': [0, 0.5]
-              };
-
-              const y = d3.scaleLinear()
-                .domain(yDomains[metric.key] || [0, 1])
-                .range([innerHeight, 0]);
-
-              // Grid
-              gGrid.selectAll('*').remove();
-              gGrid.selectAll('line')
-                .data(y.ticks(4))
-                .join('line')
-                .attr('x1', 0)
-                .attr('x2', innerWidth)
-                .attr('y1', d => y(d))
-                .attr('y2', d => y(d));
-
-              // Axes
-              gAxes.selectAll('*').remove();
-
-              const xAxis = gAxes.append('g')
-                .attr('transform', `translate(0,${innerHeight})`)
-                .call(d3.axisBottom(x).tickSize(3));
-
-              // Only show labels for visible experiments
-              xAxis.selectAll('text')
-                .attr('transform', 'rotate(-45)')
-                .style('text-anchor', 'end')
-                .attr('dx', '-0.5em')
-                .attr('dy', '0.15em')
-                .style('opacity', function() {
-                  const text = d3.select(this).text();
-                  return visibleExperiments.includes(text) ? 1 : 0;
-                });
-
-              gAxes.append('g')
-                .call(d3.axisLeft(y).ticks(4).tickFormat(metric.format).tickSize(3));
-
-              // Draw bars (only for visible experiments)
-              const bars = [];
-              visibleExperiments.forEach(exp => {
-                const d = data[metric.key]?.[exp];
-                if (d) {
-                  bars.push({
-                    experiment: exp,
-                    mean: d.mean,
-                    std: d.std,
-                    color: allColors[exp],
-                    x: x(exp),
-                    y: y(d.mean),
-                    width: x.bandwidth(),
-                    height: innerHeight - y(d.mean)
-                  });
-                }
-              });
-
-              gBars.selectAll('rect')
-                .data(bars)
-                .join('rect')
-                .attr('class', 'bar')
-                .attr('x', d => d.x)
-                .attr('y', d => d.y)
-                .attr('width', d => d.width)
-                .attr('height', d => d.height)
-                .attr('fill', d => d.color)
-                .attr('rx', 2)
-                .classed('dimmed', d => hoveredExperiment && d.experiment !== hoveredExperiment)
-                .on('mouseenter', (event, d) => {
-                  hoveredExperiment = d.experiment;
-
-                  // Show value label on bar
-                  gLabels.selectAll('text').remove();
-                  gLabels.append('text')
-                    .attr('x', d.x + d.width / 2)
-                    .attr('y', d.y - 5)
-                    .attr('text-anchor', 'middle')
-                    .attr('fill', 'var(--text-color)')
-                    .attr('font-size', '11px')
-                    .attr('font-weight', '600')
-                    .text(metric.format(d.mean));
-
-                  updateAll();
-                  tooltip
-                    .style('opacity', 1)
-                    .html(`
-                      <div><strong>${d.experiment}</strong></div>
-                      <div style="margin-top: 4px;">${metric.label}</div>
-                      <div style="margin-top: 4px;"><strong>Mean:</strong> ${metric.format(d.mean)}</div>
-                      <div><strong>Std:</strong> ${metric.format(d.std)}</div>
-                    `);
-                })
-                .on('mousemove', (event) => {
-                  const [mx, my] = d3.pointer(event, container);
-                  tooltip.style('transform', `translate(${mx + 10}px, ${my + 10}px)`);
-                })
-                .on('mouseleave', () => {
-                  hoveredExperiment = null;
-                  gLabels.selectAll('text').remove();
-                  updateAll();
-                  tooltip.style('opacity', 0).style('transform', 'translate(-9999px, -9999px)');
-                });
-
-              // Error bars
-              gErrorBars.selectAll('line')
-                .data(bars)
-                .join('line')
-                .attr('x1', d => d.x + d.width / 2)
-                .attr('x2', d => d.x + d.width / 2)
-                .attr('y1', d => y(d.mean + d.std))
-                .attr('y2', d => y(Math.max(0, d.mean - d.std)))
-                .attr('stroke', '#666')
-                .attr('stroke-width', 1.5)
-                .attr('opacity', 0.6);
-
-              // Error bar caps
-              gErrorBars.selectAll('.cap-top')
-                .data(bars)
-                .join('line')
-                .attr('class', 'cap-top')
-                .attr('x1', d => d.x + d.width / 2 - 3)
-                .attr('x2', d => d.x + d.width / 2 + 3)
-                .attr('y1', d => y(d.mean + d.std))
-                .attr('y2', d => y(d.mean + d.std))
-                .attr('stroke', '#666')
-                .attr('stroke-width', 1.5)
-                .attr('opacity', 0.6);
-
-              gErrorBars.selectAll('.cap-bottom')
-                .data(bars)
-                .join('line')
-                .attr('class', 'cap-bottom')
-                .attr('x1', d => d.x + d.width / 2 - 3)
-                .attr('x2', d => d.x + d.width / 2 + 3)
-                .attr('y1', d => y(Math.max(0, d.mean - d.std)))
-                .attr('y2', d => y(Math.max(0, d.mean - d.std)))
-                .attr('stroke', '#666')
-                .attr('stroke-width', 1.5)
-                .attr('opacity', 0.6);
-            };
-          });
-
-          const updateAll = () => {
-            gridContainer.querySelectorAll('.subplot').forEach(subplot => {
-              if (subplot._render) subplot._render();
-            });
-
-          };
-
-          updateAll();
-
-          if (window.ResizeObserver) {
-            const ro = new ResizeObserver(() => updateAll());
-            ro.observe(container);
-          } else {
-            window.addEventListener('resize', updateAll);
-          }
-        })
-        .catch(err => {
-          container.innerHTML = `<div style="color: red; padding: 20px;">Error: ${err.message}</div>`;
-        });
-    };
-
-    if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true });
-    } else {
-      ensureD3(bootstrap);
-    }
-  })();
-</script>

app/src/content/embeds/d3-evaluation3-multi.html

@@ -1,414 +0,0 @@
-<div class="d3-eval-grid d3-eval-grid-3"></div>
-<style>
-  .d3-eval-grid {
-    padding: 2px;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  }
-
-  .d3-eval-grid .grid-container {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 8px;
-  }
-
-  @media (max-width: 768px) {
-    .d3-eval-grid .grid-container {
-      grid-template-columns: 1fr;
-    }
-  }
-
-  .d3-eval-grid .subplot {
-    padding: 4px;
-  }
-
-  .d3-eval-grid .subplot-title {
-    font-size: 12px;
-    font-weight: 600;
-    color: var(--text-color);
-    margin-bottom: 4px;
-    text-align: center;
-  }
-
-
-  .d3-eval-grid .axes path,
-  .d3-eval-grid .axes line {
-    stroke: var(--axis-color);
-  }
-
-  .d3-eval-grid .axes text {
-    fill: var(--tick-color);
-    font-size: 9px;
-  }
-
-  .d3-eval-grid .grid line {
-    stroke: var(--grid-color);
-    stroke-dasharray: 2,2;
-    opacity: 0.5;
-  }
-
-  .d3-eval-grid .axis-label {
-    fill: var(--text-color);
-    font-size: 11px;
-    font-weight: 600;
-  }
-
-  .d3-eval-grid .d3-tooltip {
-    position: absolute;
-    pointer-events: none;
-    padding: 8px 10px;
-    background: var(--surface-bg);
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    font-size: 11px;
-    line-height: 1.5;
-    box-shadow: 0 4px 24px rgba(0,0,0,.18);
-    opacity: 0;
-    transition: opacity 0.2s;
-    z-index: 1000;
-  }
-
-  .d3-eval-grid .bar {
-    transition: opacity 0.2s;
-  }
-
-  .d3-eval-grid .bar.dimmed {
-    opacity: 0.2;
-  }
-</style>
-<script>
-  (() => {
-    const ensureD3 = (cb) => {
-      if (window.d3 && typeof window.d3.select === 'function') return cb();
-      let 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', () => {
-        if (window.d3 && typeof window.d3.select === 'function') cb();
-      }, { once: true });
-    };
-
-    const bootstrap = () => {
-      const scriptEl = document.currentScript;
-      let container = scriptEl ? scriptEl.previousElementSibling : null;
-      if (!(container && container.classList && container.classList.contains('d3-eval-grid-3'))) {
-        const candidates = Array.from(document.querySelectorAll('.d3-eval-grid-3'))
-          .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';
-      }
-
-      // Find data attribute
-      let mountEl = container;
-      while (mountEl && !mountEl.getAttribute?.('data-datafiles')) {
-        mountEl = mountEl.parentElement;
-      }
-      let providedData = null;
-      try {
-        const attr = mountEl && mountEl.getAttribute ? mountEl.getAttribute('data-datafiles') : null;
-        if (attr && attr.trim()) {
-          providedData = attr.trim().startsWith('[') ? JSON.parse(attr) : attr.trim();
-        }
-      } catch(_) {}
-
-      // Check for experiments filter attribute
-      let experimentsFilter = null;
-      try {
-        const expAttr = container.getAttribute('data-experiments');
-        if (expAttr) {
-          experimentsFilter = JSON.parse(expAttr);
-        }
-      } catch(_) {}
-
-      const DEFAULT_JSON = '/data/evaluation_summary.json';
-      const ensureDataPrefix = (p) => (typeof p === 'string' && p && !p.includes('/')) ? `/data/${p}` : p;
-
-      const JSON_PATHS = typeof providedData === 'string'
-        ? [ensureDataPrefix(providedData)]
-        : [
-            DEFAULT_JSON,
-            './assets/data/evaluation_summary.json',
-            '../assets/data/evaluation_summary.json',
-            '../../assets/data/evaluation_summary.json'
-          ];
-
-      const fetchFirstAvailable = async (paths) => {
-        for (const p of paths) {
-          try {
-            const r = await fetch(p, { cache: 'no-cache' });
-            if (r.ok) return await r.json();
-          } catch(_){}
-        }
-        throw new Error('JSON not found');
-      };
-
-      fetchFirstAvailable(JSON_PATHS)
-        .then(rawData => {
-          // Chart 3: All experiments including multi-layer optimization
-          const allExperiments = ['Prompt', 'Basic steering', 'Clamping', 'Clamping + Penalty', '2D optimized', '8D optimized'];
-          const visibleExperiments = allExperiments;
-
-          // Metrics in 2x4 grid layout (8 metrics)
-          const metrics = [
-            { key: 'llm_score_concept', label: 'LLM Concept Score', format: d3.format('.2f') },
-            { key: 'eiffel', label: 'Explicit Concept Presence', format: d3.format('.2f') },
-            { key: 'llm_score_instruction', label: 'LLM Instruction Score', format: d3.format('.2f') },
-            { key: 'minus_log_prob', label: 'Surprise in Original Model', format: d3.format('.2f') },
-            { key: 'llm_score_fluency', label: 'LLM Fluency Score', format: d3.format('.2f') },
-            { key: 'rep3', label: '3-gram Repetition Fraction', format: d3.format('.2f') },
-            { key: 'mean_llm_score', label: 'Mean LLM Score', format: d3.format('.2f') },
-            { key: 'harmonic_llm_score', label: 'Harmonic Mean LLM Score', format: d3.format('.2f') }
-          ];
-
-          // Restructure data
-          const data = {};
-          rawData.forEach(d => {
-            if (!data[d.metric]) data[d.metric] = {};
-            data[d.metric][d.experiment] = { mean: d.mean, std: d.std };
-          });
-
-          // Color palette - consistent across all charts
-          const allColors = {
-            'Prompt': '#4c4c4c',
-            'Basic steering': '#b2b2b2',
-            'Clamping': '#b2b2cc',
-            'Clamping + Penalty': '#b2b2e6',
-            '2D optimized': '#b2ffb2',
-            '8D optimized': '#ffb2ff'
-          };
-
-          const gridContainer = document.createElement('div');
-          gridContainer.className = 'grid-container';
-          container.appendChild(gridContainer);
-
-          // Tooltip
-          const tooltip = d3.select(container).append('div')
-            .attr('class', 'd3-tooltip')
-            .style('transform', 'translate(-9999px, -9999px)');
-
-          let hoveredExperiment = null;
-
-          // Create each subplot
-          metrics.forEach((metric, idx) => {
-            const subplot = document.createElement('div');
-            subplot.className = 'subplot';
-            subplot.dataset.metric = metric.key;
-            gridContainer.appendChild(subplot);
-
-            const title = document.createElement('div');
-            title.className = 'subplot-title';
-            title.textContent = metric.label;
-            subplot.appendChild(title);
-
-            const svg = d3.select(subplot).append('svg')
-              .attr('width', '100%')
-              .style('display', 'block');
-
-            const g = svg.append('g');
-            const gGrid = g.append('g').attr('class', 'grid');
-            const gBars = g.append('g').attr('class', 'bars');
-            const gErrorBars = g.append('g').attr('class', 'error-bars');
-            const gAxes = g.append('g').attr('class', 'axes');
-            const gLabels = g.append('g').attr('class', 'value-labels');
-
-            subplot._render = () => {
-              const width = subplot.clientWidth || 300;
-              const height = Math.max(200, Math.round(width * 0.6));
-              const margin = { top: 10, right: 20, bottom: 70, left: 42 };
-              const innerWidth = width - margin.left - margin.right;
-              const innerHeight = height - margin.top - margin.bottom;
-
-              svg.attr('height', height);
-              g.attr('transform', `translate(${margin.left},${margin.top})`);
-
-              // Scales - use all experiments for consistent positioning
-              const x = d3.scaleBand()
-                .domain(allExperiments)
-                .range([0, innerWidth])
-                .padding(0.2);
-
-              // Fixed y-axis ranges based on metric type
-              const yDomains = {
-                'llm_score_concept': [0, 2],
-                'llm_score_instruction': [0, 2],
-                'llm_score_fluency': [0, 2],
-                'mean_llm_score': [0, 2],
-                'harmonic_llm_score': [0, 2],
-                'eiffel': [0, 1],
-                'minus_log_prob': [0, 2],
-                'rep3': [0, 0.5]
-              };
-
-              const y = d3.scaleLinear()
-                .domain(yDomains[metric.key] || [0, 1])
-                .range([innerHeight, 0]);
-
-              // Grid
-              gGrid.selectAll('*').remove();
-              gGrid.selectAll('line')
-                .data(y.ticks(4))
-                .join('line')
-                .attr('x1', 0)
-                .attr('x2', innerWidth)
-                .attr('y1', d => y(d))
-                .attr('y2', d => y(d));
-
-              // Axes
-              gAxes.selectAll('*').remove();
-
-              const xAxis = gAxes.append('g')
-                .attr('transform', `translate(0,${innerHeight})`)
-                .call(d3.axisBottom(x).tickSize(3));
-
-              // Only show labels for visible experiments
-              xAxis.selectAll('text')
-                .attr('transform', 'rotate(-45)')
-                .style('text-anchor', 'end')
-                .attr('dx', '-0.5em')
-                .attr('dy', '0.15em')
-                .style('opacity', function() {
-                  const text = d3.select(this).text();
-                  return visibleExperiments.includes(text) ? 1 : 0;
-                });
-
-              gAxes.append('g')
-                .call(d3.axisLeft(y).ticks(4).tickFormat(metric.format).tickSize(3));
-
-              // Draw bars (only for visible experiments)
-              const bars = [];
-              visibleExperiments.forEach(exp => {
-                const d = data[metric.key]?.[exp];
-                if (d) {
-                  bars.push({
-                    experiment: exp,
-                    mean: d.mean,
-                    std: d.std,
-                    color: allColors[exp],
-                    x: x(exp),
-                    y: y(d.mean),
-                    width: x.bandwidth(),
-                    height: innerHeight - y(d.mean)
-                  });
-                }
-              });
-
-              gBars.selectAll('rect')
-                .data(bars)
-                .join('rect')
-                .attr('class', 'bar')
-                .attr('x', d => d.x)
-                .attr('y', d => d.y)
-                .attr('width', d => d.width)
-                .attr('height', d => d.height)
-                .attr('fill', d => d.color)
-                .attr('rx', 2)
-                .classed('dimmed', d => hoveredExperiment && d.experiment !== hoveredExperiment)
-                .on('mouseenter', (event, d) => {
-                  hoveredExperiment = d.experiment;
-
-                  // Show value label on bar
-                  gLabels.selectAll('text').remove();
-                  gLabels.append('text')
-                    .attr('x', d.x + d.width / 2)
-                    .attr('y', d.y - 5)
-                    .attr('text-anchor', 'middle')
-                    .attr('fill', 'var(--text-color)')
-                    .attr('font-size', '11px')
-                    .attr('font-weight', '600')
-                    .text(metric.format(d.mean));
-
-                  updateAll();
-                  tooltip
-                    .style('opacity', 1)
-                    .html(`
-                      <div><strong>${d.experiment}</strong></div>
-                      <div style="margin-top: 4px;">${metric.label}</div>
-                      <div style="margin-top: 4px;"><strong>Mean:</strong> ${metric.format(d.mean)}</div>
-                      <div><strong>Std:</strong> ${metric.format(d.std)}</div>
-                    `);
-                })
-                .on('mousemove', (event) => {
-                  const [mx, my] = d3.pointer(event, container);
-                  tooltip.style('transform', `translate(${mx + 10}px, ${my + 10}px)`);
-                })
-                .on('mouseleave', () => {
-                  hoveredExperiment = null;
-                  gLabels.selectAll('text').remove();
-                  updateAll();
-                  tooltip.style('opacity', 0).style('transform', 'translate(-9999px, -9999px)');
-                });
-
-              // Error bars
-              gErrorBars.selectAll('line')
-                .data(bars)
-                .join('line')
-                .attr('x1', d => d.x + d.width / 2)
-                .attr('x2', d => d.x + d.width / 2)
-                .attr('y1', d => y(d.mean + d.std))
-                .attr('y2', d => y(Math.max(0, d.mean - d.std)))
-                .attr('stroke', '#666')
-                .attr('stroke-width', 1.5)
-                .attr('opacity', 0.6);
-
-              // Error bar caps
-              gErrorBars.selectAll('.cap-top')
-                .data(bars)
-                .join('line')
-                .attr('class', 'cap-top')
-                .attr('x1', d => d.x + d.width / 2 - 3)
-                .attr('x2', d => d.x + d.width / 2 + 3)
-                .attr('y1', d => y(d.mean + d.std))
-                .attr('y2', d => y(d.mean + d.std))
-                .attr('stroke', '#666')
-                .attr('stroke-width', 1.5)
-                .attr('opacity', 0.6);
-
-              gErrorBars.selectAll('.cap-bottom')
-                .data(bars)
-                .join('line')
-                .attr('class', 'cap-bottom')
-                .attr('x1', d => d.x + d.width / 2 - 3)
-                .attr('x2', d => d.x + d.width / 2 + 3)
-                .attr('y1', d => y(Math.max(0, d.mean - d.std)))
-                .attr('y2', d => y(Math.max(0, d.mean - d.std)))
-                .attr('stroke', '#666')
-                .attr('stroke-width', 1.5)
-                .attr('opacity', 0.6);
-            };
-          });
-
-          const updateAll = () => {
-            gridContainer.querySelectorAll('.subplot').forEach(subplot => {
-              if (subplot._render) subplot._render();
-            });
-
-          };
-
-          updateAll();
-
-          if (window.ResizeObserver) {
-            const ro = new ResizeObserver(() => updateAll());
-            ro.observe(container);
-          } else {
-            window.addEventListener('resize', updateAll);
-          }
-        })
-        .catch(err => {
-          container.innerHTML = `<div style="color: red; padding: 20px;">Error: ${err.message}</div>`;
-        });
-    };
-
-    if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true });
-    } else {
-      ensureD3(bootstrap);
-    }
-  })();
-</script>

app/src/content/embeds/d3-first-experiments.html

@@ -7,6 +7,7 @@
 
   .d3-first-experiments .slider-container {
     margin-bottom: 12px;
+    position: relative;
   }
 
   .d3-first-experiments .slider-label {
@@ -34,6 +35,10 @@
       var(--primary-color) 100%);
     outline: none;
     -webkit-appearance: none;
+    position: relative;
+    z-index: 1;
+    margin-top: 20px;
+    margin-bottom: 20px;
   }
 
   .d3-first-experiments input[type="range"]::-webkit-slider-thumb {
@@ -61,7 +66,7 @@
   .d3-first-experiments .columns-container {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 8px;
+    gap: 20px;
   }
 
   @media (max-width: 768px) {
@@ -114,11 +119,11 @@
 
   .d3-first-experiments .highlight {
     font-weight: 700;
-    color: #ec4899;
+    color: var(--primary-color);
   }
 
   .d3-first-experiments .note {
-    margin-top: 8px;
+    margin-top: 20px;
     font-size: 11px;
     color: var(--muted-color);
     font-style: italic;
@@ -134,6 +139,28 @@
     font-size: 12px;
     white-space: pre-wrap;
   }
+
+  .d3-first-experiments .slider-marker {
+    position: absolute;
+    width: 1px;
+    background: rgba(0, 0, 0, 0.25);
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  .d3-first-experiments .slider-marker-top {
+    top: 40px;
+    height: 7px;
+  }
+
+  .d3-first-experiments .slider-marker-bottom {
+    top: 70px;
+    height: 7px;
+  }
+
+  [data-theme="dark"] .d3-first-experiments .slider-marker {
+    background: rgba(255, 255, 255, 0.25);
+  }
 </style>
 <script>
   (() => {
@@ -294,6 +321,11 @@
         const minIntensity = intensities[0];
         const maxIntensity = intensities[intensities.length - 1];
 
+        // Calculate marker position for value 6
+        const markerValue = 6;
+        const markerPosition = ((markerValue - minIntensity) / (maxIntensity - minIntensity)) * 100;
+        const showMarker = markerValue >= minIntensity && markerValue <= maxIntensity;
+
         // Create UI
         container.innerHTML = `
           <div class="slider-container">
@@ -307,6 +339,10 @@
                    step="0.5"
                    value="${minIntensity}"
                    class="steering-slider">
+            ${showMarker ? `
+              <div class="slider-marker slider-marker-top" style="left: ${markerPosition}%;"></div>
+              <div class="slider-marker slider-marker-bottom" style="left: ${markerPosition}%;"></div>
+            ` : ''}
           </div>
           <div class="columns-container">
             <div class="column">

app/src/content/embeds/d3-harmonic-mean.html

@@ -0,0 +1,842 @@
+<!-- 
+  Harmonic Mean Charts - Two Side-by-Side Charts
+  
+  Two line charts showing arithmetic and harmonic mean of LLM scores as a function of steering coefficient.
+  
+  Configuration via data-config attribute:
+  {
+    "dataUrl": "./assets/data/sweep_1d_metrics.csv",
+    "xColumn": "alpha"
+  }
+  
+  CSV format (with mean/std): 
+    alpha, arithmetic_mean_mean, arithmetic_mean_std, harmonic_mean_mean, harmonic_mean_std
+  
+  Example usage in MDX:
+  <HtmlEmbed 
+    src="embeds/d3-harmonic-mean.html" 
+    data="sweep_1d_metrics.csv"
+  />
+-->
+<div class="d3-harmonic-mean"></div>
+<style>
+  .d3-harmonic-mean {
+    position: relative;
+    container-type: inline-size;
+  }
+
+  /* Grid - 2 columns side by side */
+  .d3-harmonic-mean__grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 16px;
+  }
+
+  /* Container queries - basées sur la largeur du container parent */
+  @container (max-width: 600px) {
+    .d3-harmonic-mean__grid {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .chart-cell {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    padding: 12px;
+    box-shadow: inset 0 0 0 1px var(--border-color);
+    border-radius: 8px;
+    background: var(--page-bg);
+  }
+
+  .chart-cell__title {
+    font-size: 13px;
+    font-weight: 700;
+    color: var(--text-color);
+    margin-bottom: 8px;
+    padding-bottom: 8px;
+  }
+
+  .chart-cell__body {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+  }
+
+  .chart-cell__body svg {
+    max-width: 100%;
+    height: auto;
+    display: block;
+  }
+
+  .d3-harmonic-mean__legend {
+    display: flex;
+    gap: 16px;
+    margin-top: 16px;
+    font-size: 11px;
+    color: var(--text-color);
+    align-items: center;
+    justify-content: center;
+  }
+
+  .d3-harmonic-mean__legend-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .d3-harmonic-mean__legend-line {
+    width: 20px;
+    height: 2px;
+    border-radius: 1px;
+  }
+
+  .d3-harmonic-mean__legend-band {
+    width: 20px;
+    height: 12px;
+    border-radius: 2px;
+  }
+
+  /* Reset button */
+  .chart-cell .reset-button {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    z-index: 10;
+    display: none;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    font-size: 11px;
+    padding: 3px 6px;
+    border-radius: 4px;
+    background: var(--surface-bg);
+    color: var(--text-color);
+    border: 1px solid var(--border-color);
+    cursor: pointer;
+  }
+
+  /* Axes */
+  .d3-harmonic-mean .axes path {
+    display: none;
+  }
+
+  .d3-harmonic-mean .axes line {
+    stroke: var(--axis-color);
+  }
+
+  .d3-harmonic-mean .axes text {
+    fill: var(--tick-color);
+    font-size: 10px;
+  }
+
+  .d3-harmonic-mean .axis-label {
+    fill: var(--text-color);
+    font-size: 10px;
+    font-weight: 300;
+    opacity: 0.7;
+    stroke: var(--page-bg, white);
+    stroke-width: 3px;
+    paint-order: stroke fill;
+  }
+
+  .d3-harmonic-mean .grid line {
+    stroke: var(--grid-color);
+  }
+
+  /* Lines */
+  .d3-harmonic-mean path.main-line {
+    fill: none;
+    stroke-width: 2;
+    transition: opacity 0.2s ease;
+  }
+
+  /* Uncertainty band */
+  .d3-harmonic-mean path.uncertainty-band {
+    fill: var(--primary-color, #E889AB);
+    fill-opacity: 0.2;
+    stroke: none;
+  }
+
+  /* Tooltip */
+  .d3-harmonic-mean .d3-tooltip {
+    z-index: 20;
+    backdrop-filter: saturate(1.12) blur(8px);
+  }
+
+  .d3-harmonic-mean .d3-tooltip__inner {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    min-width: 200px;
+  }
+
+  .d3-harmonic-mean .d3-tooltip__inner>div:first-child {
+    font-weight: 800;
+    letter-spacing: 0.1px;
+    margin-bottom: 0;
+  }
+
+  .d3-harmonic-mean .d3-tooltip__inner>div:nth-child(2) {
+    font-size: 11px;
+    color: var(--muted-color);
+    display: block;
+    margin-top: -4px;
+    margin-bottom: 2px;
+    letter-spacing: 0.1px;
+  }
+</style>
+<script>
+  (() => {
+    const ensureD3 = (cb) => {
+      if (window.d3 && typeof window.d3.select === 'function') return cb();
+      let 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); }
+      const onReady = () => { if (window.d3 && typeof window.d3.select === 'function') cb(); };
+      s.addEventListener('load', onReady, { once: true }); if (window.d3) onReady();
+    };
+
+    const bootstrap = () => {
+      const scriptEl = document.currentScript;
+      let container = scriptEl ? scriptEl.previousElementSibling : null;
+      if (!(container && container.classList && container.classList.contains('d3-harmonic-mean'))) {
+        const cs = Array.from(document.querySelectorAll('.d3-harmonic-mean')).filter(el => !(el.dataset && el.dataset.mounted === 'true'));
+        container = cs[cs.length - 1] || null;
+      }
+      if (!container) return;
+      if (container.dataset) { if (container.dataset.mounted === 'true') return; container.dataset.mounted = 'true'; }
+
+      const d3 = window.d3;
+
+      // Read config from HtmlEmbed props
+      function readEmbedConfig() {
+        let mountEl = container;
+        while (mountEl && !mountEl.getAttribute?.('data-config')) {
+          mountEl = mountEl.parentElement;
+        }
+
+        let providedConfig = null;
+        try {
+          const cfg = mountEl && mountEl.getAttribute ? mountEl.getAttribute('data-config') : null;
+          if (cfg && cfg.trim()) {
+            providedConfig = cfg.trim().startsWith('{') ? JSON.parse(cfg) : cfg;
+          }
+        } catch (e) {
+          // Failed to parse data-config
+        }
+        return providedConfig || {};
+      }
+
+      const embedConfig = readEmbedConfig();
+
+      // Also check for data-datafiles attribute (used by HtmlEmbed component)
+      let providedData = null;
+      try {
+        let mountEl = container;
+        while (mountEl && !mountEl.getAttribute?.('data-datafiles')) {
+          mountEl = mountEl.parentElement;
+        }
+        const attr = mountEl && mountEl.getAttribute ? mountEl.getAttribute('data-datafiles') : null;
+        if (attr && attr.trim()) {
+          providedData = attr.trim();
+        }
+      } catch (e) {}
+
+      // Metrics configuration - exactly matching the image
+      const METRICS = [
+        { key: 'arithmetic_mean', label: 'Arithmetic mean of LLM scores', yAxisLabel: 'Score' },
+        { key: 'harmonic_mean', label: 'Harmonic mean of LLM scores', yAxisLabel: 'Score' }
+      ];
+
+      // Determine data URL - try config first, then data attribute, then default
+      const dataUrlFromConfig = embedConfig.dataUrl;
+      const dataUrlFromAttr = providedData;
+      const DEFAULT_CSV = '/data/stats_L15F21576.csv';
+      const ensureDataPrefix = (p) => (typeof p === 'string' && p && !p.includes('/')) ? `/data/${p}` : p;
+
+      const CSV_PATHS = dataUrlFromConfig
+        ? [dataUrlFromConfig]
+        : (dataUrlFromAttr
+          ? [ensureDataPrefix(dataUrlFromAttr)]
+          : [
+              DEFAULT_CSV,
+              './assets/data/stats_L15F21576.csv',
+              '../assets/data/stats_L15F21576.csv',
+              '../../assets/data/stats_L15F21576.csv',
+              './assets/data/sweep_1d_metrics.csv',
+              '../assets/data/sweep_1d_metrics.csv'
+            ]);
+
+      // Get categorical colors for lines
+      const getLineColor = () => {
+        try {
+          if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') {
+            const colors = window.ColorPalettes.getColors('categorical', 1);
+            if (colors && colors.length > 0) return colors[0];
+          }
+        } catch (_) {}
+        return getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim() || '#E889AB';
+      };
+
+      // Configuration
+      const CONFIG = {
+        csvPaths: CSV_PATHS,
+        xColumn: embedConfig.xColumn || 'alpha',
+        metrics: METRICS,
+        chartHeight: 240,
+        margin: { top: 20, right: 20, bottom: 40, left: 50 },
+        zoomExtent: [1.0, 8],
+        xAxisLabel: embedConfig.xAxisLabel || 'Steering coefficient α',
+        lineColor: embedConfig.lineColor || getLineColor()
+      };
+
+      // Create grid
+      const grid = document.createElement('div');
+      grid.className = 'd3-harmonic-mean__grid';
+      container.appendChild(grid);
+
+      // Create legend container
+      const legend = document.createElement('div');
+      legend.className = 'd3-harmonic-mean__legend';
+      container.appendChild(legend);
+
+      // Create chart cells
+      CONFIG.metrics.forEach((metricConfig, idx) => {
+        const cell = document.createElement('div');
+        cell.className = 'chart-cell';
+        cell.style.zIndex = CONFIG.metrics.length - idx;
+        cell.innerHTML = `
+        <div class="chart-cell__title">${metricConfig.label}</div>
+        <button class="reset-button">Reset</button>
+        <div class="chart-cell__body"></div>
+      `;
+        grid.appendChild(cell);
+      });
+
+      // Data
+      let allData = [];
+
+      // Function to determine smart format based on data values
+      function createSmartFormatter(values) {
+        if (!values || values.length === 0) return (v) => v;
+
+        const min = d3.min(values);
+        const max = d3.max(values);
+        const range = max - min;
+
+        // Check if all values are effectively integers (within 0.001 tolerance)
+        const allIntegers = values.every(v => Math.abs(v - Math.round(v)) < 0.001);
+
+        // Large numbers (billions): format as "X.XXB"
+        if (max >= 1e9) {
+          return (v) => {
+            const billions = v / 1e9;
+            return allIntegers && billions === Math.round(billions)
+              ? d3.format('d')(Math.round(billions)) + 'B'
+              : d3.format('.2f')(billions) + 'B';
+          };
+        }
+
+        // Millions: format as "X.XXM" or "XM"
+        if (max >= 1e6) {
+          return (v) => {
+            const millions = v / 1e6;
+            return allIntegers && millions === Math.round(millions)
+              ? d3.format('d')(Math.round(millions)) + 'M'
+              : d3.format('.2f')(millions) + 'M';
+          };
+        }
+
+        // Thousands: format as "X.Xk" or "Xk"
+        if (max >= 1000 && range >= 100) {
+          return (v) => {
+            const thousands = v / 1000;
+            return allIntegers && thousands === Math.round(thousands)
+              ? d3.format('d')(Math.round(thousands)) + 'k'
+              : d3.format('.1f')(thousands) + 'k';
+          };
+        }
+
+        // Regular numbers
+        if (allIntegers) {
+          return (v) => d3.format('d')(Math.round(v));
+        }
+
+        // Small decimals: use appropriate precision
+        if (range < 1) {
+          return (v) => d3.format('.3f')(v);
+        } else if (range < 10) {
+          return (v) => d3.format('.2f')(v);
+        } else {
+          return (v) => d3.format('.1f')(v);
+        }
+      }
+
+      // Init each chart
+      function initChart(cellElement, metricConfig) {
+        const bodyEl = cellElement.querySelector('.chart-cell__body');
+        const resetBtn = cellElement.querySelector('.reset-button');
+
+        const metricKey = metricConfig.key;
+        let hasMoved = false;
+
+        // Tooltip
+        let tip = cellElement.querySelector('.d3-tooltip');
+        let tipInner;
+        if (!tip) {
+          tip = document.createElement('div');
+          tip.className = 'd3-tooltip';
+          Object.assign(tip.style, {
+            position: 'absolute', top: '0px', left: '0px', transform: 'translate(-9999px, -9999px)', pointerEvents: 'none',
+            padding: '10px 12px', borderRadius: '12px', fontSize: '12px', lineHeight: '1.35', border: '1px solid var(--border-color)',
+            background: 'var(--surface-bg)', color: 'var(--text-color)', boxShadow: '0 8px 32px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.12)', opacity: '0', transition: 'opacity .12s ease', zIndex: '20'
+          });
+          tipInner = document.createElement('div');
+          tipInner.className = 'd3-tooltip__inner';
+          tip.appendChild(tipInner);
+          cellElement.appendChild(tip);
+        } else {
+          tipInner = tip.querySelector('.d3-tooltip__inner') || tip;
+        }
+
+        // Create SVG
+        const svg = d3.select(bodyEl).append('svg').attr('width', '100%').style('display', 'block');
+
+        // Clip path
+        const clipId = 'clip-' + Math.random().toString(36).slice(2);
+        const clipPath = svg.append('defs').append('clipPath').attr('id', clipId);
+        const clipRect = clipPath.append('rect');
+
+        // Groups
+        const g = svg.append('g');
+        const gGrid = g.append('g').attr('class', 'grid');
+        const gAxes = g.append('g').attr('class', 'axes');
+        const gPlot = g.append('g').attr('class', 'plot').attr('clip-path', `url(#${clipId})`);
+        const gHover = g.append('g').attr('class', 'hover-layer');
+        const overlay = g.append('rect').attr('class', 'overlay').attr('fill', 'none').attr('pointer-events', 'all').style('cursor', 'grab')
+          .on('mousedown', function () {
+            d3.select(this).style('cursor', 'grabbing');
+            tip.style.opacity = '0';
+            if (hoverLine) hoverLine.style('display', 'none');
+          })
+          .on('mouseup', function () { d3.select(this).style('cursor', 'grab'); });
+
+        // Scales
+        const xScale = d3.scaleLinear();
+        const yScale = d3.scaleLinear();
+
+        // Hover state
+        let hoverLine = null;
+        let dataPoints = [];
+        let hideTipTimer = null;
+        let hasMeanStd = false;
+
+        // Formatters (will be set in render())
+        let formatX = (v) => v;
+        let formatY = (v) => v;
+
+        // Zoom
+        const zoom = d3.zoom().scaleExtent(CONFIG.zoomExtent).on('zoom', zoomed);
+        overlay.call(zoom);
+
+        function zoomed(event) {
+          const transform = event.transform;
+          hasMoved = transform.k !== 1 || transform.x !== 0 || transform.y !== 0;
+          updateResetButton();
+
+          const newXScale = transform.rescaleX(xScale);
+          const newYScale = transform.rescaleY(yScale);
+
+          const innerWidth = xScale.range()[1];
+
+          // Update grid
+          const gridTicks = newYScale.ticks(5);
+          gGrid.selectAll('line').data(gridTicks).join('line')
+            .attr('x1', 0).attr('x2', innerWidth)
+            .attr('y1', d => newYScale(d)).attr('y2', d => newYScale(d))
+            .attr('stroke', 'var(--grid-color)');
+
+          // Update uncertainty band (if mean/std available)
+          if (hasMeanStd && dataPoints[0] && dataPoints[0].yUpper != null) {
+            const area = d3.area()
+              .x(d => newXScale(d.x))
+              .y0(d => newYScale(d.yLower))
+              .y1(d => newYScale(d.yUpper))
+              .curve(d3.curveMonotoneX);
+
+            gPlot.selectAll('path.uncertainty-band')
+              .attr('d', area(dataPoints));
+          }
+
+          // Update line
+          const line = d3.line()
+            .x(d => newXScale(d.x))
+            .y(d => newYScale(d.y))
+            .curve(d3.curveMonotoneX);
+
+          gPlot.selectAll('path.main-line')
+            .attr('d', line(dataPoints));
+
+          // Update axes
+          gAxes.select('.x-axis').call(d3.axisBottom(newXScale).ticks(5).tickSizeOuter(0).tickFormat(formatX));
+          gAxes.select('.y-axis').call(d3.axisLeft(newYScale).ticks(5).tickSizeOuter(0).tickFormat(formatY));
+        }
+
+        function updateResetButton() {
+          if (hasMoved) {
+            resetBtn.style.display = 'block';
+            requestAnimationFrame(() => { resetBtn.style.opacity = '1'; });
+          } else {
+            resetBtn.style.opacity = '0';
+            setTimeout(() => { if (!hasMoved) resetBtn.style.display = 'none'; }, 200);
+          }
+        }
+
+        function render() {
+          const rect = bodyEl.getBoundingClientRect();
+          const width = Math.max(1, Math.round(rect.width || 400));
+          const height = CONFIG.chartHeight;
+          svg.attr('width', width).attr('height', height);
+
+          const margin = CONFIG.margin;
+          const innerWidth = width - margin.left - margin.right;
+          const innerHeight = height - margin.top - margin.bottom;
+
+          g.attr('transform', `translate(${margin.left},${margin.top})`);
+
+          // Filter and prepare data for this metric
+          // Support both mean/std columns and direct value columns
+          const meanKey = `${metricKey}_mean`;
+          const stdKey = `${metricKey}_std`;
+          hasMeanStd = allData.some(d => d[meanKey] != null && d[stdKey] != null);
+          
+          if (hasMeanStd) {
+            // Data has mean and std columns
+            dataPoints = allData
+              .filter(d => d[CONFIG.xColumn] != null && !isNaN(d[CONFIG.xColumn]) && 
+                          d[meanKey] != null && !isNaN(d[meanKey]) &&
+                          d[stdKey] != null && !isNaN(d[stdKey]))
+              .map(d => ({ 
+                x: +d[CONFIG.xColumn], 
+                y: +d[meanKey],
+                yUpper: +d[meanKey] + +d[stdKey],
+                yLower: +d[meanKey] - +d[stdKey]
+              }))
+              .sort((a, b) => a.x - b.x);
+          } else {
+            // Data has direct value columns (fallback)
+            dataPoints = allData
+              .filter(d => d[CONFIG.xColumn] != null && !isNaN(d[CONFIG.xColumn]) && d[metricKey] != null && !isNaN(d[metricKey]))
+              .map(d => ({ x: +d[CONFIG.xColumn], y: +d[metricKey] }))
+              .sort((a, b) => a.x - b.x);
+          }
+
+          if (!dataPoints.length) {
+            return;
+          }
+
+          // Auto-compute domains from data
+          const xExtent = d3.extent(dataPoints, d => d.x);
+          const yExtent = hasMeanStd 
+            ? d3.extent([...dataPoints.map(d => d.yUpper), ...dataPoints.map(d => d.yLower)])
+            : d3.extent(dataPoints, d => d.y);
+          
+          // Ensure Y axis never goes below 0
+          const yDomain = [Math.max(0, yExtent[0]), yExtent[1]];
+
+          xScale.domain(xExtent).range([0, innerWidth]);
+          yScale.domain(yDomain).range([innerHeight, 0]);
+
+          // Create smart formatters based on actual data
+          const xValues = dataPoints.map(d => d.x);
+          const yValues = dataPoints.map(d => d.y);
+          formatX = createSmartFormatter(xValues);
+          formatY = createSmartFormatter(yValues);
+
+          // Update clip
+          clipRect.attr('x', 0).attr('y', 0).attr('width', innerWidth).attr('height', innerHeight);
+
+          // Update overlay
+          overlay.attr('x', 0).attr('y', 0).attr('width', innerWidth).attr('height', innerHeight);
+
+          // Update zoom extent
+          zoom.extent([[0, 0], [innerWidth, innerHeight]])
+            .translateExtent([[0, 0], [innerWidth, innerHeight]]);
+
+          // Grid
+          gGrid.selectAll('line').data(yScale.ticks(5)).join('line')
+            .attr('x1', 0).attr('x2', innerWidth)
+            .attr('y1', d => yScale(d)).attr('y2', d => yScale(d))
+            .attr('stroke', 'var(--grid-color)');
+
+          // Axes
+          gAxes.selectAll('*').remove();
+          gAxes.append('g').attr('class', 'x-axis').attr('transform', `translate(0,${innerHeight})`)
+            .call(d3.axisBottom(xScale).ticks(5).tickSizeOuter(0).tickFormat(formatX));
+          gAxes.append('g').attr('class', 'y-axis')
+            .call(d3.axisLeft(yScale).ticks(5).tickSizeOuter(0).tickFormat(formatY));
+          gAxes.selectAll('.domain, .tick line').attr('stroke', 'var(--axis-color)');
+          gAxes.selectAll('text').attr('fill', 'var(--tick-color)');
+
+          // Axis labels
+          gAxes.append('text')
+            .attr('class', 'axis-label')
+            .attr('x', innerWidth / 2)
+            .attr('y', innerHeight + 32)
+            .attr('text-anchor', 'middle')
+            .text(CONFIG.xAxisLabel);
+
+          gAxes.append('text')
+            .attr('class', 'axis-label')
+            .attr('transform', 'rotate(-90)')
+            .attr('x', -innerHeight / 2)
+            .attr('y', -38)
+            .attr('text-anchor', 'middle')
+            .text(metricConfig.yAxisLabel || 'Value');
+
+          // Uncertainty band (if mean/std available)
+          if (hasMeanStd) {
+            const area = d3.area()
+              .x(d => xScale(d.x))
+              .y0(d => yScale(d.yLower))
+              .y1(d => yScale(d.yUpper))
+              .curve(d3.curveMonotoneX);
+
+            gPlot.selectAll('path.uncertainty-band').data([dataPoints]).join('path')
+              .attr('class', 'uncertainty-band')
+              .attr('d', area);
+          }
+
+          // Main line
+          const mainLine = d3.line()
+            .x(d => xScale(d.x))
+            .y(d => yScale(d.y))
+            .curve(d3.curveMonotoneX);
+
+          gPlot.selectAll('path.main-line').data([dataPoints]).join('path')
+            .attr('class', 'main-line')
+            .attr('fill', 'none')
+            .attr('stroke', CONFIG.lineColor)
+            .attr('stroke-width', 2)
+            .attr('opacity', 0.85)
+            .attr('d', mainLine);
+
+          // Hover
+          setupHover(innerWidth, innerHeight);
+        }
+
+        function setupHover(innerWidth, innerHeight) {
+          gHover.selectAll('*').remove();
+
+          hoverLine = gHover.append('line')
+            .style('stroke', 'var(--text-color)')
+            .attr('stroke-opacity', 0.25)
+            .attr('stroke-width', 1)
+            .attr('y1', 0)
+            .attr('y2', innerHeight)
+            .style('display', 'none')
+            .attr('pointer-events', 'none');
+
+          overlay.on('mousemove', function (ev) {
+            if (ev.buttons === 0) onHoverMove(ev);
+          }).on('mouseleave', onHoverLeave);
+        }
+
+        function onHoverMove(ev) {
+          if (hideTipTimer) { clearTimeout(hideTipTimer); hideTipTimer = null; }
+
+          const [mx, my] = d3.pointer(ev, overlay.node());
+          const targetX = xScale.invert(mx);
+          
+          // Find nearest data point
+          let nearest = dataPoints[0];
+          let minDist = Math.abs(dataPoints[0].x - targetX);
+          for (let i = 1; i < dataPoints.length; i++) {
+            const dist = Math.abs(dataPoints[i].x - targetX);
+            if (dist < minDist) {
+              minDist = dist;
+              nearest = dataPoints[i];
+            }
+          }
+
+          const xpx = xScale(nearest.x);
+          hoverLine.attr('x1', xpx).attr('x2', xpx).style('display', null);
+
+          let html = `<div><strong>${metricConfig.label}</strong></div>`;
+          html += `<div>α = ${formatX(nearest.x)}</div>`;
+          if (hasMeanStd && nearest.yUpper != null && nearest.yLower != null) {
+            html += `<div>Mean: ${formatY(nearest.y)}</div>`;
+            html += `<div>± 1 std dev: [${formatY(nearest.yLower)}, ${formatY(nearest.yUpper)}]</div>`;
+          } else {
+            html += `<div>${metricConfig.yAxisLabel || 'Value'}: ${formatY(nearest.y)}</div>`;
+          }
+
+          tipInner.innerHTML = html;
+          const offsetX = 12, offsetY = 12;
+          tip.style.opacity = '1';
+          tip.style.transform = `translate(${Math.round(mx + offsetX + CONFIG.margin.left)}px, ${Math.round(my + offsetY + CONFIG.margin.top)}px)`;
+        }
+
+        function onHoverLeave() {
+          hideTipTimer = setTimeout(() => {
+            tip.style.opacity = '0';
+            tip.style.transform = 'translate(-9999px, -9999px)';
+            if (hoverLine) hoverLine.style('display', 'none');
+          }, 100);
+        }
+
+        // Reset button
+        resetBtn.addEventListener('click', () => {
+          overlay.transition().duration(750).call(zoom.transform, d3.zoomIdentity);
+        });
+
+        return { render };
+      }
+
+      // Transform long format CSV to wide format
+      function transformLongToWide(longData) {
+        // Mapping from CSV quantity names to embed metric keys
+        const quantityMap = {
+          'arithmetic_mean': 'arithmetic_mean',
+          'harmonic_mean': 'harmonic_mean'
+        };
+
+        // Group by steering_intensity
+        const grouped = {};
+        longData.forEach(row => {
+          const intensity = parseFloat(row.steering_intensity);
+          if (isNaN(intensity)) return;
+          
+          if (!grouped[intensity]) {
+            grouped[intensity] = { alpha: intensity, steering_intensity: intensity };
+          }
+
+          const quantity = row.quantity;
+          const statType = row.stat_type;
+          const value = parseFloat(row.value);
+          
+          if (isNaN(value)) return;
+
+          // Map quantity name to metric key
+          const metricKey = quantityMap[quantity] || quantity;
+          
+          // Store mean and std
+          if (statType === 'mean') {
+            grouped[intensity][`${metricKey}_mean`] = value;
+          } else if (statType === 'std') {
+            grouped[intensity][`${metricKey}_std`] = value;
+          }
+        });
+
+        return Object.values(grouped);
+      }
+
+      // Load data
+      async function load() {
+        try {
+          const fetchFirstAvailable = async (paths) => {
+            for (const p of paths) {
+              try {
+                const r = await fetch(p, { cache: 'no-cache' });
+                if (r.ok) return await r.text();
+              } catch(_){}
+            }
+            throw new Error('CSV not found at any of the paths: ' + paths.join(', '));
+          };
+
+          const csvText = await fetchFirstAvailable(CONFIG.csvPaths);
+          const rawData = d3.csvParse(csvText);
+          
+          // Check if data is in long format (has quantity, stat_type, value columns)
+          const isLongFormat = rawData.length > 0 && 
+            rawData[0].hasOwnProperty('quantity') && 
+            rawData[0].hasOwnProperty('stat_type') && 
+            rawData[0].hasOwnProperty('value');
+          
+          if (isLongFormat) {
+            allData = transformLongToWide(rawData);
+            // Update xColumn to use steering_intensity if available
+            if (allData.length > 0 && allData[0].steering_intensity != null) {
+              CONFIG.xColumn = 'steering_intensity';
+            }
+          } else {
+            allData = rawData;
+          }
+
+          // Init all charts
+          const cells = Array.from(grid.querySelectorAll('.chart-cell'));
+          const chartInstances = cells.map((cell, idx) => initChart(cell, CONFIG.metrics[idx]));
+
+          // Render all
+          chartInstances.forEach(chart => chart.render());
+
+          // Update legend (once for the whole group)
+          const hasMeanStd = allData.some(d => {
+            return CONFIG.metrics.some(m => {
+              const meanKey = `${m.key}_mean`;
+              const stdKey = `${m.key}_std`;
+              return d[meanKey] != null && d[stdKey] != null;
+            });
+          });
+
+          if (hasMeanStd) {
+            legend.innerHTML = `
+              <div class="d3-harmonic-mean__legend-item">
+                <div class="d3-harmonic-mean__legend-line" style="background: ${CONFIG.lineColor};"></div>
+                <span>Mean</span>
+              </div>
+              <div class="d3-harmonic-mean__legend-item">
+                <div class="d3-harmonic-mean__legend-band" style="background: ${CONFIG.lineColor}; opacity: 0.2;"></div>
+                <span>± 1 std dev</span>
+              </div>
+            `;
+          } else {
+            legend.innerHTML = `
+              <div class="d3-harmonic-mean__legend-item">
+                <div class="d3-harmonic-mean__legend-line" style="background: ${CONFIG.lineColor};"></div>
+                <span>Mean</span>
+              </div>
+            `;
+          }
+
+          // Responsive - observe container for resize
+          let resizeTimer;
+          const handleResize = () => {
+            clearTimeout(resizeTimer);
+            resizeTimer = setTimeout(() => {
+              chartInstances.forEach(chart => chart.render());
+            }, 100);
+          };
+
+          const ro = window.ResizeObserver ? new ResizeObserver(handleResize) : null;
+          if (ro) {
+            ro.observe(container);
+          }
+
+          // Also observe window resize as fallback
+          window.addEventListener('resize', handleResize);
+
+          // Force a re-render after a short delay to ensure proper sizing
+          setTimeout(() => {
+            chartInstances.forEach(chart => chart.render());
+          }, 100);
+
+        } catch (e) {
+          const pre = document.createElement('pre');
+          pre.textContent = 'Error loading data: ' + (e && e.message ? e.message : e);
+          pre.style.color = 'var(--danger, #b00020)';
+          pre.style.fontSize = '12px';
+          container.appendChild(pre);
+        }
+      }
+
+      load();
+    };
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true });
+    } else {
+      ensureD3(bootstrap);
+    }
+  })();
+</script>
+

app/src/content/embeds/d3-six-line-chart.html

@@ -0,0 +1,874 @@
+<!-- 
+  Multi-Line Charts Grid
+  
+  A configurable grid of line charts with zoom/pan, smoothing, and hover tooltips.
+  
+  Configuration via data-config attribute:
+  {
+    "dataUrl": "./assets/data/your_data.csv",
+    "charts": [
+      { "title": "Chart 1", "metric": "metric1" },
+      { "title": "Chart 2", "metric": "metric2" },
+      ...
+    ],
+    "smoothingWindow": 15,
+    "smoothingCurve": "monotoneX",
+    "gridColumns": 3  // Optional: number of columns (default: 3)
+  }
+  
+  CSV format: run_name, step, metric1, metric2, ...
+  
+  Example usage in MDX:
+  <HtmlEmbed 
+    src="embeds/d3-six-line-charts.html" 
+    config={{ 
+      dataUrl: "./assets/data/attention_evals.csv",
+      charts: [
+        { title: "HellaSwag", metric: "hellaswag" },
+        { title: "MMLU", metric: "mmlu" },
+        { title: "ARC", metric: "arc" },
+        { title: "PIQA", metric: "piqa" },
+        { title: "OpenBookQA", metric: "openbookqa" },
+        { title: "WinoGrande", metric: "winogrande" }
+      ],
+      smoothingWindow: 15
+    }} 
+  />
+-->
+<div class="d3-multi-charts"></div>
+<style>
+  .d3-multi-charts {
+    position: relative;
+    container-type: inline-size;
+  }
+
+  /* Legend header */
+  .d3-multi-charts__header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 16px;
+  }
+
+  .d3-multi-charts__header .legend-bottom {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    color: var(--text-color);
+    max-width: 80%;
+  }
+
+  .d3-multi-charts__header .legend-bottom .legend-title {
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--text-color);
+  }
+
+  .d3-multi-charts__header .legend-bottom .items {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px 14px;
+    justify-content: center;
+  }
+
+  .d3-multi-charts__header .legend-bottom .item {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    white-space: nowrap;
+    cursor: pointer;
+  }
+
+  .d3-multi-charts__header .legend-bottom .swatch {
+    width: 14px;
+    height: 14px;
+    border-radius: 3px;
+    border: 1px solid var(--border-color);
+    display: inline-block;
+  }
+
+  /* Grid */
+  .d3-multi-charts__grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 12px;
+  }
+
+  /* Container queries - basées sur la largeur du container parent, pas de la viewport */
+  @container (max-width: 900px) {
+    .d3-multi-charts__grid {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @container (max-width: 600px) {
+    .d3-multi-charts__grid {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .chart-cell {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    padding: 12px;
+    box-shadow: inset 0 0 0 1px var(--border-color);
+    border-radius: 8px;
+  }
+
+  .chart-cell__title {
+    font-size: 13px;
+    font-weight: 700;
+    color: var(--text-color);
+    margin-bottom: 8px;
+    padding-bottom: 8px;
+  }
+
+  .chart-cell__body {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+  }
+
+  .chart-cell__body svg {
+    max-width: 100%;
+    height: auto;
+    display: block;
+  }
+
+  /* Reset button */
+  .chart-cell .reset-button {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    z-index: 10;
+    display: none;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    font-size: 11px;
+    padding: 3px 6px;
+    border-radius: 4px;
+    background: var(--surface-bg);
+    color: var(--text-color);
+    border: 1px solid var(--border-color);
+    cursor: pointer;
+  }
+
+  /* Axes */
+  .d3-multi-charts .axes path {
+    display: none;
+  }
+
+  .d3-multi-charts .axes line {
+    stroke: var(--axis-color);
+  }
+
+  .d3-multi-charts .axes text {
+    fill: var(--tick-color);
+    font-size: 10px;
+  }
+
+  .d3-multi-charts .axis-label {
+    fill: var(--text-color);
+    font-size: 10px;
+    font-weight: 300;
+    opacity: 0.7;
+    stroke: var(--page-bg, white);
+    stroke-width: 3px;
+    paint-order: stroke fill;
+  }
+
+  .d3-multi-charts .grid line {
+    stroke: var(--grid-color);
+  }
+
+  /* Lines */
+  .d3-multi-charts path.main-line {
+    transition: opacity 0.2s ease;
+  }
+
+  .d3-multi-charts path.ghost-line {
+    transition: opacity 0.6s ease;
+  }
+
+  /* Ghosting on hover */
+  .d3-multi-charts.hovering path.main-line.ghost {
+    opacity: .25;
+  }
+
+  .d3-multi-charts.hovering path.ghost-line.ghost {
+    opacity: .05;
+  }
+
+  .d3-multi-charts.hovering .legend-bottom .item.ghost {
+    opacity: .35;
+  }
+
+  /* Tooltip */
+  .d3-multi-charts .d3-tooltip {
+    z-index: 20;
+    backdrop-filter: saturate(1.12) blur(8px);
+  }
+
+  .d3-multi-charts .d3-tooltip__inner {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    min-width: 200px;
+  }
+
+  .d3-multi-charts .d3-tooltip__inner>div:first-child {
+    font-weight: 800;
+    letter-spacing: 0.1px;
+    margin-bottom: 0;
+  }
+
+  .d3-multi-charts .d3-tooltip__inner>div:nth-child(2) {
+    font-size: 11px;
+    color: var(--muted-color);
+    display: block;
+    margin-top: -4px;
+    margin-bottom: 2px;
+    letter-spacing: 0.1px;
+  }
+
+  .d3-multi-charts .d3-tooltip__inner>div:nth-child(n+3) {
+    padding-top: 6px;
+    border-top: 1px solid var(--border-color);
+  }
+
+  .d3-multi-charts .d3-tooltip__color-dot {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border-radius: 3px;
+    border: 1px solid var(--border-color);
+  }
+
+  /* Trackio footer removed */
+</style>
+<script>
+  (() => {
+    const ensureD3 = (cb) => {
+      if (window.d3 && typeof window.d3.select === 'function') return cb();
+      let 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); }
+      const onReady = () => { if (window.d3 && typeof window.d3.select === 'function') cb(); };
+      s.addEventListener('load', onReady, { once: true }); if (window.d3) onReady();
+    };
+
+    const bootstrap = () => {
+      const scriptEl = document.currentScript;
+      let container = scriptEl ? scriptEl.previousElementSibling : null;
+      if (!(container && container.classList && container.classList.contains('d3-multi-charts'))) {
+        const cs = Array.from(document.querySelectorAll('.d3-multi-charts')).filter(el => !(el.dataset && el.dataset.mounted === 'true'));
+        container = cs[cs.length - 1] || null;
+      }
+      if (!container) return;
+      if (container.dataset) { if (container.dataset.mounted === 'true') return; container.dataset.mounted = 'true'; }
+
+      const d3 = window.d3;
+
+      // Read config from HtmlEmbed props
+      function readEmbedConfig() {
+        let mountEl = container;
+        while (mountEl && !mountEl.getAttribute?.('data-config')) {
+          mountEl = mountEl.parentElement;
+        }
+
+        let providedConfig = null;
+        try {
+          const cfg = mountEl && mountEl.getAttribute ? mountEl.getAttribute('data-config') : null;
+          if (cfg && cfg.trim()) {
+            providedConfig = cfg.trim().startsWith('{') ? JSON.parse(cfg) : cfg;
+          }
+        } catch (e) {
+          // Failed to parse data-config
+        }
+        return providedConfig || {};
+      }
+
+      const embedConfig = readEmbedConfig();
+
+      // Configuration
+      const CONFIG = {
+        dataUrl: embedConfig.dataUrl || './assets/data/attention_evals.csv',
+        charts: embedConfig.charts || [],
+        smoothing: embedConfig.smoothing !== undefined ? embedConfig.smoothing : false,
+        smoothingWindow: embedConfig.smoothingWindow || 15,
+        smoothingCurve: embedConfig.smoothingCurve || 'monotoneX',
+        gridColumns: embedConfig.gridColumns || 3,
+        chartHeight: 240,
+        margin: { top: 20, right: 20, bottom: 40, left: 50 },
+        zoomExtent: [1.0, 8],
+        xAxisLabel: embedConfig.xAxisLabel || 'Consumed tokens',
+        yAxisLabel: embedConfig.yAxisLabel || 'Value',
+        xColumn: embedConfig.xColumn || 'tokens',
+        runColumn: embedConfig.runColumn || 'run_name'
+      };
+
+      if (!CONFIG.charts.length) {
+        container.innerHTML = '<p style="color: var(--danger); font-size: 12px;">Error: No charts configured</p>';
+        return;
+      }
+
+      // Create legend header
+      const header = document.createElement('div');
+      header.className = 'd3-multi-charts__header';
+      header.innerHTML = `
+      <div class="legend-bottom">
+        <div class="legend-title">Legend</div>
+        <div class="items"></div>
+      </div>
+    `;
+      container.appendChild(header);
+
+      // Create grid
+      const grid = document.createElement('div');
+      grid.className = 'd3-multi-charts__grid';
+      container.appendChild(grid);
+
+      // Trackio footer removed
+
+      // Create chart cells
+      CONFIG.charts.forEach((chartConfig, idx) => {
+        const cell = document.createElement('div');
+        cell.className = 'chart-cell';
+        cell.style.zIndex = CONFIG.charts.length - idx; // Stacking order
+        cell.innerHTML = `
+        <div class="chart-cell__title">${chartConfig.title}</div>
+        <button class="reset-button">Reset</button>
+        <div class="chart-cell__body"></div>
+      `;
+        grid.appendChild(cell);
+      });
+
+      // Data
+      let allData = [];
+      let runList = [];
+      let runColorMap = {};
+
+      // Smoothing
+      const getCurve = (smooth) => {
+        if (!smooth) return d3.curveLinear;
+        switch (CONFIG.smoothingCurve) {
+          case 'catmullRom': return d3.curveCatmullRom.alpha(0.5);
+          case 'monotoneX': return d3.curveMonotoneX;
+          case 'basis': return d3.curveBasis;
+          default: return d3.curveLinear;
+        }
+      };
+
+      function movingAverage(values, windowSize) {
+        if (!Array.isArray(values) || values.length === 0 || windowSize <= 1) return values;
+        const half = Math.floor(windowSize / 2);
+        const out = new Array(values.length);
+        for (let i = 0; i < values.length; i++) {
+          let sum = 0; let count = 0;
+          const start = Math.max(0, i - half);
+          const end = Math.min(values.length - 1, i + half);
+          for (let j = start; j <= end; j++) { if (!Number.isNaN(values[j].value)) { sum += values[j].value; count++; } }
+          const avg = count ? (sum / count) : values[i].value;
+          out[i] = { step: values[i].step, value: avg };
+        }
+        return out;
+      }
+
+      function applySmoothing(values, smooth) {
+        if (!smooth) return values;
+        return movingAverage(values, CONFIG.smoothingWindow);
+      }
+
+      // Function to determine smart format based on data values
+      function createSmartFormatter(values) {
+        if (!values || values.length === 0) return (v) => v;
+
+        const min = d3.min(values);
+        const max = d3.max(values);
+        const range = max - min;
+
+        // Check if all values are effectively integers (within 0.001 tolerance)
+        const allIntegers = values.every(v => Math.abs(v - Math.round(v)) < 0.001);
+
+        // Large numbers (billions): format as "X.XXB"
+        if (max >= 1e9) {
+          return (v) => {
+            const billions = v / 1e9;
+            return allIntegers && billions === Math.round(billions)
+              ? d3.format('d')(Math.round(billions)) + 'B'
+              : d3.format('.2f')(billions) + 'B';
+          };
+        }
+
+        // Millions: format as "X.XXM" or "XM"
+        if (max >= 1e6) {
+          return (v) => {
+            const millions = v / 1e6;
+            return allIntegers && millions === Math.round(millions)
+              ? d3.format('d')(Math.round(millions)) + 'M'
+              : d3.format('.2f')(millions) + 'M';
+          };
+        }
+
+        // Thousands: format as "X.Xk" or "Xk"
+        if (max >= 1000 && range >= 100) {
+          return (v) => {
+            const thousands = v / 1000;
+            return allIntegers && thousands === Math.round(thousands)
+              ? d3.format('d')(Math.round(thousands)) + 'k'
+              : d3.format('.1f')(thousands) + 'k';
+          };
+        }
+
+        // Regular numbers
+        if (allIntegers) {
+          return (v) => d3.format('d')(Math.round(v));
+        }
+
+        // Small decimals: use appropriate precision
+        if (range < 1) {
+          return (v) => d3.format('.3f')(v);
+        } else if (range < 10) {
+          return (v) => d3.format('.2f')(v);
+        } else {
+          return (v) => d3.format('.1f')(v);
+        }
+      }
+
+      // Colors
+      const getRunColors = (n) => {
+        try { if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') return window.ColorPalettes.getColors('categorical', n); } catch (_) { }
+        const primary = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim() || '#E889AB';
+        return [primary, '#4EA5B7', '#E38A42', '#CEC0FA', '#9B59B6', '#16A085', ...(d3.schemeTableau10 || [])].slice(0, n);
+      };
+
+      // Init each chart
+      function initChart(cellElement, chartConfig) {
+        const bodyEl = cellElement.querySelector('.chart-cell__body');
+        const resetBtn = cellElement.querySelector('.reset-button');
+
+        const metric = chartConfig.metric;
+        let smoothEnabled = CONFIG.smoothing;
+        let hasMoved = false;
+
+        // Tooltip
+        let tip = cellElement.querySelector('.d3-tooltip');
+        let tipInner;
+        if (!tip) {
+          tip = document.createElement('div');
+          tip.className = 'd3-tooltip';
+          Object.assign(tip.style, {
+            position: 'absolute', top: '0px', left: '0px', transform: 'translate(-9999px, -9999px)', pointerEvents: 'none',
+            padding: '10px 12px', borderRadius: '12px', fontSize: '12px', lineHeight: '1.35', border: '1px solid var(--border-color)',
+            background: 'var(--surface-bg)', color: 'var(--text-color)', boxShadow: '0 8px 32px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.12)', opacity: '0', transition: 'opacity .12s ease', zIndex: '20'
+          });
+          tipInner = document.createElement('div');
+          tipInner.className = 'd3-tooltip__inner';
+          tip.appendChild(tipInner);
+          cellElement.appendChild(tip);
+        } else {
+          tipInner = tip.querySelector('.d3-tooltip__inner') || tip;
+        }
+
+        // Create SVG
+        const svg = d3.select(bodyEl).append('svg').attr('width', '100%').style('display', 'block');
+
+        // Clip path
+        const clipId = 'clip-' + Math.random().toString(36).slice(2);
+        const clipPath = svg.append('defs').append('clipPath').attr('id', clipId);
+        const clipRect = clipPath.append('rect');
+
+        // Groups
+        const g = svg.append('g');
+        const gGrid = g.append('g').attr('class', 'grid');
+        const gAxes = g.append('g').attr('class', 'axes');
+        const gPlot = g.append('g').attr('class', 'plot').attr('clip-path', `url(#${clipId})`);
+        const gHover = g.append('g').attr('class', 'hover-layer');
+        const overlay = g.append('rect').attr('class', 'overlay').attr('fill', 'none').attr('pointer-events', 'all').style('cursor', 'grab')
+          .on('mousedown', function () {
+            d3.select(this).style('cursor', 'grabbing');
+            tip.style.opacity = '0';
+            if (hoverLine) hoverLine.style('display', 'none');
+          })
+          .on('mouseup', function () { d3.select(this).style('cursor', 'grab'); });
+
+        // Scales
+        const xScale = d3.scaleLinear();
+        const yScale = d3.scaleLinear();
+
+        // Hover state
+        let hoverLine = null;
+        let steps = [];
+        let hideTipTimer = null;
+
+        // Formatters (will be set in render())
+        let formatStep = (v) => v;
+        let formatValue = (v) => v;
+
+        // Zoom
+        const zoom = d3.zoom().scaleExtent(CONFIG.zoomExtent).on('zoom', zoomed);
+        overlay.call(zoom);
+
+        function zoomed(event) {
+          const transform = event.transform;
+          hasMoved = transform.k !== 1 || transform.x !== 0 || transform.y !== 0;
+          updateResetButton();
+
+          const newXScale = transform.rescaleX(xScale);
+          const newYScale = transform.rescaleY(yScale);
+
+          const innerWidth = xScale.range()[1];
+
+          // Update grid
+          const gridTicks = newYScale.ticks(5);
+          gGrid.selectAll('line').data(gridTicks).join('line')
+            .attr('x1', 0).attr('x2', innerWidth)
+            .attr('y1', d => newYScale(d)).attr('y2', d => newYScale(d))
+            .attr('stroke', 'var(--grid-color)');
+
+          // Update lines
+          const line = d3.line()
+            .x(d => newXScale(d.step))
+            .y(d => newYScale(d.value))
+            .curve(getCurve(smoothEnabled));
+
+          gPlot.selectAll('path.ghost-line')
+            .attr('d', d => {
+              const rawLine = d3.line().x(d => newXScale(d.step)).y(d => newYScale(d.value)).curve(d3.curveLinear);
+              return rawLine(d.values);
+            });
+
+          gPlot.selectAll('path.main-line')
+            .attr('d', d => line(applySmoothing(d.values, smoothEnabled)));
+
+          // Update axes
+          gAxes.select('.x-axis').call(d3.axisBottom(newXScale).ticks(5).tickSizeOuter(0).tickFormat(formatStep));
+          gAxes.select('.y-axis').call(d3.axisLeft(newYScale).ticks(5).tickSizeOuter(0).tickFormat(formatValue));
+        }
+
+        function updateResetButton() {
+          if (hasMoved) {
+            resetBtn.style.display = 'block';
+            requestAnimationFrame(() => { resetBtn.style.opacity = '1'; });
+          } else {
+            resetBtn.style.opacity = '0';
+            setTimeout(() => { if (!hasMoved) resetBtn.style.display = 'none'; }, 200);
+          }
+        }
+
+        function render() {
+          const rect = bodyEl.getBoundingClientRect();
+          const width = Math.max(1, Math.round(rect.width || 400));
+          const height = CONFIG.chartHeight;
+          svg.attr('width', width).attr('height', height);
+
+          const margin = CONFIG.margin;
+          const innerWidth = width - margin.left - margin.right;
+          const innerHeight = height - margin.top - margin.bottom;
+
+          g.attr('transform', `translate(${margin.left},${margin.top})`);
+
+          // Filter data for this metric
+          const metricData = allData.filter(d => d[metric] != null && !isNaN(d[metric]));
+
+          if (!metricData.length) {
+            return;
+          }
+
+          // Auto-compute domains from data
+          const stepExtent = d3.extent(metricData, d => d.step);
+          const valueExtent = d3.extent(metricData, d => d[metric]);
+
+          xScale.domain(stepExtent).range([0, innerWidth]);
+          yScale.domain(valueExtent).range([innerHeight, 0]);
+
+          // Create smart formatters based on actual data
+          const stepValues = metricData.map(d => d.step);
+          const metricValues = metricData.map(d => d[metric]);
+          formatStep = createSmartFormatter(stepValues);
+          formatValue = createSmartFormatter(metricValues);
+
+          // Update clip
+          clipRect.attr('x', 0).attr('y', 0).attr('width', innerWidth).attr('height', innerHeight);
+
+          // Update overlay
+          overlay.attr('x', 0).attr('y', 0).attr('width', innerWidth).attr('height', innerHeight);
+
+          // Update zoom extent
+          zoom.extent([[0, 0], [innerWidth, innerHeight]])
+            .translateExtent([[0, 0], [innerWidth, innerHeight]]);
+
+          // Grid
+          gGrid.selectAll('line').data(yScale.ticks(5)).join('line')
+            .attr('x1', 0).attr('x2', innerWidth)
+            .attr('y1', d => yScale(d)).attr('y2', d => yScale(d))
+            .attr('stroke', 'var(--grid-color)');
+
+          // Axes
+          gAxes.selectAll('*').remove();
+          gAxes.append('g').attr('class', 'x-axis').attr('transform', `translate(0,${innerHeight})`)
+            .call(d3.axisBottom(xScale).ticks(5).tickSizeOuter(0).tickFormat(formatStep));
+          gAxes.append('g').attr('class', 'y-axis')
+            .call(d3.axisLeft(yScale).ticks(5).tickSizeOuter(0).tickFormat(formatValue));
+          gAxes.selectAll('.domain, .tick line').attr('stroke', 'var(--axis-color)');
+          gAxes.selectAll('text').attr('fill', 'var(--tick-color)');
+
+          // Axis labels
+          gAxes.append('text')
+            .attr('class', 'axis-label')
+            .attr('x', innerWidth / 2)
+            .attr('y', innerHeight + 32)
+            .attr('text-anchor', 'middle')
+            .text(CONFIG.xAxisLabel);
+
+          gAxes.append('text')
+            .attr('class', 'axis-label')
+            .attr('transform', 'rotate(-90)')
+            .attr('x', -innerHeight / 2)
+            .attr('y', -38)
+            .attr('text-anchor', 'middle')
+            .text(CONFIG.yAxisLabel);
+
+          // Group data by run
+          const dataByRun = {};
+          runList.forEach(run => { dataByRun[run] = []; });
+          metricData.forEach(d => {
+            if (dataByRun[d.run]) dataByRun[d.run].push({ step: d.step, value: d[metric] });
+          });
+          runList.forEach(run => { dataByRun[run].sort((a, b) => a.step - b.step); });
+
+          const series = runList.map(run => ({ run, color: runColorMap[run], values: dataByRun[run] })).filter(s => s.values.length > 0);
+
+          // Ghost lines
+          const ghostLine = d3.line().x(d => xScale(d.step)).y(d => yScale(d.value)).curve(d3.curveLinear);
+          gPlot.selectAll('path.ghost-line').data(series, d => d.run).join('path')
+            .attr('class', 'ghost-line')
+            .attr('fill', 'none')
+            .attr('stroke', d => d.color)
+            .attr('stroke-width', 1.5)
+            .attr('opacity', smoothEnabled ? 0.15 : 0)
+            .attr('pointer-events', 'none')
+            .attr('d', d => ghostLine(d.values));
+
+          // Main lines
+          const mainLine = d3.line().x(d => xScale(d.step)).y(d => yScale(d.value)).curve(getCurve(smoothEnabled));
+          gPlot.selectAll('path.main-line').data(series, d => d.run).join('path')
+            .attr('class', 'main-line')
+            .attr('fill', 'none')
+            .attr('stroke', d => d.color)
+            .attr('stroke-width', 2)
+            .attr('opacity', 0.85)
+            .attr('d', d => mainLine(applySmoothing(d.values, smoothEnabled)));
+
+          // Hover
+          setupHover(series, innerWidth, innerHeight);
+        }
+
+        function setupHover(series, innerWidth, innerHeight) {
+          gHover.selectAll('*').remove();
+
+          hoverLine = gHover.append('line')
+            .style('stroke', 'var(--text-color)')
+            .attr('stroke-opacity', 0.25)
+            .attr('stroke-width', 1)
+            .attr('y1', 0)
+            .attr('y2', innerHeight)
+            .style('display', 'none')
+            .attr('pointer-events', 'none');
+
+          const stepSet = new Set();
+          series.forEach(s => s.values.forEach(v => stepSet.add(v.step)));
+          steps = Array.from(stepSet).sort((a, b) => a - b);
+
+          overlay.on('mousemove', function (ev) {
+            if (ev.buttons === 0) onHoverMove(ev, series);
+          }).on('mouseleave', onHoverLeave);
+        }
+
+        function onHoverMove(ev, series) {
+          if (hideTipTimer) { clearTimeout(hideTipTimer); hideTipTimer = null; }
+
+          const [mx, my] = d3.pointer(ev, overlay.node());
+          const targetStep = xScale.invert(mx);
+          const nearest = steps.reduce((best, t) => Math.abs(t - targetStep) < Math.abs(best - targetStep) ? t : best, steps[0]);
+
+          const xpx = xScale(nearest);
+          hoverLine.attr('x1', xpx).attr('x2', xpx).style('display', null);
+
+          let html = `<div><strong>${chartConfig.title}</strong></div>`;
+          html += `<div>${formatStep(nearest)}</div>`;
+
+          const entries = series.map(s => {
+            const values = s.values;
+            let before = null, after = null;
+            for (let i = 0; i < values.length; i++) {
+              if (values[i].step <= nearest) before = values[i];
+              if (values[i].step >= nearest && !after) { after = values[i]; break; }
+            }
+
+            let interpolatedValue = null;
+            if (before && after && before.step !== after.step) {
+              const t = (nearest - before.step) / (after.step - before.step);
+              interpolatedValue = before.value + t * (after.value - before.value);
+            } else if (before && before.step === nearest) {
+              interpolatedValue = before.value;
+            } else if (after && after.step === nearest) {
+              interpolatedValue = after.value;
+            } else if (before) {
+              interpolatedValue = before.value;
+            } else if (after) {
+              interpolatedValue = after.value;
+            }
+
+            return { run: s.run, color: s.color, value: interpolatedValue };
+          }).filter(e => e.value != null);
+
+          entries.sort((a, b) => b.value - a.value);
+
+          entries.forEach(e => {
+            html += `<div style="display:flex;align-items:center;gap:8px;"><span class="d3-tooltip__color-dot" style="background:${e.color}"></span><span>${e.run}</span><span style="margin-left:auto;font-weight:normal;">${e.value.toFixed(4)}</span></div>`;
+          });
+
+          tipInner.innerHTML = html;
+          const offsetX = 12, offsetY = 12;
+          tip.style.opacity = '1';
+          tip.style.transform = `translate(${Math.round(mx + offsetX + CONFIG.margin.left)}px, ${Math.round(my + offsetY + CONFIG.margin.top)}px)`;
+        }
+
+        function onHoverLeave() {
+          hideTipTimer = setTimeout(() => {
+            tip.style.opacity = '0';
+            tip.style.transform = 'translate(-9999px, -9999px)';
+            if (hoverLine) hoverLine.style('display', 'none');
+          }, 100);
+        }
+
+        // Reset button
+        resetBtn.addEventListener('click', () => {
+          overlay.transition().duration(750).call(zoom.transform, d3.zoomIdentity);
+        });
+
+        return { render };
+      }
+
+      // Load data
+      async function load() {
+        try {
+          const response = await fetch(CONFIG.dataUrl, { cache: 'no-cache' });
+          if (!response.ok) throw new Error(`Failed to load data: ${response.status} ${response.statusText}`);
+
+          const csvText = await response.text();
+
+          // Parse CSV (long format: run_name, metric, tokens, value)
+          const rawRows = d3.csvParse(csvText, d => ({
+            run: (d[CONFIG.runColumn] || '').trim(),
+            metric: (d.metric || '').trim(),
+            tokens: +d[CONFIG.xColumn],
+            value: +d.value
+          }));
+
+          // Pivot data: group by run + tokens, create columns for each metric
+          const pivotMap = new Map();
+          rawRows.forEach(row => {
+            if (isNaN(row.tokens) || isNaN(row.value)) return;
+
+            const key = `${row.run}|${row.tokens}`;
+            if (!pivotMap.has(key)) {
+              pivotMap.set(key, { run: row.run, step: row.tokens });
+            }
+            const pivotRow = pivotMap.get(key);
+            pivotRow[row.metric] = row.value;
+          });
+
+          allData = Array.from(pivotMap.values());
+
+          runList = Array.from(new Set(allData.map(d => d.run))).sort();
+
+          const colors = getRunColors(runList.length);
+          runList.forEach((run, i) => { runColorMap[run] = colors[i % colors.length]; });
+
+          // Build legend
+          const legendItemsHost = header.querySelector('.legend-bottom .items');
+          if (legendItemsHost) {
+            legendItemsHost.innerHTML = runList.map(run => {
+              const color = runColorMap[run];
+              return `<span class="item" data-run="${run}"><span class="swatch" style="background:${color}"></span><span>${run}</span></span>`;
+            }).join('');
+
+            // Add hover interactions
+            legendItemsHost.querySelectorAll('.item').forEach(el => {
+              el.addEventListener('mouseenter', () => {
+                const run = el.getAttribute('data-run');
+                container.classList.add('hovering');
+                grid.querySelectorAll('path.main-line').forEach(path => {
+                  const pathRun = d3.select(path).datum()?.run;
+                  path.classList.toggle('ghost', pathRun !== run);
+                });
+                grid.querySelectorAll('path.ghost-line').forEach(path => {
+                  const pathRun = d3.select(path).datum()?.run;
+                  path.classList.toggle('ghost', pathRun !== run);
+                });
+                legendItemsHost.querySelectorAll('.item').forEach(it => {
+                  it.classList.toggle('ghost', it.getAttribute('data-run') !== run);
+                });
+              });
+
+              el.addEventListener('mouseleave', () => {
+                container.classList.remove('hovering');
+                grid.querySelectorAll('path.main-line').forEach(path => path.classList.remove('ghost'));
+                grid.querySelectorAll('path.ghost-line').forEach(path => path.classList.remove('ghost'));
+                legendItemsHost.querySelectorAll('.item').forEach(it => it.classList.remove('ghost'));
+              });
+            });
+          }
+
+          // Init all charts
+          const cells = Array.from(grid.querySelectorAll('.chart-cell'));
+          const chartInstances = cells.map((cell, idx) => initChart(cell, CONFIG.charts[idx]));
+
+          // Render all
+          chartInstances.forEach(chart => chart.render());
+
+          // Responsive - observe container for resize
+          let resizeTimer;
+          const handleResize = () => {
+            clearTimeout(resizeTimer);
+            resizeTimer = setTimeout(() => {
+              chartInstances.forEach(chart => chart.render());
+            }, 100);
+          };
+
+          const ro = window.ResizeObserver ? new ResizeObserver(handleResize) : null;
+          if (ro) {
+            ro.observe(container);
+          }
+
+          // Also observe window resize as fallback
+          window.addEventListener('resize', handleResize);
+
+          // Force a re-render after a short delay to ensure proper sizing
+          setTimeout(() => {
+            chartInstances.forEach(chart => chart.render());
+          }, 100);
+
+        } catch (e) {
+          const pre = document.createElement('pre');
+          pre.textContent = 'Error loading data: ' + (e && e.message ? e.message : e);
+          pre.style.color = 'var(--danger, #b00020)';
+          pre.style.fontSize = '12px';
+          container.appendChild(pre);
+        }
+      }
+
+      load();
+    };
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true });
+    } else {
+      ensureD3(bootstrap);
+    }
+  })();
+</script>

app/src/content/embeds/d3-sweep-1d-metrics.html

@@ -0,0 +1,862 @@
+<!-- 
+  Sweep 1D Metrics - Six Metrics Grid
+  
+  A grid of 6 line charts showing metrics as a function of steering coefficient alpha.
+  
+  Configuration via data-config attribute:
+  {
+    "dataUrl": "./assets/data/sweep_1d_metrics.csv",
+    "xColumn": "alpha",
+    "metrics": [
+      { "key": "concept_inclusion", "label": "LLM concept score", "yAxisLabel": "Score" },
+      { "key": "eiffel", "label": "Explicit concept inclusion", "yAxisLabel": "Fraction" },
+      { "key": "instruction_following", "label": "LLM instruction score", "yAxisLabel": "Score" },
+      { "key": "surprise", "label": "Surprise in reference model", "yAxisLabel": "Value" },
+      { "key": "fluency", "label": "LLM fluency score", "yAxisLabel": "Score" },
+      { "key": "repetition", "label": "3-gram repetition", "yAxisLabel": "Fraction" }
+    ]
+  }
+  
+  CSV format (with mean/std): 
+    alpha, concept_inclusion_mean, concept_inclusion_std, instruction_following_mean, instruction_following_std, ...
+  CSV format (simple, fallback): 
+    alpha, concept_inclusion, instruction_following, fluency, surprise, repetition, eiffel
+  
+  Example usage in MDX:
+  <HtmlEmbed 
+    src="embeds/d3-sweep-1d-metrics.html" 
+    config={{ 
+      dataUrl: "./assets/data/sweep_1d_metrics.csv"
+    }} 
+  />
+-->
+<div class="d3-sweep-1d"></div>
+<style>
+  .d3-sweep-1d {
+    position: relative;
+    container-type: inline-size;
+  }
+
+  /* Grid - 2 columns x 3 rows */
+  .d3-sweep-1d__grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 16px;
+  }
+
+  /* Container queries - basées sur la largeur du container parent */
+  @container (max-width: 600px) {
+    .d3-sweep-1d__grid {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .chart-cell {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    padding: 12px;
+    box-shadow: inset 0 0 0 1px var(--border-color);
+    border-radius: 8px;
+    background: var(--page-bg);
+  }
+
+  .chart-cell__title {
+    font-size: 13px;
+    font-weight: 700;
+    color: var(--text-color);
+    margin-bottom: 8px;
+    padding-bottom: 8px;
+  }
+
+  .chart-cell__body {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+  }
+
+  .chart-cell__body svg {
+    max-width: 100%;
+    height: auto;
+    display: block;
+  }
+
+  .d3-sweep-1d__legend {
+    display: flex;
+    gap: 16px;
+    margin-top: 16px;
+    font-size: 11px;
+    color: var(--text-color);
+    align-items: center;
+    justify-content: center;
+  }
+
+  .d3-sweep-1d__legend-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .d3-sweep-1d__legend-line {
+    width: 20px;
+    height: 2px;
+    border-radius: 1px;
+  }
+
+  .d3-sweep-1d__legend-band {
+    width: 20px;
+    height: 12px;
+    border-radius: 2px;
+  }
+
+  /* Reset button */
+  .chart-cell .reset-button {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    z-index: 10;
+    display: none;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    font-size: 11px;
+    padding: 3px 6px;
+    border-radius: 4px;
+    background: var(--surface-bg);
+    color: var(--text-color);
+    border: 1px solid var(--border-color);
+    cursor: pointer;
+  }
+
+  /* Axes */
+  .d3-sweep-1d .axes path {
+    display: none;
+  }
+
+  .d3-sweep-1d .axes line {
+    stroke: var(--axis-color);
+  }
+
+  .d3-sweep-1d .axes text {
+    fill: var(--tick-color);
+    font-size: 10px;
+  }
+
+  .d3-sweep-1d .axis-label {
+    fill: var(--text-color);
+    font-size: 10px;
+    font-weight: 300;
+    opacity: 0.7;
+    stroke: var(--page-bg, white);
+    stroke-width: 3px;
+    paint-order: stroke fill;
+  }
+
+  .d3-sweep-1d .grid line {
+    stroke: var(--grid-color);
+  }
+
+  /* Lines */
+  .d3-sweep-1d path.main-line {
+    fill: none;
+    stroke-width: 2;
+    transition: opacity 0.2s ease;
+  }
+
+  /* Uncertainty band */
+  .d3-sweep-1d path.uncertainty-band {
+    fill: var(--primary-color, #E889AB);
+    fill-opacity: 0.2;
+    stroke: none;
+  }
+
+  /* Tooltip */
+  .d3-sweep-1d .d3-tooltip {
+    z-index: 20;
+    backdrop-filter: saturate(1.12) blur(8px);
+  }
+
+  .d3-sweep-1d .d3-tooltip__inner {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    min-width: 200px;
+  }
+
+  .d3-sweep-1d .d3-tooltip__inner>div:first-child {
+    font-weight: 800;
+    letter-spacing: 0.1px;
+    margin-bottom: 0;
+  }
+
+  .d3-sweep-1d .d3-tooltip__inner>div:nth-child(2) {
+    font-size: 11px;
+    color: var(--muted-color);
+    display: block;
+    margin-top: -4px;
+    margin-bottom: 2px;
+    letter-spacing: 0.1px;
+  }
+</style>
+<script>
+  (() => {
+    const ensureD3 = (cb) => {
+      if (window.d3 && typeof window.d3.select === 'function') return cb();
+      let 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); }
+      const onReady = () => { if (window.d3 && typeof window.d3.select === 'function') cb(); };
+      s.addEventListener('load', onReady, { once: true }); if (window.d3) onReady();
+    };
+
+    const bootstrap = () => {
+      const scriptEl = document.currentScript;
+      let container = scriptEl ? scriptEl.previousElementSibling : null;
+      if (!(container && container.classList && container.classList.contains('d3-sweep-1d'))) {
+        const cs = Array.from(document.querySelectorAll('.d3-sweep-1d')).filter(el => !(el.dataset && el.dataset.mounted === 'true'));
+        container = cs[cs.length - 1] || null;
+      }
+      if (!container) return;
+      if (container.dataset) { if (container.dataset.mounted === 'true') return; container.dataset.mounted = 'true'; }
+
+      const d3 = window.d3;
+
+      // Read config from HtmlEmbed props
+      function readEmbedConfig() {
+        let mountEl = container;
+        while (mountEl && !mountEl.getAttribute?.('data-config')) {
+          mountEl = mountEl.parentElement;
+        }
+
+        let providedConfig = null;
+        try {
+          const cfg = mountEl && mountEl.getAttribute ? mountEl.getAttribute('data-config') : null;
+          if (cfg && cfg.trim()) {
+            providedConfig = cfg.trim().startsWith('{') ? JSON.parse(cfg) : cfg;
+          }
+        } catch (e) {
+          // Failed to parse data-config
+        }
+        return providedConfig || {};
+      }
+
+      const embedConfig = readEmbedConfig();
+
+      // Also check for data-datafiles attribute (used by HtmlEmbed component)
+      let providedData = null;
+      try {
+        let mountEl = container;
+        while (mountEl && !mountEl.getAttribute?.('data-datafiles')) {
+          mountEl = mountEl.parentElement;
+        }
+        const attr = mountEl && mountEl.getAttribute ? mountEl.getAttribute('data-datafiles') : null;
+        if (attr && attr.trim()) {
+          providedData = attr.trim();
+        }
+      } catch (e) {}
+
+      // Default metrics configuration - order matches the image exactly
+      const DEFAULT_METRICS = [
+        { key: 'concept_inclusion', label: 'LLM concept score', yAxisLabel: 'Score' },
+        { key: 'eiffel', label: 'Explicit concept inclusion', yAxisLabel: 'Fraction' },
+        { key: 'instruction_following', label: 'LLM instruction score', yAxisLabel: 'Score' },
+        { key: 'surprise', label: 'Surprise in reference model', yAxisLabel: 'Value' },
+        { key: 'fluency', label: 'LLM fluency score', yAxisLabel: 'Score' },
+        { key: 'repetition', label: '3-gram repetition', yAxisLabel: 'Fraction' }
+      ];
+
+      // Determine data URL - try config first, then data attribute, then default
+      const dataUrlFromConfig = embedConfig.dataUrl;
+      const dataUrlFromAttr = providedData;
+      const DEFAULT_CSV = '/data/stats_L15F21576.csv';
+      const ensureDataPrefix = (p) => (typeof p === 'string' && p && !p.includes('/')) ? `/data/${p}` : p;
+
+      const CSV_PATHS = dataUrlFromConfig
+        ? [dataUrlFromConfig]
+        : (dataUrlFromAttr
+          ? [ensureDataPrefix(dataUrlFromAttr)]
+          : [
+              DEFAULT_CSV,
+              './assets/data/stats_L15F21576.csv',
+              '../assets/data/stats_L15F21576.csv',
+              '../../assets/data/stats_L15F21576.csv',
+              './assets/data/sweep_1d_metrics.csv',
+              '../assets/data/sweep_1d_metrics.csv'
+            ]);
+
+      // Get categorical colors for lines
+      const getLineColor = () => {
+        try {
+          if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') {
+            const colors = window.ColorPalettes.getColors('categorical', 1);
+            if (colors && colors.length > 0) return colors[0];
+          }
+        } catch (_) {}
+        return getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim() || '#E889AB';
+      };
+
+      // Configuration
+      const CONFIG = {
+        csvPaths: CSV_PATHS,
+        xColumn: embedConfig.xColumn || 'alpha',
+        metrics: embedConfig.metrics || DEFAULT_METRICS,
+        chartHeight: 240,
+        margin: { top: 20, right: 20, bottom: 40, left: 50 },
+        zoomExtent: [1.0, 8],
+        xAxisLabel: embedConfig.xAxisLabel || 'Steering coefficient α',
+        lineColor: embedConfig.lineColor || getLineColor()
+      };
+
+      // Create grid
+      const grid = document.createElement('div');
+      grid.className = 'd3-sweep-1d__grid';
+      container.appendChild(grid);
+
+      // Create legend container
+      const legend = document.createElement('div');
+      legend.className = 'd3-sweep-1d__legend';
+      container.appendChild(legend);
+
+      // Create chart cells
+      CONFIG.metrics.forEach((metricConfig, idx) => {
+        const cell = document.createElement('div');
+        cell.className = 'chart-cell';
+        cell.style.zIndex = CONFIG.metrics.length - idx;
+        cell.innerHTML = `
+        <div class="chart-cell__title">${metricConfig.label}</div>
+        <button class="reset-button">Reset</button>
+        <div class="chart-cell__body"></div>
+      `;
+        grid.appendChild(cell);
+      });
+
+      // Data
+      let allData = [];
+
+      // Function to determine smart format based on data values
+      function createSmartFormatter(values) {
+        if (!values || values.length === 0) return (v) => v;
+
+        const min = d3.min(values);
+        const max = d3.max(values);
+        const range = max - min;
+
+        // Check if all values are effectively integers (within 0.001 tolerance)
+        const allIntegers = values.every(v => Math.abs(v - Math.round(v)) < 0.001);
+
+        // Large numbers (billions): format as "X.XXB"
+        if (max >= 1e9) {
+          return (v) => {
+            const billions = v / 1e9;
+            return allIntegers && billions === Math.round(billions)
+              ? d3.format('d')(Math.round(billions)) + 'B'
+              : d3.format('.2f')(billions) + 'B';
+          };
+        }
+
+        // Millions: format as "X.XXM" or "XM"
+        if (max >= 1e6) {
+          return (v) => {
+            const millions = v / 1e6;
+            return allIntegers && millions === Math.round(millions)
+              ? d3.format('d')(Math.round(millions)) + 'M'
+              : d3.format('.2f')(millions) + 'M';
+          };
+        }
+
+        // Thousands: format as "X.Xk" or "Xk"
+        if (max >= 1000 && range >= 100) {
+          return (v) => {
+            const thousands = v / 1000;
+            return allIntegers && thousands === Math.round(thousands)
+              ? d3.format('d')(Math.round(thousands)) + 'k'
+              : d3.format('.1f')(thousands) + 'k';
+          };
+        }
+
+        // Regular numbers
+        if (allIntegers) {
+          return (v) => d3.format('d')(Math.round(v));
+        }
+
+        // Small decimals: use appropriate precision
+        if (range < 1) {
+          return (v) => d3.format('.3f')(v);
+        } else if (range < 10) {
+          return (v) => d3.format('.2f')(v);
+        } else {
+          return (v) => d3.format('.1f')(v);
+        }
+      }
+
+      // Init each chart
+      function initChart(cellElement, metricConfig) {
+        const bodyEl = cellElement.querySelector('.chart-cell__body');
+        const resetBtn = cellElement.querySelector('.reset-button');
+
+        const metricKey = metricConfig.key;
+        let hasMoved = false;
+
+        // Tooltip
+        let tip = cellElement.querySelector('.d3-tooltip');
+        let tipInner;
+        if (!tip) {
+          tip = document.createElement('div');
+          tip.className = 'd3-tooltip';
+          Object.assign(tip.style, {
+            position: 'absolute', top: '0px', left: '0px', transform: 'translate(-9999px, -9999px)', pointerEvents: 'none',
+            padding: '10px 12px', borderRadius: '12px', fontSize: '12px', lineHeight: '1.35', border: '1px solid var(--border-color)',
+            background: 'var(--surface-bg)', color: 'var(--text-color)', boxShadow: '0 8px 32px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.12)', opacity: '0', transition: 'opacity .12s ease', zIndex: '20'
+          });
+          tipInner = document.createElement('div');
+          tipInner.className = 'd3-tooltip__inner';
+          tip.appendChild(tipInner);
+          cellElement.appendChild(tip);
+        } else {
+          tipInner = tip.querySelector('.d3-tooltip__inner') || tip;
+        }
+
+        // Create SVG
+        const svg = d3.select(bodyEl).append('svg').attr('width', '100%').style('display', 'block');
+
+        // Clip path
+        const clipId = 'clip-' + Math.random().toString(36).slice(2);
+        const clipPath = svg.append('defs').append('clipPath').attr('id', clipId);
+        const clipRect = clipPath.append('rect');
+
+        // Groups
+        const g = svg.append('g');
+        const gGrid = g.append('g').attr('class', 'grid');
+        const gAxes = g.append('g').attr('class', 'axes');
+        const gPlot = g.append('g').attr('class', 'plot').attr('clip-path', `url(#${clipId})`);
+        const gHover = g.append('g').attr('class', 'hover-layer');
+        const overlay = g.append('rect').attr('class', 'overlay').attr('fill', 'none').attr('pointer-events', 'all').style('cursor', 'grab')
+          .on('mousedown', function () {
+            d3.select(this).style('cursor', 'grabbing');
+            tip.style.opacity = '0';
+            if (hoverLine) hoverLine.style('display', 'none');
+          })
+          .on('mouseup', function () { d3.select(this).style('cursor', 'grab'); });
+
+        // Scales
+        const xScale = d3.scaleLinear();
+        const yScale = d3.scaleLinear();
+
+        // Hover state
+        let hoverLine = null;
+        let dataPoints = [];
+        let hideTipTimer = null;
+        let hasMeanStd = false;
+
+        // Formatters (will be set in render())
+        let formatX = (v) => v;
+        let formatY = (v) => v;
+
+        // Zoom
+        const zoom = d3.zoom().scaleExtent(CONFIG.zoomExtent).on('zoom', zoomed);
+        overlay.call(zoom);
+
+        function zoomed(event) {
+          const transform = event.transform;
+          hasMoved = transform.k !== 1 || transform.x !== 0 || transform.y !== 0;
+          updateResetButton();
+
+          const newXScale = transform.rescaleX(xScale);
+          const newYScale = transform.rescaleY(yScale);
+
+          const innerWidth = xScale.range()[1];
+
+          // Update grid
+          const gridTicks = newYScale.ticks(5);
+          gGrid.selectAll('line').data(gridTicks).join('line')
+            .attr('x1', 0).attr('x2', innerWidth)
+            .attr('y1', d => newYScale(d)).attr('y2', d => newYScale(d))
+            .attr('stroke', 'var(--grid-color)');
+
+          // Update uncertainty band (if mean/std available)
+          if (hasMeanStd && dataPoints[0] && dataPoints[0].yUpper != null) {
+            const area = d3.area()
+              .x(d => newXScale(d.x))
+              .y0(d => newYScale(d.yLower))
+              .y1(d => newYScale(d.yUpper))
+              .curve(d3.curveMonotoneX);
+
+            gPlot.selectAll('path.uncertainty-band')
+              .attr('d', area(dataPoints));
+          }
+
+          // Update line
+          const line = d3.line()
+            .x(d => newXScale(d.x))
+            .y(d => newYScale(d.y))
+            .curve(d3.curveMonotoneX);
+
+          gPlot.selectAll('path.main-line')
+            .attr('d', line(dataPoints));
+
+          // Update axes
+          gAxes.select('.x-axis').call(d3.axisBottom(newXScale).ticks(5).tickSizeOuter(0).tickFormat(formatX));
+          gAxes.select('.y-axis').call(d3.axisLeft(newYScale).ticks(5).tickSizeOuter(0).tickFormat(formatY));
+        }
+
+        function updateResetButton() {
+          if (hasMoved) {
+            resetBtn.style.display = 'block';
+            requestAnimationFrame(() => { resetBtn.style.opacity = '1'; });
+          } else {
+            resetBtn.style.opacity = '0';
+            setTimeout(() => { if (!hasMoved) resetBtn.style.display = 'none'; }, 200);
+          }
+        }
+
+        function render() {
+          const rect = bodyEl.getBoundingClientRect();
+          const width = Math.max(1, Math.round(rect.width || 400));
+          const height = CONFIG.chartHeight;
+          svg.attr('width', width).attr('height', height);
+
+          const margin = CONFIG.margin;
+          const innerWidth = width - margin.left - margin.right;
+          const innerHeight = height - margin.top - margin.bottom;
+
+          g.attr('transform', `translate(${margin.left},${margin.top})`);
+
+          // Filter and prepare data for this metric
+          // Support both mean/std columns and direct value columns
+          const meanKey = `${metricKey}_mean`;
+          const stdKey = `${metricKey}_std`;
+          hasMeanStd = allData.some(d => d[meanKey] != null && d[stdKey] != null);
+          
+          if (hasMeanStd) {
+            // Data has mean and std columns
+            dataPoints = allData
+              .filter(d => d[CONFIG.xColumn] != null && !isNaN(d[CONFIG.xColumn]) && 
+                          d[meanKey] != null && !isNaN(d[meanKey]) &&
+                          d[stdKey] != null && !isNaN(d[stdKey]))
+              .map(d => ({ 
+                x: +d[CONFIG.xColumn], 
+                y: +d[meanKey],
+                yUpper: +d[meanKey] + +d[stdKey],
+                yLower: +d[meanKey] - +d[stdKey]
+              }))
+              .sort((a, b) => a.x - b.x);
+          } else {
+            // Data has direct value columns (fallback)
+            dataPoints = allData
+              .filter(d => d[CONFIG.xColumn] != null && !isNaN(d[CONFIG.xColumn]) && d[metricKey] != null && !isNaN(d[metricKey]))
+              .map(d => ({ x: +d[CONFIG.xColumn], y: +d[metricKey] }))
+              .sort((a, b) => a.x - b.x);
+          }
+
+          if (!dataPoints.length) {
+            return;
+          }
+
+          // Auto-compute domains from data
+          const xExtent = d3.extent(dataPoints, d => d.x);
+          const yExtent = hasMeanStd 
+            ? d3.extent([...dataPoints.map(d => d.yUpper), ...dataPoints.map(d => d.yLower)])
+            : d3.extent(dataPoints, d => d.y);
+          
+          // Ensure Y axis never goes below 0
+          const yDomain = [Math.max(0, yExtent[0]), yExtent[1]];
+
+          xScale.domain(xExtent).range([0, innerWidth]);
+          yScale.domain(yDomain).range([innerHeight, 0]);
+
+          // Create smart formatters based on actual data
+          const xValues = dataPoints.map(d => d.x);
+          const yValues = dataPoints.map(d => d.y);
+          formatX = createSmartFormatter(xValues);
+          formatY = createSmartFormatter(yValues);
+
+          // Update clip
+          clipRect.attr('x', 0).attr('y', 0).attr('width', innerWidth).attr('height', innerHeight);
+
+          // Update overlay
+          overlay.attr('x', 0).attr('y', 0).attr('width', innerWidth).attr('height', innerHeight);
+
+          // Update zoom extent
+          zoom.extent([[0, 0], [innerWidth, innerHeight]])
+            .translateExtent([[0, 0], [innerWidth, innerHeight]]);
+
+          // Grid
+          gGrid.selectAll('line').data(yScale.ticks(5)).join('line')
+            .attr('x1', 0).attr('x2', innerWidth)
+            .attr('y1', d => yScale(d)).attr('y2', d => yScale(d))
+            .attr('stroke', 'var(--grid-color)');
+
+          // Axes
+          gAxes.selectAll('*').remove();
+          gAxes.append('g').attr('class', 'x-axis').attr('transform', `translate(0,${innerHeight})`)
+            .call(d3.axisBottom(xScale).ticks(5).tickSizeOuter(0).tickFormat(formatX));
+          gAxes.append('g').attr('class', 'y-axis')
+            .call(d3.axisLeft(yScale).ticks(5).tickSizeOuter(0).tickFormat(formatY));
+          gAxes.selectAll('.domain, .tick line').attr('stroke', 'var(--axis-color)');
+          gAxes.selectAll('text').attr('fill', 'var(--tick-color)');
+
+          // Axis labels
+          gAxes.append('text')
+            .attr('class', 'axis-label')
+            .attr('x', innerWidth / 2)
+            .attr('y', innerHeight + 32)
+            .attr('text-anchor', 'middle')
+            .text(CONFIG.xAxisLabel);
+
+          gAxes.append('text')
+            .attr('class', 'axis-label')
+            .attr('transform', 'rotate(-90)')
+            .attr('x', -innerHeight / 2)
+            .attr('y', -38)
+            .attr('text-anchor', 'middle')
+            .text(metricConfig.yAxisLabel || 'Value');
+
+          // Uncertainty band (if mean/std available)
+          if (hasMeanStd) {
+            const area = d3.area()
+              .x(d => xScale(d.x))
+              .y0(d => yScale(d.yLower))
+              .y1(d => yScale(d.yUpper))
+              .curve(d3.curveMonotoneX);
+
+            gPlot.selectAll('path.uncertainty-band').data([dataPoints]).join('path')
+              .attr('class', 'uncertainty-band')
+              .attr('d', area);
+          }
+
+          // Main line
+          const mainLine = d3.line()
+            .x(d => xScale(d.x))
+            .y(d => yScale(d.y))
+            .curve(d3.curveMonotoneX);
+
+          gPlot.selectAll('path.main-line').data([dataPoints]).join('path')
+            .attr('class', 'main-line')
+            .attr('fill', 'none')
+            .attr('stroke', CONFIG.lineColor)
+            .attr('stroke-width', 2)
+            .attr('opacity', 0.85)
+            .attr('d', mainLine);
+
+          // Hover
+          setupHover(innerWidth, innerHeight);
+        }
+
+        function setupHover(innerWidth, innerHeight) {
+          gHover.selectAll('*').remove();
+
+          hoverLine = gHover.append('line')
+            .style('stroke', 'var(--text-color)')
+            .attr('stroke-opacity', 0.25)
+            .attr('stroke-width', 1)
+            .attr('y1', 0)
+            .attr('y2', innerHeight)
+            .style('display', 'none')
+            .attr('pointer-events', 'none');
+
+          overlay.on('mousemove', function (ev) {
+            if (ev.buttons === 0) onHoverMove(ev);
+          }).on('mouseleave', onHoverLeave);
+        }
+
+        function onHoverMove(ev) {
+          if (hideTipTimer) { clearTimeout(hideTipTimer); hideTipTimer = null; }
+
+          const [mx, my] = d3.pointer(ev, overlay.node());
+          const targetX = xScale.invert(mx);
+          
+          // Find nearest data point
+          let nearest = dataPoints[0];
+          let minDist = Math.abs(dataPoints[0].x - targetX);
+          for (let i = 1; i < dataPoints.length; i++) {
+            const dist = Math.abs(dataPoints[i].x - targetX);
+            if (dist < minDist) {
+              minDist = dist;
+              nearest = dataPoints[i];
+            }
+          }
+
+          const xpx = xScale(nearest.x);
+          hoverLine.attr('x1', xpx).attr('x2', xpx).style('display', null);
+
+          let html = `<div><strong>${metricConfig.label}</strong></div>`;
+          html += `<div>α = ${formatX(nearest.x)}</div>`;
+          if (hasMeanStd && nearest.yUpper != null && nearest.yLower != null) {
+            html += `<div>Mean: ${formatY(nearest.y)}</div>`;
+            html += `<div>± 1 std dev: [${formatY(nearest.yLower)}, ${formatY(nearest.yUpper)}]</div>`;
+          } else {
+            html += `<div>${metricConfig.yAxisLabel || 'Value'}: ${formatY(nearest.y)}</div>`;
+          }
+
+          tipInner.innerHTML = html;
+          const offsetX = 12, offsetY = 12;
+          tip.style.opacity = '1';
+          tip.style.transform = `translate(${Math.round(mx + offsetX + CONFIG.margin.left)}px, ${Math.round(my + offsetY + CONFIG.margin.top)}px)`;
+        }
+
+        function onHoverLeave() {
+          hideTipTimer = setTimeout(() => {
+            tip.style.opacity = '0';
+            tip.style.transform = 'translate(-9999px, -9999px)';
+            if (hoverLine) hoverLine.style('display', 'none');
+          }, 100);
+        }
+
+        // Reset button
+        resetBtn.addEventListener('click', () => {
+          overlay.transition().duration(750).call(zoom.transform, d3.zoomIdentity);
+        });
+
+        return { render };
+      }
+
+      // Transform long format CSV to wide format
+      function transformLongToWide(longData) {
+        // Mapping from CSV quantity names to embed metric keys
+        const quantityMap = {
+          'llm_score_concept': 'concept_inclusion',
+          'eiffel': 'eiffel',
+          'llm_score_instruction': 'instruction_following',
+          'surprise': 'surprise',
+          'llm_score_fluency': 'fluency',
+          'rep3': 'repetition'
+        };
+
+        // Group by steering_intensity
+        const grouped = {};
+        longData.forEach(row => {
+          const intensity = parseFloat(row.steering_intensity);
+          if (isNaN(intensity)) return;
+          
+          if (!grouped[intensity]) {
+            grouped[intensity] = { alpha: intensity, steering_intensity: intensity };
+          }
+
+          const quantity = row.quantity;
+          const statType = row.stat_type;
+          const value = parseFloat(row.value);
+          
+          if (isNaN(value)) return;
+
+          // Map quantity name to metric key
+          const metricKey = quantityMap[quantity] || quantity;
+          
+          // Store mean and std
+          if (statType === 'mean') {
+            grouped[intensity][`${metricKey}_mean`] = value;
+          } else if (statType === 'std') {
+            grouped[intensity][`${metricKey}_std`] = value;
+          }
+        });
+
+        return Object.values(grouped);
+      }
+
+      // Load data
+      async function load() {
+        try {
+          const fetchFirstAvailable = async (paths) => {
+            for (const p of paths) {
+              try {
+                const r = await fetch(p, { cache: 'no-cache' });
+                if (r.ok) return await r.text();
+              } catch(_){}
+            }
+            throw new Error('CSV not found at any of the paths: ' + paths.join(', '));
+          };
+
+          const csvText = await fetchFirstAvailable(CONFIG.csvPaths);
+          const rawData = d3.csvParse(csvText);
+          
+          // Check if data is in long format (has quantity, stat_type, value columns)
+          const isLongFormat = rawData.length > 0 && 
+            rawData[0].hasOwnProperty('quantity') && 
+            rawData[0].hasOwnProperty('stat_type') && 
+            rawData[0].hasOwnProperty('value');
+          
+          if (isLongFormat) {
+            allData = transformLongToWide(rawData);
+            // Update xColumn to use steering_intensity if available
+            if (allData.length > 0 && allData[0].steering_intensity != null) {
+              CONFIG.xColumn = 'steering_intensity';
+            }
+          } else {
+            allData = rawData;
+          }
+
+          // Init all charts
+          const cells = Array.from(grid.querySelectorAll('.chart-cell'));
+          const chartInstances = cells.map((cell, idx) => initChart(cell, CONFIG.metrics[idx]));
+
+          // Render all
+          chartInstances.forEach(chart => chart.render());
+
+          // Update legend (once for the whole group)
+          const hasMeanStd = allData.some(d => {
+            return CONFIG.metrics.some(m => {
+              const meanKey = `${m.key}_mean`;
+              const stdKey = `${m.key}_std`;
+              return d[meanKey] != null && d[stdKey] != null;
+            });
+          });
+
+          if (hasMeanStd) {
+            legend.innerHTML = `
+              <div class="d3-sweep-1d__legend-item">
+                <div class="d3-sweep-1d__legend-line" style="background: ${CONFIG.lineColor};"></div>
+                <span>Mean</span>
+              </div>
+              <div class="d3-sweep-1d__legend-item">
+                <div class="d3-sweep-1d__legend-band" style="background: ${CONFIG.lineColor}; opacity: 0.2;"></div>
+                <span>± 1 std dev</span>
+              </div>
+            `;
+          } else {
+            legend.innerHTML = `
+              <div class="d3-sweep-1d__legend-item">
+                <div class="d3-sweep-1d__legend-line" style="background: ${CONFIG.lineColor};"></div>
+                <span>Mean</span>
+              </div>
+            `;
+          }
+
+          // Responsive - observe container for resize
+          let resizeTimer;
+          const handleResize = () => {
+            clearTimeout(resizeTimer);
+            resizeTimer = setTimeout(() => {
+              chartInstances.forEach(chart => chart.render());
+            }, 100);
+          };
+
+          const ro = window.ResizeObserver ? new ResizeObserver(handleResize) : null;
+          if (ro) {
+            ro.observe(container);
+          }
+
+          // Also observe window resize as fallback
+          window.addEventListener('resize', handleResize);
+
+          // Force a re-render after a short delay to ensure proper sizing
+          setTimeout(() => {
+            chartInstances.forEach(chart => chart.render());
+          }, 100);
+
+        } catch (e) {
+          const pre = document.createElement('pre');
+          pre.textContent = 'Error loading data: ' + (e && e.message ? e.message : e);
+          pre.style.color = 'var(--danger, #b00020)';
+          pre.style.fontSize = '12px';
+          container.appendChild(pre);
+        }
+      }
+
+      load();
+    };
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true });
+    } else {
+      ensureD3(bootstrap);
+    }
+  })();
+</script>
+

app/src/styles/_variables.css

@@ -11,7 +11,7 @@
   --default-font-family: Source Sans Pro, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 
   /* Brand (OKLCH base + derived states) */
-  --primary-base: oklch(0.75 0.12 337);
+  --primary-base: oklch(0.75 0.12 47);
   --primary-color: var(--primary-base);
   --primary-color-hover: oklch(from var(--primary-color) calc(l - 0.05) c h);
   --primary-color-active: oklch(from var(--primary-color) calc(l - 0.10) c h);