/* Interactive figures (js/figures/*.js). One heading per figure. */

/* ───────── Shared tile ───────── */
.tile{position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;padding:0;
  background:var(--paper-hi);border:1px solid rgba(43,45,47,.26);border-radius:3px;color:var(--graphite);
  font-variant-numeric:tabular-nums lining-nums;line-height:1;will-change:transform;corner-shape:squircle;
  transition:transform .8s var(--spring),opacity .55s var(--ease),border-color .3s,color .3s,background-color .3s,box-shadow .3s}
@supports (corner-shape:squircle){ .tile{border-radius:7px} }
.tile.is-new{border-color:var(--ink);color:var(--ink)}
/* tinted tiles carry their own pigment in --c (by value, or by which list they came from) */
.tile.tinted{background-color:color-mix(in srgb,var(--c) 26%,var(--paper-hi));border-color:color-mix(in srgb,var(--c) 60%,transparent);color:color-mix(in srgb,var(--c) 70%,black)}
.tile.tinted.is-new{background-color:color-mix(in srgb,var(--c) 34%,var(--paper-hi));border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 18%,transparent)}
.tile.tinted.is-old{background-color:color-mix(in srgb,var(--c) 15%,var(--paper-hi));border-color:color-mix(in srgb,var(--c) 35%,transparent);color:color-mix(in srgb,var(--c) 60%,var(--graphite-2))}

