:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #17191d; }
* { box-sizing: border-box; }
html, body, canvas { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #17191d; }
canvas { display: block; outline: none; }
#loading-screen {
  position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px;
  color: #f1f3f5; background: radial-gradient(circle at 50% 42%, #28332d, #17191d 45%);
}
#loading-screen strong { font-size: 18px; letter-spacing: -.02em; }
#loading-screen span { max-width: 440px; color: #92979f; font-size: 13px; text-align: center; }
.loader-mark { display: grid; grid-template-columns: repeat(3, 9px); gap: 4px; margin-bottom: 12px; }
.loader-mark i { width: 9px; height: 9px; border-radius: 2px; background: #75e6a4; animation: pulse 1.2s ease-in-out infinite alternate; }
.loader-mark i:nth-child(4), .loader-mark i:nth-child(6) { opacity: .15; }
.loader-mark i:nth-child(7) { grid-column: 1; }
@keyframes pulse { to { opacity: .35; transform: scale(.85); } }

/* The static 404 uses the same visual language without loading the application. */
.page-shell { display: grid; min-height: 100%; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 35%, #28332d, #17191d 46%); }
.card { width: min(100%, 480px); padding: 56px; border: 1px solid #363a40; border-radius: 14px; background: #202328; box-shadow: 0 32px 80px #0008; text-align: center; }
.eyebrow { margin: 0 0 10px; color: #75e6a4; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.error-code { margin: 0 0 24px; color: #75e6a4; font-size: 88px; font-weight: 800; line-height: .8; letter-spacing: -.08em; }
.card h1 { margin: 0; color: #f1f3f5; font-size: 38px; letter-spacing: -.05em; }
.intro { margin: 18px auto 0; color: #a2a7ae; line-height: 1.65; }
.button { display: inline-block; margin-top: 26px; padding: 11px 18px; border-radius: 6px; color: #132018; background: #75e6a4; font-weight: 750; text-decoration: none; }
.button:hover { background: #94efb8; }
@media (max-width: 520px) { .card { padding: 38px 24px; } }
@media (prefers-reduced-motion: reduce) { .loader-mark i { animation: none; } }