*{-webkit-box-sizing:border-box;box-sizing:border-box}body{min-height:100vh;font-family:Work Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol;color:#e2e2ee;font-size:1rem;line-height:1.6;background:#000;position:relative;margin:0;padding:0}img{width:100%;height:auto}.wrapper{width:90%;max-width:1280px;margin:0 auto;padding:7rem 0 3rem;text-align:center;z-index:5;position:relative;top:0}#header-image{width:100%;height:30rem;position:absolute;top:0;left:0;right:0;background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,1))) top center,url(https://source.unsplash.com/random/1200x600) center no-repeat;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,1)) top center,url(https://source.unsplash.com/random/1200x600) center no-repeat;background-size:cover,cover;pointer-events:none}.button{padding:10px 15px;background:#dbdbe7;color:#000;border-radius:10px;font-size:.8rem;border:0;outline:none;font-size:1rem;font-weight:700;font-family:inherit}.button:hover,.button:focus{background:#a1a1ac}.button:active{-webkit-box-shadow:inset 0 3px 0 #4c4c53;box-shadow:inset 0 3px #4c4c53}h1{margin-bottom:.25rem}h1 a{font-size:3.5rem;letter-spacing:.1rem;color:#e2e2ee;line-height:1;display:inline;font-weight:800}.headline{margin-bottom:7rem;text-shadow:0px 0px 2rem rgba(0,0,0,.5)}.subheadline{color:#fff9;letter-spacing:.1rem;text-shadow:0px 0px 1rem rgba(0,0,0,.5)}#drop{background:#111;border:3px dotted #4c4c53;border-radius:.5rem;padding:1.5rem 0;position:relative}.drop-text{font-size:2rem;margin-bottom:2rem}#drop.highlight{background:#4c4c53}#image-upload{padding:1.5rem}#drop.loading{border:none}.loading:after{content:"Processing Image.";font-size:2.5rem;padding:1rem;font-weight:700;position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(17,17,17,.9);z-index:5;border-radius:.5rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}a{display:inline-block;color:#a1a1ac;text-decoration:none}.result-container{background:#111;padding:2rem;border-radius:.5rem}#result{display:grid;grid-template-columns:2fr 3fr 3fr;grid-gap:3rem;text-align:left;position:relative}#result .dl-section{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.settings{grid-column:2/-1;-webkit-columns:2;-moz-columns:2;columns:2;-webkit-column-gap:3rem;-moz-column-gap:3rem;column-gap:3rem}.settings h3{-webkit-column-span:all;-moz-column-span:all;column-span:all}.block{margin-bottom:.72rem;padding-bottom:.72rem;border-bottom:2px dotted #2c2c2e;page-break-inside:avoid;-webkit-column-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid}.row{display:-webkit-box;display:-ms-flexbox;display:flex;gap:2rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.cell{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.value{font-family:Courier New,Courier,Monaco,monospace}h2{margin:0 2rem 0 0;line-height:1;font-size:2rem;text-align:left;-ms-flex-item-align:center;align-self:center}.retry{-ms-flex-item-align:center;align-self:center;text-align:right}.hsl-values{display:grid;grid-template-columns:2fr repeat(3,1fr)}svg{max-width:100%;height:inherit}.hidden{display:none}.disclaimer{padding:2rem 1rem 0;text-align:left;max-width:72ch;margin:0 auto;color:#4c4c53}.disclaimer h2{text-align:center;margin:.5rem auto 2rem}.label{color:#4c4c53;font-size:.8rem;display:block}footer{margin-top:5rem;color:#4c4c53}.slider-value{font-size:80%;-ms-flex-item-align:center;align-self:center;width:2.4rem;text-align:right;margin-right:.5rem}.slider-cell div{-webkit-box-flex:0;-ms-flex:0 1 60%;flex:0 1 60%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}input{background:transparent}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;margin:6px 0;outline:none}.slider::-moz-range-track{background:#4c4c53;border:none;border-radius:50px;-moz-appearance:none;appearance:none;height:4px}.slider::-ms-track{background:#4c4c53;border:none;border-radius:50px;appearance:none;height:4px}.slider::-webkit-slider-runnable-track{background:#4c4c53;border:none;border-radius:50px;-webkit-appearance:none;appearance:none;height:4px}.slider::-moz-range-thumb{-moz-appearance:none;appearance:none;border:none;width:5px;margin-top:-3px;border-radius:50px;background:#e2e2ee;height:10px}.slider::-ms-thumb{appearance:none;border:none;width:5px;margin-top:-3px;border-radius:50px;background:#e2e2ee;height:10px}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;border:none;width:5px;margin-top:-3px;border-radius:50px;background:#e2e2ee;height:10px}.slider-bw::-moz-range-track{background:linear-gradient(90deg,#333339,#e2e2ee)}.slider-bw::-ms-track{background:linear-gradient(90deg,#333339,#e2e2ee)}.slider-bw::-webkit-slider-runnable-track{background:-webkit-gradient(linear,left top,right top,from(#333339),to(#e2e2ee));background:linear-gradient(90deg,#333339,#e2e2ee)}.slider-blackblue::-moz-range-track{background:linear-gradient(90deg,#333339,blue)}.slider-blackblue::-ms-track{background:linear-gradient(90deg,#333339,blue)}.slider-blackblue::-webkit-slider-runnable-track{background:-webkit-gradient(linear,left top,right top,from(#333339),to(blue));background:linear-gradient(90deg,#333339,blue)}.slider-blackgreen::-moz-range-track{background:linear-gradient(90deg,#333339,green)}.slider-blackgreen::-ms-track{background:linear-gradient(90deg,#333339,green)}.slider-blackgreen::-webkit-slider-runnable-track{background:-webkit-gradient(linear,left top,right top,from(#333339),to(green));background:linear-gradient(90deg,#333339,green)}.slider-blackred::-moz-range-track{background:linear-gradient(90deg,#333339,red)}.slider-blackred::-ms-track{background:linear-gradient(90deg,#333339,red)}.slider-blackred::-webkit-slider-runnable-track{background:-webkit-gradient(linear,left top,right top,from(#333339),to(red));background:linear-gradient(90deg,#333339,red)}.slider-aquapurple::-moz-range-track{background:linear-gradient(90deg,aqua,purple)}.slider-aquapurple::-ms-track{background:linear-gradient(90deg,aqua,purple)}.slider-aquapurple::-webkit-slider-runnable-track{background:-webkit-gradient(linear,left top,right top,from(aqua),to(purple));background:linear-gradient(90deg,aqua,purple)}.slider-magentaorange::-moz-range-track{background:linear-gradient(90deg,magenta,orange)}.slider-magentaorange::-ms-track{background:linear-gradient(90deg,magenta,orange)}.slider-magentaorange::-webkit-slider-runnable-track{background:-webkit-gradient(linear,left top,right top,from(magenta),to(orange));background:linear-gradient(90deg,magenta,orange)}.slider-temperature::-moz-range-track{background:linear-gradient(90deg,lightblue,goldenrod)}.slider-temperature::-ms-track{background:linear-gradient(90deg,lightblue,goldenrod)}.slider-temperature::-webkit-slider-runnable-track{background:-webkit-gradient(linear,left top,right top,from(lightblue),to(goldenrod));background:linear-gradient(90deg,lightblue,goldenrod)}.slider-tint::-moz-range-track{background:linear-gradient(90deg,lime,magenta)}.slider-tint::-ms-track{background:linear-gradient(90deg,lime,magenta)}.slider-tint::-webkit-slider-runnable-track{background:-webkit-gradient(linear,left top,right top,from(lime),to(magenta));background:linear-gradient(90deg,lime,magenta)}.slider-whiteblack::-moz-range-track{background:linear-gradient(90deg,white,black)}.slider-whiteblack::-ms-track{background:linear-gradient(90deg,white,black)}.slider-whiteblack::-webkit-slider-runnable-track{background:-webkit-gradient(linear,left top,right top,from(white),to(black));background:linear-gradient(90deg,white,black)}.slider-yellowaqua::-moz-range-track{background:linear-gradient(90deg,yellow,aqua)}.slider-yellowaqua::-ms-track{background:linear-gradient(90deg,yellow,aqua)}.slider-yellowaqua::-webkit-slider-runnable-track{background:-webkit-gradient(linear,left top,right top,from(yellow),to(aqua));background:linear-gradient(90deg,yellow,aqua)}.slider-rainbow::-moz-range-track{background:linear-gradient(to right,red,orange,yellow,lime,aqua,blue,purple,magenta)}.slider-rainbow::-ms-track{background:linear-gradient(to right,red,orange,yellow,lime,aqua,blue,purple,magenta)}.slider-rainbow::-webkit-slider-runnable-track{background:-webkit-gradient(linear,left top,right top,from(red),color-stop(orange),color-stop(yellow),color-stop(lime),color-stop(aqua),color-stop(blue),color-stop(purple),to(magenta));background:linear-gradient(to right,red,orange,yellow,lime,aqua,blue,purple,magenta)}.curves{border:2px solid #4c4c53}.color-grading-cell{width:100%;max-width:48%;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;gap:1rem}.color-grading-circle{width:calc(100% - 2rem);margin:0 1rem;position:relative;aspect-ratio:1;border-radius:50%;background:radial-gradient(white 5%,transparent 80%),conic-gradient(yellow,orange,red,magenta,purple,blue,aqua,lime,yellow)}.color-grading-circle .value-circle{width:1rem;aspect-ratio:1;border:2px solid #888;border-radius:50%;position:absolute;left:calc(sin(var(--hue)) * 50% * (var(--sat) / 100) + 50%);top:calc((1 - cos(var(--hue))* (var(--sat) / 100)) * 50%);-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.color-grading-circle .color-circle{width:.75rem;aspect-ratio:1;background:hsl(calc(var(--hue)) calc(var(--sat) * 100%) 50%);border-radius:50%;position:absolute;left:calc(sin(var(--hue))*(50% + .75rem) + 50%);top:calc((1 - cos(var(--hue)))*(50% + .75rem) - .75rem);-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}@media screen and (max-width: 960px){.retry{position:absolute;top:0;right:0}#result{grid-template-columns:1fr}.settings{-webkit-columns:1;-moz-columns:1;columns:1;grid-column:1}}