/* docara-shell-source: runtime/utility/text-color/default/css/default.css */
@layer sf.utilities {
  .color-transparent {
    color: var(--sf-transparent);
  }
  .color-current {
    color: var(--sf-current);
  }
  .color-inherit {
    color: var(--sf-inherit);
  }
  .color-on-surface {
    color: var(--sf-on-surface);
  }
  .color-on-surface-fixed {
    color: var(--sf-on-surface-fixed);
  }
  .color-on-surface-variant {
    color: var(--sf-on-surface-variant);
  }
  .color-on-surface-inverse {
    color: var(--sf-on-surface-inverse);
  }
  .color-on-surface-inverse-fixed {
    color: var(--sf-on-surface-inverse-fixed);
  }
  .color-disable {
    color: var(--sf-disable);
  }
  .color-on-disable {
    color: var(--sf-on-disable);
  }
  .color-primary {
    color: var(--sf-primary);
  }
  .color-on-primary {
    color: var(--sf-on-primary);
  }
  .color-on-primary-container {
    color: var(--sf-on-primary-container);
  }
  .color-on-primary-container-graphic {
    color: var(--sf-on-primary-container-graphic);
  }
  .color-secondary {
    color: var(--sf-secondary);
  }
  .color-on-secondary {
    color: var(--sf-on-secondary);
  }
  .color-on-secondary-container {
    color: var(--sf-on-secondary-container);
  }
  .color-on-secondary-container-graphic {
    color: var(--sf-on-secondary-container-graphic);
  }
  .color-tertiary {
    color: var(--sf-tertiary);
  }
  .color-on-tertiary {
    color: var(--sf-on-tertiary);
  }
  .color-on-tertiary-container {
    color: var(--sf-on-tertiary-container);
  }
  .color-on-tertiary-container-graphic {
    color: var(--sf-on-tertiary-container-graphic);
  }
  .color-error {
    color: var(--sf-error);
  }
  .color-on-error {
    color: var(--sf-on-error);
  }
  .color-on-error-container {
    color: var(--sf-on-error-container);
  }
  .color-on-error-container-graphic {
    color: var(--sf-on-error-container-graphic);
  }
  .color-warning {
    color: var(--sf-warning);
  }
  .color-on-warning {
    color: var(--sf-on-warning);
  }
  .color-on-warning-container {
    color: var(--sf-on-warning-container);
  }
  .color-on-warning-container-graphic {
    color: var(--sf-on-warning-container-graphic);
  }
  .color-success {
    color: var(--sf-success);
  }
  .color-on-success {
    color: var(--sf-on-success);
  }
  .color-on-success-container {
    color: var(--sf-on-success-container);
  }
  .color-on-success-container-graphic {
    color: var(--sf-on-success-container-graphic);
  }
  .color-white {
    color: rgb(255, 255, 255);
  }
  .color-black {
    color: rgb(0, 0, 0);
  }
  .color-gray {
    color: rgb(106, 115, 125);
  }
  .color-gray-0 {
    color: rgb(250, 251, 252);
  }
  .color-gray-1 {
    color: rgb(246, 248, 250);
  }
  .color-gray-2 {
    color: rgb(225, 228, 232);
  }
  .color-gray-3 {
    color: rgb(209, 213, 218);
  }
  .color-gray-4 {
    color: rgb(149, 157, 165);
  }
  .color-gray-5 {
    color: rgb(106, 115, 125);
  }
  .color-gray-6 {
    color: rgb(88, 96, 105);
  }
  .color-gray-7 {
    color: rgb(68, 77, 86);
  }
  .color-gray-8 {
    color: rgb(47, 54, 61);
  }
  .color-gray-9 {
    color: rgb(36, 41, 46);
  }
  .color-red {
    color: rgb(215, 58, 73);
  }
  .color-red-0 {
    color: rgb(255, 238, 240);
  }
  .color-red-1 {
    color: rgb(255, 220, 224);
  }
  .color-red-2 {
    color: rgb(253, 174, 183);
  }
  .color-red-3 {
    color: rgb(249, 117, 131);
  }
  .color-red-4 {
    color: rgb(234, 74, 90);
  }
  .color-red-5 {
    color: rgb(215, 58, 73);
  }
  .color-red-6 {
    color: rgb(203, 36, 49);
  }
  .color-red-7 {
    color: rgb(179, 29, 40);
  }
  .color-red-8 {
    color: rgb(158, 28, 35);
  }
  .color-red-9 {
    color: rgb(134, 24, 29);
  }
  .color-orange {
    color: rgb(246, 106, 10);
  }
  .color-orange-0 {
    color: rgb(255, 248, 242);
  }
  .color-orange-1 {
    color: rgb(255, 235, 218);
  }
  .color-orange-2 {
    color: rgb(255, 209, 172);
  }
  .color-orange-3 {
    color: rgb(255, 171, 112);
  }
  .color-orange-4 {
    color: rgb(251, 133, 50);
  }
  .color-orange-5 {
    color: rgb(246, 106, 10);
  }
  .color-orange-6 {
    color: rgb(227, 98, 9);
  }
  .color-orange-7 {
    color: rgb(209, 87, 4);
  }
  .color-orange-8 {
    color: rgb(194, 78, 0);
  }
  .color-orange-9 {
    color: rgb(160, 65, 0);
  }
  .color-yellow {
    color: rgb(255, 211, 61);
  }
  .color-yellow-0 {
    color: rgb(255, 253, 239);
  }
  .color-yellow-1 {
    color: rgb(255, 251, 221);
  }
  .color-yellow-2 {
    color: rgb(255, 245, 177);
  }
  .color-yellow-3 {
    color: rgb(255, 234, 127);
  }
  .color-yellow-4 {
    color: rgb(255, 223, 93);
  }
  .color-yellow-5 {
    color: rgb(255, 211, 61);
  }
  .color-yellow-6 {
    color: rgb(249, 197, 19);
  }
  .color-yellow-7 {
    color: rgb(219, 171, 9);
  }
  .color-yellow-8 {
    color: rgb(176, 136, 0);
  }
  .color-yellow-9 {
    color: rgb(115, 92, 15);
  }
  .color-green {
    color: rgb(40, 167, 69);
  }
  .color-green-0 {
    color: rgb(240, 255, 244);
  }
  .color-green-1 {
    color: rgb(220, 255, 228);
  }
  .color-green-2 {
    color: rgb(190, 245, 203);
  }
  .color-green-3 {
    color: rgb(133, 232, 157);
  }
  .color-green-4 {
    color: rgb(52, 208, 88);
  }
  .color-green-5 {
    color: rgb(40, 167, 69);
  }
  .color-green-6 {
    color: rgb(34, 134, 58);
  }
  .color-green-7 {
    color: rgb(23, 111, 44);
  }
  .color-green-8 {
    color: rgb(22, 92, 38);
  }
  .color-green-9 {
    color: rgb(20, 70, 32);
  }
  .color-blue {
    color: rgb(3, 102, 214);
  }
  .color-blue-0 {
    color: rgb(241, 248, 255);
  }
  .color-blue-1 {
    color: rgb(219, 237, 255);
  }
  .color-blue-2 {
    color: rgb(200, 225, 255);
  }
  .color-blue-3 {
    color: rgb(121, 184, 255);
  }
  .color-blue-4 {
    color: rgb(33, 136, 255);
  }
  .color-blue-5 {
    color: rgb(3, 102, 214);
  }
  .color-blue-6 {
    color: rgb(0, 92, 197);
  }
  .color-blue-7 {
    color: rgb(4, 66, 137);
  }
  .color-blue-8 {
    color: rgb(3, 47, 98);
  }
  .color-blue-9 {
    color: rgb(5, 38, 76);
  }
  .color-purple {
    color: rgb(111, 66, 193);
  }
  .color-purple-0 {
    color: rgb(245, 240, 255);
  }
  .color-purple-1 {
    color: rgb(230, 220, 253);
  }
  .color-purple-2 {
    color: rgb(209, 188, 249);
  }
  .color-purple-3 {
    color: rgb(179, 146, 240);
  }
  .color-purple-4 {
    color: rgb(138, 99, 210);
  }
  .color-purple-5 {
    color: rgb(111, 66, 193);
  }
  .color-purple-6 {
    color: rgb(90, 50, 163);
  }
  .color-purple-7 {
    color: rgb(76, 40, 136);
  }
  .color-purple-8 {
    color: rgb(58, 29, 110);
  }
  .color-purple-9 {
    color: rgb(41, 19, 78);
  }
  .color-pink {
    color: rgb(234, 74, 170);
  }
  .color-pink-0 {
    color: rgb(255, 238, 248);
  }
  .color-pink-1 {
    color: rgb(254, 219, 240);
  }
  .color-pink-2 {
    color: rgb(249, 179, 221);
  }
  .color-pink-3 {
    color: rgb(246, 146, 206);
  }
  .color-pink-4 {
    color: rgb(236, 108, 185);
  }
  .color-pink-5 {
    color: rgb(234, 74, 170);
  }
  .color-pink-6 {
    color: rgb(208, 53, 146);
  }
  .color-pink-7 {
    color: rgb(185, 58, 134);
  }
  .color-pink-8 {
    color: rgb(153, 48, 111);
  }
  .color-pink-9 {
    color: rgb(109, 34, 79);
  }
}

