:root { --startup-background: #fdfcfb; --startup-foreground: #37352f; }
@media (prefers-color-scheme: dark) { :root { --startup-background: #20201f; --startup-foreground: #e5e4e0; } }
:root[data-startup-theme="light"] { --startup-background: #fdfcfb; --startup-foreground: #37352f; }
:root[data-startup-theme="dark"], :root.dark { --startup-background: #20201f; --startup-foreground: #e5e4e0; }
#startup-splash { position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; background: var(--startup-background); color: var(--startup-foreground); opacity: 1; transition: opacity .16s ease; user-select: none; -webkit-user-select: none; }
#startup-splash .startup-spinner { width: 20px; height: 20px; flex: none; background: currentColor; opacity: .5; -webkit-mask: url("/startup-spinner.svg") center / contain no-repeat; mask: url("/startup-spinner.svg") center / contain no-repeat; animation: startup-spin .9s linear infinite; }
@keyframes startup-spin { to { transform: rotate(360deg); } }
#startup-splash .startup-name { font: 500 28px/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: -.035em; }
#startup-splash.startup-complete { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { #startup-splash { transition: none; } #startup-splash .startup-spinner { animation: none; } }