:root{
  --bg:#f4f5f7; --page:#ffffff; --ink:#1c2433; --muted:#5b6675; --line:#dce1e8;
  --accent:#1c5fb0; --accent-dark:#13447f;
  --def-bg:#eaf2fb; --def-border:#1c5fb0;
  --try-bg:#eef7f0; --try-border:#2f8f56;
  --ex-head:#eef1f6; --ex-border:#cfd6e0;
  --good:#1f7a44; --bad:#c0392b;
  --serif:Georgia,'Times New Roman',serif;
  --sans:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --mono:'Cascadia Code',Consolas,'Courier New',monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.65;}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.page{max-width:860px;margin:0 auto;background:var(--page);min-height:100vh;
  border-left:1px solid var(--line);border-right:1px solid var(--line);
  padding:0 clamp(18px,5vw,60px) 70px}
.crumbs{font-size:13px;color:var(--muted);padding:18px 0 0}
.crumbs a{color:var(--muted)} .crumbs a:hover{color:var(--accent)}
.crumbs .sep{margin:0 7px;color:#aeb6c2}

h1,h2,h3{font-family:var(--serif);color:var(--ink);line-height:1.25}
.eyebrow{text-transform:uppercase;letter-spacing:1.5px;font-size:12px;font-weight:700;color:var(--accent);margin:26px 0 2px}
h1.title{font-size:34px;margin:.1em 0 .15em}
.lead{font-size:18px;color:#3a4452;margin:0 0 6px}
h2.heading{font-size:22px;margin:34px 0 12px;padding-bottom:6px;border-bottom:2px solid var(--line)}

/* callout boxes */
.callout{border-radius:6px;padding:16px 18px;margin:14px 0}
.callout.definition{background:var(--def-bg);border:1px solid #c5dbf3;border-left:5px solid var(--def-border)}
.callout.tryit{background:var(--try-bg);border:1px solid #c8e6d2;border-left:5px solid var(--try-border)}
.callout .co-label{font-family:var(--sans);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.8px;color:var(--accent-dark);margin-bottom:8px}
.callout.tryit .co-label{color:var(--try-border)}
.formula-display{font-family:var(--mono);font-size:21px;color:var(--ink);text-align:center;padding:10px 0;overflow-x:auto}

/* multi-level math typesetting */
.math{font-family:var(--mono);display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:0;line-height:1.35}
.math sup{font-size:.72em;line-height:0;position:relative;top:-.5em;margin:0 .02em}
.math sub{font-size:.72em;line-height:0;position:relative;bottom:-.35em;margin:0 .02em}
.math .frac{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;vertical-align:middle;text-align:center;margin:0 .22em}
.math .frac>.num{padding:0 .45em 2px;border-bottom:1.5px solid currentColor}
.math .frac>.den{padding:2px .45em 0}
.math .sqrt{display:inline-flex;align-items:flex-start;margin:0 .05em}
.math .sqrt>.rad{font-size:1.05em;line-height:1}
.math .sqrt>.sqrt-index{font-size:.62em;align-self:flex-start;margin-right:-.34em;margin-top:.1em}
.math .sqrt>.radicand{border-top:1.5px solid currentColor;padding:1px .25em 0;margin-top:.18em}
.math .abs{padding:0 .12em;border-left:1.5px solid currentColor;border-right:1.5px solid currentColor;margin:0 .08em}
.math .abs.abs2{box-shadow:inset 2.5px 0 currentColor,inset -2.5px 0 currentColor}
.sec-formula .math{justify-content:flex-start;line-height:1.1;font-size:13px}

/* variables list */
dl.varlist{display:grid;grid-template-columns:max-content 1fr;gap:8px 20px;margin:10px 0;font-size:15.5px}
dl.varlist dt{font-family:var(--mono);font-weight:700;color:var(--accent-dark)}
dl.varlist dd{margin:0;color:var(--ink)}

/* variables table */
table.vartable{width:100%;border-collapse:collapse;margin:12px 0;font-size:15px}
table.vartable th,table.vartable td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
table.vartable thead th{font-family:var(--sans);font-size:12.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--accent-dark);border-bottom:2px solid var(--accent-dark)}
table.vartable td.sym{font-family:var(--mono);font-weight:700;color:var(--accent-dark);white-space:nowrap}
table.vartable td.dom{font-family:var(--mono);font-size:13.5px;color:var(--muted);white-space:nowrap}
table.vartable td.unit{color:var(--muted)}
table.vartable tr.is-output td.role{color:var(--try-border);font-weight:600}
.vartable-wrap{overflow-x:auto}
@media (max-width:560px){table.vartable td.dom{white-space:normal}}

/* calculator */
.field{margin-bottom:13px}
.field label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:5px}
.field input{width:100%;padding:10px 12px;font-size:15px;color:var(--ink);background:#fff;
  border:1px solid #b9c2cf;border-radius:5px;outline:none;font-family:var(--sans)}
.field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(28,95,176,.15)}
.field .hint{font-size:12.5px;color:var(--muted);margin-top:4px}
.btn{appearance:none;cursor:pointer;border:none;border-radius:5px;padding:11px 24px;font-size:15px;font-weight:700;
  color:#fff;background:var(--try-border);margin-top:4px;font-family:var(--sans)}
.btn:hover{background:#27744a}
.result{margin-top:16px;padding-top:14px;border-top:1px dashed #bcd6c4}
.result .label{font-size:12px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin-bottom:6px;font-weight:700}
.result .value{font-size:22px;font-weight:700;color:var(--ink);word-break:break-word}
.result .value.error{color:var(--bad);font-size:16px;font-weight:600}

table{border-collapse:collapse;margin-top:4px}
td{border:1px solid var(--line);padding:6px 12px;text-align:right;font-family:var(--mono);background:#fff}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:17px}
.kv .k{color:var(--muted)}

/* examples */
.example{border:1px solid var(--ex-border);border-radius:6px;margin:14px 0;overflow:hidden}
.example .example-head{background:var(--ex-head);padding:8px 16px;font-weight:700;font-size:14px;color:var(--ink);border-bottom:1px solid var(--ex-border)}
.example .example-body{padding:13px 16px}
.example .ex-row{font-size:15px;margin:2px 0}
.example .ex-label{display:inline-block;min-width:74px;font-weight:700;color:var(--muted)}
.example .ex-given{font-family:var(--mono);font-size:13.5px;color:#3a4452}
.example .ex-result b{color:var(--good)}

/* ---------- index (table of contents) ---------- */
.booktitle{padding:34px 0 8px;border-bottom:3px double var(--line);margin-bottom:18px}
.booktitle .kicker{text-transform:uppercase;letter-spacing:2px;font-size:12px;color:var(--accent);font-weight:700}
.booktitle h1{font-size:40px;margin:6px 0 6px}
.booktitle p{color:var(--muted);margin:0;font-size:16px}
.search{width:100%;padding:12px 14px;font-size:16px;color:var(--ink);background:#fff;
  border:1px solid #b9c2cf;border-radius:6px;outline:none;margin:18px 0 6px}
.search:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(28,95,176,.15)}
.tocmeta{color:var(--muted);font-size:13px;margin-bottom:18px}
.chapter{margin:26px 0}
.chapter-title{font-size:21px;margin:0 0 8px;display:flex;align-items:baseline;gap:10px}
.chapter-title .chap-num{font-family:var(--sans);background:var(--accent);color:#fff;font-size:14px;font-weight:700;
  border-radius:5px;padding:2px 10px;line-height:1.5}
.chapter-title .count{font-family:var(--sans);font-size:13px;color:var(--muted);font-weight:400}
ol.section-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
ol.section-list li{border-bottom:1px solid var(--line)}
ol.section-list a{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:9px 4px;color:var(--ink)}
ol.section-list a:hover{background:#f3f7fc;text-decoration:none}
ol.section-list .sec-name{font-weight:600}
ol.section-list .sec-num{color:var(--muted);font-family:var(--sans);font-size:13px;margin-right:8px}
ol.section-list .sec-formula{font-family:var(--mono);font-size:13px;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}
.empty{color:var(--muted);padding:24px 0}
.footer{margin-top:40px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:13px;text-align:center}
.backlinks{margin-top:46px;border-top:2px solid var(--accent);padding-top:16px}
.backlinks h2{font-family:var(--sans);font-size:13px;text-transform:uppercase;letter-spacing:.7px;color:var(--accent);margin:0 0 12px}
.backlinks ul.linklist{list-style:none;margin:0;padding:0;columns:2;column-gap:32px}
.backlinks ul.linklist li{margin:0 0 7px;break-inside:avoid;font-family:var(--sans);font-size:13.5px}
.backlinks ul.linklist a{color:var(--accent);text-decoration:none;word-break:break-word}
.backlinks ul.linklist a:hover{text-decoration:underline}
@media(max-width:560px){.backlinks ul.linklist{columns:1}}
.pager{margin-top:30px;font-size:15px}