/* ----- Format ----- */

.chroma .hl {
  padding: 0 0.5rem;
  margin: 0 -0.5rem;
}

.chroma .line {
  display: block;
}

.chroma .hl > .cl:before,
.chroma .ln a:hover:before,
.chroma .ln:target a:before,
.chroma .line > .cl:hover:before {
  content: "";
  position: absolute;
  height: 1.5rem;
  width: 100%;
  left: 0;
  z-index: -1;
}

.chroma .ln a {
  padding: 0.05rem 0.75rem;
  margin: 0 1rem 0 -0.75rem;
  user-select: none;
  text-decoration: none;
  display: inline-block;
}

.chroma .ln a:hover,
.chroma .ln:target a {
  outline: 0.15rem solid !important;
  outline-offset: -0.3rem;
}

.chroma .line .cl:hover {
  text-shadow: 0 0 currentColor;
}

.chroma .ln a:hover:before,
.chroma .ln:target a:before,
.chroma .line > .cl:hover:before {
  background-color: #f2f2f2;
}

code-block code {
  position: relative;
}

code-block button {
  border: 1px solid #ccc;
}

code-block header language-label a,
code-block header language-label a:hover {
  color: #111;
}

/* ------ Tokens ------ */

:root {
--code-chroma-background:             #ffffff;
--code-chroma-foreground:             #333333;
--code-chroma-error-background:       #960050;
--code-chroma-error-foreground:       #960050;
--code-chroma-label-background:       #006894;
--code-chroma-label-foreground:       #e6e6e6;
--code-chroma-line-highlight:         #fff8c5;
--code-chroma-line-number:            #375462;
--code-chroma-line-number-background: #edf2f7;
--code-chroma-line:                   var(--code-chroma-foreground);
}

