*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#111;font:13px system-ui,sans-serif;color:#222;touch-action:none;-webkit-user-select:none;user-select:none}#c{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}#top{position:fixed;top:8px;left:8px;right:8px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}#top b{color:#fff;letter-spacing:2px;text-shadow:0 1px 3px #000;margin-right:4px}button{background:#fff;color:#2563eb;border:0;border-radius:8px;padding:7px 10px;font-weight:600;cursor:pointer;box-shadow:0 1px 3px #0004}button.on{background:#2563eb;color:#fff}button:disabled{opacity:.4}#dev{position:fixed;top:48px;left:8px;max-width:min(560px,calc(100% - 16px));max-height:calc(100% - 230px);overflow:auto;background:#fffe;border-radius:10px;padding:8px;box-shadow:0 2px 10px #0006}.row{display:flex;gap:5px;align-items:center;flex-wrap:wrap;margin:4px 0}.row>span:first-child{width:52px;font-weight:600;color:#555}#palette,#presets{display:flex;gap:5px;flex-wrap:wrap}.small{font-size:11px;color:#666}.hidden{display:none!important}#msg{position:fixed;bottom:150px;left:50%;transform:translate(-50%);background:#000b;color:#fff;padding:6px 12px;border-radius:8px;opacity:0;transition:opacity .3s;pointer-events:none}#help{position:fixed;top:48px;right:8px;max-width:340px;background:#fffe;border-radius:10px;padding:10px;line-height:1.5}#cross{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;font-size:22px;text-shadow:0 0 3px #000;pointer-events:none;display:none}.stick{position:fixed;bottom:24px;width:120px;height:120px;border-radius:50%;background:#fff3;border:2px solid #fff6;display:none}.stick div{position:absolute;left:35px;top:35px;width:50px;height:50px;border-radius:50%;background:#fffa}#stickL{left:24px}#stickR{right:24px}body.touch .stick{display:block}