/* ───────── area-model (2.1) ───────── */
.area svg{display:block;width:100%;max-width:560px;height:auto;margin:0 auto;overflow:visible;font-family:var(--f-text)}
.area text{fill:var(--graphite);font-variant-numeric:lining-nums}
.area .outer{fill:none;stroke:var(--graphite);stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s var(--ease),stroke .5s,stroke-width .5s}
.area.drawn .outer{stroke-dashoffset:0}
.area .split{stroke:var(--graphite);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--ease),opacity .5s}
.area.ge1 .split{stroke-dashoffset:0}
.area .blk{transition:transform .8s var(--ease),opacity .6s var(--ease)}
/* colour = place value: high×high viridian, the two middle pieces ochre, low×low plum */
.area .blk rect{fill-opacity:0;filter:url(#wash);transition:fill-opacity .7s var(--ease)}
.area .tl rect{fill:var(--viridian)} .area .tr rect,.area .bl rect{fill:var(--ochre)} .area .br rect{fill:var(--plum)}
.area.ge2 .blk rect{fill-opacity:.2}
.area.ge2 .tl .val{fill:var(--viridian)} .area.ge2 .tr .val,.area.ge2 .bl .val{fill:var(--ochre-text)} .area.ge2 .br .val{fill:var(--plum)}
.area .lbl{opacity:0;transition:opacity .5s var(--ease)}
.area.at0 .whole,.area.at0 .qmark{opacity:1}
.area.ge1:not(.ge3) .pvs{opacity:1}
.area.ge3 .dgs{opacity:1}
.area.ge2:not(.ge3) .blk .pv{opacity:1}
.area.ge3 .blk .dg{opacity:1}
.area .side{font-size:17px;fill:var(--graphite-2)}
.area .side.whole{font-size:19px;fill:var(--graphite)}
.area .qmark{font-size:64px;font-weight:300;fill:var(--graphite-3)}
.area .op{font-family:var(--f-ui);font-size:13px;fill:var(--graphite-2)}
.area .val{font-size:26px;font-weight:350}
.area .pn{font-family:var(--f-ui);font-size:13px;fill:var(--graphite-2);opacity:0;transition:opacity .5s}
.area .tl .pn{fill:var(--viridian)} .area .br .pn{fill:var(--plum)}
.area.ge3 .pn.p12{opacity:1}
.area.at3 .pn.p3,.area.at4 .pn.p3{opacity:1;fill:var(--ink)}
.area.at3 .outer{stroke:var(--ink);stroke-width:2.6}
.area.at3 .blk rect{fill-opacity:.12}
.area.at3 .tl rect,.area.at3 .br rect{fill-opacity:.26}
.area.at4 .tl{transform:translate(-18px,-18px);opacity:.3}
.area.at4 .br{transform:translate(18px,18px);opacity:.3}
.area.at4 .tr rect,.area.at4 .bl rect{fill-opacity:.42}
.area.at5 .tr rect,.area.at5 .bl rect{fill-opacity:.32}
.area.hl-corners .tl rect,.area.hl-corners .br rect{fill-opacity:.5}
.area.hl-middle .tr rect,.area.hl-middle .bl rect{fill-opacity:.55}
.area-foot{max-width:560px;margin:18px auto 0;min-height:4.2em;text-align:center}
.area.area-scrub .outer,.area.area-scrub .split,.area.area-scrub .blk,.area.area-scrub .blk rect,.area.area-scrub .lbl,.area.area-scrub .pn,.area.area-scrub .area-tally-dot{transition:none}
.area.area-scrub .blk rect{fill-opacity:var(--wash-strength,0)}
.area.area-scrub.hl-corners .tl rect,.area.area-scrub.hl-corners .br rect{fill-opacity:.5}
.area.area-scrub.hl-middle .tr rect,.area.area-scrub.hl-middle .bl rect{fill-opacity:.55}
.area.area-scrub .tl .val{fill:var(--viridian)}
.area.area-scrub .tr .val,.area.area-scrub .bl .val{fill:var(--ochre-text)}
.area.area-scrub .br .val{fill:var(--plum)}
.area.area-scrub .pn.p3{fill:var(--ink)}
.area-eq{display:grid}
.area-eq-step{grid-area:1/1;align-self:center;opacity:0}
.area-eq{font-size:19px;line-height:1.5}
.area-tally{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:10px;font-family:var(--f-ui);font-size:14px;color:var(--graphite-2)}
.area-tally-dot{position:static;display:block;flex:none;width:9px;height:9px;border-radius:50%;background:var(--graphite);transition:background .4s,box-shadow .4s,transform .4s var(--ease)}
.area-tally-label{margin-left:6px}
@media (min-width:1360px){ .area svg,.area-foot{max-width:620px} }
@media (max-width:860px), (hover:none) and (pointer:coarse){ .area svg{max-width:330px} .area-foot{min-height:3.4em;margin-top:8px} .area-eq{font-size:16px} }

/* ───────── recursion-explorer (2.2) ───────── */
.explorer{border-top:1px solid var(--rule);padding-top:2.2rem}
.formula{font-size:clamp(26px,3vw,36px);font-weight:300;letter-spacing:-.01em;line-height:1.3;margin-bottom:.35rem}
.formula sup{font-size:.58em;vertical-align:.75em;line-height:0}
.presets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1.6rem}
.tree-svg{display:block;width:100%;height:auto;overflow:visible;font-family:var(--f-ui)}
.tree-svg .e{stroke:var(--graphite-3);stroke-width:.7;opacity:0;animation:grow .5s var(--ease) forwards;animation-delay:calc(var(--k) * 90ms)}
.tree-svg .nd{opacity:0;animation:grow .5s var(--ease) forwards;animation-delay:calc(var(--k) * 90ms + 40ms)}
@keyframes grow{to{opacity:1}}
.tree-svg .lvtxt{font-size:13px;fill:var(--graphite-2)}
.tree-svg .lvval{font-size:13px;fill:var(--graphite);font-variant-numeric:tabular-nums}
.tree-svg .bar{opacity:.4;transition:width .6s var(--ease),opacity .4s}
.tree-svg .bar.top{opacity:1}
.tree-svg .track{fill:var(--rule);opacity:.5}
.tree-svg .depth{font-size:12px;fill:var(--graphite-3)}
.verdict{margin-top:1.3rem;font-size:20px;line-height:1.55;max-width:40rem;min-height:3.2em}
.verdict b{font-weight:500;color:var(--ink)}
.verdict small{font-family:var(--f-ui);color:var(--graphite-2);font-size:.75em}
/* the master theorem's three cases, lit live by the tree */
.cases-live{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:1.4rem}
.case{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;column-gap:12px;row-gap:2px;align-items:center;text-align:left;
  padding:14px 16px;border:0;border-radius:20px;background:color-mix(in srgb,var(--paper-hi) 60%,transparent);box-shadow:inset 0 0 0 1px var(--rule);cursor:pointer;
  font:inherit;color:var(--graphite-2);transition:background-color .35s var(--ease),box-shadow .35s var(--ease),color .3s,transform .18s var(--ease);corner-shape:squircle}
.case svg{grid-row:1 / span 3;width:30px;height:20px;align-self:start;margin-top:4px}
.case rect{fill:var(--graphite-3);transition:fill .3s}
.case .c-name{font-family:var(--f-ui);font-weight:600;font-size:14.5px;color:var(--graphite)}
.case .c-law{font-size:19px;color:var(--graphite)}
.case .c-when{font-size:14.5px;line-height:1.4}
.case.on{background:var(--paper-hi);box-shadow:inset 0 0 0 1.5px var(--ink),0 14px 30px -22px rgba(45,75,142,.6);color:var(--graphite)}
.case.on rect{fill:var(--ink)} .case.on .c-name,.case.on .c-law{color:var(--ink)}
.case:active{transform:scale(.98)}
@media (max-width:760px){ .cases-live{grid-template-columns:1fr} }

/* ───────── merge-diamond (2.3) ───────── */
.merge-box{position:relative;margin:0 auto}
.m-ann{position:absolute;font-family:var(--f-ui);font-size:13.5px;color:var(--graphite-2);opacity:0;transition:opacity .6s var(--ease);white-space:nowrap;line-height:1.2}
.mergestage.ann .m-ann{opacity:1}
.merge-scrub .tile,.merge-scrub .m-ann{transition:none}
.merge-scrub .m-ann{font-size:12px;line-height:1.25;white-space:normal}
.m-brk{position:absolute;border:1px solid var(--graphite-3);border-right:0;width:9px;border-radius:2px 0 0 2px}
.m-ann.right{color:var(--ink)}

/* ───────── merge-game (2.3) ───────── */
.mgame{border-top:1px solid var(--rule);padding-top:2.2rem;max-width:62rem;margin-bottom:2rem}
.mg-wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:start}
.mg-stage{position:relative;margin:1.4rem 0 .6rem}
.mg-stage .tile{cursor:default}
.mg-stage .tile.front{cursor:pointer}
.mg-stage .tile.front:hover{border-color:var(--ink);box-shadow:0 0 0 5px var(--ink-soft)}
.mg-stage .tile.wrong{border-color:var(--red);color:var(--red);animation:nope .4s}
@keyframes nope{25%{translate:-4px 0}75%{translate:4px 0}}
.mg-row{position:absolute;left:0;font-style:italic;font-size:17px}
.mg-row.x{color:var(--viridian)} .mg-row.y{color:var(--madder)} .mg-row.z{color:var(--graphite-2)}
@media (max-width:960px){ .mg-wrap{grid-template-columns:1fr} }

/* ───────── sort-bound (2.3) ───────── */
.bound{border-top:1px solid var(--rule);padding-top:2.2rem;max-width:52rem}
.bound-line{font-size:20px;line-height:1.6}
.bound-line b{font-weight:600;font-variant-numeric:tabular-nums}
.bound-svg{display:block;width:100%;height:auto;margin:6px 0 4px;overflow:visible}
.b-axis{stroke:var(--rule)}
.b-ms,.b-low{fill:none;stroke-width:2;stroke-linejoin:round}
.b-ms{stroke:var(--madder)} .b-low{stroke:var(--ink);stroke-dasharray:5 4}
.b-lab{font-family:var(--f-ui);font-size:12.5px;font-weight:600}
.b-lab.ms{fill:var(--madder)} .b-lab.low{fill:var(--ink)}
.b-tick{font-family:var(--f-ui);font-size:11.5px;fill:var(--graphite-3)}
.b-now{stroke:var(--graphite-3);stroke-dasharray:2 3}
.b-dot.ms{fill:var(--madder)} .b-dot.low{fill:var(--ink)}
.b-slide{max-width:calc(100% * 544 / 640)}

