*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{touch-action:none;-webkit-user-select:none;user-select:none;background:#fdf4ff;width:100%;height:100%;overflow:hidden}#canvas{display:block}#ui{padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:10;touch-action:manipulation;background:#ffffffe0;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;display:flex;position:fixed;bottom:0;left:0;right:0}.swatch{cursor:pointer;border:4px solid #0000;border-radius:50%;outline:none;flex-shrink:0;width:54px;height:54px}.swatch.active{border-color:#fff;box-shadow:0 0 0 3px #444}.tool-btn{cursor:pointer;background:#e8e8e8;border:4px solid #0000;border-radius:50%;outline:none;flex-shrink:0;justify-content:center;align-items:center;width:54px;height:54px;font-size:26px;display:flex}.tool-btn.active{border-color:#fff;box-shadow:0 0 0 3px #444}