/* Optional scenery: theme variables enable it; standard keeps its normal flow. */
.theme-scene-page {
  position: var(--scene-page-position, static);
  isolation: var(--scene-page-isolation, auto);
  display: var(--scene-page-display, block);
  flex-direction: column;
  min-height: var(--scene-page-min-height, auto);
}
.theme-scene-page > main {
  flex: 0 0 auto;
  position: var(--scene-content-position, static);
  z-index: var(--scene-content-layer, auto);
}
.theme-scene {
  display: var(--scene-display, none);
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  container-type: inline-size;
  background: var(--scene-color, transparent);
}
.theme-scene::before {
  /* Extend only the scenery into the top gap; content keeps its safe-area layout. */
  content: "";
  display: var(--scene-cap-display, none);
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--scene-top-offset, 0px) + 24px);
  background: var(--scene-cap-art, none) center top / max(100cqw, var(--scene-middle-min-width, 0px)) auto no-repeat;
}
.theme-scene::after {
  content: "";
  display: var(--scene-cap-display, none);
  position: absolute;
  inset: 0 0 auto;
  height: calc(env(safe-area-inset-top) + 24px);
  background: linear-gradient(#151c38d9, #151c3899 env(safe-area-inset-top), transparent);
}
.theme-scene-middle {
  /* cqw measures this canvas, excluding the scrollbar: masks and tiles cannot drift. */
  --tile-width: max(100cqw, var(--scene-middle-min-width, 0px));
  --tile-height: calc(var(--tile-width) * var(--scene-middle-height-ratio, 1));
  position: absolute;
  inset: var(--scene-top-offset, 0px) 0 0;
  background: var(--scene-middle-art, none) center top / var(--tile-width) var(--tile-height) repeat-y;
}
.theme-scene-middle::after {
  content: "";
  display: var(--scene-middle-blend, block);
  position: absolute;
  inset: 0;
  background: inherit;
  background-position: center calc(var(--tile-height) / -2);
  /* The opaque base prevents dark bands. Offset seams lie in transparent mask areas;
     base seams lie beneath fully opaque areas. No height-dependent image stretching. */
  mask-image: linear-gradient(#000 12%, transparent 38% 62%, #000 88%);
  mask-size: 100% var(--tile-height);
  mask-repeat: repeat-y;
}
.theme-scene-top {
  display: var(--scene-top-display, none);
  position: absolute;
  inset: var(--scene-top-offset, 0px) 0 auto;
  height: var(--scene-top-height, 30vw);
  background: var(--scene-top-art, none) center top / cover no-repeat;
  mask-image: var(--scene-top-mask, linear-gradient(#000 90%, transparent));
}
.theme-scene-footer {
  display: var(--scene-footer-display, none);
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: var(--scene-footer-height, 10rem);
  margin: auto 0 0;
  padding: 0 1rem;
  border: 0;
  background: none;
}
.theme-scene-footer::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  pointer-events: none;
  height: var(--scene-footer-art-height, 30vw);
  background: var(--scene-footer-art, none) center bottom / cover no-repeat;
  mask-image: var(--scene-footer-mask,
    radial-gradient(ellipse 48% 80% at 8% 100%, #000 70%, transparent 100%),
    radial-gradient(ellipse 50% 95% at 90% 100%, #000 70%, transparent 100%),
    radial-gradient(ellipse 55% 65% at 50% 100%, #000 65%, transparent 100%),
    linear-gradient(transparent 65%, #000 85%));
}