/* Shared by all five paper themes; image pixels remain untouched. */
.creation-viewer-dialog{position:fixed;inset:0;width:calc(100vw - 64px);height:calc(100vh - 64px);max-width:1800px;max-height:none;margin:auto;padding:0;border:1px solid color-mix(in srgb,var(--lightbox-text) 24%,transparent);border-radius:15px;background:var(--lightbox);color:var(--lightbox-text);box-shadow:0 28px 100px var(--dialog-shadow);overflow:hidden;font-family:var(--font)}
.creation-viewer-dialog[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.creation-viewer-dialog::backdrop{background:color-mix(in srgb,var(--backdrop) 85%,#102322);backdrop-filter:blur(8px)}
.creation-viewer-header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:28px;padding:17px 23px;border-bottom:1px solid color-mix(in srgb,var(--lightbox-text) 16%,transparent)}
.creation-viewer-identity{min-width:0;display:flex;align-items:center;gap:16px}
.creation-viewer-eyebrow{font:10px/1.3 var(--text-font);letter-spacing:.18em;opacity:.55;writing-mode:vertical-rl}
.creation-viewer-identity h2{margin:0;font:22px/1.35 var(--font);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.creation-viewer-controls{display:flex;align-items:center;gap:5px;border:1px solid color-mix(in srgb,var(--lightbox-text) 20%,transparent);border-radius:10px;padding:3px;background:color-mix(in srgb,var(--lightbox-text) 4%,transparent)}
.creation-viewer-button{display:grid;place-items:center;width:38px;height:38px;padding:8px;flex-shrink:0;border-radius:7px;cursor:pointer;color:inherit;transition:background .15s ease,transform .15s ease}
.creation-viewer-button:hover,.creation-viewer-button[aria-pressed=true]{background:color-mix(in srgb,var(--lightbox-text) 14%,transparent)}
.creation-viewer-button:active{transform:scale(.94)}
.creation-viewer-button:focus-visible,.creation-viewer-stage:focus-visible,.creation-viewer-compare input:focus-visible{outline:2px solid var(--lightbox-text);outline-offset:3px}
.creation-viewer-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.creation-viewer-header>.creation-viewer-button{justify-self:end}
.creation-viewer-zoom{display:block;min-width:58px;text-align:center;font:13px/1.3 var(--text-font);font-variant-numeric:tabular-nums}
.creation-viewer-stage{position:relative;overflow:hidden;min-width:0;min-height:0;touch-action:none;outline-offset:-5px!important;background-image:radial-gradient(color-mix(in srgb,var(--lightbox-text) 10%,transparent) .7px,transparent .7px);background-size:12px 12px;isolation:isolate}
.creation-viewer-stage.is-zoomed{cursor:grab}.creation-viewer-stage.is-dragging{cursor:grabbing}
.creation-viewer-plane{position:absolute;left:0;top:0;transform-origin:0 0;box-shadow:0 12px 60px #0004;pointer-events:none;background:var(--lightbox)}
.creation-viewer-plane img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none!important;max-height:none!important;object-fit:contain;user-select:none}
.creation-viewer-before{background:var(--lightbox)}
.creation-viewer-divider{position:absolute;top:0;bottom:0;background:var(--lightbox-text);box-shadow:0 0 6px #0007}
.creation-viewer-labels{position:absolute;inset:18px 20px auto;display:flex;justify-content:space-between;pointer-events:none;gap:20px}
.creation-viewer-labels span{font:13px/1.3 var(--font);padding:7px 12px;border-radius:5px;background:color-mix(in srgb,var(--lightbox) 88%,transparent);border:1px solid color-mix(in srgb,var(--lightbox-text) 20%,transparent);box-shadow:0 3px 12px #0001}
.creation-viewer-compare{display:flex;align-items:center;justify-content:center;gap:22px;padding:15px 24px 17px;border-top:1px solid color-mix(in srgb,var(--lightbox-text) 16%,transparent)}
.creation-viewer-compare label{font:14px/1.4 var(--font)}
.creation-viewer-compare input{width:min(420px,45vw);height:20px;accent-color:var(--lightbox-text);cursor:ew-resize}
.creation-viewer-dialog [hidden]{display:none!important}
.creation-viewer-stage.is-loading::after,.creation-viewer-stage.has-error::after{position:absolute;inset:0;display:grid;place-items:center;font:18px/1.6 var(--font);color:var(--lightbox-text)}
.creation-viewer-stage.is-loading::after{content:'正在打开原图…'}.creation-viewer-stage.has-error::after{content:'图片暂时无法打开，请关闭后重试'}
@media(prefers-reduced-motion:reduce){.creation-viewer-button{transition:none}}