:root {
  color-scheme: light;
  --bg: #91c8e8;
  --cyan: #0f514e;
  --ground: 79%;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; background: var(--bg); }
body { min-height: 100svh; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; }
.world { position: relative; width: 100%; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; }
#landscape { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.wordmark {
  position: absolute; z-index: 1; top: 29%; left: 50%; transform: translate(-50%, -50%);
  width: min(650px, 60vw); margin: 0; color: var(--cyan); text-align: center;
  font: 900 clamp(28px, 5vw, 76px)/1 monospace; letter-spacing: -.055em;
  user-select: none;
}
#pixel-wordmark { display: none; width: 100%; height: auto; overflow: visible; }
.has-wordmark #pixel-wordmark { display: block; }
.has-wordmark .wordmark-text, .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.filing {
  position: fixed; z-index: 2; left: 16px; right: 16px;
  bottom: max(22px, calc(env(safe-area-inset-bottom) + 14px)); text-align: center;
  font-size: 14px; line-height: 1.7; letter-spacing: .055em;
}
.filing a { color: #fff0c9; text-decoration: none; padding: 10px 8px; transition: color .16s ease; }
.filing a:hover { color: #ffffff; }
.filing a:focus-visible { color: #ffffff; outline: 1px solid #fff0c9; outline-offset: 5px; border-radius: 2px; }
.still-landscape { position: absolute; inset: 0; overflow: hidden; }
.still-ground { position: absolute; top: var(--ground); inset-inline: 0; bottom: 0; background: #604c56; border-top: 2px solid #75ac58; }
.still-hill { position: absolute; bottom: 21%; background: #71a7b5; clip-path: polygon(0 100%, 0 80%, 10% 80%, 10% 62%, 23% 62%, 23% 43%, 36% 43%, 36% 27%, 48% 27%, 48% 12%, 57% 12%, 57% 25%, 69% 25%, 69% 46%, 82% 46%, 82% 68%, 91% 68%, 91% 82%, 100% 82%, 100% 100%); }
.hill-one { left: -5%; width: 75%; height: 24%; }
.hill-two { right: -15%; width: 65%; height: 35%; background: #9293c7; }
.scene-ready .still-landscape { display: none; }
@media (max-width: 600px) {
  .wordmark { top: 29%; width: min(84vw, 460px); }
  .filing { bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px)); font-size: 13px; }
}
@media (max-height: 500px) and (min-width: 601px) {
  .wordmark { top: 25%; width: min(440px, 54vw); }
  .filing { bottom: max(10px, env(safe-area-inset-bottom)); font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .filing a { transition: none; } }
