/* Lesson figures: theme-token colours for the inline SVG in lesson-figures.js, the figure frames on
   lessons, flashcards and questions, and the full-screen zoom view. */
.lf-svg{--f-ink:var(--ink);--f-mut:var(--muted);--f-bg:var(--bg);--f-red:var(--red);--f-vio:var(--violet);--f-blu:var(--blue);--f-gold:var(--gold);--f-grn:var(--green);--f-cor:var(--coral);--f-acc:var(--accent);
  --f-panel:color-mix(in srgb,var(--f-ink) 5%,var(--f-bg));--f-edge:color-mix(in srgb,var(--f-ink) 20%,var(--f-bg));
  display:block;width:100%;height:100%;overflow:visible;font-family:inherit;user-select:none;-webkit-user-select:none}
.lf-svg text{fill:var(--f-ink);font-size:13px;text-anchor:middle;font-weight:600}
.lf-svg text[text-anchor]{text-anchor:inherit}
.lf-svg text[text-anchor="start"]{text-anchor:start}.lf-svg text[text-anchor="end"]{text-anchor:end}
.lf-svg .lf-ts{font-size:12px;fill:var(--f-mut);font-weight:600}
.lf-svg .lf-tl{font-size:11.5px;fill:var(--f-mut);font-weight:700}
.lf-svg .lf-tb{font-size:13.5px;font-weight:800}
.lf-svg .lf-tbs{font-size:12px;font-weight:800}
.lf-svg .lf-th{font-size:17px;font-weight:800}
.lf-svg .lf-tbig{font-size:26px;font-weight:900;letter-spacing:-.5px}
.lf-svg .lf-tbig2{font-size:40px;font-weight:900;fill:var(--f-acc)}
.lf-svg .lf-tif{font-size:10px;font-weight:900;fill:var(--f-bg)}
.lf-svg .lf-inv{fill:#fff}
.lf-svg .lf-my-t{fill:var(--f-red)}.lf-svg .lf-ly-t{fill:var(--f-blu)}.lf-svg .lf-red-t{fill:var(--f-red)}
/* panels and frames */
.lf-pn{fill:var(--f-panel);stroke:var(--f-edge);stroke-width:1.2}
.lf-pn.lf-my,.lf-pn.lf-cell-my{fill:color-mix(in srgb,var(--f-red) 7%,var(--f-bg));stroke:color-mix(in srgb,var(--f-red) 40%,var(--f-bg))}
.lf-pn.lf-ly,.lf-pn.lf-cell-ly{fill:color-mix(in srgb,var(--f-blu) 8%,var(--f-bg));stroke:color-mix(in srgb,var(--f-blu) 42%,var(--f-bg))}
.lf-pn.lf-acc{fill:color-mix(in srgb,var(--f-acc) 9%,var(--f-bg));stroke:color-mix(in srgb,var(--f-acc) 45%,var(--f-bg))}
.lf-pn.lf-red-k,.lf-pn.lf-bad-k,.lf-pn.lf-sqss{fill:color-mix(in srgb,var(--f-red) 9%,var(--f-bg));stroke:color-mix(in srgb,var(--f-red) 50%,var(--f-bg))}
.lf-pn.lf-blu-k{fill:color-mix(in srgb,var(--f-blu) 9%,var(--f-bg));stroke:color-mix(in srgb,var(--f-blu) 50%,var(--f-bg))}
.lf-pn.lf-vio-k{fill:color-mix(in srgb,var(--f-vio) 9%,var(--f-bg));stroke:color-mix(in srgb,var(--f-vio) 50%,var(--f-bg))}
.lf-pn.lf-coral-k{fill:color-mix(in srgb,var(--f-cor) 9%,var(--f-bg));stroke:color-mix(in srgb,var(--f-cor) 50%,var(--f-bg))}
.lf-pn.lf-gold-k{fill:color-mix(in srgb,var(--f-gold) 10%,var(--f-bg));stroke:color-mix(in srgb,var(--f-gold) 55%,var(--f-bg))}
.lf-pn.lf-sqtr{fill:color-mix(in srgb,var(--f-red) 4%,var(--f-bg));stroke:color-mix(in srgb,var(--f-red) 30%,var(--f-bg));stroke-dasharray:5 3}
.lf-pn.lf-gut{fill:color-mix(in srgb,var(--f-cor) 6%,var(--f-bg))}
.lf-pn.lf-water{fill:color-mix(in srgb,var(--f-blu) 6%,var(--f-bg))}
.lf-pn[class*="lf-step"]{fill:color-mix(in srgb,var(--f-acc) 6%,var(--f-bg))}
/* lines and arrows */
.lf-ln{fill:none;stroke:var(--f-mut);stroke-width:1.3}
.lf-ln.lf-faint{opacity:.45}
.lf-ar{fill:none;stroke:var(--f-mut);stroke-width:1.8;stroke-linecap:round}
.lf-ah{fill:var(--f-mut)}
.lf-ar.lf-dash{stroke-dasharray:5 4}
.lf-ar.lf-bad,.lf-ah.lf-bad{stroke:var(--f-red)}.lf-ah.lf-bad{fill:var(--f-red)}
.lf-ar.lf-blu-s{stroke:var(--f-blu)}.lf-ah.lf-blu-s{fill:var(--f-blu)}
.lf-ar.lf-red-s{stroke:var(--f-red)}.lf-ah.lf-red-s{fill:var(--f-red)}
.lf-ar.lf-wat{stroke:var(--f-blu);stroke-width:2.2}.lf-ah.lf-wat{fill:var(--f-blu)}
.lf-ar.lf-no{stroke:var(--f-red);stroke-width:2}.lf-ar.lf-bar{stroke-width:3}
.lf-brk{fill:none;stroke-width:4;stroke-linecap:round}
.lf-brk.lf-red-k{stroke:var(--f-red)}.lf-brk.lf-vio-k{stroke:var(--f-vio)}.lf-brk.lf-blu-k{stroke:var(--f-blu)}
.lf-brace{fill:none;stroke:var(--f-mut);stroke-width:1.5}
.lf-guide{fill:none;stroke:var(--f-mut);stroke-width:1.2;stroke-dasharray:3 3}
.lf-dot{fill:var(--f-acc)}
.lf-xmark{stroke:var(--f-red);stroke-width:3;stroke-linecap:round}
/* blood cells */
.lf-rbc{fill:color-mix(in srgb,var(--f-red) 72%,var(--f-bg));stroke:color-mix(in srgb,var(--f-red) 80%,var(--f-ink));stroke-width:1}
.lf-rbc.lf-dense{fill:color-mix(in srgb,var(--f-red) 90%,var(--f-ink))}
.lf-pal{fill:color-mix(in srgb,var(--f-red) 26%,var(--f-bg))}
.lf-pal.lf-faint{fill:color-mix(in srgb,var(--f-red) 55%,var(--f-bg))}
.lf-cyt{fill:color-mix(in srgb,var(--f-vio) 10%,var(--f-bg));stroke:color-mix(in srgb,var(--f-vio) 45%,var(--f-bg));stroke-width:1}
.lf-cyt.lf-eo{fill:color-mix(in srgb,var(--f-cor) 16%,var(--f-bg))}
.lf-gran-e{fill:color-mix(in srgb,var(--f-cor) 80%,var(--f-bg))}
.lf-gran-b{fill:color-mix(in srgb,var(--f-vio) 85%,var(--f-ink))}
.lf-nuc{fill:color-mix(in srgb,var(--f-vio) 78%,var(--f-bg))}
.lf-strand{fill:none;stroke:color-mix(in srgb,var(--f-vio) 78%,var(--f-bg));stroke-width:2.2}
.lf-nucf{fill:color-mix(in srgb,var(--f-vio) 52%,var(--f-bg))}
.lf-nucl{fill:color-mix(in srgb,var(--f-vio) 20%,var(--f-bg))}
.lf-chrom{fill:color-mix(in srgb,var(--f-vio) 90%,var(--f-ink))}
.lf-lcyt{fill:color-mix(in srgb,var(--f-blu) 30%,var(--f-bg));stroke:color-mix(in srgb,var(--f-blu) 55%,var(--f-bg))}
.lf-mcyt{fill:color-mix(in srgb,var(--f-blu) 14%,var(--f-bg));stroke:color-mix(in srgb,var(--f-blu) 40%,var(--f-bg))}
.lf-bcyt{fill:color-mix(in srgb,var(--f-blu) 38%,var(--f-bg));stroke:color-mix(in srgb,var(--f-blu) 60%,var(--f-bg))}
.lf-scyt{fill:color-mix(in srgb,var(--f-acc) 20%,var(--f-bg));stroke:var(--f-acc)}
.lf-ecyt{fill:color-mix(in srgb,var(--f-blu) 50%,var(--f-bg))}
.lf-plt{fill:color-mix(in srgb,var(--f-vio) 65%,var(--f-bg))}
.lf-o2{fill:var(--f-blu)}
.lf-film{fill:color-mix(in srgb,var(--f-cor) 5%,var(--f-bg));stroke:var(--f-edge)}
.lf-marrow{fill:color-mix(in srgb,var(--f-cor) 18%,var(--f-bg));stroke:color-mix(in srgb,var(--f-cor) 45%,var(--f-bg));stroke-width:1.5}
.lf-fat{fill:color-mix(in srgb,var(--f-gold) 6%,var(--f-bg));stroke:color-mix(in srgb,var(--f-ink) 22%,var(--f-bg));stroke-width:.8}
.lf-mc{fill:color-mix(in srgb,var(--f-vio) 70%,var(--f-bg))}
.lf-mc-r{fill:color-mix(in srgb,var(--f-red) 75%,var(--f-bg))}
.lf-fiber{stroke:color-mix(in srgb,var(--f-red) 40%,var(--f-ink));stroke-width:2.4;stroke-linecap:round}
.lf-vessel{fill:color-mix(in srgb,var(--f-red) 12%,var(--f-bg));stroke:color-mix(in srgb,var(--f-red) 45%,var(--f-bg));stroke-width:1.5}
.lf-isch{fill:color-mix(in srgb,var(--f-vio) 16%,var(--f-bg));stroke:color-mix(in srgb,var(--f-vio) 45%,var(--f-bg));stroke-dasharray:4 3}
/* iron, B12, membrane */
.lf-chan{fill:color-mix(in srgb,var(--f-acc) 55%,var(--f-bg))}
.lf-fe{fill:var(--f-gold)}
.lf-ifp{fill:var(--f-blu)}
.lf-b12{fill:var(--f-red)}
.lf-fol{fill:var(--f-grn)}
.lf-bilayer{fill:none;stroke:color-mix(in srgb,var(--f-gold) 70%,var(--f-ink));stroke-width:3}
.lf-band3{fill:color-mix(in srgb,var(--f-acc) 60%,var(--f-bg))}
.lf-ankyrin{fill:var(--f-gold)}
.lf-spectrin{fill:none;stroke:var(--f-red);stroke-width:2}
.lf-spleen{fill:color-mix(in srgb,var(--f-vio) 22%,var(--f-bg));stroke:color-mix(in srgb,var(--f-vio) 55%,var(--f-bg));stroke-width:1.5}
.lf-plasma{fill:color-mix(in srgb,var(--f-gold) 30%,var(--f-bg))}
.lf-rbcfill{fill:color-mix(in srgb,var(--f-red) 80%,var(--f-ink))}
.lf-buffy{fill:color-mix(in srgb,var(--f-ink) 6%,#fff)}
.lf-tube{fill:none;stroke:var(--f-mut);stroke-width:2}
.lf-bone{fill:color-mix(in srgb,var(--f-gold) 14%,var(--f-bg));stroke:color-mix(in srgb,var(--f-gold) 45%,var(--f-ink));stroke-width:1.5}
.lf-hole{fill:var(--f-bg);stroke:color-mix(in srgb,var(--f-gold) 45%,var(--f-ink))}
.lf-joint{fill:color-mix(in srgb,var(--f-gold) 24%,var(--f-bg));stroke:color-mix(in srgb,var(--f-gold) 45%,var(--f-ink))}
.lf-crest{fill:none;stroke:var(--f-acc);stroke-width:4;stroke-linecap:round}
.lf-target{fill:var(--f-red)}
.lf-needle{stroke:var(--f-ink);stroke-width:2.5}
.lf-needleh{fill:var(--f-mut)}
/* charts */
.lf-gridl{stroke:color-mix(in srgb,var(--f-ink) 10%,var(--f-bg));stroke-width:1}
.lf-curve{fill:none;stroke:var(--f-acc);stroke-width:3.2;stroke-linecap:round}
.lf-curve.lf-dash{stroke-dasharray:7 5;stroke-width:2.6}
.lf-curve.lf-blu-s{stroke:var(--f-blu)}.lf-curve.lf-coral-s{stroke:var(--f-cor)}
.lf-esi{stroke:none}.lf-esi1{fill:var(--f-red)}.lf-esi2{fill:var(--f-cor)}.lf-esi3{fill:color-mix(in srgb,var(--f-gold) 85%,#000)}.lf-esi4{fill:var(--f-grn)}.lf-esi5{fill:var(--f-blu)}
.lf-gridline{fill:none;stroke:var(--f-edge);stroke-width:1.5}
.lf-gridbox{fill:none;stroke:var(--f-mut);stroke-width:1.5}
.lf-band{stroke:none}.lf-b1{fill:color-mix(in srgb,var(--f-cor) 9%,var(--f-bg))}.lf-b2{fill:color-mix(in srgb,var(--f-acc) 8%,var(--f-bg))}.lf-b3{fill:color-mix(in srgb,var(--f-vio) 9%,var(--f-bg))}
.lf-ecg-bg{fill:color-mix(in srgb,var(--f-cor) 5%,var(--f-bg));stroke:var(--f-edge)}
.lf-ecg-grid{fill:none;stroke:color-mix(in srgb,var(--f-cor) 20%,var(--f-bg));stroke-width:.7}
.lf-ecg{fill:none;stroke:var(--f-ink);stroke-width:2;stroke-linejoin:round}
.lf-qt{fill:none;stroke:var(--f-acc);stroke-width:2}
/* anatomy */
.lf-skin{fill:color-mix(in srgb,var(--f-cor) 14%,var(--f-bg));stroke:color-mix(in srgb,var(--f-cor) 50%,var(--f-ink));stroke-width:1.5}
.lf-cavity,.lf-lumen{fill:var(--f-bg);stroke:color-mix(in srgb,var(--f-cor) 40%,var(--f-bg))}
.lf-tongue{fill:color-mix(in srgb,var(--f-red) 35%,var(--f-bg))}
.lf-trachea,.lf-airway{fill:color-mix(in srgb,var(--f-blu) 10%,var(--f-bg));stroke:color-mix(in srgb,var(--f-blu) 45%,var(--f-bg));stroke-width:1.5}
.lf-epi{fill:none;stroke:color-mix(in srgb,var(--f-cor) 60%,var(--f-ink));stroke-width:3;stroke-linecap:round}
.lf-opa{fill:none;stroke:var(--f-gold);stroke-width:7;stroke-linecap:round}
.lf-npa{fill:none;stroke:var(--f-blu);stroke-width:5;stroke-linecap:round}
.lf-cart{fill:color-mix(in srgb,var(--f-gold) 14%,var(--f-bg));stroke:color-mix(in srgb,var(--f-gold) 45%,var(--f-ink))}
.lf-cords{fill:none;stroke:var(--f-cor);stroke-width:3;stroke-linecap:round}
.lf-ring{fill:none;stroke:color-mix(in srgb,var(--f-blu) 30%,var(--f-bg));stroke-width:3}
.lf-ett{fill:color-mix(in srgb,var(--f-acc) 30%,var(--f-bg));stroke:var(--f-acc);stroke-width:1.5}
.lf-cuff{fill:color-mix(in srgb,var(--f-acc) 18%,var(--f-bg));stroke:var(--f-acc);stroke-width:1.5}
.lf-pilot{fill:none;stroke:var(--f-acc);stroke-width:1.5}
.lf-icf{fill:color-mix(in srgb,var(--f-blu) 22%,var(--f-bg))}.lf-isf{fill:color-mix(in srgb,var(--f-acc) 22%,var(--f-bg))}.lf-pls{fill:color-mix(in srgb,var(--f-red) 26%,var(--f-bg))}
.lf-chest{fill:color-mix(in srgb,var(--f-ink) 4%,var(--f-bg));stroke:var(--f-edge);stroke-width:1.5}
.lf-lung{fill:color-mix(in srgb,var(--f-cor) 26%,var(--f-bg));stroke:color-mix(in srgb,var(--f-cor) 55%,var(--f-bg));stroke-width:1.2}
.lf-trach{fill:color-mix(in srgb,var(--f-blu) 25%,var(--f-bg))}
.lf-heart{fill:color-mix(in srgb,var(--f-red) 45%,var(--f-bg))}
.lf-effusion{fill:color-mix(in srgb,var(--f-blu) 35%,var(--f-bg))}
.lf-unit{fill:color-mix(in srgb,var(--f-ink) 4%,var(--f-bg));stroke:var(--f-mut);stroke-width:1.5}
.lf-chamber{fill:var(--f-bg);stroke:var(--f-edge);stroke-width:1.2}
.lf-waterc{fill:color-mix(in srgb,var(--f-blu) 32%,var(--f-bg))}
.lf-bub{fill:var(--f-bg);stroke:var(--f-blu)}
.lf-drain{fill:color-mix(in srgb,var(--f-red) 40%,var(--f-bg))}
.lf-tubing{fill:none;stroke:var(--f-mut);stroke-width:4;stroke-linecap:round}
.lf-wall{fill:color-mix(in srgb,var(--f-cor) 14%,var(--f-bg));stroke:var(--f-edge)}
.lf-muscle{fill:color-mix(in srgb,var(--f-red) 40%,var(--f-bg))}
.lf-mucosa{fill:color-mix(in srgb,var(--f-cor) 30%,var(--f-bg))}
.lf-mucosa.lf-swollen{fill:color-mix(in srgb,var(--f-cor) 55%,var(--f-bg))}
.lf-mucus{fill:color-mix(in srgb,var(--f-grn) 35%,var(--f-bg));stroke:color-mix(in srgb,var(--f-grn) 60%,var(--f-bg))}
.lf-airtube{fill:none;stroke:color-mix(in srgb,var(--f-cor) 45%,var(--f-bg));stroke-width:10;stroke-linecap:round}
.lf-alv{fill:color-mix(in srgb,var(--f-cor) 20%,var(--f-bg));stroke:color-mix(in srgb,var(--f-cor) 60%,var(--f-bg));stroke-width:1.5}
.lf-wallfrag{fill:none;stroke:color-mix(in srgb,var(--f-cor) 60%,var(--f-bg));stroke-width:1.5}
.lf-ch{stroke-width:2}
.lf-ra,.lf-rv{fill:color-mix(in srgb,var(--f-blu) 18%,var(--f-bg));stroke:color-mix(in srgb,var(--f-blu) 55%,var(--f-bg))}
.lf-la,.lf-lv{fill:color-mix(in srgb,var(--f-red) 16%,var(--f-bg));stroke:color-mix(in srgb,var(--f-red) 55%,var(--f-bg))}
.lf-lv{stroke-width:5}
.lf-valve{fill:var(--f-gold)}
.lf-table{fill:color-mix(in srgb,var(--f-ink) 30%,var(--f-bg))}
.lf-body{fill:color-mix(in srgb,var(--f-acc) 30%,var(--f-bg));stroke:color-mix(in srgb,var(--f-acc) 60%,var(--f-bg))}
.lf-limb{fill:none;stroke:color-mix(in srgb,var(--f-acc) 45%,var(--f-bg));stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.lf-nose{fill:color-mix(in srgb,var(--f-acc) 60%,var(--f-bg))}
.lf-pad{fill:var(--f-gold)}
.lf-surface{stroke:var(--f-mut);stroke-width:2}
.lf-hot{fill:var(--f-red);stroke:var(--f-bg);stroke-width:1.5}

/* figure frames */
.lf{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:0}
.lf-hit{position:relative;display:block;width:100%;flex:1 1 auto;min-height:0;padding:8px;border:1px solid var(--edge);border-radius:18px;background:color-mix(in srgb,var(--ink) 3%,var(--bg));box-shadow:var(--inset-sm);cursor:zoom-in;color:inherit;touch-action:manipulation}
.lf-hit:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.lf-zoom-ico{position:absolute;right:8px;bottom:8px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--bg);box-shadow:var(--raise-xs);opacity:.9}
.lf-zoom-ico svg{width:17px;height:17px;fill:none;stroke:var(--muted);stroke-width:2.2;stroke-linecap:round}
.lf figcaption{font-size:12.5px;line-height:1.35;color:var(--muted);text-align:center;font-weight:600;max-width:60ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* lesson slides: figure beside the text in landscape, above it in portrait; the slide fills the stage so the
   figure takes the free space and nothing scrolls */
.slide.has-fig{--lf-reserve:400px;max-width:820px;height:auto;max-height:100%;flex-direction:column;justify-content:center;padding:clamp(12px,2.2vh,24px) clamp(14px,2.4vw,28px);gap:clamp(8px,1.6vh,16px)}
.slide.has-fig .lf{order:-1;width:100%;flex:0 1 auto}
.slide.has-fig .lf-hit{width:100%;height:auto;aspect-ratio:var(--lf-ar);max-height:calc(var(--vh,100vh) - var(--lf-reserve));flex:0 1 auto}
.slide-text{display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.4vh,14px);flex:0 1 auto;min-height:0;overflow:hidden}
.slide.has-fig .slide-big{font-size:clamp(16px,calc(.6vw + 1.5vh),25px)}
@media (max-width:520px){.slide.has-fig{--lf-reserve:440px}}
@media (orientation:landscape) and (min-width:700px){
  .slide.has-fig{--lf-reserve:230px;max-width:none;flex-direction:row;align-items:center}
  .slide.has-fig .lf{order:0;flex:1.6 1 0}
  .slide.has-fig .slide-text{flex:1 1 0;justify-content:center;align-items:flex-start;text-align:left}
  .slide.has-fig .slide-big{font-size:clamp(17px,calc(.7vw + 1.6vh),26px)}
}
@media (orientation:landscape) and (max-height:520px){.slide.has-fig{--lf-reserve:170px}.slide.has-fig .lf figcaption{display:none}}
/* flashcards */
.lf-card{width:100%;max-height:min(30vh,240px)}
.lf-card .lf-hit{height:min(26vh,210px);width:auto;max-width:100%;aspect-ratio:var(--lf-ar);padding:4px;border-radius:14px}
.lf-card figcaption{display:none}
/* questions */
.lf-question{width:100%;max-width:640px;align-self:center;flex-shrink:0}
.lf-question .lf-hit{height:clamp(120px,24vh,250px);width:auto;max-width:100%;aspect-ratio:var(--lf-ar);padding:6px;border-radius:14px}
.lf-question figcaption{font-size:12px;-webkit-line-clamp:1}
.quiz-body.answered .lf-question .lf-hit{height:clamp(64px,10vh,110px)}
.quiz-body.answered .lf-question figcaption{display:none}
@media (max-width:520px){.lf-question .lf-hit{height:clamp(110px,20vh,190px)}}
/* world exam and classroom papers */
.lf-paper{margin:6px 0 8px;width:100%}
.lf-paper .lf-hit{height:clamp(110px,22vh,220px);width:auto;max-width:100%;aspect-ratio:var(--lf-ar);padding:6px;border-radius:10px;background:transparent;box-shadow:none}
.lf-paper figcaption{font-size:11.5px;-webkit-line-clamp:1}
.lf-handout{margin:8px 0;width:100%}
.lf-handout .lf-hit{height:auto;aspect-ratio:auto;padding:6px;border-radius:10px;background:transparent;box-shadow:none}
.lf-handout .lf-svg{height:auto}

/* full-screen zoom */
.lf-zoom{position:fixed;inset:0;z-index:12000;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:color-mix(in srgb,var(--bg) 96%,#000);color:var(--ink);padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));animation:lfIn .2s ease}
.lf-zoom-open,.lf-zoom-open body{overflow:hidden}
.lf-zoom-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px}
.lf-zoom-bar strong{font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lf-zoom-tools{display:flex;gap:8px;flex-shrink:0}
.lf-zoom-tools button{min-width:44px;height:44px;border:0;border-radius:14px;background:var(--bg);box-shadow:var(--raise-xs);color:var(--ink);font:800 18px/1 inherit;display:grid;place-items:center;padding:0 10px}
.lf-zoom-tools button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.lf-zoom-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.lf-zoom-stage{position:relative;overflow:hidden;touch-action:none;border-radius:18px;box-shadow:var(--inset-sm);cursor:grab}
.lf-zoom-pan{position:absolute;inset:12px;transform-origin:50% 50%;will-change:transform}
.lf-zoom-cap{margin:8px 0 0;text-align:center;font-size:13.5px;color:var(--muted);font-weight:600}
.lf-zoom-cap span{display:block;font-size:12px;opacity:.85}
@keyframes lfIn{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.lf-zoom{animation:none}}

/* photos and credits */
.lf-photo{display:block;width:100%;height:100%;object-fit:contain;border-radius:12px;background:color-mix(in srgb,var(--ink) 4%,var(--bg))}
.lf-is-photo .lf-hit{padding:4px;background:color-mix(in srgb,var(--ink) 5%,var(--bg))}
.lf-credit{margin:0;font-size:10.5px;line-height:1.3;color:var(--faint);text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lf-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.lf-zoom-pan .lf-photo{background:transparent;border-radius:0}
.lf-zoom .lf-credit{margin-top:4px;font-size:12px}
.credits-page{display:flex;flex-direction:column;gap:18px;max-width:980px}
.credits-lead{margin:0;color:var(--muted);max-width:70ch}
.credits-group h2{font-size:17px;margin:0 0 8px}
.credits-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:10px}
.credits-list li{display:flex;gap:12px;align-items:center;padding:10px;border-radius:16px;background:var(--bg);box-shadow:var(--raise-xs);border:1px solid var(--edge);min-width:0}
.credits-list img{width:84px;height:64px;object-fit:cover;border-radius:10px;flex-shrink:0;background:var(--track)}
.credits-list div{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:12.5px;color:var(--muted)}
.credits-list strong{font-size:13.5px;color:var(--ink);line-height:1.3}
.credits-list span{overflow-wrap:anywhere}
.credits-list a{color:var(--accent)}
/* flashcards: picture beside the text in landscape, under it in portrait; no inner scrolling */
.flash-face .lf-card{flex:0 1 auto;min-height:0}
.flash-face .lf-card .lf-credit{font-size:10px}
@media (orientation:landscape) and (min-width:700px){
  .flash-face:has(> .lf-card){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-auto-flow:row dense;align-content:center;column-gap:clamp(14px,2.4vw,28px);row-gap:10px}
  .flash-face:has(> .lf-card) > :not(.lf-card):not(.known-badge):not(.stamp){grid-column:1}
  .flash-face:has(> .lf-card) > .lf-card{grid-column:2;grid-row:1 / span 8;align-self:center;max-height:none}
  .flash-face:has(> .lf-card) .lf-card .lf-hit{height:auto;width:100%;max-height:calc(var(--vh,100vh) - 300px)}
  .flash-face.front:has(> .lf-card) > :not(.lf-card){justify-self:center}
}
/* Quiz and Challenge Me: the question figure takes the room left after the prompt and answers, from 250px down to
   a readable 90px (56px once the answer sheet is open), so the question never scrolls or clips. */
.quiz-body > .lf-question{flex:0 1 250px;min-height:90px;justify-content:flex-start}
.quiz-body > .lf-question .lf-hit{flex:1 1 0;min-height:0;height:auto;width:auto;max-width:100%;aspect-ratio:var(--lf-ar)}
.quiz-body.answered > .lf-question{flex-basis:110px;min-height:56px}
@media (orientation:landscape) and (max-height:820px){
  .flash-face:has(> .lf-card){padding:clamp(14px,2.6vh,26px) clamp(16px,2.6vw,30px);row-gap:8px}
  .flash-face:has(> .lf-card) .flash-what{font-size:clamp(15px,calc(.45vw + 1.5vh),19px)!important}
  .flash-face:has(> .lf-card) .face-block{padding:8px 12px}
  .flash-face:has(> .lf-card) .face-block p{font-size:14px}
}
/* Short phones: once answered, the explanation sheet needs the room, so the figure steps aside. */
@media (max-width:520px) and (max-height:900px){.quiz-body.answered > .lf-question{display:none}}
@media (min-height:1000px) and (orientation:portrait){.lf-card .lf-hit{height:min(32vh,340px)}}