html.coa-viewer-open { overflow: hidden; }
.coa-viewer { width: min(980px, calc(100vw - 40px)); height: calc(100dvh - 44px); max-width: none; max-height: none; padding: 0; border: 1px solid #d9e4e8; border-radius: 18px; background: #f0f4f6; color: #193641; box-shadow: 0 24px 100px #102c3a38; overflow: hidden; }
.coa-viewer[open] { display: flex; flex-direction: column; animation: coa-viewer-unfurl 680ms linear both; }
.coa-viewer[open]::backdrop { background: #172c3f80; backdrop-filter: blur(4px); animation: coa-viewer-backdrop-in 390ms ease-out both; }
.coa-viewer[open].is-closing { animation: coa-viewer-refurl 390ms linear both; }
.coa-viewer[open].is-closing::backdrop { animation: coa-viewer-backdrop-out 390ms ease-in both; }
.coa-viewer[open]:not(.is-closing) .coa-viewer-head { animation: coa-viewer-head-in 220ms 340ms ease-out both; }
/* Two soft paper edges travel apart as the document unfurls from the centre. */
.coa-viewer[open]::before, .coa-viewer[open]::after { content: ""; position: absolute; z-index: 5; left: 0; right: 0; height: 13px; pointer-events: none; border-radius: 999px; background: linear-gradient(180deg, #fff, #d5e5eb 43%, #7896a4 58%, #f7fbfd); box-shadow: 0 3px 12px #183c4c2b; }
.coa-viewer[open]::before { animation: coa-viewer-edge-top 680ms linear both; }
.coa-viewer[open]::after { background: linear-gradient(0deg, #fff, #d5e5eb 43%, #7896a4 58%, #f7fbfd); animation: coa-viewer-edge-bottom 680ms linear both; }
.coa-viewer[open].is-closing::before { animation: coa-viewer-edge-top-close 390ms linear both; }
.coa-viewer[open].is-closing::after { animation: coa-viewer-edge-bottom-close 390ms linear both; }
.coa-viewer-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-shrink: 0; padding: 15px 19px; background: #fff; border-bottom: 1px solid #d9e4e8; }
.coa-viewer-heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
.coa-viewer-heading > svg { width: 22px; height: 22px; color: #416f80; flex-shrink: 0; }
.coa-viewer-heading strong { display: block; font-size: 13px; font-weight: 600; line-height: 1.5; }
.coa-viewer-source { display: block; font-size: 10px; color: #637c88; line-height: 1.6; }
.coa-viewer-count { font-size: 12px; color: #70838c; white-space: nowrap; }
.coa-viewer-actions { display: flex; align-items: center; gap: 12px; }
.coa-viewer-download { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #cbdce4; border-radius: 8px; padding: 8px 12px; font-size: 12px; color: #24586c; text-decoration: none; background: #fff; }
.coa-viewer-download svg { width: 15px; height: 15px; }
.coa-viewer-download:hover { background: #edf4f7; }
.coa-viewer-close { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 8px; font-size: 24px; font-weight: 400; color: #526b79; background: transparent; cursor: pointer; }
.coa-viewer-close:hover { background: #edf4f7; }
.coa-viewer :focus-visible { outline: 2px solid #39788f; outline-offset: 3px; }
.coa-viewer-scroll { overflow: auto; overscroll-behavior: contain; flex: 1; min-height: 0; padding: 16px; scrollbar-color: #9eb3bd transparent; }
.coa-viewer-pages { width: 100%; }
.coa-viewer-page, .coa-viewer-image { display: block; width: 100%; background: white; box-shadow: 0 2px 9px #19364112; margin-bottom: 16px; border-radius: 3px; }
.coa-viewer-page { overflow: hidden; color: #627c89; font-size: 13px; }
.coa-viewer-page canvas { display: block; width: 100%; height: auto; }
.coa-viewer-page[data-rendered="true"] canvas, .coa-viewer-image.is-loaded { animation: coa-viewer-page-in 300ms ease-out both; }
.coa-viewer-message { padding: 60px 20px; text-align: center; font-size: 14px; color: #526b79; line-height: 1.8; }
.coa-viewer-page.has-error { padding: 24px; aspect-ratio: auto !important; }
@keyframes coa-viewer-unfurl {
  0% { opacity: .88; clip-path: inset(49% 0 49% 0 round 18px); transform: scaleX(.88); }
  10% { opacity: 1; clip-path: inset(45% 0 45% 0 round 18px); transform: scaleX(.96); animation-timing-function: cubic-bezier(.48, 0, .26, 1); }
  88% { clip-path: inset(0 0 0 0 round 18px); transform: scaleX(1); }
  100% { opacity: 1; clip-path: inset(0 0 0 0 round 18px); transform: scaleX(1); }
}
@keyframes coa-viewer-refurl {
  0% { opacity: 1; clip-path: inset(0 0 0 0 round 18px); transform: scaleX(1); }
  15% { opacity: 1; clip-path: inset(0 0 0 0 round 18px); transform: scaleX(1); animation-timing-function: cubic-bezier(.48, 0, .72, 1); }
  100% { opacity: 0; clip-path: inset(49% 0 49% 0 round 18px); transform: scaleX(.88); }
}
@keyframes coa-viewer-edge-top { 0% { top: calc(49% - 7px); opacity: 0; } 10% { top: calc(45% - 7px); opacity: .9; animation-timing-function: cubic-bezier(.48, 0, .26, 1); } 88% { top: 0; opacity: .75; } 100% { top: -13px; opacity: 0; } }
@keyframes coa-viewer-edge-bottom { 0% { bottom: calc(49% - 7px); opacity: 0; } 10% { bottom: calc(45% - 7px); opacity: .9; animation-timing-function: cubic-bezier(.48, 0, .26, 1); } 88% { bottom: 0; opacity: .75; } 100% { bottom: -13px; opacity: 0; } }
@keyframes coa-viewer-edge-top-close { 0% { top: -13px; opacity: 0; } 15% { top: 0; opacity: .75; animation-timing-function: cubic-bezier(.48, 0, .72, 1); } 100% { top: calc(49% - 7px); opacity: 0; } }
@keyframes coa-viewer-edge-bottom-close { 0% { bottom: -13px; opacity: 0; } 15% { bottom: 0; opacity: .75; animation-timing-function: cubic-bezier(.48, 0, .72, 1); } 100% { bottom: calc(49% - 7px); opacity: 0; } }
@keyframes coa-viewer-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes coa-viewer-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes coa-viewer-head-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes coa-viewer-page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width:600px) {
  .coa-viewer { width: calc(100vw - 16px); height: calc(100dvh - 24px); border-radius: 12px; }
  .coa-viewer-head { padding: 11px 10px; gap: 8px; }
  .coa-viewer-heading { gap: 6px; flex-wrap: wrap; }
  .coa-viewer-heading > svg { display: none; }
  .coa-viewer-heading strong { font-size: 12px; }
  .coa-viewer-count { font-size: 10px; }
  .coa-viewer-actions { gap: 4px; }
  .coa-viewer-download { padding: 10px; }
  .coa-viewer-download svg { display: none; }
  .coa-viewer-scroll { padding: 7px; }
}
@media (prefers-reduced-motion:reduce) { .coa-viewer[open], .coa-viewer[open].is-closing, .coa-viewer[open]::backdrop, .coa-viewer[open].is-closing::backdrop, .coa-viewer[open] .coa-viewer-head, .coa-viewer-page[data-rendered="true"] canvas, .coa-viewer-image.is-loaded { animation: none; } .coa-viewer[open]::before, .coa-viewer[open]::after { display: none; } }