/* docs.css — shared design layer for /docs and /journey.
   Extends style.css (topbar, .project-tabs, .brand, .btn, .card) rather than
   replacing it, so both sections read as part of the same product.
   Adds: a muted gold accent, a display serif, and a mono face for math. */

:root{
  --gold:#d9b877;
  --gold-dim:#a8894f;
  --gold-soft:rgba(217,184,119,.12);
  --gold-line:rgba(217,184,119,.26);
  --teal:#7fd4d8;
  --teal-soft:rgba(127,212,216,.10);
  --teal-line:rgba(127,212,216,.24);
  --ink:#050914;
  --ink-2:#070d1a;
  --rule:rgba(255,255,255,.07);
  --serif:"Fraunces","Iowan Old Style",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,"Cascadia Mono",Consolas,monospace;
}

body.doc-page{
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(217,184,119,.055), transparent 60%),
    radial-gradient(circle at 88% 8%, rgba(127,212,216,.045), transparent 34%),
    linear-gradient(180deg, var(--ink), var(--ink-2) 40%, var(--ink));
  background-attachment:fixed;
}
/* Was 1500px while style.css sets 1440px for every other page, so the whole
   shell — brand, tab strip, content — jumped 60px wider moving from the app
   into the docs/compare/journey tier. One container width for the site. */
body.doc-page .project-tab.active{
  color:#fff6e3;
  background:linear-gradient(135deg, rgba(217,184,119,.20), rgba(127,212,216,.10));
  border-color:var(--gold-line);
  box-shadow:0 12px 28px rgba(217,184,119,.10);
}
body.doc-page .project-tab:hover{border-color:rgba(217,184,119,.18)}
/* Same containment style.css applies to the other module pages, so the tab
   strip scrolls internally instead of stretching the header. */
@media (max-width:1180px){
  body.doc-page .project-tabs,
  body.doc-page .topbar{min-width:0;max-width:100%}
}

/* ---------- shared type ---------- */
.doc-display{
  font-family:var(--serif);
  font-weight:600;
  font-optical-sizing:auto;
  letter-spacing:-.02em;
  line-height:1.08;
  margin:0;
}
.doc-kicker{
  margin:0 0 10px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--gold);
}
.doc-lede{
  margin:0;
  color:#b9c6d8;
  font-size:clamp(15px,1.15vw,17px);
  line-height:1.68;
  max-width:66ch;
}

/* ---------- the efficient-frontier motif ---------- */
.frontier-motif{
  position:absolute;inset:0;
  width:100%;height:100%;
  pointer-events:none;
  opacity:.5;
}
.frontier-motif path{vector-effect:non-scaling-stroke}

