/* The page around the canvas, and the loading lane shown before the WebAssembly module runs.
   Colours are the application's tokens (webapp/src/theme.hpp). System fonts only: nothing is fetched. */
html, body { margin: 0; height: 100%; background: #05070d; overflow: hidden; }
#canvas { display: block; width: 100vw; height: 100vh; height: 100dvh; outline: none; }
/* The application holds the keyboard only while the canvas has focus, so say so when it does.
   Inset, because the canvas fills the viewport and an outside ring would be clipped away.
   Not after a tap or a click (boot.js marks those): the ring answers the keyboard only. */
#canvas:focus-visible:not([data-pointer]) { outline: 2px solid #35d6f5; outline-offset: -2px; }
/* Read by assistive technology, never drawn: the canvas cannot describe its own key behaviour. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
#boot { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none;
  background: radial-gradient(60% 50% at 30% 50%, rgba(47,123,255,.10), transparent 70%),
              radial-gradient(60% 50% at 70% 50%, rgba(139,92,246,.10), transparent 70%), #05070d;
  color: #929db5; font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; transition: opacity .3s ease; }
#boot.done { opacity: 0; }
.boot-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 16px; text-align: center; }
.boot-mark { width: 56px; height: 56px; overflow: visible; }
.boot-mark .bl { animation: cvl 2.4s ease-in-out infinite; }
.boot-mark .br { animation: cvr 2.4s ease-in-out infinite; }
.boot-mark .bc { animation: cvc 2.4s ease-in-out infinite; }
.boot-word { height: 15px; width: auto; display: block; }
.boot-bar { width: 180px; height: 2px; border-radius: 2px; background: #1c2842; overflow: hidden; }
.boot-bar i { display: block; width: 40%; height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, #2f7bff, #35d6f5, #8b5cf6); animation: cvbar 1.4s ease-in-out infinite; }
#boot.failed .boot-bar, #boot.failed .boot-mark * { animation: none; }
#boot.failed .boot-bar { visibility: hidden; }
#boot.failed .boot-text { color: #f5b84b; max-width: 420px; }
@keyframes cvl { 0%, 100% { transform: translateX(-3px); opacity: .6; } 50% { transform: translateX(0); opacity: 1; } }
@keyframes cvr { 0%, 100% { transform: translateX(3px); opacity: .6; } 50% { transform: translateX(0); opacity: 1; } }
@keyframes cvc { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes cvbar { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) {
  .boot-mark *, .boot-bar i { animation: none; }
  .boot-bar i { width: 100%; opacity: .5; }
}
.plain { position: fixed; inset: 0; z-index: 3; overflow: auto; padding: 24px; max-width: 720px; margin: 0 auto; color: #e8edf7;
  font: 16px/1.5 system-ui, sans-serif; background: #05070d; }
.plain a { color: #35d6f5; }
.plain h2 { margin: 1.4em 0 0.3em; font-size: 18px; }

/* The loading lane's pointer to the plain text: quiet, below the bar. */
.boot-agents { pointer-events: auto; margin: 22px 0 0; max-width: 34em; font: 13px/1.5 system-ui, sans-serif; color: #7d8aa5; text-align: center; }
.boot-agents a { color: #35d6f5; text-decoration: none; }