show the space the page is not using

Two hairlines said where the measure ends and left the reader to notice that everything outside them
was empty. The margins are tinted now, faintly, so the unused width reads as what it is — room the page
does not occupy, which is the question somebody widening a gutter or judging a desktop layout is
actually asking.

Faint on purpose: it is absence, and anything stronger competes with the content for the eye. Nothing
is drawn at all when the frame is no wider than the measure, which is the existing early return.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

web/canvas.ts

@@ -512,6 +512,37 @@ export function paintMeasure(document: Document): () => void {
     // lines against the edges would be noise claiming to be information.
     if (box.width >= (document.documentElement.clientWidth || 0) - 1) return;
 
+    /*
+      The margins THEMSELVES, not only the lines that bound them.
+
+      Two hairlines say where the measure ends and leave the reader to notice that the space outside is
+      empty. Tinting it says what that space IS: room the page is not using, which is the question
+      somebody widening a gutter or judging a desktop layout is actually asking. On a narrow frame there
+      is nothing to tint and the block below returns before drawing any of it.
+    */
+    for (const [side, from, width] of [
+      ['left', 0, box.left],
+      ['right', box.right, (document.documentElement.clientWidth || 0) - box.right],
+    ] as const) {
+      if (width <= 0) continue;
+      const margin = document.createElement('div');
+      margin.setAttribute(MARK, `measure-margin-${side}`);
+      style(margin, [
+        'position:fixed',
+        'top:0',
+        'bottom:0',
+        `left:${Math.round(from)}px`,
+        `width:${Math.round(width)}px`,
+        // Faint, because this is the part of the screen the page does NOT occupy: it has to read as
+        // absence. Anything stronger competes with the content for the eye.
+        `background:color-mix(in srgb, ${ACCENT} 7%, transparent)`,
+        'pointer-events:none',
+        'z-index:2147482999',
+      ]);
+      document.body.append(margin);
+      guides.push(margin);
+    }
+
     for (const [side, x] of [
       ['left', box.left],
       ['right', box.right],