ranger-compiler 3.5.0 → 3.5.2

package/dist/lib/evg/gl/evg-webgl.js

@@ -0,0 +1,3942 @@
+/**
+ * evg-webgl.js — draw an EVG display list with WebGL 2.
+ *
+ * Input is what evg_displaylist_tool emits: a page size and a flat list of
+ * commands in absolute pixels with colours already resolved. Nothing above
+ * this file knows about GL, and nothing in this file knows about JSX, flex,
+ * grid or fonts — that is the whole point of the seam.
+ *
+ * Drawing model
+ * -------------
+ * Every command is one quad. Rounded corners and borders are done in the
+ * fragment shader with a signed distance function, so a rounded rect costs the
+ * same two triangles as a square one and needs no tessellation:
+ *
+ *   sdRoundedBox(p, halfSize, r) = length(max(|p| - halfSize + r, 0)) - r
+ *
+ * A fill keeps the inside; a border keeps a band of `thickness` inside the
+ * edge. Antialiasing is one fwidth() smoothstep, which is why the corners come
+ * out clean at any radius without multisampling.
+ *
+ * Paint order
+ * -----------
+ * The list is in paint order and must stay that way, so it is split into RUNS:
+ * consecutive quads that share the atlas are one instanced draw, and an image
+ * — which needs its own texture bound — breaks the run and is drawn on its
+ * own. Every run reads the same instance buffers, offset to its first
+ * instance, because WebGL 2 has no base-instance parameter.
+ *
+ * Text
+ * ----
+ * The list carries the run, the face and the size — the positions are EVG's,
+ * measured from the same TTF the PDF is set in. Only the glyph *images* come
+ * from the platform: here a 2D canvas rasterizes each run into an atlas, which
+ * is what a browser gives us for free. The SDL2 backend swaps that one piece
+ * for the engine's own RasterText and keeps everything else.
+ *
+ * Images
+ * ------
+ * `object-fit: cover` is the only fit EVG's raster and PDF targets implement,
+ * and it is done here the same way they do it — by cropping, not by squashing.
+ * The crop is a UV rectangle computed from the source and box aspect ratios,
+ * so the GPU samples the covered region directly and the quad stays two
+ * triangles. A radius on the element clips the photo through the same distance
+ * field the rectangles use.
+ *
+ * Vector paths
+ * ------------
+ * A path arrives already flattened into rings of points, in page coordinates —
+ * the display list does the parsing and the viewBox arithmetic, so this file
+ * carries no path parser. A FILL is drawn stencil-then-cover: each ring goes
+ * into the stencil buffer as a triangle fan, then one quad over the path's
+ * bounding box paints every pixel the rule says is inside. That handles holes
+ * and both fill rules without a triangulator, and it is why the context needs a
+ * stencil buffer. A STROKE is expanded to a quad per segment on the CPU, which
+ * needs no stencil at all.
+ *
+ * Clips are scissor rectangles, intersected as they nest. Not yet: stroke
+ * joins and caps are butt joints, which is invisible at the widths a chart uses.
+ */
+
+const KIND = {
+  RECT: 0, BORDER: 1, IMAGE: 2, TEXT: 3, PUSH_CLIP: 4, POP_CLIP: 5,
+  PATH: 6, STROKE: 7,
+};
+
+// aShape.z — what the fragment shader should do with this instance.
+// TEXT paints the atlas as a coverage mask in the run's own colour, which is
+// right for a glyph and wrong for a colour emoji: the browser draws 😊 in its
+// own colours, and its ALPHA is the whole opaque face, so masking it with the
+// run's colour gives a solid disc in the text colour. COLORTEXT samples the
+// atlas's own pixels instead. Which one a run gets is decided by looking at
+// what the browser actually drew — see `atlasIsColored`.
+// SHADOW is the same rounded box as SHAPE, drawn softly and BEFORE it: the
+// quad is grown by the blur radius so the falloff has somewhere to go, and
+// the shader measures the box back down from it.
+const MODE = { SHAPE: 0, TEXT: 1, IMAGE: 2, COLORTEXT: 3, SHADOW: 4 };
+
+const VERT = `#version 300 es
+in vec2 aCorner;          // unit quad, 0..1
+in vec4 aRect;            // x, y, w, h in page pixels
+in vec4 aColor;           // rgba, 0..1
+in vec4 aColor2;          // far gradient stop, rgba 0..1
+in vec3 aShape;           // radius (top-left), thickness (0 = fill), mode
+in vec4 aRadii;           // the four corners: TL, TR, BR, BL
+in float aGrad;           // 0 = flat, 1 = down the box, 2 = across it
+in vec4 aUV;              // u0,v0,u1,v1 — atlas slot, or the image's cover crop
+in float aRot;            // radians
+in vec3 aOrigin;          // pivot x, y, and 1 when the list named one
+uniform vec2 uPage;
+// How far the scroll layer this instance sits in has moved since its
+// buffers were built. Zero for everything outside a layer, and for a frame
+// drawn the moment it was built; a fling is this changing, and nothing else.
+uniform vec2 uShift;
+// THE CAMERA: (sx, sy, tx, ty). Scene coordinates times the scale plus the
+// translate land on the page, and the identity (1, 1, 0, 0) is the list every
+// consumer drew before a view existed. It is here rather than baked into the
+// coordinates so that a frame already built can be drawn somewhere else — a
+// pan without a rebuild. See PLAN_VIEW_TRANSFORM.md. (No backticks in this
+// comment: the shader is a JS template literal and one would end it.)
+//
+// The scale is uniform in every caller: setView takes one number. A
+// non-uniform one would stretch the box correctly and the corner radii and
+// the border wrongly, since a circle under it is an ellipse and the distance
+// field below measures a circle. Nothing asks for one; a rotating camera
+// would want a mat3 here and nothing asks for that either.
+uniform vec4 uView;
+// Device pixels per page pixel (the canvas ratio); 0 turns the text snap off.
+uniform float uSnap;
+out vec4 vColor;
+out vec4 vColor2;
+out float vGrad;
+out vec2 vT;              // 0..1 along the box, for the gradient
+out vec2 vLocal;          // position within the rect, in pixels
+out vec2 vHalf;
+out vec4 vRadii;
+out float vThickness;
+out float vMode;
+out vec2 vUV;
+void main() {
+  // In SCENE units until the last line of this block: the rotation, the pivot
+  // and the shift are all properties of the picture, and the camera is applied
+  // to the result. Rotating after the scale would be the same thing only for a
+  // uniform one, and doing it before is one fewer thing to be careful about.
+  vec2 p = aRect.xy + uShift + aCorner * aRect.zw;
+  // A rotated element turns about its own centre, which is what the PDF matrix
+  // and the raster transform both do — an axis title on its side has to land in
+  // the same place in all three.
+  if (aRot != 0.0) {
+    // What the quad turns ABOUT. aOrigin.z is 1 when the display list named a
+    // point and 0 when it did not; without one the pivot is the quad's own
+    // centre, which is right for a lone sideways label and wrong for a whole
+    // element being turned. A box, its text and its children have to share one
+    // pivot or they come apart -- and a text quad is sized to its ink, not to
+    // the line box, so its own centre is nowhere near the element's.
+    //
+    // No backticks in here: this comment lives inside a JS template literal,
+    // and one would end the shader source mid-word.
+    vec2 c = (aOrigin.z > 0.5 ? aOrigin.xy : (aRect.xy + aRect.zw * 0.5)) + uShift;
+    float s = sin(aRot), co = cos(aRot);
+    vec2 d = p - c;
+    p = c + vec2(d.x * co - d.y * s, d.x * s + d.y * co);
+  }
+  p = p * uView.xy + uView.zw;
+  // A TEXT QUAD LANDS ON WHOLE DEVICE PIXELS. Its atlas slot is a whole number
+  // of texels, rasterised at this scale, and the sampler filters linearly: a
+  // quad whose corner sits a fraction of a pixel off the grid samples every
+  // glyph between two texels and comes out soft -- the half-pixel blur a run
+  // had next to the same words in the page's own DOM. Moving the whole quad
+  // by less than half a pixel puts each texel on one pixel. Rotated runs are
+  // left alone: a turned quad has no grid to land on.
+  if (uSnap > 0.0 && aRot == 0.0 && (aShape.z == 1.0 || aShape.z == 3.0)) {
+    vec2 tl = (aRect.xy + uShift) * uView.xy + uView.zw;
+    p += floor(tl * uSnap + 0.5) / uSnap - tl;
+  }
+  // Page space is y-down like every 2D layout engine; clip space is y-up.
+  vec2 ndc = vec2((p.x / uPage.x) * 2.0 - 1.0, 1.0 - (p.y / uPage.y) * 2.0);
+  gl_Position = vec4(ndc, 0.0, 1.0);
+  vColor = aColor;
+  vColor2 = aColor2;
+  vGrad = aGrad;
+  vT = aCorner;
+  // These four are what the fragment shader measures in PAGE pixels, so the
+  // camera applies to them as much as to the position: a box drawn at twice
+  // the scale has twice the corner radius and twice the border, or it is a
+  // different box rather than the same one nearer.
+  vHalf = aRect.zw * 0.5 * uView.xy;
+  vLocal = (aCorner - 0.5) * aRect.zw * uView.xy;
+  vRadii = aRadii * uView.x;
+  vThickness = aShape.y * uView.x;
+  vMode = aShape.z;
+  vUV = mix(aUV.xy, aUV.zw, aCorner);
+}`;
+
+const FRAG = `#version 300 es
+precision highp float;
+in vec4 vColor;
+in vec4 vColor2;
+in float vGrad;
+in vec2 vT;
+in vec2 vLocal;
+in vec2 vHalf;
+in vec4 vRadii;
+in float vThickness;
+in float vMode;
+in vec2 vUV;
+uniform sampler2D uAtlas;
+uniform sampler2D uImage;
+out vec4 outColor;
+
+// Four corners, picked by the quadrant the fragment is in. The radii arrive
+// as (TL, TR, BR, BL) -- the order border-radius writes them in -- and one
+// choice per axis narrows them to the corner that matters here. No backticks
+// in this comment: the whole shader is a JS template literal.
+float sdRoundedBox(vec2 p, vec2 b, vec4 r) {
+  vec2 tb = (p.x > 0.0) ? vec2(r.y, r.z) : vec2(r.x, r.w); // right : left
+  float rr = (p.y > 0.0) ? tb.y : tb.x;                     // bottom : top
+  vec2 q = abs(p) - b + rr;
+  return length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - rr;
+}
+
+// The rounded-box coverage of this fragment, 0..1.
+//
+// fwidth() is a screen-space derivative, and it jumps across the diagonal seam
+// of the triangle strip on a very large quad — which drew a visible hairline
+// across the page background. Clamping keeps the edge one pixel soft no matter
+// how big the quad is.
+float boxCoverage(out float d) {
+  // The clamp stays per corner: the display list already applies the CSS
+  // scale-down, so this only catches a caller that hands over a radius no box
+  // could hold.
+  float lim = min(vHalf.x, vHalf.y);
+  vec4 r = min(vRadii, vec4(lim));
+  d = sdRoundedBox(vLocal, vHalf, r);
+  float aa = clamp(fwidth(d), 0.35, 1.5);
+  return smoothstep(aa, -aa, d);
+}
+
+void main() {
+  if (vMode > 3.5) {
+    // A drop shadow. The quad was grown by the blur on every side, so the
+    // box it belongs to is that much smaller than the quad, and the same
+    // corner radii still describe it. The falloff spans one blur radius
+    // centred on the edge, which is what CSS means by a blur radius and what
+    // the software canvas draws.
+    //
+    // No backticks in this comment: the shader is a JS template literal.
+    float b = max(vThickness, 0.0);
+    vec2 hb = max(vHalf - vec2(b), vec2(0.01));
+    float lim = min(hb.x, hb.y);
+    vec4 rr = min(vRadii, vec4(lim));
+    float sd = sdRoundedBox(vLocal, hb, rr);
+    // A shadow with no blur is a hard offset copy, and smoothstep over a
+    // zero-wide band is undefined; one pixel of antialiasing stands in.
+    float soft = max(b * 0.5, clamp(fwidth(sd), 0.35, 1.5));
+    float sa = smoothstep(soft, -soft, sd);
+    if (sa <= 0.002) discard;
+    outColor = vec4(vColor.rgb, vColor.a * sa);
+    return;
+  }
+  if (vMode > 2.5) {
+    // Text the browser drew in colours of its own — a colour emoji. The atlas
+    // holds the finished pixels, so they are sampled rather than reduced to a
+    // coverage mask; only the run's opacity still applies.
+    vec4 glyph = texture(uAtlas, vUV);
+    if (glyph.a <= 0.001) discard;
+    // The LETTERS in such a run were drawn in the key ink, pure magenta — see
+    // \`reinkColored\` — and take the run's colour here; the emoji keeps its
+    // own. Judged as a ratio rather than a value: linear filtering mixes an
+    // edge pixel with transparent black, and (0.5, 0, 0.5) is still key ink.
+    float hi = max(glyph.r, glyph.b);
+    float key = hi > 0.02
+      ? smoothstep(0.6, 0.9, 1.0 - (glyph.g + abs(glyph.r - glyph.b)) / hi)
+      : 0.0;
+    outColor = vec4(mix(glyph.rgb, vColor.rgb, key), glyph.a * vColor.a);
+    return;
+  }
+  if (vMode > 1.5) {
+    // Image: the UV rectangle already carries the object-fit crop, so this is
+    // a plain sample. The radius still applies — a photo in a rounded box is
+    // clipped by the same distance field the box itself is drawn with.
+    // A crop window may reach past the bitmap — Figma stores one whenever the
+    // picture is zoomed out inside its frame. CLAMP_TO_EDGE would smear the
+    // edge pixel across that margin; the picture simply does not cover there.
+    if (vUV.x < -0.001 || vUV.x > 1.001 || vUV.y < -0.001 || vUV.y > 1.001) discard;
+    vec4 tex = texture(uImage, vUV);
+    float d;
+    float cov = boxCoverage(d);
+    if (cov <= 0.001) discard;
+    outColor = vec4(tex.rgb, tex.a * cov);
+    return;
+  }
+  if (vMode > 0.5) {
+    // The atlas holds coverage in the alpha channel; the colour is the run's.
+    float cov = texture(uAtlas, vUV).a;
+    if (cov <= 0.001) discard;
+    outColor = vec4(vColor.rgb, vColor.a * cov);
+    return;
+  }
+  float d;
+  float alpha = boxCoverage(d);
+  // A two-stop linear gradient, mixed the way the software canvas mixes it:
+  // straight down the box, or straight across when the fill said so.
+  vec4 base = vColor;
+  if (vGrad > 0.5) {
+    base = mix(vColor, vColor2, clamp(vGrad > 1.5 ? vT.x : vT.y, 0.0, 1.0));
+  }
+  if (vThickness > 0.0) {
+    // Keep a band just inside the edge.
+    float inner = -vThickness;
+    float aa = clamp(fwidth(d), 0.35, 1.5);
+    alpha = alpha * smoothstep(inner - aa, inner + aa, d);
+  }
+  if (alpha <= 0.001) discard;
+  outColor = vec4(base.rgb, base.a * alpha);
+}`;
+
+// Paths are drawn as plain triangles in page space with one colour per draw:
+// a fill covers its own bounding box through the stencil, a stroke is the quads
+// its segments expand to.
+const PATH_VERT = `#version 300 es
+in vec2 aPos;
+uniform vec2 uPage;
+uniform vec2 uShift;
+uniform vec4 uView;
+out vec2 vPage;
+void main() {
+  // BEFORE the view transform. The gradient box the fragment shader mixes
+  // across arrives as a uniform in the display list's own coordinates, so
+  // the position compared against it has to be in those too — panned and
+  // zoomed, the ramp would otherwise slide across the shape.
+  vec2 q = aPos + uShift;
+  vPage = q;
+  vec2 p = q * uView.xy + uView.zw;
+  vec2 ndc = vec2((p.x / uPage.x) * 2.0 - 1.0, 1.0 - (p.y / uPage.y) * 2.0);
+  gl_Position = vec4(ndc, 0.0, 1.0);
+}`;
+
+// One colour per draw, or two. A vector filled with a gradient is not its own
+// bounding box, so the ramp cannot ride on a quad the way a rectangle's does:
+// the triangles are the shape and the box the stops run across comes in as a
+// uniform. uGrad is 0 for flat, 1 for down the box and 2 for across it, which
+// is what the display list's own `gd` means.
+const PATH_FRAG = `#version 300 es
+precision highp float;
+uniform vec4 uColor;
+uniform vec4 uColor2;
+uniform float uGrad;
+uniform vec4 uBox;
+in vec2 vPage;
+out vec4 outColor;
+void main() {
+  if (uGrad < 0.5) { outColor = uColor; return; }
+  vec2 t = (vPage - uBox.xy) / max(uBox.zw, vec2(0.001));
+  outColor = mix(uColor, uColor2, clamp(uGrad > 1.5 ? t.x : t.y, 0.0, 1.0));
+}`;
+
+/** The rings of a path command, as flat [x,y,…] arrays. */
+function ringsOf(c) {
+  const out = [];
+  const pts = c.pts || [];
+  const ends = c.ends || [];
+  let start = 0;
+  for (const end of ends) {
+    if (end - start >= 4) out.push(pts.slice(start, end));
+    start = end;
+  }
+  return out;
+}
+
+// A fan of triangles filling a disc, for a round join or a round cap. Eight
+// segments at a hairline and up to thirty-two at a thick stroke: the count
+// is what makes a corner look round rather than cut, and past that it is
+// vertices nobody can see.
+function disc(tris, cx, cy, r) {
+  const steps = Math.max(8, Math.min(32, Math.ceil(r * 2)));
+  const step = (Math.PI * 2) / steps;
+  for (let i = 0; i < steps; i += 1) {
+    const a = i * step, b = a + step;
+    tris.push(cx, cy, cx + Math.cos(a) * r, cy + Math.sin(a) * r, cx + Math.cos(b) * r, cy + Math.sin(b) * r);
+  }
+}
+
+/**
+ * A stroke's triangles: a quad per segment, and the corners and ends.
+ *
+ * The quads alone leave a WEDGE OF NOTHING at every corner — two rectangles
+ * meeting at an angle cover the inside of the turn twice and the outside not
+ * at all — so a thick polyline came out as a chain of separate bars. What
+ * goes in the wedge is the join:
+ *
+ *   round   a disc at the vertex, which is also what a round cap is
+ *   bevel   the triangle between the two outer corners
+ *   miter   the point where the two outer edges cross, cut back to a bevel
+ *           past the limit so a near-reversal does not grow a spike
+ *
+ * Every one of them only ADDS ink to what was drawn before, so a backend or
+ * a file that says nothing about joins keeps the picture it had and gains
+ * the corners it was missing.
+ *
+ * A cap is only put on an OPEN ring: a closed one has a join there instead,
+ * and a round cap on a closed path is a blob on the seam.
+ */
+/**
+ * The rings a dash pattern leaves of a polyline.
+ *
+ * `stroke-dasharray` is a list of lengths that alternate ON and OFF, and an
+ * ODD list runs twice: "4" is 4 on, 4 off, and "1 2 3" is a six-entry cycle.
+ * That rule is not a detail — a single-entry pattern is the commonest way a
+ * dashed line is written, and reading it as "4 on, nothing off" draws a
+ * solid line and looks like the feature is missing rather than wrong.
+ *
+ * The walk is per SEGMENT and keeps its place in the pattern across
+ * vertices, so a dash rounds a corner the way it does in a browser instead
+ * of restarting at every bend.
+ */
+export function dashRings(rings, pattern, offset) {
+  const pat = pattern.filter((v) => v >= 0);
+  const cycle = pat.reduce((a, b) => a + b, 0);
+  if (!pat.length || cycle <= 0) return rings;
+  const full = pat.length % 2 === 1 ? pat.concat(pat) : pat;
+  const period = full.reduce((a, b) => a + b, 0);
+  const out = [];
+  for (const ring of rings) {
+    // Where in the pattern this ring starts, from `stroke-dashoffset`.
+    let at = ((offset || 0) % period + period) % period;
+    let idx = 0;
+    while (at >= full[idx]) { at -= full[idx]; idx = (idx + 1) % full.length; }
+    let on = idx % 2 === 0;
+    let left = full[idx] - at;
+    let current = on ? [ring[0], ring[1]] : null;
+    for (let i = 0; i + 3 < ring.length; i += 2) {
+      let x1 = ring[i], y1 = ring[i + 1];
+      const x2 = ring[i + 2], y2 = ring[i + 3];
+      let len = Math.hypot(x2 - x1, y2 - y1);
+      if (len < 1e-9) continue;
+      const ux = (x2 - x1) / len, uy = (y2 - y1) / len;
+      while (len > left) {
+        const cx = x1 + ux * left, cy = y1 + uy * left;
+        if (on) {
+          current.push(cx, cy);
+          if (current.length >= 4) out.push(current);
+          current = null;
+        } else {
+          current = [cx, cy];
+        }
+        x1 = cx; y1 = cy;
+        len -= left;
+        on = !on;
+        idx = (idx + 1) % full.length;
+        left = full[idx];
+      }
+      left -= len;
+      if (on) current.push(x2, y2);
+    }
+    if (on && current && current.length >= 4) out.push(current);
+  }
+  return out;
+}
+
+/** "6 4" or "6,4" as numbers; anything that is not one is dropped. */
+export function parseDash(text) {
+  if (!text) return [];
+  return String(text)
+    .split(/[\s,]+/)
+    .map((t) => parseFloat(t))
+    .filter((v) => Number.isFinite(v) && v >= 0);
+}
+
+export function strokeTriangles(rings, width, cap, join, scale = 1) {
+  // A HAIRLINE IS THREE QUARTERS OF A PIXEL, and a pixel is a screen thing.
+  // The floor stops a thin line from disappearing into the gaps between
+  // samples, so it has to be measured where the line will be DRAWN: a list
+  // with a camera is in scene units, and a 1.5-unit stroke on a board at 0.17
+  // is a quarter of a pixel. Left as a floor on the list's own units it never
+  // applied there, and every line in a zoomed-out diagram came out a third as
+  // dark as the same diagram drawn without a camera \u2014 which is what the
+  // rangerflow page showed the first time the two were compared.
+  const s = scale || 1;
+  const half = Math.max(width, 0.75 / s) / 2;
+  const miterLimit = 4;
+  const tris = [];
+  for (const ring of rings) {
+    const n = ring.length;
+    if (n < 4) continue;
+    const closed = Math.abs(ring[0] - ring[n - 2]) < 1e-6 && Math.abs(ring[1] - ring[n - 1]) < 1e-6;
+    for (let i = 0; i + 3 < n; i += 2) {
+      const x1 = ring[i], y1 = ring[i + 1], x2 = ring[i + 2], y2 = ring[i + 3];
+      let dx = x2 - x1, dy = y2 - y1;
+      const len = Math.hypot(dx, dy);
+      if (len < 1e-6) continue;
+      const ux = dx / len, uy = dy / len;
+      // The normal, scaled to half the stroke width.
+      const nx = -uy * half, ny = ux * half;
+      // A square cap is the segment run on by half a width at the end that
+      // has no neighbour; a butt cap stops where the geometry stops.
+      let ax = x1, ay = y1, bx = x2, by = y2;
+      if (cap === 2 && !closed) {
+        if (i === 0) { ax -= ux * half; ay -= uy * half; }
+        if (i + 4 >= n) { bx += ux * half; by += uy * half; }
+      }
+      tris.push(
+        ax + nx, ay + ny, bx + nx, by + ny, bx - nx, by - ny,
+        ax + nx, ay + ny, bx - nx, by - ny, ax - nx, ay - ny,
+      );
+      // The corner between this segment and the next.
+      if (i + 5 < n) {
+        joinAt(tris, ring, i, half, join, miterLimit);
+      }
+    }
+    if (closed) {
+      // The seam is a corner like any other: the last segment meeting the
+      // first. Without this a closed path is drawn with one notch in it.
+      // A ring too short to have a seam — a point written twice — has no
+      // corner either, and must not fall through to the cap: a round cap
+      // there is two discs of ink where the file asked for nothing.
+      if (n >= 6) joinSeam(tris, ring, half, join, miterLimit);
+    } else if (cap === 1) {
+      disc(tris, ring[0], ring[1], half);
+      disc(tris, ring[n - 2], ring[n - 1], half);
+    }
+  }
+  return tris;
+}
+
+/** The corner at vertex i+2, between segments (i,i+1) and (i+2,i+3). */
+function joinAt(tris, ring, i, half, join, miterLimit) {
+  cornerTris(tris, ring[i], ring[i + 1], ring[i + 2], ring[i + 3], ring[i + 4], ring[i + 5], half, join, miterLimit);
+}
+
+/** The corner where a closed ring's last segment meets its first. */
+function joinSeam(tris, ring, half, join, miterLimit) {
+  const n = ring.length;
+  cornerTris(tris, ring[n - 4], ring[n - 3], ring[0], ring[1], ring[2], ring[3], half, join, miterLimit);
+}
+
+function cornerTris(tris, x0, y0, cx, cy, x2, y2, half, join, miterLimit) {
+  if (join === 1) {
+    disc(tris, cx, cy, half);
+    return;
+  }
+  const d1x = cx - x0, d1y = cy - y0;
+  const d2x = x2 - cx, d2y = y2 - cy;
+  const l1 = Math.hypot(d1x, d1y), l2 = Math.hypot(d2x, d2y);
+  if (l1 < 1e-6 || l2 < 1e-6) return;
+  const u1x = d1x / l1, u1y = d1y / l1;
+  const u2x = d2x / l2, u2y = d2y / l2;
+  // Which side the turn opens on: the wedge is on the outside of it.
+  const cross = u1x * u2y - u1y * u2x;
+  if (Math.abs(cross) < 1e-9) return;
+  const sign = cross > 0 ? -1 : 1;
+  const p1x = cx + -u1y * half * sign, p1y = cy + u1x * half * sign;
+  const p2x = cx + -u2y * half * sign, p2y = cy + u2x * half * sign;
+  // The bevel: the triangle between the two outer corners and the vertex.
+  tris.push(cx, cy, p1x, p1y, p2x, p2y);
+  if (join === 2) return;
+  // Miter: where the two offset edges cross. With unit outer normals that
+  // is `c + half * (n1+n2) / (1 + n1·n2)`, which needs no angle and no
+  // trigonometry. The denominator goes to zero as the turn approaches a
+  // reversal, and the limit is what stops the point growing into a spike
+  // as long as the page — past it the bevel already pushed is the corner.
+  const n1x = (p1x - cx) / half, n1y = (p1y - cy) / half;
+  const n2x = (p2x - cx) / half, n2y = (p2y - cy) / half;
+  const denom = 1 + (n1x * n2x + n1y * n2y);
+  if (denom < 1e-6) return;
+  const mx = cx + ((n1x + n2x) / denom) * half;
+  const my = cy + ((n1y + n2y) / denom) * half;
+  if (Math.hypot(mx - cx, my - cy) > miterLimit * half) return;
+  tris.push(p1x, p1y, mx, my, p2x, p2y);
+}
+
+function boundsOf(rings) {
+  let x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
+  for (const ring of rings) {
+    for (let i = 0; i + 1 < ring.length; i += 2) {
+      if (ring[i] < x0) x0 = ring[i];
+      if (ring[i] > x1) x1 = ring[i];
+      if (ring[i + 1] < y0) y0 = ring[i + 1];
+      if (ring[i + 1] > y1) y1 = ring[i + 1];
+    }
+  }
+  return [x0, y0, x1, y1];
+}
+
+function compile(gl, type, src) {
+  const s = gl.createShader(type);
+  gl.shaderSource(s, src);
+  gl.compileShader(s);
+  if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {
+    throw new Error("shader: " + gl.getShaderInfoLog(s));
+  }
+  return s;
+}
+
+/**
+ * Fetch and upload every distinct image the list refers to.
+ *
+ * Separate from rendering, and async, because a texture cannot be bound until
+ * its bytes have arrived — and the whole page would otherwise draw once with
+ * holes where the photos go. Call it, await it, then render.
+ *
+ * A `src` that will not load resolves to null rather than rejecting: one
+ * missing photo should leave a gap in the page, not an empty canvas.
+ */
+export async function loadImages(doc, opts = {}) {
+  const base = opts.base || "";
+  const srcs = [...new Set(doc.list.cmds.filter((c) => c.k === KIND.IMAGE && c.src).map((c) => c.src))];
+  const out = new Map();
+  await Promise.all(
+    srcs.map(
+      (src) =>
+        new Promise((resolve) => {
+          const img = new Image();
+          img.crossOrigin = "anonymous";
+          img.onload = () => {
+            out.set(src, img);
+            resolve();
+          };
+          img.onerror = () => {
+            out.set(src, null);
+            resolve();
+          };
+          img.src = base + src;
+        })
+    )
+  );
+  return out;
+}
+
+/**
+ * Rasterize each text run into one atlas texture.
+ *
+ * A run per slot rather than a glyph per slot: EVG has already decided where
+ * each run sits and how wide it is, so the backend does not need to shape
+ * anything — it needs a picture of the run. That also keeps kerning exactly as
+ * EVG measured it, since the same string goes to the rasterizer whole.
+ */
+/**
+ * What makes two text runs the same GLYPHS. Everything that changes the
+ * rasterized shape is in here and nothing else is — a run that moved, or
+ * changed colour, draws the same picture from the same slot.
+ *
+ * The atlas used to be keyed by the command OBJECT, which made it impossible
+ * to reuse between frames: a display list arrives as fresh JSON every time, so
+ * every object is new and every glyph was rasterized and uploaded again. Sixty
+ * times a second.
+ */
+
+/**
+ * A run of display-list text, wrapped so the browser lays it out verbatim.
+ *
+ * `fillText` is not a glyph blitter: it runs the bidirectional algorithm over
+ * whatever it is given. That is right for logical text and wrong for ours —
+ * the display list is in VISUAL order already, reordered and shaped by
+ * OfficeText on the way in, so the browser reordered a second time and put
+ * every right-to-left line back into the order it was stored in. Letters
+ * joined correctly (shaped once) and words ran backwards (reordered twice),
+ * which is exactly how it was reported.
+ *
+ * The producer has to own the ordering because it is the only party that sees
+ * a LINE: a line that changes colour partway along becomes several text
+ * commands at computed x positions, and a browser asked to lay out each of
+ * them on its own would reorder each in isolation — the same bug one level
+ * down. So the fix is to stop the browser reordering: U+202D LEFT-TO-RIGHT
+ * OVERRIDE forces every character to level 0, and U+202C pops it.
+ *
+ * Applied to every run, not only the ones with Arabic in them. It is a no-op
+ * for Latin, it keeps measurement and rasterization on identical strings, and
+ * an unconditional rule is one a future backend cannot half-implement.
+ */
+const LRO = "\u202D", PDF = "\u202C";
+export const verbatim = (t) => LRO + t + PDF;
+
+/** The families the browser may fall back to, after the one a command names.
+ *
+ *  It matters because our own FontManager falls back per CODEPOINT across
+ *  every loaded face — that is how an emoji, a geometric bullet or an Arabic
+ *  letter gets drawn at all when the text face has no glyph for it — and every
+ *  width in the layout was measured through that walk. A canvas that ends its
+ *  font list at `sans-serif` answers those same codepoints from whatever the
+ *  system has, so the glyphs appear (looking fine) at widths nobody measured.
+ *
+ *  A page sets this to its own pool, in the order it loaded the faces, so the
+ *  two walks agree. Default is what it always was.
+ */
+let fallbackStack = "sans-serif";
+let loadedFamilies = new Set();
+export function setFontFallback(families) {
+  const list = (families || []).filter((f) => f && f.length);
+  // The same list, kept as a SET, answers a second question: is the family a
+  // command names one the page actually loaded? See `familyOf`.
+  loadedFamilies = new Set(list);
+  fallbackStack = list.map((f) => `"${f}"`).concat("sans-serif").join(", ");
+}
+
+/** One place that turns a TEXT command into a CSS font shorthand — it was
+ *  written twice, once for measuring and once for rasterizing, and the two
+ *  had to stay identical or a run was drawn at a size it was not measured at.
+ */
+// The family less the `-Bold` suffix `effectiveFontFamily` writes for a bold
+// element — a convention for the TTF measurers, and to a browser a family
+// nobody has. The weight is given separately. `evg-measure.js` strips the
+// same suffix, so the layout measured with the face this draws with.
+//
+// UNLESS the page loaded that exact family. A producer may name the FACE
+// rather than a family plus a weight flag — it is the only spelling that
+// survives bold-italic, since `Open Sans-Italic` plus a bold flag asks for
+// `Open Sans-Italic-Bold` and gets nothing — and such a page registers
+// `Open Sans-Bold` as a family of its own. Stripping the suffix there drew
+// bold runs in the REGULAR face: about 7% narrow, so nothing looked bold and
+// every run after one on the line sat a gap too far right, which is what a
+// reader sees as a huge space in the middle of a sentence. The page's own
+// pool, the one it hands `setFontFallback`, is what decides.
+const familyOf = (c) => {
+  const f = c.font || "";
+  if (loadedFamilies.has(f)) return f;
+  return f.endsWith("-Bold") ? f.slice(0, -5) : f;
+};
+
+export function fontSpec(c, dpr) {
+  return `${c.italic ? "italic " : ""}${c.weight ? c.weight + " " : ""}${c.size * dpr}px "${familyOf(c)}", ${fallbackStack}`;
+}
+
+function runKey(c, dpr) {
+  return `${dpr}|${c.font || ""}|${c.size}|${c.weight || ""}|${c.italic ? 1 : 0}|${c.ls || 0}|${c.text}`;
+}
+
+// `letter-spacing`, set on the 2D context that measures the run and on the
+// one that rasterizes it — the same value on both, or the slot is cut to a
+// width the ink does not fit in. A canvas that does not know the property
+// ignores the assignment and draws the run at the font's own spacing, which
+// is where every run was before this and is the right thing to lose.
+function applySpacing(ctx, c, dpr) {
+  const ls = c.ls || 0;
+  ctx.letterSpacing = ls ? `${ls * dpr}px` : "0px";
+}
+
+/** The runs an atlas holds: every distinct run, or — `onlyVisible` — only
+ *  those that touch the page, when the whole list would not fit a texture. */
+function atlasRuns(cmds, dpr, view, onlyVisible) {
+  const seen = new Set();
+  const runs = [];
+  for (const c of cmds) {
+    if (c.k !== KIND.TEXT || !c.text) continue;
+    if (onlyVisible && view) {
+      const w = c.w || 0, h = c.h || (c.size || 0) * 1.5;
+      if (c.x > view.w || c.y > view.h || c.x + w < 0 || c.y + h < 0) continue;
+    }
+    const key = runKey(c, dpr);
+    if (seen.has(key)) continue;
+    seen.add(key);
+    runs.push(c);
+  }
+  return runs;
+}
+
+const nextPow2 = (n) => { let p = 1; while (p < n) p *= 2; return p; };
+
+// The empty border around a slot, so the linear filter never samples a
+// neighbour's ink.
+const PAD = 2;
+
+/** One run, measured with the face it will be drawn in. */
+function measureRun(ctx, c, dpr) {
+  ctx.font = fontSpec(c, dpr);
+  applySpacing(ctx, c, dpr);
+  const m = ctx.measureText(verbatim(c.text));
+  // Two different ascents, and the difference between them is the whole of
+  // where a run sits. `actualBoundingBox*` is the INK of these particular
+  // letters — "moon" has no ascender and no descender, "Ãg" has both — and
+  // is what the slot has to be big enough to hold. `fontBoundingBoxAscent`
+  // is the FACE's ascent, the same number for every string in the font, and
+  // is what EVG means: a TEXT command's y is the top of the line box, and
+  // the baseline sits one face-ascent below it. Placing the ink at y
+  // instead pushed every run up by the height of the empty space above its
+  // capitals — a couple of pixels for a caption, most of a line for a
+  // heading — which in a spreadsheet is text climbing out of its row.
+  // Rounded UP to a whole device pixel, so the baseline the run is
+  // rasterised on is a texel row and not a fraction of one: the draw below
+  // lines the quad up on the device grid, and a glyph whose baseline sat
+  // 0.4 texel into its row came out resampled across two rows however well
+  // the quad was placed. The quad is placed from this same number, so the
+  // baseline on the page does not move.
+  const asc = Math.ceil(m.actualBoundingBoxAscent || c.size * dpr * 0.8);
+  const desc = m.actualBoundingBoxDescent || c.size * dpr * 0.25;
+  const faceAsc = m.fontBoundingBoxAscent || (c.h ? c.h * dpr * 0.78 : c.size * dpr * 1.05);
+  // The face's DESCENT, needed for the half-leading — the line box holds the
+  // whole face, not just the part above the baseline.
+  const faceDesc = m.fontBoundingBoxDescent || c.size * dpr * 0.212;
+  return { c, w: Math.ceil(m.width) + PAD * 2, h: Math.ceil(asc + desc) + PAD * 2, asc, faceAsc, faceDesc };
+}
+
+/**
+ * The atlas is a SHELF: rows of slots, left to right, top to bottom, and a
+ * cursor at the end of the last row. A new run goes after the cursor or
+ * starts the next row. The cursor is KEPT between frames — that is what lets
+ * a frame add the runs it is the first to show behind the ones already there
+ * instead of laying every run out again.
+ */
+function shelfOf(w, limit) {
+  return { w, limit, x: 0, y: 0, rowH: 0 };
+}
+
+/** Place one measured run on the shelf. False when it would pass the limit,
+ *  and false for a run WIDER THAN THE SHELF: placed at x=0 and uploaded up to
+ *  the texture's edge, such a run kept a slot whose u1 ran past 1.0, and
+ *  CLAMP_TO_EDGE answered every sample beyond the edge with the last column
+ *  of ink — a horizontal streak, in the text's colour, running on from where
+ *  the glyphs stopped. Seen on the timeline's descriptions on a Retina Mac,
+ *  whose face was wider than the 512px atlas the first frame's short runs had
+ *  sized. Refusing here makes `appendRuns` hand back false, and the atlas is
+ *  rebuilt at the width its widest run needs. */
+function placeRun(shelf, m) {
+  if (m.w > shelf.w) return false;
+  if (shelf.x + m.w > shelf.w) { shelf.x = 0; shelf.y += shelf.rowH; shelf.rowH = 0; }
+  if (shelf.y + m.h > shelf.limit) return false;
+  m.x = shelf.x;
+  m.y = shelf.y;
+  shelf.x += m.w;
+  shelf.rowH = Math.max(shelf.rowH, m.h);
+  return true;
+}
+
+/** How tall a shelf's rows are so far, as a texture height. */
+const shelfHeight = (shelf) => nextPow2(Math.max(64, shelf.y + shelf.rowH));
+
+function slotOf(m, dpr, texW, texH, colored) {
+  return {
+    u0: m.x / texW, v0: m.y / texH,
+    u1: (m.x + m.w) / texW, v1: (m.y + m.h) / texH,
+    w: m.w / dpr, h: m.h / dpr, asc: m.asc / dpr, pad: PAD / dpr,
+    faceAsc: m.faceAsc / dpr, faceDesc: m.faceDesc / dpr,
+    colored,
+  };
+}
+
+function rasterRuns(c2, measured, dpr) {
+  c2.textBaseline = "alphabetic";
+  c2.fillStyle = "#fff";
+  for (const m of measured) {
+    c2.font = fontSpec(m.c, dpr);
+    applySpacing(c2, m.c, dpr);
+    c2.fillText(verbatim(m.c.text), m.x + PAD, m.y + PAD + m.asc);
+  }
+}
+
+/**
+ * Draw a coloured run's cell again, its letters in the key ink.
+ *
+ * A run is one cell, so "🏀 Koripallon EM-kisat" is ONE picture: a sticker the
+ * browser painted in its own colours and letters it painted in the fill style,
+ * white. The cell reads as coloured, the shader samples its pixels as they are
+ * — and the letters come out white on a white box, which is how this was
+ * reported.
+ *
+ * The emoji ignores the fill style and the letters obey it, so painting the
+ * cell once more in a colour no text is — pure magenta — separates the two
+ * without knowing where one ends: whatever came out magenta is letters, and
+ * COLORTEXT gives those the run's colour.
+ */
+const KEY_INK = "#f0f";
+
+function reinkColored(c2, m, dpr) {
+  c2.clearRect(m.x, m.y, m.w, m.h);
+  c2.save();
+  c2.beginPath();
+  c2.rect(m.x, m.y, m.w, m.h);
+  c2.clip();
+  c2.textBaseline = "alphabetic";
+  c2.fillStyle = KEY_INK;
+  c2.font = fontSpec(m.c, dpr);
+  applySpacing(c2, m.c, dpr);
+  c2.fillText(verbatim(m.c.text), m.x + PAD, m.y + PAD + m.asc);
+  c2.restore();
+}
+
+/**
+ * Every run in the list, rasterized from scratch — what the first frame does,
+ * and what a frame does when the shelf is full.
+ *
+ * Packed in rows. A list with more text than one texture holds — a long feed
+ * of cards, most of it scrolled away — used to ask for a texture taller than
+ * the card allows and get nothing back, so every run drew as a solid box.
+ * Now the atlas widens up to the card's limit, then keeps only the runs that
+ * touch the page (the rest are not drawn anyway), and as a last resort drops
+ * what still does not fit.
+ */
+function buildTextAtlas(cmds, dpr, view, maxTex) {
+  let runs = atlasRuns(cmds, dpr, view, false);
+  let culled = false;
+  const limit = Math.max(2048, maxTex || 2048);
+  const canvas = document.createElement("canvas");
+  // The atlas is READ BACK (`getImageData`, to find the ink a run actually
+  // drew), so it asks for a CPU-side bitmap up front. Without the flag
+  // Chromium keeps it on the GPU, warns "Multiple readback operations using
+  // getImageData are faster with the willReadFrequently attribute", and pays
+  // a GPU readback per call. The first getContext fixes the attributes, so
+  // it is said here and not at the later calls on the same canvas.
+  const ctx = canvas.getContext("2d", { willReadFrequently: true });
+  if (!runs.length) return { canvas: null, slots: new Map(), culled, shelf: shelfOf(Math.min(2048, limit), limit) };
+  const measure = (c) => measureRun(ctx, c, dpr);
+  // Every run on a shelf, however tall that makes it — the fits are judged
+  // after, against the limit.
+  const pack = (list, atlasW) => {
+    const shelf = shelfOf(atlasW, Infinity);
+    for (const m of list) {
+      // A run wider than the widest texture the card allows is CUT, and cut
+      // honestly: the slot's width is what will be rasterised, so the quad
+      // ends where the glyphs end instead of sampling past the texture's
+      // edge. `fullW` keeps the measured width across the repacks below.
+      if (m.fullW === undefined) m.fullW = m.w;
+      m.w = Math.min(m.fullW, atlasW);
+      placeRun(shelf, m);
+    }
+    shelf.limit = limit;
+    return shelf;
+  };
+  let measured = runs.map(measure);
+  let atlasW = Math.min(2048, nextPow2(Math.max(512, ...measured.map((m) => m.w))));
+  let shelf = pack(measured, atlasW);
+  while (shelfHeight(shelf) > limit && atlasW < limit) {
+    atlasW = Math.min(limit, atlasW * 2);
+    shelf = pack(measured, atlasW);
+  }
+  if (shelfHeight(shelf) > limit && view) {
+    runs = atlasRuns(cmds, dpr, view, true);
+    culled = true;
+    measured = runs.map(measure);
+    shelf = pack(measured, atlasW);
+  }
+  while (shelfHeight(shelf) > limit && measured.length > 1) {
+    measured = measured.slice(0, Math.max(1, Math.floor(measured.length / 2)));
+    culled = true;
+    shelf = pack(measured, atlasW);
+  }
+  canvas.width = atlasW;
+  canvas.height = Math.min(limit, shelfHeight(shelf));
+  const c2 = canvas.getContext("2d");
+  c2.clearRect(0, 0, canvas.width, canvas.height);
+  rasterRuns(c2, measured, dpr);
+  const slots = new Map();
+  for (const m of measured) {
+    const s = slotOf(m, dpr, canvas.width, canvas.height, false);
+    s._px = m.x; s._py = m.y; s._pw = m.w; s._ph = m.h;
+    s._m = m;
+    slots.set(runKey(m.c, dpr), s);
+  }
+  markColoredSlots(c2, slots, dpr);
+  return { canvas, slots, culled, shelf };
+}
+
+/** Whether a cell of pixels holds anything but white ink. Every other pixel
+ *  each way — enough to catch a sticker, cheap enough not to matter. */
+function inkIsColored(data, W, x0, y0, x1, y1) {
+  for (let y = y0; y < y1; y += 2) {
+    for (let x = x0; x < x1; x += 2) {
+      const i = (y * W + x) * 4;
+      if (data[i + 3] < 24) continue;
+      // White is what a masked glyph is. Anything meaningfully off it was
+      // painted by the browser and has to keep its own pixels.
+      if (data[i] < 232 || data[i + 1] < 232 || data[i + 2] < 232) return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * Which atlas cells the browser drew in colours of its own.
+ *
+ * Everything here is drawn with `fillStyle = "#fff"`, so a glyph comes out
+ * white with the shape carried in the alpha — a coverage mask, which is what
+ * the text shader expects. A colour emoji ignores the fill style: the browser
+ * paints its own bitmap, and its alpha is the whole opaque sticker. Masked
+ * with the run's colour that is a solid blob — a red disc where a smiling
+ * face should be, which is exactly how this was reported.
+ *
+ * There is no reliable way to ask ahead of time whether a string will come out
+ * coloured: it depends on the codepoints, the font stack and the platform, and
+ * the emoji ranges alone get it wrong in both directions. So this reads back
+ * what was actually drawn. One `getImageData` over the whole atlas, on the
+ * rare frames that build one, and every fourth pixel of each cell — enough to
+ * catch a sticker, cheap enough not to matter.
+ */
+export function markColoredSlots(c2, slots, dpr = 1) {
+  let img;
+  try {
+    img = c2.getImageData(0, 0, c2.canvas.width, c2.canvas.height);
+  } catch (_) {
+    return;                       // a tainted or zero-sized canvas: leave them all as masks
+  }
+  const data = img.data, W = img.width;
+  for (const s of slots.values()) {
+    const x0 = s._px | 0, y0 = s._py | 0;
+    const x1 = Math.min(W, x0 + Math.ceil(s._pw));
+    const y1 = Math.min(img.height, y0 + Math.ceil(s._ph));
+    s.colored = inkIsColored(data, W, x0, y0, x1, y1);
+    // The letters beside the sticker, in the key ink. Only where the caller
+    // left the measured run on the slot — a caller that did not keeps white
+    // letters, which is what it had before.
+    if (s.colored && s._m) reinkColored(c2, s._m, dpr);
+    delete s._px; delete s._py; delete s._pw; delete s._ph; delete s._m;
+  }
+}
+
+/**
+ * The UV rectangle that makes a source of `sw`×`sh` cover a box of `bw`×`bh`.
+ *
+ * This is `object-fit: cover`: fill the box and crop the overflow, centred,
+ * rather than distort the picture. Cropping in UV space means the GPU samples
+ * only what is shown, so the quad stays two triangles whatever the aspect
+ * mismatch.
+ */
+function coverUV(sw, sh, bw, bh) {
+  if (!sw || !sh || !bw || !bh) return [0, 0, 1, 1];
+  const src = sw / sh, box = bw / bh;
+  if (src > box) {
+    const f = box / src;          // source is wider: crop left and right
+    return [(1 - f) / 2, 0, 1 - (1 - f) / 2, 1];
+  }
+  const f = src / box;            // source is taller: crop top and bottom
+  return [0, (1 - f) / 2, 1, 1 - (1 - f) / 2];
+}
+
+function makeTexture(gl, source) {
+  const t = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, t);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+  return t;
+}
+
+/**
+ * The two programs, compiled once per context and kept.
+ *
+ * They used to be built on every call — two `compileShader`s, two
+ * `linkProgram`s and the `getShaderParameter` / `getProgramParameter` that go
+ * with them, sixty times a second. Those queries are SYNCHRONOUS: asking for
+ * COMPILE_STATUS makes the CPU wait for the driver to finish the compile it
+ * had every right to defer. In a Chrome profile of the code editor it was
+ * 160 ms of a 440 ms window — 36% of the frame, spent recompiling two shaders
+ * that had not changed since the page loaded.
+ *
+ * Keyed by the context, so a page with two canvases gets two sets and a
+ * context that is thrown away takes its programs with it.
+ */
+const PROGRAMS = new WeakMap();
+const ATLASES = new WeakMap();
+const IMAGE_TEXTURES = new WeakMap();
+
+/**
+ * Make room on a kept atlas: a taller bitmap with the old one drawn at its
+ * top, a texture uploaded from it, and every slot's v rescaled to the new
+ * height. Doubling, so it happens a handful of times in the life of a page.
+ */
+function growAtlas(gl, have, texH) {
+  const big = document.createElement("canvas");
+  big.width = have.texW;
+  big.height = texH;
+  // Read back like the atlas it replaces — see `buildTextAtlas`.
+  const ctx = big.getContext("2d", { willReadFrequently: true });
+  ctx.clearRect(0, 0, big.width, big.height);
+  ctx.drawImage(have.bitmap, 0, 0);
+  const scale = have.texH / texH;
+  for (const s of have.slots.values()) {
+    s.v0 *= scale;
+    s.v1 *= scale;
+  }
+  have.bitmap = big;
+  have.ctx = ctx;
+  have.texH = texH;
+  gl.deleteTexture(have.tex);
+  have.tex = makeTexture(gl, big);
+}
+
+/**
+ * The runs a frame shows for the first time, added behind the ones the atlas
+ * already holds. Each new slot is rasterized, read back once — the read
+ * serves both the colour check and the upload — and sent to the card as a
+ * sub-image; nothing already on the atlas is touched. False when the shelf
+ * cannot take them, which is the caller's cue to start a fresh one.
+ */
+function appendRuns(gl, have, runs, dpr) {
+  const measured = runs.map((c) => measureRun(have.ctx, c, dpr));
+  const shelf = { ...have.shelf };
+  for (const m of measured) {
+    if (!placeRun(shelf, m)) return false;
+  }
+  const needH = Math.min(shelf.limit, shelfHeight(shelf));
+  if (needH > have.texH) growAtlas(gl, have, needH);
+  have.shelf = shelf;
+  const c2 = have.ctx;
+  rasterRuns(c2, measured, dpr);
+  gl.bindTexture(gl.TEXTURE_2D, have.tex);
+  for (const m of measured) {
+    const w = Math.min(m.w, have.texW - m.x);
+    const h = Math.min(m.h, have.texH - m.y);
+    let colored = false;
+    if (w > 0 && h > 0) {
+      let img = null;
+      try {
+        img = c2.getImageData(m.x, m.y, w, h);
+      } catch (_) {
+        img = null;               // a tainted canvas: the slot stays a mask, and is uploaded whole
+      }
+      if (img) {
+        colored = inkIsColored(img.data, img.width, 0, 0, img.width, img.height);
+        if (colored) {
+          reinkColored(c2, m, dpr);
+          img = c2.getImageData(m.x, m.y, w, h);
+        }
+        gl.texSubImage2D(gl.TEXTURE_2D, 0, m.x, m.y, gl.RGBA, gl.UNSIGNED_BYTE, img);
+      } else {
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, have.bitmap);
+      }
+    }
+    have.slots.set(runKey(m.c, dpr), slotOf(m, dpr, have.texW, have.texH, colored));
+  }
+  return true;
+}
+
+/**
+ * The text atlas for this context, ADDED TO as the page shows new text and
+ * rebuilt only when it is full.
+ *
+ * It used to be keyed by every distinct run in the list, in order, and
+ * rebuilt whole whenever that key changed. On a static page the key never
+ * changed and the atlas was free; on a SCROLLING one it changed on every
+ * frame, because the list is culled to the viewport and every scroll brings
+ * a row in and takes one out — so every scroll frame rasterized every run on
+ * the page onto a 2-D canvas, read the whole canvas back to find the colour
+ * emoji, and uploaded it to the card. In a Chrome profile of a fling that
+ * was a fifth of the frame, and it is what the fling stuttered on.
+ *
+ * Now a frame asks for the runs it holds that the atlas does not — usually
+ * none, and on the frame a new row arrives, that row's — and those alone are
+ * drawn, read back and uploaded. What it does NOT include is where the runs
+ * are or what colour they are, because neither changes a glyph. Runs that
+ * scroll away stay on the shelf, and are there when the page scrolls back;
+ * when the shelf is full the atlas starts again from the runs on the screen.
+ *
+ * A list too big for one texture even alone falls back to the old scheme:
+ * an atlas of the runs that touch the page, keyed by them and rebuilt when
+ * they change. `culled` says which regime is in force.
+ */
+function atlasFor(gl, cmds, dpr, view) {
+  const have = ATLASES.get(gl);
+  if (have && !have.culled) {
+    const missing = [];
+    const seen = new Set();
+    for (const c of cmds) {
+      if (c.k !== KIND.TEXT || !c.text) continue;
+      const key = runKey(c, dpr);
+      if (have.slots.has(key) || seen.has(key)) continue;
+      seen.add(key);
+      missing.push(c);
+    }
+    if (!missing.length) {
+      have.rebuilt = false;
+      have.added = 0;
+      return have;
+    }
+    if (have.bitmap && appendRuns(gl, have, missing, dpr)) {
+      have.rebuilt = false;
+      have.added = missing.length;
+      return have;
+    }
+  }
+  const keyOf = () => atlasRuns(cmds, dpr, view, true).map((c) => runKey(c, dpr)).join("|");
+  if (have && have.culled && have.key === keyOf()) {
+    have.rebuilt = false;
+    have.added = 0;
+    return have;
+  }
+  if (have && have.tex) gl.deleteTexture(have.tex);
+  const maxTex = gl.getParameter(gl.MAX_TEXTURE_SIZE) || 2048;
+  const { canvas, slots, culled, shelf } = buildTextAtlas(cmds, dpr, view, maxTex);
+  const made = {
+    key: culled ? keyOf() : null,
+    culled,
+    slots,
+    shelf,
+    bitmap: canvas,
+    ctx: canvas ? canvas.getContext("2d") : null,
+    texW: canvas ? canvas.width : 1,
+    texH: canvas ? canvas.height : 1,
+    // Reported in the stats: rebuilding the atlas means rasterising every run
+    // on the page and uploading it, and doing that on a frame where nothing
+    // about the text changed is the waste this cache exists to stop; adding
+    // means the runs that were new. A test can watch them; a timing number
+    // on a software GL driver cannot.
+    rebuilt: true,
+    added: slots.size,
+    tex: canvas ? makeTexture(gl, canvas) : makeTexture(gl, new ImageData(1, 1)),
+  };
+  ATLASES.set(gl, made);
+  return made;
+}
+
+/**
+ * One GL texture per image source, for the life of the context. Uploading the
+ * same picture again every frame is pure cost — the code before this cache
+ * both re-uploaded and leaked one texture per image per frame.
+ *
+ * The entry remembers WHICH image it was made from, and that is not a detail.
+ * A src here is a name inside a document — `ppt/media/image1.png` — and a
+ * second document names its own first picture exactly the same. Keying on the
+ * name alone, the cache answered a newly opened file with the previous file's
+ * textures: open one deck, open another, and slide 1 still showed the logo of
+ * the deck before it. So a changed image object re-uploads, and the texture it
+ * replaces is deleted rather than left on the card.
+ */
+function textureCacheFor(gl, images) {
+  let cache = IMAGE_TEXTURES.get(gl);
+  if (!cache) {
+    cache = new Map();
+    IMAGE_TEXTURES.set(gl, cache);
+  }
+  let uploaded = 0;
+  for (const [src, img] of images) {
+    if (!img) continue;
+    const have = cache.get(src);
+    if (have && have.img === img) continue;
+    if (have && have.tex) gl.deleteTexture(have.tex);
+    cache.set(src, { tex: makeTexture(gl, img), w: img.naturalWidth, h: img.naturalHeight, img });
+    uploaded += 1;
+  }
+  cache.uploaded = uploaded;
+  return cache;
+}
+
+/**
+ * Forget every image texture on this context. A host that closes a document
+ * does not have to call this — a changed image re-uploads on its own — but a
+ * host that unloads one without opening another can hand the card's memory
+ * back instead of holding it until the context dies.
+ */
+export function dropImageTextures(gl) {
+  const cache = IMAGE_TEXTURES.get(gl);
+  if (!cache) return 0;
+  let dropped = 0;
+  for (const entry of cache.values()) {
+    if (entry && entry.tex) {
+      gl.deleteTexture(entry.tex);
+      dropped += 1;
+    }
+  }
+  cache.clear();
+  return dropped;
+}
+
+// ---------------------------------------------------------------------------
+// backdrop-filter: blur()
+// ---------------------------------------------------------------------------
+// What CSS does here is measured in `../oracle/css-blur.json`, and two of the
+// findings decide this whole implementation:
+//
+//   THE KERNEL IS NOT A GAUSSIAN. `blur(r)` is the SVG filter spec's
+//   three-box approximation with sigma = r — three box passes of width
+//   d = floor(sigma * 3 * sqrt(2*pi) / 4 + 0.5). Fitted against a real browser
+//   at three radii the three-box model is within half a luminance level
+//   everywhere; a true Gaussian with the same sigma is out by up to 14. The
+//   common belief is half right: the sigma is the radius, and the shape is not
+//   a Gaussian.
+//
+//   THE BACKDROP IS THE ELEMENT'S OWN REGION, EDGE-CLAMPED. Not the page
+//   behind it: what a browser blurs is the rectangle under the element and
+//   nothing outside it, with samples that fall off the edge taking the border
+//   pixel's value.
+//
+//   This one was got backwards first. A flat grey behind a pane comes out flat
+//   to the border — no rim — and that was read as proof that the backdrop is
+//   sampled past the edge. It is not proof of anything: a uniform field is
+//   uniform under either rule. The case that decides is a feature that
+//   straddles the border, and it is decisive: white page, black stripe
+//   starting exactly at the pane's left edge, and the row across reads
+//   255 255 255 | 0 0 0 with NO ramp at the border at all — while the same
+//   black/white boundary 100px further in, INSIDE the pane, gets the full
+//   smooth ramp. Outside content does not enter. Edge samples clamp.
+//
+//   So the copy is exactly the element's box, and CLAMP_TO_EDGE does the rest.
+//   Growing the copy by the kernel's reach — which is what this did first —
+//   bleeds the page into the pane's border and is visibly wrong over anything
+//   that is not flat.
+//
+// Three passes across and three down, separably, ping-ponging between two
+// framebuffers: nine texture reads per pixel per axis at worst, instead of the
+// d*d of the direct form.
+const BLUR_VERT = `#version 300 es
+in vec2 aCorner;
+out vec2 vUV;
+void main() {
+  vUV = aCorner;
+  gl_Position = vec4(aCorner * 2.0 - 1.0, 0.0, 1.0);
+}`;
+
+// One box pass along `uStep`, which is one texel across or one down. The box
+// is centred for an odd width; for an even one the spec offsets two of the
+// three passes by half a texel and widens the third, and `uOffset` carries
+// that — which is what keeps the result symmetric instead of creeping one way.
+const BLUR_FRAG = `#version 300 es
+precision highp float;
+in vec2 vUV;
+uniform sampler2D uSrc;
+uniform vec2 uStep;
+uniform float uWidth;
+uniform float uOffset;
+out vec4 outColor;
+void main() {
+  // Named mid and not h-a-l-f: that is a reserved word in GLSL ES 3.00 and the
+  // shader will not compile with it. And no backticks in this comment either —
+  // it lives inside a template literal, and one would end the shader here.
+  float mid = floor(uWidth * 0.5);
+  vec4 acc = vec4(0.0);
+  for (int i = 0; i < 129; i++) {
+    if (float(i) >= uWidth) break;
+    float k = float(i) - mid + uOffset;
+    // No clamp of our own: the target is exactly the copied region, so the
+    // sampler's own CLAMP_TO_EDGE is the measured rule — a sample that falls
+    // off the element takes the border pixel's value.
+    acc += texture(uSrc, vUV + uStep * k);
+  }
+  outColor = acc / uWidth;
+}`;
+
+// The blurred region, drawn back over the page and clipped to the element's
+// rounded box. Three things a vertex needs, and they are three different
+// spaces, which is why this does not reuse BLUR_VERT: where the quad goes
+// (clip space), which part of the padded texture it reads (a sub-rect, since
+// the texture holds the box PLUS the kernel's reach), and where the fragment
+// sits inside the box (0..1, for the rounding).
+const BACKDROP_VERT = `#version 300 es
+in vec2 aPos;
+in vec2 aUV;
+in vec2 aCorner;
+out vec2 vUV;
+out vec2 vCorner;
+void main() {
+  vUV = aUV;
+  vCorner = aCorner;
+  gl_Position = vec4(aPos, 0.0, 1.0);
+}`;
+
+// The rounding is the same distance field the solid shapes use, so a blurred
+// pane and a plain one have the same corner.
+const BACKDROP_FRAG = `#version 300 es
+precision highp float;
+in vec2 vUV;
+in vec2 vCorner;
+uniform sampler2D uSrc;
+uniform vec2 uHalf;
+uniform float uRadius;
+out vec4 outColor;
+float sdRoundedBox(vec2 p, vec2 b, float r) {
+  vec2 q = abs(p) - b + r;
+  return length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - r;
+}
+void main() {
+  vec2 local = (vCorner - 0.5) * uHalf * 2.0;
+  float r = min(uRadius, min(uHalf.x, uHalf.y));
+  float d = sdRoundedBox(local, uHalf, r);
+  float aa = clamp(fwidth(d), 0.35, 1.5);
+  float cov = smoothstep(aa, -aa, d);
+  if (cov <= 0.001) discard;
+  vec4 c = texture(uSrc, vUV);
+  // Opaque where the box covers, and nothing outside it. The blurred backdrop
+  // REPLACES what is under it rather than tinting it — the pixels it is made
+  // of are those same pixels, softened.
+  outColor = vec4(c.rgb, cov);
+}`;
+
+/**
+ * The box width the CSS filter spec asks for at a given sigma, and how the
+ * three passes are offset. Straight out of the SVG spec's pseudo-code, which
+ * the CSS filter spec adopts by reference — and matched against a browser at
+ * three radii before it was believed.
+ */
+export function boxesForSigma(sigma) {
+  let d = Math.floor((sigma * 3 * Math.sqrt(2 * Math.PI)) / 4 + 0.5);
+  if (d < 1) d = 1;
+  return d % 2 === 1
+    // Odd: three identical centred passes.
+    ? [{ w: d, off: 0 }, { w: d, off: 0 }, { w: d, off: 0 }]
+    // Even: two passes offset against each other by a texel, and a third one
+    // texel wider. Without this the result creeps half a pixel per pass.
+    : [{ w: d, off: 0 }, { w: d, off: 1 }, { w: d + 1, off: 0 }];
+}
+
+/** How far a three-box blur of this sigma reaches, in pixels. */
+export function blurReach(sigma) {
+  const b = boxesForSigma(sigma);
+  return b.reduce((acc, p) => acc + Math.floor(p.w / 2) + 1, 0);
+}
+
+// Two framebuffers and the textures behind them, kept per context and rebuilt
+// when the region's size changes. A dialog's scrim is the same size every
+// frame, so after the first one this allocates nothing.
+//
+// EXACTLY the region's size, and not "at least" it. Growing a shared target
+// and reusing it for a smaller region looks like the obvious saving and is a
+// trap: `copyTexImage2D` resizes the source texture to what was copied, while
+// the passes render across the whole target, so the first pass stretches the
+// image by target/region and the last one reads back only the region/target
+// fraction of it. The two cancel out along any axis where the picture happens
+// to be uniform — which is why a scene with a horizontal band through it saw
+// nothing wrong, twice.
+// ---------------------------------------------------------------------------
+// evg-surface-effect: ripple
+// ---------------------------------------------------------------------------
+//
+// A post-process over the finished surface: render the page to a texture, then
+// draw that texture across the screen with a fragment shader that bends the
+// sample position in a ring travelling out from where somebody touched it.
+//
+// The whole point is that the shader knows NOTHING about Ranger. It gets a
+// picture, a centre and an age. Everything on the page bends together — text,
+// card edges, the chart's own paths — because by the time this runs they are
+// all the same pixels, which is the most direct demonstration this gallery has
+// that a dashboard that looks like the DOM is not DOM pixels.
+//
+// This is an EVG EXTENSION and says so in its name: `evg-surface-effect` is
+// not a CSS property and nothing here should ever be measured against a
+// browser looking for a divergence, because there is nothing to diverge from.
+const RIPPLE_VERT = `#version 300 es
+in vec2 aPos;
+out vec2 vUV;
+void main() {
+  vUV = aPos * 0.5 + 0.5;
+  gl_Position = vec4(aPos, 0.0, 1.0);
+}`;
+
+// The water, once. RIPPLE_FRAG below puts it over the whole surface; the
+// ripple PLUGIN further down runs the same function inside one element's
+// box. Shared as text rather than copied, because two copies of a wave
+// equation drift apart and nobody notices until they are lit differently.
+//
+// NO BACKTICKS ANYWHERE IN THE GLSL, comments included: every check that
+// draws through this painter inlines the file into a page as a script, and
+// a backtick inside a template literal ends it — which reads, three files
+// away, as the painter having a syntax error.
+const RIPPLE_CORE = `// THE RIPPLE ITSELF, as a function of one point in PAGE PIXELS, y DOWN.
+//
+// It is a function and not the body of main because there are two entry points
+// into it now: this program, which puts it over the whole surface from
+// list.effect the way it always has, and the ripple PLUGIN below, which runs
+// the same math inside one element's box from list.effects. One copy of the
+// water, two ways of asking for it.
+//
+// vUV comes off the fullscreen triangle as a GL texture coordinate, whose
+// origin is the BOTTOM left; a drop's x and y are page coordinates, whose
+// origin is the top left. Reading one as the other put every ring at uRes.y
+// minus where it was touched — a click near the top of the dashboard rippled
+// near the bottom of it. Everything below this line is in page space, and the
+// two places that hand a vector back to GL flip it back.
+vec4 rippleAt(vec2 p) {
+
+  // SUM the drops. This is the whole of the interference: two rings that
+  // cross reinforce where their crests meet and cancel where a crest meets a
+  // trough, and nothing here implements that — it is what adding waves does.
+  //
+  // The displacement is summed as a VECTOR, not as a scalar amplitude, so two
+  // rings arriving from opposite sides push the surface in opposite
+  // directions and the pixel between them stays where it was.
+  vec2 push = vec2(0.0);
+  float crest = 0.0;
+  float energy = 0.0;
+  for (int i = 0; i < MAX_DROPS; i++) {
+    if (i >= uCount) break;
+    vec3 drop = uDrops[i];
+    vec2 delta = p - drop.xy;
+    float d = length(delta);
+    vec2 dir = delta / max(d, 0.001);
+
+    // The TRAIN. A drop on water does not make one ring, it makes several
+    // from the same point a moment apart, each fainter than the one in front:
+    // an expanding target rather than a circle. They cost no state — the
+    // rings of one touch differ only in when they started, so the k-th is
+    // simply this touch aged by k staggers, and one that has not started yet
+    // has a negative age and is skipped.
+    float amp = 1.0;
+    for (int k = 0; k < MAX_RINGS; k++) {
+      if (k >= uRings) break;
+      float t = drop.z - float(k) * uStagger;
+      if (t <= 0.0) break;
+      float radius = t * uSpeed;
+      // A Gaussian ring: the wave only exists near the front, so the rest of
+      // the page is sampled exactly where it was drawn and stays sharp.
+      float env = exp(-pow((d - radius) / uWidth, 2.0));
+      float fade = env * exp(-t * uDecay) * amp;
+      float wave = sin((d - radius) * 0.16) * fade;
+      push += dir * wave;
+      crest += wave;
+      // The ENVELOPE, kept apart from the signal. It is the ring's amplitude
+      // with the oscillation divided out, so unlike the wave itself it does
+      // not pass through zero twice per wavelength.
+      energy += fade;
+      amp *= uFalloff;
+    }
+  }
+
+  float wave = crest;
+  // Back into UV space to sample with: page y runs down and the texture's runs
+  // up, so the displacement's y is negated on its way out.
+  vec2 offset = vec2(push.x, -push.y) * uStrength / uRes;
+
+  // A whisper of chromatic aberration along the crest. The numbers are 1.08
+  // and 0.92 rather than anything bolder for a reason: past about a tenth the
+  // dashboard stops looking like water and starts looking like a filter.
+  float r = texture(uSrc, vUV + offset * 1.08).r;
+  float g = texture(uSrc, vUV + offset).g;
+  float b = texture(uSrc, vUV + offset * 0.92).b;
+  float a = texture(uSrc, vUV + offset).a;
+
+  // ---- THE SURFACE'S OWN NORMAL, AND A LIGHT ON IT ----------------------
+  //
+  // The wave sum is a HEIGHT FIELD: the rings added up. Its gradient is the
+  // slope, and the slope is the normal — so nothing has to be computed or
+  // stored to light this surface that the displacement did not already need.
+  //
+  // The gradient is taken in SCREEN SPACE with dFdx/dFdy rather than by
+  // differentiating the sum by hand. Two reasons: the analytic derivative of
+  // a Gaussian times a sine, summed over every ring of every drop, is a
+  // second expression that has to be kept in step with the first one forever
+  // — and this one is exact for whatever the first one happens to be. The
+  // loops above branch only on uniforms, so every fragment in a quad takes
+  // the same path and the derivative is well defined.
+  //
+  // dFdy differentiates against WINDOW y, which runs up, while the height
+  // field and the light are both in page space, which runs down — so the y
+  // component is negated. Get this wrong and the light silently moves to the
+  // other side of the page: the glint still looks like a glint, on the wrong
+  // edge of every wave.
+  vec2 grad = vec2(dFdx(wave), -dFdy(wave)) * uBump;
+  vec3 N = normalize(vec3(-grad, 1.0));
+
+  // Blinn-Phong. The eye looks straight down at a flat page, so V is +Z and
+  // the half vector is the light plus that.
+  vec3 L = normalize(uLight);
+  vec3 V = vec3(0.0, 0.0, 1.0);
+  vec3 H = normalize(L + V);
+  float spec = pow(max(dot(N, H), 0.0), uGloss) * uShine;
+
+  // The specular lives on the FLANK of a wave and not on its top — that is
+  // the whole difference from the ambient term beside it, and it is why the
+  // glint slides along the ring as the ring travels rather than sitting on
+  // it.
+  //
+  // It is faded out where there is no ring, so a page whose ripples have died
+  // carries no shine. That fade is taken from the ENVELOPE and not from the
+  // wave: the wave crosses zero twice per wavelength, and fading by it would
+  // cut a dark seam straight through the middle of every glint.
+  float alive = clamp(energy * 3.0, 0.0, 1.0);
+
+  vec3 col = vec3(r, g, b) + wave * uHi + spec * alive;
+  return vec4(col, a);
+}
+`;
+
+const RIPPLE_FRAG = `#version 300 es
+precision highp float;
+uniform sampler2D uSrc;
+uniform vec2 uRes;        // page pixels
+// Up to this many touches at once. Eight is not a limit anybody reaches by
+// tapping; it is what a FINGER DRAGGED across the surface fills in a third of
+// a second, and the oldest is retired to make room.
+#define MAX_DROPS 8
+uniform vec3 uDrops[MAX_DROPS];  // x, y in page pixels; z is seconds since
+uniform int uCount;
+uniform float uSpeed;     // px per second the ring travels
+uniform float uWidth;     // the envelope's sigma, px
+uniform float uStrength;  // displacement at the crest, px
+uniform float uDecay;     // per second
+uniform float uHi;        // how much the crest lightens
+// One touch sends a TRAIN of rings from the same point, a stagger apart.
+#define MAX_RINGS 5
+uniform int uRings;
+uniform float uStagger;   // seconds between one wavefront and the next
+uniform float uFalloff;   // what each ring behind the front is worth
+uniform float uShine;     // how strong the glint is
+uniform float uGloss;     // Blinn-Phong exponent: how tight it is
+uniform float uBump;      // what turns the height field into a slope
+uniform vec3 uLight;      // where the light is, not necessarily normalised
+in vec2 vUV;
+out vec4 outColor;
+
+` + RIPPLE_CORE + `
+void main() {
+  outColor = rippleAt(vec2(vUV.x, 1.0 - vUV.y) * uRes);
+}`;
+
+// One target, kept and resized only when the canvas is. Same shape as the blur
+// targets above and for the same reason: a frame that allocates a texture is a
+// frame that stutters.
+const RIPPLE_TARGET = new WeakMap();
+
+function rippleTargetFor(gl, w, h, slot = 0) {
+  // TWO of them now, and the second is only ever made by a page that stacks
+  // effects: a filter reads the finished surface and writes another, so two
+  // filters have to ping-pong between a pair of targets. One filter — which is
+  // every page that has ever run this — makes one target and draws it to the
+  // screen, exactly as before.
+  let slots = RIPPLE_TARGET.get(gl);
+  if (!slots) { slots = []; RIPPLE_TARGET.set(gl, slots); }
+  let t = slots[slot];
+  if (!t) { t = { w: 0, h: 0, tex: null, fbo: null, depth: null, complete: false }; slots[slot] = t; }
+  if (t.w === w && t.h === h && t.tex) return t;
+  if (t.tex) gl.deleteTexture(t.tex);
+  if (t.fbo) gl.deleteFramebuffer(t.fbo);
+  t.tex = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, t.tex);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  // A displaced sample near the edge must repeat the edge, not read black —
+  // otherwise the ring draws a dark rim as it reaches the sides of the page.
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+  t.fbo = gl.createFramebuffer();
+  gl.bindFramebuffer(gl.FRAMEBUFFER, t.fbo);
+  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, t.tex, 0);
+  // A STENCIL BUFFER, and it is not optional. Path fills are stencil-then-
+  // cover, so a target without one cannot fill a path — and the chart on the
+  // page that wanted this effect is nothing but path fills. Leaving it off did
+  // not draw a chart with no bars in it, which is what the missing-stencil
+  // branch is written to do: it made every frame take half a SECOND, because
+  // the driver fell off its fast path and back into software for a stencil
+  // buffer that was not there. 7ms a frame became 540.
+  if (t.depth) gl.deleteRenderbuffer(t.depth);
+  t.depth = gl.createRenderbuffer();
+  gl.bindRenderbuffer(gl.RENDERBUFFER, t.depth);
+  gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH24_STENCIL8, w, h);
+  gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, t.depth);
+  t.complete = gl.checkFramebufferStatus(gl.FRAMEBUFFER) === gl.FRAMEBUFFER_COMPLETE;
+  gl.bindRenderbuffer(gl.RENDERBUFFER, null);
+  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+  t.w = w; t.h = h;
+  return t;
+}
+
+const BLUR_TARGETS = new WeakMap();
+
+function blurTargetsFor(gl, w, h) {
+  let t = BLUR_TARGETS.get(gl);
+  if (!t) {
+    t = { w: 0, h: 0, tex: [null, null], fbo: [null, null], src: null };
+    BLUR_TARGETS.set(gl, t);
+  }
+  if (t.w === w && t.h === h && t.src) return t;
+  const nw = w, nh = h;
+  if (t.src) gl.deleteTexture(t.src);
+  const mk = () => {
+    const tex = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, tex);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, nw, nh, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    // CLAMP_TO_EDGE is not a detail: it is what makes a sample past the copied
+    // region repeat its edge instead of reading black, which is the same thing
+    // the browser does at the screen's own edge.
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    return tex;
+  };
+  for (let i = 0; i < 2; i++) {
+    if (t.tex[i]) gl.deleteTexture(t.tex[i]);
+    if (t.fbo[i]) gl.deleteFramebuffer(t.fbo[i]);
+    t.tex[i] = mk();
+    t.fbo[i] = gl.createFramebuffer();
+    gl.bindFramebuffer(gl.FRAMEBUFFER, t.fbo[i]);
+    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, t.tex[i], 0);
+  }
+  t.src = mk();
+  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+  t.w = nw; t.h = nh;
+  return t;
+}
+
+// ---------------------------------------------------------------------------
+// SURFACE EFFECT PLUGINS
+// ---------------------------------------------------------------------------
+//
+// `evg-surface-effect: ripple` was one effect, over the whole page, with its
+// parameters declared as fields on EVGElement and its drops pushed in by the
+// application's own `pointerdown`. Everything about it was hard-wired except
+// the numbers.
+//
+// This is the general form. An effect is a NAME the display list carries, a
+// BOX the layout worked out, a bag of PARAMETERS nothing in the engine reads,
+// and a list of EVENTS the host's driver collected — and what turns that into
+// pixels is a plugin registered here:
+//
+//   registerSurfaceEffect({
+//     name: "aurora",
+//     layer: "source",                    // or "filter"
+//     params: { speed: 1, hue: 200 },     // names and defaults
+//     frag: "vec4 fxColor(vec2 p, vec2 local) { … }",
+//   })
+//
+// TWO KINDS, and the difference is not decoration:
+//
+//   a SOURCE writes pixels into the element's box, in paint order, at the
+//   point the element's own background is drawn — so the element's children
+//   are painted over it, which is what makes a starfield a background and not
+//   a sticker over the text.
+//
+//   a FILTER reads the finished surface and writes it back changed. The whole
+//   frame goes into a texture first, and the box says which part of it the
+//   plugin may touch — outside, the surface passes through untouched. The
+//   ripple is one of these, which is why it can bend text it knows nothing
+//   about: by the time it runs, the text is pixels.
+//
+//   a BACKDROP is a filter that runs IN PAINT ORDER, over what is behind the
+//   element and nothing that comes after it: the surface so far is copied at
+//   the point the element paints, the plugin writes it back inside the box,
+//   and then the element's own background, its border and its children are
+//   drawn on top — crisp. That is what `backdrop-filter: blur()` does for one
+//   hard-wired filter, and what the liquid glass needs: a pane that refracts
+//   the page behind it and does NOT smear its own label.
+//
+// WHAT A PLUGIN WRITES is one function:
+//
+//   vec4 fxColor(vec2 p, vec2 local)
+//
+// `p` is the point in PAGE pixels with y down — the same space the display
+// list, the box and the events are in, so nothing has to be converted by
+// hand. `local` is the same point as 0..1 across the box. A source returns
+// the colour to composite over what is there; a filter returns the finished
+// colour, and has `uSrc` to sample with `vUV`.
+//
+// AN INSTANCE THE HOST HAS SWITCHED OFF (`inst.off`) is skipped by all three,
+// at no cost: the run is passed over, the filter is not live, and nothing is
+// compiled or copied for it. That is the hook a page's own switch hangs on,
+// and the one `prefers-reduced-motion` would.
+//
+// AND WHAT IT GETS, without asking: `uBox` (x, y, w, h in page px), `uRadius`,
+// `uRes`, `uTime` in seconds, `uEvents[]` as (x, y, age-in-seconds) triples in
+// page pixels with `uEventCount` of them, and one `p_<name>` float per
+// declared parameter. The box and its rounded corners are applied for it — a
+// plugin that paints past its own box cannot, because the mask is in `main`
+// rather than in the plugin.
+//
+// WHY A SHADER AND NOT A CALLBACK. A plugin that ran JavaScript per frame
+// would be a plugin that could stall the frame. A plugin that is GLSL plus a
+// parameter list can only be slow the way every other shader is, and it is a
+// STRING — so an app can register one at runtime, and a WebGPU painter could
+// compile the same declaration into WGSL instead. Nothing in the display list
+// mentions either: it says `starfield` and a number called `density`, and
+// which API draws that is the painter's business.
+const FX_PLUGINS = new Map();
+// Bumped by every registration, so a program compiled from an older definition
+// is recompiled rather than quietly kept.
+let FX_EPOCH = 0;
+
+/** A name a GLSL identifier can be made of — `evg-fx-star-size` is a legal
+ *  parameter and `p_star-size` is not a legal uniform. */
+const glslName = (k) => String(k).replace(/[^A-Za-z0-9_]/g, "_");
+
+export function registerSurfaceEffect(def) {
+  if (!def || !def.name) throw new Error("registerSurfaceEffect: no name");
+  if (!def.frag) throw new Error("registerSurfaceEffect: no frag");
+  const layer = (def.layer === "filter" || def.layer === "backdrop") ? def.layer : "source";
+  FX_PLUGINS.set(def.name, { name: def.name, layer, params: def.params || {}, frag: def.frag });
+  FX_EPOCH += 1;
+  return def.name;
+}
+
+/** The plugin registered under a name, or undefined. */
+export function surfaceEffect(name) { return FX_PLUGINS.get(name); }
+
+/** Every effect this painter can draw, for a host that wants to say so. */
+export function surfaceEffectNames() { return [...FX_PLUGINS.keys()]; }
+
+// The finished target, straight onto the screen. A frame that went offscreen
+// only because something in it had to read the surface has no filter to end
+// with, so it needs one pass that changes nothing.
+const FX_PRESENT_FRAG = `#version 300 es
+precision highp float;
+uniform sampler2D uSrc;
+in vec2 vUV;
+out vec4 outColor;
+void main() { outColor = texture(uSrc, vUV); }`;
+
+const FX_VERT = `#version 300 es
+in vec2 aPos;
+out vec2 vUV;
+void main() {
+  vUV = aPos * 0.5 + 0.5;
+  gl_Position = vec4(aPos, 0.0, 1.0);
+}`;
+
+// Everything a plugin gets whether it asks or not. MAX_EVENTS is 8 for the
+// same reason the ripple's MAX_DROPS is: eight is not a number anybody reaches
+// by tapping, and it is what a dragged finger fills in a third of a second.
+const FX_PREAMBLE = `precision highp float;
+uniform sampler2D uSrc;
+uniform vec2 uRes;
+uniform vec4 uBox;
+uniform float uRadius;
+uniform float uTime;
+#define MAX_EVENTS 8
+uniform vec3 uEvents[MAX_EVENTS];
+uniform int uEventCount;
+in vec2 vUV;
+out vec4 outColor;
+
+// The point in PAGE pixels, y down — the space everything the plugin is given
+// is already in.
+vec2 fxPagePoint() { return vec2(vUV.x, 1.0 - vUV.y) * uRes; }
+
+// THE BOX ITSELF, as a signed distance in page pixels: negative inside,
+// zero on the border, positive outside, and rounded corners for free.
+//
+// Exposed rather than kept for the mask below, because a plugin that wants to
+// look like a MATERIAL needs to know where the edge is and which way it faces.
+// The liquid glass is the whole reason: its refraction lives in a band inside
+// the rim and its normal is this function's gradient, so a pane is a lens
+// whatever shape the layout gave it and whatever radius the sheet asked for.
+float fxBoxDistance(vec2 p) {
+  vec2 halfBox = uBox.zw * 0.5;
+  vec2 centre = uBox.xy + halfBox;
+  float r = min(uRadius, min(halfBox.x, halfBox.y));
+  vec2 d = abs(p - centre) - (halfBox - vec2(r));
+  return length(max(d, vec2(0.0))) + min(max(d.x, d.y), 0.0) - r;
+}
+
+// How much of this pixel is inside the box, corners included — the distance
+// above, softened over a pixel so a corner is not a staircase. Applied in
+// main, so no plugin can paint outside the element that declared it, which is
+// the whole difference between an effect on a card and an effect on a page.
+float fxBoxCoverage(vec2 p) {
+  return 1.0 - smoothstep(-0.75, 0.75, fxBoxDistance(p));
+}
+`;
+
+// A source composites over what is already there, with the painter's own
+// blend — so the colour it returns is NOT premultiplied, and the coverage goes
+// on the alpha.
+const FX_MAIN_SOURCE = `
+void main() {
+  vec2 p = fxPagePoint();
+  vec2 local = (p - uBox.xy) / max(uBox.zw, vec2(1.0));
+  vec4 c = fxColor(p, local);
+  outColor = vec4(c.rgb, c.a * fxBoxCoverage(p));
+}`;
+
+// A filter and a backdrop REPLACE the surface, so blending is off and the
+// pixels outside the box have to be handed back exactly as they arrived. A mix
+// and not a branch: a branch here would make the screen-space derivative a
+// plugin like the ripple takes undefined along the box's own edge.
+const FX_MAIN_FILTER = `
+void main() {
+  vec2 p = fxPagePoint();
+  vec2 local = (p - uBox.xy) / max(uBox.zw, vec2(1.0));
+  vec4 here = texture(uSrc, vUV);
+  vec4 c = fxColor(p, local);
+  outColor = mix(here, c, fxBoxCoverage(p));
+}`;
+
+function fxFragSource(def) {
+  const decls = Object.keys(def.params).map((k) => `uniform float p_${glslName(k)};`).join("\n");
+  return "#version 300 es\n" + FX_PREAMBLE + decls + "\n" + def.frag +
+    (def.layer === "source" ? FX_MAIN_SOURCE : FX_MAIN_FILTER);
+}
+
+// THE SURFACE SO FAR, for a backdrop effect to read.
+//
+// One texture the size of the canvas, kept and reused: a backdrop pass copies
+// the framebuffer into it at the point the element paints and then samples it
+// across the whole screen, so what the plugin sees is exactly what a person
+// would see if the element were not there.
+//
+// `copyTexSubImage2D` and not `copyTexImage2D`, which is the trap the blur
+// section above documents: the latter RESIZES the texture to what was copied,
+// and a pass that then samples it as a full screen stretches the picture.
+// This one is allocated at the canvas's size once and written into.
+//
+// WHAT IS NEVER COPIED FROM IS THE CANVAS ITSELF. A WebGL2 context asked for
+// `antialias: true` — which is the default, and what every page in this
+// repository asks for — has a MULTISAMPLED default framebuffer, and copying
+// out of one is INVALID_OPERATION: the copy silently leaves the texture black,
+// the pass writes that black back over everything painted before it, and the
+// page loses its top half. Measured, on the demo page, after the checks
+// passed: they render with `preserveDrawingBuffer` set, which on this driver
+// hands out a single-sampled buffer and hides the whole thing.
+//
+// So a frame with a backdrop effect in it is rendered into the offscreen
+// target instead — the same one the filters use — and the copy comes from
+// there, where it is an ordinary single-sampled texture. `fxNeedsTarget` below
+// is that decision, and `drawPresent` is what puts the finished target back on
+// the screen when no filter pass is going to.
+const FX_COPY = new WeakMap();
+
+function fxCopyOfSurface(gl, w, h) {
+  let t = FX_COPY.get(gl);
+  if (!t) { t = { w: 0, h: 0, tex: null }; FX_COPY.set(gl, t); }
+  gl.activeTexture(gl.TEXTURE0);
+  if (t.w !== w || t.h !== h || !t.tex) {
+    if (t.tex) gl.deleteTexture(t.tex);
+    t.tex = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, t.tex);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    // A refraction near the edge of the page samples past it; repeat the edge
+    // rather than read black, or a pane at the margin gets a dark rim.
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    t.w = w; t.h = h;
+  } else {
+    gl.bindTexture(gl.TEXTURE_2D, t.tex);
+  }
+  gl.copyTexSubImage2D(gl.TEXTURE_2D, 0, 0, 0, 0, 0, w, h);
+  return t.tex;
+}
+
+// One program per plugin per context, compiled the first time that plugin is
+// actually drawn — a page that declares none compiles none.
+const FX_PROGRAMS = new WeakMap();
+
+function fxProgramFor(gl, name) {
+  let byName = FX_PROGRAMS.get(gl);
+  if (!byName) { byName = new Map(); FX_PROGRAMS.set(gl, byName); }
+  const found = byName.get(name);
+  if (found !== undefined && (found === null || found.epoch === FX_EPOCH)) return found;
+  const def = FX_PLUGINS.get(name);
+  if (!def) { byName.set(name, null); return null; }
+  let built = null;
+  try {
+    const prog = gl.createProgram();
+    gl.attachShader(prog, compile(gl, gl.VERTEX_SHADER, FX_VERT));
+    gl.attachShader(prog, compile(gl, gl.FRAGMENT_SHADER, fxFragSource(def)));
+    gl.linkProgram(prog);
+    if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
+      throw new Error("link " + name + ": " + gl.getProgramInfoLog(prog));
+    }
+    const params = {};
+    for (const k of Object.keys(def.params)) params[k] = gl.getUniformLocation(prog, "p_" + glslName(k));
+    built = {
+      epoch: FX_EPOCH, def, prog,
+      posLoc: gl.getAttribLocation(prog, "aPos"),
+      uSrc: gl.getUniformLocation(prog, "uSrc"),
+      uRes: gl.getUniformLocation(prog, "uRes"),
+      uBox: gl.getUniformLocation(prog, "uBox"),
+      uRadius: gl.getUniformLocation(prog, "uRadius"),
+      uTime: gl.getUniformLocation(prog, "uTime"),
+      uEvents: gl.getUniformLocation(prog, "uEvents"),
+      uEventCount: gl.getUniformLocation(prog, "uEventCount"),
+      params,
+    };
+  } catch (e) {
+    // A plugin that does not compile must not take the page down with it: the
+    // frame draws without the effect and says so once, which is the same
+    // choice the missing-stencil and incomplete-target branches make.
+    console.warn("evg: surface effect '" + name + "' did not compile — " + (e && e.message ? e.message : e));
+    built = null;
+  }
+  byName.set(name, built);
+  return built;
+}
+
+// ---------------------------------------------------------------------------
+// The built-in plugins
+// ---------------------------------------------------------------------------
+
+// THE RIPPLE, inside one element's box.
+//
+// Not a second implementation: RIPPLE_CORE is the same text the whole-page
+// program above is built from, and the #defines below are the whole of the
+// adaptation — the plugin's generic parameters given the names that function
+// has always used for them. `evg-ripple-speed` still writes `speed`, because
+// the display list puts the ripple's own properties into the parameter bag.
+registerSurfaceEffect({
+  name: "ripple",
+  layer: "filter",
+  params: {
+    speed: 220, width: 28, strength: 7, decay: 1.8, highlight: 0.08,
+    rings: 3, stagger: 0.09, falloff: 0.62,
+    shine: 0.45, gloss: 120, bump: 70,
+    lightX: -0.45, lightY: -0.65, lightZ: 0.62,
+  },
+  frag: `
+#define MAX_DROPS MAX_EVENTS
+#define MAX_RINGS 5
+#define uDrops uEvents
+#define uCount uEventCount
+#define uSpeed p_speed
+#define uWidth p_width
+#define uStrength p_strength
+#define uDecay p_decay
+#define uHi p_highlight
+#define uRings int(p_rings)
+#define uStagger p_stagger
+#define uFalloff p_falloff
+#define uShine p_shine
+#define uGloss p_gloss
+#define uBump p_bump
+#define uLight vec3(p_lightX, p_lightY, p_lightZ)
+` + RIPPLE_CORE + `
+vec4 fxColor(vec2 p, vec2 local) { return rippleAt(p); }
+`,
+});
+
+// THE STARFIELD: stars that shine and drift, and the dust they are in.
+//
+// A SOURCE, not a filter. It makes pixels rather than bending them, it is
+// drawn where the element's background is drawn, and everything the element
+// contains is painted over it — so `evg-surface-effect: starfield` on a
+// section gives that section a sky, with its own headline still on top of it
+// and its own rounded corners still cutting it.
+//
+// Nothing here is stored. Every star is a hash of the cell it lives in, so a
+// field of thousands costs no memory, no upload and nothing in the display
+// list: the picture is a function of (where, when), and the only state on the
+// page is the clock. That is also why it can drift forever without
+// accumulating anything to drift out of.
+//
+// THE PARAMETERS, all through `evg-fx-*`:
+//   density   how many stars — smaller cells, more of them
+//   speed     how fast the field drifts, px/s at the nearest layer
+//   angle     which way it drifts, degrees clockwise from east
+//   twinkle   0 turns the shimmer off, 1 is lively
+//   glow      the halo around the brighter stars
+//   nebula    how much dust, 0 for a clean sky
+//   hue/hue2  the two dust colours, degrees round the wheel
+//   seed      a different sky from the same numbers
+registerSurfaceEffect({
+  name: "starfield",
+  layer: "source",
+  params: {
+    density: 1, speed: 6, angle: 200, twinkle: 1, glow: 1,
+    nebula: 0.6, hue: 225, hue2: 300, seed: 1,
+  },
+  frag: `
+float fxHash21(vec2 p) {
+  p = fract(p * vec2(127.31, 311.7));
+  p += dot(p, p + 34.53);
+  return fract(p.x * p.y);
+}
+vec2 fxHash22(vec2 p) {
+  return vec2(fxHash21(p), fxHash21(p + 19.19));
+}
+// Value noise, smoothed so the dust carries no grid.
+float fxNoise(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  f = f * f * (3.0 - 2.0 * f);
+  float a = fxHash21(i);
+  float b = fxHash21(i + vec2(1.0, 0.0));
+  float c = fxHash21(i + vec2(0.0, 1.0));
+  float d = fxHash21(i + vec2(1.0, 1.0));
+  return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
+}
+float fxFbm(vec2 p) {
+  float sum = 0.0;
+  float amp = 0.5;
+  for (int i = 0; i < 5; i++) {
+    sum += amp * fxNoise(p);
+    p = p * 2.03 + vec2(17.3, 9.1);
+    amp *= 0.5;
+  }
+  return sum;
+}
+// A hue as a colour, saturation and value at 1. The dust is tinted by the
+// sheet and shaded by the noise, so this only has to answer which way round
+// the wheel.
+vec3 fxHueColor(float deg) {
+  float h = fract(deg / 360.0) * 6.0;
+  return clamp(abs(mod(h + vec3(0.0, 4.0, 2.0), 6.0) - 3.0) - 1.0, 0.0, 1.0);
+}
+
+// One layer of stars. The field is a grid of cells with at most one star in
+// each, so a star is found by looking at the nine cells around the point
+// rather than by looping over a list — which is what makes the count free.
+//
+// Brightness is a hash raised to a power: most cells hold something faint, and
+// one in a few hundred holds the kind of star a person would point at.
+vec3 fxStarLayer(vec2 q, float cell, float seed, float twinkle, float glow) {
+  vec2 g = q / cell;
+  vec2 id = floor(g);
+  vec2 f = fract(g);
+  vec3 acc = vec3(0.0);
+  for (int dy = -1; dy <= 1; dy++) {
+    for (int dx = -1; dx <= 1; dx++) {
+      vec2 o = vec2(float(dx), float(dy));
+      vec2 cid = id + o + seed;
+      float h = fxHash21(cid);
+      // Two cells in three are empty sky.
+      if (h < 0.62) continue;
+      vec2 at = o + fxHash22(cid + 3.7);
+      float d = length(f - at) * cell;
+      float bright = pow(fxHash21(cid + 7.1), 3.5);
+      // The shimmer is the atmosphere, so it is per star and out of phase.
+      float ph = fxHash21(cid + 11.3) * 6.2831;
+      bright *= 1.0 - twinkle * 0.45 * (0.5 + 0.5 * sin(uTime * (1.4 + 2.6 * fxHash21(cid + 2.2)) + ph));
+      // The star, the halo around it, and the spikes on the handful bright
+      // enough to earn them.
+      //
+      // A BRIGHT STAR IS ALSO A BIGGER ONE. Every star the same size is the
+      // difference between a sky and a scatter plot: the eye reads size as
+      // distance, and a field of identical dots reads as a texture. So the
+      // core's radius and the halo's reach both grow with the brightness that
+      // is already there, and the top few per cent become the ones a person
+      // would point at.
+      float rad = 0.85 + 2.2 * bright;
+      float core = exp(-(d * d) / (rad * rad));
+      // THE HALO HAS TO DIE INSIDE ONE CELL. Only the nine cells around this
+      // point are looked at, so a glow that still has something left at the
+      // edge of that neighbourhood is a glow that is CUT there — and the cut
+      // is straight, and it is at the same place in every cell, so a dense
+      // field comes out with a faint square grid across it. It is the sort of
+      // thing that looks like a texture artefact and is really a loop bound.
+      //
+      // Tied to the cell rather than to the star: at a given density the
+      // reach is whatever fits, and turning the glow up makes the bright ones
+      // brighter rather than wider once it no longer can.
+      float reach = min(3.0 * rad, cell * 0.42);
+      float halo = glow * 0.30 * exp(-d / max(reach, 0.5));
+      float spike = 0.0;
+      if (bright > 0.55) {
+        vec2 v = (f - at) * cell;
+        float sp = exp(-abs(v.x) / (2.2 * rad)) * exp(-(v.y * v.y) / (0.9 * rad))
+                 + exp(-abs(v.y) / (2.2 * rad)) * exp(-(v.x * v.x) / (0.9 * rad));
+        spike = sp * glow * 0.22 * (bright - 0.55) / 0.45;
+      }
+      // Cooler and warmer stars, mostly white.
+      vec3 tint = mix(vec3(0.72, 0.82, 1.0), vec3(1.0, 0.93, 0.82), fxHash21(cid + 5.5));
+      // AND FADED TO NOTHING BEFORE THE NEIGHBOURHOOD ENDS. Clamping the
+      // halo's reach is not enough on its own: an exponential still has a few
+      // per cent left where it is cut, the cut is at the same distance in
+      // every cell, and a dense field comes out with a faint square grid
+      // across it. This window is exactly zero by one cell, which is the
+      // nearest a star that was NOT looked at can be, so every star's
+      // contribution ends inside the nine cells that were.
+      float win = 1.0 - smoothstep(cell * 0.6, cell * 1.0, d);
+      acc += tint * bright * (core + halo + spike) * win;
+    }
+  }
+  return acc;
+}
+
+vec4 fxColor(vec2 p, vec2 local) {
+  vec2 q = p - uBox.xy;
+  float ang = radians(p_angle);
+  vec2 dir = vec2(cos(ang), sin(ang));
+  float seed = p_seed * 37.0;
+  float cell = max(6.0, 34.0 / max(p_density, 0.05));
+
+  // THE DUST. Two fields at different scales and hues, the far one drifting
+  // slower — the same parallax the stars have, for the same reason.
+  vec3 dust = vec3(0.0);
+  float dustA = 0.0;
+  if (p_nebula > 0.001) {
+    vec2 n1 = (q + dir * uTime * p_speed * 0.12) * 0.0042 + seed;
+    vec2 n2 = (q + dir * uTime * p_speed * 0.07) * 0.0026 + seed + 13.7;
+    float f1 = pow(fxFbm(n1), 2.2);
+    float f2 = pow(fxFbm(n2), 3.0);
+    dust = fxHueColor(p_hue) * f1 * 1.15 + fxHueColor(p_hue2) * f2 * 1.35;
+    dustA = clamp((f1 * 0.9 + f2 * 1.1) * p_nebula, 0.0, 0.85);
+    dust *= p_nebula;
+  }
+
+  // THREE LAYERS, near to far: smaller cells drift faster, which is the only
+  // thing that makes a flat field read as depth.
+  vec3 stars = vec3(0.0);
+  stars += fxStarLayer(q + dir * uTime * p_speed, cell, seed, p_twinkle, p_glow);
+  stars += fxStarLayer(q + dir * uTime * p_speed * 0.55, cell * 2.1, seed + 51.0, p_twinkle, p_glow) * 0.85;
+  stars += fxStarLayer(q + dir * uTime * p_speed * 0.28, cell * 3.7, seed + 97.0, p_twinkle * 0.6, p_glow * 1.4) * 0.7;
+
+  // A PRESS LANDS AS A FLASH, when the sheet asked for one. The events are the
+  // same ones the ripple reads — a driver that feeds one feeds the other, and
+  // an effect with no use for them simply never mentions uEvents.
+  for (int i = 0; i < MAX_EVENTS; i++) {
+    if (i >= uEventCount) break;
+    vec3 e = uEvents[i];
+    float d = length(p - e.xy);
+    float t = max(e.z, 0.0);
+    float ring = exp(-pow((d - t * 260.0) / 46.0, 2.0)) * exp(-t * 2.2);
+    stars += vec3(0.75, 0.85, 1.0) * ring * 0.9;
+  }
+
+  float starA = clamp(max(max(stars.r, stars.g), stars.b), 0.0, 1.0);
+  float outA = clamp(dustA + starA, 0.0, 1.0);
+  // Accumulated as light and handed back as colour: the painter blends with
+  // SRC_ALPHA, so the sum is divided by the alpha it is about to be multiplied
+  // by, which makes the composite additive without a second blend mode.
+  vec3 lit = dust * dustA + stars;
+  return vec4(lit / max(outA, 0.0001), outA);
+}
+`,
+});
+// LIQUID GLASS: a pane that bends the page behind it.
+//
+// A BACKDROP, so it reads the surface at the point its element paints and the
+// element's own tint, border and label are drawn over it afterwards — sharp.
+// A pane that smears its own caption is a pane that ran too late.
+//
+// WHAT MAKES GLASS LOOK LIKE GLASS is not the blur. Frosted glass has been one
+// CSS declaration for years — `backdrop-filter: blur(20px)`, which EVG already
+// does — and it reads as a fogged sheet, not as a solid object with a shape.
+// What is missing from it is REFRACTION: a real pane is thicker in the middle
+// than at its edge, so the edge is a curved surface, and light through a curve
+// bends. The page behind gets dragged toward the rim, compressed into a bright
+// band a few pixels wide, and split slightly into colour on the way. That band
+// is the whole illusion, and everything below is it:
+//
+//   thickness   how far in from the edge the curve reaches, px. This is the
+//               pane's edge profile, not its blur.
+//   strength    how far the rim pulls what is behind it, px
+//   power       the profile of the bevel: 1 is a chamfer, 3 is a bulge that
+//               only bends within a hair of the edge
+//   disperse    how far red and blue come apart in the band — a few hundredths
+//   shine       the specular arc where the rim faces the light
+//   angle       where the light is, degrees clockwise from east
+//   tint        a flat lift across the pane, for glass that is not water-clear
+//
+// AND THE SWEEP, which is what makes a pane look POLISHED rather than merely
+// transparent: a bar of light crossing it, flaring where it reaches the rim.
+// It is a light passing over a surface, so it is off by default — a pane in a
+// room with nothing moving has no streak on it — and a sheet turns it on:
+//
+//   sweep        how bright the bar is; 0 is no bar at all
+//   sweep-angle  which way it lies, degrees
+//   sweep-width  how wide it is, as a fraction of the crossing
+//   sweep-speed  passes per second; 0 holds it still at `sweep-at`
+//   sweep-at     where it sits when it is not moving, 0..1
+//   sweep-edge   how much brighter the rim is where the bar meets it
+//   sweep-rim    how much of the bar is kept to the rim: 0 crosses the pane
+//                evenly, 1 shows only where the bevel is
+//   sweep-duty   what fraction of each cycle the pass takes; the rest of the
+//                cycle the bar is off the pane entirely
+//
+// THOSE LAST TWO ARE WHAT MAKE IT A SHINE RATHER THAN A STRIPE. A bar of even
+// brightness parked across the middle of a pane is a line somebody drew on it:
+// real glass catches a moving light at its EDGES, where the surface is turned,
+// and the middle only flashes as the light goes by. So the bar is weighted
+// toward the rim, and it crosses in a fraction of its cycle and is gone for
+// the rest — a glint every few seconds, not a permanent diagonal.
+//
+// The dashes are the point: `evg-fx-sweep-speed` is a name this painter made
+// up, it reaches the shader as `p_sweep_speed`, and nothing between the
+// stylesheet and here had to learn either spelling.
+//
+// A MOVING sweep needs frames. `evg-effect-on: always` on the same element is
+// what tells the host's driver to keep asking for them — the same word a
+// starfield uses, for the same reason.
+//
+// THE SHAPE IS THE ELEMENT'S. The refraction follows `fxBoxDistance`, which is
+// the rounded box the layout and the sheet agreed on — so a pane is a lens at
+// whatever size the flex row gave it, with whatever `border-radius` it has,
+// and nothing here knows either number in advance.
+//
+// It composes with the rest of CSS rather than replacing it:
+//
+//   .glass {
+//     backdrop-filter: blur(14px);             /* the frosting, already EVG's */
+//     background-color: rgba(255,255,255,.08); /* the tint, an ordinary fill  */
+//     border-radius: 28px;                     /* the shape, once             */
+//     evg-surface-effect: liquid-glass;        /* and the refraction          */
+//   }
+registerSurfaceEffect({
+  name: "liquid-glass",
+  layer: "backdrop",
+  // The defaults are a pane about a finger thick. Measured by eye against a
+  // page of stripes, which is the background that shows a bend: on a quiet one
+  // half these numbers reads as a smudge, and twice them reads as a fishbowl.
+  params: {
+    thickness: 24, strength: 32, power: 2.2, disperse: 0.07,
+    shine: 0.6, angle: -60, tint: 0.05,
+    sweep: 0, "sweep-angle": -62, "sweep-width": 0.06,
+    "sweep-speed": 0, "sweep-at": 0.5, "sweep-edge": 2.2,
+    "sweep-rim": 0.55, "sweep-duty": 0.35,
+  },
+  frag: `
+vec4 fxColor(vec2 p, vec2 local) {
+  float d = fxBoxDistance(p);
+  // 1 at the very edge of the pane, 0 once the surface has flattened out.
+  float t = clamp(1.0 + d / max(p_thickness, 0.5), 0.0, 1.0);
+
+  // WHICH WAY THE SURFACE FACES, as the gradient of the distance field. Taken
+  // by sampling the field rather than with dFdx: the derivative of a rounded
+  // box is exact everywhere except where it matters, along the corners, and
+  // this costs four evaluations of an expression that is already cheap.
+  float e = 1.0;
+  vec2 g = vec2(fxBoxDistance(p + vec2(e, 0.0)) - fxBoxDistance(p - vec2(e, 0.0)),
+                fxBoxDistance(p + vec2(0.0, e)) - fxBoxDistance(p - vec2(0.0, e)));
+  vec2 n = g / max(length(g), 0.0001);
+
+  // The bend: nothing across the flat middle, everything in the band. Sampled
+  // OUTWARD, which is what drags the page around the rim and compresses it
+  // there — the single thing that makes a pane read as an object with an edge
+  // rather than a window with a blur behind it.
+  vec2 off = n * pow(t, max(p_power, 0.01)) * p_strength;
+  // Page pixels to texture coordinates: the page counts y down, GL counts up.
+  vec2 duv = vec2(off.x, -off.y) / uRes;
+
+  // A GLASS EDGE SPLITS COLOUR, because the bend depends on the wavelength.
+  // Small: past about a tenth this stops being glass and becomes a fault in
+  // the display — the same lesson the ripple learned about its own fringing.
+  vec3 col;
+  col.r = texture(uSrc, vUV + duv * (1.0 + p_disperse)).r;
+  col.g = texture(uSrc, vUV + duv).g;
+  col.b = texture(uSrc, vUV + duv * (1.0 - p_disperse)).b;
+  float a = texture(uSrc, vUV + duv).a;
+
+  // THE HIGHLIGHT, inset from the very edge rather than on it. On the edge it
+  // reads as a border somebody drew; a pixel or two in, it reads as a bevel
+  // catching the light. The far side gets a fainter one, which is the light
+  // that went through the pane and came back off the inside of the other rim.
+  vec2 L = vec2(cos(radians(p_angle)), sin(radians(p_angle)));
+  float facing = dot(n, L);
+  float band = pow(t, 3.0) * (1.0 - smoothstep(0.88, 1.0, t));
+  col += vec3(max(facing, 0.0) * band * p_shine
+            + max(-facing, 0.0) * band * p_shine * 0.4);
+
+  // THE SWEEP. A bar of light lying across the pane at its own angle, either
+  // parked or travelling.
+  //
+  // Measured ALONG the bar's direction and normalised by how far that
+  // direction has to travel to cross this box, so one number puts the bar in
+  // the same relative place on a wide card and a small round one — a sweep in
+  // pixels would be off the end of the short one.
+  if (p_sweep > 0.0) {
+    vec2 sdir = vec2(cos(radians(p_sweep_angle)), sin(radians(p_sweep_angle)));
+    vec2 centre = uBox.xy + uBox.zw * 0.5;
+    float span = abs(uBox.z * sdir.x) + abs(uBox.w * sdir.y);
+    float along = dot(p - centre, sdir) / max(span, 1.0) + 0.5;
+    // WHERE THE BAR IS. Travelling from before one edge to past the other, so
+    // it arrives and leaves rather than appearing in the middle — and it does
+    // that in sweep-duty of the cycle, parked far off the pane for the rest.
+    // A glint that is always crossing is a stripe with a slow animation on it.
+    float at = p_sweep_at;
+    if (p_sweep_speed > 0.0) {
+      float duty = clamp(p_sweep_duty, 0.02, 1.0);
+      float travel = fract(uTime * p_sweep_speed) / duty;
+      at = travel <= 1.0 ? travel * 1.4 - 0.2 : 9.0;
+    }
+    float w = max(p_sweep_width, 0.004);
+    float off2 = (along - at) / w;
+    float bar = exp(-off2 * off2);
+    // A thin white core inside a softer halo: one Gaussian alone reads as a
+    // smudge, and the core is what makes it look like a reflection of
+    // something with an edge.
+    float core = exp(-off2 * off2 * 9.0);
+    // KEPT TO THE RIM, by as much as the sheet asked for. t is 1 at the
+    // pane's edge and 0 across its flat middle, so this is the difference
+    // between a light catching a bevel and a line drawn on a window.
+    float rimward = mix(1.0, t, clamp(p_sweep_rim, 0.0, 1.0));
+    col += vec3(bar * 0.5 + core * 0.85) * p_sweep * rimward;
+    // AND WHERE IT MEETS THE RIM. This is the bright segment along part of
+    // the border in every photograph of a polished pane: the bevel is turned
+    // towards the viewer there, so it returns far more of the bar than the
+    // flat middle does. It is the rim band, lit by the bar rather than by the
+    // ambient light.
+    col += vec3(band * bar * p_sweep * p_sweep_edge);
+  }
+
+  // And a flat lift, for glass that is not water-clear. The element's own
+  // background-color is the other half of this and is painted after, so a
+  // sheet can do it from either side.
+  col += vec3(p_tint);
+  return vec4(col, a);
+}
+`,
+});
+// PLASMA WAVE: ribbons of light crossing a dark ground.
+//
+// A SOURCE, and the quietest of the three: no pointer, no state, one clock. A
+// ribbon is a line whose height is a sum of two sines that do not share a
+// period, so it never repeats within a page; what is drawn is the DISTANCE to
+// that line, as a thin core inside a wide glow. Several of them at different
+// speeds and phases, and the crossings are where the picture comes from —
+// two ribbons that meet add, and the fold reads as depth that nothing here
+// computed.
+//
+//   ribbons   how many, 1..8
+//   speed     how fast they travel, and they travel at different rates
+//   amp       how far they swing from their lane, as a fraction of the box
+//   freq      how many crests fit across the box
+//   width     the core's half-width in pixels
+//   glow      how far the halo reaches past the core, px
+//   sheet     a much wider, much dimmer band under it, as a fraction of the
+//             box's height: what makes a ribbon silk rather than a neon tube
+//   hue/hue2  the two ends of the ramp the ribbons are coloured along
+//   grain     a dusting of particles along them; 0 is a clean ribbon
+registerSurfaceEffect({
+  name: "plasma-wave",
+  layer: "source",
+  params: {
+    ribbons: 5, speed: 0.35, amp: 0.22, freq: 1.7, width: 2.2,
+    glow: 26, sheet: 0.16, hue: 225, hue2: 285, grain: 0.35, seed: 1,
+  },
+  frag: `
+float pwHash(vec2 p) {
+  p = fract(p * vec2(127.31, 311.7));
+  p += dot(p, p + 34.53);
+  return fract(p.x * p.y);
+}
+vec3 pwHue(float deg) {
+  float h = fract(deg / 360.0) * 6.0;
+  return clamp(abs(mod(h + vec3(0.0, 4.0, 2.0), 6.0) - 3.0) - 1.0, 0.0, 1.0);
+}
+
+vec4 fxColor(vec2 p, vec2 local) {
+  vec2 q = p - uBox.xy;
+  float w = max(uBox.z, 1.0);
+  float h = max(uBox.w, 1.0);
+  float x = q.x / w;
+
+  vec3 lit = vec3(0.0);
+  float cover = 0.0;
+  int n = int(clamp(p_ribbons, 1.0, 8.0));
+  for (int i = 0; i < 8; i++) {
+    if (i >= n) break;
+    float fi = float(i);
+    float seed = p_seed * 13.0 + fi * 7.31;
+    // Each ribbon has its own lane, its own rate and its own phase, so they
+    // drift apart and cross rather than travelling as a bundle.
+    float lane = 0.5 + (pwHash(vec2(seed, 1.0)) - 0.5) * 0.55;
+    float rate = 0.6 + pwHash(vec2(seed, 2.0)) * 1.1;
+    float phase = pwHash(vec2(seed, 3.0)) * 6.2831;
+    float f1 = p_freq * (0.8 + pwHash(vec2(seed, 4.0)) * 0.6);
+    // TWO SINES THAT DO NOT SHARE A PERIOD. One alone is a wave somebody
+    // drew; the second, at an irrational-ish multiple, is what stops the
+    // shape repeating across the width of a page.
+    float y = lane
+      + p_amp * 0.5 * sin(x * 6.2831 * f1 + phase + uTime * p_speed * rate)
+      + p_amp * 0.28 * sin(x * 6.2831 * f1 * 1.618 - phase * 1.7 - uTime * p_speed * rate * 0.7);
+    float d = abs(q.y - y * h);
+    float core = exp(-(d * d) / max(p_width * p_width, 0.01));
+    float halo = exp(-d / max(p_glow, 1.0)) * 0.45;
+    // AND A SHEET UNDER BOTH: a band far wider than the glow and far dimmer,
+    // which is what makes a ribbon read as a fold of silk rather than as a
+    // neon tube. sheet at 0 leaves the tube, which is also a look.
+    halo += exp(-(d * d) / max(p_sheet * p_sheet * h * h, 0.0001)) * 0.16 * step(0.001, p_sheet);
+    // Coloured along the ribbon rather than across it: the ramp runs with the
+    // travel, so a crest carries one colour into the next one's.
+    vec3 tint = mix(pwHue(p_hue), pwHue(p_hue2),
+                    clamp(0.5 + 0.5 * sin(x * 3.1 + fi * 1.3 + uTime * p_speed * 0.4), 0.0, 1.0));
+    float amount = core + halo;
+    lit += tint * amount;
+    // The white middle of a bright ribbon, which is what a photograph of one
+    // looks like: the colour lives in the glow and the core is overexposed.
+    lit += vec3(core * 0.75);
+    cover += amount;
+  }
+
+  // A DUSTING ALONG THEM. Particles where the light already is, so they read
+  // as motes caught in it rather than as noise laid over the top.
+  if (p_grain > 0.0) {
+    // A POINT INSIDE THE CELL, not the cell. The first version lit the whole
+    // 7-pixel square a mote was drawn in, which on a dark ground is a grid of
+    // faint squares across the picture — the particle equivalent of the
+    // starfield's clipped halo, and just as easy to mistake for a texture.
+    vec2 gq = q / 7.0;
+    vec2 gid = floor(gq);
+    vec2 gf = fract(gq);
+    float g = pwHash(gid + p_seed * 3.0);
+    if (g > 0.955) {
+      vec2 at = vec2(pwHash(gid + 1.7), pwHash(gid + 4.3));
+      float d = length((gf - at) * 7.0);
+      float mote = exp(-d * d * 0.9) * pow(pwHash(gid + 9.1), 2.0);
+      float tw = 0.55 + 0.45 * sin(uTime * 2.0 + g * 6.28);
+      float near = clamp(cover * 1.6, 0.0, 1.0);
+      lit += vec3(0.8, 0.85, 1.0) * mote * tw * p_grain * near;
+      cover += mote * 0.4 * p_grain * near;
+    }
+  }
+
+  float a = clamp(cover, 0.0, 1.0);
+  return vec4(lit / max(a, 0.0001), a);
+}
+`,
+});
+
+// RAINDROP: water on the surface, with the page showing through it.
+//
+// A BACKDROP, because that is what a drop IS: a lens. It reads what is behind
+// the element and bends it through each drop — a drop over a photograph shows
+// the photograph, magnified and upside down at the edges, and a drop over a
+// flat dark card shows the card and its own highlight. A source effect could
+// draw the highlight and never the thing being seen through.
+//
+// Every drop is a hash of the cell it sits in, like the starfield's stars, so
+// a pane of five hundred of them costs no memory and no display list. They do
+// not fall: rain on a window mostly SITS, and the ones that run are a
+// different effect. What `speed` does here is drift the whole field slowly, so
+// a hero does not look like a photograph.
+//
+//   density   how many, by cell size
+//   size      how big each one is within its cell
+//   refract   how hard the lens bends what is behind it, px
+//   shine     the specular dot where the light lands on each drop
+//   angle     where that light is, degrees
+//   rim       the dark edge opposite the light, which is what gives a drop
+//             its roundness on a flat colour
+//   speed     how fast the field drifts
+registerSurfaceEffect({
+  name: "raindrop",
+  layer: "backdrop",
+  params: {
+    density: 1, size: 0.5, refract: 14, shine: 0.85, angle: -55,
+    rim: 0.55, speed: 0, seed: 1,
+  },
+  frag: `
+float rdHash(vec2 p) {
+  p = fract(p * vec2(127.31, 311.7));
+  p += dot(p, p + 34.53);
+  return fract(p.x * p.y);
+}
+vec2 rdHash2(vec2 p) { return vec2(rdHash(p), rdHash(p + 19.19)); }
+
+vec4 fxColor(vec2 p, vec2 local) {
+  float cell = max(10.0, 46.0 / max(p_density, 0.05));
+  vec2 drift = vec2(0.0, uTime * p_speed);
+  vec2 g = (p - uBox.xy + drift) / cell;
+  vec2 id = floor(g);
+  vec2 f = fract(g);
+
+  // The nearest drop that covers this pixel. Drops do not overlap in this
+  // field — one per cell, and the radius cannot reach the neighbour — so the
+  // first one found is the answer and there is nothing to sort.
+  float best = 1e9;
+  vec2 bestDir = vec2(0.0);
+  float bestR = 0.0;
+  for (int dy = -1; dy <= 1; dy++) {
+    for (int dx = -1; dx <= 1; dx++) {
+      vec2 o = vec2(float(dx), float(dy));
+      vec2 cid = id + o + p_seed * 5.0;
+      float has = rdHash(cid);
+      if (has < 0.45) continue;
+      // Mostly small, a few large: the same power law the stars use, because
+      // a field of identical circles reads as a pattern and not as rain.
+      float r = cell * 0.5 * p_size * (0.22 + pow(rdHash(cid + 3.3), 2.2) * 0.95);
+      vec2 at = o + 0.2 + rdHash2(cid + 7.7) * 0.6;
+      vec2 v = (f - at) * cell;
+      float d = length(v) - r;
+      if (d < best) { best = d; bestDir = v / max(length(v), 0.0001); bestR = r; }
+    }
+  }
+
+  vec4 behind = texture(uSrc, vUV);
+  if (best > 0.0 || bestR <= 0.0) {
+    // Between the drops the surface is itself. A backdrop effect that tinted
+    // the gaps would be a wet-looking rectangle rather than drops on one.
+    return behind;
+  }
+
+  // INSIDE A DROP. How far from its edge, 0 at the rim and 1 at the middle —
+  // the drop's own dome, which is what both the lens and the light use.
+  float t = clamp(-best / max(bestR, 0.01), 0.0, 1.0);
+  // A sphere's normal, not a cone's: the bend is strongest at the rim and
+  // nothing at all in the middle, so what is behind stays legible through the
+  // centre and smears round the edge.
+  float bend = (1.0 - t) * (1.0 - t) * p_refract;
+  vec2 off = bestDir * bend;
+  vec2 duv = vec2(off.x, -off.y) / uRes;
+  vec3 col = vec3(
+    texture(uSrc, vUV + duv * 1.03).r,
+    texture(uSrc, vUV + duv).g,
+    texture(uSrc, vUV + duv * 0.97).b);
+
+  // THE LIGHT ON IT, and this is the whole of what a drop looks like on a
+  // dark surface: the lens above is looking at black, so without these three
+  // terms a drop is invisible.
+  //
+  // A drop is not a lit sphere. Photograph one on a black pane and what you
+  // see is a THIN BRIGHT CRESCENT just inside the rim on the side AWAY from
+  // the lamp — light that entered the top of the dome, crossed it and left
+  // through the far edge — and a small hard dot on the side towards it. The
+  // body between them stays as dark as the surface. The first version lit the
+  // whole half facing the lamp and came out as a field of white wedges.
+  vec2 L = vec2(cos(radians(p_angle)), sin(radians(p_angle)));
+  float facing = dot(bestDir, L);
+  float edge = 1.0 - t;
+  // A narrow band a tenth of the way in from the rim.
+  float band = exp(-pow((t - 0.11) / 0.075, 2.0));
+  float crescent = pow(max(-facing, 0.0), 2.2) * band * p_shine;
+  // And the dot, further in and much tighter.
+  float dot1 = exp(-pow((t - 0.58) / 0.14, 2.0));
+  float hilite = pow(max(facing, 0.0), 14.0) * dot1 * p_shine * 0.8;
+  // A dark line right at the rim, which is what separates a drop from the
+  // surface it sits on when both are nearly black.
+  col *= 1.0 - pow(edge, 7.0) * p_rim * 0.85;
+  col += vec3(crescent + hilite);
+  // And a hair of light across the dome, because water is not a hole.
+  col += vec3(0.015 * t);
+  return vec4(col, 1.0);
+}
+`,
+});
+
+// AMBIENT LIGHT: a wash of colour with soft lights adrift in it.
+//
+// The quietest effect here and the one most likely to end up behind real
+// content: a two-colour gradient, a slow fold through it, and a handful of
+// out-of-focus discs that cross it. Nothing in it is sharp, which is the
+// point — it is a BACKGROUND, and a background with an edge in it competes
+// with the text on top.
+//
+//   hue/hue2  the two ends of the wash
+//   sat       how far from grey either end is; a wash at full saturation is
+//             a poster, and this goes behind text
+//   tilt      which way the wash runs, degrees
+//   depth     how far the wash goes from one end to the other
+//   orbs      how many lights, 0..10
+//   size      how big they are, as a fraction of the box
+//   softness  how far out of focus: 1 is a disc with a soft edge, 2 is a haze
+//   speed     how fast they drift
+//   glow      how bright they are
+registerSurfaceEffect({
+  name: "ambient-light",
+  layer: "source",
+  params: {
+    hue: 190, hue2: 268, sat: 0.5, tilt: 25, depth: 0.5,
+    orbs: 7, size: 0.55, softness: 1.6, speed: 0.06, glow: 0.45, seed: 1,
+  },
+  frag: `
+float alHash(vec2 p) {
+  p = fract(p * vec2(127.31, 311.7));
+  p += dot(p, p + 34.53);
+  return fract(p.x * p.y);
+}
+vec3 alHue(float deg) {
+  float h = fract(deg / 360.0) * 6.0;
+  return clamp(abs(mod(h + vec3(0.0, 4.0, 2.0), 6.0) - 3.0) - 1.0, 0.0, 1.0);
+}
+
+vec4 fxColor(vec2 p, vec2 local) {
+  vec2 q = (p - uBox.xy) / max(uBox.zw, vec2(1.0));
+  float minSide = max(min(uBox.z, uBox.w), 1.0);
+  float a = radians(p_tilt);
+  vec2 dir = vec2(cos(a), sin(a));
+  // The wash, with a slow fold through it so it is not a linear gradient a
+  // stylesheet could have drawn.
+  float along = dot(q - 0.5, dir) + 0.5;
+  along += 0.12 * sin(q.x * 3.1 + uTime * p_speed * 1.7) * sin(q.y * 2.3 - uTime * p_speed * 1.1);
+
+  // MUTED ON PURPOSE. A hue at full saturation is a poster; this goes BEHIND
+  // text, and the first version came out as a neon gradient that would eat
+  // anything laid on it. sat mixes each end towards grey before either is
+  // used, and depth is how bright the result is allowed to be.
+  vec3 c1 = mix(vec3(0.5), alHue(p_hue), clamp(p_sat, 0.0, 1.0));
+  vec3 c2 = mix(vec3(0.5), alHue(p_hue2), clamp(p_sat, 0.0, 1.0));
+  vec3 wash = mix(c1, c2, clamp(along, 0.0, 1.0)) * p_depth;
+
+  // THE LIGHTS, in pixels rather than in the box's own units — a disc
+  // measured in a stretched space comes out an ellipse, and the first version
+  // squashed every one of them by the box's aspect.
+  vec3 lit = vec3(0.0);
+  int n = int(clamp(p_orbs, 0.0, 10.0));
+  for (int i = 0; i < 10; i++) {
+    if (i >= n) break;
+    float fi = float(i);
+    float s = p_seed * 17.0 + fi * 4.77;
+    vec2 home = vec2(alHash(vec2(s, 1.0)), alHash(vec2(s, 2.0)));
+    float rate = 0.4 + alHash(vec2(s, 3.0)) * 1.2;
+    // A slow ellipse rather than a straight line: a light that crosses the
+    // box and comes back is a light that never leaves it.
+    vec2 at = home + 0.18 * vec2(
+      sin(uTime * p_speed * rate + fi * 2.1),
+      cos(uTime * p_speed * rate * 0.8 + fi * 1.3));
+    float r = max(p_size * (0.35 + alHash(vec2(s, 4.0)) * 0.65) * 0.5 * minSide, 2.0);
+    float dn = length((q - at) * uBox.zw) / r;
+    float soft = max(p_softness, 0.2);
+    // A BOKEH DISC, which is not a blurred dot: an out-of-focus highlight is
+    // flat across its middle and brighter at its edge, because the lens maps
+    // a point onto its own aperture. That ring is why these read as lights
+    // out of focus rather than as smudges.
+    float body = pow(clamp(1.0 - dn, 0.0, 1.0), soft);
+    // The ring is a HINT, not the shape. At a half of the body it reads as a
+    // donut — a gear, even, once two of them overlap — and the thing it is
+    // meant to suggest is only that the light has an aperture behind it.
+    float ring = exp(-pow((dn - 0.8) / (0.34 * soft), 2.0)) * 0.16;
+    vec3 tint = mix(c2, c1, alHash(vec2(s, 5.0)));
+    lit += (tint * 0.75 + vec3(0.25)) * (body * 0.8 + ring) * p_glow;
+  }
+
+  vec3 col = wash + lit;
+  float alpha = clamp(max(max(col.r, col.g), col.b), 0.0, 1.0);
+  return vec4(col / max(alpha, 0.0001), alpha);
+}
+`,
+});
+
+// THE SMOKE, as a wall of it rising through the box.
+//
+// A cloud is not a noise field with a threshold on it: what makes smoke read
+// as smoke is that it CURLS, and curls at every size at once. So the field is
+// DOMAIN WARPED — fbm evaluated at a point that two other fbms have already
+// moved — which is the cheapest way to get a turbulent flow out of a function
+// with no flow in it. One warp gives billows, two gives the fine tendrils that
+// come off their edges.
+//
+// The body is heavy at the bottom and thins upward, because the reference for
+// this is a stage full of it: dense along the floor, wisps reaching past the
+// halfway line, and black above.
+registerSurfaceEffect({
+  name: "smoke",
+  layer: "source",
+  // The defaults are the stage: a bank of it along the floor, billowing to
+  // about the middle and thinning to single tendrils above that. Arrived at
+  // against the photograph this was written from, at 500 by 300.
+  params: {
+    density: 1.2, rise: 0.05, wind: 0, swirl: 2.6, scale: 190, detail: 5,
+    height: 0.9, softness: 0.55, shade: 0.6, angle: -60,
+    hue: 205, tint: 0.1, seed: 1,
+  },
+  frag: `
+float smHash21(vec2 p) {
+  p = fract(p * vec2(127.31, 311.7));
+  p += dot(p, p + 34.53);
+  return fract(p.x * p.y);
+}
+float smNoise(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  f = f * f * (3.0 - 2.0 * f);
+  float a = smHash21(i);
+  float b = smHash21(i + vec2(1.0, 0.0));
+  float c = smHash21(i + vec2(0.0, 1.0));
+  float d = smHash21(i + vec2(1.0, 1.0));
+  return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
+}
+// Octaves are a PARAMETER, not a constant: the tendrils are the last two and
+// they are also most of the cost, so a page that wants a quiet haze behind
+// text can have it for a third of the arithmetic.
+float smFbm(vec2 p) {
+  float sum = 0.0;
+  float amp = 0.5;
+  int n = int(clamp(p_detail, 1.0, 6.0));
+  for (int i = 0; i < 6; i++) {
+    if (i >= n) break;
+    sum += amp * smNoise(p);
+    p = p * 2.07 + vec2(17.3, 9.1);
+    amp *= 0.5;
+  }
+  return sum;
+}
+
+// A hue as a colour, for the cast over the grey. Smoke is not coloured, it is
+// lit by something that is: a stage gel, a street lamp, a screen.
+vec3 smHue(float deg) {
+  float h = fract(deg / 360.0) * 6.0;
+  return clamp(abs(mod(h + vec3(0.0, 4.0, 2.0), 6.0) - 3.0) - 1.0, 0.0, 1.0);
+}
+
+// The warped field at a point, in the box's own noise space. The two warps are
+// out of step with each other on purpose — a warp that moved with its own
+// source would breathe rather than roll.
+float smField(vec2 q, float t) {
+  vec2 s = vec2(p_seed * 13.7, p_seed * 7.3);
+  vec2 w1 = vec2(smFbm(q + s), smFbm(q + s + vec2(5.2, 1.3)));
+  vec2 w2 = vec2(
+    smFbm(q + 2.0 * w1 + s + vec2(1.7, 9.2) - vec2(0.0, t * 0.6)),
+    smFbm(q + 2.0 * w1 + s + vec2(8.3, 2.8)));
+  return smFbm(q + p_swirl * w2);
+}
+
+vec4 fxColor(vec2 p, vec2 local) {
+  float t = uTime * p_rise;
+  vec2 q = (p - uBox.xy) / max(p_scale, 8.0);
+  q.x += uTime * p_wind * 0.02;
+  // Rising, and the whole field a little slower than the warp above, so the
+  // billows travel through the smoke rather than with it.
+  q.y -= t;
+
+  float f = smField(q, t);
+
+  // HOW HIGH IT REACHES. What rises is not the smoke but the BAR it has to
+  // clear: at the floor almost any of the field shows, and by the top of the
+  // body only the strongest part of it does, which is what leaves single
+  // tendrils standing in the black instead of a fog that fades out evenly.
+  float up = clamp(1.0 - local.y, 0.0, 1.0);
+  float thr = 0.3 + 0.78 * (up / max(p_height, 0.03));
+  float d = f * max(p_density, 0.0);
+
+  float soft = max(p_softness, 0.02);
+  float a = smoothstep(thr - soft * 0.5, thr + soft * 0.5, d);
+  // And thin where the field is thin, so an edge is smoke running out rather
+  // than a cut-out of it.
+  a *= 0.55 + 0.45 * smoothstep(0.2, 0.9, d);
+  if (a <= 0.002) return vec4(0.0);
+
+  // LIT FROM ONE SIDE, by comparing the field with itself a step toward the
+  // light: where the smoke is thinning in that direction the step is lower and
+  // the pixel is a lit face; where it is thickening the step is higher and the
+  // pixel is in shadow. That is a gradient, and a gradient of a field this
+  // turbulent is what gives a cloud its volume.
+  float sh = 1.0;
+  if (p_shade > 0.0) {
+    vec2 dir = vec2(cos(radians(p_angle)), sin(radians(p_angle)));
+    float g = smField(q + dir * 0.22, t) - f;
+    sh = clamp(1.0 - g * 5.0 * p_shade, 0.45, 1.3);
+  }
+
+  // Smoke is not white: it is grey, and it is bright only where it is thick
+  // and lit. A plume that reaches 1.0 everywhere reads as paper.
+  vec3 grey = vec3(0.84, 0.86, 0.89);
+  vec3 tinted = mix(grey, smHue(p_hue), clamp(p_tint, 0.0, 1.0));
+  vec3 col = tinted * sh * (0.3 + 0.45 * min(d, 1.0));
+  return vec4(clamp(col, 0.0, 1.0), clamp(a, 0.0, 1.0));
+}
+`,
+});
+
+function programsFor(gl) {
+  const found = PROGRAMS.get(gl);
+  if (found) return found;
+  const prog = gl.createProgram();
+  gl.attachShader(prog, compile(gl, gl.VERTEX_SHADER, VERT));
+  gl.attachShader(prog, compile(gl, gl.FRAGMENT_SHADER, FRAG));
+  gl.linkProgram(prog);
+  if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
+    throw new Error("link: " + gl.getProgramInfoLog(prog));
+  }
+  const blurProg = gl.createProgram();
+  gl.attachShader(blurProg, compile(gl, gl.VERTEX_SHADER, BLUR_VERT));
+  gl.attachShader(blurProg, compile(gl, gl.FRAGMENT_SHADER, BLUR_FRAG));
+  gl.linkProgram(blurProg);
+  if (!gl.getProgramParameter(blurProg, gl.LINK_STATUS)) {
+    throw new Error("link blur: " + gl.getProgramInfoLog(blurProg));
+  }
+  const presentProg = gl.createProgram();
+  gl.attachShader(presentProg, compile(gl, gl.VERTEX_SHADER, FX_VERT));
+  gl.attachShader(presentProg, compile(gl, gl.FRAGMENT_SHADER, FX_PRESENT_FRAG));
+  gl.linkProgram(presentProg);
+  if (!gl.getProgramParameter(presentProg, gl.LINK_STATUS)) {
+    throw new Error("link present: " + gl.getProgramInfoLog(presentProg));
+  }
+  const rippleProg = gl.createProgram();
+  gl.attachShader(rippleProg, compile(gl, gl.VERTEX_SHADER, RIPPLE_VERT));
+  gl.attachShader(rippleProg, compile(gl, gl.FRAGMENT_SHADER, RIPPLE_FRAG));
+  gl.linkProgram(rippleProg);
+  if (!gl.getProgramParameter(rippleProg, gl.LINK_STATUS)) {
+    throw new Error("link ripple: " + gl.getProgramInfoLog(rippleProg));
+  }
+
+  const backdropProg = gl.createProgram();
+  gl.attachShader(backdropProg, compile(gl, gl.VERTEX_SHADER, BACKDROP_VERT));
+  gl.attachShader(backdropProg, compile(gl, gl.FRAGMENT_SHADER, BACKDROP_FRAG));
+  gl.linkProgram(backdropProg);
+  if (!gl.getProgramParameter(backdropProg, gl.LINK_STATUS)) {
+    throw new Error("link backdrop: " + gl.getProgramInfoLog(backdropProg));
+  }
+  const pathProg = gl.createProgram();
+  gl.attachShader(pathProg, compile(gl, gl.VERTEX_SHADER, PATH_VERT));
+  gl.attachShader(pathProg, compile(gl, gl.FRAGMENT_SHADER, PATH_FRAG));
+  gl.linkProgram(pathProg);
+  if (!gl.getProgramParameter(pathProg, gl.LINK_STATUS)) {
+    throw new Error("link path: " + gl.getProgramInfoLog(pathProg));
+  }
+  // The locations belong to the program, so they are cached with it rather
+  // than looked up per frame.
+  const made = {
+    prog,
+    pathProg,
+    cornerLoc: gl.getAttribLocation(prog, "aCorner"),
+    uPage: gl.getUniformLocation(prog, "uPage"),
+    uShift: gl.getUniformLocation(prog, "uShift"),
+    uView: gl.getUniformLocation(prog, "uView"),
+    uSnap: gl.getUniformLocation(prog, "uSnap"),
+    uAtlas: gl.getUniformLocation(prog, "uAtlas"),
+    uImage: gl.getUniformLocation(prog, "uImage"),
+    pathPosLoc: gl.getAttribLocation(pathProg, "aPos"),
+    pathPageLoc: gl.getUniformLocation(pathProg, "uPage"),
+    pathShiftLoc: gl.getUniformLocation(pathProg, "uShift"),
+    pathViewLoc: gl.getUniformLocation(pathProg, "uView"),
+    pathColorLoc: gl.getUniformLocation(pathProg, "uColor"),
+    pathColor2Loc: gl.getUniformLocation(pathProg, "uColor2"),
+    pathGradLoc: gl.getUniformLocation(pathProg, "uGrad"),
+    pathBoxLoc: gl.getUniformLocation(pathProg, "uBox"),
+    blurProg,
+    blurCornerLoc: gl.getAttribLocation(blurProg, "aCorner"),
+    blurSrc: gl.getUniformLocation(blurProg, "uSrc"),
+    blurStep: gl.getUniformLocation(blurProg, "uStep"),
+    blurWidth: gl.getUniformLocation(blurProg, "uWidth"),
+    blurOffset: gl.getUniformLocation(blurProg, "uOffset"),
+    presentProg,
+    presentPosLoc: gl.getAttribLocation(presentProg, "aPos"),
+    presentSrc: gl.getUniformLocation(presentProg, "uSrc"),
+    rippleProg,
+    ripplePosLoc: gl.getAttribLocation(rippleProg, "aPos"),
+    rippleSrc: gl.getUniformLocation(rippleProg, "uSrc"),
+    rippleRes: gl.getUniformLocation(rippleProg, "uRes"),
+    rippleDrops: gl.getUniformLocation(rippleProg, "uDrops"),
+    rippleCount: gl.getUniformLocation(rippleProg, "uCount"),
+    rippleSpeed: gl.getUniformLocation(rippleProg, "uSpeed"),
+    rippleWidth: gl.getUniformLocation(rippleProg, "uWidth"),
+    rippleStrength: gl.getUniformLocation(rippleProg, "uStrength"),
+    rippleDecay: gl.getUniformLocation(rippleProg, "uDecay"),
+    rippleHi: gl.getUniformLocation(rippleProg, "uHi"),
+    rippleRings: gl.getUniformLocation(rippleProg, "uRings"),
+    rippleStagger: gl.getUniformLocation(rippleProg, "uStagger"),
+    rippleFalloff: gl.getUniformLocation(rippleProg, "uFalloff"),
+    rippleShine: gl.getUniformLocation(rippleProg, "uShine"),
+    rippleGloss: gl.getUniformLocation(rippleProg, "uGloss"),
+    rippleBump: gl.getUniformLocation(rippleProg, "uBump"),
+    rippleLight: gl.getUniformLocation(rippleProg, "uLight"),
+    backdropProg,
+    backdropPosLoc: gl.getAttribLocation(backdropProg, "aPos"),
+    backdropUVLoc: gl.getAttribLocation(backdropProg, "aUV"),
+    backdropCornerLoc: gl.getAttribLocation(backdropProg, "aCorner"),
+    backdropSrc: gl.getUniformLocation(backdropProg, "uSrc"),
+    backdropHalf: gl.getUniformLocation(backdropProg, "uHalf"),
+    backdropRadius: gl.getUniformLocation(backdropProg, "uRadius"),
+  };
+  PROGRAMS.set(gl, made);
+  return made;
+}
+
+/**
+ * A FRAME, BUILT AND KEPT.
+ *
+ * Everything the painter makes from a display list before it can draw it —
+ * the instance arrays, the buffers on the card, the runs, the paths'
+ * geometry — is made here once and kept on the object this returns. `draw`
+ * puts it on the screen, as many times as asked; `dispose` gives the card
+ * its memory back.
+ *
+ * What that is for is a SCROLL. The app keeps its list across a fling and
+ * moves the layer inside it (`EVGDisplayList.refreshLayers`), so the frame
+ * built from that list is still the right frame, moved: `draw` takes the
+ * layers' current shifts, subtracts what was built in, and hands the
+ * difference to the shaders as a uniform, per run. A scroll frame is then
+ * the uniform, the scissors and the draw calls — no arrays, no upload —
+ * which is what the browser's own compositor does with a layer, and why a
+ * page scrolled this way stops stuttering where one rebuilt every frame
+ * did not.
+ *
+ * And what it is ALSO for is a PAN. A list may carry a camera (`view`, see
+ * PLAN_VIEW_TRANSFORM.md), and `draw` takes one too: the same frame drawn at
+ * a different view is the same picture somewhere else, for the cost of a
+ * uniform. A zoom is not as free — the glyph atlas was rasterised at a size
+ * and the curves were flattened for one — so a host that moves the scale far
+ * builds again; `viewBand` below says how far is far.
+ *
+ * `renderDisplayList` below is build, draw once, dispose: what a page that
+ * does not keep its list wants, and what every caller had before.
+ */
+export function prepareDisplayList(gl, doc, opts = {}) {
+  return buildFrame(gl, doc, opts);
+}
+
+/** The camera as the shaders want it: (sx, sy, tx, ty). */
+export function viewVec(v) {
+  if (!v) return [1, 1, 0, 0];
+  if (Array.isArray(v)) return v.length >= 4 ? v : [v[2] ?? 1, v[2] ?? 1, v[0] ?? 0, v[1] ?? 0];
+  const s = v.scale === undefined || v.scale === null ? 1 : v.scale;
+  return [s, s, v.x || 0, v.y || 0];
+}
+
+/**
+ * How far a frame built at one view may be drawn at another.
+ *
+ * A PAN is exact: nothing in a built frame depends on where it is. A ZOOM is
+ * not — the atlas is a rasterisation at a size and a curve was flattened for
+ * one — so past a band the frame has to be built again. √2 either way is
+ * about three notches of a pinch, and a viewer that would rather have sharp
+ * text than frames passes a tighter one.
+ */
+export const VIEW_BAND = Math.SQRT2;
+
+/** Can a frame built at `built` be drawn at `now` without building again? */
+export function viewWithinBand(built, now, band = VIEW_BAND) {
+  const a = viewVec(built)[0] || 1;
+  const b = viewVec(now)[0] || 1;
+  const r = b / a;
+  return r <= band && r >= 1 / band;
+}
+
+export function renderDisplayList(gl, doc, opts = {}) {
+  const frame = buildFrame(gl, doc, opts);
+  const stats = frame.draw(opts.shifts);
+  frame.dispose();
+  return stats;
+}
+
+function buildFrame(gl, doc, opts = {}) {
+  const dpr = opts.dpr || 1;
+  const images = opts.images || new Map();
+  const cmds = doc.list.cmds;
+  // The camera the LIST carried, if it carried one. A list with no view is in
+  // page coordinates already, which is every list written before this existed
+  // and every export that has no camera to speak of.
+  const viewOfDoc = doc.view || (doc.list && doc.list.view) || null;
+
+  const built = programsFor(gl);
+  const prog = built.prog;
+  gl.useProgram(prog);
+
+  // The atlas, kept until the glyphs in it change. Building it means laying
+  // out every run on a 2-D canvas and uploading the result — and the runs are
+  // the same from one frame to the next almost always, because a frame that
+  // differs by a moved shape has not changed a single letter.
+  // THE ATLAS IS RASTERISED AT THE SIZE THE RUNS WILL BE DRAWN AT, which is
+  // the page's device ratio times the scale the frame is built at. A list
+  // with a camera is in scene units, so a 12-unit run on a board at 10% is
+  // 1.2 device pixels: rasterising it at 12 and letting the card shrink it
+  // costs a hundred times the atlas and comes out soft, which is what the
+  // figma board did the first time it was drawn this way. Everything the
+  // slot reports is divided by the same number, so the quad stays in scene
+  // units and the shader's scale puts the ink back at 1:1.
+  // The scale this frame is BUILT at. Everything that has to be measured in
+  // pixels while the list is in scene units divides by it: the atlas below,
+  // and the hairline floor under a stroke.
+  const viewScaleOfFrame = viewVec(viewOfDoc)[0] || 1;
+  const textDpr = dpr * viewScaleOfFrame;
+  const { tex: atlas, slots, rebuilt: atlasRebuilt, added: atlasAdded } = atlasFor(gl, cmds, textDpr, { w: doc.width, h: doc.height });
+
+  // One texture per distinct source, uploaded ONCE — not once per frame. This
+  // used to make a new GL texture for every picture on every frame and never
+  // delete any of them: a decode and an upload per frame, and a leak.
+  const textures = textureCacheFor(gl, images);
+  const texturesUploaded = textures.uploaded | 0;
+
+  // Instances in paint order, plus the runs that must be drawn separately.
+  // A run is a stretch of instances that share a texture binding; an image
+  // ends the run before it and forms one of its own.
+  const rects = [], colors = [], colors2 = [], grads = [], shapes = [], uvs = [], rots = [], radii = [];
+  // `rc` is on a command only when its four corners differ; a box with one
+  // radius still carries a single `r`, so nothing that reads this list had to
+  // change to keep working.
+  const pushRadii = (c) => {
+    if (c.rc) radii.push(c.rc[0], c.rc[1], c.rc[2], c.rc[3]);
+    else { const r = c.r || 0; radii.push(r, r, r, r); }
+  };
+  // Three floats per command, not two: a pivot at (0, 0) is a legal place to
+  // turn about, so "is there one" cannot be read off the coordinates.
+  const origins = [];
+  const runs = [];
+  // THE EFFECT INSTANCES this list carries, by name. Commands refer to one by
+  // `efx`, which is the element's own id: a name survives the display list's
+  // fragment cache, where an index into an array rebuilt this frame would not.
+  const fxById = new Map();
+  for (const e of (doc.list.effects || [])) fxById.set(e.id, e);
+  let missingImages = 0, drawnImages = 0;
+  // The clip in force, as a rectangle or null. A clip is a scissor here, and a
+  // scissor is pipeline state rather than per-instance data, so a change of
+  // clip has to END the run being gathered — everything in a run is drawn by
+  // one call and one call has one scissor.
+  //
+  // This used to be skipped outright, with a note promising a scissor stack.
+  // What that cost was not subtle: a label wider than its cell was drawn in
+  // full, across whatever its neighbour had in it and over the row numbers,
+  // because the clip that said where to stop was thrown away between the
+  // display list and the screen.
+  // The clip is the LIST of rectangles in force, each with the layer it was
+  // written in, and it is intersected when it is applied rather than here:
+  // a clip written inside a scroll layer moves with the layer's content,
+  // the layer's own clip does not, and which rectangle wins between them
+  // depends on how far the content has moved by the time the frame is
+  // drawn — which a kept frame does not know yet.
+  const clipStack = [];
+  let clip = null;
+  // The scroll layer the commands being gathered belong to: 0 outside any,
+  // else the id the list put on the clip that opened it.
+  const layerStack = [];
+  let layer = 0;
+  const pushRun = (start, count, tex, ownLayer) => {
+    if (count > 0) runs.push({ kind: "quads", start, count, tex, clip, layer: ownLayer ?? layer });
+  };
+  // A COMMAND THAT SAYS WHICH LAYER IT IS IN. Layers are otherwise read off
+  // the clip nesting, which is right for everything drawn inside a scroller —
+  // and the focus ring is drawn LAST and outside every clip, so that a button
+  // in a panel is not half-ringed by the panel's edge. Outside every clip is
+  // outside every layer, so a kept frame moved by `uShift` moved the whole
+  // page and left the ring where it was. The list now marks the ring with the
+  // layer its element scrolls in (`EVGDisplayList.ringAround`) and this is
+  // what reads it.
+  let ownLayer = null;
+  const flushOwn = () => { if (ownLayer !== null) { flush(); ownLayer = null; } };
+  let runStart = 0;
+  const flush = () => {
+    const n = rects.length / 4;
+    pushRun(runStart, n - runStart, null, ownLayer);
+    runStart = n;
+  };
+  // Path geometry is not instanced quads, so a path ends the run before it and
+  // becomes a run of its own — which is what keeps the paint order intact.
+  const pushPath = (op) => { flush(); runs.push(Object.assign(op, { clip, layer })); };
+
+  for (const c of cmds) {
+    // A command of its own layer starts its own run and ends it after — see
+    // `ownLayer` above. Only the ring uses this; everything else takes the
+    // layer of the clip it is inside.
+    if (c.k !== KIND.PUSH_CLIP && c.k !== KIND.POP_CLIP) {
+      const mine = c.layer > 0 ? c.layer : null;
+      if (mine !== ownLayer) { flush(); ownLayer = mine; }
+    }
+    // A backdrop blur reads the framebuffer as it stands, so it has to happen
+    // between the runs before it and the runs after it — the same reason a
+    // path breaks the batch. The command then goes on to emit its own fill
+    // below, which composites over the blur exactly as the browser does.
+    if (c.k === KIND.RECT && c.bb > 0) {
+      flush();
+      runs.push({ kind: "backdrop", cmd: c, clip, layer });
+    }
+    // A BACKDROP EFFECT, for the same reason and at the same point: it reads
+    // what is behind the element, so it has to run before the element's own
+    // background — and everything the element is and contains is then painted
+    // over it, unrefracted. `backdrop-filter: blur()` on the same box runs
+    // first, which is what makes frosted-then-refracted one declaration each.
+    if (c.k === KIND.RECT && c.efx) {
+      const inst = fxById.get(c.efx);
+      const plug = inst && FX_PLUGINS.get(inst.kind);
+      if (plug && plug.layer === "backdrop") {
+        flush();
+        runs.push({ kind: "fx", inst, backdrop: true, clip, layer });
+      }
+    }
+    if (c.k === KIND.PUSH_CLIP) {
+      flush();
+      clipStack.push(clip);
+      layerStack.push(layer);
+      clip = (clip || []).concat([{ x: c.x, y: c.y, w: c.w, h: c.h, layer }]);
+      if (c.layer > 0) layer = c.layer;
+      continue;
+    }
+    if (c.k === KIND.POP_CLIP) {
+      flush();
+      clip = clipStack.length ? clipStack.pop() : null;
+      layer = layerStack.length ? layerStack.pop() : 0;
+      continue;
+    }
+    if (c.k === KIND.PATH || c.k === KIND.STROKE) {
+      const rings = ringsOf(c);
+      if (!rings.length) continue;
+      const col = c.c || [0, 0, 0, 1];
+      const rgba = [col[0] / 255, col[1] / 255, col[2] / 255, col[3]];
+      if (c.k === KIND.STROKE) {
+        // Dashes are geometry, not a paint mode: the pattern cuts the
+        // rings and what is left is stroked exactly as a solid line is,
+        // caps and all — which is what puts a round end on each dash.
+        const pat = parseDash(c.dash);
+        const dashed = pat.length ? dashRings(rings, pat, c.dashoff || 0) : rings;
+        const tris = strokeTriangles(dashed, c.t || 1, c.cap | 0, c.join | 0, viewScaleOfFrame);
+        if (tris.length) pushPath({ kind: "tris", verts: new Float32Array(tris), color: rgba });
+      } else {
+        // A vector filled with a gradient keeps BOTH now: the rings say what
+        // shape it is, `c2` and `gd` how it is shaded. Flattened to one
+        // colour it kept the shape and lost the ramp, which was the right
+        // half to keep and only half of it.
+        const far = c.c2 || col;
+        pushPath({ kind: "fill", rings: rings.map((r) => new Float32Array(r)),
+                   bounds: boundsOf(rings), evenOdd: !!c.eo, color: rgba,
+                   grad: c.c2 ? (c.gd === 1 ? 2 : 1) : 0,
+                   color2: [far[0] / 255, far[1] / 255, far[2] / 255, far[3]] });
+      }
+      continue;
+    }
+    if (c.k === KIND.IMAGE) {
+      const t = c.src && textures.get(c.src);
+      if (!t) { missingImages += 1; continue; }
+      // Everything queued so far has to be drawn BEFORE this photo, or the
+      // page paints out of order.
+      flush();
+      // A crop is a UV rectangle the command brought with it, in the
+      // bitmap's own 0..1 space; cover is the one computed here when it did
+      // not. Either way the quad is the box and only the sampling changes,
+      // so a cropped photo costs nothing extra.
+      const uv = c.cu ? c.cu : coverUV(t.w, t.h, c.w, c.h);
+      // Mirrored is the same quad read the other way round: aUV is
+      // (u0,v0,u1,v1) and the fragment mixes between them, so swapping the
+      // ends flips the picture without touching the geometry.
+      const u0 = c.fx ? uv[2] : uv[0];
+      const u1 = c.fx ? uv[0] : uv[2];
+      const v0 = c.fy ? uv[3] : uv[1];
+      const v1 = c.fy ? uv[1] : uv[3];
+      rects.push(c.x, c.y, c.w, c.h);
+      uvs.push(u0, v0, u1, v1);
+      shapes.push(c.r || 0, 0, MODE.IMAGE);
+      pushRadii(c);
+      rots.push(((c.rot || 0) * Math.PI) / 180);
+      origins.push(c.rox || 0, c.roy || 0, c.rox === undefined ? 0 : 1);
+      colors.push(1, 1, 1, 1);
+      colors2.push(1, 1, 1, 1);
+      grads.push(0);
+      pushRun(runStart, 1, t.tex);
+      runStart = rects.length / 4;
+      drawnImages += 1;
+      continue;
+    }
+    if (c.k === KIND.TEXT) {
+      const s = slots.get(runKey(c, textDpr));
+      if (!s) continue;
+      // EVG's y is the top of the LINE BOX and c.h is its height, so the
+      // baseline is the CSS half-leading below the top plus one face ascent:
+      //
+      //     baseline = y + (lineBox - (faceAsc + faceDesc)) / 2 + faceAsc
+      //
+      // The half-leading term was missing, and it is missing in only one
+      // direction: a line box is normally TALLER than the face it holds, so
+      // every run was drawn that much high — 0.54px for 13px text at
+      // line-height 1.2, and most of a pixel at reading sizes. It is computed
+      // here rather than in the layout on purpose: this is where the real face
+      // metrics are, and the layout only ever has an estimate of them.
+      //
+      // Inside the slot the baseline is pad + ink ascent down from the top.
+      // Line the two up. This is the same rule the software canvas draws by,
+      // which is what makes a page look the same whichever backend drew it.
+      // Everything in the slot is stored in CSS pixels, and so is c.h.
+      const halfLeading = c.h ? (c.h - (s.faceAsc + s.faceDesc)) / 2 : 0;
+      rects.push(c.x - s.pad, c.y + halfLeading + s.faceAsc - (s.pad + s.asc), s.w, s.h);
+      uvs.push(s.u0, s.v0, s.u1, s.v1);
+      shapes.push(0, 0, s.colored ? MODE.COLORTEXT : MODE.TEXT);
+      radii.push(0, 0, 0, 0);
+    } else {
+      // The drop shadow goes in FIRST, as its own instance: the box is drawn
+      // over it in the same run, in array order, which is the order the
+      // painter draws. A board of FigJam stickies is 154 of these, and
+      // without them every note sits flat on the page.
+      if (c.sh && c.k === KIND.RECT) {
+        const b = Math.max(c.sh.blur || 0, 0);
+        const sc = c.sh.c || [0, 0, 0, 0.35];
+        rects.push(c.x + (c.sh.x || 0) - b, c.y + (c.sh.y || 0) - b, c.w + 2 * b, c.h + 2 * b);
+        uvs.push(0, 0, 0, 0);
+        shapes.push(c.r || 0, b, MODE.SHADOW);
+        pushRadii(c);
+        // The shadow turns with the box it belongs to, about the same pivot.
+        rots.push(((c.rot || 0) * Math.PI) / 180);
+        origins.push(c.rox || 0, c.roy || 0, c.rox === undefined ? 0 : 1);
+        colors.push(sc[0] / 255, sc[1] / 255, sc[2] / 255, sc[3]);
+        colors2.push(sc[0] / 255, sc[1] / 255, sc[2] / 255, sc[3]);
+        grads.push(0);
+      }
+      rects.push(c.x, c.y, c.w, c.h);
+      uvs.push(0, 0, 0, 0);
+      shapes.push(c.r || 0, c.k === KIND.BORDER ? (c.t || 1) : 0, MODE.SHAPE);
+      pushRadii(c);
+    }
+    rots.push(((c.rot || 0) * Math.PI) / 180);
+    origins.push(c.rox || 0, c.roy || 0, c.rox === undefined ? 0 : 1);
+    const col = c.c || [0, 0, 0, 1];
+    colors.push(col[0] / 255, col[1] / 255, col[2] / 255, col[3]);
+    // `gd` is the display list's gradient direction: 1 means across the box,
+    // anything else means down it. A command with no `c2` is flat, and the
+    // second stop is then the first, so the shader's mix is a no-op.
+    const col2 = c.c2 || col;
+    colors2.push(col2[0] / 255, col2[1] / 255, col2[2] / 255, col2[3]);
+    grads.push(c.c2 ? (c.gd === 1 ? 2 : 1) : 0);
+    // A SOURCE EFFECT, drawn here — after the rectangle it rides and before
+    // whatever the element contains, which is what makes it a background and
+    // not a sticker. `flush` closes the batch WITH this rectangle in it, so the
+    // element's own background is under the effect and its children are over
+    // it.
+    //
+    // A filter is not drawn here: it reads the finished surface, so it cannot
+    // run until there is one. Those are collected below instead.
+    if (c.k === KIND.RECT && c.efx) {
+      const inst = fxById.get(c.efx);
+      const plug = inst && FX_PLUGINS.get(inst.kind);
+      if (plug && plug.layer === "source") {
+        flush();
+        runs.push({ kind: "fx", inst, clip, layer });
+      }
+    }
+  }
+  flush();
+  const count = rects.length / 4;
+  // The filters, in the order the document declares them. Whether any of them
+  // has anything to do this frame is a question for `draw`: the events on an
+  // instance change without the list being rebuilt, which is the whole point
+  // of keeping the clock out of the tree.
+  const fxFilters = (doc.list.effects || []).filter((e) => {
+    const plug = FX_PLUGINS.get(e.kind);
+    return !!plug && plug.layer === "filter";
+  });
+  // The backdrop runs this frame holds. Their instances decide, at draw time,
+  // whether the frame has to be rendered offscreen at all — an effect switched
+  // off reads nothing, so it costs nothing, not even the indirection.
+  const fxBackdropRuns = runs.filter((r) => r.kind === "fx" && r.backdrop);
+
+  const quad = new Float32Array([0, 0, 1, 0, 0, 1, 1, 1]);
+  const vao = gl.createVertexArray();
+  gl.bindVertexArray(vao);
+
+  // The two VAOs a blurred backdrop draws through. Built here rather than
+  // inside `drawBackdrop` so a page with one dialog on it and a page with ten
+  // allocate the same amount: nothing, per frame.
+  //
+  // The blur passes draw a full-target quad in clip space and read the same
+  // corners as UVs, so one attribute does both. The final draw needs its own
+  // UVs — it puts the BOX back, out of a texture that holds the box plus the
+  // kernel's reach — so it is a separate, streamed buffer.
+  const blurVao = gl.createVertexArray();
+  gl.bindVertexArray(blurVao);
+  const blurQuadBuf = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, blurQuadBuf);
+  gl.bufferData(gl.ARRAY_BUFFER, quad, gl.STATIC_DRAW);
+  gl.enableVertexAttribArray(built.blurCornerLoc);
+  gl.vertexAttribPointer(built.blurCornerLoc, 2, gl.FLOAT, false, 0, 0);
+
+  // ONE TRIANGLE COVERING THE SCREEN, for every effect pass this frame draws:
+  // three vertices instead of six, no seam down a diagonal for `fwidth` to trip
+  // over, and made once rather than per pass — the version that made a buffer
+  // inside the post-pass allocated one on every rippling frame.
+  const fxQuadBuf = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, fxQuadBuf);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+
+  const backdropVao = gl.createVertexArray();
+  gl.bindVertexArray(backdropVao);
+  const backdropBuf = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, backdropBuf);
+  // x, y in clip space, then u, v into the padded texture, then the 0..1
+  // corner the rounding is measured from — six floats a vertex.
+  gl.enableVertexAttribArray(built.backdropPosLoc);
+  gl.vertexAttribPointer(built.backdropPosLoc, 2, gl.FLOAT, false, 24, 0);
+  gl.enableVertexAttribArray(built.backdropUVLoc);
+  gl.vertexAttribPointer(built.backdropUVLoc, 2, gl.FLOAT, false, 24, 8);
+  gl.enableVertexAttribArray(built.backdropCornerLoc);
+  gl.vertexAttribPointer(built.backdropCornerLoc, 2, gl.FLOAT, false, 24, 16);
+
+  gl.bindVertexArray(vao);
+
+  // Attribute locations and buffers are set up once; a run re-points the
+  // per-instance attributes at its own first instance, which is how the base
+  // instance WebGL 2 does not have is emulated.
+  const cornerBuf = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, cornerBuf);
+  gl.bufferData(gl.ARRAY_BUFFER, quad, gl.STATIC_DRAW);
+  const cornerLoc = built.cornerLoc;
+  gl.enableVertexAttribArray(cornerLoc);
+  gl.vertexAttribPointer(cornerLoc, 2, gl.FLOAT, false, 0, 0);
+  gl.vertexAttribDivisor(cornerLoc, 0);
+
+  const instanced = [
+    { name: "aRect", data: rects, size: 4 },
+    { name: "aColor", data: colors, size: 4 },
+    { name: "aColor2", data: colors2, size: 4 },
+    { name: "aGrad", data: grads, size: 1 },
+    { name: "aShape", data: shapes, size: 3 },
+    { name: "aRadii", data: radii, size: 4 },
+    { name: "aUV", data: uvs, size: 4 },
+    { name: "aRot", data: rots, size: 1 },
+    { name: "aOrigin", data: origins, size: 3 },
+  ];
+  for (const a of instanced) {
+    a.buf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, a.buf);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(a.data), gl.STATIC_DRAW);
+    a.loc = gl.getAttribLocation(prog, a.name);
+    if (a.loc < 0) continue;
+    gl.enableVertexAttribArray(a.loc);
+    gl.vertexAttribDivisor(a.loc, 1);
+  }
+  const pointAt = (first) => {
+    for (const a of instanced) {
+      if (a.loc < 0) continue;
+      gl.bindBuffer(gl.ARRAY_BUFFER, a.buf);
+      gl.vertexAttribPointer(a.loc, a.size, gl.FLOAT, false, 0, first * a.size * 4);
+    }
+  };
+
+  // The path pipeline: its own program (compiled with the other one, above),
+  // its own buffer, one draw per path.
+  const pathProg = built.pathProg;
+  const pathVao = gl.createVertexArray();
+  gl.bindVertexArray(pathVao);
+  const pathBuf = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, pathBuf);
+  const pathPosLoc = built.pathPosLoc;
+  gl.enableVertexAttribArray(pathPosLoc);
+  gl.vertexAttribPointer(pathPosLoc, 2, gl.FLOAT, false, 0, 0);
+  const pathPageLoc = built.pathPageLoc;
+  const pathColorLoc = built.pathColorLoc;
+  gl.bindVertexArray(vao);
+
+  // What the layers had moved by when this frame was built. Those moves are
+  // in the coordinates above already; `draw` applies only what came after.
+  const baseShifts = (doc.list.shifts || []).map((s) => [s[0], s[1]]);
+
+  const frame = {
+    doc,
+    dispose() {
+      for (const a of instanced) gl.deleteBuffer(a.buf);
+      gl.deleteBuffer(cornerBuf);
+      gl.deleteBuffer(blurQuadBuf);
+      gl.deleteBuffer(fxQuadBuf);
+      gl.deleteBuffer(backdropBuf);
+      gl.deleteBuffer(pathBuf);
+      gl.deleteVertexArray(vao);
+      gl.deleteVertexArray(blurVao);
+      gl.deleteVertexArray(backdropVao);
+      gl.deleteVertexArray(pathVao);
+    },
+  };
+
+  // What the build made, reported by the first draw and not again: a frame
+  // drawn a second time added nothing to the atlas and uploaded nothing.
+  let fresh = true;
+  // The camera this frame was BUILT at — the one the list carried. A draw
+  // that names no view of its own uses it, which is every caller that had no
+  // camera and every frame drawn the moment it was built.
+  frame.view = viewOfDoc;
+  // `shiftsNow` first, not the view, because every host that exists already
+  // calls `draw(shifts)` and a second argument does not move the first.
+  //
+  // `opts.clear === false` draws ON TOP of what is already there instead of
+  // starting from an empty canvas. A page with two frames — a document built
+  // once and a caret built every blink — needs the second one to keep the
+  // first: the clear below is unconditional otherwise, so the caret frame
+  // erased the document and the canvas came out with a caret on it and nothing
+  // else.
+  frame.draw = (shiftsNow, viewNow, drawOpts) => {
+  const clearFirst = !(drawOpts && drawOpts.clear === false);
+  const madeNow = fresh;
+  fresh = false;
+  // The camera in force for THIS draw, as the shaders take it.
+  const view = viewVec(viewNow === undefined || viewNow === null ? viewOfDoc : viewNow);
+  const vsx = view[0], vsy = view[1], vtx = view[2], vty = view[3];
+  // The move a layer has made since this frame was built: what the shaders
+  // add. A frame drawn as it was built, or a run outside any layer, adds 0.
+  const shiftOf = (l) => {
+    if (!l) return ZERO_SHIFT;
+    const now = (shiftsNow && shiftsNow[l - 1]) || baseShifts[l - 1] || ZERO_SHIFT;
+    const base = baseShifts[l - 1] || ZERO_SHIFT;
+    return [now[0] - base[0], now[1] - base[1]];
+  };
+  let curShift = ZERO_SHIFT;
+
+  gl.useProgram(prog);
+  gl.bindVertexArray(vao);
+  gl.uniform2f(built.uPage, doc.width, doc.height);
+  gl.uniform2f(built.uShift, 0, 0);
+  gl.uniform4f(built.uView, vsx, vsy, vtx, vty);
+  gl.uniform1f(built.uSnap, dpr);
+  gl.uniform1i(built.uAtlas, 0);
+  gl.uniform1i(built.uImage, 1);
+
+  // A LIVE SURFACE EFFECT redirects the whole frame into a texture first. It
+  // is live only while it is still moving: an effect declared in the sheet but
+  // with no touch behind it (`t` below zero) costs a comparison and nothing
+  // else, which is what lets a page carry the declaration all the time.
+  const fx = doc.list.effect;
+  // Live while ANY drop still has something left in it. The application
+  // retires them, so in practice this is "are there any"; the decay test
+  // stays as the renderer's own guard against being asked to draw nothing.
+  const rippling = !!fx && fx.kind === "ripple" && fx.drops && fx.drops.length > 0 &&
+    fx.drops.some((d) => Math.exp(-d[2] * fx.decay) > 0.004);
+  // AND THE ELEMENT-SCOPED FILTERS with something to do. An instance is live
+  // when it has events in flight or when the sheet said `always` — a filter
+  // declared and idle costs the test below and nothing else, which is what
+  // lets a page carry the declaration all the time.
+  const fxLive = (inst) => !inst.off && ((inst.events && inst.events.length > 0) ||
+    /\balways\b/.test(inst.on || ""));
+  const fxPasses = fxFilters.filter(fxLive);
+  // A BACKDROP READS THE SURFACE MID-FRAME, and the one surface it must never
+  // read is the canvas — see `fxCopyOfSurface`. So a frame with a live one in
+  // it goes offscreen too, and is presented at the end.
+  const fxBackdrops = fxBackdropRuns.some((r) => !r.inst.off);
+  // Every pass reads the finished surface, so the frame is drawn into a
+  // texture first — once, however many passes there are.
+  let target = (rippling || fxPasses.length > 0 || fxBackdrops)
+    ? rippleTargetFor(gl, gl.canvas.width, gl.canvas.height)
+    : null;
+  // An incomplete target draws the page without the effect rather than
+  // drawing nothing, which is the same choice the missing-stencil branch
+  // makes about path fills: say what could not be done, do the rest.
+  if (target && !target.complete) target = null;
+  if (target) gl.bindFramebuffer(gl.FRAMEBUFFER, target.fbo);
+
+  // THE ATLAS IS BOUND HERE, AFTER THE TARGET, AND THE ORDER IS THE WHOLE
+  // POINT. Creating the target's texture leaves it bound to the active unit,
+  // which is this one — so binding the atlas first meant the frame drew with
+  // the render target itself in the sampler the glyphs and images read. A
+  // texture sampled while it is attached to the framebuffer being drawn into
+  // is a feedback loop, and the spec says the result is undefined: this
+  // driver dropped every textured draw. The page came out with its paths on
+  // it and NOTHING else — no card, no letter — which reads as "the effect
+  // broke the renderer" and is really one line of state in the wrong order.
+  gl.activeTexture(gl.TEXTURE0);
+  gl.bindTexture(gl.TEXTURE_2D, atlas);
+
+  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+  gl.disable(gl.DEPTH_TEST);
+  gl.enable(gl.BLEND);
+  gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+  if (clearFirst) {
+    gl.clearColor(0, 0, 0, 0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+  }
+
+  const hasStencil = gl.getContextAttributes().stencil === true;
+  let paths = 0, skippedFills = 0;
+
+  // The two stops and the box they run across, or nothing. Set on every path
+  // draw, not only the gradient ones: the uniform is program state and a
+  // flat path after a shaded one would otherwise keep the ramp.
+  const setPathPaint = (op, color) => {
+    gl.uniform4f(pathColorLoc, color[0], color[1], color[2], color[3]);
+    if (op && op.grad) {
+      const c2 = op.color2 || color;
+      const [x0, y0, x1, y1] = op.bounds || [0, 0, 1, 1];
+      gl.uniform4f(built.pathColor2Loc, c2[0], c2[1], c2[2], c2[3]);
+      gl.uniform4f(built.pathBoxLoc, x0, y0, x1 - x0, y1 - y0);
+      gl.uniform1f(built.pathGradLoc, op.grad);
+    } else {
+      gl.uniform1f(built.pathGradLoc, 0);
+    }
+  };
+
+  const drawTris = (verts, color, op) => {
+    gl.bindVertexArray(pathVao);
+    gl.useProgram(pathProg);
+    gl.uniform2f(pathPageLoc, doc.width, doc.height);
+    gl.uniform2f(built.pathShiftLoc, curShift[0], curShift[1]);
+    gl.uniform4f(built.pathViewLoc, vsx, vsy, vtx, vty);
+    setPathPaint(op, color);
+    gl.bindBuffer(gl.ARRAY_BUFFER, pathBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, verts, gl.STREAM_DRAW);
+    gl.drawArrays(gl.TRIANGLES, 0, verts.length / 2);
+  };
+
+  /**
+   * Stencil-then-cover. Every ring goes into the stencil as a fan; the rule
+   * decides which counts survive; then one quad over the bounding box paints
+   * them and zeroes the stencil on its way out, so no clear is needed between
+   * paths.
+   */
+  const drawFill = (op) => {
+    if (!hasStencil) { skippedFills += 1; return; }
+    gl.bindVertexArray(pathVao);
+    gl.useProgram(pathProg);
+    gl.uniform2f(pathPageLoc, doc.width, doc.height);
+    // THE LAYER'S SHIFT, which `drawTris` has always set and this did not.
+    // A kept frame is moved by this uniform rather than rebuilt, so a filled
+    // path went on being drawn where it was when the frame was built while
+    // the strokes and the boxes around it moved: on the diary's charts the
+    // area under the curve lagged the curve by a whole scroll. It applies to
+    // both draws below — the rings into the stencil and the quad that covers
+    // them — because it is one uniform on `pathProg`.
+    gl.uniform2f(built.pathShiftLoc, curShift[0], curShift[1]);
+    gl.uniform4f(built.pathViewLoc, vsx, vsy, vtx, vty);
+    gl.bindBuffer(gl.ARRAY_BUFFER, pathBuf);
+
+    gl.enable(gl.STENCIL_TEST);
+    gl.colorMask(false, false, false, false);
+    gl.stencilFunc(gl.ALWAYS, 0, 0xff);
+    if (op.evenOdd) {
+      gl.stencilMask(0x01);
+      gl.stencilOp(gl.KEEP, gl.KEEP, gl.INVERT);
+    } else {
+      gl.stencilMask(0xff);
+      // A ring's winding decides the sign, which is what "non-zero" counts.
+      gl.stencilOpSeparate(gl.FRONT, gl.KEEP, gl.KEEP, gl.INCR_WRAP);
+      gl.stencilOpSeparate(gl.BACK, gl.KEEP, gl.KEEP, gl.DECR_WRAP);
+    }
+    for (const ring of op.rings) {
+      gl.bufferData(gl.ARRAY_BUFFER, ring, gl.STREAM_DRAW);
+      gl.drawArrays(gl.TRIANGLE_FAN, 0, ring.length / 2);
+    }
+
+    gl.colorMask(true, true, true, true);
+    gl.stencilFunc(gl.NOTEQUAL, 0, op.evenOdd ? 0x01 : 0xff);
+    gl.stencilOp(gl.KEEP, gl.KEEP, gl.ZERO);
+    setPathPaint(op, op.color);
+    const [x0, y0, x1, y1] = op.bounds;
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+      x0, y0, x1, y0, x1, y1,
+      x0, y0, x1, y1, x0, y1,
+    ]), gl.STREAM_DRAW);
+    gl.drawArrays(gl.TRIANGLES, 0, 6);
+
+    gl.stencilMask(0xff);
+    gl.disable(gl.STENCIL_TEST);
+  };
+
+  // A clip rectangle in page coordinates becomes a scissor box in framebuffer
+  // pixels, which are scaled by the device ratio and measured from the BOTTOM.
+  const sxScale = gl.canvas.width / doc.width;
+  const syScale = gl.canvas.height / doc.height;
+  let scissorOn = false;
+  const applyClip = (list) => {
+    if (!list) {
+      if (scissorOn) { gl.disable(gl.SCISSOR_TEST); scissorOn = false; }
+      return;
+    }
+    if (!scissorOn) { gl.enable(gl.SCISSOR_TEST); scissorOn = true; }
+    let r = null;
+    for (const c of list) {
+      const sh = shiftOf(c.layer);
+      const b = { x: c.x + sh[0], y: c.y + sh[1], w: c.w, h: c.h };
+      if (!r) { r = b; continue; }
+      const x0 = Math.max(r.x, b.x), y0 = Math.max(r.y, b.y);
+      const x1 = Math.min(r.x + r.w, b.x + b.w), y1 = Math.min(r.y + r.h, b.y + b.h);
+      r = { x: x0, y: y0, w: Math.max(0, x1 - x0), h: Math.max(0, y1 - y0) };
+    }
+    // Through the camera and then into framebuffer pixels. A clip is scene
+    // geometry like everything else in the list, and a scissor is not a thing
+    // the shader can apply — so this is the one place the view is multiplied
+    // by hand rather than by the card.
+    const px = r.x * vsx + vtx;
+    const py = r.y * vsy + vty;
+    const pw = r.w * vsx;
+    const ph = r.h * vsy;
+    const x = Math.round(px * sxScale);
+    const y = Math.round((doc.height - (py + ph)) * syScale);
+    const w = Math.max(0, Math.round(pw * sxScale));
+    const h = Math.max(0, Math.round(ph * syScale));
+    gl.scissor(x, y, w, h);
+  };
+
+  // One blurred backdrop: copy what is behind, soften it, put it back.
+  //
+  // The copy is the element's box GROWN by the kernel's reach, because the
+  // browser samples past the edge — see the note on BLUR_FRAG. Only the last
+  // step clips to the box, and it does so with the same rounded distance field
+  // the solid shapes use.
+  let backdrops = 0;
+  const drawBackdrop = (c) => {
+    // The softening grows with the picture: a blur that stayed the same
+    // number of pixels while the box doubled is a different blur.
+    const sigma = c.bb * dpr * vsx;
+    // The element's box in framebuffer pixels, measured from the bottom the
+    // way GL counts — through the camera first, as the scissor is.
+    const bx = Math.round(((c.x + curShift[0]) * vsx + vtx) * sxScale);
+    const by = Math.round((doc.height - ((c.y + curShift[1] + c.h) * vsy + vty)) * syScale);
+    const bw = Math.max(1, Math.round(c.w * vsx * sxScale));
+    const bh = Math.max(1, Math.round(c.h * vsy * syScale));
+    // EXACTLY the box, and no padding. What a browser blurs is the rectangle
+    // under the element with its edges clamped, not the page around it — see
+    // the note on BLUR_FRAG, where getting this wrong is the mistake a flat
+    // backdrop cannot show you.
+    const rx = Math.max(0, Math.min(bx, gl.canvas.width - 1));
+    const ry = Math.max(0, Math.min(by, gl.canvas.height - 1));
+    const rw = Math.min(gl.canvas.width - rx, bw);
+    const rh = Math.min(gl.canvas.height - ry, bh);
+    if (rw <= 0 || rh <= 0) return;
+
+    const t = blurTargetsFor(gl, rw, rh);
+    // Straight off the framebuffer being drawn into. This is the one read
+    // that has to happen mid-frame, and it is why a blur breaks the batch.
+    gl.bindTexture(gl.TEXTURE_2D, t.src);
+    gl.copyTexImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, rx, ry, rw, rh, 0);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+
+    const wasScissor = gl.isEnabled(gl.SCISSOR_TEST);
+    gl.disable(gl.SCISSOR_TEST);
+    gl.disable(gl.BLEND);
+    gl.useProgram(built.blurProg);
+    gl.bindVertexArray(blurVao);
+    gl.uniform1i(built.blurSrc, 0);
+    gl.activeTexture(gl.TEXTURE0);
+
+    // Six passes, three each way, ping-ponging between the two targets. The
+    // texture the region was copied into is only the first pass's input.
+    const boxes = boxesForSigma(sigma);
+    let srcTex = t.src, dst = 0;
+    for (const axis of [[1 / t.w, 0], [0, 1 / t.h]]) {
+      for (const box of boxes) {
+        gl.bindFramebuffer(gl.FRAMEBUFFER, t.fbo[dst]);
+        gl.viewport(0, 0, t.w, t.h);
+        gl.bindTexture(gl.TEXTURE_2D, srcTex);
+        gl.uniform2f(built.blurStep, axis[0], axis[1]);
+        gl.uniform1f(built.blurWidth, box.w);
+        gl.uniform1f(built.blurOffset, box.off);
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        srcTex = t.tex[dst];
+        dst = 1 - dst;
+      }
+    }
+
+    // And back onto the page, clipped to the element's rounded box. The quad
+    // is the BOX, not the grown region, so the padding's only job was to keep
+    // the edges honest.
+    //
+    // Back onto THE FRAME'S OWN TARGET, which is the screen only when no
+    // surface effect is running: a dialog on a rippling page would otherwise
+    // put its softened backdrop straight on the canvas, under everything the
+    // post-pass is about to draw over it.
+    gl.bindFramebuffer(gl.FRAMEBUFFER, target ? target.fbo : null);
+    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+    gl.enable(gl.BLEND);
+    gl.useProgram(built.backdropProg);
+    gl.bindVertexArray(backdropVao);
+    // The quad covers the box, the copy IS the box, and the target is exactly
+    // the copy — so the UVs are the whole texture.
+    const u0 = 0, v0 = 0, u1 = 1, v1 = 1;
+    const x0 = (bx / gl.canvas.width) * 2 - 1, y0 = (by / gl.canvas.height) * 2 - 1;
+    const x1 = ((bx + bw) / gl.canvas.width) * 2 - 1;
+    const y1 = ((by + bh) / gl.canvas.height) * 2 - 1;
+    gl.bindBuffer(gl.ARRAY_BUFFER, backdropBuf);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+      x0, y0, u0, v0, 0, 0,
+      x1, y0, u1, v0, 1, 0,
+      x0, y1, u0, v1, 0, 1,
+      x1, y1, u1, v1, 1, 1,
+    ]), gl.STREAM_DRAW);
+    gl.bindTexture(gl.TEXTURE_2D, srcTex);
+    gl.uniform1i(built.backdropSrc, 0);
+    gl.uniform2f(built.backdropHalf, bw / 2, bh / 2);
+    gl.uniform1f(built.backdropRadius, (c.r || 0) * sxScale);
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+
+    // Put the state back the way the batch expects to find it. TEXTURE0 is the
+    // glyph atlas for the whole frame and this has just been using it for its
+    // own textures — leave it bound to the blur and every letter drawn after a
+    // dialog samples that instead of the atlas, comes back with alpha 1
+    // everywhere, and renders as a solid black rectangle the size of the word.
+    // Which is exactly what the first dialog screenshot showed, in every run
+    // on the page.
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, atlas);
+    if (wasScissor) gl.enable(gl.SCISSOR_TEST);
+    backdrops += 1;
+  };
+
+  // ONE EFFECT, drawn through its plugin.
+  //
+  // `srcTex` is the finished surface a filter reads, and null for a source —
+  // which has nothing to read, because it is being drawn in the middle of the
+  // frame that would become it. `shift` is what the scroll layer the effect
+  // sits in has moved by since this frame was built.
+  //
+  // THE BOX AND THE EVENTS ARE MOVED INTO THE SPACE THE FRAGMENT COMPUTES IN.
+  // A fragment's page point comes off the fullscreen triangle as vUV * uRes,
+  // which is the page AS THE CAMERA LEFT IT; the box and the events are in
+  // page coordinates as the layout and the pointer left them. On every page
+  // without a camera — which is every page that is not a canvas — the two are
+  // the same and this is the identity.
+  let fxDrawn = 0;
+  const fxEvents = new Float32Array(24);
+  // `shift` DEFAULTS TO THE LAYER'S, which is what a source effect drawn in the
+  // middle of the run loop wants: it is painted where its element is now, and
+  // its element moves with the scroll like everything else in that layer. The
+  // post-pass below passes ZERO_SHIFT instead, because by then the shift is in
+  // the texture already and applying it again would move the effect twice.
+  const drawFxPass = (inst, srcTex, shift = curShift) => {
+    const plug = fxProgramFor(gl, inst.kind);
+    if (!plug) return false;
+    const box = inst.box || [0, 0, doc.width, doc.height];
+    gl.useProgram(plug.prog);
+    gl.bindVertexArray(null);
+    gl.bindBuffer(gl.ARRAY_BUFFER, fxQuadBuf);
+    gl.enableVertexAttribArray(plug.posLoc);
+    gl.vertexAttribPointer(plug.posLoc, 2, gl.FLOAT, false, 0, 0);
+    gl.uniform2f(plug.uRes, doc.width, doc.height);
+    gl.uniform4f(plug.uBox,
+      (box[0] + shift[0]) * vsx + vtx, (box[1] + shift[1]) * vsy + vty,
+      box[2] * vsx, box[3] * vsy);
+    if (plug.uRadius) gl.uniform1f(plug.uRadius, (inst.r || 0) * vsx);
+    if (plug.uTime) gl.uniform1f(plug.uTime, inst.time || 0);
+    if (plug.uEvents) {
+      const list = inst.events || [];
+      const n = Math.min(8, list.length);
+      for (let i = 0; i < n; i++) {
+        const e = list[i];
+        fxEvents[i * 3] = (e[0] + shift[0]) * vsx + vtx;
+        fxEvents[i * 3 + 1] = (e[1] + shift[1]) * vsy + vty;
+        fxEvents[i * 3 + 2] = e[2];
+      }
+      // A slot past the count is never read, but leaving last frame's numbers
+      // in it is the kind of thing that shows up as one stuck ring on a driver
+      // that unrolls the loop.
+      for (let i = n; i < 8; i++) { fxEvents[i * 3] = 0; fxEvents[i * 3 + 1] = 0; fxEvents[i * 3 + 2] = -1; }
+      gl.uniform3fv(plug.uEvents, fxEvents);
+      gl.uniform1i(plug.uEventCount, n);
+    }
+    // WHAT THE SHEET WROTE, AND THE PLUGIN'S DEFAULT WHERE IT WROTE NOTHING.
+    // The default is the plugin's own, so an effect can gain a parameter
+    // without every document that uses it having to learn about it.
+    const wrote = inst.p || {};
+    for (const k in plug.params) {
+      const loc = plug.params[k];
+      if (!loc) continue;
+      const v = wrote[k];
+      gl.uniform1f(loc, typeof v === "number" ? v : plug.def.params[k]);
+    }
+    if (plug.uSrc && srcTex) {
+      gl.activeTexture(gl.TEXTURE0);
+      gl.bindTexture(gl.TEXTURE_2D, srcTex);
+      gl.uniform1i(plug.uSrc, 0);
+    }
+    gl.drawArrays(gl.TRIANGLES, 0, 3);
+    fxDrawn += 1;
+    // TEXTURE0 is the glyph atlas for the rest of the frame — the same trap
+    // `drawBackdrop` documents above, and the same one line that avoids it.
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, atlas);
+    return true;
+  };
+
+  for (const run of runs) {
+    curShift = shiftOf(run.layer);
+    applyClip(run.clip);
+    if (run.kind === "backdrop") { drawBackdrop(run.cmd); continue; }
+    // A SOURCE EFFECT, at the element's own background, under everything the
+    // element contains — and a BACKDROP, which reads the surface as it stands
+    // at that same point and writes it back refracted. The copy is the whole
+    // canvas and the pass covers the whole canvas, so what is outside the box
+    // is written back exactly as it arrived; blending is off, because the pass
+    // REPLACES those pixels rather than adding to them.
+    if (run.kind === "fx") {
+      // TURNED OFF BY THE HOST, and therefore free: no program, no copy, no
+      // pass. A page with a switch for its effects — or one honouring reduced
+      // motion, or a battery saver — sets this on the instance rather than
+      // rebuilding the frame without it, which would mean uploading every
+      // buffer again to stop drawing one shader.
+      if (run.inst.off) continue;
+      if (run.backdrop) {
+        // No target means the frame is going straight to the canvas, which is
+        // the one surface a backdrop may not copy. Draw the page without the
+        // effect rather than draw it wrong: same choice as an incomplete
+        // target and a plugin that would not compile.
+        if (!target) continue;
+        const behind = fxCopyOfSurface(gl, gl.canvas.width, gl.canvas.height);
+        gl.disable(gl.BLEND);
+        drawFxPass(run.inst, behind);
+        gl.enable(gl.BLEND);
+      } else {
+        drawFxPass(run.inst, null);
+      }
+      continue;
+    }
+    if (run.kind === "fill") { drawFill(run); paths += 1; continue; }
+    if (run.kind === "tris") { drawTris(run.verts, run.color, run); paths += 1; continue; }
+    gl.useProgram(prog);
+    gl.bindVertexArray(vao);
+    gl.uniform2f(built.uShift, curShift[0], curShift[1]);
+    if (run.tex) {
+      gl.activeTexture(gl.TEXTURE1);
+      gl.bindTexture(gl.TEXTURE_2D, run.tex);
+    }
+    pointAt(run.start);
+    gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, run.count);
+  }
+  applyClip(null);
+
+  // THE SECOND PASS, and the third if the page asked for one. Everything above
+  // drew into a texture; each filter reads that texture and writes another,
+  // and the last one writes the screen.
+  //
+  // No blending anywhere in here: the texture already holds the finished
+  // surface and compositing it again would darken its own edges against
+  // itself. No scissor either — a filter's region is its box, which the
+  // plugin's own mask applies, and a clip left over from the last run would
+  // cut it.
+  if (target) {
+    // The whole-surface effect first, if there is one, then the element-scoped
+    // filters in the order the document declares them. `null` stands for the
+    // old one: it has its own program, its own uniforms and no box, and it
+    // stays that way so that every page and every gate written against it
+    // draws exactly what it drew before.
+    let passes = [];
+    if (rippling) passes.push(null);
+    for (const inst of fxPasses) passes.push(inst);
+    // A frame that went offscreen only so a backdrop could read it has no
+    // filter to finish with: `undefined` is that pass, and it copies the
+    // target to the screen unchanged.
+    if (passes.length === 0) passes.push(undefined);
+
+    // Ping-pong needs a second target. If it cannot be had, draw the LAST pass
+    // only rather than nothing: an effect missing is a picture, an incomplete
+    // framebuffer is a black page.
+    let spare = passes.length > 1
+      ? rippleTargetFor(gl, gl.canvas.width, gl.canvas.height, 1)
+      : null;
+    if (spare && !spare.complete) { spare = null; passes = passes.slice(-1); }
+
+    const drawLegacyRipple = (srcTex) => {
+      gl.useProgram(built.rippleProg);
+      gl.bindBuffer(gl.ARRAY_BUFFER, fxQuadBuf);
+      gl.enableVertexAttribArray(built.ripplePosLoc);
+      gl.vertexAttribPointer(built.ripplePosLoc, 2, gl.FLOAT, false, 0, 0);
+      gl.activeTexture(gl.TEXTURE0);
+      gl.bindTexture(gl.TEXTURE_2D, srcTex);
+      gl.uniform1i(built.rippleSrc, 0);
+      // In PAGE pixels, which is the space the drop was recorded in — the
+      // texture is in device pixels and the shader never has to know.
+      gl.uniform2f(built.rippleRes, doc.width, doc.height);
+      // Flattened to (x, y, age) triples, oldest first — the order is the
+      // application's and the shader does not care, because addition does not.
+      const drops = new Float32Array(24);
+      const n = Math.min(8, fx.drops.length);
+      for (let i = 0; i < n; i++) {
+        drops[i * 3] = fx.drops[i][0];
+        drops[i * 3 + 1] = fx.drops[i][1];
+        drops[i * 3 + 2] = fx.drops[i][2];
+      }
+      gl.uniform3fv(built.rippleDrops, drops);
+      gl.uniform1i(built.rippleCount, n);
+      gl.uniform1f(built.rippleSpeed, fx.speed);
+      gl.uniform1f(built.rippleWidth, fx.width);
+      gl.uniform1f(built.rippleStrength, fx.strength);
+      gl.uniform1f(built.rippleDecay, fx.decay);
+      gl.uniform1f(built.rippleHi, fx.highlight);
+      gl.uniform1i(built.rippleRings, Math.max(1, Math.min(5, Math.round(fx.rings || 1))));
+      gl.uniform1f(built.rippleStagger, fx.stagger || 0);
+      gl.uniform1f(built.rippleFalloff, fx.falloff || 0);
+      gl.uniform1f(built.rippleShine, fx.shine || 0);
+      // Never zero: pow(x, 0) is 1 everywhere and the whole page turns white.
+      gl.uniform1f(built.rippleGloss, Math.max(1, fx.gloss || 1));
+      gl.uniform1f(built.rippleBump, fx.bump || 0);
+      const L = fx.light || [0, 0, 1];
+      gl.uniform3f(built.rippleLight, L[0], L[1], L[2]);
+      gl.drawArrays(gl.TRIANGLES, 0, 3);
+    };
+
+    gl.bindVertexArray(null);
+    gl.disable(gl.BLEND);
+    gl.disable(gl.SCISSOR_TEST);
+    let srcTex = target.tex;
+    for (let i = 0; i < passes.length; i++) {
+      const dest = i === passes.length - 1 ? null : (srcTex === spare.tex ? target : spare);
+      gl.bindFramebuffer(gl.FRAMEBUFFER, dest ? dest.fbo : null);
+      gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+      gl.clearColor(0, 0, 0, 0);
+      gl.clear(gl.COLOR_BUFFER_BIT);
+      // Drawn with no camera and no shift: the surface in the texture is
+      // already where the camera put it.
+      if (passes[i] === null) drawLegacyRipple(srcTex);
+      else if (passes[i] === undefined) {
+        gl.useProgram(built.presentProg);
+        gl.bindBuffer(gl.ARRAY_BUFFER, fxQuadBuf);
+        gl.enableVertexAttribArray(built.presentPosLoc);
+        gl.vertexAttribPointer(built.presentPosLoc, 2, gl.FLOAT, false, 0, 0);
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, srcTex);
+        gl.uniform1i(built.presentSrc, 0);
+        gl.drawArrays(gl.TRIANGLES, 0, 3);
+      } else drawFxPass(passes[i], srcTex, ZERO_SHIFT);
+      srcTex = dest ? dest.tex : null;
+    }
+    gl.enable(gl.BLEND);
+  }
+
+  return {
+    drawn: count, textRuns: slots.size, images: drawnImages, missingImages,
+    runs: runs.length, paths,
+    // What this frame had to make rather than reuse. Both should be 0 on a
+    // frame that draws what the last one drew.
+    atlasRebuilt: (madeNow && atlasRebuilt) ? 1 : 0, texturesUploaded: madeNow ? texturesUploaded : 0,
+    // The runs this frame was the first to show, rasterized and uploaded on
+    // their own. A scroll frame that brought no new row in reports 0.
+    atlasAdded: madeNow ? atlasAdded : 0,
+    // Whether this draw built its buffers or drew the ones it had.
+    frameBuilt: madeNow ? 1 : 0,
+    // A context without a stencil buffer cannot fill a path; say so rather than
+    // drawing a chart with no bars in it.
+    skippedFills,
+    // How many backdrops were softened. Each one is a framebuffer read and six
+    // passes, so this is the number to look at when a frame with a dialog on
+    // it costs more than one without.
+    backdrops,
+    // Whether this frame went through a surface effect. 0 on every frame of
+    // every page that is not rippling, which is nearly all of them.
+    rippled: target ? 1 : 0,
+    // How many element-scoped effect passes this frame drew — sources in paint
+    // order and filters over the finished surface, together. 0 on a page that
+    // declares none, which is still nearly all of them.
+    fxDrawn,
+  };
+  };
+  return frame;
+}
+
+const ZERO_SHIFT = [0, 0];