.sliderWrapper .slider{background-image:linear-gradient(45deg,#fff3 25%,#0000 25% 75%,#fff3 75%,#fff3),linear-gradient(45deg,#fff3 25%,#0000 25% 75%,#fff3 75%,#fff3);background-position:0 0,10px 10px;background-size:20px 20px}.color-tiles{background-color:#fff0;border-radius:6px;width:119px;height:119px;transition:background-color .1s;display:flex;position:relative}.color-tiles div .tile{border-radius:6px;width:100%;height:100%}.color-tiles div .tile,.color-tiles .bg{box-shadow:inset 0 1px 2px 1px #ffffff1a,inset 0 1px #fff3,inset 0 -1px 1px #0006,0 1px 1px #0006}.foreground,.background{width:100%;height:100%;position:absolute}.foreground{z-index:2}.background{background-color:#fff0}.expose{z-index:2;cursor:pointer;opacity:.4;background:#000c;border-radius:2px;width:16px;height:16px;transition:all .15s ease-out;position:absolute;top:5px;right:5px}.expose:before,.expose:after{content:"";width:5px;height:5px;position:absolute}.expose:before{border:0;border-top:2px solid #fffc;border-left:2px solid #fffc;top:3px;left:3px}.expose:after{border:2px solid #fffc;border-top:0;border-left:0;bottom:3px;right:3px}.color-tiles:hover .expose{opacity:1}.exposed .expose,.expose:hover{width:20px;height:20px;top:3px;right:3px}.exposed .expose:before,.exposed .expose:after{width:4px;height:4px}.exposed .expose:before{border:2px solid #fffc;border-top:0;border-left:0;top:3px;left:3px}.exposed .expose:after{border:0;border-top:2px solid #fffc;border-left:2px solid #fffc;bottom:3px;right:3px}.background-color{z-index:0;cursor:pointer;background-color:#fff0}.exposed .bg{left:0}.exposed .foreground{width:90px;height:90px;top:29px;left:29px}.exposed .background{width:90px;height:90px;right:29px;box-shadow:0 1px 10px #000c}.exposed .foreground{cursor:pointer;box-shadow:0 1px 10px #000c}.exposed .selected:after{content:"";z-index:1;cursor:pointer;border-radius:5px;box-shadow:inset 0 0 0 1px #ffffff80,inset 0 0 0 5px #00000080}.background,.foreground{transition:all .25s ease-in-out}.sliders{flex-direction:column;gap:.5rem;display:flex}.sliderWrapper{border-radius:10px;flex-direction:row;align-items:center;gap:1rem;width:450px;height:20px;display:flex}.sliderWrapper .slider{cursor:pointer;border-radius:10px;flex-grow:1;align-items:center;height:100%;display:flex}.sliderWrapper input[type=range]{appearance:none;box-shadow:none;background:0 0;border-radius:10px;outline:.2rem solid #1a1a1a;flex-grow:1;width:100%;height:100%;margin:0;padding:0;transition:background-color .1s;box-shadow:inset 0 1px 2px 1px #ffffff1a,inset 0 1px #fff3,inset 0 -1px 1px #0006,0 1px 1px #0006,0 0 2px 1px #000}.sliderWrapper input[type=range]::-webkit-slider-thumb{appearance:none;box-sizing:border-box;cursor:pointer;background-color:#ddd;background-image:radial-gradient(circle at top,#ffffffe6,#fff3 15px);border:none;border-radius:1em;outline:none;width:22px;height:22px;margin:0;padding:0;transition:background-color .4s;display:block;position:relative;box-shadow:inset 0 1px 1px #fff,inset 0 -1px 1px #0006,0 1px 4px #0006,0 0 2px #0009}.sliderWrapper input[type=range]::-moz-range-thumb{appearance:none;box-sizing:border-box;cursor:pointer;background-color:#ddd;background-image:radial-gradient(circle at top,#ffffffe6,#fff3 15px);border:none;border-radius:1em;outline:none;width:22px;height:22px;margin:0;padding:0;transition:background-color .4s;display:block;position:relative;box-shadow:inset 0 1px 1px #fff,inset 0 -1px 1px #0006,0 1px 4px #0006,0 0 2px #0009}.sliderWrapper input[type=range]::-webkit-slider-thumb:hover{-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);background-color:#dddddd80}.sliderWrapper input[type=range]::-moz-range-thumb:hover{-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);background-color:#dddddd80}.sliderWrapper input[type=text]{text-align:center;color:#e6e6e6;width:50px;height:20px;font-size:.9rem}.color-inputs{flex-direction:column;justify-content:center;gap:.5rem;display:flex}.color-inputs>div{gap:.5rem;width:100%;display:flex}.color-inputs input{text-align:center;flex-grow:1}input{color:#fffc;text-shadow:0 2px 1px #00000080;background-color:#0000004d;border:0;border-radius:4px;padding:8px 6px;font-size:1em;transition:all .3s;box-shadow:0 1px #ffffff1a,inset 0 1px 7px #000c}input:focus{color:#fff;outline:none}#hex{width:5.7em}#rgba{width:14em}#hsla{width:15em}input.error{color:#ff0f0f;background-color:#6600004d;box-shadow:0 1px #ff80801a,inset 0 1px 7px #000c}@font-face{font-family:AdelleBasic;src:url(adellebasic_bold-webfont.8da104fb.ttf)format("truetype"),url(adellebasic_bold-webfont.c66952e6.svg)format("svg"),url(adellebasic_bold-webfont.210eb328.woff)format("woff"),url(adellebasic_bold-webfont.18df934d.eot)format("eot")}@font-face{font-family:CaviarDreams;src:url(caviardreams-webfont.b2214454.ttf)format("truetype"),url(caviardreams-webfont.bc542ad6.svg)format("svg"),url(caviardreams-webfont.58a01ec6.woff)format("woff"),url(caviardreams-webfont.db578dde.eot)format("eot")}*{box-sizing:border-box}html{text-align:center;background-color:#2a2a2a;background-image:linear-gradient(to bottom right,#0000001a 25%,#0000 25% 50%,#0000001a 50% 75%,#0000 75%,#0000);background-size:80px 80px}body{background:0 0;padding:0 0 40px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;display:inline-block}.heading-font,h1,h2,h3{font-family:AdelleBasic,sans;font-weight:400}.inset-box-shadow,section,pre{box-shadow:0 1px #ffffff1a,inset 0 1px 7px #000c}h1,h2,h3{color:#eee;font-weight:400}h1{text-align:center;text-transform:uppercase;word-spacing:.05em;margin:0 0 .1em;font-size:3.5em;font-weight:700;line-height:1em}h1:focus{outline:0}h2{text-align:center;border-bottom:1px solid #0000004d;margin:.2em 0 0;padding-bottom:.6em;font-size:2em}h2+p{border-top:1px solid #ffffff0d;padding-top:1.2em}h3{margin:.8em 0 1em;font-size:1.6em}header p:first-child{text-transform:uppercase;text-shadow:1px 1px #000;color:#eee;letter-spacing:.1em;margin:1em 0 .3em;padding:0;font-family:CaviarDreams,sans;font-size:1.25em;font-style:normal;display:block}header p:first-child:before,header p:first-child:after{content:" ";border-bottom:1px solid #888;width:4.5em;height:1px;margin:0 .5em;display:inline-block;position:relative;top:-.35em}header p{text-shadow:0 1px #000;color:#aaa;text-transform:uppercase;letter-spacing:.5em;margin:0 0 1.2em;font-family:Caviar Dreams,sans;font-size:.7em;font-style:normal;font-weight:400;display:block}header a{border-bottom:0}a{color:#eee;text-decoration:none;transition:color .5s}p{margin:0;padding:0 0 1.5em;line-height:1.5em}#hslpicker{margin:1em 0 2em}.frame{flex-direction:row;align-items:center;gap:1rem;margin:2rem 0;display:flex}code{background:#0000004d;border-radius:4px;padding:0 .4em;font-family:menlo,monaco,andale mono,courier new,fixed;font-size:.95em;display:inline-block}pre{background:#0000004d;border-radius:4px;width:auto;margin:0 0 1.8em;padding:1em}pre code{background:0 0}.hide{display:none}section{color:#c6c6c6;text-align:left;background:#0003;border-radius:4px;margin-top:2em;padding:2em 2.5em .5em;font-size:.9em;line-height:1.45em;overflow:hidden}section p{font-family:Lucida sans,Helvetica,Arial,sans}section strong{color:#ccc}section a.why{color:#444;text-shadow:0 0 2px #000;text-transform:lowercase;text-align:center;width:3.5em;margin:0 auto;display:none}section h2,section h3{text-shadow:0 2px 2px #000000b3}footer{color:#555;text-shadow:0 1px 1px #00000080;font-size:13px}footer p{padding-bottom:.5em}footer a{color:#666;border-color:#555;margin-left:.2em;line-height:1.1em;display:inline-block;position:relative}footer a+a{margin-left:1em}footer a+a:before{content:" ";border-left:1px solid #000000b3;width:1px;height:1.3em;display:block;position:absolute;top:0;left:-.7em;box-shadow:inset 1px 0 #ffffff14}.url{text-shadow:inherit;text-align:center;cursor:text;color:#666;box-shadow:none;background:0 0;border:0;border-radius:0;width:168px;margin:0;padding:0 8px 2px;line-height:2em;display:inline-block}.url:focus,.url:hover{color:#999;background:#0000000d;box-shadow:inset 0 1px 10px #0006}
/*# sourceMappingURL=index.03f7f910.css.map */