*{margin:0}body{background:#eee}

.header{padding:14px 24px;height:32px;display:flex;position:relative;justify-content:center;align-items:center}.header>span{font-size:16px;color:#222;text-align:center;font-weight:600}.header .enter_wrapper{padding:4px;position:absolute;background-color:#fff;border-radius:16px;overflow:hidden;padding:4px;left:24px;top:12px;width:24px;height:24px;transform:scaleX(-1)}.header .enter_wrapper img{width:100%;height:100%}
.switchWrapper{width:75px;height:26px;line-height:26px;border-radius:12px;background-color:rgba(0,0,0,.04);padding-left:4px;display:flex;align-items:center}.switchWrapper .mode{font-size:12px;color:#999;letter-spacing:0;text-align:center;line-height:16px;padding:2px 6px;border-radius:10px}.switchWrapper .mode.active{font-weight:600;color:#222;background-color:#fff}.switchWrapper .mode:last-child{margin-right:0}
#canvas_wrapper{position:relative;width:100%;height:100%}#canvas_wrapper canvas{position:absolute;top:0;left:0}#canvas_wrapper #canvas_circle{left:-10;top:-10;z-index:2}#canvas_wrapper #canvas_realContent{z-index:-10}#intro_wrapper{position:absolute;width:100%;height:100%;left:0;top:0;z-index:2}#intro_wrapper .intro_wrapper{position:absolute;display:flex;flex-direction:column;align-items:center}#intro_wrapper .intro_wrapper .intro_circle{width:16px;height:16px;border-radius:16px;border:2px solid #0d53ff;background-color:#fff}#intro_wrapper .intro_wrapper .intro_circle.is_selected{border-color:#fff;background-color:#0d53ff}#intro_wrapper .intro_wrapper .intro_circle.is_selected::before{content:"";display:block;width:6px;height:3px;border:2px solid #fff;border-right:none;border-top:none;transform:rotate(-45deg) translate(0px, 6px)}#intro_wrapper .intro_wrapper .intro_span{margin-top:3px;height:28px;line-height:28px;background-color:rgba(0,0,0,.8);color:#fff;font-size:12px;border-radius:8px;padding:0 12px}#action_wrapper{position:absolute;z-index:100000;border:2px solid #fff;box-shadow:0 0 2px 0 rgba(0,0,0,.2),inset 0 0 2px 0 rgba(0,0,0,.2);top:-1000px}#action_wrapper>div{width:100%;height:100%}#action_wrapper #action_add,#action_wrapper #action_del,#action_wrapper #action_resize{position:absolute;width:24px;height:24px;background-size:100% 100%}#action_wrapper #action_add{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAAACXBIWXMAACE4AAAhOAFFljFgAAABEVBMVEVHcEzy8vLz8/P////z8/P////09PTz8/Py8vLz8/P////09PTz8/Pz8/Pz8/Pz8/P4+Pjz8/Py8vLz8/P////09PTz8/P19fXy8vLz8/P19fX19fXy8vL09PT////z8/Py8vLy8vLz8/P////////y8vIiIiL+/v76+vr09PRUVFTz8/OZmZn5+fn39/f9/f319fV7e3s8PDxBQUF/f3/29vb7+/uRkZFPT09FRUXl5eXq6upKSkomJiZSUlJ2dnYvLy/u7u6Tk5PMzMzf39++vr63t7fw8PB3d3fp6emioqLs7OyUlJQtLS2qqqqQkJBjY2NcXFxHR0dkZGTt7e2Xl5dXV1cjIyOysrI5OTkyMjJA/FxmAAAAJHRSTlMAPNIMsARy/ez5BnSS/ufMIkLwVQhbuRrf0WIz74kCbWWxbgN8+EWLAAACuElEQVRYw62Yd3vaMBDGHWKwDYSVQBgBQipZpsSYDujM6Ei69+73/yA9ybgJtmXLzr1/ef6ek053J52myTUa9Id6r2taltnt6cP+YKTl0P5YP6AhHejj/WyUvXbHoLEyOu09Zcx2peb/NZ27K48REPNW7nzqP61VtpUwxZLJP58tHYG4LuYsZ/ydWSqmc7YKwhY3QlmzXGFXYSsFU67ucIxDEuRw1E61nMRp1PmgEjECxQdYb8g5zRZ8MGckVWwOH7aaMs6upWLOlVHWbjznEJbO1COK8mCmjMNYe4CzYERZbAGkGJuaMK4FySQgWZF5arQycwSpFfJdGfw+ZVlBDOapvrmequAvj2SWB76rbsQFrGeH5JADa/xatBQhvuYkl2BlFq4iuAQDY/lADAZX+p9/zJwDWw/ODPJTBTxGcgs8V1nn1doNDBIm1fzs21Y26OWn04egs4hJbQHqUOoqUJ69PbV93d584VLaEXXHUHHZxbcT244HgeMMXqWOKF2m2/PatmUgsqR0DKCJZKrfPAa9Cu4uE0Aw3TrUZainsSO7x/+5E9zREzmIQQ0eaQOZzzZB5Cfc/fobC+J+G2h9WZiFQD/+nP3+fhwPgoDra0OZ80MgMY8SECyAoaZTulIBkQTQis92j1LvpiCP0p7WjTjt3V0h4aYP4vJLCgjc1tUghYQeP7HDepQCIpBKNAsHZOGB0IYWnezZfaFz/s9XcfleZbLR3I+2IFVDhKSFiGrQJoFE0KqmkSSQSCPSxPb5Kei5CshPbNJUG6fjhFSrmPyTQOvkr1aOEkBBOVItkFJQUCAzlGzy4gHXR0nJRttEoG1r8DZaaFs/vM0o2vYYb8OOd4RAO9TgHbPwDn54R1G8wzHecR2vgYDX0sBrsiC2ffAaUYitMb9ZdzSJNusmWZt1vm5laR/+Az8DS2Lf7kGcAAAAAElFTkSuQmCC);bottom:-12px;left:-12px}#action_wrapper #action_del{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAAACXBIWXMAACE4AAAhOAFFljFgAAAA/FBMVEVHcEzy8vLz8/P////z8/P////09PTz8/Py8vLz8/P////09PTz8/Pz8/Pz8/Pz8/P4+Pjz8/Py8vLz8/P////09PTz8/P19fXy8vLz8/P19fX19fXy8vL09PT////z8/Py8vLy8vLz8/P///8iIiL////y8vL09PT+/v76+vrz8/NGRkbi4uLc3NxAQEAuLi4qKir5+fn39/f9/f3W1tb19fX7+/v29vaRkZEjIyNMTEy0tLRra2vS0tIkJCSEhIR9fX09PT0vLy+7u7uMjIzPz88+Pj5DQ0NBQUHs7Oz4+Pg8PDw/Pz/l5eUzMzPQ0ND8/PyJiYlHR0e8vLzdIh3TAAAAJHRSTlMAPNIMsARy/ez5BnSS/ufMIkLwVQhbuRrf0WIz74kCbWWxbgN8+EWLAAACuklEQVRYw62YeXuiMBDGqUUBtV6t1qNq7TYB7F5Axard7d73vd//u+wQdFtIQALz/inx90wyk5nJKEqyJqPhWB30dcPQ+wN1PBxNlBw6napnNKYzdXoqRznp9jQqlNbrnmTGHNYa4b9M1/E9i4Asz3dcM/y1UTvMhClX9GD5fGkzxENZ9nIefNMr5f2cgxKzxeEoW5bD7Cod7MFU60cBxiYpsgPUUb2axmk1g02lYhgq2GCzlcxpd2CBa5G9slxY2GkncY6NLObcG2UciznnEDqmRzLKg5PSzoX2AGdhkcyyFkAS2NSGfS2IlIBkcOfU6khzGKkT810V/G5asiALzqkZjac6+Msj0vLAd/XIvYB4tkkO2RDjD25LGe6XS3IJIrN0f4MrsDHRAd1cRnQjOibYXOV//tETNpYBFGxO3+WnGniM5AUR8Fxtm1cbUYOuQ71/u7mNgm43m78/w49Rkxph9u3GDLrMoJhJXQbqUeoUATmU9ljd0WIukwWB47SgSl1QuiRFQGRJ6RRAs7jvpUFw3CrUZain0WBcr6/Y4tVzXiv25c86GpRQgyfKSBBET9jyK0HQPGVfHvOhNFKGgmsmC4ILN1TGMefnAUEAjBWVUr8oyA9Oe0CpVxTkUTpQ+nGn5QCB2/oKpBBSFEQglSgGDsjAA6FtDe2w0dyPFpBoVwTt0qKlET6xSYPCxManWmlQmGr55C8N2iZ/rhzJgnbliCuQsqBdgeRKNiHf2fKXz3iFVeQzEZbseBNByK83qUXtR/yot02EoK15lQq6S2hrBI3W/GsK59siqdEStH4vPiVyPl4ntn6iZnT5+/VKQFl9ePclpRkVt8e+yctPb4/xGna8JwTaowbvmYX38MN7iuI9jvGe63gDBLyRBt6QBXHsgzeIQhyNhcO6ixk/rJvJDutCPZIZH/4D0DVVbOUGFbUAAAAASUVORK5CYII=);top:-12px;right:-12px}#action_wrapper #action_resize{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAAACXBIWXMAACE4AAAhOAFFljFgAAABOFBMVEVHcEzy8vLz8/P////z8/P////09PTz8/Py8vLz8/P////09PTz8/Pz8/Pz8/Pz8/P4+Pjz8/Py8vLz8/P////09PTz8/P19fXy8vLz8/P19fX19fXy8vL09PT////z8/Py8vLy8vLz8/P////////y8vIiIiL+/v76+vr5+fn09PTz8/MoKChiYmL9/f2+vr739/f19fX29vb7+/uGhobb29tgYGBTU1NMTExZWVl9fX3v7+/a2tqamprt7e1wcHCpqani4uJpaWnU1NQ6Ojpzc3MzMzMsLCyqqqpVVVVOTk4mJiZHR0dQUFBnZ2eKioqzs7Oenp5mZmYlJSWXl5eRkZF1dXVUVFRNTU1GRkZ2dnbo6OhaWlpBQUF3d3fp6elbW1vNzc1cXFzOzs5AQEA5OTk+Pj4/Pz+Ejm01AAAAJHRSTlMAPNIMsARy/ez5BnSS/ufMIkLwVQhbuRrf0WIz74kCbWWxbgN8+EWLAAADWElEQVRYw7WY6VbiMBSAqyIUQVAUZBG3SShFBQQE3Md9Gffd2fd5/zeYmxRpQkuTzOncP3AI/Xpz90TT+stMLpsPZNJ6OKynM4F8Njej/YNMzQamcY9MB2an1CiTyVQIu0oolZyUxgxFYtZTpapZLxsIxCjXzWrJ+jUWGZLCDAd18vfFWpEiWDGKtUWypgeHxZyBQaqL6aB0WCbVa3BAgBmJjhJMEXlIkaBGoyNenLE42ZQnhqLIBuNj/TnjCfhD1UBCMarwx8R4P85EWEYdW6nwhDtnDkKnVEaSUgZLheZc9QHOioGkxVgBkotO47CvFaQkQAo77DSWUOZQUqLHdyPg95KhCjLATnE+nqLgrzJSljL4LsrlBcSzwO+bP/ZXd79s1PjXFSHGmWwZhvyqCl5+WejIu+Oji7fdnyEyB+0MDsLGRAZqFljpkgzYXLBbf3ThxhBa40AX7Ob01/oUAY8J7driQEf2Angu0qmrMQmFUJsDHXP2jlnVNymjEHp8en75vdS1OOJUSlJQCmNTKmrMZVslJgpMjFO074TELnNwCjUmvhdxiHSpBYxrypzCBrNSw3gWQPMypmY4lp0+8OEdgL4M/dRQ4Cz/oR+7bO5CD57RclI+sznmC/1cRbzfclpWnGYcBz3TL/vsMiRcVstLOJ/loCf67Ru3jnFeC2BcF4FOGA56bLfWmpeb7HqdWDuDsbiiNWyOa33DOKOlpZzW8OIQt6U1KCEy4djw4CAEpUQLy4HQiZdLoC+JQKtSbyEg761VlhpyIN3b2BVILAkSNbaX+ys0QcUk6n5HQB4211rta5tTWBLaiQakI0UOyMM3DKciTkWSIo6k/USevlfhWEnrKCPn5PEHFY5VRhyF7Yw8f6XCsQqbo9SeEsCtAqdTah3F/zsh3ClwXot/bzuym4Uk57Ud9TbIPUVOt0H2tuydDufu9urh/uZaymdJtyHiMzcttGVM3RkiesaadQ7UklEo4jpobXGgjxIKdQctfvTb/sWCmmKX2aNfzzC6vbX+fmdv+evp2fnPg0NxmjHDqMx43HdjowP/Y2D37wjh26HGv2OWfwc//46i/h2O/Tuu+3eB4N+Vhn+XLD5e+/h3EeXj1Zh1Wbcw77ysm1e9rLPkjcr14V9y+FGDOl6ECwAAAABJRU5ErkJggg==);bottom:-12px;right:-12px}#canvas_origin{visibility:hidden;z-index:-1}.visibleCanvas{visibility:visible !important;z-index:999999 !important}#img_content{position:absolute;z-index:3;border-color:rgba(0,0,0,0) !important}#img_content>img{position:absolute;background-color:rgba(0,0,0,0) !important}#small_window{z-index:100;position:fixed;width:140px;height:140px;border-radius:15px;background-color:#fff;border:3px solid #ddd;overflow:hidden;top:100px}#small_canvas{width:140px;height:140px}
.object_select_wrapper{display:flex;align-items:center;height:35px;margin-bottom:17px}.object_select_wrapper>:first-child{font-size:16px;color:#222;margin-right:20px}.object_select_wrapper :last-child{flex:1;overflow-x:auto}.object_select_wrapper :last-child::-webkit-scrollbar{display:none}.object_select_wrapper .item_wrapper{display:flex}.object_select_wrapper .item_wrapper .object_item{background:#f7f7f7;padding:6px 0;text-align:center;border-radius:8px;flex:0 0 60px;margin-right:8px;font-size:14px;color:rgba(0,0,0,.86);text-align:center;line-height:22px;font-weight:500}.object_select_wrapper .item_wrapper .object_item.is_active{background:#0d53ff;color:#fff}
.slider_wrapper{display:flex;justify-content:space-between;flex:1;margin-left:16px}.slider_wrapper>div:first-child{padding:3px 0;width:100%}.slider_wrapper .line_wrapper{padding:4.5px 0;width:100%}.slider_wrapper .slider_container{flex:1;height:3px;position:relative;border-radius:3px;background-color:rgba(0,0,0,.08)}.slider_wrapper .slider_container .slider_fill{position:absolute;z-index:1;height:3px;background-color:#222}.slider_wrapper .slider_container .slider_thumb{position:absolute;z-index:2;top:1px;transform:translate(-50%, -50%);width:12px;height:12px;border-radius:12px;background-color:#222}.slider_wrapper .slider_text{margin-left:16px;font-family:PingFangSC-Medium;width:50px;font-size:12px;color:rgba(0,0,0,.86);letter-spacing:0;line-height:16px;font-weight:700}
.paint_sub_wrapper{height:100%}.paint_sub_wrapper .history_wrapper{display:flex;padding:4px 6px;width:68px;justify-content:space-between;background:rgba(0,0,0,.04);border-radius:8px}.paint_sub_wrapper .history_wrapper>img{width:24px;height:24px}.paint_sub_wrapper .action_wrapper{background:#fff;margin-top:8px;padding:16px 0 16px 16px;overflow:hidden;box-shadow:0 2px 10px 0 rgba(0,0,0,.02);border-radius:16px;color:#222}.paint_sub_wrapper .action_wrapper img{width:24px;height:24px}.paint_sub_wrapper .action_wrapper .paint_area{display:flex;height:36px;justify-content:space-between;align-items:center;margin-bottom:16px}.paint_sub_wrapper .action_wrapper .tab_wrapper{display:flex;justify-content:space-between;padding-right:16px;align-items:center}.paint_sub_wrapper .action_wrapper .tab_wrapper .item_wrapper{display:flex}.paint_sub_wrapper .action_wrapper .tab_wrapper .item_wrapper .tab_item{display:flex;flex-direction:column;align-items:center}.paint_sub_wrapper .action_wrapper .tab_wrapper .item_wrapper .tab_item:last-child{margin-left:20px}.paint_sub_wrapper .action_wrapper .tab_wrapper .item_wrapper .tab_item>span{font-size:11px;margin-top:3px}.paint_sub_wrapper .action_wrapper .tab_wrapper .item_wrapper .tab_item>span.is_active{color:#0d53ff}.paint_sub_wrapper .action_wrapper .tab_wrapper .item_wrapper .tab_item>span.is_disable{color:#999}.paint_sub_wrapper .action_wrapper .tab_wrapper .action_confirm_disabled{background:#f7f7f7;border-radius:10px;padding:10px 16px;font-size:14px;color:#ccc;text-align:center;font-weight:600}.paint_sub_wrapper .action_wrapper .tab_wrapper .action_confirm{background:#0d53ff;border-radius:10px;padding:10px 16px;font-size:14px;color:#fff;text-align:center;font-weight:600}
.export-entry{display:flex;justify-content:space-between;flex-direction:column;height:100%}.export-entry img{width:24px;height:24px}.export-entry .history-wrapper{justify-content:space-between;display:flex}.export-entry .history-wrapper .actions-wrapper{display:flex;justify-content:space-between;align-items:center;background-color:rgba(0,0,0,.04);border-radius:8px;padding:4px 6px;width:68px;height:24px;line-height:24px}.export-entry .history-wrapper .compare-wrapper{width:32px;height:32px;line-height:32px;background-color:rgba(0,0,0,.04);border-radius:8px;display:flex;align-items:center;justify-content:center;touch-action:none}.export-entry .tabs-wrapper{display:flex;justify-content:space-between;padding-bottom:12px}.export-entry .tabs-wrapper .tab-items{display:flex;font-size:12px}.export-entry .tabs-wrapper .tab-items .tab-item{display:flex;flex-direction:column;align-items:center;margin-right:20px;text-align:center}.export-entry .tabs-wrapper .tab-items .tab-item .tab-title{padding-top:2px}.export-entry .tabs-wrapper .export-button{background:#0d53ff;border-radius:10px;padding:12px 22px;font-size:16px;color:#fff;text-align:center;font-weight:600}
.background-setting{background:#fff;box-shadow:0 2px 10px 0 rgba(0,0,0,.02);border-radius:16px;height:152px;padding:16px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between}.background-setting .icon{width:24px;height:24px}.background-setting .background-type{font-size:14px}.background-setting .background-type .background-tab{padding-left:10px;color:rgba(0,0,0,.4);margin-right:22px}.background-setting .background-type .background-tab.active{color:#0d53ff}.background-setting .selected-icon{position:absolute;top:12px;left:12px;width:16px;height:16px}.background-setting .color-list-wrapper{overflow:hidden}.background-setting .color-list,.background-setting .bg-list{display:flex;align-items:center;flex-wrap:nowrap;overflow-x:auto}.background-setting .color-list .color-transparent,.background-setting .color-list .color-original,.background-setting .color-list .color-item,.background-setting .bg-list .color-transparent,.background-setting .bg-list .color-original,.background-setting .bg-list .color-item{border-radius:10px;width:40px;height:40px;box-sizing:border-box;margin-right:8px;flex:0 0 40px}.background-setting .color-list .color-original,.background-setting .bg-list .color-original{background-color:#fff;border:2px solid #f2f2f2;text-align:center;width:42px;height:42px;line-height:38px;font-size:14px;color:#222;font-weight:500;flex:0 0 42px}.background-setting .color-list .color-transparent,.background-setting .bg-list .color-transparent{background-color:#fff;background-image:linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%),linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);background-size:10px 10px;background-position:0 0,5px 5px;position:relative}.background-setting .color-list .color-item,.background-setting .bg-list .color-item{position:relative}.background-setting .color-list .color-item:last-child,.background-setting .bg-list .color-item:last-child{margin-right:0}.background-setting .color-list .color-item .selected-icon,.background-setting .bg-list .color-item .selected-icon{position:absolute;top:12px;left:12px;width:18px;height:18px}.background-setting .color-list .color-white,.background-setting .bg-list .color-white{background-color:#fff;border:2px solid #f2f2f2;text-align:center;width:42px;height:42px;border-radius:10px;box-sizing:border-box;margin-right:8px;flex:0 0 42px;position:relative}.background-setting .bg-list .bg-custom{height:40px;display:flex;align-items:center;padding:0 8px;font-family:PingFangSC-Medium;font-size:14px;color:#222;border:2px solid #f2f2f2;border-radius:10px;letter-spacing:0;font-weight:500;box-sizing:border-box;margin-right:8px;flex:0 0 78px}.background-setting .bg-list .bg-custom:last-child{margin-right:0}.background-setting .bg-list .bg-custom .custom-upload-icon{width:12px;height:12px;margin-right:4px}.background-setting .bg-list .color-item{overflow:hidden}.background-setting .bg-list .color-item .thumbnail{width:100%;height:100%}.background-setting .bg-list .color-item .selected-icon{position:absolute;top:12px;left:12px;width:16px;height:16px}.background-setting .actions-wrapper{display:flex;justify-content:space-between;align-items:center}.background-setting .actions-wrapper .title{font-family:PingFangSC-Semibold;font-size:16px;color:#222;text-align:center;font-weight:600}.background-setting .img-wrapper-hidden{display:none}
.edit-sub{height:100%}
.appLoading{width:100%;height:100%;background-color:hsla(0,0%,100%,.5);position:fixed;top:0;left:0;right:0;bottom:0;z-index:999}.appLoading .loading{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.appLoading .loading .loadingRect{margin-top:-64px;background-color:#fff;width:60px;height:60px;border-radius:12px;box-shadow:0 0 15px 0 rgba(0,0,0,.14);border:1px solid rgba(0,0,0,0)}.appLoading .loading .loadingRect .lottie{width:60px;height:60px}.hiddenLoading{visibility:hidden;position:fixed}
body{background:#f5f5f5}#root{height:100vh;width:100vw}#app{display:flex;flex-direction:column;padding-top:var(--immersive-area-inset-top, env(safe-area-inset-top));padding-bottom:var(--immersive-area-inset-bottom, env(safe-area-inset-bottom));height:100%}#app .tips{padding:0 24px;display:flex;align-items:center}#app .tips>img{width:16px;height:16px;margin-right:4px}#app .tips>span{font-size:12px;color:#f99b00;line-height:16px;font-weight:600}#app .image_wrapper{flex:1;margin:6px 10px 4px;padding:10px;overflow:hidden}#app .bottom_area{height:170px;padding:0 12px;padding-bottom:var(--immersive-area-inset-bottom, env(safe-area-inset-bottom))}