/* Local reserved surfaces; no full-page loading layer or hidden document text. */
.media-surface{position:relative;overflow:hidden;isolation:isolate;background-color:var(--bg)}
.media-fallback{position:absolute;inset:0;display:grid;place-content:center;padding:10px;text-align:center;font:600 12px/1.5 Manrope,Arial,sans-serif;color:var(--muted);overflow-wrap:anywhere;visibility:hidden;z-index:-1}
.media-surface img{z-index:0}
.media-skeleton{position:absolute;inset:0;pointer-events:none;visibility:hidden;background:color-mix(in srgb,var(--muted) 10%,var(--bg));z-index:1;overflow:hidden}
.media-skeleton:after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,color-mix(in srgb,var(--bg) 65%,transparent) 50%,transparent 80%);transform:translateX(-100%)}
[data-media-state="pending"]>.media-skeleton{visibility:visible}
[data-media-state="pending"]>.media-skeleton:after{animation:media-shimmer 1.8s ease-in-out 4}
[data-media-state="pending"] img,[data-media-state="error"] img{opacity:0}
[data-media-state="loaded"] img{opacity:1;transition:opacity .2s ease}
[data-media-state="loaded"]>.media-fallback{visibility:hidden}
[data-media-state="error"]>.media-fallback{visibility:visible;z-index:1}
[data-media-state="error"]{background:color-mix(in srgb,var(--muted) 7%,var(--bg))}
.brand-media{display:block;flex-shrink:0;background:transparent}
.brand-media .media-fallback{font-size:25px;font-weight:800;letter-spacing:-2px;padding:0;color:var(--ink)}
.case-image.media-surface img{width:100%;height:100%;aspect-ratio:16/9;object-fit:cover;object-position:center top}
.phone-screen>.media-fallback{font-size:8px;padding:4px}
.crew-portrait>.media-fallback,.person-identity>.media-fallback{font-size:28px;color:var(--ink)}
.scene-load-status{position:absolute;left:50%;bottom:42px;transform:translateX(-50%);font:10px/1.5 Manrope,Arial,sans-serif;color:var(--muted);white-space:nowrap;z-index:2}
[data-scene-state="ready"]>.scene-load-status{display:none}
[data-scene-state="pending"]>.scene-load-status:before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;margin-right:7px;animation:media-pulse 1.8s ease-in-out 4}
[data-load-visible="false"]>.media-skeleton:after,[data-load-visible="false"]>.scene-load-status:before,html[data-load-paused="true"] .media-skeleton:after,html[data-load-paused="true"] .scene-load-status:before,html[data-motion="paused"] .media-skeleton:after,html[data-motion="paused"] .scene-load-status:before{animation-play-state:paused}
@keyframes media-shimmer{to{transform:translateX(100%)}}
@keyframes media-pulse{50%{opacity:.3}}
@media(prefers-reduced-motion:reduce){.media-skeleton:after,.scene-load-status:before{animation:none!important}[data-media-state="loaded"] img{transition:none}}
@media print{.media-skeleton,.scene-load-status{display:none!important}.media-surface img{opacity:1!important}}
.robot-stage>.scene-load-status{top:54px;bottom:auto;left:24px;transform:none}
@media(max-width:600px){.robot-stage>.scene-load-status{left:0;top:40px;font-size:9px}}

/* Keep image layout/phone flex ownership while picture selects the source. */
.responsive-media{display:contents}