.board span{font-family:"Architects Daughter","Chalkboard SE","Comic Sans MS",cursive;font-weight:400}
.board{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;color:#f3f1e7;filter:url(#chalk)}
.board span,.eq{white-space:nowrap;font-size:2.2rem}
.board span{position:absolute;opacity:.22}
.eq{font-family:"Architects Daughter","Chalkboard SE","Comic Sans MS",cursive;color:#f3f1e7;opacity:.3;filter:url(#chalk);transform:rotate(-3deg);margin:1.8rem 0 0 3rem;pointer-events:none}
.board span.vadd{display:grid;grid-template-columns:repeat(3,1.3em);text-align:center;line-height:1.15}
.vadd i{font-style:normal}
.frac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;font-weight:400}
.frac i{font-style:normal;padding:0 .3em}
.frac .d{border-top:.08em solid currentColor;align-self:stretch;text-align:center}
.vadd .cy{font-size:.6em;line-height:1;align-self:end}
.vadd .ln{grid-column:1/-1;border-top:.1em solid currentColor;margin:.1em 0}
.board span.big{font-size:4.6rem;opacity:.3}
@media (max-width:40rem){.board span,.eq{font-size:1.5rem}.board span.big{font-size:2.6rem}.eq{margin-left:0}}
.typed{font-size:1.6rem;font-weight:600;margin:.2rem 0 1rem;color:#ffe27a;min-height:2.2rem}
.typed::after{content:"\258C";margin-left:.1em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
/* feature cards: sticky notes */
.card{border:0;border-radius:2px;background:#ffe56b;box-shadow:0 12px 12px -9px rgba(0,0,0,.65),0 1px 2px rgba(0,0,0,.3)}
.card:nth-child(4n+2){background:#ff9fc2}.card:nth-child(4n+3){background:#9ee7ff}.card:nth-child(4n){background:#b8f2a2}
.card:nth-child(odd){transform:rotate(-1.6deg)}.card:nth-child(even){transform:rotate(1.2deg)}
.card h3{color:#1f2933;font-weight:700}
.card p{color:#3d4852}
.card a{color:#1d4ed8}
@media (prefers-reduced-motion:reduce){.typed::after{animation:none}}
.os-grid{display:grid;grid-template-columns:1fr;gap:1rem}
.os{border:2px dashed var(--border);border-radius:.3rem;padding:1.1rem 1.25rem;min-width:0}
.os h3{margin-top:0}
.os p{margin:0}
.os pre.block{border:0;background:rgba(255,255,255,.06);margin:.4rem 0;overflow:visible;white-space:pre-wrap;overflow-wrap:anywhere}
.os ol{margin:0;padding:0;list-style:none;counter-reset:step}
.os li{position:relative;padding-left:2.4rem;margin:.7rem 0;counter-increment:step;min-width:0}
.os li::before{content:counter(step);position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--accent);color:var(--accent-fg);font-weight:700;font-size:.9rem}
.shots:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:.5rem}
.shots:not(.js) .shot-arrow,.shots:not(.js) .shot-dots{display:none}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.shot-stage{position:relative}
.shot-arrow{position:absolute;top:50%;transform:translateY(-50%);width:2.6rem;height:2.6rem;border-radius:50%;border:0;cursor:pointer;font-size:1.2rem;line-height:1;background:rgba(0,0,0,.55);color:#fff}
.shot-arrow:hover,.shot-arrow:focus-visible{background:rgba(0,0,0,.8)}
.shot-arrow.prev{left:.6rem}.shot-arrow.next{right:.6rem}
.shot-cap{display:grid;text-align:center;color:var(--muted);margin:.6rem 0 .4rem;line-height:1.5;min-height:3em}
.shot-cap span{grid-area:1/1;visibility:hidden}
.shot-cap span.on{visibility:visible}
.shot-dots{display:flex;gap:.5rem;justify-content:center}
.shot-dots button{width:.8rem;height:.8rem;padding:0;border-radius:50%;cursor:pointer;border:1px solid var(--muted);background:transparent}
.shot-dots button[aria-current="true"]{background:var(--accent);border-color:var(--accent);transform:scale(1.25)}
/* positions of the chalk equations (was inline style) */
.p1{position:absolute}
.board .p2{left:6%;top:3%;transform:rotate(-6deg)}
.board .p3{left:70%;top:5%;transform:rotate(4deg)}
.board .p4{left:84%;top:13%;transform:rotate(-3deg)}
.board .p5{left:4%;top:20%;transform:rotate(3deg)}
.board .p6{right:2%;top:20%;transform:rotate(-5deg)}
.board .p7{left:58%;top:28%;transform:rotate(-5deg)}
.board .p8{left:3%;top:30%;transform:rotate(-3deg)}
.board .p9{right:2%;top:36%;transform:rotate(4deg)}
.board .p10{left:40%;top:38%;transform:rotate(5deg)}
.board .p11{left:8%;top:44%;transform:rotate(-4deg)}
.board .p12{right:2%;top:46%;transform:rotate(-3deg)}
.board .p13{left:62%;top:50%;transform:rotate(3deg)}
.board .p14{left:12%;top:56%;transform:rotate(5deg)}
.board .p15{right:2%;top:57%;transform:rotate(5deg)}
.board .p16{left:52%;top:64%;transform:rotate(-3deg)}
.board .p17{left:86%;top:70%;transform:rotate(-6deg)}
.board .p18{left:26%;top:70%;transform:rotate(-4deg)}
.board .p19{left:6%;top:76%;transform:rotate(4deg)}
.board .p20{right:2%;top:78%;transform:rotate(-4deg)}
.board .p21{left:64%;top:82%;transform:rotate(-4deg)}
.board .p22{right:2%;top:88%;transform:rotate(3deg)}
.board .p23{left:18%;top:88%;transform:rotate(6deg)}
.board .p24{left:50%;top:93%;transform:rotate(3deg)}
.board .p25{left:76%;top:96%;transform:rotate(-5deg)}