update

.gitignore

@@ -21,3 +21,5 @@ node_modules/
 
 # PDF export
 app/public/*.pdf
+app/public/*.png
+app/public/*.jpg

README.md

@@ -7,5 +7,13 @@ sdk: docker
 pinned: false
 header: mini
 app_port: 8080
-thumbnail: https://huggingface.co/spaces/HuggingFaceFW/blogpost-fine-tasks/resolve/main/app/assets/images/banner.png
----
+thumbnail: https://huggingface.co/spaces/tfrere/research-paper-template/thumb.jpg
+---
+
+TO DO : 
+
+- fix banner pour l'export pdf et la thumb
+- rename le titre ?
+- Vérifier la biliographie comment elle marche
+
+- deploy

app/.astro/astro/content.d.ts

@@ -151,7 +151,23 @@ declare module 'astro:content' {
 	>;
 
 	type ContentEntryMap = {
-		
+		"chapters": {
+"best-pratices.mdx": {
+	id: "best-pratices.mdx";
+  slug: "best-pratices";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+"writing-you-content.mdx": {
+	id: "writing-you-content.mdx";
+  slug: "writing-you-content";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+};
+
 	};
 
 	type DataEntryMap = {

app/astro.config.mjs

@@ -1,5 +1,6 @@
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
+import mermaid from 'astro-mermaid';
 import remarkMath from 'remark-math';
 import rehypeKatex from 'rehype-katex';
 import remarkToc from 'remark-toc';
@@ -11,8 +12,7 @@ import rehypeCitation from 'rehype-citation';
 
 export default defineConfig({
   output: 'static',
-  integrations: [mdx()]
-  ,
+  integrations: [mermaid({ theme: 'forest', autoTheme: true }), mdx()],
   devToolbar: {
     enabled: false
   },
@@ -23,9 +23,10 @@ export default defineConfig({
         dark: 'github-dark'
       },
       defaultColor: false,
-      wrap: true,
+      wrap: false,
       langAlias: {
-        mdx: 'js'
+        // Map MDX fences to TSX for better JSX tokenization
+        mdx: 'tsx'
       }
     },
     remarkPlugins: [

app/scripts/export-pdf.mjs

@@ -120,6 +120,29 @@ async function waitForPlotly(page, timeoutMs = 20000) {
   }, timeoutMs);
 }
 
+async function waitForD3(page, timeoutMs = 20000) {
+  await page.evaluate(async (timeout) => {
+    const start = Date.now();
+    const isReady = () => {
+      // Prioritize hero banner if present
+      const hero = document.querySelector('.hero .d3-galaxy') || document.querySelector('.d3-galaxy');
+      if (hero) {
+        return !!hero.querySelector('svg circle, svg path, svg rect, svg g');
+      }
+      // Else require all D3 containers on page to have shapes
+      const containers = [
+        ...Array.from(document.querySelectorAll('.d3-line')),
+        ...Array.from(document.querySelectorAll('.d3-bar'))
+      ];
+      if (!containers.length) return true;
+      return containers.every(c => c.querySelector('svg circle, svg path, svg rect, svg g'));
+    };
+    while (!isReady() && (Date.now() - start) < timeout) {
+      await new Promise(r => setTimeout(r, 200));
+    }
+  }, timeoutMs);
+}
+
 async function waitForStableLayout(page, timeoutMs = 5000) {
   const start = Date.now();
   let last = await page.evaluate(() => document.scrollingElement ? document.scrollingElement.scrollHeight : document.body.scrollHeight);
@@ -195,6 +218,9 @@ async function main() {
       if (wait === 'images' || wait === 'full') {
         await waitForImages(page);
       }
+      if (wait === 'd3' || wait === 'full') {
+        await waitForD3(page);
+      }
       if (wait === 'plotly' || wait === 'full') {
         await waitForPlotly(page);
       }
@@ -202,13 +228,65 @@ async function main() {
         await waitForStableLayout(page);
       }
       await page.emulateMedia({ media: 'print' });
+
+      // Generate OG thumbnail (1200x630)
+      try {
+        const ogW = 1200, ogH = 630;
+        await page.setViewportSize({ width: ogW, height: ogH });
+        // Give layout a tick to adjust
+        await page.waitForTimeout(200);
+        // Ensure layout & D3 re-rendered after viewport change
+        await page.evaluate(() => { window.scrollTo(0, 0); window.dispatchEvent(new Event('resize')); });
+        try { await waitForD3(page, 8000); } catch {}
+
+        // Temporarily improve visibility for light theme thumbnails
+        // - Force normal blend for points
+        // - Ensure an SVG background (CSS background on svg element)
+        const cssHandle = await page.addStyleTag({ content: `
+          .hero .points { mix-blend-mode: normal !important; }
+          .d3-galaxy svg { background: var(--surface-bg); }
+        ` });
+        const thumbPath = resolve(cwd, 'dist', 'thumb.jpg');
+        await page.screenshot({ path: thumbPath, type: 'jpeg', quality: 85, fullPage: false });
+        // Also emit PNG for compatibility if needed
+        const thumbPngPath = resolve(cwd, 'dist', 'thumb.png');
+        await page.screenshot({ path: thumbPngPath, type: 'png', fullPage: false });
+        const publicThumb = resolve(cwd, 'public', 'thumb.jpg');
+        const publicThumbPng = resolve(cwd, 'public', 'thumb.png');
+        try { await fs.copyFile(thumbPath, publicThumb); } catch {}
+        try { await fs.copyFile(thumbPngPath, publicThumbPng); } catch {}
+        // Remove temporary style so PDF is unaffected
+        try { await cssHandle.evaluate((el) => el.remove()); } catch {}
+        console.log(`✅ OG thumbnail generated: ${thumbPath}`);
+      } catch (e) {
+        console.warn('Unable to generate OG thumbnail:', e?.message || e);
+      }
       const outPath = resolve(cwd, 'dist', `${outFileBase}.pdf`);
+      // Restore viewport to printable width before PDF (thumbnail changed it)
+      try {
+        const fmt2 = getFormatSizeMm(format);
+        const mw2 = fmt2.w - cssLengthToMm(margin.left) - cssLengthToMm(margin.right);
+        const printableWidthPx2 = Math.max(320, Math.round((mw2 / 25.4) * 96));
+        await page.setViewportSize({ width: printableWidthPx2, height: 1400 });
+        await page.evaluate(() => { window.scrollTo(0, 0); window.dispatchEvent(new Event('resize')); });
+        try { await waitForD3(page, 8000); } catch {}
+        await waitForStableLayout(page);
+      } catch {}
+      // Temporarily make D3 banner reliably visible for PDF
+      let pdfCssHandle = null;
+      try {
+        pdfCssHandle = await page.addStyleTag({ content: `
+          .hero .points { mix-blend-mode: normal !important; }
+          .d3-galaxy svg { background: var(--surface-bg); }
+        ` });
+      } catch {}
       await page.pdf({
         path: outPath,
         format,
         printBackground: true,
         margin
       });
+      try { if (pdfCssHandle) await pdfCssHandle.evaluate((el) => el.remove()); } catch {}
       console.log(`✅ PDF generated: ${outPath}`);
 
       // Copy into public only under the slugified name

app/src/components/MermaidDemo.astro

@@ -0,0 +1,11 @@
+---
+export interface Props {
+  code?: string;
+}
+const { code = `graph TD\n    A[Start] --> B{Is it working?}\n    B -- Yes --> C[Great!]\n    B -- No --> D[Fix it]\n    D --> B` } = Astro.props;
+---
+
+<pre class="mermaid">{code}</pre>
+
+
+<style>.mermaid { max-width: 100%; }</style>

app/src/components/Meta.astro

@@ -6,6 +6,16 @@ interface Props {
   published?: string;
 }
 const { title, authors = [], affiliation, published } = Astro.props as Props;
+function slugify(text: string): string {
+  return String(text || '')
+    .normalize('NFKD')
+    .replace(/\p{Diacritic}+/gu, '')
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .slice(0, 120) || 'article';
+}
+const pdfFilename = `${slugify(title)}.pdf`;
 ---
 <header class="meta">
   <div class="meta-container">
@@ -29,7 +39,7 @@ const { title, authors = [], affiliation, published } = Astro.props as Props;
     )}
     <div class="meta-container-cell">
       <h3>PDF</h3>
-      <p><button id="download-pdf-btn" type="button">Download PDF</button></p>
+      <p><button id="download-pdf-btn" data-pdf-filename={pdfFilename}>Download PDF</button></p>
     </div>
   </div>
 </header>
@@ -42,8 +52,9 @@ const { title, authors = [], affiliation, published } = Astro.props as Props;
       if (!btn) return;
       btn.addEventListener('click', () => {
         const a = document.createElement('a');
-        a.href = '/article.pdf';
-        a.setAttribute('download', 'article.pdf');
+        const pdf = btn.getAttribute('data-pdf-filename') || 'article.pdf';
+        a.href = `/${pdf}`;
+        a.setAttribute('download', pdf);
         document.body.appendChild(a);
         a.click();
         a.remove();

app/src/components/Note.astro

@@ -0,0 +1,23 @@
+---
+const { title = "Note", emoji = "📝", class: className, ...props } = Astro.props;
+const wrapperClass = ["note", className].filter(Boolean).join(" ");
+---
+<div class={wrapperClass} {...props}>
+  <div class="note__header">
+    <span class="note__emoji">{emoji}</span>
+    {title && <span class="note__title">{title}</span>}
+  </div>
+  <div class="note__content">
+    <slot />
+  </div>
+</div>
+
+<style>
+  .note { background: var(--surface-bg); border-left: 2px solid rgba(0, 0, 0, 0.1); border-radius: 4px; padding: 10px 14px; margin: 12px 0; }
+  .note__header { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text-color); margin-bottom: 6px; }
+  .note__emoji { font-size: 24px; line-height: 1; }
+  .note__title { font-size: 13px; letter-spacing: .2px; }
+  .note__content { color: var(--text-color); font-size: 0.95rem; }
+</style>
+
+

app/src/content/article.mdx

@@ -12,17 +12,19 @@ published: "Feb 19, 2025"
 tags:
   - research
   - template
-ogImage: "https://example.com/your-og-image.png"
+ogImage: "/thumb.jpg"
 ---
 
 import HtmlFragment from "../components/HtmlFragment.astro";
 import Wide from "../components/Wide.astro";
 import FullBleed from "../components/FullBleed.astro";
 import { Image } from 'astro:assets';
-import placeholder from "../assets/images/placeholder.jpg";
+import placeholder from "../assets/images/placeholder.png";
 import audioDemo from "../assets/audio/audio-example.wav";
 import Aside from "../components/Aside.astro";
 import visualPoster from "../assets/images/visual-vocabulary-poster.png";
+import BestPractices from "./chapters/best-pratices.mdx";
+import WritingYourContent from "./chapters/writing-you-content.mdx";
 
 <Aside>
   Welcome to this single-page research article template built with **Markdown**.
@@ -34,15 +36,13 @@ import visualPoster from "../assets/images/visual-vocabulary-poster.png";
   In this guide, you’ll learn how to install the template,
   write content (math, citations, images, code, asides, interactive fragments),
   customize styles and behavior, and follow a few **best practices** for publishing.
-  <Fragment slot="aside">
-    If you have questions or remarks open a discussion on the <a href="https://huggingface.co/spaces/tfrere/science-blog-template/discussions?status=open&type=discussion">Community tab</a>!
-  </Fragment>
+  
 </Aside>
 
-This template is inspired by [**Distill**](https://distill.pub); we aim to preserve the best of it while modernizing the stack. Their work is highly inspiring.
 
 #### Features
 
+<Aside>
 <div className="tag-list">
   <span className="tag">Markdown based</span>
   <span className="tag">KaTeX math</span>
@@ -55,24 +55,64 @@ This template is inspired by [**Distill**](https://distill.pub); we aim to prese
   <span className="tag">Plotly ready</span>
   <span className="tag">D3.js ready</span>
   <span className="tag">SEO Friendly</span>
+  <span className="tag">Mermaid diagrams</span>
   <span className="tag">Lightweight bundle</span>
   <span className="tag">Aside notes</span>
   <span className="tag">Mobile friendly</span>
   <span className="tag">Optimized images</span>
   <span className="tag">Medium like zoomable images</span>
   <span className="tag">PDF export</span>
+  <span className="tag">To do: Accordion</span>
+  <span className="tag">To do: dataviz color palette generator</span>
 </div>
+<Fragment slot="aside">
+    If you have questions or remarks open a discussion on the <a href="https://huggingface.co/spaces/tfrere/research-blog-template/discussions?status=open&type=discussion">Community tab</a>!
+  </Fragment>
+</Aside>
+
+## Introduction
+A modern medium for presenting research
+The web enables forms of explanation that static PDFs cannot: **reactive diagrams**, progressive notation, and **exploratory views** that reveal how ideas behave. Use **interactive fragments** to let readers hover, scrub, and inspect—building **intuition**, not just reading results.
+
+New ways of thinking enable new discoveries
+Careful notation, **well‑chosen visual encodings**, and **small interactive experiments** deepen understanding. By making these artifacts **first‑class**—alongside text, math, and code—this template helps your audience grasp mechanisms, limits, and trade‑offs.
+
+Machine learning needs more transparency
+Clear, **inspectable examples** make methods safer and more comprehensible. Embed live widgets, reveal **intermediate states**, and link to sources so readers can verify claims and **reproduce results**.
+
+Legitimacy for non‑traditional research artifacts
+Not every contribution fits a PDF. Treat demos, visualizations, and interactive write‑ups as **real scholarship**: cite them, version them, and ship them together.
+
+This project is heavely inspired by [**Distill**](https://distill.pub) (2016–2021), which championed clear, web‑native scholarship.
+
+
+### Notable examples of excellent scientific articles
+
+A short, curated list of well‑designed and often interactive work:
+
+- **Distill — The Building Blocks of Interpretability**: [distill.pub/2018/building-blocks](https://distill.pub/2018/building-blocks/)
+- **R2D3 — A Visual Introduction to Machine Learning (Part 1)**: [r2d3.us/visual-intro-to-machine-learning-part-1](http://www.r2d3.us/visual-intro-to-machine-learning-part-1/)
+- **Seeing Theory — An interactive introduction to probability and statistics**: [seeing-theory.brown.edu](https://seeing-theory.brown.edu/)
+- **ConvNetJS — Neural networks in the browser**: [cs.stanford.edu/people/karpathy/convnetjs](http://cs.stanford.edu/people/karpathy/convnetjs/)
+- **Explorable Explanations — Collection**: [explorableexplanations.com](http://explorableexplanations.com/)
+- **Distill — Why Momentum Really Works**: [distill.pub/2017/momentum](https://distill.pub/2017/momentum/)
+
 
 ## Getting Started
 
 ### Installation
 
+<Aside>
 ```bash
 git lfs install
 git lfs pull
 cd app
 npm install
 ```
+<Fragment slot="aside">
+    You can use yarn alternatively to npm.
+  </Fragment>
+</Aside>
 
 
 ### Development
@@ -89,6 +129,8 @@ npm run build
 
 Serving the `dist/` directory on any static host is enough to deliver the site.
 
+A [slug-title].pdf and thumb.jpg are also generated at build time. You can find them in the public folder.
+
 ### Deploy
 
 The easiest way to get online is to clone [this Hugging Face Space](https://huggingface.co/spaces/tfrere/science-blog-template) and push your changes; every push triggers an automatic build and deploy.
@@ -98,331 +140,9 @@ The easiest way to get online is to clone [this Hugging Face Space](https://hugg
 **Track binaries** (e.g., `.png`, `.wav`) with **Git LFS** to keep the repository lean. This project is preconfigured to store such files via **LFS**.
 
 
-## Writing Your Content
-
-### Introduction
-
-Your article lives in two places:
-
-- `app/src/content/` — where you can find the article.mdx, bibliography.bib and html fragments.
-- `app/src/assets/` — images, audio, and other static assets. (handled by git lfs)
-
-This is MDX, its basically a markdown file with html and astro components.
-The **initial skeleton** of an article looks like this.
-
-```mdx
-{/* HEADER */}
----
-title: "This is the main title"
-subtitle: "This will be displayed just below the banner"
-description: "A modern, MDX-first research article template with math, citations, and interactive figures."
-authors:
-  - "John Doe"
-  - "Alice Martin"
-  - "Robert Brown"
-affiliation: "Hugging Face"
-published: "Feb 19, 2025"
-tags:
-  - research
-  - template
-ogImage: "https://example.com/your-og-image.png"
----
-
-{/* IMPORTS */}
-import { Image } from 'astro:assets';
-import placeholder from '../assets/images/placeholder.jpg';
-
-{/* CONTENT */}
-# Hello, world
-
-This is a short paragraph written in Markdown. Below is an example image:
-
-<Image src={placeholder} alt="Example image" />
-```
-
-
-
-**Available blocks**:
-
-<div className="tag-list">
-  <a className="tag" href="#math">Math</a>
-  <a className="tag" href="#images">Images</a>
-  <a className="tag" href="#code-blocks">Code</a>
-  <a className="tag" href="#citations-and-notes">Citations & notes</a>
-  <a className="tag" href="#asides">Asides</a>
-  <a className="tag" href="#minimal-table">Array</a>
-  <a className="tag" href="#audio">Audio</a>
-  <a className="tag" href="#interactive-fragments">Interactive fragments</a>
-  <a className="tag" href="#tracking-training-metrics-with-trackio">TrackIO</a>
-</div>
-
-### Math
-
-**Inline**
-
-$x^2 + y^2 = z^2$.
-
-```mdx
-$x^2 + y^2 = z^2$
-```
-
-**Block**
-
-$$
-\mathrm{Attention}(Q,K,V)=\mathrm{softmax}\!\left(\frac{QK^\top}{\sqrt{d_k}}\right) V
-$$
-
-```mdx
-$$
-\mathrm{Attention}(Q,K,V)=\mathrm{softmax}\!\left(\frac{QK^\top}{\sqrt{d_k}}\right) V
-$$
-```
-
-### Images
-
-**Responsive images** automatically generate an optimized `srcset` and `sizes` so the browser downloads the most appropriate file for the current viewport and DPR. You can also request multiple output formats (e.g., **AVIF**, **WebP**, fallback **PNG/JPEG**) and control **lazy loading/decoding** for better **performance**.
-
-**Optional:** Zoomable (Medium-like lightbox): add `data-zoomable` to opt-in. Only images with this attribute will open full-screen on click.
-
-**Optional:** Lazy loading: add `loading="lazy"` to opt-in.
-
-**Optional:** Figcaption and credits: add a `figcaption` element with a `span` containing the credit.
-
-
-
-<figure>
-  <Image
-    src={placeholder}
-    data-zoomable
-    alt="Example with caption and credit"
-  />
-  <figcaption>
-    Optimized image with a descriptive caption.
-    <span className="image-credit">Credit: Photo by <a href="https://example.com">Author</a></span>
-  </figcaption>
-</figure>
-
-```mdx
-import { Image } from 'astro:assets'
-import myImage from '../assets/images/placeholder.jpg'
-
-<Image src={myImage} alt="Responsive, optimized example image" />
-
-<figure>
-  <Image src={myImage} data-zoomable alt="Example with caption and credit" loading="lazy" />
-  <figcaption>
-    Optimized image with a descriptive caption.
-    <span className="image-credit">Credit: Photo by <a href="https://example.com">Author</a></span>
-  </figcaption>
-</figure>
-```
-
-
-### Code blocks
-
-Use fenced code blocks with a language for syntax highlighting.
-
-Python block example:
-
-```python
-def greet(name: str) -> None:
-    print(f"Hello, {name}!")
-
-greet("Astro")
-```
-
-How to write it in MDX:
-
-````mdx
-```python
-def greet(name: str) -> None:
-    print(f"Hello, {name}!")
-
-greet("Astro")
-```
-````
-
-### Citations and notes
-
-Here are a few variations using the same bibliography:
-
-1) **In-text citation** with brackets: [@example2023].
-
-2) **Narrative citation**: As shown by @vaswani2017attention, transformers enable efficient sequence modeling.
-
-3) **Multiple citations** and a **footnote** together: see [@vaswani2017attention; @example2023] for related work. Also note this footnote[^f1].
-
-[^f1]: Footnote attached to the sentence above.
-
-```mdx
-1) In-text citation with brackets: [@example2023].
-
-2) Narrative citation: As shown by @vaswani2017attention, transformers enable efficient sequence modeling.
-
-3) Multiple citations and a footnote together: see [@vaswani2017attention; @example2023] for related work. Also note this footnote[^f1].
-
-[^f1]: Footnote attached to the sentence above.
-```
-
-
-### Asides
-
-<Aside>
-  This paragraph presents a **key idea** concisely.
-  <Fragment slot="aside">
-    **Side note** for brief context or a definition.
-  </Fragment>
-  </Aside>
-
-```mdx
-import Aside from '../components/Aside.astro'
-
-<Aside>
-  Main paragraph with the core idea.
-  <Fragment slot="aside">Short side note.</Fragment>
-</Aside>
-```
-
-### Width helpers
-
-Use these helpers to expand content beyond the main column when needed. They will always be centered and displayed above every other content.
-
-#### Wide example
-
-<Wide>
-  <div className="demo-wide">demo wide</div>
-</Wide>
-
-```mdx
-import Wide from '../components/Wide.astro'
-
-<Wide>
-  Your content here...
-</Wide>
-```
-
-#### Full-bleed example
-
-<FullBleed>
-  <div className="demo-full-bleed">demo full-bleed</div>
-</FullBleed>
-
-```mdx
-import FullBleed from '../components/FullBleed.astro'
-
-<FullBleed>
-  Your content here...
-</FullBleed>
-```
-
-
-### Minimal table
-
-| Method | Score |
-|---|---|
-| A | 0.78 |
-| B | 0.86 |
-
-```mdx
-| Method | Score |
-| --- | --- |
-| A | 0.78 |
-| B | 0.86 |
-```
-
-### Audio
-
-<audio controls src={audioDemo}>
-  Your browser does not support the audio element.
-</audio>
-
-```mdx
-import audioDemo from '../assets/audio/audio-example.wav'
-
-<audio controls src={audioDemo}>
-  Your browser does not support the audio element.
-</audio>
-```
-
-
-
-### Embeds
-
-
-#### Html Fragments
-
-The main purpose of the ```HtmlFragment``` component is to embed a **Plotly** or **D3.js** chart in your article. Libraries are already imported in the template.
-
-<div className="plot-card">
-  <HtmlFragment src="line.html" />
-</div>
-
-```mdx
-import HtmlFragment from '../components/HtmlFragment.astro'
-
-<HtmlFragment src="line.html" />
-```
-
-#### Iframes
-
-You can embed external content in your article using **iframes**. For example, **TrackIO**—a lightweight dashboard to monitor machine learning experiments—can be used this way. The example below opens a demo project and displays a couple of metrics. You can customize the **query parameters** (`project`, `metrics`, `sidebar`, etc.) to fit your needs.
-
-<iframe className="plot-card" src="https://trackio-documentation.hf.space/?project=fake-training-750735&metrics=train_loss,train_accuracy&sidebar=hidden&lang=en" width="100%" height="600" frameborder="0"></iframe>
-
-To embed TrackIO in your own page, copy the following HTML and adjust the `src` parameters:
-
-#### GitHub code embeds
-
-Finally, if you want to include code from GitHub you can use emgithub.com and, for example, create a collapsible widget like this:
-
-
-  <div class="code-embed-container"></div>
-  <script 
-    src="https://emgithub.com/embed-v2.js?target=https%3A%2F%2Fgithub.com%2Fhuggingface%2Fpicotron%2Fblob%2F0035cce0e04afd6192763b11efe50010d8ad0f71%2Fpicotron%2Fdata_parallel%2Fdata_parallel.py%23L10-L60&style=github&type=code&showBorder=off&showLineNumbers=on&showFileMeta=on&showCopy=on&showFullPath=on">
-  </script>
-
-```html
-  <div class="code-embed-container"></div>
-  <script 
-    src="https://emgithub.com/embed-v2.js?target=https%3A%2F%2Fgithub.com%2Fhuggingface%2Fpicotron%2Fblob%2F0035cce0e04afd6192763b11efe50010d8ad0f71%2Fpicotron%2Fdata_parallel%2Fdata_parallel.py%23L10-L60&style=github&type=code&showBorder=off&showLineNumbers=on&showFileMeta=on&showCopy=on&showFullPath=on">
-  </script>
-```
-
-
-## Best Practices
-
-### Short sections
-Break content into **small, purpose‑driven sections**. Each section should answer a **single question** or support one idea. This improves **scanability**, helps readers navigate with the TOC, and makes later edits safer.
-
-### Clear, minimal annotations
-Favor **concise captions** and callouts that clarify what to look at and why it matters. In code, **highlight just the lines** that carry the idea; avoid verbose commentary. **Precision beats volume**.
-
-### Explain math notation
-**Introduce symbols and variables** the first time they appear, and prefer **well‑known identities** over custom shorthand. When formulas carry the message, add one sentence of **plain‑language interpretation** right after.
-
-### Use the right color scale
-
-A **palette** encodes **meaning** (categories, magnitudes, oppositions), preserves **readability** and **accessibility** (**sufficient contrast**, **color‑vision safety**), and ensures **perceptually smooth transitions**.
-
-The three families below illustrate when to use **categorical**, **sequential**, or **diverging** colors and how they evolve from the same **reference hue**.
-
-<div className="">
-  <HtmlFragment src="palettes.html" />
-</div>
-
-### Use the right chart
-
-Picking the right visualization depends on your goal (compare values, show distribution, part-to-whole, trends, relationships, etc.). The Visual Vocabulary poster below provides a concise mapping from **analytical task** to **chart types**.
+<WritingYourContent />
 
-<figure>
-  <a href={visualPoster.src} target="_blank" rel="noopener noreferrer">
-    <Image src={visualPoster} alt="Visual Vocabulary: choosing the right chart by task" />
-  </a>
-  <figcaption>
-    A handy reference to select chart types by purpose. Click to enlarge.
-    — <a href="https://ft-interactive.github.io/visual-vocabulary/" target="_blank" rel="noopener noreferrer">Website</a>
-  </figcaption>
-</figure>
+<BestPractices />
 
 
 ## Conclusions

app/src/content/chapters/best-pratices.mdx

@@ -0,0 +1,46 @@
+
+import { Image } from 'astro:assets';
+import visualPoster from '../../assets/images/visual-vocabulary-poster.png';
+
+
+## Best Practices
+
+### Short sections
+Break content into **small, purpose‑driven sections**. Each section should answer a **single question** or support one idea. This improves **scanability**, helps readers navigate with the TOC, and makes later edits safer.
+
+### Clear, minimal annotations
+Favor **concise captions** and callouts that clarify what to look at and why it matters. In code, **highlight just the lines** that carry the idea; avoid verbose commentary. **Precision beats volume**.
+
+### Explain math notation
+**Introduce symbols and variables** the first time they appear, and prefer **well‑known identities** over custom shorthand. When formulas carry the message, add one sentence of **plain‑language interpretation** right after.
+
+
+{/* ### Use the right color
+A palette encodes **meaning** (categories, magnitudes, oppositions), preserves **readability** and **accessibility** (sufficient contrast, color‑vision safety), and ensures **perceptually smooth transitions**. The three families below illustrate when to use **categorical**, **sequential**, or **diverging** colors and how they evolve from the same **reference hue**.
+
+<Aside>
+<div className="">
+  <HtmlFragment src="palettes.html" />
+</div>
+<Fragment slot="aside">
+  You can choose a color from the palette to update palettes and copy them to your clipboard.
+</Fragment>
+<Fragment slot="aside">
+  It will be applied to the <a href="/" target="_blank">whole page</a>.
+</Fragment>
+</Aside> */}
+
+### Use the right chart
+
+Picking the right visualization depends on your goal (compare values, show distribution, part-to-whole, trends, relationships, etc.). The Visual Vocabulary poster below provides a concise mapping from **analytical task** to **chart types**.
+
+<figure>
+  <a href={visualPoster.src} target="_blank" rel="noopener noreferrer">
+    <Image src={visualPoster} alt="Visual Vocabulary: choosing the right chart by task" />
+  </a>
+  <figcaption>
+    A handy reference to select chart types by purpose. Click to enlarge.
+    — <a href="https://ft-interactive.github.io/visual-vocabulary/" target="_blank" rel="noopener noreferrer">Website</a>
+  </figcaption>
+</figure>
+

app/src/content/chapters/writing-you-content.mdx

@@ -0,0 +1,370 @@
+{/* IMPORTS */}
+import { Image } from 'astro:assets';
+import placeholder from '../../assets/images/placeholder.png';
+import Aside from '../../components/Aside.astro';
+import Wide from '../../components/Wide.astro';
+import FullBleed from '../../components/FullBleed.astro';
+import HtmlFragment from '../../components/HtmlFragment.astro';
+import audioDemo from '../../assets/audio/audio-example.wav';
+
+## Writing Your Content
+
+### Introduction
+
+Your article lives in two places:
+
+- `app/src/content/` — where you can find the article.mdx, bibliography.bib and html fragments.
+- `app/src/assets/` — images, audio, and other static assets. (handled by git lfs)
+
+This is MDX, its basically a markdown file with html and astro components.
+The **initial skeleton** of an article looks like this.
+
+```mdx
+{/* HEADER */}
+---
+title: "This is the main title"
+subtitle: "This will be displayed just below the banner"
+description: "A modern, MDX-first research article template with math, citations, and interactive figures."
+authors:
+  - "John Doe"
+  - "Alice Martin"
+  - "Robert Brown"
+affiliation: "Hugging Face"
+published: "Feb 19, 2025"
+tags:
+  - research
+  - template
+ogImage: "https://example.com/your-og-image.png"
+---
+
+{/* IMPORTS */}
+import { Image } from 'astro:assets';
+import placeholder from '../assets/images/placeholder.jpg';
+
+{/* CONTENT */}
+# Hello, world
+
+This is a short paragraph written in Markdown. Below is an example image:
+
+<Image src={placeholder} alt="Example image" />
+```
+
+### Chapters
+
+
+**If** your article becomes **too long**, you can **organize** it into **separate chapters**.
+
+Simply **create a new file** in the `app/src/content/chapters` **directory**.  
+Then, **include** your new chapter in the main article by adding the following lines:
+
+```mdx
+import MyChapter from './chapters/my-chapter.mdx';
+<MyChapter />
+```
+
+You can see an example of this in the <a href="">`app/src/content/chapters/best-pratices.mdx`</a> file.
+
+### Theme
+
+All **interactive elements** (buttons, inputs, cards, etc.) are themed with the **primary color** you choose. Feel free to update this color to match your **brand**.
+
+You can **override** the theme by changing the main variable in the `app/src/styles/_variables.css` file.
+
+You can use the **color picker** below to choose the right color.
+<Aside>
+<div className="">
+  <HtmlFragment src="color-picker.html" />
+</div>
+<Fragment slot="aside">
+  There is also a color <a href="#use-the-right-color">palette generator</a> that will help you choose the right color for your data visualizations.
+</Fragment>
+</Aside>
+
+
+### Available blocks
+
+All the following blocks are available in the article.mdx file. You can also create your own blocks by creating a new component in the components folder.
+
+<br/>
+<div className="button-group">
+  <a className="button" href="#math">Math</a>
+  <a className="button" href="#images">Images</a>
+  <a className="button" href="#code-blocks">Code</a>
+  <a className="button" href="#citations-and-notes">Citations & notes</a>
+  <a className="button" href="#asides">Asides</a>
+  <a className="button" href="#minimal-table">Table</a>
+  <a className="button" href="#audio">Audio</a>
+  <a className="button" href="#embeds">Embeds</a>
+</div>
+
+### Math
+
+KaTeX is used for math rendering.
+
+**Inline**
+
+This is an inline math equation: $x^2 + y^2 = z^2$. 
+
+
+<small className="muted">Example</small>
+```mdx
+$x^2 + y^2 = z^2$
+```
+
+**Block**
+
+$$
+\mathrm{Attention}(Q,K,V)=\mathrm{softmax}\!\left(\frac{QK^\top}{\sqrt{d_k}}\right) V
+$$
+
+<small className="muted">Example</small>
+```mdx
+$$
+\mathrm{Attention}(Q,K,V)=\mathrm{softmax}\!\left(\frac{QK^\top}{\sqrt{d_k}}\right) V
+$$
+```
+
+### Images
+
+**Responsive images** automatically generate an optimized `srcset` and `sizes` so the browser downloads the most appropriate file for the current viewport and DPR. You can also request multiple output formats (e.g., **AVIF**, **WebP**, fallback **PNG/JPEG**) and control **lazy loading/decoding** for better **performance**.
+
+**Optional:** Zoomable (Medium-like lightbox): add `data-zoomable` to opt-in. Only images with this attribute will open full-screen on click.
+
+**Optional:** Lazy loading: add `loading="lazy"` to opt-in.
+
+**Optional:** Figcaption and credits: add a `figcaption` element with a `span` containing the credit.
+
+
+
+<figure>
+  <Image
+    src={placeholder}
+    data-zoomable
+    alt="Tensor parallelism in a transformer block"
+  />
+  <figcaption>
+    Tensor parallelism in a transformer block
+    <span className="image-credit">Original work on <a target="_blank" href="https://huggingface.co/spaces/nanotron/ultrascale-playbook?section=tensor_parallelism_in_a_transformer_block">Ultrascale Playbook</a></span>
+  </figcaption>
+</figure>
+
+<small className="muted">Example</small>
+```mdx
+import { Image } from 'astro:assets'
+import myImage from '../assets/images/placeholder.jpg'
+
+<Image src={myImage} alt="Responsive, optimized example image" />
+
+<figure>
+  <Image src={myImage} data-zoomable alt="Example with caption and credit" loading="lazy" />
+  <figcaption>
+    Optimized image with a descriptive caption.
+    <span className="image-credit">Credit: Photo by <a href="https://example.com">Author</a></span>
+  </figcaption>
+</figure>
+```
+
+
+### Code blocks
+
+Use fenced code blocks with a language for syntax highlighting.
+
+```python
+def greet(name: str) -> None:
+    print(f"Hello, {name}!")
+
+greet("Astro")
+```
+
+<small className="muted">Example</small>
+````mdx
+```python
+def greet(name: str) -> None:
+    print(f"Hello, {name}!")
+
+greet("Astro")
+```
+````
+
+### Mermaid diagrams
+
+Native mermaid diagrams are supported. You can use the <a target="_blank" href="https://mermaid.live/edit#pako:eNpVjUFPg0AQhf_KZk6a0AYsCywHE0u1lyZ66EnoYQMDSyy7ZFlSK_DfXWiMOqd58773ZoBcFQgxlGd1yQXXhhx3mSR2ntJE6LozDe9OZLV6HPdoSKMkXkeyvdsr0gnVtrWs7m_8doZIMhxmDIkRtfyYblay5F8ljmSXHnhrVHv66xwvaiTPaf0mbP1_R2i0qZe05HHJVznXJOF6QcCBStcFxEb36ECDuuGzhGF2MzACG8wgtmuBJe_PJoNMTjbWcvmuVPOT1KqvBNj6c2dV3xbc4K7mlea_CMoCdaJ6aSCm3lIB8QCfED94dM2o77ssjFzK3MiBq2WCNWUeiza-H26YvU8OfC0_3XVII9eLQuYFIaVBGEzfyTJ22g"> live editor</a> to create your diagram and copy the code to your article.
+
+```mermaid
+graph TD
+  A[Start] --> B{Is it working?}
+  B -- Yes --> C[Great!]
+  B -- No --> D[Fix it]
+  D --> B
+```
+
+<small className="muted">Example</small>
+````mdx
+```mermaid
+graph TD
+  A[Start] --> B{Is it working?}
+  B -- Yes --> C[Great!]
+  B -- No --> D[Fix it]
+  D --> B
+```
+````
+
+### Citations and notes
+
+Here are a few variations using the same bibliography:
+
+1) **In-text citation** with brackets: [@example2023].
+
+2) **Narrative citation**: As shown by @vaswani2017attention, transformers enable efficient sequence modeling.
+
+3) **Multiple citations** and a **footnote** together: see [@vaswani2017attention; @example2023] for related work. Also note this footnote[^f1].
+
+[^f1]: Footnote attached to the sentence above.
+
+<small className="muted">Example</small>
+```mdx
+1) In-text citation with brackets: [@example2023].
+
+2) Narrative citation: As shown by @vaswani2017attention, transformers enable efficient sequence modeling.
+
+3) Multiple citations and a footnote together: see [@vaswani2017attention; @example2023] for related work. Also note this footnote[^f1].
+
+[^f1]: Footnote attached to the sentence above.
+```
+
+
+### Placement
+
+#### Asides
+
+<Aside>
+  This paragraph presents a **key idea** concisely.
+  <Fragment slot="aside">
+    **Side note** for brief context or a definition.
+  </Fragment>
+  </Aside>
+
+<small className="muted">Example</small>
+```mdx
+import Aside from '../components/Aside.astro'
+
+<Aside>
+  Main paragraph with the core idea.
+  <Fragment slot="aside">Short side note.</Fragment>
+</Aside>
+```
+
+Use these helpers to expand content beyond the main column when needed. They will always be centered and displayed above every other content.
+
+#### Wide example
+
+<Wide>
+  <div className="demo-wide">demo wide</div>
+</Wide>
+
+<small className="muted">Example</small>
+```mdx
+import Wide from '../components/Wide.astro'
+
+<Wide>
+  Your content here...
+</Wide>
+```
+
+#### Full-bleed example
+
+<FullBleed>
+  <div className="demo-full-bleed">demo full-bleed</div>
+</FullBleed>
+
+<small className="muted">Example</small>
+```mdx
+import FullBleed from '../components/FullBleed.astro'
+
+<FullBleed>
+  Your content here...
+</FullBleed>
+```
+
+
+### Minimal table
+
+| Method | Score |
+|---|---|
+| A | 0.78 |
+| B | 0.86 |
+
+<small className="muted">Example</small>
+```mdx
+| Method | Score |
+| --- | --- |
+| A | 0.78 |
+| B | 0.86 |
+```
+
+### Audio
+
+<audio controls src={audioDemo}>
+  Your browser does not support the audio element.
+</audio>
+
+<small className="muted">Example</small>
+```mdx
+import audioDemo from '../assets/audio/audio-example.wav'
+
+<audio controls src={audioDemo}>
+  Your browser does not support the audio element.
+</audio>
+```
+
+
+
+### Embeds
+
+
+#### Html Fragments
+
+The main purpose of the ```HtmlFragment``` component is to **embed** a **Plotly** or **D3.js** chart in your article. **Libraries** are already imported in the template.
+
+They exist in the `app/src/content/fragments` folder.
+
+Here are some examples of the two **libraries** in the template:
+
+D3 version
+  <div className="plot-card">
+    <HtmlFragment src="d3-line.html" />
+</div>
+
+  <div className="plot-card">
+    <HtmlFragment src="d3-bar.html" />
+</div>
+
+
+Plotly version
+<div className="plot-card">
+  <HtmlFragment src="line.html" />
+</div>
+<div className="plot-card">
+  <HtmlFragment src="bar.html" />
+</div>
+
+<small className="muted">Example</small>
+```mdx
+import HtmlFragment from '../components/HtmlFragment.astro'
+
+<HtmlFragment src="line.html" />
+```
+
+#### Iframes
+
+You can embed external content in your article using **iframes**. For example, **TrackIO or github code embeds** can be used this way.
+
+<iframe frameborder="0" scrolling="no" style="width:100%; height:292px;" allow="clipboard-write" src="https://emgithub.com/iframe.html?target=https%3A%2F%2Fgithub.com%2Fhuggingface%2Fpicotron%2Fblob%2F1004ae37b87887cde597c9060fb067faa060bafe%2Fsetup.py&style=default&type=code&showBorder=on&showLineNumbers=on"></iframe>
+
+<iframe className="plot-card" src="https://trackio-documentation.hf.space/?project=fake-training-750735&metrics=train_loss,train_accuracy&sidebar=hidden&lang=en" width="100%" height="660" frameborder="0"></iframe>
+
+<small className="muted">Example</small>
+```mdx
+<iframe frameborder="0" scrolling="no" style="width:100%; height:292px;" allow="clipboard-write" src="https://emgithub.com/iframe.html?target=https%3A%2F%2Fgithub.com%2Fhuggingface%2Fpicotron%2Fblob%2F1004ae37b87887cde597c9060fb067faa060bafe%2Fsetup.py&style=default&type=code&showBorder=on&showLineNumbers=on"></iframe>
+<iframe src="https://trackio-documentation.hf.space/?project=fake-training-750735&metrics=train_loss,train_accuracy&sidebar=hidden&lang=en" width="100%" height="600" frameborder="0"></iframe>
+```

app/src/content/fragments/banner.html

@@ -1,4 +1,4 @@
-<div class="d3-galaxy" style="width:100%;margin:10px 0;"></div>
+<div class="d3-galaxy" style="width:100%;margin:10px 0;aspect-ratio:3/1;min-height:260px;"></div>
 <script>
   (() => {
     const ensureD3 = (cb) => {
@@ -105,15 +105,6 @@
         const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
         const strokeColor = isDark ? 'rgba(255,255,255,0.18)' : 'rgba(0,0,0,0.12)';
 
-        // Background rect using gradient
-        const bg = svg.selectAll('rect.d3-bg').data([0]);
-        bg.join('rect')
-          .attr('class', 'd3-bg')
-          .attr('x', 0)
-          .attr('y', 0)
-          .attr('width', width)
-          .attr('height', height)
-          .attr('fill', 'url(#spaceBg)');
 
         // Group with blend mode so points softly accumulate light
         const g = svg.selectAll('g.points').data([0]).join('g').attr('class', 'points').style('mix-blend-mode', 'screen');
@@ -152,7 +143,7 @@
         }
 
         // Final filter: remove small dots very close to the galaxy center (after placement)
-        const centerHoleRadius = 0.08; // elliptical radius threshold
+        const centerHoleRadius = 0.48; // elliptical radius threshold
         const smallSizeThreshold = 7.5; // same notion as Python size cut
         const rTotal = idx.map((i) => Math.sqrt(((X[i] - cx) / a) ** 2 + ((Y[i] - cy) / b) ** 2));
         const idxFiltered = idx.filter((i, k) => !(rTotal[k] <= centerHoleRadius && sizesPx[i] < smallSizeThreshold));

app/src/content/fragments/bar.html

@@ -1,22 +1 @@
-<div>                            <div id="fd0d6e2f-9418-45a8-acf0-f9bc9952180e" class="plotly-graph-div" style="height:100%; width:100%;"></div>            <script type="text/javascript">                                    window.PLOTLYENV=window.PLOTLYENV || {};                                    if (document.getElementById("fd0d6e2f-9418-45a8-acf0-f9bc9952180e")) {                    Plotly.newPlot(                        "fd0d6e2f-9418-45a8-acf0-f9bc9952180e",                        [{"hovertemplate":"\u003cb\u003e%{x}\u003c\u002fb\u003e\u003cbr\u003e%{fullData.name}: %{y:.3f}\u003cextra\u003e\u003c\u002fextra\u003e","marker":{"color":"#64748b"},"name":"Baseline","offsetgroup":"grp","x":["A","B","C","D","E"],"y":[0.52,0.61,0.67,0.73,0.78],"type":"bar"},{"hovertemplate":"\u003cb\u003e%{x}\u003c\u002fb\u003e\u003cbr\u003e%{fullData.name}: %{y:.3f}\u003cextra\u003e\u003c\u002fextra\u003e","marker":{"color":"#2563eb"},"name":"Improved","offsetgroup":"grp","x":["A","B","C","D","E"],"y":[0.58,0.66,0.72,0.79,0.86],"type":"bar"},{"hovertemplate":"\u003cb\u003e%{x}\u003c\u002fb\u003e\u003cbr\u003e%{fullData.name}: %{y:.3f}\u003cextra\u003e\u003c\u002fextra\u003e","marker":{"color":"#4b5563","line":{"color":"#4b5563","width":1},"opacity":0.65},"name":"Target","offsetgroup":"grp","x":["A","B","C","D","E"],"y":[0.6,0.68,0.75,0.82,0.9],"type":"bar"}],                        {"template":{"data":{"histogram2dcontour":[{"type":"histogram2dcontour","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"choropleth":[{"type":"choropleth","colorbar":{"outlinewidth":0,"ticks":""}}],"histogram2d":[{"type":"histogram2d","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"heatmap":[{"type":"heatmap","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"heatmapgl":[{"type":"heatmapgl","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"contourcarpet":[{"type":"contourcarpet","colorbar":{"outlinewidth":0,"ticks":""}}],"contour":[{"type":"contour","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"surface":[{"type":"surface","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"mesh3d":[{"type":"mesh3d","colorbar":{"outlinewidth":0,"ticks":""}}],"scatter":[{"fillpattern":{"fillmode":"overlay","size":10,"solidity":0.2},"type":"scatter"}],"parcoords":[{"type":"parcoords","line":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterpolargl":[{"type":"scatterpolargl","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"bar":[{"error_x":{"color":"#2a3f5f"},"error_y":{"color":"#2a3f5f"},"marker":{"line":{"color":"#E5ECF6","width":0.5},"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"bar"}],"scattergeo":[{"type":"scattergeo","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterpolar":[{"type":"scatterpolar","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"histogram":[{"marker":{"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"histogram"}],"scattergl":[{"type":"scattergl","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatter3d":[{"type":"scatter3d","line":{"colorbar":{"outlinewidth":0,"ticks":""}},"marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattermapbox":[{"type":"scattermapbox","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterternary":[{"type":"scatterternary","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattercarpet":[{"type":"scattercarpet","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"carpet":[{"aaxis":{"endlinecolor":"#2a3f5f","gridcolor":"white","linecolor":"white","minorgridcolor":"white","startlinecolor":"#2a3f5f"},"baxis":{"endlinecolor":"#2a3f5f","gridcolor":"white","linecolor":"white","minorgridcolor":"white","startlinecolor":"#2a3f5f"},"type":"carpet"}],"table":[{"cells":{"fill":{"color":"#EBF0F8"},"line":{"color":"white"}},"header":{"fill":{"color":"#C8D4E3"},"line":{"color":"white"}},"type":"table"}],"barpolar":[{"marker":{"line":{"color":"#E5ECF6","width":0.5},"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"barpolar"}],"pie":[{"automargin":true,"type":"pie"}]},"layout":{"autotypenumbers":"strict","colorway":["#636efa","#EF553B","#00cc96","#ab63fa","#FFA15A","#19d3f3","#FF6692","#B6E880","#FF97FF","#FECB52"],"font":{"color":"#2a3f5f"},"hovermode":"closest","hoverlabel":{"align":"left"},"paper_bgcolor":"white","plot_bgcolor":"#E5ECF6","polar":{"bgcolor":"#E5ECF6","angularaxis":{"gridcolor":"white","linecolor":"white","ticks":""},"radialaxis":{"gridcolor":"white","linecolor":"white","ticks":""}},"ternary":{"bgcolor":"#E5ECF6","aaxis":{"gridcolor":"white","linecolor":"white","ticks":""},"baxis":{"gridcolor":"white","linecolor":"white","ticks":""},"caxis":{"gridcolor":"white","linecolor":"white","ticks":""}},"coloraxis":{"colorbar":{"outlinewidth":0,"ticks":""}},"colorscale":{"sequential":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"sequentialminus":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"diverging":[[0,"#8e0152"],[0.1,"#c51b7d"],[0.2,"#de77ae"],[0.3,"#f1b6da"],[0.4,"#fde0ef"],[0.5,"#f7f7f7"],[0.6,"#e6f5d0"],[0.7,"#b8e186"],[0.8,"#7fbc41"],[0.9,"#4d9221"],[1,"#276419"]]},"xaxis":{"gridcolor":"white","linecolor":"white","ticks":"","title":{"standoff":15},"zerolinecolor":"white","automargin":true,"zerolinewidth":2},"yaxis":{"gridcolor":"white","linecolor":"white","ticks":"","title":{"standoff":15},"zerolinecolor":"white","automargin":true,"zerolinewidth":2},"scene":{"xaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white","gridwidth":2},"yaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white","gridwidth":2},"zaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white","gridwidth":2}},"shapedefaults":{"line":{"color":"#2a3f5f"}},"annotationdefaults":{"arrowcolor":"#2a3f5f","arrowhead":0,"arrowwidth":1},"geo":{"bgcolor":"white","landcolor":"#E5ECF6","subunitcolor":"white","showland":true,"showlakes":true,"lakecolor":"white"},"title":{"x":0.05},"mapbox":{"style":"light"}}},"margin":{"l":28,"r":12,"t":8,"b":28},"legend":{"orientation":"h","yanchor":"bottom","y":1.02,"xanchor":"left","x":0},"xaxis":{"tickfont":{"size":12,"color":"rgba(0,0,0,0.65)"},"showgrid":false,"zeroline":false,"showline":true,"linecolor":"rgba(0,0,0,0.25)","linewidth":1,"ticks":"outside","ticklen":6,"tickcolor":"rgba(0,0,0,0.25)","title":{},"automargin":true,"fixedrange":true},"yaxis":{"tickfont":{"size":12,"color":"rgba(0,0,0,0.65)"},"showgrid":false,"zeroline":false,"showline":true,"linecolor":"rgba(0,0,0,0.25)","linewidth":1,"ticks":"outside","ticklen":6,"tickcolor":"rgba(0,0,0,0.25)","title":{},"tickformat":".2f","automargin":true,"fixedrange":true},"barmode":"group","autosize":true,"paper_bgcolor":"rgba(0,0,0,0)","plot_bgcolor":"rgba(0,0,0,0)","hovermode":"x unified"},                        {"displayModeBar": false, "responsive": true, "scrollZoom": false, "doubleClick": false, "modeBarButtonsToRemove": ["zoom2d", "pan2d", "select2d", "lasso2d", "zoomIn2d", "zoomOut2d", "autoScale2d", "resetScale2d", "toggleSpikelines"]}                    ).then(function(){
-                            
-(function(){
-  var plots = document.querySelectorAll('.js-plotly-plot');
-  plots.forEach(function(gd){
-    function round(){
-      try {
-        var root = gd && gd.parentNode ? gd.parentNode : document;
-        var rects = root.querySelectorAll('.hoverlayer .hovertext rect');
-        rects.forEach(function(r){ r.setAttribute('rx', 8); r.setAttribute('ry', 8); });
-      } catch(e) {}
-    }
-    if (gd && gd.on){
-      gd.on('plotly_hover', round);
-      gd.on('plotly_unhover', round);
-      gd.on('plotly_relayout', round);
-    }
-    setTimeout(round, 0);
-  });
-})();
-
-                        })                };                            </script>        </div>
+<div>                            <div id="3e4ed4fe-23b4-4ec1-810e-20d6fce0209b" class="plotly-graph-div" style="height:100%; width:100%;"></div>            <script type="text/javascript">                                    window.PLOTLYENV=window.PLOTLYENV || {};                                    if (document.getElementById("3e4ed4fe-23b4-4ec1-810e-20d6fce0209b")) {                    Plotly.newPlot(                        "3e4ed4fe-23b4-4ec1-810e-20d6fce0209b",                        [{"hovertemplate":"Seq len=%{x}\u003cbr\u003eMem=%{y:.1f}GB\u003cbr\u003e%{data.name}\u003cextra\u003e\u003c\u002fextra\u003e","marker":{"color":"rgb(78, 165, 183)"},"name":"parameters","showlegend":true,"visible":true,"x":["1024","2048","4096","8192"],"y":[4.0,4.0,4.0,4.0],"type":"bar"},{"hovertemplate":"Seq len=%{x}\u003cbr\u003eMem=%{y:.1f}GB\u003cbr\u003e%{data.name}\u003cextra\u003e\u003c\u002fextra\u003e","marker":{"color":"rgb(227, 138, 66)"},"name":"gradients","showlegend":true,"visible":true,"x":["1024","2048","4096","8192"],"y":[4.0,4.0,4.0,4.0],"type":"bar"},{"hovertemplate":"Seq len=%{x}\u003cbr\u003eMem=%{y:.1f}GB\u003cbr\u003e%{data.name}\u003cextra\u003e\u003c\u002fextra\u003e","marker":{"color":"rgb(232, 137, 171)"},"name":"optimizer","showlegend":true,"visible":true,"x":["1024","2048","4096","8192"],"y":[8.0,8.0,8.0,8.0],"type":"bar"},{"hovertemplate":"Seq len=%{x}\u003cbr\u003eMem=%{y:.1f}GB\u003cbr\u003e%{data.name}\u003cextra\u003e\u003c\u002fextra\u003e","marker":{"color":"rgb(206, 192, 250)"},"name":"activations","showlegend":true,"visible":true,"x":["1024","2048","4096","8192"],"y":[3.6,14.4,57.6,230.4],"type":"bar"},{"hovertemplate":"Seq len=%{x}\u003cbr\u003eMem=%{y:.1f}GB\u003cbr\u003e%{data.name}\u003cextra\u003e\u003c\u002fextra\u003e","marker":{"color":"rgb(78, 165, 183)"},"name":"parameters","showlegend":true,"visible":false,"x":["1024","2048","4096","8192"],"y":[13.3,13.3,13.3,13.3],"type":"bar"},{"hovertemplate":"Seq len=%{x}\u003cbr\u003eMem=%{y:.1f}GB\u003cbr\u003e%{data.name}\u003cextra\u003e\u003c\u002fextra\u003e","marker":{"color":"rgb(227, 138, 66)"},"name":"gradients","showlegend":true,"visible":false,"x":["1024","2048","4096","8192"],"y":[13.3,13.3,13.3,13.3],"type":"bar"},{"hovertemplate":"Seq len=%{x}\u003cbr\u003eMem=%{y:.1f}GB\u003cbr\u003e%{data.name}\u003cextra\u003e\u003c\u002fextra\u003e","marker":{"color":"rgb(232, 137, 171)"},"name":"optimizer","showlegend":true,"visible":false,"x":["1024","2048","4096","8192"],"y":[26.6,26.6,26.6,26.6],"type":"bar"},{"hovertemplate":"Seq len=%{x}\u003cbr\u003eMem=%{y:.1f}GB\u003cbr\u003e%{data.name}\u003cextra\u003e\u003c\u002fextra\u003e","marker":{"color":"rgb(206, 192, 250)"},"name":"activations","showlegend":true,"visible":false,"x":["1024","2048","4096","8192"],"y":[9.3,37.2,148.8,595.2],"type":"bar"},{"hovertemplate":"Seq len=%{x}\u003cbr\u003eMem=%{y:.1f}GB\u003cbr\u003e%{data.name}\u003cextra\u003e\u003c\u002fextra\u003e","marker":{"color":"rgb(78, 165, 183)"},"name":"parameters","showlegend":true,"visible":false,"x":["1024","2048","4096","8192"],"y":[26.0,26.0,26.0,26.0],"type":"bar"},{"hovertemplate":"Seq len=%{x}\u003cbr\u003eMem=%{y:.1f}GB\u003cbr\u003e%{data.name}\u003cextra\u003e\u003c\u002fextra\u003e","marker":{"color":"rgb(227, 138, 66)"},"name":"gradients","showlegend":true,"visible":false,"x":["1024","2048","4096","8192"],"y":[26.0,26.0,26.0,26.0],"type":"bar"},{"hovertemplate":"Seq len=%{x}\u003cbr\u003eMem=%{y:.1f}GB\u003cbr\u003e%{data.name}\u003cextra\u003e\u003c\u002fextra\u003e","marker":{"color":"rgb(232, 137, 171)"},"name":"optimizer","showlegend":true,"visible":false,"x":["1024","2048","4096","8192"],"y":[52.0,52.0,52.0,52.0],"type":"bar"},{"hovertemplate":"Seq len=%{x}\u003cbr\u003eMem=%{y:.1f}GB\u003cbr\u003e%{data.name}\u003cextra\u003e\u003c\u002fextra\u003e","marker":{"color":"rgb(206, 192, 250)"},"name":"activations","showlegend":true,"visible":false,"x":["1024","2048","4096","8192"],"y":[46.2,184.8,739.2,2956.8],"type":"bar"},{"hovertemplate":"Seq len=%{x}\u003cbr\u003eMem=%{y:.1f}GB\u003cbr\u003e%{data.name}\u003cextra\u003e\u003c\u002fextra\u003e","marker":{"color":"rgb(78, 165, 183)"},"name":"parameters","showlegend":true,"visible":false,"x":["1024","2048","4096","8192"],"y":[244.0,244.0,244.0,244.0],"type":"bar"},{"hovertemplate":"Seq len=%{x}\u003cbr\u003eMem=%{y:.1f}GB\u003cbr\u003e%{data.name}\u003cextra\u003e\u003c\u002fextra\u003e","marker":{"color":"rgb(227, 138, 66)"},"name":"gradients","showlegend":true,"visible":false,"x":["1024","2048","4096","8192"],"y":[244.0,244.0,244.0,244.0],"type":"bar"},{"hovertemplate":"Seq len=%{x}\u003cbr\u003eMem=%{y:.1f}GB\u003cbr\u003e%{data.name}\u003cextra\u003e\u003c\u002fextra\u003e","marker":{"color":"rgb(232, 137, 171)"},"name":"optimizer","showlegend":true,"visible":false,"x":["1024","2048","4096","8192"],"y":[488.0,488.0,488.0,488.0],"type":"bar"},{"hovertemplate":"Seq len=%{x}\u003cbr\u003eMem=%{y:.1f}GB\u003cbr\u003e%{data.name}\u003cextra\u003e\u003c\u002fextra\u003e","marker":{"color":"rgb(206, 192, 250)"},"name":"activations","showlegend":true,"visible":false,"x":["1024","2048","4096","8192"],"y":[145.7,582.8,2331.2,9324.8],"type":"bar"},{"hovertemplate":"Seq len=%{x}\u003cbr\u003eMem=%{y:.1f}GB\u003cbr\u003e%{data.name}\u003cextra\u003e\u003c\u002fextra\u003e","marker":{"color":"rgb(78, 165, 183)"},"name":"parameters","showlegend":true,"visible":false,"x":["1024","2048","4096","8192"],"y":[1520.0,1520.0,1520.0,1520.0],"type":"bar"},{"hovertemplate":"Seq len=%{x}\u003cbr\u003eMem=%{y:.1f}GB\u003cbr\u003e%{data.name}\u003cextra\u003e\u003c\u002fextra\u003e","marker":{"color":"rgb(227, 138, 66)"},"name":"gradients","showlegend":true,"visible":false,"x":["1024","2048","4096","8192"],"y":[1520.0,1520.0,1520.0,1520.0],"type":"bar"},{"hovertemplate":"Seq len=%{x}\u003cbr\u003eMem=%{y:.1f}GB\u003cbr\u003e%{data.name}\u003cextra\u003e\u003c\u002fextra\u003e","marker":{"color":"rgb(232, 137, 171)"},"name":"optimizer","showlegend":true,"visible":false,"x":["1024","2048","4096","8192"],"y":[3040.0,3040.0,3040.0,3040.0],"type":"bar"},{"hovertemplate":"Seq len=%{x}\u003cbr\u003eMem=%{y:.1f}GB\u003cbr\u003e%{data.name}\u003cextra\u003e\u003c\u002fextra\u003e","marker":{"color":"rgb(206, 192, 250)"},"name":"activations","showlegend":true,"visible":false,"x":["1024","2048","4096","8192"],"y":[1519.9,6079.6,24318.4,97273.6],"type":"bar"}],                        {"template":{"data":{"histogram2dcontour":[{"type":"histogram2dcontour","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"choropleth":[{"type":"choropleth","colorbar":{"outlinewidth":0,"ticks":""}}],"histogram2d":[{"type":"histogram2d","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"heatmap":[{"type":"heatmap","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"heatmapgl":[{"type":"heatmapgl","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"contourcarpet":[{"type":"contourcarpet","colorbar":{"outlinewidth":0,"ticks":""}}],"contour":[{"type":"contour","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"surface":[{"type":"surface","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"mesh3d":[{"type":"mesh3d","colorbar":{"outlinewidth":0,"ticks":""}}],"scatter":[{"fillpattern":{"fillmode":"overlay","size":10,"solidity":0.2},"type":"scatter"}],"parcoords":[{"type":"parcoords","line":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterpolargl":[{"type":"scatterpolargl","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"bar":[{"error_x":{"color":"#2a3f5f"},"error_y":{"color":"#2a3f5f"},"marker":{"line":{"color":"#E5ECF6","width":0.5},"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"bar"}],"scattergeo":[{"type":"scattergeo","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterpolar":[{"type":"scatterpolar","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"histogram":[{"marker":{"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"histogram"}],"scattergl":[{"type":"scattergl","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatter3d":[{"type":"scatter3d","line":{"colorbar":{"outlinewidth":0,"ticks":""}},"marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattermapbox":[{"type":"scattermapbox","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterternary":[{"type":"scatterternary","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattercarpet":[{"type":"scattercarpet","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"carpet":[{"aaxis":{"endlinecolor":"#2a3f5f","gridcolor":"white","linecolor":"white","minorgridcolor":"white","startlinecolor":"#2a3f5f"},"baxis":{"endlinecolor":"#2a3f5f","gridcolor":"white","linecolor":"white","minorgridcolor":"white","startlinecolor":"#2a3f5f"},"type":"carpet"}],"table":[{"cells":{"fill":{"color":"#EBF0F8"},"line":{"color":"white"}},"header":{"fill":{"color":"#C8D4E3"},"line":{"color":"white"}},"type":"table"}],"barpolar":[{"marker":{"line":{"color":"#E5ECF6","width":0.5},"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"barpolar"}],"pie":[{"automargin":true,"type":"pie"}]},"layout":{"autotypenumbers":"strict","colorway":["#636efa","#EF553B","#00cc96","#ab63fa","#FFA15A","#19d3f3","#FF6692","#B6E880","#FF97FF","#FECB52"],"font":{"color":"#2a3f5f"},"hovermode":"closest","hoverlabel":{"align":"left"},"paper_bgcolor":"white","plot_bgcolor":"#E5ECF6","polar":{"bgcolor":"#E5ECF6","angularaxis":{"gridcolor":"white","linecolor":"white","ticks":""},"radialaxis":{"gridcolor":"white","linecolor":"white","ticks":""}},"ternary":{"bgcolor":"#E5ECF6","aaxis":{"gridcolor":"white","linecolor":"white","ticks":""},"baxis":{"gridcolor":"white","linecolor":"white","ticks":""},"caxis":{"gridcolor":"white","linecolor":"white","ticks":""}},"coloraxis":{"colorbar":{"outlinewidth":0,"ticks":""}},"colorscale":{"sequential":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"sequentialminus":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"diverging":[[0,"#8e0152"],[0.1,"#c51b7d"],[0.2,"#de77ae"],[0.3,"#f1b6da"],[0.4,"#fde0ef"],[0.5,"#f7f7f7"],[0.6,"#e6f5d0"],[0.7,"#b8e186"],[0.8,"#7fbc41"],[0.9,"#4d9221"],[1,"#276419"]]},"xaxis":{"gridcolor":"white","linecolor":"white","ticks":"","title":{"standoff":15},"zerolinecolor":"white","automargin":true,"zerolinewidth":2},"yaxis":{"gridcolor":"white","linecolor":"white","ticks":"","title":{"standoff":15},"zerolinecolor":"white","automargin":true,"zerolinewidth":2},"scene":{"xaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white","gridwidth":2},"yaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white","gridwidth":2},"zaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white","gridwidth":2}},"shapedefaults":{"line":{"color":"#2a3f5f"}},"annotationdefaults":{"arrowcolor":"#2a3f5f","arrowhead":0,"arrowwidth":1},"geo":{"bgcolor":"white","landcolor":"#E5ECF6","subunitcolor":"white","showland":true,"showlakes":true,"lakecolor":"white"},"title":{"x":0.05},"mapbox":{"style":"light"}}},"margin":{"l":40,"r":28,"t":20,"b":40},"legend":{"orientation":"h","yanchor":"bottom","y":1.02,"xanchor":"left","x":0},"xaxis":{"title":{"text":"Sequence Length"},"fixedrange":true},"yaxis":{"title":{"text":"Memory (GB)"},"fixedrange":true},"barmode":"stack","autosize":true,"paper_bgcolor":"rgba(0,0,0,0)","plot_bgcolor":"rgba(0,0,0,0)","hovermode":"x unified","updatemenus":[{"active":0,"buttons":[{"args":[{"visible":[true,true,true,true,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false]},{"yaxis":{"range":[0,258.72]}}],"label":"1B","method":"update"},{"args":[{"visible":[false,false,false,false,true,true,true,true,false,false,false,false,false,false,false,false,false,false,false,false]},{"yaxis":{"range":[0,680.8200000000002]}}],"label":"3B","method":"update"},{"args":[{"visible":[false,false,false,false,false,false,false,false,true,true,true,true,false,false,false,false,false,false,false,false]},{"yaxis":{"range":[0,3213.84]}}],"label":"8B","method":"update"},{"args":[{"visible":[false,false,false,false,false,false,false,false,false,false,false,false,true,true,true,true,false,false,false,false]},{"yaxis":{"range":[0,10815.84]}}],"label":"70B","method":"update"},{"args":[{"visible":[false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,true,true,true,true]},{"yaxis":{"range":[0,108521.28000000001]}}],"label":"405B","method":"update"}],"showactive":true,"type":"dropdown","x":1.03,"xanchor":"left","y":0.6,"yanchor":"top"},{"active":0,"buttons":[{"args":[{"y":[[4.0,4.0,4.0,4.0],[4.0,4.0,4.0,4.0],[8.0,8.0,8.0,8.0],[3.6,14.4,57.6,230.4],[13.3,13.3,13.3,13.3],[13.3,13.3,13.3,13.3],[26.6,26.6,26.6,26.6],[9.3,37.2,148.8,595.2],[26.0,26.0,26.0,26.0],[26.0,26.0,26.0,26.0],[52.0,52.0,52.0,52.0],[46.2,184.8,739.2,2956.8],[244.0,244.0,244.0,244.0],[244.0,244.0,244.0,244.0],[488.0,488.0,488.0,488.0],[145.7,582.8,2331.2,9324.8],[1520.0,1520.0,1520.0,1520.0],[1520.0,1520.0,1520.0,1520.0],[3040.0,3040.0,3040.0,3040.0],[1519.9,6079.6,24318.4,97273.6]]},{"yaxis":{"range":[0,108521.28000000001]}}],"label":"None","method":"update"},{"args":[{"y":[[4.0,4.0,4.0,4.0],[4.0,4.0,4.0,4.0],[8.0,8.0,8.0,8.0],[0.9,3.6,14.4,57.6],[13.3,13.3,13.3,13.3],[13.3,13.3,13.3,13.3],[26.6,26.6,26.6,26.6],[2.325,9.3,37.2,148.8],[26.0,26.0,26.0,26.0],[26.0,26.0,26.0,26.0],[52.0,52.0,52.0,52.0],[11.55,46.2,184.8,739.2],[244.0,244.0,244.0,244.0],[244.0,244.0,244.0,244.0],[488.0,488.0,488.0,488.0],[36.425,145.7,582.8,2331.2],[1520.0,1520.0,1520.0,1520.0],[1520.0,1520.0,1520.0,1520.0],[3040.0,3040.0,3040.0,3040.0],[379.975,1519.9,6079.6,24318.4]]},{"yaxis":{"range":[0,31918.320000000003]}}],"label":"selective","method":"update"},{"args":[{"y":[[4.0,4.0,4.0,4.0],[4.0,4.0,4.0,4.0],[8.0,8.0,8.0,8.0],[0.225,0.9,3.6,14.4],[13.3,13.3,13.3,13.3],[13.3,13.3,13.3,13.3],[26.6,26.6,26.6,26.6],[0.58125,2.325,9.3,37.2],[26.0,26.0,26.0,26.0],[26.0,26.0,26.0,26.0],[52.0,52.0,52.0,52.0],[2.8875,11.55,46.2,184.8],[244.0,244.0,244.0,244.0],[244.0,244.0,244.0,244.0],[488.0,488.0,488.0,488.0],[9.10625,36.425,145.7,582.8],[1520.0,1520.0,1520.0,1520.0],[1520.0,1520.0,1520.0,1520.0],[3040.0,3040.0,3040.0,3040.0],[94.99375,379.975,1519.9,6079.6]]},{"yaxis":{"range":[0,12767.580000000002]}}],"label":"full","method":"update"}],"showactive":true,"type":"dropdown","x":1.03,"xanchor":"left","y":0.4,"yanchor":"top"}],"annotations":[{"showarrow":false,"text":"Model Size:","x":1.03,"xanchor":"left","xref":"paper","y":0.6,"yanchor":"bottom","yref":"paper"},{"showarrow":false,"text":"Recomputation:","x":1.03,"xanchor":"left","xref":"paper","y":0.4,"yanchor":"bottom","yref":"paper"}]},                        {"displayModeBar": false, "responsive": true, "scrollZoom": false}                    )                };                            </script>        </div>

app/src/content/fragments/color-picker.html

@@ -0,0 +1,213 @@
+<div class="color-picker" style="width:100%; margin: 10px 0;">
+  <style>
+    .color-picker .picker__stack { display:flex; flex-direction:column; gap:12px; }
+    .color-picker .current-card { display:flex; flex-direction: column; align-items:stretch; gap:12px; padding:14px 16px; border:1px solid var(--border-color); background: var(--surface-bg); border-radius: 12px; }
+    .color-picker .current-main { display:flex; align-items:center; gap:12px; min-width: 0; }
+    .color-picker .current-swatch { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border-color); }
+    .color-picker .current-text { display:flex; flex-direction: column; line-height: 1.2; min-width: 0; }
+    .color-picker .current-name { font-size: 14px; font-weight: 800; color: var(--text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: clamp(140px, 28vw, 260px); }
+    .color-picker .current-hex, .color-picker .current-extra { font-size: 11px; color: var(--muted-color); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: clamp(140px, 28vw, 260px); }
+    /* theme preview styles removed */
+    .color-picker .picker__bar { display:flex; align-items:center; gap:12px; }
+    .color-picker .picker__label { font-weight:700; font-size: 13px; color: var(--text-color); }
+    .color-picker .hue-slider { position:relative; height:16px; border-radius:10px; border:1px solid var(--border-color); background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); cursor: ew-resize; touch-action: none; flex: 1 1 320px; min-width: 200px; }
+    .color-picker .hue-knob { position:absolute; top:50%; left:93.6%; width:14px; height:14px; border-radius:50%; border:2px solid #fff; transform:translate(-50%, -50%); background: var(--surface-bg); z-index: 2; box-shadow: 0 0 0 1px rgba(0,0,0,.05); }
+    .color-picker .hue-slider:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
+    .color-picker .hue-value { font-variant-numeric: tabular-nums; color: var(--muted-color); min-width: 54px; text-align: right; }
+    @media (max-width: 560px) { .color-picker .picker__bar { gap:8px; } }
+  </style>
+  <div class="picker__stack">
+    <div class="current-card">
+      <div class="current-main">
+        <div class="current-swatch" aria-label="Current color" title="Current color"></div>
+        <div class="current-text">
+          <div class="current-name">—</div>
+          <div class="current-hex">—</div>
+          <div class="current-extra current-lch">—</div>
+          <div class="current-extra current-rgb">—</div>
+        </div>
+      </div>
+      <div class="picker__bar">
+        <div class="picker__label">Hue</div>
+        <div class="hue-slider" role="slider" aria-label="Hue" aria-valuemin="0" aria-valuemax="360" aria-valuenow="337" tabindex="0">
+          <div class="hue-knob"></div>
+        </div>
+        <div class="hue-value">337°</div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  (() => {
+    // Ensure chroma.js is loaded once
+    const ensureChroma = (next) => {
+      if (window.chroma) return next();
+      const loadScript = (id, src, onload, onerror) => {
+        let s = document.getElementById(id);
+        if (s) { return onload && onload(); }
+        s = document.createElement('script');
+        s.id = id; s.src = src; s.async = true;
+        if (onload) s.addEventListener('load', onload, { once: true });
+        if (onerror) s.addEventListener('error', onerror, { once: true });
+        document.head.appendChild(s);
+      };
+      loadScript('chroma-cdn', 'https://unpkg.com/chroma-js@2.4.2/dist/chroma.min.js', next, () => {
+        loadScript('chroma-cdn-fallback', 'https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.4.2/chroma.min.js', next);
+      });
+    };
+
+    // Minimal embedded color-name list (same as palettes)
+    const COLOR_NAMES = [{"name":"Candy Apple Red","hex":"#ff0800"},{"name":"Boiling Magma","hex":"#ff3300"},{"name":"Aerospace Orange","hex":"#ff4f00"},{"name":"Burtuqali Orange","hex":"#ff6700"},{"name":"American Orange","hex":"#ff8b00"},{"name":"Cheese","hex":"#ffa600"},{"name":"Amber","hex":"#ffbf00"},{"name":"Demonic Yellow","hex":"#ffe700"},{"name":"Bat-Signal","hex":"#feff00"},{"name":"Bitter Lime","hex":"#cfff00"},{"name":"Electric Lime","hex":"#ccff00"},{"name":"Bright Yellow Green","hex":"#9dff00"},{"name":"Lasting Lime","hex":"#88ff00"},{"name":"Bright Green","hex":"#66ff00"},{"name":"Chlorophyll Green","hex":"#4aff00"},{"name":"Green Screen","hex":"#22ff00"},{"name":"Electric Pickle","hex":"#00ff04"},{"name":"Acid","hex":"#00ff22"},{"name":"Lucent Lime","hex":"#00ff33"},{"name":"Cathode Green","hex":"#00ff55"},{"name":"Booger Buster","hex":"#00ff77"},{"name":"Green Gas","hex":"#00ff99"},{"name":"Enthusiasm","hex":"#00ffaa"},{"name":"Ice Ice Baby","hex":"#00ffdd"},{"name":"Master Sword Blue","hex":"#00ffee"},{"name":"Agressive Aqua","hex":"#00fbff"},{"name":"Vivid Sky Blue","hex":"#00ccff"},{"name":"Capri","hex":"#00bfff"},{"name":"Sky of Magritte","hex":"#0099ff"},{"name":"Azure","hex":"#007fff"},{"name":"Blue Ribbon","hex":"#0066ff"},{"name":"Blinking Blue","hex":"#0033ff"},{"name":"Icelandic Water","hex":"#0011ff"},{"name":"Blue","hex":"#0000ff"},{"name":"Blue Pencil","hex":"#2200ff"},{"name":"Electric Ultramarine","hex":"#3f00ff"},{"name":"Aladdin's Feather","hex":"#5500ff"},{"name":"Purple Climax","hex":"#8800ff"},{"name":"Amethyst Ganzstar","hex":"#8f00ff"},{"name":"Electric Purple","hex":"#bf00ff"},{"name":"Phlox","hex":"#df00ff"},{"name":"Brusque Pink","hex":"#ee00ff"},{"name":"Bright Magenta","hex":"#ff08e8"},{"name":"Brutal Pink","hex":"#ff00bb"},{"name":"Mean Girls Lipstick","hex":"#ff00ae"},{"name":"Big Bang Pink","hex":"#ff0099"},{"name":"Flaming Hot Flamingoes","hex":"#ff005d"},{"name":"Blazing Dragonfruit","hex":"#ff0054"},{"name":"Carmine Red","hex":"#ff0038"},{"name":"Bright Red","hex":"#ff000d"}];
+    if (!window.__colorNames) window.__colorNames = COLOR_NAMES;
+
+    // Shared event bus so multiple instances stay in sync
+    if (!window.__colorPickerBus) {
+      window.__colorPickerBus = (() => {
+        let hue = 337; // shared initial hue
+        let adjusting = false;
+        const listeners = new Set();
+        return {
+          get: () => ({ hue, adjusting }),
+          publish: (sourceId, nextHue, isAdjusting) => {
+            hue = ((nextHue % 360) + 360) % 360;
+            adjusting = !!isAdjusting;
+            listeners.forEach((fn) => { try { fn({ sourceId, hue, adjusting }); } catch {} });
+          },
+          subscribe: (fn) => { listeners.add(fn); return () => listeners.delete(fn); }
+        };
+      })();
+    }
+
+    const bootstrap = () => {
+      const mount = document.currentScript ? document.currentScript.previousElementSibling : null;
+      const root = mount && mount.closest('.color-picker') ? mount.closest('.color-picker') : document.querySelector('.color-picker');
+      if (!root || root.dataset.mounted) return; root.dataset.mounted = 'true';
+
+      const slider = root.querySelector('.hue-slider');
+      const knob = root.querySelector('.hue-knob');
+      const hueValue = root.querySelector('.hue-value');
+      const currentSwatch = root.querySelector('.current-swatch');
+      const currentName = root.querySelector('.current-name');
+      const currentHex = root.querySelector('.current-hex');
+      const currentLch = root.querySelector('.current-lch');
+      const currentRgb = root.querySelector('.current-rgb');
+
+      const bus = window.__colorPickerBus;
+      const instanceId = Math.random().toString(36).slice(2);
+
+      const getName = (hex) => {
+        const list = (window.__colorNames && window.__colorNames.length) ? window.__colorNames : COLOR_NAMES;
+        if (list && window.chroma) {
+          let bestName = null; let best = Infinity;
+          for (let i = 0; i < list.length; i++) {
+            const item = list[i];
+            const d = (chroma.deltaE ? chroma.deltaE(hex, item.hex) : chroma.distance(hex, item.hex, 'lab'));
+            if (d < best) { best = d; bestName = item.name; }
+          }
+          if (bestName) return bestName;
+        }
+        const hh = chroma(hex).get('hsl.h') || 0;
+        const labels = ['Red','Orange','Yellow','Lime','Green','Cyan','Blue','Indigo','Violet','Magenta'];
+        const idx = Math.round(((hh % 360) / 360) * (labels.length - 1));
+        return labels[idx];
+      };
+
+      const updateUI = (h, adjusting) => {
+        const pct = (h / 360) * 100;
+        if (knob) knob.style.left = pct + '%';
+        if (hueValue) hueValue.textContent = `${Math.round(h)}°`;
+        if (slider) slider.setAttribute('aria-valuenow', String(Math.round(h)));
+        // Use LCH for consistent chroma across hues
+        const L = 70; // lightness
+        const C = 60; // chroma kept within sRGB-friendly range
+        const base = chroma.lch(L, C, h);
+        const baseHex = base.hex();
+        if (currentSwatch) currentSwatch.style.background = baseHex;
+        if (currentName) currentName.textContent = getName(baseHex.toUpperCase());
+        if (currentHex) currentHex.textContent = baseHex.toUpperCase();
+        if (currentLch) {
+          const lc = base.lch();
+          const L = Math.round((lc[0] || 0));
+          const C = Math.round((lc[1] || 0));
+          const H = Math.round(((lc[2] || 0) % 360 + 360) % 360);
+          currentLch.textContent = `LCH ${L}, ${C}, ${H}°`;
+        }
+        if (currentRgb) {
+          const rgb = base.rgb().map(v => Math.round(v));
+          currentRgb.textContent = `RGB ${rgb[0]}, ${rgb[1]}, ${rgb[2]}`;
+        }
+        // Appliquer au thème (toujours, pour refléter la sélection)
+        const hoverL = Math.max(0, Math.min(100, L - 8));
+        const hoverHex = chroma.lch(hoverL, C, h).hex();
+        const rootEl = document.documentElement;
+        rootEl.style.setProperty('--primary', baseHex);
+        rootEl.style.setProperty('--primary-hover', hoverHex);
+      };
+
+      const getHueFromEvent = (ev) => {
+        const rect = slider.getBoundingClientRect();
+        const clientX = ev.touches ? ev.touches[0].clientX : ev.clientX;
+        const x = clientX - rect.left;
+        const t = Math.max(0, Math.min(1, x / rect.width));
+        return t * 360;
+      };
+
+      // Subscribe to bus to sync multiple instances
+      const unsubscribe = bus.subscribe(({ sourceId, hue, adjusting }) => {
+        if (sourceId === instanceId) return; // avoid feedback
+        updateUI(hue, adjusting);
+      });
+
+      // Init depuis la couleur de thème si disponible
+      try {
+        const cssPrimary = getComputedStyle(document.documentElement).getPropertyValue('--primary').trim();
+        if (cssPrimary) {
+          const initH = chroma(cssPrimary).get('hsl.h') || 0;
+          updateUI(initH, false);
+          bus.publish(instanceId, initH, false);
+        } else {
+          const { hue: sharedHue } = bus.get();
+          updateUI(sharedHue, false);
+        }
+      } catch {
+        const { hue: sharedHue } = bus.get();
+        updateUI(sharedHue, false);
+      }
+
+      const onDown = (ev) => {
+        ev.preventDefault();
+        const h = getHueFromEvent(ev);
+        updateUI(h, true);
+        bus.publish(instanceId, h, true);
+        const move = (e) => { e.preventDefault && e.preventDefault(); const hh = getHueFromEvent(e); updateUI(hh, true); bus.publish(instanceId, hh, true); };
+        const up = () => { bus.publish(instanceId, getHueFromEvent(ev), false); window.removeEventListener('mousemove', move); window.removeEventListener('touchmove', move); window.removeEventListener('mouseup', up); window.removeEventListener('touchend', up); };
+        window.addEventListener('mousemove', move, { passive: false });
+        window.addEventListener('touchmove', move, { passive: false });
+        window.addEventListener('mouseup', up, { once: true });
+        window.addEventListener('touchend', up, { once: true });
+      };
+
+      if (slider) {
+        slider.addEventListener('mousedown', onDown);
+        slider.addEventListener('touchstart', onDown, { passive: false });
+        // Minimal support clavier (←/→, ⇧ pour pas trop saccader)
+        slider.addEventListener('keydown', (e) => {
+          const step = e.shiftKey ? 10 : 2;
+          if (e.key === 'ArrowLeft') { e.preventDefault(); const { hue } = bus.get(); const h = hue - step; updateUI(h, true); bus.publish(instanceId, h, true); bus.publish(instanceId, h, false); }
+          if (e.key === 'ArrowRight') { e.preventDefault(); const { hue } = bus.get(); const h = hue + step; updateUI(h, true); bus.publish(instanceId, h, true); bus.publish(instanceId, h, false); }
+        });
+      }
+
+      // Clean up on detach (best-effort)
+      const ro = new MutationObserver(() => {
+        if (!document.body.contains(root)) { unsubscribe && unsubscribe(); ro.disconnect(); }
+      });
+      ro.observe(document.body, { childList: true, subtree: true });
+    };
+
+    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => ensureChroma(bootstrap), { once: true });
+    else ensureChroma(bootstrap);
+  })();
+</script>
+
+

app/src/content/fragments/d3-bar.html

@@ -0,0 +1,200 @@
+<div class="d3-bar" style="width:100%;margin:10px 0;"></div>
+<style>
+  .d3-bar .controls { margin-top: 12px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
+  .d3-bar .controls label { font-size: 12px; color: var(--muted-color); display: flex; align-items: center; gap: 8px; white-space: nowrap; padding: 6px 10px; }
+  .d3-bar .controls select { font-size: 12px; padding: 8px 28px 8px 10px; border: 1px solid var(--border-color); border-radius: 8px; background-color: var(--surface-bg); color: var(--text-color); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230f1115' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 12px; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
+  [data-theme="dark"] .d3-bar .controls select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); }
+  .d3-bar .controls select:hover { border-color: var(--primary); }
+  .d3-bar .controls select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(232,137,171,.25); outline: none; }
+  .d3-bar .legend { font-size: 12px; line-height: 1.35; color: var(--text-color); }
+</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 mount = document.currentScript ? document.currentScript.previousElementSibling : null;
+      const container = (mount && mount.querySelector && mount.querySelector('.d3-bar')) || document.querySelector('.d3-bar');
+      if (!container) return;
+      if (container.dataset) { if (container.dataset.mounted === 'true') return; container.dataset.mounted = 'true'; }
+
+      // Data, matching bar.py
+      const seqLabels = ["1024","2048","4096","8192"];
+      const seqScale = [1,2,4,8];
+      const components = [
+        { key: 'parameters',  color: 'rgb(78, 165, 183)' },
+        { key: 'gradients',   color: 'rgb(227, 138, 66)' },
+        { key: 'optimizer',   color: 'var(--primary)' },
+        { key: 'activations', color: 'rgb(206, 192, 250)' },
+      ];
+      const modelSizes = ["1B","3B","8B","70B","405B"];
+      const paramsMem = { "1B":4.0, "3B":13.3, "8B":26.0, "70B":244.0, "405B":1520.0 };
+      const actCoeff = { "1B":3.6, "3B":9.3, "8B":46.2, "70B":145.7, "405B":1519.9 };
+      const recomputeModes = ["none","selective","full"];
+
+      const activationsCurve = (sizeKey, mode) => {
+        const coeff = actCoeff[sizeKey];
+        let arr = seqScale.map((v) => coeff * (v * v));
+        if (mode === 'selective') arr = arr.map((v) => v * 0.25);
+        else if (mode === 'full') arr = arr.map((v) => v * (1 / 16));
+        return arr;
+      };
+      const stackFor = (sizeKey, mode) => {
+        const p = seqScale.map(() => paramsMem[sizeKey]);
+        const g = seqScale.map(() => paramsMem[sizeKey]);
+        const o = seqScale.map(() => 2*paramsMem[sizeKey]);
+        const a = activationsCurve(sizeKey, mode);
+        return { parameters: p, gradients: g, optimizer: o, activations: a };
+      };
+
+      const Y = {}; // Y[mode][size][component] => array
+      recomputeModes.forEach((m) => {
+        Y[m] = {}; modelSizes.forEach((s) => { Y[m][s] = stackFor(s, m); });
+      });
+
+      // Controls
+      const controls = document.createElement('div');
+      controls.className = 'controls';
+      const labelSize = document.createElement('label'); labelSize.textContent = 'Model Size';
+      const selSize = document.createElement('select'); modelSizes.forEach((s) => { const o = document.createElement('option'); o.value = s; o.textContent = s; selSize.appendChild(o); });
+      labelSize.appendChild(selSize);
+      const labelRecomp = document.createElement('label'); labelRecomp.textContent = 'Recomputation';
+      const selRecomp = document.createElement('select'); recomputeModes.forEach((m) => { const o = document.createElement('option'); o.value = m; o.textContent = m; selRecomp.appendChild(o); });
+      labelRecomp.appendChild(selRecomp);
+
+      // SVG scaffolding
+      const svg = d3.select(container).append('svg').attr('width','100%').style('display','block');
+      const gRoot = svg.append('g');
+      const gGrid = gRoot.append('g').attr('class','grid');
+      const gAxes = gRoot.append('g').attr('class','axes');
+      const gBars = gRoot.append('g').attr('class','bars');
+      const gLegend = gRoot.append('foreignObject').attr('class','legend');
+
+      // Tooltip
+      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; }
+
+      // State
+      let currentSize = modelSizes[0];
+      let currentMode = 'none';
+
+      // Layout & scales
+      let width=800, height=360; const margin = { top: 16, right: 28, bottom: 56, left: 64 };
+      const x0 = d3.scaleBand().paddingInner(0.25).paddingOuter(0.1); // groups (seq)
+      const y = d3.scaleLinear();
+      const colorOf = (key) => components.find((c)=>c.key===key).color;
+
+      function yMax(sizeKey, mode){
+        const s = Y[mode][sizeKey];
+        let max = 0; for (let i=0;i<seqLabels.length;i++){ const sum = s.parameters[i]+s.gradients[i]+s.optimizer[i]+s.activations[i]; if (sum>max) max=sum; }
+        return max*1.05;
+      }
+
+      function renderLegend(innerWidth, innerHeight){
+        const legendWidth = 160, legendHeight = 84;
+        gLegend.attr('x', 15).attr('y', -3).attr('width', legendWidth).attr('height', legendHeight);
+        const root = gLegend.selectAll('div').data([0]).join('xhtml:div');
+        root.html(`
+          <div style="display:flex;flex-direction:column;gap:6px;">
+            ${components.map(c => `<div style="display:flex;align-items:center;gap:8px;"><span style="width:18px;height:10px;background:${c.color};border-radius:2px;display:inline-block"></span><span>${c.key}</span></div>`).join('')}
+          </div>
+        `);
+      }
+
+      function updateScales(){
+        const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+        const axisColor = isDark ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.25)';
+        const tickColor = isDark ? 'rgba(255,255,255,0.70)' : 'rgba(0,0,0,0.55)';
+        const gridColor = isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.05)';
+
+        width = container.clientWidth || 800; height = Math.max(260, Math.round(width/3)); svg.attr('width', width).attr('height', height);
+        const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
+
+        x0.domain(seqLabels).range([0, innerWidth]);
+        y.domain([0, yMax(currentSize, currentMode)]).range([innerHeight, 0]).nice();
+
+        // Grid
+        gGrid.selectAll('*').remove();
+        gGrid.selectAll('line').data(y.ticks(6)).join('line')
+          .attr('x1', 0).attr('x2', innerWidth).attr('y1', (d)=>y(d)).attr('y2', (d)=>y(d))
+          .attr('stroke', gridColor).attr('stroke-width', 1).attr('shape-rendering', 'crispEdges');
+
+        // Axes
+        gAxes.selectAll('*').remove();
+        gAxes.append('g').attr('transform', `translate(0,${innerHeight})`).call(d3.axisBottom(x0)).call((g)=>{ g.selectAll('path, line').attr('stroke', axisColor); g.selectAll('text').attr('fill', tickColor).style('font-size','12px'); });
+        gAxes.append('g').call(d3.axisLeft(y).ticks(6).tickFormat(d3.format('.2f'))).call((g)=>{ g.selectAll('path, line').attr('stroke', axisColor); g.selectAll('text').attr('fill', tickColor).style('font-size','12px'); });
+
+        // Axis labels
+        gAxes.append('text').attr('class','axis-label axis-label--x').attr('x', innerWidth/2).attr('y', innerHeight + 44).attr('text-anchor','middle').style('font-size','12px').style('fill', tickColor).text('Sequence Length');
+        gAxes.append('text').attr('class','axis-label axis-label--y').attr('text-anchor','middle').attr('transform', `translate(${-52},${innerHeight/2}) rotate(-90)`).style('font-size','12px').style('fill', tickColor).text('Memory (GB)');
+
+        renderLegend(innerWidth, innerHeight);
+
+        return { innerWidth, innerHeight };
+      }
+
+      function drawBars(){
+        const stacks = Y[currentMode][currentSize];
+        const series = components.map((c)=>({ key: c.key, color: c.color, values: stacks[c.key] }));
+        // Stack values
+        const stacked = seqLabels.map((label, i) => {
+          let acc = 0; const items = [];
+          series.forEach((s) => { const y0 = acc; const y1 = acc + s.values[i]; items.push({ key: s.key, color: s.color, i, y0, y1, xLabel: label, value: s.values[i] }); acc = y1; });
+          return { label, items };
+        });
+
+        const { innerWidth, innerHeight } = updateScales();
+
+        const bandWidth = x0.bandwidth();
+        const groups = gBars.selectAll('g.bar-group').data(stacked, d=>d.label);
+        const groupsEnter = groups.enter().append('g').attr('class','bar-group');
+        groupsEnter.merge(groups).attr('transform', (d)=>`translate(${x0(d.label)},0)`);
+        groups.exit().remove();
+
+        const rects = groupsEnter.merge(groups).selectAll('rect.bar').data(d=>d.items, d=>d.key);
+        rects.enter().append('rect').attr('class','bar').attr('x', 0).attr('width', bandWidth)
+          .attr('y', (d)=>y(d.y1)).attr('height', (d)=>Math.max(0.5, y(d.y0) - y(d.y1)))
+          .attr('fill', (d)=>d.color)
+          .on('mouseenter', function(ev, d){
+            d3.select(this).attr('stroke', 'rgba(0,0,0,0.85)').attr('stroke-width', 1);
+            tipInner.innerHTML = `<div><strong>${d.key}</strong></div><div><strong>Seq</strong> ${d.xLabel}</div><div><strong>Mem</strong> ${d.value.toFixed(1)} GB</div>`;
+            tip.style.opacity = '1';
+          })
+          .on('mousemove', function(ev, d){
+            const [mx, my] = d3.pointer(ev, container); const offsetX = 12, offsetY = 12; tip.style.transform = `translate(${Math.round(mx+offsetX)}px, ${Math.round(my+offsetY)}px)`;
+          })
+          .on('mouseleave', function(){ tip.style.opacity='0'; tip.style.transform='translate(-9999px, -9999px)'; d3.select(this).attr('stroke','none'); })
+          .merge(rects)
+          .transition().duration(200)
+          .attr('width', bandWidth)
+          .attr('y', (d)=>y(d.y1)).attr('height', (d)=>Math.max(0.5, y(d.y0) - y(d.y1)))
+          .attr('fill', (d)=>d.color);
+        rects.exit().remove();
+      }
+
+      function update(){ drawBars(); }
+
+      // Boot
+      update();
+      container.appendChild(controls);
+      controls.appendChild(labelSize); controls.appendChild(labelRecomp);
+      selSize.addEventListener('change', (e)=>{ currentSize = e.target.value; update(); });
+      selRecomp.addEventListener('change', (e)=>{ currentMode = e.target.value; update(); });
+
+      const rerender = () => { update(); };
+      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/fragments/d3-line.html

@@ -0,0 +1,429 @@
+<div class="d3-line" style="width:100%;margin:10px 0;"></div>
+<style>
+  .d3-line .d3-line__controls select {
+    font-size: 12px;
+    padding: 8px 28px 8px 10px;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    background-color: var(--surface-bg);
+    color: var(--text-color);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230f1115' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 8px center;
+    background-size: 12px;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    cursor: pointer;
+    transition: border-color .15s ease, box-shadow .15s ease;
+  }
+  [data-theme="dark"] .d3-line .d3-line__controls select {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+  }
+  .d3-line .d3-line__controls select:hover {
+    border-color: var(--primary);
+  }
+  .d3-line .d3-line__controls select:focus {
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px rgba(232,137,171,.25);
+    outline: none;
+  }
+  .d3-line .d3-line__controls label { gap: 8px; }
+
+  /* Range slider themed with --primary */
+  .d3-line .d3-line__controls input[type="range"] { 
+    -webkit-appearance: none; 
+    appearance: none; 
+    width: 100%; 
+    height: 6px; 
+    border-radius: 999px; 
+    background: var(--border-color);
+    outline: none;
+  }
+  .d3-line .d3-line__controls input[type="range"]::-webkit-slider-runnable-track {
+    height: 6px; 
+    background: transparent; 
+    border-radius: 999px;
+  }
+  .d3-line .d3-line__controls input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none; 
+    appearance: none; 
+    width: 16px; 
+    height: 16px; 
+    border-radius: 50%; 
+    background: var(--primary); 
+    border: 2px solid var(--on-primary);
+    margin-top: -5px; 
+    cursor: pointer;
+  }
+  .d3-line .d3-line__controls input[type="range"]::-moz-range-track {
+    height: 6px; 
+    background: transparent; 
+    border-radius: 999px;
+  }
+  .d3-line .d3-line__controls input[type="range"]::-moz-range-thumb {
+    width: 16px; 
+    height: 16px; 
+    border-radius: 50%; 
+    background: var(--primary); 
+    border: 2px solid var(--on-primary);
+    cursor: pointer;
+  }
+  /* Improved line color via CSS */
+  .d3-line .lines path.improved { stroke: var(--primary); }
+</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 mount = document.currentScript ? document.currentScript.previousElementSibling : null;
+      const container = (mount && mount.querySelector && mount.querySelector('.d3-line')) || document.querySelector('.d3-line');
+      if (!container) return;
+      if (container.dataset) {
+        if (container.dataset.mounted === 'true') return;
+        container.dataset.mounted = 'true';
+      }
+
+      // Dataset params matching the Plotly version
+      const datasets = [
+        { name: 'CIFAR-10',    base: { ymin:0.10, ymax:0.90, k:10.0, x0:0.55 }, aug: { ymin:0.15, ymax:0.96, k:12.0, x0:0.40 }, target: 0.97 },
+        { name: 'CIFAR-100',   base: { ymin:0.05, ymax:0.70, k: 9.5, x0:0.60 }, aug: { ymin:0.08, ymax:0.80, k:11.0, x0:0.45 }, target: 0.85 },
+        { name: 'ImageNet-1K', base: { ymin:0.02, ymax:0.68, k: 8.5, x0:0.65 }, aug: { ymin:0.04, ymax:0.75, k: 9.5, x0:0.50 }, target: 0.82 },
+      ];
+
+      // Controls UI
+      const controls = document.createElement('div');
+      controls.className = 'd3-line__controls';
+      Object.assign(controls.style, {
+        marginTop: '12px',
+        display: 'flex',
+        gap: '16px',
+        alignItems: 'center'
+      });
+
+      const labelDs = document.createElement('label');
+      Object.assign(labelDs.style, {
+        fontSize: '12px', color: 'rgba(0,0,0,.65)', display: 'flex', alignItems: 'center', gap: '6px', whiteSpace: 'nowrap', padding: '6px 10px'
+      });
+      labelDs.textContent = 'Dataset';
+      const selectDs = document.createElement('select');
+      Object.assign(selectDs.style, { fontSize: '12px' });
+      datasets.forEach((d, i) => {
+        const o = document.createElement('option');
+        o.value = String(i);
+        o.textContent = d.name;
+        selectDs.appendChild(o);
+      });
+      labelDs.appendChild(selectDs);
+
+      const labelAlpha = document.createElement('label');
+      Object.assign(labelAlpha.style, {
+        fontSize: '12px', color: 'rgba(0,0,0,.65)', display: 'flex', alignItems: 'center', gap: '10px', flex: '1', padding: '6px 10px'
+      });
+      labelAlpha.appendChild(document.createTextNode('Augmentation α'));
+      const slider = document.createElement('input');
+      slider.type = 'range'; slider.min = '0'; slider.max = '1'; slider.step = '0.01'; slider.value = '0.70';
+      Object.assign(slider.style, { flex: '1' });
+      const alphaVal = document.createElement('span'); alphaVal.className = 'alpha-value'; alphaVal.textContent = slider.value;
+      labelAlpha.appendChild(slider);
+      labelAlpha.appendChild(alphaVal);
+
+      controls.appendChild(labelDs);
+      controls.appendChild(labelAlpha);
+
+      // Create SVG
+      const svg = d3.select(container).append('svg')
+        .attr('width', '100%')
+        .style('display', 'block');
+
+      // Groups
+      const gRoot = svg.append('g');
+      const gGrid = gRoot.append('g').attr('class', 'grid');
+      const gAxes = gRoot.append('g').attr('class', 'axes');
+      const gLines = gRoot.append('g').attr('class', 'lines');
+      const gHover = gRoot.append('g').attr('class', 'hover');
+      const gLegend = gRoot.append('foreignObject').attr('class', 'legend');
+
+      // Tooltip
+      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;
+      }
+
+      // Colors
+      const colorBase = '#64748b';     // slate-500
+      const colorImproved = 'var(--primary)';
+      const colorTarget = '#4b5563';   // gray-600
+      const legendBgLight = 'rgba(255,255,255,0.85)';
+      const legendBgDark = 'rgba(17,17,23,0.85)';
+
+      // Data and helpers
+      const N = 240;
+      const xs = Array.from({ length: N }, (_, i) => i / (N - 1));
+      const logistic = (x, { ymin, ymax, k, x0 }) => ymin + (ymax - ymin) / (1 + Math.exp(-k * (x - x0)));
+      const blend = (l, e, a) => (1 - a) * l + a * e;
+
+      let datasetIndex = 0;
+      let alpha = parseFloat(slider.value) || 0.7;
+
+      let yBase = [];
+      let yAug = [];
+      let yImp = [];
+      let yTgt = [];
+
+      function computeCurves() {
+        const d = datasets[datasetIndex];
+        yBase = xs.map((x) => logistic(x, d.base));
+        yAug  = xs.map((x) => logistic(x, d.aug));
+        yTgt  = xs.map(() => d.target);
+        yImp  = yBase.map((v, i) => blend(v, yAug[i], alpha));
+      }
+
+      // Scales and layout
+      let width = 800, height = 360;
+      let margin = { top: 16, right: 28, bottom: 56, left: 64 };
+      let xScale = d3.scaleLinear();
+      let yScale = d3.scaleLinear();
+
+      // Paths
+      const lineGen = d3.line()
+        .curve(d3.curveCatmullRom.alpha(0.6))
+        .x((d, i) => xScale(xs[i]))
+        .y((d) => yScale(d));
+
+      const pathBase = gLines.append('path').attr('fill', 'none').attr('stroke', colorBase).attr('stroke-width', 2);
+      const pathImp  = gLines.append('path').attr('class', 'improved').attr('fill', 'none').style('stroke', 'var(--primary)').attr('stroke-width', 2);
+      const pathTgt  = gLines.append('path').attr('fill', 'none').attr('stroke', colorTarget).attr('stroke-width', 2).attr('stroke-dasharray', '6,6');
+
+      // Hover elements
+      const hoverLine = gHover.append('line').attr('stroke-width', 1);
+      const hoverDotB = gHover.append('circle').attr('r', 3.5).attr('fill', colorBase).attr('stroke', '#fff').attr('stroke-width', 1);
+      const hoverDotI = gHover.append('circle').attr('class', 'improved').attr('r', 3.5).style('fill', 'var(--primary)').attr('stroke', '#fff').attr('stroke-width', 1);
+      const hoverDotT = gHover.append('circle').attr('r', 3.5).attr('fill', colorTarget).attr('stroke', '#fff').attr('stroke-width', 1);
+
+      const overlay = gHover.append('rect').attr('fill', 'transparent').style('cursor', 'crosshair');
+
+      function updateScales() {
+        const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+        const axisColor = isDark ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.25)';
+        const tickColor = isDark ? 'rgba(255,255,255,0.70)' : 'rgba(0,0,0,0.55)';
+        const gridColor = isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.05)';
+
+        width = container.clientWidth || 800;
+        height = Math.max(260, Math.round(width / 3));
+        svg.attr('width', width).attr('height', height);
+
+        const innerWidth = width - margin.left - margin.right;
+        const innerHeight = height - margin.top - margin.bottom;
+        gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
+
+        xScale.domain([0, 1]).range([0, innerWidth]);
+        yScale.domain([0, 1]).range([innerHeight, 0]);
+
+        // Grid (horizontal)
+        gGrid.selectAll('*').remove();
+        const yTicks = yScale.ticks(6);
+        gGrid.selectAll('line')
+          .data(yTicks)
+          .join('line')
+          .attr('x1', 0)
+          .attr('x2', innerWidth)
+          .attr('y1', (d) => yScale(d))
+          .attr('y2', (d) => yScale(d))
+          .attr('stroke', gridColor)
+          .attr('stroke-width', 1)
+          .attr('shape-rendering', 'crispEdges');
+
+        // Axes
+        gAxes.selectAll('*').remove();
+        const xAxis = d3.axisBottom(xScale).ticks(8).tickSizeOuter(0);
+        const yAxis = d3.axisLeft(yScale).ticks(6).tickSizeOuter(0).tickFormat(d3.format('.2f'));
+        gAxes.append('g')
+          .attr('transform', `translate(0,${innerHeight})`)
+          .call(xAxis)
+          .call((g) => {
+            g.selectAll('path, line').attr('stroke', axisColor);
+            g.selectAll('text').attr('fill', tickColor).style('font-size', '12px');
+          });
+        gAxes.append('g')
+          .call(yAxis)
+          .call((g) => {
+            g.selectAll('path, line').attr('stroke', axisColor);
+            g.selectAll('text').attr('fill', tickColor).style('font-size', '12px');
+          });
+
+        // Axis labels (X and Y)
+        gAxes.append('text')
+          .attr('class', 'axis-label axis-label--x')
+          .attr('x', innerWidth / 2)
+          .attr('y', innerHeight + 44)
+          .attr('text-anchor', 'middle')
+          .style('font-size', '12px')
+          .style('fill', tickColor)
+          .text('Epoch');
+        gAxes.append('text')
+          .attr('class', 'axis-label axis-label--y')
+          .attr('text-anchor', 'middle')
+          .attr('transform', `translate(${-52},${innerHeight/2}) rotate(-90)`) 
+          .style('font-size', '12px')
+          .style('fill', tickColor)
+          .text('Accuracy');
+
+        overlay.attr('x', 0).attr('y', 0).attr('width', innerWidth).attr('height', innerHeight);
+        hoverLine.attr('y1', 0).attr('y2', innerHeight).attr('stroke', axisColor);
+
+        // Legend inside plot (bottom-right), no background/border/shadow
+        const legendWidth = Math.min(180, Math.max(120, Math.round(innerWidth * 0.22)));
+        const legendHeight = 64;
+        gLegend
+          .attr('x', innerWidth - legendWidth + 42)
+          .attr('y', innerHeight - legendHeight - 12)
+          .attr('width', legendWidth)
+          .attr('height', legendHeight);
+        const legendRoot = gLegend.selectAll('div').data([0]).join('xhtml:div');
+        Object.assign(legendRoot.node().style, {
+          background: 'transparent',
+          border: 'none',
+          borderRadius: '0',
+          padding: '0',
+          fontSize: '12px',
+          lineHeight: '1.35',
+          color: 'var(--text-color)'
+        });
+        legendRoot.html(`
+          <div style="display:flex;flex-direction:column;gap:6px;">
+            <div style="display:flex;align-items:center;gap:8px;">
+              <span style="width:18px;height:3px;background:${colorBase};border-radius:2px;display:inline-block"></span>
+              <span>Baseline</span>
+            </div>
+            <div style="display:flex;align-items:center;gap:8px;">
+              <span style="width:18px;height:3px;background:${colorImproved};border-radius:2px;display:inline-block"></span>
+              <span>Improved</span>
+            </div>
+            <div style="display:flex;align-items:center;gap:8px;">
+              <span style="width:18px;height:0;border-top:2px dashed ${colorTarget};display:inline-block"></span>
+              <span>Target</span>
+            </div>
+          </div>
+        `);
+      }
+
+      function updatePaths() {
+        pathBase.transition().duration(200).attr('d', lineGen(yBase));
+        pathImp.transition().duration(200).attr('d', lineGen(yImp));
+        pathTgt.transition().duration(200).attr('d', lineGen(yTgt));
+      }
+
+      function updateAlpha(a) {
+        alpha = a;
+        alphaVal.textContent = a.toFixed(2);
+        yImp = yBase.map((v, i) => blend(v, yAug[i], alpha));
+        pathImp.transition().duration(80).attr('d', lineGen(yImp));
+      }
+
+      function applyDataset() {
+        computeCurves();
+        updatePaths();
+      }
+
+      // Hover interactions
+      function onMove(event) {
+        const [mx, my] = d3.pointer(event, overlay.node());
+        const xi = Math.max(0, Math.min(N - 1, Math.round(xScale.invert(mx) * (N - 1))));
+        const xpx = xScale(xs[xi]);
+        const yb = yBase[xi], yi = yImp[xi], yt = yTgt[xi];
+        hoverLine.attr('x1', xpx).attr('x2', xpx).style('display', null);
+        hoverDotB.attr('cx', xpx).attr('cy', yScale(yb)).style('display', null);
+        hoverDotI.attr('cx', xpx).attr('cy', yScale(yi)).style('display', null);
+        hoverDotT.attr('cx', xpx).attr('cy', yScale(yt)).style('display', null);
+
+        // Tooltip content
+        const ds = datasets[datasetIndex].name;
+        tipInner.innerHTML = `<div><strong>${ds}</strong></div>` +
+          `<div><strong>x</strong> ${xs[xi].toFixed(2)}</div>` +
+          `<div><span style="display:inline-block;width:10px;height:10px;background:${colorBase};border-radius:50%;margin-right:6px;"></span><strong>Baseline</strong> ${yb.toFixed(3)}</div>` +
+          `<div><span style="display:inline-block;width:10px;height:10px;background:${colorImproved};border-radius:50%;margin-right:6px;"></span><strong>Improved</strong> ${yi.toFixed(3)}</div>` +
+          `<div><span style="display:inline-block;width:10px;height:10px;background:${colorTarget};border-radius:50%;margin-right:6px;"></span><strong>Target</strong> ${yt.toFixed(3)}</div>`;
+        const offsetX = 12, offsetY = 12;
+        tip.style.opacity = '1';
+        tip.style.transform = `translate(${Math.round(mx + offsetX + margin.left)}px, ${Math.round(my + offsetY + margin.top)}px)`;
+      }
+
+      function onLeave() {
+        tip.style.opacity = '0';
+        tip.style.transform = 'translate(-9999px, -9999px)';
+        hoverLine.style('display', 'none');
+        hoverDotB.style('display', 'none');
+        hoverDotI.style('display', 'none');
+        hoverDotT.style('display', 'none');
+      }
+
+      overlay.on('mousemove', onMove).on('mouseleave', onLeave);
+
+      // Init + controls wiring
+      computeCurves();
+      updateScales();
+      updatePaths();
+
+      // Attach controls after SVG for consistency with Plotly fragment
+      container.appendChild(controls);
+
+      selectDs.addEventListener('change', (e) => {
+        datasetIndex = parseInt(e.target.value) || 0;
+        applyDataset();
+      });
+      slider.addEventListener('input', (e) => {
+        const a = parseFloat(e.target.value) || 0;
+        updateAlpha(a);
+      });
+
+      // Resize handling
+      const render = () => {
+        updateScales();
+        updatePaths();
+      };
+      if (window.ResizeObserver) {
+        const ro = new ResizeObserver(() => render());
+        ro.observe(container);
+      } else {
+        window.addEventListener('resize', render);
+      }
+      render();
+    };
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true });
+    } else { ensureD3(bootstrap); }
+  })();
+</script>
+
+

app/src/content/fragments/heatmap.html

@@ -1 +1,159 @@
-<div>                            <div id="47076730-9b36-4ef3-9cd9-80fa6f5baf65" class="plotly-graph-div" style="height:100%; width:100%;"></div>            <script type="text/javascript">                                    window.PLOTLYENV=window.PLOTLYENV || {};                                    if (document.getElementById("47076730-9b36-4ef3-9cd9-80fa6f5baf65")) {                    Plotly.newPlot(                        "47076730-9b36-4ef3-9cd9-80fa6f5baf65",                        [{"colorscale":[[0.0,"#e5e7eb"],[0.4,"#64748b"],[0.75,"#2563eb"],[1.0,"#4b5563"]],"customdata":[["2024-09-02","2024-09-09","2024-09-16","2024-09-23","2024-09-30","2024-10-07","2024-10-14","2024-10-21","2024-10-28","2024-11-04","2024-11-11","2024-11-18","2024-11-25","2024-12-02","2024-12-09","2024-12-16","2024-12-23","2024-12-30","2025-01-06","2025-01-13","2025-01-20","2025-01-27","2025-02-03","2025-02-10","2025-02-17","2025-02-24","2025-03-03","2025-03-10","2025-03-17","2025-03-24","2025-03-31","2025-04-07","2025-04-14","2025-04-21","2025-04-28","2025-05-05","2025-05-12","2025-05-19","2025-05-26","2025-06-02","2025-06-09","2025-06-16","2025-06-23","2025-06-30","2025-07-07","2025-07-14","2025-07-21","2025-07-28","2025-08-04","2025-08-11","2025-08-18","2025-08-25"],["2024-09-03","2024-09-10","2024-09-17","2024-09-24","2024-10-01","2024-10-08","2024-10-15","2024-10-22","2024-10-29","2024-11-05","2024-11-12","2024-11-19","2024-11-26","2024-12-03","2024-12-10","2024-12-17","2024-12-24","2024-12-31","2025-01-07","2025-01-14","2025-01-21","2025-01-28","2025-02-04","2025-02-11","2025-02-18","2025-02-25","2025-03-04","2025-03-11","2025-03-18","2025-03-25","2025-04-01","2025-04-08","2025-04-15","2025-04-22","2025-04-29","2025-05-06","2025-05-13","2025-05-20","2025-05-27","2025-06-03","2025-06-10","2025-06-17","2025-06-24","2025-07-01","2025-07-08","2025-07-15","2025-07-22","2025-07-29","2025-08-05","2025-08-12","2025-08-19","2025-08-26"],["2024-09-04","2024-09-11","2024-09-18","2024-09-25","2024-10-02","2024-10-09","2024-10-16","2024-10-23","2024-10-30","2024-11-06","2024-11-13","2024-11-20","2024-11-27","2024-12-04","2024-12-11","2024-12-18","2024-12-25","2025-01-01","2025-01-08","2025-01-15","2025-01-22","2025-01-29","2025-02-05","2025-02-12","2025-02-19","2025-02-26","2025-03-05","2025-03-12","2025-03-19","2025-03-26","2025-04-02","2025-04-09","2025-04-16","2025-04-23","2025-04-30","2025-05-07","2025-05-14","2025-05-21","2025-05-28","2025-06-04","2025-06-11","2025-06-18","2025-06-25","2025-07-02","2025-07-09","2025-07-16","2025-07-23","2025-07-30","2025-08-06","2025-08-13","2025-08-20","2025-08-27"],["2024-09-05","2024-09-12","2024-09-19","2024-09-26","2024-10-03","2024-10-10","2024-10-17","2024-10-24","2024-10-31","2024-11-07","2024-11-14","2024-11-21","2024-11-28","2024-12-05","2024-12-12","2024-12-19","2024-12-26","2025-01-02","2025-01-09","2025-01-16","2025-01-23","2025-01-30","2025-02-06","2025-02-13","2025-02-20","2025-02-27","2025-03-06","2025-03-13","2025-03-20","2025-03-27","2025-04-03","2025-04-10","2025-04-17","2025-04-24","2025-05-01","2025-05-08","2025-05-15","2025-05-22","2025-05-29","2025-06-05","2025-06-12","2025-06-19","2025-06-26","2025-07-03","2025-07-10","2025-07-17","2025-07-24","2025-07-31","2025-08-07","2025-08-14","2025-08-21","2025-08-28"],["2024-09-06","2024-09-13","2024-09-20","2024-09-27","2024-10-04","2024-10-11","2024-10-18","2024-10-25","2024-11-01","2024-11-08","2024-11-15","2024-11-22","2024-11-29","2024-12-06","2024-12-13","2024-12-20","2024-12-27","2025-01-03","2025-01-10","2025-01-17","2025-01-24","2025-01-31","2025-02-07","2025-02-14","2025-02-21","2025-02-28","2025-03-07","2025-03-14","2025-03-21","2025-03-28","2025-04-04","2025-04-11","2025-04-18","2025-04-25","2025-05-02","2025-05-09","2025-05-16","2025-05-23","2025-05-30","2025-06-06","2025-06-13","2025-06-20","2025-06-27","2025-07-04","2025-07-11","2025-07-18","2025-07-25","2025-08-01","2025-08-08","2025-08-15","2025-08-22","2025-08-29"],["2024-09-07","2024-09-14","2024-09-21","2024-09-28","2024-10-05","2024-10-12","2024-10-19","2024-10-26","2024-11-02","2024-11-09","2024-11-16","2024-11-23","2024-11-30","2024-12-07","2024-12-14","2024-12-21","2024-12-28","2025-01-04","2025-01-11","2025-01-18","2025-01-25","2025-02-01","2025-02-08","2025-02-15","2025-02-22","2025-03-01","2025-03-08","2025-03-15","2025-03-22","2025-03-29","2025-04-05","2025-04-12","2025-04-19","2025-04-26","2025-05-03","2025-05-10","2025-05-17","2025-05-24","2025-05-31","2025-06-07","2025-06-14","2025-06-21","2025-06-28","2025-07-05","2025-07-12","2025-07-19","2025-07-26","2025-08-02","2025-08-09","2025-08-16","2025-08-23","2025-08-30"],["2024-09-08","2024-09-15","2024-09-22","2024-09-29","2024-10-06","2024-10-13","2024-10-20","2024-10-27","2024-11-03","2024-11-10","2024-11-17","2024-11-24","2024-12-01","2024-12-08","2024-12-15","2024-12-22","2024-12-29","2025-01-05","2025-01-12","2025-01-19","2025-01-26","2025-02-02","2025-02-09","2025-02-16","2025-02-23","2025-03-02","2025-03-09","2025-03-16","2025-03-23","2025-03-30","2025-04-06","2025-04-13","2025-04-20","2025-04-27","2025-05-04","2025-05-11","2025-05-18","2025-05-25","2025-06-01","2025-06-08","2025-06-15","2025-06-22","2025-06-29","2025-07-06","2025-07-13","2025-07-20","2025-07-27","2025-08-03","2025-08-10","2025-08-17","2025-08-24","2025-08-31"]],"hovertemplate":"Date: %{customdata}\u003cbr\u003eValue: %{z:.2f}\u003cextra\u003e\u003c\u002fextra\u003e","showscale":false,"x":["2024-09-02","2024-09-09","2024-09-16","2024-09-23","2024-09-30","2024-10-07","2024-10-14","2024-10-21","2024-10-28","2024-11-04","2024-11-11","2024-11-18","2024-11-25","2024-12-02","2024-12-09","2024-12-16","2024-12-23","2024-12-30","2025-01-06","2025-01-13","2025-01-20","2025-01-27","2025-02-03","2025-02-10","2025-02-17","2025-02-24","2025-03-03","2025-03-10","2025-03-17","2025-03-24","2025-03-31","2025-04-07","2025-04-14","2025-04-21","2025-04-28","2025-05-05","2025-05-12","2025-05-19","2025-05-26","2025-06-02","2025-06-09","2025-06-16","2025-06-23","2025-06-30","2025-07-07","2025-07-14","2025-07-21","2025-07-28","2025-08-04","2025-08-11","2025-08-18","2025-08-25"],"xgap":2,"y":["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],"ygap":2,"z":[[0.13459901272105057,0.07144037267686924,0.0,0.02567169542484793,0.1943701957602955,0.0,0.10315424053432098,0.2223869321144732,0.0101747131633462,0.04624564471870697,0.1866248629409762,0.1619588952957143,0.10179656128853301,0.28127388190834635,0.24363532332682114,0.38314067714644795,0.3904396470156554,0.5871417623089922,0.4494512420063476,0.7075867892330924,0.5854536843986621,0.6749419514555224,0.7305655930672372,0.897409823215684,0.8918983512872566,0.9209354080279966,0.9308865657264072,0.8059584841797863,1.0,0.898048571887148,1.0,1.0,0.8590184058919965,1.0,1.0,0.7732387178889825,0.8912170907522784,0.8184163384586197,0.822475204602678,0.7642543483018442,0.5431644942315057,0.6355115517973967,0.7015969114652315,0.5460237405196436,0.4879670174082411,0.4675485058035454,0.42809456698479686,0.2911841791176736,0.1481675433317543,0.13923730763227324,0.1766461423778808,0.1699281866099175],[0.0,0.0,0.0017899698622748927,0.0,0.09677158638116767,0.12479477625677105,0.10895777790688227,0.15189044557185855,0.09654580653607348,0.1795492865957899,0.3052268504010917,0.32596436590345157,0.18411123726736778,0.35977527304759266,0.35252652681600993,0.5427417269194631,0.5651562981702217,0.47750647994960754,0.4561350741573436,0.7417137309609516,0.5102953771880667,0.8241126373750014,0.7797236509747064,0.9332037061153636,0.9824394294545304,0.8289995839250157,1.0,0.7913308880046568,0.8189055068633593,1.0,0.8223965509972967,0.8348974442606938,0.9564174304426082,0.8985185636493014,1.0,0.8604991326856607,0.9758735705615857,0.6558932159815902,0.7000147719646015,0.5799408830216487,0.7035151530934022,0.7478886919490498,0.6337798522620632,0.4941685362991634,0.4092062677590119,0.4232057215920778,0.2300237268973226,0.3526820715419722,0.3679596483947415,0.10802723932902636,0.25227992652493664,0.13091171870017465],[0.18654843761315884,0.02424509841700278,0.0,0.03388313524346659,0.0,0.12125378247595983,0.0,0.0,0.13088917701073183,0.16910681233669253,0.10310100475666693,0.20052186435225497,0.3816697335862501,0.22282049255664288,0.28520333869041986,0.40340313228078245,0.3690761124240207,0.6115883706700836,0.47033965930665544,0.6007036424693509,0.7598327462235945,0.5773116058876002,0.6237534811100747,0.8691407726978946,0.7375919944566651,0.941330162011735,0.8014934674635664,0.8458330455003304,0.9611035861419381,0.8463915521310343,1.0,1.0,1.0,1.0,1.0,0.7932695891537325,0.9596482462801176,0.915947343178816,0.6136511921161285,0.5624943289814737,0.5541252690852431,0.5344741327070746,0.5169619710495121,0.46374855539511284,0.47539824510653705,0.24291414204185113,0.2543250806739876,0.31026724130890454,0.16093385741803784,0.17923375751178566,0.28907858857606483,0.09118081773759709],[0.04274285618353736,0.16773213722549252,0.0,0.027348236792497493,0.19678388324323698,0.0,0.0,0.0,0.0,0.0067895255930027765,0.2289109950080088,0.12593408541693593,0.11541624142573209,0.17043612043585676,0.4096860328972915,0.5574474536390003,0.484527060997471,0.3920676804861751,0.5784662869674918,0.6995971109532144,0.6467757589136034,0.8109481639584317,0.7425226445007554,0.7478239359283666,0.9666926185706564,0.9587154359758231,0.7863943022510236,0.7986686327668135,1.0,1.0,1.0,1.0,0.8091532345633923,0.9558433252238909,0.8031303542172052,0.8725859202971921,0.7566835148011993,0.7778067221045616,0.8077718658444186,0.7050984538121973,0.6791435853965506,0.7315047589823398,0.6274606401446008,0.6090447486281656,0.47565459019472395,0.3626444151812243,0.3781788689164846,0.1428027187105927,0.13024918340438868,0.24538136440926647,0.25413551726238914,0.2638681222155129],[0.16631123049192714,0.21393461748259215,0.17443172320155878,0.16030598440664023,0.008372431838735095,0.048590697685584064,0.12304248758475622,0.05962196841028138,0.04021069416966182,0.19139690202159018,0.19091509263961848,0.33755767564372935,0.26222784209855,0.3836164558963834,0.4951442089456719,0.42861473393542787,0.6191816151803766,0.6337521044168415,0.5006396943655522,0.613622934507656,0.5840928534076,0.6852784052867706,0.7425115550483108,0.7805104874379335,0.8068752071639289,0.8268975901194805,0.8083965524738981,0.970997420540351,1.0,0.835199310773221,0.8451380333804511,0.8935781712143693,0.9260453704963016,1.0,0.8279150004605469,1.0,0.8523959398966388,0.7719099661835359,0.881081537171595,0.6749144766088301,0.6107016930483002,0.6206214151930902,0.41410447536673967,0.5191072714001534,0.5213551688304456,0.4247676354556676,0.4396179366988354,0.368866379134083,0.16339728503322348,0.1173613402559649,0.09602005004734745,0.07480784435331583],[0.046590987334549576,0.10123262009753725,0.02093213312475304,0.0,0.07125379358885636,0.11217969099637068,0.0,0.04223494562109133,0.0,0.2407179325890179,0.10427870014018772,0.16707365585204992,0.1793360141618333,0.44441581083681436,0.5015112790992493,0.324885132203605,0.4145937619787646,0.5945489220423629,0.49092001333284074,0.7608613987453299,0.62750715549575,0.8547015477375716,0.8346531778992586,0.9684788887645426,1.0,0.8136483326914014,0.807430828663213,0.9557997633645948,0.9341359236245382,0.8658706292175599,0.7999512579226341,0.8315899109479433,1.0,0.7834447149945696,0.821791956125248,0.8837193194656598,0.7717628566232109,0.800652279919202,0.6248520681660523,0.7382895308902923,0.6921482346155182,0.5893888952931976,0.4496816205443064,0.38499598068827606,0.28076008234368877,0.2359389188931954,0.21120429234963584,0.21097085986745998,0.3105027222666124,0.15148478367041826,0.1346761632737261,0.012262819186755189],[0.009666345383968863,0.11116647068498314,0.09294877334825495,0.0,0.0,0.2011845639304187,0.1746125923167111,0.16006896670795023,0.0,0.28572584519939537,0.2106947405688844,0.24717486234760797,0.28443580982016986,0.46446650959504143,0.331714655444355,0.43317910390302933,0.5322084048261323,0.6040016380656543,0.5272867409409122,0.6326146082611722,0.7481764440823108,0.6032879101358065,0.8983906824318192,0.8272461712741,0.7697692673827646,0.7968738421076039,0.8931913970024197,0.9329148302840636,0.904554090664641,0.8543001086485396,0.8838775248978465,0.8560252873023545,0.8122001360665569,1.0,0.7616937704042586,0.9029733179243924,0.8776848090469377,0.9202037297571337,0.6884370069119261,0.8140845758855468,0.7631365695720691,0.5410474299147227,0.6587768738699801,0.5594767226752763,0.39462779575958423,0.4973245647686208,0.23374565469040598,0.14285601938377673,0.0893905690513131,0.320572013689418,0.16675392505723788,0.039142897242472996]],"type":"heatmap"}],                        {"template":{"data":{"histogram2dcontour":[{"type":"histogram2dcontour","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"choropleth":[{"type":"choropleth","colorbar":{"outlinewidth":0,"ticks":""}}],"histogram2d":[{"type":"histogram2d","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"heatmap":[{"type":"heatmap","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"heatmapgl":[{"type":"heatmapgl","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"contourcarpet":[{"type":"contourcarpet","colorbar":{"outlinewidth":0,"ticks":""}}],"contour":[{"type":"contour","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"surface":[{"type":"surface","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"mesh3d":[{"type":"mesh3d","colorbar":{"outlinewidth":0,"ticks":""}}],"scatter":[{"fillpattern":{"fillmode":"overlay","size":10,"solidity":0.2},"type":"scatter"}],"parcoords":[{"type":"parcoords","line":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterpolargl":[{"type":"scatterpolargl","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"bar":[{"error_x":{"color":"#2a3f5f"},"error_y":{"color":"#2a3f5f"},"marker":{"line":{"color":"#E5ECF6","width":0.5},"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"bar"}],"scattergeo":[{"type":"scattergeo","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterpolar":[{"type":"scatterpolar","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"histogram":[{"marker":{"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"histogram"}],"scattergl":[{"type":"scattergl","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatter3d":[{"type":"scatter3d","line":{"colorbar":{"outlinewidth":0,"ticks":""}},"marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattermapbox":[{"type":"scattermapbox","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterternary":[{"type":"scatterternary","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattercarpet":[{"type":"scattercarpet","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"carpet":[{"aaxis":{"endlinecolor":"#2a3f5f","gridcolor":"white","linecolor":"white","minorgridcolor":"white","startlinecolor":"#2a3f5f"},"baxis":{"endlinecolor":"#2a3f5f","gridcolor":"white","linecolor":"white","minorgridcolor":"white","startlinecolor":"#2a3f5f"},"type":"carpet"}],"table":[{"cells":{"fill":{"color":"#EBF0F8"},"line":{"color":"white"}},"header":{"fill":{"color":"#C8D4E3"},"line":{"color":"white"}},"type":"table"}],"barpolar":[{"marker":{"line":{"color":"#E5ECF6","width":0.5},"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"barpolar"}],"pie":[{"automargin":true,"type":"pie"}]},"layout":{"autotypenumbers":"strict","colorway":["#636efa","#EF553B","#00cc96","#ab63fa","#FFA15A","#19d3f3","#FF6692","#B6E880","#FF97FF","#FECB52"],"font":{"color":"#2a3f5f"},"hovermode":"closest","hoverlabel":{"align":"left"},"paper_bgcolor":"white","plot_bgcolor":"#E5ECF6","polar":{"bgcolor":"#E5ECF6","angularaxis":{"gridcolor":"white","linecolor":"white","ticks":""},"radialaxis":{"gridcolor":"white","linecolor":"white","ticks":""}},"ternary":{"bgcolor":"#E5ECF6","aaxis":{"gridcolor":"white","linecolor":"white","ticks":""},"baxis":{"gridcolor":"white","linecolor":"white","ticks":""},"caxis":{"gridcolor":"white","linecolor":"white","ticks":""}},"coloraxis":{"colorbar":{"outlinewidth":0,"ticks":""}},"colorscale":{"sequential":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"sequentialminus":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"diverging":[[0,"#8e0152"],[0.1,"#c51b7d"],[0.2,"#de77ae"],[0.3,"#f1b6da"],[0.4,"#fde0ef"],[0.5,"#f7f7f7"],[0.6,"#e6f5d0"],[0.7,"#b8e186"],[0.8,"#7fbc41"],[0.9,"#4d9221"],[1,"#276419"]]},"xaxis":{"gridcolor":"white","linecolor":"white","ticks":"","title":{"standoff":15},"zerolinecolor":"white","automargin":true,"zerolinewidth":2},"yaxis":{"gridcolor":"white","linecolor":"white","ticks":"","title":{"standoff":15},"zerolinecolor":"white","automargin":true,"zerolinewidth":2},"scene":{"xaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white","gridwidth":2},"yaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white","gridwidth":2},"zaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white","gridwidth":2}},"shapedefaults":{"line":{"color":"#2a3f5f"}},"annotationdefaults":{"arrowcolor":"#2a3f5f","arrowhead":0,"arrowwidth":1},"geo":{"bgcolor":"white","landcolor":"#E5ECF6","subunitcolor":"white","showland":true,"showlakes":true,"lakecolor":"white"},"title":{"x":0.05},"mapbox":{"style":"light"}}},"margin":{"l":28,"r":12,"t":8,"b":28},"xaxis":{"showgrid":false,"zeroline":false,"showline":false,"ticks":"","showticklabels":false,"fixedrange":true},"yaxis":{"tickfont":{"size":12,"color":"rgba(0,0,0,0.65)"},"showgrid":false,"zeroline":false,"showline":false,"ticks":"","fixedrange":true},"autosize":true,"paper_bgcolor":"rgba(0,0,0,0)","plot_bgcolor":"rgba(0,0,0,0)"},                        {"displayModeBar": false, "responsive": true, "scrollZoom": false}                    )                };                            </script>        </div>
+<div class="d3-train-diagram" style="width:100%;margin:10px 0;"></div>
+<div class="caption">Survolez les blocs pour afficher une explication.</div>
+<style>
+  .d3-train-diagram + .caption { margin-top: 8px; font-size: 14px; color: var(--muted-color); }
+</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 mount = document.currentScript ? document.currentScript.previousElementSibling : null;
+      const container = (mount && mount.querySelector && mount.querySelector('.d3-train-diagram')) || document.querySelector('.d3-train-diagram');
+      if (!container) return;
+      if (container.dataset) { if (container.dataset.mounted === 'true') return; container.dataset.mounted = 'true'; }
+
+      // Diagram spec
+      const numBlocks = 7;
+      const rows = [
+        { key: 'model', label: 'Model', color: '#a78bfa' },
+        { key: 'forward', label: 'Forward', color: '#14b8a6' },
+        { key: 'backward', label: 'Backward', color: '#f59e0b' },
+        { key: 'gradients', label: 'Gradients', color: 'var(--primary)' },
+        { key: 'optimization', label: 'Optimization', color: '#10b981' },
+        { key: 'updated', label: 'Updated', color: '#7c3aed' },
+      ];
+      const hoverText = {
+        model: 'Chaque bloc représente un sous-module du modèle.',
+        forward: 'Propagation avant: calcul des activations couche par couche.',
+        backward: 'Rétropropagation: calcul des gradients via la chaîne.',
+        gradients: 'Accumulateurs de gradients pour chaque couche.',
+        optimization: 'Étape d’optimisation: mise à jour des poids.',
+        updated: 'Paramètres mis à jour, prêts pour l’itération suivante.'
+      };
+
+      // SVG
+      const svg = d3.select(container).append('svg').attr('width', '100%').style('display','block');
+      const gRoot = svg.append('g');
+      const gLegend = gRoot.append('foreignObject').attr('class','legend');
+      const gArrows = gRoot.append('g').attr('class','arrows');
+      const gBlocks = gRoot.append('g').attr('class','blocks');
+      const gLabels = gRoot.append('g').attr('class','row-labels');
+
+      // Tooltip (reuse style from others)
+      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; }
+
+      // Layout
+      let width=800, height=360; const margin = { top: 24, right: 180, bottom: 40, left: 32 };
+      const x = d3.scaleBand().domain(d3.range(numBlocks)).paddingInner(0.2).paddingOuter(0.05);
+      const y = d3.scaleBand().domain(d3.range(rows.length)).paddingInner(0.35);
+
+      function updateScales(){
+        width = container.clientWidth || 800;
+        const rowH = Math.max(54, Math.min(80, Math.round(width / 12)));
+        const innerHeight = rows.length * rowH;
+        height = innerHeight + margin.top + margin.bottom;
+        svg.attr('width', width).attr('height', height);
+        const innerWidth = width - margin.left - margin.right;
+        gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
+
+        x.range([0, innerWidth]);
+        y.range([0, innerHeight]);
+
+        return { innerWidth, innerHeight };
+      }
+
+      function render(){
+        const { innerWidth, innerHeight } = updateScales();
+
+        // Legend right side
+        const legendWidth = 160, legendHeight = rows.length * 20;
+        gLegend.attr('x', innerWidth + 16).attr('y', 0).attr('width', legendWidth).attr('height', legendHeight);
+        const lroot = gLegend.selectAll('div').data([0]).join('xhtml:div');
+        lroot.html(`
+          <div style="display:flex;flex-direction:column;gap:8px;">
+            ${rows.map(r => `<div style=\"display:flex;align-items:center;gap:8px;\"><span style=\"width:14px;height:14px;background:${r.color};border-radius:4px;display:inline-block\"></span><span>${r.label}</span></div>`).join('')}
+          </div>
+        `);
+
+        // Row labels on the right side aligned to centers
+        gLabels.selectAll('*').remove();
+        gLabels.selectAll('text').data(rows).join('text')
+          .attr('x', innerWidth + 16)
+          .attr('y', (_,i)=> y(i) + y.bandwidth()/2)
+          .attr('dy','0.35em')
+          .style('font-size','14px')
+          .style('fill','var(--text-color)')
+          .text(d=>d.label);
+
+        // Blocks per row
+        const blockW = Math.min(84, x.bandwidth());
+        const blockH = Math.min(52, Math.round(y.bandwidth() * 0.8));
+        const blocks = [];
+        rows.forEach((row, ri) => {
+          for (let i=0;i<numBlocks;i++) blocks.push({ row, ri, i });
+        });
+        const sel = gBlocks.selectAll('rect.block').data(blocks, d=>`${d.row.key}-${d.i}`);
+        sel.join(
+          enter => enter.append('rect').attr('class','block')
+            .attr('x', d=>x(d.i))
+            .attr('y', d=>y(d.ri) + (y.bandwidth()-blockH)/2)
+            .attr('rx', 12).attr('ry', 12)
+            .attr('width', blockW)
+            .attr('height', blockH)
+            .attr('fill', d=>d.row.color)
+            .attr('opacity', 0.95)
+            .attr('stroke', 'rgba(0,0,0,0.18)')
+            .attr('filter', 'url(#shadow)')
+            .on('mouseenter', function(ev, d){
+              d3.select(this).attr('opacity', 1.0).attr('stroke-width', 1.2);
+              tipInner.innerHTML = `<div><strong>${d.row.label}</strong></div><div>${hoverText[d.row.key]}</div>`;
+              tip.style.opacity = '1';
+            })
+            .on('mousemove', function(ev){ const [mx,my] = d3.pointer(ev, container); tip.style.transform = `translate(${mx+12}px, ${my+12}px)`; })
+            .on('mouseleave', function(){ tip.style.opacity='0'; tip.style.transform='translate(-9999px,-9999px)'; d3.select(this).attr('opacity', 0.95).attr('stroke-width', 1); })
+        );
+
+        // Arrows forward/backward
+        gArrows.selectAll('*').remove();
+        const arrowY = (ri) => y(ri) + y.bandwidth()/2;
+        const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+        const arrowColor = isDark ? 'rgba(255,255,255,0.55)' : 'rgba(0,0,0,0.55)';
+        const defs = svg.select('defs').empty() ? svg.append('defs') : svg.select('defs');
+        const marker = defs.append('marker').attr('id','arrow').attr('viewBox','0 0 10 10').attr('refX', 10).attr('refY', 5).attr('markerWidth', 6).attr('markerHeight', 6).attr('orient','auto-start-reverse');
+        marker.append('path').attr('d','M 0 0 L 10 5 L 0 10 z').attr('fill', arrowColor);
+        // drop shadow filter
+        const flt = defs.append('filter').attr('id','shadow').attr('x','-20%').attr('y','-20%').attr('width','140%').attr('height','140%');
+        flt.append('feDropShadow').attr('dx','0').attr('dy','1').attr('stdDeviation','1.5').attr('flood-color','rgba(0,0,0,0.18)');
+        // Forward arrow (top orientation)
+        gArrows.append('line').attr('x1', x(0)).attr('y1', arrowY(1)-28).attr('x2', x(numBlocks-1)+blockW).attr('y2', arrowY(1)-28)
+          .attr('stroke', rows[1].color).attr('stroke-width', 4).attr('marker-end','url(#arrow)');
+        // Backward arrow (orange, reversed)
+        gArrows.append('line').attr('x1', x(numBlocks-1)+blockW).attr('y1', arrowY(2)-20).attr('x2', x(0)).attr('y2', arrowY(2)-20)
+          .attr('stroke', rows[2].color).attr('stroke-width', 4).attr('marker-end','url(#arrow)');
+        // Vertical arrows (gradients down, updated up)
+        const midX = x(3) + blockW/2;
+        gArrows.append('line').attr('x1', midX).attr('y1', arrowY(2)+blockH/2+4).attr('x2', midX).attr('y2', arrowY(3)-blockH/2-6)
+          .attr('stroke', rows[3].color).attr('stroke-width', 3).attr('marker-end','url(#arrow)');
+        gArrows.append('line').attr('x1', midX).attr('y1', arrowY(4)+blockH/2+6).attr('x2', midX).attr('y2', arrowY(5)-blockH/2-6)
+          .attr('stroke', rows[5].color).attr('stroke-width', 3).attr('marker-end','url(#arrow)');
+      }
+
+      render();
+      if (window.ResizeObserver) { const ro = new ResizeObserver(()=>render()); ro.observe(container); } else { window.addEventListener('resize', render); }
+    };
+
+    if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true }); } else { ensureD3(bootstrap); }
+  })();
+</script>
+
+

app/src/content/fragments/line.html

@@ -1 +1,84 @@
-<div>                            <div id="9ede8c7f-7b5c-4431-8616-891d85efdf07" class="plotly-graph-div" style="height:100%; width:100%;"></div>            <script type="text/javascript">                                    window.PLOTLYENV=window.PLOTLYENV || {};                                    if (document.getElementById("9ede8c7f-7b5c-4431-8616-891d85efdf07")) {                    Plotly.newPlot(                        "9ede8c7f-7b5c-4431-8616-891d85efdf07",                        [{"hovertemplate":"\u003cb\u003e%{fullData.name}\u003c\u002fb\u003e\u003cbr\u003ex=%{x:.2f}\u003cbr\u003ey=%{y:.3f}\u003cextra\u003e\u003c\u002fextra\u003e","line":{"color":"#64748b","shape":"spline","smoothing":0.6,"width":2},"mode":"lines","name":"Baseline","showlegend":true,"x":[0.0,0.0041841004184100415,0.008368200836820083,0.012552301255230124,0.016736401673640166,0.02092050209205021,0.025104602510460247,0.02928870292887029,0.03347280334728033,0.03765690376569037,0.04184100418410042,0.046025104602510455,0.050209205020920494,0.05439330543933054,0.05857740585774058,0.06276150627615062,0.06694560669456066,0.0711297071129707,0.07531380753138074,0.0794979079497908,0.08368200836820083,0.08786610878661087,0.09205020920502091,0.09623430962343095,0.10041841004184099,0.10460251046025104,0.10878661087866108,0.11297071129707112,0.11715481171548116,0.1213389121338912,0.12552301255230125,0.12970711297071127,0.13389121338912133,0.13807531380753138,0.1422594142259414,0.14644351464435146,0.15062761506276148,0.15481171548117154,0.1589958158995816,0.1631799163179916,0.16736401673640167,0.1715481171548117,0.17573221757322174,0.1799163179916318,0.18410041841004182,0.18828451882845187,0.1924686192468619,0.19665271966527195,0.20083682008368198,0.20502092050209203,0.20920502092050208,0.2133891213389121,0.21757322175732216,0.22175732217573219,0.22594142259414224,0.2301255230125523,0.23430962343096232,0.23849372384937237,0.2426778242677824,0.24686192468619245,0.2510460251046025,0.25523012552301255,0.25941422594142255,0.2635983263598326,0.26778242677824265,0.2719665271966527,0.27615062761506276,0.28033472803347276,0.2845188284518828,0.28870292887029286,0.2928870292887029,0.29707112970711297,0.30125523012552297,0.305439330543933,0.30962343096234307,0.3138075313807531,0.3179916317991632,0.3221757322175732,0.3263598326359832,0.3305439330543933,0.33472803347280333,0.3389121338912134,0.3430962343096234,0.34728033472803344,0.3514644351464435,0.35564853556485354,0.3598326359832636,0.3640167364016736,0.36820083682008364,0.3723849372384937,0.37656903765690375,0.3807531380753138,0.3849372384937238,0.38912133891213385,0.3933054393305439,0.39748953974895396,0.40167364016736395,0.405857740585774,0.41004184100418406,0.4142259414225941,0.41841004184100417,0.42259414225941416,0.4267782426778242,0.43096234309623427,0.4351464435146443,0.4393305439330544,0.44351464435146437,0.4476987447698744,0.4518828451882845,0.45606694560669453,0.4602510460251046,0.4644351464435146,0.46861924686192463,0.4728033472803347,0.47698744769874474,0.4811715481171548,0.4853556485355648,0.48953974895397484,0.4937238493723849,0.49790794979079495,0.502092050209205,0.506276150627615,0.5104602510460251,0.5146443514644351,0.5188284518828451,0.5230125523012552,0.5271966527196652,0.5313807531380753,0.5355648535564853,0.5397489539748953,0.5439330543933054,0.5481171548117154,0.5523012552301255,0.5564853556485355,0.5606694560669455,0.5648535564853556,0.5690376569037656,0.5732217573221757,0.5774058577405857,0.5815899581589957,0.5857740585774058,0.5899581589958158,0.5941422594142259,0.5983263598326359,0.6025104602510459,0.606694560669456,0.610878661087866,0.6150627615062761,0.6192468619246861,0.6234309623430961,0.6276150627615062,0.6317991631799162,0.6359832635983264,0.6401673640167364,0.6443514644351463,0.6485355648535565,0.6527196652719665,0.6569037656903766,0.6610878661087866,0.6652719665271966,0.6694560669456067,0.6736401673640167,0.6778242677824268,0.6820083682008368,0.6861924686192468,0.6903765690376569,0.6945606694560669,0.698744769874477,0.702928870292887,0.707112970711297,0.7112970711297071,0.7154811715481171,0.7196652719665272,0.7238493723849372,0.7280334728033472,0.7322175732217573,0.7364016736401673,0.7405857740585774,0.7447698744769874,0.7489539748953974,0.7531380753138075,0.7573221757322175,0.7615062761506276,0.7656903765690376,0.7698744769874476,0.7740585774058577,0.7782426778242677,0.7824267782426778,0.7866108786610878,0.7907949790794978,0.7949790794979079,0.7991631799163179,0.8033472803347279,0.807531380753138,0.811715481171548,0.8158995815899581,0.8200836820083681,0.8242677824267781,0.8284518828451882,0.8326359832635982,0.8368200836820083,0.8410041841004183,0.8451882845188283,0.8493723849372384,0.8535564853556484,0.8577405857740585,0.8619246861924685,0.8661087866108785,0.8702928870292886,0.8744769874476986,0.8786610878661087,0.8828451882845187,0.8870292887029287,0.8912133891213389,0.8953974895397488,0.899581589958159,0.903765690376569,0.907949790794979,0.9121338912133891,0.9163179916317991,0.9205020920502092,0.9246861924686192,0.9288702928870292,0.9330543933054393,0.9372384937238493,0.9414225941422594,0.9456066945606694,0.9497907949790794,0.9539748953974895,0.9581589958158995,0.9623430962343096,0.9665271966527196,0.9707112970711296,0.9748953974895397,0.9790794979079497,0.9832635983263598,0.9874476987447698,0.9916317991631798,0.9958158995815899,1.0],"y":[0.2,0.20251046025104605,0.20502092050209206,0.2075313807531381,0.2100418410041841,0.21255230125523014,0.21506276150627615,0.2175732217573222,0.2200836820083682,0.22259414225941423,0.22510460251046027,0.22761506276150628,0.2301255230125523,0.23263598326359833,0.23514644351464437,0.23765690376569037,0.2401673640167364,0.24267782426778242,0.24518828451882846,0.2476987447698745,0.25020920502092053,0.25271966527196654,0.25523012552301255,0.25774058577405856,0.2602510460251046,0.26276150627615064,0.26527196652719665,0.2677824267782427,0.2702928870292887,0.27280334728033473,0.27531380753138074,0.27782426778242675,0.2803347280334728,0.2828451882845188,0.28535564853556483,0.2878661087866109,0.2903765690376569,0.2928870292887029,0.295397489539749,0.297907949790795,0.300418410041841,0.302928870292887,0.3054393305439331,0.3079497907949791,0.3104602510460251,0.3129707112970711,0.31548117154811717,0.3179916317991632,0.3205020920502092,0.32301255230125525,0.32552301255230126,0.32803347280334727,0.33054393305439334,0.3330543933054393,0.33556485355648535,0.3380753138075314,0.3405857740585774,0.34309623430962344,0.34560669456066945,0.34811715481171546,0.3506276150627615,0.35313807531380753,0.35564853556485354,0.3581589958158996,0.36066945606694556,0.3631799163179916,0.3656903765690377,0.36820083682008364,0.3707112970711297,0.3732217573221757,0.3757322175732217,0.3782426778242678,0.38075313807531375,0.3832635983263598,0.3857740585774059,0.3882845188284519,0.3907949790794979,0.3933054393305439,0.3958158995815899,0.398326359832636,0.40083682008368204,0.403347280334728,0.40585774058577406,0.40836820083682007,0.4108786610878661,0.41338912133891215,0.41589958158995816,0.41841004184100417,0.42092050209205023,0.4234309623430962,0.42594142259414225,0.4284518828451883,0.43096234309623427,0.43347280334728033,0.43598326359832634,0.43849372384937235,0.44100418410041836,0.44351464435146437,0.44602510460251044,0.4485355648535565,0.4510460251046025,0.4535564853556485,0.45606694560669453,0.45857740585774054,0.4610878661087866,0.4635983263598326,0.4661087866108786,0.46861924686192463,0.4711297071129707,0.4736401673640167,0.47615062761506277,0.4786610878661087,0.4811715481171548,0.4836820083682008,0.48619246861924686,0.4887029288702929,0.4912133891213389,0.4937238493723849,0.49623430962343096,0.49874476987447697,0.501255230125523,0.503765690376569,0.506276150627615,0.5087866108786611,0.5112970711297071,0.5138075313807531,0.5163179916317991,0.5188284518828452,0.5213389121338912,0.5238493723849371,0.5263598326359833,0.5288702928870292,0.5313807531380753,0.5338912133891214,0.5364016736401673,0.5389121338912134,0.5414225941422594,0.5439330543933054,0.5464435146443514,0.5489539748953974,0.5514644351464435,0.5539748953974895,0.5564853556485356,0.5589958158995816,0.5615062761506275,0.5640167364016736,0.5665271966527197,0.5690376569037656,0.5715481171548117,0.5740585774058578,0.5765690376569037,0.5790794979079498,0.5815899581589958,0.5841004184100418,0.5866108786610877,0.5891213389121339,0.5916317991631799,0.5941422594142259,0.596652719665272,0.599163179916318,0.601673640167364,0.60418410041841,0.606694560669456,0.609205020920502,0.6117154811715481,0.6142259414225941,0.6167364016736401,0.6192468619246863,0.6217573221757322,0.6242677824267782,0.6267782426778242,0.6292887029288703,0.6317991631799162,0.6343096234309623,0.6368200836820084,0.6393305439330543,0.6418410041841004,0.6443514644351465,0.6468619246861924,0.6493723849372384,0.6518828451882845,0.6543933054393305,0.6569037656903766,0.6594142259414226,0.6619246861924686,0.6644351464435145,0.6669456066945606,0.6694560669456067,0.6719665271966526,0.6744769874476987,0.6769874476987447,0.6794979079497907,0.6820083682008367,0.6845188284518828,0.6870292887029288,0.6895397489539749,0.6920502092050209,0.6945606694560669,0.6970711297071129,0.699581589958159,0.702092050209205,0.7046025104602509,0.7071129707112971,0.709623430962343,0.712133891213389,0.7146443514644352,0.7171548117154811,0.7196652719665271,0.7221757322175733,0.7246861924686192,0.7271966527196652,0.7297071129707113,0.7322175732217573,0.7347280334728032,0.7372384937238492,0.7397489539748954,0.7422594142259413,0.7447698744769873,0.7472803347280335,0.7497907949790794,0.7523012552301256,0.7548117154811715,0.7573221757322175,0.7598326359832634,0.7623430962343096,0.7648535564853556,0.7673640167364015,0.7698744769874477,0.7723849372384937,0.7748953974895396,0.7774058577405858,0.7799163179916317,0.7824267782426777,0.7849372384937239,0.7874476987447698,0.7899581589958158,0.792468619246862,0.7949790794979079,0.7974895397489539,0.8],"type":"scatter"},{"hovertemplate":"\u003cb\u003e%{fullData.name}\u003c\u002fb\u003e\u003cbr\u003ex=%{x:.2f}\u003cbr\u003ey=%{y:.3f}\u003cextra\u003e\u003c\u002fextra\u003e","line":{"color":"#2563eb","shape":"spline","smoothing":0.6,"width":2},"mode":"lines","name":"Improved","showlegend":true,"x":[0.0,0.0041841004184100415,0.008368200836820083,0.012552301255230124,0.016736401673640166,0.02092050209205021,0.025104602510460247,0.02928870292887029,0.03347280334728033,0.03765690376569037,0.04184100418410042,0.046025104602510455,0.050209205020920494,0.05439330543933054,0.05857740585774058,0.06276150627615062,0.06694560669456066,0.0711297071129707,0.07531380753138074,0.0794979079497908,0.08368200836820083,0.08786610878661087,0.09205020920502091,0.09623430962343095,0.10041841004184099,0.10460251046025104,0.10878661087866108,0.11297071129707112,0.11715481171548116,0.1213389121338912,0.12552301255230125,0.12970711297071127,0.13389121338912133,0.13807531380753138,0.1422594142259414,0.14644351464435146,0.15062761506276148,0.15481171548117154,0.1589958158995816,0.1631799163179916,0.16736401673640167,0.1715481171548117,0.17573221757322174,0.1799163179916318,0.18410041841004182,0.18828451882845187,0.1924686192468619,0.19665271966527195,0.20083682008368198,0.20502092050209203,0.20920502092050208,0.2133891213389121,0.21757322175732216,0.22175732217573219,0.22594142259414224,0.2301255230125523,0.23430962343096232,0.23849372384937237,0.2426778242677824,0.24686192468619245,0.2510460251046025,0.25523012552301255,0.25941422594142255,0.2635983263598326,0.26778242677824265,0.2719665271966527,0.27615062761506276,0.28033472803347276,0.2845188284518828,0.28870292887029286,0.2928870292887029,0.29707112970711297,0.30125523012552297,0.305439330543933,0.30962343096234307,0.3138075313807531,0.3179916317991632,0.3221757322175732,0.3263598326359832,0.3305439330543933,0.33472803347280333,0.3389121338912134,0.3430962343096234,0.34728033472803344,0.3514644351464435,0.35564853556485354,0.3598326359832636,0.3640167364016736,0.36820083682008364,0.3723849372384937,0.37656903765690375,0.3807531380753138,0.3849372384937238,0.38912133891213385,0.3933054393305439,0.39748953974895396,0.40167364016736395,0.405857740585774,0.41004184100418406,0.4142259414225941,0.41841004184100417,0.42259414225941416,0.4267782426778242,0.43096234309623427,0.4351464435146443,0.4393305439330544,0.44351464435146437,0.4476987447698744,0.4518828451882845,0.45606694560669453,0.4602510460251046,0.4644351464435146,0.46861924686192463,0.4728033472803347,0.47698744769874474,0.4811715481171548,0.4853556485355648,0.48953974895397484,0.4937238493723849,0.49790794979079495,0.502092050209205,0.506276150627615,0.5104602510460251,0.5146443514644351,0.5188284518828451,0.5230125523012552,0.5271966527196652,0.5313807531380753,0.5355648535564853,0.5397489539748953,0.5439330543933054,0.5481171548117154,0.5523012552301255,0.5564853556485355,0.5606694560669455,0.5648535564853556,0.5690376569037656,0.5732217573221757,0.5774058577405857,0.5815899581589957,0.5857740585774058,0.5899581589958158,0.5941422594142259,0.5983263598326359,0.6025104602510459,0.606694560669456,0.610878661087866,0.6150627615062761,0.6192468619246861,0.6234309623430961,0.6276150627615062,0.6317991631799162,0.6359832635983264,0.6401673640167364,0.6443514644351463,0.6485355648535565,0.6527196652719665,0.6569037656903766,0.6610878661087866,0.6652719665271966,0.6694560669456067,0.6736401673640167,0.6778242677824268,0.6820083682008368,0.6861924686192468,0.6903765690376569,0.6945606694560669,0.698744769874477,0.702928870292887,0.707112970711297,0.7112970711297071,0.7154811715481171,0.7196652719665272,0.7238493723849372,0.7280334728033472,0.7322175732217573,0.7364016736401673,0.7405857740585774,0.7447698744769874,0.7489539748953974,0.7531380753138075,0.7573221757322175,0.7615062761506276,0.7656903765690376,0.7698744769874476,0.7740585774058577,0.7782426778242677,0.7824267782426778,0.7866108786610878,0.7907949790794978,0.7949790794979079,0.7991631799163179,0.8033472803347279,0.807531380753138,0.811715481171548,0.8158995815899581,0.8200836820083681,0.8242677824267781,0.8284518828451882,0.8326359832635982,0.8368200836820083,0.8410041841004183,0.8451882845188283,0.8493723849372384,0.8535564853556484,0.8577405857740585,0.8619246861924685,0.8661087866108785,0.8702928870292886,0.8744769874476986,0.8786610878661087,0.8828451882845187,0.8870292887029287,0.8912133891213389,0.8953974895397488,0.899581589958159,0.903765690376569,0.907949790794979,0.9121338912133891,0.9163179916317991,0.9205020920502092,0.9246861924686192,0.9288702928870292,0.9330543933054393,0.9372384937238493,0.9414225941422594,0.9456066945606694,0.9497907949790794,0.9539748953974895,0.9581589958158995,0.9623430962343096,0.9665271966527196,0.9707112970711296,0.9748953974895397,0.9790794979079497,0.9832635983263598,0.9874476987447698,0.9916317991631798,0.9958158995815899,1.0],"y":[0.15,0.15292887029288701,0.15585774058577406,0.15878661087866108,0.1617154811715481,0.16464435146443515,0.16757322175732217,0.1705020920502092,0.17343096234309624,0.17635983263598326,0.17928870292887028,0.1822175732217573,0.18514644351464432,0.18807531380753137,0.1910041841004184,0.19393305439330544,0.19686192468619246,0.19979079497907948,0.2027196652719665,0.20564853556485355,0.20857740585774057,0.21150627615062761,0.21443514644351463,0.21736401673640166,0.22029288702928868,0.22322175732217572,0.22615062761506274,0.2290794979079498,0.2320083682008368,0.23493723849372383,0.23786610878661085,0.24079497907949787,0.24372384937238492,0.24665271966527197,0.249581589958159,0.252510460251046,0.25543933054393303,0.25836820083682005,0.2612970711297071,0.26422594142259415,0.26715481171548117,0.2700836820083682,0.2730125523012552,0.2759414225941422,0.27887029288702925,0.28179916317991627,0.2847280334728033,0.28765690376569036,0.29058577405857733,0.2935146443514644,0.2964435146443515,0.2993723849372385,0.3023012552301255,0.30523012552301254,0.30815899581589956,0.3110878661087866,0.3140167364016736,0.3169456066945606,0.31987447698744764,0.32280334728033466,0.32573221757322174,0.32866108786610876,0.3315899581589958,0.3345188284518828,0.3374476987447699,0.3403765690376569,0.3433054393305439,0.34623430962343094,0.34916317991631796,0.352092050209205,0.355020920502092,0.3579497907949791,0.36087866108786604,0.36380753138075306,0.36673640167364013,0.36966527196652715,0.37259414225941423,0.3755230125523012,0.37845188284518827,0.3813807531380753,0.3843096234309623,0.38723849372384933,0.39016736401673635,0.39309623430962337,0.3960251046025104,0.39895397489539747,0.40188284518828454,0.40481171548117145,0.4077405857740586,0.4106694560669456,0.4135983263598326,0.41652719665271964,0.41945606694560666,0.4223849372384937,0.4253138075313807,0.4282426778242677,0.43117154811715475,0.43410041841004177,0.4370292887029288,0.4399581589958158,0.44288702928870294,0.44581589958158985,0.448744769874477,0.451673640167364,0.454602510460251,0.45753138075313804,0.46046025104602506,0.4633891213389121,0.4663179916317991,0.4692468619246861,0.47217573221757314,0.47510460251046016,0.4780334728033472,0.4809623430962342,0.48389121338912133,0.48682008368200835,0.4897489539748954,0.4926778242677824,0.4956066945606694,0.49853556485355643,0.5014644351464435,0.5043933054393305,0.5073221757322175,0.5102510460251045,0.5131799163179915,0.5161087866108787,0.5190376569037656,0.5219665271966527,0.5248953974895397,0.5278242677824266,0.5307531380753138,0.5336820083682008,0.5366108786610878,0.5395397489539748,0.5424686192468618,0.5453974895397489,0.5483263598326359,0.551255230125523,0.5541841004184099,0.557112970711297,0.5600418410041841,0.5629707112970711,0.5658995815899581,0.5688284518828451,0.5717573221757322,0.5746861924686192,0.5776150627615062,0.5805439330543932,0.5834728033472802,0.5864016736401673,0.5893305439330543,0.5922594142259413,0.5951882845188284,0.5981171548117155,0.6010460251046024,0.6039748953974895,0.6069037656903765,0.6098326359832635,0.6127615062761506,0.6156903765690376,0.6186192468619246,0.6215481171548116,0.6244769874476988,0.6274058577405857,0.6303347280334727,0.6332635983263598,0.6361924686192467,0.6391213389121339,0.6420502092050209,0.6449790794979079,0.6479079497907949,0.6508368200836819,0.6537656903765691,0.656694560669456,0.659623430962343,0.6625523012552301,0.6654811715481171,0.6684100418410042,0.6713389121338912,0.6742677824267782,0.6771966527196652,0.6801255230125522,0.6830543933054393,0.6859832635983263,0.6889121338912133,0.6918410041841003,0.6947698744769873,0.6976987447698745,0.7006276150627615,0.7035564853556484,0.7064853556485355,0.7094142259414226,0.7123430962343095,0.7152719665271966,0.7182008368200836,0.7211297071129706,0.7240585774058577,0.7269874476987447,0.7299163179916317,0.7328451882845187,0.7357740585774059,0.7387029288702928,0.7416317991631798,0.7445606694560669,0.7474895397489539,0.750418410041841,0.753347280334728,0.756276150627615,0.759205020920502,0.762133891213389,0.7650627615062761,0.7679916317991631,0.7709205020920501,0.7738493723849372,0.7767782426778241,0.7797071129707113,0.7826359832635983,0.7855648535564852,0.7884937238493723,0.7914225941422594,0.7943514644351464,0.7972803347280334,0.8002092050209204,0.8031380753138074,0.8060669456066945,0.8089958158995816,0.8119246861924685,0.8148535564853555,0.8177824267782426,0.8207112970711297,0.8236401673640167,0.8265690376569037,0.8294979079497907,0.8324267782426777,0.8353556485355648,0.8382845188284518,0.8412133891213388,0.8441422594142258,0.847071129707113,0.85],"type":"scatter"},{"hovertemplate":"\u003cb\u003e%{fullData.name}\u003c\u002fb\u003e\u003cbr\u003ex=%{x:.2f}\u003cbr\u003ey=%{y:.3f}\u003cextra\u003e\u003c\u002fextra\u003e","line":{"color":"#4b5563","dash":"dash","width":2},"mode":"lines","name":"Target","showlegend":true,"x":[0.0,0.0041841004184100415,0.008368200836820083,0.012552301255230124,0.016736401673640166,0.02092050209205021,0.025104602510460247,0.02928870292887029,0.03347280334728033,0.03765690376569037,0.04184100418410042,0.046025104602510455,0.050209205020920494,0.05439330543933054,0.05857740585774058,0.06276150627615062,0.06694560669456066,0.0711297071129707,0.07531380753138074,0.0794979079497908,0.08368200836820083,0.08786610878661087,0.09205020920502091,0.09623430962343095,0.10041841004184099,0.10460251046025104,0.10878661087866108,0.11297071129707112,0.11715481171548116,0.1213389121338912,0.12552301255230125,0.12970711297071127,0.13389121338912133,0.13807531380753138,0.1422594142259414,0.14644351464435146,0.15062761506276148,0.15481171548117154,0.1589958158995816,0.1631799163179916,0.16736401673640167,0.1715481171548117,0.17573221757322174,0.1799163179916318,0.18410041841004182,0.18828451882845187,0.1924686192468619,0.19665271966527195,0.20083682008368198,0.20502092050209203,0.20920502092050208,0.2133891213389121,0.21757322175732216,0.22175732217573219,0.22594142259414224,0.2301255230125523,0.23430962343096232,0.23849372384937237,0.2426778242677824,0.24686192468619245,0.2510460251046025,0.25523012552301255,0.25941422594142255,0.2635983263598326,0.26778242677824265,0.2719665271966527,0.27615062761506276,0.28033472803347276,0.2845188284518828,0.28870292887029286,0.2928870292887029,0.29707112970711297,0.30125523012552297,0.305439330543933,0.30962343096234307,0.3138075313807531,0.3179916317991632,0.3221757322175732,0.3263598326359832,0.3305439330543933,0.33472803347280333,0.3389121338912134,0.3430962343096234,0.34728033472803344,0.3514644351464435,0.35564853556485354,0.3598326359832636,0.3640167364016736,0.36820083682008364,0.3723849372384937,0.37656903765690375,0.3807531380753138,0.3849372384937238,0.38912133891213385,0.3933054393305439,0.39748953974895396,0.40167364016736395,0.405857740585774,0.41004184100418406,0.4142259414225941,0.41841004184100417,0.42259414225941416,0.4267782426778242,0.43096234309623427,0.4351464435146443,0.4393305439330544,0.44351464435146437,0.4476987447698744,0.4518828451882845,0.45606694560669453,0.4602510460251046,0.4644351464435146,0.46861924686192463,0.4728033472803347,0.47698744769874474,0.4811715481171548,0.4853556485355648,0.48953974895397484,0.4937238493723849,0.49790794979079495,0.502092050209205,0.506276150627615,0.5104602510460251,0.5146443514644351,0.5188284518828451,0.5230125523012552,0.5271966527196652,0.5313807531380753,0.5355648535564853,0.5397489539748953,0.5439330543933054,0.5481171548117154,0.5523012552301255,0.5564853556485355,0.5606694560669455,0.5648535564853556,0.5690376569037656,0.5732217573221757,0.5774058577405857,0.5815899581589957,0.5857740585774058,0.5899581589958158,0.5941422594142259,0.5983263598326359,0.6025104602510459,0.606694560669456,0.610878661087866,0.6150627615062761,0.6192468619246861,0.6234309623430961,0.6276150627615062,0.6317991631799162,0.6359832635983264,0.6401673640167364,0.6443514644351463,0.6485355648535565,0.6527196652719665,0.6569037656903766,0.6610878661087866,0.6652719665271966,0.6694560669456067,0.6736401673640167,0.6778242677824268,0.6820083682008368,0.6861924686192468,0.6903765690376569,0.6945606694560669,0.698744769874477,0.702928870292887,0.707112970711297,0.7112970711297071,0.7154811715481171,0.7196652719665272,0.7238493723849372,0.7280334728033472,0.7322175732217573,0.7364016736401673,0.7405857740585774,0.7447698744769874,0.7489539748953974,0.7531380753138075,0.7573221757322175,0.7615062761506276,0.7656903765690376,0.7698744769874476,0.7740585774058577,0.7782426778242677,0.7824267782426778,0.7866108786610878,0.7907949790794978,0.7949790794979079,0.7991631799163179,0.8033472803347279,0.807531380753138,0.811715481171548,0.8158995815899581,0.8200836820083681,0.8242677824267781,0.8284518828451882,0.8326359832635982,0.8368200836820083,0.8410041841004183,0.8451882845188283,0.8493723849372384,0.8535564853556484,0.8577405857740585,0.8619246861924685,0.8661087866108785,0.8702928870292886,0.8744769874476986,0.8786610878661087,0.8828451882845187,0.8870292887029287,0.8912133891213389,0.8953974895397488,0.899581589958159,0.903765690376569,0.907949790794979,0.9121338912133891,0.9163179916317991,0.9205020920502092,0.9246861924686192,0.9288702928870292,0.9330543933054393,0.9372384937238493,0.9414225941422594,0.9456066945606694,0.9497907949790794,0.9539748953974895,0.9581589958158995,0.9623430962343096,0.9665271966527196,0.9707112970711296,0.9748953974895397,0.9790794979079497,0.9832635983263598,0.9874476987447698,0.9916317991631798,0.9958158995815899,1.0],"y":[0.1,0.10334728033472804,0.10669456066945607,0.1100418410041841,0.11338912133891214,0.11673640167364017,0.1200836820083682,0.12343096234309624,0.12677824267782428,0.1301255230125523,0.13347280334728034,0.13682008368200838,0.1401673640167364,0.14351464435146444,0.14686192468619247,0.1502092050209205,0.15355648535564853,0.15690376569037656,0.1602510460251046,0.16359832635983262,0.16694560669456066,0.1702928870292887,0.17364016736401672,0.17698744769874478,0.1803347280334728,0.18368200836820084,0.18702928870292887,0.1903765690376569,0.19372384937238493,0.19707112970711296,0.20041841004184102,0.20376569037656903,0.20711297071129708,0.21046025104602512,0.21380753138075315,0.21715481171548118,0.2205020920502092,0.22384937238493724,0.22719665271966527,0.2305439330543933,0.23389121338912133,0.23723849372384936,0.2405857740585774,0.24393305439330545,0.24728033472803346,0.25062761506276154,0.2539748953974895,0.2573221757322176,0.2606694560669456,0.26401673640167367,0.26736401673640164,0.27071129707112973,0.2740585774058577,0.2774058577405858,0.28075313807531377,0.28410041841004186,0.28744769874476983,0.2907949790794979,0.2941422594142259,0.297489539748954,0.300836820083682,0.30418410041841004,0.307531380753138,0.3108786610878661,0.31422594142259413,0.31757322175732217,0.32092050209205025,0.32426778242677823,0.32761506276150626,0.3309623430962343,0.3343096234309624,0.33765690376569035,0.3410041841004184,0.3443514644351464,0.3476987447698745,0.3510460251046025,0.35439330543933056,0.35774058577405854,0.3610878661087866,0.3644351464435146,0.3677824267782427,0.3711297071129708,0.37447698744769875,0.3778242677824267,0.3811715481171548,0.3845188284518829,0.3878661087866109,0.39121338912133885,0.39456066945606694,0.397907949790795,0.401255230125523,0.4046025104602511,0.40794979079497906,0.41129707112970715,0.4146443514644351,0.4179916317991632,0.4213389121338912,0.4246861924686193,0.42803347280334725,0.43138075313807533,0.4347280334728033,0.4380753138075314,0.4414225941422594,0.44476987447698746,0.44811715481171543,0.4514644351464435,0.4548117154811715,0.4581589958158996,0.46150627615062756,0.46485355648535565,0.46820083682008373,0.4715481171548117,0.4748953974895397,0.47824267782426777,0.48158995815899586,0.48493723849372383,0.4882845188284518,0.4916317991631799,0.494979079497908,0.49832635983263596,0.501673640167364,0.505020920502092,0.5083682008368201,0.5117154811715481,0.5150627615062761,0.5184100418410041,0.5217573221757322,0.5251046025104603,0.5284518828451883,0.5317991631799163,0.5351464435146444,0.5384937238493723,0.5418410041841004,0.5451882845188284,0.5485355648535565,0.5518828451882846,0.5552301255230125,0.5585774058577406,0.5619246861924686,0.5652719665271966,0.5686192468619247,0.5719665271966526,0.5753138075313807,0.5786610878661088,0.5820083682008368,0.5853556485355649,0.5887029288702929,0.5920502092050209,0.5953974895397489,0.5987447698744769,0.602092050209205,0.605439330543933,0.608786610878661,0.6121338912133891,0.6154811715481171,0.6188284518828452,0.6221757322175732,0.6255230125523012,0.6288702928870292,0.6322175732217572,0.6355648535564853,0.6389121338912134,0.6422594142259415,0.6456066945606694,0.6489539748953974,0.6523012552301255,0.6556485355648535,0.6589958158995816,0.6623430962343095,0.6656903765690376,0.6690376569037657,0.6723849372384937,0.6757322175732218,0.6790794979079497,0.6824267782426777,0.6857740585774058,0.6891213389121338,0.6924686192468619,0.69581589958159,0.6991631799163179,0.702510460251046,0.705857740585774,0.7092050209205021,0.7125523012552301,0.7158995815899581,0.7192468619246862,0.7225941422594142,0.7259414225941423,0.7292887029288703,0.7326359832635982,0.7359832635983263,0.7393305439330543,0.7426778242677824,0.7460251046025105,0.7493723849372385,0.7527196652719665,0.7560669456066945,0.7594142259414225,0.7627615062761506,0.7661087866108786,0.7694560669456066,0.7728033472803347,0.7761506276150627,0.7794979079497908,0.7828451882845188,0.7861924686192469,0.7895397489539748,0.7928870292887028,0.7962343096234309,0.799581589958159,0.8029288702928871,0.806276150627615,0.809623430962343,0.8129707112970711,0.8163179916317991,0.8196652719665272,0.8230125523012551,0.8263598326359832,0.8297071129707113,0.8330543933054393,0.8364016736401674,0.8397489539748954,0.8430962343096233,0.8464435146443514,0.8497907949790794,0.8531380753138075,0.8564853556485356,0.8598326359832635,0.8631799163179916,0.8665271966527196,0.8698744769874477,0.8732217573221757,0.8765690376569036,0.8799163179916317,0.8832635983263598,0.8866108786610879,0.8899581589958159,0.8933054393305438,0.8966527196652719,0.9],"type":"scatter"}],                        {"template":{"data":{"histogram2dcontour":[{"type":"histogram2dcontour","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"choropleth":[{"type":"choropleth","colorbar":{"outlinewidth":0,"ticks":""}}],"histogram2d":[{"type":"histogram2d","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"heatmap":[{"type":"heatmap","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"heatmapgl":[{"type":"heatmapgl","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"contourcarpet":[{"type":"contourcarpet","colorbar":{"outlinewidth":0,"ticks":""}}],"contour":[{"type":"contour","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"surface":[{"type":"surface","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"mesh3d":[{"type":"mesh3d","colorbar":{"outlinewidth":0,"ticks":""}}],"scatter":[{"fillpattern":{"fillmode":"overlay","size":10,"solidity":0.2},"type":"scatter"}],"parcoords":[{"type":"parcoords","line":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterpolargl":[{"type":"scatterpolargl","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"bar":[{"error_x":{"color":"#2a3f5f"},"error_y":{"color":"#2a3f5f"},"marker":{"line":{"color":"#E5ECF6","width":0.5},"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"bar"}],"scattergeo":[{"type":"scattergeo","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterpolar":[{"type":"scatterpolar","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"histogram":[{"marker":{"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"histogram"}],"scattergl":[{"type":"scattergl","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatter3d":[{"type":"scatter3d","line":{"colorbar":{"outlinewidth":0,"ticks":""}},"marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattermapbox":[{"type":"scattermapbox","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterternary":[{"type":"scatterternary","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattercarpet":[{"type":"scattercarpet","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"carpet":[{"aaxis":{"endlinecolor":"#2a3f5f","gridcolor":"white","linecolor":"white","minorgridcolor":"white","startlinecolor":"#2a3f5f"},"baxis":{"endlinecolor":"#2a3f5f","gridcolor":"white","linecolor":"white","minorgridcolor":"white","startlinecolor":"#2a3f5f"},"type":"carpet"}],"table":[{"cells":{"fill":{"color":"#EBF0F8"},"line":{"color":"white"}},"header":{"fill":{"color":"#C8D4E3"},"line":{"color":"white"}},"type":"table"}],"barpolar":[{"marker":{"line":{"color":"#E5ECF6","width":0.5},"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"barpolar"}],"pie":[{"automargin":true,"type":"pie"}]},"layout":{"autotypenumbers":"strict","colorway":["#636efa","#EF553B","#00cc96","#ab63fa","#FFA15A","#19d3f3","#FF6692","#B6E880","#FF97FF","#FECB52"],"font":{"color":"#2a3f5f"},"hovermode":"closest","hoverlabel":{"align":"left"},"paper_bgcolor":"white","plot_bgcolor":"#E5ECF6","polar":{"bgcolor":"#E5ECF6","angularaxis":{"gridcolor":"white","linecolor":"white","ticks":""},"radialaxis":{"gridcolor":"white","linecolor":"white","ticks":""}},"ternary":{"bgcolor":"#E5ECF6","aaxis":{"gridcolor":"white","linecolor":"white","ticks":""},"baxis":{"gridcolor":"white","linecolor":"white","ticks":""},"caxis":{"gridcolor":"white","linecolor":"white","ticks":""}},"coloraxis":{"colorbar":{"outlinewidth":0,"ticks":""}},"colorscale":{"sequential":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"sequentialminus":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"diverging":[[0,"#8e0152"],[0.1,"#c51b7d"],[0.2,"#de77ae"],[0.3,"#f1b6da"],[0.4,"#fde0ef"],[0.5,"#f7f7f7"],[0.6,"#e6f5d0"],[0.7,"#b8e186"],[0.8,"#7fbc41"],[0.9,"#4d9221"],[1,"#276419"]]},"xaxis":{"gridcolor":"white","linecolor":"white","ticks":"","title":{"standoff":15},"zerolinecolor":"white","automargin":true,"zerolinewidth":2},"yaxis":{"gridcolor":"white","linecolor":"white","ticks":"","title":{"standoff":15},"zerolinecolor":"white","automargin":true,"zerolinewidth":2},"scene":{"xaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white","gridwidth":2},"yaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white","gridwidth":2},"zaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white","gridwidth":2}},"shapedefaults":{"line":{"color":"#2a3f5f"}},"annotationdefaults":{"arrowcolor":"#2a3f5f","arrowhead":0,"arrowwidth":1},"geo":{"bgcolor":"white","landcolor":"#E5ECF6","subunitcolor":"white","showland":true,"showlakes":true,"lakecolor":"white"},"title":{"x":0.05},"mapbox":{"style":"light"}}},"margin":{"l":28,"r":12,"t":8,"b":28},"hoverlabel":{"font":{"color":"#111827","size":12},"bgcolor":"white","bordercolor":"rgba(0,0,0,0.15)","align":"left","namelength":-1},"xaxis":{"tickfont":{"size":12,"color":"rgba(0,0,0,0.55)"},"showgrid":false,"zeroline":false,"showline":true,"linecolor":"rgba(0,0,0,0.25)","linewidth":1,"ticks":"outside","ticklen":6,"tickcolor":"rgba(0,0,0,0.25)","title":{},"automargin":true,"fixedrange":true},"yaxis":{"tickfont":{"size":12,"color":"rgba(0,0,0,0.55)"},"showgrid":false,"zeroline":false,"showline":true,"linecolor":"rgba(0,0,0,0.25)","linewidth":1,"ticks":"outside","ticklen":6,"tickcolor":"rgba(0,0,0,0.25)","title":{},"tickformat":".2f","rangemode":"tozero","automargin":true,"fixedrange":true},"autosize":true,"paper_bgcolor":"rgba(0,0,0,0)","plot_bgcolor":"rgba(0,0,0,0)","hovermode":"x unified"},                        {"displayModeBar": false, "responsive": true, "scrollZoom": false}                    )                };                            </script>        </div>
+
+<div id="line-ex-container-7f91adbe">
+  <div>                            <div id="92f51efc-b046-49aa-b59d-742de70d1d52" class="plotly-graph-div" style="height:100%; width:100%;"></div>            <script type="text/javascript">                                    window.PLOTLYENV=window.PLOTLYENV || {};                                    if (document.getElementById("92f51efc-b046-49aa-b59d-742de70d1d52")) {                    Plotly.newPlot(                        "92f51efc-b046-49aa-b59d-742de70d1d52",                        [{"hovertemplate":"\u003cb\u003e%{fullData.name}\u003c\u002fb\u003e\u003cbr\u003ex=%{x:.2f}\u003cbr\u003ey=%{y:.3f}\u003cextra\u003e\u003c\u002fextra\u003e","line":{"color":"#64748b","shape":"spline","smoothing":0.6,"width":2},"mode":"lines","name":"Baseline","showlegend":true,"x":[0.0,0.0041841004184100415,0.008368200836820083,0.012552301255230124,0.016736401673640166,0.02092050209205021,0.025104602510460247,0.02928870292887029,0.03347280334728033,0.03765690376569037,0.04184100418410042,0.046025104602510455,0.050209205020920494,0.05439330543933054,0.05857740585774058,0.06276150627615062,0.06694560669456066,0.0711297071129707,0.07531380753138074,0.0794979079497908,0.08368200836820083,0.08786610878661087,0.09205020920502091,0.09623430962343095,0.10041841004184099,0.10460251046025104,0.10878661087866108,0.11297071129707112,0.11715481171548116,0.1213389121338912,0.12552301255230125,0.12970711297071127,0.13389121338912133,0.13807531380753138,0.1422594142259414,0.14644351464435146,0.15062761506276148,0.15481171548117154,0.1589958158995816,0.1631799163179916,0.16736401673640167,0.1715481171548117,0.17573221757322174,0.1799163179916318,0.18410041841004182,0.18828451882845187,0.1924686192468619,0.19665271966527195,0.20083682008368198,0.20502092050209203,0.20920502092050208,0.2133891213389121,0.21757322175732216,0.22175732217573219,0.22594142259414224,0.2301255230125523,0.23430962343096232,0.23849372384937237,0.2426778242677824,0.24686192468619245,0.2510460251046025,0.25523012552301255,0.25941422594142255,0.2635983263598326,0.26778242677824265,0.2719665271966527,0.27615062761506276,0.28033472803347276,0.2845188284518828,0.28870292887029286,0.2928870292887029,0.29707112970711297,0.30125523012552297,0.305439330543933,0.30962343096234307,0.3138075313807531,0.3179916317991632,0.3221757322175732,0.3263598326359832,0.3305439330543933,0.33472803347280333,0.3389121338912134,0.3430962343096234,0.34728033472803344,0.3514644351464435,0.35564853556485354,0.3598326359832636,0.3640167364016736,0.36820083682008364,0.3723849372384937,0.37656903765690375,0.3807531380753138,0.3849372384937238,0.38912133891213385,0.3933054393305439,0.39748953974895396,0.40167364016736395,0.405857740585774,0.41004184100418406,0.4142259414225941,0.41841004184100417,0.42259414225941416,0.4267782426778242,0.43096234309623427,0.4351464435146443,0.4393305439330544,0.44351464435146437,0.4476987447698744,0.4518828451882845,0.45606694560669453,0.4602510460251046,0.4644351464435146,0.46861924686192463,0.4728033472803347,0.47698744769874474,0.4811715481171548,0.4853556485355648,0.48953974895397484,0.4937238493723849,0.49790794979079495,0.502092050209205,0.506276150627615,0.5104602510460251,0.5146443514644351,0.5188284518828451,0.5230125523012552,0.5271966527196652,0.5313807531380753,0.5355648535564853,0.5397489539748953,0.5439330543933054,0.5481171548117154,0.5523012552301255,0.5564853556485355,0.5606694560669455,0.5648535564853556,0.5690376569037656,0.5732217573221757,0.5774058577405857,0.5815899581589957,0.5857740585774058,0.5899581589958158,0.5941422594142259,0.5983263598326359,0.6025104602510459,0.606694560669456,0.610878661087866,0.6150627615062761,0.6192468619246861,0.6234309623430961,0.6276150627615062,0.6317991631799162,0.6359832635983264,0.6401673640167364,0.6443514644351463,0.6485355648535565,0.6527196652719665,0.6569037656903766,0.6610878661087866,0.6652719665271966,0.6694560669456067,0.6736401673640167,0.6778242677824268,0.6820083682008368,0.6861924686192468,0.6903765690376569,0.6945606694560669,0.698744769874477,0.702928870292887,0.707112970711297,0.7112970711297071,0.7154811715481171,0.7196652719665272,0.7238493723849372,0.7280334728033472,0.7322175732217573,0.7364016736401673,0.7405857740585774,0.7447698744769874,0.7489539748953974,0.7531380753138075,0.7573221757322175,0.7615062761506276,0.7656903765690376,0.7698744769874476,0.7740585774058577,0.7782426778242677,0.7824267782426778,0.7866108786610878,0.7907949790794978,0.7949790794979079,0.7991631799163179,0.8033472803347279,0.807531380753138,0.811715481171548,0.8158995815899581,0.8200836820083681,0.8242677824267781,0.8284518828451882,0.8326359832635982,0.8368200836820083,0.8410041841004183,0.8451882845188283,0.8493723849372384,0.8535564853556484,0.8577405857740585,0.8619246861924685,0.8661087866108785,0.8702928870292886,0.8744769874476986,0.8786610878661087,0.8828451882845187,0.8870292887029287,0.8912133891213389,0.8953974895397488,0.899581589958159,0.903765690376569,0.907949790794979,0.9121338912133891,0.9163179916317991,0.9205020920502092,0.9246861924686192,0.9288702928870292,0.9330543933054393,0.9372384937238493,0.9414225941422594,0.9456066945606694,0.9497907949790794,0.9539748953974895,0.9581589958158995,0.9623430962343096,0.9665271966527196,0.9707112970711296,0.9748953974895397,0.9790794979079497,0.9832635983263598,0.9874476987447698,0.9916317991631798,0.9958158995815899,1.0],"y":[0.10325611017271691,0.10339464908070704,0.1035390562715586,0.10368957804184283,0.10384647082790888,0.10401000160614818,0.10418044830755235,0.10435810024693962,0.10454325856722096,0.1047362366990729,0.10493736083637589,0.10514697042776965,0.10536541868466405,0.10559307310603182,0.10583031602029194,0.10607754514457322,0.10633517416162493,0.10660363331461449,0.10688337002002223,0.10717484949880761,0.10747855542598257,0.10779499059868251,0.10812467762277514,0.1084681596179913,0.10882600094149918,0.10919878792977272,0.10958712965852876,0.10999165872042038,0.11041303202008067,0.11085193158600631,0.11130906539865677,0.11178516823401995,0.11228100252175863,0.1127973592169032,0.11333505868389485,0.11389495159160672,0.114477919817781,0.11508487736111359,0.11571677125899543,0.11637458250868019,0.11705932698939046,0.117772056382598,0.11851385908741732,0.1192858611277356,0.12008922704736441,0.12092516078913879,0.1217949065535085,0.12269974963176174,0.12364101720859388,0.1246200791282849,0.12563834861827425,0.12669728296342733,0.12779838412376887,0.12894319928791798,0.1301333213539018,0.13137038932844328,0.13265608863522507,0.13399215132202053,0.13538035615596092,0.13682252859557953,0.13832054062763832,0.1398763104561116,0.14149180203007444,0.1431690243966304,0.14491003086442047,0.14671691796269073,0.14859182418036831,0.15053692846911637,0.15255444849391867,0.15464663861439287,0.1568157875797699,0.15906421592030787,0.1613942730178593,0.16380833383839039,0.16630879530947795,0.1688980723262078,0.17157859336947684,0.17435279572149145,0.1772231202642655,0.18019200584818182,0.18326188321920467,0.18643516849514025,0.1897142561834541,0.1931015117355877,0.19659926363548103,0.2002097950231238,0.2039353348574255,0.207778048626525,0.21174002861785352,0.21582328376481186,0.22002972909182084,0.22436117478472664,0.2288193149190735,0.23340571588455722,0.23812180455000417,0.24296885621943393,0.24794798243609284,0.2530601186977304,0.25830601215274074,0.2636862093530299,0.26920104414548673,0.2748506257896357,0.28063482739431467,0.28655327477093173,0.2926053358048954,0.29879011045004616,0.30510642145323597,0.31155280591747114,0.31812750781214627,0.3248284715377472,0.3316533366498935,0.3385994338436497,0.3456637822936055,0.3528430884382674,0.36013374628881456,0.36753183933226063,0.37503314408758337,0.38263313536051513,0.3903269932285346,0.3981096117723113,0.405975609553604,0.4139193418225966,0.42193491442011344,0.43001619932232193,0.4381568517577029,0.446350328808488,0.454589909391767,0.4628687154993053,0.4711797345600831,0.47951584277594816,0.48786982926879496,0.4962344208675833,0.504602307355484,0.5129661669916019,0.5213186921182653,0.5296526146637606,0.5379607313517324,0.5462359284321939,0.5544712057551259,0.5626597000159065,0.5707947070120986,0.5788697027632768,0.586878363359353,0.5948145834180083,0.6026724930481002,0.6104464732329847,0.6181311695653043,0.6257215042826447,0.6332126865712656,0.6406002211226275,0.6478799149443696,0.6550478824435727,0.6621005488153135,0.6690346517835489,0.6758472417541074,0.6825356804508947,0.6890976381162865,0.6955310893650131,0.7018343077876497,0.7080058594051007,0.7140445950792645,0.7199496419874267,0.72572039426896,0.7313565029526626,0.7368578652717028,0.7422246134707049,0.7474571032062077,0.7525559016376057,0.7575217753009073,0.7623556778523443,0.7670587377631131,0.7716322460404988,0.7760776440443701,0.7803965114616772,0.7845905544952088,0.7886615943165318,0.7926115558268515,0.7964424567635111,0.8001563971840802,0.8037555493544745,0.8072421480623625,0.810618481372249,0.813886881834114,0.8170497181533275,0.8201093873257699,0.8230683072386488,0.8259289097344318,0.8286936341325762,0.8313649212013411,0.833945207569883,0.836436920569059,0.8388424734878631,0.8411642612311867,0.8434046563636076,0.8455660055231439,0.8476506261883461,0.8496608037817258,0.8515987890923044,0.8534667959999981,0.8552669994846239,0.8570015339024812,0.8586724915137435,0.8602819212442462,0.8618318276656909,0.8633241701787625,0.8647608623841947,0.8661437716273805,0.8674747187027282,0.8687554777045662,0.869987776012039,0.8711732943960615,0.8723136672370364,0.8734104828426641,0.874465283855802,0.8754795677429297,0.8764547873543801,0.8773923515480664,0.8782936258689954,0.8791599332773964,0.8799925549188086,0.8807927309299669,0.8815616612747921,0.8823005066052454,0.8830103891422267,0.8836923935721009,0.8843475679548162,0.8849769246399327,0.8855814411872175,0.8861620612887775,0.8867196956899914,0.8872552231067824,0.8877694911370229,0.8882633171641062,0.888737489250938,0.889192767022802,0.8896298825377497,0.8900495411433326,0.8904524223186584,0.8908391805009009,0.8912104458955256],"type":"scatter"},{"hovertemplate":"\u003cb\u003e%{fullData.name}\u003c\u002fb\u003e\u003cbr\u003ex=%{x:.2f}\u003cbr\u003ey=%{y:.3f}\u003cextra\u003e\u003c\u002fextra\u003e","line":{"color":"#2563eb","shape":"spline","smoothing":0.6,"width":2},"mode":"lines","name":"Improved","showlegend":true,"x":[0.0,0.0041841004184100415,0.008368200836820083,0.012552301255230124,0.016736401673640166,0.02092050209205021,0.025104602510460247,0.02928870292887029,0.03347280334728033,0.03765690376569037,0.04184100418410042,0.046025104602510455,0.050209205020920494,0.05439330543933054,0.05857740585774058,0.06276150627615062,0.06694560669456066,0.0711297071129707,0.07531380753138074,0.0794979079497908,0.08368200836820083,0.08786610878661087,0.09205020920502091,0.09623430962343095,0.10041841004184099,0.10460251046025104,0.10878661087866108,0.11297071129707112,0.11715481171548116,0.1213389121338912,0.12552301255230125,0.12970711297071127,0.13389121338912133,0.13807531380753138,0.1422594142259414,0.14644351464435146,0.15062761506276148,0.15481171548117154,0.1589958158995816,0.1631799163179916,0.16736401673640167,0.1715481171548117,0.17573221757322174,0.1799163179916318,0.18410041841004182,0.18828451882845187,0.1924686192468619,0.19665271966527195,0.20083682008368198,0.20502092050209203,0.20920502092050208,0.2133891213389121,0.21757322175732216,0.22175732217573219,0.22594142259414224,0.2301255230125523,0.23430962343096232,0.23849372384937237,0.2426778242677824,0.24686192468619245,0.2510460251046025,0.25523012552301255,0.25941422594142255,0.2635983263598326,0.26778242677824265,0.2719665271966527,0.27615062761506276,0.28033472803347276,0.2845188284518828,0.28870292887029286,0.2928870292887029,0.29707112970711297,0.30125523012552297,0.305439330543933,0.30962343096234307,0.3138075313807531,0.3179916317991632,0.3221757322175732,0.3263598326359832,0.3305439330543933,0.33472803347280333,0.3389121338912134,0.3430962343096234,0.34728033472803344,0.3514644351464435,0.35564853556485354,0.3598326359832636,0.3640167364016736,0.36820083682008364,0.3723849372384937,0.37656903765690375,0.3807531380753138,0.3849372384937238,0.38912133891213385,0.3933054393305439,0.39748953974895396,0.40167364016736395,0.405857740585774,0.41004184100418406,0.4142259414225941,0.41841004184100417,0.42259414225941416,0.4267782426778242,0.43096234309623427,0.4351464435146443,0.4393305439330544,0.44351464435146437,0.4476987447698744,0.4518828451882845,0.45606694560669453,0.4602510460251046,0.4644351464435146,0.46861924686192463,0.4728033472803347,0.47698744769874474,0.4811715481171548,0.4853556485355648,0.48953974895397484,0.4937238493723849,0.49790794979079495,0.502092050209205,0.506276150627615,0.5104602510460251,0.5146443514644351,0.5188284518828451,0.5230125523012552,0.5271966527196652,0.5313807531380753,0.5355648535564853,0.5397489539748953,0.5439330543933054,0.5481171548117154,0.5523012552301255,0.5564853556485355,0.5606694560669455,0.5648535564853556,0.5690376569037656,0.5732217573221757,0.5774058577405857,0.5815899581589957,0.5857740585774058,0.5899581589958158,0.5941422594142259,0.5983263598326359,0.6025104602510459,0.606694560669456,0.610878661087866,0.6150627615062761,0.6192468619246861,0.6234309623430961,0.6276150627615062,0.6317991631799162,0.6359832635983264,0.6401673640167364,0.6443514644351463,0.6485355648535565,0.6527196652719665,0.6569037656903766,0.6610878661087866,0.6652719665271966,0.6694560669456067,0.6736401673640167,0.6778242677824268,0.6820083682008368,0.6861924686192468,0.6903765690376569,0.6945606694560669,0.698744769874477,0.702928870292887,0.707112970711297,0.7112970711297071,0.7154811715481171,0.7196652719665272,0.7238493723849372,0.7280334728033472,0.7322175732217573,0.7364016736401673,0.7405857740585774,0.7447698744769874,0.7489539748953974,0.7531380753138075,0.7573221757322175,0.7615062761506276,0.7656903765690376,0.7698744769874476,0.7740585774058577,0.7782426778242677,0.7824267782426778,0.7866108786610878,0.7907949790794978,0.7949790794979079,0.7991631799163179,0.8033472803347279,0.807531380753138,0.811715481171548,0.8158995815899581,0.8200836820083681,0.8242677824267781,0.8284518828451882,0.8326359832635982,0.8368200836820083,0.8410041841004183,0.8451882845188283,0.8493723849372384,0.8535564853556484,0.8577405857740585,0.8619246861924685,0.8661087866108785,0.8702928870292886,0.8744769874476986,0.8786610878661087,0.8828451882845187,0.8870292887029287,0.8912133891213389,0.8953974895397488,0.899581589958159,0.903765690376569,0.907949790794979,0.9121338912133891,0.9163179916317991,0.9205020920502092,0.9246861924686192,0.9288702928870292,0.9330543933054393,0.9372384937238493,0.9414225941422594,0.9456066945606694,0.9497907949790794,0.9539748953974895,0.9581589958158995,0.9623430962343096,0.9665271966527196,0.9707112970711296,0.9748953974895397,0.9790794979079497,0.9832635983263598,0.9874476987447698,0.9916317991631798,0.9958158995815899,1.0],"y":[0.14060501089565672,0.14088283778515465,0.14117437668125757,0.14148029457499495,0.14180128973406453,0.14213809304132727,0.1424914693767342,0.14286221904252114,0.14325117923128,0.14365922553626193,0.14408727350297595,0.14453628022082632,0.14500724595316689,0.14550121580375022,0.1460192814170989,0.14656258270983058,0.14713230962941984,0.14772970393627682,0.14835606100435697,0.1490127316347919,0.14970112387623702,0.15042270484476727,0.151179002535215,0.15197160761482742,0.15280217518902647,0.15367242652787275,0.15458415074057302,0.15553920638401897,0.1565395229899072,0.15758710249346727,0.15868402054521485,0.15983242768545844,0.1610345503595203,0.16229269174979818,0.16360923239889855,0.16498663059612784,0.1664274224976533,0.16793422194865357,0.16950971997379546,0.17115668390042355,0.17287795607696416,0.17467645214725785,0.17655515883988954,0.17851713123012414,0.1805654894308331,0.18270341466786982,0.18493414469478012,0.18726096850159143,0.18968722027278023,0.1922162725504525,0.1948515285603704,0.19759641366080336,0.20045436587736357,0.20342882549109012,0.20652322365216083,0.20974096999781483,0.21308543926043932,0.21655995686037258,0.2201677834878503,0.22391209868971296,0.22779598348899335,0.23182240207931556,0.23599418265109512,0.24031399742276002,0.2447843419674832,0.24940751394406385,0.25418559135939783,0.25912041050917184,0.264213543762687,0.2694662773766969,0.2748795895414215,0.2804541288790112,0.2861901936301986,0.2920877117781588,0.29814622236917493,0.30436485829703797,0.31074233082165825,0.317276916091671,0.32396644393541485,0.3308082891742017,0.3377993656960141,0.34493612350649583,0.35221454894733234,0.3596301682399747,0.36717805447542784,0.37485283812895587,0.38264872113267095,0.39055949448984884,0.39857855936337727,0.40669895151805197,0.4149133689436421,0.4232142024339775,0.43159356884802497,0.4400433467332665,0.4485552139508604,0.4571206869071671,0.46573116096821093,0.47437795161332363,0.48305233587216456,0.49174559358589653,0.5004490480386277,0.5091541055191895,0.5178522933955252,0.5265352963138058,0.535194990171079,0.5438234735527685,0.5524130963735796,0.5609564855110812,0.5694465672741473,0.5778765866022512,0.586240122945051,0.5945311028235718,0.6027438091235013,0.6108728872166885,0.6189133480480735,0.6268605683613184,0.6347102882669134,0.6424586063811748,0.6501019727832414,0.657637180049939,0.665061352635402,0.6723719348639443,0.679566677801265,0.6866436252611693,0.6936010991931518,0.7004376846810229,0.7071522147649059,0.7137437552790105,0.720211589876207,0.7265552053881889,0.7327742776474424,0.7388686578748471,0.7448383597149452,0.7506835469801073,0.7564045221453197,0.7620017156173483,0.7674756757858036,0.7728270598492599,0.778056625397137,0.7831652227175776,0.7881537877929914,0.7930233359382668,0.7977749560317459,0.8024098052858115,0.8069291045022122,0.8113341337568697,0.8156262284597393,0.8198067757371317,0.8238772110865894,0.8278390152577807,0.8316937113167614,0.8354428618552057,0.8390880663106919,0.842630958368713,0.8460732034216532,0.8494164960644374,0.852662557610846,0.8558131336185033,0.858869991414269,0.8618349176151412,0.8647097156427792,0.8674962032323732,0.870196209938834,0.872811574645113,0.8753441430789634,0.8777957653455672,0.8801682934842785,0.8824635790582229,0.8846834707857396,0.8868298122226409,0.8889044395040612,0.8909091791542693,0.892845845972296,0.8947162410005652,0.8965221495829927,0.8982653395181989,0.8999475593126457,0.901570536537641,0.9031359762932827,0.904645559781565,0.9061009429900344,0.9075037554865942,0.9088555993253137,0.9101580480623906,0.9114126458807956,0.9126209068215325,0.913784314118947,0.9149043196370531,0.9159823434034584,0.9170197732371421,0.918017964466056,0.918978239730313,0.9199018888665516,0.9207901688689508,0.9216443039222985,0.9224654855024788,0.9232548725397511,0.9240135916402323,0.9247427373610504,0.9254433725347414,0.9261165286385616,0.9267632062045259,0.9273843752661248,0.9279809758378323,0.9285539184236826,0.9291040845513728,0.9296323273285203,0.9301394720178946,0.9306263166286217,0.9310936325205441,0.9315421650191003,0.9319726340382659,0.9323857347092799,0.9327821380130337,0.9331624914141858,0.9335274194952079,0.9338775245887276,0.9342133874066783,0.9345355676649034,0.9348446047019983,0.9351410180912925,0.9354253082449973,0.9356979570096523,0.935959428252111,0.9362101684353965,0.9364506071838582,0.9366811578371357,0.9369022179925198,0.9371141700353723,0.9373173816573281,0.9375122063620713,0.9376989839585275,0.9378780410413667,0.9380496914587627,0.9382142367673885,0.9383719666746729,0.9385231594683747,0.9386680824335623,0.9388069922571125,0.9389401354198723],"type":"scatter"},{"hovertemplate":"\u003cb\u003e%{fullData.name}\u003c\u002fb\u003e\u003cbr\u003ex=%{x:.2f}\u003cbr\u003ey=%{y:.3f}\u003cextra\u003e\u003c\u002fextra\u003e","line":{"color":"#4b5563","dash":"dash","width":2},"mode":"lines","name":"Target","showlegend":true,"x":[0.0,0.0041841004184100415,0.008368200836820083,0.012552301255230124,0.016736401673640166,0.02092050209205021,0.025104602510460247,0.02928870292887029,0.03347280334728033,0.03765690376569037,0.04184100418410042,0.046025104602510455,0.050209205020920494,0.05439330543933054,0.05857740585774058,0.06276150627615062,0.06694560669456066,0.0711297071129707,0.07531380753138074,0.0794979079497908,0.08368200836820083,0.08786610878661087,0.09205020920502091,0.09623430962343095,0.10041841004184099,0.10460251046025104,0.10878661087866108,0.11297071129707112,0.11715481171548116,0.1213389121338912,0.12552301255230125,0.12970711297071127,0.13389121338912133,0.13807531380753138,0.1422594142259414,0.14644351464435146,0.15062761506276148,0.15481171548117154,0.1589958158995816,0.1631799163179916,0.16736401673640167,0.1715481171548117,0.17573221757322174,0.1799163179916318,0.18410041841004182,0.18828451882845187,0.1924686192468619,0.19665271966527195,0.20083682008368198,0.20502092050209203,0.20920502092050208,0.2133891213389121,0.21757322175732216,0.22175732217573219,0.22594142259414224,0.2301255230125523,0.23430962343096232,0.23849372384937237,0.2426778242677824,0.24686192468619245,0.2510460251046025,0.25523012552301255,0.25941422594142255,0.2635983263598326,0.26778242677824265,0.2719665271966527,0.27615062761506276,0.28033472803347276,0.2845188284518828,0.28870292887029286,0.2928870292887029,0.29707112970711297,0.30125523012552297,0.305439330543933,0.30962343096234307,0.3138075313807531,0.3179916317991632,0.3221757322175732,0.3263598326359832,0.3305439330543933,0.33472803347280333,0.3389121338912134,0.3430962343096234,0.34728033472803344,0.3514644351464435,0.35564853556485354,0.3598326359832636,0.3640167364016736,0.36820083682008364,0.3723849372384937,0.37656903765690375,0.3807531380753138,0.3849372384937238,0.38912133891213385,0.3933054393305439,0.39748953974895396,0.40167364016736395,0.405857740585774,0.41004184100418406,0.4142259414225941,0.41841004184100417,0.42259414225941416,0.4267782426778242,0.43096234309623427,0.4351464435146443,0.4393305439330544,0.44351464435146437,0.4476987447698744,0.4518828451882845,0.45606694560669453,0.4602510460251046,0.4644351464435146,0.46861924686192463,0.4728033472803347,0.47698744769874474,0.4811715481171548,0.4853556485355648,0.48953974895397484,0.4937238493723849,0.49790794979079495,0.502092050209205,0.506276150627615,0.5104602510460251,0.5146443514644351,0.5188284518828451,0.5230125523012552,0.5271966527196652,0.5313807531380753,0.5355648535564853,0.5397489539748953,0.5439330543933054,0.5481171548117154,0.5523012552301255,0.5564853556485355,0.5606694560669455,0.5648535564853556,0.5690376569037656,0.5732217573221757,0.5774058577405857,0.5815899581589957,0.5857740585774058,0.5899581589958158,0.5941422594142259,0.5983263598326359,0.6025104602510459,0.606694560669456,0.610878661087866,0.6150627615062761,0.6192468619246861,0.6234309623430961,0.6276150627615062,0.6317991631799162,0.6359832635983264,0.6401673640167364,0.6443514644351463,0.6485355648535565,0.6527196652719665,0.6569037656903766,0.6610878661087866,0.6652719665271966,0.6694560669456067,0.6736401673640167,0.6778242677824268,0.6820083682008368,0.6861924686192468,0.6903765690376569,0.6945606694560669,0.698744769874477,0.702928870292887,0.707112970711297,0.7112970711297071,0.7154811715481171,0.7196652719665272,0.7238493723849372,0.7280334728033472,0.7322175732217573,0.7364016736401673,0.7405857740585774,0.7447698744769874,0.7489539748953974,0.7531380753138075,0.7573221757322175,0.7615062761506276,0.7656903765690376,0.7698744769874476,0.7740585774058577,0.7782426778242677,0.7824267782426778,0.7866108786610878,0.7907949790794978,0.7949790794979079,0.7991631799163179,0.8033472803347279,0.807531380753138,0.811715481171548,0.8158995815899581,0.8200836820083681,0.8242677824267781,0.8284518828451882,0.8326359832635982,0.8368200836820083,0.8410041841004183,0.8451882845188283,0.8493723849372384,0.8535564853556484,0.8577405857740585,0.8619246861924685,0.8661087866108785,0.8702928870292886,0.8744769874476986,0.8786610878661087,0.8828451882845187,0.8870292887029287,0.8912133891213389,0.8953974895397488,0.899581589958159,0.903765690376569,0.907949790794979,0.9121338912133891,0.9163179916317991,0.9205020920502092,0.9246861924686192,0.9288702928870292,0.9330543933054393,0.9372384937238493,0.9414225941422594,0.9456066945606694,0.9497907949790794,0.9539748953974895,0.9581589958158995,0.9623430962343096,0.9665271966527196,0.9707112970711296,0.9748953974895397,0.9790794979079497,0.9832635983263598,0.9874476987447698,0.9916317991631798,0.9958158995815899,1.0],"y":[0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97,0.97],"type":"scatter"}],                        {"template":{"data":{"histogram2dcontour":[{"type":"histogram2dcontour","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"choropleth":[{"type":"choropleth","colorbar":{"outlinewidth":0,"ticks":""}}],"histogram2d":[{"type":"histogram2d","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"heatmap":[{"type":"heatmap","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"heatmapgl":[{"type":"heatmapgl","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"contourcarpet":[{"type":"contourcarpet","colorbar":{"outlinewidth":0,"ticks":""}}],"contour":[{"type":"contour","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"surface":[{"type":"surface","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"mesh3d":[{"type":"mesh3d","colorbar":{"outlinewidth":0,"ticks":""}}],"scatter":[{"fillpattern":{"fillmode":"overlay","size":10,"solidity":0.2},"type":"scatter"}],"parcoords":[{"type":"parcoords","line":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterpolargl":[{"type":"scatterpolargl","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"bar":[{"error_x":{"color":"#2a3f5f"},"error_y":{"color":"#2a3f5f"},"marker":{"line":{"color":"#E5ECF6","width":0.5},"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"bar"}],"scattergeo":[{"type":"scattergeo","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterpolar":[{"type":"scatterpolar","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"histogram":[{"marker":{"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"histogram"}],"scattergl":[{"type":"scattergl","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatter3d":[{"type":"scatter3d","line":{"colorbar":{"outlinewidth":0,"ticks":""}},"marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattermapbox":[{"type":"scattermapbox","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterternary":[{"type":"scatterternary","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattercarpet":[{"type":"scattercarpet","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"carpet":[{"aaxis":{"endlinecolor":"#2a3f5f","gridcolor":"white","linecolor":"white","minorgridcolor":"white","startlinecolor":"#2a3f5f"},"baxis":{"endlinecolor":"#2a3f5f","gridcolor":"white","linecolor":"white","minorgridcolor":"white","startlinecolor":"#2a3f5f"},"type":"carpet"}],"table":[{"cells":{"fill":{"color":"#EBF0F8"},"line":{"color":"white"}},"header":{"fill":{"color":"#C8D4E3"},"line":{"color":"white"}},"type":"table"}],"barpolar":[{"marker":{"line":{"color":"#E5ECF6","width":0.5},"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"barpolar"}],"pie":[{"automargin":true,"type":"pie"}]},"layout":{"autotypenumbers":"strict","colorway":["#636efa","#EF553B","#00cc96","#ab63fa","#FFA15A","#19d3f3","#FF6692","#B6E880","#FF97FF","#FECB52"],"font":{"color":"#2a3f5f"},"hovermode":"closest","hoverlabel":{"align":"left"},"paper_bgcolor":"white","plot_bgcolor":"#E5ECF6","polar":{"bgcolor":"#E5ECF6","angularaxis":{"gridcolor":"white","linecolor":"white","ticks":""},"radialaxis":{"gridcolor":"white","linecolor":"white","ticks":""}},"ternary":{"bgcolor":"#E5ECF6","aaxis":{"gridcolor":"white","linecolor":"white","ticks":""},"baxis":{"gridcolor":"white","linecolor":"white","ticks":""},"caxis":{"gridcolor":"white","linecolor":"white","ticks":""}},"coloraxis":{"colorbar":{"outlinewidth":0,"ticks":""}},"colorscale":{"sequential":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"sequentialminus":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"diverging":[[0,"#8e0152"],[0.1,"#c51b7d"],[0.2,"#de77ae"],[0.3,"#f1b6da"],[0.4,"#fde0ef"],[0.5,"#f7f7f7"],[0.6,"#e6f5d0"],[0.7,"#b8e186"],[0.8,"#7fbc41"],[0.9,"#4d9221"],[1,"#276419"]]},"xaxis":{"gridcolor":"white","linecolor":"white","ticks":"","title":{"standoff":15},"zerolinecolor":"white","automargin":true,"zerolinewidth":2},"yaxis":{"gridcolor":"white","linecolor":"white","ticks":"","title":{"standoff":15},"zerolinecolor":"white","automargin":true,"zerolinewidth":2},"scene":{"xaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white","gridwidth":2},"yaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white","gridwidth":2},"zaxis":{"backgroundcolor":"#E5ECF6","gridcolor":"white","linecolor":"white","showbackground":true,"ticks":"","zerolinecolor":"white","gridwidth":2}},"shapedefaults":{"line":{"color":"#2a3f5f"}},"annotationdefaults":{"arrowcolor":"#2a3f5f","arrowhead":0,"arrowwidth":1},"geo":{"bgcolor":"white","landcolor":"#E5ECF6","subunitcolor":"white","showland":true,"showlakes":true,"lakecolor":"white"},"title":{"x":0.05},"mapbox":{"style":"light"}}},"margin":{"l":40,"r":28,"t":20,"b":40},"legend":{"orientation":"v","x":1,"y":0,"xanchor":"right","yanchor":"bottom","bgcolor":"rgba(255,255,255,0)","borderwidth":0},"hoverlabel":{"font":{"color":"#111827","size":12},"bgcolor":"white","bordercolor":"rgba(0,0,0,0.15)","align":"left","namelength":-1},"xaxis":{"tickfont":{"size":12,"color":"rgba(0,0,0,0.55)"},"showgrid":false,"zeroline":false,"showline":true,"linecolor":"rgba(0,0,0,0.25)","linewidth":1,"ticks":"outside","ticklen":6,"tickcolor":"rgba(0,0,0,0.25)","title":{},"automargin":true,"fixedrange":true},"yaxis":{"tickfont":{"size":12,"color":"rgba(0,0,0,0.55)"},"showgrid":false,"zeroline":false,"showline":true,"linecolor":"rgba(0,0,0,0.25)","linewidth":1,"ticks":"outside","ticklen":6,"tickcolor":"rgba(0,0,0,0.25)","title":{},"tickformat":".2f","rangemode":"tozero","automargin":true,"fixedrange":true},"autosize":true,"paper_bgcolor":"rgba(0,0,0,0)","plot_bgcolor":"rgba(0,0,0,0)","hovermode":"x unified"},                        {"displayModeBar": false, "responsive": true, "scrollZoom": false, "doubleClick": false, "modeBarButtonsToRemove": ["zoom2d", "pan2d", "select2d", "lasso2d", "zoomIn2d", "zoomOut2d", "autoScale2d", "resetScale2d", "toggleSpikelines"]}                    ).then(function(){
+                            
+(function(){
+  function attach(gd){
+    function round(){
+      try {
+        var root = gd && gd.parentNode ? gd.parentNode : document;
+        var rects = root.querySelectorAll('.hoverlayer .hovertext rect');
+        rects.forEach(function(r){ r.setAttribute('rx', 8); r.setAttribute('ry', 8); });
+      } catch(e) {}
+    }
+    if (gd && gd.on) {
+      gd.on('plotly_hover', round);
+      gd.on('plotly_unhover', round);
+      gd.on('plotly_relayout', round);
+    }
+    setTimeout(round, 0);
+  }
+  var plots = document.querySelectorAll('.js-plotly-plot');
+  plots.forEach(attach);
+})();
+
+                        })                };                            </script>        </div>
+  <div class="plotly_controls" style="margin-top:12px; display:flex; gap:16px; align-items:center;">
+    <label style="font-size:12px;color:rgba(0,0,0,.65); display:flex; align-items:center; gap:6px; white-space:nowrap; padding:6px 10px;">
+      Dataset
+      <select id="__DSID__" style="font-size:12px; padding:2px 6px;">
+        <option value="0">CIFAR-10</option>
+        <option value="1">CIFAR-100</option>
+        <option value="2">ImageNet-1K</option>
+      </select>
+    </label>
+    <label style="font-size:12px;color:rgba(0,0,0,.65);display:flex;align-items:center;gap:10px; flex:1; padding:6px 10px;">
+      Augmentation α
+      <input id="line-ex-alpha-7f91adbe" type="range" min="0" max="1" step="0.01" value="0.70" style="flex:1;">
+      <span class="alpha-value">0.70</span>
+    </label>
+  </div>
+</div>
+<script>
+(function(){
+  var container = document.getElementById('line-ex-container-7f91adbe');
+  if(!container) return;
+  var gd = container.querySelector('.js-plotly-plot');
+  var slider = document.getElementById('line-ex-alpha-7f91adbe');
+  var dsSelect = document.getElementById('__DSID__');
+  var valueEl = container.querySelector('.alpha-value');
+  var N = 240;
+  var xs = Array.from({length: N}, function(_,i){ return i/(N-1); });
+  function logistic(x, ymin, ymax, k, x0){ return ymin + (ymax - ymin) / (1 + Math.exp(-k*(x - x0))); }
+  function blend(l,e,a){ return (1-a)*l + a*e; }
+  var datasets = [
+    { name:'CIFAR-10',  base:{ymin:0.10,ymax:0.90,k:10.0,x0:0.55}, aug:{ymin:0.15,ymax:0.96,k:12.0,x0:0.40}, target:0.97 },
+    { name:'CIFAR-100', base:{ymin:0.05,ymax:0.70,k:9.5,x0:0.60},  aug:{ymin:0.08,ymax:0.80,k:11.0,x0:0.45},  target:0.85 },
+    { name:'ImageNet-1K', base:{ymin:0.02,ymax:0.68,k:8.5,x0:0.65}, aug:{ymin:0.04,ymax:0.75,k:9.5,x0:0.50},  target:0.82 }
+  ];
+  var dsi = 0;
+  var yb = xs.map(function(x){ return logistic(x, datasets[dsi].base.ymin, datasets[dsi].base.ymax, datasets[dsi].base.k, datasets[dsi].base.x0); });
+  var ya = xs.map(function(x){ return logistic(x, datasets[dsi].aug.ymin, datasets[dsi].aug.ymax, datasets[dsi].aug.k, datasets[dsi].aug.x0); });
+  var yt = xs.map(function(){ return datasets[dsi].target; });
+  function applyAlpha(a){
+    var yi = yb.map(function(v,i){ return blend(v, ya[i], a); });
+    Plotly.restyle(gd, {y:[yi]}, [1]); // only Improved changes with α
+    if(valueEl) valueEl.textContent = a.toFixed(2);
+  }
+  function applyDataset(){
+    var d = datasets[dsi];
+    yb = xs.map(function(x){ return logistic(x, d.base.ymin, d.base.ymax, d.base.k, d.base.x0); });
+    ya = xs.map(function(x){ return logistic(x, d.aug.ymin, d.aug.ymax, d.aug.k, d.aug.x0); });
+    yt = xs.map(function(){ return d.target; });
+    var a = parseFloat(slider.value)||0;
+    var yi = yb.map(function(v,i){ return blend(v, ya[i], a); });
+    Plotly.restyle(gd, {y:[yb]}, [0]); // Baseline
+    Plotly.restyle(gd, {y:[yi]}, [1]); // Improved (blended)
+    Plotly.restyle(gd, {y:[yt]}, [2]); // Target
+  }
+  var initA = parseFloat(slider.value)||0;
+  slider.addEventListener('input', function(e){ applyAlpha(parseFloat(e.target.value)||0); });
+  dsSelect.addEventListener('change', function(e){ dsi = parseInt(e.target.value)||0; applyDataset(); });
+  setTimeout(function(){ applyDataset(); applyAlpha(initA); }, 0);
+})();
+</script>

app/src/content/fragments/palettes.html

@@ -12,7 +12,7 @@
     .palettes .palette-card__swatches .sw:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
     .palettes .palette-card__swatches .sw:last-child  { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
     .palettes .palette-card__footer { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
-    .palettes .copy-btn { width: 100%; margin: 0; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--surface-bg); color: var(--text-color); font-size: 12px; cursor: pointer; }
+    .palettes .copy-btn { width: 100%; margin: 0; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--surface-bg); color: var(--text-color)!important; font-size: 12px; cursor: pointer; }
     .palettes .palettes__meta { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
     .palettes .current-color { display: flex; align-items: center; gap: 10px; }
     .palettes .current-swatch { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border-color); }
@@ -24,10 +24,10 @@
   <div class="palettes__controls" style="display:flex; flex-direction:column; gap:10px; margin-bottom:24px;">
     <div style="display:flex; align-items:center; justify-content:space-between; gap:12px;">
       <div style="font-weight:700;">Pick a hue</div>
-      <div class="hue-value" style="font-variant-numeric: tabular-nums; color: var(--muted-color);">H 220°</div>
+      <div class="hue-value" style="font-variant-numeric: tabular-nums; color: var(--muted-color);">H 337°</div>
     </div>
     <div class="hue-slider" style="position:relative; height:18px; border-radius:10px; border:1px solid var(--border-color); background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); cursor: ew-resize; touch-action: none;">
-      <div class="hue-knob" style="position:absolute; top:50%; left:61.1%; width:14px; height:14px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.2), 0 2px 8px rgba(0,0,0,.25); transform:translate(-50%, -50%); background: var(--surface-bg); z-index: 2;"></div>
+      <div class="hue-knob" style="position:absolute; top:50%; left:93.6%; width:14px; height:14px; border-radius:50%; border:2px solid #fff; transform:translate(-50%, -50%); background: var(--surface-bg); z-index: 2;"></div>
     </div>
     <div class="palettes__meta">
       <div class="current-color">
@@ -101,6 +101,20 @@
       const simSelect = root.querySelector('.cvd-select');
       console.log('[palettes] elements', { root: !!root, grid: !!grid, slider: !!slider, knob: !!knob, hueValue: !!hueValue });
 
+      // Shared bus to sync with color-picker instances
+      if (!window.__colorPickerBus) {
+        window.__colorPickerBus = (() => {
+          let hue = 337; let adjusting = false; const listeners = new Set();
+          return {
+            get: () => ({ hue, adjusting }),
+            publish: (sourceId, nextHue, isAdjusting) => { hue = ((nextHue % 360) + 360) % 360; adjusting = !!isAdjusting; listeners.forEach(fn => { try { fn({ sourceId, hue, adjusting }); } catch {} }); },
+            subscribe: (fn) => { listeners.add(fn); return () => listeners.delete(fn); }
+          };
+        })();
+      }
+      const bus = window.__colorPickerBus;
+      const instanceId = Math.random().toString(36).slice(2);
+
       // Cards data with full descriptions
       const cards = [
         { key: 'categorical', title: 'Categorical', desc: 'Categorical colors help users map non-numeric meaning to objects in a visualization. These are designed to be visually distinct from one another. Maximum of six.', generator: (base) => {
@@ -168,7 +182,19 @@
       // Rendering
       const renderPalettes = (h) => {
         console.log('[palettes] renderPalettes', h);
-        const base = chroma.hsl(h, 0.75, 0.55);
+        const base = chroma.hsl(h, 0.67, 0.72);
+        // Update CSS variables for live theming only during interaction
+        try {
+          if (isAdjusting) {
+            const baseHex = base.hex();
+            const hoverHex = chroma(base).darken(0.6).hex();
+            const rootEl = document.documentElement;
+            rootEl.style.setProperty('--primary', baseHex);
+            rootEl.style.setProperty('--primary-hover', hoverHex);
+          }
+        } catch (e) {
+          console.warn('[palettes] failed updating CSS vars', e);
+        }
         const uniformText = (bg) => (chroma(bg).luminance() > 0.45 ? '#111' : '#fff');
 
         // Update current swatch + name
@@ -260,12 +286,16 @@
       };
 
       // Hue slider behavior
-      let hue = 220; // initial
+      let hue = 337; // initial
+      let isAdjusting = false; // only update theme while interacting
       const setHue = (h) => { hue = (h + 360) % 360; const pct = hue / 360 * 100; if (knob) knob.style.left = pct + '%'; if (hueValue) hueValue.textContent = `H ${Math.round(hue)}°`; console.log('[palettes] setHue', hue, pct); renderPalettes(hue); };
       const getHueFromEvent = (ev) => { const rect = slider.getBoundingClientRect(); const clientX = ev.touches ? ev.touches[0].clientX : ev.clientX; const x = clientX - rect.left; const t = Math.max(0, Math.min(1, x / rect.width)); const h = t * 360; console.log('[palettes] getHueFromEvent', { clientX, left: rect.left, width: rect.width, t, h }); return h; };
-      const onDown = (ev) => { console.log('[palettes] onDown', ev.type); ev.preventDefault(); setHue(getHueFromEvent(ev)); const move = (e) => { e.preventDefault && e.preventDefault(); setHue(getHueFromEvent(e)); }; const up = () => { console.log('[palettes] onUp'); window.removeEventListener('mousemove', move); window.removeEventListener('touchmove', move); window.removeEventListener('mouseup', up); window.removeEventListener('touchend', up); }; window.addEventListener('mousemove', move, { passive: false }); window.addEventListener('touchmove', move, { passive: false }); window.addEventListener('mouseup', up, { once: true }); window.addEventListener('touchend', up, { once: true }); };
+      const onDown = (ev) => { console.log('[palettes] onDown', ev.type); ev.preventDefault(); isAdjusting = true; const h0 = getHueFromEvent(ev); setHue(h0); bus.publish(instanceId, h0, true); const move = (e) => { e.preventDefault && e.preventDefault(); const hh = getHueFromEvent(e); setHue(hh); bus.publish(instanceId, hh, true); }; const up = () => { console.log('[palettes] onUp'); isAdjusting = false; bus.publish(instanceId, hue, false); window.removeEventListener('mousemove', move); window.removeEventListener('touchmove', move); window.removeEventListener('mouseup', up); window.removeEventListener('touchend', up); }; window.addEventListener('mousemove', move, { passive: false }); window.addEventListener('touchmove', move, { passive: false }); window.addEventListener('mouseup', up, { once: true }); window.addEventListener('touchend', up, { once: true }); };
       if (slider) { slider.addEventListener('mousedown', onDown); slider.addEventListener('touchstart', onDown, { passive: false }); console.log('[palettes] listeners attached'); } else { console.warn('[palettes] slider not found'); }
 
+      // Subscribe to bus to receive updates from other pickers
+      const unsubscribe = bus.subscribe(({ sourceId, hue: H, adjusting }) => { if (sourceId === instanceId) return; isAdjusting = adjusting; setHue(H); });
+
       // Color-vision simulation filters (SVG)
       const injectFilters = () => {
         if (document.getElementById('cvd-filters')) return;
@@ -290,7 +320,10 @@
       if (simSelect) simSelect.addEventListener('change', () => applySimulation(simSelect.value));
 
       console.log('[palettes] initial render');
-      setHue(hue);
+      // Initialize from shared hue without updating CSS variables
+      const shared = bus.get();
+      isAdjusting = false;
+      setHue(shared && typeof shared.hue === 'number' ? shared.hue : hue);
       applySimulation('none');
 
       // Fixed 3 columns layout

app/src/pages/index.astro

@@ -7,7 +7,7 @@ import ThemeToggle from '../components/ThemeToggle.astro';
 import SeoHead from '../components/SeoHead.astro';
 import ogDefault from '../assets/images/visual-vocabulary-poster.png';
 import 'katex/dist/katex.min.css';
-import '../styles/global.scss';
+import '../styles/global.css';
 const docTitle = articleFM?.title ?? 'Untitled article';
 // Allow explicit line breaks in the title via "\n" or YAML newlines
 const docTitleHtml = (articleFM?.title ?? 'Untitled article')

app/src/styles/{_base.scss → _base.css}

@@ -1,16 +1,16 @@
-// ============================================================================
-// Base / Reset
-// ============================================================================
+/* ============================================================================ */
+/* Base / Reset */
+/* ============================================================================ */
 html { box-sizing: border-box; }
 *, *::before, *::after { box-sizing: inherit; }
 body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, Apple Color Emoji, Segoe UI Emoji; color: var(--text-color); }
-audio { display: block; }
+audio { display: block; width: 100%; }
 /* Avoid constraining <main> inside grid; scope container sizing elsewhere if needed */
 /* main { max-width: 980px; margin: 24px auto; padding: 16px; } */
 
-// ============================================================================
-// Typography (inspired by Distill)
-// ============================================================================
+/* ============================================================================ */
+/* Typography (inspired by Distill) */
+/* ============================================================================ */
 html { font-size: 14px; line-height: 1.6; }
 @media (min-width: 768px) { html { font-size: 16px; } }
 @media (min-width: 1024px) { html { font-size: 17px; } }
@@ -42,16 +42,16 @@ html { font-size: 14px; line-height: 1.6; }
   margin: var(--spacing-8) 0 var(--spacing-4);
 }
 
-.content-grid main a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--link-underline); }
-.content-grid main a:hover { border-bottom: 1px solid var(--link-underline-hover); }
+.content-grid main a { color: var(--primary); text-decoration: none; border-bottom: 1px solid var(--link-underline); }
+.content-grid main a:hover { color: var(--primary-hover); border-bottom: 1px solid var(--link-underline-hover); }
 
 /* Do not underline heading links inside the article (not the TOC) */
 .content-grid main h2 a,
 .content-grid main h3 a,
-.content-grid main h4 a { border-bottom: none; text-decoration: none; }
+.content-grid main h4 a { color: inherit; border-bottom: none; text-decoration: none; }
 .content-grid main h2 a:hover,
 .content-grid main h3 a:hover,
-.content-grid main h4 a:hover { border-bottom: none; text-decoration: none; }
+.content-grid main h4 a:hover { color: inherit; border-bottom: none; text-decoration: none; }
 
 .content-grid main ul,
 .content-grid main ol { padding-left: 24px; margin: 0 0 var(--spacing-3); }
@@ -119,48 +119,35 @@ html { font-size: 14px; line-height: 1.6; }
   z-index: 1;
 }
 
-/* JS fallback chip */
-.content-grid main pre.has-lang-chip { position: relative; padding-top: 22px; }
-.content-grid main pre .code-lang-chip {
-  position: absolute;
-  top: 0px; right: 0px;
-  font-size: 10px; line-height: 1;
-  color: rgba(255,255,255,.5);
-  background: rgba(255,255,255,.1);
-  border: none;
-  border-radius: 0px; padding: 6px 6px 4px 4px; pointer-events: none; z-index: 1;
-}
-
 .content-grid main table { border-collapse: collapse; width: 100%; margin: 0 0 var(--spacing-4); }
 .content-grid main th, .content-grid main td { border-bottom: 1px solid var(--border-color); padding: 6px 8px; text-align: left; font-size: 15px; }
 .content-grid main thead th { border-bottom: 1px solid var(--border-color); }
 
 .content-grid main hr { border: none; border-bottom: 1px solid var(--border-color); margin: var(--spacing-5) 0; }
 
+/*
+.code-block {
+  background: rgba(120, 120, 120, 0.5);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  padding: var(--spacing-3);
+  font-size: 14px;
+  overflow: auto;
+}
+*/
 
-// .code-block {
-//   background: rgba(120, 120, 120, 0.5);
-//   border: 1px solid var(--border-color);
-//   border-radius: 6px;
-//   padding: var(--spacing-3);
-//   font-size: 14px;
-//   overflow: auto;
-// }
-
-// ============================================================================
-// Media / Figures
-// ============================================================================
-:where(picture, img) {
-  max-width: 100%;
+/* ============================================================================ */
+/* Media / Figures */
+/* ============================================================================ */
+img,
+picture {
   width: 100%;
+  max-width: 100%;
   height: auto;
   display: block;
 }
 
-figure { margin: 16px 0; }
-figcaption { color: var(--muted-color); font-size: 12px; }
-
-// Inline feature tags
+/* Inline feature tags */
 .tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }
 .tag {
   display: inline-flex;
@@ -177,47 +164,52 @@ figcaption { color: var(--muted-color); font-size: 12px; }
 [data-theme="dark"] .tag { background: #1a1f27; border-color: rgba(255,255,255,.15); }
 
 
-// ============================================================================
-// Figures, captions & image credits
-// ============================================================================
+
+/* ============================================================================ */
+/* Figures, captions & image credits */
+/* ============================================================================ */
 figure { margin: 12px 0; }
-figcaption { text-align: center; font-size: 0.9rem; color: var(--muted-color); margin-top: 6px; }
+figcaption { text-align: left; font-size: 0.9rem; color: var(--muted-color); margin-top: 6px; }
 .image-credit { display: block; margin-top: 4px; font-size: 12px; color: var(--muted-color); }
 .image-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
 
-// ============================================================================
-// Buttons (minimal, clean)
-// ============================================================================
-.meta .meta-container-cell button {
+/* ============================================================================ */
+/* Buttons (minimal, clean) */
+/* ============================================================================ */
+button, .button {
   appearance: none;
-  background: var(--surface-bg);
-  color: var(--text-color);
-  border: 1px solid var(--border-color);
+  background: linear-gradient(15deg, var(--primary) 0%, var(--primary-hover) 35%);
+  color: white!important;
+  border: 1px solid transparent;
   border-radius: 6px;
   padding: 8px 12px;
   font-size: 14px;
   line-height: 1;
   cursor: pointer;
+  display: inline-block;
   transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .02s ease;
 }
-.meta .meta-container-cell button:hover {
-  background: var(--code-bg);
+button:hover, .button:hover {
+  filter: brightness(96%);
 }
-.meta .meta-container-cell button:active {
+button:active, .button:active {
   transform: translateY(1px);
 }
-.meta .meta-container-cell button:focus-visible {
+button:focus-visible, .button:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px var(--link-underline);
 }
-.meta .meta-container-cell button:disabled {
+button:disabled, .button:disabled {
   opacity: .6;
   cursor: not-allowed;
 }
 
-// ============================================================================
-// Print styles
-// =========================================================================
+.button-group .button {
+  margin: 5px;
+}
+
+/* ============================================================================ */
+/* Print styles */
+/* ========================================================================= */
 @media print {
   html, body { background: #fff; }
   /* Margins handled by Playwright; avoid extra global margins */
@@ -248,3 +240,9 @@ figcaption { text-align: center; font-size: 0.9rem; color: var(--muted-color); m
     --link-underline-hover: rgba(0,0,0,.4);
   }
 }
+
+.muted {
+  color: var(--muted-color);
+}
+
+

app/src/styles/{_layout.scss → _layout.css}

@@ -1,18 +1,18 @@
-// ============================================================================
-// Layout – 3-column grid (TOC / Article / Aside)
-// ============================================================================
+/* ============================================================================ */
+/* Layout – 3-column grid (TOC / Article / Aside) */
+/* ============================================================================ */
 .content-grid { max-width: 1280px; margin: 0 auto; padding: 0 16px; margin-top: 40px; display: grid; grid-template-columns: 220px minmax(0, 680px) 260px; gap: 32px; align-items: start; }
 .content-grid > main { max-width: 100%; margin: 0; padding: 0; }
 
-// TOC (left column)
+/* TOC (left column) */
 .toc { position: sticky; top: 24px; }
 .toc nav { border-left: 1px solid var(--border-color); padding-left: 16px; font-size: 13px; }
 .toc .title { font-weight: 600; font-size: 14px; margin-bottom: 8px; }
 
-// Hide in-article TOC (duplicated by sticky aside)
+/* Hide in-article TOC (duplicated by sticky aside) */
 main > nav:first-of-type { display: none; }
 
-// TOC look & feel
+/* TOC look & feel */
 .toc nav ul { margin: 0 0 6px; padding-left: 1em; }
 .toc nav li { list-style: none; margin: .25em 0; }
 .toc nav a { color: var(--text-color); text-decoration: none; border-bottom: none; }
@@ -20,7 +20,7 @@ main > nav:first-of-type { display: none; }
 .toc nav a:hover { text-decoration: underline solid var(--muted-color); }
 .toc nav a.active { text-decoration: underline; }
 
-// Mobile TOC accordion
+/* Mobile TOC accordion */
 .toc-mobile { display: none; margin: 8px 0 16px; }
 .toc-mobile > summary { cursor: pointer; list-style: none; padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-color); font-weight: 600; }
 .toc-mobile[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
@@ -32,11 +32,11 @@ main > nav:first-of-type { display: none; }
 .toc-mobile nav a:hover { text-decoration: underline solid var(--muted-color); }
 .toc-mobile nav a.active { text-decoration: underline; }
 
-// Right aside (notes)
+/* Right aside (notes) */
 .right-aside { position: sticky; top: 24px; }
 .right-aside .aside-card { background: var(--surface-bg); border: 1px solid var(--border-color); border-radius: 8px; padding: 10px; margin-bottom: 10px; font-size: 0.9rem; color: var(--text-color); }
 
-// Responsive – collapse to single column
+/* Responsive – collapse to single column */
 @media (max-width: 1100px) {
   .content-grid { grid-template-columns: 1fr; }
   .toc { position: static; display: none; }
@@ -55,7 +55,7 @@ main > nav:first-of-type { display: none; }
   right: -260px; /* push into the right grid column (width 260 + gap 32) */
   width: 260px;
   border-radius: 8px;
-  padding: 0 10px;
+  padding: 0 30px;
   font-size: 0.9rem;
   color: var(--muted-color);
 }
@@ -68,18 +68,18 @@ main > nav:first-of-type { display: none; }
 }
 
 
-// ============================================================================
-// Width helpers – slightly wider than main column, and full-bleed to viewport
-// ----------------------------------------------------------------------------
-// Usage in MDX:
-// <div className="wide"> ... </div>
-// <div className="full-bleed"> ... </div>
-// These center the content relative to the viewport while keeping it responsive.
-//
-// Notes:
-// - These helpers work inside the main article column; they break out visually
-//   to be wider or fully span the viewport. On small screens, they fall back to 100%.
-// - Adjust the target width in .wide if desired.
+/* ============================================================================ */
+/* Width helpers – slightly wider than main column, and full-bleed to viewport */
+/* ---------------------------------------------------------------------------- */
+/* Usage in MDX: */
+/* <div className="wide"> ... </div> */
+/* <div className="full-bleed"> ... </div> */
+/* These center the content relative to the viewport while keeping it responsive. */
+/* */
+/* Notes: */
+/* - These helpers work inside the main article column; they break out visually */
+/*   to be wider or fully span the viewport. On small screens, they fall back to 100%. */
+/* - Adjust the target width in .wide if desired. */
 .wide,
 .full-bleed { box-sizing: border-box; }
 
@@ -106,3 +106,5 @@ main > nav:first-of-type { display: none; }
   }
 }
 
+
+

app/src/styles/{_variables.scss → _variables.css}

@@ -1,12 +1,17 @@
-// ============================================================================
-// Theme Variables (inspired by Distill)
-// ============================================================================
+/* ============================================================================ */
+/* Theme Variables (inspired by Distill) */
+/* ============================================================================ */
 :root {
-  --distill-gray: rgb(107, 114, 128);
-  --distill-gray-light: rgb(185, 185, 185);
-  --distill-gray-lighter: rgb(228, 228, 228);
-  --distill-gray-lightest: rgb(245, 245, 245);
-  --distill-blue: #007BFF;
+  /* Neutral palette */
+  --neutral-600: rgb(107, 114, 128);
+  --neutral-400: rgb(185, 185, 185);
+  --neutral-300: rgb(228, 228, 228);
+  --neutral-200: rgb(245, 245, 245);
+
+  /* Primary brand color */
+  --primary: rgb(232, 137, 171);
+  --primary-hover: rgb(212, 126, 156);
+  --on-primary: #ffffff;
 
   --text-color: rgba(0,0,0,.85);
   --muted-color: rgba(0,0,0,.6);
@@ -15,8 +20,8 @@
   /* Light surfaces & links */
   --surface-bg: #fafafa;
   --code-bg: #f6f8fa;
-  --link-underline: rgba(0,0,0,.4);
-  --link-underline-hover: rgba(0,0,0,.8);
+  --link-underline: var(--primary); /* based on --primary */
+  --link-underline-hover: var(--primary-hover);
 
   --spacing-1: 8px;
   --spacing-2: 12px;
@@ -29,17 +34,21 @@
   --spacing-9: 64px;
   --spacing-10: 72px;
 }
-// Theme tokens for dark mode
+/* Theme tokens for dark mode */
 [data-theme="dark"] {
   --text-color: rgba(255,255,255,.9);
   --muted-color: rgba(255,255,255,.7);
   --border-color: rgba(255,255,255,.15);
   --surface-bg: #12151b;
   --code-bg: #12151b;
-  --link-underline: rgba(255,255,255,.5);
-  --link-underline-hover: rgba(255,255,255,.9);
+  /* Primary in dark mode */
+  --primary: rgb(232, 137, 171);
+  --primary-hover: rgb(212, 126, 156);
+  --on-primary: #0f1115;
+
   color-scheme: dark;
   background: #0f1115;
 }
 
 
+

app/src/styles/components/{_code.scss → _code.css}

@@ -1,17 +1,31 @@
+code {
+  font-size: 14px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  background-color: var(--code-bg);
+  padding: 0.2em 0.4em;
+  border-radius: 0.3em;
+  border: 1px solid var(--border-color);
+  color: var(--text-color);
+  font-weight: 400;
+  line-height: 1.5;
+}
 
 /* Sync Shiki variables with current theme */
 /* Standard wrapper look for code blocks */
-.astro-code { border: 1px solid var(--border-color); border-radius: 6px; padding: var(--spacing-3); padding-left: calc(var(--spacing-3) + 6px); font-size: 14px; }
+.astro-code { border: 1px solid var(--border-color); border-radius: 6px; padding: var(--spacing-3); font-size: 14px; --code-gutter-width: 2.5em; }
 
 /* Prevent code blocks from breaking layout on small screens */
 .astro-code { overflow-x: auto; width: 100%; max-width: 100%; box-sizing: border-box; -webkit-overflow-scrolling: touch; }
-section.content-grid pre { overflow-x: auto; width: 100%; max-width: 100%; box-sizing: border-box; -webkit-overflow-scrolling: touch; }
+section.content-grid pre { overflow-x: auto; width: 100%; max-width: 100%; box-sizing: border-box; -webkit-overflow-scrolling: touch; padding: var(--spacing-3); }
 section.content-grid pre code { display: inline-block; min-width: 100%; }
 
 /* Wrap long lines on mobile to avoid overflow (URLs, etc.) */
-.astro-code,
-section.content-grid pre { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
-section.content-grid pre code { white-space: pre-wrap; display: block; min-width: 0; }
+/* Wrap long lines only on small screens to prevent layout overflow */
+@media (max-width: 1100px) {
+  .astro-code,
+  section.content-grid pre { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
+  section.content-grid pre code { white-space: pre-wrap; display: block; min-width: 0; }
+}
 
 html[data-theme='light'] .astro-code { background-color: var(--code-bg); }
 
@@ -27,3 +41,25 @@ html[data-theme='light'] .astro-code {
   --shiki-foreground: #24292f;
   --shiki-background: #ffffff;
 }
+
+/* Line numbers for Shiki-rendered code blocks */
+.astro-code code { counter-reset: astro-code-line; display: block; background: none; border: none; }
+.astro-code .line { display: inline-block; position: relative; padding-left: calc(var(--code-gutter-width) + var(--spacing-3)); min-height: 1.25em; }
+.astro-code .line::before { counter-increment: astro-code-line; content: counter(astro-code-line); position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--code-gutter-width)); text-align: right; color: var(--muted-color); opacity: .75; user-select: none; padding-right: var(--spacing-3); border-right: 1px solid var(--border-color); }
+.astro-code .line:empty::after { content: "\00a0"; }
+/* Hide trailing empty line added by parsers */
+.astro-code code > .line:last-child:empty { display: none; }
+
+/* JS fallback chip */
+.astro-code.has-lang-chip { position: relative; padding-top: 22px; }
+.astro-code .code-lang-chip {
+  position: absolute;
+  top: 0px; right: 0px;
+  font-size: 10px; line-height: 1;
+  color: rgba(255,255,255,.5);
+  background: rgba(255,255,255,.1);
+  border: none;
+  border-radius: 0px; padding: 6px 6px 4px 4px; pointer-events: none; z-index: 1;
+}
+
+

app/src/styles/components/{_footer.scss → _footer.css}

@@ -1,7 +1,7 @@
 .distill-footer { contain: layout style; font-size: 0.8em; line-height: 1.7em; margin-top: 60px; margin-bottom: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.5); }
 .footer-inner { max-width: 1280px; margin: 0 auto; padding: 60px 16px 48px; display: grid; grid-template-columns: 220px minmax(0, 680px) 260px; gap: 32px; align-items: start; }
 
-// Use the parent grid (3 columns like .content-grid)
+/* Use the parent grid (3 columns like .content-grid) */
 .citation-block,
 .references-block { display: contents; }
 .citation-block > h3,
@@ -19,7 +19,7 @@
   margin-top:0;
 }
 
-// Distill-like appendix citation styling
+/* Distill-like appendix citation styling */
 .citation {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   font-size: 11px;
@@ -43,7 +43,7 @@
 
 .references-block h3 { margin: 0; }
 
-// Distill-like list styling for references/footnotes
+/* Distill-like list styling for references/footnotes */
 .references-block ol { padding: 0 0 0 15px; }
 @media (min-width: 768px) { .references-block ol { padding: 0 0 0 30px; margin-left: -30px; } }
 .references-block li { margin-bottom: 1em; }
@@ -52,3 +52,5 @@
 @media (max-width: 1100px) {
   .footer-inner { display: block; padding: 40px 16px; }
 }
+
+

app/src/styles/components/_poltly.css

@@ -0,0 +1,45 @@
+/* ============================================================================ */
+/* Plotly – fragments & controls */
+/* ============================================================================ */
+.plot-card { background: var(--code-bg); border: 1px solid var(--border-color); border-radius: 10px; padding: 8px; margin: 8px 0; }
+.plot-card svg text { fill: var(--text-color) !important; }
+.plot-card label { color: var(--text-color) !important; }
+.plotly-graph-div { width: 100% !important; 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); cursor: pointer; }
+.plotly_slider > input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--primary); cursor: pointer; }
+.plotly_slider > span { font-size: 14px; line-height: 1.6em; min-width: 16px; }
+
+/* ---------------------------------------------------------------------------- */
+/* Dark mode overrides for Plotly readability */
+/* ---------------------------------------------------------------------------- */
+[data-theme="dark"] .plot-card .xaxislayer-above text,
+[data-theme="dark"] .plot-card .yaxislayer-above text,
+[data-theme="dark"] .plot-card .infolayer text,
+[data-theme="dark"] .plot-card .legend text,
+[data-theme="dark"] .plot-card .annotation text,
+[data-theme="dark"] .plot-card .colorbar text,
+[data-theme="dark"] .plot-card .hoverlayer text { fill: #fff !important; }
+
+[data-theme="dark"] .plot-card .xaxislayer-above path,
+[data-theme="dark"] .plot-card .yaxislayer-above path,
+[data-theme="dark"] .plot-card .xlines-above,
+[data-theme="dark"] .plot-card .ylines-above { stroke: rgba(255,255,255,.35) !important; }
+
+[data-theme="dark"] .plot-card .gridlayer path { stroke: rgba(255,255,255,.15) !important; }
+
+/* Legend and hover backgrounds */
+[data-theme="dark"] .plot-card .legend rect.bg { fill: rgba(0,0,0,.25) !important; stroke: rgba(255,255,255,.2) !important; }
+[data-theme="dark"] .plot-card .hoverlayer .bg { fill: rgba(0,0,0,.8) !important; stroke: rgba(255,255,255,.2) !important; }
+
+/* Colorbar background (keep gradient intact) */
+[data-theme="dark"] .plot-card .colorbar .cbbg { fill: rgba(0,0,0,.25) !important; stroke: rgba(255,255,255,.2) !important; }
+
+

app/src/styles/{global.scss → global.css}

@@ -1,8 +1,9 @@
-@use "./variables" as *;
-@use "./base" as *;
-@use "./layout" as *;
-@use "./components/footer" as *;
-@use "./components/code" as *;
+@import './_variables.css';
+@import './_base.css';
+@import './_layout.css';
+@import './components/_footer.css';
+@import './components/_code.css';
+@import './components/_poltly.css';
 
 /* Dark-mode form tweak */
 [data-theme="dark"] .plotly_input_container > select { background-color: #1a1f27; border-color: var(--border-color); color: var(--text-color); }
@@ -19,10 +20,9 @@
 img[data-zoomable] { cursor: zoom-in; }
 .medium-zoom--opened img[data-zoomable] { cursor: zoom-out; }
 
-
-// ============================================================================
-// Hero (full-bleed)
-// ============================================================================
+/* ============================================================================ */
+/* Hero (full-bleed) */
+/* ============================================================================ */
 .hero { width: 100%; padding: 48px 16px 16px; text-align: center; }
 .hero-title { font-size: clamp(28px, 4vw, 48px); font-weight: 800; line-height: 1.1; margin: 0 0 8px; 
 
@@ -31,9 +31,9 @@ img[data-zoomable] { cursor: zoom-in; }
 .hero-banner { max-width: 980px; margin: 0 auto; }
 .hero-desc { color: var(--muted-color); font-style: italic; margin: 0 0 16px 0; }
 
-// ============================================================================
-// Meta (byline-like header)
-// ============================================================================
+/* ============================================================================ */
+/* Meta (byline-like header) */
+/* ============================================================================ */
   
 .meta {
     border-top: 1px solid var(--border-color);
@@ -65,30 +65,13 @@ img[data-zoomable] { cursor: zoom-in; }
   }
   .meta-container-cell p { margin: 0; }
 
-// ============================================================================
-// Plotly – fragments & controls
-// ============================================================================
-.plot-card { background: var(--code-bg); border: 1px solid var(--border-color); border-radius: 10px; padding: 8px; margin: 8px 0; }
-.plot-card svg text { fill: var(--text-color) !important; }
-.plotly-graph-div { width: 100% !important; 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(--distill-gray-lightest); outline: none; border: 1px solid var(--distill-gray-lighter); }
-.plotly_slider { display: flex; align-items: center; gap: 10px; }
-.plotly_slider > input[type="range"] { -webkit-appearance: none; appearance: none; height: 2px; background: var(--distill-gray-light); 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(--distill-blue); cursor: pointer; }
-.plotly_slider > input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--distill-blue); cursor: pointer; }
-.plotly_slider > span { font-size: 14px; line-height: 1.6em; min-width: 16px; }
-
-// ============================================================================
-// Theme Toggle button (moved from component)
-// ============================================================================
+/* ============================================================================ */
+/* Theme Toggle button (moved from component) */
+/* ============================================================================ */
 #theme-toggle { display: inline-flex; align-items: center; gap: 8px; border: none; background: transparent; padding: 6px 10px; border-radius: 8px; cursor: pointer; margin: 12px 16px; }
 #theme-toggle .icon.dark { display: none; }
 [data-theme="dark"] #theme-toggle .icon.light { display: none; }
 [data-theme="dark"] #theme-toggle .icon.dark { display: inline; }
 [data-theme="dark"] #theme-toggle .icon { filter: invert(1) brightness(1.2); }
 
+

fragments/d3js/banner.html

@@ -93,17 +93,6 @@
         .attr('width', '100%')
         .style('display', 'block');
 
-      // Subtle background gradient
-      const defs = svg.append('defs');
-      const grad = defs.append('radialGradient')
-        .attr('id', 'spaceBg')
-        .attr('cx', '50%')
-        .attr('cy', '50%')
-        .attr('r', '65%');
-      grad.append('stop').attr('offset', '0%').attr('stop-color', 'rgba(255,255,255,0.06)');
-      grad.append('stop').attr('offset', '60%').attr('stop-color', 'rgba(160,120,200,0.05)');
-      grad.append('stop').attr('offset', '100%').attr('stop-color', 'rgba(0,0,0,0)');
-
       const render = () => {
         const width = container.clientWidth || 800;
         const height = Math.max(260, Math.round(width / 3)); // keep ~3:1, min height
@@ -132,6 +121,7 @@
         // Ensure container can host an absolute tooltip
         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';
@@ -141,22 +131,28 @@
             left: '0px',
             transform: 'translate(-9999px, -9999px)',
             pointerEvents: 'none',
-            padding: '6px 8px',
-            borderRadius: '6px',
+            padding: '8px 10px',
+            borderRadius: '8px',
             fontSize: '12px',
-            lineHeight: '1.3',
+            lineHeight: '1.35',
             border: '1px solid var(--border-color)',
             background: 'var(--surface-bg)',
             color: 'var(--text-color)',
-            boxShadow: '0 2px 10px rgba(0,0,0,.15)',
+            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;
         }
 
         // Final filter: remove small dots very close to the galaxy center (after placement)
-        const centerHoleRadius = 0.08; // elliptical radius threshold
+        const centerHoleRadius = 0.48; // elliptical radius threshold
         const smallSizeThreshold = 7.5; // same notion as Python size cut
         const rTotal = idx.map((i) => Math.sqrt(((X[i] - cx) / a) ** 2 + ((Y[i] - cy) / b) ** 2));
         const idxFiltered = idx.filter((i, k) => !(rTotal[k] <= centerHoleRadius && sizesPx[i] < smallSizeThreshold));
@@ -171,15 +167,18 @@
             .attr('fill-opacity', 0.9)
             .attr('stroke', strokeColor)
             .attr('stroke-width', 0.4)
-            .on('mouseenter', (ev, i) => {
+            .on('mouseenter', function(ev, i) {
+              d3.select(this).raise()
+                .attr('stroke', isDark ? 'rgba(255,255,255,0.85)' : 'rgba(0,0,0,0.85)')
+                .attr('stroke-width', 1.2);
               const r = Math.sqrt(((X[i] - cx) / a) ** 2 + ((Y[i] - cy) / b) ** 2);
               const type = i < lenSpiral ? 'spiral' : 'bulge';
               const arm = i < lenSpiral ? (armIndices[i] + 1) : null;
-              tip.innerHTML = `<div><strong>${labelOf(i)}</strong></div>` +
-                `<div>Type: ${type}${arm ? ` (arm ${arm})` : ''}</div>` +
-                `<div>Size: ${sizesPx[i].toFixed(1)} px</div>` +
-                `<div>X: ${X[i].toFixed(2)} · Y: ${Y[i].toFixed(2)}</div>` +
-                `<div>r: ${r.toFixed(3)} · z: ${Zraw[i].toFixed(3)}</div>`;
+              tipInner.innerHTML = `<div><strong>${labelOf(i)}</strong></div>` +
+                `<div><strong>Type</strong> ${type}${arm ? ` (arm ${arm})` : ''}</div>` +
+                `<div><strong>Size</strong> ${sizesPx[i].toFixed(1)} px</div>` +
+                `<div><strong>X</strong> ${X[i].toFixed(2)} · <strong>Y</strong> ${Y[i].toFixed(2)}</div>` +
+                `<div><strong>r</strong> ${r.toFixed(3)} · <strong>z</strong> ${Zraw[i].toFixed(3)}</div>`;
               tip.style.opacity = '1';
             })
             .on('mousemove', (ev, i) => {
@@ -187,9 +186,10 @@
               const offsetX = 10, offsetY = 12;
               tip.style.transform = `translate(${Math.round(mx + offsetX)}px, ${Math.round(my + offsetY)}px)`;
             })
-            .on('mouseleave', () => {
+            .on('mouseleave', function() {
               tip.style.opacity = '0';
               tip.style.transform = 'translate(-9999px, -9999px)';
+              d3.select(this).attr('stroke', strokeColor).attr('stroke-width', 0.4);
             }),
           (update) => update
             .attr('cx', (i) => xScale(X[i]))
@@ -199,15 +199,18 @@
             .attr('fill-opacity', 0.9)
             .attr('stroke', strokeColor)
             .attr('stroke-width', 0.4)
-            .on('mouseenter', (ev, i) => {
+            .on('mouseenter', function(ev, i) {
+              d3.select(this).raise()
+                .attr('stroke', isDark ? 'rgba(255,255,255,0.85)' : 'rgba(0,0,0,0.85)')
+                .attr('stroke-width', 1.2);
               const r = Math.sqrt(((X[i] - cx) / a) ** 2 + ((Y[i] - cy) / b) ** 2);
               const type = i < lenSpiral ? 'spiral' : 'bulge';
               const arm = i < lenSpiral ? (armIndices[i] + 1) : null;
-              tip.innerHTML = `<div><strong>${labelOf(i)}</strong></div>` +
-                `<div>Type: ${type}${arm ? ` (arm ${arm})` : ''}</div>` +
-                `<div>Size: ${sizesPx[i].toFixed(1)} px</div>` +
-                `<div>X: ${X[i].toFixed(2)} · Y: ${Y[i].toFixed(2)}</div>` +
-                `<div>r: ${r.toFixed(3)} · z: ${Zraw[i].toFixed(3)}</div>`;
+              tipInner.innerHTML = `<div><strong>${labelOf(i)}</strong></div>` +
+                `<div><strong>Type</strong> ${type}${arm ? ` (arm ${arm})` : ''}</div>` +
+                `<div><strong>Size</strong> ${sizesPx[i].toFixed(1)} px</div>` +
+                `<div><strong>X</strong> ${X[i].toFixed(2)} · <strong>Y</strong> ${Y[i].toFixed(2)}</div>` +
+                `<div><strong>r</strong> ${r.toFixed(3)} · <strong>z</strong> ${Zraw[i].toFixed(3)}</div>`;
               tip.style.opacity = '1';
             })
             .on('mousemove', (ev, i) => {
@@ -215,9 +218,10 @@
               const offsetX = 10, offsetY = 12;
               tip.style.transform = `translate(${Math.round(mx + offsetX)}px, ${Math.round(my + offsetY)}px)`;
             })
-            .on('mouseleave', () => {
+            .on('mouseleave', function() {
               tip.style.opacity = '0';
               tip.style.transform = 'translate(-9999px, -9999px)';
+              d3.select(this).attr('stroke', strokeColor).attr('stroke-width', 0.4);
             })
         );
       };

fragments/d3js/line.html

@@ -0,0 +1,356 @@
+<div class="d3-line" style="width:100%;margin:10px 0;"></div>
+<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 mount = document.currentScript ? document.currentScript.previousElementSibling : null;
+      const container = (mount && mount.querySelector && mount.querySelector('.d3-line')) || document.querySelector('.d3-line');
+      if (!container) return;
+      if (container.dataset) {
+        if (container.dataset.mounted === 'true') return;
+        container.dataset.mounted = 'true';
+      }
+
+      // Dataset params matching the Plotly version
+      const datasets = [
+        { name: 'CIFAR-10',    base: { ymin:0.10, ymax:0.90, k:10.0, x0:0.55 }, aug: { ymin:0.15, ymax:0.96, k:12.0, x0:0.40 }, target: 0.97 },
+        { name: 'CIFAR-100',   base: { ymin:0.05, ymax:0.70, k: 9.5, x0:0.60 }, aug: { ymin:0.08, ymax:0.80, k:11.0, x0:0.45 }, target: 0.85 },
+        { name: 'ImageNet-1K', base: { ymin:0.02, ymax:0.68, k: 8.5, x0:0.65 }, aug: { ymin:0.04, ymax:0.75, k: 9.5, x0:0.50 }, target: 0.82 },
+      ];
+
+      // Controls UI
+      const controls = document.createElement('div');
+      controls.className = 'd3-line__controls';
+      Object.assign(controls.style, {
+        marginTop: '12px',
+        display: 'flex',
+        gap: '16px',
+        alignItems: 'center'
+      });
+
+      const labelDs = document.createElement('label');
+      Object.assign(labelDs.style, {
+        fontSize: '12px', color: 'rgba(0,0,0,.65)', display: 'flex', alignItems: 'center', gap: '6px', whiteSpace: 'nowrap', padding: '6px 10px'
+      });
+      labelDs.textContent = 'Dataset';
+      const selectDs = document.createElement('select');
+      Object.assign(selectDs.style, { fontSize: '12px', padding: '2px 6px' });
+      datasets.forEach((d, i) => {
+        const o = document.createElement('option');
+        o.value = String(i);
+        o.textContent = d.name;
+        selectDs.appendChild(o);
+      });
+      labelDs.appendChild(selectDs);
+
+      const labelAlpha = document.createElement('label');
+      Object.assign(labelAlpha.style, {
+        fontSize: '12px', color: 'rgba(0,0,0,.65)', display: 'flex', alignItems: 'center', gap: '10px', flex: '1', padding: '6px 10px'
+      });
+      labelAlpha.appendChild(document.createTextNode('Augmentation α'));
+      const slider = document.createElement('input');
+      slider.type = 'range'; slider.min = '0'; slider.max = '1'; slider.step = '0.01'; slider.value = '0.70';
+      Object.assign(slider.style, { flex: '1' });
+      const alphaVal = document.createElement('span'); alphaVal.className = 'alpha-value'; alphaVal.textContent = slider.value;
+      labelAlpha.appendChild(slider);
+      labelAlpha.appendChild(alphaVal);
+
+      controls.appendChild(labelDs);
+      controls.appendChild(labelAlpha);
+
+      // Create SVG
+      const svg = d3.select(container).append('svg')
+        .attr('width', '100%')
+        .style('display', 'block');
+
+      // Groups
+      const gRoot = svg.append('g');
+      const gGrid = gRoot.append('g').attr('class', 'grid');
+      const gAxes = gRoot.append('g').attr('class', 'axes');
+      const gLines = gRoot.append('g').attr('class', 'lines');
+      const gHover = gRoot.append('g').attr('class', 'hover');
+      const gLegend = gRoot.append('foreignObject').attr('class', 'legend');
+
+      // Tooltip
+      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;
+      }
+
+      // Colors
+      const colorBase = '#64748b';     // slate-500
+      const colorImproved = '#2563eb'; // blue-600
+      const colorTarget = '#4b5563';   // gray-600
+      const legendBgLight = 'rgba(255,255,255,0.85)';
+      const legendBgDark = 'rgba(17,17,23,0.85)';
+
+      // Data and helpers
+      const N = 240;
+      const xs = Array.from({ length: N }, (_, i) => i / (N - 1));
+      const logistic = (x, { ymin, ymax, k, x0 }) => ymin + (ymax - ymin) / (1 + Math.exp(-k * (x - x0)));
+      const blend = (l, e, a) => (1 - a) * l + a * e;
+
+      let datasetIndex = 0;
+      let alpha = parseFloat(slider.value) || 0.7;
+
+      let yBase = [];
+      let yAug = [];
+      let yImp = [];
+      let yTgt = [];
+
+      function computeCurves() {
+        const d = datasets[datasetIndex];
+        yBase = xs.map((x) => logistic(x, d.base));
+        yAug  = xs.map((x) => logistic(x, d.aug));
+        yTgt  = xs.map(() => d.target);
+        yImp  = yBase.map((v, i) => blend(v, yAug[i], alpha));
+      }
+
+      // Scales and layout
+      let width = 800, height = 360;
+      let margin = { top: 16, right: 28, bottom: 40, left: 44 };
+      let xScale = d3.scaleLinear();
+      let yScale = d3.scaleLinear();
+
+      // Paths
+      const lineGen = d3.line()
+        .curve(d3.curveCatmullRom.alpha(0.6))
+        .x((d, i) => xScale(xs[i]))
+        .y((d) => yScale(d));
+
+      const pathBase = gLines.append('path').attr('fill', 'none').attr('stroke', colorBase).attr('stroke-width', 2);
+      const pathImp  = gLines.append('path').attr('fill', 'none').attr('stroke', colorImproved).attr('stroke-width', 2);
+      const pathTgt  = gLines.append('path').attr('fill', 'none').attr('stroke', colorTarget).attr('stroke-width', 2).attr('stroke-dasharray', '6,6');
+
+      // Hover elements
+      const hoverLine = gHover.append('line').attr('stroke-width', 1);
+      const hoverDotB = gHover.append('circle').attr('r', 3.5).attr('fill', colorBase).attr('stroke', '#fff').attr('stroke-width', 1);
+      const hoverDotI = gHover.append('circle').attr('r', 3.5).attr('fill', colorImproved).attr('stroke', '#fff').attr('stroke-width', 1);
+      const hoverDotT = gHover.append('circle').attr('r', 3.5).attr('fill', colorTarget).attr('stroke', '#fff').attr('stroke-width', 1);
+
+      const overlay = gHover.append('rect').attr('fill', 'transparent').style('cursor', 'crosshair');
+
+      function updateScales() {
+        const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+        const axisColor = isDark ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.25)';
+        const tickColor = isDark ? 'rgba(255,255,255,0.70)' : 'rgba(0,0,0,0.55)';
+        const gridColor = isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.05)';
+
+        width = container.clientWidth || 800;
+        height = Math.max(260, Math.round(width / 3));
+        svg.attr('width', width).attr('height', height);
+
+        const innerWidth = width - margin.left - margin.right;
+        const innerHeight = height - margin.top - margin.bottom;
+        gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
+
+        xScale.domain([0, 1]).range([0, innerWidth]);
+        yScale.domain([0, 1]).range([innerHeight, 0]);
+
+        // Grid (horizontal)
+        gGrid.selectAll('*').remove();
+        const yTicks = yScale.ticks(6);
+        gGrid.selectAll('line')
+          .data(yTicks)
+          .join('line')
+          .attr('x1', 0)
+          .attr('x2', innerWidth)
+          .attr('y1', (d) => yScale(d))
+          .attr('y2', (d) => yScale(d))
+          .attr('stroke', gridColor)
+          .attr('stroke-width', 1)
+          .attr('shape-rendering', 'crispEdges');
+
+        // Axes
+        gAxes.selectAll('*').remove();
+        const xAxis = d3.axisBottom(xScale).ticks(8).tickSizeOuter(0);
+        const yAxis = d3.axisLeft(yScale).ticks(6).tickSizeOuter(0).tickFormat(d3.format('.2f'));
+        gAxes.append('g')
+          .attr('transform', `translate(0,${innerHeight})`)
+          .call(xAxis)
+          .call((g) => {
+            g.selectAll('path, line').attr('stroke', axisColor);
+            g.selectAll('text').attr('fill', tickColor).style('font-size', '12px');
+          });
+        gAxes.append('g')
+          .call(yAxis)
+          .call((g) => {
+            g.selectAll('path, line').attr('stroke', axisColor);
+            g.selectAll('text').attr('fill', tickColor).style('font-size', '12px');
+          });
+
+        // Axis labels (X and Y)
+        gAxes.append('text')
+          .attr('class', 'axis-label axis-label--x')
+          .attr('x', innerWidth)
+          .attr('y', innerHeight + 32)
+          .attr('text-anchor', 'end')
+          .style('font-size', '12px')
+          .style('fill', tickColor)
+          .text('x');
+        gAxes.append('text')
+          .attr('class', 'axis-label axis-label--y')
+          .attr('text-anchor', 'middle')
+          .attr('transform', `translate(${-36},${innerHeight/2}) rotate(-90)`) 
+          .style('font-size', '12px')
+          .style('fill', tickColor)
+          .text('y');
+
+        overlay.attr('x', 0).attr('y', 0).attr('width', innerWidth).attr('height', innerHeight);
+        hoverLine.attr('y1', 0).attr('y2', innerHeight).attr('stroke', axisColor);
+
+        // Legend inside plot (bottom-right), no background/border/shadow
+        const legendWidth = Math.min(180, Math.max(120, Math.round(innerWidth * 0.22)));
+        const legendHeight = 64;
+        gLegend
+          .attr('x', innerWidth - legendWidth)
+          .attr('y', innerHeight - legendHeight)
+          .attr('width', legendWidth)
+          .attr('height', legendHeight);
+        const legendRoot = gLegend.selectAll('div').data([0]).join('xhtml:div');
+        Object.assign(legendRoot.node().style, {
+          background: 'transparent',
+          border: 'none',
+          borderRadius: '0',
+          padding: '0',
+          fontSize: '12px',
+          lineHeight: '1.35',
+          color: 'var(--text-color)'
+        });
+        legendRoot.html(`
+          <div style="display:flex;flex-direction:column;gap:6px;">
+            <div style="display:flex;align-items:center;gap:8px;">
+              <span style="width:18px;height:3px;background:${colorBase};border-radius:2px;display:inline-block"></span>
+              <span>Baseline</span>
+            </div>
+            <div style="display:flex;align-items:center;gap:8px;">
+              <span style="width:18px;height:3px;background:${colorImproved};border-radius:2px;display:inline-block"></span>
+              <span>Improved</span>
+            </div>
+            <div style="display:flex;align-items:center;gap:8px;">
+              <span style="width:18px;height:0;border-top:2px dashed ${colorTarget};display:inline-block"></span>
+              <span>Target</span>
+            </div>
+          </div>
+        `);
+      }
+
+      function updatePaths() {
+        pathBase.transition().duration(200).attr('d', lineGen(yBase));
+        pathImp.transition().duration(200).attr('d', lineGen(yImp));
+        pathTgt.transition().duration(200).attr('d', lineGen(yTgt));
+      }
+
+      function updateAlpha(a) {
+        alpha = a;
+        alphaVal.textContent = a.toFixed(2);
+        yImp = yBase.map((v, i) => blend(v, yAug[i], alpha));
+        pathImp.transition().duration(80).attr('d', lineGen(yImp));
+      }
+
+      function applyDataset() {
+        computeCurves();
+        updatePaths();
+      }
+
+      // Hover interactions
+      function onMove(event) {
+        const [mx, my] = d3.pointer(event, overlay.node());
+        const xi = Math.max(0, Math.min(N - 1, Math.round(xScale.invert(mx) * (N - 1))));
+        const xpx = xScale(xs[xi]);
+        const yb = yBase[xi], yi = yImp[xi], yt = yTgt[xi];
+        hoverLine.attr('x1', xpx).attr('x2', xpx).style('display', null);
+        hoverDotB.attr('cx', xpx).attr('cy', yScale(yb)).style('display', null);
+        hoverDotI.attr('cx', xpx).attr('cy', yScale(yi)).style('display', null);
+        hoverDotT.attr('cx', xpx).attr('cy', yScale(yt)).style('display', null);
+
+        // Tooltip content
+        const ds = datasets[datasetIndex].name;
+        tipInner.innerHTML = `<div><strong>${ds}</strong></div>` +
+          `<div><strong>x</strong> ${xs[xi].toFixed(2)}</div>` +
+          `<div><span style="display:inline-block;width:10px;height:10px;background:${colorBase};border-radius:50%;margin-right:6px;"></span><strong>Baseline</strong> ${yb.toFixed(3)}</div>` +
+          `<div><span style="display:inline-block;width:10px;height:10px;background:${colorImproved};border-radius:50%;margin-right:6px;"></span><strong>Improved</strong> ${yi.toFixed(3)}</div>` +
+          `<div><span style="display:inline-block;width:10px;height:10px;background:${colorTarget};border-radius:50%;margin-right:6px;"></span><strong>Target</strong> ${yt.toFixed(3)}</div>`;
+        const offsetX = 12, offsetY = 12;
+        tip.style.opacity = '1';
+        tip.style.transform = `translate(${Math.round(mx + offsetX + margin.left)}px, ${Math.round(my + offsetY + margin.top)}px)`;
+      }
+
+      function onLeave() {
+        tip.style.opacity = '0';
+        tip.style.transform = 'translate(-9999px, -9999px)';
+        hoverLine.style('display', 'none');
+        hoverDotB.style('display', 'none');
+        hoverDotI.style('display', 'none');
+        hoverDotT.style('display', 'none');
+      }
+
+      overlay.on('mousemove', onMove).on('mouseleave', onLeave);
+
+      // Init + controls wiring
+      computeCurves();
+      updateScales();
+      updatePaths();
+
+      // Attach controls after SVG for consistency with Plotly fragment
+      container.appendChild(controls);
+
+      selectDs.addEventListener('change', (e) => {
+        datasetIndex = parseInt(e.target.value) || 0;
+        applyDataset();
+      });
+      slider.addEventListener('input', (e) => {
+        const a = parseFloat(e.target.value) || 0;
+        updateAlpha(a);
+      });
+
+      // Resize handling
+      const render = () => {
+        updateScales();
+        updatePaths();
+      };
+      if (window.ResizeObserver) {
+        const ro = new ResizeObserver(() => render());
+        ro.observe(container);
+      } else {
+        window.addEventListener('resize', render);
+      }
+      render();
+    };
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () => ensureD3(bootstrap), { once: true });
+    } else { ensureD3(bootstrap); }
+  })();
+</script>
+
+

fragments/plotly/banner.py

@@ -123,7 +123,7 @@ fig.update_layout(
 # fig.show()
 
 fig.write_html(
-    "../app/src/fragments/banner.html",
+    "../app/src/content/fragments/banner.html",
     include_plotlyjs=False,
     full_html=False,
     config={

fragments/plotly/bar.py

@@ -1,116 +1,173 @@
 import plotly.graph_objects as go
 import plotly.io as pio
-import os
+import numpy as np
 
 """
-Simple grouped bar chart (Baseline / Improved / Target), minimal Distill-like style.
-Responsive, no zoom/pan, clean hover (rounded tooltip corners via post_script).
+Stacked bar chart: GPU memory breakdown vs sequence length, with menus for Model Size and Recomputation.
+Responsive, no zoom/pan, clean hover; styled to match the minimal theme.
 """
 
-# Data (five categories)
-categories = ["A", "B", "C", "D", "E"]
-baseline = [0.52, 0.61, 0.67, 0.73, 0.78]
-improved = [0.58, 0.66, 0.72, 0.79, 0.86]
-target   = [0.60, 0.68, 0.75, 0.82, 0.90]
+# Axes
+seq_labels = ["1024", "2048", "4096", "8192"]
+seq_scale = np.array([1, 2, 4, 8], dtype=float)
 
-color_base = "#64748b"     # slate-500
-color_improved = "#2563eb" # blue-600
-color_target = "#4b5563"   # gray-600
+# Components and colors (aligned with the provided example)
+components = [
+    ("parameters", "rgb(78, 165, 183)"),
+    ("gradients",  "rgb(227, 138, 66)"),
+    ("optimizer",  "rgb(232, 137, 171)"),
+    ("activations", "rgb(206, 192, 250)"),
+]
 
+# Model sizes and base memory (GB) for params/grad/opt (constant vs seq), by size
+model_sizes = ["1B", "3B", "8B", "70B", "405B"]
+params_mem = {
+    "1B": 4.0,
+    "3B": 13.3,
+    "8B": 26.0,
+    "70B": 244.0,
+    "405B": 1520.0,
+}
+# Optimizer ~= 2x params; gradients ~= params (illustrative)
+
+# Activations base coefficient per size (growth ~ coeff * (seq/1024)^2)
+act_coeff = {
+    "1B": 3.6,
+    "3B": 9.3,
+    "8B": 46.2,
+    "70B": 145.7,
+    "405B": 1519.9,
+}
+
+def activations_curve(size_key: str, recompute: str) -> np.ndarray:
+    base = act_coeff[size_key] * (seq_scale ** 2)
+    if recompute == "selective":
+        return base * 0.25
+    if recompute == "full":
+        return base * (1.0/16.0)
+    return base
+
+def stack_for(size_key: str, recompute: str):
+    p = np.full_like(seq_scale, params_mem[size_key], dtype=float)
+    g = np.full_like(seq_scale, params_mem[size_key], dtype=float)
+    o = np.full_like(seq_scale, 2.0 * params_mem[size_key], dtype=float)
+    a = activations_curve(size_key, recompute)
+    return {
+        "parameters": p,
+        "gradients": g,
+        "optimizer": o,
+        "activations": a,
+    }
+
+# Precompute all combinations
+recomp_modes = ["none", "selective", "full"]
+Y = {mode: {size: stack_for(size, mode) for size in model_sizes} for mode in recomp_modes}
+
+# Build traces: 4 traces per size (20 total). Start with size index 0 visible
 fig = go.Figure()
-fig.add_bar(
-    x=categories,
-    y=baseline,
-    name="Baseline",
-    marker=dict(color=color_base),
-    offsetgroup="grp",
-    hovertemplate="<b>%{x}</b><br>%{fullData.name}: %{y:.3f}<extra></extra>",
-)
+for size in model_sizes:
+    for comp_name, color in components:
+        fig.add_bar(
+            x=seq_labels,
+            y=Y["none"][size][comp_name],
+            name=comp_name,
+            marker=dict(color=color),
+            hovertemplate="Seq len=%{x}<br>Mem=%{y:.1f}GB<br>%{data.name}<extra></extra>",
+            showlegend=True,
+            visible=(size == model_sizes[0]),
+        )
 
-fig.add_bar(
-    x=categories,
-    y=improved,
-    name="Improved",
-    marker=dict(color=color_improved),
-    offsetgroup="grp",
-    hovertemplate="<b>%{x}</b><br>%{fullData.name}: %{y:.3f}<extra></extra>",
-)
+# Compute y-axis ranges per size and recomputation
+def max_total(size: str, mode: str) -> float:
+    stacks = Y[mode][size]
+    totals = stacks["parameters"] + stacks["gradients"] + stacks["optimizer"] + stacks["activations"]
+    return float(np.max(totals))
 
-fig.add_bar(
-    x=categories,
-    y=target,
-    name="Target",
-    marker=dict(color=color_target, opacity=0.65, line=dict(color=color_target, width=1)),
-    offsetgroup="grp",
-    hovertemplate="<b>%{x}</b><br>%{fullData.name}: %{y:.3f}<extra></extra>",
-)
+layout_y_ranges = {mode: {size: 1.05 * max_total(size, mode) for size in model_sizes} for mode in recomp_modes}
 
+# Layout
 fig.update_layout(
-    barmode="group",
+    barmode="stack",
     autosize=True,
     paper_bgcolor="rgba(0,0,0,0)",
     plot_bgcolor="rgba(0,0,0,0)",
-    margin=dict(l=28, r=12, t=8, b=28),
+    margin=dict(l=40, r=28, t=20, b=40),
     hovermode="x unified",
     legend=dict(orientation="h", yanchor="bottom", y=1.02, xanchor="left", x=0),
-    xaxis=dict(
-        showgrid=False,
-        zeroline=False,
-        showline=True,
-        linecolor="rgba(0,0,0,0.25)",
-        linewidth=1,
-        ticks="outside",
-        ticklen=6,
-        tickcolor="rgba(0,0,0,0.25)",
-        tickfont=dict(size=12, color="rgba(0,0,0,0.65)"),
-        title=None,
-        automargin=True,
-        fixedrange=True,
-    ),
-    yaxis=dict(
-        showgrid=False,
-        zeroline=False,
-        showline=True,
-        linecolor="rgba(0,0,0,0.25)",
-        linewidth=1,
-        ticks="outside",
-        ticklen=6,
-        tickcolor="rgba(0,0,0,0.25)",
-        tickfont=dict(size=12, color="rgba(0,0,0,0.65)"),
-        title=None,
-        tickformat=".2f",
-        automargin=True,
-        fixedrange=True,
-    ),
+    xaxis=dict(title=dict(text="Sequence Length"), fixedrange=True),
+    yaxis=dict(title=dict(text="Memory (GB)"), fixedrange=True),
 )
 
-post_script = """
-(function(){
-  var plots = document.querySelectorAll('.js-plotly-plot');
-  plots.forEach(function(gd){
-    function round(){
-      try {
-        var root = gd && gd.parentNode ? gd.parentNode : document;
-        var rects = root.querySelectorAll('.hoverlayer .hovertext rect');
-        rects.forEach(function(r){ r.setAttribute('rx', 8); r.setAttribute('ry', 8); });
-      } catch(e) {}
-    }
-    if (gd && gd.on){
-      gd.on('plotly_hover', round);
-      gd.on('plotly_unhover', round);
-      gd.on('plotly_relayout', round);
-    }
-    setTimeout(round, 0);
-  });
-})();
-"""
+# Updatemenus: Model Size (toggle visibility)
+buttons_sizes = []
+for i, size in enumerate(model_sizes):
+    visible = [False] * (len(model_sizes) * len(components))
+    start = i * len(components)
+    for j in range(len(components)):
+        visible[start + j] = True
+    buttons_sizes.append(dict(
+        label=size,
+        method="update",
+        args=[
+            {"visible": visible},
+            {"yaxis": {"range": [0, layout_y_ranges["none"][size]]}},
+        ],
+    ))
+
+# Updatemenus: Recomputation (restyle y across all traces)
+def y_for_mode(mode: str):
+    ys = []
+    for size in model_sizes:
+        stacks = Y[mode][size]
+        for comp_name, _ in components:
+            ys.append(stacks[comp_name])
+    return ys
+
+buttons_recomp = []
+for mode, label in [("none", "None"), ("selective", "selective"), ("full", "full")]:
+    ys = y_for_mode(mode)
+    # Flatten into the format expected by Plotly for multiple traces
+    buttons_recomp.append(dict(
+        label=label,
+        method="update",
+        args=[
+            {"y": ys},
+            {"yaxis": {"range": [0, max(layout_y_ranges[mode].values())]}},
+        ],
+    ))
+
+fig.update_layout(
+    updatemenus=[
+        dict(
+            type="dropdown",
+            x=1.03, xanchor="left",
+            y=0.60, yanchor="top",
+            showactive=True,
+            active=0,
+            buttons=buttons_sizes,
+        ),
+        dict(
+            type="dropdown",
+            x=1.03, xanchor="left",
+            y=0.40, yanchor="top",
+            showactive=True,
+            active=0,
+            buttons=buttons_recomp,
+        ),
+    ],
+    annotations=[
+        dict(text="Model Size:", x=1.03, xanchor="left", xref="paper", y=0.60, yanchor="bottom", yref="paper", showarrow=False),
+        dict(text="Recomputation:", x=1.03, xanchor="left", xref="paper", y=0.40, yanchor="bottom", yref="paper", showarrow=False),
+    ],
+)
 
-fig.write_html("../app/src/fragments/bar.html", 
-               include_plotlyjs=False, 
-               full_html=False, 
+# Write fragment
+fig.write_html("../../app/src/content/fragments/bar.html",
+               include_plotlyjs=False,
+               full_html=False,
                config={
                    'displayModeBar': False,
-                   'responsive': True, 
+                   'responsive': True,
                    'scrollZoom': False,
                })
 

fragments/plotly/heatmap.py

@@ -114,7 +114,7 @@ html = pio.to_html(
     },
 )
 
-fig.write_html("../app/src/fragments/heatmap.html", 
+fig.write_html("../app/src/content/fragments/heatmap.html", 
                include_plotlyjs=False, 
                full_html=False, 
                config={

fragments/plotly/line.py

@@ -5,36 +5,56 @@ import os
 import uuid
 
 """
-Interactive line chart example (3 curves + live slider)
+Interactive line chart example (Baseline / Improved / Target) with a live slider.
 
-The slider blends each curve from linear to exponential in real time (no mouseup required).
-This fragment is safe to insert multiple times on the page (unique IDs per instance).
+Context: research-style training curves for multiple datasets (CIFAR-10, CIFAR-100, ImageNet-1K).
+The slider "Augmentation α" blends the Improved curve between the Baseline (α=0)
+and an augmented counterpart (α=1) via a simple mixing equation.
+Export remains responsive, with no zoom and no mode bar.
 """
 
 # Grid (x) and parameterization
 N = 240
 x = np.linspace(0, 1, N)
 
-# Linear baselines (increasing)
-lin1 = 0.20 + 0.60 * x
-lin2 = 0.15 + 0.70 * x
-lin3 = 0.10 + 0.80 * x
+# Logistic helper for smooth learning curves
+def logistic(xv: np.ndarray, ymin: float, ymax: float, k: float, x0: float) -> np.ndarray:
+    return ymin + (ymax - ymin) / (1.0 + np.exp(-k * (xv - x0)))
 
-# Helper: normalized exponential on [0,1]
-def exp_norm(xv: np.ndarray, k: float) -> np.ndarray:
-    return (np.exp(k * xv) - 1.0) / (np.exp(k) - 1.0)
+# Plausible dataset params (baseline vs augmented) + a constant target line
+datasets_params = [
+    {
+        "name": "CIFAR-10",
+        "base": {"ymin": 0.10, "ymax": 0.90, "k": 10.0, "x0": 0.55},
+        "aug":  {"ymin": 0.15, "ymax": 0.96, "k": 12.0, "x0": 0.40},
+        "target": 0.97,
+    },
+    {
+        "name": "CIFAR-100",
+        "base": {"ymin": 0.05, "ymax": 0.70, "k": 9.5, "x0": 0.60},
+        "aug":  {"ymin": 0.08, "ymax": 0.80, "k": 11.0, "x0": 0.45},
+        "target": 0.85,
+    },
+    {
+        "name": "ImageNet-1K",
+        "base": {"ymin": 0.02, "ymax": 0.68, "k": 8.5, "x0": 0.65},
+        "aug":  {"ymin": 0.04, "ymax": 0.75, "k": 9.5, "x0": 0.50},
+        "target": 0.82,
+    },
+]
 
-# Exponential counterparts (similar ranges)
-exp1 = 0.20 + 0.60 * exp_norm(x, 3.0)
-exp2 = 0.15 + 0.70 * exp_norm(x, 3.5)
-exp3 = 0.10 + 0.80 * exp_norm(x, 2.8)
+# Initial dataset index and alpha
+alpha0 = 0.7
+ds0 = datasets_params[0]
+base0 = logistic(x, **ds0["base"])
+aug0 = logistic(x, **ds0["aug"])
+target0 = np.full_like(x, ds0["target"], dtype=float)
 
-# Initial blend (alpha=0 ⇒ pure linear)
-alpha0 = 0.0
+# Traces: Baseline (fixed), Improved (blended by α), Target (constant goal)
 blend = lambda l, e, a: (1 - a) * l + a * e
-y1 = blend(lin1, exp1, alpha0)
-y2 = blend(lin2, exp2, alpha0)
-y3 = blend(lin3, exp3, alpha0)
+y1 = base0
+y2 = blend(base0, aug0, alpha0)
+y3 = target0
 
 color_base = "#64748b"     # slate-500
 color_improved = "#2563eb" # blue-600
@@ -79,8 +99,17 @@ fig.update_layout(
     autosize=True,
     paper_bgcolor="rgba(0,0,0,0)",
     plot_bgcolor="rgba(0,0,0,0)",
-    margin=dict(l=28, r=12, t=8, b=28),
+    margin=dict(l=40, r=28, t=20, b=40),
     hovermode="x unified",
+    legend=dict(
+        orientation="v",
+        x=1,
+        y=0,
+        xanchor="right",
+        yanchor="bottom",
+        bgcolor="rgba(255,255,255,0)",
+        borderwidth=0,
+    ),
     hoverlabel=dict(
         bgcolor="white",
         font=dict(color="#111827", size=12),
@@ -173,17 +202,17 @@ container_id = f"line-ex-container-{uid}"
 slider_tpl = '''
 <div id="__CID__">
   __PLOT__
-  <div class="plotly_controls" style="margin-top:10px; display:flex; gap:14px; align-items:center;">
-    <label style="font-size:12px;color:rgba(0,0,0,.65); display:flex; align-items:center; gap:6px; white-space:nowrap;">
+  <div class="plotly_controls" style="margin-top:12px; display:flex; gap:16px; align-items:center;">
+    <label style="font-size:12px;color:rgba(0,0,0,.65); display:flex; align-items:center; gap:6px; white-space:nowrap; padding:6px 10px;">
       Dataset
       <select id="__DSID__" style="font-size:12px; padding:2px 6px;">
-        <option value="0">Dataset A</option>
-        <option value="1">Dataset B</option>
-        <option value="2">Dataset C</option>
+        <option value="0">CIFAR-10</option>
+        <option value="1">CIFAR-100</option>
+        <option value="2">ImageNet-1K</option>
       </select>
     </label>
-    <label style="font-size:12px;color:rgba(0,0,0,.65);display:flex;align-items:center;gap:8px; flex:1;">
-      Nonlinearity
+    <label style="font-size:12px;color:rgba(0,0,0,.65);display:flex;align-items:center;gap:10px; flex:1; padding:6px 10px;">
+      Augmentation α
       <input id="__SID__" type="range" min="0" max="1" step="0.01" value="__A0__" style="flex:1;">
       <span class="alpha-value">__A0__</span>
     </label>
@@ -199,32 +228,37 @@ slider_tpl = '''
   var valueEl = container.querySelector('.alpha-value');
   var N = __N__;
   var xs = Array.from({length: N}, function(_,i){ return i/(N-1); });
-  function expNorm(x,k){ return (Math.exp(k*x)-1)/(Math.exp(k)-1); }
+  function logistic(x, ymin, ymax, k, x0){ return ymin + (ymax - ymin) / (1 + Math.exp(-k*(x - x0))); }
   function blend(l,e,a){ return (1-a)*l + a*e; }
   var datasets = [
-    { curves: [ {o:0.20,s:0.60,k:3.0}, {o:0.15,s:0.70,k:3.5}, {o:0.10,s:0.80,k:2.8} ] },
-    { curves: [ {o:0.30,s:0.55,k:2.2}, {o:0.18,s:0.65,k:2.8}, {o:0.12,s:0.70,k:2.0} ] },
-    { curves: [ {o:0.10,s:0.85,k:3.8}, {o:0.12,s:0.80,k:3.2}, {o:0.08,s:0.90,k:3.0} ] }
+    { name:'CIFAR-10',  base:{ymin:0.10,ymax:0.90,k:10.0,x0:0.55}, aug:{ymin:0.15,ymax:0.96,k:12.0,x0:0.40}, target:0.97 },
+    { name:'CIFAR-100', base:{ymin:0.05,ymax:0.70,k:9.5,x0:0.60},  aug:{ymin:0.08,ymax:0.80,k:11.0,x0:0.45},  target:0.85 },
+    { name:'ImageNet-1K', base:{ymin:0.02,ymax:0.68,k:8.5,x0:0.65}, aug:{ymin:0.04,ymax:0.75,k:9.5,x0:0.50},  target:0.82 }
   ];
   var dsi = 0;
-  function makeY(a){
-    var cs = datasets[dsi].curves;
-    var y1 = xs.map(function(x){ return blend(cs[0].o + cs[0].s*x, cs[0].o + cs[0].s*expNorm(x,cs[0].k), a); });
-    var y2 = xs.map(function(x){ return blend(cs[1].o + cs[1].s*x, cs[1].o + cs[1].s*expNorm(x,cs[1].k), a); });
-    var y3 = xs.map(function(x){ return blend(cs[2].o + cs[2].s*x, cs[2].o + cs[2].s*expNorm(x,cs[2].k), a); });
-    return [y1,y2,y3];
-  }
-  function apply(a){
-    var ys = makeY(a);
-    Plotly.restyle(gd, {y:[ys[0]]}, [0]);
-    Plotly.restyle(gd, {y:[ys[1]]}, [1]);
-    Plotly.restyle(gd, {y:[ys[2]]}, [2]);
+  var yb = xs.map(function(x){ return logistic(x, datasets[dsi].base.ymin, datasets[dsi].base.ymax, datasets[dsi].base.k, datasets[dsi].base.x0); });
+  var ya = xs.map(function(x){ return logistic(x, datasets[dsi].aug.ymin, datasets[dsi].aug.ymax, datasets[dsi].aug.k, datasets[dsi].aug.x0); });
+  var yt = xs.map(function(){ return datasets[dsi].target; });
+  function applyAlpha(a){
+    var yi = yb.map(function(v,i){ return blend(v, ya[i], a); });
+    Plotly.restyle(gd, {y:[yi]}, [1]); // only Improved changes with α
     if(valueEl) valueEl.textContent = a.toFixed(2);
   }
+  function applyDataset(){
+    var d = datasets[dsi];
+    yb = xs.map(function(x){ return logistic(x, d.base.ymin, d.base.ymax, d.base.k, d.base.x0); });
+    ya = xs.map(function(x){ return logistic(x, d.aug.ymin, d.aug.ymax, d.aug.k, d.aug.x0); });
+    yt = xs.map(function(){ return d.target; });
+    var a = parseFloat(slider.value)||0;
+    var yi = yb.map(function(v,i){ return blend(v, ya[i], a); });
+    Plotly.restyle(gd, {y:[yb]}, [0]); // Baseline
+    Plotly.restyle(gd, {y:[yi]}, [1]); // Improved (blended)
+    Plotly.restyle(gd, {y:[yt]}, [2]); // Target
+  }
   var initA = parseFloat(slider.value)||0;
-  slider.addEventListener('input', function(e){ apply(parseFloat(e.target.value)||0); });
-  dsSelect.addEventListener('change', function(e){ dsi = parseInt(e.target.value)||0; apply(parseFloat(slider.value)||0); });
-  setTimeout(function(){ apply(initA); }, 0);
+  slider.addEventListener('input', function(e){ applyAlpha(parseFloat(e.target.value)||0); });
+  dsSelect.addEventListener('change', function(e){ dsi = parseInt(e.target.value)||0; applyDataset(); });
+  setTimeout(function(){ applyDataset(); applyAlpha(initA); }, 0);
 })();
 </script>
 '''
@@ -237,12 +271,6 @@ slider_html = (slider_tpl
     .replace('__PLOT__', html_plot)
 )
 
-fig.write_html("../app/src/fragments/line.html", 
-               include_plotlyjs=False, 
-               full_html=False, 
-               config={
-                   'displayModeBar': False,
-                   'responsive': True, 
-                   'scrollZoom': False,
-               })
+with open("../../app/src/content/fragments/line.html", "w", encoding="utf-8") as f:
+    f.write(slider_html)