.demo-image-wrap {
  touch-action: pan-y pinch-zoom;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  isolation: isolate;
}
.demo-image-wrap:focus-visible { outline: 3px solid #eb87a6; outline-offset: -4px; }
.demo-image-wrap.is-dragging { cursor: grabbing; }
.demo-slide {
  position: absolute;
  inset: 0;
  background: #f9f9fb;
  transform: translateX(110%);
  will-change: transform;
  overflow: hidden;
}
.demo-slide.is-active { transform: none; }
.demo-slide img { width: 100%; height: 100%; object-fit: cover; object-position: top; pointer-events: none; }
.export-slide > img { filter: blur(5px); opacity: .62; transform: scale(1.045); }
.export-slide::after { content: ""; position: absolute; inset: 0; background: #ffffffe0; opacity: .36; pointer-events: none; }
.export-formats {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: min(740px, 100%);
  margin: auto;
  padding: 32px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  align-content: center;
  pointer-events: none;
}
.format-item { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.format-item svg { width: 68px; height: 68px; stroke-width: 1.45; filter: drop-shadow(0 3px 7px #ffffffd9); }
.format-item strong { font-size: 21px; line-height: 1.4; font-weight: 700; color: #3a3742; }
.format-jpg { color: #4479c4; }
.format-png { color: #288c72; }
.format-pdf { color: #d25b70; }
.format-ppt { color: #cf8535; }
.dialog-export-stage { aspect-ratio: 1248 / 654; overflow: hidden; }
.dialog-export-stage > .export-slide { position: relative; width: 100%; height: 100%; transform: none; }
.demo-caption > div:first-child { min-width: 0; }
#toggle-autoplay[aria-pressed=true] { color: var(--brand); background: #fff2f6; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media(max-width:600px) {
  .demo-caption { min-height: 72px; align-items: flex-start; }
  .demo-caption > div:first-child { flex: 1; }
  .preview-navigation { padding-top: 2px; gap: 4px; }
  .demo-slide img { width: 150%; max-width: none; height: auto; object-position: top left; }
  .export-formats { gap: 12px; padding: 20px; }
  .format-item { gap: 14px; }
  .format-item svg { width: 43px; height: 43px; }
  .format-item strong { font-size: 14px; }
  .dialog-export-stage .format-item svg { width: 32px; height: 32px; }
}