@font-face {
  font-family: Source Code Pro;
  src: url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap");
}

/* Marker: if you don't see this comment in DevTools Sources, the browser is using a cached/old stylesheet. */
pre {
  position: relative;
}
pre::after {
  content: attr(data-ke-language);
  position: absolute;
  bottom: 6px;
  right: 12px;
  color: #cfd2d1;
  font-size: 12px;
}
.hljs {
  /* Theme tokens (defaults are dark; light/dark override blocks set these variables) */
  --cb-bg: #2d3440;
  --cb-fg: #cfd2d1;
  --cb-header-bg: #2d3440;
  --cb-hover-bg: #262830;
  --cb-line-number: #747a7a;
  --cb-copy-bg: #ffffff17;
  --cb-copy-fg: #ffffff;
  --cb-copy-hover-bg: #ffffff30;
  --cb-scroll-thumb: rgb(60, 64, 75);

  display: flex !important;
  flex-direction: column;
  padding: 0 !important;
  font-size: 14px;
  border-radius: 8px;
  box-shadow: 0 12px 24px rgb(0 0 0 / 40%);
  color: var(--cb-fg);
  background-color: var(--cb-bg);
  font-family: "Source Code Pro", monospace;
}
.hljs .line {
  counter-increment: line-idx;
  line-height: 1.8;
  white-space: pre;
  padding-right: 5px;
  min-width: 100% !important;
}
.hljs .line:hover {
  background-color: var(--cb-hover-bg);
}
.hljs .line:hover::before {
  color: var(--cb-fg);
}
.hljs .line::before {
  content: counter(line-idx);
  width: 24px;
  display: inline-block;
  text-align: right;
  margin-right: 16px;
  font-size: 0.8rem;
  color: var(--cb-line-number);
}
.hljs .code-header {
  display: flex;
  align-items: center;
  padding: 8px 10px 8px 14px;
  /* Header background color (fixed across light/dark by setting --cb-header-bg) */
  background-color: var(--cb-header-bg);
  border-radius: 8px 8px 0 0;
}
.hljs .code-header .btn {
  border-radius: 50%;
  width: 12px;
  height: 12px;
  margin: 0 4px;
}
.hljs .code-header .btn.red {
  background-color: #f5655b;
}
.hljs .code-header .btn.yellow {
  background-color: #f6bd3b;
}
.hljs .code-header .btn.green {
  background-color: #43c645;
}
.hljs .code-body {
  max-height: 600px;
  margin: 20px 8px 25px 8px;
  overflow: auto;
  /* Body background (matches line area) */
  background-color: var(--cb-bg);
}
.hljs .code-body::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.hljs .code-body::-webkit-scrollbar-thumb {
  background-color: var(--cb-scroll-thumb);
}
.hljs .code-body::-webkit-scrollbar-track-piece {
  background-color: transparent;
}
.hljs .code-body::-webkit-scrollbar-corner {
  display: none;
}
.hljs .copy-btn {
  background-color: var(--cb-copy-bg);
  border: none;
  cursor: pointer;
  color: var(--cb-copy-fg);
  border-radius: 4px;
  width: 36px;
  height: 28px;
  margin-left: auto;
  transition: 0.2s background-color;
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hljs .copy-btn:hover {
  background-color: var(--cb-copy-hover-bg);
}

/* ============================================================
   Site integration (moved from style.css)
   - Ensures `.hljs` has a REAL computed background color (not transparent)
   - Keeps wrapper/body/lines visually consistent
   ============================================================ */

#article .contents_style pre code {
  border-radius: 0.375rem;
  padding: 1rem;
  font-size: 0.875rem;
  line-height: 1.625;
}

/* Light mode defaults for the wrapper */
#article .contents_style pre code.hljs {
  /* Use CSS variables so descendants can stay consistent without duplicating colors. */
  --cb-bg: rgb(244 244 246 / 1);
  --cb-fg: rgb(53 54 56 / 1);
  --cb-line-number: rgb(153 153 161 / 1);

  background-color: var(--cb-bg) !important;
  color: var(--cb-fg) !important;
}

