.tpg{--tpg-bg: #eee7da;--tpg-ink: #302e28;--tpg-paper: #faf6ed;--tpg-accent: #435640;--tpg-height: clamp(440px, 72svh, 850px);--tpg-caption-font: Georgia, serif;color:var(--tpg-ink);font-family:inherit;isolation:isolate}.tpg *,.tpg-dialog *{box-sizing:border-box}.tpg [hidden],.tpg-dialog [hidden]{display:none!important}.tpg-toolbar{display:flex;gap:18px;align-items:center;padding:18px 0}.tpg-browse{font:inherit;background:var(--tpg-ink);color:var(--tpg-bg);border:0;border-radius:50px;padding:12px 22px;cursor:pointer;flex-shrink:0;min-height:44px}.tpg-browse[aria-disabled=true]{opacity:.45;cursor:default}.tpg-instructions{font:12px/1.6 system-ui,sans-serif;max-width:38em;margin:0}.tpg-stage{position:relative;height:var(--tpg-height);min-height:320px;overflow:hidden;background:var(--tpg-bg);border-radius:4px}.tpg-stage-scroll{height:calc(100svh - var(--tpg-header, 0px));border-radius:0}.tpg-pile{position:absolute;inset:0;isolation:isolate}.tpg-position{position:absolute;transform:translate(-50%,-50%);aspect-ratio:1 / 1.21}.tpg-position[data-in=false]{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(1.06)}.tpg-position{transition:opacity .22s linear,transform .3s cubic-bezier(.16,1,.3,1)}.tpg-card{--tpg-angle: 0deg;--tpg-hover-x: 0px;--tpg-hover-y: 0px;display:block;position:relative;width:100%;aspect-ratio:1 / 1.21;margin:0;padding:0;border:0;background:none;color:#302e28;transform:rotate(var(--tpg-angle));cursor:pointer;text-align:center;font:inherit}figure.tpg-card{cursor:default}.tpg-paper{position:absolute;inset:0;display:block;padding:5.5% 5.5% 26.5%;border-radius:2px;background:var(--tpg-paper, #faf6ed);box-shadow:0 1px 2px #0004,0 7px 15px #0005;transition:transform .22s cubic-bezier(.16,1,.3,1)}.tpg-image{display:block;width:100%;height:100%;object-fit:cover;background:#d1cdc3}.tpg-caption{position:absolute;bottom:0;left:6%;right:6%;height:16.5%;display:grid;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-family:var(--tpg-caption-font, Georgia, serif);font-size:clamp(10px,1.15vw,17px);font-style:italic}.tpg-image-error{display:none;position:absolute;inset:6% 6% 22%;place-items:center;padding:10px;font:12px/1.5 system-ui;background:#dfd9cc}.tpg-card[data-image-state=error] .tpg-image-error{display:grid}.tpg-card[data-image-state=loading] .tpg-image{opacity:.6}@media(hover:hover)and (pointer:fine){.tpg button.tpg-card:not(.tpg-flight):hover .tpg-paper{transform:translate(var(--tpg-hover-x),var(--tpg-hover-y))}}.tpg button.tpg-card:focus-visible .tpg-paper{outline:3px solid var(--tpg-accent);outline-offset:4px}.tpg-browse:focus-visible,.tpg-control:focus-visible{outline:3px solid #c69a47;outline-offset:4px}.tpg-edge{pointer-events:none;position:absolute;z-index:2;inset:auto 0 0;height:15%;background:linear-gradient(transparent,var(--tpg-bg))}.tpg-note{position:absolute;left:50%;bottom:9%;transform:translate(-50%) rotate(2deg);padding:8px 14px;white-space:nowrap;background:#f5efdf;color:#302e28;font:italic 18px Georgia,serif;pointer-events:none}.tpg-empty{padding:40px;text-align:center}.tpg[data-tpg-preset=portfolio]{--tpg-bg: #101625;--tpg-ink: #eee8dc;--tpg-accent: #ead6ab}.tpg[data-tpg-preset=portfolio] .tpg-stage-scroll{background:rgb(18 16 14 / var(--tpg-fill, 0))}.tpg[data-tpg-preset=editorial]{--tpg-bg: #e7e9e6;--tpg-ink: #203733;--tpg-paper: #fff;--tpg-accent: #1d6354}.tpg-dialog{--tpg-held-width: min(560px, 78vw, calc((100svh - 200px) / 1.21));position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#f5f0e8;overflow:hidden;overscroll-behavior:contain}.tpg-dialog::backdrop{background:transparent}.tpg-scrim{position:absolute;inset:0;background:#04070ce0}.tpg-slot{position:absolute;inset:0}.tpg-dialog .tpg-held{position:absolute;left:calc(50% - var(--tpg-held-width) / 2);top:calc(50% - var(--tpg-held-width) * .605);width:var(--tpg-held-width);transform:none;cursor:zoom-out}.tpg-held .tpg-paper{transform:none;box-shadow:0 25px 55px #0008}.tpg-flight,.tpg-flight .tpg-paper{transition:none!important}.tpg-held .tpg-caption{font-size:clamp(12px,2.5vw,23px)}.tpg-original .tpg-image{object-fit:contain;background:#eee8de}.tpg-controls{position:absolute;inset:0;pointer-events:none}.tpg-control{position:absolute;pointer-events:auto;min-width:44px;height:44px;border-radius:50px;border:1px solid #ffffff36;background:#252b32;color:#fff;font:20px system-ui,sans-serif;cursor:pointer}.tpg-close{top:max(12px,calc(50% - var(--tpg-held-width) * .605 - 56px));right:max(12px,calc(50% - var(--tpg-held-width) / 2 - 56px))}.tpg-prev{left:max(12px,calc(50% - var(--tpg-held-width) / 2 - 64px));top:calc(50% - 22px)}.tpg-next{right:max(12px,calc(50% - var(--tpg-held-width) / 2 - 64px));top:calc(50% - 22px)}.tpg-fit{bottom:54px;left:50%;transform:translate(-50%);font-size:12px;padding:0 16px;white-space:nowrap}.tpg-status{position:absolute;bottom:12px;left:12px;right:12px;margin:0;text-align:center;font:12px/1.5 system-ui,sans-serif;max-height:36px;overflow:auto}@media(max-width:640px){.tpg-toolbar{align-items:flex-start;gap:12px}.tpg-instructions{font-size:11px}.tpg-prev,.tpg-next{top:calc(50% + var(--tpg-held-width) * .605 + 12px)}.tpg-prev{left:calc(50% - var(--tpg-held-width) / 2)}.tpg-next,.tpg-close{right:calc(50% - var(--tpg-held-width) / 2)}}.tpg[data-tpg-motion=reduced] .tpg-position,.tpg[data-tpg-motion=reduced] .tpg-paper{transition:none}@media(prefers-reduced-motion:reduce){.tpg-position,.tpg-paper{transition:none}}.tpg[data-tpg-motion=reduced] button.tpg-card:hover .tpg-paper{transform:none}.tpg-stage-grid .tpg-edge{display:none}:root{color-scheme:light;--page: #f7f4ed;--ink: #302e28;--muted: #65635e;--line: #302e2829;--demo-header: 140px;font-family:system-ui,sans-serif;color:var(--ink);background:var(--page)}:root[data-theme=dark]{color-scheme:dark;--page: #141820;--ink: #eee8dc;--muted: #bab8b2;--line: #eee8dc30}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-underline-offset:4px}.demo-bar{position:sticky;top:0;z-index:10;background:var(--page);border-bottom:1px solid var(--line);padding:18px clamp(16px,4vw,56px) 12px;display:grid;grid-template-columns:1fr auto;gap:12px 24px}.identity a{font-size:12px;text-decoration:none;color:var(--muted)}h1{font:24px/1.2 Georgia,serif;margin:8px 0 0;letter-spacing:-.035em}.options{display:flex;align-items:end;gap:12px}label{display:grid;gap:5px;font-size:11px;color:var(--muted)}select,button{font:13px system-ui,sans-serif;min-height:44px;border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--page);color:var(--ink)}button{cursor:pointer;background:var(--ink);color:var(--page)}button:disabled{opacity:.5;cursor:default}:focus-visible{outline:2px solid var(--ink);outline-offset:4px}#hint{grid-column:1 / -1;margin:0;font-size:12px;color:var(--muted);line-height:1.5}#gallery.tpg{--tpg-bg: var(--page);--tpg-ink: var(--ink);--tpg-accent: var(--ink);--tpg-height: calc(100svh - var(--demo-header))}#gallery .tpg-toolbar{display:none}#gallery .tpg-stage{border-radius:0;background:var(--page)}#gallery .tpg-note{display:none}footer{padding:20px clamp(16px,4vw,56px);display:flex;justify-content:space-between;gap:16px;font-size:11px;color:var(--muted);border-top:1px solid var(--line)}.fallback{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;padding:40px}.fallback img{max-width:180px}@media(max-width:760px){.demo-bar{grid-template-columns:1fr;padding-top:12px;gap:10px}.identity{display:flex;justify-content:space-between;align-items:center;gap:12px}h1{font-size:19px;margin:0}.options{display:grid;grid-template-columns:1fr 1fr auto;gap:8px}select{width:100%;min-width:0;padding-inline:7px}button{padding-inline:9px}footer{flex-wrap:wrap}}@media(max-width:370px){.options{grid-template-columns:1.3fr 1fr}#browse{grid-column:1 / -1}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important}}.tpg-dialog{--chip-ink: 245 239 230;--chip-base: rgb(15 23 35 / .48);color:rgb(var(--chip-ink))}.tpg-dialog .tpg-scrim{background:#04070c99}.tpg-dialog .tpg-control,.tpg-dialog .tpg-status{color:rgb(var(--chip-ink));border:0;background:linear-gradient(rgb(var(--chip-ink) / .1) 0 100%),var(--chip-base);box-shadow:inset 0 .5px #ffffff73,inset 0 0 0 .5px #ffffff29,0 2px 10px #00000047;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%)}.tpg-dialog .tpg-control{display:grid;place-items:center;width:44px;height:44px;min-width:44px;padding:0;line-height:1;border-radius:50%;appearance:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;transition:background .16s ease,box-shadow .16s ease,scale .16s ease}.tpg-dialog .tpg-control:focus{outline:none}:root[data-viewer-input=keyboard] .tpg-dialog .tpg-control:focus-visible{outline:2px solid #f5efe6;outline-offset:4px}@media(hover:hover){.tpg-dialog .tpg-control:hover{background:linear-gradient(rgb(var(--chip-ink) / .2) 0 100%),var(--chip-base);box-shadow:inset 0 .5px #fff9,inset 0 0 0 .5px #ffffff3d,0 4px 14px #00000057}}.tpg-dialog .tpg-control:active{scale:.94}.tpg-dialog :is(.tpg-close,.tpg-prev,.tpg-next){font-size:0}.tpg-dialog :is(.tpg-close,.tpg-prev,.tpg-next):before{content:"";position:absolute;inset:0;margin:auto;width:20px;height:20px;pointer-events:none;background:currentColor;mask:var(--control-icon) center / 20px 20px no-repeat;-webkit-mask:var(--control-icon) center / 20px 20px no-repeat}.tpg-close{--control-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 6 12 12M18 6 6 18' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}.tpg-prev{--control-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m14 5-7 7 7 7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}.tpg-next{--control-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m10 5 7 7-7 7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}.tpg-dialog .tpg-status{left:50%;right:auto;transform:translate(-50%);width:max-content;max-width:calc(100% - 32px);max-height:42px;padding:8px 16px;border-radius:24px}.tpg-dialog .tpg-scrim.has-optical-backdrop{background:#04070c;backdrop-filter:none;-webkit-backdrop-filter:none}.viewer-optical-backdrop{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.58;filter:blur(26px) saturate(128%)}.tpg-dialog .tpg-flight{will-change:transform}body:has(#gallery:not([data-tpg-state=open])) .tpg-dialog :is(.tpg-controls,.tpg-status){opacity:0!important;pointer-events:none!important}body:has(#gallery:not([data-tpg-state=open])) .tpg-dialog .tpg-control{pointer-events:none!important}@media(prefers-reduced-motion:reduce){.tpg-dialog .tpg-control{transition:none}.tpg-dialog .tpg-control:active{scale:1}}@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.tpg-dialog{--chip-base: #24384f}}@media(prefers-reduced-transparency:reduce){.tpg-dialog{--chip-base: #24384f}.tpg-dialog :is(.tpg-control,.tpg-status,.tpg-scrim){backdrop-filter:none;-webkit-backdrop-filter:none}.tpg-dialog .tpg-scrim{background:#04070c}}@media(forced-colors:active){.tpg-dialog .tpg-control{border:1px solid ButtonText;background:ButtonFace;color:ButtonText;box-shadow:none}.tpg-dialog .tpg-control:before{background:ButtonText;forced-color-adjust:none}:root[data-viewer-input=keyboard] .tpg-dialog .tpg-control:focus-visible{outline-color:Highlight}}