/* ───────── roman-numerals (0.1) ───────── */
.roman{--spread:0;--grid:0;max-width:520px;margin:0 auto;text-align:center;font-variant-numeric:tabular-nums lining-nums}
.rn-roman{display:flex;justify-content:center;gap:calc(var(--spread) * 16px);flex-wrap:wrap;transition:opacity .5s var(--ease)}
.roman.dim-roman .rn-roman{opacity:.38}
.rn-g{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px calc(var(--spread) * 7px) 4px;border-radius:12px;transition:background-color .4s var(--ease),box-shadow .4s var(--ease)}
.rn-sym{display:flex;gap:3px}
.rn-sym b{font-weight:400;font-size:38px;letter-spacing:.02em;color:var(--graphite)}
.rn-val,.rn-how{font-family:var(--f-ui);opacity:0;transform:translateY(-6px);transition:opacity .4s var(--ease),transform .5s var(--spring)}
.rn-val{font-size:15px;color:var(--graphite)}
.rn-how{font-size:11.5px;color:var(--graphite-3);min-height:1.2em}
.rn-g.read .rn-val,.rn-g.read .rn-how{opacity:1;transform:none}
.rn-g.sub.read{background:color-mix(in srgb,var(--hl-solid) 22%,transparent)}
.rn-g.hl-hit{background:var(--hl-solid);box-shadow:0 0 0 4px var(--hl)}
.rn-eq{font-size:19px;min-height:1.6em;margin:16px 0 8px;font-variant-numeric:tabular-nums}
.rn-eq b{font-weight:600}
.rn-grid{display:inline-grid;gap:4px;opacity:var(--grid);transform:translateY(calc((1 - var(--grid)) * 10px))}
.rn-row{display:grid;grid-template-columns:22px repeat(4,64px);align-items:center}
.rn-plus{font-size:26px;color:var(--graphite-2)}
.rn-d{font-size:34px;font-weight:350;min-height:1.2em}
.rn-places .rn-d{font-family:var(--f-ui);font-size:12px;color:var(--graphite-3);min-height:0}
.rn-d.a,.rn-d.b,.rn-d.s{opacity:0;transform:translateY(-14px);transition:opacity .35s var(--ease),transform .5s var(--spring),color .3s}
.rn-d.in{opacity:1;transform:none}
.rn-carry .rn-d{font-family:var(--f-ui);font-size:14px;font-weight:600;color:var(--ink);height:18px;min-height:0;opacity:0;transform:translate(36px,22px);transition:opacity .35s var(--ease),transform .55s var(--spring),background-color .3s}
.rn-carry .rn-d.in{opacity:1;transform:none}
.rn-carry .rn-d.hl-hit{background:var(--hl-solid);border-radius:6px}
.rn-s{border-top:1.5px solid var(--graphite);padding-top:2px;transition:border-color .4s}
.roman:not(.adding) .rn-s{border-color:transparent}
.rn-s .rn-d{color:var(--ink)}
.rn-s .rn-d.now{color:var(--ink);text-shadow:0 0 0 currentColor}
.roman:not(.adding) .rn-plus{opacity:0}
.rn-plus{transition:opacity .4s}
@media (max-width:860px), (hover:none) and (pointer:coarse){ .rn-sym b{font-size:28px} .rn-row{grid-template-columns:18px repeat(4,54px)} .rn-d{font-size:26px} .rn-places .rn-d{font-size:9.5px} .rn-eq{font-size:16px;margin:10px 0 6px} }

/* ───────── fib-tree (0.2) ───────── */
.fibt-svg{display:block;width:100%;max-width:580px;height:auto;margin:0 auto;overflow:visible;font-family:var(--f-ui)}
.ft-tree,.ft-row{will-change:opacity,transform}
.ft-row{transform-box:fill-box;transform-origin:center}
.ft-e{stroke:var(--graphite-3);stroke-width:1;opacity:0;transition:opacity .3s var(--ease)}
.ft-e.shown{opacity:1}
.ft-n{opacity:0;transition:opacity .3s var(--ease)}
.ft-n.shown{opacity:1}
.ft-n circle{fill:var(--paper-hi);stroke:var(--graphite-3);stroke-width:1.2;transition:fill .35s var(--ease),stroke .35s,stroke-width .35s,r .35s var(--spring)}
.ft-n text{font-size:12.5px;fill:var(--graphite);font-variant-numeric:tabular-nums;transition:fill .35s}
.ft-n.act circle{stroke:var(--ink);stroke-width:2.2;fill:color-mix(in srgb,var(--ink) 9%,var(--paper-hi));r:14px}
.ft-n.act text{fill:var(--ink)}
/* ochre = a call whose answer was already computed somewhere else */
.ft-n.repeat circle{fill:color-mix(in srgb,var(--ochre) 26%,var(--paper-hi));stroke:var(--ochre)}
.ft-n.repeat text{fill:var(--ochre-text)}
.ft-n.hl-hit circle{fill:var(--hl-solid);stroke:var(--hl-text);stroke-width:2;r:14px}
.ft-n.hl-hit text{fill:var(--graphite)}
.ft-cell{opacity:0;transition:opacity .35s var(--ease)}
.ft-cell.shown{opacity:1}
.ft-cell rect{fill:var(--paper-hi);stroke:var(--rule);stroke-width:1.2;transition:stroke .3s,fill .3s,stroke-width .3s}
.ft-cell.src rect{stroke:var(--hl-solid);fill:color-mix(in srgb,var(--hl-solid) 16%,var(--paper-hi))}
.ft-cell.newest rect{stroke:var(--ink);stroke-width:2}
.ft-cell.newest .ft-v{fill:var(--ink)}
.ft-v{font-family:var(--f-text);font-size:17px;fill:var(--graphite);font-variant-numeric:tabular-nums;transition:fill .3s}
.ft-lab{font-size:11.5px;fill:var(--graphite-3);transition:opacity .4s}
.ft-lab.arr,.ft-cell.array .ft-lab.seq{opacity:0}
.ft-cell.array .ft-lab.arr{opacity:1}
.ft-arc{fill:none;stroke:var(--ink);stroke-width:1.2;opacity:0;transition:opacity .3s var(--ease)}
.ft-arc.on{opacity:1}
.ft-foot{text-align:center;font-size:18px;min-height:1.6em;margin:16px 0 0;font-variant-numeric:tabular-nums}
.ft-foot b{font-weight:600}
@media (max-width:860px), (hover:none) and (pointer:coarse){ .fibt-svg{max-width:360px} .ft-foot{font-size:15.5px;margin-top:8px} }

