:root{
  --bg:#ffffff;
  --paper:#ffffff;
  --line:#e2e8f0;
  --line-soft:#eef2f6;
  --ink:#0f172a;
  --ink-soft:#475569;
  --ink-faint:#64748b;

  /* ---------------------------------------------------------------------
     Color discipline (docs/WEBSITE_RESTRUCTURE_PLAN.md, "Color" section).
     This is a RULE, not just a palette -- Phase 4's audit checks every
     page against it:
       - --accent (cyan) is the ONE brand/navigation accent: links, active
         nav states, primary CTAs. Nothing else uses it.
       - --treat (red) and --physio (teal) are reserved STRICTLY for
         semantic status (flagged / clean) -- the meanings are load-bearing
         across pages already shipped (including the published PyPI
         README). Never use either decoratively or as general UI chrome,
         even where the color would "look fine" -- if a use isn't actually
         signaling flagged/clean status, it doesn't belong in these two.
       - Everything structural (borders, dividers, backgrounds) is
         grayscale -- --line/--line-soft/--ink*/--bg/--paper only.
     --------------------------------------------------------------------- */
  --accent:#0891B2;
  --accent-soft:#ecfeff;
  --physio:#0F766E;
  --physio-soft:#f0fdfa;
  --treat:#DC2626;
  --treat-soft:#fef2f2;
  --gold:#8a6d1f;

  --serif: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------------------------------------------------------------------
     Modular type scale (~1.25 ratio). Every heading/body size site-wide
     maps to one of these eight -- no per-page arbitrary sizing. Three
     weights only: 400 (--weight-body), 600 (--weight-emphasis, subheads),
     800 (--weight-display, hero/page titles only, used sparingly).
     --------------------------------------------------------------------- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   20px;
  --text-xl:   25px;
  --text-2xl:  31px;
  --text-3xl:  39px;
  --text-4xl:  49px;

  --weight-body: 400;
  --weight-emphasis: 600;
  --weight-display: 800;

  /* ---------------------------------------------------------------------
     8px base spacing unit. Every margin/padding/gap is a multiple of 8
     (--space-half:4px for the tightest cases only). This is the single
     change most responsible for the site reading as "considered" rather
     than "assembled over many sessions" -- inconsistent spacing is the
     most common tell of exactly that.
     --------------------------------------------------------------------- */
  --space-half: 4px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 56px;
  --space-8: 64px;

  /* 12-column grid: fixed max-width, consistent gutter -- content aligns
     to this instead of the previous ad hoc wide-w/prose-w containers. */
  --grid-max-width: 1152px;
  --grid-gutter: var(--space-3);
  --grid-columns: 12;
}
*{box-sizing:border-box;}
html,body{ margin:0; padding:0; background:var(--bg); color:var(--ink); font-family:var(--sans); }
/* Long unbreakable tokens (results/experimentN_..._summary.json links, code identifiers) forced
   the page wider than the viewport on mobile -- this only engages for tokens that would otherwise
   overflow; normal text with spaces wraps exactly as before. */
body{ overflow-wrap:break-word; word-break:break-word; }
::selection{ background:var(--accent-soft); color:var(--accent); }

/* ---------- SITE NAV (every page) ---------------------------------------------------------
   Phase 3: unified across all pages in the new dark system, regardless of whether that page's
   own content area has been reskinned yet (see docs/WEBSITE_REBUILD_STATUS.md -- the header/
   content seam on not-yet-reskinned pages is a known, accepted interim state, not a bug). Uses
   the same hex values as .landing-dark below rather than :root's --accent/--physio/--treat, for
   the same color-discipline reason those aren't reused for decoration. ---------------------- */
