:root {
  color-scheme: light;
  --page-bg: #f5f7f5;
  --stage-bg:
    radial-gradient(ellipse 48% 30% at 50% 50%, #ffffff 0%, rgba(255, 255, 255, 0.78) 42%, transparent 72%),
    linear-gradient(135deg, #fbfcfb 0%, #f2f5f3 48%, #e6ebe8 100%);
  --wordmark-color: #091028;
  --wordmark-weight: 760;
  --wordmark-shadow: 0 1px 0 rgba(255, 255, 255, 0.92), 0 15px 32px rgba(13, 20, 42, 0.08);
  --wordmark-offset-y: 0.08rem;
  --grid-perspective: 1120px;
  --tile-perspective: 760px;
  --tile-depth: 4px;
  --tile-radius: 2px;
  --tile-border: 1px solid rgba(83, 94, 91, 0.18);
  --tile-shadow:
    0 1px 0 rgba(255, 255, 255, 0.94) inset,
    0 11px 15px rgba(38, 48, 45, 0.16),
    0 2px 2px rgba(35, 44, 42, 0.13);
  --tile-sheen:
    radial-gradient(circle at var(--glint-x) var(--glint-y), rgba(255, 255, 255, 0.9), transparent 29%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.18) 42%, rgba(183, 191, 187, 0.27));
  --spine-size: 1px;
  --spine-color: rgba(48, 61, 57, 0.24);
  --spine-opacity: 0.58;
  --spine-active-color: #1747d1;
  --spine-active-opacity: 0.82;
  --spine-active-shadow: 0 0 9px rgba(23, 71, 209, 0.3);
  --axle-size: 4px;
  --axle-color: rgba(38, 51, 47, 0.3);
  --axle-opacity: 0.5;
  --axle-shadow: 0 5px 9px rgba(25, 30, 34, 0.14);
  --axle-active-color: #1747d1;
  --axle-active-opacity: 0.86;
  --axle-active-shadow: 0 0 8px rgba(23, 71, 209, 0.28);
  --nav-surface: rgba(250, 252, 251, 0.76);
  --nav-border: rgba(28, 39, 35, 0.14);
  --nav-shadow: 0 9px 25px rgba(33, 43, 40, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  --nav-dot: rgba(25, 37, 33, 0.09);
  --nav-dot-border: rgba(25, 37, 33, 0.42);
  --nav-dot-hover: rgba(25, 37, 33, 0.48);
  --nav-dot-hover-border: rgba(25, 37, 33, 0.7);
  --nav-dot-active: #17211e;
  --nav-active-ring: rgba(23, 33, 30, 0.1);
  --nav-active-glow: rgba(23, 71, 209, 0.2);
  --nav-focus: #1747d1;
}

body.splash {
  background: #f5f7f5;
}

.stage {
  min-height: 100vh;
  min-height: 100dvh;
}

.stage::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(42, 55, 50, 0.032) 1px, transparent 1px) 0 0 / 96px 66px,
    linear-gradient(180deg, rgba(42, 55, 50, 0.028) 1px, transparent 1px) 0 0 / 96px 66px;
  content: "";
  pointer-events: none;
}

.tile-grid::before {
  background:
    radial-gradient(ellipse 36% 24% at 50% 50%, rgba(255, 255, 255, 0.88) 0 18%, rgba(255, 255, 255, 0.38) 52%, transparent 76%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.38), transparent 13% 87%, rgba(255, 255, 255, 0.38));
}

.tile-grid::after {
  background:
    radial-gradient(ellipse at center, transparent 0 42%, rgba(217, 225, 221, 0.27) 80%, rgba(197, 208, 202, 0.38) 100%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(198, 207, 203, 0.08));
}

.tile-face {
  outline: 1px solid rgba(255, 255, 255, 0.74);
  outline-offset: -2px;
}

.tile-back {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.36) inset,
    0 -10px 15px rgba(0, 0, 0, 0.22) inset,
    0 16px 21px rgba(30, 35, 39, 0.22);
}

.tile-back::after {
  background:
    radial-gradient(circle at var(--glint-x) var(--glint-y), rgba(255, 255, 255, 0.36), transparent 31%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.27), transparent 29%, rgba(0, 0, 0, 0.16));
}

.tile.is-active .tile-face {
  border-color: rgba(23, 71, 209, 0.42);
}

.brand-lockup {
  z-index: 8;
}

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

.wordmark {
  max-width: calc(100vw - 3rem);
  font-size: 4.75rem;
  font-stretch: 96%;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .wordmark {
    font-size: 4rem;
  }
}

@media (max-width: 640px) {
  .stage::before {
    background:
      linear-gradient(90deg, rgba(42, 55, 50, 0.035) 1px, transparent 1px) 0 0 / 74px 52px,
      linear-gradient(180deg, rgba(42, 55, 50, 0.03) 1px, transparent 1px) 0 0 / 74px 52px;
  }

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

@media (max-width: 380px) {
  .wordmark {
    font-size: 2.35rem;
  }
}