update charts

app/src/components/HtmlEmbed.astro

@@ -69,7 +69,7 @@ const mountId = `frag-${Math.random().toString(36).slice(2)}`;
   </script>
 
 <style is:global>
-  .html-embed { margin: 0 0 var(--block-spacing-y); overflow: hidden; }
+  .html-embed { margin: 0 0 var(--block-spacing-y); }
   .html-embed__title { 
     text-align: left; 
     font-weight: 600; 

app/src/content/article.mdx

@@ -340,10 +340,10 @@ If not specified otherwise, the “Baseline” in our intra dataset ablations re
 
 Compared against existing VLM training datasets, **FineVision** produces significantly higher benchmark ranks than the other options.
 
-Over the 10 different metrics, **FineVision** achieves a **45.68%** improvement over the Cauldron, a **13.04%** improvement over Cambrian, and a **46.83%** improvement over LLaVa.
+Over the 10 different metrics, **FineVision** achieves a **45.68%** improvement over the Cauldron, a **13.04%** improvement over Cambrian, and a **46.83%** improvement over LLaVa. <a href="#against-baselines">Fig1</a>
 
 ---
-<HtmlEmbed src="against-baselines.html" desc="Average Rank of Models trained on different open source datasets." />
+<HtmlEmbed id="against-baselines" src="against-baselines.html" desc="Average Rank of Models trained on different open source datasets." />
 
 ### How contaminated are the datasets?
 

app/src/content/embeds/against-baselines-deduplicated.html

@@ -143,7 +143,7 @@
 
       const labelMetric = document.createElement('label');
       Object.assign(labelMetric.style, {
-        fontSize: '12px', color: 'var(--muted-color)', display: 'flex', alignItems: 'center', gap: '6px', whiteSpace: 'nowrap', padding: '6px 10px', marginLeft: 'auto'
+        fontSize: '11px', color: 'var(--muted-color)', opacity: 0.8, display: 'flex', alignItems: 'center', gap: '6px', whiteSpace: 'nowrap', padding: '6px 10px', marginLeft: 'auto'
       });
       labelMetric.textContent = 'Metric';
       const selectMetric = document.createElement('select');
@@ -158,7 +158,7 @@
         gap: '8px',
         alignItems: 'center',
         flexWrap: 'nowrap',
-        fontSize: '11px',
+        fontSize: '14px',
         marginLeft: '8px'
       });
       controls.appendChild(legendInline);
@@ -272,6 +272,25 @@
         }
       }
 
+      // Small SVG markup for marker shape (used in hover tooltip)
+      function shapeSvgMarkup(shape, color) {
+        const stroke = color;
+        switch (shape) {
+          case 'circle':
+            return `<svg width="14" height="12" viewBox="-6 -6 12 12" aria-hidden="true"><circle r="5" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+          case 'square':
+            return `<svg width="14" height="12" viewBox="-6 -6 12 12" aria-hidden="true"><rect x="-5" y="-5" width="10" height="10" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+          case 'triangle':
+            return `<svg width="14" height="12" viewBox="-6 -6 12 12" aria-hidden="true"><path d="M0,-6 L5,3 L-5,3 Z" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+          case 'diamond':
+            return `<svg width="14" height="12" viewBox="-6 -6 12 12" aria-hidden="true"><path d="M0,-6 L6,0 L0,6 L-6,0 Z" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+          case 'inverted-triangle':
+            return `<svg width="14" height="12" viewBox="-6 -6 12 12" aria-hidden="true"><path d="M0,6 L5,-3 L-5,-3 Z" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+          default:
+            return `<svg width="14" height="12" viewBox="-6 -6 12 12" aria-hidden="true"><circle r="5" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+        }
+      }
+
       // Hover elements
       const hoverLine = gHover.append('line').attr('stroke-width', 1);
 
@@ -485,15 +504,15 @@
           
           // Create small SVG for marker shape
           const markerSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-          markerSvg.setAttribute('width', '16');
-          markerSvg.setAttribute('height', '12');
+          markerSvg.setAttribute('width', '18');
+          markerSvg.setAttribute('height', '14');
           markerSvg.style.display = 'inline-block';
           
           const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
           g.setAttribute('transform', 'translate(8,6)');
           
           let shape;
-          const size = 6;
+          const size = 9;
           const halfSize = size / 2;
           switch(s.marker) {
             case 'circle':
@@ -546,17 +565,22 @@
           const sx = Math.max(steps[0], Math.min(steps[steps.length-1], Math.round(xScale.invert(mx)/1)*1));
           const nearest = steps.reduce((best, s)=> Math.abs(s - xScale.invert(mx)) < Math.abs(best - xScale.invert(mx)) ? s : best, steps[0]);
           const xpx = xScale(nearest);
-          hoverLine.attr('x1', xpx).attr('x2', xpx).style('display', null).attr('stroke', 'rgba(0,0,0,0.25)');
-          // Tooltip content
+          // Theme-aware stroke already set in updateScales; don't override color here
+          hoverLine.attr('x1', xpx).attr('x2', xpx).style('display', null);
+          // Tooltip content trié par valeur au step hoveré
           let html = `<div><strong>${getMetricDisplayName(metricKey)}</strong></div><div><strong>step</strong> ${nearest}</div>`;
+          const items = [];
           series.forEach(s=>{
             const m = new Map(s.values.map(v=>[v.step, v]));
             const pt = m.get(nearest);
-            if (pt && pt.value != null) {
-              const formatVal = (vv) => (isRankStrict ? d3.format('d')(vv) : (+vv).toFixed(4));
-              const errTxt = (pt.stderr != null && isFinite(pt.stderr) && pt.stderr > 0) ? ` ± ${formatVal(pt.stderr)}` : '';
-              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(pt.value)}${errTxt}</div>`;
-            }
+            if (pt && pt.value != null) items.push({ s, pt });
+          });
+          // Tri: normal → ascendant; rank strict → descendant
+          const formatVal = (vv) => (isRankStrictFlag ? d3.format('d')(vv) : (+vv).toFixed(4));
+          items.sort((a,b)=> isRankStrictFlag ? (b.pt.value - a.pt.value) : (a.pt.value - b.pt.value));
+          items.forEach(({ s, pt }) => {
+            const errTxt = (pt.stderr != null && isFinite(pt.stderr) && pt.stderr > 0) ? ` ± ${formatVal(pt.stderr)}` : '';
+            html += `<div style="display:flex;align-items:center;gap:6px;">${shapeSvgMarkup(s.marker, s.color)}<strong>${s.run}</strong> ${formatVal(pt.value)}${errTxt}</div>`;
           });
           tipInner.innerHTML = html;
           const offsetX = 12, offsetY = 12;
@@ -581,7 +605,16 @@
           }));
           metricList = Array.from(new Set(rows.map(r=>r.metric))).sort();
           runList = Array.from(new Set(rows.map(r=>r.run))).sort();
-          runOrder = runList;
+          // Prioritize 'finevisionDD' first, then 'FineVision' if present
+          {
+            const priorities = ['finevisiondd', 'finevision'];
+            const lowerMap = new Map(runList.map(r => [String(r).toLowerCase(), r]));
+            const selected = [];
+            priorities.forEach(p => { const found = lowerMap.get(p); if (found && !selected.includes(found)) selected.push(found); });
+            const selectedLower = new Set(selected.map(r => String(r).toLowerCase()));
+            const rest = runList.filter(r => !selectedLower.has(String(r).toLowerCase()));
+            runOrder = selected.concat(rest);
+          }
           // Build dataByMetric
           metricList.forEach(m => {
             const map = {};

app/src/content/embeds/against-baselines.html

@@ -140,7 +140,7 @@
 
       const labelMetric = document.createElement('label');
       Object.assign(labelMetric.style, {
-        fontSize: '12px', color: 'var(--muted-color)', display: 'flex', alignItems: 'center', gap: '6px', whiteSpace: 'nowrap', padding: '6px 10px', marginLeft: 'auto'
+        fontSize: '11px', color: 'var(--muted-color)', opacity: 0.8, display: 'flex', alignItems: 'center', gap: '6px', whiteSpace: 'nowrap', padding: '6px 10px', marginLeft: 'auto'
       });
       labelMetric.textContent = 'Metric';
       const selectMetric = document.createElement('select');
@@ -155,7 +155,7 @@
         gap: '8px',
         alignItems: 'center',
         flexWrap: 'nowrap',
-        fontSize: '11px',
+        fontSize: '14px',
         marginLeft: '8px'
       });
       controls.appendChild(legendInline);
@@ -270,6 +270,26 @@
         }
       }
 
+      // Small SVG markup for marker shape (used in hover tooltip)
+      function shapeSvgMarkup(shape, color) {
+        const stroke = color;
+        // Use a normalized 12x12 box with centered origin for consistent shapes
+        switch (shape) {
+          case 'circle':
+            return `<svg width="14" height="12" viewBox="-6 -6 12 12" aria-hidden="true"><circle r="5" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+          case 'square':
+            return `<svg width="14" height="12" viewBox="-6 -6 12 12" aria-hidden="true"><rect x="-5" y="-5" width="10" height="10" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+          case 'triangle':
+            return `<svg width="14" height="12" viewBox="-6 -6 12 12" aria-hidden="true"><path d="M0,-6 L5,3 L-5,3 Z" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+          case 'diamond':
+            return `<svg width="14" height="12" viewBox="-6 -6 12 12" aria-hidden="true"><path d="M0,-6 L6,0 L0,6 L-6,0 Z" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+          case 'inverted-triangle':
+            return `<svg width="14" height="12" viewBox="-6 -6 12 12" aria-hidden="true"><path d="M0,6 L5,-3 L-5,-3 Z" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+          default:
+            return `<svg width="14" height="12" viewBox="-6 -6 12 12" aria-hidden="true"><circle r="5" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+        }
+      }
+
       // Hover elements
       const hoverLine = gHover.append('line').attr('stroke-width', 1);
 
@@ -487,15 +507,15 @@
           
           // Create small SVG for marker shape
           const markerSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-          markerSvg.setAttribute('width', '16');
-          markerSvg.setAttribute('height', '12');
+          markerSvg.setAttribute('width', '18');
+          markerSvg.setAttribute('height', '14');
           markerSvg.style.display = 'inline-block';
           
           const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
           g.setAttribute('transform', 'translate(8,6)');
           
           let shape;
-          const size = 6;
+          const size = 9;
           const halfSize = size / 2;
           switch(s.marker) {
             case 'circle':
@@ -548,17 +568,22 @@
           const sx = Math.max(steps[0], Math.min(steps[steps.length-1], Math.round(xScale.invert(mx)/1)*1));
           const nearest = steps.reduce((best, s)=> Math.abs(s - xScale.invert(mx)) < Math.abs(best - xScale.invert(mx)) ? s : best, steps[0]);
           const xpx = xScale(nearest);
-          hoverLine.attr('x1', xpx).attr('x2', xpx).style('display', null).attr('stroke', 'rgba(0,0,0,0.25)');
-          // Tooltip content
+          // Use theme-aware stroke set in updateScales (don't override color here)
+          hoverLine.attr('x1', xpx).attr('x2', xpx).style('display', null);
+          // Tooltip content (sorted by value at hovered step)
           let html = `<div><strong>${getMetricDisplayName(metricKey)}</strong></div><div><strong>step</strong> ${nearest}</div>`;
+          const items = [];
           series.forEach(s=>{
             const m = new Map(s.values.map(v=>[v.step, v]));
             const pt = m.get(nearest);
-            if (pt && pt.value != null) {
-              const formatVal = (vv) => (isRankStrict ? d3.format('d')(vv) : (+vv).toFixed(4));
-              const errTxt = (pt.stderr != null && isFinite(pt.stderr) && pt.stderr > 0) ? ` ± ${formatVal(pt.stderr)}` : '';
-              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(pt.value)}${errTxt}</div>`;
-            }
+            if (pt && pt.value != null) items.push({ s, pt });
+          });
+          // Inverser l'ordre: métriques normales → ascendant; métriques de rang → descendant
+          items.sort((a,b)=> isRankStrict ? (b.pt.value - a.pt.value) : (a.pt.value - b.pt.value));
+          const formatVal = (vv) => (isRankStrict ? d3.format('d')(vv) : (+vv).toFixed(4));
+          items.forEach(({ s, pt }) => {
+            const errTxt = (pt.stderr != null && isFinite(pt.stderr) && pt.stderr > 0) ? ` ± ${formatVal(pt.stderr)}` : '';
+            html += `<div style="display:flex;align-items:center;gap:6px;">${shapeSvgMarkup(s.marker, s.color)}<strong>${s.run}</strong> ${formatVal(pt.value)}${errTxt}</div>`;
           });
           tipInner.innerHTML = html;
           const offsetX = 12, offsetY = 12;
