annotate: arrow ignores direction/target geometry, and label placement overlaps neighbouring elements #2553

Found while recording a mobile walkthrough with the annotate step from #2551.

1. Arrow doesn't point at its target. { shape: "arrow", selector: ".target", direction: "left" } draws a fixed SVG curve rotated by a coarse CSS transform. The arrowhead lands beside the target (here on the next button down) rather than on the target's edge, and direction: "left" rotates by 90°, so the arrow points down. Expected: compute the start point off the target on the direction side, end at the nearest edge midpoint, and draw shaft and head along that vector.
2. label placement overlaps neighbours. anchor.placement: "top" / "bottom" puts the label flush against the target's left edge, covering the adjacent button (e.g. a label above one button sits on top of the button above it). Expected: offset by a theme gap, flip to the opposite side when there isn't room, and keep within the viewport.
3. Pointer starts at (0,0). With presentation.pointer on, the cursor is visible in the top-left corner before the first interaction. It should start hidden or centered.

Tests: the arrow tip lands within N px of the target's edge for each direction; a label doesn't intersect its target's sibling boxes when there's room.