fix: centre crossfade hatch on color boundary, not after it

Hatch was drawn at [seg[i+1].start, seg[i].end] which sat entirely inside
seg i+1's color block — visually after the edge. The color boundary IS at
seg[i+1].start, so hatch is now centred there: half crossfade on each side.

app.py

@@ -1750,16 +1750,14 @@ def _build_waveform_html(audio_path: str, segments: list, slot_id: str,
     }});
 
     // ── Crossfade overlap indicators ──
-    // The overlap region spans [segments[i+1][0], segments[i][1]]:
-    //   - last crossfadeSec of seg i fades OUT
-    //   - first crossfadeSec of seg i+1 fades IN
-    // Both halves are the same duration (crossfadeSec) and occupy the same
-    // time range, so we draw the hatch centred on the join boundary.
+    // The color boundary is at segments[i+1][0] (= seg_i.end - crossfadeSec).
+    // We centre the hatch on that edge: half the crossfade on each color side.
     if (crossfadeSec > 0 && segments.length > 1) {{
       for (let i = 0; i < segments.length - 1; i++) {{
-        // The actual overlap window in time
-        const overlapStart = segments[i+1][0];       // = seg_i.end - crossfadeSec
-        const overlapEnd   = segments[i][1];          // = seg_i.end
+        // Color edge = segments[i+1][0], hatch spans half on each side
+        const edgeT       = segments[i+1][0];
+        const overlapStart = edgeT - crossfadeSec / 2;
+        const overlapEnd   = edgeT + crossfadeSec / 2;
         const xL = (overlapStart / duration) * W;
         const xR = (overlapEnd   / duration) * W;
         // Diagonal hatch pattern over the overlap zone