:root {
  color-scheme: light;
  --sky: #a8d9ee;
  --soil: #bb6533;
  --ink: #493322;
  --sprite-size: clamp(220px, 27vw, 358px);
  --ground-depth: calc(var(--sprite-size) * 88 / 358);
  --scene-height: clamp(190px, 34vh, 320px);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--soil); }
body { color: var(--ink); }
.filter-definitions { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.holding-page { width: 100%; min-height: 100vh; min-height: 100svh; position: relative; overflow: hidden; isolation: isolate; }
.sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, #9bd2ec 0%, #bce2ee 50%, #e3edcd 100%);
  pointer-events: none;
}
.cloud {
  position: absolute;
  width: clamp(112px, 15vw, 220px);
  aspect-ratio: 3.2;
  background: url("assets/cloud.svg") center / 100% 100% no-repeat;
  image-rendering: pixelated;
  opacity: .82;
}
.cloud-one { top: 12%; left: 9%; }
.cloud-two { top: 20%; right: 10%; width: clamp(90px, 12vw, 176px); opacity: .72; }
.cloud-three { top: 48%; left: -2%; width: clamp(100px, 12vw, 180px); opacity: .45; }
.message {
  min-height: calc(100vh - var(--scene-height));
  min-height: calc(100svh - var(--scene-height));
  display: grid;
  place-items: center;
  padding: 28px 16px;
  position: relative;
}
h1 { margin: 0; max-width: 100%; font-family: "Courier New", Courier, ui-monospace, monospace; font-size: clamp(26px, 4vw, 48px); font-weight: 700; line-height: 1.2; letter-spacing: -.055em; text-align: center; text-shadow: 2px 2px 0 #e8f2e5; }
.world { position: absolute; inset: auto 0 0; height: var(--scene-height); overflow: visible; pointer-events: none; isolation: isolate; }
.scenery { position: absolute; bottom: var(--ground-depth); width: calc((100% - var(--sprite-size)) / 2 + 14px); height: calc(var(--sprite-size) * 220 / 358); background-size: auto 100%; background-repeat: repeat-x; image-rendering: pixelated; }
.scenery-left { left: 0; background-image: url("assets/meadow-left.svg"); background-position: right bottom; }
.scenery-right { right: 0; background-image: url("assets/meadow-right.svg"); background-position: left bottom; }
.ground { position: absolute; inset: auto 0 0; height: var(--ground-depth); background-image: url("assets/cats-at-work.gif"); background-size: var(--sprite-size) var(--sprite-size); background-repeat: repeat-x; background-position: center bottom; image-rendering: pixelated; }
.cat-cluster { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: var(--sprite-size); height: var(--sprite-size); }
.cats { position: absolute; inset: 0; display: block; width: 100%; height: 100%; image-rendering: pixelated; filter: url("#remove-peach-sky"); }
.props { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: block; width: calc(var(--sprite-size) * 438 / 358); height: var(--sprite-size); image-rendering: pixelated; }
@supports (height: 1svh) { :root { --scene-height: clamp(190px, 34svh, 320px); } }
@media (max-width: 600px) { .cloud-one { left: -4%; top: 10%; } .cloud-two { right: -3%; top: 27%; } .cloud-three { display: none; } }
@media (max-height: 420px) { :root { --sprite-size: 220px; --scene-height: 170px; } .message { padding-block: 16px; } .cloud-one { top: 7%; } .cloud-two { top: 12%; } .cloud-three { display: none; } }