@layer components {
  .ui-prose {
    --prose-bleed: 0rem;
    --bleed: var(--prose-bleed);
  }

  @media (width >= 52rem) {
    .ui-prose {
      --prose-bleed: 2rem;
    }
  }

  @media print {
    .ui-prose {
      --prose-bleed: 0rem;
    }
  }

  .ui-prose.ui-docs-article {
    --measure: var(--docs-text);
  }

  @media (width >= 52rem) {
    .ui-prose.ui-docs-article {
      --prose-bleed: min(2rem, var(--docs-gutter) - 1rem);
    }
  }

  :is(.ui-tray, .ui-code, .ui-table, .document-comparison, .ui-params, .ui-prompt, .ui-tree, figure, img, video, iframe, picture, p:has( > img:only-child,  > video:only-child,  > picture:only-child,  > a:only-child > img:only-child)):is(.ui-prose > :is(div, section, astro-island, astro-slot):not([class], [role="region"]) > *, .ui-prose > :is(div, section, astro-island, astro-slot):not([class], [role="region"]) > :is(div, section, astro-island, astro-slot):not([class], [role="region"]) > *), :is(figure, img, video, iframe, picture, p:has( > img:only-child,  > video:only-child,  > picture:only-child,  > a:only-child > img:only-child)):is(.ui-prose > *) {
    margin-inline: calc(var(--prose-bleed) * -1);
  }

  :is(.ui-tray, .ui-code, .ui-table, .document-comparison, .ui-params, .ui-prompt, .ui-tree):is(.ui-prose > :is(div, section, astro-island, astro-slot):not([class], [role="region"]) > *, .ui-prose > :is(div, section, astro-island, astro-slot):not([class], [role="region"]) > :is(div, section, astro-island, astro-slot):not([class], [role="region"]) > *) {
    margin-block: var(--line);
  }

  .ui-docs-article > .ui-steps[data-variant="document"] {
    margin-right: calc(var(--prose-bleed) * -1);
  }

  .ui-docs-article > .ui-steps[data-variant="document"] > :not(li) {
    margin: 0 0 0 calc(var(--prose-bleed) * -1);
  }

  :is(img, video, iframe):is(.ui-prose > *, .ui-prose > :is(div, section, astro-island, astro-slot):not([class], [role="region"]) > *) {
    width: calc(100% + var(--prose-bleed) * 2);
    max-width: none;
  }

  .ui-prose > [role="region"]:has( > :is(.ui-table, table)) {
    margin: var(--ui-space-xl) calc(var(--prose-bleed) * -1);
  }

  .ui-prose>[role=region][tabindex]:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px;border-radius:var(--ui-radius-xs)}

  .ui-prose :is(img, video):not(:where(.site-demo *, [data-demo-container] *, .ui-tree *)) {
    height: auto;
  }

  .ui-prose :is(img, video):not(:where(.site-demo *, [data-demo-container] *, .document-illustration *, :focus-visible)) {
    outline: 1px solid var(--color-line-media);
    outline-offset: -1px;
  }

  :is(figure, p, a, picture):is(.ui-prose > *) :is(img, video):not(:where(.site-demo *, [data-demo-container] *)), :is(img, video):is(.ui-prose > *) {
    border-radius: var(--ui-radius-xl);
    width: 100%;
    max-width: none;
    display: block;
  }

  :is(a, picture):is(.ui-prose > *) {
    display: block;
  }

  .ui-prose > :is(p, ul, ol, h2, h3, h4) {
    overflow-wrap: anywhere;
  }

  .ui-prose > :is(p, ul, ol) {
    text-wrap: pretty;
  }

  .ui-prose :is(h4, a[id]:not([href])) {
    scroll-margin-top: 5rem;
  }

  .ui-prose>:is(h2,h3):focus-visible{outline:2px solid var(--ui-focus);outline-offset:.25rem;border-radius:var(--ui-radius-xs)}

  .ui-prose > :is(p, ul, ol) code[data-token], .ui-prose > details:not([class]) > :is(p, ul, ol) code[data-token] {
    vertical-align: baseline;
    max-width: 100%;
    line-height: 1.5;
    display: inline-block;
  }

  .ui-inline-code {
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .ui-prose > :is(p, ul, ol) del {
    text-decoration-color: var(--ui-status-danger);
  }

  .ui-prose > details:not([class]) {
    max-width: var(--measure);
    margin-block: var(--ui-space-xl);
    border-block: 1px solid var(--ui-line-hair);
  }

  .ui-prose > details:not([class]) > summary {
    padding: var(--ui-space-sm) 0;
    color: var(--ui-text-strong);
    font-weight: var(--ui-weight-strong);
    font-size: var(--ui-text-small);
    cursor: pointer;
  }

  .ui-prose>details:not([class])>summary:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px;border-radius:var(--ui-radius-xs)}

  .ui-prose > details:not([class])[open] {
    padding-bottom: calc(var(--line) * .75);
  }

  .ui-prose > details:not([class]) > :is(p, ul, ol, blockquote) {
    margin-block: calc(var(--line) * .75);
    overflow-wrap: anywhere;
    text-wrap: pretty;
  }

  .ui-prose > details:not([class]) > :where(.ui-table, .ui-code, .ui-tray, .ui-params, .ui-prompt, .ui-tree, figure) {
    margin-block: var(--line);
  }

  .ui-prose > details:not([class]) > summary + * {
    margin-top: var(--ui-space-sm);
  }

  .ui-prose > details:not([class]) > :last-child {
    margin-bottom: 0;
  }

  .ui-prose:lang(zh) {
    text-autospace: normal;
  }

  .ui-prose:lang(zh) > :is(h2, h3, h4) {
    letter-spacing: 0;
  }

  @media (width < 40rem) {
    .ui-prose > :is(h2, h3):has( > .ui-anchor) {
      max-width: calc(100% - 1.875rem);
    }

    .ui-prose > :is(h2, h3) > .ui-anchor {
      left: 100%;
      right: auto;
      translate: .375rem -50%;
    }

    .ui-prose > h2:has( > .ui-anchor) {
      --rule-end: -1.875rem;
    }
  }

  .ui-prose ::selection {
    background: color-mix(in oklab, var(--ui-text-strong) 16%, transparent);
  }

  @media (forced-colors: active) {
    .ui-prose > hr {
      background: none;
      border-top: 1px solid canvastext;
      height: 0;
    }
  }
}

