@layer components{.stf{color:var(--stf-from,var(--muted-foreground));position:relative}.stf-fill{padding:inherit;color:var(--stf-to,var(--foreground));pointer-events:none;-webkit-user-select:none;user-select:none;position:absolute;inset:0}.stf-w{white-space:nowrap}.stf-t{opacity:1}@keyframes stf-fill{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){.stf:not([data-motion-mode=none]){view-timeline:--stf block;view-timeline-inset:var(--stf-inset,40% 20%)}.stf:not([data-motion-mode=none]):not([data-timeline=js]) .stf-t{animation:linear both stf-fill;animation-timeline:--stf;animation-range:cover calc(var(--a) * 100%) cover calc(var(--b) * 100%)}}.stf[data-timeline=js]:not([data-motion-mode=none]) .stf-t{opacity:clamp(0, calc((var(--stf-p,0) - var(--a)) / (var(--b) - var(--a))), 1)}}.stf[data-motion-mode=none] .stf-t{opacity:1;animation:none}@media (forced-colors:active){.stf-fill{display:none}.stf{color:canvastext}}@media print{.stf-t{opacity:1!important;animation:none!important}}}