*{box-sizing:border-box}html{height:100%}body{height:calc(100% - 1rem);background-color:#20242c;color:#eaeaea;font-family:"Arial","Helvetica","sans-serif"}header{display:flex;flex-direction:row;align-items:center;-moz-column-gap:4rem;column-gap:4rem;row-gap:.5rem;flex-wrap:wrap;justify-content:center}header button,header #history{background-color:#2c323c;border:none;border-radius:5px;color:#eaeaea;outline:none;padding:.25rem .5rem;cursor:pointer}header #history{text-decoration:none}header .actions{display:flex;flex-direction:row;flex-wrap:wrap;row-gap:.33rem;gap:.5rem}header .input{display:flex;flex-direction:row;gap:1.5rem;flex-wrap:wrap;row-gap:.66rem;justify-content:center;align-items:center}header input,header select{background-color:#2c323c;border:none;border-radius:5px;color:#eaeaea;outline:none;padding:.25rem .5rem}header .load-image{display:flex;flex-direction:row;gap:.5rem}main{display:flex;flex-direction:row;align-items:center;-moz-column-gap:4rem;column-gap:4rem;row-gap:1.5rem;flex-wrap:wrap;justify-content:center;margin:1rem 0}#options-modal[open]{display:flex;flex-direction:column;background-color:#1d2028;border:none;border-radius:8px;box-shadow:0px 0px 3px 1px #2c323c;color:#eaeaea;align-items:center;gap:1rem;z-index:100;width:min(90vw,36rem)}#options-modal[open] .option-group,#options-modal[open] #sharpness-settings{display:flex;flex-direction:column;gap:.5rem;width:100%}#options-modal[open] .option-group.inline,#options-modal[open] #sharpness-settings.inline{flex-direction:row;align-items:center}#options-modal[open] #sharpness-settings.disabled{opacity:.6;pointer-events:none}#options-modal[open] h2,#options-modal[open] h3{margin-bottom:0}#options-modal[open] p{margin-top:0}#options-modal[open] p a{text-decoration:underline;color:#eaeaea}#options-modal[open] input,#options-modal[open] button{width:-moz-fit-content;width:fit-content;background-color:#282d36;border:none;border-radius:5px;color:#eaeaea}#options-modal[open] button{cursor:pointer}#options-modal[open] #api-key{width:100%}#options-modal[open] .input-group{display:flex;flex-direction:column;gap:.33rem;width:100%}#options-modal[open] .input-group.inline{flex-direction:row;align-items:center}.cropper{display:flex;flex-direction:column;justify-content:center;gap:1rem}#container{position:relative;max-height:100vh;max-width:90vw;background:#111;-webkit-user-select:none;-moz-user-select:none;user-select:none}#moveButtons{display:flex;flex-direction:row;justify-content:center;gap:16px}#moveButtons svg:not(#rotate-right){background-color:#2c323c;padding:2px;border-radius:3px;fill:#eaeaea;cursor:pointer}#moveButtons svg#rotate-right{background-color:#2c323c;padding:2px;border-radius:3px;cursor:pointer;fill:none}#moveButtons .move-step-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:center;background-color:#2c323c;padding:2px 6px 2px 2px;border-radius:3px;color:#eaeaea;font-size:14px;gap:4px}#cropDimensions{text-align:center;font-family:monospace;font-size:14px;color:#eaeaea;padding:5px;background:#2c323c;border-radius:4px;display:inline-block}.side{display:flex;flex-direction:column;gap:2rem}.side #color-wheel{display:flex;flex-direction:column;align-items:center;gap:.5rem}.side #color-wheel span{font-size:1.1rem}.side #preview-container{display:flex;flex-direction:column;align-items:center;gap:.5rem}.side #preview-container span{font-size:1.1rem}.side #previewCanvas{border:1px solid #2c323c}#image{display:block;max-height:90vh;max-width:100%}#overlay{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}#overlay>div{position:absolute;background:rgba(0,0,0,.5)}#cropBox{position:absolute;border:2px solid #fff;box-sizing:border-box;cursor:move;background:rgba(0,0,0,0);touch-action:none}#cropBox .grid{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}#cropBox .line.vertical{position:absolute;width:1px;height:100%;background:hsla(0,0%,100%,.5);left:50%;top:0;transform:translateX(-0.5px)}#cropBox .line.horizontal{position:absolute;height:1px;width:100%;background:hsla(0,0%,100%,.5)}.handle{position:absolute;width:14px;height:14px;background:#fff;border-radius:50%;border:2px solid #fff;box-sizing:border-box;z-index:10;touch-action:none}.handle.corner{cursor:nwse-resize}.handle.corner[data-pos=tr],.handle.corner[data-pos=bl]{cursor:nesw-resize}.handle.edge[data-pos=top],.handle.edge[data-pos=bottom]{cursor:ns-resize}.handle.edge[data-pos=left],.handle.edge[data-pos=right]{cursor:ew-resize}.handle[data-pos=tl]{top:-9px;left:-9px}.handle[data-pos=tr]{top:-9px;right:-9px}.handle[data-pos=bl]{bottom:-9px;left:-9px}.handle[data-pos=br]{bottom:-9px;right:-9px}.handle[data-pos=top]{top:-9px;left:50%;transform:translateX(-50%)}.handle[data-pos=bottom]{bottom:-9px;left:50%;transform:translateX(-50%)}.handle[data-pos=left]{left:-9px;top:50%;transform:translateY(-50%)}.handle[data-pos=right]{right:-9px;top:50%;transform:translateY(-50%)}#controls{margin-top:15px;display:flex;gap:10px;flex-wrap:wrap}button,input[type=text],#history{padding:6px 10px;font-size:14px}#color-hex{width:12ch;background-color:#2c323c;border:none;border-radius:5px;color:#eaeaea;outline:none;text-align:center}.hidden{display:none}.reinvented-color-wheel,.reinvented-color-wheel--hue-handle,.reinvented-color-wheel--hue-wheel,.reinvented-color-wheel--sv-handle,.reinvented-color-wheel--sv-space{touch-action:manipulation;touch-action:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-user-select:none;-moz-user-select:none;user-select:none}.reinvented-color-wheel{position:relative;display:inline-block;line-height:0;border-radius:50%}.reinvented-color-wheel--hue-wheel{border-radius:50%}.reinvented-color-wheel--sv-space{position:absolute;left:0;top:0;right:0;bottom:0;margin:auto}.reinvented-color-wheel--hue-handle,.reinvented-color-wheel--sv-handle{position:absolute;box-sizing:border-box;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #000 inset}.reinvented-color-wheel--hue-handle{pointer-events:none}.hidden{display:none !important}