:root{
  --ink:#23201b; --ink-soft:#4b463d; --faint:#8a8276;
  --bg:#faf7f0; --panel:#f1ece0; --card:#fffdf8;
  --line:#e2dccd; --line-strong:#cdc5b2;
  --accent:#7a5a1e; --accent-2:#9c7a2e; --accent-soft:#efe6cf;
  --green:#5c7d3a; --green-soft:#eef3e3;
  --right:#4e7a34; --right-bg:#eaf2df;
  --wrong:#a23b2d; --wrong-bg:#f6e6e2;
  --serif:Iowan Old Style,"Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --mono:"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--serif); font-size:19px; line-height:1.62;
  padding:0 20px;
}
.wrap{max-width:760px; margin:0 auto; padding:56px 0 120px}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.eyebrow{
  text-align:center; letter-spacing:.14em; text-transform:uppercase;
  font-size:12.5px; font-weight:700; color:var(--green);
  font-family:var(--mono); margin:0 0 14px;
}
h1{font-size:40px; line-height:1.1; text-align:center; margin:0 0 10px; font-weight:800; letter-spacing:-.01em}
.sub{text-align:center; font-style:italic; color:var(--ink-soft); margin:0 auto 26px; max-width:620px}
.meta{text-align:center; color:var(--ink-soft); font-size:16px; margin:4px 0}
h2{font-size:25px; margin:52px 0 14px; font-weight:800; letter-spacing:-.01em}
h3{font-size:20px; margin:30px 0 8px; font-weight:700}
p{margin:0 0 14px}
code{font-family:var(--mono); font-size:.82em; background:var(--panel); padding:1px 5px; border-radius:4px; color:#5a4420}
hr{border:none; border-top:1px solid var(--line); margin:40px 0}
.lede{font-size:20px; color:var(--ink-soft)}
.backlink{display:inline-block; margin-bottom:22px; font-family:var(--mono); font-size:13px; letter-spacing:.04em}

/* callout */
.callout{background:var(--green-soft); border-left:4px solid var(--green); padding:16px 20px; margin:18px 0; border-radius:0 8px 8px 0}
.callout .k{font-family:var(--mono); text-transform:uppercase; letter-spacing:.12em; font-size:11.5px; font-weight:700; color:var(--green); display:block; margin-bottom:8px}
.callout.amber{background:var(--accent-soft); border-left-color:var(--accent-2)}
.callout.amber .k{color:var(--accent)}

/* fact checklist */
.facts{background:var(--card); border:1px solid var(--line); border-left:4px solid var(--green); border-radius:0 8px 8px 0; padding:8px 20px 14px; margin:16px 0}
.facts .grp{font-family:var(--mono); text-transform:uppercase; letter-spacing:.12em; font-size:11.5px; font-weight:700; color:var(--green); margin:16px 0 6px}
.fact{display:flex; gap:10px; align-items:flex-start; padding:7px 0; border-top:1px dotted var(--line)}
.fact:first-of-type{border-top:none}
.fact input{margin-top:7px; flex:0 0 auto; width:15px; height:15px; accent-color:var(--green)}
.fact label{cursor:pointer}
.fact.done label{color:var(--faint)}

/* topic cards grid */
.grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px}
@media(max-width:620px){.grid{grid-template-columns:1fr}}
.card{display:block; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px 18px; color:inherit}
.card:hover{border-color:var(--line-strong); text-decoration:none; transform:translateY(-1px)}
.card .t{color:var(--accent); font-weight:700; font-size:18px; margin-bottom:4px}
.card .d{font-size:14.5px; color:var(--ink-soft); line-height:1.45}
.card .pill{font-family:var(--mono); font-size:11px; color:var(--green); font-weight:700}

/* table of contents (jump links) */
.toc{columns:2; column-gap:40px; margin:14px 0 8px; font-size:17px}
@media(max-width:560px){.toc{columns:1}}
.toc a{display:block; padding:3px 0}
.toc li{list-style:disc; margin-left:20px}

/* quiz */
.block{margin:18px 0 10px}
.q{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px 18px; margin:12px 0}
.q .stem{font-weight:600; margin-bottom:12px}
.q .stem .num{color:var(--faint); font-family:var(--mono); font-size:14px; margin-right:8px}
.opt{display:block; width:100%; text-align:left; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:10px 14px; margin:7px 0; font-family:inherit; font-size:17px; color:var(--ink); cursor:pointer; line-height:1.4}
.opt:hover{border-color:var(--line-strong)}
.opt:disabled{cursor:default}
.opt.right{background:var(--right-bg); border-color:var(--right); color:#2f4d1f}
.opt.wrong{background:var(--wrong-bg); border-color:var(--wrong); color:#7a271c}
.opt .mk{font-family:var(--mono); font-weight:700; margin-right:6px}
.explain{margin-top:10px; padding:11px 14px; background:var(--green-soft); border-radius:8px; font-size:16px; color:var(--ink-soft); display:none}
.explain.show{display:block}
.explain b{color:var(--ink)}

/* scorebar */
.scorebar{position:sticky; top:0; z-index:5; background:rgba(250,247,240,.94); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); padding:9px 0; margin:0 0 6px; font-family:var(--mono); font-size:14px; color:var(--ink-soft); display:flex; gap:18px; align-items:center; justify-content:space-between}
.scorebar .s{color:var(--green); font-weight:700}
.btn{font-family:var(--mono); font-size:13px; letter-spacing:.03em; background:var(--accent); color:#fff; border:none; border-radius:7px; padding:8px 14px; cursor:pointer}
.btn:hover{background:var(--accent-2)}
.btn.ghost{background:transparent; color:var(--accent); border:1px solid var(--line-strong)}

/* flashcards */
.cards{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:16px 0}
@media(max-width:620px){.cards{grid-template-columns:1fr}}
.flip{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px; min-height:118px; cursor:pointer; display:flex; flex-direction:column; justify-content:center}
.flip:hover{border-color:var(--line-strong)}
.flip .term{font-weight:700; font-size:19px}
.flip .pos{font-family:var(--mono); font-size:11px; color:var(--faint); text-transform:uppercase; letter-spacing:.08em; margin-top:3px}
.flip .def{font-size:16px; color:var(--ink-soft); display:none}
.flip.flipped .def{display:block}
.flip.flipped .term,.flip.flipped .pos{display:none}
.flip.known{border-left:4px solid var(--green)}

.mock{background:var(--card); border:1px solid var(--line-strong); border-radius:12px; padding:18px 20px; margin:16px 0}
.result{font-size:22px; font-weight:800; margin:8px 0}
.note{font-size:15px; color:var(--faint)}
.foot{margin-top:70px; padding-top:20px; border-top:1px solid var(--line); font-size:14px; color:var(--faint); text-align:center}
.foot a{color:var(--accent)}
.tag{display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--green); background:var(--green-soft); padding:2px 8px; border-radius:20px; margin:0 6px 6px 0}