@layer components {
  .ui-prose {
    --measure: 41rem;
    --bleed: 2rem;
    --line: 2rem;
    color: var(--ui-text-body);
    font-size: var(--ui-text-base);
    line-height: var(--ui-leading-body);
  }

  .ui-prose > :is(p, ul, ol, h2, h3, h4, blockquote, .ui-callout, .ui-disclosure, hr):not(:where(.ui-steps)) {
    max-width: var(--measure);
  }

  .ui-prose > :is(.ui-tray, .ui-code, .ui-table, .document-comparison, .ui-params, .ui-prompt, .ui-tree) {
    margin-inline: calc(var(--bleed) * -1);
  }

  @media (width < 52rem) {
    .ui-prose {
      --bleed: 0rem;
    }
  }

  .ui-prose > :is(p, ul, ol, blockquote) {
    margin-block: calc(var(--line) * .75);
  }

  .ui-prose > :is(.ui-tray, .ui-code, .ui-table, .document-comparison, .ui-callout, .ui-steps, .ui-index, .ui-logos, .ui-params, .ui-prompt, .ui-tree) {
    margin-block: var(--line);
  }

  .ui-prose > .ui-code:has( + .ui-code) {
    margin-bottom: var(--ui-space-sm);
  }

  .ui-prose > .ui-code + .ui-code {
    margin-top: var(--ui-space-sm);
  }

  .ui-prose > h2 {
    margin: calc(var(--line) * 2) 0 calc(var(--line) * .5);
    color: var(--ui-text-strong);
    font-size: var(--ui-text-h2);
    font-weight: var(--ui-weight-heading);
    line-height: var(--ui-leading-h2);
    letter-spacing: var(--ui-tracking-h2);
    text-wrap: balance;
  }

  .ui-prose > h3 {
    margin: calc(var(--line) * 1.5) 0 calc(var(--line) * .375);
    color: var(--ui-text-strong);
    font-size: var(--ui-text-h3);
    font-weight: var(--ui-weight-heading);
    line-height: var(--ui-leading-h3);
    letter-spacing: var(--ui-tracking-h3);
  }

  .ui-prose > h4 {
    margin: calc(var(--line) * 1.25) 0 calc(var(--line) * .25);
    color: var(--ui-text-strong);
    font-size: var(--ui-text-base);
    font-weight: var(--ui-weight-strong);
    line-height: 1.5rem;
  }

  .ui-prose > h2 + h3, .ui-prose > h3 + :is(h3, h4) {
    margin-top: calc(var(--line) * .5);
  }

  .ui-prose > :is(h2, h3) {
    width: fit-content;
    scroll-margin-top: 5rem;
    position: relative;
  }

  .ui-prose > h2 {
    width: auto;
  }

  .ui-prose > h2:not(:first-child):before {
    content: "";
    display: var(--section-rule, block);
    top: calc(var(--line) * -.875);
    inset-inline: 0 var(--rule-end, 0);
    background: var(--ui-line-hair);
    pointer-events: none;
    height: 1px;
    position: absolute;
  }

  .ui-prose > :is(a[id]:empty, .sr-only):first-child + h2, .ui-prose > .ui-disclosure:not(.ui-code + *) + h2, .ui-prose > .ui-disclosure:not(.ui-code + *) + a[id]:empty + h2, .ui-prose > .ui-disclosure:not(.ui-code + *) + hr + h2, .ui-prose > .ui-disclosure:not(.ui-code + *) + hr + a[id]:empty + h2, .ui-prose > .ui-pagehead + h2, .ui-prose > .ui-pagehead + a[id]:empty + h2, .ui-prose > :has( > .ui-disclosure:last-child) + h2 {
    --section-rule: none;
  }

  .ui-anchor {
    border-radius: var(--ui-radius-sm);
    width: 1.5rem;
    height: 1.5rem;
    color: var(--ui-text-disabled);
    font: var(--ui-weight-regular) .875rem/1 var(--font-family-mono);
    opacity: 0;
    transition: opacity var(--ui-duration-quick), color var(--ui-duration-quick);
    place-items: center;
    text-decoration: none;
    display: grid;
    position: absolute;
    top: 50%;
    right: 100%;
    translate: -.375rem -50%;
  }

  .ui-anchor:hover {
    color: var(--ui-text-muted);
  }

  .ui-prose > :is(h2, h3):is(:hover, :target, :focus-within) > .ui-anchor {
    opacity: 1;
  }

  .ui-anchor:focus-visible{opacity:1;outline:2px solid var(--ui-focus);outline-offset:1px}

  .ui-prose > :is(p, ul, ol, blockquote, h2, h3, h4) :is(strong, b) {
    color: var(--ui-text-strong);
    font-weight: var(--ui-weight-strong);
  }

  .ui-prose > :is(p, ul, ol, blockquote) a:not([class]) {
    color: var(--ui-text-strong);
    text-decoration: underline;
    text-decoration-color: var(--ui-line-strong);
    text-underline-offset: .24em;
    transition: text-decoration-color var(--ui-duration-quick);
    text-decoration-thickness: 1px;
  }

  .ui-prose > :is(p, ul, ol, blockquote) a:not([class]):hover {
    text-decoration-color: currentColor;
  }

  .ui-prose>:is(p,ul,ol,blockquote) a:not([class]):focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px;border-radius:var(--ui-radius-xs)}

  .ui-prose > :is(p, ul, ol, blockquote, h2, h3, h4) code:not(pre code) {
    border-radius: var(--ui-radius-xs);
    background: var(--ui-surface-chip);
    color: color-mix(in oklab, var(--ui-text-strong) 60%, var(--ui-text-body));
    box-shadow: inset 0 0 0 1px var(--ui-line-hair);
    font: var(--ui-weight-regular) .84em/1 var(--font-family-mono);
    overflow-wrap: anywhere;
    padding: .125em .375em;
  }

  .ui-prose > :is(h2, h3, h4) code:not(pre code) {
    box-shadow: none;
    color: inherit;
    background: none;
    padding: 0;
    font-size: .9em;
  }

  .ui-prose > :is(ul, ol):not([class]) {
    padding-left: 1.25em;
  }

  .ui-prose > :is(ul, ol):not([class]) li {
    margin-block: calc(var(--line) * .25);
    padding-left: .375em;
  }

  .ui-prose > :is(ul, ol):not([class]) li > :is(p, ul, ol) {
    margin-block: calc(var(--line) * .25);
  }

  .ui-prose > ul:not([class]) {
    list-style: outside;
  }

  .ui-prose > ul:not([class]) li::marker {
    color: var(--ui-text-disabled);
    font-size: .8em;
  }

  .ui-prose > ol:not([class]) li::marker {
    color: var(--ui-text-muted);
    font: var(--ui-weight-regular) .875em var(--font-family-sans);
    font-variant-numeric: tabular-nums;
  }

  .ui-prose > hr {
    height: 1px;
    margin: calc(var(--line) * 1.75) 0 calc(var(--line) * 1.25);
    background: var(--ui-line-divider);
    border: 0;
  }

  .ui-prose > hr + * {
    margin-top: 0;
  }

  .ui-prose > hr:has( + h2,  + a[id]:empty + h2) {
    background: none;
    height: 0;
    margin: 0;
  }

  .ui-prose > hr + h2 {
    margin-top: calc(var(--line) * 2);
  }

  .ui-prose > blockquote {
    box-shadow: inset 1px 0 0 var(--ui-line-strong);
    color: color-mix(in oklab, var(--ui-text-strong) 50%, var(--ui-text-body));
    margin-inline: 0;
    padding: .25rem 0 .25rem 1.25rem;
  }

  .ui-prose > blockquote > p {
    margin-block: 0;
  }

  .ui-prose > blockquote > p + p {
    margin-top: .75em;
  }

  .ui-prose > figure {
    margin: var(--line) 0;
  }

  .ui-prose > figure:not(.ui-tray) > figcaption {
    margin-top: var(--ui-space-sm);
    color: var(--ui-text-muted);
    font-size: var(--ui-text-caption);
    line-height: var(--ui-leading-caption);
  }
}

@layer theme{:root,:host{--color-zinc-0:oklch(98.6% .0008 265);--color-zinc-95:oklch(19.4% .0019 265)}:root,:host{--font-family-sans:var(--font-sans, ui-sans-serif), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-family-mono:var(--font-mono, ui-monospace), SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}: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))}:root,:host{--font-sans:"Geist", "Noto Sans TC";--font-mono:"IBM Plex Mono"}}