:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background:#080b12; color:#f3f5f8; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; background:radial-gradient(circle at 20% 10%,#18314c 0,transparent 35%),#080b12; }
main { width:min(92vw,560px); padding:48px; border:1px solid #273142; border-radius:24px; background:rgba(15,20,31,.9); box-shadow:0 24px 80px #0008; }
.eyebrow { color:#63d5ff; letter-spacing:.18em; font-size:.75rem; font-weight:700; }
h1 { font-size:clamp(2rem,8vw,4rem); margin:.25rem 0; }
.intro,.muted { color:#aab4c4; }
.card { display:flex; justify-content:space-between; margin:2rem 0; padding:1rem; border-radius:14px; background:#151c29; }
.viewer { margin:2rem 0 1rem; overflow:hidden; border-radius:14px; background:#020307; aspect-ratio:16/9; }
.viewer img { display:block; width:100%; height:100%; object-fit:contain; }
.dot { display:inline-block; width:10px; height:10px; margin-right:.65rem; border-radius:50%; background:#f4b942; box-shadow:0 0 14px currentColor; }
.dot.online { background:#42e394; }
.dot.offline { background:#ff647c; }
.button,button { display:block; width:100%; padding:.9rem 1rem; border:0; border-radius:12px; font:inherit; font-weight:700; text-align:center; cursor:pointer; }
.button { color:#071018; background:#63d5ff; text-decoration:none; }
button { margin-top:.75rem; color:#d7deea; background:transparent; border:1px solid #344158; }