/* ── Color tokens ────────────────────────────────────────── */
:root {
  /* surfaces */
  --bg: #000000;
  --s0: #050507;
  --s1: #0a0a0f;
  --s2: #111118;
  --s3: #18181f;

  /* borders */
  --b0: #161620;
  --b1: #21212e;
  --b2: #2e2e40;

  /* text */
  --t0: #eeeef5;
  --t1: #9898b0;
  --t2: #b2b2cdd4;

  /* accent */
  --ac: #00d9c4;
  --ac-dim: rgba(0, 217, 196, 0.08);
  --ac-glow: rgba(0, 217, 196, 0.18);
  --ac2: #7b6ef6;
  --ac2-dim: rgba(123, 110, 246, 0.1);

  /* link */
  --lk: #5ea0fb;
  --lk-h: #93c5ff;

  /* font */
  --mono: "Fira Code", "Cascadia Code", "JetBrains Mono", monospace;

  /* transitions */
  --t-fast: 120ms ease;
  --t-med: 200ms ease;
  --t-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Self-hosted Fira Code ───────────────────────────────── */
@font-face {
  font-display: swap;
  font-family: "Fira Code";
  font-style: normal;
  font-weight: 300;
  src: url("fonts/fira-code-v27-latin-300.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Fira Code";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/fira-code-v27-latin-regular.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Fira Code";
  font-style: normal;
  font-weight: 500;
  src: url("fonts/fira-code-v27-latin-500.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Fira Code";
  font-style: normal;
  font-weight: 600;
  src: url("fonts/fira-code-v27-latin-600.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Fira Code";
  font-style: normal;
  font-weight: 700;
  src: url("fonts/fira-code-v27-latin-700.woff2") format("woff2");
}

/* ── Base reset / global ─────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--mono) !important;
  font-size: 14px;
  line-height: 1.75;
  background: var(--bg) !important;
  color: var(--t1) !important;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
  font-family: var(--mono) !important;
  background: var(--bg) !important;
  color: var(--t1) !important;
  min-height: 100vh;
}

/* Dot-grid texture */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.03) 1px,
    transparent 1px
  );
  background-size: 28px 28px;
}

/* Slim dark scrollbar */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--b1);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--b2);
}

/* ── Typography — apply monospace everywhere ─────────────── */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
td,
th,
label,
input,
select,
textarea,
button,
.navbar,
.nav-link,
.navbar-title,
.navbar-brand,
.sidebar-link,
.toc-active a,
.card,
.card-body,
.card-title,
.card-subtitle,
.listing-title,
.listing-subtitle,
.listing-date,
.listing-category,
.quarto-category,
.quarto-title-meta,
.quarto-title-meta-heading,
.quarto-title-meta-contents {
  font-family: var(--mono) !important;
}

/* ── Links ───────────────────────────────────────────────── */
a {
  color: var(--lk);
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover {
  color: var(--lk-h);
}

/* ══════════════════════════════════════════════════════════
   NAVBAR  (Quarto's #quarto-header / .navbar)
   ══════════════════════════════════════════════════════════ */
#quarto-header,
.navbar {
  background: rgba(0, 0, 0, 0.88) !important;
  border-bottom: 1px solid var(--b0) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  position: relative;
  padding-top: 0rem !important;
  padding-bottom: 0.25rem !important;
}

/* teal glow accent line below navbar */
#quarto-header::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--ac-glow) 30%,
    var(--ac2-dim) 70%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

.navbar-brand,
.navbar-title {
  font-family: var(--mono) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--t0) !important;
}
.navbar-brand::before {
  content: ">_ ";
  color: var(--ac);
}
.navbar-brand:hover,
.navbar-title:hover {
  color: var(--ac) !important;
}

.nav-link,
.navbar-nav .nav-link {
  font-family: var(--mono) !important;
  font-size: 12px !important;
  color: var(--t1) !important;
  letter-spacing: 0.04em !important;
  transition: color var(--t-fast) !important;
}
.nav-link:hover,
.navbar-nav .nav-link:hover {
  color: var(--ac) !important;
}

