:root {
  --ground: #05060d;
    --text: #eceaf6;
  --muted: rgba(236, 234, 246, .56);
  --line: rgba(236, 234, 246, .2);
  --s1: 8px; --s2: 16px; --s3: 24px;
  --fox: clamp(336px, 55vmin, 552px);
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { color-scheme: dark; }
body { min-height: 100vh; min-height: 100svh; background: var(--ground); color: var(--text); overflow: hidden; font: 16px/1.4 var(--sans); }
button, input { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.scene { position: fixed; inset: 0; overflow: hidden; background: var(--ground); }

/* One seamless tile painted by error-sky.js, drawn twice at two scales. A layer is larger than the screen
   by one tile and slides one tile down-left, so the loop has no seam. */
.sky { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.scene.is-ready .sky { opacity: 1; }
.sky__layer { position: absolute; left: 0; top: calc(var(--tile) * -1); width: calc(100% + var(--tile)); height: calc(100% + var(--tile));
  background-image: var(--sky); background-size: var(--tile) var(--tile); background-repeat: repeat;
  animation: drift var(--drift) linear infinite; will-change: transform; }
.sky__layer--far { --tile: 620px; --drift: 190s; opacity: .8; }
.sky__layer--near { --tile: 980px; --drift: 100s; }
@keyframes drift { to { transform: translate(calc(var(--tile) * -1), var(--tile)); } }

.tagline { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--s3); text-align: center; pointer-events: none;
  font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: clamp(20px, 3.4vw, 36px); font-weight: 300; line-height: 1.2; letter-spacing: .04em; color: rgba(236, 234, 246, .86);
  text-shadow: 0 2px 24px rgba(0, 0, 0, .75); text-wrap: balance; }
.fox { position: absolute; left: 0; bottom: 0; width: var(--fox); height: var(--fox); object-fit: contain; pointer-events: none; }


@media (max-width: 560px) {
  :root { --fox: clamp(264px, 74vw, 408px); }
}
@media (prefers-reduced-motion: reduce) {
  .sky__layer { animation: none; }
  .sky { transition: none; }
}