.ai-demo .help-figure { margin: 18px 0 24px; width: 100%; }
.ai-demo .help-image-open { display: block; width: 100%; padding: 0; border: 1px solid #e5e8ea; border-radius: 4px; overflow: hidden; background: #fff; cursor: zoom-in; }
.ai-demo .help-image-open img { display: block; width: 100%; height: auto; }
.ai-demo .help-image-open:focus-visible { outline: 2px solid #12afd2; outline-offset: 3px; }
.ai-demo .help-figure figcaption { margin-top: 6px; font-size: 12px; line-height: 1.4; color: #68747b; }
.ai-demo .help-image-dialog { width: min(1440px, calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); margin: auto; padding: 0; border: 0; border-radius: 6px; }
.ai-demo .help-image-dialog::backdrop { background: #172028cc; }
.ai-demo .help-image-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; flex: 0 0 auto; }
.ai-demo .help-image-toolbar button { min-height: 40px; padding: 6px 12px; font-size: 14px; line-height: 1.4; }
.ai-demo #helpImageClose { width: 40px; padding: 0; font-size: 28px; flex: 0 0 40px; }
.ai-demo .help-image-canvas { min-height: 0; overflow: auto; overscroll-behavior: contain; background: #f3f5f6; }
.ai-demo .help-image-canvas img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 80px); object-fit: contain; margin: auto; }
.ai-demo .help-image-dialog.is-zoomed .help-image-canvas img { max-width: none; max-height: none; margin: 0; }