:root {
  --ink:#1d2b3a; --muted:#5c6c7e; --navy:#1f3a5f; --blue:#2f6fb0; --pale:#eaf1fa; --line:#d6e0ec;
  --orange:#e8913a; --green:#2e8b57; --red:#c0392b; --purple:#7b5ea7; --bg:#f6f8fb; --card:#fff;
  --radius:12px; --shadow:0 1px 3px rgba(31,58,95,.08), 0 6px 18px rgba(31,58,95,.05);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:76px; }
body { margin:0; font:16px/1.6 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; color:var(--ink); background:var(--bg); }
a { color:var(--blue); }
h1,h2,h3,h4 { color:var(--navy); line-height:1.25; margin:0; }
p { margin:.5em 0; }
svg { max-width:100%; height:auto; vertical-align:middle; }

/* ---- fractions & maths typesetting ---- */
.fr { display:inline-flex; flex-direction:column; align-items:center; vertical-align:middle; line-height:1.15; margin:0 .12em; font-size:.95em; }
.fr .n { border-bottom:1.5px solid currentColor; padding:0 .25em; }
.fr .d { padding:0 .25em; }
.mx { vertical-align:middle; margin-right:.06em; }
.rd { position:relative; display:inline-block; }
.rd::after { content:""; position:absolute; left:50%; top:-.02em; width:.14em; height:.14em; border-radius:50%; background:currentColor; transform:translateX(-50%); }
.small { font-size:.88rem; color:var(--muted); }

