.visual-primer{--ink:#1f1f1f;--muted:#57616a;--blue:#245e9b;--teal:#177d75;--orange:#b65b27;--line:#d9dee2;--paper:#fff;--wash:#f8f7f1;--note:#fff5c4;
 --hand:'Humor Sans','Comic Sans MS','Chalkboard SE',cursive;--label:'Playpen Sans','Chalkboard SE','Comic Sans MS',cursive;
 --body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
 --mathfont:'Cambria Math','STIX Two Math','Latin Modern Math',Georgia,serif;
 --wobble:255px 18px 225px 18px/18px 225px 18px 255px;--wobble2:18px 225px 18px 255px/255px 18px 225px 18px}
.visual-primer *{box-sizing:border-box}
.visual-primer{scroll-behavior:smooth;scroll-padding-top:2rem}
.visual-primer{margin:0;background:var(--paper);color:var(--ink);font:18.5px/1.72 var(--body)}
.visual-primer a{color:var(--blue);text-decoration-thickness:1px;text-underline-offset:.17em}
.visual-primer a:hover{color:var(--teal)}
.visual-primer a:focus-visible,.visual-primer button:focus-visible,.visual-primer input:focus-visible,.visual-primer summary:focus-visible,.visual-primer .art:focus-visible,.visual-primer .fn-pop:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.visual-primer .skip{position:absolute;left:-9999px}.visual-primer .skip:focus{left:1rem;top:1rem;background:#fff;padding:.5rem;z-index:3}
.visual-primer .page{max-width:820px;margin:auto;padding:52px 28px 76px}
.visual-primer .eyebrow{font:700 13px/1.5 var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.visual-primer h1{font:400 clamp(34px,6vw,52px)/1.12 var(--hand);word-spacing:-.18em;margin:0 0 18px;max-width:760px}
.visual-primer .h1-tag{display:inline-block;font:700 15px/1.3 var(--label);word-spacing:0;background:var(--note);border:2px solid var(--ink);border-radius:var(--wobble);padding:6px 12px;transform:rotate(-3deg) translateY(-6px);margin-left:6px;white-space:nowrap}
.visual-primer .deck{font:400 22px/1.5 var(--label);margin:0 0 10px;max-width:700px}
.visual-primer .promise{font:15px/1.6 var(--label);color:var(--muted);margin:0 0 26px;padding-bottom:22px;border-bottom:2px dashed #cfd5da}
.visual-primer p{margin:1.05em 0}
.visual-primer strong{font-weight:700}
.visual-primer .howto{background:var(--note);border:2px solid var(--ink);border-radius:var(--wobble2);padding:4px 18px;margin:26px 0;transform:rotate(-.4deg);font-size:16.5px}
.visual-primer nav{margin:34px 0 40px;padding:18px 20px;border:2px solid var(--ink);border-radius:var(--wobble);font:15px/1.6 var(--body)}
.visual-primer nav>span{display:block;font:400 19px/1.4 var(--hand);word-spacing:-.18em;margin-bottom:8px}
.visual-primer nav ol{display:grid;grid-template-columns:1fr 1fr;gap:6px 26px;padding-left:22px;margin:0}
.visual-primer nav a{text-decoration:none;font-weight:600}
.visual-primer nav i{display:block;font:13.5px/1.35 var(--label);color:var(--muted);font-style:normal}
.visual-primer section{margin-top:56px}
.visual-primer h2{font:400 31px/1.25 var(--hand);word-spacing:-.18em;margin:0 0 18px}
.visual-primer h2 .num{display:inline-block;font:700 15px/1 var(--label);word-spacing:0;color:var(--teal);border:2px solid var(--teal);border-radius:50% 46% 52% 48%/48% 52% 46% 50%;padding:8px 7px;margin:0 12px 0 0;vertical-align:5px}
.visual-primer h2 .tag{display:block;font:400 17px/1.4 var(--label);word-spacing:0;color:var(--muted);margin-top:4px}
.visual-primer h3{font:400 21.5px/1.35 var(--hand);word-spacing:-.18em;margin:32px 0 10px;color:#22313d}
.visual-primer .math{font-family:var(--mathfont);white-space:nowrap}
.visual-primer .equation{font:22px/1.6 var(--mathfont);text-align:center;padding:16px 14px;margin:22px auto;background:var(--wash);border:1.8px solid #2a2a2a;border-radius:var(--wobble);overflow-x:auto;max-width:640px}
.visual-primer .equation:nth-of-type(2n){border-radius:var(--wobble2)}
.visual-primer .equation small{display:block;font-size:15px;line-height:1.5;color:var(--muted);margin-top:4px}
.visual-primer .frac{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;line-height:1.4;margin:0 .22em}
.visual-primer .frac>span:first-child{border-bottom:1px solid currentColor;padding:0 .2em .12em}.visual-primer .frac>span:last-child{padding-top:.1em}
.visual-primer .matrix{display:inline-grid;grid-template-columns:repeat(2,1.7em);row-gap:.15em;border-left:1.8px solid;border-right:1.8px solid;padding:.2em .28em;vertical-align:middle;line-height:1.35;text-align:center}
.visual-primer .matrix span{display:block}
.visual-primer .figure{margin:30px 0 34px;border:2px solid var(--ink);border-radius:var(--wobble2);background:#fff;overflow:hidden}
.visual-primer .art{padding:10px 8px 0}
.visual-primer .art svg{display:block;width:100%;height:auto}
.visual-primer .figure figcaption{font:15px/1.55 var(--body);color:var(--muted);padding:13px 20px 16px;border-top:2px dashed #d5dadf}
.visual-primer .figure figcaption strong{font:700 15.5px/1.5 var(--label);color:var(--ink)}
.visual-primer .comic{margin:34px auto 30px;text-align:center}
.visual-primer .comic .art{margin:0 auto;padding:0}
@media(min-width:1000px){.visual-primer .comic.wide{margin-left:calc((100% - 916px)/2);margin-right:calc((100% - 916px)/2)}}
.visual-primer .comic figcaption{font:14px/1.5 var(--label);color:var(--muted);margin-top:8px}
.visual-primer .comic-title{display:block;font:400 16px/1.4 var(--hand);word-spacing:-.18em;color:var(--ink)}
.visual-primer .alt{display:inline-block;margin:4px auto 0;text-align:left;max-width:min(560px,100%)}
.visual-primer .alt summary{display:inline-block;cursor:pointer;font:700 12.5px/1.4 var(--label);color:var(--blue);list-style:none;padding:3px 10px;border:1.5px solid currentColor;border-radius:var(--wobble)}
.visual-primer .alt summary::-webkit-details-marker{display:none}
.visual-primer .alt summary::before{content:"✎ "}
.visual-primer .alt[open] summary{color:var(--muted)}
.visual-primer .alt p{font:italic 15px/1.55 var(--body);color:var(--ink);background:var(--note);border:1.6px solid var(--ink);border-radius:var(--wobble2);padding:10px 14px;margin:8px 0 0}
.visual-primer .note{font-size:17px;line-height:1.65;color:var(--muted);padding:0 0 0 17px;border-left:3px solid var(--line);margin:25px 0}
.visual-primer details:not(.alt){margin:24px 0;padding:14px 18px;border:1.8px solid var(--ink);border-radius:var(--wobble);background:#fdfdf9;font-size:17px}
.visual-primer details:not(.alt) summary{font:700 15px/1.6 var(--label);cursor:pointer}
.visual-primer details:not(.alt) p:last-child{margin-bottom:0}
.visual-primer details .equation{font-size:19px}
.visual-primer .table-wrap{overflow-x:auto;margin:22px 0}
.visual-primer table{width:100%;border-collapse:collapse;font:15.5px/1.5 var(--label);font-variant-numeric:tabular-nums}
.visual-primer th{text-align:left;font-weight:700;color:var(--muted)}
.visual-primer th,.visual-primer td{padding:10px 12px;border-bottom:1.8px dashed #c9d0d5}
.visual-primer td:not(:first-child),.visual-primer th:not(:first-child){text-align:right}
.visual-primer td:first-child,.visual-primer th:first-child{padding-left:0}
.visual-primer ul{padding-left:23px}
.visual-primer ol.plan{padding-left:26px;margin:14px 0 22px}
.visual-primer ol.plan li{margin:7px 0}
.visual-primer .interactive-controls{display:none;padding:18px 22px;background:var(--wash);border-top:2px dashed #d5dadf;font:14.5px/1.6 var(--label)}
.visual-primer.js .interactive-controls{display:block}
.visual-primer .control-row{display:grid;grid-template-columns:1fr auto;gap:6px 18px;margin-bottom:16px}
.visual-primer .control-row input{grid-column:1/-1;width:100%;accent-color:var(--teal);cursor:pointer;height:24px}
.visual-primer .control-row output{font-weight:700;font-variant-numeric:tabular-nums}
.visual-primer .readouts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.visual-primer .readout{border:1.6px solid var(--ink);border-radius:var(--wobble);padding:6px 12px;background:#fff}
.visual-primer .readout span{display:block;font-size:12.5px;color:var(--muted)}
.visual-primer .readout strong{font:700 22px/1.5 var(--label)}
.visual-primer .mix-sentence{margin:12px 0 0;font-size:13.5px}
.visual-primer .js-hint{display:none}.visual-primer.js .js-hint{display:inline}
.visual-primer .transformation-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.visual-primer .actions{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 14px}
.visual-primer .actions button{font:400 16px/1.4 var(--hand);word-spacing:-.18em;padding:7px 14px;border:2px solid var(--ink);border-radius:var(--wobble);background:#fff;color:var(--ink);cursor:pointer}
.visual-primer .actions button:hover{transform:rotate(-1.2deg)}
.visual-primer .interactive-controls>p{margin:0 0 12px;font-size:14.5px}
.visual-primer .interactive-controls .members{margin:10px 0 0;font-size:14px;color:var(--muted)}
.visual-primer .paren{font-size:1.6em;vertical-align:-.12em}
.visual-primer .transformation-actions button{font:400 16px/1.4 var(--hand);word-spacing:-.18em;padding:8px 16px;border:2px solid var(--ink);border-radius:var(--wobble);background:var(--ink);color:#fff;cursor:pointer}
.visual-primer .transformation-actions button+button{background:#fff;color:var(--ink)}
.visual-primer .transformation-actions button:hover{transform:rotate(-1.2deg)}
.visual-primer .transformation-controls .control-row{margin-bottom:0}
.visual-primer .transformation-endpoints{display:flex;justify-content:space-between;color:var(--muted);font-size:12.5px}
.visual-primer .transformation-controls p{font-size:13.5px;margin:12px 0 0}
.visual-primer .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.visual-primer sup.fnref{line-height:0;font-size:.62em;vertical-align:.55em;margin-left:1px}
.visual-primer sup.fnref a{font:700 1em/1 var(--label);text-decoration:none;padding:0 1px;border-radius:4px}
.visual-primer sup.fnref a:hover,.visual-primer sup.fnref a[aria-expanded=true]{background:var(--note);color:var(--ink)}
.visual-primer .fn-pop{position:absolute;z-index:20;background:#fff;border:2px solid var(--ink);border-radius:var(--wobble2);box-shadow:4px 5px 0 rgba(31,31,31,.14);padding:14px 38px 14px 16px;font:15.5px/1.55 var(--body)}
.visual-primer .fn-pop[hidden]{display:none}
.visual-primer .fn-close{position:absolute;top:6px;right:8px;border:0;background:none;font:700 20px/1 var(--label);color:var(--muted);cursor:pointer;padding:4px}
.visual-primer .fn-close:hover{color:var(--ink)}
.visual-primer .footnotes{margin-top:50px;padding-top:6px;border-top:2px dashed #cfd5da}
.visual-primer .footnotes h2{font-size:24px}
.visual-primer .footnotes ol{padding-left:24px;font-size:15.5px;line-height:1.6;color:#2c3640}
.visual-primer .footnotes li{margin:.45em 0}
.visual-primer .footnotes li:target{background:var(--note)}
.visual-primer .fn-back{text-decoration:none;margin-left:4px}
.visual-primer .recap{margin-top:52px;background:var(--note);border:2px solid var(--ink);border-radius:var(--wobble2);padding:6px 24px 10px;transform:rotate(.35deg)}
.visual-primer .recap h2{font-size:25px;margin:14px 0 6px}
.visual-primer .recap ol{padding-left:22px;margin:0 0 8px;font-size:16.5px;line-height:1.6}
.visual-primer .recap li{margin:.35em 0}
.visual-primer .source-note{font:15px/1.7 var(--body);color:var(--muted);margin-top:48px;padding:16px 20px;border:2px solid var(--ink);border-radius:var(--wobble)}
.visual-primer .source-note p{margin:.4em 0}.visual-primer .source-note strong{font:400 19px/1.4 var(--hand);word-spacing:-.18em;color:var(--ink)}
.visual-primer .source-note ol{padding-left:20px;margin:.3em 0}
.visual-primer .credits{font:13px/1.6 var(--body);color:var(--muted);margin-top:34px}
.visual-primer .credits p{margin:.5em 0}
.visual-primer .quiet{color:var(--muted)}
.visual-primer .why{font-size:16.5px;line-height:1.6;color:#2c3640;background:var(--wash);border-left:4px solid var(--teal);border-radius:0 8px 8px 0;padding:10px 16px 10px 14px;margin:18px 0}
.visual-primer .why strong{font:400 17.5px/1.3 var(--hand);word-spacing:-.18em;color:var(--teal);margin-right:4px}
.visual-primer .turn-controls .transformation-actions{margin:4px 0 10px}
.visual-primer .turn-controls .transformation-actions button{background:#fff;color:var(--ink);padding:7px 12px}
.visual-primer .turn-controls p{margin:8px 0}
.visual-primer .unit-score-line{font-size:17px}.visual-primer .unit-score-line strong{font:700 24px/1.3 var(--label);color:var(--teal)}
.visual-primer .resize-experiment .interactive-controls{margin-top:14px;border:1.6px solid var(--ink);border-radius:var(--wobble);border-top-style:solid}
.visual-primer .resize-experiment .figure{margin-top:18px}
.visual-primer .art .art-mobile{display:none}
@media(max-width:600px){
 .visual-primer{font-size:17.5px;line-height:1.7}
 .visual-primer .page{padding:30px 18px 48px}
 .visual-primer .deck{font-size:19px}
 .visual-primer .h1-tag{font-size:13px}
 .visual-primer nav ol{grid-template-columns:1fr;gap:8px}
 .visual-primer h2{font-size:26px}
 .visual-primer .figure{margin-left:-6px;margin-right:-6px}
 .visual-primer .art{padding:8px 2px 0;overflow-x:auto}
 .visual-primer .art svg{min-width:540px}
 .visual-primer .art::after{content:"Scroll figure →";display:block;position:sticky;left:0;padding:5px 10px;font:12px/1.5 var(--label);color:var(--muted)}
 .visual-primer .comic .art svg,.visual-primer .comic .art-responsive svg{min-width:0}
 .visual-primer .comic .art::after{display:none}
 .visual-primer .comic .art.wide-chart svg{min-width:540px}
 .visual-primer .comic .art.wide-chart::after{display:block}
 .visual-primer .equation{font-size:19px;padding:14px 10px}
 .visual-primer .readouts{gap:7px}.visual-primer .readout{padding:5px 8px}.visual-primer .readout strong{font-size:19px}
 .visual-primer .figure figcaption{padding:12px 14px}
 .visual-primer .interactive-controls{padding:16px 14px}
 .visual-primer .matrix{grid-template-columns:repeat(2,1.55em)}
 .visual-primer .fn-pop{font-size:15px}
}
@media screen and (max-width:600px){.visual-primer .art-responsive .art-desktop{display:none}.visual-primer .art-responsive .art-mobile{display:block}.visual-primer .art-responsive svg{min-width:0}.visual-primer .art-responsive::after{display:none}}
@media(prefers-reduced-motion:reduce){.visual-primer{scroll-behavior:auto}.visual-primer .transformation-actions button:hover,.visual-primer .actions button:hover{transform:none}}
@media print{.visual-primer{font-size:11pt;line-height:1.55}.visual-primer .page{max-width:none;padding:0}.visual-primer .skip,.visual-primer nav,.visual-primer .interactive-controls,.visual-primer .js-hint,.visual-primer .fn-pop,.visual-primer .alt summary{display:none!important}.visual-primer .alt p{display:block}.visual-primer .figure,.visual-primer .comic{break-inside:avoid}.visual-primer h2{break-after:avoid}.visual-primer a{color:inherit}.visual-primer .art svg{min-width:0}.visual-primer .equation{font-size:15pt}.visual-primer details:not(.alt){display:none}.visual-primer h1{font-size:29pt}}


/* Integration with the existing Jekyll Now theme. All styles remain inside the primer. */
.visual-primer:not(.entry){max-width:820px;margin:28px auto 0;padding:0 14px;background:#fff;color:var(--ink);font:18.5px/1.72 var(--body);text-align:left}
.visual-primer h2{margin-top:56px;margin-bottom:12px}
.visual-primer h3{clear:none}
.visual-primer .chapter-tag{font:17px/1.4 var(--label);color:var(--muted);margin:0 0 20px}
.visual-primer .chapter-anchor{display:block;scroll-margin-top:2rem}
.visual-primer nav{float:none;clear:both;width:auto;text-align:left}
.visual-primer nav a{margin:0;letter-spacing:normal;text-align:left;font-weight:600}
.visual-primer table tr{border:0}
.visual-primer table tr:nth-child(2n){background:none}
.visual-primer th,.visual-primer td{border-top:0;border-left:0;border-right:0}
.visual-primer .credits{text-align:left;padding:0}
.visual-primer .fn-pop{color:var(--ink);text-align:left}
.visual-primer .fn-pop p:first-child{margin-top:0}
.visual-primer .fn-pop p:last-child{margin-bottom:0}
.visual-primer .art svg{max-width:none}
@media(max-width:600px){.visual-primer:not(.entry){padding:0 12px;font-size:17.5px}.visual-primer .comic.wide{margin-left:0;margin-right:0}}
@media print{.visual-primer{max-width:none;padding:0;font-size:11pt}.visual-primer details:not(.alt){display:block}.visual-primer details>summary{font-weight:bold}}

/* The post's .entry is the primer root; its width and quote layout come from the blog theme. */
.post .visual-primer {
  --body: Helvetica, Arial, sans-serif;
  font: inherit;
  color: inherit;
}
/* Match the compact, unboxed illustrations in the linear algebra primer. */
.post .visual-primer figure.figure,
.post .visual-primer figure.comic {
  max-width: 640px;
  margin: 32px auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.post .visual-primer figure > .art {
  padding: 0;
}
.post .visual-primer figure > figcaption {
  margin: 12px 0 0;
  padding: 0;
  border: 0;
  font: 14px/1.6 var(--body);
  text-align: left;
  color: var(--muted);
}
.post .visual-primer figure > figcaption strong {
  font: inherit;
  font-weight: bold;
  color: var(--ink);
}
.post .visual-primer figure > .interactive-controls {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  border-radius: 6px;
}
.post .visual-primer h1,
.post .visual-primer h2,
.post .visual-primer h3 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
  line-height: 1.7;
  word-spacing: normal;
  color: #222;
  margin: 1em 0 15px;
}
.post .visual-primer h1 { font-size: 30px; }
.post .visual-primer h2 { font-size: 24px; }
.post .visual-primer h3 { font-size: 20px; }
.post .visual-primer > p:not([class]),
.post .visual-primer > blockquote p { margin: 15px 0; }
.post .visual-primer .chapter-tag { margin-bottom: 12px; }
.post .visual-primer .chapter-tag,
.post .visual-primer .why,
.post .visual-primer .note,
.post .visual-primer .source-note,
.post .visual-primer details:not(.alt),
.post .visual-primer .recap ol,
.post .visual-primer .footnotes ol {
  font: inherit;
}
.post .visual-primer .why strong,
.post .visual-primer .source-note strong,
.post .visual-primer details:not(.alt) > summary {
  font: inherit;
  font-weight: bold;
}
.post .visual-primer table { font-family: inherit; }
@media (max-width: 640px) {
  .post .visual-primer h1,
  .post .visual-primer h2,
  .post .visual-primer h3 { line-height: 1.4; }
}