.sitenav{
  background:#14171a; border-bottom:1px solid #2a2f35;
  position:sticky; top:0; z-index:50;
}
.sitenav-inner{
  max-width:1040px; margin:0 auto; padding:10px 24px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 20px;
}
.sitenav-brand{
  display:flex; align-items:center; gap:8px;
  font-family:var(--serif); font-size:15px; color:#f3f6f9; text-decoration:none;
}
.sitenav-brand img{ height:24px; width:auto; display:block; }
.sitenav-links{ display:flex; gap:4px; flex-wrap:wrap; }
@media (max-width: 560px){
  .sitenav-inner{ flex-direction:column; align-items:stretch; }
}
.sitenav-links a{
  font-family:var(--sans); font-size:12.5px; color:#a9b7c4; text-decoration:none;
  padding:7px 12px; border-radius:3px;
}
.sitenav-links a:hover{ background:#1b1f24; color:#f3f6f9; }
.sitenav-links a.active{ color:#7fd8ca; font-weight:600; }

/* ---------- MASTHEAD ---------- */
.masthead{ background:var(--paper); border-bottom:3px double var(--line); }
.masthead-inner{ max-width:840px; margin:0 auto; padding:26px 24px 20px; }
.affil{
  display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px 24px;
  font-family:var(--sans); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft);
  border-bottom:1px solid var(--line-soft); padding-bottom:12px; margin-bottom:14px;
}
.affil span b{ color:var(--ink); font-weight:700; }
.masthead h1{ font-family:var(--serif); font-weight:400; font-size:26px; line-height:1.32; margin:0 0 8px; color:var(--ink); }
.masthead p.deck{ font-family:var(--sans); font-size:14px; color:var(--ink-soft); line-height:1.6; margin:0 0 4px; max-width:640px; }

/* ---------- SHARED CONTENT ---------- */
main{ max-width:840px; margin:0 auto; padding:32px 24px 48px; }
main.wide{ max-width:1100px; }
h2{ font-family:var(--serif); font-weight:400; font-size:25px; margin:0 0 12px; line-height:1.3; color:var(--ink); }
h3.section{ font-family:var(--serif); font-weight:400; font-size:20px; margin:36px 0 12px; color:var(--ink); }
.plain{ font-size:15px; line-height:1.7; color:var(--ink-soft); margin:0 0 18px; }
.plain b{ color:var(--ink); font-weight:600; }

.card{ background:var(--paper); border:1px solid var(--line); border-radius:4px; padding:22px 24px; margin-bottom:18px; }
.card h3{ font-family:var(--sans); margin:0 0 12px; font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); font-weight:700; border-bottom:1px solid var(--line-soft); padding-bottom:9px; }

.facts{ display:flex; gap:14px; flex-wrap:wrap; margin-top:16px; }
.fact{ flex:1 1 150px; border-left:2px solid var(--accent); padding-left:12px; }
.fact .n{ font-family:var(--serif); font-size:22px; color:var(--ink); }
.fact .l{ font-size:11.5px; color:var(--ink-faint); line-height:1.4; margin-top:2px; }

.flag{ display:inline-flex; align-items:center; gap:7px; font-size:12px; padding:5px 11px; border-radius:3px; border:1px solid var(--line); }
.flag.physio{ border-color:var(--physio); color:var(--physio); background:var(--physio-soft); }
.flag.treat{ border-color:var(--treat); color:var(--treat); background:var(--treat-soft); }
.flag.pending{ border-color:var(--gold); color:var(--gold); background:#f7f0df; }
.flag .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }

/* Labeled callout blocks -- a formal statement (accent) or a methodology warning (treat), same
   recipe as proof.html's own .not-establish, parameterized by color so both live in one place. */
.statement-block{ background:var(--accent-soft); border:1px solid var(--accent); border-radius:6px; padding:16px 20px; margin:20px 0; font-size:13.5px; line-height:1.65; color:var(--ink); }
.statement-block .label{ font-family:var(--sans); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--accent); margin-bottom:8px; }
.warn-block{ background:var(--treat-soft); border:1px solid var(--treat); border-radius:6px; padding:16px 20px; margin:20px 0; font-size:13.5px; line-height:1.65; color:var(--ink); }
.warn-block .label{ font-family:var(--sans); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--treat); margin-bottom:8px; }