/* docara-shell-source: runtime/utility/text-decoration/default/css/default.css */
@layer sf.utilities {
  .underline {
    -webkit-text-decoration-line: underline;
            text-decoration-line: underline;
  }
  .overline {
    -webkit-text-decoration-line: overline;
            text-decoration-line: overline;
  }
  .line-through {
    -webkit-text-decoration-line: line-through;
            text-decoration-line: line-through;
  }
  .decoration-none {
    -webkit-text-decoration-line: none;
            text-decoration-line: none;
  }
}

/* docara-shell-source: runtime/utility/title/default/css/default.css */
@layer sf.utilities {
  .title-1 {
    font-size: var(--sf-text--size-1);
    line-height: var(--sf-title--height-1);
  }
  .title-2 {
    font-size: var(--sf-text--size-2);
    line-height: var(--sf-title--height-2);
  }
  .title-3 {
    font-size: var(--sf-text--size-3);
    line-height: var(--sf-title--height-3);
  }
  .title-4 {
    font-size: var(--sf-text--size-4);
    line-height: var(--sf-title--height-4);
  }
  .title-5 {
    font-size: var(--sf-text--size-5);
    line-height: var(--sf-title--height-5);
  }
  .title-6 {
    font-size: var(--sf-text--size-6);
    line-height: var(--sf-title--height-6);
  }
  .title-7 {
    font-size: var(--sf-text--size-7);
    line-height: var(--sf-title--height-7);
  }
  .title-8 {
    font-size: var(--sf-text--size-8);
    line-height: var(--sf-title--height-8);
  }
  .title-9 {
    font-size: var(--sf-text--size-9);
    line-height: var(--sf-title--height-9);
  }
  .title-10 {
    font-size: var(--sf-text--size-10);
    line-height: var(--sf-title--height-10);
  }
  .title-11 {
    font-size: var(--sf-text--size-11);
    line-height: var(--sf-title--height-11);
  }
  .title-12 {
    font-size: var(--sf-text--size-12);
    line-height: var(--sf-title--height-12);
  }
}

/* docara-shell-source: runtime/utility/transition-property/default/css/default.css */
@layer sf.utilities {
  .transition-none {
    transition-property: none;
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(--sf-ease-move);
    transition-duration: var(--sf-duration-normal);
  }
  .transition {
    transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
    transition-timing-function: var(--sf-ease-move);
    transition-duration: var(--sf-duration-normal);
  }
  .transition-colors {
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: var(--sf-ease-move);
    transition-duration: var(--sf-duration-normal);
  }
  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--sf-ease-move);
    transition-duration: var(--sf-duration-normal);
  }
  .transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: var(--sf-ease-move);
    transition-duration: var(--sf-duration-normal);
  }
  .transition-transform {
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    transition-timing-function: var(--sf-ease-move);
    transition-duration: var(--sf-duration-normal);
  }
  .transition-width {
    transition-property: width;
    transition-timing-function: var(--sf-ease-move);
    transition-duration: var(--sf-duration-normal);
  }
  .transition-height {
    transition-property: height;
    transition-timing-function: var(--sf-ease-move);
    transition-duration: var(--sf-duration-normal);
  }
  .transition-size {
    transition-property: width, height;
    transition-timing-function: var(--sf-ease-move);
    transition-duration: var(--sf-duration-normal);
  }
  .transition-max-width {
    transition-property: max-width;
    transition-timing-function: var(--sf-ease-move);
    transition-duration: var(--sf-duration-normal);
  }
  .transition-max-height {
    transition-property: max-height;
    transition-timing-function: var(--sf-ease-move);
    transition-duration: var(--sf-duration-normal);
  }
  .transition-max-size {
    transition-property: max-width, max-height;
    transition-timing-function: var(--sf-ease-move);
    transition-duration: var(--sf-duration-normal);
  }
  .transition-flex {
    transition-property: flex, flex-basis;
    transition-timing-function: var(--sf-ease-move);
    transition-duration: var(--sf-duration-normal);
  }
  .transition-flex-basis {
    transition-property: flex-basis;
    transition-timing-function: var(--sf-ease-move);
    transition-duration: var(--sf-duration-normal);
  }
  .transition-layout {
    transition-property: flex-grow, flex-shrink, flex-basis, width, min-width, max-width;
    transition-timing-function: var(--sf-ease-move);
    transition-duration: var(--sf-duration-normal);
  }
}

