:root{
  --ground:#EEF2F0;
  --surface:#FFFFFF;
  --surface-2:#E7ECE9;
  --ink:#16213A;
  --text:#2B3244;
  --muted:#5F6B7A;
  --line:rgba(22,33,58,0.15);
  --accent:#B96F22;
  --accent-ink:#7A4A16;
  --accent-soft:rgba(185,111,34,0.12);
  --accent2:#296B67;
  --accent2-soft:rgba(41,107,103,0.12);
  --accent3:#3E5C9A;
  --accent3-soft:rgba(62,92,154,0.12);
  --mono-surface:rgba(22,33,58,0.05);
  --shadow:0 1px 2px rgba(22,33,58,0.06), 0 8px 24px rgba(22,33,58,0.05);
  --icon-video: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5l11 7-11 7z'/%3E%3C/svg%3E");
  --icon-article: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='5' width='16' height='2.4'/%3E%3Crect x='4' y='11' width='16' height='2.4'/%3E%3Crect x='4' y='17' width='10' height='2.4'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0F141D; --surface:#161D29; --surface-2:#1C2431;
    --ink:#ECEEE6; --text:#D6D9DE; --muted:#98A2AF;
    --line:rgba(236,238,230,0.14);
    --accent:#E3A257; --accent-ink:#F3C88A; --accent-soft:rgba(227,162,87,0.14);
    --accent2:#63BDB4; --accent2-soft:rgba(99,189,180,0.14);
    --accent3:#92B4FF; --accent3-soft:rgba(146,180,255,0.14);
    --mono-surface:rgba(236,238,230,0.06);
    --shadow:0 1px 2px rgba(0,0,0,0.3), 0 12px 28px rgba(0,0,0,0.35);
  }
}
:root[data-theme="dark"]{
  --ground:#0F141D; --surface:#161D29; --surface-2:#1C2431;
  --ink:#ECEEE6; --text:#D6D9DE; --muted:#98A2AF;
  --line:rgba(236,238,230,0.14);
  --accent:#E3A257; --accent-ink:#F3C88A; --accent-soft:rgba(227,162,87,0.14);
  --accent2:#63BDB4; --accent2-soft:rgba(99,189,180,0.14);
  --accent3:#92B4FF; --accent3-soft:rgba(146,180,255,0.14);
  --mono-surface:rgba(236,238,230,0.06);
  --shadow:0 1px 2px rgba(0,0,0,0.3), 0 12px 28px rgba(0,0,0,0.35);
}

*{box-sizing:border-box;}
::selection{background:var(--accent-soft);}
a{color:var(--accent-ink);}
a:focus-visible, button:focus-visible{outline:2px solid var(--accent2); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){ *{animation:none!important; transition:none!important;} }

body{
  margin:0;
  background:var(--ground);
  color:var(--text);
  font-family:"Source Serif 4", Georgia, serif;
  font-size:17px;
  line-height:1.65;
}

.page{ max-width:780px; margin:0 auto; padding:0 24px 96px; }

h1,h2,h3{ font-family:"Fraunces", Georgia, serif; color:var(--ink); font-weight:640; text-wrap:balance; margin:0; }

/* ---- site nav ---- */
.sitenav{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  margin-bottom:44px;
}
.sitenav-inner{
  max-width:780px; margin:0 auto; padding:16px 24px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.sitenav .brand{
  font-family:"IBM Plex Mono", monospace; font-size:12.5px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink); text-decoration:none; font-weight:600;
  white-space:nowrap;
}
.sitenav ul{
  list-style:none; display:flex; gap:4px; flex-wrap:wrap; margin:0; padding:0;
}
.sitenav a.link{
  display:inline-block; text-decoration:none; font-size:0.86rem; color:var(--muted);
  padding:6px 11px; border-radius:7px;
}
.sitenav a.link:hover{ color:var(--text); background:var(--surface-2); }
.sitenav a.link[aria-current="page"]{ color:var(--accent-ink); background:var(--accent-soft); font-weight:600; }

