:root{
  --void:#0d1117;
  --void-2:#111821;
  --steel:#1b2530;
  --slate:#2d3a46;
  --hairline:rgba(146,166,181,.24);
  --hairline-strong:rgba(182,201,214,.42);
  --fog:#8b9aa5;
  --haze:#c0cad0;
  --bone:#e8eef2;
  --ice:#7ec5e8;
  --ice-dim:#4f91b4;
  --amber:#d1975e;
  --moss:#80b978;
  --rust:#d36f55;
  --font-sans:"Inter Tight", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:"JetBrains Mono", "SFMono-Regular", Consolas, monospace;
}

*{ box-sizing:border-box; }

html{
  background:var(--void);
  color-scheme:dark;
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  color:var(--bone);
  background:
    radial-gradient(ellipse 80% 55% at 63% 40%, rgba(23,41,50,.56), transparent 76%),
    radial-gradient(ellipse 45% 60% at 24% 50%, rgba(18,35,44,.5), transparent 76%),
    radial-gradient(ellipse 120% 90% at 50% 110%, rgba(13,24,31,.55), transparent 70%),
    var(--void);
  background-attachment:fixed;
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:100;
  pointer-events:none;
  opacity:.045;
  mix-blend-mode:overlay;
  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='.86' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:99;
  pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 54%, rgba(4,8,12,.58) 100%);
}

a{ color:inherit; text-decoration:none; }

.topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  display:flex;
  align-items:center;
  height:64px;
  padding:0 40px;
  border-bottom:1px solid var(--hairline);
  background:rgba(4,8,10,.64);
  backdrop-filter:blur(24px);
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  color:var(--bone);
  font-size:13px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.brand svg{
  width:24px;
  height:14px;
  fill:none;
  stroke:var(--ice);
  stroke-width:1.2;
}

.nav-mid{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 auto;
  color:var(--fog);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.pulse,
.hero-eyebrow span,
.live{
  width:6px;
  height:6px;
  border-radius:999px;
  background:var(--moss);
  box-shadow:0 0 12px rgba(128,185,120,.85);
  animation:pulse 2.4s ease-out infinite;
}

@keyframes pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.4; transform:scale(.72); }
}

.nav-right{
  display:flex;
  align-items:center;
  gap:24px;
  color:var(--haze);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.nav-right span{
  width:1px;
  height:16px;
  background:var(--hairline);
}

.nav-right a:hover,
.nav-right a:focus-visible,
.footer a:hover,
.footer a:focus-visible{ color:var(--bone); }

main{
  width:min(1280px, 100%);
  margin:0 auto;
  padding:64px 40px 0;
}

.hero{
  position:relative;
  min-height:calc(100vh - 64px);
  min-height:calc(100svh - 64px);
  display:grid;
  align-content:center;
  padding:92px 0 54px;
}

.hero-bg{
  position:absolute;
  top:-64px;
  bottom:0;
  left:calc(50% - 50vw);
  right:calc(50% - 50vw);
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}

.hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, var(--void) 0%, transparent 13%, transparent 87%, var(--void) 100%),
    linear-gradient(180deg, transparent 0%, rgba(5,8,11,.06) 65%, var(--void) 100%);
}

.hero-bg svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.fog{
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 48% 28% at 78% 34%, rgba(42,66,79,.34), transparent 72%),
    radial-gradient(ellipse 42% 27% at 22% 68%, rgba(25,49,58,.34), transparent 72%);
  animation:drift 22s ease-in-out infinite;
}

@keyframes drift{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-2%,1%) scale(1.04); }
}

.grid-lines{
  fill:none;
  stroke:rgba(146,166,181,.045);
  stroke-width:1;
}