@@ -583,7 +608,9 @@
           }));
           metricList = Array.from(new Set(rows.map(r=>r.metric))).sort();
           runList = Array.from(new Set(rows.map(r=>r.run))).sort();
-          runOrder = runList;
+          // Prioriser FineVision en tête d'affichage (légende, couleurs, etc.)
+          const prioritizeRun = (list, name) => (list.includes(name) ? [name, ...list.filter(r => r !== name)] : list);
+          runOrder = prioritizeRun(runList, 'FineVision');
           // Build dataByMetric
           metricList.forEach(m => {
             const map = {};

app/src/content/embeds/all-ratings.html

@@ -140,7 +140,7 @@
 
       const labelMetric = document.createElement('label');
       Object.assign(labelMetric.style, {
-        fontSize: '12px', color: 'var(--muted-color)', display: 'flex', alignItems: 'center', gap: '6px', whiteSpace: 'nowrap', padding: '6px 10px', marginLeft: 'auto'
+        fontSize: '11px', color: 'var(--muted-color)', opacity: 0.8, display: 'flex', alignItems: 'center', gap: '6px', whiteSpace: 'nowrap', padding: '6px 10px', marginLeft: 'auto'
       });
       labelMetric.textContent = 'Metric';
       const selectMetric = document.createElement('select');
@@ -155,7 +155,7 @@
         gap: '8px',
         alignItems: 'center',
         flexWrap: 'nowrap',
-        fontSize: '11px',
+        fontSize: '14px',
         marginLeft: '8px'
       });
       controls.appendChild(legendInline);
@@ -269,6 +269,25 @@
         }
       }
 
+      // Small SVG markup for marker shape (used in hover tooltip and legend)
+      function shapeSvgMarkup(shape, color) {
+        const stroke = color;
+        switch (shape) {
+          case 'circle':
+            return `<svg width="18" height="14" viewBox="-6 -6 12 12" aria-hidden="true"><circle r="5" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+          case 'square':
+            return `<svg width="18" height="14" viewBox="-6 -6 12 12" aria-hidden="true"><rect x="-5" y="-5" width="10" height="10" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+          case 'triangle':
+            return `<svg width="18" height="14" viewBox="-6 -6 12 12" aria-hidden="true"><path d="M0,-6 L5,3 L-5,3 Z" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+          case 'diamond':
+            return `<svg width="18" height="14" viewBox="-6 -6 12 12" aria-hidden="true"><path d="M0,-6 L6,0 L0,6 L-6,0 Z" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+          case 'inverted-triangle':
+            return `<svg width="18" height="14" viewBox="-6 -6 12 12" aria-hidden="true"><path d="M0,6 L5,-3 L-5,-3 Z" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+          default:
+            return `<svg width="18" height="14" viewBox="-6 -6 12 12" aria-hidden="true"><circle r="5" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+        }
+      }
+
       // Hover elements
       const hoverLine = gHover.append('line').attr('stroke-width', 1);
 
@@ -474,59 +493,16 @@
             .style('cursor', 'crosshair');
         });
 
