:root{
  --bg: #ffffff;
  --text: #202122;
  --text-dim: #54595d;
  --border: #a2a9b1;
  --border-light: #eaecf0;
  --link: #0b57c6;
  --link-visited: #4a3f8f;
  --code-bg: #f8f9fa;
  --head-bg: #f8f9fa;
  --sans: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --page-pad: clamp(12px, 1.5vw, 24px);

  /* spacing scale — every box/section pulls from this, so vertical rhythm stays consistent */
  --sp-1: 6px;
  --sp-2: 12px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 32px;
  --sp-6: 48px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.6;
}

a{color:var(--link);}
a:visited{color:var(--link-visited);}
:focus-visible{outline:2px solid var(--link); outline-offset:2px;}

code, pre, .mono{font-family:var(--mono);}
code{
  background:var(--code-bg);
  border:1px solid var(--border-light);
  padding:1px 5px;
  border-radius:2px;
  font-size:0.9em;
}

/* single consistent container — used everywhere, no competing widths.
   Fluid: always spans 100% of the window, no max-width ceiling. Only the
   side padding scales with viewport width; prose line-length is controlled
   separately (.prose p) so text doesn't become unreadably wide on its own. */
.page{
  width:100%;
  margin:0;
  padding:0 var(--page-pad);
}

/* prose paragraphs get a narrower measure WITHOUT recentering:
   max-width only, no margin:auto, stays left-aligned against the page container */
.prose p, .prose li, .prose dd{
}

h1,h2,h3{
  font-family:var(--sans);
  font-weight:600;
  line-height:1.3;
  color:var(--text);
  margin:0 0 var(--sp-2);
}

p{margin:0 0 var(--sp-3);}

/* ---------- top bar ---------- */
.topbar{
  border-bottom:1px solid var(--border-light);
  background:var(--head-bg);
}
.topbar-inner{
  width:100%;
  margin:0;
  padding:var(--sp-1) var(--page-pad);
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:0.82rem;
  color:var(--text-dim);
  flex-wrap:wrap;
  gap:4px 16px;
}
.topbar-brand{
  display:flex;
  align-items:center;
  gap:8px;
}
.topbar-brand img{
  width:22px;
  height:22px;
  border-radius:5px;
  display:block;
}
.crumb{color:var(--text-dim);}
.crumb a{color:var(--text-dim); text-decoration:none;}
.crumb a:hover{color:var(--link); text-decoration:underline;}
.crumb .sep{padding:0 4px; color:var(--border);}
.topbar-inner a{color:var(--text-dim); text-decoration:none;}
.topbar-inner a:hover{color:var(--link); text-decoration:underline;}
.topbar-links{display:flex; gap:16px; flex-wrap:wrap;}

/* ---------- article header ---------- */
.article-header{
  padding:var(--sp-4) 0 var(--sp-4);
  border-bottom:1px solid var(--border);
}
.article-header .kicker{
  font-size:0.82rem;
  color:var(--text-dim);
  margin-bottom:var(--sp-1);
}
.article-header h1{
  font-size:2rem;
  margin-bottom:var(--sp-1);
}
.article-header .tagline{
  color:var(--text-dim);
  font-size:1rem;
  margin:0;
}

/* ---------- subpage header (lighter weight than a top-level article) ---------- */
.subpage-header{
  padding:var(--sp-3) 0 var(--sp-3);
  border-bottom:1px solid var(--border);
}
.subpage-header .kicker{
  font-size:0.82rem;
  color:var(--text-dim);
  margin-bottom:var(--sp-1);
}
.subpage-header .kicker a{color:var(--text-dim); text-decoration:none;}
.subpage-header .kicker a:hover{color:var(--link); text-decoration:underline;}
.subpage-header h1{font-size:1.6rem; margin-bottom:0;}

/* ---------- lead ---------- */
.lead{padding:var(--sp-4) 0 0;}

