*{font-family:Jetbrains Mono,Fira Mono,monospace,system-ui;color:var(--Normal-Text);-webkit-user-select:none;-moz-user-select:none;user-select:none;scrollbar-width:var(--Normal-Spacing);scrollbar-color:var(--Normal-Foreground) var(--Dark-Background)}::-webkit-scrollbar-thumb{border-radius:0}::-webkit-scrollbar{width:4px!important}html,body{margin:0;padding:0;overflow:hidden;transform-origin:0 0;display:flex;flex-direction:column;background-color:var(--Normal-Background);touch-action:none;min-height:250px;min-width:300px;height:100dvh;width:100dvw}.ColorDisplay{height:var(--ColorDisplay-height);width:100%;padding:var(--Normal-Spacing);background-color:#333;box-sizing:border-box;display:flex;align-items:flex-end;justify-content:flex-end}.HexInput{text-align:end;background:var(--Dark-Background);line-height:var(--Font-Size-Large);font-size:var(--Font-Size-Large);width:4.25em;height:var(--Font-Size-Large);max-height:calc(100% - var(--Normal-Spacing) * 3);color:var(--Normal-Text);padding:calc(var(--Normal-Spacing) / 2);border:var(--Normal-Spacing) solid var(--Normal-Background);transition:var(--Timing-Normal) var(--Transition-Normal) border;--border-radius: calc(var(--interactable-radius) * 4);border-radius:var(--border-radius) var(--border-radius) var(--border-radius) 0}.CopyButton{justify-content:center;box-sizing:border-box;display:flex;height:calc(var(--Font-Size-Regular) * 2.5);width:calc(var(--Font-Size-Regular) * 2.5);background:var(--Normal-Background);outline:none;cursor:pointer;--border-radius: calc(var(--interactable-radius) * 4);padding:calc(var(--border-radius) / 4);padding-right:0;margin-right:calc(0px - var(--Normal-Spacing) / 2);border-radius:var(--border-radius) 0 0 var(--border-radius);transition:background var(--Timing-Short) var(--Transition-Normal);outline:#2C9CEF solid 0px}@media (max-height: 475px){.ColorDisplay{padding:0}.HexInput{font-size:calc(var(--Font-Size-Large) /1.25);height:calc(var(--Font-Size-Large) /1.25);border-radius:var(--border-radius) 0 0 0}.CopyButton{margin:calc(var(--Normal-Spacing) / 2);height:calc(var(--Font-Size-Regular) * 2);width:calc(var(--Font-Size-Regular) * 2)}}.HexInput:focus{-webkit-appearance:none;appearance:none;outline:none;border:var(--Normal-Spacing) solid}.CopyButton svg{height:100%;background:none}.CopyButton input[type=button]{display:none}.CopyButton:hover{background:var(--Light-Background)}.CopyButton:active{background:var(--Dark-Background)}main{height:calc(100% - var(--ColorDisplay-height) - var(--Footer-height));--Options-height: 46px;--Selector-width: 35%}.ColorOptions{display:flex;justify-content:space-between;padding:calc(var(--Normal-Spacing) * 2);box-sizing:border-box;height:var(--Options-height);background-color:var(--Normal-Background)}.ColorSpaces{height:100%;display:flex;width:fit-content;box-sizing:border-box;padding:calc(var(--Normal-Spacing)/2);border:2px solid var(--Light-Background);border-radius:calc(var(--interactable-radius))}.ColorOption input{display:none}.ColorOption{box-sizing:border-box;display:flex;color:var(--Dark-Text);padding-left:calc(var(--Normal-Spacing) * 2);padding-right:calc(var(--Normal-Spacing) * 2);font-size:calc(var(--Options-height) / 2 - (var(--Normal-Spacing)/2) - 2px);height:100%;align-self:center;margin:auto;align-items:center}.ColorOption:hover{background:var(--Dark-Foreground);color:var(--Normal-Text)}.ColorOption:active{background-color:var(--Dark-Background);color:var(--Light-Background)}.ColorOption:has(input:checked){background-color:var(--Light-Background);color:var(--Normal-Text)}.OptionsBox{display:flex;flex-direction:row;gap:calc(var(--Normal-Spacing)/2);transition:height var(--Timing-Normal) var(--Transition-Normal);padding:calc(var(--Normal-Spacing)/2);border:2px solid var(--Light-Background);border-radius:calc(var(--interactable-radius))}.ColorButton{justify-content:center;box-sizing:border-box;display:flex;flex-direction:row;cursor:pointer;height:100%;width:calc(var(--Font-Size-Regular) * 2.25);color:var(--Normal-Text)}.icon{color:#00f}.ColorButton:hover{background:var(--Light-Background)}.ColorButton:active{background-color:var(--Dark-Background)}.ColorButton .locked{display:none}.ColorButton:has(input:checked){background-color:var(--Normal-Accent)}.ColorButton:has(input:checked) .unlocked{display:none}.ColorButton:has(input:checked) .locked{display:inline}.ColorButton:has(input:checked):active{background:var(--Dark-Accent)}.ColorButton input{display:none}.ColorControls{height:calc(100% - var(--Options-height));display:flex}.ColorSelector{height:100%;width:var(--Selector-width);background-color:var(--Normal-Background);display:flex;align-items:start;align-self:flex-start;flex-direction:column;box-sizing:border-box;padding:var(--Normal-Spacing)}:root{--Number-Inputs-Size: max(20%, 125px)}.CursorSelectorElementsBox{display:grid;padding:var(--Normal-Spacing);width:100%;aspect-ratio:1/1;max-height:100%;box-sizing:border-box}.CursorSelectorElementsBoxWraper{align-content:center;align-self:flex-start;height:calc(100% - var(--Number-Inputs-Size));width:100%}.ColorSelectorElement{grid-area:1/1;width:100%;height:100%;margin:auto;display:block;aspect-ratio:1/1;z-index:1;cursor:pointer}.ColorSelectorCircle{border-radius:100%;overflow:hidden}.InputContainer{height:var(--Number-Inputs-Size);display:flex;box-sizing:border-box;flex-direction:column;align-items:center;gap:6px;padding:var(--Normal-Spacing);width:100%}.InputUnit{width:100%;max-width:350px;display:flex;align-items:center;flex-direction:row;--gap: 6px;gap:var(--gap);justify-content:space-between;box-sizing:border-box;padding-bottom:var(--Normal-Spacing);border-bottom:1px solid var(--border-color);max-height:calc((100% / 3) - var(--gap))}.InputUnit:last-child{border:none}.InputUnit label{color:var(--Dark-Text)}input[type=number]{appearance:none;-webkit-appearance:none;-moz-appearance:textfield;font-size:var(--Font-Size-Regular);box-sizing:border-box;width:calc(var(--Font-Size-Regular) * 2.5);border:var(--Normal-Background) solid 2px;background:none;outline:none;padding:var(--Normal-Padding);z-index:2;transition:border var(--Timing-Normal);border-radius:var(--interactable-radius) 0 0 var(--interactable-radius)}input[type=number]:focus{-webkit-appearance:none;appearance:none;-moz-appearance:textfield;border:var(--Normal-Text) solid 2px}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;opacity:1}.NumberInputUnit{display:flex;flex-direction:row;max-height:calc(var(--Font-Size-Regular) * 1.75);height:100%;border:2px solid var(--Light-Background);border-radius:calc(var(--interactable-radius))}.ValueControlUnit{display:flex;flex-direction:column}.ValueControl{-webkit-appearance:none;appearance:none;height:50%;width:calc(var(--Font-Size-Regular) * 1.5);border:none;background:var(--Light-Background);border-left:var(--Light-Background) solid 2px;font-size:calc(50% - 2px);padding:0;color:var(--Normal-Text);font-weight:700;margin:0;text-overflow:clip}.ValueControlUp{border-radius:0 var(--interactable-radius) 0 0;border-bottom:var(--Light-Background) solid 1px}.ValueControl:hover{background:var(--Dark-Foreground);transition:15ms}.ValueControl:active{background:var(--Normal-Background)}.ValueControlDown{border-radius:0 0 var(--interactable-radius) 0;border-top:var(--Light-Background) solid 1px}.ColorSelectorElementCursor{z-index:15;pointer-events:none}:root{--Color-Palette-Input-Size: 45%}.ColorPalette{display:flex;height:100%;width:100%;padding:calc(var(--Normal-Spacing) * 2);flex-direction:row;box-sizing:border-box;gap:var(--Normal-Spacing);background-color:var(--Normal-Background)}.ColorPaletteWraper{height:100%;width:calc(100% - var(--Selector-width));container-type:size;container-name:ColorPaletteWraper}.PaletteHeader{color:var(--Dark-Text);font-size:var(--Font-Size-Regular);background:var(--Normal-Background);width:fit-content;margin-bottom:calc(0px - (var(--Normal-Spacing) * 2));margin-left:calc(var(--Normal-Spacing) * 2);padding:calc(var(--Normal-Spacing) / 2);line-height:1;z-index:1;display:block;border:var(--Normal-Spacing) solid var(--Normal-Background);border-bottom:none;border-top:none;border-radius:var(--interactable-radius)}.ColorPaletteInput{height:100%;width:min(var(--Color-Palette-Input-Size),225px);display:flex;gap:var(--Normal-Spacing);box-sizing:border-box;flex-direction:column}.ColorPaletteInputUnit{height:calc((100% / 3) - (var(--Normal-Spacing) * (2/3)));width:100%;gap:0;display:flex;flex-direction:column;box-sizing:border-box}.PaletteInput{appearance:none;resize:none;border:2px solid var(--Light-Background);background:none;outline:none;padding:var(--Normal-Spacing);padding-top:calc(var(--Normal-Spacing) * 2.5);margin-top:0;width:100%;height:calc(100% - var(--Font-Size-Regular));box-sizing:border-box}.ColorPaletteOutput{width:calc(100% - min(var(--Color-Palette-Input-Size),225px));height:100%;background-color:var(--Dark-Background);display:flex;gap:calc(var(--Normal-Spacing) * 2);flex-direction:row;overflow-y:auto;flex-wrap:wrap;align-content:flex-start;align-self:flex-start;align-items:flex-start;box-sizing:border-box;padding:calc(var(--Normal-Spacing));border:2px solid var(--Light-Background)}.hexEntryCSS{height:1.25rem;width:5rem;text-align:center;display:flex;align-items:center;justify-content:center}.hexHoverEffect{transition:50ms;margin:auto;width:100%;height:100%}.hexHoverEffectText{color:#fff;text-shadow:0 0 2px black,1px 1px 0 black,-1px -1px black,-1px 1px black,1px -1px black}.hexEntryCSS:hover>.hexHoverEffect{margin:auto;font-size:.85rem;opacity:0}.hexEntryCSS:active>.hexHoverEffect{font-size:.95rem}.hexHoverEffectCopy{transition:50ms;opacity:0;font-size:.9rem;width:100%;height:100%;position:relative;margin:auto auto auto -100%;color:#fff;text-shadow:0 0 2px black,1px 1px 0 black,-1px -1px black,-1px 1px black,1px -1px black}.hexEntryCSS:hover>.hexHoverEffectCopy{opacity:1}.hexEntryCSS:active>.hexHoverEffectCopy{color:#00f}.paletteHueBox{box-sizing:border-box;padding:var(--Normal-Spacing);gap:var(--Normal-Spacing)}.PaletteLabel{display:none}@media screen and ((max-width: 700px) or (max-height: 475px)){.ColorPaletteWraper,.ColorSelector{width:100%}.PaletteLabel{display:flex}main{--Options-height: 80px}.OptionsBox{height:50%;align-self:flex-end;transition:height var(--Timing-Normal) var(--Transition-Normal)}.ColorSpaces{max-width:100%;height:50%}.ColorOption{font-size:calc(var(--Options-height) /3 - (var(--Normal-Spacing)/2) - 2px)}.ColorOptions{gap:var(--Normal-Spacing);flex-direction:column-reverse}}@media screen and (((max-height: 475px) and (max-width:700px)) or (max-height: 475px)){.InputContainer{display:flex;height:100%;width:50%;justify-content:center}.ColorSelector{flex-direction:row}:root{--Number-Inputs-Size: 0px}}@container ColorPaletteWraper (max-aspect-ratio: 1/1) or (max-width: 110vh) or (max-height: 400px){.ColorPalette{flex-direction:column}.ColorPaletteInput{width:100%;height:min(var(--Color-Palette-Input-Size) / 2,225px);flex-direction:row}.ColorPaletteInputUnit{width:calc((100% / 3) - var(--Normal-Spacing * (2/3)));height:100%}.ColorPaletteOutput{height:calc(100% - min(var(--Color-Palette-Input-Size) / 2,225px));width:100%}}.exportWrapper{position:relative;align-items:end;display:flex;flex-direction:column}.exportWindow{width:fit-content;background-color:var(--Normal-Background);padding:var(--Normal-Spacing);gap:var(--Normal-Spacing);display:none;flex-direction:column;position:absolute;top:calc(100% + var(--Normal-Spacing) + 2px);z-index:1000;padding:calc(var(--Normal-Spacing)/2);border:2px solid var(--Light-Background);border-radius:calc(var(--interactable-radius))}.hexOption{display:flex;flex-direction:row;white-space:nowrap;justify-content:space-between;box-sizing:border-box;gap:var(--Normal-Spacing);line-height:var(--Font-Size-Regular);font-size:var(--Font-Size-Regular);height:calc(var(--Font-Size-Regular) * 1.5);padding:calc(var(--Normal-Spacing) / 2);align-items:center;width:100%}.ToggleButton{margin-left:calc(var(--Normal-Spacing) * 6);width:calc(var(--Font-Size-Regular) * 2);height:65%;align-self:center;background-color:var(--Normal-Secondary);display:block}.ToggleButtonHandle{height:100%;width:50%;background-color:#fff;border-radius:var(--interactable-radius);transition:margin var(--Timing-Normal)}.ToggleButton:hover{background:var(--Light-Secondary)}.ToggleButton:active{background-color:var(--Dark-Secondary)}.ToggleButton:has(input:checked){background-color:var(--Normal-Accent)}.ToggleButton:has(input:checked):hover{background-color:var(--Light-Accent)}.ToggleButton:has(input:checked):active{background:var(--Dark-Accent)}.ToggleButton:has(input:checked) .ToggleButtonHandle{margin-left:50%}.infoButton{position:relative;color:var(--Light-Yellow);width:calc(var(--Font-Size-Regular) * 1.5);aspect-ratio:1;background-color:var(--Dark-Yellow)}.infoButton:hover{background-color:var(--Dark-Yellow)}.infoButton:active>.infoWindow{display:block}.infoButton:hover>.infoWindow{display:block}.infoWindow{position:absolute;top:calc(100% + (var(--Normal-Spacing) * 2));display:none;min-width:calc(var(--Font-Size-Small) * 14);width:fit-content;padding:var(--Normal-Spacing);font-size:var(--Font-Size-Small);line-height:var(--Font-Size-Small);background:var(--Dark-Yellow);color:var(--Light-Yellow);white-space:wrap;box-sizing:border-box}.infoWindow .Arrow{background:var(--Dark-Yellow)}.Arrow{position:absolute;display:block;clip-path:polygon(0% 100%,50% 0%,100% 100%);right:50%;transform:translate(50%,-100%);top:0;width:calc(var(--Normal-Spacing) * 3);height:calc(var(--Normal-Spacing) * 2 - 1px);outline:2px solid black}.exportWrapper:has(#exportButton:checked) .exportWindow{display:flex}.downloadButton{color:var(--Normal-Text);padding:var(--Normal-Spacing);width:100%;background-color:var(--Normal-Accent)}.downloadButton:hover{background-color:var(--Dark-Accent)}.downloadButton:active{background-color:var(--Dark-Background)}footer{font-size:calc(var(--Footer-height) - (var(--Normal-Spacing) * 2));display:flex;align-items:center;justify-content:space-between;height:var(--Footer-height);background-color:var(--Light-Background);padding:1px;padding-left:var(--Normal-Spacing);padding-right:var(--Normal-Spacing);box-sizing:border-box}footer a{text-decoration:none;height:100%;display:flex;color:#ffddd3;padding:var(--Normal-Spacing);align-items:center;font-size:12px;gap:4px;border-radius:6px;box-sizing:border-box;background-color:#ae553b}footer a:hover{background-color:#ad6a57}footer a img{height:100%}