-        // Inline legend content with marker shapes
+        // Inline legend content with marker shapes (size 9 => SVG ~18x14)
         legendInline.innerHTML = '';
         series.forEach(s => {
           const legendItem = document.createElement('span');
           legendItem.style.cssText = 'display:inline-flex;align-items:center;gap:6px;white-space:nowrap;';
-          
-          // Create small SVG for marker shape
-          const markerSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-          markerSvg.setAttribute('width', '16');
-          markerSvg.setAttribute('height', '12');
+
+          const markerSvg = document.createElement('span');
+          markerSvg.innerHTML = shapeSvgMarkup(s.marker, s.color);
           markerSvg.style.display = 'inline-block';
-          
-          const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-          g.setAttribute('transform', 'translate(8,6)');
-          
-          let shape;
-          const size = 6;
-          const halfSize = size / 2;
-          switch(s.marker) {
-            case 'circle':
-              shape = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-              shape.setAttribute('r', halfSize);
-              break;
-            case 'square':
-              shape = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
-              shape.setAttribute('x', -halfSize);
-              shape.setAttribute('y', -halfSize);
-              shape.setAttribute('width', size);
-              shape.setAttribute('height', size);
-              break;
-            case 'triangle':
-              shape = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-              shape.setAttribute('d', `M0,${-halfSize * 1.2} L${halfSize * 1.1},${halfSize * 0.6} L${-halfSize * 1.1},${halfSize * 0.6} Z`);
-              break;
-            case 'diamond':
-              shape = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-              shape.setAttribute('d', `M0,${-halfSize * 1.2} L${halfSize * 1.1},0 L0,${halfSize * 1.2} L${-halfSize * 1.1},0 Z`);
-              break;
-            case 'inverted-triangle':
-              shape = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-              shape.setAttribute('d', `M0,${halfSize * 1.2} L${halfSize * 1.1},${-halfSize * 0.6} L${-halfSize * 1.1},${-halfSize * 0.6} Z`);
-              break;
-            default:
-              shape = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-              shape.setAttribute('r', halfSize);
-          }
-          shape.setAttribute('fill', s.color);
-          shape.setAttribute('stroke', s.color);
-          shape.setAttribute('stroke-width', '1');
-          
-          g.appendChild(shape);
-          markerSvg.appendChild(g);
-          
+
           const label = document.createElement('span');
           label.textContent = s.run;
           
@@ -543,17 +519,22 @@
           const sx = Math.max(steps[0], Math.min(steps[steps.length-1], Math.round(xScale.invert(mx)/1)*1));
           const nearest = steps.reduce((best, s)=> Math.abs(s - xScale.invert(mx)) < Math.abs(best - xScale.invert(mx)) ? s : best, steps[0]);
           const xpx = xScale(nearest);
-          hoverLine.attr('x1', xpx).attr('x2', xpx).style('display', null).attr('stroke', 'rgba(0,0,0,0.25)');
-          // Tooltip content
+          // Keep theme-aware stroke from updateScales; do not override here
+          hoverLine.attr('x1', xpx).attr('x2', xpx).style('display', null);
+          // Tooltip content with sorted runs
           let html = `<div><strong>${getMetricDisplayName(metricKey)}</strong></div><div><strong>step</strong> ${nearest}</div>`;
+          const entries = [];
           series.forEach(s=>{
             const m = new Map(s.values.map(v=>[v.step, v]));
             const pt = m.get(nearest);
-            if (pt && pt.value != null) {
-              const formatVal = (vv) => (isRankStrict ? d3.format('d')(vv) : (+vv).toFixed(4));
-              const errTxt = (pt.stderr != null && isFinite(pt.stderr) && pt.stderr > 0) ? ` ± ${formatVal(pt.stderr)}` : '';
-              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(pt.value)}${errTxt}</div>`;
-            }
+            if (pt && pt.value != null) entries.push({ s, pt });
+          });
+          const isRankStrict = isRankStrictFlag;
+          const formatVal = (vv) => (isRankStrict ? d3.format('d')(vv) : (+vv).toFixed(4));
+          entries.sort((a,b)=> isRankStrict ? (b.pt.value - a.pt.value) : (a.pt.value - b.pt.value));
+          entries.forEach(({ s, pt }) => {
+            const errTxt = (pt.stderr != null && isFinite(pt.stderr) && pt.stderr > 0) ? ` ± ${formatVal(pt.stderr)}` : '';
+            html += `<div style="display:flex;align-items:center;gap:6px;">${shapeSvgMarkup(s.marker, s.color)}<strong>${s.run}</strong> ${formatVal(pt.value)}${errTxt}</div>`;
           });
           tipInner.innerHTML = html;
           const offsetX = 12, offsetY = 12;
@@ -578,7 +559,8 @@
           }));
           metricList = Array.from(new Set(rows.map(r=>r.metric))).sort();
           runList = Array.from(new Set(rows.map(r=>r.run))).sort();
-          runOrder = runList;
+          const prioritizeRun = (list, name) => (list.includes(name) ? [name, ...list.filter(r => r !== name)] : list);
+          runOrder = prioritizeRun(runList, 'FineVision');
           // Build dataByMetric
           metricList.forEach(m => {
             const map = {};

app/src/content/embeds/filters-quad.html

@@ -15,7 +15,7 @@
   @media (max-width: 980px) { .filters-quad__grid { grid-template-columns: 1fr; } }
 
   .filters-quad__controls { display:flex; align-items:center; justify-content:center; gap:12px; margin: 6px 0 12px 0; flex-wrap:wrap; }
-  .filters-quad__controls label { font-size:14px; color: var(--text-color); font-weight:600; display:flex; align-items:center; gap:8px; }
+  .filters-quad__controls label { font-size:11px; color: var(--muted-color); opacity: .8; display:flex; align-items:center; gap:8px; }
   .filters-quad__controls select {
     font-size: 14px; padding: 8px 32px 8px 12px; border: 1px solid var(--border-color); border-radius: 10px;
     background-color: var(--surface-bg); color: var(--text-color);
@@ -28,7 +28,7 @@
   .filters-quad__controls select:hover { border-color: var(--primary-color); }
   .filters-quad__controls select:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(232,137,171,.25); outline: none; }
 
-  .filters-quad__legend { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; font-size:12px; color: var(--text-color); margin: 2px 0 10px 0; }
+  .filters-quad__legend { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; font-size:14px; color: var(--text-color); margin: 2px 0 10px 0; }
   .filters-quad__legend .item { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
   .filters-quad__legend .swatch { width:10px; height:10px; border-radius:50%; display:inline-block; }
 
@@ -112,7 +112,7 @@
       const primary = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim() || '#E889AB';
       const pool = [primary, '#4EA5B7', '#E38A42', '#CEC0FA', ...(d3.schemeTableau10||[])];
       const markerShapes = ['circle', 'square', 'triangle', 'diamond', 'inverted-triangle'];
-      const markerSize = 8;
+      const markerSize = 9;
       function drawMarker(selection, shape, size) {
         const s = size / 2;
         switch (shape) {
@@ -163,8 +163,8 @@
         gAxes.selectAll('*').remove();
         let xAxis = d3.axisBottom(xScale).tickSizeOuter(0); xAxis = xAxis.ticks(8);
         const yAxis = d3.axisLeft(yScale).tickValues(yTicks).tickSizeOuter(0).tickFormat(isRankStrictFlag ? d3.format('d') : 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','11px'); });
-        gAxes.append('g').call(yAxis).call(g=>{ g.selectAll('path, line').attr('stroke',axisColor); g.selectAll('text').attr('fill',tickColor).style('font-size','11px'); });
+        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'); });
 
         // Legend box (top-right)
         // Per-cell legend hidden; global legend is used
@@ -228,10 +228,23 @@
         // Hover
         gHover.selectAll('*').remove();
         const overlay = gHover.append('rect').attr('fill','transparent').style('cursor','crosshair').attr('x',0).attr('y',0).attr('width', innerWidth).attr('height', innerHeight);
-        const hoverLine = gHover.append('line').attr('stroke','rgba(0,0,0,0.25)').attr('stroke-width',1).attr('y1',0).attr('y2',innerHeight).style('display','none');
+        const axisColor = document.documentElement.getAttribute('data-theme') === 'dark' ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.25)';
+        const hoverLine = gHover.append('line').attr('stroke',axisColor).attr('stroke-width',1).attr('y1',0).attr('y2',innerHeight).style('display','none');
         const stepSet = new Set(); series.forEach(s=>s.values.forEach(v=>stepSet.add(v.step))); const steps = Array.from(stepSet).sort((a,b)=>a-b);
         function onMove(ev){ const [mx,my]=d3.pointer(ev, overlay.node()); const nearest = steps.reduce((best,s)=> Math.abs(s - xScale.invert(mx)) < Math.abs(best - xScale.invert(mx)) ? s : best, steps[0]); const xpx = xScale(nearest); hoverLine.attr('x1',xpx).attr('x2',xpx).style('display',null);
-          let html = `<div><strong>${titleText}</strong></div><div><strong>step</strong> ${nearest}</div>`; series.forEach(s=>{ const m = new Map(s.values.map(v=>[v.step, v])); const pt = m.get(nearest); if (pt && pt.value!=null){ const fmt = (vv)=> (isRankStrictFlag? d3.format('d')(vv) : (+vv).toFixed(4)); const err = (pt.stderr!=null && isFinite(pt.stderr) && pt.stderr>0) ? ` ± ${fmt(pt.stderr)}` : ''; 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> ${fmt(pt.value)}${err}</div>`; }});
+          let html = `<div><strong>${titleText}</strong></div><div><strong>step</strong> ${nearest}</div>`;
+          const withPt = series.map(s=>{ const m=new Map(s.values.map(v=>[v.step,v])); const pt=m.get(nearest); return {s, pt}; }).filter(d=>d.pt && d.pt.value!=null);
+          withPt.sort((a,b)=> isRankStrictFlag ? (b.pt.value - a.pt.value) : (a.pt.value - b.pt.value));
+          const shapeSvg = (shape, color) => {
+            const size=9, half=size/2, cx=9, cy=7, sw='1';
+            if(shape==='circle') return `<svg width="18" height="14" viewBox="0 0 18 14" aria-hidden="true"><g transform="translate(${cx},${cy})"><circle r="${half}" fill="${color}" stroke="${color}" stroke-width="${sw}"/></g></svg>`;
+            if(shape==='square') return `<svg width="18" height="14" viewBox="0 0 18 14" aria-hidden="true"><g transform="translate(${cx},${cy})"><rect x="${-half}" y="${-half}" width="${size}" height="${size}" fill="${color}" stroke="${color}" stroke-width="${sw}"/></g></svg>`;
+            if(shape==='triangle') return `<svg width="18" height="14" viewBox="0 0 18 14" aria-hidden="true"><g transform="translate(${cx},${cy})"><path d="M0,${-half*1.2} L${half*1.1},${half*0.6} L${-half*1.1},${half*0.6} Z" fill="${color}" stroke="${color}" stroke-width="${sw}"/></g></svg>`;
+            if(shape==='diamond') return `<svg width="18" height="14" viewBox="0 0 18 14" aria-hidden="true"><g transform="translate(${cx},${cy})"><path d="M0,${-half*1.2} L${half*1.1},0 L0,${half*1.2} L${-half*1.1},0 Z" fill="${color}" stroke="${color}" stroke-width="${sw}"/></g></svg>`;
+            if(shape==='inverted-triangle') return `<svg width="18" height="14" viewBox="0 0 18 14" aria-hidden="true"><g transform="translate(${cx},${cy})"><path d="M0,${half*1.2} L${half*1.1},${-half*0.6} L${-half*1.1},${-half*0.6} Z" fill="${color}" stroke="${color}" stroke-width="${sw}"/></g></svg>`;
+            return `<svg width="18" height="14" viewBox="0 0 18 14" aria-hidden="true"><g transform="translate(${cx},${cy})"><circle r="${half}" fill="${color}" stroke="${color}" stroke-width="${sw}"/></g></svg>`;
+          };
+          withPt.forEach(({s,pt})=>{ const fmt=(vv)=> (isRankStrictFlag? d3.format('d')(vv) : (+vv).toFixed(4)); const err=(pt.stderr!=null && isFinite(pt.stderr) && pt.stderr>0)? ` ± ${fmt(pt.stderr)}` : ''; html+=`<div style="display:flex;align-items:center;gap:6px;white-space:nowrap;">${shapeSvg(s.marker, s.color)}<strong>${s.run}</strong> ${fmt(pt.value)}${err}</div>`; });
           tipInner.innerHTML = html; 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'); }
         overlay.on('mousemove', onMove).on('mouseleave', onLeave);
@@ -328,18 +341,19 @@
             if (r.ok && window.d3 && window.d3.csvParse) {
               const txt = await r.text();
               const rows = window.d3.csvParse(txt);
-              const runList = Array.from(new Set(rows.map(row => String(row.run||'').trim()).filter(Boolean)));
+              let runList = Array.from(new Set(rows.map(row => String(row.run||'').trim()).filter(Boolean)));
+              if (runList.includes('FineVision')) { runList = ['FineVision', ...runList.filter(r => r !== 'FineVision')]; }
               const primary = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim() || '#E889AB';
               const pool = [primary, '#4EA5B7', '#E38A42', '#CEC0FA', ...((window.d3 && window.d3.schemeTableau10) ? window.d3.schemeTableau10 : ['#4e79a7','#f28e2b','#e15759','#76b7b2','#59a14f','#edc948','#b07aa1','#ff9da7','#9c755f','#bab0ab'])];
               const markerShapes = ['circle', 'square', 'triangle', 'diamond', 'inverted-triangle'];
               const shapeSVG = (shape, color) => {
-                const size = 12; const s = size/2; const stroke = color;
-                if (shape === 'circle') return `<svg width="12" height="12" viewBox="-6 -6 12 12" aria-hidden="true"><circle r="5" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
-                if (shape === 'square') return `<svg width="12" height="12" viewBox="-6 -6 12 12" aria-hidden="true"><rect x="-5" y="-5" width="10" height="10" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
-                if (shape === 'triangle') return `<svg width="12" height="12" viewBox="-6 -6 12 12" aria-hidden="true"><path d="M0,-6 L5,3 L-5,3 Z" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
-                if (shape === 'diamond') return `<svg width="12" height="12" viewBox="-6 -6 12 12" aria-hidden="true"><path d="M0,-6 L6,0 L0,6 L-6,0 Z" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
-                if (shape === 'inverted-triangle') return `<svg width="12" height="12" viewBox="-6 -6 12 12" aria-hidden="true"><path d="M0,6 L5,-3 L-5,-3 Z" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
-                return `<svg width="12" height="12" viewBox="-6 -6 12 12" aria-hidden="true"><circle r="5" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+                const size = 9; const s = size/2; const stroke = color;
+                if (shape === 'circle') return `<svg width="18" height="14" viewBox="0 0 18 14" aria-hidden="true"><g transform="translate(9,7)"><circle r="${s}" fill="${color}" stroke="${stroke}" stroke-width="1" /></g></svg>`;
+                if (shape === 'square') return `<svg width="18" height="14" viewBox="0 0 18 14" aria-hidden="true"><g transform="translate(9,7)"><rect x="${-s}" y="${-s}" width="${size}" height="${size}" fill="${color}" stroke="${stroke}" stroke-width="1" /></g></svg>`;
+                if (shape === 'triangle') return `<svg width="18" height="14" viewBox="0 0 18 14" aria-hidden="true"><g transform="translate(9,7)"><path d="M0,${-s*1.2} L${s*1.1},${s*0.6} L${-s*1.1},${s*0.6} Z" fill="${color}" stroke="${stroke}" stroke-width="1" /></g></svg>`;
+                if (shape === 'diamond') return `<svg width="18" height="14" viewBox="0 0 18 14" aria-hidden="true"><g transform="translate(9,7)"><path d="M0,${-s*1.2} L${s*1.1},0 L0,${s*1.2} L${-s*1.1},0 Z" fill="${color}" stroke="${stroke}" stroke-width="1" /></g></svg>`;
+                if (shape === 'inverted-triangle') return `<svg width="18" height="14" viewBox="0 0 18 14" aria-hidden="true"><g transform="translate(9,7)"><path d="M0,${s*1.2} L${s*1.1},${-s*0.6} L${-s*1.1},${-s*0.6} Z" fill="${color}" stroke="${stroke}" stroke-width="1" /></g></svg>`;
+                return `<svg width="18" height="14" viewBox="0 0 18 14" aria-hidden="true"><g transform="translate(9,7)"><circle r="${s}" fill="${color}" stroke="${stroke}" stroke-width="1" /></g></svg>`;
               };
               legendHost.innerHTML = runList.map((name, i)=> {
                 const color = pool[i % pool.length];

app/src/content/embeds/formatting-filters.html

@@ -140,7 +140,7 @@
 
       const labelMetric = document.createElement('label');
       Object.assign(labelMetric.style, {
-        fontSize: '12px', color: 'var(--muted-color)', display: 'flex', alignItems: 'center', gap: '6px', whiteSpace: 'nowrap', padding: '6px 10px', marginLeft: 'auto'
+        fontSize: '11px', color: 'var(--muted-color)', opacity: 0.8, display: 'flex', alignItems: 'center', gap: '6px', whiteSpace: 'nowrap', padding: '6px 10px', marginLeft: 'auto'
       });
       labelMetric.textContent = 'Metric';
       const selectMetric = document.createElement('select');
@@ -155,7 +155,7 @@
         gap: '8px',
         alignItems: 'center',
         flexWrap: 'nowrap',
-        fontSize: '11px',
+        fontSize: '14px',
         marginLeft: '8px'
       });
       controls.appendChild(legendInline);
@@ -269,6 +269,25 @@
         }
       }
 
+      // Small SVG markup for marker shape (used in hover tooltip and legend)
+      function shapeSvgMarkup(shape, color) {
+        const stroke = color;
+        switch (shape) {
+          case 'circle':
+            return `<svg width="18" height="14" viewBox="-6 -6 12 12" aria-hidden="true"><circle r="5" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+          case 'square':
+            return `<svg width="18" height="14" viewBox="-6 -6 12 12" aria-hidden="true"><rect x="-5" y="-5" width="10" height="10" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+          case 'triangle':
+            return `<svg width="18" height="14" viewBox="-6 -6 12 12" aria-hidden="true"><path d="M0,-6 L5,3 L-5,3 Z" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+          case 'diamond':
+            return `<svg width="18" height="14" viewBox="-6 -6 12 12" aria-hidden="true"><path d="M0,-6 L6,0 L0,6 L-6,0 Z" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+          case 'inverted-triangle':
+            return `<svg width="18" height="14" viewBox="-6 -6 12 12" aria-hidden="true"><path d="M0,6 L5,-3 L-5,-3 Z" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+          default:
+            return `<svg width="18" height="14" viewBox="-6 -6 12 12" aria-hidden="true"><circle r="5" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+        }
+      }
+
       // Hover elements
       const hoverLine = gHover.append('line').attr('stroke-width', 1);
 
@@ -474,63 +493,19 @@
             .style('cursor', 'crosshair');
         });
 
-        // Inline legend content with marker shapes
+        // Inline legend content with marker shapes (size 9 => SVG ~18x14)
         legendInline.innerHTML = '';
         series.forEach(s => {
           const legendItem = document.createElement('span');
           legendItem.style.cssText = 'display:inline-flex;align-items:center;gap:6px;white-space:nowrap;';
-          
-          // Create small SVG for marker shape
-          const markerSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-          markerSvg.setAttribute('width', '16');
-          markerSvg.setAttribute('height', '12');
-          markerSvg.style.display = 'inline-block';
-          
-          const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-          g.setAttribute('transform', 'translate(8,6)');
-          
-          let shape;
-          const size = 6;
-          const halfSize = size / 2;
-          switch(s.marker) {
-            case 'circle':
-              shape = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-              shape.setAttribute('r', halfSize);
-              break;
-            case 'square':
-              shape = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
-              shape.setAttribute('x', -halfSize);
-              shape.setAttribute('y', -halfSize);
-              shape.setAttribute('width', size);
-              shape.setAttribute('height', size);
-              break;
-            case 'triangle':
-              shape = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-              shape.setAttribute('d', `M0,${-halfSize * 1.2} L${halfSize * 1.1},${halfSize * 0.6} L${-halfSize * 1.1},${halfSize * 0.6} Z`);
-              break;
-            case 'diamond':
-              shape = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-              shape.setAttribute('d', `M0,${-halfSize * 1.2} L${halfSize * 1.1},0 L0,${halfSize * 1.2} L${-halfSize * 1.1},0 Z`);
-              break;
-            case 'inverted-triangle':
-              shape = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-              shape.setAttribute('d', `M0,${halfSize * 1.2} L${halfSize * 1.1},${-halfSize * 0.6} L${-halfSize * 1.1},${-halfSize * 0.6} Z`);
-              break;
-            default:
-              shape = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-              shape.setAttribute('r', halfSize);
-          }
-          shape.setAttribute('fill', s.color);
-          shape.setAttribute('stroke', s.color);
-          shape.setAttribute('stroke-width', '1');
-          
-          g.appendChild(shape);
-          markerSvg.appendChild(g);
-          
+          const markerSpan = document.createElement('span');
+          markerSpan.innerHTML = shapeSvgMarkup(s.marker, s.color);
+          markerSpan.style.display = 'inline-block';
+
           const label = document.createElement('span');
           label.textContent = s.run;
           
-          legendItem.appendChild(markerSvg);
+          legendItem.appendChild(markerSpan);
           legendItem.appendChild(label);
           legendInline.appendChild(legendItem);
         });
@@ -543,17 +518,21 @@
           const sx = Math.max(steps[0], Math.min(steps[steps.length-1], Math.round(xScale.invert(mx)/1)*1));
           const nearest = steps.reduce((best, s)=> Math.abs(s - xScale.invert(mx)) < Math.abs(best - xScale.invert(mx)) ? s : best, steps[0]);
           const xpx = xScale(nearest);
-          hoverLine.attr('x1', xpx).attr('x2', xpx).style('display', null).attr('stroke', 'rgba(0,0,0,0.25)');
-          // Tooltip content
+          hoverLine.attr('x1', xpx).attr('x2', xpx).style('display', null);
+          // Tooltip content (sorted)
           let html = `<div><strong>${getMetricDisplayName(metricKey)}</strong></div><div><strong>step</strong> ${nearest}</div>`;
+          const items = [];
           series.forEach(s=>{
             const m = new Map(s.values.map(v=>[v.step, v]));
             const pt = m.get(nearest);
-            if (pt && pt.value != null) {
-              const formatVal = (vv) => (isRankStrict ? d3.format('d')(vv) : (+vv).toFixed(4));
-              const errTxt = (pt.stderr != null && isFinite(pt.stderr) && pt.stderr > 0) ? ` ± ${formatVal(pt.stderr)}` : '';
-              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(pt.value)}${errTxt}</div>`;
-            }
+            if (pt && pt.value != null) items.push({ s, pt });
+          });
+          const isRankStrict = isRankStrictFlag;
+          const formatVal = (vv) => (isRankStrict ? d3.format('d')(vv) : (+vv).toFixed(4));
+          items.sort((a,b)=> isRankStrict ? (b.pt.value - a.pt.value) : (a.pt.value - b.pt.value));
+          items.forEach(({ s, pt }) => {
+            const errTxt = (pt.stderr != null && isFinite(pt.stderr) && pt.stderr > 0) ? ` ± ${formatVal(pt.stderr)}` : '';
+            html += `<div style=\"display:flex;align-items:center;gap:6px;\">${shapeSvgMarkup(s.marker, s.color)}<strong>${s.run}</strong> ${formatVal(pt.value)}${errTxt}</div>`;
           });
           tipInner.innerHTML = html;
           const offsetX = 12, offsetY = 12;
@@ -578,7 +557,8 @@
           }));
           metricList = Array.from(new Set(rows.map(r=>r.metric))).sort();
           runList = Array.from(new Set(rows.map(r=>r.run))).sort();
-          runOrder = runList;
+          const prioritizeRun = (list, name) => (list.includes(name) ? [name, ...list.filter(r => r !== name)] : list);
+          runOrder = prioritizeRun(runList, 'FineVision');
           // Build dataByMetric
           metricList.forEach(m => {
             const map = {};

app/src/content/embeds/image-correspondence-filters.html

@@ -140,7 +140,7 @@
 
       const labelMetric = document.createElement('label');
       Object.assign(labelMetric.style, {
-        fontSize: '12px', color: 'var(--muted-color)', display: 'flex', alignItems: 'center', gap: '6px', whiteSpace: 'nowrap', padding: '6px 10px', marginLeft: 'auto'
+        fontSize: '11px', color: 'var(--muted-color)', opacity: 0.8, display: 'flex', alignItems: 'center', gap: '6px', whiteSpace: 'nowrap', padding: '6px 10px', marginLeft: 'auto'
       });
       labelMetric.textContent = 'Metric';
       const selectMetric = document.createElement('select');
@@ -155,7 +155,7 @@
         gap: '8px',
         alignItems: 'center',
         flexWrap: 'nowrap',
-        fontSize: '11px',
+        fontSize: '14px',
         marginLeft: '8px'
       });
       controls.appendChild(legendInline);
@@ -269,6 +269,25 @@
         }
       }
 
+      // Small SVG markup for marker shape (used in hover tooltip and legend)
+      function shapeSvgMarkup(shape, color) {
+        const stroke = color;
+        switch (shape) {
+          case 'circle':
+            return `<svg width="18" height="14" viewBox="-6 -6 12 12" aria-hidden="true"><circle r="5" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+          case 'square':
+            return `<svg width="18" height="14" viewBox="-6 -6 12 12" aria-hidden="true"><rect x="-5" y="-5" width="10" height="10" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+          case 'triangle':
+            return `<svg width="18" height="14" viewBox="-6 -6 12 12" aria-hidden="true"><path d="M0,-6 L5,3 L-5,3 Z" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+          case 'diamond':
+            return `<svg width="18" height="14" viewBox="-6 -6 12 12" aria-hidden="true"><path d="M0,-6 L6,0 L0,6 L-6,0 Z" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+          case 'inverted-triangle':
+            return `<svg width="18" height="14" viewBox="-6 -6 12 12" aria-hidden="true"><path d="M0,6 L5,-3 L-5,-3 Z" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+          default:
+            return `<svg width="18" height="14" viewBox="-6 -6 12 12" aria-hidden="true"><circle r="5" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+        }
+      }
+
       // Hover elements
       const hoverLine = gHover.append('line').attr('stroke-width', 1);
 
@@ -474,63 +493,19 @@
             .style('cursor', 'crosshair');
         });
 
-        // Inline legend content with marker shapes
+        // Inline legend content with marker shapes (size 9 => SVG ~18x14)
         legendInline.innerHTML = '';
         series.forEach(s => {
           const legendItem = document.createElement('span');
           legendItem.style.cssText = 'display:inline-flex;align-items:center;gap:6px;white-space:nowrap;';
-          
-          // Create small SVG for marker shape
-          const markerSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-          markerSvg.setAttribute('width', '16');
-          markerSvg.setAttribute('height', '12');
-          markerSvg.style.display = 'inline-block';
-          
-          const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-          g.setAttribute('transform', 'translate(8,6)');
-          
-          let shape;
-          const size = 6;
-          const halfSize = size / 2;
-          switch(s.marker) {
-            case 'circle':
-              shape = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-              shape.setAttribute('r', halfSize);
-              break;
-            case 'square':
-              shape = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
-              shape.setAttribute('x', -halfSize);
-              shape.setAttribute('y', -halfSize);
-              shape.setAttribute('width', size);
-              shape.setAttribute('height', size);
-              break;
-            case 'triangle':
-              shape = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-              shape.setAttribute('d', `M0,${-halfSize * 1.2} L${halfSize * 1.1},${halfSize * 0.6} L${-halfSize * 1.1},${halfSize * 0.6} Z`);
-              break;
-            case 'diamond':
-              shape = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-              shape.setAttribute('d', `M0,${-halfSize * 1.2} L${halfSize * 1.1},0 L0,${halfSize * 1.2} L${-halfSize * 1.1},0 Z`);
-              break;
-            case 'inverted-triangle':
-              shape = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-              shape.setAttribute('d', `M0,${halfSize * 1.2} L${halfSize * 1.1},${-halfSize * 0.6} L${-halfSize * 1.1},${-halfSize * 0.6} Z`);
-              break;
-            default:
-              shape = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-              shape.setAttribute('r', halfSize);
-          }
-          shape.setAttribute('fill', s.color);
-          shape.setAttribute('stroke', s.color);
-          shape.setAttribute('stroke-width', '1');
-          
-          g.appendChild(shape);
-          markerSvg.appendChild(g);
-          
+          const markerSpan = document.createElement('span');
+          markerSpan.innerHTML = shapeSvgMarkup(s.marker, s.color);
+          markerSpan.style.display = 'inline-block';
+
           const label = document.createElement('span');
           label.textContent = s.run;
           
-          legendItem.appendChild(markerSvg);
+          legendItem.appendChild(markerSpan);
           legendItem.appendChild(label);
           legendInline.appendChild(legendItem);
         });
@@ -543,17 +518,21 @@
           const sx = Math.max(steps[0], Math.min(steps[steps.length-1], Math.round(xScale.invert(mx)/1)*1));
           const nearest = steps.reduce((best, s)=> Math.abs(s - xScale.invert(mx)) < Math.abs(best - xScale.invert(mx)) ? s : best, steps[0]);
           const xpx = xScale(nearest);
-          hoverLine.attr('x1', xpx).attr('x2', xpx).style('display', null).attr('stroke', 'rgba(0,0,0,0.25)');
-          // Tooltip content
+          hoverLine.attr('x1', xpx).attr('x2', xpx).style('display', null);
+          // Tooltip content sorted
           let html = `<div><strong>${getMetricDisplayName(metricKey)}</strong></div><div><strong>step</strong> ${nearest}</div>`;
