:root{color-scheme:dark;--controls:0px}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#111;color:#eee;font:13px system-ui,sans-serif}body{height:100dvh;display:flex;flex-direction:column}header{flex:0 0 48px;display:flex;align-items:center;justify-content:center;gap:7px;padding:0 5px}button{font:inherit;color:#fff;background:#31313a;border:1px solid #74747f;border-radius:6px;min-height:40px;padding:5px 9px;touch-action:none;user-select:none}button:focus-visible,a:focus-visible{outline:3px solid #ffda6d}button[aria-pressed=true],button.held{background:#6e4317}#stage{position:relative;flex:1;min-height:0;overflow:hidden}#c{position:absolute;display:block;touch-action:none}footer{flex:0 0 24px;text-align:center;font-size:11px;line-height:24px}a{color:#b9d6ff}#instructions{position:absolute;z-index:2;top:49px;left:5%;width:90%;background:#17171ff2;border:1px solid #888;padding:12px;line-height:1.6}#touch-controls{display:none;flex:0 0 66px;justify-content:space-between;align-items:center;padding:4px 8px;gap:8px}#touch-controls div{display:flex;gap:7px}#touch-controls button{min-width:48px;min-height:48px;padding:4px 7px;font-size:12px}@media(pointer:coarse),(max-width:900px){#touch-controls{display:flex}header strong{display:none}header{gap:4px}header button{font-size:12px;padding:4px 7px}}@media(max-width:420px){#touch-controls{padding:4px;gap:4px}#touch-controls div{gap:4px}#touch-controls button{min-width:46px;padding:4px}}
