add some new embeds

app/src/content/embeds/aws-bandwidth-bottleneck.html

@@ -1499,6 +1499,12 @@
       let viewboxWidth = maxEnsembleWidthForViewbox + CONFIG.gaps.ensembleGap + 200;
       let viewboxHeight = singleSystemHeight;
 
+      // For single ensemble (CPU-GPU, GPU-GPU via CPU, storage paths), zoom in more
+      if (ensembleCount === 1 && systemCount === 1) {
+        viewboxWidth *= 0.75;  // Zoom in by reducing viewbox width
+        viewboxHeight *= 0.75; // Zoom in by reducing viewbox height
+      }
+
       // For 2 systems in vertical layout, use scaled dimensions
       if (systemCount === 2 && !isInternodeLayout) {
         viewboxHeight = singleSystemHeight * 2 + CONFIG.gaps.systemGap;
@@ -1538,6 +1544,11 @@
       viewboxY = -verticalPadding / 2 + 100;
       paddedViewboxHeight = viewboxHeight + verticalPadding;
 
+      // For single ensemble, shift content up slightly
+      if (ensembleCount === 1 && systemCount === 1) {
+        viewboxY += 80;  // Shift up by reducing viewboxY
+      }
+
       const draw = SVG().addTo(container).size('100%', '100%').viewbox(0, viewboxY, viewboxWidth, paddedViewboxHeight);
       const renderer = new TopologyRenderer(draw);
 

app/src/content/embeds/banner.html

@@ -77,7 +77,7 @@
   /* Hand-drawn annotation */
   .d3-loss-curves .annotation {
     position: absolute;
-    top: 54px;
+    top: 70px;
     right: 120px;
     display: flex;
     align-items: flex-start;
@@ -87,7 +87,7 @@
 
   .d3-loss-curves .annotation-text {
     font-family: 'Caveat', cursive, var(--default-font-family);
-    font-size: 22px;
+    font-size: 32px;
     font-weight: 600;
     color: var(--text-color);
     line-height: 1.1;
@@ -236,7 +236,7 @@
                   stroke-linecap="round"/>
           </svg>
           <div class="annotation-text">
-            Just a few<br/>attempts
+            YOLO
           </div>
         `;
         container.appendChild(annotation);
@@ -374,28 +374,46 @@
         return /^baseline$/i.test(config);
       }
 
-      // Helper function to darken a color
-      function darkenColor(color, factor = 0.2) {
+      // Helper function to saturate a color slightly
+      function saturateColor(color) {
         // Handle different color formats
-        if (color.startsWith('#')) {
-          // Hex color
-          const hex = color.replace('#', '');
-          const r = parseInt(hex.substr(0, 2), 16);
-          const g = parseInt(hex.substr(2, 2), 16);
-          const b = parseInt(hex.substr(4, 2), 16);
-          const newR = Math.max(0, Math.floor(r * (1 - factor)));
-          const newG = Math.max(0, Math.floor(g * (1 - factor)));
-          const newB = Math.max(0, Math.floor(b * (1 - factor)));
-          return `#${newR.toString(16).padStart(2, '0')}${newG.toString(16).padStart(2, '0')}${newB.toString(16).padStart(2, '0')}`;
-        } else if (color.startsWith('hsl(')) {
-          // HSL color
+        if (color.startsWith('hsl(')) {
+          // HSL color - boost saturation slightly and reduce lightness a bit
           const match = color.match(/hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)/);
           if (match) {
             const h = parseInt(match[1]);
-            const s = parseInt(match[2]);
-            const l = Math.max(0, parseInt(match[3]) * (1 - factor));
-            return `hsl(${h}, ${s}%, ${Math.floor(l)}%)`;
+            const s = Math.min(100, parseInt(match[2]) + 25); // +10% saturation
+            const l = Math.max(0, parseInt(match[3]));    // -5% lightness
+            return `hsl(${h}, ${s}%, ${l}%)`;
           }
+        } else if (color.startsWith('#')) {
+          // Convert hex to RGB then to HSL
+          const hex = color.replace('#', '');
+          const r = parseInt(hex.substr(0, 2), 16) / 255;
+          const g = parseInt(hex.substr(2, 2), 16) / 255;
+          const b = parseInt(hex.substr(4, 2), 16) / 255;
+
+          const max = Math.max(r, g, b);
+          const min = Math.min(r, g, b);
+          let h, s, l = (max + min) / 2;
+
+          if (max === min) {
+            h = s = 0;
+          } else {
+            const d = max - min;
+            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+            switch (max) {
+              case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
+              case g: h = ((b - r) / d + 2) / 6; break;
+              case b: h = ((r - g) / d + 4) / 6; break;
+            }
+          }
+
+          h = Math.round(h * 360);
+          s = Math.min(100, Math.round(s * 100) + 10);
+          l = Math.max(0, Math.round(l * 100) - 5);
+
+          return `hsl(${h}, ${s}%, ${l}%)`;
         }
         // Fallback: return original color
         return color;
@@ -703,19 +721,19 @@
           solidPaths.exit().remove();
         }
 
-        // Then, add all lines (dashed baselines will be on top)
+        // Then, add all lines (saturated baselines will be on top)
         const paths = gLines.selectAll('path.run').data(series, d => d.run);
         const pathsEnter = paths.enter().append('path')
           .attr('class', 'run')
           .attr('fill', 'none')
           .attr('stroke-width', 2)
-          .attr('stroke', d => isBaselineRun(d.run) ? darkenColor(d.color) : d.color)
-          .attr('stroke-dasharray', d => isBaselineRun(d.run) ? '4,2' : null)
+          .attr('stroke', d => isBaselineRun(d.run) ? saturateColor(d.color) : d.color)
+          .attr('stroke-dasharray', null)
           .attr('d', d => lineGen(d.values));
 
         pathsEnter.merge(paths)
-          .attr('stroke', d => isBaselineRun(d.run) ? darkenColor(d.color) : d.color)
-          .attr('stroke-dasharray', d => isBaselineRun(d.run) ? '4,2' : null)
+          .attr('stroke', d => isBaselineRun(d.run) ? saturateColor(d.color) : d.color)
+          .attr('stroke-dasharray', null)
           .attr('d', d => lineGen(d.values)); // No transition for performance
         paths.exit().remove();
 

app/src/content/embeds/rl-training-sync.html

@@ -0,0 +1,633 @@
+<div class="rl-training-sync"></div>
+<style>
+    .rl-training-sync {
+        font-family: 'Arial', sans-serif;
+        margin: 20px 0;
+        padding: 0;
+    }
+
+    .rl-training-sync .container {
+        display: flex;
+        gap: 30px;
+        align-items: stretch;
+        justify-content: center;
+        flex-wrap: wrap;
+    }
+
+    .rl-training-sync .left-section {
+        flex: 0 0 auto;
+        display: flex;
+        align-items: center;
+        gap: 20px;
+    }
+
+    .rl-training-sync .left-diagram {
+        position: relative;
+        width: 280px;
+        height: 320px;
+        background: var(--surface-bg, #fafafa);
+        border-radius: 12px;
+        padding: 10px;
+    }
+
+    .rl-training-sync .diagram-separator {
+        width: 1px;
+        background: linear-gradient(to bottom, transparent, var(--border-color, #ddd) 20%, var(--border-color, #ddd) 80%, transparent);
+        align-self: stretch;
+    }
+
+    .rl-training-sync .right-modes {
+        flex: 1;
+        min-width: 400px;
+        display: flex;
+        align-items: center;
+        gap: 0;
+    }
+
+    .rl-training-sync .box {
+        padding: 8px 14px;
+        border-radius: 8px;
+        font-weight: 600;
+        font-size: 11px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        text-align: center;
+        position: absolute;
+        z-index: 2;
+        line-height: 1.3;
+        transition: transform 0.2s ease, box-shadow 0.2s ease;
+        cursor: default;
+    }
+
+    .rl-training-sync .rewards {
+        background: var(--color-0, #E889AB);
+        color: #000;
+        top: 10px;
+        left: 10px;
+    }
+
+    .rl-training-sync .verifier {
+        background: var(--color-1, #4EA5B7);
+        color: #000;
+        top: 10px;
+        right: 10px;
+    }
+
+    .rl-training-sync .rollouts {
+        background: var(--color-2, #E38A42);
+        color: #000;
+        top: 50%;
+        right: 10px;
+        transform: translateY(-50%);
+    }
+
+    .rl-training-sync .trainer {
+        background: var(--color-3, #CEC0FA);
+        color: #000;
+        bottom: 60px;
+        left: 10px;
+    }
+
+    .rl-training-sync .generator {
+        background: var(--color-0, #E889AB);
+        color: #000;
+        bottom: 60px;
+        right: 10px;
+    }
+
+    .rl-training-sync .prompt {
+        background: var(--color-1, #4EA5B7);
+        color: #000;
+        bottom: 10px;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    /* Arrows */
+    .rl-training-sync .arrow {
+        stroke: var(--text-color, #666);
+        stroke-width: 1.5;
+        fill: none;
+        opacity: 0.6;
+    }
+
+    .rl-training-sync .mode-column {
+        flex: 1;
+        min-width: 120px;
+        padding: 0 15px;
+        border-right: 1px solid var(--border-color, #ddd);
+        transition: background-color 0.2s ease;
+    }
+
+    .rl-training-sync .mode-column:last-child {
+        border-right: none;
+    }
+
+    .rl-training-sync .mode-header {
+        font-size: 13px;
+        font-weight: 700;
+        text-align: center;
+        margin-bottom: 15px;
+        color: var(--text-color, #333);
+        padding-bottom: 10px;
+    }
+
+    .rl-training-sync .step-row {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+        margin-bottom: 12px;
+        justify-content: center;
+    }
+
+    .rl-training-sync .step-label {
+        font-size: 11px;
+        font-weight: 600;
+        min-width: 60px;
+        text-align: right;
+        color: var(--muted-color, #666);
+    }
+
+    .rl-training-sync .node {
+        padding: 7px 15px;
+        border-radius: 14px;
+        font-weight: 600;
+        font-size: 11px;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+        min-width: 38px;
+        text-align: center;
+        transition: transform 0.2s ease, box-shadow 0.2s ease;
+    }
+
+    .rl-training-sync .node-t {
+        background: var(--color-3, #CEC0FA);
+        color: #000;
+    }
+
+    .rl-training-sync .node-g {
+        background: var(--color-0, #E889AB);
+        color: #000;
+    }
+
+    .rl-training-sync .sync-arrow {
+        position: relative;
+        display: inline-flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0px;
+        margin-top: -12px;
+    }
+
+    .rl-training-sync .sync-label {
+        transform: translateY(10px);
+        font-size: 8px;
+        color: var(--text-color, #666);
+        font-weight: 600;
+        text-transform: lowercase;
+    }
+
+    .rl-training-sync .sync-symbol {
+        font-size: 14px;
+        color: var(--muted-color, #999);
+        font-weight: normal;
+    }
+
+    .rl-training-sync .dots {
+        text-align: center;
+        font-size: 16px;
+        font-weight: bold;
+        color: var(--muted-color, #ccc);
+        margin: 8px 0;
+    }
+
+    @media (max-width: 1100px) {
+        .rl-training-sync .left-section {
+            flex-direction: column;
+        }
+
+        .rl-training-sync .diagram-separator {
+            width: 100%;
+            height: 1px;
+            background: linear-gradient(to right, transparent, var(--border-color, #ddd) 20%, var(--border-color, #ddd) 80%, transparent);
+        }
+    }
+
+    @media (max-width: 1000px) {
+        .rl-training-sync .container {
+            flex-direction: column;
+        }
+
+        .rl-training-sync .left-diagram {
+            max-width: 100%;
+        }
+
+        .rl-training-sync .right-modes {
+            min-width: 100%;
+        }
+    }
+
+    @media (max-width: 600px) {
+        .rl-training-sync .right-modes {
+            flex-direction: column;
+        }
+
+        .rl-training-sync .mode-column {
+            width: 100%;
+            border-right: none;
+            border-bottom: 1px solid var(--border-color, #ddd);
+            padding: 15px;
+        }
+
+        .rl-training-sync .mode-column:last-child {
+            border-bottom: none;
+        }
+    }
+</style>
+
+<script>
+    (() => {
+        const bootstrap = () => {
+            const scriptEl = document.currentScript;
+            let container = scriptEl ? scriptEl.previousElementSibling : null;
+            if (!(container && container.classList && container.classList.contains('rl-training-sync'))) {
+                const candidates = Array.from(document.querySelectorAll('.rl-training-sync'))
+                    .filter((el) => !(el.dataset && el.dataset.mounted === 'true'));
+                container = candidates[candidates.length - 1] || null;
+            }
+            if (!container) return;
+            if (container.dataset) {
+                if (container.dataset.mounted === 'true') return;
+                container.dataset.mounted = 'true';
+            }
+
+            // Apply categorical color palette
+            const applyColorPalette = () => {
+                try {
+                    if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') {
+                        const colors = window.ColorPalettes.getColors('categorical', 4);
+                        colors.forEach((color, index) => {
+                            document.documentElement.style.setProperty(`--color-${index}`, color);
+                        });
+                    } else {
+                        const fallbackColors = ['#E889AB', '#4EA5B7', '#E38A42', '#CEC0FA'];
+                        fallbackColors.forEach((color, index) => {
+                            document.documentElement.style.setProperty(`--color-${index}`, color);
+                        });
+                    }
+                } catch (e) {
+                    console.warn('ColorPalettes not available, using fallback colors');
+                }
+            };
+
+            applyColorPalette();
+            if (window.ColorPalettes && typeof window.ColorPalettes.refresh === 'function') {
+                window.ColorPalettes.refresh();
+            }
+
+            // Node positions and sizes (calculated from CSS positions)
+            // Container is 280x320
+            // Box CSS: padding: 8px 14px, font-size: 11px, line-height: 1.3
+            const containerWidth = 280;
+            const containerHeight = 320;
+            const padding = { x: 14, y: 8 };
+
+            // Estimated text widths + padding (approximate)
+            const boxWidth = {
+                rewards: 58 + padding.x * 2,          // ~58px text
+                verifier: 90 + padding.x * 2,         // ~90px text (2 lines)
+                rollouts: 58 + padding.x * 2,         // ~58px text
+                trainer: 70 + padding.x * 2,          // ~70px text
+                generator: 75 + padding.x * 2,        // ~75px text
+                prompt: 48 + padding.x * 2            // ~48px text
+            };
+
+            // Height: single line ≈ 14px, double line ≈ 28px + padding
+            const boxHeight = {
+                rewards: 14 + padding.y * 2,          // 1 line
+                verifier: 28 + padding.y * 2,         // 2 lines (with <br/>)
+                rollouts: 14 + padding.y * 2,         // 1 line
+                trainer: 14 + padding.y * 2,          // 1 line
+                generator: 14 + padding.y * 2,        // 1 line
+                prompt: 14 + padding.y * 2            // 1 line
+            };
+
+            const nodes = {
+                // top: 10px, left: 10px
+                rewards: {
+                    x: 10 + boxWidth.rewards / 2,
+                    y: 10 + boxHeight.rewards / 2,
+                    width: boxWidth.rewards,
+                    height: boxHeight.rewards
+                },
+                // top: 10px, right: 10px
+                verifier: {
+                    x: containerWidth - 10 - boxWidth.verifier / 2,
+                    y: 10 + boxHeight.verifier / 2,
+                    width: boxWidth.verifier,
+                    height: boxHeight.verifier
+                },
+                // top: 50%, right: 10px, transform: translateY(-50%)
+                rollouts: {
+                    x: containerWidth - 10 - boxWidth.rollouts / 2,
+                    y: containerHeight / 2,
+                    width: boxWidth.rollouts,
+                    height: boxHeight.rollouts
+                },
+                // bottom: 60px, left: 10px
+                trainer: {
+                    x: 10 + boxWidth.trainer / 2,
+                    y: containerHeight - 60 - boxHeight.trainer / 2,
+                    width: boxWidth.trainer,
+                    height: boxHeight.trainer
+                },
+                // bottom: 60px, right: 10px
+                generator: {
+                    x: containerWidth - 10 - boxWidth.generator / 2,
+                    y: containerHeight - 60 - boxHeight.generator / 2,
+                    width: boxWidth.generator,
+                    height: boxHeight.generator
+                },
+                // bottom: 10px, left: 50%, transform: translateX(-50%)
+                prompt: {
+                    x: containerWidth / 2,
+                    y: containerHeight - 10 - boxHeight.prompt / 2,
+                    width: boxWidth.prompt,
+                    height: boxHeight.prompt
+                }
+            };
+
+            // Get connection point on a node's side (like bottleneck)
+            // node.x and node.y are the CENTER of the box
+            // We calculate the edge point, then add offset to move away from the box
+            // linkIndex and totalLinks allow spacing multiple connections on the same side
+            const getPoint = (nodeId, side, offset = 8, linkIndex = 0, totalLinks = 1) => {
+                const node = nodes[nodeId];
+                if (!node) return { x: 0, y: 0 };
+
+                const points = {
+                    top: { x: node.x, y: node.y - node.height / 2 - offset },
+                    right: { x: node.x + node.width / 2 + offset, y: node.y },
+                    bottom: { x: node.x, y: node.y + node.height / 2 + offset },
+                    left: { x: node.x - node.width / 2 - offset, y: node.y }
+                };
+
+                let basePoint = points[side] || { x: node.x, y: node.y };
+
+                // Apply spacing for multiple links to the same anchor
+                if (totalLinks > 1) {
+                    const isVerticalAnchor = (side === 'top' || side === 'bottom');
+
+                    // Vertical anchors (top/bottom) space horizontally, horizontal anchors (left/right) space vertically
+                    // Reduced gap: use fixed spacing instead of proportional
+                    const spacing = 8;  // Fixed gap of 8px between links
+                    const linkOffset = (linkIndex - (totalLinks - 1) / 2) * spacing;
+
+                    // Apply offset in the perpendicular direction to the anchor
+                    if (isVerticalAnchor) {
+                        basePoint.x += linkOffset;  // Horizontal offset for vertical anchors
+                    } else {
+                        basePoint.y += linkOffset;  // Vertical offset for horizontal anchors
+                    }
+                }
+
+                return basePoint;
+            };
+
+            // Create SVG paths with arrow markers (simple version)
+            const createPath = (from, to, dashed = false, color = 'currentColor') => {
+                return `<line x1="${from.x}" y1="${from.y}" x2="${to.x}" y2="${to.y}" 
+                    stroke="${color}" stroke-width="2" 
+                    ${dashed ? 'stroke-dasharray="4,4"' : ''} 
+                    opacity="0.6" 
+                    marker-end="url(#arrowhead)" />`;
+            };
+
+            // Build all connections
+            let connections = '';
+            const linkColor = 'var(--text-color, #666)';
+
+            // 1. Rewards → Trainer (dashed, vertical)
+            // Trainer top receives 2 links, this is link 0
+            connections += createPath(
+                getPoint('rewards', 'bottom'),
+                getPoint('trainer', 'top', 8, 0, 2),
+                true, linkColor
+            );
+
+            // 2. Verifier → Rewards (horizontal)
+            connections += createPath(
+                getPoint('verifier', 'left'),
+                getPoint('rewards', 'right'),
+                false, linkColor
+            );
+
+            // 3. Verifier → Rollouts (vertical)
+            connections += createPath(
+                getPoint('verifier', 'bottom'),
+                getPoint('rollouts', 'top'),
+                false, linkColor
+            );
+
+            // 4. Rollouts → Generator (vertical, single arrow)
+            connections += createPath(
+                getPoint('rollouts', 'bottom'),
+                getPoint('generator', 'top'),
+                false, linkColor
+            );
+
+            // 5. Rollouts → Trainer (diagonal: left of rollouts to top of trainer)
+            // Trainer top receives 2 links, this is link 1
+            connections += createPath(
+                getPoint('rollouts', 'left'),
+                getPoint('trainer', 'top', 8, 1, 2),
+                false, linkColor
+            );
+
+            // 6. Trainer → Generator sync (dashed, horizontal)
+            const trainerRight = getPoint('trainer', 'right');
+            const generatorLeft = getPoint('generator', 'left');
+            connections += createPath(trainerRight, generatorLeft, true, linkColor);
+            const syncMidX = (trainerRight.x + generatorLeft.x) / 2;
+            connections += `<text x="${syncMidX}" y="${trainerRight.y - 8}" font-size="8" fill="currentColor" opacity="0.6" font-weight="600" text-anchor="middle">sync</text>`;
+            connections += `<text x="${syncMidX}" y="${trainerRight.y + 13}" font-size="8" fill="currentColor" opacity="0.6" font-weight="600" text-anchor="middle">weights</text>`;
+
+            // 7. Prompt → Trainer (diagonal: left of prompt to bottom of trainer)
+            connections += createPath(
+                getPoint('prompt', 'left'),
+                getPoint('trainer', 'bottom'),
+                false, linkColor
+            );
+
+            // 8. Prompt → Generator (diagonal: right of prompt to bottom of generator)
+            connections += createPath(
+                getPoint('prompt', 'right'),
+                getPoint('generator', 'bottom'),
+                false, linkColor
+            );
+
+            container.innerHTML = `
+            <div class="container">
+                <!-- LEFT SECTION WITH DIAGRAM -->
+                <div class="left-section">
+                    <div class="left-diagram">
+                        <!-- SVG for arrows -->
+                        <svg width="100%" height="100%" style="position: absolute; top: 0; left: 0; pointer-events: none;">
+                            <defs>
+                                <marker id="arrowhead" markerWidth="6" markerHeight="6" 
+                                    refX="4" refY="2" orient="auto" markerUnits="strokeWidth">
+                                    <path d="M0,0 L4,2 L0,4" 
+                                        fill="none" 
+                                        stroke="var(--text-color, #666)" 
+                                        stroke-width="1" 
+                                        stroke-linecap="round" 
+                                        stroke-linejoin="round" />
+                                </marker>
+                            </defs>
+                            ${connections}
+                        </svg>
+                        
+                        <!-- Boxes -->
+                        <div class="box rewards">Rewards</div>
+                        <div class="box verifier">Reward/Verifier<br/>Model</div>
+                        <div class="box rollouts">Rollouts</div>
+                        <div class="box trainer">Trainer (T)</div>
+                        <div class="box generator">Generator (G)</div>
+                        <div class="box prompt">Prompt</div>
+                    </div>
+                    
+                    <div class="diagram-separator"></div>
+                </div>
+
+                <!-- RIGHT MODES -->
+                <div class="right-modes">
+                    <!-- OFFLINE -->
+                    <div class="mode-column">
+                        <div class="mode-header">Offline (s=∞)</div>
+                        
+                        <div class="step-row">
+                            <span class="step-label">Step k+1:</span>
+                            <span class="node node-t">T</span>
+                            <span class="node node-g">G</span>
+                        </div>
+                        
+                        <div class="step-row">
+                            <span class="step-label">Step k:</span>
+                            <span class="node node-t">T</span>
+                            <span class="node node-g">G</span>
+                        </div>
+                        
+                        <div class="dots">⋯</div>
+                        
+                        <div class="step-row">
+                            <span class="step-label">Step 1:</span>
+                            <span class="node node-t">T</span>
+                            <span class="node node-g">G</span>
+                        </div>
+                        
+                        <div class="step-row">
+                            <span class="step-label">Step 0:</span>
+                            <span class="node node-t">T</span>
+                            <span class="sync-arrow">
+                                <span class="sync-label">sync</span>
+                                <span class="sync-symbol">⟶</span>
+                            </span>
+                            <span class="node node-g">G</span>
+                        </div>
+                    </div>
+
+                    <!-- SEMI-ONLINE -->
+                    <div class="mode-column">
+                        <div class="mode-header">Semi-Online (s=k)</div>
+                        
+                        <div class="step-row">
+                            <span class="step-label">Step k+1:</span>
+                            <span class="node node-t">T</span>
+                            <span class="node node-g">G</span>
+                        </div>
+                        
+                        <div class="step-row">
+                            <span class="step-label">Step k:</span>
+                            <span class="node node-t">T</span>
+                            <span class="sync-arrow">
+                                <span class="sync-label">sync</span>
+                                <span class="sync-symbol">⟶</span>
+                            </span>
+                            <span class="node node-g">G</span>
+                        </div>
+                        
+                        <div class="dots">⋯</div>
+                        
+                        <div class="step-row">
+                            <span class="step-label">Step 1:</span>
+                            <span class="node node-t">T</span>
+                            <span class="node node-g">G</span>
+                        </div>
+                        
+                        <div class="step-row">
+                            <span class="step-label">Step 0:</span>
+                            <span class="node node-t">T</span>
+                            <span class="sync-arrow">
+                                <span class="sync-label">sync</span>
+                                <span class="sync-symbol">⟶</span>
+                            </span>
+                            <span class="node node-g">G</span>
+                        </div>
+                    </div>
+
+                    <!-- ONLINE -->
+                    <div class="mode-column">
+                        <div class="mode-header">Online (s=1)</div>
+                        
+                        <div class="step-row">
+                            <span class="step-label">Step k+1:</span>
+                            <span class="node node-t">T</span>
+                            <span class="sync-arrow">
+                                <span class="sync-label">sync</span>
+                                <span class="sync-symbol">⟶</span>
+                            </span>
+                            <span class="node node-g">G</span>
+                        </div>
+                        
+                        <div class="step-row">
+                            <span class="step-label">Step k:</span>
+                            <span class="node node-t">T</span>
+                            <span class="sync-arrow">
+                                <span class="sync-label">sync</span>
+                                <span class="sync-symbol">⟶</span>
+                            </span>
+                            <span class="node node-g">G</span>
+                        </div>
+                        
+                        <div class="dots">⋯</div>
+                        
+                        <div class="step-row">
+                            <span class="step-label">Step 1:</span>
+                            <span class="node node-t">T</span>
+                            <span class="sync-arrow">
+                                <span class="sync-label">sync</span>
+                                <span class="sync-symbol">⟶</span>
+                            </span>
+                            <span class="node node-g">G</span>
+                        </div>
+                        
+                        <div class="step-row">
+                            <span class="step-label">Step 0:</span>
+                            <span class="node node-t">T</span>
+                            <span class="sync-arrow">
+                                <span class="sync-label">sync</span>
+                                <span class="sync-symbol">⟶</span>
+                            </span>
+                            <span class="node node-g">G</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+        };
+
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', bootstrap, { once: true });
+        } else {
+            bootstrap();
+        }
+    })();
+</script>

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

@@ -6,7 +6,7 @@
         .tables-container {
             display: flex;
             gap: 20px;
-            margin-top: 20px;
+            margin-top: 0px;
         }
 
         .table-wrapper {
@@ -14,6 +14,7 @@
         }
 
         table {
+            width: 100%;
             background-color: var(--page-bg);
             border: 1px solid var(--border-color);
             border-radius: 3px !important;

app/src/content/embeds/training-pipeline.html

@@ -0,0 +1,242 @@
+<div class="training-pipeline"></div>
+<style>
+    .training-pipeline {
+        font-family: 'Arial', sans-serif;
+        margin: 20px 0;
+        padding: 0;
+    }
+
+    .training-pipeline .container {
+        display: flex;
+        gap: 30px;
+        align-items: center;
+        justify-content: center;
+        flex-wrap: nowrap;
+    }
+
+    .training-pipeline .phase {
+        flex: 0 1 auto;
+        border: 1px dashed #7d7d7d;
+        border-radius: 8px;
+        padding: 15px;
+    }
+
+    .training-pipeline .phase-header {
+        font-size: 14px;
+        font-weight: bold;
+        color: var(--text-color, #333);
+        margin-bottom: 20px;
+        text-align: center;
+        letter-spacing: 1px;
+        text-transform: uppercase;
+        opacity: 0.6;
+    }
+
+    .training-pipeline .steps-row {
+        display: flex;
+        gap: 15px;
+        align-items: flex-start;
+        justify-content: center;
+        flex-wrap: nowrap;
+    }
+
+    .training-pipeline .step-wrapper {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        flex: 0 1 auto;
+        min-width: 150px;
+        max-width: 240px;
+    }
+
+    .training-pipeline .step {
+        width: 100%;
+        padding: 16px;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
+
+    .training-pipeline .step-title {
+        font-size: 13px;
+        font-weight: 600;
+        line-height: 1.4;
+        margin-bottom: 5px;
+    }
+
+    .training-pipeline .step-info {
+        font-size: 11px;
+        opacity: 0.9;
+    }
+
+    .training-pipeline .arrow-right {
+        font-size: 24px;
+        color: #999;
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+        margin-top: 30px;
+    }
+
+    .training-pipeline .arrow-between {
+        font-size: 32px;
+        color: #999;
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+    }
+
+    .training-pipeline .model-badge {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        padding: 8px 16px;
+        background: linear-gradient(135deg, #FFB6B6, #FF9999);
+        border-radius: 20px;
+        font-weight: 600;
+        font-size: 11px;
+        color: #333;
+        box-shadow: 0 2px 6px rgba(255, 182, 182, 0.3);
+        position: relative;
+        margin-top: 15px;
+        white-space: nowrap;
+    }
+
+    .training-pipeline .model-badge::before {
+        content: '';
+        position: absolute;
+        top: -15px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 2px;
+        height: 15px;
+        border-left: 2px dashed #FFB6B6;
+    }
+
+    .training-pipeline .model-icon {
+        font-size: 16px;
+        font-weight: bold;
+    }
+
+    .training-pipeline .pre-training {
+        background: linear-gradient(135deg, #87CEEB, #6AB8DB);
+        color: #000;
+    }
+
+    .training-pipeline .sft {
+        background: linear-gradient(135deg, #F4C28F, #E6A966);
+        color: #000;
+    }
+
+    .training-pipeline .rl {
+        background: linear-gradient(135deg, #E6B8E6, #D69FD6);
+        color: #000;
+    }
+
+    @media (max-width: 1100px) {
+        .training-pipeline .container {
+            flex-direction: column;
+            align-items: stretch;
+        }
+
+        .training-pipeline .phase {
+            width: 100%;
+            max-width: 100%;
+        }
+
+        .training-pipeline .arrow-between {
+            transform: rotate(90deg);
+            margin: 10px 0;
+            align-self: center;
+        }
+    }
+
+    @media (max-width: 768px) {
+        .training-pipeline .steps-row {
+            flex-direction: column;
+            align-items: center;
+        }
+
+        .training-pipeline .arrow-right {
+            transform: rotate(90deg);
+            margin: 10px 0;
+        }
+
+        .training-pipeline .step-wrapper {
+            max-width: 100%;
+            width: 100%;
+        }
+    }
+</style>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        const container = document.querySelector('.training-pipeline');
+
+        container.innerHTML = `
+            <div class="container">
+                <!-- PRE-TRAINING -->
+                <div class="phase">
+                    <div class="phase-header">Pre-Training</div>
+                    <div class="steps-row">
+                        <div class="step-wrapper">
+                            <div class="step pre-training">
+                                <div class="step-title">General<br/>Pre-training</div>
+                                <div class="step-info">8T tokens<br/>8k context</div>
+                            </div>
+                        </div>
+                        
+                        <div class="arrow-right">→</div>
+                        
+                        <div class="step-wrapper">
+                            <div class="step pre-training">
+                                <div class="step-title">Code World Modeling<br/>Mid-training</div>
+                                <div class="step-info">5T tokens<br/>131k context</div>
+                            </div>
+                            <div class="model-badge">
+                                <span class="model-icon">📦</span>
+                                <span>CWM pretrained</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- ARROW BETWEEN PHASES -->
+                <div class="arrow-between">→</div>
+
+                <!-- POST-TRAINING -->
+                <div class="phase">
+                    <div class="phase-header">Post-Training</div>
+                    <div class="steps-row">
+                        <div class="step-wrapper">
+                            <div class="step sft">
+                                <div class="step-title">Supervised Fine-tuning<br/>Instruction and Reasoning</div>
+                                <div class="step-info">100B tokens<br/>32k context</div>
+                            </div>
+                            <div class="model-badge">
+                                <span class="model-icon">📦</span>
+                                <span>CWM sft</span>
+                            </div>
+                        </div>
+                        
+                        <div class="arrow-right">→</div>
+                        
+                        <div class="step-wrapper">
+                            <div class="step rl">
+                                <div class="step-title">Joint Reinforcement Learning<br/>Agentic and Reasoning</div>
+                                <div class="step-info">172B tokens<br/>131k context</div>
+                            </div>
+                            <div class="model-badge">
+                                <span class="model-icon">📦</span>
+                                <span>CWM</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+    });
+</script>

app/src/pages/index.astro

@@ -12,7 +12,10 @@ import "katex/dist/katex.min.css";
 import "../styles/global.css";
 const articleFM = (ArticleMod as any).frontmatter ?? {};
 const Article = (ArticleMod as any).default;
-const docTitle = articleFM?.title ?? "Untitled article";
+// Helper to strip HTML tags
+const stripHtml = (text: string) => String(text || "").replace(/<[^>]*>/g, "");
+// docTitle without HTML tags for SEO/meta
+const docTitle = stripHtml(articleFM?.title ?? "Untitled article");
 // Allow explicit line breaks in the title via "\n" or YAML newlines
 const docTitleHtml = (articleFM?.title ?? "Untitled article")
   .replace(/\\n/g, "<br/>")
@@ -121,7 +124,6 @@ const imageAbs: string =
       : (fmOg ?? ogDefaultUrl);
 
 // ---- Build citation text & BibTeX from frontmatter ----
-const stripHtml = (text: string) => String(text || "").replace(/<[^>]*>/g, "");
 const rawTitle = articleFM?.title ?? "Untitled article";
 const titleFlat = stripHtml(String(rawTitle))
   .replace(/\\n/g, " ")

app/src/styles/_base.css

@@ -46,7 +46,7 @@ html {
 }
 
 /* External links with arrow indicator */
-.content-grid main a[href^="http"]:not([href*="localhost"]):not([href*="127.0.0.1"]):not([href*="0.0.0.0"])::after {
+/* .content-grid main a[href^="http"]:not([href*="localhost"]):not([href*="127.0.0.1"]):not([href*="0.0.0.0"])::after {
   content: "↗";
   display: inline-block;
   margin-left: 2px;
@@ -55,7 +55,7 @@ html {
   transition: opacity 0.2s ease, transform 0.2s ease;
   transform: translateY(-5px);
   font-weight: 600;
-}
+} */
 
 /* External links with arrow indicator */
 .content-grid main a[href^="http"]:not([href*="localhost"]):not([href*="127.0.0.1"]):not([href*="0.0.0.0"]) {