:root{--bg:#111;--bar:#1b1b1b;--line:#2e2e2e;--text:#d8d8d8;--dim:#888}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:14px system-ui,-apple-system,"Segoe UI",sans-serif;overflow:hidden}
body{display:flex;flex-direction:column}
a{color:var(--text);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid #fff;outline-offset:2px}
nav{height:36px;min-height:36px;display:flex;align-items:center;gap:8px;padding:0 10px;background:var(--bar);border-bottom:1px solid var(--line);z-index:5}
nav .title{margin-right:auto;color:var(--dim)}
button{font:inherit;cursor:pointer;color:var(--text);background:none;border:0;padding:4px 8px;border-radius:3px}
button:hover:not(:disabled){background:#2a2a2a}
button:disabled{opacity:.35;cursor:default}
#stage{position:relative;flex:1;min-height:0;background:#000}
canvas{display:block;width:100%;height:100%;outline:none;image-rendering:pixelated}
#terminal{height:100%;padding:8px 12px;overflow:hidden}
#loading{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background:#000e;z-index:3;padding:30px;text-align:center;white-space:pre-line;font-size:16px}
#loading[hidden]{display:none}
#notice{display:flex;align-items:center;min-height:26px;padding:3px 12px;background:var(--bar);border-top:1px solid var(--line);color:var(--dim);font-size:12px}
#help{position:absolute;right:12px;top:12px;max-width:400px;background:var(--bar);border:1px solid var(--line);border-radius:4px;padding:16px 18px;z-index:4;font-size:14px}
#help p{line-height:1.55}
#help[hidden]{display:none}
@media(max-width:700px){nav .title{display:none}nav>a{margin-right:auto}}