:root{--bg:#F6F4F5;--panel:#FFFFFF;--ink:#19141A;--ink-2:#3A3238;--muted:#6E646B;--line:rgba(25,12,22,.09);
--green:#0E8A5C;--amber:#9A6200;--red:#C23B2A;--none:#E2DCE0;--accent:#C2125F;--magenta:#E6197A;color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--bg:#0B0A0C;--panel:#131116;--ink:#F3EFF2;--ink-2:#C9C0C6;--muted:#9C929A;
--line:rgba(255,255,255,.08);--green:#4FD1A1;--amber:#E7B651;--red:#F08A7A;--none:#2A252B;--accent:#FF5FA8}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 system-ui,-apple-system,"Segoe UI",Inter,sans-serif;
-webkit-font-smoothing:antialiased}
.wrap{max-width:880px;margin:0 auto;padding:clamp(20px,5vw,48px) clamp(16px,4vw,28px) 56px}
header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:650;font-size:18px;letter-spacing:-.01em}
.mark{width:28px;height:28px;border-radius:8px;background:var(--magenta);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:15px}
.brand small{font-weight:400;color:var(--muted);font-size:14px}
.links a{color:var(--muted);font-size:13px;text-decoration:none;margin-left:16px}.links a:hover{color:var(--accent)}
.banner{display:flex;align-items:center;gap:14px;padding:20px 22px;border-radius:18px;background:var(--panel);border:1px solid var(--line);margin-bottom:22px}
.banner h1{margin:0;font-size:clamp(18px,3vw,22px);letter-spacing:-.01em}
.banner p{margin:2px 0 0;color:var(--muted);font-size:13px}
.dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;background:var(--c);box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 18%,transparent)}
.ok{--c:var(--green)}.deg{--c:var(--amber)}.down{--c:var(--red)}.unk{--c:var(--muted)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:6px 22px;margin-bottom:22px}
.comp{padding:18px 0;border-bottom:1px solid var(--line)}.comp:last-child{border-bottom:0}
.comp-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.comp-name{font-weight:600}.comp-url{color:var(--muted);font-size:12.5px;margin-left:8px}
.state{font-size:13px;color:var(--c)}
.bars{display:grid;grid-template-columns:repeat(90,1fr);gap:2px;height:30px;margin:12px 0 6px}
.bars span{border-radius:2px;background:var(--none)}
.bars .b-ok{background:var(--green)}.bars .b-deg{background:var(--amber)}.bars .b-down{background:var(--red)}
.axis{display:flex;justify-content:space-between;color:var(--muted);font-size:11.5px}
h2{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:30px 0 12px}
.inc{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px 22px;margin-bottom:12px}
.inc-top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline}
.inc h3{margin:0;font-size:16px}
.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
.inc .meta{color:var(--muted);font-size:12.5px;margin:4px 0 8px}
.inc .body{color:var(--ink-2);font-size:14px}.inc .body p{margin:8px 0}.inc .body ul{margin:8px 0;padding-left:20px}
.inc code{font-size:13px;background:color-mix(in srgb,var(--ink) 7%,transparent);padding:1px 5px;border-radius:5px}
.inc a{color:var(--accent)}
.empty{color:var(--muted);font-size:14px;padding:4px 0}
footer{margin-top:36px;color:var(--muted);font-size:12.5px;line-height:1.7}footer a{color:var(--muted)}
@media (max-width:560px){.bars{gap:1px;height:26px}.comp-url{display:block;margin:2px 0 0}.links a{margin:0 14px 0 0}}