.ridge{
  fill:none;
  stroke:url(#signalLine);
  stroke-width:2;
  opacity:.18;
}

.nodes{
  fill:var(--ice);
  opacity:.45;
}

.sweep{
  stroke:var(--ice);
  stroke-width:1;
  opacity:.5;
  animation:sweep 12s linear infinite;
}

@keyframes sweep{
  from{ transform:translateX(-260px); }
  to{ transform:translateX(1700px); }
}

.hero-eyebrow,
.hero h1,
.hero-sub,
.hero-supporting,
.hero-actions,
.hero-foot{
  position:relative;
  z-index:2;
}

.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:12px;
  width:fit-content;
  margin:0 0 54px;
  color:var(--ice-dim);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.hero-eyebrow::before,
.hero-eyebrow::after{
  content:"";
  height:1px;
  background:var(--hairline);
}

.hero-eyebrow::before{ width:24px; }
.hero-eyebrow::after{ width:96px; }

h1,
h2,
h3,
p{ margin-top:0; }

.hero h1{
  margin:0 0 38px;
  color:transparent;
  background:linear-gradient(180deg, #f5f8fa 0%, #b9c5cc 100%);
  -webkit-background-clip:text;
  background-clip:text;
  font-size:clamp(96px, 11.2vw, 168px);
  font-weight:500;
  line-height:.9;
  letter-spacing:0;
}

.hero-sub{
  margin:0;
  color:var(--bone);
  font-size:28px;
  font-weight:300;
  line-height:1.1;
}

.hero-supporting{
  max-width:620px;
  margin:18px 0 0;
  color:var(--fog);
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.16em;
  line-height:1.55;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:58px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 26px;
  border:1px solid var(--hairline);
  border-radius:0;
  background:rgba(232,238,242,.04);
  color:var(--bone);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.btn.primary{
  border-color:var(--bone);
  background:var(--bone);
  color:var(--void);
}

.btn:hover,
.btn:focus-visible{
  border-color:var(--hairline-strong);
  transform:translateY(-1px);
}

.hero-foot{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:24px;
  width:100%;
  max-width:1200px;
  margin-top:96px;
  padding-top:20px;
  border-top:1px solid rgba(146,166,181,.15);
  background:transparent;
}

.hero-foot > div{
  min-height:auto;
  padding:0 0 0 24px;
  border-left:1px solid rgba(146,166,181,.17);
  background:transparent;
}

.k,
dt{
  color:var(--fog);
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.v,
dd{
  margin:10px 0 0;
  color:var(--bone);
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:500;
}

.section{
  padding:96px 0;
  border-top:1px solid var(--hairline);
}

.section-head{
  display:grid;
  grid-template-columns:120px minmax(0, 1fr);
  gap:36px;
  margin-bottom:44px;
}

.section-num{
  color:var(--ice-dim);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.18em;
}

.section h2{
  margin:0;
  color:var(--bone);
  font-size:46px;
  font-weight:500;
  line-height:1.02;
  letter-spacing:0;
}

.section h2 span{
  color:var(--fog);
  font-weight:300;
}

.section-head p{
  max-width:720px;
  margin:22px 0 0;
  color:var(--fog);
  font-size:17px;
  line-height:1.6;
}

.signals{
  height:470px;
  overflow:hidden;
  border:1px solid var(--hairline);
  border-radius:8px;
  background:linear-gradient(180deg, rgba(21,29,38,.86), rgba(13,17,23,.72));
  mask-image:linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
}

.signal-track{
  animation:scrollSignals 28s linear infinite;
}

@keyframes scrollSignals{
  from{ transform:translateY(0); }
  to{ transform:translateY(-50%); }
}

.signal-row{
  display:grid;
  grid-template-columns:96px minmax(0, 1fr) 150px 112px;
  align-items:center;
  gap:18px;
  min-height:48px;
  padding:0 18px;
  border-bottom:1px solid rgba(146,166,181,.12);
  font-family:var(--font-mono);
  font-size:12px;
}

.ts{ color:var(--ice-dim); }
.msg{ color:var(--haze); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conf{ display:flex; align-items:center; gap:10px; color:var(--bone); }

.conf-bar{
  display:inline-block;
  width:58px;
  height:4px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(146,166,181,.18);
}

.conf-bar i{
  display:block;
  height:100%;
  background:var(--ice);
}

.sev{
  justify-self:end;
  min-width:78px;
  padding:5px 8px;
  border:1px solid rgba(146,166,181,.18);
  border-radius:999px;
  text-align:center;
  color:var(--fog);
  font-size:10px;
  text-transform:uppercase;
}

.sev.elevated{ color:var(--amber); border-color:rgba(209,151,94,.35); }
.sev.critical{ color:var(--rust); border-color:rgba(211,111,85,.42); }
.sev.nominal{ color:var(--moss); border-color:rgba(128,185,120,.32); }

.memory-panel{
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(300px, .65fr);
  gap:1px;
  border:1px solid var(--hairline);
  border-radius:8px;
  overflow:hidden;
  background:var(--hairline);
}

.memory-canvas,
.memory-detail{
  position:relative;
  min-height:520px;
  background:rgba(13,17,23,.74);
}

.memory-canvas{
  padding:34px;
}

.canvas-meta{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--ice-dim);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.live{
  display:inline-block;
  flex:0 0 auto;
}

.axis{
  position:absolute;
  color:var(--fog);
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.axis.y{
  top:50%;
  left:16px;
  transform:rotate(-90deg) translateX(-50%);
  transform-origin:left top;
}

.axis.x{
  right:34px;
  bottom:24px;
}

.memory-canvas svg{
  display:block;
  width:100%;
  height:430px;
  margin-top:24px;
}

.chart-grid line{
  stroke:rgba(146,166,181,.12);
  stroke-width:1;
  stroke-dasharray:2 5;
}

.labels{
  fill:var(--fog);
  font-family:var(--font-mono);
  font-size:11px;
  text-anchor:middle;
}

.labels text:nth-child(-n+4){ text-anchor:end; }

.area{
  fill:rgba(126,197,232,.13);
  stroke:none;
}

.curve{
  fill:none;
  stroke-width:3;
  stroke-linecap:round;
}

.curve.stable{ stroke:var(--ice); }
.curve.drift{ stroke:var(--amber); }

.frontier{
  stroke:rgba(232,238,242,.34);
  stroke-dasharray:4 5;
}

.points circle{ fill:var(--ice); }
.points circle:last-child{ fill:var(--amber); }

.point-labels{
  fill:var(--haze);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.memory-detail{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:34px;
}

.capsule-id{
  margin-bottom:18px;
  color:var(--ice-dim);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.memory-detail h3{
  margin:0;
  color:var(--bone);
  font-size:30px;
  font-weight:500;
  line-height:1.15;
}

.trail{
  display:flex;
  align-items:center;
  gap:9px;
  margin:30px 0;
  flex-wrap:wrap;
  color:var(--haze);
  font-family:var(--font-mono);
  font-size:13px;
}

.trail span{
  padding:7px 8px;
  border:1px solid var(--hairline);
  border-radius:6px;
}

.trail span.now{
  color:var(--ice);
  border-color:rgba(126,197,232,.4);
}

.trail span.down{
  color:var(--amber);
  border-color:rgba(209,151,94,.4);
}

.trail i{
  width:22px;
  height:1px;
  background:var(--hairline-strong);
}

.reason{
  margin:0;
  color:var(--fog);
  font-size:15px;
  line-height:1.65;
}

.reason strong{ color:var(--bone); }

.memory-notes,
.packs{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1px;
  margin-top:1px;
  border:1px solid var(--hairline);
  border-radius:8px;
  overflow:hidden;
  background:var(--hairline);
}

.memory-notes article,
.pack{
  background:linear-gradient(180deg, rgba(27,37,48,.88), rgba(16,23,31,.88));
  padding:26px;
}

.memory-notes h3,
.pack h3{
  margin:0 0 12px;
  color:var(--bone);
  font-size:22px;
  font-weight:500;
}

.memory-notes p,
.pack p{
  margin:0;
  color:var(--fog);
  font-size:15px;
  line-height:1.6;
}

.pack-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  margin-bottom:28px;
  color:var(--ice-dim);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.pack-head b{
  color:var(--moss);
  font-weight:400;
}

.pack.alert .pack-head b{ color:var(--amber); }

.pack dl{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:1px;
  margin:26px 0;
  background:var(--hairline);
}

.pack dl div{
  padding:14px;
  background:rgba(13,17,23,.42);
}

.pack svg{
  display:block;
  width:100%;
  height:34px;
}

.pack polyline{
  fill:none;
  stroke:var(--ice);
  stroke-width:2;
  vector-effect:non-scaling-stroke;
}

.pack.alert polyline{ stroke:var(--amber); }

.footer{
  display:flex;
  justify-content:space-between;
  gap:24px;
  width:min(1280px, 100%);
  margin:0 auto;
  padding:38px 40px;
  border-top:1px solid var(--hairline);
  color:var(--fog);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.footer div{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}

.footer strong{ color:var(--bone); font-weight:500; }

@media (max-width:900px){
  .topbar{
    position:absolute;
    height:auto;
    min-height:64px;
    align-items:flex-start;
    flex-direction:column;
    gap:12px;
    padding:18px 22px;
  }

  .nav-mid{
    margin:0;
  }

  .nav-right{
    flex-wrap:wrap;
    gap:14px;
  }

  main{
    padding:150px 22px 0;
  }

  .hero{
    min-height:auto;
    padding:42px 0 70px;
  }

  .hero h1{
    font-size:74px;
  }

  .hero-sub{
    font-size:28px;
  }

  .hero-foot,
  .memory-panel,
  .memory-notes,
  .packs,
  .section-head{
    grid-template-columns:1fr;
  }

  .memory-canvas,
  .memory-detail{
    min-height:auto;
  }

  .signal-row{
    grid-template-columns:82px minmax(0, 1fr);
    gap:10px;
    padding:10px 14px;
  }

  .conf,
  .sev{
    display:none;
  }

  .footer{
    flex-direction:column;
    padding:30px 22px;
  }
}

@media (max-width:540px){
  main{
    padding-left:16px;
    padding-right:16px;
  }

  .hero h1{
    font-size:54px;
  }

  .hero-sub{
    font-size:24px;
  }

  .hero-supporting,
  .section-head p{
    font-size:16px;
  }

  .section{
    padding:70px 0;
  }

  .section h2{
    font-size:34px;
  }

  .hero-actions{
    flex-direction:column;
  }

  .btn{
    width:100%;
  }

  .memory-canvas{
    padding:22px 14px;
  }

  .axis{
    display:none;
  }

  .memory-canvas svg{
    height:300px;
  }
}