:root { color-scheme: light; --bg:#ffffff; --fg:#202529; --muted:#596368; --line:#dfe5e6; --link:#076779; --track:#e8edef; }
:root[data-theme="dark"] { color-scheme:dark; --bg:#171b1d; --fg:#edf1f1; --muted:#a8b3b6; --line:#353e41; --link:#7cd4df; --track:#313b3e; }
@media(prefers-color-scheme:dark) { :root:not([data-theme="light"]) { color-scheme:dark; --bg:#171b1d; --fg:#edf1f1; --muted:#a8b3b6; --line:#353e41; --link:#7cd4df; --track:#313b3e; } }
* { box-sizing:border-box; letter-spacing:0; }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.65 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.shell { width:min(100% - 40px,960px); margin:auto; }
header { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:88px; border-bottom:1px solid var(--line); }
a { color:var(--link); text-underline-offset:3px; }
.brand { display:flex; align-items:center; gap:10px; color:var(--fg); text-decoration:none; font-size:20px; font-weight:700; }
.brand span { font-size:14px; font-weight:500; color:var(--muted); padding-left:12px; border-left:1px solid var(--line); }
.theme { display:flex; align-items:center; gap:8px; font-size:13px; white-space:nowrap; min-height:44px; cursor:pointer; }
.theme input { width:18px; height:18px; accent-color:var(--link); }
section { padding:30px 0; border-bottom:1px solid var(--line); }
.overview { padding-top:42px; }
.eyebrow { font-size:12px; text-transform:uppercase; font-weight:700; color:var(--muted); }
h1 { margin:10px 0; font-size:30px; line-height:1.25; }
h1[data-api-status]::before { width:13px; height:13px; margin-right:12px; }
h2 { font-size:18px; line-height:1.4; margin:0 0 14px; }
h3 { font-size:15px; margin:18px 0 4px; }
p { margin:8px 0; }
.muted,dt { color:var(--muted); font-size:13px; }
.timestamps { display:flex; gap:48px; flex-wrap:wrap; margin:24px 0 14px; }
dd { margin:4px 0 0; font-size:14px; font-variant-numeric:tabular-nums; }
.availability { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.availability > div + div { border-left:1px solid var(--line); padding-left:32px; }
.metric { font-size:25px; font-weight:650; line-height:1.3; margin:12px 0; }
.history { display:grid; grid-template-columns:repeat(90,minmax(0,1fr)); gap:3px; list-style:none; padding:0; margin:20px 0 12px; min-height:40px; }
.history li { height:40px; border-radius:2px; background:var(--track); }
.history [data-state="up"],.legend [data-state="up"]::before { background:#139864; }
.history [data-state="down"],.legend [data-state="down"]::before { background:#e14959; }
.history [data-state="unknown"],.legend [data-state="unknown"]::before { background:#bd923a; }
.legend { display:flex; flex-wrap:wrap; gap:8px 20px; font-size:12px; color:var(--muted); }
.legend span::before { content:''; display:inline-block; width:9px; height:9px; margin-right:6px; background:var(--track); }
#incidents article { border-top:1px solid var(--line); padding:12px 0; }
#incidents article h3 { margin:0; }
.method { max-width:780px; border:0; }
footer { display:flex; flex-wrap:wrap; gap:12px 24px; border-top:1px solid var(--line); padding:24px 0 40px; font-size:13px; }
:focus-visible { outline:2px solid var(--link); outline-offset:4px; }
@media(max-width:600px) { header { gap:8px; flex-wrap:wrap; padding:16px 0; } .brand { font-size:18px; } .brand span { font-size:12px; padding-left:8px; } h1 { font-size:25px; } .availability { grid-template-columns:1fr; gap:24px; } .availability > div + div { border-left:0; border-top:1px solid var(--line); padding:24px 0 0; } .timestamps { gap:16px; flex-direction:column; } .history { grid-template-columns:repeat(30,minmax(0,1fr)); gap:4px; } .history li { height:22px; } .metric { font-size:23px; } }
