/* Same badge geometry for every icon cell, regardless of its artwork. */
.pixel-notification-dot{
 position:absolute;top:8%;right:8%;z-index:4;
 display:block;width:12px;height:12px;border-radius:50%;
 background:#f04450;box-shadow:0 0 0 2px var(--notification-surface,#24282d);
 pointer-events:none;transform-origin:center;
 animation:pixel-notification-beat 2.2s ease-in-out infinite;
}
.pixel-notification-dot::after{
 content:"";position:absolute;inset:-4px;border-radius:inherit;
 border:2px solid #f04450;opacity:0;pointer-events:none;
 animation:pixel-notification-halo 2.2s ease-out infinite;
}
.pixel-notification-dot[hidden],.pixel-notification-description[hidden]{display:none!important}
.pixel-notification-description{
 position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
 clip-path:inset(50%);white-space:nowrap;border:0;pointer-events:none;
}
@keyframes pixel-notification-beat{
 0%,65%,100%{transform:scale(1)}
 30%{transform:scale(1.16)}
}
@keyframes pixel-notification-halo{
 0%{transform:scale(.65);opacity:0}
 15%{opacity:.28}
 65%,100%{transform:scale(1.35);opacity:0}
}
@media(prefers-reduced-motion:reduce){
 .pixel-notification-dot,.pixel-notification-dot::after{animation:none}
 .pixel-notification-dot::after{display:none}
}