:root { color-scheme: dark; background: #11140f; color: #e6e4d6; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; }
body { height: 100vh; height: 100dvh; overflow: hidden; }
main { width: 100%; height: 100%; position: relative; isolation: isolate; }
#grass-stage {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  border: 0; border-radius: 0;
  color: inherit;
  background:
    radial-gradient(ellipse at 50% 110%, #394332, transparent 65%),
    #11140f;
  overflow: hidden;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
#grass-stage:focus-visible { outline: 1px solid #8f9a7a; outline-offset: -12px; }
#grass-scene { display: block; width: 100%; height: 100%; }
.veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 43%, rgba(12, 16, 10, .24), transparent 44%);
}
.identity {
  position: absolute;
  z-index: 1;
  top: 43%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.6vw, 22px);
  margin: 0;
  width: min(480px, calc(100% - 56px));
  line-height: 0;
  pointer-events: none;
  filter: drop-shadow(0 2px 18px rgba(7, 11, 6, .2));
}
.emblem { width: 15%; height: auto; flex: none; }
.wordmark { width: 78%; height: auto; flex: none; }
@media (max-width: 600px) {
  .identity { top: 39%; width: min(365px, calc(100% - 44px)); }
}
@media (max-height: 440px) and (min-width: 600px) {
  .identity { width: min(400px, calc(100% - 60px)); top: 38%; }
}