@font-face {
  font-family: 'JetBrains Mono';
  src: url("../fonts/jetbrains-mono-latin-400.b636a65da4f0.woff2") format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url("../fonts/jetbrains-mono-latin-700.b636a65da4f0.woff2") format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/* Table of Contents */
#toc-nav ul { list-style: none; margin: 0; padding: 0; }
#toc-nav li a {
  display: block;
  padding: .25rem 0;
  font-size: .78rem;
  color: #6c757d;
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: .6rem;
  transition: color .15s, border-color .15s;
  line-height: 1.4;
}
#toc-nav li a:hover,
#toc-nav li a.toc-active {
  color: var(--s99-accent);
  border-left-color: var(--s99-accent);
}
#toc-nav li.toc-h3 a { padding-left: 1.2rem; font-size: .73rem; }
#toc-nav li.toc-h4 a { padding-left: 1.8rem; font-size: .7rem; }
[data-bs-theme="dark"] #toc-nav li a { color: #8b949e; }

/* Code block wrapper */
article.post-content pre {
  --code-accent: #6e7681;
  --code-collapse-height: calc(14 * 1em + 1rem);
  padding: 0 !important;
  border: 1px solid #d0d7de;
  border-radius: .5rem;
  overflow: hidden;
  box-shadow: inset 3px 0 0 var(--code-accent);
  position: relative;
}
article.post-content pre[data-code-lang="bash"] { --code-accent: #3fb950; }
article.post-content pre[data-code-lang="python"] { --code-accent: #3572a5; }
article.post-content pre[data-code-lang="html"],
article.post-content pre[data-code-lang="xml"],
article.post-content pre[data-code-lang="django"] { --code-accent: #e34c26; }
article.post-content pre[data-code-lang="javascript"],
article.post-content pre[data-code-lang="jsx"] { --code-accent: #b58900; }
article.post-content pre[data-code-lang="typescript"],
article.post-content pre[data-code-lang="tsx"] { --code-accent: #3178c6; }
article.post-content pre[data-code-lang="yaml"] { --code-accent: #d97706; }
article.post-content pre[data-code-lang="sql"] { --code-accent: #9333ea; }

/* Toolbar bar across the top */
.hljs-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .4rem .85rem;
  background: #f6f8fa;
  border-bottom: 1px solid #d0d7de;
}
.hljs-lang {
  font-size: .7rem;
  font-family: 'JetBrains Mono','Cascadia Code','Fira Code','Consolas',monospace;
  color: var(--code-accent);
  letter-spacing: .07em;
  font-weight: 700;
  text-transform: uppercase;
}
.hljs-copy {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .7rem;
  font-family: 'JetBrains Mono','Cascadia Code','Fira Code','Consolas',monospace;
  background: #fff;
  border: 1px solid #d0d7de;
  color: #57606a;
  padding: .15rem .55rem;
  border-radius: .25rem;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.hljs-copy:hover {
  color: var(--code-accent);
  border-color: var(--code-accent);
}

article.post-content pre.shiki {
  background: #fff;
}
article.post-content pre.shiki code {
  display: block;
  padding: .35rem .75rem;
  font-size: .83rem;
  line-height: 1;
  border-radius: 0;
  overflow-x: auto;
  font-family: 'JetBrains Mono','Cascadia Code','Fira Code','Consolas',monospace;
}
article.post-content pre code.code-lines {
  counter-reset: code-line;
}
article.post-content pre .code-line {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  column-gap: .6rem;
  align-items: start;
  min-height: 0;
  line-height: 1;
  white-space: pre;
}
article.post-content pre .code-line::before {
  counter-increment: code-line;
  content: counter(code-line);
  display: block;
  color: #8b949e;
  text-align: right;
  user-select: none;
  opacity: .72;
  line-height: 1;
}
article.post-content pre .code-line__content {
  display: block;
  min-width: 0;
  line-height: 1;
}
article.post-content pre.code-collapsed code {
  max-height: var(--code-collapse-height);
  overflow: hidden auto;
}
article.post-content pre.code-collapsed::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4.5rem;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.96));
}
.code-expand {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: .7rem 0 1.1rem;
  padding: .28rem .75rem;
  font-size: .76rem;
  font-family: 'JetBrains Mono','Cascadia Code','Fira Code','Consolas',monospace;
  color: var(--code-accent);
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.code-expand:hover {
  background: rgba(63,185,80,.08);
}

[data-bs-theme="dark"] article.post-content pre {
  border-color: #30363d;
}
[data-bs-theme="dark"] article.post-content pre .code-line::before {
  color: #6e7681;
}
[data-bs-theme="dark"] .hljs-toolbar {
  background: #161b22;
  border-bottom-color: #30363d;
}
[data-bs-theme="dark"] .hljs-copy {
  background: transparent;
  border-color: #30363d;
  color: #8b949e;
}
[data-bs-theme="dark"] .hljs-copy:hover {
  color: var(--code-accent);
  border-color: var(--code-accent);
}
[data-bs-theme="dark"] article.post-content pre.shiki,
[data-bs-theme="dark"] article.post-content pre.shiki span {
  color: var(--shiki-dark) !important;
  background-color: var(--shiki-dark-bg) !important;
  font-style: var(--shiki-dark-font-style) !important;
  font-weight: var(--shiki-dark-font-weight) !important;
  text-decoration: var(--shiki-dark-text-decoration) !important;
}
[data-bs-theme="dark"] article.post-content pre.code-collapsed::after {
  background: linear-gradient(to bottom, rgba(11,18,32,0), rgba(11,18,32,.97));
}
[data-bs-theme="dark"] .code-expand:hover {
  background: rgba(63,185,80,.12);
}