/* ==========================================================================
   Figure styles — exam-paper line art. Ink on white, soft colour only where
   it carries meaning (water, plants, heat, poles). Re-themed via variables.
   ========================================================================== */
:root {
  --fig-ink: #1b2433;
  --fig-ink-2: #4b5767;
  --fig-paper: #ffffff;
  --fig-head: #eef3f7;
  --fig-grid: #dbe2ea;
  --fig-grid2: #c3ccd7;
  --fig-water: #d3e8f6;
  --fig-water-edge: #6ba6cf;
  --fig-leaf: #c3e5c7;
  --fig-leaf-edge: #3d8b54;
  --fig-soil: #cfad84;
  --fig-hl: #ffe27a;
  --fig-glow: #ffd84d;
}

.fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fig figcaption { font-size: 13px; color: var(--ink-2, #4b5767); text-align: center; }
.figsvg { width: 100%; height: auto; overflow: visible; display: block; }
.figsvg text { font-family: "Lexend", system-ui, sans-serif; fill: var(--fig-ink); font-size: 13px; }
.fig-missing { font-size: 13px; color: #7d8898; border: 1px dashed #c3ccd7; padding: 10px 14px; border-radius: 8px; }

/* strokes + fills */
.fk { fill: none; stroke: var(--fig-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fkf { fill: var(--fig-ink); stroke: none; }
.fp { fill: var(--fig-paper); stroke: var(--fig-ink); stroke-width: 1.7; stroke-linejoin: round; }
.fthin { fill: none; stroke: var(--fig-ink); stroke-width: 1; stroke-linecap: round; }
.fglass { fill: none; stroke: var(--fig-ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ftable { stroke: var(--fig-ink); stroke-width: 2.6; stroke-linecap: round; }
.fdash { fill: none; stroke: #8a96a6; stroke-width: 1.4; stroke-dasharray: 5 4; }
.fghost { opacity: .32; }

/* text */
.figsvg .ft2 { fill: var(--fig-ink-2); font-size: 12px; }
.figsvg .fL { font-family: "Recursive", system-ui, sans-serif; font-variation-settings: "CASL" 0.4, "wght" 800; font-weight: 800; font-size: 16px; }
.figsvg .ftinv { fill: #fff; }
.figsvg .flcdt { font-family: "Recursive", ui-monospace, monospace; font-variation-settings: "MONO" 1, "wght" 700; font-size: 18px; fill: #22301c; }
.figsvg .fyes { fill: #178a55; font-weight: 700; }
.figsvg .fno { fill: #c8323f; font-weight: 700; }

/* tables + graphs */
.fhead { fill: var(--fig-head); stroke: none; }
.fgrid { stroke: var(--fig-grid); stroke-width: 1; }
.fgrid2 { stroke: var(--fig-grid2); stroke-width: 1; }
.fbar { fill: #c9d7ea; stroke: var(--fig-ink); stroke-width: 1.4; }
.fbarhl { fill: var(--fig-hl); }
.fline { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.fmark { stroke-width: 0; }
.fline.fs0 { stroke: #1b2433; } .fmark.fs0 { fill: #1b2433; }
.fline.fs1 { stroke: #2f5fe0; } .fmark.fs1 { fill: #2f5fe0; }
.fline.fs2 { stroke: #d0492b; } .fmark.fs2 { fill: #d0492b; }
.fline.fs3 { stroke: #2a9d5c; } .fmark.fs3 { fill: #2a9d5c; }

/* liquids + matter */
.lq-water { fill: var(--fig-water); stroke: none; }
.lq-red { fill: #f3b3b6; stroke: none; }
.lq-blue { fill: #aec8f2; stroke: none; }
.lq-oil { fill: #f6dc8a; stroke: none; }
.lq-soapy { fill: #deebf7; stroke: none; }
.lq-milky { fill: #eceff2; stroke: none; }
.fice { fill: #eef8fd; stroke: #7fb5d8; stroke-width: 1.2; }
.fbubble { fill: #fff; stroke: var(--fig-water-edge); stroke-width: 1; }
.fsteam { fill: none; stroke: #9aa7b5; stroke-width: 1.5; stroke-linecap: round; }
.fsoil { fill: var(--fig-soil); stroke: none; }
.fsoilline { fill: none; stroke: #8a6a44; stroke-width: 1.6; }
.fsand { fill: #ecd9a9; stroke: none; }
.fsolid { fill: #d6dce3; stroke: var(--fig-ink); stroke-width: 1.6; }
.fstone { fill: #c7ccd3; stroke: var(--fig-ink); stroke-width: 1.4; }
.fmetal { fill: #d8dee6; stroke: var(--fig-ink); stroke-width: 1.4; }
.fmetalv { stroke-width: 2; }
.fdarkf { fill: #56606e; stroke: none; }
.fballoon { fill: #f7c2cf; stroke: var(--fig-ink); stroke-width: 1.5; }
.fcloth { fill: #e8e0f3; stroke: var(--fig-ink); stroke-width: 1.4; }
.fstopper { fill: #8a6a44; stroke: var(--fig-ink); stroke-width: 1.4; }
.fcotton { fill: #fff; stroke: #aeb8c2; stroke-width: 1; }
.fbox { fill: #2b3441; fill-opacity: .84; stroke: var(--fig-ink); stroke-width: 1.6; }
.fbag { fill: rgba(211, 232, 246, .25); stroke: var(--fig-water-edge); stroke-width: 1.5; stroke-dasharray: 5 3; }
.fflame { fill: #ffb347; stroke: #e0701f; stroke-width: 1.2; }
.fmercury { fill: #d9434e; stroke: none; }
.fray { stroke: #e8b300; stroke-width: 1.5; stroke-dasharray: 4 3; fill: none; }
.fray-k { stroke: #b48700; stroke-dasharray: none; stroke-width: 1.3; }
.fwind { fill: none; stroke: var(--fig-water-edge); stroke-width: 1.6; stroke-linecap: round; }

/* living */
.fstem { fill: none; stroke: #3d8b54; stroke-width: 3; stroke-linecap: round; }
.fstemdye { stroke: #c4414b; }
.fleaf { fill: var(--fig-leaf); stroke: var(--fig-leaf-edge); stroke-width: 1.4; stroke-linejoin: round; }
.fwilt { fill: #d9d7a6; }
.fleafline { fill: none; stroke: var(--fig-leaf-edge); stroke-width: 1; }
.fvein-dye { fill: none; stroke: #c4414b; stroke-width: 1.5; }
.fseed { fill: #c9a06a; stroke: #6b4b22; stroke-width: 1; }
.fanimal { fill: #f4e3c1; stroke: var(--fig-ink); stroke-width: 1.4; }
.froot { fill: none; stroke: #8a6a44; stroke-width: 2.2; stroke-linecap: round; }
.fswell { fill: #9fd3a8; stroke: var(--fig-leaf-edge); stroke-width: 1.4; }
.fringcut { fill: #f1e6c9; stroke: #8a6a44; stroke-width: 1; }
.fpetal { fill: #f6c7d7; stroke: #b0476e; stroke-width: 1.4; }
.fanther { fill: #f4d35e; stroke: #8a6a00; stroke-width: 1.3; }
.fovary { fill: #cdebc4; stroke: var(--fig-leaf-edge); stroke-width: 1.5; }
.fovule { fill: #fff; stroke: var(--fig-leaf-edge); stroke-width: 1.2; }
.fstigma { fill: #e7c35a; stroke: #8a6a00; stroke-width: 1.3; }
.fstain-yes { fill: #2e3a5a; stroke: var(--fig-ink); stroke-width: 1.4; }
.fstain-no { fill: #e9d8a6; stroke: none; }
.fvariegate { fill: #f8f8ea; stroke: none; }
.fstrip { fill: #1b2433; stroke: none; }
.fstripghost { fill: none; stroke: #7d8898; stroke-width: 1.2; stroke-dasharray: 4 3; }
.fleafbig { stroke-width: 1.8; }
.fbody { fill: #fbf0e8; stroke: var(--fig-ink); stroke-width: 1.6; }
.ftube { fill: #f3cdbd; stroke: #b0634d; stroke-width: 1.2; }
.flung { fill: #f7cad0; stroke: #b0476e; stroke-width: 1.5; }
.fheart { fill: #e0525e; stroke: #8c1f2a; stroke-width: 1.4; }
.fvessel { fill: none; stroke: #d6404c; stroke-width: 2; }
.fvessel2 { fill: none; stroke: #4c6fd6; stroke-width: 2; }
.fmouth { fill: #e58b8b; stroke: var(--fig-ink); stroke-width: 1.2; }
.fstomach { fill: #f3c9a6; stroke: #9a5a2a; stroke-width: 1.5; }
.fbowel { fill: none; stroke: #e7bb8e; stroke-linecap: round; stroke-linejoin: round; }
.fsmallint { fill: none; stroke: #d98a6a; stroke-linecap: round; stroke-linejoin: round; }
.fegg { fill: #fff8e6; stroke: var(--fig-ink); stroke-width: 1.3; }
.fspawn { fill: #e3f1f8; stroke: var(--fig-water-edge); stroke-width: 1.2; }
.flarva { fill: #d9e8b0; stroke: #5c7a2a; stroke-width: 1.3; }
.fpupa { fill: #e6d2a8; stroke: #7a5a2a; stroke-width: 1.3; }
.fwing { fill: #f7e3a1; stroke: var(--fig-ink); stroke-width: 1.2; }
.fshell { fill: #a57a52; stroke: var(--fig-ink); stroke-width: 1.2; }
.fchick { fill: #fbe38a; stroke: #8a6a00; stroke-width: 1.3; }
.fbeak { fill: #f0a33c; stroke: none; }
.fcomb { fill: #e0525e; stroke: none; }
.fwater { stroke: var(--fig-water-edge); stroke-width: 1.4; stroke-dasharray: 3 3; }
.fstage { fill: #fff; stroke: #c3ccd7; stroke-width: 1.2; }
.fwingseed { fill: #eeddb6; stroke: #7a5a2a; stroke-width: 1.2; }
.fhusk { fill: #c9a57a; stroke: #6b4b22; stroke-width: 1.4; }
.fshellin { fill: #8a6a44; stroke: none; }
.ffruit { fill: #f29e9e; stroke: #9a3a3a; stroke-width: 1.4; }
.fflesh { fill: #fff3e0; stroke: none; }
.fpod { fill: var(--fig-leaf); stroke: var(--fig-leaf-edge); stroke-width: 1.3; }
.fhl { fill: var(--fig-hl) !important; }
.fhlbox { fill: var(--fig-hl); }
.fqbox { fill: #f3f6fa; }
.fvenn { fill-opacity: .1; stroke: var(--fig-ink); stroke-width: 1.6; }
.fvenn0 { fill: #2f5fe0; } .fvenn1 { fill: #ea5b1f; } .fvenn2 { fill: #2a9d5c; }
.fland { fill: #dbe7cb; stroke: #6b8a4a; stroke-width: 1.4; }
.friver { fill: none; stroke: var(--fig-water-edge); stroke-linecap: round; }
.fsun { fill: #ffd54a; stroke: #c99a00; stroke-width: 1.4; }
.fsunray { stroke: #e8b300; stroke-width: 2; stroke-linecap: round; }
.fcloud { fill: #fff; stroke: #8a96a6; stroke-width: 1.5; }
.frain { stroke: var(--fig-water-edge); stroke-width: 1.6; stroke-linecap: round; }

/* physics */
.fumbra { fill: rgba(27, 36, 51, .1); stroke: none; }
.fshadow { fill: #1b2433; stroke: none; }
.fshadowshape { fill: #2b3441; stroke: none; }
.fspring { fill: none; stroke: var(--fig-ink); stroke-width: 1.8; stroke-linejoin: round; }
.fmass { fill: #e9dbbc; stroke: var(--fig-ink); stroke-width: 1.6; }
.fsupport { fill: #b9c2cd; stroke: var(--fig-ink); stroke-width: 1.4; }
.framp { fill: #eef2f5; stroke: none; }
.fshine { stroke: #9fc6e0; stroke-width: 1.4; }
.fwheel { fill: #3a4452; stroke: none; }
.fpoleN { fill: #f3b9b9; stroke: none; }
.fpoleS { fill: #b9cbf3; stroke: none; }
.fpoleQ { fill: #e4e7eb; stroke: none; }
.fclip { fill: none; stroke: #5d6875; stroke-width: 1.5; }
.fthread { fill: none; stroke: var(--fig-ink); stroke-width: 1.2; }
.fwood { fill: #dab98b; stroke: var(--fig-ink); stroke-width: 1.4; }
.fringmag { fill: #c9cfd8; stroke: var(--fig-ink); stroke-width: 1.5; }
.fcoil { fill: none; stroke: #b8651f; stroke-width: 1.6; }
.fwire { fill: none; stroke: var(--fig-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fbattery { fill: #e6e9ee; stroke: var(--fig-ink); stroke-width: 1.6; }
.flcd { fill: #dde8d2; stroke: var(--fig-ink); stroke-width: 1.4; }
.fglow { fill: var(--fig-glow); opacity: .75; }
.fglow-dim { opacity: .38; }
.fglow-bright { opacity: .95; }
.fplate { stroke: var(--fig-ink); stroke-width: 1.8; stroke-linecap: butt; }
.fplate-thick { stroke-width: 4.4; }
.fobject { stroke: #8a6a44; stroke-width: 6; stroke-linecap: round; }
.fhit { fill: transparent; stroke: none; }
.fsw-i { cursor: pointer; }
.fsw-i:hover .fswlever { stroke: var(--t-sys, #2f5fe0); }
.fswlever { transition: all .18s ease; }

@media (prefers-reduced-motion: no-preference) {
  .fsteam { animation: fsteam 2.4s ease-in-out infinite; }
  @keyframes fsteam { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: .9; transform: translateY(-3px); } }
}
.fhen { fill: #fffdf8; stroke: var(--fig-ink); stroke-width: 1.3; }
.fgullet { fill: none; stroke: #d9957d; stroke-width: 6; stroke-linecap: round; }
.fig-scroll { align-items: stretch; }
.fig-sx { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fig-sx .figsvg { margin: 0 auto; }