/* MONOLITH APPLICATION BACKGROUND PRIMITIVE
   This file defines the authoritative background style for Studio stages and
   the reusable .monolith-showroom surface. Do not duplicate these gradients in
   another stylesheet. Serve this file directly so consumers share one implementation.
*/

/* Exact accepted Studio showroom: floor shelf, spotlight pool, edge vignette,
   neutral carbon weave, and a purple weave layer lit by the same spotlight. */
.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%),
    radial-gradient(ellipse 58% 15% at var(--monolith-showroom-spot-x) 83%, rgba(172, 120, 252, .11) 0%, rgba(146, 90, 236, .045) 52%, rgba(146, 90, 236, 0) 100%),
    radial-gradient(ellipse at var(--monolith-showroom-spot-x) 58%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .45) 68%, rgba(0, 0, 0, .82) 100%),
    radial-gradient(ellipse 62% 52% at var(--monolith-showroom-spot-x) 58%, rgba(172, 120, 252, .14) 0%, rgba(146, 90, 236, .06) 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: .6;
  -webkit-mask: radial-gradient(ellipse 68% 58% at var(--monolith-showroom-spot-x) 58%, #000 0%, rgba(0, 0, 0, .55) 42%, transparent 78%);
          mask: radial-gradient(ellipse 68% 58% at var(--monolith-showroom-spot-x) 58%, #000 0%, rgba(0, 0, 0, .55) 42%, transparent 78%);
}

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

.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;
}

/* Studio adapter: layout and 3D-layer ownership stay local while the atmosphere
   above remains the same primitive used by every application. */
.stage {
  flex: 1;
  position: relative;
  min-width: 0;
  overflow: clip;
  isolation: isolate;
}

body.config .stage {
  --monolith-showroom-spot-x: calc(50% - 198px);
}

@media (max-width: 680px) {
  body.config .stage {
    --monolith-showroom-spot-x: 50%;
  }
}

#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);
}