.notificationfx {
  position:fixed;left:12px;bottom:24px;z-index:99990;
  display:inline-flex;align-items:center;width:max-content;max-width:calc(100vw - 24px);
  gap:10px;padding:11px 32px 11px 11px;border-radius:18px;box-sizing:border-box;
  color:#16244b;font-family:'Century Gothic','Segoe UI',sans-serif;text-align:left;
  background:linear-gradient(112deg,hsla(210,90%,90%,.75),hsla(267,75%,91%,.75) 60%,hsla(340,85%,91%,.75));
  border:1px solid #ffffffa0;box-shadow:0 8px 28px #31447c20;
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  transform-origin:bottom left;animation:notificationfx-enter .45s cubic-bezier(.2,.7,.2,1) both
}
.notificationfx.leaving{animation:notificationfx-leave .35s ease-in both;pointer-events:none}
@keyframes notificationfx-enter{from{opacity:0;transform:translate(-16px,8px) rotate(-1.5deg)}to{opacity:1;transform:translate(0,0) rotate(0)}}
@keyframes notificationfx-leave{from{opacity:1;transform:translate(0,0) rotate(0)}to{opacity:0;transform:translate(-16px,8px) rotate(-1.5deg)}}
@media(prefers-reduced-motion:reduce){.notificationfx,.notificationfx.leaving{animation:none}}
.notificationfx[hidden]{display:none!important}
.notificationfx *{box-sizing:border-box}
.notificationfx-avatar{width:44px;height:44px;object-fit:cover;flex:none;border-radius:50%;outline:1px solid #b8b8ff88;outline-offset:2px}
.notificationfx-copy{min-width:0;overflow-wrap:anywhere}
.notificationfx-identity{font-size:13px;line-height:1.55;font-weight:700}
.notificationfx-age{font-size:11px;font-weight:400;white-space:nowrap;opacity:.85}
.notificationfx-location{font-size:11px;line-height:1.7;opacity:.9}
.notificationfx-flag{display:inline-block;width:16px;height:12px;object-fit:contain;margin-left:3px;vertical-align:baseline}
.notificationfx-action{font:400 11px/1.7 'Century Gothic','Segoe UI',sans-serif;margin:0;padding:0;color:inherit}
.notificationfx-time{white-space:nowrap;font-weight:700}
.notificationfx-close{position:absolute;right:4px;top:4px;width:26px;height:26px;padding:0;min-height:0;min-width:0;border:0;border-radius:50%;background:transparent;color:inherit;font:18px/1 sans-serif;cursor:pointer;box-shadow:none;opacity:.8}
.notificationfx-close:hover{background:#7e9cdb25;color:inherit}
.notificationfx-close:focus-visible{outline:2px solid #558ee0;outline-offset:2px}
@media(prefers-color-scheme:dark){
  .notificationfx{background:linear-gradient(112deg,hsla(210,80%,24%,.75),hsla(267,58%,29%,.75) 60%,hsla(340,64%,31%,.75));color:#fff;border-color:#cfdbff60;box-shadow:0 8px 28px #040c2530}
}
@media(max-width:350px){
  .notificationfx{gap:8px;padding-right:28px}
  .notificationfx-avatar{width:36px;height:36px}
  .notificationfx-identity{font-size:11.5px}
  .notificationfx-location,.notificationfx-action{font-size:10.5px}
}
