#microframe{--anim-duration:0.3s;--media-size:90;--slide-duration:0.3s;--panel-offset-x:50vw;--panel-offset-y:0%;--panel-scale:0.8;--panel-rot:0deg;--panel-tilt:0deg;cursor:zoom-out;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.85);overflow:hidden;opacity:0;perspective:2000px;transition:transform var(--anim-duration) ease,opacity var(--anim-duration) ease}.microframe,img,video{cursor:zoom-in}#microframe .panel video,img.no-microframe,video.no-microframe,video[controls]{cursor:auto}#microframe .panel *{cursor:inherit}#microframe.show{opacity:1}#microframe .panel{position:absolute;top:50%;left:50%;width:calc(var(--media-size)*1vw);height:calc(var(--media-size)*1vh);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:inherit;transition:transform var(--slide-duration) ease,opacity var(--slide-duration) ease;transform:translate(-50%,-50%) translate(var(--offset-x, 50vw),var(--offset-y, 0)) rotate(var(--rot, 0deg)) rotate3d(0,1,0,var(--tilt, 0deg)) scale(var(--scale, 1))}.panel.center{opacity:1;z-index:2;--offset-x:0vw;--offset-y:0%;--rot:0deg;--tilt:0deg;--scale:1}.panel.staging-left,.panel.staging-right{opacity:0;z-index:1;--offset-y:var(--panel-offset-y)}.panel.staging-left{--offset-x:calc(-1 * var(--panel-offset-x));--rot:calc(-1 * var(--panel-rot));--tilt:var(--panel-tilt);--scale:var(--panel-scale)}.panel.staging-right{--offset-x:var(--panel-offset-x);--rot:var(--panel-rot);--tilt:calc(-1 * var(--panel-tilt));--scale:var(--panel-scale)}#microframe .panel>*{max-width:100%;max-height:100%;width:auto;height:auto}#microframe .panel .legend{width:100%;text-align:center;margin-top:10px;color:#fff;pointer-events:none;text-shadow:0 0 5px #000}#microframe .counter,#microframe .nav-hint{position:absolute;bottom:1.5rem;color:#fff;white-space:nowrap;pointer-events:none;text-shadow:0 0 5px #000;opacity:0;transition:all var(--anim-duration) ease}#microframe .counter{right:1.5rem;text-align:right;transform:translateY(10px)}#microframe .counter.show{opacity:1;transform:translateY(0)}#microframe .nav-hint{left:50%;text-align:center;transform:translate(-50%,10px)}#microframe .nav-hint.show{opacity:1;transform:translate(-50%,0)}@media (prefers-reduced-motion:reduce){#microframe,#microframe *{transition:none!important;animation:none!important}}