/* ---- page header ---- */
header.pagehead{ padding-bottom:8px; margin-bottom:36px; }
header.pagehead .eyebrow{
  font-family:"IBM Plex Mono", monospace; font-size:12px; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--accent-ink); margin-bottom:14px;
}
header.pagehead h1{ font-size:clamp(1.7rem, 4vw, 2.4rem); line-height:1.12; }
header.pagehead .sub{ margin-top:14px; font-size:1.05rem; color:var(--text); max-width:60ch; }

/* ---- section blocks within a page ---- */
section.block{ margin-bottom:34px; }
section.block h2{ font-size:1.22rem; margin-bottom:14px; }
section.block h3{ font-size:1.02rem; margin:0 0 10px; color:var(--ink); }

.prose{ max-width:66ch; }
.prose p{ margin:0 0 13px; }
.prose p:last-child{ margin-bottom:0; }
.prose strong{ color:var(--ink); }
.prose ul, .prose ol{ margin:0 0 13px; padding-left:1.3em; }
.prose li{ margin-bottom:6px; }

code, .mono{ font-family:"IBM Plex Mono", monospace; }
.prose code{
  font-family:"IBM Plex Mono", monospace; font-size:0.86em;
  background:var(--mono-surface); border-radius:3px; padding:0.1em 0.35em;
}

/* at-a-glance facts */
.facts{
  display:grid; grid-template-columns:auto 1fr; gap:8px 16px;
  margin:20px 0 0; padding:16px 18px; background:var(--surface-2);
  border-radius:10px; font-size:0.92rem;
}
.facts dt{
  font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:0.05em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap; padding-top:2px;
}
.facts dd{ margin:0; color:var(--text); }

pre.snippet{
  background:var(--surface-2); border:1px solid var(--line); border-radius:8px;
  padding:16px 18px; overflow-x:auto; margin:16px 0 0;
  font-family:"IBM Plex Mono", monospace; font-size:0.85rem; line-height:1.6;
  color:var(--ink);
}

figure.diagram{
  margin:22px 0 0; padding:18px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:10px;
}
figure.diagram svg{ max-width:100%; height:auto; display:block; margin:0 auto; }
figure.diagram figcaption{ margin-top:12px; font-size:0.86rem; color:var(--muted); text-align:center; max-width:52ch; margin-left:auto; margin-right:auto; }
.legend{
  display:flex; gap:20px; justify-content:center; margin-top:12px;
  font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:0.04em; color:var(--muted);
}
.legend span{ display:inline-flex; align-items:center; gap:6px; }
.swatch{ width:9px; height:9px; border-radius:2px; display:inline-block; }

/* domain analogy grid */
.analogy-heading{
  margin:26px 0 12px; font-family:"IBM Plex Mono", monospace; font-size:12px;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--muted);
}
.analogy-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }
@media (max-width:560px){ .analogy-grid{ grid-template-columns:1fr; } }
.analogy{ border:1px solid var(--line); border-radius:10px; padding:14px 16px; background:var(--surface); }
.analogy .who{
  display:flex; align-items:center; gap:8px; font-weight:600; color:var(--ink);
  font-family:"Fraunces", serif; font-size:1rem; margin-bottom:8px;
}
.analogy .who .emoji{ font-size:1.2rem; }
.analogy dl{ margin:0; font-size:0.88rem; }
.analogy dt{ font-family:"IBM Plex Mono", monospace; font-size:10.5px; letter-spacing:0.04em; text-transform:uppercase; color:var(--accent2); margin-top:6px; }
.analogy dt:first-child{ margin-top:0; }
.analogy dd{ margin:2px 0 0; color:var(--text); }

