@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=DM+Sans:wght@400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;1,400&display=swap');
:root{color-scheme:light;--paper:#fbf5e8;--ink:#634c39;--rose:#ae5961}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;background-image:radial-gradient(#bda78818 .7px,transparent .7px);background-size:5px 5px}header{max-width:1440px;margin:auto;padding:30px 5%;display:flex;align-items:center;justify-content:space-between}.brand{font-family:'Playfair Display',Georgia,serif;font-size:26px;color:var(--rose);text-decoration:none}.brand span{margin-left:7px;font-style:italic}.edition{font-size:10px;letter-spacing:2px;color:#917b65}main{text-align:center;padding-top:28px}.eyebrow{font-size:10px;letter-spacing:3px;color:var(--rose);margin-bottom:18px}h1{font-family:'Playfair Display',Georgia,serif;font-size:clamp(25px,3vw,36px);line-height:1.2;font-weight:400;margin:0;letter-spacing:-.5px}h1 em{color:var(--rose);font-weight:400}.intro{font-size:13px;line-height:1.9;color:#947c66;margin:20px 0 0}.cake-scene{position:relative;width:min(940px,100%);margin:0 auto}#cake{position:relative;width:min(700px,100%);margin:auto;aspect-ratio:700/500}#cake svg{width:100%;height:100%;overflow:visible}#candles{position:absolute;inset:0}.candle{position:absolute;transform:translate(-50%,-100%);width:38px;height:72px;border:0;background:transparent;padding:0;cursor:pointer;display:flex;align-items:center;flex-direction:column;justify-content:flex-end;isolation:isolate}.wax{position:relative;width:10px;height:41px;border-radius:3px 3px 2px 2px;background:repeating-linear-gradient(155deg,var(--c) 0 7px,#fff5e7 7px 11px);box-shadow:inset -2px 0 #75432515,1px 2px 2px #74513b25;transition:transform .2s}.flame{width:10px;height:17px;background:radial-gradient(ellipse at 50% 80%,#fff8ba 0 20%,#ffc364 50%,#e99647 100%);border-radius:70% 30% 60% 40%;margin-bottom:4px;box-shadow:0 0 13px #ffc77388;transform-origin:bottom;animation:flicker 2s infinite alternate;animation-delay:var(--delay)}.number{position:absolute;top:73px;font-size:9px;color:#8d6255;background:#fff7e8d9;border-radius:50%;min-width:17px;height:17px;line-height:17px;opacity:0;transition:opacity .2s}.candle:hover .number,.candle:focus-visible .number,.candle.read .number{opacity:1}.candle:hover .wax{transform:translateY(-3px)}.candle:focus-visible{outline:2px dashed var(--rose);outline-offset:2px;border-radius:12px}.candle.read .flame{opacity:.55}.side-note{position:absolute;font-family:'Playfair Display',Georgia,serif;font-style:italic;color:#ad806c;font-size:17px;line-height:1.5}.left-note{left:1%;top:36%;transform:rotate(-10deg)}.left-note span{display:block;font-size:36px;margin-left:42px}.right-note{right:0;top:60%;transform:rotate(9deg)}.below-cake{margin-top:-13px;font-size:11px;letter-spacing:.4px}.tiny-star{color:#ba7d5b;margin-right:5px}.progress-track{width:110px;height:3px;border-radius:5px;background:#e7dcc8;margin:15px auto}.progress-track div{height:100%;background:#b86b71;transition:width .3s;width:0}.below-cake p{font-family:'Playfair Display',Georgia,serif;font-style:italic;color:#9d856e;font-size:14px;margin:14px 0 38px}footer{border-top:1px solid #e5dac7;margin:0 5%;padding:22px 0;display:flex;justify-content:space-between;align-items:center;color:#9d856e;font-size:9px;letter-spacing:1.4px}footer span:last-child{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:15px;letter-spacing:0}dialog{border:1px solid #e5d6c0;background:#fffbf2;color:var(--ink);width:min(520px,calc(100% - 32px));padding:50px 44px 26px;box-shadow:0 25px 100px #51352930;max-height:85dvh;overflow:auto;transform:rotate(-.6deg)}dialog::backdrop{background:#5c443461;backdrop-filter:blur(5px)}.close{position:absolute;right:16px;top:10px;font-size:28px;background:none;border:0;color:#9f7c68;cursor:pointer;min-width:44px;min-height:44px}.letter-top{font-size:9px;letter-spacing:2px;text-align:center;color:#a78a73}.letter-number{color:var(--rose);font-family:'Playfair Display',Georgia,serif;font-style:italic;text-align:center;font-size:42px;margin:18px 0 30px}h2{font-family:'Playfair Display',Georgia,serif;font-weight:400;font-size:26px}#letter-body{font-size:15px;line-height:1.95;white-space:pre-wrap}.signature{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:22px;color:var(--rose);margin:30px 0}.letter-nav{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #e9ddcd;padding-top:18px;gap:10px;font-size:10px;color:#a38670}.letter-nav button{font:inherit;font-size:11px;border:0;background:transparent;color:var(--rose);padding:10px 0;cursor:pointer}.letter-nav button:disabled{opacity:.3;cursor:default}@keyframes flicker{0%,100%{transform:rotate(-5deg) scale(.95)}50%{transform:rotate(7deg) scale(1.06)}}@media(max-width:700px){header{padding:22px 6%}.brand{font-size:22px}.edition{font-size:8px;letter-spacing:1px}main{padding-top:30px}.cake-scene{margin-top:28px}.side-note{display:none}.candle{width:30px;height:55px}.wax{width:7px;height:28px}.flame{width:8px;height:13px;margin-bottom:3px}.number{top:55px;font-size:8px;min-width:14px;height:14px;line-height:14px}.below-cake{margin-top:10px}footer{gap:20px;font-size:8px}footer span:last-child{font-size:13px}dialog{padding:40px 27px 22px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.birthday-name{font-family:"Playfair Display",Georgia,serif;font-size:clamp(36px,5.5vw,68px);line-height:1.12;letter-spacing:1px;color:var(--rose);margin:0 auto 22px;padding:0 20px;max-width:1000px}

/* Elegant serif typography for the birthday greeting. */
.eyebrow{font-family:'DM Sans',sans-serif;font-size:10px;letter-spacing:2.5px;margin-bottom:18px}
.birthday-name{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(38px,5.8vw,72px);font-weight:500;line-height:1.1;letter-spacing:2px;margin-bottom:22px}
h1{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(29px,3.4vw,40px);font-weight:400;line-height:1.15;letter-spacing:0}
h1 em{font-style:italic;font-weight:400}
.intro{font-family:'DM Sans',sans-serif;font-size:15px;line-height:1.9;margin-top:20px;padding:0 18px}

/* Short birthday candles keep the center icing visible across the front rim. */
@media(min-width:701px){.wax{height:50px}.flame{height:15px}}
@media(max-width:700px){.wax{height:clamp(19px,7.14vw,50px)}.flame{height:clamp(7px,2.14vw,15px)}}

.below-cake{padding-bottom:28px}
/* Bring the cake closer to the birthday greeting. */
.cake-scene{margin-top:-8px}
@media(max-width:700px){.cake-scene{margin-top:20px}}
/* Reserve clear space below the taller plate before the reading counter. */
#cake svg{display:block}
.below-cake{position:relative;margin-top:28px}
.left-note{top:29%}

.birthday-name{font-size:clamp(32px,4.8vw,58px)}
.birthday-heart{display:inline-block;color:#d28f9d;transform-origin:50% 65%;animation:heart-twitch 3.2s ease-in-out infinite}
.flame{animation:flame-dance 1.35s ease-in-out infinite;animation-delay:var(--delay)}
.candle:nth-child(3n) .flame{animation-duration:1.1s}
.candle:nth-child(3n + 1) .flame{animation-duration:1.65s}
@keyframes flame-dance{0%,100%{transform:rotate(-8deg) scale(.92,1);filter:brightness(1)}18%{transform:rotate(10deg) scale(.85,1.16);filter:brightness(1.1)}37%{transform:rotate(-5deg) scale(1.06,.9);filter:brightness(.97)}58%{transform:rotate(7deg) scale(.9,1.12);filter:brightness(1.13)}78%{transform:rotate(-11deg) scale(1,.96);filter:brightness(1.03)}}
@keyframes heart-twitch{0%,68%,100%{transform:rotate(0) scale(1)}73%{transform:rotate(-9deg) scale(1.06)}78%{transform:rotate(8deg) scale(1.1)}83%{transform:rotate(-5deg) scale(1.05)}88%{transform:rotate(3deg) scale(1.02)}93%{transform:rotate(0) scale(1)}}

.heart-border{max-width:none;width:100%;padding:22px 3%;display:flex;justify-content:space-between;gap:12px;overflow:hidden;color:#bb6c7c;font-family:Georgia,serif;font-size:30px;line-height:1}
.heart-border span{flex:0 0 auto}
.floating-sticker{position:fixed;top:0;left:0;--sticker-width:150px;--sticker-height:240px;width:var(--sticker-width);height:var(--sticker-height);object-fit:contain;pointer-events:none;z-index:35;filter:drop-shadow(0 4px 5px #79534420);animation:sticker-drift 22s ease-in-out infinite;transform:translate(calc(100vw - var(--sticker-width) - 22px),calc(100dvh - var(--sticker-height) - 44px)) rotate(7deg)}
@keyframes sticker-drift{0%,100%{transform:translate(calc(100vw - var(--sticker-width) - 22px),calc(100dvh - var(--sticker-height) - 44px)) rotate(7deg)}25%{transform:translate(calc(100vw - var(--sticker-width) - 30px),90px) rotate(-7deg)}50%{transform:translate(22px,95px) rotate(5deg)}75%{transform:translate(18px,calc(100dvh - var(--sticker-height) - 54px)) rotate(-6deg)}}
.motion-controls{text-align:center;padding:0 16px 18px}.motion-controls button{border:0;background:transparent;color:#9d856e;font:10px 'DM Sans',sans-serif;text-decoration:underline;text-underline-offset:3px;padding:10px;cursor:pointer}
body.motion-paused *,body.motion-paused *::before,body.motion-paused *::after{animation-play-state:paused!important}
@media(max-width:700px){.heart-border{padding:20px 6%;font-size:25px}.heart-border span:nth-child(n+9){display:none}.floating-sticker{--sticker-width:104px;--sticker-height:166px}}


.welcome-celebration{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:40}
.welcome-confetti{position:absolute;top:64%;opacity:0;animation:welcome-burst var(--duration) var(--delay) both;will-change:transform,opacity}
@keyframes welcome-burst{0%{opacity:0;transform:translate(0,0) rotate(0)}6%{opacity:1}36%{opacity:1;transform:translate(calc(var(--dx) * .65),var(--peak)) rotate(calc(var(--spin) * .4));animation-timing-function:ease-in}78%{opacity:1}100%{opacity:0;transform:translate(var(--dx),80vh) rotate(var(--spin))}}
.welcome-sparkle{position:absolute;opacity:0;line-height:1;text-shadow:0 0 9px #fff4c7;animation:welcome-twinkle 1.7s var(--delay) 2 both}
@keyframes welcome-twinkle{0%,100%{opacity:0;transform:scale(.2) rotate(-15deg)}45%{opacity:1;transform:scale(1.1) rotate(10deg)}70%{opacity:.7;transform:scale(.8) rotate(20deg)}}
@media(prefers-reduced-motion:reduce){.welcome-celebration{display:none}}

.floating-sticker{pointer-events:auto;cursor:pointer}.floating-sticker:focus-visible{outline:2px dashed var(--rose);outline-offset:4px;border-radius:16px}

#celebration-entry{width:min(440px,calc(100% - 40px));padding:42px 24px 46px;text-align:center;border:1px solid #ecd0d3;border-radius:28px;transform:none;background:#fff9f0;box-shadow:0 20px 100px #ae59612b}
#celebration-entry::backdrop{background:#fbf5e8ed;backdrop-filter:blur(8px)}
.entry-heart{display:block;font:64px Georgia,serif;line-height:1;color:#cf8c9d;margin-bottom:18px}
#celebration-title{font:400 clamp(36px,7vw,48px) 'Cormorant Garamond',Georgia,serif;color:var(--rose);margin:0 0 12px}
#celebration-entry p{color:#947c66;font-size:15px;margin:0 0 30px}
#celebrate-button{border:1px solid #b97080;border-radius:999px;padding:16px 28px;background:#b97080;color:#fffaf3;font:500 16px 'DM Sans',sans-serif;cursor:pointer;min-height:52px;box-shadow:0 5px 18px #b9708026}
#celebrate-button:hover{background:#a75e6e}#celebrate-button:focus-visible{outline:2px dashed var(--rose);outline-offset:5px}