/* search icon */
#quarto-search .aa-DetachedSearchButton,
#quarto-search button {
  color: var(--t2) !important;
  background: transparent !important;
  border-color: var(--b1) !important;
}
#quarto-search .aa-DetachedSearchButton:hover,
#quarto-search button:hover {
  color: var(--ac) !important;
  border-color: var(--b2) !important;
}

/* ── Search panel ─────────────────────────────────────────── */
.aa-Panel,
.quarto-search-results {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 6px !important;
  font-family: var(--mono) !important;
  color: var(--t0) !important;
}

/* ══════════════════════════════════════════════════════════
   SIDEBAR / TOC  (#quarto-sidebar, #TOC)
   ══════════════════════════════════════════════════════════ */
#quarto-sidebar,
.sidebar.sidebar-navigation {
  background: var(--s0) !important;
  border-right: 1px solid var(--b0) !important;
  font-family: var(--mono) !important;
}

/* TOC title */
#quarto-sidebar .sidebar-title,
.sidebar-title,
#TOC > ul > li > a.active,
nav#TOC > p {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--ac) !important;
}

/* TOC heading label */
.sidebar-navigation .sidebar-section-item > a,
.sidebar-navigation .sidebar-item > a {
  font-size: 12px !important;
  color: var(--t1) !important;
  transition:
    color var(--t-fast),
    background var(--t-fast) !important;
  border-left: 2px solid transparent !important;
  padding-left: 10px !important;
}
.sidebar-navigation .sidebar-section-item > a:hover,
.sidebar-navigation .sidebar-item > a:hover {
  color: var(--t0) !important;
  background: var(--s2) !important;
  border-left-color: var(--b2) !important;
}

/* TOC links (left TOC on posts) */
#TOC .nav-link {
  font-size: 12px !important;
  color: var(--t1) !important;
  border-left: 2px solid transparent !important;
  padding: 4px 8px 4px 12px !important;
  margin: 1px 0 !important;
  border-radius: 0 !important;
  transition:
    color var(--t-fast),
    background var(--t-fast),
    border-color var(--t-fast) !important;
}
#TOC .nav-link:hover {
  color: var(--t0) !important;
  background: var(--s2) !important;
  border-left-color: var(--b2) !important;
}
#TOC .nav-link.active {
  color: var(--ac) !important;
  border-left-color: var(--ac) !important;
  background: var(--ac-dim) !important;
}

/* margin sidebar (categories on listing page) */
#quarto-margin-sidebar {
  background: var(--s0) !important;
  border-right: 1px solid var(--b0) !important;
  font-family: var(--mono) !important;
}

.quarto-listing-category-title {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--ac) !important;
}

.quarto-listing-category .category {
  font-size: 12px !important;
  color: var(--t1) !important;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 3px;
  transition:
    color var(--t-fast),
    background var(--t-fast);
  border-left: 2px solid transparent;
}
.quarto-listing-category .category:hover {
  color: var(--t0) !important;
  background: var(--s2) !important;
  border-left-color: var(--b2) !important;
}
.quarto-listing-category .category.active {
  color: var(--ac) !important;
  background: var(--ac-dim) !important;
  border-left-color: var(--ac) !important;
}

.quarto-category-count {
  color: var(--t2) !important;
  font-size: 10px !important;
}

/* hide glass overlay */
#quarto-sidebar-glass {
  display: none;
}

/* ══════════════════════════════════════════════════════════
   TITLE BLOCK BANNER  (.quarto-title-banner)
   ══════════════════════════════════════════════════════════ */
.quarto-title-banner {
  background:
    linear-gradient(135deg, var(--ac-dim) 0%, transparent 50%),
    linear-gradient(225deg, var(--ac2-dim) 0%, transparent 60%), var(--s0) !important;
  border-bottom: 1px solid var(--b0) !important;
  position: relative;
  overflow: hidden;
  padding: 48px 0 36px !important;
}

