@import url('/fonts/fonts.css');
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #04060e; }
html.transparent, html.transparent body { background: transparent; }
canvas { display: block; }
#loader { position: fixed; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #16204a, #04060e 70%); color: #e2e8f0; font: 700 22px Inter, system-ui, sans-serif; transition: opacity .5s; z-index: 5; }
html.transparent #loader { background: transparent; }
#loader.hide { opacity: 0; pointer-events: none; }
#loader .lg { display: flex; flex-direction: column; align-items: center; gap: 18px; }
#loader .dot { width: 64px; height: 64px; border-radius: 20px; background: conic-gradient(from 0deg, #22d3ee, #a78bfa, #f472b6, #22d3ee); animation: spin 1.4s linear infinite; box-shadow: 0 0 40px #a78bfa88; }
#loader .brand { font-family: Unbounded, Inter, sans-serif; font-weight: 800; font-size: 28px; letter-spacing: .02em; }
@keyframes spin { to { transform: rotate(360deg); } }