@font-face {
  font-family: Archivo;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/assets/fonts/archivo/Archivo-800.ttf") format("truetype");
}
@font-face {
  font-family: Archivo;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/assets/fonts/archivo/Archivo-600.ttf") format("truetype");
}
:root {
  --boot-bg: #006D42;
  --boot-fg: #FFFFFF;
  --boot-muted: #DAF6E4;
  --boot-faint: #B8EBCC;
  --boot-line: rgba(255, 255, 255, .14);
  --boot-shuttle: #FFFFFF;
  --boot-cork: #E2BF9A;
  --boot-track: rgba(0, 38, 20, .55);
  --boot-bar: #E2BF9A;
  --boot-note: rgba(0, 38, 20, .7);
  --boot-button-bg: #FFFFFF;
  --boot-button-fg: #006D42;
}
@media (prefers-color-scheme: dark) {
  :root {
    --boot-bg: #0C110D;
    --boot-fg: #F7F8F7;
    --boot-shuttle: #51C388;
    --boot-cork: #EFD8C0;
    --boot-track: #013F25;
    --boot-bar: #51C388;
    --boot-note: #013F25;
    --boot-button-bg: #51C388;
    --boot-button-fg: #0C110D;
  }
}
html, body { margin: 0; height: 100%; background: var(--boot-bg); }
#boot {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  background: var(--boot-bg);
  color: var(--boot-fg);
  font-family: Archivo, system-ui, sans-serif;
  transition: opacity .2s ease-out;
}
#boot.boot-done { opacity: 0; pointer-events: none; }
.boot-court {
  position: relative;
  width: min(100%, 420px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  overflow: hidden;
}
.boot-line { position: absolute; border: 0 solid var(--boot-line); }
.boot-side { left: 32px; right: 32px; top: 0; bottom: 0; border-left-width: 2px; border-right-width: 2px; }
.boot-top { left: 0; right: 0; top: 140px; border-top-width: 2px; }
.boot-bottom { left: 0; right: 0; bottom: 140px; border-top-width: 2px; }
.boot-rally { position: relative; width: 248px; height: 150px; }
.boot-floor { position: absolute; left: 0; right: 0; bottom: 0; border-top: 3px solid var(--boot-fg); }
.boot-post { position: absolute; left: 122px; bottom: 0; width: 4px; height: 58px; background: var(--boot-fg); border-radius: 2px 2px 0 0; }
.boot-tape { position: absolute; left: 112px; bottom: 54px; width: 24px; height: 4px; background: var(--boot-fg); border-radius: 2px; }
.boot-x { position: absolute; left: 12px; bottom: 6px; animation: boot-x 1.6s linear infinite alternate; }
.boot-y { animation: boot-y .8s cubic-bezier(.2, .7, .4, 1) infinite alternate; }
.boot-r { display: block; animation: boot-r 3.2s steps(1, end) infinite; }
.boot-shadow { position: absolute; left: 22px; bottom: -4px; width: 24px; height: 6px; border-radius: 50%; background: rgba(0, 0, 0, .28); animation: boot-x 1.6s linear infinite alternate; }
.boot-r svg { display: block; }
@keyframes boot-x { from { transform: translateX(0); } to { transform: translateX(196px); } }
@keyframes boot-y { from { transform: translateY(0); } to { transform: translateY(-104px); } }
@keyframes boot-r { 0% { transform: rotate(-62deg); } 50% { transform: rotate(62deg); } 100% { transform: rotate(-62deg); } }
.boot-title { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.boot-name { font-size: 32px; line-height: 36px; font-weight: 800; letter-spacing: -.015em; }
.boot-tagline { font-size: 15px; color: var(--boot-muted); }
.boot-progress { width: 220px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.boot-track { width: 100%; height: 6px; border-radius: 3px; background: var(--boot-track); overflow: hidden; }
.boot-bar { width: 8%; height: 100%; border-radius: 3px; background: var(--boot-bar); transition: width .6s ease-out; }
.boot-status { font-size: 14px; font-weight: 600; }
.boot-note { position: absolute; left: 16px; right: 16px; bottom: 32px; padding: 12px 14px; border-radius: 12px; background: var(--boot-note); color: var(--boot-muted); font-size: 14px; line-height: 20px; text-align: center; }
.boot-error { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 32px; text-align: center; }
.boot-error-title { font-size: 20px; font-weight: 800; }
.boot-error-text { font-size: 15px; color: var(--boot-muted); }
.boot-retry { min-height: 48px; padding: 0 24px; border: 0; border-radius: 8px; background: var(--boot-button-bg); color: var(--boot-button-fg); font: 700 16px Archivo, system-ui, sans-serif; cursor: pointer; }
#boot[data-state="failed"] .boot-rally,
#boot[data-state="failed"] .boot-title,
#boot[data-state="failed"] .boot-progress,
#boot[data-state="failed"] .boot-note { display: none; }
#boot:not([data-state="failed"]) .boot-error,
#boot:not([data-state="slow"]) .boot-note { display: none; }
@media (prefers-reduced-motion: reduce) {
  .boot-x, .boot-y, .boot-r, .boot-shadow, .boot-bar, #boot { animation: none; transition: none; }
  .boot-x { transform: translateX(98px) translateY(-60px); }
  .boot-shadow { transform: translateX(98px); }
}