.course-readable .cogfun-diagram{margin:1.5rem 0 2rem;padding:1rem;border:2px solid #b7cdc1;border-radius:22px;background:#f3f8f1;color:#173f43;text-align:start;box-shadow:0 5px 0 #e2d8bd}
.cogfun-diagram figcaption{font-weight:700;margin-bottom:.9rem}
.cogfun-diagram ol{display:flex;gap:.8rem;list-style:none;padding:0;margin:0;counter-reset:way}
.cogfun-diagram li{counter-increment:way;position:relative;flex:1;min-width:0;padding:1rem .75rem;border-radius:16px;background:#fff9e8;border:1px solid #b7b09a;text-align:start;font-weight:600;line-height:1.45}
.cogfun-diagram li::before{content:counter(way);display:block;width:2rem;height:2rem;margin:0 auto .6rem;border-radius:50%;background:#116864;color:white;line-height:2rem;text-align:center}
.cogfun-diagram :focus-visible{outline:3px solid #823b12;outline-offset:3px}
@media(max-width:620px){.cogfun-diagram ol{flex-direction:column}.cogfun-diagram li{text-align:start}.cogfun-diagram li::before{display:inline-block;margin:0 0 0 .7rem}}
/* Unit 5's scene seam is y=488, not 512. Exclude two pixels on each side
   of the seam to avoid blended WebP edge pixels; preserve each scene's ratio. */
.course-story[data-course="cogfun"][data-unit="5"] .story-picture:is([data-frame="0"],[data-frame="1"]){aspect-ratio:768/486}
.course-story[data-course="cogfun"][data-unit="5"] .story-picture:is([data-frame="0"],[data-frame="1"]) img{height:calc(102400% / 486)}
.course-story[data-course="cogfun"][data-unit="5"] .story-picture:is([data-frame="2"],[data-frame="3"]){aspect-ratio:768/534}
.course-story[data-course="cogfun"][data-unit="5"] .story-picture:is([data-frame="2"],[data-frame="3"]) img{height:calc(102400% / 534);top:calc(-49000% / 534)}