:root { color-scheme: dark; --bg:#081112; --panel:#102526; --line:rgba(174,233,216,.16); --text:#eff9f6; --muted:#9cafaa; --lake:#78dfc4; --warm:#efbd79; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--text); background:radial-gradient(circle at 75% 0,rgba(62,154,136,.18),transparent 32rem),var(--bg); font-family:Inter,"PingFang SC",system-ui,sans-serif; }
main { width:min(1080px,calc(100% - 36px)); margin:auto; padding-bottom:70px; }
nav { height:84px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); color:var(--muted); font-size:13px; }
nav a { color:var(--text); text-decoration:none; }
header { padding:90px 0 58px; max-width:780px; }
.eyebrow { color:var(--lake); font:800 11px/1 ui-monospace,monospace; letter-spacing:.18em; }
h1 { margin:20px 0; font-size:clamp(48px,8vw,86px); line-height:1; letter-spacing:-.055em; }
header>p:last-child { max-width:700px; color:var(--muted); font-size:18px; line-height:1.8; }
.status { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-radius:18px; overflow:hidden; background:rgba(15,35,36,.72); }
.status div { padding:22px; display:flex; flex-direction:column; gap:8px; border-right:1px solid var(--line); }
.status div:last-child { border:0; }
.status span { color:var(--muted); font-size:12px; }
.status strong { font-size:15px; }
.cards { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; padding-top:30px; }
.cards>a,.cards>div { position:relative; min-height:210px; padding:28px; border:1px solid var(--line); border-radius:18px; background:var(--panel); text-decoration:none; color:var(--text); }
.cards>a:hover { border-color:rgba(120,223,196,.48); transform:translateY(-3px); }
.cards>a { transition:.2s ease; }
.cards small { color:var(--lake); font-weight:800; letter-spacing:.16em; }
.cards h2 { margin:34px 0 10px; font-size:25px; }
.cards p { margin:0; color:var(--muted); line-height:1.7; }
.cards b { position:absolute; right:25px; top:25px; color:var(--warm); font-size:13px; }
.coming { opacity:.62; }
#live-status.ok,#node-state.ok { color:var(--lake); }
@media(max-width:700px){ nav{height:70px}.status,.cards{grid-template-columns:1fr}.status div{border-right:0;border-bottom:1px solid var(--line)}header{padding-top:65px}.cards>a,.cards>div{min-height:190px} }