+          const items = [];
           series.forEach(s=>{
             const m = new Map(s.values.map(v=>[v.step, v]));
             const pt = m.get(nearest);
-            if (pt && pt.value != null) {
-              const formatVal = (vv) => (isRankStrict ? d3.format('d')(vv) : (+vv).toFixed(4));
-              const errTxt = (pt.stderr != null && isFinite(pt.stderr) && pt.stderr > 0) ? ` ± ${formatVal(pt.stderr)}` : '';
-              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(pt.value)}${errTxt}</div>`;
-            }
+            if (pt && pt.value != null) items.push({ s, pt });
+          });
+          const isRankStrict = isRankStrictFlag;
+          const formatVal = (vv) => (isRankStrict ? d3.format('d')(vv) : (+vv).toFixed(4));
+          items.sort((a,b)=> isRankStrict ? (b.pt.value - a.pt.value) : (a.pt.value - b.pt.value));
+          items.forEach(({ s, pt }) => {
+            const errTxt = (pt.stderr != null && isFinite(pt.stderr) && pt.stderr > 0) ? ` ± ${formatVal(pt.stderr)}` : '';
+            html += `<div style=\"display:flex;align-items:center;gap:6px;\">${shapeSvgMarkup(s.marker, s.color)}<strong>${s.run}</strong> ${formatVal(pt.value)}${errTxt}</div>`;
           });
           tipInner.innerHTML = html;
           const offsetX = 12, offsetY = 12;
@@ -578,7 +557,8 @@
           }));
           metricList = Array.from(new Set(rows.map(r=>r.metric))).sort();
           runList = Array.from(new Set(rows.map(r=>r.run))).sort();
-          runOrder = runList;
+          const prioritizeRun = (list, name) => (list.includes(name) ? [name, ...list.filter(r => r !== name)] : list);
+          runOrder = prioritizeRun(runList, 'FineVision');
           // Build dataByMetric
           metricList.forEach(m => {
             const map = {};

app/src/content/embeds/internal-deduplication.html

@@ -140,7 +140,7 @@
 
       const labelMetric = document.createElement('label');
       Object.assign(labelMetric.style, {
-        fontSize: '12px', color: 'var(--muted-color)', display: 'flex', alignItems: 'center', gap: '6px', whiteSpace: 'nowrap', padding: '6px 10px', marginLeft: 'auto'
+        fontSize: '11px', color: 'var(--muted-color)', opacity: 0.8, display: 'flex', alignItems: 'center', gap: '6px', whiteSpace: 'nowrap', padding: '6px 10px', marginLeft: 'auto'
       });
       labelMetric.textContent = 'Metric';
       const selectMetric = document.createElement('select');
@@ -155,7 +155,7 @@
         gap: '8px',
         alignItems: 'center',
         flexWrap: 'nowrap',
-        fontSize: '11px',
+        fontSize: '14px',
         marginLeft: '8px'
       });
       controls.appendChild(legendInline);
@@ -269,6 +269,25 @@
         }
       }
 
+      // Small SVG markup for marker shape (used in tooltips/legend)
+      function shapeSvgMarkup(shape, color) {
+        const stroke = color;
+        switch (shape) {
+          case 'circle':
+            return `<svg width="18" height="14" viewBox="-6 -6 12 12" aria-hidden="true"><circle r="5" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+          case 'square':
+            return `<svg width="18" height="14" viewBox="-6 -6 12 12" aria-hidden="true"><rect x="-5" y="-5" width="10" height="10" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+          case 'triangle':
+            return `<svg width="18" height="14" viewBox="-6 -6 12 12" aria-hidden="true"><path d="M0,-6 L5,3 L-5,3 Z" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+          case 'diamond':
+            return `<svg width="18" height="14" viewBox="-6 -6 12 12" aria-hidden="true"><path d="M0,-6 L6,0 L0,6 L-6,0 Z" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+          case 'inverted-triangle':
+            return `<svg width="18" height="14" viewBox="-6 -6 12 12" aria-hidden="true"><path d="M0,6 L5,-3 L-5,-3 Z" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+          default:
+            return `<svg width="18" height="14" viewBox="-6 -6 12 12" aria-hidden="true"><circle r="5" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+        }
+      }
+
       // Hover elements
       const hoverLine = gHover.append('line').attr('stroke-width', 1);
 
@@ -482,15 +501,15 @@
           
           // Create small SVG for marker shape
           const markerSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-          markerSvg.setAttribute('width', '16');
-          markerSvg.setAttribute('height', '12');
+          markerSvg.setAttribute('width', '18');
+          markerSvg.setAttribute('height', '14');
           markerSvg.style.display = 'inline-block';
           
           const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
           g.setAttribute('transform', 'translate(8,6)');
           
           let shape;
-          const size = 6;
+          const size = 9;
           const halfSize = size / 2;
           switch(s.marker) {
             case 'circle':
@@ -543,17 +562,20 @@
           const sx = Math.max(steps[0], Math.min(steps[steps.length-1], Math.round(xScale.invert(mx)/1)*1));
           const nearest = steps.reduce((best, s)=> Math.abs(s - xScale.invert(mx)) < Math.abs(best - xScale.invert(mx)) ? s : best, steps[0]);
           const xpx = xScale(nearest);
-          hoverLine.attr('x1', xpx).attr('x2', xpx).style('display', null).attr('stroke', 'rgba(0,0,0,0.25)');
-          // Tooltip content
+          hoverLine.attr('x1', xpx).attr('x2', xpx).style('display', null);
+          // Tooltip content trié
           let html = `<div><strong>${getMetricDisplayName(metricKey)}</strong></div><div><strong>step</strong> ${nearest}</div>`;
+          const items = [];
           series.forEach(s=>{
             const m = new Map(s.values.map(v=>[v.step, v]));
             const pt = m.get(nearest);
-            if (pt && pt.value != null) {
-              const formatVal = (vv) => (isRankStrict ? d3.format('d')(vv) : (+vv).toFixed(4));
-              const errTxt = (pt.stderr != null && isFinite(pt.stderr) && pt.stderr > 0) ? ` ± ${formatVal(pt.stderr)}` : '';
-              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(pt.value)}${errTxt}</div>`;
-            }
+            if (pt && pt.value != null) items.push({ s, pt });
+          });
+          const formatVal = (vv) => (isRankStrictFlag ? d3.format('d')(vv) : (+vv).toFixed(4));
+          items.sort((a,b)=> isRankStrictFlag ? (b.pt.value - a.pt.value) : (a.pt.value - b.pt.value));
+          items.forEach(({ s, pt }) => {
+            const errTxt = (pt.stderr != null && isFinite(pt.stderr) && pt.stderr > 0) ? ` ± ${formatVal(pt.stderr)}` : '';
+            html += `<div style=\"display:flex;align-items:center;gap:6px;\">${shapeSvgMarkup(s.marker, s.color)}<strong>${s.run}</strong> ${formatVal(pt.value)}${errTxt}</div>`;
           });
           tipInner.innerHTML = html;
           const offsetX = 12, offsetY = 12;
@@ -578,7 +600,8 @@
           }));
           metricList = Array.from(new Set(rows.map(r=>r.metric))).sort();
           runList = Array.from(new Set(rows.map(r=>r.run))).sort();
-          runOrder = runList;
+          const prioritizeRun = (list, name) => (list.includes(name) ? [name, ...list.filter(r => r !== name)] : list);
+          runOrder = prioritizeRun(runList, 'FineVision');
           // Build dataByMetric
           metricList.forEach(m => {
             const map = {};

app/src/content/embeds/relevance-filters.html

@@ -140,7 +140,7 @@
 
       const labelMetric = document.createElement('label');
       Object.assign(labelMetric.style, {
-        fontSize: '12px', color: 'var(--muted-color)', display: 'flex', alignItems: 'center', gap: '6px', whiteSpace: 'nowrap', padding: '6px 10px', marginLeft: 'auto'
+        fontSize: '11px', color: 'var(--muted-color)', opacity: 0.8, display: 'flex', alignItems: 'center', gap: '6px', whiteSpace: 'nowrap', padding: '6px 10px', marginLeft: 'auto'
       });
       labelMetric.textContent = 'Metric';
       const selectMetric = document.createElement('select');
@@ -155,7 +155,7 @@
         gap: '8px',
         alignItems: 'center',
         flexWrap: 'nowrap',
-        fontSize: '11px',
+        fontSize: '14px',
         marginLeft: '8px'
       });
       controls.appendChild(legendInline);
@@ -269,6 +269,25 @@
         }
       }
 
+      // Small SVG markup for marker shape (used in hover tooltip and legend)
+      function shapeSvgMarkup(shape, color) {
+        const stroke = color;
+        switch (shape) {
+          case 'circle':
+            return `<svg width=\"18\" height=\"14\" viewBox=\"-6 -6 12 12\" aria-hidden=\"true\"><circle r=\"5\" fill=\"${color}\" stroke=\"${stroke}\" stroke-width=\"1\" /></svg>`;
+          case 'square':
+            return `<svg width=\"18\" height=\"14\" viewBox=\"-6 -6 12 12\" aria-hidden=\"true\"><rect x=\"-5\" y=\"-5\" width=\"10\" height=\"10\" fill=\"${color}\" stroke=\"${stroke}\" stroke-width=\"1\" /></svg>`;
+          case 'triangle':
+            return `<svg width=\"18\" height=\"14\" viewBox=\"-6 -6 12 12\" aria-hidden=\"true\"><path d=\"M0,-6 L5,3 L-5,3 Z\" fill=\"${color}\" stroke=\"${stroke}\" stroke-width=\"1\" /></svg>`;
+          case 'diamond':
+            return `<svg width=\"18\" height=\"14\" viewBox=\"-6 -6 12 12\" aria-hidden=\"true\"><path d=\"M0,-6 L6,0 L0,6 L-6,0 Z\" fill=\"${color}\" stroke=\"${stroke}\" stroke-width=\"1\" /></svg>`;
+          case 'inverted-triangle':
+            return `<svg width=\"18\" height=\"14\" viewBox=\"-6 -6 12 12\" aria-hidden=\"true\"><path d=\"M0,6 L5,-3 L-5,-3 Z\" fill=\"${color}\" stroke=\"${stroke}\" stroke-width=\"1\" /></svg>`;
+          default:
+            return `<svg width=\"18\" height=\"14\" viewBox=\"-6 -6 12 12\" aria-hidden=\"true\"><circle r=\"5\" fill=\"${color}\" stroke=\"${stroke}\" stroke-width=\"1\" /></svg>`;
+        }
+      }
+
       // Hover elements
       const hoverLine = gHover.append('line').attr('stroke-width', 1);
 
@@ -474,63 +493,19 @@
             .style('cursor', 'crosshair');
         });
 
