:root {
  color-scheme: dark;
  --background: #0a1020;
  --surface: #111b30;
  --ink: #f1f4ff;
  --muted: #aebbd3;
  --line: #263653;
  --gold: #f8d768;
  --mono: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--background); color: var(--ink); }
a { color: inherit; }
a:focus-visible { outline: 3px solid #9bc9ff; outline-offset: 4px; }
img { display: block; }
.shell { width: min(100% - 3rem, 1200px); margin-inline: auto; }
.skip-link { position: fixed; left: 1rem; top: 1rem; z-index: 2; padding: .7rem 1rem; color: var(--background); background: var(--gold); transform: translateY(-160%); }
.skip-link:focus { transform: none; }

.site-header { border-bottom: 1px solid var(--line); background: #0d1528; }
.header-inner, .footer { display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; }
.header-inner { min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 760; letter-spacing: .02em; text-decoration: none; }
.brand img, .orb img, .world img { image-rendering: pixelated; }
nav { display: flex; align-items: center; gap: clamp(.75rem, 3vw, 2rem); }
nav a { font-size: .9rem; color: var(--muted); font-weight: 650; text-decoration: none; }
nav a:hover { color: var(--ink); }
nav .nav-download { color: var(--gold); border: 1px solid #806e45; border-radius: 5px; padding: .5rem .8rem; }
nav .nav-download:hover { background: #302b28; color: var(--gold); }

.hero {
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 63px 29px, #d3e6ff70 0 1px, transparent 1.5px) 0 0 / 211px 157px,
    radial-gradient(circle at 19px 51px, #a4c5ff50 0 .75px, transparent 1.25px) 0 0 / 113px 97px,
    radial-gradient(circle at 32px 39px, #fff4ce55 0 .65px, transparent 1.2px) 0 0 / 73px 83px,
    radial-gradient(ellipse at 76% 39%, #162f53, transparent 49%),
    radial-gradient(ellipse at 5% 95%, #261d38, transparent 45%), #0b1326;
}
.hero-inner { min-height: 580px; display: grid; grid-template-columns: 1.07fr 1fr; align-items: center; gap: 1rem; padding-block: clamp(2.5rem, 6vw, 5.5rem); }
.hero-copy { min-width: 0; z-index: 1; scroll-margin-top: 2rem; }
.wordmark { width: 256px; max-width: 90%; height: auto; margin: -28px 0 -17px -25px; }
.eyebrow { margin: 0 0 .9rem; color: var(--gold); font: 650 .75rem/1.5 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.signal { display: inline-block; width: .48rem; height: .48rem; margin-right: .38rem; background: var(--gold); box-shadow: 0 0 12px #ffd04e80; }
h1, h2, h3 { margin: 0; }
h1 { font-size: clamp(3.1rem, 6.1vw, 5.8rem); line-height: .99; letter-spacing: -.07em; }
h1 span { display: block; color: var(--gold); }
.intro { max-width: 33rem; margin: 1.35rem 0 1.6rem; color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.19rem); line-height: 1.6; }
.download-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.download-button { display: flex; flex: 0 1 auto; gap: .65rem; align-items: center; min-height: 61px; padding: .62rem .8rem; border: 1px solid transparent; border-radius: 6px; font-size: .91rem; line-height: 1.3; font-weight: 760; text-decoration: none; }
.download-button svg { flex: 0 0 19px; width: 19px; height: 19px; }
.download-button small { display: block; margin-top: .16rem; font-size: .71rem; font-weight: 600; }
.download-button .download-arrow { margin-left: auto; padding-left: .1rem; font-size: 1.08rem; }
.primary { background: var(--gold); color: #171a27; box-shadow: 0 2px 0 #ad8d3d; }
.primary:hover { background: #ffe498; }
.secondary { border-color: #5f7498; background: #182540; }
.secondary:hover { background: #253754; }
.secondary small { color: #c1cce1; }
.install-link { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem; color: var(--muted); font-size: .88rem; text-underline-offset: .24em; }
.install-link:hover { color: var(--gold); }

.orbit-illustration { position: relative; width: min(100%, 580px); aspect-ratio: 560 / 510; justify-self: end; }
.orbit-lines { position: absolute; width: 100%; height: 100%; stroke: #7aa6db66; stroke-width: 1.2; }
.orbit-lines .grid { stroke: #7497c725; }
.orbit-lines ellipse:nth-of-type(2) { stroke: #9fb9e752; stroke-dasharray: 4 7; }
.orbit-lines .orbit-frame { stroke: #8eaed4a0; }
.orbit-lines .orbit-cross { stroke: #d9e8ff90; }
.orbit-coordinate, .orb span { position: absolute; color: #c6d4eb; font: 600 clamp(.56rem, 1vw, .7rem)/1.2 var(--mono); letter-spacing: .1em; }
.orbit-coordinate-top { top: 6%; left: 13%; }
.orbit-coordinate-bottom { bottom: 5%; right: 9%; }
.orb { position: absolute; }
.orb img { width: 100%; height: auto; }
.orb span { left: 50%; top: 100%; transform: translateX(-50%); }
.orb-earth { width: 49%; top: 22%; left: 25%; }
.orb-earth img { filter: drop-shadow(0 0 29px #5899fb65); }
.orb-moon { width: 19%; top: 13%; right: 7%; }
.orb-moon img { filter: drop-shadow(0 0 13px #b3caeb50); }
.orb-mars { width: 17%; bottom: 17%; left: 8%; }
.orb-mars img { filter: drop-shadow(0 0 19px #ff884557); }

.worlds { padding-block: clamp(3rem, 6vw, 5rem); }
.section-heading h2 { font-size: clamp(2rem, 4.1vw, 3.3rem); line-height: 1.1; letter-spacing: -.05em; }
.world-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.8rem; }
.world { --glow: #203e61; position: relative; padding: 1.35rem 1.4rem 1.55rem; border: 1px solid var(--line); border-radius: 8px; background: radial-gradient(ellipse at 3% 0%, var(--glow), transparent 72%), var(--surface); }
.world.moon { --glow: #30394f; }
.world.mars { --glow: #493442; }
.world img { width: 66px; height: 66px; margin: 0 0 .6rem -.2rem; }
.world-index { position: absolute; right: 1.4rem; top: 1.2rem; margin: 0; color: var(--muted); font: .8rem var(--mono); }
h3 { font-size: 1.23rem; line-height: 1.3; }
.world p:not(.world-index), .install p:not(.eyebrow) { margin: .55rem 0 0; color: var(--muted); line-height: 1.6; }

.install { border-block: 1px solid var(--line); background: #0d172b; }
.install-inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 5vw, 5rem); padding-block: clamp(2.75rem, 6vw, 4.75rem); }
.install .section-heading p:not(.eyebrow) { max-width: 28rem; margin-top: .9rem; }
.install-steps { list-style: none; margin: 0; padding: 0; counter-reset: install; }
.install-steps li { display: grid; grid-template-columns: 2.1rem 1fr; gap: .85rem; padding: .95rem 0; border-top: 1px solid var(--line); counter-increment: install; }
.install-steps li:first-child { padding-top: 0; border-top: 0; }
.install-steps li:last-child { padding-bottom: 0; }
.install-steps li::before { content: counter(install, decimal-leading-zero); display: grid; place-items: center; height: 2.1rem; color: var(--gold); border: 1px solid #786b4f; border-radius: 4px; font: 650 .75rem var(--mono); }
.install-steps strong { color: var(--ink); }
.footer { padding-block: 1.3rem; }
.footer p, .footer-link { margin: 0; color: var(--muted); font-size: .8rem; }
.footer-link { text-underline-offset: .2em; }

@media (max-width: 850px) {
  .hero-inner { min-height: auto; grid-template-columns: 1fr .78fr; }
  .hero-copy { padding-block: .5rem; }
  .world { padding-inline: 1.05rem; }
}

@media (max-width: 660px) {
  .shell { width: min(100% - 2rem, 1200px); }
  .hero-inner { grid-template-columns: 1fr; gap: .7rem; padding-block: 2.6rem 1.5rem; }
  .orbit-illustration { width: min(100%, 395px); justify-self: center; }
  .world-grid, .install-inner { grid-template-columns: 1fr; }
  .world { padding: 1rem 1.25rem 1.25rem; }
  .footer { flex-wrap: wrap; gap: .65rem 1rem; }
}

@media (max-width: 395px) {
  .header-inner { gap: .55rem; }
  .header-inner .brand img { width: 23px; height: 23px; }
  nav { gap: .58rem; }
  nav a { font-size: .8rem; }
  nav .nav-download { padding: .42rem .5rem; }
  h1 { font-size: clamp(2.7rem, 12.5vw, 3.1rem); }
  .download-button { width: 100%; }
}