From 13ade4a7e256858d8a8d82bf9a87d12a835d2c1e Mon Sep 17 00:00:00 2001
From: Paul Bakaus <paul.bakaus@gmail.com>
Date: Wed, 8 Apr 2026 11:15:15 -0700
Subject: [PATCH] Bigger, truly invisible buffer around demo

Two issues with the previous buffer pass:

1. The buffer was too small (20px) to feel forgiving.
2. The visible box had a cream background while the buffer area showed
   the paper page background, creating a 2% contrast inset that read
   as a card-inside-a-card border.

Bump the buffer to 32px per side (64px total) so the demo stops at
500px visible with 564px max-width. Change .split-container background
from cream to paper so it blends into the page and the buffer area is
genuinely invisible. The demo box is now defined by its 1px mist border
and 12px radius alone; individual demos still provide their own
background colors on top via the inline before/after HTML.
---
 public/css/sub-pages.css | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/public/css/sub-pages.css b/public/css/sub-pages.css
index f5494deb0..c6e74dd24 100644
--- a/public/css/sub-pages.css
+++ b/public/css/sub-pages.css
@@ -997,13 +997,15 @@ main#main {
 .split-comparison {
   position: relative;
   width: 100%;
-  max-width: 540px;
-  /* 20px padding acts as an invisible hover buffer so the divider does
-     not immediately snap back when the pointer grazes the box edge.
-     Negative top/bottom margins collapse the padding out of layout flow
-     so the demo still sits at its intended rhythm in the page. */
-  padding: 20px;
-  margin: -20px 0 calc(clamp(2rem, 4vw, 3rem) - 20px);
+  /* 500px visible + 64px buffer (32px per side) = 564px total.
+     box-sizing: border-box is inherited, so children sit in 500px. */
+  max-width: 564px;
+  /* 32px padding is an invisible hover buffer so the divider does not
+     immediately snap back when the pointer grazes the visible box
+     edge. Negative top/bottom margins collapse the padding out of
+     layout flow so the demo keeps its rhythm in the page. */
+  padding: 32px;
+  margin: -32px 0 calc(clamp(2rem, 4vw, 3rem) - 32px);
 }
 
 .split-container {
@@ -1012,7 +1014,10 @@ main#main {
   height: 360px;
   border-radius: 12px;
   overflow: hidden;
-  background: var(--color-cream);
+  /* Match the page background so the 32px padding area is invisible.
+     The border + border-radius define the visible box; individual
+     demo content provides its own colors on top. */
+  background: var(--color-paper);
   border: 1px solid var(--color-mist);
   cursor: ew-resize;
   user-select: none;