/* Layout: one reading column (~44rem) on Ember orange (same family as the IELTS app); rust accent; figures sit beside text when there is room. */
:root{
  --fs-xs:12px; --fs-sm:14px; --fs-md:16px; --fs-h3:18px; --fs-h2:22px; --fs-h1:34px; --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-5:48px; --sp-6:64px;
  --bg:#fffaf4; --surface:#ffffff; --side:#fdf0e2; --fg:#231008; --muted:#6b4a37; --line:#ecd9c6; --grid:#f6ebdd;
  --accent:#b83e12; --accent-soft:#ffe9d6;
  --lift:0 1px 0 rgba(255,255,255,.9) inset,0 1px 2px rgba(80,40,10,.10),0 8px 18px -8px rgba(80,40,10,.28);
  --lift-sm:0 1px 0 rgba(255,255,255,.6) inset,0 4px 10px -6px rgba(80,40,10,.22);
  --def:#0b6a58; --def-soft:#e6eedc;
  --warn:#a3243a; --warn-soft:#fdeaea;
  --l2:#0b6a58; --orange:#c3651b; --red:#b2263c;
  --brand:#ff9c5a; --brand-deep:#e0773a; --on-brand:#231008;
  --serif:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#1b100a; --surface:#27170e; --side:#140b06; --fg:#fbeee0; --muted:#d0ab90; --line:#4a2d1a; --grid:#56361f; --plot-bg:#110906;
  --accent:#ffa060; --accent-soft:#3b2314; --def:#6fd6ba; --def-soft:#1a2a20;
  --warn:#ff8c9c; --warn-soft:#38191f; --l2:#5fd0b4; --orange:#ffa060; --red:#ff8c9c;
  --brand:#ff9c5a; --brand-deep:#e0773a; --on-brand:#231008; --on-accent:#231008; color-scheme:dark;--lift:0 1px 0 rgba(255,255,255,.07) inset,0 1px 2px rgba(0,0,0,.5),0 8px 18px -8px rgba(0,0,0,.7);--lift-sm:0 1px 0 rgba(255,255,255,.05) inset,0 4px 10px -6px rgba(0,0,0,.6) }}
:root[data-theme="dark"]{
  --bg:#1b100a; --surface:#27170e; --side:#140b06; --fg:#fbeee0; --muted:#d0ab90; --line:#4a2d1a; --grid:#56361f; --plot-bg:#110906;
  --accent:#ffa060; --accent-soft:#3b2314; --def:#6fd6ba; --def-soft:#1a2a20;
  --warn:#ff8c9c; --warn-soft:#38191f; --l2:#5fd0b4; --orange:#ffa060; --red:#ff8c9c;
  --brand:#ff9c5a; --brand-deep:#e0773a; --on-brand:#231008; --on-accent:#231008; color-scheme:dark;--lift:0 1px 0 rgba(255,255,255,.07) inset,0 1px 2px rgba(0,0,0,.5),0 8px 18px -8px rgba(0,0,0,.7);--lift-sm:0 1px 0 rgba(255,255,255,.05) inset,0 4px 10px -6px rgba(0,0,0,.6) }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--fg);font:var(--fs-md)/1.75 var(--serif);-webkit-font-smoothing:antialiased;
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
a{color:var(--accent)}
.wrap{width:100%;max-width:54rem;margin:0 auto;padding-block:0 4rem;min-width:0}
.layout{display:block}
.sidetoc{display:none}
.menu-btn{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);background:var(--surface);color:var(--fg);
  border-radius:6px;padding:4px 10px;font:600 var(--fs-sm) var(--sans);cursor:pointer;flex-shrink:0}
.menu-btn:focus-visible,.sidetoc summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sidetoc-in{font:var(--fs-sm)/1.45 var(--sans);padding:18px 16px 32px 18px}
/* app name stays pinned at the top of the menu; the rule separates it from the scrolling list */
.side-brand{display:block;position:sticky;top:0;z-index:2;font:600 1.05rem/1.2 var(--serif);color:var(--fg);text-decoration:none;
  background:var(--sb-bg);margin:-18px -16px 8px -18px;padding:18px 16px 12px 18px;border-bottom:1px solid var(--line)}
.sidetoc details.ch{border-top:1px solid var(--line)}
.sidetoc details.ch:first-child{border-top:0}
.sidetoc summary{list-style:none;cursor:pointer;display:flex;gap:8px;padding:8px 0;font-weight:600;color:var(--fg)}
.sidetoc summary::-webkit-details-marker{display:none}
.sidetoc summary::after{content:"▸";margin-left:auto;color:var(--muted);transition:transform .15s}
.sidetoc details[open]>summary::after{transform:rotate(90deg)}
.sidetoc .cn{color:var(--accent);min-width:1.4em}
.sidetoc ul{list-style:none;margin:0 0 8px;padding:0}
.sidetoc ul>li>a,.sidetoc ul>li.off{display:flex;gap:6px;padding:4px 0 4px 1.4em;color:var(--fg);text-decoration:none}
.sidetoc ul>li.off{color:var(--muted);opacity:.75}
.sidetoc .sn{color:var(--muted);min-width:2.3em;font-variant-numeric:tabular-nums}
.sidetoc li.cur>a{color:var(--accent);font-weight:600}
/* margin-left lines the sub-items' text up with the section title (1.4em pad + 2.3em .sn + 6px gap, minus 14px rail/padding) */
.sidetoc ol.parts{list-style:none;margin:2px 0 6px calc(3.7em - 8px);padding:0;border-left:1px solid var(--line)}
.sidetoc ol.parts a{display:block;padding:4px 0 4px 12px;margin-left:-1px;border-left:2px solid transparent;color:var(--muted);text-decoration:none;font-size:var(--fs-sm)}
.sidetoc ol.parts a:hover{color:var(--fg)}
.sidetoc ol.parts a.active{color:var(--accent);border-left-color:var(--accent);font-weight:600}
/* drawer on narrow screens */
@media (max-width:1079px){
  .sidetoc.open{display:block;position:fixed;inset:0 auto 0 0;width:min(300px,86vw);z-index:30;overflow:auto;
    background:var(--side);border-right:1px solid var(--line);padding-top:env(safe-area-inset-top,0px);box-shadow:4px 0 24px rgba(10,20,40,.18)}
  .side-scrim{position:fixed;inset:0;z-index:25;background:rgba(10,15,25,.35)}
}
/* fixed sidebar on wide screens */
@media (min-width:1080px){
  body{padding-left:0}
  .layout{display:grid;grid-template-columns:280px minmax(0,1fr)}
  .sidetoc{display:block;position:sticky;top:0;height:100vh;overflow:auto;background:var(--side);border-right:1px solid var(--line)}
  .layout .wrap{max-width:66rem;padding-inline:36px 36px}
  .toc-inline{display:none}
  .menu-btn{display:none}
  .side-scrim{display:none}
}

/* top bar */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:12px;padding-block:10px;font:500 var(--fs-sm)/1.3 var(--sans);margin-bottom:28px}
.bar a{text-decoration:none}
.bar .home{font-weight:600;color:var(--fg)}
.bar .crumb{color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .nav{margin-left:auto;display:flex;gap:6px;flex-shrink:0}
.bar .nav a,.bar .nav .dis{padding:4px 10px;border:1px solid var(--line);border-radius:6px;color:var(--fg)}
.bar .nav .dis{color:var(--muted);opacity:.6}
.theme-btn{border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:6px;padding:2px 9px;font:var(--fs-md)/1.4 var(--sans);cursor:pointer}
.theme-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* page header */
.eyebrow{font:600 var(--fs-xs)/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0}
h1{font:700 var(--fs-h1)/1.25 var(--serif);letter-spacing:-.01em;margin:.2em 0 .1em;text-wrap:balance}
.h1-vi{font:400 var(--fs-h3)/1.4 var(--sans);color:var(--muted);margin:0 0 1.4rem}
.toc{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:12px 18px;margin-bottom:2.5rem;font:var(--fs-md)/1.5 var(--sans)}
.toc b{display:block;font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.toc ol{margin:0;padding-left:1.4em;columns:2;column-gap:2rem}
.toc li{break-inside:avoid;padding:2px 0}
.toc a{text-decoration:none}
@media (max-width:640px){.toc ol{columns:1}}

/* sections */
section{scroll-margin-top:64px;margin-top:4rem}
h2{font:600 var(--fs-h2)/1.3 var(--serif);letter-spacing:-.005em;margin:0 0 .2rem;text-wrap:balance;display:flex;gap:.5em;align-items:baseline}
h2 .n{font:600 var(--fs-md) var(--sans);color:var(--accent);min-width:1.4em}
.h2-vi{font:400 var(--fs-md)/1.4 var(--sans);color:var(--muted);margin:0 0 1rem 2.15rem}
h3{font:600 var(--fs-h3)/1.4 var(--serif);margin:var(--sp-4) 0 var(--sp-1)}
.h3g{margin:2rem 0 .4rem}
.h3g h3{margin:0 0 .15rem}
.h3-vi{font:400 var(--fs-sm)/1.4 var(--sans);color:var(--muted);margin:0}
p{margin:.75em 0}
.flow{display:flex;flex-direction:column;gap:var(--sp-3)}

/* blocks */
.blk{position:relative;min-width:0}
.blk-h{font:600 var(--fs-xs)/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}
/* definition = the strongest block on the page: tinted fill, thick rail, filled label, term highlights */
.def{background:color-mix(in srgb,var(--def) 11%,var(--surface));border:1px solid color-mix(in srgb,var(--def) 40%,transparent);
  border-left:6px solid var(--def);border-radius:4px 12px 12px 4px;padding:20px 26px 18px;box-shadow:var(--lift)}
.def .blk-h{display:inline-block;background:var(--def);color:var(--bg);padding:2px 10px;border-radius:999px;margin-bottom:8px;font-size:var(--fs-xs);letter-spacing:.07em}
.def b{color:var(--def)}
/* note = quiet aside; warn = a real pitfall (wrong answer / common mistake) */
.note{border-left:2px solid var(--line);padding:2px 64px 2px 16px;font-size:var(--fs-sm);color:var(--muted)}
.note .blk-h{color:var(--muted)}
.note p{margin:.4em 0}
.warn{background:var(--warn-soft);border-left:3px solid var(--warn);border-radius:0 10px 10px 0;padding:16px 24px;box-shadow:var(--lift-sm)}
.warn .blk-h{color:var(--warn)}
.warn .blk-h::before{content:"⚠ "}
.ex{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:20px 26px;box-shadow:var(--lift)}
.ex-h{font:600 var(--fs-md)/1.4 var(--sans);margin-bottom:6px}
.ex-h .ex-n{color:var(--accent);margin-right:.4em}
.katex{font-size:1.12em}
.katex-display{margin:.7em 0;overflow-x:auto;overflow-y:hidden;padding:2px 0}
.nw{white-space:nowrap}
ul.list,ol.list{margin:.4em 0;padding-left:1.3em}
ul.list li,ol.list li{margin:.25em 0}

/* solution toggle */
details.sol{margin-top:8px}
details.sol>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  font:600 var(--fs-sm) var(--sans);color:var(--accent);padding:4px 0}
details.sol>summary::-webkit-details-marker{display:none}
details.sol>summary::before{content:"▸";transition:transform .15s}
details.sol[open]>summary::before{transform:rotate(90deg)}
details.sol>summary::after{content:attr(data-closed)}
details.sol[open]>summary::after{content:attr(data-open)}
.sol-body{border-top:1px dashed var(--line);margin-top:6px;padding-top:6px}
.part-h{font:600 var(--fs-sm) var(--sans);color:var(--muted);margin:14px 0 2px}
.check{color:var(--def)}

/* figures */
figure svg{width:100%;max-width:400px;height:auto;display:block;background:var(--plot-bg,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));border-radius:10px;box-shadow:var(--lift)}
figure{margin:0}
/* lesson figures: transparent, no card frame (the figure sits on the page background) */
.lesson-page figure svg{background:none;border:0;border-radius:0;box-shadow:none}
/* lesson figures keep their drawn size (360 x 320 px); on a narrow screen they shrink with max-width. Cards are not figures and keep their own size. */
.lesson-page figure svg.plot{width:360px;height:auto;max-width:100%}
/* a formula line before a figure (e.g. a limit with subscript) keeps clear of the figure top */
.lesson-page p + figure{margin-top:14px}
/* a figure right after another figure: its caption does not run into the next drawing */
.lesson-page figure + figure{margin-top:18px}
.lesson-page .figrow > figure{margin-top:0}
/* lesson pages: the small cards (sign cards, interval cards) are plain; the drawing sits on the page background */
.lesson-page .card{border:0;background:none;border-radius:0;box-shadow:none}
.lesson-page .card svg,.lesson-page .card svg.plot{background:none;border:0;border-radius:0;box-shadow:none}
/* label halos in figures take the colour of the box they sit in (figures are transparent) */
.lesson-page{--halo-bg:var(--bg)}
.lesson-page .ex,.lesson-page .topic{--halo-bg:var(--surface)}
.lesson-page .def{--halo-bg:color-mix(in srgb,var(--def) 11%,var(--surface))}
/* a row of figures (EN); hidden in Vietnamese with the other English-only children of .blk */
.figrow{display:flex;flex-wrap:wrap;gap:18px}
figcaption{font:var(--fs-sm)/1.45 var(--sans);color:var(--muted);margin-top:8px;max-width:400px}
figcaption svg{max-width:none;background:none;border:0;border-radius:0;box-shadow:none}
.with-fig{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start}
.with-fig>*{min-width:0}
@media (max-width:720px){.with-fig{grid-template-columns:1fr}.with-fig figure svg{max-width:360px}}
.pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
.pair>*{min-width:0}
@media (max-width:720px){.pair{grid-template-columns:1fr}}