/* ChromaForeground           */  code-block, .chroma, .highlight { color:            #333333; color:            var(--code-chroma-foreground);                  }
/* ChromaBackground           */  code-block button, .chroma      { background-color: #ffffff; background-color: var(--code-chroma-background);                  }
/* ChromaErrorBackground      */ .chroma .err                     { color:            #960050; color:            var(--code-chroma-error-background);            }
/* ChromaErrorForeground      */ .chroma .err                     { color:            #960050; color:            var(--code-chroma-error-foreground);            }
/* ChromaLabelBackground      */ .chroma code:before              { background-color: #006894; background-color: var(--code-chroma-label-background);            }
/* ChromaLabelForeground      */ .chroma code:before              { color:            #e6e6e6; color:            var(--code-chroma-label-foreground);            }
/* ChromaLine                 */ .chroma .line                    { color:            #333333; color:            var(--code-chroma-line);                        }
/* ChromaLineHighlight        */ .chroma .hl > span:before        { background-color: #fff8c5; background-color: var(--code-chroma-line-highlight);              }
/* ChromaLineNumber           */ .chroma .ln a                    { color: #375462 !important; color:            var(--code-chroma-line-number) !important;      }
/* ChromaLineNumberBackground */ .chroma .ln a                    { background-color: #edf2f7; background-color: var(--code-chroma-line-number-background);      }

:root {
  --code-comment:              #4f4f4f;
  --code-comment-hashbang:     var(--code-comment);
  --code-comment-multiline:    var(--code-comment);
  --code-comment-preproc:      #222222;
  --code-comment-preproc-file: #005194;
  --code-comment-single:       var(--code-comment);
  --code-comment-special:      var(--code-comment);
}

/* Comment            */ .chroma .c   { color: #222222; color: var(--code-comment);              }
/* CommentHashbang    */ .chroma .ch  { color: #222222; color: var(--code-comment-hashbang);     }
/* CommentMultiline   */ .chroma .cm  { color: #222222; color: var(--code-comment-multiline);    }
/* CommentPreproc     */ .chroma .cp  { color: #222222; color: var(--code-comment-preproc);      }
/* CommentPreprocFile */ .chroma .cpf { color: #005194; color: var(--code-comment-preproc-file); }
/* CommentSingle      */ .chroma .c1  { color: #4f4f4f; color: var(--code-comment-single);       }
/* CommentSpecial     */ .chroma .cs  { color: #222222; color: var(--code-comment-special);      }

:root {
  --code-generic-deleted:    #8d1007;
  --code-generic-inserted:   #224e24;
  --code-generic-subheading: #2d4958;
  --code-generic-tag:        var(--code-generic);
  --code-generic:            #2d4958;
}

/* GenericDeleted    */ .chroma .gd { color:       #8d1007; color: var(--code-generic-deleted);    }
/* GenericInserted   */ .chroma .gi { color:       #224e24; color: var(--code-generic-inserted);   }
/* GenericSubheading */ .chroma .gu { color:       #2d4958; color: var(--code-generic-subheading); }
/* GenericStrong     */ .chroma .gs { font-weight: 700;    }
/* GenericEmph       */ .chroma .ge { font-style:  italic; }

.chroma .gi { background-color: #e6ffed; padding: 0.25rem 0; }
.chroma .gd { background-color: #ffebe9; padding: 0.25rem 0; }

:root {
  --code-keyword:             #4f4f59;
  --code-keyword-constant:    #07518d;
  --code-keyword-declaration: var(--code-keyword);
  --code-keyword-namespace:   var(--code-keyword);
  --code-keyword-pseudo:      var(--code-keyword);
  --code-keyword-reserved:    var(--code-keyword);
  --code-keyword-type:        #36590d;
}

/* Keyword            */ .chroma .k  { color: #4f4f59; color: var(--code-keyword);     }
/* KeywordConstant    */ .chroma .kc { color: #07518d; color: var(--code-keyword-constant);    }
/* KeywordDeclaration */ .chroma .kd { color: #4f4f59; color: var(--code-keyword-declaration); }
/* KeywordNamespace   */ .chroma .kn { color: #4f4f59; color: var(--code-keyword-namespace);   }
/* KeywordPseudo      */ .chroma .kp { color: #4f4f59; color: var(--code-keyword-pseudo);      }
/* KeywordReserved    */ .chroma .kr { color: #4f4f59; color: var(--code-keyword-reserved);    }
/* KeywordType        */ .chroma .kt { color: #36590d; color: var(--code-keyword-type);        }

:root {
  --code-literal:                     #744601;
  --code-literal-date:                var(--code-literal);
  --code-literal-number:              var(--code-literal);
  --code-literal-number-bin:          var(--code-literal);
  --code-literal-number-float:        var(--code-literal);
  --code-literal-number-hex:          var(--code-literal);
  --code-literal-number-integer:      var(--code-literal);
  --code-literal-number-integer-long: var(--code-literal);
  --code-literal-number-oct:          var(--code-literal);
  --code-literal-string:              #664d00;
  --code-literal-string-affix:        #664d00;
  --code-literal-string-backtick:     #664d00;
  --code-literal-string-char:         #664d00;
  --code-literal-string-delimiter:    #664d00;
  --code-literal-string-doc:          #4f4f59;
  --code-literal-string-double:       #664d00;
  --code-literal-string-escape:       #664d00;
  --code-literal-string-heredoc:      #664d00;
  --code-literal-string-interpol:     #664d00;
  --code-literal-string-other:        #664d00;
  --code-literal-string-regex:        #942e51;
  --code-literal-string-single:       #664d00;
  --code-literal-string-symbol:       #664d00;
}

/* Literal                  */ .chroma .l  { color: #744601; color: var(--code-literal);                     }
/* LiteralDate              */ .chroma .ld { color: #744601; color: var(--code-literal-date);                }
/* LiteralNumber            */ .chroma .m  { color: #744601; color: var(--code-literal-number);              }
/* LiteralNumberBin         */ .chroma .mb { color: #744601; color: var(--code-literal-number-bin);          }
/* LiteralNumberFloat       */ .chroma .mf { color: #744601; color: var(--code-literal-number-float);        }
/* LiteralNumberHex         */ .chroma .mh { color: #744601; color: var(--code-literal-number-hex);          }
/* LiteralNumberInteger     */ .chroma .mi { color: #744601; color: var(--code-literal-number-integer);      }
/* LiteralNumberIntegerLong */ .chroma .il { color: #744601; color: var(--code-literal-number-integer-long); }
/* LiteralNumberOct         */ .chroma .mo { color: #744601; color: var(--code-literal-number-oct);          }
/* LiteralString            */ .chroma .s  { color: #664d00; color: var(--code-literal-string);              }
/* LiteralStringAffix       */ .chroma .sa { color: #664d00; color: var(--code-literal-string-affix);        }
/* LiteralStringBacktick    */ .chroma .sb { color: #664d00; color: var(--code-literal-string-backtick);     }
/* LiteralStringChar        */ .chroma .sc { color: #664d00; color: var(--code-literal-string-char);         }
/* LiteralStringDelimiter   */ .chroma .dl { color: #664d00; color: var(--code-literal-string-delimiter);    }
/* LiteralStringDoc         */ .chroma .sd { color: #4f4f59; color: var(--code-literal-string-doc);          }
/* LiteralStringDouble      */ .chroma .s2 { color: #664d00; color: var(--code-literal-string-double);       }
/* LiteralStringEscape      */ .chroma .se { color: #664d00; color: var(--code-literal-string-escape);       }
/* LiteralStringHeredoc     */ .chroma .sh { color: #664d00; color: var(--code-literal-string-heredoc);      }
/* LiteralStringInterpol    */ .chroma .si { color: #664d00; color: var(--code-literal-string-interpol);     }
/* LiteralStringOther       */ .chroma .sx { color: #664d00; color: var(--code-literal-string-other);        }
/* LiteralStringRegex       */ .chroma .sr { color: #942e51; color: var(--code-literal-string-regex);        }
/* LiteralStringSingle      */ .chroma .s1 { color: #664d00; color: var(--code-literal-string-single);       }
/* LiteralStringSymbol      */ .chroma .ss { color: #664d00; color: var(--code-literal-string-symbol);       }

:root {
  --code-name:           #6d2caa;
  --code-name-attribute: #6d2caa;
  --code-name-builtin:   #222222;
  --code-name-class:     var(--code-name);
  --code-name-constant:  var(--code-name);
  --code-name-decorator: var(--code-name);
  --code-name-exception: var(--code-name);
  --code-name-function:  var(--code-name);
  --code-name-other:     var(--code-name);
  --code-name-tag:       var(--code-name);
  --code-name-variable:  #005194;
}

/* Name          */ .chroma .n  { color: #6d2caa; color: var(--code-name);           }
/* NameAttribute */ .chroma .na { color: #6d2caa; color: var(--code-name-attribute); }
/* NameBuiltin   */ .chroma .nb { color: #222222; color: var(--code-name-builtin);   }
/* NameClass     */ .chroma .nc { color: #6d2caa; color: var(--code-name-class);     }
/* NameConstant  */ .chroma .no { color: #6d2caa; color: var(--code-name-constant);  }
/* NameDecorator */ .chroma .nd { color: #6d2caa; color: var(--code-name-decorator); }
/* NameException */ .chroma .ne { color: #6d2caa; color: var(--code-name-exception); }
/* NameFunction  */ .chroma .nf { color: #6d2caa; color: var(--code-name-function);  }
/* NameOther     */ .chroma .nx { color: #6d2caa; color: var(--code-name-other);     }
/* NameTag       */ .chroma .nt { color: #6d2caa; color: var(--code-name-tag);       }
/* NameVariable  */ .chroma .nv { color: #005194; color: var(--code-name-variable);  }

:root {
  --code-operator:      #4f4f59;
  --code-operator-word: var(--code-operator);
}

/* Operator     */ .chroma .o  { color: #4f4f59; color: var(--code-operator);      }
/* OperatorWord */ .chroma .ow { color: #4f4f59; color: var(--code-operator-word); }

:root {
  --code-punctuation: #4f4f4f;
}

/* Punctuation */ .chroma .p { color: #4f4f4f; color: var(--code-punctuation); }