/* Opaque animated portraits blend into each guide's own background color. */
body[data-character-edges] .character-motion.guide-character-art{background:none;aspect-ratio:768/1168}
.character-motion img{display:block;width:100%;height:auto;margin:0}
.character-motion::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(to right,var(--bg),transparent 15%,transparent 85%,var(--bg)),linear-gradient(to bottom,var(--bg),transparent 10%,transparent 78%,var(--bg))}
.character-motion button{right:18%}

body[data-character-edges] .character-motion.guide-character-art{transform:translateX(14%)!important}
body[data-character-edges] .guide-character-layout--reverse .character-motion.guide-character-art{transform:translateX(-14%)!important}

/* Keep artwork inside its own grid track; reversed Nellie layouts bleed left. */
body[data-character-edges] :is(.guide-character-layout,.nellie-character-layout) > :is(.guide-character-art,.nellie-character){width:min(100%,720px)!important;max-width:100%!important}
body[data-character-edges] :is(.guide-character-layout--reverse,.nellie-character-layout--reverse) > .character-motion.guide-character-art{transform:translateX(-14%)!important}
@media(max-width:900px){body[data-character-edges] :is(.guide-character-layout,.nellie-character-layout) > :is(.guide-character-art,.nellie-character){width:min(86vw,560px)!important;max-width:86vw!important}}