-        // Inline legend content with marker shapes
+        // Inline legend content with marker shapes (size 9 => SVG 18x14)
         legendInline.innerHTML = '';
         series.forEach(s => {
           const legendItem = document.createElement('span');
           legendItem.style.cssText = 'display:inline-flex;align-items:center;gap:6px;white-space:nowrap;';
-          
-          // Create small SVG for marker shape
-          const markerSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-          markerSvg.setAttribute('width', '16');
-          markerSvg.setAttribute('height', '12');
-          markerSvg.style.display = 'inline-block';
-          
-          const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-          g.setAttribute('transform', 'translate(8,6)');
-          
-          let shape;
-          const size = 6;
-          const halfSize = size / 2;
-          switch(s.marker) {
-            case 'circle':
-              shape = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-              shape.setAttribute('r', halfSize);
-              break;
-            case 'square':
-              shape = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
-              shape.setAttribute('x', -halfSize);
-              shape.setAttribute('y', -halfSize);
-              shape.setAttribute('width', size);
-              shape.setAttribute('height', size);
-              break;
-            case 'triangle':
-              shape = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-              shape.setAttribute('d', `M0,${-halfSize * 1.2} L${halfSize * 1.1},${halfSize * 0.6} L${-halfSize * 1.1},${halfSize * 0.6} Z`);
-              break;
-            case 'diamond':
-              shape = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-              shape.setAttribute('d', `M0,${-halfSize * 1.2} L${halfSize * 1.1},0 L0,${halfSize * 1.2} L${-halfSize * 1.1},0 Z`);
-              break;
-            case 'inverted-triangle':
-              shape = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-              shape.setAttribute('d', `M0,${halfSize * 1.2} L${halfSize * 1.1},${-halfSize * 0.6} L${-halfSize * 1.1},${-halfSize * 0.6} Z`);
-              break;
-            default:
-              shape = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-              shape.setAttribute('r', halfSize);
-          }
-          shape.setAttribute('fill', s.color);
-          shape.setAttribute('stroke', s.color);
-          shape.setAttribute('stroke-width', '1');
-          
-          g.appendChild(shape);
-          markerSvg.appendChild(g);
-          
+          const markerSpan = document.createElement('span');
+          markerSpan.innerHTML = shapeSvgMarkup(s.marker, s.color);
+          markerSpan.style.display = 'inline-block';
+
           const label = document.createElement('span');
           label.textContent = s.run;
           
-          legendItem.appendChild(markerSvg);
+          legendItem.appendChild(markerSpan);
           legendItem.appendChild(label);
           legendInline.appendChild(legendItem);
         });
@@ -543,17 +518,21 @@
           const sx = Math.max(steps[0], Math.min(steps[steps.length-1], Math.round(xScale.invert(mx)/1)*1));
           const nearest = steps.reduce((best, s)=> Math.abs(s - xScale.invert(mx)) < Math.abs(best - xScale.invert(mx)) ? s : best, steps[0]);
           const xpx = xScale(nearest);
-          hoverLine.attr('x1', xpx).attr('x2', xpx).style('display', null).attr('stroke', 'rgba(0,0,0,0.25)');
-          // Tooltip content
+          hoverLine.attr('x1', xpx).attr('x2', xpx).style('display', null);
+          // Tooltip content sorted
           let html = `<div><strong>${getMetricDisplayName(metricKey)}</strong></div><div><strong>step</strong> ${nearest}</div>`;
+          const items = [];
           series.forEach(s=>{
             const m = new Map(s.values.map(v=>[v.step, v]));
             const pt = m.get(nearest);
-            if (pt && pt.value != null) {
-              const formatVal = (vv) => (isRankStrict ? d3.format('d')(vv) : (+vv).toFixed(4));
-              const errTxt = (pt.stderr != null && isFinite(pt.stderr) && pt.stderr > 0) ? ` ± ${formatVal(pt.stderr)}` : '';
-              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(pt.value)}${errTxt}</div>`;
-            }
+            if (pt && pt.value != null) items.push({ s, pt });
+          });
+          const isRankStrict = isRankStrictFlag;
+          const formatVal = (vv) => (isRankStrict ? d3.format('d')(vv) : (+vv).toFixed(4));
+          items.sort((a,b)=> isRankStrict ? (b.pt.value - a.pt.value) : (a.pt.value - b.pt.value));
+          items.forEach(({ s, pt }) => {
+            const errTxt = (pt.stderr != null && isFinite(pt.stderr) && pt.stderr > 0) ? ` ± ${formatVal(pt.stderr)}` : '';
+            html += `<div style=\"display:flex;align-items:center;gap:6px;\">${shapeSvgMarkup(s.marker, s.color)}<strong>${s.run}</strong> ${formatVal(pt.value)}${errTxt}</div>`;
           });
           tipInner.innerHTML = html;
           const offsetX = 12, offsetY = 12;
@@ -578,7 +557,8 @@
           }));
           metricList = Array.from(new Set(rows.map(r=>r.metric))).sort();
           runList = Array.from(new Set(rows.map(r=>r.run))).sort();
-          runOrder = runList;
+          const prioritizeRun = (list, name) => (list.includes(name) ? [name, ...list.filter(r => r !== name)] : list);
+          runOrder = prioritizeRun(runList, 'FineVision');
           // Build dataByMetric
           metricList.forEach(m => {
             const map = {};

app/src/content/embeds/remove-ch.html

@@ -140,7 +140,7 @@
 
       const labelMetric = document.createElement('label');
       Object.assign(labelMetric.style, {
-        fontSize: '12px', color: 'var(--muted-color)', display: 'flex', alignItems: 'center', gap: '6px', whiteSpace: 'nowrap', padding: '6px 10px', marginLeft: 'auto'
+        fontSize: '11px', color: 'var(--muted-color)', opacity: 0.8, display: 'flex', alignItems: 'center', gap: '6px', whiteSpace: 'nowrap', padding: '6px 10px', marginLeft: 'auto'
       });
       labelMetric.textContent = 'Metric';
       const selectMetric = document.createElement('select');
@@ -155,7 +155,7 @@
         gap: '8px',
         alignItems: 'center',
         flexWrap: 'nowrap',
-        fontSize: '11px',
+        fontSize: '14px',
         marginLeft: '8px'
       });
       controls.appendChild(legendInline);
@@ -171,7 +171,7 @@
       
       // Academic marker shapes
       const markerShapes = ['circle', 'square', 'triangle', 'diamond', 'inverted-triangle'];
-      const markerSize = 8;
+      const markerSize = 9;
 
       // Groups
       const gRoot = svg.append('g');
@@ -269,6 +269,28 @@
         }
       }
 
+      // Small SVG markup for marker shape (used in tooltip)
+      function shapeSvgMarkup(shape, color) {
+        const size = 9; // visual marker size
+        const half = size / 2;
+        const cx = 9, cy = 7; // center for 18x14 viewport
+        const stroke = color;
+        switch (shape) {
+          case 'circle':
+            return `<svg width="18" height="14" viewBox="0 0 18 14" aria-hidden="true"><g transform="translate(${cx},${cy})"><circle r="${half}" fill="${color}" stroke="${stroke}" stroke-width="1"/></g></svg>`;
+          case 'square':
+            return `<svg width="18" height="14" viewBox="0 0 18 14" aria-hidden="true"><g transform="translate(${cx},${cy})"><rect x="${-half}" y="${-half}" width="${size}" height="${size}" fill="${color}" stroke="${stroke}" stroke-width="1"/></g></svg>`;
+          case 'triangle':
+            return `<svg width="18" height="14" viewBox="0 0 18 14" aria-hidden="true"><g transform="translate(${cx},${cy})"><path d="M0,${-half * 1.2} L${half * 1.1},${half * 0.6} L${-half * 1.1},${half * 0.6} Z" fill="${color}" stroke="${stroke}" stroke-width="1"/></g></svg>`;
+          case 'diamond':
+            return `<svg width="18" height="14" viewBox="0 0 18 14" aria-hidden="true"><g transform="translate(${cx},${cy})"><path d="M0,${-half * 1.2} L${half * 1.1},0 L0,${half * 1.2} L${-half * 1.1},0 Z" fill="${color}" stroke="${stroke}" stroke-width="1"/></g></svg>`;
+          case 'inverted-triangle':
+            return `<svg width="18" height="14" viewBox="0 0 18 14" aria-hidden="true"><g transform="translate(${cx},${cy})"><path d="M0,${half * 1.2} L${half * 1.1},${-half * 0.6} L${-half * 1.1},${-half * 0.6} Z" fill="${color}" stroke="${stroke}" stroke-width="1"/></g></svg>`;
+          default:
+            return `<svg width="18" height="14" viewBox="0 0 18 14" aria-hidden="true"><g transform="translate(${cx},${cy})"><circle r="${half}" fill="${color}" stroke="${stroke}" stroke-width="1"/></g></svg>`;
+        }
+      }
+
       // Hover elements
       const hoverLine = gHover.append('line').attr('stroke-width', 1);
 
@@ -482,15 +504,15 @@
           
           // Create small SVG for marker shape
           const markerSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-          markerSvg.setAttribute('width', '16');
-          markerSvg.setAttribute('height', '12');
+          markerSvg.setAttribute('width', '18');
+          markerSvg.setAttribute('height', '14');
           markerSvg.style.display = 'inline-block';
           
           const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-          g.setAttribute('transform', 'translate(8,6)');
+          g.setAttribute('transform', 'translate(9,7)');
           
           let shape;
-          const size = 6;
+          const size = 9;
           const halfSize = size / 2;
           switch(s.marker) {
             case 'circle':
@@ -543,17 +565,27 @@
           const sx = Math.max(steps[0], Math.min(steps[steps.length-1], Math.round(xScale.invert(mx)/1)*1));
           const nearest = steps.reduce((best, s)=> Math.abs(s - xScale.invert(mx)) < Math.abs(best - xScale.invert(mx)) ? s : best, steps[0]);
           const xpx = xScale(nearest);
-          hoverLine.attr('x1', xpx).attr('x2', xpx).style('display', null).attr('stroke', 'rgba(0,0,0,0.25)');
+          const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+          const axisColor = isDark ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.25)';
+          hoverLine.attr('x1', xpx).attr('x2', xpx).style('display', null).attr('stroke', axisColor);
           // Tooltip content
           let html = `<div><strong>${getMetricDisplayName(metricKey)}</strong></div><div><strong>step</strong> ${nearest}</div>`;
-          series.forEach(s=>{
-            const m = new Map(s.values.map(v=>[v.step, v]));
-            const pt = m.get(nearest);
-            if (pt && pt.value != null) {
-              const formatVal = (vv) => (isRankStrict ? d3.format('d')(vv) : (+vv).toFixed(4));
-              const errTxt = (pt.stderr != null && isFinite(pt.stderr) && pt.stderr > 0) ? ` ± ${formatVal(pt.stderr)}` : '';
-              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(pt.value)}${errTxt}</div>`;
-            }
+          const seriesWithPoint = series
+            .map(s => {
+              const m = new Map(s.values.map(v=>[v.step, v]));
+              const pt = m.get(nearest);
+              return { s, pt };
+            })
+            .filter(d => d.pt && d.pt.value != null);
+          // Sort runs at hovered step
+          seriesWithPoint.sort((a,b) => {
+            if (isRankStrict) return (b.pt.value - a.pt.value); // rank: descendant
+            return (a.pt.value - b.pt.value); // normal: ascendant
+          });
+          seriesWithPoint.forEach(({s, pt}) => {
+            const formatVal = (vv) => (isRankStrict ? d3.format('d')(vv) : (+vv).toFixed(4));
+            const errTxt = (pt.stderr != null && isFinite(pt.stderr) && pt.stderr > 0) ? ` ± ${formatVal(pt.stderr)}` : '';
+            html += `<div style=\"display:flex;align-items:center;gap:6px;white-space:nowrap;\">${shapeSvgMarkup(s.marker, s.color)}<strong>${s.run}</strong> ${formatVal(pt.value)}${errTxt}</div>`;
           });
           tipInner.innerHTML = html;
           const offsetX = 12, offsetY = 12;
@@ -578,7 +610,9 @@
           }));
           metricList = Array.from(new Set(rows.map(r=>r.metric))).sort();
           runList = Array.from(new Set(rows.map(r=>r.run))).sort();
