:root{color-scheme:light dark;--bg:#fff;--fg:#14181f;--muted:#5b6472;--line:#d8dde5;--card:#f6f8fa;--accent:#1f5eff;--danger:#b42318;--ok:#067647;--warn:#b54708;--st-ok:#067647;--st-degraded:#b58105;--st-partial:#c4570c;--st-major:#b42318;--st-maintenance:#1f5eff;--st-paused:#5b6472;--st-nodata:#c9d0da;--st-ok-bg:#e7f6ee;--st-degraded-bg:#fdf4dc;--st-partial-bg:#fdebdc;--st-major-bg:#fde7e4;--st-maintenance-bg:#e6edff;--st-paused-bg:#eceff3}
@media (prefers-color-scheme:dark){:root{--bg:#0e1116;--fg:#e8ebf0;--muted:#9aa4b2;--line:#2a313c;--card:#161b22;--accent:#6d9bff;--danger:#f97066;--ok:#47cd89;--warn:#fdb022;--st-ok:#47cd89;--st-degraded:#fdb022;--st-partial:#fb923c;--st-major:#f97066;--st-maintenance:#6d9bff;--st-paused:#9aa4b2;--st-nodata:#2f3744;--st-ok-bg:#0f2a1e;--st-degraded-bg:#2e2410;--st-partial-bg:#2f1d10;--st-major-bg:#33161a;--st-maintenance-bg:#15234a;--st-paused-bg:#1c222b}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,sans-serif}
.wrap{max-width:56rem;margin:0 auto;padding:0 1rem}
main.wrap{padding-bottom:4rem}
.top{border-bottom:1px solid var(--line);background:var(--card)}
.top .wrap{justify-content:space-between;padding-top:.75rem;padding-bottom:.75rem}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:#fff;padding:.5rem 1rem;z-index:10}
.skip:focus{left:.5rem;top:.5rem}
h1{font-size:1.5rem;margin:1.5rem 0 .75rem}h2{font-size:1.1rem;margin:2rem 0 .5rem}h3{font-size:1rem;margin:1rem 0 .25rem}
.muted{color:var(--muted)}.row{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center}
a{color:var(--accent)}
.card{background:var(--card);border:1px solid var(--line);border-radius:.5rem;padding:1rem;margin:.5rem 0}
.pill{display:inline-block;padding:0 .5rem;border-radius:999px;border:1px solid var(--line);font-size:.8rem}
.plain{white-space:pre-line;overflow-wrap:anywhere;margin:.25rem 0 .75rem}
.overall{display:flex;align-items:center;gap:.75rem;border-radius:.6rem;padding:1rem 1.25rem;border:1px solid var(--st-ok);background:var(--st-ok-bg);color:var(--st-ok);transition:background-color .4s ease,color .4s ease,border-color .4s ease}
.overall h2{margin:0;font-size:1.25rem;color:inherit}
.overall .icon{display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:currentColor;font-weight:700;position:relative}
.overall .icon{color:inherit}
.overall .icon::before{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;opacity:.25;animation:pulse 2.4s ease-out infinite}
.overall[data-tone=degraded],.comp-status[data-tone=degraded]{--t:var(--st-degraded);--tb:var(--st-degraded-bg)}
.overall[data-tone=partial],.comp-status[data-tone=partial]{--t:var(--st-partial);--tb:var(--st-partial-bg)}
.overall[data-tone=major],.comp-status[data-tone=major]{--t:var(--st-major);--tb:var(--st-major-bg)}
.overall[data-tone=maintenance],.comp-status[data-tone=maintenance]{--t:var(--st-maintenance);--tb:var(--st-maintenance-bg)}
.overall[data-tone=paused],.comp-status[data-tone=paused]{--t:var(--st-paused);--tb:var(--st-paused-bg)}
.overall[data-tone=ok],.comp-status[data-tone=ok]{--t:var(--st-ok);--tb:var(--st-ok-bg)}
.overall{color:var(--t);background:var(--tb);border-color:var(--t)}
.overall .icon{background:var(--t);color:var(--bg)}
.overall .icon::before{background:var(--t)}
@keyframes pulse{0%{transform:scale(1);opacity:.35}100%{transform:scale(1.9);opacity:0}}
.notice{border-left:4px solid var(--warn);padding:.25rem .75rem;margin:.75rem 0;background:var(--card)}
.notice.strong{border-left-color:var(--danger);font-weight:600}
.updated{margin:.5rem 0}
.comps{list-style:none;margin:0;padding:0}
.comp{background:var(--card);border:1px solid var(--line);border-radius:.5rem;padding:.9rem 1rem;margin:.5rem 0}
.comp-head{display:flex;justify-content:space-between;gap:.75rem;flex-wrap:wrap;align-items:center}
.comp-name{font-weight:600;overflow-wrap:anywhere}
.comp-desc{margin:.25rem 0 .5rem;color:var(--muted);white-space:pre-line;overflow-wrap:anywhere}
.comp-status{display:inline-flex;align-items:center;gap:.35rem;padding:.1rem .6rem;border-radius:999px;font-size:.85rem;color:var(--t);background:var(--tb);border:1px solid var(--t);transition:background-color .4s ease,color .4s ease,border-color .4s ease}
.comp-status .icon{font-weight:700}
.bars{display:flex;gap:2px;height:2rem;margin:.6rem 0 .25rem;align-items:stretch}
.bars:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.bar{flex:1 1 0;min-width:2px;border-radius:2px;background:var(--st-nodata);transition:background-color .4s ease,opacity .15s ease}
.bar[data-tone=ok]{background:var(--st-ok)}
.bar[data-tone=degraded]{background:var(--st-degraded)}
.bar[data-tone=partial]{background:var(--st-partial)}
.bar[data-tone=major]{background:var(--st-major)}
.bar[data-tone=maintenance]{background:var(--st-maintenance)}
.bar[data-tone=nodata]{background:var(--st-nodata)}
.bar.active,.bar:hover{opacity:.7}
.comp-foot{display:flex;justify-content:space-between;color:var(--muted);font-size:.8rem}
details{margin-top:.5rem}summary{cursor:pointer;color:var(--muted);font-size:.85rem}
table{width:100%;border-collapse:collapse;font-size:.85rem}th,td{padding:.2rem .25rem;border-bottom:1px solid var(--line);text-align:left}
.tip{position:fixed;z-index:20;pointer-events:none;background:var(--fg);color:var(--bg);padding:.25rem .5rem;border-radius:.3rem;font-size:.8rem;max-width:16rem}
.tip[hidden]{display:none}
.life{display:inline-block;padding:0 .5rem;border-radius:999px;font-size:.8rem;border:1px solid var(--t);color:var(--t);background:var(--tb)}
.life[data-tone=ok]{--t:var(--st-ok);--tb:var(--st-ok-bg)}
.life[data-tone=degraded]{--t:var(--st-degraded);--tb:var(--st-degraded-bg)}
.life[data-tone=partial]{--t:var(--st-partial);--tb:var(--st-partial-bg)}
.life[data-tone=major]{--t:var(--st-major);--tb:var(--st-major-bg)}
.timeline{list-style:none;margin:.5rem 0 0;padding:0 0 0 1rem;border-left:2px solid var(--line)}
.timeline li{margin:0 0 .5rem}
.foot{margin-top:2.5rem;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.overall,.comp-status,.bar{transition:none}.overall .icon::before{animation:none}}
@media (max-width:30rem){.bars{height:1.5rem}.overall{padding:.75rem}}