update colors, fix layout

app/src/content/chapters/available-blocks.mdx

@@ -380,6 +380,7 @@ You can fetch them with this address: **`[domain]/data/your-data.ext`**
 Here are some real world examples to inspire you.
 
 <HtmlEmbed src="d3-line.html" title="Training curves by metric" desc="Interactive time series across runs. Choose a metric; hover for values." />
+<HtmlEmbed src="d3-line-example.html" title="Training curves by metric" desc="Interactive time series across runs. Choose a metric; hover for values." />
 ---
 <HtmlEmbed src="d3-bar.html" title="D3 Memory usage with recomputation" desc={`Memory usage with recomputation — <a href="https://huggingface.co/spaces/nanotron/ultrascale-playbook?section=activation_recomputation" target="_blank">from the ultrascale playbook</a>`}/>
 ---

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

@@ -15,8 +15,8 @@ Your **article** lives in **one place**
 
 Everything is **self-contained** under `app/src/content/`:
 - **MDX**: `article.mdx` and [**optional chapters**](#chapters) in `chapters/`
-- **Assets**: `assets/` (**images**, **audios**, **datas**, etc.) tracked via **Git LFS**)
-- **Embeds**: `embed/` ([**HtmlEmbed**](#htmlembed) for **Plotly/D3**, etc.)
+- **Assets**: `assets/` **images**, **audios**, **datas**, etc. (tracked via **Git LFS**)
+- **Embeds**: `embed/` [**HtmlEmbed**](#htmlembed) for **Plotly/D3**, etc.
 
 The `article.mdx` file is the **main entry point** of your article.
 

app/src/content/embeds/d3-line-example.html

@@ -89,13 +89,29 @@
     };
 
     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';
-      }
+      const scriptEl = document.currentScript;
+
+      const getLocalPrev = () => {
+        if (!scriptEl) return null;
+        let el = scriptEl.previousElementSibling;
+        while (el && !(el.classList && el.classList.contains('d3-line'))) {
+          el = el.previousElementSibling;
+        }
+        return el || null;
+      };
+
+      const localTarget = getLocalPrev();
+      const targets = localTarget
+        ? [localTarget]
+        : Array.from(document.querySelectorAll('.d3-line'))
+            .filter((el) => !(el.dataset && el.dataset.mounted === 'true'));
+
+      targets.forEach((container) => {
+        if (!container) return;
+        if (container.dataset) {
+          if (container.dataset.mounted === 'true') return;
+          container.dataset.mounted = 'true';
+        }
 
       // Dataset params matching the Plotly version
       const datasets = [
@@ -418,6 +434,7 @@
         window.addEventListener('resize', render);
       }
       render();
+      });
     };
 
     if (document.readyState === 'loading') {

app/src/content/embeds/palettes.html

@@ -1,11 +1,14 @@
 <div class="palettes" style="width:100%; margin: 10px 0;">
   <style>
-    .palettes .palettes__grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
-    .palettes .palette-card { position: relative; display: grid; grid-template-columns: auto 1fr 260px; align-items: stretch; gap: 14px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--surface-bg); padding: 12px; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
+    .palettes { box-sizing: border-box; overflow-x: hidden; }
+    .palettes .palettes__grid { display: grid; grid-template-columns: 1fr; gap: 12px; max-width: 100%; }
+    .palettes .palette-card { position: relative; display: grid; grid-template-columns: auto 1fr minmax(0, 220px); align-items: stretch; gap: 12px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--surface-bg); padding: 12px; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
     /* removed circular badge */
-    .palettes .palette-card__swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; margin: 0; min-height: 20px; }
-    .palettes .palette-card__swatches .sw { width: 100%; min-width: 0; min-height: 0; border-radius: 8px; border: 1px solid var(--border-color); }
-    .palettes .palette-card__content { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding-right: 24px; border-right: 1px solid var(--border-color); }
+    .palettes .palette-card__swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 2px; margin: 0; min-height: 20px; }
+    .palettes .palette-card__swatches .sw { width: 100%; min-width: 0; min-height: 0; border-radius: 0; border: 1px solid var(--border-color); }
+    .palettes .palette-card__swatches .sw:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
+    .palettes .palette-card__swatches .sw:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
+    .palettes .palette-card__content { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding-right: 16px; border-right: 1px solid var(--border-color); }
     .palettes .palette-card__content__info { display: flex; flex-direction: column;  }
     .palettes .palette-card__title { text-align: left; font-weight: 800; font-size: 15px; }
     .palettes .palette-card__desc { text-align: left; color: var(--muted-color); line-height: 1.5; font-size: 12px; }
