:root { color-scheme: light; background: #f3f7f4; color: #103a2c; font-family: system-ui, sans-serif; }
body { margin: 0; }
#loading { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; padding: 24px; text-align: center; background: radial-gradient(ellipse at top, #e0f0e8, #f8faf9 70%); }
#loading img { width: 88px; height: 88px; border-radius: 24px; margin-bottom: 20px; }
h1 { font-size: clamp(24px, 4vw, 34px); letter-spacing: .04em; margin: 0 0 8px; }
p { line-height: 1.6; margin: 8px 0; }
#status { color: #507363; max-width: 420px; }
.progress { width: 160px; height: 4px; background: #d9e8df; border-radius: 4px; overflow: hidden; margin: 24px 0; }
.progress::after { content: ''; display: block; width: 50%; height: 100%; background: #16815d; animation: loading 1.5s ease-in-out infinite alternate; }
@keyframes loading { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .progress::after { animation: none; width: 100%; } }
button { border: 0; background: #16815d; color: white; padding: 12px 28px; border-radius: 12px; font: inherit; cursor: pointer; }
noscript { display: block; padding: 24px; }