.pixel-palette,.pixel-palette *{margin:0;padding:0;box-sizing:border-box}.pixel-palette{font-family:sans-serif;--bkg: white;--hover-bkg: #ebebeb;--text-clr: black;--border: #eeeeee;--primary-clr-1: var(--hue) 100 50% / .1;--primary-clr-2: var(--hue) 100 50% / .2;--primary-clr-3: var(--hue) 100 50% / .3;--neutral-700: #404040;--neutral-900: #171717;--neutral-200: #e5e5e5}.pixel-palette h1,.pixel-palette h2,.pixel-palette h3,.pixel-palette h4,.pixel-palette h5,.pixel-palette h6,.pixel-palette p,.pixel-palette ul,.pixel-palette ol{margin:0;padding:0}.pixel-palette h1,.pixel-palette h2,.pixel-palette h3,.pixel-palette h4,.pixel-palette h5,.pixel-palette h6,.pixel-palette p{font-weight:400}.pixel-palette ul,.pixel-palette ol{list-style:none}.pixel-palette a{text-decoration:none;color:inherit}.pixel-palette button,.pixel-palette input,.pixel-palette textarea,.pixel-palette select{all:unset;font:inherit;color:inherit}.pixel-palette button{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}.pixel-palette.dark{--bkg: #404040;--hover-bkg: #ebebeb;--border: #1d1d1d;--text-clr: #e5e5e5;--primary-clr-1: var(--hue) 100 50% / .1;--primary-clr-2: var(--hue) 100 50% / .3;--primary-clr-3: var(--hue) 100 50% / .5;--neutral-700: #404040;--neutral-900: #171717;--neutral-200: #e5e5e5}.pixel-palette .text-primary{color:var(--text-clr)}.pixel-palette .border-primary{border-color:var(--border)}.pixel-palette .icon,.color-picker-colors__container .color-input-icon,.alpha-toggle .icon{width:1.25rem;height:1.25rem}.pixel-palette .btn,.color-picker-colors__container .color-input-wrapper,.color-picker-colors__container .color-mode-btn,.color-picker__container .color-picker-options__btn,.color-picker__container .color-picker-options__toggle-btn{display:flex;align-items:center;justify-content:center}.pixel-palette .slider__container{position:relative;width:100%;height:1rem;border-radius:.5rem;padding:.25rem}.pixel-palette .slider__container:last-child{margin-bottom:2px}.pixel-palette .current-hue{background:hsl(var(--hue),100%,50%)}.pixel-palette .hue-slider{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.pixel-palette .hue-slider-knob{position:absolute;top:50%;left:100%;transform:translateY(-50%);width:1rem;height:100%;border-radius:99px;border-width:.125rem solid var(--bkg)}.pixel-palette .hue-slider-knob:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:3px solid #fff;border-radius:99px}.pixel-palette .checker,.pixel-palette .hue-slider{width:100%;height:100%;border-radius:.25rem}.pixel-palette .checker:before{content:"";position:absolute;top:4px;right:4px;bottom:4px;left:4px;border-radius:5px;background:linear-gradient(to right,transparent,hsl(var(--hue),100%,50%))}.pixel-palette .checker,.pixel-palette .checkered{--size: 16px;--c1: #f2f2f2;--c2: #ccc;background:conic-gradient(from 90deg,var(--c1) 25%,var(--c2) 0 50%,var(--c1) 0 75%,var(--c2) 0) 0 / var(--size) var(--size)}.pixel-palette .current-hue-gradient{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;cursor:crosshair;background:linear-gradient(to right,transparent,hsl(var(--hue),100%,50%))}.pixel-palette .current-hue-gradient:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom,transparent,black)}.pixel-palette .fade-enter-active,.pixel-palette .fade-leave-active{transition:opacity .15s ease,transform .15s ease}.pixel-palette .fade-enter-from,.pixel-palette .fade-leave-to{opacity:0;transform:translateY(4px)}.color_channel-input__container,.color-picker-colors__container .color-input,.compare-switch{display:flex}.color-picker-colors__container .color-input{border-bottom-width:2px;border-bottom-style:solid}.color_channel-input__wrapper{position:relative;width:33.3333%;height:2.125rem;display:flex;align-items:center;font-size:14px}.color_channel-input__wrapper label,.hex_input__wrapper label{position:absolute;top:50%;left:8px;transform:translateY(-50%);font-weight:700;-webkit-user-select:none;user-select:none;z-index:2}.hex_input__wrapper label{left:5px;flex-shrink:0;color:#737373}.color_channel-input__wrapper input,.hex_input__wrapper input{width:100%;height:100%;border:1.5px solid transparent;box-sizing:border-box;transition:all .3s ease-in-out}.hex_input__wrapper input{padding-left:14px}.color_channel-input__wrapper input{text-align:center;text-indent:1rem}.color_channel-input__wrapper input:hover,.hex_input__wrapper input:hover{border-color:hsla(var(--primary-clr-3))}.highlight input:focus{border-color:hsla(var(--primary-clr-3));background:hsla(var(--primary-clr-1));z-index:1}.highlight:focus-within:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;box-shadow:hsla(var(--hue),100%,50%) 0 0 10px;transition:all .4s ease-in-out}.color-space-knob{width:1.1rem;height:1.1rem;position:absolute;top:0;left:0;border-radius:999px;border:.125rem solid var(--bkg);box-shadow:#0008 0 0 5px;pointer-events:none}.hex_input__wrapper{position:relative;display:flex;align-items:center;height:2.125rem;font:600 14px/1 system-ui,sans-serif;text-transform:uppercase}.color-picker-colors__container .color-box{width:3.5rem;flex-shrink:0;border-radius:.375rem}.color-picker-colors__container .color-mode-btn{width:60px;gap:2px;font:600 14px/1 system-ui,sans-serif;flex:1 0 auto}.color-picker-colors__container .color-mode-btn:hover{background:hsla(var(--primary-clr-1))}.color-picker-colors__container .color-mode-btn:active{background:hsla(var(--primary-clr-2))}.color-picker-colors__container .color-mode-icon{width:15px;height:15px;color:#737373}.color-picker-colors__container .color-mode-icon.rotate{animation:rotate .3s ease-in-out forwards}@keyframes rotate{to{transform:rotate(180deg)}}.color__container{display:flex;flex-direction:column;height:291.63px}.color{flex:1;width:100%;display:flex;align-items:center;justify-content:center;cursor:pointer;height:100%}.color.current{border-top-width:2px;border-top-style:solid;border-bottom-width:2px;border-bottom-style:solid}.color p{text-transform:uppercase;font:600 .85rem/1 system-ui,sans-serif;display:none;-webkit-user-select:none;user-select:none}.color:hover p,.color.current p,.color.copied p{display:inline-block}.tooltip__container{position:relative;cursor:pointer}.tooltip__container .tooltip__text{position:absolute;left:50%;transform:translate(-50%);background:var(--neutral-900, #111);color:#fff;font-weight:500;padding:.25rem .5rem;border-radius:.375rem;box-shadow:0 2px 6px #0004;white-space:nowrap;font-size:.75rem;z-index:4}.tooltip__container .tooltip__text.bottom{top:110%}.tooltip__container .tooltip__text.top{bottom:110%}.color-picker-container{width:100%;max-width:400px;padding:7px 5px;font-family:system-ui,sans-serif;display:flex;flex-direction:column;border-top-width:2px;border-top-style:solid}.swatch-row{display:flex;border-radius:.25rem}.color-swatch{position:relative;flex:1;height:1rem;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;overflow:hidden}.swatch-row>div:first-child .color-swatch{border-radius:.5rem 0 0 .5rem}.swatch-row>div:last-child .color-swatch{border-radius:0 .5rem .5rem 0}.color-compare-tooltip{flex:1}.compare-switch p{width:100%;font-size:14px;text-transform:capitalize}.compare-switch button{width:24px;height:24px;border:1px solid transparent;margin-top:5px}.compare-switch button:hover{background:hsla(var(--primary-clr-1))}.compare-switch button:active{background:hsla(var(--primary-clr-2));border-color:hsla(var(--primary-clr-3))}.compare-switch .next,.compare-switch .prev{width:18px;height:18px}.compare-switch .prev{transform:rotate(90deg)}.compare-switch .next{transform:rotate(-90deg)}.swatch-container{display:flex;flex-wrap:wrap;gap:6px;max-width:100%}.swatch{width:24px;height:24px;border-radius:6px;cursor:pointer;border:none;transition:transform .2s ease,box-shadow .2s ease}.swatch:hover{transform:scale(1.1)}.swatch.selected{border:2px solid var(--border-color, black);box-shadow:0 0 6px 0 var(--glow-color, rgba(0, 0, 0, .4))}.color-picker__container{width:100%;background:var(--bkg);border:.125rem solid}.color-picker__container .color-picker__title{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:3px 7px;border-bottom-width:.125rem;border-bottom-style:solid;font:500 14px/1 system-ui,sans-serif}.color-picker__container .color-picker-colors__container{display:flex;flex-direction:column}.color-picker__container .color-picker-colors__container:last-child{gap:.5rem}.color-picker__container .slider-container{padding:2px 3px;display:flex;flex-direction:column;gap:2px}.color-picker__container .hue-slider_and_alpha-toggle{display:flex;align-items:center}.color-picker__container .alpha-toggle{width:1.5rem;display:flex;align-items:center;justify-content:center;border-radius:.5rem}.alpha-toggle.rotate .icon{transform:rotateX(180deg)}.color-picker-options__container{position:relative;display:flex;align-items:center;border-top-width:.125rem;border-top-style:solid}.color-picker__container .color-picker-options__btn{height:1.9rem;width:100%;font-weight:500;cursor:pointer;transition:background-color .2s}.color-picker__container .color-picker-options__btn:hover,.color-picker__container .color-picker-options__btn.active{background:hsla(var(--primary-clr-2))}.color-picker__container .color-picker-options__toggle-btn{gap:.25rem;padding:0 .5rem;margin-right:auto}.color-picker__container .color-picker-options__tooltip{height:1.75rem}.color-picker{position:relative;width:fit-content;--copy-btn-width: 32px}.color-picker .color-btn{position:relative;width:250px;background:var(--bkg);display:flex;align-items:center;gap:.5rem;border:.125rem solid var(--border);border-radius:9px}.color-picker .color-icon{position:absolute;margin-right:var(--copy-btn-width);width:calc(100% - var(--copy-btn-width));height:32px;border-radius:7px 0 0 7px;overflow:hidden}.color-picker .color-info{background:#fff;display:flex;align-items:center;flex-grow:1;gap:.5rem;padding-right:.25rem}.color-picker .color-text{flex-grow:1;margin:auto;font:500 .85rem/1 system-ui,sans-serif;text-transform:uppercase;text-align:center;-webkit-user-select:none;user-select:none;z-index:2}.color-picker .color-text.black{text-shadow:0 0 10px #fff,0 0 10px #fff,0 0 10px #fff}.color-picker .color-text.white{text-shadow:0 0 10px #000,0 0 10px #000,0 0 10px #000}.color-picker .picker-popup{position:absolute;top:100%;transform:translateY(.5rem);width:100%;z-index:3}.color-picker .picker-popup.top{top:-.5rem;transform:translateY(-100%)}.color-picker .picker-copy-btn{display:flex;align-items:center;justify-content:center;width:var(--copy-btn-width);height:32px;border-radius:0 8px 8px 0;font-weight:500;cursor:pointer;transition:background-color .2s;color:var(--text-clr)}.color-picker .picker-copy-btn:hover{background:hsla(var(--primary-clr-2))}