-          runOrder = runList;
+          // Prioritize "FineVision" first in legend/order
+          const hasFV = runList.includes('FineVision');
+          runOrder = hasFV ? ['FineVision', ...runList.filter(r => r !== 'FineVision')] : runList;
           // Build dataByMetric
           metricList.forEach(m => {
             const map = {};

app/src/content/embeds/s25-ratings.html

@@ -140,7 +140,7 @@
 
       const labelMetric = document.createElement('label');
       Object.assign(labelMetric.style, {
-        fontSize: '12px', color: 'var(--muted-color)', display: 'flex', alignItems: 'center', gap: '6px', whiteSpace: 'nowrap', padding: '6px 10px', marginLeft: 'auto'
+        fontSize: '11px', color: 'var(--muted-color)', opacity: 0.8, display: 'flex', alignItems: 'center', gap: '6px', whiteSpace: 'nowrap', padding: '6px 10px', marginLeft: 'auto'
       });
       labelMetric.textContent = 'Metric';
       const selectMetric = document.createElement('select');
@@ -155,7 +155,7 @@
         gap: '8px',
         alignItems: 'center',
         flexWrap: 'nowrap',
-        fontSize: '11px',
+        fontSize: '14px',
         marginLeft: '8px'
       });
       controls.appendChild(legendInline);
@@ -269,6 +269,25 @@
         }
       }
 
+      // Small SVG markup for marker shape (used in tooltip/legend)
+      function shapeSvgMarkup(shape, color) {
+        const stroke = color;
+        switch (shape) {
+          case 'circle':
+            return `<svg width="18" height="14" viewBox="-6 -6 12 12" aria-hidden="true"><circle r="5" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+          case 'square':
+            return `<svg width="18" height="14" viewBox="-6 -6 12 12" aria-hidden="true"><rect x="-5" y="-5" width="10" height="10" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+          case 'triangle':
+            return `<svg width="18" height="14" viewBox="-6 -6 12 12" aria-hidden="true"><path d="M0,-6 L5,3 L-5,3 Z" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+          case 'diamond':
+            return `<svg width="18" height="14" viewBox="-6 -6 12 12" aria-hidden="true"><path d="M0,-6 L6,0 L0,6 L-6,0 Z" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+          case 'inverted-triangle':
+            return `<svg width="18" height="14" viewBox="-6 -6 12 12" aria-hidden="true"><path d="M0,6 L5,-3 L-5,-3 Z" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+          default:
+            return `<svg width="18" height="14" viewBox="-6 -6 12 12" aria-hidden="true"><circle r="5" fill="${color}" stroke="${stroke}" stroke-width="1" /></svg>`;
+        }
+      }
+
       // Hover elements
       const hoverLine = gHover.append('line').attr('stroke-width', 1);
 
@@ -474,7 +493,7 @@
             .style('cursor', 'crosshair');
         });
 
-        // Inline legend content with marker shapes
+        // Inline legend content with marker shapes (size 9 => SVG 18x14)
         legendInline.innerHTML = '';
         series.forEach(s => {
           const legendItem = document.createElement('span');
@@ -482,15 +501,15 @@
           
           // Create small SVG for marker shape
           const markerSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-          markerSvg.setAttribute('width', '16');
-          markerSvg.setAttribute('height', '12');
+          markerSvg.setAttribute('width', '18');
+          markerSvg.setAttribute('height', '14');
           markerSvg.style.display = 'inline-block';
           
           const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
           g.setAttribute('transform', 'translate(8,6)');
           
           let shape;
-          const size = 6;
+          const size = 9;
           const halfSize = size / 2;
           switch(s.marker) {
             case 'circle':
@@ -543,17 +562,20 @@
           const sx = Math.max(steps[0], Math.min(steps[steps.length-1], Math.round(xScale.invert(mx)/1)*1));
           const nearest = steps.reduce((best, s)=> Math.abs(s - xScale.invert(mx)) < Math.abs(best - xScale.invert(mx)) ? s : best, steps[0]);
           const xpx = xScale(nearest);
-          hoverLine.attr('x1', xpx).attr('x2', xpx).style('display', null).attr('stroke', 'rgba(0,0,0,0.25)');
-          // Tooltip content
+          hoverLine.attr('x1', xpx).attr('x2', xpx).style('display', null);
+          // Tooltip content (sorted by value at hovered step)
           let html = `<div><strong>${getMetricDisplayName(metricKey)}</strong></div><div><strong>step</strong> ${nearest}</div>`;
+          const items = [];
           series.forEach(s=>{
             const m = new Map(s.values.map(v=>[v.step, v]));
             const pt = m.get(nearest);
-            if (pt && pt.value != null) {
-              const formatVal = (vv) => (isRankStrict ? d3.format('d')(vv) : (+vv).toFixed(4));
-              const errTxt = (pt.stderr != null && isFinite(pt.stderr) && pt.stderr > 0) ? ` ± ${formatVal(pt.stderr)}` : '';
-              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(pt.value)}${errTxt}</div>`;
-            }
+            if (pt && pt.value != null) items.push({ s, pt });
+          });
+          const formatVal = (vv) => (isRankStrictFlag ? d3.format('d')(vv) : (+vv).toFixed(4));
+          items.sort((a,b)=> isRankStrictFlag ? (b.pt.value - a.pt.value) : (a.pt.value - b.pt.value));
+          items.forEach(({ s, pt }) => {
+            const errTxt = (pt.stderr != null && isFinite(pt.stderr) && pt.stderr > 0) ? ` ± ${formatVal(pt.stderr)}` : '';
+            html += `<div style=\"display:flex;align-items:center;gap:6px;\">${shapeSvgMarkup(s.marker, s.color)}<strong>${s.run}</strong> ${formatVal(pt.value)}${errTxt}</div>`;
           });
           tipInner.innerHTML = html;
           const offsetX = 12, offsetY = 12;
@@ -578,7 +600,8 @@
           }));
           metricList = Array.from(new Set(rows.map(r=>r.metric))).sort();
           runList = Array.from(new Set(rows.map(r=>r.run))).sort();
-          runOrder = runList;
+          const prioritizeRun = (list, name) => (list.includes(name) ? [name, ...list.filter(r => r !== name)] : list);
+          runOrder = prioritizeRun(runList, 'FineVision');
           // Build dataByMetric
           metricList.forEach(m => {
             const map = {};

app/src/content/embeds/ss-vs-s1.html

@@ -140,7 +140,7 @@
 
       const labelMetric = document.createElement('label');
       Object.assign(labelMetric.style, {
-        fontSize: '12px', color: 'var(--muted-color)', display: 'flex', alignItems: 'center', gap: '6px', whiteSpace: 'nowrap', padding: '6px 10px', marginLeft: 'auto'
+        fontSize: '11px', color: 'var(--muted-color)', opacity: 0.8, display: 'flex', alignItems: 'center', gap: '6px', whiteSpace: 'nowrap', padding: '6px 10px', marginLeft: 'auto'
       });
       labelMetric.textContent = 'Metric';
       const selectMetric = document.createElement('select');
@@ -155,7 +155,7 @@
         gap: '8px',
         alignItems: 'center',
         flexWrap: 'nowrap',
-        fontSize: '11px',
+        fontSize: '14px',
         marginLeft: '8px'
       });
       controls.appendChild(legendInline);
@@ -269,6 +269,25 @@
         }
       }
 
+      // Small SVG markup for marker shape (used in hover tooltip and legend)
+      function shapeSvgMarkup(shape, color) {
+        const stroke = color;
+        switch (shape) {
+          case 'circle':
+            return `<svg width=\"18\" height=\"14\" viewBox=\"-6 -6 12 12\" aria-hidden=\"true\"><circle r=\"5\" fill=\"${color}\" stroke=\"${stroke}\" stroke-width=\"1\" /></svg>`;
+          case 'square':
+            return `<svg width=\"18\" height=\"14\" viewBox=\"-6 -6 12 12\" aria-hidden=\"true\"><rect x=\"-5\" y=\"-5\" width=\"10\" height=\"10\" fill=\"${color}\" stroke=\"${stroke}\" stroke-width=\"1\" /></svg>`;
+          case 'triangle':
+            return `<svg width=\"18\" height=\"14\" viewBox=\"-6 -6 12 12\" aria-hidden=\"true\"><path d=\"M0,-6 L5,3 L-5,3 Z\" fill=\"${color}\" stroke=\"${stroke}\" stroke-width=\"1\" /></svg>`;
+          case 'diamond':
+            return `<svg width=\"18\" height=\"14\" viewBox=\"-6 -6 12 12\" aria-hidden=\"true\"><path d=\"M0,-6 L6,0 L0,6 L-6,0 Z\" fill=\"${color}\" stroke=\"${stroke}\" stroke-width=\"1\" /></svg>`;
+          case 'inverted-triangle':
+            return `<svg width=\"18\" height=\"14\" viewBox=\"-6 -6 12 12\" aria-hidden=\"true\"><path d=\"M0,6 L5,-3 L-5,-3 Z\" fill=\"${color}\" stroke=\"${stroke}\" stroke-width=\"1\" /></svg>`;
+          default:
+            return `<svg width=\"18\" height=\"14\" viewBox=\"-6 -6 12 12\" aria-hidden=\"true\"><circle r=\"5\" fill=\"${color}\" stroke=\"${stroke}\" stroke-width=\"1\" /></svg>`;
+        }
+      }
+
       // Hover elements
       const hoverLine = gHover.append('line').attr('stroke-width', 1);
 
@@ -474,63 +493,19 @@
             .style('cursor', 'crosshair');
         });
 
-        // Inline legend content with marker shapes
+        // Inline legend content with marker shapes (size 9 => SVG 18x14)
         legendInline.innerHTML = '';
         series.forEach(s => {
           const legendItem = document.createElement('span');
           legendItem.style.cssText = 'display:inline-flex;align-items:center;gap:6px;white-space:nowrap;';
-          
-          // Create small SVG for marker shape
-          const markerSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-          markerSvg.setAttribute('width', '16');
-          markerSvg.setAttribute('height', '12');
-          markerSvg.style.display = 'inline-block';
-          
-          const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-          g.setAttribute('transform', 'translate(8,6)');
-          
-          let shape;
-          const size = 6;
-          const halfSize = size / 2;
-          switch(s.marker) {
-            case 'circle':
-              shape = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-              shape.setAttribute('r', halfSize);
-              break;
-            case 'square':
-              shape = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
-              shape.setAttribute('x', -halfSize);
-              shape.setAttribute('y', -halfSize);
-              shape.setAttribute('width', size);
-              shape.setAttribute('height', size);
-              break;
-            case 'triangle':
-              shape = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-              shape.setAttribute('d', `M0,${-halfSize * 1.2} L${halfSize * 1.1},${halfSize * 0.6} L${-halfSize * 1.1},${halfSize * 0.6} Z`);
-              break;
-            case 'diamond':
-              shape = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-              shape.setAttribute('d', `M0,${-halfSize * 1.2} L${halfSize * 1.1},0 L0,${halfSize * 1.2} L${-halfSize * 1.1},0 Z`);
-              break;
-            case 'inverted-triangle':
-              shape = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-              shape.setAttribute('d', `M0,${halfSize * 1.2} L${halfSize * 1.1},${-halfSize * 0.6} L${-halfSize * 1.1},${-halfSize * 0.6} Z`);
-              break;
-            default:
-              shape = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-              shape.setAttribute('r', halfSize);
-          }
-          shape.setAttribute('fill', s.color);
-          shape.setAttribute('stroke', s.color);
-          shape.setAttribute('stroke-width', '1');
-          
-          g.appendChild(shape);
-          markerSvg.appendChild(g);
-          
+          const markerSpan = document.createElement('span');
+          markerSpan.innerHTML = shapeSvgMarkup(s.marker, s.color);
+          markerSpan.style.display = 'inline-block';
+
           const label = document.createElement('span');
           label.textContent = s.run;
           
-          legendItem.appendChild(markerSvg);
+          legendItem.appendChild(markerSpan);
           legendItem.appendChild(label);
           legendInline.appendChild(legendItem);
         });
