.feed-card:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 4px 8px -4px rgba(0,0,0,.4),0 16px 24px -8px rgba(0,0,0,.5);opacity:0;transition:opacity .2s var(--ease-out-quart);pointer-events:none;z-index:-1}@media (hover:hover) and (pointer:fine){.feed-card:hover:after{opacity:1}}.feed-card:focus-within:after{opacity:1}@keyframes feed-enter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.feed-card[data-stagger]{animation:feed-enter .3s var(--ease-out-quart) backwards;animation-delay:calc(var(--stagger, 0) * 40ms)}@supports (animation-timeline:view()){.feed-card:not([data-stagger]){animation:feed-enter .3s var(--ease-out-quart) both;animation-timeline:view();animation-range:entry 0 entry 40%}}@media (prefers-reduced-motion:reduce){.feed-card:not([data-stagger]),.feed-card[data-stagger]{animation:none}}:where(html[data-motion=reduce]) .feed-card:not([data-stagger]),:where(html[data-motion=reduce]) .feed-card[data-stagger]{animation:none}@layer components{.feed-card{box-shadow:inset 3px 0 0 var(--ch,var(--viv-band)),var(--lift-edge)}.feed-card [data-card-channel],[role=listitem]>[data-heat]{border-color:var(--border-subtle)}@supports (color:color-mix(in oklch,red,red)){.feed-card [data-card-channel]{background:color-mix(in oklch,var(--ch,var(--brand)) 24%,transparent);border-color:color-mix(in oklch,var(--ch,var(--brand)) 50%,transparent);color:color-mix(in oklch,var(--ch,var(--brand)) 50%,white);font-weight:600}[role=listitem]>[data-heat]{border-color:color-mix(in oklch,var(--ch,var(--brand)) 26%,var(--border-subtle));background-image:linear-gradient(155deg,color-mix(in oklab,var(--ch,var(--viv-wash)) 17%,transparent) 0,transparent 56%)}[role=listitem]>[data-heat]:hover{background-image:linear-gradient(155deg,color-mix(in oklab,var(--ch,var(--viv-wash)) 24%,transparent) 0,transparent 62%)}}@media (prefers-contrast:more){[role=listitem]>[data-heat],[role=listitem]>[data-heat]:hover{background-image:none}}:where(html[data-contrast=more]) [role=listitem]>[data-heat],:where(html[data-contrast=more]) [role=listitem]>[data-heat]:hover{background-image:none}@media (prefers-reduced-transparency:reduce){[role=listitem]>[data-heat],[role=listitem]>[data-heat]:hover{background-image:none}}:where(html[data-transparency=reduce]) [role=listitem]>[data-heat],:where(html[data-transparency=reduce]) [role=listitem]>[data-heat]:hover{background-image:none}}