/* Post visuals (owner, 25 Oct 2026; inc/post-visuals.php, docs/content/OUTLINE.md): the motion hero and the body visuals.
   The demo, the steps row and the problem cards reuse demo.css, apps.css and home.css; this sheet adds only what posts need. */
:root{--red:#D6362B}
/* Motion hero: a frame of fixed shape, sized in container units so the page and the 1200 x 630 share image are one design */
.post-head .wrap>.mh-wrap{grid-column:1/-1;grid-row:2;margin:0}
.post-head .wrap>.build-card{grid-column:2;grid-row:1}
.mh{position:relative;margin:0;aspect-ratio:1200/630;container-type:inline-size;font-size:1.3cqi}
.mh-in{position:absolute;inset:10px 0 0;padding:2.2cqi 3.6cqi 0;display:flex;flex-direction:column}
.mh-k{margin:0;display:flex;justify-content:space-between;font:700 1em/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#C9CDD1}
.mh-k b{color:var(--yellow)}
.mh-track{position:relative;margin:2.2cqi 0 0}
.mh-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.mh-steps li{position:relative;display:grid;justify-items:center;gap:.9cqi;text-align:center;color:#8C9399;font-weight:700;line-height:1.15;transition:color .4s}
.mh-steps li:before{content:"";position:absolute;top:1.6cqi;right:50%;width:100%;border-top:.25cqi dashed #4A4F54}
.mh-steps li:first-child:before{display:none}
.mh-steps i{position:relative;z-index:1;display:grid;place-items:center;width:3.3cqi;height:3.3cqi;border-radius:50%;border:.2cqi solid #4A4F54;background:var(--char);font:800 1.15em var(--mono);font-style:normal;transition:background .4s,border-color .4s,color .4s}
.mh:not(.run) .mh-steps li.on,.mh.run .mh-steps li.v{color:#fff}
.mh:not(.run) .mh-steps li.on i,.mh.run .mh-steps li.v i{background:var(--orange);border-color:var(--orange);color:var(--char)}
.mh-dot{position:absolute;top:-.6cqi;left:calc((var(--s) + .5) / var(--n) * 100%);width:4.5cqi;height:4.5cqi;margin-left:-2.25cqi;border-radius:50%;border:.3cqi solid var(--yellow);transition:left .6s var(--ease-out),border-color .4s}
.mh[data-t=bad] .mh-dot{border-color:var(--red)}
.mh-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);gap:4cqi;align-items:center}
.mh-doc{background:var(--sheet);color:var(--char);border-radius:4px;box-shadow:.6cqi .6cqi 0 rgba(0,0,0,.45);overflow:hidden}
.mh-dh{margin:0;display:flex;justify-content:space-between;gap:1cqi;padding:.9cqi 1.4cqi;background:var(--paper-2);font:700 .95em var(--mono);text-transform:uppercase;letter-spacing:.05em}
.mh-dh em{font-style:normal;border:.15cqi solid var(--char);padding:0 .6cqi}
.mh-dt{margin:0;padding:1cqi 1.4cqi 0;font:800 1.55em/1 var(--display);text-transform:uppercase}
.mh-doc ul{list-style:none;margin:.6cqi 0 0;padding:0}
.mh-doc li{position:relative;display:flex;justify-content:space-between;gap:1cqi;padding:.75cqi 4.2cqi .75cqi 1.4cqi;border-top:.1cqi dashed var(--line);font-size:1.05em;transition:background .4s,box-shadow .4s}
.mh-doc li b{font-family:var(--mono)}
.mh:not(.run) .mh-doc li:has(.bad.on),.mh.run .mh-doc li:has(.bad.v){background:#FBE1E1;box-shadow:inset .5cqi 0 var(--red)}
.mk{position:absolute;right:1.2cqi;top:50%;width:2.2cqi;height:2.2cqi;margin-top:-1.1cqi;border-radius:50%;display:grid;place-items:center;font:800 .9em var(--body);font-style:normal;background:#3DD27A;color:var(--char)}
.mk.bad{background:var(--red);color:#fff}
.mh-notes{display:grid}
.mh-notes>p{grid-area:1/1;margin:0;padding:.8cqi 1.4cqi;font:700 .95em var(--mono);text-transform:uppercase;letter-spacing:.04em;background:var(--yellow);color:var(--char)}
.mh-note.t-bad{background:var(--red);color:#fff}
.mh-note.t-ok{background:#3DD27A}
.mh-say{display:grid;align-content:center;gap:1.6cqi}
.mh-say>.mh-cap,.mh-say>.mh-end{grid-area:2/1;margin:0;align-self:start}
.mh-cap{font:800 3.1em/1 var(--display);text-transform:uppercase;letter-spacing:-.01em;color:#fff}
.mh-cap i{display:block;margin-bottom:1cqi;font:700 .32em var(--mono);color:var(--orange);letter-spacing:.08em}
.mh-end{font:800 3.5em/1.08 var(--display);text-transform:uppercase;letter-spacing:-.01em;color:var(--char)}
.mh-end span{background:var(--yellow);padding:0 .12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.mh-count{grid-area:1/1;margin:0;display:flex;align-items:baseline;gap:1.2cqi;color:#C9CDD1;font:700 1em var(--mono);text-transform:uppercase}
.mh-count b{font:800 6em/.8 var(--display);color:var(--yellow)}
.mh-bars{display:grid;gap:1.8cqi}
.mh-u{margin:0;font:700 .95em var(--mono);text-transform:uppercase;color:#C9CDD1}
.mh-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5cqi 1.4cqi;align-items:center;color:#fff;font-weight:700;font-size:1.15em}
.mh-bar span{grid-column:1/3}
.mh-bar svg{display:block;width:100%;height:4.4cqi}
.mh-bar rect{fill:#E6E8EA;transform:scaleX(var(--v));transition:transform .6s var(--ease-out),opacity .45s}
.mh-bar .mh-hl{fill:var(--orange)}
.mh-bar b{font:800 1.4em var(--mono);color:var(--yellow)}
.mh-foot{margin:auto -3.6cqi 0;padding:1.2cqi 3.6cqi;font:.9em var(--mono);color:#9CA2A8;border-top:.1cqi solid var(--char-3)}
.mh-re{position:absolute;right:2.4cqi;bottom:.7cqi;min-height:44px;padding:4px 14px;border:2px solid var(--char-3);border-radius:4px;background:var(--char);color:#fff;font:700 .9rem var(--body);cursor:pointer}
.mh-re:hover{border-color:#fff}
.mh-re[hidden]{display:none}
/* Final frame (no JavaScript, reduced motion, share image): captions stay out; while playing, every part waits for its beat */
.mh:not(.run) [data-in]:not(.on){display:none}
.mh.run [data-in]{transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.mh.run [data-in]:not(.v){opacity:0}
.mh.run .mh-doc li:not(.v),.mh.run .mh-cap:not(.v),.mh.run .mh-end:not(.v){transform:translateY(1cqi)}
/* Captions take turns: the old one leaves fast, the new one waits for it, so two never overlap */
.mh.run .mh-cap:not(.v),.mh.run .mh-end:not(.v){transition-duration:.15s}
.mh.run .mh-cap.v,.mh.run .mh-end.v{transition-delay:.15s}
.mh.run .mk:not(.v){transform:scale(.3)}
.mh.run .mh-bar:not(.v) rect{transform:scaleX(0)}
@media (max-width:700px){
  .mh{aspect-ratio:3/4;font-size:3.6cqi;box-shadow:6px 6px 0 var(--orange)}
  .mh-in{padding:3.5cqi 4cqi 0}
  .mh-k{font-size:.92em}.mh-k b{display:none}
  .mh-track{margin-top:4cqi}
  .mh-steps{column-gap:1.4cqi}
  .mh-steps li{gap:1.6cqi;font-size:.78em}
  .mh-steps li:before{top:4cqi;border-top-width:.6cqi}
  .mh-steps i{width:8cqi;height:8cqi;border-width:.5cqi}
  .mh-dot{width:11cqi;height:11cqi;margin-left:-5.5cqi;top:-1.5cqi;border-width:.8cqi}
  .mh-body{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;gap:4cqi;align-items:start;padding-top:4cqi}
  .mh-dh,.mh-doc li,.mh-notes>p{padding-left:3cqi}
  .mh-dh,.mh-notes>p{padding-top:1.6cqi;padding-bottom:1.6cqi}
  .mh-doc li{padding-top:1.5cqi;padding-bottom:1.5cqi;padding-right:9cqi}
  .mh-dt{display:none}
  .mk{width:5.5cqi;height:5.5cqi;margin-top:-2.75cqi;right:2.5cqi}
  .mh-say{gap:2cqi}.mh-cap{font-size:1.75em}.mh-end{font-size:1.9em}.mh-cap i{margin-bottom:1cqi}
  .mh-count b{font-size:3em}
  .mh-bar svg{height:6cqi}
  .mh-foot{margin:auto -4cqi 0;padding:2.5cqi 30cqi 2.5cqi 4cqi;font-size:.8em}
  .mh-re{bottom:1.2cqi;right:3cqi;min-height:40px}
}
@media (max-width:1000px){.post-head .wrap>.mh-wrap,.post-head .wrap>.build-card{grid-column:auto;grid-row:auto}}
/* Body visuals in the post column */
.wbv{margin:1.6rem 0 2rem}
.prose .wbv-demo .story{margin:0}
.wbv-steps .aiw-flow{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 20px}
.wbv-steps .aiw-flow.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
.wbv-steps .aiw-flow>li.ai{grid-column:auto}
.wbv-steps .aiw-flow:not(.n4)>li:nth-child(3n):after,.wbv-steps .aiw-flow.n4>li:nth-child(2n):after{display:none}
.wbv-steps .aiw-flow>li>b{font-size:1.3rem}
.wbv-steps .aiw-end{margin:22px 0 0}
.wbv-problems{gap:18px}
.wbv-problems.n2,.wbv-problems.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
.wbv-problems .pain{padding:18px}.wbv-problems .pain h3{margin:0 0 8px;font-size:1.35rem}
.prose .faq.more{columns:auto;margin:0 0 1.2rem}
.pv-doc .art{width:100%;padding:6px 8px;border:1px solid var(--line);background:var(--white);font:.72rem/1.35 var(--mono)}
.pv-doc .art-ai dt{color:var(--muted)}.pv-doc .art-ai .note{color:var(--brass);border-top-color:var(--line)}
/* Charts: the finding is the title; marks are SVG, words are text */
.vch{padding:20px 22px 16px;background:var(--sheet);border:2px solid var(--char);box-shadow:6px 6px 0 var(--char)}
.vch-t{font:800 1.5rem/1.05 var(--display);text-transform:uppercase;letter-spacing:-.01em}
.vch-u,.vch-s{margin:6px 0 14px;font:700 .74rem var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.vch-s{margin:4px 0 0;text-transform:none;letter-spacing:0}
.vch-n{margin:14px 0 0;padding-top:10px;border-top:1px dashed var(--line);font-size:.92rem}
.vch-bars{display:grid;gap:10px}
.vch-r{display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr) auto;gap:4px 12px;align-items:center;font-size:.92rem}
.vch-r svg{display:block;width:100%;height:22px}
.vch-r rect{fill:var(--char)}
.vch-r.hi rect{fill:var(--orange)}
.vch-r b{font-family:var(--mono)}
.vch-plot{position:relative;margin-left:2.6rem;height:200px;border-left:2px solid var(--char)}
.vch-plot svg{display:block;width:100%;height:100%;overflow:visible}
.vch-plot .g{stroke:var(--line);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.vch polyline,.vch-k li:before{fill:none;stroke:var(--orange);stroke-width:3;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.vch polyline.s1,.vch-k .s1:before{stroke:var(--char);background:var(--char)}
.vch .s2{stroke:var(--brass);stroke-dasharray:6 4}
.vch-y i{position:absolute;right:calc(100% + 6px);font:.72rem var(--mono);font-style:normal;transform:translateY(-50%)}
.vch-y i:nth-child(2){top:50%}.vch-y i:nth-child(3){top:100%}
.vch-x{list-style:none;margin:6px 0 0 2.6rem;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));text-align:center;font:.72rem var(--mono)}
.vch-k{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:.85rem;font-weight:700}
.vch-k li:before{content:"";display:inline-block;width:18px;height:4px;margin-right:6px;vertical-align:middle;background:var(--orange)}
.vch-k .s2:before{background:repeating-linear-gradient(90deg,var(--brass) 0 6px,transparent 6px 9px)}
@media (max-width:700px){
  .wbv-problems.n2,.wbv-problems.n4,.wbv-steps .aiw-flow.n4{grid-template-columns:minmax(0,1fr)}
  .vch{padding:16px 14px 12px}
  .vch-r{grid-template-columns:minmax(0,1fr) auto}.vch-r .vch-l{grid-column:1/3}
  .vch-plot{height:160px}
}
/* "Typed again" pictures in post cards: the two records stacked, so they fit a narrow card */
.wbv-problems .pv-rekey{height:auto;min-height:124px;flex-direction:column;align-items:stretch;gap:4px}
.wbv-problems .pv-rekey .pv-app{flex:none;display:flex;flex-wrap:wrap;gap:0 8px;align-items:baseline;padding:5px 8px}
.wbv-problems .pv-rekey .again{display:flex;justify-content:center;align-items:center;gap:6px}
.wbv-problems .pv-rekey .again:before{content:"↓";font-size:1.1rem}