:root{
  --bg:#000;
  --orange:#E85E27;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body,#app{width:100%;height:100%;min-height:100%;overflow:hidden;background:#000}
body{font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;color:white}
#app{position:relative;isolation:isolate}
#webgl{position:absolute;inset:0;width:100%;height:100%;display:block;background:#000;touch-action:none}
.vignette{
  position:absolute;inset:-10%;pointer-events:none;z-index:2;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.055), rgba(255,255,255,.012) 18%, rgba(0,0,0,0) 44%),
    radial-gradient(ellipse at 50% 77%, rgba(232,94,39,.052), transparent 28%),
    radial-gradient(circle at 50% 50%, transparent 0 33%, rgba(0,0,0,.64) 74%, #000 100%);
  mix-blend-mode:screen;
  opacity:.88;
}
.loading{
  position:absolute;inset:0;display:grid;place-items:center;z-index:5;background:#000;
  transition:opacity .9s ease, visibility .9s ease;
}
.loading.done{opacity:0;visibility:hidden}
.loading span{
  width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.12);border-top-color:#fff;
  animation:spin .85s linear infinite;
  box-shadow:0 0 24px rgba(255,255,255,.18);
}
.loading p{position:absolute;top:calc(50% + 48px);font-size:11px;letter-spacing:.42em;color:rgba(255,255,255,.62)}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.loading span{animation:none}}