@@ -543,17 +518,21 @@
           const sx = Math.max(steps[0], Math.min(steps[steps.length-1], Math.round(xScale.invert(mx)/1)*1));
           const nearest = steps.reduce((best, s)=> Math.abs(s - xScale.invert(mx)) < Math.abs(best - xScale.invert(mx)) ? s : best, steps[0]);
           const xpx = xScale(nearest);
-          hoverLine.attr('x1', xpx).attr('x2', xpx).style('display', null).attr('stroke', 'rgba(0,0,0,0.25)');
-          // Tooltip content
+          hoverLine.attr('x1', xpx).attr('x2', xpx).style('display', null);
+          // Tooltip content sorted
           let html = `<div><strong>${getMetricDisplayName(metricKey)}</strong></div><div><strong>step</strong> ${nearest}</div>`;
+          const items = [];
           series.forEach(s=>{
             const m = new Map(s.values.map(v=>[v.step, v]));
             const pt = m.get(nearest);
-            if (pt && pt.value != null) {
-              const formatVal = (vv) => (isRankStrict ? d3.format('d')(vv) : (+vv).toFixed(4));
-              const errTxt = (pt.stderr != null && isFinite(pt.stderr) && pt.stderr > 0) ? ` ± ${formatVal(pt.stderr)}` : '';
-              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(pt.value)}${errTxt}</div>`;
-            }
+            if (pt && pt.value != null) items.push({ s, pt });
+          });
+          const isRankStrict = isRankStrictFlag;
+          const formatVal = (vv) => (isRankStrict ? d3.format('d')(vv) : (+vv).toFixed(4));
+          items.sort((a,b)=> isRankStrict ? (b.pt.value - a.pt.value) : (a.pt.value - b.pt.value));
+          items.forEach(({ s, pt }) => {
+            const errTxt = (pt.stderr != null && isFinite(pt.stderr) && pt.stderr > 0) ? ` ± ${formatVal(pt.stderr)}` : '';
+            html += `<div style=\"display:flex;align-items:center;gap:6px;\">${shapeSvgMarkup(s.marker, s.color)}<strong>${s.run}</strong> ${formatVal(pt.value)}${errTxt}</div>`;
           });
           tipInner.innerHTML = html;
           const offsetX = 12, offsetY = 12;
@@ -578,7 +557,8 @@
           }));
           metricList = Array.from(new Set(rows.map(r=>r.metric))).sort();
           runList = Array.from(new Set(rows.map(r=>r.run))).sort();
-          runOrder = runList;
+          const prioritizeRun = (list, name) => (list.includes(name) ? [name, ...list.filter(r => r !== name)] : list);
+          runOrder = prioritizeRun(runList, 'FineVision');
           // Build dataByMetric
           metricList.forEach(m => {
             const map = {};

app/src/content/embeds/visual-dependency-filters.html

@@ -140,7 +140,7 @@
 
       const labelMetric = document.createElement('label');
       Object.assign(labelMetric.style, {
-        fontSize: '12px', color: 'var(--muted-color)', display: 'flex', alignItems: 'center', gap: '6px', whiteSpace: 'nowrap', padding: '6px 10px', marginLeft: 'auto'
+        fontSize: '11px', color: 'var(--muted-color)', opacity: 0.8, display: 'flex', alignItems: 'center', gap: '6px', whiteSpace: 'nowrap', padding: '6px 10px', marginLeft: 'auto'
       });
       labelMetric.textContent = 'Metric';
       const selectMetric = document.createElement('select');
@@ -155,7 +155,7 @@
         gap: '8px',
         alignItems: 'center',
         flexWrap: 'nowrap',
-        fontSize: '11px',
+        fontSize: '14px',
         marginLeft: '8px'
       });
       controls.appendChild(legendInline);
@@ -269,6 +269,25 @@
         }
       }
 
+      // Small SVG markup for marker shape (used in hover tooltip and legend)
+      function shapeSvgMarkup(shape, color) {
+        const stroke = color;
+        switch (shape) {
+          case 'circle':
+            return `<svg width=\"18\" height=\"14\" viewBox=\"-6 -6 12 12\" aria-hidden=\"true\"><circle r=\"5\" fill=\"${color}\" stroke=\"${stroke}\" stroke-width=\"1\" /></svg>`;
+          case 'square':
+            return `<svg width=\"18\" height=\"14\" viewBox=\"-6 -6 12 12\" aria-hidden=\"true\"><rect x=\"-5\" y=\"-5\" width=\"10\" height=\"10\" fill=\"${color}\" stroke=\"${stroke}\" stroke-width=\"1\" /></svg>`;
+          case 'triangle':
+            return `<svg width=\"18\" height=\"14\" viewBox=\"-6 -6 12 12\" aria-hidden=\"true\"><path d=\"M0,-6 L5,3 L-5,3 Z\" fill=\"${color}\" stroke=\"${stroke}\" stroke-width=\"1\" /></svg>`;
+          case 'diamond':
+            return `<svg width=\"18\" height=\"14\" viewBox=\"-6 -6 12 12\" aria-hidden=\"true\"><path d=\"M0,-6 L6,0 L0,6 L-6,0 Z\" fill=\"${color}\" stroke=\"${stroke}\" stroke-width=\"1\" /></svg>`;
+          case 'inverted-triangle':
+            return `<svg width=\"18\" height=\"14\" viewBox=\"-6 -6 12 12\" aria-hidden=\"true\"><path d=\"M0,6 L5,-3 L-5,-3 Z\" fill=\"${color}\" stroke=\"${stroke}\" stroke-width=\"1\" /></svg>`;
+          default:
+            return `<svg width=\"18\" height=\"14\" viewBox=\"-6 -6 12 12\" aria-hidden=\"true\"><circle r=\"5\" fill=\"${color}\" stroke=\"${stroke}\" stroke-width=\"1\" /></svg>`;
+        }
+      }
+
       // Hover elements
       const hoverLine = gHover.append('line').attr('stroke-width', 1);
 
@@ -474,63 +493,19 @@
             .style('cursor', 'crosshair');
         });
 
-        // Inline legend content with marker shapes
+        // Inline legend content with marker shapes (size 9 => SVG 18x14)
         legendInline.innerHTML = '';
         series.forEach(s => {
           const legendItem = document.createElement('span');
           legendItem.style.cssText = 'display:inline-flex;align-items:center;gap:6px;white-space:nowrap;';
-          
-          // Create small SVG for marker shape
-          const markerSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-          markerSvg.setAttribute('width', '16');
-          markerSvg.setAttribute('height', '12');
-          markerSvg.style.display = 'inline-block';
-          
-          const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-          g.setAttribute('transform', 'translate(8,6)');
-          
-          let shape;
-          const size = 6;
-          const halfSize = size / 2;
-          switch(s.marker) {
-            case 'circle':
-              shape = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-              shape.setAttribute('r', halfSize);
-              break;
-            case 'square':
-              shape = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
-              shape.setAttribute('x', -halfSize);
-              shape.setAttribute('y', -halfSize);
-              shape.setAttribute('width', size);
-              shape.setAttribute('height', size);
-              break;
-            case 'triangle':
-              shape = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-              shape.setAttribute('d', `M0,${-halfSize * 1.2} L${halfSize * 1.1},${halfSize * 0.6} L${-halfSize * 1.1},${halfSize * 0.6} Z`);
-              break;
-            case 'diamond':
-              shape = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-              shape.setAttribute('d', `M0,${-halfSize * 1.2} L${halfSize * 1.1},0 L0,${halfSize * 1.2} L${-halfSize * 1.1},0 Z`);
-              break;
-            case 'inverted-triangle':
-              shape = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-              shape.setAttribute('d', `M0,${halfSize * 1.2} L${halfSize * 1.1},${-halfSize * 0.6} L${-halfSize * 1.1},${-halfSize * 0.6} Z`);
-              break;
-            default:
-              shape = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-              shape.setAttribute('r', halfSize);
-          }
-          shape.setAttribute('fill', s.color);
-          shape.setAttribute('stroke', s.color);
-          shape.setAttribute('stroke-width', '1');
-          
-          g.appendChild(shape);
-          markerSvg.appendChild(g);
-          
+          const markerSpan = document.createElement('span');
+          markerSpan.innerHTML = shapeSvgMarkup(s.marker, s.color);
+          markerSpan.style.display = 'inline-block';
+
           const label = document.createElement('span');
           label.textContent = s.run;
           
-          legendItem.appendChild(markerSvg);
+          legendItem.appendChild(markerSpan);
           legendItem.appendChild(label);
           legendInline.appendChild(legendItem);
         });
@@ -543,17 +518,21 @@
           const sx = Math.max(steps[0], Math.min(steps[steps.length-1], Math.round(xScale.invert(mx)/1)*1));
           const nearest = steps.reduce((best, s)=> Math.abs(s - xScale.invert(mx)) < Math.abs(best - xScale.invert(mx)) ? s : best, steps[0]);
           const xpx = xScale(nearest);
-          hoverLine.attr('x1', xpx).attr('x2', xpx).style('display', null).attr('stroke', 'rgba(0,0,0,0.25)');
-          // Tooltip content
+          hoverLine.attr('x1', xpx).attr('x2', xpx).style('display', null);
+          // Tooltip content sorted
           let html = `<div><strong>${getMetricDisplayName(metricKey)}</strong></div><div><strong>step</strong> ${nearest}</div>`;
+          const items = [];
           series.forEach(s=>{
             const m = new Map(s.values.map(v=>[v.step, v]));
             const pt = m.get(nearest);
-            if (pt && pt.value != null) {
-              const formatVal = (vv) => (isRankStrict ? d3.format('d')(vv) : (+vv).toFixed(4));
-              const errTxt = (pt.stderr != null && isFinite(pt.stderr) && pt.stderr > 0) ? ` ± ${formatVal(pt.stderr)}` : '';
-              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(pt.value)}${errTxt}</div>`;
-            }
+            if (pt && pt.value != null) items.push({ s, pt });
+          });
+          const isRankStrict = isRankStrictFlag;
+          const formatVal = (vv) => (isRankStrict ? d3.format('d')(vv) : (+vv).toFixed(4));
+          items.sort((a,b)=> isRankStrict ? (b.pt.value - a.pt.value) : (a.pt.value - b.pt.value));
+          items.forEach(({ s, pt }) => {
+            const errTxt = (pt.stderr != null && isFinite(pt.stderr) && pt.stderr > 0) ? ` ± ${formatVal(pt.stderr)}` : '';
+            html += `<div style=\"display:flex;align-items:center;gap:6px;\">${shapeSvgMarkup(s.marker, s.color)}<strong>${s.run}</strong> ${formatVal(pt.value)}${errTxt}</div>`;
           });
           tipInner.innerHTML = html;
           const offsetX = 12, offsetY = 12;
@@ -578,7 +557,8 @@
           }));
           metricList = Array.from(new Set(rows.map(r=>r.metric))).sort();
           runList = Array.from(new Set(rows.map(r=>r.run))).sort();
-          runOrder = runList;
+          const prioritizeRun = (list, name) => (list.includes(name) ? [name, ...list.filter(r => r !== name)] : list);
+          runOrder = prioritizeRun(runList, 'FineVision');
           // Build dataByMetric
           metricList.forEach(m => {
             const map = {};