:root { color-scheme: dark; --bg: #0d1117; --panel: #161b22; --line: #30363d; --text: #e6edf3; --muted: #9da7b3; --go: #238636; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 15px system-ui, sans-serif; }
canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#menu { position: fixed; inset: 0; display: grid; place-content: center; gap: 12px; padding: 16px; background: var(--bg); }
#menu[hidden] { display: none; }
#hud { position: fixed; left: 16px; top: 12px; font-size: 22px; font-weight: 700; background: #0d1117cc; padding: 6px 12px; border-radius: 8px; }
select, button, .pick { font: inherit; padding: 10px 14px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: inherit; }
button { background: var(--go); cursor: pointer; }
button:disabled, select:disabled { opacity: .5; cursor: default; }
.note { max-width: 48ch; margin: 0; color: var(--muted); line-height: 1.4; }
h1 { margin: 0; }