/* ---- real data tables (documentation page) ---- */
.table-scroll{ overflow-x:auto; margin:16px 0 0; border:1px solid var(--line); border-radius:10px; }
table.datatable{
  border-collapse:collapse; width:100%; min-width:520px;
  font-family:"IBM Plex Mono", monospace; font-size:0.82rem;
  background:var(--surface);
}
table.datatable caption{
  text-align:left; padding:12px 16px; font-family:"Source Serif 4", serif;
  font-size:0.92rem; color:var(--muted); background:var(--surface-2); caption-side:top;
  border-bottom:1px solid var(--line);
}
table.datatable th, table.datatable td{
  padding:9px 14px; text-align:left; border-bottom:1px solid var(--line);
  white-space:nowrap;
}
table.datatable thead th{
  background:var(--surface-2); color:var(--ink); font-weight:600;
  font-size:0.72rem; letter-spacing:0.04em; text-transform:uppercase;
}
table.datatable tbody tr:last-child td{ border-bottom:none; }
table.datatable tbody tr:hover{ background:var(--mono-surface); }
table.datatable td.num, table.datatable th.num{ text-align:right; font-variant-numeric:tabular-nums; }
table.datatable td .pk{ color:var(--accent-ink); font-weight:600; }
table.datatable td .fk{ color:var(--accent2); }

/* column dictionary table */
table.dicttable{ border-collapse:collapse; width:100%; min-width:640px; font-size:0.86rem; background:var(--surface); }
table.dicttable th, table.dicttable td{ padding:10px 14px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
table.dicttable thead th{
  background:var(--surface-2); color:var(--ink); font-weight:600;
  font-family:"IBM Plex Mono", monospace; font-size:0.7rem; letter-spacing:0.04em; text-transform:uppercase;
}
table.dicttable tbody tr:last-child td{ border-bottom:none; }
table.dicttable td.colname{ font-family:"IBM Plex Mono", monospace; font-size:0.82rem; color:var(--ink); white-space:nowrap; }
table.dicttable td.type{ font-family:"IBM Plex Mono", monospace; font-size:0.78rem; color:var(--accent2); white-space:nowrap; }
table.dicttable td .badge{
  display:inline-block; font-family:"IBM Plex Mono", monospace; font-size:0.65rem;
  letter-spacing:0.04em; text-transform:uppercase; padding:1px 6px; border-radius:4px;
  margin-left:6px; background:var(--accent-soft); color:var(--accent-ink);
}

/* numbered step list */
ol.steps{ list-style:none; margin:18px 0 0; padding:0; counter-reset:step; display:flex; flex-direction:column; gap:16px; }
ol.steps li{ position:relative; padding-left:46px; }
ol.steps li::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:0; top:0; width:30px; height:30px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent-ink);
  font-family:"IBM Plex Mono", monospace; font-weight:600; font-size:0.85rem;
  display:flex; align-items:center; justify-content:center;
}
ol.steps .step-title{ font-family:"Fraunces", serif; font-weight:600; color:var(--ink); display:block; margin-bottom:3px; font-size:1.02rem; }
ol.steps .step-body{ color:var(--text); font-size:0.94rem; }
ol.steps .step-body code{ font-family:"IBM Plex Mono", monospace; font-size:0.86em; background:var(--mono-surface); border-radius:3px; padding:0.1em 0.35em; }

