html, body { margin: 0; height: 100%; background: #000; color: #ccc; font-family: system-ui, sans-serif; }
main { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 8px; }
#stage { position: relative; width: min(100vw, calc(100vh * 4 / 3 - 40px)); aspect-ratio: 4 / 3; background: #000; }
#screen { width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; cursor: none; display: block; }
#overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.85); text-align: center; padding: 16px; }
#overlay[hidden] { display: none; }
#overlay h1 { letter-spacing: 0.3em; color: #f0c020; margin: 0 0 12px; }
#drop { border: 2px dashed #666; padding: 16px 24px; max-width: 480px; }
#drop.active { border-color: #f0c020; }
.btn { color: #f0c020; text-decoration: underline; cursor: pointer; }
.small { font-size: 0.8em; color: #888; }
#help { font-size: 0.8em; color: #888; text-align: center; padding: 0 12px; }