/* 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);
    --sf-on-surface-variant: var(--sf-on-surface-container--variant);
    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);
    --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);
  }
  _:-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;
    }
  }
}