/* =========================================================================
   FedPCD — project page
   Same design system as the PCD page, re-themed. The theme colour is the
   magenta the paper's figures use for CRAFT (#C2185B). Diagrams keep the
   paper's own figure colours, so the page, the figures and the video agree.
   ========================================================================= */

:root{
  /* theme + neutrals */
  --brand:#C2185B;
  --brand-deep:#7A0E3B;
  --brand-wash:#FCEEF3;
  --brand-line:#F3D2DE;
  --brand-mark:#F8CBDB;
  --tint:#FEF9FB;
  --ink:#1D1420;
  --body:#3A323D;
  --slate:#5F5562;
  --faint:#9D93A1;
  --mist:#ECE4E9;
  --paper:#FDFBFC;
  --surface:#FFFFFF;

  /* figure colours, as in the paper (system diagram and results figures) */
  --fedpcd:#6A1B9A;          /* FedPCD's direction and curves */
  --fedavg:#6CACE4;          /* the primary (FedAvg) direction */
  --fedavg-ink:#2F7BBF;
  --conflict:#D62728;        /* a client the average leaves behind */
  --constraint:#F59F00;      /* constraints */
  --constraint-ink:#B86E00;
  --region:#FDEBCF;          /* the feasible region */
  --good:#12845A;
  --m-fedavg:#6B7280;

  --maxw:1140px;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(29,20,32,.04), 0 12px 32px -16px rgba(122,14,59,.18);
  --shadow-lg:0 2px 4px rgba(29,20,32,.05), 0 30px 60px -28px rgba(122,14,59,.30);

  --font-display:'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body:'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
}

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;line-height:1.1;color:var(--ink);}
h2{font-size:clamp(28px,3.6vw,40px);margin:0 0 .5em;}
h3{font-size:21px;letter-spacing:-.01em;margin:0 0 .4em;}
p{margin:0 0 1em;}
a{color:var(--brand);text-decoration:none;}
em{font-style:italic;color:inherit;}
strong{font-weight:600;}
sup,sub{font-size:.62em;font-weight:500;line-height:0;}
::selection{background:var(--brand-mark);}

/* math / mono inline */
.m{font-family:var(--font-mono);font-size:.92em;font-style:normal;color:var(--brand-deep);white-space:nowrap;}
.brand{color:var(--brand);}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
.wrap.narrow{max-width:820px;}
.section{padding:96px 0;position:relative;}
.section-alt{background:linear-gradient(180deg,#fff, var(--tint));border-top:1px solid var(--mist);border-bottom:1px solid var(--mist);}
.kicker{font-family:var(--font-body);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin:0 0 14px;}
.lead{font-size:21px;line-height:1.55;color:#352D38;max-width:46em;}
.caption{font-size:15px;color:var(--slate);margin-top:18px;max-width:50em;}
.footnote{font-size:13.5px;line-height:1.5;color:var(--slate);}
.prose{max-width:46em;color:var(--body);}
.prose a,.col-text a,.caption a,.footnote a,.scope-list a,.cite-note a{text-decoration:underline;text-decoration-color:var(--brand-mark);text-underline-offset:3px;}
.prose a:hover,.col-text a:hover,.caption a:hover,.footnote a:hover,.scope-list a:hover,.cite-note a:hover{text-decoration-color:var(--brand);}

/* ---------- scroll progress ---------- */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--brand),var(--fedpcd));z-index:100;transition:width .08s linear;}

