@font-face{font-family:Nunito;src:url(/fonts/nunito.ttf);font-style:normal}@font-face{font-family:Nunito;src:url(/fonts/nunito-italic.ttf);font-style:italic}@font-face{font-family:"Noto Serif";src:url(/fonts/noto-serif.ttf);font-style:normal}@font-face{font-family:"Noto Serif";src:url(/fonts/noto-serif-italic.ttf);font-style:italic}:root{--purple-0:#faf0ff;--purple-1:#e0ccf1;--purple-2:#c5a7e2;--purple-3:#ab83d4;--purple-4:#905ec5;--purple-5:#763ab7;--purple-6:#6730a6;--purple-7:#582795;--purple-8:#491d84;--purple-9:#3a1372;--purple-10:#2b0a61;--purple-11:#1c0050;--blue-0:#f2f4ff;--blue-1:#c3d8fe;--blue-2:#95bdfd;--blue-3:#66a1fc;--blue-4:#3785fb;--blue-5:#2f76dc;--blue-6:#2766be;--blue-7:#1f579f;--blue-8:#184781;--blue-9:#103862;--blue-10:#082844;--blue-11:#001925;--teal-0:#def8ff;--teal-1:#94e8e9;--teal-2:#4bd9d3;--teal-3:#01c9bd;--teal-4:#01b4a8;--teal-5:#019e93;--teal-6:#01897e;--teal-7:#017369;--teal-8:#005e54;--teal-9:#00483f;--teal-10:#00332a;--teal-11:#001d15;--green-0:#caffec;--green-1:#8aeeba;--green-2:#4adc89;--green-3:#0acb57;--green-4:#09b54d;--green-5:#089f43;--green-6:#068938;--green-7:#05732e;--green-8:#045d24;--green-9:#024719;--green-10:#01310f;--green-11:#001b05;--yellow-0:#fffa3b;--yellow-1:#fde400;--yellow-2:#e7cf00;--yellow-3:#d1ba00;--yellow-4:#baa500;--yellow-5:#a49000;--yellow-6:#8e7c00;--yellow-7:#786700;--yellow-8:#625200;--yellow-9:#4b3d00;--yellow-10:#352800;--yellow-11:#1f1300;--orange-0:#fff3d5;--orange-1:#ffcf96;--orange-2:#ffab56;--orange-3:#ff8717;--orange-4:#e57714;--orange-5:#cb6811;--orange-6:#b1580e;--orange-7:#98490c;--orange-8:#7e3909;--orange-9:#642906;--orange-10:#4a1a03;--orange-11:#300a00;--red-0:#fff1ea;--red-1:#ffccc1;--red-2:#ffa799;--red-3:#fe8270;--red-4:#fe5d47;--red-5:#e2503e;--red-6:#c54235;--red-7:#a9352c;--red-8:#8c2823;--red-9:#701b1a;--red-10:#530d11;--red-11:#370008;--pink-0:#ffeff8;--pink-1:#fdc4eb;--pink-2:#fb99df;--pink-3:#f96ed2;--pink-4:#e060be;--pink-5:#c653a9;--pink-6:#ad4595;--pink-7:#943780;--pink-8:#7a296c;--pink-9:#611b57;--pink-10:#470e43;--pink-11:#2e002e;--grayscale-0:#f4f4f4;--grayscale-1:#cecfd3;--grayscale-2:#a9aab2;--grayscale-3:#838692;--grayscale-4:#5e6171;--grayscale-5:#383c50;--grayscale-6:#31364a;--grayscale-7:#2b2f43;--grayscale-8:#24293d;--grayscale-9:#1d2237;--grayscale-10:#171c30;--grayscale-11:#10152a;--main-font:"Nunito",sans-serif;--serif-font:"Noto Serif",Bodoni MT,Didot,Didot LT STD,Hoefler Text,Garamond,Times New Roman,serif;--default-text-color:var(--grayscale-7)}*{box-sizing:border-box;padding:0;margin:0}body,html{overflow-x:hidden;font-family:Nunito,sans-serif;color:var(--default-text-color)}main{display:flex;flex-direction:column;box-sizing:border-box;position:fixed;top:0;right:0;left:0}a{color:inherit;text-decoration:none}.button{display:flex;flex-direction:row;align-items:center;border:none;background:var(--grayscale-0);color:var(--grayscale-8);border-radius:.5rem;height:2rem;line-height:2;padding:0 .75rem;box-shadow:0 .125rem .25rem rgba(0,0,0,.25);transition:all .2s linear;cursor:pointer;vertical-align:middle}.button:disabled{cursor:default;pointer-events:none}.button:disabled,.button:disabled:hover{background:var(--grayscale-1);color:var(--grayscale-4)}.button:hover{background:var(--blue-1);color:var(--blue-5)}.button__icon{display:inline-block;width:1.5rem;height:1.5rem;margin-right:.5rem}.button__icon svg{width:1.5rem;height:1.5rem;color:var(--blue-8)}.button--delete{background:var(--red-0);color:var(--red-8)}.button--delete:hover{background:var(--red-1);color:var(--red-5)}.button--dark-mode{background:#000;color:var(--grayscale-0)}.radio-buttons{display:flex;flex-direction:row;border-radius:.5rem;box-shadow:0 .125rem .25rem rgba(0,0,0,.25)}.radio-button{display:block;margin:0;height:2rem;padding:0 .25rem;background:var(--grayscale-0);color:var(--grayscale-8);border:none;border-right:1px solid var(--grayscale-1);transition:all .1s linear}.radio-button--selected,.radio-button:hover{background:var(--blue-1);color:var(--blue-5)}.radio-button:first-child{border-radius:.5rem 0 0 .5rem}.radio-button:last-child{border-radius:0 .5rem .5rem 0;border:none}.radio-button svg{display:inline-block;width:2rem;height:2rem}.add-button{position:relative;padding:0;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--grayscale-1)}.add-button,.add-button svg{width:2rem;height:2rem}.header{height:8vh;padding:0 4vw;display:flex;flex-direction:row;align-items:center;justify-content:stretch}.logo{transition:all .3s ease-in-out}.controls{height:6vh;padding:0 4vw;justify-content:stretch;border-top:1px solid var(--grayscale-0)}.controls,.palette-actions{display:flex;flex-direction:row;align-items:center}.palette-actions{justify-content:end;flex:1 1}.mode-icon{position:relative;width:1.5rem;height:1.5rem}.mode-icon__dark,.mode-icon__light{position:absolute;top:0;right:0;width:1.5rem;height:1.5rem;transition:all .2s ease-out;transform-origin:50% 50%}.mode-icon__light--disabled{transform:rotate(180deg);opacity:0}.mode-icon__dark--disabled{transform:rotate(-180deg);opacity:0}.seed-colors{display:flex;flex-direction:column;align-items:flex-start}.seed-colors__list{display:flex;flex-direction:row;align-items:center}.seed-colors__label{font-size:1rem;margin-right:1rem;align-self:center}.seed-colors__blank-state{margin-right:1rem;font-style:italic;color:var(--grayscale-2)}.seed{display:flex;flex-direction:row;align-items:center;margin-right:.5rem;border:none;border-radius:1.25rem}.seed__drop--selected{box-shadow:inset .25rem .25rem .5rem rgba(0,0,0,.25);outline:var(--grayscale-1) solid 1px}.seed__label{padding:0 1rem 0 .75rem;display:none}.seed__drop{display:block;height:2rem;width:2rem;border-radius:1rem;border:1px solid var(--grayscale-1)}.icon-button{display:flex;flex-direction:row;align-items:center;background:none;box-sizing:border-box;padding:none;margin-right:1rem;height:2.5rem;border:none;color:var(--default-text-color)}.icon-button__icon{outline:var(--grayscale-1) solid 1px;border-radius:50%;margin-right:.75rem}.icon-button__icon,.icon-button__icon svg{width:2rem;height:2rem}.icon-button__label{font-size:1rem}.side-controls__wrapper{display:flex;flex-direction:row;align-self:stretch;width:16vw;min-width:16rem;padding:0 0 0 2vw;overflow:hidden;transition:all .1s ease-out}.side-controls__wrapper--hidden{width:0;min-width:0;padding:0}.side-controls{position:relative;width:100%;box-sizing:border-box;align-self:stretch;padding:1rem;background:var(--grayscale-0);border:none;border-radius:1rem;transition:all .1s ease-out}.side-controls--dark-mode{background:#000;border-color:var(--grayscale-6);color:var(--grayscale-0)}.side-controls__buttons{display:flex;flex-direction:row}.side-controls__delete-button{margin-right:auto}.side-controls__label{font-size:.75rem;font-weight:700;padding:.5rem}.side-controls__input{background:var(--grayscale-0);background:#fff;color:var(--default-text-color);border:none;border-radius:.25rem;font-size:1rem;line-height:1.5;padding:0 .5rem;box-sizing:border-box;width:100%;margin-bottom:1.25rem}.color-picker{position:relative;display:flex;flex-direction:column}.color-picker__saturation{display:block;position:relative;height:10rem;width:100%;background:var(--grayscale-0);padding:1rem;border-radius:.5rem;margin-bottom:1rem}.color-picker__hue-handle{width:1rem;height:1rem;margin:-.5rem 0 0 -.5rem;border-radius:.5rem;background:#fff;box-shadow:.25rem .25rem .5rem rgba(0,0,0,.25)}.color-picker__hue{position:relative;height:1rem;margin-bottom:.5rem}.color-picker__slider-handle{width:.5rem;height:1rem;border-radius:.25rem;background:#fff;box-shadow:.25rem .25rem .5rem rgba(0,0,0,.25)}.color-picker__hex input{background:var(--grayscale-0);background:#fff;color:var(--default-text-color);border:none;border-radius:.25rem;font-size:1rem;line-height:1.5;padding:0 .5rem;box-sizing:border-box;width:100%;margin-bottom:1rem}.sample-swatches{display:grid;grid-template-columns:repeat(6,1fr);margin-bottom:1rem}.sample-swatch{display:inline-block;width:100%;height:auto;aspect-ratio:1}.swatches__area{flex:1 1;background-color:#fff;background-image:linear-gradient(180deg,#000 0,#000);background-size:0 100vh;background-repeat:no-repeat;background-position:0 100%;border-top:1px solid var(--grayscale-0);transition:all .2s ease-in-out;padding:4vw 3.5vw}.swatches__area--dark-mode{background-size:calc(100vw + 1rem) 100vh;color:var(--grayscale-0)}.swatches__body{height:100%;justify-content:stretch}.swatches__body,.swatches__header{position:relative;display:flex;flex-direction:row;align-items:center}.swatches__header{padding:1rem .5vw 2rem}.swatches__header-label{position:absolute;top:0;left:.5vw;color:var(--grayscale-4)}.swatches__swatch-name{flex:1 1;font-size:2rem;font-weight:100}.swatches{flex:1 1;flex-direction:column}.swatches,.swatches__list{display:flex;align-self:stretch}.swatches__list{flex:1 1;flex-direction:row;align-items:center;justify-content:stretch}.swatch,.swatches__list{transition:all .2s ease-in-out}.swatch{position:relative;flex:1 1;justify-self:stretch;height:100%}.swatch__body{position:absolute;top:0;left:2%;right:2%;bottom:0;border-radius:50rem;padding:30% 10%;display:flex;flex-direction:column;text-align:center;cursor:pointer;transition:all .1s ease-in-out}.swatch__body--selected,.swatch__body:hover{margin-top:-2vw;margin-bottom:-2vw}.contrast-dot__wrapper{width:100%;transition:all .1s ease-in-out}.contrast-dot{width:100%;height:auto;aspect-ratio:1}.swatch__label{display:flex;flex-direction:column;text-align:center;justify-content:flex-start;margin-bottom:1rem}.swatch__index{font-size:1.5rem;font-weight:100;line-height:1.5}.swatch__hex{font-size:.75rem;font-weight:400;text-transform:uppercase;line-height:1}@media screen and (max-width:900px){body,html{font-size:12px}.controls{flex-direction:column-reverse;align-items:flex-start;height:10vh}.seed-colors{flex-direction:row}.palette-actions,.seed-colors{height:4vh;align-items:center;flex:auto}.palette-actions{align-self:stretch;justify-content:space-between}.swatches__area{flex:1 1}.side-controls__wrapper{min-width:16rem;position:absolute;top:0;right:0;bottom:0}.side-controls__wrapper--hidden{min-width:0}.swatches__header{flex-direction:column;align-items:flex-start;padding-bottom:1rem}.swatches__list{flex-direction:column;align-items:stretch;padding:.5vh 0}.swatch{min-height:inherit}.swatch--selected{min-height:6rem}.swatch__body{flex-direction:row;padding:0 2rem;top:.2vh;left:0;right:0;bottom:.2vh;align-items:center}.swatch__body--selected,.swatch__body:hover{margin:0 -2vw}.swatch__label{flex:1 1;flex-direction:row;align-items:center;margin-bottom:0}.swatch__hex,.swatch__index{font-size:1rem;margin:0 .25rem}.contrast-dot__wrapper{display:flex;flex-direction:row;align-items:center}.contrast-dot,.contrast-dot__wrapper{height:90%;width:auto}}.code-modal__container{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center}.code-modal__overlay{position:fixed;inset:0;background:rgba(0,0,0,.8)}.code-modal{position:relative;width:40rem;max-width:90vw;background:#fff;z-index:1}.code-modal textarea{display:block;height:10rem;width:100%}