:root{
  --bg:#05080b;
  --panel:#0a0f14;
  --panel2:#0d141b;
  --line:#1c2a35;
  --line-strong:#284050;
  --text:#f2f7fa;
  --muted:#7f919e;
  --cyan:#6ee7ff;
  --ice:#b9f3ff;
  --amber:#ffbf69;
  --red:#ff6b6b;
  --green:#6ef0ad;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.01em;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(110,231,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110,231,255,.025) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 85%);
}
.shell{max-width:1500px;margin:0 auto;padding:28px}
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:12px 0 26px;
  border-bottom:1px solid var(--line-strong);
}
.brand{
  font-size:clamp(24px,3vw,46px);
  font-weight:900;
  letter-spacing:.04em;
}
.brand span{color:var(--cyan)}
.tagline{
  margin-top:6px;
  color:var(--muted);
  font-size:13px;
  font-weight:800;
  letter-spacing:.22em;
}
.clock-block{text-align:right}
#clock{
  font-variant-numeric:tabular-nums;
  font-size:clamp(22px,2.3vw,36px);
  font-weight:800;
  color:var(--ice);
}
#date{color:var(--muted);font-size:12px;margin-top:4px}
.signal-strip{
  display:flex;
  gap:12px;
  align-items:center;
  min-height:48px;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:12px;
  letter-spacing:.08em;
}
.signal-strip strong{color:var(--text)}
.signal-dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--green);
  box-shadow:0 0 18px rgba(110,240,173,.8);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{50%{opacity:.35;box-shadow:0 0 5px rgba(110,240,173,.25)}}
main{display:grid;gap:34px;padding:34px 0}
.section-head{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:end;
  margin-bottom:12px;
}
.section-head h1,.section-head h2{
  margin:0;
  font-size:15px;
  letter-spacing:.16em;
  font-weight:900;
}
.section-head span{
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.18em;
}
.core-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.card,.quest,.telemetry-list,.next-list{
  border:1px solid var(--line);
  background:var(--panel);
}
.card{
  min-height:196px;
  padding:18px;
  position:relative;
  overflow:hidden;
}
.card::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:2px;
  background:var(--line-strong);
}
.card.cyan::after{background:var(--cyan)}
.card.amber::after{background:var(--amber)}
.card.red::after{background:var(--red)}
.card.green::after{background:var(--green)}
.card.muted::after{background:#53636e}
.card-top{
  display:flex;justify-content:space-between;gap:16px;align-items:flex-start;
}
.card-name{
  font-weight:950;
  font-size:22px;
  letter-spacing:.05em;
}
.status{
  border:1px solid var(--line-strong);
  padding:5px 8px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  color:var(--muted);
}
.card.cyan .status{color:var(--cyan);border-color:#2f6975}
.card.amber .status{color:var(--amber);border-color:#6f5736}
.card.red .status{color:var(--red);border-color:#6c3838}
.card.green .status{color:var(--green);border-color:#35694e}
.card h3{
  margin:26px 0 8px;
  font-size:13px;
  letter-spacing:.11em;
}
.card p{
  color:#aebdc7;
  line-height:1.55;
  margin:0 0 20px;
  font-size:13px;
}
.proof{
  color:var(--muted);
  font-family:"SFMono-Regular",Consolas,monospace;
  font-size:11px;
}
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.stack{display:grid;gap:10px}
.quest{
  padding:15px 16px;
  display:grid;
  grid-template-columns:14px 1fr auto;
  gap:12px;
  align-items:start;
}
.quest-mark{
  width:8px;height:8px;border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 12px rgba(110,231,255,.55);
  margin-top:5px;
}
.quest.completed .quest-mark{background:var(--green);box-shadow:none}
.quest.paused .quest-mark{background:var(--amber);box-shadow:none}
.quest-title{
  font-weight:900;
  font-size:13px;
  letter-spacing:.04em;
}
.quest-detail{color:var(--muted);margin-top:5px;line-height:1.45;font-size:12px}
.quest-state{
  color:var(--muted);
  font-size:10px;
  letter-spacing:.14em;
  font-weight:900;
  white-space:nowrap;
}
.telemetry-list{padding:8px 16px}
.telemetry-row{
  display:grid;
  grid-template-columns:16px 1fr;
  gap:10px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
  font-size:13px;
}
.telemetry-row:last-child{border-bottom:0}
.telemetry-arrow{color:var(--cyan)}
.next-list{
  margin:0;
  padding:8px 18px 8px 48px;
}
.next-list li{
  padding:13px 8px;
  border-bottom:1px solid var(--line);
  color:#c9d5dc;
}
.next-list li:last-child{border-bottom:0}
footer{
  border-top:1px solid var(--line-strong);
  padding:18px 0 8px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:var(--muted);
  font-size:10px;
  letter-spacing:.12em;
  font-weight:800;
}
@media (max-width:1000px){
  .core-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:740px){
  .shell{padding:18px}
  .topbar{gap:16px}
  .core-grid,.split{grid-template-columns:1fr}
  .clock-block{min-width:110px}
  footer{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;scroll-behavior:auto!important}
}