@layer components{.sf-skel{border-radius:var(--sf-radius-card,0);background-color:color-mix(in srgb, var(--sf-border,#e6e6e6) 70%, var(--sf-bg,#fff));background-image:linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--sf-bg,#fff) 65%, transparent) 50%, transparent 80%);background-repeat:no-repeat;background-size:220% 100%;animation:1.6s ease-in-out infinite sf-skel-shimmer;display:block}.sf-skel-line{border-radius:999px;height:.8rem}.sf-skel-brand{font-family:var(--sf-font-heading);letter-spacing:.3em;text-transform:uppercase;color:#0000;background:linear-gradient(100deg, var(--sf-muted,#888) 30%, var(--sf-accent,#999) 50%, var(--sf-muted,#888) 70%) 0 0 / 220% 100%;opacity:.75;-webkit-background-clip:text;background-clip:text;animation:2.2s ease-in-out infinite sf-skel-shimmer}.sf-loading{animation:.3s ease-out .15s both sf-loading-in}@keyframes sf-skel-shimmer{0%{background-position:120% 0}to{background-position:-120% 0}}@keyframes sf-loading-in{0%{opacity:0}to{opacity:1}}.sf-progress{z-index:9999;pointer-events:none;opacity:0;height:2.5px;transition:opacity .25s .1s;position:fixed;inset:0 0 auto}.sf-progress[data-state=loading]{opacity:1;transition-delay:0s}.sf-progress>span{transform-origin:0;background:var(--sf-accent,currentColor);width:100%;height:100%;box-shadow:0 0 8px color-mix(in srgb, var(--sf-accent,currentColor) 60%, transparent);transition:transform .2s ease-out;display:block;transform:scaleX(0)}@media (prefers-reduced-motion:reduce){.sf-skel,.sf-skel-brand,.sf-loading{animation:none}.sf-progress>span{transition:none}}}