, a genuine custom element that never calls WB.inject() and so * never passes through the JIT hook. */ @import url('./behaviors/layout.css'); @import url('./behaviors/ui-utils.css'); @import url('./behaviors/code.css'); /** * WB Starter - Site Layout Styles * Works with themes.css from x-behaviors */ /* Reset */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, sans-serif; } /* #917: an example's host is

, and the UA gives a

margin (1em top and bottom, 40 pixels each side) that a

host never had. demo.css undoes it, but demo.css loads just-in-time with the demo behavior, so until then every demo sat 16px lower and 80px narrower than on a

-- enough to change which demos are in view while the page's first scan decides what to build (measured on demos/site/overlays.html). Undone here, before any behavior, at zero specificity so any author rule still wins. */ :where(figure[x-demo]) { margin: 0; } /* #274: prose

s have zero margin by default, so a long item that wraps to 2+ lines sits flush against the next item -- their line boxes visually touch/overlap with no gap at all. Seen project-wide on any content page with wrapped list text (about.html, releases.html, etc). */ li { margin-bottom: 0.35em; } li:last-child { margin-bottom: 0; } /* ============================================================================= STANDALONE DEMO PAGE CONTAINER ============================================================================= */ /* demos/site/*.html pages are standalone (not routed through .site/.site__body, which is the app shell used by pages/*.html — see components.html). Without this, their content sits flush against the viewport edge with zero page margin, unlike every shell-routed page. index.html already worked around this with its own one-off inline