html,body{letter-spacing:.02ch;min-width:320px}:root{--scroll-padding-top: calc(44px + 1em) }:root,.light,.dark{--bg-canvas: var(--bg-1);--bg-base: var(--bg-2);--bg-pane: var(--bg-3);--bg-block: var(--bg-4);--bg-spot: var(--bg-5);--bg-base-brand: var(--bg-2-brand);--bg-pane-brand: var(--bg-3-brand);--bg-block-brand: var(--bg-4-brand);--bg-spot-brand: var(--bg-5-brand);--bg-base-info: var(--bg-2-info);--bg-pane-info: var(--bg-3-info);--bg-block-info: var(--bg-4-info);--bg-spot-info: var(--bg-5-info);--bg-base-success: var(--bg-2-success);--bg-pane-success: var(--bg-3-success);--bg-block-success: var(--bg-4-success);--bg-spot-success: var(--bg-5-success);--bg-base-critical: var(--bg-2-critical);--bg-pane-critical: var(--bg-3-critical);--bg-block-critical: var(--bg-4-critical);--bg-spot-critical: var(--bg-5-critical);--bg-base-warning: var(--bg-2-warning);--bg-pane-warning: var(--bg-3-warning);--bg-block-warning: var(--bg-4-warning);--bg-spot-warning: var(--bg-5-warning)}html{scroll-padding-top:var(--scroll-padding-top)}.skip-link{position:fixed;inset-block-start:8px;inset-inline-start:8px;z-index:1000;padding:8px 12px;color:var(--text-1);background:var(--bg-base);border:1px solid var(--border-1);border-radius:6px;transform:translateY(calc(-100% - 16px))}.skip-link:focus{transform:none}@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}summary{cursor:pointer}summary{list-style:none}summary::-webkit-details-marker{display:none}details:not([data-anta])>summary:not(.summary){display:flex;align-items:center;gap:4px}details:not([data-anta])>summary:not(.summary):before{content:"";flex-shrink:0;width:16px;height:16px;background-color:var(--text-3);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4l4 4-4 4'/%3E%3C/svg%3E%0A") center / contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4l4 4-4 4'/%3E%3C/svg%3E%0A") center / contain no-repeat;transition:transform .15s ease-out,background-color .12s ease-out}details:not([data-anta])>summary:not(.summary):hover:before{background-color:var(--text-1)}details:not([data-anta])[open]>summary:not(.summary):before{transform:rotate(90deg)}@media(forced-colors:active){details:not([data-anta])>summary:not(.summary):before{forced-color-adjust:none;background-color:CanvasText}details:not([data-anta])>summary:not(.summary):hover:before{background-color:LinkText}}.header-anchor,.header-anchor:link,.header-anchor:visited{color:inherit;text-decoration:none}.header-anchor:hover,.header-anchor:active{text-decoration:underline;text-decoration-style:dotted;text-decoration-color:color-mix(in srgb,currentColor 75%,transparent);text-decoration-thickness:1px;text-underline-offset:3px}.content a[href^="#"]:not(.header-anchor){text-decoration-style:dotted;text-underline-offset:3px}hr,.expressive-code{margin:0 0 1.5em}.content p:has(+.preview){margin-bottom:8px}.content .columns:has(+p){margin-block-end:24px}:is(.content,[data-docs-markdown]) .expressive-code pre{--code-background: var(--bg-pane)}.content .preview:has(+.expressive-code){margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.content .preview+.expressive-code pre{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.content .preview+.expressive-code .frame.has-title:not(.is-terminal),.content .preview+.expressive-code .frame.is-terminal,.content .preview+.expressive-code .frame[data-foldable]:not(.has-title):not(.is-terminal){border-top-left-radius:0;border-top-right-radius:0}.content .preview+.expressive-code .frame.has-title:not(.is-terminal) .header,.content .preview+.expressive-code .frame.is-terminal .header,.content .preview+.expressive-code .frame[data-foldable]:not(.has-title):not(.is-terminal) .header{border-top:0;border-top-left-radius:0;border-top-right-radius:0}:is(.content,[data-docs-markdown]) .expressive-code:has(+.expressive-code){margin-bottom:0}:is(.content,[data-docs-markdown]) .expressive-code:has(+.expressive-code) pre,:is(.content,[data-docs-markdown]) .expressive-code:has(+.expressive-code) .frame,:is(.content,[data-docs-markdown]) .expressive-code:has(+.expressive-code) .frame[data-folded] .header{border-bottom-left-radius:0;border-bottom-right-radius:0}:is(.content,[data-docs-markdown]) .expressive-code+.expressive-code pre{border-top:0;border-top-left-radius:0;border-top-right-radius:0}:is(.content,[data-docs-markdown]) .expressive-code+.expressive-code .frame.has-title:not(.is-terminal),:is(.content,[data-docs-markdown]) .expressive-code+.expressive-code .frame.is-terminal,:is(.content,[data-docs-markdown]) .expressive-code+.expressive-code .frame[data-foldable]:not(.has-title):not(.is-terminal){border-top-left-radius:0;border-top-right-radius:0}:is(.content,[data-docs-markdown]) .expressive-code+.expressive-code .frame.has-title:not(.is-terminal) .header,:is(.content,[data-docs-markdown]) .expressive-code+.expressive-code .frame.is-terminal .header,:is(.content,[data-docs-markdown]) .expressive-code+.expressive-code .frame[data-foldable]:not(.has-title):not(.is-terminal) .header{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.title-tone-grid{overflow-x:auto;overflow-y:hidden;margin:0 0 1em}.title-tone-grid-inner{display:grid;grid-template-columns:repeat(4,max-content);column-gap:32px;row-gap:8px;min-width:max-content}.title-tone-grid a-title{margin:0}:is(.content,[data-docs-markdown]) .expressive-code pre>code{letter-spacing:0}:not(pre)>code{cursor:copy;position:relative}.copyable{cursor:copy;position:relative}:is(.content,[data-docs-markdown]) .expressive-code .frame .copy{inset-block-start:1px;inset-inline-end:1px}:is(.content,[data-docs-markdown]) .expressive-code .frame:not(.has-title):not(.is-terminal):not([data-foldable]) .copy{background:color-mix(in oklch,var(--bg-pane) 60%,transparent);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border-top-right-radius:5px;border-bottom-left-radius:8px}:is(.content,[data-docs-markdown]) .expressive-code .copy button{inline-size:28px;block-size:28px;border-radius:6px;background:transparent}:is(.content,[data-docs-markdown]) .expressive-code .copy button>div{display:none}:is(.content,[data-docs-markdown]) .expressive-code .copy>div[aria-live]{display:none}:is(.content,[data-docs-markdown]) .expressive-code .copy button:after{margin:0;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E");-webkit-mask-size:16px;mask-size:16px;-webkit-mask-position:center;mask-position:center;transform:rotate(90deg);background-color:color-mix(in oklch,var(--ec-frm-inlBtnFg) 82%,transparent);transition:background-color .12s ease-out}:is(.content,[data-docs-markdown]) .expressive-code .copy button:hover:not([data-anta-copied]):after,:is(.content,[data-docs-markdown]) .expressive-code .copy button:active:not([data-anta-copied]):after{background-color:var(--ec-frm-inlBtnFg)}:is(.content,[data-docs-markdown]) .expressive-code{--fold-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");--fold-header-h: 2.25rem}:is(.content,[data-docs-markdown]) .expressive-code .frame.has-title,:is(.content,[data-docs-markdown]) .expressive-code .frame.is-terminal,:is(.content,[data-docs-markdown]) .expressive-code .frame[data-foldable]{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--fold-header-h) 1fr;overflow:hidden}:is(.content,[data-docs-markdown]) .expressive-code .frame.has-title>pre,:is(.content,[data-docs-markdown]) .expressive-code .frame.is-terminal>pre,:is(.content,[data-docs-markdown]) .expressive-code .frame[data-foldable]>pre{min-height:0;overflow:clip}:is(.content,[data-docs-markdown]) .expressive-code .frame.has-title:not([data-folded])>pre,:is(.content,[data-docs-markdown]) .expressive-code .frame.is-terminal:not([data-folded])>pre,:is(.content,[data-docs-markdown]) .expressive-code .frame[data-foldable]:not([data-folded])>pre{overflow:auto}:is(.content,[data-docs-markdown]) .expressive-code .frame[data-foldable]:not(.has-title):not(.is-terminal)>pre{border-top:0;border-top-left-radius:0;border-top-right-radius:0}:is(.content,[data-docs-markdown]) .expressive-code .frame.has-title:not(.is-terminal) .header,:is(.content,[data-docs-markdown]) .expressive-code .frame.is-terminal .header,:is(.content,[data-docs-markdown]) .expressive-code .frame[data-foldable]:not(.has-title):not(.is-terminal) .header{display:flex;align-items:center;justify-content:flex-start;gap:2px;min-height:var(--fold-header-h);padding-block:0;padding-inline:6px 4px;border:1px solid var(--border-5);background:var(--bg-4);cursor:pointer}:is(.content,[data-docs-markdown]) .expressive-code .frame .header:focus-visible{outline:1px solid var(--focus-ring);outline-offset:-1px}:is(.content,[data-docs-markdown]) .expressive-code .frame .header{color:var(--text-4)}:is(.content,[data-docs-markdown]) .expressive-code .frame .header:hover{color:var(--text-2)}:is(.content,[data-docs-markdown]) .expressive-code .frame .header:active{color:var(--text-3)}:is(.content,[data-docs-markdown]) .expressive-code .frame.has-title:not(.is-terminal) .header:before,:is(.content,[data-docs-markdown]) .expressive-code .frame.is-terminal .header:before,:is(.content,[data-docs-markdown]) .expressive-code .frame[data-foldable]:not(.has-title):not(.is-terminal) .header:before{content:"";flex:none;width:1rem;height:1rem;position:static;inset:auto;opacity:1;background:currentColor;-webkit-mask:var(--fold-chevron) center / contain no-repeat;mask:var(--fold-chevron) center / contain no-repeat}:is(.content,[data-docs-markdown]) .expressive-code .frame.has-title:not(.is-terminal) .title:before,:is(.content,[data-docs-markdown]) .expressive-code .frame.has-title:not(.is-terminal) .title:after,:is(.content,[data-docs-markdown]) .expressive-code .frame.has-title:not(.is-terminal) .header:after,:is(.content,[data-docs-markdown]) .expressive-code .frame.is-terminal .header:after{display:none}:is(.content,[data-docs-markdown]) .expressive-code .frame.has-title:not(.is-terminal) .title,:is(.content,[data-docs-markdown]) .expressive-code .frame.is-terminal .title{background:none;border:none;padding:0;color:inherit;font-weight:450}:is(.content,[data-docs-markdown]) .expressive-code .frame.is-terminal .title:empty:before{content:"Terminal"}:is(.content,[data-docs-markdown]) .expressive-code .frame[data-foldable]:not(.has-title):not(.is-terminal) .header:after{content:"Code";color:inherit;font-weight:450}:is(.content,[data-docs-markdown]) .expressive-code .frame[data-foldable]:not(.has-title):not(.is-terminal):has(>pre[data-language=css]) .header:after{content:"CSS"}:is(.content,[data-docs-markdown]) .expressive-code .frame[data-folded]{grid-template-rows:var(--fold-header-h) 0fr}:is(.content,[data-docs-markdown]) .expressive-code .frame[data-folded]>pre{border:0}:is(.content,[data-docs-markdown]) .expressive-code .frame.has-title .copy,:is(.content,[data-docs-markdown]) .expressive-code .frame.is-terminal .copy,:is(.content,[data-docs-markdown]) .expressive-code .frame[data-foldable] .copy{inset-block-start:0;inset-inline-end:0;opacity:.8;transition:opacity .12s ease-out}:is(.content,[data-docs-markdown]) .expressive-code .frame.has-title .copy:hover,:is(.content,[data-docs-markdown]) .expressive-code .frame.is-terminal .copy:hover,:is(.content,[data-docs-markdown]) .expressive-code .frame[data-foldable] .copy:hover{opacity:1}:is(.content,[data-docs-markdown]) .expressive-code .frame.has-title .copy button,:is(.content,[data-docs-markdown]) .expressive-code .frame.is-terminal .copy button,:is(.content,[data-docs-markdown]) .expressive-code .frame[data-foldable] .copy button{inline-size:var(--fold-header-h);block-size:var(--fold-header-h)}:is(.content,[data-docs-markdown]) .expressive-code .frame[data-folded] .header{border-radius:var(--header-border-radius)}:is(.content,[data-docs-markdown]) .expressive-code .frame.has-title:not(.is-terminal)[data-folded] .header,:is(.content,[data-docs-markdown]) .expressive-code .frame.is-terminal[data-folded] .header,:is(.content,[data-docs-markdown]) .expressive-code .frame[data-foldable]:not(.has-title):not(.is-terminal)[data-folded] .header{background:var(--bg-3)}:is(.content,[data-docs-markdown]) .expressive-code .frame.has-title:not(.is-terminal)[data-folded] .header:before,:is(.content,[data-docs-markdown]) .expressive-code .frame.is-terminal[data-folded] .header:before,:is(.content,[data-docs-markdown]) .expressive-code .frame[data-foldable]:not(.has-title):not(.is-terminal)[data-folded] .header:before{transform:rotate(-90deg)}@media(prefers-reduced-motion:no-preference){:is(.content,[data-docs-markdown]) .expressive-code .frame.has-title,:is(.content,[data-docs-markdown]) .expressive-code .frame.is-terminal,:is(.content,[data-docs-markdown]) .expressive-code .frame[data-foldable]{transition:grid-template-rows .24s ease;transition-behavior:allow-discrete}:is(.content,[data-docs-markdown]) .expressive-code .frame .header{transition:border-radius .24s ease,background-color .24s ease,color .12s ease-out}:is(.content,[data-docs-markdown]) .expressive-code .frame .header:before{transition:transform .15s ease-out}:is(.content,[data-docs-markdown]) .expressive-code .frame.has-title:not([data-folded])>pre,:is(.content,[data-docs-markdown]) .expressive-code .frame.is-terminal:not([data-folded])>pre,:is(.content,[data-docs-markdown]) .expressive-code .frame[data-foldable]:not([data-folded])>pre{transition:overflow 0s .24s;transition-behavior:allow-discrete}}@media(hover:hover){:is(.content,[data-docs-markdown]) .expressive-code .frame .copy{opacity:0;transition:opacity .15s ease-out}:is(.content,[data-docs-markdown]) .expressive-code .frame:hover .copy,:is(.content,[data-docs-markdown]) .expressive-code .frame:focus-within .copy{opacity:1}:is(.content,[data-docs-markdown]) .expressive-code .copy button{opacity:1}}:is(.content,[data-docs-markdown]) .expressive-code .frame:is(.has-title,.is-terminal,[data-foldable]) .copy{visibility:visible;transition:opacity .15s ease-out,visibility 0s}:is(.content,[data-docs-markdown]) .expressive-code .frame:is(.has-title,.is-terminal,[data-foldable])[data-folded] .copy{opacity:0;visibility:hidden;pointer-events:none;transition-delay:0s,.15s}@media(prefers-reduced-motion:reduce){:is(.content,[data-docs-markdown]) .expressive-code .frame:is(.has-title,.is-terminal,[data-foldable]) .copy{transition:none}}.expressive-code .copy .feedback{display:none}.expressive-code .copy button[data-anta-copied]:after{background-color:var(--text-4-success);transform:none;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}:is(code,.copyable,.demoCell)[data-copied]:after{content:attr(data-copied);position:absolute;top:0;left:0;right:0;z-index:-1;pointer-events:none;white-space:nowrap;background:inherit;border:inherit;padding:inherit;border-radius:inherit;animation:copy-toast .5s ease-out forwards}code[data-copied]:after{background:color-mix(in srgb,currentColor 6%,var(--bg-base))}@keyframes copy-toast{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translateY(-24px)}}:root{--page-sidebar-width: 240px;--page-content-pad: 32px}@media(max-width:900px){:root{--page-sidebar-width: 0px;--page-content-pad: 16px}}.content>.disclosure{max-width:none}.disclosure>summary{max-width:960px;margin-inline:auto}.disclosure>.body{container-type:inline-size}.disclosure.brand>summary .title,.disclosure.brand>summary .title.plain,.disclosure.brand>summary .title .header-anchor{color:var(--text-2-brand)}.disclosure.brand>summary .chevron{color:var(--text-2-brand)}.disclosure.brand>summary:hover .title,.disclosure.brand>summary:hover .title.plain,.disclosure.brand>summary:hover .title .header-anchor,.disclosure.brand>summary:hover .chevron{color:var(--text-1-brand)}.content>*,.disclosure>.body>*{max-width:960px;margin-inline:auto}.content>.full-bleed,.disclosure>.body>.full-bleed{max-width:none}.content>astro-island>*{max-width:960px;margin-inline:auto}.content>astro-island>.full-bleed{max-width:none}.full-bleed{max-width:none}.columns{display:flex;flex-direction:column;--columns-col-gap: 20px;--columns-row-gap: 20px;column-gap:var(--columns-col-gap);row-gap:var(--columns-row-gap);margin-block-end:8px}.columns.reverse{flex-direction:column-reverse}.content .columns>*>:last-child{margin-bottom:0}@container (min-width: 900px){.columns{flex-direction:row;align-items:start}.columns.reverse{flex-direction:row-reverse}.columns>*{flex:1;min-width:320px}.columns>.col{flex-grow:var(--col-grow, 1);flex-shrink:1;flex-basis:var(--col-basis, 0);min-width:var(--col-min, 320px);max-width:var(--col-max, none)}}.table-wrap{overflow-x:auto;scrollbar-width:thin;margin:0 auto 24px}.content .table-wrap>table{margin:0}.content table{width:100%;margin:0 auto 24px}.content table th:first-child,.content table td:first-child{white-space:nowrap}.demoStack{display:flex;flex-direction:column;gap:32px}.demoSection{display:flex;flex-direction:column;gap:12px}.demoRow{display:flex;flex-direction:column;gap:4px}.demoLabel{font-size:.75rem;font-family:var(--monospace);letter-spacing:0;color:var(--text-3)}.demoLabel.upper{text-transform:uppercase;letter-spacing:.04em}.demoBox{max-width:320px;border:1px dashed var(--border-4);padding:8px}.demoGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin:16px 0}.demoCell{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:8px 8px 4px;font-size:.75rem;color:var(--text-2)}.demoCell .demoLabel{font-family:var(--sans-serif);white-space:nowrap}.demoCell[data-copied]:after{color:var(--text-4);top:auto;bottom:4px}