@font-face{font-family:Inter;src:url(/fonts/Inter-Variable.woff2)format("woff2");font-weight:100 900;font-display:swap}@font-face{font-family:Geist Mono;src:url(/fonts/GeistMono-Variable.woff2)format("woff2");font-weight:100 900;font-display:swap}:root{--bp-tint:oklch(85.1% .017 297.5);--bp-dark:oklch(23.6% .025 295);--bp-slate:oklch(44.8% .041 297.5);--bp-lime:oklch(84.7% .164 115.5);--bp-deep:oklch(19.1% .022 296.7);--bp-card:oklch(27.1% .028 296.7);--bp-mid:oklch(62.7% .036 296.8);--bp-bright:oklch(96.9% .005 297.7);--bp-ghost-tint:oklch(80% .023 297.3);--bp-ghost-dark:oklch(28.1% .031 295.1);--bp-ghost-slate:oklch(40.7% .045 294.5);--bp-font-sans:"Inter", system-ui, sans-serif;--bp-font-mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace}*,:before,:after{box-sizing:border-box;min-width:0}:root{interpolate-size:allow-keywords;scrollbar-gutter:stable;text-wrap:pretty;overflow-wrap:break-word;font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{min-height:100svh;margin:0}h1,h2,h3,h4{text-wrap:balance}img,svg,video{max-width:100%;height:auto;display:block}input,textarea,select{font-size:max(16px,1rem)}button,a,[role=button]{touch-action:manipulation}button,[role=button]{-webkit-user-select:none;user-select:none}:root{--text-tagline:clamp(2.75rem, 1.5419rem + 6.0403vw, 7.25rem);--text-opener:clamp(2.875rem, 1.4992rem + 6.8792vw, 8rem);--text-heading:clamp(2.5rem, 1.896rem + 3.0201vw, 4.75rem);--text-title:clamp(1.75rem, 1.4815rem + 1.3423vw, 2.75rem);--text-lede:clamp(1.0625rem, 1.0122rem + .2517vw, 1.25rem);--text-stat:clamp(2.75rem, 2.3473rem + 2.0134vw, 4.25rem);--text-counter:clamp(8.5rem, 3.735rem + 23.826vw, 26.25rem);--text-ghost-band:clamp(15rem, 8.2886rem + 33.557vw, 40rem);--text-ghost-hero:clamp(13.75rem, 8.7164rem + 25.1678vw, 32.5rem);--text-ghost-entry:clamp(8.75rem, 6.0654rem + 13.4228vw, 18.75rem);--text-panel-title:clamp(2.125rem, 1.7559rem + 1.8456vw, 3.5rem);--space-band:clamp(4rem, 2.9262rem + 5.3691vw, 8rem);--space-band-end:clamp(6rem, 4.5906rem + 7.047vw, 11.25rem);--space-entry:clamp(4.5rem, 3.8289rem + 3.3557vw, 7rem);--space-head:clamp(3rem, 2.2282rem + 3.8591vw, 5.875rem);--space-footer:clamp(4.5rem, 3.6946rem + 4.0268vw, 7.5rem);--wordmark-gap:clamp(2.25rem, 1.7802rem + 2.349vw, 4rem);--gutter:clamp(1rem, .4631rem + 2.6846vw, 3rem);--content:70.5625rem;--column:min(100cqi - var(--gutter) * 2, var(--content));--start:calc((100cqi - var(--column)) / 2);--anchor-offset:2rem;--header-bar:3.5rem;--ease-out:cubic-bezier(.23, 1, .32, 1);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-family:var(--bp-font-sans);color:var(--bp-dark);background:var(--bp-slate);scroll-padding-block-start:var(--anchor-offset);font-weight:500;line-height:1.5}@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}body{flex-direction:column;display:flex}main{container-type:inline-size}h1,h2,h3,h4,p,ol,ul,dl,dd,figure{margin:0}ol,ul{padding:0;list-style:none}a{color:inherit}code,pre{font-family:var(--bp-font-mono)}::selection{background:var(--bp-lime);color:var(--bp-dark)}:focus-visible{outline-offset:.25em;outline:max(2px,.08em) solid}@view-transition{navigation:auto}.band,.site-header{--soft:color-mix(in oklch, var(--ink) 66%, transparent);--text:color-mix(in oklch, var(--ink) 86%, transparent);--line:color-mix(in oklch, var(--ink) 45%, transparent);--art-ground:var(--ground);isolation:isolate;color:var(--ink);background:var(--ground);position:relative}.band{overflow:clip}.band-tint,.site-header{--ink:var(--bp-dark);--ground:var(--bp-tint);--ghost:var(--bp-ghost-tint)}.band-dark{--ink:var(--bp-tint);--ground:var(--bp-dark);--ghost:var(--bp-ghost-dark)}.band-slate{--ink:var(--bp-tint);--ground:var(--bp-slate);--ghost:var(--bp-ghost-slate)}.label{letter-spacing:.05em;text-transform:uppercase;font-size:.65625rem;font-weight:700;line-height:1.25}.icon{inline-size:var(--size,1rem);block-size:var(--size,1rem);-webkit-mask:var(--icon) center / contain no-repeat;mask:var(--icon) center / contain no-repeat;background:currentColor;flex:none;display:inline-block}.icon-arrow{--icon:url(/icons/arrow.svg);--size:.875rem}.icon-copy{--icon:url(/icons/copy.svg);--size:.875rem}.icon-github{--icon:url(/icons/github.svg)}.icon-grip{--icon:url(/icons/grip.svg);--size:.875rem}.icon-index{--icon:url(/icons/index.svg)}.icon-info{--icon:url(/icons/info.svg);--size:1.5rem}.icon-open{--icon:url(/icons/open.svg);--size:.875rem}.icon-out{--icon:url(/icons/arrow-up-right.svg);--size:.75em}.icon-spark{--icon:url(/icons/spark.svg)}.icon-target{--icon:url(/icons/target.svg)}.with-icon{align-items:center;gap:.5rem;display:inline-flex}.ghost{z-index:-1;letter-spacing:-.06em;color:var(--ghost);white-space:nowrap;pointer-events:none;-webkit-user-select:none;user-select:none;font-weight:800;line-height:1;position:absolute}.band-head{border-block-end:4px solid var(--ink);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.25rem 1rem;padding-block-end:.8125rem;display:flex}.mark{aspect-ratio:57.4359/56;background:currentColor;flex:none;inline-size:3.5897rem;display:block;-webkit-mask:url(/mark.svg) 50%/contain no-repeat;mask:url(/mark.svg) 50%/contain no-repeat}.content-grid{grid-template-columns:[full-width-start] minmax(var(--gutter), 1fr) [content-start] min(100% - var(--gutter) * 2, var(--content)) [content-end] minmax(var(--gutter), 1fr) [full-width-end];display:grid}:is(.content-grid,.full-width)>*{grid-column:content}:is(.content-grid,.full-width)>.full-width{grid-column:full-width;grid-template-columns:inherit;display:grid}.pill{border:1px solid color-mix(in oklch, var(--ink) 60%, transparent);font:inherit;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);cursor:pointer;background:0 0;border-radius:999px;flex:none;align-items:center;gap:.5rem;padding:.6875rem 1rem;font-size:.65625rem;font-weight:700;line-height:1.25;text-decoration:none;display:inline-flex}.pill-filled{border-color:var(--ink);background:var(--ink);color:var(--ground)}@media (hover:hover) and (pointer:fine){.pill:hover{border-color:var(--ink)}.pill-filled:hover{border-color:var(--bp-lime);background:var(--bp-lime);color:var(--bp-dark)}}:is(.pill,.install-command button,.carousel-buttons button,.card,.phases button):active{scale:.97}@media (prefers-reduced-motion:no-preference){:is(.pill,.install-command button,.carousel-buttons button,.card,.phases button){transition:scale .16s var(--ease-out)}}:is(.pill,.viewport-bar :is(button,a),.current,.footer-links a,.entry-index a){position:relative}:is(.pill,.viewport-bar :is(button,a),.current,.footer-links a,.entry-index a):after{content:"";position:absolute;inset:min(0px,50% - 22px)}.install-command{background:var(--bp-dark);min-block-size:3.25rem;color:var(--bp-tint);flex-wrap:wrap;display:flex}.install-command code{-webkit-user-select:all;user-select:all;flex:999 14rem;align-self:center;padding:.75rem 1rem;font-size:.84375rem;font-weight:500;line-height:1.4}.install-command code:before{content:"$ ";color:color-mix(in oklch, var(--bp-tint) 60%, transparent)}.install-command button{background:var(--bp-lime);min-block-size:2.75rem;min-inline-size:4.75rem;font:inherit;letter-spacing:.05em;text-transform:uppercase;color:var(--bp-dark);cursor:pointer;border:0;flex:1 0 auto;justify-content:center;align-items:center;gap:.5rem;padding-inline:1rem;font-size:.65625rem;font-weight:700;display:flex}.install-command button .icon{display:none}@media (hover:hover) and (pointer:fine){.install-command button:hover{background:color-mix(in oklch, var(--bp-lime) 80%, var(--bp-tint))}}.site-header{z-index:2;padding-block-start:3.5rem}.site-header-bar{align-items:center;gap:.5rem;min-block-size:3.5rem;display:flex}.github{margin-inline-start:auto}.mark:active{opacity:.6}.install{border:1.5px solid var(--bp-dark);background:var(--bp-tint);inline-size:min(100% - 2rem,30rem);box-shadow:0 1.5rem 3rem color-mix(in oklch, var(--bp-dark) 35%, transparent);color:var(--bp-dark);padding:1.5rem;font-size:.9375rem;line-height:1.5}.install>*+*{margin-block-start:1rem}.install a{text-underline-offset:.2em;font-weight:600}.install-title{letter-spacing:-.04em;font-size:1.5rem;font-weight:800;line-height:1}[popover]{opacity:0;transition:opacity .2s var(--ease-out), translate .2s var(--ease-out), display .2s allow-discrete, overlay .2s allow-discrete}[popover]:popover-open{opacity:1}@starting-style{[popover]:popover-open{opacity:0}}@media (prefers-reduced-motion:no-preference){[popover]{translate:0 .5rem}[popover]:popover-open{translate:0}@starting-style{[popover]:popover-open{translate:0 .5rem}}}@supports (position-area:block-end){[popover]{position-area:block-end span-inline-start;position-try-fallbacks:flip-block, flip-inline, flip-block flip-inline;margin:0;margin-block-start:.5rem}}.current,.menu{display:none}@keyframes in-view{0%,to{visibility:visible;max-inline-size:14rem}}@keyframes out-of-view{0%,to{visibility:hidden;max-inline-size:0}}@keyframes current-category{0%,to{color:var(--bp-dark);background:var(--bp-lime)}}@property --header-ink{syntax:"<color>";inherits:true;initial-value:#000}@property --header-ground{syntax:"<color>";inherits:true;initial-value:#fff}@property --header-accent{syntax:"<color>";inherits:true;initial-value:#000}@keyframes header-tone{0%{--header-ink:var(--bp-dark);--header-ground:var(--bp-tint);--header-accent:var(--bp-dark);border-color:#0000}to{--header-ink:var(--bp-tint);--header-ground:var(--bp-dark);--header-accent:var(--bp-lime);border-color:color-mix(in oklch, var(--bp-tint) 20%, transparent)}}@media (width<56rem){:root{--anchor-offset:calc(var(--header-bar) + 1rem)}.site-header{--ink:var(--header-ink);--ground:var(--header-ground);animation:linear both header-tone;animation-timeline:scroll();animation-range:0px var(--header-bar);border-block-end:1px solid;padding-block-start:0;position:sticky;inset-block-start:0}.site-header-bar{min-block-size:var(--header-bar)}.site-header .mark{aspect-ratio:1;inline-size:2.75rem;margin-inline:-.375rem .125rem;-webkit-mask-size:2rem;mask-size:2rem}.github{padding:.6875rem}.github-label{clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;position:absolute;overflow:clip}.category,[data-slot=categories]{view-timeline-axis:block;view-timeline-inset:var(--header-bar) calc(100% - var(--header-bar) - 1px)}.current{font:inherit;letter-spacing:.05em;text-transform:uppercase;color:inherit;text-align:start;cursor:pointer;background:0 0;border:0;align-items:center;gap:.5rem;padding:0;font-size:.65625rem;font-weight:700;line-height:1.25;display:inline-flex}.current:before{content:"";background:var(--header-accent);flex:none;order:1;block-size:.75rem;inline-size:.75rem;-webkit-mask:url(/icons/plus.svg) 50%/contain no-repeat;mask:url(/icons/plus.svg) 50%/contain no-repeat}.current:active{opacity:.6}.site-header:has(.menu:popover-open) .current:before{-webkit-mask-image:url(/icons/minus.svg);mask-image:url(/icons/minus.svg)}.current-names{display:flex;overflow:clip}.current-names>*{white-space:nowrap;text-overflow:ellipsis;overflow:clip}.current-names>:first-child{animation:linear out-of-view}.current-names>:not(:first-child){visibility:hidden;max-inline-size:0;animation:linear in-view}.menu{border:1.5px solid var(--bp-tint);background:var(--bp-dark);min-inline-size:15rem;box-shadow:0 1.5rem 3rem color-mix(in oklch, var(--bp-dark) 50%, transparent);color:var(--bp-tint);padding:0}.menu:popover-open{display:block}.menu li+li{border-block-start:1px solid color-mix(in oklch, var(--bp-tint) 25%, transparent)}.menu a{outline-offset:-3px;padding:.75rem 1rem;font-size:.9375rem;font-weight:600;text-decoration:none;animation:linear current-category;display:block}.menu a:active{background:color-mix(in oklch, var(--bp-tint) 15%, transparent)}@supports (position-area:block-end){.menu{position-area:block-end span-inline-end}}}@media (hover:hover) and (pointer:fine){.menu a:hover{background:color-mix(in oklch, var(--bp-tint) 10%, transparent)}.current:hover .current-names{text-underline-offset:.2em;text-decoration:underline}}.hero{align-content:center;min-block-size:43rem;padding-block:3rem 6rem}.hero>.ghost{font-size:var(--text-ghost-hero);inset-block-start:calc(100% - 17.25rem);inset-inline-start:calc(var(--start) - 1.5rem)}.hero-main{--art:clamp(20rem, 30cqi, 28rem);--reach:min(var(--start) - var(--gutter), 9rem);grid-template-columns:minmax(0, 48rem) minmax(calc(var(--art) - var(--reach)), 1fr);align-items:center;column-gap:4rem;display:grid}.hero-text{gap:var(--wordmark-gap);display:grid}.hero-text h1 img{inline-size:100%;translate:-.75%}.hero-art{inline-size:var(--art);justify-self:end;margin-inline-end:calc(var(--reach) * -1);container-type:inline-size}.hero-art .nodes circle{r:calc(3.8px * (448px / 100cqi))}.hero-install{gap:.5625rem;max-inline-size:41.25rem;display:grid}.hero-install>.label:last-child{color:color-mix(in oklch, var(--ink) 72%, transparent);margin-block-start:.5625rem}.hero-install-head{justify-content:space-between;display:flex}.hero-install-head span+span{color:color-mix(in oklch, var(--ink) 60%, transparent)}.hero .install-command{min-block-size:4.125rem}.hero .install-command code{padding-inline:1.375rem;font-size:clamp(.875rem,.7rem + .55vw,1.0625rem);font-weight:600}.hero .install-command button{min-inline-size:7rem}.hero .install-command button .icon{display:block}.stats{padding-block:var(--space-head) 6.5rem}.stats:before{content:"";z-index:-1;opacity:.13;background:currentColor;block-size:41.25rem;inline-size:53.75rem;position:absolute;inset-block-start:-5rem;inset-inline-start:calc(var(--start) + var(--column) * .5385);-webkit-mask:url(/patterns/box-model-wide.svg) 50%/contain no-repeat;mask:url(/patterns/box-model-wide.svg) 50%/contain no-repeat}.tagline{max-inline-size:7em;font-size:var(--text-tagline);letter-spacing:-.05em;margin-block-start:2.5rem;font-weight:800;line-height:.92;translate:-.05em}.statement{letter-spacing:-.02em;margin-block-start:1.625rem;font-size:1.1875rem;font-weight:600;line-height:1.3}.stat-cells{grid-template-columns:388fr 388fr 353fr;margin-block-start:4.375rem;display:grid}.stat{display:grid}.stat>a{text-decoration:none;display:grid}.stat+.stat{margin-inline-start:-1.5px}.stat-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.25rem 1rem;padding-block-end:.9375rem;padding-inline-end:.875rem;display:flex}.stat-head>*{white-space:nowrap}.stat-head>:last-child{color:color-mix(in oklch, var(--ink) 55%, transparent)}.stat-cell{border:1.5px solid var(--ink);align-content:end;gap:1rem;min-block-size:10.5rem;padding:2.5rem 1.25rem 1.375rem;display:grid;position:relative}.stat-cell:before{content:"";background:var(--bar,var(--ink));block-size:.875rem;position:absolute;inset:.375rem .375rem auto}.stat-cell b{font-size:var(--text-stat);letter-spacing:-.05em;font-weight:700;line-height:1}.stat-cell span{letter-spacing:-.015em;color:var(--text);font-size:.875rem;font-weight:600}.stat:nth-child(2) .stat-cell{--bar:var(--bp-mid)}.stat:nth-child(3) .stat-cell{--bar:var(--bp-lime)}@media (hover:hover) and (pointer:fine){.stat a:hover .stat-cell{background:color-mix(in oklch, var(--ink) 6%, transparent)}}.stat a:active .stat-cell{background:color-mix(in oklch, var(--ink) 10%, transparent)}.categories{padding-block-start:var(--space-head);container-type:inline-size}.categories:after{content:"";z-index:-1;background:radial-gradient(circle, var(--ink) .8px, transparent 1px) 0 0 / 1rem 1rem;opacity:.34;block-size:17.125rem;position:absolute;inset:auto 0 0}.categories h2{font-size:var(--text-heading);letter-spacing:-.05em;margin-block-start:1.5rem;font-weight:800;line-height:1;translate:-.05em}.carousel{--gap:1.3125rem;--pad:max(var(--gutter), (100cqi - var(--content)) / 2);--card:max(16rem, (100cqi - var(--pad) * 2 - var(--gap) * 2) / 3);gap:var(--gap);padding-inline:var(--pad);scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);overscroll-behavior-x:contain;scrollbar-width:none;grid-column:full-width;margin-block-start:2.625rem;display:flex;overflow-x:auto}.carousel>*{inline-size:var(--card);scroll-snap-align:start;flex:none;container-type:inline-size}@media (prefers-reduced-motion:no-preference){.carousel{scroll-behavior:smooth}}.card{--ink:var(--bp-tint);--ground:var(--bp-card);--art-ground:var(--ground);aspect-ratio:362/452;background:var(--ground);color:var(--ink);outline-offset:-.5rem;grid-template-rows:auto 1fr auto;padding:6.1cqi 6.63cqi 6.63cqi;text-decoration:none;display:grid;position:relative}[data-current]>.card{--ink:var(--bp-dark);--ground:var(--bp-lime)}.card-title{letter-spacing:-.035em;font-size:clamp(1.25rem,6.63cqi,1.5rem);font-weight:700;line-height:1.2}.card .art{place-self:center;inline-size:86.2cqi}.card-count{align-items:baseline;gap:.625rem;display:flex}.card-count b{letter-spacing:-.05em;font-size:12.7cqi;font-weight:700;line-height:.8}.card-open{aspect-ratio:1;border:1px solid color-mix(in oklch, var(--ink) 55%, transparent);border-radius:50%;place-items:center;inline-size:2.25rem;display:grid;position:absolute;inset-block-end:6.63cqi;inset-inline-end:6.63cqi}[data-current]>.card>.card-open{border-color:var(--ink);background:var(--ink);color:var(--ground)}@media (hover:hover) and (pointer:fine){.card:hover .card-open{border-color:var(--ink);background:var(--ink);color:var(--ground)}}.phases{grid-auto-columns:1fr;grid-auto-flow:column;gap:.25rem;margin-block-start:2.625rem;display:grid}.phases button{border:0;border-block-start:.5rem solid color-mix(in oklch, var(--ink) 30%, transparent);block-size:2.75rem;inline-size:100%;font:inherit;color:color-mix(in oklch, var(--ink) 75%, transparent);text-align:start;cursor:pointer;outline-offset:-2px;background:0 0;padding:1rem 0 0 .5rem;display:block;position:relative}.phases button:before{content:"";background:color-mix(in oklch, var(--ink) 60%, transparent);block-size:.75rem;inline-size:1px;position:absolute;inset-block-start:0;inset-inline-start:0}.phases button .label{font-size:.625rem}.phases button[aria-pressed=true]{border-color:var(--bp-lime);color:var(--bp-lime)}@media (hover:hover) and (pointer:fine){.phases button:not([aria-pressed=true]):hover{border-color:var(--ink);color:var(--ink)}}.carousel-controls{grid-template:"count total buttons""count name buttons"1fr/auto auto 1fr;align-items:start;column-gap:clamp(1rem,4vw,3.5rem);margin-block-start:1.125rem;margin-block-end:calc(var(--text-counter) * -.3333);display:grid}.counter{font-size:var(--text-counter);font-variant-numeric:tabular-nums;letter-spacing:-.06em;white-space:nowrap;grid-area:count;font-weight:800;line-height:1;translate:-.05em}.counter-total{letter-spacing:-.02em;grid-area:total;padding-block-start:calc(var(--text-counter) * .2);font-size:1.375rem;font-weight:700;line-height:1}.counter-name{color:color-mix(in oklch, var(--ink) 80%, transparent);grid-area:name;padding-block-start:.75rem}.carousel-buttons{grid-area:buttons;justify-self:end;gap:.75rem;padding-block-start:calc(var(--text-counter) * .186);display:flex}.carousel-buttons button{aspect-ratio:1;border:1.5px solid var(--ink);background:var(--ink);inline-size:3.25rem;color:var(--ground);cursor:pointer;border-radius:50%;place-items:center;padding:0;display:grid}.carousel-buttons button:disabled{background:var(--ground);color:var(--ink);opacity:.6;cursor:default}.carousel-buttons [data-carousel-dir="-1"] .icon{rotate:180deg}@media (hover:hover) and (pointer:fine){.carousel-buttons button:not(:disabled):hover{border-color:var(--bp-lime);background:var(--bp-lime);color:var(--bp-dark)}}.art{aspect-ratio:1;display:block}.art>svg{block-size:100%;inline-size:100%;overflow:visible}.art .solid-dark{display:none}[data-current] .art .solid{display:none}[data-current] .art .solid-dark{display:inline}.opener-tile .nodes circle{r:5.43px}.footer-art .nodes circle{r:6.54px}.category{padding-block:var(--space-band) var(--space-band-end)}.category>.ghost{font-size:var(--text-ghost-band);inset-block-start:-.336em;inset-inline-start:calc(var(--start) + var(--column) * .37)}.opener{border-block-start:6px solid;border-image:linear-gradient(90deg, var(--bp-lime) 25%, var(--ink) 25%) 1;grid-template-columns:minmax(0,1fr) 12.5rem;align-items:start;column-gap:1.8125rem;padding-block-start:2.25rem;display:grid}.opener-text{gap:1.125rem;max-inline-size:56.25rem;display:grid}.opener-text h2{font-size:var(--text-opener);letter-spacing:-.055em;font-weight:800;line-height:.96;translate:-.03em}.opener-meta{color:var(--soft);align-items:center;gap:.75rem;display:flex}.opener-number{background:var(--bp-lime);color:var(--bp-dark);padding:.375rem .5625rem}.opener-dash{opacity:.7;background:currentColor;block-size:1px;inline-size:1.75rem}.opener-tile{padding:.5rem}.entry-index{grid-template-columns:1fr 1fr;grid-template-rows:repeat(var(--rows), auto);border:1.5px solid var(--ink);grid-auto-flow:column;margin-block-start:.875rem;display:grid;overflow:clip}.entry-index li{border-block-start:1px solid var(--ink);border-inline-start:1.5px solid var(--ink);margin-block-start:-1px;margin-inline-start:-1.5px}.entry-index a{letter-spacing:-.012em;outline-offset:-3px;align-items:center;gap:.75rem;min-block-size:2.625rem;padding:.5rem .875rem;font-size:.9375rem;font-weight:600;line-height:1.3;text-decoration:none;display:flex}.entry-index a .label{inline-size:1.5rem;color:var(--soft);flex:none}.entry-index a code{font:inherit}@media (hover:hover) and (pointer:fine){.entry-index a:hover{background:color-mix(in oklch, var(--ink) 8%, transparent)}}.entry-index a:active{background:color-mix(in oklch, var(--ink) 14%, transparent)}.entries{margin-block-start:var(--space-entry)}.entry{grid-template-columns:191fr 938fr;display:grid}.entry+.entry{margin-block-start:var(--space-entry)}.entry-number{flex-direction:column;align-items:start;gap:.25rem;padding:2.375rem 0 0 3.75rem;display:flex;position:relative}.entry-number .label{color:var(--soft);font-size:.625rem}.entry-number b{letter-spacing:-.045em;font-size:1.625rem;font-weight:800;line-height:1.2}.entry-number .ghost{font-size:var(--text-ghost-entry);inset-block-start:-.147em;inset-inline-start:-.787em}.entry-body{border-block-start:4px solid;border-image:linear-gradient(90deg, var(--bp-lime) 6rem, var(--ink) 6rem) 1;padding-block-start:2.25rem}.entry-body>*+*{margin-block-start:var(--flow-space,2.25rem)}.entry h3{font-size:var(--text-title);letter-spacing:-.045em;font-weight:800;line-height:1.136}.entry h3 code{font:inherit}.lede{--flow-space:1.125rem;max-inline-size:46.625rem;font-size:var(--text-lede);letter-spacing:-.025em;color:var(--text);line-height:1.55}.lede:empty{display:none}.lede code{letter-spacing:0;color:var(--ink);font-size:.9em;font-weight:600}.specimen{grid-template-columns:minmax(0,1fr);gap:1.125rem;display:grid}.viewport{--bar:2.875rem;--panel-ink:var(--bp-tint);--panel-bar:var(--bp-deep);--panel-ground:var(--bp-dark);grid-template-rows:var(--bar) 1fr;width:100%;min-width:min(100%,20rem);max-width:100%;height:calc(var(--frame-height) + var(--bar));background:var(--panel-ground);min-height:10rem;max-height:calc(100svh - 4rem);color:var(--panel-ink);margin-inline:auto;display:grid;position:relative;overflow:clip}.band-dark .viewport{--panel-ink:var(--bp-dark);--panel-bar:var(--bp-ghost-tint);--panel-ground:var(--bp-tint)}.viewport iframe{border:0;width:100%;height:100%;min-height:0}.viewport[data-resizing] iframe{pointer-events:none}.viewport-grip{block-size:2.75rem;inline-size:1.875rem;color:color-mix(in oklch, var(--panel-ink) 66%, transparent);outline-offset:-3px;cursor:nwse-resize;touch-action:none;background:0 0;border:0;place-items:center;padding:0;display:grid;position:absolute;inset-block-end:0;inset-inline-end:0}.viewport-grip:active{opacity:.5}@media (pointer:coarse){.viewport-grip:after{content:"";position:absolute;inset:min(0px,50% - 22px)}}.viewport-bar{border-block-end:1px solid color-mix(in oklch, var(--panel-ink) 40%, transparent);background:var(--panel-bar);font-family:var(--bp-font-mono);align-items:center;gap:.625rem;padding-inline:1.125rem .6875rem;font-size:.75rem;font-weight:500;line-height:1;display:flex}.viewport-size{letter-spacing:.04em;white-space:nowrap;color:color-mix(in oklch, var(--panel-ink) 86%, transparent);flex:1;align-items:center;gap:.625rem;display:flex;overflow:clip}.viewport-size:before{content:"";background:var(--bp-lime);flex:none;block-size:6px;inline-size:6px}.viewport-open{border:1px solid color-mix(in oklch, var(--panel-ink) 50%, transparent);border-radius:50%;flex:none;place-items:center;block-size:1.5rem;inline-size:1.5rem;text-decoration:none;display:grid}.viewport-open-label{display:none}.viewport-widths{border:1px solid color-mix(in oklch, var(--panel-ink) 50%, transparent);border-radius:999px;flex:none;padding:2px;display:flex}.viewport-widths button{block-size:1.5rem;min-inline-size:2.5rem;font:inherit;color:color-mix(in oklch, var(--panel-ink) 66%, transparent);outline-offset:-2px;cursor:pointer;background:0 0;border:0;border-radius:999px;padding:0 .375rem;font-size:.6875rem}.viewport-widths button[aria-pressed=true]{background:var(--bp-lime);color:var(--bp-dark);font-weight:700}@media (hover:hover) and (pointer:fine){.viewport-widths button:not([aria-pressed=true]):hover{color:var(--panel-ink)}.viewport-open:hover{border-color:var(--panel-ink)}}.viewport-widths button:not([aria-pressed=true]):active,.viewport-open:active{opacity:.6}.check{letter-spacing:-.012em;max-inline-size:51.75rem;color:color-mix(in oklch, var(--ink) 74%, transparent);align-items:start;gap:.5rem;font-size:.875rem;line-height:1.643;display:flex}.check .icon{--size:1lh}.check code{font-size:.9em}.no-specimen{border:1.5px dashed var(--ink);text-align:center;place-content:center;gap:.5rem;min-height:16rem;padding:1.5rem;display:grid}.folds{border:3px solid var(--ink)}.fold+.fold{border-block-start:1.5px solid var(--ink)}.fold summary{outline-offset:-4px;cursor:pointer;align-items:center;gap:1rem;min-block-size:3.75rem;padding:.75rem 1rem .75rem 1.375rem;list-style:none;display:flex}.fold summary::-webkit-details-marker{display:none}.fold summary:after{content:"";background:currentColor;flex:none;block-size:1.75rem;inline-size:1.75rem;-webkit-mask:url(/icons/plus.svg) 50%/.75rem no-repeat,radial-gradient(closest-side,#0000 calc(100% - 1.5px),#000 calc(100% - 1.5px) 100%,#0000 100%);mask:url(/icons/plus.svg) 50%/.75rem no-repeat,radial-gradient(closest-side,#0000 calc(100% - 1.5px),#000 calc(100% - 1.5px) 100%,#0000 100%)}.fold[open] summary{background:var(--ink);color:var(--ground)}.fold[open] summary:after{background:var(--bp-lime);-webkit-mask-image:url(/icons/minus.svg),radial-gradient(closest-side,#000 calc(100% - .5px),#0000 100%);mask-image:url(/icons/minus.svg),radial-gradient(closest-side,#000 calc(100% - .5px),#0000 100%);-webkit-mask-position:50%,0 0;mask-position:50%,0 0;-webkit-mask-size:.75rem,auto;mask-size:.75rem,auto;-webkit-mask-repeat:no-repeat,repeat;mask-repeat:no-repeat,repeat;-webkit-mask-clip:border-box,border-box;mask-clip:border-box,border-box;-webkit-mask-origin:border-box,border-box;mask-origin:border-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.fold-title{letter-spacing:-.025em;flex:auto;font-size:1.0625rem;font-weight:700;line-height:1.25}.fold-meta{text-align:end;opacity:.66}@media (hover:hover) and (pointer:fine){.fold:not([open]) summary:hover{background:color-mix(in oklch, var(--ink) 8%, transparent)}}.fold summary:active .fold-title{opacity:.7}details::details-content{height:0;overflow:clip}details[open]::details-content{height:auto}@media (prefers-reduced-motion:no-preference){details::details-content{transition:height .3s var(--ease-out), content-visibility .3s allow-discrete}}.source{background:var(--bp-deep);color:color-mix(in oklch, var(--bp-tint) 86%, transparent);padding-block:1.625rem 1.75rem}.source-text{padding:.5rem 1.5rem .5rem 4rem;font-size:.9375rem;line-height:1.6}.source-text+.code-block,.code-block+.source-text{margin-block-start:1rem}.source-text code{color:var(--bp-tint);font-size:.9em}.code-block{grid-template-columns:2.75rem minmax(0,1fr);column-gap:1.25rem;font-size:.875rem;line-height:1.5625rem;display:grid}.code-block+.code-block{margin-block-start:1.5rem}.code-block pre{scrollbar-color:color-mix(in oklch, var(--bp-tint) 30%, transparent) transparent;tab-size:2;-webkit-mask-image:linear-gradient(to right, transparent, #000 var(--code-fade-start), #000 calc(100% - var(--code-fade-end)), transparent);mask-image:linear-gradient(to right, transparent, #000 var(--code-fade-start), #000 calc(100% - var(--code-fade-end)), transparent);margin:0;padding-inline-end:1.5rem;animation:linear code-edges;animation-timeline:scroll(self inline);overflow-x:auto}.code-block code{font-size:inherit}@property --code-fade-start{syntax:"<length>";inherits:false;initial-value:0}@property --code-fade-end{syntax:"<length>";inherits:false;initial-value:0}@keyframes code-edges{0%{--code-fade-start:0px;--code-fade-end:2.5rem}10%,90%{--code-fade-start:2.5rem;--code-fade-end:2.5rem}to{--code-fade-start:2.5rem;--code-fade-end:0px}}.code-lines{white-space:pre;text-align:end;color:color-mix(in oklch, var(--bp-tint) 50%, transparent);-webkit-user-select:none;user-select:none}.code-block .token:is(.selector,.tag){color:var(--bp-tint)}.code-block .token:is(.property,.attr-name,.keyword,.important,.atrule .rule){color:var(--bp-lime)}.code-block .token:is(.function,.string,.attr-value,.url,.atrule){color:var(--bp-bright)}.code-block .token:is(.punctuation,.operator){color:color-mix(in oklch, var(--bp-tint) 66%, transparent)}.code-block .token.comment{color:color-mix(in oklch, var(--bp-tint) 50%, transparent)}.notes{padding:.625rem 2.5rem 1.125rem}.note{grid-template-columns:9.375rem minmax(0,1fr);column-gap:1.75rem;padding-block:1.875rem;display:grid}.note+.note{border-block-start:1px solid var(--ink)}.note-label{color:var(--text);align-self:start;align-items:center;gap:.5625rem;padding-block-start:.4375rem;display:flex}.note-label:before{content:"";background:var(--bp-lime);flex:none;block-size:6px;inline-size:6px}:is(.note-items,.note-body){letter-spacing:-.012em;max-inline-size:42.5rem;color:var(--text);font-size:1.03125rem;line-height:1.6364}:is(.note-items,.note-body) code{letter-spacing:0;color:var(--ink);font-size:.9em;font-weight:600}:is(.note-items,.note-body) a{color:var(--ink);text-underline-offset:.2em}:is(.note-items,.note-body) strong{color:var(--ink);font-weight:700}@media (hover:hover) and (pointer:fine){:is(.note-items,.note-body,.install,.prose,.footer-install) a:hover{text-decoration-thickness:2px}}.note-items{counter-reset:item;gap:1rem;display:grid}.note-items li{counter-increment:item;grid-template-columns:2.125rem minmax(0,1fr);display:grid}.note-items li:before{content:counter(item, decimal-leading-zero);letter-spacing:.05em;color:var(--soft);font-size:.65625rem;font-weight:700;line-height:2.5714}.note-body{gap:1rem;display:grid}.browsers{border:1.5px solid var(--ink);justify-self:start;display:flex}.browsers>div{gap:.25rem;inline-size:11.875rem;padding:1.75rem 1rem .75rem;display:grid;position:relative}.browsers>div+div{border-inline-start:1.5px solid var(--ink)}.browsers>div:before{content:"";background:var(--bar,var(--ink));block-size:.625rem;position:absolute;inset:.375rem .375rem auto}.browsers [data-browser=Firefox]{--bar:var(--bp-mid)}.browsers [data-browser=Safari]{--bar:var(--bp-lime)}.browsers dt{letter-spacing:.05em;text-transform:uppercase;color:var(--soft);font-size:.625rem;font-weight:700}.browsers dd{letter-spacing:-.045em;color:var(--ink);font-size:2.25rem;font-weight:700;line-height:1}.credits{gap:.75rem;font-size:.90625rem;line-height:1.6552}.page{padding-block:var(--space-band) var(--space-band-end);flex:1}.page h1{font-size:var(--text-opener);letter-spacing:-.055em;font-weight:800;line-height:.96;translate:-.03em}.page-statement{max-inline-size:36rem;font-size:var(--text-lede);letter-spacing:-.02em;text-wrap:balance;margin-block-start:2rem;font-weight:600;line-height:1.4}.prose{max-inline-size:42.5rem;color:var(--text);margin-block-start:3rem;font-size:1.03125rem;line-height:1.6364}.prose>*+*{margin-block-start:1em}.prose :is(ul,ol){gap:.5rem;padding-inline-start:1.25rem;list-style:square;display:grid}.prose a{color:var(--ink);text-underline-offset:.2em}.prose code{color:var(--ink);font-size:.9em}.site-footer{margin-block-start:auto;padding-block-start:var(--space-footer)}.footer-top{grid-template-columns:548fr 545fr;align-items:center;gap:2.25rem;display:grid}.footer-top:has(.footer-art:empty){grid-template-columns:minmax(0,34.25rem)}.footer-install{--ink:var(--bp-dark);--ground:var(--bp-tint);isolation:isolate;background:var(--ground);color:var(--ink);justify-items:start;padding:2.5rem;display:grid;position:relative;overflow:clip}.footer-install:before{content:"";z-index:-1;aspect-ratio:1;background:var(--bp-dark);opacity:.12;inline-size:32.5rem;position:absolute;inset-block-start:-6.875rem;inset-inline-start:15.625rem;-webkit-mask:url(/patterns/box-model-square.svg) 50%/contain no-repeat;mask:url(/patterns/box-model-square.svg) 50%/contain no-repeat}.footer-install .mark{inline-size:3.5897rem}.footer-install h2{max-inline-size:6.5em;font-size:var(--text-panel-title);letter-spacing:-.045em;text-wrap:wrap;margin-block-start:2rem;font-weight:800;line-height:.98;translate:-.05em}.footer-install p{letter-spacing:-.015em;max-inline-size:28.25rem;color:color-mix(in oklch, var(--ink) 90%, transparent);margin-block-start:1.375rem;font-size:1.03125rem;line-height:1.48}.footer-install a{text-underline-offset:.2em;font-weight:600}.footer-install .install-command{justify-self:stretch;margin-block-start:2.5rem}.footer-art{grid-template-columns:repeat(4,1fr);gap:1.5rem .75rem;display:grid}.footer-art .art{justify-self:center;inline-size:min(100%,7.75rem)}.footer-art:empty{display:none}.footer-links{border:1.5px solid var(--ink);grid-template-columns:repeat(4,1fr);margin-block-start:5.625rem;display:grid}.footer-links>div{align-content:start;justify-items:start;gap:.75rem;min-block-size:13.1rem;padding:1.125rem 1.25rem 1.5rem;display:grid}.footer-links>div+div{border-inline-start:1.5px solid var(--ink)}.footer-links .label{border-block-end:1px solid var(--line);justify-self:stretch;margin-block-end:.25rem;padding-block-end:.875rem}.footer-links a{letter-spacing:-.02em;font-size:1.0625rem;font-weight:600;line-height:1.3;text-decoration:none}.footer-soft{opacity:.8}.footer-links .with-icon{display:inline}.footer-links .with-icon .icon{margin-inline-start:.375rem}@media (hover:hover) and (pointer:fine){.footer-links a:hover{text-underline-offset:.2em;text-decoration:underline}}.footer-links a:active{opacity:.6}.footer-end{border-block-start:4px solid;border-image:linear-gradient(90deg, var(--bp-lime) 25%, var(--ink) 25%) 1;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem 2rem;margin-block-start:3.25rem;padding-block-start:1.125rem;display:flex}.footer-end p:last-child{letter-spacing:-.015em;font-size:.875rem;font-weight:600}.footer-wordmark{aspect-ratio:768/74;background:var(--ghost);margin-block-start:4.75rem;-webkit-mask:url(/wordmark.svg) top/100% no-repeat;mask:url(/wordmark.svg) top/100% no-repeat}@media (width<56rem){.hero{min-block-size:0;padding-block:3.5rem 7rem}.hero>.ghost{inset-block:auto -.35em;inset-inline:auto calc(var(--start) - .25em)}.hero-main{row-gap:var(--wordmark-gap);grid-template-columns:minmax(0,1fr)}.hero-art{justify-self:start;inline-size:min(100%,28rem);margin-block-end:1.5rem;margin-inline-end:0}.stat-cells{grid-template-columns:minmax(0,1fr);gap:1.75rem}.stat+.stat{margin-inline-start:0}.stat-head{column-gap:.75rem;padding-inline-end:0}.stat-cell{flex-wrap:wrap;align-items:last baseline;gap:.5rem 1.25rem;min-block-size:0;padding:2.625rem 1.125rem 1.25rem;display:flex}.stat-cell span{flex:7rem}.carousel-controls{grid-template:"count total""count name""count buttons"1fr/auto minmax(0,1fr);margin-block-end:0;padding-block-end:1.5rem}.carousel-buttons{justify-self:start;gap:.5rem;padding-block-start:1rem}.carousel-buttons button{inline-size:2.75rem}.hero .install-command button{min-inline-size:4.75rem}.hero .install-command button .icon{display:none}.opener{grid-template-columns:minmax(0,1fr) 6rem;column-gap:1rem}.entry{grid-template-columns:minmax(0,1fr)}.entry-number{flex-direction:row;align-items:baseline;gap:.625rem;padding:0 0 1rem}.entry-number b{font-size:1.25rem}.entry-number .ghost{inset-block-start:-.32em;inset-inline:auto -.1em}.footer-top{grid-template-columns:minmax(0,1fr)}.footer-links{grid-template-columns:1fr 1fr}.footer-links>div{min-block-size:0}.footer-links>div:nth-child(3){border-inline-start:0}.footer-links>div:nth-child(n+3){border-block-start:1.5px solid var(--ink)}.footer-links>div{gap:0;padding-block-end:.75rem}.footer-links :is(a,.with-icon){padding-block:.6875rem;display:block}}@media (width<40rem){.carousel{--card:clamp(15rem, 100cqi - var(--pad) * 2 - 3.5rem, 22rem)}.carousel>*{scroll-snap-stop:always}.phases{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:row;row-gap:1rem}.specimen{margin-inline:calc(var(--gutter) * -1)}.check{padding-inline:var(--gutter)}.viewport-widths{display:none}.viewport-open{border-radius:999px;gap:.5rem;block-size:1.75rem;inline-size:auto;padding-inline:.75rem .625rem;display:flex}.viewport-open-label{display:inline}.fold summary{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title sign""meta sign";gap:.375rem 1rem;padding-block:.875rem;padding-inline-start:1.125rem;display:grid}.fold summary:after{grid-area:sign}.fold-title{grid-area:title}.fold-meta{text-align:start;grid-area:meta}.entry-index{grid-template-rows:none;grid-template-columns:minmax(0,1fr);grid-auto-flow:row}.opener{grid-template-columns:minmax(0,1fr)}.opener-tile{display:none}.entry-body{padding-block-start:1.75rem}.notes{padding-inline:1.25rem}.note{grid-template-columns:minmax(0,1fr);row-gap:1rem;padding-block:1.5rem}.browsers{justify-self:stretch}.browsers>div{flex:1;inline-size:auto;padding-inline:.75rem}.browsers dd{font-size:1.75rem}.source-text{padding-inline-start:1.25rem}.code-block{grid-template-columns:1.75rem minmax(0,1fr);column-gap:.75rem;font-size:.8125rem}.footer-install{padding:1.5rem}.footer-art{gap:1rem .5rem}}