:root {
  font-family: system-ui, sans-serif;
  color: #e8e8e8;
  background: #12141a;
}
body { margin: 0; padding: 1rem 1.25rem 2rem; }
header h1 { margin: 0 0 0.25rem; font-size: 1.25rem; }
.hint { margin: 0 0 1rem; color: #9aa3b2; font-size: 0.9rem; }
.controls {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center;
  margin-bottom: 0.75rem;
}
.controls label { font-size: 0.85rem; display: flex; gap: 0.35rem; align-items: center; }
.controls input[type="text"], .controls input[type="number"] {
  background: #1c2030; border: 1px solid #333a4d; color: #fff;
  border-radius: 4px; padding: 0.25rem 0.4rem; width: 7rem;
}
button {
  background: #3d6cf5; color: #fff; border: 0; border-radius: 4px;
  padding: 0.35rem 0.75rem; cursor: pointer; font-weight: 600;
}
button:disabled { opacity: 0.45; cursor: default; }
button#btnDisconnect { background: #5a6278; }
.status {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.25rem 1rem; font-size: 0.8rem; color: #b6becc; margin-bottom: 0.75rem;
}
.status span { color: #f0f3fa; font-variant-numeric: tabular-nums; }
.stage {
  position: relative; display: inline-block; background: #0a0c10;
  border: 1px solid #2a3142; max-width: 100%; overflow: auto;
}
#fb, #cursor { display: block; image-rendering: pixelated; }
#cursor { position: absolute; left: 0; top: 0; pointer-events: none; }