added speedup annotation for main plot

app/src/content/chapters/1-introduction.mdx

@@ -27,6 +27,10 @@ Reading time: One weekend
       nemotron_hq_synth: { display: "Nemotron-HQ-Synth", color: "#76b900" },
       rewire: { display: "REWIRE", color: "#1877F2" },
       synth_query_reasoning_answer: { display: "SYNTH", color: "#b07aa1" }
+    },
+    speedupAnnotation: {
+      baselineRun: "nemotron_hq_synth",
+      targetRun: "mix-fw_edu_hq-table_smollm2_1.7b_hq"
     }
   }}
 />

app/src/content/embeds/d3-benchmark-comparison.html

@@ -121,6 +121,15 @@
   .d3-benchmark-comparison .line-path.ghost { opacity: .15; }
   .d3-benchmark-comparison .line-dot.ghost { opacity: .15; }
   .d3-benchmark-comparison .baseline.ghost { opacity: .1; }
+  .d3-benchmark-comparison .speedup-annotation line {
+    stroke-dasharray: 4,3;
+    stroke-width: 1.5;
+  }
+  .d3-benchmark-comparison .speedup-label {
+    font-weight: 700;
+    paint-order: stroke;
+    stroke-linejoin: round;
+  }
   .d3-benchmark-comparison .axes path { display: none; }
   .d3-benchmark-comparison .axes line { stroke: var(--axis-color); }
   .d3-benchmark-comparison .axes text { fill: var(--tick-color); }
@@ -698,6 +707,121 @@
           exit => exit.remove()
         );
 
+        // Speedup annotation
+        if (cfg.speedupAnnotation && currentMetric === defaultMetric) {
+          const ann = cfg.speedupAnnotation;
+          const baselineRows = parsedData.filter(r => r[RUN_COL] === ann.baselineRun);
+          const baselineStepResolved = ann.baselineStep || d3.max(baselineRows, r => +r[STEP_COL]);
+          const baselineRow = baselineRows.find(r => +r[STEP_COL] === baselineStepResolved);
+          const targetSeries = series.find(s => s.rawName === ann.targetRun);
+
+          if (baselineRow && targetSeries) {
+            const baselineVal = +baselineRow[currentMetric];
+            const baselineStepNum = baselineStepResolved;
+
+            // Find the exact step where the target *data points* first meet or exceed baseline
+            const pts = targetSeries.values;
+            let crossStep = null;
+            for (let i = 0; i < pts.length; i++) {
+              if (pts[i].value >= baselineVal) {
+                if (i === 0) { crossStep = pts[0].step; break; }
+                const t = (baselineVal - pts[i - 1].value) / (pts[i].value - pts[i - 1].value);
+                crossStep = pts[i - 1].step + t * (pts[i].step - pts[i - 1].step);
+                break;
+              }
+            }
+
+            // Snap crossStep to the nearest actual data point for visual alignment
+            let snapStep = crossStep;
+            if (crossStep !== null) {
+              let bestDist = Infinity;
+              for (const p of pts) {
+                const d = Math.abs(p.step - crossStep);
+                if (d < bestDist) { bestDist = d; snapStep = p.step; }
+              }
+            }
+
+            if (crossStep !== null) {
+              const speedup = baselineStepNum / crossStep;
+              const targetColor = colorMap[ann.targetRun] || 'var(--primary-color)';
+              const annG = gRoot.append('g').attr('class', 'speedup-annotation');
+
+              const yPos = y(baselineVal);
+              const snapPt = pts.find(p => p.step === snapStep);
+              const x1Pos = x(snapStep);
+              const y1Pos = snapPt ? y(snapPt.value) : yPos;
+              const x2Pos = x(baselineStepNum);
+
+              // Vertical drop from FinePhrase curve to baseline level at snap point
+              annG.append('line')
+                .attr('x1', x1Pos).attr('x2', x1Pos)
+                .attr('y1', y1Pos).attr('y2', yPos)
+                .attr('stroke', targetColor).attr('stroke-width', 1.5).attr('stroke-dasharray', '4,3');
+
+              // Horizontal bracket at baseline level
+              annG.append('line')
+                .attr('x1', x1Pos).attr('x2', x2Pos)
+                .attr('y1', yPos).attr('y2', yPos)
+                .attr('stroke', targetColor).attr('stroke-width', 1.5).attr('stroke-dasharray', '4,3');
+
+              // Vertical tick at baseline step end
+              annG.append('line')
+                .attr('x1', x2Pos).attr('x2', x2Pos)
+                .attr('y1', yPos - 8).attr('y2', yPos + 8)
+                .attr('stroke', targetColor).attr('stroke-width', 2).attr('stroke-dasharray', 'none');
+
+              // Speedup label
+              const labelX = (x1Pos + x2Pos) / 2;
+              annG.append('text').attr('class', 'speedup-label')
+                .attr('x', labelX).attr('y', yPos - 10)
+                .attr('text-anchor', 'middle')
+                .attr('fill', targetColor)
+                .attr('stroke', 'var(--surface-bg)').attr('stroke-width', 3)
+                .attr('font-size', isMobile ? 12 : 14)
+                .text(`${speedup.toFixed(1)}× faster`);
+
+              // Vertical "how much better" annotation at baselineStep
+              const targetAtBaseline = targetSeries.values.find(v => v.step === baselineStepNum);
+              if (targetAtBaseline) {
+                const targetVal = targetAtBaseline.value;
+                const pctBetter = ((targetVal - baselineVal) / baselineVal * 100).toFixed(0);
+                const yTop = y(targetVal);
+                const yBot = y(baselineVal);
+                const vx = x2Pos;
+
+                // Vertical line from baseline to FinePhrase at that step
+                annG.append('line')
+                  .attr('x1', vx).attr('x2', vx)
+                  .attr('y1', yBot).attr('y2', yTop)
+                  .attr('stroke', targetColor).attr('stroke-width', 2).attr('stroke-dasharray', 'none');
+
+                // Tick caps
+                const capW = 5;
+                annG.append('line')
+                  .attr('x1', vx - capW).attr('x2', vx + capW)
+                  .attr('y1', yBot).attr('y2', yBot)
+                  .attr('stroke', targetColor).attr('stroke-width', 2);
+                annG.append('line')
+                  .attr('x1', vx - capW).attr('x2', vx + capW)
+                  .attr('y1', yTop).attr('y2', yTop)
+                  .attr('stroke', targetColor).attr('stroke-width', 2);
+
+                // "+X% better" label (place left of line if near right edge)
+                const nearRightEdge = vx > innerWidth * 0.75;
+                annG.append('text').attr('class', 'speedup-label')
+                  .attr('x', nearRightEdge ? vx - 8 : vx + 8)
+                  .attr('y', (yTop + yBot) / 2)
+                  .attr('text-anchor', nearRightEdge ? 'end' : 'start')
+                  .attr('dominant-baseline', 'central')
+                  .attr('fill', targetColor)
+                  .attr('stroke', 'var(--surface-bg)').attr('stroke-width', 3)
+                  .attr('font-size', isMobile ? 11 : 13)
+                  .text(`${pctBetter}% better`);
+              }
+            }
+          }
+        }
+
         // Hover overlay
         gRoot.selectAll('.hover-line').data([0]).join('line').attr('class', 'hover-line')
           .attr('y1', 0).attr('y2', innerHeight).style('display', 'none');