/* docara-shell-source: runtime/utility/width/default/css/default.css */
@layer sf.utilities {
  .w-auto {
    width: auto;
  }
  .w-1\/1 {
    width: 100%;
  }
  .w-1\/2 {
    width: 50%;
  }
  .w-1\/3 {
    width: 33.333333%;
  }
  .w-2\/3 {
    width: 66.666667%;
  }
  .w-1\/4 {
    width: 25%;
  }
  .w-2\/4 {
    width: 50%;
  }
  .w-3\/4 {
    width: 75%;
  }
  .w-1\/5 {
    width: 20%;
  }
  .w-2\/5 {
    width: 40%;
  }
  .w-3\/5 {
    width: 60%;
  }
  .w-4\/5 {
    width: 80%;
  }
  .w-1\/6 {
    width: 16.666667%;
  }
  .w-2\/6 {
    width: 33.333333%;
  }
  .w-3\/6 {
    width: 50%;
  }
  .w-4\/6 {
    width: 66.666667%;
  }
  .w-5\/6 {
    width: 83.333333%;
  }
  .w-1\/12 {
    width: 8.333333%;
  }
  .w-2\/12 {
    width: 16.666667%;
  }
  .w-3\/12 {
    width: 25%;
  }
  .w-4\/12 {
    width: 33.333333%;
  }
  .w-5\/12 {
    width: 41.666667%;
  }
  .w-6\/12 {
    width: 50%;
  }
  .w-7\/12 {
    width: 58.333333%;
  }
  .w-8\/12 {
    width: 66.666667%;
  }
  .w-9\/12 {
    width: 75%;
  }
  .w-10\/12 {
    width: 83.333333%;
  }
  .w-11\/12 {
    width: 91.666667%;
  }
  .w-full {
    width: 100%;
  }
  .w-screen {
    width: 100vw;
  }
  .w-screen-small {
    width: var(--sf-viewport-width-small);
  }
  .w-screen-large {
    width: var(--sf-viewport-width-large);
  }
  .w-screen-dynamic {
    width: var(--sf-viewport-width-dynamic);
  }
  .w-min {
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
  }
  .w-max {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
  }
  .w-fit {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
  .w-px {
    width: 1px;
  }
  .w-0 {
    width: 0;
  }
}

/* docara-shell-source: runtime/utility/z-index/default/css/default.css */
@layer sf.utilities {
  .z-auto {
    z-index: auto;
  }
  .z--1 {
    z-index: var(--sf-z-index--1);
  }
  .z-1 {
    z-index: var(--sf-z-index-1);
  }
  .z-2 {
    z-index: var(--sf-z-index-2);
  }
  .z-3 {
    z-index: var(--sf-z-index-3);
  }
  .z-4 {
    z-index: var(--sf-z-index-4);
  }
  .z-5 {
    z-index: var(--sf-z-index-5);
  }
  .z-6 {
    z-index: var(--sf-z-index-6);
  }
  .z-7 {
    z-index: var(--sf-z-index-7);
  }
  .z-8 {
    z-index: var(--sf-z-index-8);
  }
  .z-9 {
    z-index: var(--sf-z-index-9);
  }
  .z-0 {
    z-index: var(--sf-z-index-0);
  }
}

/* docara-shell-source: portable/declarative-shell.css */
html{color-scheme:light dark}
.theme-light{color-scheme:light}
.theme-dark{color-scheme:dark}
body{min-height:100vh;background:var(--sf-surface-0);color:var(--sf-on-surface)}
.docara-skip-link{position:fixed;inset-block-start:var(--sf-space-1);inset-inline-start:var(--sf-space-1);z-index:100;transform:translateY(-200%);color:var(--sf-on-surface);text-decoration:none}
.docara-skip-link:focus{transform:translateY(0)}
body[data-docara-shell]{opacity:1!important}
.docara-mobile-navigation-trigger,.docara-outline-mobile{display:none}
.docara-header-row>[data-docara-section="docara.header"]{min-inline-size:0;align-items:center;flex:1 1 auto}
.docara-language-menu>summary{list-style:none}
.docara-language-menu>summary::-webkit-details-marker{display:none}
.docara-language-menu__popup{position:absolute;inset-block-start:calc(100% + var(--sf-space-1\/3));inset-inline-end:0;z-index:10;min-inline-size:var(--sf-f0);border:1px solid var(--sf-outline-variant);border-radius:var(--sf-radius-2,var(--sf-radius-default));background:var(--sf-surface-0);box-shadow:var(--sf-ui-shadow-2)}
.docara-language-menu:not([open])>.docara-language-menu__popup{display:none}
.docara-language-menu__option:hover{background:var(--sf-surface-container-hover)}
.docara-language-menu__option:focus-visible{background:var(--sf-surface-container-active);outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);outline-offset:calc(var(--sf-focus--width) * -1)}
/* The header row pads its container with one space step (p-1); the docs layout and footer use the same inset so the sidebar, content and outline edges line up with the logo and the last header action. */
.docara-docs-layout.container,body[data-docara-shell]>.container[data-docara-region="footer"]{padding-inline:var(--sf-space-1)}
.docara-docs-layout{display:grid;grid-template-columns:minmax(var(--sf-f4),var(--sf-f8)) minmax(0,1fr)}
.docara-docs-layout[data-outline="true"]{grid-template-columns:minmax(var(--sf-f4),var(--sf-f8)) minmax(0,1fr) var(--sf-f2)}
.docara-docs-layout[data-sidebar="false"]{grid-template-columns:minmax(0,1fr)}
.docara-docs-layout[data-sidebar="false"][data-outline="true"]{grid-template-columns:minmax(0,1fr) var(--sf-f2)}
.docara-sidebar{align-self:stretch;border-inline-end:1px solid var(--sf-outline-variant)}
.docara-sidebar-panel{position:sticky;inset-block-start:var(--docara-header-block-size);block-size:calc(100vh - var(--docara-header-block-size));display:flex;flex-direction:column}
.docara-sidebar-scroll{flex:1 1 auto;min-block-size:0}
.docara-sidebar-credit{flex:0 0 auto;margin:0;padding-block:var(--sf-space-1);padding-inline:var(--sf-space-1);border-block-start:1px solid var(--sf-outline-variant)}
.docara-sidebar-credit-link{--docara-credit-logo-size:var(--sf-b4);--docara-credit-wordmark:currentColor;--docara-credit-mark:color-mix(in srgb,currentColor 55%,transparent);color:var(--sf-on-surface-variant);text-decoration:none}
.docara-sidebar-credit-link:hover{color:var(--sf-on-surface)}
.docara-sidebar-credit-link:focus-visible{outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color,Highlight);outline-offset:var(--sf-focus--offset)}
.docara-sidebar-credit-logo{display:inline-block;block-size:var(--docara-credit-logo-size);inline-size:auto;vertical-align:calc(var(--docara-credit-logo-size) * -0.247);fill:var(--docara-credit-wordmark)}
.docara-sidebar-credit-mark{fill:var(--docara-credit-mark)}
.docara-sidebar-credit-text--before{margin-inline-end:var(--sf-a4)}.docara-sidebar-credit-text--after{margin-inline-start:var(--sf-a4)}
.docara-sidebar-scroll>.sf-scrollbar__viewport>[data-docara-section]{padding-block:var(--sf-space-1);padding-inline-end:var(--sf-space-1);padding-inline-start:0}
.docara-outline-rail{position:relative;align-self:stretch;box-shadow:inset var(--sf-px) var(--sf-0) var(--sf-0) var(--sf-outline-variant)}
.docara-outline-rail{--docara-outline-indent:calc(var(--sf-space-2) + var(--sf-a2))}
html[dir="rtl"] .docara-outline-rail{box-shadow:inset calc(var(--sf-px) * -1) var(--sf-0) var(--sf-0) var(--sf-outline-variant)}
.docara-outline-scroll{position:sticky;inset-block-start:var(--docara-header-block-size);block-size:calc(100vh - var(--docara-header-block-size));direction:ltr}
.docara-outline-scroll>.sf-scrollbar__viewport>[data-docara-section]{padding:var(--sf-space-2);padding-inline-start:var(--docara-outline-indent)}
html[dir="rtl"] .docara-outline-scroll>.sf-scrollbar__viewport>[data-docara-section]{padding-inline-start:var(--sf-space-2);padding-inline-end:var(--docara-outline-indent)}
html[dir="ltr"] .docara-outline-scroll>.sf-scrollbar__viewport>[data-docara-section]>*{direction:ltr}
html[dir="rtl"] .docara-outline-scroll>.sf-scrollbar__viewport>[data-docara-section]>*{direction:rtl}
/* The sticky header is a row of size-1 controls (--sf-d0) inside p-1 padding over a border-bottom-1, so its height follows the same tokens at every breakpoint. A jump target stops one spacing step below it; reading mode hides the header. */
:root{--docara-header-block-size:calc(var(--sf-d0) + var(--sf-space-1) * 2 + var(--sf-a1));--docara-anchor-offset:calc(var(--docara-header-block-size) + var(--sf-space-2))}
html[data-docara-focus-mode] body:has(>.docara-docs-layout){--docara-header-block-size:0px;--docara-anchor-offset:var(--sf-space-2)}
.docara-content{color:var(--sf-on-surface);scroll-margin-block-start:var(--docara-anchor-offset)}
[data-docara-region="main"]{container-type:inline-size}
/* Reader font size: one step of the root size. Framework type, spacing, controls and container steps are rem-based, so the header, navigation, outline, breadcrumbs and content all follow, like a browser text-size change: 16px body text becomes 14px or 18px (--sf-b4 / --sf-b8 over --sf-b6). Percentages keep the reader's own browser default as the base. */
html[data-docara-font-size="small"]{font-size:87.5%}
html[data-docara-font-size="large"]{font-size:112.5%}
/* Reading toolbar: breadcrumbs with the outline and reading-mode toggles at the inline end. */
.docara-reading-actions{margin-inline-start:auto}
/* Reading mode swaps the toolbar toggle for a round Framework icon button pinned to the window corner. */
.docara-focus-exit,html[data-docara-focus-mode] .docara-focus-toggle{display:none}
html[data-docara-focus-mode] .docara-docs-layout .docara-focus-exit{display:inline-flex;position:fixed;z-index:3;inset-block-start:var(--sf-space-1);inset-inline-end:var(--sf-space-1)}
@media not all and (max-width:72rem){
  html[data-docara-outline-hidden] .docara-docs-layout[data-outline="true"]{grid-template-columns:minmax(var(--sf-f4),var(--sf-f8)) minmax(0,1fr)}
  html[data-docara-outline-hidden] .docara-docs-layout[data-sidebar="false"][data-outline="true"]{grid-template-columns:minmax(0,1fr)}
  html[data-docara-outline-hidden] .docara-docs-layout>.docara-outline-rail{display:none}
}
/* Reading mode keeps only the content column. */
html[data-docara-focus-mode] body:has(>.docara-docs-layout)>.docara-header,html[data-docara-focus-mode] body:has(>.docara-docs-layout)>[data-docara-region="footer"],html[data-docara-focus-mode] .docara-docs-layout>.docara-sidebar,html[data-docara-focus-mode] .docara-docs-layout>.docara-outline-rail,html[data-docara-focus-mode] .docara-docs-layout .docara-outline-mobile,html[data-docara-focus-mode] .docara-outline-toggle{display:none}
html[data-docara-focus-mode] .docara-docs-layout.docara-docs-layout{grid-template-columns:minmax(0,1fr)}
/* Reading mode sets the whole column, toolbar, code, tables and examples alike, on the prose measure and centres it, so nothing runs wider than the text; the reader wide format keeps the full width. */
html[data-docara-focus-mode]:not([data-docara-content-width="wide"]) .docara-docs-layout .docara-reading-column>*{inline-size:100%;max-inline-size:var(--sf-text--measure-wide);margin-inline:auto}
@media(max-width:72rem){.docara-outline-toggle{display:none}}
/* Reader wide format: the shell takes the Framework's widest container step (layout.container.max 8) instead of the authored one, and prose lines lose their measure limit. The container tokens exist from the Framework lg breakpoint (60rem), like max-container-N. */
@media(min-width:60rem){html[data-docara-content-width="wide"] body[data-docara-shell] .docara-header-row,html[data-docara-content-width="wide"] body[data-docara-shell] .docara-docs-layout,html[data-docara-content-width="wide"] body[data-docara-shell]>[data-docara-region="footer"]{max-inline-size:var(--sf-container-8--size-max)}}
html[data-docara-content-width="wide"] .docara-docs-layout .docara-prose p:not(:where(.docara-example-inline *)),html[data-docara-content-width="wide"] .docara-docs-layout .docara-prose li:not(:where(.docara-example-inline *)){max-width:none}
.docara-document-link{overflow-wrap:anywhere;background:transparent;transition:background-color 120ms ease}
.docara-document-link:hover{background:var(--sf-surface-container-hover)}
.docara-document-link:active{background:var(--sf-surface-container-active)}
.docara-document-link>sf-icon{flex:none}
.docara-previous-next{margin-block-start:var(--sf-space-4);padding-block-start:var(--sf-space-2);border-block-start:1px solid var(--sf-outline-variant)}
.docara-document-link--next{justify-content:flex-end;text-align:end}
.docara-prose h1[id]:not(:where(.docara-example-inline *)),.docara-prose h2[id]:not(:where(.docara-example-inline *)),.docara-prose h3[id]:not(:where(.docara-example-inline *)),.docara-prose h4[id]:not(:where(.docara-example-inline *)),.docara-prose h5[id]:not(:where(.docara-example-inline *)),.docara-prose h6[id]:not(:where(.docara-example-inline *)){scroll-margin-block-start:var(--docara-anchor-offset)}
.docara-prose p:not(:where(.docara-example-inline *)),.docara-prose li:not(:where(.docara-example-inline *)){max-width:var(--sf-text--measure-wide)}
.docara-prose img{max-inline-size:100%}
.aspect-21x9{aspect-ratio:21/9}
.docara-prose>p>img:only-child,.docara-prose>p>a:only-child>img:only-child{display:block;block-size:auto}
.docara-prose figure>img,.docara-prose picture>img{display:block}
.docara-prose figure,.docara-prose picture{max-inline-size:100%}
[data-docara-table-scroll]{border:1px solid var(--sf-outline-variant);border-radius:var(--sf-radius-2,var(--sf-radius-default));background:var(--sf-surface-0)}
[data-docara-table-scroll]>.table{inline-size:100%;margin:0;border:0;border-radius:0;border-collapse:separate;border-spacing:0}
[data-docara-table-scroll]>.table>thead{background:var(--sf-surface-container)}
[data-docara-table-scroll]>.table>thead>tr>th,[data-docara-table-scroll]>.table>tbody>tr>td{min-inline-size:var(--sf-e0,5rem);overflow-wrap:normal;word-break:normal;padding-block:var(--sf-space-1\/2);padding-inline:var(--sf-space-1);border:0;border-inline-end:var(--sf-px) solid var(--sf-outline-variant);border-block-end:var(--sf-px) solid var(--sf-outline-variant);text-align:start;vertical-align:top}
[data-docara-table-scroll]>.table>thead>tr>th{padding-block:var(--sf-space-1);background:var(--sf-surface-container);color:var(--sf-on-surface);font-weight:var(--sf-font-weight-bold)}
[data-docara-table-scroll]>.table>*>tr>*:last-child{border-inline-end-width:0}
[data-docara-table-scroll]>.table>tbody>tr:last-child>*{border-block-end-width:0}
.docara-mobile-sheet{position:fixed;inset-block:0;inset-inline-start:0;inset-inline-end:auto;inline-size:min(90vw,var(--sf-g1));block-size:100dvh;max-block-size:100dvh;margin:0;border:0;border-inline-end:1px solid var(--sf-outline-variant);border-radius:0;overflow:hidden;color:var(--sf-on-surface);background:var(--sf-surface-0)}
.docara-mobile-sheet:not([open]){display:none}
.docara-mobile-sheet::backdrop{background:color-mix(in srgb,var(--sf-on-surface) 38%,transparent);backdrop-filter:blur(var(--sf-a2))}
.docara-mobile-sheet-header{flex:0 0 auto;min-block-size:var(--sf-d4)}
.docara-mobile-sheet[open]{display:flex;flex-direction:column}.docara-mobile-sheet-content{flex:1 1 auto;min-block-size:0;overflow:auto;overscroll-behavior:contain}
.docara-mobile-sheet>.docara-sidebar-credit{padding-inline:var(--sf-space-2)}
.docara-outline-dialog{inset-inline-start:auto;inset-inline-end:0;border-inline-start:1px solid var(--sf-outline-variant);border-inline-end:0}
.docara-code-block.bg-surface-container{background:var(--sf-surface-0)}
.docara-code-block>.sf--highlight-head{margin:0;border-bottom:1px solid var(--sf-outline-variant)}
.docara-code-header,.docara-code-block>.sf--highlight-head,.docara-example-preview__header{position:relative;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;align-content:center;gap:var(--sf-space-1);min-block-size:calc(var(--sf-ui-1--control-height) + 2 * var(--sf-space-1\/3));padding:var(--sf-space-1\/3) var(--sf-space-1);background:var(--sf-surface-0)}
.docara-code-header>span,.docara-code-block>.sf--highlight-head>span{display:inline-flex;align-self:center;inline-size:max-content;max-inline-size:100%;min-block-size:var(--sf-ui-1--control-height);align-items:center;padding-inline:var(--sf-space-1);color:var(--sf-on-surface);font-size:var(--sf-text-size-1);line-height:var(--sf-text-height-1)}
.docara-code-header>[data-docara-code-actions],.docara-code-block>.sf--highlight-head>[data-docara-code-actions],.docara-example-preview__actions{display:flex;align-self:center;align-items:center;justify-self:end;gap:var(--sf-space-1\/3)}
.docara-code-header>[data-docara-code-actions],.docara-code-block>.sf--highlight-head>[data-docara-code-actions]{margin:0}
.docara-code-header>[data-docara-code-actions]>button,.docara-code-block>.sf--highlight-head>[data-docara-code-actions]>button{margin:0;color:var(--sf-on-surface-variant)}
.docara-code-header>[data-docara-code-actions]>button .sf-button-text-container,.docara-code-block>.sf--highlight-head>[data-docara-code-actions]>button .sf-button-text-container{display:none}
.docara-code-header>[data-docara-code-actions]>button:hover,.docara-code-header>[data-docara-code-actions]>button:focus-visible,.docara-code-block>.sf--highlight-head>[data-docara-code-actions]>button:hover,.docara-code-block>.sf--highlight-head>[data-docara-code-actions]>button:focus-visible{color:var(--sf-on-surface)}
.docara-code-header>[data-docara-code-actions]>button:focus:not(:focus-visible),.docara-code-block>.sf--highlight-head>[data-docara-code-actions]>button:focus:not(:focus-visible){--sf-icon-button--box-shadow:none;outline:0;box-shadow:none}
.docara-code-fallback-action{display:block;inline-size:var(--sf-ui-1--control-height);block-size:var(--sf-ui-1--control-height);margin:0}
.docara-code-block>[data-docara-code-fallback]{border-bottom:1px solid var(--sf-outline-variant)}
.docara-code-block:not([data-sf-highlight-chrome="static"]):has(>.sf--highlight-head)>[data-docara-code-fallback]{display:none}
.docara-code-block+*{margin-block-start:var(--sf-space-4)}
.docara-code-scroll{max-width:100%;background:var(--sf-surface-0);border:0;border-radius:0;box-shadow:none;overscroll-behavior-inline:contain}
.docara-code-scroll code{display:block;min-inline-size:max-content;white-space:pre;background:transparent}
.docara-code-scroll .hljs-ln{inline-size:max-content;margin:0;border:0;border-spacing:0;border-collapse:collapse;background:transparent}
.docara-code-scroll .hljs-ln td{margin:0;padding:0;border:0;background:transparent}
.docara-code-scroll .hljs-ln-numbers{display:none}
.docara-code-scroll .hljs-ln-code{padding-inline:0}
[data-docara-code-wrap-active="true"] .docara-code-scroll{overflow-x:hidden}
[data-docara-code-wrap-active="true"] .docara-code-scroll code{min-inline-size:0;white-space:pre-wrap;overflow-wrap:anywhere}
[data-docara-code-wrap-active="true"] .docara-code-scroll .hljs-ln{inline-size:100%;table-layout:fixed}
[data-docara-code-wrap-active="true"] .docara-code-scroll .hljs-ln-code{white-space:pre-wrap;overflow-wrap:anywhere}
body[data-docara-shell] sf-button:not(:where(.docara-example-inline *)){display:block}
.docara-prose sf-alert:not(:where(.docara-example-inline *)),.docara-prose sf-button:not(:where(.docara-example-inline *)){margin-block:var(--sf-space-2)}
.docara-landing{display:block;min-height:auto;container-type:inline-size}
.docara-landing [data-docara-block="hero"]:not([data-docara-surface]){background:radial-gradient(circle at 12% 18%,color-mix(in srgb,var(--sf-primary-container) 72%,transparent),transparent 46%),radial-gradient(circle at 88% 12%,color-mix(in srgb,var(--sf-tertiary-container) 58%,transparent),transparent 38%),color-mix(in srgb,var(--sf-surface-container) 76%,transparent)}
/* A hero with a background effect: the Framework gives the area the theme the effect draws (sf-effect-area with theme-dark or theme-light). The area takes that theme's surface and ink, so the text never keeps the page's colour over a scene of the other theme while the effect loads, draws translucently or is hidden. */
[data-docara-block="hero"][data-sf-effect]{position:relative}
[data-docara-block="hero"][data-sf-effect].sf-effect-area{background:var(--sf-surface-0);color:var(--sf-on-surface)}
/* Hero padding=2xl: a tall first screen whose vertical padding grows with the viewport from --sf-d2 (3rem) on a phone to --sf-e4 (7rem) on a wide screen, with no breakpoint. The Framework has no fluid spacing utility; the limits are its spacing tokens. The value is a property so the pause button below can be placed inside it. */
:root{--docara-padding-2xl:clamp(var(--sf-d2),var(--sf-c2) + 6vw,var(--sf-e4))}
.docara-padding-2xl{padding-block:var(--docara-padding-2xl)}
/* The pause button sits in the hero's bottom padding at the inline end, below the content and media, so it never covers them and does not add a row to the hero. A 2xl padding (3rem and more) holds the button as it is: the button keeps --sf-space-1 from the bottom, or sits in the middle of the padding where the padding is barely taller than it, and the hero keeps its height. An lg or xl padding (1rem to 2rem) is lower than the button, so while a hero has the button its bottom padding becomes the button plus --sf-space-1/3 above and below it. The padding is kept while the button waits for the effect to start, so the page does not shift when it appears; with reduced motion the button never shows and the padding stays the hero's own. */
[data-docara-block="hero"]>.docara-effect-toggle{position:absolute;z-index:1;inset-block-end:var(--sf-space-1\/3);inset-inline-end:var(--sf-space-1);margin:0;--sf-icon-button-background-color:var(--sf-surface-0);--sf-icon-button-border-color:var(--sf-outline-variant)}
[data-docara-block="hero"]>.docara-effect-toggle[hidden]{display:none}
[data-docara-block="hero"]:has(>.docara-padding-2xl)>.docara-effect-toggle{inset-block-end:min(var(--sf-space-1),(var(--docara-padding-2xl) - var(--sf-ui-1--control-height))/2)}
@media (prefers-reduced-motion:no-preference){[data-docara-block="hero"]:has(>.docara-effect-toggle)>[data-docara-container]:not(.docara-padding-2xl){padding-block-end:calc(var(--sf-ui-1--control-height) + 2*var(--sf-space-1\/3))}}
.docara-landing .docara-content{width:100%}
.docara-landing .docara-content>[data-docara-section][data-docara-region-owner="main"]{box-sizing:border-box;width:100%;max-width:none;margin:0;padding:0}
.docara-landing .docara-content>[data-docara-width="full"],.docara-landing .docara-content>[data-docara-section][data-docara-region-owner="main"]>[data-docara-width="full"],[data-docara-region="main"]>.docara-prose>[data-docara-width="full"],[data-docara-region="main"]>.docara-prose>[data-docara-section][data-docara-region-owner="main"]>[data-docara-width="full"]{box-sizing:border-box;width:100cqw;margin-inline:calc(50% - 50cqw)}
.docara-landing [data-docara-container]{box-sizing:border-box;width:100%}
.docara-surface>[data-docara-surface-background],.docara-surface>[data-docara-surface-overlay]{position:absolute;inset:0;inline-size:100%;block-size:100%;pointer-events:none}
.docara-surface>[data-docara-container]{box-sizing:border-box}
.docara-surface>[data-docara-container]:not(.docara-landing *){max-inline-size:100%}
.docara-surface>[data-docara-surface-background]{z-index:-2}
.docara-surface>[data-docara-surface-background][data-fit="cover"]{object-fit:cover}
.docara-surface>[data-docara-surface-background][data-fit="contain"]{object-fit:contain}
.docara-surface>[data-docara-surface-background][data-fit="auto"]{object-fit:none}
.docara-surface>[data-docara-surface-background][data-x="left"]{object-position:left center}
.docara-surface>[data-docara-surface-background][data-x="center"]{object-position:center center}
.docara-surface>[data-docara-surface-background][data-x="right"]{object-position:right center}
.docara-surface>[data-docara-surface-background][data-y="top"]{object-position:var(--docara-surface-x,center) top}
.docara-surface>[data-docara-surface-background][data-y="center"]{object-position:var(--docara-surface-x,center) center}
.docara-surface>[data-docara-surface-background][data-y="bottom"]{object-position:var(--docara-surface-x,center) bottom}
.docara-surface>[data-docara-surface-background][data-x="left"]{--docara-surface-x:left}
.docara-surface>[data-docara-surface-background][data-x="center"]{--docara-surface-x:center}
.docara-surface>[data-docara-surface-background][data-x="right"]{--docara-surface-x:right}
.docara-surface>[data-docara-surface-overlay]{z-index:-1;background:transparent}
.docara-surface>[data-docara-surface-overlay][data-overlay="light"][data-strength="soft"]{background:color-mix(in srgb,var(--sf-surface-0) 30%,transparent)}
.docara-surface>[data-docara-surface-overlay][data-overlay="light"][data-strength="medium"]{background:color-mix(in srgb,var(--sf-surface-0) 55%,transparent)}
.docara-surface>[data-docara-surface-overlay][data-overlay="light"][data-strength="strong"]{background:color-mix(in srgb,var(--sf-surface-0) 78%,transparent)}
.docara-surface>[data-docara-surface-overlay][data-overlay="dark"][data-strength="soft"]{background:color-mix(in srgb,var(--sf-on-surface) 30%,transparent)}
.docara-surface>[data-docara-surface-overlay][data-overlay="dark"][data-strength="medium"]{background:color-mix(in srgb,var(--sf-on-surface) 55%,transparent)}
.docara-surface>[data-docara-surface-overlay][data-overlay="dark"][data-strength="strong"]{background:color-mix(in srgb,var(--sf-on-surface) 78%,transparent)}
.docara-landing .docara-content>[data-docara-section][data-docara-region-owner="main"]>h1:first-child,.docara-landing .docara-content>[data-docara-section][data-docara-region-owner="main"]>p:first-of-type{max-width:var(--sf-text--measure)}
[data-docara-media]{display:block;inline-size:100%;block-size:auto}
[data-docara-media="hero"],[data-docara-media="promo"]{aspect-ratio:16/9;object-fit:contain}
[data-docara-media="showcase"]{aspect-ratio:16/9;object-fit:contain}
[data-docara-media="feature-icon"]{inline-size:var(--sf-e0);block-size:var(--sf-e0);object-fit:contain}
[data-docara-block="features"]>li>.docara-icon{align-self:flex-start}
[data-docara-block="details"]>summary{list-style:none;border-radius:var(--sf-radius-1)}
[data-docara-block="details"]>summary::-webkit-details-marker{display:none}
[data-docara-block="details"]>summary>.sf-icon{flex:none;color:var(--sf-on-surface-variant);transition:transform var(--sf-duration-fast) var(--sf-animation)}
[data-docara-block="details"][open]>summary>.sf-icon{transform:rotate(90deg)}
[dir=rtl] [data-docara-block="details"]:not([open])>summary>.sf-icon{transform:rotate(180deg)}
[data-docara-block="details"]>summary:focus-visible{outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color,Highlight);outline-offset:var(--sf-focus--offset)}
.docara-landing [data-docara-block="columns"]>div>h3:first-child{font-size:var(--sf-heading-4--size);line-height:var(--sf-heading-4--height)}
[data-docara-media="card"]{aspect-ratio:4/3;object-fit:cover;border-radius:var(--sf-radius-2)}
[data-docara-media="logo"]{max-inline-size:var(--sf-f0);max-block-size:var(--sf-d2);object-fit:contain}
.docara-example-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--sf-f8)),1fr))}
.docara-example-grid .sf-button{margin-block-start:auto;align-self:flex-start}
.docara-example-preview{overflow:hidden;margin-block-end:var(--sf-space-1);border:1px solid var(--sf-outline-variant);border-radius:var(--sf-radius-2,var(--sf-radius-default));background:var(--sf-surface-0)}
.docara-example-preview__header{border-block-end:1px solid var(--sf-outline-variant)}
.docara-example-inline{display:flow-root;min-inline-size:0}
.docara-example-preview__tabs{display:inline-flex;inline-size:max-content;max-inline-size:100%;align-items:center;gap:0;overflow-x:auto}
.docara-example-preview__tab{display:inline-flex;align-items:center;justify-content:center;min-block-size:var(--sf-ui-1--control-height);margin:0;padding-inline:var(--sf-space-1);border:0;border-radius:0;background:transparent;color:var(--sf-on-surface-variant);font-size:var(--sf-text-size-1);line-height:var(--sf-text-height-1);cursor:pointer}
.docara-example-preview__tab[aria-selected="true"]{color:var(--sf-on-surface)}
.docara-example-preview__tab:focus-visible{outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);outline-offset:calc(var(--sf-focus--width) * -1)}
.docara-tab{flex:0 0 auto;margin:0;border:0;border-block-end:var(--sf-a2) solid transparent;border-radius:0;background:transparent;font:inherit;font-size:var(--sf-text-size-1);line-height:var(--sf-text-height-1);white-space:nowrap;cursor:pointer}
.docara-tab:hover,.docara-tab[aria-selected="true"]{color:var(--sf-on-surface)}
.docara-tab[aria-selected="true"]{border-block-end-color:var(--sf-outline)}
.docara-tab:focus-visible{outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);outline-offset:calc(var(--sf-focus--width) * -1)}
.docara-example-preview__indicator{position:absolute;inset-block-end:-1px;inset-inline-start:0;z-index:1;inline-size:0;block-size:var(--sf-a2);background:var(--sf-outline);pointer-events:none;transition:inset-inline-start 180ms ease,inline-size 180ms ease}
.docara-example-preview__actions{justify-content:flex-end}
.docara-example-preview__action,.docara-example-preview__copy{margin:0;color:var(--sf-on-surface-variant)}
.docara-example-preview__action .sf-icon,.docara-example-preview__copy .sf-icon{--sf-icon--color:var(--sf-on-surface-variant)}
.docara-example-preview__action:hover,.docara-example-preview__action:focus-visible,.docara-example-preview__copy:hover,.docara-example-preview__copy:focus-visible{color:var(--sf-on-surface)}
.docara-example-preview__action:hover .sf-icon,.docara-example-preview__action:focus-visible .sf-icon,.docara-example-preview__copy:hover .sf-icon,.docara-example-preview__copy:focus-visible .sf-icon{--sf-icon--color:var(--sf-on-surface)}
.docara-example-preview .docara-example-preview__action:focus:not(:focus-visible),.docara-example-preview .docara-example-preview__copy:focus:not(:focus-visible){--sf-icon-button--box-shadow:none;outline:0;box-shadow:none}
.docara-example-preview__copy[data-copy-state="copied"],.docara-example-preview__copy[data-copy-state="copied"] .sf-icon{color:var(--sf-on-surface);--sf-icon--color:var(--sf-on-surface)}
.docara-example-preview__panels{background:var(--sf-surface-0)}
.docara-example-preview__panel{display:none;min-inline-size:0;padding:var(--sf-space-2)}
.docara-example-preview__panel>:last-child{margin-block-end:0}
.docara-example-preview__panel--source{padding:0}
.docara-example-preview__panel.is-active{display:block}
.docara-example-preview iframe{display:block;inline-size:100%;border:0;overflow:hidden;background:var(--sf-surface-0)}
.docara-example-preview iframe[data-docara-example-frame]{block-size:var(--sf-f2)}
.docara-example-preview iframe:not([data-docara-example-frame]){block-size:var(--sf-g6)}
.docara-example-preview[data-preview-size="compact"] iframe:not([data-docara-example-frame]){block-size:var(--sf-g1)}
.docara-example-preview[data-preview-size="tall"] iframe:not([data-docara-example-frame]){block-size:var(--sf-h1)}
.docara-example-source{background:var(--sf-surface-container-low);color:var(--sf-on-surface);font:inherit;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;white-space:pre;overscroll-behavior-inline:contain}
[data-docara-example-panel] [data-docara-code-block]{block-size:auto;margin:0;border:0;border-radius:0;background:var(--sf-surface-0)}
[data-docara-example-panel] [data-docara-code-block]>.sf--highlight-head{display:none}
[data-docara-example-panel] [data-docara-code-block]>[data-docara-code-fallback]{display:none}
[data-docara-example-panel] .docara-code-scroll{box-sizing:border-box;block-size:auto;margin:0;background:var(--sf-surface-0)}
[data-docara-example-panel] .docara-code-scroll code{background:transparent}
[data-docara-example-panel] .docara-code-scroll .hljs-ln{inline-size:max-content;margin:0;border:0;border-spacing:0;border-collapse:collapse;background:transparent}
[data-docara-example-panel] .docara-code-scroll .hljs-ln td{margin:0;padding:0;border:0;background:transparent}
[data-docara-example-panel] .docara-code-scroll .hljs-ln-numbers{display:none}
[data-docara-example-panel] .docara-code-scroll .hljs-ln-code{padding-inline:0}
[data-docara-example-wrap-active="true"] [data-docara-example-panel] .docara-code-scroll{overflow-x:hidden}
[data-docara-example-wrap-active="true"] [data-docara-example-panel] .docara-code-scroll code{min-inline-size:0;white-space:pre-wrap;overflow-wrap:anywhere}
[data-docara-example-wrap-active="true"] [data-docara-example-panel] .docara-code-scroll .hljs-ln{inline-size:100%;table-layout:fixed}
[data-docara-example-wrap-active="true"] [data-docara-example-panel] .docara-code-scroll .hljs-ln-code{white-space:pre-wrap;overflow-wrap:anywhere}
[data-docara-example-copy][hidden],[data-docara-example-viewer][hidden],[data-docara-example-viewports][hidden],[data-docara-example-wrap][hidden]{display:none}
/* The width switcher is three Framework link icon buttons; the pressed one carries the Framework .active state (surface-container-active), visible in both themes. */
.docara-example-preview__viewports{display:inline-flex;align-items:center;gap:var(--sf-space-1\/3)}
.docara-example-viewer-dialog{box-sizing:border-box;inline-size:100vw;max-inline-size:none;block-size:100dvh;max-block-size:none;margin:0;padding:0;border:0;background:var(--sf-surface-0);color:var(--sf-on-surface)}
.docara-example-viewer-dialog::backdrop{background:color-mix(in srgb,var(--sf-scrim,var(--sf-on-surface)) 48%,transparent)}
.docara-example-preview[data-docara-example-viewer-active="true"]{display:flex;flex-direction:column;inline-size:100%;block-size:100%;margin:0;border:0;border-radius:0;background:var(--sf-surface-0)}
.docara-example-preview[data-docara-example-viewer-active="true"] .docara-example-preview__panels{display:flex;flex:1;min-block-size:0;overflow:hidden}
.docara-example-preview[data-docara-example-viewer-active="true"] [data-docara-example-panel="example"].is-active{box-sizing:border-box;display:flex;flex:1;min-inline-size:0;min-block-size:0;align-items:flex-start;justify-content:center;overflow:auto;background:var(--sf-surface-0)}
/* At tablet and phone widths the device column stays on surface-0 and the area around it is surface-1, so the contrast marks the simulated width. */
.docara-example-preview[data-docara-example-viewer-active="true"]:is([data-docara-example-viewport="tablet"],[data-docara-example-viewport="mobile"]) [data-docara-example-panel="example"].is-active{background:var(--sf-surface-1)}
.docara-example-preview[data-docara-example-viewer-active="true"] iframe[data-docara-example-frame]{flex:0 0 auto;min-block-size:100%;max-inline-size:none;background:var(--sf-surface-0)}
[data-docara-tree-toggle]+ul[hidden]{display:none}
.docara-step{position:relative;grid-template-columns:var(--sf-d0) minmax(0,1fr);column-gap:var(--sf-space-1);min-block-size:var(--sf-d0);padding-block-end:var(--sf-space-2)}
.docara-step:last-child{padding-block-end:0}
.docara-step:not(:last-child)::after{content:"";position:absolute;inset-block-start:var(--sf-d0);inset-block-end:0;inset-inline-start:calc(var(--sf-c0) - var(--sf-px) / 2);inline-size:1px;background:var(--sf-outline-variant)}
.docara-step-marker{position:relative;z-index:1;box-sizing:border-box;inline-size:var(--sf-d0);block-size:var(--sf-d0);align-self:start;border:1px solid var(--sf-outline);border-radius:50%;background:var(--sf-surface-0);color:var(--sf-on-surface);font-weight:700}
.docara-step[data-step-state="complete"] .docara-step-marker{border-color:var(--sf-primary);background:var(--sf-primary);color:var(--sf-on-primary)}
.docara-step[data-step-state="current"] .docara-step-marker{border:var(--sf-a2) solid var(--sf-primary);background:var(--sf-primary-container);color:var(--sf-on-primary-container)}
.docara-step-content{min-inline-size:0;padding-block-start:var(--sf-space-1\/3)}
.docara-step-content>p{margin:0;color:var(--sf-on-surface-variant)}
.docara-step-content strong{color:var(--sf-on-surface);font-weight:700}
.docara-skip-link:focus-visible,.docara-document-link:focus-visible,[data-docara-component-details-summary]:focus-visible{outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color,Highlight);outline-offset:var(--sf-focus--offset)}
/* Shell breakpoints are in rem, like the Framework's own (32, 44, 60, 72, 80rem), so they follow the reader's browser text size. 72rem is the Framework xl step; 50rem and 37.5rem are the shell's own narrow steps (800px and 600px at the default 16px), kept so the layout changes at the same widths as before. */
@media(max-width:72rem){
  .docara-header-navigation{display:none}
  .docara-mobile-navigation-trigger--primary{display:inline-flex}
  .docara-docs-layout[data-outline="true"]{grid-template-columns:minmax(var(--sf-f4),var(--sf-f8)) minmax(0,1fr)}
  .docara-docs-layout[data-sidebar="false"],.docara-docs-layout[data-sidebar="false"][data-outline="true"]{grid-template-columns:minmax(0,1fr)}
  .docara-outline-rail{display:none}
  .docara-outline-mobile{display:block}
}
@media(max-width:50rem){
  .docara-mobile-navigation-trigger{display:inline-flex}
  .docara-docs-layout,.docara-docs-layout[data-outline="true"]{grid-template-columns:minmax(0,1fr)}
  .docara-sidebar{display:none}
  .docara-reading-column{padding:var(--sf-space-2)}
  /* Landing sections and stepped hero padding (lg, xl) tighten to one spacing step on a narrow screen; a hero with padding=2xl keeps its fluid clamp at every width. */
  .docara-landing [data-docara-container]:not(.docara-padding-2xl){padding-block:var(--sf-space-2)}
}
@media(max-width:37.5rem){
  [data-docara-example-viewer]{display:none!important}
  .docara-previous-next{flex-direction:column}
  .docara-document-link--next{order:-1;justify-content:flex-start;text-align:start}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.docara-example-preview__indicator{transition:none!important}}

