@charset "UTF-8";.mosha__toast{touch-action:none;display:flex;justify-content:space-between;position:fixed;min-height:64px;max-height:800px;box-sizing:border-box;overflow:hidden;padding:12px 8px;word-break:break-word;min-width:312px;max-width:480px;z-index:9999;width:-webkit-max-content;width:-moz-max-content;width:max-content;transition:top .3s ease-out .5s,bottom .3s ease-out .5s;border-radius:8px;box-shadow:0 1px 10px #0000001a,0 2px 15px #0000000d;margin:0 16px;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mosha__toast__content-wrapper{display:flex;align-items:center}.mosha__toast__content{font-family:sans-serif;line-height:20px;display:flex;flex-direction:column;color:#fff}.mosha__toast__content__text{margin-bottom:2px;font-size:16px;font-weight:700}.mosha__toast__content__description{font-size:14px;font-weight:400}.mosha__toast__slot-wrapper{width:100%}.mosha__toast__close-icon:before{font-size:20px;cursor:pointer;content:"×";color:#fff;transition:color .3s;font-weight:600;margin-left:10px;position:relative;top:-12px}.mosha__toast__close-icon:hover:before{color:gray}.mosha__toast__progress{transition:all linear .2s;position:absolute;z-index:9999;height:8px;background-color:#fff9;bottom:0;margin-left:-8px}.mosha__toast.success{background-color:#06d6a0}.mosha__toast.warning{background-color:#ffc43d}.mosha__toast.info{background-color:#1b9aaa}.mosha__toast.danger{background-color:#ef476f}.mosha__toast.default{background-color:#fff}.mosha__toast.default .mosha__toast__content{color:#616161}.mosha__toast.default .mosha__toast__close-icon:before{color:#616161}.mosha__toast.default .mosha__toast__close-icon:hover:before{color:#d0d4d4}.mosha__toast.default .mosha__toast__progress{background-image:linear-gradient(-225deg,#69eacb 0,#eaccf8 48%,#6654f1)}@media only screen and (max-width:475px){.mosha__toast{max-width:95.2%;left:0;right:0;margin:0 auto}}.mosha__icon{margin-right:16px}.mosha__bounceInRight-enter-active{-webkit-animation:bounceInRight .7s;animation:bounceInRight .7s}.mosha__bounceInRight-leave-active{-webkit-animation:bounceOutLeft .7s;animation:bounceOutLeft .7s}.mosha__bounceInLeft-enter-active{-webkit-animation:bounceInLeft .7s;animation:bounceInLeft .7s}.mosha__bounceInLeft-leave-active{-webkit-animation:bounceOutRight .7s;animation:bounceOutRight .7s}.mosha__bounceInDown-enter-active{-webkit-animation:bounceInDown .7s;animation:bounceInDown .7s}.mosha__bounceInDown-leave-active{-webkit-animation:bounceOutUp .7s;animation:bounceOutUp .7s}.mosha__bounceInUp-enter-active{-webkit-animation:bounceInUp .7s;animation:bounceInUp .7s}.mosha__bounceInUp-leave-active{-webkit-animation:bounceOutDown .7s;animation:bounceOutDown .7s}@-webkit-keyframes bounceInRight{60%,75%,90%,0%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(2000px,0,0)}60%{opacity:1;transform:translate3d(-25px,0,0)}75%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-5px,0,0)}to{transform:none}}@keyframes bounceInRight{60%,75%,90%,0%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(2000px,0,0)}60%{opacity:1;transform:translate3d(-25px,0,0)}75%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-5px,0,0)}to{transform:none}}@-webkit-keyframes bounceOutLeft{20%{opacity:1;transform:translate3d(-20px,0,0)}to{opacity:0;transform:translate3d(2000px,0,0)}}@keyframes bounceOutLeft{20%{opacity:1;transform:translate3d(-20px,0,0)}to{opacity:0;transform:translate3d(2000px,0,0)}}@-webkit-keyframes bounceInLeft{60%,75%,90%,0%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(-2000px,0,0)}60%{opacity:1;transform:translate3d(25px,0,0)}75%{transform:translate3d(-10px,0,0)}90%{transform:translate3d(5px,0,0)}to{transform:none}}@keyframes bounceInLeft{60%,75%,90%,0%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(-2000px,0,0)}60%{opacity:1;transform:translate3d(25px,0,0)}75%{transform:translate3d(-10px,0,0)}90%{transform:translate3d(5px,0,0)}to{transform:none}}@-webkit-keyframes bounceOutRight{20%{opacity:1;transform:translate3d(20px,0,0)}to{opacity:0;transform:translate3d(-2000px,0,0)}}@keyframes bounceOutRight{20%{opacity:1;transform:translate3d(20px,0,0)}to{opacity:0;transform:translate3d(-2000px,0,0)}}@-webkit-keyframes bounceInUp{60%,75%,90%,0%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,3000px,0)}60%{opacity:1;transform:translate3d(0,-20px,0)}75%{transform:translate3d(0,10px,0)}90%{transform:translate3d(0,-5px,0)}to{transform:translateZ(0)}}@keyframes bounceInUp{60%,75%,90%,0%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,3000px,0)}60%{opacity:1;transform:translate3d(0,-20px,0)}75%{transform:translate3d(0,10px,0)}90%{transform:translate3d(0,-5px,0)}to{transform:translateZ(0)}}@-webkit-keyframes bounceOutUp{20%{transform:translate3d(0,-10px,0)}40%,45%{opacity:1;transform:translate3d(0,20px,0)}to{opacity:0;transform:translate3d(0,-2000px,0)}}@keyframes bounceOutUp{20%{transform:translate3d(0,-10px,0)}40%,45%{opacity:1;transform:translate3d(0,20px,0)}to{opacity:0;transform:translate3d(0,-2000px,0)}}@-webkit-keyframes bounceInDown{60%,75%,90%,0%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,-3000px,0)}60%{opacity:1;transform:translate3d(0,25px,0)}75%{transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,5px,0)}to{transform:none}}@keyframes bounceInDown{60%,75%,90%,0%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,-3000px,0)}60%{opacity:1;transform:translate3d(0,25px,0)}75%{transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,5px,0)}to{transform:none}}@-webkit-keyframes bounceOutDown{20%{transform:translate3d(0,10px,0)}40%,45%{opacity:1;transform:translate3d(0,-20px,0)}to{opacity:0;transform:translate3d(0,2000px,0)}}@keyframes bounceOutDown{20%{transform:translate3d(0,10px,0)}40%,45%{opacity:1;transform:translate3d(0,-20px,0)}to{opacity:0;transform:translate3d(0,2000px,0)}}.mosha__slideInRight-enter-active{-webkit-animation:slideInRight .5s;animation:slideInRight .5s}.mosha__slideInRight-leave-active{-webkit-animation:slideOutRight .5s;animation:slideOutRight .5s}.mosha__slideInLeft-enter-active{-webkit-animation:slideInLeft .5s;animation:slideInLeft .5s}.mosha__slideInLeft-leave-active{-webkit-animation:slideOutLeft .5s;animation:slideOutLeft .5s}.mosha__slideInDown-enter-active{-webkit-animation:slideInDown .5s;animation:slideInDown .5s}.mosha__slideInDown-leave-active{-webkit-animation:slideOutUp .5s;animation:slideOutUp .5s}.mosha__slideInUp-enter-active{-webkit-animation:slideInUp .5s;animation:slideInUp .5s}.mosha__slideInUp-leave-active{-webkit-animation:slideOutDown .5s;animation:slideOutDown .5s}@-webkit-keyframes slideInRight{0%{transform:translate3d(110%,0,0);visibility:visible}to{transform:translateZ(0)}}@keyframes slideInRight{0%{transform:translate3d(110%,0,0);visibility:visible}to{transform:translateZ(0)}}@-webkit-keyframes slideOutLeft{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(-110%,0,0)}}@keyframes slideOutLeft{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(-110%,0,0)}}@-webkit-keyframes slideInLeft{0%{transform:translate3d(-110%,0,0);visibility:visible}to{transform:translateZ(0)}}@keyframes slideInLeft{0%{transform:translate3d(-110%,0,0);visibility:visible}to{transform:translateZ(0)}}@-webkit-keyframes slideOutRight{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(110%,0,0)}}@keyframes slideOutRight{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(110%,0,0)}}@-webkit-keyframes slideInUp{0%{transform:translate3d(0,110%,0);visibility:visible}to{transform:translateZ(0)}}@keyframes slideInUp{0%{transform:translate3d(0,110%,0);visibility:visible}to{transform:translateZ(0)}}@-webkit-keyframes slideInDown{0%{opacity:0;transform:translate3d(0,-120%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes slideInDown{0%{opacity:0;transform:translate3d(0,-120%,0)}to{opacity:1;transform:translateZ(0)}}@-webkit-keyframes slideOutDown{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(0,500px,0)}}@keyframes slideOutDown{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(0,500px,0)}}@-webkit-keyframes slideOutUp{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(0,-500px,0)}}@keyframes slideOutUp{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(0,-500px,0)}}.mosha__zoomIn-enter-active{-webkit-animation:zoomIn .5s;animation:zoomIn .5s}.mosha__zoomIn-leave-active{-webkit-animation:zoomOut .5s;animation:zoomOut .5s}@-webkit-keyframes zoomIn{0%{opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;transform:scale3d(.3,.3,.3)}to{opacity:0}}.mosha__fadeOutRight-leave-active{-webkit-animation:fadeOutRight .5s;animation:fadeOutRight .5s}.mosha__fadeOutLeft-leave-active{-webkit-animation:fadeOutLeft .5s;animation:fadeOutLeft .5s}@-webkit-keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;transform:translate3d(-100%,0,0)}}@-webkit-keyframes fadeOutRight{0%{opacity:1}to{opacity:0;transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}to{opacity:0;transform:translate3d(100%,0,0)}}.reset-highlight[data-v-70be5058]{border-color:var(--clr-accent, #7c6af7);border-width:2px}*,*:before,*:after{box-sizing:border-box;text-rendering:optimizelegibility}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}h1,h2{font-family:JetBrains Mono,monospace}ul,ol{list-style:""}@media (prefers-reduced-motion: no-preference){html:focus-within{scroll-behavior:smooth}}body{min-block-size:fit-content;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;line-height:1.5;color:currentcolor}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-inline-size:100%;display:block}input,button,textarea,select{font:inherit}.mosha__toast{min-block-size:44px!important;padding:8px 10px!important;min-inline-size:260px!important}.mosha__toast__content{font-family:Montserrat,sans-serif}.mosha__toast__content__text{font-size:.75rem!important;font-weight:500!important}.mosha__toast__content__description{font-size:.7rem!important}.mosha__toast__close-icon:before{font-size:18px!important;color:color-mix(in srgb,currentcolor 65%,transparent 35%)!important}.mosha__toast__close-icon:hover:before{color:currentcolor!important}.mosha__toast.success{background-color:var(--clr-accent, #14b8a6)!important;color:var(--clr-dark, #52525b)!important}.mosha__toast.danger{background-color:var(--clr-main, #18181b)!important;color:var(--clr-light, #f4f4f5)!important}.mosha__toast.warning{background-color:var(--clr-secondary, #fb923c)!important;color:var(--clr-dark, #52525b)!important}.mosha__toast.info{background-color:var(--clr-dark, #52525b)!important;color:var(--clr-light, #f4f4f5)!important}@font-face{font-family:Montserrat;font-style:normal;font-weight:100 700;font-display:swap;src:url(/fonts/montserrat-latin.woff2) format("woff2")}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/jetbrains-mono-latin-300.woff2) format("woff2")}:root{--clr-main: #062328;--clr-secondary: #fb923c;--clr-light: #b9edf8;--clr-accent: #3bcced;--clr-dark: #0f0f0f;--text-color: #f4f4f5;--slot-size: 96px;--mini-slot-size: 28px;--cubic-bezier-transition: .2s cubic-bezier(.175, .885, .32, 1.275);--base-radius: .5rem;--sm-radius: .2rem;--bd-lg: 1rem;--mb-lg: 1rem;--mb-md: .5rem;--mb-sm: .25rem}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(0%);white-space:nowrap;border:0}.centered{text-align:center}.collapse{cursor:pointer;font-size:1rem;display:inline-flex;flex-wrap:nowrap;align-items:center}.collapse:hover{color:var(--clr-main, #18181b)}.chevron-wrapper{display:inline-block;transform:rotate(0)}@media (prefers-reduced-motion: no-preference){.chevron-wrapper{transition:transform .15s ease}}.chevron-wrapper.expanded{transform:rotate(90deg)}.description{margin-block-end:var(--mb-sm, .5rem)}.fa-window-minimize{margin-block-end:5px}html{background-color:var(--clr-main, #18181b)}:focus-visible{outline:2px solid var(--clr-accent, #14b8a6);outline-offset:2px}body{font-family:Montserrat,sans-serif;-webkit-user-select:none;user-select:none}main{margin-block-start:56px;padding:12px 16px}h1,h2{color:var(--clr-light, #f4f4f5)}h2{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;margin-block-end:var(--mb-sm, .25rem);display:flex;flex-wrap:nowrap;align-items:center}@keyframes tooltip-fade{0%{opacity:0}4%{opacity:1}90%{opacity:1}to{opacity:0}}[data-tooltip]{position:relative}[data-tooltip]:after{content:attr(data-tooltip);position:absolute;inset-block-start:calc(100% + 6px);inset-inline-start:50%;transform:translate(-50%) translateY(-4px);white-space:nowrap;background-color:color-mix(in srgb,var(--clr-dark, #52525b) 90%,var(--clr-main, #18181b) 10%);color:var(--clr-light, #f4f4f5);border:1px solid color-mix(in srgb,var(--clr-dark, #52525b) 50%,transparent 50%);border-radius:4px;padding:4px 8px;font-size:.65rem;font-weight:400;letter-spacing:0;text-transform:none;font-family:JetBrains Mono,monospace;opacity:0;pointer-events:none;z-index:100}@media (prefers-reduced-motion: no-preference){[data-tooltip]:after{transition:transform .2s ease}}[data-tooltip]:hover:after{opacity:1;transform:translate(-50%) translateY(0)}@media (prefers-reduced-motion: no-preference){[data-tooltip]:hover:after{opacity:0;animation:tooltip-fade 5s ease forwards;animation-delay:1.5s}}@supports (anchor-scope: --a){[data-tooltip]{anchor-name:--tooltip;anchor-scope:--tooltip}[data-tooltip]:after{position:fixed;position-anchor:--tooltip;inset:unset;transform:none;position-area:block-end center;margin-block-start:6px;position-try-fallbacks:flip-inline,flip-block}[data-tooltip]:hover:after{transform:none}.section-info:after{position-area:center inline-end;margin-block-start:-10px;margin-inline-start:8px;position-try-fallbacks:flip-inline}.section-info:hover:after{transform:none}}.main-button{font-size:.7rem;font-weight:600;cursor:pointer;background-color:var(--clr-accent, #14b8a6);color:var(--clr-main, #18181b);border:1px solid var(--clr-accent, #14b8a6);border-radius:4px;flex:1;padding:4px 10px;display:inline-flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:5px}@media (prefers-reduced-motion: no-preference){.main-button{transition:background-color var(--cubic-bezier-transition, .2s ease),border-color var(--cubic-bezier-transition, .2s ease),color var(--cubic-bezier-transition, .2s ease)}}.main-button:hover{background-color:var(--clr-accent, #14b8a6);border-color:var(--clr-accent, #14b8a6);color:var(--clr-light, #f4f4f5)}.main-button:active{color:var(--clr-light, #f4f4f5)}.main-button:focus-visible{outline:2px solid var(--clr-light, #f4f4f5);outline-offset:2px}.secondary-button{font-size:.7rem;font-weight:600;cursor:pointer;background-color:transparent;color:var(--text-color, #a1a1aa);border:1px solid color-mix(in srgb,var(--clr-dark, #52525b) 60%,transparent 40%);border-radius:4px;padding:4px 10px;box-shadow:0 0 0 0 transparent;display:inline-flex;flex-wrap:nowrap;align-items:center;gap:5px}@media (prefers-reduced-motion: no-preference){.secondary-button{transition:border-color var(--cubic-bezier-transition, .2s ease),color var(--cubic-bezier-transition, .2s ease),box-shadow var(--cubic-bezier-transition, .2s ease)}}.secondary-button:hover{border-color:var(--clr-accent, #14b8a6);color:var(--clr-light, #f4f4f5)}.secondary-button:active{color:var(--clr-light, #f4f4f5)}.secondary-button:focus-visible{outline:2px solid var(--clr-accent, #14b8a6);outline-offset:2px}.palette-pane,.mini-slots-pane,.saved-palette-pane{background-color:color-mix(in srgb,var(--clr-main, #18181b) 70%,var(--clr-dark, #52525b) 30%);border:1px solid color-mix(in srgb,var(--clr-dark, #52525b) 40%,transparent 60%);border-radius:8px;padding:16px 12px;margin-block-end:var(--mb-lg, 1rem)}.saved-palette-pane{overflow:hidden}.panel-header{color:var(--text-color, #a1a1aa);margin-block-end:var(--mb-sm, .25rem)}nav{position:fixed;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:44px;z-index:200;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;padding:4px 16px 10px;background-color:color-mix(in srgb,var(--clr-main, #062328) 95%,var(--clr-accent, #3bcced) 5%);color:var(--text-color, #a1a1aa);border-block-end:1px solid color-mix(in srgb,var(--clr-light, #52525b) 60%,transparent 40%)}nav .brand{font-family:JetBrains Mono,monospace;font-size:1rem;font-weight:600}nav .brand #logo{display:inline-block;inline-size:18px;block-size:18px;filter:invert(.72);margin-inline-end:.3rem;margin-block-end:-2px}nav .brand .title{font-size:1.1rem;color:var(--clr-light, #f4f4f5);text-shadow:none}nav .nav-links ul{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}nav .nav-links ul li{color:var(--text-color, #a1a1aa);cursor:pointer;border-radius:0;font-size:.8rem}nav .nav-links ul li a{color:inherit}nav .nav-links ul li .avatar-icon{inline-size:1em;block-size:1em;border-radius:50%;object-fit:cover;display:block}@media (prefers-reduced-motion: no-preference){nav .nav-links ul li{transition:color var(--cubic-bezier-transition, .2s ease),border-radius var(--cubic-bezier-transition, .2s ease)}}nav .nav-links ul li:hover{color:var(--clr-accent, #14b8a6)}nav .nav-links ul li:active{color:var(--clr-light, #f4f4f5)}nav .nav-links ul li:focus-visible{outline:3px solid var(--clr-light, #f4f4f5);outline-offset:4px;border-radius:2px}nav .nav-links ul li.theme-toggle-disabled{opacity:.4;cursor:default}@media (width >= 461px) and (width <= 768px){nav{padding:0 12px}nav #logo{inline-size:16px;block-size:16px}nav .brand .title{font-size:.95rem}nav .nav-links ul{gap:.75rem;font-size:.75rem}}@media (width <= 460px){nav{padding:0 8px}nav #logo{inline-size:12px;block-size:12px;margin-inline-end:.1rem;margin-block-end:0}nav .brand .title{font-size:.85rem}nav .nav-links ul{gap:.5rem;font-size:.7rem}}.utility-buttons{margin-block-end:var(--mb-lg, 1rem);display:flex;flex-wrap:wrap;gap:6px;padding:6px 12px;background-color:color-mix(in srgb,var(--clr-main, #18181b) 70%,var(--clr-dark, #52525b) 30%);border:1px solid color-mix(in srgb,var(--clr-dark, #52525b) 40%,transparent 60%);border-radius:6px}.utility-buttons .main-button{flex:0 0 auto}.main-color-bar{inline-size:100%;block-size:100%;margin-block-end:var(--mb-lg, 1rem);padding:6px 12px;color:var(--text-color, #a1a1aa);background-color:color-mix(in srgb,var(--clr-main, #18181b) 70%,var(--clr-dark, #52525b) 30%);border-radius:6px;border:1px solid color-mix(in srgb,var(--clr-dark, #52525b) 40%,transparent 60%);display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:8px}.main-color-bar .main-button{min-inline-size:fit-content;padding-inline:12px;flex:0 0 auto}.main-color-bar .inputs-wrapper{display:flex;flex-wrap:nowrap;gap:8px;inline-size:100%}.main-color-bar .inputs-wrapper>form{flex:1}.main-color-bar .input-wrapper{display:flex;flex-wrap:nowrap;flex:1;inline-size:100%;background:color-mix(in srgb,var(--clr-light, #f4f4f5) 10%,transparent 90%);border-radius:4px;border:1px solid color-mix(in srgb,var(--clr-dark, #52525b) 50%,transparent 50%);padding-inline-end:3px;align-items:center}.main-color-bar .color-form{flex:0 0 auto;inline-size:140px}.main-color-bar .input-label{font-size:.6rem;font-weight:700;letter-spacing:.06em;color:var(--text-color, #a1a1aa);opacity:.6;padding-inline:6px;white-space:nowrap;flex-shrink:0;border-inline-end:1px solid color-mix(in srgb,var(--clr-dark, #52525b) 50%,transparent 50%);padding-block:4px;cursor:pointer}.main-color-bar .input-wrapper input{padding-inline:12px 6px;background:transparent;border:0;inline-size:100%;min-inline-size:50px;color:var(--text-color, #d1d5db);font-size:.75rem;letter-spacing:.04em}.main-color-bar .input-wrapper input:focus-visible{outline:none}.main-color-bar .input-wrapper:focus-within{border-color:var(--clr-accent, #0d9488);outline:2px solid var(--clr-accent, #0d9488);outline-offset:0}.main-color-bar .input-wrapper button{padding:3px;border:0;background:transparent;color:var(--clr-accent, #14b8a6);font-size:.75rem;opacity:0;pointer-events:none}.main-color-bar .input-wrapper button:hover{color:var(--clr-accent, #0d9488)}.main-color-bar .input-wrapper input:focus+button,.main-color-bar .input-wrapper input:focus-visible+button{opacity:.25}.main-color-bar .input-wrapper input:focus:invalid+button,.main-color-bar .input-wrapper input:focus-visible:invalid+button{opacity:.25;pointer-events:none}.main-color-bar .input-wrapper input:not(:placeholder-shown):valid+button{opacity:1;pointer-events:auto;cursor:pointer}@media (width >= 769px) and (width <= 1024px){.main-color-bar{flex-wrap:wrap;gap:1rem}.main-color-bar .main-button{order:-2}.main-color-bar .inputs-wrapper{gap:1rem}.main-color-bar form:last-of-type{order:-1;flex:1}.main-color-bar form:last-of-type input{inline-size:100%}}@media (width <= 768px){.main-color-bar{flex-direction:column}.main-color-bar .main-button,.main-color-bar form,.main-color-bar form input,.main-color-bar .color-form{inline-size:100%}.main-color-bar .inputs-wrapper{flex-direction:column}}.palette-slots{display:grid;justify-content:center;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}.palette-slot{display:flex;flex-direction:column;align-items:center;justify-content:center}.palette-slot-label{color:var(--text-color, #a1a1aa);font-size:.75rem;padding:2px;max-inline-size:100%;margin-block-end:.5rem}.palette-slot-label input{font-family:JetBrains Mono,monospace;text-align:center;border:1px solid color-mix(in srgb,var(--clr-light, #f4f4f5) 20%,transparent 80%);inline-size:90%;border-radius:3px;cursor:text;font-size:.75rem;background:transparent;color:var(--text-color, #a1a1aa)}.palette-slot-label:hover input{background:color-mix(in srgb,var(--clr-light, #f4f4f5) 10%,transparent 90%)}.palette-slot-label.icon{color:var(--text-color, #a1a1aa)}.palette-slot-color{inline-size:calc(var(--slot-size, 96px) + 16px);block-size:var(--slot-size, 96px);border:1px solid rgb(0 0 0 / 20%);border-radius:6px;background-color:var(--clr-light, #f4f4f5);box-shadow:0 1px 3px #00000026;display:flex;gap:2px;flex-direction:column;justify-content:center;align-items:center;font-size:.65rem;line-height:1rem;font-weight:600;letter-spacing:.5px;margin-block-end:var(--mb-sm, .25rem);position:relative}.format-toggle{font-size:.55rem;padding:1px 4px;border:1px solid color-mix(in srgb,var(--clr-dark, #52525b) 60%,transparent 40%);border-radius:3px;background:color-mix(in srgb,var(--clr-main, #18181b) 60%,transparent 40%);cursor:pointer;margin-block:2px 4px;letter-spacing:.3px;font-weight:600;text-transform:uppercase}@media (prefers-reduced-motion: no-preference){.format-toggle{transition:background-color .15s ease,border-color .15s ease,color .15s ease}}.format-toggle:hover{background:color-mix(in srgb,var(--clr-main, #18181b) 80%,transparent 20%);border-color:var(--clr-accent, #14b8a6);color:var(--clr-accent, #14b8a6)}.palette-slot-controls{padding:4px 6px;background-color:color-mix(in srgb,var(--clr-main, #18181b) 80%,var(--clr-dark, #52525b) 20%);border-radius:4px}.palette-slot-controls fieldset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:2px}.palette-slot-control{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center}.palette-slot-control label{color:var(--text-color, #a1a1aa);font-size:.65rem;font-weight:700;letter-spacing:.5px;margin-block-end:0}.palette-slot-controls input[type=range]{max-inline-size:75%;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;cursor:pointer;display:flex;flex-wrap:wrap;block-size:14px}.palette-slot-controls input[type=range]:focus-visible{box-shadow:none;outline:none}.palette-slot-controls input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--clr-secondary, #5eead4) var(--fill-percent, 0%),color-mix(in srgb,var(--clr-dark, #52525b) 60%,transparent 40%) var(--fill-percent, 0%));content:"";block-size:3px;pointer-events:none;border-radius:2px}.palette-slot-controls input[type=range]::-webkit-slider-thumb{block-size:10px;inline-size:18px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--clr-light, #f4f4f5);border-radius:6px;margin-block-start:-4px;border:1px solid var(--clr-dark, #52525b)}.palette-slot-controls input[type=range]::-moz-range-track{inline-size:240px;block-size:3px;background:color-mix(in srgb,var(--clr-dark, #52525b) 60%,transparent 40%);border-radius:2px}.palette-slot-controls input[type=range]::-moz-range-thumb{block-size:10px;inline-size:18px;background:var(--clr-light, #f4f4f5);border-radius:6px;border:1px solid var(--clr-dark, #52525b);position:relative}.palette-slot-controls input[type=range]::-moz-range-progress{block-size:3px;background:var(--clr-secondary, #5eead4);border:0;margin-block-start:0}.palette-slot-controls input[type=range]::-ms-track{background:transparent;border:0;border-color:transparent;border-radius:0;color:transparent;block-size:2px;margin-block-start:10px;inline-size:240px}.palette-slot-controls input[type=range]::-ms-thumb{block-size:10px;inline-size:18px;background:#fff;border-radius:6px;border:1px solid var(--clr-accent, #0d9488)}.palette-slot-controls input[type=range]::-ms-fill-lower{background:var(--clr-light, #f4f4f5);border-radius:0}.palette-slot-controls input[type=range]::-ms-fill-upper{background:var(--clr-light, #f4f4f5);border-radius:0}.palette-slot-controls input[type=range]::-ms-tooltip{display:none}.mini-slots{display:grid;grid-template-columns:repeat(auto-fill,var(--mini-slot-size, 28px));gap:6px;justify-content:start}.mini-slot{inline-size:var(--mini-slot-size, 28px);block-size:var(--mini-slot-size, 28px);border:1px solid rgb(0 0 0 / 20%);border-radius:4px;cursor:pointer;box-shadow:0 1px 2px #0003;inset-block-start:0}@media (prefers-reduced-motion: no-preference){.mini-slot{transition:inset-block-start .12s ease,box-shadow .12s ease}}.mini-slot:hover{position:relative;z-index:10}@media (prefers-reduced-motion: no-preference){.mini-slot:hover{inset-block-start:-2px;box-shadow:0 2px 6px color-mix(in srgb,var(--clr-light, #f4f4f5) 30%,transparent)}}.mini-slot:active{box-shadow:none}.mini-slot:focus-visible{outline:3px solid var(--clr-accent, #0d9488);outline-offset:3px}.mini-slot-copied{outline:var(--clr-secondary, #5eead4) solid 2px;outline-offset:2px}.saved-palettes-scroll{max-block-size:200px;overflow-block:auto;overscroll-behavior:contain;scrollbar-gutter:auto}.saved-palettes{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px}.saved-palette{border:1px solid color-mix(in srgb,var(--clr-dark, #52525b) 30%,transparent 70%);border-radius:3px;padding:6px;background-color:color-mix(in srgb,var(--clr-main, #18181b) 80%,var(--clr-dark, #52525b) 20%);color:var(--text-color, #a1a1aa)}@media (prefers-reduced-motion: no-preference){.saved-palette{transition:background-color .3s ease-in-out,border-color .3s ease-in-out}}.saved-palette:hover{cursor:pointer;background-color:color-mix(in srgb,var(--clr-dark, #52525b) 40%,var(--clr-main, #18181b) 60%);border-color:var(--clr-secondary, #5eead4)}.saved-palette-name{font-size:.75rem;font-weight:500;color:var(--text-color, #a1a1aa);margin-block-end:4px}.saved-palette-footer{display:flex;flex-wrap:nowrap;align-items:flex-end;justify-content:flex-start;gap:12px}.saved-palette-footer [data-testid=delete-palette-trigger]{font-size:.8rem;line-height:1;cursor:pointer;color:var(--text-color, #a1a1aa)}@media (prefers-reduced-motion: no-preference){.saved-palette-footer [data-testid=delete-palette-trigger]{transition:color .15s ease}}.saved-palette-footer [data-testid=delete-palette-trigger]:hover{color:var(--clr-accent, #14b8a6)}.saved-palette-colors{display:flex;flex-wrap:nowrap;gap:6px}.saved-palette-color{inline-size:28px;block-size:28px;border:1px solid rgb(0 0 0 / 20%);border-radius:3px}@media (width <= 420px){.saved-palette-color{inline-size:22px;block-size:22px}}.saved-palette:has([data-testid=delete-palette-trigger]:hover):after{animation:none;opacity:0}.section-info{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;inline-size:14px;block-size:14px;border-radius:50%;border:1px solid color-mix(in srgb,var(--clr-dark, #52525b) 60%,transparent 40%);font-size:.55rem;font-weight:700;line-height:1;padding-inline-start:1px;cursor:default;margin-inline-start:8px;color:var(--text-color, #a1a1aa);opacity:.8}.section-info:after{background-color:color-mix(in srgb,var(--clr-main, #18181b) 90%,var(--clr-dark, #52525b) 10%)}@supports not (anchor-scope: --a){{inset-inline-start:calc(100% + 8px);inset-block-start:50%;transform:translateY(calc(-50% - 8px)) translate(-6px)}}.section-info:hover{opacity:1;border-color:var(--clr-accent, #14b8a6);color:var(--clr-accent, #14b8a6)}.section-info:hover:after{opacity:1;transition-delay:1.5s}@supports not (anchor-scope: --a){{transform:translateY(calc(-50% - 6px)) translate(0)}}.instructions{margin:0;color:var(--clr-light, #f4f4f5);background:var(--clr-accent, #404f4c);position:absolute}.instructions p{text-align:start;padding:10px 30px;margin:0;font-size:.8rem;font-weight:400}.instructions strong{color:var(--clr-accent, #14b8a6);font-weight:600}@media (width <= 500px){.instructions p{padding:5px;font-size:.65rem;font-weight:400}}@media (width >= 501px) and (width <= 900px){.instructions p{padding:5px 20px;font-size:.75rem;font-weight:400}}.modal-export{min-inline-size:480px}.modal-export .modal-body{inline-size:100%}.modal-export .modal-buttons{display:flex;flex-wrap:nowrap;gap:4px;justify-content:center}.modal-export .modal-buttons [data-testid=syntax-toggle]{inline-size:calc(4ch + 22px);text-align:center}.modal-export .modal-code{border:1px solid var(--clr-main, #404f4c);text-align:start;padding:1rem;background-color:var(--clr-main, #404f4c);margin-block-start:1.5rem;-webkit-user-select:all;user-select:all;cursor:pointer}.modal-export .modal-code p{font-size:.8rem;line-height:1.4rem}.modal-export .modal-code-info{text-align:center;color:var(--clr-light, #f4f4f5);margin-block-end:.3rem;font-weight:600}.modal-export .modal-footer{justify-self:start;align-content:center}.delete-modal .delete-modal-footer{display:flex;flex-wrap:wrap;gap:.5rem}.delete-modal .delete-modal-footer button{flex:1;min-block-size:2.25rem;padding-block:.4rem;box-sizing:border-box}.modal-save .modal-input{margin:var(--mb-lg, 1rem)}.modal-save .modal-input input{background:color-mix(in srgb,var(--clr-light, #f4f4f5) 10%,transparent 90%);border:1px solid color-mix(in srgb,var(--clr-dark, #52525b) 50%,transparent 50%);border-radius:4px;color:var(--text-color, #d1d5db);font-size:.75rem;letter-spacing:.04em;padding:6px 12px;inline-size:100%;box-sizing:border-box;font-family:inherit}.modal-save .modal-input input:focus-visible{outline:none;border-color:var(--clr-accent, #0d9488);box-shadow:0 0 0 2px var(--clr-accent, #0d9488)}.modal-save .modal-input input::placeholder{color:var(--text-color, #d1d5db);opacity:.4}.modal-save .modal-input-invalid{outline:var(--clr-accent, #14b8a6) solid 5px}.modal-save .modal-footer button{margin-inline-end:2px;padding:4px 8px}.modal-mask{position:fixed;z-index:9998;top:0;right:0;bottom:0;left:0;background-color:#000000a6;display:flex;flex-wrap:wrap;justify-content:center;align-items:center}.modal-wrapper{display:contents}.modal-container{display:grid;place-items:center;inline-size:100vw;inline-size:max-content;max-inline-size:55%;margin:0 auto;padding:20px 30px;background-color:color-mix(in srgb,var(--clr-main, #18181b) 85%,var(--clr-dark, #52525b) 15%);color:var(--clr-light, #f4f4f5);border-radius:2px;box-shadow:0 2px 8px #00000054;font-family:JetBrains Mono,monospace}.modal-header{inline-size:100%;border-block-end:1px solid var(--clr-main, #404f4c)}.modal-header h3{font-size:1.3rem;margin-block-start:0;color:var(--clr-light, #f4f4f5)}.modal-body{margin:20px auto;text-align:center}.footer-msg{font-size:.9rem;color:var(--text-color, #b8a886);margin-inline-start:1rem}.footer-msg>*{font-size:1.5rem;margin-inline-end:.4rem;color:var(--clr-secondary, #5eead4);font-weight:900}@media (width <= 400px){.modal-container{max-inline-size:90vw;padding:5px 10px}}@media (width >= 401px) and (width <= 640px){.modal-container{max-inline-size:90vw}}@media (width >= 641px) and (width <= 900px){.modal-container{max-inline-size:70%}}.modal-enter-active,.modal-leave-active{opacity:1;transform:translate(0)}.modal-enter-from,.modal-leave-to{opacity:0}@media (prefers-reduced-motion: no-preference){.modal-enter-active,.modal-leave-active{transition:opacity .5s ease,transform .3s ease-out}.modal-enter-from,.modal-leave-to{transform:translate(-100%)}}[data-theme=light]{--clr-main: #f9f9fb;--clr-secondary: #555f91;--clr-accent: #d4793a;--clr-light: #dce6f5;--clr-dark: #262a40;--text-color: #262a40}[data-theme=light] h1,[data-theme=light] h2{color:var(--clr-dark, #262a40)}[data-theme=light] nav #logo{filter:invert(.15)}[data-theme=light] nav .title{color:var(--clr-dark, #262a40)}[data-theme=light] nav li:active{color:var(--clr-dark, #262a40)}[data-theme=light] nav li:focus-visible{outline-color:var(--clr-dark, #262a40)}[data-theme=light] .collapse:hover,[data-theme=light] .secondary-button:hover,[data-theme=light] .secondary-button:active,[data-theme=light] .main-button:hover,[data-theme=light] .main-button:active{color:var(--clr-dark, #262a40)}[data-theme=light] .section-info:after{color:var(--clr-dark, #262a40)}[data-theme=light] .modal-container,[data-theme=light] .modal-header h3,[data-theme=light] .modal-code-info{color:var(--clr-dark, #262a40)}