@property --un-bg-opacity{syntax:"<percentage>";inherits:false;initial-value:100%}:where(.ui-img){display:block;position:relative;overflow:hidden}:where(.ui-img--placeholder.ui-img--loading,.ui-img--placeholder.ui-img--error){background-color:color-mix(in srgb, oklch(from var(--colors-surface) l c h) var(--un-bg-opacity), transparent)}.ui-img__image{width:100%;height:100%;display:block}.ui-img--loading .ui-img__image{opacity:0}.ui-img__shimmer{inset:calc(var(--spacing) * 0);background-color:oklch(from var(--colors-foreground) L C H/6%);position:absolute;overflow:hidden}.ui-img__shimmer:after{content:"";inset:calc(var(--spacing) * 0);background:linear-gradient(90deg, transparent 0%, oklch(from var(--colors-foreground) L C H/8%) 50%, transparent 100%);animation:1.4s linear infinite ui-img-shimmer;position:absolute;transform:translate(-100%)}@media (prefers-reduced-motion:reduce){.ui-img__shimmer:after{display:none}}.ui-img__fallback{width:100%;height:100%;color:oklch(from var(--colors-foreground) L C H/30%);justify-content:center;align-items:center;display:flex}.ui-img__fallback-icon{width:clamp(.75rem,35%,3rem)!important;height:clamp(.75rem,35%,3rem)!important}@keyframes ui-img-shimmer{to{transform:translate(100%)}}