@layer all,base,theme;@layer components{.MenuPositioner{z-index:1;outline:0}.MenuPopup{max-width:var(--available-width);max-height:var(--available-height);border-radius:var(--radius-8);background-color:var(--color-popup);cursor:default;-webkit-user-select:none;user-select:none;outline:0;min-width:min-content;padding-block:.25rem;overflow:hidden}@media (prefers-color-scheme:light){.MenuPopup{box-shadow:0 0 1px var(--blackA-4), 0 .5px 1px var(--blackA-3), 0 1px 3px var(--blackA-1), 0 2px 4px -1px var(--blackA-1), 0 4px 12px -2px var(--blackA-1), 0 4px 16px -4px var(--blackA-1)}}@media (prefers-color-scheme:dark){.MenuPopup{box-shadow:inset 0 0 0 1px var(--gray-c3)}}.MenuItem{font-size:var(--font-size-13);white-space:nowrap;z-index:0;height:1.75rem;color:var(--gray-t2);outline:0;align-items:center;gap:.5rem;padding-inline:.75rem;line-height:1;text-decoration:none;display:flex}.MenuItem[data-highlighted]{color:#fff;position:relative}@media (prefers-color-scheme:dark){.MenuItem[data-highlighted]{color:#000}}.MenuItem[data-highlighted]:before{content:"";z-index:-1;border-radius:var(--radius-4);background-color:var(--gray-t2);position:absolute;inset-block:0;inset-inline:.25rem}@media (prefers-color-scheme:dark){.MenuItem[data-highlighted]:before{background-color:#fff}}@media (pointer:coarse){.MenuItem{font-size:var(--font-size-15);height:2.25rem}}.MenuSeparator{background-color:var(--color-border);height:1px;margin-block:.25rem;margin-inline:.25rem}.SelectPositioner{z-index:1;outline:0}.SelectPopup{max-width:var(--available-width);max-height:var(--available-height);border-radius:var(--radius-8);background-color:var(--color-popup);cursor:default;-webkit-user-select:none;user-select:none;outline:0;min-width:min-content;padding-block:.25rem;overflow:hidden}@media (prefers-color-scheme:light){.SelectPopup{box-shadow:0 0 1px var(--blackA-4), 0 .5px 1px var(--blackA-3), 0 1px 3px var(--blackA-1), 0 2px 4px -1px var(--blackA-1), 0 4px 12px -2px var(--blackA-1), 0 4px 16px -4px var(--blackA-1)}}@media (prefers-color-scheme:dark){.SelectPopup{box-shadow:inset 0 0 0 1px var(--gray-c3)}}.SelectItem{font-size:var(--font-size-13);white-space:nowrap;z-index:0;outline:0;grid-template-columns:.625rem 1rem .375rem auto 1.75rem;align-items:center;height:1.75rem;line-height:1;display:grid}.SelectItem[data-highlighted]{color:#fff;position:relative}@media (prefers-color-scheme:dark){.SelectItem[data-highlighted]{color:#000}}.SelectItem[data-highlighted]:before{content:"";z-index:-1;border-radius:var(--radius-4);background-color:var(--gray-t2);position:absolute;inset-block:0;inset-inline:.25rem}@media (prefers-color-scheme:dark){.SelectItem[data-highlighted]:before{background-color:#fff}}@media (pointer:coarse){.SelectItem{font-size:var(--font-size-15);grid-template-columns:.5rem 1rem .5rem auto 1.5rem;height:2.25rem}}.SelectItemIndicator{grid-column:2;width:100%;height:auto;margin-top:-1px}.SelectItemText{grid-column:4}.DemoRoot{--demo-radius:var(--radius-12);border:1px solid var(--color-border);border-radius:var(--demo-radius);margin-bottom:var(--space-24)}.DemoPlaygroundExternalLink{position:absolute;top:.75rem;right:1.125rem}.DemoPlayground{background-color:var(--color-content);border-top-left-radius:calc(var(--demo-radius) - 1px);border-top-right-radius:calc(var(--demo-radius) - 1px);overscroll-behavior-x:contain;scrollbar-width:thin;position:relative;overflow:auto hidden}.DemoPlayground:focus-visible{outline:2px solid var(--gray-t2);outline-offset:-1px;z-index:1}.DemoPlaygroundInner{justify-content:center;align-items:center;min-width:-moz-fit-content;min-width:fit-content;min-height:8rem;padding:2rem 1.5rem;display:flex}.DemoToolbar{box-sizing:border-box;z-index:1;font-size:var(--font-size-13);white-space:nowrap;color:var(--gray-t2);-webkit-user-select:none;user-select:none;background-clip:padding-box;align-items:end;height:2.25rem;line-height:1.25rem;display:flex;position:relative;overflow:hidden}.DemoToolbar:before{content:"";z-index:0;background-image:linear-gradient(var(--color-border), var(--color-border)), linear-gradient(var(--color-border), var(--color-border));pointer-events:none;background-position:0 0,0 100%;background-repeat:no-repeat;background-size:100% 1px,100% 1px;position:absolute;inset:0}.DemoToolbarScrollAreaRoot{flex:auto;align-self:stretch;min-width:0;display:flex;position:relative}.DemoToolbarScrollAreaRoot:has(.DemoToolbarViewport:focus-visible):after{content:"";z-index:2;outline:2px solid var(--gray-t2);outline-offset:-2px;pointer-events:none;position:absolute;inset:0}.DemoToolbarViewport{--demo-tabs-fade:1.5rem;--demo-tabs-mask:linear-gradient(to right, transparent, #000 min(var(--demo-tabs-fade), var(--scroll-area-overflow-x-start,0px)), #000 calc(100% - min(var(--demo-tabs-fade), var(--scroll-area-overflow-x-end,0px))), transparent);min-width:0;-webkit-mask-image:var(--demo-tabs-mask), linear-gradient(#000, #000);mask-image:var(--demo-tabs-mask), linear-gradient(#000, #000);flex:auto;display:flex;-webkit-mask-position:0 0,0 100%;mask-position:0 0,0 100%;-webkit-mask-size:100% calc(100% - 1px),100% 1px;mask-size:100% calc(100% - 1px),100% 1px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;overflow-y:hidden!important}.DemoToolbarViewport:focus-visible{outline:none}.DemoToolbarViewport[data-has-overflow-x]{overscroll-behavior-x:contain}.DemoToolbarScrollAreaRoot:has(.DemoTab:focus-visible) .DemoToolbarViewport{-webkit-mask-image:var(--demo-tabs-mask);mask-image:var(--demo-tabs-mask);-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100% 100%;mask-size:100% 100%}.DemoToolbarActions{align-items:center;gap:var(--space-4);height:100%;padding-inline:.5rem;display:flex}.DemoToolbarActionsMobile{flex:none;margin-left:auto}@media (min-width:40rem){.DemoToolbarActionsMobile{display:none}}.DemoToolbarActionsDesktop{display:none}@media (min-width:40rem){.DemoToolbarActionsDesktop{flex:none;padding-inline-start:1rem;display:flex}}.DemoTabsRoot{flex:none;display:flex}.DemoTabsList{align-self:flex-end;width:max-content;display:flex}.DemoTab{font-family:var(--font-mono);z-index:0;padding-inline:.75rem;border-left:1px solid #0000;border-right:1px solid #0000;outline:0;justify-content:center;align-items:center;height:2.25rem;padding-top:.25rem;padding-bottom:calc(.25rem + 1px);line-height:1;display:inline-flex;position:relative}.DemoTab>span{position:relative}@media (hover:hover){.DemoTab:hover:not([data-active],:focus-visible):before{content:"";background-color:var(--gray-s2);pointer-events:none;background-clip:padding-box;position:absolute;inset:1px -1px}}.DemoTab[data-active]:before{content:"";background-color:var(--gray-s1);border-inline:1px solid var(--color-border);pointer-events:none;background-clip:padding-box;position:absolute;inset:1px -1px}.DemoTab[data-active]:first-child:before{border-inline-start-width:0}.DemoTab[data-active]:after{content:"";background-color:var(--gray-s1);pointer-events:none;width:100%;height:1px;position:absolute;bottom:0;left:0}.DemoTab[data-active]:focus-visible:before{border:0;inset:2px}.DemoTab:focus-visible{outline:2px solid var(--gray-t2);outline-offset:-2px}.DemoTab:focus-visible:after{content:none}.DemoCodeBlockCollapsible{flex-direction:column;display:flex;position:relative}.DemoCodeBlockCollapsible:has(.DemoCodeBlockViewport:focus-visible){z-index:1}.DemoCodeBlockRoot{isolation:isolate;border-bottom-left-radius:var(--demo-radius);border-bottom-right-radius:var(--demo-radius);background-color:var(--gray-s1);outline:0;flex-direction:column;display:flex;position:relative}.DemoCodeBlockRoot[data-closed]:before{content:"";z-index:1;pointer-events:none;border-bottom-left-radius:calc(var(--demo-radius) - 1px);border-bottom-right-radius:calc(var(--demo-radius) - 1px);background:linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--gray-s1), transparent 5%) 100%);height:100%;position:absolute;bottom:0;left:0;right:0}.DemoCodeBlockRoot .ScrollAreaViewport{border-bottom-left-radius:calc(var(--demo-radius) - 1px);border-bottom-right-radius:calc(var(--demo-radius) - 1px)}.DemoCodeBlockViewport{--demo-code-block-line-height:1.25rem;line-height:var(--demo-code-block-line-height)}.DemoCodeBlockViewport[data-has-overflow-x]{overscroll-behavior-x:contain}.DemoCodeBlockViewport[data-closed]{max-height:calc(5.7lh + .5rem);overflow:hidden}.DemoCodeBlockViewport[data-closed] code .frame:not([data-frame-type]),.DemoCodeBlockViewport[data-closed] code .frame[data-frame-type=highlighted-unfocused],.DemoCodeBlockViewport[data-closed] code .frame[data-frame-type=focus-unfocused]{display:none}.DemoSourceBrowser{font-size:.8125rem;line-height:var(--demo-code-block-line-height);cursor:text;display:flex;position:relative}.DemoSourceBrowser pre{flex-grow:1;display:flex}.DemoSourceBrowser code{padding:.5rem 0}.DemoSourceBrowser code .frame{padding-left:.75rem;padding-right:.75rem;display:block}.DemoSourceBrowser code .frame[data-lined]{white-space:normal;padding-left:0;padding-right:0;display:block}.DemoSourceBrowser code .frame[data-lined] .line{white-space:pre;padding-left:.75rem;padding-right:.75rem;display:block}.DemoCodeBlockCopyButton{z-index:3;background-color:color-mix(in srgb, var(--gray-s1), transparent 10%);position:absolute;top:.5rem;right:.5rem}@media (min-width:48rem){.DemoCodeBlockCopyButton{box-shadow:none;background-color:#0000}}.DemoCollapseButton{box-sizing:border-box;color:var(--color-foreground);font-family:inherit;font-size:var(--font-size-13);vertical-align:top;cursor:default;z-index:2;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;appearance:none;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:flex-end;padding:0 0 .75rem;font-weight:500;line-height:1;display:flex;position:absolute;inset:0}.DemoCollapseButton:focus-visible{outline:0}.DemoCollapseButton:focus-visible .DemoCollapseButtonVisual{outline:2px solid var(--gray-t2);outline-offset:-1px}.DemoCollapseButton[data-sticky]{width:auto;height:var(--space-28);margin-top:calc((var(--space-28) + .75rem) * -1);z-index:2;align-self:center;align-items:center;margin-bottom:.75rem;padding:0;position:sticky;inset:auto auto .75rem}.DemoCollapseButtonVisual{justify-content:center;align-items:center;gap:var(--space-8);height:var(--space-28);padding-inline:var(--space-12);border-radius:var(--radius-pill);white-space:nowrap;pointer-events:none;z-index:0;background:linear-gradient(#0000000a,#0000001a);display:inline-flex;position:relative}@media (prefers-color-scheme:dark){.DemoCollapseButtonVisual{background:linear-gradient(#ffffff1f,#ffffff3d)}}.DemoCollapseButtonVisual:before{content:"";z-index:-1;border-radius:var(--radius-pill);background:var(--color-content);pointer-events:none;position:absolute;inset:1px;box-shadow:inset 0 0 0 1px #fff,0 1px 2px #0000000d,0 2px 8px -1px #0000000f,0 4px 16px -4px #0000000d}@media (prefers-color-scheme:dark){.DemoCollapseButtonVisual:before{box-shadow:none}}@media (hover:hover){.DemoCollapseButton:hover .DemoCollapseButtonVisual{background:linear-gradient(#0000001a,#0003)}@media (prefers-color-scheme:dark){.DemoCollapseButton:hover .DemoCollapseButtonVisual{background:linear-gradient(#ffffff29,#ffffff52)}}}}@layer utilities;.StencilComparison{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:1.5rem;width:100%;display:grid}@media (max-width:48rem){.StencilComparison{grid-template-columns:1fr}}.StencilComparisonColumn{flex-direction:column;gap:.5rem;min-width:0;display:flex}.StencilComparisonColumn[data-align=center]{align-items:center}.StencilComparisonLabel{color:#545454;color:lab(35.736% 0 0);font-family:var(--font-mono);align-self:stretch;font-size:.75rem;line-height:1rem}@media (prefers-color-scheme:dark){.StencilComparisonLabel{color:#a1a1a1;color:lab(66.128% -.0000298023 .0000119209)}}.ReactPreviewBoundary,.StencilPreviewBoundary{display:contents}.StencilComparison[data-min-column-width]{grid-template-columns:repeat(auto-fit, minmax(min(100%, var(--comparison-column-min-width)), 1fr))}.StencilComparison[data-min-column-width]>.StencilComparisonColumn{align-items:flex-start;overflow-x:auto}