.rec{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    font:600 10px/1.1 system-ui, sans-serif;
    padding:.25rem .55rem;
    border-radius:.45rem;
    border:1px solid rgba(248,113,113,.45);
    background:linear-gradient(135deg, rgba(248,113,113,.28), rgba(248,113,113,.08));
    color:#fecaca;
    letter-spacing:.03em;
    user-select: none;
}
.rec::before{
    content:"";
    width:.45rem;
    height:.45rem;
    border-radius:50%;
    background:#f87171;
    box-shadow: 0 0 0 .12rem rgba(248,113,113,.32);
    animation:recPulse 1.2s ease-in-out infinite;

}
@keyframes recPulse {
    0%,100% {
        opacity:1;
        transform:scale(1);
        box-shadow: 0 0 0 .12rem rgba(248,113,113,.32);
    }
    50% {
        opacity:.35;
        transform:scale(.9);
        box-shadow: 0 0 0 .18rem rgba(248,113,113,.18);
    }
}
@media (prefers-reduced-motion: reduce) {
    .rec::before{ animation: none }
}