:root{
  --bg:#ffffff; --surface:#f7f9fb; --surface-2:#eef2f6; --border:#e6eaf0;
  --text:#1c2433; --text-soft:#394356; --ink:#26303f; --muted:#8a94a3;
  --accent:#1b4db3; --accent-dk:#143a8a; --accent-sft:#eef3fc;
  --band:#f3f6fb;
  --green:#1f7a52; --green-sft:#eaf6f0;
  --def:#1b4db3; --def-sft:#e3ecfb;
  --thm:#0f766e; --thm-sft:#e3f3f0;
  --reading:720px; --site:1180px;
  --shadow:0 1px 3px rgba(16,24,40,.06),0 10px 28px rgba(16,24,40,.07);
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Iowan Old Style",Georgia,Cambria,"Times New Roman",serif;
  --mono:"SFMono-Regular",ui-monospace,Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:80%;}   /* global 20% smaller (rem-based scaling) */
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:1rem;line-height:1.5;-webkit-font-smoothing:antialiased;}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}

/* ---- slim top bar (matches site) ---- */
.topbar{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--border);}
.topbar-inner{max-width:var(--site);margin:0 auto;padding:.7rem 1.25rem;
  display:flex;align-items:center;gap:1.4rem;}
.brand{font-weight:700;letter-spacing:-.01em;}
.brand span{color:var(--accent);}
.top-links{margin-left:auto;display:flex;gap:1.3rem;}
.top-links a{color:var(--text-soft);font-size:.93rem;font-weight:500;}
.top-links a:hover{color:var(--accent);text-decoration:none;}

/* ---- layout: content + sidebar TOC ---- */
.shell{max-width:var(--site);margin:0 auto;padding:0 1.25rem;
  display:grid;grid-template-columns:1fr 290px;gap:2.4rem;align-items:start;}
.reading{max-width:var(--reading);width:100%;justify-self:center;grid-column:1;
  padding:0 0 6rem;}
.sidebar{grid-column:2;position:sticky;top:3.4rem;font-family:var(--sans);
  border-left:1px solid var(--border);padding:.2rem 0 0 1.2rem;
  max-height:calc(100vh - 4.5rem);overflow-y:auto;}
.sidebar .lbl{font-size:.74rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted);margin-bottom:.8rem;}
.sidebar ol{list-style:none;margin:0;padding:0;}

/* full-book outline */
.booktoc .chitem{margin:.1rem 0;}
.booktoc .chlink{display:block;padding:.32rem .45rem;border-radius:7px;
  font-size:.95rem;font-weight:600;color:var(--text);line-height:1.3;}
.booktoc .chlink:hover{background:var(--surface);color:var(--accent);text-decoration:none;}
.booktoc .chlink.cur{color:var(--accent-dk);}
.booktoc .cn{display:block;font-size:.66rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);margin-bottom:.05rem;}
.booktoc .chlink.cur .cn{color:var(--accent);}
.secs{margin:.2rem 0 .6rem !important;padding-left:.5rem !important;
  border-left:2px solid var(--border);}
.secs li{margin:.06rem 0;}
.secs a{display:block;font-size:.86rem;line-height:1.32;color:var(--text-soft);
  padding:.22rem .5rem;border-radius:6px;}
.secs a:hover{background:var(--surface);color:var(--accent);text-decoration:none;}
.secs a.cur{color:var(--accent);font-weight:700;background:var(--accent-sft);}
.secs .n{color:var(--accent);font-weight:700;margin-right:.3rem;}

.crumbs{font-size:.8rem;color:var(--muted);letter-spacing:.02em;margin:1.8rem 0 .4rem;}
.crumbs a{color:var(--muted);}
.crumbs a:hover{color:var(--accent);}

.sechead{padding:.2rem 0 .4rem;border-bottom:2px solid var(--border);margin-bottom:1.6rem;}
.secnum{color:var(--accent);font-weight:700;font-size:.82rem;letter-spacing:.08em;
  text-transform:uppercase;}
.sechead h1{font-family:var(--sans);font-size:2rem;letter-spacing:-.02em;
  line-height:1.12;margin:.25rem 0 0;}

h2{font-family:var(--sans);font-size:1.28rem;letter-spacing:-.01em;color:var(--text);
  margin:2.6rem 0 .9rem;scroll-margin-top:4.5rem;}
.h2num{color:var(--accent);font-weight:700;margin-right:.45rem;}
h3{font-family:var(--sans);font-size:1.05rem;color:var(--text);margin:1.8rem 0 .7rem;}

/* serif body for long-form reading */
p,li{font-family:var(--serif);font-size:1.085rem;line-height:1.72;color:var(--ink);
  margin:0 0 1.1rem;}
.reading em{font-style:italic;}
.kw{font-weight:600;color:var(--text);font-style:normal;}
code{font-family:var(--mono);font-size:.88em;background:var(--surface-2);
  padding:.08em .35em;border-radius:5px;}

figure{margin:1.6rem 0;text-align:center;}
figure img{max-width:100%;height:auto;}
figure.small img{max-width:62%;}
figure.tiny img{max-width:42%;}
.figrow{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;align-items:flex-end;}
.figrow img{flex:1 1 0;min-width:120px;}
figcaption{font-family:var(--sans);font-size:.82rem;color:var(--muted);
  line-height:1.5;margin-top:.7rem;max-width:62ch;margin-left:auto;margin-right:auto;}
