/* Diagram syntax is an implementation detail, including before enhancement. */
pre:has(> code.language-mermaid) { display:none; }
/* Shared article and guide typography. Every wide element scrolls locally. */
:is(.docs-markdown, .content-page__body, [data-rich-content]) {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.8;
}
:is(.docs-markdown, .content-page__body, [data-rich-content]) :is(h2, h3, h4) {
  text-wrap: balance;
  line-height: 1.2;
  scroll-margin-top: 7rem;
}
:is(.docs-markdown, .content-page__body, [data-rich-content]) h2 { margin-top: 2.4em; }
:is(.docs-markdown, .content-page__body, [data-rich-content]) h3 { margin-top: 1.8em; }
:is(.docs-markdown, .content-page__body, [data-rich-content]) :is(pre, .markdown-table) {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}
:is(.docs-markdown, .content-page__body, [data-rich-content]) pre {
  white-space: pre;
  overflow-wrap: normal;
  font-size: .83rem;
  line-height: 1.7;
  tab-size: 2;
  padding: 1.2rem;
}
:is(.docs-markdown, .content-page__body, [data-rich-content]) :not(pre) > code {
  overflow-wrap: anywhere;
  padding: .12em .3em;
  border-radius: .25em;
  background: color-mix(in srgb, currentColor 6%, transparent);
  font-size: .87em;
}
.markdown-table { margin: 1.6rem 0; border: 1px solid var(--color-border); border-radius: .8rem; }
.markdown-table table { width: 100%; margin: 0; border-collapse: collapse; font-size: .9rem; }
.markdown-table :is(th, td) { padding: .8rem 1rem; text-align: start; min-width: 8rem; border-bottom: 1px solid var(--color-border); }
.markdown-table th { background: var(--color-surface-soft); color: var(--color-text); font-weight: 650; }
.markdown-table tr:last-child td { border-bottom: 0; }
.admonition { margin: 1.6rem 0; padding: 1rem 1.3rem; background: var(--color-surface-soft); border: 1px solid var(--color-border); border-inline-start: 4px solid var(--color-highlight); border-radius: .25rem .9rem .9rem .25rem; color: var(--color-text); }
.admonition :is(p, ul, ol):last-child { margin-bottom: 0; }
.admonition > :first-child { margin-top: 0; }
.admonition-title { font-weight: 700; margin-bottom: .5rem; }
.admonition.warning, .admonition.important { background: #fff7e7; border-color: #e4c587; color: #624717; }
.admonition.danger { background: #fff0ed; border-color: #dc9e91; color: #793c30; }
.code-frame { max-width: 100%; min-width: 0; margin: 1.5rem 0; border: 1px solid var(--assetrouter-slate); border-radius: .9rem; overflow: hidden; background: var(--assetrouter-night); color: var(--assetrouter-cloud); }
.code-toolbar { display: flex; align-items: center; gap: .6rem; padding: .6rem 1rem; border-bottom: 1px solid var(--assetrouter-slate); font-size: .7rem; letter-spacing: .03em; }
.code-toolbar > span:first-child { margin-inline-end: auto; }
.code-toolbar button { border: 1px solid var(--assetrouter-slate); border-radius: .35rem; padding: .3rem .6rem; color: var(--assetrouter-cloud); background: transparent; cursor: pointer; font: inherit; }
.code-toolbar button:hover { background: var(--assetrouter-slate); }
.code-copy-status { font-size: .7rem; letter-spacing: 0; }
:is(.docs-markdown, .content-page__body, [data-rich-content]) .code-frame pre { margin: 0; border: 0; border-radius: 0; background: transparent; color: inherit; }
.code-frame code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal { color: #b6d7ff; }
.hljs-string, .hljs-attr, .hljs-template-tag { color: #e6a774; }
.hljs-comment, .hljs-quote { color: #a7b1ca; font-style: italic; }
.hljs-number, .hljs-symbol, .hljs-built_in { color: #f7c99b; }
.hljs-title, .hljs-type, .hljs-variable { color: #e7bdea; }
.content-diagram { max-width: 100%; min-width: 0; margin: 2rem 0; padding: 1rem; border: 1px solid var(--color-border); border-radius: 1.1rem; background: var(--color-surface); color: var(--color-text); }
.content-diagram__canvas { overflow-x: auto; max-width: 100%; padding: 1rem 0; }
.content-diagram__canvas svg { display: block; height: auto; max-width: 100%; margin: auto; }
.diagram-unavailable { padding: .6rem .9rem; background: #fff7e7; color: #624717; border-radius: .5rem; }
:is(.code-toolbar button, .markdown-table, .content-diagram__canvas, .code-frame pre):focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
@media (max-width: 600px) {
  .content-diagram { padding: .6rem; }
  .content-diagram__canvas svg { min-width: 32rem; max-width: none; }
  .code-toolbar { flex-wrap: wrap; }
  .code-copy-status { max-width: 10rem; }
}
@media (prefers-reduced-motion: reduce) {
  .content-diagram *, .code-frame * { animation: none !important; transition: none !important; }
}

:is(.docs-markdown, .content-page__body, [data-rich-content]) img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.5rem auto;
  border-radius: .75rem;
}

.content-diagram[data-compact="true"] .content-diagram__canvas svg { min-width:0;max-width:100%; }