.docara-search-modal-surface{--sf-modal-surface-bg:transparent;--sf-modal-surface-border-width:0;--sf-modal-surface-shadow:none;--sf-modal-surface--padding-inline-start:0;--sf-modal-surface--padding-top:0;--sf-modal-surface--padding-inline-end:0;--sf-modal-surface--padding-bottom:0}
.docara-search-trigger{--sf-button--border-color:var(--sf-outline-variant)}
.docara-search-modal-body,.docara-search-modal-content{overflow:visible}
.docara-search-query{box-shadow:var(--sf-ui-shadow-2)}
.docara-search-results-surface{box-shadow:var(--sf-ui-shadow-3)}
.docara-search-results{list-style:none;max-block-size:min(56vh,var(--sf-g7));overflow:auto}
.docara-search-result-item:not(:last-child){border-bottom:var(--sf-a1) solid var(--sf-outline-variant)}
.docara-search-result{overflow-wrap:anywhere}
.docara-search-result:hover{background:var(--sf-surface-container-hover)}
.docara-search-result:focus-visible{background:var(--sf-surface-container-active);outline:var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);outline-offset:calc(var(--sf-focus--width) * -1)}
.docara-search-result-context,.docara-search-result-summary{font-size:var(--sf-text-small--size);line-height:var(--sf-text-small--height)}
.docara-search-mark{background:var(--sf-mark);color:inherit;border-radius:var(--sf-radius-1\/2);padding-inline:var(--sf-a2)}
/* Key chips follow the hint text size instead of the browser's smaller monospace default. */
.docara-search-help kbd{font-size:inherit;line-height:inherit;color:var(--sf-on-surface);background:var(--sf-surface-container);border-radius:var(--sf-radius-1)}
.docara-search-status[data-state="error"]{color:var(--sf-error)}
@media(max-width:50rem){.docara-search-trigger>.sf-button-text-container,.docara-search-shortcut{display:none}.docara-search-help{display:none}.docara-search-results{max-block-size:min(64vh,var(--sf-g7))}}
/* Product-owned composition around the Framework icon primitive. */
.docara-icon {
  --docara-icon-color: var(--sf-on-surface);
  --docara-icon-main: var(--sf-on-surface);
  --docara-icon-on-main: var(--sf-surface-0);
  --docara-icon-container: var(--sf-surface-container);
  --docara-icon-on-container: var(--sf-on-surface);
  place-items: center;
  flex: 0 0 auto;
  color: var(--docara-icon-color);
  vertical-align: middle;
}

