@layer overrides {

  .hljs { color: var(--foreground); }
  .hljs-comment, .hljs-punctuation, .hljs-meta { color: var(--muted-foreground); }
  .hljs-keyword, .hljs-selector-tag, .hljs-built_in { color: var(--destructive); font-weight: 600; }
  .hljs-string, .hljs-attr { color: var(--chart-2); }
  .hljs-number, .hljs-literal, .hljs-type, .hljs-class,
  .hljs-symbol, .hljs-bullet, .hljs-link { color: var(--chart-2); }
  .hljs-title, .hljs-function, .hljs-attribute { color: var(--chart-3); font-weight: 600; }
  .hljs-variable, .hljs-template-variable { color: var(--chart-4); }
  .hljs-tag, .hljs-name { color: var(--chart-1); font-weight: 600; }
  .hljs-deletion {
    color: var(--destructive);
    background-color: color-mix(in oklab, var(--destructive) 12%, transparent);
  }
  .hljs-addition {
    color: var(--chart-1);
    background-color: color-mix(in oklab, var(--chart-1) 12%, transparent);
  }
}