:root { color-scheme: dark; --bg:#060a10; --surface:#0b121c; --surface-2:#0e1723; --line:rgba(148,176,198,.16); --ink:#eaf2f8; --muted:#91a2b1; --dim:#5f7180; --cyan:#5ce1e6; --green:#42d392; --amber:#ffb454; --red:#ff637d; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:var(--bg); color:var(--ink); line-height:1.5; }
body::before { content:""; position:fixed; inset:0; z-index:-2; background:radial-gradient(circle at 10% 0,rgba(45,181,188,.1),transparent 30%),radial-gradient(circle at 92% 20%,rgba(67,86,120,.08),transparent 28%),linear-gradient(180deg,#070c13,#05090e); }
body::after { content:""; position:fixed; inset:0; z-index:-1; opacity:.2; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:40px 40px; mask-image:linear-gradient(to bottom,#000,transparent 78%); }
.scanline { position:fixed; top:0; left:0; right:0; height:2px; z-index:80; background:linear-gradient(90deg,transparent,var(--cyan),transparent); box-shadow:0 0 18px rgba(92,225,230,.7); opacity:.7; }
.shell { width:min(1180px,calc(100% - 40px)); margin-inline:auto; }
.topbar { border-bottom:1px solid var(--line); background:rgba(6,10,16,.86); backdrop-filter:blur(18px); }
.topbar-inner { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.brand { display:flex; align-items:center; gap:11px; color:inherit; text-decoration:none; }
.brand-mark { display:grid; width:39px; height:39px; place-items:center; border:1px solid rgba(92,225,230,.3); border-radius:11px; background:rgba(92,225,230,.08); color:var(--cyan); font:800 15px ui-monospace,SFMono-Regular,Consolas,monospace; box-shadow:inset 0 0 15px rgba(92,225,230,.07),0 0 20px rgba(92,225,230,.07); }
.brand strong { display:block; font-size:15px; }.brand small { display:block; color:var(--dim); font:700 8px ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.16em; text-transform:uppercase; }
nav { display:flex; gap:6px; } nav a { padding:8px 10px; border-radius:8px; color:var(--muted); font-size:11px; font-weight:700; text-decoration:none; } nav a:hover { color:var(--cyan); background:rgba(255,255,255,.04); }
.hero { padding:72px 0 42px; display:flex; align-items:flex-end; justify-content:space-between; gap:50px; }
.eyebrow { margin:0 0 9px; color:var(--cyan); font:800 9px ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.18em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(42px,6vw,68px); line-height:1; letter-spacing:-.055em; }
.hero-copy { max-width:750px; margin:18px 0 0; color:var(--muted); font-size:14px; }
.refresh { display:flex; flex:0 0 auto; align-items:center; gap:12px; min-width:225px; padding:12px 15px; border:1px solid var(--line); border-radius:12px; background:rgba(11,18,28,.8); }
.refresh strong,.refresh small { display:block; }.refresh strong { font:750 10px ui-monospace,SFMono-Regular,Consolas,monospace; }.refresh small { margin-top:3px; color:var(--dim); font-size:8px; }
.live-dot,.state-dot { display:block; width:8px; height:8px; border-radius:50%; background:var(--dim); box-shadow:0 0 0 4px rgba(95,113,128,.09); }
.live-dot.operational,.state-dot.operational { background:var(--green); box-shadow:0 0 0 4px rgba(66,211,146,.09),0 0 13px rgba(66,211,146,.35); }.live-dot.degraded,.state-dot.degraded { background:var(--amber); }.live-dot.partial_outage,.live-dot.major_outage,.state-dot.outage { background:var(--red); box-shadow:0 0 0 4px rgba(255,99,125,.09),0 0 13px rgba(255,99,125,.3); }
.overall { min-height:150px; padding:27px 30px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:25px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(110deg,rgba(28,47,59,.72),rgba(10,17,26,.96)); box-shadow:0 30px 80px rgba(0,0,0,.22); }
.overall.operational { border-color:rgba(66,211,146,.28); }.overall.degraded { border-color:rgba(255,180,84,.35); }.overall.partial_outage,.overall.major_outage { border-color:rgba(255,99,125,.36); }
.overall-symbol { position:relative; display:grid; width:65px; height:65px; place-items:center; border:1px solid rgba(92,225,230,.18); border-radius:50%; }.overall-symbol i { position:absolute; border-radius:50%; border:1px solid rgba(92,225,230,.16); }.overall-symbol i:nth-child(1){width:10px;height:10px;background:var(--cyan);box-shadow:0 0 20px var(--cyan)}.overall-symbol i:nth-child(2){width:35px;height:35px}.overall-symbol i:nth-child(3){width:53px;height:53px;border-style:dashed}
.overall span,.metric-grid span { color:var(--dim); font:750 8px ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.14em; text-transform:uppercase; }.overall h2 { margin:5px 0 3px; font-size:23px; letter-spacing:-.03em; }.overall p { margin:0; color:var(--muted); font-size:12px; }.overall-code { min-width:170px; text-align:right; }.overall-code small { display:block; color:var(--dim); font:700 8px ui-monospace,SFMono-Regular,Consolas,monospace; }.overall-code code { display:block; margin-top:7px; color:var(--cyan); font:800 13px ui-monospace,SFMono-Regular,Consolas,monospace; }
.metric-grid { display:grid; grid-template-columns:repeat(6,1fr); margin:20px 0 76px; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:rgba(11,18,28,.68); }.metric-grid article { min-width:0; padding:18px; border-right:1px solid var(--line); }.metric-grid article:last-child { border:0; }.metric-grid strong { display:block; overflow:hidden; margin:11px 0 5px; color:var(--ink); font:750 18px ui-monospace,SFMono-Regular,Consolas,monospace; text-overflow:ellipsis; white-space:nowrap; }.metric-grid small { display:block; color:var(--dim); font-size:8px; }
.section-block { margin-bottom:76px; }.section-heading,.panel-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:20px; }.section-heading h2,.panel-heading h2,.protocol h2 { margin:0; font-size:27px; letter-spacing:-.035em; }.legend { display:flex; gap:14px; color:var(--dim); font-size:9px; }.legend span { display:flex; align-items:center; gap:6px; }.legend i { width:6px; height:6px; border-radius:50%; }.legend i.operational { background:var(--green); }.legend i.degraded { background:var(--amber); }.legend i.outage { background:var(--red); }
.component-groups { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }.component-group { border:1px solid var(--line); border-radius:15px; background:rgba(11,18,28,.76); overflow:hidden; }.component-group > header { display:flex; justify-content:space-between; padding:13px 16px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.018); }.component-group > header span { font-size:11px; font-weight:800; }.component-group > header code,.panel-heading code { color:var(--dim); font:700 8px ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.1em; }
.component-row { min-height:80px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; padding:13px 16px; border-bottom:1px solid rgba(148,176,198,.09); }.component-row:last-child { border:0; }.component-row strong,.component-row small { display:block; }.component-row strong { font-size:12px; }.component-row small { max-width:390px; margin-top:4px; color:var(--dim); font-size:9px; }.component-data { text-align:right; }.component-data code { display:block; color:#c9d7e0; font:700 10px ui-monospace,SFMono-Regular,Consolas,monospace; }.state-label { display:block; margin-top:5px; font:750 7px ui-monospace,SFMono-Regular,Consolas,monospace; text-transform:uppercase; }.state-label.operational { color:var(--green); }.state-label.degraded { color:var(--amber); }.state-label.outage { color:var(--red); }
.skeleton { height:200px; border:1px solid var(--line); border-radius:15px; background:linear-gradient(100deg,var(--surface),var(--surface-2),var(--surface)); background-size:200% 100%; animation:shimmer 1.4s infinite; } @keyframes shimmer { to { background-position:-200% 0; } }
.split-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:14px; margin-bottom:76px; }.panel { border:1px solid var(--line); border-radius:16px; background:rgba(11,18,28,.76); }.split-grid > .panel { padding:23px; }.panel-note { margin:-7px 0 22px; color:var(--dim); font-size:9px; }.availability-rows { display:grid; gap:14px; }.availability-row > div:first-child { display:flex; justify-content:space-between; gap:15px; margin-bottom:6px; font-size:9px; }.availability-row strong { font:750 9px ui-monospace,SFMono-Regular,Consolas,monospace; }.empty { padding:35px 10px; color:var(--dim); font-size:10px; text-align:center; }
.availability-track { display:block; width:100%; height:4px; overflow:hidden; border:0; border-radius:20px; background:#16212d; appearance:none; }.availability-track::-webkit-progress-bar { background:#16212d; }.availability-track::-webkit-progress-value { background:var(--green); }.availability-track.degraded::-webkit-progress-value { background:var(--amber); }.availability-track.outage::-webkit-progress-value { background:var(--red); }.availability-track::-moz-progress-bar { background:var(--green); }.availability-track.degraded::-moz-progress-bar { background:var(--amber); }.availability-track.outage::-moz-progress-bar { background:var(--red); }
.incident-list { display:grid; gap:10px; }.incident { padding:13px; border:1px solid var(--line); border-radius:10px; }.incident > div { display:flex; justify-content:space-between; margin-bottom:8px; }.incident span { color:var(--red); font:800 7px ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.12em; }.incident.resolved span { color:var(--green); }.incident time,.incident small { color:var(--dim); font-size:8px; }.incident strong { display:block; font-size:10px; }.incident small { display:block; margin-top:5px; }.no-incidents { min-height:190px; display:flex; align-items:center; justify-content:center; gap:14px; color:var(--muted); }.no-incidents i { display:grid; width:35px; height:35px; place-items:center; border:1px solid rgba(66,211,146,.25); border-radius:50%; color:var(--green); font-style:normal; }.no-incidents strong,.no-incidents span { display:block; }.no-incidents strong { font-size:11px; }.no-incidents span { margin-top:4px; color:var(--dim); font-size:8px; }
.protocol { margin-bottom:90px; padding:25px; display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:14px; }.protocol p:not(.eyebrow) { max-width:620px; margin:8px 0 0; color:var(--muted); font-size:10px; }.protocol > a { min-width:190px; padding:14px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; border:1px solid var(--line); border-radius:10px; color:inherit; text-decoration:none; }.protocol > a:hover { border-color:rgba(92,225,230,.35); }.protocol a span { color:var(--green); font:800 7px ui-monospace,SFMono-Regular,Consolas,monospace; }.protocol a code { font:700 9px ui-monospace,SFMono-Regular,Consolas,monospace; }.protocol a b { color:var(--dim); font-size:8px; }
footer { padding:25px 0; border-top:1px solid var(--line); color:var(--dim); font:700 8px ui-monospace,SFMono-Regular,Consolas,monospace; }.site-footer .shell,footer .shell { display:flex; justify-content:space-between; gap:20px; }
.not-found { min-height:100vh; display:grid; place-items:center; text-align:center; }.not-found code { color:var(--red); }.not-found h1 { margin:15px 0; }.not-found p { color:var(--muted); }.not-found a { color:var(--cyan); }
@media(max-width:980px){.metric-grid{grid-template-columns:repeat(3,1fr)}.metric-grid article:nth-child(3){border-right:0}.metric-grid article:nth-child(-n+3){border-bottom:1px solid var(--line)}.component-groups,.split-grid{grid-template-columns:1fr}.protocol{grid-template-columns:1fr 1fr}.protocol>div{grid-column:1/-1}}
@media(max-width:650px){.shell{width:min(100% - 24px,1180px)}nav{display:none}.hero{padding-top:52px;align-items:flex-start;flex-direction:column}.refresh{width:100%}.overall{grid-template-columns:auto 1fr;padding:22px 18px}.overall-symbol{width:45px;height:45px}.overall-code{grid-column:1/-1;min-width:0;text-align:left}.metric-grid{grid-template-columns:repeat(2,1fr)}.metric-grid article{border-bottom:1px solid var(--line)!important}.metric-grid article:nth-child(even){border-right:0}.section-heading{align-items:flex-start;flex-direction:column}.legend{flex-wrap:wrap}.component-row{grid-template-columns:auto 1fr}.component-data{grid-column:2;text-align:left}.protocol{grid-template-columns:1fr}.protocol>div{grid-column:auto}.protocol>a{min-width:0}footer .shell{flex-direction:column}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}