:root{font-family:Arial,sans-serif;color:#f4ead8;background:#202a2b}*{box-sizing:border-box}body{margin:0}canvas{position:fixed;inset:0;width:100%;height:100%}aside{position:fixed;top:16px;left:16px;width:270px;max-height:calc(100dvh - 32px);overflow:auto;background:#17201def;border:1px solid #b99858;padding:18px}small{color:#f4c77a;letter-spacing:2px;font-size:10px}h1{font:25px Georgia,serif;margin:10px 0 18px}label{display:block;font-size:12px;margin:9px 0}select,button{display:block;min-height:44px;width:100%;margin-top:5px;background:#2c3734;color:#fff5df;border:1px solid #b9985877;padding:8px;font:14px Arial}button{cursor:pointer}button:focus-visible,select:focus-visible{outline:3px solid #ffd074}output{display:block;margin-top:14px;font-size:12px;line-height:1.5}pre{font-size:10px;white-space:pre-wrap;overflow-wrap:anywhere}body[data-clean=true] aside{opacity:.92}@media(max-width:700px){aside{inset:auto 0 0;width:100%;max-height:40dvh;padding:10px 16px}h1{font-size:20px;margin:6px 0}label{display:inline-block;width:48%;vertical-align:top;margin-right:1%}button{display:inline-block;width:48%;margin-right:1%}}