Web performance: light animation, gestures on a compositor layer, no forced layouts

Measured with the new tools/bench_web.py on the web Studio's house demo, CPU slowed 6x:

- Idle: running CSS animations repainted the whole drawing every frame (99% of the main
  thread in a window). Animations now step on about ten times a second by default
  ("light", 5% idle); the new toolbar button switches light / smooth / off and the browser
  remembers it; [build] animation sets the default for built pages; view.animation().
  Pan and zoom gestures pause them. Status LEDs pause off-screen and with the rest now.
- Pan 28 -> 10 ms, zoom 69 -> 11 ms per step: gestures move the drawing as one compositor
  layer (transform) and set the viewBox once they end; --iso-k is set on the tags group
  only and only when it changes; the stage box is read once per frame.
- Hover 22 -> 15 ms per move: the tooltip is placed once per frame on its own layer and
  measured only when its text changes; the Studio's x/y readout updates ten times a second
  in a contained box; hover work in the Studio runs once per frame.
- Long object lists skip layout of rows out of sight (content-visibility).
- WASM built with opt-level 3: engine render 11.7 -> 9.4 ms for 10% more download.

Checks: Studio 102/102 (animation modes, pan as a layer, contained readout), web 87/87.

viewer/isokit-view.css

@@ -18,6 +18,9 @@
     linear-gradient(180deg, var(--iso-sky1), var(--iso-sky2));
 }
 .iso-svg { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; outline: none; }
+/* its own compositor layer: pan and zoom gestures move it by a transform (no repaint) until they end;
+   drawn past its box so the ground just outside the view is there while panning (the stage clips) */
+.iso-svg { will-change: transform; transform-origin: 0 0; overflow: visible; }
 .iso-dragging .iso-svg { cursor: grabbing; }
 .iso-svg:focus-visible { outline: 2px solid var(--iso-accent); outline-offset: -2px; }
 .iso-bar {
@@ -42,7 +45,8 @@
 .iso-compass path { fill: var(--iso-accent); }
 .iso-compass b { font-size: 11px; }
 .iso-tip {
-  position: absolute; z-index: 3; max-width: min(330px, calc(100% - 12px)); padding: 8px 10px; pointer-events: none;
+  position: absolute; left: 0; top: 0; z-index: 3; max-width: min(330px, calc(100% - 12px)); padding: 8px 10px; pointer-events: none;
+  will-change: transform; contain: layout style;
   background: var(--iso-tipbg); color: var(--iso-tipfg); border: 1px solid var(--iso-tipline); border-radius: 6px;
   font: 13px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
 }
@@ -112,8 +116,13 @@ html[data-theme=light] .iso-svg .iso-glint { display: inline; }
 .iso-svg .iso-swim { transform-box: fill-box; transform-origin: center; animation: iso-spin 20s linear infinite; }
 .iso-svg .iso-rip { transform-box: fill-box; transform-origin: center; animation: iso-rip 5.1s ease-out infinite; }
 .iso-svg .iso-park { display: none; }
-.iso-off .iso-a, .iso-still .iso-a, .iso-off .iso-drive, .iso-still .iso-drive { animation-play-state: paused !important; }
-.iso-still .iso-park { display: inline; }
+/* paused off-screen (iso-off), when stopped (iso-still), with animation off and during pan/zoom gestures */
+.iso-off .iso-a, .iso-still .iso-a, .iso-off .iso-drive, .iso-still .iso-drive, .iso-off .iso-ledr, .iso-off .iso-ledo, .iso-still .iso-ledr, .iso-still .iso-ledo,
+.iso-anim-off .iso-a, .iso-anim-off .iso-drive, .iso-anim-off .iso-ledr, .iso-anim-off .iso-ledo,
+.iso-gesture .iso-a, .iso-gesture .iso-drive, .iso-gesture .iso-ledr, .iso-gesture .iso-ledo { animation-play-state: paused !important; }
+.iso-still .iso-park, .iso-anim-off .iso-park { display: inline; }
+.iso-animbtn { min-width: 30px; font-size: 13px; }
+.iso-bar [hidden] { display: none !important; }
 @keyframes iso-spin { to { transform: rotate(360deg); } }
 @keyframes iso-puff {
   0% { transform: translate(0, 0) scale(.35); opacity: 0; }
@@ -136,7 +145,7 @@ html[data-theme=light] .iso-svg .iso-glint { display: inline; }
   96%, 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
 }
 @media (prefers-reduced-motion: reduce) {
-  .iso-svg .iso-a { animation: none !important; }
+  .iso-svg .iso-a, .iso-svg .iso-ledr, .iso-svg .iso-ledo { animation: none !important; }
   .iso-svg .iso-puff, .iso-svg .iso-puff2, .iso-svg .iso-smoke, .iso-svg .iso-disc, .iso-svg .iso-glint, .iso-svg .iso-rip { display: none; }
   .iso-svg .iso-park { display: inline; }
 }