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 " +
+                " L " +
-                (ex - 10) +
+                b1x +
+                " " +
+                b1y +
+                " M " +
+                tx +
                 " " +
                 ey +
-                " l -26 18",
+                " L " +
+                b2x +
+                " " +
+                b2y,
             );
             svg.appendChild(c);
             conns.push(c);

registry/blocks/hw-pipeline/hw-pipeline.html

@@ -25,7 +25,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;
@@ -220,29 +222,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 " +
+                " L " +
-                (ex - 10) +
+                b1x +
+                " " +
+                b1y +
+                " M " +
+                tx +
                 " " +
                 ey +
-                " l -26 18",
+                " L " +
+                b2x +
+                " " +
+                b2y,
             );
             svg.appendChild(c);
             conns.push(c);

registry/blocks/hw-scribble-transition/hw-scribble-transition.html

@@ -16,7 +16,9 @@
         overflow: hidden;
       }
       #hw-st-root {
-        --hw-accent: #6d6dff;
+        /* Warm marker accent, consistent with the rest of the hw family.
+           Override per use via CONFIG.color. */
+        --hw-accent: #ffb020;
 
         position: relative;
         width: 1920px;
@@ -75,7 +77,7 @@
            coverage at the midpoint (the host hard-cuts beneath, ~0.9-1.4s
            local), then everything clears. Place spanning the host's cut. */
         var CONFIG = {
-          color: null, // css color; null = --hw-accent purple
+          color: null, // css color; null = --hw-accent (warm marker)
           bands: 7, // horizontal scribble bands
           strokeScale: 1.0,
           seed: 17,

registry/components/hw-callout-circle/demo.html

@@ -47,9 +47,12 @@
         stroke-width: var(--hw-co-w, 6);
       }
       .hw-callout .hw-co-scribble {
-        stroke: var(--hw-co-accent, var(--hw-accent, #6d6dff));
+        /* Warm marker accent to match hw-frame / hw-title / hw-underline; the
-        stroke-width: 4;
+           previous blue read as a default UI colour. Lighter weight and alpha
-        opacity: 0.7;
+           so the hatch sits behind the labelled subject instead of over it. */
+        stroke: var(--hw-co-accent, var(--hw-accent, #ffb020));
+        stroke-width: 3;
+        opacity: 0.42;
       }
       .hw-callout .hw-co-connector {
         stroke: var(--hw-co-ink, var(--hw-ink, #f4f2ec));
@@ -223,8 +226,10 @@
           if (opts.scribble === false) {
             scr.style.display = "none";
           } else {
+            /* Denser rows so the zigzag reads as a scribbled hatch. At 6 rows
+               the near-horizontal runs dominate and it renders as stacked bars. */
             var d = "",
-              rows = 6;
+              rows = 11;
             for (var i = 0; i < rows; i++) {
               var t = (i + 0.5) / rows;
               var yy = cy - ry + t * ry * 2;

registry/components/hw-callout-circle/hw-callout-circle.html

@@ -44,9 +44,12 @@
         stroke-width: var(--hw-co-w, 6);
       }
       .hw-callout .hw-co-scribble {
-        stroke: var(--hw-co-accent, var(--hw-accent, #6d6dff));
+        /* Warm marker accent to match hw-frame / hw-title / hw-underline; the
-        stroke-width: 4;
+           previous blue read as a default UI colour. Lighter weight and alpha
-        opacity: 0.7;
+           so the hatch sits behind the labelled subject instead of over it. */
+        stroke: var(--hw-co-accent, var(--hw-accent, #ffb020));
+        stroke-width: 3;
+        opacity: 0.42;
       }
       .hw-callout .hw-co-connector {
         stroke: var(--hw-co-ink, var(--hw-ink, #f4f2ec));
@@ -220,8 +223,10 @@
           if (opts.scribble === false) {
             scr.style.display = "none";
           } else {
+            /* Denser rows so the zigzag reads as a scribbled hatch. At 6 rows
+               the near-horizontal runs dominate and it renders as stacked bars. */
             var d = "",
-              rows = 6;
+              rows = 11;
             for (var i = 0; i < rows; i++) {
               var t = (i + 0.5) / rows;
               var yy = cy - ry + t * ry * 2;

registry/components/yt-camera-move/demo.html

@@ -53,12 +53,14 @@
         overflow: hidden;
         background: linear-gradient(135deg, #35c8d9 0%, #2a7fff 55%, #7d5cff 100%);
       }
+      /* Grid is the only cue that reveals the camera move on a flat gradient
+         plate; at 0.14/2px the zoom and slide were nearly imperceptible. */
       #yt-cm-stage .yt-cm-grid {
         position: absolute;
         inset: -60px;
         background:
-          repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.14) 0 2px, transparent 2px 120px),
+          repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.3) 0 3px, transparent 3px 120px),
-          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 2px, transparent 2px 120px);
+          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0 3px, transparent 3px 120px);
       }
       #yt-cm-stage .yt-cm-label {
         position: absolute;

registry/components/yt-camera-move/yt-camera-move.html

@@ -50,12 +50,14 @@
         overflow: hidden;
         background: linear-gradient(135deg, #35c8d9 0%, #2a7fff 55%, #7d5cff 100%);
       }
+      /* Grid is the only cue that reveals the camera move on a flat gradient
+         plate; at 0.14/2px the zoom and slide were nearly imperceptible. */
       #yt-cm-stage .yt-cm-grid {
         position: absolute;
         inset: -60px;
         background:
-          repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.14) 0 2px, transparent 2px 120px),
+          repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.3) 0 3px, transparent 3px 120px),
-          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 2px, transparent 2px 120px);
+          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0 3px, transparent 3px 120px);
       }
       #yt-cm-stage .yt-cm-label {
         position: absolute;