:root {
  color-scheme:dark;
  --bg:#080c10;
  --white:#eeeae2;
  --muted:#8c949b;
  --accent:#e7bc83
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--bg);
  color:var(--white);
  font-family:'Space Grotesk',sans-serif;
  min-height:100svh;
  isolation:isolate;
  overflow-x:hidden
}
body::after {
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:5;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.8' d='M0 0h180v180H0z'/%3E%3C/svg%3E")
}
header,footer {
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0 5.5vw
}
header {
  height:116px;
  border-bottom:1px solid #ffffff12
}
.brand {
  color:var(--white);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:13px;
  font-size:18px;
  letter-spacing:-.7px
}
.brand svg {
  width:35px;
  fill:none;
  stroke:var(--accent);
  stroke-width:1
}
.brand svg .satellite {
  fill:var(--accent);
  stroke:var(--bg)
}
.brand-number {
  color:var(--accent);
  margin-left:2px
}
.motion-toggle {
  width:38px;
  height:38px;
  border:1px solid #ffffff25;
  border-radius:50%;
  background:transparent;
  color:var(--muted);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:color .2s,border-color .2s
}
.motion-toggle:hover {
  color:var(--white);
  border-color:var(--accent)
}
.motion-toggle:focus-visible,.brand:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:6px
}
.motion-toggle svg {
  width:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5
}
.play-icon {
  display:none
}
body.paused .pause-icon {
  display:none
}
body.paused .play-icon {
  display:block
}
main {
  position:relative;
  min-height:calc(100svh - 202px);
  display:flex;
  align-items:center;
  padding:80px 9vw 100px;
  overflow:hidden
}
.hero-copy {
  position:relative;
  z-index:2;
  width:100%
}
.eyebrow {
  display:flex;
  gap:12px;
  align-items:center;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:3px;
  color:#adb2b7;
  margin-bottom:40px
}
.signal {
  width:5px;
  height:5px;
  background:var(--accent);
  box-shadow:0 0 12px #e7bc8380;
  border-radius:50%
}
.eyebrow-line {
  height:1px;
  width:65px;
  background:#ffffff25;
  margin-left:10px
}
h1 {
  font-weight:400;
  font-size:clamp(64px,10.4vw,168px);
  line-height:1;
  letter-spacing:-.075em;
  margin:0;
  white-space:nowrap
}
.number {
  position:relative;
  display:inline-block;
  color:var(--accent);
  margin-left:.1em;
  font-weight:400
}
.number-orbit {
  position:absolute;
  inset:-15% -28%;
  width:155%;
  height:130%;
  fill:none;
  stroke:#e7bc8370;
  stroke-width:.7;
  overflow:visible
}
.number-orbit circle {
  fill:var(--accent);
  stroke:none
}
.tagline {
  font-size:clamp(24px,3vw,44px);
  line-height:1.35;
  letter-spacing:-1.2px;
  margin:43px 0 0;
  font-weight:400
}
.tagline span {
  color:var(--muted)
}
.cosmos {
  position:absolute;
  width:min(65vw,900px);
  height:min(65vw,900px);
  right:-12vw;
  top:50%;
  transform:translateY(-40%);
  z-index:0;
  pointer-events:none
}
.planet {
  position:absolute;
  inset:20%;
  border-radius:50%;
  background:radial-gradient(circle at 28% 20%,#a8c4c6 0%,#526c77 14%,#293f4b 32%,#14232e 48%,#070d13 68%);
  box-shadow:inset 3px 3px 4px #c7edec70,inset 17px 8px 25px #6ea8b22b,-5px -4px 18px #90e1ee25,35px 40px 80px #000;
  overflow:hidden
}
.planet::after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  background:radial-gradient(circle at 80% 72%,#05090ff2 0%,#05090f70 40%,transparent 68%)
}
.planet-texture {
  position:absolute;
  inset:-50%;
  opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.022 .065' numOctaves='5' seed='42'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath d='M0 0h400v400H0z' filter='url(%23t)' opacity='.7'/%3E%3C/svg%3E");
  background-size:100% 100%;
  transform:rotate(-25deg)
}
.planet-halo {
  position:absolute;
  inset:10%;
  background:radial-gradient(ellipse at 35% 30%,#70aabf20,transparent 64%);
  filter:blur(25px)
}
.orbit {
  position:absolute;
  border:1px solid #b6c7d221;
  border-radius:50%;
  inset:4%;
  transform:rotate(-32deg) scaleY(.52)
}
.orbit-two {
  inset:-5%;
  transform:rotate(38deg) scaleY(.66);
  border-color:#b6c7d210
}
.orbit-one i {
  position:absolute;
  top:16%;
  left:13%;
  height:7px;
  width:7px;
  background:var(--accent);
  border-radius:50%;
  box-shadow:0 0 16px #e7bc8350
}
.small-star {
  position:absolute;
  width:3px;
  height:3px;
  top:12%;
  left:37%;
  background:#eaf7ff;
  box-shadow:0 0 8px 2px #eaf7ff50
}
.crosshair {
  position:absolute;
  width:14px;
  height:14px;
  opacity:.35
}
.crosshair::before,.crosshair::after {
  content:'';
  position:absolute;
  background:#b9c6d0
}
.crosshair::before {
  width:1px;
  height:14px;
  left:7px
}
.crosshair::after {
  width:14px;
  height:1px;
  top:7px
}
.crosshair-one {
  left:8%;
  bottom:22%
}
.crosshair-two {
  right:15%;
  top:17%
}
.starfield {
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none
}
.star {
  position:absolute;
  border-radius:50%;
  background:#d9e5ec;
  opacity:var(--opacity);
  animation:twinkle var(--duration) ease-in-out infinite alternate
}
.nebula {
  position:fixed;
  inset:0;
  z-index:-1;
  background:radial-gradient(ellipse at 80% 55%,#233d4e28,transparent 55%),radial-gradient(ellipse at 15% 0%,#8472540b,transparent 50%);
  pointer-events:none
}
footer {
  min-height:86px;
  border-top:1px solid #ffffff12;
  color:var(--muted);
  font-size:10px;
  letter-spacing:1px
}
footer>span {
  flex:1
}
.footer-domain {
  text-align:right
}
.footer-mark {
  width:22px;
  fill:none;
  stroke:var(--accent);
  stroke-width:.7
}
.frame {
  position:fixed;
  inset:20px;
  pointer-events:none;
  z-index:4
}
.frame span {
  position:absolute;
  width:7px;
  height:7px;
  border-color:#e7bc8360;
  border-style:solid
}
.frame span:nth-child(1) {
  left:0;
  top:0;
  border-width:1px 0 0 1px
}
.frame span:nth-child(2) {
  right:0;
  top:0;
  border-width:1px 1px 0 0
}
.frame span:nth-child(3) {
  left:0;
  bottom:0;
  border-width:0 0 1px 1px
}
.frame span:nth-child(4) {
  right:0;
  bottom:0;
  border-width:0 1px 1px 0
}
.cosmos {
  animation:drift 18s ease-in-out infinite alternate
}
@keyframes drift {
  to {
    transform:translateY(-42%) rotate(3deg)
  }
}
@keyframes twinkle {
  to {
    opacity:calc(var(--opacity) * .35)
  }
}
body.paused * {
  animation-play-state:paused!important
}
@media(min-width:1600px) {
  main {
    padding-left:12vw
  }
}
@media(max-width:700px) {
  header {
    height:90px;
    margin:0 7vw
  }
  .brand {
    font-size:16px
  }
  main {
    min-height:calc(100svh - 170px);
    padding:80px 8vw 230px;
    align-items:flex-start
  }
  h1 {
    font-size:clamp(42px,11.5vw,80px)
  }
  .eyebrow {
    margin-bottom:30px;
    font-size:9px
  }
  .tagline {
    font-size:28px;
    margin-top:30px
  }
  .cosmos {
    width:530px;
    height:530px;
    right:-240px;
    top:auto;
    bottom:-210px;
    transform:translateY(0);
    animation-name:mobile-drift
  }
  .planet {
    inset:22%
  }
  footer {
    margin:0 7vw;
    min-height:80px;
    font-size:8px;
    letter-spacing:.3px
  }
  .footer-mark {
    width:18px
  }
  .frame {
    inset:12px
  }
  @keyframes mobile-drift {
    to {
      transform:translateY(-8px) rotate(3deg)
    }
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
}
/* An ancient machine suspended in a celestial instrument. */
.oracle {
  position: absolute;
  width: 76%;
  height: 88%;
  object-fit: contain;
  left: 12%;
  top: 5%;
  filter: drop-shadow(-8px -4px 28px #a9c6ad15);
}
.cosmos {
  right: -7vw;
  transform: translateY(-45%);
}
.planet-halo {
  background: radial-gradient(ellipse at 45% 35%, #a68e5524, transparent 65%);
}
.orbit-one {
  border-color: #c5a56a40;
}
.orbit-two {
  border-color: #c5a56a20;
}
.tagline {
  font-family: Georgia, 'Times New Roman', serif;
  letter-spacing: -.035em;
}
.tagline span {
  font-family: 'Space Grotesk', sans-serif;
  font-size: .8em;
  letter-spacing: -.025em;
}
@media (max-width: 700px) {
  .cosmos {
    width: 450px;
    height: 450px;
    right: -150px;
    bottom: -145px;
    transform: none;
  }
  main {
    padding-bottom: 270px;
  }
  .oracle {
    width: 82%;
    left: 9%;
  }
}
.space-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.scene-ready .space-canvas {
  opacity: 1;
}
.scene-ready .oracle,
.scene-ready .orbit {
  visibility: hidden;
}
.scene-ready {
  animation: none;
}
/* Frame the oversized robot around its head and upper torso. */
@media (min-width: 701px) {
  h1 { font-size: clamp(64px, 9vw, 145px); }
  .cosmos {
    width: min(135vw, 1875px);
    height: min(135vw, 1875px);
    right: -32.5vw;
    transform: translateY(-30%);
  }
}