§6 cat gutter nudged right; sandbox output card bottom padding

- results.js: shift category labels and hairline brackets ~22 px right so
they sit close to their task rows instead of pinned to the svg edge.
- sandbox.css: bump .sb-card__body padding-bottom 0 → 22 px on the
sandbox panel so the output sequence block doesn't kiss the card edge.

Co-authored-by: Cursor <cursoragent@cursor.com>

assets/js/sections/intro.js

@@ -253,8 +253,8 @@
       }
       return d;
     }
-    el("path", { d: pathD(phaseA), fill: "none", stroke: STROKE, "stroke-width": 1.5, "stroke-linecap": "round" }, svg);
-    el("path", { d: pathD(phaseB), fill: "none", stroke: STROKE, "stroke-width": 1.5, "stroke-linecap": "round" }, svg);
+    el("path", { d: pathD(phaseA), fill: "none", stroke: STROKE, "stroke-width": 2, "stroke-linecap": "round" }, svg);
+    el("path", { d: pathD(phaseB), fill: "none", stroke: STROKE, "stroke-width": 2, "stroke-linecap": "round" }, svg);
 
     // 3. Letter glyphs themselves (no haloes, since the rung is already
     //    interrupted around each letter). fade tracks fadeForSep so the
@@ -280,11 +280,10 @@
     const ySpread = 12;
     const yA0 = yAt(6, phaseA),     yB0 = yAt(6, phaseB);
     const yA1 = yAt(W - 6, phaseA), yB1 = yAt(W - 6, phaseB);
-    const endTagOpts = { mono: true, size: 9, weight: 400, fill: FAINT, opacity: 0.55 };
-    text(svg, 6,     Math.min(yA0, yB0) - ySpread,     "5′", endTagOpts);
-    text(svg, W - 6, Math.min(yA1, yB1) - ySpread,     "3′", endTagOpts);
-    text(svg, 6,     Math.max(yA0, yB0) + ySpread + 2, "3′", endTagOpts);
-    text(svg, W - 6, Math.max(yA1, yB1) + ySpread + 2, "5′", endTagOpts);
+    text(svg, 6,     Math.min(yA0, yB0) - ySpread,     "5′", { mono: true, size: 9, weight: 500, fill: FAINT });
+    text(svg, W - 6, Math.min(yA1, yB1) - ySpread,     "3′", { mono: true, size: 9, weight: 500, fill: FAINT });
+    text(svg, 6,     Math.max(yA0, yB0) + ySpread + 2, "3′", { mono: true, size: 9, weight: 500, fill: FAINT });
+    text(svg, W - 6, Math.max(yA1, yB1) + ySpread + 2, "5′", { mono: true, size: 9, weight: 500, fill: FAINT });
   }
 
   root.querySelectorAll("[data-helix]").forEach(buildHelix);

assets/js/sections/results.js

@@ -167,16 +167,22 @@
     // One italic serif label per category, vertically centred on its run
     // of rows. Pure typographic separator — no boxes, no rules — to keep
     // the chart calm.
+    // Category labels and hairlines were sitting flush against the
+    // svg's left padding which felt visually adrift from the task
+    // labels. Nudging the whole gutter right by ~22 px ties the
+    // category brackets to the rows they label without crowding them.
+    const catLabelX = padL + 24;
+    const catHairlineX = padL + catW - 4;
     groups.forEach(g => {
       const yTop = rowYs[g.rows[0]];
       const yBot = rowYs[g.rows[g.rows.length - 1]] + rowH;
       const yMid = (yTop + yBot) / 2 + 6;
-      svg += `<text x="${padL + 4}" y="${yMid}" font-family="Georgia, serif" font-size="18" font-style="italic" fill="#666" text-anchor="start">${escapeXml(g.cat)}</text>`;
+      svg += `<text x="${catLabelX}" y="${yMid}" font-family="Georgia, serif" font-size="18" font-style="italic" fill="#666" text-anchor="start">${escapeXml(g.cat)}</text>`;
       // Subtle vertical hairline to bracket the category run when it has
       // more than one row. Skip for solo-row categories (Generative,
       // Long-context) — a hairline next to a single row reads as noise.
       if (g.rows.length > 1) {
-        svg += `<line x1="${padL + catW - 20}" y1="${yTop + 4}" x2="${padL + catW - 20}" y2="${yBot - 4}" stroke="#d8d4c8" stroke-width="1.5"/>`;
+        svg += `<line x1="${catHairlineX}" y1="${yTop + 4}" x2="${catHairlineX}" y2="${yBot - 4}" stroke="#d8d4c8" stroke-width="1.5"/>`;
       }
     });
 

assets/styles/sandbox.css

@@ -95,7 +95,7 @@
   color: #1f1f1d;
 }
 #panel-sandbox .sb-card__body {
-  padding: 16px 20px 0;
+  padding: 16px 20px 22px;
 }
 #panel-sandbox .sb-examples {
   display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px;