*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#101916;color:#dbe8df;font:14px/1.65 system-ui,sans-serif}body{display:flex;justify-content:center;align-items:center;user-select:none}main{display:flex;align-items:center;justify-content:center;height:100%;width:100%}canvas{display:block;touch-action:none;cursor:crosshair}aside{position:fixed;z-index:5;left:24px;top:30px;width:230px}summary{font-size:19px;font-weight:700;letter-spacing:.09em;cursor:pointer;list-style:none}summary span{display:block;font-size:12px;color:#a2c4ac;letter-spacing:.3em;margin-top:6px}.intro{font-family:Georgia,serif;font-size:20px;line-height:1.5;color:#b3ccba;margin:30px 0}p{color:#9cb5a6;margin:16px 0}b{color:#edf3ee}output{display:block;border-top:1px solid #314a3b;padding-top:18px;margin-top:25px;font-size:12px;color:#bcdbbf}footer{font-size:11px;color:#819b89;margin-top:28px}a{color:#adcbb8;text-underline-offset:3px}@media(max-width:1100px){aside{left:10px;top:10px;width:210px;max-height:calc(100% - 20px);overflow:auto;border-radius:10px;background:#101916ed;padding:12px}summary{font-size:12px}summary span{display:inline;font-size:10px;margin-left:6px}.intro{font-size:17px;margin:10px 0}details:not([open]){width:max-content}aside:has(details:not([open])){width:auto}p{font-size:12px;margin:10px 0}output{margin-top:12px;padding-top:10px}footer{margin-top:12px}}