/* docara-shell-source: runtime/component/clipboard/css/clipboard.css */
@layer sf.components {
  .sf-clipboard {
    cursor: pointer;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-clipboard--overlay,html:not([dir="rtl"])
  .btn-clipboard.sf-clipboard-surface:not(.sf-clipboard--inline) {
    right: var(--sf-space-1\/4);
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) .sf-clipboard--overlay,html:not([dir="rtl"])
  .btn-clipboard.sf-clipboard-surface:not(.sf-clipboard--inline) {
    right: var(--sf-space-1\/4);
    }
  }
  .sf-clipboard--overlay:where(:dir(ltr)),
  .btn-clipboard.sf-clipboard-surface:not(.sf-clipboard--inline):where(:dir(ltr)) {
    right: var(--sf-space-1\/4);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-clipboard--overlay,[dir="rtl"]
  .btn-clipboard.sf-clipboard-surface:not(.sf-clipboard--inline) {
    left: var(--sf-space-1\/4);
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] .sf-clipboard--overlay,[dir="rtl"]
  .btn-clipboard.sf-clipboard-surface:not(.sf-clipboard--inline) {
    left: var(--sf-space-1\/4);
    }
  }
  .sf-clipboard--overlay:where(:dir(rtl)),
  .btn-clipboard.sf-clipboard-surface:not(.sf-clipboard--inline):where(:dir(rtl)) {
    left: var(--sf-space-1\/4);
  }
  .sf-clipboard--overlay,
  .btn-clipboard.sf-clipboard-surface:not(.sf-clipboard--inline) {
    top: var(--sf-space-1\/4);
    inset-block-start: var(--sf-space-1\/4);
    inset-inline-end: var(--sf-space-1\/4);
    position: absolute;
    z-index: var(--sf-z-index-2);
  }
  .sf-clipboard-surface:not(.sf-button):not(.sf-icon-button) {
    align-items: center;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background-color: var(--sf-surface-container);
    border: 0;
    border-radius: var(--sf-radius--ui);
    color: var(--sf-on-surface);
    display: inline-flex;
    justify-content: center;
    min-height: var(--sf-ui-1--control-height);
    min-block-size: var(--sf-ui-1--control-height);
    min-width: var(--sf-ui-1--control-height);
    min-inline-size: var(--sf-ui-1--control-height);
    padding: var(--sf-ui-1--space-y);
    transition: background-color var(--sf-duration-fast) var(--sf-animation);
  }
  .sf-clipboard-surface:hover {
    background-color: var(--sf-surface-container-hover);
  }
  .sf-clipboard-surface:not(.sf-button):not(.sf-icon-button).focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  .sf-clipboard-surface:not(.sf-button):not(.sf-icon-button):focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  .sf-clipboard[aria-disabled=true] {
    cursor: wait;
    opacity: var(--sf-opacity-60);
  }
  .sf-clipboard-1:not(.sf-button):not(.sf-icon-button) {
    min-height: var(--sf-ui-1\/3--control-height);
    min-block-size: var(--sf-ui-1\/3--control-height);
    min-width: var(--sf-ui-1\/3--control-height);
    min-inline-size: var(--sf-ui-1\/3--control-height);
  }
  .sf-clipboard-2:not(.sf-button):not(.sf-icon-button) {
    min-height: var(--sf-ui-1--control-height);
    min-block-size: var(--sf-ui-1--control-height);
    min-width: var(--sf-ui-1--control-height);
    min-inline-size: var(--sf-ui-1--control-height);
  }
  .sf-clipboard-3:not(.sf-button):not(.sf-icon-button) {
    min-height: var(--sf-ui-2--control-height);
    min-block-size: var(--sf-ui-2--control-height);
    min-width: var(--sf-ui-2--control-height);
    min-inline-size: var(--sf-ui-2--control-height);
  }
  .sf-clipboard-status {
    color: var(--sf-on-surface-variant);
    display: block;
    font-size: var(--sf-text-small--size);
    line-height: var(--sf-text-small--height);
    margin-top: var(--sf-space-1\/2);
    -webkit-margin-before: var(--sf-space-1\/2);
            margin-block-start: var(--sf-space-1\/2);
    min-height: var(--sf-text-small--height);
    min-block-size: var(--sf-text-small--height);
  }
  .sf-clipboard-status:empty {
    margin-top: 0;
    -webkit-margin-before: 0;
            margin-block-start: 0;
    min-height: 0;
    min-block-size: 0;
  }
  .sf-clipboard-fallback {
    height: var(--sf-a1);
    block-size: var(--sf-a1);
    width: var(--sf-a1);
    inline-size: var(--sf-a1);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
  }
  @media (prefers-reduced-motion: reduce) {
    .sf-clipboard-surface:not(.sf-button):not(.sf-icon-button) {
      transition: none;
    }
  }
  @media (forced-colors: active) {
    .sf-clipboard {
      border: var(--sf-focus-outline-width) solid ButtonText;
      forced-color-adjust: none;
    }
    .sf-clipboard-surface:not(.sf-button):not(.sf-icon-button).focus-visible {
      outline-color: Highlight;
    }
    .sf-clipboard-surface:not(.sf-button):not(.sf-icon-button):focus-visible {
      outline-color: Highlight;
    }
  }
}

