@charset "UTF-8";/*!normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css*/html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}@font-face{font-family:cfkai;src:url(./assets/cfkai.0c2c7998.ttf)}@-webkit-keyframes shake{0%{transform:rotate(0)}40%{transform:rotate(-50deg)}70%{transform:rotate(30deg)}to{transform:rotate(0)}}@keyframes shake{0%{transform:rotate(0)}40%{transform:rotate(-50deg)}70%{transform:rotate(30deg)}to{transform:rotate(0)}}@-webkit-keyframes flash{0%,80%,to{box-shadow:0 0 1px 1px #ffffff80}40%{box-shadow:0 0 10px 5px #fffc}}@keyframes flash{0%,80%,to{box-shadow:0 0 1px 1px #ffffff80}40%{box-shadow:0 0 10px 5px #fffc}}@-webkit-keyframes heart-show{0%{opacity:0}to{opacity:.7}}@keyframes heart-show{0%{opacity:0}to{opacity:.7}}body{margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;min-width:1000px;font-family:Bradley Hand,American Typewriter,Avenir}p{margin:0}html,body,#root,.main{height:100%}a{color:inherit}body,.main{will-change:background-color,color;transition:background-color 1s,color 1s}.main{width:100%;height:100%;box-sizing:border-box;display:flex;position:relative;overflow:auto;align-items:stretch}.color-list{display:flex;flex-wrap:wrap;width:60%;padding:3rem 0 1.5rem 1.5rem;box-sizing:border-box;text-transform:uppercase}.color-list .placeholder,.color-list .color-card{flex:1 0 10rem;min-width:10rem;margin:0 0 .6rem .6rem}.color-list .placeholder{visibility:hidden}.color-list .placeholder:last-of-type{height:1.5rem}.color-card{display:flex;align-items:center;font-weight:900;border-radius:1px;justify-items:center;background-color:#ffffff4d;color:#000000b3;position:relative;cursor:pointer;will-change:background,opacity;transition:background 1s,opacity 1s}.color-card[data-active=true]{background-color:#ffffff80}.color-card:hover{opacity:.6}.color-card:hover .heart{display:inline;display:initial}.color-card.fav{order:-1}.color-card.fav .heart{display:inline;display:initial}.color-card .heart{position:absolute;top:.2rem;right:.2rem;width:1rem;display:none;opacity:.7;transform:scale(.8);transition:opacity .2s,transform .2s cubic-bezier(.87,-.09,.17,2.51);fill:#ee3f4d;-webkit-animation:heart-show .5s;animation:heart-show .5s}.color-card .heart:hover{transform:scale(1);opacity:1}.color-card .wrap{padding:.3rem}.color-card .color-bar{height:100%;width:.4rem;will-change:background;transition:background 1s;margin-right:.3rem}.color-card .name{margin-bottom:.3rem;font-family:Weibei SC,STXingkai,KaiTi SC,STKaiTi,\6977\4f53,\9ed1\4f53,\5b8b\4f53,Xingkai SC}.color-card .hex{margin-top:.3rem}.display{position:absolute;position:-webkit-sticky;position:sticky;top:0;box-sizing:border-box;width:40%;height:100%;overflow:hidden}.display .toggler{position:absolute;display:flex;align-items:center;padding:.3rem;justify-content:center;border-width:2px 0 2px 2px;border-style:solid;border-color:#fff3;opacity:.7;will-change:opacity,background,box-shadow,border-color;transition:opacity .5s,fill 1s,border-color 1s;right:-.1rem;top:50%;background-color:#ffffff1a;border-radius:.3rem 0 0 .3rem;cursor:pointer}.display .toggler .icon{width:1.2rem;height:1.2rem;will-change:fill;transition:fill 1s}.display .toggler:hover{opacity:1}.display .toggler.open{background-color:#fff6;opacity:1}.display .toggler:not(.open){-webkit-animation:flash 2s cubic-bezier(.65,.13,1,1) infinite;animation:flash 2s cubic-bezier(.65,.13,1,1) infinite}.common,.editor{position:absolute;top:0;left:0;right:0;bottom:0;padding:3rem .6rem 0;display:flex;flex-direction:column;overflow:auto}@-webkit-keyframes logo{0%,to{opacity:1}40%{opacity:.5}}@keyframes logo{0%,to{opacity:1}40%{opacity:.5}}.common .content{flex:1 0}.common h1{text-align:center;font-size:5rem;font-weight:900;line-height:1.4em;letter-spacing:2rem;text-indent:2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin:0 0 1rem;position:relative}.common h1 .logo{position:absolute;top:1.1rem;left:50%;margin-left:13rem;-webkit-animation:logo infinite 5s;animation:logo infinite 5s}.common h2{text-align:center;font-size:2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin:1rem 0 3rem;text-transform:uppercase}.common h1{font-family:Xingkai SC,\65b9\6b63\6977\4f53,\534e\6587\6977\4f53,\6977\4f53,\9ed1\4f53,cfkai}.common h2{font-family:Academy Engraved LET,American Typewriter,Bradley Hand,Avenir}.common .wrap{display:flex;justify-content:center}.common .wrap .text{margin-right:2rem;display:flex;justify-content:space-between;width:7rem}.common .wrap .text .name,.common .wrap .text .pinyin{-ms-writing-mode:tb-lr;writing-mode:vertical-lr;font-size:2.5rem;flex:1;will-change:max-height;overflow:hidden;max-height:0}.common .wrap .text .name.animate,.common .wrap .text .pinyin.animate{transition:max-height 1s;max-height:500px}.common .wrap .text .name{margin-left:.3rem;font-family:Xingkai SC,\65b9\6b63\6977\4f53,\534e\6587\6977\4f53,\6977\4f53,\9ed1\4f53,cfkai}.common .wrap .text .pinyin{font-family:Academy Engraved LET,American Typewriter,Bradley Hand,Avenir;text-transform:uppercase}.common .wrap .color{padding-top:.3rem;font-family:Avenir}.common .wrap .color .hex,.common .wrap .color .rgb{margin-bottom:.6rem;-webkit-user-select:all;-moz-user-select:all;user-select:all}.common .wrap .color .hex:before{content:"HEX: ";margin-right:.3rem}.common .wrap .color .rgb:before{content:"RGB: ";margin-right:.3rem}.editor{transform:translate(100%);will-change:transform,background;transition:transform cubic-bezier(.68,-.14,.15,1.35) .5s,background 1s;font-family:Weibei SC,STXingkai,KaiTi SC,STKaiTi,\6977\4f53,\9ed1\4f53,\5b8b\4f53,Xingkai SC;padding:3rem 0 0 2em}.editor .preview{padding-right:2rem;flex:1 0}.editor .preview>*,.editor .button,.editor .line,.editor .block,.editor .link,.editor code{will-change:color,background-color,border-color,box-shadow;transition:color 1s,background-color 1s,border-color 1s,box-shadow 1s}.editor .preview>*{margin-bottom:1rem}.editor.open{transform:translate(0)}.editor h1,.editor h2{text-align:center}.editor p{text-indent:2em;line-height:1.5em;margin-bottom:1rem}.editor ul{margin:0;padding:0;list-style:none}.editor ul li+li{margin-top:.4rem}.editor .line{margin:1rem 0;height:1px}.editor .block{border:2px solid;border-color:inherit;padding:1rem;border-radius:4px}.editor .block header{text-align:center}.editor .button{border:1px solid;border-radius:2px;outline:none;margin:0;padding:0 2em;line-height:2em;cursor:pointer}.editor .button+.button{margin-left:1rem}.editor .controls{position:-webkit-sticky;position:sticky;bottom:0;margin:0;background-color:#fff3;padding:1rem;display:flex}.editor .exporter{position:absolute;bottom:1rem;right:0;cursor:pointer;padding:0 1rem}.control{display:inline-flex;align-items:center}.control+.control{margin-left:1rem}select.control{background-color:transparent;border-radius:.3rem;border-color:#0006;color:inherit}.control.checkbox{cursor:pointer}.control.checkbox .icon{border-radius:.2rem;margin-right:.3rem;width:.8rem;height:.8rem;box-sizing:border-box;display:block;border:1px solid rgba(0,0,0,.4)}.control.checkbox.checked .icon{background:currentColor;box-shadow:inset 0 0 0 2px #ffffffb3;will-change:color,background-color,border-color;transition:color 1s,background-color 1s,border-color 1s}.rgb-strips .rgb-strip{height:1px;width:8rem;background-color:#fff6}.rgb-strips .rgb-strip .color-bar{height:2px}.rgb-strips .rgb-strip+.rgb-strip{margin-top:.3rem}.rgb-strips .rgb-strip .color-r{background-color:#c8000033}.rgb-strips .rgb-strip .color-g{background-color:#00c80033}.rgb-strips .rgb-strip .color-b{background-color:#0000c833}.rgb-card{display:flex;border-right:1px solid rgba(255,255,255,.3)}.rgb-card .rgb-block{border-left:1px solid rgba(255,255,255,.3);width:3.4rem;text-align:right;font-size:1.5rem;padding:1rem .5rem 0;position:relative}.rgb-card .color-r:before,.rgb-card .color-g:before,.rgb-card .color-b:before{content:"R";font-size:12px;position:absolute;left:.5rem;top:.5rem}.rgb-card .color-g:before{content:"G"}.rgb-card .color-b:before{content:"B"}@-webkit-keyframes card-flip{0%{transform:rotateX(90deg)}to{transform:rotateX(0)}}@keyframes card-flip{0%{transform:rotateX(90deg)}to{transform:rotateX(0)}}.footer .box{display:flex;flex-direction:row;align-items:center;justify-content:center}.info,.question,.github{display:inline-block;will-change:transform,background-color;margin-left:.5rem}.info .icon,.question .icon,.github .icon{cursor:pointer;text-align:center;display:block;width:1rem;height:1rem;border-radius:50%;border:1px solid rgba(255,255,255,.3);line-height:1rem;font-size:1rem}.info .icon:before,.question .icon:before,.github .icon:before{content:"i";font-family:monospace;font-style:normal;will-change:transform;transition:transform .5s}.info:hover .icon,.question:hover .icon,.github:hover .icon{background-color:#fff3}.info:hover .card,.question:hover .card,.github:hover .card{display:block;-webkit-animation:.5s forwards card-flip;animation:.5s forwards card-flip}.info .card,.question .card,.github .card{display:none;position:absolute;right:-1.3rem;bottom:100%;white-space:nowrap;padding-bottom:.5rem;font-size:.8rem;will-change:transform;transform:rotateX(90deg);transform-origin:bottom}.info .card .triangle,.question .card .triangle,.github .card .triangle{width:0;height:0;border-style:solid;border-width:.6rem .8rem 0;border-color:rgba(255,255,255,.3) transparent transparent transparent;position:absolute;right:1.2rem;top:100%}.info .card .content,.question .card .content,.github .card .content{background-color:#ffffff4d;position:relative;border-radius:.3rem;padding:.8rem;line-height:1.5rem}.copyright{display:flex}.info .icon{transform:scale(.7)}.question .icon,.github .icon{width:1.2rem;height:1.2rem;border-width:3px;line-height:normal}.question:hover .icon,.github:hover .icon{-webkit-animation:1s forwards shake;animation:1s forwards shake}.question .icon:before{content:"?"}.question .card{padding-bottom:1rem}.question .content{width:20rem;max-height:20rem;white-space:pre-line;font-family:Weibei SC,STXingkai,KaiTi SC,STKaiTi,\6977\4f53,\9ed1\4f53,\5b8b\4f53,Xingkai SC}.question .content p{line-height:1.1rem}.question .content p+p{margin-top:.3rem}.question .content h2{font-family:Weibei SC,STXingkai,KaiTi SC,STKaiTi,\6977\4f53,\9ed1\4f53,\5b8b\4f53,Xingkai SC;font-size:1.3rem;margin:0 0 .4rem}.question .content img{border:1px solid rgba(255,255,255,.4);border-radius:.2rem;padding:2px}.display .footer{position:-webkit-sticky;position:sticky;bottom:0;padding:2rem;display:flex;align-items:center;justify-content:space-between}.display .footer a,.display .footer a:active,.display .footer a:visited{color:inherit}@media(max-width:1280px){body{font-size:15px}.display .common h1{letter-spacing:1rem;text-indent:1rem}.display .common h1 .logo{margin-left:11.5rem}}@media(max-width:1080px){body{font-size:14px}.display .common h1{letter-spacing:normal;letter-spacing:initial;text-indent:0;text-indent:initial}.display .common h1 .logo{margin-left:10rem}}kbd{border:1px solid rgba(0,0,0,.4);border-radius:.3rem;padding:0 .5rem;text-transform:uppercase}