.example-split:where(.astro-qavgxbx7){--handle: 8px;display:flex;flex-direction:column;gap:.75rem}.example-split-toolbar:where(.astro-qavgxbx7){display:flex;align-items:center;justify-content:space-between;gap:.5rem}.example-split-toolbar-actions:where(.astro-qavgxbx7){display:inline-flex;align-items:center;gap:.25rem}.variant-toggle:where(.astro-qavgxbx7){display:inline-flex;align-items:center;gap:0;padding:.1875rem;border-radius:calc(var(--radius) - 2px);background:color-mix(in oklab,var(--card) 92%,var(--background));box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--border) 70%,transparent)}.variant-toggle:where(.astro-qavgxbx7) button:where(.astro-qavgxbx7){appearance:none;background:transparent;border:0;padding:.3125rem .625rem;display:inline-flex;align-items:center;gap:.4rem;font-family:Inter,system-ui,sans-serif;font-size:.8125rem;font-weight:500;color:var(--muted-foreground);border-radius:calc(var(--radius) - 4px);cursor:pointer;transition:color .15s,background-color .15s}.variant-toggle:where(.astro-qavgxbx7) button:where(.astro-qavgxbx7):hover{color:var(--foreground)}.variant-toggle:where(.astro-qavgxbx7) button:where(.astro-qavgxbx7)[aria-selected=true]{background-color:var(--background);color:color-mix(in oklab,var(--diamond) 65%,var(--foreground));box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--diamond) 30%,var(--border))}.variant-icon:where(.astro-qavgxbx7){width:.875rem;height:.875rem}.toolbar-btn:where(.astro-qavgxbx7){appearance:none;background:transparent;border:0;padding:.4rem .5rem;color:var(--muted-foreground);border-radius:calc(var(--radius) - 4px);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;transition:color .15s,background-color .15s}.toolbar-btn:where(.astro-qavgxbx7):hover{color:var(--diamond);background-color:color-mix(in oklab,var(--diamond) 10%,transparent)}.stackblitz-btn:where(.astro-qavgxbx7) span:where(.astro-qavgxbx7){width:1rem;height:1rem}.example-split-grid:where(.astro-qavgxbx7){display:grid;grid-template-columns:var(--split, 50%) var(--handle) minmax(0,1fr);gap:0;height:70vh;min-height:32rem;max-height:56rem;border-radius:calc(var(--radius) + .25rem);overflow:hidden;background:var(--card);box-shadow:0 0 0 1px color-mix(in oklab,var(--border) 75%,transparent)}.example-split:where(.astro-qavgxbx7)[data-expanded=true] .example-split-grid:where(.astro-qavgxbx7){grid-template-columns:0px 0px 1fr}.example-split:where(.astro-qavgxbx7)[data-code-collapsing=true] .example-split-grid:where(.astro-qavgxbx7){grid-template-columns:1fr 0px 0px}.example-split:where(.astro-qavgxbx7)[data-code-collapsed=true] .example-split-grid:where(.astro-qavgxbx7){grid-template-columns:1fr}.example-split:where(.astro-qavgxbx7)[data-code-collapsed=true] .example-split-handle:where(.astro-qavgxbx7),.example-split:where(.astro-qavgxbx7)[data-code-collapsed=true] .example-split-code:where(.astro-qavgxbx7){display:none}.example-split:where(.astro-qavgxbx7).is-toggling .example-split-grid:where(.astro-qavgxbx7){transition:grid-template-columns .32s cubic-bezier(.4,0,.2,1)}.example-split:where(.astro-qavgxbx7).is-toggling .example-split-handle:where(.astro-qavgxbx7){transition:opacity .2s ease-out}.example-split:where(.astro-qavgxbx7)[data-expanded=true] .example-split-handle:where(.astro-qavgxbx7){pointer-events:none;opacity:0}.example-split:where(.astro-qavgxbx7)[data-expanded=true] .example-split-preview:where(.astro-qavgxbx7){pointer-events:none}.example-split-pane:where(.astro-qavgxbx7){position:relative;overflow:hidden;min-width:0;contain:paint}.example-split-preview:where(.astro-qavgxbx7){isolation:isolate}.example-split-preview:where(.astro-qavgxbx7) iframe:where(.astro-qavgxbx7){will-change:transform;transform:translateZ(0);position:absolute;inset:0;width:100%;height:100%;border:0;background:#1a1a2e;color-scheme:dark}.example-split:where(.astro-qavgxbx7)[data-dragging=true] .example-split-preview:where(.astro-qavgxbx7) iframe:where(.astro-qavgxbx7){pointer-events:none}.example-split-handle:where(.astro-qavgxbx7){cursor:col-resize;background:color-mix(in oklab,var(--border) 70%,transparent);transition:background-color .15s;position:relative}.example-split-handle:where(.astro-qavgxbx7):before{content:"";position:absolute;left:50%;top:50%;width:2px;height:2.5rem;transform:translate(-50%,-50%);background:color-mix(in oklab,var(--diamond) 50%,var(--muted-foreground));border-radius:1px;pointer-events:none}.example-split-handle:where(.astro-qavgxbx7):hover,.example-split-handle:where(.astro-qavgxbx7):focus-visible,.example-split:where(.astro-qavgxbx7)[data-dragging=true] .example-split-handle:where(.astro-qavgxbx7){background:color-mix(in oklab,var(--diamond) 25%,var(--border))}.example-split-handle:where(.astro-qavgxbx7):focus-visible{outline:2px solid var(--diamond);outline-offset:-2px}.example-split-code:where(.astro-qavgxbx7){background:var(--code-background);display:flex;flex-direction:column;isolation:isolate;transform:translateZ(0)}.code-pane:where(.astro-qavgxbx7){position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;contain:paint}.example-split:where(.astro-qavgxbx7)[data-variant=three] .code-pane:where(.astro-qavgxbx7)[data-variant-pane=react],.example-split:where(.astro-qavgxbx7)[data-variant=react] .code-pane:where(.astro-qavgxbx7)[data-variant-pane=three]{display:none}.file-tabs:where(.astro-qavgxbx7){flex:0 0 auto;display:flex;align-items:center;gap:0;overflow-x:auto;scrollbar-width:thin;background:color-mix(in oklab,var(--card) 92%,var(--code-background));border-bottom:1px solid color-mix(in oklab,var(--border) 60%,transparent);padding:.25rem .375rem}.file-tab:where(.astro-qavgxbx7){appearance:none;background:transparent;border:0;padding:.375rem .625rem;font-family:Commit Mono,JetBrains Mono,ui-monospace,SFMono-Regular,monospace;font-size:.75rem;color:var(--muted-foreground);border-radius:calc(var(--radius) - 4px);cursor:pointer;white-space:nowrap;transition:color .15s,background-color .15s}.expand-btn:where(.astro-qavgxbx7){appearance:none;background:transparent;border:0;padding:.375rem .5rem;margin-right:.25rem;color:color-mix(in oklab,var(--diamond) 55%,var(--muted-foreground));border-radius:calc(var(--radius) - 4px);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:color .15s,background-color .15s;position:relative}.expand-btn:where(.astro-qavgxbx7):hover{color:var(--diamond);background-color:color-mix(in oklab,var(--diamond) 10%,transparent)}.expand-btn:where(.astro-qavgxbx7):after{content:"";position:absolute;right:-.125rem;top:25%;bottom:25%;width:1px;background-color:color-mix(in oklab,var(--border) 70%,transparent)}.expand-icon:where(.astro-qavgxbx7){width:.875rem;height:.875rem;transition:transform .24s cubic-bezier(.4,0,.2,1)}.example-split:where(.astro-qavgxbx7)[data-expanded=true] .expand-icon:where(.astro-qavgxbx7){transform:rotate(180deg)}.file-tab:where(.astro-qavgxbx7):hover{color:var(--foreground);background-color:color-mix(in oklab,var(--background) 35%,transparent)}.file-tab:where(.astro-qavgxbx7)[aria-selected=true]{color:color-mix(in oklab,var(--diamond) 65%,var(--foreground));background-color:var(--background);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--diamond) 30%,var(--border))}.file-content:where(.astro-qavgxbx7){flex:1 1 auto;overflow:auto;background:var(--code-background);min-width:0;min-height:0}.file-content:where(.astro-qavgxbx7)[hidden]{display:none}.file-content:where(.astro-qavgxbx7) .expressive-code{margin:0}.file-content:where(.astro-qavgxbx7) .expressive-code .frame{box-shadow:none;border-radius:0;overflow:visible}.file-content:where(.astro-qavgxbx7) .expressive-code pre{border-radius:0;overflow:visible}.file-content:where(.astro-qavgxbx7) .expressive-code figcaption.header{display:none}@media(max-width:768px){.example-split-grid:where(.astro-qavgxbx7){grid-template-columns:1fr;grid-template-rows:50vh var(--handle) 1fr;height:auto;min-height:0;max-height:none}.example-split-handle:where(.astro-qavgxbx7){cursor:row-resize}.example-split-handle:where(.astro-qavgxbx7):before{width:2.5rem;height:2px}}@media(prefers-reduced-motion:reduce){.variant-toggle:where(.astro-qavgxbx7) button:where(.astro-qavgxbx7),.toolbar-btn:where(.astro-qavgxbx7),.file-tab:where(.astro-qavgxbx7),.example-split-handle:where(.astro-qavgxbx7){transition:none}}.example-detail-shell:where(.astro-pfctfi6k){max-width:90rem;margin:0 auto;padding-inline:clamp(1rem,4vw,2rem);padding-block:clamp(1.5rem,3vw,2.5rem) clamp(2rem,4vw,3rem)}.example-detail:where(.astro-pfctfi6k){display:flex;flex-direction:column;gap:clamp(1.5rem,3vw,2.5rem)}.example-detail-prose:where(.astro-pfctfi6k){max-width:56rem;margin-block-start:clamp(2.5rem,5vw,4rem)}.example-detail-header:where(.astro-pfctfi6k){display:flex;flex-direction:column;gap:.5rem;max-width:56rem}.example-detail-back:where(.astro-pfctfi6k){align-self:flex-start;display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .5rem .25rem .4rem;margin-block-end:.25rem;margin-inline-start:-.5rem;border-radius:calc(var(--radius) - 4px);color:color-mix(in oklab,var(--diamond) 60%,var(--muted-foreground));font-family:Inter,system-ui,sans-serif;font-size:.75rem;font-weight:500;text-decoration:none;text-transform:uppercase;letter-spacing:.06em;transition:color .15s,background-color .15s}.example-detail-back:where(.astro-pfctfi6k):hover{color:var(--diamond);background-color:color-mix(in oklab,var(--diamond) 10%,transparent)}.example-detail-title:where(.astro-pfctfi6k){font-family:Public Sans,system-ui,sans-serif;font-size:clamp(1.75rem,4vw,2.75rem);font-weight:200;letter-spacing:-.025em;line-height:1.1;color:var(--foreground);margin:0;text-wrap:balance}.example-detail-description:where(.astro-pfctfi6k){font-family:Public Sans,system-ui,sans-serif;font-size:clamp(.9375rem,1.5vw,1.0625rem);line-height:1.55;color:var(--muted-foreground);margin:0;max-width:48rem;text-wrap:balance}