:root {
  color-scheme: dark;
  --bg: #0b0d0e;
  --fg: #f0f1ec;
  --muted: #777c7a;
  --line: rgb(240 241 236 / 13%);
  --accent: #b8f36b;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sans: "Avenir Next", "Segoe UI Variable", "Segoe UI", sans-serif;
  --display: "Chakra Petch", "Avenir Next", "Segoe UI", sans-serif;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f1f1ec;
  --fg: #151817;
  --muted: #707572;
  --line: rgb(21 24 23 / 15%);
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--fg);
  background:
    radial-gradient(ellipse at 72% 46%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 34%),
    radial-gradient(ellipse at 10% 100%, color-mix(in srgb, var(--accent) 3%, transparent), transparent 38%),
    var(--bg);
  font-family: var(--sans);
  transition: color 300ms ease, background-color 300ms ease;
}

body::before {
  position: fixed;
  z-index: 0;
  inset: 0;
  background-image: radial-gradient(var(--line) .7px, transparent .7px);
  background-size: 28px 28px;
  content: "";
  opacity: .16;
  pointer-events: none;
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}

body::after {
  position: fixed;
  z-index: 0;
  inset: 0;
  background: linear-gradient(90deg, transparent calc(50% - .5px), var(--line) 50%, transparent calc(50% + .5px));
  content: "";
  opacity: .28;
  pointer-events: none;
}

button, a { color: inherit; }

button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 5px;
}

.page-shell {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(100% - 104px, 1440px);
  min-width: 0;
  min-height: 100svh;
  margin-inline: auto;
  flex-direction: column;
}

.masthead, .footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.masthead {
  min-height: 84px;
  border-bottom: 1px solid var(--line);
}

.wordmark { display: inline-flex; gap: 11px; align-items: center; }
.wordmark__mark { width: 40px; height: 40px; color: var(--fg); flex: 0 0 auto; }
.wordmark__name {
  display: grid;
  gap: 4px;
  padding-left: 11px;
  border-left: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line));
}
.wordmark__name-domain { font: 700 15px/1 var(--display); letter-spacing: -.025em; white-space: nowrap; }
.wordmark__dot { color: var(--accent); }
.wordmark__name-code { color: var(--muted); font: 8px var(--mono); letter-spacing: .19em; }
.controls { display: flex; gap: 20px; align-items: center; }

.home-button {
  display: inline-flex;
  min-height: 38px;
  gap: 18px;
  align-items: center;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 44%, var(--line));
  color: var(--fg);
  font: 10px var(--mono);
  letter-spacing: .14em;
  text-decoration: none;
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.home-button span { color: var(--accent); font-size: 15px; }
.home-button:hover { transform: translateY(-1px); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.accent-picker { display: flex; gap: 9px; align-items: center; cursor: pointer; }
.accent-picker__label, .accent-picker__value { color: var(--muted); font: 9px var(--mono); letter-spacing: .12em; }
.accent-picker__value { min-width: 58px; color: var(--fg); letter-spacing: .07em; }

.accent-picker__tile {
  position: relative;
  display: block;
  width: 34px;
  height: 36px;
  padding: 3px;
  background: var(--line);
  clip-path: polygon(25% 0, 75% 0, 100% 24%, 100% 76%, 75% 100%, 25% 100%, 0 76%, 0 24%);
  transition: transform 180ms ease, background-color 180ms ease;
}

.accent-picker:hover .accent-picker__tile { transform: translateY(-2px); }
.accent-picker__tile::before {
  position: absolute;
  inset: 3px;
  background: var(--accent);
  clip-path: polygon(25% 0, 75% 0, 100% 24%, 100% 76%, 75% 100%, 25% 100%, 0 76%, 0 24%);
  content: "";
}

.accent-picker__input {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.accent-picker__input:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

.theme-toggle {
  display: grid;
  width: 34px;
  height: 34px;
  padding: 8px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.theme-toggle__icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.4; }
:root:not([data-theme="light"]) .theme-toggle__icon--dark,
:root[data-theme="light"] .theme-toggle__icon--light { display: none; }

.hero {
  position: relative;
  display: grid;
  min-height: 540px;
  flex: 1;
  grid-template-columns: .92fr 1.08fr;
  align-items: center;
  padding-block: 28px 56px;
}

.hero__copy { position: relative; z-index: 2; padding-bottom: 20px; }
.eyebrow, .signature__text, .hero__index, .orbit__coordinate, .footer {
  font-family: var(--mono);
  text-transform: uppercase;
}

.eyebrow {
  display: flex;
  gap: 11px;
  align-items: center;
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .17em;
}

.eyebrow__pulse, .footer__status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 65%, transparent);
}

h1 {
  max-width: 650px;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3.65rem, 6.7vw, 6.6rem);
  font-weight: 500;
  letter-spacing: -.065em;
  line-height: .96;
}

h1 span {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: -.075em;
  text-shadow: 0 0 28px color-mix(in srgb, var(--accent) 18%, transparent);
  transition: color 220ms ease;
}

.signature { display: flex; gap: 14px; align-items: center; margin-top: 42px; }
.signature__line { width: 42px; height: 1px; background: var(--accent); }
.signature__text { color: var(--muted); font-size: 10px; letter-spacing: .2em; }

