diff --git a/.agents/skills/impeccable/scripts/live-browser.js b/.agents/skills/impeccable/scripts/live-browser.js
index 028363916..f1e525786 100644
--- a/.agents/skills/impeccable/scripts/live-browser.js
+++ b/.agents/skills/impeccable/scripts/live-browser.js
@@ -5209,9 +5209,11 @@
     return '#ffffff';
   }
 
-  // Capture the element (with current annotations baked in) and return a PNG
-  // Blob. Shared between the Go flow (uploads it to the server) and the
-  // debug toggle (displays it as an overlay for side-by-side comparison).
+  // Capture the element (with current annotations baked in) and return
+  // { blob, paper }: the PNG Blob, plus the representative backdrop tone for the
+  // shader's halftone ground (so capture, upload, and shader all agree on what
+  // sits behind the element). Shared between the Go flow (uploads the blob) and
+  // the shader-resume path.
   async function captureElementToBlob(el, snapshot, rect) {
     try { if (document.fonts?.ready) await document.fonts.ready; } catch {}
     const hasAnnotations = snapshot && (snapshot.comments.length > 0 || snapshot.strokes.length > 0);
@@ -5229,12 +5231,46 @@
     try {
       const ms = await loadModernScreenshot();
       const fontCssText = await collectFontCssText();
-      const backgroundColor = resolveCanvasBackground(el);
-      return await ms.domToBlob(el, {
+      const opts = {
         scale: Math.min(window.devicePixelRatio || 1, 2),
         font: fontCssText ? { cssText: fontCssText } : undefined,
-        ...(backgroundColor ? { backgroundColor } : {}),
-      });
+      };
+      const bg = resolveCanvasBackground(el);
+      // Fast path: the element paints its own background, or an opaque ancestor
+      // color was found. modern-screenshot bakes that color; paper matches it.
+      if (bg !== '#ffffff') {
+        const blob = await ms.domToBlob(el, { ...opts, ...(bg ? { backgroundColor: bg } : {}) });
+        return { blob, paper: bg ? cssColorToRgb01(bg) : resolvePaperRgb(el) };
+      }
+      // Transparent up to the root. The visible backdrop may still come from an
+      // ancestor's background-image or a covering positioned layer (e.g. a hero
+      // art div) that the color walk can't see. Capture that ancestor and crop
+      // to the element so the real backdrop is embedded — correct for both the
+      // shader and the screenshot sent to the model. Fall back to white only
+      // when nothing is actually painted behind the element.
+      const backdrop = findBackdropAncestor(el);
+      if (!backdrop) {
+        const blob = await ms.domToBlob(el, { ...opts, backgroundColor: '#ffffff' });
+        return { blob, paper: SHADER_PAPER_FALLBACK };
+      }
+      const ancestorCanvas = await ms.domToCanvas(backdrop, opts);
+      const S = opts.scale;
+      const er = el.getBoundingClientRect();
+      const ar = backdrop.getBoundingClientRect();
+      const sx = (er.left - ar.left) * S, sy = (er.top - ar.top) * S;
+      const sw = er.width * S, sh = er.height * S;
+      const crop = document.createElement('canvas');
+      crop.width = Math.max(1, Math.round(sw));
+      crop.height = Math.max(1, Math.round(sh));
+      const cctx = crop.getContext('2d', { willReadFrequently: true });
+      cctx.drawImage(ancestorCanvas, sx, sy, sw, sh, 0, 0, crop.width, crop.height);
+      // Ground = backdrop sampled around the element, falling back to the crop
+      // mean only if the surround is fully transparent.
+      const actx = ancestorCanvas.getContext('2d', { willReadFrequently: true });
+      const paper = sampleSurroundingRgb(actx, sx, sy, sw, sh, ancestorCanvas.width, ancestorCanvas.height)
+        || averageRgb01(cctx, crop.width, crop.height);
+      const blob = await new Promise((res) => crop.toBlob(res, 'image/png'));
+      return { blob, paper };
     } finally {
       if (annotNode) annotNode.remove();
       if (savedPosition !== null) el.style.position = savedPosition;
@@ -5244,15 +5280,16 @@
   async function captureAndEmit(el, basePayload, snapshot, rect) {
     let screenshotPath;
     let blob;
+    let paper;
     try {
-      blob = await captureElementToBlob(el, snapshot, rect);
+      ({ blob, paper } = await captureElementToBlob(el, snapshot, rect));
     } catch (err) {
       console.warn('[impeccable] capture failed, proceeding without screenshot:', err);
     }
     // Light up the shader overlay the moment capture is ready — no reason to
     // wait for the upload to complete before the user sees something alive.
     if (blob && state === 'GENERATING') {
-      showShaderOverlay(el, blob, rect);
+      showShaderOverlay(el, blob, rect, paper);
     }
     // Only upload + forward the screenshot when annotations (comments/strokes)
     // are present. Without annotations the image is pure visual anchoring —
@@ -5300,6 +5337,7 @@ uniform sampler2D u_texture;
 uniform float u_time;
 uniform vec2 u_resolution;
 uniform vec3 u_accent;
+uniform vec3 u_paper;
 varying vec2 v_uv;
 
 // Asymmetric roller band. Product of two one-sided smoothsteps — peaks at
@@ -5327,23 +5365,139 @@ void main() {
   vec2 cellUv = fract(gridUv) - 0.5;
   vec2 sampleCenter = (cellId + 0.5) * cellPx / u_resolution;
   vec3 cellImg = texture2D(u_texture, sampleCenter).rgb;
-  float luma = dot(cellImg, vec3(0.299, 0.587, 0.114));
-  // Darker cells → bigger kinpaku dots (classic risograph halftone curve).
-  float radius = sqrt(clamp(1.0 - luma, 0.0, 1.0)) * 0.56;
+  // Dot size tracks how much the cell DIFFERS from the element's own ground
+  // (u_paper), not absolute darkness. So the content — text, buttons, anything
+  // that deviates from the background — always becomes the dots, on light AND
+  // dark surfaces. A plain darkness curve inverts on dark elements: the dark
+  // background fills with ink and the lighter content punches holes instead.
+  // Capped below the cell half-width so dense content stays separated dots.
+  float contrast = clamp(length(cellImg - u_paper) / 1.732, 0.0, 1.0);
+  float radius = min(sqrt(contrast) * 0.6, 0.38);
   float dotMask = smoothstep(radius + 0.06, radius, length(cellUv));
-  vec3 paper = vec3(0.975, 0.965, 0.955);
-  vec3 dotLayer = mix(paper, u_accent, dotMask);
-
-  // Blend the halftone layer in where the roller is passing; leave the
-  // element pristine elsewhere.
-  vec3 base = texture2D(u_texture, uv).rgb;
-  gl_FragColor = vec4(mix(base, dotLayer, band), 1.0);
+  // Two-stage dissolve as the roller passes, so the element is rebuilt purely
+  // from dot size (its own halftone) and never bleeds through as raw pixels
+  // behind the dots:
+  //   1. cover  — the element flattens to the uniform paper ground first.
+  //   2. dotAmt — kinpaku dots then emerge, sized by each cell's luma.
+  // A plain mix(base, halftone, band) instead left the raw element visible
+  // through the band's soft core/trail. The paper ground is u_paper (the
+  // element's own bg tone) rather than a fixed white, so the dissolve reads the
+  // same over light and dark surfaces.
+  vec4 tex = texture2D(u_texture, uv);
+  vec3 base = tex.rgb;
+  float cover = smoothstep(0.0, 0.35, band);
+  float dotAmt = dotMask * smoothstep(0.15, 0.6, band);
+  vec3 ground = mix(base, u_paper, cover);
+  // Carry the capture's own alpha through, so a rounded corner or any genuinely
+  // transparent region stays transparent (the live backdrop shows through the
+  // canvas) instead of rendering as solid black.
+  gl_FragColor = vec4(mix(ground, u_accent, dotAmt), tex.a);
 }`;
 
   // Kinpaku gold converted to approximate sRGB 0-1 (matches oklch(84% 0.19 80.46))
   const SHADER_ACCENT = [1.0, 0.78, 0.31];
+  // Fallback ground when an element and all its ancestors are transparent —
+  // matches the original off-white risograph paper.
+  const SHADER_PAPER_FALLBACK = [0.975, 0.965, 0.955];
   let shaderState = null; // { canvas, gl, program, texture, rafId, startTime }
 
+  // The element's effective background tone, used as the uniform halftone
+  // ground so content dissolves into dots over it. Unlike resolveCanvasBackground
+  // (which returns null when the element paints its own bg), this always returns
+  // a usable color: the element's own background if any, else the nearest opaque
+  // ancestor, else the paper fallback.
+  // Rasterize any CSS color (oklch, color(), named, hex, rgb) through a 1x1
+  // canvas and read back the sRGB pixel. String-parsing computed colors is a
+  // trap: Chrome returns backgroundColor as oklch()/color() for oklch inputs,
+  // which a hex/rgb regex misses — every site token would fall back to white.
+  let colorParseCtx = null;
+  function cssColorToRgb01(str) {
+    if (!colorParseCtx) {
+      colorParseCtx = document.createElement('canvas').getContext('2d', { willReadFrequently: true });
+    }
+    // Clear first: the ctx is cached across calls, so a semi-transparent color
+    // would otherwise blend (source-over) with the previous call's leftover
+    // pixel, making the result depend on call history.
+    colorParseCtx.clearRect(0, 0, 1, 1);
+    colorParseCtx.fillStyle = '#000'; // invalid input leaves this default
+    colorParseCtx.fillStyle = str;
+    colorParseCtx.fillRect(0, 0, 1, 1);
+    const d = colorParseCtx.getImageData(0, 0, 1, 1).data;
+    return [d[0] / 255, d[1] / 255, d[2] / 255];
+  }
+  function resolvePaperRgb(el) {
+    let node = el;
+    while (node) {
+      const bg = getComputedStyle(node).backgroundColor;
+      if (!isTransparentColor(bg)) return cssColorToRgb01(bg);
+      node = node.parentElement;
+    }
+    return SHADER_PAPER_FALLBACK;
+  }
+
+  // When an element is transparent up to the root, its visible backdrop can
+  // still come from an ancestor's background-image or a covering positioned
+  // layer that is a *child* of an ancestor (e.g. a hero's absolute art div) —
+  // neither of which the ancestor background-COLOR walk can see. Return the
+  // nearest such ancestor so we can capture it and crop, embedding the real
+  // backdrop. Returns null when nothing is actually painted behind the element
+  // (genuinely transparent → white is correct).
+  function paintsBackdrop(node) {
+    const s = getComputedStyle(node);
+    if (s.backgroundImage && s.backgroundImage !== 'none') return true;
+    const nr = node.getBoundingClientRect();
+    for (const child of node.children) {
+      const ccs = getComputedStyle(child);
+      if (ccs.position !== 'absolute' && ccs.position !== 'fixed') continue;
+      const paints = !isTransparentColor(ccs.backgroundColor)
+        || (ccs.backgroundImage && ccs.backgroundImage !== 'none');
+      if (!paints) continue;
+      const cr = child.getBoundingClientRect();
+      if (cr.width >= nr.width * 0.9 && cr.height >= nr.height * 0.9) return true;
+    }
+    return false;
+  }
+  function findBackdropAncestor(el) {
+    let node = el.parentElement;
+    while (node && node !== node.ownerDocument.documentElement) {
+      if (paintsBackdrop(node)) return node;
+      node = node.parentElement;
+    }
+    return null;
+  }
+
+  // Mean sRGB (0-1) of a canvas region, used as the halftone ground when the
+  // backdrop was captured from an ancestor rather than read from a CSS color.
+  function averageRgb01(ctx, w, h) {
+    const data = ctx.getImageData(0, 0, w, h).data;
+    let r = 0, g = 0, b = 0, n = 0;
+    // Stride a few pixels for speed; exact average is unnecessary for a ground.
+    for (let i = 0; i < data.length; i += 16) { r += data[i]; g += data[i + 1]; b += data[i + 2]; n++; }
+    return n ? [r / n / 255, g / n / 255, b / n / 255] : SHADER_PAPER_FALLBACK;
+  }
+
+  // Average the backdrop sampled just OUTSIDE an element's rect within a larger
+  // canvas. The ground tone for the dissolve must be the real backdrop, not the
+  // mean of the element's own crop — averaging the crop folds in the element's
+  // content (e.g. bright heading text), pulling the ground toward muddy gray.
+  function sampleSurroundingRgb(ctx, sx, sy, sw, sh, W, H) {
+    const pad = Math.max(2, Math.round(Math.min(sw, sh) * 0.12));
+    const fx = [0.2, 0.5, 0.8].map((f) => sx + sw * f);
+    const fy = [0.2, 0.5, 0.8].map((f) => sy + sh * f);
+    const pts = [];
+    for (const x of fx) { pts.push([x, sy - pad], [x, sy + sh + pad]); }
+    for (const y of fy) { pts.push([sx - pad, y], [sx + sw + pad, y]); }
+    let r = 0, g = 0, b = 0, n = 0;
+    for (const [px, py] of pts) {
+      const cx = Math.max(0, Math.min(W - 1, Math.round(px)));
+      const cy = Math.max(0, Math.min(H - 1, Math.round(py)));
+      const d = ctx.getImageData(cx, cy, 1, 1).data;
+      if (d[3] === 0) continue; // outside the ancestor's paint
+      r += d[0]; g += d[1]; b += d[2]; n++;
+    }
+    return n ? [r / n / 255, g / n / 255, b / n / 255] : null;
+  }
+
   function compileShader(gl, type, source) {
     const sh = gl.createShader(type);
     gl.shaderSource(sh, source);
@@ -5376,7 +5530,7 @@ void main() {
     shaderState = null;
   }
 
-  async function showShaderOverlay(el, blob, rect) {
+  async function showShaderOverlay(el, blob, rect, paper) {
     hideShaderOverlay();
     if (!blob || !el) return;
     const canvas = document.createElement('canvas');
@@ -5474,7 +5628,9 @@ void main() {
     const uTime = gl.getUniformLocation(program, 'u_time');
     const uRes = gl.getUniformLocation(program, 'u_resolution');
     const uAccent = gl.getUniformLocation(program, 'u_accent');
+    const uPaper = gl.getUniformLocation(program, 'u_paper');
     const uTex = gl.getUniformLocation(program, 'u_texture');
+    const paperRgb = paper || resolvePaperRgb(el);
     const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 
     shaderState = { canvas, gl, program, texture, rafId: 0, startTime: performance.now(), reduced };
@@ -5490,6 +5646,7 @@ void main() {
       gl.uniform1f(uTime, t);
       gl.uniform2f(uRes, canvas.width, canvas.height);
       gl.uniform3f(uAccent, SHADER_ACCENT[0], SHADER_ACCENT[1], SHADER_ACCENT[2]);
+      gl.uniform3f(uPaper, paperRgb[0], paperRgb[1], paperRgb[2]);
       gl.drawArrays(gl.TRIANGLES, 0, 6);
       shaderState.rafId = requestAnimationFrame(frame);
     }
@@ -5792,9 +5949,9 @@ void main() {
           try {
             const rect = shaderTarget.getBoundingClientRect();
             if (rect.width === 0 || rect.height === 0) return;
-            const blob = await captureElementToBlob(shaderTarget, null, rect);
+            const { blob, paper } = await captureElementToBlob(shaderTarget, null, rect);
             if (blob && state === 'GENERATING') {
-              showShaderOverlay(shaderTarget, blob, rect);
+              showShaderOverlay(shaderTarget, blob, rect, paper);
             }
           } catch (err) {
             console.warn('[impeccable] shader resume failed:', err);
diff --git a/.claude/skills/impeccable/scripts/live-browser.js b/.claude/skills/impeccable/scripts/live-browser.js
index 028363916..f1e525786 100644
--- a/.claude/skills/impeccable/scripts/live-browser.js
+++ b/.claude/skills/impeccable/scripts/live-browser.js
@@ -5209,9 +5209,11 @@
     return '#ffffff';
   }
 
-  // Capture the element (with current annotations baked in) and return a PNG
-  // Blob. Shared between the Go flow (uploads it to the server) and the
-  // debug toggle (displays it as an overlay for side-by-side comparison).
+  // Capture the element (with current annotations baked in) and return
+  // { blob, paper }: the PNG Blob, plus the representative backdrop tone for the
+  // shader's halftone ground (so capture, upload, and shader all agree on what
+  // sits behind the element). Shared between the Go flow (uploads the blob) and
+  // the shader-resume path.
   async function captureElementToBlob(el, snapshot, rect) {
     try { if (document.fonts?.ready) await document.fonts.ready; } catch {}
     const hasAnnotations = snapshot && (snapshot.comments.length > 0 || snapshot.strokes.length > 0);
@@ -5229,12 +5231,46 @@
     try {
       const ms = await loadModernScreenshot();
       const fontCssText = await collectFontCssText();
-      const backgroundColor = resolveCanvasBackground(el);
-      return await ms.domToBlob(el, {
+      const opts = {
         scale: Math.min(window.devicePixelRatio || 1, 2),
         font: fontCssText ? { cssText: fontCssText } : undefined,
-        ...(backgroundColor ? { backgroundColor } : {}),
-      });
+      };
+      const bg = resolveCanvasBackground(el);
+      // Fast path: the element paints its own background, or an opaque ancestor
+      // color was found. modern-screenshot bakes that color; paper matches it.
+      if (bg !== '#ffffff') {
+        const blob = await ms.domToBlob(el, { ...opts, ...(bg ? { backgroundColor: bg } : {}) });
+        return { blob, paper: bg ? cssColorToRgb01(bg) : resolvePaperRgb(el) };
+      }
+      // Transparent up to the root. The visible backdrop may still come from an
+      // ancestor's background-image or a covering positioned layer (e.g. a hero
+      // art div) that the color walk can't see. Capture that ancestor and crop
+      // to the element so the real backdrop is embedded — correct for both the
+      // shader and the screenshot sent to the model. Fall back to white only
+      // when nothing is actually painted behind the element.
+      const backdrop = findBackdropAncestor(el);
+      if (!backdrop) {
+        const blob = await ms.domToBlob(el, { ...opts, backgroundColor: '#ffffff' });
+        return { blob, paper: SHADER_PAPER_FALLBACK };
+      }
+      const ancestorCanvas = await ms.domToCanvas(backdrop, opts);
+      const S = opts.scale;
+      const er = el.getBoundingClientRect();
+      const ar = backdrop.getBoundingClientRect();
+      const sx = (er.left - ar.left) * S, sy = (er.top - ar.top) * S;
+      const sw = er.width * S, sh = er.height * S;
+      const crop = document.createElement('canvas');
+      crop.width = Math.max(1, Math.round(sw));
+      crop.height = Math.max(1, Math.round(sh));
+      const cctx = crop.getContext('2d', { willReadFrequently: true });
+      cctx.drawImage(ancestorCanvas, sx, sy, sw, sh, 0, 0, crop.width, crop.height);
+      // Ground = backdrop sampled around the element, falling back to the crop
+      // mean only if the surround is fully transparent.
+      const actx = ancestorCanvas.getContext('2d', { willReadFrequently: true });
+      const paper = sampleSurroundingRgb(actx, sx, sy, sw, sh, ancestorCanvas.width, ancestorCanvas.height)
+        || averageRgb01(cctx, crop.width, crop.height);
+      const blob = await new Promise((res) => crop.toBlob(res, 'image/png'));
+      return { blob, paper };
     } finally {
       if (annotNode) annotNode.remove();
       if (savedPosition !== null) el.style.position = savedPosition;
@@ -5244,15 +5280,16 @@
   async function captureAndEmit(el, basePayload, snapshot, rect) {
     let screenshotPath;
     let blob;
+    let paper;
     try {
-      blob = await captureElementToBlob(el, snapshot, rect);
+      ({ blob, paper } = await captureElementToBlob(el, snapshot, rect));
     } catch (err) {
       console.warn('[impeccable] capture failed, proceeding without screenshot:', err);
     }
     // Light up the shader overlay the moment capture is ready — no reason to
     // wait for the upload to complete before the user sees something alive.
     if (blob && state === 'GENERATING') {
-      showShaderOverlay(el, blob, rect);
+      showShaderOverlay(el, blob, rect, paper);
     }
     // Only upload + forward the screenshot when annotations (comments/strokes)
     // are present. Without annotations the image is pure visual anchoring —
@@ -5300,6 +5337,7 @@ uniform sampler2D u_texture;
 uniform float u_time;
 uniform vec2 u_resolution;
 uniform vec3 u_accent;
+uniform vec3 u_paper;
 varying vec2 v_uv;
 
 // Asymmetric roller band. Product of two one-sided smoothsteps — peaks at
@@ -5327,23 +5365,139 @@ void main() {
   vec2 cellUv = fract(gridUv) - 0.5;
   vec2 sampleCenter = (cellId + 0.5) * cellPx / u_resolution;
   vec3 cellImg = texture2D(u_texture, sampleCenter).rgb;
-  float luma = dot(cellImg, vec3(0.299, 0.587, 0.114));
-  // Darker cells → bigger kinpaku dots (classic risograph halftone curve).
-  float radius = sqrt(clamp(1.0 - luma, 0.0, 1.0)) * 0.56;
+  // Dot size tracks how much the cell DIFFERS from the element's own ground
+  // (u_paper), not absolute darkness. So the content — text, buttons, anything
+  // that deviates from the background — always becomes the dots, on light AND
+  // dark surfaces. A plain darkness curve inverts on dark elements: the dark
+  // background fills with ink and the lighter content punches holes instead.
+  // Capped below the cell half-width so dense content stays separated dots.
+  float contrast = clamp(length(cellImg - u_paper) / 1.732, 0.0, 1.0);
+  float radius = min(sqrt(contrast) * 0.6, 0.38);
   float dotMask = smoothstep(radius + 0.06, radius, length(cellUv));
-  vec3 paper = vec3(0.975, 0.965, 0.955);
-  vec3 dotLayer = mix(paper, u_accent, dotMask);
-
-  // Blend the halftone layer in where the roller is passing; leave the
-  // element pristine elsewhere.
-  vec3 base = texture2D(u_texture, uv).rgb;
-  gl_FragColor = vec4(mix(base, dotLayer, band), 1.0);
+  // Two-stage dissolve as the roller passes, so the element is rebuilt purely
+  // from dot size (its own halftone) and never bleeds through as raw pixels
+  // behind the dots:
+  //   1. cover  — the element flattens to the uniform paper ground first.
+  //   2. dotAmt — kinpaku dots then emerge, sized by each cell's luma.
+  // A plain mix(base, halftone, band) instead left the raw element visible
+  // through the band's soft core/trail. The paper ground is u_paper (the
+  // element's own bg tone) rather than a fixed white, so the dissolve reads the
+  // same over light and dark surfaces.
+  vec4 tex = texture2D(u_texture, uv);
+  vec3 base = tex.rgb;
+  float cover = smoothstep(0.0, 0.35, band);
+  float dotAmt = dotMask * smoothstep(0.15, 0.6, band);
+  vec3 ground = mix(base, u_paper, cover);
+  // Carry the capture's own alpha through, so a rounded corner or any genuinely
+  // transparent region stays transparent (the live backdrop shows through the
+  // canvas) instead of rendering as solid black.
+  gl_FragColor = vec4(mix(ground, u_accent, dotAmt), tex.a);
 }`;
 
   // Kinpaku gold converted to approximate sRGB 0-1 (matches oklch(84% 0.19 80.46))
   const SHADER_ACCENT = [1.0, 0.78, 0.31];
+  // Fallback ground when an element and all its ancestors are transparent —
+  // matches the original off-white risograph paper.
+  const SHADER_PAPER_FALLBACK = [0.975, 0.965, 0.955];
   let shaderState = null; // { canvas, gl, program, texture, rafId, startTime }
 
+  // The element's effective background tone, used as the uniform halftone
+  // ground so content dissolves into dots over it. Unlike resolveCanvasBackground
+  // (which returns null when the element paints its own bg), this always returns
+  // a usable color: the element's own background if any, else the nearest opaque
+  // ancestor, else the paper fallback.
+  // Rasterize any CSS color (oklch, color(), named, hex, rgb) through a 1x1
+  // canvas and read back the sRGB pixel. String-parsing computed colors is a
+  // trap: Chrome returns backgroundColor as oklch()/color() for oklch inputs,
+  // which a hex/rgb regex misses — every site token would fall back to white.
+  let colorParseCtx = null;
+  function cssColorToRgb01(str) {
+    if (!colorParseCtx) {
+      colorParseCtx = document.createElement('canvas').getContext('2d', { willReadFrequently: true });
+    }
+    // Clear first: the ctx is cached across calls, so a semi-transparent color
+    // would otherwise blend (source-over) with the previous call's leftover
+    // pixel, making the result depend on call history.
+    colorParseCtx.clearRect(0, 0, 1, 1);
+    colorParseCtx.fillStyle = '#000'; // invalid input leaves this default
+    colorParseCtx.fillStyle = str;
+    colorParseCtx.fillRect(0, 0, 1, 1);
+    const d = colorParseCtx.getImageData(0, 0, 1, 1).data;
+    return [d[0] / 255, d[1] / 255, d[2] / 255];
+  }
+  function resolvePaperRgb(el) {
+    let node = el;
+    while (node) {
+      const bg = getComputedStyle(node).backgroundColor;
+      if (!isTransparentColor(bg)) return cssColorToRgb01(bg);
+      node = node.parentElement;
+    }
+    return SHADER_PAPER_FALLBACK;
+  }
+
+  // When an element is transparent up to the root, its visible backdrop can
+  // still come from an ancestor's background-image or a covering positioned
+  // layer that is a *child* of an ancestor (e.g. a hero's absolute art div) —
+  // neither of which the ancestor background-COLOR walk can see. Return the
+  // nearest such ancestor so we can capture it and crop, embedding the real
+  // backdrop. Returns null when nothing is actually painted behind the element
+  // (genuinely transparent → white is correct).
+  function paintsBackdrop(node) {
+    const s = getComputedStyle(node);
+    if (s.backgroundImage && s.backgroundImage !== 'none') return true;
+    const nr = node.getBoundingClientRect();
+    for (const child of node.children) {
+      const ccs = getComputedStyle(child);
+      if (ccs.position !== 'absolute' && ccs.position !== 'fixed') continue;
+      const paints = !isTransparentColor(ccs.backgroundColor)
+        || (ccs.backgroundImage && ccs.backgroundImage !== 'none');
+      if (!paints) continue;
+      const cr = child.getBoundingClientRect();
+      if (cr.width >= nr.width * 0.9 && cr.height >= nr.height * 0.9) return true;
+    }
+    return false;
+  }
+  function findBackdropAncestor(el) {
+    let node = el.parentElement;
+    while (node && node !== node.ownerDocument.documentElement) {
+      if (paintsBackdrop(node)) return node;
+      node = node.parentElement;
+    }
+    return null;
+  }
+
+  // Mean sRGB (0-1) of a canvas region, used as the halftone ground when the
+  // backdrop was captured from an ancestor rather than read from a CSS color.
+  function averageRgb01(ctx, w, h) {
+    const data = ctx.getImageData(0, 0, w, h).data;
+    let r = 0, g = 0, b = 0, n = 0;
+    // Stride a few pixels for speed; exact average is unnecessary for a ground.
+    for (let i = 0; i < data.length; i += 16) { r += data[i]; g += data[i + 1]; b += data[i + 2]; n++; }
+    return n ? [r / n / 255, g / n / 255, b / n / 255] : SHADER_PAPER_FALLBACK;
+  }
+
+  // Average the backdrop sampled just OUTSIDE an element's rect within a larger
+  // canvas. The ground tone for the dissolve must be the real backdrop, not the
+  // mean of the element's own crop — averaging the crop folds in the element's
+  // content (e.g. bright heading text), pulling the ground toward muddy gray.
+  function sampleSurroundingRgb(ctx, sx, sy, sw, sh, W, H) {
+    const pad = Math.max(2, Math.round(Math.min(sw, sh) * 0.12));
+    const fx = [0.2, 0.5, 0.8].map((f) => sx + sw * f);
+    const fy = [0.2, 0.5, 0.8].map((f) => sy + sh * f);
+    const pts = [];
+    for (const x of fx) { pts.push([x, sy - pad], [x, sy + sh + pad]); }
+    for (const y of fy) { pts.push([sx - pad, y], [sx + sw + pad, y]); }
+    let r = 0, g = 0, b = 0, n = 0;
+    for (const [px, py] of pts) {
+      const cx = Math.max(0, Math.min(W - 1, Math.round(px)));
+      const cy = Math.max(0, Math.min(H - 1, Math.round(py)));
+      const d = ctx.getImageData(cx, cy, 1, 1).data;
+      if (d[3] === 0) continue; // outside the ancestor's paint
+      r += d[0]; g += d[1]; b += d[2]; n++;
+    }
+    return n ? [r / n / 255, g / n / 255, b / n / 255] : null;
+  }
+
   function compileShader(gl, type, source) {
     const sh = gl.createShader(type);
     gl.shaderSource(sh, source);
@@ -5376,7 +5530,7 @@ void main() {
     shaderState = null;
   }
 
-  async function showShaderOverlay(el, blob, rect) {
+  async function showShaderOverlay(el, blob, rect, paper) {
     hideShaderOverlay();
     if (!blob || !el) return;
     const canvas = document.createElement('canvas');
@@ -5474,7 +5628,9 @@ void main() {
     const uTime = gl.getUniformLocation(program, 'u_time');
     const uRes = gl.getUniformLocation(program, 'u_resolution');
     const uAccent = gl.getUniformLocation(program, 'u_accent');
+    const uPaper = gl.getUniformLocation(program, 'u_paper');
     const uTex = gl.getUniformLocation(program, 'u_texture');
+    const paperRgb = paper || resolvePaperRgb(el);
     const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 
     shaderState = { canvas, gl, program, texture, rafId: 0, startTime: performance.now(), reduced };
@@ -5490,6 +5646,7 @@ void main() {
       gl.uniform1f(uTime, t);
       gl.uniform2f(uRes, canvas.width, canvas.height);
       gl.uniform3f(uAccent, SHADER_ACCENT[0], SHADER_ACCENT[1], SHADER_ACCENT[2]);
+      gl.uniform3f(uPaper, paperRgb[0], paperRgb[1], paperRgb[2]);
       gl.drawArrays(gl.TRIANGLES, 0, 6);
       shaderState.rafId = requestAnimationFrame(frame);
     }
@@ -5792,9 +5949,9 @@ void main() {
           try {
             const rect = shaderTarget.getBoundingClientRect();
             if (rect.width === 0 || rect.height === 0) return;
-            const blob = await captureElementToBlob(shaderTarget, null, rect);
+            const { blob, paper } = await captureElementToBlob(shaderTarget, null, rect);
             if (blob && state === 'GENERATING') {
-              showShaderOverlay(shaderTarget, blob, rect);
+              showShaderOverlay(shaderTarget, blob, rect, paper);
             }
           } catch (err) {
             console.warn('[impeccable] shader resume failed:', err);
diff --git a/.cursor/skills/impeccable/scripts/live-browser.js b/.cursor/skills/impeccable/scripts/live-browser.js
index 028363916..f1e525786 100644
--- a/.cursor/skills/impeccable/scripts/live-browser.js
+++ b/.cursor/skills/impeccable/scripts/live-browser.js
@@ -5209,9 +5209,11 @@
     return '#ffffff';
   }
 
-  // Capture the element (with current annotations baked in) and return a PNG
-  // Blob. Shared between the Go flow (uploads it to the server) and the
-  // debug toggle (displays it as an overlay for side-by-side comparison).
+  // Capture the element (with current annotations baked in) and return
+  // { blob, paper }: the PNG Blob, plus the representative backdrop tone for the
+  // shader's halftone ground (so capture, upload, and shader all agree on what
+  // sits behind the element). Shared between the Go flow (uploads the blob) and
+  // the shader-resume path.
   async function captureElementToBlob(el, snapshot, rect) {
     try { if (document.fonts?.ready) await document.fonts.ready; } catch {}
     const hasAnnotations = snapshot && (snapshot.comments.length > 0 || snapshot.strokes.length > 0);
@@ -5229,12 +5231,46 @@
     try {
       const ms = await loadModernScreenshot();
       const fontCssText = await collectFontCssText();
-      const backgroundColor = resolveCanvasBackground(el);
-      return await ms.domToBlob(el, {
+      const opts = {
         scale: Math.min(window.devicePixelRatio || 1, 2),
         font: fontCssText ? { cssText: fontCssText } : undefined,
-        ...(backgroundColor ? { backgroundColor } : {}),
-      });
+      };
+      const bg = resolveCanvasBackground(el);
+      // Fast path: the element paints its own background, or an opaque ancestor
+      // color was found. modern-screenshot bakes that color; paper matches it.
+      if (bg !== '#ffffff') {
+        const blob = await ms.domToBlob(el, { ...opts, ...(bg ? { backgroundColor: bg } : {}) });
+        return { blob, paper: bg ? cssColorToRgb01(bg) : resolvePaperRgb(el) };
+      }
+      // Transparent up to the root. The visible backdrop may still come from an
+      // ancestor's background-image or a covering positioned layer (e.g. a hero
+      // art div) that the color walk can't see. Capture that ancestor and crop
+      // to the element so the real backdrop is embedded — correct for both the
+      // shader and the screenshot sent to the model. Fall back to white only
+      // when nothing is actually painted behind the element.
+      const backdrop = findBackdropAncestor(el);
+      if (!backdrop) {
+        const blob = await ms.domToBlob(el, { ...opts, backgroundColor: '#ffffff' });
+        return { blob, paper: SHADER_PAPER_FALLBACK };
+      }
+      const ancestorCanvas = await ms.domToCanvas(backdrop, opts);
+      const S = opts.scale;
+      const er = el.getBoundingClientRect();
+      const ar = backdrop.getBoundingClientRect();
+      const sx = (er.left - ar.left) * S, sy = (er.top - ar.top) * S;
+      const sw = er.width * S, sh = er.height * S;
+      const crop = document.createElement('canvas');
+      crop.width = Math.max(1, Math.round(sw));
+      crop.height = Math.max(1, Math.round(sh));
+      const cctx = crop.getContext('2d', { willReadFrequently: true });
+      cctx.drawImage(ancestorCanvas, sx, sy, sw, sh, 0, 0, crop.width, crop.height);
+      // Ground = backdrop sampled around the element, falling back to the crop
+      // mean only if the surround is fully transparent.
+      const actx = ancestorCanvas.getContext('2d', { willReadFrequently: true });
+      const paper = sampleSurroundingRgb(actx, sx, sy, sw, sh, ancestorCanvas.width, ancestorCanvas.height)
+        || averageRgb01(cctx, crop.width, crop.height);
+      const blob = await new Promise((res) => crop.toBlob(res, 'image/png'));
+      return { blob, paper };
     } finally {
       if (annotNode) annotNode.remove();
       if (savedPosition !== null) el.style.position = savedPosition;
@@ -5244,15 +5280,16 @@
   async function captureAndEmit(el, basePayload, snapshot, rect) {
     let screenshotPath;
     let blob;
+    let paper;
     try {
-      blob = await captureElementToBlob(el, snapshot, rect);
+      ({ blob, paper } = await captureElementToBlob(el, snapshot, rect));
     } catch (err) {
       console.warn('[impeccable] capture failed, proceeding without screenshot:', err);
     }
     // Light up the shader overlay the moment capture is ready — no reason to
     // wait for the upload to complete before the user sees something alive.
     if (blob && state === 'GENERATING') {
-      showShaderOverlay(el, blob, rect);
+      showShaderOverlay(el, blob, rect, paper);
     }
     // Only upload + forward the screenshot when annotations (comments/strokes)
     // are present. Without annotations the image is pure visual anchoring —
@@ -5300,6 +5337,7 @@ uniform sampler2D u_texture;
 uniform float u_time;
 uniform vec2 u_resolution;
 uniform vec3 u_accent;
+uniform vec3 u_paper;
 varying vec2 v_uv;
 
 // Asymmetric roller band. Product of two one-sided smoothsteps — peaks at
@@ -5327,23 +5365,139 @@ void main() {
   vec2 cellUv = fract(gridUv) - 0.5;
   vec2 sampleCenter = (cellId + 0.5) * cellPx / u_resolution;
   vec3 cellImg = texture2D(u_texture, sampleCenter).rgb;
-  float luma = dot(cellImg, vec3(0.299, 0.587, 0.114));
-  // Darker cells → bigger kinpaku dots (classic risograph halftone curve).
-  float radius = sqrt(clamp(1.0 - luma, 0.0, 1.0)) * 0.56;
+  // Dot size tracks how much the cell DIFFERS from the element's own ground
+  // (u_paper), not absolute darkness. So the content — text, buttons, anything
+  // that deviates from the background — always becomes the dots, on light AND
+  // dark surfaces. A plain darkness curve inverts on dark elements: the dark
+  // background fills with ink and the lighter content punches holes instead.
+  // Capped below the cell half-width so dense content stays separated dots.
+  float contrast = clamp(length(cellImg - u_paper) / 1.732, 0.0, 1.0);
+  float radius = min(sqrt(contrast) * 0.6, 0.38);
   float dotMask = smoothstep(radius + 0.06, radius, length(cellUv));
-  vec3 paper = vec3(0.975, 0.965, 0.955);
-  vec3 dotLayer = mix(paper, u_accent, dotMask);
-
-  // Blend the halftone layer in where the roller is passing; leave the
-  // element pristine elsewhere.
-  vec3 base = texture2D(u_texture, uv).rgb;
-  gl_FragColor = vec4(mix(base, dotLayer, band), 1.0);
+  // Two-stage dissolve as the roller passes, so the element is rebuilt purely
+  // from dot size (its own halftone) and never bleeds through as raw pixels
+  // behind the dots:
+  //   1. cover  — the element flattens to the uniform paper ground first.
+  //   2. dotAmt — kinpaku dots then emerge, sized by each cell's luma.
+  // A plain mix(base, halftone, band) instead left the raw element visible
+  // through the band's soft core/trail. The paper ground is u_paper (the
+  // element's own bg tone) rather than a fixed white, so the dissolve reads the
+  // same over light and dark surfaces.
+  vec4 tex = texture2D(u_texture, uv);
+  vec3 base = tex.rgb;
+  float cover = smoothstep(0.0, 0.35, band);
+  float dotAmt = dotMask * smoothstep(0.15, 0.6, band);
+  vec3 ground = mix(base, u_paper, cover);
+  // Carry the capture's own alpha through, so a rounded corner or any genuinely
+  // transparent region stays transparent (the live backdrop shows through the
+  // canvas) instead of rendering as solid black.
+  gl_FragColor = vec4(mix(ground, u_accent, dotAmt), tex.a);
 }`;
 
   // Kinpaku gold converted to approximate sRGB 0-1 (matches oklch(84% 0.19 80.46))
   const SHADER_ACCENT = [1.0, 0.78, 0.31];
+  // Fallback ground when an element and all its ancestors are transparent —
+  // matches the original off-white risograph paper.
+  const SHADER_PAPER_FALLBACK = [0.975, 0.965, 0.955];
   let shaderState = null; // { canvas, gl, program, texture, rafId, startTime }
 
+  // The element's effective background tone, used as the uniform halftone
+  // ground so content dissolves into dots over it. Unlike resolveCanvasBackground
+  // (which returns null when the element paints its own bg), this always returns
+  // a usable color: the element's own background if any, else the nearest opaque
+  // ancestor, else the paper fallback.
+  // Rasterize any CSS color (oklch, color(), named, hex, rgb) through a 1x1
+  // canvas and read back the sRGB pixel. String-parsing computed colors is a
+  // trap: Chrome returns backgroundColor as oklch()/color() for oklch inputs,
+  // which a hex/rgb regex misses — every site token would fall back to white.
+  let colorParseCtx = null;
+  function cssColorToRgb01(str) {
+    if (!colorParseCtx) {
+      colorParseCtx = document.createElement('canvas').getContext('2d', { willReadFrequently: true });
+    }
+    // Clear first: the ctx is cached across calls, so a semi-transparent color
+    // would otherwise blend (source-over) with the previous call's leftover
+    // pixel, making the result depend on call history.
+    colorParseCtx.clearRect(0, 0, 1, 1);
+    colorParseCtx.fillStyle = '#000'; // invalid input leaves this default
+    colorParseCtx.fillStyle = str;
+    colorParseCtx.fillRect(0, 0, 1, 1);
+    const d = colorParseCtx.getImageData(0, 0, 1, 1).data;
+    return [d[0] / 255, d[1] / 255, d[2] / 255];
+  }
+  function resolvePaperRgb(el) {
+    let node = el;
+    while (node) {
+      const bg = getComputedStyle(node).backgroundColor;
+      if (!isTransparentColor(bg)) return cssColorToRgb01(bg);
+      node = node.parentElement;
+    }
+    return SHADER_PAPER_FALLBACK;
+  }
+
+  // When an element is transparent up to the root, its visible backdrop can
+  // still come from an ancestor's background-image or a covering positioned
+  // layer that is a *child* of an ancestor (e.g. a hero's absolute art div) —
+  // neither of which the ancestor background-COLOR walk can see. Return the
+  // nearest such ancestor so we can capture it and crop, embedding the real
+  // backdrop. Returns null when nothing is actually painted behind the element
+  // (genuinely transparent → white is correct).
+  function paintsBackdrop(node) {
+    const s = getComputedStyle(node);
+    if (s.backgroundImage && s.backgroundImage !== 'none') return true;
+    const nr = node.getBoundingClientRect();
+    for (const child of node.children) {
+      const ccs = getComputedStyle(child);
+      if (ccs.position !== 'absolute' && ccs.position !== 'fixed') continue;
+      const paints = !isTransparentColor(ccs.backgroundColor)
+        || (ccs.backgroundImage && ccs.backgroundImage !== 'none');
+      if (!paints) continue;
+      const cr = child.getBoundingClientRect();
+      if (cr.width >= nr.width * 0.9 && cr.height >= nr.height * 0.9) return true;
+    }
+    return false;
+  }
+  function findBackdropAncestor(el) {
+    let node = el.parentElement;
+    while (node && node !== node.ownerDocument.documentElement) {
+      if (paintsBackdrop(node)) return node;
+      node = node.parentElement;
+    }
+    return null;
+  }
+
+  // Mean sRGB (0-1) of a canvas region, used as the halftone ground when the
+  // backdrop was captured from an ancestor rather than read from a CSS color.
+  function averageRgb01(ctx, w, h) {
+    const data = ctx.getImageData(0, 0, w, h).data;
+    let r = 0, g = 0, b = 0, n = 0;
+    // Stride a few pixels for speed; exact average is unnecessary for a ground.
+    for (let i = 0; i < data.length; i += 16) { r += data[i]; g += data[i + 1]; b += data[i + 2]; n++; }
+    return n ? [r / n / 255, g / n / 255, b / n / 255] : SHADER_PAPER_FALLBACK;
+  }
+
+  // Average the backdrop sampled just OUTSIDE an element's rect within a larger
+  // canvas. The ground tone for the dissolve must be the real backdrop, not the
+  // mean of the element's own crop — averaging the crop folds in the element's
+  // content (e.g. bright heading text), pulling the ground toward muddy gray.
+  function sampleSurroundingRgb(ctx, sx, sy, sw, sh, W, H) {
+    const pad = Math.max(2, Math.round(Math.min(sw, sh) * 0.12));
+    const fx = [0.2, 0.5, 0.8].map((f) => sx + sw * f);
+    const fy = [0.2, 0.5, 0.8].map((f) => sy + sh * f);
+    const pts = [];
+    for (const x of fx) { pts.push([x, sy - pad], [x, sy + sh + pad]); }
+    for (const y of fy) { pts.push([sx - pad, y], [sx + sw + pad, y]); }
+    let r = 0, g = 0, b = 0, n = 0;
+    for (const [px, py] of pts) {
+      const cx = Math.max(0, Math.min(W - 1, Math.round(px)));
+      const cy = Math.max(0, Math.min(H - 1, Math.round(py)));
+      const d = ctx.getImageData(cx, cy, 1, 1).data;
+      if (d[3] === 0) continue; // outside the ancestor's paint
+      r += d[0]; g += d[1]; b += d[2]; n++;
+    }
+    return n ? [r / n / 255, g / n / 255, b / n / 255] : null;
+  }
+
   function compileShader(gl, type, source) {
     const sh = gl.createShader(type);
     gl.shaderSource(sh, source);
@@ -5376,7 +5530,7 @@ void main() {
     shaderState = null;
   }
 
-  async function showShaderOverlay(el, blob, rect) {
+  async function showShaderOverlay(el, blob, rect, paper) {
     hideShaderOverlay();
     if (!blob || !el) return;
     const canvas = document.createElement('canvas');
@@ -5474,7 +5628,9 @@ void main() {
     const uTime = gl.getUniformLocation(program, 'u_time');
     const uRes = gl.getUniformLocation(program, 'u_resolution');
     const uAccent = gl.getUniformLocation(program, 'u_accent');
+    const uPaper = gl.getUniformLocation(program, 'u_paper');
     const uTex = gl.getUniformLocation(program, 'u_texture');
+    const paperRgb = paper || resolvePaperRgb(el);
     const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 
     shaderState = { canvas, gl, program, texture, rafId: 0, startTime: performance.now(), reduced };
@@ -5490,6 +5646,7 @@ void main() {
       gl.uniform1f(uTime, t);
       gl.uniform2f(uRes, canvas.width, canvas.height);
       gl.uniform3f(uAccent, SHADER_ACCENT[0], SHADER_ACCENT[1], SHADER_ACCENT[2]);
+      gl.uniform3f(uPaper, paperRgb[0], paperRgb[1], paperRgb[2]);
       gl.drawArrays(gl.TRIANGLES, 0, 6);
       shaderState.rafId = requestAnimationFrame(frame);
     }
@@ -5792,9 +5949,9 @@ void main() {
           try {
             const rect = shaderTarget.getBoundingClientRect();
             if (rect.width === 0 || rect.height === 0) return;
-            const blob = await captureElementToBlob(shaderTarget, null, rect);
+            const { blob, paper } = await captureElementToBlob(shaderTarget, null, rect);
             if (blob && state === 'GENERATING') {
-              showShaderOverlay(shaderTarget, blob, rect);
+              showShaderOverlay(shaderTarget, blob, rect, paper);
             }
           } catch (err) {
             console.warn('[impeccable] shader resume failed:', err);
diff --git a/.gemini/skills/impeccable/scripts/live-browser.js b/.gemini/skills/impeccable/scripts/live-browser.js
index 028363916..f1e525786 100644
--- a/.gemini/skills/impeccable/scripts/live-browser.js
+++ b/.gemini/skills/impeccable/scripts/live-browser.js
@@ -5209,9 +5209,11 @@
     return '#ffffff';
   }
 
-  // Capture the element (with current annotations baked in) and return a PNG
-  // Blob. Shared between the Go flow (uploads it to the server) and the
-  // debug toggle (displays it as an overlay for side-by-side comparison).
+  // Capture the element (with current annotations baked in) and return
+  // { blob, paper }: the PNG Blob, plus the representative backdrop tone for the
+  // shader's halftone ground (so capture, upload, and shader all agree on what
+  // sits behind the element). Shared between the Go flow (uploads the blob) and
+  // the shader-resume path.
   async function captureElementToBlob(el, snapshot, rect) {
     try { if (document.fonts?.ready) await document.fonts.ready; } catch {}
     const hasAnnotations = snapshot && (snapshot.comments.length > 0 || snapshot.strokes.length > 0);
@@ -5229,12 +5231,46 @@
     try {
       const ms = await loadModernScreenshot();
       const fontCssText = await collectFontCssText();
-      const backgroundColor = resolveCanvasBackground(el);
-      return await ms.domToBlob(el, {
+      const opts = {
         scale: Math.min(window.devicePixelRatio || 1, 2),
         font: fontCssText ? { cssText: fontCssText } : undefined,
-        ...(backgroundColor ? { backgroundColor } : {}),
-      });
+      };
+      const bg = resolveCanvasBackground(el);
+      // Fast path: the element paints its own background, or an opaque ancestor
+      // color was found. modern-screenshot bakes that color; paper matches it.
+      if (bg !== '#ffffff') {
+        const blob = await ms.domToBlob(el, { ...opts, ...(bg ? { backgroundColor: bg } : {}) });
+        return { blob, paper: bg ? cssColorToRgb01(bg) : resolvePaperRgb(el) };
+      }
+      // Transparent up to the root. The visible backdrop may still come from an
+      // ancestor's background-image or a covering positioned layer (e.g. a hero
+      // art div) that the color walk can't see. Capture that ancestor and crop
+      // to the element so the real backdrop is embedded — correct for both the
+      // shader and the screenshot sent to the model. Fall back to white only
+      // when nothing is actually painted behind the element.
+      const backdrop = findBackdropAncestor(el);
+      if (!backdrop) {
+        const blob = await ms.domToBlob(el, { ...opts, backgroundColor: '#ffffff' });
+        return { blob, paper: SHADER_PAPER_FALLBACK };
+      }
+      const ancestorCanvas = await ms.domToCanvas(backdrop, opts);
+      const S = opts.scale;
+      const er = el.getBoundingClientRect();
+      const ar = backdrop.getBoundingClientRect();
+      const sx = (er.left - ar.left) * S, sy = (er.top - ar.top) * S;
+      const sw = er.width * S, sh = er.height * S;
+      const crop = document.createElement('canvas');
+      crop.width = Math.max(1, Math.round(sw));
+      crop.height = Math.max(1, Math.round(sh));
+      const cctx = crop.getContext('2d', { willReadFrequently: true });
+      cctx.drawImage(ancestorCanvas, sx, sy, sw, sh, 0, 0, crop.width, crop.height);
+      // Ground = backdrop sampled around the element, falling back to the crop
+      // mean only if the surround is fully transparent.
+      const actx = ancestorCanvas.getContext('2d', { willReadFrequently: true });
+      const paper = sampleSurroundingRgb(actx, sx, sy, sw, sh, ancestorCanvas.width, ancestorCanvas.height)
+        || averageRgb01(cctx, crop.width, crop.height);
+      const blob = await new Promise((res) => crop.toBlob(res, 'image/png'));
+      return { blob, paper };
     } finally {
       if (annotNode) annotNode.remove();
       if (savedPosition !== null) el.style.position = savedPosition;
@@ -5244,15 +5280,16 @@
   async function captureAndEmit(el, basePayload, snapshot, rect) {
     let screenshotPath;
     let blob;
+    let paper;
     try {
-      blob = await captureElementToBlob(el, snapshot, rect);
+      ({ blob, paper } = await captureElementToBlob(el, snapshot, rect));
     } catch (err) {
       console.warn('[impeccable] capture failed, proceeding without screenshot:', err);
     }
     // Light up the shader overlay the moment capture is ready — no reason to
     // wait for the upload to complete before the user sees something alive.
     if (blob && state === 'GENERATING') {
-      showShaderOverlay(el, blob, rect);
+      showShaderOverlay(el, blob, rect, paper);
     }
     // Only upload + forward the screenshot when annotations (comments/strokes)
     // are present. Without annotations the image is pure visual anchoring —
@@ -5300,6 +5337,7 @@ uniform sampler2D u_texture;
 uniform float u_time;
 uniform vec2 u_resolution;
 uniform vec3 u_accent;
+uniform vec3 u_paper;
 varying vec2 v_uv;
 
 // Asymmetric roller band. Product of two one-sided smoothsteps — peaks at
@@ -5327,23 +5365,139 @@ void main() {
   vec2 cellUv = fract(gridUv) - 0.5;
   vec2 sampleCenter = (cellId + 0.5) * cellPx / u_resolution;
   vec3 cellImg = texture2D(u_texture, sampleCenter).rgb;
-  float luma = dot(cellImg, vec3(0.299, 0.587, 0.114));
-  // Darker cells → bigger kinpaku dots (classic risograph halftone curve).
-  float radius = sqrt(clamp(1.0 - luma, 0.0, 1.0)) * 0.56;
+  // Dot size tracks how much the cell DIFFERS from the element's own ground
+  // (u_paper), not absolute darkness. So the content — text, buttons, anything
+  // that deviates from the background — always becomes the dots, on light AND
+  // dark surfaces. A plain darkness curve inverts on dark elements: the dark
+  // background fills with ink and the lighter content punches holes instead.
+  // Capped below the cell half-width so dense content stays separated dots.
+  float contrast = clamp(length(cellImg - u_paper) / 1.732, 0.0, 1.0);
+  float radius = min(sqrt(contrast) * 0.6, 0.38);
   float dotMask = smoothstep(radius + 0.06, radius, length(cellUv));
-  vec3 paper = vec3(0.975, 0.965, 0.955);
-  vec3 dotLayer = mix(paper, u_accent, dotMask);
-
-  // Blend the halftone layer in where the roller is passing; leave the
-  // element pristine elsewhere.
-  vec3 base = texture2D(u_texture, uv).rgb;
-  gl_FragColor = vec4(mix(base, dotLayer, band), 1.0);
+  // Two-stage dissolve as the roller passes, so the element is rebuilt purely
+  // from dot size (its own halftone) and never bleeds through as raw pixels
+  // behind the dots:
+  //   1. cover  — the element flattens to the uniform paper ground first.
+  //   2. dotAmt — kinpaku dots then emerge, sized by each cell's luma.
+  // A plain mix(base, halftone, band) instead left the raw element visible
+  // through the band's soft core/trail. The paper ground is u_paper (the
+  // element's own bg tone) rather than a fixed white, so the dissolve reads the
+  // same over light and dark surfaces.
+  vec4 tex = texture2D(u_texture, uv);
+  vec3 base = tex.rgb;
+  float cover = smoothstep(0.0, 0.35, band);
+  float dotAmt = dotMask * smoothstep(0.15, 0.6, band);
+  vec3 ground = mix(base, u_paper, cover);
+  // Carry the capture's own alpha through, so a rounded corner or any genuinely
+  // transparent region stays transparent (the live backdrop shows through the
+  // canvas) instead of rendering as solid black.
+  gl_FragColor = vec4(mix(ground, u_accent, dotAmt), tex.a);
 }`;
 
   // Kinpaku gold converted to approximate sRGB 0-1 (matches oklch(84% 0.19 80.46))
   const SHADER_ACCENT = [1.0, 0.78, 0.31];
+  // Fallback ground when an element and all its ancestors are transparent —
+  // matches the original off-white risograph paper.
+  const SHADER_PAPER_FALLBACK = [0.975, 0.965, 0.955];
   let shaderState = null; // { canvas, gl, program, texture, rafId, startTime }
 
+  // The element's effective background tone, used as the uniform halftone
+  // ground so content dissolves into dots over it. Unlike resolveCanvasBackground
+  // (which returns null when the element paints its own bg), this always returns
+  // a usable color: the element's own background if any, else the nearest opaque
+  // ancestor, else the paper fallback.
+  // Rasterize any CSS color (oklch, color(), named, hex, rgb) through a 1x1
+  // canvas and read back the sRGB pixel. String-parsing computed colors is a
+  // trap: Chrome returns backgroundColor as oklch()/color() for oklch inputs,
+  // which a hex/rgb regex misses — every site token would fall back to white.
+  let colorParseCtx = null;
+  function cssColorToRgb01(str) {
+    if (!colorParseCtx) {
+      colorParseCtx = document.createElement('canvas').getContext('2d', { willReadFrequently: true });
+    }
+    // Clear first: the ctx is cached across calls, so a semi-transparent color
+    // would otherwise blend (source-over) with the previous call's leftover
+    // pixel, making the result depend on call history.
+    colorParseCtx.clearRect(0, 0, 1, 1);
+    colorParseCtx.fillStyle = '#000'; // invalid input leaves this default
+    colorParseCtx.fillStyle = str;
+    colorParseCtx.fillRect(0, 0, 1, 1);
+    const d = colorParseCtx.getImageData(0, 0, 1, 1).data;
+    return [d[0] / 255, d[1] / 255, d[2] / 255];
+  }
+  function resolvePaperRgb(el) {
+    let node = el;
+    while (node) {
+      const bg = getComputedStyle(node).backgroundColor;
+      if (!isTransparentColor(bg)) return cssColorToRgb01(bg);
+      node = node.parentElement;
+    }
+    return SHADER_PAPER_FALLBACK;
+  }
+
+  // When an element is transparent up to the root, its visible backdrop can
+  // still come from an ancestor's background-image or a covering positioned
+  // layer that is a *child* of an ancestor (e.g. a hero's absolute art div) —
+  // neither of which the ancestor background-COLOR walk can see. Return the
+  // nearest such ancestor so we can capture it and crop, embedding the real
+  // backdrop. Returns null when nothing is actually painted behind the element
+  // (genuinely transparent → white is correct).
+  function paintsBackdrop(node) {
+    const s = getComputedStyle(node);
+    if (s.backgroundImage && s.backgroundImage !== 'none') return true;
+    const nr = node.getBoundingClientRect();
+    for (const child of node.children) {
+      const ccs = getComputedStyle(child);
+      if (ccs.position !== 'absolute' && ccs.position !== 'fixed') continue;
+      const paints = !isTransparentColor(ccs.backgroundColor)
+        || (ccs.backgroundImage && ccs.backgroundImage !== 'none');
+      if (!paints) continue;
+      const cr = child.getBoundingClientRect();
+      if (cr.width >= nr.width * 0.9 && cr.height >= nr.height * 0.9) return true;
+    }
+    return false;
+  }
+  function findBackdropAncestor(el) {
+    let node = el.parentElement;
+    while (node && node !== node.ownerDocument.documentElement) {
+      if (paintsBackdrop(node)) return node;
+      node = node.parentElement;
+    }
+    return null;
+  }
+
+  // Mean sRGB (0-1) of a canvas region, used as the halftone ground when the
+  // backdrop was captured from an ancestor rather than read from a CSS color.
+  function averageRgb01(ctx, w, h) {
+    const data = ctx.getImageData(0, 0, w, h).data;
+    let r = 0, g = 0, b = 0, n = 0;
+    // Stride a few pixels for speed; exact average is unnecessary for a ground.
+    for (let i = 0; i < data.length; i += 16) { r += data[i]; g += data[i + 1]; b += data[i + 2]; n++; }
+    return n ? [r / n / 255, g / n / 255, b / n / 255] : SHADER_PAPER_FALLBACK;
+  }
+
+  // Average the backdrop sampled just OUTSIDE an element's rect within a larger
+  // canvas. The ground tone for the dissolve must be the real backdrop, not the
+  // mean of the element's own crop — averaging the crop folds in the element's
+  // content (e.g. bright heading text), pulling the ground toward muddy gray.
+  function sampleSurroundingRgb(ctx, sx, sy, sw, sh, W, H) {
+    const pad = Math.max(2, Math.round(Math.min(sw, sh) * 0.12));
+    const fx = [0.2, 0.5, 0.8].map((f) => sx + sw * f);
+    const fy = [0.2, 0.5, 0.8].map((f) => sy + sh * f);
+    const pts = [];
+    for (const x of fx) { pts.push([x, sy - pad], [x, sy + sh + pad]); }
+    for (const y of fy) { pts.push([sx - pad, y], [sx + sw + pad, y]); }
+    let r = 0, g = 0, b = 0, n = 0;
+    for (const [px, py] of pts) {
+      const cx = Math.max(0, Math.min(W - 1, Math.round(px)));
+      const cy = Math.max(0, Math.min(H - 1, Math.round(py)));
+      const d = ctx.getImageData(cx, cy, 1, 1).data;
+      if (d[3] === 0) continue; // outside the ancestor's paint
+      r += d[0]; g += d[1]; b += d[2]; n++;
+    }
+    return n ? [r / n / 255, g / n / 255, b / n / 255] : null;
+  }
+
   function compileShader(gl, type, source) {
     const sh = gl.createShader(type);
     gl.shaderSource(sh, source);
@@ -5376,7 +5530,7 @@ void main() {
     shaderState = null;
   }
 
-  async function showShaderOverlay(el, blob, rect) {
+  async function showShaderOverlay(el, blob, rect, paper) {
     hideShaderOverlay();
     if (!blob || !el) return;
     const canvas = document.createElement('canvas');
@@ -5474,7 +5628,9 @@ void main() {
     const uTime = gl.getUniformLocation(program, 'u_time');
     const uRes = gl.getUniformLocation(program, 'u_resolution');
     const uAccent = gl.getUniformLocation(program, 'u_accent');
+    const uPaper = gl.getUniformLocation(program, 'u_paper');
     const uTex = gl.getUniformLocation(program, 'u_texture');
+    const paperRgb = paper || resolvePaperRgb(el);
     const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 
     shaderState = { canvas, gl, program, texture, rafId: 0, startTime: performance.now(), reduced };
@@ -5490,6 +5646,7 @@ void main() {
       gl.uniform1f(uTime, t);
       gl.uniform2f(uRes, canvas.width, canvas.height);
       gl.uniform3f(uAccent, SHADER_ACCENT[0], SHADER_ACCENT[1], SHADER_ACCENT[2]);
+      gl.uniform3f(uPaper, paperRgb[0], paperRgb[1], paperRgb[2]);
       gl.drawArrays(gl.TRIANGLES, 0, 6);
       shaderState.rafId = requestAnimationFrame(frame);
     }
@@ -5792,9 +5949,9 @@ void main() {
           try {
             const rect = shaderTarget.getBoundingClientRect();
             if (rect.width === 0 || rect.height === 0) return;
-            const blob = await captureElementToBlob(shaderTarget, null, rect);
+            const { blob, paper } = await captureElementToBlob(shaderTarget, null, rect);
             if (blob && state === 'GENERATING') {
-              showShaderOverlay(shaderTarget, blob, rect);
+              showShaderOverlay(shaderTarget, blob, rect, paper);
             }
           } catch (err) {
             console.warn('[impeccable] shader resume failed:', err);
diff --git a/.github/skills/impeccable/scripts/live-browser.js b/.github/skills/impeccable/scripts/live-browser.js
index 028363916..f1e525786 100644
--- a/.github/skills/impeccable/scripts/live-browser.js
+++ b/.github/skills/impeccable/scripts/live-browser.js
@@ -5209,9 +5209,11 @@
     return '#ffffff';
   }
 
-  // Capture the element (with current annotations baked in) and return a PNG
-  // Blob. Shared between the Go flow (uploads it to the server) and the
-  // debug toggle (displays it as an overlay for side-by-side comparison).
+  // Capture the element (with current annotations baked in) and return
+  // { blob, paper }: the PNG Blob, plus the representative backdrop tone for the
+  // shader's halftone ground (so capture, upload, and shader all agree on what
+  // sits behind the element). Shared between the Go flow (uploads the blob) and
+  // the shader-resume path.
   async function captureElementToBlob(el, snapshot, rect) {
     try { if (document.fonts?.ready) await document.fonts.ready; } catch {}
     const hasAnnotations = snapshot && (snapshot.comments.length > 0 || snapshot.strokes.length > 0);
@@ -5229,12 +5231,46 @@
     try {
       const ms = await loadModernScreenshot();
       const fontCssText = await collectFontCssText();
-      const backgroundColor = resolveCanvasBackground(el);
-      return await ms.domToBlob(el, {
+      const opts = {
         scale: Math.min(window.devicePixelRatio || 1, 2),
         font: fontCssText ? { cssText: fontCssText } : undefined,
-        ...(backgroundColor ? { backgroundColor } : {}),
-      });
+      };
+      const bg = resolveCanvasBackground(el);
+      // Fast path: the element paints its own background, or an opaque ancestor
+      // color was found. modern-screenshot bakes that color; paper matches it.
+      if (bg !== '#ffffff') {
+        const blob = await ms.domToBlob(el, { ...opts, ...(bg ? { backgroundColor: bg } : {}) });
+        return { blob, paper: bg ? cssColorToRgb01(bg) : resolvePaperRgb(el) };
+      }
+      // Transparent up to the root. The visible backdrop may still come from an
+      // ancestor's background-image or a covering positioned layer (e.g. a hero
+      // art div) that the color walk can't see. Capture that ancestor and crop
+      // to the element so the real backdrop is embedded — correct for both the
+      // shader and the screenshot sent to the model. Fall back to white only
+      // when nothing is actually painted behind the element.
+      const backdrop = findBackdropAncestor(el);
+      if (!backdrop) {
+        const blob = await ms.domToBlob(el, { ...opts, backgroundColor: '#ffffff' });
+        return { blob, paper: SHADER_PAPER_FALLBACK };
+      }
+      const ancestorCanvas = await ms.domToCanvas(backdrop, opts);
+      const S = opts.scale;
+      const er = el.getBoundingClientRect();
+      const ar = backdrop.getBoundingClientRect();
+      const sx = (er.left - ar.left) * S, sy = (er.top - ar.top) * S;
+      const sw = er.width * S, sh = er.height * S;
+      const crop = document.createElement('canvas');
+      crop.width = Math.max(1, Math.round(sw));
+      crop.height = Math.max(1, Math.round(sh));
+      const cctx = crop.getContext('2d', { willReadFrequently: true });
+      cctx.drawImage(ancestorCanvas, sx, sy, sw, sh, 0, 0, crop.width, crop.height);
+      // Ground = backdrop sampled around the element, falling back to the crop
+      // mean only if the surround is fully transparent.
+      const actx = ancestorCanvas.getContext('2d', { willReadFrequently: true });
+      const paper = sampleSurroundingRgb(actx, sx, sy, sw, sh, ancestorCanvas.width, ancestorCanvas.height)
+        || averageRgb01(cctx, crop.width, crop.height);
+      const blob = await new Promise((res) => crop.toBlob(res, 'image/png'));
+      return { blob, paper };
     } finally {
       if (annotNode) annotNode.remove();
       if (savedPosition !== null) el.style.position = savedPosition;
@@ -5244,15 +5280,16 @@
   async function captureAndEmit(el, basePayload, snapshot, rect) {
     let screenshotPath;
     let blob;
+    let paper;
     try {
-      blob = await captureElementToBlob(el, snapshot, rect);
+      ({ blob, paper } = await captureElementToBlob(el, snapshot, rect));
     } catch (err) {
       console.warn('[impeccable] capture failed, proceeding without screenshot:', err);
     }
     // Light up the shader overlay the moment capture is ready — no reason to
     // wait for the upload to complete before the user sees something alive.
     if (blob && state === 'GENERATING') {
-      showShaderOverlay(el, blob, rect);
+      showShaderOverlay(el, blob, rect, paper);
     }
     // Only upload + forward the screenshot when annotations (comments/strokes)
     // are present. Without annotations the image is pure visual anchoring —
@@ -5300,6 +5337,7 @@ uniform sampler2D u_texture;
 uniform float u_time;
 uniform vec2 u_resolution;
 uniform vec3 u_accent;
+uniform vec3 u_paper;
 varying vec2 v_uv;
 
 // Asymmetric roller band. Product of two one-sided smoothsteps — peaks at
@@ -5327,23 +5365,139 @@ void main() {
   vec2 cellUv = fract(gridUv) - 0.5;
   vec2 sampleCenter = (cellId + 0.5) * cellPx / u_resolution;
   vec3 cellImg = texture2D(u_texture, sampleCenter).rgb;
-  float luma = dot(cellImg, vec3(0.299, 0.587, 0.114));
-  // Darker cells → bigger kinpaku dots (classic risograph halftone curve).
-  float radius = sqrt(clamp(1.0 - luma, 0.0, 1.0)) * 0.56;
+  // Dot size tracks how much the cell DIFFERS from the element's own ground
+  // (u_paper), not absolute darkness. So the content — text, buttons, anything
+  // that deviates from the background — always becomes the dots, on light AND
+  // dark surfaces. A plain darkness curve inverts on dark elements: the dark
+  // background fills with ink and the lighter content punches holes instead.
+  // Capped below the cell half-width so dense content stays separated dots.
+  float contrast = clamp(length(cellImg - u_paper) / 1.732, 0.0, 1.0);
+  float radius = min(sqrt(contrast) * 0.6, 0.38);
   float dotMask = smoothstep(radius + 0.06, radius, length(cellUv));
-  vec3 paper = vec3(0.975, 0.965, 0.955);
-  vec3 dotLayer = mix(paper, u_accent, dotMask);
-
-  // Blend the halftone layer in where the roller is passing; leave the
-  // element pristine elsewhere.
-  vec3 base = texture2D(u_texture, uv).rgb;
-  gl_FragColor = vec4(mix(base, dotLayer, band), 1.0);
+  // Two-stage dissolve as the roller passes, so the element is rebuilt purely
+  // from dot size (its own halftone) and never bleeds through as raw pixels
+  // behind the dots:
+  //   1. cover  — the element flattens to the uniform paper ground first.
+  //   2. dotAmt — kinpaku dots then emerge, sized by each cell's luma.
+  // A plain mix(base, halftone, band) instead left the raw element visible
+  // through the band's soft core/trail. The paper ground is u_paper (the
+  // element's own bg tone) rather than a fixed white, so the dissolve reads the
+  // same over light and dark surfaces.
+  vec4 tex = texture2D(u_texture, uv);
+  vec3 base = tex.rgb;
+  float cover = smoothstep(0.0, 0.35, band);
+  float dotAmt = dotMask * smoothstep(0.15, 0.6, band);
+  vec3 ground = mix(base, u_paper, cover);
+  // Carry the capture's own alpha through, so a rounded corner or any genuinely
+  // transparent region stays transparent (the live backdrop shows through the
+  // canvas) instead of rendering as solid black.
+  gl_FragColor = vec4(mix(ground, u_accent, dotAmt), tex.a);
 }`;
 
   // Kinpaku gold converted to approximate sRGB 0-1 (matches oklch(84% 0.19 80.46))
   const SHADER_ACCENT = [1.0, 0.78, 0.31];
+  // Fallback ground when an element and all its ancestors are transparent —
+  // matches the original off-white risograph paper.
+  const SHADER_PAPER_FALLBACK = [0.975, 0.965, 0.955];
   let shaderState = null; // { canvas, gl, program, texture, rafId, startTime }
 
+  // The element's effective background tone, used as the uniform halftone
+  // ground so content dissolves into dots over it. Unlike resolveCanvasBackground
+  // (which returns null when the element paints its own bg), this always returns
+  // a usable color: the element's own background if any, else the nearest opaque
+  // ancestor, else the paper fallback.
+  // Rasterize any CSS color (oklch, color(), named, hex, rgb) through a 1x1
+  // canvas and read back the sRGB pixel. String-parsing computed colors is a
+  // trap: Chrome returns backgroundColor as oklch()/color() for oklch inputs,
+  // which a hex/rgb regex misses — every site token would fall back to white.
+  let colorParseCtx = null;
+  function cssColorToRgb01(str) {
+    if (!colorParseCtx) {
+      colorParseCtx = document.createElement('canvas').getContext('2d', { willReadFrequently: true });
+    }
+    // Clear first: the ctx is cached across calls, so a semi-transparent color
+    // would otherwise blend (source-over) with the previous call's leftover
+    // pixel, making the result depend on call history.
+    colorParseCtx.clearRect(0, 0, 1, 1);
+    colorParseCtx.fillStyle = '#000'; // invalid input leaves this default
+    colorParseCtx.fillStyle = str;
+    colorParseCtx.fillRect(0, 0, 1, 1);
+    const d = colorParseCtx.getImageData(0, 0, 1, 1).data;
+    return [d[0] / 255, d[1] / 255, d[2] / 255];
+  }
+  function resolvePaperRgb(el) {
+    let node = el;
+    while (node) {
+      const bg = getComputedStyle(node).backgroundColor;
+      if (!isTransparentColor(bg)) return cssColorToRgb01(bg);
+      node = node.parentElement;
+    }
+    return SHADER_PAPER_FALLBACK;
+  }
+
+  // When an element is transparent up to the root, its visible backdrop can
+  // still come from an ancestor's background-image or a covering positioned
+  // layer that is a *child* of an ancestor (e.g. a hero's absolute art div) —
+  // neither of which the ancestor background-COLOR walk can see. Return the
+  // nearest such ancestor so we can capture it and crop, embedding the real
+  // backdrop. Returns null when nothing is actually painted behind the element
+  // (genuinely transparent → white is correct).
+  function paintsBackdrop(node) {
+    const s = getComputedStyle(node);
+    if (s.backgroundImage && s.backgroundImage !== 'none') return true;
+    const nr = node.getBoundingClientRect();
+    for (const child of node.children) {
+      const ccs = getComputedStyle(child);
+      if (ccs.position !== 'absolute' && ccs.position !== 'fixed') continue;
+      const paints = !isTransparentColor(ccs.backgroundColor)
+        || (ccs.backgroundImage && ccs.backgroundImage !== 'none');
+      if (!paints) continue;
+      const cr = child.getBoundingClientRect();
+      if (cr.width >= nr.width * 0.9 && cr.height >= nr.height * 0.9) return true;
+    }
+    return false;
+  }
+  function findBackdropAncestor(el) {
+    let node = el.parentElement;
+    while (node && node !== node.ownerDocument.documentElement) {
+      if (paintsBackdrop(node)) return node;
+      node = node.parentElement;
+    }
+    return null;
+  }
+
+  // Mean sRGB (0-1) of a canvas region, used as the halftone ground when the
+  // backdrop was captured from an ancestor rather than read from a CSS color.
+  function averageRgb01(ctx, w, h) {
+    const data = ctx.getImageData(0, 0, w, h).data;
+    let r = 0, g = 0, b = 0, n = 0;
+    // Stride a few pixels for speed; exact average is unnecessary for a ground.
+    for (let i = 0; i < data.length; i += 16) { r += data[i]; g += data[i + 1]; b += data[i + 2]; n++; }
+    return n ? [r / n / 255, g / n / 255, b / n / 255] : SHADER_PAPER_FALLBACK;
+  }
+
+  // Average the backdrop sampled just OUTSIDE an element's rect within a larger
+  // canvas. The ground tone for the dissolve must be the real backdrop, not the
+  // mean of the element's own crop — averaging the crop folds in the element's
+  // content (e.g. bright heading text), pulling the ground toward muddy gray.
+  function sampleSurroundingRgb(ctx, sx, sy, sw, sh, W, H) {
+    const pad = Math.max(2, Math.round(Math.min(sw, sh) * 0.12));
+    const fx = [0.2, 0.5, 0.8].map((f) => sx + sw * f);
+    const fy = [0.2, 0.5, 0.8].map((f) => sy + sh * f);
+    const pts = [];
+    for (const x of fx) { pts.push([x, sy - pad], [x, sy + sh + pad]); }
+    for (const y of fy) { pts.push([sx - pad, y], [sx + sw + pad, y]); }
+    let r = 0, g = 0, b = 0, n = 0;
+    for (const [px, py] of pts) {
+      const cx = Math.max(0, Math.min(W - 1, Math.round(px)));
+      const cy = Math.max(0, Math.min(H - 1, Math.round(py)));
+      const d = ctx.getImageData(cx, cy, 1, 1).data;
+      if (d[3] === 0) continue; // outside the ancestor's paint
+      r += d[0]; g += d[1]; b += d[2]; n++;
+    }
+    return n ? [r / n / 255, g / n / 255, b / n / 255] : null;
+  }
+
   function compileShader(gl, type, source) {
     const sh = gl.createShader(type);
     gl.shaderSource(sh, source);
@@ -5376,7 +5530,7 @@ void main() {
     shaderState = null;
   }
 
-  async function showShaderOverlay(el, blob, rect) {
+  async function showShaderOverlay(el, blob, rect, paper) {
     hideShaderOverlay();
     if (!blob || !el) return;
     const canvas = document.createElement('canvas');
@@ -5474,7 +5628,9 @@ void main() {
     const uTime = gl.getUniformLocation(program, 'u_time');
     const uRes = gl.getUniformLocation(program, 'u_resolution');
     const uAccent = gl.getUniformLocation(program, 'u_accent');
+    const uPaper = gl.getUniformLocation(program, 'u_paper');
     const uTex = gl.getUniformLocation(program, 'u_texture');
+    const paperRgb = paper || resolvePaperRgb(el);
     const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 
     shaderState = { canvas, gl, program, texture, rafId: 0, startTime: performance.now(), reduced };
@@ -5490,6 +5646,7 @@ void main() {
       gl.uniform1f(uTime, t);
       gl.uniform2f(uRes, canvas.width, canvas.height);
       gl.uniform3f(uAccent, SHADER_ACCENT[0], SHADER_ACCENT[1], SHADER_ACCENT[2]);
+      gl.uniform3f(uPaper, paperRgb[0], paperRgb[1], paperRgb[2]);
       gl.drawArrays(gl.TRIANGLES, 0, 6);
       shaderState.rafId = requestAnimationFrame(frame);
     }
@@ -5792,9 +5949,9 @@ void main() {
           try {
             const rect = shaderTarget.getBoundingClientRect();
             if (rect.width === 0 || rect.height === 0) return;
-            const blob = await captureElementToBlob(shaderTarget, null, rect);
+            const { blob, paper } = await captureElementToBlob(shaderTarget, null, rect);
             if (blob && state === 'GENERATING') {
-              showShaderOverlay(shaderTarget, blob, rect);
+              showShaderOverlay(shaderTarget, blob, rect, paper);
             }
           } catch (err) {
             console.warn('[impeccable] shader resume failed:', err);
diff --git a/.kiro/skills/impeccable/scripts/live-browser.js b/.kiro/skills/impeccable/scripts/live-browser.js
index 028363916..f1e525786 100644
--- a/.kiro/skills/impeccable/scripts/live-browser.js
+++ b/.kiro/skills/impeccable/scripts/live-browser.js
@@ -5209,9 +5209,11 @@
     return '#ffffff';
   }
 
-  // Capture the element (with current annotations baked in) and return a PNG
-  // Blob. Shared between the Go flow (uploads it to the server) and the
-  // debug toggle (displays it as an overlay for side-by-side comparison).
+  // Capture the element (with current annotations baked in) and return
+  // { blob, paper }: the PNG Blob, plus the representative backdrop tone for the
+  // shader's halftone ground (so capture, upload, and shader all agree on what
+  // sits behind the element). Shared between the Go flow (uploads the blob) and
+  // the shader-resume path.
   async function captureElementToBlob(el, snapshot, rect) {
     try { if (document.fonts?.ready) await document.fonts.ready; } catch {}
     const hasAnnotations = snapshot && (snapshot.comments.length > 0 || snapshot.strokes.length > 0);
@@ -5229,12 +5231,46 @@
     try {
       const ms = await loadModernScreenshot();
       const fontCssText = await collectFontCssText();
-      const backgroundColor = resolveCanvasBackground(el);
-      return await ms.domToBlob(el, {
+      const opts = {
         scale: Math.min(window.devicePixelRatio || 1, 2),
         font: fontCssText ? { cssText: fontCssText } : undefined,
-        ...(backgroundColor ? { backgroundColor } : {}),
-      });
+      };
+      const bg = resolveCanvasBackground(el);
+      // Fast path: the element paints its own background, or an opaque ancestor
+      // color was found. modern-screenshot bakes that color; paper matches it.
+      if (bg !== '#ffffff') {
+        const blob = await ms.domToBlob(el, { ...opts, ...(bg ? { backgroundColor: bg } : {}) });
+        return { blob, paper: bg ? cssColorToRgb01(bg) : resolvePaperRgb(el) };
+      }
+      // Transparent up to the root. The visible backdrop may still come from an
+      // ancestor's background-image or a covering positioned layer (e.g. a hero
+      // art div) that the color walk can't see. Capture that ancestor and crop
+      // to the element so the real backdrop is embedded — correct for both the
+      // shader and the screenshot sent to the model. Fall back to white only
+      // when nothing is actually painted behind the element.
+      const backdrop = findBackdropAncestor(el);
+      if (!backdrop) {
+        const blob = await ms.domToBlob(el, { ...opts, backgroundColor: '#ffffff' });
+        return { blob, paper: SHADER_PAPER_FALLBACK };
+      }
+      const ancestorCanvas = await ms.domToCanvas(backdrop, opts);
+      const S = opts.scale;
+      const er = el.getBoundingClientRect();
+      const ar = backdrop.getBoundingClientRect();
+      const sx = (er.left - ar.left) * S, sy = (er.top - ar.top) * S;
+      const sw = er.width * S, sh = er.height * S;
+      const crop = document.createElement('canvas');
+      crop.width = Math.max(1, Math.round(sw));
+      crop.height = Math.max(1, Math.round(sh));
+      const cctx = crop.getContext('2d', { willReadFrequently: true });
+      cctx.drawImage(ancestorCanvas, sx, sy, sw, sh, 0, 0, crop.width, crop.height);
+      // Ground = backdrop sampled around the element, falling back to the crop
+      // mean only if the surround is fully transparent.
+      const actx = ancestorCanvas.getContext('2d', { willReadFrequently: true });
+      const paper = sampleSurroundingRgb(actx, sx, sy, sw, sh, ancestorCanvas.width, ancestorCanvas.height)
+        || averageRgb01(cctx, crop.width, crop.height);
+      const blob = await new Promise((res) => crop.toBlob(res, 'image/png'));
+      return { blob, paper };
     } finally {
       if (annotNode) annotNode.remove();
       if (savedPosition !== null) el.style.position = savedPosition;
@@ -5244,15 +5280,16 @@
   async function captureAndEmit(el, basePayload, snapshot, rect) {
     let screenshotPath;
     let blob;
+    let paper;
     try {
-      blob = await captureElementToBlob(el, snapshot, rect);
+      ({ blob, paper } = await captureElementToBlob(el, snapshot, rect));
     } catch (err) {
       console.warn('[impeccable] capture failed, proceeding without screenshot:', err);
     }
     // Light up the shader overlay the moment capture is ready — no reason to
     // wait for the upload to complete before the user sees something alive.
     if (blob && state === 'GENERATING') {
-      showShaderOverlay(el, blob, rect);
+      showShaderOverlay(el, blob, rect, paper);
     }
     // Only upload + forward the screenshot when annotations (comments/strokes)
     // are present. Without annotations the image is pure visual anchoring —
@@ -5300,6 +5337,7 @@ uniform sampler2D u_texture;
 uniform float u_time;
 uniform vec2 u_resolution;
 uniform vec3 u_accent;
+uniform vec3 u_paper;
 varying vec2 v_uv;
 
 // Asymmetric roller band. Product of two one-sided smoothsteps — peaks at
@@ -5327,23 +5365,139 @@ void main() {
   vec2 cellUv = fract(gridUv) - 0.5;
   vec2 sampleCenter = (cellId + 0.5) * cellPx / u_resolution;
   vec3 cellImg = texture2D(u_texture, sampleCenter).rgb;
-  float luma = dot(cellImg, vec3(0.299, 0.587, 0.114));
-  // Darker cells → bigger kinpaku dots (classic risograph halftone curve).
-  float radius = sqrt(clamp(1.0 - luma, 0.0, 1.0)) * 0.56;
+  // Dot size tracks how much the cell DIFFERS from the element's own ground
+  // (u_paper), not absolute darkness. So the content — text, buttons, anything
+  // that deviates from the background — always becomes the dots, on light AND
+  // dark surfaces. A plain darkness curve inverts on dark elements: the dark
+  // background fills with ink and the lighter content punches holes instead.
+  // Capped below the cell half-width so dense content stays separated dots.
+  float contrast = clamp(length(cellImg - u_paper) / 1.732, 0.0, 1.0);
+  float radius = min(sqrt(contrast) * 0.6, 0.38);
   float dotMask = smoothstep(radius + 0.06, radius, length(cellUv));
-  vec3 paper = vec3(0.975, 0.965, 0.955);
-  vec3 dotLayer = mix(paper, u_accent, dotMask);
-
-  // Blend the halftone layer in where the roller is passing; leave the
-  // element pristine elsewhere.
-  vec3 base = texture2D(u_texture, uv).rgb;
-  gl_FragColor = vec4(mix(base, dotLayer, band), 1.0);
+  // Two-stage dissolve as the roller passes, so the element is rebuilt purely
+  // from dot size (its own halftone) and never bleeds through as raw pixels
+  // behind the dots:
+  //   1. cover  — the element flattens to the uniform paper ground first.
+  //   2. dotAmt — kinpaku dots then emerge, sized by each cell's luma.
+  // A plain mix(base, halftone, band) instead left the raw element visible
+  // through the band's soft core/trail. The paper ground is u_paper (the
+  // element's own bg tone) rather than a fixed white, so the dissolve reads the
+  // same over light and dark surfaces.
+  vec4 tex = texture2D(u_texture, uv);
+  vec3 base = tex.rgb;
+  float cover = smoothstep(0.0, 0.35, band);
+  float dotAmt = dotMask * smoothstep(0.15, 0.6, band);
+  vec3 ground = mix(base, u_paper, cover);
+  // Carry the capture's own alpha through, so a rounded corner or any genuinely
+  // transparent region stays transparent (the live backdrop shows through the
+  // canvas) instead of rendering as solid black.
+  gl_FragColor = vec4(mix(ground, u_accent, dotAmt), tex.a);
 }`;
 
   // Kinpaku gold converted to approximate sRGB 0-1 (matches oklch(84% 0.19 80.46))
   const SHADER_ACCENT = [1.0, 0.78, 0.31];
+  // Fallback ground when an element and all its ancestors are transparent —
+  // matches the original off-white risograph paper.
+  const SHADER_PAPER_FALLBACK = [0.975, 0.965, 0.955];
   let shaderState = null; // { canvas, gl, program, texture, rafId, startTime }
 
+  // The element's effective background tone, used as the uniform halftone
+  // ground so content dissolves into dots over it. Unlike resolveCanvasBackground
+  // (which returns null when the element paints its own bg), this always returns
+  // a usable color: the element's own background if any, else the nearest opaque
+  // ancestor, else the paper fallback.
+  // Rasterize any CSS color (oklch, color(), named, hex, rgb) through a 1x1
+  // canvas and read back the sRGB pixel. String-parsing computed colors is a
+  // trap: Chrome returns backgroundColor as oklch()/color() for oklch inputs,
+  // which a hex/rgb regex misses — every site token would fall back to white.
+  let colorParseCtx = null;
+  function cssColorToRgb01(str) {
+    if (!colorParseCtx) {
+      colorParseCtx = document.createElement('canvas').getContext('2d', { willReadFrequently: true });
+    }
+    // Clear first: the ctx is cached across calls, so a semi-transparent color
+    // would otherwise blend (source-over) with the previous call's leftover
+    // pixel, making the result depend on call history.
+    colorParseCtx.clearRect(0, 0, 1, 1);
+    colorParseCtx.fillStyle = '#000'; // invalid input leaves this default
+    colorParseCtx.fillStyle = str;
+    colorParseCtx.fillRect(0, 0, 1, 1);
+    const d = colorParseCtx.getImageData(0, 0, 1, 1).data;
+    return [d[0] / 255, d[1] / 255, d[2] / 255];
+  }
+  function resolvePaperRgb(el) {
+    let node = el;
+    while (node) {
+      const bg = getComputedStyle(node).backgroundColor;
+      if (!isTransparentColor(bg)) return cssColorToRgb01(bg);
+      node = node.parentElement;
+    }
+    return SHADER_PAPER_FALLBACK;
+  }
+
+  // When an element is transparent up to the root, its visible backdrop can
+  // still come from an ancestor's background-image or a covering positioned
+  // layer that is a *child* of an ancestor (e.g. a hero's absolute art div) —
+  // neither of which the ancestor background-COLOR walk can see. Return the
+  // nearest such ancestor so we can capture it and crop, embedding the real
+  // backdrop. Returns null when nothing is actually painted behind the element
+  // (genuinely transparent → white is correct).
+  function paintsBackdrop(node) {
+    const s = getComputedStyle(node);
+    if (s.backgroundImage && s.backgroundImage !== 'none') return true;
+    const nr = node.getBoundingClientRect();
+    for (const child of node.children) {
+      const ccs = getComputedStyle(child);
+      if (ccs.position !== 'absolute' && ccs.position !== 'fixed') continue;
+      const paints = !isTransparentColor(ccs.backgroundColor)
+        || (ccs.backgroundImage && ccs.backgroundImage !== 'none');
+      if (!paints) continue;
+      const cr = child.getBoundingClientRect();
+      if (cr.width >= nr.width * 0.9 && cr.height >= nr.height * 0.9) return true;
+    }
+    return false;
+  }
+  function findBackdropAncestor(el) {
+    let node = el.parentElement;
+    while (node && node !== node.ownerDocument.documentElement) {
+      if (paintsBackdrop(node)) return node;
+      node = node.parentElement;
+    }
+    return null;
+  }
+
+  // Mean sRGB (0-1) of a canvas region, used as the halftone ground when the
+  // backdrop was captured from an ancestor rather than read from a CSS color.
+  function averageRgb01(ctx, w, h) {
+    const data = ctx.getImageData(0, 0, w, h).data;
+    let r = 0, g = 0, b = 0, n = 0;
+    // Stride a few pixels for speed; exact average is unnecessary for a ground.
+    for (let i = 0; i < data.length; i += 16) { r += data[i]; g += data[i + 1]; b += data[i + 2]; n++; }
+    return n ? [r / n / 255, g / n / 255, b / n / 255] : SHADER_PAPER_FALLBACK;
+  }
+
+  // Average the backdrop sampled just OUTSIDE an element's rect within a larger
+  // canvas. The ground tone for the dissolve must be the real backdrop, not the
+  // mean of the element's own crop — averaging the crop folds in the element's
+  // content (e.g. bright heading text), pulling the ground toward muddy gray.
+  function sampleSurroundingRgb(ctx, sx, sy, sw, sh, W, H) {
+    const pad = Math.max(2, Math.round(Math.min(sw, sh) * 0.12));
+    const fx = [0.2, 0.5, 0.8].map((f) => sx + sw * f);
+    const fy = [0.2, 0.5, 0.8].map((f) => sy + sh * f);
+    const pts = [];
+    for (const x of fx) { pts.push([x, sy - pad], [x, sy + sh + pad]); }
+    for (const y of fy) { pts.push([sx - pad, y], [sx + sw + pad, y]); }
+    let r = 0, g = 0, b = 0, n = 0;
+    for (const [px, py] of pts) {
+      const cx = Math.max(0, Math.min(W - 1, Math.round(px)));
+      const cy = Math.max(0, Math.min(H - 1, Math.round(py)));
+      const d = ctx.getImageData(cx, cy, 1, 1).data;
+      if (d[3] === 0) continue; // outside the ancestor's paint
+      r += d[0]; g += d[1]; b += d[2]; n++;
+    }
+    return n ? [r / n / 255, g / n / 255, b / n / 255] : null;
+  }
+
   function compileShader(gl, type, source) {
     const sh = gl.createShader(type);
     gl.shaderSource(sh, source);
@@ -5376,7 +5530,7 @@ void main() {
     shaderState = null;
   }
 
-  async function showShaderOverlay(el, blob, rect) {
+  async function showShaderOverlay(el, blob, rect, paper) {
     hideShaderOverlay();
     if (!blob || !el) return;
     const canvas = document.createElement('canvas');
@@ -5474,7 +5628,9 @@ void main() {
     const uTime = gl.getUniformLocation(program, 'u_time');
     const uRes = gl.getUniformLocation(program, 'u_resolution');
     const uAccent = gl.getUniformLocation(program, 'u_accent');
+    const uPaper = gl.getUniformLocation(program, 'u_paper');
     const uTex = gl.getUniformLocation(program, 'u_texture');
+    const paperRgb = paper || resolvePaperRgb(el);
     const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 
     shaderState = { canvas, gl, program, texture, rafId: 0, startTime: performance.now(), reduced };
@@ -5490,6 +5646,7 @@ void main() {
       gl.uniform1f(uTime, t);
       gl.uniform2f(uRes, canvas.width, canvas.height);
       gl.uniform3f(uAccent, SHADER_ACCENT[0], SHADER_ACCENT[1], SHADER_ACCENT[2]);
+      gl.uniform3f(uPaper, paperRgb[0], paperRgb[1], paperRgb[2]);
       gl.drawArrays(gl.TRIANGLES, 0, 6);
       shaderState.rafId = requestAnimationFrame(frame);
     }
@@ -5792,9 +5949,9 @@ void main() {
           try {
             const rect = shaderTarget.getBoundingClientRect();
             if (rect.width === 0 || rect.height === 0) return;
-            const blob = await captureElementToBlob(shaderTarget, null, rect);
+            const { blob, paper } = await captureElementToBlob(shaderTarget, null, rect);
             if (blob && state === 'GENERATING') {
-              showShaderOverlay(shaderTarget, blob, rect);
+              showShaderOverlay(shaderTarget, blob, rect, paper);
             }
           } catch (err) {
             console.warn('[impeccable] shader resume failed:', err);
diff --git a/.opencode/skills/impeccable/scripts/live-browser.js b/.opencode/skills/impeccable/scripts/live-browser.js
index 028363916..f1e525786 100644
--- a/.opencode/skills/impeccable/scripts/live-browser.js
+++ b/.opencode/skills/impeccable/scripts/live-browser.js
@@ -5209,9 +5209,11 @@
     return '#ffffff';
   }
 
-  // Capture the element (with current annotations baked in) and return a PNG
-  // Blob. Shared between the Go flow (uploads it to the server) and the
-  // debug toggle (displays it as an overlay for side-by-side comparison).
+  // Capture the element (with current annotations baked in) and return
+  // { blob, paper }: the PNG Blob, plus the representative backdrop tone for the
+  // shader's halftone ground (so capture, upload, and shader all agree on what
+  // sits behind the element). Shared between the Go flow (uploads the blob) and
+  // the shader-resume path.
   async function captureElementToBlob(el, snapshot, rect) {
     try { if (document.fonts?.ready) await document.fonts.ready; } catch {}
     const hasAnnotations = snapshot && (snapshot.comments.length > 0 || snapshot.strokes.length > 0);
@@ -5229,12 +5231,46 @@
     try {
       const ms = await loadModernScreenshot();
       const fontCssText = await collectFontCssText();
-      const backgroundColor = resolveCanvasBackground(el);
-      return await ms.domToBlob(el, {
+      const opts = {
         scale: Math.min(window.devicePixelRatio || 1, 2),
         font: fontCssText ? { cssText: fontCssText } : undefined,
-        ...(backgroundColor ? { backgroundColor } : {}),
-      });
+      };
+      const bg = resolveCanvasBackground(el);
+      // Fast path: the element paints its own background, or an opaque ancestor
+      // color was found. modern-screenshot bakes that color; paper matches it.
+      if (bg !== '#ffffff') {
+        const blob = await ms.domToBlob(el, { ...opts, ...(bg ? { backgroundColor: bg } : {}) });
+        return { blob, paper: bg ? cssColorToRgb01(bg) : resolvePaperRgb(el) };
+      }
+      // Transparent up to the root. The visible backdrop may still come from an
+      // ancestor's background-image or a covering positioned layer (e.g. a hero
+      // art div) that the color walk can't see. Capture that ancestor and crop
+      // to the element so the real backdrop is embedded — correct for both the
+      // shader and the screenshot sent to the model. Fall back to white only
+      // when nothing is actually painted behind the element.
+      const backdrop = findBackdropAncestor(el);
+      if (!backdrop) {
+        const blob = await ms.domToBlob(el, { ...opts, backgroundColor: '#ffffff' });
+        return { blob, paper: SHADER_PAPER_FALLBACK };
+      }
+      const ancestorCanvas = await ms.domToCanvas(backdrop, opts);
+      const S = opts.scale;
+      const er = el.getBoundingClientRect();
+      const ar = backdrop.getBoundingClientRect();
+      const sx = (er.left - ar.left) * S, sy = (er.top - ar.top) * S;
+      const sw = er.width * S, sh = er.height * S;
+      const crop = document.createElement('canvas');
+      crop.width = Math.max(1, Math.round(sw));
+      crop.height = Math.max(1, Math.round(sh));
+      const cctx = crop.getContext('2d', { willReadFrequently: true });
+      cctx.drawImage(ancestorCanvas, sx, sy, sw, sh, 0, 0, crop.width, crop.height);
+      // Ground = backdrop sampled around the element, falling back to the crop
+      // mean only if the surround is fully transparent.
+      const actx = ancestorCanvas.getContext('2d', { willReadFrequently: true });
+      const paper = sampleSurroundingRgb(actx, sx, sy, sw, sh, ancestorCanvas.width, ancestorCanvas.height)
+        || averageRgb01(cctx, crop.width, crop.height);
+      const blob = await new Promise((res) => crop.toBlob(res, 'image/png'));
+      return { blob, paper };
     } finally {
       if (annotNode) annotNode.remove();
       if (savedPosition !== null) el.style.position = savedPosition;
@@ -5244,15 +5280,16 @@
   async function captureAndEmit(el, basePayload, snapshot, rect) {
     let screenshotPath;
     let blob;
+    let paper;
     try {
-      blob = await captureElementToBlob(el, snapshot, rect);
+      ({ blob, paper } = await captureElementToBlob(el, snapshot, rect));
     } catch (err) {
       console.warn('[impeccable] capture failed, proceeding without screenshot:', err);
     }
     // Light up the shader overlay the moment capture is ready — no reason to
     // wait for the upload to complete before the user sees something alive.
     if (blob && state === 'GENERATING') {
-      showShaderOverlay(el, blob, rect);
+      showShaderOverlay(el, blob, rect, paper);
     }
     // Only upload + forward the screenshot when annotations (comments/strokes)
     // are present. Without annotations the image is pure visual anchoring —
@@ -5300,6 +5337,7 @@ uniform sampler2D u_texture;
 uniform float u_time;
 uniform vec2 u_resolution;
 uniform vec3 u_accent;
+uniform vec3 u_paper;
 varying vec2 v_uv;
 
 // Asymmetric roller band. Product of two one-sided smoothsteps — peaks at
@@ -5327,23 +5365,139 @@ void main() {
   vec2 cellUv = fract(gridUv) - 0.5;
   vec2 sampleCenter = (cellId + 0.5) * cellPx / u_resolution;
   vec3 cellImg = texture2D(u_texture, sampleCenter).rgb;
-  float luma = dot(cellImg, vec3(0.299, 0.587, 0.114));
-  // Darker cells → bigger kinpaku dots (classic risograph halftone curve).
-  float radius = sqrt(clamp(1.0 - luma, 0.0, 1.0)) * 0.56;
+  // Dot size tracks how much the cell DIFFERS from the element's own ground
+  // (u_paper), not absolute darkness. So the content — text, buttons, anything
+  // that deviates from the background — always becomes the dots, on light AND
+  // dark surfaces. A plain darkness curve inverts on dark elements: the dark
+  // background fills with ink and the lighter content punches holes instead.
+  // Capped below the cell half-width so dense content stays separated dots.
+  float contrast = clamp(length(cellImg - u_paper) / 1.732, 0.0, 1.0);
+  float radius = min(sqrt(contrast) * 0.6, 0.38);
   float dotMask = smoothstep(radius + 0.06, radius, length(cellUv));
-  vec3 paper = vec3(0.975, 0.965, 0.955);
-  vec3 dotLayer = mix(paper, u_accent, dotMask);
-
-  // Blend the halftone layer in where the roller is passing; leave the
-  // element pristine elsewhere.
-  vec3 base = texture2D(u_texture, uv).rgb;
-  gl_FragColor = vec4(mix(base, dotLayer, band), 1.0);
+  // Two-stage dissolve as the roller passes, so the element is rebuilt purely
+  // from dot size (its own halftone) and never bleeds through as raw pixels
+  // behind the dots:
+  //   1. cover  — the element flattens to the uniform paper ground first.
+  //   2. dotAmt — kinpaku dots then emerge, sized by each cell's luma.
+  // A plain mix(base, halftone, band) instead left the raw element visible
+  // through the band's soft core/trail. The paper ground is u_paper (the
+  // element's own bg tone) rather than a fixed white, so the dissolve reads the
+  // same over light and dark surfaces.
+  vec4 tex = texture2D(u_texture, uv);
+  vec3 base = tex.rgb;
+  float cover = smoothstep(0.0, 0.35, band);
+  float dotAmt = dotMask * smoothstep(0.15, 0.6, band);
+  vec3 ground = mix(base, u_paper, cover);
+  // Carry the capture's own alpha through, so a rounded corner or any genuinely
+  // transparent region stays transparent (the live backdrop shows through the
+  // canvas) instead of rendering as solid black.
+  gl_FragColor = vec4(mix(ground, u_accent, dotAmt), tex.a);
 }`;
 
   // Kinpaku gold converted to approximate sRGB 0-1 (matches oklch(84% 0.19 80.46))
   const SHADER_ACCENT = [1.0, 0.78, 0.31];
+  // Fallback ground when an element and all its ancestors are transparent —
+  // matches the original off-white risograph paper.
+  const SHADER_PAPER_FALLBACK = [0.975, 0.965, 0.955];
   let shaderState = null; // { canvas, gl, program, texture, rafId, startTime }
 
+  // The element's effective background tone, used as the uniform halftone
+  // ground so content dissolves into dots over it. Unlike resolveCanvasBackground
+  // (which returns null when the element paints its own bg), this always returns
+  // a usable color: the element's own background if any, else the nearest opaque
+  // ancestor, else the paper fallback.
+  // Rasterize any CSS color (oklch, color(), named, hex, rgb) through a 1x1
+  // canvas and read back the sRGB pixel. String-parsing computed colors is a
+  // trap: Chrome returns backgroundColor as oklch()/color() for oklch inputs,
+  // which a hex/rgb regex misses — every site token would fall back to white.
+  let colorParseCtx = null;
+  function cssColorToRgb01(str) {
+    if (!colorParseCtx) {
+      colorParseCtx = document.createElement('canvas').getContext('2d', { willReadFrequently: true });
+    }
+    // Clear first: the ctx is cached across calls, so a semi-transparent color
+    // would otherwise blend (source-over) with the previous call's leftover
+    // pixel, making the result depend on call history.
+    colorParseCtx.clearRect(0, 0, 1, 1);
+    colorParseCtx.fillStyle = '#000'; // invalid input leaves this default
+    colorParseCtx.fillStyle = str;
+    colorParseCtx.fillRect(0, 0, 1, 1);
+    const d = colorParseCtx.getImageData(0, 0, 1, 1).data;
+    return [d[0] / 255, d[1] / 255, d[2] / 255];
+  }
+  function resolvePaperRgb(el) {
+    let node = el;
+    while (node) {
+      const bg = getComputedStyle(node).backgroundColor;
+      if (!isTransparentColor(bg)) return cssColorToRgb01(bg);
+      node = node.parentElement;
+    }
+    return SHADER_PAPER_FALLBACK;
+  }
+
+  // When an element is transparent up to the root, its visible backdrop can
+  // still come from an ancestor's background-image or a covering positioned
+  // layer that is a *child* of an ancestor (e.g. a hero's absolute art div) —
+  // neither of which the ancestor background-COLOR walk can see. Return the
+  // nearest such ancestor so we can capture it and crop, embedding the real
+  // backdrop. Returns null when nothing is actually painted behind the element
+  // (genuinely transparent → white is correct).
+  function paintsBackdrop(node) {
+    const s = getComputedStyle(node);
+    if (s.backgroundImage && s.backgroundImage !== 'none') return true;
+    const nr = node.getBoundingClientRect();
+    for (const child of node.children) {
+      const ccs = getComputedStyle(child);
+      if (ccs.position !== 'absolute' && ccs.position !== 'fixed') continue;
+      const paints = !isTransparentColor(ccs.backgroundColor)
+        || (ccs.backgroundImage && ccs.backgroundImage !== 'none');
+      if (!paints) continue;
+      const cr = child.getBoundingClientRect();
+      if (cr.width >= nr.width * 0.9 && cr.height >= nr.height * 0.9) return true;
+    }
+    return false;
+  }
+  function findBackdropAncestor(el) {
+    let node = el.parentElement;
+    while (node && node !== node.ownerDocument.documentElement) {
+      if (paintsBackdrop(node)) return node;
+      node = node.parentElement;
+    }
+    return null;
+  }
+
+  // Mean sRGB (0-1) of a canvas region, used as the halftone ground when the
+  // backdrop was captured from an ancestor rather than read from a CSS color.
+  function averageRgb01(ctx, w, h) {
+    const data = ctx.getImageData(0, 0, w, h).data;
+    let r = 0, g = 0, b = 0, n = 0;
+    // Stride a few pixels for speed; exact average is unnecessary for a ground.
+    for (let i = 0; i < data.length; i += 16) { r += data[i]; g += data[i + 1]; b += data[i + 2]; n++; }
+    return n ? [r / n / 255, g / n / 255, b / n / 255] : SHADER_PAPER_FALLBACK;
+  }
+
+  // Average the backdrop sampled just OUTSIDE an element's rect within a larger
+  // canvas. The ground tone for the dissolve must be the real backdrop, not the
+  // mean of the element's own crop — averaging the crop folds in the element's
+  // content (e.g. bright heading text), pulling the ground toward muddy gray.
+  function sampleSurroundingRgb(ctx, sx, sy, sw, sh, W, H) {
+    const pad = Math.max(2, Math.round(Math.min(sw, sh) * 0.12));
+    const fx = [0.2, 0.5, 0.8].map((f) => sx + sw * f);
+    const fy = [0.2, 0.5, 0.8].map((f) => sy + sh * f);
+    const pts = [];
+    for (const x of fx) { pts.push([x, sy - pad], [x, sy + sh + pad]); }
+    for (const y of fy) { pts.push([sx - pad, y], [sx + sw + pad, y]); }
+    let r = 0, g = 0, b = 0, n = 0;
+    for (const [px, py] of pts) {
+      const cx = Math.max(0, Math.min(W - 1, Math.round(px)));
+      const cy = Math.max(0, Math.min(H - 1, Math.round(py)));
+      const d = ctx.getImageData(cx, cy, 1, 1).data;
+      if (d[3] === 0) continue; // outside the ancestor's paint
+      r += d[0]; g += d[1]; b += d[2]; n++;
+    }
+    return n ? [r / n / 255, g / n / 255, b / n / 255] : null;
+  }
+
   function compileShader(gl, type, source) {
     const sh = gl.createShader(type);
     gl.shaderSource(sh, source);
@@ -5376,7 +5530,7 @@ void main() {
     shaderState = null;
   }
 
-  async function showShaderOverlay(el, blob, rect) {
+  async function showShaderOverlay(el, blob, rect, paper) {
     hideShaderOverlay();
     if (!blob || !el) return;
     const canvas = document.createElement('canvas');
@@ -5474,7 +5628,9 @@ void main() {
     const uTime = gl.getUniformLocation(program, 'u_time');
     const uRes = gl.getUniformLocation(program, 'u_resolution');
     const uAccent = gl.getUniformLocation(program, 'u_accent');
+    const uPaper = gl.getUniformLocation(program, 'u_paper');
     const uTex = gl.getUniformLocation(program, 'u_texture');
+    const paperRgb = paper || resolvePaperRgb(el);
     const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 
     shaderState = { canvas, gl, program, texture, rafId: 0, startTime: performance.now(), reduced };
@@ -5490,6 +5646,7 @@ void main() {
       gl.uniform1f(uTime, t);
       gl.uniform2f(uRes, canvas.width, canvas.height);
       gl.uniform3f(uAccent, SHADER_ACCENT[0], SHADER_ACCENT[1], SHADER_ACCENT[2]);
+      gl.uniform3f(uPaper, paperRgb[0], paperRgb[1], paperRgb[2]);
       gl.drawArrays(gl.TRIANGLES, 0, 6);
       shaderState.rafId = requestAnimationFrame(frame);
     }
@@ -5792,9 +5949,9 @@ void main() {
           try {
             const rect = shaderTarget.getBoundingClientRect();
             if (rect.width === 0 || rect.height === 0) return;
-            const blob = await captureElementToBlob(shaderTarget, null, rect);
+            const { blob, paper } = await captureElementToBlob(shaderTarget, null, rect);
             if (blob && state === 'GENERATING') {
-              showShaderOverlay(shaderTarget, blob, rect);
+              showShaderOverlay(shaderTarget, blob, rect, paper);
             }
           } catch (err) {
             console.warn('[impeccable] shader resume failed:', err);
diff --git a/.pi/skills/impeccable/scripts/live-browser.js b/.pi/skills/impeccable/scripts/live-browser.js
index 028363916..f1e525786 100644
--- a/.pi/skills/impeccable/scripts/live-browser.js
+++ b/.pi/skills/impeccable/scripts/live-browser.js
@@ -5209,9 +5209,11 @@
     return '#ffffff';
   }
 
-  // Capture the element (with current annotations baked in) and return a PNG
-  // Blob. Shared between the Go flow (uploads it to the server) and the
-  // debug toggle (displays it as an overlay for side-by-side comparison).
+  // Capture the element (with current annotations baked in) and return
+  // { blob, paper }: the PNG Blob, plus the representative backdrop tone for the
+  // shader's halftone ground (so capture, upload, and shader all agree on what
+  // sits behind the element). Shared between the Go flow (uploads the blob) and
+  // the shader-resume path.
   async function captureElementToBlob(el, snapshot, rect) {
     try { if (document.fonts?.ready) await document.fonts.ready; } catch {}
     const hasAnnotations = snapshot && (snapshot.comments.length > 0 || snapshot.strokes.length > 0);
@@ -5229,12 +5231,46 @@
     try {
       const ms = await loadModernScreenshot();
       const fontCssText = await collectFontCssText();
-      const backgroundColor = resolveCanvasBackground(el);
-      return await ms.domToBlob(el, {
+      const opts = {
         scale: Math.min(window.devicePixelRatio || 1, 2),
         font: fontCssText ? { cssText: fontCssText } : undefined,
-        ...(backgroundColor ? { backgroundColor } : {}),
-      });
+      };
+      const bg = resolveCanvasBackground(el);
+      // Fast path: the element paints its own background, or an opaque ancestor
+      // color was found. modern-screenshot bakes that color; paper matches it.
+      if (bg !== '#ffffff') {
+        const blob = await ms.domToBlob(el, { ...opts, ...(bg ? { backgroundColor: bg } : {}) });
+        return { blob, paper: bg ? cssColorToRgb01(bg) : resolvePaperRgb(el) };
+      }
+      // Transparent up to the root. The visible backdrop may still come from an
+      // ancestor's background-image or a covering positioned layer (e.g. a hero
+      // art div) that the color walk can't see. Capture that ancestor and crop
+      // to the element so the real backdrop is embedded — correct for both the
+      // shader and the screenshot sent to the model. Fall back to white only
+      // when nothing is actually painted behind the element.
+      const backdrop = findBackdropAncestor(el);
+      if (!backdrop) {
+        const blob = await ms.domToBlob(el, { ...opts, backgroundColor: '#ffffff' });
+        return { blob, paper: SHADER_PAPER_FALLBACK };
+      }
+      const ancestorCanvas = await ms.domToCanvas(backdrop, opts);
+      const S = opts.scale;
+      const er = el.getBoundingClientRect();
+      const ar = backdrop.getBoundingClientRect();
+      const sx = (er.left - ar.left) * S, sy = (er.top - ar.top) * S;
+      const sw = er.width * S, sh = er.height * S;
+      const crop = document.createElement('canvas');
+      crop.width = Math.max(1, Math.round(sw));
+      crop.height = Math.max(1, Math.round(sh));
+      const cctx = crop.getContext('2d', { willReadFrequently: true });
+      cctx.drawImage(ancestorCanvas, sx, sy, sw, sh, 0, 0, crop.width, crop.height);
+      // Ground = backdrop sampled around the element, falling back to the crop
+      // mean only if the surround is fully transparent.
+      const actx = ancestorCanvas.getContext('2d', { willReadFrequently: true });
+      const paper = sampleSurroundingRgb(actx, sx, sy, sw, sh, ancestorCanvas.width, ancestorCanvas.height)
+        || averageRgb01(cctx, crop.width, crop.height);
+      const blob = await new Promise((res) => crop.toBlob(res, 'image/png'));
+      return { blob, paper };
     } finally {
       if (annotNode) annotNode.remove();
       if (savedPosition !== null) el.style.position = savedPosition;
@@ -5244,15 +5280,16 @@
   async function captureAndEmit(el, basePayload, snapshot, rect) {
     let screenshotPath;
     let blob;
+    let paper;
     try {
-      blob = await captureElementToBlob(el, snapshot, rect);
+      ({ blob, paper } = await captureElementToBlob(el, snapshot, rect));
     } catch (err) {
       console.warn('[impeccable] capture failed, proceeding without screenshot:', err);
     }
     // Light up the shader overlay the moment capture is ready — no reason to
     // wait for the upload to complete before the user sees something alive.
     if (blob && state === 'GENERATING') {
-      showShaderOverlay(el, blob, rect);
+      showShaderOverlay(el, blob, rect, paper);
     }
     // Only upload + forward the screenshot when annotations (comments/strokes)
     // are present. Without annotations the image is pure visual anchoring —
@@ -5300,6 +5337,7 @@ uniform sampler2D u_texture;
 uniform float u_time;
 uniform vec2 u_resolution;
 uniform vec3 u_accent;
+uniform vec3 u_paper;
 varying vec2 v_uv;
 
 // Asymmetric roller band. Product of two one-sided smoothsteps — peaks at
@@ -5327,23 +5365,139 @@ void main() {
   vec2 cellUv = fract(gridUv) - 0.5;
   vec2 sampleCenter = (cellId + 0.5) * cellPx / u_resolution;
   vec3 cellImg = texture2D(u_texture, sampleCenter).rgb;
-  float luma = dot(cellImg, vec3(0.299, 0.587, 0.114));
-  // Darker cells → bigger kinpaku dots (classic risograph halftone curve).
-  float radius = sqrt(clamp(1.0 - luma, 0.0, 1.0)) * 0.56;
+  // Dot size tracks how much the cell DIFFERS from the element's own ground
+  // (u_paper), not absolute darkness. So the content — text, buttons, anything
+  // that deviates from the background — always becomes the dots, on light AND
+  // dark surfaces. A plain darkness curve inverts on dark elements: the dark
+  // background fills with ink and the lighter content punches holes instead.
+  // Capped below the cell half-width so dense content stays separated dots.
+  float contrast = clamp(length(cellImg - u_paper) / 1.732, 0.0, 1.0);
+  float radius = min(sqrt(contrast) * 0.6, 0.38);
   float dotMask = smoothstep(radius + 0.06, radius, length(cellUv));
-  vec3 paper = vec3(0.975, 0.965, 0.955);
-  vec3 dotLayer = mix(paper, u_accent, dotMask);
-
-  // Blend the halftone layer in where the roller is passing; leave the
-  // element pristine elsewhere.
-  vec3 base = texture2D(u_texture, uv).rgb;
-  gl_FragColor = vec4(mix(base, dotLayer, band), 1.0);
+  // Two-stage dissolve as the roller passes, so the element is rebuilt purely
+  // from dot size (its own halftone) and never bleeds through as raw pixels
+  // behind the dots:
+  //   1. cover  — the element flattens to the uniform paper ground first.
+  //   2. dotAmt — kinpaku dots then emerge, sized by each cell's luma.
+  // A plain mix(base, halftone, band) instead left the raw element visible
+  // through the band's soft core/trail. The paper ground is u_paper (the
+  // element's own bg tone) rather than a fixed white, so the dissolve reads the
+  // same over light and dark surfaces.
+  vec4 tex = texture2D(u_texture, uv);
+  vec3 base = tex.rgb;
+  float cover = smoothstep(0.0, 0.35, band);
+  float dotAmt = dotMask * smoothstep(0.15, 0.6, band);
+  vec3 ground = mix(base, u_paper, cover);
+  // Carry the capture's own alpha through, so a rounded corner or any genuinely
+  // transparent region stays transparent (the live backdrop shows through the
+  // canvas) instead of rendering as solid black.
+  gl_FragColor = vec4(mix(ground, u_accent, dotAmt), tex.a);
 }`;
 
   // Kinpaku gold converted to approximate sRGB 0-1 (matches oklch(84% 0.19 80.46))
   const SHADER_ACCENT = [1.0, 0.78, 0.31];
+  // Fallback ground when an element and all its ancestors are transparent —
+  // matches the original off-white risograph paper.
+  const SHADER_PAPER_FALLBACK = [0.975, 0.965, 0.955];
   let shaderState = null; // { canvas, gl, program, texture, rafId, startTime }
 
+  // The element's effective background tone, used as the uniform halftone
+  // ground so content dissolves into dots over it. Unlike resolveCanvasBackground
+  // (which returns null when the element paints its own bg), this always returns
+  // a usable color: the element's own background if any, else the nearest opaque
+  // ancestor, else the paper fallback.
+  // Rasterize any CSS color (oklch, color(), named, hex, rgb) through a 1x1
+  // canvas and read back the sRGB pixel. String-parsing computed colors is a
+  // trap: Chrome returns backgroundColor as oklch()/color() for oklch inputs,
+  // which a hex/rgb regex misses — every site token would fall back to white.
+  let colorParseCtx = null;
+  function cssColorToRgb01(str) {
+    if (!colorParseCtx) {
+      colorParseCtx = document.createElement('canvas').getContext('2d', { willReadFrequently: true });
+    }
+    // Clear first: the ctx is cached across calls, so a semi-transparent color
+    // would otherwise blend (source-over) with the previous call's leftover
+    // pixel, making the result depend on call history.
+    colorParseCtx.clearRect(0, 0, 1, 1);
+    colorParseCtx.fillStyle = '#000'; // invalid input leaves this default
+    colorParseCtx.fillStyle = str;
+    colorParseCtx.fillRect(0, 0, 1, 1);
+    const d = colorParseCtx.getImageData(0, 0, 1, 1).data;
+    return [d[0] / 255, d[1] / 255, d[2] / 255];
+  }
+  function resolvePaperRgb(el) {
+    let node = el;
+    while (node) {
+      const bg = getComputedStyle(node).backgroundColor;
+      if (!isTransparentColor(bg)) return cssColorToRgb01(bg);
+      node = node.parentElement;
+    }
+    return SHADER_PAPER_FALLBACK;
+  }
+
+  // When an element is transparent up to the root, its visible backdrop can
+  // still come from an ancestor's background-image or a covering positioned
+  // layer that is a *child* of an ancestor (e.g. a hero's absolute art div) —
+  // neither of which the ancestor background-COLOR walk can see. Return the
+  // nearest such ancestor so we can capture it and crop, embedding the real
+  // backdrop. Returns null when nothing is actually painted behind the element
+  // (genuinely transparent → white is correct).
+  function paintsBackdrop(node) {
+    const s = getComputedStyle(node);
+    if (s.backgroundImage && s.backgroundImage !== 'none') return true;
+    const nr = node.getBoundingClientRect();
+    for (const child of node.children) {
+      const ccs = getComputedStyle(child);
+      if (ccs.position !== 'absolute' && ccs.position !== 'fixed') continue;
+      const paints = !isTransparentColor(ccs.backgroundColor)
+        || (ccs.backgroundImage && ccs.backgroundImage !== 'none');
+      if (!paints) continue;
+      const cr = child.getBoundingClientRect();
+      if (cr.width >= nr.width * 0.9 && cr.height >= nr.height * 0.9) return true;
+    }
+    return false;
+  }
+  function findBackdropAncestor(el) {
+    let node = el.parentElement;
+    while (node && node !== node.ownerDocument.documentElement) {
+      if (paintsBackdrop(node)) return node;
+      node = node.parentElement;
+    }
+    return null;
+  }
+
+  // Mean sRGB (0-1) of a canvas region, used as the halftone ground when the
+  // backdrop was captured from an ancestor rather than read from a CSS color.
+  function averageRgb01(ctx, w, h) {
+    const data = ctx.getImageData(0, 0, w, h).data;
+    let r = 0, g = 0, b = 0, n = 0;
+    // Stride a few pixels for speed; exact average is unnecessary for a ground.
+    for (let i = 0; i < data.length; i += 16) { r += data[i]; g += data[i + 1]; b += data[i + 2]; n++; }
+    return n ? [r / n / 255, g / n / 255, b / n / 255] : SHADER_PAPER_FALLBACK;
+  }
+
+  // Average the backdrop sampled just OUTSIDE an element's rect within a larger
+  // canvas. The ground tone for the dissolve must be the real backdrop, not the
+  // mean of the element's own crop — averaging the crop folds in the element's
+  // content (e.g. bright heading text), pulling the ground toward muddy gray.
+  function sampleSurroundingRgb(ctx, sx, sy, sw, sh, W, H) {
+    const pad = Math.max(2, Math.round(Math.min(sw, sh) * 0.12));
+    const fx = [0.2, 0.5, 0.8].map((f) => sx + sw * f);
+    const fy = [0.2, 0.5, 0.8].map((f) => sy + sh * f);
+    const pts = [];
+    for (const x of fx) { pts.push([x, sy - pad], [x, sy + sh + pad]); }
+    for (const y of fy) { pts.push([sx - pad, y], [sx + sw + pad, y]); }
+    let r = 0, g = 0, b = 0, n = 0;
+    for (const [px, py] of pts) {
+      const cx = Math.max(0, Math.min(W - 1, Math.round(px)));
+      const cy = Math.max(0, Math.min(H - 1, Math.round(py)));
+      const d = ctx.getImageData(cx, cy, 1, 1).data;
+      if (d[3] === 0) continue; // outside the ancestor's paint
+      r += d[0]; g += d[1]; b += d[2]; n++;
+    }
+    return n ? [r / n / 255, g / n / 255, b / n / 255] : null;
+  }
+
   function compileShader(gl, type, source) {
     const sh = gl.createShader(type);
     gl.shaderSource(sh, source);
@@ -5376,7 +5530,7 @@ void main() {
     shaderState = null;
   }
 
-  async function showShaderOverlay(el, blob, rect) {
+  async function showShaderOverlay(el, blob, rect, paper) {
     hideShaderOverlay();
     if (!blob || !el) return;
     const canvas = document.createElement('canvas');
@@ -5474,7 +5628,9 @@ void main() {
     const uTime = gl.getUniformLocation(program, 'u_time');
     const uRes = gl.getUniformLocation(program, 'u_resolution');
     const uAccent = gl.getUniformLocation(program, 'u_accent');
+    const uPaper = gl.getUniformLocation(program, 'u_paper');
     const uTex = gl.getUniformLocation(program, 'u_texture');
+    const paperRgb = paper || resolvePaperRgb(el);
     const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 
     shaderState = { canvas, gl, program, texture, rafId: 0, startTime: performance.now(), reduced };
@@ -5490,6 +5646,7 @@ void main() {
       gl.uniform1f(uTime, t);
       gl.uniform2f(uRes, canvas.width, canvas.height);
       gl.uniform3f(uAccent, SHADER_ACCENT[0], SHADER_ACCENT[1], SHADER_ACCENT[2]);
+      gl.uniform3f(uPaper, paperRgb[0], paperRgb[1], paperRgb[2]);
       gl.drawArrays(gl.TRIANGLES, 0, 6);
       shaderState.rafId = requestAnimationFrame(frame);
     }
@@ -5792,9 +5949,9 @@ void main() {
           try {
             const rect = shaderTarget.getBoundingClientRect();
             if (rect.width === 0 || rect.height === 0) return;
-            const blob = await captureElementToBlob(shaderTarget, null, rect);
+            const { blob, paper } = await captureElementToBlob(shaderTarget, null, rect);
             if (blob && state === 'GENERATING') {
-              showShaderOverlay(shaderTarget, blob, rect);
+              showShaderOverlay(shaderTarget, blob, rect, paper);
             }
           } catch (err) {
             console.warn('[impeccable] shader resume failed:', err);
diff --git a/.qoder/skills/impeccable/scripts/live-browser.js b/.qoder/skills/impeccable/scripts/live-browser.js
index 028363916..f1e525786 100644
--- a/.qoder/skills/impeccable/scripts/live-browser.js
+++ b/.qoder/skills/impeccable/scripts/live-browser.js
@@ -5209,9 +5209,11 @@
     return '#ffffff';
   }
 
-  // Capture the element (with current annotations baked in) and return a PNG
-  // Blob. Shared between the Go flow (uploads it to the server) and the
-  // debug toggle (displays it as an overlay for side-by-side comparison).
+  // Capture the element (with current annotations baked in) and return
+  // { blob, paper }: the PNG Blob, plus the representative backdrop tone for the
+  // shader's halftone ground (so capture, upload, and shader all agree on what
+  // sits behind the element). Shared between the Go flow (uploads the blob) and
+  // the shader-resume path.
   async function captureElementToBlob(el, snapshot, rect) {
     try { if (document.fonts?.ready) await document.fonts.ready; } catch {}
     const hasAnnotations = snapshot && (snapshot.comments.length > 0 || snapshot.strokes.length > 0);
@@ -5229,12 +5231,46 @@
     try {
       const ms = await loadModernScreenshot();
       const fontCssText = await collectFontCssText();
-      const backgroundColor = resolveCanvasBackground(el);
-      return await ms.domToBlob(el, {
+      const opts = {
         scale: Math.min(window.devicePixelRatio || 1, 2),
         font: fontCssText ? { cssText: fontCssText } : undefined,
-        ...(backgroundColor ? { backgroundColor } : {}),
-      });
+      };
+      const bg = resolveCanvasBackground(el);
+      // Fast path: the element paints its own background, or an opaque ancestor
+      // color was found. modern-screenshot bakes that color; paper matches it.
+      if (bg !== '#ffffff') {
+        const blob = await ms.domToBlob(el, { ...opts, ...(bg ? { backgroundColor: bg } : {}) });
+        return { blob, paper: bg ? cssColorToRgb01(bg) : resolvePaperRgb(el) };
+      }
+      // Transparent up to the root. The visible backdrop may still come from an
+      // ancestor's background-image or a covering positioned layer (e.g. a hero
+      // art div) that the color walk can't see. Capture that ancestor and crop
+      // to the element so the real backdrop is embedded — correct for both the
+      // shader and the screenshot sent to the model. Fall back to white only
+      // when nothing is actually painted behind the element.
+      const backdrop = findBackdropAncestor(el);
+      if (!backdrop) {
+        const blob = await ms.domToBlob(el, { ...opts, backgroundColor: '#ffffff' });
+        return { blob, paper: SHADER_PAPER_FALLBACK };
+      }
+      const ancestorCanvas = await ms.domToCanvas(backdrop, opts);
+      const S = opts.scale;
+      const er = el.getBoundingClientRect();
+      const ar = backdrop.getBoundingClientRect();
+      const sx = (er.left - ar.left) * S, sy = (er.top - ar.top) * S;
+      const sw = er.width * S, sh = er.height * S;
+      const crop = document.createElement('canvas');
+      crop.width = Math.max(1, Math.round(sw));
+      crop.height = Math.max(1, Math.round(sh));
+      const cctx = crop.getContext('2d', { willReadFrequently: true });
+      cctx.drawImage(ancestorCanvas, sx, sy, sw, sh, 0, 0, crop.width, crop.height);
+      // Ground = backdrop sampled around the element, falling back to the crop
+      // mean only if the surround is fully transparent.
+      const actx = ancestorCanvas.getContext('2d', { willReadFrequently: true });
+      const paper = sampleSurroundingRgb(actx, sx, sy, sw, sh, ancestorCanvas.width, ancestorCanvas.height)
+        || averageRgb01(cctx, crop.width, crop.height);
+      const blob = await new Promise((res) => crop.toBlob(res, 'image/png'));
+      return { blob, paper };
     } finally {
       if (annotNode) annotNode.remove();
       if (savedPosition !== null) el.style.position = savedPosition;
@@ -5244,15 +5280,16 @@
   async function captureAndEmit(el, basePayload, snapshot, rect) {
     let screenshotPath;
     let blob;
+    let paper;
     try {
-      blob = await captureElementToBlob(el, snapshot, rect);
+      ({ blob, paper } = await captureElementToBlob(el, snapshot, rect));
     } catch (err) {
       console.warn('[impeccable] capture failed, proceeding without screenshot:', err);
     }
     // Light up the shader overlay the moment capture is ready — no reason to
     // wait for the upload to complete before the user sees something alive.
     if (blob && state === 'GENERATING') {
-      showShaderOverlay(el, blob, rect);
+      showShaderOverlay(el, blob, rect, paper);
     }
     // Only upload + forward the screenshot when annotations (comments/strokes)
     // are present. Without annotations the image is pure visual anchoring —
@@ -5300,6 +5337,7 @@ uniform sampler2D u_texture;
 uniform float u_time;
 uniform vec2 u_resolution;
 uniform vec3 u_accent;
+uniform vec3 u_paper;
 varying vec2 v_uv;
 
 // Asymmetric roller band. Product of two one-sided smoothsteps — peaks at
@@ -5327,23 +5365,139 @@ void main() {
   vec2 cellUv = fract(gridUv) - 0.5;
   vec2 sampleCenter = (cellId + 0.5) * cellPx / u_resolution;
   vec3 cellImg = texture2D(u_texture, sampleCenter).rgb;
-  float luma = dot(cellImg, vec3(0.299, 0.587, 0.114));
-  // Darker cells → bigger kinpaku dots (classic risograph halftone curve).
-  float radius = sqrt(clamp(1.0 - luma, 0.0, 1.0)) * 0.56;
+  // Dot size tracks how much the cell DIFFERS from the element's own ground
+  // (u_paper), not absolute darkness. So the content — text, buttons, anything
+  // that deviates from the background — always becomes the dots, on light AND
+  // dark surfaces. A plain darkness curve inverts on dark elements: the dark
+  // background fills with ink and the lighter content punches holes instead.
+  // Capped below the cell half-width so dense content stays separated dots.
+  float contrast = clamp(length(cellImg - u_paper) / 1.732, 0.0, 1.0);
+  float radius = min(sqrt(contrast) * 0.6, 0.38);
   float dotMask = smoothstep(radius + 0.06, radius, length(cellUv));
-  vec3 paper = vec3(0.975, 0.965, 0.955);
-  vec3 dotLayer = mix(paper, u_accent, dotMask);
-
-  // Blend the halftone layer in where the roller is passing; leave the
-  // element pristine elsewhere.
-  vec3 base = texture2D(u_texture, uv).rgb;
-  gl_FragColor = vec4(mix(base, dotLayer, band), 1.0);
+  // Two-stage dissolve as the roller passes, so the element is rebuilt purely
+  // from dot size (its own halftone) and never bleeds through as raw pixels
+  // behind the dots:
+  //   1. cover  — the element flattens to the uniform paper ground first.
+  //   2. dotAmt — kinpaku dots then emerge, sized by each cell's luma.
+  // A plain mix(base, halftone, band) instead left the raw element visible
+  // through the band's soft core/trail. The paper ground is u_paper (the
+  // element's own bg tone) rather than a fixed white, so the dissolve reads the
+  // same over light and dark surfaces.
+  vec4 tex = texture2D(u_texture, uv);
+  vec3 base = tex.rgb;
+  float cover = smoothstep(0.0, 0.35, band);
+  float dotAmt = dotMask * smoothstep(0.15, 0.6, band);
+  vec3 ground = mix(base, u_paper, cover);
+  // Carry the capture's own alpha through, so a rounded corner or any genuinely
+  // transparent region stays transparent (the live backdrop shows through the
+  // canvas) instead of rendering as solid black.
+  gl_FragColor = vec4(mix(ground, u_accent, dotAmt), tex.a);
 }`;
 
   // Kinpaku gold converted to approximate sRGB 0-1 (matches oklch(84% 0.19 80.46))
   const SHADER_ACCENT = [1.0, 0.78, 0.31];
+  // Fallback ground when an element and all its ancestors are transparent —
+  // matches the original off-white risograph paper.
+  const SHADER_PAPER_FALLBACK = [0.975, 0.965, 0.955];
   let shaderState = null; // { canvas, gl, program, texture, rafId, startTime }
 
+  // The element's effective background tone, used as the uniform halftone
+  // ground so content dissolves into dots over it. Unlike resolveCanvasBackground
+  // (which returns null when the element paints its own bg), this always returns
+  // a usable color: the element's own background if any, else the nearest opaque
+  // ancestor, else the paper fallback.
+  // Rasterize any CSS color (oklch, color(), named, hex, rgb) through a 1x1
+  // canvas and read back the sRGB pixel. String-parsing computed colors is a
+  // trap: Chrome returns backgroundColor as oklch()/color() for oklch inputs,
+  // which a hex/rgb regex misses — every site token would fall back to white.
+  let colorParseCtx = null;
+  function cssColorToRgb01(str) {
+    if (!colorParseCtx) {
+      colorParseCtx = document.createElement('canvas').getContext('2d', { willReadFrequently: true });
+    }
+    // Clear first: the ctx is cached across calls, so a semi-transparent color
+    // would otherwise blend (source-over) with the previous call's leftover
+    // pixel, making the result depend on call history.
+    colorParseCtx.clearRect(0, 0, 1, 1);
+    colorParseCtx.fillStyle = '#000'; // invalid input leaves this default
+    colorParseCtx.fillStyle = str;
+    colorParseCtx.fillRect(0, 0, 1, 1);
+    const d = colorParseCtx.getImageData(0, 0, 1, 1).data;
+    return [d[0] / 255, d[1] / 255, d[2] / 255];
+  }
+  function resolvePaperRgb(el) {
+    let node = el;
+    while (node) {
+      const bg = getComputedStyle(node).backgroundColor;
+      if (!isTransparentColor(bg)) return cssColorToRgb01(bg);
+      node = node.parentElement;
+    }
+    return SHADER_PAPER_FALLBACK;
+  }
+
+  // When an element is transparent up to the root, its visible backdrop can
+  // still come from an ancestor's background-image or a covering positioned
+  // layer that is a *child* of an ancestor (e.g. a hero's absolute art div) —
+  // neither of which the ancestor background-COLOR walk can see. Return the
+  // nearest such ancestor so we can capture it and crop, embedding the real
+  // backdrop. Returns null when nothing is actually painted behind the element
+  // (genuinely transparent → white is correct).
+  function paintsBackdrop(node) {
+    const s = getComputedStyle(node);
+    if (s.backgroundImage && s.backgroundImage !== 'none') return true;
+    const nr = node.getBoundingClientRect();
+    for (const child of node.children) {
+      const ccs = getComputedStyle(child);
+      if (ccs.position !== 'absolute' && ccs.position !== 'fixed') continue;
+      const paints = !isTransparentColor(ccs.backgroundColor)
+        || (ccs.backgroundImage && ccs.backgroundImage !== 'none');
+      if (!paints) continue;
+      const cr = child.getBoundingClientRect();
+      if (cr.width >= nr.width * 0.9 && cr.height >= nr.height * 0.9) return true;
+    }
+    return false;
+  }
+  function findBackdropAncestor(el) {
+    let node = el.parentElement;
+    while (node && node !== node.ownerDocument.documentElement) {
+      if (paintsBackdrop(node)) return node;
+      node = node.parentElement;
+    }
+    return null;
+  }
+
+  // Mean sRGB (0-1) of a canvas region, used as the halftone ground when the
+  // backdrop was captured from an ancestor rather than read from a CSS color.
+  function averageRgb01(ctx, w, h) {
+    const data = ctx.getImageData(0, 0, w, h).data;
+    let r = 0, g = 0, b = 0, n = 0;
+    // Stride a few pixels for speed; exact average is unnecessary for a ground.
+    for (let i = 0; i < data.length; i += 16) { r += data[i]; g += data[i + 1]; b += data[i + 2]; n++; }
+    return n ? [r / n / 255, g / n / 255, b / n / 255] : SHADER_PAPER_FALLBACK;
+  }
+
+  // Average the backdrop sampled just OUTSIDE an element's rect within a larger
+  // canvas. The ground tone for the dissolve must be the real backdrop, not the
+  // mean of the element's own crop — averaging the crop folds in the element's
+  // content (e.g. bright heading text), pulling the ground toward muddy gray.
+  function sampleSurroundingRgb(ctx, sx, sy, sw, sh, W, H) {
+    const pad = Math.max(2, Math.round(Math.min(sw, sh) * 0.12));
+    const fx = [0.2, 0.5, 0.8].map((f) => sx + sw * f);
+    const fy = [0.2, 0.5, 0.8].map((f) => sy + sh * f);
+    const pts = [];
+    for (const x of fx) { pts.push([x, sy - pad], [x, sy + sh + pad]); }
+    for (const y of fy) { pts.push([sx - pad, y], [sx + sw + pad, y]); }
+    let r = 0, g = 0, b = 0, n = 0;
+    for (const [px, py] of pts) {
+      const cx = Math.max(0, Math.min(W - 1, Math.round(px)));
+      const cy = Math.max(0, Math.min(H - 1, Math.round(py)));
+      const d = ctx.getImageData(cx, cy, 1, 1).data;
+      if (d[3] === 0) continue; // outside the ancestor's paint
+      r += d[0]; g += d[1]; b += d[2]; n++;
+    }
+    return n ? [r / n / 255, g / n / 255, b / n / 255] : null;
+  }
+
   function compileShader(gl, type, source) {
     const sh = gl.createShader(type);
     gl.shaderSource(sh, source);
@@ -5376,7 +5530,7 @@ void main() {
     shaderState = null;
   }
 
-  async function showShaderOverlay(el, blob, rect) {
+  async function showShaderOverlay(el, blob, rect, paper) {
     hideShaderOverlay();
     if (!blob || !el) return;
     const canvas = document.createElement('canvas');
@@ -5474,7 +5628,9 @@ void main() {
     const uTime = gl.getUniformLocation(program, 'u_time');
     const uRes = gl.getUniformLocation(program, 'u_resolution');
     const uAccent = gl.getUniformLocation(program, 'u_accent');
+    const uPaper = gl.getUniformLocation(program, 'u_paper');
     const uTex = gl.getUniformLocation(program, 'u_texture');
+    const paperRgb = paper || resolvePaperRgb(el);
     const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 
     shaderState = { canvas, gl, program, texture, rafId: 0, startTime: performance.now(), reduced };
@@ -5490,6 +5646,7 @@ void main() {
       gl.uniform1f(uTime, t);
       gl.uniform2f(uRes, canvas.width, canvas.height);
       gl.uniform3f(uAccent, SHADER_ACCENT[0], SHADER_ACCENT[1], SHADER_ACCENT[2]);
+      gl.uniform3f(uPaper, paperRgb[0], paperRgb[1], paperRgb[2]);
       gl.drawArrays(gl.TRIANGLES, 0, 6);
       shaderState.rafId = requestAnimationFrame(frame);
     }
@@ -5792,9 +5949,9 @@ void main() {
           try {
             const rect = shaderTarget.getBoundingClientRect();
             if (rect.width === 0 || rect.height === 0) return;
-            const blob = await captureElementToBlob(shaderTarget, null, rect);
+            const { blob, paper } = await captureElementToBlob(shaderTarget, null, rect);
             if (blob && state === 'GENERATING') {
-              showShaderOverlay(shaderTarget, blob, rect);
+              showShaderOverlay(shaderTarget, blob, rect, paper);
             }
           } catch (err) {
             console.warn('[impeccable] shader resume failed:', err);
diff --git a/.rovodev/skills/impeccable/scripts/live-browser.js b/.rovodev/skills/impeccable/scripts/live-browser.js
index 028363916..f1e525786 100644
--- a/.rovodev/skills/impeccable/scripts/live-browser.js
+++ b/.rovodev/skills/impeccable/scripts/live-browser.js
@@ -5209,9 +5209,11 @@
     return '#ffffff';
   }
 
-  // Capture the element (with current annotations baked in) and return a PNG
-  // Blob. Shared between the Go flow (uploads it to the server) and the
-  // debug toggle (displays it as an overlay for side-by-side comparison).
+  // Capture the element (with current annotations baked in) and return
+  // { blob, paper }: the PNG Blob, plus the representative backdrop tone for the
+  // shader's halftone ground (so capture, upload, and shader all agree on what
+  // sits behind the element). Shared between the Go flow (uploads the blob) and
+  // the shader-resume path.
   async function captureElementToBlob(el, snapshot, rect) {
     try { if (document.fonts?.ready) await document.fonts.ready; } catch {}
     const hasAnnotations = snapshot && (snapshot.comments.length > 0 || snapshot.strokes.length > 0);
@@ -5229,12 +5231,46 @@
     try {
       const ms = await loadModernScreenshot();
       const fontCssText = await collectFontCssText();
-      const backgroundColor = resolveCanvasBackground(el);
-      return await ms.domToBlob(el, {
+      const opts = {
         scale: Math.min(window.devicePixelRatio || 1, 2),
         font: fontCssText ? { cssText: fontCssText } : undefined,
-        ...(backgroundColor ? { backgroundColor } : {}),
-      });
+      };
+      const bg = resolveCanvasBackground(el);
+      // Fast path: the element paints its own background, or an opaque ancestor
+      // color was found. modern-screenshot bakes that color; paper matches it.
+      if (bg !== '#ffffff') {
+        const blob = await ms.domToBlob(el, { ...opts, ...(bg ? { backgroundColor: bg } : {}) });
+        return { blob, paper: bg ? cssColorToRgb01(bg) : resolvePaperRgb(el) };
+      }
+      // Transparent up to the root. The visible backdrop may still come from an
+      // ancestor's background-image or a covering positioned layer (e.g. a hero
+      // art div) that the color walk can't see. Capture that ancestor and crop
+      // to the element so the real backdrop is embedded — correct for both the
+      // shader and the screenshot sent to the model. Fall back to white only
+      // when nothing is actually painted behind the element.
+      const backdrop = findBackdropAncestor(el);
+      if (!backdrop) {
+        const blob = await ms.domToBlob(el, { ...opts, backgroundColor: '#ffffff' });
+        return { blob, paper: SHADER_PAPER_FALLBACK };
+      }
+      const ancestorCanvas = await ms.domToCanvas(backdrop, opts);
+      const S = opts.scale;
+      const er = el.getBoundingClientRect();
+      const ar = backdrop.getBoundingClientRect();
+      const sx = (er.left - ar.left) * S, sy = (er.top - ar.top) * S;
+      const sw = er.width * S, sh = er.height * S;
+      const crop = document.createElement('canvas');
+      crop.width = Math.max(1, Math.round(sw));
+      crop.height = Math.max(1, Math.round(sh));
+      const cctx = crop.getContext('2d', { willReadFrequently: true });
+      cctx.drawImage(ancestorCanvas, sx, sy, sw, sh, 0, 0, crop.width, crop.height);
+      // Ground = backdrop sampled around the element, falling back to the crop
+      // mean only if the surround is fully transparent.
+      const actx = ancestorCanvas.getContext('2d', { willReadFrequently: true });
+      const paper = sampleSurroundingRgb(actx, sx, sy, sw, sh, ancestorCanvas.width, ancestorCanvas.height)
+        || averageRgb01(cctx, crop.width, crop.height);
+      const blob = await new Promise((res) => crop.toBlob(res, 'image/png'));
+      return { blob, paper };
     } finally {
       if (annotNode) annotNode.remove();
       if (savedPosition !== null) el.style.position = savedPosition;
@@ -5244,15 +5280,16 @@
   async function captureAndEmit(el, basePayload, snapshot, rect) {
     let screenshotPath;
     let blob;
+    let paper;
     try {
-      blob = await captureElementToBlob(el, snapshot, rect);
+      ({ blob, paper } = await captureElementToBlob(el, snapshot, rect));
     } catch (err) {
       console.warn('[impeccable] capture failed, proceeding without screenshot:', err);
     }
     // Light up the shader overlay the moment capture is ready — no reason to
     // wait for the upload to complete before the user sees something alive.
     if (blob && state === 'GENERATING') {
-      showShaderOverlay(el, blob, rect);
+      showShaderOverlay(el, blob, rect, paper);
     }
     // Only upload + forward the screenshot when annotations (comments/strokes)
     // are present. Without annotations the image is pure visual anchoring —
@@ -5300,6 +5337,7 @@ uniform sampler2D u_texture;
 uniform float u_time;
 uniform vec2 u_resolution;
 uniform vec3 u_accent;
+uniform vec3 u_paper;
 varying vec2 v_uv;
 
 // Asymmetric roller band. Product of two one-sided smoothsteps — peaks at
@@ -5327,23 +5365,139 @@ void main() {
   vec2 cellUv = fract(gridUv) - 0.5;
   vec2 sampleCenter = (cellId + 0.5) * cellPx / u_resolution;
   vec3 cellImg = texture2D(u_texture, sampleCenter).rgb;
-  float luma = dot(cellImg, vec3(0.299, 0.587, 0.114));
-  // Darker cells → bigger kinpaku dots (classic risograph halftone curve).
-  float radius = sqrt(clamp(1.0 - luma, 0.0, 1.0)) * 0.56;
+  // Dot size tracks how much the cell DIFFERS from the element's own ground
+  // (u_paper), not absolute darkness. So the content — text, buttons, anything
+  // that deviates from the background — always becomes the dots, on light AND
+  // dark surfaces. A plain darkness curve inverts on dark elements: the dark
+  // background fills with ink and the lighter content punches holes instead.
+  // Capped below the cell half-width so dense content stays separated dots.
+  float contrast = clamp(length(cellImg - u_paper) / 1.732, 0.0, 1.0);
+  float radius = min(sqrt(contrast) * 0.6, 0.38);
   float dotMask = smoothstep(radius + 0.06, radius, length(cellUv));
-  vec3 paper = vec3(0.975, 0.965, 0.955);
-  vec3 dotLayer = mix(paper, u_accent, dotMask);
-
-  // Blend the halftone layer in where the roller is passing; leave the
-  // element pristine elsewhere.
-  vec3 base = texture2D(u_texture, uv).rgb;
-  gl_FragColor = vec4(mix(base, dotLayer, band), 1.0);
+  // Two-stage dissolve as the roller passes, so the element is rebuilt purely
+  // from dot size (its own halftone) and never bleeds through as raw pixels
+  // behind the dots:
+  //   1. cover  — the element flattens to the uniform paper ground first.
+  //   2. dotAmt — kinpaku dots then emerge, sized by each cell's luma.
+  // A plain mix(base, halftone, band) instead left the raw element visible
+  // through the band's soft core/trail. The paper ground is u_paper (the
+  // element's own bg tone) rather than a fixed white, so the dissolve reads the
+  // same over light and dark surfaces.
+  vec4 tex = texture2D(u_texture, uv);
+  vec3 base = tex.rgb;
+  float cover = smoothstep(0.0, 0.35, band);
+  float dotAmt = dotMask * smoothstep(0.15, 0.6, band);
+  vec3 ground = mix(base, u_paper, cover);
+  // Carry the capture's own alpha through, so a rounded corner or any genuinely
+  // transparent region stays transparent (the live backdrop shows through the
+  // canvas) instead of rendering as solid black.
+  gl_FragColor = vec4(mix(ground, u_accent, dotAmt), tex.a);
 }`;
 
   // Kinpaku gold converted to approximate sRGB 0-1 (matches oklch(84% 0.19 80.46))
   const SHADER_ACCENT = [1.0, 0.78, 0.31];
+  // Fallback ground when an element and all its ancestors are transparent —
+  // matches the original off-white risograph paper.
+  const SHADER_PAPER_FALLBACK = [0.975, 0.965, 0.955];
   let shaderState = null; // { canvas, gl, program, texture, rafId, startTime }
 
+  // The element's effective background tone, used as the uniform halftone
+  // ground so content dissolves into dots over it. Unlike resolveCanvasBackground
+  // (which returns null when the element paints its own bg), this always returns
+  // a usable color: the element's own background if any, else the nearest opaque
+  // ancestor, else the paper fallback.
+  // Rasterize any CSS color (oklch, color(), named, hex, rgb) through a 1x1
+  // canvas and read back the sRGB pixel. String-parsing computed colors is a
+  // trap: Chrome returns backgroundColor as oklch()/color() for oklch inputs,
+  // which a hex/rgb regex misses — every site token would fall back to white.
+  let colorParseCtx = null;
+  function cssColorToRgb01(str) {
+    if (!colorParseCtx) {
+      colorParseCtx = document.createElement('canvas').getContext('2d', { willReadFrequently: true });
+    }
+    // Clear first: the ctx is cached across calls, so a semi-transparent color
+    // would otherwise blend (source-over) with the previous call's leftover
+    // pixel, making the result depend on call history.
+    colorParseCtx.clearRect(0, 0, 1, 1);
+    colorParseCtx.fillStyle = '#000'; // invalid input leaves this default
+    colorParseCtx.fillStyle = str;
+    colorParseCtx.fillRect(0, 0, 1, 1);
+    const d = colorParseCtx.getImageData(0, 0, 1, 1).data;
+    return [d[0] / 255, d[1] / 255, d[2] / 255];
+  }
+  function resolvePaperRgb(el) {
+    let node = el;
+    while (node) {
+      const bg = getComputedStyle(node).backgroundColor;
+      if (!isTransparentColor(bg)) return cssColorToRgb01(bg);
+      node = node.parentElement;
+    }
+    return SHADER_PAPER_FALLBACK;
+  }
+
+  // When an element is transparent up to the root, its visible backdrop can
+  // still come from an ancestor's background-image or a covering positioned
+  // layer that is a *child* of an ancestor (e.g. a hero's absolute art div) —
+  // neither of which the ancestor background-COLOR walk can see. Return the
+  // nearest such ancestor so we can capture it and crop, embedding the real
+  // backdrop. Returns null when nothing is actually painted behind the element
+  // (genuinely transparent → white is correct).
+  function paintsBackdrop(node) {
+    const s = getComputedStyle(node);
+    if (s.backgroundImage && s.backgroundImage !== 'none') return true;
+    const nr = node.getBoundingClientRect();
+    for (const child of node.children) {
+      const ccs = getComputedStyle(child);
+      if (ccs.position !== 'absolute' && ccs.position !== 'fixed') continue;
+      const paints = !isTransparentColor(ccs.backgroundColor)
+        || (ccs.backgroundImage && ccs.backgroundImage !== 'none');
+      if (!paints) continue;
+      const cr = child.getBoundingClientRect();
+      if (cr.width >= nr.width * 0.9 && cr.height >= nr.height * 0.9) return true;
+    }
+    return false;
+  }
+  function findBackdropAncestor(el) {
+    let node = el.parentElement;
+    while (node && node !== node.ownerDocument.documentElement) {
+      if (paintsBackdrop(node)) return node;
+      node = node.parentElement;
+    }
+    return null;
+  }
+
+  // Mean sRGB (0-1) of a canvas region, used as the halftone ground when the
+  // backdrop was captured from an ancestor rather than read from a CSS color.
+  function averageRgb01(ctx, w, h) {
+    const data = ctx.getImageData(0, 0, w, h).data;
+    let r = 0, g = 0, b = 0, n = 0;
+    // Stride a few pixels for speed; exact average is unnecessary for a ground.
+    for (let i = 0; i < data.length; i += 16) { r += data[i]; g += data[i + 1]; b += data[i + 2]; n++; }
+    return n ? [r / n / 255, g / n / 255, b / n / 255] : SHADER_PAPER_FALLBACK;
+  }
+
+  // Average the backdrop sampled just OUTSIDE an element's rect within a larger
+  // canvas. The ground tone for the dissolve must be the real backdrop, not the
+  // mean of the element's own crop — averaging the crop folds in the element's
+  // content (e.g. bright heading text), pulling the ground toward muddy gray.
+  function sampleSurroundingRgb(ctx, sx, sy, sw, sh, W, H) {
+    const pad = Math.max(2, Math.round(Math.min(sw, sh) * 0.12));
+    const fx = [0.2, 0.5, 0.8].map((f) => sx + sw * f);
+    const fy = [0.2, 0.5, 0.8].map((f) => sy + sh * f);
+    const pts = [];
+    for (const x of fx) { pts.push([x, sy - pad], [x, sy + sh + pad]); }
+    for (const y of fy) { pts.push([sx - pad, y], [sx + sw + pad, y]); }
+    let r = 0, g = 0, b = 0, n = 0;
+    for (const [px, py] of pts) {
+      const cx = Math.max(0, Math.min(W - 1, Math.round(px)));
+      const cy = Math.max(0, Math.min(H - 1, Math.round(py)));
+      const d = ctx.getImageData(cx, cy, 1, 1).data;
+      if (d[3] === 0) continue; // outside the ancestor's paint
+      r += d[0]; g += d[1]; b += d[2]; n++;
+    }
+    return n ? [r / n / 255, g / n / 255, b / n / 255] : null;
+  }
+
   function compileShader(gl, type, source) {
     const sh = gl.createShader(type);
     gl.shaderSource(sh, source);
@@ -5376,7 +5530,7 @@ void main() {
     shaderState = null;
   }
 
-  async function showShaderOverlay(el, blob, rect) {
+  async function showShaderOverlay(el, blob, rect, paper) {
     hideShaderOverlay();
     if (!blob || !el) return;
     const canvas = document.createElement('canvas');
@@ -5474,7 +5628,9 @@ void main() {
     const uTime = gl.getUniformLocation(program, 'u_time');
     const uRes = gl.getUniformLocation(program, 'u_resolution');
     const uAccent = gl.getUniformLocation(program, 'u_accent');
+    const uPaper = gl.getUniformLocation(program, 'u_paper');
     const uTex = gl.getUniformLocation(program, 'u_texture');
+    const paperRgb = paper || resolvePaperRgb(el);
     const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 
     shaderState = { canvas, gl, program, texture, rafId: 0, startTime: performance.now(), reduced };
@@ -5490,6 +5646,7 @@ void main() {
       gl.uniform1f(uTime, t);
       gl.uniform2f(uRes, canvas.width, canvas.height);
       gl.uniform3f(uAccent, SHADER_ACCENT[0], SHADER_ACCENT[1], SHADER_ACCENT[2]);
+      gl.uniform3f(uPaper, paperRgb[0], paperRgb[1], paperRgb[2]);
       gl.drawArrays(gl.TRIANGLES, 0, 6);
       shaderState.rafId = requestAnimationFrame(frame);
     }
@@ -5792,9 +5949,9 @@ void main() {
           try {
             const rect = shaderTarget.getBoundingClientRect();
             if (rect.width === 0 || rect.height === 0) return;
-            const blob = await captureElementToBlob(shaderTarget, null, rect);
+            const { blob, paper } = await captureElementToBlob(shaderTarget, null, rect);
             if (blob && state === 'GENERATING') {
-              showShaderOverlay(shaderTarget, blob, rect);
+              showShaderOverlay(shaderTarget, blob, rect, paper);
             }
           } catch (err) {
             console.warn('[impeccable] shader resume failed:', err);
diff --git a/.trae-cn/skills/impeccable/scripts/live-browser.js b/.trae-cn/skills/impeccable/scripts/live-browser.js
index 028363916..f1e525786 100644
--- a/.trae-cn/skills/impeccable/scripts/live-browser.js
+++ b/.trae-cn/skills/impeccable/scripts/live-browser.js
@@ -5209,9 +5209,11 @@
     return '#ffffff';
   }
 
-  // Capture the element (with current annotations baked in) and return a PNG
-  // Blob. Shared between the Go flow (uploads it to the server) and the
-  // debug toggle (displays it as an overlay for side-by-side comparison).
+  // Capture the element (with current annotations baked in) and return
+  // { blob, paper }: the PNG Blob, plus the representative backdrop tone for the
+  // shader's halftone ground (so capture, upload, and shader all agree on what
+  // sits behind the element). Shared between the Go flow (uploads the blob) and
+  // the shader-resume path.
   async function captureElementToBlob(el, snapshot, rect) {
     try { if (document.fonts?.ready) await document.fonts.ready; } catch {}
     const hasAnnotations = snapshot && (snapshot.comments.length > 0 || snapshot.strokes.length > 0);
@@ -5229,12 +5231,46 @@
     try {
       const ms = await loadModernScreenshot();
       const fontCssText = await collectFontCssText();
-      const backgroundColor = resolveCanvasBackground(el);
-      return await ms.domToBlob(el, {
+      const opts = {
         scale: Math.min(window.devicePixelRatio || 1, 2),
         font: fontCssText ? { cssText: fontCssText } : undefined,
-        ...(backgroundColor ? { backgroundColor } : {}),
-      });
+      };
+      const bg = resolveCanvasBackground(el);
+      // Fast path: the element paints its own background, or an opaque ancestor
+      // color was found. modern-screenshot bakes that color; paper matches it.
+      if (bg !== '#ffffff') {
+        const blob = await ms.domToBlob(el, { ...opts, ...(bg ? { backgroundColor: bg } : {}) });
+        return { blob, paper: bg ? cssColorToRgb01(bg) : resolvePaperRgb(el) };
+      }
+      // Transparent up to the root. The visible backdrop may still come from an
+      // ancestor's background-image or a covering positioned layer (e.g. a hero
+      // art div) that the color walk can't see. Capture that ancestor and crop
+      // to the element so the real backdrop is embedded — correct for both the
+      // shader and the screenshot sent to the model. Fall back to white only
+      // when nothing is actually painted behind the element.
+      const backdrop = findBackdropAncestor(el);
+      if (!backdrop) {
+        const blob = await ms.domToBlob(el, { ...opts, backgroundColor: '#ffffff' });
+        return { blob, paper: SHADER_PAPER_FALLBACK };
+      }
+      const ancestorCanvas = await ms.domToCanvas(backdrop, opts);
+      const S = opts.scale;
+      const er = el.getBoundingClientRect();
+      const ar = backdrop.getBoundingClientRect();
+      const sx = (er.left - ar.left) * S, sy = (er.top - ar.top) * S;
+      const sw = er.width * S, sh = er.height * S;
+      const crop = document.createElement('canvas');
+      crop.width = Math.max(1, Math.round(sw));
+      crop.height = Math.max(1, Math.round(sh));
+      const cctx = crop.getContext('2d', { willReadFrequently: true });
+      cctx.drawImage(ancestorCanvas, sx, sy, sw, sh, 0, 0, crop.width, crop.height);
+      // Ground = backdrop sampled around the element, falling back to the crop
+      // mean only if the surround is fully transparent.
+      const actx = ancestorCanvas.getContext('2d', { willReadFrequently: true });
+      const paper = sampleSurroundingRgb(actx, sx, sy, sw, sh, ancestorCanvas.width, ancestorCanvas.height)
+        || averageRgb01(cctx, crop.width, crop.height);
+      const blob = await new Promise((res) => crop.toBlob(res, 'image/png'));
+      return { blob, paper };
     } finally {
       if (annotNode) annotNode.remove();
       if (savedPosition !== null) el.style.position = savedPosition;
@@ -5244,15 +5280,16 @@
   async function captureAndEmit(el, basePayload, snapshot, rect) {
     let screenshotPath;
     let blob;
+    let paper;
     try {
-      blob = await captureElementToBlob(el, snapshot, rect);
+      ({ blob, paper } = await captureElementToBlob(el, snapshot, rect));
     } catch (err) {
       console.warn('[impeccable] capture failed, proceeding without screenshot:', err);
     }
     // Light up the shader overlay the moment capture is ready — no reason to
     // wait for the upload to complete before the user sees something alive.
     if (blob && state === 'GENERATING') {
-      showShaderOverlay(el, blob, rect);
+      showShaderOverlay(el, blob, rect, paper);
     }
     // Only upload + forward the screenshot when annotations (comments/strokes)
     // are present. Without annotations the image is pure visual anchoring —
@@ -5300,6 +5337,7 @@ uniform sampler2D u_texture;
 uniform float u_time;
 uniform vec2 u_resolution;
 uniform vec3 u_accent;
+uniform vec3 u_paper;
 varying vec2 v_uv;
 
 // Asymmetric roller band. Product of two one-sided smoothsteps — peaks at
@@ -5327,23 +5365,139 @@ void main() {
   vec2 cellUv = fract(gridUv) - 0.5;
   vec2 sampleCenter = (cellId + 0.5) * cellPx / u_resolution;
   vec3 cellImg = texture2D(u_texture, sampleCenter).rgb;
-  float luma = dot(cellImg, vec3(0.299, 0.587, 0.114));
-  // Darker cells → bigger kinpaku dots (classic risograph halftone curve).
-  float radius = sqrt(clamp(1.0 - luma, 0.0, 1.0)) * 0.56;
+  // Dot size tracks how much the cell DIFFERS from the element's own ground
+  // (u_paper), not absolute darkness. So the content — text, buttons, anything
+  // that deviates from the background — always becomes the dots, on light AND
+  // dark surfaces. A plain darkness curve inverts on dark elements: the dark
+  // background fills with ink and the lighter content punches holes instead.
+  // Capped below the cell half-width so dense content stays separated dots.
+  float contrast = clamp(length(cellImg - u_paper) / 1.732, 0.0, 1.0);
+  float radius = min(sqrt(contrast) * 0.6, 0.38);
   float dotMask = smoothstep(radius + 0.06, radius, length(cellUv));
-  vec3 paper = vec3(0.975, 0.965, 0.955);
-  vec3 dotLayer = mix(paper, u_accent, dotMask);
-
-  // Blend the halftone layer in where the roller is passing; leave the
-  // element pristine elsewhere.
-  vec3 base = texture2D(u_texture, uv).rgb;
-  gl_FragColor = vec4(mix(base, dotLayer, band), 1.0);
+  // Two-stage dissolve as the roller passes, so the element is rebuilt purely
+  // from dot size (its own halftone) and never bleeds through as raw pixels
+  // behind the dots:
+  //   1. cover  — the element flattens to the uniform paper ground first.
+  //   2. dotAmt — kinpaku dots then emerge, sized by each cell's luma.
+  // A plain mix(base, halftone, band) instead left the raw element visible
+  // through the band's soft core/trail. The paper ground is u_paper (the
+  // element's own bg tone) rather than a fixed white, so the dissolve reads the
+  // same over light and dark surfaces.
+  vec4 tex = texture2D(u_texture, uv);
+  vec3 base = tex.rgb;
+  float cover = smoothstep(0.0, 0.35, band);
+  float dotAmt = dotMask * smoothstep(0.15, 0.6, band);
+  vec3 ground = mix(base, u_paper, cover);
+  // Carry the capture's own alpha through, so a rounded corner or any genuinely
+  // transparent region stays transparent (the live backdrop shows through the
+  // canvas) instead of rendering as solid black.
+  gl_FragColor = vec4(mix(ground, u_accent, dotAmt), tex.a);
 }`;
 
   // Kinpaku gold converted to approximate sRGB 0-1 (matches oklch(84% 0.19 80.46))
   const SHADER_ACCENT = [1.0, 0.78, 0.31];
+  // Fallback ground when an element and all its ancestors are transparent —
+  // matches the original off-white risograph paper.
+  const SHADER_PAPER_FALLBACK = [0.975, 0.965, 0.955];
   let shaderState = null; // { canvas, gl, program, texture, rafId, startTime }
 
+  // The element's effective background tone, used as the uniform halftone
+  // ground so content dissolves into dots over it. Unlike resolveCanvasBackground
+  // (which returns null when the element paints its own bg), this always returns
+  // a usable color: the element's own background if any, else the nearest opaque
+  // ancestor, else the paper fallback.
+  // Rasterize any CSS color (oklch, color(), named, hex, rgb) through a 1x1
+  // canvas and read back the sRGB pixel. String-parsing computed colors is a
+  // trap: Chrome returns backgroundColor as oklch()/color() for oklch inputs,
+  // which a hex/rgb regex misses — every site token would fall back to white.
+  let colorParseCtx = null;
+  function cssColorToRgb01(str) {
+    if (!colorParseCtx) {
+      colorParseCtx = document.createElement('canvas').getContext('2d', { willReadFrequently: true });
+    }
+    // Clear first: the ctx is cached across calls, so a semi-transparent color
+    // would otherwise blend (source-over) with the previous call's leftover
+    // pixel, making the result depend on call history.
+    colorParseCtx.clearRect(0, 0, 1, 1);
+    colorParseCtx.fillStyle = '#000'; // invalid input leaves this default
+    colorParseCtx.fillStyle = str;
+    colorParseCtx.fillRect(0, 0, 1, 1);
+    const d = colorParseCtx.getImageData(0, 0, 1, 1).data;
+    return [d[0] / 255, d[1] / 255, d[2] / 255];
+  }
+  function resolvePaperRgb(el) {
+    let node = el;
+    while (node) {
+      const bg = getComputedStyle(node).backgroundColor;
+      if (!isTransparentColor(bg)) return cssColorToRgb01(bg);
+      node = node.parentElement;
+    }
+    return SHADER_PAPER_FALLBACK;
+  }
+
+  // When an element is transparent up to the root, its visible backdrop can
+  // still come from an ancestor's background-image or a covering positioned
+  // layer that is a *child* of an ancestor (e.g. a hero's absolute art div) —
+  // neither of which the ancestor background-COLOR walk can see. Return the
+  // nearest such ancestor so we can capture it and crop, embedding the real
+  // backdrop. Returns null when nothing is actually painted behind the element
+  // (genuinely transparent → white is correct).
+  function paintsBackdrop(node) {
+    const s = getComputedStyle(node);
+    if (s.backgroundImage && s.backgroundImage !== 'none') return true;
+    const nr = node.getBoundingClientRect();
+    for (const child of node.children) {
+      const ccs = getComputedStyle(child);
+      if (ccs.position !== 'absolute' && ccs.position !== 'fixed') continue;
+      const paints = !isTransparentColor(ccs.backgroundColor)
+        || (ccs.backgroundImage && ccs.backgroundImage !== 'none');
+      if (!paints) continue;
+      const cr = child.getBoundingClientRect();
+      if (cr.width >= nr.width * 0.9 && cr.height >= nr.height * 0.9) return true;
+    }
+    return false;
+  }
+  function findBackdropAncestor(el) {
+    let node = el.parentElement;
+    while (node && node !== node.ownerDocument.documentElement) {
+      if (paintsBackdrop(node)) return node;
+      node = node.parentElement;
+    }
+    return null;
+  }
+
+  // Mean sRGB (0-1) of a canvas region, used as the halftone ground when the
+  // backdrop was captured from an ancestor rather than read from a CSS color.
+  function averageRgb01(ctx, w, h) {
+    const data = ctx.getImageData(0, 0, w, h).data;
+    let r = 0, g = 0, b = 0, n = 0;
+    // Stride a few pixels for speed; exact average is unnecessary for a ground.
+    for (let i = 0; i < data.length; i += 16) { r += data[i]; g += data[i + 1]; b += data[i + 2]; n++; }
+    return n ? [r / n / 255, g / n / 255, b / n / 255] : SHADER_PAPER_FALLBACK;
+  }
+
+  // Average the backdrop sampled just OUTSIDE an element's rect within a larger
+  // canvas. The ground tone for the dissolve must be the real backdrop, not the
+  // mean of the element's own crop — averaging the crop folds in the element's
+  // content (e.g. bright heading text), pulling the ground toward muddy gray.
+  function sampleSurroundingRgb(ctx, sx, sy, sw, sh, W, H) {
+    const pad = Math.max(2, Math.round(Math.min(sw, sh) * 0.12));
+    const fx = [0.2, 0.5, 0.8].map((f) => sx + sw * f);
+    const fy = [0.2, 0.5, 0.8].map((f) => sy + sh * f);
+    const pts = [];
+    for (const x of fx) { pts.push([x, sy - pad], [x, sy + sh + pad]); }
+    for (const y of fy) { pts.push([sx - pad, y], [sx + sw + pad, y]); }
+    let r = 0, g = 0, b = 0, n = 0;
+    for (const [px, py] of pts) {
+      const cx = Math.max(0, Math.min(W - 1, Math.round(px)));
+      const cy = Math.max(0, Math.min(H - 1, Math.round(py)));
+      const d = ctx.getImageData(cx, cy, 1, 1).data;
+      if (d[3] === 0) continue; // outside the ancestor's paint
+      r += d[0]; g += d[1]; b += d[2]; n++;
+    }
+    return n ? [r / n / 255, g / n / 255, b / n / 255] : null;
+  }
+
   function compileShader(gl, type, source) {
     const sh = gl.createShader(type);
     gl.shaderSource(sh, source);
@@ -5376,7 +5530,7 @@ void main() {
     shaderState = null;
   }
 
-  async function showShaderOverlay(el, blob, rect) {
+  async function showShaderOverlay(el, blob, rect, paper) {
     hideShaderOverlay();
     if (!blob || !el) return;
     const canvas = document.createElement('canvas');
@@ -5474,7 +5628,9 @@ void main() {
     const uTime = gl.getUniformLocation(program, 'u_time');
     const uRes = gl.getUniformLocation(program, 'u_resolution');
     const uAccent = gl.getUniformLocation(program, 'u_accent');
+    const uPaper = gl.getUniformLocation(program, 'u_paper');
     const uTex = gl.getUniformLocation(program, 'u_texture');
+    const paperRgb = paper || resolvePaperRgb(el);
     const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 
     shaderState = { canvas, gl, program, texture, rafId: 0, startTime: performance.now(), reduced };
@@ -5490,6 +5646,7 @@ void main() {
       gl.uniform1f(uTime, t);
       gl.uniform2f(uRes, canvas.width, canvas.height);
       gl.uniform3f(uAccent, SHADER_ACCENT[0], SHADER_ACCENT[1], SHADER_ACCENT[2]);
+      gl.uniform3f(uPaper, paperRgb[0], paperRgb[1], paperRgb[2]);
       gl.drawArrays(gl.TRIANGLES, 0, 6);
       shaderState.rafId = requestAnimationFrame(frame);
     }
@@ -5792,9 +5949,9 @@ void main() {
           try {
             const rect = shaderTarget.getBoundingClientRect();
             if (rect.width === 0 || rect.height === 0) return;
-            const blob = await captureElementToBlob(shaderTarget, null, rect);
+            const { blob, paper } = await captureElementToBlob(shaderTarget, null, rect);
             if (blob && state === 'GENERATING') {
-              showShaderOverlay(shaderTarget, blob, rect);
+              showShaderOverlay(shaderTarget, blob, rect, paper);
             }
           } catch (err) {
             console.warn('[impeccable] shader resume failed:', err);
diff --git a/.trae/skills/impeccable/scripts/live-browser.js b/.trae/skills/impeccable/scripts/live-browser.js
index 028363916..f1e525786 100644
--- a/.trae/skills/impeccable/scripts/live-browser.js
+++ b/.trae/skills/impeccable/scripts/live-browser.js
@@ -5209,9 +5209,11 @@
     return '#ffffff';
   }
 
-  // Capture the element (with current annotations baked in) and return a PNG
-  // Blob. Shared between the Go flow (uploads it to the server) and the
-  // debug toggle (displays it as an overlay for side-by-side comparison).
+  // Capture the element (with current annotations baked in) and return
+  // { blob, paper }: the PNG Blob, plus the representative backdrop tone for the
+  // shader's halftone ground (so capture, upload, and shader all agree on what
+  // sits behind the element). Shared between the Go flow (uploads the blob) and
+  // the shader-resume path.
   async function captureElementToBlob(el, snapshot, rect) {
     try { if (document.fonts?.ready) await document.fonts.ready; } catch {}
     const hasAnnotations = snapshot && (snapshot.comments.length > 0 || snapshot.strokes.length > 0);
@@ -5229,12 +5231,46 @@
     try {
       const ms = await loadModernScreenshot();
       const fontCssText = await collectFontCssText();
-      const backgroundColor = resolveCanvasBackground(el);
-      return await ms.domToBlob(el, {
+      const opts = {
         scale: Math.min(window.devicePixelRatio || 1, 2),
         font: fontCssText ? { cssText: fontCssText } : undefined,
-        ...(backgroundColor ? { backgroundColor } : {}),
-      });
+      };
+      const bg = resolveCanvasBackground(el);
+      // Fast path: the element paints its own background, or an opaque ancestor
+      // color was found. modern-screenshot bakes that color; paper matches it.
+      if (bg !== '#ffffff') {
+        const blob = await ms.domToBlob(el, { ...opts, ...(bg ? { backgroundColor: bg } : {}) });
+        return { blob, paper: bg ? cssColorToRgb01(bg) : resolvePaperRgb(el) };
+      }
+      // Transparent up to the root. The visible backdrop may still come from an
+      // ancestor's background-image or a covering positioned layer (e.g. a hero
+      // art div) that the color walk can't see. Capture that ancestor and crop
+      // to the element so the real backdrop is embedded — correct for both the
+      // shader and the screenshot sent to the model. Fall back to white only
+      // when nothing is actually painted behind the element.
+      const backdrop = findBackdropAncestor(el);
+      if (!backdrop) {
+        const blob = await ms.domToBlob(el, { ...opts, backgroundColor: '#ffffff' });
+        return { blob, paper: SHADER_PAPER_FALLBACK };
+      }
+      const ancestorCanvas = await ms.domToCanvas(backdrop, opts);
+      const S = opts.scale;
+      const er = el.getBoundingClientRect();
+      const ar = backdrop.getBoundingClientRect();
+      const sx = (er.left - ar.left) * S, sy = (er.top - ar.top) * S;
+      const sw = er.width * S, sh = er.height * S;
+      const crop = document.createElement('canvas');
+      crop.width = Math.max(1, Math.round(sw));
+      crop.height = Math.max(1, Math.round(sh));
+      const cctx = crop.getContext('2d', { willReadFrequently: true });
+      cctx.drawImage(ancestorCanvas, sx, sy, sw, sh, 0, 0, crop.width, crop.height);
+      // Ground = backdrop sampled around the element, falling back to the crop
+      // mean only if the surround is fully transparent.
+      const actx = ancestorCanvas.getContext('2d', { willReadFrequently: true });
+      const paper = sampleSurroundingRgb(actx, sx, sy, sw, sh, ancestorCanvas.width, ancestorCanvas.height)
+        || averageRgb01(cctx, crop.width, crop.height);
+      const blob = await new Promise((res) => crop.toBlob(res, 'image/png'));
+      return { blob, paper };
     } finally {
       if (annotNode) annotNode.remove();
       if (savedPosition !== null) el.style.position = savedPosition;
@@ -5244,15 +5280,16 @@
   async function captureAndEmit(el, basePayload, snapshot, rect) {
     let screenshotPath;
     let blob;
+    let paper;
     try {
-      blob = await captureElementToBlob(el, snapshot, rect);
+      ({ blob, paper } = await captureElementToBlob(el, snapshot, rect));
     } catch (err) {
       console.warn('[impeccable] capture failed, proceeding without screenshot:', err);
     }
     // Light up the shader overlay the moment capture is ready — no reason to
     // wait for the upload to complete before the user sees something alive.
     if (blob && state === 'GENERATING') {
-      showShaderOverlay(el, blob, rect);
+      showShaderOverlay(el, blob, rect, paper);
     }
     // Only upload + forward the screenshot when annotations (comments/strokes)
     // are present. Without annotations the image is pure visual anchoring —
@@ -5300,6 +5337,7 @@ uniform sampler2D u_texture;
 uniform float u_time;
 uniform vec2 u_resolution;
 uniform vec3 u_accent;
+uniform vec3 u_paper;
 varying vec2 v_uv;
 
 // Asymmetric roller band. Product of two one-sided smoothsteps — peaks at
@@ -5327,23 +5365,139 @@ void main() {
   vec2 cellUv = fract(gridUv) - 0.5;
   vec2 sampleCenter = (cellId + 0.5) * cellPx / u_resolution;
   vec3 cellImg = texture2D(u_texture, sampleCenter).rgb;
-  float luma = dot(cellImg, vec3(0.299, 0.587, 0.114));
-  // Darker cells → bigger kinpaku dots (classic risograph halftone curve).
-  float radius = sqrt(clamp(1.0 - luma, 0.0, 1.0)) * 0.56;
+  // Dot size tracks how much the cell DIFFERS from the element's own ground
+  // (u_paper), not absolute darkness. So the content — text, buttons, anything
+  // that deviates from the background — always becomes the dots, on light AND
+  // dark surfaces. A plain darkness curve inverts on dark elements: the dark
+  // background fills with ink and the lighter content punches holes instead.
+  // Capped below the cell half-width so dense content stays separated dots.
+  float contrast = clamp(length(cellImg - u_paper) / 1.732, 0.0, 1.0);
+  float radius = min(sqrt(contrast) * 0.6, 0.38);
   float dotMask = smoothstep(radius + 0.06, radius, length(cellUv));
-  vec3 paper = vec3(0.975, 0.965, 0.955);
-  vec3 dotLayer = mix(paper, u_accent, dotMask);
-
-  // Blend the halftone layer in where the roller is passing; leave the
-  // element pristine elsewhere.
-  vec3 base = texture2D(u_texture, uv).rgb;
-  gl_FragColor = vec4(mix(base, dotLayer, band), 1.0);
+  // Two-stage dissolve as the roller passes, so the element is rebuilt purely
+  // from dot size (its own halftone) and never bleeds through as raw pixels
+  // behind the dots:
+  //   1. cover  — the element flattens to the uniform paper ground first.
+  //   2. dotAmt — kinpaku dots then emerge, sized by each cell's luma.
+  // A plain mix(base, halftone, band) instead left the raw element visible
+  // through the band's soft core/trail. The paper ground is u_paper (the
+  // element's own bg tone) rather than a fixed white, so the dissolve reads the
+  // same over light and dark surfaces.
+  vec4 tex = texture2D(u_texture, uv);
+  vec3 base = tex.rgb;
+  float cover = smoothstep(0.0, 0.35, band);
+  float dotAmt = dotMask * smoothstep(0.15, 0.6, band);
+  vec3 ground = mix(base, u_paper, cover);
+  // Carry the capture's own alpha through, so a rounded corner or any genuinely
+  // transparent region stays transparent (the live backdrop shows through the
+  // canvas) instead of rendering as solid black.
+  gl_FragColor = vec4(mix(ground, u_accent, dotAmt), tex.a);
 }`;
 
   // Kinpaku gold converted to approximate sRGB 0-1 (matches oklch(84% 0.19 80.46))
   const SHADER_ACCENT = [1.0, 0.78, 0.31];
+  // Fallback ground when an element and all its ancestors are transparent —
+  // matches the original off-white risograph paper.
+  const SHADER_PAPER_FALLBACK = [0.975, 0.965, 0.955];
   let shaderState = null; // { canvas, gl, program, texture, rafId, startTime }
 
+  // The element's effective background tone, used as the uniform halftone
+  // ground so content dissolves into dots over it. Unlike resolveCanvasBackground
+  // (which returns null when the element paints its own bg), this always returns
+  // a usable color: the element's own background if any, else the nearest opaque
+  // ancestor, else the paper fallback.
+  // Rasterize any CSS color (oklch, color(), named, hex, rgb) through a 1x1
+  // canvas and read back the sRGB pixel. String-parsing computed colors is a
+  // trap: Chrome returns backgroundColor as oklch()/color() for oklch inputs,
+  // which a hex/rgb regex misses — every site token would fall back to white.
+  let colorParseCtx = null;
+  function cssColorToRgb01(str) {
+    if (!colorParseCtx) {
+      colorParseCtx = document.createElement('canvas').getContext('2d', { willReadFrequently: true });
+    }
+    // Clear first: the ctx is cached across calls, so a semi-transparent color
+    // would otherwise blend (source-over) with the previous call's leftover
+    // pixel, making the result depend on call history.
+    colorParseCtx.clearRect(0, 0, 1, 1);
+    colorParseCtx.fillStyle = '#000'; // invalid input leaves this default
+    colorParseCtx.fillStyle = str;
+    colorParseCtx.fillRect(0, 0, 1, 1);
+    const d = colorParseCtx.getImageData(0, 0, 1, 1).data;
+    return [d[0] / 255, d[1] / 255, d[2] / 255];
+  }
+  function resolvePaperRgb(el) {
+    let node = el;
+    while (node) {
+      const bg = getComputedStyle(node).backgroundColor;
+      if (!isTransparentColor(bg)) return cssColorToRgb01(bg);
+      node = node.parentElement;
+    }
+    return SHADER_PAPER_FALLBACK;
+  }
+
+  // When an element is transparent up to the root, its visible backdrop can
+  // still come from an ancestor's background-image or a covering positioned
+  // layer that is a *child* of an ancestor (e.g. a hero's absolute art div) —
+  // neither of which the ancestor background-COLOR walk can see. Return the
+  // nearest such ancestor so we can capture it and crop, embedding the real
+  // backdrop. Returns null when nothing is actually painted behind the element
+  // (genuinely transparent → white is correct).
+  function paintsBackdrop(node) {
+    const s = getComputedStyle(node);
+    if (s.backgroundImage && s.backgroundImage !== 'none') return true;
+    const nr = node.getBoundingClientRect();
+    for (const child of node.children) {
+      const ccs = getComputedStyle(child);
+      if (ccs.position !== 'absolute' && ccs.position !== 'fixed') continue;
+      const paints = !isTransparentColor(ccs.backgroundColor)
+        || (ccs.backgroundImage && ccs.backgroundImage !== 'none');
+      if (!paints) continue;
+      const cr = child.getBoundingClientRect();
+      if (cr.width >= nr.width * 0.9 && cr.height >= nr.height * 0.9) return true;
+    }
+    return false;
+  }
+  function findBackdropAncestor(el) {
+    let node = el.parentElement;
+    while (node && node !== node.ownerDocument.documentElement) {
+      if (paintsBackdrop(node)) return node;
+      node = node.parentElement;
+    }
+    return null;
+  }
+
+  // Mean sRGB (0-1) of a canvas region, used as the halftone ground when the
+  // backdrop was captured from an ancestor rather than read from a CSS color.
+  function averageRgb01(ctx, w, h) {
+    const data = ctx.getImageData(0, 0, w, h).data;
+    let r = 0, g = 0, b = 0, n = 0;
+    // Stride a few pixels for speed; exact average is unnecessary for a ground.
+    for (let i = 0; i < data.length; i += 16) { r += data[i]; g += data[i + 1]; b += data[i + 2]; n++; }
+    return n ? [r / n / 255, g / n / 255, b / n / 255] : SHADER_PAPER_FALLBACK;
+  }
+
+  // Average the backdrop sampled just OUTSIDE an element's rect within a larger
+  // canvas. The ground tone for the dissolve must be the real backdrop, not the
+  // mean of the element's own crop — averaging the crop folds in the element's
+  // content (e.g. bright heading text), pulling the ground toward muddy gray.
+  function sampleSurroundingRgb(ctx, sx, sy, sw, sh, W, H) {
+    const pad = Math.max(2, Math.round(Math.min(sw, sh) * 0.12));
+    const fx = [0.2, 0.5, 0.8].map((f) => sx + sw * f);
+    const fy = [0.2, 0.5, 0.8].map((f) => sy + sh * f);
+    const pts = [];
+    for (const x of fx) { pts.push([x, sy - pad], [x, sy + sh + pad]); }
+    for (const y of fy) { pts.push([sx - pad, y], [sx + sw + pad, y]); }
+    let r = 0, g = 0, b = 0, n = 0;
+    for (const [px, py] of pts) {
+      const cx = Math.max(0, Math.min(W - 1, Math.round(px)));
+      const cy = Math.max(0, Math.min(H - 1, Math.round(py)));
+      const d = ctx.getImageData(cx, cy, 1, 1).data;
+      if (d[3] === 0) continue; // outside the ancestor's paint
+      r += d[0]; g += d[1]; b += d[2]; n++;
+    }
+    return n ? [r / n / 255, g / n / 255, b / n / 255] : null;
+  }
+
   function compileShader(gl, type, source) {
     const sh = gl.createShader(type);
     gl.shaderSource(sh, source);
@@ -5376,7 +5530,7 @@ void main() {
     shaderState = null;
   }
 
-  async function showShaderOverlay(el, blob, rect) {
+  async function showShaderOverlay(el, blob, rect, paper) {
     hideShaderOverlay();
     if (!blob || !el) return;
     const canvas = document.createElement('canvas');
@@ -5474,7 +5628,9 @@ void main() {
     const uTime = gl.getUniformLocation(program, 'u_time');
     const uRes = gl.getUniformLocation(program, 'u_resolution');
     const uAccent = gl.getUniformLocation(program, 'u_accent');
+    const uPaper = gl.getUniformLocation(program, 'u_paper');
     const uTex = gl.getUniformLocation(program, 'u_texture');
+    const paperRgb = paper || resolvePaperRgb(el);
     const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 
     shaderState = { canvas, gl, program, texture, rafId: 0, startTime: performance.now(), reduced };
@@ -5490,6 +5646,7 @@ void main() {
       gl.uniform1f(uTime, t);
       gl.uniform2f(uRes, canvas.width, canvas.height);
       gl.uniform3f(uAccent, SHADER_ACCENT[0], SHADER_ACCENT[1], SHADER_ACCENT[2]);
+      gl.uniform3f(uPaper, paperRgb[0], paperRgb[1], paperRgb[2]);
       gl.drawArrays(gl.TRIANGLES, 0, 6);
       shaderState.rafId = requestAnimationFrame(frame);
     }
@@ -5792,9 +5949,9 @@ void main() {
           try {
             const rect = shaderTarget.getBoundingClientRect();
             if (rect.width === 0 || rect.height === 0) return;
-            const blob = await captureElementToBlob(shaderTarget, null, rect);
+            const { blob, paper } = await captureElementToBlob(shaderTarget, null, rect);
             if (blob && state === 'GENERATING') {
-              showShaderOverlay(shaderTarget, blob, rect);
+              showShaderOverlay(shaderTarget, blob, rect, paper);
             }
           } catch (err) {
             console.warn('[impeccable] shader resume failed:', err);
diff --git a/plugin/skills/impeccable/scripts/live-browser.js b/plugin/skills/impeccable/scripts/live-browser.js
index 028363916..f1e525786 100644
--- a/plugin/skills/impeccable/scripts/live-browser.js
+++ b/plugin/skills/impeccable/scripts/live-browser.js
@@ -5209,9 +5209,11 @@
     return '#ffffff';
   }
 
-  // Capture the element (with current annotations baked in) and return a PNG
-  // Blob. Shared between the Go flow (uploads it to the server) and the
-  // debug toggle (displays it as an overlay for side-by-side comparison).
+  // Capture the element (with current annotations baked in) and return
+  // { blob, paper }: the PNG Blob, plus the representative backdrop tone for the
+  // shader's halftone ground (so capture, upload, and shader all agree on what
+  // sits behind the element). Shared between the Go flow (uploads the blob) and
+  // the shader-resume path.
   async function captureElementToBlob(el, snapshot, rect) {
     try { if (document.fonts?.ready) await document.fonts.ready; } catch {}
     const hasAnnotations = snapshot && (snapshot.comments.length > 0 || snapshot.strokes.length > 0);
@@ -5229,12 +5231,46 @@
     try {
       const ms = await loadModernScreenshot();
       const fontCssText = await collectFontCssText();
-      const backgroundColor = resolveCanvasBackground(el);
-      return await ms.domToBlob(el, {
+      const opts = {
         scale: Math.min(window.devicePixelRatio || 1, 2),
         font: fontCssText ? { cssText: fontCssText } : undefined,
-        ...(backgroundColor ? { backgroundColor } : {}),
-      });
+      };
+      const bg = resolveCanvasBackground(el);
+      // Fast path: the element paints its own background, or an opaque ancestor
+      // color was found. modern-screenshot bakes that color; paper matches it.
+      if (bg !== '#ffffff') {
+        const blob = await ms.domToBlob(el, { ...opts, ...(bg ? { backgroundColor: bg } : {}) });
+        return { blob, paper: bg ? cssColorToRgb01(bg) : resolvePaperRgb(el) };
+      }
+      // Transparent up to the root. The visible backdrop may still come from an
+      // ancestor's background-image or a covering positioned layer (e.g. a hero
+      // art div) that the color walk can't see. Capture that ancestor and crop
+      // to the element so the real backdrop is embedded — correct for both the
+      // shader and the screenshot sent to the model. Fall back to white only
+      // when nothing is actually painted behind the element.
+      const backdrop = findBackdropAncestor(el);
+      if (!backdrop) {
+        const blob = await ms.domToBlob(el, { ...opts, backgroundColor: '#ffffff' });
+        return { blob, paper: SHADER_PAPER_FALLBACK };
+      }
+      const ancestorCanvas = await ms.domToCanvas(backdrop, opts);
+      const S = opts.scale;
+      const er = el.getBoundingClientRect();
+      const ar = backdrop.getBoundingClientRect();
+      const sx = (er.left - ar.left) * S, sy = (er.top - ar.top) * S;
+      const sw = er.width * S, sh = er.height * S;
+      const crop = document.createElement('canvas');
+      crop.width = Math.max(1, Math.round(sw));
+      crop.height = Math.max(1, Math.round(sh));
+      const cctx = crop.getContext('2d', { willReadFrequently: true });
+      cctx.drawImage(ancestorCanvas, sx, sy, sw, sh, 0, 0, crop.width, crop.height);
+      // Ground = backdrop sampled around the element, falling back to the crop
+      // mean only if the surround is fully transparent.
+      const actx = ancestorCanvas.getContext('2d', { willReadFrequently: true });
+      const paper = sampleSurroundingRgb(actx, sx, sy, sw, sh, ancestorCanvas.width, ancestorCanvas.height)
+        || averageRgb01(cctx, crop.width, crop.height);
+      const blob = await new Promise((res) => crop.toBlob(res, 'image/png'));
+      return { blob, paper };
     } finally {
       if (annotNode) annotNode.remove();
       if (savedPosition !== null) el.style.position = savedPosition;
@@ -5244,15 +5280,16 @@
   async function captureAndEmit(el, basePayload, snapshot, rect) {
     let screenshotPath;
     let blob;
+    let paper;
     try {
-      blob = await captureElementToBlob(el, snapshot, rect);
+      ({ blob, paper } = await captureElementToBlob(el, snapshot, rect));
     } catch (err) {
       console.warn('[impeccable] capture failed, proceeding without screenshot:', err);
     }
     // Light up the shader overlay the moment capture is ready — no reason to
     // wait for the upload to complete before the user sees something alive.
     if (blob && state === 'GENERATING') {
-      showShaderOverlay(el, blob, rect);
+      showShaderOverlay(el, blob, rect, paper);
     }
     // Only upload + forward the screenshot when annotations (comments/strokes)
     // are present. Without annotations the image is pure visual anchoring —
@@ -5300,6 +5337,7 @@ uniform sampler2D u_texture;
 uniform float u_time;
 uniform vec2 u_resolution;
 uniform vec3 u_accent;
+uniform vec3 u_paper;
 varying vec2 v_uv;
 
 // Asymmetric roller band. Product of two one-sided smoothsteps — peaks at
@@ -5327,23 +5365,139 @@ void main() {
   vec2 cellUv = fract(gridUv) - 0.5;
   vec2 sampleCenter = (cellId + 0.5) * cellPx / u_resolution;
   vec3 cellImg = texture2D(u_texture, sampleCenter).rgb;
-  float luma = dot(cellImg, vec3(0.299, 0.587, 0.114));
-  // Darker cells → bigger kinpaku dots (classic risograph halftone curve).
-  float radius = sqrt(clamp(1.0 - luma, 0.0, 1.0)) * 0.56;
+  // Dot size tracks how much the cell DIFFERS from the element's own ground
+  // (u_paper), not absolute darkness. So the content — text, buttons, anything
+  // that deviates from the background — always becomes the dots, on light AND
+  // dark surfaces. A plain darkness curve inverts on dark elements: the dark
+  // background fills with ink and the lighter content punches holes instead.
+  // Capped below the cell half-width so dense content stays separated dots.
+  float contrast = clamp(length(cellImg - u_paper) / 1.732, 0.0, 1.0);
+  float radius = min(sqrt(contrast) * 0.6, 0.38);
   float dotMask = smoothstep(radius + 0.06, radius, length(cellUv));
-  vec3 paper = vec3(0.975, 0.965, 0.955);
-  vec3 dotLayer = mix(paper, u_accent, dotMask);
-
-  // Blend the halftone layer in where the roller is passing; leave the
-  // element pristine elsewhere.
-  vec3 base = texture2D(u_texture, uv).rgb;
-  gl_FragColor = vec4(mix(base, dotLayer, band), 1.0);
+  // Two-stage dissolve as the roller passes, so the element is rebuilt purely
+  // from dot size (its own halftone) and never bleeds through as raw pixels
+  // behind the dots:
+  //   1. cover  — the element flattens to the uniform paper ground first.
+  //   2. dotAmt — kinpaku dots then emerge, sized by each cell's luma.
+  // A plain mix(base, halftone, band) instead left the raw element visible
+  // through the band's soft core/trail. The paper ground is u_paper (the
+  // element's own bg tone) rather than a fixed white, so the dissolve reads the
+  // same over light and dark surfaces.
+  vec4 tex = texture2D(u_texture, uv);
+  vec3 base = tex.rgb;
+  float cover = smoothstep(0.0, 0.35, band);
+  float dotAmt = dotMask * smoothstep(0.15, 0.6, band);
+  vec3 ground = mix(base, u_paper, cover);
+  // Carry the capture's own alpha through, so a rounded corner or any genuinely
+  // transparent region stays transparent (the live backdrop shows through the
+  // canvas) instead of rendering as solid black.
+  gl_FragColor = vec4(mix(ground, u_accent, dotAmt), tex.a);
 }`;
 
   // Kinpaku gold converted to approximate sRGB 0-1 (matches oklch(84% 0.19 80.46))
   const SHADER_ACCENT = [1.0, 0.78, 0.31];
+  // Fallback ground when an element and all its ancestors are transparent —
+  // matches the original off-white risograph paper.
+  const SHADER_PAPER_FALLBACK = [0.975, 0.965, 0.955];
   let shaderState = null; // { canvas, gl, program, texture, rafId, startTime }
 
+  // The element's effective background tone, used as the uniform halftone
+  // ground so content dissolves into dots over it. Unlike resolveCanvasBackground
+  // (which returns null when the element paints its own bg), this always returns
+  // a usable color: the element's own background if any, else the nearest opaque
+  // ancestor, else the paper fallback.
+  // Rasterize any CSS color (oklch, color(), named, hex, rgb) through a 1x1
+  // canvas and read back the sRGB pixel. String-parsing computed colors is a
+  // trap: Chrome returns backgroundColor as oklch()/color() for oklch inputs,
+  // which a hex/rgb regex misses — every site token would fall back to white.
+  let colorParseCtx = null;
+  function cssColorToRgb01(str) {
+    if (!colorParseCtx) {
+      colorParseCtx = document.createElement('canvas').getContext('2d', { willReadFrequently: true });
+    }
+    // Clear first: the ctx is cached across calls, so a semi-transparent color
+    // would otherwise blend (source-over) with the previous call's leftover
+    // pixel, making the result depend on call history.
+    colorParseCtx.clearRect(0, 0, 1, 1);
+    colorParseCtx.fillStyle = '#000'; // invalid input leaves this default
+    colorParseCtx.fillStyle = str;
+    colorParseCtx.fillRect(0, 0, 1, 1);
+    const d = colorParseCtx.getImageData(0, 0, 1, 1).data;
+    return [d[0] / 255, d[1] / 255, d[2] / 255];
+  }
+  function resolvePaperRgb(el) {
+    let node = el;
+    while (node) {
+      const bg = getComputedStyle(node).backgroundColor;
+      if (!isTransparentColor(bg)) return cssColorToRgb01(bg);
+      node = node.parentElement;
+    }
+    return SHADER_PAPER_FALLBACK;
+  }
+
+  // When an element is transparent up to the root, its visible backdrop can
+  // still come from an ancestor's background-image or a covering positioned
+  // layer that is a *child* of an ancestor (e.g. a hero's absolute art div) —
+  // neither of which the ancestor background-COLOR walk can see. Return the
+  // nearest such ancestor so we can capture it and crop, embedding the real
+  // backdrop. Returns null when nothing is actually painted behind the element
+  // (genuinely transparent → white is correct).
+  function paintsBackdrop(node) {
+    const s = getComputedStyle(node);
+    if (s.backgroundImage && s.backgroundImage !== 'none') return true;
+    const nr = node.getBoundingClientRect();
+    for (const child of node.children) {
+      const ccs = getComputedStyle(child);
+      if (ccs.position !== 'absolute' && ccs.position !== 'fixed') continue;
+      const paints = !isTransparentColor(ccs.backgroundColor)
+        || (ccs.backgroundImage && ccs.backgroundImage !== 'none');
+      if (!paints) continue;
+      const cr = child.getBoundingClientRect();
+      if (cr.width >= nr.width * 0.9 && cr.height >= nr.height * 0.9) return true;
+    }
+    return false;
+  }
+  function findBackdropAncestor(el) {
+    let node = el.parentElement;
+    while (node && node !== node.ownerDocument.documentElement) {
+      if (paintsBackdrop(node)) return node;
+      node = node.parentElement;
+    }
+    return null;
+  }
+
+  // Mean sRGB (0-1) of a canvas region, used as the halftone ground when the
+  // backdrop was captured from an ancestor rather than read from a CSS color.
+  function averageRgb01(ctx, w, h) {
+    const data = ctx.getImageData(0, 0, w, h).data;
+    let r = 0, g = 0, b = 0, n = 0;
+    // Stride a few pixels for speed; exact average is unnecessary for a ground.
+    for (let i = 0; i < data.length; i += 16) { r += data[i]; g += data[i + 1]; b += data[i + 2]; n++; }
+    return n ? [r / n / 255, g / n / 255, b / n / 255] : SHADER_PAPER_FALLBACK;
+  }
+
+  // Average the backdrop sampled just OUTSIDE an element's rect within a larger
+  // canvas. The ground tone for the dissolve must be the real backdrop, not the
+  // mean of the element's own crop — averaging the crop folds in the element's
+  // content (e.g. bright heading text), pulling the ground toward muddy gray.
+  function sampleSurroundingRgb(ctx, sx, sy, sw, sh, W, H) {
+    const pad = Math.max(2, Math.round(Math.min(sw, sh) * 0.12));
+    const fx = [0.2, 0.5, 0.8].map((f) => sx + sw * f);
+    const fy = [0.2, 0.5, 0.8].map((f) => sy + sh * f);
+    const pts = [];
+    for (const x of fx) { pts.push([x, sy - pad], [x, sy + sh + pad]); }
+    for (const y of fy) { pts.push([sx - pad, y], [sx + sw + pad, y]); }
+    let r = 0, g = 0, b = 0, n = 0;
+    for (const [px, py] of pts) {
+      const cx = Math.max(0, Math.min(W - 1, Math.round(px)));
+      const cy = Math.max(0, Math.min(H - 1, Math.round(py)));
+      const d = ctx.getImageData(cx, cy, 1, 1).data;
+      if (d[3] === 0) continue; // outside the ancestor's paint
+      r += d[0]; g += d[1]; b += d[2]; n++;
+    }
+    return n ? [r / n / 255, g / n / 255, b / n / 255] : null;
+  }
+
   function compileShader(gl, type, source) {
     const sh = gl.createShader(type);
     gl.shaderSource(sh, source);
@@ -5376,7 +5530,7 @@ void main() {
     shaderState = null;
   }
 
-  async function showShaderOverlay(el, blob, rect) {
+  async function showShaderOverlay(el, blob, rect, paper) {
     hideShaderOverlay();
     if (!blob || !el) return;
     const canvas = document.createElement('canvas');
@@ -5474,7 +5628,9 @@ void main() {
     const uTime = gl.getUniformLocation(program, 'u_time');
     const uRes = gl.getUniformLocation(program, 'u_resolution');
     const uAccent = gl.getUniformLocation(program, 'u_accent');
+    const uPaper = gl.getUniformLocation(program, 'u_paper');
     const uTex = gl.getUniformLocation(program, 'u_texture');
+    const paperRgb = paper || resolvePaperRgb(el);
     const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 
     shaderState = { canvas, gl, program, texture, rafId: 0, startTime: performance.now(), reduced };
@@ -5490,6 +5646,7 @@ void main() {
       gl.uniform1f(uTime, t);
       gl.uniform2f(uRes, canvas.width, canvas.height);
       gl.uniform3f(uAccent, SHADER_ACCENT[0], SHADER_ACCENT[1], SHADER_ACCENT[2]);
+      gl.uniform3f(uPaper, paperRgb[0], paperRgb[1], paperRgb[2]);
       gl.drawArrays(gl.TRIANGLES, 0, 6);
       shaderState.rafId = requestAnimationFrame(frame);
     }
@@ -5792,9 +5949,9 @@ void main() {
           try {
             const rect = shaderTarget.getBoundingClientRect();
             if (rect.width === 0 || rect.height === 0) return;
-            const blob = await captureElementToBlob(shaderTarget, null, rect);
+            const { blob, paper } = await captureElementToBlob(shaderTarget, null, rect);
             if (blob && state === 'GENERATING') {
-              showShaderOverlay(shaderTarget, blob, rect);
+              showShaderOverlay(shaderTarget, blob, rect, paper);
             }
           } catch (err) {
             console.warn('[impeccable] shader resume failed:', err);
diff --git a/site/pages/shader-lab/index.astro b/site/pages/shader-lab/index.astro
new file mode 100644
index 000000000..afd96d885
--- /dev/null
+++ b/site/pages/shader-lab/index.astro
@@ -0,0 +1,804 @@
+---
+// Shader Lab: a standalone harness for the live-mode generation shader.
+//
+// Live mode (skill/scripts/live-browser.js) captures the selected element to a
+// PNG via modern-screenshot, then runs an "ink-wash" WebGL shader over that
+// texture while the model generates. The capture path is brittle: transparent
+// elements can come back with a solid white background. This page reproduces
+// the exact pipeline against a matrix of element/background shapes so we can
+// see which ones break BEFORE touching the production code.
+//
+// Left column: the raw element on its page background.
+// Right column: a byte-identical copy with the real capture + shader on top,
+//               plus a readout of what resolveCanvasBackground() decided.
+//
+// The capture/shader code below is copied verbatim from live-browser.js. If you
+// change it there, mirror it here (and vice-versa). This lab is only honest
+// while the two stay in sync.
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="robots" content="noindex" />
+    <title>Shader Lab · live-mode capture + overlay</title>
+    <!-- CSS is parked in an inert text/css block and injected as a real
+         stylesheet at runtime (see the inline script). This sidesteps Astro's
+         style scoping, which would otherwise tag only build-time elements and
+         leave the runtime-built .row/.pair/.cell nodes unstyled. -->
+    <script type="text/css" id="lab-css-src" is:inline>
+      :root {
+        color-scheme: light;
+        --ink: oklch(20% 0.02 60);
+        --ash: oklch(55% 0.02 60);
+        --hairline: oklch(85% 0.01 60);
+        --page: oklch(96% 0.012 75);
+        --accent: oklch(84% 0.19 80.46);
+      }
+      * { box-sizing: border-box; }
+      body {
+        margin: 0;
+        font: 15px/1.5 ui-sans-serif, system-ui, -apple-system, sans-serif;
+        color: var(--ink);
+        background: var(--page);
+        padding: 48px 32px 120px;
+      }
+      header { max-width: 1100px; margin: 0 auto 8px; }
+      h1 { font-size: 26px; margin: 0 0 6px; letter-spacing: -0.01em; }
+      header p { margin: 0; color: var(--ash); max-width: 70ch; }
+      .toolbar {
+        max-width: 1100px; margin: 20px auto 36px;
+        display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
+      }
+      .toolbar button {
+        font: inherit; font-weight: 600; cursor: pointer;
+        padding: 8px 16px; border-radius: 8px;
+        border: 1px solid var(--ink); background: var(--ink); color: var(--page);
+      }
+      .toolbar button.secondary { background: transparent; color: var(--ink); }
+      .toolbar .status { color: var(--ash); font-size: 13px; }
+
+      .grid { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
+
+      .row {
+        border: 1px solid var(--hairline);
+        border-radius: 14px;
+        background: oklch(99% 0.004 75);
+        overflow: hidden;
+      }
+      .row-head {
+        display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
+        padding: 12px 16px; border-bottom: 1px solid var(--hairline);
+      }
+      .row-head .title { font-weight: 600; }
+      .row-head .desc { color: var(--ash); font-size: 13px; }
+      .row-head .readout {
+        margin-left: auto; font: 12px/1.4 ui-monospace, "SF Mono", Menlo, monospace;
+        color: var(--ash); display: flex; align-items: center; gap: 8px;
+      }
+      .readout .swatch {
+        width: 14px; height: 14px; border-radius: 3px;
+        border: 1px solid var(--hairline);
+        background-image:
+          linear-gradient(45deg, #ccc 25%, transparent 25%),
+          linear-gradient(-45deg, #ccc 25%, transparent 25%),
+          linear-gradient(45deg, transparent 75%, #ccc 75%),
+          linear-gradient(-45deg, transparent 75%, #ccc 75%);
+        background-size: 8px 8px;
+        background-position: 0 0, 0 4px, 4px -4px, -4px 0;
+        position: relative;
+      }
+      .readout .swatch i { position: absolute; inset: 0; border-radius: 2px; }
+      .readout .val.is-white { color: oklch(58% 0.18 25); font-weight: 600; }
+
+      .pair { display: grid; grid-template-columns: 1fr 1fr; }
+      .cell { position: relative; min-height: 200px; padding: 28px; display: grid; place-items: center; }
+      .cell + .cell { border-left: 1px solid var(--hairline); }
+      .cell-tag {
+        position: absolute; top: 8px; left: 10px; z-index: 5;
+        font: 11px/1 ui-monospace, monospace; letter-spacing: 0.04em;
+        text-transform: uppercase; color: var(--ash);
+        background: oklch(100% 0 0 / 0.65); padding: 3px 6px; border-radius: 5px;
+      }
+      /* Each cell hosts an isolated mini-page so resolveCanvasBackground walks a
+         realistic ancestor chain (including a transparent root, where it must
+         fall back). */
+      .stage { width: 100%; max-width: 360px; height: auto; border: 0; display: block; }
+      iframe.stage { width: 100%; max-width: 360px; height: 200px; }
+
+      footer { max-width: 1100px; margin: 48px auto 0; color: var(--ash); font-size: 13px; }
+      code { font: 12px/1.4 ui-monospace, monospace; background: oklch(92% 0.01 75); padding: 1px 5px; border-radius: 4px; }
+    </script>
+  </head>
+  <body>
+    <header>
+      <h1>Shader Lab</h1>
+      <p>
+        Reproduces live mode's capture + ink-wash shader pipeline against varied
+        backgrounds. Left is the raw element; right runs the real
+        <code>modern-screenshot</code> capture and WebGL overlay on top. The
+        <code>bg:</code> readout is exactly what <code>resolveCanvasBackground()</code>
+        handed to the capture. Watch for <code>#ffffff</code> appearing on
+        elements that should stay transparent or dark.
+      </p>
+    </header>
+
+    <div class="toolbar">
+      <button id="run">Re-run capture</button>
+      <button id="toggle" class="secondary">Pause animation</button>
+      <span class="status" id="status">booting…</span>
+    </div>
+
+    <div class="grid" id="grid"></div>
+
+    <footer>
+      Capture + shader code is copied from
+      <code>skill/scripts/live-browser.js</code>. Keep them in sync.
+    </footer>
+
+    <script src="/shader-lab/modern-screenshot.js" is:inline></script>
+    <script is:inline>
+// Promote the parked CSS to a real stylesheet so it applies to everything,
+// including the rows we build at runtime.
+(function injectLabCss() {
+  const src = document.getElementById('lab-css-src');
+  if (!src) return;
+  const style = document.createElement('style');
+  style.textContent = src.textContent;
+  document.head.appendChild(style);
+})();
+
+// ===========================================================================
+//  Fixtures: each is an isolated mini-page (rendered into an iframe) so the
+//  ancestor-background walk is realistic. `bodyBg` is the simulated page
+//  background; '' means the page set nothing (transparent root): the case
+//  that makes resolveCanvasBackground fall through to white.
+// ===========================================================================
+const FIXTURE_CSS = `
+  *{box-sizing:border-box;margin:0}
+  html,body{height:100%}
+  body{font:15px/1.45 ui-sans-serif,system-ui,sans-serif;display:grid;place-items:center;padding:24px}
+  .card{width:280px;padding:24px;border-radius:16px}
+  h3{font-size:18px;margin-bottom:6px;letter-spacing:-0.01em}
+  p{font-size:13px;opacity:0.8}
+  .btn{display:inline-block;margin-top:14px;padding:8px 14px;border-radius:8px;font-size:13px;font-weight:600}
+`;
+
+const FIXTURES = [
+  {
+    id: 'own-solid-light',
+    title: 'Own solid bg (light)',
+    desc: 'Element paints its own light background. Should resolve to null (no override).',
+    bodyBg: 'oklch(96% 0.012 75)',
+    html: `<div class="card" data-target style="background:oklch(93% 0.02 80);color:#222">
+      <h3>Champagne card</h3><p>Owns an opaque light background.</p>
+      <span class="btn" style="background:#222;color:#fff">Action</span></div>`,
+  },
+  {
+    id: 'own-solid-dark',
+    title: 'Own solid bg (dark)',
+    desc: 'Dark own background, light text. The halftone should ride dark cells.',
+    bodyBg: 'oklch(96% 0.012 75)',
+    html: `<div class="card" data-target style="background:oklch(22% 0.02 60);color:#f4efe6">
+      <h3>Lacquer card</h3><p>Owns an opaque dark background.</p>
+      <span class="btn" style="background:oklch(84% 0.19 80);color:#1a1a1a">Action</span></div>`,
+  },
+  {
+    id: 'transparent-root-white',
+    title: 'Transparent, page bg unset',
+    desc: 'Element + every ancestor transparent. This is the reported bug: capture falls back to white.',
+    bodyBg: '',
+    html: `<div class="card" data-target style="color:#222">
+      <h3>No background</h3><p>Element and root are transparent.</p>
+      <span class="btn" style="background:#222;color:#fff">Action</span></div>`,
+  },
+  {
+    id: 'transparent-dark-page',
+    title: 'Transparent on dark page',
+    desc: 'Element transparent, but the page is dark. Should resolve to the dark page color, not white.',
+    bodyBg: 'oklch(20% 0.02 60)',
+    html: `<div class="card" data-target style="color:#f4efe6">
+      <h3>On dark page</h3><p>Inherits the dark page background.</p>
+      <span class="btn" style="background:oklch(84% 0.19 80);color:#1a1a1a">Action</span></div>`,
+  },
+  {
+    id: 'nested-inherit',
+    title: 'Nested, inherits parent bg',
+    desc: 'Transparent element inside an opaque colored wrapper. Should resolve to the wrapper color.',
+    bodyBg: 'oklch(96% 0.012 75)',
+    html: `<div style="padding:22px;border-radius:18px;background:oklch(30% 0.06 250)">
+      <div class="card" data-target style="color:#eef2ff">
+        <h3>Nested panel</h3><p>No own bg; sits on a blue wrapper.</p>
+        <span class="btn" style="background:#fff;color:#1f2a55">Action</span></div></div>`,
+  },
+  {
+    id: 'linear-gradient',
+    title: 'Linear gradient bg',
+    desc: 'Own gradient background-image. Should resolve to null (element owns its paint).',
+    bodyBg: 'oklch(96% 0.012 75)',
+    html: `<div class="card" data-target style="background:linear-gradient(135deg,oklch(70% 0.16 30),oklch(60% 0.18 320));color:#fff">
+      <h3>Gradient card</h3><p>Linear gradient background-image.</p>
+      <span class="btn" style="background:rgba(0,0,0,0.3);color:#fff">Action</span></div>`,
+  },
+  {
+    id: 'radial-gradient',
+    title: 'Radial gradient bg',
+    desc: 'Own radial gradient. Should resolve to null.',
+    bodyBg: 'oklch(96% 0.012 75)',
+    html: `<div class="card" data-target style="background:radial-gradient(circle at 30% 30%,oklch(85% 0.14 200),oklch(45% 0.12 260));color:#fff">
+      <h3>Radial card</h3><p>Radial gradient background-image.</p>
+      <span class="btn" style="background:rgba(0,0,0,0.3);color:#fff">Action</span></div>`,
+  },
+  {
+    id: 'bg-image',
+    title: 'Background image',
+    desc: 'Own background-image (data URI). Should resolve to null.',
+    bodyBg: 'oklch(96% 0.012 75)',
+    html: `<div class="card" data-target style="background-image:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%2240%22><rect width=%2240%22 height=%2240%22 fill=%22%23264653%22/><circle cx=%2210%22 cy=%2210%22 r=%226%22 fill=%22%23e9c46a%22/></svg>');background-size:40px;color:#fff">
+      <h3>Image card</h3><p>Tiled SVG background image.</p>
+      <span class="btn" style="background:rgba(0,0,0,0.4);color:#fff">Action</span></div>`,
+  },
+  {
+    id: 'rgba-semi',
+    title: 'Semi-transparent bg',
+    desc: 'rgba() background with alpha 0.5 over a dark page. Own color is not fully transparent, so resolves to null.',
+    bodyBg: 'oklch(25% 0.05 270)',
+    html: `<div class="card" data-target style="background:rgba(255,255,255,0.5);color:#1a1a1a">
+      <h3>Frosted half</h3><p>50% white over a dark page.</p>
+      <span class="btn" style="background:#1a1a1a;color:#fff">Action</span></div>`,
+  },
+  {
+    id: 'glass-blur',
+    title: 'Glass / backdrop-blur',
+    desc: 'backdrop-filter over a gradient page. Capture cannot replay the live blur, so the fallback shows instead.',
+    bodyBg: 'linear-gradient(135deg,oklch(70% 0.16 30),oklch(55% 0.18 280))',
+    html: `<div class="card" data-target style="background:rgba(255,255,255,0.18);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.4);color:#fff">
+      <h3>Glass panel</h3><p>backdrop-filter blur over a gradient.</p>
+      <span class="btn" style="background:rgba(255,255,255,0.25);color:#fff">Action</span></div>`,
+  },
+  {
+    id: 'rounded-shadow',
+    title: 'Rounded + drop shadow',
+    desc: 'Opaque card with a large box-shadow. Shadow spills outside the rect; watch the clipping.',
+    bodyBg: 'oklch(96% 0.012 75)',
+    html: `<div class="card" data-target style="background:#fff;color:#222;box-shadow:0 24px 60px -20px rgba(0,0,0,0.45)">
+      <h3>Floating card</h3><p>Soft drop shadow beyond the box.</p>
+      <span class="btn" style="background:#222;color:#fff">Action</span></div>`,
+  },
+  {
+    id: 'css-var-bg',
+    title: 'Bg via CSS variable',
+    desc: 'Background driven by a custom property. Should resolve to null (computed color is opaque).',
+    bodyBg: 'oklch(96% 0.012 75)',
+    html: `<div style="--surface:oklch(40% 0.1 150)">
+      <div class="card" data-target style="background:var(--surface);color:#eafff3">
+        <h3>Token surface</h3><p>Background comes from a CSS variable.</p>
+        <span class="btn" style="background:#eafff3;color:#13361f">Action</span></div></div>`,
+  },
+  {
+    // Replica of the homepage "Tune interfaces while they run" hero. The dark
+    // ground comes ONLY from the kintsugi art layer (absolute, a child of the
+    // hero); the hero itself and the page have no opaque background-color,
+    // exactly like the real site. The shader targets the HEADING, so the
+    // bubble-up in resolvePaperRgb/resolveCanvasBackground walks heading →
+    // inner → hero → body and finds nothing opaque, falling back to white. That
+    // reproduces the homepage bug: a white halftone patch flashes over the dark
+    // hero. (The readout shows bg: #ffffff.)
+    id: 'hero-replica',
+    title: 'Homepage hero (shader on heading)',
+    desc: 'Heading over a hero whose dark look is only the art layer. Bubble-up finds no opaque bg, so it falls back to white (the homepage bug).',
+    bodyBg: '',
+    wide: true,
+    h: 400,
+    html: `<style>
+      body{padding:0 !important}
+      .hero{position:relative;width:100%;height:100%;min-height:340px;overflow:hidden;display:grid;align-items:center}
+      .hero-art{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,oklch(7% 0.006 95/0.9) 0%,oklch(7% 0.006 95/0.5) 8%,transparent 18%),url('/assets/neo-kinpaku/candidates/finalists/m-01-v2-01.png') center/cover no-repeat;filter:saturate(1.2) contrast(1.08)}
+      .hero-inner{position:relative;z-index:1;padding:34px;display:grid;gap:18px;max-width:520px}
+      .hero-title{margin:0;color:oklch(84% 0.035 82);font-family:"Alumni Sans Pinstripe","Albert Sans",Arial,sans-serif;font-weight:300;font-size:2.9rem;line-height:1.02;letter-spacing:-0.01em}
+      .hero-copy{margin:0;color:oklch(81% 0.03 82);font-size:0.92rem;line-height:1.55;font-weight:300;max-width:40ch}
+      .hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:2px}
+      .hero-cta a{min-height:46px;display:inline-flex;align-items:center;gap:10px;padding:0 22px;border-radius:2px;font-size:0.9rem;font-weight:500;border:1px solid transparent;text-decoration:none}
+      .btn-primary{color:oklch(4% 0.004 95);background:oklch(84% 0.19 80.46);border-color:oklch(84% 0.19 80.46)}
+      .btn-secondary{color:oklch(84% 0.19 80.46);background:transparent;border-color:oklch(84% 0.19 80.46)}
+    </style>
+    <div class="hero">
+      <div class="hero-art"></div>
+      <div class="hero-inner">
+        <h1 class="hero-title" data-target>Tune interfaces<br>while they run.</h1>
+        <p class="hero-copy">Your AI ships generic frontend by default. Impeccable teaches it to design in your production codebase.</p>
+        <div class="hero-cta"><a class="btn-primary">Get started &rarr;</a><a class="btn-secondary">How it works</a></div>
+      </div>
+    </div>`,
+  },
+];
+
+// ===========================================================================
+//  COPIED FROM skill/scripts/live-browser.js. Keep in sync.
+// ===========================================================================
+
+// Use the element's own document view so the lab works on iframe-hosted
+// fixtures the same way it would on the live page.
+function cs(el) {
+  return (el.ownerDocument.defaultView || window).getComputedStyle(el);
+}
+
+function isTransparentColor(s) {
+  if (!s) return true;
+  if (s === 'transparent') return true;
+  const m = /rgba?\(([^)]+)\)/.exec(s);
+  if (!m) return false;
+  const parts = m[1].split(',').map((p) => p.trim());
+  if (parts.length === 4) return parseFloat(parts[3]) === 0;
+  return false;
+}
+
+function resolveCanvasBackground(el) {
+  const own = cs(el);
+  if (!isTransparentColor(own.backgroundColor)) return null;
+  if (own.backgroundImage && own.backgroundImage !== 'none') return null;
+  let node = el.parentElement;
+  while (node) {
+    const style = cs(node);
+    if (!isTransparentColor(style.backgroundColor)) return style.backgroundColor;
+    node = node.parentElement;
+  }
+  // Walked through <body> and <html> without finding an opaque background.
+  // The browser canvas defaults to white, so we do too.
+  return '#ffffff';
+}
+
+// Effective background tone used as the uniform halftone ground (always returns
+// a usable color, unlike resolveCanvasBackground which returns null when the
+// element owns its bg). Matches resolvePaperRgb in live-browser.js.
+const SHADER_PAPER_FALLBACK = [0.975, 0.965, 0.955];
+// Rasterize any CSS color (oklch, color(), named, hex, rgb) through a 1x1
+// canvas and read back the sRGB pixel. Chrome returns oklch backgroundColors as
+// oklch()/color(), which a hex/rgb regex misses; every site token would fall
+// back to white otherwise.
+let colorParseCtx = null;
+function cssColorToRgb01(str) {
+  if (!colorParseCtx) {
+    colorParseCtx = document.createElement('canvas').getContext('2d', { willReadFrequently: true });
+  }
+  // Clear first: the ctx is cached, so a semi-transparent color would blend
+  // with the previous call's pixel and make the result history-dependent.
+  colorParseCtx.clearRect(0, 0, 1, 1);
+  colorParseCtx.fillStyle = '#000';
+  colorParseCtx.fillStyle = str;
+  colorParseCtx.fillRect(0, 0, 1, 1);
+  const d = colorParseCtx.getImageData(0, 0, 1, 1).data;
+  return [d[0] / 255, d[1] / 255, d[2] / 255];
+}
+function resolvePaperRgb(el) {
+  let node = el;
+  while (node) {
+    const bg = cs(node).backgroundColor;
+    if (!isTransparentColor(bg)) return cssColorToRgb01(bg);
+    node = node.parentElement;
+  }
+  return SHADER_PAPER_FALLBACK;
+}
+
+// Nearest ancestor that actually paints a backdrop behind a transparent-to-root
+// element, via its own background-image, or a covering positioned child layer
+// (e.g. a hero's absolute art div). Mirrors findBackdropAncestor in
+// live-browser.js. Returns null when nothing is painted (white is correct).
+function paintsBackdrop(node) {
+  const s = cs(node);
+  if (s.backgroundImage && s.backgroundImage !== 'none') return true;
+  const nr = node.getBoundingClientRect();
+  for (const child of node.children) {
+    const ccs = cs(child);
+    if (ccs.position !== 'absolute' && ccs.position !== 'fixed') continue;
+    const paints = !isTransparentColor(ccs.backgroundColor)
+      || (ccs.backgroundImage && ccs.backgroundImage !== 'none');
+    if (!paints) continue;
+    const cr = child.getBoundingClientRect();
+    if (cr.width >= nr.width * 0.9 && cr.height >= nr.height * 0.9) return true;
+  }
+  return false;
+}
+function findBackdropAncestor(el) {
+  let node = el.parentElement;
+  while (node && node !== node.ownerDocument.documentElement) {
+    if (paintsBackdrop(node)) return node;
+    node = node.parentElement;
+  }
+  return null;
+}
+function averageRgb01(ctx, w, h) {
+  const data = ctx.getImageData(0, 0, w, h).data;
+  let r = 0, g = 0, b = 0, n = 0;
+  for (let i = 0; i < data.length; i += 16) { r += data[i]; g += data[i + 1]; b += data[i + 2]; n++; }
+  return n ? [r / n / 255, g / n / 255, b / n / 255] : SHADER_PAPER_FALLBACK;
+}
+// Backdrop sampled just outside an element's rect (the true ground tone),
+// excluding the element's own content. Matches sampleSurroundingRgb in
+// live-browser.js.
+function sampleSurroundingRgb(ctx, sx, sy, sw, sh, W, H) {
+  const pad = Math.max(2, Math.round(Math.min(sw, sh) * 0.12));
+  const fx = [0.2, 0.5, 0.8].map((f) => sx + sw * f);
+  const fy = [0.2, 0.5, 0.8].map((f) => sy + sh * f);
+  const pts = [];
+  for (const x of fx) { pts.push([x, sy - pad], [x, sy + sh + pad]); }
+  for (const y of fy) { pts.push([sx - pad, y], [sx + sw + pad, y]); }
+  let r = 0, g = 0, b = 0, n = 0;
+  for (const [px, py] of pts) {
+    const cx = Math.max(0, Math.min(W - 1, Math.round(px)));
+    const cy = Math.max(0, Math.min(H - 1, Math.round(py)));
+    const d = ctx.getImageData(cx, cy, 1, 1).data;
+    if (d[3] === 0) continue;
+    r += d[0]; g += d[1]; b += d[2]; n++;
+  }
+  return n ? [r / n / 255, g / n / 255, b / n / 255] : null;
+}
+
+const SHADER_VS = `attribute vec2 a_position;
+attribute vec2 a_uv;
+varying vec2 v_uv;
+void main() {
+  v_uv = a_uv;
+  gl_Position = vec4(a_position, 0.0, 1.0);
+}`;
+
+const SHADER_FS = `precision highp float;
+uniform sampler2D u_texture;
+uniform float u_time;
+uniform vec2 u_resolution;
+uniform vec3 u_accent;
+uniform vec3 u_paper;
+varying vec2 v_uv;
+
+float bandAt(float d, float leadW, float trailW) {
+  float above = smoothstep(-leadW, 0.0, d);
+  float below = 1.0 - smoothstep(0.0, trailW, d);
+  return above * below;
+}
+
+void main() {
+  vec2 uv = v_uv;
+  float phase = fract(u_time / 3.4);
+  float y = phase * 1.25 - 0.12;
+  float band = bandAt(uv.y - y, 0.05, 0.32);
+
+  float cellPx = 10.0;
+  vec2 gridUv = uv * u_resolution / cellPx;
+  vec2 cellId = floor(gridUv);
+  vec2 cellUv = fract(gridUv) - 0.5;
+  vec2 sampleCenter = (cellId + 0.5) * cellPx / u_resolution;
+  vec3 cellImg = texture2D(u_texture, sampleCenter).rgb;
+  // Dot size tracks how much the cell DIFFERS from the element's ground
+  // (u_paper), not absolute darkness, so content becomes the dots on light and
+  // dark alike (a darkness curve inverts on dark elements). Capped so dense
+  // content stays separated dots.
+  float contrast = clamp(length(cellImg - u_paper) / 1.732, 0.0, 1.0);
+  float radius = min(sqrt(contrast) * 0.6, 0.38);
+  float dotMask = smoothstep(radius + 0.06, radius, length(cellUv));
+  // Two-stage dissolve so content is rebuilt from dot size and never bleeds
+  // through as raw pixels: (1) cover flattens the element to the uniform paper
+  // ground first, (2) dotAmt then ramps the kinpaku dots in. u_paper is the
+  // element's own bg tone, so it reads the same on light and dark.
+  vec4 tex = texture2D(u_texture, uv);
+  vec3 base = tex.rgb;
+  float cover = smoothstep(0.0, 0.35, band);
+  float dotAmt = dotMask * smoothstep(0.15, 0.6, band);
+  vec3 ground = mix(base, u_paper, cover);
+  // Carry the capture's alpha so rounded corners / transparent regions show the
+  // live backdrop through the canvas instead of rendering black.
+  gl_FragColor = vec4(mix(ground, u_accent, dotAmt), tex.a);
+}`;
+
+const SHADER_ACCENT = [1.0, 0.78, 0.31];
+
+function compileShader(gl, type, source) {
+  const sh = gl.createShader(type);
+  gl.shaderSource(sh, source);
+  gl.compileShader(sh);
+  if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) {
+    const info = gl.getShaderInfoLog(sh);
+    gl.deleteShader(sh);
+    throw new Error('shader compile failed: ' + info);
+  }
+  return sh;
+}
+
+// ===========================================================================
+//  Lab harness (adapted from live mode for iframe-hosted, scroll-tracked
+//  overlays). The capture/shader internals above are unchanged.
+// ===========================================================================
+
+const statusEl = document.getElementById('status');
+const gridEl = document.getElementById('grid');
+let paused = false;
+const overlays = []; // { gl?, program?, texture?, canvas, startTime, target, iframe } | { reduced }
+
+function loadModernScreenshot() {
+  return Promise.resolve(window.modernScreenshot);
+}
+
+async function captureElementToBlob(el) {
+  try { if (el.ownerDocument.fonts?.ready) await el.ownerDocument.fonts.ready; } catch {}
+  const ms = await loadModernScreenshot();
+  const opts = { scale: Math.min(window.devicePixelRatio || 1, 2) };
+  const bg = resolveCanvasBackground(el);
+  // Fast path: element owns its bg, or an opaque ancestor color was found.
+  if (bg !== '#ffffff') {
+    const blob = await ms.domToBlob(el, { ...opts, ...(bg ? { backgroundColor: bg } : {}) });
+    return { blob, paper: bg ? cssColorToRgb01(bg) : resolvePaperRgb(el), note: bg || "(null, owns bg)" };
+  }
+  // Transparent to the root: capture the ancestor that paints the real backdrop
+  // (image / covering layer) and crop to the element, so the actual backdrop is
+  // embedded instead of white. Fall back to white only when nothing is painted.
+  const backdrop = findBackdropAncestor(el);
+  if (!backdrop) {
+    const blob = await ms.domToBlob(el, { ...opts, backgroundColor: '#ffffff' });
+    return { blob, paper: SHADER_PAPER_FALLBACK, note: '#ffffff (nothing behind)' };
+  }
+  const ancestorCanvas = await ms.domToCanvas(backdrop, opts);
+  const S = opts.scale;
+  const er = el.getBoundingClientRect();
+  const ar = backdrop.getBoundingClientRect();
+  const sx = (er.left - ar.left) * S, sy = (er.top - ar.top) * S;
+  const sw = er.width * S, sh = er.height * S;
+  const crop = document.createElement('canvas');
+  crop.width = Math.max(1, Math.round(sw));
+  crop.height = Math.max(1, Math.round(sh));
+  const cctx = crop.getContext('2d', { willReadFrequently: true });
+  cctx.drawImage(ancestorCanvas, sx, sy, sw, sh, 0, 0, crop.width, crop.height);
+  // Ground = backdrop sampled around the element (not the crop mean, which
+  // would fold in the heading text and turn the ground gray).
+  const actx = ancestorCanvas.getContext('2d', { willReadFrequently: true });
+  const paper = sampleSurroundingRgb(actx, sx, sy, sw, sh, ancestorCanvas.width, ancestorCanvas.height)
+    || averageRgb01(cctx, crop.width, crop.height);
+  const blob = await new Promise((res) => crop.toBlob(res, 'image/png'));
+  return { blob, paper, note: 'backdrop captured <' + backdrop.className + '>' };
+}
+
+// Position a fixed-position canvas over an element living inside an iframe.
+function rectForTarget(iframe, target) {
+  const ir = iframe.getBoundingClientRect();
+  const tr = target.getBoundingClientRect();
+  return { top: ir.top + tr.top, left: ir.left + tr.left, width: tr.width, height: tr.height };
+}
+
+async function mountShaderOverlay(cell, iframe, target, blob, paper) {
+  const rect = rectForTarget(iframe, target);
+  const canvas = document.createElement('canvas');
+  const dpr = Math.min(window.devicePixelRatio || 1, 2);
+  canvas.width = Math.max(1, Math.floor(rect.width * dpr));
+  canvas.height = Math.max(1, Math.floor(rect.height * dpr));
+  Object.assign(canvas.style, {
+    position: 'fixed', pointerEvents: 'none', zIndex: '50',
+    top: rect.top + 'px', left: rect.left + 'px',
+    width: rect.width + 'px', height: rect.height + 'px',
+  });
+  document.body.appendChild(canvas);
+
+  const gl = canvas.getContext('webgl', { premultipliedAlpha: false, preserveDrawingBuffer: false })
+          || canvas.getContext('experimental-webgl');
+  if (!gl) {
+    canvas.remove();
+    const img = document.createElement('img');
+    img.src = URL.createObjectURL(blob);
+    img.style.cssText = 'position:fixed;pointer-events:none;z-index:50;outline:2px dashed #b8860b;outline-offset:-2px;' +
+      `top:${rect.top}px;left:${rect.left}px;width:${rect.width}px;height:${rect.height}px;`;
+    document.body.appendChild(img);
+    overlays.push({ canvas: img, target, iframe, plain: true });
+    return;
+  }
+
+  let program, texture;
+  try {
+    const vs = compileShader(gl, gl.VERTEX_SHADER, SHADER_VS);
+    const fs = compileShader(gl, gl.FRAGMENT_SHADER, SHADER_FS);
+    program = gl.createProgram();
+    gl.attachShader(program, vs);
+    gl.attachShader(program, fs);
+    gl.linkProgram(program);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+      throw new Error('program link failed: ' + gl.getProgramInfoLog(program));
+    }
+    const buf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+      -1, -1, 0, 1,  1, -1, 1, 1,  -1, 1, 0, 0,
+      -1, 1, 0, 0,   1, -1, 1, 1,   1, 1, 1, 0,
+    ]), gl.STATIC_DRAW);
+    const posLoc = gl.getAttribLocation(program, 'a_position');
+    const uvLoc = gl.getAttribLocation(program, 'a_uv');
+    gl.enableVertexAttribArray(posLoc);
+    gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 16, 0);
+    gl.enableVertexAttribArray(uvLoc);
+    gl.vertexAttribPointer(uvLoc, 2, gl.FLOAT, false, 16, 8);
+  } catch (err) {
+    console.warn('[shader-lab] shader setup failed:', err);
+    canvas.remove();
+    return;
+  }
+
+  let bitmap;
+  try {
+    bitmap = await createImageBitmap(blob);
+  } catch {
+    const imgUrl = URL.createObjectURL(blob);
+    const img = new Image();
+    img.src = imgUrl;
+    await new Promise((r, rej) => { img.onload = r; img.onerror = rej; });
+    bitmap = img;
+    URL.revokeObjectURL(imgUrl);
+  }
+  texture = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  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);
+  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, bitmap);
+  if (bitmap.close) bitmap.close();
+
+  const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  overlays.push({
+    gl, program, texture, canvas, target, iframe, reduced,
+    paper: paper || resolvePaperRgb(target),
+    uTime: gl.getUniformLocation(program, 'u_time'),
+    uRes: gl.getUniformLocation(program, 'u_resolution'),
+    uAccent: gl.getUniformLocation(program, 'u_accent'),
+    uPaper: gl.getUniformLocation(program, 'u_paper'),
+    uTex: gl.getUniformLocation(program, 'u_texture'),
+  });
+}
+
+// The roller sweeps far slower here than in live mode (TIME_SCALE) so the dot
+// matrix is easy to read, and a shared clock keeps every overlay in phase.
+// Pause freezes the clock in place rather than snapping back to the top.
+const TIME_SCALE = 0.18;
+let labClock = 0;
+let lastTs = null;
+
+function tick(ts) {
+  if (lastTs === null) lastTs = ts;
+  const dt = (ts - lastTs) / 1000;
+  lastTs = ts;
+  if (!paused) labClock += dt * TIME_SCALE;
+  for (const o of overlays) {
+    // Keep every overlay glued to its (possibly scrolled) target.
+    const rect = rectForTarget(o.iframe, o.target);
+    Object.assign(o.canvas.style, {
+      top: rect.top + 'px', left: rect.left + 'px',
+      width: rect.width + 'px', height: rect.height + 'px',
+    });
+    if (o.plain || !o.gl) continue;
+    const gl = o.gl;
+    const t = o.reduced ? 0.0 : labClock;
+    gl.viewport(0, 0, o.canvas.width, o.canvas.height);
+    gl.useProgram(o.program);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, o.texture);
+    gl.uniform1i(o.uTex, 0);
+    gl.uniform1f(o.uTime, t);
+    gl.uniform2f(o.uRes, o.canvas.width, o.canvas.height);
+    gl.uniform3f(o.uAccent, SHADER_ACCENT[0], SHADER_ACCENT[1], SHADER_ACCENT[2]);
+    gl.uniform3f(o.uPaper, o.paper[0], o.paper[1], o.paper[2]);
+    gl.drawArrays(gl.TRIANGLES, 0, 6);
+  }
+  requestAnimationFrame(tick);
+}
+
+function clearOverlays() {
+  for (const o of overlays) {
+    if (o.gl) { try { o.gl.getExtension('WEBGL_lose_context')?.loseContext(); } catch {} }
+    o.canvas.remove();
+  }
+  overlays.length = 0;
+}
+
+function writeFixtureDoc(iframe, fx) {
+  const doc = iframe.contentDocument;
+  doc.open();
+  doc.write(
+    '<!doctype html><html><head><meta charset="utf-8"><style>' + FIXTURE_CSS +
+    '</style></head><body' + (fx.bodyBg ? ' style="background:' + fx.bodyBg + '"' : '') +
+    '>' + fx.html + '</body></html>',
+  );
+  doc.close();
+}
+
+function iframeReady(iframe) {
+  return new Promise((resolve) => {
+    if (iframe.contentDocument?.readyState === 'complete') resolve();
+    else iframe.addEventListener('load', () => resolve(), { once: true });
+  });
+}
+
+function buildRows() {
+  gridEl.innerHTML = '';
+  const rows = [];
+  for (const fx of FIXTURES) {
+    const row = document.createElement('div');
+    row.className = 'row';
+    row.innerHTML = `
+      <div class="row-head">
+        <span class="title">${fx.title}</span>
+        <span class="desc">${fx.desc}</span>
+        <span class="readout">bg:
+          <span class="swatch"><i></i></span>
+          <span class="val">…</span>
+        </span>
+      </div>
+      <div class="pair">
+        <div class="cell" data-role="raw"><span class="cell-tag">raw</span></div>
+        <div class="cell" data-role="shader"><span class="cell-tag">capture + shader</span></div>
+      </div>`;
+    gridEl.appendChild(row);
+    rows.push({ fx, row });
+  }
+  return rows;
+}
+
+async function run() {
+  clearOverlays();
+  statusEl.textContent = 'capturing…';
+  const rows = buildRows();
+
+  for (const { fx, row } of rows) {
+    const rawCell = row.querySelector('[data-role="raw"]');
+    const shaderCell = row.querySelector('[data-role="shader"]');
+    const valEl = row.querySelector('.readout .val');
+    const swatchEl = row.querySelector('.readout .swatch i');
+
+    // Build both stages as identical iframes so the raw side and the captured
+    // side render in byte-identical contexts.
+    for (const cell of [rawCell, shaderCell]) {
+      const iframe = document.createElement('iframe');
+      iframe.className = 'stage';
+      iframe.setAttribute('scrolling', 'no');
+      if (fx.h) iframe.style.height = fx.h + 'px';
+      if (fx.wide) iframe.style.maxWidth = 'none';
+      cell.appendChild(iframe);
+      cell._iframe = iframe;
+    }
+    await Promise.all([iframeReady(rawCell._iframe), iframeReady(shaderCell._iframe)]);
+    writeFixtureDoc(rawCell._iframe, fx);
+    writeFixtureDoc(shaderCell._iframe, fx);
+    // Let the freshly written docs lay out before measuring/capturing.
+    await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)));
+
+    const target = shaderCell._iframe.contentDocument.querySelector('[data-target]');
+    if (!target) { valEl.textContent = '(no target)'; continue; }
+
+    try {
+      const { blob, paper, note } = await captureElementToBlob(target);
+      valEl.textContent = note;
+      // Only the genuine "nothing painted behind it" case is the bug now; an
+      // embedded backdrop (ancestor-captured) is the fix, so don't flag it red.
+      valEl.classList.toggle('is-white', /nothing behind/.test(note));
+      const [pr, pg, pb] = paper.map((c) => Math.round(c * 255));
+      swatchEl.style.background = `rgb(${pr}, ${pg}, ${pb})`;
+      await mountShaderOverlay(shaderCell, shaderCell._iframe, target, blob, paper);
+    } catch (err) {
+      console.error('[shader-lab] capture failed for', fx.id, err);
+      valEl.textContent = 'capture error: ' + err.message;
+    }
+  }
+  statusEl.textContent = `${overlays.length} overlay(s) live · ${FIXTURES.length} fixtures`;
+}
+
+document.getElementById('run').addEventListener('click', run);
+document.getElementById('toggle').addEventListener('click', (e) => {
+  paused = !paused;
+  e.target.textContent = paused ? 'Resume animation' : 'Pause animation';
+});
+
+if (!window.modernScreenshot) {
+  statusEl.textContent = 'modern-screenshot failed to load';
+} else {
+  requestAnimationFrame(tick);
+  run();
+}
+    </script>
+  </body>
+</html>
diff --git a/site/pages/shader-lab/modern-screenshot.js.ts b/site/pages/shader-lab/modern-screenshot.js.ts
new file mode 100644
index 000000000..1447c1b4a
--- /dev/null
+++ b/site/pages/shader-lab/modern-screenshot.js.ts
@@ -0,0 +1,17 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+// Serve the same vendored modern-screenshot UMD build the live server hands to
+// the injected overlay (skill/scripts/live-server.mjs -> /modern-screenshot.js).
+// Reading it straight off disk keeps the shader lab in lockstep with what live
+// mode actually runs, with no committed copy to drift.
+const VENDOR_PATH = path.join(process.cwd(), 'skill', 'scripts', 'modern-screenshot.umd.js');
+
+export function GET() {
+  return new Response(fs.readFileSync(VENDOR_PATH, 'utf-8'), {
+    headers: {
+      'Content-Type': 'application/javascript; charset=utf-8',
+      'Cache-Control': 'no-store',
+    },
+  });
+}
diff --git a/skill/scripts/live-browser.js b/skill/scripts/live-browser.js
index 028363916..f1e525786 100644
--- a/skill/scripts/live-browser.js
+++ b/skill/scripts/live-browser.js
@@ -5209,9 +5209,11 @@
     return '#ffffff';
   }
 
-  // Capture the element (with current annotations baked in) and return a PNG
-  // Blob. Shared between the Go flow (uploads it to the server) and the
-  // debug toggle (displays it as an overlay for side-by-side comparison).
+  // Capture the element (with current annotations baked in) and return
+  // { blob, paper }: the PNG Blob, plus the representative backdrop tone for the
+  // shader's halftone ground (so capture, upload, and shader all agree on what
+  // sits behind the element). Shared between the Go flow (uploads the blob) and
+  // the shader-resume path.
   async function captureElementToBlob(el, snapshot, rect) {
     try { if (document.fonts?.ready) await document.fonts.ready; } catch {}
     const hasAnnotations = snapshot && (snapshot.comments.length > 0 || snapshot.strokes.length > 0);
@@ -5229,12 +5231,46 @@
     try {
       const ms = await loadModernScreenshot();
       const fontCssText = await collectFontCssText();
-      const backgroundColor = resolveCanvasBackground(el);
-      return await ms.domToBlob(el, {
+      const opts = {
         scale: Math.min(window.devicePixelRatio || 1, 2),
         font: fontCssText ? { cssText: fontCssText } : undefined,
-        ...(backgroundColor ? { backgroundColor } : {}),
-      });
+      };
+      const bg = resolveCanvasBackground(el);
+      // Fast path: the element paints its own background, or an opaque ancestor
+      // color was found. modern-screenshot bakes that color; paper matches it.
+      if (bg !== '#ffffff') {
+        const blob = await ms.domToBlob(el, { ...opts, ...(bg ? { backgroundColor: bg } : {}) });
+        return { blob, paper: bg ? cssColorToRgb01(bg) : resolvePaperRgb(el) };
+      }
+      // Transparent up to the root. The visible backdrop may still come from an
+      // ancestor's background-image or a covering positioned layer (e.g. a hero
+      // art div) that the color walk can't see. Capture that ancestor and crop
+      // to the element so the real backdrop is embedded — correct for both the
+      // shader and the screenshot sent to the model. Fall back to white only
+      // when nothing is actually painted behind the element.
+      const backdrop = findBackdropAncestor(el);
+      if (!backdrop) {
+        const blob = await ms.domToBlob(el, { ...opts, backgroundColor: '#ffffff' });
+        return { blob, paper: SHADER_PAPER_FALLBACK };
+      }
+      const ancestorCanvas = await ms.domToCanvas(backdrop, opts);
+      const S = opts.scale;
+      const er = el.getBoundingClientRect();
+      const ar = backdrop.getBoundingClientRect();
+      const sx = (er.left - ar.left) * S, sy = (er.top - ar.top) * S;
+      const sw = er.width * S, sh = er.height * S;
+      const crop = document.createElement('canvas');
+      crop.width = Math.max(1, Math.round(sw));
+      crop.height = Math.max(1, Math.round(sh));
+      const cctx = crop.getContext('2d', { willReadFrequently: true });
+      cctx.drawImage(ancestorCanvas, sx, sy, sw, sh, 0, 0, crop.width, crop.height);
+      // Ground = backdrop sampled around the element, falling back to the crop
+      // mean only if the surround is fully transparent.
+      const actx = ancestorCanvas.getContext('2d', { willReadFrequently: true });
+      const paper = sampleSurroundingRgb(actx, sx, sy, sw, sh, ancestorCanvas.width, ancestorCanvas.height)
+        || averageRgb01(cctx, crop.width, crop.height);
+      const blob = await new Promise((res) => crop.toBlob(res, 'image/png'));
+      return { blob, paper };
     } finally {
       if (annotNode) annotNode.remove();
       if (savedPosition !== null) el.style.position = savedPosition;
@@ -5244,15 +5280,16 @@
   async function captureAndEmit(el, basePayload, snapshot, rect) {
     let screenshotPath;
     let blob;
+    let paper;
     try {
-      blob = await captureElementToBlob(el, snapshot, rect);
+      ({ blob, paper } = await captureElementToBlob(el, snapshot, rect));
     } catch (err) {
       console.warn('[impeccable] capture failed, proceeding without screenshot:', err);
     }
     // Light up the shader overlay the moment capture is ready — no reason to
     // wait for the upload to complete before the user sees something alive.
     if (blob && state === 'GENERATING') {
-      showShaderOverlay(el, blob, rect);
+      showShaderOverlay(el, blob, rect, paper);
     }
     // Only upload + forward the screenshot when annotations (comments/strokes)
     // are present. Without annotations the image is pure visual anchoring —
@@ -5300,6 +5337,7 @@ uniform sampler2D u_texture;
 uniform float u_time;
 uniform vec2 u_resolution;
 uniform vec3 u_accent;
+uniform vec3 u_paper;
 varying vec2 v_uv;
 
 // Asymmetric roller band. Product of two one-sided smoothsteps — peaks at
@@ -5327,23 +5365,139 @@ void main() {
   vec2 cellUv = fract(gridUv) - 0.5;
   vec2 sampleCenter = (cellId + 0.5) * cellPx / u_resolution;
   vec3 cellImg = texture2D(u_texture, sampleCenter).rgb;
-  float luma = dot(cellImg, vec3(0.299, 0.587, 0.114));
-  // Darker cells → bigger kinpaku dots (classic risograph halftone curve).
-  float radius = sqrt(clamp(1.0 - luma, 0.0, 1.0)) * 0.56;
+  // Dot size tracks how much the cell DIFFERS from the element's own ground
+  // (u_paper), not absolute darkness. So the content — text, buttons, anything
+  // that deviates from the background — always becomes the dots, on light AND
+  // dark surfaces. A plain darkness curve inverts on dark elements: the dark
+  // background fills with ink and the lighter content punches holes instead.
+  // Capped below the cell half-width so dense content stays separated dots.
+  float contrast = clamp(length(cellImg - u_paper) / 1.732, 0.0, 1.0);
+  float radius = min(sqrt(contrast) * 0.6, 0.38);
   float dotMask = smoothstep(radius + 0.06, radius, length(cellUv));
-  vec3 paper = vec3(0.975, 0.965, 0.955);
-  vec3 dotLayer = mix(paper, u_accent, dotMask);
-
-  // Blend the halftone layer in where the roller is passing; leave the
-  // element pristine elsewhere.
-  vec3 base = texture2D(u_texture, uv).rgb;
-  gl_FragColor = vec4(mix(base, dotLayer, band), 1.0);
+  // Two-stage dissolve as the roller passes, so the element is rebuilt purely
+  // from dot size (its own halftone) and never bleeds through as raw pixels
+  // behind the dots:
+  //   1. cover  — the element flattens to the uniform paper ground first.
+  //   2. dotAmt — kinpaku dots then emerge, sized by each cell's luma.
+  // A plain mix(base, halftone, band) instead left the raw element visible
+  // through the band's soft core/trail. The paper ground is u_paper (the
+  // element's own bg tone) rather than a fixed white, so the dissolve reads the
+  // same over light and dark surfaces.
+  vec4 tex = texture2D(u_texture, uv);
+  vec3 base = tex.rgb;
+  float cover = smoothstep(0.0, 0.35, band);
+  float dotAmt = dotMask * smoothstep(0.15, 0.6, band);
+  vec3 ground = mix(base, u_paper, cover);
+  // Carry the capture's own alpha through, so a rounded corner or any genuinely
+  // transparent region stays transparent (the live backdrop shows through the
+  // canvas) instead of rendering as solid black.
+  gl_FragColor = vec4(mix(ground, u_accent, dotAmt), tex.a);
 }`;
 
   // Kinpaku gold converted to approximate sRGB 0-1 (matches oklch(84% 0.19 80.46))
   const SHADER_ACCENT = [1.0, 0.78, 0.31];
+  // Fallback ground when an element and all its ancestors are transparent —
+  // matches the original off-white risograph paper.
+  const SHADER_PAPER_FALLBACK = [0.975, 0.965, 0.955];
   let shaderState = null; // { canvas, gl, program, texture, rafId, startTime }
 
+  // The element's effective background tone, used as the uniform halftone
+  // ground so content dissolves into dots over it. Unlike resolveCanvasBackground
+  // (which returns null when the element paints its own bg), this always returns
+  // a usable color: the element's own background if any, else the nearest opaque
+  // ancestor, else the paper fallback.
+  // Rasterize any CSS color (oklch, color(), named, hex, rgb) through a 1x1
+  // canvas and read back the sRGB pixel. String-parsing computed colors is a
+  // trap: Chrome returns backgroundColor as oklch()/color() for oklch inputs,
+  // which a hex/rgb regex misses — every site token would fall back to white.
+  let colorParseCtx = null;
+  function cssColorToRgb01(str) {
+    if (!colorParseCtx) {
+      colorParseCtx = document.createElement('canvas').getContext('2d', { willReadFrequently: true });
+    }
+    // Clear first: the ctx is cached across calls, so a semi-transparent color
+    // would otherwise blend (source-over) with the previous call's leftover
+    // pixel, making the result depend on call history.
+    colorParseCtx.clearRect(0, 0, 1, 1);
+    colorParseCtx.fillStyle = '#000'; // invalid input leaves this default
+    colorParseCtx.fillStyle = str;
+    colorParseCtx.fillRect(0, 0, 1, 1);
+    const d = colorParseCtx.getImageData(0, 0, 1, 1).data;
+    return [d[0] / 255, d[1] / 255, d[2] / 255];
+  }
+  function resolvePaperRgb(el) {
+    let node = el;
+    while (node) {
+      const bg = getComputedStyle(node).backgroundColor;
+      if (!isTransparentColor(bg)) return cssColorToRgb01(bg);
+      node = node.parentElement;
+    }
+    return SHADER_PAPER_FALLBACK;
+  }
+
+  // When an element is transparent up to the root, its visible backdrop can
+  // still come from an ancestor's background-image or a covering positioned
+  // layer that is a *child* of an ancestor (e.g. a hero's absolute art div) —
+  // neither of which the ancestor background-COLOR walk can see. Return the
+  // nearest such ancestor so we can capture it and crop, embedding the real
+  // backdrop. Returns null when nothing is actually painted behind the element
+  // (genuinely transparent → white is correct).
+  function paintsBackdrop(node) {
+    const s = getComputedStyle(node);
+    if (s.backgroundImage && s.backgroundImage !== 'none') return true;
+    const nr = node.getBoundingClientRect();
+    for (const child of node.children) {
+      const ccs = getComputedStyle(child);
+      if (ccs.position !== 'absolute' && ccs.position !== 'fixed') continue;
+      const paints = !isTransparentColor(ccs.backgroundColor)
+        || (ccs.backgroundImage && ccs.backgroundImage !== 'none');
+      if (!paints) continue;
+      const cr = child.getBoundingClientRect();
+      if (cr.width >= nr.width * 0.9 && cr.height >= nr.height * 0.9) return true;
+    }
+    return false;
+  }
+  function findBackdropAncestor(el) {
+    let node = el.parentElement;
+    while (node && node !== node.ownerDocument.documentElement) {
+      if (paintsBackdrop(node)) return node;
+      node = node.parentElement;
+    }
+    return null;
+  }
+
+  // Mean sRGB (0-1) of a canvas region, used as the halftone ground when the
+  // backdrop was captured from an ancestor rather than read from a CSS color.
+  function averageRgb01(ctx, w, h) {
+    const data = ctx.getImageData(0, 0, w, h).data;
+    let r = 0, g = 0, b = 0, n = 0;
+    // Stride a few pixels for speed; exact average is unnecessary for a ground.
+    for (let i = 0; i < data.length; i += 16) { r += data[i]; g += data[i + 1]; b += data[i + 2]; n++; }
+    return n ? [r / n / 255, g / n / 255, b / n / 255] : SHADER_PAPER_FALLBACK;
+  }
+
+  // Average the backdrop sampled just OUTSIDE an element's rect within a larger
+  // canvas. The ground tone for the dissolve must be the real backdrop, not the
+  // mean of the element's own crop — averaging the crop folds in the element's
+  // content (e.g. bright heading text), pulling the ground toward muddy gray.
+  function sampleSurroundingRgb(ctx, sx, sy, sw, sh, W, H) {
+    const pad = Math.max(2, Math.round(Math.min(sw, sh) * 0.12));
+    const fx = [0.2, 0.5, 0.8].map((f) => sx + sw * f);
+    const fy = [0.2, 0.5, 0.8].map((f) => sy + sh * f);
+    const pts = [];
+    for (const x of fx) { pts.push([x, sy - pad], [x, sy + sh + pad]); }
+    for (const y of fy) { pts.push([sx - pad, y], [sx + sw + pad, y]); }
+    let r = 0, g = 0, b = 0, n = 0;
+    for (const [px, py] of pts) {
+      const cx = Math.max(0, Math.min(W - 1, Math.round(px)));
+      const cy = Math.max(0, Math.min(H - 1, Math.round(py)));
+      const d = ctx.getImageData(cx, cy, 1, 1).data;
+      if (d[3] === 0) continue; // outside the ancestor's paint
+      r += d[0]; g += d[1]; b += d[2]; n++;
+    }
+    return n ? [r / n / 255, g / n / 255, b / n / 255] : null;
+  }
+
   function compileShader(gl, type, source) {
     const sh = gl.createShader(type);
     gl.shaderSource(sh, source);
@@ -5376,7 +5530,7 @@ void main() {
     shaderState = null;
   }
 
-  async function showShaderOverlay(el, blob, rect) {
+  async function showShaderOverlay(el, blob, rect, paper) {
     hideShaderOverlay();
     if (!blob || !el) return;
     const canvas = document.createElement('canvas');
@@ -5474,7 +5628,9 @@ void main() {
     const uTime = gl.getUniformLocation(program, 'u_time');
     const uRes = gl.getUniformLocation(program, 'u_resolution');
     const uAccent = gl.getUniformLocation(program, 'u_accent');
+    const uPaper = gl.getUniformLocation(program, 'u_paper');
     const uTex = gl.getUniformLocation(program, 'u_texture');
+    const paperRgb = paper || resolvePaperRgb(el);
     const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 
     shaderState = { canvas, gl, program, texture, rafId: 0, startTime: performance.now(), reduced };
@@ -5490,6 +5646,7 @@ void main() {
       gl.uniform1f(uTime, t);
       gl.uniform2f(uRes, canvas.width, canvas.height);
       gl.uniform3f(uAccent, SHADER_ACCENT[0], SHADER_ACCENT[1], SHADER_ACCENT[2]);
+      gl.uniform3f(uPaper, paperRgb[0], paperRgb[1], paperRgb[2]);
       gl.drawArrays(gl.TRIANGLES, 0, 6);
       shaderState.rafId = requestAnimationFrame(frame);
     }
@@ -5792,9 +5949,9 @@ void main() {
           try {
             const rect = shaderTarget.getBoundingClientRect();
             if (rect.width === 0 || rect.height === 0) return;
-            const blob = await captureElementToBlob(shaderTarget, null, rect);
+            const { blob, paper } = await captureElementToBlob(shaderTarget, null, rect);
             if (blob && state === 'GENERATING') {
-              showShaderOverlay(shaderTarget, blob, rect);
+              showShaderOverlay(shaderTarget, blob, rect, paper);
             }
           } catch (err) {
             console.warn('[impeccable] shader resume failed:', err);