html.image-preview-open { overflow: hidden; }
.image-preview-trigger { cursor: zoom-in; }
button.image-preview-trigger { display: block; width: auto; max-width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; line-height: 0; }
.image-preview-trigger:focus-visible, .landing .image-preview-trigger:focus-visible { outline: 3px solid #3de6ff; outline-offset: -4px; }
.capture-frame > .image-preview-trigger { width: 100%; }
.world-previews .image-preview-trigger { width: 100%; height: 100%; }
.world-previews figcaption { pointer-events: none; }
.image-preview-dialog {
  width: fit-content; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px);
  margin: auto; padding: 0; border: 1px solid #466889; border-radius: 16px;
  background: #101d35; color: #eef3ff; box-shadow: 0 24px 90px #000a;
  font-family: var(--font-body, sans-serif); overflow: auto;
}
.image-preview-dialog::backdrop { background: #020817e8; backdrop-filter: blur(8px); }
.image-preview-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 12px 14px 12px 20px; border-bottom: 1px solid #304765; }
.image-preview-header h2 { font: 600 16px var(--font-display,sans-serif); margin: 0; }
.image-preview-close { flex-shrink: 0; width: 44px; height: 44px; border: 1px solid #456684; background: #192d48; color: #3de6ff; border-radius: 50%; font: 400 28px sans-serif; cursor: pointer; }
.image-preview-close:focus-visible { outline: 3px solid #3de6ff; outline-offset: 3px; }
.image-preview-body { margin: 0; padding: 16px; text-align: center; }
.image-preview-body img { display: block; width: auto; height: auto; max-width: min(100%,960px); max-height: calc(100dvh - 220px); margin-inline: auto; object-fit: contain; cursor: zoom-out; }
.image-preview-body img[hidden] { display: none; }
.image-preview-body figcaption { max-width: 640px; margin: 14px auto 0; color: #b2c3dc; font-size: 12px; line-height: 1.6; }
.image-preview-error { color: #ffbf87; font-size: 13px; padding: 20px; }
.image-preview-error[hidden] { display: none; }
@media (max-width: 480px) {
  .image-preview-dialog { max-width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
  .image-preview-header { padding-left: 14px; gap: 12px; }
  .image-preview-header h2 { font-size: 14px; }
  .image-preview-body { padding: 10px; }
  .image-preview-body img { max-height: calc(100dvh - 205px); }
  .badge-carousel-controls { gap: 8px; }
}