:root{--s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:40px;--s6:48px;--s8:64px;--s10:80px;--s12:96px;--r1:8px;--r2:16px;--r3:24px;--ink:#3b1c2c;--ink-2:#7b5a69;--rose:#df5d8c;--rose-ink:#b83d6c;--paper:#fffaf4;--white:#fff;--rule:#3b1c2c24;--shade:40, 12, 30;--sans:"Mona Sans", system-ui, -apple-system, "Segoe UI", sans-serif;--script:"Sacramento", "Snell Roundhand", "Apple Chancery", cursive}*{box-sizing:border-box}[hidden]{display:none!important}p,h1{margin:0}html,body{height:100%;color:var(--ink);font:400 16px/24px var(--sans);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;background:#f2dcdc;margin:0;overflow:hidden}#scene{touch-action:none;width:100vw;height:100dvh;display:block;position:fixed;inset:0}button,input,textarea{font:inherit;color:inherit}button{cursor:pointer}:focus-visible{outline:2px solid var(--rose);outline-offset:2px}.script{font-family:var(--script);letter-spacing:0;font-weight:400}.fps{top:calc(var(--s1) + env(safe-area-inset-top));left:var(--s1);z-index:30;padding:0 var(--s1);border-radius:var(--r1);font:600 12px/24px var(--sans);font-variant-numeric:tabular-nums;color:var(--white);background:rgba(var(--shade), .6);pointer-events:none;position:fixed}.pill{appearance:none;height:var(--s6);padding:0 var(--s3);border-radius:var(--r3);font:600 16px/24px var(--sans);color:var(--white);background:var(--rose);box-shadow:0 var(--s1) var(--s2) #df5d8c59;border:0;transition:transform .2s}.pill:active{transform:scale(.96)}.pill.glass{color:var(--ink);box-shadow:inset 0 1px 0 #fffc, 0 var(--s1) var(--s3) rgba(var(--shade), .18)}.glass{-webkit-backdrop-filter:blur(24px)saturate(180%)brightness(1.04);backdrop-filter:blur(24px)saturate(180%)brightness(1.04);box-shadow:inset 0 1px 0 #ffffffd9, inset 0 -1px 0 #ffffff40, 0 2px var(--s1) rgba(var(--shade), .08), 0 var(--s2) var(--s6) rgba(var(--shade), .18);background:linear-gradient(160deg,#ffffffa8,#fffafc6b);position:relative}.glass:after{content:"";border-radius:inherit;-webkit-mask-composite:xor;pointer-events:none;background:linear-gradient(150deg,#fffffff2,#ffffff40 35%,#ffffff14 65%,#fff9);padding:1px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.glass{background:#fffafceb}}.glass-card{width:min(344px,100%);padding:var(--s4) var(--s3) var(--s3);border-radius:var(--r3);text-align:center}.loader{padding:var(--s3);z-index:20;background:radial-gradient(120% 70% at 50% 0,#8fb6f2 0%,#8fb6f200 60%),linear-gradient(#b9d0f4,#f3dbe6 62%,#fbe9e4);place-items:center;transition:opacity 1.2s;display:grid;position:fixed;inset:0}.loader.done{opacity:0;pointer-events:none}.loader-inner{align-items:center;gap:var(--s2);transform:translateY(calc(var(--s4) * -1));flex-direction:column;display:flex}.loader-bloom{width:var(--s10);height:var(--s10);filter:drop-shadow(0 var(--s1) var(--s2) #c85a824d);overflow:visible}.loader-bloom .petals{fill:#fff4f7;stroke:#f1a7c0;stroke-width:1.4px;transform-origin:0 0;animation:9s linear infinite bloom-spin}.loader-bloom .heart{fill:var(--rose)}@keyframes bloom-spin{to{transform:rotate(360deg)}}.loader-line{font:400 40px/48px var(--script);color:var(--ink)}.loader-bar{border-radius:var(--r1);background:#ffffffa6;width:160px;height:4px;overflow:hidden}.loader-bar span{background:var(--rose);width:0%;height:100%;transition:width .35s;display:block}.loader-pct{font:600 12px/16px var(--sans);font-variant-numeric:tabular-nums;color:var(--ink-2)}.gate{padding:var(--s2) var(--s2) var(--s12);z-index:5;pointer-events:none;place-items:center;display:grid;position:fixed;inset:0}.gate .card{pointer-events:auto;opacity:0;transform:translateY(var(--s2));transition:opacity 1.2s,transform 1.2s cubic-bezier(.2,.8,.2,1)}.gate.show .card{opacity:1;transform:none}.gate.leave .card{opacity:0;transform:translateY(calc(var(--s3) * -1)) scale(.96);transition:opacity 1.1s,transform 1.1s}.gate .eyebrow{font:500 14px/24px var(--sans);color:var(--ink-2)}.question{margin-top:var(--s1);font:600 24px/32px var(--sans);letter-spacing:-.01em;color:var(--ink);flex-direction:column;align-items:center;font-stretch:105%;display:flex}.question em{margin-top:var(--s1);font:400 64px/64px var(--script);color:var(--rose-ink);font-style:normal}.field{align-items:center;gap:var(--s1);height:var(--s8);margin-top:var(--s3);padding:0 var(--s1) 0 var(--s2);border-radius:var(--r2);background:#ffffffd1;border:1px solid #ffffffe6;transition:border-color .3s;display:flex}.field:focus-within{border-color:var(--rose)}.field input{min-width:0;height:var(--s6);font:500 20px/24px var(--sans);color:var(--ink);background:0 0;border:0;outline:none;flex:1}.field input::placeholder{color:#b79aa8;font-weight:400}.field button{width:var(--s6);height:var(--s6);border-radius:var(--r3);color:var(--white);background:var(--rose);border:0;flex:none;place-items:center;transition:transform .2s;display:grid}.field button:active{transform:scale(.94)}.reply{min-height:var(--s3);margin-top:var(--s2);font:500 16px/24px var(--sans);color:var(--rose-ink)}.card.shake{animation:.5s shake}@keyframes shake{20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-8px)}80%{transform:translate(0)}}.title{z-index:4;padding:calc(var(--s12) + env(safe-area-inset-top)) var(--s2) 0;text-align:center;color:var(--white);pointer-events:none;text-shadow:0 2px var(--s2) rgba(var(--shade), .45), 0 0 2px rgba(var(--shade), .35);flex-direction:column;align-items:center;transition:opacity 1.6s;display:flex;position:fixed;inset:0}.title.fade{opacity:0}.title .line-1{font:400 56px/64px var(--script)}.title .name{margin-top:calc(var(--s2) * -1);font:400 clamp(136px, 40vw, 240px) / 1 var(--script);font-weight:400}.title .line-2{margin-top:var(--s1);font:600 16px/24px var(--sans);letter-spacing:.02em;font-stretch:115%}.title .line-1,.title .name{clip-path:inset(-30% 100% -30% -10%);transition:clip-path 1.8s cubic-bezier(.5,0,.3,1)}.title .name{transition-duration:2.4s;transition-delay:.9s}.title .line-2{opacity:0;transform:translateY(var(--s1));transition:opacity 1.2s 3s,transform 1.2s 3s}.title.show .line-1,.title.show .name{clip-path:inset(-30% -10%)}.title.show .line-2{opacity:1;transform:none}.caption{left:50%;bottom:calc(208px + env(safe-area-inset-bottom));z-index:6;width:min(342px, calc(100% - var(--s4)));align-items:center;gap:var(--s1);padding:var(--s2) var(--s3);border-radius:var(--r3);text-align:center;color:var(--ink);pointer-events:none;opacity:0;transform:translate(-50%, var(--s1));flex-direction:column;transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.2,1);display:flex;position:fixed}.caption.show{opacity:1;transform:translate(-50%)}.caption .eyebrow:empty,.caption .aside:empty{display:none}.caption .eyebrow{font:600 14px/24px var(--sans);color:var(--ink-2)}.caption .line{font:500 20px/28px var(--sans);text-wrap:balance}.caption .aside{font:400 16px/24px var(--sans);color:var(--ink-2)}.caption.big .line,.caption.memory .line{font:400 48px/56px var(--script);color:var(--rose-ink)}.caption.big .line{font-size:56px;line-height:64px}.note{z-index:7;width:min(288px, calc(100% - var(--s6)));padding:var(--s3);border-radius:var(--r1);text-align:center;pointer-events:none;background:var(--paper);box-shadow:0 var(--s2) var(--s5) rgba(var(--shade), .28);opacity:0;transition:opacity .5s,transform .6s cubic-bezier(.2,1.4,.4,1);position:fixed;top:28%;left:50%;transform:translate(-50%)scale(.6)rotate(-6deg)}.note.show{opacity:1;transform:translate(-50%)scale(1)rotate(-2deg)}.note .title{font:400 40px/48px var(--script);color:var(--rose-ink);text-shadow:none;padding:0;display:block;position:static}.note .line{margin-top:var(--s1);font:500 16px/24px var(--sans);color:var(--ink)}.actions{left:0;right:0;bottom:calc(80px + env(safe-area-inset-bottom));z-index:7;align-items:center;gap:var(--s1);opacity:0;flex-direction:column;transition:opacity .8s;display:flex;position:fixed}.actions.show{opacity:1}.actions .meter{border-radius:var(--r1);opacity:0;background:#fff6;width:120px;height:4px;transition:opacity .4s;overflow:hidden}.actions .meter.on{opacity:1}.actions .meter span{background:var(--white);width:0%;height:100%;transition:width 80ms linear;display:block}.letter{z-index:9;padding:var(--s3) var(--s2);background:rgba(var(--shade), .35);opacity:0;place-items:center;transition:opacity .9s;display:grid;position:fixed;inset:0}.letter.show{opacity:1}.letter .paper{border-radius:var(--r1);background:var(--paper);width:min(360px,100%);box-shadow:0 var(--s4) var(--s8) rgba(var(--shade), .3);transform:translateY(var(--s5)) rotate(-1.5deg) scale(.92);transition:transform 1.1s cubic-bezier(.2,.9,.2,1);position:relative;overflow:hidden}.letter.show .paper{transform:rotate(-.5deg)}.letter .scroll{max-height:calc(100dvh - var(--s8));overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:var(--s5) var(--s4) var(--s4);background:repeating-linear-gradient(to bottom, transparent 0 31px, #df5d8c2e 31px 32px) 0 var(--s1) / 100% 100% local;scrollbar-width:none;overflow-y:auto}.letter .scroll::-webkit-scrollbar{display:none}.letter .scrollbar{top:var(--s2);bottom:var(--s2);opacity:0;background:#df5d8c1f;border-radius:2px;width:4px;transition:opacity .4s,width .2s,right .2s;position:absolute;right:6px}.letter .paper.scrollable .scrollbar{opacity:1}.letter .scrollbar span{border-radius:inherit;background:linear-gradient(to bottom, #f08bb0, var(--rose));touch-action:none;cursor:grab;position:absolute;inset:0 0 auto;box-shadow:0 1px 4px #df5d8c59}.letter .scrollbar span:before{content:"";position:absolute;inset:-4px -12px}.letter .paper.dragging .scrollbar,.letter .scrollbar:hover{border-radius:3px;width:6px;right:5px}.letter .paper.dragging .scrollbar span{cursor:grabbing}.letter .paper:after{content:"";height:var(--s6);background:linear-gradient(to bottom, #fffaf400, var(--paper));pointer-events:none;opacity:0;transition:opacity .3s;position:absolute;bottom:0;left:0;right:0}.letter .paper.more:after{opacity:1}.letter .greeting{font:400 48px/64px var(--script);color:var(--rose-ink)}.letter .body{margin-top:var(--s1)}.letter .body p{margin-bottom:var(--s4);font:400 16px/32px var(--sans);color:var(--ink)}.letter .closing{font:500 16px/32px var(--sans)}.letter .pill{margin:var(--s4) auto 0;display:block}.wish{z-index:8;padding:var(--s2) var(--s2) var(--s12);pointer-events:none;place-items:center;display:grid;position:fixed;inset:0}.wish .card{pointer-events:auto;opacity:0;transform:translateY(var(--s2));transition:opacity 1s,transform 1s cubic-bezier(.2,.8,.2,1)}.wish.show .card{opacity:1;transform:none}.wish.fold .card{opacity:0;transition:opacity .9s .3s,transform 1.1s cubic-bezier(.6,0,.3,1);transform:scale(.12)rotate(45deg)skew(12deg,12deg)}.wish .prompt{font:400 44px/48px var(--script);color:var(--ink);text-wrap:balance}.wish textarea{width:100%;margin-top:var(--s3);padding:var(--s2);resize:none;border-radius:var(--r2);font:400 16px/24px var(--sans);color:var(--ink);background:#ffffffd1;border:1px solid #ffffffe6;outline:none;display:block}.wish textarea:focus{border-color:var(--rose)}.wish-private{margin-top:var(--s2);font:500 14px/24px var(--sans);color:var(--ink-2)}.wish-share{align-items:center;gap:var(--s1);margin-top:var(--s1);font:600 14px/24px var(--sans);color:var(--ink);cursor:pointer;display:inline-flex}.wish-share input{appearance:none;width:var(--s3);height:var(--s3);border-radius:var(--r1);background:var(--white) center / 16px 16px no-repeat;border:1.5px solid #3b1c2c4d;flex:none;margin:0;transition:background-color .2s,border-color .2s}.wish-share input:checked{border-color:var(--rose);background-color:var(--rose);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}.wish .pill{margin:var(--s3) auto 0;display:block}.ending{z-index:8;padding:calc(var(--s12) + env(safe-area-inset-top)) var(--s3) 0;text-align:center;color:var(--white);text-shadow:0 2px var(--s2) rgba(var(--shade), .5), 0 0 2px rgba(var(--shade), .35);opacity:0;pointer-events:none;flex-direction:column;align-items:center;transition:opacity 2.2s;display:flex;position:fixed;inset:0}.ending.show{opacity:1}.ending .line-1{font:400 72px/72px var(--script);text-wrap:balance}.ending .line-2{margin-top:var(--s2);font:600 16px/24px var(--sans);letter-spacing:.02em;font-stretch:115%}.ending .pill{margin-top:var(--s4);pointer-events:auto;text-shadow:none}.lyrics{left:var(--s3);right:var(--s3);bottom:calc(var(--s12) + env(safe-area-inset-bottom));z-index:6;text-align:center;font:400 32px/48px "Galada", var(--script);color:var(--white);text-wrap:balance;text-shadow:0 2px var(--s2) rgba(var(--shade), .55), 0 0 2px rgba(var(--shade), .4);pointer-events:none;opacity:0;transform:translateY(var(--s1));margin:0;transition:opacity .6s,transform .6s;position:fixed}.lyrics.show{opacity:1;transform:none}.sound{top:calc(var(--s2) + env(safe-area-inset-top));right:var(--s2);z-index:12;width:var(--s5);height:var(--s5);border-radius:var(--r3);color:var(--ink);cursor:pointer;border:0;place-items:center;padding:0;display:grid;position:fixed}.sound .cross,.sound[aria-pressed=true] .waves{display:none}.sound[aria-pressed=true] .cross{display:block}@media (prefers-reduced-motion:reduce){.gate .card,.title .line-1,.title .name{transition-duration:10ms}}.guide{z-index:7;pointer-events:none;opacity:0;transition:opacity .5s;position:fixed;inset:0}.guide.show{opacity:1}.guide-touch{left:var(--x);top:var(--y);width:0;height:0;position:absolute}.guide-dot{border:2px solid var(--white);width:32px;height:32px;box-shadow:0 var(--s1) var(--s3) #280c1e4d;background:#ffffff80;border-radius:50%;position:absolute;top:-16px;left:-16px}.guide-ring{opacity:0;border:2px solid #ffffffe6;border-radius:50%;width:32px;height:32px;position:absolute;top:-16px;left:-16px}.guide .hand{filter:drop-shadow(0 4px 8px #78325a59);width:40px;height:48px;position:absolute;top:-4px;left:-8px}.guide-label{left:50%;bottom:calc(var(--s3) + env(safe-area-inset-bottom));max-width:calc(100% - var(--s4));height:var(--s6);padding:0 var(--s3);border-radius:var(--r3);font:600 14px/24px var(--sans);white-space:nowrap;color:var(--ink);align-items:center;display:flex;position:fixed;transform:translate(-50%)}.guide-label:empty{display:none}.guide-track{opacity:0;position:absolute}.guide[data-kind=tap] .guide-touch{animation:1.6s ease-in-out infinite guide-press}.guide[data-kind=tap] .guide-ring{animation:1.6s ease-out infinite guide-ripple}.guide[data-kind=tap] .guide-ring.r2{animation-delay:.25s}@keyframes guide-press{0%,to{transform:translate(10px,14px)scale(1)}38%{transform:translate(0)scale(1)}48%{transform:translate(0)scale(.86)}60%{transform:translate(0)scale(1)}}@keyframes guide-ripple{0%,42%{opacity:0;transform:scale(.6)}50%{opacity:.95}to{opacity:0;transform:scale(2.6)}}.guide{--up:80px}.guide[data-kind=swipe-up] .guide-track{left:calc(var(--x) - 2px);top:calc(var(--y) - var(--up));width:4px;height:var(--up);border-radius:var(--r1);filter:drop-shadow(0 1px 3px #78325a73);background:linear-gradient(#ffffffe6,#fff0);animation:1.8s ease-in-out infinite guide-trail-up}.guide[data-kind=swipe-up] .guide-touch{animation:1.8s ease-in-out infinite guide-up}@keyframes guide-up{0%{opacity:0;transform:translateY(0)}15%{opacity:1;transform:translateY(0)}70%{opacity:1;transform:translateY(calc(var(--up) * -1))}to{opacity:0;transform:translateY(calc(var(--up) * -1))}}@keyframes guide-trail-up{0%,15%{opacity:0;clip-path:inset(100% 0 0)}70%{opacity:.9;clip-path:inset(0)}to{opacity:0;clip-path:inset(0)}}.guide[data-kind=swipe-across] .guide-track{left:calc(var(--x) - var(--w) / 2);top:calc(var(--y) - 2px);width:var(--w);filter:drop-shadow(0 1px 3px #78325a80);opacity:1;border-top:3px dashed #fffffff2;height:0}.guide[data-kind=swipe-across] .guide-touch{animation:2s ease-in-out infinite guide-across}@keyframes guide-across{0%{opacity:0;transform:translateX(calc(var(--w) / -2))}12%{opacity:1;transform:translateX(calc(var(--w) / -2))}72%{opacity:1;transform:translateX(calc(var(--w) / 2))}to{opacity:0;transform:translateX(calc(var(--w) / 2))}}@media (prefers-reduced-motion:reduce){.guide .guide-touch,.guide .guide-ring,.guide .guide-track{animation-duration:3s}}