.divy-celebration { position: fixed; z-index: 210; right: clamp(12px, 3vw, 36px); bottom: clamp(12px, 3vw, 30px); width: min(390px, calc(100vw - 24px)); padding: 22px 58px 23px 22px; border: 1px solid #c9bbac; border-radius: 18px; background: #fffaf1; color: #30362e; box-shadow: 0 18px 56px #28251e35; animation: celebration-arrive .42s cubic-bezier(.2, .8, .2, 1) both; overflow: hidden; }
.divy-celebration::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 5px; background: #a8b987; }
.divy-celebration[data-tier="small"]::before { background: #bc9bcb; }
.divy-celebration[data-tier="milestone"]::before, .divy-celebration[data-tier="major"]::before { background: #db9c59; }
.divy-celebration[data-tier="milestone"], .divy-celebration[data-tier="major"] { background: linear-gradient(120deg, #fffaf1, #f6ead6); border-color: #d7bd95; }
.divy-celebration .celebration-star { display: block; margin-bottom: 8px; width: max-content; color: #9a734d; font-size: 25px; line-height: 1; animation: celebration-glow 1.4s ease-out both; }
.divy-celebration .celebration-eyebrow { display: block; margin-bottom: 7px; color: #776e63; font: 500 10px 'DM Mono', monospace; letter-spacing: .12em; }
.divy-celebration strong { display: block; font: 600 clamp(22px, 5vw, 30px)/1.05 Fraunces, Georgia, serif; letter-spacing: -.02em; }
.divy-celebration p { margin: 10px 0 0; color: #5d6259; line-height: 1.45; overflow-wrap: anywhere; }
.divy-celebration button { position: absolute; right: 12px; top: 12px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: #4a4f48; font-size: 22px; }
.divy-celebration button:hover { background: #e9ded0; }
@keyframes celebration-arrive { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes celebration-glow { from { opacity: .35; transform: scale(.7) rotate(-20deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
.action-pin.just-completed { animation: action-complete .5s ease-out; }
@keyframes action-complete { 0% { box-shadow: 0 0 0 0 #b6cc9a88; } 100% { box-shadow: 0 0 0 16px #b6cc9a00; } }
@media (max-width: 380px) { .divy-celebration { padding: 18px 54px 19px 18px; } }
@media (prefers-reduced-motion: reduce) { .divy-celebration, .divy-celebration .celebration-star, .action-pin.just-completed { animation: none; } }