@layer reset,fonts,tokens,base,components,layout;@layer reset.reset{*,*:before,*:after{box-sizing:border-box}html,body,div,span,applet,button,input,select,textarea,object,iframe,h1,h2,h3,h4,h5,h6,hr,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,main,menu,nav,output,ruby,section,summary,time,mark,audio,video{background:transparent;border:0;font:inherit;font-size:100%;margin:0;min-width:0;outline:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}body{line-height:1}ol,ul,menu{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}img,svg{display:block}table{border-collapse:collapse;border-spacing:0}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}html{scroll-behavior:initial}}dialog{border:0;padding:0}dialog:where(:focus-visible):focus,dialog:where(:focus-visible):active{outline:0}}@layer fonts.fonts{@font-face{font-display:swap;font-family:InterVariable;font-style:normal;font-weight:100 900;src:url(/InterVariable.woff2) format("woff2")}}@layer tokens.tokens{:root{--h-blue: 265;--lch-blue: 46% .3 var(--h-blue);--lch-blue-dark: 20% .3 var(--h-blue);--lch-blue-light: 96% .1 var(--h-blue);--lch-white: 100% 0% 0;--color-background: oklch(var(--lch-blue));--color-text: oklch(var(--lch-blue-light));--color-text-strong: oklch(var(--lch-white));--color-text-soft: oklch(var(--lch-blue-light) / .75);--color-border: oklch(var(--lch-white) / .25);--font-family: "InterVariable", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-size: calc(1em + 1vw) ;--font-size-x-small: 80%;--font-size-small: 90%;--font-size-medium: 100%;--font-size-large: 125%;--font-size-x-large: 150%;--font-size-xx-large: 200%;--font-weight: 400;--font-weight-medium: 500;--font-weight-semi-bold: 600;--font-weight-bold: 700;--letter-spacing: -.01em;--line-height: calc(1.3em + .5vw) ;--inline-spacing: 1ch;--block-spacing: 1rem;--border-radius: .25em;--scale: 4.5vw}@media(min-width:64em)and (hover:hover)and (pointer:fine){:root{--font-size: calc(1.25em + 1vw) ;--font-size-x-small: 50%;--font-size-small: 60%;--font-size-medium: 90%;--font-size-large: 125%;--font-size-x-large: 175%;--font-size-xx-large: 250%;--line-height: 1.3em}}}@layer base.base{html{background:var(--color-background);color:var(--color-text);font-feature-settings:"ss01","ss03";font-optical-sizing:auto;font-size:16px;font-weight:var(--font-weight);scroll-behavior:smooth}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;background:var(--color-background);font-size:var(--font-size);font-family:var(--font-family);line-height:var(--line-height);letter-spacing:var(--letter-spacing);margin:0;padding:0}section{margin-block:calc(var(--line-height) * 2) var(--line-height)}h2{color:var(--color-text-strong);font-size:var(--font-size-medium);line-height:var(--line-height);margin-block-end:calc(var(--line-height) / 3);font-weight:var(--font-weight-bold)}p{font-size:var(--font-size-medium);line-height:var(--line-height);margin-block-end:var(--line-height);max-inline-size:44ch;text-wrap:pretty}a{color:var(--color-text-strong);text-decoration-thickness:from-font;text-decoration-skip-ink:auto}a:hover{color:var(--color-text-soft)}:is(a,button){touch-action:manipulation;transition-property:background-color,border-color,box-shadow,filter,outline;transition:.1s ease-out}:is(a,button):where(:focus-visible){border-radius:var(--border-radius);outline:var(--focus-ring-size, 2px) solid var(--color-text-strong);outline-offset:var(--focus-ring-offset, 1px)}img,svg{display:block;max-width:100%;height:auto}}@layer components.components{.logo{--logo-size: clamp( calc(var(--block-spacing) * 3), var(--scale), calc(var(--block-spacing) * 4) );align-items:center;column-gap:calc(var(--inline-spacing) / 2);display:flex}.logo p{color:var(--color-text-strong);font-size:var(--font-size-small);font-weight:var(--font-weight-bold);margin:0;text-align:center}.logo svg{height:var(--logo-size);width:var(--logo-size)}.title{color:var(--color-text-strong);font-size:var(--font-size-xx-large);font-weight:var(--font-weight-bold);line-height:calc(var(--line-height) / 1.3);margin-block:0 calc(var(--line-height) / 3)}.caption{color:var(--color-text-soft);font-size:var(--font-size-x-small);margin-block:var(--line-height)}.description{max-width:30ch}.button{align-items:center;background-color:transparent;border-radius:var(--border-radius);border:1px solid var(--color-text-strong);display:inline-flex;font-size:var(--font-size-small);font-weight:var(--font-weight-semi-bold);justify-content:center;padding:calc(var(--block-spacing) / 2) calc(var(--inline-spacing) * 2);text-align:center;text-decoration:none}.button:hover{background-color:var(--color-text-soft);border-color:var(--color-text-soft)}.button--primary{background-color:var(--color-text-strong);color:var(--color-background)}.button--primary:hover{background-color:var(--color-text-soft)}.steps{color:var(--color-text);display:flex;flex-direction:column;font-size:var(--font-size-small);gap:calc(var(--line-height) / 2) var(--inline-spacing);min-width:0}.step{display:inline-flex;gap:var(--line-height) var(--inline-spacing);line-height:var(--line-height)}.step:before{color:var(--color-text-soft)}.step:nth-child(1):before{content:"①"}.step:nth-child(2):before{content:"②"}.step:nth-child(3):before{content:"③"}@container (width > 70ch){.steps{flex-direction:row;font-size:60%}.step:not(:last-of-type):after{content:"→";color:var(--color-text-soft)}}.screenshot{box-shadow:0 0 0 1px oklch(var(--lch-blue-dark) / .05),0 .1em 2.8em -.8em oklch(var(--lch-blue-dark) / .05),0 .2em 3.2em -1.2em oklch(var(--lch-blue-dark) / .15),0 .4em 2em -1.2em oklch(var(--lch-blue-dark) / .25),0 .6em 2.4em -1.6em oklch(var(--lch-blue-dark) / .35),0 .8em 2.8em -2em oklch(var(--lch-blue-dark) / .45);margin-block:0 calc(var(--line-height) * 2)}.footer{align-items:center;border-block-start:1px solid var(--color-border);color:var(--color-text-soft);display:flex;flex-direction:column;font-size:var(--font-size-x-small);gap:calc(var(--inline-spacing) / 2) var(--block-spacing);justify-content:space-between;margin-block-start:auto;padding-block:var(--block-spacing)}.footer a{color:inherit;text-decoration:none}.footer a:hover{color:var(--color-text)}@container (width > 30ch){.footer{flex-direction:row}}}@layer layout.layout{.container{margin-inline:auto;width:min(100%,80rem)}.layout{container-type:inline-size;display:grid;grid-template-rows:auto 1fr auto;min-height:100dvh;padding-inline:calc(var(--inline-spacing) * 2)}.layout header{padding-block:1rem}.layout main{margin-block-start:3em}}