/* docara-shell-source: runtime/component/doc/css/doc.css */
@layer sf.components {
  code,
  .sf-doc-code,
  .t-source {
    font-family: var(--sf-mono);
  }
  .sf-doc-lead,
  .t-lead {
    color: var(--sf-on-surface-variant);
    font-size: var(--sf-text-large--size);
    line-height: var(--sf-text-large--height);
  }
  * + .sf-doc-example {
    margin-top: var(--sf-text--space-bottom);
    -webkit-margin-before: var(--sf-text--space-bottom);
            margin-block-start: var(--sf-text--space-bottom);
  }
  * + .example {
    margin-top: var(--sf-text--space-bottom);
    -webkit-margin-before: var(--sf-text--space-bottom);
            margin-block-start: var(--sf-text--space-bottom);
  }
  .sf-doc-pair {
    min-width: 0;
    min-inline-size: 0;
    max-width: 100%;
    max-inline-size: 100%;
  }
  .sf-doc-example,
  .example {
    min-width: 0;
    min-inline-size: 0;
    margin: 0;
    padding: var(--sf-space-3);
    word-wrap: anywhere;
    background-color: var(--sf-surface-container);
    border: var(--sf-px) solid var(--sf-outline-variant);
    border-radius: var(--sf-radius--surface);
    color: var(--sf-on-surface);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example + .sf-doc-source {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example + .sf-doc-source {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example + .sf-doc-source:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example + .sf-doc-source {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-doc-example + .sf-doc-source {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example + .sf-doc-source:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example + .sf-doc-source {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example + .sf-doc-source {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example + .sf-doc-source:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example + .sf-doc-source {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-doc-example + .sf-doc-source {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example + .sf-doc-source:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  .sf-doc-example + .sf-doc-source {
    border-start-end-radius: var(--sf-radius-square);
    border-start-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example + .source {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example + .source {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example + .source:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example + .source {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-doc-example + .source {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example + .source:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example + .source {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example + .source {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example + .source:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example + .source {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-doc-example + .source {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example + .source:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  .sf-doc-example + .source {
    border-start-end-radius: var(--sf-radius-square);
    border-start-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground + .sf-doc-source {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-playground + .sf-doc-source {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground + .sf-doc-source:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground + .sf-doc-source {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-playground + .sf-doc-source {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground + .sf-doc-source:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground + .sf-doc-source {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-playground + .sf-doc-source {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground + .sf-doc-source:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground + .sf-doc-source {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-playground + .sf-doc-source {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground + .sf-doc-source:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  .sf-playground + .sf-doc-source {
    border-start-end-radius: var(--sf-radius-square);
    border-start-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground + .source {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .sf-playground + .source {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground + .source:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground + .source {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .sf-playground + .source {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground + .source:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground + .source {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .sf-playground + .source {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground + .source:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground + .source {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .sf-playground + .source {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground + .source:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  .sf-playground + .source {
    border-start-end-radius: var(--sf-radius-square);
    border-start-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example + .sf-doc-source {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .example + .sf-doc-source {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .example + .sf-doc-source:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example + .sf-doc-source {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .example + .sf-doc-source {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .example + .sf-doc-source:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example + .sf-doc-source {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .example + .sf-doc-source {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .example + .sf-doc-source:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example + .sf-doc-source {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .example + .sf-doc-source {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .example + .sf-doc-source:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  .example + .sf-doc-source {
    border-start-end-radius: var(--sf-radius-square);
    border-start-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example + .source {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  html:not([dir="rtl"]) .example + .source {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .example + .source:where(:dir(ltr)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example + .source {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-end-radius: initial) {
  [dir="rtl"] .example + .source {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .example + .source:where(:dir(rtl)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example + .source {
    border-top-left-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  html:not([dir="rtl"]) .example + .source {
    border-top-left-radius: var(--sf-radius-square);
    }
  }
  .example + .source:where(:dir(ltr)) {
    border-top-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example + .source {
    border-top-right-radius: var(--sf-radius-square);
  }
  @supports not (border-start-start-radius: initial) {
  [dir="rtl"] .example + .source {
    border-top-right-radius: var(--sf-radius-square);
    }
  }
  .example + .source:where(:dir(rtl)) {
    border-top-right-radius: var(--sf-radius-square);
  }
  .example + .source {
    border-start-end-radius: var(--sf-radius-square);
    border-start-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example:has(+ .sf-doc-source) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example:has(+ .sf-doc-source) {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example:has(+ .sf-doc-source):where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example:has(+ .sf-doc-source) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-doc-example:has(+ .sf-doc-source) {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example:has(+ .sf-doc-source):where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example:has(+ .sf-doc-source) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example:has(+ .sf-doc-source) {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example:has(+ .sf-doc-source):where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example:has(+ .sf-doc-source) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-doc-example:has(+ .sf-doc-source) {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example:has(+ .sf-doc-source):where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  .sf-doc-example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  .sf-doc-example:has(+ .sf-doc-source) {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example:has(+ .source) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example:has(+ .source) {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example:has(+ .source):where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example:has(+ .source) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-doc-example:has(+ .source) {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example:has(+ .source):where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example:has(+ .source) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example:has(+ .source) {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example:has(+ .source):where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example:has(+ .source) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-doc-example:has(+ .source) {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example:has(+ .source):where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-doc-example[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  .sf-doc-example[\:has\(\%2B\%20.source\)] {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  .sf-doc-example:has(+ .source) {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground:has(+ .sf-doc-source) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-playground:has(+ .sf-doc-source) {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground:has(+ .sf-doc-source):where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground:has(+ .sf-doc-source) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-playground:has(+ .sf-doc-source) {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground:has(+ .sf-doc-source):where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground:has(+ .sf-doc-source) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-playground:has(+ .sf-doc-source) {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground:has(+ .sf-doc-source):where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground:has(+ .sf-doc-source) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-playground:has(+ .sf-doc-source) {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground:has(+ .sf-doc-source):where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  .sf-playground[\:has\(\%2B\%20.sf-doc-source\)] {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  .sf-playground:has(+ .sf-doc-source) {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  .sf-playground[\:has\(\%2B\%20.source\)] {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground:has(+ .source) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-playground:has(+ .source) {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground:has(+ .source):where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground:has(+ .source) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-playground:has(+ .source) {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground:has(+ .source):where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground:has(+ .source) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-playground:has(+ .source) {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground:has(+ .source):where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground:has(+ .source) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-playground:has(+ .source) {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground:has(+ .source):where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .sf-playground[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .sf-playground[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  .sf-playground[\:has\(\%2B\%20.source\)] {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  .sf-playground:has(+ .source) {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example:has(+ .sf-doc-source) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .example:has(+ .sf-doc-source) {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example:has(+ .sf-doc-source):where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example:has(+ .sf-doc-source) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .example:has(+ .sf-doc-source) {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example:has(+ .sf-doc-source):where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example:has(+ .sf-doc-source) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .example:has(+ .sf-doc-source) {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example:has(+ .sf-doc-source):where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example:has(+ .sf-doc-source) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .example:has(+ .sf-doc-source) {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example:has(+ .sf-doc-source):where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.sf-doc-source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  .example[\:has\(\%2B\%20.sf-doc-source\)] {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  .example:has(+ .sf-doc-source) {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  .example[\:has\(\%2B\%20.source\)] {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example:has(+ .source) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .example:has(+ .source) {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example:has(+ .source):where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example:has(+ .source) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .example:has(+ .source) {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example:has(+ .source):where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example:has(+ .source) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .example:has(+ .source) {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example:has(+ .source):where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example:has(+ .source) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .example:has(+ .source) {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example:has(+ .source):where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  html:not([dir="rtl"]) .example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-end-radius: initial) {
  [dir="rtl"] .example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  html:not([dir="rtl"]) .example[\:has\(\%2B\%20.source\)] {
    border-bottom-left-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.source\)]:where(:dir(ltr)) {
    border-bottom-left-radius: var(--sf-radius-square);
  }
  _:-ms-input-placeholder, [dir="rtl"] .example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  @supports not (border-end-start-radius: initial) {
  [dir="rtl"] .example[\:has\(\%2B\%20.source\)] {
    border-bottom-right-radius: var(--sf-radius-square);
    }
  }
  .example[\:has\(\%2B\%20.source\)]:where(:dir(rtl)) {
    border-bottom-right-radius: var(--sf-radius-square);
  }
  .example[\:has\(\%2B\%20.source\)] {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  .example:has(+ .source) {
    border-end-end-radius: var(--sf-radius-square);
    border-end-start-radius: var(--sf-radius-square);
  }
  .sf-doc-source,
  .source {
    min-width: 0;
    min-inline-size: 0;
    max-width: 100%;
    max-inline-size: 100%;
    margin-bottom: var(--sf-text--space-bottom);
    -webkit-margin-after: var(--sf-text--space-bottom);
            margin-block-end: var(--sf-text--space-bottom);
    overflow: auto;
    background-color: var(--sf-surface-inverse);
    border-radius: var(--sf-radius--surface);
    color: var(--sf-on-surface-inverse);
    -moz-tab-size: 2;
      -o-tab-size: 2;
         tab-size: 2;
  }
  .sf-doc-source code {
    color: inherit;
  }
  .source code {
    color: inherit;
  }
  .sf-doc-stripes,
  .bg-stripes {
    --sf-doc-pattern-color: var(--sf-surface-1);
    background-image: repeating-linear-gradient(-45deg, var(--sf-doc-pattern-color) 0,var(--sf-doc-pattern-color) 25%, var(--sf-transparent) 25%, var(--sf-transparent) 50%);
    background-image: repeating-linear-gradient(-45deg, var(--sf-doc-pattern-color) 0 25%, var(--sf-transparent) 25% 50%);
    background-size: var(--sf-space-2) var(--sf-space-2);
  }
  .bg-stripes-white {
    --sf-doc-pattern-color: var(--sf-surface-0);
  }
  .bg-stripes-blue {
    --sf-doc-pattern-color: var(--sf-info-container);
  }
  .sf-doc-checkerboard,
  .bg-checkered {
    background-color: var(--sf-surface-0);
    background-image: conic-gradient(var(--sf-surface-1) 25%, var(--sf-transparent) 0,var(--sf-transparent) 50%, var(--sf-surface-1) 0,var(--sf-surface-1) 75%, var(--sf-transparent) 0);
    background-image: conic-gradient(var(--sf-surface-1) 25%, var(--sf-transparent) 0 50%, var(--sf-surface-1) 0 75%, var(--sf-transparent) 0);
    background-size: var(--sf-space-2) var(--sf-space-2);
  }
  .hljs-emphasis {
    font-style: italic;
  }
  .hljs-strong {
    font-weight: bold;
  }
  @media (forced-colors: active) {
    .sf-doc-example,
    .example,
    .sf-doc-source,
    .source {
      border-color: CanvasText;
    }
    .sf-doc-stripes,
    .bg-stripes,
    .sf-doc-checkerboard,
    .bg-checkered {
      background: Canvas;
      border: var(--sf-px) solid CanvasText;
    }
  }
}

/* docara-shell-source: runtime/component/kbd/css/kbd.css */
@layer sf.components {
  :where(kbd:not(.sf-kbd--group), .sf-kbd:not(.sf-kbd--group)) {
    --sf-kbd--min-block-size: var(--sf-text-height-1\/3);
    --sf-kbd--min-inline-size: var(--sf-text-height-1\/3);
    --sf-kbd--padding-block: var(--sf-space-1\/4);
    --sf-kbd--padding-inline: var(--sf-space-1\/2);
    --sf-kbd--color: var(--sf-on-surface);
    --sf-kbd--background: var(--sf-surface-container);
    --sf-kbd--border-color: var(--sf-outline-variant);
    --sf-kbd--border-width: var(--sf-px);
    --sf-kbd--radius: var(--sf-radius--ui);
    --sf-kbd--font-family: var(--sf-mono);
    --sf-kbd--font-size: var(--sf-text-size-1\/3);
    --sf-kbd--font-weight: var(--sf-font-weight-medium);
    --sf-kbd--line-height: var(--sf-text-height-1\/3);
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    min-height: var(--sf-kbd--min-block-size);
    min-block-size: var(--sf-kbd--min-block-size);
    min-width: var(--sf-kbd--min-inline-size);
    min-inline-size: var(--sf-kbd--min-inline-size);
    padding-top: var(--sf-kbd--padding-block);
    padding-bottom: var(--sf-kbd--padding-block);
    padding-block: var(--sf-kbd--padding-block);
    padding-left: var(--sf-kbd--padding-inline);
    padding-right: var(--sf-kbd--padding-inline);
    padding-inline: var(--sf-kbd--padding-inline);
    color: var(--sf-kbd--color);
    background: var(--sf-kbd--background);
    border: var(--sf-kbd--border-width) solid var(--sf-kbd--border-color);
    border-radius: var(--sf-kbd--radius);
    font-family: var(--sf-kbd--font-family);
    font-size: var(--sf-kbd--font-size);
    font-weight: var(--sf-kbd--font-weight);
    line-height: var(--sf-kbd--line-height);
    unicode-bidi: -webkit-isolate;
    unicode-bidi: -moz-isolate;
    unicode-bidi: isolate;
    vertical-align: baseline;
    white-space: nowrap;
  }
  kbd[\:has\(\%3E\%20kbd\)],
  .sf-kbd--group {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    gap: var(--sf-space-1\/4);
    min-height: var(--sf-0);
    min-block-size: var(--sf-0);
    min-width: var(--sf-0);
    min-inline-size: var(--sf-0);
    margin: var(--sf-0);
    padding: var(--sf-0);
    color: inherit;
    background: var(--sf-transparent);
    border: none;
    border-radius: var(--sf-0);
    font: inherit;
    line-height: inherit;
    unicode-bidi: -webkit-isolate;
    unicode-bidi: -moz-isolate;
    unicode-bidi: isolate;
    vertical-align: baseline;
    white-space: nowrap;
  }
  kbd[\:has\(\%3E\%20kbd\)],
  .sf-kbd--group {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    gap: var(--sf-space-1\/4);
    min-height: var(--sf-0);
    min-height: var(--sf-0);
    min-block-size: var(--sf-0);
    min-width: var(--sf-0);
    min-width: var(--sf-0);
    min-inline-size: var(--sf-0);
    margin: var(--sf-0);
    padding: var(--sf-0);
    color: inherit;
    background: var(--sf-transparent);
    border: none;
    border-radius: var(--sf-0);
    font: inherit;
    line-height: inherit;
    unicode-bidi: -webkit-isolate;
    unicode-bidi: -moz-isolate;
    unicode-bidi: isolate;
    vertical-align: baseline;
    white-space: nowrap;
  }
  kbd:has(> kbd),
  .sf-kbd--group {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    gap: var(--sf-space-1\/4);
    min-height: var(--sf-0);
    min-block-size: var(--sf-0);
    min-width: var(--sf-0);
    min-inline-size: var(--sf-0);
    margin: var(--sf-0);
    padding: var(--sf-0);
    color: inherit;
    background: var(--sf-transparent);
    border: none;
    border-radius: var(--sf-0);
    font: inherit;
    line-height: inherit;
    unicode-bidi: -webkit-isolate;
    unicode-bidi: -moz-isolate;
    unicode-bidi: isolate;
    vertical-align: baseline;
    white-space: nowrap;
  }
  @media (forced-colors: active) {
    :where(kbd:not(.sf-kbd--group), .sf-kbd:not(.sf-kbd--group)) {
      border-color: CanvasText;
    }
  }
}

/* docara-shell-source: smart/smart/inputs/css/inputs.css */
@layer sf.components {
  .sf-input.sf-input--bordered > .sf-input-field > .sf-input-hint > sf-icon > .sf-icon, .sf-input.sf-input--filled > .sf-input-field > .sf-input-hint > sf-icon > .sf-icon {
    --sf-icon--color: var(--sf-on-surface-variant);
  }
  .sf-input.sf-input--size-1 > .sf-input-field > .sf-input-hint > sf-icon > .sf-icon, .sf-input.sf-input--size-1 > .sf-input-field > .sf-input-left > sf-icon > .sf-icon {
    --sf-icon--font-size: var(--sf-text-height-1);
    --sf-icon--height: var(--sf-text-height-1);
    --sf-icon--width: var(--sf-text-height-1);
  }
  .sf-input.sf-input--size-2 > .sf-input-field > .sf-input-hint > sf-icon > .sf-icon, .sf-input.sf-input--size-2 > .sf-input-field > .sf-input-left > sf-icon > .sf-icon {
    --sf-icon--font-size: var(--sf-text-height-2);
    --sf-icon--height: var(--sf-text-height-2);
    --sf-icon--width: var(--sf-text-height-2);
  }
  .sf-input.sf-input--size-1\/2 > .sf-input-field > .sf-input-hint > sf-icon > .sf-icon, .sf-input.sf-input--size-1\/2 > .sf-input-field > .sf-input-left > sf-icon > .sf-icon {
    --sf-icon--font-size: var(--sf-text-height-1\/2);
    --sf-icon--height: var(--sf-text-height-1\/2);
    --sf-icon--width: var(--sf-text-height-1\/2);
  }
  .sf-input.error > .sf-input-field > .sf-input-hint > sf-icon > .sf-icon {
    --sf-icon--color: var(--sf-error);
  }
}
@layer sf.states {
  .sf-input[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:hover\)] > .sf-input-field > .sf-input-hint > sf-icon > .sf-icon, .sf-input[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:active\)] > .sf-input-field > .sf-input-hint > sf-icon > .sf-icon, .sf-input[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\).focus-visible\)] > .sf-input-field > .sf-input-hint > sf-icon > .sf-icon {
    --sf-icon--color: var(--sf-on-surface-variant);
  }
  .sf-input:has(input:enabled:not(:disabled):not(.disabled):hover) > .sf-input-field > .sf-input-hint > sf-icon > .sf-icon, .sf-input:has(input:enabled:not(:disabled):not(.disabled):active) > .sf-input-field > .sf-input-hint > sf-icon > .sf-icon, .sf-input:has(input:enabled:not(:disabled):not(.disabled).focus-visible) > .sf-input-field > .sf-input-hint > sf-icon > .sf-icon {
    --sf-icon--color: var(--sf-on-surface-variant);
  }
  .sf-input[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:hover\)] > .sf-input-field > .sf-input-hint > sf-icon > .sf-icon, .sf-input[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:active\)] > .sf-input-field > .sf-input-hint > sf-icon > .sf-icon, .sf-input[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:focus-visible\)] > .sf-input-field > .sf-input-hint > sf-icon > .sf-icon {
    --sf-icon--color: var(--sf-on-surface-variant);
  }
  .sf-input:has(input:enabled:not(:disabled):not(.disabled):hover) > .sf-input-field > .sf-input-hint > sf-icon > .sf-icon, .sf-input:has(input:enabled:not(:disabled):not(.disabled):active) > .sf-input-field > .sf-input-hint > sf-icon > .sf-icon, .sf-input:has(input:enabled:not(:disabled):not(.disabled):focus-visible) > .sf-input-field > .sf-input-hint > sf-icon > .sf-icon {
    --sf-icon--color: var(--sf-on-surface-variant);
  }
  .sf-input[\:has\(input\:disabled\)] > .sf-input-field > .sf-input-hint > sf-icon > .sf-icon, .sf-input[\:has\(input\:disabled\)] > .sf-input-field > .sf-input-left > sf-icon > .sf-icon {
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-input:has(input:disabled) > .sf-input-field > .sf-input-hint > sf-icon > .sf-icon, .sf-input:has(input:disabled) > .sf-input-field > .sf-input-left > sf-icon > .sf-icon {
    --sf-icon--color: var(--sf-on-disable);
  }
}