/* ================= DOCUMENTATION ================= */
.docs-hero{
  position:relative;overflow:hidden;
  padding:44px 40px 40px;
  border-radius:28px;
  border:1px solid var(--rule);
  background:linear-gradient(160deg, rgba(19,26,42,.96), rgba(9,14,25,.98));
  box-shadow:var(--shadow);
  margin-bottom:20px;
}
.docs-hero__inner{position:relative;z-index:1;max-width:760px}
.docs-hero h1{font-size:clamp(34px,4.4vw,58px);margin-bottom:16px}
.docs-hero h1 em{font-style:italic;color:var(--gold)}
.docs-meta{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;
}
.doc-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 13px;border-radius:999px;
  border:1px solid var(--rule);
  background:rgba(255,255,255,.035);
  font-family:var(--mono);font-size:11.5px;font-weight:500;
  color:#cbd8e8;letter-spacing:.02em;
}
.doc-chip i{font-size:11px;color:var(--gold-dim)}
.doc-chip--gold{border-color:var(--gold-line);background:var(--gold-soft);color:#f0dfbc}
.doc-chip--teal{border-color:var(--teal-line);background:var(--teal-soft);color:#d5f2f4}

/* layout: sticky sidebar + content */
.docs-layout{
  display:grid;
  grid-template-columns:262px minmax(0,1fr);
  gap:26px;
  align-items:start;
}
.docs-nav{
  position:sticky;top:18px;
  padding:18px 14px;
  border-radius:22px;
  border:1px solid var(--rule);
  background:linear-gradient(180deg, rgba(14,20,34,.94), rgba(9,14,25,.97));
  box-shadow:var(--shadow);
  max-height:calc(100vh - 36px);
  overflow-y:auto;
  scrollbar-width:thin;
}
.docs-nav__title{
  margin:0 0 12px 10px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;font-weight:600;color:#7f8da0;
}
.docs-nav ol{list-style:none;margin:0;padding:0;counter-reset:docsec}
.docs-nav a{
  display:flex;align-items:baseline;gap:10px;
  padding:9px 11px;border-radius:12px;
  color:#9fb0c6;font-size:13.5px;font-weight:600;line-height:1.35;
  border:1px solid transparent;
  transition:color .16s ease, background .16s ease, border-color .16s ease;
}
.docs-nav a::before{
  counter-increment:docsec;
  content:counter(docsec,decimal-leading-zero);
  font-family:var(--mono);font-size:10px;font-weight:600;
  color:var(--gold-dim);flex:none;
}
.docs-nav a:hover{color:#e8eef7;background:rgba(255,255,255,.04)}
.docs-nav a.is-active{
  color:#fff4df;background:var(--gold-soft);border-color:var(--gold-line);
}
.docs-nav a.is-active::before{color:var(--gold)}

/* The explicit minmax(0,1fr) track matters: an implicit grid column sizes to
   max-content, which lets a wide table or a nowrap code path stretch every
   section past the viewport and scroll the whole page sideways. */
.docs-content{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;min-width:0}
.doc-section{
  min-width:0;
  scroll-margin-top:20px;
  padding:32px;
  border-radius:24px;
  border:1px solid var(--rule);
  background:linear-gradient(180deg, rgba(13,19,32,.94), rgba(9,15,26,.97));
  box-shadow:var(--shadow);
}
.doc-section > h2{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(24px,2.4vw,32px);letter-spacing:-.02em;
  margin:0 0 8px;line-height:1.15;
}
.doc-section h3{
  font-size:16.5px;font-weight:800;letter-spacing:-.01em;
  margin:30px 0 10px;color:#eaf1fa;
}
.doc-section h4{
  font-family:var(--mono);font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dim);
  margin:24px 0 8px;
}
.doc-section p{margin:0 0 12px;color:#b3c1d4;font-size:14.6px;line-height:1.72}
.doc-section p:last-child{margin-bottom:0}
.doc-section ul,.doc-section ol{margin:0 0 12px;padding-left:22px;color:#b3c1d4;font-size:14.6px;line-height:1.72}
.doc-section li{margin-bottom:7px}
.doc-section li::marker{color:var(--gold-dim)}
.doc-section strong{color:#e9f1fa;font-weight:750}
.doc-section a:not(.doc-chip){color:var(--gold);border-bottom:1px solid var(--gold-line)}
.doc-section a:not(.doc-chip):hover{color:#f2e2c2}
code,.mono{font-family:var(--mono);font-size:.92em}
.doc-section :not(pre) > code,
.fig__cap code,.note code,.jr-photo__hint code{
  padding:2px 6px;border-radius:6px;
  background:rgba(217,184,119,.09);
  border:1px solid rgba(217,184,119,.14);
  color:#efdcb6;
  /* Not nowrap: captions carry long paths like
     backtest_outs/backtest_out_risk_1/portfolio_daily.csv, and forcing them onto
     one line pushed the whole page into horizontal scroll on narrow screens.
     Short identifiers still never break, because they fit. */
  overflow-wrap:anywhere;
}

/* file-path badge */
.src-path{
  display:inline-flex;align-items:center;gap:7px;
  margin:0 0 16px;padding:6px 11px;border-radius:9px;
  border:1px solid var(--rule);background:rgba(255,255,255,.028);
  font-family:var(--mono);font-size:11.5px;color:#93a3b8;
  max-width:100%;overflow-x:auto;white-space:nowrap;
}
.src-path i{color:var(--gold-dim);flex:none}
.src-path b{color:#d7e2ef;font-weight:600}

/* equation block */
.eq{
  font-size:16px;
  margin:14px 0;padding:18px 20px;
  border-radius:16px;
  border:1px solid var(--rule);
  border-left:2px solid var(--gold-line);
  background:linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.012));
  overflow-x:auto;
}
/* On a math-heavy page the equations ARE the content. KaTeX's Computer Modern
   has a noticeably smaller x-height than Inter, so matching nominal px still
   reads as "smaller than the prose" — these sizes are set by eye against the
   14.6px body text, not by arithmetic. */
.eq .katex{font-size:1.70em;line-height:1.5}
.eq .katex-display{margin:.6em 0}
.eq .katex-display > .katex{font-size:1.80em}
/* Inline math inside a paragraph stays closer to the prose size so it doesn't
   wreck the line rhythm. */
.doc-section p .katex,
.doc-section li .katex{font-size:1.42em}
.eq-note{
  margin:8px 0 0;font-size:13px;color:#8fa0b6;line-height:1.6;
}
.eq-note b{color:#c6d3e3;font-weight:650}
/* pre-KaTeX fallback: raw TeX should still look deliberate, not broken */
.eq .eq-raw{font-family:var(--mono);font-size:13px;color:#cfe0d6;white-space:pre-wrap}

pre.code{
  margin:14px 0;padding:16px 18px;border-radius:14px;
  border:1px solid var(--rule);background:rgba(3,7,15,.6);
  overflow-x:auto;font-family:var(--mono);font-size:12.6px;line-height:1.68;
  color:#c3d3e4;
}
pre.code .c{color:#6f8399;font-style:italic}
pre.code .k{color:var(--gold)}

/* callouts */
.note{
  margin:16px 0;padding:15px 18px;border-radius:14px;
  border:1px solid var(--rule);border-left:2px solid var(--teal-line);
  background:var(--teal-soft);
  font-size:14px;line-height:1.68;color:#c2d6da;
}
.note strong{color:#e6f7f8}
.note--warn{border-left-color:rgba(251,146,60,.4);background:rgba(251,146,60,.07);color:#e6d0bd}
.note--warn strong{color:#ffe6d2}
.note__label{
  display:block;margin-bottom:5px;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:600;color:var(--teal);
}
.note--warn .note__label{color:#fbbf7c}

/* tables */
.table-wrap{margin:16px 0;overflow-x:auto;border-radius:14px;border:1px solid var(--rule)}
table.doc-table{width:100%;border-collapse:collapse;font-size:13.4px;min-width:520px}
table.doc-table th{
  text-align:left;padding:12px 14px;
  background:rgba(255,255,255,.035);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;font-weight:600;color:#9fb0c6;
  border-bottom:1px solid var(--rule);white-space:nowrap;
}
table.doc-table td{
  padding:12px 14px;color:#b8c6d8;line-height:1.55;
  border-bottom:1px solid rgba(255,255,255,.045);vertical-align:top;
}
table.doc-table tr:last-child td{border-bottom:none}
table.doc-table tbody tr:hover td{background:rgba(255,255,255,.02)}
table.doc-table td.num,table.doc-table th.num{
  text-align:right;font-family:var(--mono);font-size:12.6px;white-space:nowrap;
}
table.doc-table td b{color:#eef4fb}
.t-pos{color:#5fd88a}
.t-neg{color:#f08a7a}
.t-gold{color:var(--gold)}
.row-mark td{background:rgba(217,184,119,.055)}
.row-mark td:first-child{box-shadow:inset 2px 0 0 var(--gold)}

/* stat strip */
.stat-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;margin:18px 0;
}
.stat{
  padding:16px 17px;border-radius:16px;
  border:1px solid var(--rule);background:rgba(255,255,255,.026);
}
.stat span{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:#8496ac;font-weight:600;margin-bottom:8px;
}
.stat strong{display:block;font-size:24px;font-weight:800;letter-spacing:-.03em;color:#f1f6fc}
.stat small{display:block;margin-top:5px;font-size:11.5px;color:#7e8fa4;line-height:1.45}
.stat--gold strong{color:var(--gold)}
.stat--teal strong{color:var(--teal)}

/* charts */
.fig{
  margin:20px 0;padding:20px;border-radius:18px;
  border:1px solid var(--rule);background:rgba(3,7,15,.42);
}
.fig__head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.fig__head h4{margin:0 0 4px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dim)}
.fig__head p{margin:0;font-size:13px;color:#8fa0b6;max-width:60ch;line-height:1.55}
.fig__canvas{position:relative;height:330px}
.fig__canvas--tall{height:400px}
.fig__cap{
  margin:12px 0 0;padding-top:12px;border-top:1px solid var(--rule);
  font-size:12.4px;color:#7f90a6;line-height:1.6;
}
.fig__cap b{color:#a9b9cc;font-weight:650}
.tag-real,.tag-schem{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  padding:5px 11px;border-radius:999px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;
}
.tag-real{background:rgba(34,197,94,.11);border:1px solid rgba(34,197,94,.28);color:#8ce9ac}
.tag-schem{background:rgba(251,146,60,.10);border:1px solid rgba(251,146,60,.30);color:#ffc79b}

/* solver comparison cards */
.solver-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:18px 0}
.solver-card{
  padding:20px;border-radius:18px;
  border:1px solid var(--rule);background:rgba(255,255,255,.026);
  display:flex;flex-direction:column;gap:10px;
}
.solver-card__top{display:flex;align-items:center;gap:11px}
.solver-card__ico{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  font-size:14px;flex:none;
}
.solver-card h4{margin:0;font-size:15px;font-weight:800;letter-spacing:-.01em;color:#eef4fb;
  font-family:inherit;text-transform:none;letter-spacing:-.01em;}
.solver-card__sub{margin:2px 0 0;font-family:var(--mono);font-size:10.5px;color:#8496ac;letter-spacing:.06em}
.solver-card p{margin:0;font-size:13.4px;line-height:1.62;color:#a9b8cb}
.solver-card dl{margin:6px 0 0;display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:12.4px}
.solver-card dt{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#7e8fa4;padding-top:2px}
.solver-card dd{margin:0;color:#c2d0e0}
.sc-exact  .solver-card__ico{background:rgba(56,189,248,.14);color:#7dd3fc;border:1px solid rgba(56,189,248,.24)}
.sc-cont   .solver-card__ico{background:rgba(34,197,94,.14);color:#86efac;border:1px solid rgba(34,197,94,.24)}
.sc-qubo   .solver-card__ico{background:rgba(217,184,119,.14);color:var(--gold);border:1px solid var(--gold-line)}

/* pipeline */
.pipe{display:grid;gap:10px;margin:18px 0}
.pipe__step{
  display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;
  padding:16px 18px;border-radius:16px;
  border:1px solid var(--rule);background:rgba(255,255,255,.024);
  position:relative;
}
.pipe__n{
  width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  font-family:var(--mono);font-size:12px;font-weight:600;
  background:var(--gold-soft);border:1px solid var(--gold-line);color:var(--gold);
}
.pipe__step h4{margin:0 0 5px;font-family:inherit;font-size:14.5px;font-weight:800;
  letter-spacing:-.01em;text-transform:none;color:#eef4fb}
.pipe__step p{margin:0 0 8px;font-size:13.4px;line-height:1.6;color:#a7b6c9}
.pipe__io{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.pipe__io span{
  font-family:var(--mono);font-size:10.5px;padding:4px 9px;border-radius:7px;
  border:1px solid var(--rule);background:rgba(0,0,0,.28);color:#8fa0b6;
}
.pipe__io span b{color:var(--teal);font-weight:600}

/* references */
.refs{margin:0;padding:0;list-style:none;counter-reset:ref}
.refs li{
  display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,.045);
  font-size:13.6px;line-height:1.62;color:#adbccf;
}
.refs li:last-child{border-bottom:none}
.refs li::before{
  counter-increment:ref;content:"[" counter(ref) "]";
  font-family:var(--mono);font-size:11px;color:var(--gold-dim);padding-top:2px;
}
.refs i{color:#cfdcea;font-style:italic}
.refs .ref-doi{font-family:var(--mono);font-size:11.5px;color:#7e8fa4}

.doc-foot{
  margin-top:22px;padding:26px 32px;border-radius:22px;
  border:1px solid var(--rule);background:rgba(255,255,255,.022);
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
}
.doc-foot p{margin:0;font-size:13px;color:#8496ac;line-height:1.6}
.doc-foot strong{color:#d7e2ef}

/* ================= JOURNEY — presenter deck ================= */
/* Rebuilt as a slide deck rather than a scrolling timeline: this page is driven
   live on a call, so each station fills the viewport and advances on a keypress. */

body.journey-page{overflow:hidden}
.jr-shell{padding-bottom:0}
.jr-topbar{margin-bottom:0}

.jr-deck{
  position:fixed;inset:0;top:92px;
  overflow-y:auto;overflow-x:hidden;
  scroll-snap-type:y mandatory;
  /* No CSS scroll-behavior here: it would also animate direct scrollTop writes,
     which makes the instant fallback in journey.js impossible. journey.js passes
     the behavior it wants to scrollTo() instead. */
  scrollbar-width:none;
}
.jr-deck::-webkit-scrollbar{display:none}

.jr-slide{
  min-height:calc(100vh - 92px);
  scroll-snap-align:start;
  scroll-snap-stop:always;
  display:grid;place-items:center;
  padding:26px clamp(18px,4vw,56px) 64px;
  position:relative;
}
.jr-slide__grid{
  width:min(1420px,100%);
  display:grid;grid-template-columns:minmax(0,0.86fr) minmax(0,1.14fr);
  gap:clamp(26px,4vw,64px);
  align-items:center;
}
/* Zig-zag: even-numbered stations put the visual on the left and the copy on
   the right, so the eye alternates instead of tracking one rigid column.
   Driven by grid-column rather than direction/order so it stays accessible —
   DOM order is still copy-then-visual, which is also the reading order when
   the layout collapses to a single column. */
.jr-slide[data-flip="1"] .jr-slide__grid{
  grid-template-columns:minmax(0,1.14fr) minmax(0,0.86fr);
}
.jr-slide[data-flip="1"] .jr-slide__copy{grid-column:2;grid-row:1}
.jr-slide[data-flip="1"] .jr-visual{grid-column:1;grid-row:1}
.jr-slide__copy{min-width:0}
.jr-num{
  margin:0 0 14px;
  font-family:var(--mono);font-size:clamp(40px,4.6vw,64px);font-weight:600;
  line-height:1;letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1.5px var(--gold-line);
}
.jr-slide__copy .jr-station__tag{
  margin:0 0 12px;font-family:var(--mono);font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--gold);
}
.jr-slide__copy h2{
  font-size:clamp(28px,3.5vw,50px);margin:0 0 20px;color:#f6f9fd;
}
.jr-lede{
  margin:0;color:#b6c4d7;
  font-size:clamp(15px,1.25vw,19px);line-height:1.62;max-width:52ch;
}
.jr-slide__copy .jr-station__facts{margin-top:26px}

/* --- title + closing slides --- */
.jr-slide--title,.jr-slide--close{overflow:hidden}
.jr-title__inner{
  position:relative;z-index:1;
  width:min(880px,100%);text-align:center;margin:0 auto;
}
.jr-slide--title h1{font-size:clamp(36px,5.4vw,72px);margin:0 0 20px}
.jr-slide--title h1 em,.jr-slide--close h2 em{font-style:italic;color:var(--gold)}
.jr-slide--close h2{font-size:clamp(30px,4vw,54px);margin:0 0 18px;color:#f7f2e6}
.jr-title__inner .doc-lede{margin:0 auto;text-align:center}
.jr-title__inner .docs-meta{justify-content:center;margin-top:26px}
/* `.jr-btn` was being used on the title and closing slides without ever having
   been defined, so those controls were falling through to the browser's own
   default button chrome — grey fill, square corners, black 2px border — in the
   middle of an ink-navy page. This is that missing base. */
.jr-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:46px;padding:0 22px;
  border-radius:12px;
  border:1px solid var(--gold-line);
  background:rgba(255,255,255,.035);
  color:#f0e6d2;
  font-family:inherit;font-size:14px;font-weight:600;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;
  transition:border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}
.jr-btn:hover{
  border-color:rgba(217,184,119,.5);
  background:rgba(217,184,119,.10);
  color:#fff6e3;
}
.jr-btn:active{transform:translateY(1px)}
.jr-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.jr-btn--ghost{border-color:var(--rule);color:#b6c4d7;background:transparent}
.jr-btn--ghost:hover{border-color:var(--gold-line);color:#e8d9bb;background:rgba(255,255,255,.03)}

/* --- the deck's one primary action ---
   A play triangle says "video". This is a walk along the efficient frontier, so
   the button carries the site's own motif instead: the curve, with a point that
   travels up it while the arrow leans into the scroll direction. */
.jr-btn--primary{
  border-color:rgba(217,184,119,.42);
  background:
    linear-gradient(135deg, rgba(217,184,119,.16), rgba(127,212,216,.07)),
    rgba(9,14,25,.6);
  box-shadow:0 14px 34px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06);
}
.jr-btn--primary:hover{
  border-color:rgba(217,184,119,.72);
  background:
    linear-gradient(135deg, rgba(217,184,119,.26), rgba(127,212,216,.11)),
    rgba(9,14,25,.6);
  box-shadow:0 18px 44px rgba(0,0,0,.42), 0 0 0 4px rgba(217,184,119,.09),
             inset 0 1px 0 rgba(255,255,255,.09);
  transform:translateY(-1px);
}
.jr-btn--primary:active{transform:translateY(0)}

.jr-start{
  margin-top:34px;
  gap:16px;
  min-height:64px;
  padding:0 24px 0 20px;
  text-align:left;
}
.jr-start__motif{display:flex;color:var(--gold);flex:none}
.jr-start__motif svg{width:46px;height:26px;overflow:visible}
/* The curve stays drawn at rest — the button should read as a frontier even
   before anyone points at it — and only brightens under the cursor. */
.jr-start__curve{opacity:.55;transition:opacity .3s ease}
.jr-start:hover .jr-start__curve{opacity:1}
/* cx/cy are animatable as CSS properties in current engines; where they are
   not, the point simply stays at the origin of the curve and nothing breaks. */
.jr-start__dot{transition:cx .55s cubic-bezier(.4,0,.2,1), cy .55s cubic-bezier(.4,0,.2,1)}
.jr-start:hover .jr-start__dot{cx:43;cy:2.6}
.jr-start__text{display:flex;flex-direction:column;gap:3px;min-width:0}
.jr-start__label{
  font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:-.01em;
  color:#fdf6e7;line-height:1.15;
}
.jr-start__sub{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold-dim);
}
.jr-start:hover .jr-start__sub{color:var(--gold)}
.jr-start__go{
  flex:none;font-size:13px;color:var(--gold);opacity:.7;
  transition:transform .25s ease, opacity .25s ease;
}
.jr-start:hover .jr-start__go{transform:translateY(3px);opacity:1}

body.is-ar .jr-start{text-align:right}
body.is-ar .jr-start__label{font-family:"Amiri",serif}
body.is-ar .jr-start__sub{
  font-family:"IBM Plex Sans Arabic",sans-serif;text-transform:none;letter-spacing:.02em;
}
/* The curve reads left-to-right as "up and to the right"; mirrored in RTL it
   would read as a decline. */
[dir="rtl"] .jr-start__motif{transform:scaleX(-1)}

@media (prefers-reduced-motion:reduce){
  .jr-start__curve,.jr-start__dot,.jr-start__go,.jr-btn{transition:none}
  .jr-btn--primary:hover,.jr-start:hover .jr-start__go{transform:none}
}
.jr-hint{
  margin:18px 0 0;font-family:var(--mono);font-size:11.5px;color:#6f8095;letter-spacing:.04em;
}
.jr-hint kbd{
  font-family:var(--mono);font-size:10.5px;padding:2px 6px;border-radius:5px;
  border:1px solid var(--rule);background:rgba(255,255,255,.05);color:#c4d1e0;
}
.jr-actions{display:flex;gap:12px;justify-content:center;margin-top:32px;flex-wrap:wrap}

/* --- the visual half of each station --- */
.jr-visual{margin:0;min-width:0;display:flex;flex-direction:column;gap:12px}
.jr-visual__cap{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:#8fa0b6;
}
.jr-chart{
  position:relative;
  height:clamp(280px,42vh,460px);
  padding:18px 20px 14px;
  border-radius:20px;
  border:1px solid var(--rule);
  background:linear-gradient(180deg, rgba(13,19,32,.9), rgba(8,13,24,.95));
  box-shadow:var(--shadow);
}
.jr-visual__note{
  margin:0;font-size:13px;line-height:1.6;color:#8b9cb1;max-width:64ch;
}
.jr-visual__note b{color:#c9d6e5;font-weight:650}

/* --- photo placeholder --- */
.jr-photo{
  position:relative;
  height:clamp(280px,44vh,470px);
  display:grid;place-content:center;justify-items:center;gap:12px;
  padding:30px;text-align:center;
  border-radius:20px;
  border:2px dashed var(--gold-line);
  background:
    repeating-linear-gradient(45deg, rgba(217,184,119,.022) 0 12px, transparent 12px 24px),
    rgba(255,255,255,.014);
  transition:border-color .2s ease, background .2s ease;
}
.jr-photo:hover{border-color:rgba(217,184,119,.44)}
.jr-photo > i{font-size:32px;color:var(--gold-dim);opacity:.75}
.jr-photo__label{
  font-family:var(--mono);font-size:12.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
}
.jr-photo__hint{
  font-size:12.5px;line-height:1.6;color:#7e8fa4;max-width:38ch;
}
.jr-photo__hint code{
  font-family:var(--mono);font-size:11.5px;padding:1px 5px;border-radius:5px;
  background:rgba(217,184,119,.09);border:1px solid rgba(217,184,119,.14);color:#e3d1ae;
}
.jr-photo::after{
  content:attr(data-photo);
  position:absolute;top:12px;left:14px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#6b7b8f;
}

/* --- presenter chrome --- */
.jr-rail{
  position:fixed;right:20px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:11px;z-index:60;
}
.jr-rail button{
  width:9px;height:9px;padding:0;border-radius:50%;
  border:1px solid var(--gold-line);background:transparent;transition:.22s ease;
}
.jr-rail button:hover{background:rgba(217,184,119,.4)}
.jr-rail button.is-on{background:var(--gold);box-shadow:0 0 12px rgba(217,184,119,.5);transform:scale(1.3)}

.jr-controls{
  position:fixed;right:22px;bottom:22px;z-index:60;
  display:flex;align-items:center;gap:8px;
  padding:7px 9px;border-radius:14px;
  border:1px solid var(--rule);
  background:rgba(9,14,25,.9);backdrop-filter:blur(8px);
  box-shadow:0 14px 34px rgba(0,0,0,.4);
}
.jr-controls button{
  width:34px;height:34px;border-radius:10px;
  border:1px solid var(--rule);background:rgba(255,255,255,.04);
  color:#c3d0e0;font-size:12px;transition:.18s ease;
}
.jr-controls button:hover{background:rgba(217,184,119,.14);border-color:var(--gold-line);color:#f2e2c2}
.jr-counter{
  font-family:var(--mono);font-size:11.5px;color:#8b9cb1;
  min-width:44px;text-align:center;letter-spacing:.06em;
}
.jr-progress{
  position:fixed;left:0;right:0;bottom:0;height:2px;z-index:60;
  background:rgba(255,255,255,.05);
}
.jr-progress > span{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg, var(--gold), var(--teal));
  transition:width .35s ease;
}

/* presenter mode: chrome out of the way, slides take the whole screen */
body.jr-presenting .jr-shell{display:none}
body.jr-presenting .jr-deck{top:0}
body.jr-presenting .jr-slide{min-height:100vh}

/* Entrance animation, per slide.
   Deliberately additive: content is visible by default and the active slide
   plays a one-shot animation on top. The obvious alternative — base opacity:0
   lifted by an .is-active rule — makes readability depend on a transition
   actually running, and this page is the live presentation aid. If animations
   are stalled, disabled, or the script never runs, every slide still reads. */
/* Transform only — never opacity. A frozen or non-running animation then costs
   at worst an 18px offset, instead of leaving the slide completely blank.
   On a page whose whole job is being readable on a call, that trade is obvious. */
@keyframes jrRise{
  from{transform:translateY(18px)}
  to{transform:none}
}
/* No fill-mode on purpose. `both`/`backwards` would pin the element to the
   `from` keyframe (opacity 0) whenever the animation cannot actually run, which
   is the exact failure this design is meant to avoid. With no fill mode the
   element sits at its natural, visible style before and after — the animation is
   pure decoration on top. */
body.jr-js .jr-slide.is-active .jr-slide__copy{
  animation:jrRise .55s cubic-bezier(.2,.7,.3,1);
}
body.jr-js .jr-slide.is-active .jr-visual{
  animation:jrRise .64s cubic-bezier(.2,.7,.3,1);
}
.jr-slide--title .jr-title__inner,
.jr-slide--close .jr-title__inner{opacity:1;transform:none}

/* ---------- responsive: laptop first, this is judged on a laptop ---------- */
@media (max-width:1240px){
  .docs-layout{grid-template-columns:222px minmax(0,1fr);gap:20px}
  .doc-section{padding:26px}
  .jr-slide__grid{grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr);gap:30px}
  .jr-slide[data-flip="1"] .jr-slide__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr)}
}
@media (max-width:1000px){
  .docs-layout{grid-template-columns:minmax(0,1fr)}
  .docs-nav{position:static;max-height:none;overflow:visible;padding:14px}
  .docs-nav ol{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:4px}
  .docs-hero{padding:34px 26px 30px}

  /* Deck: stack copy over visual, and stop forcing full-viewport slides so a
     short screen can still scroll through a station's content. */
  .jr-rail{display:none}
  .jr-slide{min-height:auto;padding:34px 20px 44px;scroll-snap-align:start}
  .jr-slide--title,.jr-slide--close{min-height:calc(100vh - 92px)}
  .jr-slide__grid,
  .jr-slide[data-flip="1"] .jr-slide__grid{grid-template-columns:minmax(0,1fr);gap:26px}
  /* stacked: copy always first, flip is a wide-screen affordance only */
  .jr-slide[data-flip="1"] .jr-slide__copy{grid-column:1;grid-row:1}
  .jr-slide[data-flip="1"] .jr-visual{grid-column:1;grid-row:2}
  .jr-num{font-size:38px}
  .jr-chart{height:clamp(240px,38vh,330px)}
  .jr-photo{height:clamp(200px,32vh,300px)}
}
@media (max-width:640px){
  body.doc-page .app-shell{padding:14px}
  .doc-section{padding:20px}
  .doc-section > h2{font-size:22px}
  .docs-hero{padding:28px 20px 26px;border-radius:22px}
  .fig{padding:14px}
  .fig__canvas{height:270px}
  .fig__canvas--tall{height:320px}
  .stat-row{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
  .doc-foot{padding:20px}
  .jr-deck{top:78px}
  .jr-slide{padding:26px 16px 40px}
  .jr-chart{height:250px;padding:12px 12px 8px}
  .jr-photo{height:210px;padding:20px}
  .jr-controls{right:12px;bottom:12px}
  .jr-actions{flex-direction:column}
  .jr-actions .jr-btn{width:100%;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .jr-deck{scroll-behavior:auto}
  body.jr-js .jr-slide.is-active .jr-slide__copy,
  body.jr-js .jr-slide.is-active .jr-visual{animation:none}
  .jr-progress > span{transition:none}
  html{scroll-behavior:auto}
}

@media print{
  .docs-nav,.jr-rail,.jr-controls,.jr-progress,.topbar{display:none}
  .docs-layout{grid-template-columns:1fr}
  body.doc-page{background:#fff}
  body.journey-page{overflow:visible}
  .jr-deck{position:static;overflow:visible}
  .jr-slide{min-height:auto;page-break-after:always}
  body.jr-js .jr-slide.is-active .jr-slide__copy,
  body.jr-js .jr-slide.is-active .jr-visual{animation:none}
}

/* ================= COMPARE — explorer ================= */
.xp{display:grid;gap:18px}
.xp__head{
  padding:34px 34px 30px;border-radius:26px;
  border:1px solid var(--rule);
  background:linear-gradient(160deg, rgba(19,26,42,.96), rgba(9,14,25,.98));
  box-shadow:var(--shadow);
}
.xp__head h1{font-size:clamp(28px,3.6vw,46px);margin:0 0 14px}
.xp__head .doc-lede{max-width:62ch}

/* --- control bar --- */
.xp__controls{
  display:grid;gap:16px;
  padding:18px 20px;border-radius:20px;
  border:1px solid var(--rule);
  background:linear-gradient(180deg, rgba(14,20,34,.9), rgba(9,14,25,.94));
  position:sticky;top:10px;z-index:30;
  backdrop-filter:blur(10px);
  box-shadow:0 16px 40px rgba(0,0,0,.28);
}
.xp__label{
  display:flex;align-items:center;gap:10px;
  margin:0 0 9px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:#7f8da0;
}
.xp__mini{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:3px 8px;border-radius:6px;border:1px solid var(--rule);
  background:rgba(255,255,255,.03);color:#8fa0b6;transition:.16s ease;
}
.xp__mini:hover{border-color:var(--gold-line);color:var(--gold)}

.xp__metrics{display:flex;flex-wrap:wrap;gap:7px}
.xp__metric{
  display:inline-flex;align-items:center;gap:8px;
  min-height:38px;padding:0 14px;border-radius:12px;
  border:1px solid var(--rule);background:rgba(255,255,255,.03);
  color:#a9b8cb;font-size:13px;font-weight:700;letter-spacing:-.01em;
  transition:.16s ease;
}
.xp__metric i{font-size:11px;opacity:.8}
.xp__metric:hover{color:#eaf1fa;background:rgba(255,255,255,.055);transform:translateY(-1px)}
.xp__metric.is-on{
  color:#0c1018;background:linear-gradient(135deg, var(--gold), #c9a662);
  border-color:transparent;font-weight:800;
  box-shadow:0 10px 24px rgba(217,184,119,.22);
}
.xp__metric.is-on i{opacity:1}

.xp__series{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.xp__group{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.xp__grouplabel{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#6b7b8f;margin-right:3px;
}
.xp__chip{
  display:inline-flex;align-items:center;gap:7px;
  min-height:32px;padding:0 11px;border-radius:999px;
  border:1px solid var(--rule);background:rgba(255,255,255,.025);
  color:#93a3b8;font-size:12.5px;font-weight:650;
  transition:.16s ease;
}
.xp__swatch{width:9px;height:9px;border-radius:50%;flex:none;opacity:.45;transition:.16s ease}
.xp__chip:hover:not(:disabled){color:#e5edf6;border-color:var(--border-strong)}
.xp__chip.is-on{color:#f2f7fc;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2)}
.xp__chip.is-on .xp__swatch{opacity:1;box-shadow:0 0 8px currentColor}
.xp__chip.is-off{opacity:.3;cursor:not-allowed;text-decoration:line-through}

/* --- chart stage --- */
.xp__stage{
  padding:24px 26px 22px;border-radius:24px;
  border:1px solid var(--rule);
  background:linear-gradient(180deg, rgba(13,19,32,.94), rgba(9,15,26,.97));
  box-shadow:var(--shadow);
}
.xp__stagehead{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:16px;flex-wrap:wrap;margin-bottom:18px;
}
.xp__stagehead h2{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(20px,2.2vw,29px);letter-spacing:-.02em;
  margin:0 0 6px;line-height:1.18;color:#f4f8fd;
}
.xp__stagehead p{margin:0;font-size:13.5px;color:#8fa0b6;line-height:1.55;max-width:64ch}
.xp__canvas{position:relative;height:clamp(320px,48vh,520px)}
.xp__note{
  margin:18px 0 0;padding-top:16px;border-top:1px solid var(--rule);
  font-size:13.8px;line-height:1.68;color:#a2b1c4;max-width:80ch;
}
.xp__note b{color:#e6eef8;font-weight:700}

/* --- provenance --- */
.xp__prov{
  border:1px solid var(--rule);border-radius:18px;
  background:rgba(255,255,255,.02);overflow:hidden;
}
.xp__prov summary{
  padding:15px 20px;cursor:pointer;list-style:none;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:600;color:#8fa0b6;
  display:flex;align-items:center;gap:10px;transition:.16s ease;
}
.xp__prov summary::-webkit-details-marker{display:none}
.xp__prov summary::before{
  content:"+";font-size:14px;color:var(--gold);width:14px;display:inline-block;
}
.xp__prov[open] summary::before{content:"−"}
.xp__prov summary:hover{color:#d7e2ef;background:rgba(255,255,255,.02)}
.xp__provbody{padding:4px 20px 20px;border-top:1px solid var(--rule)}
.xp__provbody p{margin:12px 0;font-size:13.4px;line-height:1.68;color:#a2b1c4}
.xp__provbody b{color:#e6eef8}
.xp__provbody code{
  font-family:var(--mono);font-size:11.5px;padding:2px 6px;border-radius:5px;
  background:rgba(217,184,119,.09);border:1px solid rgba(217,184,119,.14);
  color:#efdcb6;overflow-wrap:anywhere;
}
.xp__provbody pre.code{margin:10px 0}

@media (max-width:1000px){
  .xp__controls{position:static;backdrop-filter:none}
  .xp__head{padding:26px 22px 22px}
  .xp__stage{padding:18px 16px 16px}
}
@media (max-width:640px){
  .xp__canvas{height:300px}
  .xp__metric{min-height:34px;padding:0 11px;font-size:12px}
  .xp__metric span{font-size:12px}
  .xp__series{gap:11px}
  .xp__stagehead{margin-bottom:14px}
}

/* ================= LANGUAGE TOGGLE + ARABIC / RTL ================= */
.lang-toggle{
  display:inline-flex;align-items:center;gap:5px;
  min-height:42px;padding:0 14px;border-radius:14px;
  border:1px solid var(--rule);background:rgba(255,255,255,.03);
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em;
  color:#8fa0b6;transition:.18s ease;
}
.lang-toggle:hover{border-color:var(--gold-line);color:#e8eef7;transform:translateY(-1px)}
.lang-toggle__sep{opacity:.35}
.lang-toggle__en,.lang-toggle__ar{transition:color .18s ease}
.lang-toggle__ar{font-family:"Amiri",serif;font-size:15px;line-height:1}
.lang-toggle .lang-toggle__en{color:var(--gold)}
.lang-toggle.is-ar .lang-toggle__en{color:inherit}
.lang-toggle.is-ar .lang-toggle__ar{color:var(--gold)}

/* --- Arabic typography ---
   Amiri carries the display role Fraunces plays in English; IBM Plex Sans
   Arabic handles body text and pairs with the Latin body face. Numerals,
   variable names and library names stay Latin, so the Latin faces are kept in
   the stack after the Arabic ones rather than replaced. */
body.is-ar{
  font-family:"IBM Plex Sans Arabic","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
body.is-ar .doc-display,
body.is-ar .doc-section > h2,
body.is-ar .xp__stagehead h2,
body.is-ar .jr-slide__copy h2{
  font-family:"Amiri","Fraunces",Georgia,serif;
  font-weight:700;
  letter-spacing:0;            /* negative tracking damages Arabic joining */
  line-height:1.42;            /* Arabic needs more leading than Fraunces */
}
body.is-ar .doc-lede,
body.is-ar .jr-lede{line-height:1.9;letter-spacing:0}
body.is-ar .doc-section p,
body.is-ar .doc-section li,
body.is-ar .xp__note,
body.is-ar .fig__cap,
body.is-ar .note{line-height:1.95;letter-spacing:0}
/* Kickers/labels are uppercase Latin-styled; Arabic has no case, so drop the
   transform and the wide tracking that would otherwise break joining. */
body.is-ar .doc-kicker,
body.is-ar .xp__label,
body.is-ar .docs-nav__title,
body.is-ar .xp__grouplabel,
body.is-ar .jr-station__tag,
body.is-ar .stat span,
body.is-ar .note__label,
body.is-ar .fig__head h4,
body.is-ar .xp__prov summary{
  font-family:"IBM Plex Sans Arabic","Inter",sans-serif;
  text-transform:none;letter-spacing:.02em;
}
/* Numbers, tickers, code and math stay Latin and LTR even inside RTL prose. */
body.is-ar .mono,body.is-ar code,body.is-ar pre,
body.is-ar .stat strong,body.is-ar .jr-fact b,
body.is-ar table.doc-table td.num,body.is-ar table.doc-table th.num,
body.is-ar .jr-num,body.is-ar .xp__counter,body.is-ar .jr-counter{
  font-family:var(--mono);
  direction:ltr;unicode-bidi:isolate;
}
body.is-ar .katex{direction:ltr;unicode-bidi:isolate}

/* --- RTL layout mirroring --- */
[dir="rtl"] .doc-section ul,
[dir="rtl"] .doc-section ol{padding-left:0;padding-right:22px}
[dir="rtl"] .eq{border-left:1px solid var(--rule);border-right:2px solid var(--gold-line)}
[dir="rtl"] .note{border-left:1px solid var(--rule);border-right:2px solid var(--teal-line)}
[dir="rtl"] .note--warn{border-right-color:rgba(251,146,60,.4)}
[dir="rtl"] .row-mark td:first-child{box-shadow:inset -2px 0 0 var(--gold)}
[dir="rtl"] table.doc-table th{text-align:right}
[dir="rtl"] table.doc-table td.num,
[dir="rtl"] table.doc-table th.num{text-align:left}
[dir="rtl"] .docs-nav__title{margin-left:0;margin-right:10px}
[dir="rtl"] .refs li,
[dir="rtl"] .pipe__step,
[dir="rtl"] .solver-card dl{direction:rtl}
/* Reference list stays LTR: entries are Latin author/journal citations. */
[dir="rtl"] .refs li{direction:ltr;text-align:left}

/* explorer */
[dir="rtl"] .xp__prov summary::before{margin-left:0}

/* journey deck: mirror the alternating slots */
[dir="rtl"] .jr-rail{right:auto;left:20px}
[dir="rtl"] .jr-controls{right:auto;left:22px}
[dir="rtl"] .jr-progress > span{margin-left:auto}

/* The presenter deck and docs sidebar are grid-based, so RTL flips them
   automatically; these are the pieces that were positioned explicitly. */

/* ================= DOCS — view switcher + reference views ================= */
.docs-views{
  display:flex;gap:7px;flex-wrap:wrap;
  margin:0 0 18px;padding:7px;border-radius:16px;
  border:1px solid var(--rule);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  width:fit-content;
}
.docs-view{
  display:inline-flex;align-items:center;gap:9px;
  min-height:38px;padding:0 15px;border-radius:11px;
  border:1px solid transparent;background:transparent;
  color:#9fb0c6;font-size:13px;font-weight:700;transition:.16s ease;
}
.docs-view i{font-size:11.5px;opacity:.8}
.docs-view:hover{color:#e8eef7;background:rgba(255,255,255,.045)}
.docs-view.is-on{
  color:#0c1018;background:linear-gradient(135deg, var(--gold), #c9a662);
  box-shadow:0 8px 20px rgba(217,184,119,.2);
}
.docs-view.is-on i{opacity:1}

.ref-view .doc-lede{margin-bottom:26px}
.ref-group__back{
  display:inline-block;margin-top:6px;
  font-family:var(--mono);font-size:11.5px;
  color:#7e8fa4 !important;border-bottom:none !important;
}
.ref-group__back:hover{color:var(--gold) !important}

/* ================= DOCS — curated Mathematical Core ================= */
.math-core{
  padding:clamp(24px,3vw,40px);
  background:linear-gradient(180deg, rgba(13,19,32,.97), rgba(7,12,22,.98));
}
.math-core__header{max-width:820px}
.math-core__header .doc-lede{margin-bottom:0}
.math-core__nav{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin:28px 0 34px;padding:6px;width:fit-content;max-width:100%;
  border:1px solid var(--rule);border-radius:14px;background:rgba(255,255,255,.025);
}
.math-core .math-core__nav a{
  display:flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;
  border:1px solid transparent;border-radius:9px;color:#9fb0c6;
  font-size:12px;font-weight:700;white-space:nowrap;
}
.math-core .math-core__nav a:hover{
  color:#f1f5fa;border-color:var(--rule);background:rgba(255,255,255,.035);
}
.math-core__nav a span{font-family:var(--mono);font-size:9.5px;color:var(--gold-dim)}
.math-core__chapters{display:grid;gap:22px}
.math-chapter{
  min-width:0;padding:clamp(24px,3vw,38px);scroll-margin-top:100px;
  border:1px solid var(--rule);border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.027), rgba(255,255,255,.008));
}
.math-chapter--core{
  border-color:var(--gold-line);
  background:linear-gradient(150deg, rgba(217,184,119,.065), rgba(255,255,255,.018) 34%, rgba(127,212,216,.025));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025), 0 22px 55px rgba(0,0,0,.18);
}
.math-chapter__head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start;margin-bottom:32px}
.math-chapter__number{
  display:grid;place-items:center;width:48px;height:48px;border-radius:14px;
  border:1px solid var(--gold-line);background:var(--gold-soft);
  font-family:var(--mono);font-size:13px;font-weight:600;color:var(--gold);
}
.math-chapter__eyebrow{
  margin:0 0 5px !important;font-family:var(--mono);font-size:10px !important;
  line-height:1.4 !important;letter-spacing:.18em;text-transform:uppercase;color:var(--teal) !important;
}
.math-core .math-chapter__head h3{
  margin:0 0 7px;padding:0;border:0;font-family:var(--serif);font-weight:600;
  font-size:clamp(23px,2.5vw,32px);letter-spacing:-.02em;line-height:1.16;color:#f2f7fc;
}
.math-chapter__head p:last-child{max-width:68ch;margin:0;color:#9fadc0;font-size:14px;line-height:1.65}
.math-stack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.math-stack .math-unit{padding:0 22px;border-left:1px solid var(--rule)}
.math-stack .math-unit:first-child{padding-left:0;border-left:0}
.math-stack .math-unit:last-child{padding-right:0}
.math-unit{min-width:0}
.math-unit + .math-unit--open,
.math-unit--open + .math-unit--open{margin-top:30px;padding-top:30px;border-top:1px solid var(--rule)}
.math-unit__index{
  margin:0 0 7px !important;font-family:var(--mono);font-size:10px !important;
  line-height:1.3 !important;letter-spacing:.14em;color:var(--gold-dim) !important;
}
.math-core .math-unit h4{
  margin:0 0 10px;font-family:Inter,system-ui,sans-serif;font-size:16px;
  letter-spacing:-.01em;text-transform:none;color:#eaf1fa;
}
.math-unit > p:not(.math-unit__index):not(.math-method-tag){max-width:72ch;color:#aab8ca;font-size:13.8px;line-height:1.68}
.math-label{
  display:block;margin-bottom:7px;font-family:var(--mono);font-size:9.5px;
  font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#8fa0b6;
}
.math-core .eq{
  max-width:100%;margin:12px 0;padding:15px 16px;text-align:center;
  border-left:1px solid var(--rule);background:rgba(4,8,16,.34);
  scrollbar-width:thin;
}
.math-core .eq .katex{font-size:1.42em}
.math-core .eq .katex-display{margin:.3em 0}
.math-core .eq .katex-display > .katex{font-size:1.44em}
.math-core .math-equation--hero{
  padding:22px 18px;border-color:var(--gold-line);border-left:2px solid var(--gold);
  background:linear-gradient(180deg, rgba(217,184,119,.065), rgba(255,255,255,.012));
}
.math-core .math-equation--hero .katex-display > .katex{font-size:clamp(1.32em,1.86vw,1.66em)}
.math-equation--system{min-height:174px;display:grid;place-items:center}
.math-flow,.math-timeline{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  margin-top:28px;padding:17px 20px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:12px;font-weight:600;color:#c6d2e1;
}
.math-flow i,.math-timeline i,.math-process i,.math-bridge i,.math-model-switch i{font-size:9px;color:var(--gold-dim)}
.math-flow__result{color:var(--teal);font-size:15px}
.math-pair-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
.math-pair-grid > div,.math-constraint-grid > div,.math-metric-grid > div,.math-term-grid > div{
  min-width:0;padding:15px;border:1px solid var(--rule);border-radius:14px;background:rgba(255,255,255,.018);
}
.math-pair-grid .eq,.math-constraint-grid .eq,.math-metric-grid .eq,.math-term-grid .eq{margin:0;padding:8px;border:0;background:transparent}
.math-pair-grid__wide{grid-column:1/-1}
.math-pair-grid--shared{grid-template-columns:repeat(4,minmax(0,1fr))}
.math-pair-grid--shared > div{padding:14px 12px}
.math-bridge{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  margin-top:18px;padding:13px 16px;border-radius:12px;background:var(--teal-soft);
  font-size:12.5px;color:#aebdcf;
}
.math-bridge strong{color:#dff4f5}
.math-comparison-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:30px}
.math-unit--method,.math-unit--qubo,.math-unit--objective{
  padding:22px;border:1px solid var(--rule);border-radius:17px;background:rgba(255,255,255,.017);
}
.math-unit--qubo,.math-unit--objective{margin-top:14px}
.math-method-tag{
  float:right;margin:0 0 5px 12px !important;padding:5px 9px;border:1px solid var(--teal-line);
  border-radius:999px;background:var(--teal-soft);font-family:var(--mono);font-size:9px !important;
  line-height:1.2 !important;letter-spacing:.1em;text-transform:uppercase;color:var(--teal) !important;
}
.math-concept{display:grid;gap:4px;justify-items:center;padding-top:5px;font-size:13px}
.math-concept span{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#75869b}
.math-process{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;padding-top:5px;font-size:11.5px;color:#9fb0c6}
.math-term-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
.math-term-grid > div{padding:13px 14px}
.math-dual{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:14px;align-items:center}
.math-dual > div{min-width:0}
.math-dual__vs{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--rule);
  font-family:var(--mono);font-size:10px;color:#7e8fa4;
}
.math-constraint-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px}
.math-model-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.math-model-switch > div{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:13px;border-radius:12px;background:rgba(255,255,255,.025);font-size:12px;color:#9fb0c6}
.math-model-switch strong{color:#e0e8f2}
.math-model-switch i:not(.fa-solid){font-family:var(--serif);color:#d8e3ef}
.math-unit--quiet{margin-top:30px;padding:22px;border-top:1px solid var(--rule);background:rgba(255,255,255,.012);border-radius:14px;opacity:.88}
.math-unit--quiet .math-pair-grid{margin-bottom:15px}
.math-timeline{justify-content:flex-start;border:1px solid var(--rule);border-radius:14px;background:rgba(255,255,255,.018)}
.math-timeline__future{padding:7px 10px;border:1px solid var(--teal-line);border-radius:8px;color:#d8f2f3;background:var(--teal-soft)}
.math-metric-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}

@media (max-width:1080px){
  .math-stack,.math-pair-grid--shared{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .math-stack .math-unit,.math-stack .math-unit:first-child,.math-stack .math-unit:last-child{padding:0;border-left:0}
  .math-constraint-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .math-metric-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .math-core{padding:20px}
  .math-core__nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .math-core .math-core__nav a{white-space:normal}
  .math-chapter{padding:22px 18px}
  .math-comparison-grid,.math-term-grid,.math-model-switch{grid-template-columns:minmax(0,1fr)}
  .math-dual{grid-template-columns:minmax(0,1fr)}
  .math-dual__vs{margin:auto}
  .math-equation--system{min-height:0}
  .math-core .math-equation--hero .katex-display > .katex{font-size:1.2em}
}
@media (max-width:540px){
  .math-core{padding:16px}
  .math-core__nav,.math-stack,.math-pair-grid,.math-pair-grid--shared,.math-constraint-grid{grid-template-columns:minmax(0,1fr)}
  .math-chapter__head{grid-template-columns:minmax(0,1fr);gap:14px}
  .math-chapter__number{width:42px;height:42px}
  .math-pair-grid__wide{grid-column:auto}
  .math-flow,.math-timeline{align-items:flex-start;justify-content:flex-start;gap:10px;padding:14px}
  .math-flow i,.math-timeline i{transform:rotate(90deg);margin:4px 2px}
  .math-flow,.math-timeline{flex-direction:column}
  .math-core .eq{padding:12px 10px}
  .math-core .eq .katex-display > .katex{font-size:1.26em}
}

/* ================= DOCS — typographic rhythm ================= */
/* The page previously read flat: every block had the same weight and the same
   gap. These rules give it a hierarchy — sections open with a lead paragraph,
   headings carry real space above them, and supporting blocks sit tighter to
   the thing they support. */
/* :not(.src-path) matters: the source-file chip is also a <p> and often the
   first one after the heading, so without this it inherited the 74ch prose
   measure, which overrode its own max-width:100%. Being white-space:nowrap,
   it then pushed the whole document into horizontal scroll on narrow screens. */
.doc-section > h2 + p:not(.src-path),
.doc-section > .doc-kicker + h2 + p:not(.src-path){
  font-size:16.4px;line-height:1.7;color:#c3d0e0;
  max-width:74ch;margin-bottom:20px;
}
.doc-section h3{
  margin:38px 0 12px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.05);
}
.doc-section h3:first-of-type{border-top:none;padding-top:0;margin-top:28px}
.doc-section h4{margin:26px 0 9px}
.doc-section h4 + .eq,
.doc-section h4 + p{margin-top:0}
.doc-section p + .eq,
.doc-section p + .fig,
.doc-section p + .table-wrap{margin-top:16px}
.doc-section .eq + p,
.doc-section .fig + p,
.doc-section .table-wrap + p{margin-top:18px}
.doc-section > p:first-of-type strong:first-child{color:#f2f7fc}
/* Lead-in sentence of a section gets slightly more presence. */
.doc-lead{
  font-size:17px !important;line-height:1.66 !important;
  color:#ccd8e6 !important;max-width:70ch;
  margin-bottom:22px !important;
}
.doc-lead b,.doc-lead strong{color:#fff;font-weight:700}

@media (max-width:640px){
  .docs-views{width:100%}
  .docs-view{flex:1;justify-content:center;padding:0 10px;font-size:12px}
  .docs-view span{font-size:12px}
  .doc-section h3{margin-top:30px;padding-top:16px}
}

/* Arabic-mode scope notice: only visible when the site is in Arabic. */
.ar-notice{display:none}
body.is-ar .ar-notice{
  display:flex;gap:12px;align-items:flex-start;
  margin:0 0 18px;padding:14px 18px;border-radius:16px;
  border:1px solid var(--teal-line);background:var(--teal-soft);
}
body.is-ar .ar-notice i{color:var(--teal);font-size:13px;margin-top:4px;flex:none}
body.is-ar .ar-notice p{
  margin:0;font-size:13.5px;line-height:1.9;color:#c2d6da;
  font-family:"IBM Plex Sans Arabic","Inter",sans-serif;
}
body.is-ar .ar-notice code{
  font-family:var(--mono);direction:ltr;unicode-bidi:isolate;font-size:11.5px;
  padding:1px 5px;border-radius:5px;background:rgba(217,184,119,.09);
  border:1px solid rgba(217,184,119,.14);color:#efdcb6;
}

/* ---------- Journey: illustrative graphics ---------- */
.tag-illus{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  padding:5px 11px;border-radius:999px;
  background:rgba(167,139,250,.10);border:1px solid rgba(167,139,250,.28);
  color:#c4b5fd;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;
}
body.is-ar .tag-illus{text-transform:none;letter-spacing:.02em;font-family:"IBM Plex Sans Arabic",sans-serif}
/* A third kind of visual: somebody else's mark, reproduced as-is. Neither our
   illustration nor our measurement, so it gets neither of those tags. Teal,
   which is already the PEX/data accent. */
.tag-mark{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  padding:5px 11px;border-radius:999px;
  background:var(--teal-soft);border:1px solid var(--teal-line);
  color:var(--teal);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;
}
body.is-ar .tag-mark{text-transform:none;letter-spacing:.02em;font-family:"IBM Plex Sans Arabic",sans-serif}
.jr-illus{
  height:clamp(280px,44vh,470px);
  border-radius:20px;overflow:hidden;
  border:1px solid var(--rule);
  background:linear-gradient(180deg, rgba(13,19,32,.9), rgba(8,13,24,.95));
  box-shadow:var(--shadow);
  display:grid;place-items:center;
}
.jr-illus img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:1000px){ .jr-illus{height:clamp(220px,34vh,320px)} }
@media (max-width:640px){ .jr-illus{height:230px} }

/* ---------- Journey: real image files ----------
   Four real files now sit in the deck and no two share a shape: a 486x720
   portrait photograph, a 1860x959 screenshot, a 447x447 logo and a 5184x3456
   3:2 photograph. An SVG illustration will stretch to whatever box it is given;
   none of these will, and squashing or lopping the corner off a real photo is
   exactly the sort of thing a judge notices.

   So no file is fitted to a fixed box. Each frame declares its own file's true
   ratio in `--ar` and takes that shape, which means the box always matches the
   pixels and `object-fit` is left with nothing to distort. Adding a fifth image
   is then a two-value job in the markup — its ratio and which regime it is in —
   with no new CSS.

   A slot is bounded on both axes, hence two regimes:
     --wide  fills the column, derives its height from the ratio
     --tall  is capped by the slide's height budget (`--illus-h`), derives its
             width, and centres itself in the column
   Roughly 3:2 and wider is width-driven; squarer or taller than that must be
   height-driven, or a square file would stand as tall as the column is wide.

   These sit after the `.jr-illus` media queries above on purpose: equal
   specificity, so source order is what decides. */
.jr-illus--file{aspect-ratio:var(--ar);margin-inline:auto}
.jr-illus--file.jr-illus--wide{width:100%;height:auto}
.jr-illus--file.jr-illus--tall{
  height:clamp(280px,64vh,var(--illus-h,460px));
  width:auto;max-width:100%;
}

/* Frame ratio equals file ratio, so cover and contain are identical in the
   normal case — the choice only bites when a max-width or max-height clamp
   forces the box off-ratio. A photograph may be trimmed a little then; a
   screenshot or a logo must not lose content, so `--keep` letterboxes instead. */
.jr-illus--file img{object-fit:cover}
.jr-illus--keep img{object-fit:contain}

/* A tall file centred in the wide visual column leaves a lot of air either
   side. Narrowing the column instead makes it read as a deliberate plate. */
.jr-slide[data-media="portrait"] .jr-slide__grid{
  grid-template-columns:minmax(0,1.16fr) minmax(0,0.84fr);
}
.jr-slide[data-flip="1"][data-media="portrait"] .jr-slide__grid{
  grid-template-columns:minmax(0,0.84fr) minmax(0,1.16fr);
}

/* The PEX mark is a palette PNG with no alpha channel, so it carries its own
   white ground. Floating that on the deck's dark gradient would read as a
   pasted white square; making the frame white lets the two meet seamlessly and
   turns it into an intentional card. The file already has generous internal
   margin, so it needs no padding of ours. */
/* The PEX mark is the one image here that is somebody else's artwork, so it
   gets a card of its own rather than the deck's dark frame: its wordmark is
   near-black teal and would disappear against ink-navy.

   Source note: this uses `assets/pex_logo.png` (3333x2452, transparent, tightly
   cropped) rather than the 447x447 copy in the journey folder. That copy is a
   palette PNG with no alpha whose content occupies only 329x241 of the canvas —
   40% of its own area — so it could never be shown large without either a
   crop-and-zoom hack or visible softness. At 3333px the source is ~4.5x the
   rendered size, so it stays sharp at any card size the slide allows.

   The frame takes the logo's ratio and fills the column width. Filling matters
   for more than size: a centred card left the caption stranded at the column
   edge, visually detached from the logo it labels.

   No height cap on this one. A cap would only engage on windows short enough
   that the copy column overflows anyway, and the cure is worse than the
   disease: it shrinks the logo AND re-centres the card, which is what detached
   the caption in the first place. MarkoScale is presented on laptops and
   desktops, so the frame simply fills its column at every size that matters. */
.jr-illus--plate{background:#fff;border-color:var(--gold-line)}
.jr-illus--plate img{padding:var(--pad,0)}
/* `--plate-w` trims the card below full column width. Note the `margin-inline:0`
   that comes with it: `.jr-illus--file` centres its frames, and centring a
   narrower card is exactly what stranded the caption at the column edge before.
   Anchoring the leading edge instead keeps caption and logo aligned at any
   width, in both directions. Two-class selector because `.jr-illus--wide` sets
   width at the same specificity. */
.jr-illus--file.jr-illus--plate{
  width:var(--plate-w,100%);
  margin-inline:0;
}

@media (max-width:1000px){
  .jr-slide[data-media="portrait"] .jr-slide__grid,
  .jr-slide[data-flip="1"][data-media="portrait"] .jr-slide__grid{grid-template-columns:minmax(0,1fr)}
  .jr-illus--file.jr-illus--wide{height:auto}
  .jr-illus--file.jr-illus--tall{height:clamp(260px,42vh,var(--illus-h,400px))}
}
@media (max-width:640px){
  .jr-illus--file.jr-illus--wide{height:auto}
  .jr-illus--file.jr-illus--tall{height:min(330px,var(--illus-h,330px))}
}

/* Stations that carry a second, supporting paragraph under the lede. */
.jr-slide__copy .jr-lede + .jr-lede{margin-top:15px}
.jr-lede--sm{
  font-size:clamp(14px,1.05vw,16.5px);line-height:1.68;color:#9db0c6;max-width:56ch;
}
.jr-lede b{color:#dbe6f2;font-weight:650}

/* --- text-heavy stations ---
   One station carries four paragraphs where the others carry two. Rather than
   let it be the single slide that scrolls — which would break the one-station-
   one-screen contract the whole deck is built on — it gets a denser scale: the
   measures widen so the same words need fewer lines, and the headline and body
   each step down a notch. Without this the copy overruns 1280x720 by ~126px,
   most of it the headline tripling to three lines.

   Tuned against 1280x720, the tightest screen the deck has to survive. The grid
   split is deliberately close to the deck default — the denser type buys back
   enough room that the visual does not have to be starved to pay for it. */
.jr-slide[data-density="compact"] .jr-slide__grid{
  grid-template-columns:minmax(0,0.96fr) minmax(0,1.04fr);
}
.jr-slide[data-flip="1"][data-density="compact"] .jr-slide__grid{
  grid-template-columns:minmax(0,1.04fr) minmax(0,0.96fr);
}
.jr-slide[data-density="compact"] .jr-slide__copy h2{
  font-size:clamp(27px,3vw,44px);margin-bottom:16px;
}
.jr-slide[data-density="compact"] .jr-num{font-size:clamp(30px,3vw,42px);margin-bottom:10px}
.jr-slide[data-density="compact"] .jr-lede{
  font-size:clamp(14px,1.12vw,17px);line-height:1.6;max-width:62ch;
}
.jr-slide[data-density="compact"] .jr-lede--sm{
  font-size:clamp(13.5px,1.05vw,16px);line-height:1.62;max-width:66ch;
}
.jr-slide[data-density="compact"] .jr-slide__copy .jr-lede + .jr-lede{margin-top:11px}
.jr-slide[data-density="compact"] .jr-slide__copy .jr-station__facts{margin-top:18px}
@media (max-width:1000px){
  .jr-slide[data-density="compact"] .jr-slide__grid,
  .jr-slide[data-flip="1"][data-density="compact"] .jr-slide__grid{grid-template-columns:minmax(0,1fr)}
}

/* ================= COMPARE — control-bar refinement =================
   The first cut read as a row of generic buttons. This version gives the bar
   the structure of an instrument panel: the measure selector is the primary
   control and sits in its own inset well; the series chips are secondary and
   read as toggles with a live colour key rather than as more buttons. */
.xp__controls{
  grid-template-columns:minmax(0,1fr);
  gap:0;
  padding:0;
  overflow:hidden;
  border-color:rgba(255,255,255,.09);
  background:linear-gradient(180deg, rgba(16,23,38,.94), rgba(10,15,27,.96));
}
.xp__control{padding:16px 20px}
.xp__control + .xp__control{
  border-top:1px solid var(--rule);
  background:rgba(0,0,0,.16);
}
.xp__label{
  margin:0 0 11px;
  font-size:10px;letter-spacing:.24em;color:#6f8095;
}
.xp__label::before{
  content:"";width:14px;height:1px;background:var(--gold-line);flex:none;
}

/* primary control: measure */
.xp__metrics{
  gap:4px;padding:4px;border-radius:14px;
  background:rgba(0,0,0,.3);
  border:1px solid rgba(255,255,255,.05);
  width:fit-content;max-width:100%;
}
.xp__metric{
  min-height:36px;padding:0 13px;border-radius:10px;
  border-color:transparent;background:transparent;
  font-size:12.5px;font-weight:750;color:#8d9db2;
}
.xp__metric i{font-size:10.5px;opacity:.6;transition:opacity .16s ease}
.xp__metric:hover{background:rgba(255,255,255,.05);color:#dce6f2;transform:none}
.xp__metric:hover i{opacity:.9}
.xp__metric.is-on{
  color:#100c05;
  background:linear-gradient(135deg,#e6c98a,#c9a662);
  box-shadow:0 6px 16px rgba(217,184,119,.26), inset 0 1px 0 rgba(255,255,255,.35);
}
.xp__metric.is-on i{opacity:1}

/* secondary control: series toggles */
.xp__series{gap:10px 22px}
.xp__group{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px;
  padding-inline-end:22px;position:relative;
}
.xp__group:not(:last-child)::after{
  content:"";position:absolute;inset-inline-end:0;top:50%;
  transform:translateY(-50%);
  width:1px;height:20px;background:var(--rule);
}
.xp__grouplabel{
  font-size:9px;letter-spacing:.18em;color:#5f6e81;margin-inline-end:5px;
}
.xp__chip{
  min-height:30px;padding:0 12px;border-radius:8px;
  background:rgba(255,255,255,.02);border-color:rgba(255,255,255,.06);
  color:#8496ac;font-size:12px;font-weight:600;
}
.xp__swatch{
  width:7px;height:7px;border-radius:2px;opacity:.3;
  box-shadow:none;transition:opacity .16s ease, transform .16s ease;
}
.xp__chip:hover:not(:disabled){background:rgba(255,255,255,.05);color:#e8eff7}
.xp__chip.is-on{
  color:#f4f8fc;background:rgba(255,255,255,.075);
  border-color:rgba(255,255,255,.16);
}
.xp__chip.is-on .xp__swatch{opacity:1;transform:scale(1.15)}
.xp__chip.is-off{opacity:.26;text-decoration:none}
.xp__chip.is-off .xp__swatch{opacity:.15}
.xp__mini{margin-inline-start:auto}

/* stage: more air, and a clearer relationship to the bar above it */
.xp__stage{padding:26px 28px 24px;margin-top:2px}
.xp__stagehead{
  align-items:center;
  padding-bottom:16px;margin-bottom:20px;
  border-bottom:1px solid var(--rule);
}
.xp__stagehead h2{margin-bottom:5px}
.xp__canvas{height:clamp(340px,50vh,540px)}
.xp__note{
  margin-top:20px;padding:14px 16px;border-top:none;
  border-radius:12px;
  background:rgba(255,255,255,.022);
  border:1px solid var(--rule);
  border-inline-start:2px solid var(--gold-line);
  font-size:13.6px;
}
.xp{gap:14px}
#xpStats{margin:0}

@media (max-width:760px){
  .xp__metrics{width:100%}
  .xp__metric{flex:1 1 auto;justify-content:center;padding:0 9px}
  .xp__group:not(:last-child)::after{display:none}
  .xp__group{padding-inline-end:0}
  .xp__stage{padding:16px 14px 14px}
}

/* ================= COMPARE — method introduction =================
   Open, three-column editorial comparison from the supplied reference. */
.compare-page{overflow-x:hidden}
.compare-page .page{
  grid-template-columns:minmax(0,1fr);width:100%;min-width:0;
  max-width:calc(100vw - 44px);
}
.compare-page .xp{min-width:0;max-width:100%}
.method-compare{
  position:relative;overflow:hidden;isolation:isolate;
  min-width:0;max-width:100%;min-height:850px;
  padding:22px 38px 44px;border-bottom:1px solid var(--rule);
}
.method-compare__motif{inset:58px -38px 0;width:calc(100% + 76px);opacity:.58;z-index:-1}
.method-compare__intro{text-align:center;margin:0 auto 40px;transform:translateY(-32px)}
.method-compare__intro .doc-kicker{margin-bottom:13px}
.method-compare__intro h1{
  font-size:clamp(38px,4.25vw,60px);margin-bottom:13px;color:#f6f7fb;
}
.method-compare__intro h1 em{font-style:normal;color:var(--gold)}
.method-compare__intro .doc-lede{margin-inline:auto;max-width:62ch}

.method-compare__grid{
  display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);
  gap:42px;align-items:start;max-width:1380px;margin:0 auto;
}
.method-compare__approach{min-width:0;direction:ltr;text-align:left}
.method-compare__eyebrow{
  margin:0 0 12px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.24em;text-transform:uppercase;font-weight:600;
}
.method-compare__approach--quantum .method-compare__eyebrow{color:var(--teal)}
.method-compare__approach--classical .method-compare__eyebrow{color:var(--gold)}
.method-compare__approach h2{
  margin:0;font-family:var(--serif);font-size:clamp(25px,2.25vw,32px);
  font-weight:600;letter-spacing:-.02em;line-height:1.18;color:#f2f5fa;
}
.method-compare__eyebrow,
.method-compare__approach h2{transform:translateY(-22px)}
.method-compare__details{display:grid;gap:23px;margin:6px 0 0;padding:0}
.method-compare__row{
  display:grid;grid-template-columns:minmax(130px,.72fr) minmax(0,1.48fr);
  gap:18px;align-items:start;margin:0;
}
.method-compare__row dt,
.method-compare__row dd{margin:0;font-size:13.5px;line-height:1.55}
.method-compare__row dt{color:#91a4bf}
.method-compare__row dd{min-width:0;color:#d8e1ed}
.method-compare__row .mono{font-size:.92em;color:#e6edf5}
.method-compare__row--model{margin-top:8px;align-items:start}

.method-compare__equation.eq{
  margin:-7px 0 0;padding:0;border:0;background:none;border-radius:0;
  max-width:100%;overflow:visible;color:#f3f5f9;text-align:center;
}
.method-compare__equation.eq .katex-display{margin:.35em 0;padding:0}
.method-compare__equation.eq .katex-display > .katex{font-size:clamp(1.02em,1.35vw,1.28em)}
.method-compare__approach--quantum .method-compare__equation{
  width:125%;margin-top:8px;margin-left:-12.5%;
}
.method-compare__approach--classical .method-compare__equation .katex-display > .katex{
  font-size:clamp(1.2em,1.7vw,1.5em);
}

.method-compare__center{min-width:0;text-align:center;direction:ltr}
.method-compare__versus{
  display:grid;grid-template-rows:92px auto 150px;gap:12px;
  justify-items:center;align-items:stretch;color:#edf1f7;
}
.method-compare__versus i{
  display:block;width:1px;justify-self:center;
  background:linear-gradient(180deg, rgba(217,184,119,.02), rgba(217,184,119,.28));
}
.method-compare__versus i:last-child{
  background:linear-gradient(180deg, rgba(217,184,119,.28), rgba(217,184,119,.04));
}
.method-compare__versus span{
  align-self:center;padding:9px 0;font-family:var(--serif);font-size:22px;
  font-weight:600;line-height:1;border-top:1px solid var(--gold-line);
  border-bottom:1px solid var(--gold-line);
}
.method-compare__shared{margin-top:11px;color:#dce4ee}
.method-compare__shared-title{
  margin:0 0 6px;color:#9fb0c6;font-size:14px;line-height:1.4;
}
.method-compare__constraint.eq{
  margin:0;padding:9px 0 0;border:0;background:none;border-radius:0;
  overflow:visible;color:#f2f4f8;
}
.method-compare__constraint.eq .katex-display{margin:.66em 0}
.method-compare__constraint.eq .katex-display > .katex{font-size:1.34em}
.method-compare__shared-title--where{margin-top:30px}
.method-compare__definitions{
  position:relative;left:50%;transform:translateX(-50%);
  width:540px;margin:0;padding:0;border:0;border-radius:0;background:none;
  overflow:visible;font-size:12.6px;line-height:1.7;color:#c7d2e1;white-space:nowrap;
}
.method-compare__definitions .katex{font-size:1.12em;color:#f2f4f8}

[dir="rtl"] .method-compare__grid{direction:ltr}

@media (max-width:1180px){
  .method-compare{min-height:790px;padding-inline:24px}
  .method-compare__grid{grid-template-columns:minmax(0,1fr) 104px minmax(0,1fr);gap:24px}
  .method-compare__row{grid-template-columns:120px minmax(0,1fr);gap:13px}
  .method-compare__row dt,.method-compare__row dd{font-size:12.7px}
  .method-compare__definitions{width:480px;font-size:11.8px}
}

@media (max-width:900px){
  .method-compare{min-height:0;padding:24px 20px 40px}
  .method-compare__intro{margin-bottom:36px;transform:none}
  .method-compare__grid{grid-template-columns:minmax(0,1fr);gap:34px}
  .method-compare__approach{max-width:720px;width:100%;margin-inline:auto}
  .method-compare__eyebrow,.method-compare__approach h2{transform:none}
  .method-compare__details{gap:18px;margin-top:25px}
  .method-compare__center{order:2;width:min(720px,100%);margin-inline:auto}
  .method-compare__approach--classical{order:3}
  .method-compare__versus{
    grid-template-columns:1fr auto 1fr;grid-template-rows:auto;
    align-items:center;gap:16px;
  }
  .method-compare__versus i{width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--gold-line))}
  .method-compare__versus i:last-child{background:linear-gradient(90deg,var(--gold-line),transparent)}
  .method-compare__shared{margin-top:24px}
  .method-compare__definitions{position:static;transform:none;width:auto;white-space:normal}
  .method-compare__approach--quantum .method-compare__equation{width:100%;margin-left:0}
}

@media (max-width:640px){
  .method-compare{padding:18px 2px 34px}
  .method-compare__motif{inset:90px -22px 0;width:calc(100% + 44px)}
  .method-compare__intro{margin-bottom:32px;padding:0 12px}
  .method-compare__intro h1{font-size:clamp(34px,11vw,46px)}
  .method-compare__grid{gap:30px}
  .method-compare__approach h2{font-size:26px}
  .method-compare__eyebrow,.method-compare__approach h2{transform:none}
  .method-compare__details{gap:15px;margin-top:24px}
  .method-compare__row{grid-template-columns:106px minmax(0,1fr);gap:10px}
  .method-compare__row--model{grid-template-columns:minmax(0,1fr);gap:6px}
  .method-compare__row dt,.method-compare__row dd{font-size:12px}
  .method-compare__equation.eq{max-width:100%;overflow-x:auto;overflow-y:hidden}
  .method-compare__equation.eq .katex-display > .katex{font-size:.88em}
  .method-compare__approach--classical .method-compare__equation .katex-display > .katex{font-size:1.15em}
  .method-compare__constraint.eq .katex-display > .katex{font-size:1.08em}
  .method-compare__definitions{font-size:11.8px}
}

/* ================= REALISTIC — portfolio model ================= */
.realistic-page{overflow-x:hidden}
/* Same 1440px base as every other page — see the note on body.doc-page above. */
.realistic-main{grid-template-columns:minmax(0,1fr);min-width:0}
.realistic-hero{
  position:relative;overflow:hidden;isolation:isolate;direction:ltr;
  min-width:0;min-height:790px;padding:8px 38px 46px;
  border-bottom:1px solid var(--rule);
}
.realistic-hero__motif{inset:30px -38px 0;width:calc(100% + 76px);opacity:.62;z-index:-1}
.realistic-hero__head{text-align:center;margin:0 auto 34px}
.realistic-hero__head h1{
  margin:0 0 16px;font-size:clamp(44px,5.4vw,74px);color:#f6f7fb;
}
.realistic-hero__head h1 em{font-style:italic;color:var(--gold)}
.realistic-objective.eq{
  width:min(760px,100%);margin:0 auto;padding:14px 22px;
  border:1px solid rgba(255,255,255,.11);border-left-color:rgba(255,255,255,.11);
  border-radius:15px;background:linear-gradient(180deg,rgba(15,22,35,.86),rgba(7,12,22,.9));
  box-shadow:0 16px 42px rgba(0,0,0,.3);overflow-x:auto;
}
.realistic-objective.eq .katex-display{margin:.25em 0}
.realistic-objective.eq .katex-display > .katex{font-size:clamp(1.18em,1.8vw,1.55em)}

.realistic-layout{
  display:grid;grid-template-columns:minmax(210px,.7fr) minmax(460px,1.55fr) minmax(250px,.76fr);
  gap:36px;align-items:start;max-width:1360px;margin:0 auto;
}
.realistic-additions,
.realistic-core,
.realistic-constraints{min-width:0}
.realistic-additions h2,
.realistic-constraints > h2,
.realistic-solvers > h2{
  margin:0 0 18px;font-size:17px;line-height:1.2;color:var(--gold);
  font-weight:700;letter-spacing:-.01em;
}
.realistic-additions__list{display:grid;gap:0;margin:0;padding:0}
.realistic-additions__list > div{padding:0 0 17px;margin:0 0 17px;border-bottom:1px solid var(--rule)}
.realistic-additions__list > div:last-child{border-bottom:0;margin-bottom:0}
.realistic-additions__list dt{
  margin:0 0 7px;color:#b7c5d8;font-size:13.5px;font-weight:650;line-height:1.5;
}
.realistic-additions__list dd{
  margin:0;color:#8294ab;font-size:12.5px;line-height:1.55;
}
.realistic-additions__list dd.eq{
  padding:0;border:0;border-radius:0;background:none;overflow:visible;color:#dce5ef;
}
.realistic-additions__list dd.eq .katex{font-size:1.08em}

.realistic-core{text-align:center}
.realistic-section-label{
  margin:0 0 14px;font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dim);
}
.realistic-improvements ul{
  display:grid;gap:5px;margin:0;padding:0;list-style:none;
  color:#d2dce8;font-size:13.5px;line-height:1.45;
}
.realistic-improvements ul[lang="ar"]{
  font-family:Tahoma,Arial,"Segoe UI",sans-serif;
  font-size:15.5px;font-weight:500;line-height:1.68;
}
.realistic-improvements li::before{
  content:"";display:inline-block;width:4px;height:4px;margin:0 9px 3px 0;
  border-radius:50%;background:var(--teal);opacity:.56;
}
.realistic-improvements ul[dir="rtl"] li::before{margin:0 0 3px 9px}
.realistic-numerics{margin:22px auto 20px}
.realistic-numerics h2{
  margin:0 0 8px;font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:#7f91a8;
}
.realistic-numerics p{display:flex;justify-content:center;gap:8px 22px;flex-wrap:wrap;margin:0;color:#91a6c1;font-size:12.5px}

.realistic-solvers > h2{margin-bottom:12px}
.realistic-solver-lanes{display:grid;gap:10px}
.realistic-solver-lane{
  display:grid;grid-template-columns:minmax(0,1fr) 54px minmax(140px,.58fr);
  gap:12px;align-items:center;
}
.realistic-solver-card{
  min-width:0;padding:12px 16px;border-radius:13px;
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg,rgba(19,26,39,.92),rgba(10,15,25,.96));
  box-shadow:0 12px 28px rgba(0,0,0,.26);
}
.realistic-solver-card strong{display:block;color:#e3e9f1;font-size:12.5px;line-height:1.45;font-weight:650}
.realistic-solver-card span{display:block;margin-top:3px;color:#879ab3;font-size:11.5px}
.realistic-solver-arrow{position:relative;display:block;width:100%;height:1px;background:rgba(217,184,119,.56)}
.realistic-solver-arrow::after{
  content:"";position:absolute;right:-1px;top:50%;transform:translateY(-50%);
  border-left:8px solid rgba(217,184,119,.72);border-top:5px solid transparent;border-bottom:5px solid transparent;
}
.realistic-solver-lane > p{margin:0;text-align:left;color:#d1dae6;font-size:12px;line-height:1.45}
.realistic-solver-lane > p strong,.realistic-solver-lane > p span{display:block}
.realistic-solver-lane > p span{color:#8395ac;margin-top:2px}

.realistic-constraints > h2{text-align:center}
.realistic-constraints__panel.eq{
  margin:0;padding:22px 16px;border-radius:18px;
  border:1px solid rgba(255,255,255,.09);border-left-color:rgba(255,255,255,.09);
  background:linear-gradient(180deg,rgba(16,23,36,.94),rgba(8,13,23,.97));
  box-shadow:0 18px 42px rgba(0,0,0,.3);overflow-x:auto;
}
.realistic-constraints__panel.eq .katex-display{margin:.25em 0}
.realistic-constraints__panel.eq .katex-display > .katex{font-size:clamp(1.05em,1.45vw,1.28em)}
.realistic-foot{margin-top:18px}

@media (max-width:1180px){
  .realistic-hero{padding-inline:24px}
  .realistic-layout{
    grid-template-columns:minmax(190px,.65fr) minmax(400px,1.45fr) minmax(220px,.72fr);
    gap:24px;
  }
  .realistic-solver-lane{grid-template-columns:minmax(0,1fr) 38px minmax(125px,.55fr);gap:9px}
}

@media (max-width:960px){
  .realistic-hero{min-height:0;padding:4px 22px 40px}
  .realistic-hero__head{margin-bottom:38px}
  .realistic-layout{grid-template-columns:minmax(0,1fr);gap:36px;max-width:720px}
  .realistic-additions{order:1}
  .realistic-core{order:2}
  .realistic-constraints{order:3}
  .realistic-additions__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
  .realistic-constraints__panel{width:min(420px,100%);margin-inline:auto !important}
}

@media (max-width:640px){
  .realistic-hero{padding:2px 2px 32px}
  .realistic-hero__motif{inset:80px -24px 0;width:calc(100% + 48px)}
  .realistic-hero__head{margin-bottom:32px;padding:0 8px}
  .realistic-hero__head h1{font-size:clamp(39px,13vw,52px);line-height:1.02}
  .realistic-objective.eq{padding:12px 8px;border-radius:13px}
  .realistic-objective.eq .katex-display > .katex{font-size:.88em}
  .realistic-layout{gap:32px}
  .realistic-additions__list{grid-template-columns:minmax(0,1fr)}
  .realistic-improvements ul{gap:8px;text-align:left;font-size:12.8px}
  .realistic-improvements ul[lang="ar"]{font-size:14.5px;line-height:1.72}
  .realistic-improvements ul[dir="rtl"]{text-align:right}
  .realistic-solver-lane{grid-template-columns:minmax(0,1fr);gap:10px}
  .realistic-solver-arrow{width:1px;height:26px;margin:0 auto;background:rgba(217,184,119,.56)}
  .realistic-solver-arrow::after{
    right:auto;left:50%;top:auto;bottom:-1px;transform:translateX(-50%);
    border-left:5px solid transparent;border-right:5px solid transparent;
    border-top:8px solid rgba(217,184,119,.72);border-bottom:0;
  }
  .realistic-solver-lane > p{text-align:center}
  .realistic-constraints__panel.eq{padding:20px 10px}
  .realistic-constraints__panel.eq .katex-display > .katex{font-size:1em}
}