.ui-heart{position:relative;display:inline-grid;flex:none;place-items:center;vertical-align:middle;transform-origin:50% 60%;pointer-events:none}
.ui-heart>svg{grid-area:1/1;display:block;width:100%;height:100%;transition:opacity 180ms ease,color 180ms ease}
.ui-heart>.ui-heart-outline{opacity:1}.ui-heart>.ui-heart-fill{opacity:0}
.ui-heart[data-active=true]>.ui-heart-outline{opacity:0}.ui-heart[data-active=true]>.ui-heart-fill{opacity:1}
/* The glyph moves, never the click target or its count. */
button:has(.ui-heart):is(:hover,:active){transform:none!important}
@media(prefers-reduced-motion:reduce){.ui-heart>svg{transition:none}}