.photo-mechanism{position:relative;width:100%;height:100%;overflow:visible;--pull:0;isolation:isolate;}
.mechanism-card{position:absolute;left:0;top:0;width:100%;height:92%;box-sizing:border-box;padding:5% 5% 11%;background:var(--shell);box-shadow:0 2px 3px #30292038;transform:translateY(calc(var(--card)*var(--pull)*92%));transition:transform .38s ease;}
.photo-mechanism .mechanism-card img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;}
.mechanism-placeholder{display:grid;place-items:center;background:#f6f1df;width:100%;height:100%;color:#b1b8a3;font-size:22px;}
.mechanism-tab{position:absolute;z-index:9;top:88%;left:40%;width:20%;height:13%;padding:0;border:0;border-radius:0 0 45% 45%;background:var(--tab);color:#594c35;touch-action:none;cursor:ns-resize;transform:translateY(calc(var(--pull)*1960%));transition:transform .38s ease;}
.photo-mechanism.dragging *{transition:none;}
.mechanism-demo-area{height:290px;display:flex;justify-content:center;padding:12px;}
.mechanism-demo-area .photo-mechanism{width:135px;height:100px;}
.photo-mechanism.demo{animation:mechanism-demo 6s ease-in-out infinite;}
@property --pull{syntax:'<number>';inherits:true;initial-value:0;}
@keyframes mechanism-demo{0%,15%,100%{--pull:0;}45%,75%{--pull:1;}}
.mechanism-body{overflow:auto;padding:12px 22px;}
.mechanism-slots{display:flex;gap:6px;flex-wrap:wrap;}
.mechanism-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:8px;margin-top:12px;}
.mechanism-photos button{padding:2px;background:#f5efdf;border:0;}
.mechanism-photos img{width:100%;height:70px;object-fit:cover;}
.mechanism-overlay{position:absolute;pointer-events:none;inset:0;z-index:4;}
.mechanism-overlay>.photo-mechanism{position:absolute;pointer-events:auto;}
.lay:has(.photo-mechanism){overflow:visible!important;}
@media(prefers-reduced-motion:reduce){.photo-mechanism.demo{animation:none;--pull:.65;}.mechanism-card,.mechanism-tab{transition:none;}}

/* Layered cardstock: bevels, paper edges and a slight lift while pulling. */
.mechanism-card{height:91.6667%;padding:0;border-radius:2px;background:linear-gradient(120deg,#ffffff12,transparent 50%,#0000000e),var(--shell);box-shadow:inset 1px 1px 0 #ffffff66,inset -1px -2px 0 #0003,0 2px 0 #c0b7a1,0 4px 0 #70695755,2px 7px 7px #28201738;transform:perspective(700px) translateY(calc(var(--card)*var(--pull)*92%)) rotateX(calc(var(--pull)*-2deg));transform-origin:50% 0;}
.mechanism-card::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 2px 2px #fff2;}
.mechanism-photo-window{position:absolute;left:4.6667%;top:6.3636%;width:90.6667%;height:81.8182%;overflow:hidden;background:#fffaf0;box-shadow:0 1px 0 #fff4,inset 0 2px 3px #0003;}
.mechanism-photo-window img{max-width:none;}
.mechanism-placeholder{position:absolute;left:4.6667%;top:6.3636%;width:90.6667%;height:81.8182%;}
.mechanism-tab{box-shadow:inset 0 1px 0 #fff8,0 2px 0 #8b784f,1px 4px 4px #392b2033;}
.mechanism-demo-area{height:390px;min-height:390px;box-sizing:border-box;}
.mechanism-demo-area .photo-mechanism{height:90px;width:112.5px;}
.mechanism-crop{margin:14px 0;padding:12px;border-radius:12px;background:#a69a7a14;}
.mechanism-crop-viewport{width:min(100%,272px);aspect-ratio:544/360;overflow:hidden;margin:12px auto;background:#ddd5c6;touch-action:none;cursor:move;}
.mechanism-crop-viewport img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none;}
.mechanism-crop label{display:flex;align-items:center;gap:12px;margin:8px 0;}.mechanism-crop input{flex:1;min-width:0;}