@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap";#root{width:100%}.app{position:relative;height:100dvh;padding:10px;display:flex;flex-direction:column;gap:10px;min-width:320px}@media (min-width: 1000px){.app{flex-direction:row}}.image{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;border:2px dashed rgba(255,255,255,.15);border:4px solid var(--gray-400);flex:1 0 0;border-radius:var(--border-radius);overflow:hidden}.image__wrapper{position:relative;display:flex;flex:1}.image__inner{outline:1px solid red;height:100%;width:100%}.image__clear{top:-4px;right:-4px;position:absolute;font-size:var(--fs-xl);font-weight:var(--fw-regular);height:25px;width:25px;display:flex;justify-content:center;align-items:center;background-color:var(--gray-400);opacity:1;z-index:1;border-radius:0 0 0 var(--border-radius);cursor:pointer}.image__clear img{height:1em;opacity:.5}.image__bg{--_size: 15%;position:absolute;top:calc(0% - var(--_size));left:calc(0% - var(--_size));height:calc(100% + var(--_size) * 2);width:calc(100% + var(--_size) * 2);object-fit:cover;filter:blur(25px);opacity:.7}.image__dropzone{cursor:pointer;display:flex;justify-content:center;align-items:center;height:100%;width:100%;flex-direction:column;transition:var(--transition)}.image__dropzone:after{content:"";position:absolute;opacity:0;top:0;left:0;z-index:1;display:block;height:100%;width:100%;background:radial-gradient(transparent,rgba(255,255,255,.04));transition:var(--transition)}.image__dropzone:hover:after{opacity:1}.image__dropzone:hover,.image__dropzone--is-drag{scale:1.1}.image__dropzone:hover:after,.image__dropzone--is-drag:after{opacity:1}.image__dropzone:before{content:"";position:absolute;z-index:1;pointer-events:none;top:0;left:0;display:block;height:105%;width:100%;background:linear-gradient(180deg,transparent,var(--gray-600) 55%)}.image__dropzone img{height:100px}.image__dropzone span{position:relative;z-index:1;width:155px;text-align:center;margin-top:-25px;margin-bottom:10px}.image__types{pointer-events:none;opacity:.8;position:absolute;top:10px;left:10px;display:flex;gap:8px}.image__type{text-transform:uppercase;line-height:1.8;font-size:var(--fs-s);font-weight:var(--fw-regular);border:2px solid var(--gray-400);border-radius:3px;padding:0 5px}.image__branding{position:absolute;bottom:0;display:flex;z-index:1;justify-content:center;align-items:center;width:100%;font-weight:var(--fw-regular);opacity:.8;padding-bottom:10px}.image__branding img{height:1.25em;margin-right:5px;transform:translateY(-1px)}.image--welcome{border:2px dashed var(--gray-400)}.image canvas{position:static;width:unset;height:unset;object-fit:none;cursor:crosshair;z-index:unset;box-shadow:0 0 100px #292c3940}.image [data-testid=image-color-pick-container]{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.image [data-testid=zoom-preview],.image [data-testid=color-preview]{display:none}.nav{display:flex;height:50px;background:var(--gray-400);border-radius:var(--border-radius);position:relative;z-index:2;overflow:hidden}.nav--drawer-open{border-radius:0 0 var(--border-radius) var(--border-radius)}.nav__option{position:relative;display:flex;justify-content:center;cursor:pointer;flex:1}.nav__option--container{display:flex;justify-content:center;align-items:center;height:100%;width:100%}.nav__option:before{content:"";display:block;position:absolute;bottom:0;height:3px;width:40%;background-color:var(--white-text);border-radius:10px 10px 0 0;opacity:0;transition:var(--transition)}.nav__option:not(.nav__option--active):hover:before{opacity:.2}.nav__option--active:before{opacity:1;width:70%}@media (min-width: 1000px){.nav{width:400px}.nav--drawer-open{border-radius:var(--border-radius) var(--border-radius) 0 0}}#tutorial{display:none}@media (min-width: 1000px){#tutorial{display:block;position:absolute;top:80px;right:150px;pointer-events:none}}.button{display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius);gap:10px;cursor:pointer;transition:var(--transition)}.button>span{display:flex;align-items:center;gap:10px}.button--wide{width:100%;background-color:var(--gray-600);height:45px}.button--wide img{height:1.15em}.button--wide:hover{scale:1.025;background-color:var(--gray-400)}.button--square{aspect-ratio:1;background-color:var(--gray-400)}.button--square:hover{scale:1.1;background-color:var(--gray-600)}.button--secondary{background-color:unset;opacity:.5}.button--secondary:hover{background-color:unset}.button--secondary:hover span{text-decoration:underline}.tippy-box[data-theme~=swwwatch]{background-color:var(--gray-600);text-align:center;font-size:var(--fs-r)}.tippy-box[data-theme~=swwwatch] span{display:block}.tippy-box[data-theme~=swwwatch] span:last-of-type{font-weight:var(--fw-regular);font-size:var(--fs-s);opacity:.5;transform:skew(-15deg);text-transform:initial}.tippy-box[data-theme~=swwwatch][data-placement^=top]>.tippy-arrow:before{border-top-color:var(--gray-600)}.tippy-box[data-theme~=swwwatch][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:var(--gray-600)}.tippy-box[data-theme~=swwwatch][data-placement^=left]>.tippy-arrow:before{border-left-color:var(--gray-600)}.tippy-box[data-theme~=swwwatch][data-placement^=right]>.tippy-arrow:before{border-right-color:var(--blue-300)}.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}.color-detail{display:flex;flex:1;border-radius:var(--border-radius);overflow:hidden}.color-detail>*{height:100%}.color-detail__wrapper{height:35px;display:flex;gap:10px}.color-detail__type,.color-detail__values{display:flex;align-items:center;justify-content:center}.color-detail__type{text-transform:uppercase;width:60px;background-color:var(--gray-600)}.color-detail__values{flex:1;background-color:var(--gray-400)}.color-detail__values span{text-align:center;flex:1}.color-detail__values span:not(:last-of-type){border-right:2px solid rgba(255,255,255,.1)}.toaster .toast{border-radius:var(--border-radius);background-color:var(--gray-400);font-weight:var(--fw-regular);color:var(--white-text);padding:10px 10px 10px 15px;max-width:100%}.toaster .toast__pretty{font-weight:var(--fw-semibold);color:var(--white)}.toaster .toast div[role=status]{margin:0;align-items:center}.toaster .toast img{height:1.25em;width:1.25em;margin-left:10px;opacity:.5;cursor:pointer}.color-shades{position:relative;height:60px;display:flex;align-items:center;justify-content:center;background:var(--gray-400);border-radius:var(--border-radius);overflow:hidden;outline:5px solid rgba(41,44,57,.08);outline-offset:-5px}.color-shades:hover>.color-shades__toggle{opacity:1}.color-shades__toggle{transition:var(--transition);cursor:pointer;position:absolute;z-index:1;opacity:0}.color-shades__gradient{position:absolute;height:100%;width:100%;top:0;left:0;outline:5px solid rgba(41,44,57,.08);outline-offset:-5px}.color-shades__shade{display:flex;justify-content:center;padding:10px 0;height:100%;flex:1;cursor:pointer}.color-shades__shade span{font-size:12px}.color-shades__shade--selected-color{flex:2.5;pointer-events:none}.color-shades__shade--align-top{align-items:flex-start}.color-shades__shade--align-bottom{align-items:flex-end}.drawer{display:grid;grid-template-columns:repeat(auto-fill,minmax(50px,1fr));padding:15px 15px 25px;gap:15px}.drawer--empty{gap:unset;display:flex;justify-content:center;align-items:center;flex-direction:column;height:250px}.drawer--empty img{height:100px;opacity:.5}.drawer--empty span{position:relative;text-align:center;z-index:1;max-width:250px;margin-top:-25px}.drawer--empty:before{content:"";position:absolute;z-index:1;pointer-events:none;top:0;left:0;display:block;height:100%;width:100%;background:linear-gradient(180deg,transparent,var(--gray-500) 70%)}@media (min-width: 1000px){.drawer--empty{height:350px}}.drawer--current-color{display:flex;flex-direction:column}.drawer--current-color .color-details{display:flex;flex-direction:column;gap:15px}.color-square{cursor:pointer;aspect-ratio:1;border-radius:var(--border-radius);outline:5px solid rgba(41,44,57,.08);outline-offset:-5px}.drawer--palette{display:flex;flex-direction:column;height:250px}.drawer--palette .color-shades{height:unset;flex:1}.palette{position:absolute;bottom:100%;right:100%;pointer-events:none;background-color:var(--gray-400);width:480px;border-radius:5px;overflow:hidden}.palette .color-shades{height:145px;border-radius:unset;outline:unset}.palette__footer{display:flex;align-items:center;height:100px;padding:0 15px;box-shadow:inset 0 4px 25px #00000014}.palette__branding{position:absolute;width:100%;bottom:4px;text-align:center}.palette__branding span{padding:6px 15px 10px;font-size:10px;background-color:var(--gray-400);border-radius:var(--border-radius) var(--border-radius) 0 0}#palette-canvas{position:absolute;bottom:100%}.overlay{display:flex;justify-content:center;align-items:center;top:0;left:0;right:0;bottom:0;position:fixed;z-index:2;height:100vh;width:100vw;background-color:#0009;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:10px}.overlay--open{z-index:9999}@media (min-width: 1000px){.overlay:empty{display:none}}.modal{min-width:340px;max-width:460px;background-color:var(--gray-500);border-radius:var(--border-radius);overflow:hidden}.modal__head{padding:15px;background:var(--gray-400);font-size:var(--fs-m)}.modal__body{padding:15px;display:flex;flex-direction:column;gap:15px}.modal__content{font-weight:var(--fw-regular);text-wrap:balance}.modal__controls{display:flex;gap:10px}.drawer__wrapper{position:absolute;border-radius:var(--border-radius) var(--border-radius) 0 0;bottom:60px;left:10px;right:10px;max-height:480px;z-index:2;background-color:var(--gray-500);overflow:auto}@media (min-width: 1000px){.drawer__wrapper{left:unset;top:60px;right:10px;width:400px;border-radius:0 0 var(--border-radius) var(--border-radius);max-height:360px;box-shadow:inset 0 5px 10px 2px #00000014}}:root{--fs-xxl: 22px;--fs-xl: 20px;--fs-l: 18px;--fs-m: 16px;--fs-r: 14px;--fs-s: 12px;--fw-regular: 400;--fw-semibold: 600;--white-text: rgba(255, 255, 255, .8);--white: #fff;--gray-600: #292c39;--gray-500: #41455a;--gray-400: #555b77;--border-radius: 5px;--transition: .1s cubic-bezier(.21, 1.02, .73, 1);font-family:Inter,sans-serif;line-height:1.5;font-size:var(--fs-r);font-weight:var(--fw-semibold);background-color:var(--gray-600);color:var(--white-text);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}*,*:before,*:after{box-sizing:border-box;-webkit-user-select:none;user-select:none}a,a:visited,a:active,a:link{color:currentColor;text-decoration:none;font-weight:var(--fw-semibold)}a:after{content:"🡥";margin-left:4px;display:inline-block;transition:var(--transition)}a:hover:after{transform:translateY(-2px)}body{margin:0;display:flex}body::-webkit-scrollbar{display:none}::-webkit-scrollbar{width:10px;background-color:transparent}::-webkit-scrollbar-thumb{background:var(--gray-400);border-radius:5px}::-webkit-scrollbar-thumb:hover{background:var(--gray-600)}