@import"https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap";.nav{display:flex;justify-content:space-between;padding:var(--spacing-md);margin:0 var(--spacing-md);position:sticky;top:var(--spacing-md);z-index:100;transition:background-color var(--timing),color var(--timing),fill var(--timing)}.nav-scrolled{backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);background-color:transparent!important}.nav:before{background-color:var(--color-nav-scrolled)!important;transition:color var(--timing);border-radius:var(--spacing-md);position:absolute;inset:0px;content:"";box-shadow:0 4px 30px #0000001a;border:1px solid rgba(255,255,255,.3);opacity:0;transition:opacity .3s ease-in-out;pointer-events:none}.nav-scrolled:before{opacity:1}.nav-left,.nav-right,.nav-links,.Switch{display:flex;align-items:center;gap:var(--spacing-2xl);z-index:100}.nav-left{gap:var(--spacing-md);cursor:pointer;font:var(--navtitle)}.logo>svg{width:inherit;height:inherit;stroke:inherit;fill:inherit}.logo{width:var(--spacing-2xl);height:var(--spacing-2xl)}.Switch-btn{height:24px;width:24px;cursor:pointer}.nav-links>li{cursor:pointer;font:var(--navbuttons)}#nav-toggle{display:none}.Switch-btn>button{background:none;border:none;display:flex}.Switch-btn>button{padding:0;background:none;border:none;display:flex;box-shadow:var(--color-Background) 0 0 0 0,var(--color-Primary-button) 0 0 0 0;transition:box-shadow var(--timing);border-radius:var(--spacing-sm)}.Switch-btn>button:hover{cursor:pointer}.Switch-btn>button:focus-within{outline:none}.Switch-btn>button:focus-visible{outline:var(--color-Primary-button) 1px solid;outline-offset:-1px;box-shadow:var(--color-Background) 0 0 0 2px,var(--color-Primary-button) 0 0 0 4px;border-radius:var(--spacing-sm)}@media screen and (max-width: 800px){.nav{display:grid;grid-template-columns:max-content max-content;grid-template-rows:max-content max-content}#nav-toggle{display:block}.nav-right{grid-column:span 2;width:100%;justify-content:center;height:0px;overflow:hidden;opacity:0;transition:height var(--timing),opacity var(--timing)}.nav-links{flex-direction:column;padding:var(--spacing-3xl) 0}.nav-links a{font-size:2rem;font-weight:800;text-transform:uppercase}.nav-active{height:100%;opacity:1}#nav-toggle{background:none;border:none;color:var(--color-Primary-button);z-index:100}}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-family:"Averia Serif Libre",cursive;font-family:Inter,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;--timing: .2s ease-in-out;--color-Text: #0c1b1d;--color-Text-hsl: 187 41% 8%;--color-Background: #f8fcfc;--color-Primary-button: #2c466d;--color-Primary-button-hsl: 216 42% 30%;--color-Secondary-button: #c2fff8;--color-Accent: #037eab;--color-nav-scrolled: rgb(248 252 252 /.3);--color-white-hsl: 0 0% 100%;--primary-gradient: linear-gradient( 90deg, var(--color-Primary-button) 0%, var(--color-Accent) 100% );--secondary-gradient: linear-gradient( 90deg, var(--color-Secondary-button) 0%, var(--color-Accent) 100% );--navtitle: 700 2rem / normal Averia Serif Libre;--navbuttons: 400 1rem / normal Inter;--titleparagraph: 400 1rem / normal Inter;--maintitle: 700 8.25rem / normal Averia Serif Libre;--pagetitle: 700 4rem / normal Averia Serif Libre;--subheading: 700 1.5rem / normal Averia Serif Libre;--paragraph: 400 1rem/1.5rem Inter;--code: 1rem/1.5rem monospace;--pill: 400 1rem/1.5rem Inter;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 2.5rem;--spacing-3xl: 5rem}@media (prefers-reduced-motion: reduce){:root{--timing: 0ms}}@media (prefers-color-scheme: dark){:root{--color-Text: #e6f9f2;--color-Text-hsl: 158 61% 94%;--color-Background: #030c09;--color-Primary-button: #037eab;--color-Primary-button-hsl: 196 97% 34%;--color-Secondary-button: #100f24;--color-Accent: #2c466d;--color-nav-scrolled: rgb(3 12 9 / .3)}}*,*:before,*:after{box-sizing:border-box;margin:0}ul,ol{list-style:none;padding:0}a{text-decoration:none;color:inherit}body{margin:0;min-width:320px;min-height:100vh;background-color:var(--color-Background)}.App{margin:0;min-width:320px;min-height:100vh;background-color:var(--color-Background);position:relative;transition:background-color var(--timing);padding-bottom:var(--spacing-3xl)}.home{height:100%;overflow:hidden;position:relative;height:100vh;margin-top:calc((var(--spacing-2xl) + (var(--spacing-xs) * 2) + (var(--spacing-md) * 2)) * -1);margin-bottom:calc(var(--spacing-3xl) * -1);display:grid;grid-template-columns:1fr;grid-template-rows:1fr max-content max-content 1fr;justify-content:center;align-items:center;flex-direction:column;background:linear-gradient(187deg,var(--color-Secondary-button) 0%,var(--color-Accent) 100%)}.illustration{stroke:var(--color-Primary-button);width:80vmin;position:fixed;transform:translate(-50%,-50%);top:50%;left:40%}.hero-img{stroke:var(--color-Primary-button);width:80vmin;height:100%;position:fixed;transform:translate(-50%,-50%);top:50%;left:40%;background-image:url(/assets/3d-phone-7aae6dae.png);background-position:center;background-repeat:no-repeat}.hero-text{display:flex;flex-direction:column;grid-row:2;align-items:center;font:var(--maintitle);color:hsl(var(--color-white-hsl));user-select:none}.color-block{height:100%;width:100%;grid-row:4;background-color:hsl(var(--color-white-hsl))}.waves{margin-top:var(--spacing-2xl);grid-row:3;position:relative;width:100%;height:25vh;margin-bottom:-7px;min-height:100px;max-height:150px;bottom:0px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:17s;fill:hsl(var(--color-white-hsl) / .7)}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:20s;fill:hsl(var(--color-white-hsl) / .5)}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:23s;fill:hsl(var(--color-white-hsl) / .3)}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:30s;fill:hsl(var(--color-white-hsl))}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}@media (max-width: 768px){.waves{height:40px;min-height:40px}}.top-content{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xl);padding:80px 40px;margin:0 auto;width:clamp(320px,60vw,600px)}.subAndPills{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-2xl)}.top-content>*{text-align:center;color:var(--color-Text);transition:color var(--timing)}.top-content>h1{font:var(--navtitle);color:var(--color-Primary-button)}.pills{display:flex;gap:var(--spacing-sm);flex-wrap:wrap;justify-content:center}.pills-small{display:flex;gap:var(--spacing-xs);width:100%;flex-wrap:wrap}.library{display:grid;grid-template-columns:repeat(3,1fr);margin:0 auto;gap:var(--spacing-md);width:fit-content}@media screen and (max-width: 1000px){.library{grid-template-columns:repeat(2,1fr)}}@media screen and (max-width: 600px){.library{grid-template-columns:1fr}}.no-match{display:flex;margin:auto;grid-column:1/-1;font:var(--titleparagraph);color:var(--color-Text)}a{box-shadow:var(--color-Background) 0 0 0 0,var(--color-Primary-button) 0 0 0 0;transition:box-shadow var(--timing);border-radius:var(--spacing-sm);padding:var(--spacing-xs)}a:focus-within{outline:none}a:focus-visible{outline:var(--color-Primary-button) 1px solid;outline-offset:-1px;box-shadow:var(--color-Background) 0 0 0 2px,var(--color-Primary-button) 0 0 0 4px;border-radius:var(--spacing-sm)}._pill_sgcxu_1{background-color:var(--color-Background);color:var(--color-Primary-button);padding:8px 16px;border:1px solid var(--color-Primary-button);border-radius:100vmax;width:fit-content;font:var(--pill);text-transform:uppercase;cursor:pointer;transition:background-color var(--timing),color var(--timing),border var(--timing)}._pillActive_sgcxu_15{background-color:var(--color-Primary-button);color:var(--color-Background);padding:8px 16px;border:1px solid var(--color-Primary-button);border-radius:100vmax;width:fit-content;font:var(--pill);text-transform:uppercase;cursor:pointer;transition:background-color var(--timing),color var(--timing),border var(--timing)}._pillSmall_sgcxu_29{background-color:var(--color-Primary-button);color:var(--color-Background);padding:var(--spacing-xs) var(--spacing-sm);border:none;border-radius:100vmax;width:fit-content;font:var(--pill);font-size:.75em;text-transform:uppercase;cursor:default;transition:background-color var(--timing),color var(--timing)}._pill_sgcxu_1,._pillActive_sgcxu_15{box-shadow:var(--color-Background) 0 0 0 0,var(--color-Primary-button) 0 0 0 0;transition:background-color var(--timing),color var(--timing),border var(--timing),box-shadow var(--timing)}._pillActive_sgcxu_15:focus-within,._pill_sgcxu_1:focus-within{outline:none}._pillActive_sgcxu_15:focus-visible,._pill_sgcxu_1:focus-visible,._pillActive_sgcxu_15:hover,._pill_sgcxu_1:hover{outline:none;box-shadow:var(--color-Background) 0 0 0 2px,var(--color-Primary-button) 0 0 0 4px}._card_jfbbk_1{max-width:calc(var(--spacing-3xl) * 4);display:flex;flex-direction:column;gap:var(--spacing-md);color:var(--color-Text);padding:var(--spacing-md);border-radius:var(--spacing-md)}._cardImg_jfbbk_11{background-image:var(--var);outline:2px solid var(--color-Primary-button);aspect-ratio:1.5;background-size:contain;background-repeat:no-repeat;background-position:center;border-radius:calc(var(--spacing-sm) - 2px)}._title_jfbbk_20{font:var(--navbuttons);text-transform:uppercase;color:var(--color-Text);min-height:40px}._description_jfbbk_26{font:var(--navbuttons);color:var(--color-Text);text-overflow:ellipsis;-webkit-line-clamp:4;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.about-container{height:calc(100vh - (var(--spacing-2xl) + (var(--spacing-xs) * 2) + (var(--spacing-md) * 2)));margin-bottom:calc(var(--spacing-3xl) * -1);display:flex;justify-content:center;align-items:center;flex-direction:column}.article{background-color:var(--color-Background);animation:forwards fadeIn var(--timing);transition:background-color var(--timing);margin-bottom:calc(var(--spacing-3xl) * -1)}.top-article{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--spacing-lg);padding:var(--spacing-3xl) var(--spacing-2xl);background-color:var(--color-Secondary-button);transition:background-color var(--timing)}.descAndPills{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md)}.article-title{color:var(--color-Primary-button);font:var(--pagetitle);text-transform:uppercase;transition:color var(--timing)}.article-desc{color:var(--color-Text);font:var(--titleparagraph);transition:color var(--timing)}.article-text{margin:0 auto;padding:var(--spacing-3xl) 0;max-width:1000px;font:var(--paragraph);color:var(--color-Text);transition:color var(--timing)}.article-text>p{margin-block-end:1em}.article-text>code,.article-text>*>code{font:var(--code)}.article-text>h2{font:var(--subheading);text-transform:capitalize}.spinner{stroke:var(--color-Primary-button);width:40px}.spinner-wrapper{display:flex;align-items:center;height:calc(100vh - (var(--spacing-2xl) + var(--spacing-md) * 2))}.blog-pre{margin-bottom:3em!important;position:relative}.blog-pre>div{display:block;font-family:Menlo,Monaco,Consolas,monospace;line-height:1.5;padding:var(--spacing-lg)!important;border-radius:var(--spacing-md);transition:background-color var(--timing),color var(--timing);min-height:calc(var(--spacing-lg) + var(--spacing-md) * 2 + var(--spacing-md) * 2);padding-right:calc(var(--spacing-lg) + var(--spacing-md) * 2 + var(--spacing-md) * 2)!important}.blog-pre>div>code{white-space:pre-line!important}table th,table td{outline:1px solid var(--color-Text);padding:var(--spacing-xs) var(--spacing-sm)}tbody tr:nth-child(even),thead{background-color:hsl(var(--color-Text-hsl) / .07)}tbody tr:nth-child(odd){background-color:var(--color-Background)}.blog-pre>.code-copy-btn{color:var(--color-Primary-button);fill:var(--color-Primary-button);position:absolute;right:10px;top:-2px;font-size:1.5em;line-height:1;cursor:pointer;border:none;border-radius:var(--spacing-md);margin:var(--spacing-md);padding:0!important;background-color:var(--color-Background);outline:1px solid var(--color-Primary-button);aspect-ratio:1;box-shadow:var(--color-Background) 0 0 0 0,var(--color-Primary-button) 0 0 0 0;transition:box-shadow var(--timing),background-color var(--timing),color var(--timing)}.blog-pre>.code-copy-btn>i:before{margin:var(--spacing-md)!important;padding:var(--spacing-md)!important}.blog-pre>.code-copy-btn>i{margin:var(--spacing-md)!important}.code-copy-btn:hover{box-shadow:var(--color-Background) 0 0 0 3px,var(--color-Primary-button) 0 0 0 5px}.code-copy-btn:focus-within{outline:1px solid var(--color-Primary-button)}.code-copy-btn:focus-visible{box-shadow:var(--color-Background) 0 0 0 3px,var(--color-Primary-button) 0 0 0 5px}.article h2{margin-block-end:.83em}.article img{display:flex;margin:auto}hr{margin-block-start:.5em;margin-block-end:2em}.article ol,.article ul{margin-block-start:.5em!important;margin-block-end:.5em!important;padding-inline-start:2em!important}.article ul{list-style:disc}.article ol{list-style:decimal}@media screen and (max-width: 1200px){.article-text{padding:var(--spacing-3xl) var(--spacing-2xl)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}._errorContainer_1n3ld_1{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:auto;height:calc(100vh - (var(--spacing-2xl) + var(--spacing-md) * 2));color:var(--color-900)}._backButton_1n3ld_11{background-color:var(--color-900);color:var(--color-100);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--spacing-sm)}.designer{display:flex;justify-content:center;align-items:center;gap:var(--spacing-xl)}.message-wrapper{display:flex;width:600px;height:600px;justify-content:center;align-items:center;border:var(--color-Primary-button) 2px solid;padding:var(--spacing-lg);border-radius:var(--spacing-md);overflow:hidden}.right-wrapper{display:flex;flex-direction:column;gap:var(--spacing-md)}.designer-form-wrapper{width:350px;border:var(--color-Primary-button) 2px solid;padding:var(--spacing-lg);border-radius:var(--spacing-md)}.designer-form{display:flex;flex-direction:column;gap:var(--spacing-md);color:var(--color-Text);font:var(--navbuttons);text-transform:uppercase}.designer-form>div{border-top:solid 1px hsl(var(--color-Primary-button-hsl) / .4);padding-top:var(--spacing-md)}.designer-form>div:first-child{border-top:none;padding-top:0}.paddingDropDownClosed,.borderRadiusDropDownClosed{display:none}.padding-sub-wrapper,.border-radius-sub-wrapper{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md)}.padding-wrapper,.border-radius-wrapper,.font-size-wrapper,.message-text-wrapper{display:flex;flex-direction:column;gap:var(--spacing-sm)}.oneLine-wrapper{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md)}.hidden{display:none}input[type=text],input[type=number],input[type=color],textarea,.oneLine-wrapper>button{width:var(--spacing-lg);height:var(--spacing-lg);border:var(--color-Primary-button) 2px solid;border-radius:var(--spacing-xs);background-color:var(--color-Background);color:var(--color-Primary-button);box-shadow:var(--color-Background) 0 0 0 0,var(--color-Primary-button) 0 0 0 0;transition:box-shadow var(--timing),background-color var(--timing),color var(--timing),border var(--timing)}input[type=color]:hover{cursor:pointer}textarea{width:100%;height:var(--spacing-3xl);resize:none;padding:var(--spacing-sm)}input[type=text]:focus-within,input[type=number]:focus-within,input[type=color]:focus-within,.oneLine-wrapper>button:focus-within,textarea:focus-within{outline:none}input[type=text]:focus-visible,input[type=number]:focus-visible,input[type=color]:focus-visible,.oneLine-wrapper>button:focus-visible,textarea:focus-visible{outline:none;box-shadow:var(--color-Background) 0 0 0 2px,var(--color-Primary-button) 0 0 0 4px}.oneLine-wrapper>button{padding:0;fill:var(--color-Primary-button);display:flex;align-items:center;justify-content:center;cursor:pointer}input[type=range]{-webkit-appearance:none;appearance:none;background-color:var(--color-Primary-button);height:var(--spacing-sm);border-radius:100vmax;box-shadow:var(--color-Background) 0 0 0 0,var(--color-Primary-button) 0 0 0 0;transition:box-shadow var(--timing),background-color var(--timing),color var(--timing)}input[type=range]:focus-within{outline:none}input[type=range]:focus-visible{outline:none;box-shadow:var(--color-Background) 0 0 0 2px,var(--color-Primary-button) 0 0 0 4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:var(--spacing-md);height:var(--spacing-md);background-color:var(--color-Primary-button);border-radius:100vmax;border:var(--color-Background) 2px solid;transition:box-shadow var(--timing),background-color var(--timing),color var(--timing),border var(--timing);cursor:pointer}input[type=range]::-moz-range-thumb{width:var(--spacing-md);height:var(--spacing-md);background-color:var(--color-Primary-button);border-radius:100vmax;border:var(--color-Background) 2px solid;cursor:pointer}input::-webkit-color-swatch{border:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input#padding,input#borderRadius,input#fontSize{width:100%}.copy-btn{background-color:var(--color-Primary-button);font:var(--navbuttons);font-weight:600;text-transform:uppercase;color:var(--color-Background);border:none;border-radius:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-3xl);margin:0 auto;box-shadow:var(--color-Background) 0 0 0 0,var(--color-Primary-button) 0 0 0 0;transition:box-shadow var(--timing),background-color var(--timing),color var(--timing)}.copy-btn:focus-within{outline:none}.copy-btn:focus-visible,.copy-btn:hover{cursor:pointer;outline:none;box-shadow:var(--color-Background) 0 0 0 2px,var(--color-Primary-button) 0 0 0 4px}