@font-face{font-family:Letter;src:url('./assets/NotoSans-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Letter;src:url('./assets/NotoSans-SemiBold.ttf') format('truetype');font-style:normal;font-weight:600;font-display:swap}
:root{--paper:#fff;--rose:#e9a7b6;--pink:#fbeef2;--ink:#483b40;--muted:#8a7b81;--line:#f0e8ec;--sage:#d9e7dc;--font:Letter,'Trebuchet MS',sans-serif}
*{box-sizing:border-box}body{margin:0;min-height:100svh;background:#faf8f9;color:var(--ink);font-family:var(--font);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px 18px 18px;-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible{outline:3px solid #bf657f;outline-offset:5px}button:disabled{cursor:default}[hidden]{display:none!important}svg{display:block;width:100%;height:100%}
.letter{position:relative;width:100%;max-width:430px;height:790px;max-height:calc(100svh - 88px);min-height:570px;background:var(--paper);border:1px solid var(--line);border-radius:28px;overflow:hidden;box-shadow:0 14px 65px #6d3b5210;display:flex;flex-direction:column}
.header{height:76px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 28px}.brand{display:flex;align-items:center;gap:8px;border:0;background:none;padding:5px 0;font-size:15px;font-weight:600;letter-spacing:-.4px}.brand span{font-size:28px;line-height:1;color:#c87891;font-weight:400}.header-note{font-size:10px;color:var(--muted);letter-spacing:.2px}.icon-button{border:0;background:#faf7f8;border-radius:50%;width:32px;height:32px;padding:9px}.icon-button svg,.round-button svg,.primary svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.screen{flex:1;min-height:0;display:flex;flex-direction:column}.welcome-content{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2px 25px 18px}.art{width:100%;flex-shrink:1}.welcome-art{max-width:290px;height:245px;min-height:135px;margin-bottom:0}.handnote{font-family:Georgia,'Times New Roman',serif;font-style:italic;color:#ae7084;font-size:15px;margin:16px 0 14px}.welcome h1{font-size:36px;line-height:1.24;font-weight:600;letter-spacing:-1.4px;margin:0 0 20px}.title-heart{font-size:29px;font-weight:400;color:#cb8198;white-space:nowrap}.description{font-size:14px;line-height:1.85;color:var(--muted);margin:0}.welcome-bottom{flex-shrink:0;text-align:center;padding:0 28px 26px}.primary{width:100%;border:1px solid #e3a1b2;border-radius:16px;background:var(--pink);height:57px;display:flex;align-items:center;justify-content:center;gap:16px;font-size:14px;font-weight:600;transition:background .2s,transform .2s}.primary:hover{background:#f8e1e9}.primary:active{transform:scale(.98)}.primary svg{width:21px;height:21px}.quiet{font-size:10px;color:#a6979e;margin:15px 0 0;line-height:1.5}.outside-note{font-size:11px;color:#a6959e;margin:18px 0 0}.outside-note span{color:#c9899e;margin-left:5px}
.progress{padding:0 28px;display:flex;gap:6px;height:22px;flex-shrink:0}.progress button{flex:1;min-width:0;height:20px;padding:7px 0;border:0;background:none}.progress span{display:block;height:4px;border-radius:3px;background:var(--line);transition:background .2s}.progress .seen span{background:#edc8d3}.progress .current span{background:#c98098}.story-stage{position:relative;flex:1;min-height:0;touch-action:pan-y}.story-content{height:100%;padding:16px 28px 14px;display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center}.story-kicker{color:#9e8b93;font-size:10px;letter-spacing:.3px;margin:0 0 13px}.story-art{max-width:320px;height:290px;min-height:140px}.story-copy{flex-shrink:0}.story-copy .handnote{margin:15px 0 13px}h2{font-size:30px;line-height:1.32;letter-spacing:-1px;font-weight:600;margin:0 0 17px}.tap-zone{position:absolute;top:0;bottom:0;width:33%;border:0;background:transparent}.tap-left{left:0}.tap-right{right:0}.story-footer{padding:7px 28px 24px;text-align:center;flex-shrink:0}.navigation{display:flex;align-items:center;justify-content:space-between}.round-button{height:44px;width:44px;border-radius:50%;border:1px solid var(--line);background:white;padding:13px}.round-button.next{background:var(--pink);border-color:#efcbd6}.round-button:hover{border-color:#d99aaf}.round-button:disabled{opacity:.3}#counter{font-size:11px;color:#9b8890}.story-footer .quiet{margin-top:13px}.ending-content{flex:1;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 28px 12px;min-height:0}.ending-art{max-width:260px;height:220px;min-height:115px}.ending h2{font-size:31px}.signature{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:17px;margin:25px 0 10px;color:#ab7084}.signature span{margin-left:8px}.text-button{margin-top:17px;background:none;border:0;font-size:10px;color:var(--muted);text-decoration:underline;text-underline-offset:4px}.no-script{position:absolute;bottom:110px;padding:20px;background:white;font-size:14px}
.reveal{animation:reveal .32s ease-out}@keyframes reveal{from{opacity:.35;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:520px){body{padding:0;background:white;justify-content:flex-start}.letter{max-width:none;min-height:100svh;max-height:none;height:100svh;border:0;border-radius:0;box-shadow:none;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}.outside-note{display:none}.header{height:70px}.welcome-art{height:260px;max-width:305px}.welcome-bottom{padding-bottom:27px}.story-art{height:310px}}
@media(max-height:730px){.header{height:61px}.welcome-art{height:180px}.welcome h1{font-size:31px;margin-bottom:13px}.handnote{margin:9px 0 11px}.welcome-content{padding-bottom:13px}.welcome-bottom{padding-bottom:18px}.story-art{height:220px}.story-content{padding-top:3px;padding-bottom:4px}.story-copy .handnote{margin:5px 0 10px}h2{font-size:26px;margin-bottom:12px}.story-kicker{margin-bottom:3px}.story-footer{padding-bottom:17px}.ending-art{height:155px}.ending h2{font-size:28px}.signature{margin:16px 0 8px}}
@media(max-height:590px){body{display:block}.letter{height:590px;max-height:none;min-height:590px;margin:auto}.outside-note{text-align:center}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Gift story illustrations */
.story-art img,.ending-art img{display:block;width:100%;height:100%;object-fit:contain}
.progress{gap:4px}

/* The envelope opens; the pages turn; the finished gift catches the light. */
.welcome-art svg{animation:envelope-sway 5.5s ease-in-out infinite;transform-origin:50% 65%;will-change:transform}
.welcome-art svg>g>g:first-of-type{transform-origin:170px 160px}
.welcome-content>.handnote{animation:ink-appear .75s .12s both}
.welcome h1{animation:ink-appear .75s .22s both}
.welcome-content>.description{animation:ink-appear .75s .34s both}
.is-opening .welcome-art svg{animation:envelope-open .52s cubic-bezier(.4,0,.2,1) both}
.is-opening .welcome-art svg rect{transform-box:fill-box;transform-origin:50% 100%;animation:note-open .52s ease both}
.is-opening .welcome-bottom{opacity:.5;transition:opacity .3s}
.story-art img,.ending-art img{animation:illustration-breathe 6.5s ease-in-out infinite;will-change:transform}
.story-art{position:relative;isolation:isolate}
.gift-glow::before{content:'';position:absolute;inset:10% 9%;z-index:-1;background:radial-gradient(ellipse,#fad5de7d 0%,#fff0 70%);animation:gift-light 4s ease-in-out infinite}
.ending-art{position:relative;isolation:isolate}
.ending-art::before{content:'';position:absolute;inset:15%;z-index:-1;background:radial-gradient(ellipse,#fad5de8a,#fff0 70%);animation:gift-light 4s ease-in-out infinite}
.ending .signature{animation:ink-appear .9s .25s both}
.primary,.round-button{transition:background .22s,transform .22s,box-shadow .22s}
.primary:hover{box-shadow:0 5px 20px #c9809819;transform:translateY(-2px)}
.primary:active,.round-button:active{transform:scale(.95)}
.round-button:not(:disabled):hover svg{transform:translateX(1px)}
.round-button svg{transition:transform .22s}
.progress span{position:relative;overflow:hidden;transition:background .32s,transform .32s}
.progress .current span{transform:scaleY(1.2)}
.progress .current span::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,#ffffff8a,transparent);animation:progress-glint .8s ease-out both}
.motion-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:5}
.letter-particle{position:absolute;left:var(--x);top:var(--y);color:#ce839b;font-family:Georgia,serif;font-size:22px;opacity:0;animation:letter-confetti 1.75s var(--delay) cubic-bezier(.2,.65,.25,1) both}
.letter-particle:nth-child(3n){color:#bda0c7;font-size:18px}
.letter-particle:nth-child(4n){font-size:14px;color:#dfa5b7}
.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation-play-state:paused!important}
@keyframes envelope-sway{0%,100%{transform:translateY(0) rotate(-.7deg)}50%{transform:translateY(-7px) rotate(.7deg)}}
@keyframes envelope-open{0%{transform:translateY(0) scale(1)}45%{transform:translateY(-13px) scale(1.035)}100%{transform:translateY(-30px) scale(.97);opacity:0}}
@keyframes note-open{to{transform:translateY(-30px) rotate(3deg)}}
@keyframes illustration-breathe{0%,100%{transform:translateY(0) rotate(-.25deg)}50%{transform:translateY(-4px) rotate(.25deg)}}
@keyframes ink-appear{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes gift-light{0%,100%{opacity:.45;transform:scale(.95)}50%{opacity:1;transform:scale(1.07)}}
@keyframes progress-glint{from{transform:translateX(-110%)}to{transform:translateX(110%)}}
@keyframes letter-confetti{0%{opacity:0;transform:translate(0,12px) scale(.6)}18%{opacity:.75}70%{opacity:.5}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--spin)) scale(1.1)}}
html.telegram body{padding:0;background:white;min-height:var(--tg-viewport-stable-height,100svh);justify-content:flex-start}
html.telegram .letter{height:var(--tg-viewport-stable-height,100svh);min-height:0;max-height:none;max-width:none;border:0;border-radius:0;box-shadow:none;padding-top:calc(max(env(safe-area-inset-top,0px),var(--letter-safe-top,0px)) + var(--letter-content-top,0px));padding-bottom:calc(max(env(safe-area-inset-bottom,0px),var(--letter-safe-bottom,0px)) + var(--letter-content-bottom,0px));padding-left:calc(var(--letter-safe-left,0px) + var(--letter-content-left,0px));padding-right:calc(var(--letter-safe-right,0px) + var(--letter-content-right,0px))}
html.telegram .outside-note{display:none}
@media(max-height:590px){html.telegram .header{height:48px}html.telegram .story-art{height:175px;min-height:80px}html.telegram .story-copy .handnote{font-size:13px;margin:3px 0 6px}html.telegram h2{font-size:23px;margin-bottom:8px}html.telegram .description{font-size:12px;line-height:1.65}html.telegram .story-footer{padding-bottom:12px}html.telegram .welcome-art{height:135px;min-height:80px}html.telegram .welcome h1{font-size:28px}html.telegram .ending-art{height:120px;min-height:70px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;will-change:auto!important}.letter-particle{display:none}}