:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #19232f; background: #f7f9fb; }
body { margin: 0; } main { width: min(1000px, calc(100% - 32px)); margin: 0 auto; padding: 52px 0 76px; }
.hero { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:30px; }.eyebrow { margin:0 0 7px; color:#8f171b; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.11em; } h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:0; font-size:clamp(2rem,6vw,3.45rem); letter-spacing:-.04em; } h2 { margin-bottom:0; font-size:1.38rem; }.updated { color:#647381; font-size:.9rem; white-space:nowrap; margin-bottom:4px; }.banner { border-radius:10px; padding:16px; font-weight:700; }.unavailable { background:#fff3cd; color:#684d00; }
.summary { display:flex; align-items:center; gap:10px; padding:18px 20px; margin-bottom:42px; border:1px solid #b8e0c2; border-radius:12px; background:#effaf1; color:#17652c; }.summary span:last-child { margin-left:auto; color:#42734e; font-size:.9rem; }.status-dot,.state i { display:inline-block; width:10px; height:10px; border-radius:50%; background:#2da44e; }.section-heading { display:flex; justify-content:space-between; align-items:end; margin:0 0 14px; }.section-heading > span { color:#74818d; font-size:.82rem; }.services { display:grid; grid-template-columns:repeat(auto-fit,minmax(285px,1fr)); gap:14px; margin-bottom:43px; }.service { background:white; border:1px solid #e4e9ed; border-radius:12px; padding:20px; box-shadow:0 2px 8px #19232f08; }.service-title { display:flex; justify-content:space-between; align-items:start; gap:12px; }.service h3 { margin-bottom:18px; font-size:1rem; }.state { color:#397246; font-size:.8rem; font-weight:700; white-space:nowrap; }.state i { width:7px; height:7px; margin-right:5px; }.history { display:grid; grid-template-columns:repeat(30,1fr); gap:3px; }.history span { display:block; height:8px; border-radius:2px; background:#dce6df; }.history .operational { background:#2da44e; }.history .reported { background:#d92d20; }.uptime { margin:13px 0 0; color:#687783; font-size:.82rem; }.uptime strong { color:#263441; }.service ul { margin:15px 0 0; padding:11px 0 0 19px; border-top:1px solid #edf0f2; color:#9f271e; font-size:.86rem; }.service.reported,.service.investigating { border-color:#f1b9b5; }.service.reported .state,.service.investigating .state { color:#b42318; }.service.reported .state i,.service.investigating .state i { background:#d92d20; }
.summary.reported { border-color:#f1b9b5; background:#fff4f2; color:#a61b13; }.summary.reported span:last-child { color:#a95b55; }.summary.reported .status-dot { background:#d92d20; }
@media (max-width:650px) { main { padding-top:32px; }.hero,.section-heading { align-items:start; flex-direction:column; gap:8px; }.summary { align-items:start; flex-wrap:wrap; }.summary span:last-child { width:100%; margin-left:20px; }.services { grid-template-columns:1fr; } }