pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
  Theme: GitHub
  Description: Light theme as seen on github.com
  Author: github.com
  Maintainer: @Hirse
  Updated: 2021-05-15

  Outdated base version: https://github.com/primer/github-syntax-light
  Current colors taken from GitHub's CSS
*/.hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#005cc5}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-code,.hljs-comment,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{color:#005cc5;font-weight:700}.hljs-bullet{color:#735c0f}.hljs-emphasis{color:#24292e;font-style:italic}.hljs-strong{color:#24292e;font-weight:700}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}
/*
 * The dark half of the code highlight palette, appended to the vendored GitHub light theme in
 * `highlight.min.css` and published as one stylesheet.
 *
 * The vendored theme is a single mode: it paints light tokens and puts a white fill behind them.
 * The site has two modes, and the pre behind a listing block already carries `--surface-raised`, so
 * this file does two things. It takes the fill away in both modes, and it repaints every token
 * class the light theme paints once `data-theme="dark"` is on the root element.
 *
 * The dark values are the ones GitHub uses for its own dark syntax palette, which is the same
 * source the vendored light theme is drawn from, so a token keeps its meaning when the reader flips
 * the page. The `[data-theme="dark"]` prefix also raises each selector by one class, which is what
 * makes these rules win over the light ones regardless of which stylesheet the browser applied
 * last.
 *
 * The listing block's own padding and scroll box stay where they are: the vendored theme pads and
 * scrolls the `<code>` element as well, which would nest a second scroll container inside the
 * `<pre>` and double the inset.
 */

pre code.hljs {
    padding: 0;
    overflow-x: visible;
}

.hljs {
    background-color: transparent;
}

[data-theme="dark"] .hljs {
    color: #c9d1d9;
    background-color: transparent;
}

[data-theme="dark"] .hljs-doctag,
[data-theme="dark"] .hljs-keyword,
[data-theme="dark"] .hljs-meta .hljs-keyword,
[data-theme="dark"] .hljs-template-tag,
[data-theme="dark"] .hljs-template-variable,
[data-theme="dark"] .hljs-type,
[data-theme="dark"] .hljs-variable.language_ {
    color: #ff7b72;
}

[data-theme="dark"] .hljs-title,
[data-theme="dark"] .hljs-title.class_,
[data-theme="dark"] .hljs-title.class_.inherited__,
[data-theme="dark"] .hljs-title.function_ {
    color: #d2a8ff;
}

[data-theme="dark"] .hljs-attr,
[data-theme="dark"] .hljs-attribute,
[data-theme="dark"] .hljs-literal,
[data-theme="dark"] .hljs-meta,
[data-theme="dark"] .hljs-number,
[data-theme="dark"] .hljs-operator,
[data-theme="dark"] .hljs-selector-attr,
[data-theme="dark"] .hljs-selector-class,
[data-theme="dark"] .hljs-selector-id,
[data-theme="dark"] .hljs-variable {
    color: #79c0ff;
}

[data-theme="dark"] .hljs-meta .hljs-string,
[data-theme="dark"] .hljs-regexp,
[data-theme="dark"] .hljs-string {
    color: #a5d6ff;
}

[data-theme="dark"] .hljs-built_in,
[data-theme="dark"] .hljs-symbol {
    color: #ffa657;
}

[data-theme="dark"] .hljs-code,
[data-theme="dark"] .hljs-comment,
[data-theme="dark"] .hljs-formula {
    color: #8b949e;
}

[data-theme="dark"] .hljs-name,
[data-theme="dark"] .hljs-quote,
[data-theme="dark"] .hljs-selector-pseudo,
[data-theme="dark"] .hljs-selector-tag {
    color: #7ee787;
}

[data-theme="dark"] .hljs-subst {
    color: #c9d1d9;
}

/*
 * The upstream dark theme paints section markers `#1f6feb`, which is a light-mode blue: on the
 * raised dark surface it lands near 3 to 1. The link blue the site already uses for dark mode is
 * the same hue with enough contrast to read.
 */
[data-theme="dark"] .hljs-section {
    color: #58a6ff;
    font-weight: 700;
}

[data-theme="dark"] .hljs-bullet {
    color: #f2cc60;
}

[data-theme="dark"] .hljs-emphasis {
    color: #c9d1d9;
    font-style: italic;
}

[data-theme="dark"] .hljs-strong {
    color: #c9d1d9;
    font-weight: 700;
}

[data-theme="dark"] .hljs-addition {
    color: #aff5b4;
    background-color: #033a16;
}

[data-theme="dark"] .hljs-deletion {
    color: #ffdcd7;
    background-color: #67060c;
}
