@layer components {
  .ui-callout 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-callout {
    --tone: var(--ui-tone-neutral);
    gap: var(--ui-space-sm);
    padding: .875rem var(--ui-space-md);
    border-radius: var(--ui-radius-lg);
    background: color-mix(in oklab, var(--tone) 2.5%, var(--ui-surface-canvas));
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone) 12%, var(--ui-line-contour));
    color: var(--ui-text-body);
    font-size: var(--ui-text-small);
    line-height: var(--ui-leading-small);
    grid-template-columns: auto minmax(0, 1fr);
    display: grid;
  }

  .ui-callout > svg {
    width: 1rem;
    height: 1rem;
    color: color-mix(in oklab, var(--tone) 80%, var(--ui-text-strong));
    margin-top: .21875rem;
  }

  .ui-callout > div {
    overflow-wrap: anywhere;
    min-width: 0;
  }

  .ui-callout > div > :first-child {
    margin-top: 0;
  }

  .ui-callout > div > :last-child {
    margin-bottom: 0;
  }

  .ui-callout b {
    color: var(--ui-text-strong);
    font-weight: var(--ui-weight-strong);
  }

  .ui-callout[data-tone="info"] {
    --tone: var(--ui-status-info);
  }

  .ui-callout[data-tone="success"], .ui-callout[data-tone="do"] {
    --tone: var(--ui-status-success);
  }

  .ui-callout[data-tone="warning"] {
    --tone: var(--ui-status-warning);
  }

  .ui-callout[data-tone="danger"], .ui-callout[data-tone="dont"] {
    --tone: var(--ui-status-danger);
  }
}

@layer theme{:root,:host{--color-zinc-0:oklch(98.6% .0008 265);--color-zinc-95:oklch(19.4% .0019 265)}:root,:host{--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-mono:"IBM Plex Mono"}}