
.paper-figures{margin:24px 0;min-width:0}
.paper-figure-tabs{position:relative;display:flex;padding:4px;gap:4px;border-radius:24px;background:color-mix(in srgb,currentColor 7%,transparent);margin-bottom:14px;isolation:isolate}
.paper-figure-tabs::before{content:"";position:absolute;inset:4px auto 4px 4px;width:calc((100% - 12px)/2);border-radius:20px;background:var(--green);transform:translateX(calc(var(--figure-index,0) * (100% + 4px)));transition:transform var(--figure-time,460ms) cubic-bezier(.4,0,.2,1);z-index:-1}
.paper-figure-tabs button{flex:1;min-width:0;min-height:44px;padding:8px 12px;background:none;border:0;border-radius:20px;font:600 12px/1.3 var(--font);color:var(--ink);cursor:pointer;transition:color 230ms,background 180ms,transform 180ms}
.paper-figure-tabs button[aria-selected=true]{color:var(--paper)}
.paper-figure-tabs button:hover{background:color-mix(in srgb,currentColor 8%,transparent)}
.paper-figure-tabs button:active{transform:scale(.96)}
.paper-figure-viewport{overflow:clip;border-radius:20px;background:color-mix(in srgb,currentColor 4%,transparent)}
.paper-figure-track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;align-items:stretch;transform:translateX(calc(var(--figure-index,0) * -100%));transition:transform var(--figure-time,460ms) cubic-bezier(.4,0,.2,1)}
.paper-figure-panel{margin:0;min-width:0;display:flex;flex-direction:column}
.paper-figure-image{position:relative;display:grid;place-items:center;aspect-ratio:1;background:#fff;overflow:hidden;border-radius:20px;color:#25372e;text-decoration:none;cursor:zoom-in}
.paper-figure-image img{display:block;width:100%;height:100%;object-fit:contain;min-height:0}
.paper-figure-enlarge{position:absolute;right:12px;bottom:12px;display:flex;align-items:center;gap:7px;padding:10px 14px;min-height:44px;box-sizing:border-box;background:#e9eee3;color:#25372e;border:1px solid #cdd7c7;border-radius:24px;font-size:11px;font-weight:600;transition:background 180ms,transform 180ms}
.paper-figure-image:hover .paper-figure-enlarge{background:#b5d6a5;transform:translateY(-2px)}
.paper-figure-image:active .paper-figure-enlarge{transform:scale(.96)}
.paper-figure-panel figcaption{padding:18px 18px 20px}
.paper-figure-panel h4{font-size:16px;line-height:1.35;margin:0 0 8px}
.paper-figure-panel p{font-size:13px;line-height:1.65;margin:0 0 12px}
.paper-figure-panel small{display:block;font-size:10px;line-height:1.6;color:var(--muted)}
.paper-figures :is(a,button):focus-visible{outline:3px solid var(--green);outline-offset:-3px}
.paper-figure-viewer{position:fixed;inset:0;margin:auto;padding:0;border:1px solid var(--line);border-radius:28px;background:var(--paper);color:var(--ink);width:min(1100px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;box-shadow:0 16px 60px #0003}
.paper-figure-viewer::backdrop{background:transparent}
.paper-viewer-toolbar{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 20px;background:var(--paper);z-index:1;border-bottom:1px solid var(--line)}
.paper-viewer-toolbar strong{font-size:16px}
.paper-viewer-close{display:grid;place-items:center;min-width:44px;min-height:44px;border:0;border-radius:50%;font:30px/1 var(--font);background:var(--soft);color:var(--ink);cursor:pointer;transition:background 180ms,transform 180ms}
.paper-viewer-close:hover{background:color-mix(in srgb,var(--green) 20%,var(--soft))}
.paper-viewer-close:active{transform:scale(.94)}
.paper-viewer-close:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.paper-viewer-figure{margin:0;padding:20px}
.paper-viewer-figure img{width:100%;height:auto;display:block;background:#fff;border-radius:12px}
.paper-viewer-figure figcaption{max-width:760px;margin:20px auto 8px;font-size:14px;line-height:1.7}
.paper-viewer-figure figcaption h4{display:none}
.paper-viewer-figure small{display:block;color:var(--muted)}
@media(max-width:600px){.paper-figure-viewer{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:24px}.paper-viewer-figure{padding:12px}.paper-viewer-toolbar{padding:10px 14px}.paper-figure-tabs button{font-size:11px;padding-inline:6px}}
@media(prefers-reduced-motion:reduce){.paper-figures *,.paper-figures::before,.paper-figure-tabs::before,.paper-viewer-close{transition:none!important}}
html[data-motion=off] .paper-figures *,html[data-motion=off] .paper-figure-tabs::before{transition:none!important}