@@ -17,9 +20,11 @@
     /* Simulation UI */
     .palettes .palettes__select { width: 100%; max-width: 100%; border: 1px solid var(--border-color); background: var(--surface-bg); color: var(--text-color); padding: 8px 10px; border-radius: 8px; }
     .palettes .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 1px, 1px); white-space: nowrap; border: 0; }
-    .palettes .palettes__controls { display: flex; flex-wrap: nowrap; gap: 16px; align-items: center; margin: 8px 0 14px; }
-    .palettes .palettes__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 0 0 50%; max-width: 50%; }
+    .palettes .palettes__controls { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 8px 0 14px; }
+    .palettes .palettes__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 280px; max-width: 100%; }
     .palettes .palettes__label { font-size: 12px; color: var(--muted-color); font-weight: 800; }
+    .palettes .palettes__label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
+    .palettes .ghost-badge { font-size: 11px; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border-color); color: var(--muted-color); background: transparent; font-variant-numeric: tabular-nums; }
     .palettes .palettes__count { display: flex; align-items: center; gap: 8px; max-width: 100%; }
     .palettes .palettes__count input[type="range"] { width: 100%; }
     .palettes .palettes__count output { min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted-color); }
@@ -59,10 +64,12 @@
       </select>
     </div>
     <div class="palettes__field">
-      <label class="palettes__label" for="color-count">Number of colors</label>
+      <div class="palettes__label-row">
+        <label class="palettes__label" for="color-count">Number of colors</label>
+        <output id="color-count-out" for="color-count" class="ghost-badge">6</output>
+      </div>
       <div class="palettes__count">
         <input id="color-count" type="range" min="6" max="10" step="1" value="6" aria-label="Number of colors" />
-        <output id="color-count-out" for="color-count">6</output>
       </div>
     </div>
   </div>
@@ -109,7 +116,7 @@
       };
 
     const cards = [
-      { key: 'categorical', title: 'Categorical', desc: 'For <strong>non‑numeric categories</strong>; <strong>visually distinct</strong> colors.', generator: (baseHex, count) => {
+      { key: 'categorical', title: 'Categorical', desc: 'For <strong>non‑numeric categories</strong>; <strong>visually distinct</strong> colors. The more you have the more likely they are to look similar.', generator: (baseHex, count) => {
           const base = chroma(baseHex);
           const lc = base.lch();
           const baseH = base.get('hsl.h') || 0;
@@ -195,15 +202,11 @@
           const c = chroma(baseHex).saturate(0.3);
           return chroma.scale([c.darken(2), c, c.brighten(2)]).mode('lab').correctLightness(true).colors(total);
       }},
-      { key: 'diverging', title: 'Diverging', desc: 'For <strong>centered ranges</strong> with <strong>two extremes</strong> around a <strong>baseline</strong>. (e.g., negatives/positives)', generator: (baseHex, count) => {
+      { key: 'diverging', title: 'Diverging', desc: 'Opposing extremes via <strong>base → white → complement</strong>; smooth contrast around a neutral midpoint.', generator: (baseHex, count) => {
           const total = Math.max(6, Math.min(10, count || 6));
-          const h = chroma(baseHex).get('hsl.h');
-          const baseH = Number.isFinite(h) ? h : 0;
-          const compH = (baseH + 180) % 360;
-          const left = chroma.hsl(baseH, 0.75, 0.55);
-          const right = chroma.hsl(compH, 0.75, 0.55);
-          const mid = chroma.mix(left, right, 0.5, 'lch');
-          return chroma.scale([left, mid, right]).mode('lch').correctLightness(true).colors(total);
+          const comp = chroma(baseHex).set('hsl.h', '+180');
+          const bez = chroma.bezier([baseHex, '#ffffff', comp]);
+          return bez.scale().padding(-0.15).colors(total);
       }}
     ];
 

app/src/styles/_layout.css

@@ -5,11 +5,24 @@
   --content-padding-x: 16px;
 }
 
-.content-grid { max-width: 1280px; margin: 0 auto; padding: 0 var(--content-padding-x); 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; }
+.content-grid {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 var(--content-padding-x);
+  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;
+}
 
 @media (max-width: 1100px) {
-  .content-grid > main { overflow: hidden; }
+  .content-grid { overflow: hidden; }
 }
 
 /* TOC (left column) */