/* topic card: quiet container that groups one explanation (lighter than .ex, never as loud as .def) */
.topic{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px 26px;box-shadow:var(--lift-sm)}
.topic.flow{gap:14px}
.topic .blk-h{color:var(--muted)}
.topic figure svg{box-shadow:none}
.topic .katex-display{margin:.4em 0}

/* stacked figure panels, each with its own explanation */
.figpair{display:flex;flex-direction:column;gap:24px}
.figpair>.with-fig+.with-fig{border-top:2px solid color-mix(in srgb,var(--accent) 22%,var(--line));padding-top:24px}

/* svg plot classes */
.grid{stroke:var(--grid);stroke-width:1}.axis{stroke:var(--muted);stroke-width:1.2}
.ax{font:italic var(--fs-md) var(--serif);fill:var(--muted)}
.l1{stroke:var(--accent);stroke-width:2.4}.l2{stroke:var(--l2);stroke-width:2.4}
.seg{stroke:var(--orange);stroke-width:3}.segAB{stroke:var(--muted);stroke-width:1.6}
.dx{stroke:var(--orange);stroke-width:2.6;stroke-dasharray:6 4}.dy{stroke:var(--red);stroke-width:2.6;stroke-dasharray:6 4}
.l1t{fill:var(--accent)}.l2t{fill:var(--l2)}.ptt{fill:var(--fg)}.dxt{fill:var(--orange)}.dyt{fill:var(--red)}
.pt{fill:var(--red)}
.lbl{font:600 16px var(--sans);fill:var(--fg);paint-order:stroke;stroke:var(--plot-bg,var(--surface));stroke-width:4px;stroke-linejoin:round}
.rt{fill:none;stroke:var(--fg);stroke-width:1.3}
.tri1{fill:color-mix(in srgb,var(--accent) 16%,transparent);stroke:var(--accent)}
.tri2{fill:color-mix(in srgb,var(--l2) 16%,transparent);stroke:var(--l2)}
.plot{background:var(--surface)}

/* rule cards & slope cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}
.card{border:1px solid var(--line);background:var(--surface);border-radius:10px;box-shadow:var(--lift);padding:14px 16px;text-align:center;font:var(--fs-sm)/1.45 var(--sans)}
.card svg{width:100%;max-width:110px;height:auto;display:block;margin:0 auto 4px}
.card .katex-display{margin:.3em 0}
.rules{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

/* tables */
.tbl-wrap{overflow-x:auto}
.tbl{border-collapse:collapse;font:var(--fs-sm)/1.4 var(--sans);margin:8px 0;min-width:100%}
.tbl th,.tbl td{border:1px solid var(--line);padding:5px 9px;text-align:center;white-space:nowrap}
.tbl th{background:var(--accent-soft);font-weight:600}
.tbl td:last-child{text-align:left}

/* audio */
audio{width:100%;max-width:420px;height:36px;display:block;margin:4px 0 8px}

/* translate button + dialog */
details.tr{position:absolute;top:8px;right:10px;margin:0}
.blk:not(.def):not(.note):not(.warn):not(.ex):not(.topic){padding-right:64px}
.blk-h,.ex-h{padding-right:56px}
details.tr[open]{position:static;margin-top:8px}
@media (max-width:640px){
  .blk:not(.def):not(.note):not(.ex){padding-right:0}
  .blk:not(.def):not(.note):not(.ex)>details.tr{position:static;text-align:right;margin-top:2px}}
details.tr>summary{list-style:none;display:inline-block;cursor:pointer;font:600 var(--fs-xs) var(--sans);color:var(--accent);
  border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:2px 10px}
details.tr>summary::-webkit-details-marker{display:none}
details.tr>summary:focus-visible,details.sol>summary:focus-visible,.dlg-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
details.tr[open]>.tr-body{border-top:1px dashed var(--line);margin-top:8px;padding-top:6px}
.js details.tr .tr-body{display:none}
dialog.tr-dlg{position:fixed;inset:calc(64px + env(safe-area-inset-top,0px)) calc(16px + env(safe-area-inset-right,0px)) auto auto;margin:0;
  border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--fg);
  width:min(27rem,calc(100vw - 32px));max-height:min(60vh,34rem);padding:0;font:var(--fs-md)/1.6 var(--serif);
  box-shadow:0 10px 30px rgba(10,20,40,.18),0 2px 6px rgba(10,20,40,.08);z-index:20;flex-direction:column}
dialog.tr-dlg[open]{display:flex}
.dlg-h{display:flex;align-items:center;justify-content:space-between;background:var(--accent-soft);cursor:move;touch-action:none;user-select:none;
  border-bottom:1px solid var(--line);border-radius:12px 12px 0 0;padding:6px 8px 6px 14px;font:600 var(--fs-sm) var(--sans);color:var(--muted);letter-spacing:.05em;text-transform:uppercase}
.dlg-x{border:0;background:none;color:var(--fg);font:22px/1 var(--sans);cursor:pointer;padding:2px 8px}
.dlg-b{padding:8px 18px 16px;overflow:auto;min-height:0;flex:1}
.dlg-rs{position:absolute;right:0;bottom:0;width:18px;height:18px;cursor:nwse-resize;touch-action:none;
  background:linear-gradient(135deg,transparent 50%,var(--muted) 50%,var(--muted) 58%,transparent 58%,transparent 70%,var(--muted) 70%,var(--muted) 78%,transparent 78%);opacity:.7;border-radius:0 0 12px 0}
@media (max-width:640px){.dlg-rs{display:none}}

/* home */
.chap{margin-top:0;border-top:1px solid var(--line);padding-block:14px;display:grid;grid-template-columns:3rem minmax(0,1fr);gap:4px 12px}
.chap .num{font:600 1.3rem/1.2 var(--sans);color:var(--accent)}
.chap h2{font-size:1.2rem;margin:0}
.chap ul{list-style:none;margin:6px 0 0;padding:0;font:var(--fs-md)/1.5 var(--sans)}
.chap li{display:flex;gap:10px;padding:3px 0}
.chap li .sn{color:var(--muted);min-width:2.6em;font-variant-numeric:tabular-nums}
.chap li.off{color:var(--muted)}
.chap li a{font-weight:600}
.badge{font:600 var(--fs-xs) var(--sans);color:var(--def);border:1px solid var(--def);border-radius:999px;padding:0 7px;margin-left:6px;align-self:center}
.lede{font:16px/1.6 var(--sans);color:var(--muted);margin:.2rem 0 2rem}

.tr-active{outline:2px solid var(--accent);outline-offset:4px;border-radius:8px}
@media (max-width:640px){dialog.tr-dlg{inset:auto 0 0 0;width:100%;max-height:50vh;border-radius:12px 12px 0 0;padding-bottom:env(safe-area-inset-bottom,0px)}}