.docara-icon > .sf-icon { --sf-icon--color: currentColor; }
.docara-icon[data-docara-icon-scheme="primary"] { --docara-icon-color: var(--sf-primary); --docara-icon-main: var(--sf-primary); --docara-icon-on-main: var(--sf-on-primary); --docara-icon-container: var(--sf-primary-container); --docara-icon-on-container: var(--sf-on-primary-container); }
.docara-icon[data-docara-icon-scheme="secondary"] { --docara-icon-color: var(--sf-secondary); --docara-icon-main: var(--sf-secondary); --docara-icon-on-main: var(--sf-on-secondary); --docara-icon-container: var(--sf-secondary-container); --docara-icon-on-container: var(--sf-on-secondary-container); }
.docara-icon[data-docara-icon-scheme="tertiary"] { --docara-icon-color: var(--sf-tertiary); --docara-icon-main: var(--sf-tertiary); --docara-icon-on-main: var(--sf-on-tertiary); --docara-icon-container: var(--sf-tertiary-container); --docara-icon-on-container: var(--sf-on-tertiary-container); }
.docara-icon[data-docara-icon-scheme="info"] { --docara-icon-color: var(--sf-info); --docara-icon-main: var(--sf-info); --docara-icon-on-main: var(--sf-on-info); --docara-icon-container: var(--sf-info-container); --docara-icon-on-container: var(--sf-on-info-container); }
.docara-icon[data-docara-icon-scheme="success"] { --docara-icon-color: var(--sf-success); --docara-icon-main: var(--sf-success); --docara-icon-on-main: var(--sf-on-success); --docara-icon-container: var(--sf-success-container); --docara-icon-on-container: var(--sf-on-success-container); }
.docara-icon[data-docara-icon-scheme="warning"] { --docara-icon-color: var(--sf-warning); --docara-icon-main: var(--sf-warning); --docara-icon-on-main: var(--sf-on-warning); --docara-icon-container: var(--sf-warning-container); --docara-icon-on-container: var(--sf-on-warning-container); }
.docara-icon[data-docara-icon-scheme="danger"] { --docara-icon-color: var(--sf-error); --docara-icon-main: var(--sf-error); --docara-icon-on-main: var(--sf-on-error); --docara-icon-container: var(--sf-error-container); --docara-icon-on-container: var(--sf-on-error-container); }
.docara-icon[data-docara-icon-variant="tonal"] { background: var(--docara-icon-container); color: var(--docara-icon-on-container); }
.docara-icon[data-docara-icon-variant="main"] { background: var(--docara-icon-main); color: var(--docara-icon-on-main); }
.docara-icon[data-docara-icon-variant="outline"] { border: 1px solid var(--docara-icon-color); color: var(--docara-icon-color); }
.docara-icon[data-docara-icon-container="square"],
.docara-icon[data-docara-icon-container="circle"] { padding: var(--sf-space-1\/2); }
.docara-icon[data-docara-icon-container="square"] { border-radius: var(--sf-radius-default); }
.docara-icon[data-docara-icon-container="circle"] { border-radius: 50%; }
.docara-icon[data-docara-icon-size="1/3"]:not([data-docara-icon-container="none"]) { padding: var(--sf-space-1\/4); }
.docara-icon[data-docara-icon-size="1/2"]:not([data-docara-icon-container="none"]) { padding: var(--sf-space-1\/3); }
.docara-icon[data-docara-icon-size="2"]:not([data-docara-icon-container="none"]),
.docara-icon[data-docara-icon-size="3"]:not([data-docara-icon-container="none"]) { padding: var(--sf-space-1); }

/* Breadcrumbs describe location; use the secondary text tone in the docs shell. */
[data-docara-breadcrumbs] .sf-breadcrumbs-item--link .sf-breadcrumbs-item-container {
    --sf-breadcrumbs-item-container--color: var(--sf-on-surface-variant);
}
[data-docara-breadcrumbs] .sf-breadcrumbs-item--link:hover .sf-breadcrumbs-item-container,
[data-docara-breadcrumbs] .sf-breadcrumbs-item--link:focus-visible .sf-breadcrumbs-item-container {
    --sf-breadcrumbs-item-container--color: var(--sf-on-surface);
    text-decoration: underline;
    text-underline-offset: .2em;
}