













.monolith-showroom,
.stage {
  --monolith-showroom-spot-x: 50%;
  background:
    linear-gradient(0deg, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, .22) 9%, rgba(0, 0, 0, 0) 24%)
      0 var(--monolith-showroom-floor-y, 0px) / 100% var(--monolith-showroom-floor-h, 100%) no-repeat,
    radial-gradient(ellipse var(--monolith-showroom-pool-w, 58%) var(--monolith-showroom-pool-h, 15%) at var(--monolith-showroom-spot-x) var(--monolith-showroom-pool-y, 83%), rgba(172, 120, 252, .15) 0%, rgba(146, 90, 236, .07) 52%, rgba(146, 90, 236, 0) 100%),
    radial-gradient(ellipse at var(--monolith-showroom-spot-x) var(--monolith-showroom-spot-y, 58%), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .45) 68%, rgba(0, 0, 0, .82) 100%),
    radial-gradient(ellipse var(--monolith-showroom-spot-w, 62%) var(--monolith-showroom-spot-h, 52%) at var(--monolith-showroom-spot-x) var(--monolith-showroom-spot-y, 58%), rgba(172, 120, 252, .19) 0%, rgba(146, 90, 236, .095) 38%, rgba(146, 90, 236, 0) 72%),
    linear-gradient(180deg, #0d0f14 0%, #08090b 54%, #050507 100%);
}

.monolith-showroom {
  position: relative;
  isolation: isolate;
}

.monolith-showroom--viewport {
  min-height: 100%;
  overflow-x: hidden;
  background-attachment: fixed;
}

.monolith-showroom__weave,
.stage .weave {
  position: absolute;
  inset: -50vmax;
  z-index: 0;
  pointer-events: none;
  opacity: .20;
  transform: rotate(45deg);
  background:
    linear-gradient(45deg, rgba(255, 255, 255, .085) 25%, transparent 25% 75%, rgba(255, 255, 255, .085) 75%),
    linear-gradient(45deg, rgba(10, 10, 12, .30) 25%, transparent 25% 75%, rgba(10, 10, 12, .30) 75%),
    linear-gradient(-45deg, rgba(255, 255, 255, .045) 25%, transparent 25% 75%, rgba(255, 255, 255, .045) 75%),
    linear-gradient(-45deg, rgba(5, 5, 7, .26) 25%, transparent 25% 75%, rgba(5, 5, 7, .26) 75%);
  background-position: 0 0, 7px 7px, 0 7px, 7px 0;
  background-size: 14px 14px;
}

.monolith-showroom__glow,
.stage .weaveGlow {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  



  opacity: .92;
  -webkit-mask: radial-gradient(ellipse var(--monolith-showroom-glow-w, 68%) var(--monolith-showroom-glow-h, 58%) at var(--monolith-showroom-spot-x) var(--monolith-showroom-spot-y, 58%), #000 0%, rgba(0, 0, 0, .72) 46%, transparent 88%);
          mask: radial-gradient(ellipse var(--monolith-showroom-glow-w, 68%) var(--monolith-showroom-glow-h, 58%) at var(--monolith-showroom-spot-x) var(--monolith-showroom-spot-y, 58%), #000 0%, rgba(0, 0, 0, .72) 46%, transparent 88%);
}

.monolith-showroom__glow::before,
.stage .weaveGlow::before {
  content: "";
  position: absolute;
  inset: -50vmax;
  transform: rotate(45deg);
  background:
    linear-gradient(45deg, rgba(187, 140, 255, .20) 25%, transparent 25% 75%, rgba(187, 140, 255, .20) 75%),
    linear-gradient(-45deg, rgba(140, 0, 255, .23) 25%, transparent 25% 75%, rgba(140, 0, 255, .23) 75%);
  background-position: 0 0, 0 7px;
  background-size: 14px 14px;
}

















.dev-touch .stage .weave,
.dev-touch .stage .weaveGlow::before,
.dev-touch .monolith-showroom__weave,
.dev-touch .monolith-showroom__glow::before {
  background-size: 7px 7px;
}

.dev-touch .stage .weave,
.dev-touch .monolith-showroom__weave {
  background-position: 0 0, 3.5px 3.5px, 0 3.5px, 3.5px 0;
}

.dev-touch .stage .weaveGlow::before,
.dev-touch .monolith-showroom__glow::before {
  background-position: 0 0, 0 3.5px;
}

.monolith-showroom--viewport > .monolith-showroom__weave,
.monolith-showroom--viewport > .monolith-showroom__glow {
  position: fixed;
}

.monolith-showroom--viewport > .monolith-showroom__content {
  position: relative;
  z-index: 1;
  min-height: 100vh;
}



.stage {
  flex: 1;
  position: relative;
  min-width: 0;
  overflow: clip;
  isolation: isolate;
}

















.stage {
  --monolith-showroom-spot-x: calc(var(--scene-x, 0px) + var(--scene-w, 100%) * .5);
  --monolith-showroom-spot-y: calc(var(--scene-y, 0px) + var(--scene-h, 100%) * .58);
  --monolith-showroom-spot-w: calc(var(--scene-w, 100%) * .62);
  --monolith-showroom-spot-h: calc(var(--scene-h, 100%) * .52);
  --monolith-showroom-pool-y: calc(var(--scene-y, 0px) + var(--scene-h, 100%) * .83);
  --monolith-showroom-pool-w: calc(var(--scene-w, 100%) * .58);
  --monolith-showroom-pool-h: calc(var(--scene-h, 100%) * .15);
  --monolith-showroom-glow-w: calc(var(--scene-w, 100%) * .68);
  --monolith-showroom-glow-h: calc(var(--scene-h, 100%) * .58);
   
  --monolith-showroom-floor-y: var(--scene-y, 0px);
  --monolith-showroom-floor-h: var(--scene-h, 100%);
}

#c {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  z-index: 1;
}

.hud {
  display: none;
  position: absolute;
  left: 16px;
  top: 14px;
  z-index: 8;
  color: var(--muted);
  font-size: 13px;
  pointer-events: none;
}

.hud.err {
  display: block;
  color: var(--bad);
}

.hud b {
  color: var(--txt);
}
