/* ========================================================================== Background Pattern Everything needed for the scrollable rectangle background lives here. The actual pattern image is generated in script.js (see PATTERN_CONFIG) and applied directly to , so it scrolls with the page content like any normal background. ========================================================================== */ :root { --bg-color: #ffffff; } * { margin: 0; box-sizing: border-box; } body { background-color: var(--bg-color); /* background-image / background-size are set from script.js */ background-repeat: repeat; } /* Background Frame Flashes (per 18)background.txt, script.js initBackgroundFrames) — slides 1 and 7b only. Sparse video-frame tiles sit ON TOP of everything else in the slide, including .source-wrap (6) and .source-line (5), not just the text. The overlay div itself is pointer-events:none (just a clipping box); only actual visible tiles are clickable, so a click reaches script.js's clear-and-restart handler (via bubbling) exactly where a tile is currently covering something, and passes through to the citation link/button everywhere else. */ .bg-frame-overlay { position: absolute; z-index: 7; inset: 0; overflow: hidden; pointer-events: none; } .bg-frame-tile { position: absolute; display: block; object-fit: cover; opacity: 1; pointer-events: auto; cursor: pointer; transition: opacity 0.6s ease; } .bg-frame-tile-pending { opacity: 0; pointer-events: none; /* not yet visible -- shouldn't block clicks to whatever's beneath it */ } /* ========================================================================== Volume toggle (top right corner, fixed, per 19)volumebutton.txt) Site always loads muted (autoplay requirement -- see script.js initVolumeToggle), so it starts as a white/hollow circle; a click flips every