.page-header{display:flex;flex-flow:column;justify-content:end;padding-block-start:var(--header-padding-block-start);padding-inline:var(--layout-inline-gap-start) var(--layout-inline-gap-end);background-color:var(--Grey200Color);color:var(--DarkBlue800Color)}.page-header .-heading{font-size:var(--heading-1-text-size);font-weight:300;letter-spacing:-.005em;line-height:var(--heading-1-text-line)}.page-header .status-tag{font-size:max(4 * var(--step))}.page-header .-subheading{margin-block-end:0;margin-block-start:max(5 * var(--step));max-inline-size:max(175 * var(--step));padding-block-end:var(--header-padding-block-end);font-size:var(--subheading-1-text-size);font-weight:300;line-height:var(--subheading-1-text-line)}.page-header .-navigation{display:flex;align-items:flex-end;overflow-x:auto}@media (width <= 400px){.page-header .-navigation{min-block-size:0}}.page-header .-navigation ul{display:flex;gap:var(--header-nav-gap)}.page-header .-navigation a{display:block;padding-block:var(--header-nav-padding-block);padding-inline:var(--header-nav-padding-inline);font-size:var(--header-nav-text-size);line-height:var(--header-nav-text-line);color:var(--Grey700Color)}.page-header .-navigation a:hover,.page-header .-navigation a:focus-visible{position:relative;color:var(--DarkBlue500Color);outline-color:transparent}.page-header .-navigation a:focus-visible:after{display:block;inset:0;position:absolute;border:1px solid var(--FocusDark);border-radius:var(--EdgeRadius);content:""}.page-header .-navigation [aria-current=page]{text-shadow:0 0 .375px var(--DarkBlue500Color),0 0 .5px var(--DarkBlue500Color);box-shadow:0 -4px inset;color:var(--DarkBlue500Color)}a.icon{display:inline-flex;align-items:center;gap:max(2 * var(--step));--icon: max(5 * var(--step))}a.icon svg{block-size:var(--icon);inline-size:var(--icon)}a.icon:hover{color:var(--DarkBlue500Color)}:root{--FigmaLinkIcon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 20" fill="none">		<path d="M8 10C8 9.20435 8.32634 8.44129 8.90724 7.87868C9.48813 7.31607 10.276 7 11.0975 7C11.919 7 12.7069 7.31607 13.2878 7.87868C13.8687 8.44129 14.195 9.20435 14.195 10C14.195 10.7956 13.8687 11.5587 13.2878 12.1213C12.7069 12.6839 11.919 13 11.0975 13C10.276 13 9.48813 12.6839 8.90724 12.1213C8.32634 11.5587 8 10.7956 8 10V10Z" stroke="#7B8089" stroke-width="2"/>		<path d="M1.80499 16C1.80499 15.2044 2.13134 14.4413 2.71223 13.8787C3.29312 13.3161 4.08098 13 4.90249 13H7.99999V16C7.99999 16.7956 7.67365 17.5587 7.09276 18.1213C6.51186 18.6839 5.724 19 4.90249 19C4.08098 19 3.29312 18.6839 2.71223 18.1213C2.13134 17.5587 1.80499 16.7956 1.80499 16Z" stroke="#7B8089" stroke-width="2"/>		<path d="M8 1V7H11.0975C11.919 7 12.7069 6.68393 13.2878 6.12132C13.8687 5.55871 14.195 4.79565 14.195 4C14.195 3.20435 13.8687 2.44129 13.2878 1.87868C12.7069 1.31607 11.919 1 11.0975 1L8 1Z" stroke="#7B8089" stroke-width="2"/>		<path d="M1.80499 4C1.80499 4.79565 2.13134 5.55871 2.71223 6.12132C3.29312 6.68393 4.08098 7 4.90249 7H7.99999V1H4.90249C4.08098 1 3.29312 1.31607 2.71223 1.87868C2.13134 2.44129 1.80499 3.20435 1.80499 4Z" stroke="#7B8089" stroke-width="2"/>		<path d="M1.80499 10C1.80499 10.7956 2.13134 11.5587 2.71223 12.1213C3.29312 12.6839 4.08098 13 4.90249 13H7.99999V7H4.90249C4.08098 7 3.29312 7.31607 2.71223 7.87868C2.13134 8.44129 1.80499 9.20435 1.80499 10Z" stroke="#7B8089" stroke-width="2"/>		</svg>');--GitHubLinkIcon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 21">			<path fill="%2351555B" d="M0 10.2a9.92 9.92 0 0 1 3.61-6.9 9.74 9.74 0 0 1 4.44-2.1c1.03-.2 2.06-.24 3.1-.12a9.78 9.78 0 0 1 6.26 3.22 10.13 10.13 0 0 1 2.13 9.77 9.96 9.96 0 0 1-2.12 3.67 9.78 9.78 0 0 1-4.15 2.75c-.5.17-.83-.05-.83-.58V17.2c0-.62-.13-1.2-.57-1.67-.15-.16.06-.14.12-.15.38-.04.75-.1 1.11-.2a4.26 4.26 0 0 0 2.42-1.55c.4-.57.61-1.23.72-1.92a5.2 5.2 0 0 0-.1-2.5 3.45 3.45 0 0 0-.7-1.21c-.1-.12-.12-.22-.07-.37a3.4 3.4 0 0 0-.12-2.33c-.03-.1-.1-.12-.2-.13-.22-.01-.43.02-.64.1-.62.2-1.2.48-1.73.84a.44.44 0 0 1-.4.07 8.35 8.35 0 0 0-2.26-.3c-.76 0-1.53.08-2.27.28a.56.56 0 0 1-.5-.08c-.61-.4-1.27-.7-1.97-.88l-.08-.02c-.4-.06-.44-.04-.56.34a3.34 3.34 0 0 0-.02 2.16c.04.1.03.19-.05.27a4 4 0 0 0-.9 3.18c.06.63.18 1.23.42 1.81a3.6 3.6 0 0 0 2.1 2 6.1 6.1 0 0 0 1.73.43c.08.01.18 0 .21.07.04.08-.06.13-.11.2a2.1 2.1 0 0 0-.43.98c-.02.09-.04.17-.13.2-.62.27-1.62.4-2.24-.13-.22-.2-.4-.4-.55-.65-.3-.5-.7-.85-1.25-1.04a1.04 1.04 0 0 0-.57-.04c-.18.05-.2.1-.1.26.06.1.15.2.26.25.55.32.87.83 1.1 1.4.21.54.55.94 1.08 1.16.3.12.6.16.92.18.41.03.83.04 1.24-.05.15-.03.19.03.19.16v1.7c0 .4-.36.63-.76.49a10.16 10.16 0 0 1-6.75-8.45L0 11.91V10.2Z" />		</svg>');--StorybookLinkIcon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">			<path fill="%2351555B" d="M17.67 10.08v7.99c0 1.17-.27 1.44-1.41 1.43-3-.03-5.98-.2-8.97-.38-1.07-.07-2.14.01-3.21-.13-.86-.12-1.15-.4-1.2-1.3-.06-.96-.05-1.92-.11-2.88-.11-1.92-.12-3.84-.18-5.76-.08-2.1-.19-4.2-.25-6.3-.04-1.07.2-1.34 1.29-1.43 1.96-.15 3.92-.26 5.88-.39 1.13-.08 2.27-.15 3.4-.24.77-.05.86.02.84.8l-.02.4c-.02.3-.23.7.01.89.27.21.49-.19.73-.32.21-.12.37-.06.55.07.13.1.26.31.45.2.21-.13.12-.37.11-.56-.01-.38-.05-.76-.07-1.14-.01-.32.15-.47.48-.5 1.25-.14 1.68.22 1.68 1.5v8.05Zm-7.43 5.77c1.07.05 2.1-.15 2.94-.87 1.6-1.36 1.4-3.83-.43-5.23-.53-.4-1.13-.71-1.72-1.03-.5-.26-1-.51-1.36-.96a1.01 1.01 0 0 1-.1-1.2c.19-.32.51-.42.87-.38.46.05.71.33.82.76.02.11.07.22.07.33 0 .45.3.6.66.6.55-.01 1.1-.09 1.66-.17.28-.04.36-.27.37-.55a3.19 3.19 0 0 0-1.98-3.06 5.3 5.3 0 0 0-2.38-.28c-1.86.15-3 1.2-3.2 3.02-.15 1.33.45 2.35 1.51 3.08.72.5 1.49.92 2.23 1.37a2 2 0 0 1 .95 1.1c.2.66-.25 1.23-.95 1.17-.58-.06-.85-.4-.9-.98-.04-.33.02-.75-.47-.86a4.42 4.42 0 0 0-2-.04c-.23.06-.39.15-.45.42a3.26 3.26 0 0 0 1.4 3.2 4.4 4.4 0 0 0 2.46.55Z" />		</svg>')}.page-content-side-col{padding-inline-start:max(8 * var(--step))}.page-content-side-col ul{display:flex;flex-flow:column;//gap: max(6 * var(--step))}.page-content-side-col a{display:block;font-size:max(14 * var(--rpx));line-height:calc(20 / 14);color:var(--Grey800Color)}.page-content-side-col a.current{font-weight:700;color:var(--DarkBlue500Color)}.p-quicklinks-navigation li{padding:calc(max(3 * var(--step)) + 2px) max(6 * var(--step));padding-inline-start:0}.p-quicklinks-navigation li.-first{padding-block-start:0}.p-quicklinks-navigation li.-last{padding-block-end:0}.p-quicklinks-navigation a{display:flex;align-items:center;gap:max(2 * var(--step))}.p-quicklinks-navigation a:before{display:inline-block;block-size:max(5 * var(--step));inline-size:max(5 * var(--step));content:var(--icon)}.p-quicklinks-navigation a.-figma{--icon: var(--FigmaLinkIcon)}.p-quicklinks-navigation a.-github{--icon: var(--GitHubLinkIcon)}.p-quicklinks-navigation a.-storybook{--icon: var(--StorybookLinkIcon)}.p-quicklinks-navigation .section-links-wrapper{-webkit-mask-image:var(--mask);mask-image:var(--mask);-webkit-mask-position:bottom;mask-position:bottom;-webkit-mask-size:100% 100%;mask-size:100% 100%;scroll-behavior:smooth;scrollbar-gutter:stable;--mask: linear-gradient(0deg, hsl(0 0% 0% / 0%) 0%, hsl(0 0% 0% / 100%) max(12 * var(--step)))}.p-quicklinks-navigation .section-links{max-block-size:72vh;overflow-x:hidden;overflow-y:auto;overflow-y:overlay;padding-block-end:max(12 * var(--step));scrollbar-width:none}.p-quicklinks-navigation .section-links::-webkit-scrollbar{inline-size:0}.p-quicklinks-navigation .section-links li{padding:0}.p-quicklinks-navigation .section-links li a{padding-block:0 max(7 * var(--step));padding-inline:max(6 * var(--step)) 0;position:relative;background:linear-gradient(#7b8089,#7b8089) no-repeat 1px 0 / 1px 100%,linear-gradient(var(--ActiveColor),var(--ActiveColor)) no-repeat 0 -24px / 3px 100%;transition:text-shadow 80ms;--ActiveColor: transparent}.p-quicklinks-navigation .section-links li a:focus-visible{border-radius:0;outline-color:transparent}.p-quicklinks-navigation .section-links li a:focus-visible:after{display:block;inset:0 0 max(6 * var(--step)) max(5 * var(--step));position:absolute;border:1px solid var(--FocusDark);border-radius:3px;content:""}.p-quicklinks-navigation .section-links li a.heading-3{padding-block:0 max(6 * var(--step));padding-inline:max(10 * var(--step)) 0}.p-quicklinks-navigation .section-links li a.-first{padding-block-start:0}.p-quicklinks-navigation .section-links li a.-last{padding-block-end:0;background:linear-gradient(#7b8089,#7b8089) no-repeat 1px 0 / 1px 100%,linear-gradient(var(--ActiveColor),var(--ActiveColor)) no-repeat 0 0 / 3px 100%}.p-quicklinks-navigation .section-links li a.-last:focus-visible:after{inset-block-end:0}.p-quicklinks-navigation .section-links li a.-highlighted{--ActiveColor: var(--DarkBlue500Color);text-shadow:-.25px 0 .25px CurrentColor,0 .25px 0 CurrentColor,0 -.125px 0 CurrentColor;color:var(--DarkBlue500Color);filter:drop-shadow(5px)}.icon.figma path{stroke:currentColor}.p-inpage-navigation{background:linear-gradient(90deg,transparent 1px,var(--InverseColor) 1px,var(--InverseColor) 2px,transparent 2px),linear-gradient(90deg,var(--DarkBlue500Color),var(--DarkBlue500Color));background-position:0 0,0 var(--offset, 0);background-repeat:repeat-y,no-repeat;background-size:auto,3px var(--height, 24px);transition:background-position .12s,background-size .12s}.astro-toolkit-ppt-purchase-button{display:inherit}.astro-toolkit-ppt-purchase-button p{margin-block-start:max(2 * var(--step));font-size:.875rem}.p-contribution-footer{margin-block-start:max(12 * var(--step))}.p-contribution-footer .-heading{margin-block:max(4 * var(--step)) max(1 * var(--step));padding-block:max(2 * var(--step));font-size:max(18 * var(--rpx));line-height:calc(20 / 18)}.widget_wrapper{display:flex;align-items:flex-end;flex-direction:column;inset-block-end:0;inset-inline-end:0;margin-inline-end:max(4 * var(--step));position:sticky;z-index:10}@media (width < 1024px){.widget_wrapper{inset-block-end:0;inset-inline-end:0;margin-inline-end:0;position:fixed}}.widget_wrapper .widget_interior-wrapper{inset-block-end:0;position:absolute}.widget_wrapper .widget_top-tab{display:block;border-block-start:2px solid var(--DarkBlue500Color);border-inline-end:2px solid var(--DarkBlue500Color);border-inline-start:2px solid var(--DarkBlue500Color);inline-size:-moz-fit-content;inline-size:fit-content;margin-inline-end:max(4 * var(--step));margin-inline-start:auto;padding-block:max(2 * var(--step));padding-inline-end:max(5 * var(--step));padding-inline-start:max(5 * var(--step));background-color:var(--PrimaryColor);color:var(--DarkBlue500Color);cursor:pointer;border-start-start-radius:max(1 * var(--step));border-start-end-radius:max(1 * var(--step));border-end-start-radius:0;border-end-end-radius:0}.widget_wrapper .widget_top-tab svg{margin-inline-start:max(2 * var(--step))}.widget_wrapper .widget_top-tab:is([data-collapsible-trigger-active]) svg{transform:rotate(180deg)}.widget_wrapper .widget_top-tab:is([data-collapsible-trigger-active]) svg path{fill:var(--BrightBlue500Color)}@media (width < 1024px){.widget_wrapper .widget_top-tab{inset-block-end:80px;inset-inline-end:-52px;position:absolute;transform:rotate(-90deg)}.widget_wrapper .widget_top-tab:is([data-collapsible-trigger-active]){inset-inline-end:247px}.widget_wrapper .widget_top-tab svg{display:none}}.widget_wrapper .widget_content-wrapper{block-size:auto;inline-size:max(75 * var(--step));max-block-size:calc(100dvh - max(15 * var(--step)));overflow-y:hidden;padding-block:max(5 * var(--step));padding-inline:max(3 * var(--step));position:relative;background-color:var(--Grey200Color);border:1px solid var(--DarkBlue400Color);border-radius:3px;color:var(--Grey900Color);transition:height .2s cubic-bezier(.66,.11,.33,.98)}.widget_wrapper .widget_content-wrapper:not([data-collapsible-active]){block-size:0;padding-block:0;padding-inline:0;border:none}@media (width < 1024px){.widget_wrapper .widget_content-wrapper:not([data-collapsible-active]){block-size:auto;inline-size:0}}.widget_wrapper .widget_content-wrapper:is([data-collapsible-active]){block-size:auto;padding-block:max(5 * var(--step));padding-inline:max(3 * var(--step));border:1px solid #2f7aa7}@media (width < 1024px){.widget_wrapper .widget_content-wrapper:is([data-collapsible-active]){inline-size:max(75 * var(--step))}}.widget_wrapper .widget_content-wrapper h3{margin-block-end:max(5 * var(--step));margin-block-start:0;font-size:max(20 * var(--rpx));font-weight:500}.widget_wrapper .widget_content-wrapper p{font-size:max(16 * var(--rpx))}:root{--ExampleDoColor: hsl(109 82% 39%);--ExampleDontColor: hsl(13 99% 50%);--CautionBorderColor: var(--HotOrange600Color);--NoteBorderColor: var(--DarkBlue500Color);--NoteColor: var(--Grey100Color);--AnchorIcon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">				<path fill-rule="evenodd" d="M7 15h3c.55 0 1 .45 1 1s-.45 1-1 1H7c-2.76 0-5-2.24-5-5s2.24-5 5-5h3c.55 0 1 .45 1 1s-.45 1-1 1H7c-1.65 0-3 1.35-3 3s1.35 3 3 3Zm10-8h-3c-.55 0-1 .45-1 1s.45 1 1 1h3c1.65 0 3 1.35 3 3s-1.35 3-3 3h-3c-.55 0-1 .45-1 1s.45 1 1 1h3c2.76 0 5-2.24 5-5s-2.24-5-5-5Zm-9 5c0 .55.45 1 1 1h6c.55 0 1-.45 1-1s-.45-1-1-1H9c-.55 0-1 .45-1 1Z" />			</svg>');--CautionIcon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M19.53 21c1.54 0 2.5-1.67 1.73-3L13.73 4.99c-.77-1.33-2.69-1.33-3.46 0L2.74 18c-.77 1.33.19 3 1.73 3h15.06ZM12 14c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1Zm-1 2v2h2v-2h-2Z"></path></svg>');--NoteIcon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 15c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1Zm-1-8h2V7h-2v2Z"></path></svg>')}.p-grid>.x-main{background-color:var(--PrimaryColor);color:var(--InverseColor)}:root{--layout-inline-gap-start: var(--layout-inline-gap, 0);--layout-inline-gap-end: var(--layout-inline-gap, 0)}@media (width >= 1920px){:root{--header-block-size: max(430 * var(--rpx));--header-nav-gap: max(9 * var(--step));--header-nav-text-size: max(24 * var(--rpx));--header-nav-text-line: calc(28 / 24);--header-nav-padding-block: max(6 * var(--step)) max(7 * var(--step));--header-nav-padding-inline: max(3 * var(--step));--heading-1-text-size: max(64 * var(--rpx));--heading-1-text-line:1.125;--main-content-width: max(254 * var(--step));--layout-inline-gap-start: max(8 * var(--step));--icon-search-margin-inline: max(-112 * var(--rpx));--icon-search-margin-inline-end: max(-64 * var(--rpx))}}@media (1920px > width >= 1440px){:root{--main-content-width: max(212 * var(--step))}}@media (width >= 1440px){:root{--header-block-size: max(380 * var(--rpx));--header-padding-block-start: max(25 * var(--step));--header-padding-block-end: max(15 * var(--step));--header-nav-block-start: max(15 * var(--step));--header-nav-gap: max(4 * var(--step)) max(5 * var(--step));--header-nav-text-size: max(24 * var(--rpx));--header-nav-text-line: calc(28 / 24);--header-nav-padding-block: max(6 * var(--step)) max(7 * var(--step));--header-nav-padding-inline: max(3 * var(--step));--heading-1-text-size: max(64 * var(--rpx));--heading-1-text-line:1.125;--subheading-1-text-size: max(20 * var(--rpx));--subheading-1-text-line: calc(24 / 20);--heading-2-margin: max(15 * var(--step)) max(5 * var(--step));--layout-inline-gap: max(8 * var(--step));--icon-search-margin-inline: max(-32 * var(--rpx));--icon-search-margin-inline-end: max(-64 * var(--rpx));--page-padding-block: max(15 * var(--step));--page-padding-block-start: max(15 * var(--step));--page-padding-inline: max(8 * var(--step));--page-padding-inline-end: max(20 * var(--step));--font-size-h2: max(36 * var(--rpx));--font-size-h3: max(28 * var(--rpx));--font-size-h4: max(24 * var(--rpx))}}@media (1440px >= width > 769px){:root{--header-block-size: max(280 * var(--rpx));--header-padding-block-start: max(15 * var(--step));--header-padding-block-end: max(15 * var(--step));--header-nav-block-start: max(15 * var(--step));--header-nav-gap: max(2 * var(--step));--header-nav-text-size: max(24 * var(--rpx));--header-nav-text-line: calc(28 / 24);--header-nav-padding-block: max(6 * var(--step)) max(7 * var(--step));--header-nav-padding-inline: max(3 * var(--step));--heading-1-text-size: max(64 * var(--rpx));--heading-1-text-line:1.125;--subheading-1-text-size: max(18 * var(--rpx));--subheading-1-text-line: calc(24 / 18);--heading-2-margin: max(15 * var(--step)) max(5 * var(--step));--layout-inline-gap: max(8 * var(--step));--icon-search-margin-inline: max(-32 * var(--rpx));--icon-search-margin-inline-end: max(-64 * var(--rpx));--page-padding-block: max(15 * var(--step));--page-padding-block-start: max(15 * var(--step));--page-padding-inline: max(8 * var(--step));--page-padding-inline-end: max(8 * var(--step));--font-size-h2: max(36 * var(--rpx));--font-size-h3: max(28 * var(--rpx));--font-size-h4: max(24 * var(--rpx))}}@media (1440px > width >= 1294px){:root{--main-content-width:calc(100% - max(74 * var(--step)))}}@media (width < 1294px){:root{--main-content-width: 100%}}@media (width < 769px){:root{--header-block-size: 0;--header-padding-block-start: max(5 * var(--step));--header-padding-block-end: max(5 * var(--step));--header-nav-block-start: max(5 * var(--step));--header-nav-gap: 0;--header-nav-text-size: max(16 * var(--rpx));--header-nav-text-line:1.5;--header-nav-padding-block: max(6 * var(--step)) max(7 * var(--step));--header-nav-padding-inline: max(3 * var(--step));--heading-1-text-size: max(24 * var(--rpx));--heading-1-text-line: max(28 * var(--rpx));--subheading-1-text-size: max(16 * var(--rpx));--subheading-1-text-line:1.5;--heading-2-margin: max(10 * var(--step)) max(5 * var(--step));--main-content-width: 100%;--layout-inline-gap: max(4 * var(--step));--icon-search-margin-inline: max(-16 * var(--rpx));--icon-search-margin-inline-end: max(-16 * var(--rpx));--page-padding-block: max(5 * var(--step));--page-padding-block-start: max(10 * var(--step));--page-padding-inline: max(4 * var(--step));--page-padding-inline-end: max(4 * var(--step));--font-size-h2: max(24 * var(--rpx));--font-size-h3: max(20 * var(--rpx));--font-size-h4: max(18 * var(--rpx))}}@media (width <= 375px){:root{--header-block-size: 0;--header-padding-block-start: max(5 * var(--step));--header-padding-block-end: max(5 * var(--step));--header-nav-block-start: max(5 * var(--step));--header-nav-gap: 0;--header-nav-text-size: max(16 * var(--rpx));--header-nav-text-line:1.5;--header-nav-padding-block: max(4 * var(--step)) max(5 * var(--step));--header-nav-padding-inline: max(3 * var(--step));--heading-1-text-size: max(24 * var(--rpx));--heading-1-text-line: max(28 * var(--rpx));--subheading-1-text-size: max(16 * var(--rpx));--subheading-1-text-line:1.5;--heading-2-margin: max(10 * var(--step)) max(5 * var(--step));--main-content-width: 100%;--layout-inline-gap: max(4 * var(--step));--icon-search-margin-inline: max(-16 * var(--rpx));--page-padding-block: max(5 * var(--step));--page-padding-block-start: max(10 * var(--step));--page-padding-inline: max(4 * var(--step));--page-padding-inline-end: max(4 * var(--step));--font-size-h2: max(24 * var(--rpx));--font-size-h3: max(20 * var(--rpx));--font-size-h4: max(18 * var(--rpx))}}@media (width <= 320px){:root{--header-block-size: 0;--header-padding-block-start: max(5 * var(--step));--header-padding-block-end: max(5 * var(--step));--header-nav-block-start: max(5 * var(--step)) max(6 * var(--step));--header-nav-gap: 0;--header-nav-text-size: max(16 * var(--rpx));--header-nav-text-line:1.5;--header-nav-padding-block: max(6 * var(--step)) max(7 * var(--step));--header-nav-padding-inline: max(3 * var(--step));--heading-1-text-size: max(24 * var(--rpx));--heading-1-text-line: max(28 * var(--rpx));--subheading-1-text-size: max(16 * var(--rpx));--subheading-1-text-line:1.5;--heading-2-margin: max(10 * var(--step)) max(5 * var(--step));--main-content-width: 100%;--layout-inline-gap: max(4 * var(--step));--icon-search-margin-inline: max(-16 * var(--rpx));--page-padding-block: max(5 * var(--step));--page-padding-block-start: max(10 * var(--step));--page-padding-inline: max(4 * var(--step));--page-padding-inline-end: max(4 * var(--step));--font-size-h2: max(24 * var(--rpx));--font-size-h3: max(20 * var(--rpx));--font-size-h4: max(18 * var(--rpx))}}.page{block-size:100%}.page li,.page p{max-inline-size:max(175 * var(--step))}.page h2{margin-block:var(--heading-2-margin);font-size:var(--font-size-h2);line-height:calc(40 / 36)}.page a h2:where(#interactive-example){margin-block-start:0}.page p{margin-block-end:max(5 * var(--step))}.page figure{inline-size:-moz-fit-content;inline-size:fit-content;margin-block-end:max(5 * var(--step))}.page figure>img{display:block;block-size:auto;max-inline-size:100%}.page figcaption{padding-block-start:max(2 * var(--step));font-size:max(14 * var(--rpx));line-height:calc(20 / 14)}.page video{margin-block-end:max(5 * var(--step))}.page-toolbar{inset-block-start:0;position:sticky;z-index:2}@media (width < 1024px){.page-toolbar{inset-block-start:max(60 * var(--rpx))}}.page-content{display:flex;block-size:100%;padding-block:var(--page-padding-block);padding-block-start:var(--page-padding-block-start);padding-inline:var(--page-padding-inline);padding-inline-end:var(--page-padding-inline-end)}.page-content-main-col{inline-size:var(--main-content-width)}.page-content-main-col>*:not(a-playground,.table-overflow,table,.storybook-demo,.p-icon-groups,.status-system-colors,.color-table,iframe){max-inline-size:max(175 * var(--step))}.page-content-main-col .storybook-demo{margin-block-end:max(5 * var(--step))}.page-content-main-col>a:first-child h2,.page-content-main-col style:first-child+a h2,.page-content-main-col>h2:first-child{margin-block-start:0}.page-content-main-col img{block-size:auto;max-inline-size:100%}.page-content-main-col a[href]:not([class]){color:var(--DarkBlue500Color)}.page-content-main-col a[href]:not([class]):hover{color:var(--DarkBlue700Color)}.page-content-main-col ol{list-style-type:decimal;padding-inline-start:max(5 * var(--step))}.page-content-main-col h2:where(:not([class])){margin-block:var(--heading-2-margin);font-size:var(--font-size-h2);font-weight:400;line-height:calc(24 / 22)}.page-content-main-col h3:where(:not([class])){margin-block-end:max(5 * var(--step));font-size:var(--font-size-h3);font-weight:400;line-height:calc(20 / 18)}.page-content-main-col :is(h4,h5):where(:not([class])){margin-block-end:max(5 * var(--step));font-size:var(--font-size-h4);font-weight:400;line-height:calc(20 / 18)}.page-content-main-col ol{margin-block-end:max(5 * var(--step))}.page-content-main-col ul{margin-block-end:max(5 * var(--step));padding-inline-start:max(4 * var(--step));list-style:disc}.page-content-main-col ul ul{margin-block-start:max(2 * var(--step));padding-inline-start:max(5 * var(--step))}.page-content-main-col li~li{margin-block-start:max(2 * var(--step))}.page-content-main-col .support-table table thead th{text-align:center}.page-content-main-col table{inline-size:100%}.page-content-main-col table tr{border-block-end:1px solid var(--Grey300Color)}.page-content-main-col table td{padding:max(2 * var(--step)) max(5 * var(--step))}.page-content-main-col table td>span{display:flex;align-items:center;gap:max(2 * var(--step))}.page-content-main-col table thead tr{border-block-start:none}.page-content-main-col table thead th{padding:max(2 * var(--step)) max(5 * var(--step));font-weight:700;text-align:start;background:var(--Grey200Color);color:var(--Grey700Color)}.page-content-main-col table thead th:first-child{border-start-start-radius:max(2 * var(--step))}.page-content-main-col table thead th:last-child{border-start-end-radius:max(2 * var(--step))}.page-content-main-col .two-col,.page-content-main-col .three-col{display:grid;gap:max(8 * var(--step)) max(4 * var(--step));margin-block-end:max(5 * var(--step));margin-block-start:max(4 * var(--step))}.page-content-main-col .two-col figure,.page-content-main-col .three-col figure{margin-block-end:0}@media (max-width: 767px){.page-content-main-col .two-col figure,.page-content-main-col .three-col figure{margin-block-end:max(5 * var(--step))}}.page-content-main-col .two-col{grid-template-columns:repeat(2,[col-start] 1fr)}@media (max-width: 767px){.page-content-main-col .two-col{display:block}}.page-content-main-col .three-col{grid-template-columns:repeat(3,[col-start] 1fr)}@media (max-width: 767px){.page-content-main-col .three-col{grid-template-columns:repeat(2,[col-start] 1fr)}}.page-content-main-col .caution,.page-content-main-col .note{display:flex;align-items:center;gap:max(4 * var(--step));margin-block-end:max(5 * var(--step));padding:max(3 * var(--step)) max(2 * var(--step)) max(3 * var(--step)) max(4 * var(--step));position:relative;background:var(--NoteColor);border:max(1 * var(--step)) solid var(--note-border-color);border-radius:var(--EdgeRadius);border-inline-start-width:max(3 * var(--step))}.page-content-main-col .caution:before,.page-content-main-col .note:before{block-size:max(8 * var(--step));inline-size:max(8 * var(--step));min-inline-size:max(8 * var(--step));background-color:var(--note-border-color);-webkit-mask:var(--note-icon) no-repeat 50% 50%;mask:var(--note-icon) no-repeat 50% 50%;-webkit-mask-size:cover;mask-size:cover;content:""}.page-content-main-col .caution:after,.page-content-main-col .note:after{display:block;inset:-1px;position:absolute;border:1px solid var(--note-border-color);border-radius:var(--EdgeRadius);pointer-events:none;content:""}.page-content-main-col .caution :is(*),.page-content-main-col .note :is(*){margin-block:0}.page-content-main-col .caution ul,.page-content-main-col .note ul{margin-inline-start:max(4 * var(--step))}.page-content-main-col .caution ul li,.page-content-main-col .note ul li{margin-block-start:max(1 * var(--step))}.page-content-main-col .note{--note-border-color: var(--NoteBorderColor);--note-icon: var(--NoteIcon)}.page-content-main-col .caution{--note-border-color: var(--CautionBorderColor);--note-icon: var(--CautionIcon)}.page-content-main-col .p-compliance-aside{margin-block-start:max(12 * var(--step))}.page-content-main-col .p-contribution-footer{border-block-start:1px solid var(--Grey900Color);margin-block-start:max(15 * var(--step))}.page-content-main-col .p-contribution-footer h3{font-size:max(24 * var(--rpx));font-weight:400;line-height:calc(20 / 18)}.page-content-main-col .p-contribution-footer ul{margin-block-start:0;margin-inline-start:0;padding-inline-start:0;list-style:none}.page-content-main-col .p-contribution-footer ul li{margin-block-end:max(5 * var(--step));margin-block-start:0}.page-content-main-col .p-contribution-footer p{margin-block-start:max(3 * var(--step))}.page-content-side-col{//flex-shrink: 0}@media (width < 1294px){.page-content-side-col{display:none}}@media (width >= 1294px){.page-content-side-col{flex-basis:max(74 * var(--step))}}.page-content-side-col .-content{inset-block-start:max(9 * var(--step));inset-inline-end:0;position:sticky}.page-content-side-col .-content hr{block-size:max(18 * var(--step));background:linear-gradient(0deg,transparent calc(50% - .5px),#7b8089 calc(50% - .5px),#7b8089 calc(50% + .5px),transparent calc(50% + .5px)) 50% 0}a.h{color:inherit;--icon-size: max(.75em, 1rem)}a.h>*{display:flex}a.h>*:after{display:inline-block;block-size:max(1 * var(--icon-size));inline-size:max(1 * var(--icon-size));margin-block-start:.1rem;margin-inline-start:max(.25 * var(--icon-size));opacity:0;transition:opacity .2s;content:var(--AnchorIcon)}a.h:hover>*:after,a.h:focus-visible>*:after{opacity:60%}a.h:hover{color:var(--InvertedColor)}a.h:focus-visible{outline-color:transparent}:root{--max-table-size: max(230 * var(--step))}@media (1440px > width >= 1294px){:root{--max-table-size: max(175 * var(--step))}}.table-overflow,.color-table{margin-block-end:max(5 * var(--step));max-inline-size:var(--max-table-size);overflow-x:auto;overflow-x:overlay}.table-overflow table,.color-table table{inline-size:100%;min-inline-size:auto}.small table thead th,.small table td{padding-inline-end:0;padding-inline-start:max(3 * var(--step))}.table-overflow.short{max-inline-size:max(175 * var(--step))}.table-typography table thead th{min-inline-size:max(29 * var(--step))}.status-system-colors,.status-symbol-colors{margin-block-end:max(5 * var(--step));max-inline-size:var(--max-table-size);overflow-x:auto}.status-system-colors table,.status-symbol-colors table{inline-size:100%;min-inline-size:auto}.status-system-colors table td,.status-symbol-colors table td{line-height:1.5rem}@media (width < 768px){.status-system-colors table th:not(:first-of-type),.status-symbol-colors table th:not(:first-of-type){min-inline-size:350px}}.status-system-colors .status-color,.status-symbol-colors .status-color{block-size:max(16 * var(--step));box-sizing:border-box;inline-size:max(16 * var(--step));background:transparent;border:max(1 * var(--step)) solid transparent}.color-table code{white-space:nowrap}.table-dark table{background-color:var(--BaseColorDefault);border-radius:max(2 * var(--step));color:var(--PrimaryColor);border-collapse:collapse}.table-dark table td{background-color:transparent}.table-dark table thead{background-color:var(--BaseHeaderColor)}.table-dark table thead th{background-color:transparent;color:var(--PrimaryColor)}.table-dark table tbody tr:last-child{border-block-end:0 solid transparent}.table-dark table tbody tr:last-child td:first-child{border-end-start-radius:max(2 * var(--step))}.table-dark table tbody tr:last-child td:last-child{border-end-end-radius:max(2 * var(--step))}.heat-map-table{margin-block-end:20px}.heat-map-table table{inline-size:auto}.heat-map-table table th,.heat-map-table table td{border:1px solid var(--SecondaryColor)}.heat-map-table table tr{border-block-end:0}.heat-map-table table thead th{font-weight:400;text-align:center;background:transparent;color:inherit}.heat-map-table table td{line-height:1.5rem;text-align:center}.heat-map-table table td span{display:flex;justify-content:center}.astro-code{background-color:var(--BrightBlue850Color)!important}.astro-code,.code-block{margin-block-end:max(5 * var(--step));overflow-x:auto;padding:max(4 * var(--step));font-family:var(--SystemMonoType);font-size:max(14 * var(--rpx));line-height:calc(20 / 14);background:var(--BrightBlue850Color);border-radius:var(--EdgeRadius);color:var(--PrimaryColor)}.astro-code>code,.code-block>code{white-space:pre}.example-do>figcaption,.example-dont>figcaption{margin-block-start:max(2 * var(--step));box-shadow:var(--border-color) 0 max(1 * var(--step)) 0 0 inset;--border-color: currentColor}.example-do>figcaption{--border-color: var(--ExampleDoColor)}.example-dont>figcaption{--border-color: var(--ExampleDontColor)}.release-table{margin-block-end:max(5 * var(--step));max-inline-size:var(--max-table-size);overflow-x:scroll}.release-table th,.release-table td{font-size:max(16 * var(--rpx));line-height:1.25;vertical-align:text-top;white-space:normal}.release-table th{padding:max(2 * var(--step));font-weight:700}.release-table td{padding:max(2 * var(--step))}.breaking-change-details{margin-block-start:max(4 * var(--step))}.collapsible-code{margin-block-end:max(5 * var(--step));border:1px solid var(--Grey500Color);border-radius:var(--EdgeRadius)}.collapsible-code details:last-child summary{border-color:transparent}.collapsible-code summary{border-block-end:1px solid var(--Grey500Color);padding:max(1 * var(--step))}.collapsible-code summary::marker{font-size:max(14 * var(--rpx));color:var(--Grey800Color)}.collapsible-code pre{border-start-end-radius:0;border-start-start-radius:0;margin-block-end:0}.styled-button{padding-block:max(1 * var(--step));padding-inline:max(4 * var(--step));font-size:max(16 * var(--rpx));line-height:max(24 * var(--rpx));background-color:var(--DarkBlue500Color);border:1px solid var(--DarkBlue500Color);border-radius:3px;color:var(--PrimaryColor);cursor:pointer}.styled-button:hover{background-color:var(--DarkBlue700Color);border-color:var(--DarkBlue500Color)}.styled-button:disabled,.styled-button:not([href]){cursor:not-allowed;opacity:.4}.p-button{inline-size:-moz-fit-content;inline-size:fit-content;padding-block:max(3 * var(--step));padding-inline:max(10 * var(--step));font-size:max(16 * var(--rpx));font-weight:300;line-height:max(24 * var(--rpx));background-color:var(--DarkBlue500Color);border:1px solid var(--DarkBlue500Color);border-radius:var(--EdgeRadius);color:var(--PrimaryColor);cursor:pointer}.p-button:hover{background-color:var(--DarkBlue700Color);border-color:var(--DarkBlue500Color)}.styled-select{margin-inline-end:max(2 * var(--step));margin-inline-start:calc(-1*max(2 * var(--step)));max-inline-size:max(100 * var(--step));padding-block:max(1 * var(--step));padding-inline-end:max(8 * var(--step));padding-inline-start:max(2 * var(--step));font-size:max(16 * var(--rpx));line-height:max(20 * var(--rpx));appearance:none;background-color:var(--PrimaryColor);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.12 9.29 12 13.17l3.88-3.88a.996.996 0 1 1 1.41 1.41l-4.59 4.59a.996.996 0 0 1-1.41 0L6.7 10.7a.996.996 0 0 1 0-1.41c.39-.38 1.03-.39 1.42 0Z" /></svg>');background-position:right max(1 * var(--step)) top 50%;background-repeat:no-repeat;background-size:max(24 * var(--rpx)) auto;border-radius:var(--EdgeRadius)}.spec-container{display:flex;flex-flow:column;gap:max(10 * var(--rpx));margin-block-end:max(5 * var(--step));padding:max(5 * var(--step));background-color:var(--DarkBlue800Color)}.spec-container.-anatomy figure{display:flex;flex-grow:1;justify-content:center;margin:0 auto}.spec-container.-anatomy figure img{align-self:center;justify-self:center;max-inline-size:100%}.spec-container.-anatomy ol{margin-block-end:0;color:var(--PrimaryColor)}.spec-container.-anatomy ol li{margin-block-start:max(0 * var(--step))}.spec-container.-examples{align-content:space-evenly;flex-flow:row wrap;justify-content:space-evenly;min-block-size:max(81 * var(--step))}@media (width < 768px){.spec-container.-examples{padding-inline:0}}.spec-container.-examples figure{margin-block-end:0}@media (width < 768px){.spec-container.-examples figure{inline-size:100%}.spec-container.-examples figure img{margin:0 auto}}.spec-container strong{display:block;margin-block-start:max(4 * var(--step))}tr:has(td > span.attr-title){border-block-end:1px solid var(--Grey700Color)}td:has(span.attr-title){padding-block-start:max(6 * var(--step))}.attr-title{font-weight:700}.specs-table-container{margin-block-end:max(5 * var(--step));overflow-x:auto}.specs-table-container table{inline-size:100%;min-inline-size:auto}.specs-table-container table thead th:first-child{border-radius:max(2 * var(--step)) 0 0 0}.specs-table-container table thead th:last-child{border-radius:0 max(2 * var(--step)) 0 0}.specs-table-container table th:nth-child(1){inline-size:30%}.specs-table-container table th:nth-child(2){inline-size:40%}.specs-table-container table th:nth-child(3){inline-size:30%}.page-content-main-col .specs-table-container{max-inline-size:max(212 * var(--step))}.return-btn{align-self:center;margin-block-start:max(4 * var(--step));margin-inline-start:auto;padding-block:max(2 * var(--step));padding-inline:max(11 * var(--step));font-size:max(16 * var(--rpx));line-height:max(20 / 16);background-color:var(--InteractiveColor);border-radius:var(--EdgeRadius);box-shadow:var(--InteractiveColor) 0 0 0 1px inset;color:var(--InverseColor);cursor:pointer}.return-btn:is(:hover,:focus-visible){background-color:var(--InteractiveHoverColor);box-shadow:var(--InteractiveHoverColor) 0 0 0 1px inset}