:root {
  color-scheme: light;
  --page-bg: #e8eeea;
  --stage-bg: #e8eeea;
  --wordmark-color: #202927;
  --wordmark-weight: 570;
  --wordmark-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8),
    0 13px 29px rgba(36, 51, 46, 0.12);
  --wordmark-offset-y: 0.02em;
  --grid-perspective: 1020px;
  --tile-perspective: 780px;
  --tile-depth: 5px;
  --tile-radius: 4px;
  --tile-border: 1px solid rgba(75, 94, 86, 0.24);
  --tile-shadow:
    0 1px 0 rgba(255, 255, 255, 0.78) inset,
    0 -1px 0 rgba(63, 83, 75, 0.11) inset,
    0 8px 16px rgba(48, 67, 59, 0.16);
  --tile-sheen:
    radial-gradient(circle at var(--glint-x) var(--glint-y), rgba(255, 255, 255, 0.72), transparent 31%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.28), transparent 40%),
    linear-gradient(180deg, transparent 55%, rgba(55, 75, 67, 0.09));
  --spine-size: 1px;
  --spine-color: rgba(48, 67, 60, 0.24);
  --spine-opacity: 0.38;
  --spine-active-color: rgba(54, 82, 72, 0.74);
  --spine-active-opacity: 0.8;
  --spine-active-shadow: 0 1px 0 rgba(255, 255, 255, 0.48);
  --axle-size: 4px;
  --axle-color: rgba(48, 67, 60, 0.34);
  --axle-opacity: 0.48;
  --axle-shadow: 0 1px 0 rgba(255, 255, 255, 0.48);
  --axle-active-color: #455f56;
  --axle-active-opacity: 0.88;
  --axle-active-shadow: 0 0 8px rgba(55, 91, 78, 0.2);
  --nav-surface: rgba(245, 248, 246, 0.76);
  --nav-border: rgba(45, 64, 57, 0.16);
  --nav-shadow: 0 9px 24px rgba(43, 61, 54, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.82);
  --nav-dot: rgba(34, 49, 43, 0.08);
  --nav-dot-border: rgba(34, 49, 43, 0.42);
  --nav-dot-hover: rgba(34, 49, 43, 0.48);
  --nav-dot-hover-border: rgba(34, 49, 43, 0.7);
  --nav-dot-active: #2b3934;
  --nav-active-ring: rgba(43, 57, 52, 0.1);
  --nav-active-glow: rgba(76, 113, 99, 0.18);
  --nav-focus: #315f50;
}

body.splash {
  background: #e8eeea;
}

.stage {
  background:
    linear-gradient(rgba(74, 96, 87, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 96, 87, 0.09) 1px, transparent 1px),
    radial-gradient(ellipse 46% 31% at 50% 50%, #fbfcfa 0 21%, #edf2ef 58%, #d9e2dc 100%);
  background-size:
    68px 68px,
    68px 68px,
    100% 100%;
}

.stage::before,
.stage::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
}

.stage::before {
  z-index: 0;
  background:
    linear-gradient(118deg, transparent 14%, rgba(255, 255, 255, 0.28) 39%, transparent 63%),
    linear-gradient(248deg, transparent 19%, rgba(100, 133, 120, 0.08) 48%, transparent 71%);
}

.stage::after {
  z-index: 6;
  background:
    radial-gradient(ellipse at center, transparent 0 44%, rgba(71, 92, 83, 0.11) 86%),
    linear-gradient(90deg, rgba(48, 67, 59, 0.08), transparent 16% 84%, rgba(48, 67, 59, 0.08));
}

.tile-grid::before {
  background:
    radial-gradient(ellipse 34% 21% at 50% 50%, rgba(251, 253, 251, 0.86), rgba(251, 253, 251, 0.36) 52%, transparent 78%),
    linear-gradient(rgba(58, 80, 70, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(58, 80, 70, 0.11) 1px, transparent 1px);
  background-size:
    100% 100%,
    68px 68px,
    68px 68px;
  mix-blend-mode: multiply;
  opacity: 0.46;
}

.tile-grid::after {
  background-image:
    radial-gradient(circle at 21% 27%, rgba(52, 72, 63, 0.11) 0 0.7px, transparent 1.1px),
    radial-gradient(circle at 69% 74%, rgba(255, 255, 255, 0.38) 0 0.7px, transparent 1px);
  background-size: 19px 17px, 23px 21px;
  mix-blend-mode: multiply;
  opacity: 0.32;
}

.tile:nth-child(7n) {
  --tile-tilt: -0.18deg;
}

.tile:nth-child(11n) {
  --tile-tilt: 0.22deg;
}

.tile-face::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    radial-gradient(circle at 24% 32%, rgba(47, 69, 59, 0.13) 0 0.7px, transparent 1.2px),
    radial-gradient(circle at 68% 70%, rgba(255, 255, 255, 0.42) 0 0.8px, transparent 1.3px);
  background-size: 17px 15px, 21px 19px;
  opacity: 0.24;
  pointer-events: none;
  content: "";
}

.tile-face::after {
  z-index: 2;
}

.tile-back {
  border-color: rgba(40, 58, 50, 0.32);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.34) inset,
    0 -2px 0 rgba(31, 45, 39, 0.15) inset,
    0 10px 19px rgba(37, 52, 45, 0.24);
}

.tile.is-active .tile-face {
  border-color: rgba(52, 91, 77, 0.45);
}

.wordmark-wrap {
  min-width: 0;
  padding: 0;
  background: transparent;
}

.wordmark {
  font-family: Optima, "Avenir Next", "Segoe UI Variable Display", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 4.8rem;
  line-height: 1;
  letter-spacing: 0;
}

@media (max-width: 700px) {
  .stage {
    background-size:
      51px 51px,
      51px 51px,
      100% 100%;
  }

  .tile-grid::before {
    background-size:
      100% 100%,
      51px 51px,
      51px 51px;
  }

  .wordmark-wrap {
    min-width: min(86vw, 480px);
    padding: 1.5rem 1rem;
  }

  .wordmark {
    font-size: 2.5rem;
  }
}