/* * Pre-mount splash screen styles. * Loaded render-blocking from index.html's so the splash paints fully * styled on first paint, before the bundled app CSS (which arrives via the JS * module) loads — same no-FOUC guarantee as the former inline styles. * * Kept in an external stylesheet (served from 'self') on purpose: the strict CSP * uses `style-src 'self' 'nonce-...'`, and a nonce cannot cover inline style="" * attributes — so index.html must carry no inline styles at all. */ body { margin: 0; } #splash-screen { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: #0b0f19; flex-direction: column; gap: 1.25rem; } #splash-screen img { width: 96px; height: 96px; border-radius: 1.5rem; } #splash-screen p { font-family: 'Exo 2', sans-serif; font-size: 1.25rem; font-weight: 600; letter-spacing: 0.02em; opacity: 0.8; color: #f1f5f9; margin: 0; } @media (prefers-color-scheme: light) { #splash-screen { background: #f1f5f9; } #splash-screen p { color: #1e293b; } } /* * Initial hidden state for the app root. The bundled style.css reveals #app * (via the appReveal animation) once it loads — this is the race-free handoff. */ #app { opacity: 0; height: 0; overflow: hidden; }