* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #0b0c14; }
.composition {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: clip;
  isolation: isolate;
}
.cosmos, #logo-shadow, #webgl { position: absolute; inset: 0; }
.cosmos {
  z-index: 0;
  background: #050913;
  pointer-events: none;
}
.world {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 52svh;
  width: min(69vw, 1180px);
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
}
#cosmos-canvas { display: block; width: 100%; height: 100%; }
#logo-shadow { z-index: 2; pointer-events: none; }
#webgl { z-index: 3; }
#webgl canvas { display: block; width: 100%; height: 100%; outline: none; }
@media (max-width: 700px) {
  .world { top: 60svh; width: max(148vw, 610px); }
}