.section-heading:where(.astro-ytvomcwp){display:flex;flex-direction:column;align-items:var(--alignment, start);gap:var(--spacing-16);text-align:center;.section-title{text-wrap:pretty;color:var(--text-color, var(--section-heading-title-color, var(--color-stone-950)))}.section-description{color:var(--text-color, var(--section-heading-description-color, var(--color-stone-950)));font:var(--paragraph-md)}}@media(width>=50rem){.section-heading:where(.astro-ytvomcwp){.section-description,.section-title{text-align:start}}}.playground:where(.astro-rnvx6ch7){display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--spacing-40);padding-block:var(--spacing-64)}.npm-snippet-wrapper .snippet-tabs{--npm-snippet-background: var(--color-beige-100)}.quick-links:where(.astro-cwwcjye3){display:grid;grid-template-columns:1fr;gap:var(--spacing-32);padding-block-start:var(--spacing-64);.quick-link{position:relative;padding:var(--spacing-32);background-color:var(--color-linen-100);border-radius:var(--radius-32);min-height:200px;display:flex;flex-direction:column;overflow:hidden;gap:var(--spacing-16);#snippets-mascot{display:none;position:absolute;right:-220px;top:58px;rotate:-18deg;transform-origin:50% 50%;transition:right .45s cubic-bezier(.34,1.26,.64,1),rotate .45s cubic-bezier(.34,1.56,.64,1);&.celebrating{right:-120px;rotate:-6deg}}.npm-snippet-wrapper{width:100%;padding:0;display:flex;flex-direction:column;gap:var(--spacing-16);.actions{display:flex;align-items:center;gap:var(--spacing-16);flex-direction:column;row-gap:var(--spacing-8);a{width:100%}.main-action{flex:1}a[data-variant=secondary]{background-color:var(--color-beige-100);&:hover{background-color:color-mix(in srgb,var(--color-linen-950) 4%,transparent)}}}}.icon{--size: 48px;--spacing: var(--spacing-16);position:relative;overflow:hidden;span{position:absolute;top:0;display:inline-flex;flex-direction:column;width:100%;transition:transform .25s linear(0,.341 7.8%,.609 16.1%,.807 25%,.882 29.8%,.941 34.8%,1.007 44%,1.035 54.6%,1.035 63.2%,1.006 86.3%,1)}svg{height:var(--size);width:var(--size);padding:var(--spacing-8)}height:var(--size);width:var(--size);border-radius:var(--radius-8);background-color:var(--color-beige-100);display:flex;justify-content:center;align-items:center}.title{display:flex;align-items:center;gap:var(--spacing-8);font:var(--label-lg);color:var(--color-stone-950);svg{--size: 20px;height:var(--size);width:var(--size)}}.description{font:var(--paragraph-md);color:var(--color-beige-950);line-height:var(--paragraph-md-spacing)}&:hover{.icon{span{transform:translateY(calc(-1 * var(--size)))}}}}}@media(width>=50rem){.quick-links:where(.astro-cwwcjye3){grid-template-columns:1fr 1fr;.quick-link:first-child{grid-column:1 / 3}.quick-link{#snippets-mascot{display:block}.npm-snippet-wrapper{padding-block:var(--spacing-32);max-width:400px;.actions{flex-direction:row;a{width:fit-content}}}}}}.component-gallery:where(.astro-gagzk4ub){padding-block:var(--spacing-64);background-color:#fff;.components-grid{padding-block:var(--spacing-40);display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:var(--spacing-48) var(--spacing-24);.component{display:flex;flex-direction:column;gap:var(--spacing-16);justify-content:center;.preview{padding:var(--spacing-24);display:flex;justify-content:center;align-items:center;height:248px;border-radius:var(--radius-32);border:1px solid var(--color-neutral-100);background-image:radial-gradient(color-mix(in srgb,var(--color-neutral-500) 80%,transparent) .5px,var(--color-neutral-50) .5px);background-size:10px 10px}.title{text-align:center;font:var(--label-lg)}}}}[data-icon=a11y]{[data-arm]{transform-box:fill-box;transition:rotate .25s linear(0,.341 7.8%,.609 16.1%,.807 25%,.882 29.8%,.941 34.8%,1.007 44%,1.035 54.6%,1.035 63.2%,1.006 86.3%,1)}[data-arm=left]{transform-origin:right center}[data-arm=right]{transform-origin:left center}}.feature:hover [data-icon=a11y]{--rotation-degree: 16deg;[data-arm=left]{rotate:var(--rotation-degree)}[data-arm=right]{rotate:calc(var(--rotation-degree) * -1)}}[data-icon=lego]{overflow:unset}[data-piece]{transition:transform .25s ease-out}[data-piece=top]{transition:transform .25s ease-out,opacity .25s ease-out}.feature:hover [data-icon=lego] [data-piece]{transition:transform .25s cubic-bezier(1,.015,.001,1)}.feature:hover [data-icon=lego] [data-piece=top]{transition:transform .25s cubic-bezier(1,.015,.001,1),opacity .25s ease-out;opacity:1}.feature:hover [data-icon=lego] [data-piece=bottom]{transition-delay:.1s}[data-piece=top]{transform:translateY(-40px);opacity:0}.feature:hover [data-icon=lego]{[data-piece=top]{transform:translateY(-14px)}[data-piece=bottom]{transform:translateY(1px)}}[data-icon=phone]{transition:transform .25s ease-in-out}[data-frame]{transition:d .35s linear(0,.341 7.8%,.609 16.1%,.807 25%,.882 29.8%,.941 34.8%,1.007 44%,1.035 54.6%,1.035 63.2%,1.006 86.3%,1)}[data-notch]{transform-origin:50% 50%;transform-box:fill-box;transition:transform .25s linear(0,.341 7.8%,.609 16.1%,.807 25%,.882 29.8%,.941 34.8%,1.007 44%,1.035 54.6%,1.035 63.2%,1.006 86.3%,1),opacity .35s ease-in-out}.feature:hover [data-icon=phone]{[data-frame]{d:path("M56 54V10C56 7.79086 54.2091 6 52 6L12 6C9.79086 6 8 7.79086 8 10L8 54C8 56.2091 9.79086 58 12 58H52C54.2091 58 56 56.2091 56 54Z")}}[data-icon=shield] [data-checkmark]{stroke-dasharray:32;stroke-dashoffset:32;transition:stroke-dashoffset .35s linear(0,.341 7.8%,.609 16.1%,.807 25%,.882 29.8%,.941 34.8%,1.007 44%,1.035 54.6%,1.035 63.2%,1.006 86.3%,1)}.feature:hover [data-icon=shield] [data-checkmark]{stroke-dashoffset:0}[data-icon=sip],[data-liquid-level]{transition:rotate .25s linear(0,.341 7.8%,.609 16.1%,.807 25%,.882 29.8%,.941 34.8%,1.007 44%,1.035 54.6%,1.035 63.2%,1.006 86.3%,1)}[data-liquid-level]{transform-box:fill-box;transform-origin:center center;transition:rotate .25s linear(0,.341 7.8%,.609 16.1%,.807 25%,.882 29.8%,.941 34.8%,1.007 44%,1.035 54.6%,1.035 63.2%,1.006 86.3%,1),d .25s linear(0,.341 7.8%,.609 16.1%,.807 25%,.882 29.8%,.941 34.8%,1.007 44%,1.035 54.6%,1.035 63.2%,1.006 86.3%,1)}.feature:hover [data-icon=sip]{rotate:-45deg;[data-liquid-level]{rotate:45deg;d:path("M20.87 37.25H32.87")}}[data-swatch-page]{transform-box:view-box;transform-origin:19px 45px;transition:rotate .25s linear(0,.341 7.8%,.609 16.1%,.807 25%,.882 29.8%,.941 34.8%,1.007 44%,1.035 54.6%,1.035 63.2%,1.006 86.3%,1)}.feature:hover [data-icon=swatch]{[data-swatch-page=front]{rotate:80deg}[data-swatch-page=middle]{rotate:-20deg}[data-swatch-page=rear]{rotate:-80deg}}.features:where(.astro-vnivfuh2){display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));padding-block:var(--spacing-64);align-items:center;justify-content:center;text-align:center;gap:var(--spacing-64) var(--spacing-40);.feature{display:flex;align-items:center;flex-direction:column;gap:var(--spacing-16);font:var(--label-xl)}}@media(width>=50rem){.features:where(.astro-vnivfuh2){.feature{flex-direction:row;span{flex:1}}}}[data-v-1bfefc0e] .tabs-list{margin-bottom:-1px}[data-v-1bfefc0e] .content-wrapper{border:1px solid var(--color-zinc-700)}[data-v-1bfefc0e] .indicator-wrapper{border:1px solid var(--color-zinc-700);border-bottom:unset}.snippet[data-v-1bfefc0e]{font:var(--docs-md);display:flex;height:fit-content;flex:1}.copy-button{&[data-v-1bfefc0e]{color:inherit;padding:var(--spacing-8)}&[data-v-1bfefc0e]:hover{background-color:transparent;cursor:pointer}}@media(width>=50rem){.snippet[data-v-1bfefc0e]{font:var(--docs-md)}}.tabs-root{&[data-v-a33b0420]{display:flex;flex-direction:column;gap:var(--spacing-32)}.tabs-list{&[data-v-a33b0420]{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--spacing-8)}.trigger{&[data-v-a33b0420]{padding:var(--spacing-16) calc(var(--spacing-12) + var(--spacing-6));border-radius:var(--radius-8);color:var(--color-zinc-400);font:var(--label-md);cursor:pointer;transition:all .15s ease-out;background-color:color-mix(in srgb,var(--color-zinc-700) 12%,transparent);border:1px solid var(--color-zinc-700)}&[data-v-a33b0420]:hover{color:var(--color-zinc-200)}&[data-state=active][data-v-a33b0420]{color:var(--color-zinc-50);background-color:var(--color-zinc-700)}}}.code-window{&[data-v-a33b0420]{height:420px;display:flex;flex-direction:column;gap:var(--spacing-24);border-radius:var(--radius-12);border:1px solid var(--color-zinc-800);background-color:var(--color-zinc-900);overflow:hidden;padding:var(--spacing-16)}.window-header{&[data-v-a33b0420]{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.window-actions{&[data-v-a33b0420]{display:flex;gap:var(--spacing-8)}[data-window-action]{&[data-v-a33b0420]{width:12px;height:12px;border-radius:var(--radius-full)}&[data-window-action=close][data-v-a33b0420]{background-color:#ff5f57}&[data-window-action=minimize][data-v-a33b0420]{background-color:#febc2e}&[data-window-action=fullscreen][data-v-a33b0420]{background-color:#28c840}}}.filename[data-v-a33b0420]{font:var(--docs-xs);letter-spacing:var(--docs-sm-spacing);color:var(--color-zinc-400)}.code-actions{&[data-v-a33b0420]{display:flex;justify-content:flex-end}.copy-button{&[data-v-a33b0420]{display:flex;justify-content:center;align-items:center;color:var(--color-zinc-400);padding:var(--spacing-4);border-radius:var(--radius-8);transition:color .15s ease;cursor:pointer}&[data-v-a33b0420]:hover{color:var(--color-zinc-200)}}}}}}.code-content[data-v-a33b0420]{padding:var(--spacing-16) var(--spacing-24);overflow-x:auto}.tab-content{&[data-v-a33b0420]{overflow-x:scroll;flex:1}&[data-state=inactive][data-v-a33b0420]{display:none}}.code-block[data-v-a33b0420]{font:var(--docs-sm)}.code-fallback[data-v-a33b0420]{color:var(--color-zinc-300);margin:var(--spacing-0)}[data-v-a33b0420] pre{margin:var(--spacing-0);background-color:transparent!important}[data-v-a33b0420] code{font:var(--docs-sm)}.core-lib:where(.astro-3eytnsjx){display:flex;gap:var(--spacing-24);flex-direction:column;justify-content:space-between;padding-block:var(--spacing-64);background-color:var(--color-neutral-950);color:var(--color-neutral-50);.info{flex:1;display:flex;flex-direction:column;gap:var(--spacing-40);a{color:inherit}}.code{width:100%}.info,.code{max-width:100%}@media(width>=88rem){flex-direction:row;.info,.code{max-width:600px}}}