/* Illustrative A4 pages and covers for the "show" study. Each page is HTML, sized in em from its own width
   (1em = 1/42 of the page), so it stays sharp at any size and inside any zoomed crop. */
.pg{container-type:inline-size;position:relative;aspect-ratio:210/297;width:100%;overflow:hidden;background:#fff;color:#14201a;-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-user-select:none;user-select:none}
.pg-in{position:absolute;inset:0;font:400 calc(100cqw/42)/1.4 var(--sans,'Source Sans 3',system-ui,sans-serif);padding:2.2em 2.8em 0;text-align:left;letter-spacing:0}
/* Drawings keep the text sizes written on them, so a figure's labels scale with the figure at any zoom. */
.pg-in :where(:not(text,tspan)){margin:0;padding:0;box-sizing:border-box;font-size:1em;letter-spacing:inherit}
.pg-top{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:1.3em;border-bottom:.1em solid #dfe7e1;font-size:.98em;color:#54635b}
.pg-brand{font:650 1.62em/1 var(--serif,'Source Serif 4',Georgia,serif);color:#14201a;letter-spacing:-.02em}
.pg-brand span{color:#078249}
.pg-foot{position:absolute;left:2.8em;right:2.8em;bottom:0;height:4.3em;display:flex;justify-content:space-between;align-items:center;border-top:.1em solid #dfe7e1;font-size:.9em;color:#65736b}
.pg-foot b{color:#078249;font-weight:700;font-size:1.1em}
.pg-title{font:600 2.9em/1.06 var(--serif,'Source Serif 4',Georgia,serif);letter-spacing:-.03em;color:#003a1c;margin-top:.62em}
.pg-sub{font-size:1.16em;color:#54635b;margin-top:.5em;line-height:1.35}
.pg-h{display:flex;align-items:center;gap:.6em;font:700 1.42em/1.2 var(--sans,'Source Sans 3',system-ui,sans-serif);color:#003a1c;margin-top:1.05em}
.pg-h b{display:grid;place-items:center;width:1.55em;height:1.55em;border-radius:.4em;background:#078249;color:#fff;font-size:.8em;flex:none}
.pg-p{font-size:1.14em;color:#3c4a43;margin-top:.55em;line-height:1.42}
.pg i,.pg .m{font-family:var(--serif,'Source Serif 4',Georgia,serif)}
.pg .m{font-style:normal;white-space:nowrap}
.pg sup{font-size:.68em;line-height:0;vertical-align:.5em}
.pg sub{font-size:.68em;line-height:0;vertical-align:-.25em}
.pg .fr{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.12;margin:0 .18em;text-align:center}
.pg .fr>span{padding:0 .2em}
/* The bar runs the full width of the longer of the two parts. It is a thin block, not a border, so it stays thin on a page shown very small. */
.pg .fr>span+span{align-self:stretch;margin-top:.06em}
.pg .fr>span+span::before{content:"";display:block;height:.075em;margin-bottom:.06em;background:currentColor}
.pg .lim{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1;margin-right:.3em}
.pg .lim small{font-size:.6em;margin-top:.22em;white-space:nowrap}
/* One solid forest box per page carries the thing to remember. */
.pg-key{background:#003a1c;color:#fff;border-radius:.8em;padding:.95em 1.4em;margin-top:1.1em;font-size:1.12em;line-height:1.4}
.pg-key strong{display:block;font-size:1.08em;margin-bottom:.12em}
.pg-key .m{color:#fff}
.pg-box{border:.1em solid #cfdad3;border-radius:.8em;padding:1em 1.3em;margin-top:.9em}
.pg-fig{display:block;width:100%;height:auto;margin-top:.8em;border:.1em solid #dfe7e1;border-radius:.8em;background:#fff}
.pg-fig text{font-family:var(--sans,'Source Sans 3',system-ui,sans-serif)}
.pg-fig .srf{font-family:var(--serif,'Source Serif 4',Georgia,serif)}
.pg-checks{list-style:none;margin-top:.7em}
.pg-checks li{position:relative;padding:.33em 0 .33em 2em;font-size:1.16em;color:#14201a;border-bottom:.09em solid #e6ece8}
.pg-checks li:last-child{border-bottom:0}
.pg-checks li::before{content:"";position:absolute;left:.15em;top:.68em;width:.9em;height:.45em;border-left:.17em solid #078249;border-bottom:.17em solid #078249;transform:rotate(-45deg)}
.pg-facts{display:grid;grid-template-columns:.8fr 1.5fr 1.3fr;gap:0;margin-top:.8em;border:.1em solid #cfdad3;border-radius:.8em}
.pg-facts div{padding:.8em 1.1em}
.pg-facts div+div{border-left:.1em solid #dfe7e1}
.pg-facts small{display:block;font-size:.95em;color:#65736b}
.pg-facts strong{display:block;font-size:1.16em;color:#003a1c;line-height:1.25;margin-top:.1em}
.pg-steps{list-style:none;counter-reset:s;margin-top:.6em}
.pg-steps li{counter-increment:s;position:relative;padding:.28em 0 .28em 2em;font-size:1.14em;color:#3c4a43}
.pg-steps li::before{content:counter(s);position:absolute;left:0;top:.28em;font:600 1em/1.4 var(--serif,'Source Serif 4',Georgia,serif);color:#078249}
.pg-steps strong{color:#14201a}
/* Worked examples: the working on the left, the reason beside each line. */
.pg-work{margin-top:1.1em;border-top:.1em solid #cfdad3}
.pg-line{display:grid;grid-template-columns:1.9em minmax(0,1fr) 12.4em;gap:.9em;align-items:start;padding:.95em 0;border-bottom:.1em solid #e6ece8}
.pg-line>b{display:grid;place-items:center;width:1.7em;height:1.7em;border-radius:50%;border:.12em solid #078249;color:#078249;font-size:1em;font-weight:700}
.pg-line .m{display:block;font-size:1.3em;line-height:1.75;color:#14201a;white-space:normal}
/* The reasons break where they are written to, so a page is laid out the same at every size and a crop always lands on the same part. */
.pg-line p{font-size:1.02em;line-height:1.35;color:#076a3d;padding-left:.9em;align-self:center;white-space:nowrap}
.pg-line.is-wide{grid-template-columns:1.9em minmax(0,1fr) 10.6em}
.pg-table{width:100%;border-collapse:collapse;margin-top:.9em;font-size:1.14em}
.pg-table th{font-weight:600;text-align:left;color:#65736b;font-size:.9em;padding:.5em .8em;border-bottom:.12em solid #cfdad3}
.pg-table td{padding:.6em .8em;border-bottom:.09em solid #e6ece8;vertical-align:middle;color:#3c4a43;line-height:1.3}
.pg-table td .m{font-size:1.18em;color:#14201a}
.pg-table td:first-child{padding-left:0}.pg-table th:first-child{padding-left:0}
.pg-table tr:last-child td{border-bottom:0}
.pg-pairs{display:grid;grid-template-columns:1fr 1fr;gap:.8em;margin-top:.8em}
.pg-pairs div{border:.1em solid #cfdad3;border-radius:.7em;padding:.55em 1em;font-size:1.1em;color:#3c4a43}
.pg-pairs .m{font-size:1.2em;color:#14201a;display:block;margin-top:.1em}
.pg-cells{display:grid;grid-template-columns:1fr 1fr;gap:.9em;margin-top:1.1em}
.pg-cells>div{border:.1em solid #cfdad3;border-radius:.8em;padding:.95em 1.15em 1.05em}
.pg-cells h4{font:700 1.12em/1.2 var(--sans,'Source Sans 3',system-ui,sans-serif);color:#078249}
.pg-cells .m{display:block;font-size:1.34em;color:#14201a;margin-top:.45em;line-height:1.6}
.pg-cells p{font-size:1em;color:#54635b;margin-top:.35em;line-height:1.35}
.pg-cells>.is-forest{background:#003a1c;border-color:#003a1c;grid-column:1/-1}
.pg-cells>.is-forest h4,.pg-cells>.is-forest p{color:#d6e8dc}.pg-cells>.is-forest .m{color:#fff}
.pg-slips{margin-top:1em;border-top:.1em solid #cfdad3}
.pg-slip{display:grid;grid-template-columns:1fr 1fr;gap:1.4em;padding:.82em 0;border-bottom:.1em solid #e6ece8;font-size:1.1em;line-height:1.35}
.pg-slip div{position:relative;padding-left:1.7em;color:#3c4a43}
.pg-slip div::before{position:absolute;left:0;top:0;font-weight:700}
.pg-slip div:first-child::before{content:"✗";color:#a83535}
.pg-slip div:last-child::before{content:"✓";color:#078249}
.pg-slip div:first-child .m{color:#7b4a4a;text-decoration:line-through;text-decoration-thickness:.07em}
.pg-slip .m{font-size:1.12em;color:#14201a}
.pg-qs{list-style:none;counter-reset:q;margin-top:1em;border-top:.1em solid #cfdad3}
.pg-qs li{counter-increment:q;display:grid;grid-template-columns:1.9em minmax(0,1fr) auto;gap:.8em;align-items:baseline;padding:1em 0 2.5em;border-bottom:.1em solid #e6ece8;font-size:1.16em;color:#14201a}
.pg-qs li::before{content:counter(q);font:600 1.05em/1.4 var(--serif,'Source Serif 4',Georgia,serif);color:#078249}
.pg-qs li>span:last-child{color:#65736b;font-size:.9em}
.pg-qs .m{font-size:1.1em}
.pg-note{font-size:1.04em;color:#65736b;margin-top:.75em}

/* A page the sheet contains but the preview does not draw in full: its real title over plain bars. */
.pg-skel .pg-title{font-size:2.2em}
.pg-bars{margin-top:1.4em;display:grid;gap:.95em}
.pg-bars i{display:block;height:.62em;border-radius:.3em;background:#dbe3de}
.pg-bars u{display:block;width:44%;height:.95em;margin-top:.45em;border-radius:.3em;background:#b4c4ba;text-decoration:none}
.pg-bars b{display:block;height:8.5em;border:.12em solid #cfdad3;border-radius:.8em}
.pg-bars s{display:block;height:4.4em;margin-top:.3em;border-radius:.8em;background:#b4c4ba;text-decoration:none}
.pg-bars span{display:grid;grid-auto-flow:column;grid-template-rows:auto auto;gap:.8em 1.8em;padding:.2em 0 1em;border-bottom:.1em solid #e6ece8}
.pg-bars .is-work{grid-template-columns:1fr 28%}
.pg-bars .is-work em{display:block;height:.5em;border-radius:.3em;background:#b9e6d1}
.pg-bars .is-pair{grid-template-columns:1fr 1fr}
.pg-bars .is-ask{grid-auto-flow:row;padding-bottom:2.7em}

/* Covers follow the owner's Exponents cover: white, one large serif title, one bold ink and green drawing. */
.pg-cover .pg-in{padding-top:2.4em}
.pg-cover .cv-title{font:600 5em/1.01 var(--serif,'Source Serif 4',Georgia,serif);letter-spacing:-.04em;color:#14201a;margin-top:.62em;text-wrap:balance}
.pg-cover .cv-art{position:absolute;left:0;right:0;bottom:11.6em;height:19em}
.pg-cover .cv-art svg{display:block;width:100%;height:100%;overflow:visible}
.pg-cover .cv-line{position:absolute;left:2.8em;right:2.8em;bottom:6.4em;display:flex;justify-content:space-between;align-items:baseline;gap:1.5em;font-size:1.14em;color:#3c4a43;line-height:1.35}
.pg-cover .cv-line .m{font-size:1.5em;font-style:italic;color:#14201a;flex:none}
.pg-cover .pg-foot{font-size:.95em}
/* Subject bundles are forest, so a bundle never reads as one sheet. */
/* A real cover picture (assets/covers/, see show-pages.js): it fills the page the drawing would. */
.pg-cover.is-picture img{display:block;width:100%;height:100%;object-fit:cover}
.pg-cover.is-bundle{background:#003a1c;color:#fff}
.pg-cover.is-bundle .pg-top{border-color:#295a40;color:#b9d3c3}
.pg-cover.is-bundle .pg-brand,.pg-cover.is-bundle .cv-title{color:#fff}
.pg-cover.is-bundle .pg-brand span{color:#7fd3a6}
.pg-cover.is-bundle .cv-line{color:#d6e8dc}
.pg-cover.is-bundle .pg-foot{border-color:#295a40;color:#b9d3c3}
.pg-cover.is-bundle .cv-art{color:#fff}
.cv-art{color:#14201a}
.cv-art .ink{fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.cv-art .thin{fill:none;stroke:currentColor;stroke-width:1.2;opacity:.28}
.cv-art .grn{fill:none;stroke:#078249;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.cv-art .dot{fill:#078249}
.cv-art text{font:600 11px var(--serif,'Source Serif 4',Georgia,serif);fill:#078249}
.pg-cover.is-bundle .cv-art .grn{stroke:#7fd3a6}.pg-cover.is-bundle .cv-art .dot,.pg-cover.is-bundle .cv-art text{fill:#7fd3a6}

/* A crop: one part of a page, enlarged inside a frame. --zx, --zy and --zw are set by the kit. */
.pgx{position:relative;overflow:hidden;background:#fff}
.pgx>.pg{position:absolute;left:0;top:0;width:calc(var(--zw,1)*100%);transform:translate(calc(var(--zx,0)*-1%),calc(var(--zy,0)*-1%))}