#app-preloader {
  --startup-background: #0a1121;
  --startup-foreground: #f0f4ff;
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 20px;
  background: var(--startup-background);
  color: var(--startup-foreground);
  opacity: 1;
  transition: opacity 240ms ease;
}
body:has(#app-preloader) { overflow: hidden; }
#app-preloader.app-preloader_exiting { opacity: 0; pointer-events: none; }
.app-preloader__logo { width: 180px; height: 180px; overflow: visible; }
.app-preloader__name { font: 600 30px/1.2 system-ui, sans-serif; letter-spacing: 0.04em; }
.app-preloader__part { stroke-width: 1.1; stroke-linejoin: round; }
.app-preloader__status { margin-top: -4px; padding-inline: 16px; color: var(--startup-foreground); opacity: 0.72; font: 400 14px/1.5 system-ui, sans-serif; text-align: center; }
.app-preloader__dots { display: inline-flex; width: 0.9em; text-align: left; }
.app-preloader__dots > span { flex: 1; }
@media (prefers-reduced-motion: no-preference) {
  .app-preloader__dots > span { animation: startup-dot-first 1600ms step-end infinite; }
  .app-preloader__dots > span:nth-child(2) { animation-name: startup-dot-second; }
  .app-preloader__dots > span:nth-child(3) { animation-name: startup-dot-third; }
  .app-preloader__part {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    fill-opacity: 0;
    animation: startup-draw 700ms cubic-bezier(0.2, 0, 0, 1) forwards, startup-fill 450ms ease 500ms forwards;
  }
  .app-preloader__part_right { animation-delay: 160ms, 660ms; }
  .app-preloader__name { animation: startup-name 500ms ease 500ms both; }
  .app-preloader__logo { animation: startup-breathe 1800ms ease-in-out 1100ms infinite alternate; }
}
@media (prefers-reduced-motion: reduce) { #app-preloader { transition: none; } }
@keyframes startup-draw { to { stroke-dashoffset: 0; } }
@keyframes startup-fill { to { fill-opacity: 1; stroke-opacity: 0; } }
@keyframes startup-name { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes startup-breathe { from { opacity: 1; } to { opacity: 0.65; } }


html[data-theme='light'] #app-preloader {
  --startup-background: #f5f8ff;
  --startup-foreground: #14213d;
}

@keyframes startup-dot-first { 0%, 80%, 100% { opacity: 0; } 20% { opacity: 1; } }
@keyframes startup-dot-second { 0%, 80%, 100% { opacity: 0; } 40% { opacity: 1; } }
@keyframes startup-dot-third { 0%, 80%, 100% { opacity: 0; } 60% { opacity: 1; } }

body:has(#app-preloader:not(.app-preloader_exiting)) #root { visibility: hidden; }