/* Shared illustration system, including screens not yet migrated to the kit shell. */
.bth-story-image.aspect-video { aspect-ratio: 16 / 9; }
.bth-story-image[class~="aspect-[3/4]"] { aspect-ratio: 3 / 4; }
:where(.bth-kit-emoji) { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1em; height: 1em; vertical-align: middle; }
.bth-kit-emoji > .bth-kit-emoji-image { display: block; width: 100%; height: 100%; object-fit: contain; }
.bth-kit-cover-art { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; overflow: hidden; background: #e8dfcf; color: #44385c; }
.bth-kit-cover-art > svg { position: absolute; width: 32px; height: 32px; }
.bth-kit-cover-art > img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; }
.bth-cover-loading { background: var(--bth-surface-soft, hsl(var(--muted))); }
.bth-cover-image { opacity: 0; transition: opacity 150ms ease; }
.bth-cover-image.opacity-100 { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .bth-cover-loading { animation: none; }
    .bth-cover-image { transition: none; }
}