/* ambient glow blob */
.quarto-title-banner::before {
  content: "";
  position: absolute;
  top: -60px;
  left: -40px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: var(--ac-glow);
  filter: blur(80px);
  pointer-events: none;
  opacity: 0.5;
  z-index: 0;
}

.quarto-title-banner .quarto-title {
  position: relative;
  z-index: 1;
}

.quarto-title-banner h1.title {
  font-family: var(--mono) !important;
  font-size: clamp(20px, 4vw, 30px) !important;
  font-weight: 700 !important;
  color: var(--t0) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
  margin-bottom: 10px !important;
}

.quarto-title-banner .subtitle.lead {
  font-family: var(--mono) !important;
  font-size: 13px !important;
  color: var(--t1) !important;
  line-height: 1.7 !important;
  font-style: normal !important;
}

/* Category chips in banner */
.quarto-title-banner .quarto-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.quarto-title-banner .quarto-category {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.05em !important;
  padding: 3px 10px !important;
  border-radius: 3px !important;
  color: var(--ac) !important;
  border: 1px solid rgba(0, 217, 196, 0.2) !important;
  background: var(--ac-dim) !important;
}

/* Title meta (Author, Date, Modified) */
.quarto-title-meta {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  color: var(--t2) !important;
}
.quarto-title-meta-heading {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--t2) !important;
}
.quarto-title-meta-contents,
.quarto-title-meta-contents p,
.quarto-title-meta-contents .date,
.quarto-title-meta-contents .date-modified {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  color: var(--t1) !important;
}

/* ══════════════════════════════════════════════════════════
   MAIN CONTENT AREA
   ══════════════════════════════════════════════════════════ */
#quarto-document-content,
.quarto-container,
main.content {
  background: transparent !important;
}

/* ── Headings ─────────────────────────────────────────────── */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--mono) !important;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* h1 in post body */
main.content h1 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--t0) !important;
  margin: 40px 0 14px !important;
}

/* h2 — teal left border + dark background  */
main.content h2 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--t0) !important;
  padding: 10px 14px !important;
  background: var(--s1) !important;
  border: 1px solid var(--b0) !important;
  border-left: 3px solid var(--ac) !important;
  border-radius: 0 5px 5px 0 !important;
  margin: 40px 0 18px !important;
}
/* remove the default anchor decoration on h2 */
main.content h2 .anchorjs-link {
  color: var(--t2) !important;
}

/* h3 — teal color */
main.content h3 {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--ac) !important;
  margin: 32px 0 12px !important;
}

main.content h4 {
  font-size: 13px !important;
  color: var(--t1) !important;
}
main.content h5,
main.content h6 {
  font-size: 12px !important;
  color: var(--t2) !important;
}

/* ── Paragraphs ──────────────────────────────────────────── */
main.content p {
  margin: 14px 0 !important;
  color: var(--t1) !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
}

/* ── Lists ───────────────────────────────────────────────── */
main.content ul,
main.content ol {
  padding-left: 20px;
  margin: 14px 0;
}
main.content li {
  margin: 5px 0;
  color: var(--t1) !important;
  font-size: 14px !important;
}
main.content ul li::marker {
  color: var(--ac);
  content: "▸  ";
}
main.content ol li::marker {
  color: var(--ac);
  font-weight: 700;
}

/* ── Strong / Em ─────────────────────────────────────────── */
main.content strong {
  color: var(--t0) !important;
  font-weight: 700 !important;
}
main.content em {
  color: var(--t1) !important;
}

/* ── HR ──────────────────────────────────────────────────── */
main.content hr {
  border: none !important;
  border-top: 1px solid var(--b0) !important;
  margin: 36px 0 !important;
  position: relative;
}
main.content hr::after {
  content: "◆";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg);
  padding: 0 10px;
  font-size: 8px;
  color: var(--b2);
}