/* ---------- NAV FOOTER (prev/next between pages) ---------- */
.pagenav{
  max-width:760px; margin:0 auto; padding:0 24px 44px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.pagenav a{
  font-family:var(--sans); font-size:13px; padding:11px 18px; border-radius:3px; text-decoration:none;
  border:1px solid var(--ink); color:var(--ink); flex:0 0 auto;
}
.pagenav a.primary{ background:var(--accent); border-color:var(--accent); color:#fff; }

footer.page-footer{
  border-top:1px solid var(--line); padding:22px 24px 30px; text-align:center;
  font-size:11.5px; color:var(--ink-faint); line-height:1.6;
}
footer.page-footer a{ color:var(--ink-soft); }

.table-scroll{ overflow-x:auto; margin:14px 0; -webkit-overflow-scrolling:touch; }
.table-scroll table.data{ margin:0; min-width:480px; }
table.data{ width:100%; border-collapse:collapse; font-size:13px; margin:14px 0; }
table.data th{ text-align:left; font-family:var(--sans); font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); padding:8px 10px; border-bottom:1px solid var(--line); }
table.data td{ padding:9px 10px; border-bottom:1px solid var(--line-soft); font-family:var(--mono); font-size:12.5px; }
table.data td.label{ font-family:var(--sans); font-size:13px; }
table.data tr.old td{ color:var(--ink-faint); text-decoration:line-through; }

@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

/* ---------- v2 brand additions ---------- */
.navbtn{
  font-family:var(--sans); font-size:13.5px; padding:11px 22px; border-radius:3px; cursor:pointer;
  border:1px solid var(--ink); background:var(--paper); color:var(--ink); text-decoration:none; display:inline-block;
}
.navbtn.primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.navbtn:disabled{ opacity:.3; cursor:default; }

/* ---------------------------------------------------------------------
   12-column grid (website-restructure-phase-1). Fixed max-width,
   consistent gutter -- content aligns to this instead of arbitrary
   per-page containers. Used by the new gateway/package/research pages
   only in this phase; existing pages keep their current containers until
   Phase 3's reskin.
   --------------------------------------------------------------------- */
.grid-container{
  max-width:var(--grid-max-width); margin:0 auto; padding:0 var(--grid-gutter);
}
.grid-12{
  display:grid; grid-template-columns:repeat(var(--grid-columns), 1fr); gap:var(--grid-gutter);
}
.col-span-4{ grid-column:span 4; }
.col-span-6{ grid-column:span 6; }
.col-span-8{ grid-column:span 8; }
.col-span-12{ grid-column:span 12; }
@media (max-width: 720px){
  .col-span-4, .col-span-6, .col-span-8{ grid-column:span 12; }
}

/* ---------------------------------------------------------------------
   Homepage-only dark product page (website rebuild Phase 1). Scoped
   entirely under .landing-dark -- it does NOT touch :root's --accent /
   --physio / --treat, which stay reserved for the site-wide color
   discipline above (nav/active-state cyan, clean teal, flagged red;
   "load-bearing across pages already shipped, including the published
   PyPI README"). The homepage's own teal/blue tones below are a separate,
   self-contained palette matching the VS Code extension's own theme
   (extension/media/theme.css), used only inside this one section.
   --------------------------------------------------------------------- */
.landing-dark{
  background:#14171a; color:#dfe6ee;
}
.landing-dark .masthead{ background:transparent; border-bottom:none; }
.landing-dark .masthead-inner{ max-width:760px; padding-top:56px; }
.landing-dark .masthead h1{ color:#f3f6f9; }
.landing-dark .masthead p.deck{ color:#a9b7c4; }
.landing-dark .brand-row{
  display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:var(--space-3);
}
.landing-dark .brand-row img{ height:36px; width:auto; display:block; }
.landing-dark .brand-row span{
  font-family:var(--serif); font-size:15px; color:#a9b7c4; letter-spacing:.02em;
}
.landing-dark .install-row{
  display:inline-flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:var(--space-2);
  background:#0c0e10; border:1px solid #2a2f35; color:#fff; border-radius:6px;
  padding:var(--space-2) var(--space-3); max-width:100%;
}
.landing-dark .install-row code{ font-family:var(--mono); font-size:var(--text-base); white-space:nowrap; }
.landing-dark .install-row button{
  font-family:var(--sans); font-size:var(--text-xs); color:#fff; background:transparent;
  border:1px solid rgba(255,255,255,.35); border-radius:4px; padding:4px 10px; cursor:pointer;
  white-space:nowrap; flex:0 0 auto;
}
.landing-dark .ext-note{ font-size:12.5px; color:#8592a0; margin-top:10px; }
.landing-dark .ext-note a{ color:#7fd8ca; }
.landing-dark .demo-frame{
  border:1px solid #2a2f35; border-radius:8px; overflow:hidden; margin:var(--space-4) 0; line-height:0;
}
.landing-dark .demo-frame img, .landing-dark .demo-frame video{ width:100%; height:auto; display:block; }
.landing-dark h2{ color:#f3f6f9; }
.landing-dark h3.section{ color:#f3f6f9; }
.landing-dark .plain{ color:#a9b7c4; }
.landing-dark .plain b{ color:#f3f6f9; }
.landing-dark .card{
  background:#1b1f24; border:1px solid #2a2f35; color:#dfe6ee;
}
.landing-dark .card h3{ color:#8592a0; border-bottom-color:#2a2f35; }
.landing-dark .step-num{
  display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:50%; background:#7fd8ca; color:#0c0e10; font-family:var(--sans); font-weight:700;
  font-size:13px; margin-bottom:10px;
}
.landing-dark .check-name{ font-family:var(--sans); font-weight:600; font-size:14.5px; color:#f3f6f9; margin:0 0 4px; }
.landing-dark .check-q{ font-size:13px; color:#a9b7c4; margin:0; }
.landing-dark .navbtn.primary{ background:#7fd8ca; border-color:#7fd8ca; color:#0c0e10; font-weight:600; }
.landing-dark .navbtn{ border-color:#3a4048; color:#dfe6ee; background:transparent; }
.landing-dark .footer-nav{
  border-top:1px solid #2a2f35; margin-top:var(--space-6); padding:var(--space-4) 0 var(--space-2);
  display:flex; flex-wrap:wrap; gap:var(--space-1) var(--space-4); justify-content:center;
}
.landing-dark .footer-nav a{ font-family:var(--sans); font-size:13px; color:#a9b7c4; text-decoration:none; }
.landing-dark .footer-nav a:hover{ color:#7fd8ca; }
.landing-dark .pagenav a{ border-color:#3a4048; color:#dfe6ee; }
.landing-dark .pagenav a.primary{ background:#7fd8ca; border-color:#7fd8ca; color:#0c0e10; }

/* Placeholder cards (website rebuild Phase 2) -- deliberately NOT styled to look like finished
   content: dashed border, muted text, an explicit "Placeholder" tag. A real card (once filled in)
   is a plain .card with no dashed border and no tag, so the two states can never be confused. */
.landing-dark .placeholder-icon{
  width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:#0c0e10; margin-bottom:12px; color:#5a6472; flex:0 0 auto;
}
.landing-dark .placeholder-icon svg{ width:26px; height:26px; }
.landing-dark .team-photo{
  width:64px; height:64px; border-radius:50%; object-fit:cover; display:block; margin-bottom:12px;
  border:1px solid #2a2f35; flex:0 0 auto;
}
/* An externally-branded logo (e.g. a sibling lab's) drawn in dark marks on the assumption of a
   light background -- wrapped in one so it stays legible here rather than nearly-invisible on
   dark-on-dark. */
.landing-dark .affiliate-badge{
  display:inline-flex; align-items:center; gap:10px; background:#f4f4f4; border-radius:6px;
  padding:8px 14px; margin-top:var(--space-2);
}
.landing-dark .affiliate-badge img{ height:28px; width:auto; display:block; }
.landing-dark .affiliate-badge span{ font-family:var(--sans); font-size:12px; color:#333; }
.landing-dark .card.placeholder{
  background:transparent; border:1px dashed #3a4048;
}
.landing-dark .card.placeholder .placeholder-tag{
  display:inline-block; font-family:var(--sans); font-size:10.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:#5a6472; border:1px solid #3a4048; border-radius:3px;
  padding:2px 7px; margin-bottom:10px;
}
.landing-dark .card.placeholder .check-name{ color:#5a6472; }
.landing-dark .card.placeholder .check-q{ color:#4a5361; font-style:italic; }

/* Expandable detail sections (website rebuild Phase 4), matching proof.html's existing
   details.expand pattern -- same markup, dark-appropriate colors instead of that page's
   light-theme inline <style>. */
.landing-dark details.expand{ border:1px solid #2a2f35; border-radius:6px; margin:14px 0 0; }
.landing-dark details.expand summary{
  padding:11px 16px; cursor:pointer; font-family:var(--sans); font-size:13px; font-weight:600;
  color:#dfe6ee; list-style:none; display:flex; justify-content:space-between; align-items:center;
}
.landing-dark details.expand summary::-webkit-details-marker{ display:none; }
.landing-dark details.expand summary::after{ content:"+"; font-size:18px; color:#5a6472; }
.landing-dark details.expand[open] summary::after{ content:"\2212"; }
.landing-dark details.expand .expand-body{ padding:0 16px 14px; font-size:13px; color:#a9b7c4; line-height:1.65; }
.landing-dark .proven-by{
  font-family:var(--sans); font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:#5a6472; margin:0 0 4px;
}
.landing-dark .see-math{ display:inline-block; margin-top:10px; font-size:13px; color:#7fd8ca; }

/* Library card grid (website rebuild Phase 5), shared by papers.html and
   datasets-and-models.html -- one system, not two. */
.landing-dark .lib-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:16px; margin-top:16px;
}
.landing-dark .lib-card{ border:1px solid #2a2f35; border-radius:6px; padding:20px; background:#1b1f24; }
.landing-dark .lib-card h3{
  font-family:var(--serif); font-weight:400; font-size:16px; margin:10px 0 4px; color:#f3f6f9;
  border:none; padding:0; text-transform:none; letter-spacing:normal;
}
.landing-dark .lib-card .lib-meta{ font-size:12.5px; color:#5a6472; }
.landing-dark .lib-card .lib-desc{ font-size:13px; color:#a9b7c4; line-height:1.55; margin-top:10px; }
.landing-dark .lib-tags{ display:flex; gap:5px; flex-wrap:wrap; margin-top:10px; }
.landing-dark .lib-tags span{
  font-family:var(--mono); font-size:10px; color:#8592a0; background:#14171a; border:1px solid #2a2f35;
  padding:2px 7px; border-radius:3px;
}
.landing-dark .lib-card .view-link{ display:inline-block; margin-top:12px; font-size:12.5px; color:#7fd8ca; }
.landing-dark .lib-badge{ font-size:11px; font-weight:600; padding:3px 9px; border-radius:3px; display:inline-block; }
.landing-dark .badge-confound{ background:rgba(201,151,77,.15); color:#c9974d; }
.landing-dark .badge-context{ background:rgba(255,255,255,.06); color:#8592a0; }
.landing-dark .badge-related{ background:rgba(127,216,202,.12); color:#7fd8ca; }
.landing-dark .badge-dataset{ background:rgba(143,189,232,.14); color:#8fbde8; }
.landing-dark .badge-model{ background:rgba(127,216,202,.12); color:#7fd8ca; }
.landing-dark .tag-btn{
  font-family:var(--sans); font-size:11.5px; padding:6px 12px; border-radius:14px; border:1px solid #2a2f35;
  background:#1b1f24; color:#a9b7c4; cursor:pointer;
}
.landing-dark .tag-btn.on{ border-color:#7fd8ca; color:#7fd8ca; background:rgba(127,216,202,.12); font-weight:600; }
.landing-dark .lib-empty{
  text-align:center; padding:56px 24px; border:1px dashed #2a2f35; border-radius:8px; margin-top:16px;
}
.landing-dark .lib-empty p{ color:#a9b7c4; font-size:15px; margin:0 0 18px; }

/* Self-check tool (papers.html), reused as-is -- only re-themed. */
.landing-dark .sc-q{ padding:14px 0; border-top:1px solid #2a2f35; }
.landing-dark .statement-block{ background:rgba(127,216,202,.08); border:1px solid #2f5f56; color:#dfe6ee; }
.landing-dark .statement-block .label{ color:#7fd8ca; }
.landing-dark table.data th{ color:#8592a0; border-bottom-color:#2a2f35; }
.landing-dark table.data td{ color:#dfe6ee; border-bottom-color:#2a2f35; }
.landing-dark table.data td.label{ color:#f3f6f9; }
.landing-dark table.data tr.old td{ color:#5a6472; }
.landing-dark .warn-block{ background:rgba(245,161,90,.08); border:1px solid #6b4a26; color:#dfe6ee; }
.landing-dark .warn-block .label{ color:#f5a15a; }
.landing-dark input[type="text"]{
  background:#14171a; border:1px solid #2a2f35; color:#dfe6ee;
}
.landing-dark input[type="text"]::placeholder{ color:#5a6472; }
.landing-dark label{ color:#dfe6ee !important; }

/* Giscus comment section: a fixed-height slot before the widget's iframe injects itself, so the
   page doesn't visibly jump once it loads. */
.landing-dark .comments-section{ min-height:180px; }