:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; color: #eafff5; background: radial-gradient(circle at 50% 0, #164a3d, #061510 58%); }
main { width: min(44rem, calc(100% - 2rem)); padding: clamp(2rem, 7vw, 5rem); border: 1px solid #4cd6a544; border-radius: 2rem; background: #091f18dd; box-shadow: 0 2rem 6rem #0008; }
.eyebrow { color: #78e8bd; letter-spacing: .15em; text-transform: uppercase; font-weight: 700; }
h1 { margin: .35rem 0 2rem; font-size: clamp(2.3rem, 8vw, 4.5rem); line-height: 1; }
#status { display: flex; align-items: center; gap: 1rem; padding: 1.15rem; border-radius: 1rem; background: #b8ffdd0d; }
#status p { margin: .3rem 0 0; color: #b1c9bf; }
.beacon { flex: 0 0 auto; width: 1rem; height: 1rem; border-radius: 50%; background: #f9cc61; box-shadow: 0 0 1.2rem currentColor; }
.online .beacon { color: #59eba9; background: currentColor; }
.offline .beacon { color: #ff7b88; background: currentColor; }