:root{--bg:#080d18;--panel:#111b30;--line:#1e2c47;--tx:#e8eefb;--mut:#93a4c4;--ok:#37d99a;--warn:#f6b93b;--bad:#ff6b73;--mt:#6aa8ff;--ac:#4aa3ff;--none:#26344f}
*{box-sizing:border-box;margin:0}
html{background:var(--bg)}
body{background:radial-gradient(1200px 520px at 50% -140px,#12305c55,transparent 70%),var(--bg);color:var(--tx);font:16px/1.5 "Segoe UI",Inter,system-ui,-apple-system,sans-serif;min-height:100vh}
a{color:var(--ac)}
.wrap{max-width:980px;margin:0 auto;padding:0 20px 64px}
header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:26px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:600;letter-spacing:.2px}
.brand img{height:38px;width:auto;max-width:150px;object-fit:contain}
.logo{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#8fd0ff,#2d6fd6 55%,#0f2f6b);box-shadow:0 0 18px #3b8cff88;position:relative;flex:none}
.logo:after{content:"";position:absolute;inset:-5px -9px;border:1.5px solid #4aa3ffaa;border-radius:50%;transform:rotate(-24deg)}
.brand small{display:block;color:var(--mut);font-weight:400;font-size:12.5px}
.hdr-r{color:var(--mut);font-size:14px;text-align:right}
.hdr-r a{color:var(--mut)}
.hero{padding:34px 0 8px}
.hero h1{font-size:clamp(34px,6vw,54px);font-weight:700;letter-spacing:-.02em;line-height:1.08}
.hero p{color:var(--mut);margin-top:12px;font-size:17px;max-width:60ch}
.beat{margin:26px 0 6px;height:46px}
.beat svg{width:100%;height:100%;display:block}
.beat path{stroke-dasharray:1500;stroke-dashoffset:0;animation:draw 1.8s ease-out both}
@keyframes draw{from{stroke-dashoffset:1500}to{stroke-dashoffset:0}}
.beat.ok{color:var(--ok)}.beat.warn{color:var(--warn)}.beat.bad{color:var(--bad)}.beat.mt{color:var(--mt)}.beat.unknown{color:var(--mut)}
.note{border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,#14213b,#101a30);padding:20px 22px;margin:18px 0}
.note.warn{border-color:#f6b93b55;background:linear-gradient(180deg,#2a2210aa,#14213b)}
.note.bad{border-color:#ff6b7355;background:linear-gradient(180deg,#2c1218aa,#14213b)}
.note.mt{border-color:#6aa8ff55;background:linear-gradient(180deg,#112848aa,#14213b)}
.note h3{font-size:17px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tag{font-size:12.5px;padding:2px 10px;border-radius:99px;font-weight:600;white-space:nowrap}
.note.warn .tag{background:#f6b93b26;color:var(--warn)}.note.bad .tag{background:#ff6b7326;color:var(--bad)}.note.mt .tag{background:#6aa8ff26;color:var(--mt)}.note.done .tag{background:#37d99a1f;color:var(--ok)}
.note p{color:#c8d3ea;margin-top:8px;max-width:75ch}
.note .when{color:var(--mut);font-size:13.5px;margin-top:6px}
.note .aff{color:var(--mut);font-size:13.5px;margin-top:8px}
.tl{margin-top:14px;border-left:2px solid var(--line);padding-left:16px;display:grid;gap:12px}
.tl div{position:relative;font-size:14.5px;color:#c8d3ea}
.tl div:before{content:"";position:absolute;left:-22px;top:7px;width:10px;height:10px;border-radius:50%;background:var(--mut);box-shadow:0 0 0 3px #101a30}
.note.warn .tl div:before{background:var(--warn)}.note.bad .tl div:before{background:var(--bad)}.note.mt .tl div:before{background:var(--mt)}
.tl time{display:block;color:var(--mut);font-size:12.5px}
h2{font-size:13.5px;font-weight:600;color:var(--mut);letter-spacing:.04em;margin:40px 0 12px}
.core,.apps{display:grid;gap:14px}
.apps{gap:12px}
.svc{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.core .svc{padding:22px 24px;background:linear-gradient(180deg,#14223d,#111b30)}
.svc-h{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap}
.nm{font-weight:600;font-size:17px}.core .nm{font-size:20px}
.ds{color:var(--mut);font-size:13.5px}
.meta{display:flex;align-items:center;gap:16px}
.ms{color:var(--mut);font-size:13px;font-variant-numeric:tabular-nums;min-width:52px;text-align:right}
.sp{width:96px;height:26px;color:#4a6a9a}.sp svg{width:100%;height:100%;display:block}
.svc.warn .sp{color:var(--warn)}.svc.bad .sp{color:var(--bad)}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;padding:5px 12px;border-radius:99px;min-width:118px;justify-content:center;white-space:nowrap}
.pill b{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
.pill.ok{background:#37d99a1c;color:var(--ok)}.pill.warn{background:#f6b93b1f;color:var(--warn)}.pill.bad{background:#ff6b731f;color:var(--bad)}.pill.mt{background:#6aa8ff22;color:var(--mt)}.pill.unknown{background:#93a4c422;color:var(--mut)}
.strip{display:grid;grid-template-columns:repeat(90,1fr);gap:2px;margin-top:16px;height:30px}
.strip i{border-radius:2px;background:var(--ok);opacity:.85}.strip i.warn{background:var(--warn);opacity:1}.strip i.bad{background:var(--bad);opacity:1}.strip i.mt{background:var(--mt);opacity:1}.strip i.none{background:var(--none);opacity:.7}
.axis{display:flex;justify-content:space-between;color:var(--mut);font-size:12px;margin-top:8px}
.checks{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.chk{font-size:12.5px;color:#c8d3ea;background:#0b1424;border:1px solid var(--line);border-radius:8px;padding:3px 10px}
.chk:before{content:"✓ ";color:var(--ok)}.chk.warn:before{content:"! ";color:var(--warn);font-weight:700}.chk.bad:before{content:"✕ ";color:var(--bad);font-weight:700}
footer{margin-top:48px;color:var(--mut);font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;border-top:1px solid var(--line);padding-top:20px}
.empty{color:var(--mut);padding:22px;border:1px dashed var(--line);border-radius:16px}
a:focus-visible{outline:2px solid var(--ac);outline-offset:3px;border-radius:4px}
@media(max-width:620px){.sp{display:none}.meta{width:100%;justify-content:space-between}.ms{text-align:left}.hdr-r{display:none}.strip{gap:1px}.core .svc{padding:18px}}
@media(prefers-reduced-motion:reduce){.beat path{animation:none}}