kasuti: current vertex red on active side + one-shot ping ring

The active-side current vertex is red (primary) again; the green is
reserved for the go-indicators. A ring pulses briefly (SMIL animate
on r + opacity, keyed on side+vertex) each time the cursor lands,
to draw the eye — browsers won't let us move the OS mouse pointer.

https://claude.ai/code/session_01KNdXjQczMCRGMK7K3Qderw

src/components/interactives/KasutiEmbroidery.tsx

@@ -1129,19 +1129,44 @@ const FabricPanel: React.FC<FabricPanelProps> = ({
               />
             )}
 
-            {/* Current vertex marker — full colour on the active side, grey on the other */}
+            {/* Current vertex marker — red on the active side, muted grey on the other.
-            {currentVertex && (
+                A ring briefly expands each time the marker moves or the side flips
-              <circle
+                (the browser won't let us move the OS mouse pointer, so this draws
-                cx={toXY(currentVertex).x}
+                the eye instead). */}
-                cy={toXY(currentVertex).y}
+            {currentVertex &&
-                r={4}
+              (() => {
-                className={
+                const { x, y } = toXY(currentVertex);
-                  isActive
+                if (!isActive) {
-                    ? 'fill-green-600 dark:fill-green-400'
+                  return (
-                    : 'fill-muted-foreground/60'
+                    <circle cx={x} cy={y} r={4} className="fill-muted-foreground/60" />
+                  );
                 }
-              />
+                return (
-            )}
+                  <g key={`cur-${side}-${vKey(currentVertex)}`}>
+                    <circle cx={x} cy={y} r={4} className="fill-primary/60">
+                      <animate
+                        attributeName="r"
+                        from="4"
+                        to="18"
+                        dur="0.65s"
+                        begin="0s"
+                        repeatCount="1"
+                        fill="freeze"
+                      />
+                      <animate
+                        attributeName="opacity"
+                        from="0.6"
+                        to="0"
+                        dur="0.65s"
+                        begin="0s"
+                        repeatCount="1"
+                        fill="freeze"
+                      />
+                    </circle>
+                    <circle cx={x} cy={y} r={4} className="fill-primary" />
+                  </g>
+                );
+              })()}
 
             {/* Click overlays: only active side accepts clicks */}
             {isActive &&