.ipm-viewer {
  --ipm-background: #f3f4f6;
  --ipm-accent: #1f2937;
	--ipm-hover: #374151;
	--ipm-active: #111827;
  --ipm-max-width: 1200px;
  width: 100%;
  max-width: var(--ipm-max-width);
  margin: 0 auto;
  color: var(--ipm-accent);
  font-family: inherit;
  box-sizing: border-box;
}

.ipm-viewer *, .ipm-viewer *::before, .ipm-viewer *::after { box-sizing: border-box; }
.ipm-status { padding: 28px; text-align: center; background: var(--ipm-background); border-radius: 8px; }
.ipm-stage { position: relative; padding: clamp(12px, 3vw, 36px) clamp(40px, 5vw, 70px); background: var(--ipm-background); border-radius: 10px; overflow: hidden; outline: none; }
.ipm-stage:focus-visible { outline: 3px solid color-mix(in srgb, var(--ipm-accent) 55%, transparent); outline-offset: 3px; }
.ipm-pages { width: 100%; min-height: 180px; display: flex; justify-content: center; align-items: center; gap: 4px; perspective: 1800px; transform-origin: center; }
.ipm-page { position: relative; flex: 0 1 50%; max-width: 50%; background: #fff; overflow: hidden; transform-origin: center center; }
.ipm-pages > .ipm-page:only-child { flex-basis: 50%; max-width: 50%; }
.ipm-single-page-view .ipm-page, .ipm-single-page-view .ipm-pages > .ipm-page:only-child { flex-basis: 82%; max-width: 82%; }
.ipm-page canvas { display: block; width: 100% !important; height: auto !important; background: #fff; }
.ipm-with-shadow .ipm-page { box-shadow: 0 12px 30px rgba(15, 23, 42, .20); }
.ipm-blank-page { aspect-ratio: 0.707 / 1; background: rgba(255,255,255,.65); }
.ipm-page-error { min-height: 260px; display: grid; place-items: center; padding: 20px; text-align: center; }
.ipm-page:first-child:not(:only-child)::after { content: ''; position: absolute; inset: 0 0 0 auto; width: 18px; background: linear-gradient(to left, rgba(0,0,0,.13), transparent); pointer-events: none; }
.ipm-page:last-child:not(:only-child)::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 18px; background: linear-gradient(to right, rgba(0,0,0,.11), transparent); pointer-events: none; }

.ipm-toolbar { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 14px; padding-top: 12px; }
.ipm-counter { min-width: 74px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.ipm-text-nav, .ipm-side-nav { border: 0; cursor: pointer; font: inherit; color: #fff; background: var(--ipm-accent); transition: opacity .18s ease, transform .18s ease, background-color .18s ease; }
.ipm-text-nav { min-width: 90px; padding: 9px 16px; border-radius: 5px; }
.ipm-side-nav { position: absolute; z-index: 5; top: 50%; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 999px; transform: translateY(-50%); font-size: 34px; line-height: 1; }
.ipm-side-nav.ipm-prev { left: 12px; }
.ipm-side-nav.ipm-next { right: 12px; }
.ipm-text-nav:hover, .ipm-side-nav:hover { transform: translateY(-1px); background: var(--ipm-hover); }
.ipm-side-nav:hover { transform: translateY(-50%) scale(1.05); }
.ipm-text-nav:active, .ipm-side-nav:active { background: var(--ipm-active); }
.ipm-text-nav:disabled, .ipm-side-nav:disabled { opacity: .25; cursor: default; }
.ipm-download { display: none; color: var(--ipm-accent); font-size: 14px; }
.ipm-download:hover { color: var(--ipm-hover); }
.ipm-download:active { color: var(--ipm-active); }
.ipm-show-download .ipm-download { display: inline; }
.ipm-hide-counter .ipm-counter { display: none; }
.ipm-view-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border: 1px solid var(--ipm-accent); border-radius: 5px; color: var(--ipm-accent); background: transparent; cursor: pointer; font: inherit; font-size: 14px; transition: color .18s ease, background-color .18s ease, border-color .18s ease; }
.ipm-single-page-view .ipm-view-toggle { color: #fff; border-color: var(--ipm-active); background: var(--ipm-active); }
.ipm-view-toggle:hover { color: #fff; border-color: var(--ipm-hover); background: var(--ipm-hover); }
.ipm-view-toggle:active { color: #fff; border-color: var(--ipm-active); background: var(--ipm-active); }
.ipm-view-toggle-icon { position: relative; width: 14px; height: 14px; display: inline-block; border: 2px solid currentColor; border-radius: 50%; }
.ipm-view-toggle-icon::after { content: ''; position: absolute; width: 6px; height: 2px; right: -5px; bottom: -2px; border-radius: 2px; background: currentColor; transform: rotate(45deg); transform-origin: left center; }

.ipm-navigation-buttons .ipm-side-nav { display: none; }
.ipm-navigation-arrows .ipm-text-nav, .ipm-navigation-edges .ipm-text-nav { display: none; }
.ipm-navigation-edges .ipm-side-nav { top: auto; bottom: 10px; width: 58px; height: 58px; border-radius: 0; transform: none; background: transparent; color: transparent; overflow: hidden; }
.ipm-navigation-edges .ipm-side-nav::after { content: ''; position: absolute; bottom: 0; border-style: solid; filter: drop-shadow(0 2px 2px rgba(0,0,0,.18)); transition: transform .18s ease; }
.ipm-navigation-edges .ipm-prev::after { left: 0; border-width: 0 0 48px 48px; border-color: transparent transparent var(--ipm-accent) transparent; }
.ipm-navigation-edges .ipm-next::after { right: 0; border-width: 0 48px 48px 0; border-color: transparent var(--ipm-accent) transparent transparent; }
.ipm-navigation-edges .ipm-prev:hover::after { border-bottom-color: var(--ipm-hover); }
.ipm-navigation-edges .ipm-next:hover::after { border-right-color: var(--ipm-hover); }
.ipm-navigation-edges .ipm-prev:active::after { border-bottom-color: var(--ipm-active); }
.ipm-navigation-edges .ipm-next:active::after { border-right-color: var(--ipm-active); }
.ipm-navigation-edges .ipm-side-nav:hover { transform: none; }
.ipm-navigation-edges .ipm-side-nav:hover::after { transform: scale(1.1); }

.ipm-animation-flip .ipm-pages.is-animating[data-direction="next"] { animation: ipm-flip-next .46s ease both; }
.ipm-animation-flip .ipm-pages.is-animating[data-direction="previous"] { animation: ipm-flip-prev .46s ease both; }
.ipm-animation-slide .ipm-pages.is-animating[data-direction="next"] { animation: ipm-slide-next .34s ease both; }
.ipm-animation-slide .ipm-pages.is-animating[data-direction="previous"] { animation: ipm-slide-prev .34s ease both; }
.ipm-animation-fade .ipm-pages.is-animating { animation: ipm-fade .28s ease both; }
@keyframes ipm-flip-next { from { opacity: .35; transform: rotateY(-12deg) scale(.985); } to { opacity: 1; transform: rotateY(0) scale(1); } }
@keyframes ipm-flip-prev { from { opacity: .35; transform: rotateY(12deg) scale(.985); } to { opacity: 1; transform: rotateY(0) scale(1); } }
@keyframes ipm-slide-next { from { opacity: .35; transform: translateX(5%); } to { opacity: 1; transform: translateX(0); } }
@keyframes ipm-slide-prev { from { opacity: .35; transform: translateX(-5%); } to { opacity: 1; transform: translateX(0); } }
@keyframes ipm-fade { from { opacity: .15; } to { opacity: 1; } }

.ipm-mobile-view .ipm-pages { display: block; }
.ipm-mobile-view .ipm-page, .ipm-mobile-view .ipm-pages > .ipm-page:only-child { width: 100%; max-width: 100%; }
.ipm-mobile-view .ipm-stage { padding: 12px 38px; }
.ipm-mobile-view .ipm-side-nav { width: 34px; height: 34px; font-size: 28px; }
.ipm-mobile-view .ipm-side-nav.ipm-prev { left: 3px; }
.ipm-mobile-view .ipm-side-nav.ipm-next { right: 3px; }
.ipm-mobile-view .ipm-view-toggle { display: none; }

.ipm-notice { padding: 14px 18px; border-left: 4px solid #dba617; background: #fff8e5; }

@media (max-width: 679px) {
  .ipm-viewer .ipm-pages { display: block; }
  .ipm-viewer .ipm-page, .ipm-viewer .ipm-pages > .ipm-page:only-child { width: 100%; max-width: 100%; }
  .ipm-viewer .ipm-stage { padding: 12px 38px; }
  .ipm-viewer .ipm-toolbar { gap: 8px; }
	.ipm-viewer .ipm-view-toggle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ipm-pages { animation: none !important; }
  .ipm-text-nav, .ipm-side-nav { transition: none; }
}