/* RetractorDB — shared site chrome: tokens, nav, footer, generic
   pageheader (used by _layouts/default.html) and the homepage-only
   rules (used by _layouts/home.html / index.md), grouped below. */
:root{
  --paper:#FAFBFD;
  --panel:#FFFFFF;
  --ink:#101114;
  --ink-soft:#494D55;
  --brand:#6699FF;
  --brand-text:#3D6FD9;
  --brand-dark:#2E5CBF;
  --grid-fine:rgba(102,153,255,0.11);
  --grid-major:rgba(102,153,255,0.22);
  --rule:rgba(16,17,20,0.13);
  --code-bg:#101725;
  --code-ink:#DCE4F2;
  --maxw:1060px;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0B0D10;
    --panel:#15171C;
    --ink:#F2F4F7;
    --ink-soft:#AEB4BE;
    --brand:#6699FF;
    --brand-text:#8FB4FF;
    --brand-dark:#4E82E8;
    --grid-fine:rgba(102,153,255,0.09);
    --grid-major:rgba(102,153,255,0.18);
    --rule:rgba(255,255,255,0.13);
    --code-bg:#0A0E17;
    --code-ink:#DCE4F2;
  }
  .mark .mk-ink, .mark-footer .mk-ink{fill:#F2F4F7}
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:var(--brand-text);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
code,pre{font-family:"IBM Plex Mono",ui-monospace,monospace}

/* ---------- nav ---------- */
nav{border-bottom:1px solid var(--rule);background:var(--paper)}
.nav-in{display:flex;align-items:center;gap:13px;padding:18px 24px;max-width:var(--maxw);margin:0 auto}
.mark-wrap{width:34px;height:34px;flex:none;display:block}
.mark{width:100%;height:100%;display:block}
.wordmark{font-family:"Ubuntu",sans-serif;font-style:italic;font-weight:500;font-size:21px;color:var(--ink)}
.wordmark b{color:var(--brand);font-weight:500}
.nav-links{margin-left:auto;display:flex;gap:26px;font-size:15px;font-weight:500}
.nav-links a{color:var(--ink-soft)}
.nav-links a:hover{color:var(--ink);text-decoration:none}

/* ---------- header band (graph paper) ---------- */
.pageheader{
  border-bottom:1px solid var(--rule);
  background:
    repeating-linear-gradient(to right,  var(--grid-fine) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(to bottom, var(--grid-fine) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(to right,  var(--grid-major) 0 1px, transparent 1px 45px),
    repeating-linear-gradient(to bottom, var(--grid-major) 0 1px, transparent 1px 45px),
    var(--paper);
  padding:64px 24px 56px;
}
.pageheader-in{max-width:var(--maxw);margin:0 auto}
.eyebrow{
  font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:500;
  letter-spacing:0.08em;text-transform:uppercase;color:var(--brand-text);
}
.pageheader h1{
  font-family:"Ubuntu",sans-serif;font-style:italic;font-weight:500;
  font-size:clamp(30px,4.6vw,46px);line-height:1.14;
  letter-spacing:-0.01em;margin:14px 0 12px;max-width:18ch;
}
.pageheader .lede{max-width:60ch;color:var(--ink-soft);font-size:18px}

/* ---------- body sections ---------- */
main{padding:56px 0 8px}
section{padding:0 0 56px}
h2{
  font-family:"Ubuntu",sans-serif;font-style:italic;font-weight:500;
  font-size:clamp(22px,2.6vw,28px);margin:34px 0 16px;
}
h2:first-child{margin-top:0}
p.body, main p, main li{max-width:66ch;color:var(--ink-soft);margin-bottom:14px}
main strong{color:var(--ink)}
main ul, main ol{padding-left:1.3em;margin-bottom:16px}
main a{font-weight:500}

.equation{
  font-family:"IBM Plex Mono",monospace;font-size:15px;line-height:1.9;
  background:var(--panel);border:1px solid var(--rule);border-radius:8px;
  padding:22px 26px;margin:22px 0;overflow-x:auto;white-space:pre;
}
.panel-card{
  background:var(--panel);border:1px solid var(--rule);border-radius:8px;padding:24px;margin:22px 0;
}
.btn{display:inline-block;padding:12px 22px;border-radius:6px;font-weight:600;font-size:15.5px}
.btn-primary{background:var(--brand-dark);color:#fff}
.btn-primary:hover{background:#234A9E;text-decoration:none}
.btn-ghost{border:1.5px solid var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper);text-decoration:none}

footer{padding:44px 0 60px;color:var(--ink-soft);font-size:14.5px;border-top:1px solid var(--rule);margin-top:40px}
footer .cols{display:flex;flex-wrap:wrap;gap:12px 34px;align-items:center}
footer .mono{font-family:"IBM Plex Mono",monospace;font-size:13px}

@media (max-width:560px){
  .nav-links{gap:16px;font-size:14px}
  .pageheader{padding-top:48px}
  .hero{padding-top:52px}
  main.home section{padding:56px 0}
}

/* ---------- homepage hero (index.md / _layouts/home.html) ---------- */
.home-hero{
  border-bottom:1px solid var(--rule);
  background:
    repeating-linear-gradient(to right,  var(--grid-fine) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(to bottom, var(--grid-fine) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(to right,  var(--grid-major) 0 1px, transparent 1px 45px),
    repeating-linear-gradient(to bottom, var(--grid-major) 0 1px, transparent 1px 45px),
    var(--paper);
}
.hero{padding:72px 24px 0;max-width:var(--maxw);margin:0 auto}
.hero h1{
  font-family:"Ubuntu",sans-serif;font-style:italic;font-weight:500;
  font-size:clamp(34px,5.2vw,54px);line-height:1.12;
  letter-spacing:-0.01em;margin:14px 0 20px;max-width:15ch;
}
.hero h1 em{font-style:italic;color:var(--brand)}
.hero .lede{max-width:56ch;color:var(--ink-soft);font-size:19px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin:32px 0 8px}
.hero-note{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--ink-soft);margin-top:10px}

.merge{display:block;width:100%;height:auto;margin-top:34px}
.merge .lbl{font-family:"IBM Plex Mono",monospace;font-size:17px;fill:var(--ink-soft)}
.merge .op{font-family:"IBM Plex Mono",monospace;font-size:30px;font-weight:600;fill:var(--ink);animation:opPulse 1.4s ease-in-out infinite}
.merge .guide{stroke:rgba(16,17,20,.28);stroke-width:2;stroke-dasharray:2 7;stroke-linecap:round;fill:none}
.merge .mk-ink{fill:var(--ink)}
.merge .mk-blue{fill:var(--brand)}
.merge .mk-mix{fill:var(--ink-soft)}
.merge .lbl-mix{fill:var(--ink-soft)}
.merge .gpath{fill:none;stroke:var(--rule);stroke-width:1.5;stroke-dasharray:2 6}
@keyframes opPulse{0%,100%{opacity:.6}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .merge animateMotion{display:none}
  .merge .pulse{display:none}
  .merge .op{animation:none}
}

/* ---------- homepage sections ---------- */
main.home{padding:0}
main.home ~ footer{border-top:none;margin-top:0}
main.home section{padding:72px 0;border-bottom:1px solid var(--rule)}
main.home h2{
  font-family:"Ubuntu",sans-serif;font-style:italic;font-weight:500;
  font-size:clamp(24px,3vw,32px);margin-bottom:18px;
}
.sec-eyebrow{
  font-family:"IBM Plex Mono",monospace;font-size:12.5px;font-weight:500;
  letter-spacing:0.08em;text-transform:uppercase;color:var(--brand-text);
  display:block;margin-bottom:10px;
}

.legend{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:18px}
.legend .chip{display:flex;align-items:center;gap:9px;font-family:"IBM Plex Mono",monospace;font-size:13.5px;color:var(--ink-soft)}
.dot{width:13px;height:13px;border-radius:4px;flex:none}
.dot.a{background:var(--ink)}
.dot.b{background:var(--brand)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:30px}
.card{background:var(--panel);border:1px solid var(--rule);border-radius:8px;padding:24px}
.card h3{font-family:"IBM Plex Mono",monospace;font-size:17px;font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:10px}
.card h3 i{color:var(--brand-text);font-size:18px;width:20px;text-align:center;flex:none}
.card h3 span{color:var(--brand-text)}
.card p{font-size:15px;color:var(--ink-soft)}

.carousel{margin-top:30px;overflow:hidden;position:relative}
.carousel::before,.carousel::after{content:"";position:absolute;top:0;bottom:0;width:64px;z-index:2;pointer-events:none}
.carousel::before{left:0;background:linear-gradient(to right,var(--paper),transparent)}
.carousel::after{right:0;background:linear-gradient(to left,var(--paper),transparent)}
.carousel-track{display:flex;gap:18px;width:max-content;animation:carousel 36s linear infinite}
.carousel:hover .carousel-track{animation-play-state:paused}
.carousel .card{flex:0 0 280px}
@keyframes carousel{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .carousel-track{animation:none}
  .carousel{overflow-x:auto}
}

pre.code{
  background:var(--code-bg);color:var(--code-ink);
  border-radius:8px;padding:24px 26px;font-size:13.5px;line-height:1.75;
  overflow-x:auto;margin-top:26px;
}
pre.code .kw{color:#8FB4FF}
pre.code .cm{color:#7E8AA3}

.timeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin-top:30px}
.tl{border-top:3px solid var(--brand);padding-top:14px}
.tl.first{border-top-color:var(--ink)}
.tl .yr{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:20px}
.tl p{font-size:14.5px;color:var(--ink-soft);margin-top:6px}
.tl a{font-size:14.5px}