/* The boot screen (patterns.md 21.4 and 21.4.1; approved, D-33, FE-58 (a)): the stylesheet of the
   board AppLoading.dc.html as approved, without its lever aliases (.dark, .slow, .failed, .still),
   then the few rules a board cannot show. Its own copy of six colours. It reads only what production
   has: html.dark (/theme.js), html[data-boot] (/boot.js and the app), prefers-reduced-motion and
   forced-colors. It is the page's only stylesheet until the app's has loaded (that one is linked
   at the end of <body>, vite.entry-stylesheet.ts), so it draws the screen on its own.
   scripts/boot-screen.test.ts keeps it equal to the board's, rule for rule. */
body{margin:0}
.boot,.boot *{box-sizing:border-box}
.boot{--bg:#ECEFE6;--ink:#1D1F1B;--ink2:#565B51;--line:#D8DCCF;--primary:#1D1F1B;--onprimary:#FFFFFF;color-scheme:light;position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;background-color:var(--bg);color:var(--ink);font-family:'Sofia Sans','Segoe UI',Arial,sans-serif;font-size:14px;line-height:20px}
html.dark .boot{--bg:#0D0E0B;--ink:#E8EBE2;--ink2:#A6AB9E;--line:#2F322B;--primary:#E8EBE2;--onprimary:#151712;color-scheme:dark}
.boot__core{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;margin-top:-48px}
.boot__name{margin:0;font-family:'Sofia Sans Semi Condensed','Arial Narrow',Arial,sans-serif;letter-spacing:-.01em;font-weight:600;font-size:28px;line-height:34px;color:var(--ink)}
.boot__bar{position:relative;width:128px;height:3px;border-radius:2px;background-color:var(--line);overflow:hidden;animation:boot-hide 0s linear 8.4s forwards}
.boot__bar>span{position:absolute;top:0;left:0;width:40%;height:3px;border-radius:2px;background-color:var(--ink);transform:translateX(-100%)}
@media (prefers-reduced-motion:no-preference){
.boot__bar>span{animation:boot-cross 1.4s cubic-bezier(.65,0,.35,1) 6 both}
}
@keyframes boot-cross{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
@keyframes boot-show{to{visibility:visible}}
@keyframes boot-hide{to{visibility:hidden}}
.boot__word{display:none;margin:-8px 0 0;font-size:13px;line-height:18px;color:var(--ink2)}
@media (prefers-reduced-motion:reduce){
.boot__bar{display:none}
.boot__word{display:block}
}
.boot__below{position:absolute;top:100%;left:50%;width:380px;max-width:calc(100vw - 32px);transform:translateX(-50%);padding-top:22px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.boot__live{display:flex;flex-direction:column;align-items:center}
.boot__msg{margin:0;font-size:13px;line-height:18px;color:var(--ink2)}
.boot__link{font-size:13px;line-height:18px;font-weight:600;color:var(--ink)}
.boot__slow{visibility:hidden}
html:not([data-boot]) .boot__slow{animation:boot-show 0s linear 8s forwards}
html:not([data-boot]) .boot__sr,html:not([data-boot]) .boot__word{animation:boot-hide 0s linear 8s forwards}
.boot__failed{display:none}
html[data-boot="failed"] .boot__bar{visibility:hidden}
html[data-boot="failed"] .boot__word,html[data-boot="failed"] .boot__slow,html[data-boot="failed"] .boot__sr{display:none}
html[data-boot="failed"] .boot__below{padding-top:0}
html[data-boot="failed"] .boot__failed{display:flex;flex-direction:column;align-items:center;gap:6px}
.boot__failed h1{margin:0;font-size:16px;line-height:22px;font-weight:600;color:var(--ink)}
.boot__failed p{margin:0;max-width:340px;font-size:14px;line-height:20px;color:var(--ink2)}
.boot__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;margin-top:12px;padding:0 16px 0 14px;border:1px solid var(--primary);border-radius:6px;background-color:var(--primary);color:var(--onprimary);font-size:13px;font-weight:600;white-space:nowrap;text-decoration:none}
.boot__btn:hover{opacity:.88}
.boot :focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.boot__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* Beyond the board (R1-23 step L). Until the boot ends, the app's frame (#root) and the skip link
   into it are not shown: the screen stands in for the page they belong to, with or without script,
   whether the app's stylesheet has loaded or not. In forced colours (Windows contrast themes) the
   indicator's fills would become the ground and vanish, so they take system colours (accessibility.md
   D8). */
html:not([data-boot="ready"]) #root,html:not([data-boot="ready"]) .skip-link{display:none}
@media (forced-colors:active){
.boot__bar{background-color:GrayText}
.boot__bar>span{background-color:CanvasText}
}