:root {
  color-scheme: dark;
  --bg: #080a0b;
  --white: #e9e9e5;
  --muted: #7d8385;
  --orange: #ff641f;
  --cyan: #9caeae;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body { margin: 0; color: var(--white); }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--orange); outline-offset: 8px; }
.site-shell {
  position: relative;
  min-height: 100svh;
  padding: 0 4.4%;
  overflow: hidden;
  isolation: isolate;
  background-image: linear-gradient(#ffffff03 1px, transparent 1px), linear-gradient(90deg, #ffffff03 1px, transparent 1px);
  background-size: 72px 72px;
}
.site-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 76% 48%, #ff641f08, transparent 47%), linear-gradient(110deg, #080a0b 10%, transparent 60%);
}
.site-shell::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0px, transparent 3px, #00000012 4px);
  opacity: .45;
  z-index: 3;
}
.masthead { height: 112px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid #ffffff1c; }
.wordmark { font-family: Arial, Helvetica, sans-serif; font-size: 36px; font-weight: 800; letter-spacing: -2.7px; color: var(--white); text-decoration: none; }
.wordmark-dot { color: var(--orange); }
.wordmark-cursor { color: var(--orange); font-weight: 400; margin-left: 3px; }
.header-coordinate, .system-label { font-size: 9px; line-height: 1.8; letter-spacing: 1.3px; }
.header-coordinate { color: #a5a8a7; margin-left: auto; margin-right: 12%; }
.header-coordinate span, .version { color: #60676a; }
.system-label { display: flex; align-items: center; gap: 10px; }
.status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 10px #ff641f66; }
.version { margin-left: 12px; }
.hero { min-height: calc(100svh - 191px); position: relative; display: flex; align-items: center; padding: 65px 0 125px; }
.hero-copy { position: relative; z-index: 2; width: 68%; pointer-events: none; }
.eyebrow { display: flex; align-items: center; gap: 15px; font-size: 10px; letter-spacing: 2px; color: #acafae; margin-bottom: 31px; }
.small-cross { font-size: 21px; color: var(--orange); font-weight: 300; }
.eyebrow-rule { width: 39px; height: 1px; background: #515758; }
h1 { margin: 0; font-weight: 900; }
.headline { display: block; font-family: Impact, "Arial Narrow", "Helvetica Neue", sans-serif; font-stretch: condensed; font-weight: 900; font-size: clamp(64px, 8.1vw, 142px); line-height: .96; letter-spacing: -.045em; }
.phrase-line { color: var(--orange); display: block; font-size: .99em; min-height: 1.03em; white-space: nowrap; margin-top: 6px; }
.phrase-line[data-long="true"] { font-size: .68em; line-height: 1.51; }
.text-cursor { font-family: Arial, sans-serif; font-weight: 300; font-size: .7em; line-height: 1; animation: blink 1s steps(2, jump-none) infinite; }
.hero-signature { display: flex; align-items: center; gap: 16px; margin-top: 35px; font-family: Arial, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 4px; }
.signature-line { width: 31px; height: 1px; background: var(--orange); }
.signature-dot { color: var(--orange); }
.terminal { display: flex; align-items: center; gap: 11px; color: #737c7e; margin-top: 47px; font-size: 10px; letter-spacing: .3px; }
.terminal-prompt { color: var(--orange); }
.terminal-block { display: inline-block; width: 5px; height: 10px; background: #76817f; animation: blink 1.5s steps(2, jump-none) infinite; }
.signal-visual { position: absolute; width: 56%; max-width: calc(100svh - 250px); aspect-ratio: 1; right: -3.3%; top: 50%; transform: translateY(-50%); z-index: 1; }
#signal { display: block; width: 100%; height: 100%; }
.visual-top, .visual-bottom { position: absolute; left: 15%; right: 10%; display: flex; justify-content: space-between; gap: 10px; font-size: 8px; letter-spacing: 1px; line-height: 1.9; }
.visual-top { top: 3%; }
.visual-bottom { bottom: 3%; }
.cyan { color: var(--cyan); }
.orange { color: var(--orange); }
.muted { color: #676f70; }
.visual-axis { position: absolute; left: 52%; transform: translateX(-50%); font-size: 7px; color: #677072; letter-spacing: 1px; }
.axis-top { top: 12%; }
.axis-bottom { bottom: 12%; }
.orbital-label { position: absolute; right: 3%; top: 65%; font-size: 7px; line-height: 1.9; letter-spacing: .7px; padding: 8px 0 8px 10px; border-left: 1px solid #ff641f66; background: #080a0bd9; }
.hero-index { position: absolute; bottom: 42px; left: 0; display: flex; align-items: center; gap: 12px; color: #61696b; font-size: 10px; }
.index-active { color: var(--orange); }
.index-divider { display: inline-block; width: 65px; height: 1px; background: #363c3e; }
.index-caption { margin-left: 25px; letter-spacing: 2px; font-size: 8px; }
.footer { min-height: 79px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #ffffff1c; gap: 20px; }
.footer-brand { font-size: 8px; color: #939b9c; letter-spacing: 1px; }
.footer-slash { color: #434b4d; padding: 0 13px; }
.motion-toggle { color: #a6adad; padding: 12px 0 12px 12px; border: 0; background: none; cursor: pointer; font-size: 8px; letter-spacing: 1.5px; display: flex; align-items: center; gap: 13px; }
.motion-toggle:hover { color: var(--orange); }
#motion-icon { color: var(--orange); font-size: 12px; }
.frequency { display: flex; align-items: center; gap: 3px; height: 24px; margin-left: auto; margin-right: 9%; }
.frequency span { width: 2px; height: 5px; background: #727f7c; animation: frequency 1.6s ease-in-out infinite alternate; }
.frequency span:nth-child(3n) { height: 16px; animation-delay: -.4s; }
.frequency span:nth-child(4n) { height: 10px; animation-delay: -.8s; }
.frequency span:nth-child(5n) { height: 23px; background: var(--orange); animation-delay: -1.2s; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@keyframes blink { to { opacity: .15; } }
@keyframes frequency { to { transform: scaleY(.3); opacity: .5; } }
@media (min-width: 1700px) { .hero-copy { width: 70%; } .headline { font-size: 9vw; } }
@media (max-width: 1100px) {
  .header-coordinate { margin-right: 3%; }
  .version { display: none; }
  .hero { min-height: calc(100svh - 175px); }
  .masthead { height: 96px; }
  .headline { font-size: 8.5vw; }
  .signal-visual { width: 58%; right: -7%; }
  .visual-top, .visual-bottom { font-size: 7px; }
}
@media (max-width: 700px) {
  .site-shell { padding: 0 7%; }
  .masthead { height: 86px; }
  .wordmark { font-size: 31px; }
  .header-coordinate { display: none; }
  .system-label { font-size: 7px; letter-spacing: .7px; gap: 7px; }
  .hero { display: block; min-height: 760px; padding: 58px 0 90px; }
  .hero-copy { width: 100%; }
  .eyebrow { font-size: 8px; letter-spacing: 1.4px; gap: 11px; margin-bottom: 27px; }
  .headline { font-size: 13.4vw; line-height: .98; }
  .hero-signature { margin-top: 24px; font-size: 9px; letter-spacing: 2.5px; }
  .terminal { margin-top: 25px; font-size: 8px; }
  .signal-visual { width: 100%; max-width: none; top: auto; bottom: 55px; right: -1%; transform: none; max-height: 350px; }
  .visual-top { top: 2%; font-size: 6px; }
  .visual-bottom { bottom: 1%; font-size: 6px; }
  .orbital-label { right: -2%; font-size: 6px; }
  .hero-index { bottom: 27px; font-size: 8px; }
  .index-caption { font-size: 6px; margin-left: 12px; letter-spacing: 1.3px; }
  .footer { min-height: 82px; gap: 15px; }
  .footer-brand { max-width: 175px; font-size: 7px; line-height: 1.9; }
  .footer-slash { padding: 0 5px; }
  .frequency { display: none; }
  .motion-toggle { font-size: 7px; white-space: nowrap; gap: 8px; }
}
@media (max-width: 380px) { .hero { min-height: 700px; } .signal-visual { bottom: 70px; } .hero-signature { font-size: 8px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }