@font-face {
  font-family:"Instrument Fallback";
  src:local("Menlo"),local("Menlo Regular"),local("DejaVu Sans Mono"),local("Consolas"),local("Liberation Mono");
  size-adjust:99.674%;
  ascent-override:102.334%;
  descent-override:30.098%;
  line-gap-override:0%;
}
h1,.hint { transition:opacity 250ms ease; }
.fonts-pending h1,.fonts-pending .hint { opacity:0; }
@media(prefers-reduced-motion:reduce) {
  h1,.hint { transition:none; }
}
@font-face {
  font-family:Instrument;
  src:url('fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight:400;
  font-display:swap;
}
:root {
  color-scheme:dark;
  background:#030b1c;
  color:#e6f4ff;
  font-family:Instrument,"Instrument Fallback",monospace;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
  min-height:100svh;
  display:grid;
  align-items:center;
  overflow-x:hidden;
}
.space {
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  background:radial-gradient(ellipse at 65% 73%,#16446755,transparent 50%),radial-gradient(ellipse at 25% 30%,#10284455,transparent 65%),#030b1c;
}
.space:after {
  content:'';
  position:absolute;
  inset:-40px;
  background-image:radial-gradient(#438ac54a .6px,transparent .8px);
  background-size:9px 9px;
  opacity:.48;
  animation:raster-drift 32s linear infinite alternate;
  mask-image:radial-gradient(ellipse,black,transparent 80%);
}
.horizon {
  position:absolute;
  left:-50%;
  width:200%;
  background:linear-gradient(#357eb870 1px,transparent 1px),linear-gradient(90deg,#357eb870 1px,transparent 1px);
  background-size:48px 36px;
  transform:perspective(220px) rotateX(58deg);
  mask-image:linear-gradient(transparent,#000,transparent);
  height:46%;
  bottom:-14%;
  opacity:.65;
  animation:grid-drift 28s ease-in-out infinite alternate;
}
main {
  position:relative;
  width:100%;
  padding:10vh 12.8vw;
  padding-top:0;
  padding-bottom:10vh;
}
h1 {
  margin:0;
  font-size:clamp(18px,3.9vw,67px);
  font-weight:400;
  line-height:1.28;
  letter-spacing:-.045em;
  text-shadow:0 0 18px #5bbaff38;
}
h1 span {
  display:block;
  white-space:nowrap;
}
.activity {
  width:100%;
  height:auto;
  margin-top:7vh;
  color:#64caff;
  overflow:visible;
  animation:settle 13s ease-out forwards;
  opacity:1;
}
.trace {
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
}
.scale {
  fill:none;
  stroke:currentColor;
  stroke-width:.6;
  opacity:.78;
}
.pulse {
  fill:none;
  stroke-linecap:round;
  stroke-dasharray:95 905;
  animation:flow 6.45s linear infinite;
  stroke:#8fe7ff;
  stroke-width:3.8;
  filter:none;
}
.hint {
  font-size:11px;
  color:#7b9cb6;
}
@keyframes flow {

  from {
  stroke-dashoffset:0;
}
   to {
  stroke-dashoffset:-1000;
}

}
@media(max-width:600px) {

  main {
  padding:8vh 5vw;
}
   h1 {
  font-size:6.55vw;
  letter-spacing:-.065em;
}
   .activity {
  margin-top:5vh;
}

}
@media(prefers-reduced-motion:reduce) {

  .activity,.pulse {
  animation:none;
}
   .activity {
  opacity:.6;
}
   .pulse {
  display:none;
}

}
.nodes {
  filter:none;
}
/* Atmospheric instruments stay subordinate to the phrase. */
#dust {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.55;
}
.orbit {
  position:absolute;
  border:1px solid #499cbd30;
  border-radius:50%;
  width:120vw;
  height:80vh;
  left:-13vw;
  top:5vh;
  transform:rotate(-22deg);
}
.orbit-b {
  width:85vw;
  height:65vh;
  left:22vw;
  top:40vh;
  opacity:.55;
  transform:rotate(-32deg);
}
.frame {
  position:absolute;
  inset:30px;
  border:1px solid #74c7df12;
  background:linear-gradient(#83cfe766,#83cfe766) left top/22px 1px no-repeat,linear-gradient(#83cfe766,#83cfe766) right bottom/22px 1px no-repeat;
}
.frame:before,.frame:after {
  content:'';
  position:absolute;
  left:0;
  right:0;
  height:5px;
  background:repeating-linear-gradient(90deg,#70b7ce55 0 1px,transparent 1px 32px);
  mask-image:linear-gradient(90deg,black,transparent 35%,transparent 65%,black);
}
.frame:after {
  bottom:0;
}
.radar {
  position:absolute;
  width:150px;
  height:150px;
  right:13%;
  bottom:9%;
  border:1px solid #71bfdc38;
  border-radius:50%;
  background:repeating-radial-gradient(circle,transparent 0 23px,#6bbdd51c 24px 25px,transparent 26px 30px);
  opacity:.65;
}
.radar:before,.radar:after {
  content:'';
  position:absolute;
  background:#82cbe43d;
  left:50%;
  top:-8%;
  width:1px;
  height:116%;
}
.radar:after {
  transform:rotate(90deg);
}
.channel {
  fill:none;
  stroke:#65c7e5;
  stroke-width:.65;
  opacity:.55;
}
@media(max-width:600px) {
 main {
  padding-top:0;
  padding-bottom:5vh;
} .radar {
  width:124px;
  height:124px;
  right:10%;
  bottom:24%;
} .frame {
  inset:16px;
} .orbit {
  width:180vw;
  left:-45vw;
} .horizon {
  height:35%;
} .activity {
  margin-top:7vh;
}
}
body.paused *, body.paused *:before, body.paused *:after {
  animation-play-state:paused!important;
}

/* Fixed glow is rasterized separately from the moving signal. */
.trace { filter:drop-shadow(0 0 3px #46cfff); }
.pulse-1 { stroke-dasharray:55 945; animation-duration:10.2s; animation-delay:-3.3s; opacity:.85; }
.pulse-2 { stroke-dasharray:35 965; animation-duration:14.9s; animation-delay:-9.7s; opacity:.7; }
.nodes circle { animation:node-flash 6.45s linear infinite; }
@keyframes node-flash {
  0%, 10% { fill:#d5faff; opacity:1; }
  18%, 99% { fill:#64caff; opacity:.45; }
}
@keyframes settle {
  0%, 76.9% { opacity:1; }
  100% { opacity:.88; }
}
#dust { will-change:transform; animation:dust-drift 18s linear infinite alternate; }
@keyframes dust-drift { to { transform:translate3d(85px,-38px,0); } }
@media(prefers-reduced-motion:reduce) {
  .activity, .pulse, .nodes circle, #dust, .space:after, .horizon, .channel { animation:none; }
}

/* Depth stays in separate layers; only their transforms and opacity move. */
.space:before {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 62% 66%,#4087a51c,transparent 48%),radial-gradient(ellipse,transparent 35%,#010614aa 100%);
}
.channel { animation:channel-breathe 7s ease-in-out infinite alternate; }
.pulse { filter:drop-shadow(0 0 3px #80dbff88); }
@keyframes raster-drift { to { transform:translate3d(-24px,16px,0); } }
@keyframes grid-drift { to { transform:translate3d(28px,12px,0) perspective(220px) rotateX(58deg); } }
@keyframes channel-breathe { from { opacity:.28; } to { opacity:.8; } }
@media(prefers-reduced-motion:reduce) {
  .channel { animation:none; }
}