/* ══════════════════════════════════════════════════════════════
   ALPHANET — TECHNICAL DOCUMENT STYLESHEET (light)
   Brand hues and typography from alphanet.global, re-weighted for
   long-form reading on white. Accents use the darker brand steps so
   they hold contrast against the page.
   ══════════════════════════════════════════════════════════════ */
:root{
  --bg:#FFFFFF; --bg-1:#FAFBFC; --panel:#F7F8FA;
  --surface:#F7F8FA; --surface-2:#EEF1F5;
  --line:#E4E7EC; --line-2:#CDD2DA;
  --txt:#0A0C12; --txt-2:#232934; --txt-3:#4A5261; --txt-4:#6E7684; --txt-5:#9AA1AE;
  --blue-dim:#1F418F; --blue:#2A55B8; --blue-hi:#3D6FE8;
  --cyan:#0E8CA8; --cyan-vivid:#22D3EE;
  --violet:#6D43C7; --violet-hi:#8B5CF6;
  --font-d:'Space Grotesk','Inter',-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
  --font-b:'Inter',-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
  --font-m:"Inter", system-ui, sans-serif;
  --radius:14px; --nav-h:60px; --measure:74ch;
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 28px); }
body{ background:var(--bg); color:var(--txt-2); font-family:var(--font-b);
  font-size:17px; line-height:1.72; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; }
::selection{ background:#CFE0FF; color:var(--txt); }
a{ color:var(--blue); text-decoration:none; }
a:hover{ color:var(--violet); }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:4px; }

/* ── top bar ─────────────────────────────────────────────── */
.bar{ position:sticky; top:0; z-index:60; height:var(--nav-h);
  display:flex; align-items:center; gap:16px; padding:0 clamp(18px,4vw,40px);
  background:rgba(255,255,255,.86); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line); }
.bar img{ height:19px; width:auto; display:block; }
.bar-sep{ width:1px; height:17px; background:var(--line-2); flex:none; }
.bar-kind{ font-family:var(--font-m); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--txt-4); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.bar-right{ margin-left:auto; display:flex; gap:20px; align-items:center; }
.bar-right a{ font-family:var(--font-m); font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--txt-4); }
.bar-right a:hover{ color:var(--txt); }
#progress{ position:fixed; top:var(--nav-h); left:0; height:2px; width:0; z-index:70;
  background:linear-gradient(90deg,var(--cyan-vivid),var(--blue-hi) 55%,var(--violet-hi));
  transition:width .12s linear; }

/* ── layout ──────────────────────────────────────────────── */
.wrap{ width:min(1180px,92vw); margin-inline:auto; display:grid;
  grid-template-columns:minmax(0,1fr) 232px; gap:56px;
  padding:clamp(38px,6vw,74px) 0 120px; }
.doc{ min-width:0; max-width:var(--measure); }

/* ── masthead ────────────────────────────────────────────── */
.eyebrow{ font-family:var(--font-m); font-size:11.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--blue); display:flex; align-items:center;
  gap:10px; margin-bottom:22px; }
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--blue); flex:none; }
h1{ font-family:var(--font-d); font-weight:600; letter-spacing:-.022em; line-height:1.1;
  color:var(--txt); font-size:clamp(30px,4.6vw,45px); margin-bottom:16px; }
.subtitle{ font-size:clamp(17px,2.2vw,20px); line-height:1.5; color:var(--txt-3);
  font-weight:300; max-width:60ch; }
.byline{ margin-top:26px; margin-bottom:34px; padding-top:20px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:10px 26px; font-family:var(--font-m);
  font-size:12px; color:var(--txt-4); letter-spacing:.03em; }
.byline b{ color:var(--txt-2); font-weight:500; }
.lede{ margin:42px 0 8px; padding:22px 24px; background:var(--surface);
  border:1px solid var(--line); border-left:2px solid var(--blue);
  border-radius:var(--radius); font-size:17.5px; line-height:1.66; color:var(--txt-2); }
.lede strong{ color:var(--txt); font-weight:600; }

p.ref{ padding-left:2.2em; text-indent:-2.2em; margin-bottom:11px;
  font-size:15.5px; color:var(--txt-3); }
p.figcap{ font-family:var(--font-m); font-size:12px; letter-spacing:.04em;
  color:var(--txt-4); margin:10px 0 26px; line-height:1.6; }