/* ---- top bar ---- */
.topbar { position:sticky; top:0; z-index:50; background:var(--navy); color:#fff; display:flex; align-items:center; gap:14px; padding:0 18px; height:56px; box-shadow:0 2px 8px rgba(0,0,0,.18); }
.topbar a { color:#fff; text-decoration:none; }
.brand { font-weight:700; letter-spacing:.01em; white-space:nowrap; }
.brand span { color:#9cc6f2; font-weight:600; }
.crumb { color:#c8d9ee; font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tier { display:inline-flex; background:rgba(255,255,255,.12); border-radius:999px; padding:3px; margin-left:auto; }
.tier a { padding:5px 14px; border-radius:999px; font-size:.88rem; font-weight:600; color:#c8d9ee; }
.tier a.on { background:#fff; color:var(--navy); }
.menu-btn { display:none; background:transparent; border:1px solid rgba(255,255,255,.4); color:#fff; border-radius:8px; padding:5px 10px; font:inherit; cursor:pointer; }

/* ---- layout ---- */
.layout { display:grid; grid-template-columns:270px minmax(0,1fr); gap:28px; max-width:1240px; margin:0 auto; padding:24px 18px 80px; }
.toc { position:sticky; top:76px; align-self:start; max-height:calc(100vh - 96px); overflow:auto; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow); font-size:.93rem; }
.toc h4 { font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:10px 0 6px; }
.toc a { display:block; padding:5px 8px; border-radius:7px; text-decoration:none; color:var(--ink); }
.toc a:hover { background:var(--pale); }
.toc a.active { background:var(--blue); color:#fff; }
.toc .sub { margin-left:12px; color:var(--muted); font-size:.88rem; }
.progress { margin:6px 0 12px; }
.bar { height:8px; background:var(--pale); border-radius:99px; overflow:hidden; }
.bar > i { display:block; height:100%; width:0; background:var(--green); transition:width .3s; }
.ptxt { font-size:.82rem; color:var(--muted); margin-top:4px; }
main { min-width:0; }

/* ---- hero ---- */
.hero { background:linear-gradient(135deg,var(--navy),#2b5a93); color:#fff; border-radius:16px; padding:28px 30px; box-shadow:var(--shadow); }
.hero .kicker { color:#ffd9a8; font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:.8rem; }
.hero h1 { color:#fff; font-size:2.3rem; margin:4px 0 10px; }
.hero .cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:14px; }
.hero h3 { color:#ffd9a8; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:4px; }
.hero ul { margin:0; padding-left:18px; } .hero li { margin:.2em 0; }
.hero .spec { color:#c8d9ee; font-size:.88rem; margin-top:14px; }

/* ---- sections & content boxes ---- */
.sec-h { display:flex; align-items:baseline; gap:12px; border-bottom:3px solid var(--blue); padding-bottom:6px; margin:44px 0 14px; flex-wrap:wrap; }
.sec-h .num { font-size:1.7rem; font-weight:800; color:var(--blue); }
.sec-h h2 { font-size:1.55rem; }
.sec-h .meta { margin-left:auto; font-size:.8rem; color:var(--muted); text-align:right; }
.keybox, .watch, .tip { border-radius:10px; padding:12px 16px; margin:14px 0; }
.keybox { background:var(--pale); border-left:5px solid var(--blue); }
.watch { background:#fff4e8; border-left:5px solid var(--orange); }
.tip { background:#eaf6ef; border-left:5px solid var(--green); }
.keybox h4, .watch h4, .tip h4 { font-size:.8rem; text-transform:uppercase; letter-spacing:.07em; margin-bottom:3px; }
.keybox h4 { color:var(--blue); } .watch h4 { color:#b8651b; } .tip h4 { color:var(--green); }
.keybox ul { margin:.2em 0 0; padding-left:20px; } .keybox li { margin:.25em 0; }
.fig { text-align:center; margin:12px 0; overflow-x:auto; }
.fig .cap { font-size:.86rem; color:var(--muted); margin-top:4px; }
.eqbars { display:inline-block; text-align:left; }
.eqrow { display:flex; align-items:center; gap:10px; margin:2px 0; }
.eql { width:38px; text-align:right; }
.figrow { display:flex; justify-content:center; gap:30px; align-items:flex-end; flex-wrap:wrap; }
.pies svg { margin:0 3px; }
.keyfacts { border-collapse:collapse; margin:12px auto; }
.keyfacts td, .keyfacts th { border:1px solid var(--line); padding:6px 18px; text-align:center; }
.keyfacts th { background:var(--pale); color:var(--navy); }

/* ---- worked examples ---- */
.we { background:var(--card); border:1.6px solid var(--blue); border-radius:12px; margin:18px 0; overflow:hidden; box-shadow:var(--shadow); }
.we-h { background:var(--blue); color:#fff; font-weight:600; padding:7px 16px; font-size:.92rem; letter-spacing:.02em; }
.we-q { padding:12px 16px 4px; font-weight:600; }
.we-s { padding:0 16px 14px; }
.step { display:flex; gap:10px; margin:7px 0; }
.step .sn { flex:0 0 auto; background:var(--pale); color:var(--blue); font-weight:700; border-radius:5px; padding:0 8px; font-size:.82rem; height:fit-content; margin-top:3px; }
.step .why { color:var(--muted); font-size:.9rem; font-style:italic; }
.final { margin:10px 0 0; padding:8px 14px; background:#eaf6ef; border-radius:8px; font-weight:700; }

/* ---- video placeholder / player ---- */
.videobox { background:#101c2e; color:#c8d9ee; border-radius:12px; margin:14px 0; overflow:hidden; }
.videobox .ph { display:flex; align-items:center; gap:14px; padding:16px 20px; }
.videobox .play { width:44px; height:44px; border-radius:50%; border:2px solid #7fb0e6; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.videobox .play::after { content:""; border-left:14px solid #7fb0e6; border-top:9px solid transparent; border-bottom:9px solid transparent; margin-left:4px; }
.videobox strong { color:#fff; display:block; }
.videobox video, .videobox iframe { width:100%; aspect-ratio:16/9; display:block; border:0; background:#000; }

/* ---- exercises ---- */
.exercise { background:var(--card); border:1px solid var(--line); border-radius:14px; margin:26px 0; box-shadow:var(--shadow); overflow:hidden; }
.ex-head { background:var(--navy); color:#fff; padding:12px 18px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ex-head h3 { color:#fff; font-size:1.1rem; }
.badge { font-size:.74rem; font-weight:700; padding:2px 10px; border-radius:99px; background:#ffd9a8; color:#5a3511; }
.exprog { margin-left:auto; font-size:.84rem; color:#c8d9ee; }
.q { display:grid; grid-template-columns:36px minmax(0,1fr) auto; gap:8px; padding:16px 18px; border-top:1px solid var(--line); }
.q:first-of-type { border-top:0; }
.q.done { background:#f3faf6; }
.qnum { font-weight:800; color:var(--blue); text-align:right; }
.tag { display:inline-block; font-size:.68rem; font-weight:800; padding:0 7px; border-radius:4px; margin-right:8px; vertical-align:2px; color:#fff; }
.tF { background:#7a8fa6; } .tPS { background:var(--orange); } .tR { background:var(--purple); }
.marks { float:right; font-weight:600; font-size:.86rem; color:var(--muted); margin-left:10px; }
.parts { margin-top:10px; display:flex; flex-direction:column; gap:10px; }
.part { border-left:3px solid var(--line); padding-left:12px; }
.part .row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pl { color:var(--muted); min-width:26px; }
.pt { flex:1 1 auto; min-width:120px; }
.ctrl { display:inline-flex; gap:6px; margin-top:8px; }
.part .ctrl { margin-top:0; }
.ctrl button { font:inherit; font-size:.8rem; font-weight:600; border-radius:99px; padding:3px 12px; cursor:pointer; border:1.5px solid var(--blue); background:#fff; color:var(--blue); }
.ctrl button[data-act="sol"] { border-color:var(--green); color:var(--green); }
.ctrl button[aria-expanded="true"] { background:var(--blue); color:#fff; }
.ctrl button[data-act="sol"][aria-expanded="true"] { background:var(--green); color:#fff; }
.reveal { margin-top:8px; padding:10px 14px; border-radius:9px; font-size:.97rem; }
.reveal[hidden] { display:none; }
.reveal.ans { background:var(--pale); border:1px solid #c6d9f0; }
.reveal.ans::before { content:"Answer  "; font-weight:800; color:var(--blue); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; margin-right:6px; }
.reveal.sol { background:#f0f9f3; border:1px solid #c5e5d1; }
.reveal.sol::before { content:"Step by step"; display:block; font-weight:800; color:var(--green); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }
ol.sol { margin:0; padding-left:22px; } ol.sol li { margin:.35em 0; }
.solintro { margin:0 0 4px; color:var(--muted); }
.done-wrap { align-self:start; font-size:.8rem; color:var(--muted); white-space:nowrap; }
.done-wrap input { accent-color:var(--green); width:17px; height:17px; vertical-align:-3px; margin-right:4px; }

/* ---- end matter ---- */
.summary table { width:100%; border-collapse:collapse; background:var(--card); border-radius:10px; overflow:hidden; box-shadow:var(--shadow); }
.summary th { background:var(--navy); color:#fff; text-align:left; padding:9px 14px; }
.summary td { border-top:1px solid var(--line); padding:9px 14px; vertical-align:top; }
.checklist { padding:0; } .checklist li { list-style:none; margin:.4em 0; }
.checklist li::before { content:"\2610  "; color:var(--blue); }
.gloss dt { font-weight:700; color:var(--navy); margin-top:10px; } .gloss dd { margin:0; }
.endcard { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 22px; margin:20px 0; box-shadow:var(--shadow); }
.endcard h2 { margin-bottom:8px; font-size:1.35rem; }

/* ---- home page ---- */
.home { max-width:1100px; margin:0 auto; padding:30px 18px 80px; }
.home .hero { text-align:left; }
.home h2 { margin:34px 0 12px; font-size:1.4rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:6px; text-decoration:none; color:inherit; }
.card.live:hover { border-color:var(--blue); transform:translateY(-1px); }
.card .no { font-weight:800; color:var(--blue); font-size:.85rem; }
.card h3 { font-size:1.02rem; }
.card .strand { font-size:.78rem; color:var(--muted); }
.card .links { display:flex; gap:8px; margin-top:auto; padding-top:6px; }
.card .links a { font-size:.82rem; font-weight:700; padding:3px 12px; border-radius:99px; background:var(--pale); text-decoration:none; }
.card.soon { opacity:.62; }
.pill { font-size:.7rem; font-weight:800; padding:1px 8px; border-radius:99px; background:#eee; color:#666; align-self:flex-start; }
.pill.live { background:#dff3e7; color:#1f6b43; }
.pill.h { background:#efe6fb; color:#5b3f8c; }
footer { text-align:center; color:var(--muted); font-size:.85rem; padding:30px 18px 50px; }

/* ---- responsive ---- */
@media (max-width:960px) {
  .layout { grid-template-columns:1fr; padding-top:14px; }
  .toc { display:none; position:static; max-height:none; }
  .toc.open { display:block; }
  .menu-btn { display:inline-block; }
  .crumb { display:none; }
  .hero h1 { font-size:1.8rem; }
  .q { grid-template-columns:28px minmax(0,1fr); } .done-wrap { grid-column:2; }
}
@media print {
  .topbar, .toc, .ctrl, .done-wrap, .menu-btn { display:none !important; }
  .reveal { display:block !important; } .layout { display:block; } body { background:#fff; }
}

.btn { font:inherit; font-weight:600; font-size:.88rem; border:1.5px solid var(--blue); background:#fff; color:var(--blue); border-radius:99px; padding:6px 16px; cursor:pointer; }
.btn:hover { background:var(--pale); }
.btn[aria-pressed="true"] { background:var(--blue); color:#fff; }

/* ---- detailed solutions ---- */
.sd { }
.sd-method { margin:0 0 8px; padding:8px 12px; background:#fff; border-left:4px solid var(--green); border-radius:6px; }
.sd ol.sol { padding-left:24px; }
.sd ol.sol > li { margin:10px 0; padding-left:2px; }
.sd .act { font-weight:700; color:var(--ink); }
.sd .why { color:var(--muted); font-size:.93rem; }
.sd .work { margin-top:5px; padding:7px 12px; background:#fff; border:1px solid #cfe7d8; border-radius:7px; line-height:1.9; }
.sd-check { margin:8px 0 0; padding:7px 12px; background:#eef7f1; border-radius:7px; }
.sd-tip { margin:8px 0 0; padding:7px 12px; background:#fff4e8; border-left:4px solid var(--orange); border-radius:6px; }
.sd-plain { margin:0 0 8px; padding:8px 12px; background:#fffbe8; border-left:4px solid #e0b53a; border-radius:6px; font-size:.95rem; }
.sd s { text-decoration-thickness:1.5px; text-decoration-color:#c0392b; color:#8a99aa; }

/* ---- narrated walkthrough ---- */
.walkbtn { display:inline-flex; align-items:center; gap:6px; margin:0 0 8px; font:inherit; font-size:.84rem; font-weight:700; padding:5px 14px; border-radius:99px; border:0; background:var(--green); color:#fff; cursor:pointer; }
.walkbtn:hover { filter:brightness(1.08); }
#walk { position:fixed; inset:0; z-index:200; background:rgba(16,28,46,.72); display:flex; align-items:center; justify-content:center; padding:14px; }
#walk[hidden] { display:none; }
.walk-card { background:#fff; border-radius:16px; width:min(820px,100%); max-height:94vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,.4); overflow:hidden; }
.walk-top { display:flex; align-items:center; background:var(--navy); color:#fff; padding:10px 16px; }
.walk-title { font-weight:700; letter-spacing:.02em; }
.walk-x { margin-left:auto; background:transparent; border:0; color:#fff; font-size:1.7rem; line-height:1; cursor:pointer; }
.walk-q { padding:12px 18px; background:var(--pale); font-weight:600; border-bottom:1px solid var(--line); max-height:20vh; overflow:auto; }
.walk-prog { height:5px; background:#e3ebf5; } .walk-prog i { display:block; height:100%; width:0; background:var(--green); transition:width .25s; }
.walk-label { padding:12px 18px 0; font-size:.8rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); }
.walk-body { padding:6px 18px 14px; overflow:auto; font-size:1.12rem; line-height:1.75; flex:1; min-height:140px; }
.w-act { font-weight:700; font-size:1.22rem; margin:.3em 0; } .w-why { color:var(--muted); margin:.3em 0 .6em; }
.w-work { background:#f3faf6; border:1px solid #cfe7d8; border-radius:10px; padding:10px 14px; line-height:2; font-size:1.08rem; }
.walk-ctl { display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:12px 18px; border-top:1px solid var(--line); background:#fafcff; }
.walk-ctl button { font:inherit; font-weight:700; border-radius:99px; padding:8px 18px; border:1.5px solid var(--blue); background:#fff; color:var(--blue); cursor:pointer; }
.walk-ctl button.primary { background:var(--blue); color:#fff; min-width:110px; }
.walk-ctl label { font-size:.85rem; color:var(--muted); display:inline-flex; align-items:center; gap:6px; }
.walk-ctl select { font:inherit; padding:4px 8px; border-radius:8px; border:1px solid var(--line); }
.walk-note { padding:0 18px 12px; font-size:.78rem; color:var(--muted); }
@media print { #walk, .walkbtn { display:none !important; } }

.pagenav { display:flex; gap:12px; margin:30px 0 10px; }
.pagenav a { padding:10px 18px; border:1.5px solid var(--blue); border-radius:99px; text-decoration:none; font-weight:700; background:#fff; }
.we .walkbtn { margin:2px 0 8px; }

.vid { margin:10px 0 12px; border-radius:12px; overflow:hidden; background:#101c2e; }
.vid-h { color:#c8d9ee; font-size:.85rem; font-weight:700; padding:8px 14px; letter-spacing:.03em; }
.vid video { width:100%; display:block; aspect-ratio:16/9; background:#000; }
.we > .vid { margin:6px 16px 6px; }

/* ---- phones: keep the top bar inside the screen ---- */
@media (max-width:560px) {
  .topbar { gap:8px; padding:0 10px; }
  .brand span { display:none; }
  .brand { font-size:.95rem; }
  .tier a { padding:5px 10px; font-size:.8rem; }
  .menu-btn { padding:4px 9px; font-size:.82rem; }
  .layout { padding-left:10px; padding-right:10px; }
}
/* html scrolls the page; body only clips. Both 'hidden' made body a scroll container, which broke the sticky chapter sidebar */
html { overflow-x:hidden; }
body { overflow-x:clip; }