/* ── Inline code ─────────────────────────────────────────── */
main.content code,
p code,
li code {
  font-family: var(--mono) !important;
  font-size: 12px !important;
  color: var(--ac) !important;
  background: var(--s2) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 3px !important;
  padding: 1px 6px !important;
}

/* ── Code blocks ─────────────────────────────────────────── */
.sourceCode,
div.sourceCode,
pre.sourceCode {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 10px !important;
  margin: 0 !important;
  overflow: hidden !important;
  position: relative;
}

div.sourceCode pre,
pre.sourceCode {
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: var(--s1) !important;
}

div.sourceCode pre::before,
pre.sourceCode::before {
  display: none;
}

div.sourceCode pre code,
pre.sourceCode code {
  font-family: var(--mono) !important;
  font-size: 12.5px !important;
  line-height: 1.75 !important;
  color: var(--t1) !important;
  background: transparent !important;
  border: none !important;
  display: block !important;
  overflow-x: auto !important;
}

/* code copy button */
.code-copy-button {
  background: var(--s2) !important;
  border: 1px solid var(--b1) !important;
  color: var(--t2) !important;
  border-radius: 4px !important;
  transition:
    color var(--t-fast),
    border-color var(--t-fast) !important;
}
.code-copy-button:hover {
  color: var(--ac) !important;
  border-color: var(--ac) !important;
}

/* code filename label */
.code-with-filename .code-with-filename-file {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  color: var(--t2) !important;
  background: var(--s2) !important;
  border: 1px solid #434350d4;
  padding: 4px 12px !important;
}

.code-with-filename {
  border: 1px solid #434350d4;
}

/* ── Blockquote ──────────────────────────────────────────── */
main.content blockquote {
  margin: 20px 0 !important;
  padding: 14px 18px !important;
  border-left: 3px solid var(--ac2) !important;
  background: var(--ac2-dim) !important;
  border-radius: 0 5px 5px 0 !important;
  color: var(--t1) !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
}
main.content blockquote p {
  margin: 0 !important;
  color: var(--t1) !important;
}

/* ── Tables ──────────────────────────────────────────────── */
main.content table {
  width: 100%;
  border-collapse: collapse;
  margin: 22px 0;
  font-size: 12.5px;
  font-family: var(--mono) !important;
}
main.content th {
  background: var(--s2) !important;
  color: var(--t0) !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 9px 14px !important;
  border: 1px solid var(--b1) !important;
}
main.content td {
  padding: 8px 14px !important;
  border: 1px solid var(--b0) !important;
  color: var(--t1) !important;
}
main.content tr:nth-child(even) td {
  background: var(--s1) !important;
}
main.content tr:hover td {
  background: var(--s2) !important;
  transition: background var(--t-fast);
}

footer table {
  font-size: 0.7rem;
  border-top: 1px solid #464659 !important;
  border-bottom: 1px solid #464659 !important;
}

/* ── Images ──────────────────────────────────────────────── */
main.content img {
  max-width: 100%;
  border-radius: 10px;
  border: 1px solid var(--b1);
  margin: 16px 0;
}

/* ── Article links ───────────────────────────────────────── */
main.content a {
  color: var(--lk) !important;
  border-bottom: 1px solid rgba(94, 160, 251, 0.25);
  transition:
    color var(--t-fast),
    border-color var(--t-fast);
}
main.content a:hover {
  color: var(--lk-h) !important;
  border-bottom-color: var(--lk-h);
}
/* but not heading anchors */
main.content h1 a,
main.content h2 a,
main.content h3 a,
main.content h4 a,
main.content h5 a,
main.content h6 a,
main.content .anchorjs-link {
  border-bottom: none !important;
}

/* ── Callouts ────────────────────────────────────────────── */
.callout {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 5px !important;
  font-family: var(--mono) !important;
}
.callout.callout-tip {
  border-left-color: var(--ac) !important;
}
.callout.callout-note {
  border-left-color: var(--lk) !important;
}
.callout.callout-warning {
  border-left-color: #f9e2af !important;
}
.callout.callout-important {
  border-left-color: #f38ba8 !important;
}

