:root{
  --void:#000000;
  --ink:#05070B;
  --raise:#0A0D14;
  --hair:rgba(255,255,255,.09);
  --hair-2:rgba(255,255,255,.16);
  --text:#F2F4F8;
  --dim:#7C8496;
  --faint:#4A5162;
  --ion:#7DE2FF;
  --ion-dim:rgba(125,226,255,.10);
  --ok:#5BE6A4;
  --err:#FF7A6B;
  --amber:#FFC46B;
  --accent:var(--ion);
  --purple:#B79BFF;
  --radius:2px;
  --font:'Space Grotesk',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --micro:11px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--void);
  color:var(--text);
  font-family:var(--font);
  font-size:15px;
  line-height:1.55;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(125,226,255,.22)}
a{color:inherit;text-decoration:none}

.micro,.pill,.back,.wordmark,footer,.meta{
  font-family:var(--mono);
  font-size:var(--micro);
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:500;
}

/* brand mark */
.mark{display:block;width:26px;height:26px;color:#C3C9D4;flex:none;cursor:pointer}
.mark svg{width:100%;height:100%;display:block;overflow:visible}
.mark:hover{color:#fff}
.mark.spin{animation:markSpin .9s cubic-bezier(.45,.05,.25,1)}
@keyframes markSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

header{
  display:flex;align-items:center;justify-content:space-between;
  max-width:820px;margin:0 auto;padding:28px 24px;
}
.brand{display:flex;align-items:center;gap:11px}
.wordmark{letter-spacing:.34em}
.back{color:var(--dim)}
.back:hover{color:var(--ion)}

main{max-width:820px;margin:0 auto;padding:12px 24px 80px}

.banner{
  border:1px solid var(--hair);border-radius:var(--radius);
  background:var(--ink);padding:18px 20px;margin-bottom:28px;
  display:flex;align-items:center;gap:12px;
  font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;font-size:13px;
}
.banner .dot{width:9px;height:9px;border-radius:50%;flex:none}
.banner.ok .dot{background:var(--ok);box-shadow:0 0 12px var(--ok)}
.banner.err .dot{background:var(--err);box-shadow:0 0 12px var(--err)}
.banner.ok{color:var(--ok)}
.banner.err{color:var(--err)}
.banner .meta{margin-left:auto;color:var(--faint);letter-spacing:.1em}

.target{
  border:1px solid var(--hair);border-radius:var(--radius);
  background:var(--ink);padding:16px 20px;margin-bottom:12px;
}
.target .row{display:flex;align-items:baseline;gap:14px;margin-bottom:12px}
.target .n{font-weight:600;letter-spacing:-.01em}
.target .url{color:var(--faint);font-family:var(--mono);font-size:12px}
.target .lat{margin-left:auto;color:var(--dim);font-family:var(--mono);font-size:12px}
.pill{padding:2px 8px;border-radius:var(--radius);border:1px solid}
.pill.ok{color:var(--ok);border-color:rgba(91,230,164,.35)}
.pill.err{color:var(--err);border-color:rgba(255,122,107,.35)}

.bar{display:flex;gap:2px}
.bar i{flex:1;height:18px;border-radius:1px;background:var(--raise)}
.bar i.up{background:var(--ok);opacity:.75}
.bar i.down{background:var(--err)}
.bar-cap{display:flex;justify-content:space-between;margin-top:6px;
  color:var(--faint);font-family:var(--mono);font-size:10px;letter-spacing:.1em}

footer{color:var(--faint);text-align:center;padding:0 24px 40px}