update

app/src/components/ThemeToggle.astro

@@ -1,18 +1,16 @@
 <button id="theme-toggle" aria-label="Toggle color theme">
-  <svg class="icon light" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor">
-    <circle cx="12" cy="12" r="5"/>
-    <g stroke="currentColor" stroke-width="2" stroke-linecap="round">
-      <line x1="12" y1="1" x2="12" y2="4"/>
-      <line x1="12" y1="20" x2="12" y2="23"/>
-      <line x1="1" y1="12" x2="4" y2="12"/>
-      <line x1="20" y1="12" x2="23" y2="12"/>
-      <line x1="4.22" y1="4.22" x2="6.34" y2="6.34"/>
-      <line x1="17.66" y1="17.66" x2="19.78" y2="19.78"/>
-      <line x1="4.22" y1="19.78" x2="6.34" y2="17.66"/>
-      <line x1="17.66" y1="6.34" x2="19.78" y2="4.22"/>
-    </g>
+  <svg class="icon light" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="5"></circle>
+    <line x1="12" y1="1" x2="12" y2="4"></line>
+    <line x1="12" y1="20" x2="12" y2="23"></line>
+    <line x1="1" y1="12" x2="4" y2="12"></line>
+    <line x1="20" y1="12" x2="23" y2="12"></line>
+    <line x1="4.22" y1="4.22" x2="6.34" y2="6.34"></line>
+    <line x1="17.66" y1="17.66" x2="19.78" y2="19.78"></line>
+    <line x1="4.22" y1="19.78" x2="6.34" y2="17.66"></line>
+    <line x1="17.66" y1="6.34" x2="19.78" y2="4.22"></line>
   </svg>
-  <svg class="icon dark" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor">
+  <svg class="icon dark" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
     <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
   </svg>
   <script>
@@ -35,11 +33,13 @@
       else if (media.addListener) media.addListener(syncWithSystem);
     }
 
-    btn.addEventListener('click', () => {
-      const next = (document.documentElement.dataset.theme === 'dark') ? 'light' : 'dark';
-      localStorage.setItem('theme', next);
-      apply(next);
-    });
+    if (btn) {
+      btn.addEventListener('click', () => {
+        const next = (document.documentElement.dataset.theme === 'dark') ? 'light' : 'dark';
+        localStorage.setItem('theme', next);
+        apply(next);
+      });
+    }
   </script>
 </button>
 

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

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d5db6c112739ccf6b5f98dfdd480f9748c5b78c66452b02e0168eeed6acea875
-size 50100
+oid sha256:85f900011d0ea9cd2e0326e2d5bf40b74e90e696901b8fd9283dd802aa0bdbe1
+size 37017

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

@@ -156,6 +156,7 @@
       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 gPoints = gRoot.append('g').attr('class', 'points');
       const gHover = gRoot.append('g').attr('class', 'hover');
       const gLegend = gRoot.append('foreignObject').attr('class', 'legend');
 
@@ -197,11 +198,15 @@
       let xScale = d3.scaleLinear();
       let yScale = d3.scaleLinear();
 
-      // Line generator
-      const lineGen = d3.line()
+      // Line generators
+      const lineGenSmooth = d3.line()
         .curve(d3.curveCatmullRom.alpha(0.05))
         .x((d) => xScale(d.step))
         .y((d) => yScale(d.value));
+      const lineGenStep = d3.line()
+        .curve(d3.curveStepAfter)
+        .x((d) => xScale(d.step))
+        .y((d) => yScale(d.value));
 
       // Hover elements
       const hoverLine = gHover.append('line').attr('stroke-width', 1);
@@ -327,15 +332,33 @@
         // Bind lines
         const series = runs.map((r, i) => ({ run: r, color: pool[i % pool.length], values: (map[r]||[]).slice().sort((a,b)=>a.step-b.step) }));
         const paths = gLines.selectAll('path.run-line').data(series, d=>d.run);
+        const gen = isRank ? lineGenStep : lineGenSmooth;
         paths.enter().append('path').attr('class','run-line').attr('fill','none').attr('stroke-width',2)
           .attr('stroke', d=>d.color).attr('opacity',0.9)
-          .attr('d', d=>lineGen(d.values))
+          .attr('d', d=>gen(d.values))
           .merge(paths)
           .transition().duration(200)
           .attr('stroke', d=>d.color)
-          .attr('d', d=>lineGen(d.values));
+          .attr('d', d=>gen(d.values));
         paths.exit().remove();
 
+        // Points for rank metrics (discrete steps)
+        if (isRank) {
+          const pointData = series.flatMap(s => s.values.map(v => ({ run: s.run, color: s.color, step: v.step, value: v.value })));
+          const circles = gPoints.selectAll('circle.point').data(pointData, d => d.run + '-' + d.step);
+          circles.enter().append('circle').attr('class', 'point')
+            .attr('r', 2.5)
+            .attr('fill', d => d.color)
+            .attr('cx', d => xScale(d.step))
+            .attr('cy', d => yScale(d.value))
+            .merge(circles)
+            .attr('cx', d => xScale(d.step))
+            .attr('cy', d => yScale(d.value));
+          circles.exit().remove();
+        } else {
+          gPoints.selectAll('*').remove();
+        }
+
         // Inline legend content (row, right side) compact
         legendInline.innerHTML = series.map(s => `<span style="display:inline-flex;align-items:center;gap:6px;white-space:nowrap;"><span style="width:18px;height:10px;background:${s.color};border-radius:3px;display:inline-block"></span><span>${s.run}</span></span>`).join('');
 
@@ -353,7 +376,10 @@
           series.forEach(s=>{
             const m = new Map(s.values.map(v=>[v.step, v.value]));
             const val = m.has(nearest) ? m.get(nearest) : null;
-            if (val != null) html += `<div><span style="display:inline-block;width:10px;height:10px;background:${s.color};border-radius:50%;margin-right:6px;"></span><strong>${s.run}</strong> ${(+val).toFixed(4)}</div>`;
+            if (val != null) {
+              const formatVal = (vv) => (isRank ? d3.format('d')(vv) : (+vv).toFixed(4));
+              html += `<div><span style=\"display:inline-block;width:10px;height:10px;background:${s.color};border-radius:50%;margin-right:6px;\"></span><strong>${s.run}</strong> ${formatVal(val)}</div>`;
+            }
           });
           tipInner.innerHTML = html;
           const offsetX = 12, offsetY = 12;

app/src/content/embeds/d3-pie.html

@@ -6,7 +6,7 @@
   .d3-pie .legend .swatch { width:14px; height:14px; border-radius:3px; display:inline-block; border: 1px solid var(--border-color); }
   .d3-pie .caption { font-size: 14px; font-weight: 800; fill: var(--text-color); }
   .d3-pie .nodata { font-size: 12px; fill: var(--muted-color); }
-  .d3-pie .slice-label { font-size: 11px; font-weight: 700; fill: var(--text-color); paint-order: stroke; stroke: rgba(255,255,255,0.6); stroke-width: 3px; }
+  .d3-pie .slice-label { font-size: 11px; font-weight: 700; fill: var(--text-color); paint-order: stroke; stroke: rgba(255,255,255,0.2); stroke-width: 3px; }
 </style>
 <script>
   (() => {