/* Token colors follow the site's explicit appearance choice or system setting. */
:root {
  --syntax-keyword: #cf222e;
  --syntax-title: #8250df;
  --syntax-value: #0550ae;
  --syntax-string: #0a3069;
  --syntax-builtin: #953800;
  --syntax-comment: #656d76;
  --syntax-tag: #116329;
}
:root[data-appearance="dark"] {
  --syntax-keyword: #ff7b72;
  --syntax-title: #d2a8ff;
  --syntax-value: #79c0ff;
  --syntax-string: #a5d6ff;
  --syntax-builtin: #ffa657;
  --syntax-comment: #a0a8b3;
  --syntax-tag: #7ee787;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-appearance]) {
    --syntax-keyword: #ff7b72;
    --syntax-title: #d2a8ff;
    --syntax-value: #79c0ff;
    --syntax-string: #a5d6ff;
    --syntax-builtin: #ffa657;
    --syntax-comment: #a0a8b3;
    --syntax-tag: #7ee787;
  }
}
.prose pre, .comment-body pre { max-width: 100%; white-space: pre; tab-size: 4; }
.prose pre code { padding: 0; font-size: inherit; background: transparent; }
pre:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.hljs { color: var(--ink); }
.hljs-keyword, .hljs-doctag, .hljs-type, .hljs-template-tag, .hljs-template-variable, .hljs-variable.language_ { color: var(--syntax-keyword); }
.hljs-title { color: var(--syntax-title); }
.hljs-attr, .hljs-attribute, .hljs-literal, .hljs-meta, .hljs-number, .hljs-operator, .hljs-variable, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id { color: var(--syntax-value); }
.hljs-string, .hljs-regexp, .hljs-meta .hljs-string { color: var(--syntax-string); }
.hljs-built_in, .hljs-symbol, .hljs-bullet { color: var(--syntax-builtin); }
.hljs-comment, .hljs-code, .hljs-formula { color: var(--syntax-comment); }
.hljs-name, .hljs-quote, .hljs-selector-tag, .hljs-selector-pseudo { color: var(--syntax-tag); }
.hljs-subst { color: var(--ink); }
.hljs-section { color: var(--syntax-value); font-weight: 600; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }
.hljs-addition { color: var(--syntax-tag); background: color-mix(in srgb, var(--syntax-tag) 10%, transparent); }
.hljs-deletion { color: var(--syntax-keyword); background: color-mix(in srgb, var(--syntax-keyword) 10%, transparent); }