/* Sized/backgrounded on the bare selector (not just `.hljs`) so the box's
   dimensions are already correct on first paint, before the highlight.js
   script runs and adds the `hljs` class — otherwise that class swap changes
   the block's padding/background and visibly shifts everything below it. */
pre code { display: block; padding: 1.5em 1.75em; border-radius: 10px; overflow-x: auto; background:#0d0d0d; color:#ececec; }
.hljs { background:#0d0d0d; color:#ececec; }

/* Line numbers render as a <table>; global.css's generic `table` reset
   (display: inline-block, width: 100%, overflow-x: auto) is meant for
   content tables, not this one — override it back to a plain table so it
   doesn't misalign or poke borders out past the rounded code block.

   All .hljs-ln* rules below are scoped under .hljs (their always-present
   parent) rather than written bare. The highlightjs-line-numbers.js plugin
   injects its own baseline <style> tag (e.g. bare `.hljs-ln td { padding: 0 }`)
   into the DOM at runtime, after this stylesheet has already loaded. With a
   bare selector, that gives it equal specificity to ours and — since it
   loads later — it wins the tie and silently overrides these rules. Scoping
   under .hljs bumps our specificity above the plugin's bare selectors so
   ours always win, regardless of injection timing. */
.hljs .hljs-ln {
  display: table;
  width: 100%;
  overflow: visible;
  border-collapse: collapse;
  border-spacing: 0;
}
.hljs-comment,.hljs-quote { color:#ffffff70; }
.hljs-keyword,.hljs-selector-tag { color:#4080ff; }
.hljs-string,.hljs-symbol,.hljs-params { color:#03a354; }
.hljs-number,.hljs-literal { color:#2392ba; }
.hljs-built_in,.hljs-title,.hljs-title.function_,.hljs-section { color:#916bff; }
.hljs-variable,.hljs-template-variable,.hljs-attr,.hljs-attribute { color:#ac8601; }
.hljs-operator { color:#ed4b00; }
.hljs-type,.hljs-selector-id,.hljs-selector-class,.hljs-class .hljs-title { color:#ff00a8; }
.hljs-deletion,.hljs-regexp { color:#e80d2f; }

/* line numbers */
.hljs .hljs-ln-numbers {
  text-align: right; vertical-align: top;
  padding-right: 1em; padding-left: .25em;
  color: #ffffff45;
  border-right: 1px solid #ffffff14;
  user-select: none; -webkit-user-select: none;   /* not copied when selecting code */
}
.hljs .hljs-ln-code { padding-left: 1em; }