.checki{position:fixed; inset:auto auto 16px 16px; z-index:9999; pointer-events:auto;
  --checki-size-mobile: clamp(80px, 22vw, 180px);
  --checki-size-desktop: clamp(120px, 14vw, 260px);
}
.checki[data-pos="br"]{ right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); left:auto; top:auto; }
.checki[data-pos="bl"]{ left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); right:auto; top:auto; }
.checki[data-pos="tr"]{ right: max(16px, env(safe-area-inset-right)); top: max(16px, env(safe-area-inset-top)); bottom:auto; left:auto; }
.checki[data-pos="tl"]{ left: max(16px, env(safe-area-inset-left)); top: max(16px, env(safe-area-inset-top)); bottom:auto; right:auto; }

.checki .checki-link, .checki .checki-picture { display:block; width: var(--checki-size-mobile); }
@media (min-width: 768px){ .checki .checki-link, .checki .checki-picture { width: var(--checki-size-desktop);} }

.checki img{ width:100%; height:auto; display:block; filter: drop-shadow(0 8px 18px rgba(0,0,0,.28)); }
.checki[data-shadow="0"] img{ filter:none; }

/* subtle hover lift */
.checki:hover{ transform: translateY(-2px); transition: transform .2s ease; }

/* pulse */
@keyframes checkiPulse{ 0%{transform:scale(1);} 50%{transform:scale(1.04);} 100%{transform:scale(1);} }
.checki[data-pulse="1"] .checki-picture{ animation: checkiPulse 2.5s ease-in-out infinite; }