/* language switch */
.lang-sw{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.lang-sw button{border:0;background:var(--surface);color:var(--muted);font:600 var(--fs-sm)/1.4 var(--sans);padding:3px 9px;cursor:pointer}
.lang-sw button+button{border-left:1px solid var(--line)}
.lang-sw button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent,#fff)}
.lang-sw button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
html[data-lang="vi"] .blk>:not(details.tr){display:none}
html[data-lang="vi"] .blk>details.tr,html[data-lang="vi"] .blk:not(.def):not(.note):not(.ex)>details.tr{position:static;margin:0;text-align:left}
html[data-lang="vi"] .blk>details.tr>summary{display:none}
html[data-lang="vi"] .blk>details.tr>.tr-body{display:block;border:0;margin:0;padding:0}
@media (max-width:520px){.bar .crumb,.bar .home,.bar .nav>a,.bar .nav>.dis{display:none}.bar{gap:8px}}
/* Vietnamese subtitle in menus */
.t{display:block;min-width:0}
.t .vi{display:block;font:400 var(--fs-xs)/1.35 var(--sans);color:var(--muted);font-weight:400}
.chap h2 .t .vi{font-size:var(--fs-xs)}
.sidetoc ol.parts .t .vi{font-size:var(--fs-xs);opacity:1}
/* Ember brand: full-bleed orange header with ∫ mark, dark roast sidebar, orange chapter/section badges, signature underline */
body{overflow-x:clip}
.bar{background:var(--brand,var(--bg));border-bottom:0;box-shadow:0 0 0 100vmax var(--brand,var(--bg));clip-path:inset(0 -100vmax)}
.bar .home{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:var(--fs-md);color:var(--on-brand,var(--fg))}
.bar .home::before{content:"∫";display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;
  background:var(--on-brand,var(--accent));color:var(--brand,var(--bg));font:italic 700 var(--fs-md)/1 Georgia,serif}
.bar .crumb{color:var(--on-brand,var(--muted));opacity:.85}
.bar .nav a,.bar .nav .dis{border-color:var(--brand-deep,var(--line));color:var(--on-brand,var(--fg))}
.bar .nav .dis{opacity:.55}
.theme-btn,.lang-sw{border-color:var(--brand-deep,var(--line))}
.eyebrow{color:var(--accent)}
h1::after{content:"";display:block;width:56px;height:5px;border-radius:3px;background:var(--brand,var(--accent));margin:.3em 0 .45em}
.chap h2 .t{font-weight:600}
.chap .num{width:2.5rem;height:2.5rem;display:grid;place-items:center;border-radius:50%;background:var(--brand,var(--accent-soft));color:var(--on-brand,var(--accent));font-size:1.1rem;font-weight:700}
h2 .n{display:inline-grid;place-items:center;width:1.6em;height:1.6em;min-width:0;border-radius:8px;background:var(--brand,transparent);color:var(--on-brand,var(--accent));font-size:var(--fs-md);font-weight:700}
.h2-vi{margin-left:2.35rem}
.ex{border-left:4px solid var(--brand,var(--accent))}
/* sidebar: dark roast with cream text, ember-orange active state */
:root{--sb-bg:#2b160c;--sb-fg:#fff1e3;--sb-muted:#e6c2a5;--sb-line:#533019;--sb-accent:#ffa060}
.sidetoc{--fg:var(--sb-fg);--muted:var(--sb-muted);--line:var(--sb-line);--accent:var(--sb-accent);background:var(--sb-bg);color:var(--sb-fg)}
.sidetoc ul>li.off{opacity:.8}
.sidetoc .cn{font-weight:700}
.sidetoc li.cur>a{font-weight:700}
.sidetoc ol.parts a{font-size:var(--fs-sm)}
.sidetoc ol.parts .t .vi{opacity:1}
/* Optional full-orange page: document.documentElement.dataset.look='ember' */
:root[data-look="ember"]{--bg:#ffbb7c;--surface:#fff4e9;--side:#ffa05a;--muted:#5a2d14;--line:#e08a4a;--grid:#f9ad6c;--accent:#8f2d0a;--accent-soft:#ffe2c8;--def:#0b5f4f;--def-soft:#f3ead0;--warn:#7a3f00;--warn-soft:#ffe3b0;--l2:#0b5f4f;--orange:#b04a0c;--red:#a5152e;--brand:#ffa060;--brand-deep:#e0773a}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--sb-bg:#140b06;--sb-fg:#fbeee0;--sb-muted:#d0ab90;--sb-line:#3d2414;--sb-accent:#ffa060}}
:root[data-theme="dark"]{--sb-bg:#140b06;--sb-fg:#fbeee0;--sb-muted:#d0ab90;--sb-line:#3d2414;--sb-accent:#ffa060}
@media (min-width:1080px){.sidetoc{z-index:6}}
.chap li a,.sidetoc a{text-decoration:none}
.chap li a:hover .t{text-decoration:underline}
.sidetoc.open{background:var(--sb-bg);border-right-color:var(--sb-line)}
.bar .lang-sw button[aria-pressed="true"]{background:var(--on-brand,var(--accent));color:var(--brand,#fff)}
@media (max-width:640px){.def,.note{padding:14px 16px}.ex{padding:16px 18px}.flow{gap:var(--sp-2)}section{margin-top:var(--sp-5)}}
/* slim, warm scrollbars */
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--muted) 38%,transparent) transparent}
.sidetoc{scrollbar-color:color-mix(in srgb,var(--sb-muted) 35%,transparent) transparent}
.bar .lang-sw button{background:#fff3e8;color:#5a2d14}
.bar .lang-sw button[aria-pressed="true"]{background:#231008;color:#ffa060}
.bar .lang-sw button:not([aria-pressed="true"]):hover{background:#ffe2c8}
/* section rhythm: divider + kicker, done button, collapse, reading progress */
main section[id]{border-top:2px solid color-mix(in srgb,var(--brand,var(--accent)) 60%,var(--line));padding-top:var(--sp-5);margin-top:var(--sp-6)}
main section[id]:first-of-type{border-top:0;padding-top:0;margin-top:3rem}
.sec-kicker{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 .7rem;font:700 var(--fs-xs)/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.sec-kicker .kk span{color:var(--muted);font-weight:600}
.sec-kicker .kr{display:inline-flex;align-items:center;gap:10px;flex-shrink:0}
.done-badge{font:700 var(--fs-xs)/1 var(--sans);letter-spacing:.04em;text-transform:none;color:var(--on-def,#fff);background:var(--def);border-radius:999px;padding:4px 9px}
.sec-toggle{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:50%;cursor:pointer;transition:background .15s,color .15s}
.sec-toggle:hover{color:var(--fg);border-color:var(--brand-deep,var(--accent))}
.sec-toggle:focus-visible,.done-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sec-toggle .st-ic{display:block;transition:transform .15s}
main section.collapsed .sec-toggle .st-ic{transform:rotate(-90deg)}
main section.collapsed>:not(.sec-kicker):not(h2):not(.h2-vi){display:none}
main section.collapsed{padding-bottom:.2rem}
.done-btn{display:inline-flex;align-items:center;gap:10px;margin-top:2.25rem;padding:10px 20px 10px 14px;border:2px solid var(--def);border-radius:999px;background:transparent;color:var(--def);font:500 var(--fs-sm)/1.3 var(--sans);cursor:pointer;transition:background .15s,color .15s}
.done-btn b{font-weight:700}
.done-btn .d-ic{display:inline-grid;place-items:center;width:22px;height:22px;border:2px solid currentColor;border-radius:50%;font:700 var(--fs-sm)/1 var(--sans)}
.done-btn:hover{background:var(--def-soft)}
.done-btn[aria-pressed="true"]{background:var(--def);color:var(--on-def,#fff)}
.done-btn[aria-pressed="true"] .d-ic{background:var(--on-def,#fff);color:var(--def);border-color:var(--on-def,#fff)}
/* progress marks in menus */
.prog{font:600 var(--fs-xs)/1.3 var(--sans);color:var(--muted);align-self:center;white-space:nowrap}
.prog.full{color:var(--def)}
.chap li .prog.full{background:var(--def-soft);border-radius:999px;padding:1px 9px}
.sidetoc a>.prog{margin-left:auto;padding-left:8px;font-size:var(--fs-xs)}
.sidetoc a>.prog.full{color:#6fd6ba;font-size:var(--fs-md)}
.sidetoc ol.parts a{position:relative;padding-right:22px}
.sidetoc ol.parts a.done::after{content:"✓";position:absolute;right:2px;top:4px;color:#6fd6ba;font-weight:700;font-size:var(--fs-sm)}
.progress{position:fixed;z-index:6;left:0;right:0;top:calc(var(--bar-h,49px) - 3px);height:3px;background:rgba(35,16,8,.18);pointer-events:none}
.progress i{display:block;height:100%;background:#231008;transform-origin:left;transform:scaleX(0)}
@media (min-width:1080px){.progress{left:281px}}
@media (prefers-reduced-motion: no-preference){.progress i{transition:transform .08s linear}}
@media (max-width:640px){main section[id]{margin-top:3.5rem;padding-top:2.25rem}}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--on-def:#0f2219}}
:root[data-theme="dark"]{--on-def:#0f2219}
main section.collapsed .h2-vi{margin-bottom:0}
main section.collapsed+section[id]{margin-top:2.5rem}
/* collapsing must not make the page jump: scroll compensation and spare room are handled in site.js */
main.wrap{overflow-anchor:none}
.bar .nav button.fold-all{display:inline-grid;place-items:center;border:1px solid var(--brand-deep,var(--line));background:var(--surface);color:var(--fg);border-radius:6px;padding:2px 8px;cursor:pointer;line-height:1}
.bar .nav button.fold-all svg{display:block;transition:transform .15s}
.bar .nav button.fold-all:not(.is-open) svg{transform:rotate(180deg)}
.bar .nav button.fold-all:hover{background:#ffe2c8;color:#231008}
.bar .nav button.fold-all:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bar .home{white-space:nowrap}
@media (max-width:520px){.bar .home{font-size:0;gap:0}}
/* the whole section heading toggles the section */
main section[id] .sec-kicker,main section[id]>h2,main section[id]>.h2-vi{cursor:pointer}
main section[id]>h2:hover .n{background:var(--brand-deep,var(--brand,var(--accent)))}
/* language switch: the active one is the bright chip, the other is flat on the bar */
.bar .lang-sw button{background:transparent;color:#5a2d14}
.bar .lang-sw button[aria-pressed="true"]{background:#fff3e8;color:#231008}
.bar .lang-sw button:not([aria-pressed="true"]):hover{background:rgba(255,243,232,.45)}
/* sidebar: current lesson folds its section list */
.sidetoc li.cur>a{cursor:pointer}
.sidetoc li.parts-collapsed>ol.parts{display:none}
.sidetoc .li-chev{display:inline-grid;place-items:center;margin-left:auto;align-self:center;color:var(--sb-muted);transition:transform .15s}
.sidetoc a>.prog+.li-chev{margin-left:6px}
.sidetoc li.parts-collapsed .li-chev{transform:rotate(-90deg)}
.sidetoc li.cur>a:hover .li-chev{color:var(--sb-fg)}

/* ---------- exercises ---------- */
.lg-vi{display:none}
html[data-lang="vi"] .lg-en{display:none}
html[data-lang="vi"] .lg-vi{display:revert}
.sidetoc li.cur-ex>a{color:var(--accent);font-weight:700}
.sidetoc ol.parts.sub-ex{margin-top:0}
.sidetoc li>a.ex-link{display:flex;align-items:baseline}
.chap li a.ex-link{display:inline}
.chap li .exprog{margin-left:12px}
.exprog{font:600 var(--fs-xs)/1.3 var(--sans);color:var(--muted);margin-left:auto;white-space:nowrap}
.exprog.full{color:var(--def);font-size:var(--fs-md)}
.sidetoc .exprog.full{color:#6fd6ba}

.ex-sample{font:var(--fs-sm)/1.5 var(--sans);color:var(--muted);border:1px dashed var(--line);border-radius:10px;padding:8px 14px;margin:0 0 1rem}
.ex-prog{margin:0 0 1.2rem}
.ex-prog-bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.ex-prog-bar i{display:block;height:100%;background:var(--def);transform-origin:0 50%;transform:scaleX(0);transition:transform .25s}
.ex-prog-txt{font:600 var(--fs-sm) var(--sans);color:var(--muted);margin:6px 0 0}

.q{border:1px solid var(--line);background:var(--surface);border-radius:12px;border-left:4px solid var(--brand,var(--accent));
  padding:18px 24px 20px;margin:0 0 1.2rem;box-shadow:var(--lift)}
.q.is-correct{border-left-color:var(--def)}
.q.is-wrong{border-left-color:var(--warn)}
.q-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:6px}
.q-n{font:600 var(--fs-md) var(--sans);color:var(--accent)}
.q-tag{font:600 var(--fs-xs) var(--sans);color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:0 9px}
.q-status{margin-left:auto;font:700 var(--fs-h3) var(--sans)}
.q.is-correct .q-status{color:var(--def)}
.q.is-wrong .q-status{color:var(--warn)}

.q-ans{margin:10px 0 4px}
.opt{display:flex;align-items:baseline;gap:10px;padding:8px 12px;margin:6px 0;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.opt:hover{background:var(--accent-soft)}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt-l{font:700 var(--fs-sm) var(--sans);width:1.8em;height:1.8em;display:inline-grid;place-items:center;border:2px solid var(--muted);border-radius:50%;flex-shrink:0;color:var(--muted)}
.opt:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.opt:has(input:checked) .opt-l{border-color:var(--accent);background:var(--accent);color:var(--on-accent,#fff)}
.opt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.opt:has(input:disabled){cursor:default;opacity:.85}
.q.checked .opt:has(input:checked){border-color:var(--warn);background:var(--warn-soft)}
.q.checked .opt:has(input:checked) .opt-l{border-color:var(--warn);background:var(--warn);color:var(--on-accent,#fff)}
.q.is-correct .opt:has(input:checked){border-color:var(--def);background:var(--def-soft)}
.q.is-correct .opt:has(input:checked) .opt-l{border-color:var(--def);background:var(--def);color:var(--on-accent,#fff)}
.num-in{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.num-l{font:600 var(--fs-sm) var(--sans)}
.num-in input{font:var(--fs-md) var(--sans);width:min(16rem,100%);padding:7px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg)}
.num-in input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.num-in input:disabled{opacity:.85}
.q-hint{font:var(--fs-sm) var(--sans);color:var(--muted);margin:4px 0 0}

.q-review{display:block}
.q-photos[hidden]{display:none}
.q-photos{margin:14px 0 4px;padding:12px 14px;border:1px dashed var(--line);border-radius:10px}
.ph-head{font:600 var(--fs-sm) var(--sans);margin-bottom:8px}
.ph-up{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ph-cap{font:var(--fs-xs) var(--sans);color:var(--muted)}
.ph-warn{font:var(--fs-sm) var(--sans);color:var(--warn);margin:8px 0 0}
.ph-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.ph{margin:0;width:112px}
.ph img{display:block;width:112px;height:140px;object-fit:cover;border:1px solid var(--line);border-radius:6px;background:var(--grid);cursor:zoom-in}
.ph.missing img{cursor:default}
.ph figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:2px;margin-top:4px}
.ph-n{font:600 var(--fs-xs) var(--sans);color:var(--muted);flex-basis:100%}
.ph-b{font:600 var(--fs-sm)/1 var(--sans);min-width:26px;min-height:30px;padding:0;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--fg);cursor:pointer}
.ph-b:disabled{opacity:.35;cursor:default}
.ph-b:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.q.checked .ph{width:96px}
.q.checked .ph img{width:96px;height:120px}

.q-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:14px}
.q-btn{display:inline-flex;align-items:center;gap:6px;font:600 var(--fs-sm) var(--sans);padding:9px 18px;border:2px solid var(--accent);border-radius:999px;
  background:var(--accent);color:var(--on-accent,#fff);cursor:pointer}
.q-btn:hover:not(:disabled){filter:brightness(1.07)}
.q-btn:disabled{opacity:.4;cursor:default}
.q-btn:focus-visible,.q-check:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.q-btn-quiet{background:transparent;color:var(--accent)}
.q-btn-quiet:hover{background:var(--accent-soft);filter:none}
.q-btn[hidden],.q-note[hidden]{display:none}
.q-note{font:var(--fs-sm) var(--sans);color:var(--muted);margin:0}
.q-msg{font:var(--fs-sm)/1.5 var(--sans);margin-top:10px;min-height:0}
.q-msg:empty{display:none}
.q-msg.is-need{color:var(--muted)}
.q-msg.is-ok{color:var(--def)}
.q-msg.is-bad{color:var(--warn)}
.q-msg:focus{outline:none}
.q-sol{margin-top:14px}
.linkbtn{background:none;border:0;padding:0;font:var(--fs-sm) var(--sans);color:var(--muted);text-decoration:underline;cursor:pointer}

dialog.ph-dlg{border:0;padding:0;margin:0;width:100vw;max-width:100vw;height:100vh;max-height:100vh;background:rgba(0,0,0,.88);color:#fff}
dialog.ph-dlg::backdrop{background:rgba(0,0,0,.6)}
.ph-view{width:100%;height:100%;overflow:auto;display:grid;place-items:center;padding:48px 12px 12px}
.ph-view img{max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in;background:#fff}
dialog.ph-dlg.zoom .ph-view{place-items:start center}
dialog.ph-dlg.zoom .ph-view img{max-width:none;max-height:none;width:200%;cursor:zoom-out}
.ph-x{position:fixed;top:10px;right:14px;z-index:2;font:400 30px/1 var(--sans);width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;cursor:pointer}
.q.checked .opt.right{border-color:var(--def);background:var(--def-soft)}
.q.checked .opt.right .opt-l{border-color:var(--def);background:var(--def);color:var(--on-accent,#fff)}
.q-msg{margin:12px 0 0}
.q-actions{margin-top:10px}
html[data-lang="vi"] .q-sol>summary::after{content:"Xem lời giải"}
html[data-lang="vi"] .q-sol[open]>summary::after{content:"Ẩn lời giải"}

/* ---------- zones: Lessons | Exercises | Exams ---------- */
.zones{display:flex;gap:4px;margin:6px 0 18px;border-bottom:1px solid var(--line)}
.zones>a,.zones>.dis{display:block;padding:8px 16px 9px;margin-bottom:-1px;border-bottom:3px solid transparent;color:var(--muted);text-decoration:none;font:600 var(--fs-md)/1.25 var(--sans)}
.zones small{display:block;font-weight:500;font-size:var(--fs-xs);opacity:.85}
.zones>a:hover{color:var(--fg)}
.zones>a.on{color:var(--accent);border-bottom-color:var(--accent)}
.zones>.dis{opacity:.45;cursor:default}
.zone-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:1.5rem 0}
.zone-card{display:flex;flex-direction:column;gap:4px;padding:22px 24px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--lift);color:var(--fg);text-decoration:none;border-top:4px solid var(--accent)}
a.zone-card:hover{transform:translateY(-2px)}
.zone-card.off{opacity:.5;border-top-color:var(--line)}
.zc-t{font:700 22px var(--sans)}.zc-vi{font:var(--fs-md) var(--sans);color:var(--muted)}.zc-d{font:var(--fs-sm)/1.5 var(--sans);color:var(--muted);margin-top:10px}
.q-result{font:var(--fs-md)/1.5 var(--sans);margin:12px 0 0}
.q-result:empty{display:none}
.q-result.is-ok{color:var(--def)}
.q-result.is-bad{color:var(--warn)}
.q-result:focus{outline:none}
.tk{font:var(--fs-xs) var(--sans);fill:var(--muted)}
.q-fig{margin:10px 0 4px}
.q-fig svg{max-width:260px}
/* checked: solution card and photos card side by side, same top and same height, under the "Show solution" row */
.q-sol .sol-body{border-top:0;margin-top:0;padding-top:0}
.sol-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch;margin-top:6px}
.sol-cols:not(:has(.q-photos)){grid-template-columns:minmax(0,1fr)}
.sol-slot:empty{display:none}
.sol-slot{display:flex}
.sol-card,.sol-slot>.q-photos{border:1px dashed var(--line);border-radius:10px;padding:12px 14px;margin:0;flex:1;min-width:0}
.sol-card>.ph-head{margin-bottom:6px}
.sol-card>.lg-en>:last-child,.sol-card>.lg-vi>:last-child{margin-bottom:0}
@media (max-width:760px){.sol-cols{grid-template-columns:minmax(0,1fr)!important}}

/* answer fields (several per question), group headings, grapher-screen and wall figures */
.fld+.fld{margin-top:12px}
.fld-h{font:600 var(--fs-sm) var(--sans);margin:4px 0 2px}
.pts{display:flex;flex-wrap:wrap;gap:8px}
.pts input{width:9.5rem}
.fld.is-right input[type=text]{border-color:var(--def);background:var(--def-soft)}
.fld.is-wrong input[type=text]{border-color:var(--warn);background:var(--warn-soft)}
.q-group{font:600 var(--fs-h3)/1.3 var(--sans);margin:2rem 0 .8rem;padding-bottom:6px;border-bottom:1px solid var(--line)}
.q-group:first-of-type{margin-top:1rem}
.q-fig.screen svg{max-width:340px}
.q-fig.sol{margin:10px 0 0}.q-fig.sol svg{max-width:100%;height:auto}
.q-figcap{font:var(--fs-sm)/1.45 var(--sans);color:var(--muted);margin-top:4px}
.pg{fill:none;stroke-width:2.2}.dash{stroke-dasharray:6 4}
.q-fig.wide svg{max-width:600px}
.scr{fill:var(--def-soft);stroke:var(--muted);stroke-width:1.2}
.band{stroke:none}.b0{fill:color-mix(in srgb,var(--muted) 20%,transparent)}.b1{fill:color-mix(in srgb,var(--orange) 9%,transparent)}.b2{fill:color-mix(in srgb,var(--def) 18%,transparent)}
.lt{font-weight:600;fill:var(--fg)}
.q-def{font:var(--fs-sm)/1.5 var(--sans);color:var(--muted);border-left:3px solid var(--line);padding-left:10px;margin:.6em 0 0}
/* paper work: the student marks their own method after reading the solution */
.q-self{border-top:1px dashed var(--line);margin-top:14px;padding-top:12px}
.q-self-t{font:600 var(--fs-sm)/1.5 var(--sans);margin:0 0 8px}
.q-self-b{display:flex;flex-wrap:wrap;gap:8px}
.q-self-b .q-btn[aria-pressed="true"]{color:var(--on-accent,#fff)}
.q-self-b [data-self="ok"][aria-pressed="true"]{background:var(--def);border-color:var(--def)}
.q-self-b [data-self="no"][aria-pressed="true"]{background:var(--warn);border-color:var(--warn)}
.exstat{flex-basis:100%;font:600 var(--fs-xs)/1.4 var(--sans);color:var(--muted);margin-top:1px}
.exstat.full{color:#6fd6ba}
.sidetoc ul>li>a.ex-link{flex-wrap:wrap}
/* the title keeps its column next to the number (a long title wraps inside .t, not under the number); only .exstat takes its own line */
.sidetoc ul>li>a.ex-link .t{flex:1 1 0;min-width:0}
.sidetoc ul>li>a.ex-link .exstat{flex-basis:auto;margin-left:38px;width:100%}

/* collapsed question cards: only the question shows until the card is opened */
.q-toggle{display:inline-grid;place-items:center;width:30px;height:30px;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--muted);cursor:pointer;flex-shrink:0}
.q-toggle svg{transition:transform .15s}
.q.open .q-toggle svg{transform:rotate(180deg)}
.q-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.q-status{margin-left:auto}
.q-cta{font:var(--fs-sm) var(--sans);color:var(--muted);margin:6px 0 0}
.q.open .q-cta{display:none}
.q:not(.open) .q-ans,.q:not(.open) .q-review,.q:not(.open) .q-result,.q:not(.open) .q-msg,.q:not(.open) .q-actions{display:none}
.q:not(.open) .q-stem{cursor:pointer}
.q:not(.open){padding-bottom:14px}

/* closed card = one row like the book's exercise list; open card = full question */
.q-num{font:700 var(--fs-md) var(--sans);color:var(--accent)}
.q-n{display:inline-flex;gap:.3em;align-items:baseline}
.q.open .q-short,.q:not(.open) .q-word{display:none}
.q-short{flex:1 1 12rem;min-width:0;font:var(--fs-md)/1.45 var(--serif);color:var(--fg);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.q-tags{display:inline-flex;flex-wrap:wrap;gap:6px}
.q:not(.open) .q-stem{display:none}
.q:not(.open){padding:8px 14px 8px 16px;margin-bottom:.45rem;box-shadow:none;cursor:pointer}
.q:not(.open):hover{background:var(--accent-soft)}
.q:not(.open) .q-top{margin:0;flex-wrap:nowrap;gap:10px}
.q:not(.open) .q-num{min-width:1.7em;text-align:right}
.q.open .q-top{margin-bottom:6px}
.q.open .q-n{margin-right:2px}
.q-status{min-width:1.2em;text-align:center}
.q-sub{font:600 var(--fs-sm)/1.5 var(--sans);margin:1.1rem 0 .55rem;color:var(--fg)}
@media (max-width:640px){.q:not(.open) .q-tags{display:none}.q:not(.open) .q-top{gap:8px}}
.q-msg{margin:10px 0 2px}
.q-top,.q-top *{cursor:pointer}
.q:not(.open){cursor:pointer}

/* trial: smaller type for a card (fs-sm); compare it with the others before it becomes the default */
.q.fs-sm .q-stem,.q.fs-sm .q-stem p{font-size:16px;line-height:1.6}
.q.fs-sm .katex{font-size:1.05em}
.q.fs-sm .q-short{font-size:var(--fs-sm);line-height:1.4}
.q.fs-sm .num-in input{font-size:16px}
.q.fs-sm .sol-card{font-size:16px;line-height:1.6}
.q:not(.open).fs-sm{padding:6px 14px 6px 16px}

/* trial v2 (fs-sm): smaller boxes, inputs and buttons, not only smaller text */
.q.fs-sm{padding:12px 16px 14px 18px;margin-bottom:.6rem;border-radius:10px;border-left-width:3px}
.q.fs-sm.open .q-top{margin-bottom:0}
.q.fs-sm .q-stem p{margin:.3em 0}
.q.fs-sm .q-ans{margin:4px 0 0}
.q.fs-sm .num-in input{padding:4px 10px;border-radius:6px}
.q.fs-sm .num-in{gap:4px 10px}
.q.fs-sm .q-hint{font-size:var(--fs-xs);margin:2px 0 0}
.q.fs-sm .fld+.fld{margin-top:6px}
.q.fs-sm .opt{padding:5px 10px;margin:4px 0;border-radius:8px}
.q.fs-sm .opt-l{width:1.6em;height:1.6em;font-size:var(--fs-xs)}
.q.fs-sm .q-photos{margin:8px 0 0;padding:8px 12px;border-radius:8px}
.q.fs-sm .ph-head{font-size:var(--fs-sm);margin-bottom:6px}
.q.fs-sm .q-actions{margin-top:8px;gap:6px 12px}
.q.fs-sm .q-btn{padding:5px 14px;font-size:var(--fs-sm);border-width:1px;border-radius:8px}
.q.fs-sm .q-btn-quiet{padding:4px 12px}
.q.fs-sm .q-redo{border-color:transparent;background:none;text-decoration:underline;padding:4px 2px}
.q.fs-sm .q-redo:hover{background:none;text-decoration:none}
.q.fs-sm .q-note{font-size:var(--fs-xs)}
.q.fs-sm .q-msg{margin:6px 0 0;font-size:var(--fs-sm)}
.q.fs-sm .q-result{margin:8px 0 0;font-size:var(--fs-sm)}
.q.fs-sm .q-sol{margin-top:8px}
.q.fs-sm .sol-cols{margin-top:4px;gap:10px}
.q.fs-sm .sol-card,.q.fs-sm .sol-slot>.q-photos{padding:8px 12px}
.q.fs-sm .q-self{margin-top:10px;padding-top:8px}
.q.fs-sm .q-self-t{font-size:var(--fs-sm);margin-bottom:6px}

/* info tips: an "i" that shows the hint on hover / focus */
.q-i{position:relative;display:none;vertical-align:middle;flex-shrink:0;cursor:help}
.q-i-ic{display:inline-grid;place-items:center;width:16px;height:16px;border:1px solid var(--muted);border-radius:50%;color:var(--muted);font:italic 600 var(--fs-xs)/1 Georgia,serif}
.q-i:hover .q-i-ic,.q-i:focus .q-i-ic{color:var(--accent);border-color:var(--accent)}
.q-i:focus{outline:none}
.q-i:focus-visible .q-i-ic{outline:2px solid var(--accent);outline-offset:2px}
.q-i-tip{display:none;position:absolute;z-index:20;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);width:max-content;max-width:240px;
  padding:5px 9px;border-radius:6px;background:var(--fg);color:var(--bg);font:var(--fs-xs)/1.4 var(--sans);font-style:normal;text-align:left;box-shadow:0 4px 12px rgba(0,0,0,.25);pointer-events:none}
.q-i:hover .q-i-tip,.q-i:focus .q-i-tip{display:block}
.q-note-i[hidden]{display:none!important}
.q.fs-sm .q-hint,.q.fs-sm .q-note{display:none}
.q.fs-sm .q-hint-i,.q.fs-sm .q-note-i{display:inline-block}
.q.fs-sm .fld[data-kind="num"],.q.fs-sm .fld[data-kind="line"],.q.fs-sm .fld[data-kind="point"],.q.fs-sm .fld[data-kind="pointset"]{display:flex;align-items:center;gap:8px}
/* a hairline between the question and the answer area */
.q.sep-line.open .q-stem{border-bottom:1px solid var(--line);padding-bottom:6px;margin-bottom:8px}
/* keep the label, the box and the "i" on one row; open the tip to the right so it covers empty space */
.q.fs-sm .fld>.num-in{flex:0 1 auto;flex-wrap:nowrap}
.q.fs-sm .fld[data-kind="pointset"]>.num-in{flex-wrap:wrap}
.q.fs-sm .num-in input{width:min(13rem,100%)}
.q.fs-sm .pts input{width:9.5rem}
.q-i-tip{left:calc(100% + 8px);bottom:auto;top:50%;transform:translateY(-50%)}
@media (max-width:640px){.q-i-tip{left:0;top:auto;bottom:calc(100% + 6px);transform:none}}

/* two ways to separate the question from the answer area (trial): sep-line = a hairline under the question, sep-tint = a tinted block */
.q:not(.open) .q-zone{display:none}
.q.sep-tint .q-zone{margin-top:8px;padding:8px 12px 10px;border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.q.sep-tint .q-actions{margin-top:6px}
.q.checked .q-hint-i{display:none!important}
/* the compact + tinted card is the standard style now; equations and points need a wider box than numbers */
.q.fs-sm .fld[data-kind="line"] input[type=text]{width:min(22rem,100%)}
.q.fs-sm .fld[data-kind="point"] input[type=text]{width:min(13rem,100%)}
.q.fs-sm .fld>.num-in>.num-l{flex:0 0 auto;white-space:nowrap}
@media (max-width:640px){.q.fs-sm .fld>.num-in>.num-l{white-space:normal}.q.fs-sm .fld>.num-in{flex-wrap:wrap}}
@media (max-width:760px){.q.fs-sm .fld input[type=text]{max-width:calc(100vw - 130px)}}
.q-sub-note{margin:-.35rem 0 .6rem}
/* a small picture of the figure in the closed row (grapher screens only) */
.q-thumb{flex:0 0 auto;display:inline-flex}
.q-thumb svg{display:block;height:38px;width:auto;border:1px solid var(--line);border-radius:4px;background:none;box-shadow:none}
.q.open .q-thumb{display:none}
/* thumbnail: smaller, and right next to the text instead of at the far end of the row */
.q-thumb svg{height:26px}
.q.has-thumb .q-short{flex:0 1 auto}
.q.has-thumb .q-thumb{margin-right:auto}
.q.has-thumb .q-status{margin-left:0}
/* figure with a side note: the note sits in the free space beside the figure */
.q-figrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:8px 0 4px}
.q-figrow .q-fig{margin:0}
.q-figside{flex:1 1 14rem;max-width:22rem;font:var(--fs-sm)/1.5 var(--sans);color:var(--muted);border-left:3px solid var(--line);padding-left:10px}
/* "bypass upload": a round tick box and two small italic words at the far right of the photo box header */
.ph-head{display:flex;align-items:center;gap:10px}
.ph-bypass{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:italic var(--fs-xs) var(--sans);color:var(--muted);cursor:pointer;user-select:none}
.ph-bypass input{position:absolute;opacity:0;width:0;height:0}
.ph-dot{width:15px;height:15px;border:1.5px solid var(--muted);border-radius:50%;display:inline-grid;place-items:center;flex-shrink:0;background:var(--surface)}
.ph-bypass:hover .ph-dot{border-color:var(--def)}
.ph-bypass input:checked+.ph-dot{border-color:var(--def)}
.ph-bypass input:checked+.ph-dot::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--def)}
.ph-bypass input:focus-visible+.ph-dot{outline:2px solid var(--accent);outline-offset:2px}
.ph-bypass:has(input:checked){color:var(--def)}

/* one type scale inside the answer area: labels 14px, options and inputs 14.5px, math the same size as its text */
.q.fs-sm .q-zone{font-size:var(--fs-sm);line-height:1.5}
.q.fs-sm .opt{font-size:var(--fs-sm);line-height:1.4;align-items:center;gap:8px}
.q.fs-sm .opt .katex,.q.fs-sm .fld-h .katex,.q.fs-sm .num-l .katex{font-size:1.02em}
.q.fs-sm .opt-l{width:22px;height:22px;font-size:var(--fs-xs);flex-shrink:0}
.q.fs-sm .fld-h{font-size:var(--fs-sm)}
.q.fs-sm .num-in input{font-size:var(--fs-sm)}
.q.fs-sm .sol-card{font-size:var(--fs-md)}
.q.fs-sm .sol-card .katex{font-size:1.04em}
@media (pointer:coarse){.q.fs-sm .num-in input{font-size:16px}}
.q-result.is-half{color:var(--orange)}
.q.is-correct:has(.q-result.is-half){border-left-color:var(--orange)}

/* one type scale for every card, closed or open: 15px main text, 13px secondary text, 11.5px tags */
.q.fs-sm .q-short,.q.fs-sm .q-stem,.q.fs-sm .q-stem p,.q.fs-sm .q-zone,.q.fs-sm .opt,.q.fs-sm .num-in input,.q.fs-sm .sol-card,.q.fs-sm .q-result{font-size:var(--fs-md)}
.q.fs-sm .q-n,.q.fs-sm .q-num,.q.fs-sm .q-word{font:700 var(--fs-md)/1.3 var(--sans)}
.q.fs-sm .num-l,.q.fs-sm .fld-h,.q.fs-sm .q-msg,.q.fs-sm .q-btn,.q.fs-sm .q-hint,.q.fs-sm .ph-head,.q.fs-sm .ph-cap,.q.fs-sm .ph-title,.q.fs-sm .q-self-t,.q.fs-sm .q-note,.q.fs-sm .ph-warn,.q.fs-sm .ph-n{font-size:var(--fs-sm)}
.q.fs-sm .katex,.q.fs-sm .opt .katex,.q.fs-sm .fld-h .katex,.q.fs-sm .num-l .katex,.q.fs-sm .sol-card .katex{font-size:1.04em}
.q-sub{font-size:var(--fs-md)}
.q.fs-sm .q-self-b .q-btn{font-size:var(--fs-sm)}
@media (pointer:coarse){.q.fs-sm .num-in input{font-size:16px}}
.q.fs-sm details.tr>summary{font-size:var(--fs-xs)}



/* labels beside the answer boxes (Δx, (a) Slope…) use the same size as the question, so the math matches */
.q.fs-sm .num-l,.q.fs-sm .fld-h{font-size:var(--fs-md)}
/* answer boxes: no heavy outline on focus (the blinking caret shows where you are), neutral grey fill and border */
.q.fs-sm .num-in input:focus,.q.fs-sm .num-in input:focus-visible{outline:none}
.q.fs-sm:not(.checked) .num-in input{background:color-mix(in srgb,#808080 9%,var(--surface));border-color:color-mix(in srgb,#808080 30%,var(--surface))}
.q.fs-sm:not(.checked) .num-in input:focus{border-color:color-mix(in srgb,#808080 60%,var(--surface))}

/* touch screens: 16px main text (so the input never triggers the iOS zoom and every box matches), 13.5px secondary, 12px chips,
   and tap targets of about 40-44px */
.q.fs-sm button,.q.fs-sm .q-btn,.q.fs-sm .opt,.q.fs-sm input,.q.fs-sm .ph-bypass{touch-action:manipulation}
@media (pointer:coarse){
  .q.fs-sm .q-short,.q.fs-sm .q-stem,.q.fs-sm .q-stem p,.q.fs-sm .q-zone,.q.fs-sm .opt,.q.fs-sm .num-in input,.q.fs-sm .sol-card,.q.fs-sm .q-result,.q.fs-sm .num-l,.q.fs-sm .fld-h,.q-sub{font-size:16px}
  .q.fs-sm .q-n,.q.fs-sm .q-num,.q.fs-sm .q-word{font-size:16px}
  .q.fs-sm .q-msg,.q.fs-sm .q-btn,.q.fs-sm .q-hint,.q.fs-sm .ph-head,.q.fs-sm .ph-cap,.q.fs-sm .ph-title,.q.fs-sm .q-self-t,.q.fs-sm .ph-warn,.q.fs-sm .ph-n,.q.fs-sm .q-self-b .q-btn,.q.fs-sm .ph-bypass{font-size:var(--fs-sm)}
  .q.fs-sm .q-tag,.q.fs-sm details.tr>summary,.q.fs-sm .opt-l{font-size:var(--fs-xs)}
  .q.fs-sm .q-toggle{width:40px;height:40px}
  .q.fs-sm .q-btn{min-height:40px;padding:8px 16px}
  .q.fs-sm .q-redo{min-height:40px;padding:8px 6px}
  .q.fs-sm .opt{min-height:44px}
  .q.fs-sm .opt-l{width:26px;height:26px}
  .q.fs-sm .num-in input{min-height:42px}
  .q.fs-sm .ph-b{min-width:38px;min-height:38px}
  .q.fs-sm .ph-bypass{min-height:38px;gap:8px}
  .q.fs-sm .ph-dot{width:20px;height:20px}
  .q-i-ic{width:22px;height:22px;font-size:var(--fs-sm)}
  .q.fs-sm .q-top{gap:8px}
}
/* a closed card is a button-like row: tapping it must open it, not select text */
.q:not(.open) .q-top{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.q-top{-webkit-tap-highlight-color:transparent}
/* narrow screens: the Vne button sits under the text, so the question can use the whole width */
@media (max-width:760px){.q .blk.q-stem,.q .q-stem>p,.q .q-stem{padding-right:0}}
@media (max-width:760px){.q .blk.q-stem{padding-right:0!important}}
/* phones: a long label goes on its own line, the box and its "i" sit together below it */
@media (max-width:640px){
  .q.fs-sm .fld[data-kind="num"],.q.fs-sm .fld[data-kind="line"],.q.fs-sm .fld[data-kind="point"],.q.fs-sm .fld[data-kind="pointset"]{flex-wrap:wrap;align-items:center;gap:2px 8px}
  .q.fs-sm .fld>.num-in{display:contents}
  .q.fs-sm .fld>.num-in>.num-l{flex:0 1 auto;white-space:normal}
}

/* the Check button: more air above it, and a little taller with a mouse (touch screens already use 40px) */
.q.fs-sm .q-actions{margin-top:14px}
@media (pointer:fine){.q.fs-sm .q-check{padding:8px 18px}.q.fs-sm .q-redo{padding:6px 2px}}

/* type chips: only "MC" and a camera icon (paper work) are left; everything else is obvious from the answer boxes */
.q-cam{position:relative;display:inline-grid;place-items:center;width:24px;height:24px;color:var(--accent);cursor:help;flex-shrink:0}
.q-cam:focus{outline:none}
.q-cam:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.q-cam .q-i-tip{left:auto;right:-4px;top:auto;bottom:calc(100% + 6px);transform:none}
.q-cam:hover .q-i-tip,.q-cam:focus .q-i-tip{display:block}
.q-tags{align-items:center}
@media (max-width:640px){.q:not(.open) .q-tags{display:inline-flex}}
@media (pointer:coarse){.q-cam{width:32px;height:32px}}

/* exercise page header: one title line (English name + Vietnamese beside it), no eyebrow, no accent bar */
/* one page header for the Lessons and Exercises zones: a single title line, same size, no eyebrow and no accent bar */
.ex-page h1,.lesson-page h1{margin:.9rem 0 .15rem}
.ex-page h1::after,.lesson-page h1::after{display:none}
.h1-inline-vi{display:block;font:400 var(--fs-h3)/1.3 var(--sans);color:var(--muted);margin:2px 0 0}
.ex-prog{margin:.5rem 0 .9rem}
.ex-prog-bar{height:4px}
.ex-prog-txt{margin:5px 0 0}
.q-group:first-of-type{margin-top:1rem}
.lesson-page .toc-inline{margin-top:.9rem}

/* group headings: English above, Vietnamese below (the same pattern as every other bilingual heading) */
.q-group-en{display:block;font:600 var(--fs-h3)/1.3 var(--sans)}
.q-group-vi{display:block;font:400 var(--fs-sm)/1.35 var(--sans);color:var(--muted);margin-top:1px}
.ex-prog + .q-group{margin-top:1rem}

/* collapsible groups */
.q-group{padding-bottom:0}
.q-group-btn{display:flex;align-items:center;gap:10px;width:100%;padding:0 0 6px;background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer}
.q-group-btn *{cursor:pointer}
.q-group-t{flex:1 1 auto;min-width:0}
.q-group-count{display:none;font:600 var(--fs-sm) var(--sans);color:var(--muted);white-space:nowrap}
.q-grp.collapsed .q-group-count{display:inline}
.q-group-chev{display:inline-grid;place-items:center;width:30px;height:30px;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--muted);flex-shrink:0}
.q-group-chev svg{transition:transform .15s}
.q-grp.collapsed .q-group-chev svg{transform:rotate(-90deg)}
.q-group-btn:hover .q-group-chev{border-color:var(--accent);color:var(--accent)}
.q-group-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.q-grp.collapsed .q-grp-body{display:none}
.q-grp:first-of-type .q-group{margin-top:1rem}
@media (pointer:coarse){.q-group-chev{width:40px;height:40px}}

/* tabs: the same air above and below (about 24px each side) */
.zones{margin:-6px 0 24px}
/* lesson sections: a hairline under the section title block, like the group headings of the exercises */
main section[id]>.h2-vi{position:relative;padding-bottom:.85rem;margin-bottom:1rem}
main section[id]>.h2-vi::after{content:"";position:absolute;left:-2.35rem;right:0;bottom:0;border-bottom:1px solid var(--line)}
main section.collapsed>.h2-vi{margin-bottom:0}

/* the Vietnamese line under an English intro (pages without the Eng/Vne switch) */
.lede-vi{display:block;margin-top:.25rem;font-size:.92em;color:var(--muted);opacity:.9}
.zc-d-vi{margin-top:2px;font-size:.92em;opacity:.8}
/* the tab row: about the same air above and below */
.zones{margin:-10px 0 26px}

/* clearer hierarchy: the page title is clearly bigger and heavier than a section title, which is clearly bigger than a sub-heading */
h1{font-size:var(--fs-h1);font-weight:700}
.h1-inline-vi{font-size:var(--fs-h3)}
main section[id]>h2{font-size:var(--fs-h2)}
/* a folded section is closed by the orange rule of the next section, so it needs no hairline of its own */
main section.collapsed>.h2-vi{padding-bottom:0}
main section.collapsed>.h2-vi::after{display:none}

/* a hairline closes the page title block, so the page title (H2) is clearly separated from the sections / groups (H3) below */
.lesson-page h1{padding-bottom:1rem;border-bottom:1px solid var(--line)}
.lesson-page main section[id]:first-of-type,.lesson-page section[id]:first-of-type{margin-top:2rem}
.ex-prog{padding-bottom:1rem;border-bottom:1px solid var(--line);margin-bottom:.4rem}

/* hint pop-up: opens over the page, closes with the x or a click outside */
dialog.hint-dlg{border:1px solid var(--line);border-radius:12px;padding:0;margin:auto;width:min(36rem,calc(100% - 32px));max-height:min(85vh,44rem);overflow:auto;background:var(--surface);color:var(--fg);box-shadow:var(--lift)}
dialog.hint-dlg::backdrop{background:rgba(20,10,4,.5)}
.hint-head{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;gap:12px;padding:14px 14px 10px 18px;background:var(--surface);border-bottom:1px solid var(--line)}
.hint-head h2{flex:1;margin:0;font:650 16px/1.4 var(--sans)}
.hint-x{flex:none;width:36px;height:36px;border:0;border-radius:50%;background:var(--accent-soft);color:var(--fg);font:400 24px/1 var(--sans);cursor:pointer}
.hint-body{padding:10px 18px 16px;font:15px/1.65 var(--sans)}
.hint-body p{margin:.5em 0}
.hint-body .katex{font-size:1.04em}
.hint-h{font-weight:650;margin-top:1em!important;color:var(--accent)}
.hint-link{margin-top:1.2em!important}
@media (pointer:coarse){.hint-body{font-size:16px}}
/* exercises: progress stays under the header while scrolling */
.ex-prog{position:sticky;top:var(--bar-h,49px);z-index:4;background:var(--bg);margin:.9rem 0 .4rem;padding:10px 0;display:flex;align-items:center;gap:14px}
.ex-prog-bar{flex:1;min-width:80px;height:6px}
.ex-prog-txt{margin:0;white-space:nowrap}
@media (max-width:640px){.ex-prog{flex-wrap:wrap;gap:6px}.ex-prog-bar{flex-basis:100%}.ex-prog-txt{white-space:normal}}
main small{font-size:var(--fs-xs)}
/* a card that starts a new block (its own instruction is not the heading above) */
.q-brk{height:1px;margin:1.6rem 0 1.1rem;background:var(--line)}
/* short multiple-choice answers sit side by side */
.q .opts-row{display:flex;flex-wrap:wrap;gap:8px}
.q .opts-row .opt{margin:0;flex:1 1 150px}
/* wall figure: layer names are horizontal, above the graph */
.plot .lt{font:600 var(--fs-sm) var(--sans);fill:var(--fg)}
.plot .brk{stroke:var(--muted);stroke-width:1.4}
/* Vne buttons: in English they are quiet ghosts until the block is hovered (always visible on touch) */
html:not([data-lang="vi"]) details.tr>summary{border-color:transparent;background:transparent;opacity:.45;transition:opacity .15s,border-color .15s,background .15s}
html:not([data-lang="vi"]) .blk:hover details.tr>summary,html:not([data-lang="vi"]) .q:hover details.tr>summary,
html:not([data-lang="vi"]) details.tr>summary:focus-visible,html:not([data-lang="vi"]) details.tr[open]>summary{opacity:1;border-color:var(--line);background:var(--surface)}
@media (pointer:coarse){html:not([data-lang="vi"]) details.tr>summary{opacity:1;border-color:var(--line);background:var(--surface)}}
/* measure: running text stays near 68 characters; figures and cards keep their width */
.flow>p,.blk:not(.q-stem)>p,.flow>ul,.blk:not(.q-stem)>ul,.blk>details.tr>.tr-body>p,.blk>details.tr>.tr-body>ul{max-width:68ch}
/* exercises use the same measure in English and Vietnamese: question text, instructions, solutions, hints and the one-line rows */
.q-stem>p,.q-stem>ul,.q-sub,.sol-card p,.hint-body p,.ex-flat .q-short{max-width:68ch}
/* icons in the bar and the prev/next links sit on the text line */
.bar .menu-btn svg,.bar .theme-btn svg,.bar .nav a svg,.bar .menu-btn span{vertical-align:middle}
.bar .menu-btn{display:inline-flex;align-items:center;gap:6px}
.bar .theme-btn{display:inline-grid;place-items:center}
@media (min-width:521px){.bar .nav a{display:inline-flex;align-items:center;gap:4px}}

/* flat list (a section with "layout": "flat" in its exercise JSON): closed questions are plain lines, like the book's list; opening one shows the full card */
.ex-flat .q:not(.open){background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;margin:0;padding:6px 6px 6px 0}
.ex-flat .q:not(.open):hover{background:var(--accent-soft)}
.ex-flat .q:not(.open) .q-top{gap:8px}
.ex-flat .q:not(.open) .q-num{min-width:1.6em;text-align:left}
/* trial 15px (outside the 14/16 token scale): compare with 14px before deciding */
.ex-flat .q:not(.open) .q-short{font:15px/1.45 var(--sans);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ex-flat .q:not(.open) .q-top{align-items:flex-start}
.ex-flat .q:not(.open) .q-status{margin:2px 0 0 0}
/* the MC tag and the camera sit in one group at the right edge, so the camera is in the same column on every row */
.ex-flat .q:not(.open) .q-tags{margin-left:auto;justify-content:flex-end;margin-top:2px}
.ex-flat .q:not(.open) .q-toggle{width:24px;height:24px;border:0;background:none}
.ex-flat .q-grp-body{margin-bottom:1rem}

/* welcome page (index.html): dark roast hero, brand CTA, glass zone cards */
.welcome{position:relative;overflow:hidden;color:var(--sb-fg);margin:0 calc(50% - 50vw) -4rem;padding:clamp(48px,11vh,112px) max(20px,calc(50vw - 27rem)) clamp(56px,8vh,88px);
  background:radial-gradient(60% 70% at 88% 0%,rgba(255,156,90,.32),transparent 62%),radial-gradient(50% 60% at 0% 100%,rgba(224,119,58,.20),transparent 70%),var(--sb-bg)}
.welcome-mark{position:absolute;right:-.04em;top:-.12em;font:700 clamp(220px,34vw,380px)/1 var(--serif);color:var(--brand);opacity:.07;pointer-events:none;user-select:none}
.welcome .eyebrow{position:relative;margin:0;font:600 var(--fs-xs)/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--sb-accent)}
.welcome h1{position:relative;margin:18px 0 22px;font:700 clamp(46px,9.5vw,104px)/.92 var(--sans);letter-spacing:-.035em;color:transparent;
  background:linear-gradient(115deg,#fff1e3 35%,#ffa060 100%);-webkit-background-clip:text;background-clip:text}
.welcome .lede{position:relative;margin:0 0 34px;max-width:34rem;font:400 clamp(17px,2vw,21px)/1.55 var(--sans);color:var(--sb-muted)}
.welcome .lede-vi{display:block;margin-top:6px;opacity:.75}
.welcome .cta{position:relative;display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:999px;background:var(--brand);color:var(--on-brand);
  font:600 16px/1.2 var(--sans);text-decoration:none;box-shadow:0 14px 32px -12px rgba(255,156,90,.7);transition:transform .2s,box-shadow .2s}
.welcome .cta:hover{transform:translateY(-2px);box-shadow:0 18px 38px -12px rgba(255,156,90,.85)}
.welcome .zone-cards{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:64px}
.welcome .zone-card{display:flex;flex-direction:column;gap:8px;padding:24px;border-radius:20px;text-decoration:none;color:var(--sb-fg);
  background:rgba(255,241,227,.06);border:1px solid rgba(255,241,227,.12);backdrop-filter:blur(8px);transition:transform .25s,background .25s,border-color .25s}
.welcome .zone-card:not(.off):hover{transform:translateY(-4px);background:rgba(255,241,227,.1);border-color:rgba(255,160,96,.45)}
.welcome .zone-card.off{opacity:.45}
.welcome .zc-t{font:700 20px/1.2 var(--sans)}
.welcome .zc-vi{font:500 15px/1.3 var(--sans);color:var(--sb-accent)}
.welcome .zc-d{font:400 14px/1.5 var(--sans);color:var(--sb-muted);margin-top:6px}
@keyframes welcome-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.welcome>p,.welcome>h1,.welcome>.lede,.welcome>.cta,.welcome>.zone-cards{animation:welcome-rise .8s cubic-bezier(.2,.7,.2,1) both}
.welcome h1{animation-delay:.08s}.welcome .lede{animation-delay:.16s}.welcome .cta{animation-delay:.24s}.welcome .zone-cards{animation-delay:.32s}
@media (prefers-reduced-motion:reduce){.welcome *,.welcome *::before{animation:none!important;transition:none!important}}

/* welcome v3: drifting light, floating formulas, sheen headline, bento cards */
.welcome .orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;pointer-events:none;translate:calc(var(--mx,0) * 60px) calc(var(--my,0) * 40px);animation:welcome-drift 18s ease-in-out infinite alternate}
.welcome .o1{width:460px;height:460px;background:#ff9c5a;top:-160px;right:-120px}
.welcome .o2{width:380px;height:380px;background:#e0773a;bottom:-180px;left:-120px;animation-duration:23s;animation-delay:-6s}
.welcome .o3{width:260px;height:260px;background:#ffd2a8;top:42%;left:44%;opacity:.22;animation-duration:15s;animation-delay:-3s}
@keyframes welcome-drift{from{transform:translate(0,0) scale(1)}to{transform:translate(50px,-36px) scale(1.12)}}
.welcome .float{position:absolute;white-space:nowrap;font:500 clamp(14px,1.5vw,19px)/1 var(--serif);color:var(--sb-accent);opacity:.3;pointer-events:none;user-select:none;
  translate:calc(var(--mx,0) * -24px) calc(var(--my,0) * -18px);animation:welcome-bob 9s ease-in-out infinite alternate}
.welcome .float sub{font-size:.7em}
.welcome .f1{top:24%;right:6%}
.welcome .f2{bottom:4%;right:4%;animation-duration:11s}
.welcome .f3{top:12%;right:26%;animation-duration:13s}
.welcome .f4{bottom:30%;left:2%;animation-duration:10s}
@keyframes welcome-bob{from{transform:translateY(0)}to{transform:translateY(-14px)}}
.welcome h1{background-size:220% auto;animation:welcome-rise .8s .08s cubic-bezier(.2,.7,.2,1) both,welcome-sheen 8s linear 1s infinite;
  background-image:linear-gradient(110deg,#fff1e3 0%,#ffa060 30%,#fff1e3 45%,#ffb27a 60%,#fff1e3 75%,#ffa060 100%)}
@keyframes welcome-sheen{from{background-position:0% 50%}to{background-position:220% 50%}}
.welcome .cta{position:relative;overflow:hidden}
.welcome .cta::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);animation:welcome-shine 3.6s ease-in-out 1.4s infinite}
@keyframes welcome-shine{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}
.welcome .zone-card{min-height:200px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,241,227,.08)}
.welcome .zone-card.wide{grid-column:span 2;min-height:250px;padding:30px}
.welcome .zone-card.wide .zc-t{font-size:30px}
.welcome .zc-mock{display:flex;flex-direction:column;gap:6px;margin-bottom:18px;padding:16px 18px;border-radius:14px;background:rgba(0,0,0,.28);border:1px solid rgba(255,241,227,.1)}
.welcome .zc-mock-h{font:600 13px/1.3 var(--sans);color:var(--sb-accent)}
.welcome .zc-mock-f{font:500 16px/1.4 var(--serif);color:var(--sb-fg)}
.welcome .zc-mock-f sub{font-size:.72em}
@media (max-width:640px){
  .welcome .zone-cards{grid-template-columns:minmax(0,1fr)}
  .welcome .zone-card.wide{grid-column:auto}
  .welcome .f2,.welcome .f4{display:none}
}
@media (prefers-reduced-motion:reduce){.welcome .orb,.welcome .float,.welcome .cta::after{animation:none!important}}

/* welcome title row: ∫ logo mark beside AP Calculus */
.welcome .wtitle{position:relative;display:flex;align-items:center;gap:clamp(16px,2.2vw,26px);margin:18px 0 22px;animation:welcome-rise .8s .08s cubic-bezier(.2,.7,.2,1) both}
.welcome .wtitle h1{margin:0;animation:welcome-sheen 8s linear 1s infinite;animation-play-state:running}
.welcome .wlogo{flex:none;display:inline-grid;place-items:center;width:clamp(60px,7.5vw,84px);height:clamp(60px,7.5vw,84px);border-radius:24px;
  background:linear-gradient(145deg,#ffb27a,#e0773a);color:#231008;font:italic 700 clamp(38px,5vw,54px)/1 Georgia,serif;
  box-shadow:0 22px 44px -14px rgba(255,156,90,.7),inset 0 1px 0 rgba(255,255,255,.4);animation:welcome-bob 6s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){.welcome .wlogo{animation:none!important}}
.welcome .wtitle h1::after{display:none}
/* welcome v4: logo as a large badge above the title */
.welcome .wtitle{flex-direction:column;align-items:flex-start;gap:clamp(20px,3vw,32px);margin:clamp(8px,2vh,20px) 0 26px}
.welcome .wlogo{width:clamp(108px,12vw,136px);height:clamp(108px,12vw,136px);border-radius:clamp(32px,3.6vw,40px);font:italic 700 clamp(70px,8.4vw,92px)/1 Georgia,serif;
  box-shadow:0 34px 70px -18px rgba(255,156,90,.75),inset 0 2px 0 rgba(255,255,255,.45)}
/* welcome v5: logo and title on one row, clear of the eyebrow */
.welcome .wtitle{flex-direction:row;align-items:center;gap:clamp(20px,3vw,32px);margin:clamp(40px,7vh,64px) 0 26px}
.welcome .wtitle h1{margin:0}
/* welcome v6: ENTER button centred on the page */
.welcome .cta{display:flex;width:max-content;margin:clamp(48px,8vh,72px) auto 0;padding:16px 56px;font:700 17px/1 var(--sans);letter-spacing:.2em}
/* welcome v7: ENTER as a glowing orb, the focal point of the page */
.welcome .cta{position:relative;isolation:isolate;width:clamp(132px,15vw,168px);height:clamp(132px,15vw,168px);margin:clamp(56px,9vh,88px) auto 0;padding:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;letter-spacing:.24em;text-indent:.24em;font:800 clamp(15px,1.4vw,17px)/1 var(--sans);color:#231008;
  background:radial-gradient(circle at 32% 26%,#ffd2a8 0%,#ffa060 46%,#e0773a 100%);
  box-shadow:0 0 0 1px rgba(255,210,168,.35),0 26px 60px -12px rgba(255,156,90,.8),inset 0 2px 0 rgba(255,255,255,.5);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.welcome .cta::before{content:"";position:absolute;inset:-16px;z-index:-1;border-radius:50%;border:1.5px dashed rgba(255,160,96,.55);animation:welcome-spin 26s linear infinite}
.welcome .cta::after{content:"";position:absolute;inset:-34px;z-index:-2;border-radius:50%;background:radial-gradient(circle,rgba(255,156,90,.32),transparent 68%);animation:welcome-pulse 3.2s ease-in-out infinite}
.welcome .cta:hover{transform:scale(1.07);box-shadow:0 0 0 1px rgba(255,210,168,.5),0 34px 80px -10px rgba(255,156,90,.95),inset 0 2px 0 rgba(255,255,255,.6)}
@keyframes welcome-spin{to{transform:rotate(360deg)}}
@keyframes welcome-pulse{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.12);opacity:.45}}
@media (prefers-reduced-motion:reduce){.welcome .cta::before,.welcome .cta::after{animation:none!important}}
/* welcome v8: more formulas at the edges of the welcome page only */
.welcome .f5{top:7%;left:3%;animation-duration:12s}
.welcome .f6{bottom:14%;left:5%;animation-duration:14s}
.welcome .f7{top:46%;right:3%;animation-duration:12s}
.welcome .f8{top:60%;left:3%;animation-duration:15s}
.welcome .float i{font-style:italic}
@media (max-width:640px){.welcome .f4,.welcome .f6,.welcome .f8,.welcome .f7{display:none}}
/* welcome v9: ENTER back to a pill, now glass: transparent, glowing edge, light sweep */
.welcome .cta{width:max-content;height:auto;margin:clamp(48px,8vh,72px) auto 0;padding:18px 60px;border-radius:999px;
  background:rgba(255,241,227,.08);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,160,96,.55);color:var(--sb-fg);font:700 16px/1 var(--sans);letter-spacing:.3em;text-indent:.3em;
  box-shadow:0 0 0 1px rgba(255,160,96,.12),0 0 34px -4px rgba(255,156,90,.55),inset 0 1px 0 rgba(255,241,227,.18);
  transition:transform .3s,box-shadow .3s,background .3s,border-color .3s}
.welcome .cta:hover{transform:translateY(-2px);background:rgba(255,241,227,.14);border-color:rgba(255,190,140,.85);
  box-shadow:0 0 0 1px rgba(255,160,96,.2),0 0 46px -2px rgba(255,156,90,.8),inset 0 1px 0 rgba(255,241,227,.25)}
.welcome .cta::before{display:none}
.welcome .cta::after{inset:0;z-index:auto;border-radius:999px;background:linear-gradient(100deg,transparent 30%,rgba(255,241,227,.35) 50%,transparent 70%);
  transform:translateX(-120%);animation:welcome-shine 3.6s ease-in-out 1.4s infinite}
/* welcome v10: symbols only, spread over the edges, each drifting slowly */
.welcome .float{font-size:clamp(22px,2.4vw,32px);opacity:.28}
.welcome .s1{top:24%;right:6%;animation-duration:10s}
.welcome .s2{bottom:5%;right:4%;animation-duration:12s}
.welcome .s3{top:12%;right:26%;animation-duration:13s}
.welcome .s4{bottom:30%;left:3%;animation-duration:11s}
.welcome .s5{top:7%;left:3%;animation-duration:12s}
.welcome .s6{bottom:14%;left:6%;animation-duration:14s}
.welcome .s7{top:46%;right:3%;animation-duration:9s}
.welcome .s8{top:60%;left:3%;animation-duration:15s}
.welcome .s9{bottom:40%;right:12%;animation-duration:16s}
.welcome .s10{top:34%;left:9%;animation-duration:11s}
.welcome .s11{top:82%;right:9%;animation-duration:13s}
.welcome .s12{top:70%;left:14%;animation-duration:10s}
.welcome .s13{top:90%;left:26%;animation-duration:12s}
.welcome .s14{top:4%;right:42%;animation-duration:14s}
@media (max-width:640px){.welcome .s2,.welcome .s4,.welcome .s6,.welcome .s8,.welcome .s9,.welcome .s12,.welcome .s13,.welcome .s14{display:none}}
/* welcome v11: smoother motion. Small, slow float; parallax glides instead of jumping; GPU hints */
.welcome .float,.welcome .orb{will-change:transform,translate;transition:translate 1.2s cubic-bezier(.2,.7,.2,1)}
@keyframes welcome-bob{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-7px,0)}}
@keyframes welcome-drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(30px,-20px,0) scale(1.06)}}
.welcome .float{animation-timing-function:ease-in-out}
.welcome .orb{filter:blur(70px)}
/* welcome v12: top spacing, larger eyebrow, four equal cards in one row */
.welcome{padding-top:clamp(24px,5vh,48px)}
.welcome .wtitle{margin-top:clamp(20px,3.5vh,36px)}
.welcome .eyebrow{font:600 15px/1 var(--sans);letter-spacing:.22em}
.welcome .zone-cards{grid-template-columns:repeat(4,minmax(0,1fr))}
.welcome .zone-card,.welcome .zone-card.wide{grid-column:auto;min-height:220px;padding:24px}
@media (max-width:900px){.welcome .zone-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.welcome .zone-cards{grid-template-columns:minmax(0,1fr)}}
/* welcome v13: logo keeps moving (own loop, never stops); cards react smoothly on hover */
@keyframes wlogo-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}
@keyframes wlogo-glow{0%,100%{box-shadow:0 22px 50px -16px rgba(255,156,90,.55),inset 0 2px 0 rgba(255,255,255,.45)}50%{box-shadow:0 40px 90px -10px rgba(255,156,90,.95),inset 0 2px 0 rgba(255,255,255,.45)}}
.welcome .wlogo{animation:wlogo-float 5s ease-in-out infinite,wlogo-glow 5s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.welcome .wlogo{animation:none}}
.welcome .zone-card{position:relative;overflow:hidden;transition:transform .6s cubic-bezier(.2,.7,.2,1),background .6s,border-color .6s,box-shadow .6s}
.welcome .zone-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,241,227,.16) 50%,transparent 65%);transform:translateX(-120%);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.welcome .zone-card:not(.off):hover{transform:translateY(-8px) scale(1.025);background:rgba(255,241,227,.1);border-color:rgba(255,190,140,.6);box-shadow:0 40px 70px -30px rgba(255,156,90,.55),inset 0 1px 0 rgba(255,241,227,.15)}
.welcome .zone-card:not(.off):hover::after{transform:translateX(120%)}
.welcome .zone-card .zc-t{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.welcome .zone-card:not(.off):hover .zc-t{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.welcome .zone-card,.welcome .zone-card::after,.welcome .zone-card .zc-t{transition:none}}

/* flat list: a graph sits beside the question text on the closed line (the figure is copied into the row by build.mjs); opening the card shows the full figure */
.q-peek{display:inline-flex;flex:0 0 auto;align-items:center;margin-left:14px}
.ex-flat .q:not(.open) .q-top:has(.q-peek) .q-short{flex:0 1 auto}
.q-peek svg{display:block;height:110px;width:auto;max-width:none;border:0;border-radius:0;box-shadow:none;background:none}
.q.open .q-peek{display:none}
.ex-flat .q:not(.open) .q-stem{display:none}
/* parts of a question (a), (b), ... each on its own line */
.q-stem ul.ex-parts{list-style:none;padding-left:0;margin:6px 0}
.q-stem ul.ex-parts li{margin:3px 0}
/* a row whose question has a table (exercise 53) shows the whole table: no line limit on its title */
.ex-flat .q:not(.open) .q-short.q-wide{display:block;-webkit-line-clamp:unset;overflow:visible}
.ex-flat .q:not(.open) .q-short.q-wide table{border-collapse:collapse;font:var(--fs-sm)/1.4 var(--sans);margin:6px 0 2px}
.ex-flat .q:not(.open) .q-short.q-wide th,.ex-flat .q:not(.open) .q-short.q-wide td{padding:2px 14px 2px 0;text-align:left;font-weight:500}

/* formula answers (MathLive math-field in a field) and the optional graph calculator (Desmos) inside a card */
math-field.expr-in{display:inline-block;box-sizing:border-box;min-width:12rem;max-width:100%;padding:4px 10px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--fg);font-size:var(--fs-md)}
math-field.expr-in:focus-within{outline:2px solid var(--accent);outline-offset:1px}
math-field.expr-in[read-only]{opacity:.85}
.fld.is-right math-field.expr-in{border-color:var(--def);background:var(--def-soft)}
.fld.is-wrong math-field.expr-in{border-color:var(--warn);background:var(--warn-soft)}
.q-calc-wrap{margin-top:12px}
.q-calc{margin-top:8px;max-width:100%}
.q-calc[hidden]{display:none}
.q-calc-note,.q-calc-err{font-size:var(--fs-sm);color:var(--muted);margin:0 0 6px}
.q-calc-err{color:var(--warn)}
.q-calc-box{width:min(320px,100%);height:240px;box-sizing:border-box;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
/* the whole question on the closed line: no line limit; the parts of a question (a), (b), ... are short lines */
.ex-flat .q:not(.open) .q-short{-webkit-line-clamp:unset;display:block;overflow:visible}
.ex-flat .q:not(.open) .q-short .q-li{display:block;margin-top:2px}
/* breadcrumb up to HS Academy (L1) and the course home (L2); the sticky block now holds both */
.side-head{position:sticky;top:0;z-index:2;background:var(--sb-bg);margin:-18px -16px 8px -18px;padding:14px 16px 12px 18px;border-bottom:1px solid var(--line)}
.side-head .side-brand{position:static;margin:0;padding:0;border:0;background:none}
.side-up{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:8px;font:500 var(--fs-xs)/1.3 var(--sans);color:var(--muted)}
.side-up a{color:var(--muted);text-decoration:none}
.side-up a:hover{color:var(--accent);text-decoration:underline}
.welcome .back-hub{position:relative;display:inline-block;margin-bottom:20px;font:500 14px/1 var(--sans);color:var(--sb-muted);text-decoration:none;transition:color .2s}
.welcome .back-hub:hover{color:var(--sb-fg)}