/* Syntax colours of the code view. Generated by scripts/chroma-css.go from
   chroma's token classes; the colours are the --syn-* properties of
   00-tokens.css (the Despair hues, dark and light), none is defined here. */
@layer components {
  .chroma { color: var(--syn-plain); }
  .chroma .c { color: var(--syn-comment); font-style: italic }
  .chroma .c1 { color: var(--syn-comment); font-style: italic }
  .chroma .ch { color: var(--syn-comment); font-style: italic }
  .chroma .cm { color: var(--syn-comment); font-style: italic }
  .chroma .cs { color: var(--syn-comment); font-style: italic }
  .chroma .dl { color: var(--syn-string); font-style: italic }
  .chroma .k { color: var(--syn-keyword); font-weight: bold }
  .chroma .kc { color: var(--syn-keyword); font-weight: bold }
  .chroma .kd { color: var(--syn-keyword); font-weight: bold }
  .chroma .kn { color: var(--syn-keyword); font-weight: bold }
  .chroma .kr { color: var(--syn-keyword); font-weight: bold }
  .chroma .nc { color: var(--syn-type); font-weight: bold }
  .chroma .ne { color: var(--syn-type); font-weight: bold }
  .chroma .nn { color: var(--syn-type); font-weight: bold }
  .chroma .ow { color: var(--syn-punct); font-weight: bold }
  .chroma .s { color: var(--syn-string); font-style: italic }
  .chroma .s1 { color: var(--syn-string); font-style: italic }
  .chroma .s2 { color: var(--syn-string); font-style: italic }
  .chroma .sa { color: var(--syn-string); font-style: italic }
  .chroma .sb { color: var(--syn-string); font-style: italic }
  .chroma .sc { color: var(--syn-string); font-style: italic }
  .chroma .sd { color: var(--syn-string); font-style: italic }
  .chroma .se { color: var(--syn-string); font-weight: bold; font-style: italic }
  .chroma .sh { color: var(--syn-string); font-style: italic }
  .chroma .si { color: var(--syn-string); font-weight: bold; font-style: italic }
  .chroma .sr { color: var(--syn-string); font-style: italic }
  .chroma .ss { color: var(--syn-string); font-style: italic }
  .chroma .sx { color: var(--syn-string); font-style: italic }
  .chroma .line { display: block; }

  /* an invisible character in code, shown instead of applied (Trojan Source) */
  .chroma .ctl {
    color: var(--red); font-weight: bold; font-style: normal; font-size: var(--fs-s);
    outline: 1px solid var(--red); outline-offset: -1px; padding: 0 .25ch;
  }
  .img-view { margin-top: var(--lh); & img { max-width: 100%; height: auto; } }
}