:root{--bg:#000;--fg:#ccc;--dim:#888;--line:#2c2c2c;--panel:#111;--acc:#9c9;--focus:#7ad}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--fg);font:16px system-ui,sans-serif}body{overflow-x:hidden}#pick{max-width:38em;margin:4vh auto;padding:0 1em 2em}#pick h1{font-size:1.4em}#pick h2{font-size:1.05em;margin:1.4em 0 .4em}#status{margin-top:1em;min-height:1.4em;color:var(--acc)}#err{color:#f88}#stage{display:none;position:fixed;top:0;right:0;bottom:0;left:0;align-items:center;justify-content:center;background:#000}#stage:fullscreen{width:100vw;height:100vh}canvas{background:#000;touch-action:none;image-rendering:pixelated;outline:none}small,.hint{color:var(--dim)}code,kbd{font:.9em ui-monospace,monospace}kbd{background:#222;border:1px solid #444;border-radius:3px;padding:0 .35em;white-space:nowrap}a{color:#8bd}button{font:inherit;color:var(--fg);background:#222;border:1px solid #555;border-radius:4px;padding:.45em .9em;cursor:pointer;min-height:2.5em}button:hover{background:#2c2c2c}button:disabled{opacity:.5;cursor:default}#play{background:#1d3a1d;border-color:#5a5}:focus-visible{outline:2px solid var(--focus);outline-offset:2px}#fileinputs label{display:block;margin:1em 0 .3em}input[type=file]{max-width:100%}#settings fieldset{border:1px solid var(--line);border-radius:6px;background:var(--panel);margin:.8em 0;padding:.3em 1em .8em;min-width:0}#settings legend{padding:0 .4em;color:var(--acc);font-weight:600}.row{display:flex;flex-wrap:wrap;align-items:center;gap:.2em 1em;padding:.55em 0;border-top:1px solid var(--line)}.row:first-of-type{border-top:0}.row>label{flex:1 1 11em;min-width:0}.row>select{flex:1 1 15em;min-width:0;max-width:100%;font:inherit;color:var(--fg);background:#1c1c1c;border:1px solid #555;border-radius:4px;padding:.4em;min-height:2.5em}.row>input[type=checkbox]{flex:0 0 auto;width:1.5em;height:1.5em;margin:0 .3em;accent-color:#6b6}.row .hint{flex:1 0 100%;font-size:.85em}.row:has(>input[type=checkbox])>label{order:1}.row:has(>input[type=checkbox])>input{order:2;margin-left:auto}.row:has(>input[type=checkbox]) .hint{order:3}#settingsBox>summary{cursor:pointer}#settingsBox>summary h2{display:inline}#settingsBtns{display:flex;gap:.6em;flex-wrap:wrap;align-items:center}details.keys{border:1px solid var(--line);border-radius:6px;background:var(--panel);padding:.2em 1em;margin:.8em 0}details.keys>summary{cursor:pointer;padding:.5em 0;color:var(--acc);font-weight:600}.kt{width:100%;border-collapse:collapse;margin:.2em 0 .8em}.kt caption{text-align:left;font-weight:600;padding:.5em 0 .2em}.kt td{padding:.25em .4em .25em 0;vertical-align:top;border-top:1px solid var(--line)}.kt td:first-child{width:42%}.note{font-size:.88em;color:var(--dim)}#helpBtn{display:none;position:fixed;top:max(6px,env(safe-area-inset-top));left:max(6px,env(safe-area-inset-left));z-index:5;width:2.2em;min-height:0;height:2.2em;padding:0;border-radius:50%;opacity:.45}#helpBtn:hover,#helpBtn:focus-visible{opacity:1}#help{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;background:#000000f7;overflow-y:auto;-webkit-overflow-scrolling:touch}#help[hidden]{display:none}#help .inner{max-width:38em;margin:0 auto;padding:1em 1em 3em}#help .top{display:flex;justify-content:space-between;align-items:center;gap:1em}#help h2{margin:.2em 0;font-size:1.2em}