.callout-header {
  background: var(--s2) !important;
  color: var(--t1) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}
.callout-body {
  color: var(--t1) !important;
  font-size: 13px !important;
}

/* ══════════════════════════════════════════════════════════
   POST LISTING GRID  (index page)
   ══════════════════════════════════════════════════════════ */

/* 2-column grid */
.list.grid.quarto-listing-cols-3 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* cards */
.quarto-grid-item.card {
  background-color: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 10px !important;
  transition:
    border-color var(--t-med),
    background var(--t-med),
    box-shadow var(--t-med) !important;
  color: var(--t1) !important;
}
.quarto-grid-item.card:hover {
  border-color: var(--ac) !important;
  background: var(--s2) !important;
  box-shadow: 0 0 24px rgba(0, 217, 196, 0.08) !important;
  transform: none !important;
}

.quarto-grid-link {
  text-decoration: none !important;
  color: inherit !important;
}
.quarto-grid-link:hover {
  color: inherit !important;
  border-bottom: none !important;
}

.quarto-grid-item .listing-title {
  font-family: var(--mono) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--t0) !important;
  margin-bottom: 6px !important;
}

.quarto-grid-item .listing-subtitle {
  font-family: var(--mono) !important;
  font-size: 13px !important;
  color: var(--t2) !important;
  font-style: normal !important;
}

.quarto-grid-item .listing-categories {
  padding-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.quarto-grid-item .listing-category {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.05em !important;
  padding: 2px 8px !important;
  border-radius: 3px !important;
  color: var(--ac) !important;
  border: 1px solid rgba(0, 217, 196, 0.2) !important;
  background: var(--ac-dim) !important;
  cursor: pointer;
  transition:
    background var(--t-fast),
    border-color var(--t-fast);
}
.quarto-grid-item .listing-category:hover {
  background: rgba(0, 217, 196, 0.14) !important;
}

.quarto-grid-item .listing-date {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  color: var(--t2) !important;
  letter-spacing: 0.04em !important;
}

.quarto-grid-item .card-body {
  background: transparent !important;
}

/* sort / filter controls */
.quarto-listing-sort .form-select,
.quarto-listing-filter .form-control {
  font-family: var(--mono) !important;
  font-size: 12px !important;
  background: var(--s2) !important;
  border: 1px solid var(--b1) !important;
  color: var(--t1) !important;
  border-radius: 4px !important;
}
.quarto-listing-sort .form-select:focus,
.quarto-listing-filter .form-control:focus {
  border-color: var(--ac) !important;
  box-shadow: 0 0 0 2px var(--ac-dim) !important;
  outline: none !important;
}

/* filter and search icon backgrounds */
.input-group-text {
  background-color: var(--s2) !important;
  border-color: var(--b1) !important;
  color: var(--t2) !important;
}

/* ══════════════════════════════════════════════════════════
   PAGE FOOTER  (.nav-footer)
   ══════════════════════════════════════════════════════════ */
.nav-footer {
  background: var(--s0) !important;
  border-top: 1px solid var(--b0) !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  color: var(--t2) !important;
  position: relative;
  overflow: hidden;
  padding: 20px 40px !important;
}

/* teal glow line at top of footer */
.nav-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--ac-glow) 40%,
    var(--ac2-dim) 60%,
    transparent 100%
  );
  pointer-events: none;
}

.nav-footer a {
  color: var(--lk) !important;
  transition: color var(--t-fast) !important;
  border-bottom: none !important;
}
.nav-footer a:hover {
  color: var(--ac) !important;
}
.nav-footer p {
  color: var(--t2) !important;
  font-size: 11px !important;
  margin: 0 !important;
}

/* ══════════════════════════════════════════════════════════
   INDEX PAGE  (home page headings / intro text)
   ══════════════════════════════════════════════════════════ */
