:root { /* The default render is now black-on-white; ?polarity=inverted is the dark one. Painting the pre-paint ground light matches the default, so there is no dark flash before the first WebGL frame. */ color-scheme: light; } html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; background: #F7F6F3; } #stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; /* Default covers the debounce+wordmark-rebuild window during a resize (main.js's scheduleResizeCommit/commitResize toggles .is-resizing); value tracks src/params.js's resizeFadeMs, set live from main.js. This is a cover for that unavoidable async latency, not a fix for a black frame — the ordering fix (mask rebuilt before the buffer is ever touched) is what actually prevents a mismatched/cleared frame from being presented. Brief and subtle: a partial dim, not a blackout, and the global prefers-reduced-motion rule below already collapses this transition to a near-instant cut. */ --resize-fade-ms: 160ms; opacity: 1; transition: opacity var(--resize-fade-ms) ease; } #stage.is-resizing { opacity: 0.55; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Fallback wordmark — shown when main.js detects no WebGL2 support. Hidden by default; revealed by the `no-gl` class on . This is the only thing a visitor on an old browser ever sees. Refinement round: the WebGL default flipped to black-on-white (see mono.glsl.js's polarity), with a pure-black wordmark — this is the one spot in styles.css that refinement round is allowed to touch, and it needed to: leaving this dark-ground/gold-ink fallback as-is would mean a visitor on an old browser sees a completely different palette (dark + gilt) from everyone else (light + black ink), which reads as broken rather than as a deliberate degraded mode. Recoloured to the same black-on-white gesture, with a faint warm/verdigris glow kept for character rather than a flat CSS-default black. */ .fallback-wordmark { display: none; } html.no-gl { overflow: hidden; } html.no-gl #stage { display: none; } html.no-gl .fallback-wordmark { display: flex; position: fixed; inset: 0; align-items: center; justify-content: center; background: radial-gradient(ellipse 140% 90% at 50% 46%, #ffffff 0%, #f7f6f2 28%, #efeee8 55%, #e8e6dd 100%); color: #0a0a0a; font-family: 'UnifrakturMaguntia', 'UnifrakturCook', serif; font-size: clamp(2.75rem, 14vw, 7rem); letter-spacing: 0.02em; text-shadow: 0 0 40px rgba(74, 97, 87, 0.16), 0 0 4px rgba(201, 143, 63, 0.20); padding: 0 1rem; text-align: center; user-select: none; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }