@font-face {
  font-family: "Telly Display";
  src: url("assets/fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 400 600;
  font-display: block;
}

@font-face {
  font-family: "Telly Trace";
  src: url("assets/fonts/geist-mono-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --rust-ground: #2f0d17;
  --rust-current: #a94536;
  --handled-paper: #d8c8aa;
  --teal: #188f8e;
  --cobalt: #173d8e;
  --violet: #5b59ff;
  --acid: #f1f45b;
  --ink: #09070a;
  --bone: #f3f0e7;
  --glyphica-cyan: #55e7ee;
  --glyphica-magenta: #ef397d;
  --attention-x: 0;
  --attention-y: 0;
  --room-turn: -2.5deg;
  --room-depth: 1.02;
  --room-time: 0;
  --terminal-memory: 0;
  --route-residue: 0;
  --score-envelope: 0;
  --score-low: 0;
  --score-high: 0;
  --score-flux: 0;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--rust-ground);
}

body {
  min-height: 100svh;
  color: var(--bone);
  font-family: "Telly Trace", ui-monospace, SFMono-Regular, Menlo, monospace;
  -webkit-font-smoothing: antialiased;
}

a,
button {
  color: inherit;
}

button {
  font: inherit;
}

.room,
.media-field,
.ground,
.room-skin,
.art-score,
.grain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

.room {
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  background: var(--rust-ground);
}

.media-field {
  z-index: 0;
  overflow: hidden;
  background: #150b16;
}

.ground {
  z-index: 0;
  inset: -8%;
  width: 116%;
  height: 116%;
  background:
    radial-gradient(ellipse at calc(17% + var(--attention-x) * 3%) calc(82% + var(--attention-y) * 3%), rgba(186, 64, 45, 0.86), transparent 47%),
    radial-gradient(ellipse at 82% 14%, rgba(20, 125, 132, 0.48), transparent 42%),
    radial-gradient(circle at 54% 44%, rgba(91, 89, 255, 0.3), transparent 40%),
    linear-gradient(118deg, #44111a 0%, #231023 48%, #09282f 100%);
  transform: rotate(var(--room-turn)) scale(var(--room-depth));
  transform-origin: center;
}

.ground::before,
.ground::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.ground::before {
  inset: 8% 6%;
  border: 1px solid rgba(216, 200, 170, calc(0.08 + var(--terminal-memory) * 0.08));
  clip-path: polygon(0 10%, 88% 0, 100% 86%, 14% 100%);
  opacity: calc(0.48 + var(--terminal-memory) * 0.32);
  transform: translate3d(calc(var(--attention-x) * -0.5vw), calc(var(--attention-y) * -0.5vh), 0) rotate(-1deg);
}

.ground::after {
  inset: 0;
  background:
    linear-gradient(92deg, transparent 0 52%, rgba(241, 244, 91, 0.07) 52.1% 52.55%, transparent 52.7%),
    linear-gradient(178deg, transparent 0 73%, rgba(216, 200, 170, 0.06) 73.1% 73.4%, transparent 73.55%);
  opacity: calc(0.72 - var(--terminal-memory) * 0.26);
}

.room-skin {
  z-index: 1;
  inset: -18%;
  width: 136%;
  height: 136%;
  pointer-events: none;
  background:
    conic-gradient(from 214deg at 42% 53%, transparent 0 22deg, rgba(119, 117, 255, 0.1) 24deg 42deg, transparent 45deg 194deg, rgba(65, 200, 189, 0.09) 197deg 212deg, transparent 216deg),
    radial-gradient(ellipse at 50% 50%, transparent 0 42%, rgba(9, 7, 10, 0.46) 82%);
  opacity: calc(0.48 + var(--score-envelope) * 0.24 + var(--terminal-memory) * 0.12);
  transform: translate3d(calc(var(--attention-x) * 1.4vw), calc(var(--attention-y) * 1.2vh), 0) rotate(calc(var(--room-turn) * -0.55));
  transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}

.film,
.body-plane,
.pressure {
  position: fixed;
  display: block;
  pointer-events: none;
  transform-origin: center;
  will-change: transform, opacity;
}

/*
 * Desktop Chromium can present oversized transformed gradient and media
 * surfaces as mismatched GPU tiles. Keep the authored treatment everywhere
 * else, but flatten these planes in that compositor.
 */
html[data-chromium-compositor="true"] .ground {
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
}

html[data-chromium-compositor="true"] .ground::before {
  transform: translate(calc(var(--attention-x) * -0.5vw), calc(var(--attention-y) * -0.5vh)) rotate(-1deg);
}

html[data-chromium-compositor="true"] .room-skin,
html[data-chromium-compositor="true"] .film,
html[data-chromium-compositor="true"] .body-plane,
html[data-chromium-compositor="true"] .pressure {
  inset: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0 !important;
  transform: none !important;
  will-change: auto;
}

html[data-chromium-compositor="true"] .art-score {
  contain: strict;
  will-change: auto;
}

.film {
  z-index: 3;
  inset: -12%;
  width: 124%;
  height: 124%;
  object-fit: cover;
  background: transparent;
  opacity: 0;
  mix-blend-mode: screen;
}

.film--shade {
  z-index: 3;
  -webkit-mask-image: radial-gradient(ellipse 78% 92% at 28% 54%, #000 0 30%, rgba(0, 0, 0, 0.78) 48%, transparent 78%);
  mask-image: radial-gradient(ellipse 78% 92% at 28% 54%, #000 0 30%, rgba(0, 0, 0, 0.78) 48%, transparent 78%);
}

.film--sky-one {
  z-index: 4;
  -webkit-mask-image:
    radial-gradient(ellipse 78% 62% at 36% 42%, #000 0 28%, rgba(0, 0, 0, 0.68) 48%, transparent 78%),
    linear-gradient(116deg, transparent 8%, #000 34% 58%, transparent 88%);
  mask-image:
    radial-gradient(ellipse 78% 62% at 36% 42%, #000 0 28%, rgba(0, 0, 0, 0.68) 48%, transparent 78%),
    linear-gradient(116deg, transparent 8%, #000 34% 58%, transparent 88%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.film--sky-two {
  z-index: 5;
  -webkit-mask-image:
    radial-gradient(ellipse 76% 70% at 67% 55%, #000 0 26%, rgba(0, 0, 0, 0.66) 48%, transparent 80%),
    linear-gradient(64deg, transparent 8%, #000 36% 62%, transparent 92%);
  mask-image:
    radial-gradient(ellipse 76% 70% at 67% 55%, #000 0 26%, rgba(0, 0, 0, 0.66) 48%, transparent 80%),
    linear-gradient(64deg, transparent 8%, #000 36% 62%, transparent 92%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.film--fall {
  z-index: 8;
  object-fit: cover;
  mix-blend-mode: lighten;
  -webkit-mask-image: linear-gradient(172deg, transparent 24%, rgba(0, 0, 0, 0.4) 38%, #000 48% 58%, rgba(0, 0, 0, 0.35) 68%, transparent 82%);
  mask-image: linear-gradient(172deg, transparent 24%, rgba(0, 0, 0, 0.4) 38%, #000 48% 58%, rgba(0, 0, 0, 0.35) 68%, transparent 82%);
}

.film--archive {
  z-index: 10;
  object-fit: cover;
  mix-blend-mode: color-dodge;
  -webkit-mask-image: radial-gradient(ellipse 42% 66% at 61% 48%, #000 0 12%, rgba(0, 0, 0, 0.48) 42%, transparent 76%);
  mask-image: radial-gradient(ellipse 42% 66% at 61% 48%, #000 0 12%, rgba(0, 0, 0, 0.48) 42%, transparent 76%);
}

.body-plane {
  z-index: 6;
  inset: -12%;
  width: 124%;
  height: 124%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: min(58vmax, 68rem) auto;
  opacity: 0;
}

.body-plane {
  z-index: 7;
  background-image:
    linear-gradient(112deg, rgba(47, 13, 23, 0.18), rgba(91, 89, 255, 0.1)),
    var(--body-image, none);
  background-position: 72% 43%;
  background-size: min(72vmax, 80rem) auto;
  mix-blend-mode: soft-light;
  -webkit-mask-image: radial-gradient(ellipse 33% 76% at 68% 46%, #000 0 24%, rgba(0, 0, 0, 0.44) 54%, transparent 82%);
  mask-image: radial-gradient(ellipse 33% 76% at 68% 46%, #000 0 24%, rgba(0, 0, 0, 0.44) 54%, transparent 82%);
}

.body-plane::after {
  position: absolute;
  inset: 0;
  content: "";
  background: radial-gradient(ellipse at 68% 46%, transparent 0 24%, rgba(47, 13, 23, 0.18) 58%, rgba(9, 7, 10, 0.5) 84%);
}

.pressure {
  z-index: 11;
  inset: -12%;
  width: 124%;
  height: 124%;
  opacity: 0;
}

.pressure--violet {
  background: linear-gradient(105deg, transparent 0 43%, rgba(91, 89, 255, 0.65) 43.3% 49%, transparent 49.3%);
  mix-blend-mode: screen;
}

.pressure--acid {
  background: linear-gradient(175deg, transparent 0 69%, rgba(241, 244, 91, 0.58) 69.2% 70.2%, transparent 70.4%);
  mix-blend-mode: screen;
}

.art-score {
  z-index: 12;
  display: block;
  pointer-events: none;
  contain: strict;
}

.grain {
  z-index: 13;
  pointer-events: none;
  opacity: calc(0.16 + var(--score-high) * 0.08 + var(--terminal-memory) * 0.08);
  background:
    repeating-radial-gradient(circle at 21% 37%, transparent 0 1px, rgba(216, 200, 170, 0.1) 1px 2px, transparent 2px 4px),
    repeating-linear-gradient(96deg, transparent 0 5px, rgba(9, 7, 10, 0.07) 5px 6px);
  mix-blend-mode: soft-light;
}

.identity {
  position: fixed;
  z-index: 20;
  top: max(1rem, env(safe-area-inset-top));
  left: max(1rem, env(safe-area-inset-left));
  margin: 0;
}

.identity::after {
  position: absolute;
  left: 0.08rem;
  top: calc(100% + 0.45rem);
  width: calc(2.4rem + var(--terminal-memory) * 2.6rem);
  height: 1px;
  content: "";
  background: linear-gradient(90deg, var(--rust-current), rgba(216, 200, 170, 0.54), transparent);
  transform: rotate(-3deg);
  transform-origin: left;
}

.identity h1 {
  margin: 0;
  color: rgba(243, 240, 231, 0.96);
  font-family: "Telly Display", Cormorant, Georgia, serif;
  font-size: clamp(1.62rem, 2.65vw, 2.95rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  text-shadow: 0 2px 20px rgba(9, 7, 10, 0.82);
}

[data-font="failed"] .identity h1 {
  opacity: 0;
}

.routes {
  position: fixed;
  z-index: 21;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: clamp(0.42rem, 1.1vw, 0.82rem);
  isolation: isolate;
}

.routes::before {
  position: absolute;
  z-index: -1;
  right: 0.2rem;
  bottom: 50%;
  left: 0.8rem;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(85, 231, 238, calc(0.2 + var(--route-residue) * 0.28)), rgba(243, 240, 231, 0.2));
  transform: translateY(50%);
}

.routes a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  gap: 0.34rem;
  padding: 0.55rem 0.72rem;
  color: rgba(243, 240, 231, 0.82);
  font-size: clamp(0.61rem, 0.78vw, 0.74rem);
  font-weight: 510;
  letter-spacing: 0.065em;
  text-decoration: none;
  text-shadow: 0 1px 12px rgba(9, 7, 10, 0.82);
  white-space: nowrap;
}

.routes a:not(.route--instagram)::after {
  position: absolute;
  right: 0.72rem;
  bottom: 0.34rem;
  left: 0.72rem;
  height: 1px;
  content: "";
  background: currentColor;
  transform: scaleX(0.16);
  transform-origin: right;
  transition: transform 260ms ease, background 260ms ease;
}

.routes a[data-glyphica] {
  min-width: 6.1rem;
  padding-inline: 1rem;
  border: 1px solid rgba(243, 240, 231, calc(0.36 + var(--route-residue) * 0.12));
  background:
    linear-gradient(115deg, rgba(85, 231, 238, 0.1), transparent 42%, rgba(239, 57, 125, 0.1)),
    rgba(9, 7, 10, 0.38);
  clip-path: polygon(0.42rem 0, 100% 0, calc(100% - 0.32rem) 100%, 0 100%);
  color: rgba(243, 240, 231, 0.96);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  box-shadow: 0 0 calc(2rem + var(--route-residue) * 1.5rem) rgba(85, 231, 238, calc(0.06 + var(--route-residue) * 0.08));
  transition: color 240ms ease, background 240ms ease, border-color 240ms ease;
}

.routes a[data-glyphica]::after {
  background: linear-gradient(90deg, var(--glyphica-cyan), var(--glyphica-magenta), var(--acid));
}

.routes a[data-glyphica]:hover,
.routes a[data-glyphica]:focus-visible {
  border-color: rgba(85, 231, 238, 0.84);
  background:
    linear-gradient(115deg, rgba(85, 231, 238, 0.2), transparent 44%, rgba(239, 57, 125, 0.18)),
    rgba(9, 7, 10, 0.56);
}

.routes a:not(.route--instagram):hover::after,
.routes a:not(.route--instagram):focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.routes .route--instagram {
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(243, 240, 231, 0.24);
  border-radius: 52% 48% 43% 57% / 45% 57% 43% 55%;
  background: rgba(9, 7, 10, 0.32);
  transition: border-color 240ms ease, color 240ms ease, transform 240ms ease;
}

.routes .route--instagram:hover,
.routes .route--instagram:focus-visible {
  border-color: rgba(239, 57, 125, 0.74);
  color: var(--bone);
  transform: rotate(-5deg) scale(1.04);
}

.routes .route--contact {
  color: rgba(243, 240, 231, 0.7);
  font-size: clamp(0.56rem, 0.68vw, 0.66rem);
  letter-spacing: 0.045em;
}

.instagram-mark {
  width: 0.95rem;
  height: 0.95rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
}

.instagram-mark .instagram-dot {
  fill: currentColor;
  stroke: none;
}

.controls {
  position: fixed;
  z-index: 22;
  left: max(0.8rem, env(safe-area-inset-left));
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  display: flex;
  gap: 0.08rem;
  align-items: center;
  isolation: isolate;
}

.controls::before {
  position: absolute;
  z-index: -1;
  right: 0.55rem;
  left: 0.55rem;
  top: 50%;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(243, 240, 231, 0.2) 24%, rgba(85, 231, 238, 0.3) 54%, rgba(239, 57, 125, 0.24) 78%, transparent);
  transform: translateY(-50%) rotate(-2deg);
}

.controls::after {
  position: absolute;
  z-index: -2;
  inset: -0.25rem -0.5rem;
  content: "";
  background: radial-gradient(ellipse, rgba(9, 7, 10, 0.7), rgba(9, 7, 10, 0) 72%);
  filter: blur(0.35rem);
}

.controls button {
  --control-tilt: -8deg;
  --node-x: 76%;
  --node-y: 17%;
  position: relative;
  display: grid;
  width: 3rem;
  height: 3rem;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(243, 240, 231, 0.74);
  cursor: pointer;
  transition: color 260ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
}

.controls button::before {
  position: absolute;
  inset: 0.34rem;
  content: "";
  border: 1px solid currentColor;
  border-radius: 43% 57% 64% 36% / 58% 38% 62% 42%;
  opacity: 0.58;
  box-shadow: inset 0 0 1.1rem rgba(243, 240, 231, 0.04), 0 0 1.35rem rgba(9, 7, 10, 0.3);
  transform: rotate(var(--control-tilt)) scale(0.9);
  transition: opacity 260ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1), border-color 260ms ease;
}

.controls button::after {
  position: absolute;
  top: var(--node-y);
  left: var(--node-x);
  width: 0.24rem;
  height: 0.24rem;
  content: "";
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0.65rem currentColor;
  opacity: 0.72;
  transform: translate(-50%, -50%);
  transition: opacity 260ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.controls [data-pause] {
  --control-tilt: -11deg;
  --node-x: 24%;
  --node-y: 74%;
  color: rgba(241, 244, 91, 0.74);
}

.controls [data-sound] {
  --control-tilt: 13deg;
  --node-x: 78%;
  --node-y: 28%;
  color: rgba(85, 231, 238, 0.74);
}

.controls [data-replay] {
  --control-tilt: -19deg;
  --node-x: 29%;
  --node-y: 19%;
  color: rgba(119, 117, 255, 0.8);
}

.controls button:hover,
.controls button:focus-visible,
.controls button[aria-pressed="true"] {
  color: var(--bone);
  transform: scale(1.08);
}

.controls button:hover::before,
.controls button:focus-visible::before,
.controls button[aria-pressed="true"]::before {
  opacity: 0.96;
  transform: rotate(calc(var(--control-tilt) + 18deg)) scale(1);
}

.controls button:hover::after,
.controls button:focus-visible::after,
.controls button[aria-pressed="true"]::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.32);
}

.controls button:disabled {
  cursor: default;
  opacity: 0.34;
}

[data-motion="paused"] .controls [data-pause] {
  color: var(--acid);
}

[data-sound="on"] .controls [data-sound] {
  color: var(--glyphica-cyan);
}

[data-sound="off"] .controls .sound-wave,
[data-sound="muted"] .controls .sound-wave,
[data-sound="ended"] .controls .sound-wave {
  opacity: 0.28;
  transform: scaleX(0.62);
  transform-origin: left;
}

.room.is-replay-signaling .controls [data-replay]::before {
  animation: replay-mark 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes replay-mark {
  0% { transform: rotate(var(--control-tilt)) scale(0.9); }
  72% { transform: rotate(calc(var(--control-tilt) + 310deg)) scale(1.1); }
  100% { transform: rotate(calc(var(--control-tilt) + 360deg)) scale(0.9); }
}

.controls button:focus-visible,
.routes a:focus-visible,
.skip-link:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 3px;
}

.controls svg {
  position: relative;
  z-index: 1;
  width: 1.12rem;
  height: 1.12rem;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
}

.controls .icon-play {
  display: none;
  fill: currentColor;
  stroke: none;
}

[data-motion="paused"] .controls .icon-pause {
  display: none;
}

[data-motion="paused"] .controls .icon-play {
  display: block;
}

.skip-link {
  position: fixed;
  z-index: 30;
  top: 0.65rem;
  left: 50%;
  display: grid;
  width: 2.2rem;
  height: 2.2rem;
  place-items: center;
  border: 1px solid rgba(243, 240, 231, 0.58);
  border-radius: 50%;
  background: var(--rust-ground);
  color: var(--bone);
  text-decoration: none;
  translate: -50% -180%;
  transition: translate 160ms ease;
}

.skip-link:focus {
  translate: -50% 0;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.still-room {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem;
  background:
    radial-gradient(ellipse at 64% 42%, rgba(91, 89, 255, 0.22), transparent 48%),
    linear-gradient(112deg, rgba(47, 13, 23, 0.34), rgba(9, 40, 47, 0.62)),
    var(--rust-ground);
}

.still-room h1 {
  margin: 0;
  font: italic 400 clamp(1.55rem, 2.6vw, 2.85rem) / 1 "Telly Display", Cormorant, Georgia, serif;
}

.still-room nav {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}

.still-room a {
  display: inline-flex;
  min-width: 2.75rem;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.34rem;
  color: var(--bone);
  font-size: 0.72rem;
  text-decoration: none;
}

@media (max-width: 720px) {
  .identity {
    top: max(0.9rem, env(safe-area-inset-top));
    left: max(0.9rem, env(safe-area-inset-left));
  }

  .identity h1 {
    font-size: clamp(1.62rem, 8vw, 2.45rem);
  }

  .film,
  .body-plane {
    inset: -16%;
    width: 132%;
    height: 132%;
  }

  .body-plane {
    background-size: 86vmax auto;
  }

  .body-plane {
    background-position: 78% 45%;
  }

  .routes {
    right: max(0.9rem, env(safe-area-inset-right));
    bottom: max(0.85rem, env(safe-area-inset-bottom));
    flex-direction: column;
    align-items: flex-end;
    gap: 0.16rem;
    padding-right: 0.55rem;
  }

  .routes::before {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, transparent, rgba(243, 240, 231, 0.34));
    transform: none;
  }

  .routes a {
    min-width: 2.75rem;
    min-height: 2.75rem;
    justify-content: flex-end;
    padding-block: 0.65rem;
  }

  .controls {
    left: max(0.55rem, env(safe-area-inset-left));
    bottom: max(0.5rem, env(safe-area-inset-bottom));
    gap: 0;
  }

  .controls button {
    width: 3.05rem;
    height: 3.05rem;
  }
}

@media (max-width: 900px), (max-height: 540px) {
  .routes a {
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding-block: 0.65rem;
  }

  .controls button {
    width: 3.05rem;
    height: 3.05rem;
  }
}

@media (max-height: 540px) and (orientation: landscape) {
  .identity h1 {
    font-size: 1.45rem;
  }

  .routes {
    bottom: max(0.5rem, env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ground,
  .room-skin,
  .film,
  .body-plane,
  .pressure,
  .art-score,
  .grain {
    will-change: auto;
  }

  .film,
  .body-plane {
    opacity: 0 !important;
  }

  .room-skin {
    transition: none;
  }

  .controls [data-pause] {
    display: none;
  }

  .room.is-replay-signaling .controls [data-replay]::before {
    animation: none !important;
  }
}