:root{
  --bg:#fbfaf7; --surface:#ffffff; --ink:#1a1a18; --muted:#6b6b66; --faint:#9a9a93;
  --line:#e7e5df; --line2:#d8d6cf;
  --accent:#5b54c9; --accent-soft:#efeefb;
  --full:#c0392b; --full-bg:#fbe9e7; --key:#b9770e; --key-bg:#fdf1dd; --gist:#5f6b6b; --gist-bg:#eef1f1;
  --prereq:#2563eb; --prereq-bg:#e8f0fe; --desc:#0f9d58; --desc-bg:#e6f4ea; --contrast:#b9770e; --contrast-bg:#fdf1dd;
  --era1:#6d28d9; --era2:#2563eb; --era3:#ea580c; --era4:#0891b2; --era5:#059669; --era6:#db2777;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Inter','SF Pro Text',sans-serif;
  background:var(--bg); color:var(--ink); margin:0; line-height:1.7; font-size:16.5px;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* nav */
.topnav,.footnav{max-width:880px; margin:0 auto; padding:14px 24px; display:flex; gap:12px; align-items:center; font-size:13.5px}
.topnav{border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(251,250,247,.92); backdrop-filter:blur(6px); z-index:10}
.footnav{border-top:1px solid var(--line); margin-top:40px; padding-top:22px; padding-bottom:48px}
.topnav a,.footnav a{color:var(--muted); padding:5px 11px; border:1px solid var(--line); border-radius:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:40%}
.topnav a:hover,.footnav a:hover{color:var(--ink); border-color:var(--line2); text-decoration:none}
.topnav .home,.footnav .home{margin:0 auto; font-weight:600; border-color:var(--line2)}

/* article */
article{max-width:720px; margin:0 auto; padding:8px 24px 0}
.eyebrow{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; color:var(--era-c,var(--accent)); margin-top:26px}
h1{font-size:30px; line-height:1.2; margin:6px 0 6px; font-weight:800; letter-spacing:-.5px}
h1 .num{display:inline-block; min-width:1.6em; color:var(--faint); font-weight:800; margin-right:6px}
.lh .sub{font-size:15px; color:var(--muted); margin-bottom:12px}
.lh .sub i{color:var(--ink)}
.meta{display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin-bottom:8px}
.badge{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; padding:4px 10px; border-radius:6px}
.badge.FULL{background:var(--full-bg); color:var(--full)} .badge.KEY{background:var(--key-bg); color:var(--key)} .badge.GIST{background:var(--gist-bg); color:var(--gist)}
.time{font-size:13px; color:var(--faint)}
a.orig{font-size:13px; font-weight:600; padding:4px 11px; border:1px solid var(--line2); border-radius:6px; color:var(--accent)}
a.orig:hover{background:var(--accent-soft); text-decoration:none}

h2{font-size:21px; font-weight:750; margin:34px 0 10px; letter-spacing:-.3px; padding-bottom:5px; border-bottom:1px solid var(--line)}
h3{font-size:17px; font-weight:700; margin:22px 0 6px}
p{margin:0 0 14px}
em,i{color:#33332e}
strong,b{font-weight:700}
code,.mono{font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:.9em; background:#f0efe9; padding:1px 5px; border-radius:4px}
ul,ol{margin:0 0 14px; padding-left:24px} li{margin-bottom:6px}

/* TL;DR */
.tldr{background:var(--accent-soft); border:1px solid #ddd9f5; border-left:4px solid var(--accent); border-radius:10px; padding:14px 18px; margin:18px 0 6px; font-size:15.5px; line-height:1.6}
.tldr b{color:#3b349a}

/* analogy + note callouts */
.analogy,.note,.flag{border-radius:10px; padding:13px 16px; margin:18px 0; font-size:15px; line-height:1.6}
.analogy{background:#fff7ed; border:1px solid #fcdcb4; border-left:4px solid #ea9a3e}
.analogy b{color:#b9560e}
.note{background:#eef1f1; border:1px solid #dadedd; border-left:4px solid #7d8a8a}
.flag{background:#fdeceb; border:1px solid #f5c9c4; border-left:4px solid #d0492f}
.flag b{color:#b3331c}

/* math — dependency-free (no CDN, renders everywhere) */
.eq{display:block; text-align:center; font-family:'Cambria Math','STIX Two Math','Latin Modern Math',Georgia,'Times New Roman',serif; font-size:18.5px; line-height:1.55; background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:13px 16px; margin:16px 0; overflow-x:auto}
.m{font-family:'Cambria Math','STIX Two Math',Georgia,serif}
.eq i,.m i{font-style:italic}
.eq b,.m b{font-weight:700; font-style:normal}
.eq sub,.eq sup,.m sub,.m sup{font-size:.72em}
.frac{display:inline-flex; flex-direction:column; vertical-align:middle; text-align:center; margin:0 .2em}
.frac>span{padding:0 .45em; line-height:1.18}
.frac .d{border-top:1.6px solid currentColor}
.bar{text-decoration:overline}
.eq .op{color:var(--muted); font-style:normal}

/* mathematical-foundation box */
.mathbox{margin:20px 0; background:#f6f6fb; border:1px solid #e3e1f2; border-radius:12px}
.mathbox>summary{cursor:pointer; list-style:none; padding:13px 16px; font-weight:700; font-size:15px; color:#3b349a; display:flex; align-items:center; gap:10px}
.mathbox>summary::-webkit-details-marker{display:none}
.mathbox>summary::after{content:'▸'; margin-left:auto; color:#9a97c9; font-size:13px; transition:transform .15s}
.mathbox[open]>summary::after{transform:rotate(90deg)}
.mathbox .mtag{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; background:#e7e4fb; color:#5b4fc0; padding:3px 9px; border-radius:5px; white-space:nowrap}
.mathbox .mb-body{padding:2px 17px 15px; font-size:15px; line-height:1.66; color:#2b2b28}
.mathbox .mb-body p{margin:0 0 11px}
.mathbox .mb-body .eq{background:#fff; font-size:17.5px}
.mathbox .mb-body ul,.mathbox .mb-body ol{margin:0 0 11px}

/* questions of an inquisitive mind */
.qa{margin:6px 0}
.qa .q{border:1px solid var(--line); border-radius:10px; margin:9px 0; background:var(--surface); overflow:hidden}
.qa .q>summary{cursor:pointer; list-style:none; padding:12px 16px 12px 44px; font-weight:600; font-size:15.5px; color:var(--ink); position:relative}
.qa .q>summary::-webkit-details-marker{display:none}
.qa .q>summary::before{content:'?'; position:absolute; left:14px; top:11px; width:21px; height:21px; border-radius:50%; background:var(--accent-soft); color:var(--accent); font-weight:800; font-size:13px; text-align:center; line-height:21px}
.qa .q>summary::after{content:'＋'; position:absolute; right:15px; top:11px; color:var(--faint); font-weight:700}
.qa .q[open]>summary::after{content:'−'}
.qa .q[open]>summary{border-bottom:1px solid var(--line); color:var(--accent)}
.qa .q .a{padding:13px 16px 15px; font-size:14.5px; line-height:1.66; color:#33332e}
.qa .q .a p{margin:0 0 9px} .qa .q .a p:last-child{margin:0}

/* code implementation block */
.codebox{margin:20px 0; background:#1d1d29; border:1px solid #2c2c3c; border-radius:12px; overflow:hidden}
.codebox>summary{cursor:pointer; list-style:none; padding:12px 16px; font-weight:700; font-size:14.5px; color:#cfd2e6; display:flex; align-items:center; gap:10px}
.codebox>summary::-webkit-details-marker{display:none}
.codebox>summary::after{content:'▸'; margin-left:auto; color:#7a7d99; transition:transform .15s}
.codebox[open]>summary::after{transform:rotate(90deg)}
.codebox .ctag{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; background:#33334a; color:#aab1e8; padding:3px 9px; border-radius:5px}
.codebox pre{margin:0; padding:2px 16px 15px; overflow-x:auto}
.codebox code{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace; font-size:12.9px; line-height:1.62; color:#e6e8f2; background:none; padding:0; white-space:pre; display:block}
.codebox .cm{color:#8086a6; font-style:italic}

/* read-toggle button + progress + cards */
.readbtn{font-size:13px; padding:6px 13px; border:1px solid var(--line2); border-radius:7px; background:var(--surface); color:var(--muted); cursor:pointer; font-family:inherit; white-space:nowrap}
.readbtn:hover{border-color:var(--desc); color:var(--desc)}
.readbtn.done{background:var(--desc-bg); border-color:#9bd5ad; color:#0f7a40}
.card.done{background:var(--desc-bg); border-color:#bfe3c9}
.card.done .nm::after{content:' ✓'; color:var(--desc); font-weight:800}
.idxprog{margin:16px 0 6px; max-width:520px}
.idxprog .pt{font-size:13px; color:var(--muted); margin-bottom:6px; font-weight:600}
.idxprog .pbar{height:9px; background:#eceae3; border-radius:5px; overflow:hidden}
.idxprog .pf{height:100%; width:0; background:var(--desc); transition:width .35s}

/* diagrams */
figure.diagram{margin:20px 0; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px 16px 12px; text-align:center}
figure.diagram svg{max-width:100%; height:auto}
figure.diagram figcaption{font-size:13px; color:var(--muted); margin-top:10px; line-height:1.5; text-align:center}
.dg-box{fill:var(--surface); stroke:var(--line2); stroke-width:1.5; rx:8}
.dg-t{font:600 13px -apple-system,sans-serif; fill:var(--ink)}
.dg-s{font:12px -apple-system,sans-serif; fill:var(--muted)}
.dg-lbl{font:11px ui-monospace,Menlo,monospace; fill:var(--faint)}

/* cross-links */
.links{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; margin:8px 0 4px}
.link{display:block; border:1px solid var(--line); border-radius:10px; padding:9px 12px; background:var(--surface); color:var(--ink)}
.link:hover{text-decoration:none; border-color:var(--line2); transform:translateY(-1px); transition:.12s}
.link .dir{display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; margin-bottom:2px}
.link.prereq{border-left:3px solid var(--prereq)} .link.prereq .dir{color:var(--prereq)}
.link.desc{border-left:3px solid var(--desc)} .link.desc .dir{color:var(--desc)}
.link.contrast{border-left:3px solid var(--contrast)} .link.contrast .dir{color:var(--contrast)}
.link .nm{font-size:14px; font-weight:600}
.link .ds{font-size:12.5px; color:var(--muted); display:block; line-height:1.45}

/* relations — detailed */
.rel{margin:6px 0 4px}
.rel-item{border-left:3px solid var(--line2); padding:1px 0 1px 15px; margin:16px 0}
.rel-item.prereq{border-color:var(--prereq)}
.rel-item.desc{border-color:var(--desc)}
.rel-item.contrast{border-color:var(--contrast)}
.rel-h{font-size:16px; margin-bottom:4px; font-weight:600}
.rel-h .dir{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; margin-right:9px; vertical-align:1px}
.rel-item.prereq .dir{color:var(--prereq)} .rel-item.desc .dir{color:var(--desc)} .rel-item.contrast .dir{color:var(--contrast)}
.rel-h a{font-weight:700}
.rel-item p{margin:3px 0 0; font-size:14.5px; color:#33332e; line-height:1.62}

/* index */
.idx-wrap{max-width:880px; margin:0 auto; padding:8px 24px 60px}
.idx-hero h1{font-size:34px; margin-top:18px}
.idx-lead{font-size:16px; color:var(--muted); max-width:680px; margin-bottom:8px}
.legend{display:flex; flex-wrap:wrap; gap:8px 16px; font-size:13px; color:var(--muted); margin:14px 0 6px}
.legend .badge{cursor:default}
.era-sec{margin-top:30px}
.era-h{display:flex; align-items:baseline; gap:12px; border-left:5px solid var(--era-c); padding-left:12px; margin-bottom:6px}
.era-h h2{border:none; margin:0; padding:0; font-size:20px}
.era-h .yr{font-size:13px; font-weight:700; color:var(--era-c)}
.era-th{font-size:14px; color:var(--muted); padding-left:17px; margin-bottom:12px}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px; padding-left:17px}
.card{display:block; border:1px solid var(--line); border-left:3px solid var(--era-c); border-radius:10px; padding:11px 13px; background:var(--surface); color:var(--ink)}
.card:hover{text-decoration:none; border-color:var(--line2); transform:translateY(-1px); transition:.12s}
.card .top{display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.card .nm{font-size:15px; font-weight:700}
.card .yr{font-size:12px; color:var(--faint); font-weight:600}
.card .dn{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; margin-top:4px; display:inline-block}
.card .dn.FULL{color:var(--full)} .card .dn.KEY{color:var(--key)} .card .dn.GIST{color:var(--gist)}

@media(max-width:560px){
  body{font-size:16px}
  h1{font-size:26px}
  h2{font-size:19px}
  article{padding-left:16px; padding-right:16px; overflow-x:clip}
  p,li,.tldr,.analogy,.note,.flag,.rel-item p,.qa .q .a{overflow-wrap:break-word}
  /* nav: tighter so 3 links fit without crushing */
  .topnav,.footnav{padding-left:13px; padding-right:13px; gap:7px}
  .topnav a,.footnav a{font-size:12px; padding:5px 9px; max-width:38%}
  .footnav{flex-wrap:wrap; row-gap:9px}
  .readbtn{font-size:12px; padding:5px 10px}
  /* equations: smaller, wide ones scroll instead of clipping */
  .eq{font-size:16px; padding:12px 12px}
  .mathbox .mb-body{padding-left:14px; padding-right:14px}
  .mathbox .mb-body .eq{font-size:15px; text-align:left}
  .mathbox>summary{font-size:14px}
  /* diagrams: keep labels legible — scroll horizontally rather than shrink to ~6px */
  figure.diagram{overflow-x:auto; -webkit-overflow-scrolling:touch; text-align:left; padding:16px 13px 10px;
    background-color:var(--surface);
    background-image:linear-gradient(to left,var(--surface),rgba(255,255,255,0) 34px),radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.17),rgba(0,0,0,0));
    background-position:right center,right center; background-size:38px 100%,18px 100%;
    background-repeat:no-repeat; background-attachment:scroll,local}
  figure.diagram svg{min-width:430px; display:block}
  figure.diagram figcaption{text-align:left}
  /* code: a touch smaller, still scrollable */
  .codebox code{font-size:12px}
  .codebox>summary{font-size:13.5px}
  /* index */
  .idx-wrap{padding-left:16px; padding-right:16px; overflow-x:clip}
  .idx-hero h1{font-size:28px}
  .idx-lead{font-size:15px}
  .cards{grid-template-columns:1fr; padding-left:12px}
  .era-th{padding-left:12px}
  .era-h{padding-left:10px}
  .links{grid-template-columns:1fr}
}

/* --- language switch (RU ↔ EN mirror) --- */
.topnav .lang,.footnav .lang{flex:0 0 auto; max-width:none; font-weight:600; letter-spacing:.03em; font-size:12.5px; opacity:.85}
.topnav .lang:hover,.footnav .lang:hover{opacity:1}
.langbar{display:flex; justify-content:flex-end; padding-top:10px}
.langbar a{font-size:13px; color:var(--muted); border:1px solid var(--line); border-radius:7px; padding:5px 11px}
.langbar a:hover{color:var(--ink); border-color:var(--line2); text-decoration:none}