*,::after,::before{box-sizing:border-box}:root{--w:#ffffff;--s-24:#f6f6f6;--s-23:#ededed;--s-22:#e4e4e4;--s-21:#dbdbdb;--s-20:#d2d2d2;--s-19:#c9c9c9;--s-18:#c0c0c0;--s-17:#b7b7b7;--s-16:#aeaeae;--s-15:#a5a5a5;--s-14:#9c9c9c;--s-13:#939393;--s-12:#8a8a8a;--s-11:#818181;--s-10:#787878;--s-9:#6f6f6f;--s-8:#666666;--s-7:#5d5d5d;--s-6:#545454;--s-5:#4b4b4b;--s-4:#424242;--s-3:#393939;--s-2:#303030;--s-1:#272727;--s-0:#1e1e1e;--s-00:#141414;--s-000:#0A0A0A;--b:#000000;--bg-1:#ffffff;--bg-0:#f6f6f6;--loadbar-bg:#ededed;--text-dim:#9c9c9c;--text:#666666;--text-active:#1e1e1e;--input-bg:#ffffff;--btn-hover:#f6f6f6;--border:#e4e4e4;--border-active:#1e1e1e}:root.dark{--w:#000000;--b:#ffffff;--bg-1:#272727;--bg-0:#141414;--loadbar-bg:#0A0A0A;--text-dim:#8a8a8a;--text:#9c9c9c;--text-active:#f6f6f6;--input-bg:#141414;--btn-hover:#303030;--border:#6f6f6f;--border-active:#f6f6f6}::selection{color:var(--border-active);background-color:var(--border)}@font-face{font-family:Montserrat;font-style:normal;font-weight:400;src:local(''),url('../fonts/montserrat-v23-latin-regular.woff2') format('woff2'),url('../fonts/montserrat-v23-latin-regular.woff') format('woff')}@font-face{font-family:Montserrat;font-style:normal;font-weight:500;src:local(''),url('../fonts/montserrat-v23-latin-500.woff2') format('woff2'),url('../fonts/montserrat-v23-latin-500.woff') format('woff')}@font-face{font-family:Montserrat;font-style:normal;font-weight:600;src:local(''),url('../fonts/montserrat-v23-latin-600.woff2') format('woff2'),url('../fonts/montserrat-v23-latin-600.woff') format('woff')}html{font-size:12px}body{margin:0;font-family:Montserrat,sans-serif;font-weight:400;overflow-x:hidden;background-color:var(--bg-0);transition:background-color .2s ease}#loading-cont{display:flex;align-items:center;justify-content:center;position:absolute;top:0;left:0;width:100%;height:100vh;background:var(--bg-0);visibility:hidden;opacity:0;z-index:50;transition:.2s ease}#loading-cont.preload{visibility:visible;opacity:1}#loading-bar{position:relative;width:75px;height:4px;border-radius:2px;background-color:var(--loadbar-bg);overflow:hidden}#loading-bar::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--text-active);transform:translateX(-100%);transition:transform ease-out;animation-duration:2s;animation-name:animation;animation-iteration-count:infinite}@keyframes animation{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}.rel{position:relative}.abs{position:absolute}.mar-5{margin-block:5rem}.mar-4{margin-block:4rem}.mar-3{margin-block:3rem}.mar-2{margin-block:2rem}.mar-1{margin-block:1rem}.mar-0{margin-block:0.5rem}.pad-5{padding:5rem}.pad-4{padding:4rem}.pad-3{padding:3rem}.pad-2{padding:2rem}.pad-1{padding:1rem}.pad-0{padding:.5rem}.gap-5{gap:5rem}.gap-4{gap:4rem}.gap-3{gap:3rem}.gap-2{gap:2rem}.gap-1{gap:1rem}.gap-0{gap:.5rem}.flx{display:flex}.flx.cen-h{justify-content:center}.flx.cen-v{align-items:center}.flx.start{justify-content:flex-start}.flx.end{justify-content:flex-end}.flx.around{justify-content:space-around}.flx.between{justify-content:space-between}.flx.stretch{justify-content:stretch}.flx-c{display:flex;flex-direction:column}.flx-c.cen-v{justify-content:center}.flx-c.cen-h{align-items:center}.flx-c.start{align-items:flex-start}.flx-c.end{align-items:flex-end}.flx-c.around{align-items:space-around}.flx-c.between{align-items:space-between}.flx-c.stretch{align-items:stretch}.cen-f{justify-content:center;align-items:center}.wrap{flex-wrap:wrap}h1,h2,h3,h4,h5{margin-block:0}p{font-size:1.2rem;line-height:1.5em}.fs-5{font-size:4rem}.fs-4{font-size:3rem}.fs-3{font-size:2.5rem}.fs-2{font-size:2rem}.fs-1{font-size:1.2rem}.fs-0{font-size:1rem}.fw-5{font-weight:800}.fw-4{font-weight:700}.fw-3{font-weight:600}.fw-2{font-weight:500}.fw-1{font-weight:400}.fw-0{font-weight:300}.fc-brand{color:var()}.fc-body{color:var()}.fc-low{color:var()}.fc-disabled{color:var()}.fc-link{color:var()}.align-l{text-align:left}.align-c{text-align:center}.align-r{text-align:right}a{color:inherit;text-decoration:none}.link{color:var(--b);font-weight:600;box-shadow:inset 0 -.2em 0 var(--gold-3);transition:box-shadow .2s ease}.link:focus-visible,.link:hover{-webkit-tap-highlight-color:transparent;font-weight:600;box-shadow:inset 0 -1.4em 0 var(--gold-3);-ms-touch-action:manipulation;touch-action:manipulation}input[type=number]{margin:0;padding:.5rem;font-family:Montserrat,sans-serif;font-size:1rem;text-align:center;color:var(--text-active);border:1px solid var(--border);border-radius:.25rem;-moz-appearance:textfield;appearance:textfield;background-color:var(--input-bg)}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{margin:0;-webkit-appearance:none}input[type=text]{margin:0;padding:1rem;font-family:Montserrat,sans-serif;font-size:1rem;color:var(--text-active);border:1px solid var(--border);border-radius:.25rem;background-color:var(--input-bg)}input[type=number]:hover,input[type=text]:hover{border:1px solid var(--border);outline:0}input[type=number]:focus-visible,input[type=text]:focus-visible{-webkit-tap-highlight-color:transparent;border:1px solid var(--border-active);outline:1px solid var(--border-active);-ms-touch-action:manipulation;touch-action:manipulation}label{font-size:.9rem;font-weight:500;color:var(--text-active)}button{cursor:pointer;display:inline-block;margin:0;padding:1rem 2rem;font-family:Montserrat,sans-serif;font-size:1rem;font-weight:600;text-align:center;text-decoration:none;border:none;border-radius:.25rem;background:inherit;-webkit-appearance:none;-moz-appearance:none}button:hover{-webkit-tap-highlight-color:transparent;-ms-touch-action:manipulation;touch-action:manipulation}button:focus-visible{-webkit-tap-highlight-color:transparent;color:var(--text-active);background:var(--btn-hover);outline:2px solid var(--border-active);-ms-touch-action:manipulation;touch-action:manipulation}button:active{-webkit-tap-highlight-color:transparent;color:var(--text-active);background:var(--btn-hover);-ms-touch-action:manipulation;touch-action:manipulation}.btn-disabled{cursor:default;pointer-events:none;color:#d4d7d8;border:1px solid #f4f7f8;background-color:#f4f7f8}.disable-scroll{height:100%;overflow:hidden}#page-container{display:flex;flex-direction:column;padding:0;width:100%;min-height:100vh;height:100%;visibility:visible}#page-container.preload{visibility:hidden}#menu{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:0 2rem;width:100%;height:60px;background-color:var(--bg-1);transition:transform .2s ease}#menu-left{display:flex;align-items:center;justify-content:flex-start;gap:1rem;padding-right:1rem;width:auto;height:100%}#logo-cont{display:flex;align-items:center;justify-content:flex-start;width:auto;height:100%}#logo-cont svg{width:30px;height:auto;stroke-width:2px;stroke:var(--text-active)}#color-preview{width:150px;height:24px;border-radius:1rem;background:grey}#menu-center{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;height:100%}#tools{display:flex;justify-content:flex-start;gap:1rem;position:relative;width:100%}#color-menu-btn{display:none}#color-controls{display:flex;flex-direction:row;align-items:center;gap:1rem;padding:0;width:100%;height:auto}#color-types{display:flex;align-items:center;gap:1rem;position:relative;width:auto}.tab-btn{padding:1rem 1.5rem;width:100%;color:var(--text)}.tab-btn:hover{-webkit-tap-highlight-color:transparent;-ms-touch-action:manipulation;touch-action:manipulation}.tab-btn:active{-webkit-tap-highlight-color:transparent;color:var(--text-active);background-color:var(--btn-hover);-ms-touch-action:manipulation;touch-action:manipulation}.tab-btn.active{color:var(--text-active)}.tab-content{display:none;position:relative;padding:1rem 1rem;width:100%;height:auto;border:1px solid var(--border);border-radius:.5rem}.tab-content.active{display:flex}#color-dropdown{display:flex;position:absolute;bottom:0;left:0;width:150%;height:auto;border-radius:.5rem;background-color:var(--bg-1);transform:translateY(100%);z-index:10}.input-cont{gap:1rem}.num-input{max-width:48px}.color-label{margin-right:.5rem}.input-short{width:54px}.slider{margin:.5rem 0 1rem 0;width:100%;-webkit-appearance:none;background:0 0}.slider:focus-visible{-webkit-tap-highlight-color:transparent;outline:2px solid var(--border-active);-ms-touch-action:manipulation;touch-action:manipulation}#r-range::-webkit-slider-runnable-track{width:100%;height:10px;cursor:pointer;box-shadow:0 0 0 #000;background:linear-gradient(90deg,var(--r-range-g1,#000 0),var(--r-range-g2,red 100%));border-radius:10px;border:0 solid #010101}#r-range::-webkit-slider-thumb{box-shadow:0 0 2px #000;border:4px solid var(--bg-1);height:18px;width:18px;border-radius:10px;background:var(--r-range-bg,maroon);cursor:pointer;-webkit-appearance:none;margin-top:-4px}#r-range:focus::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--r-range-g1,#000 0),var(--r-range-g2,red 100%))}#r-range::-moz-range-track{width:100%;height:10px;cursor:pointer;box-shadow:0 0 0 #000;background:linear-gradient(90deg,var(--r-range-g1,#000 0),var(--r-range-g2,red 100%));border-radius:12px;border:0 solid #010101}#r-range::-moz-range-thumb{box-shadow:0 0 2px #000;border:4px solid var(--bg-1);height:12px;width:12px;border-radius:12px;background:var(--r-range-bg,maroon);cursor:pointer}#g-range::-webkit-slider-runnable-track{width:100%;height:10px;cursor:pointer;box-shadow:0 0 0 #000;background:linear-gradient(90deg,var(--g-range-g1,#000 0),var(--g-range-g2,#0f0 100%));border-radius:10px;border:0 solid #010101}#g-range::-webkit-slider-thumb{box-shadow:0 0 2px #000;border:4px solid var(--bg-1);height:18px;width:18px;border-radius:10px;background:var(--g-range-bg,green);cursor:pointer;-webkit-appearance:none;margin-top:-4px}#g-range:focus::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--g-range-g1,#000 0),var(--g-range-g2,#0f0 100%))}#g-range::-moz-range-track{width:100%;height:10px;cursor:pointer;box-shadow:0 0 0 #000;background:linear-gradient(90deg,var(--g-range-g1,#000 0),var(--g-range-g2,#0f0 100%));border-radius:12px;border:0 solid #010101}#g-range::-moz-range-thumb{box-shadow:0 0 2px #000;border:4px solid var(--bg-1);height:12px;width:12px;border-radius:12px;background:var(--g-range-bg,green);cursor:pointer}#b-range::-webkit-slider-runnable-track{width:100%;height:10px;cursor:pointer;box-shadow:0 0 0 #000;background:linear-gradient(90deg,var(--b-range-g1,#000 0),var(--b-range-g2,#00f 100%));border-radius:10px;border:0 solid #010101}#b-range::-webkit-slider-thumb{box-shadow:0 0 2px #000;border:4px solid var(--bg-1);height:18px;width:18px;border-radius:10px;background:var(--b-range-bg,navy);cursor:pointer;-webkit-appearance:none;margin-top:-4px}#b-range:focus::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--b-range-g1,#000 0),var(--b-range-g2,#00f 100%))}#b-range::-moz-range-track{width:100%;height:10px;cursor:pointer;box-shadow:0 0 0 #000;background:linear-gradient(90deg,var(--b-range-g1,#000 0),var(--b-range-g2,#00f 100%));border-radius:12px;border:0 solid #010101}#b-range::-moz-range-thumb{box-shadow:0 0 2px #000;border:4px solid var(--bg-1);height:12px;width:12px;border-radius:12px;background:var(--b-range-bg,navy);cursor:pointer}#h-range::-webkit-slider-runnable-track{width:100%;height:10px;cursor:pointer;box-shadow:0 0 0 #000;background:linear-gradient(90deg,red 0,#ff0 16.66%,#0f0 33.32%,#0ff 49.98%,#00f 66.64%,#f0f 83.3%,red 100%);border-radius:10px;border:0 solid #010101}#h-range::-webkit-slider-thumb{box-shadow:0 0 2px #000;border:4px solid var(--bg-1);height:18px;width:18px;border-radius:10px;background:var(--h-range-bg,#00feff);cursor:pointer;-webkit-appearance:none;margin-top:-4px}#h-range:focus::-webkit-slider-runnable-track{background:linear-gradient(90deg,red 0,#ff0 16.66%,#0f0 33.32%,#0ff 49.98%,#00f 66.64%,#f0f 83.3%,red 100%)}#h-range::-moz-range-track{width:100%;height:10px;cursor:pointer;box-shadow:0 0 0 #000;background:linear-gradient(90deg,red 0,#ff0 16.66%,#0f0 33.32%,#0ff 49.98%,#00f 66.64%,#f0f 83.3%,red 100%);border-radius:12px;border:0 solid #010101}#h-range::-moz-range-thumb{box-shadow:0 0 2px #000;border:4px solid var(--bg-1);height:12px;width:12px;border-radius:12px;background:var(--h-range-bg,#00feff);cursor:pointer}#s-range::-webkit-slider-runnable-track{width:100%;height:10px;cursor:pointer;box-shadow:0 0 0 #000;background:linear-gradient(90deg,var(--s-range-g1,#000 0),var(--s-range-g2,#000 100%));border-radius:10px;border:0 solid #010101}#s-range::-webkit-slider-thumb{box-shadow:0 0 2px #000;border:4px solid var(--bg-1);height:18px;width:18px;border-radius:10px;background:var(--s-range-bg,#000);cursor:pointer;-webkit-appearance:none;margin-top:-4px}#s-range:focus::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--s-range-g1,#000 0),var(--s-range-g2,#000 100%))}#s-range::-moz-range-track{width:100%;height:10px;cursor:pointer;box-shadow:0 0 0 #000;background:linear-gradient(90deg,var(--s-range-g1,#000 0),var(--s-range-g2,#000 100%));border-radius:12px;border:0 solid #010101}#s-range::-moz-range-thumb{box-shadow:0 0 2px #000;border:4px solid var(--bg-1);height:12px;width:12px;border-radius:12px;background:var(--s-range-bg,#000);cursor:pointer}#l-range::-webkit-slider-runnable-track{width:100%;height:10px;cursor:pointer;box-shadow:0 0 0 #000;background:linear-gradient(90deg,var(--l-range-g1,#000 0),var(--l-range-g2,#3fbfbf 50%),var(--l-range-g3,#fff 100%));border-radius:10px;border:0 solid #010101}#l-range::-webkit-slider-thumb{box-shadow:0 0 2px #000;border:4px solid var(--bg-1);height:18px;width:18px;border-radius:10px;background:var(--l-range-bg,#3fbfbf);cursor:pointer;-webkit-appearance:none;margin-top:-4px}#l-range:focus::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--l-range-g1,#000 0),var(--l-range-g2,#3fbfbf 50%),var(--l-range-g3,#fff 100%))}#l-range::-moz-range-track{width:100%;height:10px;cursor:pointer;box-shadow:0 0 0 #000;background:linear-gradient(90deg,var(--l-range-g1,#000 0),var(--l-range-g2,#3fbfbf 50%),var(--l-range-g3,#fff 100%));border-radius:12px;border:0 solid #010101}#l-range::-moz-range-thumb{box-shadow:0 0 2px #000;border:4px solid var(--bg-1);height:12px;width:12px;border-radius:12px;background:var(--l-range-bg,#3fbfbf);cursor:pointer}#increment-slide{min-width:150px;width:auto;height:36px}#i-range::-webkit-slider-runnable-track{width:100%;height:10px;cursor:pointer;box-shadow:0 0 0 #000;background:linear-gradient(90deg,var(--text-active) var(--increment),var(--bg-0) var(--increment));border-radius:10px;border:0 solid #010101}#i-range::-webkit-slider-thumb{box-shadow:0 0 2px #000;border:4px solid var(--bg-1);height:18px;width:18px;border-radius:10px;background:var(--text-active);cursor:pointer;-webkit-appearance:none;margin-top:-4px}#i-range:focus::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--text-active) var(--increment),var(--bg-0) var(--increment))}#i-range::-moz-range-track{width:100%;height:10px;cursor:pointer;box-shadow:0 0 0 #000;background:linear-gradient(90deg,var(--text-active) var(--increment),var(--bg-0) var(--increment));border-radius:12px;border:0 solid #010101}#i-range::-moz-range-thumb{box-shadow:0 0 2px #000;border:4px solid var(--bg-1);height:12px;width:12px;border-radius:12px;background:var(--text-active);cursor:pointer}#menu-right{display:flex;align-items:center;gap:.5rem;width:auto;height:100%}#shade-controls{display:flex;align-items:center;justify-content:flex-end;position:relative;width:100%;height:auto}#shade-buttons{display:flex;align-items:center;gap:.5rem}#kofi-btn{cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;margin:0;margin-block-end:0;padding:0;width:4.5rem;height:3.5rem;font-family:Montserrat,sans-serif;font-size:1rem;font-weight:600;color:var(--text);text-decoration:none;border:none;border-radius:.5rem;background:0 0;-webkit-appearance:none;-moz-appearance:none}#kofi-btn svg{width:3.5rem;height:auto}#ko-fi-mug{fill:none;stroke:var(--text);stroke-width:1.5x}#ko-fi-heart{fill:var(--text);stroke:none;stroke-width:none}#kofi-btn:focus-visible #ko-fi-mug,#kofi-btn:hover #ko-fi-mug{stroke:var(--text-active)}#kofi-btn:focus-visible #ko-fi-heart,#kofi-btn:hover #ko-fi-heart{fill:#F15E5E}#kofi-btn:hover{-webkit-tap-highlight-color:transparent;color:var(--text-active);background:var(--btn-hover);-ms-touch-action:manipulation;touch-action:manipulation}#kofi-btn:focus-visible{-webkit-tap-highlight-color:transparent;color:var(--text-active);background:var(--btn-hover);outline:2px solid var(--border-active);-ms-touch-action:manipulation;touch-action:manipulation}#kofi-btn:focus-visible .icon-btn::after,#kofi-btn:hover .icon-btn::after{transform:translate(-50%,100%);visibility:visible;opacity:1;z-index:10}.icon-btn{cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;margin:0;margin-block-end:0;padding:0;width:3.5rem;height:3.5rem;font-family:Montserrat,sans-serif;font-size:1rem;font-weight:600;color:var(--text);text-decoration:none;border:none;border-radius:.5rem;background:0 0;-webkit-appearance:none;-moz-appearance:none}.icon-btn:hover{-webkit-tap-highlight-color:transparent;-ms-touch-action:manipulation;touch-action:manipulation}.icon-btn:focus-visible{-webkit-tap-highlight-color:transparent;color:var(--text-active);background:var(--btn-hover);-ms-touch-action:manipulation;touch-action:manipulation}.icon-btn:active{-webkit-tap-highlight-color:transparent;color:var(--text-active);background:var(--btn-hover);-ms-touch-action:manipulation;touch-action:manipulation}.icon-btn .icon{display:flex;align-items:center;justify-content:center}.icon-btn .icon svg{width:2rem;height:auto;fill:none;stroke:var(--text);stroke-width:2px}.icon-btn:focus-visible .icon svg{stroke:var(--text-active)}.icon-btn::after{content:attr(data-tip);display:block;position:absolute;bottom:0;left:50%;padding:.75rem;text-align:center;color:var(--text-active);white-space:nowrap;border:solid 1px var(--border);border-radius:.5rem;background-color:var(--bg-1);box-shadow:0 3px 6px -4px rgba(0,0,0,.3);transform:translate(-50%,80%);transition:.2s ease;visibility:hidden;opacity:0;z-index:-10}.icon-btn:focus-visible::after,.icon-btn:hover::after{transform:translate(-50%,100%);visibility:visible;opacity:1;z-index:10}.icon-btn.above::after{content:attr(data-tip);display:block;position:absolute;bottom:0;left:50%;padding:.75rem;text-align:center;color:var(--text-active);white-space:nowrap;border:solid 1px var(--border);border-radius:.5rem;background-color:var(--bg-1);box-shadow:0 3px 6px -4px rgba(0,0,0,.3);transform:translate(-50%,-80%);transition:.2s ease;visibility:hidden;opacity:0;z-index:-10}.icon-btn.above:focus-visible::after,.icon-btn.above:hover::after{transform:translate(-50%,-100%);visibility:visible;opacity:1;z-index:10}#variables-cont{display:none;flex-direction:column;gap:1rem;position:absolute;bottom:0;right:0;padding:1rem;width:250px;height:auto;border:1px solid var(--border);border-radius:.5rem;background-color:var(--bg-1);transform:translateY(100%);z-index:10}#variables-cont.active{display:flex}#color-name{width:100%;height:auto}#list-cont{margin:0;padding:1rem;width:100%;height:100px;color:var(--text-active);border:1px solid var(--border);border-radius:.25rem;background-color:var(--input-bg);overflow-y:scroll}#variables-list{margin:0;padding:0;list-style:none}#tools-mobile{display:none;position:fixed;bottom:0;width:100%;height:60px;background-color:var(--bg-1)}main{flex-grow:1;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:2rem;position:relative;padding:2rem;width:100%;height:100%}#tintsShades{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));width:100%;height:auto;overflow-y:auto!important}.block{position:relative;width:100%;height:200px;overflow:hidden}.input-color{display:flex;justify-content:center;align-items:center;position:absolute;top:1rem;right:1rem;padding:.4rem;width:2rem;height:2rem;border-radius:2rem;background-color:var(--bg-1);transform:translateX(calc(100% + 1rem));transition:.2s}.input-color.active{transform:translateX(0)}.block:hover .input-color{transform:translateX(0)}.input-color svg{stroke-width:2;stroke:var(--text);width:100%;height:auto}.block:hover .block-info{transform:translateY(0)}.block-info{position:absolute;bottom:0;left:0;width:100%;height:48px;background-color:var(--bg-1);transform:translateY(100%);transition:.2s}.block-info.active{transform:translateY(0)}.color-text{padding:.5rem .5rem .5rem 1rem;width:72%;height:100%}.colorTextValue{font-size:1.17em;font-weight:600;color:var(--text)}.copy-cont{position:relative}.copyBtn{display:flex;justify-content:center;align-items:center;gap:1rem;padding:.5rem .75rem;width:auto;font-size:1.1rem;color:var(--text);border-radius:.5rem}.copyBtn:hover{-webkit-tap-highlight-color:transparent;-ms-touch-action:manipulation;touch-action:manipulation}.copyBtn:active{-webkit-tap-highlight-color:transparent;color:var(--text-active);background:var(--btn-hover);-ms-touch-action:manipulation;touch-action:manipulation}.copyBtn svg{width:20px;stroke:var(--text)}.copyBtn:focus-visible svg{stroke:var(--text-active)}.color-type{position:relative;padding:.5rem;width:28%;height:100%;color:#646768;border-left:solid 1px var(--border)}.colorTypeName{font-weight:600;text-transform:uppercase}.colorTypeChev{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.5rem .75rem;width:100%;font-size:1rem;color:var(--text)}.colorTypeChev .icon{display:flex;justify-content:center;align-items:center;width:24px;height:auto}.colorTypeChev .icon svg{stroke-width:2;width:100%;height:auto;transform-origin:center;transform:rotate(180deg)}.colorTypeSelect{display:none;flex-direction:column;position:absolute;top:0;left:0;padding:.5rem;width:100%;height:auto;font-weight:600;background-color:var(--bg-1);transform:translateY(-100%)}.colorTypeButton{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.75rem .75rem;width:100%;font-size:1rem;color:var(--text)}.showTypes{display:flex}.colorTypeChev.rotateChev .icon svg{transform:rotate(0)}.copyAlert{position:absolute;top:0;left:50%;padding:1rem;font-weight:600;color:var(--text-active);border-radius:3px;background:var(--bg-1);box-shadow:0 3px 6px 0 rgba(0,0,0,.25);-webkit-box-shadow:0 3px 6px 0 rgba(0,0,0,.25);-moz-box-shadow:0 3px 6px 0 rgba(0,0,0,.25);transform:translate(-50%,calc(-100% - 1.5rem))}#feedback{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;padding:1rem 1.5rem;width:auto;font-family:Montserrat,sans-serif;font-size:1rem;font-weight:400;color:var(--text);text-align:center;border-radius:.5rem;transition:.2s ease}#feedback a{color:var(--text-active);text-decoration:none}@media (hover:hover){button:hover{-webkit-tap-highlight-color:transparent;color:var(--text-active);background:var(--btn-hover);-ms-touch-action:manipulation;touch-action:manipulation}.tab-btn:hover{-webkit-tap-highlight-color:transparent;color:var(--text-active);background-color:var(--btn-hover);-ms-touch-action:manipulation;touch-action:manipulation}.icon-btn:hover{-webkit-tap-highlight-color:transparent;color:var(--text-active);background:var(--btn-hover);-ms-touch-action:manipulation;touch-action:manipulation}.icon-btn:hover .icon svg{stroke:var(--text-active)}.copyBtn:hover{-webkit-tap-highlight-color:transparent;color:var(--text-active);background:var(--btn-hover);-ms-touch-action:manipulation;touch-action:manipulation}.copyBtn:hover svg{stroke:var(--text-active)}}@media (max-width:900px){#page-container{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:1rem;padding:5rem 0 5rem 0;width:100%;min-height:100vh;height:100%;visibility:visible}#menu.mobile{display:flex;align-items:center;justify-content:space-between;gap:.5rem;position:fixed;top:0;padding:0 1rem;width:100%;height:60px;background-color:var(--bg-1);transform:translateY(0);z-index:10}#menu.hide{transform:translateY(-100%)}#menu-left{gap:1rem;width:100%;height:100%}#color-preview{width:100%;max-width:300px;height:24px;border-radius:1rem;background:grey}#menu-center{display:none}#tools-desktop{display:none}#tools-mobile{display:flex}.icon-btn:first-of-type::after,.icon-btn:last-of-type::after{white-space:normal}.icon-btn:hover::after{transform:translate(-50%,80%);visibility:hidden;opacity:0;z-index:-10}.icon-btn.above:hover::after{transform:translate(-50%,-80%);visibility:hidden;opacity:0;z-index:-10}#color-menu-btn.active,#css-variables.active{color:var(--text-active);background:var(--btn-hover)}#color-menu-btn.active svg,#css-variables.active svg{stroke:var(--text-active)}#color-menu-btn{display:flex}#shade-buttons{width:100%;justify-content:space-around}#color-controls{display:none;flex-direction:column;gap:1rem;position:absolute;top:0;left:0;padding:1rem 0;width:100%;height:auto;border-top:solid 1px var(--border);border-bottom:solid 1px var(--border);background-color:var(--bg-1);transform:translateY(-100%);overscroll-behavior:none}#color-controls.active{display:flex}#color-types{width:100%}.tab-btn.active{background-color:var(--btn-hover)}#color-dropdown{display:flex;flex-direction:column;position:relative;width:100%;max-width:500px;height:auto;border-radius:0;background-color:var(--bg-1);transform:translateY(0)}.tab-content{display:none;padding:1rem 2rem;border:none;border-radius:0}#increment-slide{padding:0 2rem;min-width:150px;width:100%;max-width:500px;height:auto}#variables-cont{bottom:auto;top:0;right:0;transform:translateY(-100%)}main{padding:1rem}}