p.figcap b{ color:var(--blue); font-weight:500; }

/* ── abstract ────────────────────────────────────────────── */
.abstract{ margin:34px 0 10px; }
.abstract h2{ font-family:var(--font-m); font-size:11.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--txt-4); margin:0 0 12px; padding:0;
  border:0; font-weight:500; }
.abstract p{ color:var(--txt-3); font-size:16.5px; }
.keywords{ margin-top:16px; font-family:var(--font-m); font-size:12.5px;
  color:var(--txt-4); line-height:1.75; }
.keywords b{ color:var(--txt-3); font-weight:500; }

/* ── headings ────────────────────────────────────────────── */
h2,h3,h4{ font-family:var(--font-d); color:var(--txt); letter-spacing:-.015em;
  line-height:1.2; position:relative; }
h2{ font-size:clamp(22px,3vw,28px); font-weight:600; margin:62px 0 20px;
  padding-top:22px; border-top:1px solid var(--line); }
h3{ font-size:clamp(18px,2.2vw,21px); font-weight:600; margin:40px 0 14px; }
h4{ font-size:16.5px; font-weight:600; margin:30px 0 10px; color:var(--txt-2); }
.secnum{ font-family:var(--font-m); font-weight:400; color:var(--blue);
  font-size:.62em; letter-spacing:.04em; margin-right:.7em; }
@media (min-width:1000px){
  h2 .secnum,h3 .secnum{ position:absolute; left:-4.6rem; top:.28em; margin:0;
    width:4rem; text-align:right; font-size:.6em; }
  h2 .secnum{ top:calc(22px + .3em); }
}

/* ── body copy ───────────────────────────────────────────── */
.doc p{ margin:0 0 19px; }
.doc p + p{ margin-top:-2px; }
.doc strong{ color:var(--txt); font-weight:600; }
.doc em{ color:var(--txt-2); }
.doc ul,.doc ol{ margin:0 0 20px; padding-left:1.35em; }
.doc li{ margin-bottom:9px; }
.doc li::marker{ color:var(--blue); }
.doc ul li::marker{ content:"▸  "; font-size:.85em; }
.doc code{ font-family:var(--font-m); font-size:.9em; color:#0B5C70;
  background:var(--surface-2); padding:2px 6px; border-radius:5px; }
.doc blockquote{ margin:24px 0; padding:4px 0 4px 20px;
  border-left:2px solid var(--line-2); color:var(--txt-3); }
hr{ border:0; border-top:1px solid var(--line); margin:44px 0; }

/* ── equations ───────────────────────────────────────────── */
/* crops come out of the PDFs black-on-white, so on a white page they sit at
   native polarity — no inversion filter, no halo artefacts */
figure.eq{ margin:28px 0; display:flex; align-items:center; gap:18px;
  padding:16px 20px; background:var(--bg); border:1px solid var(--line);
  border-radius:var(--radius); }
figure.eq .body{ flex:1 1 auto; min-width:0; overflow-x:auto; }
figure.eq img{ height:auto; display:block; margin-inline:auto; }
figure.eq .eqn{ font-family:var(--font-m); font-size:12.5px; color:var(--txt-4);
  flex:none; align-self:center; }

/* ── tables and figures ──────────────────────────────────── */
figure.tbl,figure.fig{ margin:34px 0; }
figure.tbl figcaption,figure.fig figcaption{ font-family:var(--font-m); font-size:12px;
  letter-spacing:.04em; color:var(--txt-4); margin-bottom:12px; line-height:1.6; }
figure.tbl figcaption b,figure.fig figcaption b{ color:var(--blue); font-weight:500; }
figure.tbl .sheet,figure.fig .sheet{ background:var(--bg); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px; overflow-x:auto; }
figure.tbl img,figure.fig img{ max-width:100%; height:auto; display:block;
  margin-inline:auto; }

/* screenshots show a dark UI — frame them so they don't float on white */
figure.shot{ margin:28px 0; }
figure.shot img{ max-width:100%; height:auto; display:block; border-radius:10px;
  border:1px solid var(--line-2);
  box-shadow:0 1px 2px rgba(10,12,18,.06),0 8px 24px rgba(10,12,18,.08); }
