/* Pre-React fullscreen ParcelFit variant of li-loader.jsx. No font imports or
   JavaScript dependencies: this is the first paint while React/Babel load.
   Brand fallbacks match LILoader.COLORS until li-tokens.css has loaded. */
#li-boot {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px; padding: 24px; box-sizing: border-box; text-align: center;
  background: var(--li-panel, #12241D); color: var(--li-cream, #F5F1E8);
  font: 13px/1.5 var(--li-font-body, system-ui, sans-serif);
}
.li-boot-lot {
  position: relative; width: 132px; height: 100px; flex: none;
  border: 2px dashed rgba(245,241,232,.45); border-radius: 8px; box-sizing: content-box;
}
.li-boot-lot i {
  position: absolute; display: block; border-radius: 3px;
  animation: li-boot-fit 3.4s ease infinite backwards;
}
.li-boot-lot i:nth-child(1) { top: 6px; left: 6px; width: 48px; height: 38px; background: var(--li-green-light, #3E9A72); --li-entry: translateX(-52px); }
.li-boot-lot i:nth-child(2) { top: 6px; right: 6px; width: 61px; height: 38px; background: var(--li-cream, #F5F1E8); --li-entry: translateY(-46px); animation-delay: .3s; }
.li-boot-lot i:nth-child(3) { bottom: 6px; left: 6px; width: 72px; height: 39px; background: var(--li-terracotta, #C96F4A); --li-entry: translateY(46px); animation-delay: .6s; }
.li-boot-lot i:nth-child(4) { bottom: 6px; right: 6px; width: 37px; height: 39px; background: var(--li-green, #2E7D5B); --li-entry: translateX(52px); animation-delay: .9s; }
.li-boot-copy { display: flex; flex-direction: column; gap: 8px; }
.li-boot-copy strong { font-size: 20px; letter-spacing: .02em; }
#li-boot-status, .li-boot-recovery { color: var(--li-text-2-on-dark, rgba(245,241,232,.6)); }
.li-boot-recovery {
  max-width: 28rem; margin: 0;
  visibility: hidden; animation: li-boot-reveal 0s 15s forwards;
}
.li-boot-recovery p { margin: 0 0 8px; }
#li-boot-retry { color: var(--li-cream, #F5F1E8); text-underline-offset: 3px; }
#li-boot-retry:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
@keyframes li-boot-fit {
  0% { opacity: 0; transform: var(--li-entry); }
  14%, 82% { opacity: 1; transform: translate(0); }
  92%, 100% { opacity: 0; transform: translate(0); }
}
@keyframes li-boot-reveal { to { visibility: visible; } }
@media (prefers-reduced-motion: reduce) {
  .li-boot-lot i { animation: none; opacity: 1; transform: none; }
}