:root{color-scheme:light dark;font-family:Iosevka Web,system-ui,-apple-system,BlinkMacSystemFont,SF Pro Text,sans-serif;line-height:1.5;font-weight:300;--c-white: #fff;--c-black: #292f2f;--c-surface: light-dark(var(--c-white), var(--c-black));--c-surface-on: light-dark(var(--c-black), var(--c-white));--c-surface-on-alt: color-mix(in lab, var(--c-surface-on) 50%, var(--c-surface));--c-surface-inverted: light-dark(var(--c-black), var(--c-white));--c-surface-on-inverted: light-dark(var(--c-white), var(--c-black));--c-border: color-mix(in lab, var(--c-surface-on) 20%, var(--c-surface));--s-square: 2rem;--s-maxBodyHeight: 75vh;--s-maxBodyWidth: 65vmin;--s-line: 1px;--s-line--fat: 2px;--s-menu-max-width: 15rem;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--c-surface-on) var(--c-surface);scrollbar-width:thin;interpolate-size:allow-keywords}@media (max-width: 800px){:root{--s-maxBodyWidth: 95vw;--s-maxBodyHeight: 77vh}}*{margin:0;padding:0;box-sizing:border-box}button,input{font:inherit;color:inherit;background:none;border:none;outline:none}img,svg{display:block}img{width:100%;height:auto}::selection{background:var(--c-surface-on);color:var(--c-surface)}body{margin:0;background:var(--c-surface);color:var(--c-surface-on)}.l-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;overflow-x:clip;max-width:100vw}body.intro-done .l-wrap{overflow:auto}.l-layout{perspective:1000px;perspective-origin:50% 50%;transform-style:preserve-3d;width:100%}.deco-text{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%) translateZ(0) translateY(2rem);pointer-events:none;--r: calc(var(--s-maxBodyWidth) / 2 + 2rem);transform-style:preserve-3d;-webkit-user-select:none;user-select:none}@media (max-width: 800px){.deco-text{top:35%;--r: calc(var(--s-maxBodyWidth) / 2)}}.deco-text__type{transform-style:preserve-3d;animation:spin3d 25s linear infinite;transform:translate(-50%,-50%) translateZ(0)}.intro-done .deco-text__type{display:none}.deco-text__type i{position:absolute;font-style:normal;font-size:max(8rem,15vmin);font-weight:200;backface-visibility:visible;transform-style:preserve-3d;transform:translate3d(-50%,-50%,0) rotateY(calc(var(--i) * 360deg)) translateZ(var(--r));opacity:1;transition:transform .6s cubic-bezier(.77,0,.175,1),opacity .5s linear;transition-delay:25ms,25ms}.has-extracted .deco-text__type i{transform:translate3d(-50%,-50%,0) rotateY(calc(var(--i) * 360deg)) translateZ(calc(var(--r) * 4));opacity:0}@keyframes spin3d{0%{transform:rotateX(20deg) rotate(20deg) rotateY(0)}to{transform:rotateX(20deg) rotate(20deg) rotateY(-360deg)}}.l-main{max-width:var(--s-maxBodyWidth);margin:2rem auto;transform:translateZ(0);background-image:radial-gradient(circle at 50% 50%,transparent 0% 35%,var(--c-surface) 35% 100%);background-repeat:repeat;background-size:3px 3px;transition:transform 1s cubic-bezier(.3,.7,0,1),padding-inline 1s cubic-bezier(.3,.7,0,1)}.l-main{transform:translateZ(0) scale(.85)}.has-extracted .l-main{transform:translateZ(0) scale(1);transition:transform .3s cubic-bezier(.3,.7,0,1)}.l-app__header{margin-bottom:var(--s-line)}.l-body{position:relative;height:var(--s-maxBodyHeight);padding:var(--s-square);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 var(--s-line) var(--c-surface-on);margin-top:calc(var(--s-line--fat) * -1);z-index:1}.l-body .extractor{max-width:100%;max-height:100%}.has-extracted .l-body{background:var(--c-surface)}.canvas-image{opacity:0;max-width:100%;max-height:calc(var(--s-maxBodyHeight) - calc(var(--s-square) * 2));height:auto;width:auto;transform:scale(.7);transition:transform .3s cubic-bezier(.3,.7,0,1) .1s,opacity .2s linear .1s;pointer-events:none;display:block}.has-extracted .canvas-image{opacity:1;transform:scale(1);pointer-events:auto}.extractor{position:relative}.extractor__loupe{position:absolute;width:8rem;height:8rem;border:1px solid var(--c-surface);border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px var(--c-surface-on),0 0 0 2px var(--c-surface);pointer-events:none;z-index:100;display:none;--loupe-inset: .5rem;--colorOld: var(--c-surface);--colorNew: var(--c-surface);background:linear-gradient(to bottom,var(--colorOld) 50%,var(--colorNew) 50%);transform:translate(-50%,-50%)}@media (hover: none) and (pointer: coarse){.extractor__loupe{transform:translate(-50%,-50%) translateY(-6rem)}}.extractor__loupe:before,.extractor__loupe:after{content:"";position:absolute;background:var(--c-white);transform:translate(-50%,-50%);pointer-events:none}.extractor__loupe:before{left:0;right:-100%;height:1px;top:50%}.extractor__loupe:after{z-index:2;left:0;top:50%;right:0;transform-origin:100% 50%;height:1px;background:var(--colorNew);transform:translate(-50%,-50%) rotate(-90deg)}.extractor__loupe canvas{position:absolute;left:var(--loupe-inset);top:var(--loupe-inset);width:calc(100% - (var(--loupe-inset) * 2));height:calc(100% - (var(--loupe-inset) * 2));border-radius:50%;display:block;image-rendering:pixelated}.canvas_copy{position:absolute;inset:var(--loupe-inset);border-radius:50%;overflow:hidden;pointer-events:none;mask:radial-gradient(circle,transparent 40%,#000 90%)}.canvas_copy canvas{filter:blur(10px) brightness(200%);top:0;right:0;bottom:0;left:0}.extractor__marker{position:absolute;top:calc(var(--y) * 100%);left:calc(var(--x) * 100%);width:.75rem;height:.75rem;background:var(--cc);border:var(--s-line--fat) solid var(--c-surface);box-shadow:0 0 0 var(--s-line) var(--c-surface-on);transform:translate(-50%,-50%) rotate(-45deg) scale(1);border-radius:50%;z-index:2;transition:box-shadow .1s linear,transform .1s cubic-bezier(.3,.7,0,1)}.extractor__marker--active{box-shadow:0 0 0 var(--s-line) var(--c-surface-on),0 0 0 calc(var(--s-line) * 2) var(--c-surface);transform:translate(-50%,-50%) rotate(-45deg) scale(1.2)}.l-body:has(.extractor__marker--active){cursor:grab}.extractor__markers:has(.extractor__marker--active) .extractor__marker:not(.extractor__marker--active){transform:translate(-50%,-50%) rotate(-45deg) scale(.7)}.extractor__markers{z-index:2;position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0;transform:scale(.75)}.has-extracted .extractor__markers{opacity:1;transition:opacity .2s linear .2s,transform .3s cubic-bezier(.3,.7,0,1.5) .3s;transform:scale(1)}.mask{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;opacity:0}.has-extracted .mask{transition:opacity .1s linear .5s;opacity:1}.button{display:flex;align-items:center;background:var(--c-surface);border:var(--s-line) solid var(--c-surface-on);padding:.5rem 1rem;font-family:inherit;font-size:.6rem;font-weight:400;cursor:pointer;transition:transform .15s ease,box-shadow .15s linear,background .05s linear,color .05s linear;color:inherit;transform:translateY(0);position:relative}.l-app.controls-open .button--label:has(.checkbox__toggle),.button--count:has(input[type=checkbox]:checked),.button--count:focus-within,.button:not(.button--title):hover,.button.active{z-index:1;transform:translateY(-2px);box-shadow:0 var(--s-line--fat) 0 0 var(--c-surface-on)}.menu--overlay{opacity:0;position:absolute;top:0;left:var(--s-line);z-index:-1;transition:opacity .1s linear .6s,transform .2s cubic-bezier(.3,.7,0,1)}@media (max-width: 800px){.menu--overlay{top:2.43rem}.menu--overlay .button--title{padding-block:.41rem;left:.16rem}.menu--overlay .button--icon{scale:.9;transform-origin:100% 0}}.intro-done .menu--overlay{opacity:1}.show-colors .menu--overlay{transform:translate(-100%)}.button--title{padding-inline:1.5rem;transform:translate(150%);overflow:hidden}.button--title>*{transform:translate(150%);transition:transform .3s cubic-bezier(.3,.7,0,1) .5s}.button--title span{display:block;min-height:1.55em}.button--close{transform:translate(calc(var(--s-square) * 2))}.show-colors .button--close{transform:translate(0)}.intro-done .menu--overlay{opacity:1;transition:opacity .1s linear .5s,transform .2s cubic-bezier(.3,.7,0,1) .4s}.show-colors .button--title{transform:translate(0)}.show-colors .button--title>*{transform:translate(0)}.button.button--icon{padding:.5rem .6rem;width:2rem;transition:width .3s cubic-bezier(.3,.7,0,1),transform .15s cubic-bezier(.3,.7,0,1),box-shadow .15s linear,background .05s linear,color .05s linear;overflow-x:clip}.button.button--icon:before{content:"";display:block;width:1em;height:1em;border:1px dashed currentColor;margin-right:.5rem;flex:0 0 1em}.button.button--icon span{overflow:hidden;white-space:nowrap;opacity:0;transform:translate(2rem);transition:opacity .1s linear,transform .2s cubic-bezier(.3,.7,0,1);transition-delay:0,0}.button.button--icon:hover,.button.button--icon.active{width:max-content;width:calc-size(max-content,size)}.button.button--icon:hover span,.button.button--icon.active span{opacity:1;transform:translate(0);transition:opacity .4s ease,transform .2s cubic-bezier(.3,.7,0,1);transition-delay:.08s,.1s}.button__icon{width:1.5em;height:1.5em;margin-right:.5rem;flex:0 0 1.5em;transform:translate(-10%);pointer-events:none}.button__icon--export{transform:translate(-10%) rotate(180deg)}@keyframes token-beam-spin{0%{transform:translate(-10%) rotate(0)}to{transform:translate(-10%) rotate(360deg)}}#tokenBeamBtn.is-connected .button__icon{animation:token-beam-spin 5s linear infinite;transform-origin:center}.button--end{flex-direction:row-reverse}.button--end .button__icon{margin-right:0;margin-left:.5rem;transform:translate(10%)}.button--end .button__icon--export{transform:translate(10%) rotate(180deg)}.button--end span{transform:translate(-2rem)}.button__group{display:flex;gap:.5rem;flex:0 0 6rem;justify-content:flex-end}.button--icon:has(.button__icon):before{display:none}.button--label{justify-content:space-between;gap:1rem;flex:1 1 auto;max-width:var(--s-menu-max-width);white-space:nowrap}.button--label-reverse{flex-direction:row-reverse;padding-left:.85rem}@media (max-width: 800px){.button--label:not(.button--label-reverse){height:1.8rem}}.menu{overflow:hidden;display:flex;padding-top:var(--s-line--fat);opacity:0;pointer-events:none;align-items:stretch}.has-extracted .menu{opacity:1;pointer-events:auto}.menu__item{--i: 0;transform:translateY(100%);transition:transform .3s cubic-bezier(.3,.7,0,1);transition-delay:calc(.2s + var(--i) * .1s)}.menu__item:nth-child(2){--i: 1}.menu__item:nth-child(3){--i: 2}.menu__item:nth-child(4){--i: 3}.menu__item:nth-child(5){--i: 4}.menu__item+.menu__item{margin-left:calc(-1 * var(--s-line))}.menu-logo{font-size:1rem;font-weight:300;align-self:center;padding-inline-end:3rem}.has-extracted .menu>*{transform:translateY(0);transition-delay:calc(.1s + (4 - var(--i)) * 50ms)}.menu--end{justify-content:flex-end}.menu--end>*{transform:translateY(-100%)}.menu--drawer{position:absolute;bottom:calc(var(--s-line) * -1);right:calc(var(--s-line) * -1)}.menu--export{transform:translate(calc(-1 * var(--s-line)))}.has-extracted .menu--export>*{transform:translateY(100%)}.has-extracted.show-colors .menu--export>*{transform:translateY(0)}.button--count{width:11rem;max-width:var(--s-menu-max-width)}.button--count:has(input[type=checkbox]:checked) .numberslider,.button--count:focus-within .numberslider{width:var(--width-expanded);border:var(--s-line) solid var(--c-surface-on);transform:translate(.25rem)}.button--count:has(input[type=checkbox]:checked) .numberslider:after,.button--count:focus-within .numberslider:after{transform:translate(0) scaleX(var(--relval))}.button--count:has(input[type=checkbox]:checked) .numberslider__button:first-child,.button--count:focus-within .numberslider__button:first-child{transform:translate(0)}.button--count:has(input[type=checkbox]:checked) .numberslider__button:last-child,.button--count:focus-within .numberslider__button:last-child{transform:translate(0)}.button--count:has(input[type=checkbox]:checked) .reset__icon,.button--count:focus-within .reset__icon{transform:scale(.7) translate(.25rem);opacity:1}.reset__icon{width:.8rem;height:.8rem;position:relative;transform:translate(2rem) scale(.5);margin-right:-.2rem;opacity:0;transition:transform .2s cubic-bezier(.3,.7,0,1),opacity .1s linear}.reset__icon:after,.reset__icon:before{content:"";position:absolute;pointer-events:none;left:50%;top:50%;width:.8rem;height:var(--s-line);background:currentColor;transform-origin:50% 50%}.reset__icon:before{transform:translate(-50%,-50%) rotate(45deg)}.reset__icon:after{transform:translate(-50%,-50%) rotate(-45deg)}.checkbox--button{cursor:pointer}.checkbox--button input{display:none}.numberslider{--width-expanded: 5rem;display:flex;align-items:stretch;border:var(--s-line) solid var(--c-surface);background:var(--c-surface);font-size:.6rem;border-radius:1rem;position:relative;overflow:hidden;width:3rem;transition:width .2s ease-in-out,border .1s linear,transform .2s cubic-bezier(.3,.7,0,1);height:.9rem;transform:translate(2.5rem)}.numberslider:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:light-dark(var(--c-surface),var(--c-surface-on));pointer-events:none;transform:translate(-5rem) scaleX(0);transform-origin:0 0;mix-blend-mode:difference;transition:transform .2s ease;z-index:2}.numberslider__button{flex:1 1 auto;padding:0 .5rem;cursor:pointer;font-weight:900;transition:transform .2s ease}.numberslider__button:first-child{transform:translate(-100%);text-align:left}.numberslider__button:last-child{transform:translate(100%);text-align:right}.numberslider__input{z-index:1;position:absolute;width:2.5rem;text-align:center;padding:0 .25rem;border:none;outline:none;-moz-appearance:textfield;transform:translate(-.6rem);transition:transform .2s ease;left:50%;top:50%;transform:translate(-50%) translateY(-50%)}.numberslider__input::-webkit-inner-spin-button,.numberslider__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.checkbox{display:flex;align-items:center}.checkbox--toggle input[type=checkbox]{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}.checkbox__toggle{width:2.5rem;height:.75rem;border:var(--s-line) solid var(--c-surface-on);background:var(--c-surface);border-radius:999px;position:relative;flex:0 0 auto;transition:background .1s linear .15s,border-color .1s linear .15s}.checkbox__toggle:after{content:"";position:absolute;top:1px;left:1px;width:1rem;height:calc(.75rem - 6px);border-radius:2rem;background:var(--c-surface-on);border:var(--s-line) solid var(--c-surface-on);transition:transform .15s cubic-bezier(.3,.7,0,1) 0s,border-color .15s linear 0s,background .15s linear 0s}input[type=checkbox]:checked+.checkbox__toggle{background:currentColor;border-color:currentColor}input[type=checkbox]:checked+.checkbox__toggle:after{transform:translate(1rem);border-color:var(--c-surface);background:var(--c-surface);width:1.1rem}input[type=checkbox]:focus+.checkbox__toggle{outline:var(--s-line) solid var(--c-surface-on);outline-offset:var(--s-line)}.l-app__drawers{position:absolute;left:0;right:0;z-index:10;pointer-events:none}.l-app__drawers--top{top:2.1rem}.l-app__drawers--bottom{bottom:var(--s-line)}.l-app__drawers--bottom .drawer{border-bottom:0}.l-app__drawer{overflow:hidden}.drawer{display:flex;flex-wrap:wrap;border:var(--s-line) solid var(--c-surface-on);overflow:clip;opacity:0;transition:opacity .2s ease,transform .5s cubic-bezier(.3,.7,0,1);transition-delay:.2s,.2s;background:var(--c-surface)}.l-app__drawers--bottom .drawer{transform:translateY(110%)}.l-app__drawers--top .drawer{transform:translateY(-110%);transform-origin:50% 0%}.l-app.stats-open .l-app__drawers--bottom .drawer,.l-app.controls-open .l-app__drawers--top .drawer{opacity:1;pointer-events:auto;transform:translateY(0);transition:opacity .2s linear,transform .3s cubic-bezier(.3,.7,0,1);transition-delay:20ms,20ms}.l-body{transition:transform .5s cubic-bezier(.3,.7,0,1) 0s}.l-app.controls-open .l-body{transform:translateY(calc(var(--s-square) - var(--s-line)));transition-delay:.2s}body:has(.l-app.controls-open) .stats-button{bottom:calc(var(--s-square) * -1 + var(--s-line))}.l-app__drawers--bottom{transition:bottom .5s cubic-bezier(.3,.7,0,1) .2s}.l-app.controls-open .l-app__drawers--bottom{bottom:calc(var(--s-square) * -1 + var(--s-line--fat))}.drawer__section{flex:1 1 100%;box-shadow:0 0 0 calc(var(--s-line) / 2) var(--c-border);position:relative}.drawer__section:has(svg){padding:1.5rem}.drawer__section svg circle,.drawer__section svg rect{transform-box:fill-box;transform-origin:50% 50%;transform:scale(.5);opacity:0;transition:opacity .1s linear,transform .3s cubic-bezier(.3,.7,0,1)}.l-app.stats-open .drawer__section svg circle,.l-app.stats-open .drawer__section svg rect{--delay: calc(.25s + (var(--i, 0) * 75ms));opacity:1;transform:scale(1);transition-delay:var(--delay),var(--delay)}.stats__row{--i: 0;opacity:0;transform:translateY(1rem);transition:opacity .3s ease,transform .3s cubic-bezier(.3,.7,0,1);transition-delay:calc((5 - var(--i)) * 40ms)}.stats__row:nth-child(2){--i: 1}.stats__row:nth-child(3){--i: 2}.stats__row:nth-child(4){--i: 3}.stats__row:nth-child(5){--i: 4}.stats__row:nth-child(6){--i: 5}.l-app.stats-open .stats__row{opacity:1;transform:translateY(0);transition-delay:calc(.15s + var(--i) * 50ms)}.drawer__section--half{flex:1 1 50%;display:flex;flex-direction:column}.drawer__hint{margin-top:auto;opacity:1;font-size:.6em;text-align:right;padding:.75rem 1.5rem}.link{background:none;border:none;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:.2em}.link:hover{text-decoration:none}.field{position:relative;display:flex;align-items:center;justify-content:space-between;padding:.75em 1em;flex-wrap:wrap}.field__header{flex:0 0 100%;display:flex;align-items:center;justify-content:space-between;font-size:.6rem;position:relative}.field__header-center{text-align:center;font-weight:700;position:absolute;left:50%;transform:translate(-50%)}.field__header-center i{font-style:normal}.range{position:relative;flex:1;display:grid;align-items:center;margin:0;height:1.6rem;width:100%;flex:0 0 100%}.range input[type=range]{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer;margin:0;z-index:3;-webkit-appearance:none;-moz-appearance:none;appearance:none}.range:before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;pointer-events:none;opacity:1}.range-highlight{position:absolute;left:calc(min(var(--progress, .5),var(--center, .5))*100%);right:calc((1 - max(var(--progress, .5),var(--center, .5)))*100%);bottom:1px;height:2px;background:var(--c-border);pointer-events:none;z-index:0;transition:height .2s cubic-bezier(.3,.7,0,1),bottom .2s cubic-bezier(.3,.7,0,1),opacity .1s linear}.range:hover .range-highlight{opacity:.4;height:5px;bottom:2px}.range:after{content:"";position:absolute;left:0;right:0;bottom:1px;height:8px;--count: var(--graduations, 5);background-image:linear-gradient(to right,var(--c-surface-on) var(--s-line),transparent var(--s-line)),linear-gradient(to right,var(--c-border) var(--s-line),transparent var(--s-line));background-size:calc((100% - var(--s-line)) / (var(--count) - 1)) 100%,calc((100% - var(--s-line)) / ((var(--count) - 1) * 4)) 50%;background-position:0 100%,0 100%;background-repeat:repeat-x;pointer-events:none;opacity:1}.range-marker{position:absolute;left:calc(var(--progress, .5) * 100%);bottom:12px;width:.5rem;height:.5rem;background:var(--c-surface);border:var(--s-line) solid var(--c-surface-on);border-radius:50%;transform:translate(-50%);pointer-events:none;z-index:2;box-shadow:0 0 0 var(--s-line--fat) var(--c-bg)}.range-marker:after{content:"";position:absolute;left:50%;top:100%;width:1px;height:11px;background:currentColor;transform:translate(-50%);pointer-events:none}.stats{margin-top:1.5rem;font-size:.75rem;display:grid;gap:1rem .5rem;grid-template-columns:3fr 3fr 1fr;line-height:1.2}.stats__row{display:grid;grid-template-columns:subgrid;grid-column:1 / -1;padding:0 1.5rem}.stats__bar{height:var(--s-line);background:var(--c-border);align-self:center;position:relative}.stats__bar-fill{height:100%;background:var(--c-surface-on);position:absolute;width:calc(var(--w, 0) * 100%)}.stats__bar-fill:after{content:"";position:absolute;bottom:0;right:0;width:var(--s-line);background:var(--c-surface-on);height:4px}.stats__bar-fill--negative:after{right:auto;left:0}.stats__value{text-align:right;font-variant-numeric:tabular-nums;font-size:.75em;font-weight:600;align-self:center}.menu__item:has(.colorSamples){flex:1 0 auto}.colorSamples{display:flex;flex:1 0 auto;justify-content:flex-end;display:none}.colorSamples:hover .color-sample{transform:scaleY(.8)}.color-sample{flex:0 1 2rem;overflow:hidden;cursor:pointer;transition:.3s transform cubic-bezier(.3,.7,0,1);transition-delay:calc(var(--i) * 50ms);transform-origin:50% 0}.color-sample__swatch{width:min(2rem,100%);height:2rem;flex:0 0 auto;background:var(--cc)}.color-sample__info,.loading{display:none}.distribution-bar{display:flex;height:1.5rem;margin:.75rem}.distribution-bar__segment{flex:0 0 var(--w);background-color:var(--cc)}.palette{display:flex;flex-direction:column;background:var(--bg-color);border-bottom:var(--s-line) solid var(--c-surface-on)}.palette__row{display:flex;background:var(--c-surface);padding:0;transition:transform .15s ease,box-shadow .15s linear;position:relative;min-height:calc(var(--s-square) * 2);border-bottom:var(--s-line) solid var(--c-border);cursor:pointer;transition:min-height .3s cubic-bezier(.3,.7,0,1);transition-delay:calc(var(--i) * .1s);transform:translate(calc(var(--s-square) * 2));animation:slideToLeft 1.5s cubic-bezier(.3,.7,0,1) forwards;animation-delay:calc(var(--i) * .3s);animation-fill-mode:forwards;animation-play-state:paused}.intro-done .palette__row{animation-play-state:running}.intro-anim-done .palette__row{animation:none;transform:translate(0)}@keyframes slideToLeft{0%{transform:translate(calc(var(--s-square) * 2))}to{transform:translate(0)}}.show-colors .palette__row{min-height:calc(var(--s-square) * 2.5)}.palette__row:last-child{border-bottom:none}.palette__row:hover,.palette__row.highlight{z-index:10;transform:translateY(-2px);box-shadow:0 2px 0 0 currentColor,0 -1px 0 0 currentColor}.palette__row:active{transform:translateY(0);box-shadow:none}.palette__swatch{width:calc(var(--s-square) * 2.5);flex-shrink:0;border-right:var(--s-line) solid var(--c-border);transform-origin:0 50%;transform:scaleX(.5)}.show-colors .palette__swatch{transform:scaleX(1);transition:transform .4s cubic-bezier(.3,.7,0,1);transition-delay:calc(.15s + (1 - var(--i)) * .14s)}.palette__row-info{flex:1;padding:0 var(--s-square);display:flex;flex-direction:column;justify-content:center;position:relative;transform:translate(4rem);transition:transform .3s cubic-bezier(.3,.7,0,1),opacity .2s linear;opacity:0}.show-colors .palette__row-info{transform:translate(0);transition-delay:calc(.15s + (1 - var(--i)) * .14s);opacity:1}.palette__row-info-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;transform:translateY(0);transition:transform .2s}.palette__row-info-deco{flex:1 1 auto;min-width:0;position:relative;height:1px;background:var(--c-border);opacity:.4}.palette__row-name{font-weight:400;font-size:1rem;margin-bottom:0;letter-spacing:-.02em}.palette__row-hex{font-size:.75rem;font-weight:300;font-family:inherit;opacity:0;transform:translate(4rem)}.show-colors .palette__row-hex{opacity:1;transform:translate(0);transition:transform .3s cubic-bezier(.3,.7,0,1);transition-delay:calc(.15s + (1 - var(--i)) * .14s + .1s)}.palette__meta{display:flex;align-items:center;gap:1rem;font-size:.6rem;font-weight:300;font-family:inherit;justify-content:space-between;position:absolute;top:50%;left:var(--s-square);right:var(--s-square);opacity:0;transform:translateY(-50%);transition:opacity .2s,transform .2s}.palette__row:hover .palette__meta{opacity:.7;transform:translateY(1ex);transition-delay:.15s,.1s}.palette__row:hover .palette__row-info-header{transform:translateY(-35%)}.copy-feedback{position:absolute;left:2.5rem;top:50%;transform:translateY(-120%);font-size:.6rem;font-weight:400;line-height:1;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;background:var(--c-surface);color:currentColor;padding:.25rem .5rem .27rem;border:var(--s-line) solid var(--c-surface-on);box-shadow:0 0 0 var(--s-line) var(--c-surface);transform:translate(-50%) translateY(-120%)}.copy-feedback.show{opacity:1;transform:translate(-50%) translateY(-50%)}.l-overlay{position:absolute;z-index:-1;top:calc(2.2rem - var(--s-line--fat));bottom:calc(var(--s-square) - var(--s-line));left:calc(var(--s-square) * -1 + var(--s-line));width:min(70%,40vw);border:var(--s-line) solid var(--c-surface-on);transform:translateY(0);transition:opacity .1s linear,transform .2s cubic-bezier(.3,.7,0,1);opacity:0;pointer-events:none}.intro-done .l-overlay{opacity:1;pointer-events:auto}@media (max-width: 800px){.l-overlay{top:calc(4.5rem - var(--s-line--fat) * 1.5)}}.l-overlay__body{position:absolute;top:0;right:0;bottom:0;left:0;overflow-y:auto;overflow-x:clip;padding-bottom:calc(var(--s-square) - var(--s-line--fat))}.l-overlay__footer{position:absolute;bottom:-1px;left:0;right:-1px;z-index:20}.show-colors .l-overlay{transform:translate(calc(-100% + 2rem + var(--s-line)))}.show-colors .l-main{transform:translate(calc(30% + 2rem + var(--s-line)));transition-delay:.05s}.palette-buttons{display:none}.palette-title{font-size:.75rem;font-weight:200;text-transform:uppercase;flex:1 1 auto}.palette-title span{text-transform:none;font-weight:400}.cta-intro{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;top:3rem;right:3rem;bottom:3rem;left:3rem;padding:2rem;border:var(--s-line) dashed var(--c-surface-on);text-align:center;font-size:max(1rem,2vmin)}.cta-intro input{display:none}@media (max-width: 800px){.cta-intro{top:1.5rem;right:1.5rem;bottom:1.5rem;left:1.5rem;padding:1rem;font-size:max(1rem,3vmin)}}.upload-text{padding:.75em 1.5em;font-size:.75em;font-weight:400;text-align:center;width:100%;background:var(--c-surface-inverted);color:var(--c-surface-on-inverted);box-shadow:0 0 0 var(--s-line) var(--c-surface-on);width:max-content;max-width:100%;margin:2em auto 0}.upload-area:hover+.upload-text{background:var(--c-surface-on-inverted);color:var(--c-surface-inverted)}.upload-area__intro{padding:0 2rem;max-width:45ch;margin:10em auto 0;line-height:1.4}.upload-area__after{font-size:.75em;margin-top:2rem;margin-bottom:13vmin}.upload-area{position:absolute;top:0;right:0;bottom:0;left:0;color:transparent}.has-extracted .cta-intro{pointer-events:none;opacity:0}.has-extracted .example-images{display:none}.example-images{position:absolute;top:-3rem;right:-3rem;bottom:-3rem;left:-3rem;pointer-events:none;overflow:hidden}.example-images img{display:block}@media (max-width: 800px){.example-images{top:-1.5rem;right:-1.5rem;bottom:-1.5rem;left:-1.5rem}}.example-images__list{display:flex;gap:1rem;justify-content:center;list-style-type:none;align-items:center;position:relative;height:20%;position:absolute;width:100%;left:0;right:0;top:85%}.example-images__list li{position:absolute;left:-100%;top:50%;animation:slideright 60s linear infinite;animation-delay:calc(var(--i) * -60s)}.example-images__list:has(.example-image-btn:hover) li{animation-play-state:paused}@keyframes slideright{0%{transform:translateY(-50%) translate(0)}to{transform:translateY(-50%) translate(calc(var(--s-maxBodyWidth) * 3.8))}}.example-image-btn{display:block;width:calc(var(--s-maxBodyWidth) * .25);pointer-events:auto;cursor:pointer;transform:translateY(10rem) scale(.7)}.example-image-btn:after{content:"Extract Colors";position:absolute;bottom:50%;left:50%;width:max-content;border:var(--s-line) solid var(--c-surface-on);pointer-events:none;background:var(--c-surface);padding:.25rem 1rem;font-size:.6rem;transform:translate(-50%) translateY(200%) scale(.4);opacity:0;transition:opacity .1s linear,transform .2s cubic-bezier(.3,.7,0,1);transition-delay:.15s,.1s}.example-image-btn:has(.loaded){transform:translateY(0);transition:transform .5s cubic-bezier(.3,.7,0,1);transition-delay:calc((1 - var(--i)) * .5s)}.example-image-btn:hover:after{opacity:1;transform:translate(-50%) translateY(60%)}.example-images__list li:has(.example-image-btn:hover){z-index:10}.example-images__list:has(.example-image-btn:hover) .example-image-btn:not(:hover) img{transform:translateY(30%) rotate(calc(var(--rnd) * 10deg)) scale(.95)}.example-image-btn img{transform:rotate(calc(var(--rnd) * 10deg));transition:transform .3s cubic-bezier(.3,.7,0,1),box-shadow .15s linear;box-shadow:0 0 0 var(--s-line) var(--c-surface-on),0 0 0 0 var(--c-surface)}.example-image-btn:hover img{transform:scale(1.5) rotate(0) translateY(-50%);box-shadow:0 0 0 var(--s-line) var(--c-surface-on),0 0 0 var(--s-line--fat) var(--c-surface)}.l-footer{max-width:var(--s-maxBodyWidth);margin:0 auto 2rem;display:flex;font-size:.75rem;align-items:center;justify-content:space-between;gap:1rem}.l-footer{transform:translateZ(0) scale(.85);transform-origin:50% 0}.has-extracted .l-footer{transform:translateZ(0) scale(1) translateY(calc(var(--s-square) / 2));transition:transform .3s cubic-bezier(.3,.7,0,1) .3s}body:has(.stats-open) .l-footer{transform:translateZ(0) scale(1) translateY(calc(var(--s-square)));transition:transform .2s cubic-bezier(.3,.7,0,1) 50ms}body:has(.stats-open.controls-open) .l-footer{transform:translateZ(0) scale(1) translateY(calc(var(--s-square) * 1.5));transition:transform .2s cubic-bezier(.3,.7,0,1) 50ms}@media (max-width: 800px){.l-footer{transform:translateY(-4rem) scale(.85)}.has-extracted .l-footer{transform:translateY(0) scale(.85);transition:transform .3s cubic-bezier(.3,.7,0,1) 30ms}}.ellogo{display:block;width:3.5rem}.ellogo svg{display:block;width:100%;height:auto}.about{max-width:45ch;text-align:right;line-height:1.3;text-wrap:balance}@media (max-width: 800px){.l-wrap{align-items:flex-start}.has-extracted .l-main{margin-top:0;margin-left:calc(var(--s-square) + var(--s-line--fat))}.l-overlay{width:100%}.show-colors .l-main{transform:translate(calc(70% + var(--s-square) * 3 + var(--s-line)))}.l-app__header{--upload-size: 4.25rem}.l-app__header .menu{flex-wrap:wrap;position:relative}.l-app__header .menu .menu__item{width:100%;margin-left:0}.l-app__header .menu .menu__item:has(.button--count){transform:translateY(170%)}.has-extracted .l-app__header .menu .menu__item:has(.button--count){transform:translateY(0)}.button--count,.button--label{max-width:none;width:calc(100% - var(--upload-size) + var(--s-line))}.button--label:has(.checkbox--toggle){margin-top:calc(var(--s-line) * -1)}.l-app__drawers--top{top:calc(4.5rem - var(--s-line--fat))}.button--count{height:2.5rem}.numberslider{--width-expanded: 7rem;height:1.2rem}.l-app__header .menu .menu__item:has(.button--upload){position:absolute;right:0;top:var(--s-line--fat);width:var(--upload-size);height:var(--upload-size)}.l-app__header .menu .menu__item .button.button--icon{aspect-ratio:1;width:100%}.l-app__header .menu .menu__item .button.button--icon span{display:none}.l-app__header .menu .menu__item .button.button--icon .button__icon{margin:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:35%;height:35%}.upload-area__after{margin-bottom:7rem}}.upload-text__phone{display:none}@media (hover: none) and (pointer: coarse){.upload-text__full{display:none}.upload-text__phone{display:inline}}.stats-button{position:absolute;left:0;bottom:0;transform:translateY(0);transition:transform .2s cubic-bezier(.3,.7,0,1) .3s,bottom .2s cubic-bezier(.3,.7,0,1) .4s;opacity:0;z-index:2;overflow:hidden;padding-top:var(--s-line--fat)}.stats-button>*{position:0;right:var(--s-square)}.intro-done .stats-button{opacity:1}.intro-done .stats-button>*{right:0;transition:right .2s cubic-bezier(.3,.7,0,1) .25s,width .3s cubic-bezier(.3,.7,0,1),transform .15s cubic-bezier(.3,.7,0,1),box-shadow .15s linear,background .05s linear,color .05s linear}body:has(.l-app.stats-open) .stats-button{transform:translateY(calc(100% - var(--s-line--fat)));transition-delay:0s}.export-button{position:absolute;left:var(--s-line);bottom:0;transform:translate(0);opacity:0}.intro-done .export-button{transform:translate(-100%);transition:transform .2s cubic-bezier(.3,.7,0,1) .2s,opacity .2s linear .15s;opacity:1}#debugModal{border:none;padding:0;margin:0;background:transparent;width:100vw;height:100vh;max-width:100vw;max-height:100vh}#debugModal::backdrop{background-color:transparent;background-image:radial-gradient(circle at 50% 50%,var(--c-surface-on) 0 35%,transparent 35% 100%);background-repeat:repeat;background-size:3px 3px}.debug-modal-content{position:absolute;inset:var(--s-square);background:var(--c-surface);border:var(--s-line) solid var(--c-surface-on);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 0 0 var(--s-line--fat) var(--c-surface)}.debug-controls-bar{display:flex;justify-content:space-between;align-items:center;border-bottom:var(--s-line) solid var(--c-surface-on);min-height:var(--s-square)}.debug-close-btn{background:var(--c-surface);border:none;border-left:var(--s-line) solid var(--c-surface-on);color:var(--c-surface-on);cursor:pointer;padding:0;width:var(--s-square);height:var(--s-square);display:flex;align-items:center;justify-content:center;font-size:1.5rem;line-height:1;transition:background .05s linear,color .05s linear,box-shadow .15s linear}.debug-close-btn:hover{background:var(--c-surface-on);color:var(--c-surface);box-shadow:0 var(--s-line--fat) 0 0 var(--c-surface-on)}.debug-controls{display:flex;flex-wrap:wrap;gap:0;flex:1}.debug-controls label{display:flex;align-items:center;gap:.3rem;padding:0 .75rem;border-right:var(--s-line) solid var(--c-surface-on);color:var(--c-surface-on);font-size:.75rem;white-space:nowrap;height:var(--s-square)}.debug-controls input[type=checkbox]{width:1em;height:1em;accent-color:var(--c-surface-on)}.debug-controls input[type=range]{width:80px;accent-color:var(--c-surface-on)}#debugCanvas{display:block;flex:1;width:100%;height:100%;min-height:0}.debug-info{padding:.5rem .75rem;border-top:var(--s-line) solid var(--c-surface-on);color:var(--c-surface-on-alt);font-size:.75rem;line-height:1.4}