.site-body .content-image { margin: 2rem 0; }
.content-image__stage { position: relative; background: var(--site-surface-color); border-radius: 8px; overflow: hidden; }
.content-image__stage img { display: block; width: 100%; height: auto; color: var(--site-default-fg-color); filter: none !important; }
.site-body .content-image figcaption { margin: .75rem 0 0; color: var(--site-default-fg-color--light); font-size: 1rem; line-height: 1.65; }
.content-image__toolbar { display: flex; justify-content: flex-end; margin-top: .35rem; }
.content-image button, .content-image-dialog button { font: inherit; color: var(--site-default-fg-color); background: transparent; border: 1px solid var(--site-default-fg-color--lightest); border-radius: 6px; min-height: 44px; padding: .4rem .85rem; cursor: pointer; }
.content-image button:focus-visible, .content-image-dialog button:focus-visible { outline: 2px solid var(--site-primary-color); outline-offset: 3px; }
.content-image__status { position: absolute; left: 1rem; right: 1rem; top: 1rem; font-size: 1rem; color: var(--site-default-fg-color); pointer-events: none; }
.content-image__stage[data-state="ready"] .content-image__status { display: none; }
.content-image__stage[data-state="error"] img { opacity: 0; }
.content-image__retry { position: absolute; bottom: 1rem; left: 1rem; }
.content-image__retry[hidden] { display: none; }
.content-image-dialog { box-sizing: border-box; width: min(1120px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 16px; border: 1px solid var(--site-default-fg-color--lightest); border-radius: 12px; color: var(--site-default-fg-color); background: var(--reading-bg, var(--site-default-bg-color)); }
.content-image-dialog::backdrop { background: #000b; }
.content-image-dialog__close { display: block; margin: 0 0 12px auto; }
.content-image-dialog .content-image__stage img { max-height: calc(100dvh - 180px); width: 100%; object-fit: contain; }
.content-image-dialog p { margin: 12px 0 0; line-height: 1.6; font-size: 1rem; }
@media (prefers-reduced-motion: no-preference) { .content-image-dialog[open] { animation: content-image-in .15s ease-out; } @keyframes content-image-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } }