@charset "UTF-8";body.light{--primary_9:#0b1e40;--primary_8:#143471;--primary_7:#1c499f;--primary_6:#235cc9;--primary_5:#296be9;--primary_4:#7895ee;--primary_3:#abbaf3;--primary_2:#cfd7f7;--primary_1:#e6eafb;--primary_0:#f4f5fd;--red_9:#3a111e;--red_8:#661e35;--red_7:#8f2a4b;--red_6:#b5355f;--red_5:#d23d6e;--red_4:#dc7e97;--red_3:#e7aebb;--red_2:#f0d0d7;--red_1:#f7e7ea;--red_0:#fbf4f6;--green_9:#0a2b23;--green_8:#124c3d;--green_7:#196b56;--green_6:#20876d;--green_5:#259d7e;--green_4:#77b5a0;--green_3:#abcdc1;--green_2:#cee1da;--green_1:#e6efec;--green_0:#f4f8f6;--blue_9:#0d2937;--blue_8:#164860;--blue_7:#1f6587;--blue_6:#2880ab;--blue_5:#2e94c6;--blue_4:#79afd3;--blue_3:#accae1;--blue_2:#cfdfed;--blue_1:#e6eef5;--blue_0:#f4f7fa;--yellow_9:#38230b;--yellow_8:#633d14;--yellow_7:#8b551c;--yellow_6:#b06c23;--yellow_5:#cc7d29;--yellow_4:#d7a078;--yellow_3:#e4c1ab;--yellow_2:#eedacf;--yellow_1:#f6ebe6;--yellow_0:#fbf6f4;--gold_9:#392d14;--gold_8:#654f24;--gold_7:#8d6f32;--gold_6:#b28c40;--gold_5:#cfa34a;--gold_4:#d9b984;--gold_3:#e5d0b1;--gold_2:#efe3d2;--gold_1:#f6f0e7;--gold_0:#fbf8f4;--grey_9:#000000;--grey_8:#222121;--grey_7:#424141;--grey_6:#656363;--grey_5:#817e7e;--grey_4:#a2a0a0;--grey_3:#d2d1d1;--grey_2:#ededed;--grey_1:#faf9f9;--grey_0:#ffffff}body.dark{--primary_9:#eceffc;--primary_8:#cbd4f7;--primary_7:#a7b7f2;--primary_6:#7a96ee;--primary_5:#296be9;--primary_4:#2560d0;--primary_3:#1d4da7;--primary_2:#16397b;--primary_1:#0f2756;--primary_0:#0a1a38;--red_9:#f9edef;--red_8:#efcdd5;--red_7:#e6abb8;--red_6:#dc8098;--red_5:#d23d6e;--red_4:#bc3762;--red_3:#972c4f;--red_2:#6f203a;--red_1:#4d1628;--red_0:#320f1a;--green_9:#ecf3f1;--green_8:#cbdfd8;--green_7:#a6cbbe;--green_6:#79b6a2;--green_5:#259d7e;--green_4:#218c71;--green_3:#1b715b;--green_2:#145343;--green_1:#0e3a2e;--green_0:#09251e;--blue_9:#ecf2f7;--blue_8:#ccddeb;--blue_7:#a8c7df;--blue_6:#7bb0d3;--blue_5:#2e94c6;--blue_4:#2984b1;--blue_3:#216a8e;--blue_2:#184e69;--blue_1:#113649;--blue_0:#0b232f;--yellow_9:#f8f0ec;--yellow_8:#edd8cb;--yellow_7:#e2bea7;--yellow_6:#d8a17a;--yellow_5:#cc7d29;--yellow_4:#b67025;--yellow_3:#935a1d;--yellow_2:#6c4216;--yellow_1:#4b2e0f;--yellow_0:#311e0a;--gold_9:#f9f4ed;--gold_8:#eee1cf;--gold_7:#e4cead;--gold_6:#daba86;--gold_5:#cfa34a;--gold_4:#b99242;--gold_3:#957535;--gold_2:#6e5627;--gold_1:#4c3c1b;--gold_0:#312712;--grey_9:#ffffff;--grey_8:#f7f7f7;--grey_7:#e0dfdf;--grey_6:#b8b7b7;--grey_5:#817e7e;--grey_4:#737171;--grey_3:#5c5a5a;--grey_2:#3e3c3c;--grey_1:#2a2929;--grey_0:#222121}.gu-mirror{position:fixed!important;margin:0!important;z-index:9999!important;opacity:.8}.event_area,.mask,.modal{position:fixed}.gu-hide{display:none!important}.gu-unselectable{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.gu-transit{opacity:.2}*{box-sizing:border-box}body{font-family:sans-serif;margin:0;background:var(--grey_1)}h1,h2,h3,h4,h5,p{margin:0;padding:0}li,ul{margin:0;padding:0;list-style:none}a{text-decoration:none}button{cursor:pointer;border:none;background:0 0;border-radius:6px}button:focus{outline:0}input{padding:0}input:focus{outline:0}pre{margin:0}.bold{font-weight:700}tag{color:#b272e7}symbol{color:#eee}attr{color:#DA3A54}value{color:#E4A583}.mask{display:none;z-index:9;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.8)}.modal,.palette_add_color>svg{left:50%;transform:translate(-50%,-50%)}.event_area{width:100%;height:100%}.modal{z-index:1;max-width:450px;min-width:400px;width:30%;top:50%;border-radius:6px;background:var(--grey_0);overflow:hidden}.popover,.tooltip{position:absolute;z-index:1}.modal_header{padding:8px 20px;display:flex;justify-content:space-between;align-items:center}.modal_header>h5{font-size:15px;color:var(--grey_7)}.modal_header>button{margin-right:-8px;padding:4px}.modal_header>button>svg{transition:.2s stroke;stroke:var(--grey_4)}button.border,button.ghost,button.light,button.solid{transition:.2s background}.modal_header>button:hover>svg{stroke:var(--grey_7)}.modal_body{padding:20px;color:var(--grey_8)}.modal_container{display:block;font-size:14px;line-height:1.5}.modal_footer{padding:0 20px 20px}button.main{color:var(--primary_5)}button.danger{color:var(--red_5)}button.black{color:var(--grey_8)}button.solid,button.white{color:var(--grey_0)}button.sm{font-size:12px;padding:4px 8px}button.md{font-size:13px;padding:6px 14px}button.lg{font-size:14px;padding:10px 16px}button.light{background:var(--grey_2)}button.light:hover{background:var(--grey_3)}button.light:active{background:var(--grey_4)}button.ghost:hover{background:var(--grey_2)}button.ghost:active{background:var(--grey_3)}button.solid{background:var(--primary_5)}button.solid:hover{background:#235cc9}button.solid:active{background:var(--primary_5)}button.border:hover,button.dashed:hover{background:var(--primary_1)}button.border{color:var(--primary_5);box-shadow:inset 0 0 0 1px var(--primary_5)}button.border:active{color:var(--primary_6);background:var(--primary_2)}button.dashed{transition:.2s border,.2s background,.2s color;border:1px dashed var(--grey_3);color:var(--grey_3)}button.dashed:hover{color:var(--primary_5);border-color:var(--primary_5)}button.dashed:active{background:var(--primary_3)}.button_group{display:flex;justify-content:flex-end}.button_group>button+button{margin-left:20px}.popover{display:none;background:var(--grey_0);border-radius:6px;box-shadow:0 2px 12px 0 rgba(0,0,0,.2)}.popover:after{position:absolute;bottom:-8px;content:"";display:block;width:0;height:0;border-left:8px solid transparent;border-top:8px solid var(--grey_0);border-right:8px solid transparent}.tooltip{display:none;font-size:12px;color:var(--grey_0);padding:8px 12px;background:rgba(0,0,0,.8);border-radius:6px}.tooltip:after{position:absolute;right:-8px;top:50%;margin-top:-8px;content:"";display:block;width:0;height:0;border-top:8px solid transparent;border-left:8px solid rgba(0,0,0,.8);border-bottom:8px solid transparent}.alert{font-size:13px;padding:8px 12px;border-radius:6px;width:100%}.alert.error{background:var(--red_2);color:var(--red_6)}input[type=range]{cursor:move;appearance:none;-moz-appearance:none;-webkit-appearance:none;background:var(--grey_3);padding:0;margin:0;height:1px}input[type=range]:focus{outline:0}input[type=range]::-webkit-slider-thumb{appearance:none;-moz-appearance:none;-webkit-appearance:none;border-radius:50%;background:var(--grey_0);box-shadow:inset 0 0 0 1px var(--grey_3);border:none;width:19px;height:19px}input[type=range]::-moz-range-thumb{appearance:none;-moz-appearance:none;-webkit-appearance:none;border-radius:50%;background:var(--grey_0);box-shadow:inset 0 0 0 1px var(--grey_3);border:none;width:18px;height:18px}input[type=range]::-moz-focus-outer{border:0}@media screen and (max-width:700px){.modal{width:90%;min-width:200px}}body{padding-bottom:60px}body.dark .switch_theme .sun{display:block}#modal_import_palette .modal_body .alert,body.dark .switch_theme .moon{display:none}#modal_import_palette{text-align:center}#modal_import_palette .modal_body ul{margin:0 auto;width:92%;font-size:13px;text-align:left;line-height:1.8;color:var(--grey_5);font-weight:700;padding:4px 0 8px}#modal_import_palette .modal_body code{color:var(--primary_5);font-size:14px}#modal_import_palette button+button{margin-left:24px}#modal_export_css .modal{max-width:800px;min-width:630px}#modal_export_css .modal_body{display:flex}#modal_export_css .theme_css{flex-grow:1}#modal_export_css .theme_css+.theme_css{margin-left:20px}#modal_export_css .theme_css+.theme_css>h5{color:var(--grey_7)}#modal_export_css .theme_css>h5{font-size:14px;margin-bottom:10px;color:var(--primary_5)}#modal_export_css .theme_css>span{border-radius:6px;background:#333;display:block}#modal_export_css .theme_css>span>pre{padding:12px;height:300px;overflow:auto}#modal_export_css .theme_css>button{width:100%;margin-top:14px}.message_auto_recover{transition:.2s opacity,.2s top;position:fixed;z-index:10;padding:8px 12px;border-radius:6px;font-size:12px;background:var(--grey_0);top:12px;right:12px;box-shadow:0 2px 10px 0 rgba(0,0,0,.12)}.message_auto_recover>span{margin-right:8px;color:var(--grey_7)}.message_auto_recover.hide{opacity:0;top:-40px}.playground{position:relative;width:calc(100% - 246px);margin-left:246px;height:100%;z-index:2}.playground_container{width:100%;margin:0 auto}ul[onclick="select_color(this)"]{font-size:12px;font-size:11px}ul[onclick="select_color(this)"]>h1+li{border-radius:8px 8px 0 0}ul[onclick="select_color(this)"]>li{height:36px;line-height:36px;padding:0 12px}ul[onclick="select_color(this)"]>li:last-child{border-radius:0 0 8px 8px}ul[onclick="select_color(this)"]:hover>.drag_button{display:block}.palette{display:flex;flex-wrap:wrap;justify-content:center;padding:0 20px 0 70px}.palette>ul{cursor:pointer;position:relative;margin:18px 12px;width:126px;min-width:106px;display:flex;flex-direction:column;align-items:center}.palette>ul:hover .title input{box-shadow:inset 0 0 0 1px var(--grey_3)}.palette>ul:hover>li{width:95%}.palette>ul:hover>.main_color{width:100%;border-radius:4px}.palette>ul:hover:after{width:calc(95% - 2px)}.palette>ul:hover>.title{width:95%}.palette>ul:hover>.title>i{display:block}.palette>ul>li{transition:.2s width;font-size:12px;font-size:11px;width:89%;height:36px;line-height:36px;padding:0 12px}.palette>ul>li:last-child{border-radius:0 0 8px 8px}.palette>ul .title+li{border-radius:8px 8px 0 0}.palette_add_color{cursor:pointer;position:relative;display:flex;margin:50px 12px 20px;width:126px;min-height:36px}.palette_add_color>svg{position:absolute;top:50%;stroke:var(--primary_4)}.palette_add_color:before{transition:.3s background;content:"";display:block;width:89%;background:var(--primary_1);border:1px dashed var(--primary_4);margin:0 auto;border-radius:8px}.palette_add_color:hover>svg{stroke:var(--primary_5)}.palette_add_color:hover:before{background:var(--primary_2);border-color:var(--primary_5)}.palette_add_color:active:before{background:var(--primary_1)}.palette .popover{width:90px;height:60px;right:0;bottom:-60px;overflow:hidden}.palette .popover>span{transition:.2s background,.2s color;color:var(--grey_7);box-shadow:inset 0 -1px 0 var(--grey_2)}.palette .popover>span:hover{color:var(--grey_9);background:var(--grey_2)}.palette .popover>button{transition:.2s background,.2s color;color:var(--red_5);border-radius:0}.palette .popover>button:hover{color:var(--grey_0);background:var(--red_5)}.palette .popover>button,.palette .popover>span{background:var(--grey_0);display:block;padding:0 8px;font-weight:400;text-align:center;font-size:12px;line-height:30px;width:100%;height:50%}.main_color{transition:.2s border-radius,.2s width;position:relative}.main_color:after{position:absolute;transform:translateY(-50%);top:50%;right:16px;content:"";display:block;width:4px;height:4px;border-radius:50%;background:var(--grey_0);box-shadow:6px 0 0 -1px var(--grey_0),-6px 0 0 -1px var(--grey_0)}.palette>ul[style="z-index: 1;"]>.main_color{position:relative;width:100%;border-radius:4px}.palette>ul[style="z-index: 1;"]>.main_color:after{position:absolute;transform:translateY(-50%);top:50%;right:16px;content:"";display:block;width:4px;height:4px;border-radius:50%;background:var(--grey_0);box-shadow:6px 0 0 -1px var(--grey_0),-6px 0 0 -1px var(--grey_0)}.title{transition:.2s width;position:relative;height:28px;width:89%;margin-bottom:4px}.title>input{transition:box-shadow .2s,background .2s,color .2s;font-family:monospace;border-radius:6px;vertical-align:top;padding:0 8px;width:76%;height:100%;font-size:14px;color:var(--grey_5);background:0 0;border:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.title>input:hover{color:var(--grey_7)!important;background:var(--grey_1)!important;box-shadow:inset 0 0 0 1px var(--grey_4)!important}.title>input:focus{color:var(--grey_7);background:var(--grey_1);box-shadow:inset 0 0 0 1px var(--grey_4)}.title>i{display:none;transition:opacity .2s;opacity:.6;position:absolute;top:50%;transform:translateY(-50%);right:2px;width:18px;height:100%;background:url(../../img/delete.svg) center no-repeat;background-size:80%}.title>i:hover{opacity:1}@-webkit-keyframes delete_flicker{0%,100%{opacity:.2}50%{opacity:.7}}@keyframes delete_flicker{0%,100%{opacity:.2}50%{opacity:.7}}@-webkit-keyframes add_flicker{0%,100%{background-color:var(--primary_2)}50%{background-color:var(--primary_4)}}@keyframes add_flicker{0%,100%{background-color:var(--primary_2)}50%{background-color:var(--primary_4)}}.add_light_color>li:last-child{border-radius:0!important}.add_light_color:after{content:"";display:block;height:34px;width:calc(89% - 2px);position:absolute;left:50%;bottom:-36px;transform:translateX(-50%);background-color:var(--primary_2);border:1px dashed var(--primary_5);border-radius:0 0 8px 8px;-webkit-animation:1.5s add_flicker infinite;animation:1.5s add_flicker infinite}.add_dark_color>.title+li{border-radius:0!important}.add_dark_color:after{content:"";display:block;height:34px;width:calc(89% - 2px);position:absolute;left:50%;top:-4px;transform:translateX(-50%);background-color:var(--primary_2);border:1px dashed var(--primary_5);border-radius:8px 8px 0 0;-webkit-animation:1.5s add_flicker infinite;animation:1.5s add_flicker infinite}.reduce_light_color:after{content:"";display:block;height:34px;width:calc(89% - 2px);position:absolute;left:50%;bottom:0;transform:translateX(-50%);background:var(--red_5);border:1px solid var(--red_5);border-radius:0 0 8px 8px;-webkit-animation:1.5s delete_flicker infinite;animation:1.5s delete_flicker infinite}.reduce_dark_color:after{content:"";display:block;height:34px;width:calc(89% - 2px);position:absolute;left:50%;top:32px;transform:translateX(-50%);background:var(--red_5);border:1px solid var(--red_5);border-radius:8px 8px 0 0;-webkit-animation:1.5s delete_flicker infinite;animation:1.5s delete_flicker infinite}.console_bar button:active,.console_bar button:hover{background:var(--grey_2)}.console_bar{cursor:auto;position:absolute;z-index:1;left:-80px;width:70px}.console_bar+li{border-radius:0 0 8px 8px}.console_bar button{transition:.2s color,.2s background;padding:4px 0;margin:0 auto;display:block;width:100%;border-radius:8px 8px 0 0}.console_bar button>svg{stroke:var(--grey_4)}.console_bar button+button{border-radius:0 0 8px 8px}.console_bottom,.console_container,.console_top{border-radius:8px;box-shadow:inset 0 0 0 1px var(--grey_2),0 3px 10px 0 rgba(0,0,0,.12)}.console_bar button:hover>svg{stroke:var(--grey_7)}.console_bar button:active>svg{stroke:var(--grey_8)}.console_bottom,.console_top{position:relative;background:var(--grey_0)}.console_bottom::before,.console_top::before{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);content:"";width:70%;height:1px;background:var(--grey_2)}.console_container{position:relative;background:var(--grey_0);margin:6px auto}.reset_argument{cursor:pointer;position:relative;display:block;margin:12px auto;width:18px;height:18px}.reset_argument>.tooltip{color:#fff;width:110px;top:50%;transform:translateY(-50%);left:-124px}.reset_argument:hover>svg{stroke:var(--grey_5)}.reset_argument:hover>.tooltip{display:block}.reset_argument>svg{transition:.2s stroke;stroke:var(--grey_3)}.console_group{display:flex;justify-content:center}.console_slider{margin:0 6px;width:19px;height:100px}.console_slider input[type=range]{width:100px;transform:rotateZ(-90deg) translate(-40px,-41px)}.console_value{font-size:0;padding:12px 0}.console_value>i{text-align:center;display:inline-block;width:50%;font-size:12px;color:var(--grey_4);font-style:normal}.tool_bar{transition:.2s left;overflow:auto;position:fixed;top:0;width:246px;padding:0 20px 20px;z-index:1;height:100%;background:var(--grey_0);box-shadow:0 0 12px 0 rgba(0,0,0,.1)}.tool_bar>div+div{margin-top:20px}.saved_list_hints{position:relative;vertical-align:middle}.saved_list_hints span{vertical-align:middle}.saved_list_hints svg{transition:.2s stroke;margin-left:2px;margin-bottom:1px;cursor:pointer;vertical-align:middle;stroke:var(--grey_4)}.saved_list_hints svg:hover{stroke:var(--grey_8)}.saved_list_hints svg:active{stroke:var(--grey_9)}.saved_list_hints .popover{font-size:13px;color:var(--grey_7);width:200px;padding:12px;line-height:1.8;top:-177px;left:-56px}.saved_list_hints .popover:after{bottom:-8px;left:56px}.module_title{display:flex;align-items:center;justify-content:space-between;padding:0 20px;margin:0 -20px 16px;background:var(--grey_1);box-shadow:inset 0 1px 0 0 var(--grey_2),inset 0 -1px 0 0 var(--grey_2)}.module_title span{vertical-align:middle}.module_title>h5{font-size:13px;font-weight:400;color:var(--grey_5);line-height:40px}.module_title>button{margin-right:-8px;padding:6px 8px}#color_picker{margin:0 auto;width:190px}#color_picker circle[r="8"]{display:none}.color_value_input{margin:16px auto 0;width:100%;display:flex}.color_value_input>div+div{margin-left:8px}.color_value_input input{transition:.2s border-color;display:block;color:var(--grey_7);background:0 0;font-size:12px;padding:0 5px;height:24px;line-height:24px;width:100%;border:1px solid var(--grey_3);border-radius:4px}.color_value_input input:hover{border-color:var(--primary_5)}.color_value_input label{color:var(--grey_4);display:block;text-align:center;font-size:12px;margin-top:6px}.color_hex{width:32%;flex-shrink:0;position:relative}.edit_color_header,.edit_order button,.export_css>button{width:100%}.color_hex>input{padding-left:12px}.color_hex:before{content:"#";color:var(--grey_7);font-size:12px;position:absolute;line-height:24px;top:0;left:5px}.export_css>button+button{margin-top:16px}.edit_color_header{display:none;position:fixed;z-index:8;top:0;left:0;text-align:center;padding:20px 0;background:var(--grey_0);box-shadow:0 1px 10px 0 rgba(0,0,0,.14),inset 0 -1px 0 0 var(--grey_2)}.edit_color_header button{transition:.2s color,.2s border-color,.2s background;border-radius:20px;border:1px dashed var(--red_5);padding:0 18px;margin-left:50px;line-height:40px;font-size:14px;color:var(--red_5);font-weight:700}.edit_color_header button:hover{color:var(--red_6);border-color:var(--red_6);background:var(--red_2)}.edit_color_header button:active{color:var(--red_7);border-color:var(--red_7);background:var(--red_3)}.edit_color_order_mode>ul{cursor:move;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.edit_color_order_mode>ul .main_color{border-radius:0!important}.edit_color_order_mode>ul .main_color:after{border-radius:0!important;right:8px!important;content:"";display:block;width:16px!important;height:16px!important;background:url(../../img/move.svg)!important;background-size:100%!important;box-shadow:none!important}.edit_color_order_mode>ul>li{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:89%!important}.edit_color_order_mode>ul:hover>li{width:95%!important}.how_to_use{margin-top:50px!important}.how_to_use a{font-size:13px;color:var(--grey_4)}.how_to_use a:hover{color:var(--primary_5)}.how_to_use a:hover:before{margin-right:10px}.how_to_use a:active{color:var(--primary_7)}.how_to_use a:before{transition:.2s margin;content:"👉";font-size:18px;margin-right:4px;vertical-align:baseline}#modal_mix_color_introduction .modal_body{display:flex}#modal_mix_color_introduction .modal_body img{margin-right:16px}#modal_mix_color_introduction .modal_body>div{display:flex;flex-direction:column;justify-content:space-between;font-size:13px;padding:3px 0;color:var(--grey_9)}#modal_mix_color_introduction .modal_body .middle{color:var(--grey_7)}.mix_color_container{position:relative;margin-top:30px;width:100%;display:flex;justify-content:space-between}.mix_light>.popover{border-radius:8px;right:-10px}.mix_light>.popover:after{right:22px}.mix_dark>.popover{border-radius:8px;left:-10px}.mix_dark>.popover:after{left:22px}.mix_dark,.mix_light{cursor:pointer;position:relative;border-radius:50%;width:40px;height:40px;box-shadow:inset 0 0 0 2px var(--grey_5),inset 0 0 0 4px var(--grey_0)}.mix_dark>.popover,.mix_light>.popover{top:-320px;padding:12px}.mix_color_lable{transition:.2s background;cursor:pointer;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46%;height:2px;display:flex;background:var(--grey_3);border-radius:1px}.mix_color_lable:hover{background:var(--grey_4)}.mix_color_lable:hover .mix_color_lable_icon{border-color:var(--grey_4);box-shadow:0 0 0 2px var(--grey_4)}.mix_color_lable:active{background:var(--grey_6)}.mix_color_lable:active .mix_color_lable_icon{border-color:var(--grey_6);box-shadow:0 0 0 2px var(--grey_6)}.mix_color_lable_icon{transition:.2s box-shadow,.2s border-color;overflow:hidden;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;background:var(--grey_0);border-left:6px solid var(--grey_3);box-shadow:0 0 0 2px var(--grey_3),0 0 0 6px var(--grey_0)}#file_upload_append,#file_upload_cover{display:none}.saved_palette_list{display:flex;flex-direction:column-reverse}.saved_palette_list>button{text-align:center;margin-bottom:12px;transition:.2s color,.2s border,.2s background;width:100%;font-size:13px;line-height:36px;border-radius:6px;background:0 0;border:1px dashed var(--grey_4);color:var(--grey_4)}.saved_palette_list>button:hover{color:var(--primary_5);border-color:var(--primary_5);background:var(--primary_1)}.saved_palette_list>li{transition:.2s border-color;width:92%;position:relative;cursor:pointer;border-radius:20px;border:1px solid var(--grey_3);padding:6px}.saved_palette_list>li+li{margin-bottom:12px}.saved_palette_list>li:hover{border-color:var(--primary_5)}.saved_palette_list>li>div{position:relative;font-size:0}.saved_palette_list>li>div>span{display:inline-block;width:17px;height:17px;border-radius:50%;margin:4px}.saved_palette_list>li>button{display:none;opacity:.6;transition:.1s opacity;position:absolute;z-index:1;padding:0;width:28px;height:32px;right:-28px;top:50%;transform:translateY(-50%);background:0 0}.saved_palette_list>li>button:before{display:block;width:100%;height:100%;content:"";background:url(../../img/delete.svg) center no-repeat;background-size:50%}.saved_palette_list>li>button:hover{opacity:1}.saved_palette_list>li>button:hover>span{display:block}.saved_palette_list>li>button>span{display:none;position:absolute;z-index:1;right:-6px;top:-40px;width:88px;font-size:12px;padding:8px 12px;background:rgba(0,0,0,.8);border-radius:6px}.saved_palette_list>li>button>span:after{position:absolute;bottom:-8px;right:12px;content:"";display:block;width:0;height:0;border-left:8px solid transparent;border-top:8px solid rgba(0,0,0,.8);border-right:8px solid transparent}.saved_palette_list>li>button>span:before{content:"删除该主题";display:block;color:#fff}.saved_palette_list>li:hover>button{display:block}.palette.dark{position:relative;background:var(--grey_8);margin-top:50px;padding:50px 20px 50px 70px;transition:.2s height;z-index:0}.palette.dark>ul{cursor:default}.palette.dark>ul:hover>li{width:89%}.palette.dark>ul>li{border-radius:0}.palette.dark>ul>li:first-child{border-radius:8px 8px 0 0}.palette.dark>ul>li:last-child{border-radius:0 0 8px 8px}.palette.dark>div{transition:.2s background;cursor:pointer;position:absolute;z-index:1;width:30px;height:30px;border-radius:18px;left:50%;top:0;transform:translate(-50%,-50%);margin-left:25px;background:var(--grey_8)}.palette.dark>div:before{position:absolute;top:0;content:"";display:block;width:100%;height:50%;border-radius:18px 18px 0 0;background:var(--grey_1)}.switch_theme svg,.toggle_tool_bar svg{top:50%;transform:translate(-50%,-50%)}.palette.dark>div:after{transition:.2s box-shadow;position:absolute;z-index:1;content:"";display:block;border-radius:18px;width:100%;height:100%;box-shadow:0 0 0 3px var(--grey_8),inset 0 0 0 3px var(--grey_1)}.palette.dark.hide_dark_mode>ul,.switch_theme .sun,.toggle_tool_bar{display:none}.palette.dark.hide_dark_mode{height:1px;padding:0;background-color:var(--grey_2)}.palette.dark.hide_dark_mode>div{background:var(--grey_3)}.palette.dark.hide_dark_mode>div:before{background:var(--grey_1)}.palette.dark.hide_dark_mode>div:after{box-shadow:0 0 0 3px var(--grey_3),inset 0 0 0 3px var(--grey_1)}.palette.dark.hide_dark_mode>div:hover{background:var(--grey_5)}.palette.dark.hide_dark_mode>div:hover:after{box-shadow:0 0 0 3px var(--grey_5),inset 0 0 0 3px var(--grey_0)}.switch_theme,.toggle_tool_bar{cursor:pointer;z-index:8;width:40px;border-radius:50%;box-shadow:0 2px 10px 0 rgba(0,0,0,.2);height:40px}.switch_theme{position:fixed;bottom:30px;right:26px;background:var(--grey_9)}.switch_theme svg{position:absolute;left:50%;stroke:var(--grey_0)}.toggle_tool_bar{position:fixed;bottom:70px;right:35px;background:var(--grey_0)}.toggle_tool_bar svg{position:absolute;left:50%;stroke:var(--primary_5)}.tool_bar_header{display:flex;align-items:flex-end}.tool_bar_header .logo{height:40px;width:20px;background:url(../../img/logo.svg) left center no-repeat;background-size:67%}.tool_bar_header h5{margin-left:3px;font-weight:700;line-height:36px;font-size:14px;color:var(--grey_3)}.tool_bar_header+div{margin-top:0!important}@media screen and (max-width:800px){.palette .palette_add_color,.palette>ul{width:112px}}@media screen and (max-width:639px){.edit_color_header>button{font-size:12px;margin:0}.edit_color_order_mode{padding:0 8px!important}.tool_bar{left:0;z-index:8}.tool_bar.hide{left:-246px}.mobile_mask{position:fixed;z-index:3;width:100%;height:100%;background:rgba(0,0,0,.8)}.mobile_mask.hide{display:none}.playground{width:100%;margin-left:0}.palette,.palette.dark{padding:0 80px 0 0}.palette.dark>ul,.palette>ul{width:40%;max-width:130px;min-width:110px;margin:20px 4px}.palette.dark{padding-top:32px}.palette_add_color{width:40%;max-width:130px;min-width:110px;margin:52px 4px 20px}.console_bar{position:fixed;right:20px;top:14px;left:auto}.switch_theme{bottom:15px;right:35px}.palette.dark>div{margin:0}.toggle_tool_bar{display:block}#modal_import_palette .modal_footer button{width:100%}#modal_import_palette .modal_footer button+button{margin:18px 0 0}#modal_export_css .modal{max-width:400px;min-width:200px;height:80%}#modal_export_css .modal_body{flex-direction:column;height:calc(100% - 45px);overflow:auto}#modal_export_css .theme_css>span{border-radius:8px}#modal_export_css .theme_css>span>pre{height:240px}#modal_export_css .theme_css+.theme_css{margin:40px 0 0}#modal_mix_color_introduction .modal_body img{width:40%}#modal_mix_color_introduction .modal_body>div{padding:0}}