:root {
  color-scheme:dark;
  font-family:"Aptos Display","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  color:#f1f2fc;
  background:#070812;
  font-synthesis:none;
  --quiet:#a7acc8;
  --muted:#767e9d;
  --line:#a9b8ee24;
  --blue:#5cc9ff;
  --purple:#ad85ff
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  min-width:320px;
  min-height:100dvh;
  background:radial-gradient(circle at 76% 16%,#7643c345,transparent 31%),radial-gradient(circle at 8% 74%,#1585b92c,transparent 35%),linear-gradient(143deg,#070812,#0b1022 48%,#100b20);
  isolation:isolate
}
body:before,body:after {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none
}
body:before {
  background:linear-gradient(105deg,transparent 8%,#48c8ff22 8.15%,#48c8ff22 8.4%,transparent 8.6%),linear-gradient(128deg,transparent 54%,#f5f6ff14 54.1%,#f5f6ff14 54.3%,transparent 54.55%),linear-gradient(24deg,transparent 62%,#a568f322 62.1%,#a568f322 62.4%,transparent 62.7%)
}
body:after {
  background:linear-gradient(90deg,#eeeefe07 1px,transparent 1px),linear-gradient(0deg,#eeeefe06 1px,transparent 1px);
  background-size:84px 84px;
  mask-image:linear-gradient(180deg,transparent,#000 15%,#000 80%,transparent)
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit
}
a:focus-visible,button:focus-visible {
  outline:2px solid var(--blue);
  outline-offset:5px
}
.skip {
  position:fixed;
  top:-80px;
  left:20px;
  background:#fff;
  color:#080914;
  padding:12px;
  z-index:10
}
.skip:focus {
  top:12px
}
header,footer {
  width:min(1120px,calc(100% - 64px));
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}
header {
  height:88px;
  border-bottom:1px solid var(--line)
}
.brand {
  font-size:27px;
  letter-spacing:-1.5px;
  font-weight:850
}
.brand-dot {
  color:var(--blue)
}
.eyebrow,.section-heading>span {
  font-size:10px;
  letter-spacing:2px;
  color:var(--quiet);
  font-weight:650
}
main {
  width:min(850px,calc(100% - 64px));
  margin:0 auto
}
.hero {
  padding:72px 0 52px
}
.signal {
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:12px;
  font-weight:650;
  letter-spacing:.3px;
  color:var(--quiet)
}
.dot,.status:before {
  width:7px;
  height:7px;
  display:inline-block;
  border-radius:50%;
  background:#a4abc4;
  flex-shrink:0
}
.signal[data-status=up],.status[data-status=up] {
  color:#84dfb6
}
.signal[data-status=up] .dot,.status[data-status=up]:before {
  background:#84dfb6
}
.signal[data-status=down],.status[data-status=down] {
  color:#ffc483
}
.signal[data-status=down] .dot,.status[data-status=down]:before {
  background:#ffc483
}
.signal[data-status=maintenance],.status[data-status=maintenance] {
  color:var(--purple)
}
h1 {
  font-size:clamp(38px,6vw,68px);
  line-height:1.06;
  letter-spacing:-2.8px;
  margin:23px 0 22px;
  font-weight:650;
  max-width:780px
}
h1 span {
  color:#929bb8
}
.hero>p:not(.checked) {
  max-width:560px;
  color:var(--quiet);
  line-height:1.7;
  font-size:16px;
  margin:0
}
.actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:29px
}
.button {
  display:inline-flex;
  gap:22px;
  align-items:center;
  justify-content:center;
  min-height:45px;
  padding:0 18px;
  border:1px solid #a9b8ee40;
  border-radius:5px;
  color:#dce3fb;
  background:#0a0f20;
  cursor:pointer;
  font-size:13px;
  font-weight:600
}
.button:hover {
  border-color:var(--blue)
}
.button.primary {
  background:#dae9ff;
  color:#101628;
  border-color:#dae9ff
}
.button:disabled {
  opacity:.6;
  cursor:wait
}
.checked {
  font-size:11px!important;
  color:var(--muted);
  margin:18px 0 0!important
}
.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:15px
}
h2 {
  font-size:15px;
  letter-spacing:-.1px;
  font-weight:600;
  margin:0
}
ul {
  list-style:none;
  padding:0;
  margin:0;
  border-top:1px solid var(--line)
}
li {
  padding:17px 0;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px
}
.service-name {
  font-size:14px;
  color:#dbe0f3
}
.status {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--quiet);
  white-space:nowrap
}
.status:before {
  content:"";
  width:6px;
  height:6px
}
.placeholder {
  color:var(--quiet);
  font-size:13px
}
.history {
  margin:40px 0 58px
}
.incident {
  border-top:1px solid var(--line);
  padding:16px 0
}
.incident p {
  margin:0 0 6px;
  font-size:13px;
  line-height:1.6
}
.incident time,.incident small,.quiet {
  font-size:12px;
  color:var(--muted);
  line-height:1.6
}
footer {
  border-top:1px solid var(--line);
  padding:25px 0 32px;
  color:var(--muted);
  font-size:11px;
  line-height:1.8
}
footer a {
  color:var(--quiet)
}
.footer-dot {
  padding:0 8px;
  color:#596685
}
[hidden] {
  display:none!important
}
@media(max-width:600px) {
  header,footer,main {
    width:calc(100% - 40px)
  }
  header {
    height:72px
  }
  .hero {
    padding:49px 0 38px
  }
  h1 {
    letter-spacing:-1.6px
  }
  .hero>p:not(.checked) {
    font-size:14px
  }
  .section-heading>span {
    font-size:9px;
    letter-spacing:1px
  }
  .service-name {
    font-size:13px
  }
  footer {
    align-items:flex-start;
    flex-direction:column;
    gap:10px
  }
  .actions {
    gap:10px
  }
  .button {
    font-size:12px;
    padding:0 14px
  }
  .status {
    font-size:11px
  }
}