/* head-to-head comparison table */
.table-scroll table.comparetable{ min-width:0; }
table.comparetable{ border-collapse:collapse; width:100%; font-size:0.9rem; background:var(--surface); }
table.comparetable th, table.comparetable td{ padding:11px 16px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
table.comparetable thead th{ font-family:"Fraunces", serif; font-weight:600; font-size:1rem; }
table.comparetable thead th.star{ background:var(--accent-soft); color:var(--accent-ink); }
table.comparetable thead th.snow{ background:var(--accent2-soft); color:var(--accent2); }
table.comparetable td.label{ font-family:"IBM Plex Mono", monospace; font-size:0.74rem; letter-spacing:0.03em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
table.comparetable tbody tr:last-child td{ border-bottom:none; }

.callout{
  margin:18px 0 0; padding:14px 18px; border-left:3px solid var(--accent2);
  background:var(--accent2-soft); border-radius:0 8px 8px 0; font-size:0.92rem;
}
.callout strong{ color:var(--ink); }

.resources{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:12px; margin-top:22px;
}
.chip{
  display:flex; align-items:center; gap:13px;
  padding:14px 16px; border-radius:12px; border:1px solid var(--line);
  border-left:4px solid var(--line);
  background:var(--surface); text-decoration:none; color:var(--text);
  box-shadow:var(--shadow);
  transition:transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.chip:hover{ transform:translateY(-2px); }
.chip .icon{
  flex:0 0 auto; width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
}
.chip .icon::before{
  content:""; display:block; width:17px; height:17px;
  background-color:currentColor;
  -webkit-mask-image:var(--icon); mask-image:var(--icon);
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
}
.chip .text{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.chip .kind{
  font-family:"IBM Plex Mono", monospace; font-size:10px; letter-spacing:0.07em;
  text-transform:uppercase; white-space:nowrap;
}
.chip .title{ color:var(--ink); font-weight:600; font-size:0.9rem; line-height:1.32; }

.chip.video{ border-left-color:var(--accent2); }
.chip.video:hover{ border-color:var(--accent2); }
.chip.video .icon{ background:var(--accent2-soft); color:var(--accent2); }
.chip.video .kind{ color:var(--accent2); }

.chip.article{ border-left-color:var(--accent3); }
.chip.article:hover{ border-color:var(--accent3); }
.chip.article .icon{ background:var(--accent3-soft); color:var(--accent3); --icon:var(--icon-article); }
.chip.article .kind{ color:var(--accent3); }

.chip.pdf{ border-left-color:var(--accent); }
.chip.pdf:hover{ border-color:var(--accent); }
.chip.pdf .icon{ background:var(--accent-soft); color:var(--accent-ink); }
.chip.pdf .icon::before{
  content:"PDF"; width:auto; height:auto; background:none;
  -webkit-mask-image:none; mask-image:none;
  font-family:"IBM Plex Mono", monospace; font-weight:700; font-size:9px; letter-spacing:0.02em;
  color:currentColor;
}
.chip.pdf .kind{ color:var(--accent-ink); }
.chip.video .icon{ --icon:var(--icon-video); }

.source-note{ margin-top:14px; font-size:0.84rem; color:var(--muted); }

/* ---- hub page topic cards ---- */
.topic-grid{ display:grid; grid-template-columns:1fr; gap:14px; margin-top:8px; }
a.topic-card{
  display:block; text-decoration:none; background:var(--surface);
  border:1px solid var(--line); border-radius:14px; padding:22px 24px;
  box-shadow:var(--shadow);
}
a.topic-card:hover{ border-color:var(--accent2); }
a.topic-card .num{
  font-family:"IBM Plex Mono", monospace; font-size:12px; color:var(--accent-ink);
  background:var(--accent-soft); border-radius:5px; padding:2px 8px; display:inline-block; margin-bottom:12px;
}
a.topic-card h2{ font-size:1.2rem; margin-bottom:8px; }
a.topic-card p{ margin:0; color:var(--muted); font-size:0.92rem; max-width:56ch; }
a.topic-card .goto{
  display:inline-block; margin-top:12px; font-family:"IBM Plex Mono", monospace;
  font-size:0.78rem; color:var(--accent2);
}

/* ---- prev/next footer nav ---- */
nav.pager{
  display:flex; justify-content:space-between; gap:16px; margin-top:48px;
  padding-top:20px; border-top:1px solid var(--line);
}
nav.pager a{
  text-decoration:none; font-size:0.88rem; color:var(--text);
  display:flex; flex-direction:column; gap:3px; max-width:45%;
}
nav.pager a .dir{ font-family:"IBM Plex Mono", monospace; font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); }
nav.pager a .to{ color:var(--accent-ink); font-weight:600; }
nav.pager a.next{ text-align:right; align-items:flex-end; }

footer.sitefoot{
  margin-top:40px; padding-top:24px; border-top:1px solid var(--line);
  font-size:0.85rem; color:var(--muted);
}