/* Dark mode defaults for the wrapper */
.dark #article .contents_style pre code.hljs {
  --cb-bg: rgb(41 42 45 / 1);
  --cb-fg: rgb(230 230 233 / 1);
  --cb-line-number: rgb(75 82 99 / 1);

  background-color: var(--cb-bg) !important;
  color: var(--cb-fg) !important;
}

/* ============================================================
   Light/Dark mode overrides + syntax colors
   - Light mode: comments green
   - Dark mode: comments yellow
   ============================================================ */

/* Light mode (when .dark is NOT on html) */
html:not(.dark) pre::after {
  color: #6e7781;
}

html:not(.dark) .hljs {
  --cb-bg: #fafafa;
  --cb-fg: #24292f;
  --cb-header-bg: #2d3440;
  --cb-hover-bg: rgba(0, 0, 0, 0.04);
  --cb-line-number: #8c959f;
  --cb-copy-bg: rgba(0, 0, 0, 0.06);
  --cb-copy-fg: rgba(0, 0, 0, 0.80);
  --cb-copy-hover-bg: rgba(0, 0, 0, 0.10);
  --cb-scroll-thumb: rgba(0, 0, 0, 0.22);
}

/* Dark mode (when .dark exists) */
.dark pre::after {
  color: #cfd2d1;
}

.dark .hljs {
  --cb-bg: #2d3440;
  --cb-fg: #cfd2d1;
  --cb-header-bg: #2d3440;
  --cb-hover-bg: #262830;
  --cb-line-number: #747a7a;
  --cb-copy-bg: #ffffff17;
  --cb-copy-fg: #ffffff;
  --cb-copy-hover-bg: #ffffff30;
  --cb-scroll-thumb: rgb(60, 64, 75);
}

/* Syntax colors (override highlight.js theme) */

/* Comments */
html:not(.dark) pre code.hljs .hljs-comment,
html:not(.dark) pre code.hljs .hljs-comment * {
  color: #22863a !important; /* green */
  font-style: italic !important;
}

.dark pre code.hljs .hljs-comment,
.dark pre code.hljs .hljs-comment * {
  color: #ffff00 !important; /* yellow */
  font-style: italic !important;
}

/* Keywords / tags */
html:not(.dark) pre code.hljs .hljs-keyword,
html:not(.dark) pre code.hljs .hljs-selector-tag,
html:not(.dark) pre code.hljs .hljs-doctag {
  color: #cf222e !important;
}

.dark pre code.hljs .hljs-keyword,
.dark pre code.hljs .hljs-selector-tag,
.dark pre code.hljs .hljs-doctag {
  color: #c678dd !important;
}

/* Strings */
html:not(.dark) pre code.hljs .hljs-string,
html:not(.dark) pre code.hljs .hljs-regexp {
  color: #0a3069 !important;
}
.dark pre code.hljs .hljs-string,
.dark pre code.hljs .hljs-regexp {
  color: #98c379 !important;
}

/* Numbers / literals */
html:not(.dark) pre code.hljs .hljs-number,
html:not(.dark) pre code.hljs .hljs-literal,
html:not(.dark) pre code.hljs .hljs-literal {
  color: #0550ae !important;
}
.dark pre code.hljs .hljs-number,
.dark pre code.hljs .hljs-literal {
  color: #d19a66 !important;
}

/* Titles / functions / sections */
html:not(.dark) pre code.hljs .hljs-title,
html:not(.dark) pre code.hljs .hljs-function,
html:not(.dark) pre code.hljs .hljs-section,
html:not(.dark) pre code.hljs .hljs-section {
  color: #8250df !important;
}
.dark pre code.hljs .hljs-title,
.dark pre code.hljs .hljs-function,
.dark pre code.hljs .hljs-section {
  color: #61afef !important;
}

/* Properties / attributes */
html:not(.dark) pre code.hljs .hljs-attr,
html:not(.dark) pre code.hljs .hljs-attribute,
html:not(.dark) pre code.hljs .hljs-property {
  color: #bc4c00 !important;
}
.dark pre code.hljs .hljs-attr,
.dark pre code.hljs .hljs-attribute,
.dark pre code.hljs .hljs-property,
.dark pre code.hljs .hljs-symbol {
  /* Dark mode: boost token contrast for field/attribute-like names. */
  color: rgb(93 176 215 / 1) !important;
}