*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0b0d10;color:#e6e9f0;
  font-family:"Space Grotesk",-apple-system,"Segoe UI",Roboto,sans-serif}
.bar{display:flex;align-items:center;gap:10px;height:52px;padding:0 12px;
  border-bottom:1px solid #1b202b;background:#0e1117;position:sticky;top:0;z-index:5}
.brand{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;letter-spacing:-.01em}
.mark{display:grid;place-items:center;width:22px;height:22px;border-radius:5px;
  border:1px solid #2a3346;background:#141a24;color:#6e9bff;font:600 11px/1 ui-monospace,monospace}
.join{display:flex;gap:6px;margin-left:auto}
.join input{width:104px;background:#131926;border:1px solid #2a3346;color:#e6e9f0;
  border-radius:6px;padding:7px 9px;font:500 13px/1 ui-monospace,monospace;letter-spacing:.12em;
  text-transform:uppercase;outline:none}
.join input:focus{border-color:#4a6fd0}
.join button,.ghost{background:#2460e0;color:#fff;border:0;border-radius:6px;
  padding:8px 13px;font:600 13px/1 inherit;cursor:pointer}
.join button:active{transform:translateY(1px)}
.ghost{background:#151b26;border:1px solid #2a3346;color:#c7d0e0;padding:7px 10px}
.badge{font:500 10px/1 ui-monospace,monospace;text-transform:uppercase;letter-spacing:.1em;
  padding:5px 8px;border-radius:4px;border:1px solid #2a3346;color:#8b95a8}
.badge.on{color:#3ddc97;border-color:#1f5c46}
.badge.err{color:#ff8a8a;border-color:#5c2626}
.stage{position:relative;height:calc(100% - 52px);display:grid;place-items:center;background:#07090c}
canvas{max-width:100%;max-height:100%;width:auto;height:auto;display:block;
  image-rendering:auto;background:#000}
.overlay{position:absolute;inset:0;display:grid;place-content:center;text-align:center;
  padding:24px;gap:6px}
.overlay h1{font-size:20px;margin:0}
.overlay p{margin:2px 0;color:#8b95a8;font-size:13.5px;max-width:34ch}
.overlay .hint{font-size:12px;color:#5f6a7d}
.overlay.hidden{display:none}
.hud{position:absolute;left:10px;bottom:10px;display:flex;gap:10px;
  font:500 11px/1 ui-monospace,monospace;color:#9aa4b8;background:#0b0f16cc;
  border:1px solid #1e2634;border-radius:6px;padding:6px 9px;backdrop-filter:blur(6px)}
.hud[hidden]{display:none}
@media (max-width:520px){
  .brand{font-size:0} .brand .mark{font-size:11px}
  .join input{width:86px}
}
body:fullscreen .bar{display:none}
body:fullscreen .stage{height:100%}