.mydev-illustration{position:relative;width:100%;margin:0;min-inline-size:0}
.mydev-illustration__stage{position:relative}
.mydev-illustration__stage>picture{display:block}
.mydev-illustration .mydev-illustration__image{display:block;width:100%;max-width:100%;height:auto}
.mydev-illustration .mydev-illustration__overlay{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
.mydev-illustration--float .mydev-illustration__stage{animation:mydev-illustration-float 7s ease-in-out infinite}
.mydev-illustration--fade .mydev-illustration__stage{mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent)}
@keyframes mydev-illustration-float{50%{transform:translateY(-8px)}}
@media(prefers-reduced-motion:reduce){.mydev-illustration--float .mydev-illustration__stage{animation:none}.mydev-illustration__overlay{display:none}}

.mydev-illustration{transform:translateX(var(--mydev-illustration-shift,0px))}
.mydev-illustration:dir(rtl){transform:translateX(calc(-1 * var(--mydev-illustration-shift,0px)))}

/* Captioned media remains an editable figure, reusable in any split-media section. */
.mydev-illustration__caption{padding-block-start:1rem;font-size:17px;line-height:1.7}
.mydev-illustration__caption-label{display:inline;color:var(--mydev-color-accent);font:400 9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em}
.mydev-illustration__caption-text{display:block;margin-block-start:8px;font-size:17px;font-weight:500;line-height:1.7}
.mydev-illustration--caption-overlay{overflow:hidden;border:1px solid color-mix(in srgb,var(--mydev-color-on-inverse) 16%,transparent);border-radius:16px;background:var(--mydev-color-surface-inverse);color:var(--mydev-color-on-inverse)}
.mydev-illustration--caption-overlay .mydev-illustration__stage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--mydev-color-surface-inverse) 88%,transparent));pointer-events:none}
.mydev-illustration--caption-overlay .mydev-illustration__caption{position:absolute;inset-inline:24px;inset-block-end:24px;padding:20px;border:1px solid color-mix(in srgb,var(--mydev-color-on-inverse) 14%,transparent);border-radius:10px;background:color-mix(in srgb,var(--mydev-color-surface-inverse) 82%,transparent)}