:root{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#e3eaf2;background:#0b1726;color-scheme:dark}
*{box-sizing:border-box}body{margin:0;min-width:280px}main{max-width:1040px;margin:0 auto;padding:48px 28px}
header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:26px;border-bottom:1px solid #304254}
.eyebrow{font-size:14px;letter-spacing:.16em;color:#92bdd4}.phase{font-size:12px;border:1px solid #446679;padding:7px 10px;border-radius:6px;color:#b4d6e7}
h1{font-size:clamp(26px,4vw,38px);font-weight:600;letter-spacing:-.02em;margin:36px 0 10px}.intro{color:#9db0c5;line-height:1.6;margin-bottom:28px}
.connection{border:1px solid #30485f;background:#122237;border-radius:12px;padding:22px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px 18px}
#status{font-size:19px;font-weight:600}#status::before{content:"";display:inline-block;width:9px;height:9px;background:#8fa2b8;border-radius:50%;margin-right:10px}
#status[data-state=connected]::before{background:#5ed8ac}#status[data-state=error]::before{background:#f0a66f}
#message{margin:0;color:#acbed0;line-height:1.5;grid-column:1}button{grid-column:2;grid-row:1/3;padding:12px 16px;background:#a8d9eb;color:#102231;border:0;border-radius:7px;font:inherit;font-weight:600;cursor:pointer}
button:hover{background:#c8eaf6}button:disabled{opacity:.55;cursor:wait}button:focus-visible{outline:3px solid #f2c670;outline-offset:4px}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0}.metrics div{border:1px solid #2b4056;border-radius:10px;padding:22px;background:#102033}dt{color:#9db4c8;font-size:14px}dd{margin:12px 0 0;font-size:34px;font-weight:550}
.details{border-top:1px solid #304254;padding-top:12px;color:#9db4c8;font-size:14px}.details p{line-height:1.7}time,code{display:block;color:#e0eaf3;font-size:14px;overflow-wrap:anywhere;margin-top:4px}
footer{font-size:13px;color:#91a5ba;line-height:1.7;margin-top:30px}.local-mode{padding:14px 18px;border:1px solid #8a7439;color:#ead595;border-radius:8px;margin:20px 0;font-size:14px}
@media(max-width:620px){main{padding:28px 18px}.metrics{grid-template-columns:repeat(2,1fr)}.connection{grid-template-columns:1fr}button{grid-column:1;grid-row:auto;margin-top:8px}.eyebrow{font-size:11px}.phase{white-space:nowrap}.metrics div{padding:18px}dd{font-size:29px}}