:root{--space:#04060b;--panel:#070c16;--line:rgba(124,196,255,.16);--ink:#eef4ff;--hull:#b8c3d3;--dim:#7d8aa0;--engine:#4aa3ff;--ok:#3ddc97;--part:#ffb347;--bad:#ff6b6b;--none:#1b2435}
*{box-sizing:border-box}
html{background:var(--space);color-scheme:dark}
body{margin:0;min-height:100vh;color:var(--ink);font:400 16px/1.6 Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;
 background:radial-gradient(ellipse 60% 40% at 50% 0%,rgba(74,163,255,.10),transparent 70%),var(--space);padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0)}
a{color:#9fd2ff}
.skip{position:fixed;left:12px;top:-60px;z-index:9;padding:10px 16px;border-radius:10px;background:var(--engine);color:#03101f;font-weight:700;text-decoration:none}.skip:focus{top:12px}
:focus-visible{outline:2px solid #9fd2ff;outline-offset:3px;border-radius:4px}
main:focus{outline:none}
.top,main,.foot{width:min(820px,100% - 40px);margin:0 auto}
.top{display:flex;justify-content:space-between;align-items:center;padding:24px 0}
.logo img{height:34px;width:auto;display:block}
.back{font-size:14px;font-weight:600;color:var(--hull);text-decoration:none}.back:hover{color:var(--ink)}
.state{padding:56px 0 48px;text-align:left}
.beacon{display:block;width:14px;height:14px;border-radius:50%;background:var(--dim);margin-bottom:22px;box-shadow:0 0 0 0 rgba(61,220,151,.0)}
.beacon.ok{background:var(--ok);animation:ping 2.4s ease-out infinite}
.beacon.part{background:var(--part)}.beacon.bad{background:var(--bad);animation:pingr 1.6s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(61,220,151,.55)}80%,100%{box-shadow:0 0 0 18px rgba(61,220,151,0)}}
@keyframes pingr{0%{box-shadow:0 0 0 0 rgba(255,107,107,.6)}80%,100%{box-shadow:0 0 0 18px rgba(255,107,107,0)}}
h1{font-family:Michroma,"Arial Narrow",sans-serif;font-weight:400;font-size:clamp(26px,5vw,42px);letter-spacing:.03em;line-height:1.2;margin:0 0 12px}
.sub{margin:0;color:var(--hull);max-width:56ch}
.demo{margin:14px 0 0;font-size:14px;color:var(--part)}
h2{font-family:Michroma,"Arial Narrow",sans-serif;font-weight:400;font-size:17px;letter-spacing:.04em;margin:0 0 16px;color:var(--ink)}
section+section{margin-top:44px}
.mons,.incs{list-style:none;margin:0;padding:0}
.mon{padding:22px 0;border-top:1px solid var(--line)}
.mon:last-child{border-bottom:1px solid var(--line)}
.mhead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;margin-bottom:14px}
.mname{font-weight:700;font-size:17px}
.mhost{display:block;font-size:13px;color:var(--dim);font-weight:500}
.mstat{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.mstat i{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok)}
.mstat.down{color:var(--bad)}.mstat.down i{background:var(--bad);box-shadow:0 0 10px var(--bad)}
.mstat small{font-weight:500;color:var(--dim);margin-left:6px}
.strip{display:grid;grid-template-columns:repeat(90,minmax(0,1fr));gap:2px;height:34px;cursor:pointer}
.strip span{border-radius:2px;background:var(--none)}
.strip span.ok{background:var(--ok);opacity:.85}.strip span.part{background:var(--part)}.strip span.bad{background:var(--bad)}
.strip span.sel{outline:1px solid #fff;outline-offset:1px}
.axis{display:flex;justify-content:space-between;font-size:12px;color:var(--dim);margin-top:6px}
.axis b{font-weight:600;color:var(--hull)}
.dayinfo{min-height:1.4em;margin:6px 0 0;font-size:13px;color:var(--hull)}
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:12.5px;color:var(--dim);margin:14px 0 0}
.sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.sw.ok{background:var(--ok)}.sw.part{background:var(--part)}.sw.bad{background:var(--bad)}.sw.none{background:var(--none)}
.inc{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;padding:14px 0;border-top:1px solid var(--line)}
.inc .dot{width:9px;height:9px;border-radius:50%;margin-top:8px;background:var(--part)}.inc.open .dot{background:var(--bad);box-shadow:0 0 10px var(--bad)}
.inc b{font-weight:700}.inc p{margin:0;color:var(--hull);font-size:14.5px}
.none{color:var(--hull);margin:0}
.foot{padding:56px 0 40px;color:var(--dim);font-size:14px}
@media (max-width:560px){.strip{height:28px;gap:1px}.state{padding:36px 0 32px}.back{font-size:13px}}
@media (prefers-reduced-motion:reduce){.beacon{animation:none!important}}