fix(registry): connector geometry, family accent, and demo legibility

Found by stepping through motion contact sheets rather than single frames.

- hw-pipeline: arrowheads were two asymmetric barbs (l -30 -14 / l -26 18)
  fixed to horizontal, so they detached from a curve that arrives on a
  descending tangent. Barbs now derive from the quadratic's end tangent
  (end - control) with symmetric length and spread.
- hw-pipeline, hw-scribble-transition, hw-callout-circle: the family carried
  two accents — #ffb020 in hw-frame/hw-title/hw-underline and #6d6dff here.
  Unified on the warm marker accent; the blue read as a default UI colour.
- hw-callout-circle: the scribble hatch rendered as stacked bars over the
  labelled subject. More rows so the zigzag reads as a scribble, lighter
  weight and alpha so it sits behind the label.
- yt-camera-move: the stage grid was too faint to reveal the move, so the
  preview of a camera-move component looked static. Stronger grid; zoom,
  slide and tilt now read.

Demos resynced from source — demo.html is a plate-swapped copy, so a source
fix does not reach the catalog preview until it is regenerated.

registry/blocks/hw-pipeline/demo.html

@@ -28,7 +28,9 @@
         --hw-font-print: "Caveat", cursive;
         --hw-font-script: "Caveat", cursive;
         --hw-ink: #f4f2ec;
-        --hw-accent: #6d6dff;
+        /* Warm marker accent, matching hw-frame / hw-title / hw-underline. The
+           previous #6d6dff read as a default UI blue against the family's ink. */
+        --hw-accent: #ffb020;
 
         position: relative;
         width: 1920px;
@@ -223,29 +225,51 @@
             var c = document.createElementNS(NS, "path");
             c.setAttribute("class", "hw-pl-conn");
             c.setAttribute("id", "hw-pl-conn-" + i);
+            var sx = cx + 10,
+              tx = ex - 10;
+            var qx = cx + CONFIG.gap / 2 + window.hwHash(i * 9 + 2, CONFIG.seed) * 16,
+              qy = cy - 46 - window.hwHash(i * 9 + 3, CONFIG.seed) * 12;
+            /* Barbs follow the curve's incoming tangent. A quadratic's tangent
+               at its end is (end - control); barbs fixed to horizontal left the
+               head detached from a curve that arrives descending. Symmetric
+               length and angle, so it reads as one arrowhead. */
+            var ang = Math.atan2(ey - qy, tx - qx) + Math.PI;
+            var BARB = 26,
+              SPREAD = 0.42;
+            var b1x = tx + BARB * Math.cos(ang - SPREAD),
+              b1y = ey + BARB * Math.sin(ang - SPREAD);
+            var b2x = tx + BARB * Math.cos(ang + SPREAD),
+              b2y = ey + BARB * Math.sin(ang + SPREAD);
             c.setAttribute(
               "d",
               "M " +
-                (cx + 10) +
+                sx +
                 " " +
                 cy +
                 " Q " +
-                (cx + CONFIG.gap / 2 + window.hwHash(i * 9 + 2, CONFIG.seed) * 16) +
+                qx +
                 " " +
-                (cy - 46 - window.hwHash(i * 9 + 3, CONFIG.seed) * 12) +
+                qy +
                 " " +
-                (ex - 10) +
+                tx +
                 " " +
                 ey +
                 " M " +
-                (ex - 10) +
+                tx +
                 " " +
                 ey +
-                " l -30 -14 M " +
-                (ex - 10) +
+                " L " +
+                b1x +
+                " " +
+                b1y +
+                " M " +
+                tx +
                 " " +
                 ey +
-                " l -26 18",
+                " L " +
+                b2x +
+                " " +
+                b2y,
             );
             svg.appendChild(c);
             conns.push(c);