:root{--curve: cubic-bezier(.22, .61, .36, 1);--bg-dur: .26s;--note-in: .22s;--note-out: .34s}.notification-wrapper{position:fixed;right:1.5vw;bottom:1.5vw;width:min(450px,25vw);z-index:1000000;display:none}.notification-bg{display:none;overflow:hidden;height:0;opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);transition:height var(--bg-dur) var(--curve),opacity var(--bg-dur) var(--curve);will-change:height,opacity;border-radius:10px;box-shadow:0 8px 24px #0000002e;background:rgba(25,25,28,.92);padding:1vw}.notification-content{display:flex;flex-direction:column;gap:8px}.note{display:flex;align-items:flex-start;padding:10px 12px;border-radius:8px;line-height:1.35;font-size:14px;color:#111;background:#fff;border:1px solid rgba(0,0,0,.06);box-shadow:0 2px 6px #0000000f;opacity:0;transform:translateY(8px);transition:opacity var(--note-in) var(--curve),transform var(--note-in) var(--curve);will-change:opacity,transform}.note._in{opacity:1;transform:translateY(0)}.note._out{opacity:0;transform:translateY(4px);transition-duration:var(--note-out)}.note__body{flex:1}.note__text{word-break:break-word}.note--neutral{background:#ffffff;border-color:#00000014;color:#222}.note--positive{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}.note--negative{background:#fef2f2;border-color:#fecaca;color:#7f1d1d}.note:hover{filter:brightness(.98);cursor:pointer}@media (max-width: 480px){.notification-wrapper{right:10px;left:10px;width:auto}}