@layer reset{:where(.button){all:unset}*,:before,:after{box-sizing:border-box}html{height:100%}body{min-height:100%;margin:0;line-height:1.3}img,picture,video,canvas,svg{max-width:100%;display:block}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6,li{overflow-wrap:break-word}#root,#__next{isolation:isolate}}@layer vendor;@layer variables{@layer color{:root{--c-gray-100:#f7f8f8;--c-gray-200:#e4e6e7;--c-gray-300:#ccd0d1;--c-gray-400:#a7adaf;--c-gray-500:#8c9497;--c-gray-600:#666e70;--c-gray-700:#494e50;--c-gray-800:#303436;--c-gray-900:#161718;--c-red-100:#fff0f0;--c-red-200:#ffcccf;--c-red-300:#ff9ea3;--c-red-400:#ff575f;--c-red-500:#ff242f;--c-red-600:#c70f18;--c-red-700:#900910;--c-red-800:#5d090d;--c-red-900:#2c0709;--c-yellow-100:ivory;--c-yellow-200:#fefacd;--c-yellow-300:#fde468;--c-yellow-400:#fbca37;--c-yellow-500:#f6b51e;--c-yellow-600:#e09e06;--c-yellow-700:#916308;--c-yellow-800:#5d3a09;--c-yellow-900:#291a05;--c-green-100:#f0fff4;--c-green-200:#ccffda;--c-green-300:#85ffa5;--c-green-400:#37f66a;--c-green-500:#09e143;--c-green-600:#00a336;--c-green-700:#047130;--c-green-800:#074f29;--c-green-900:#02170d;--c-blue-100:#f0fbff;--c-blue-200:#cdf1fe;--c-blue-300:#69d5fc;--c-blue-400:#39c6f9;--c-blue-500:#0ab6f5;--c-blue-600:#0a85c2;--c-blue-700:#095a90;--c-blue-800:#07365f;--c-blue-900:#031121;--c-accent-light:var(--c-blue-200);--c-accent:var(--c-blue-300);--c-accent-dark:var(--c-blue-400)}@media (prefers-color-scheme:dark){:root{--c-accent-light:var(--c-yellow-200);--c-accent:var(--c-yellow-300);--c-accent-dark:var(--c-yellow-400)}}}@layer typography{:root{--step--2:clamp(.7561rem, .7233rem + .1644vw, .8507rem);--step--1:clamp(.8696rem, .8318rem + .189vw, .9783rem);--step-0:clamp(1rem, .9565rem + .2174vw, 1.125rem);--step-1:clamp(1.15rem, 1.1rem + .25vw, 1.2938rem);--step-2:clamp(1.3225rem, 1.265rem + .2875vw, 1.4878rem);--step-3:clamp(1.5209rem, 1.4548rem + .3306vw, 1.711rem);--step-4:clamp(1.749rem, 1.673rem + .3802vw, 1.9676rem);--step-5:clamp(2.0114rem, 1.9239rem + .4373vw, 2.2628rem);--font-size--xs:var(--step--2);--font-size--sm:var(--step--1);--font-size--md:var(--step-0);--font-size--lg:var(--step-1);--font-size--xl:var(--step-2);--font-size--2xl:var(--step-3);--font-size--3xl:var(--step-4);--font-size--h1:var(--step-5);--font-family--sans:var(--font-atkinson);--font-family--mono:var(--font-atkinson-mono)}}:root{--transition-duration:.12s;--mark-size:min(var(--grid-size) * .4, 6vw);--mark-circle-size:calc(var(--mark-size) * .666667);--mark-circle-offset:calc(var(--mark-size) / 2 * .333333);--box-shadow:0 .1rem .1rem #0000001a, 0 .1rem .4rem #0000000a, 0 .1rem .6rem #0000000f;--box-shadow--hover:0 .1rem .1rem #0000001a, 0 .1rem .6rem #0000000f, 0 .1rem .8rem #00000014;--grid-line-color:var(--c-blue-200);--grid-line-thickness:.0625rem;--grid-size:2.8125rem;--gap:24px;--c-page-background:var(--c-gray-100);--c-text:var(--c-gray-700);--border-radius-500:.2rem}@media (prefers-color-scheme:dark){:root{--c-page-background:var(--c-gray-900);--c-text:var(--c-gray-100);--grid-line-color:var(--c-yellow-700)}}:root{--space-3xs:clamp(.25rem, .2283rem + .1087vw, .3125rem);--space-2xs:clamp(.5rem, .4783rem + .1087vw, .5625rem);--space-xs:clamp(.75rem, .7065rem + .2174vw, .875rem);--space-s:clamp(1rem, .9565rem + .2174vw, 1.125rem);--space-m:clamp(1.5rem, 1.4348rem + .3261vw, 1.6875rem);--space-l:clamp(2rem, 1.913rem + .4348vw, 2.25rem);--space-xl:clamp(3rem, 2.8696rem + .6522vw, 3.375rem);--space-2xl:clamp(4rem, 3.8261rem + .8696vw, 4.5rem);--space-3xl:clamp(6rem, 5.7391rem + 1.3043vw, 6.75rem);--space-3xs-2xs:clamp(.25rem, .1413rem + .5435vw, .5625rem);--space-2xs-xs:clamp(.5rem, .3696rem + .6522vw, .875rem);--space-xs-s:clamp(.75rem, .6196rem + .6522vw, 1.125rem);--space-s-m:clamp(1rem, .7609rem + 1.1957vw, 1.6875rem);--space-m-l:clamp(1.5rem, 1.2391rem + 1.3043vw, 2.25rem);--space-l-xl:clamp(2rem, 1.5217rem + 2.3913vw, 3.375rem);--space-xl-2xl:clamp(3rem, 2.4783rem + 2.6087vw, 4.5rem);--space-2xl-3xl:clamp(4rem, 3.0435rem + 4.7826vw, 6.75rem)}}@layer base{@layer typography{:root{font-family:var(--font-family--sans);color:var(--c-text);text-wrap:pretty}body{font-size:var(--step-0);line-height:1.5}a{color:var(--c-blue-700);transition:color var(--transition-duration)}a:hover{color:var(--c-blue-500)}@media screen{@media (prefers-color-scheme:dark){a{color:var(--c-yellow-300)}a:hover{color:var(--c-yellow-500)}}}.highlight{color:var(--c-blue-500)}@media (prefers-color-scheme:dark){.highlight{color:var(--c-yellow-500)}}h1,h2,h3,h4,h5,h6{text-wrap:balance;line-height:1.5}:is(h1,h2,h3,h4,h5,h6) .subtitle{font-size:.8em;font-style:italic;font-weight:lighter;display:block}h2,h3,h4,h5,h6,p,ul,ol{margin-block:.6em 0}li{margin-block:.25em 0}h1{line-height:var(--grid-size);font-size:var(--step-5);margin-block:0;transform:translateY(.1em)}h2{font-size:var(--step-4)}h3{font-size:var(--step-3)}h4{font-size:var(--step-2)}h5{font-size:var(--step-1)}h6{font-size:var(--step-0)}.astro-code{padding:1em}blockquote{border-inline-start:2px solid color-mix(in srgb, currentColor 15%, transparent);margin-inline:.5em;padding-inline:1em;font-style:italic}}@layer layout{:root{accent-color:var(--c-accent);background-color:var(--grid-line-color);overflow-x:hidden}:root:after{content:"Hello there!";color:var(--c-blue-300);text-transform:uppercase;padding:.2rem;font-weight:lighter;display:block;position:fixed;top:0;left:50%;translate:-50% -100%}@media (prefers-color-scheme:dark){:root{background-color:var(--c-yellow-300)}:root:after{color:var(--c-yellow-700)}}body{transition:color var(--transition-duration), background-color var(--transition-duration);background-color:var(--c-page-background);will-change:color, background-color;isolation:isolate;grid-template-rows:max-content 1fr max-content;grid-template-columns:minmax(0,1fr);display:grid;position:relative;overflow-x:hidden;container-type:inline-size}body:before,body:after{--mask:radial-gradient(ellipse at center var(--mask-y-start), #000, #000000c4 16.1%, #00000094 29.63%, #0000006c 40.94%, #0000004c 50.37%, #0003 58.28%, #00000020 65%, #00000012 70.89%, #00000009 76.3%, #00000004 81.56%, #00000001 87.04%, #0000 93.07%, #0000);content:"";pointer-events:none;will-change:background-image;z-index:-1;background-image:linear-gradient(var(--grid-line-color) var(--grid-line-thickness), transparent var(--grid-line-thickness)), linear-gradient(90deg, var(--grid-line-color) var(--grid-line-thickness), transparent var(--grid-line-thickness));background-size:var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);mask-image:var(--mask);position:absolute;left:0;right:0;overflow:hidden}body:before{--mask-y-start:top;height:min(50dvh, var(--grid-size) * 5);background-position:center calc(0% - var(--grid-line-thickness) + (var(--grid-size) / 2));top:0}body:after{--mask-y-start:bottom;height:min(50dvh, var(--grid-size) * 3);background-position:center calc(100% + var(--grid-line-thickness) + (var(--grid-size) / 2));bottom:0}.container{container-type:inline-size}.layout--1col{gap:var(--gap);width:min(calc(100cqw - calc(2 * var(--gap))), calc(var(--grid-size) * 14.2222));grid-template-columns:minmax(0,1fr);margin-inline:auto;display:grid}.layout--2col{--max-width:640px;gap:var(--space-m-l);width:min(calc(100cqw - calc(2 * var(--space-m-l))), var(--max-width));grid-template-columns:minmax(0,1fr);margin-inline:auto;display:grid}@media (width>1024px){.layout--2col{--max-width:1024px;grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.layout--2col>aside>h2:first-child{line-height:var(--grid-size);margin-top:0}}.heading-group{font-size:var(--font-size--h1);flex-wrap:wrap;align-items:center;display:flex}.heading-group>a{inline-size:2rem;block-size:var(--grid-size);transition:filter var(--transition-duration);align-items:center;display:flex}:is(.heading-group>a):hover{filter:brightness(.8)contrast(1.5)}.heading-group img{inline-size:calc(var(--grid-size) / 3);block-size:calc(var(--grid-size) / 3);object-fit:contain}.heading-group h1{margin:0}video{aspect-ratio:16/9;width:100%}hr{border:0;border-top:1px solid var(--c-text);opacity:.5}.scroll-x{max-width:100%;overflow-x:scroll}img{max-width:100%;height:auto}.sketchy-border{filter:url(#filter-squiggle);border:.3rem solid var(--c-gray-900);border-radius:.5rem}@media (prefers-color-scheme:dark){.sketchy-border{border-color:#fff}}.links-nextprev{padding:0;font-weight:700;list-style-type:""}}@layer buttons{.button{--vertical-padding:.75em;--vertical-padding-ratio:.65;cursor:pointer;padding:calc(var(--vertical-padding) * var(--vertical-padding-ratio)) .7em calc(var(--vertical-padding) * calc(1 - var(--vertical-padding-ratio)));background-image:linear-gradient(to bottom right, var(--c-blue-400), var(--c-green-400));text-transform:uppercase;text-align:center;color:#fff;transition:background var(--transition-duration), filter var(--transition-duration);border-radius:.2em;font-weight:700;line-height:1.25;display:inline-block}.button:hover{filter:contrast(1.1);background-image:linear-gradient(to bottom right, var(--c-blue-500), var(--c-green-500))}.button.secondary{color:var(--c-blue-500);border:2px solid var(--c-blue-500);background:0 0}.button.pill{border-radius:100vw}.button.full-width{width:100%;display:block}.button[class*=base-width]{width:100%}.button.base-width--sm{max-width:15rem}.button.base-width--md{max-width:20rem}.button.base-width--lg{max-width:30rem}.button.disabled,.button[disabled]{background-image:linear-gradient(to bottom right, var(--c-gray-400), var(--c-gray-200))}:is(.button.disabled,.button[disabled]):hover{cursor:not-allowed;filter:none;background-image:linear-gradient(to bottom right, var(--c-gray-400), var(--c-gray-200))}@media (prefers-color-scheme:dark){.button{background-image:linear-gradient(to bottom right, var(--c-yellow-600), var(--c-yellow-400))}.button:hover{background-image:linear-gradient(to bottom right, var(--c-yellow-700), var(--c-yellow-500))}}}}@layer layouts,components;@layer utilities{.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@supports (margin-trim:block){.trim-block-margins{margin-trim:block}}@supports not (margin-trim:block){.trim-block-margins>:first-child{margin-block-start:0}.trim-block-margins>:last-child{margin-block-end:0}}}@layer overrides;@layer components.all{@layer design-system{[data-page-type=design-system] main{width:min(calc(100cqw - calc(2 * var(--gap))), 1280px);margin-inline:auto}[data-page-type=design-system] section{padding-block:1rem}[data-page-type=design-system] .colors{border-collapse:collapse;table-layout:fixed;width:100%}:is([data-page-type=design-system] .colors) th,:is([data-page-type=design-system] .colors) td{padding:0}:is([data-page-type=design-system] .variant-name,[data-page-type=design-system] .family-name) div{aspect-ratio:1;justify-content:center;align-items:center;padding:.2rem;display:flex}:is([data-page-type=design-system] .color):before{content:"";aspect-ratio:1;display:block}}@layer header{.header--main{padding:calc(var(--grid-size) / 2) var(--grid-size) 0;margin-block:0 calc(var(--grid-size) / 2);position:relative}.theme-switcher{min-height:var(--grid-size);flex-wrap:wrap;justify-content:center;align-items:center;display:flex}.theme-switcher button{--c-fill:var(--c-accent-light);--c-fill-size:40%;inline-size:var(--grid-size);block-size:var(--grid-size);appearance:none;background:no-repeat radial-gradient(1rem circle at 50%, var(--c-fill) var(--c-fill-size), transparent calc(var(--c-fill-size) + 1px)) center;cursor:pointer;transition:background var(--transition-duration);border:0;margin:0}:is(.theme-switcher button):hover{--c-fill:var(--c-accent-dark)}.theme-switcher button{--c-accent-light:var(--c-blue-300);--c-accent:var(--c-blue-400);--c-accent-dark:var(--c-blue-500)}@media (prefers-color-scheme:dark){.theme-switcher button{--c-accent-light:var(--c-yellow-400);--c-accent:var(--c-yellow-500);--c-accent-dark:var(--c-yellow-600);--c-fill:var(--c-accent)}:is(.theme-switcher button):hover{--c-fill:var(--c-accent-light)}}@media (scripting:none){.theme-switcher{display:none}}.logo{width:max-content;height:calc(var(--grid-size));gap:calc(var(--mark-size) * .5);color:var(--c-text);transition:color var(--transition-duration), background var(--transition-duration), text-shadow var(--transition-duration), border-color var(--transition-duration);grid-template-columns:1fr auto 1fr;align-items:center;margin-inline:auto;text-decoration:none;display:grid}.logo:hover{color:var(--c-gray-900)}.logo:hover .group.base{opacity:0}.logo:hover .group.interaction{opacity:1}@media (prefers-color-scheme:dark){.logo{color:#fff}.logo:hover{text-shadow:0 0 1rem var(--c-yellow-600)}}.pre-mark{justify-self:end}.pre-mark,.post-mark{line-height:1;font-size:min(calc(var(--mark-size) * 1.8), 8cqw);text-transform:uppercase;font-weight:600}.mark{width:var(--mark-size);height:var(--mark-size);animation:15s linear infinite rotate;position:relative}.mark .group{width:100%;height:100%;transition:opacity var(--transition-duration);position:absolute;top:0;left:0}.base:is(.mark .group) .circle{mix-blend-mode:screen}.interaction:is(.mark .group){opacity:0}.interaction:is(.mark .group) .circle{mix-blend-mode:multiply}.mark .circle{width:var(--mark-circle-size);height:var(--mark-circle-size);top:0;left:calc(50% - calc(var(--mark-circle-size) / 2));transform-origin:center calc(var(--mark-size) / 2);border-radius:var(--mark-circle-size);mix-blend-mode:screen;position:absolute}@media (prefers-color-scheme:dark){.mark .circle{background:var(--c-yellow-500)}}.mark .red{background:var(--c-red-500)}.mark .green{background:var(--c-green-500);transform:rotate(240deg)}.mark .blue{background:var(--c-blue-500);transform:rotate(120deg)}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}}@layer nav{.nav--main ul{width:fit-content;min-height:var(--grid-size);font-size:var(--font-size--md);flex-wrap:wrap;justify-content:center;align-items:center;row-gap:.4rem;margin:0 auto;padding:0;list-style:none;display:flex}:is(.nav--main ul) a{color:var(--c-text);align-items:center;padding-inline:.6rem;text-decoration:none;display:flex}:is(:is(.nav--main ul) a):hover{color:var(--c-gray-900)}:is(.nav--main ul):hover a:not(:hover){color:var(--c-gray-500)}@media (prefers-color-scheme:dark){:is(:is(.nav--main ul) a):hover{color:var(--c-text)}:is(.nav--main ul):hover a:not(:hover){color:var(--c-gray-400)}}}@layer footer{.footer--main{min-height:var(--grid-size);margin-block:calc(var(--grid-size) / 2);text-align:center;place-items:center;display:grid}.footer--main>*{margin:0;transform:translateY(.1rem)}}@layer component{.card{box-shadow:var(--box-shadow);transition:box-shadow var(--transition-duration);background:#fff;border-radius:1rem;padding:1.8rem;position:relative;overflow:hidden;container-type:inline-size}@supports (corner-shape:squircle){.card{corner-shape:squircle;border-radius:1.8rem}}@media (prefers-color-scheme:dark){.card{background:var(--c-gray-700)}}.social-icons ul{flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.social-icons li{display:block}.social-icons a{--size:min(1.5rem, var(--grid-size));inline-size:var(--grid-size);block-size:var(--grid-size);transition:all var(--transition-duration);place-items:center;display:grid;position:relative}:is(.social-icons a):has([src*=linkedin]):before{content:"";inset:calc(((var(--grid-size) - var(--size)) / 2) + .125rem);z-index:-1;background-color:#fff;border-radius:.125rem;display:block;position:absolute}.social-icons img{object-fit:contain;inline-size:var(--size);block-size:var(--size);display:block}@media (prefers-color-scheme:dark){[src*=github]:is(.social-icons img),[src*=codepen]:is(.social-icons img){filter:brightness(100)}}.feature-fallback .feature{display:none}@supports (animation-timeline:scroll(block root)){.feature-fallback.sda .feature{display:block}.feature-fallback.sda .fallback{display:none}}}}