.orbit {
  position: relative;
  display: grid;
  width: min(110%, 700px);
  aspect-ratio: 1;
  margin-left: -2%;
  overflow: visible;
  place-items: center;
}

.orbit::before, .orbit::after {
  position: absolute;
  border: 1px solid var(--line);
  border-radius: 50%;
  content: "";
}

.orbit::before { inset: 2%; border-color: color-mix(in srgb, var(--accent) 20%, var(--line)); }
.orbit::after { inset: 10%; border-style: dashed; opacity: .55; }
.orbit__halo { position: absolute; border-radius: 50%; pointer-events: none; }
.orbit__halo--one { inset: 20%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 9%, transparent), transparent 68%); filter: blur(20px); }
.orbit__halo--two { inset: 10%; border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); transform: rotate(-28deg) scaleY(.58); }

.planet {
  position: relative;
  z-index: 1;
  width: 84%;
  overflow: visible;
  color: var(--accent);
  filter: drop-shadow(0 0 38px color-mix(in srgb, var(--accent) 17%, transparent));
  animation: planet-rise 1.1s cubic-bezier(.2, .7, .2, 1) both;
}

.planet-canvas {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 700ms ease;
}

.orbit[data-webgl="ready"] .planet-canvas { cursor: crosshair; }
.orbit[data-webgl="ready"] .planet-canvas { opacity: 1; }
.orbit[data-webgl="ready"] .planet { opacity: 0; }

.tile {
  position: absolute;
  z-index: 2;
  width: clamp(42px, 6vw, 70px);
  overflow: visible;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
}

.tile circle, .tile path:last-child { fill: var(--accent); stroke: none; }
.tile--top { top: 8%; right: 16%; animation: drift 7s ease-in-out infinite; }
.tile--side { top: 49%; left: 0; width: clamp(35px, 4.6vw, 54px); opacity: .55; animation: drift 9s ease-in-out -2s infinite; }
.tile--low { right: 9%; bottom: 7%; width: clamp(32px, 4.5vw, 52px); opacity: .42; animation: drift 8s ease-in-out -4s infinite; }
.orbit__coordinate { position: absolute; z-index: 2; color: var(--muted); font-size: 8px; letter-spacing: .13em; }
.orbit__coordinate--one { top: 22%; left: 6%; writing-mode: vertical-rl; }
.orbit__coordinate--two { right: 3%; bottom: 28%; writing-mode: vertical-rl; }

.hero__index {
  position: absolute;
  bottom: 32px;
  left: 0;
  display: flex;
  gap: 12px;
  align-items: center;
  color: var(--muted);
  font-size: 8px;
  letter-spacing: .12em;
}

.hero__index-rule { display: block; width: 52px; height: 1px; background: var(--line); }

.footer {
  min-height: 76px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 8px;
  letter-spacing: .11em;
}

.footer__status { display: inline-flex; gap: 9px; align-items: center; color: var(--fg); }
.footer__status i { width: 5px; height: 5px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

@keyframes planet-rise {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes drift {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-9px) rotate(3deg); }
}

@media (max-width: 820px) {
  .page-shell { width: min(100% - 48px, 620px); }
  .masthead { min-height: 76px; }
  .hero { min-height: auto; grid-template-columns: 1fr; gap: 8px; padding-block: 64px 86px; }
  .hero__copy { padding: 0; }
  h1 { font-size: clamp(2.5rem, 12vw, 6.25rem); }
  .orbit { width: min(100%, 560px); margin: 10px auto 0; }
  .hero__index { bottom: 26px; }
}

@media (max-width: 520px) {
  .page-shell { width: calc(100% - 36px); }
  .masthead { display: grid; min-height: 0; grid-template-columns: 1fr; gap: 12px; padding-block: 11px 12px; }
  .wordmark { gap: 9px; }
  .wordmark__mark { width: 34px; height: 34px; }
  .wordmark__name { gap: 3px; padding-left: 9px; }
  .wordmark__name-domain { font-size: 14px; }
  .wordmark__name-code { font-size: 7px; }
  .controls { width: 100%; min-width: 0; justify-content: space-between; gap: 9px; }
  .home-button { min-height: 34px; gap: 9px; padding-inline: 10px; font-size: 9px; }
  .accent-picker { gap: 6px; }
  .accent-picker__label { display: none; }
  .accent-picker__tile { width: 29px; height: 31px; }
  .accent-picker__value { min-width: 51px; font-size: 8px; }
  .hero { padding-top: 54px; }
  .eyebrow { margin-bottom: 23px; }
  .orbit { width: calc(100% + 20px); margin-left: -10px; }
  .footer { min-height: 68px; flex-wrap: wrap; gap: 3px 10px; padding-block: 14px; font-size: 7px; }
  .footer__coordinates { order: 3; width: 100%; }
}

@media (min-width: 821px) and (max-height: 760px) {
  .masthead { min-height: 68px; }
  .hero { min-height: 500px; }
  h1 { font-size: clamp(3.5rem, 6.4vw, 6rem); }
  .footer { min-height: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}