:root {
  color-scheme: dark;
  --bg: #050608;
  --panel: rgba(12, 15, 18, 0.78);
  --fg: #eef2e8;
  --muted: #8d9687;
  --faint: #3f493e;
  --signal: #b7ff58;
  --signal-soft: #77d7b1;
  --rule: rgba(183, 255, 88, 0.17);
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--signal); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--signal); color: var(--bg); }

.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;
}

/* Landing page */
.landing {
  isolation: isolate;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 72% 15%, rgba(59, 116, 88, 0.13), transparent 31rem),
    linear-gradient(180deg, #07090b 0%, var(--bg) 68%);
}
.landing::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 80%);
}
#signal-field {
  position: fixed;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  pointer-events: none;
}
.scanline {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .035;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 3px, #fff 4px);
}
.site-header,
.landing-footer {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.site-header { min-height: 96px; border-bottom: 1px solid var(--rule); }
.brand { color: var(--fg); font-size: .9rem; font-weight: 700; letter-spacing: -.02em; }
.brand:hover { text-decoration: none; }
.brand > span { color: var(--signal); }
.system-status { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--muted); }
.status-light {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 12px var(--signal);
  animation: breathe 2.4s ease-in-out infinite;
}
.hero {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  min-height: calc(100vh - 96px);
  padding: clamp(54px, 8vw, 112px) 0 74px;
}
.eyebrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: clamp(28px, 5vw, 60px);
  color: var(--muted);
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .14em;
}
.coordinates { color: var(--faint); }
.ascii-logo {
  width: max-content;
  max-width: 100%;
  margin: 0 0 clamp(44px, 6vw, 76px);
  color: #cbd8c3;
  font-family: var(--mono);
  font-size: clamp(.68rem, 1.18vw, .92rem);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: .015em;
  white-space: pre;
  filter: drop-shadow(0 0 28px rgba(183,255,88,.08));
  user-select: none;
}
.ascii-logo .code-line { display: block; min-height: 1.42em; }
.ascii-logo .code-line::before {
  content: attr(data-line);
  display: inline-block;
  width: 3.8ch;
  margin-right: 1.6ch;
  color: #364138;
  font-size: .78em;
  text-align: right;
}
.ascii-logo .glyph {
  display: inline-block;
  min-width: .61em;
  transition: color 160ms ease, text-shadow 160ms ease, transform 180ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.ascii-logo .syntax-string { color: var(--signal-soft); }
.hero-copy {
  display: grid;
  grid-template-columns: minmax(280px, 1.2fr) minmax(260px, .8fr);
  gap: clamp(32px, 8vw, 112px);
  align-items: end;
  max-width: 1000px;
}
.lede {
  margin: 0;
  font-size: clamp(2rem, 4.8vw, 4.7rem);
  line-height: .98;
  letter-spacing: -.055em;
  font-weight: 400;
}
.lede span,
.lede strong { display: block; }
.lede strong { color: var(--signal); font-weight: 580; }
.intro { max-width: 35rem; margin: 0 0 .25rem; color: var(--muted); font-size: clamp(.95rem, 1.4vw, 1.1rem); }
.actions { display: flex; gap: 12px; margin-top: clamp(38px, 6vw, 68px); }
.action {
  min-width: 184px;
  min-height: 52px;
  padding: 0 18px;
  border: 1px solid #313932;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  color: var(--fg);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}
.action:hover { border-color: var(--signal); background: rgba(183,255,88,.05); text-decoration: none; transform: translateY(-2px); }
.action:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
.action-primary { background: var(--signal); border-color: var(--signal); color: #11170d; font-weight: 700; }
.action-primary:hover { background: #c5ff7c; color: #11170d; }
.recon-terminal {
  --scope-x: 50%;
  --scope-y: 50%;
  max-width: 980px;
  margin: clamp(72px, 11vw, 142px) 0 20px auto;
  border: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(10, 14, 14, .94), rgba(5, 8, 10, .9));
  box-shadow: 0 30px 100px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.025);
  font-family: var(--mono);
  font-size: .7rem;
  scroll-margin-top: 24px;
  backdrop-filter: blur(12px);
}
.recon-terminal::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--signal), transparent);
  opacity: .55;
}
.terminal-bar {
  min-height: 38px;
  padding: 0 13px;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 70px 1fr auto;
  align-items: center;
  gap: 12px;
  color: var(--faint);
  font-size: .62rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.terminal-lights { display: flex; gap: 6px; }
.terminal-lights i { width: 7px; height: 7px; border-radius: 50%; background: #384039; }
.terminal-lights i:first-child { background: #ff5f56; box-shadow: 0 0 10px rgba(255,95,86,.45); }
.terminal-lights i:nth-child(2) { background: #d6a83f; }
.terminal-lights i:last-child { background: var(--signal); }
.terminal-bar > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.terminal-state { display: flex; align-items: center; gap: 8px; color: #ff7b72; white-space: nowrap; }
.terminal-state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 11px currentColor; animation: breathe 1s ease-in-out infinite; }
.recon-terminal[data-state="complete"] .terminal-state { color: var(--signal); }
.recon-command,
.terminal-result { margin: 0; color: #758071; }
.recon-command { padding: 17px 20px 15px; border-bottom: 1px solid rgba(255,255,255,.04); }
.recon-command > span:first-child,
.terminal-result > span:first-child { margin-right: 9px; color: var(--signal); }
.recon-command .cursor { margin-left: 3px; }
.route-map {
  padding: 20px;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: minmax(130px, 1fr) 70px minmax(180px, 1.35fr) 70px minmax(130px, 1fr);
  align-items: center;
}
.route-node {
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid rgba(183,255,88,.16);
  position: relative;
  background: rgba(183,255,88,.025);
}
.route-node::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: 6px;
  height: 6px;
  border: 1px solid var(--signal);
  background: var(--bg);
}
.route-client { border-color: rgba(255,95,86,.3); }
.route-client::before { border-color: #ff5f56; box-shadow: 0 0 12px rgba(255,95,86,.6); }
.route-node span { display: block; margin-bottom: 4px; color: #596359; font-size: .55rem; letter-spacing: .1em; }
.route-node strong { display: block; overflow-wrap: anywhere; color: #bac8b4; font-size: .64rem; font-weight: 500; }
.route-client strong { color: #ff8a82; font-size: .78rem; letter-spacing: .05em; }
.route-link { min-width: 0; text-align: center; color: #4f594f; font-size: .46rem; letter-spacing: .04em; }
.route-link i { display: block; height: 1px; position: relative; overflow: hidden; background: #313b32; }
.route-link i::after { content: ""; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, var(--signal), transparent); animation: route-pulse 2s linear infinite; }
.route-link span { display: block; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recon-layout { display: grid; grid-template-columns: minmax(0, 1fr) 238px; }
.telemetry-stream { min-width: 0; margin: 0; padding: 11px 0; border-right: 1px solid var(--rule); }
.telemetry-stream > div {
  min-width: 0;
  min-height: 31px;
  padding: 6px 18px;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  transition: background 150ms ease;
}
.telemetry-stream > div:hover { background: rgba(183,255,88,.035); }
.telemetry-stream dt { color: #596159; font-size: .57rem; letter-spacing: .04em; text-transform: uppercase; }
.telemetry-stream dt span { display: inline-block; width: 27px; color: #313b32; }
.telemetry-stream dd { min-width: 0; margin: 0; color: var(--signal-soft); font-size: .64rem; overflow-wrap: anywhere; }
.telemetry-stream .telemetry-agent { padding-top: 10px; margin-top: 5px; border-top: 1px solid rgba(255,255,255,.04); }
.telemetry-agent dd { color: #697369; font-size: .57rem; line-height: 1.35; }
.recon-instruments { min-width: 0; padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.cursor-scope {
  width: 100%;
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(183,255,88,.14);
  background:
    linear-gradient(rgba(183,255,88,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(183,255,88,.055) 1px, transparent 1px),
    radial-gradient(circle, transparent 0 24%, rgba(183,255,88,.06) 24.5% 25%, transparent 25.5% 49%, rgba(183,255,88,.07) 49.5% 50%, transparent 50.5%),
    rgba(3,8,7,.65);
  background-size: 24px 24px, 24px 24px, 100% 100%, auto;
}
.scope-ring { position: absolute; inset: 18%; border: 1px dashed rgba(183,255,88,.16); border-radius: 50%; animation: scope-spin 14s linear infinite; }
.scope-crosshair::before,
.scope-crosshair::after { content: ""; position: absolute; background: rgba(183,255,88,.12); }
.scope-crosshair::before { left: var(--scope-x); top: 0; bottom: 0; width: 1px; }
.scope-crosshair::after { top: var(--scope-y); left: 0; right: 0; height: 1px; }
.scope-target {
  position: absolute;
  left: var(--scope-x);
  top: var(--scope-y);
  width: 9px;
  height: 9px;
  border: 1px solid #ff5f56;
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 13px rgba(255,95,86,.55);
  transition: left 70ms linear, top 70ms linear;
}
.scope-target::after { content: ""; position: absolute; inset: -6px; border: 1px solid rgba(255,95,86,.2); }
.scope-axis { position: absolute; color: #344035; font-size: .48rem; }
.scope-axis-x { right: 5px; top: calc(var(--scope-y) - 9px); }
.scope-axis-y { left: calc(var(--scope-x) + 5px); top: 3px; }
.cursor-scope b { position: absolute; left: 9px; bottom: 8px; color: #ff7b72; font-size: .55rem; font-weight: 500; letter-spacing: .05em; }
.cursor-scope small { position: absolute; right: 9px; bottom: 8px; color: #394339; font-size: .47rem; }
.signal-instrument,
.fingerprint-instrument { padding-top: 12px; border-top: 1px solid var(--rule); }
.signal-instrument > div:first-child { display: flex; align-items: center; justify-content: space-between; color: #596159; font-size: .52rem; letter-spacing: .08em; }
.signal-instrument strong { color: var(--signal); font-weight: 500; }
.signal-bars { height: 38px; margin-top: 9px; display: flex; align-items: end; gap: 5px; }
.signal-bars i { flex: 1; height: calc(8px + var(--bar, 0) * 5px); border: 1px solid #354035; background: rgba(183,255,88,.025); }
.signal-bars i:nth-child(1) { --bar: 0; }
.signal-bars i:nth-child(2) { --bar: 1; }
.signal-bars i:nth-child(3) { --bar: 2; }
.signal-bars i:nth-child(4) { --bar: 3; }
.signal-bars i:nth-child(5) { --bar: 4; }
.signal-bars i:nth-child(6) { --bar: 5; }
.signal-bars i.active { border-color: rgba(183,255,88,.45); background: linear-gradient(to top, rgba(183,255,88,.15), rgba(183,255,88,.6)); box-shadow: 0 0 10px rgba(183,255,88,.08); }
.fingerprint-instrument > span { display: block; color: #596159; font-size: .52rem; letter-spacing: .08em; }
.fingerprint-instrument > strong { display: block; margin: 5px 0 11px; color: #ff7b72; font-size: .72rem; font-weight: 500; letter-spacing: .13em; overflow-wrap: anywhere; }
.fingerprint-bars { height: 38px; display: flex; align-items: center; gap: 3px; }
.fingerprint-bars i { flex: 1; min-width: 2px; background: #ff7b72; box-shadow: 0 0 7px rgba(255,123,114,.15); opacity: var(--alpha, .5); }
.terminal-result { padding: 13px 20px 15px; border-top: 1px solid var(--rule); font-size: .62rem; }
.terminal-result b { color: var(--signal); font-weight: 500; }
.cursor { color: var(--signal); animation: blink 1s steps(1) infinite; }
.landing-footer { min-height: 98px; border-top: 1px solid var(--rule); color: var(--faint); }
.landing-footer p { margin: 0; }
.landing-footer nav { display: flex; gap: 22px; }
.landing-footer a { color: var(--muted); }

/* Simple content pages */
body:not(.landing) {
  max-width: 46rem;
  margin: 0 auto;
  padding: 4rem 1.5rem 2rem;
  background: #090b0d;
}
body:not(.landing) h1 { margin: 0 0 .4rem; font-size: clamp(2rem, 6vw, 3.5rem); letter-spacing: -.05em; }
body:not(.landing) h2 { margin: 2.2rem 0 .5rem; font-size: 1.1rem; }
body:not(.landing) .tagline { color: var(--muted); margin-top: 0; font-family: var(--mono); font-size: .8rem; }
body:not(.landing) section { margin-top: 2rem; color: #c7cdc3; }
body:not(.landing) footer { margin-top: 4rem; padding-top: 1rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: .85rem; }

@keyframes blink { 50% { opacity: 0; } }
@keyframes breathe { 50% { opacity: .45; box-shadow: 0 0 5px var(--signal); } }
@keyframes route-pulse { from { transform: translateX(-120%); } to { transform: translateX(350%); } }
@keyframes route-pulse-mobile { from { transform: translateY(-120%); } to { transform: translateY(350%); } }
@keyframes scope-spin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .site-header, .landing-footer, .hero { width: min(100% - 30px, 1180px); }
  .site-header { min-height: 76px; }
  .hero { min-height: auto; padding-top: 50px; }
  .coordinates, .system-status { display: none; }
  .ascii-logo { font-size: clamp(.5rem, 2.2vw, .72rem); margin-bottom: 44px; }
  .hero-copy { grid-template-columns: 1fr; gap: 26px; }
  .lede { max-width: 100%; font-size: clamp(2.35rem, 10.8vw, 3.35rem); letter-spacing: -.06em; }
  .intro { max-width: 30rem; }
  .actions { flex-direction: column; }
  .action { width: 100%; }
  .recon-terminal { margin-top: 76px; }
  .route-map { grid-template-columns: 1fr; gap: 0; }
  .route-link { width: 1px; height: 30px; margin: 0 auto; position: relative; }
  .route-link i { width: 1px; height: 100%; }
  .route-link i::after { width: 1px; height: 35%; animation-name: route-pulse-mobile; }
  .route-link span { position: absolute; left: 8px; top: 7px; width: 80px; margin: 0; text-align: left; }
  .recon-layout { grid-template-columns: 1fr; }
  .telemetry-stream { border-right: 0; border-bottom: 1px solid var(--rule); }
  .recon-instruments { display: grid; grid-template-columns: minmax(130px, .9fr) minmax(0, 1.1fr); align-items: start; }
  .cursor-scope { grid-row: 1 / 3; }
  .cursor-scope small { display: none; }
  .fingerprint-instrument > strong { font-size: .59rem; }
  .landing-footer { align-items: flex-start; padding: 26px 0; min-height: 0; }
}

@media (pointer: coarse) {
  .scope-target { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  #signal-field { opacity: .25; }
}