:root{--blur:60px;--textColor:#001f3f;--textColorOpposite:#f6f5f7;--baseColor:#aab7ea;--darkColor:#dadada;--firstGradientColor:#dadada;--lightColor:#adadad;--secondGradientColor:#adadad;--positionX:30px;--positionXOpposite:-30px;--positionY:30px;--positionYOpposite:-30px;--angle:145deg;--size:150px;--radius:30px}*{box-sizing:border-box}*,body{margin:0;padding:0}body{background:#aab7ea;background:var(--baseColor);color:#001f3f;color:var(--textColor);font-family:Muli,sans-serif;height:100vh;display:flex;flex-direction:column;align-items:center;overflow:hidden}@media only screen and (min-height:800px){body{justify-content:center}}@media only screen and (max-height:600px){body{padding-top:10px}}.soft-element{display:flex;align-items:center;justify-content:center;text-align:center;width:150px;width:var(--size);height:150px;height:var(--size);border-radius:30px;border-radius:var(--radius)}.soft-shadow{background:linear-gradient(145deg,#dadada,#adadad);background:-webkit-gradient(linear,left top,left bottom,from(var(--angle)),color-stop(var(--firstGradientColor)),to(var(--secondGradientColor)));background:linear-gradient(var(--angle),var(--firstGradientColor),var(--secondGradientColor));box-shadow:30px 30px 60px #dadada,-30px -30px 60px #adadad;box-shadow:var(--positionX) var(--positionY) var(--blur) var(--darkColor),var(--positionXOpposite) var(--positionYOpposite) var(--blur) var(--lightColor)}.soft-shadow.pressed{box-shadow:inset 30px 30px 60px #dadada,inset -30px -30px 60px #adadad;box-shadow:inset var(--positionX) var(--positionY) var(--blur) var(--darkColor),inset var(--positionXOpposite) var(--positionYOpposite) var(--blur) var(--lightColor)}.title{text-align:center;margin-bottom:20px;margin-top:20px;z-index:1}@media only screen and (min-width:1500px){.title{margin-bottom:40px;margin-top:0}.title h1{font-size:35px}.title h2{font-size:25px}}@media only screen and (min-width:1700px) and (min-height:870px){.title{margin-bottom:70px}.title h1{font-size:38px}.title h2{font-size:28px}}@media only screen and (max-width:680px) and (max-height:800px){.title{margin-bottom:10px;margin-top:10px}.title h1{font-size:18px}.title h2{font-size:15px}}@media only screen and (max-width:680px) and (max-height:620px){.title h1{display:none}.title h2{font-size:14px}}@media only screen and (max-height:600px){.title,.title h2{display:none}}.title h1{font-weight:700;margin:0}.title h2{font-weight:400;margin:5px 0 0;font-size:21px}.container{width:100%;text-align:center;margin-bottom:20px}@media only screen and (min-height:800px){.container{margin-bottom:70px}}.container .flex{display:flex;align-items:flex-start}@media only screen and (max-width:680px){.container .flex{flex-direction:column;align-items:center}}.container .flex .preview{position:relative;display:flex;justify-content:center;align-items:center;width:500px;height:500px;margin-right:50px}@media only screen and (min-width:1500px) and (min-height:860px){.container .flex .preview{}}@media only screen and (max-height:713px),only screen and (max-width:1000px){.container .flex .preview{width:400px;height:400px;margin-right:30px}}@media only screen and (max-width:800px){.container .flex .preview{width:300px;height:300px;margin-right:20px}}@media only screen and (max-width:680px){.container .flex .preview{width:100%;height:200px;margin-right:0;margin-bottom:30px;z-index:1}}@media only screen and (max-height:735px){.container .flex .preview{margin-bottom:20px}}@media only screen and (max-height:720px){.container .flex .preview{margin-bottom:0}}.container .flex .configuration{display:flex;flex-direction:column;padding:20px 30px;border-radius:30px;text-align:left;position:relative}@media only screen and (min-width:1700px){.container .flex .configuration{font-size:16px}}@media only screen and (max-width:950px){.container .flex .configuration{font-size:12px}}@media only screen and (max-width:680px){.container .flex .configuration{font-size:11px;padding:15px;border-radius:15px;box-shadow:none;background:#aab7ea;background:var(--baseColor)}}.container .flex .configuration .row{display:flex;align-items:center;font-weight:700;color:#001f3f;color:var(--textColor);margin-bottom:20px;margin-top:0}.container .flex .configuration .row--label{margin-bottom:10px}@media only screen and (max-width:680px) and (max-height:715px),screen and (max-height:720px){.container .flex .configuration .row{margin-bottom:10px}.container .flex .configuration .row.row--checkbox{margin-bottom:7px}}@media only screen and (max-width:680px) and (max-height:650px),screen and (max-height:600px){.container .flex .configuration .row{margin-bottom:5px}.container .flex .configuration .row.row--checkbox{margin-bottom:7px}}.container .flex .configuration .row label{padding-right:10px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;word-break:keep-all}@media only screen and (max-width:950px){.container .flex .configuration .row label{padding-right:6px}}.container .flex .configuration .code-block{font-size:10px;position:relative}.container .flex .configuration .code-block pre{margin:0!important;padding:15px!important;min-width:354px}@media only screen and (min-width:1500px){.container .flex .configuration .code-block{font-size:12px}.container .flex .configuration .code-block pre{min-width:430px!important}}@media only screen and (min-width:1700px){.container .flex .configuration .code-block{font-size:14px}.container .flex .configuration .code-block pre{min-width:500px!important}}@media only screen and (max-width:950px){.container .flex .configuration .code-block{font-size:8px}.container .flex .configuration .code-block pre{min-width:290px!important}}.container .flex .configuration .code-block:before{content:"复制成功!";position:absolute;width:100%;height:100%;background:#47a049;color:#f6f5f7;font-size:15px;font-weight:700;opacity:.9;vertical-align:middle;display:flex;align-items:center;justify-content:center;text-align:center;left:0;right:0;top:0;bottom:0;z-index:-1}.container .flex .configuration .code-block.copied:before{z-index:2}.container .flex .configuration .code-block.copied .copy{display:none}.container .flex .configuration .code-block .copy{position:absolute;top:4px;right:4px;border-radius:3px;background-color:#3b843c;color:#fff;border:none;cursor:pointer;padding:3px 7px}.container .flex .configuration .code-block #code-container,.container .flex .configuration .code-block .hidden{position:absolute;left:-9999px}.container .flex .configuration .shape-switch{display:flex;overflow:hidden;border-radius:3px;flex-grow:1}.container .flex .configuration .shape-switch button{flex-grow:1;padding:0 10px;background:#001f3f;background:var(--textColor);color:#f6f5f7;color:var(--textColorOpposite);cursor:pointer;outline:0;border:none;opacity:.8}.container .flex .configuration .shape-switch button svg{stroke:#f6f5f7;stroke:var(--textColorOpposite);width:45px}.container .flex .configuration .shape-switch button *{pointer-events:none}.container .flex .configuration .shape-switch button.active{opacity:1}input[type=range]{-webkit-appearance:none;margin:10px 0;height:0;width:100%;background-color:transparent;position:relative}@media only screen and (max-width:410px){input[type=range]{position:unset}}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{width:100%;height:6px;cursor:pointer;animate:.2s;background:#001f3f;background:var(--textColor);border-radius:3px}input[type=range]::-webkit-slider-thumb{box-shadow:1px 1px 1px #30302f,0 0 1px #30302f;border:1px solid #000;height:16px;width:16px;border-radius:50%;background:#001f3f;background:var(--textColor);cursor:pointer;-webkit-appearance:none;margin-top:-5px}input[type=range]::-moz-range-thumb{box-shadow:1px 1px 1px #30302f,0 0 1px #30302f;border:1px solid #000;height:16px;width:16px;border-radius:50%;background:#001f3f;background:var(--textColor);cursor:pointer;-webkit-appearance:none;margin-top:-5px}input[type=range]:active:after,input[type=range]:focus-within:after,input[type=range]:focus:after,input[type=range]:hover:after{content:attr(value) "px";position:absolute;left:105%;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);color:#f6f5f7;color:var(--textColorOpposite);border-radius:3px;padding:10px;background:#001f3f;background:var(--textColor)}@media only screen and (max-width:410px){input[type=range]:active:after,input[type=range]:focus-within:after,input[type=range]:focus:after,input[type=range]:hover:after{right:15px;top:15px;left:unset;-webkit-transform:unset;transform:unset}}input[type=range]:active:before,input[type=range]:focus-within:before,input[type=range]:focus:before,input[type=range]:hover:before{width:0;height:0;border-right:15px solid #001f3f;border-right:15px solid var(--textColor);border-top:10px solid transparent;border-bottom:10px solid transparent;z-index:222;content:" ";position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);left:103%}@media only screen and (max-width:410px){input[type=range]:active:before,input[type=range]:focus-within:before,input[type=range]:focus:before,input[type=range]:hover:before{display:none}}input[type=range][name=colorDifference]:active:after,input[type=range][name=colorDifference]:focus:after,input[type=range][name=colorDifference]:hover:after{content:attr(value)}input[type=range]:focus::-ms-fill-lower,input[type=range]:focus::-ms-fill-upper,input[type=range]:focus::-webkit-slider-runnable-track{background:#001f3f;background:var(--textColor)}input[type=range]::-moz-range-track{width:100%;height:6px;cursor:pointer;animate:.2s;background:#001f3f;background:var(--textColor);border-radius:1.3px}input[type=range]::-moz-range-thumb,input[type=range]::-ms-thumb{box-shadow:1px 1px 1px #30302f,0 0 1px #30302f;border:1px solid #000;height:16px;width:16px;border-radius:50%;background:#001f3f;background:var(--textColor);cursor:pointer}input[type=range]::-ms-track{width:100%;height:6px;cursor:pointer;animate:.2s;background:transparent;border-color:transparent;border-width:16px 0;color:transparent}input[type=range]::-ms-fill-lower,input[type=range]::-ms-fill-upper{border:.2px solid #010101;border-radius:2.6px;box-shadow:1px 1px 1px #000,0 0 1px #0d0d0d}input[type=text]{color:#001f3f;padding:0 5px;font-size:15px;font-weight:700;width:85px;display:inline-block}input[type=color],input[type=text]{border:3px solid #001f3f;border:3px solid var(--textColor);height:32px}input[type=color]{-webkit-appearance:none;cursor:pointer;width:32px;padding:0}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none}.tooltip{position:relative;display:inline-block}.tooltip .tooltiptext{visibility:hidden;width:120px;background-color:#555;color:#fff;text-align:center;padding:5px 0;border-radius:6px;position:absolute;z-index:1;bottom:130%;left:0;opacity:0;-webkit-transition:opacity .3s;transition:opacity .3s}.tooltip .tooltiptext:after{content:"";position:absolute;top:100%;left:22px;margin-left:-5px;border:5px solid transparent;border-top-color:#555}.tooltip .tooltiptext{visibility:visible;opacity:1}.checkbox{cursor:pointer}.checkbox input{position:absolute;left:-9999px;z-index:-9999}.checkbox span{width:20px;height:20px;display:block;background:#f6f5f7;background:var(--textColorOpposite);padding:2px;border-radius:3px;border:3px solid #001f3f;border:3px solid var(--textColor);position:relative}.checkbox input:checked+span:before{content:"";position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);height:10px;border-radius:1px;width:10px;background:#001f3f;background:var(--textColor)}footer{padding:0 60px;display:flex;justify-content:space-between;width:100%}@media only screen and (max-width:918px){footer{padding:0 20px}}.links{display:flex;align-items:center}.link{font-size:15px;font-weight:400;display:block;-webkit-text-decoration-color:#f6f5f7;text-decoration-color:#f6f5f7;-webkit-text-decoration-color:var(--textColorOpposite);text-decoration-color:var(--textColorOpposite);color:#001f3f;color:var(--textColor);border-radius:10px;padding-top:15px;text-align:right}@media only screen and (max-width:680px){.link{display:none}}.link b{background:#001f3f;background:var(--textColor);color:#f6f5f7;color:var(--textColorOpposite);padding:2px 5px;border-radius:4px}.social{display:flex;align-items:center}@media only screen and (max-width:680px){.social{display:none}}.social .instagram{padding:10px;border-radius:10px;margin-right:20px;background-color:#f8f8ff}.social .instagram,.social .instagram svg{display:block;color:#001f3f}.social .bmc-button img{height:27px;box-shadow:none;border:none;vertical-align:middle}.social .bmc-button{height:44px;line-height:44px;text-decoration:none;display:inline-flex;align-items:center;color:#001f3f;background-color:#f8f8ff;border-radius:10px;border:1px solid transparent;padding:7px 15px;font-size:16px;letter-spacing:.6px;margin:0 auto;-webkit-transition:opacity .1s linear;transition:opacity .1s linear}.social .bmc-button span{font-size:inherit;margin-left:10px;white-space:nowrap}.social .bmc-button:active,.social .bmc-button:focus,.social .bmc-button:hover{text-decoration:none;opacity:.85}.open{font-size:17px;margin-right:20px;font-weight:lighter;color:#001f3f;color:var(--textColor)}.open a{color:#001f3f}@media only screen and (max-width:800px){.open{display:none}}@media only screen and (max-width:680px){.github-star{position:absolute;right:15px;bottom:5px;z-index:1}}.links body{margin:0}.links a{text-decoration:none;outline:0}.links .widget{display:inline-block;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;font-size:0;line-height:0;white-space:nowrap}.links .btn,.links .social-count{position:relative;display:inline-block;height:14px;padding:2px 5px;font-size:11px;font-weight:600;line-height:14px;vertical-align:bottom;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-repeat:repeat-x;background-position:-1px -1px;background-size:110% 110%;border:1px solid}.links .btn{border-radius:.25em}.links .btn:not(:last-child){border-radius:.25em 0 0 .25em}.links .social-count{border-left:0;border-radius:0 .25em .25em 0}.links .widget-lg .btn,.links .widget-lg .social-count{height:auto;padding:5px 10px;font-size:12px;line-height:20px}@media only screen and (max-width:680px){.links .widget-lg .btn,.links .widget-lg .social-count{padding:2px 5px}}.links .octicon{display:inline-block;vertical-align:text-top;fill:currentColor}.links .btn{color:#24292e;background-color:#eff3f6;border-color:#c5c9cc;border-color:rgba(27,31,35,.2);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3ClinearGradient id='a' x2='0' y2='1'%3E%3Cstop stop-color='%23fafbfc'/%3E%3Cstop offset='90%25' stop-color='%23eff3f6'/%3E%3C/linearGradient%3E%3Crect width='100%25' height='100%25' fill='url(%23a)'/%3E%3C/svg%3E");background-image:-webkit-gradient(linear,left top,left bottom,from(#fafbfc),color-stop(90%,#eff3f6));background-image:linear-gradient(180deg,#fafbfc,#eff3f6 90%);filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr="#FFFAFBFC",endColorstr="#FFEEF2F5")}.links :root .btn{-webkit-filter:none;filter:none}.links .btn:focus,.links .btn:hover{background-color:#e6ebf1;background-position:-.5em;border-color:#9fa4a9;border-color:rgba(27,31,35,.35);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3ClinearGradient id='a' x2='0' y2='1'%3E%3Cstop stop-color='%23f0f3f6'/%3E%3Cstop offset='90%25' stop-color='%23e6ebf1'/%3E%3C/linearGradient%3E%3Crect width='100%25' height='100%25' fill='url(%23a)'/%3E%3C/svg%3E");background-image:-webkit-gradient(linear,left top,left bottom,from(#f0f3f6),color-stop(90%,#e6ebf1));background-image:linear-gradient(180deg,#f0f3f6,#e6ebf1 90%);filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr="#FFF0F3F6",endColorstr="#FFE5EAF0")}.links .btn:active,.links :root .btn:focus,.links :root .btn:hover{-webkit-filter:none;filter:none}.links .btn:active{background-color:#e9ecef;border-color:#a1a4a8;border-color:rgba(27,31,35,.35);box-shadow:inset 0 .15em .3em rgba(27,31,35,.15);background-image:none}.links .social-count{color:#24292e;background-color:#fff;border-color:#d1d2d3;border-color:rgba(27,31,35,.2)}.links .social-count:focus,.links .social-count:hover{color:#0366d6}.links .octicon-heart{color:#ea4aaa}