/* ---------- dot nav ---------- */
.dotnav{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:80;display:flex;flex-direction:column;gap:14px;opacity:0;pointer-events:none;transition:opacity .4s;}
.dotnav.show{opacity:1;pointer-events:auto;}
.dotnav a{display:flex;align-items:center;justify-content:flex-end;position:relative;}
.dotnav a span{width:9px;height:9px;border-radius:50%;background:var(--mist);border:1.5px solid transparent;transition:all .25s var(--ease);}
.dotnav a:hover span{background:var(--brand);transform:scale(1.2);}
.dotnav a.active span{background:var(--brand);box-shadow:0 0 0 4px var(--brand-wash);}
.dotnav a::after{content:attr(data-label);position:absolute;right:20px;white-space:nowrap;font-size:12px;font-weight:500;color:var(--ink);background:var(--surface);border:1px solid var(--mist);padding:3px 9px;border-radius:7px;opacity:0;transform:translateX(6px);transition:all .2s var(--ease);pointer-events:none;box-shadow:var(--shadow);}
.dotnav a:hover::after{opacity:1;transform:translateX(0);}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none;} .scroll-cue span{animation:none;} .hero-trace{stroke-dashoffset:0;animation:none;} }

/* ============================ HERO ============================ */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:96px 0 112px;}
.hero-bg{position:absolute;inset:0;color:var(--brand);opacity:.13;pointer-events:none;}
.hero-bg svg{width:100%;height:100%;}
.hero-region{fill:currentColor;opacity:.35;}
.hero-bounds{stroke-width:1.6;stroke-dasharray:9 8;opacity:.75;}
.hero-clients{stroke-width:5;stroke-linecap:round;opacity:.6;}
.hero-avg{stroke-width:5;stroke-linecap:round;stroke-dasharray:3 11;opacity:.9;}
.hero-trace{stroke-width:7;stroke-linecap:round;stroke-dasharray:260;stroke-dashoffset:260;}
.hero-trace.draw{animation:heroDraw 1.6s var(--ease) .3s forwards;}
@keyframes heroDraw{to{stroke-dashoffset:0;}}
.hero-marks{fill:currentColor;}

