/* Page backdrop: the DotField grid, ported from React Bits in shared/core/dotfield.js. Load after global.css. The page's own colour comes from --page on ; everything on top of it is the dot grid and the glow that trails the cursor. The three --dot-* values are the field's palette, kept here so a theme swap is a CSS change and never a rebuild of the grid. A page opts in by linking this file — chrome.js mounts the field only when it finds this stylesheet, so a page without it (the docs page) is left plain. */ /* z-index -1, not 0: a positioned box at 0 paints above in-flow content, so the backdrop would sit on top of any page whose content is not itself positioned. At -1 it paints above the canvas background and below everything else. */ .dotfield { position: fixed; inset: 0; pointer-events: none; z-index: -1; } /* The grid itself is drawn by shared/core/dotfield.js; this layer is only its container. It fades in once the first frame is on screen, so a page never flashes an empty rectangle while the module loads. */ .dotfield { opacity: 0; transition: opacity 0.6s var(--ease); } .dotfield.is-ready { opacity: 1; } :root { --dot-from: #151515; --dot-to: #a17f32; --dot-glow: #121114; } /* ── light ──────────────────────────────────────────── */ /* Warm paper: the same grid in a darker gold so it reads as ink on paper, over a pale glow — a dark pool would look like a smudge. */ html[data-theme="light"] { --dot-from: #8a6d23; --dot-to: #b98d2e; --dot-glow: #f4f1ea; }