/* Exclusive SVG story scene presentation. The parent landing or story slide
   owns its background; do not create another inset card. */
.ralph-illustration{position:relative;isolation:isolate;width:100%;min-width:0}
.ralph-illustration :is(img,object){display:block;width:100%;height:auto;aspect-ratio:9/5;object-fit:contain}
.ralph-illustration :is(img,object)[hidden]{display:none!important}
.ralph-illustration-toggle{
 position:absolute;right:clamp(5px,1.2vw,13px);bottom:clamp(5px,1.2vw,13px);
 z-index:2;width:40px;height:40px;display:flex;align-items:center;justify-content:center;
 border:1px solid #d9e5ef;background:rgba(255,255,255,.96);
 color:#213c56;border-radius:999px;cursor:pointer;
 box-shadow:0 2px 12px rgba(17,48,80,.08)
}
.ralph-illustration-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ralph-illustration-toggle .play-icon{display:none}
.ralph-illustration-toggle[aria-pressed="true"] .pause-icon{display:none}
.ralph-illustration-toggle[aria-pressed="true"] .play-icon{display:block}
.ralph-illustration-toggle:focus-visible{outline:3px solid #176cda;outline-offset:3px}
.ralph-illustration-toggle:hover{background:#f2f7fc}
.ralph-illustration-scene--clinician .ralph-illustration{max-width:1100px;margin:auto}
@media(prefers-reduced-motion:reduce){.ralph-illustration-toggle{display:none}}

/* Make both layers fill a stable 9:5 stage, including while loading. */
.ralph-illustration{aspect-ratio:9/5}
.ralph-illustration :is(img,object){position:absolute!important;inset:0;width:100%;height:100%}
.ralph-illustration object.ralph-illustration-motion{z-index:1}
.ralph-illustration img.ralph-illustration-still{z-index:0}

/* An external SVG object exposes its CSS animation timeline to same-origin WAAPI. */
.ralph-illustration object.ralph-illustration-motion {border:0;background:transparent;pointer-events:none}
