:root {
  color-scheme: light;

  --bg: #fafaf9;
  --ink: #0d0d0f;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
}

img,
canvas {
  display: block;
  max-inline-size: 100%;
}

img {
  block-size: auto;
}

.visually-hidden:where(:not(:focus-within, :active)) {
  position: absolute !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.viewport-shell {
  position: relative;
  isolation: isolate;
  min-block-size: 100dvh;
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem;
  overflow: clip;
}

.invariant-field {
  position: fixed;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  pointer-events: none;
  z-index: -1;
}

.banner-stage {
  inline-size: min(92vw, 56rem);
  transform: translate3d(var(--shift-x, 0px), var(--shift-y, 0px), 0);
}

@media (prefers-reduced-motion: no-preference) {
  .banner-stage {
    will-change: transform;
  }
}

.mega-banner-img {
  inline-size: 100%;
  block-size: auto;
  user-select: none;
}

@media (forced-colors: active) {
  .mega-banner-img {
    background-color: #ffffff;
    padding: 0.35rem;
    border: 1px solid CanvasText;
  }
}