/* The test room. Scoped to #s-room / .rmx- */
#s-room { display: grid; overflow: clip; isolation: isolate; padding-block: 0; }
#s-room .rmx-stage { grid-area: 1 / 1; position: relative; z-index: 1; aspect-ratio: 4 / 5; width: 100%; }
#s-room .rmx-wrap { grid-area: 2 / 1; position: relative; z-index: 3; margin-top: -56px; padding-bottom: var(--sec-y); }

#s-room .rmx-frame { position: absolute; inset: 0; z-index: 1; }
#s-room .rmx-pic {
  position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.55) 18%, #000 40%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0, #000 16%, #000 80%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.55) 18%, #000 40%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0, #000 16%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
#s-room .rmx-i { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease; }
#s-room[data-mode="flood"] .rmx-i--flood,
#s-room[data-mode="beam"] .rmx-i--beam,
#s-room[data-mode="red"] .rmx-i--red { opacity: 1; }

#s-room .rmx-canvas { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }

/* Static haze: shown until the live smoke is running, and whenever it cannot run. Positions are
   relative to a box 2 image-widths wide that reaches 0.9 widths left of the picture. */
#s-room .rmx-haze { position: absolute; inset: -10% -10% -10% -90%; pointer-events: none; }
#s-room .rmx-haze i { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
#s-room .rmx-haze__f { background:
  radial-gradient(ellipse 12% 8% at 77% 25%, rgba(255,226,180,.40), transparent 100%),
  radial-gradient(ellipse 26% 15% at 67% 28%, rgba(255,214,160,.26), transparent 100%),
  radial-gradient(ellipse 28% 19% at 52% 32%, rgba(255,205,150,.20), transparent 100%),
  radial-gradient(ellipse 26% 22% at 35% 36%, rgba(255,200,140,.13), transparent 100%); }
#s-room .rmx-haze__b { background:
  radial-gradient(ellipse 9% 6% at 76% 26%, rgba(255,236,200,.40), transparent 100%),
  radial-gradient(ellipse 20% 7% at 68% 30%, rgba(255,222,170,.24), transparent 100%),
  radial-gradient(ellipse 22% 8% at 54% 37%, rgba(255,218,165,.18), transparent 100%),
  radial-gradient(ellipse 20% 9% at 38% 43%, rgba(255,214,160,.11), transparent 100%); }
#s-room .rmx-haze__r { background:
  radial-gradient(ellipse 9% 6% at 77% 27%, rgba(255,70,50,.40), transparent 100%),
  radial-gradient(ellipse 20% 8% at 68% 31%, rgba(240,50,40,.26), transparent 100%),
  radial-gradient(ellipse 22% 9% at 54% 37%, rgba(226,58,46,.20), transparent 100%),
  radial-gradient(ellipse 20% 10% at 38% 43%, rgba(226,58,46,.12), transparent 100%); }
#s-room[data-mode="flood"] .rmx-haze__f,
#s-room[data-mode="beam"] .rmx-haze__b,
#s-room[data-mode="red"] .rmx-haze__r { opacity: 1; }
#s-room.rmx-live .rmx-haze { display: none; }

/* Copy */
#s-room .rmx-copy { position: relative; max-width: 460px; text-shadow: 0 1px 14px rgba(6,7,8,.85); }
#s-room .rmx-copy::before {
  content: ""; position: absolute; z-index: -1; inset: -48px -70px -40px -60px; pointer-events: none;
  background: radial-gradient(ellipse at 38% 58%, rgba(6,7,8,.68), rgba(6,7,8,0) 72%);
}
#s-room .rmx-copy .t-lede { margin: 18px 0 26px; color: #b9b9be; }
#s-room .rmx-modes { display: flex; flex-wrap: wrap; gap: 10px; }
#s-room .rmx-btn {
  min-height: 48px; min-width: 88px; padding: 0 22px; border-radius: 999px; text-shadow: none;
  border: 1px solid var(--line); background: rgba(6,7,8,.55); color: var(--bone);
  font: 600 15px/1 var(--f-body); letter-spacing: .01em; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform .18s var(--ease-out), background-color .25s, color .25s, border-color .25s;
}
#s-room .rmx-btn:hover { border-color: var(--bone); }
#s-room .rmx-btn:active { transform: scale(.97); }
#s-room .rmx-btn[aria-pressed="true"] { background: var(--bone); color: var(--ink); border-color: var(--bone); }
#s-room[data-mode="red"] .rmx-btn[aria-pressed="true"] { background: var(--red); color: #fff; border-color: var(--red); }
#s-room .rmx-cap { margin-top: 18px; min-height: 3.2em; color: var(--bone); }
#s-room .rmx-cap span { display: none; }
#s-room[data-mode="flood"] .rmx-cap__f,
#s-room[data-mode="beam"] .rmx-cap__b,
#s-room[data-mode="red"] .rmx-cap__r { display: block; }
#s-room .rmx-note { margin: 14px 0 0; }

@media (min-width: 900px) {
  #s-room { min-height: clamp(700px, 58vw, 920px); }
  #s-room .rmx-stage { aspect-ratio: auto; width: auto; height: auto; }
  #s-room .rmx-wrap { grid-area: 1 / 1; align-self: end; margin-top: 0; }
  #s-room .rmx-frame { inset: 0 clamp(0px, 3vw, 60px) 0 auto; height: 100%; aspect-ratio: 4 / 5; }
}
@media (min-width: 900px) and (max-width: 1100px) { #s-room .rmx-copy { max-width: 380px; } }