:root { color-scheme: dark; --bg:#080b0f; --panel:#10151b; --line:#26303a; --text:#f3f6f8; --muted:#8f9ba6; --cyan:#35e3d1; --amber:#f5b847; --red:#ff6376; --blue:#78a9ff; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.24; 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:52px 52px; mask-image:linear-gradient(to bottom,black,transparent 85%); }
a { color:inherit; text-decoration:none; }
.topbar { min-height:72px; padding:0 clamp(24px,5vw,76px); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:28px; position:relative; z-index:1; }
.brand { font-weight:700; letter-spacing:-.03em; font-size:20px; white-space:nowrap; }.brand span { color:var(--cyan); }
.brand img { display:block; width:174px; height:auto; max-width:100%; }
.module-controls { margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.module-controls .service-meta { margin:0 0 8px; }
.module-state { color:var(--muted); font-size:14px; margin:0 0 12px; }
.module-controls button { width:100%; font:600 12px/1.3 ui-monospace,monospace; }
nav { display:flex; align-items:center; gap:28px; font:600 11px/1 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.1em; } nav a:hover { color:var(--cyan); }
button { border:1px solid var(--line); background:transparent; color:var(--text); font:inherit; letter-spacing:inherit; padding:10px 14px; cursor:pointer; } button:hover { border-color:var(--cyan); color:var(--cyan); } button:disabled { opacity:.5; }
main { position:relative; z-index:1; }.hero,.content-section { padding:clamp(64px,9vw,126px) clamp(24px,7vw,108px); }.hero { border-bottom:1px solid var(--line); }
.eyebrow { color:var(--cyan); font:600 11px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.16em; margin:0 0 24px; }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(310px,.6fr); gap:clamp(48px,8vw,130px); align-items:end; }
h1 { font-size:clamp(54px,8vw,112px); line-height:.83; letter-spacing:-.075em; margin:0; font-weight:650; } h1 span { color:#596570; }
.intro { max-width:650px; color:var(--muted); font-size:clamp(16px,1.5vw,20px); line-height:1.65; margin:38px 0 0; }
.overall-card { border:1px solid var(--line); background:rgba(16,21,27,.84); padding:28px; }.card-label,.service-meta,.metric-label { margin:0; color:var(--muted); font:600 10px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.12em; }
.overall-line { display:flex; align-items:center; gap:12px; margin:18px 0 30px; font-size:20px; }.status-dot { width:10px; height:10px; border-radius:50%; background:var(--muted); box-shadow:0 0 18px currentColor; }.status-dot.operational { background:var(--cyan); color:var(--cyan); }.status-dot.degraded { background:var(--amber); color:var(--amber); }.status-dot.unavailable { background:var(--red); color:var(--red); }.status-dot.loading { animation:pulse 1.2s infinite; }
dl { margin:0; } dl div { display:flex; justify-content:space-between; border-top:1px solid var(--line); padding:13px 0; } dt,dd { font:600 11px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.08em; } dt { color:var(--muted); } dd { margin:0; }
.content-section { border-bottom:1px solid var(--line); }.section-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:38px; }.section-heading .eyebrow { margin-bottom:12px; }.section-heading > p { color:var(--muted); max-width:460px; line-height:1.5; text-align:right; margin:0; }
h2 { margin:0; font-size:clamp(35px,4vw,57px); letter-spacing:-.05em; }.service-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.service-card { min-height:168px; padding:24px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(16,21,27,.5); }.service-card:hover { background:rgba(20,28,35,.85); }.service-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }.service-heading h3 { margin:0; font-size:16px; }.badge { padding:5px 7px; border:1px solid currentColor; font:600 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.08em; white-space:nowrap; }.badge.operational { color:var(--cyan); }.badge.degraded { color:var(--amber); }.badge.unavailable { color:var(--red); }.badge.disabled { color:var(--muted); }
.service-detail { color:var(--muted); margin:21px 0 29px; min-height:38px; font-size:13px; line-height:1.5; }.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }.metric-card { padding:27px 24px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }.metric-value { margin:0 0 10px; font:500 clamp(25px,3vw,39px)/1 ui-monospace,SFMono-Regular,Consolas,monospace; color:var(--blue); }
footer { padding:24px clamp(24px,5vw,76px); display:flex; justify-content:space-between; color:var(--muted); font:600 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.12em; position:relative; z-index:1; }
@keyframes pulse { 50% { opacity:.25; } }
@media (max-width:900px) { .hero-grid { grid-template-columns:1fr; }.service-grid { grid-template-columns:repeat(2,1fr); }.metric-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:650px) { .topbar { align-items:flex-start; padding-top:23px; padding-bottom:19px; } nav { gap:15px; flex-wrap:wrap; justify-content:flex-end; } nav a:nth-child(-n+2) { display:none; }.section-heading { align-items:flex-start; flex-direction:column; }.section-heading > p { text-align:left; }.service-grid { grid-template-columns:1fr; }.metric-grid { grid-template-columns:repeat(2,1fr); }.hero,.content-section { padding-left:20px; padding-right:20px; } footer { padding-left:20px; padding-right:20px; } }