/* =====================================================================
   TIẾNG ANH — the English subject (assets/english.js builds it).
   Uses the handbook's tokens (index.html), so both themes come for free.
   ===================================================================== */

/* ---------- typefaces ---------- */
/* the handbook's four faces, the UI kit's (Space Grotesk, VT323, Press Start 2P, JetBrains Mono). The English names
   of the section headings are set in the pixel face, Press Start 2P: it has no Vietnamese, but these are English words */
[data-sub="anh"]{--script:var(--pixel)}

/* ---------- lesson layout ---------- */
.en-lesson .ch-kicker{gap:8px 14px}
.en-pk{font-family:var(--mono);font-size-adjust:.58;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);text-decoration:none;padding:2px 9px 1px;border:2px solid var(--edge);background:var(--surface-3);box-shadow:2px 2px 0 var(--key-hard)}
.en-pk:hover{color:var(--accent-deep);border-color:var(--accent)}
/* section headings (Kiến thức, Công thức, Ví dụ, Mẹo, Luyện tập): a display heading, its English name in pixel type */
.en-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;margin:0 0 14px;font-family:var(--display);font-size:clamp(23px,2.3vw,28px);font-weight:600;line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
.en-h::before{content:"";align-self:center;width:30px;height:8px;background:repeating-linear-gradient(90deg,var(--accent) 0 6px,transparent 6px 8px) 0 0/16px 100% no-repeat,repeating-linear-gradient(90deg,var(--gold) 0 6px,transparent 6px 8px) 16px 0/14px 100% no-repeat;flex:none}
.en-h small{font-family:var(--script);font-size-adjust:none;font-size:.42em;font-weight:400;letter-spacing:0;color:var(--gold-deep);text-shadow:2px 2px 0 var(--key-hard)}
/* a figure's title stays a small kicker */
.en-fig-h .en-h{display:flex;align-items:center;gap:9px;margin:0;font-family:var(--mono);font-size-adjust:.58;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--accent-deep);line-height:1.4}
.en-fig-h .en-h::before{width:16px;height:2px;background:var(--accent)}
.en-know{max-width:74ch;font-size:16px;line-height:1.7;color:var(--ink)}
.en-know p{margin:0 0 .8em}
.en-know b{color:var(--accent-deep)}
.en-block{margin:30px 0 0}

