/* Loaded first and on its own (the page's security policy allows no inline styles): the loading screen shows at once, and the
   half-styled page can never be seen while the main stylesheet is still on its way. */
html { background: #0a120b; }
body { margin: 0; background: #0a120b; }
#splash { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; background: #102a16; transition: opacity .35s ease; }
#splash.hide { opacity: 0; pointer-events: none; }
#splash svg { width: 88px; height: 88px; transform-origin: 50% 92%; animation: splash-leaf 1.8s ease-in-out infinite; }
#splash .dots { display: flex; gap: 8px; }
#splash .dots i { width: 8px; height: 8px; border-radius: 50%; background: #9bd14a; opacity: .25; animation: splash-dot 1.2s ease-in-out infinite; }
#splash .dots i:nth-child(2) { animation-delay: .2s; }
#splash .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes splash-leaf { 0%, 100% { transform: rotate(-7deg) scale(1); } 50% { transform: rotate(7deg) scale(1.08); } }
@keyframes splash-dot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
body.booting > :not(#splash):not(script) { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { #splash svg, #splash .dots i { animation: none; } #splash .dots i { opacity: .6; } }