/*! normalize.scss v0.1.0 | MIT License | based on git.io/normalize */@import url("https://fonts.googleapis.com/css?family=Alegreya+Sans:300,400,500,700|Hind:400,500,600&display=swap");html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}.mega{color:#de0060}.mega,h1,h2,h3,h4,h5,h6,p{margin:1rem 0}.p,p{letter-spacing:.025em;line-height:1.4}a{text-decoration:none;font-weight:inherit;color:inherit}button{border:0;border-bottom:1px solid;padding:0;background:var(--app-background)}button.ase{border:1px solid;border-top-right-radius:8px;width:2em;line-height:2.125;letter-spacing:-.05em;text-align:center;padding-right:.09em;z-index:2}*{box-sizing:border-box}body,html{min-height:100%;height:100%}.app{position:relative;height:100%}:root{font-size:16px;font-family:Alegreya Sans,sans-serif;box-sizing:border-box;--app-background:#fff;--app-default-color:#181816;--hex-stroke-color:#f2f2e5;--hex-stroke-highlight-color:#181816;background-color:var(--app-background);color:var(--app-default-color)}nav.central{background:var(--app-background);position:sticky;position:-webkit-sticky;top:0;z-index:2}nav.central .logo{margin:0 1rem}nav.central>a{opacity:.29;display:inline-block;line-height:3;margin:0 .5rem;transition:all .3s ease-in-out}nav.central a.active{opacity:1}.scrollable{width:100%;overflow-y:scroll;display:flex;align-items:center;justify-content:space-between;white-space:nowrap;scroll-snap-type:x mandatory;flex-flow:row nowrap}@keyframes appear{to{opacity:1;transform:translateZ(0)}}.frame{margin:0 1rem}.frame .appear>:first-child{opacity:0;transform:translate3d(0,5px,0);animation:appear .44s ease-in-out forwards;animation-delay:50ms}.frame .appear>:nth-child(2){opacity:0;transform:translate3d(0,10px,0);animation:appear .44s ease-in-out forwards;animation-delay:.1s}.frame .appear>:nth-child(3){opacity:0;transform:translate3d(0,15px,0);animation:appear .44s ease-in-out forwards;animation-delay:.15s}.frame .appear>:nth-child(4){opacity:0;transform:translate3d(0,20px,0);animation:appear .44s ease-in-out forwards;animation-delay:.2s}.frame .appear>:nth-child(5){opacity:0;transform:translate3d(0,25px,0);animation:appear .44s ease-in-out forwards;animation-delay:.25s}.frame .appear>:nth-child(6){opacity:0;transform:translate3d(0,30px,0);animation:appear .44s ease-in-out forwards;animation-delay:.3s}.frame .appear>:nth-child(7){opacity:0;transform:translate3d(0,35px,0);animation:appear .44s ease-in-out forwards;animation-delay:.35s}.frame .appear>:nth-child(8){opacity:0;transform:translate3d(0,40px,0);animation:appear .44s ease-in-out forwards;animation-delay:.4s}.frame .appear>:nth-child(9){opacity:0;transform:translate3d(0,45px,0);animation:appear .44s ease-in-out forwards;animation-delay:.45s}.frame .appear>:nth-child(10){opacity:0;transform:translate3d(0,50px,0);animation:appear .44s ease-in-out forwards;animation-delay:.5s}.stage-holder{display:flex;justify-content:flex-end}@keyframes ants{0%{stroke-dashoffset:0}to{stroke-dashoffset:12px}}@keyframes focus{0%{opacity:0}to{opacity:1}}.hexes{height:40vh}.hexes.delayed .hex{opacity:0;animation:focus .7s ease-in-out forwards}.hexes.delayed .hex.control-point{animation:focus .7s ease-in-out forwards,ants .6s linear infinite}.hexes.delayed .hex:nth-child(0){animation-delay:0ms,1ms}.hexes.delayed .hex:first-child{animation-delay:15ms,1ms}.hexes.delayed .hex:nth-child(2){animation-delay:30ms,1ms}.hexes.delayed .hex:nth-child(3){animation-delay:45ms,1ms}.hexes.delayed .hex:nth-child(4){animation-delay:60ms,1ms}.hexes.delayed .hex:nth-child(5){animation-delay:75ms,1ms}.hexes.delayed .hex:nth-child(6){animation-delay:90ms,1ms}.hexes.delayed .hex:nth-child(7){animation-delay:105ms,1ms}.hexes.delayed .hex:nth-child(8){animation-delay:.12s,1ms}.hexes.delayed .hex:nth-child(9){animation-delay:135ms,1ms}.hexes.delayed .hex:nth-child(10){animation-delay:.15s,1ms}.hexes.delayed .hex:nth-child(11){animation-delay:165ms,1ms}.hexes.delayed .hex:nth-child(12){animation-delay:.18s,1ms}.hexes.delayed .hex:nth-child(13){animation-delay:195ms,1ms}.hexes.delayed .hex:nth-child(14){animation-delay:.21s,1ms}.hexes.delayed .hex:nth-child(15){animation-delay:225ms,1ms}.hexes.delayed .hex:nth-child(16){animation-delay:.24s,1ms}.hexes.delayed .hex:nth-child(17){animation-delay:255ms,1ms}.hexes.delayed .hex:nth-child(18){animation-delay:.27s,1ms}.hexes.delayed .hex:nth-child(19){animation-delay:285ms,1ms}.hexes.delayed .hex:nth-child(20){animation-delay:.3s,1ms}.hexes.delayed .hex:nth-child(21){animation-delay:315ms,1ms}.hexes.delayed .hex:nth-child(22){animation-delay:.33s,1ms}.hexes.delayed .hex:nth-child(23){animation-delay:345ms,1ms}.hexes.delayed .hex:nth-child(24){animation-delay:.36s,1ms}.hexes.delayed .hex:nth-child(25){animation-delay:375ms,1ms}.hexes.delayed .hex:nth-child(26){animation-delay:.39s,1ms}.hexes.delayed .hex:nth-child(27){animation-delay:405ms,1ms}.hexes.delayed .hex:nth-child(28){animation-delay:.42s,1ms}.hexes.delayed .hex:nth-child(29){animation-delay:435ms,1ms}.hexes.delayed .hex:nth-child(30){animation-delay:.45s,1ms}.hexes.delayed .hex:nth-child(31){animation-delay:465ms,1ms}.hexes.delayed .hex:nth-child(32){animation-delay:.48s,1ms}.hexes.delayed .hex:nth-child(33){animation-delay:495ms,1ms}.hexes.delayed .hex:nth-child(34){animation-delay:.51s,1ms}.hexes.delayed .hex:nth-child(35){animation-delay:525ms,1ms}.hexes.delayed .hex:nth-child(36){animation-delay:.54s,1ms}.hexes.delayed .hex:nth-child(37){animation-delay:555ms,1ms}.hexes.delayed .hex:nth-child(38){animation-delay:.57s,1ms}.hexes.delayed .hex:nth-child(39){animation-delay:585ms,1ms}.hexes.delayed .hex:nth-child(40){animation-delay:.6s,1ms}.hexes.delayed .hex:nth-child(41){animation-delay:615ms,1ms}.hexes.delayed .hex:nth-child(42){animation-delay:.63s,1ms}.hexes.delayed .hex:nth-child(43){animation-delay:645ms,1ms}.hexes.delayed .hex:nth-child(44){animation-delay:.66s,1ms}.hexes.delayed .hex:nth-child(45){animation-delay:675ms,1ms}.hexes .hex{cursor:pointer}.hexes .hex:hover{stroke-width:2;stroke:rgba(255,32,32,.59)}.hexes .hex.control-point{stroke:var(--hex-stroke-highlight-color);animation:none,ants .6s linear infinite;stroke-dashoffset:1px;stroke-dasharray:6px;stroke-width:2;stroke-linejoin:miter}input[type=range]{-webkit-appearance:none;width:100%;background:transparent;height:1rem}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{width:100%;height:0;cursor:pointer;background:#878685}input[type=range]::-webkit-slider-thumb{box-shadow:none;background:hsla(0,0%,100%,.7);border-radius:.2rem;border:none;height:2rem;width:2rem;cursor:pointer;-webkit-appearance:none;margin-top:calc(-1rem + 1px)}input[type=range]::-moz-range-track{width:100%;height:0;cursor:pointer;background:transparent}input[type=range]::-moz-range-thumb{box-shadow:none;background:hsla(0,0%,100%,.7);border-radius:.2rem;border:none;height:2rem;width:2rem;cursor:pointer;margin-top:calc(-1rem + 1px)}.sliders{width:calc(90% - 1rem);margin-right:1rem;display:inline-block;scroll-snap-align:start;flex:none;scroll-margin:1rem}.sliders .h4{text-transform:capitalize}.slider{margin:.75rem 0;position:relative;min-height:4px}.slider[data-type=red]{background:#bf1f20}.slider[data-type=green]{background:#00bf40}.slider[data-type=blue]{background:#0040bf}.slider[data-type=brightness]{background:linear-gradient(90deg,#000,#fff)}.slider[data-type=saturation]{background:linear-gradient(90deg,#fff,transparent)}.slider label{display:none;pointer-events:none;font-weight:100;text-transform:uppercase;position:absolute;text-shadow:0 1px 0 #000;z-index:0;transform:translateX(-50%);left:50%;top:.25rem;opacity:.95;font-size:1rem}.swatches{display:flex;position:relative;align-items:center;padding:1rem 0;max-width:15rem}.library .swatches{margin:2rem 0}.swatches button{display:inline-block;height:100%;margin-left:1rem}.saved{position:relative;margin:3rem 0}.saved .delete{z-index:2}.saved .delete,.tris{position:absolute;right:0;top:0}.tris{left:0;transform:translateY(-50%);z-index:0}.tris svg{width:2rem;padding:4px;height:2rem}.swatch{height:3rem;width:1.5rem;transform:skewY(15deg) translateZ(0);transition:all .3s ease-in-out;margin-right:.25rem}.swatch:not(.fake):hover{transform:skewY(15deg) translate3d(0,-1rem,0)}.swatch.fake{border:1px dashed var(--app-default-color)}.mega{font-size:4.15rem;letter-spacing:-.03em;font-weight:900}.h1,.mega,h1,nav.central .logo{line-height:1.1;font-family:Hind,sans-serif}.h1,h1,nav.central .logo{font-size:2.76rem;font-weight:600}.h2,h2{font-size:2.07rem;line-height:1.1;font-weight:500;font-family:Hind,sans-serif}.h3,h3{font-size:1.84rem}.h3,.h4,h3,h4{line-height:1.1;font-weight:400;font-family:Hind,sans-serif}.h4,h4{font-size:1.46rem}.h5,h5{font-size:1.23rem;line-height:1.1;font-weight:400;font-family:Hind,sans-serif}.output textarea{width:100%;background:var(--app-background)}@media (min-width:641px){:root{font-size:18px}.stage-holder{justify-content:center}.sliders{width:calc(33% - 1rem)}}@media (min-width:1280px){:root{font-size:20px}}@media (prefers-color-scheme:dark){:root{--app-background:#181816;--app-default-color:#f2f2e5;--hex-stroke-color:#181816;--hex-stroke-highlight-color:#f2f2e5}}
/*# sourceMappingURL=public/css/main.css.map */