/* Static syntax highlighting: no browser library or external request required. */
:root {
    --code-bg: #0d1117;
    --code-fg: #e6edf3;
    --code-border: #30363d;
    --code-comment: #9da7b3;
    --code-keyword: #ff7b72;
    --code-string: #a5d6ff;
    --code-function: #d2a8ff;
    --code-number: #79c0ff;
  }
code, pre, .code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-variant-numeric: lining-nums tabular-nums;
  font-variant-ligatures: none;
  font-style: normal;
  tab-size: 4;
}
:not(pre) > code {
  color: var(--code-fg);
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: 4px;
  padding: .08em .3em;
  font-size: .88em;
  overflow-wrap: anywhere;
}
.article-content .code-example, .code-example {
  margin: 1.5rem 0;
  min-width: 0;
  border: 1px solid var(--code-border);
  border-radius: 8px;
  background: var(--code-bg);
  overflow: hidden;
}
.code-example figcaption {
  padding: .55rem 1rem;
  border-bottom: 1px solid var(--code-border);
  color: var(--code-comment);
  font: 500 .75rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
pre.code-block, .prompt pre.code-block {
  margin: 0;
  padding: 1rem 1.15rem;
  background: var(--code-bg);
  color: var(--code-fg);
  border: 0;
  border-radius: 0;
  font-size: .88rem;
  font-weight: 400;
  line-height: 1.75;
  white-space: pre;
  overflow-x: auto;
  overflow-wrap: normal;
  word-break: normal;
  max-width: 100%;
  scrollbar-width: thin;
}
pre.code-block code { font: inherit; color: inherit; white-space: inherit; }
pre.code-block:focus-visible { outline: 2px solid var(--accent, #0550ae); outline-offset: -3px; }
/* Prompts are prose; wrap them without changing copy-to-clipboard content. */
.prompt pre.code-block { white-space: pre-wrap; overflow-wrap: anywhere; }
pre.code { color: var(--code-fg); background: var(--code-bg); border: 1px solid var(--code-border); }
body.read pre.code { white-space: pre; overflow-x: auto; overflow-wrap: normal; font-size: .85rem; line-height: 1.7; }
/* Semantic good/bad annotations remain clear in the interactive slide examples. */
pre.code .hl-good, pre.code .hl-bad { text-decoration: underline; text-underline-offset: .2em; }
pre.code .hl-good > span, pre.code .hl-bad > span { color: inherit; }
.syntax-c, .syntax-c1, .syntax-cm, .syntax-cp, .syntax-cs, .syntax-ch { color: var(--code-comment); }
.syntax-k, .syntax-kd, .syntax-kn, .syntax-kp, .syntax-kr, .syntax-kt, .syntax-o, .syntax-ow { color: var(--code-keyword); }
.syntax-s, .syntax-s1, .syntax-s2, .syntax-sa, .syntax-sb, .syntax-sc, .syntax-sd, .syntax-se, .syntax-sh, .syntax-si, .syntax-sr, .syntax-ss, .syntax-dl { color: var(--code-string); }
.syntax-nf, .syntax-nc, .syntax-nd, .syntax-nb, .syntax-fm { color: var(--code-function); }
.syntax-m, .syntax-mi, .syntax-mf, .syntax-mh, .syntax-mo, .syntax-mb, .syntax-il, .syntax-kc { color: var(--code-number); }
@media (max-width: 34rem) {
  pre.code-block, .prompt pre.code-block { padding: .85rem; font-size: .84rem; }
  .code-example figcaption { padding-inline: .85rem; }
}
@media print {
  :root { --code-bg: #fff; --code-fg: #111; --code-comment: #444; --code-keyword: #8a1025; --code-string: #064b89; --code-function: #583294; --code-number: #064b89; }
  pre.code-block { white-space: pre-wrap; overflow-wrap: anywhere; }
}