:root { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #f7f7f8; background: #0b0d12; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 20% 0%, #172037 0, transparent 38%), #0b0d12; }
main { width: min(760px, 100%); padding: clamp(28px, 7vw, 64px); border: 1px solid #2a3040; border-radius: 28px; background: #14171fcc; box-shadow: 0 28px 100px #000a; backdrop-filter: blur(18px); }
.eyebrow { color: #8ca4d8; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
h1 { margin: 12px 0; font-size: clamp(2.4rem, 8vw, 4.6rem); line-height: .95; letter-spacing: -.055em; }
.lede { max-width: 570px; color: #b8c0d3; font-size: 1.08rem; line-height: 1.65; }
.status-card { margin: 36px 0 28px; padding: 22px; border: 1px solid #2a3040; border-radius: 18px; background: #0f1219; }
.status { display: inline-flex; align-items: center; gap: 10px; padding: 9px 13px; border-radius: 999px; color: #ffd98a; background: #2d2515; font-weight: 700; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 5px #f59e0b1c; }
.ok .dot { background: #22c55e; }
.ok { color: #8eeaaa; background: #142a1d; }
dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 22px 0 0; }
dl div { min-width: 0; }
dt { margin-bottom: 6px; color: #778198; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; }
dd { margin: 0; overflow: hidden; color: #e8ebf3; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
nav { display: flex; flex-wrap: wrap; gap: 10px; }
a { padding: 10px 14px; border: 1px solid #30384b; border-radius: 10px; color: #cbd8f4; text-decoration: none; transition: background .15s ease, border-color .15s ease; }
a:hover, a:focus-visible { border-color: #5873ad; background: #1c2332; outline: none; }
footer { margin-top: 34px; color: #6f788b; font-size: .82rem; }
@media (max-width: 580px) { dl { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }