:root{--navy:#0D1B2A;--surface:#1A2E42;--surface2:#1F3650;--teal:#00C9A7;--light:#E8F4F8;--muted:#8B9DB5;--dim:#4A6070;--amber:#F0A830;--orange:#E8833A;--red:#E24B4A;--blue:#5B9BD5;--border:rgba(0,201,167,.15)}
*{box-sizing:border-box}
body{margin:0;background:var(--navy);color:var(--light);font:15px/1.55 "DM Sans",Arial,system-ui,sans-serif}
a{color:var(--teal)}
.top{display:flex;align-items:center;gap:.6rem;max-width:880px;margin:0 auto;padding:20px 16px}
.brand{display:flex;align-items:center;gap:.5rem;color:var(--light);text-decoration:none;font-weight:600;font-size:1.15rem}
.brand-sub{color:var(--muted);border-left:1px solid var(--dim);padding-left:.6rem}
main{max-width:880px;margin:0 auto;padding:0 16px 32px}
h1{font-size:1.3rem;margin:0}
h2{font-size:1.05rem;margin:0}
.section-title{margin:28px 0 10px}
.muted{color:var(--muted)}
.overall{border-radius:10px;padding:18px 20px;margin:8px 0 20px;background:var(--surface);border-left:6px solid var(--teal)}
.overall p{margin:.3rem 0 0;color:var(--muted);font-size:.9rem}
.overall.s-degraded{border-left-color:var(--amber)}
.overall.s-partial_outage{border-left-color:var(--orange)}
.overall.s-major_outage{border-left-color:var(--red)}
.overall.s-maintenance{border-left-color:var(--blue)}
.region{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px 18px;margin:14px 0}
.r-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:6px}
.components{list-style:none;margin:0;padding:0}
.component{padding:10px 0;border-top:1px solid var(--border)}
.component:first-child{border-top:0}
.c-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:6px}
.pill{font-size:.78rem;padding:2px 10px;border-radius:999px;white-space:nowrap;background:var(--surface2);color:var(--teal)}
.pill.s-degraded{color:var(--amber)}
.pill.s-partial_outage{color:var(--orange)}
.pill.s-major_outage{color:var(--red)}
.pill.s-maintenance{color:var(--blue)}
.pill.s-none{color:var(--muted)}
.strip{display:flex;gap:2px;list-style:none;margin:0;padding:0;height:22px}
.strip li{flex:1;border-radius:2px;background:var(--teal);opacity:.85;position:relative;cursor:pointer;outline:none}
.strip li:hover,.strip li:focus{opacity:1;box-shadow:0 0 0 1px var(--light)}
.strip li:hover::after,.strip li:focus::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:10;pointer-events:none;background:#0B1622;color:var(--light);border:1px solid var(--border);border-radius:6px;padding:6px 10px;font-size:.78rem;line-height:1.4;white-space:pre;box-shadow:0 4px 14px rgba(0,0,0,.45)}
.strip li:nth-child(-n+12)::after{left:0;transform:none}
.strip li:nth-last-child(-n+12)::after{left:auto;right:0;transform:none}
.axis{display:flex;justify-content:space-between;color:var(--dim);font-size:.72rem;margin-top:3px}
.axis .ago30{display:none}
.strip li.s-degraded,.legend i.s-degraded{background:var(--amber)}
.strip li.s-partial_outage,.legend i.s-partial_outage{background:var(--orange)}
.strip li.s-major_outage,.legend i.s-major_outage{background:var(--red)}
.legend{color:var(--muted);font-size:.8rem;display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:center}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;background:var(--teal)}
.incident{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--dim);border-radius:10px;padding:14px 18px;margin:10px 0}
.incident.open.s-degraded{border-left-color:var(--amber)}
.incident.open.s-partial_outage{border-left-color:var(--orange)}
.incident.open.s-major_outage{border-left-color:var(--red)}
.incident.open.s-maintenance{border-left-color:var(--blue)}
.incident h3{margin:0 0 4px;font-size:1rem}
.meta,.window{color:var(--muted);font-size:.85rem;margin:0 0 6px}
.updates{list-style:none;margin:0;padding:0}
.updates li{border-top:1px solid var(--border);padding:8px 0}
.updates p{margin:.25rem 0}
.upd-head time{color:var(--muted);font-size:.85rem;margin-left:.4rem}
footer{max-width:880px;margin:0 auto;padding:16px;border-top:1px solid var(--border);font-size:.85rem}
@media (max-width:600px){.strip li:nth-child(-n+60){display:none}.strip li:nth-child(n+61):nth-child(-n+68)::after{left:0;transform:none}.axis .ago90{display:none}.axis .ago30{display:inline}}