.hero-inner{position:relative;z-index:2;width:100%;min-width:0;}
.eyebrow{font-weight:600;font-size:13.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);margin:0 0 22px;}
.hero-title{font-size:clamp(38px,6.2vw,72px);font-weight:600;line-height:1.04;margin:0 0 26px;}
.hero-name{display:block;font-size:clamp(20px,2.7vw,31px);line-height:1.2;letter-spacing:-.015em;margin-top:.62em;color:var(--brand);}
.hero-sub{font-size:clamp(18px,2.1vw,23px);line-height:1.5;color:#3C343F;max-width:40em;margin:0 0 34px;font-weight:400;}
.hero-sub em{color:var(--brand-deep);font-style:normal;font-weight:600;}

.authors{margin:0 0 32px;}
.author{display:inline-block;font-weight:600;font-size:18px;margin-right:22px;color:var(--ink);}
.affil{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px 20px;font-size:14.5px;color:var(--slate);}
.affil .eq{color:var(--brand);}
.venue{margin:16px 0 0;}
.venue-pill{display:inline-block;background:var(--brand-wash);color:var(--brand);border:1px solid var(--brand-line);border-radius:999px;padding:6px 14px;font-size:14px;font-weight:600;}

.actions{display:flex;flex-wrap:wrap;gap:12px;}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-body);font-weight:500;font-size:15.5px;color:var(--ink);background:var(--surface);border:1.5px solid var(--mist);padding:11px 20px;border-radius:999px;cursor:pointer;transition:all .22s var(--ease);box-shadow:0 1px 2px rgba(29,20,32,.03);}
.btn:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px);box-shadow:var(--shadow);}
.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand);}
.btn-primary:hover{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff;}
.btn-sm{padding:8px 15px;font-size:14px;}
.btn .ico{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.btn .ico-fill{fill:currentColor;stroke:none;}
.btn-primary .ico{stroke:#fff;}
.btn-primary .ico-fill{fill:#fff;stroke:none;}

/* links that are not live yet: muted, with a "Coming soon" tooltip on hover and focus */
.is-pending{position:relative;cursor:default;}
.btn.is-pending{color:var(--slate);border-style:dashed;border-color:#D9CED5;box-shadow:none;}
.btn.is-pending:hover{color:var(--slate);border-color:var(--faint);transform:none;box-shadow:none;}
.is-pending::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 9px);transform:translate(-50%,5px);white-space:nowrap;font-family:var(--font-body);font-size:12.5px;font-weight:500;line-height:1;letter-spacing:0;color:#fff;background:var(--ink);padding:7px 10px;border-radius:7px;opacity:0;pointer-events:none;transition:opacity .18s var(--ease),transform .18s var(--ease);box-shadow:var(--shadow);z-index:5;}
.is-pending::before{content:"";position:absolute;left:50%;bottom:calc(100% + 4px);transform:translate(-50%,5px);border:5px solid transparent;border-top-color:var(--ink);border-bottom-width:0;opacity:0;pointer-events:none;transition:opacity .18s var(--ease),transform .18s var(--ease);z-index:5;}
.is-pending:hover::after,.is-pending:focus-visible::after,.is-pending:hover::before,.is-pending:focus-visible::before{opacity:1;transform:translate(-50%,0);}

.scroll-cue{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);width:26px;height:42px;border:2px solid var(--mist);border-radius:14px;z-index:2;}
.scroll-cue span{position:absolute;top:8px;left:50%;width:4px;height:8px;border-radius:2px;background:var(--brand);transform:translateX(-50%);animation:cue 1.6s var(--ease) infinite;}
@keyframes cue{0%{opacity:0;transform:translate(-50%,0);}40%{opacity:1;}80%{opacity:0;transform:translate(-50%,14px);}100%{opacity:0;}}

/* ============================ TL;DR ============================ */
.tldr-card{background:var(--brand-wash);border:1px solid var(--brand-line);border-radius:var(--radius);padding:38px 40px;box-shadow:var(--shadow);}
.tldr-lead{font-size:21px;line-height:1.6;margin:0 0 24px;color:#2E2531;}
.tldr-lead .hl{background:linear-gradient(180deg,transparent 62%, var(--brand-mark) 62%);padding:0 2px;font-weight:500;}
.chips{display:flex;flex-wrap:wrap;gap:11px;}
.chip{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:4px 7px;background:var(--surface);border:1px solid var(--brand-line);border-radius:999px;padding:8px 16px;font-size:14.5px;color:var(--ink);font-weight:500;}
.chip b{font-family:var(--font-display);color:var(--brand);font-size:16px;}
.chip-sub{color:var(--slate);font-weight:400;font-size:12.5px;}

/* ============================ VIDEO ============================ */
.section-video{padding-top:8px;}
.video-frame{position:relative;aspect-ratio:16/9;margin-top:28px;border-radius:var(--radius);overflow:hidden;background:var(--surface);border:1px solid var(--mist);box-shadow:var(--shadow-lg);}
.video-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000;}
.chapters{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.chap{display:inline-flex;align-items:baseline;gap:7px;font-family:var(--font-body);font-size:13.5px;font-weight:500;color:var(--ink);background:var(--surface);border:1px solid var(--mist);border-radius:999px;padding:6px 13px;cursor:pointer;transition:all .18s var(--ease);}
.chap span{font-family:var(--font-mono);font-size:12px;color:var(--brand);}
.chap:hover{border-color:var(--brand);color:var(--brand);}
.chap.on{background:var(--brand-wash);border-color:var(--brand-line);color:var(--brand-deep);}

/* ====================== INTERACTIVE FIGURE ===================== */
.figure-wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:34px;align-items:start;margin-top:36px;background:var(--surface);border:1px solid var(--mist);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-lg);}
.vec-left{min-width:0;}
.vec-stage{position:relative;border-radius:var(--radius-sm);background:radial-gradient(circle at 50% 45%, #fff, var(--tint));border:1px solid var(--mist);overflow:hidden;}
#vecSvg{width:100%;height:auto;aspect-ratio:1/1;display:block;touch-action:none;cursor:grab;}
#vecSvg.grabbing{cursor:grabbing;}
.vec-readout{position:absolute;left:14px;top:13px;font-family:var(--font-mono);font-size:12.5px;line-height:1.6;color:var(--slate);background:rgba(255,255,255,.86);backdrop-filter:blur(3px);border:1px solid var(--mist);border-radius:9px;padding:9px 12px;pointer-events:none;}
.vec-readout b{color:var(--ink);font-weight:500;}
.ro-table{border-collapse:collapse;margin-top:4px;}
.ro-table th{font-weight:400;font-size:11.5px;text-align:right;padding:1px 0 1px 14px;color:var(--faint);}
.ro-table td{text-align:right;padding:1px 0 1px 14px;font-variant-numeric:tabular-nums;white-space:nowrap;}
.ro-table th:first-child,.ro-table td:first-child{text-align:left;padding-left:0;color:var(--slate);}
.ro-table .ok{color:var(--good);}
.ro-table .warn{color:var(--conflict);}
.ro-table .act{color:var(--constraint-ink);}

.vec-controls{display:flex;flex-direction:column;min-width:0;}
.ctl-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px;}
.slider-label{display:flex;justify-content:space-between;align-items:baseline;font-weight:600;font-size:15px;margin-bottom:8px;}
.slider-label + input[type=range] + .slider-label{margin-top:14px;}
.tau-val{font-family:var(--font-mono);color:var(--brand);font-size:16px;}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--brand) 0%, var(--brand) 30%, var(--mist) 30%);outline:none;margin:2px 0 0;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--brand);cursor:pointer;box-shadow:0 2px 6px rgba(122,14,59,.3);transition:transform .15s;}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12);}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--brand);cursor:pointer;}
.ctl-hint{font-size:13px;color:var(--slate);margin:10px 0 0;line-height:1.45;}
.ctl-sub{font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin:22px 0 10px;padding-top:18px;border-top:1px solid var(--mist);}
.preset-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.preset{font-family:var(--font-body);font-size:13px;font-weight:500;color:var(--ink);background:var(--surface);border:1px solid var(--mist);border-radius:999px;padding:6px 12px;cursor:pointer;transition:all .18s var(--ease);}
.preset:hover{border-color:var(--brand);color:var(--brand);}