/* the lesson badge: "Bài 47" on the kit's gold arcade key, the number large in pixel type */
.en-lesson .ch-num{display:inline-flex;align-items:baseline;gap:10px;font-family:var(--mono);font-size-adjust:.58;font-size:13px;letter-spacing:.12em;text-transform:uppercase;line-height:1;
  color:var(--n-ink);padding:8px 15px 7px 13px;margin:0 0 6px;border:2px solid var(--rim);background:var(--n-yellow);
  box-shadow:0 4px 0 color-mix(in srgb,var(--n-yellow) 42%,#000),0 6px 0 var(--hard)}
.en-lesson .ch-num b{font-family:var(--pixel);font-size-adjust:none;font-size:17px;font-weight:400;letter-spacing:0}

/* WordArt: the English titles in capitals, a metallic gold fill, a dark outline and a stepped 3-D shadow */
:root{--wa-0:#FFE68F;--wa-1:#F6B42C;--wa-2:#E07712;--wa-3:#A9420C}
:root[data-theme="dark"]{--wa-0:#FFF1B8;--wa-1:#F9C847;--wa-2:#F0922A;--wa-3:#D0601C}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--wa-0:#FFF1B8;--wa-1:#F9C847;--wa-2:#F0922A;--wa-3:#D0601C}}
.en-wa{--wa-edge:#6B3408;--wa-x1:#D47A1A;--wa-x2:#A9560E;--wa-x3:#7A3A07;text-transform:uppercase;font-family:var(--display);font-size-adjust:none;font-weight:700;letter-spacing:.045em;
  background:linear-gradient(180deg,var(--wa-0) 0%,var(--wa-1) 42%,var(--wa-2) 50%,var(--wa-3) 100%);background-size:100% 1.12em;background-repeat:repeat-y;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:.6px color-mix(in srgb,var(--wa-edge) 80%,transparent);
  filter:drop-shadow(1px 1px 0 var(--wa-x1)) drop-shadow(1px 1px 0 var(--wa-x2)) drop-shadow(1px 1px 0 var(--wa-x3))}   /* a stepped pixel shadow, no blur */
.en-lesson .ch-title.en-wa{font-size:clamp(25px,3vw,38px);line-height:1.12;max-width:30ch;padding:2px 0 4px;letter-spacing:.045em}   /* .ch-title's tight tracking would swallow the word spaces */
.cover h1.en-wa{letter-spacing:.04em;line-height:1.12;background-size:100% 1.12em;padding:.25em 0 .08em;margin-top:-.25em;background-origin:content-box}   /* room above the line, so the gradient also fills stacked marks (Ế) */
@media (forced-colors: active){.en-wa{color:CanvasText;background:none;-webkit-text-stroke:0;filter:none}}
@media print{.en-wa{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* the formulas take the stage: a dark card under a spotlight, one large formula per row */
/* the formulas take the stage: a dark console under a spotlight, framed like the kit's pixel card in gold, one large
   formula per row */
.en-spot{--sp:#FFD000;position:relative;isolation:isolate;overflow:hidden;margin:32px 0 0;padding:24px clamp(16px,3vw,30px) 18px;color:#EDE6D6;
  background:radial-gradient(70% 85% at 50% -12%,color-mix(in srgb,var(--sp) 34%,transparent) 0%,transparent 70%),radial-gradient(120% 120% at 100% 100%,rgba(90,70,190,.22),transparent 60%),linear-gradient(180deg,#13162B,#090A14);
  border:var(--bw) solid var(--sp);
  box-shadow:6px 6px 0 0 var(--hard),6px 6px 0 2px color-mix(in srgb,var(--sp) 40%,var(--hard)),inset 0 0 32px color-mix(in srgb,var(--sp) 14%,transparent)}
.en-spot::before{content:"";position:absolute;z-index:-1;left:50%;top:-30px;width:min(560px,90%);height:150%;transform:translateX(-50%);pointer-events:none;
  background:conic-gradient(from 180deg at 50% 0%,transparent 158deg,color-mix(in srgb,var(--sp) 22%,transparent) 168deg,color-mix(in srgb,var(--sp) 34%,transparent) 180deg,color-mix(in srgb,var(--sp) 22%,transparent) 192deg,transparent 202deg);filter:blur(12px)}
.en-spot::after{content:"";position:absolute;z-index:-1;left:50%;top:-9px;width:120px;height:18px;transform:translateX(-50%);background:radial-gradient(closest-side,#FFF6D6,color-mix(in srgb,var(--sp) 70%,transparent),transparent);filter:blur(1px)}
.en-spot-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 6px}
.en-spot .en-h{color:#FFF7E4;margin:0}
.en-spot .en-h::before{background:linear-gradient(90deg,var(--sp),#FFF2C2)}
.en-spot .en-h small{color:var(--sp)}
.en-spot-c{font-family:var(--mono);font-size-adjust:.58;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--sp) 75%,#fff)}
.en-spot .en-fx{gap:12px;margin:16px 0 0;counter-reset:none}
.en-spot .en-fx li{display:grid;grid-template-columns:38px minmax(0,1fr);gap:14px;align-items:center;font-size:15px;color:#CFC8B8}
.en-fxn{display:grid;place-items:center;width:38px;height:38px;font-family:var(--pixel);font-size-adjust:none;font-size:13px;line-height:1;color:#090A14;background:var(--sp);border:2px solid #FFFFFF;box-shadow:inset 0 3px 0 rgba(255,255,255,.5),0 4px 0 #7A5900,0 6px 0 #000}
.en-fxb{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;min-width:0}
.en-spot code.fx{font-size:clamp(17px,1.7vw,21px);line-height:1.75;padding:10px 18px;color:#FFF9EC;background:rgba(7,8,16,.6);border:2px solid rgba(255,208,0,.45);box-shadow:inset 3px 3px 0 rgba(0,0,0,.45),4px 4px 0 #030408;white-space:normal}
.en-spot code.fx .k-s,.en-spot .en-legend .k-s{color:#A9C2FF;background:rgba(138,168,255,.16)}
.en-spot code.fx .k-v,.en-spot .en-legend .k-v{color:#FFB98A;background:rgba(255,158,102,.16)}
.en-spot code.fx .k-a,.en-spot .en-legend .k-a{color:#E8B4FA;background:rgba(215,150,238,.17)}
.en-spot code.fx .k-p{color:var(--sp);font-weight:700}
.en-spot .fx-n{color:#B9B2A3;font-size:14px}
.en-spot .fx-l{color:var(--sp)}
.en-spot .en-legend{margin:16px 0 0;padding-top:12px;border-top:2px dashed rgba(255,208,0,.25);color:#A9A293;font-size:12.5px}

/* formulas: S, verb forms and auxiliaries keep one colour across all the lessons */
.en-fx{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.en-fx li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:14px;color:var(--ink-2);line-height:1.5}
.fx-l{font-family:var(--mono);font-size-adjust:.58;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);flex-basis:100%;margin-bottom:-2px}
code.fx{display:inline-block;font-family:var(--code);font-size-adjust:.53;font-size:13.5px;line-height:1.9;padding:6px 12px;background:var(--surface-2);border:2px solid var(--line);color:var(--ink);box-shadow:var(--shadow-sm);white-space:normal;overflow-wrap:anywhere;font-weight:500}
.fx-n{font-size:12.5px;color:var(--ink-3);font-style:italic}
.fx-n::before{content:"— "}
code.fx i{font-style:normal;font-weight:700;padding:1px 6px}
code.fx .k-s{color:var(--c-toan-d);background:color-mix(in srgb,var(--c-toan) 13%,transparent)}
code.fx .k-v{color:var(--c-hoa-d);background:color-mix(in srgb,var(--c-hoa) 13%,transparent)}
code.fx .k-a{color:var(--c-van-d);background:color-mix(in srgb,var(--c-van) 13%,transparent)}
code.fx .k-p{color:var(--ink-3);background:none;padding:0 1px;font-weight:500}
.en-legend{display:flex;flex-wrap:wrap;gap:4px 12px;margin:-2px 0 10px;font-size:11.5px;color:var(--ink-3)}
.en-legend span{display:inline-flex;align-items:center;gap:5px}
.en-legend i{font-style:normal;font-family:var(--code);font-size-adjust:.53;font-weight:700;font-size:11px;padding:0 5px}
.en-legend .k-s{color:var(--c-toan-d);background:color-mix(in srgb,var(--c-toan) 13%,transparent)}
.en-legend .k-v{color:var(--c-hoa-d);background:color-mix(in srgb,var(--c-hoa) 13%,transparent)}
.en-legend .k-a{color:var(--c-van-d);background:color-mix(in srgb,var(--c-van) 13%,transparent)}

/* examples, read aloud on request */
.en-exl{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.en-exl li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:4px 10px;align-items:start;padding:10px 14px 10px 10px;background:var(--surface-2);border:2px solid var(--line);box-shadow:var(--inset)}
.en-s{font-family:var(--display);font-size:16.5px;line-height:1.45;color:var(--ink);font-weight:500;letter-spacing:-.005em}
.en-s b{color:var(--accent-deep);font-weight:600}
.en-n{grid-column:2;font-size:13px;color:var(--ink-2);line-height:1.5}
.en-n:empty{display:none}
/* read aloud: a small ghost key in the accent; while it speaks, an arcade key held down, its lamp blinking */
.en-say{width:30px;height:30px;border:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface-3));color:var(--accent-deep);display:grid;place-items:center;padding:0;box-shadow:0 3px 0 var(--key-hard);transition:transform .06s steps(1),box-shadow .06s steps(1),background-color .15s}
.en-say:hover{background:color-mix(in srgb,var(--accent) 18%,var(--surface-3))}
.en-say:active{transform:translateY(2px);box-shadow:0 1px 0 var(--key-hard)}
.en-say .ic{width:15px;height:15px}
.en-say.on{background:var(--accent);border-color:var(--rim);color:var(--on-accent);transform:translateY(2px);box-shadow:0 1px 0 var(--key-hard);animation:enPulse 1.2s steps(1) infinite}
@keyframes enPulse{0%,49%{filter:none}50%,100%{filter:brightness(1.25)}}
html.no-tts .en-say{display:none}
html.no-tts .en-exl li{grid-template-columns:minmax(0,1fr)}
html.no-tts .en-n{grid-column:1}

/* a tip is the kit's pixel panel in gold, its corners notched */
.en-tip{position:relative;margin:26px 0 0;padding:16px 20px 14px 50px;background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 13%,var(--surface-2)),var(--surface-2));border:2px solid color-mix(in srgb,var(--gold) 55%,var(--line));box-shadow:var(--inset);clip-path:var(--notch);font-size:14.5px;color:var(--ink);line-height:1.6}
.en-tip::before{content:"✦";position:absolute;left:18px;top:13px;font-size:18px;color:var(--gold);animation:px-blink 1.6s steps(1) infinite}
.en-tip .en-h::before{background:repeating-linear-gradient(90deg,var(--gold) 0 6px,transparent 6px 8px)}
.en-tip p{margin:0 0 .4em}
.en-tip ul{margin:0;padding-left:18px}

/* ---------- practice ---------- */
/* the practice is the kit's star-cruiser (index.html, 14d): its title rides in the command-bridge tab, its score is the
   beacon docked in the cutout, and its rows keep clear of the ear, the exhaust and the thruster */
.en-prac{margin:30px 0 0;padding:12px 30px 40px 28px;overflow:hidden}
.en-prac-h{display:flex;align-items:center;justify-content:space-between;gap:10px 18px;flex-wrap:wrap;padding:4px 0 14px;border-bottom:2px solid var(--line)}
.en-prac-h .en-h{margin:0}
.en-score{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size-adjust:.58;font-size:13px;color:var(--ink-3)}
.en-score b{color:var(--accent-deep);font-size:15px}
.en-score .bar{width:124px;height:12px;padding:1px}
.en-lv{padding:16px 0 6px}
.en-lv + .en-lv{border-top:2px dashed var(--line-2)}
.en-lvh{display:flex;align-items:center;gap:12px;margin:0 0 8px;font-family:var(--display);font-size:19px;font-weight:700;color:var(--ink)}
.en-lvh b{display:grid;place-items:center;width:32px;height:32px;font-family:var(--pixel);font-size-adjust:none;font-size:12px;font-weight:400;line-height:1;color:var(--on-accent);background:var(--lv);border:2px solid var(--rim);box-shadow:inset 0 3px 0 rgba(255,255,255,.4),2px 2px 0 var(--key-hard)}
.en-lv[data-lv="A"]{--lv:var(--c-dia)}
.en-lv[data-lv="B"]{--lv:var(--c-toan)}
.en-lv[data-lv="C"]{--lv:var(--c-van)}
.en-ql{list-style:none;margin:0;padding:0}
.en-q{padding:12px 0 14px;border-bottom:1px solid var(--line-2)}
.en-q:last-child{border-bottom:0}
.en-qt{display:flex;gap:10px;font-size:15px;line-height:1.75;color:var(--ink)}
.en-qn{flex:none;min-width:30px;padding-top:3px;font-family:var(--mono);font-size-adjust:.58;font-size:12.5px;color:var(--lv)}
.en-qb{min-width:0;flex:1}
.en-qa{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0 0 40px}
.en-qa .ans-btn{margin-top:0}
.en-qa .ans{flex-basis:100%;margin-top:4px}
.en-chk{border-color:color-mix(in srgb,var(--lv) 45%,var(--line))}
.en-chk:hover{background:color-mix(in srgb,var(--lv) 10%,var(--surface))}
.en-fb{flex-basis:100%;margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.en-fb:empty{display:none}
.en-fb.ok{color:var(--ok)}
.en-fb.bad{color:var(--bad)}
.en-fb b{font-weight:700}
/* a blank in the sentence: type the missing words in place */
.en-bl{font:inherit;font-weight:600;color:var(--accent-deep);background:color-mix(in srgb,var(--accent) 7%,var(--surface));border:0;border-bottom:2px dotted color-mix(in srgb,var(--accent) 60%,var(--line));padding:0 6px;margin:0 2px;min-width:3.5em;max-width:100%;height:1.6em;vertical-align:baseline;transition:background .15s,border-color .15s}
.en-bl:focus{outline:none;border-bottom-style:solid;border-bottom-color:var(--accent);background:color-mix(in srgb,var(--accent) 13%,var(--surface))}
.en-bl.ok,.en-line.ok{border-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
.en-bl.no,.en-line.no{border-color:var(--bad);background:var(--bad-bg);animation:shake .35s}
.en-line,.en-ta{display:block;width:calc(100% - 40px);margin:8px 0 0 40px;padding:9px 12px;font:inherit;font-size:15px;color:var(--ink);background:var(--well);border:2px solid var(--line);box-shadow:var(--inset);transition:border-color .15s}
.en-ta{min-height:64px;resize:vertical;font-size:14.5px;line-height:1.5}
.en-line:focus,.en-ta:focus{outline:none;border-color:var(--accent);box-shadow:var(--inset),3px 3px 0 color-mix(in srgb,var(--accent) 35%,transparent)}
/* options inside the sentence */
.en-pick{display:inline-flex;flex-wrap:wrap;gap:5px;vertical-align:baseline;margin:0 3px}
.en-o{font:inherit;font-size:14.5px;font-weight:600;line-height:1.3;padding:2px 11px;border:2px solid color-mix(in srgb,var(--accent) 45%,var(--edge));background:var(--surface-3);color:var(--ink);box-shadow:0 2px 0 var(--key-hard);transition:transform .06s steps(1),box-shadow .06s steps(1),background-color .15s,border-color .15s}
.en-o:hover:not(:disabled){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface-3));transform:translateY(-1px);box-shadow:0 3px 0 var(--key-hard)}
.en-o.ok{border-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
.en-o.no{border-color:var(--bad);background:var(--bad-bg);color:var(--bad);text-decoration:line-through;animation:shake .35s}
.en-o:disabled{cursor:default}
.en-pick.done .en-o:not(.ok):not(.no){opacity:.55}
.en-q[data-st="1"] .en-qn::after{content:" ✓";color:var(--ok)}
.en-q[data-st="2"] .en-qn::after{content:" ·";color:var(--warn)}
.en-q[data-st="3"] .en-qn::after{content:" ○";color:var(--ink-3)}
.en-done-note{margin:0;padding:12px 14px;border-top:2px solid var(--line);font-family:var(--mono);font-size-adjust:.58;font-size:14px;color:var(--ok);background:color-mix(in srgb,var(--ok) 9%,transparent)}
.en-done-note:empty{display:none}

/* ---------- syllabus grouped by part ---------- */
.syl-parts{margin:0 0 -1px}
.syl-part{border-bottom:1px solid var(--line-2);scroll-margin-top:calc(var(--top-h) + 22px)}   /* a link to a part (#anh-part-3) lands here */
.syl-part > summary{display:grid;grid-template-columns:52px minmax(0,1fr) auto 18px;gap:14px;align-items:center;padding:13px var(--band-pad-in);cursor:pointer;list-style:none;transition:background .15s}
.syl-part > summary::-webkit-details-marker{display:none}
.syl-part > summary:hover{background:var(--surface-2)}
.syl-part > summary .syl-n{font-size:10px}   /* the part's Roman numeral, in pixel type: XVIII fits its column */
.syl-part > summary .sp-c{font-family:var(--mono);font-size-adjust:.58;font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.syl-part > summary .sp-c .bar{display:inline-block;width:70px;height:4px;vertical-align:middle;margin-left:8px}
.syl-part > summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s steps(2)}
.syl-part[open] > summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.syl-part .syl-list{border-top:1px solid var(--line-2)}

/* sidebar: part headings inside the lesson list */
.ss-ch .ss-part{margin:10px 0 3px -14px;padding:0 8px 0 14px;font-family:var(--mono);font-size-adjust:.58;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);line-height:1.4}
.ss-ch .ss-part:first-child{margin-top:2px}

/* ---------- figures ---------- */
/* a figure is the kit's pixel panel, its corners notched; its drawing uses the page's surface as paper */
.en-fig{--a2:var(--c-toan);margin:24px 0 0;padding:18px 18px 14px;background:var(--surface);border:2px solid var(--line);box-shadow:var(--inset);clip-path:var(--notch);position:relative}
.en-fig + .en-fig{margin-top:14px}
.en-fig figcaption{margin:12px 0 0;font-size:13px;line-height:1.55;color:var(--ink-3);text-align:left}
.en-fig figcaption b{color:var(--ink-2)}
.en-fig-h{display:flex;align-items:center;justify-content:space-between;gap:8px 14px;flex-wrap:wrap;margin:0 0 12px}
.en-fig .btn-sm{font-size:12px}
@media print{ .en-fig,.en-tip{clip-path:none} }
.en-fig svg text{font-family:var(--sans)}
.en-fig-pending{min-height:120px}
.en-fig-pending::after{content:"";position:absolute;inset:18px;background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2));background-size:200% 100%;animation:enShimmer 1.4s linear infinite;opacity:.6}
@keyframes enShimmer{to{background-position:-200% 0}}

/* timeline: one row per sentence, all rows share the same time axis */
.tlx{display:grid;grid-template-columns:minmax(150px,32%) minmax(0,1fr);align-items:stretch}
.tlx-l{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 0;font-size:13.5px;line-height:1.4;color:var(--ink-2);border-bottom:2px dashed var(--line-2);cursor:default;transition:color .2s}
.tlx-l b{color:var(--ink);font-weight:600}
.tlx-l i.tlx-k{flex:none;width:10px;height:10px;background:var(--rc)}
.tlx-s{border-bottom:2px dashed var(--line-2);min-width:0}
.tlx-s svg{display:block;width:100%;height:58px;overflow:visible}
.tlx-ax{grid-column:2}
.tlx-ax svg{display:block;width:100%;height:34px;overflow:visible}
.tlx-l.hl{color:var(--ink)}
.tlx-s.hl svg{filter:drop-shadow(2px 2px 0 color-mix(in srgb,var(--rc) 45%,transparent))}
.tlx .now,svg.enf .now{stroke:var(--gold);stroke-width:2;stroke-dasharray:3 3}
.tlx .axl,svg.enf .axl{stroke:var(--ink-3);stroke-width:1.4}
.tlx .axt,svg.enf .axt{font-family:var(--mono);font-size-adjust:.58;font-size:10px;letter-spacing:.12em;fill:var(--ink-3);font-weight:800}
.tlx .axt.nw,svg.enf .axt.nw{fill:var(--gold-deep)}
.tlx .mk,svg.enf .mk{stroke:var(--rc);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tlx .mkf,svg.enf .mkf{fill:var(--rc)}
.tlx .mks,svg.enf .mks{fill:color-mix(in srgb,var(--rc) 22%,transparent);stroke:none}
.tlx .mkd,svg.enf .mkd{stroke-dasharray:4 4}
.tlx .mkt,svg.enf .mkt{font-size:10.5px;fill:var(--rc);font-weight:600;font-family:var(--sans)}
.tlx .bx,svg.enf .bx{fill:color-mix(in srgb,var(--rc) 7%,transparent);stroke:color-mix(in srgb,var(--rc) 55%,transparent);stroke-width:1.2}
.tlx .bx.open,svg.enf .bx.open{stroke-dasharray:4 3}
.tlx .bxt,svg.enf .bxt{font-family:var(--mono);font-size-adjust:.58;font-size:9.5px;letter-spacing:.06em;fill:var(--ink-3);font-weight:800}
.tlx .draw{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600)}
.en-fig.go .tlx .draw,.en-lab .tlx .draw{animation:enDraw 1s var(--ease) forwards;animation-delay:var(--dl,0s)}
.tlx .pop{opacity:0;transform-box:fill-box;transform-origin:center}
.en-fig.go .tlx .pop,.en-lab .tlx .pop{animation:enPop .5s var(--ease) forwards;animation-delay:var(--dl,0s)}
svg.enf{display:block;width:100%;height:auto;overflow:visible}
svg.enf .pop{transform-box:fill-box;transform-origin:center}
.en-lab svg.enf .draw{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);animation:enDraw .9s var(--ease) forwards;animation-delay:var(--dl,0s)}
.en-lab svg.enf .pop{opacity:0;animation:enPop .45s var(--ease) forwards;animation-delay:var(--dl,0s)}
svg.enf .t{font-size:13px;fill:var(--ink-2);font-weight:600;font-family:var(--sans)}
svg.enf .tb{font-size:16px;fill:var(--ink);font-weight:700;font-family:var(--display)}
svg.enf .tm{font-family:var(--mono);font-size-adjust:.58;font-size:10px;letter-spacing:.1em;fill:var(--ink-3);font-weight:800}
svg.enf .ta{fill:var(--accent-deep)}
svg.enf .card{fill:var(--surface-2);stroke:var(--line);stroke-width:1.5}
svg.enf .card.on{fill:color-mix(in srgb,var(--accent) 16%,var(--surface));stroke:var(--accent);stroke-width:2.5}
svg.enf [tabindex]{cursor:pointer;outline:none}
svg.enf [tabindex]:focus-visible .card{stroke:var(--accent-deep);stroke-width:3}
svg.enf .obj{fill:color-mix(in srgb,var(--accent) 16%,var(--surface));stroke:var(--ink-2);stroke-width:2}
svg.enf .obj2{fill:color-mix(in srgb,var(--c-toan) 14%,var(--surface));stroke:var(--ink-2);stroke-width:2}
svg.enf .ln{stroke:var(--ink-2);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
svg.enf .ball{fill:var(--c-ktpl);stroke:color-mix(in srgb,var(--c-ktpl) 70%,#000);stroke-width:1.5;transition:transform .7s var(--ease)}
svg.enf .pin{fill:var(--gold);stroke:var(--gold-deep);stroke-width:1.5}
svg.enf .cbar{fill:var(--bc,var(--accent));transition:height .5s var(--ease),y .5s var(--ease)}
svg.enf .needle{stroke:var(--ink);stroke-width:3.5;stroke-linecap:round;transition:transform .5s var(--ease);transform-origin:150px 150px}
@keyframes enDraw{to{stroke-dashoffset:0}}
@keyframes enPop{0%{opacity:0;transform:scale(.3)}70%{opacity:1;transform:scale(1.25)}100%{opacity:1;transform:scale(1)}}

/* scale: a gradient bar with words placed along it and a slider that picks one */
.scl{padding:4px 2px 0}
.scl-bar{position:relative;height:14px;background:linear-gradient(90deg,var(--s0,color-mix(in srgb,var(--bad) 55%,var(--surface))),var(--s1,color-mix(in srgb,var(--gold) 70%,var(--surface))) 50%,var(--s2,color-mix(in srgb,var(--ok) 60%,var(--surface))));margin:66px 10px 6px}
.scl-m{position:absolute;bottom:20px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:3px;font-family:var(--mono);font-size-adjust:.58;font-size:11.5px;font-weight:800;color:var(--ink-2);white-space:nowrap;cursor:pointer;transition:color .2s,transform .25s var(--ease)}
.scl-m::after{content:"";width:2px;height:10px;background:currentColor;opacity:.5}
.scl-m.lo{bottom:auto;top:20px;flex-direction:column-reverse}
.scl-m.on{color:var(--accent-deep);transform:translateX(-50%) scale(1.15)}
.scl-m.e1{transform:translateX(calc(-100% + 1px));align-items:flex-end;transform-origin:right}
.scl-m.e0{transform:translateX(-1px);align-items:flex-start;transform-origin:left}
.scl-m.e1.on{transform:translateX(calc(-100% + 1px)) scale(1.15)}
.scl-m.e0.on{transform:translateX(-1px) scale(1.15)}
.scl-ends{display:flex;justify-content:space-between;margin:26px 6px 0;font-size:11px;color:var(--ink-3);font-family:var(--mono);font-size-adjust:.58;letter-spacing:.06em;text-transform:uppercase;font-weight:800}
.scl input[type=range]{width:calc(100% - 20px);margin:-26px 10px 0;position:relative;z-index:1;opacity:.001;height:30px;cursor:pointer}
.scl-th{position:absolute;top:50%;width:16px;height:26px;margin:-13px 0 0 -8px;background:var(--accent);border:2px solid var(--rim);box-shadow:0 3px 0 var(--key-hard);transition:left .25s steps(5);pointer-events:none}
.scl-out{margin:12px 0 0;padding:12px 14px;background:var(--surface-2);border:2px solid var(--line);box-shadow:var(--inset);font-size:14px;min-height:50px}
.scl-out > b{font-family:var(--mono);font-size-adjust:.58;color:var(--accent-deep);margin-right:6px;font-weight:600}
.scl-out .en-s b{color:var(--accent-deep)}
.tm-tl svg.enf{max-width:680px;margin:0 auto}
.scl-out .en-s{font-size:15.5px;display:block;margin-top:2px}

/* flow: a sentence before and after a change; tiles that move are joined by curves */
.flw{position:relative;padding:4px 0}
.flw-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;position:relative;z-index:1}
.flw-row + .flw-row{margin-top:46px}
.flw-cap{flex-basis:100%;font-family:var(--mono);font-size-adjust:.58;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--ink-3);margin-bottom:-2px}
.flw-t{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:2px solid var(--tc,var(--line));background:color-mix(in srgb,var(--tc,var(--ink-3)) 9%,var(--surface));font-size:15px;font-weight:600;color:var(--ink);box-shadow:2px 2px 0 var(--key-hard);transition:transform .14s steps(2),box-shadow .14s steps(2),opacity .3s}
.flw-t small{font-family:var(--mono);font-size-adjust:.58;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--tc,var(--ink-3));font-weight:800}
.flw-t.new{border-style:dashed}
.flw-t.gone{opacity:.45;text-decoration:line-through}
.flw-t.hl{transform:translate(-2px,-2px);box-shadow:4px 4px 0 color-mix(in srgb,var(--tc) 55%,var(--hard))}
.flw-t[data-r="s"]{--tc:var(--c-toan)}
.flw-t[data-r="v"]{--tc:var(--c-hoa)}
.flw-t[data-r="a"]{--tc:var(--c-van)}
.flw-t[data-r="o"]{--tc:var(--c-dia)}
.flw-t[data-r="t"]{--tc:var(--c-ly)}
.flw-t[data-r="q"]{--tc:var(--c-ktpl)}
.flw-t[data-r="x"]{--tc:var(--accent)}
.flw-p{font-size:16px;color:var(--ink-3);font-weight:600}
.flw svg.flw-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.flw-links path{fill:none;stroke:var(--tc,var(--ink-3));stroke-width:1.8;opacity:.55;stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);transition:opacity .2s,stroke-width .2s}
.en-fig.go .flw-links path{animation:enDraw .9s var(--ease) forwards;animation-delay:var(--dl,.1s)}
.flw-links path.hl{opacity:1;stroke-width:2.6}
.flw-links .ah{fill:var(--tc,var(--ink-3));opacity:.7}
.flw + .flw{margin-top:22px;padding-top:18px;border-top:2px dashed var(--line)}
.flw-note{margin:12px 0 0;font-size:13px;color:var(--ink-3)}

/* sets of dots: which members a word picks out */
.sets-btns,.chip-btns{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
/* word keys: ghost keys; the one chosen is an arcade key in the accent, held down */
.chip-b{display:inline-flex;align-items:center;gap:6px;padding:4px 12px 3px;border:2px solid var(--edge);background:var(--surface-3);font-size:13.5px;font-weight:600;color:var(--ink-2);box-shadow:0 3px 0 var(--key-hard);transition:transform .06s steps(1),box-shadow .06s steps(1),border-color .15s,color .15s}
.chip-b:hover{border-color:var(--accent);color:var(--ink)}
.chip-b[aria-pressed="true"]{background:var(--accent);border-color:var(--rim);color:var(--on-accent);transform:translateY(2px);box-shadow:0 1px 0 var(--key-hard)}
.sets-stage{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;padding:16px;background:var(--surface-2);border:2px solid var(--line);box-shadow:var(--inset)}
.sets-dot{width:34px;height:34px;border:2px solid var(--edge);background:var(--well);display:grid;place-items:center;font-family:var(--mono);font-size-adjust:.58;font-size:12.5px;color:var(--ink-3);box-shadow:2px 2px 0 var(--key-hard);transition:background-color .2s steps(2),border-color .2s,transform .2s steps(2)}
.sets-dot.on{background:var(--accent);border-color:var(--rim);color:var(--on-accent);transform:translate(-2px,-2px);box-shadow:inset 0 3px 0 rgba(255,255,255,.45),4px 4px 0 var(--key-hard)}
.sets-dot.whole{width:100%;max-width:320px;height:60px}
.sets-out{margin:12px 0 0;font-size:14px;min-height:24px;color:var(--ink-2)}
.sets-out .en-s{font-size:15.5px}

/* grid: forms in a table with one highlighted cell */
.egrid{display:grid;gap:8px}
.egrid-c{padding:12px 14px;background:var(--surface-2);border:2px solid var(--line);box-shadow:var(--inset);font-size:13.5px;line-height:1.5;color:var(--ink-2);transition:background .2s,border-color .2s,transform .14s steps(2);cursor:default}
.egrid-c b{color:var(--ink)}
.egrid-c .ct{display:block;font-size:14.5px;margin-bottom:2px}
.egrid-c .en-s{font-size:14.5px;display:block;margin-top:4px}
.egrid-c code.fx{font-size:12.5px;padding:4px 9px;margin-top:4px;line-height:1.7}
.egrid-c.on{background:color-mix(in srgb,var(--accent) 12%,var(--surface-2));border-color:var(--accent)}
.egrid-c[tabindex]:hover{border-color:var(--accent);transform:translateY(-1px);cursor:pointer}
.egrid-h{font-family:var(--mono);font-size-adjust:.58;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);align-self:end;padding:0 4px}
.egrid-rh{display:flex;align-items:center;font-family:var(--mono);font-size-adjust:.58;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.egrid-ico{display:inline-grid;place-items:center;width:22px;height:22px;margin-right:6px;font-size:13px;font-weight:700;vertical-align:-5px}
.egrid-ico.y{background:var(--ok-bg);color:var(--ok)} .egrid-ico.n{background:var(--bad-bg);color:var(--bad)} .egrid-ico.o{background:var(--surface-3);color:var(--ink-3)}

/* bars: comparisons as a bar chart */
.bars{display:flex;align-items:flex-end;justify-content:center;gap:clamp(14px,4vw,40px);height:220px;padding:10px 10px 0;border-bottom:2px solid var(--ink-3)}
.bars-c{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%;width:min(110px,22%)}
.bars-b{width:100%;background:linear-gradient(rgba(255,255,255,.45) 0 3px,transparent 3px),repeating-linear-gradient(180deg,var(--bc,var(--accent)) 0 10px,color-mix(in srgb,var(--bc,var(--accent)) 70%,#000) 10px 12px);height:0;transition:height .8s steps(8,end);position:relative}
.bars-v{font-family:var(--mono);font-size-adjust:.58;font-size:14px;color:var(--ink-2)}
.bars-l{display:flex;justify-content:center;gap:clamp(14px,4vw,40px);padding:8px 10px 0}
.bars-l span{width:min(110px,22%);text-align:center;font-size:13px;font-weight:600;color:var(--ink)}
.bars-out{margin:14px 0 0;display:grid;gap:6px}
.bars-out p{margin:0;padding:8px 12px;background:var(--surface-2);border:2px solid var(--line);box-shadow:var(--inset);font-family:var(--display);font-size:15.5px;color:var(--ink)}
.bars-out p b{color:var(--accent-deep)}
.bars-tag{white-space:nowrap;font-family:var(--mono);font-size-adjust:.58;font-size:12px;color:var(--accent-deep);background:var(--surface);border:2px solid var(--accent);padding:0 7px;box-shadow:2px 2px 0 var(--key-hard)}

/* scene: little pictures for prepositions; the ball moves to the chosen word */
.scn svg{display:block;width:100%;max-width:560px;height:auto;margin:0 auto;overflow:visible}
.scn .obj{fill:color-mix(in srgb,var(--accent) 16%,var(--surface));stroke:var(--ink-2);stroke-width:2}
.scn .obj2{fill:color-mix(in srgb,var(--a2) 14%,var(--surface));stroke:var(--ink-2);stroke-width:2}
.scn .ln{stroke:var(--ink-2);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.scn .ball{fill:var(--c-ktpl);stroke:color-mix(in srgb,var(--c-ktpl) 70%,#000);stroke-width:1.5;transition:transform .7s var(--ease)}
.scn .arw{stroke:var(--c-ktpl);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.scn .arwf{fill:var(--c-ktpl)}
.scn .t{font-size:14px;fill:var(--ink-2);font-weight:600}
.scn .tb{font-size:18px;fill:var(--ink);font-weight:700;font-family:var(--display)}
.scn .tm{font-family:var(--mono);font-size-adjust:.58;font-size:10px;letter-spacing:.1em;fill:var(--ink-3);font-weight:800}
.scn .pin{fill:var(--gold);stroke:var(--gold-deep);stroke-width:1.5}
.scn .hide{opacity:0;transition:opacity .4s}
.scn .show{opacity:1;transition:opacity .4s}
.scn-out{margin:12px 0 0;padding:10px 14px;background:var(--surface-2);border:2px solid var(--line);box-shadow:var(--inset);font-size:14px;color:var(--ink-2);min-height:46px}
.scn-out .en-s{font-size:15.5px;display:block}

/* radial: one particle, the verbs around it */
.rad{display:grid;grid-template-columns:minmax(170px,240px) minmax(0,1fr);gap:16px 22px;align-items:center}
.rad svg{width:100%;height:auto;display:block}
.rad .core{fill:color-mix(in srgb,var(--accent) 16%,var(--surface));stroke:var(--accent);stroke-width:2}
.rad .core-t{font-family:var(--display);font-size:30px;font-weight:600;fill:var(--accent-deep)}
.rad .arw{stroke:var(--accent-deep);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.rad .ring{fill:none;stroke:var(--line);stroke-dasharray:3 5}
.rad-list{display:flex;flex-wrap:wrap;gap:7px}
.rad-out{grid-column:1/-1;padding:12px 14px;background:var(--surface-2);border:2px solid var(--line);box-shadow:var(--inset);font-size:14px;color:var(--ink-2);min-height:50px}
.rad-out b{color:var(--ink);font-size:15px}
.rad-out .en-s{display:block;font-size:15.5px;margin-top:3px}

/* sorter: tap a word, then tap the right box */
.srt-pool{display:flex;flex-wrap:wrap;gap:7px;min-height:42px;padding:10px;border:2px dashed var(--line);background:var(--surface-2)}
.srt-w{font:inherit;font-size:14px;font-weight:600;padding:4px 12px 3px;border:2px solid var(--edge);background:var(--surface-3);color:var(--ink);box-shadow:0 3px 0 var(--key-hard);transition:transform .06s steps(1),box-shadow .06s steps(1),border-color .15s}
.srt-w:hover{border-color:var(--accent)}
.srt-w[aria-pressed="true"]{background:var(--accent);border-color:var(--rim);color:var(--on-accent);transform:translateY(-2px);box-shadow:0 5px 0 var(--key-hard)}
.srt-w.ok{border-color:var(--ok);background:var(--ok-bg);color:var(--ok);cursor:default}
.srt-w.no{animation:shake .35s;border-color:var(--bad)}
.srt-bins{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:12px 0 0}
.srt-bin{display:flex;flex-direction:column;gap:8px;min-height:110px;padding:12px;border:2px solid color-mix(in srgb,var(--bc,var(--accent)) 60%,var(--line));background:color-mix(in srgb,var(--bc,var(--accent)) 6%,var(--surface-2));box-shadow:3px 3px 0 var(--key-hard);text-align:left;font:inherit;color:inherit;cursor:pointer;transition:background .15s,transform .1s steps(2),box-shadow .1s steps(2)}
.srt-bin:hover{background:color-mix(in srgb,var(--bc,var(--accent)) 12%,var(--surface))}
.srt-bin > b{font-family:var(--mono);font-size-adjust:.58;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--bc,var(--accent-deep))}
.srt-bin > small{font-size:12px;color:var(--ink-3)}
.srt-bin .srt-in{display:flex;flex-wrap:wrap;gap:5px}
.srt-st{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:10px 0 0;font-size:13px;color:var(--ink-3)}
.srt-st b{color:var(--ok)}

/* order: build a sentence by tapping the words in order */
.ord-ans{display:flex;flex-wrap:wrap;gap:7px;min-height:48px;padding:10px;border:2px solid var(--line);background:var(--surface-2);box-shadow:var(--inset);margin:0 0 10px;transition:border-color .2s,background .2s}
.ord-ans.ok{border-color:var(--ok);background:var(--ok-bg)}
.ord-ans.no{border-color:var(--bad);animation:shake .35s}
.ord-ans:empty::before{content:attr(data-ph);font-size:13px;color:var(--ink-3);padding:4px}
.ord-pool{display:flex;flex-wrap:wrap;gap:7px}
.ord-st{margin:10px 0 0;font-size:13.5px;color:var(--ink-2);min-height:20px}
.ord-st.ok{color:var(--ok)}

/* gauge: a level against what is needed (too / enough) */
.gau{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px 22px;align-items:center}
.gau svg{width:100%;height:auto;display:block}
.gau .tube{fill:var(--surface-2);stroke:var(--ink-3);stroke-width:2}
.gau .lvl{fill:var(--accent);transition:y .4s var(--ease),height .4s var(--ease)}
.gau .need{stroke:var(--bad);stroke-width:2;stroke-dasharray:5 4}
.gau .need2{stroke:var(--ok);stroke-width:2;stroke-dasharray:5 4}
.gau .gt{font-size:11px;font-family:var(--mono);font-size-adjust:.58;font-weight:800}
.gau-out .en-s{font-size:17px;display:block;margin:6px 0}
.gau-out p{margin:6px 0 0;font-size:13.5px;color:var(--ink-2)}

/* nested containers: in > on > at for time */
.nst svg{display:block;width:100%;max-width:560px;height:auto;margin:0 auto}
svg.enf rect.box{fill:color-mix(in srgb,var(--bc) 8%,var(--surface));stroke:var(--bc);stroke-width:2;transition:fill .3s,stroke-width .3s}
svg.enf rect.box.on{fill:color-mix(in srgb,var(--bc) 22%,var(--surface));stroke-width:3.5}
svg.enf .bt{font-family:var(--display);font-size:22px;font-weight:600}
svg.enf .bs{font-size:12px;fill:var(--ink-3)}

/* flip cards reuse .fc from the handbook */
.en-fig .decks{margin:0}
.en-fig .fc{height:150px}
.en-fig .fc-f{font-size:16px}
.en-fig .fc-f::after{content:"Bấm để lật"}

/* ---------- labs (TN) inside English lessons ---------- */
.en-lab .lab-b{padding:18px 18px 16px}
.en-lab svg.fig.sm{max-width:520px;margin-inline:auto}
.en-lab svg.fig.md{max-width:720px;margin-inline:auto}
.tm-grid{display:grid;grid-template-columns:72px repeat(4,minmax(0,1fr));gap:6px;margin:0 0 14px}
.tm-grid .egrid-h{text-align:center;padding:0;font-size:9.5px}
.tm-grid .egrid-rh{font-size:9.5px}
.tm-b{font:inherit;font-size:12.5px;font-weight:600;padding:7px 6px 6px;border:2px solid var(--edge);background:var(--surface-3);color:var(--ink-2);line-height:1.25;box-shadow:0 3px 0 var(--key-hard);transition:transform .06s steps(1),box-shadow .06s steps(1),border-color .15s,color .15s}
.tm-b:hover{border-color:var(--accent);color:var(--ink)}
.tm-b[aria-pressed="true"]{background:var(--accent);border-color:var(--rim);color:var(--on-accent);transform:translateY(2px);box-shadow:0 1px 0 var(--key-hard)}
.tm-forms{display:grid;gap:6px;margin:12px 0 0}
.tm-forms div{display:grid;grid-template-columns:30px 30px minmax(0,1fr);align-items:center;gap:8px;padding:8px 12px;background:var(--surface-2);border:2px solid var(--line);box-shadow:var(--inset)}
.tm-forms .sg{font-family:var(--mono);font-size-adjust:.58;font-size:17px;text-align:center;color:var(--ink-3)}
.tm-forms .en-s{font-size:16px}
.tm-forms .en-s b{color:var(--accent-deep)}
.tm-meta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin:12px 0 0;font-size:13.5px;color:var(--ink-2)}
.tm-meta code.fx{font-size:12.5px}
.lab-row{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:end;margin:0 0 12px}
.lab-row .ctrl{flex:1 1 160px}
.rep-out{display:grid;gap:10px}
.rep-out .card2{padding:12px 14px;border:2px solid var(--line);background:var(--surface-2);box-shadow:var(--inset)}
.rep-out small{display:block;font-family:var(--mono);font-size-adjust:.58;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.rep-out .en-s mark{background:color-mix(in srgb,var(--accent) 26%,transparent);padding:0 3px}
.rep-out .en-s del{color:var(--ink-3)}
.tree-q{font-family:var(--display);font-size:19px;font-weight:600;color:var(--ink);margin:0 0 10px}
.tree-path{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;font-size:12px;color:var(--ink-3)}
.tree-path span{padding:2px 9px;background:var(--surface-2);border:2px solid var(--line);font-family:var(--mono);font-size-adjust:.58;font-size:12.5px;letter-spacing:.04em}
.tree-res{font-family:var(--display);font-size:44px;font-weight:600;color:var(--accent-deep);line-height:1;margin:4px 0 8px;text-shadow:3px 3px 0 var(--key-hard)}
.tree-btns{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- Grammar for IELTS Reading ----------
   36 grammar points in three tiers, each with its own colour: essential (crimson), important (blue), advanced (violet).
   The lessons that carry them are highlighted wherever lessons are listed: the syllabus and its roadmap, the sidebar,
   the part chips and the lesson header; each such lesson ends with an IELTS section of advanced notes and 40 exercises. */
[data-tier]{--tc:var(--c-ktpl)}
[data-tier="i"]{--tc:var(--c-toan)}
[data-tier="a"]{--tc:var(--c-vact)}
.ei-badge{display:inline-flex;align-items:center;gap:6px;padding:2px 10px 1px 8px;font-family:var(--mono);font-size-adjust:.58;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:linear-gradient(135deg,#D7263D,#9E1030);border:2px solid #FFD24A;box-shadow:inset 0 2px 0 rgba(255,255,255,.3),2px 2px 0 var(--key-hard)}
.ei-badge::before{content:"";width:7px;height:7px;background:#FFD24A;transform:rotate(45deg)}
.ei-tier{display:inline-flex;align-items:baseline;gap:6px;padding:2px 10px 1px;font-size:12px;font-weight:700;color:var(--tc);background:color-mix(in srgb,var(--tc) 12%,var(--surface));border:2px solid var(--tc);box-shadow:2px 2px 0 var(--key-hard)}
.ei-tier small{font-family:var(--mono);font-size-adjust:.58;font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
/* the lesson header: a red IELTS tab beside the part link */
.en-ib{display:inline-flex;align-items:center;gap:8px;padding:3px 10px 3px 3px;text-decoration:none;font-size:12px;font-weight:700;color:var(--tc);
  border:2px solid var(--tc);background:color-mix(in srgb,var(--tc) 9%,var(--surface));box-shadow:3px 3px 0 var(--key-hard)}
.en-ib b{padding:2px 9px 1px;font-family:var(--mono);font-size-adjust:.58;font-size:12px;letter-spacing:.1em;color:#fff;background:linear-gradient(135deg,#D7263D,#9E1030)}
.en-ib:hover{background:color-mix(in srgb,var(--tc) 16%,var(--surface))}
.en-ib.is-done::after{content:"✓";color:var(--ok)}
.en-lesson[data-ielts]{border-top-color:color-mix(in srgb,var(--tc) 70%,var(--line))}
/* the section: the kit's pixel card in its tier's colour */
.en-ielts{position:relative;margin:44px 0 0;padding:26px clamp(14px,2.6vw,28px) 24px;border:var(--bw) solid var(--tc);
  background:radial-gradient(90% 60% at 100% 0%,color-mix(in srgb,var(--tc) 11%,transparent),transparent 70%),linear-gradient(180deg,color-mix(in srgb,var(--tc) 6%,var(--surface)),var(--surface) 360px);
  box-shadow:6px 6px 0 0 var(--hard),6px 6px 0 2px color-mix(in srgb,var(--tc) 40%,var(--hard)),inset 0 0 24px color-mix(in srgb,var(--tc) 10%,transparent);scroll-margin-top:calc(var(--top-h) + 16px)}
.ei-h{padding:0 0 16px;margin:0 0 20px;border-bottom:2px solid color-mix(in srgb,var(--tc) 35%,var(--line))}
.ei-kick{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 12px}
.ei-t{margin:0;font-family:var(--display);font-size:clamp(24px,2.8vw,33px);font-weight:800;line-height:1.15;letter-spacing:-.015em;color:var(--ink)}
.ei-d{margin:6px 0 0;font-size:15px;color:var(--ink-2);font-style:italic;max-width:70ch}
.ei-adv{max-width:76ch;font-size:15.5px;line-height:1.72;color:var(--ink)}
.ei-adv p{margin:0 0 .85em}
.ei-adv b{color:color-mix(in srgb,var(--tc) 75%,var(--ink))}
.ei-adv .en-h::before{background:repeating-linear-gradient(90deg,var(--tc) 0 6px,transparent 6px 8px)}
.ei-tips{margin-top:18px}
.ei-tips li{margin:0 0 .35em}
.ei-tips b{color:var(--ink)}
.ei-prac{margin:28px 0 0;border:2px solid var(--tc);background:var(--surface);box-shadow:5px 5px 0 var(--hard);overflow:hidden;overflow:clip}
.ei-prac .en-prac-h{background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 12%,var(--surface-3)),var(--surface-3))}
.ei-prac .en-prac-h .en-h::before{background:repeating-linear-gradient(90deg,var(--tc) 0 6px,transparent 6px 8px)}
.ei-prac .en-score b{color:var(--tc)}
.ei-prac .en-score .bar i{--fill:var(--tc)}
/* the three tabs are ghost keys; the one open is held down, framed in its tier's colour */
.ei-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:10px 12px 12px;border-bottom:2px solid var(--line);background:var(--surface-2)}
.ei-tab{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:8px 14px 7px;border:2px solid var(--edge);background:var(--surface-3);color:var(--ink-2);font:inherit;text-align:left;cursor:pointer;box-shadow:0 3px 0 var(--key-hard);transition:transform .06s steps(1),box-shadow .06s steps(1),border-color .15s}
.ei-tab b{font-family:var(--display);font-size:17px;font-weight:800;color:inherit}
.ei-tab small{font-family:var(--mono);font-size-adjust:.58;font-size:12px;letter-spacing:.05em;color:var(--ink-3)}
.ei-tab:hover{border-color:var(--tc)}
.ei-tab[aria-selected="true"]{background:color-mix(in srgb,var(--tc) 12%,var(--surface-3));border-color:var(--tc);color:var(--ink);transform:translateY(2px);box-shadow:0 1px 0 var(--key-hard)}
.ei-tab[aria-selected="true"] b{color:var(--tc)}
.ei-pane{padding:8px 20px 12px;--lv:var(--tc)}
.ei-q{padding:14px 0 16px;border-bottom:2px dashed var(--line-2)}
.ei-q:last-child{border-bottom:0}
.ei-q[data-st="1"] .en-qn::after{content:" ✓";color:var(--ok)}
.ei-q[data-st="2"] .en-qn::after{content:" ·";color:var(--warn)}
.ei-q[data-st="3"] .en-qn::after{content:" ○";color:var(--ink-3)}
.ei-opts{display:grid;gap:6px;margin:10px 0 0 40px}
.ei-opts.tf{display:flex;flex-wrap:wrap}
/* the answers are console keys, as in the handbook's quizzes */
.ei-o{display:flex;align-items:flex-start;gap:10px;width:100%;padding:8px 12px;border:2px solid var(--line);background:var(--surface-2);color:var(--ink);font:inherit;font-size:14.5px;line-height:1.5;text-align:left;cursor:pointer;box-shadow:3px 3px 0 var(--key-hard);transition:transform .1s steps(2),box-shadow .1s steps(2),border-color .15s,background-color .15s}
.ei-opts.tf .ei-o{width:auto;padding:5px 14px 4px;font-family:var(--mono);font-size-adjust:.58;font-size:14px;letter-spacing:.06em}
.ei-o b{flex:none;display:grid;place-items:center;width:24px;height:24px;font-family:var(--pixel);font-size-adjust:none;font-size:9px;line-height:1;background:var(--surface-3);border:2px solid var(--edge);color:var(--ink-2);font-weight:400;box-shadow:2px 2px 0 var(--key-hard)}
.ei-o:hover:not(:disabled){border-color:var(--tc);background:color-mix(in srgb,var(--tc) 8%,var(--surface-2));transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--key-hard)}
.ei-o.ok{border-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
.ei-o.ok b{background:var(--ok);border-color:var(--rim);color:var(--on-accent)}
.ei-o.no{border-color:var(--bad);background:var(--bad-bg);color:var(--bad);animation:shake .35s}
.ei-o.no span{text-decoration:line-through}
.ei-o:disabled{cursor:default}
.ei-opts.done .ei-o:not(.ok):not(.no){opacity:.5}
.ei-sa{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 0 40px}
.ei-in{flex:1 1 220px;min-width:0;padding:8px 12px;font:inherit;font-size:15px;color:var(--ink);background:var(--well);border:2px solid var(--line);box-shadow:var(--inset)}
.ei-in:focus{outline:none;border-color:var(--tc);box-shadow:var(--inset),3px 3px 0 color-mix(in srgb,var(--tc) 35%,transparent)}
.ei-in.ok{border-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
.ei-in.no{border-color:var(--bad);background:var(--bad-bg);animation:shake .35s}
.ei-x{display:block;margin-top:4px;color:var(--ink-2)}
.ei-alt{color:var(--ink-3)}
/* the reading tab: the passage beside its questions on a wide screen, the passage stays in view */
.ei-read{display:grid;gap:18px;padding-top:12px}
.ei-text{padding:20px 22px 12px;border:2px solid color-mix(in srgb,var(--tc) 40%,var(--line));background:color-mix(in srgb,var(--paper) 55%,var(--surface));box-shadow:var(--inset);font-size:16px;line-height:1.75;color:var(--ink)}
.ei-text h4{margin:0 0 12px;font-family:var(--display);font-size:21px;font-weight:800;line-height:1.25;color:var(--ink)}
.ei-text p{margin:0 0 .9em}
.ei-text-k{margin:0 0 6px !important;font-family:var(--mono);font-size-adjust:.58;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--tc)}
.ei-text-k span{color:var(--ink-3)}
.ei-pl{display:inline-grid;place-items:center;width:22px;height:22px;margin-right:9px;font-family:var(--pixel);font-size-adjust:none;font-size:8px;line-height:1;color:#fff;background:var(--tc);vertical-align:2px;box-shadow:2px 2px 0 var(--key-hard)}
.ei-rq-h{margin:0;font-family:var(--mono);font-size-adjust:.58;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
@media (min-width: 1180px){
  .ei-read{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start}
  .ei-text{position:sticky;top:calc(var(--top-h) + 14px);max-height:calc(100vh - var(--top-h) - 28px);overflow:auto}
}
/* highlights in the lists of lessons */
.syl-list a.ielts{position:relative;background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 10%,transparent),transparent 70%)}
.syl-list a.ielts::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:4px;background:var(--tc)}
.syl-list a.ielts:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 16%,transparent),var(--surface-2) 70%)}
.syl-list a.ielts .syl-n{color:var(--tc);font-weight:700}
.syl-ie{display:inline-flex;align-items:center;gap:5px;margin:0 0 0 2px;padding:0 7px;font-family:var(--mono);font-size-adjust:.58;font-size:11px;letter-spacing:.08em;color:#fff;background:var(--tc);vertical-align:2px;text-transform:uppercase;box-shadow:2px 2px 0 var(--key-hard)}
.syl-part > summary .sp-ie{display:inline-block;margin-left:8px;padding:0 7px;font-family:var(--mono);font-size-adjust:.58;font-size:11px;letter-spacing:.08em;color:#C21A37;background:color-mix(in srgb,#D7263D 12%,var(--surface));border:2px solid color-mix(in srgb,#D7263D 55%,var(--line));text-transform:uppercase;vertical-align:1px}
:root[data-theme="dark"] .syl-part > summary .sp-ie{color:#FF8DA0}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .syl-part > summary .sp-ie{color:#FF8DA0}}
.ss-ch a.ielts .n{color:var(--tc);font-weight:800}
.ss-ch a.ielts .t::after{content:" ◆";font-size:9px;color:var(--tc);vertical-align:1px}
/* the roadmap at the head of the syllabus */
.ei-road{padding:18px var(--band-pad-in) 16px;border-bottom:2px solid var(--line-2);background:radial-gradient(70% 120% at 0% 0%,color-mix(in srgb,#D7263D 9%,transparent),transparent 70%),color-mix(in srgb,var(--surface) var(--glass),transparent)}
.ei-road-h{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding-right:28px;cursor:pointer;list-style:none}
.ei-road-h::-webkit-details-marker{display:none}
.ei-road-h::after{content:"";position:absolute;right:4px;top:12px;width:8px;height:8px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);transition:transform .2s steps(2)}
.ei-road[open] > .ei-road-h{margin:0 0 14px}
.ei-road[open] > .ei-road-h::after{transform:rotate(225deg)}
.ei-road-h b{font-family:var(--display);font-size:20px;font-weight:800;color:var(--ink)}
.ei-road-h small{flex-basis:100%;font-size:13px;color:var(--ink-2)}
.ei-road-c{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ei-road-t{padding:12px 12px 8px;border:2px solid color-mix(in srgb,var(--tc) 55%,var(--line));background:color-mix(in srgb,var(--tc) 5%,var(--surface));box-shadow:4px 4px 0 var(--hard)}
.ei-road-t > p{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 0 8px}
.ei-road-n{font-family:var(--mono);font-size-adjust:.58;font-size:12px;color:var(--ink-3)}
.ei-road-t ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ei-road-t a{display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:8px;align-items:baseline;padding:5px 6px;text-decoration:none;color:var(--ink);font-size:13.5px;line-height:1.35}
.ei-road-t a:hover{background:color-mix(in srgb,var(--tc) 10%,var(--surface))}
.ei-road-t a b{grid-row:span 2;display:grid;place-items:center;width:24px;height:24px;font-family:var(--mono);font-size-adjust:.58;font-size:12.5px;color:var(--tc);border:2px solid var(--tc);background:var(--well);box-shadow:2px 2px 0 var(--key-hard)}
.ei-road-t a.is-done b{background:var(--tc);color:#fff;border-color:var(--rim)}
.ei-road-t a small{font-family:var(--mono);font-size-adjust:.58;font-size:11px;letter-spacing:.05em;color:var(--ink-3);text-transform:uppercase}
.ei-road-t a small em{font-style:normal;color:var(--tc)}

/* ---------- responsive ---------- */
@media (max-width: 640px){
  .en-know{font-size:15.5px}
  .tlx{grid-template-columns:minmax(0,1fr)}
  .tlx-l{border-bottom:0;padding:8px 0 0}
  .tlx-ax{grid-column:1}
  .tlx .mkt{font-size:11.5px}
  .tlx .bxt{font-size:10.5px}
  .tlx .axt{font-size:11px}
  .flw-t small{display:none}
  .flw-t{padding:6px 10px}
  .en-qa{margin-left:0}
  .en-line,.en-ta{width:100%;margin-left:0}
  .ei-opts,.ei-sa{margin-left:0}
  .ei-pane{padding:6px 14px 10px}
  .ei-tabs{gap:4px;padding:8px}
  .ei-tab{padding:7px 8px}
  .ei-tab b{font-size:15px}
  .ei-tab small span{display:none}
  .ei-road-c{grid-template-columns:minmax(0,1fr)}
  .ei-text{padding:16px 14px 8px}
  .en-qt{flex-direction:column;gap:0}
  .en-lv{padding:14px 0 4px}
  .en-prac{padding:12px 20px 40px 28px}
  .en-prac-h{padding:4px 0 12px}
  .en-prac-h .en-h{max-width:calc(52cqw - 44px)}   /* the bridge tab */
  .rad,.gau{grid-template-columns:minmax(0,1fr)}
  .rad svg{max-width:220px;margin:0 auto}
  .gau svg{max-width:110px;margin:0 auto}
  .tm-grid{grid-template-columns:44px repeat(4,minmax(0,1fr));gap:4px 3px}
  .tm-b{font-size:10px;padding:7px 2px;hyphens:auto}
  .tm-grid .egrid-h{font-size:8px;letter-spacing:.02em;hyphens:auto}
  .tm-grid .egrid-rh{font-size:8px;letter-spacing:.04em}
  .syl-part > summary{grid-template-columns:40px minmax(0,1fr) 18px}
  .syl-part > summary .syl-n{font-size:8px}
  .syl-part > summary .sp-c{grid-column:2;grid-row:2;margin-top:-8px}
  .bars{height:180px}
  .en-fig{padding:14px 12px 12px}
}
@media print{
  .en-say,.en-chk,.en-fig .btn,.scl input,.srt-st,.en-score,.ei-tabs,.ei-chk,.ei-in{display:none !important}
  .ei-pane[hidden]{display:block !important}
}
.tlx-l .en-say{width:26px;height:26px;flex:none;border-color:var(--rc);color:var(--rc);background:color-mix(in srgb,var(--rc) 8%,var(--surface-3))}
.tlx-l .en-say .ic{width:13px;height:13px}

/* ===== look up a word: a soft highlight under the pointer, a card on click ===== */
::highlight(en-word){background-color:color-mix(in srgb,var(--c-anh,#F4D03F) 26%,transparent);text-decoration:underline dotted color-mix(in srgb,var(--c-anh-d,#B8860B) 80%,transparent);text-decoration-thickness:1.5px;text-underline-offset:3px}
::highlight(en-pick){background-color:color-mix(in srgb,var(--c-anh,#F4D03F) 45%,transparent);color:var(--ink)}
.enx-hov{cursor:pointer}
/* the look-up card is the kit's pixel card in English's gold: a 3 px frame, the hard double shadow, an inner glow */
.enx{--enx-a:var(--c-anh,#FFD000);position:fixed;z-index:110;left:0;top:0;width:min(380px,calc(100vw - 20px));max-height:min(70vh,520px);overflow:auto;padding:16px 18px 12px;
  background:var(--surface);color:var(--ink);border:var(--bw) solid var(--enx-a);
  box-shadow:6px 6px 0 0 var(--hard),6px 6px 0 2px color-mix(in srgb,var(--enx-a) 40%,var(--hard)),inset 0 0 24px color-mix(in srgb,var(--enx-a) 12%,transparent);font-size:14.5px;line-height:1.5;animation:enxIn .16s steps(2)}
.enx[hidden]{display:none}
.enx:focus{outline:none}
.enx::before{content:"";position:absolute;left:var(--ax,50%);top:-8px;width:13px;height:13px;transform:translateX(-50%) rotate(45deg);background:var(--surface);border-left:var(--bw) solid var(--enx-a);border-top:var(--bw) solid var(--enx-a)}
.enx.up::before{top:auto;bottom:-7px;transform:translateX(-50%) rotate(225deg)}
.enx.sheet{left:10px !important;right:10px;top:auto !important;bottom:10px;width:auto;max-height:60vh;animation:enxUp .2s var(--ease)}
.enx.sheet::before{display:none}
@keyframes enxIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes enxUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.enx-x{position:absolute;right:8px;top:6px;width:30px;height:30px;border:2px solid transparent;background:none;color:var(--ink-3);font-size:22px;line-height:1}
.enx-x:hover{background:var(--surface-3);border-color:var(--edge);color:var(--ink)}
.enx-form{margin:0 0 6px;font-size:12.5px;color:var(--ink-3)}
.enx-form b{color:var(--ink-2)}
.enx-e + .enx-e{margin-top:12px;padding-top:12px;border-top:2px dashed var(--line)}
.enx-h{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;padding-right:28px}
.enx-w{font-family:var(--display);font-size:26px;font-weight:800;line-height:1.15;letter-spacing:-.01em;color:var(--ink)}
.enx-ipa{font-family:var(--code);font-size-adjust:.53;font-size:14px;color:var(--c-anh-d,#8E6B00);font-weight:500}
.enx-say{width:30px;height:30px}
.enx-s{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.enx-s li{display:grid;gap:1px;padding:8px 10px;background:color-mix(in srgb,var(--enx-a) 7%,var(--surface-2));border:2px solid var(--line);box-shadow:var(--inset)}
.enx-p{font-family:var(--mono);font-size-adjust:.58;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--c-anh-d,#8E6B00)}
.enx-vi{font-size:16px;font-weight:600;color:var(--ink)}
.enx-en{font-size:13.5px;color:var(--ink-2);font-style:italic}
.enx-ir{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin:10px 0 0;font-size:14px}
.enx-ir span:first-child{font-family:var(--mono);font-size-adjust:.58;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.enx-none{margin:10px 0 0;color:var(--ink-2)}
.enx-more{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:12px 0 0}
.enx-more > span{font-family:var(--mono);font-size-adjust:.58;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-right:2px}
.enx-f{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin:12px -18px -12px;padding:9px 18px;border-top:2px solid var(--line);background:var(--surface-2);font-size:12.5px;color:var(--ink-3)}
.enx-ls a{display:inline-grid;place-items:center;min-width:26px;height:24px;margin-left:4px;padding:0 6px;font-weight:700;color:var(--c-anh-d,#8E6B00);background:color-mix(in srgb,var(--enx-a) 16%,transparent);border:2px solid color-mix(in srgb,var(--enx-a) 60%,var(--line));text-decoration:none}
.enx-cam{color:var(--ink-2);text-decoration:none;font-weight:600}
.enx-cam:hover{color:var(--ink)}
@media print{
  .enx{display:none !important}
  /* the spotlight's dark stage is a background, which printers leave out: print the formulas as an ordinary light card */
  .en-spot{color:var(--ink-2);background:none;border-color:var(--line);box-shadow:none;break-inside:avoid}
  .en-spot::before,.en-spot::after{display:none}
  .en-spot .en-h{color:var(--ink)}
  .en-spot .en-fx li{color:var(--ink-2)}
  .en-spot code.fx{color:var(--ink);background:none;border-color:var(--line);box-shadow:none}
  .en-spot code.fx .k-s,.en-spot .en-legend .k-s{color:var(--c-toan-d);background:none}
  .en-spot code.fx .k-v,.en-spot .en-legend .k-v{color:var(--c-hoa-d);background:none}
  .en-spot code.fx .k-a,.en-spot .en-legend .k-a{color:var(--c-van-d);background:none}
  .en-spot code.fx .k-p,.en-spot .fx-n,.en-spot .en-legend,.en-spot .en-spot-c{color:var(--ink-3)}
  .en-spot .en-fxn{color:var(--ink);background:none;border:1.5px solid var(--ink-3);box-shadow:none}
}