/* Background */
.bg {
  background-color: #ffffff;
}

/* PreWrapper */
.chroma {
  background-color: #f6f8fa;
}

/* Other */
.chroma .x {}

/* Error */
.chroma .err {}

/* CodeLine */
.chroma .cl {}

/* LineTableTD */
.chroma .lntd {
  vertical-align: top;
  padding: 0;
  margin: 0;
  border: 0;
}

/* LineTable */
.chroma .lntable {
  border-spacing: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

/* LineHighlight */
.chroma .hl {
  background-color: #ffffcc;
}

/* LineNumbersTable */
.chroma .lnt {
  white-space: pre;
  user-select: none;
  margin-right: 0.4em;
  padding: 0 0.4em 0 0.4em;
  color: #258852;
}

/* LineNumbers */
.chroma .ln {
  white-space: pre;
  user-select: none;
  margin-right: 0.4em;
  padding: 0 0.4em 0 0.4em;
  color: #258852;
}

/* Line */
.chroma .line {
  display: flex;
}

/* Keyword */
.chroma .k {
  color: #0000ff;
}

/* KeywordConstant */
.chroma .kc {
  color: #0000ff;
}

/* KeywordDeclaration */
.chroma .kd {
  color: #0000ff;
}

/* KeywordNamespace */
.chroma .kn {
  color: #0000ff;
}

/* KeywordPseudo */
.chroma .kp {
  color: #0000ff;
}

/* KeywordReserved */
.chroma .kr {
  color: #0000ff;
}

/* KeywordType */
.chroma .kt {
  color: #0000ff;
}

/* Name */
.chroma .n {}

/* NameAttribute */
.chroma .na {}

/* NameBuiltin */
.chroma .nb {}

/* NameBuiltinPseudo */
.chroma .bp {}

/* NameClass */
.chroma .nc {
  color: #007575;
}

/* NameConstant */
.chroma .no {}

/* NameDecorator */
.chroma .nd {
  color: #cc00a3;
}

/* NameEntity */
.chroma .ni {}

/* NameException */
.chroma .ne {}

/* NameFunction */
.chroma .nf {
  color: #c34e00;
}

/* NameFunctionMagic */
.chroma .fm {}

/* NameLabel */
.chroma .nl {}

/* NameNamespace */
.chroma .nn {}

/* NameOther */
.chroma .nx {}

/* NameProperty */
.chroma .py {}

/* NameTag */
.chroma .nt {}

/* NameVariable */
.chroma .nv {}

/* NameVariableClass */
.chroma .vc {}

/* NameVariableGlobal */
.chroma .vg {}

/* NameVariableInstance */
.chroma .vi {}

/* NameVariableMagic */
.chroma .vm {}

/* Literal */
.chroma .l {}

/* LiteralDate */
.chroma .ld {}

/* LiteralString */
.chroma .s {
  color: #009c00;
}

/* LiteralStringAffix */
.chroma .sa {
  color: #009c00;
}

/* LiteralStringBacktick */
.chroma .sb {
  color: #009c00;
}

/* LiteralStringChar */
.chroma .sc {
  color: #009c00;
}

/* LiteralStringDelimiter */
.chroma .dl {
  color: #009c00;
}

/* LiteralStringDoc */
.chroma .sd {
  color: #009c00;
}

/* LiteralStringDouble */
.chroma .s2 {
  color: #009c00;
}

/* LiteralStringEscape */
.chroma .se {
  color: #009c00;
}

/* LiteralStringHeredoc */
.chroma .sh {
  color: #009c00;
}

/* LiteralStringInterpol */
.chroma .si {
  color: #009c00;
}

/* LiteralStringOther */
.chroma .sx {
  color: #009c00;
}

/* LiteralStringRegex */
.chroma .sr {
  color: #009c00;
}

/* LiteralStringSingle */
.chroma .s1 {
  color: #009c00;
}

/* LiteralStringSymbol */
.chroma .ss {
  color: #009c00;
}

/* LiteralNumber */
.chroma .m {}

/* LiteralNumberBin */
.chroma .mb {}

/* LiteralNumberFloat */
.chroma .mf {}

/* LiteralNumberHex */
.chroma .mh {}

/* LiteralNumberInteger */
.chroma .mi {}

/* LiteralNumberIntegerLong */
.chroma .il {}

/* LiteralNumberOct */
.chroma .mo {}

/* Operator */
.chroma .o {}

/* OperatorWord */
.chroma .ow {}

/* Punctuation */
.chroma .p {}

/* Comment */
.chroma .c {
  color: #7f7f7f;
  font-style: italic;
}

/* CommentHashbang */
.chroma .ch {
  color: #7f7f7f;
  font-style: italic;
}

/* CommentMultiline */
.chroma .cm {
  color: #7f7f7f;
  font-style: italic;
}

/* CommentSingle */
.chroma .c1 {
  color: #7f7f7f;
  font-style: italic;
}

/* CommentSpecial */
.chroma .cs {
  color: #7f7f7f;
  font-style: italic;
}

/* CommentPreproc */
.chroma .cp {
  color: #7f7f7f;
  font-style: italic;
}

/* CommentPreprocFile */
.chroma .cpf {
  color: #7f7f7f;
  font-style: italic;
}

/* Generic */
.chroma .g {}

/* GenericDeleted */
.chroma .gd {}

/* GenericEmph */
.chroma .ge {}

/* GenericError */
.chroma .gr {}

/* GenericHeading */
.chroma .gh {}

/* GenericInserted */
.chroma .gi {}

/* GenericOutput */
.chroma .go {}

/* GenericPrompt */
.chroma .gp {}

/* GenericStrong */
.chroma .gs {}

/* GenericSubheading */
.chroma .gu {}

/* GenericTraceback */
.chroma .gt {}

/* GenericUnderline */
.chroma .gl {}

/* TextWhitespace */
.chroma .w {}

/* Dark mode syntax highlighting — system fallback (no-JS) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .bg { background-color: #282c34; }
  :root:not([data-theme]) .chroma { background-color: #282c34; }
  :root:not([data-theme]) .chroma .hl { background-color: #2c313a; }
  :root:not([data-theme]) .chroma .lnt { color: #5c6370; }
  :root:not([data-theme]) .chroma .ln { color: #5c6370; }
  :root:not([data-theme]) .chroma .k { color: #569cd6; }
  :root:not([data-theme]) .chroma .kc { color: #569cd6; }
  :root:not([data-theme]) .chroma .kd { color: #569cd6; }
  :root:not([data-theme]) .chroma .kn { color: #569cd6; }
  :root:not([data-theme]) .chroma .kp { color: #569cd6; }
  :root:not([data-theme]) .chroma .kr { color: #569cd6; }
  :root:not([data-theme]) .chroma .kt { color: #569cd6; }
  :root:not([data-theme]) .chroma .nc { color: #4ec9b0; }
  :root:not([data-theme]) .chroma .nd { color: #c586c0; }
  :root:not([data-theme]) .chroma .nf { color: #dcdcaa; }
  :root:not([data-theme]) .chroma .s { color: #6a9955; }
  :root:not([data-theme]) .chroma .sa { color: #6a9955; }
  :root:not([data-theme]) .chroma .sb { color: #6a9955; }
  :root:not([data-theme]) .chroma .sc { color: #6a9955; }
  :root:not([data-theme]) .chroma .dl { color: #6a9955; }
  :root:not([data-theme]) .chroma .sd { color: #6a9955; }
  :root:not([data-theme]) .chroma .s2 { color: #6a9955; }
  :root:not([data-theme]) .chroma .se { color: #d7ba7d; }
  :root:not([data-theme]) .chroma .sh { color: #6a9955; }
  :root:not([data-theme]) .chroma .si { color: #6a9955; }
  :root:not([data-theme]) .chroma .sx { color: #6a9955; }
  :root:not([data-theme]) .chroma .sr { color: #d16969; }
  :root:not([data-theme]) .chroma .s1 { color: #6a9955; }
  :root:not([data-theme]) .chroma .ss { color: #6a9955; }
  :root:not([data-theme]) .chroma .c { color: #6a737d; font-style: italic; }
  :root:not([data-theme]) .chroma .ch { color: #6a737d; font-style: italic; }
  :root:not([data-theme]) .chroma .cm { color: #6a737d; font-style: italic; }
  :root:not([data-theme]) .chroma .c1 { color: #6a737d; font-style: italic; }
  :root:not([data-theme]) .chroma .cs { color: #6a737d; font-style: italic; }
  :root:not([data-theme]) .chroma .cp { color: #6a737d; font-style: italic; }
  :root:not([data-theme]) .chroma .cpf { color: #6a737d; font-style: italic; }
}

/* Dark mode syntax highlighting — JS toggle */
[data-theme="dark"] .bg { background-color: #282c34; }
[data-theme="dark"] .chroma { background-color: #282c34; }
[data-theme="dark"] .chroma .hl { background-color: #2c313a; }
[data-theme="dark"] .chroma .lnt { color: #5c6370; }
[data-theme="dark"] .chroma .ln { color: #5c6370; }
[data-theme="dark"] .chroma .k { color: #569cd6; }
[data-theme="dark"] .chroma .kc { color: #569cd6; }
[data-theme="dark"] .chroma .kd { color: #569cd6; }
[data-theme="dark"] .chroma .kn { color: #569cd6; }
[data-theme="dark"] .chroma .kp { color: #569cd6; }
[data-theme="dark"] .chroma .kr { color: #569cd6; }
[data-theme="dark"] .chroma .kt { color: #569cd6; }
[data-theme="dark"] .chroma .nc { color: #4ec9b0; }
[data-theme="dark"] .chroma .nd { color: #c586c0; }
[data-theme="dark"] .chroma .nf { color: #dcdcaa; }
[data-theme="dark"] .chroma .s { color: #6a9955; }
[data-theme="dark"] .chroma .sa { color: #6a9955; }
[data-theme="dark"] .chroma .sb { color: #6a9955; }
[data-theme="dark"] .chroma .sc { color: #6a9955; }
[data-theme="dark"] .chroma .dl { color: #6a9955; }
[data-theme="dark"] .chroma .sd { color: #6a9955; }
[data-theme="dark"] .chroma .s2 { color: #6a9955; }
[data-theme="dark"] .chroma .se { color: #d7ba7d; }
[data-theme="dark"] .chroma .sh { color: #6a9955; }
[data-theme="dark"] .chroma .si { color: #6a9955; }
[data-theme="dark"] .chroma .sx { color: #6a9955; }
[data-theme="dark"] .chroma .sr { color: #d16969; }
[data-theme="dark"] .chroma .s1 { color: #6a9955; }
[data-theme="dark"] .chroma .ss { color: #6a9955; }
[data-theme="dark"] .chroma .c { color: #6a737d; font-style: italic; }
[data-theme="dark"] .chroma .ch { color: #6a737d; font-style: italic; }
[data-theme="dark"] .chroma .cm { color: #6a737d; font-style: italic; }
[data-theme="dark"] .chroma .c1 { color: #6a737d; font-style: italic; }
[data-theme="dark"] .chroma .cs { color: #6a737d; font-style: italic; }
[data-theme="dark"] .chroma .cp { color: #6a737d; font-style: italic; }
[data-theme="dark"] .chroma .cpf { color: #6a737d; font-style: italic; }