/* ───────── fib-race (0.2) ───────── */
.race{border-top:1px solid var(--rule);padding-top:2.2rem;max-width:52rem}
.race-line{font-size:20px;line-height:1.6}
.race-line b{font-weight:600;font-variant-numeric:tabular-nums}
.race-svg{display:block;width:100%;height:auto;margin:6px 0 4px;overflow:visible}
.r-axis{stroke:var(--rule)}
.r-mark{stroke:var(--graphite-3);stroke-dasharray:2 4;transition:stroke .4s,stroke-width .4s}
.r-mlab{transition:fill .4s}
.r-markg.passed .r-mark{stroke:var(--madder);stroke-width:1.3;stroke-dasharray:none}
.r-markg.passed .r-mlab{fill:var(--madder);font-weight:600}
.r-p1.ghost,.r-p2.ghost{opacity:.18}

.r-mlab,.r-tick{font-family:var(--f-ui);font-size:11.5px;fill:var(--graphite-2)}
.r-tick{fill:var(--graphite-3)}
.r-p1,.r-p2{fill:none;stroke-width:2.2;stroke-linejoin:round}
.r-p1{stroke:var(--madder)} .r-p2{stroke:var(--viridian)}
.r-lab{font-family:var(--f-ui);font-size:12.5px;font-weight:600}
.r-lab.f1{fill:var(--madder)} .r-lab.f2{fill:var(--viridian)}
.r-now{stroke:var(--graphite-3);stroke-dasharray:2 3}
.r-dot.f1{fill:var(--madder)} .r-dot.f2{fill:var(--viridian)}
@media (max-width:860px), (hover:none) and (pointer:coarse){ .race-line{font-size:17.5px} }

