:root { color-scheme: dark; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #f5f5f5; }
#out { position: relative; width: 100%; height: 100%; outline: none; }
.ferroui-splash { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; background: #1e1e1e; color: #f5f5f5; pointer-events: none; }
.splash-inner { width: 280px; text-align: center; }
.wordmark { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 23px; font-weight: 650; letter-spacing: -0.7px; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 40px; color: #fff; font-size: 29px; font-weight: 800; background: #a259ff; border-radius: 10px 10px 10px 3px; }
.splash-inner p { margin: 27px 0 17px; color: #a5a5a5; font-size: 12px; }
.loading-track { overflow: hidden; height: 2px; border-radius: 2px; background: #363636; }
.loading-track span { display: block; width: 35%; height: 100%; background: #a259ff; animation: progress 1.6s ease-in-out infinite; }
.ferroui-splash.splash-close { opacity: 0; visibility: hidden; transition: opacity 150ms, visibility 150ms; }
.ferroui-splash.failed { pointer-events: auto; }
.ferroui-splash.failed .loading-track { display: none; }
#loading-error { max-width: 70vw; overflow: auto; margin: 18px 0 0; text-align: left; white-space: pre-wrap; color: #ff9d9d; font-size: 11px; line-height: 1.5; }
@keyframes progress { 0% { transform: translateX(-110%); } 100% { transform: translateX(390%); } }
@media (prefers-reduced-motion: reduce) { .loading-track span { animation: none; width: 70%; } }