:root{background:#0f141b;color:#eef3f8;font-family:Arial,Helvetica,sans-serif}*{box-sizing:border-box}body{margin:0}main{margin:0 auto;max-width:1080px;padding:28px}header{align-items:center;display:flex;justify-content:space-between;gap:16px;margin-bottom:18px}.eyebrow{color:#8ea0b8;font-size:13px;font-weight:700;letter-spacing:.08em;margin:0 0 6px;text-transform:uppercase}h1,h2{margin:0}h1{font-size:30px}h2{font-size:18px;margin-bottom:12px}.status{background:#334155;border-radius:999px;color:#fff;font-weight:700;padding:8px 12px}.status.live{background:#15803d}.connection,.raw{background:#171e29;border:1px solid #2d3748;border-radius:8px;padding:16px}.connection{align-items:center;display:grid;grid-gap:10px;gap:10px;grid-template-columns:120px 1fr;margin-bottom:14px}label{color:#a7b3c5;font-size:14px;font-weight:700}input{background:#0f141b;border:1px solid #344054;border-radius:6px;color:#eef3f8;font-size:15px;min-height:42px;padding:0 12px;width:100%}.metrics{display:grid;grid-gap:12px;gap:12px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}article{background:#171e29;border:1px solid #2d3748;border-radius:8px;padding:16px}article span{color:#a7b3c5;display:block;font-size:13px;font-weight:700;margin-bottom:8px;text-transform:uppercase}article strong{display:block;font-size:25px;overflow-wrap:anywhere}.class0{color:#22c55e}.class1{color:#facc15}.class2{color:#fb923c}.class3{color:#ef4444}.controls{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}button{border:0;border-radius:6px;color:#fff;cursor:pointer;font-size:15px;font-weight:800;min-height:46px;padding:0 16px}button.fire{background:#dc2626}button.quake{background:#2563eb}button.clear{background:#475569}button.graph{background:#7c3aed}button.graph:hover{background:#6d28d9}pre{color:#d7e0ea;margin:0;overflow-x:auto;white-space:pre-wrap}@media (max-width:640px){main{padding:18px}.connection,header{align-items:stretch;grid-template-columns:1fr}}