.state-badge{margin:20px 0 0;font-size:14px;font-weight:600;line-height:1.4;padding:10px 14px;border-radius:9px;display:flex;align-items:flex-start;gap:10px;border:1px solid;}
.state-badge::before{content:"";flex:0 0 auto;width:9px;height:9px;margin-top:5px;border-radius:50%;background:currentColor;}
.state-badge.same{color:var(--good);background:#E8F5EF;border-color:#C2E3D4;}
.state-badge.bent{color:var(--constraint-ink);background:#FEF4E2;border-color:#F8DDAE;}

.legend-title{font-weight:600;font-size:15px;margin:20px 0 8px;}
.legend-hint{font-weight:400;color:var(--slate);font-size:13px;}
.legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 14px;}
.leg-item{display:grid;grid-template-columns:22px minmax(0,1fr);align-items:center;column-gap:10px;cursor:pointer;font-size:14.5px;line-height:1.3;padding:6px 8px;border-radius:8px;transition:background .15s;user-select:none;width:100%;text-align:left;background:none;border:none;color:inherit;font-family:inherit;}
.leg-item:hover{background:var(--brand-wash);}
.leg-item.off{opacity:.38;}
.leg-item.fixed{cursor:default;}
.leg-item.fixed:hover{background:none;}
.leg-swatch{width:22px;height:0;border-top-width:3px;border-top-style:solid;border-radius:2px;flex:0 0 auto;position:relative;}
.leg-swatch.arrow::after{content:"";position:absolute;right:-2px;top:-5.5px;border-left:7px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;}
.leg-swatch.dash{border-top-style:dashed;border-top-width:2px;}
.leg-swatch.block{height:13px;border:1px solid #F3D29B;border-radius:3px;background:var(--region);}
.leg-item .leg-name{font-weight:500;}
.leg-item .leg-tag{grid-column:2;font-size:12px;color:var(--slate);font-weight:400;}
#figNote{margin-top:18px;padding-top:16px;border-top:1px solid var(--mist);}

/* KaTeX equation blocks */
.eqn{background:var(--tint);border:1px solid var(--brand-line);border-left:3px solid var(--brand);border-radius:var(--radius-sm);padding:16px 20px;margin:6px 0 22px;overflow-x:auto;overflow-y:hidden;}
.eqn .katex{font-size:1.1em;}
.eqn .katex-display{margin:0;}

/* ---------- method two-column ---------- */
.cols{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:start;margin-top:20px;}
.col-text,.col-fig{min-width:0;}
.col-text p{color:var(--body);}
.col-fig .sticky-fig{position:sticky;top:80px;margin:0;}
figure{margin:0;}
.fig-img{width:100%;height:auto;border-radius:var(--radius-sm);border:1px solid var(--mist);background:#fff;display:block;}
.fig-link{display:block;border-radius:var(--radius-sm);cursor:zoom-in;}
.fig-link .fig-img{transition:border-color .2s var(--ease),box-shadow .2s var(--ease);}
.fig-link:hover .fig-img{border-color:var(--brand-line);box-shadow:var(--shadow);}
figcaption{font-size:14px;color:var(--slate);line-height:1.5;margin-top:12px;}
.note-inline{background:var(--brand-wash);border-radius:var(--radius-sm);padding:14px 18px;font-size:16px;}

/* the round, step by step (Algorithm 1) */
.steps-card{background:var(--surface);border:1px solid var(--mist);border-radius:var(--radius);padding:26px 26px 22px;box-shadow:var(--shadow);}
.steps-title{font-family:var(--font-display);font-weight:600;font-size:19px;letter-spacing:-.01em;margin:0 0 4px;}
.steps-sub{font-size:13.5px;color:var(--slate);margin:0 0 18px;}
.steps{list-style:none;margin:0;padding:0;counter-reset:step;}
.steps li{position:relative;padding:0 0 18px 46px;font-size:15px;line-height:1.55;color:var(--body);counter-increment:step;}
.steps li:last-child{padding-bottom:0;}
.steps li::before{content:counter(step);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:9px;background:var(--brand-wash);color:var(--brand);font-family:var(--font-display);font-weight:600;font-size:14px;display:flex;align-items:center;justify-content:center;}
.steps li::after{content:"";position:absolute;left:14.5px;top:35px;bottom:5px;width:1px;background:var(--brand-line);}
.steps li:last-child::after{display:none;}
.steps .who{display:block;font-weight:600;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin-bottom:2px;}
.steps li.new .who{color:var(--brand);}

/* full-width paper figures */
.wide-fig{margin-top:44px;}
.wide-fig .scroller{border-radius:var(--radius-sm);border:1px solid var(--mist);background:#fff;padding:16px 18px;overflow-x:auto;box-shadow:var(--shadow);}
/* below these widths the figure scrolls sideways instead of shrinking past legibility */
.wide-fig .scroller img{display:block;width:100%;min-width:1000px;height:auto;}
.wide-fig.tall .scroller img{min-width:780px;}

/* ============================ HISTORY ========================== */
.cache-wrap{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:38px;align-items:center;margin-top:34px;background:var(--surface);border:1px solid var(--mist);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-lg);}
.cache-stage{min-width:0;}
.cache-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:7px;max-width:400px;margin:0 auto;}
.cache-dot{aspect-ratio:1;border-radius:50%;background:var(--mist);transition:background-color .35s var(--ease),opacity .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease);}
.cache-dot.cached{background:var(--fedpcd);}
.cache-dot.now{background:var(--fedpcd);opacity:1;box-shadow:0 0 0 3px rgba(106,27,154,.2);transform:scale(1.06);}
.cache-key{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin-top:18px;font-size:13px;color:var(--slate);}
.cache-key span{display:inline-flex;align-items:center;gap:7px;}
.cache-key i{width:11px;height:11px;border-radius:50%;background:var(--mist);display:inline-block;}
.cache-key .k-now{background:var(--fedpcd);box-shadow:0 0 0 2.5px rgba(106,27,154,.2);}
.cache-key .k-old{background:linear-gradient(90deg,var(--fedpcd),rgba(106,27,154,.22));width:30px;border-radius:6px;}
.cache-panel{min-width:0;}
.cache-count{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin:0 0 4px;}
.cache-num{font-family:var(--font-display);font-weight:700;font-size:58px;line-height:1;color:var(--brand);letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.cache-lbl{font-size:15.5px;line-height:1.4;color:var(--body);max-width:17em;}
.cache-break{font-family:var(--font-mono);font-size:13px;color:var(--slate);margin:6px 0 0;}
.cache-break b{color:var(--ink);font-weight:500;}
.cache-break .ln{display:block;}
.cache-break .ln i{display:inline-block;width:22px;height:0;margin-right:8px;vertical-align:middle;border-top:2px dotted var(--fedpcd);}
.cache-break .ln.base i{border-top:1.5px dashed var(--faint);}
.cache-spark{display:block;width:100%;height:74px;margin:16px 0 4px;overflow:visible;}
.cache-ctl{margin-top:20px;padding-top:18px;border-top:1px solid var(--mist);}
.seg{display:inline-flex;background:var(--tint);border:1px solid var(--mist);border-radius:999px;padding:3px;gap:2px;}
.seg button{font-family:var(--font-body);font-size:13.5px;font-weight:500;color:var(--slate);background:none;border:none;border-radius:999px;padding:6px 14px;cursor:pointer;transition:all .18s var(--ease);}
.seg button:hover{color:var(--brand);}
.seg button[aria-pressed=true]{background:var(--brand);color:#fff;box-shadow:0 1px 3px rgba(122,14,59,.3);}
.ctl-line{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;font-weight:600;font-size:15px;margin-bottom:14px;}

/* ========================= GUARANTEES ========================= */
.grid{display:grid;gap:20px;margin-top:34px;}
.grid-guarantees{grid-template-columns:repeat(3,1fr);}
.card{background:var(--surface);border:1px solid var(--mist);border-radius:var(--radius);padding:28px 26px;box-shadow:var(--shadow);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);position:relative;}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--brand-line);}
.card-no{font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--brand);background:var(--brand-wash);width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.card p{margin:0;font-size:15.5px;line-height:1.6;color:var(--body);}
.card-quiet{background:linear-gradient(135deg,var(--brand),var(--brand-deep));border:none;}
.card-quiet h3,.card-quiet p{color:#fff;}
.card-quiet .card-no{background:rgba(255,255,255,.16);color:#fff;}
.textlink{display:inline-block;margin-top:14px;font-weight:600;font-size:15px;color:#fff;border-bottom:1.5px solid rgba(255,255,255,.5);}
.card-quiet .textlink:hover{border-color:#fff;}
.thm{margin-top:26px;}
.thm .eqn{margin-bottom:0;}

/* ========================== RESULTS =========================== */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:34px 0 40px;}
.stat{background:var(--surface);border:1px solid var(--mist);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);}
.stat-num{font-family:var(--font-display);font-weight:700;font-size:46px;line-height:1;color:var(--brand);letter-spacing:-.02em;margin-bottom:12px;}
.stat-num span{font-size:26px;}
.stat-lbl{font-size:14.5px;line-height:1.5;color:var(--body);}
.stat-lbl b{color:var(--ink);}

.alpha-bar{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin:0 0 6px;padding:14px 18px;background:var(--surface);border:1px solid var(--mist);border-radius:var(--radius-sm);box-shadow:var(--shadow);}
.alpha-bar .ab-lbl{font-weight:600;font-size:15px;}
.alpha-bar .ab-note{font-size:13.5px;color:var(--slate);flex:1 1 260px;}

.result-block{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;margin:38px 0;}
.result-block.reverse{grid-template-columns:.85fr 1.15fr;}
.result-block.reverse figure{order:2;}
.result-block figure{min-width:0;}
.result-block .fig-img{padding:10px 12px;}
.result-text h3{font-size:24px;margin-bottom:.5em;}
.result-text p{font-size:16.5px;color:var(--body);margin:0 0 .8em;}
.result-text p:last-child{margin-bottom:0;}

/* ========================= WHAT MATTERS ======================== */
.abl-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start;margin-top:34px;}
.abl-card{background:var(--surface);border:1px solid var(--mist);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);}
.abl-title{font-family:var(--font-display);font-weight:600;font-size:18px;margin:0 0 3px;}
.abl-sub{font-size:13.5px;color:var(--slate);margin:0 0 18px;}
.abl-head,.abl-row{display:grid;grid-template-columns:minmax(112px,.95fr) minmax(0,1.3fr) 50px 50px;gap:12px;align-items:center;}
.abl-head{font-size:12.5px;font-weight:600;color:var(--slate);padding-bottom:8px;border-bottom:1px solid var(--mist);margin-bottom:6px;}
.abl-head span:nth-child(n+3),.abl-row .val,.abl-row .w10{text-align:right;}
.abl-row{padding:7px 0;font-size:14.5px;}
.abl-row .name{font-weight:500;color:var(--ink);line-height:1.3;}
.abl-row .bar{position:relative;height:20px;border-radius:5px;background:var(--tint);box-shadow:inset 0 0 0 1px var(--mist);}
.abl-row .bar i{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:var(--fedpcd);opacity:.5;}
.abl-row.full .bar i{opacity:1;}
.abl-row.full .name,.abl-row.full .val{font-weight:600;}
.abl-row.ref .bar i{background:var(--m-fedavg);opacity:.75;}
.abl-row.drop .bar i{opacity:.3;}
.abl-row .val,.abl-row .w10{font-family:var(--font-mono);font-size:13px;font-variant-numeric:tabular-nums;}
.abl-row .val{color:var(--ink);}
.abl-row .w10{color:var(--slate);}
.abl-foot{font-size:13px;color:var(--slate);line-height:1.5;margin:16px 0 0;}
.abl-fig .fig-img{padding:10px 12px;}