/* ---------- contents box ---------- */
.toc{
  display:inline-block;
  border:1px solid var(--border);
  background:var(--code-bg);
  padding:var(--sp-3) var(--sp-4);
  margin:var(--sp-4) 0 var(--sp-5);
}
.toc-title{
  font-weight:600;
  font-size:0.88rem;
  margin-bottom:var(--sp-2);
}
.toc ol{
  margin:0;
  padding-left:1.3em;
  font-size:0.9rem;
}
.toc li{margin-bottom:var(--sp-1);}
.toc a{text-decoration:none;}
.toc a:hover{text-decoration:underline;}

/* ---------- sections ---------- */
section{padding:var(--sp-5) 0 var(--sp-6);}
section h2{
  font-size:1.35rem;
  border-bottom:1px solid var(--border);
  padding-bottom:var(--sp-1);
  margin-bottom:var(--sp-3);
  scroll-margin-top:var(--sp-2);
}
section h3{
  font-size:1.02rem;
  margin-top:var(--sp-4);
}
/* subpages reuse .page.prose directly without a <section> wrapper — this gives
   equivalent top/bottom rhythm to a section for that case */
.solo{padding-top:var(--sp-5); padding-bottom:var(--sp-6);}

/* ---------- compare table ---------- */
table.wikitable{
  border-collapse:collapse;
  margin:var(--sp-3) 0;
  font-size:0.92rem;
}
table.wikitable th, table.wikitable td{
  border:1px solid var(--border);
  padding:var(--sp-1) var(--sp-2);
  text-align:left;
  vertical-align:top;
}
table.wikitable th{
  background:var(--head-bg);
  font-weight:600;
}
table.wikitable td.fx{font-weight:600;}
table.wikitable.full{width:100%;}

/* ---------- effects definition list ---------- */
dl.effects dt{
  font-weight:600;
  margin-top:var(--sp-3);
}
dl.effects dt:first-child{margin-top:0;}
dl.effects dd{margin:var(--sp-1) 0 0;}

/* ---------- notice box ---------- */
.notice{
  border:1px solid var(--border);
  border-left:4px solid var(--text-dim);
  background:var(--code-bg);
  padding:var(--sp-3) var(--sp-4);
  font-size:0.9rem;
  margin-top:var(--sp-3);
}
.notice strong{color:var(--text);}

/* ---------- install ---------- */
pre{
  background:var(--code-bg);
  border:1px solid var(--border-light);
  padding:var(--sp-2) var(--sp-3);
  overflow-x:auto;
  font-size:0.86rem;
  line-height:1.5;
  margin:0 0 var(--sp-3);
}
pre code{border:none; background:none; padding:0;}
ul.deps{
  columns:2;
  column-gap:var(--sp-4);
  font-family:var(--mono);
  font-size:0.88rem;
  padding-left:1.2em;
  margin:0 0 var(--sp-3);
}
ul.deps li{margin-bottom:var(--sp-1);}
@media (max-width:480px){ul.deps{columns:1;}}

/* env var table */
table.wikitable td.varname{font-family:var(--mono); font-size:0.84rem; white-space:nowrap;}

/* ---------- see-also strip (subpage cross-nav) ---------- */
.seealso{
  margin-top:var(--sp-5);
  padding-top:var(--sp-3);
  border-top:1px solid var(--border-light);
  font-size:0.88rem;
  color:var(--text-dim);
}
.seealso strong{color:var(--text); display:block; margin-bottom:var(--sp-1); font-weight:600; font-size:0.82rem;}
.seealso a{margin-right:var(--sp-3);}

/* ---------- project list (wiki home) ---------- */
table.projects td .proj-name{font-weight:600;}
table.projects td .proj-desc{color:var(--text-dim); font-size:0.9rem; display:block; margin-top:2px;}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--border);
  padding:var(--sp-4) 0 var(--sp-6);
  font-size:0.82rem;
  color:var(--text-dim);
}
.footer-links{display:flex; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-2);}
.footer-links a{color:var(--text-dim); text-decoration:none;}
.footer-links a:hover{color:var(--link); text-decoration:underline;}

@media (max-width:560px){
  .article-header h1{font-size:1.5rem;}
  ul.deps{columns:1;}
}