figcaption b{color:var(--text-soft);font-weight:700;}

/* callout boxes */
.box{border:1px solid var(--border);border-radius:12px;padding:1rem 1.2rem;
  margin:1.5rem 0;background:#fff;}
.box .tag{font-family:var(--sans);font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;display:inline-block;margin-bottom:.5rem;}
.box p:last-child{margin-bottom:0;}
/* Definition & Theorem: bold filled label chip + thicker accent rule */
.def{border:1px solid var(--def-sft);border-left:5px solid var(--def);background:var(--def-sft);}
.thm{border:1px solid var(--thm-sft);border-left:5px solid var(--thm);background:var(--thm-sft);}
/* filled header label chips, shared by Definition / Theorem / Example / Practice */
.def .tag,.thm .tag,.eg .tag,.practice .tag,
.def .tag *,.thm .tag *,.eg .tag *,.practice .tag *{color:#fff;}
.def .tag,.thm .tag,.eg .tag,.practice .tag{padding:.2rem .6rem;border-radius:6px;
  box-shadow:0 1px 2px rgba(16,24,40,.18);}
.def .tag{background:var(--def);}
.thm .tag{background:var(--thm);}
.eg .tag{background:var(--ink);}
.practice .tag{background:var(--green);}
.eg{border-left:4px solid var(--ink);background:var(--surface);}
.practice{border-left:4px solid var(--green);background:var(--surface);}
.soln{font-family:var(--sans);font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--green);margin:.5rem 0 .35rem;}
.skip{border-left:4px solid var(--muted);background:var(--surface);}
.skip p{color:var(--muted);font-style:italic;font-size:1rem;margin:0;}
.result{border-left:5px solid var(--accent-dk);background:var(--band);}
.proofbox{border:1px solid var(--border);border-radius:10px;background:transparent;
  padding:.7rem 1.1rem;margin:1.3rem 0;}
.proofbox .ptag{font-weight:700;color:var(--text);}      /* "Proof." bold, body size/font */
.proofbox .qed{float:right;color:var(--muted);margin-top:.2rem;}
.proofbox p:last-of-type{margin-bottom:0;}
.keyconcept{border:none;border-radius:12px;background:linear-gradient(135deg,#eef3fc,#e7eefb);
  padding:1.1rem 1.3rem;margin:1.6rem 0;box-shadow:var(--shadow);}
.keyconcept .tag{color:var(--accent-dk);font-size:.74rem;font-family:var(--sans);
  font-weight:700;text-transform:uppercase;letter-spacing:.08em;display:block;margin-bottom:.35rem;}
.keyconcept p{font-family:var(--sans);font-weight:600;font-size:1.05rem;color:var(--accent-dk);margin:0;}
.proof{font-style:normal;}
.proof .ptag{font-style:italic;color:var(--text-soft);}

/* code */
.code{position:relative;font-family:var(--mono);font-size:.86rem;line-height:1.55;
  background:#0f1626;color:#e7ecf5;border-radius:10px;padding:1.6rem 1rem .9rem;
  overflow-x:auto;margin:1rem 0;border:1px solid #0b1120;}
.code.py{box-shadow:inset 4px 0 0 #3b82f6;}
.code.mat{box-shadow:inset 4px 0 0 #d97706;}
.code .lang{position:absolute;top:.45rem;left:.9rem;font-family:var(--sans);
  font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8aa0c6;}
.code pre{margin:0;white-space:pre;font-family:inherit;}
.code .cmt{color:#7f8db3;}

table.tbl{border-collapse:collapse;margin:1rem auto 1.3rem;font-family:var(--mono);font-size:.92rem;}
table.tbl td,table.tbl th{border:1px solid var(--border);padding:.3rem .6rem;text-align:center;}
table.tbl th,table.tbl .rh{background:var(--band);color:var(--accent);font-weight:700;}

ul.body,ol.body{margin:0 0 1.1rem;padding-left:1.4rem;}
ul.body li,ol.body li{margin:.3rem 0;}
ul.dash{list-style:none;padding-left:1.1rem;}
ul.dash li{position:relative;}
ul.dash li::before{content:"–";position:absolute;left:-1.1rem;color:var(--accent);}

.katex-display{margin:1.15rem 0;overflow-x:auto;overflow-y:hidden;padding:.1rem 0;}

/* page nav */
.pagenav{display:flex;justify-content:space-between;gap:1rem;margin-top:3rem;
  padding-top:1.3rem;border-top:1px solid var(--border);font-family:var(--sans);}
.pagenav a{display:flex;flex-direction:column;font-size:.92rem;font-weight:600;max-width:48%;}
.pagenav .lbl{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);margin-bottom:.15rem;}
.pagenav .next{text-align:right;align-items:flex-end;margin-left:auto;}

@media (max-width:980px){
  .shell{grid-template-columns:1fr;}
  .sidebar{display:none;}
}
@media (max-width:680px){
  .top-links{display:none;}
  figure.small img,figure.tiny img{max-width:90%;}
  .sechead h1{font-size:1.6rem;}
}