.playground-scene {
  --scene-x: 0;
  --scene-y: 0;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  isolation: isolate;
  background: #f7f5ec;
  perspective: 1100px;
}
.playground-plane {
  position: absolute;
  inset: -2%;
  pointer-events: none;
  transform: rotateX(calc(var(--scene-y) * -1.2deg)) rotateY(calc(var(--scene-x) * 1.8deg));
}
.playground-scene .playground-layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--scene-position, center);
  user-select: none;
  pointer-events: none;
  transform: translate3d(calc(var(--scene-x) * var(--layer-depth) * 1px), calc(var(--scene-y) * var(--layer-depth) * .7px), 0);
}
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .playground-scene .playground-plane,
  .playground-scene .playground-layer { transform: none; }
}
[data-motion="off"] .playground-scene .playground-plane,
[data-motion="off"] .playground-scene .playground-layer { transform: none; }