fix score correlation dark mode issue

app/src/content/embeds/score-correlation.html

@@ -315,12 +315,18 @@
         svg.selectAll('*').remove();
 
         // Color scale: diverging, reversed so positive = blue
-        // Wider domain (±0.85) so colors stay readable longer
-        const colorScale = d3.scaleDiverging()
+        // Custom interpolator that fades to transparent at the midpoint
+        // so near-zero cells blend with the page background in both modes
+        const baseScale = d3.scaleDiverging()
           .domain([-0.85, 0, 0.85])
           .interpolator(d3.interpolateRdBu)
           .clamp(true);
-        const cellColor = (r) => colorScale(-r);
+        const cellColor = (r) => {
+          const c = d3.color(baseScale(-r));
+          const t = Math.abs(r) / 0.85;
+          const alpha = Math.max(0.12, Math.min(1, t * 1.8));
+          return `rgba(${c.r},${c.g},${c.b},${alpha})`;
+        };
 
         const g = svg.append('g').attr('transform', `translate(${leftMargin},${topMargin})`);
 
@@ -396,7 +402,7 @@
           .attr('stroke', isDark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.04)')
           .attr('stroke-width', 0.5);
 
-        const textFill = (r) => Math.abs(r) > 0.5 ? '#fff' : textCol;
+        const textFill = (r) => Math.abs(r) > 0.45 ? '#fff' : textCol;
 
         cells.append('text')
           .attr('x', (cellW - 1) / 2)
@@ -414,7 +420,7 @@
           .attr('text-anchor', 'end')
           .attr('font-size', '11px')
           .attr('font-weight', '700')
-          .attr('fill', d => Math.abs(d.r) > 0.5 ? 'rgba(255,255,255,0.8)' : mutedCol)
+          .attr('fill', d => Math.abs(d.r) > 0.45 ? 'rgba(255,255,255,0.8)' : mutedCol)
           .text(d => d.p < 0.001 ? '***' : d.p < 0.01 ? '**' : d.p < 0.05 ? '*' : '');
 
         // --- Row labels (predictors, with hover descriptions) ---
@@ -582,8 +588,13 @@
       // Legend
       const legend = document.createElement('div');
       legend.className = 'legend';
-      const cs = d3.scaleDiverging().domain([-0.85, 0, 0.85]).interpolator(d3.interpolateRdBu).clamp(true);
-      const sw = (r) => cs(-r);
+      const csBase = d3.scaleDiverging().domain([-0.85, 0, 0.85]).interpolator(d3.interpolateRdBu).clamp(true);
+      const sw = (r) => {
+        const rgb = d3.color(csBase(-r));
+        const t = Math.abs(r) / 0.85;
+        const alpha = Math.max(0.12, Math.min(1, t * 1.8));
+        return `rgba(${rgb.r},${rgb.g},${rgb.b},${alpha})`;
+      };
       legend.innerHTML = `
         <div class="legend-title">Legend</div>
         <div class="items">