/* =========================== SCOPE ============================ */
.scope-list{list-style:none;padding:0;margin:30px 0 0;}
.scope-list li{position:relative;padding:18px 0 18px 32px;border-bottom:1px solid var(--mist);font-size:16.5px;line-height:1.6;color:var(--body);}
.scope-list li:last-child{border-bottom:none;}
.scope-list .dot{position:absolute;left:0;top:25px;width:11px;height:11px;border-radius:50%;background:var(--brand-wash);border:2px solid var(--brand);}

/* ========================== CITATION ========================== */
.section-cite{padding-bottom:0;}
.cite-card{position:relative;background:var(--ink);border-radius:var(--radius);padding:8px;box-shadow:var(--shadow-lg);margin-top:24px;}
.cite-card pre{margin:0;padding:26px 28px;font-family:var(--font-mono);font-size:14px;line-height:1.7;color:#F0E4EA;overflow-x:auto;white-space:pre;}
.copy-btn{position:absolute;top:18px;right:18px;display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.22);padding:7px 13px;border-radius:8px;font-family:var(--font-body);font-size:13.5px;font-weight:500;cursor:pointer;transition:all .2s;}
.copy-btn:hover{background:var(--brand);border-color:var(--brand);}
.copy-btn .ico{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.cite-note{font-size:14.5px;color:var(--slate);margin-top:16px;}

.footer{margin-top:80px;border-top:1px solid var(--mist);padding:36px 0;}
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px;}
.foot-title{font-family:var(--font-display);font-weight:600;font-size:17px;margin:0;color:var(--ink);}
.foot-sub{font-size:14px;color:var(--slate);margin:4px 0 0;}
.foot-links{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:15px;font-weight:500;}
.foot-links a{color:var(--slate);text-decoration:underline;text-decoration-color:#D8CCD3;text-underline-offset:3px;}
.foot-links a:hover{color:var(--brand);text-decoration-color:var(--brand);}
.foot-links a.is-pending,.foot-links a.is-pending:hover{color:var(--faint);text-decoration-style:dashed;text-decoration-color:#D8CCD3;}

/* ---------- focus visibility (keyboard users) ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,.leg-item:focus-visible,.dotnav a:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:6px;}
.btn:focus-visible,.chap:focus-visible,.preset:focus-visible,.seg button:focus-visible{border-radius:999px;}
#vecSvg:focus-visible{outline:3px solid var(--brand);outline-offset:-3px;}

/* ---------- toast ---------- */
.toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,16px);background:var(--ink);color:#fff;padding:12px 22px;border-radius:10px;font-size:14.5px;font-weight:500;opacity:0;pointer-events:none;transition:all .3s var(--ease);z-index:120;box-shadow:var(--shadow-lg);}
.toast.show{opacity:1;transform:translate(-50%,0);}

/* hidden visitor-map widget: rendered (so the visit is logged) but invisible */
.visitor-widget{position:fixed;right:0;bottom:0;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;z-index:-1;}

/* ========================= RESPONSIVE ========================= */
@media (max-width:980px){
  .figure-wrap{grid-template-columns:1fr;}
  .cols{grid-template-columns:1fr;gap:28px;}
  .col-fig .sticky-fig{position:static;}
  .cache-wrap{grid-template-columns:1fr;gap:28px;}
  .grid-guarantees{grid-template-columns:1fr 1fr;}
  .stat-row{grid-template-columns:1fr;}
  .result-block,.result-block.reverse{grid-template-columns:1fr;gap:20px;}
  .result-block.reverse figure{order:0;}
  .abl-wrap{grid-template-columns:1fr;gap:28px;}
  .dotnav{display:none;}
}
@media (max-width:620px){
  body{font-size:16.5px;}
  .section{padding:64px 0;}
  .wrap{padding:0 20px;}
  .grid-guarantees{grid-template-columns:1fr;}
  .tldr-card{padding:26px 22px;}
  .tldr-lead{font-size:18px;}
  .figure-wrap{padding:16px;}
  .cache-wrap{padding:18px;}
  .cache-num{font-size:48px;}
  .lead{font-size:18px;}
  .stat-num{font-size:38px;}
  .hero{min-height:auto;padding:110px 0 70px;}
  .hero-bg{opacity:.09;}
  .scroll-cue{display:none;}
  .actions{gap:9px;}
  .btn{font-size:14px;padding:10px 16px;}
  .author{font-size:16.5px;margin-right:16px;}
  .legend{grid-template-columns:1fr;}
  /* move the figure readout below the canvas so it can't cover the vectors */
  .vec-readout{position:static;max-width:none;margin:0;border:none;border-top:1px solid var(--mist);border-radius:0;background:#fff;backdrop-filter:none;}
  .abl-card{padding:20px 18px;}
  .abl-head,.abl-row{grid-template-columns:minmax(92px,1fr) minmax(0,1fr) 44px 44px;gap:8px;}
  .abl-row{font-size:13.5px;}
  .abl-row .val,.abl-row .w10{font-size:12px;}
  /* the six-panel figures are small on a phone: say that they open at full size */
  .fig-link + figcaption::after{content:" Tap the figure to open it at full size.";color:var(--brand);}
  /* citation: copy button above the code, wrap long lines */
  .cite-card .copy-btn{position:static;margin:6px 6px 0;}
  .cite-card pre{white-space:pre-wrap;word-break:break-word;font-size:12.5px;padding:18px 18px;}
}