:root{--ink:#4a302e;--muted:#806963;--rose:#a66064;--cream:#fff7ed;--gold:#e6b46a;--green:#687a5b;--serif:"Palatino Linotype",Palatino,Georgia,serif;--sans:"Segoe UI",Tahoma,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:var(--sans);background:#e7ad91;overflow:hidden}
button{font:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:3px solid #7d506e;outline-offset:5px}
[hidden]{display:none!important}
.paper-grain{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.18;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E")}
.experience{height:100dvh;position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(180deg,#d8a8a1 0%,#f5c6a8 48%,#f8e4bd 76%,#e9d9b7 100%);transition:background 1.2s ease}
body[data-chapter="pin"] .experience{background:linear-gradient(145deg,#fae6d7,#f3c5b0 56%,#e6a897)}
body[data-chapter="ready"] .experience{background:linear-gradient(180deg,#e9ada0,#f9d4ab 70%,#ebc59b)}
body[data-chapter="chapter-letter"] .experience,body[data-chapter="chapter-finale"] .experience{background:linear-gradient(180deg,#736277 0%,#bd8b94 46%,#e0af9f 73%,#ecc7a5 100%);color:#fff8ef}
.world{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.sun{position:absolute;width:min(42vw,430px);aspect-ratio:1;left:58%;top:23%;border-radius:50%;background:radial-gradient(circle,#ffe9ae 0 38%,#f6c790 58%,#f5ba91 71%,transparent 73%);filter:blur(.5px);opacity:.65;transform:translate(-50%,-50%);transition:top 1.1s,opacity 1.1s}
.sky-glow{position:absolute;width:66vw;height:60vw;left:22%;top:23%;border-radius:50%;background:#ffdfbc;filter:blur(120px);opacity:.38}
body[data-chapter="pin"] .sun,body[data-chapter="ready"] .sun{opacity:.2;top:67%}
body[data-chapter="chapter-letter"] .sun,body[data-chapter="chapter-finale"] .sun{top:75%;opacity:.34}
.cloud{position:absolute;width:440px;height:110px;border-radius:50%;background:#fff4da;opacity:.24;filter:blur(24px);animation:cloudDrift 18s ease-in-out infinite alternate}
.cloud-one{top:13%;left:5%}.cloud-two{top:39%;right:2%;width:340px;animation-delay:-5s}
.stars{position:absolute;inset:0;opacity:.18;transition:opacity 1s}
body[data-chapter="chapter-letter"] .stars,body[data-chapter="chapter-finale"] .stars{opacity:.9}
.stars i{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff9dd;box-shadow:0 0 15px 2px #fff0be;animation:twinkle 2.5s ease-in-out infinite alternate}
.stars i:nth-child(1){top:14%;left:15%}.stars i:nth-child(2){top:25%;left:83%;animation-delay:.3s}.stars i:nth-child(3){top:40%;left:21%;animation-delay:1s}.stars i:nth-child(4){top:9%;left:60%;animation-delay:1.7s}.stars i:nth-child(5){top:57%;left:91%;animation-delay:.8s}.stars i:nth-child(6){top:33%;left:70%;animation-delay:1.3s}.stars i:nth-child(7){top:66%;left:13%;animation-delay:2s}.stars i:nth-child(8){top:18%;left:41%;animation-delay:.6s}.stars i:nth-child(9){top:48%;left:53%;animation-delay:2.2s}
.hill{position:absolute;border-radius:50% 50% 0 0;bottom:-19vh;width:130vw;height:34vh;transition:transform 1.2s,background 1.2s}
.hill-back{left:-18vw;background:#a5a78a;transform:rotate(-5deg);opacity:.55}
.hill-front{right:-20vw;bottom:-23vh;height:36vh;background:#687c63;transform:rotate(4deg);opacity:.75}
body[data-chapter="pin"] .hill,body[data-chapter="ready"] .hill{transform:translateY(120%)}
.garden{position:absolute;bottom:-20px;width:clamp(210px,25vw,400px);height:auto;opacity:.9;filter:drop-shadow(0 12px 12px #43574040);transition:opacity .9s,transform 1.2s;animation:flowerSway 5s ease-in-out infinite alternate;transform-origin:bottom center}
.garden-left{left:-20px}.garden-right{right:-30px;transform:scaleX(-1);animation-name:flowerSwayRight;animation-delay:-2.4s}
body[data-chapter="pin"] .garden,body[data-chapter="ready"] .garden{opacity:.1}
.stem{fill:none;stroke:#607956;stroke-width:5;stroke-linecap:round}
.bloom ellipse{fill:#faf0dc;stroke:#ddbbab;stroke-width:1.5}.bloom circle{fill:#e4a65e;stroke:#bd8457;stroke-width:2}
.bloom-b ellipse{fill:#d68e8f}.bloom-c ellipse{fill:#f6d4c1}
.topbar{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:25px clamp(22px,5vw,78px);font-size:11px;letter-spacing:.25em;font-weight:700;color:var(--ink)}
.brand{font-family:var(--sans);font-size:18px;letter-spacing:-.035em;font-weight:800;white-space:nowrap}.brand span{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.055em;color:#a65664}.topbar-right span{padding:0 6px}
body[data-chapter="chapter-letter"] .topbar,body[data-chapter="chapter-finale"] .topbar{color:#fff5e8}
body[data-chapter="chapter-letter"] .brand span,body[data-chapter="chapter-finale"] .brand span{color:#ffe3c5}
.chapter{position:absolute;inset:0;z-index:2;overflow-y:auto;overscroll-behavior:contain;padding:90px clamp(23px,6vw,100px) 80px;scrollbar-width:thin}
.chapter.is-active{animation:chapterReveal .85s cubic-bezier(.16,1,.3,1) both}
.chapter h1,.chapter h2,.chapter h3{font-family:var(--serif);font-weight:400;letter-spacing:-.055em;line-height:1.03;margin:0}
.chapter h1 em,.chapter h2 em{font-weight:400;color:#a35460}.eyebrow{text-transform:uppercase;font-size:11px;font-weight:700;letter-spacing:.24em;margin:0 0 22px}.eyebrow span{color:#b06d74}
.chapter p{line-height:1.7}.chapter h1{font-size:clamp(50px,6.2vw,100px)}.chapter h2{font-size:clamp(48px,5.2vw,86px)}
.chapter-pin{display:flex;align-items:center;justify-content:center}
.pin-layout{width:min(1170px,100%);display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(30px,6vw,100px);align-items:center}
.pin-intro{position:relative}.pin-intro h1{max-width:750px}.intro-copy{font-size:clamp(17px,1.7vw,22px);max-width:420px;margin:24px 0 0}
.bunny-wrap{width:166px;height:166px;position:relative;filter:drop-shadow(0 14px 12px #8c5f5440);animation:bunnyBreath 2.8s ease-in-out infinite;flex:none}
.bunny-sprite{position:absolute;inset:0;background-image:url("assets/bunny-directions.png");background-repeat:no-repeat;background-size:300% 300%;background-position:50% 0}
.bunny-wrap[data-face="happy"] .bunny-sprite{background-image:url("assets/bunny-reactions.png");background-position:0 0}
.bunny-wrap[data-face="heart"] .bunny-sprite{background-image:url("assets/bunny-reactions.png");background-position:50% 0}
.bunny-wrap[data-face="sparkle"] .bunny-sprite{background-image:url("assets/bunny-reactions.png");background-position:100% 0}
.bunny-wrap[data-face="surprised"] .bunny-sprite{background-image:url("assets/bunny-reactions.png");background-position:0 50%}
.bunny-wrap[data-face="sleepy"] .bunny-sprite{background-image:url("assets/bunny-reactions.png");background-position:0 100%}
.bunny-wrap[data-face="shy"] .bunny-sprite{background-image:url("assets/bunny-reactions.png");background-position:100% 50%}
.bunny-pin{margin:20px 0 -7px 20px}.bunny-note{font-family:var(--serif);font-style:italic;color:#86585b;display:inline-block;font-size:18px;margin-left:2px}
.pin-pad{width:min(370px,100%);justify-self:center;background:#fffaf0aa;border:1px solid #fff9eb;border-radius:180px 180px 30px 30px;padding:46px 35px 29px;box-shadow:0 24px 80px #8f5d4433,inset 0 0 0 7px #fff8ef3b;backdrop-filter:blur(16px)}
.pin-dots{display:flex;justify-content:center;gap:15px;margin:2px 0 25px}.pin-dots span{height:14px;width:14px;border:1.5px solid #975e61;border-radius:50%;transition:background .2s,transform .2s}.pin-dots span.filled{background:#975e61;transform:scale(1.1)}
.pin-dots.is-wrong{animation:shake .45s}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;justify-items:center}
.keypad button{width:65px;height:65px;border:0;border-radius:50%;background:transparent;color:var(--ink);font-family:var(--serif);font-size:30px;transition:background .2s,transform .2s}.keypad button:hover{background:#fff6ed}.keypad button:active{transform:scale(.87);background:#eebbb1}.keypad-flower{display:grid;place-items:center;font-size:25px;color:#b68171}.keypad .key-back{font:28px var(--sans)}
.pin-feedback{font-size:12px;min-height:25px;text-align:center;color:#775c59;margin:15px 0 0}.pin-feedback.is-error{color:#a43142}
.bottom-note{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.2em;white-space:nowrap}.bottom-note span{padding:0 10px}
.chapter-ready{display:grid;place-items:center;text-align:center}.ready-content{position:relative;z-index:1;max-width:700px}.bunny-ready{margin:0 auto -18px;z-index:2}.ready-door{height:220px;width:180px;margin:0 auto 24px;border-radius:120px 120px 12px 12px;border:11px solid #fff4e1;box-shadow:0 15px 60px #995d5e40,0 0 0 2px #b87b78;background:linear-gradient(180deg,#f5c8ac,#ffe8be);position:relative;overflow:hidden}.ready-door:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,#8e5f60a1,transparent 60%);transform-origin:left;transition:transform .8s}.ready-door.is-open:after{transform:perspective(300px) rotateY(-80deg)}.door-light{position:absolute;inset:13px;border-radius:100px 100px 0 0;box-shadow:inset 0 0 70px #ffedbf}.door-inner{position:absolute;inset:0;display:grid;place-items:center;color:#a9666a;font-size:55px}
.ready-content h2{font-size:clamp(40px,4.4vw,65px);text-shadow:0 2px #fff4e160}.ready-content p:not(.eyebrow){font-size:18px}.ready-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:23px}
.pill-button{border:1px solid #8b5757;border-radius:100px;padding:15px 25px;min-width:135px;font-size:14px;transition:transform .2s,background .2s}.pill-button:hover{transform:translateY(-3px)}.pill-primary{background:#693f43;color:#fff9f1;box-shadow:0 10px 28px #74444352}.pill-primary span{margin-left:15px}.pill-ghost{background:#ffefdf70;color:#563636}
.film-ui{position:absolute;inset:0;z-index:11;pointer-events:none}.film-progress{height:3px;background:#ffffff4a}.film-progress span{display:block;height:100%;width:0;background:#733d46;transition:width .7s}.film-controls{display:flex;justify-content:flex-start;align-items:center;padding:77px clamp(23px,6vw,100px) 0;font-size:11px;letter-spacing:.2em}.music-toggle{position:absolute;left:clamp(17px,6vw,100px);bottom:calc(18px + env(safe-area-inset-bottom, 0px));min-height:44px;pointer-events:auto;border:1px solid #8d5c5b66;border-radius:30px;background:#fff8efed;color:#5c3e3f;padding:8px 13px;font-size:11px;letter-spacing:0;display:flex;gap:8px;align-items:center;box-shadow:0 8px 24px #4a302e2c;backdrop-filter:blur(12px)}.music-icon{font-size:18px}.music-toggle.is-paused .music-icon{opacity:.4}
body[data-chapter="chapter-letter"] .film-controls,body[data-chapter="chapter-finale"] .film-controls{color:#fff8ed}
.film-chapter{display:flex;flex-direction:column;justify-content:center;align-items:center;padding-top:120px;padding-bottom:85px}
.film-chapter>div:not(.world){width:min(1200px,100%)}.film-chapter p{font-size:clamp(15px,1.4vw,19px)}
.next-button,.replay-button{border:0;border-bottom:1px solid currentColor;background:transparent;color:inherit;padding:8px 0;margin:24px 0 0 auto;display:flex;align-items:center;gap:25px;font-size:13px;letter-spacing:.07em;transition:gap .2s,opacity .2s}.next-button:hover,.replay-button:hover{gap:35px;opacity:.7}.next-button span{font-size:24px}
.birthday-layout{display:grid;grid-template-columns:1fr .85fr;align-items:center;gap:clamp(35px,6vw,100px)}.little-line{font-family:var(--serif);font-style:italic;font-size:22px;color:#8b5458}.birthday-copy h2{font-size:clamp(51px,5vw,86px);margin:17px 0 23px}.birthday-copy>p:last-of-type{max-width:500px}.birthday-age{font-family:var(--serif);font-size:82px;line-height:1;color:#a86a67;margin-top:18px}.birthday-age span{font-size:20px;font-style:italic}
.photo-frame{margin:0;background:#fff7e9;padding:11px 11px 25px;box-shadow:0 24px 70px #724d414a;transform:rotate(2deg);position:relative}.photo-frame:after{content:"";position:absolute;top:-16px;left:44%;width:74px;height:25px;transform:rotate(-3deg);background:#ffe6b98a;backdrop-filter:blur(2px)}.photo-frame img{width:100%;display:block;object-fit:cover}.opening-photo{width:min(380px,100%);justify-self:center;animation:photoFloat 5s ease-in-out infinite alternate}.opening-photo img{height:min(55vh,500px);object-fit:contain;background:#ede1d8}.photo-frame figcaption{font-family:var(--serif);font-style:italic;color:#775b56;font-size:14px;padding:15px 7px 0;display:flex;justify-content:space-between}
.beginning-layout{display:grid;grid-template-columns:.88fr 1.12fr;align-items:center;gap:clamp(35px,8vw,125px)}.beginning-photo{height:min(66vh,580px);position:relative;transform:rotate(-2deg);box-shadow:0 20px 60px #654f414d;border:9px solid #fff8e9;background:#fff8e9}.beginning-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 70%}.photo-sticker{position:absolute;bottom:-15px;right:-25px;background:#ffebd4;padding:11px 17px;font-family:var(--serif);font-style:italic;color:#84585d;transform:rotate(5deg);box-shadow:0 5px 15px #613f3c32}.beginning-copy h2{font-size:clamp(48px,4.7vw,76px)}.beginning-copy>p:not(.eyebrow){max-width:530px}.small-copy{font-family:var(--serif);font-style:italic;color:#8f555b;font-size:21px!important}.drawn-star{font-size:58px;color:#d39c79}
.wishes-layout{display:grid;grid-template-columns:.95fr 1.05fr;grid-template-rows:auto 1fr;gap:12px 6vw;align-items:center}.wishes-heading{align-self:end}.wishes-heading h2{font-size:clamp(45px,4vw,70px)}.wishes-heading>p:last-child{max-width:480px}.wishes-garden{grid-column:1;grid-row:2;display:flex;justify-content:center;align-items:end;height:180px;gap:8px}.wish-flower{width:95px;height:172px;border:0;background:transparent;position:relative;display:flex;align-items:center;flex-direction:column;justify-content:flex-start;color:#a65a65;transition:transform .3s}.wish-flower:nth-child(2){height:153px;color:#f1d09e}.wish-flower:nth-child(3){height:165px;color:#edafa2}.wish-flower:hover,.wish-flower.is-selected{transform:translateY(-10px)}.flower-head{font-family:Georgia,serif;font-size:90px;line-height:1;text-shadow:0 5px #6e53332c;z-index:1;animation:flowerNod 3.5s ease-in-out infinite alternate}.wish-flower:nth-child(2) .flower-head{animation-delay:-1s}.wish-flower:nth-child(3) .flower-head{animation-delay:-2s}.flower-stem{width:4px;height:90px;background:#607652;margin-top:-12px;border-radius:5px}.flower-leaf{position:absolute;width:29px;height:14px;background:#7d986b;top:105px;left:23px;border-radius:100% 0 100% 0;transform:rotate(25deg)}.wish-flower small{position:absolute;bottom:-2px;color:#5f4943;font-family:var(--serif);font-size:13px}.wish-flower.is-selected .flower-head{filter:drop-shadow(0 0 12px #fff1c0)}
.wish-reveal{grid-column:2;grid-row:1 / span 2;background:#fffaf0d9;border:1px solid #fff7ec;padding:15px;display:grid;grid-template-columns:42% 1fr;gap:25px;align-items:center;box-shadow:0 15px 55px #624d4140;transform:rotate(1deg);max-height:440px}.wish-reveal.is-changing{animation:wishSwap .48s}.wish-image-wrap{height:min(47vh,380px);overflow:hidden}.wish-image-wrap img{width:100%;height:100%;object-fit:cover}.wish-text{padding-right:10px}.wish-text span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#936566}.wish-text h3{font-size:clamp(30px,2.5vw,46px);margin:15px 0}.wish-text p{font-size:16px}
.you-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,8vw,130px);align-items:center}.you-photos{height:min(64vh,550px);position:relative}.you-photo{position:absolute;margin:0;background:#fff8ec;padding:8px 8px 25px;box-shadow:0 18px 48px #58453955}.you-photo img{display:block;width:100%;height:100%;object-fit:cover}.photo-a{width:50%;height:70%;left:3%;top:2%;transform:rotate(-9deg)}.photo-b{width:53%;height:85%;right:3%;bottom:0;transform:rotate(8deg)}.you-copy h2{margin-bottom:25px}.you-copy p{max-width:530px}.handwritten{font-family:var(--serif);font-style:italic;color:#9d5f69;font-size:32px}
.us-layout{display:grid;grid-template-columns:1fr .86fr;gap:clamp(35px,7vw,110px);align-items:center}.us-copy p{max-width:520px}.us-photo{width:min(400px,100%);justify-self:center;transform:rotate(-3deg)}.us-photo img{height:min(54vh,490px);object-fit:cover;object-position:center 65%}
.chapter-letter h2 em,.chapter-finale h2 em{color:#ffe3c5}.letter-layout{display:grid;grid-template-columns:.7fr 1fr;gap:clamp(20px,7vw,100px);align-items:center}.letter-intro p{max-width:320px}.letter-stage{position:relative;min-height:400px;display:grid;place-items:center}.envelope{position:relative;width:min(350px,70vw);height:240px;border:0;background:none;filter:drop-shadow(0 25px 30px #38233955);transition:transform .45s}.envelope:hover{transform:translateY(-9px)}.envelope-back,.envelope-front,.envelope-flap,.envelope-seal{position:absolute;display:block}.envelope-back{inset:0;background:#f8e3cb;border-radius:8px}.envelope-front{inset:0;background:linear-gradient(147deg,transparent 49.5%,#e9c5ae 50%) left/50% 100% no-repeat,linear-gradient(213deg,transparent 49.5%,#e9c5ae 50%) right/50% 100% no-repeat,linear-gradient(32deg,transparent 49.5%,#f2d6bc 50%) bottom/100% 60% no-repeat;border:2px solid #e4bda5;border-radius:6px}.envelope-flap{inset:0;clip-path:polygon(0 0,100% 0,50% 64%);background:#ffe9d1;transform-origin:top center;transition:transform .8s;z-index:2}.envelope-seal{z-index:3;left:50%;top:55%;transform:translate(-50%,-50%);width:49px;height:49px;border-radius:50%;background:#aa6865;color:#fff1de;display:grid;place-items:center;font:italic 26px var(--serif);box-shadow:0 3px 9px #663e3a55}.letter-stage.opened .envelope{opacity:0;transform:translateY(40px) scale(.8);pointer-events:none}.letter-stage.opened .envelope-flap{transform:rotateX(155deg)}.letter-paper{position:relative;background:#fffaf0;color:#4a3732;width:min(650px,100%);padding:37px clamp(25px,3vw,55px);box-shadow:0 25px 70px #36293e5c;transform:rotate(-1deg);animation:letterRise .75s both}.letter-paper:before{content:"";position:absolute;top:-10px;left:42%;width:90px;height:26px;background:#f7ddbba1;transform:rotate(3deg)}.letter-dateline{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#9a7770}.letter-paper h3{font-size:36px;margin:18px 0}.letter-paper p{font:17px/1.62 var(--serif);margin:0 0 14px}.letter-signature{display:block;margin-top:10px;font:italic clamp(21px,2vw,27px) var(--serif);line-height:1.3;color:#a85f6b}
.chapter-finale{padding-bottom:105px}.finale-layout{display:grid;grid-template-columns:1fr .84fr;gap:clamp(30px,6vw,95px);align-items:center}.finale-copy h2{font-size:clamp(52px,5.3vw,90px)}.finale-copy p{max-width:490px}.finale-signature{font:italic 26px var(--serif);color:#ffe6cf}.video-card{background:#fff8ed;padding:11px 11px 15px;box-shadow:0 25px 65px #392e4a60;color:#745651;transform:rotate(2deg);max-width:410px;width:100%;justify-self:center}.video-wrap{position:relative;height:min(55vh,470px);background:#473c47;overflow:hidden}.video-wrap video{width:100%;height:100%;object-fit:cover}.video-play{position:absolute;inset:0;border:0;background:#34263260;color:#fff9ed;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;transition:background .2s}.video-play:hover{background:#34263238}.video-play span{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;border:2px solid #fff5df;background:#fff6e02b;font-size:28px;padding-left:5px}.video-play small{font-size:13px;letter-spacing:.05em}.video-card p{font:italic 14px var(--serif);margin:10px 4px 0}.video-fallback{display:inline-block;color:#6e4b58;margin:7px 4px}.replay-button{position:absolute;bottom:27px;right:clamp(23px,6vw,100px)}
.scene-transition{position:fixed;inset:0;z-index:80;pointer-events:none;overflow:hidden;clip-path:inset(0 0 0 100%);background:linear-gradient(112deg,#694958 0%,#a76b77 48%,#dfa384 76%,#f8d1a4 100%);transition:clip-path .58s cubic-bezier(.76,0,.24,1)}
.scene-transition.is-covering{clip-path:inset(0 0 0 0)}
.scene-transition.is-revealing{clip-path:inset(0 0 0 100%);transition-duration:.72s}
.transition-bloom{position:absolute;width:clamp(230px,43vw,560px);aspect-ratio:1;right:-9%;bottom:-30%;opacity:.24;transform:rotate(-18deg)}
.transition-bloom i{position:absolute;left:37%;top:3%;width:26%;height:51%;border-radius:50% 50% 46% 46%;background:#442d43;transform-origin:50% 94%}
.transition-bloom i:nth-child(2){transform:rotate(72deg)}.transition-bloom i:nth-child(3){transform:rotate(144deg)}.transition-bloom i:nth-child(4){transform:rotate(216deg)}.transition-bloom i:nth-child(5){transform:rotate(288deg)}
.transition-bloom b{position:absolute;left:41%;top:39%;width:18%;aspect-ratio:1;border-radius:50%;background:#442d43}
.transition-light{position:absolute;inset:-25% auto -25% 0;width:35%;background:linear-gradient(90deg,transparent,#ffe7bc80 45%,#fff4d5ba 55%,transparent);filter:blur(26px);transform:translateX(-140%) rotate(12deg)}
.scene-transition.is-covering .transition-light{animation:lightSweep 1.12s ease-out both}
@keyframes chapterReveal{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:none}}
@keyframes cloudDrift{to{transform:translateX(50px)}}
@keyframes twinkle{to{opacity:.24;transform:scale(.45)}}
@keyframes flowerSway{to{transform:rotate(3deg)}}
@keyframes flowerSwayRight{to{transform:scaleX(-1) rotate(3deg)}}
@keyframes bunnyBreath{to{transform:translateY(-6px)}}
@keyframes photoFloat{to{transform:rotate(-1deg) translateY(-9px)}}
@keyframes flowerNod{to{transform:rotate(9deg)}}
@keyframes wishSwap{50%{opacity:.35;transform:translateY(7px) rotate(1deg)}}
@keyframes letterRise{from{opacity:0;transform:translateY(55px) rotate(-3deg)}to{opacity:1;transform:rotate(-1deg)}}
@keyframes lightSweep{to{transform:translateX(390%) rotate(12deg)}}
/* Each chapter has its own restrained entrance, like a sequence of film shots. */
.film-chapter.is-active .eyebrow{animation:sceneCaption .58s .12s both}
.film-chapter.is-active h2{animation:sceneTitle .78s .24s cubic-bezier(.2,.8,.2,1) both}
.film-chapter.is-active :is(.birthday-copy,.beginning-copy,.wishes-heading,.you-copy,.us-copy,.letter-intro,.finale-copy)>p:not(.eyebrow){animation:sceneCaption .72s .46s both}
.film-chapter.is-active :is(.beginning-copy,.you-copy,.us-copy)>p:nth-of-type(3){animation-delay:.65s}
.film-chapter.is-active .next-button{animation:sceneCaption .62s .8s both}
.chapter-birthday.is-active .little-line{animation:sceneCaption .55s .16s both}
.chapter-birthday.is-active .birthday-age{animation:sceneCaption .72s .67s both}
.chapter-birthday.is-active .opening-photo img{animation:photoDevelop 1.1s .48s both}
.chapter-beginning.is-active .beginning-photo{animation:photoLeft 1s .36s cubic-bezier(.18,.9,.2,1) both}
.chapter-wishes.is-active .wishes-garden{animation:sceneCaption .85s .5s both}
.chapter-wishes.is-active .wish-reveal{animation:photoRight .94s .72s cubic-bezier(.18,.9,.2,1) both}
.chapter-wishes.is-active .wish-reveal.is-changing{animation:wishSwap .48s both}
.chapter-you.is-active .photo-a{animation:photoAIn .85s .44s cubic-bezier(.18,.9,.2,1) both}
.chapter-you.is-active .photo-b{animation:photoBIn .9s .72s cubic-bezier(.18,.9,.2,1) both}
.chapter-us.is-active .us-photo{animation:photoLeft .98s .52s cubic-bezier(.18,.9,.2,1) both}
.chapter-finale.is-active .video-card{animation:photoRight 1s .48s cubic-bezier(.18,.9,.2,1) both}
.chapter-finale.is-active .finale-signature{animation:sceneCaption .7s .8s both}
.letter-stage.opened .letter-paper p{animation:letterLine .65s both}
.letter-stage.opened .letter-paper p:nth-of-type(1){animation-delay:.93s}
.letter-stage.opened .letter-paper p:nth-of-type(2){animation-delay:1.23s}
.letter-stage.opened .letter-paper p:nth-of-type(3){animation-delay:1.53s}
.letter-stage.opened .letter-paper p:nth-of-type(4){animation-delay:1.83s}
.letter-stage.opened .letter-signature{animation:letterLine .8s 2.2s both}
.letter-paper h3.is-typing:after{content:"";display:inline-block;width:1px;height:.85em;margin-left:3px;background:currentColor;vertical-align:-.05em;animation:cursorBlink .55s step-end infinite}
@keyframes sceneCaption{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes sceneTitle{from{opacity:0;clip-path:inset(0 0 90% 0);transform:translateY(15px)}to{opacity:1;clip-path:inset(0);transform:none}}
@keyframes photoDevelop{from{opacity:0;clip-path:inset(0 100% 0 0);transform:scale(1.045)}to{opacity:1;clip-path:inset(0);transform:none}}
@keyframes photoLeft{from{opacity:0;transform:translateX(-44px) rotate(-7deg) scale(.95)}to{opacity:1;transform:rotate(-2deg)}}
@keyframes photoRight{from{opacity:0;transform:translateX(44px) rotate(5deg) scale(.95)}to{opacity:1;transform:rotate(1deg)}}
@keyframes photoAIn{from{opacity:0;transform:translate(-45px,22px) rotate(-19deg) scale(.9)}to{opacity:1;transform:rotate(-9deg)}}
@keyframes photoBIn{from{opacity:0;transform:translate(48px,32px) rotate(18deg) scale(.9)}to{opacity:1;transform:rotate(8deg)}}
@keyframes letterLine{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes cursorBlink{50%{opacity:0}}
@keyframes shake{25%{transform:translateX(-9px)}50%{transform:translateX(8px)}75%{transform:translateX(-5px)}}
@media(max-width:850px){
 .topbar{padding:18px 22px}.brand{font-size:17px}.chapter{padding:82px 23px 72px}.film-controls{padding:62px 23px 0}.chapter-pin,.chapter-ready{display:block}.pin-layout,.ready-content{margin:0 auto}
 .pin-layout,.birthday-layout,.beginning-layout,.you-layout,.us-layout,.letter-layout,.finale-layout{grid-template-columns:1fr;gap:20px}
 .pin-layout{max-width:560px;gap:4px;text-align:center}.pin-intro h1{font-size:clamp(43px,9vw,70px)}.pin-intro .eyebrow{margin-bottom:10px}.intro-copy{margin:10px auto 0;font-size:16px}.bunny-pin{width:105px;height:105px;margin:0 auto -12px}.bunny-note{font-size:15px;margin:0 0 5px}.pin-pad{padding:21px 20px 15px;width:min(320px,100%);border-radius:135px 135px 23px 23px}.pin-dots{margin:2px 0 10px}.keypad button{width:54px;height:54px;font-size:25px}.pin-feedback{margin:8px 0 0}.bottom-note{display:none}
 .garden{width:220px;opacity:.6}.garden-left{left:-95px}.garden-right{right:-100px}.sun{width:360px;left:55%;top:38%}
 .film-chapter{justify-content:flex-start;padding-top:130px}.film-chapter>div:not(.world){max-width:570px}.chapter h2{font-size:clamp(43px,8vw,65px)}.film-chapter p{font-size:15px}
 .birthday-layout{text-align:center}.birthday-copy .eyebrow{margin-bottom:9px}.birthday-copy h2{font-size:clamp(45px,8vw,64px);margin:7px 0 10px}.birthday-copy>p:last-of-type{margin:0 auto}.birthday-age{font-size:42px;margin-top:2px}.birthday-age span{font-size:14px}.opening-photo{width:min(240px,66vw)}.opening-photo img{height:min(30vh,270px)}
 .beginning-layout{display:flex;flex-direction:column-reverse;text-align:center}.beginning-copy .eyebrow{margin-bottom:10px}.beginning-copy h2{font-size:clamp(42px,7.5vw,62px)}.beginning-copy p{margin:10px auto}.drawn-star{display:none}.beginning-photo{width:min(280px,70vw);height:min(33vh,290px)}.photo-sticker{font-size:11px}
 .wishes-layout{display:flex;flex-direction:column;gap:8px;text-align:center}.wishes-heading .eyebrow{margin-bottom:10px}.wishes-heading h2{font-size:clamp(40px,7.2vw,58px)}.wishes-heading>p:last-child{margin:8px auto}.wishes-garden{height:112px;gap:8px}.wish-flower{width:64px;height:105px}.wish-flower:nth-child(2),.wish-flower:nth-child(3){height:105px}.flower-head{font-size:62px}.flower-stem{height:50px}.flower-leaf{top:76px;left:14px;width:22px}.wish-reveal{width:100%;max-height:none;grid-template-columns:36% 1fr;gap:12px;padding:9px;text-align:left}.wish-image-wrap{height:min(24vh,190px)}.wish-text h3{font-size:25px;margin:7px 0}.wish-text p{font-size:13px}
 .you-layout{text-align:center}.you-photos{order:2;width:min(400px,80vw);height:min(35vh,290px);justify-self:center}.you-copy{order:1}.you-copy .eyebrow{margin-bottom:10px}.you-copy h2{margin-bottom:10px}.you-copy p{margin:7px auto}.handwritten{font-size:23px}.photo-a{width:45%;height:86%}.photo-b{width:45%;height:94%}
 .us-layout{text-align:center}.us-copy .eyebrow{margin-bottom:10px}.us-copy p{margin:8px auto}.us-photo{width:min(240px,68vw)}.us-photo img{height:min(33vh,280px)}
 .letter-layout{text-align:center}.letter-intro .eyebrow{margin-bottom:10px}.letter-intro p{margin:8px auto}.letter-stage{min-height:270px}.envelope{height:185px;width:270px}.letter-paper{text-align:left;padding:25px 22px}.letter-paper p{font-size:15px;line-height:1.5}.letter-paper h3{font-size:30px;margin:9px 0}.chapter-letter{justify-content:flex-start}.chapter-letter .letter-layout{margin-top:0}
 .finale-layout{text-align:center}.finale-copy h2{font-size:clamp(46px,8vw,68px)}.finale-copy p{margin:10px auto}.finale-signature{font-size:21px}.video-card{width:min(270px,72vw)}.video-wrap{height:min(37vh,300px)}.video-card p{font-size:12px}.replay-button{position:static}
 .next-button{position:relative;align-self:flex-end;margin-top:15px}.chapter-ready .ready-door{height:175px;width:145px;margin-bottom:22px}.bunny-ready{width:105px;height:105px;margin-bottom:-14px}.ready-content h2{font-size:clamp(37px,6.5vw,52px)}
}
@media(max-height:760px){.chapter-pin,.chapter-ready{display:block}.pin-layout,.ready-content{margin:0 auto}.chapter-ready .eyebrow{margin-bottom:8px}.chapter-ready .ready-door{height:150px;width:125px;margin-bottom:18px;border-width:8px}.chapter-ready .bunny-ready{width:88px;height:88px;margin-bottom:-12px}.chapter-ready .ready-content h2{font-size:clamp(34px,4.5vw,49px)}.chapter-ready .ready-content p:not(.eyebrow){font-size:15px;margin:9px 0}.chapter-ready .ready-actions{margin-top:12px}.chapter-ready .pill-button{padding:12px 18px}}
@media(max-width:850px) and (min-height:800px){.chapter-ready{display:grid}}
@media(max-width:520px){.topbar-right{display:none}.brand{font-size:16px}}
@media(max-width:520px) and (max-height:730px){.film-chapter{padding-top:104px}.film-controls{padding-top:55px}.birthday-copy h2{font-size:49px}.opening-photo img{height:210px}.beginning-photo{height:210px}.wishes-heading h2{font-size:38px}.wishes-garden{height:90px}.wish-flower{transform:scale(.83);transform-origin:bottom}.wish-flower:hover,.wish-flower.is-selected{transform:scale(.83) translateY(-8px)}.wish-reveal .wish-image-wrap{height:155px}.you-photos{height:200px}.us-photo img{height:210px}.letter-paper p{font-size:14px}.letter-paper{padding:19px}.video-wrap{height:220px}.pin-intro h1{font-size:42px}.pin-pad{padding-top:15px}.keypad button{height:48px;width:48px}}
@media(max-width:380px){.brand{font-size:15px}.chapter{padding-left:17px;padding-right:17px}.film-controls{padding-left:17px;padding-right:17px}.wishes-heading h2{font-size:36px}.wish-text h3{font-size:22px}}
@supports(padding:env(safe-area-inset-top)){
 .topbar{padding-top:calc(25px + env(safe-area-inset-top))}
 .chapter-pin,.chapter-ready{padding-top:calc(90px + env(safe-area-inset-top))}
 .film-chapter{padding-top:calc(120px + env(safe-area-inset-top))}
 .film-controls{padding-top:calc(77px + env(safe-area-inset-top))}
}
@media(max-width:850px){
 .topbar{padding-top:calc(18px + env(safe-area-inset-top))}
 .chapter-pin,.chapter-ready{padding-top:calc(82px + env(safe-area-inset-top))}
 .film-chapter{padding-top:calc(130px + env(safe-area-inset-top))}
 .film-controls{padding-top:calc(62px + env(safe-area-inset-top))}
}
@media(max-width:520px) and (max-height:730px){.film-chapter{padding-top:calc(104px + env(safe-area-inset-top))}.film-controls{padding-top:calc(55px + env(safe-area-inset-top))}}
@media(max-width:850px){.film-chapter{padding-bottom:calc(115px + env(safe-area-inset-bottom, 0px))}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}