:root { color-scheme: dark; font: 16px/1.5 system-ui, sans-serif; background: #111319; color: #e4e7ee; }
body { margin: 0; }
main { max-width: 1100px; margin: 32px auto; padding: 0 24px 40px; }
header { border-bottom: 1px solid #3b4050; margin-bottom: 24px; }
h1 { font-size: 40px; letter-spacing: 5px; margin: 0; }
header p { margin: 4px 0 16px; color: #afb8c9; }
.setup { background: #1c202a; padding: 16px 20px; border-radius: 8px; }
#status { margin-top: 0; }
.muted { color: #afb8c9; font-size: 14px; }
select, button { background: #2a3140; color: inherit; border: 1px solid #526079; padding: 9px 12px; border-radius: 5px; font: inherit; }
select { margin-left: 8px; max-width: 100%; }
button { cursor: pointer; }
button:disabled { opacity: .45; cursor: default; }
button:not(:disabled):hover { background: #3c4960; }
.buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
progress { display: block; width: 100%; accent-color: #aaa4fb; }
.viewport { margin-top: 24px; text-align: center; }
canvas { display: block; margin: auto; width: min(100%, 800px); height: auto; background: #000; outline: 1px solid #363b49; }
canvas:focus { outline: 2px solid #aaa4fb; }
#game-surface { position: relative; margin: auto; width: min(100%, 800px); background: #000; }
#game-surface:fullscreen { width: 100%; height: 100%; display: grid; place-items: center; background: #000; }
#game-surface:fullscreen canvas { width: min(100vw, calc(100vh * var(--canvas-aspect, 1.333333333))); height: auto; }
#movie-overlay { position: absolute; inset: 0; z-index: 2; background: #000; }
#movie-overlay[hidden] { display: none; }
#movie-video { display: block; width: 100%; height: 100%; object-fit: contain; }
.movie-controls { position: absolute; bottom: 12px; left: 12px; right: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px; background: #000b; font-size: 14px; }
.movie-controls span { flex: 1; }
#canvas-note { color: #afb8c9; font-size: 13px; }
.controls { font-size: 14px; }
details { margin-top: 20px; }
summary { cursor: pointer; }
pre { font: 12px/1.5 Consolas, monospace; background: #080a10; padding: 16px; min-height: 80px; max-height: 320px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 600px) { main { padding: 0 12px 24px; } select { display: block; margin: 8px 0 0; } }