a[data-indicate] {
  margin-inline-end: .4em;
}

a[data-indicate]:after {
  color: var(--ui-text-muted);
  margin-left: .06em;
  font-size: .7em;
  line-height: 1;
  text-decoration: none;
  position: absolute;
}

a[data-indicate="external"]:after {
  content: "↗";
}

a[data-indicate="hash"]:after {
  content: "#";
}

.ui-prose :is(td, th) a[href^="#"] {
  white-space: nowrap;
}

@media print {
  :root:has(.ui-prose) > body {
    background-color: #fff;
  }

  .ui-prose {
    color-scheme: light;
  }

  .ui-prose > :is(p, ul, ol) a[href^="http"]:after {
    color: #555;
    vertical-align: baseline;
    content: " (" attr(href) ")";
    overflow-wrap: anywhere;
    max-width: 100%;
    margin: 0;
    font-size: .8em;
    display: inline-block;
  }
}

@layer theme{:root,:host{--color-zinc-0:oklch(98.6% .0008 265);--color-zinc-95:oklch(19.4% .0019 265)}:root,:host{--opacity-media-ring:.1;--color-line-media:light-dark(color(srgb 0 0 0 / var(--opacity-media-ring)), color(srgb 1 1 1 / var(--opacity-media-ring)))}:root,:host{--color-code-function:var(--ui-code-function);--color-code-keyword:var(--ui-code-keyword);--color-code-number:var(--ui-code-number);--color-code-property:var(--ui-code-property);--color-code-string:var(--ui-code-string);--color-code-surface:light-dark(var(--color-zinc-0), var(--color-zinc-95))}}