/* ───────── growth-compare (0.3) ───────── */
.gc{max-width:560px;margin:0 auto}
.gc-svg{display:block;width:100%;height:auto;overflow:visible;font-family:var(--f-ui)}
.gc-layer,.gc-axes{will-change:opacity}
.gc-axis{stroke:var(--graphite-3);stroke-width:.8}
.gc-tick{font-size:11px;fill:var(--graphite-3);font-variant-numeric:tabular-nums}
.gc-ylab{font-family:var(--f-text);font-size:15px;color:var(--graphite-2);line-height:1.35;min-height:1.4em;margin:0 0 6px}
.gc-read{font-family:var(--f-text);font-size:16px;color:var(--graphite-2);text-align:center;min-height:1.5em;margin:10px 0 0;font-variant-numeric:tabular-nums}
.gc-read b{font-weight:600}
.gc-foot{text-align:center;font-size:19px;min-height:1.6em;margin:4px 0 0}
.fade-in{animation:fadeIn .4s var(--ease)}
@keyframes fadeIn{from{opacity:0;transform:translateY(3px)}}
/* the terms of 5n³ + 4n + 3: tinted, like the tiles, not solid blocks */
.gc-nbig{font-family:var(--f-text);font-size:24px;fill:var(--graphite);font-variant-numeric:tabular-nums}
.gc-track{fill:var(--paper-lo)}
.gc-seg{stroke-width:1}
.gc-seg.lead{fill:color-mix(in srgb,var(--ink) 22%,var(--paper-hi));stroke:color-mix(in srgb,var(--ink) 55%,transparent)}
.gc-seg.low{fill:color-mix(in srgb,var(--ochre) 30%,var(--paper-hi));stroke:color-mix(in srgb,var(--ochre) 60%,transparent)}
.gc-seg.low2{fill:color-mix(in srgb,var(--ochre) 18%,var(--paper-hi));stroke:color-mix(in srgb,var(--ochre) 45%,transparent)}
.gc-term,.gc-tval,.gc-tpct{font-family:var(--f-text);font-size:15px;font-variant-numeric:tabular-nums}
.gc-term.lead,.gc-tval.lead,.gc-tpct.lead{fill:var(--ink)}
.gc-term.low,.gc-tval.low,.gc-tpct.low{fill:var(--ochre-text)}
.gc-tpct{font-family:var(--f-ui);font-size:13px}
.sup{font-size:70%}
.gc-line{fill:none;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.gc-line.mad{stroke:var(--madder)} .gc-line.vir{stroke:var(--viridian)} .gc-line.plum{stroke:var(--plum)} .gc-line.ink{stroke:var(--ink)}
.gc-dot{stroke:var(--paper);stroke-width:2}
.gc-dot.mad{fill:var(--madder)} .gc-dot.vir{fill:var(--viridian)} .gc-dot.ink{fill:var(--ink)}
.gc-flab{font-family:var(--f-text);font-size:16px}
.gc-flab.mad{fill:var(--madder)} .gc-flab.vir{fill:var(--viridian)}
.gc-small{fill:color-mix(in srgb,var(--hl-solid) 16%,transparent);transition:fill .3s}
.gc-c{stroke:var(--graphite-2);stroke-width:1;stroke-dasharray:4 4;transition:stroke .3s,stroke-width .3s}
.gc-clab{font-size:11.5px;fill:var(--graphite-2);transition:fill .3s}
.gc-band{fill:color-mix(in srgb,var(--plum) 7%,transparent)}
.gc-c.edge{stroke:color-mix(in srgb,var(--plum) 45%,transparent);stroke-dasharray:none}
.gc-cross{fill:var(--hl-solid);stroke:var(--paper);stroke-width:2}
.gc-one{stroke:var(--graphite-3);stroke-dasharray:2 3}
/* highlighted from the text */
.gc-small.hl-hit{fill:color-mix(in srgb,var(--hl-solid) 45%,transparent)}
.gc-c.hl-hit{stroke:var(--hl-text);stroke-width:2.6;stroke-dasharray:none}
.gc-clab.hl-hit{fill:var(--hl-text);font-weight:600}
.gcfree{border-top:1px solid var(--rule);padding-top:2.2rem;max-width:56rem}
.gc-pick{display:flex;align-items:baseline;gap:12px;margin:0 0 10px}
.gc-plab{flex:0 0 3.6em;font-size:18px;white-space:nowrap}
.gc-chips{display:flex;flex-wrap:wrap;gap:6px}
.gc-chips .chip{font-family:var(--f-text);font-size:15px;padding:3px 12px}
.gcfree .gc-svg{margin:4px 0 4px;max-width:640px}
.gc-ratio{margin:16px 0 0}
.gc-cards .case{display:block;cursor:default}
.gc-cards .c-name{margin-right:8px}
.gc-cards .c-when{display:block;margin-top:4px}
.gc-cards .c-law{font-size:15px;color:var(--graphite-2)}
.gc-presets{margin:1.2rem 0 0}
@media (max-width:860px), (hover:none) and (pointer:coarse){ .gc-foot{font-size:15.5px} .gc-read{font-size:14px;margin-top:4px} .gc-ylab{font-size:13px} .gc-plab{flex-basis:3em;font-size:16px} .gc-chips .chip{font-size:14px;padding:3px 10px} }
/* Number arithmetic: persistent cells, clock hands, strips and call rows. */
.ns-svg,.number-trace{display:block;width:100%;overflow:hidden;font-family:var(--f-text)}
.ns-svg text,.number-trace text{font-size:23px;fill:var(--graphite);font-weight:500}
.ns-svg line{stroke:var(--rule);stroke-width:1.5}
.ns-svg rect,.number-trace rect{fill:color-mix(in srgb,var(--graphite) 4%,transparent);stroke:var(--rule);stroke-width:1}
.ns-svg .ns-small{font:18px var(--f-ui);fill:var(--graphite-2)}
.ns-svg .ns-muted{fill:var(--graphite-3)}
.ns-svg .ns-answer{fill:var(--ink)}
.ns-svg .ns-cursor{fill:color-mix(in srgb,var(--hl-solid) 12%,transparent);stroke:var(--hl-solid)}
.ns-svg .ns-carry rect,.ns-svg .ns-selected{fill:color-mix(in srgb,var(--ink) 8%,transparent);stroke:var(--ink)}
.ns-svg .ns-carry text{fill:var(--ink)}
.ns-svg .ns-ring{fill:none;stroke:var(--rule);stroke-width:2}
.ns-svg .ns-hand{stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.ns-svg .ns-dot{fill:var(--ink)}
.ns-svg .ns-quiet-dot{fill:var(--graphite-3)}
.ns-svg .ns-divisor{fill:color-mix(in srgb,var(--viridian) 12%,transparent);stroke:var(--viridian)}
.ns-svg .ns-remainder{fill:color-mix(in srgb,var(--ink) 12%,transparent);stroke:var(--ink)}
.ns-svg .ns-strike{stroke:var(--graphite-2)}
.ns-svg .ns-residue-0 rect{fill:color-mix(in srgb,var(--viridian) 10%,transparent)}
.ns-svg .ns-residue-1 rect{fill:color-mix(in srgb,var(--ochre) 10%,transparent)}
.ns-svg .ns-residue-2 rect{fill:color-mix(in srgb,var(--plum) 10%,transparent)}
.ns-svg .hl-hit rect,.ns-svg rect.hl-hit{fill:var(--hl);stroke:var(--hl-solid);stroke-width:2}
.ns-svg circle.hl-hit{fill:var(--hl-solid);stroke:var(--hl-text);stroke-width:3}
.ns-svg .hl-hit text{fill:var(--ink);stroke:var(--hl);stroke-width:5px;paint-order:stroke}
.ns-svg .ns-map{font-size:20px}
.number-scene .ns-caption{min-height:4.8em;margin:18px auto 0;max-width:440px;text-align:center;font-size:17px;line-height:1.45;color:var(--graphite-2)}
.number-trace .nt-note{font-size:20px;fill:var(--graphite-2)}
.number-trace .nt-active rect{stroke:var(--ink);fill:color-mix(in srgb,var(--ink) 8%,transparent)}
.number-trace .nt-active text{fill:var(--ink)}
.ns-explorer{max-width:600px;margin:auto}
.ns-controls{display:flex;justify-content:center;margin-bottom:20px;font:15px var(--f-ui)}
.ns-explorer .ns-svg g{transition:transform .25s var(--ease),opacity .25s var(--ease)}
.ns-explorer .ns-inverse rect{fill:var(--hl);stroke:var(--hl-solid)}
.number-path{border-left:1px solid var(--rule);padding-left:18px;display:grid;gap:15px}
.np-card{position:relative;padding:12px;border:1px solid var(--rule);border-radius:9px;opacity:.22;overflow-wrap:anywhere}
.np-card::before{content:'';position:absolute;left:-23px;top:20px;width:7px;height:7px;border-radius:50%;background:var(--graphite-3)}
.np-card.np-current{opacity:.6}
.np-card.np-solved{opacity:1;border-color:var(--ink);background:color-mix(in srgb,var(--ink) 4%,transparent)}
.np-card.np-solved::before{background:var(--ink)}
.np-math{font:19px/1.55 var(--f-text)}
.np-label{font:12px/1.4 var(--f-ui);color:var(--graphite-2);margin-top:5px}

/* ───────── Primality, one-time pads and RSA ───────── */
.cs-svg .cs-small{font-size:20px;fill:var(--graphite-2)}
.cs-svg .cs-track{fill:color-mix(in srgb,var(--graphite) 4%,transparent);stroke:var(--rule)}
.cs-svg .cs-pass{fill:color-mix(in srgb,var(--viridian) 8%,transparent);stroke:color-mix(in srgb,var(--viridian) 35%,transparent)}
.cs-svg .cs-fail{fill:color-mix(in srgb,var(--madder) 7%,transparent);stroke:color-mix(in srgb,var(--madder) 35%,transparent)}
.cs-svg .cs-caution{fill:color-mix(in srgb,var(--ochre) 9%,transparent);stroke:color-mix(in srgb,var(--ochre) 40%,transparent)}
.cs-svg .cs-bound{fill:color-mix(in srgb,var(--ink) 12%,transparent);stroke:var(--ink)}
.cs-svg .cs-link{stroke:var(--graphite-3);stroke-width:1.5}
.crypto-trace text{font-size:22px}
.crypto-trace .nt-note{font-size:20px}
.crypto-scene .ns-caption{min-height:6em}
.frame-art .cs-svg .cs-small{display:none}

/* ───────── Comparison sorting: the six-outcome tree ───────── */
.ct-svg{display:block;width:100%;max-width:540px;margin:auto;overflow:visible}
.ct-svg text{font:20px var(--f-text);fill:var(--graphite)}
.ct-svg rect{fill:var(--paper-hi);stroke:var(--rule);stroke-width:1.3}
.ct-svg line{stroke:var(--graphite-3);stroke-width:1.2}
.ct-svg .ct-question{font-size:19px}
.ct-svg .ct-answer{font:14px var(--f-ui);fill:var(--graphite-2)}
.ct-svg .ct-small{font-size:18px;fill:var(--graphite-2)}
.ct-svg .ct-input,.ct-svg .ct-result{fill:var(--ink)}
.ct-svg .ct-traveler{fill:var(--ink);stroke:var(--paper);stroke-width:2}
.ct-svg .hl-hit rect{fill:var(--hl);stroke:var(--hl-solid);stroke-width:2}
.ct-svg circle.hl-hit{fill:var(--hl-solid);stroke:var(--hl-text);stroke-width:3}
.comparison-tree .ct-caption{min-height:4.5em;max-width:460px;margin:18px auto 0;text-align:center;font:17px/1.45 var(--f-text);color:var(--graphite-2)}

/* ───────── Exercise 2.20: small-range integer buckets ───────── */
.counting-buckets{max-width:390px;margin:auto;min-height:370px}
.counting-buckets .cb-label{font:12px/1.4 var(--f-ui);color:var(--graphite-2);margin:10px 0}
.cb-values{display:flex;gap:6px;justify-content:center}
.cb-value{display:grid;place-items:center;min-width:29px;height:34px;padding:0 4px;border:1px solid var(--rule);border-radius:6px;font:18px var(--f-text)}
.cb-range{min-height:3em;text-align:center;font:16px/1.5 var(--f-text);margin:18px 0 8px}
.cb-row{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.cb-bucket{text-align:center;border:1px solid var(--rule);border-radius:8px;padding:2px 0 8px}
.cb-pile{height:48px;display:flex;flex-direction:column-reverse;align-items:center;gap:5px}
.cb-dot,.cb-empty{width:14px;height:14px;border:1px solid var(--rule);border-radius:50%;background:transparent}
.cb-empty{visibility:hidden}
.cb-known .cb-dot{background:color-mix(in srgb,var(--ink) 14%,transparent);border-color:var(--ink)}
.cb-count{display:block;margin-top:8px;font:19px var(--f-text);color:var(--graphite-3)}
.cb-known .cb-count{color:var(--ink)}
.cb-output,.cb-cost{opacity:0;transition:opacity .35s var(--ease)}
.cb-output.cb-shown,.cb-cost.cb-shown{opacity:1}
.cb-cost{font:16px/1.5 var(--f-text);color:var(--graphite-2);margin-top:18px}
/* ───────── matrix scenes and block-product proof (2.4–2.5) ───────── */
.mx-svg{display:block;width:100%;max-width:560px;margin:auto;overflow:visible;font-family:var(--f-text)}
.mx-svg text{font-size:24px;fill:var(--graphite);font-weight:500}
.mx-svg rect{fill:color-mix(in srgb,var(--graphite) 3%,transparent);stroke:var(--rule);stroke-width:1}
.mx-svg line{stroke:var(--rule);stroke-width:1.2}
.mx-svg .mx-label{font-size:23px}
.mx-svg .mx-small{font-size:19px;fill:var(--graphite-2)}
.mx-svg .mx-result{fill:var(--ink)}
.mx-svg .mx-order{font-size:32px;fill:var(--ink)}
.mx-svg .mx-block-digit{font-size:18px}
.mx-svg .mx-formula{font-size:21px}
.mx-svg .mx-combination{font-size:20px}
.mx-svg .mx-selection{fill:color-mix(in srgb,var(--hl-solid) 16%,transparent);stroke:var(--hl-solid);pointer-events:none}
.mx-svg .mx-output-frame{fill:none}
.mx-svg .mx-answer,.mx-svg .mx-active rect{fill:color-mix(in srgb,var(--ink) 8%,transparent);stroke:var(--ink)}
.mx-svg .mx-active text{fill:var(--ink)}
.mx-svg .hl-hit rect{fill:var(--hl);stroke:var(--hl-solid);stroke-width:2}
.mx-svg .hl-hit text{fill:var(--hl-text);paint-order:stroke;stroke:var(--hl);stroke-width:6;stroke-linejoin:round}
.mx-svg .hl-hit line{stroke:var(--hl-solid);stroke-width:3}
.mx-caption{font:14px/1.5 var(--f-ui);color:var(--graphite-2);min-height:4.5em;margin:14px auto 0;max-width:34em}
.matrix-trace text{font-size:22px}
.matrix-trace .mx-tr-input{font-size:23px}
.matrix-trace .mx-small{font-size:19px}
.frame-art .mx-caption,.frame-art .mx-small,.frame-art .mx-formula,.frame-art .mx-combination{display:none}
.frame-art .mx-svg{max-width:none}
.frame:has(.matrix-scene) .frame-art{height:240px}
.mx-svg .tr-fly{font-family:var(--f-text);font-weight:500;transition:none}
.tree-svg .tree-bundle{fill:color-mix(in srgb,var(--ink) 6%,transparent);stroke:var(--rule);stroke-width:1}
.tree-svg .tree-bundle-label{font:14px var(--f-ui);fill:var(--graphite-2)}
.block-proof{max-width:420px;margin:auto;padding:12px 0;color:var(--graphite-2)}
.bp-inputs{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.bp-label{font:14px var(--f-ui);text-align:center;margin:12px 0 8px}
.bp-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.bp-grid span{display:grid;place-items:center;min-height:48px;border:1px solid var(--rule);border-radius:7px;background:color-mix(in srgb,var(--graphite) 3%,transparent);font:20px var(--f-text)}
.bp-segments{display:flex;gap:5px;opacity:.3}
.bp-segments span{flex:1;border-top:3px solid var(--rule);padding:8px 2px;text-align:center;font:13px var(--f-ui)}
.bp-segments span:first-child{border-color:var(--viridian)}
.bp-segments span:last-child{border-color:var(--ochre)}
.bp-range,.bp-note{font:14px/1.5 var(--f-ui);text-align:center;margin:18px 0}
.bp-output span{font-size:18px;opacity:.25;min-height:60px}
.bp-note{opacity:.25}
.block-proof .bp-known{opacity:1;color:var(--ink)}

/* ───────── Graphs: reusable nodes, edges, DFS and interval stories ───────── */
.gv-svg{display:block;width:100%;max-width:560px;margin:auto;overflow:visible;font-family:var(--f-text)}
.gv-svg text{font:20px var(--f-text);fill:var(--graphite)}
.gv-svg .gv-name{font-size:23px}
.gv-svg .gv-title{font-size:20px}
.gv-svg .gv-small,.gv-svg .gv-meta{font:16px var(--f-ui);fill:var(--graphite-2)}
.gv-svg .gv-time,.gv-svg .gv-tick{font:16px var(--f-text);fill:var(--ink)}
.gv-svg .gv-time{font-variant-numeric:tabular-nums}
.gv-svg .gv-pending{fill:var(--graphite-3)}
.gv-svg .gv-body{stroke-width:1.3}
.gv-stamped .gv-name{font-size:22px}
.gv-svg .gv-halo{fill:none;stroke:var(--ink);stroke-width:3}
.gv-svg .gv-node .gv-lookup{fill:none;stroke:var(--hl-solid);stroke-width:3}
.gv-svg .gv-inspect-edge{stroke:var(--hl-solid);stroke-width:4;stroke-linecap:round}
.gv-svg .gv-skip-stop{fill:none;stroke:var(--graphite);stroke-width:2.5;stroke-linecap:round}
.gv-svg .gv-memory-cell{stroke-width:1}
.gv-svg .gv-memory-lookup{fill:none;stroke:var(--hl-solid);stroke-width:2}
.gv-svg .gv-memory-name{font-size:21px}
.gv-svg .gv-status{font:17px var(--f-text);fill:var(--ink)}
.dfs-panels{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.dfs-pane{min-width:0}
.dfs-pane-title{text-align:center;font:13px/1.4 var(--f-ui);color:var(--graphite-2);margin:0 0 8px}
.dfs-panels .gv-svg{max-height:clamp(200px,42vh,400px);width:100%;height:auto}
.dfs-memory{max-width:480px;margin:10px auto 0}
.dfs-components{display:grid;grid-template-columns:repeat(var(--component-count,3),minmax(0,1fr));gap:8px;min-height:42px;margin:5px 0 0}
.dfs-component{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:0 6px;border-top:2px solid var(--component-ink);color:var(--graphite-2);font:12px/1.4 var(--f-ui);text-align:center}
.dfs-root{color:var(--component-ink)}
.dfs-pair .gv-caption{min-height:5em;margin-top:10px}
.tr-stage.dfs-pair > .gv-caption{min-height:1.5em;text-align:center}
.tr-stage.dfs-pair{display:block}
.gv-svg .gv-region{stroke:var(--graphite-3);stroke-width:1.2}
.gv-svg .gv-traveller{fill:var(--ink);stroke:var(--paper-hi);stroke-width:2}
.gv-svg .gv-cell{fill:none;stroke:var(--rule);stroke-width:1}
.gv-svg .gv-zero{fill:var(--graphite-3);font-size:19px}
.gv-svg .gv-one{fill:var(--ink);font-size:21px}
.gv-svg .gv-selection{fill:var(--hl);stroke:none}
.gv-svg .gv-stack-cell{fill:var(--ink-soft);stroke:var(--rule);stroke-width:1}
.gv-svg .gv-stack-text{fill:var(--ink);font-size:23px}
.gv-svg .gv-interval{fill:var(--ink-soft);stroke:var(--ink);stroke-width:1.2}
.gv-svg .gv-clock{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 4}
.gv-svg .hl-hit circle:not(.gv-halo),.gv-svg .hl-hit rect{fill:var(--hl)!important;stroke:var(--hl-solid)!important;stroke-width:2}
.gv-svg .hl-hit .gv-body{fill:color-mix(in srgb,var(--hl-solid) 20%,var(--paper))!important}
.gv-svg .hl-hit line{stroke:var(--hl-solid)!important;stroke-width:3!important}
.gv-svg .hl-hit text{fill:var(--hl-text);paint-order:stroke;stroke:var(--hl);stroke-width:4;stroke-linejoin:round}
.gv-caption{font:14px/1.5 var(--f-ui);color:var(--graphite-2);min-height:6em;margin:14px auto 0;max-width:36em}
.frame-art .gv-caption,.frame-art .gv-small,.frame-art .gv-meta,.frame-art .gv-times,.frame-art .gv-status,.frame-art .gv-visited{display:none}
.frame:has(.graph-scene) .frame-art{height:235px}
.gv-svg .tr-fly{transition:none;font-family:var(--f-text)}
.graph-exercise{max-width:440px;margin:0 auto}
.graph-exercise .gv-svg{min-height:260px}
.graph-exercise-note{min-height:4.5em;margin-top:12px;font:14px/1.5 var(--f-ui);color:var(--graphite-2)}
.water-tanks{display:flex;justify-content:center;gap:24px;padding:25px 0 10px}
.water-vessel{width:72px;text-align:center;font:14px var(--f-ui);color:var(--graphite-2)}
.water-outline{position:relative;height:150px;border:1px solid var(--graphite-3);border-top:0;border-radius:0 0 8px 8px;margin:8px 0;overflow:hidden}
.water-fill{position:absolute;inset:auto 0 0;background:var(--ink-soft);border-top:1.5px solid var(--ink);transition:height .5s var(--ease)}
.water-amount{position:relative;display:grid;place-items:center;height:100%;font:24px var(--f-text);color:var(--ink)}
.water-goal{position:absolute;left:0;right:0;bottom:28.571%;border-top:1.5px dashed var(--ochre);transition:opacity .3s var(--ease)}
.water-model{font:14px/1.5 var(--f-ui);text-align:center;margin:6px 0;transition:opacity .3s var(--ease)}
.water-path{font:16px/1.7 var(--f-text);color:var(--graphite-2);text-align:center;min-height:8em}
.frame-art .dfs-source,.frame-art .dfs-pane-title,.frame-art .dfs-memory,.frame-art .dfs-components{display:none}
.frame-art .dfs-panels{display:block}
.frame-art .dfs-panels .gv-svg{height:500px;max-height:none}

/* Compact DFS walkthrough. The input, growing forest and memory remain visible
   together; the full event caption is available without widening the figure. */
.dfs-detail[hidden]{display:none}
@media (max-width:860px), (hover:none) and (pointer:coarse){
  .scrolly-paired .stage-col{padding:8px 0}
  .dfs-compact .dfs-panels{gap:10px}
  .dfs-compact .dfs-pane-title{font-size:12px;line-height:1.4;margin-bottom:4px}
  .dfs-compact .dfs-panels .gv-svg{height:clamp(160px,22svh,210px);max-height:none}
  .dfs-compact .dfs-memory{margin-top:4px}
  .dfs-compact .dfs-components{min-height:26px;margin-top:2px;gap:6px}
  .dfs-compact .dfs-component{font-size:11px;line-height:1.25;gap:0 4px}
  .dfs-detail{width:100%;font-family:var(--f-ui);font-size:13px;color:var(--graphite-2)}
  .dfs-detail summary{min-height:44px;padding:12px 0;cursor:pointer;color:var(--ink)}
  .dfs-detail .gv-caption{min-height:8em;margin:4px 0 8px}
}
@media (max-width:860px) and (max-height:540px), (hover:none) and (pointer:coarse) and (max-height:540px){
  .dfs-compact{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.65fr);align-items:center;gap:8px 18px}
  .dfs-compact .dfs-panels{grid-column:1;grid-row:1 / span 2}
  .dfs-compact .dfs-panels .gv-svg{height:160px}
  .dfs-compact .dfs-memory{grid-column:2;grid-row:1;margin:0}
  .dfs-compact .dfs-components{grid-column:2;grid-row:2}
  .dfs-compact .dg-legend{grid-column:2;font-size:11px;gap:6px}
}

/* ───────── Directed DFS, topological order and SCCs ───────── */
.dg-legend{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;min-height:26px;font:12px/1.5 var(--f-ui);color:var(--graphite-2)}
.dg-legend span{border-bottom:2px solid var(--type-color);padding:2px 5px}
.dg-order{display:flex;justify-content:center;gap:7px;min-height:43px;margin:12px auto 0;flex-wrap:wrap}
.dg-order span{display:grid;place-items:center;width:40px;height:38px;border:1px solid var(--rule);border-radius:6px;font:20px var(--f-text);color:var(--ink)}
.gv-svg .dg-axis{stroke:var(--rule);stroke-width:1}
.gv-svg .dg-inner{fill:color-mix(in srgb,var(--plum) 13%,var(--paper));stroke:var(--plum);stroke-width:1}
.gv-svg .dg-first{fill:none;stroke:var(--madder);stroke-width:2;stroke-dasharray:4 4}
.gv-svg .dg-order-tile{fill:var(--paper-hi);stroke:var(--rule);stroke-width:1}
.gv-svg .hl-hit path:not(.gv-skip-stop){stroke:var(--hl-solid)!important;stroke-width:3!important}
.frame-art .dg-legend,.frame-art .dg-order{display:none}
.directed-scene>.gv-svg{max-height:65vh;width:100%;height:auto}
.dg-scc-trace>.gv-svg{max-height:420px}
.tr-stage.dg-scc-trace{display:block}
.frame-art .directed-scene .gv-title{display:none}
.dg-ex-order{min-height:3em;font:15px/1.6 var(--f-text);color:var(--ink);text-align:center}
.dg-order-long{display:grid;grid-template-columns:repeat(6,40px);width:265px;gap:5px;padding:38px 0}
.dg-order-long span{width:40px;height:33px;font-size:18px}
.scc-passes-scene>.gv-svg{max-height:50vh}
.scc-passes-scene .gv-small{font-size:19px}

.frame-art .directed-scene>.gv-svg{max-height:none}