:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #0a0a0a;
  color: #c8c8c8;
  font: 14px/1.45 ui-sans-serif, system-ui, -apple-system, Inter, sans-serif;
  overflow: hidden;
}
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid #1c1c1c;
  background: #0a0a0a;
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: 12px;
  user-select: none;
}
header .title { color: #e8e8e8; font-weight: 600; letter-spacing: 0.02em; }
header .meta { color: #666; }
header a { color: #3b82f6; text-decoration: none; }
header a:hover { color: #60a5fa; }
#stage {
  position: fixed;
  top: 41px;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #050505;
}
#canvas {
  display: block;
  background: #000;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  width: min(800px, calc(100vw - 24px), calc((100vh - 65px) * 4 / 3));
  height: min(600px, calc(100vh - 65px), calc((100vw - 24px) * 3 / 4));
  outline: 1px solid #1c1c1c;
  cursor: default;
}
#status {
  position: fixed;
  bottom: 10px;
  left: 16px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: #555;
  pointer-events: none;
}
#loading {
  position: fixed;
  inset: 41px 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  background: #050505;
  z-index: 5;
}
#loading.hidden { display: none; }