:root{color-scheme:light;--ink:#50453e;--rose:#9b5867;--rose-deep:#75444f;--gold:#aa8a50;--paper:#fffaf0;--sage:#849978}
*{box-sizing:border-box}
html{overflow-x:hidden;background:#dce5cf}
body{margin:0;min-height:100svh;overflow-x:hidden;padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));background:#dce5cf;color:var(--ink);font-family:"Cormorant Garamond",Georgia,serif}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible{outline:3px solid #784957;outline-offset:5px}
.birthday{position:relative;isolation:isolate;width:min(100%,1500px);height:calc(100svh - max(14px,env(safe-area-inset-top)));min-height:680px;margin:auto;overflow:hidden;border:1px solid #a9b392;border-radius:22px;background:#dfe8d4;box-shadow:0 18px 60px #4b5e3d2b}
.birthday:after{content:"";position:absolute;inset:8px;z-index:20;pointer-events:none;border:1px solid #f8f0d0a8;border-radius:16px}
.garden-scene{position:absolute;inset:0 0 0 50%;z-index:-2;width:1200px;height:100%;transform:translateX(-50%);overflow:visible}
.garden-scene:focus{outline:0}
.garden-sign{position:absolute;top:6%;left:6%;z-index:4;width:min(47%,610px);padding:27px 34px 25px;background:#fffaf0eb;border:1px solid #b9aa83;border-radius:8px;box-shadow:0 16px 34px #59604725,inset 0 0 0 5px #fffaf0,inset 0 0 0 6px #d4c5a6;text-align:left;backdrop-filter:blur(2px)}
.identity{display:flex;align-items:baseline;gap:7px;margin:0 0 7px;color:#68755f;font:600 10px/1.4 "DM Sans",sans-serif;letter-spacing:.17em;text-transform:uppercase}.identity span{color:#95636c;font:italic 15px/1 "Cormorant Garamond",Georgia,serif;letter-spacing:0;text-transform:none}
h1{margin:0 0 16px;font-size:clamp(50px,5.4vw,78px);font-weight:500;letter-spacing:-.05em;line-height:.82}h1 em{display:inline-block;padding-top:8px;color:var(--rose);font-size:1.24em;font-weight:500;line-height:1}
.greeting-copy{max-width:540px;font-size:21px;font-weight:500;line-height:1.35;text-wrap:pretty}.greeting-copy p{margin:0 0 10px}.greeting-copy em{color:var(--rose-deep);white-space:nowrap}
.date{display:flex;align-items:center;gap:11px;margin-top:15px;color:#806c47;font:9px "DM Sans",sans-serif;letter-spacing:.18em}.date span{width:30px;height:1px;background:#b89c68}
.surprise-station{position:absolute;right:7%;bottom:10%;z-index:6;width:265px;text-align:center}.surprise-station p{margin:18px -20px 0;color:#754d56;font-size:18px;font-style:italic;text-shadow:0 1px #fff8e6}.envelope{position:relative;display:block;width:100%;height:158px;padding:0;border:1px solid #b77e89;border-radius:4px;background:#dba4ae;box-shadow:0 16px 27px #59473640;transition:transform .25s,box-shadow .25s}.envelope:before,.envelope:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}.envelope:before{z-index:1;background:#e0afb7;clip-path:polygon(0 0,51% 57%,0 100%,100% 100%,50% 54%,100% 0,100% 100%,0 100%)}.envelope:after{z-index:2;background:#e9bec3;clip-path:polygon(0 100%,50% 47%,100% 100%);border-bottom:2px solid #f4d4d5}.envelope-flap{position:absolute;inset:0;z-index:3;background:#efcbd0;clip-path:polygon(0 0,100% 0,50% 63%);filter:drop-shadow(0 2px 1px #84535e48)}.wax-seal{position:absolute;top:48%;left:50%;z-index:4;display:grid;place-items:center;width:42px;height:42px;transform:translate(-50%,-50%);border:2px solid #d49ba4;border-radius:50%;background:#a96573;box-shadow:0 2px 4px #7144474d,inset 0 0 0 2px #945766;color:#f1d2cf;font:600 19px Georgia}.envelope-inscription{position:absolute;right:0;bottom:14px;left:0;z-index:4;color:#714954;font-size:24px;font-style:italic}.envelope:hover{transform:translateY(-7px);box-shadow:0 21px 34px #5947364a}.envelope:active{transform:translateY(-2px) scale(.98)}
.read-letter{position:absolute;left:42%;bottom:7%;z-index:6;width:200px;min-height:102px;padding:20px 22px;border:1px solid #b8a275;border-radius:3px;background:#fff9eb;box-shadow:0 12px 22px #5c503529;transform:translateX(-50%);transition:transform .22s,box-shadow .22s}.read-letter:before{content:"";position:absolute;inset:7px;border:1px solid #d5c5a1;pointer-events:none}.read-letter span{position:relative;z-index:1;display:block;color:#78545a;font-size:18px;font-style:italic}.read-letter i{position:relative;z-index:1;display:block;margin-top:7px;color:var(--gold);font-style:normal}.read-letter:hover{transform:translateX(-50%) translateY(-5px);box-shadow:0 17px 29px #5c503533}.read-letter:active{transform:translateX(-50%) translateY(-1px) scale(.98)}
.garden-hotspot{position:absolute;z-index:8;border:0;background:transparent;padding:0}.garden-hotspot>span{position:absolute;left:50%;bottom:calc(100% + 7px);width:max-content;max-width:180px;padding:5px 8px;transform:translateX(-50%) translateY(4px);border:1px solid #bda981;border-radius:4px;background:#fff9ebef;color:#74515a;font:italic 13px "Cormorant Garamond",Georgia,serif;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}.garden-hotspot:hover>span,.garden-hotspot:focus-visible>span,.garden-hotspot.is-awake>span{opacity:1;transform:translateX(-50%)}
.garden-matcha{right:18%;bottom:16%;width:112px;height:95px;border-radius:50%}.garden-matcha.is-awake{animation:matcha-bob .55s ease}@keyframes matcha-bob{50%{transform:translateY(-8px) scale(1.04)}}
.garden-bunny{left:10%;bottom:7%;width:105px;height:120px;border-radius:50%}.garden-bunny.is-awake{animation:bunny-hop .65s ease}@keyframes bunny-hop{40%{transform:translateY(-18px)}70%{transform:translateY(-6px)}}
.garden-lemon{right:5%;top:27%;width:86px;height:104px;border-radius:50%}.garden-lemon img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 4px #6b68333a)}.garden-lemon.is-awake img{animation:lemon-wiggle .55s ease}@keyframes lemon-wiggle{25%{transform:rotate(-11deg)}50%{transform:rotate(10deg)}75%{transform:rotate(-5deg)}}
.garden-toast{position:absolute;left:50%;bottom:2.5%;z-index:10;max-width:min(85%,420px);margin:0;padding:7px 13px;transform:translateX(-50%) translateY(8px);border-radius:4px;background:#fff9ebe8;color:#714c54;font:italic 15px "Cormorant Garamond",Georgia,serif;opacity:0;transition:opacity .2s,transform .2s;text-align:center}.garden-toast.is-visible{opacity:1;transform:translateX(-50%)}
.letter-dialog{width:min(590px,calc(100% - 24px));max-height:90svh;padding:54px 32px 116px;overflow:auto;background:linear-gradient(#fffaf0,#fff8eb);border:1px solid #bda16e;border-radius:10px 10px 26px 26px;color:var(--ink);box-shadow:0 22px 55px #5f5c4926}.letter-dialog:before{content:"";position:absolute;inset:8px 8px 86px;pointer-events:none;border:1px solid #d3c7a7;border-radius:4px}.letter-dialog:after{content:"";position:absolute;right:0;bottom:0;left:0;z-index:0;height:104px;pointer-events:none;background:linear-gradient(150deg,#eac0c5,#dca7b1);clip-path:polygon(0 25%,50% 76%,100% 25%,100% 100%,0 100%);border-top:1px solid #c9959e}.letter-dialog>*{position:relative;z-index:1}.letter-dialog::backdrop{background:#dfe6d3d9;backdrop-filter:blur(2px)}.letter-dialog[open]{animation:unfold .38s cubic-bezier(.2,.8,.2,1)}@keyframes unfold{from{opacity:0;transform:translateY(70px) scaleY(.86);transform-origin:center bottom}to{opacity:1;transform:none}}.close{position:absolute;right:9px;top:7px;width:44px;height:44px;background:none;border:0;font-size:30px}.letter-label{color:#846a4d;font:10px "DM Sans",sans-serif;letter-spacing:.16em}.letter-dialog h2{margin:19px 0;color:var(--rose);font-size:36px;font-weight:500}#letter-copy{font-size:21px;line-height:1.45}#letter-copy p{margin:0 0 19px}.letter-ending{margin-bottom:0;font-size:20px;font-style:italic}.letter-ending span{padding-left:8px;color:var(--gold)}
@media(min-width:900px){.garden-scene{width:100%;left:0;transform:none}.birthday{min-height:min(900px,calc(100svh - 14px))}}
@media(max-width:899px){
 .birthday{min-height:760px;border-radius:18px}
 .garden-scene{width:1200px}.garden-scene .lemon-tree{transform:translateX(-410px)}.garden-scene .tea-tree{transform:translate(465px,365px)}.garden-scene .birthday-cake{transform:translate(500px,400px)}.garden-scene .tea-table{transform:translateX(-255px)}.garden-scene .bunny-one{transform:translate(470px,690px)}.garden-scene .bunny-two{transform:translate(700px,700px) scale(.72)}.garden-scene .bunny-three{transform:translate(735px,520px) scale(.5)}.garden-scene .bunny-four{transform:translate(440px,555px) scale(.58)}.garden-scene .bunny-five{transform:translate(650px,445px) scale(.42)}.garden-scene .flower-bed-left{transform:translateX(350px)}.garden-scene .flower-bed-right{transform:translateX(-350px)}
 .garden-sign{top:2.5%;left:4%;width:92%;padding:22px 24px 20px;text-align:center}.identity,.date{justify-content:center}h1{font-size:clamp(42px,12vw,55px);line-height:.88}.greeting-copy{font-size:18px;line-height:1.3}.greeting-copy p:last-child{margin-bottom:0}
 .surprise-station{right:7%;bottom:12%;width:205px}.surprise-station p{margin-top:14px;font-size:15px}.envelope{height:122px}.wax-seal{width:35px;height:35px;font-size:16px}.envelope-inscription{bottom:10px;font-size:20px}
 .read-letter{left:27%;bottom:3.5%;width:158px;min-height:80px;padding:15px}.read-letter span{font-size:15px}.read-letter i{margin-top:3px}
 .garden-matcha{right:17%;bottom:13%;width:98px;height:82px}.garden-bunny{left:8%;bottom:7%;width:85px;height:105px}.garden-lemon{right:8%;top:50%;width:70px;height:84px}.garden-toast{bottom:1.5%;font-size:13px}
}
@media(max-width:430px){
 .birthday{height:calc(100svh - 14px);min-height:720px}.garden-sign{padding:19px 20px 17px}.identity{font-size:8px}.identity span{font-size:13px}h1{margin-bottom:12px;font-size:41px}.greeting-copy{font-size:16px}.date{margin-top:11px}
 .surprise-station{right:5%;bottom:14%;width:190px}.envelope{height:112px}.surprise-station p{margin-right:-8px;margin-left:-8px}.read-letter{left:25%;bottom:3%;width:145px;min-height:74px}.garden-lemon{right:5%;top:48%;width:64px}.garden-matcha{right:14%;bottom:14%;width:88px}.garden-bunny{left:5%;bottom:9%}
}
@media(max-width:600px){
 .letter-dialog{width:calc(100% - 20px);max-height:calc(100svh - 20px);padding:48px 24px 32px;border-radius:10px}
 .letter-dialog:before{inset:8px}
 .letter-dialog:after{display:none}
 .letter-dialog h2{font-size:34px}
 #letter-copy{font-size:19px;line-height:1.42}
}
@media(max-height:740px) and (max-width:899px){.garden-sign{top:2%;padding-top:14px;padding-bottom:13px}.identity{margin-bottom:3px}h1{font-size:37px;margin-bottom:8px}.greeting-copy{font-size:15px}.greeting-copy p{margin-bottom:6px}.date{margin-top:7px}.surprise-station{bottom:12%;width:170px}.envelope{height:100px}.read-letter{width:130px;min-height:68px}.garden-lemon{top:46%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}