.recap-section{margin-top:36px}.recap-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px}.recap-toolbar h2{margin:0;color:#333}.recap-toolbar h2 span{color:#999}.recap-toolbar button,.recap-viewer-toolbar button{font:inherit;font-size:14px;border:0;background:none;padding:4px 0;color:#999;cursor:pointer}.recap-toolbar button:hover,.recap-viewer-toolbar button:hover{color:#8050b5}.recap-instructions{font-size:14px;color:#999;margin-top:16px!important;margin-bottom:24px}.recap-board{position:relative;aspect-ratio:780/860;background:#fafafa;border:1px solid #eee;overflow:hidden;isolation:isolate}.recap-card{position:absolute;left:var(--x);top:var(--y);width:var(--w);margin:0;transform:rotate(var(--rotation));z-index:var(--layer);transition:filter .2s}.recap-photo{position:relative;display:block;width:100%;padding:0;border:1px solid #ddd;background:#fff;box-shadow:0 3px 12px #00000012;cursor:grab;touch-action:none}.recap-photo img{display:block;width:100%;height:auto;pointer-events:none;user-select:none}.recap-photo .recap-overlay{position:absolute;right:3%;top:-8%;width:36%;transform:rotate(10deg);box-shadow:0 2px 6px #0002}.recap-card[data-index="4"] .recap-overlay{right:-2%;width:53%;transform:rotate(-15deg)}.recap-card figcaption{font-size:14px;line-height:1.4;color:#777;padding:6px 0;text-wrap:pretty;pointer-events:none}.recap-card:hover .recap-photo{border-color:#8050b5}.recap-card:focus-within{z-index:100}.recap-card.is-dragging{z-index:101;transition:none}.recap-card.is-dragging .recap-photo{cursor:grabbing;box-shadow:0 8px 24px #0002}.recap-photo:focus-visible{outline:2px solid #8050b5;outline-offset:4px}
#recap-dialog{width:min(980px,calc(100% - 48px));max-height:calc(100dvh - 48px);padding:20px 24px 24px;border:0;border-radius:0;background:#fff;box-shadow:0 20px 80px #0002;overflow:auto;color:#333}#recap-dialog::backdrop{background:#ffffffb8;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.recap-viewer-toolbar{display:flex;align-items:center;gap:20px;margin-bottom:20px}.recap-viewer-toolbar span{font-size:14px;color:#999;margin-right:auto}#recap-viewer-photo{width:fit-content;max-width:100%;margin:auto;cursor:default;touch-action:auto;border:0;box-shadow:none}#recap-viewer-photo>img:first-child{width:auto;max-width:100%;max-height:65dvh;object-fit:contain}#recap-viewer-photo .recap-overlay{top:2%;right:2%;width:30%;max-height:35dvh;object-fit:contain}#recap-viewer-caption{margin-top:20px;color:#777;font-size:14px}.recap-viewer-toolbar button:focus-visible,.recap-toolbar button:focus-visible{outline:none;color:#333;text-decoration:underline;text-decoration-color:#8050b5;text-decoration-thickness:1px;text-underline-offset:5px}
@media(max-width:620px){.recap-toolbar{align-items:flex-start}.recap-toolbar h2 span{display:block}.recap-toolbar #recap-reset,.recap-desktop-tip{display:none}.recap-board{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:24px 16px;padding:16px;overflow:visible;background:none;border:0}.recap-card{position:relative;left:auto!important;top:auto!important;width:100%;transform:none;align-self:start}.recap-photo{cursor:zoom-in;touch-action:auto}.recap-card figcaption{color:#777}.recap-card[data-index="0"],.recap-card[data-index="7"]{grid-column:1/-1}.recap-photo .recap-overlay{top:0;right:0}#recap-dialog{width:calc(100% - 24px);max-height:calc(100dvh - 24px);padding:16px}.recap-viewer-toolbar{gap:14px}}
@media(prefers-reduced-motion:reduce){.recap-card{transition:none}}

.recap-open{overflow:hidden}.recap-open .section-index{visibility:hidden}

/* Match the framed memory canvas and visible selection borders. */
.recap-window{background:#bfbfbf;padding:8px;box-shadow:inset -2px -2px 0 #000,inset 2px 2px 0 #fff,inset -4px -4px 0 #808080,inset 4px 4px 0 #dbdbdb;border:2px solid #bfbfbf}
.recap-window .recap-toolbar{padding:4px 8px;min-height:32px;font-family:'MS Sans Serif',Arial,sans-serif;gap:16px}
.recap-window .recap-toolbar h2{font-family:inherit;font-weight:bold;color:#000;font-size:14px;line-height:20px}
.recap-window .recap-toolbar h2 span{font-weight:400;color:#000;margin-left:8px}
.recap-window .recap-toolbar button{font-family:inherit;color:#333}
.recap-window .recap-board{background:#fff;border:0;box-shadow:inset 1px 1px #808080,inset -1px -1px #fff}
.recap-card .recap-photo{border:1px solid #b877ff;box-shadow:none}
.recap-card .recap-overlay{outline:1px solid #b877ff;box-shadow:none}
.recap-card figcaption{position:absolute;bottom:calc(100% + 5px);left:0;max-width:100%;width:max-content;padding:2px 5px;color:#666;background:#fffffff2;font-family:ui-sans-serif,system-ui,sans-serif;font-size:14px;font-weight:400;line-height:1.25;letter-spacing:0;text-wrap:balance}
.recap-handles{position:absolute;inset:0;pointer-events:none}.recap-handles i{position:absolute;width:6px;height:6px;background:#fff;border:1px solid #b877ff;transform:translate(-50%,-50%)}
.recap-handles i:nth-child(1){left:0;top:0}.recap-handles i:nth-child(2){left:100%;top:0}.recap-handles i:nth-child(3){left:0;top:100%}.recap-handles i:nth-child(4){left:100%;top:100%}
@media(max-width:620px){.recap-window{padding:6px}.recap-window .recap-toolbar{padding:4px 6px}.recap-window .recap-toolbar h2 span{display:inline;margin-left:4px}.recap-window .recap-board{padding:20px 12px}.recap-card figcaption{position:static;margin-top:8px;padding:0;font-family:inherit}.recap-photo .recap-overlay{top:0;right:0}}

/* The photo viewer shares the canvas bevel, without a title bar. */
#recap-dialog{padding:8px;border:2px solid #bfbfbf;background:#bfbfbf;box-shadow:inset -2px -2px 0 #000,inset 2px 2px 0 #fff,inset -4px -4px 0 #808080,inset 4px 4px 0 #dbdbdb,0 20px 80px #0002}
.recap-viewer-inner{background:#fff;padding:20px 24px 24px;box-shadow:inset 1px 1px #808080,inset -1px -1px #fff}
@media(max-width:620px){#recap-dialog{padding:6px}.recap-viewer-inner{padding:16px}}

@media(min-width:621px){.recap-window{aspect-ratio:1;display:flex;flex-direction:column}.recap-window .recap-toolbar{flex:none}.recap-window .recap-board{aspect-ratio:auto;flex:1;min-height:0}}

.recap-pager{display:flex;justify-content:center;align-items:center;gap:4px;flex-wrap:wrap;margin-top:20px}.recap-pager button{position:relative;width:22px;height:24px;padding:0;border:0;background:none;cursor:pointer;transition:width .3s}.recap-pager button::before{content:"";display:block;height:4px;width:100%;background:#eee;transition:background .3s}.recap-pager button.is-active{width:32px}.recap-pager button.is-active::before{background:#777}.recap-pager button:hover::before{background:#aaa}.recap-pager button:focus-visible{outline:none}.recap-pager button:focus-visible::before{background:#8050b5}.recap-pager button::after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);width:max-content;max-width:180px;padding:4px 8px;background:#000;color:#fff;font-size:14px;line-height:1.4;opacity:0;pointer-events:none;z-index:2}.recap-pager button:hover::after,.recap-pager button:focus-visible::after{opacity:1}@media(prefers-reduced-motion:reduce){.recap-pager button,.recap-pager button::before{transition:none}}

#recap-close{display:inline-flex;align-items:center;gap:8px}#recap-close kbd{font:inherit;font-size:14px;line-height:1;padding:3px 5px;border:1px solid #d5d5d5;box-shadow:0 1px 0 #d5d5d5;background:#fafafa;color:#777}

/* Keep the moving photo index outside the beveled image frame. */
#recap-dialog{padding:0;border:0;background:transparent;box-shadow:none;overflow:visible;max-height:calc(100dvh - 32px)}
.recap-viewer-frame{padding:8px;border:2px solid #bfbfbf;background:#bfbfbf;box-shadow:inset -2px -2px 0 #000,inset 2px 2px 0 #fff,inset -4px -4px 0 #808080,inset 4px 4px 0 #dbdbdb,0 20px 80px #0002;max-height:calc(100dvh - 100px);overflow:auto}
#recap-viewer-photo>img:first-child{max-height:58dvh}
.recap-pager{position:relative;width:fit-content;max-width:100%;margin:16px auto 0;gap:6px;flex-wrap:nowrap}.recap-pager button,.recap-pager button.is-active{width:22px;flex:none}.recap-pager button.is-active::before{background:#eee}.recap-pager-marker{position:absolute;left:0;top:10px;height:4px;background:#777;pointer-events:none;transition:transform .45s cubic-bezier(.22,1,.36,1),width .45s}
@media(max-width:620px){.recap-viewer-frame{padding:6px}.recap-pager{gap:4px}.recap-pager button,.recap-pager button.is-active{width:18px}}
@media(prefers-reduced-motion:reduce){.recap-pager-marker{transition:none}}

/* Anchor the photo index to the viewport, independent of image dimensions. */
#recap-dialog .recap-pager{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);margin:0;max-width:calc(100vw - 32px);z-index:2}
.recap-pager button::before,.recap-pager button.is-active::before{background:#c2c2c2}.recap-pager button:hover::before{background:#aaa}.recap-pager-marker{background:#555}
.recap-viewer-frame{max-height:calc(100dvh - 140px)}

#recap-viewer-photo{animation:photo-arrive 360ms cubic-bezier(.22,1,.36,1)}@keyframes photo-arrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){#recap-viewer-photo{animation:none}}