/* 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;
    }
  }
}

/* docara-shell-source: runtime/component/highlight/css/highlight.css */
@layer sf.components {
  .theme-light,
  .theme-dark {
    --sf-highlight-text: var(--sf-on-surface);
    --sf-highlight-background: transparent;
    --sf-highlight-keyword: var(--sf-error);
    --sf-highlight-title: var(--sf-tertiary);
    --sf-highlight-attribute: var(--sf-primary);
    --sf-highlight-string: var(--sf-info);
    --sf-highlight-built-in: var(--sf-warning);
    --sf-highlight-comment: var(--sf-on-surface-variant);
    --sf-highlight-tag: var(--sf-success);
    --sf-highlight-section: var(--sf-primary);
    --sf-highlight-bullet: var(--sf-warning);
    --sf-highlight-punctuation: var(--sf-on-surface-variant);
    --sf-highlight-addition: var(--sf-on-success-container);
    --sf-highlight-addition-background: var(--sf-success-container);
    --sf-highlight-deletion: var(--sf-on-error-container);
    --sf-highlight-deletion-background: var(--sf-error-container);
    --sf-highlight-line-number: var(--sf-on-surface-variant);
    --sf-highlight-line-divider: var(--sf-outline-variant);
  }
  .theme-light pre code.hljs,
  .theme-dark pre code.hljs {
    display: block;
    overflow-x: auto;
    padding: var(--sf-space-1);
  }
  .theme-light code.hljs,
  .theme-dark code.hljs {
    padding: var(--sf-space-1\/3) var(--sf-space-1\/2);
  }
  .theme-light .hljs,
  .theme-dark .hljs {
    color: var(--sf-highlight-text);
    background: var(--sf-highlight-background);
  }
  .theme-light .hljs-doctag,
  .theme-light .hljs-keyword,
  .theme-light .hljs-meta .hljs-keyword,
  .theme-light .hljs-template-tag,
  .theme-light .hljs-template-variable,
  .theme-light .hljs-type,
  .theme-light .hljs-variable.language_,
  .theme-dark .hljs-doctag,
  .theme-dark .hljs-keyword,
  .theme-dark .hljs-meta .hljs-keyword,
  .theme-dark .hljs-template-tag,
  .theme-dark .hljs-template-variable,
  .theme-dark .hljs-type,
  .theme-dark .hljs-variable.language_ {
    color: var(--sf-highlight-keyword);
  }
  .theme-light .hljs-title,
  .theme-light .hljs-title.class_,
  .theme-light .hljs-title.class_.inherited__,
  .theme-light .hljs-title.function_,
  .theme-dark .hljs-title,
  .theme-dark .hljs-title.class_,
  .theme-dark .hljs-title.class_.inherited__,
  .theme-dark .hljs-title.function_ {
    color: var(--sf-highlight-title);
  }
  .theme-light .hljs-attr,
  .theme-light .hljs-attribute,
  .theme-light .hljs-literal,
  .theme-light .hljs-meta,
  .theme-light .hljs-number,
  .theme-light .hljs-operator,
  .theme-light .hljs-selector-attr,
  .theme-light .hljs-selector-class,
  .theme-light .hljs-selector-id,
  .theme-light .hljs-variable,
  .theme-dark .hljs-attr,
  .theme-dark .hljs-attribute,
  .theme-dark .hljs-literal,
  .theme-dark .hljs-meta,
  .theme-dark .hljs-number,
  .theme-dark .hljs-operator,
  .theme-dark .hljs-selector-attr,
  .theme-dark .hljs-selector-class,
  .theme-dark .hljs-selector-id,
  .theme-dark .hljs-variable {
    color: var(--sf-highlight-attribute);
  }
  .theme-light .hljs-meta .hljs-string,
  .theme-light .hljs-regexp,
  .theme-light .hljs-string,
  .theme-dark .hljs-meta .hljs-string,
  .theme-dark .hljs-regexp,
  .theme-dark .hljs-string {
    color: var(--sf-highlight-string);
  }
  .theme-light .hljs-built_in,
  .theme-light .hljs-symbol,
  .theme-dark .hljs-built_in,
  .theme-dark .hljs-symbol {
    color: var(--sf-highlight-built-in);
  }
  .theme-light .hljs-code,
  .theme-light .hljs-comment,
  .theme-light .hljs-formula,
  .theme-dark .hljs-code,
  .theme-dark .hljs-comment,
  .theme-dark .hljs-formula {
    color: var(--sf-highlight-comment);
  }
  .theme-light .hljs-name,
  .theme-light .hljs-quote,
  .theme-light .hljs-selector-pseudo,
  .theme-light .hljs-selector-tag,
  .theme-dark .hljs-name,
  .theme-dark .hljs-quote,
  .theme-dark .hljs-selector-pseudo,
  .theme-dark .hljs-selector-tag {
    color: var(--sf-highlight-tag);
  }
  .theme-light .hljs-subst,
  .theme-light .hljs-emphasis,
  .theme-light .hljs-strong,
  .theme-dark .hljs-subst,
  .theme-dark .hljs-emphasis,
  .theme-dark .hljs-strong {
    color: var(--sf-highlight-text);
  }
  .theme-light .hljs-section,
  .theme-dark .hljs-section {
    color: var(--sf-highlight-section);
    font-weight: var(--sf-font-weight-bold);
  }
  .theme-light .hljs-bullet,
  .theme-dark .hljs-bullet {
    color: var(--sf-highlight-bullet);
  }
  .theme-light .hljs-emphasis,
  .theme-dark .hljs-emphasis {
    font-style: italic;
  }
  .theme-light .hljs-strong,
  .theme-dark .hljs-strong {
    font-weight: var(--sf-font-weight-bold);
  }
  .theme-light .hljs-addition,
  .theme-dark .hljs-addition {
    color: var(--sf-highlight-addition);
    background-color: var(--sf-highlight-addition-background);
  }
  .theme-light .hljs-deletion,
  .theme-dark .hljs-deletion {
    color: var(--sf-highlight-deletion);
    background-color: var(--sf-highlight-deletion-background);
  }
  .theme-light .hljs-punctuation,
  .theme-dark .hljs-punctuation {
    color: var(--sf-highlight-punctuation);
  }
}
@layer sf.components {
  /* Line numbers (data-lines): one row per line, the number in a column of
     its own that copying leaves behind. The rows were spans with no display,
     so every line ran into one. */
  .sf-code-lines {
    display: block;
  }
  .sf-code-line {
    display: flex;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-code-line__number {
    padding-right: var(--sf-space-1\/2);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .sf-code-line__number {
    padding-right: var(--sf-space-1\/2);
    }
  }
  .sf-code-line__number:where(:dir(ltr)) {
    padding-right: var(--sf-space-1\/2);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-code-line__number {
    padding-left: var(--sf-space-1\/2);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .sf-code-line__number {
    padding-left: var(--sf-space-1\/2);
    }
  }
  .sf-code-line__number:where(:dir(rtl)) {
    padding-left: var(--sf-space-1\/2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-code-line__number {
    text-align: right;
  }
  @supports not (text-align: end) {
  html:not([dir="rtl"]) .sf-code-line__number {
    text-align: right;
    }
  }
  .sf-code-line__number:where(:dir(ltr)) {
    text-align: right;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-code-line__number {
    text-align: left;
  }
  @supports not (text-align: end) {
  [dir="rtl"] .sf-code-line__number {
    text-align: left;
    }
  }
  .sf-code-line__number:where(:dir(rtl)) {
    text-align: left;
  }
  .sf-code-line__number {
    flex: none;
    min-width: 3ch;
    min-inline-size: 3ch;
    min-width: 3ch;
    min-width: var(--sf-code-line--number-size, 3ch);
    min-inline-size: var(--sf-code-line--number-size, 3ch);
    -webkit-padding-end: var(--sf-space-1\/2);
            padding-inline-end: var(--sf-space-1\/2);
    color: var(--sf-on-surface-variant);
    text-align: end;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }
  .sf-code-line__content {
    flex: 1 1 auto;
    min-width: 0;
    min-inline-size: 0;
    white-space: pre;
  }
  .sf--highlight-head {
    padding: var(--sf-space-1\/3) var(--sf-space-1);
    margin-bottom: var(--sf-space-1\/2);
  }
  .sf--highlight-wrap {
    padding: 0;
    height: 100%;
  }
  .sf--highlight-wrap > .sf-scrollbar__viewport:not([class*=p-]) {
    padding: var(--sf-space-1);
  }
  .sf-highlight__head {
    padding: var(--sf-space-1\/3) var(--sf-space-1);
    margin: 0;
    border-bottom: var(--sf-px) solid var(--sf-outline-variant);
    -webkit-border-after: var(--sf-px) solid var(--sf-outline-variant);
            border-block-end: var(--sf-px) solid var(--sf-outline-variant);
  }
  .sf-highlight__wrap {
    min-width: 0;
    height: 100%;
    padding: 0;
  }
  /* Public code-surface composition used by documentation and developer tools. */
  .sf-code-surface {
    min-width: 0;
    overflow: hidden;
    margin: 0;
    background: var(--sf-surface-container);
    --sf-on-surface-variant: var(--sf-on-surface-container--variant);
    border: var(--sf-px) solid var(--sf-outline-variant);
    border-radius: var(--sf-radius--surface);
    color: var(--sf-on-surface);
  }
  .sf-code-surface > .sf-highlight__head {
    margin: 0;
    padding-top: var(--sf-space-1\/3);
    padding-bottom: var(--sf-space-1\/3);
    padding-block: var(--sf-space-1\/3);
    padding-left: var(--sf-space-1);
    padding-right: var(--sf-space-1);
    padding-inline: var(--sf-space-1);
    border-bottom: var(--sf-px) solid var(--sf-outline-variant);
    -webkit-border-after: var(--sf-px) solid var(--sf-outline-variant);
            border-block-end: var(--sf-px) solid var(--sf-outline-variant);
  }
  .sf-code-surface > .sf--highlight-head {
    margin: 0;
    padding-top: var(--sf-space-1\/3);
    padding-bottom: var(--sf-space-1\/3);
    padding-block: var(--sf-space-1\/3);
    padding-left: var(--sf-space-1);
    padding-right: var(--sf-space-1);
    padding-inline: var(--sf-space-1);
    border-bottom: var(--sf-px) solid var(--sf-outline-variant);
    -webkit-border-after: var(--sf-px) solid var(--sf-outline-variant);
            border-block-end: var(--sf-px) solid var(--sf-outline-variant);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-code-surface__scroll {
    text-align: left;
  }
  @supports not (text-align: start) {
  html:not([dir="rtl"]) .sf-code-surface__scroll {
    text-align: left;
    }
  }
  .sf-code-surface__scroll:where(:dir(ltr)) {
    text-align: left;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-code-surface__scroll {
    text-align: right;
  }
  @supports not (text-align: start) {
  [dir="rtl"] .sf-code-surface__scroll {
    text-align: right;
    }
  }
  .sf-code-surface__scroll:where(:dir(rtl)) {
    text-align: right;
  }
  .sf-code-surface__scroll {
    max-width: 100%;
    margin: 0;
    padding: var(--sf-space-1);
    overflow: auto;
    overscroll-behavior-inline: contain;
    direction: ltr;
    text-align: start;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .sf-code-surface__scroll code {
    display: block;
    min-width: -webkit-max-content;
    min-width: -moz-max-content;
    min-width: max-content;
    min-inline-size: -webkit-max-content;
    min-inline-size: -moz-max-content;
    min-inline-size: max-content;
    padding: 0;
    white-space: pre;
    background: transparent;
  }
  li .sf-highlight {
    margin-top: var(--sf-space-1);
  }
  li .source {
    margin-top: var(--sf-space-1);
  }
  .theme-dark .hljs,
  .theme-light .hljs {
    padding: 0 !important;
  }
  .source + * {
    margin-top: var(--sf-space-4);
  }
  .hljs-ln-numbers {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding-top: 0;
    padding-bottom: 0;
    text-align: center;
    color: var(--sf-highlight-line-number);
    vertical-align: top;
    /* your custom style here */
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .hljs-ln-numbers div {
    border-right: var(--sf-px) solid var(--sf-highlight-line-divider);
  }
  @supports not (border-inline-end: initial) {
  html:not([dir="rtl"]) .hljs-ln-numbers div {
    border-right: var(--sf-px) solid var(--sf-highlight-line-divider);
    }
  }
  .hljs-ln-numbers div:where(:dir(ltr)) {
    border-right: var(--sf-px) solid var(--sf-highlight-line-divider);
  }
  _:-ms-input-placeholder, [dir="rtl"] .hljs-ln-numbers div {
    border-left: var(--sf-px) solid var(--sf-highlight-line-divider);
  }
  @supports not (border-inline-end: initial) {
  [dir="rtl"] .hljs-ln-numbers div {
    border-left: var(--sf-px) solid var(--sf-highlight-line-divider);
    }
  }
  .hljs-ln-numbers div:where(:dir(rtl)) {
    border-left: var(--sf-px) solid var(--sf-highlight-line-divider);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .hljs-ln-numbers div {
    padding-right: var(--sf-a5);
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .hljs-ln-numbers div {
    padding-right: var(--sf-a5);
    }
  }
  .hljs-ln-numbers div:where(:dir(ltr)) {
    padding-right: var(--sf-a5);
  }
  _:-ms-input-placeholder, [dir="rtl"] .hljs-ln-numbers div {
    padding-left: var(--sf-a5);
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .hljs-ln-numbers div {
    padding-left: var(--sf-a5);
    }
  }
  .hljs-ln-numbers div:where(:dir(rtl)) {
    padding-left: var(--sf-a5);
  }
  .hljs-ln-numbers div {
    -webkit-border-end: var(--sf-px) solid var(--sf-highlight-line-divider);
            border-inline-end: var(--sf-px) solid var(--sf-highlight-line-divider);
    -webkit-padding-end: var(--sf-a5);
            padding-inline-end: var(--sf-a5);
  }
  /* for block of code */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .hljs-ln-code {
    padding-left: var(--sf-b0);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .hljs-ln-code {
    padding-left: var(--sf-b0);
    }
  }
  .hljs-ln-code:where(:dir(ltr)) {
    padding-left: var(--sf-b0);
  }
  _:-ms-input-placeholder, [dir="rtl"] .hljs-ln-code {
    padding-right: var(--sf-b0);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .hljs-ln-code {
    padding-right: var(--sf-b0);
    }
  }
  .hljs-ln-code:where(:dir(rtl)) {
    padding-right: var(--sf-b0);
  }
  .hljs-ln-code {
    padding-top: 0;
    -webkit-padding-start: var(--sf-b0);
            padding-inline-start: var(--sf-b0);
    padding-bottom: 0;
  }
  .hljs-ln {
    border-collapse: collapse;
  }
  .hljs-ln-n:before {
    content: attr(data-line-number);
  }
  .sf-highlight pre {
    overflow: auto;
  }
  .source pre {
    overflow: auto;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-highlight code {
    text-align: left;
  }
  @supports not (text-align: start) {
  html:not([dir="rtl"]) .sf-highlight code {
    text-align: left;
    }
  }
  .sf-highlight code:where(:dir(ltr)) {
    text-align: left;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-highlight code {
    text-align: right;
  }
  @supports not (text-align: start) {
  [dir="rtl"] .sf-highlight code {
    text-align: right;
    }
  }
  .sf-highlight code:where(:dir(rtl)) {
    text-align: right;
  }
  .sf-highlight code {
    font-size: var(--sf-text-medium--size);
    line-height: var(--sf-text-medium--line-height);
    direction: ltr;
    text-align: start;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .source code {
    text-align: left;
  }
  @supports not (text-align: start) {
  html:not([dir="rtl"]) .source code {
    text-align: left;
    }
  }
  .source code:where(:dir(ltr)) {
    text-align: left;
  }
  _:-ms-input-placeholder, [dir="rtl"] .source code {
    text-align: right;
  }
  @supports not (text-align: start) {
  [dir="rtl"] .source code {
    text-align: right;
    }
  }
  .source code:where(:dir(rtl)) {
    text-align: right;
  }
  .source code {
    font-size: var(--sf-text-medium--size);
    line-height: var(--sf-text-medium--line-height);
    direction: ltr;
    text-align: start;
  }
  @media (forced-colors: active) {
    .sf-code-surface {
      border-color: CanvasText;
    }
    .hljs-ln-numbers div {
      border-color: CanvasText;
    }
  }
}

/* docara-shell-source: runtime/component/menu/css/menu.css */
@layer sf.components {
  .sf-menu {
    list-style: none;
    margin: var(--sf-0);
    padding: var(--sf-0);
  }
  .sf-menu > .sf-menu-item {
    list-style: none;
    margin: var(--sf-0);
    padding: var(--sf-0);
  }
  .sf-menu > .sf-menu-item:not(.open) > .sf-menu {
    display: none;
  }
}
@layer sf.components {
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-menu-element {
    padding-right: var(--sf-space-1);
    padding-right: var(--sf-menu-element--padding-right, var(--sf-menu-element--padding-inline-end, var(--sf-space-1)));
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .sf-menu-element {
    padding-right: var(--sf-space-1);
    padding-right: var(--sf-menu-element--padding-right, var(--sf-menu-element--padding-inline-end, var(--sf-space-1)));
    }
  }
  .sf-menu-element:where(:dir(ltr)) {
    padding-right: var(--sf-space-1);
    padding-right: var(--sf-menu-element--padding-right, var(--sf-menu-element--padding-inline-end, var(--sf-space-1)));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-menu-element {
    padding-left: var(--sf-space-1);
    padding-left: var(--sf-menu-element--padding-right, var(--sf-menu-element--padding-inline-end, var(--sf-space-1)));
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .sf-menu-element {
    padding-left: var(--sf-space-1);
    padding-left: var(--sf-menu-element--padding-right, var(--sf-menu-element--padding-inline-end, var(--sf-space-1)));
    }
  }
  .sf-menu-element:where(:dir(rtl)) {
    padding-left: var(--sf-space-1);
    padding-left: var(--sf-menu-element--padding-right, var(--sf-menu-element--padding-inline-end, var(--sf-space-1)));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-menu-element {
    padding-left: var(--sf-space-1);
    padding-left: var(--sf-menu-element--padding-inline-start, var(--sf-space-1));
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .sf-menu-element {
    padding-left: var(--sf-space-1);
    padding-left: var(--sf-menu-element--padding-inline-start, var(--sf-space-1));
    }
  }
  .sf-menu-element:where(:dir(ltr)) {
    padding-left: var(--sf-space-1);
    padding-left: var(--sf-menu-element--padding-inline-start, var(--sf-space-1));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-menu-element {
    padding-right: var(--sf-space-1);
    padding-right: var(--sf-menu-element--padding-inline-start, var(--sf-space-1));
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .sf-menu-element {
    padding-right: var(--sf-space-1);
    padding-right: var(--sf-menu-element--padding-inline-start, var(--sf-space-1));
    }
  }
  .sf-menu-element:where(:dir(rtl)) {
    padding-right: var(--sf-space-1);
    padding-right: var(--sf-menu-element--padding-inline-start, var(--sf-space-1));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-menu-element {
    border-left-width: var(--sf-menu-element--border-width);
    border-left-width: var(--sf-menu-element--border-left-width, var(--sf-menu-element--border-width));
  }
  @supports not (border-inline-start-width: initial) {
  html:not([dir="rtl"]) .sf-menu-element {
    border-left-width: var(--sf-menu-element--border-width);
    border-left-width: var(--sf-menu-element--border-left-width, var(--sf-menu-element--border-width));
    }
  }
  .sf-menu-element:where(:dir(ltr)) {
    border-left-width: var(--sf-menu-element--border-width);
    border-left-width: var(--sf-menu-element--border-left-width, var(--sf-menu-element--border-width));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-menu-element {
    border-right-width: var(--sf-menu-element--border-width);
    border-right-width: var(--sf-menu-element--border-left-width, var(--sf-menu-element--border-width));
  }
  @supports not (border-inline-start-width: initial) {
  [dir="rtl"] .sf-menu-element {
    border-right-width: var(--sf-menu-element--border-width);
    border-right-width: var(--sf-menu-element--border-left-width, var(--sf-menu-element--border-width));
    }
  }
  .sf-menu-element:where(:dir(rtl)) {
    border-right-width: var(--sf-menu-element--border-width);
    border-right-width: var(--sf-menu-element--border-left-width, var(--sf-menu-element--border-width));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-menu-element {
    border-right-width: var(--sf-menu-element--border-width);
    border-right-width: var(--sf-menu-element--border-right-width, var(--sf-menu-element--border-width));
  }
  @supports not (border-inline-end-width: initial) {
  html:not([dir="rtl"]) .sf-menu-element {
    border-right-width: var(--sf-menu-element--border-width);
    border-right-width: var(--sf-menu-element--border-right-width, var(--sf-menu-element--border-width));
    }
  }
  .sf-menu-element:where(:dir(ltr)) {
    border-right-width: var(--sf-menu-element--border-width);
    border-right-width: var(--sf-menu-element--border-right-width, var(--sf-menu-element--border-width));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-menu-element {
    border-left-width: var(--sf-menu-element--border-width);
    border-left-width: var(--sf-menu-element--border-right-width, var(--sf-menu-element--border-width));
  }
  @supports not (border-inline-end-width: initial) {
  [dir="rtl"] .sf-menu-element {
    border-left-width: var(--sf-menu-element--border-width);
    border-left-width: var(--sf-menu-element--border-right-width, var(--sf-menu-element--border-width));
    }
  }
  .sf-menu-element:where(:dir(rtl)) {
    border-left-width: var(--sf-menu-element--border-width);
    border-left-width: var(--sf-menu-element--border-right-width, var(--sf-menu-element--border-width));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-menu-element {
    border-top-left-radius: var(--sf-menu-element--radius);
    border-top-left-radius: var(--sf-menu-element--border-top-left-radius, var(--sf-menu-element--radius));
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-menu-element {
    border-top-left-radius: var(--sf-menu-element--radius);
    border-top-left-radius: var(--sf-menu-element--border-top-left-radius, var(--sf-menu-element--radius));
    }
  }
  .sf-menu-element:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-menu-element--radius);
    border-top-left-radius: var(--sf-menu-element--border-top-left-radius, var(--sf-menu-element--radius));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-menu-element {
    border-top-right-radius: var(--sf-menu-element--radius);
    border-top-right-radius: var(--sf-menu-element--border-top-left-radius, var(--sf-menu-element--radius));
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-menu-element {
    border-top-right-radius: var(--sf-menu-element--radius);
    border-top-right-radius: var(--sf-menu-element--border-top-left-radius, var(--sf-menu-element--radius));
    }
  }
  .sf-menu-element:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-menu-element--radius);
    border-top-right-radius: var(--sf-menu-element--border-top-left-radius, var(--sf-menu-element--radius));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-menu-element {
    border-top-right-radius: var(--sf-menu-element--radius);
    border-top-right-radius: var(--sf-menu-element--border-top-right-radius, var(--sf-menu-element--radius));
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-menu-element {
    border-top-right-radius: var(--sf-menu-element--radius);
    border-top-right-radius: var(--sf-menu-element--border-top-right-radius, var(--sf-menu-element--radius));
    }
  }
  .sf-menu-element:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-menu-element--radius);
    border-top-right-radius: var(--sf-menu-element--border-top-right-radius, var(--sf-menu-element--radius));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-menu-element {
    border-top-left-radius: var(--sf-menu-element--radius);
    border-top-left-radius: var(--sf-menu-element--border-top-right-radius, var(--sf-menu-element--radius));
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-menu-element {
    border-top-left-radius: var(--sf-menu-element--radius);
    border-top-left-radius: var(--sf-menu-element--border-top-right-radius, var(--sf-menu-element--radius));
    }
  }
  .sf-menu-element:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-menu-element--radius);
    border-top-left-radius: var(--sf-menu-element--border-top-right-radius, var(--sf-menu-element--radius));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-menu-element {
    border-bottom-left-radius: var(--sf-menu-element--radius);
    border-bottom-left-radius: var(--sf-menu-element--border-bottom-left-radius, var(--sf-menu-element--radius));
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-menu-element {
    border-bottom-left-radius: var(--sf-menu-element--radius);
    border-bottom-left-radius: var(--sf-menu-element--border-bottom-left-radius, var(--sf-menu-element--radius));
    }
  }
  .sf-menu-element:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-menu-element--radius);
    border-bottom-left-radius: var(--sf-menu-element--border-bottom-left-radius, var(--sf-menu-element--radius));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-menu-element {
    border-bottom-right-radius: var(--sf-menu-element--radius);
    border-bottom-right-radius: var(--sf-menu-element--border-bottom-left-radius, var(--sf-menu-element--radius));
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-menu-element {
    border-bottom-right-radius: var(--sf-menu-element--radius);
    border-bottom-right-radius: var(--sf-menu-element--border-bottom-left-radius, var(--sf-menu-element--radius));
    }
  }
  .sf-menu-element:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-menu-element--radius);
    border-bottom-right-radius: var(--sf-menu-element--border-bottom-left-radius, var(--sf-menu-element--radius));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-menu-element {
    border-bottom-right-radius: var(--sf-menu-element--radius);
    border-bottom-right-radius: var(--sf-menu-element--border-bottom-right-radius, var(--sf-menu-element--radius));
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-menu-element {
    border-bottom-right-radius: var(--sf-menu-element--radius);
    border-bottom-right-radius: var(--sf-menu-element--border-bottom-right-radius, var(--sf-menu-element--radius));
    }
  }
  .sf-menu-element:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-menu-element--radius);
    border-bottom-right-radius: var(--sf-menu-element--border-bottom-right-radius, var(--sf-menu-element--radius));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-menu-element {
    border-bottom-left-radius: var(--sf-menu-element--radius);
    border-bottom-left-radius: var(--sf-menu-element--border-bottom-right-radius, var(--sf-menu-element--radius));
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-menu-element {
    border-bottom-left-radius: var(--sf-menu-element--radius);
    border-bottom-left-radius: var(--sf-menu-element--border-bottom-right-radius, var(--sf-menu-element--radius));
    }
  }
  .sf-menu-element:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-menu-element--radius);
    border-bottom-left-radius: var(--sf-menu-element--border-bottom-right-radius, var(--sf-menu-element--radius));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-menu-element {
    text-align: left;
  }
  @supports not (text-align: start) {
  html:not([dir="rtl"]) .sf-menu-element {
    text-align: left;
    }
  }
  .sf-menu-element:where(:dir(ltr)) {
    text-align: left;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-menu-element {
    text-align: right;
  }
  @supports not (text-align: start) {
  [dir="rtl"] .sf-menu-element {
    text-align: right;
    }
  }
  .sf-menu-element:where(:dir(rtl)) {
    text-align: right;
  }
  .sf-menu-element {
    --sf-menu-element--background-color: var(--sf-transparent);
    --sf-menu-element--border-color: var(--sf-surface-container);
    --sf-menu-element--border-width: var(--sf-px);
    --sf-menu-element--color: var(--sf-on-surface);
    --sf-menu-element--gap: var(--sf-space-1\/3);
    --sf-menu-element--radius: var(--sf-radius--ui);
    display: flex;
    box-sizing: border-box;
    align-items: center;
    gap: var(--sf-menu-element--gap);
    min-width: var(--sf-0);
    min-width: var(--sf-0);
    min-inline-size: var(--sf-0);
    width: 100%;
    width: 100%;
    inline-size: 100%;
    max-width: 100%;
    max-width: 100%;
    max-inline-size: 100%;
    margin: var(--sf-0);
    /* A row is a size 1 control: the padding gives up the border, so the
       row is 40px like a field, not 42. */
    padding-top: calc((var(--sf-ui-1--control-height) - var(--sf-text-height-1)) / 2 - var(--sf-menu-element--border-width));
    -webkit-padding-before: calc((var(--sf-ui-1--control-height) - var(--sf-text-height-1)) / 2 - var(--sf-menu-element--border-width));
            padding-block-start: calc((var(--sf-ui-1--control-height) - var(--sf-text-height-1)) / 2 - var(--sf-menu-element--border-width));
    padding-top: calc((var(--sf-ui-1--control-height) - var(--sf-text-height-1)) / 2 - var(--sf-menu-element--border-width));
    padding-top: var(--sf-menu-element--padding-top, var(--sf-menu-element--padding-block, calc((var(--sf-ui-1--control-height) - var(--sf-text-height-1)) / 2 - var(--sf-menu-element--border-width))));
    -webkit-padding-before: var(--sf-menu-element--padding-top, var(--sf-menu-element--padding-block, calc((var(--sf-ui-1--control-height) - var(--sf-text-height-1)) / 2 - var(--sf-menu-element--border-width))));
            padding-block-start: var(--sf-menu-element--padding-top, var(--sf-menu-element--padding-block, calc((var(--sf-ui-1--control-height) - var(--sf-text-height-1)) / 2 - var(--sf-menu-element--border-width))));
    padding-bottom: calc((var(--sf-ui-1--control-height) - var(--sf-text-height-1)) / 2 - var(--sf-menu-element--border-width));
    -webkit-padding-after: calc((var(--sf-ui-1--control-height) - var(--sf-text-height-1)) / 2 - var(--sf-menu-element--border-width));
            padding-block-end: calc((var(--sf-ui-1--control-height) - var(--sf-text-height-1)) / 2 - var(--sf-menu-element--border-width));
    padding-bottom: calc((var(--sf-ui-1--control-height) - var(--sf-text-height-1)) / 2 - var(--sf-menu-element--border-width));
    padding-bottom: var(--sf-menu-element--padding-bottom, var(--sf-menu-element--padding-block, calc((var(--sf-ui-1--control-height) - var(--sf-text-height-1)) / 2 - var(--sf-menu-element--border-width))));
    -webkit-padding-after: var(--sf-menu-element--padding-bottom, var(--sf-menu-element--padding-block, calc((var(--sf-ui-1--control-height) - var(--sf-text-height-1)) / 2 - var(--sf-menu-element--border-width))));
            padding-block-end: var(--sf-menu-element--padding-bottom, var(--sf-menu-element--padding-block, calc((var(--sf-ui-1--control-height) - var(--sf-text-height-1)) / 2 - var(--sf-menu-element--border-width))));
    -webkit-padding-end: var(--sf-space-1);
            padding-inline-end: var(--sf-space-1);
    -webkit-padding-end: var(--sf-menu-element--padding-right, var(--sf-menu-element--padding-inline-end, var(--sf-space-1)));
            padding-inline-end: var(--sf-menu-element--padding-right, var(--sf-menu-element--padding-inline-end, var(--sf-space-1)));
    -webkit-padding-start: var(--sf-space-1);
            padding-inline-start: var(--sf-space-1);
    -webkit-padding-start: var(--sf-menu-element--padding-inline-start, var(--sf-space-1));
            padding-inline-start: var(--sf-menu-element--padding-inline-start, var(--sf-space-1));
    border-color: var(--sf-menu-element--border-color);
    border-style: solid;
    border-style: var(--sf-menu-element--border-style, solid);
    border-top-width: var(--sf-menu-element--border-width);
    border-block-start-width: var(--sf-menu-element--border-width);
    border-top-width: var(--sf-menu-element--border-width);
    border-top-width: var(--sf-menu-element--border-top-width, var(--sf-menu-element--border-width));
    border-block-start-width: var(--sf-menu-element--border-top-width, var(--sf-menu-element--border-width));
    border-bottom-width: var(--sf-menu-element--border-width);
    border-block-end-width: var(--sf-menu-element--border-width);
    border-bottom-width: var(--sf-menu-element--border-width);
    border-bottom-width: var(--sf-menu-element--border-bottom-width, var(--sf-menu-element--border-width));
    border-block-end-width: var(--sf-menu-element--border-bottom-width, var(--sf-menu-element--border-width));
    border-inline-start-width: var(--sf-menu-element--border-width);
    border-inline-start-width: var(--sf-menu-element--border-left-width, var(--sf-menu-element--border-width));
    border-inline-end-width: var(--sf-menu-element--border-width);
    border-inline-end-width: var(--sf-menu-element--border-right-width, var(--sf-menu-element--border-width));
    border-start-start-radius: var(--sf-menu-element--radius);
    border-start-start-radius: var(--sf-menu-element--border-top-left-radius, var(--sf-menu-element--radius));
    border-start-end-radius: var(--sf-menu-element--radius);
    border-start-end-radius: var(--sf-menu-element--border-top-right-radius, var(--sf-menu-element--radius));
    border-end-start-radius: var(--sf-menu-element--radius);
    border-end-start-radius: var(--sf-menu-element--border-bottom-left-radius, var(--sf-menu-element--radius));
    border-end-end-radius: var(--sf-menu-element--radius);
    border-end-end-radius: var(--sf-menu-element--border-bottom-right-radius, var(--sf-menu-element--radius));
    color: var(--sf-menu-element--color);
    background-color: var(--sf-menu-element--background-color);
    font-family: var(--sf-text--family);
    font-family: var(--sf-menu-element--font-family, var(--sf-text--family));
    font-size: var(--sf-text-size-1);
    font-size: var(--sf-menu-element--font-size, var(--sf-text-size-1));
    font-weight: var(--sf-font-weight-regular);
    font-weight: var(--sf-menu-element--font-weight, var(--sf-font-weight-regular));
    line-height: var(--sf-text-height-1);
    line-height: var(--sf-menu-element--line-height, var(--sf-text-height-1));
    text-align: start;
    text-decoration: none;
  }
  button.sf-menu-element,
  a.sf-menu-element,
  .sf-menu-element[role=button] {
    cursor: pointer;
  }
  button.sf-menu-element {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
  }
  .sf-menu-element .sf-menu-element-wrap {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: var(--sf-space-1\/3);
    gap: var(--sf-menu-element-wrap--gap, var(--sf-space-1\/3));
    min-width: var(--sf-0);
    min-width: var(--sf-0);
    min-inline-size: var(--sf-0);
    color: inherit;
    font: inherit;
  }
  .sf-menu-element-text {
    min-width: var(--sf-0);
    min-width: var(--sf-0);
    min-inline-size: var(--sf-0);
    word-wrap: anywhere;
  }
  .sf-menu-element-icon,
  .sf-menu-element > .sf-icon-button {
    flex: none;
  }
  .sf-menu-element.disabled,
  .sf-menu-element:disabled,
  .sf-menu-element[aria-disabled=true] {
    --sf-menu-element--background-color: var(--sf-disable);
    --sf-menu-element--border-color: var(--sf-outline-disable);
    --sf-menu-element--color: var(--sf-on-disable);
    cursor: default;
  }
  .sf-menu-element.disabled .sf-icon,
  .sf-menu-element:disabled .sf-icon,
  .sf-menu-element[aria-disabled=true] .sf-icon {
    --sf-icon--color: currentColor;
  }
  .sf-menu-element:not(:disabled):not(.disabled):not([aria-disabled=true]):hover {
    --sf-menu-element--background-color: var(--sf-surface-container-hover);
    --sf-menu-element--border-color: var(--sf-surface-container-hover);
  }
  .sf-menu-element.open,
  .sf-menu-element[aria-expanded=true] {
    --sf-menu-element--background-color: var(--sf-surface-container-active);
    --sf-menu-element--border-color: var(--sf-surface-container-active);
  }
  .sf-menu-element[aria-expanded=false]:dir(rtl) > .sf-icon-button .sf-icon {
    -webkit-transform: scaleX(-1);
            transform: scaleX(-1);
  }
  .sf-menu-element:focus {
    outline: none;
  }
  .sf-menu-element:not(:disabled):not(.disabled):not([aria-disabled=true]).focus-visible,
  .sf-menu-element > .sf-icon-button:not(:disabled).focus-visible {
    position: relative;
    z-index: 1;
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  .sf-menu-element:not(:disabled):not(.disabled):not([aria-disabled=true]):focus-visible,
  .sf-menu-element > .sf-icon-button:not(:disabled):focus-visible {
    position: relative;
    z-index: 1;
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  .sf-menu-element--level-1 {
    --sf-menu-element--padding-inline-start: var(--sf-space-1);
  }
  .sf-menu-element--level-2 {
    --sf-menu-element--padding-inline-start: var(--sf-space-3);
  }
  .sf-menu-element--level-3 {
    --sf-menu-element--padding-inline-start: var(--sf-space-4);
  }
  .sf-menu-element--level-4 {
    --sf-menu-element--padding-inline-start: var(--sf-space-5);
  }
  @media (forced-colors: active) {
    .sf-menu-element:not(:disabled):not(.disabled):not([aria-disabled=true]).focus-visible,
    .sf-menu-element > .sf-icon-button:not(:disabled).focus-visible {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: calc(var(--sf-focus-outline-width) * -1);
      box-shadow: none;
    }
    .sf-menu-element:not(:disabled):not(.disabled):not([aria-disabled=true]):focus-visible,
    .sf-menu-element > .sf-icon-button:not(:disabled):focus-visible {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: calc(var(--sf-focus-outline-width) * -1);
      box-shadow: none;
    }
  }
}
@layer sf.components {
  /* utility-hint: display/flex (.flex) flex-direction/column (.flex-col) flex-wrap/nowrap (.flex-nowrap) gap/var(--sf-space-1\/3) justify-content/flex-start (.justify-start) align-items/flex-start (.items-start) */
  .sf-menu {
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    align-items: stretch;
    min-width: var(--sf-0);
    min-width: var(--sf-0);
    min-inline-size: var(--sf-0);
    max-width: 100%;
    max-width: 100%;
    max-inline-size: 100%;
    background-color: transparent;
    background-color: var(--sf-menu--background-color, transparent);
    gap: var(--sf-space-1\/3);
    gap: var(--sf-menu--gap, var(--sf-space-1\/3));
  }
  /* utility-hint: display/flex (.flex) flex-direction/column (.flex-col) flex-wrap/nowrap (.flex-nowrap) gap/var(--sf-menu-item--gap) justify-content/flex-start (.justify-start) align-items/flex-start (.items-start) */
  .sf-menu .sf-menu-item {
    --sf-menu-item--background-color: transparent;
    --sf-menu-item--gap: var(--sf-space-1\/3);
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    align-items: stretch;
    min-width: var(--sf-0);
    min-width: var(--sf-0);
    min-inline-size: var(--sf-0);
    max-width: 100%;
    max-width: 100%;
    max-inline-size: 100%;
    background-color: var(--sf-menu-item--background-color);
    gap: var(--sf-menu-item--gap);
  }
  /* The root level becomes a row; every submenu keeps the ordinary vertical menu model. */
  .sf-menu.sf-menu--horizontal {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
  }
  .sf-menu.sf-menu--horizontal > .sf-menu-item {
    position: relative;
    flex: 0 0 auto;
    max-width: none;
    max-inline-size: none;
  }
  .sf-menu.sf-menu--horizontal > .sf-menu-item > .sf-menu-element {
    width: auto;
    inline-size: auto;
    max-width: none;
    max-inline-size: none;
  }
  .sf-menu.sf-menu--horizontal .sf-menu .sf-menu-item {
    position: relative;
  }
  .sf-menu.sf-menu--horizontal > .sf-menu-item > .sf-menu,
  .sf-menu.sf-menu--horizontal .sf-menu .sf-menu-item > .sf-menu {
    position: absolute;
    z-index: 3;
    z-index: var(--sf-menu-horizontal-submenu--z-index, 3);
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    inline-size: -webkit-max-content;
    inline-size: -moz-max-content;
    inline-size: max-content;
    min-width: 100%;
    min-inline-size: 100%;
    max-width: calc(100vw - var(--sf-space-2));
    max-inline-size: calc(100vw - var(--sf-space-2));
    padding: var(--sf-space-1\/3);
    padding: var(--sf-menu-horizontal-submenu--padding, var(--sf-space-1\/3));
    border: var(--sf-px) solid var(--sf-outline-variant);
    border: var(--sf-px) solid var(--sf-menu-horizontal-submenu--border-color, var(--sf-outline-variant));
    border-radius: var(--sf-radius--ui);
    border-radius: var(--sf-menu-horizontal-submenu--radius, var(--sf-radius--ui));
    background: var(--sf-elevation-2--surface);
    background: var(--sf-menu-horizontal-submenu--background-color, var(--sf-elevation-2--surface));
    --sf-on-surface-variant: var(--sf-on-elevation-2--variant);
    box-shadow: var(--sf-elevation-2--shadow);
    box-shadow: var(--sf-menu-horizontal-submenu--box-shadow, var(--sf-elevation-2--shadow));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-menu.sf-menu--horizontal > .sf-menu-item > .sf-menu {
    left: 0;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .sf-menu.sf-menu--horizontal > .sf-menu-item > .sf-menu {
    left: 0;
    }
  }
  .sf-menu.sf-menu--horizontal > .sf-menu-item > .sf-menu:where(:dir(ltr)) {
    left: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-menu.sf-menu--horizontal > .sf-menu-item > .sf-menu {
    right: 0;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .sf-menu.sf-menu--horizontal > .sf-menu-item > .sf-menu {
    right: 0;
    }
  }
  .sf-menu.sf-menu--horizontal > .sf-menu-item > .sf-menu:where(:dir(rtl)) {
    right: 0;
  }
  .sf-menu.sf-menu--horizontal > .sf-menu-item > .sf-menu {
    top: 100%;
    inset-block-start: 100%;
    inset-inline-start: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-menu.sf-menu--horizontal .sf-menu .sf-menu-item > .sf-menu {
    left: 100%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) .sf-menu.sf-menu--horizontal .sf-menu .sf-menu-item > .sf-menu {
    left: 100%;
    }
  }
  .sf-menu.sf-menu--horizontal .sf-menu .sf-menu-item > .sf-menu:where(:dir(ltr)) {
    left: 100%;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-menu.sf-menu--horizontal .sf-menu .sf-menu-item > .sf-menu {
    right: 100%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] .sf-menu.sf-menu--horizontal .sf-menu .sf-menu-item > .sf-menu {
    right: 100%;
    }
  }
  .sf-menu.sf-menu--horizontal .sf-menu .sf-menu-item > .sf-menu:where(:dir(rtl)) {
    right: 100%;
  }
  .sf-menu.sf-menu--horizontal .sf-menu .sf-menu-item > .sf-menu {
    top: 0;
    inset-block-start: 0;
    inset-inline-start: 100%;
  }
  .sf-menu.sf-menu--horizontal .sf-menu .sf-menu-element {
    width: 100%;
    inline-size: 100%;
    max-width: 100%;
    max-inline-size: 100%;
    --sf-menu-element--padding-inline-start: var(--sf-space-1);
  }
  /* Documentation navigation is a public presentation preset for nested menus. */
  .sf-menu.sf-menu--documentation-tree,
  .sf-menu.sf-menu--documentation-tree .sf-menu {
    --sf-menu--gap: var(--sf-space-1\/4);
    list-style: none;
    margin: var(--sf-0);
    padding: var(--sf-0);
  }
  .sf-menu.sf-menu--documentation-tree .sf-menu-element {
    --sf-menu-element--border-width: var(--sf-0);
    --sf-menu-element--padding-top: var(--sf-0);
    --sf-menu-element--padding-bottom: var(--sf-0);
    --sf-menu-element--padding-right: var(--sf-0);
    min-width: var(--sf-0);
  }
  .sf-menu.sf-menu--documentation-tree .sf-menu-element-wrap {
    min-width: var(--sf-0);
    padding-top: var(--sf-space-1\/3);
    padding-bottom: var(--sf-space-1\/3);
    padding-block: var(--sf-space-1\/3);
    padding-left: var(--sf-space-1);
    padding-right: var(--sf-space-1);
    padding-inline: var(--sf-space-1);
    word-wrap: anywhere;
  }
  .sf-menu.sf-menu--documentation-tree .sf-menu-element--level-1 {
    --sf-menu-element--padding-inline-start: var(--sf-0);
  }
  .sf-menu.sf-menu--documentation-tree .sf-menu-element--level-2 {
    --sf-menu-element--padding-inline-start: var(--sf-space-1);
  }
  .sf-menu.sf-menu--documentation-tree .sf-menu-element--level-3 {
    --sf-menu-element--padding-inline-start: var(--sf-space-2);
  }
  .sf-menu.sf-menu--documentation-tree .sf-menu-element--level-4 {
    --sf-menu-element--padding-inline-start: var(--sf-space-3);
  }
  .sf-menu.sf-menu--documentation-tree [aria-current=page] {
    background: var(--sf-surface-container-active);
    color: var(--sf-on-surface);
    font-weight: var(--sf-font-weight-medium);
  }
  .sf-menu.sf-menu--documentation-tree .sf-menu-element-wrap.focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  .sf-menu.sf-menu--documentation-tree .sf-menu-element-wrap:focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
}