/* The stage behind every page: notebook paper with floating annotations. Pair with the .bg block in the page.
   Paper: faint ruled lines breathing up one line every 24s, a pink margin line, and now and then a pen writing a
   short scribble in the margin (tick, circle, "?", wave, star, "ok") that holds, then fades. The margin sits
   just outside the 1180px content column; below that width there is no margin, so the scribbles are hidden.
   Marks: nine hand-drawn annotations in the neon inks rise like confetti along the edges; each draws itself as it
   enters, sways, floats up over 31–45s, then fades. Everything is CSS keyframes on transforms, dashes and
   opacity; nothing runs per frame. Reduced motion: still paper, the finished scribbles, the marks parked. */
.bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;--mg:clamp(82px,calc((100% - 1180px)/2 + 42px),210px)}
.bg .rule{position:absolute;left:0;right:0;top:0;bottom:-44px;background:repeating-linear-gradient(to bottom,transparent 0 43px,rgba(244,241,234,.07) 43px 44px);will-change:transform}
.bg .mg{position:absolute;top:0;bottom:0;left:var(--mg);width:2px;background:rgba(255,45,138,.24)}
.bg .sc{position:absolute;left:0;top:0;width:var(--mg);height:100%;overflow:visible}
.bg .sc path{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;stroke-dasharray:1 1.5;stroke-dashoffset:1.06}
.bg .mk{position:absolute;left:var(--x);top:100%;width:var(--s,48px);height:var(--s,48px);color:var(--c);opacity:0;will-change:transform,opacity}
.bg .mk svg{width:100%;height:100%;overflow:visible}
.bg .mk path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1.5;stroke-dashoffset:1.06}
@media(max-width:1236px){.bg .sc{display:none}}
@media(prefers-reduced-motion:no-preference){
 .bg .rule{animation:bg-drift 24s linear infinite}
 .bg .sc path{animation:bg-scrib var(--d,18s) linear var(--dl,0s) infinite}
 .bg .mk{animation:bg-float var(--d) linear var(--dl) infinite}
 .bg .mk svg{animation:bg-sway var(--sw,7s) ease-in-out var(--dl) infinite alternate}
 .bg .mk path{animation:bg-draw var(--d) linear var(--dl) infinite}
 @keyframes bg-drift{to{transform:translateY(-44px)}}
 @keyframes bg-scrib{0%{opacity:0;stroke-dashoffset:1.06}2%{opacity:.5}16%{stroke-dashoffset:0;animation-timing-function:ease-in-out}38%{opacity:.5;stroke-dashoffset:0}52%{opacity:0;stroke-dashoffset:0}100%{opacity:0;stroke-dashoffset:0}}
 @keyframes bg-float{0%{transform:translateY(0);opacity:0}5%{opacity:.32}82%{opacity:.32}100%{transform:translateY(calc(-100vh - 120px));opacity:0}}
 @keyframes bg-draw{0%{stroke-dashoffset:1.06}9%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
 @keyframes bg-sway{from{transform:rotate(-8deg) translateX(-6px)}to{transform:rotate(7deg) translateX(6px)}}
}
@media(prefers-reduced-motion:reduce){
 .bg .sc path{opacity:.4;stroke-dashoffset:0;stroke-dasharray:none}
 .bg .mk{opacity:.3;transform:translateY(calc(-1 * var(--p)))}.bg .mk path{stroke-dashoffset:0}
}