: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;--white: #fff;--black: #292f2f;--bg-color: light-dark(var(--white), var(--black));--text-color: light-dark(var(--black), var(--white));--border-color: color-mix(in lab, currentColor 20%, var(--bg-color));--secondary-text: color-mix(in lab, currentColor 50%, var(--bg-color));background-color:var(--bg-color);color:var(--text-color);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scrollbar-color:var(--text-color) var(--bg-color);scrollbar-width:thin}::selection{background:var(--text-color);color:var(--bg-color)}*{box-sizing:border-box;margin:0;padding:0}input{font:inherit;font-size:.8rem}body{font-family:inherit;background:var(--bg-color);color:var(--text-color);--logo-text: light-dark(var(--logo-dark-color, #000), var(--logo-light-color, #fff));min-height:100vh;padding:0;line-height:1.5;font-size:1.2rem}.banner{margin-bottom:1rem;margin-top:6vmin;padding:0 5vmin;max-width:90rem;margin-left:auto;margin-right:auto;transition:margin-bottom .3s ease}.title__logo{width:5rem;height:5rem;margin-right:1.5rem;margin-left:-.5rem;position:relative;transform:rotate(-45deg);display:none}.title__logo svg{width:100%;height:100%;display:block}.title__text{display:flex;gap:.6rem;flex-wrap:wrap;align-items:baseline;justify-content:space-between}.title__text h1{font-size:14.3vw;font-weight:200;line-height:1;margin:0;margin-left:-.07ex;letter-spacing:-.12em;flex:0 0 auto;transition:font-size .2s cubic-bezier(.3,.7,0,1)}.has-extracted .title__text h1{font-size:2.6rem}.has-extracted .banner{margin-bottom:2rem}.title__text span{font-size:.7rem;font-weight:300;color:var(--secondary-text)}.rl{display:flex;gap:2rem;padding:0 5vmin;max-width:90rem;margin:0 auto;padding-bottom:4rem}.rl__left{flex:0 0 100%;width:100%;position:relative;z-index:2;display:flex;flex-direction:column;transition:flex-basis .3s cubic-bezier(.3,.7,0,1),width .3s cubic-bezier(.3,.7,0,1)}.has-extracted .rl__left{flex:0 0 40%;width:40%}.rl__right{flex:1 1 auto;display:flex;flex-direction:column;gap:2rem}.rl__right .palette-container{display:none}.has-extracted .rl__right .palette-container{display:block}@media (max-width: 900px){.rl{display:block;padding:0}.rl__left,.has-extracted .rl__left{width:calc(100% - 1.8rem)}.rl__left{gap:0}.rl__right{display:none;position:fixed;top:0;right:0;bottom:0;left:0;right:4rem;margin-top:0;background:var(--bg-color);padding:1rem 1.5rem 2rem;box-sizing:border-box;z-index:100;overflow-y:auto;overflow-x:hidden;transform:translate(calc(100% + 2rem + 1px));border-left:2px solid currentColor;transition:padding-left .2s cubic-bezier(.3,.7,0,1) .1s,transform .3s cubic-bezier(.3,.7,0,1);scroll-behavior:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.rl__right:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0}.expand--rl .rl__right{transform:translate(4rem);padding-left:1.5rem}.expand--rl .rl__right:after{content:none}.has-extracted .rl__right{display:block}.palette-container{transform:translate(calc(-2rem - 2px)) translateY(-4.6rem);transition:transform .4s cubic-bezier(.3,.7,0,1) .05s}.expand--rl .palette-container{transform:translate(0)}.palette-header{transform:translate(5rem);transition:transform .3s cubic-bezier(.3,.7,0,1) .12s}.expand--rl .palette-header{transform:translate(0)}.has-extracted .banner{display:none}}.upload-area{z-index:-1;margin-top:-2px;cursor:pointer;padding:1rem;border:2px dashed var(--border-color);border-radius:0;transition:all .2s;background:var(--bg-color);display:flex;align-items:center;padding:1.27em 1.5em;gap:1rem;font-weight:700;color:var(--text-color);position:relative}.upload-area:hover,.upload-area.dragover,.upload-area.droppable{border-color:currentColor;border-style:solid}.upload-area input{display:none}.upload-text{font-weight:700;font-size:.75rem}.upload-icon{font-size:1.5rem;opacity:.5}.upload-icon svg{width:.75em;height:.75em;display:block}.image-container{position:relative;background:var(--bg-color);box-shadow:0 0 0 1px currentColor}.image-container img{display:none}.image-container>canvas#canvas{width:100%;height:auto;display:block;touch-action:none}.image-container>#selectionOverlay{position:absolute;left:0;top:0;width:100%;height:100%;display:block;pointer-events:none;z-index:2;mix-blend-mode:difference}.controls{display:flex;opacity:0;flex-direction:column;gap:0;background:var(--bg-color);border:2px solid currentColor;margin-top:-4px;transition:margin-top .2s cubic-bezier(.3,.7,0,1) .2s}.has-extracted .controls{opacity:1}.controls:not(.auto-mode){margin-top:-2px}.field{position:relative;display:flex;align-items:center;justify-content:space-between;background:var(--bg-color);color:var(--text-color);padding:.75em 1em;gap:1rem;border-bottom:1px solid var(--border-color)}.field:last-child{border-bottom:none}.field--manual-setting{display:flex;height:auto;overflow:hidden;transition:height .3s cubic-bezier(.3,.7,0,1),opacity .2s linear,padding .3s cubic-bezier(.3,.7,0,1),border-bottom .3s cubic-bezier(.3,.7,0,1);transition-behavior:allow-discrete;opacity:1;box-sizing:border-box;transition-delay:.15s,0s,.15s}.controls.auto-mode .field--manual-setting{height:0;opacity:0;border-bottom:none;padding:0 1.5em;transition-delay:0s,.2s,0s}.field label,.field strong{font-weight:400;font-size:.8rem;min-width:140px}.field--range{flex-wrap:wrap;align-items:stretch;gap:0}.sliders-container{display:flex;flex-direction:column;gap:0;border-bottom:1px solid var(--border-color)}@media (min-width: 768px){.sliders-container{flex-direction:row}.sliders-container .field--range{flex:1;border-right:1px solid var(--border-color);border-bottom:none}.sliders-container .field--range:last-child{border-right:none}}.field__header{display:flex;justify-content:space-between;align-items:center;font-size:.75rem;font-weight:400;gap:1rem;flex:0 0 100%}.field__header-start{flex:0 0 auto;text-align:left;opacity:.6}.field__header-center{text-align:center;font-weight:700;position:absolute;left:50%;transform:translate(-50%)}.field__header-center i{font-style:normal;font-size:.6rem}.field__header-end{flex:0 0 auto;text-align:right;opacity:.6}.field input[type=range]{flex:1;cursor:pointer;accent-color:currentColor}.range-wrapper{position:relative;flex:1;display:grid;align-items:center;margin:0;height:1.6rem;width:100%;flex:0 0 100%}.range-wrapper 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-wrapper: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(--border-color);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-wrapper:hover .range-highlight{opacity:.4;height:5px;bottom:2px}.range-wrapper:after{content:"";position:absolute;left:0;right:0;bottom:1px;height:8px;--count: var(--graduations, 5);background-image:linear-gradient(to right,currentColor 1px,transparent 1px),linear-gradient(to right,var(--border-color) 1px,transparent 1px);background-size:calc((100% - 1px) / (var(--count) - 1)) 100%,calc((100% - 1px) / ((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(--bg-color);border:1px solid currentColor;border-radius:50%;transform:translate(-50%);pointer-events:none;z-index:2;box-shadow:0 0 0 2px var(--bg-color)}.range-marker:after{content:"";position:absolute;left:50%;top:100%;width:1px;height:11px;background:currentColor;transform:translate(-50%);pointer-events:none}.field input[type=number]{width:3rem;padding:.25rem;border:1px solid var(--text-color);background:transparent;font-family:inherit;font-size:.7rem;text-align:right;outline:none;color:inherit}.field input[type=number]:focus{border-bottom-color:currentColor}.field span{font-family:inherit;font-size:.6rem;color:var(--text-color)}.checkbox-wrapper{display:flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:300;color:var(--text-color);cursor:pointer;min-width:auto;justify-content:flex-end}.checkbox-wrapper--toggle{gap:0}.checkbox-wrapper--toggle input[type=checkbox]{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}.checkbox-wrapper--toggle .toggle{width:2.5rem;height:.75rem;border:1px solid var(--text-color);background:var(--bg-color);border-radius:999px;position:relative;flex:0 0 auto;transition:background .15s ease,border-color .15s ease}.checkbox-wrapper--toggle .toggle:after{content:"";position:absolute;top:1px;left:1px;width:1rem;height:calc(.75rem - 6px);border-radius:2rem;background:var(--text-color);border:1px solid currentColor;transition:transform .15s ease,border-color .15s ease}.checkbox-wrapper--toggle input[type=checkbox]:checked+.toggle{background:currentColor;border-color:currentColor}.checkbox-wrapper--toggle input[type=checkbox]:checked+.toggle:after{transform:translate(1rem);border-color:var(--bg-color);background:var(--bg-color);width:1.1rem}.checkbox-wrapper--toggle input[type=checkbox]:focus-visible+.toggle{outline:2px solid currentColor;outline-offset:2px}.reset-btn{background:var(--bg-color);border:none;border-top:1px solid var(--border-color);padding:1rem;font-family:inherit;font-weight:400;cursor:pointer;width:100%;text-align:center;transition:transform .15s ease,box-shadow .15s linear,background .05s linear,color .05s linear;text-transform:uppercase;font-size:.7rem;letter-spacing:.05em;color:inherit}.reset-btn:hover{background:var(--text-color);color:var(--bg-color);transform:translateY(-2px);box-shadow:0 2px 0 0 currentColor}.reset-btn:active{transform:translateY(0);box-shadow:none}.palette-container{display:flex;flex-direction:column;position:sticky;top:1rem}.palette-title{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--secondary-text);font-weight:400;margin-top:-.7ex}.palette-title span{color:var(--text-color);text-transform:none}.distribution-bar{display:flex;height:24px;width:100%;overflow:hidden;border:1px solid currentColor;border-width:1px 0}.distribution-segment{height:100%;transition:opacity .2s;cursor:pointer}.distribution-segment:hover,.distribution-segment.highlight{opacity:.8}.palette{display:flex;flex-direction:column;background:var(--bg-color);border:2px solid currentColor}.color-row{display:flex;background:var(--bg-color);padding:0;transition:transform .15s ease,box-shadow .15s linear;position:relative;min-height:5rem;border-bottom:1px solid var(--border-color);cursor:pointer}.color-row:last-child{border-bottom:none}.color-row:hover,.color-row.highlight{z-index:10;transform:translateY(-2px);box-shadow:0 2px 0 0 currentColor,0 -1px 0 0 currentColor}.color-row:active{transform:translateY(0);box-shadow:none}.color-swatch{width:5rem;flex-shrink:0;border-right:1px solid var(--border-color)}.color-info{flex:1;padding:1rem 1.5rem;display:flex;flex-direction:column;justify-content:center;position:relative}.color-info--header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;transform:translateY(0);transition:transform .2s}.color-info--header-deco{flex:1 1 auto;min-width:0;position:relative;height:1px;background:var(--border-color);opacity:.4}.color-name-display{font-weight:400;font-size:1rem;margin-bottom:0;letter-spacing:-.02em}.color-hex{font-size:.75rem;font-weight:300;font-family:inherit}.color-meta{display:flex;align-items:center;gap:1rem;font-size:.75rem;font-weight:300;color:var(--secondary-text);font-family:inherit;justify-content:space-between;position:absolute;top:50%;left:1.5rem;right:1.5rem;opacity:0;transform:translateY(-50%);transition:opacity .2s,transform .2s}.color-row:hover .color-meta{opacity:1;transform:translateY(15%);transition-delay:.15s,.1s}.color-row:hover .color-info--header{transform:translateY(-35%)}.copy-feedback{position:absolute;left:2.5rem;top:50%;transform:translateY(-120%);font-size:.6rem;font-weight:400;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;background:var(--bg-color);color:var(--text-color);padding:.15rem .5rem;border:1px solid currentColor;transform:translate(-50%) translateY(-120%)}.copy-feedback.show{opacity:1;transform:translate(-50%) translateY(-50%)}.color-marker{position:absolute;width:.75rem;height:.75rem;border-radius:50%;transform:translate(-50%,-50%);border:1.5px solid var(--bg-color);box-shadow:0 0 0 .5px currentColor;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;transition:transform .2s cubic-bezier(.3,.7,0,1),box-shadow .2s,width .2s,height .2s;z-index:10}.color-marker:hover,.color-marker.highlight{width:1.25rem;height:1.25rem;border:2px solid var(--bg-color);box-shadow:0 0 0 1px var(--text-color),0 0 0 2px var(--bg-color);z-index:20}.color-marker.active{cursor:none}.image-container.focus-mode .color-marker:not(.highlight):not(.active){box-shadow:0 0 0 1px currentColor;z-index:5;transform:translate(-50%,-50%) scale(.5)}.loupe{position:absolute;width:8rem;height:8rem;border:1px solid var(--bg-color);border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px var(--text-color),0 0 0 2px var(--bg-color);pointer-events:none;z-index:100;display:none;--loupe-inset: .5rem;--colorOld: var(--bg-color);--colorNew: var(--bg-color);background:linear-gradient(to bottom,var(--colorOld) 50%,var(--colorNew) 50%);transform:translate(-50%,-50%)}.loupe:before,.loupe:after{content:"";position:absolute;background:var(--white);transform:translate(-50%,-50%);pointer-events:none}.loupe:before{left:0;right:-100%;height:1px;top:50%}.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)}.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}.image-analysis-panel{background:var(--bg-color);border:2px solid currentColor;border-radius:0;overflow:clip;display:none;position:relative}.has-extracted .image-analysis-panel{display:block}.image-analysis-header{padding:1rem 0;background:var(--bg-color);border-bottom:1px solid var(--border-color);font-weight:400;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--secondary-text);display:none}.image-controls{display:flex;gap:0;margin-left:-2px;margin-right:-2px;margin-bottom:-2px;position:relative;z-index:50}.image-controls .btn+.btn{margin-left:-1px}.field--btn{padding:.5rem .7rem;border:none;flex:1 1 auto;border-top:1px solid var(--text-color)}.field--btn:has(input:not(:checked)){background:var(--text-color);color:var(--bg-color)}.field--btn:has(input:not(:checked)) span{color:var(--bg-color)}.btn.button--section{padding:.5rem .7rem}.btn.button--section span{display:none}.btn.button--section:after{content:"";display:block;width:1em;height:1em;border:1px dashed currentColor}.btn.button--section.active{border-color:var(--text-color)}.btn.button--stats{display:block;width:2.3rem;padding:.5rem .7rem;transition:width .2s cubic-bezier(.3,.7,0,1)}.btn.button--stats svg{width:1.75em;height:1.75em;display:block;margin:0 -.2em;pointer-events:none}.btn.button--stats span{position:absolute;left:2rem;top:50%;transform:translateY(-50%) translate(2rem);font-size:.6rem;width:max-content;white-space:nowrap;opacity:0;transition:opacity .2s linear,transform .2s cubic-bezier(.3,.7,0,1)}.btn.button--stats.active,.btn.button--stats:hover{width:4.65rem}.btn.button--stats.active span,.btn.button--stats:hover span{opacity:1;transform:translateY(-50%) translate(.2rem)}.btn.button--stats.active{border-color:var(--text-color)}.btn.button--stats.active span{color:var(--bg-color)}.image-stats{position:absolute;left:0;bottom:0;right:0;background:var(--bg-color);z-index:40;transform:translateY(100%);transition:transform .3s cubic-bezier(.3,.7,0,1);border-top:1px solid var(--border-color)}.image-stats svg circle{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.2);transition:transform .3s cubic-bezier(.3,.7,0,1) .5s,opacity .2s linear .5s}.image-stats.visible svg circle{transform:scale(1);opacity:1}.image-stats.visible{transform:translateY(0)}.image-stats-body{padding:1.5rem 0 2rem;padding-block-start:0}.stats-column{list-style:none;padding:0;margin:1px 0 0}.stats-column li{--i: 0;position:relative;padding:.8rem 1.5rem;box-shadow:0 0 0 1px var(--border-color);opacity:0;transform:translateY(100%);transition:opacity .3s cubic-bezier(.3,.7,0,1) calc(.13s + var(--i) * .03s),transform .3s cubic-bezier(.3,.7,0,1) calc(.1s + var(--i) * .03s)}.stats-column li:nth-child(1){--i: 1}.stats-column li:nth-child(2){--i: 2}.stats-column li:nth-child(3){--i: 3}.stats-column li:nth-child(4){--i: 4}.stats-column li:nth-child(5){--i: 5}.stats-column li+li{margin-top:1px}.image-stats.visible .stats-column li{opacity:1;transform:translateY(0)}.analysis-grid{display:flex;flex-direction:row;gap:.5rem;align-items:center}.analysis-grid>.stats-column{flex:1 1 50%;width:50%;min-width:0}.analysis-grid>.color-space-plot{flex:1 1 50%;width:50%}@media (max-width: 600px){.analysis-grid{flex-direction:column}.analysis-grid>.stats-column,.analysis-grid>.color-space-plot{flex:1 1 100%;width:100%}.analysis-grid>.color-space-plot{order:-1;margin:1rem 0}}.stat-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;font-size:.75rem;font-weight:300;margin:0}.stat-value{font-family:inherit;font-weight:700;font-size:.8em;vertical-align:baseline}.stat-bar{height:2px;background:var(--border-color);overflow:hidden;position:absolute;bottom:-1px;left:0;right:0}.stat-bar--centered{overflow:visible}.stat-bar--centered:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--border-color);transform:translate(-.5px)}.stat-bar-fill{height:100%;background:currentColor}.stat-bar-fill--centered{position:absolute;top:0;bottom:0}.stat-bar-fill.chroma{background:currentColor}.color-space-plot{display:flex;flex-direction:column;align-items:center;cursor:grab}#colorSpaceSvg{width:12rem;height:auto;display:block;touch-action:none;-webkit-user-select:none;user-select:none}.color-space-plot h4{align-self:flex-start;margin-bottom:1rem;font-size:.7rem;font-weight:400;text-transform:uppercase;letter-spacing:.05em;color:var(--secondary-text)}.loading{position:fixed;bottom:2rem;right:2rem;background:var(--bg-color);padding:.8rem 1.5rem;border:2px solid currentColor;z-index:100;display:flex;align-items:center;gap:1rem;font-size:.85rem;font-weight:300;transform:translateY(200%);transition:transform .3s cubic-bezier(.3,.7,0,1)}.loading.visible{transform:translateY(0)}.spinner{width:16px;height:16px;border:2px solid var(--border-color);border-top-color:currentColor;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.btn{background:var(--bg-color);border:1px solid currentColor;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)}.btn:hover{transform:translateY(-2px);box-shadow:0 2px 0 0 var(--text-color)}.palette-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:-1px;position:relative}.palette-buttons{display:flex;flex-direction:row-reverse;margin-inline:1px}.palette-buttons .btn{margin-left:-1px}.page-footer{margin:0 auto;padding:0 5vmin 4rem;box-sizing:border-box;display:flex;gap:1.5rem;max-width:90rem;align-items:center;justify-content:space-between;flex-wrap:wrap;color:var(--secondary-text);font-size:.75rem}@media (max-width: 900px){.page-footer{padding-top:1.5rem;display:flex;flex-direction:column-reverse;align-items:flex-start}}.ellogo{width:4rem}body.loading-names .color-name-display{opacity:.7;transition:opacity .2s linear}body:not(.loading-names) .color-name-display{transition:opacity .3s}.btn.active{background:var(--text-color);color:var(--bg-color)}.cursor-crosshair{cursor:crosshair!important}