/* The first screen, before the site's code has loaded (React replaces it with the same Loader, in the same place):
   the Seraph emblem in the ring of blue strands the app draws round its Start button, as components/Loader.tsx and
   styles/app.css draw it. The ring is the strands drawn once (boot-ring.svg, the same curves as strands.tsx ringDraw)
   and turned slowly; the emblem breathes. Kept out of index.html because the Content-Security-Policy allows no inline
   style or script. */
.boot { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; background: #f3f5f9; color: #4f5b73; font: 13.5px "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; }
.boot-mark { position: relative; display: block; width: 76px; height: 76px; }
.boot-mark > * { position: absolute; top: 50%; left: 50%; display: block; max-width: none; }
.boot-ring { width: 100px; height: 100px; margin: -50px 0 0 -50px; animation: boot-turn 18s linear infinite; }
.boot-emblem { width: 40px; height: 40px; margin: -20px 0 0 -20px; animation: boot-breathe 1.6s ease-in-out infinite; }
@keyframes boot-turn { to { transform: rotate(360deg); } }
@keyframes boot-breathe { 50% { transform: scale(.92); opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .boot-ring, .boot-emblem { animation: none; } }