/* Reflowing teaching diagrams with double pencil strokes. Text stays selectable. */
.lesson-diagram{container-type:inline-size;margin:34px 0 42px;padding:24px 22px 19px;border:1px solid #d8dfed;border-radius:4px 13px 6px 11px;background-color:#fcfdff;background-image:radial-gradient(#d5ddeb 0.65px,transparent 0.65px);background-size:16px 16px;break-inside:avoid;box-shadow:3px 4px 0 #edf0f780;line-height:1.6}
.diagram-heading{display:flex;align-items:flex-start;gap:10px;flex-direction:column;margin-bottom:25px}.diagram-kicker{font-size:12px;font-weight:600;letter-spacing:.6px;color:#4662ae;border-bottom:2px solid #bccbf2;padding-bottom:2px}.diagram-heading>strong{font-size:19px;line-height:1.6;letter-spacing:-.4px;color:#263751}.diagram-canvas{padding:0 2px}.diagram-node{position:relative;min-width:0;display:flex;align-items:center;justify-content:center;text-align:center;isolation:isolate;flex:1}.node-outline{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible;pointer-events:none}.node-paper{fill:#fff;stroke:#526075;stroke-width:1.4;vector-effect:non-scaling-stroke;stroke-linejoin:round}.node-pencil{fill:none;stroke:#8792a4;stroke-width:.7;vector-effect:non-scaling-stroke;opacity:.65}.diagram-accent .node-paper{fill:#edf2ff;stroke:#3458bf;stroke-width:1.6}.diagram-accent .node-pencil{stroke:#5478ce}.node-text{padding:19px 15px 20px;width:100%}.node-text strong{display:block;font-size:16px;line-height:1.6;color:#243c66;letter-spacing:-.3px}.node-text>span:not(.diagram-step){display:block;font-size:14px;color:#57687f;line-height:1.75;margin-top:7px;overflow-wrap:anywhere}.diagram-step{display:block;font-size:12px;color:#6c7ea0;font-variant-numeric:tabular-nums;margin-bottom:8px}.diagram-arrow{color:#4c69a2;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:26px}.diagram-arrow svg{width:30px;height:24px;overflow:visible}.diagram-arrow path,.diagram-join path{stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;fill:none}.prose .diagram-flow{list-style:none;padding:0;margin:0;display:flex;align-items:stretch;flex-direction:column;gap:0}.prose .diagram-flow>li{display:flex;flex-direction:column;align-items:center;margin:0;padding:0;min-width:0;flex:1}.diagram-flow .diagram-node{width:100%}.diagram-flow .diagram-arrow{transform:rotate(90deg);height:32px;margin:4px 0}.diagram-flow .node-text{padding:15px 20px}.diagram-flow .diagram-step{display:inline-block;margin:0 7px 4px 0}.diagram-loop{font-size:14px;color:#4b6493;margin:20px 3px 0;text-align:center;padding-top:10px;border-top:1px dashed #8e9fbf}.diagram-loop>span{font-size:23px;vertical-align:middle;margin-right:5px}.prose .diagram-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;list-style:none;padding:0;margin:0}.prose .diagram-grid>li{margin:0;padding:0;display:flex;min-width:0}.diagram-center{max-width:350px;margin:0 auto;display:flex;flex-direction:column;align-items:stretch}.diagram-center .diagram-node{width:100%}.diagram-branches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch}.diagram-branch{display:flex;flex-direction:column;min-width:0}.branch-label{font-size:14px;color:#4662a3;text-align:center;margin:0 0 10px;background:#fcfdff;align-self:center;padding:0 6px}.diagram-join{display:block;width:100%;height:35px;color:#4c69a2;margin:1px 0}.join-merge{transform:rotate(180deg)}.arrow-down{transform:rotate(90deg);align-self:center;height:32px;margin:5px 0}.prose .lesson-diagram figcaption{font-size:14px;color:#56667e;border-top:1px dashed #bdc9df;margin-top:24px;padding:15px 0 0;line-height:1.85;background:transparent}.diagram-node:nth-child(even) .node-paper{stroke-width:1.5}
@container(min-width:610px){.prose .diagram-flow{flex-direction:row}.prose .diagram-flow>li{flex-direction:row;align-items:stretch}.diagram-flow .diagram-arrow{transform:none;align-self:center;width:26px;margin:0 2px}.diagram-flow .diagram-node{width:auto}.diagram-flow .node-text{padding:19px 10px}.diagram-flow .diagram-step{display:block;margin:0 0 8px}.diagram-flow>li:last-child{flex:.85}}
@container(max-width:380px){.prose .diagram-grid{grid-template-columns:1fr}.diagram-branches{gap:12px}.diagram-branches .node-text{padding:17px 10px}.diagram-heading>strong{font-size:18px}.node-text strong{font-size:15px}.diagram-branches .node-text>span:not(.diagram-step){font-size:14px}.diagram-heading{margin-bottom:19px}}
@media(max-width:760px){.lesson-diagram{margin:28px 0 35px;padding:20px 15px 16px}}
@media print{.lesson-diagram{background-image:none;box-shadow:none;border-color:#aaa}.node-paper{fill:white!important}.diagram-canvas{print-color-adjust:exact}}