[data-hsr-background-host] {
  position: relative;
  isolation: isolate;
}

.hsr-background {
  position: absolute;
  z-index: -1;
  left: var(--hsr-bg-left, 0px);
  top: var(--hsr-bg-top, 0px);
  width: var(--hsr-bg-width, 100%);
  height: var(--hsr-bg-range-height, 100%);
  overflow: clip;
  pointer-events: none;
}

.hsr-background__scene {
  position: absolute;
  inset: 0 0 auto;
  height: var(--hsr-bg-scene-height, 100%);
  overflow: hidden;
  transform: translate3d(0, var(--hsr-bg-scene-y, 0px), 0);
}

.hsr-background__art {
  position: absolute;
  inset: 0 0 auto;
  height: var(--hsr-bg-paint-height, 100%);
  transform: translate3d(0, var(--hsr-bg-art-y, 0px), 0);
}

.hsr-background__field {
  position: absolute;
  top: 0;
  left: calc((100% - var(--hsr-bg-source-width)) / 2);
  width: var(--hsr-bg-source-width);
  height: 100%;
  overflow: hidden;
}

.hsr-background__field-origin {
  position: absolute;
  inset: 0 0 auto;
  width: var(--hsr-bg-source-width);
  height: var(--hsr-bg-source-height);
}

.hsr-background__field-tail {
  position: absolute;
  inset: var(--hsr-bg-source-height) 0 0;
  background-repeat: repeat-y;
  background-position: center top;
  background-size: var(--hsr-bg-source-width) var(--hsr-bg-period);
}

.hsr-background__decorations {
  position: absolute;
  inset: 0;
  z-index: 20;
  clip-path: inset(var(--hsr-bg-clip-top, 0px) 0 0 0);
  pointer-events: none;
}

.hsr-content-themes {
  position: relative;
  isolation: isolate;
}

.hsr-content-themes>.hsr-background__decorations {
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
  z-index: -1;
}

.hsr-background__item {
  position: absolute;
  left: var(--hsr-bg-x, 0px);
  top: var(--hsr-bg-y, 0px);
  transform-origin: 0 0;
  transform: scale(var(--hsr-bg-scale, 1));
}

.hsr-background__pixels {
  position: absolute;
  display: block;
  background-size: 100% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
}

.hsr-background__field-origin > svg,
.hsr-background__item > svg {
  display: block;
}

.hsr-background__building-art {
  width: 100%;
  height: 100%;
  overflow: visible;
}

[data-hsr-background-static] .hsr-background__scene,
.hsr-background[data-hsr-background-static] .hsr-background__scene {
  transform: none;
}

[data-hsr-background-static] .hsr-background__art,
.hsr-background[data-hsr-background-static] .hsr-background__art {
  transform: none;
}

body:has([data-hsr-background]) {
  display: flow-root;
  overflow-x: clip;
}

.hsr-background[data-hsr-background-sticky] .hsr-background__scene {
  position: sticky;
  top: 0;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  .hsr-background__art {
    will-change: auto;
  }
}