@layer components{.image{position:relative;display:block;overflow:hidden;background:linear-gradient(135deg,oklch(from var(--color-surface-elevated) 24% c h),oklch(from var(--color-surface-hover) 28% c h));isolation:isolate}.image:before,.image:after{content:"";position:absolute;inset:0;pointer-events:none;transition:opacity var(--transition-base)}.image:before{background:linear-gradient(135deg,oklch(from var(--color-surface-elevated) 24% c h),oklch(from var(--color-surface-hover) 30% c h));opacity:0}.image:after{background:radial-gradient(circle at 25% 20%,oklch(100% 0 0 / .12),transparent 52%);mix-blend-mode:screen;opacity:0}.image[data-status=loading]:before{opacity:1;animation:image-skeleton-flash 1.9s ease-in-out infinite}.image[data-status=loading]:after{opacity:.7;animation:image-skeleton-flash 1.9s ease-in-out infinite reverse}.image>img{display:block;inline-size:100%;block-size:auto;opacity:0;transition:opacity var(--transition-slow)}.image[data-status=loaded]>img,.image[data-status=error]>img{opacity:1}.image[data-status=loaded]:before,.image[data-status=loaded]:after,.image[data-status=error]:before,.image[data-status=error]:after{opacity:0}@keyframes image-skeleton-flash{0%,to{opacity:.62}50%{opacity:.96}}}