.kt-celebration { box-sizing: border-box; position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); border: 0; background: transparent; color: #162447; overflow: auto; font-family: ui-sans-serif, system-ui, sans-serif; }
.kt-celebration::backdrop { background: rgb(11 23 51 / 85%); }
.kt-celebration-card { box-sizing: border-box; position: relative; width: 100%; max-width: 620px; min-width: 0; margin: 4vh auto; padding: clamp(20px, 5vw, 40px); border: 2px solid #f6cf6e; border-radius: 28px; background: linear-gradient(155deg, #fffaf0, #fff, #f3f0ff); text-align: center; box-shadow: 0 20px 80px rgb(0 0 0 / 25%); overflow-wrap: anywhere; }
.kt-celebration-card h2 { font-size: clamp(1.6rem, 5vw, 2.4rem); line-height: 1.15; margin: 12px 0; }
.kt-celebration-card h2:focus { outline: none; }
.kt-celebration-card p { line-height: 1.6; }
.kt-celebration-symbol { color: #98600a; font-size: 56px; line-height: 1; }
.kt-celebration-eyebrow { color: #775217; font-size: .8rem; font-weight: 800; letter-spacing: .13em; margin-bottom: 8px; }
.kt-celebration-source { font-weight: 700; color: #5c3592; }
.kt-celebration-verse { padding: 18px; margin: 18px 0; border: 1px solid #eddaa9; border-radius: 16px; background: #fffdf6; }
.kt-celebration-verse h3 { margin: 0 0 10px; color: #775217; }
.kt-celebration-verse blockquote { margin: 0; font-size: 1.15rem; line-height: 1.65; }
.kt-celebration-connection, .kt-celebration-saved { font-size: .9rem; color: #495672; }
.kt-celebration-meaning { font-weight: 600; }
.kt-celebration-done { width: 100%; min-height: 48px; padding: 14px 18px; border: 0; border-radius: 14px; background: #5c2ed9; color: #fff; font: inherit; font-weight: 750; cursor: pointer; }
.kt-celebration-done:focus-visible { outline: 3px solid #98600a; outline-offset: 4px; }
.kt-celebration-confetti { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.kt-celebration-piece { position: absolute; top: -20px; width: 9px; height: 16px; opacity: 0; animation: kt-treasure-fall 4s linear forwards; }
@keyframes kt-treasure-fall { 0% { opacity: 1; transform: translateY(-20px) rotate(0); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(110dvh) rotate(720deg); } }
@media (prefers-reduced-motion: reduce) { .kt-celebration-piece { display: none; animation: none; } }