.mainWrapper{background:#181818;margin:0;min-height:100vh;position:fixed;top:0;bottom:0;left:0;right:0;font-size:21px;font-family:var(--font-code),Inconsolata,monospace}.hidden{display:none!important}.icon{display:inline-block;line-height:1;vertical-align:bottom}#sliderArea{display:grid;grid-template-rows:auto 1fr auto auto auto;justify-content:right}#sliderArea .view-HueSlider{grid-column:5/6;grid-row:1/4}#sliderArea .view-SatSlider{grid-column:3/4;grid-row:3/4}#sliderArea .view-ValSlider{grid-column:4/5;grid-row:3/4}#sliderArea .view-RedSlider{grid-column:2/3;grid-row:4/5}#sliderArea .view-GreenSlider{grid-column:3/4;grid-row:4/5}#sliderArea .view-BlueSlider{grid-column:4/5;grid-row:4/5}#sliderArea .view-AlphaSlider{grid-column:5/6;grid-row:4/5}#sliderArea #mainInput{grid-column:2/6;grid-row:5/6}#sliderArea #mainColorDisplay{grid-column:2/3;grid-row:3/4}#sliderArea #satValSlider{grid-column:2/5;grid-row:1/3}#sliderArea #modeCopyController{grid-column:1/2;grid-row:1/2}input{margin:0;border:1px solid #000;box-sizing:border-box;background:#181818;color:#aaa;font-size:21px;font-family:Inconsolata,monospace;padding:5px 0 5px 8px;letter-spacing:1px}input.invalid{background:#200e0e}#mainColorDisplay,#mainInput,#modeCopyController,#satValSlider,.vbar{border-radius:8px;border:1px solid #000;background:#222;padding:5px}.vbar{width:90px;display:flex;flex-direction:column;padding-top:0}.vbar .numberWrapper{border-radius:4px;overflow:hidden;height:42px;flex-grow:0;flex-shrink:0;border:1px solid #000}.vbar .sliderOuter{padding:12px 0;position:relative}.vbar .sliderOuter .sliderInner{box-sizing:content-box;height:256px;background:linear-gradient(#ff0000,#000000);border:1px solid #000;top:11px;left:3px;right:3px;border-radius:3px}.vbar .sliderOuter .sliderMarker{box-sizing:content-box;position:absolute;left:0;right:0;margin-top:5px;top:180px;height:1px;background:rgba(0,0,0,0);border-color:rgba(0,0,0,0) #ccc;border-style:solid;border-width:7px}.vbar .numberWrapper{display:flex}.vbar .numberWrapper .numberBox{border:0;width:0;flex-shrink:1;flex-grow:1;padding-right:0}.vbar .numberWrapper .arrowWrapper{display:flex;flex-direction:column}.vbar .numberWrapper .arrow{padding:10px 3px 0;line-height:0;flex-grow:1;flex-shrink:1;background:#333;color:#aaa;font-size:14px;text-align:center;cursor:pointer}.vbar .numberWrapper .arrow:hover{background:#555}.vbar .numberWrapper .arrow:active{background:#181818}.vbar .numberWrapper .arrowUp{border-bottom:1px solid #000}.controlGroup{display:flex;flex-direction:row;border-radius:4px;overflow:hidden;border:1px solid #000}.controlGroup:not(:last-child){margin-bottom:5px}.controlGroup input{border:0;flex-grow:1}.controlGroup .button{position:relative;padding:5px 8px 6px;background:#333;color:#aaa;font-size:20px;text-align:center;cursor:pointer;min-width:34px}.controlGroup .button:not(:first-child){border-left:1px solid #000}.controlGroup .button:hover{background:#555}.controlGroup .button:active{background:#181818}.controlGroup .button.active{background:#999;color:#000}.controlGroup .button .desc{padding-left:1ch;font-size:85%;display:inline-block;height:18px}.controlGroup .button .buttonSuccessToast{padding:inherit;position:absolute;z-index:1;left:0;right:0;top:0;bottom:0;background:#555;color:inherit;opacity:1;pointer-events:none;transition:opacity .5s;text-align:center}.controlGroup .button .buttonSuccessToast.fade{opacity:0}.controlGroup.vertical{flex-direction:column}.controlGroup.vertical .button{border-left:0;text-align:left}.controlGroup.vertical .button:not(:first-child):not(.first){border-top:1px solid #000}#mainInput{width:auto}#mainColorDisplay{display:flex}#mainColorDisplay .inner{display:flex;flex-direction:column;border-radius:4px;overflow:hidden;border:1px solid #000;background:conic-gradient(#666 90deg,#999 90deg 180deg,#666 180deg 270deg,#999 270deg) 50%/16px 16px repeat;flex-grow:1}#mainColorDisplay .inner .alpha,#mainColorDisplay .inner .solid{flex-grow:1}#satValSlider{display:flex;padding:16px}#satValSlider .sliderOuter{width:100%;height:100%;border:1px solid #000;position:relative}#satValSlider .sliderOuter .sliderInner{position:absolute;left:0;right:0;top:0;bottom:0;background-image:linear-gradient(rgba(0,0,0,0),#000),linear-gradient(90deg,#fff,rgba(255,255,255,0));background-color:red}#satValSlider .sliderOuter .sliderMarker{position:absolute;width:2px;height:2px;left:50px;top:50px;margin-top:-1px;margin-left:-1px;border-color:#fff}#satValSlider .sliderOuter .sliderMarker:before{content:"";position:absolute;top:0;left:-8px;width:6px;height:2px;border-left:6px solid #fff;border-right:6px solid #fff;border-color:inherit}#satValSlider .sliderOuter .sliderMarker:after{content:"";position:absolute;top:-8px;left:0;width:2px;height:6px;border-top:6px solid #fff;border-bottom:6px solid #fff;border-color:inherit}#modeCopyController{display:grid;grid-gap:5px}#modeCopyController .mainMode{grid-area:1/1/2/3}#modeCopyController .previews{grid-area:2/1/3/2}#modeCopyController .copys{grid-area:2/2/3/3}#modeCopyController .controlGroup{margin:0}#modeCopyController .previews .button{text-align:center}#gradientController{position:absolute;left:250px;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;padding:15px 0;background:#181818}#gradientController .gradientSwatch{height:150px;width:150px;border-radius:8px;flex-shrink:1;position:relative;background-image:conic-gradient(#666 90deg,#999 90deg 180deg,#666 180deg 270deg,#999 270deg) center/16px 16px repeat}#gradientController .gradientSwatch .addAfter,#gradientController .gradientSwatch .addBefore,#gradientController .gradientSwatch .addMultiBefore,#gradientController .gradientSwatch .delete,#gradientController .gradientSwatch .duplicate{position:absolute;height:40px;text-align:center;cursor:pointer;z-index:3;padding:8px;font-size:23px;color:hsla(0,0%,100%,0);transition:color .2s}#gradientController .gradientSwatch .addAfter:hover,#gradientController .gradientSwatch .addBefore:hover,#gradientController .gradientSwatch .addMultiBefore:hover,#gradientController .gradientSwatch .delete:hover,#gradientController .gradientSwatch .duplicate:hover{color:#fff}#gradientController .gradientSwatch .addAfter:before,#gradientController .gradientSwatch .addBefore:before,#gradientController .gradientSwatch .addMultiBefore:before,#gradientController .gradientSwatch .delete:before,#gradientController .gradientSwatch .duplicate:before{content:"";z-index:-1;position:absolute;top:20px;bottom:20px;left:0;right:0;background:#181818;transition:top .15s ease-in,bottom .15s ease-in;border-radius:5px}#gradientController .gradientSwatch .addAfter:hover:before,#gradientController .gradientSwatch .addBefore:hover:before,#gradientController .gradientSwatch .addMultiBefore:hover:before,#gradientController .gradientSwatch .delete:hover:before,#gradientController .gradientSwatch .duplicate:hover:before{top:0;bottom:0;transition:top .15s ease-out,bottom .15s ease-out}#gradientController .gradientSwatch:hover .addAfter,#gradientController .gradientSwatch:hover .addBefore,#gradientController .gradientSwatch:hover .addMultiBefore,#gradientController .gradientSwatch:hover .delete,#gradientController .gradientSwatch:hover .duplicate{color:hsla(0,0%,100%,.2)}#gradientController .gradientSwatch .addBefore,#gradientController .gradientSwatch .addMultiBefore{top:-20px}#gradientController .gradientSwatch .addAfter,#gradientController .gradientSwatch .addBefore{left:30%;right:30%}#gradientController .gradientSwatch .addMultiBefore{left:70%;right:0}#gradientController .gradientSwatch .addAfter{bottom:-20px}#gradientController .gradientSwatch:first-child .addMultiBefore,#gradientController .gradientSwatch:not(:last-child) .addAfter{display:none}#gradientController .gradientSwatch .duplicate{left:-20px;width:40px;top:50%;bottom:auto;margin-top:-20px}#gradientController .gradientSwatch:only-child .delete{display:none}#gradientController .gradientSwatch .delete{right:-20px;left:auto;width:40px;top:50%;bottom:auto;margin-top:-20px}#gradientController .gradientSwatch:not(.active) .isActive{display:none}#gradientController .gradientSwatch .isActive{position:absolute;left:8px;top:8px;font-size:20px}#gradientController .gradientSwatch:hover+.gradientSwatch .addBefore,#gradientController .gradientSwatch:hover+.gradientSwatch .addMultiBefore{color:hsla(0,0%,100%,.2)}#gridControllerWrapper{position:absolute;left:250px;top:0;bottom:0;display:flex;flex-direction:column;pointer-events:none;justify-content:center;z-index:5}#gridController{pointer-events:auto;background:#181818;border:1px solid #000;border-radius:8px;position:relative;font-size:72px}#gridController .elementArea{position:relative;margin:32px}#gridController #gridRenderCanvas{top:32px;left:32px;right:32px;bottom:32px;width:auto;height:auto}#gridController #gridRenderCanvas,#gridController .gridSwatch{position:absolute;background-image:conic-gradient(#666 90deg,#999 90deg 180deg,#666 180deg 270deg,#999 270deg) center/16px 16px repeat}#gridController .gridSwatch{display:block;box-sizing:border-box;width:52px;height:52px;border-radius:4px;margin-left:-26px;margin-bottom:-26px;z-index:2;background-position:50%;border:2px solid #000;color:#000;transition:all .05s linear}#gridController .gridSwatch.light{color:#e7e7e7}#gridController .gridSwatch.unlocked{border-style:dashed;background:rgba(0,0,0,0)}#gridController .gridSwatch .isActive{position:absolute;left:50%;bottom:50%;margin-bottom:-2px;font-size:20px}#gridController .gridSwatch:not(.active) .isActive{display:none}#gridController:not(:hover) .gridSwatch{width:16px;height:16px;border-radius:8px;margin-left:-8px;margin-bottom:-8px;border-color:rgba(0,0,0,0)}#gridController:not(:hover) .gridSwatch.unlocked{opacity:0}#gridController .gridGapControl,#gridController .gridRowControl{position:absolute;width:40px;height:40px;background:rgba(24,24,24,0);border-radius:5px;display:flex;justify-content:center;align-items:center;opacity:0;transition:all .05s linear}#gridController .gridGapControl:hover,#gridController .gridRowControl:hover{background:#181818}#gridController .gridGapControl .add,#gridController .gridGapControl .delete,#gridController .gridRowControl .add,#gridController .gridRowControl .delete{font-size:20px;color:hsla(0,0%,100%,.2);cursor:pointer}#gridController:hover .gridGapControl,#gridController:hover .gridRowControl{opacity:1}#gridController .gridRowControl.horizontal{right:-68px;margin-bottom:-20px}#gridController .gridRowControl.vertical{bottom:-68px;margin-left:-20px}#gridController .gridGapControl.horizontal{left:-68px;margin-bottom:-20px}#gridController .gridGapControl.vertical{top:-68px;margin-left:-20px}#historyView{position:absolute;width:200px;left:0;top:0;bottom:0;background:#181818;padding-right:10px}#historyView .historyGrad{margin-bottom:2px;height:30px;border-bottom-right-radius:8px;border-top-right-radius:8px;display:grid;overflow:hidden}#historyView .controlGroup{position:absolute;left:10px;bottom:10px}#previewCanvasCtx,#previewCanvasGl{position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;background:conic-gradient(#666 90deg,#999 90deg 180deg,#666 180deg 270deg,#999 270deg) 50%/16px 16px repeat}[data-template=true]{display:none}