:root{color:#e8ecf8;font-synthesis:none;background:#080b14;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 30% 10%,#172545 0,#0000 36rem),#080b14;min-width:320px;min-height:100vh;margin:0}main{width:min(1180px,100% - 32px);margin:0 auto;padding:48px 0 64px}header{gap:8px;margin-bottom:24px;display:grid}h1,p{margin:0}h1{letter-spacing:-.05em;font-size:clamp(2rem,7vw,4.5rem);line-height:.95}header>p:last-child{color:#a9b3ca;max-width:620px;margin-top:8px}.eyebrow{color:#77e4c8;letter-spacing:.14em;font:700 .72rem/1.2 ui-monospace,monospace}.status{color:#a9b3ca;align-items:center;gap:10px;min-height:44px;margin-bottom:12px;display:flex}.status-dot{background:#f0b46d;border-radius:50%;flex:none;width:9px;height:9px;box-shadow:0 0 12px}.status-dot.online{color:#77e4c8;background:currentColor}.status code{color:#6f7890;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.metric{color:#8a96b0;letter-spacing:.06em;text-transform:uppercase;margin-left:auto;font:700 .68rem/1 ui-monospace,monospace}.metric+.metric{margin-left:2px}.arena{aspect-ratio:16/10;background:#060913;border:1px solid #27324b;border-radius:24px;position:relative;overflow:hidden;box-shadow:0 30px 90px #00000059}.arena canvas{width:100%;height:100%;display:block}.controls{color:#9eabc4;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);letter-spacing:.07em;background:#070b15b8;border:1px solid #91a6cb2b;border-radius:12px;align-items:center;gap:12px;padding:10px 12px;font:700 .65rem/1 ui-monospace,monospace;display:flex;position:absolute;bottom:18px;left:18px;right:18px;box-shadow:0 12px 32px #0006}kbd{color:#dfe7f7;font:inherit;background:#131b2a;border:1px solid #53617c;border-bottom-width:2px;border-radius:5px;padding:3px 6px}.legend{align-items:center;gap:6px;margin-left:auto;display:inline-flex}.legend+.legend{margin-left:0}.legend:before{content:"";background:#f0b46d;border-radius:50%;width:8px;height:8px;box-shadow:0 0 12px #f0b46d}.legend.local:before{background:#77e4c8;box-shadow:0 0 12px #77e4c8}@media (width<=600px){main{padding-top:28px}.arena{aspect-ratio:1;border-radius:16px}.status{flex-wrap:wrap}.metric{margin-left:0}.controls{flex-wrap:wrap;bottom:10px;left:10px;right:10px}.legend{margin-left:0}}