html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #fff8ec;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
canvas { display: block; outline: none; }
#boot-loader { position: fixed; inset: 0; display: grid; place-content: center; gap: 20px; background: #ffc900; color: #17120f; z-index: -1; }
.loader-mark { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 24px; background: #145cff; color: white; font-size: 22px; font-weight: 900; animation: bounce 900ms cubic-bezier(.2,.9,.2,1) infinite alternate; }
.loader-copy { display: grid; gap: 9px; width: min(70vw, 360px); font-size: 14px; }
.loader-copy span { display: block; height: 12px; border-radius: 99px; background: rgba(23,18,15,.18); animation: pulse 720ms ease-in-out infinite alternate; }
.loader-copy span:last-child { width: 62%; animation-delay: 120ms; }
@keyframes bounce { to { transform: rotate(8deg) scale(1.08); border-radius: 36px; } }
@keyframes pulse { to { opacity: .35; transform: scaleX(.94); transform-origin: left; } }
@media (prefers-color-scheme: dark) { html, body { background: #111114; } #boot-loader { background: #111114; color: #f4eff4; } }