body{background:var(--baseColor);color:var(--textColor)}@media only screen and (min-height:800px){body{justify-content:center}}@media only screen and (max-height:600px){body{padding-top:10px}}.soft-element{text-align:center;width:var(--size);height:var(--size);border-radius:var(--radius);justify-content:center;align-items:center;display:flex}.soft-shadow{background:linear-gradient(var(--angle),var(--firstGradientColor),var(--secondGradientColor));box-shadow:var(--positionX)var(--positionY)var(--blur)var(--darkColor),var(--positionXOpposite)var(--positionYOpposite)var(--blur)var(--lightColor)}.soft-shadow.pressed{box-shadow:inset var(--positionX)var(--positionY)var(--blur)var(--darkColor),inset var(--positionXOpposite)var(--positionYOpposite)var(--blur)var(--lightColor)}.title{text-align:center;z-index:1;margin-top:20px;margin-bottom:20px}@media only screen and (min-width:1200px){.title{margin-top:0;margin-bottom:60px}.title h1{font-size:35px}.title h2{font-size:25px}}@media only screen and (max-width:680px) and (max-height:800px){.title{margin-top:10px;margin-bottom:10px}.title h1{font-size:22px}.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{margin:0;font-weight:700}.title h2{margin:5px 0 0;font-size:21px;font-weight:400}.container{text-align:center;width:100%;margin-bottom:20px}@media only screen and (min-height:800px){.container{margin-bottom:70px}}.container .flex-custom{align-items:flex-start;margin-inline:auto;display:inline-flex}@media only screen and (max-width:680px){.container .flex-custom{flex-direction:column;align-items:center}}.container .flex-custom .preview{justify-content:center;align-items:center;width:500px;height:500px;margin-right:50px;display:flex;position:relative}@media only screen and (max-width:1000px),only screen and (max-height:713px){.container .flex-custom .preview{width:400px;height:400px;margin-right:30px}}@media only screen and (max-width:800px){.container .flex-custom .preview{width:300px;height:300px;margin-right:20px}}@media only screen and (max-width:680px){.container .flex-custom .preview{z-index:1;width:100%;height:200px;margin-bottom:30px;margin-right:0}}@media only screen and (max-height:735px){.container .flex-custom .preview{margin-bottom:20px}}@media only screen and (max-height:720px){.container .flex-custom .preview{margin-bottom:0}}.container .flex-custom .configuration{text-align:left;border-radius:30px;flex-direction:column;padding:20px 30px;display:flex;position:relative}@media only screen and (min-width:1700px){.container .flex-custom .configuration{font-size:16px}}@media only screen and (max-width:950px){.container .flex-custom .configuration{font-size:12px}}@media only screen and (max-width:680px){.container .flex-custom .configuration{box-shadow:none;background:var(--baseColor);border-radius:15px;padding:15px;font-size:11px}}.container .flex-custom .configuration .row{color:var(--textColor);align-items:center;margin-top:0;margin-bottom:20px;font-weight:700;display:flex}.container .flex-custom .configuration .row--label{margin-bottom:10px}@media only screen and (max-width:680px) and (max-height:715px),screen and (max-height:720px){.container .flex-custom .configuration .row{margin-bottom:10px}.container .flex-custom .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-custom .configuration .row{margin-bottom:5px}.container .flex-custom .configuration .row.row--checkbox{margin-bottom:7px}}.container .flex-custom .configuration .row label{-webkit-user-select:none;user-select:none;padding-right:10px}@media only screen and (max-width:950px){.container .flex-custom .configuration .row label{padding-right:6px}}.container .flex-custom .configuration .code-block{font-size:10px;position:relative}.container .flex-custom .configuration .code-block pre{min-width:354px;background:var(--textColor)!important;margin:0!important;padding:15px!important}@media only screen and (min-width:1500px){.container .flex-custom .configuration .code-block{font-size:12px}.container .flex-custom .configuration .code-block pre{min-width:430px!important}}@media only screen and (min-width:1700px){.container .flex-custom .configuration .code-block{font-size:14px}.container .flex-custom .configuration .code-block pre{min-width:500px!important}}@media only screen and (max-width:950px){.container .flex-custom .configuration .code-block{font-size:8px}.container .flex-custom .configuration .code-block pre{min-width:290px!important}}.container .flex-custom .configuration .code-block:before{content:"Copied to clipboard!";color:#f6f5f7;opacity:.9;text-align:center;z-index:-1;background:#47a049;justify-content:center;align-items:center;width:100%;height:100%;font-size:15px;font-weight:700;display:flex;position:absolute;inset:0}.container .flex-custom .configuration .code-block.copied:before{z-index:2}.container .flex-custom .configuration .code-block.copied .copy{display:none}.container .flex-custom .configuration .code-block .copy{color:#fff;cursor:pointer;background-color:#3b843c;border:none;border-radius:3px;padding:3px 7px;position:absolute;top:4px;right:4px}.container .flex-custom .configuration .code-block #code-container,.container .flex-custom .configuration .code-block .hidden{position:absolute;left:-9999px}.container .flex-custom .configuration .shape-switch{border-radius:3px;flex-grow:1;display:flex;overflow:hidden}.container .flex-custom .configuration .shape-switch button{background:var(--textColor);color:var(--textColorOpposite);cursor:pointer;opacity:.8;border:none;outline:0;flex-grow:1;padding:4px 10px}.container .flex-custom .configuration .shape-switch button svg{stroke:var(--textColorOpposite);width:45px}.container .flex-custom .configuration .shape-switch button *{pointer-events:none}.container .flex-custom .configuration .shape-switch button.active{opacity:1}input[type=range]{-webkit-appearance:none;background-color:#0000;width:100%;height:0;margin:10px 0;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{cursor:pointer;animate:.2s;background:var(--textColor);border-radius:3px;width:100%;height:6px}input[type=range]::-webkit-slider-thumb{background:var(--textColor);cursor:pointer;-webkit-appearance:none;border:1px solid #000;border-radius:50%;width:16px;height:16px;margin-top:-5px;box-shadow:1px 1px 1px #30302f,0 0 1px #30302f}input[type=range]::-moz-range-thumb{background:var(--textColor);cursor:pointer;-webkit-appearance:none;border:1px solid #000;border-radius:50%;width:16px;height:16px;margin-top:-5px;box-shadow:1px 1px 1px #30302f,0 0 1px #30302f}input[type=range]:hover:after,input[type=range]:active:after,input[type=range]:focus:after,input[type=range]:focus-within:after{content:attr(value)"px";color:var(--textColorOpposite);background:var(--textColor);border-radius:3px;padding:10px;position:absolute;top:50%;left:105%;transform:translateY(-50%)}@media only screen and (max-width:410px){input[type=range]:hover:after,input[type=range]:active:after,input[type=range]:focus:after,input[type=range]:focus-within:after{top:15px;right:15px;left:unset;transform:unset}}input[type=range]:hover:before,input[type=range]:active:before,input[type=range]:focus:before,input[type=range]:focus-within:before{border-right:15px solid var(--textColor);z-index:222;content:" ";border-top:10px solid #0000;border-bottom:10px solid #0000;width:0;height:0;position:absolute;top:50%;left:103%;transform:translateY(-50%)}@media only screen and (max-width:410px){input[type=range]:hover:before,input[type=range]:active:before,input[type=range]:focus:before,input[type=range]:focus-within:before{display:none}}input[type=range][name=colorDifference]:hover:after,input[type=range][name=colorDifference]:active:after,input[type=range][name=colorDifference]:focus:after{content:attr(value)}input[type=range]:focus::-ms-fill-lower{background:var(--textColor)}input[type=range]:focus::-ms-fill-upper{background:var(--textColor)}input[type=range]:focus::-webkit-slider-runnable-track{background:var(--textColor)}input[type=range]::-moz-range-track{cursor:pointer;animate:.2s;background:var(--textColor);border-radius:1.3px;width:100%;height:6px}input[type=range]::-moz-range-thumb{background:var(--textColor);cursor:pointer;border:1px solid #000;border-radius:50%;width:16px;height:16px;box-shadow:1px 1px 1px #30302f,0 0 1px #30302f}input[type=range]::-ms-thumb{background:var(--textColor);cursor:pointer;border:1px solid #000;border-radius:50%;width:16px;height:16px;box-shadow:1px 1px 1px #30302f,0 0 1px #30302f}input[type=range]::-ms-track{cursor:pointer;animate:.2s;color:#0000;background:0 0;border-width:16px 0;border-color:#0000;width:100%;height:6px}input[type=range]::-ms-fill-lower{border:.2px solid #010101;border-radius:2.6px;box-shadow:1px 1px 1px #000,0 0 1px #0d0d0d}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]{border:3px solid var(--textColor);color:#001f3f;width:85px;height:32px;padding:0 5px;font-size:15px;font-weight:700;display:inline-block}input[type=color]{-webkit-appearance:none;cursor:pointer;border:none;border:3px solid var(--textColor);width:32px;height:32px;padding:0}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none}.tooltip{display:inline-block;position:relative}.tooltip .tooltiptext{visibility:hidden;color:#fff;text-align:center;z-index:1;opacity:0;background-color:#555;border-radius:6px;width:120px;padding:5px 0;transition:opacity .3s;position:absolute;bottom:130%;left:0}.tooltip .tooltiptext:after{content:"";border:5px solid #0000;border-top-color:#555;margin-left:-5px;position:absolute;top:100%;left:22px}.tooltip:hover .tooltiptext{visibility:visible;opacity:1}.checkbox{cursor:pointer}.checkbox input{z-index:-9999;position:absolute;left:-9999px}.checkbox span{background:var(--textColorOpposite);border:3px solid var(--textColor);border-radius:3px;width:20px;height:20px;padding:2px;display:block;position:relative}.checkbox input:checked+span:before{content:"";background:var(--textColor);border-radius:1px;width:10px;height:10px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.radial-gradient{background:radial-gradient(circle,#ff0,#fc0,#f90)}