figure.shot figcaption{ font-family:var(--font-m); font-size:12px;
  color:var(--txt-4); margin-top:10px; }
.doc img{ max-width:100%; height:auto; border-radius:10px; border:1px solid var(--line-2);
  box-shadow:0 1px 2px rgba(10,12,18,.06),0 8px 24px rgba(10,12,18,.08);
  margin:24px 0; display:block; }
figure.eq img,figure.tbl img,figure.fig img,.bar img{
  box-shadow:none; border:0; border-radius:0; margin:0; }
/* inline maths crops sit on the text baseline, not on their own line */
.doc img.im{ display:inline-block; margin:0 .04em; border:0; box-shadow:none;
  border-radius:0; width:auto; max-width:none; vertical-align:baseline; }

/* ── native tables ───────────────────────────────────────── */
.doc table{ width:100%; border-collapse:collapse; margin:26px 0; font-size:15px;
  display:block; overflow-x:auto; }
.doc th,.doc td{ padding:11px 14px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--line); }
.doc th{ font-family:var(--font-m); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--txt-4); font-weight:500;
  border-bottom:1px solid var(--line-2); white-space:nowrap; }
.doc tbody tr:hover{ background:var(--surface); }

/* ── contents rail ───────────────────────────────────────── */
.toc{ position:sticky; top:calc(var(--nav-h) + 34px); align-self:start;
  max-height:calc(100vh - var(--nav-h) - 70px); overflow-y:auto;
  font-size:13px; line-height:1.5; scrollbar-width:thin;
  scrollbar-color:var(--line-2) transparent; }
.toc h2{ font-family:var(--font-m); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--txt-4); margin:0 0 14px; padding:0;
  border:0; font-weight:500; }
.toc a{ display:block; padding:5px 0 5px 13px; color:var(--txt-4);
  border-left:1px solid var(--line); transition:color .2s,border-color .2s; }
.toc a:hover{ color:var(--txt-2); border-left-color:var(--line-2); }
.toc a.lvl2{ padding-left:26px; font-size:12.5px; }
.toc a.on{ color:var(--blue); border-left-color:var(--blue); }
.toc .tn{ font-family:var(--font-m); color:var(--txt-5); margin-right:.55em; font-size:.92em; }
.toc a.on .tn{ color:var(--blue); }

/* ── footer / related ────────────────────────────────────── */
.foot{ border-top:1px solid var(--line); margin-top:70px; padding:34px 0 0;
  font-family:var(--font-m); font-size:12px; color:var(--txt-5); line-height:1.9; }
.foot a{ color:var(--txt-4); }
.foot a:hover{ color:var(--txt-2); }
.related{ margin:52px 0 0; padding-top:30px; border-top:1px solid var(--line); }
.related h2{ font-family:var(--font-m); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--txt-4); margin:0 0 16px; padding:0;
  border:0; font-weight:500; }
.related ul{ list-style:none; padding:0; margin:0; }
.related li{ margin-bottom:10px; }
.related a{ color:var(--txt-3); font-size:15px; }
.related a:hover{ color:var(--blue); }

/* ── index ───────────────────────────────────────────────── */
.index-grid{ display:grid; gap:1px; background:var(--line); margin-top:40px;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.card{ background:var(--bg); padding:26px 28px; transition:background .3s; display:block; }
.card:hover{ background:var(--surface); }
.card .k{ font-family:var(--font-m); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--blue); margin-bottom:10px; }
.card h3{ font-size:19px; margin:0 0 8px; color:var(--txt); }
.card p{ margin:0; font-size:14.5px; color:var(--txt-4); line-height:1.6; }

/* ── responsive ──────────────────────────────────────────── */
@media (max-width:999px){
  .wrap{ grid-template-columns:minmax(0,1fr); gap:0; }
  .toc{ display:none; }
  body{ font-size:16.5px; }
  figure.eq{ padding:12px 14px; gap:12px; }
}
@media (max-width:560px){ .bar-kind,.bar-sep{ display:none; } .bar-right{ gap:14px; } }
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto; }
}
@media print{
  .bar,.toc,#progress,.foot,.related{ display:none; }
  .wrap{ display:block; width:auto; padding:0; }
  .doc{ max-width:none; }
  figure.shot img,.doc img{ box-shadow:none; }
  h2{ break-after:avoid; } figure{ break-inside:avoid; }
}