.column-page-left h1 {
  font-family: var(--mono) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--t0) !important;
  letter-spacing: -0.01em !important;
  margin: 32px 0 10px !important;
}
.column-page-left h1:first-child {
  margin-top: 40px !important;
}
.column-page-left > p,
.column-page-left section > p {
  color: var(--t1) !important;
  font-size: 13px !important;
  margin-bottom: 24px !important;
}

/* ══════════════════════════════════════════════════════════
   ABOUT PAGE
   ══════════════════════════════════════════════════════════ */
.about-contents {
  font-family: var(--mono) !important;
  color: var(--t1) !important;
}
.about-entity .about-name {
  font-family: var(--mono) !important;
  font-weight: 700 !important;
  color: var(--t0) !important;
}
.about-entity .about-links a {
  font-family: var(--mono) !important;
  font-size: 12px !important;
  color: var(--t1) !important;
  background: var(--s2) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 5px !important;
  transition:
    color var(--t-fast),
    border-color var(--t-fast) !important;
}
.about-entity .about-links a:hover {
  color: var(--ac) !important;
  border-color: var(--ac) !important;
  background: var(--ac-dim) !important;
}

/* ══════════════════════════════════════════════════════════
   SYNTAX HIGHLIGHTING  (Quarto's token spans)
   ══════════════════════════════════════════════════════════ */
/* keywords */
.sourceCode .kw,
.sourceCode .cf {
  color: #c792ea !important;
  font-weight: 600 !important;
}
/* strings */
.sourceCode .st,
.sourceCode .vs {
  color: #c3e88d !important;
}
/* comments */
.sourceCode .co {
  color: #9fa2b1 !important;
  font-style: normal !important;
}
/* functions */
.sourceCode .fu {
  color: var(--ac) !important;
}
/* numbers */
.sourceCode .dv,
.sourceCode .fl {
  color: #f78c6c !important;
}
/* operators */
.sourceCode .op {
  color: #89ddff !important;
}
/* built-ins */
.sourceCode .bu {
  color: #89ddff !important;
}
/* variables / identifiers */
.sourceCode .va {
  color: #82aaff !important;
}
/* punctuation */
.sourceCode .sc,
.sourceCode .ot {
  color: #b8bcc8 !important;
}
/* errors */
.sourceCode .er {
  color: #ff5572 !important;
  background: none !important;
}
/* special */
.sourceCode .ss,
.sourceCode .cn {
  color: var(--ac) !important;
}

code.sourceCode .code-annotation-anchor {
  color: var(--quarto-hl-co-color) !important;
}

.cell-annotation dd span {
  font-size: 13px !important;
}

/* ══════════════════════════════════════════════════════════
   MISC BOOTSTRAP OVERRIDES
   ══════════════════════════════════════════════════════════ */

/* dropdowns */
.dropdown-menu {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  font-family: var(--mono) !important;
  border-radius: 5px !important;
}
.dropdown-item {
  font-family: var(--mono) !important;
  font-size: 12px !important;
  color: var(--t1) !important;
}
.dropdown-item:hover {
  background: var(--s2) !important;
  color: var(--t0) !important;
}

/* tippy tooltips */
.tippy-box[data-theme~="quarto"] {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  color: var(--t0) !important;
  font-family: var(--mono) !important;
  font-size: 12px !important;
}

/* pagination (if any) */
.pagination .page-link {
  background: var(--s1) !important;
  border-color: var(--b1) !important;
  color: var(--t1) !important;
  font-family: var(--mono) !important;
  font-size: 12px !important;
}
.pagination .page-link:hover {
  background: var(--s2) !important;
  border-color: var(--b2) !important;
  color: var(--t0) !important;
}
.pagination .page-item.active .page-link {
  background: var(--ac-dim) !important;
  border-color: var(--ac) !important;
  color: var(--ac) !important;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .list.grid.quarto-listing-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .list.grid.quarto-listing-cols-3 {
    grid-template-columns: 1fr;
  }

  .quarto-title-banner {
    padding: 28px 0 20px !important;
  }
}