/* Boot screen painted before any script runs (see index.html). Served as a
   file because the CSP allows only self-hosted stylesheets. */
/* Boot screen: painted before any script runs, removed when React mounts.
Same canvas and card colours as the app so the hand-off is a fade. */
html, body { margin: 0; background: #e8e8f0; }
#boot { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 12px; background: #e8e8f0; transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1); }
#boot.done { opacity: 0; pointer-events: none; }
#boot .card { display: grid; place-items: center; width: min(100%, 1416px); aspect-ratio: 1.73 / 1; border-radius: 18px; background: #0f1219; box-shadow: 0 30px 80px -30px rgba(15, 18, 25, 0.6); }
#boot .mark { font-family: 'Playfair Display', Georgia, serif; font-weight: 300; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.92); font-size: clamp(18px, 2.2vw, 28px); text-align: center; }
#boot .sub { margin-top: 6px; font-size: 8px; letter-spacing: 0.3em; color: rgba(255, 255, 255, 0.6); }
#boot .bar { margin: 26px auto 0; width: 88px; height: 1px; background: rgba(255, 255, 255, 0.12); overflow: hidden; border-radius: 1px; }
#boot .bar i { display: block; width: 40%; height: 100%; background: #9dfff1; animation: boot-slide 1.1s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes boot-slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { #boot .bar i { animation: none; width: 100%; opacity: 0.5; } #boot { transition: none; } }