* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; background:#081012; }
body { background:radial-gradient(circle at 50% 15%,#19312e 0,transparent 46%),#081012; }
.viewer { position:fixed; inset:0; outline:none; background:radial-gradient(circle at 50% 30%,#19332f,#0a1517 72%); }
.viewer canvas { display:block; width:100%; height:100%; }
.loading { position:absolute; inset:0; display:grid; place-content:center; z-index:3; background:#0b1719; transition:opacity .35s; }
.loading.done { opacity:0; pointer-events:none; }
.spinner { width:26px; height:26px; border:2px solid rgba(168,214,154,.22); border-top-color:#a8d69a; border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .spinner { animation-duration:.001ms; } }