@layer elements{*{line-height:calc(var(--length-3xs-2xs) + 2ex)}:focus{outline:none;scroll-padding-block-end:8vb}:focus-visible{border-radius:var(--length-4xs);box-shadow:0 0 0 var(--line-length-l) var(--white);outline:var(--line-length-l) solid var(--gray-14);outline-offset:.125em}[id]{scroll-margin-block-start:var(--length-xl)}::selection{background-color:var(--teal)}html{accent-color:var(--color-accent);color-scheme:light dark;scrollbar-gutter:stable;@media (prefers-reduced-motion:no-preference){scroll-behavior:smooth}}body{background-color:var(--color-bg);color:var(--color-fg);font-kerning:normal;font-optical-sizing:auto;font-family:Recursive,Recursive Fallback,sans-serif;font-size:var(--font-size);font-variant-ligatures:common-ligatures no-discretionary-ligatures no-historical-ligatures contextual;font-variant-numeric:oldstyle-nums proportional-nums;font-variation-settings:"slnt" 0, "CASL" 0, "CRSV" .5, "MONO" 0;hanging-punctuation:first allow-end last;hyphenate-limit-chars:7 4 3;hyphenate-limit-last:always;hyphenate-limit-lines:2;hyphenate-limit-zone:8%;hyphens:auto;max-inline-size:min(90rem,100%);padding:var(--length-s-3xl);text-size-adjust:none;text-wrap:pretty;margin-inline:auto;font-style:normal;font-weight:400;overflow:auto;container:inline-size}section{margin-block:var(--length-l-3xl)}h1,h2,h3,h4{--spacing:-.02em;color:var(--color-fg-strong);font-variant-numeric:lining-nums;hyphens:manual;letter-spacing:var(--spacing);letter-spacing:calc(progress(1em, 1rem, 3rem) * (var(--spacing) * 2));text-wrap:balance;font-weight:700}h1{font-size:var(--font-size-5xl);margin-block-end:.28em}h2{font-size:var(--font-size-3xl);margin-block:1em .75em}h3{font-size:var(--font-size-xl);margin-block:1.25em .83em}h4{font-size:var(--font-size-l);margin-block:1.5em 1em}code,pre{overflow-block:auto;max-inline-size:100%}pre{border-radius:var(--length-xs);font-size:var(--font-size-s);overflow-inline:auto;padding-block:var(--length);padding-inline:var(--length);margin-block:0;margin-inline:0;line-height:1;&:not(:hover,:focus){filter:grayscale()}}code{font-family:Recursive,monospace;font-size:inherit;font-variant-numeric:tabular-nums lining-nums slashed-zero;font-variation-settings:"slnt" 0, "CASL" 0, "CRSV" .5, "MONO" 1;&:not(pre code){background-color:var(--color-bg-secondary);border-radius:var(--length-3xs);padding-inline:.3em;font-family:inherit;font-size:.9em}}blockquote{border-inline-start:var(--line-length-xl) solid var(--color-line);color:var(--color-fg);padding-block:var(--length-xs);margin-inline-start:0;padding-inline-start:var(--length-s)}:is(ul,ol,dl){padding-inline-start:0;list-style-position:inside;& :is(ul,ol,dl){padding-inline-start:.5lh}}a{&:any-link{cursor:pointer;text-decoration-skip-ink:auto;text-decoration-thickness:max(.08em, var(--line-length-l));text-underline-offset:.1em;transition:text-decoration-color var(--duration) var(--timing-function)}&:link,&:visited{text-decoration-color:oklch(from currentcolor l c h / 70%)}&:link{color:inherit}&:hover,&:focus-within{text-decoration-color:var(--color-accent)}&:active{text-decoration-color:var(--color-accent-strong)}&:visited{color:var(--color-fg-muted);&:hover,&:focus-within{color:var(--color-fg)}}}abbr{text-underline-offset:.3em}svg{max-inline-size:100%;display:block}label{margin-block-end:var(--length-xs);display:block}button,input,textarea{border:var(--line-length) solid var(--color-line);color:inherit;font-family:inherit;font-size:inherit;hyphens:none;text-wrap:wrap}input,textarea{background-color:var(--color-bg-secondary);border-radius:var(--length-xs);box-sizing:border-box;inline-size:100%;padding-block:var(--length-s);padding-inline:var(--length);&:focus-within{border-radius:var(--length-xs)}}textarea{min-block-size:calc(3lh + (var(--length) * 2));scrollbar-gutter:stable}button{background-color:light-dark(var(--color-bg),var(--color-bg-tertiary));border-radius:var(--length-2xs);box-shadow:var(--shadow);color:var(--color-fg);cursor:pointer;font-size:var(--font-size-s);gap:var(--length-3xs);padding-block:var(--length-3xs);padding-inline:var(--length-2xs);transition:transform var(--duration) var(--timing-function);font-weight:600;display:flex;& svg{color:var(--color-fg)}&:hover,&:active{background-color:var(--color-accent-subtle);color:var(--color-fg-strong);& svg{color:var(--color-accent)}}&:active{box-shadow:var(--shadow-s);transform:translateY(1px);& svg{color:var(--color-accent-strong)}}}}@layer components{@scope(section.acknowledgements){:scope{@media (width>30em){text-align:center;max-inline-size:60ch;margin-inline:auto}}}@scope(nav.back){a{&:any-link{color:var(--color-fg-strong);font-size:var(--font-size-s);text-transform:uppercase;align-items:center;font-weight:600;display:inline-flex}}}@scope(code-comparison){:scope{border-radius:var(--length-xs);gap:var(--length-2xs);display:grid;&:not(:hover,:focus) pre{filter:grayscale()}}pre{&:not(:hover,:focus){filter:none}}div:nth-of-type(2){border-inline-start:var(--line-length) solid var(--color-line)}button{block-size:var(--length-xl);inline-size:var(--length-l)}}@scope(copy-clipboard){input{font-variant-numeric:tabular-nums lining-nums slashed-zero;font-variation-settings:"slnt" 0, "CASL" 0, "CRSV" .5, "MONO" 1;align-self:start}span:first-of-type svg{button:hover &{color:var(--color-accent)}}span:nth-of-type(2) svg{color:var(--color-success)}}@scope(footer){:scope{border-block-start:var(--line-length) solid var(--color-line);font-size:var(--font-size-s);gap:var(--length-2xs) var(--length-3xs);padding-block:var(--length-l-xl);margin-block-start:var(--length-l-xl);display:grid;@media (width>30em){grid-template-columns:1fr auto}}p,a{color:var(--color-fg-muted);place-items:center;display:flex}p{margin-block:0;&:first-of-type{gap:var(--length-2xs)}&:last-of-type{gap:var(--length-3xs)}}a{gap:var(--length-3xs);&:hover,&:focus-within{color:var(--color-fg)}}svg{block-size:1em;inline-size:1em}}@scope(section.get-started) to (.info-popover *){form{@media (width>60em){grid-row:span 6}}div{& div{position:relative;& .info-popover{z-index:5;position:absolute;inset-block-start:var(--length-xs);inset-inline-end:var(--length-xs)}@media (width>60em){grid-row:span 6;grid-template-rows:subgrid;gap:0;display:grid}}}:scope>div{gap:var(--length-xl) var(--length-2xl);display:grid;@media (width>60em){grid-template-rows:auto auto auto 1fr auto auto;grid-template-columns:repeat(2,1fr)}}code-comparison{@media (width>60em){grid-row:span 5}}prompt-cycler{@media (width>60em){grid-row:span 3;grid-template-rows:subgrid;display:grid}}copy-clipboard{@media (width>60em){grid-template-rows:subgrid;display:grid}}label{&:last-of-type{margin-block-start:var(--length)}}p{&:first-of-type{margin-block:0 var(--length-xs)}&:last-of-type{padding-inline:var(--length-s);place-items:center;margin-block-start:var(--length-xs);display:grid}}small{color:var(--color-fg-muted);font-size:var(--font-size-xs);text-align:center}}@scope(header){a{color:var(--color-fg-strong);font-size:var(--font-size-s);text-transform:uppercase;font-weight:600;text-decoration:none}svg{block-size:1.2lh;inline-size:1.2lh;margin-inline:var(--length-4xs);vertical-align:-.15em;display:inline}path{&:first-of-type{fill:var(--color-fg-strong);:scope:hover &{fill:var(--purple);transition:fill var(--duration) var(--timing-function)}}&:last-of-type{fill:light-dark(var(--gray-98),var(--gray-14))}}}@scope(section.hero){h1{max-inline-size:26ch}p{font-size:var(--font-size-xl);max-inline-size:46ch;font-weight:300}}@scope(span.info-popover){:scope{&[data-variant=inline]{--info-popover-size:.8em;--info-popover-position:bottom;--info-popover-margin-block:var(--length-2xs);--info-popover-margin-inline:var(--length-2xs)}}button{box-shadow:none;color:var(--color-fg);font-size:var(--font-size);background-color:#0000;border:none;border-radius:50%;padding:0;display:inline-flex;&:hover,&:active{color:var(--color-fg-strong);background-color:#0000}}svg{block-size:var(--info-popover-size,1em);inline-size:var(--info-popover-size,1em)}dialog{background-color:light-dark(var(--color-bg),var(--color-bg-quaternary));border:var(--line-length) solid var(--color-line);border-radius:var(--length-2xs);box-shadow:var(--shadow-l);color:var(--color-fg);font-size:var(--font-size-xs);margin-block:var(--info-popover-margin-block,var(--length-4xs));margin-inline:var(--info-popover-margin-inline,var(--length-4xs));max-inline-size:30ch;padding-block:var(--length-2xs);padding-inline:var(--length-s);position-area:var(--info-popover-position,bottom left);text-align:center}}@scope(aside.lint){:scope{border:var(--line-length) solid var(--color-line);border-radius:var(--length-xs);padding-block:var(--length-2xs);padding-inline:var(--length);@media (width>30em){text-align:center;place-items:center;max-inline-size:48ch;margin-inline:auto;display:grid}}h2{font-size:var(--font-size-l)}p{&:first-of-type{margin-block:0}&:last-of-type{background-color:var(--color-bg-secondary);border-radius:var(--length-2xs);font-size:var(--font-size-s);gap:var(--length-2xs) var(--length-s);padding:var(--length-xs);grid-template-columns:auto 1fr;place-items:center;display:grid;& svg{block-size:2lh;fill:var(--color-fg-strong);inline-size:auto}@media (width>30em){text-align:start;place-content:space-around;place-items:center;max-inline-size:47ch}}}}@scope(prompt-cycler){nav{gap:var(--length);margin-block-start:var(--length-s);&>button{padding:var(--length-3xs);& svg{block-size:1lh;inline-size:1lh}}}span{align-items:center;gap:var(--length-2xs);display:flex;& span{background-color:var(--color-bg-tertiary);block-size:var(--length-2xs);inline-size:var(--length-2xs);border-radius:50%;&[aria-current=step]{background-color:var(--color-accent)}}}}@scope(p.signpost){:scope{margin-block-start:var(--length-l)}a{&:any-link{color:var(--color-fg-strong);align-items:center;font-weight:600;text-decoration:none;display:inline-flex;position:relative}& span{text-decoration:underline;text-decoration-thickness:max(.08em, var(--line-length-xl));text-underline-offset:.2em;transition:text-decoration-color var(--duration-l) var(--timing-function), text-decoration-thickness var(--duration-l) var(--timing-function), text-underline-offset var(--duration-l) var(--timing-function-elastic)}& svg{transition:transform var(--duration-l) var(--timing-function-elastic);padding-inline-start:var(--length-s);position:absolute;inset-inline-start:95%}&:hover,&:focus-within{& span{text-decoration-color:var(--color-accent);text-decoration-thickness:max(.12em, var(--line-length-xl));text-underline-offset:.4em}& svg{transform:translate(4px)}}&:active{& span{text-decoration-color:var(--color-accent-strong);text-decoration-thickness:var(--line-length-xl);text-underline-offset:.2em;transition:none}}}}@scope(div.sub){main{max-inline-size:65ch}}@scope(section.what){:scope{@media (width>30em){text-align:center;max-inline-size:90ch;margin-inline:auto}}li{background-color:var(--color-bg-secondary);border-radius:var(--length-xs);padding-block:var(--length);padding-inline:var(--length);transition:opacity var(--duration-l) var(--timing-function);container-type:inline-size;& h3{font-size:var(--font-size-l);margin-block:0 var(--length-xs)}& p{font-size:var(--font-size);margin-block:0}& code{background-color:var(--color-bg-tertiary)}}ul{gap:var(--length);margin-block:var(--length-l) 0;grid-template-columns:repeat(auto-fill,minmax(min(100%,15em),1fr));list-style:none;display:grid;&:has(li:hover,li:focus-within) li:not(:hover,:focus-within){opacity:.55}}}@scope(section.why){:scope{@media (width>30em){text-align:center;max-inline-size:60ch;margin-inline:auto}}}}@font-face{font-display:swap;font-family:Recursive;font-style:normal;font-weight:300 1000;src:url(/recursive.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{ascent-override:82.84%;descent-override:21.8%;font-family:Recursive Fallback;font-style:normal;font-weight:400;line-gap-override:0%;size-adjust:114.67%;src:local(Arial)}:root{--white:oklch(100% 0 0);--gray-14:oklch(14% 0 0);--gray-16:oklch(16% 0 0);--gray-20:oklch(20% 0 0);--gray-30:oklch(30% 0 0);--gray-35:oklch(35% 0 0);--gray-55:oklch(55% 0 0);--gray-62:oklch(62% 0 0);--gray-75:oklch(75% 0 0);--gray-85:oklch(85% 0 0);--gray-94:oklch(94% 0 0);--gray-98:oklch(98% 0 0);--pink:light-dark(oklch(55% .25 350),oklch(75% .18 350));--teal:light-dark(oklch(92% .04 190),oklch(30% .06 195));--purple:light-dark(oklch(44% .16 303),oklch(64% .12 303));--green:light-dark(oklch(65% .2 145),oklch(85% .12 145));--color-fg:light-dark(var(--gray-35),var(--gray-75));--color-fg-strong:light-dark(var(--gray-14),var(--gray-98));--color-fg-muted:light-dark(var(--gray-55),var(--gray-62));--color-bg:light-dark(var(--white),var(--gray-16));--color-bg-secondary:light-dark(var(--gray-98),var(--gray-20));--color-bg-tertiary:light-dark(var(--gray-94),var(--gray-30));--color-bg-quaternary:light-dark(var(--gray-85),var(--gray-35));--color-line:light-dark(var(--gray-85),var(--gray-35));--color-accent:var(--pink);--color-accent-strong:light-dark(oklch(from var(--color-accent) 45% c h),oklch(from var(--color-accent) 65% c h));--color-accent-subtle:light-dark(oklch(from var(--color-accent) 99% .0038 h),oklch(from var(--color-accent) 30% .005 h));--color-success:var(--green);--font-size-xs:clamp(.6914rem, .6814rem + .0498cqi, .72rem);--font-size-s:clamp(.7778rem, .7353rem + .2126cqi, .9rem);--font-size:clamp(.875rem, .788rem + .4348cqi, 1.125rem);--font-size-l:clamp(.9844rem, .8376rem + .7337cqi, 1.4063rem);--font-size-xl:clamp(1.1074rem, .8812rem + 1.1311cqi, 1.7578rem);--font-size-2xl:clamp(1.2458rem, .9149rem + 1.6546cqi, 2.1973rem);--font-size-3xl:clamp(1.4016rem, .9338rem + 2.3391cqi, 2.7466rem);--font-size-4xl:clamp(1.5768rem, .9311rem + 3.2286cqi, 3.4332rem);--font-size-5xl:clamp(1.7739rem, .8982rem + 4.3785cqi, 4.2915rem);--length-4xs:clamp(.125rem, .1143rem + .0543cqi, .1563rem);--length-3xs:clamp(.25rem, .2283rem + .1087cqi, .3125rem);--length-2xs:clamp(.4375rem, .394rem + .2174cqi, .5625rem);--length-xs:clamp(.6875rem, .6223rem + .3261cqi, .875rem);--length-s:clamp(.875rem, .788rem + .4348cqi, 1.125rem);--length:clamp(1.3125rem, 1.1821rem + .6522cqi, 1.6875rem);--length-l:clamp(1.75rem, 1.5761rem + .8696cqi, 2.25rem);--length-xl:clamp(2.625rem, 2.3641rem + 1.3043cqi, 3.375rem);--length-2xl:clamp(3.5rem, 3.1522rem + 1.7391cqi, 4.5rem);--length-3xl:clamp(5.25rem, 4.7283rem + 2.6087cqi, 6.75rem);--length-4xl:clamp(7rem, 6.3043rem + 3.4783cqi, 9rem);--length-3xs-2xs:clamp(.375rem, .3315rem + .2174cqi, .5rem);--length-s-3xl:clamp(.875rem, -1.1685rem + 10.2174cqi, 6.75rem);--length-l-xl:clamp(1.75rem, 1.1848rem + 2.8261cqi, 3.375rem);--length-l-3xl:clamp(1.75rem, .0109rem + 8.6957cqi, 6.75rem);--line-length:1px;--line-length-l:1.5px;--line-length-xl:2px;--duration:.175s;--duration-l:.3s;--timing-function:cubic-bezier(.4, 0, .2, 1);--timing-function-elastic:cubic-bezier(.34, 1.56, .64, 1);--shadow-s:inset 0 1px 0 0 oklch(from var(--white) l c h / 20%), 0 1px 2px light-dark(oklch(from var(--gray-30) l c h / 15%),transparent), 0 2px 4px light-dark(oklch(from var(--gray-30) l c h / 5%),transparent);--shadow:inset 0 1px 0 0 oklch(from var(--white) l c h / 30%), 0 1px 2px light-dark(oklch(from var(--gray-30) l c h / 10%),transparent), 0 2px 4px light-dark(oklch(from var(--gray-30) l c h / 8%),transparent), 0 4px 8px light-dark(oklch(from var(--gray-30) l c h / 4%),transparent), 0 8px 16px light-dark(oklch(from var(--gray-30) l c h / 2%),transparent);--shadow-l:inset 0 1px 0 0 oklch(from var(--white) l c h / 30%), 0 1px 2px light-dark(oklch(from var(--gray-30) l c h / 10%),transparent), 0 2px 4px light-dark(oklch(from var(--gray-30) l c h / 8%),transparent), 0 4px 8px light-dark(oklch(from var(--gray-30) l c h / 6%),transparent), 0 8px 16px light-dark(oklch(from var(--gray-30) l c h / 4%),transparent), 0 16px 32px light-dark(oklch(from var(--gray-30) l c h / 3%),transparent)}