/* docara-shell-source: runtime/utility/table-border/default/css/default.css */
@layer sf.utilities {
  .table-border > :not(caption) > * {
    border-width: var(--sf-px) var(--sf-0);
  }
  .table-border > :not(caption) > * > * {
    border-width: var(--sf-0) var(--sf-px);
  }
}

/* docara-shell-source: runtime/utility/table-stripe/default/css/default.css */
@layer sf.utilities {
  .table-stripe > tbody > tr:nth-of-type(odd) > * {
    --sf-table-accent-bg: var(--sf-table-stripe-bg);
    color: var(--sf-table-stripe-color);
  }
  .table-stripe-col > :not(caption) > tr > :nth-child(2n) {
    --sf-table-accent-bg: var(--sf-table-stripe-bg);
    color: var(--sf-table-stripe-color);
  }
}

/* docara-shell-source: runtime/utility/table/default/css/default.css */
@layer sf.utilities {
  table {
    caption-side: bottom;
    border-collapse: collapse;
  }
  tbody, td, tfoot, th, thead, tr {
    border-color: inherit;
    border-style: solid;
    border-width: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .table {
    text-align: left;
  }
  @supports not (text-align: start) {
  html:not([dir="rtl"]) .table {
    text-align: left;
    }
  }
  .table:where(:dir(ltr)) {
    text-align: left;
  }
  _:-ms-input-placeholder, [dir="rtl"] .table {
    text-align: right;
  }
  @supports not (text-align: start) {
  [dir="rtl"] .table {
    text-align: right;
    }
  }
  .table:where(:dir(rtl)) {
    text-align: right;
  }
  .table {
    --sf-table-color: var(--sf-on-surface);
    --sf-table-border-color: var(--sf-outline-variant);
    --sf-table-accent-bg: rgba(0, 0, 0, 0);
    --sf-table-stripe-color: var(--sf-on-surface);
    --sf-table-stripe-bg: var(--sf-surface-transparent-select);
    --sf-table-active-color: var(--sf-on-surface);
    --sf-table-active-bg: var(--sf-surface-transparent-select);
    --sf-table-hover-color: var(--sf-on-surface);
    --sf-table-hover-bg: var(--sf-surface-transparent-hover);
    width: 100%;
    margin-bottom: var(--sf-b6);
    color: var(--sf-table-color);
    vertical-align: top;
    border-color: var(--sf-table-border-color);
    text-align: start;
  }
  .table > :not(caption) > * > * {
    padding: 0.5rem 0.5rem;
    border-bottom-width: var(--sf-px);
    background-image: linear-gradient(var(--sf-table-accent-bg), var(--sf-table-accent-bg));
  }
  .table > tbody {
    vertical-align: inherit;
  }
  .table > thead {
    vertical-align: bottom;
  }
  .table-sm > :not(caption) > * > *,
  .table-small > :not(caption) > * > * {
    padding: 0.25rem 0.25rem;
  }
}

/* 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-scroll{position:sticky;inset-block-start:var(--sf-d4);block-size:calc(100vh - var(--sf-d4))}
.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(--sf-d8);block-size:calc(100vh - var(--sf-d8));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}
.docara-content{color:var(--sf-on-surface);scroll-margin-block-start:var(--sf-d8)}
[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:1152px){
  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)}
@media(max-width:1152px){.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 960px, like max-container-N. */
@media(min-width:960px){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(--sf-d8)}
.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{min-block-size:var(--sf-d4)}
.docara-mobile-sheet-content{max-block-size:calc(100dvh - var(--sf-d4));overflow:auto;overscroll-behavior:contain}
.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)}
.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}
.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-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)}
@media(max-width:1152px){
  .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:800px){
  .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)}
  .docara-content{scroll-margin-block-start:var(--sf-d6)}
  .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(--sf-d6)}
  .docara-landing [data-docara-container]{padding-block:var(--sf-space-2)}
}
@media(max-width:600px){
  [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:800px){.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;
}

/* docara-shell-source: runtime/utility/pointer-events/default/css/default.css */
@layer sf.utilities {
  .pointer-event-none {
    pointer-events: none;
  }
  .pointer-event-auto {
    pointer-events: auto;
  }
}

/* docara-shell-source: runtime/utility/text-align/default/css/default.css */
@layer sf.utilities {
  _:-ms-input-placeholder, html:not([dir="rtl"]) .text-start {
    text-align: left;
  }
  @supports not (text-align: start) {
  html:not([dir="rtl"]) .text-start {
    text-align: left;
    }
  }
  .text-start:where(:dir(ltr)) {
    text-align: left;
  }
  _:-ms-input-placeholder, [dir="rtl"] .text-start {
    text-align: right;
  }
  @supports not (text-align: start) {
  [dir="rtl"] .text-start {
    text-align: right;
    }
  }
  .text-start:where(:dir(rtl)) {
    text-align: right;
  }
  .text-start {
    text-align: start;
  }
  .text-center {
    text-align: center;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .text-end {
    text-align: right;
  }
  @supports not (text-align: end) {
  html:not([dir="rtl"]) .text-end {
    text-align: right;
    }
  }
  .text-end:where(:dir(ltr)) {
    text-align: right;
  }
  _:-ms-input-placeholder, [dir="rtl"] .text-end {
    text-align: left;
  }
  @supports not (text-align: end) {
  [dir="rtl"] .text-end {
    text-align: left;
    }
  }
  .text-end:where(:dir(rtl)) {
    text-align: left;
  }
  .text-end {
    text-align: end;
  }
  .text-justify {
    text-align: justify;
  }
}

/* docara-shell-source: runtime/component/scrollbar/css/scrollbar.css */
/*
* Main SCSS file for including styles for component.
*
* Imports:
* - Styling variables (_var__component_name.scss)
* - Base styles (_css__component_name.scss)
*
*/
/*
* _var__component_name.scss
* 
* SCSS file containing variables for component styling.
* 
* Used to define default parameters (color, size, etc.)
* that can be overridden in other parts of the project.
* 
* Example usage:
* --sf-icon--fill: 0; // Fill for icon
*/
/*
* Main SCSS file for including styles for component.
*
* Imports:
* - Styling variables (_var__component_name.scss)
* - Base styles (_css__component_name.scss)
*
*/
@layer sf.components {
  .sf-scrollbar {
    --sf-scrollbar-hit-size: var(--sf-b6);
    --sf-scrollbar-rest-size: var(--sf-a2);
    --sf-scrollbar-active-size: var(--sf-a6);
    --sf-scrollbar-min-thumb-size: var(--sf-d1);
    --sf-scrollbar-keyboard-step: var(--sf-d0);
    --sf-scrollbar-thumb-color: color-mix(
      in srgb,
      var(--sf-on-surface) 34%,
      var(--sf-transparent)
    );
    position: relative;
    min-height: 0;
    min-block-size: 0;
    overflow: hidden;
  }
  .sf-scrollbar__viewport {
    height: 100%;
    block-size: 100%;
    overflow: auto;
    overscroll-behavior-block: contain;
    overscroll-behavior-inline: auto;
    scrollbar-gutter: auto;
  }
  .sf-scrollbar[data-mode=""]:not(.does-not-exist) .sf-scrollbar__viewport {
    scrollbar-width: none;
  }
  .sf-scrollbar[data-mode=overlay]:not(.does-not-exist) .sf-scrollbar__viewport {
    scrollbar-width: none;
  }
  .sf-scrollbar[data-mode=persistent]:not(.does-not-exist) .sf-scrollbar__viewport {
    scrollbar-width: none;
  }
  .sf-scrollbar[data-mode=hidden]:not(.does-not-exist) .sf-scrollbar__viewport {
    scrollbar-width: none;
  }
  .sf-scrollbar[data-sf-scrollbar=""]:not([data-mode]) .sf-scrollbar__viewport {
    scrollbar-width: none;
  }
  .sf-scrollbar[data-sf-scrollbar=overlay]:not([data-mode]) .sf-scrollbar__viewport {
    scrollbar-width: none;
  }
  .sf-scrollbar[data-sf-scrollbar=persistent]:not([data-mode]) .sf-scrollbar__viewport {
    scrollbar-width: none;
  }
  .sf-scrollbar[data-sf-scrollbar=hidden]:not([data-mode]) .sf-scrollbar__viewport {
    scrollbar-width: none;
  }
  .sf-scrollbar:not([data-mode]):not([data-sf-scrollbar]) .sf-scrollbar__viewport {
    scrollbar-width: none;
  }
  .sf-scrollbar[data-mode=""]:not(.does-not-exist) .sf-scrollbar__viewport::-webkit-scrollbar {
    display: none;
  }
  .sf-scrollbar[data-mode=overlay]:not(.does-not-exist) .sf-scrollbar__viewport::-webkit-scrollbar {
    display: none;
  }
  .sf-scrollbar[data-mode=persistent]:not(.does-not-exist) .sf-scrollbar__viewport::-webkit-scrollbar {
    display: none;
  }
  .sf-scrollbar[data-mode=hidden]:not(.does-not-exist) .sf-scrollbar__viewport::-webkit-scrollbar {
    display: none;
  }
  .sf-scrollbar[data-sf-scrollbar=""]:not([data-mode]) .sf-scrollbar__viewport::-webkit-scrollbar {
    display: none;
  }
  .sf-scrollbar[data-sf-scrollbar=overlay]:not([data-mode]) .sf-scrollbar__viewport::-webkit-scrollbar {
    display: none;
  }
  .sf-scrollbar[data-sf-scrollbar=persistent]:not([data-mode]) .sf-scrollbar__viewport::-webkit-scrollbar {
    display: none;
  }
  .sf-scrollbar[data-sf-scrollbar=hidden]:not([data-mode]) .sf-scrollbar__viewport::-webkit-scrollbar {
    display: none;
  }
  .sf-scrollbar:not([data-mode]):not([data-sf-scrollbar]) .sf-scrollbar__viewport::-webkit-scrollbar {
    display: none;
  }
  .sf-scrollbar[data-mode=standard]:not(.does-not-exist) .sf-scrollbar__viewport {
    scrollbar-color: var(--sf-outline) var(--sf-transparent);
    scrollbar-width: auto;
  }
  .sf-scrollbar[data-sf-scrollbar=standard]:not([data-mode]) .sf-scrollbar__viewport {
    scrollbar-color: var(--sf-outline) var(--sf-transparent);
    scrollbar-width: auto;
  }
  .sf-scrollbar[data-mode=standard]:not(.does-not-exist) .sf-scrollbar__viewport::-webkit-scrollbar {
    height: var(--sf-scroll-bg-width);
    block-size: var(--sf-scroll-bg-width);
    width: var(--sf-scroll-bg-width);
    inline-size: var(--sf-scroll-bg-width);
  }
  .sf-scrollbar[data-sf-scrollbar=standard]:not([data-mode]) .sf-scrollbar__viewport::-webkit-scrollbar {
    height: var(--sf-scroll-bg-width);
    block-size: var(--sf-scroll-bg-width);
    width: var(--sf-scroll-bg-width);
    inline-size: var(--sf-scroll-bg-width);
  }
  .sf-scrollbar[data-mode=standard]:not(.does-not-exist) .sf-scrollbar__viewport::-webkit-scrollbar-track {
    border: var(--sf-scroll-thumb-inset) solid var(--sf-transparent);
    border-radius: var(--sf-scroll-radius);
    background: var(--sf-transparent);
    background-clip: padding-box;
  }
  .sf-scrollbar[data-sf-scrollbar=standard]:not([data-mode]) .sf-scrollbar__viewport::-webkit-scrollbar-track {
    border: var(--sf-scroll-thumb-inset) solid var(--sf-transparent);
    border-radius: var(--sf-scroll-radius);
    background: var(--sf-transparent);
    background-clip: padding-box;
  }
  .sf-scrollbar[data-mode=standard]:not(.does-not-exist) .sf-scrollbar__viewport::-webkit-scrollbar-thumb {
    min-height: var(--sf-scroll-thumb-size);
    min-block-size: var(--sf-scroll-thumb-size);
    min-width: var(--sf-scroll-thumb-size);
    min-inline-size: var(--sf-scroll-thumb-size);
    border: var(--sf-scroll-thumb-inset) solid var(--sf-transparent);
    border-radius: var(--sf-scroll-radius);
    background: var(--sf-outline);
    background-clip: padding-box;
  }
  .sf-scrollbar[data-sf-scrollbar=standard]:not([data-mode]) .sf-scrollbar__viewport::-webkit-scrollbar-thumb {
    min-height: var(--sf-scroll-thumb-size);
    min-block-size: var(--sf-scroll-thumb-size);
    min-width: var(--sf-scroll-thumb-size);
    min-inline-size: var(--sf-scroll-thumb-size);
    border: var(--sf-scroll-thumb-inset) solid var(--sf-transparent);
    border-radius: var(--sf-scroll-radius);
    background: var(--sf-outline);
    background-clip: padding-box;
  }
  .sf-scrollbar[data-mode=standard]:not(.does-not-exist) .sf-scrollbar__viewport:hover::-webkit-scrollbar-thumb {
    background-color: var(--sf-on-surface-variant);
  }
  .sf-scrollbar[data-sf-scrollbar=standard]:not([data-mode]) .sf-scrollbar__viewport:hover::-webkit-scrollbar-thumb {
    background-color: var(--sf-on-surface-variant);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-scrollbar__track {
    right: 0;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .sf-scrollbar__track {
    right: 0;
    }
  }
  .sf-scrollbar__track:where(:dir(ltr)) {
    right: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-scrollbar__track {
    left: 0;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .sf-scrollbar__track {
    left: 0;
    }
  }
  .sf-scrollbar__track:where(:dir(rtl)) {
    left: 0;
  }
  .sf-scrollbar__track {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    inset-block: 0;
    inset-inline-end: 0;
    width: var(--sf-scrollbar-hit-size);
    inline-size: var(--sf-scrollbar-hit-size);
    opacity: 0;
    pointer-events: auto;
    transition: opacity var(--sf-duration-fast) var(--sf-animation);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-scrollbar__thumb {
    right: 0;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .sf-scrollbar__thumb {
    right: 0;
    }
  }
  .sf-scrollbar__thumb:where(:dir(ltr)) {
    right: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-scrollbar__thumb {
    left: 0;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .sf-scrollbar__thumb {
    left: 0;
    }
  }
  .sf-scrollbar__thumb:where(:dir(rtl)) {
    left: 0;
  }
  .sf-scrollbar__thumb {
    position: absolute;
    top: 0;
    inset-block-start: 0;
    inset-inline-end: 0;
    width: var(--sf-scrollbar-hit-size);
    inline-size: var(--sf-scrollbar-hit-size);
    min-height: var(--sf-scrollbar-min-thumb-size);
    min-block-size: var(--sf-scrollbar-min-thumb-size);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: -webkit-grab;
    cursor: grab;
    touch-action: none;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transform: translateY(var(--sf-scrollbar-thumb-offset, 0));
            transform: translateY(var(--sf-scrollbar-thumb-offset, 0));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-scrollbar__thumb::before {
    right: 0;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .sf-scrollbar__thumb::before {
    right: 0;
    }
  }
  .sf-scrollbar__thumb::before:where(:dir(ltr)) {
    right: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-scrollbar__thumb::before {
    left: 0;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .sf-scrollbar__thumb::before {
    left: 0;
    }
  }
  .sf-scrollbar__thumb::before:where(:dir(rtl)) {
    left: 0;
  }
  .sf-scrollbar__thumb::before {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-block: 0;
    inset-inline-end: 0;
    width: var(--sf-scrollbar-rest-size);
    inline-size: var(--sf-scrollbar-rest-size);
    border-radius: inherit;
    background: var(--sf-scrollbar-thumb-color);
    content: "";
    transition: inline-size var(--sf-duration-fast) var(--sf-animation);
  }
  .sf-scrollbar[data-mode=persistent]:not(.does-not-exist) .sf-scrollbar__thumb::before {
    width: var(--sf-scrollbar-active-size);
    inline-size: var(--sf-scrollbar-active-size);
  }
  .sf-scrollbar[data-sf-scrollbar=persistent]:not([data-mode]) .sf-scrollbar__thumb::before {
    width: var(--sf-scrollbar-active-size);
    inline-size: var(--sf-scrollbar-active-size);
  }
  .sf-scrollbar__track:hover .sf-scrollbar__thumb::before,
  .sf-scrollbar__thumb.focus-visible::before,
  .sf-scrollbar[data-sf-scrollbar-dragging=true] .sf-scrollbar__thumb::before {
    width: var(--sf-scrollbar-active-size);
    inline-size: var(--sf-scrollbar-active-size);
  }
  .sf-scrollbar[data-mode=persistent]:not(.does-not-exist) .sf-scrollbar__thumb::before {
    width: var(--sf-scrollbar-active-size);
    inline-size: var(--sf-scrollbar-active-size);
  }
  .sf-scrollbar[data-sf-scrollbar=persistent]:not([data-mode]) .sf-scrollbar__thumb::before {
    width: var(--sf-scrollbar-active-size);
    inline-size: var(--sf-scrollbar-active-size);
  }
  .sf-scrollbar__track:hover .sf-scrollbar__thumb::before,
  .sf-scrollbar__thumb.focus-visible::before,
  .sf-scrollbar[data-sf-scrollbar-dragging=true] .sf-scrollbar__thumb::before {
    width: var(--sf-scrollbar-active-size);
    inline-size: var(--sf-scrollbar-active-size);
  }
  .sf-scrollbar__track:hover .sf-scrollbar__thumb::before,
  .sf-scrollbar__thumb.focus-visible::before,
  .sf-scrollbar[data-sf-scrollbar-dragging=true] .sf-scrollbar__thumb::before {
    width: var(--sf-scrollbar-active-size);
    width: var(--sf-scrollbar-active-size);
    inline-size: var(--sf-scrollbar-active-size);
  }
  .sf-scrollbar__track:hover .sf-scrollbar__thumb::before,
  .sf-scrollbar__thumb:focus-visible::before,
  .sf-scrollbar[data-sf-scrollbar-dragging=true] .sf-scrollbar__thumb::before {
    width: var(--sf-scrollbar-active-size);
    inline-size: var(--sf-scrollbar-active-size);
  }
  .sf-scrollbar[data-mode=persistent]:not(.does-not-exist) .sf-scrollbar__track {
    opacity: 1;
  }
  .sf-scrollbar[data-sf-scrollbar=persistent]:not([data-mode]) .sf-scrollbar__track {
    opacity: 1;
  }
  .sf-scrollbar[data-sf-scrollbar-state=active] .sf-scrollbar__track,
  .sf-scrollbar[focus-within] .sf-scrollbar__track {
    opacity: 1;
  }
  .sf-scrollbar[data-mode=persistent]:not(.does-not-exist) .sf-scrollbar__track {
    opacity: 1;
  }
  .sf-scrollbar[data-sf-scrollbar=persistent]:not([data-mode]) .sf-scrollbar__track {
    opacity: 1;
  }
  .sf-scrollbar[data-sf-scrollbar-state=active] .sf-scrollbar__track,
  .sf-scrollbar[focus-within] .sf-scrollbar__track {
    opacity: 1;
  }
  .sf-scrollbar[data-sf-scrollbar-state=active] .sf-scrollbar__track,
  .sf-scrollbar:focus-within .sf-scrollbar__track {
    opacity: 1;
  }
  .sf-scrollbar[data-sf-scrollbar-dragging=true] .sf-scrollbar__thumb {
    cursor: -webkit-grabbing;
    cursor: grabbing;
  }
  .sf-scrollbar[data-sf-scrollbar-overflow=false] .sf-scrollbar__track {
    display: none;
  }
  .sf-scrollbar__thumb.focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: calc(-1 * var(--sf-focus--width));
  }
  .sf-scrollbar__thumb:focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: calc(-1 * var(--sf-focus--width));
  }
  .sf-scrollbar[data-axis=horizontal]:not(.does-not-exist) .sf-scrollbar__viewport {
    height: auto;
    block-size: auto;
    max-width: 100%;
    max-inline-size: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-block: auto;
    overscroll-behavior-inline: contain;
  }
  .sf-scrollbar[data-sf-scrollbar-axis=horizontal]:not([data-axis]) .sf-scrollbar__viewport {
    height: auto;
    block-size: auto;
    max-width: 100%;
    max-inline-size: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-block: auto;
    overscroll-behavior-inline: contain;
  }
  .sf-scrollbar__track--horizontal {
    top: auto;
    bottom: 0;
    inset-block: auto 0;
    left: 0;
    right: 0;
    inset-inline: 0;
    height: var(--sf-scrollbar-hit-size);
    block-size: var(--sf-scrollbar-hit-size);
    width: auto;
    inline-size: auto;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-scrollbar__thumb--horizontal {
    left: 0;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .sf-scrollbar__thumb--horizontal {
    left: 0;
    }
  }
  .sf-scrollbar__thumb--horizontal:where(:dir(ltr)) {
    left: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-scrollbar__thumb--horizontal {
    right: 0;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .sf-scrollbar__thumb--horizontal {
    right: 0;
    }
  }
  .sf-scrollbar__thumb--horizontal:where(:dir(rtl)) {
    right: 0;
  }
  .sf-scrollbar__thumb--horizontal {
    top: auto;
    bottom: 0;
    inset-block: auto 0;
    inset-inline-start: 0;
    height: var(--sf-scrollbar-hit-size);
    block-size: var(--sf-scrollbar-hit-size);
    width: auto;
    inline-size: auto;
    min-height: 0;
    min-block-size: 0;
    min-width: var(--sf-scrollbar-min-thumb-size);
    min-inline-size: var(--sf-scrollbar-min-thumb-size);
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-transform: translateX(var(--sf-scrollbar-thumb-offset, 0));
            transform: translateX(var(--sf-scrollbar-thumb-offset, 0));
  }
  .sf-scrollbar__thumb--horizontal::before {
    top: auto;
    bottom: 0;
    inset-block: auto 0;
    left: 0;
    right: 0;
    inset-inline: 0;
    height: var(--sf-scrollbar-rest-size);
    block-size: var(--sf-scrollbar-rest-size);
    width: auto;
    inline-size: auto;
    transition: block-size var(--sf-duration-fast) var(--sf-animation);
  }
  .sf-scrollbar[data-mode=persistent]:not(.does-not-exist) .sf-scrollbar__thumb--horizontal::before {
    height: var(--sf-scrollbar-active-size);
    block-size: var(--sf-scrollbar-active-size);
    width: auto;
    inline-size: auto;
  }
  .sf-scrollbar[data-sf-scrollbar=persistent]:not([data-mode]) .sf-scrollbar__thumb--horizontal::before {
    height: var(--sf-scrollbar-active-size);
    block-size: var(--sf-scrollbar-active-size);
    width: auto;
    inline-size: auto;
  }
  .sf-scrollbar__track--horizontal:hover .sf-scrollbar__thumb--horizontal::before,
  .sf-scrollbar__thumb--horizontal.focus-visible::before,
  .sf-scrollbar[data-sf-scrollbar-dragging=true] .sf-scrollbar__thumb--horizontal::before {
    height: var(--sf-scrollbar-active-size);
    block-size: var(--sf-scrollbar-active-size);
    width: auto;
    inline-size: auto;
  }
  .sf-scrollbar[data-mode=persistent]:not(.does-not-exist) .sf-scrollbar__thumb--horizontal::before {
    height: var(--sf-scrollbar-active-size);
    block-size: var(--sf-scrollbar-active-size);
    width: auto;
    inline-size: auto;
  }
  .sf-scrollbar[data-sf-scrollbar=persistent]:not([data-mode]) .sf-scrollbar__thumb--horizontal::before {
    height: var(--sf-scrollbar-active-size);
    block-size: var(--sf-scrollbar-active-size);
    width: auto;
    inline-size: auto;
  }
  .sf-scrollbar__track--horizontal:hover .sf-scrollbar__thumb--horizontal::before,
  .sf-scrollbar__thumb--horizontal.focus-visible::before,
  .sf-scrollbar[data-sf-scrollbar-dragging=true] .sf-scrollbar__thumb--horizontal::before {
    height: var(--sf-scrollbar-active-size);
    block-size: var(--sf-scrollbar-active-size);
    width: auto;
    inline-size: auto;
  }
  .sf-scrollbar__track--horizontal:hover .sf-scrollbar__thumb--horizontal::before,
  .sf-scrollbar__thumb--horizontal.focus-visible::before,
  .sf-scrollbar[data-sf-scrollbar-dragging=true] .sf-scrollbar__thumb--horizontal::before {
    height: var(--sf-scrollbar-active-size);
    height: var(--sf-scrollbar-active-size);
    block-size: var(--sf-scrollbar-active-size);
    width: auto;
    width: auto;
    inline-size: auto;
  }
  .sf-scrollbar__track--horizontal:hover .sf-scrollbar__thumb--horizontal::before,
  .sf-scrollbar__thumb--horizontal:focus-visible::before,
  .sf-scrollbar[data-sf-scrollbar-dragging=true] .sf-scrollbar__thumb--horizontal::before {
    height: var(--sf-scrollbar-active-size);
    block-size: var(--sf-scrollbar-active-size);
    width: auto;
    inline-size: auto;
  }
  .scrollbar::-webkit-scrollbar {
    width: var(--sf-a8);
    inline-size: var(--sf-a8);
  }
  .scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }
  .scrollbar::-webkit-scrollbar-thumb {
    background: var(--sf-surface-4);
  }
  .scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--sf-on-surface-variant);
  }
  @media (pointer: coarse) {
    .sf-scrollbar__track,
    .sf-scrollbar__thumb {
      width: var(--sf-a8);
      inline-size: var(--sf-a8);
      pointer-events: none;
    }
    .sf-scrollbar__thumb::before {
      width: var(--sf-a4);
      inline-size: var(--sf-a4);
    }
    .sf-scrollbar__thumb--horizontal::before {
      height: var(--sf-a4);
      block-size: var(--sf-a4);
      width: auto;
      inline-size: auto;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .sf-scrollbar__track,
    .sf-scrollbar__thumb::before {
      transition: none;
    }
  }
  @media (forced-colors: active) {
    .sf-scrollbar__track {
      display: none;
    }
    .sf-scrollbar .sf-scrollbar__viewport {
      scrollbar-color: auto;
      scrollbar-width: auto !important;
    }
    .sf-scrollbar .sf-scrollbar__viewport::-webkit-scrollbar {
      display: inline !important;
      display: initial !important;
    }
  }
}