/*!
 * popupable
 * Version  : 1.0.0
 * License  : MIT
 * Copyright: 2025 Ewan Howell
 */
@property --popupable-screen-padding{syntax:"<length>";inherits:true;initial-value:40px}@property --popupable-background{syntax:"<color>";inherits:true;initial-value:#000B}@property --popupable-ui-background{syntax:"<color>";inherits:true;initial-value:#0008}@property --popupable-blur{syntax:"<length>";inherits:true;initial-value:6px}@property --popupable-open-duration{syntax:"<time>";inherits:true;initial-value:.25s}@property --popupable-switch-duration{syntax:"<time>";inherits:true;initial-value:.25s}[data-popupable],[data-popupable] *{cursor:pointer!important}.popupable-hide{visibility:hidden!important}.popupable-container{position:fixed;inset:0;transition:background var(--popupable-open-duration),backdrop-filter var(--popupable-open-duration);z-index:2147483646;user-select:none;pointer-events:none}.popupable-container.popupable-active{z-index:2147483647;background:var(--popupable-background);backdrop-filter:blur(var(--popupable-blur))}.popupable-container>*{pointer-events:none}.popupable-viewport{position:fixed;left:var(--popupable-vv-left,0);top:var(--popupable-vv-top,0);width:calc(var(--popupable-vv-width,100vw) * var(--popupable-vv-scale,1));height:calc(var(--popupable-vv-height,100vh) * var(--popupable-vv-scale,1));transform-origin:top left;transform:scale(var(--popupable-vv-ui-scale,1));pointer-events:none!important}.popupable-container *{box-sizing:border-box}.popupable-container.popupable-open,.popupable-container.popupable-open>*{pointer-events:initial}.popupable-clones{transition:transform var(--popupable-switch-duration)}.popupable-clone-container{position:fixed;transition:all var(--popupable-open-duration);pointer-events:initial;overflow:hidden;transform:translateX(calc(var(--popupable-view-width) * var(--popupable-offset-multiplier)));transform-origin:0 0}.popupable-clone-container.popupable-transparent::before{content:"";position:absolute;inset:0;background-image:conic-gradient(#313131 .25turn,#1e1e1e .25turn .5turn,#313131 .5turn .75turn,#1e1e1e .75turn);background-size:32px 32px;background-attachment:fixed;z-index:-1;opacity:0;transition:opacity var(--popupable-open-duration);image-rendering:pixelated}.popupable-container.popupable-active .popupable-clone-container{border-radius:0!important}.popupable-container.popupable-active .popupable-clone-container.popupable-transparent::before{opacity:1}.popupable-container.popupable-open .popupable-clone-container{transition:transform var(--popupable-switch-duration),translate var(--popupable-switch-duration)}.popupable-clone,.popupable-clone-layer{width:100%;height:100%;position:absolute;inset:0;transition:opacity var(--popupable-open-duration)}.popupable-clone-layer{opacity:0;object-fit:cover}.popupable-container.popupable-open .popupable-clone:not(:last-child){opacity:0}.popupable-container.popupable-active .popupable-clone-layer{opacity:1}.popupable-button{width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:opacity var(--popupable-open-duration),transform var(--popupable-open-duration);cursor:pointer;position:relative}.popupable-button::before{content:"";position:absolute;inset:0;opacity:.5;background:var(--popupable-ui-background);transition:opacity .25s;border-radius:50%}.popupable-button svg{width:24px;height:24px;z-index:1}.popupable-container.popupable-open .popupable-button{transition:background .25s,opacity var(--popupable-open-duration),transform .25s}.popupable-button:hover::before,.popupable-next-container:hover .popupable-button::before,.popupable-prev-container:hover .popupable-button::before{opacity:1}.popupable-next-container,.popupable-prev-container{position:absolute;top:50%;transform:translateY(-50%);padding:40px;cursor:pointer;z-index:1;pointer-events:auto}.popupable-next-container{right:calc(var(--popupable-screen-padding)/ 2)}.popupable-prev-container{left:calc(var(--popupable-screen-padding)/ 2)}.popupable-nav-button{opacity:0}.popupable-next{transform:translateX(40px)}.popupable-prev{transform:translateX(-40px)}.popupable-container.popupable-active .popupable-nav-button{opacity:1;transform:translateX(0)}.popupable-next-container:hover .popupable-button{transform:translateX(4px)}.popupable-prev-container:hover .popupable-button{transform:translateX(-4px)}.popupable-locked .popupable-next-container,.popupable-locked .popupable-prev-container,.popupable-next-container.popupable-disabled,.popupable-next-container.popupable-nav-inactive,.popupable-prev-container.popupable-disabled,.popupable-prev-container.popupable-nav-inactive{pointer-events:none}.popupable-locked .popupable-next-container .popupable-next,.popupable-next-container.popupable-disabled .popupable-next,.popupable-next-container.popupable-nav-inactive .popupable-next{transform:translateX(40px);opacity:0}.popupable-locked .popupable-prev-container .popupable-prev,.popupable-prev-container.popupable-disabled .popupable-prev,.popupable-prev-container.popupable-nav-inactive .popupable-prev{transform:translateX(-40px);opacity:0}.popupable-container:not(.popupable-active) .popupable-clone-container:not(.popupable-clone-extra){transform:initial}.popupable-container:not(.popupable-active) .popupable-clone-extra{opacity:0;scale:0.75}.popupable-footer,.popupable-header{position:absolute;top:0;left:0;right:0;opacity:0;transition:opacity var(--popupable-open-duration),transform var(--popupable-open-duration);transform:translateY(-40px);color:#fff;background:var(--popupable-ui-background);pointer-events:auto}.popupable-footer{top:initial;bottom:0;transform:translateY(40px)}.popupable-container.popupable-active:not(.popupable-locked) .popupable-footer,.popupable-container.popupable-active:not(.popupable-locked) .popupable-header{opacity:1;transform:initial}.popupable-counter{padding:10px;text-align:center}.popupable-footer>*+*,.popupable-header>*+*{border-top:1px solid #fff3}.popupable-content-container{display:grid;align-items:flex-end;transition:height var(--popupable-switch-duration);overflow:hidden;position:relative}.popupable-thumbnails{display:flex;gap:10px;padding:10px;justify-content:safe center;overflow:hidden;scrollbar-width:none;touch-action:pan-x}.popupable-thumbnails.popupable-thumbnails-dragging{cursor:grabbing}.popupable-thumbnail{width:64px;height:64px;object-fit:cover;opacity:.65;cursor:pointer;transition:opacity .2s,outline-color .2s;outline:2px solid #0000;outline-offset:-2px;flex:0 0 auto}.popupable-thumbnail:hover{opacity:1}.popupable-thumbnail.popupable-thumbnail-active{opacity:1;outline-color:#fffa}.popupable-content{grid-column:1;grid-row:1;text-align:center;padding:16px;color:#fff;display:flex;flex-direction:column;gap:8px;user-select:text;transition:opacity var(--popupable-switch-duration),transform var(--popupable-switch-duration);position:absolute;bottom:0;left:50%;transform:translateX(-50%);max-width:100%;width:max-content}.popupable-title{font-size:32px;font-weight:600}.popupable-content-before{pointer-events:none;opacity:0;transform:translateX(calc(-50% - 80px))}.popupable-content-after{pointer-events:none;opacity:0;transform:translateX(calc(-50% + 80px))}.popupable-zoomable{cursor:zoom-in}.popupable-zoomed{cursor:zoom-out;touch-action:none}@media (max-width:768px){:root{--popupable-screen-padding:14px}.popupable-button{width:42px;height:42px}.popupable-next-container,.popupable-prev-container{padding:36px}.popupable-button svg{width:25px;height:25px}.popupable-counter{padding:8px}.popupable-content{padding:14px;gap:6px}.popupable-title{font-size:28px}.popupable-thumbnail{width:48px;height:48px}}