/* Trophic mockups: only what every page needs. Identity (palette, fonts, texture) lives in each page. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-variant-numeric:oldstyle-nums proportional-nums;font-feature-settings:"onum" 1,"pnum" 1,"kern" 1,"liga" 1;overflow-x:clip}
h1,h2,h3,h4,p,figure,dl,dd,ol,ul{margin:0;padding:0}
ol,ul{list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
img,svg{display:block;max-width:100%}
p,li,dd,figcaption{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
:focus-visible{outline:2px solid var(--flow,#b3122a);outline-offset:3px}

/* engine objects */
.k-svg{width:100%;height:auto;overflow:visible;color:inherit}
.k-svg text{fill:currentColor;font-family:inherit;font-feature-settings:"onum" 1}
.k-hair{stroke:currentColor;fill:none;vector-effect:non-scaling-stroke}
.k-flow{stroke:var(--flow,#b3122a);fill:none;vector-effect:non-scaling-stroke}
.k-flowfill{fill:var(--flow,#b3122a)}
text.k-flowtext{fill:var(--flow,#b3122a)}
.k-run{stroke-dasharray:3 7;animation:k-run 2.4s linear infinite}
@keyframes k-run{to{stroke-dashoffset:-40}}

/* illustration slot: an asset, drawn after the choice. Each page restyles it to belong to its composition. */
.asset{position:relative;display:grid;place-items:end start;background-image:repeating-linear-gradient(135deg,color-mix(in srgb,currentColor 16%,transparent) 0 1px,transparent 1px 7px)}
.asset::before,.asset::after{content:"";position:absolute;width:13px;height:13px;border:1px solid currentColor;opacity:.75}
.asset::before{left:8px;top:8px;border-right:0;border-bottom:0}
.asset::after{right:8px;bottom:8px;border-left:0;border-top:0}
.asset figcaption{padding:12px 14px;font-size:12px;line-height:1.3;font-style:italic}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}