/* A small, temporary celebration. All rules are scoped to its own UI. */
dialog.birthday-surprise{position:fixed;inset:0;box-sizing:border-box;width:100%;max-width:none;height:100%;height:100dvh;max-height:none;margin:0;padding:0;border:0;overflow:auto;overscroll-behavior:contain;background:#f5eee2;color:#533b30;font-family:var(--sans,'DM Sans',Arial,sans-serif);isolation:isolate}
dialog.birthday-surprise:not([open]){display:none}
dialog.birthday-surprise::backdrop{background:#47362a80;backdrop-filter:blur(6px)}
.birthday-paper{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 13% 84%,#dbb1a249,transparent 42%),radial-gradient(ellipse at 92% 12%,#e7c57844,transparent 42%),radial-gradient(ellipse at 52% 42%,#fffbf3c9,transparent 58%)}
.birthday-orbit{position:absolute;pointer-events:none;width:64vw;height:92%;border:1px solid #a6744c20;border-radius:50%;left:18%;top:4%;transform:rotate(-26deg)}
.birthday-orbit-two{width:48vw;left:26%;height:108%;top:-4%;transform:rotate(34deg);border-color:#a6744c13}
.birthday-layout{box-sizing:border-box;min-height:100%;display:flex;flex-direction:column;position:relative;z-index:2;padding:30px 5vw 24px;pointer-events:none}
.birthday-layout button{pointer-events:auto}
.birthday-topline,.birthday-bottomline{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:9px;letter-spacing:2px;color:#857567}
.birthday-topline{padding-right:46px}
.birthday-topline>span:last-child{margin-right:2px}
.birthday-bottomline{margin-top:22px;font-size:8px;letter-spacing:1.6px}
.birthday-card{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px 15px 0;background:radial-gradient(ellipse at center,#faf5ebe8 0%,#faf5ebad 36%,#faf5eb00 72%);animation:birthday-content-in 1.2s both}
.birthday-spark{width:35px;height:35px;color:#b27a46;margin-bottom:23px}
.birthday-spark svg{width:100%;height:100%}
.birthday-card .birthday-eyebrow{margin:0 0 21px;font-size:9px;font-weight:500;letter-spacing:2.1px;line-height:1.6;color:#8d705a}
.birthday-card .birthday-title{font-family:var(--serif,'Instrument Serif',Georgia,serif);font-size:clamp(68px,8.7vw,130px);font-weight:400;line-height:.94;letter-spacing:-3px;margin:0;color:#563e31}
.birthday-card .birthday-title em{display:inline-block;font-weight:400;color:#b85c43;line-height:1.08}
.birthday-card .birthday-wish{font-family:var(--serif,'Instrument Serif',Georgia,serif);font-size:clamp(28px,3vw,40px);line-height:1.1;margin:22px 0 0;letter-spacing:-.4px;color:#665144}
.birthday-card .birthday-note{font-size:13px;line-height:1.9;font-weight:400;color:#867263;margin:21px 0 0;max-width:470px}
.birthday-actions{display:flex;justify-content:center;align-items:center;gap:25px;margin-top:30px}
.birthday-actions button,.birthday-close,.birthday-pause,.birthday-reopen{font-family:var(--sans,'DM Sans',Arial,sans-serif);cursor:pointer;-webkit-tap-highlight-color:transparent}
.birthday-actions .birthday-celebrate{border:1px solid #b85c43;background:#b85c43;color:#fff8ec;padding:17px 26px;display:inline-flex;align-items:center;gap:28px;font-size:12px;font-weight:500;border-radius:2px;transition:background .2s,transform .2s}
.birthday-actions .birthday-celebrate:hover{background:#a34d36;transform:translateY(-2px)}
.birthday-celebrate svg{width:18px;height:18px}
.birthday-actions .birthday-continue{border:0;border-bottom:1px solid #bda58d;padding:12px 0;background:transparent;color:#6f5747;font-size:11px;display:inline-flex;gap:12px;align-items:center}
.birthday-continue svg{width:18px;height:18px}
.birthday-card .birthday-status{font-family:var(--serif,'Instrument Serif',Georgia,serif);font-size:23px;line-height:1.25;min-height:58px;max-width:440px;margin:17px 0 0;color:#9d533b;text-wrap:balance}
.birthday-close{position:absolute;right:max(22px,env(safe-area-inset-right));top:max(18px,env(safe-area-inset-top));z-index:5;display:grid;place-items:center;width:42px;height:42px;background:#fffaf04d;color:#6e5749;border:1px solid #92745a44;border-radius:50%}
.birthday-close svg{width:22px;height:22px}
.birthday-pause{padding:5px 0;border:0;border-bottom:1px solid #a58e7444;background:none;color:#857567;font-size:9px;letter-spacing:0}
.birthday-surprise :is(button):focus-visible,.birthday-reopen:focus-visible{outline:2px solid #97523c;outline-offset:6px}
.birthday-sky{position:absolute;inset:0;overflow:hidden;z-index:1;pointer-events:none}
.birthday-balloon{display:block;position:absolute;top:calc(100% + 30px);left:var(--left);width:var(--size);height:calc(var(--size) * 2);will-change:transform;animation:birthday-rise var(--duration) linear var(--delay) both;transform-origin:50% 20%}
.birthday-balloon>svg{display:block;width:100%;height:100%;filter:drop-shadow(6px 12px 10px #73503a0b)}
.birthday-confetti{display:block;position:absolute;top:-30px;left:var(--left);width:5px;height:12px;background:var(--color);opacity:0;animation:birthday-confetti 4.8s ease-in var(--delay) both}
.birthday-confetti:nth-child(3n){width:8px;height:8px;border-radius:50%}
.birthday-surprise[data-paused=true] .birthday-sky>*{animation-play-state:paused}
.birthday-reopen{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:90;display:inline-flex;align-items:center;gap:10px;padding:11px 17px;background:#f8f0e5;color:#9d503a;border:1px solid #caa78d;border-radius:28px;box-shadow:0 5px 20px #5d3e2a0d;font-size:11px;font-weight:500}
.birthday-reopen svg{width:19px;height:26px}
@keyframes birthday-rise{from{transform:translate3d(0,0,0) rotate(calc(var(--tilt) * -1))}to{transform:translate3d(var(--drift),calc(-100dvh - 420px),0) rotate(var(--tilt))}}
@keyframes birthday-confetti{0%{opacity:0;transform:translate3d(0,-10px,0) rotate(0)}10%{opacity:.8}80%{opacity:.6}100%{opacity:0;transform:translate3d(var(--drift),100dvh,0) rotate(var(--turn))}}
@keyframes birthday-content-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(min-width:1500px){.birthday-card .birthday-title{font-size:142px}.birthday-card .birthday-note{font-size:15px}.birthday-card .birthday-wish{font-size:44px}.birthday-spark{width:43px;height:43px}}
@media(max-width:650px){.birthday-layout{padding:25px 24px 18px}.birthday-topline{font-size:7px;letter-spacing:1.4px;padding-right:43px}.birthday-topline>span:last-child{display:none}.birthday-card{padding:30px 0 0}.birthday-spark{width:29px;height:29px;margin-bottom:27px}.birthday-card .birthday-eyebrow{font-size:7px;letter-spacing:1.3px;margin-bottom:25px}.birthday-card .birthday-title{font-size:clamp(59px,15.4vw,90px);letter-spacing:-1.8px;line-height:1}.birthday-card .birthday-wish{font-size:32px;margin-top:23px}.birthday-card .birthday-note{font-size:11px;line-height:1.9;margin-top:20px}.birthday-actions{flex-direction:column;gap:12px;margin-top:28px}.birthday-actions .birthday-celebrate{font-size:11px;padding:16px 23px;gap:35px}.birthday-actions .birthday-continue{font-size:10px;padding:11px 0}.birthday-card .birthday-status{font-size:19px;max-width:300px;min-height:52px;margin-top:13px}.birthday-bottomline{font-size:6px;letter-spacing:.7px;margin-top:15px}.birthday-pause{font-size:8px}.birthday-orbit{width:132vw;left:-16%;height:84%;top:8%;transform:rotate(-20deg)}.birthday-orbit-two{width:115vw;left:-7%;transform:rotate(24deg)}.birthday-balloon{width:calc(var(--size) * .72);height:calc(var(--size) * 1.44)}.birthday-reopen{right:14px;bottom:14px;font-size:10px;padding:8px 13px}.birthday-close{top:16px;right:18px;width:37px;height:37px}}
@media(max-height:690px){.birthday-card{padding-top:18px}.birthday-spark{width:23px;height:23px;margin-bottom:14px}.birthday-card .birthday-eyebrow{margin-bottom:12px}.birthday-card .birthday-title{font-size:clamp(54px,10vh,88px)}.birthday-card .birthday-wish{margin-top:14px;font-size:28px}.birthday-card .birthday-note{margin-top:13px}.birthday-actions{margin-top:20px}.birthday-bottomline{margin-top:8px}}
@media(min-width:651px) and (min-height:691px) and (max-height:800px){.birthday-card .birthday-title{font-size:clamp(68px,12vh,105px)}.birthday-spark{width:28px;height:28px;margin-bottom:18px}.birthday-card .birthday-eyebrow{margin-bottom:16px}}
@media(prefers-reduced-motion:reduce){.birthday-card,.birthday-sky>*{animation:none!important}.birthday-balloon{top:auto;bottom:0;opacity:.18;transform:rotate(var(--tilt))}.birthday-balloon:nth-child(n+5){display:none}.birthday-confetti,.birthday-pause{display:none}.birthday-actions .birthday-celebrate:hover{transform:none}}

/* The answer unfolds from a small crumpled paper into a creased keepsake. */
dialog.birthday-letter{position:fixed;inset:0;box-sizing:border-box;width:100%;max-width:none;height:100%;height:100dvh;max-height:none;margin:0;padding:65px 24px 35px;border:0;background:transparent;color:#65472f;overflow:auto;overscroll-behavior:contain;display:grid;place-items:center;font-family:var(--sans,'DM Sans',Arial,sans-serif)}
dialog.birthday-letter:not([open]){display:none}
dialog.birthday-letter::backdrop{background:#5a41305c;backdrop-filter:blur(7px)}
.birthday-letter-shell{width:min(510px,100%);display:flex;flex-direction:column;align-items:center;gap:32px}
.birthday-letter-scene{position:relative;width:100%;perspective:1300px}
.birthday-letter-shadow{filter:drop-shadow(4px 15px 15px #3b271c35) drop-shadow(1px 2px 2px #38251d20)}
.birthday-letter-sheet{box-sizing:border-box;position:relative;min-height:340px;padding:39px 45px 31px;background:linear-gradient(119deg,#fffcf2,#f5eddc 46%,#fff9ec 67%,#eee3cd);transform:rotate(-2deg);transform-origin:50% 50%;clip-path:polygon(.8% 0,25% .7%,75% 0,100% 1%,99% 99%,75% 100%,24% 99.3%,0 100%);backface-visibility:hidden;isolation:isolate}
.birthday-letter-grain,.birthday-letter-creases{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.birthday-letter-grain{z-index:1;mix-blend-mode:multiply;opacity:.45}
.birthday-letter-creases{opacity:.65}
.birthday-letter-fold{position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;backface-visibility:hidden}
.birthday-letter-fold-left{clip-path:polygon(0 0,52% 48%,0 100%);background:linear-gradient(100deg,#d5c6ab,#fffaed 85%);transform-origin:0 50%}
.birthday-letter-fold-right{clip-path:polygon(100% 0,51% 49%,100% 100%);background:linear-gradient(270deg,#cdbb9d,#fff9ea 90%);transform-origin:100% 50%}
.birthday-letter-fold-top{clip-path:polygon(0 0,100% 0,51% 51%);background:linear-gradient(#fffcf2,#ccbaa0);transform-origin:50% 0}
.birthday-letter-ink{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center}
.birthday-letter-eyebrow{font-size:8px;letter-spacing:2.5px;line-height:1.6;color:#9d8467}
.birthday-letter-star{width:23px;height:23px;color:#b18b54;margin-top:23px}
.birthday-letter-star svg{width:100%;height:100%}
.birthday-letter .birthday-letter-message{font-family:var(--serif,'Instrument Serif',Georgia,serif);font-size:36px;font-weight:400;line-height:1.2;letter-spacing:-.4px;min-height:88px;display:grid;place-items:center;margin:20px 0 28px;color:#684a31;text-wrap:balance}
.birthday-letter-signature{font-size:7px;letter-spacing:2px;color:#ad9474;line-height:1.5}
.birthday-paper-ball{position:absolute;z-index:4;left:50%;top:50%;width:92px;height:92px;opacity:0;transform:translate(-50%,-50%);filter:drop-shadow(5px 8px 6px #3b271c35);pointer-events:none}
.birthday-paper-ball svg{width:100%;height:100%}
.birthday-letter-close{position:absolute;right:max(22px,env(safe-area-inset-right));top:max(18px,env(safe-area-inset-top));display:grid;place-items:center;width:42px;height:42px;border:1px solid #fff3d870;border-radius:50%;background:#fff8e538;color:#fff6e8;cursor:pointer}
.birthday-letter-close svg{width:22px;height:22px}
.birthday-letter-again{display:inline-flex;align-items:center;gap:22px;border:1px solid #b85c43;border-radius:2px;background:#b85c43;color:#fff8ed;padding:15px 23px;font-family:var(--sans,'DM Sans',Arial,sans-serif);font-size:11px;cursor:pointer;box-shadow:0 5px 15px #43271914}
.birthday-letter-again svg{width:17px;height:17px}
.birthday-letter :is(button):focus-visible{outline:2px solid #fff8ed;outline-offset:5px}
.birthday-letter[data-unfolding=true] .birthday-paper-ball{animation:birthday-paper-ball .55s ease-out both}
.birthday-letter[data-unfolding=true] .birthday-letter-sheet{animation:birthday-paper-unfold 1.45s .1s cubic-bezier(.22,.65,.25,1) both}
.birthday-letter[data-unfolding=true] .birthday-letter-ink{animation:birthday-paper-ink .4s 1.08s both}
.birthday-letter[data-unfolding=true] .birthday-letter-fold-left{animation:birthday-fold-left 1.1s .2s both}
.birthday-letter[data-unfolding=true] .birthday-letter-fold-right{animation:birthday-fold-right 1.2s .25s both}
.birthday-letter[data-unfolding=true] .birthday-letter-fold-top{animation:birthday-fold-top 1.3s .15s both}
@keyframes birthday-paper-ball{0%{opacity:1;transform:translate(-50%,-50%) scale(.8) rotate(-24deg)}48%{opacity:1;transform:translate(-50%,-50%) scale(1.1) rotate(12deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.35) rotate(43deg)}}
@keyframes birthday-paper-unfold{0%{opacity:0;transform:translateY(25px) scale(.08,.14) rotate(-34deg) rotateX(70deg) rotateY(-28deg);clip-path:polygon(25% 28%,43% 12%,66% 19%,82% 37%,73% 65%,53% 85%,26% 74%,17% 50%)}16%{opacity:1;transform:translateY(12px) scale(.28,.2) rotate(15deg) rotateX(44deg) rotateY(24deg)}38%{transform:scale(.65,.46) rotate(-10deg) rotateX(-28deg) rotateY(-15deg)}66%{transform:scale(.95,.88) rotate(5deg) rotateX(13deg) rotateY(7deg)}85%{transform:scale(1.02,1.025) rotate(-4deg) rotateX(-4deg) rotateY(-2deg)}100%{opacity:1;transform:scale(1) rotate(-2deg) rotateX(0) rotateY(0);clip-path:polygon(.8% 0,25% .7%,75% 0,100% 1%,99% 99%,75% 100%,24% 99.3%,0 100%)}}
@keyframes birthday-paper-ink{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes birthday-fold-left{0%,20%{opacity:.9;transform:rotateY(63deg)}70%{opacity:.65;transform:rotateY(-15deg)}100%{opacity:0;transform:rotateY(0)}}
@keyframes birthday-fold-right{0%,20%{opacity:.9;transform:rotateY(-73deg)}70%{opacity:.6;transform:rotateY(14deg)}100%{opacity:0;transform:rotateY(0)}}
@keyframes birthday-fold-top{0%,15%{opacity:.8;transform:rotateX(-65deg)}70%{opacity:.5;transform:rotateX(12deg)}100%{opacity:0;transform:rotateX(0)}}
@media(max-width:650px){dialog.birthday-letter{padding:62px 25px 30px}.birthday-letter-shell{gap:29px}.birthday-letter-sheet{min-height:315px;padding:32px 26px 30px}.birthday-letter .birthday-letter-message{font-size:29px;line-height:1.24;min-height:105px;margin:19px 0 24px}.birthday-letter-eyebrow{font-size:7px;letter-spacing:2px}.birthday-letter-star{width:21px;height:21px;margin-top:22px}.birthday-letter-signature{font-size:6px;letter-spacing:1.6px}.birthday-letter-close{width:37px;height:37px;right:18px;top:16px}.birthday-letter-again{font-size:10px;padding:14px 20px}}
@media(prefers-reduced-motion:reduce){.birthday-letter-sheet,.birthday-letter-ink,.birthday-letter-fold,.birthday-paper-ball{animation:none!important}.birthday-paper-ball,.birthday-letter-fold{display:none}}