:root{--bg:#f7f4ef;--fg:#1d1b18;--mut:#5d574f;--card:#fffdf9;--line:#e3ddd3;--acc:#a8461f;--acc2:#2f5d50;--ok:#2e7d5b;--warn:#b7791f;--bad:#b3261e;--idle:#c9c1b5;--track:#ece6dc}
@media (prefers-color-scheme:dark){:root{--bg:#141311;--fg:#ece7df;--mut:#a69e92;--card:#1d1b18;--line:#2f2c27;--acc:#e0774a;--acc2:#7fb8a5;--ok:#6cc39a;--warn:#e5b04a;--bad:#ef6b5b;--idle:#4a453e;--track:#2a2723}}
*{box-sizing:border-box}
html{font-size:17px}
body{margin:0;background:var(--bg);color:var(--fg);font:1rem/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
a{color:var(--acc)}
.wrap{max-width:880px;margin:0 auto;padding:0 1.2rem}
header{border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1rem;padding-bottom:1rem}
.logo{font-weight:700;letter-spacing:.02em;color:var(--fg);text-decoration:none;font-size:1.1rem}
.logo span{color:var(--acc)}
nav a{margin-left:1rem;color:var(--mut);text-decoration:none;font-size:.92rem;white-space:nowrap}
nav a:hover{color:var(--fg)}
.hero{padding:2.6rem 0 1rem}
.hero h1{font-size:2.1rem;line-height:1.2;margin:0 0 .6rem}
.overall{display:flex;align-items:center;gap:.6rem;font-size:1.15rem;margin:0;font-weight:600}
.dot{width:.8rem;height:.8rem;border-radius:50%;background:var(--idle);flex:none}
.s-up .dot,.dot.s-up{background:var(--ok)}
.s-degraded .dot,.dot.s-degraded{background:var(--warn)}
.s-down .dot,.dot.s-down{background:var(--bad)}
section{padding:1.2rem 0}
section h2{font-size:1.35rem;margin:0 0 1rem}
.sechead{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.sechead h2{margin:0}
.range{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.range button{font:inherit;font-size:.85rem;border:0;background:var(--card);color:var(--mut);padding:.25rem .8rem;cursor:pointer}
.range button[aria-pressed=true]{background:var(--acc);color:#fff}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.2rem 1.4rem;margin-bottom:1rem}
.card h3{margin:0;font-size:1.15rem}
.chead{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap}
.chead .title{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.sub{color:var(--mut);font-size:.9rem}
.pill{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--line);border-radius:999px;padding:.1rem .7rem;font-size:.85rem;font-weight:600;white-space:nowrap}
.pill .dot{width:.55rem;height:.55rem}
.s-pending .pill,.pill.s-pending{color:var(--mut);font-weight:500}
.metrics{display:grid;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:.8rem;margin-top:1rem}
.metric{border:1px solid var(--line);border-radius:10px;padding:.55rem .75rem;min-width:0}
.metric .v{font-size:1.35rem;font-weight:700;line-height:1.25;font-variant-numeric:tabular-nums}
.metric .l{color:var(--mut);font-size:.82rem}
.metric svg{display:block;width:100%;height:34px;margin-top:.35rem;overflow:visible}
.metric .rng{color:var(--mut);font-size:.74rem;font-variant-numeric:tabular-nums}
.spark-line{fill:none;stroke:var(--acc2);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.spark-area{fill:var(--acc2);opacity:.13}
.warn .spark-line{stroke:var(--warn)}.warn .spark-area{fill:var(--warn)}
.uptime{margin-top:1rem}
.bars{display:flex;gap:2px;height:28px;align-items:stretch}
.bars i{flex:1;border-radius:2px;background:var(--idle);min-width:1px}
.bars i.u-ok{background:var(--ok)}.bars i.u-warn{background:var(--warn)}.bars i.u-bad{background:var(--bad)}
.upline{display:flex;justify-content:space-between;gap:.6rem;flex-wrap:wrap;color:var(--mut);font-size:.8rem;margin-top:.3rem;font-variant-numeric:tabular-nums}
.upsum{color:var(--mut);font-size:.82rem;margin-top:.15rem;font-variant-numeric:tabular-nums}
.upsum span{white-space:nowrap}
.upsum b{color:var(--fg);font-weight:600}
.meter{height:10px;border-radius:999px;background:var(--track);overflow:hidden;position:relative;margin:.35rem 0 .2rem}
.meter>span{position:absolute;inset:0 auto 0 0;background:var(--acc2);border-radius:999px}
.meter>span.proj{background:var(--acc2);opacity:.3}
.meter.warn>span{background:var(--warn)}
.meter.bad>span{background:var(--bad)}
.meter>.mark{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--mut);opacity:.6}
.egress-big{font-size:1.6rem;font-weight:700;font-variant-numeric:tabular-nums}
.note{border-left:3px solid var(--warn);padding:.4rem .8rem;margin:.8rem 0 0;background:color-mix(in srgb,var(--warn) 10%,transparent);border-radius:0 8px 8px 0;font-size:.9rem}
.note.info{border-left-color:var(--line);background:transparent;color:var(--mut)}
.banner{border:1px solid var(--warn);border-radius:10px;padding:.6rem .9rem;margin:0 0 1rem;font-size:.92rem}
.small{font-size:.86rem;color:var(--mut)}
.mut{color:var(--mut)}
footer{border-top:1px solid var(--line);margin-top:2rem}
footer .wrap{padding-top:1.2rem;padding-bottom:2rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;color:var(--mut);font-size:.88rem}
footer a{color:var(--mut)}
@media (max-width:720px){.hero h1{font-size:1.7rem}nav a{margin-left:.7rem}.card{padding:1rem}}
@media (max-width:560px){nav a:not(:last-child){display:none}.metrics{grid-template-columns:1fr 1fr;gap:.6rem}.metric .v{font-size:1.15rem}}