html,body{overflow-x:clip}
@supports not (overflow:clip){html,body{overflow-x:hidden}}
/* Fresh, asymmetric birthday editorial photography, without portrait windows. */
.portrait-composition{max-width:350px;padding:5px 0 18px}
.portrait-edition{display:block;font:8px var(--sans);letter-spacing:.25em;color:#a96783;margin:0 0 12px 2px}
.editorial-portrait{position:relative;transform:rotate(-2deg);margin:0;background:#f3cdda;box-shadow:12px 16px 35px #a35d7b16}
.editorial-photo{overflow:hidden;border-radius:3px;aspect-ratio:2/3}
.editorial-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;animation:portraitReveal 1.7s var(--ease) both}
.editorial-portrait figcaption{display:flex;justify-content:space-between;align-items:center;padding:13px 15px;font:italic 15px var(--english);color:#965e79;background:#f8dee7}
.editorial-portrait figcaption small{font:7px var(--sans);letter-spacing:.16em}
.portrait-ribbon{position:absolute;right:-46px;bottom:-26px;width:125px;transform:rotate(18deg);pointer-events:none}
.scene-portrait .portrait-copy{position:relative}
.memory-polaroid,.memory-small{border-color:#efcfda;background:#fff9f7;box-shadow:6px 17px 30px #aa6c8318}
.memory-polaroid figcaption{color:#a16c83}
.memory-scribble,.memory-small figcaption{color:#a96984}

/* Open the seal first; let the petals escape before lifting the paper. */
#letter-petal-canvas{position:fixed;inset:0;z-index:8;pointer-events:none;contain:strict}
.letter-unsealing .envelope-flap{transform:rotateX(180deg);z-index:0;transition-duration:1s}
.letter-unsealing .wax-seal{opacity:0;transform:translateY(-20px) scale(.85)}
.letter-unsealing .envelope-instruction{opacity:0}
.letter-composition:after{content:"";position:absolute;left:12%;right:12%;bottom:190px;height:30px;background:radial-gradient(ellipse,#fff5d9b3,transparent 70%);filter:blur(10px);opacity:0;pointer-events:none}
.letter-unsealing .letter-composition:after{animation:sealGleam 1.1s ease both}
.letter-open .letter-content{transition-delay:.9s}
.letter-open .letter-content>p:nth-child(1){animation:letterLine 1s 1.1s both}
.letter-open .letter-content>p:nth-child(2){animation:letterLine 1s 1.4s both}
.letter-open .letter-content>strong{display:block;animation:letterLine 1s 1.8s both}
.letter-open .letter-signature{animation:letterLine 1s 2s both}
@keyframes sealGleam{20%,70%{opacity:.85;transform:scale(1.3)}100%{opacity:0;transform:scale(2)}}
@keyframes letterLine{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* The final chapter is an automatic, bright birthday celebration. */
body.finale-active .atmosphere{background:radial-gradient(ellipse at 50% 37%,#fff7e9 0,#fce5e9 46%,#f7dce7 100%)}
#transition-veil{background:#fbe4ec}
.finale-transition #transition-veil:after{color:#c393aa;content:"✧     ·       ✧"}
.cake-finale{display:flex;flex-direction:column;align-items:center;min-height:0;padding:15px 0 35px;text-align:center;isolation:isolate}
.celebration-eyebrow{justify-content:center;font-size:8px;margin:0 0 16px;letter-spacing:.21em;animation:celebrateIn 1.1s .1s both}
.celebration-heading{display:flex;align-items:center;justify-content:center;gap:18px;font:59px/1.1 var(--english);letter-spacing:-.025em;color:#a3607f;animation:celebrateIn 1.4s .25s both;z-index:2}
.celebration-heading em{font-style:italic;color:#b77590}
.title-ribbon{display:inline-block;width:66px;height:47px;transform:rotate(-13deg);opacity:.85}
.title-ribbon-right{transform:rotate(13deg) scaleX(-1)}
.title-ribbon svg{display:block;margin-top:-9px}
.cake-hero{position:relative;width:min(410px,44vw);aspect-ratio:1;margin:19px 0 5px;animation:cakeArrive 1.8s 0s both;isolation:isolate;flex-shrink:0}
.cake-hero>img{position:relative;width:100%;height:100%;object-fit:contain;z-index:1;filter:drop-shadow(0 17px 17px #b66d8b18)}
.cake-halo{position:absolute;inset:8% -10% -2%;z-index:0;background:radial-gradient(ellipse,#fff5d9b3 0,#f8ccd73b 45%,transparent 70%);filter:blur(17px)}
.cake-live-flame{position:absolute;left:49%;top:5.2%;width:14px;height:27px;transform:translate(-50%,-96%);z-index:3}
.cake-live-flame>i{position:absolute;inset:0;transform-origin:center bottom;animation:flicker 1.65s ease-in-out infinite;border-radius:70% 30% 65% 35%;background:radial-gradient(ellipse at 50% 80%,#fffef0 0,#ffe4a0 32%,#efb26e 66%,#e99e70);box-shadow:0 0 12px #ffce7777,0 0 35px #ffd88b4d}
.cake-glimmer{position:absolute;color:#c9a77d;z-index:3;width:16px;height:16px;animation:twinkle 3.8s ease-in-out infinite}
.glimmer-one{left:-3%;top:43%;width:13px}.glimmer-two{right:-2%;top:29%;width:20px;animation-delay:-1.6s}.glimmer-three{right:9%;bottom:11%;width:9px;animation-delay:-2.5s}
.celebration-name{position:relative;z-index:2;margin-top:7px;animation:celebrateIn 1.3s 1.6s both}
.celebration-name h2{font-size:32px;font-weight:400;letter-spacing:.16em;color:#a35d7b}
.celebration-name h2>span{font-size:15px;letter-spacing:.1em;margin-left:11px}
.celebration-name>p{margin:9px 0 0;font-size:20px;letter-spacing:.16em;color:#b37491;animation:celebrateIn 1.3s 2.15s both}
.celebration-wishes{margin-top:20px;position:relative;z-index:2;animation:celebrateIn 1.6s 2.7s both}
.celebration-wishes>p{font-size:13px;color:#a16a82;margin:0 0 7px;line-height:1.9;letter-spacing:.035em}
.celebration-wishes>p:first-child{font-size:17px;color:#9f5b7b;margin-bottom:9px}
.celebration-wishes>span{display:block;font:italic 19px var(--english);color:#b88a9f;margin-top:18px}
.celebration-motes{position:absolute;inset:0 -3%;z-index:-1;overflow:hidden;pointer-events:none}
.celebration-motes>i{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);border-radius:50%;background:#de94b2;box-shadow:0 0 7px #e7a2bc77;opacity:0;animation:celebrationMote var(--duration) var(--delay) ease-in-out infinite}
.celebration-motes>i:nth-child(4n){background:#d9b37c}
.finale-active .page-controls,.finale-active #chapter-dots{display:none}
#finale-footer-note{display:none;font:italic 14px var(--english);color:#b27f97}
.finale-active #finale-footer-note{display:block}
.sound-cluster{display:flex;align-items:flex-end;flex-direction:column;gap:7px}
.music-credit{font:6.5px var(--sans);letter-spacing:.11em;color:#a17d8e;text-align:right}
.music-credit:hover{color:var(--rose)}
@keyframes celebrateIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes cakeArrive{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
@keyframes celebrationMote{0%,100%{opacity:0;transform:translate(0,12px) scale(.6)}45%{opacity:.7;transform:translate(7px,-10px) scale(1)}}

@media(min-width:1200px) and (min-height:850px){.cake-hero{width:450px}.cake-finale{padding-top:25px;padding-bottom:45px}.celebration-heading{font-size:65px}}
@media(max-width:1050px){.portrait-composition{max-width:290px}.portrait-ribbon{right:-34px;width:110px}.celebration-heading{font-size:53px}.cake-hero{width:375px;max-width:60vw}}
@media(max-width:700px){
  .scene-portrait{gap:26px;padding-top:14px}.portrait-composition{max-width:235px;padding:0 0 13px}.portrait-edition{font-size:6px;letter-spacing:.19em;margin-bottom:10px}.editorial-portrait{transform:rotate(-2deg)}.editorial-portrait figcaption{padding:10px 11px;font-size:12px}.editorial-portrait figcaption small{font-size:5.5px}.portrait-ribbon{width:88px;right:-33px;bottom:-17px}
  .letter-composition:after{bottom:160px}.letter-open .letter-content>p{animation-delay:1s}.letter-open .letter-content>p:nth-child(2){animation-delay:1.3s}
  .cake-finale{padding:17px 0 26px;min-height:0;justify-content:center}.celebration-eyebrow{font-size:6px;letter-spacing:.15em;margin-bottom:18px;gap:7px}.celebration-heading{font-size:40px;gap:9px;line-height:1.15;white-space:nowrap}.title-ribbon{width:34px;height:25px}.title-ribbon svg{margin-top:-3px}.cake-hero{width:min(320px,100%);max-width:100%;margin:24px 0 10px}.cake-live-flame{width:11px;height:23px}.glimmer-one{left:0}.glimmer-two{right:0}.celebration-name{margin-top:6px}.celebration-name h2{font-size:27px}.celebration-name h2>span{font-size:13px;margin-left:8px}.celebration-name>p{font-size:18px;margin-top:9px}.celebration-wishes{margin-top:20px;width:100%}.celebration-wishes>p{font-size:12px;letter-spacing:0;line-height:1.9}.celebration-wishes>p:first-child{font-size:15px;letter-spacing:.02em}.celebration-wishes>span{font-size:17px;margin-top:15px}#finale-footer-note{font-size:11px}.music-credit{font-size:5.5px;letter-spacing:.05em}
}
@media(max-width:370px){.celebration-heading{font-size:34px;gap:7px}.title-ribbon{width:29px}.cake-hero{width:290px}.celebration-wishes>p{font-size:11px}.celebration-wishes>p:first-child{font-size:14px}}
@media(prefers-reduced-motion:reduce){.celebration-motes{display:none}.cake-live-flame>i,.cake-glimmer{animation:none}.celebration-heading,.celebration-name,.celebration-wishes,.cake-hero{opacity:1;transform:none;animation:none}.letter-open .letter-content>*{animation:none}}

/* The playback promise and cake entrance share one start; no trailing veil. */
.finale-active #transition-veil{transition:none}
.cake-finale{animation:none}
.letter-name{font-size:25px;letter-spacing:.08em}
@media(max-width:700px){.letter-name{font-size:21px}}